/* Products page: the app screens shown on the laptops are real HTML/CSS, not screenshots. Crisp at any size, and they run.
   Each one is drawn on a 1000 x 625 canvas and scaled to the laptop screen by --s (products.js).
   Sample data only. transform / opacity / stroke only; starts when the product block comes into view (.pd.in). */
.lap-scr::before { display: none; }
.ui { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; transform: scale(var(--s, .6)); transform-origin: 0 0; font: 500 11px/1.3 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: #dfe6ee; text-align: left; overflow: hidden; background: #080c18; }
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui p, .ui h4 { margin: 0; }
.ui i, .ui em { font-style: normal; }
.ui img { display: block; }
.ui .ab { position: absolute; }
.ui .fx { display: flex; align-items: center; }
.ui-lt { background: #f3f5f8; color: #2a3340; }

/* entrance + loops */
.js .pd:not(.in) .ui .a { opacity: 0; }
.pd.in .ui .a { animation: u-in .7s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes u-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ui .gb { transform-origin: 50% 100%; transform-box: fill-box; }
.js .pd:not(.in) .ui .gb { transform: scaleY(.03); }
.pd.in .ui .gb { animation: u-gy .9s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes u-gy { from { transform: scaleY(.03); } to { transform: scaleY(1); } }
.ui .gx { transform-origin: 0 50%; transform-box: fill-box; }
.js .pd:not(.in) .ui .gx { transform: scaleX(.02); }
.pd.in .ui .gx { animation: u-gx 1s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes u-gx { from { transform: scaleX(.02); } to { transform: scaleX(1); } }
.ui .dr { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .pd:not(.in) .ui .dr { stroke-dashoffset: 1; }
.pd.in .ui .dr { animation: u-dr 1.6s cubic-bezier(.45,0,.2,1) both; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes u-dr { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* shared dark shell */
.u-top { position: absolute; left: 0; top: 0; right: 0; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 18px; background: #0b1020; border-bottom: 1px solid #1a2236; }
.u-top img { height: 20px; width: auto; }
.u-burger { width: 14px; height: 10px; border-top: 2px solid #8a97ad; border-bottom: 2px solid #8a97ad; position: relative; margin-left: 6px; }
.u-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 2px; background: #8a97ad; }
.u-sp { flex: 1; }
.u-ic { width: 20px; height: 20px; border-radius: 6px; background: #151d33; box-shadow: inset 0 0 0 1px #222c47; }
.u-side { position: absolute; left: 0; top: 40px; bottom: 0; width: 168px; padding: 14px 10px; background: #0a0f1d; border-right: 1px solid #1a2236; }
.u-si { display: flex; align-items: center; gap: 9px; height: 29px; padding: 0 10px; border-radius: 8px; color: #aab4c6; font-size: 10.5px; }
.u-si b { flex: none; width: 12px; height: 12px; border: 1.5px solid #6c7a93; border-radius: 3px; }
.u-si.on { background: rgba(247,134,30,.14); color: #f7861e; }
.u-si.on b { border-color: #f7861e; }
.u-si.sub { height: 26px; font-size: 10px; }
.u-pn { position: absolute; border-radius: 10px; background: #0d1322; box-shadow: 0 0 0 1px #1c243a; padding: 12px 14px; }
.u-pn h4 { font-size: 10.5px; font-weight: 700; color: #e8eef6; }
.u-muted { color: #7d8aa3; }
.u-btn { display: inline-grid; place-items: center; height: 22px; padding: 0 14px; border-radius: 6px; background: #f7861e; color: #fff; font-size: 10px; font-weight: 700; }
.u-btn.bl { background: #2f6bff; }
.u-sel { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 8px; border-radius: 6px; background: #0b1120; box-shadow: 0 0 0 1px #243049; color: #aab4c6; font-size: 9.5px; }

/* 1 Traceability */
.t-tab { position: relative; padding: 0 2px 8px; font-size: 10.5px; color: #8a97ad; }
.t-tab.on { color: #e8eef6; }
.t-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #f7861e; border-radius: 2px; }
.t-row { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 54px 1.1fr 1fr 1.7fr 1fr 1fr; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid #172035; font-size: 10.5px; }
.t-row.h { color: #aab4c6; font-weight: 700; height: 34px; }
.t-ok, .t-nok { display: inline-grid; place-items: center; width: 42px; height: 20px; border-radius: 4px; font-size: 9.5px; font-weight: 700; }
.t-ok { background: rgba(34,197,94,.16); color: #4ade80; }
.t-nok { background: rgba(239,68,68,.2); color: #f87171; }
.t-g { color: #4ade80; } .t-r { color: #f87171; }
.t-hl { position: absolute; left: 0; right: 0; top: 0; height: 40px; border-radius: 6px; background: rgba(247,134,30,.07); box-shadow: inset 0 0 0 1px rgba(247,134,30,.35); }
.pd.in .t-hl { animation: t-hl 8s steps(1, end) infinite; }
@keyframes t-hl { 0% { transform: translateY(34px); } 25% { transform: translateY(74px); } 50% { transform: translateY(114px); } 75% { transform: translateY(154px); } }
.pd.in .t-nok { animation: u-pulse 1.8s ease-in-out infinite; }
@keyframes u-pulse { 50% { box-shadow: 0 0 0 5px rgba(239,68,68,.0), 0 0 12px rgba(239,68,68,.55); } }

/* 2 Production monitoring */
.p-k { position: absolute; height: 58px; padding: 10px 12px; border-radius: 10px; background: #0d1322; box-shadow: 0 0 0 1px #1c243a; }
.p-k b { display: block; font-size: 20px; line-height: 1; font-weight: 700; color: #fff; }
.p-k span { display: block; margin-top: 5px; font-size: 9px; color: #8a97ad; }
.p-k i { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 6px; }
.p-ax { position: absolute; left: 0; right: 0; height: 1px; background: #1c2540; }
.p-lg { display: flex; align-items: center; gap: 6px; font-size: 8.5px; color: #aab4c6; }
.p-lg i { width: 7px; height: 7px; border-radius: 2px; }
.p-hb { height: 7px; border-radius: 4px; background: #1b2439; overflow: hidden; }
.p-hb i { display: block; height: 100%; border-radius: 4px; transform-origin: 0 50%; }
.p-pie { border-radius: 50%; background: conic-gradient(#2dd4bf 0 14%, #22c55e 14% 46%, #f59e0b 46% 66%, #ef4444 66% 80%, #3b82f6 80% 92%, #a78bfa 92% 100%); }
.pd.in .p-pie { animation: p-pie 1.4s cubic-bezier(.16,1,.3,1) both .5s; }
@keyframes p-pie { from { transform: rotate(-140deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.pd.in .p-donut { animation: p-don 7s ease-in-out infinite 2s; }
@keyframes p-don { 0%,100% { stroke-dashoffset: .4; } 50% { stroke-dashoffset: .34; } }

/* 3 Health monitoring */
.h-card { position: absolute; height: 54px; padding: 8px 10px; border-radius: 8px; background: #0f1729; box-shadow: 0 0 0 1px #223050; }
.h-card.al { background: #e23a3f; box-shadow: none; }
.pd.in .h-card.al { animation: h-al 1.6s ease-in-out infinite; }
@keyframes h-al { 50% { background: #b92a30; } }
.h-card small { display: block; font-size: 8px; font-weight: 700; color: #c5cfdd; letter-spacing: .02em; }
.h-card b { position: absolute; right: 12px; bottom: 9px; font-size: 17px; font-weight: 800; color: #fff; }
.h-card u { position: absolute; left: 10px; bottom: 9px; width: 24px; height: 24px; border-radius: 50%; border: 4px solid #f2f4f7; border-right-color: transparent; text-decoration: none; }
.h-card.al u { border-color: #fff; border-right-color: transparent; }
.pd.in .h-card u { animation: h-spin 3s linear infinite; }
@keyframes h-spin { to { transform: rotate(360deg); } }
.h-card i { position: absolute; right: 9px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.h-card.al i { background: #fff; }
.h-gau svg { display: block; width: 100%; height: auto; overflow: visible; }
.h-gau .nd { transform: rotate(var(--a)); transform-origin: 50px 52px; }
.pd.in .h-gau .nd { animation: h-nd 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes h-nd { 0% { transform: rotate(-90deg); } 14% { transform: rotate(var(--a)); } 55% { transform: rotate(calc(var(--a) + 9deg)); } 100% { transform: rotate(var(--a)); } }
.h-tb { position: relative; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #22c55e 0%, #84cc16 40%, #facc15 65%, #ef4444 100%); }
.h-tb::after { content: ""; position: absolute; top: -3px; left: var(--p); width: 3px; height: 15px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.7); }
.pd.in .h-tb::after { animation: h-tb 5s ease-in-out infinite; }
@keyframes h-tb { 50% { transform: translateX(14px); } }
.h-tile { display: grid; place-items: center; height: 22px; border-radius: 5px; background: #12301f; color: #4ade80; font-size: 8.5px; font-weight: 700; box-shadow: inset 0 0 0 1px #1f5a38; }

/* 4 Paperless factory */
.l-tile { position: absolute; display: grid; place-items: center; width: 207px; height: 79px; border-radius: 10px; background: #1ea0f5; color: #eaf6ff; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 8px 14px -8px rgba(30,160,245,.7); }
.pd.in .l-tile.hot { animation: l-hot 9s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes l-hot { 0%,60%,100% { transform: none; background: #1ea0f5; } 66%,80% { transform: scale(.96); background: #0f6fc0; box-shadow: 0 0 0 4px rgba(30,160,245,.25); } }

/* 5 ERP connect */
.e-dot { fill: #f7861e; }
.pd.in .e-r { animation: e-r 2.6s linear infinite; animation-delay: calc(var(--d, 0) * 1s); }
.pd.in .e-l { animation: e-l 2.6s linear infinite; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes e-r { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { translate: 150px 0; opacity: 0; } }
@keyframes e-l { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { translate: -150px 0; opacity: 0; } }
.pd.in .e-sat { animation: e-sat 5s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes e-sat { 50% { translate: 0 -5px; } }

/* 6 Energy management */
.n-card { position: absolute; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(20,30,50,.18); padding: 10px 12px; }
.n-card h4 { font-size: 10.5px; font-weight: 700; color: #4a5565; }
.n-card small { display: block; margin-top: 2px; font-size: 8px; color: #98a2b3; }
.pd.in .n-cur { animation: n-cur 9s linear infinite; }
@keyframes n-cur { from { transform: translateX(0); } to { transform: translateX(var(--w)); } }
.pd.in .n-fl { animation: n-fl 3.4s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes n-fl { 50% { opacity: .55; } }

/* 7 Tool life */
.o-pn { position: absolute; left: 0; right: 0; height: 205px; padding: 0 14px; background: #050505; }
.o-pn + .o-pn { border-top: 1px solid #1a1a1a; }
.o-h { position: absolute; left: 14px; top: 16px; font-size: 16px; font-weight: 800; color: #fff; }
.o-back { position: absolute; right: 18px; top: 12px; display: grid; place-items: center; width: 78px; height: 26px; border-radius: 3px; border: 1px solid #aaa; font-size: 11px; font-weight: 700; color: #fff; }
.o-t { position: absolute; left: 14px; right: 18px; top: 62px; display: grid; grid-template-columns: 34px 1fr 1.3fr 1.4fr 1.4fr 1.3fr 1.6fr; align-items: center; font-size: 10px; text-align: center; }
.o-t.h { top: 56px; font-weight: 800; color: #fff; }
.o-t.d { top: 100px; height: 34px; color: #e8e8e8; }
.o-line { position: absolute; left: 14px; right: 18px; height: 1px; background: #262626; }
.o-bar { position: relative; height: 17px; width: 78px; margin: 0 auto; border-radius: 2px; background: #1c1c1c; overflow: hidden; }
.o-bar i { position: absolute; inset: 0 auto 0 0; display: grid; place-items: center; font-size: 8px; font-weight: 800; color: #111; transform-origin: 0 50%; }
.pd.in .o-bar i { animation: o-fill 8s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes o-fill { 0% { transform: scaleX(.05); } 18%,88% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }

/* 8 Part program management */
.g-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 56px; padding-top: 12px; background: #3a4d63; }
.g-rail div { display: grid; justify-items: center; gap: 4px; height: 48px; padding-top: 7px; font-size: 6.5px; color: #cfd9e5; }
.g-rail div b { width: 15px; height: 15px; border: 1.5px solid #cfd9e5; border-radius: 3px; }
.g-rail div.on { background: #f09a2e; color: #fff; }
.g-rail div.on b { border-color: #fff; }
.g-code { position: absolute; top: 0; bottom: 0; background: #fff; box-shadow: 0 0 0 1px #d6dbe3; font: 500 8.5px/17px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #3a4350; overflow: hidden; }
.g-ln { position: relative; display: block; height: 17px; padding-left: 38px; white-space: nowrap; }
.g-ln em { position: absolute; left: 0; top: 0; width: 28px; text-align: right; color: #9aa3b0; }
.g-ln.del { background: #fde2e2; } .g-ln.add { background: #dcf6df; }
.pd.in .g-ln.del, .pd.in .g-ln.add { animation: g-d 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes g-d { 0%,18% { filter: none; } 30%,50% { filter: saturate(2.2) brightness(.93); } 70%,100% { filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .ui *, .ui *::before, .ui *::after { animation: none !important; }
  .js .pd:not(.in) .ui .a { opacity: 1; }
  .js .pd:not(.in) .ui .gb, .js .pd:not(.in) .ui .gx { transform: none; }
  .js .pd:not(.in) .ui .dr { stroke-dashoffset: 0; }
}

.ui .tk { opacity: 1; }
.js .pd:not(.in) .ui .tk { opacity: 0; }
.pd.in .ui .tk { animation: u-tk .4s ease both; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes u-tk { from { opacity: 0; } to { opacity: 1; } }
.lap-cap { margin-top: 26px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #98a2b3; }