/* Ecom Agent Lab: premium homepage (NOIR/HUD look). Self-contained; fonts self-hosted. */
@font-face{font-family:"Anton";src:url(/assets/fonts/anton-0.woff2) format("woff2");font-display:swap;font-weight:400}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-1.woff2) format("woff2");font-display:swap;font-weight:100 900}
:root{
  --bg:#06080b;--bg-2:#0b0e13;--panel:rgba(14,18,25,.72);--line:rgba(120,160,255,.16);--line-2:rgba(120,160,255,.32);
  --ink:#f3f6fa;--ink-2:#b9c2cf;--ink-3:#8792a2;--blue:#3d86ff;--blue-2:#7fb0ff;--blue-glow:rgba(61,134,255,.55);--green:#39ff88;
  --display:"Anton",Impact,"Arial Narrow",sans-serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1240px;--r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* concrete texture + glow, on a fixed layer (cheap to composite) */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(900px 600px at 78% 18%,rgba(61,134,255,.13),transparent 60%),
   radial-gradient(700px 520px at 8% 85%,rgba(61,134,255,.07),transparent 60%),
   linear-gradient(180deg,#07090d 0%,#05070a 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .62 0 0 0 0 .66 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg,video{max-width:100%;display:block}
a{color:var(--blue-2);text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--blue);color:#000;padding:.6rem 1rem;font-weight:700}
.skip:focus{left:1rem;top:1rem}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2)}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);margin:0 0 1rem;display:flex;align-items:center;gap:.6rem}
.kicker::before{content:"";width:22px;height:1px;background:var(--blue)}
.display,h1,h2.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.98;margin:0}
h1{font-size:clamp(2.7rem,1.6rem + 4.4vw,5.6rem)}
h2.display{font-size:clamp(2.2rem,1.4rem + 3.2vw,4.2rem)}
h1 .hl,.display .hl{color:var(--blue-2);text-shadow:0 0 28px var(--blue-glow)}
h3{font-size:1.12rem;line-height:1.3;margin:0 0 .5rem}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.02rem,.95rem + .35vw,1.2rem);color:var(--ink-2);max-width:46ch}
.muted{color:var(--ink-3)}
/* buttons: black bold text on blue / green */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.8rem 1.35rem;border-radius:10px;font:800 .95rem/1 var(--sans);text-decoration:none;letter-spacing:.01em;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--blue);color:#000;box-shadow:0 0 0 1px rgba(127,176,255,.5),0 10px 34px -8px var(--blue-glow)}
.btn-primary:hover{color:#000;background:#5b9aff;transform:translateY(-1px);box-shadow:0 0 0 1px #9cc3ff,0 14px 40px -6px var(--blue-glow)}
.btn-wa{background:var(--green);color:#000;box-shadow:0 10px 30px -10px rgba(57,255,136,.6)}
.btn-wa:hover{color:#000;background:#6dffa6;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.03);color:#fff;border-color:var(--line-2)}
.btn-ghost:hover{color:#fff;border-color:var(--blue-2);background:rgba(61,134,255,.08)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.text-link{font-weight:700;color:#fff;text-decoration:none;border-bottom:1px solid var(--blue);padding-bottom:2px}
.text-link:hover{color:var(--blue-2)}
/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(6,8,11,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--line)}
.nav{display:flex;align-items:center;gap:1.5rem;height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font-family:var(--display);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase}
.brand img{width:34px;height:34px}
.brand b{font-weight:400;color:var(--blue-2)}
.nav-links{display:flex;gap:1.6rem;list-style:none;margin:0 0 0 auto;padding:0}
.nav-links a{color:#fff;text-decoration:none;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.nav-links a:hover{color:var(--blue-2)}
.nav .btn{min-height:40px;padding:.55rem 1rem;font-size:.82rem}
.nav-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);color:#fff;border-radius:8px;min-height:40px;padding:.4rem .8rem;font:600 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:1060px){.nav-meta{display:none}}
@media (max-width:900px){
  .menu-btn{display:inline-flex;align-items:center}
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:rgba(6,8,11,.97);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1rem}
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line)}
  .nav .btn{display:none}
}
/* HUD helpers */
.hud{position:relative}
.hud::before,.hud::after{content:"";position:absolute;width:16px;height:16px;border:1px solid var(--blue-2);pointer-events:none;opacity:.8}
.hud::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hud::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.barcode{display:block;height:26px;width:auto;color:#cfd6e0;opacity:.8}
.idx{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--blue-2)}
/* ============ HERO / EXPLODED VIEW ============ */
.hero{position:relative}
.hero-pin{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 84px;overflow:hidden}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:2rem;min-height:min(78vh,760px)}
.hero-copy{position:relative;z-index:3;align-self:center;display:grid}
.state{grid-area:1/1}
.state-b,.state-c{opacity:0;visibility:hidden}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);margin:0 0 1.3rem;display:flex;gap:.7rem;align-items:center}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.hero h1{margin-bottom:1.3rem}
.hero .lead{margin-bottom:0}
.hero-specs{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.6rem 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hero-specs b{color:#fff;font-weight:600}
.state h2.display{font-size:clamp(2.4rem,1.4rem + 3.6vw,4.8rem);margin-bottom:1.2rem}
/* HUD frame lines */
.hud-frame{position:absolute;inset:84px 1.25rem 24px;pointer-events:none;z-index:1}
.hud-frame .hf-l,.hud-frame .hf-r{position:absolute;top:8%;bottom:14%;width:9px;background:repeating-linear-gradient(180deg,var(--line-2) 0 1px,transparent 1px 22px);border-left:1px solid var(--line)}
.hud-frame .hf-l{left:0}.hud-frame .hf-r{right:0;transform:scaleX(-1)}
.hud-frame .hf-t{position:absolute;left:28px;right:28px;top:0;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.hero-foot{position:absolute;left:0;right:0;bottom:22px;z-index:3}
.hero-foot .wrap{display:flex;align-items:center;gap:1.4rem}
.scroll-cue{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.progress{flex:1;height:1px;background:var(--line);position:relative;max-width:420px}
.progress i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:var(--blue);box-shadow:0 0 10px var(--blue)}
.foot-code{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--ink-3)}
/* stage + phone */
.stage{position:relative;z-index:2;height:min(74vh,700px);display:grid;place-items:center;perspective:1700px;perspective-origin:50% 40%}
.stage-glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(61,134,255,.28),transparent 62%);filter:blur(10px);pointer-events:none}
.stage-floor{position:absolute;bottom:4%;width:62%;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(61,134,255,.35),transparent);filter:blur(6px)}
.scaler{transform:scale(var(--s,1));transform-style:preserve-3d}
.phone{--gap:2px;--fan:0px;--rx:8deg;--ry:-22deg;--rz:4deg;position:relative;width:290px;height:600px;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));will-change:transform}
.ly{position:absolute;inset:0;border-radius:46px;transform-style:preserve-3d;backface-visibility:visible}
.ly[data-i]{transform:translate3d(calc(var(--i) * var(--fan,0px)),calc(var(--i) * var(--fan,0px) * -.6),calc(var(--z0,0px) + var(--i) * var(--gap)))}
.ly .anchor{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 10px var(--blue);opacity:var(--ao,0)}
/* chassis + thickness slices */
.slice{position:absolute;inset:0;border-radius:46px;background:#14171c;border:1px solid #262b33}
.chassis{background:linear-gradient(150deg,#22262d,#0d0f13 55%,#181b21);border:1px solid #30353e;box-shadow:inset 0 0 0 6px #0b0d10,inset 0 0 0 7px #2a2f37}
.chassis .cam{position:absolute;top:26px;left:24px;width:98px;height:98px;border-radius:28px;background:linear-gradient(145deg,#1c2026,#0a0b0e);border:1px solid #333944;display:grid;grid-template-columns:1fr 1fr;padding:12px;gap:8px}
.chassis .cam i{border-radius:50%;background:radial-gradient(circle at 40% 35%,#3b4a66,#05070a 60%);border:2px solid #2a303a;box-shadow:0 0 0 2px #0d0f12}
.chassis .ch-logo{position:absolute;left:0;right:0;top:46%;text-align:center;font-family:var(--display);font-size:1.6rem;letter-spacing:.08em;color:#2c323b}
.chassis .ch-code{position:absolute;left:28px;right:28px;bottom:34px;display:flex;justify-content:space-between;align-items:end;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;color:#59626f}
.chassis .barcode{height:22px;color:#59626f}
/* tech layers */
.tech{background:linear-gradient(160deg,rgba(20,32,54,.5),rgba(8,12,22,.42));border:1px solid rgba(127,176,255,.5);box-shadow:0 0 0 1px rgba(61,134,255,.12),0 0 40px -6px rgba(61,134,255,.45),inset 0 0 50px -24px rgba(61,134,255,.6);overflow:hidden}
.tech::before{content:"";position:absolute;inset:14px;border-radius:34px;border:1px dashed rgba(127,176,255,.22)}
.tech .tl{position:absolute;left:26px;top:22px;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;color:var(--blue-2);text-transform:uppercase}
.tech .tr{position:absolute;right:26px;top:22px;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;color:#5d6b80}
.tech svg.art{position:absolute;left:8%;top:12%;width:84%;height:76%;overflow:visible}
.art .ln{fill:none;stroke:rgba(127,176,255,.55);stroke-width:1.4}
.art .ln-b{fill:none;stroke:var(--blue);stroke-width:2;filter:drop-shadow(0 0 4px var(--blue))}
.art .nd{fill:#0c1422;stroke:var(--blue-2);stroke-width:1.4}
.art .nd-on{fill:rgba(61,134,255,.25);stroke:#a9cbff;stroke-width:1.6}
.art text{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:9.5px;letter-spacing:.08em;fill:#c9d8f2;text-transform:uppercase}
.art .t-dim{fill:#6f7f97}
.art .glow{fill:var(--blue);filter:drop-shadow(0 0 10px var(--blue))}
.art .bar{fill:var(--blue-2)}
/* screen layer (WhatsApp-style chat, sample data) */
.screen{background:#000;border:1px solid #3a404a;box-shadow:inset 0 0 0 7px #050608,inset 0 0 0 8px #2b3038;overflow:hidden}
.screen .scr{position:absolute;inset:9px;border-radius:38px;overflow:hidden;background:#0b141a;display:flex;flex-direction:column}
.scr .island{position:absolute;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#000;z-index:2}
.scr .wa-top{background:#1f2c34;padding:42px 14px 10px;display:flex;align-items:center;gap:9px;color:#e9edef}
.scr .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),#1d3e7a);display:grid;place-items:center;font:700 .66rem var(--sans);color:#fff}
.scr .wa-top b{display:block;font-size:.78rem;line-height:1.2}
.scr .wa-top small{display:block;font-size:.62rem;color:#8696a0}
.scr .chat{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:7px;background:#0b141a radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/14px 14px}
.scr .day{align-self:center;font-size:.58rem;color:#8696a0;background:#182229;border-radius:6px;padding:2px 8px}
.scr .m{max-width:84%;padding:6px 9px 4px;border-radius:9px;font-size:.7rem;line-height:1.38;color:#e9edef}
.scr .m small{display:block;text-align:right;font-size:.54rem;color:#8fa0aa;margin-top:2px}
.scr .out{align-self:flex-end;background:#005c4b;border-top-right-radius:3px}
.scr .in{align-self:flex-start;background:#202c33;border-top-left-radius:3px}
.scr .sys{align-self:center;font-family:var(--mono);font-size:.54rem;letter-spacing:.06em;color:var(--blue-2);border:1px dashed rgba(127,176,255,.45);border-radius:6px;padding:3px 7px;background:rgba(61,134,255,.08)}
.scr .wa-bar{display:flex;gap:7px;padding:8px 10px 22px;background:#0b141a}
.scr .wa-bar span{flex:1;background:#202c33;border-radius:18px;font-size:.62rem;color:#8696a0;padding:7px 12px}
.scr .wa-bar i{width:30px;height:30px;border-radius:50%;background:#00a884}
.screen .glare{position:absolute;inset:0;border-radius:46px;background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 32%,transparent 70%,rgba(255,255,255,.04));pointer-events:none}
/* callouts + leader lines */
.leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.leaders path{fill:none;stroke:var(--blue-2);stroke-width:1;opacity:.85}
.leaders circle{fill:var(--bg);stroke:var(--blue-2);stroke-width:1.2}
.callouts{list-style:none;margin:0;padding:0}
.js-3d .callouts{position:absolute;inset:0;pointer-events:none;z-index:5}
.js-3d .co{position:absolute;left:0;top:0;width:212px;opacity:0;will-change:transform,opacity}
.co{background:rgba(7,10,15,.82);border:1px solid var(--line-2);border-radius:8px;padding:.65rem .8rem .7rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.co .idx{display:block;margin-bottom:.2rem}
.co b{display:block;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:.25rem}
.co p{margin:0;font-size:.76rem;line-height:1.45;color:var(--ink-2)}
.co .spec{display:block;margin-top:.45rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
/* static (mobile / reduced motion / no-JS) */
.static-3d .hero-pin{min-height:auto;padding:100px 0 40px}
.static-3d .hero-grid{grid-template-columns:1fr;min-height:0;gap:1.4rem}
.static-3d .hero-copy{display:contents}
.static-3d .state-a{order:1}
.static-3d .stage{order:2;height:520px}
.static-3d .state-b{order:3;opacity:1;visibility:visible;margin-top:.5rem}
.static-3d .state-c{display:none}
.static-3d .callouts{order:4;display:grid;gap:.75rem}
.static-3d .leaders,.static-3d .hero-foot,.static-3d .hud-frame .hf-l,.static-3d .hud-frame .hf-r{display:none}
.static-3d .phone{--gap:34px;--rx:56deg;--ry:0deg;--rz:-34deg}
.static-3d .ly .anchor{display:none}
@media (min-width:720px){.static-3d .callouts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:719px){.static-3d .stage{height:440px}.state h2.display{font-size:2.5rem}}
/* ============ SECTIONS ============ */
.section{position:relative;padding:clamp(4.5rem,3rem + 5vw,8rem) 0;border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:1.5rem 3rem;align-items:end;margin-bottom:clamp(2rem,1.4rem + 2vw,3.4rem)}
.sec-head p.lead{margin:0}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}
.sec-no{position:absolute;right:1.25rem;top:1.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--ink-3)}
/* tools ticker */
.tools{padding:1.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(8,11,16,.6)}
.tools .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem}
.tools ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.tools li{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#dfe6ef;padding:.4rem .7rem;border:1px solid var(--line);border-radius:6px}
.tools small{flex-basis:100%;color:var(--ink-3);font-size:.72rem}
/* flagship */
.flag{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(1.5rem,1rem + 3vw,4rem);padding:clamp(1.4rem,1rem + 2vw,2.8rem);border-radius:20px;background:linear-gradient(140deg,rgba(61,134,255,.10),rgba(10,14,20,.85) 45%);border:1px solid var(--line-2)}
.flag h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,1.3rem + 2vw,3rem);line-height:1.02;margin:.2rem 0 1rem}
.flag p{color:var(--ink-2)}
.checks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.checks li{position:relative;padding-left:1.7rem;color:#e3e8ef}
.checks li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border:1px solid var(--blue-2);transform:rotate(45deg);box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 6px var(--blue)}
.flow{list-style:none;margin:0;padding:0;position:relative;align-self:center}
.flow::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:linear-gradient(var(--blue),rgba(61,134,255,.15))}
.flow li{position:relative;display:grid;grid-template-columns:36px 1fr;gap:1rem;align-items:center;padding:.7rem 0}
.flow .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#0b111b;border:1px solid var(--blue-2);font-family:var(--mono);font-size:.7rem;color:#fff;box-shadow:0 0 16px -4px var(--blue)}
.flow b{display:block;font-size:.98rem}
.flow small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:860px){.flag{grid-template-columns:1fr}}
.more-h{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:clamp(3rem,2rem + 3vw,4.5rem) 0 1.2rem;font-weight:600}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
@media (max-width:860px){.cols-2{grid-template-columns:1fr}}
.group h4{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.6rem;letter-spacing:.02em;margin:0 0 1rem;display:flex;align-items:baseline;gap:.8rem}
.group h4 span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--blue-2)}
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.svc{position:relative;padding:1.2rem 1.3rem 1.1rem;transition:border-color .25s,transform .25s,background .25s}
.svc:hover{border-color:var(--line-2);background:rgba(16,22,32,.85);transform:translateY(-2px)}
.svc h3 a{color:#fff;text-decoration:none}
.svc h3 a::after{content:"";position:absolute;inset:0}
.svc p{color:var(--ink-2);font-size:.94rem;margin:0}
.svc .go{display:inline-block;margin-top:.7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2)}
.see-all{margin-top:2rem}
/* comparison table */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;min-width:620px;background:rgba(9,12,18,.75)}
th,td{text-align:left;padding:1rem 1.1rem;border-bottom:1px solid var(--line);font-size:.94rem;vertical-align:top}
thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
thead th:last-child{color:var(--blue-2)}
tbody th{font-weight:700;color:#fff}
tbody td{color:var(--ink-2)}
tbody td:last-child{color:#fff;background:rgba(61,134,255,.07);border-left:1px solid var(--line-2)}
tbody tr:last-child>*{border-bottom:0}
.note{font-size:.84rem;color:var(--ink-3);margin-top:1rem}
/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;counter-reset:s}
.step{padding:1.6rem 1.5rem}
.step .big{font-family:var(--display);font-size:4.2rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(127,176,255,.6);display:block;margin-bottom:.6rem}
.step h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em}
.step p{color:var(--ink-2);margin:0;font-size:.95rem}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
/* demos */
.demos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.demo{overflow:hidden}
.demo video{width:100%;height:auto;aspect-ratio:16/9;background:#000;border-bottom:1px solid var(--line)}
.demo .db{padding:1.1rem 1.2rem 1.3rem}
.demo p{color:var(--ink-2);font-size:.92rem}
.demo .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);margin-bottom:.5rem}
@media (max-width:980px){.demos{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.demos{grid-template-columns:1fr}}
/* about */
.about{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(2rem,1rem + 3vw,4rem);align-items:center}
.photo{position:relative;padding:12px;margin:0}
.photo img{width:100%;height:auto;border-radius:10px;filter:grayscale(.2)}
.photo figcaption{display:flex;justify-content:space-between;margin-top:.7rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.pill{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;border:1px solid var(--line-2);border-radius:999px;padding:.45rem .8rem;margin:.4rem 0 1.2rem}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
@media (max-width:760px){.about{grid-template-columns:1fr}.photo{max-width:240px}}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:3rem}
.why .panel{padding:1.4rem}
.why p{color:var(--ink-2);margin:0;font-size:.95rem}
@media (max-width:860px){.why{grid-template-columns:1fr}}
/* guides */
.guides{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.guide{overflow:hidden;position:relative}
.guide img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.guide .db{padding:1.2rem 1.3rem 1.4rem}
.guide h3 a{color:#fff;text-decoration:none}
.guide h3 a::after{content:"";position:absolute;inset:0}
.guide p{color:var(--ink-2);margin:0;font-size:.94rem}
@media (max-width:760px){.guides{grid-template-columns:1fr}}
/* faq */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.15rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:1.05rem}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--blue-2);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details div{padding:0 0 1.2rem;color:var(--ink-2)}
.faq details p{margin:0}
.demo-limit{display:inline-block;font-size:.82em;color:var(--ink-3)}
/* CTA + contact */
.cta{text-align:center;padding:clamp(2.4rem,1.6rem + 3vw,4.4rem) clamp(1.2rem,1rem + 2vw,3rem);border-radius:22px;background:radial-gradient(700px 300px at 50% 0%,rgba(61,134,255,.22),transparent 70%),rgba(9,12,18,.85);border:1px solid var(--line-2)}
.cta .kicker{justify-content:center}
.cta .lead{margin-inline:auto}
.cta .btn-row{justify-content:center}
.cta .demo-line{margin:1.4rem 0 0;font-size:.92rem;color:var(--ink-2)}
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,1rem + 3vw,4rem);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.c-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.c-list li a,.c-list li>span{display:flex;gap:.9rem;align-items:center;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;color:#fff;text-decoration:none;background:rgba(9,12,18,.6)}
.c-list li a:hover{border-color:var(--line-2)}
.c-list small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.c-list svg{width:20px;height:20px;color:var(--blue-2);flex:none}
.c-list .demo-limit{display:block;padding:.2rem 1rem 0}
.form{padding:clamp(1.2rem,1rem + 1.5vw,2rem)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:600px){.form .row{grid-template-columns:1fr}}
.field{margin-bottom:1rem}
.field label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#cfd7e2;margin-bottom:.4rem}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:#fff;background:#080b10;border:1px solid var(--line-2);border-radius:8px;padding:.75rem .85rem;min-height:48px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(61,134,255,.25)}
textarea{resize:vertical}
.hint{font-size:.8rem;color:var(--ink-3);margin:.4rem 0 0}
.hp{position:absolute;left:-9999px}
.form .btn{width:100%;margin-top:.4rem}
.form-alert{border-radius:8px;padding:.8rem 1rem;margin:0 0 1rem;font-weight:600}
.form-alert.ok{background:rgba(57,255,136,.1);border:1px solid rgba(57,255,136,.45);color:#c9ffe0}
.form-alert.err{background:rgba(255,90,90,.1);border:1px solid rgba(255,120,120,.5);color:#ffd6d6}
/* footer */
.site-footer{border-top:1px solid var(--line);padding:3.5rem 0 7rem;background:rgba(5,7,10,.85)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.f-grid h2{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 1rem;font-weight:600}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.f-grid a{color:var(--ink-2);text-decoration:none;font-size:.9rem}
.f-grid a:hover{color:#fff}
.f-grid p{color:var(--ink-2);font-size:.9rem}
.f-bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3)}
.f-bot a{color:var(--ink-2)}
@media (max-width:900px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
/* floating WhatsApp + mobile bar */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:60;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#000;box-shadow:0 10px 30px -6px rgba(57,255,136,.6)}
.wa-float svg{width:26px;height:26px}
.m-bar{display:none}
@media (max-width:720px){
  .wa-float{display:none}
  .m-bar{display:grid;grid-template-columns:1.2fr 1fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(6,8,11,.94);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
  .m-bar .btn{min-height:46px;padding:.6rem;font-size:.9rem}
}
/* reveal */
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}
/* desktop explode mode */
.js-3d .hero-copy{position:static}
.js-3d .state-b{position:absolute;top:-1.5rem;left:0;right:0;text-align:center;z-index:6;pointer-events:none}
.js-3d .state-b .kicker{justify-content:center}
.js-3d .state-b h2.display{font-size:clamp(2.2rem,1.2rem + 2.4vw,3.6rem);margin-bottom:.6rem}
.js-3d .state-b h2 br{display:none}
.js-3d .state-b .lead{margin-inline:auto;max-width:58ch;font-size:1rem}
.hero-foot .wrap{padding-right:72px}
.static-3d .state{grid-area:auto}
.static-3d .state-a,.static-3d .state-b{max-width:760px}
.static-3d .hud-frame{display:none}
.static-3d .phone{--fan:14px}
.static-3d .scaler{translate:-28px 30px}

/* same static layout before JS runs (prevents layout shift on mobile / reduced motion) */
@media (max-width:899px),(max-height:559px),(prefers-reduced-motion:reduce){
html:not(.js-3d) .hero-pin{min-height:auto;padding:100px 0 40px}
html:not(.js-3d) .hero-grid{grid-template-columns:1fr;min-height:0;gap:1.4rem}
html:not(.js-3d) .hero-copy{display:contents}
html:not(.js-3d) .state-a{order:1}
html:not(.js-3d) .stage{order:2;height:520px}
html:not(.js-3d) .state-b{order:3;opacity:1;visibility:visible;margin-top:.5rem}
html:not(.js-3d) .state-c{display:none}
html:not(.js-3d) .callouts{order:4;display:grid;gap:.75rem}
html:not(.js-3d) .leaders,html:not(.js-3d) .hero-foot,html:not(.js-3d) .hud-frame .hf-l,html:not(.js-3d) .hud-frame .hf-r{display:none}
html:not(.js-3d) .phone{--gap:34px;--rx:56deg;--ry:0deg;--rz:-34deg}
html:not(.js-3d) .ly .anchor{display:none}
html:not(.js-3d) .state{grid-area:auto}
html:not(.js-3d) .state-a,html:not(.js-3d) .state-b{max-width:760px}
html:not(.js-3d) .hud-frame{display:none}
html:not(.js-3d) .phone{--fan:14px}
html:not(.js-3d) .scaler{translate:-28px 30px}
@media (min-width:720px){html:not(.js-3d) .callouts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:719px){html:not(.js-3d) .stage{height:440px}}
}
/* ================= v2 refinements: calmer, cleaner, easier to scan ================= */
.section{padding:clamp(5rem,3.5rem + 5vw,8.5rem) 0;border-top:1px solid rgba(120,160,255,.10)}
.sec-head{display:block;max-width:760px;margin-bottom:clamp(2.2rem,1.6rem + 2vw,3.4rem)}
.sec-head .lead{margin-top:1.1rem}
h2.display{font-size:clamp(2.1rem,1.3rem + 2.8vw,3.7rem);line-height:1.02}
.lead{line-height:1.6}
.big-line{font-size:clamp(2.4rem,1.4rem + 3.6vw,4.8rem);margin-bottom:1.2rem}
.hero .lead{max-width:40ch}
/* services */
.svc-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}}
.svc{display:flex;flex-direction:column;padding:1.5rem 1.4rem 1.4rem;border-radius:16px;background:linear-gradient(180deg,rgba(18,24,35,.85),rgba(10,13,19,.85))}
.svc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.3rem}
.svc-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--blue-2);background:rgba(61,134,255,.12);border:1px solid rgba(127,176,255,.35);box-shadow:0 0 22px -8px var(--blue)}
.svc-ic svg{width:22px;height:22px}
.svc h3{font-size:1.18rem;margin-bottom:.55rem}
.svc p{font-size:.96rem;line-height:1.55}
.svc .go{margin-top:auto;padding-top:1.1rem}
/* steps */
.step{padding:1.8rem 1.6rem;border-radius:16px}
.step .big{font-size:3.6rem;margin-bottom:.9rem}
.step h3{font-size:1.6rem;margin-bottom:.5rem}
.step p{font-size:1rem}
/* about */
.about .lead{margin-top:1rem;max-width:52ch}
.about .pill{margin-top:.4rem}
/* faq: heading left, questions right */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem 4rem;align-items:start}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr}}
.faq{max-width:none;border-top:1px solid var(--line)}
.faq summary{padding:1.25rem 0}
.faq summary h3{font-size:1.06rem;font-weight:600}
.faq details div{font-size:.98rem}
/* contact box */
.cta-box{padding:clamp(1.6rem,1rem + 3vw,3.6rem);border-radius:24px;background:radial-gradient(800px 360px at 15% 0%,rgba(61,134,255,.18),transparent 70%),rgba(9,12,18,.88);border:1px solid var(--line-2)}
.cta-box .contact{align-items:center}
.cta-box .lead{margin-top:1rem}
.cta-box .c-list{margin-top:1.6rem}
.cta-box .pill{margin-top:1.2rem}
.cta-box .form{background:rgba(6,8,12,.75)}
.f-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 1rem;font-weight:600}
.f-about{margin-top:1rem;max-width:34ch}
.site-footer{padding-bottom:6rem}
.co p{font-size:.8rem}
@media (max-width:720px){.section{padding:4.2rem 0}.svc{padding:1.3rem 1.2rem}}
/* ================= v3: full site (inner pages, nav dropdowns, visuals) ================= */
.ml{margin-left:1.4rem}
.wrap-narrow{width:min(820px,100% - 2.5rem)}
/* nav dropdowns */
.nav-links{gap:1.35rem;align-items:center}
.nav-links a{font-size:.7rem}
.has-dd{position:relative}
.has-dd>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:.45rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.7}
.dd{list-style:none;margin:0;padding:.6rem;position:absolute;top:calc(100% + 14px);left:-14px;min-width:330px;background:rgba(8,11,16,.97);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 24px 60px -20px #000;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s}
.dd::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;white-space:nowrap;padding:.55rem .7rem;border-radius:8px;font-family:var(--sans);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.dd a:hover{background:rgba(61,134,255,.1);color:#fff}
.dd .dd-all a{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);border-bottom:1px solid var(--line);border-radius:0;margin-bottom:.3rem}
@media (max-width:1180px) and (min-width:901px){.nav-links{gap:1rem}.nav-links a{font-size:.64rem;letter-spacing:.1em}}
@media (max-width:900px){
  .nav-links{max-height:calc(100vh - 68px);overflow-y:auto;align-items:stretch}
  .has-dd>a::after{display:none}
  .dd{position:static;opacity:1;visibility:visible;transform:none;min-width:0;background:none;border:0;box-shadow:none;padding:.2rem 0 .6rem .9rem}
  .dd::before{display:none}
  .dd a{padding:.45rem 0;border-bottom:0;font-size:.92rem}
  .dd .dd-all{display:none}
}
/* inner page hero */
.p-hero{position:relative;padding:118px 0 clamp(3rem,2rem + 3vw,5rem)}
.p-hero-s{padding-bottom:clamp(2rem,1.5rem + 2vw,3.4rem)}
.p-hero h1{font-size:clamp(2.4rem,1.5rem + 3.4vw,4.6rem);margin-bottom:1.2rem}
.p-hero .lead{max-width:52ch}
.p-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,1rem + 3vw,4.5rem);align-items:center}
@media (max-width:960px){.p-grid{grid-template-columns:1fr}}
.p-center{text-align:center;min-height:70vh;display:flex;align-items:center}
.p-center .eyebrow,.p-center .btn-row{justify-content:center}
.p-center .lead{margin-inline:auto}
.crumbs ol{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:.6rem;color:var(--line-2)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:var(--blue-2)}
.section-tight{padding-top:clamp(2rem,1.5rem + 2vw,3.5rem)}
.note{font-size:.86rem;color:var(--ink-3);margin-top:1rem}
/* visuals */
.viz{margin:0;position:relative}
.fv{width:100%;height:auto;overflow:visible}
.fv-frame{fill:rgba(9,13,20,.78);stroke:var(--line-2)}
.fv-mono{font:600 11px var(--mono);letter-spacing:.14em;fill:var(--blue-2)}
.fv-dim{fill:#6f7f97}
.fv-line{stroke:rgba(127,176,255,.35);stroke-width:1.5;fill:none}
.fv-pulse{stroke:var(--blue);stroke-width:2.4;fill:none;stroke-dasharray:18 140;filter:drop-shadow(0 0 5px var(--blue));animation:fvp 3.2s linear infinite}
@keyframes fvp{from{stroke-dashoffset:158}to{stroke-dashoffset:-400}}
.fv-dot{fill:#0c1422;stroke:var(--blue-2);stroke-width:1.5}
.fv-dot-on{fill:var(--blue);stroke:#cfe0ff;stroke-width:1.5;filter:drop-shadow(0 0 8px var(--blue))}
.fv-node{fill:#0c1422;stroke:rgba(127,176,255,.45)}
.fv-node-on{fill:rgba(61,134,255,.2);stroke:#a9cbff;stroke-width:1.4}
.fv-idx{font:600 10px var(--mono);fill:var(--blue-2);letter-spacing:.1em}
.fv-t{font:700 12.5px var(--mono);fill:#e8efff;letter-spacing:.08em}
.fv-sub{font:500 9.5px var(--mono);fill:#6f7f97;letter-spacing:.12em}
.fv-bc{color:#59626f;fill:#59626f}
.viz-hub .fv{filter:drop-shadow(0 30px 60px rgba(0,0,0,.4))}
.hv-ring{fill:none;stroke:rgba(127,176,255,.22);stroke-dasharray:3 7}
.hv-ring2{fill:rgba(61,134,255,.05);stroke:rgba(127,176,255,.12)}
.hv-spoke{stroke:rgba(127,176,255,.35);stroke-width:1.2;stroke-dasharray:4 6;animation:hvs 2.4s linear infinite;animation-delay:var(--d)}
@keyframes hvs{to{stroke-dashoffset:-40}}
.hv-node{fill:#0b111b;stroke:var(--blue-2);stroke-width:1.2}
.hv-t{font:700 11px var(--mono);letter-spacing:.1em;fill:#e8efff}
.hv-core{fill:rgba(61,134,255,.2);stroke:#a9cbff;stroke-width:1.6;filter:drop-shadow(0 0 22px rgba(61,134,255,.7))}
.hv-core-t{font:24px var(--display);letter-spacing:.06em;fill:#fff}
.hv-sub{font:600 9.5px var(--mono);letter-spacing:.14em;fill:var(--blue-2)}
.hv-dim{fill:#6f7f97}
.viz-agents{display:grid;gap:1rem;perspective:1400px}
.ag{padding:1.1rem 1.2rem;border-radius:16px;border-color:var(--line-2);background:linear-gradient(160deg,rgba(20,32,54,.65),rgba(8,12,22,.8));box-shadow:0 0 40px -14px rgba(61,134,255,.6);transform:rotateY(-12deg) rotateX(4deg);transform-origin:left center}
.ag:nth-child(2){margin-left:2.4rem}.ag:nth-child(3){margin-left:4.8rem}
.ag-h{display:flex;justify-content:space-between;margin:0 0 .8rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2)}
.ag-h b{color:#6f7f97;font-weight:500}
.bub{max-width:86%;margin:0 0 .45rem;padding:.5rem .7rem;border-radius:10px;font-size:.84rem;line-height:1.4}
.bub.in{background:#202c33;color:#e9edef;border-top-left-radius:3px}
.bub.out{margin-left:auto;background:#005c4b;color:#e9edef;border-top-right-radius:3px}
.ag-web .bub.out{background:rgba(61,134,255,.25)}
.sysl{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--blue-2);border:1px dashed rgba(127,176,255,.45);border-radius:6px;padding:.2rem .5rem;display:table;margin:0 auto .45rem}
.wave{display:flex;align-items:center;gap:4px;height:46px;margin-bottom:.6rem}
.wave i{flex:1;max-width:6px;height:calc(var(--h) * 1%);border-radius:3px;background:var(--blue-2);animation:wv 1.4s ease-in-out infinite alternate}
.wave i:nth-child(odd){animation-delay:-.7s}
@keyframes wv{to{transform:scaleY(.45)}}
.ag-line{margin:0 0 .3rem;color:#fff;font-size:.92rem}
.ag-meta{margin:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#6f7f97}
@media (max-width:560px){.ag,.ag:nth-child(2),.ag:nth-child(3){margin-left:0;transform:none}}
@media (prefers-reduced-motion:reduce){.fv-pulse,.hv-spoke,.wave i{animation:none}}
/* pains / features / steps */
.pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.pains-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pain{padding:1.5rem 1.4rem;border-radius:16px}
.pain .idx{display:block;margin-bottom:.9rem}
.pain h3{font-size:1.15rem}
.pain p{color:var(--ink-2);margin:0 0 .6rem;font-size:.96rem}
@media (max-width:900px){.pains,.pains-2{grid-template-columns:1fr}}
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 2.4rem}
.feat{display:grid;grid-template-columns:34px 1fr;gap:1rem;align-items:start;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.feat h3{font-size:1.08rem;margin-bottom:.3rem}
.feat p{margin:0;color:var(--ink-2);font-size:.96rem}
@media (max-width:760px){.feats{grid-template-columns:1fr}}
.mini-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;color:var(--blue-2);background:rgba(61,134,255,.12);border:1px solid rgba(127,176,255,.35)}
.mini-ic svg{width:17px;height:17px}
.tools-note{margin:2rem 0 0;font-size:.9rem;color:var(--ink-3);max-width:70ch}
.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.steps-4{grid-template-columns:1fr}}
.hsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9rem;position:relative}
.hsteps li{padding:1.1rem 1.1rem 1.2rem;border-radius:14px;position:relative}
.hsteps li:first-child,.hsteps li:last-child{border-color:var(--line-2);background:linear-gradient(160deg,rgba(61,134,255,.14),rgba(10,14,20,.85))}
.hsteps .idx{display:block;margin-bottom:.6rem}
.hsteps b{display:block;font-family:var(--mono);font-size:.84rem;letter-spacing:.08em;color:#fff;line-height:1.35}
.hsteps small{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cross{margin-top:2rem}
.svc-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.svc-grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.svc-grid-3{grid-template-columns:1fr}}
.svc-grid:not(.svc-grid-3){grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}
.nw{white-space:nowrap}
/* pillars (home/about) */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
.pillar{display:flex;flex-direction:column;padding:clamp(1.5rem,1rem + 2vw,2.4rem);border-radius:20px;background:radial-gradient(500px 240px at 0% 0%,rgba(61,134,255,.16),transparent 70%),rgba(10,14,20,.85);border-color:var(--line-2)}
.pillar .idx{margin:0 0 1rem}
.pillar-h{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1.02;margin:0 0 .8rem}
.pillar-h a{color:#fff;text-decoration:none}
.pillar-h a:hover{color:var(--blue-2)}
.pillar-p{color:var(--ink-2);max-width:48ch}
.pillar-list{list-style:none;margin:.4rem 0 1.6rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem}
.pillar-list a{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;color:#e3e8ef;text-decoration:none;font-size:.93rem;border-bottom:1px solid rgba(120,160,255,.08)}
.pillar-list a:hover{color:var(--blue-2)}
.pillar-list .mini-ic{width:28px;height:28px}
.pillar-list .mini-ic svg{width:14px;height:14px}
.pillar .btn{align-self:flex-start;margin-top:auto}
@media (max-width:520px){.pillar-list{grid-template-columns:1fr}}
/* demo call box */
.demo-call{display:flex;gap:.9rem;align-items:center;padding:.9rem 1.1rem;margin:1.4rem 0 0;border-color:var(--line-2);max-width:460px}
.demo-call svg{width:22px;height:22px;color:var(--green);flex:none}
.demo-call a{color:#fff;text-decoration:none}
.demo-call .demo-limit{display:block}
/* work */
.demos-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.demos-2{grid-template-columns:1fr}}
.demo h3{font-size:1.12rem}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.shot{margin:0;padding:10px;border-radius:14px}
.shot img{width:100%;height:auto;border-radius:8px}
.shot figcaption{padding:.7rem .3rem .2rem;font-size:.86rem;color:var(--ink-2)}
@media (max-width:760px){.shots{grid-template-columns:1fr}}
/* faq page */
.faq-page{display:grid;gap:3rem;max-width:900px}
.fg-h{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);font-weight:600;margin:0 0 .6rem}
/* blog */
.g-h{font-size:1.25rem;line-height:1.3;margin:0 0 .5rem}
.g-h a{color:#fff;text-decoration:none}
.g-h a::after{content:"";position:absolute;inset:0}
.guide .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);margin-bottom:.5rem}
.post-head h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.6rem);line-height:1.04}
.prose{font-size:1.04rem;color:#dfe5ee;padding-bottom:2rem}
.prose>*{max-width:72ch}
.prose h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);line-height:1.08;margin:2.6rem 0 1rem;color:#fff}
.prose h3{font-size:1.15rem;margin:1.8rem 0 .5rem;color:#fff}
.prose p,.prose li{color:#cfd7e2}
.prose ul,.prose ol{padding-left:1.2rem}
.prose ul.checks{padding-left:0}
.prose li{margin-bottom:.45rem}
.prose img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin:1.6rem 0}
.prose .lead{max-width:72ch;color:#e8edf4}
.prose code{font-family:var(--mono);font-size:.86em;background:rgba(61,134,255,.12);padding:.1em .35em;border-radius:4px}
.prose .toc{margin:1.6rem 0;padding:1.2rem 1.4rem;border:1px solid var(--line-2);border-radius:14px;background:rgba(9,12,18,.7)}
.prose .toc h2{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;margin:0 0 .6rem;color:var(--blue-2)}
.prose .toc ol{margin:0}
.prose .toc a{color:#e3e8ef;text-decoration:none}
.prose .toc a:hover{color:var(--blue-2)}
.prose .faq{margin-top:1rem}
.prose .faq summary h3{margin:0}
.prose .table-wrap,.prose table{margin:1.4rem 0}
.prose .author-box{display:flex;gap:1rem;align-items:center;margin-top:2.6rem;padding:1.2rem;border:1px solid var(--line);border-radius:14px;background:rgba(9,12,18,.7)}
.prose .author-box img{width:56px;height:56px;margin:0;border-radius:10px;flex:none}
.prose .author-box p{margin:0;font-size:.92rem}
.prose .cta-inline,.prose .btn{margin-top:.5rem}
/* contact */
.form-h{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.7rem;margin:0 0 1.1rem}
.mini-steps{margin:0;padding-left:1.2rem;color:var(--ink-2)}
.mini-steps li{margin-bottom:.35rem}
.p-hero .contact .fg-h{margin-top:2rem}
/* footer */
.f-grid-5{grid-template-columns:1.3fr 1.1fr 1.1fr 1fr}
.f-h a{color:#fff;text-decoration:none}
.f-h a:hover{color:var(--blue-2)}
.f-h2{margin-top:1.8rem}
@media (max-width:900px){.f-grid-5{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.f-grid-5{grid-template-columns:1fr}}

/* v3.1 mega menu */
.dd.mega{display:grid;grid-template-columns:1.25fr 1fr;gap:.4rem 1.6rem;min-width:620px;padding:1.1rem 1.2rem 1rem;left:-24px}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-h{margin:0 0 .45rem;padding:0 .7rem .5rem;border-bottom:1px solid var(--line);font:600 .64rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2)}
.dd.mega .mega-col li a{padding:.4rem .7rem;font-size:.88rem}
.dd.mega a.mega-all{margin-top:.55rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-2);display:inline-flex;align-items:center;gap:.4rem}
.dd.mega a.mega-all svg{width:12px;height:12px}
@media (max-width:1180px) and (min-width:901px){.dd.mega{min-width:560px}}
@media (max-width:900px){
  .dd.mega{display:block;min-width:0;padding:.2rem 0 .6rem}
  .mega-col{margin:.5rem 0 .4rem}
  .mega-h{padding:.3rem 0 .4rem;margin:0 0 .2rem}
  .dd.mega .mega-col li a{padding:.45rem 0 .45rem .9rem;border-bottom:0}
  .dd.mega a.mega-all{border-bottom:0;padding:.5rem 0 .3rem .9rem}
}
@media (min-width:901px){
  .nav{position:relative}
  .has-dd.mega-li{position:static}
  .dd.mega{left:auto;right:0;top:calc(100% - 6px)}
  .dd.mega::before{top:-20px;height:20px}
  .nav-links .dd.mega .mega-col li a{letter-spacing:0;font-size:.88rem}
  .nav-links .dd.mega a.mega-all{letter-spacing:.12em;font-size:.64rem}
}
@media (min-width:901px){.dd.mega{background:#080b10}}
@media (max-width:900px){.nav-links{background:#06080b;padding-bottom:6.5rem}}
/* v4: 5-service dropdown */
.dd.mega5{display:block;min-width:470px;max-width:520px;padding:1rem 1rem .9rem}
.mega5 .mega-h{padding-left:.7rem}
.mega-list{list-style:none;margin:0;padding:0}
.dd.mega5 .mega-list a{display:block;white-space:normal;padding:.6rem .7rem;border-radius:9px}
.dd.mega5 .mega-list a b{display:block;font:600 .95rem var(--sans);color:#fff;letter-spacing:0;text-transform:none}
.dd.mega5 .mega-list a small{display:block;margin-top:.15rem;font:400 .8rem/1.4 var(--sans);color:var(--ink-3);letter-spacing:0;text-transform:none}
.dd.mega5 .mega-list a:hover small{color:var(--ink-2)}
.mega-foot{display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem;padding:.6rem .7rem 0;border-top:1px solid var(--line)}
.dd.mega5 a.mega-all{margin-top:.25rem;padding:.2rem 0}
@media (min-width:901px){.nav-links .dd.mega5 .mega-list a b{font-size:.95rem;letter-spacing:0}.nav-links .dd.mega5 .mega-list a small{font-size:.8rem;letter-spacing:0}}
@media (max-width:900px){
  .dd.mega5{max-width:none;min-width:0;padding:.2rem 0 .6rem}
  .dd.mega5 .mega-list a{padding:.55rem 0 .55rem .9rem;border-bottom:0}
  .dd.mega5 .mega-list a small{display:none}
  .mega-foot{padding:.5rem 0 0 .9rem;border-top:0}
}
/* v4: service sub-sections */
.subs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.subs-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sub{padding:1.5rem 1.4rem;scroll-margin-top:96px;transition:border-color .3s,box-shadow .3s}
.sub:target{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 0 40px -10px var(--blue-glow)}
.sub .idx{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2)}
.sub h3{margin:.6rem 0 .4rem;font-family:var(--display);font-weight:400;font-size:1.5rem;letter-spacing:.01em;text-transform:uppercase;line-height:1.1}
.sub>p{color:var(--ink-2);margin:0 0 .7rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.ticks li{position:relative;padding-left:1.5rem;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:.15rem;top:.45em;width:.55rem;height:.3rem;border-left:2px solid var(--blue-2);border-bottom:2px solid var(--blue-2);transform:rotate(-45deg)}
.sub .demo-call{margin-top:1rem}
.sub .text-link{display:inline-block;margin-top:.8rem}
@media (max-width:1000px){.subs-3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.subs,.subs-3{grid-template-columns:1fr}}
/* v4: social links */
.soc{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 0}
.soc a{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.45rem .9rem;border:1px solid var(--line-2);border-radius:999px;color:#fff;text-decoration:none;font:600 .85rem var(--sans);background:rgba(14,18,25,.6);transition:border-color .2s,background .2s}
.soc a:hover{border-color:var(--blue);background:rgba(61,134,255,.12)}
.soc svg{width:18px;height:18px;flex:none}
.soc-f{margin-top:.4rem}
.soc-f a{padding:.4rem .75rem;font-size:.8rem}
/* v4: founder photo */
.photo img{filter:none;aspect-ratio:4/5;object-fit:cover}
.photo picture{display:block}
.about .soc{margin-bottom:1.1rem}

/* ============ 2026-10-17 tone-down: static five layers, readable text, less glow, lazy chat ============ */
/* lazy chat placeholder (same look and position as the n8n toggle; the widget loads on click) */
.chat-lazy{position:fixed;right:16px;bottom:16px;z-index:9999;width:64px;height:64px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#e74266;color:#fff;cursor:pointer;transition:transform .2s ease}
.chat-lazy:hover{transform:scale(1.05)}
.chat-lazy:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px}
.chat-lazy.is-loading{opacity:.75;cursor:progress}
@media (max-width:720px){.chat-lazy{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* homepage hero + five layers: one static layout for every screen (no pinned scroll) */
html:not(.js-3d) .hero .hero-pin{min-height:0;padding:100px 0 clamp(2.5rem,1.5rem + 3vw,4.5rem)}
html:not(.js-3d) .hero .state-c{display:none}
html:not(.js-3d) .hero .co{backdrop-filter:none;-webkit-backdrop-filter:none;padding:.9rem 1rem 1rem}
html:not(.js-3d) .hero .co .idx{margin-bottom:.35rem}
@media (min-width:900px){
  html:not(.js-3d) .hero .hero-pin{padding-top:120px}
  html:not(.js-3d) .hero .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"a stage" "b b" "co co" "c c";column-gap:2.5rem;row-gap:1.4rem;align-items:center}
  html:not(.js-3d) .hero .state-a{grid-area:a;max-width:none}
  html:not(.js-3d) .hero .stage{grid-area:stage;height:min(72vh,620px);min-height:520px}
  html:not(.js-3d) .hero .phone{--gap:2px;--fan:0px;--rx:8deg;--ry:-22deg;--rz:4deg}
  html:not(.js-3d) .hero .scaler{translate:0 0}
  html:not(.js-3d) .hero .state-b{grid-area:b;max-width:none;margin-top:clamp(2rem,1rem + 3vw,4rem);text-align:center}
  html:not(.js-3d) .hero .state-b .kicker{justify-content:center}
  html:not(.js-3d) .hero .state-b h2.display{font-size:clamp(2.4rem,1.4rem + 2.4vw,3.6rem);margin-bottom:.8rem}
  html:not(.js-3d) .hero .state-b h2 br{display:none}
  html:not(.js-3d) .hero .state-b .lead{max-width:60ch;margin-inline:auto}
  html:not(.js-3d) .hero .callouts{grid-area:co;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  html:not(.js-3d) .hero .state-c{grid-area:c;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.4rem 2rem;opacity:1;visibility:visible;max-width:none;margin-top:1rem;padding:1.4rem 1.6rem;border:1px solid var(--line-2);border-radius:14px;background:rgba(255,255,255,.02)}
  html:not(.js-3d) .hero .state-c .kicker{grid-column:1;margin:0}
  html:not(.js-3d) .hero .state-c .big-line{grid-column:1;font-size:clamp(1.6rem,1rem + 1.4vw,2.3rem);margin:0}
  html:not(.js-3d) .hero .state-c .lead{grid-column:1;margin:0;max-width:none;font-size:1rem}
  html:not(.js-3d) .hero .state-c .btn-row{grid-column:2;grid-row:1/4;margin:0}
}
@media (min-width:1180px){html:not(.js-3d) .hero .callouts{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* homepage: watch the demos */
.demos-teaser{padding-bottom:0}
.dt{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.4rem,1rem + 2vw,2.6rem);align-items:center;padding:clamp(1rem,.8rem + 1vw,1.6rem)}
.dt-media{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:16/9;background:#0b0f16}
.dt-media img{display:block;width:100%;height:auto}
.dt-label{font-family:var(--mono);font-size:.875rem;letter-spacing:.06em;color:var(--blue-2);margin:0 0 .6rem}
.dt-body h2.display{font-size:clamp(2rem,1.3rem + 2vw,3rem);margin:0 0 .8rem}
.dt-body>p{color:var(--ink-2);font-size:1rem;margin:0 0 1rem}
.dt-list{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.5rem}
.dt-list a{color:#fff;font-size:1rem;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.dt-list a:hover{text-decoration-color:var(--blue-2)}
.dt-list li::before{content:"▶";font-size:.7em;color:var(--blue-2);margin-right:.6rem;vertical-align:.1em}
@media (max-width:860px){.dt{grid-template-columns:1fr}}

/* less glow */
h1 .hl,.display .hl{text-shadow:0 0 12px rgba(61,134,255,.22)}
/* all caps only for short headings: H1 (text unchanged) shown in sentence case */
h1{text-transform:none;letter-spacing:0;line-height:1.02}
.dd.mega a.mega-all{text-transform:none;letter-spacing:.02em}

/* readable labels: nothing meaningful under 14px */
.kicker,.eyebrow,.idx,.pill,.mono,.crumbs ol,.field label,.fg-h,.f-h,.f-grid h2,.more-h,.mega-h,.dd .dd-all a,.dd.mega a.mega-all,
.demo .tag,.guide .tag,.db .tag,.hero-specs,.flow small,.hsteps small,.c-list small,.ag-h,.ag-meta,.vd-body .vd-label,.vd-body .vd-sub,.vd-tags li,
.co b,.co .spec,.toc h2,.menu-btn{font-size:.875rem;letter-spacing:.06em}
.nav-links a{font-size:.875rem;letter-spacing:.04em}
.nav .btn{font-size:.875rem}
.f-bot,.f-bot a{font-size:.875rem}
.soc span,figure figcaption span{font-size:.875rem}
small.demo-limit,.demo-limit,.note .demo-limit,.demo-line small.demo-limit{font-size:.875rem}
/* body and list text: at least 15px */
.co p,.db p,.demo-line,.demo-line a,.hint,.hint a,.form .hint,.vd-media .vd-cap,.shot figcaption,.tools-note,.author-box p,.ag .bub,.ag .ag-line,.wrap>p.note,.hsteps b,.flow b{font-size:.9375rem}
.ag .sysl{font-size:.875rem}
.sub .idx,.prose .toc h2{font-size:.875rem;letter-spacing:.06em}
.cta .demo-line,.prose .author-box p,small.demo-limit,.demo-limit,.note .demo-limit,.demo-line small.demo-limit{font-size:.9375rem}
.demos-teaser{padding-top:clamp(1rem,.5rem + 2vw,2.5rem)}

/* ============ 2026-10-17 lighter dark theme: navy/slate instead of near-black (same blue accents) ============ */
:root{
  --bg:#111a2c;--bg-2:#162036;--surface:#1a2438;--surface-2:#1e293b;--field:#141e31;
  --panel:rgba(30,41,59,.78);--line:rgba(148,180,255,.18);--line-2:rgba(148,180,255,.34);
  --ink-3:#9aa6b8;
}
body::before{background:
   radial-gradient(900px 600px at 78% 18%,rgba(61,134,255,.14),transparent 60%),
   radial-gradient(700px 520px at 8% 85%,rgba(61,134,255,.08),transparent 60%),
   linear-gradient(180deg,#121c2f 0%,#0f1728 100%)}
.site-header.scrolled{background:rgba(17,26,44,.86)}
.m-bar{background:rgba(17,26,44,.95)}
.site-footer{background:rgba(13,20,35,.9)}
.tools{background:rgba(26,36,56,.55)}
.svc{background:linear-gradient(180deg,rgba(32,44,64,.9),rgba(26,36,56,.9))}
.svc:hover{background:rgba(36,49,71,.92)}
.co{background:rgba(30,41,59,.85)}
.flag{background:linear-gradient(140deg,rgba(61,134,255,.12),rgba(26,36,56,.9) 45%)}
.pillar{background:radial-gradient(500px 240px at 0% 0%,rgba(61,134,255,.16),transparent 70%),rgba(26,36,56,.9)}
.hsteps li:first-child,.hsteps li:last-child{background:rgba(26,36,56,.9)}
table{background:rgba(26,36,56,.8)}
.cta{background:radial-gradient(700px 300px at 50% 0%,rgba(61,134,255,.22),transparent 70%),rgba(26,36,56,.9)}
.cta-box{background:radial-gradient(800px 360px at 15% 0%,rgba(61,134,255,.18),transparent 70%),rgba(26,36,56,.92)}
.cta-box .form{background:rgba(20,30,49,.85)}
.c-list li a,.c-list li>span{background:rgba(30,41,59,.7)}
input,select,textarea{background:var(--field)}
.prose .toc,.prose .author-box{background:rgba(26,36,56,.8)}
.soc a{background:rgba(30,41,59,.7)}
.ag{background:linear-gradient(160deg,rgba(36,52,82,.75),rgba(26,36,56,.9))}
.fv-frame{fill:rgba(26,36,56,.85)}
.fv-dot,.fv-node,.art .nd,.hv-node{fill:#1a2438}
.flow .n{background:#1a2438}
.dt-media{background:var(--surface)}
.btn-ghost{background:rgba(255,255,255,.05)}
@media (min-width:901px){.dd{background:rgba(22,32,52,.98)}.dd.mega{background:#162034}}
@media (max-width:900px){.nav-links{background:#111a2c}}