/* Case Studies as stories: hero, scroll-stop chapters, 3D laptops with live screens, film pop-up, hands-on tools. */
.st-page{--ink:#121a24;--ink2:#5b6672;--acc:#2f6fd6;--acc2:#4a8fc0;--paper:#f5f6f3;--h:Manrope,'DM Sans',system-ui,sans-serif;--b:'DM Sans',Inter,system-ui,sans-serif;font-family:var(--b);background:var(--paper);color:var(--ink)}
body.dark .st-page{--ink:#eef2f6;--ink2:#9aa7b4;--acc:#9bb8ff;--acc2:#7fd3ec;--paper:#0b1017}

/* ---------- Hero ---------- */
.st-hero{text-align:center;padding:clamp(110px,15vh,170px) 6vw clamp(70px,10vh,110px);max-width:1100px;margin:0 auto}
.st-kicker{font:600 13px var(--b);letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin:0 0 22px}
.st-hero h1{font:700 clamp(44px,5.6vw,88px)/1.02 var(--h);letter-spacing:-.05em;margin:0;color:var(--ink)}
.st-hero h1 span{color:var(--acc2);font-weight:600}
.st-lede{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--ink2);max-width:600px;margin:26px auto 0}
.st-index{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px}
.st-index a{font:500 15px var(--b);color:var(--ink);text-decoration:none;padding:12px 20px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px -16px rgba(20,40,70,.35),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);transition:transform .3s,background .3s}
.st-index a:hover{transform:translateY(-2px);background:rgba(255,255,255,.8)}
body.dark .st-index a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:0 10px 30px -16px #000,inset 0 1px 0 rgba(255,255,255,.08)}
.cs .reel + .st-hero{padding-top:clamp(90px,12vh,140px)}

/* ---------- Story chapter (scroll-stop) ---------- */
.st{position:relative;height:300vh}
.st-pin{position:sticky;top:72px;height:calc(100svh - 72px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6vw;align-items:center;width:min(1320px,calc(100% - 10vw));margin:0 auto}
.st-flip .st-pin{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.st-flip .st-copy{order:2}
.st-num{font:600 13px var(--b);letter-spacing:.18em;text-transform:uppercase;color:var(--acc);margin:0 0 16px}
.st-copy h2{font:700 clamp(30px,3vw,48px)/1.08 var(--h);letter-spacing:-.04em;margin:0 0 30px;max-width:17ch}
.st-rail{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 26px}
.st-rail li{flex:1;font:600 11px var(--b);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);opacity:.55;transition:opacity .4s,color .4s}
.st-rail li i{display:block;height:3px;border-radius:3px;background:currentColor;opacity:.25;margin-bottom:9px;transition:opacity .4s}
.st-rail li.is-past{opacity:.8}.st-rail li.is-past i{opacity:.6}
.st-rail li.is-on{opacity:1;color:var(--acc)}.st-rail li.is-on i{opacity:1}
.st-beats{position:relative;min-height:190px}
.st-beat{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.st-beat.is-on{opacity:1;transform:none;pointer-events:auto}
.st-beat h3{font:600 13px var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0 0 12px}
.st-beat p{font-size:clamp(18px,1.45vw,23px);line-height:1.5;margin:0;color:var(--ink);max-width:30ch}
.st-meta{font-size:13px;letter-spacing:.04em;color:var(--ink2);margin:8px 0 22px;max-width:46ch;line-height:1.6}
.st-acts{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.st-watch{display:inline-flex!important;align-items:center;gap:10px;padding:12px 20px 12px 14px!important;border-radius:999px!important;font:600 14.5px var(--b)!important;color:var(--ink)!important;background:rgba(255,255,255,.6)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 12px 30px -16px rgba(20,40,70,.4),inset 0 1px 0 #fff!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;transition:transform .3s!important}
.st-watch:hover{transform:translateY(-2px)!important}
.st-watch svg{width:24px;height:24px;color:var(--acc)}
body.dark .st-watch{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.14)!important;box-shadow:none!important}
.st-lab{font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.st-device{margin:0;display:flex;justify-content:center;align-items:center}

/* ---------- NX laptop (CSS 3D) ---------- */
.nx-lap{--w:min(540px,37vw);--rx:-16deg;width:var(--w);font-size:calc(var(--w) / 100);height:calc(var(--w) * .92);position:relative;perspective:3400px;perspective-origin:50% 30%}

















/* ---------- Screens (live visual stories) ---------- */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;font:400 1.8em/1.3 var(--b);color:#dbe6f4;background:radial-gradient(120% 90% at 80% 0%,#173257,#0b1422 70%);padding:1.1em 1.3em;gap:.8em}
.scr small{display:block;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:#8aa6c8;margin-bottom:.4em}
.scr-bar{display:flex;align-items:center;gap:.6em;padding-bottom:.7em;border-bottom:1px solid rgba(140,170,220,.16)}
.scr-bar b{font:700 1.05em var(--h);letter-spacing:-.01em;color:#fff;margin-right:auto}
.chip{font-size:.7em;padding:.25em .7em;border-radius:99px;background:rgba(120,160,255,.14);color:#bcd2ff;border:1px solid rgba(140,170,255,.2)}
.chip.live:before{content:'';display:inline-block;width:.55em;height:.55em;border-radius:50%;background:#5fe0a8;margin-right:.4em;box-shadow:0 0 .6em #5fe0a8;animation:nxpulse 1.6s infinite}
@keyframes nxpulse{50%{opacity:.35}}
.bar{height:.5em;border-radius:1em;background:rgba(255,255,255,.08);overflow:hidden;flex:1}
.bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#4f7cff,#5fe0c8);transition:width 2.4s cubic-bezier(.3,.7,.2,1)}

/* S1 synthetic */
.s1-body{flex:1;display:grid;grid-template-columns:34% 1fr;gap:1em;min-height:0}
.s1-cfg{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:.8em;padding:.9em;position:relative;overflow:hidden}
.cfg{display:flex;justify-content:space-between;gap:.5em;font-size:.82em;padding:.45em 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cfg span{color:#9fb3cc}.cfg b{color:#fff;font-weight:600;text-align:right}
.cfg.slide{border:0;height:.5em;margin-top:.8em;border-radius:1em;background:rgba(255,255,255,.08);position:relative}
.cfg.slide i{position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:1em;background:#4f7cff;transition:width 2s .3s}
.s1-blocked{position:absolute;inset:auto .9em .9em;padding:.7em;border-radius:.6em;background:rgba(255,120,100,.12);border:1px solid rgba(255,140,120,.35);font-size:.75em;color:#ffcdc2;transition:opacity .6s}
.s1-blocked b{color:#ff9f8a}
.s1-feed{display:flex;flex-direction:column;gap:.55em;overflow:hidden}
.pt{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .5em;padding:.6em .8em;border-radius:.7em;background:rgba(255,255,255,.05);border:1px solid rgba(140,170,255,.12);opacity:0;transform:translateX(1.5em);transition:opacity .5s,transform .6s}
.pt b{font-size:.85em;color:#fff;font-weight:600}.pt span{font-size:.75em;color:#8fa6c4;margin-right:auto}
.pt em{font-style:normal;font-size:.66em;padding:.2em .55em;border-radius:.4em;background:rgba(95,224,200,.12);color:#9ff0de}
.pt i{font-style:normal;color:#5fe0a8;font-size:.9em;opacity:0;transition:opacity .4s .5s}
.scr-foot{display:flex;align-items:center;gap:.9em;font-size:.72em;color:#9fb3cc}
.s1-ex{opacity:0;transition:opacity .5s;white-space:nowrap}.s1-ex:before{content:'✓ ';color:#5fe0a8}
.nx-lap[data-phase="2"] .pt,.nx-lap[data-phase="3"] .pt,.nx-lap[data-phase="4"] .pt{opacity:1;transform:none}
.nx-lap[data-phase="2"] .pt:nth-child(2){transition-delay:.4s}.nx-lap[data-phase="2"] .pt:nth-child(3){transition-delay:.8s}.nx-lap[data-phase="2"] .pt:nth-child(4){transition-delay:1.2s}
.nx-lap[data-phase="3"] .pt i,.nx-lap[data-phase="4"] .pt i{opacity:1}
.nx-lap:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .s1-blocked{opacity:0}
.nx-lap:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .cfg.slide i{width:78%}
.nx-lap:is([data-phase="2"]) .s1 .bar i{width:55%}
.nx-lap:is([data-phase="3"],[data-phase="4"]) .s1 .bar i{width:100%}
.nx-lap:is([data-phase="3"],[data-phase="4"]) .s1-ex{opacity:1}
.nx-lap:is([data-phase="3"],[data-phase="4"]) .s1-ex:nth-child(3){transition-delay:.3s}.nx-lap:is([data-phase="3"],[data-phase="4"]) .s1-ex:nth-child(4){transition-delay:.6s}

/* S2 standards */
.s2-body{flex:1;display:grid;grid-template-columns:22% 1fr;gap:1em;min-height:0}
.s2-nav{display:flex;flex-direction:column;gap:.3em;font-size:.8em}
.s2-nav span{padding:.5em .7em;border-radius:.5em;color:#9fb3cc}.s2-nav .on{background:rgba(120,160,255,.15);color:#fff}
.s2-main{display:flex;flex-direction:column;gap:.15em;min-width:0}
.s2-head,.s2-row{display:grid;grid-template-columns:1.5fr 1.3fr .5fr .9fr;gap:.6em;align-items:center;font-size:.78em;padding:.5em .6em}
.s2-head{color:#7f97b8;font-size:.66em;letter-spacing:.1em;text-transform:uppercase}
.s2-row{border-radius:.5em;background:rgba(255,255,255,.035)}
.s2-row b{color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s2-row span{color:#a9bbd2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ver{font-family:'Geist Mono',ui-monospace,monospace;font-size:.9em}
.st-chip{position:relative;height:1.6em}
.st-chip i{position:absolute;left:0;top:0;font-style:normal;font-size:.85em;padding:.2em .6em;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .4s calc(var(--d)*.15s)}
.c-draft{background:rgba(255,140,110,.15);color:#ffb7a3}.c-review{background:rgba(255,205,100,.14);color:#ffd98a}.c-ok{background:rgba(95,224,168,.14);color:#8ff0c4}
.nx-lap:is([data-phase="0"],[data-phase="1"]) .c-draft{opacity:1}
.nx-lap[data-phase="2"] .c-review{opacity:1}
.nx-lap:is([data-phase="3"],[data-phase="4"]) .c-ok{opacity:1}
.nx-lap:is([data-phase="0"],[data-phase="1"]) .s2-row:nth-child(odd){transform:translateX(.6em) rotate(-.4deg);opacity:.7}
.s2-row{transition:transform .6s,opacity .6s}
.s2-cov{display:flex;align-items:center;gap:.8em;margin-top:auto;font-size:.75em;color:#9fb3cc;padding-top:.6em}
.s2-cov b{color:#fff;min-width:3em;text-align:right}
.nx-lap[data-phase="2"] .s2 .bar i{width:58%}.nx-lap:is([data-phase="3"],[data-phase="4"]) .s2 .bar i{width:100%}

/* S3 dashboard */
.s3{position:absolute}
.s3-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.s3-kpis div{padding:.7em .9em;border-radius:.7em;background:rgba(255,255,255,.05);border:1px solid rgba(140,170,255,.14)}
.s3-kpis b{font:700 1.9em/1 var(--h);letter-spacing:-.03em;color:#fff}
.s3-body{flex:1;display:grid;grid-template-columns:1.5fr 1fr;gap:1em;min-height:0}
.s3-bars{display:flex;flex-direction:column;gap:.38em}
.hb{display:grid;grid-template-columns:42% 1fr;align-items:center;gap:.6em;font-size:.7em;color:#a9bbd2}
.hb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb i{height:.9em;border-radius:.3em;background:linear-gradient(90deg,#3f6cf0,#62c7e8);width:0;transition:width 1.2s calc(var(--d)*.1s) cubic-bezier(.3,.7,.2,1)}
.nx-lap:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .hb i{width:var(--w)}
.s3-side{display:flex;flex-direction:column;align-items:center;gap:.3em}
.donut{width:52%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:5.5;stroke-dasharray:0 100;transition:stroke-dasharray 1.4s,stroke-dashoffset 1.4s}
.donut .d0{stroke:#4f7cff}.donut .d1{stroke:#62c7e8}.donut .d2{stroke:#8f7bff}.donut .d3{stroke:#5fe0a8}
.nx-lap:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .donut .d0{stroke-dasharray:38 62}
.nx-lap:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .donut .d1{stroke-dasharray:26 74;stroke-dashoffset:-38}
.nx-lap:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .donut .d2{stroke-dasharray:21 79;stroke-dashoffset:-64}
.nx-lap:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .donut .d3{stroke-dasharray:15 85;stroke-dashoffset:-85}
.spark{width:100%}.spark path{fill:none;stroke:#62c7e8;stroke-width:1.6;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 2s .4s}
.nx-lap:is([data-phase="2"],[data-phase="3"],[data-phase="4"]) .spark path{stroke-dashoffset:0}
.s3-old{position:absolute;inset:28% 18% auto;padding:1.4em;border-radius:.9em;text-align:center;background:#eceae3;color:#4a4a44;font-size:1em;box-shadow:0 1em 3em rgba(0,0,0,.4);transform:rotate(-3deg);transition:opacity .6s,transform .8s}
.s3-old b{color:#c0533a}
.nx-lap:not([data-phase="0"]):not([data-phase="1"]) .s3-old{opacity:0;transform:rotate(-3deg) translateY(2em) scale(.9)}

/* S4 automation */
.s4-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em}
.s4-card{position:relative;padding:.8em .9em;border-radius:.8em;background:rgba(255,255,255,.05);border:1px solid rgba(140,170,255,.14);display:flex;flex-direction:column;gap:.35em;opacity:.35;transition:opacity .5s,border-color .5s,box-shadow .5s}
.s4-card b{color:#fff;font-weight:600;font-size:.9em}
.s4-card code{font:.7em 'Geist Mono',ui-monospace,monospace;color:#9ff0de}
.s4-btn,.s4-done{align-self:flex-start;font-size:.72em;font-weight:600;padding:.35em .9em;border-radius:99px;margin-top:.2em}
.s4-btn{background:#4f7cff;color:#fff;box-shadow:0 0 0 0 rgba(79,124,255,.6);animation:nxring 1.6s infinite}
.s4-done{display:none;background:rgba(95,224,168,.16);color:#8ff0c4}
@keyframes nxring{70%{box-shadow:0 0 0 .7em rgba(79,124,255,0)}}
.s4-log{flex:1;padding:.8em .9em;border-radius:.8em;background:rgba(0,0,0,.25);font:.72em/1.7 'Geist Mono',ui-monospace,monospace;color:#9fb3cc}
.s4-log p{margin:0;opacity:0;transition:opacity .4s}
.s4-warn{position:absolute;left:1.3em;right:1.3em;bottom:1.1em;padding:.7em .9em;border-radius:.6em;background:rgba(255,120,100,.12);border:1px solid rgba(255,140,120,.35);font-size:.78em;color:#ffcdc2;transition:opacity .5s}
.s4-warn b{color:#ff9f8a}
.nx-lap:not([data-phase="0"]):not([data-phase="1"]) .s4-warn{opacity:0}
.nx-lap:not([data-phase="0"]):not([data-phase="1"]) .c-in,.nx-lap:not([data-phase="0"]):not([data-phase="1"]) .c-ag{opacity:1}
.nx-lap:not([data-phase="0"]):not([data-phase="1"]) .c-hu{opacity:1;border-color:rgba(79,124,255,.7);box-shadow:0 0 2em -.5em rgba(79,124,255,.6)}
.nx-lap:not([data-phase="0"]):not([data-phase="1"]) .s4-log .l0,.nx-lap:not([data-phase="0"]):not([data-phase="1"]) .s4-log .l1,.nx-lap:not([data-phase="0"]):not([data-phase="1"]) .s4-log .l2{opacity:1}
.nx-lap:is([data-phase="3"],[data-phase="4"]) .s4-btn{display:none}
.nx-lap:is([data-phase="3"],[data-phase="4"]) .s4-done{display:inline-block}
.nx-lap:is([data-phase="3"],[data-phase="4"]) .c-hu{border-color:rgba(95,224,168,.6);box-shadow:0 0 2em -.5em rgba(95,224,168,.5)}
.nx-lap:is([data-phase="3"],[data-phase="4"]) .s4-log .l3{opacity:1;color:#8ff0c4}

/* ---------- Film pop-up ---------- */
.nx-film{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;margin:0}
.nx-film::backdrop{background:rgba(6,10,18,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nx-film-in{position:absolute;left:50%;top:50%;width:min(1100px,92vw);transform:translate(-50%,-50%);padding:14px;border-radius:22px;background:rgba(20,26,36,.7);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 120px -30px #000}
.nx-film video{display:block;width:100%;border-radius:12px;background:#000;max-height:76vh}
.nx-film-cap{margin:2px 4px 12px;font:600 13px var(--b,'DM Sans');letter-spacing:.14em;text-transform:uppercase;color:#a9bbd2}
.nx-film-x{position:absolute!important;right:14px;top:8px;width:36px!important;height:36px!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.2)!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font-size:22px!important;line-height:1!important;cursor:pointer;padding:0!important;box-shadow:none!important}

/* ---------- Hands-on engineering ---------- */
.hx{padding:clamp(90px,12vh,140px) 0 clamp(60px,9vh,100px);background:radial-gradient(80% 70% at 50% 0%,#15305a 0%,#0a1427 60%,#070d1a 100%);color:#e8eef9}
.hx-head{text-align:center;max-width:860px;margin:0 auto 46px;padding:0 6vw}
.hx-tags{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.hx-tags span{font:600 14px var(--b);letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;border-radius:999px;color:#cfe0ff;background:rgba(255,255,255,.07);border:1px solid rgba(160,190,255,.22);backdrop-filter:blur(12px)}
.hx h2{font:700 clamp(42px,5vw,80px)/1 var(--h);letter-spacing:-.05em;margin:0;color:#fff}
.hx-head p{font-size:18px;line-height:1.6;color:#aebcd6;margin:22px auto 0;max-width:620px}
.hx-tabs{display:inline-flex;gap:6px;margin-top:34px;padding:6px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.hx-tabs button{padding:11px 22px!important;border-radius:999px!important;border:0!important;background:transparent!important;color:#c7d3ea!important;font:600 15px var(--b)!important;cursor:pointer;box-shadow:none!important}
.hx-tabs button[aria-selected=true]{background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)!important}
.hx-panel{width:min(1180px,calc(100% - 10vw));margin:0 auto}
.hx .pipeline-section{padding:0!important;margin:0!important;max-width:none!important;background:none!important}
.hx .pipeline-console{border-radius:26px!important;background:linear-gradient(180deg,rgba(22,36,64,.85),rgba(10,18,34,.9))!important;border:1px solid rgba(150,180,255,.18)!important;box-shadow:0 50px 120px -50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)!important;color:#e8eef9!important;overflow:hidden;backdrop-filter:blur(14px)}
.hx .console-bar{border-bottom:1px solid rgba(150,180,255,.14)!important;color:#8fb0ff!important;background:rgba(255,255,255,.02)!important;font-family:'Geist Mono',ui-monospace,monospace!important}
.hx .pipeline-tools label{color:#aebcd6!important}
.hx .pipeline-tools select{background:rgba(255,255,255,.06)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important}
.hx #run-flow{background:linear-gradient(180deg,#5b86ff,#3d63e0)!important;color:#fff!important;border:0!important;border-radius:999px!important;box-shadow:0 12px 30px -12px rgba(80,120,255,.8)!important}
.hx .flow-graph{background:radial-gradient(60% 80% at 50% 50%,rgba(80,120,255,.08),transparent)!important}
.hx .flow-path,.hx .branch-path{stroke:rgba(140,170,255,.35)!important;stroke-dasharray:4 7}
.hx .flow-graph.tracing .flow-path{stroke:#7fa2ff!important;animation:hxdash .8s linear infinite}
@keyframes hxdash{to{stroke-dashoffset:-22}}
.hx .workflow button{background:rgba(255,255,255,.05)!important;border:1px solid rgba(150,180,255,.2)!important;color:#e8eef9!important;border-radius:20px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;transition:border-color .4s,box-shadow .4s,transform .4s!important}
.hx .workflow button small{color:#8fb0ff!important;letter-spacing:.14em}
.hx .workflow button strong{color:#fff!important}
.hx .workflow button span:not(.node-icon){color:#9fb3cc!important}
.hx .workflow .node-icon{background:rgba(120,160,255,.14)!important;color:#cfe0ff!important;border-color:rgba(150,180,255,.25)!important}
.hx .workflow button.active{border-color:#7fa2ff!important;box-shadow:0 0 0 1px rgba(127,162,255,.4),0 20px 50px -18px rgba(90,130,255,.8)!important;transform:translateY(-4px)}
.hx .workflow button.pass{border-color:rgba(95,224,168,.7)!important;box-shadow:0 0 40px -14px rgba(95,224,168,.7)!important}
.hx .workflow button.fail{border-color:rgba(255,170,90,.85)!important;box-shadow:0 0 40px -12px rgba(255,170,90,.8)!important}
.hx .quarantine{background:rgba(255,255,255,.04)!important;border:1px dashed rgba(255,200,120,.35)!important;color:#ffd9a8!important;border-radius:14px!important}
.hx .quarantine small{color:#c9b08f!important}
.hx .quarantine.held{background:rgba(255,170,90,.12)!important;border-style:solid!important;box-shadow:0 0 40px -12px rgba(255,170,90,.7)}
.hx .flow-detail{border-top:1px solid rgba(150,180,255,.14)!important;background:rgba(0,0,0,.18)!important}
.hx .flow-detail h3{color:#fff!important;font-family:var(--h)!important;letter-spacing:-.02em}
.hx .flow-detail p{color:#aebcd6!important}
.hx #flow-status{color:#8fb0ff!important;font-family:'Geist Mono',ui-monospace,monospace!important;letter-spacing:.12em}
.hx #flow-code{background:#060b16!important;color:#9ff0de!important;border:1px solid rgba(150,180,255,.14)!important;border-radius:14px!important;font-family:'Geist Mono',ui-monospace,monospace!important}
.hx #repair{color:#ffd9a8!important}
.hx .dashboard-story{padding:0!important;margin:0!important;max-width:none!important;background:none!important}
.hx [data-dashboard]{border-radius:26px;overflow:hidden;box-shadow:0 50px 120px -50px rgba(0,0,0,.8)}
.st-cta{text-align:center}
.st-cta h2 em{font-style:normal}

/* ---------- Responsive + calm motion ---------- */
@media(max-width:1000px){
  .st{height:auto;padding:70px 0}
  .st-pin,.st-flip .st-pin{position:relative;top:auto;height:auto;grid-template-columns:1fr;gap:34px;width:calc(100% - 44px)}
  .st-flip .st-copy{order:0}
  .st-device{order:-1}
  .nx-lap{--w:min(560px,86vw)}
  .st-beats{min-height:0}
  .st-beat{position:relative;opacity:1;transform:none;margin-bottom:20px}
  .st-beat p{font-size:18px;max-width:none}
  .st-rail{display:none}
}
body.reduce-motion .st{height:auto;padding:80px 0}
body.reduce-motion .st-pin{position:relative;top:auto;height:auto}
body.reduce-motion .st-beats{min-height:0}
body.reduce-motion .st-beat{position:relative;opacity:1;transform:none;margin-bottom:18px}
body.reduce-motion .st-rail{display:none}
body.reduce-motion .scr *{transition:none!important;animation:none!important}

.scr p,.scr code{font-size:inherit;line-height:inherit;margin:0;max-width:none}.s4-log p{font-size:1em}
.hx #repair{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;font-weight:600}

/* ===== v2: black 3D laptop (shared l3 model), facing the copy ===== */
.nx-lap.nx-l3{--w:auto;width:min(640px,46vw);height:min(470px,34vw);font-size:16px;perspective:none;position:relative}
.nx-l3 .l3-scene{position:absolute;inset:0;perspective:2400px;perspective-origin:50% 25%}
.nx-l3 .l3-rig{top:64%!important;transform:scale(var(--ls,.74)) rotateX(60deg) rotateZ(var(--rz,12deg))!important;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.nx-l3 .l3-base{width:640px;height:430px;left:-320px;top:-215px}
.nx-l3 .l3-lid{width:640px;height:415px;top:-415px;transform:rotateX(-104deg);transition:transform 1.6s cubic-bezier(.22,.7,.3,1)}
.st.is-pending .nx-l3 .l3-lid{transform:rotateX(-178deg)}
.nx-l3 .l3-disp{font-size:6.2px}
.nx-l3 .l3-disp .scr{font-size:1.8em}
.nx-l3 .l3-lid-in{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.nx-l3 .l3-lid-out{background:linear-gradient(160deg,#2a2d33,#121316)}
.st-flip .nx-l3{margin-left:auto}
@media(max-width:1200px){.nx-l3{--ls:.62}}
@media(max-width:1000px){.nx-lap.nx-l3{width:min(560px,90vw);height:min(400px,64vw)}.nx-l3{--ls:.6}}
@media(max-width:560px){.nx-l3{--ls:.44}.nx-lap.nx-l3{height:310px}.nx-l3 .l3-rig{top:72%!important}}

/* ===== Walkthrough preview card ===== */
.st-watch2{display:inline-flex!important;align-items:center;gap:16px;padding:8px 22px 8px 8px!important;border-radius:20px!important;background:rgba(255,255,255,.7)!important;border:1px solid rgba(255,255,255,.95)!important;box-shadow:0 18px 40px -22px rgba(20,40,70,.45),inset 0 1px 0 #fff!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;text-align:left;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s!important;color:var(--ink)!important;font:inherit!important}
.st-watch2:hover{transform:translateY(-3px)!important;box-shadow:0 26px 50px -22px rgba(20,40,70,.55),inset 0 1px 0 #fff!important}
.sw-img{position:relative;width:132px;height:80px;border-radius:13px;overflow:hidden;flex:none;background:#0b1422}
.sw-img img{width:100%;height:100%;object-fit:cover;object-position:top left;transform:scale(1.04);transition:transform .6s}
.st-watch2:hover .sw-img img{transform:scale(1.12)}
.sw-img:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,24,.05),rgba(6,12,24,.45))}
.sw-play{position:absolute;inset:0;display:grid;place-items:center;z-index:1;color:#fff}
.sw-play svg{width:34px;height:34px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.sw-play svg circle{fill:rgba(255,255,255,.18)}
.sw-tx b{display:block;font:700 16px var(--h);letter-spacing:-.01em;color:var(--ink)}
.sw-tx small{display:block;font:500 13px var(--b);color:var(--ink2);margin-top:3px}
body.dark .st-watch2{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:none!important}
.st-beat p{font-size:clamp(20px,1.6vw,26px)!important;font-weight:500;letter-spacing:-.01em;max-width:24ch!important}
.st-beats{min-height:150px}