/* ==================================================================
   AMPROTEQ · site.css
   Brand: folded-bolt mark, cyan #3CCCFC -> azure #1898FC
   Utility & Industrial BESS · South Africa
================================================================== */
:root{
  --bg:#05070C; --bg2:#080C14; --bg3:#0C121C; --bg4:#111925;
  --line:rgba(150,190,255,.10); --line2:rgba(150,190,255,.20); --line3:rgba(150,190,255,.36);

  --cyan:#3CCCFC; --cyan-lt:#7FE2FE; --azure:#1898FC; --deep:#0B6FD6;
  --amber:#FFB63D; --green:#5FD69A; --violet:#9C8CFF; --red:#FF6B6B;

  --ink:#EEF3FA; --ink2:#C4D2E4; --mut:#8595B2; --dim:#5C6B85; --faint:#3A4759;

  --grad:linear-gradient(100deg,#7FE2FE 0%,#3CCCFC 42%,#1898FC 100%);
  --grad-r:linear-gradient(100deg,#3CCCFC,#1898FC);

  --fd:'Jost',system-ui,sans-serif;
  --fb:'Inter',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;

  --e:cubic-bezier(.16,1,.3,1);
  --e2:cubic-bezier(.65,.05,.36,1);
  --navh:74px;
  --gut:clamp(20px,5vw,80px);
  --maxw:1380px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:auto}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--fb); font-size:16px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img,svg{max-width:100%; display:block; border:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
canvas{display:block}
table{border-collapse:collapse; width:100%}
::selection{background:rgba(60,204,252,.3); color:#fff}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px}

h1,h2,h3,h4,h5{font-family:var(--fd); font-weight:500; letter-spacing:-.018em; line-height:1.06; margin:0}
p{margin:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.wrap-n{max-width:1080px; margin:0 auto; padding:0 var(--gut)}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- type scale ---------- */
.eyebrow{
  font-family:var(--fm); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--cyan); display:flex; align-items:center; gap:14px; font-weight:400;
}
.eyebrow::before{content:''; width:30px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); flex:none}
.eyebrow.c{justify-content:center}
.eyebrow.c::after{content:''; width:30px; height:1px; background:linear-gradient(270deg,var(--cyan),transparent); flex:none}

.h1{font-size:clamp(40px,6.2vw,92px); font-weight:500; letter-spacing:-.03em; line-height:1.0}
.h2{font-size:clamp(30px,4.4vw,60px); font-weight:500; letter-spacing:-.024em; line-height:1.06}
.h3{font-size:clamp(23px,2.7vw,38px); font-weight:500; letter-spacing:-.018em}
.h4{font-size:clamp(18px,1.5vw,23px); font-weight:500; letter-spacing:-.008em}
.lead{font-size:clamp(15.5px,1.15vw,18.5px); color:var(--ink2); line-height:1.7; max-width:60ch}
.body{font-size:15px; color:var(--mut); line-height:1.74}
.small{font-size:13.6px; color:var(--mut); line-height:1.68}
.mono{font-family:var(--fm); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.num{font-family:var(--fm); font-variant-numeric:tabular-nums}

.sec{position:relative; padding:clamp(80px,10vw,170px) 0}
.sec-s{position:relative; padding:clamp(58px,6.5vw,110px) 0}
.hr{height:1px; background:linear-gradient(90deg,transparent,var(--line2) 16%,var(--line2) 84%,transparent); border:0; margin:0}
.mt-s{margin-top:18px}.mt-m{margin-top:26px}.mt-l{margin-top:clamp(34px,4.4vw,60px)}

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 25px; border-radius:6px; font-family:var(--fd); font-weight:500;
  font-size:14.5px; letter-spacing:.005em; overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform .5s var(--e), box-shadow .5s var(--e), border-color .4s, background .4s, color .4s;
}
.btn svg{width:15px; height:15px; flex:none; transition:transform .45s var(--e)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn-p{background:var(--grad-r); color:#03080F; font-weight:600; box-shadow:0 8px 28px -10px rgba(24,152,252,.62)}
.btn-p::after{content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:linear-gradient(100deg,#7FE2FE,#3CB4FC); opacity:0; transition:opacity .45s}
.btn-p:hover::after{opacity:1}
.btn-p:hover{box-shadow:0 14px 40px -12px rgba(60,204,252,.72)}
.btn-s{border:1px solid var(--line2); color:var(--ink); background:rgba(255,255,255,.015); backdrop-filter:blur(8px)}
.btn-s:hover{border-color:var(--line3); background:rgba(255,255,255,.05)}
.btn-g{padding:0; border-radius:0; font-size:14px; color:var(--cyan); background:none}
.btn-g::after{content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:currentColor; transform:scaleX(.3); transform-origin:left; transition:transform .55s var(--e); opacity:.45}
.btn-g:hover::after{transform:scaleX(1); opacity:1}
.btn-g:hover{transform:none}
.btn-row{display:flex; gap:13px; flex-wrap:wrap}

.pill{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--fm); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink2);
  border:1px solid var(--line2); border-radius:100px; padding:7px 14px;
}
.pill i{width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); flex:none}

/* ---------- decor ---------- */
.gridbg{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 78%);
}
.glow{position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px)}

/* ==================================================================
   PRELOADER
================================================================== */
#pre{position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-direction:column}
#pre.done{transform:translateY(-101%); transition:transform 1s var(--e)}
#pre .lk{display:flex; align-items:center; gap:15px; margin-bottom:28px; opacity:0; animation:pin .9s var(--e) .1s forwards}
#pre .lk img{width:26px}
#pre .lk b{font-family:var(--fd); font-weight:300; font-size:25px; letter-spacing:.34em; color:var(--ink)}
@keyframes pin{from{opacity:0; transform:translateY(10px); filter:blur(6px)}to{opacity:1; transform:none; filter:none}}
#pre .bar{width:170px; height:1px; background:var(--line2); position:relative; overflow:hidden}
#pre .bar i{position:absolute; inset:0 100% 0 0; background:var(--grad-r); transition:right .3s linear}
#pre .pct{margin-top:13px; font-family:var(--fm); font-size:10px; letter-spacing:.28em; color:var(--dim)}

/* ==================================================================
   NAV
================================================================== */
#prog{position:fixed; top:0; left:0; height:2px; width:0; z-index:200; background:var(--grad-r); box-shadow:0 0 12px rgba(60,204,252,.6)}
#nav{
  position:fixed; top:0; left:0; right:0; height:var(--navh); z-index:150;
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--gut);
  border-bottom:1px solid transparent; transition:background .5s, backdrop-filter .5s, border-color .5s;
}
#nav.stuck{background:rgba(5,7,12,.8); backdrop-filter:blur(22px) saturate(150%); border-bottom-color:var(--line)}
.lockup{display:flex; align-items:center; gap:13px; z-index:2; flex:none}
.lockup img{width:21px; transition:transform .6s var(--e)}
.lockup:hover img{transform:scale(1.1) rotate(-6deg)}
.lockup b{font-family:var(--fd); font-weight:300; font-size:19.5px; letter-spacing:.3em; color:var(--ink); padding-left:1px}
.lockup s{
  text-decoration:none; font-family:var(--fm); font-size:9px; letter-spacing:.2em; color:var(--dim);
  padding-left:13px; border-left:1px solid var(--line2); text-transform:uppercase; white-space:nowrap;
}
.navlinks{display:flex; align-items:center; gap:34px}
.navlinks a{font-size:13.5px; color:var(--ink2); position:relative; transition:color .35s; font-weight:500; font-family:var(--fd); letter-spacing:.01em}
.navlinks a::after{content:''; position:absolute; left:0; bottom:-7px; width:100%; height:1px; background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e)}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after,.navlinks a[aria-current]::after{transform:scaleX(1)}
.navlinks a[aria-current]{color:var(--ink)}

/* The platform link. It is a live tool rather than another page of copy, so it
   carries a small cyan marker — the same signal the EMS console uses for a
   connected site. The dot is decorative: the word "Platform" is the link. */
.nav-live{display:inline-flex; align-items:center; gap:8px}
.nav-live i{
  width:5px; height:5px; border-radius:50%; background:var(--cyan); flex:none;
  box-shadow:0 0 0 0 rgba(60,204,252,.55); animation:navLive 2.6s var(--e) infinite;
}
.menu-live i{
  display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--cyan);
  margin-left:14px; vertical-align:middle;
  box-shadow:0 0 0 0 rgba(60,204,252,.55); animation:navLive 2.6s var(--e) infinite;
}
@keyframes navLive{
  0%{box-shadow:0 0 0 0 rgba(60,204,252,.5)}
  70%{box-shadow:0 0 0 7px rgba(60,204,252,0)}
  100%{box-shadow:0 0 0 0 rgba(60,204,252,0)}
}
@media (prefers-reduced-motion: reduce){
  .nav-live i,.menu-live i{animation:none}
}
.navr{display:flex; align-items:center; gap:16px; z-index:2}
#burger{width:42px; height:42px; border:1px solid var(--line2); border-radius:50%; display:grid; place-items:center; gap:5px; align-content:center; transition:border-color .4s, background .4s; flex:none}
#burger:hover{border-color:var(--line3); background:rgba(255,255,255,.04)}
#burger i{display:block; width:14px; height:1.4px; background:var(--ink); border-radius:2px; transition:transform .5s var(--e)}
body.menu #burger i:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
body.menu #burger i:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}

#menu{
  position:fixed; inset:0; z-index:140; background:rgba(5,7,12,.98); backdrop-filter:blur(24px);
  display:flex; flex-direction:column; justify-content:center; padding:var(--navh) var(--gut) 40px;
  clip-path:inset(0 0 100% 0); transition:clip-path .95s var(--e); pointer-events:none;
}
body.menu #menu{clip-path:inset(0 0 0 0); pointer-events:auto}
#menu .mrow{display:grid; grid-template-columns:1.45fr 1fr; gap:64px; max-width:var(--maxw); margin:0 auto; width:100%}
#menu .ml{display:flex; flex-direction:column; gap:2px}
#menu .ml a{
  font-family:var(--fd); font-weight:500; font-size:clamp(30px,5vw,58px); letter-spacing:-.026em;
  line-height:1.14; color:var(--ink2); display:flex; align-items:baseline; gap:18px; transform:translateY(108%);
}
body.menu #menu .ml a{transform:translateY(0); transition:transform .95s var(--e) calc(.08s + var(--i)*.05s), color .4s}
#menu .ml a em{font-family:var(--fm); font-size:11px; font-style:normal; color:var(--faint); letter-spacing:.1em}
#menu .ml a:hover{color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text}
#menu .ms{border-left:1px solid var(--line); padding-left:44px; align-self:center; display:flex; flex-direction:column; gap:26px}
#menu .ms .lbl{font-family:var(--fm); font-size:9.5px; letter-spacing:.24em; color:var(--faint); text-transform:uppercase; margin-bottom:11px}
#menu .ms a.big{font-family:var(--fd); font-size:16.5px; color:var(--ink); display:block; margin-bottom:5px; font-weight:400}
#menu .ms a.big:hover{color:var(--cyan)}

/* ==================================================================
   HERO (photo-backed)
================================================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding:calc(var(--navh) + 60px) 0 clamp(60px,9vh,110px)}
.hero.mid{min-height:auto; align-items:center; padding:calc(var(--navh) + clamp(70px,10vw,130px)) 0 clamp(70px,9vw,120px)}
.hero-ph{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-ph img{width:100%; height:100%; object-fit:cover; object-position:center 62%; will-change:transform}
.hero-ph::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(5,7,12,.93) 22%, rgba(5,7,12,.55) 52%, rgba(5,7,12,.5) 100%),
    linear-gradient(100deg, rgba(5,7,12,.92) 0%, rgba(5,7,12,.4) 46%, rgba(5,7,12,.18) 100%);
}
.hero-cv{position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:.85; pointer-events:none}
.hero .wrap{position:relative; z-index:3; width:100%}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.03em}
.hero-sub{margin-top:26px; max-width:54ch}

.scrollcue{position:absolute; left:var(--gut); bottom:26px; z-index:4; display:flex; align-items:center; gap:14px}
.scrollcue .ln{width:52px; height:1px; background:var(--line2); position:relative; overflow:hidden}
.scrollcue .ln i{position:absolute; inset:0; background:linear-gradient(90deg,transparent,var(--cyan)); animation:cue 2.2s var(--e2) infinite}
@keyframes cue{0%{transform:translateX(-105%)}62%,100%{transform:translateX(240%)}}
.scrollcue span{font-family:var(--fm); font-size:9px; letter-spacing:.3em; color:var(--faint)}

/* stat strip under hero */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(24,152,252,.045),transparent)}
.strip-in{display:grid; grid-template-columns:repeat(4,1fr); max-width:var(--maxw); margin:0 auto}
.strip-c{padding:clamp(22px,2.6vw,34px) var(--gut); border-left:1px solid var(--line)}
.strip-c:first-child{border-left:0}
.strip-c b{display:block; font-family:var(--fd); font-weight:500; font-size:clamp(26px,3.1vw,42px); letter-spacing:-.028em; line-height:1; font-variant-numeric:tabular-nums}
.strip-c b u{text-decoration:none; font-family:var(--fm); font-size:.34em; color:var(--cyan); margin-left:6px; letter-spacing:.05em}
.strip-c span{display:block; font-family:var(--fm); font-size:9.5px; letter-spacing:.19em; color:var(--dim); text-transform:uppercase; margin-top:11px}

/* ==================================================================
   MARQUEE
================================================================== */
.marq{position:relative; border-bottom:1px solid var(--line); overflow:hidden}
.marq-in{display:flex; width:max-content; will-change:transform}
.marq-in>span{display:flex; align-items:center; gap:46px; padding:15px 24px 15px 0; font-family:var(--fm); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--mut); white-space:nowrap}
.marq-in i{width:4px; height:4px; border-radius:50%; background:var(--cyan); flex:none; box-shadow:0 0 8px var(--cyan)}
.marq::before,.marq::after{content:''; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none}
.marq::before{left:0; background:linear-gradient(90deg,var(--bg),transparent)}
.marq::after{right:0; background:linear-gradient(270deg,var(--bg),transparent)}

/* ==================================================================
   LAYOUT HELPERS
================================================================== */
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5.4vw,84px); align-items:start}
.two-a{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.two-b{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.two.ac{align-items:center}
.g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px)}
.g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,26px)}
.g4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px)}
.sechead{display:flex; justify-content:space-between; align-items:flex-end; gap:34px; flex-wrap:wrap}

/* ---------- cards ---------- */
.card{
  position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006));
  transition:border-color .55s var(--e), transform .55s var(--e);
}
.card::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(60,204,252,.12), transparent 60%);
  opacity:0; transition:opacity .5s;
}
.card:hover{border-color:var(--line3); transform:translateY(-3px)}
.card:hover::before{opacity:1}
.card-b{padding:clamp(22px,2.3vw,32px); display:flex; flex-direction:column; gap:13px; position:relative; z-index:4; flex:1}
.card .idx{font-family:var(--fm); font-size:10px; letter-spacing:.22em; color:var(--cyan); text-transform:uppercase; display:flex; gap:9px}
.card .idx b{color:var(--faint); font-weight:400}
.card h3,.card h4{letter-spacing:-.02em}
.card p{font-size:14.2px; color:var(--mut); line-height:1.7}

.stage{
  position:relative; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(ellipse 90% 130% at 50% 122%, rgba(24,152,252,.22), transparent 64%), var(--bg2);
}
.stage::after{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px; opacity:.6;
  mask-image:linear-gradient(to top,#000,transparent 82%); -webkit-mask-image:linear-gradient(to top,#000,transparent 82%);
}
.stage img{position:relative; z-index:2; width:88%; max-height:82%; object-fit:contain; filter:drop-shadow(0 24px 32px rgba(0,0,0,.65)); will-change:transform}
.stage .floor{position:absolute; left:50%; bottom:-40px; transform:translateX(-50%); width:74%; height:92px; background:radial-gradient(ellipse at center, rgba(60,204,252,.32), transparent 68%); filter:blur(20px); z-index:1}

/* key/value spec grid */
.kv{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.kv.k3{grid-template-columns:repeat(3,1fr)}
.kv.k2{grid-template-columns:repeat(2,1fr)}
.kv.k4{grid-template-columns:repeat(4,1fr)}
.kv>div{background:var(--bg2); padding:13px 12px; text-align:center}
.kv b{display:block; font-family:var(--fd); font-size:17px; font-weight:500; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.kv b u{text-decoration:none; font-family:var(--fm); font-size:.6em; color:var(--cyan); margin-left:3px; letter-spacing:.04em}
.kv span{display:block; font-family:var(--fm); font-size:8.5px; letter-spacing:.16em; color:var(--dim); text-transform:uppercase; margin-top:6px}

/* ---------- reveal base (only with JS) ---------- */
.js .rv{opacity:0; transform:translateY(26px); filter:blur(8px)}
.js .rvs{opacity:0; transform:translateY(32px) scale(.98)}
.js .hero h1 .ln>span{display:block; transform:translateY(108%)}
.js .hero.in h1 .ln>span{transform:none; transition:transform 1.15s var(--e) calc(.10s + var(--i,0)*.085s)}

/* ==================================================================
   STATEMENT (scroll-scrubbed)
================================================================== */
.stmt{padding:clamp(80px,11vw,180px) 0}
.stmt .big{font-family:var(--fd); font-weight:500; font-size:clamp(27px,4.1vw,56px); line-height:1.2; letter-spacing:-.024em; max-width:22ch}
.stmt .w{color:var(--faint); transition:color .16s linear; display:inline-block}
.stmt .w.on{color:var(--ink)}
.stmt .w.hi.on{color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text}
.stmt .src{margin-top:30px; font-family:var(--fm); font-size:10.5px; letter-spacing:.16em; color:var(--faint); text-transform:uppercase}

/* ==================================================================
   PINNED FLOW
================================================================== */
.flowpin{position:relative; height:100svh; overflow:hidden; background:var(--bg)}
.flowpin canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.flowpin .shade{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,var(--bg) 1%,rgba(5,7,12,.6) 25%,transparent 56%),linear-gradient(100deg,rgba(5,7,12,.9),transparent 56%)}
.flowpin .cnt{position:absolute; left:0; right:0; bottom:clamp(96px,14vh,158px); z-index:3; height:0}
.flowstep{position:absolute; left:var(--gut); right:var(--gut); bottom:0; max-width:620px; opacity:0; transform:translateY(18px); pointer-events:none; transition:opacity .5s var(--e), transform .6s var(--e)}
.flowstep.on{opacity:1; transform:none; pointer-events:auto}
.flowstep .idx{font-family:var(--fm); font-size:10.5px; letter-spacing:.24em; color:var(--cyan); text-transform:uppercase; margin-bottom:15px}
.flowstep h3{font-size:clamp(26px,3.8vw,50px); letter-spacing:-.028em; margin-bottom:15px}
.flowstep p{font-size:clamp(14.5px,1.05vw,16.5px); color:var(--ink2); line-height:1.68; max-width:47ch}
.flowbar{position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(36px,5.2vh,56px); z-index:4; display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.flowbar i{height:2px; background:var(--line2); position:relative; overflow:hidden; border-radius:2px; display:block}
.flowbar i::after{content:''; position:absolute; inset:0; background:var(--grad-r); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e)}
.flowbar i.on::after{transform:scaleX(1)}

/* ==================================================================
   CHART PANELS
================================================================== */
.panel{border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.005)); overflow:hidden}
.panel-h{display:flex; justify-content:space-between; align-items:center; gap:18px; padding:15px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.panel-h .t{font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink2)}
.panel-h .lg{display:flex; gap:16px; flex-wrap:wrap}
.panel-h .lg span{display:flex; align-items:center; gap:7px; font-family:var(--fm); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim)}
.panel-h .lg i{width:9px; height:3px; border-radius:2px; flex:none}
.panel canvas{width:100%; display:block}

/* legend list rows */
.rows{display:flex; flex-direction:column; gap:1px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--line)}
.row{display:flex; align-items:center; gap:15px; padding:16px 19px; background:var(--bg2); transition:background .4s}
.row:hover{background:var(--bg3)}
.row .sw{width:8px; height:8px; border-radius:2px; flex:none; box-shadow:0 0 10px currentColor}
.row .tx{flex:1; min-width:0}
.row .tx b{display:block; font-family:var(--fd); font-size:15px; font-weight:500; letter-spacing:-.008em}
.row .tx span{display:block; font-size:12.6px; color:var(--dim); line-height:1.5; margin-top:2px}
.row .vl{font-family:var(--fm); font-size:11px; color:var(--ink2); letter-spacing:.05em; white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right}

/* ---------- feature list ---------- */
.flist{display:flex; flex-direction:column}
.fitem{display:grid; grid-template-columns:auto 1fr; gap:18px; padding:20px 0; border-top:1px solid var(--line); align-items:start}
.fitem:last-child{border-bottom:1px solid var(--line)}
.fitem .ic{width:34px; height:34px; border:1px solid var(--line2); border-radius:8px; display:grid; place-items:center; color:var(--cyan); flex:none}
.fitem .ic svg{width:16px; height:16px}
.fitem h4{font-size:16px; margin-bottom:5px}
.fitem p{font-size:13.8px; color:var(--mut); line-height:1.68}

/* ---------- table ---------- */
.tbl{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg2)}
.tbl-scroll{overflow-x:auto}
.tbl table{min-width:640px}
.tbl th,.tbl td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); font-size:13.8px}
.tbl th{font-family:var(--fm); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); font-weight:400; background:rgba(255,255,255,.02)}
.tbl td{color:var(--ink2)}
.tbl td:first-child{color:var(--ink); font-family:var(--fd); font-weight:500; font-size:14.6px}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .35s}
.tbl tbody tr:hover{background:rgba(255,255,255,.022)}
.tbl .n{font-family:var(--fm); font-variant-numeric:tabular-nums; font-size:13px}

/* ---------- personas / industries ---------- */
.pers{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.per{background:var(--bg2); padding:clamp(26px,3vw,42px); display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,1fr); gap:clamp(18px,3vw,48px); align-items:start; transition:background .5s}
.per:hover{background:var(--bg3)}
.per .lb{font-family:var(--fm); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); padding-top:7px}
.per h3{font-size:clamp(19px,2vw,27px); margin-bottom:12px}
.per p{font-size:14.4px; color:var(--mut); line-height:1.7; max-width:64ch}
.per ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}

.ind{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.ind div{background:var(--bg2); padding:22px 14px; text-align:center; transition:background .4s, color .4s; font-family:var(--fm); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--mut)}
.ind div:hover{background:var(--bg4); color:var(--cyan)}

/* ---------- partners ---------- */
.ptn{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,24px)}
.ptn .card-b{gap:16px}
.ptn .tag{font-family:var(--fm); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan)}
.certs{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px}
.certs img{height:74px; width:auto; border:1px solid var(--line); border-radius:6px; background:#fff; padding:5px; opacity:.9; transition:opacity .4s, transform .4s var(--e)}
.certs img:hover{opacity:1; transform:translateY(-3px)}

/* ---------- CTA band ---------- */
.cta{position:relative; overflow:hidden; border-top:1px solid var(--line)}
.cta .glow{width:820px; height:520px; left:50%; top:-190px; transform:translateX(-50%); background:rgba(24,152,252,.16)}

/* ==================================================================
   FORM
================================================================== */
.form{display:grid; gap:13px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.fld{position:relative}
.fld label{position:absolute; left:15px; top:14px; font-family:var(--fm); font-size:9.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--faint); pointer-events:none; transition:.35s var(--e)}
.fld input,.fld select,.fld textarea{
  width:100%; background:rgba(255,255,255,.024); border:1px solid var(--line); border-radius:8px;
  padding:29px 15px 12px; color:var(--ink); font-family:var(--fb); font-size:14.5px;
  transition:border-color .4s, background .4s; appearance:none; -webkit-appearance:none;
}
.fld textarea{min-height:112px; resize:vertical; line-height:1.6}
.fld select{cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%); background-position:calc(100% - 19px) 23px,calc(100% - 14px) 23px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.fld select option{background:var(--bg3); color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--line3); background:rgba(255,255,255,.05)}
.fld input:focus+label,.fld select:focus+label,.fld textarea:focus+label,.fld.fill label{color:var(--cyan)}

/* contact cards */
.ppl{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px)}
.pcard{border:1px solid var(--line); border-radius:12px; padding:clamp(22px,2.4vw,30px); background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.005)); transition:border-color .5s, transform .5s var(--e)}
.pcard:hover{border-color:var(--line3); transform:translateY(-3px)}
.pcard .av{width:44px; height:44px; border-radius:50%; background:var(--grad-r); display:grid; place-items:center; font-family:var(--fd); font-weight:500; font-size:16px; color:#03080F; margin-bottom:18px; letter-spacing:.02em}
.pcard h4{font-size:19px; margin-bottom:3px}
.pcard .rl{font-family:var(--fm); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px}
.pcard a{display:flex; align-items:center; gap:11px; padding:9px 0; border-top:1px solid var(--line); font-size:14px; color:var(--ink2); transition:color .35s}
.pcard a svg{width:14px; height:14px; color:var(--dim); flex:none; transition:color .35s}
.pcard a:hover,.pcard a:hover svg{color:var(--cyan)}

/* ==================================================================
   FOOTER
================================================================== */
footer{border-top:1px solid var(--line); padding:clamp(50px,6vw,78px) 0 32px; background:var(--bg2)}
.fgrid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:clamp(26px,4vw,54px)}
.fgrid h5{font-family:var(--fm); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin:0 0 15px; font-weight:400}
.fgrid nav a{display:block; font-size:13.8px; color:var(--mut); padding:5px 0; transition:color .35s}
.fgrid nav a:hover{color:var(--cyan)}
.fb p{font-size:13.8px; color:var(--mut); max-width:36ch; margin-top:18px; line-height:1.7}
.fbot{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-top:clamp(36px,4.6vw,58px); padding-top:24px; border-top:1px solid var(--line)}
.fbot p{font-family:var(--fm); font-size:10px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase}

#toast{
  position:fixed; left:50%; bottom:32px; transform:translate(-50%,140%); z-index:400;
  background:rgba(12,18,28,.96); border:1px solid var(--line2); border-radius:100px;
  padding:12px 24px; font-family:var(--fm); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); backdrop-filter:blur(16px); transition:transform .7s var(--e); box-shadow:0 18px 46px -14px rgba(0,0,0,.85);
}
#toast.on{transform:translate(-50%,0)}

/* ==================================================================
   RESPONSIVE
================================================================== */
@media(max-width:1100px){
  .navlinks{display:none}
  .two,.two-a,.two-b{grid-template-columns:1fr; gap:32px}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .strip-c:nth-child(3){border-left:0}
  .strip-c:nth-child(n+3){border-top:1px solid var(--line)}
  .ind{grid-template-columns:repeat(3,1fr)}
  .ptn{grid-template-columns:1fr}
  .ppl{grid-template-columns:1fr}
  #menu .mrow{grid-template-columns:1fr; gap:36px}
  #menu .ms{border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:28px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .lockup s{display:none}
  .navr .btn-p{display:none}
  .lockup b{font-size:17px; letter-spacing:.26em}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .per{grid-template-columns:1fr; gap:14px}
  .strip-in{grid-template-columns:1fr}
  .strip-c{border-left:0}
  .strip-c:nth-child(n+2){border-top:1px solid var(--line)}
  .ind{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .stmt .big{max-width:none}
  .flowbar{gap:6px}
  .kv.k4{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .js .rv,.js .rvs{opacity:1; transform:none; filter:none}
  .js .hero h1 .ln>span{transform:none}
}

/* ==================================================================
   DISPATCH READOUT + TOGGLE
================================================================== */
.readout{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line)}
.readout>div{background:var(--bg2); padding:15px 18px}
.readout span{display:block; font-family:var(--fm); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:7px}
.readout b{font-family:var(--fd); font-weight:500; font-size:clamp(17px,1.7vw,22px); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink)}
.readout b u{text-decoration:none; font-family:var(--fm); font-size:.55em; color:var(--cyan); margin-left:2px; letter-spacing:.04em}
.readout b.pos{color:var(--green)}
@media(max-width:760px){.readout{grid-template-columns:repeat(2,1fr)}}

.tgl{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line2); border-radius:100px; padding:7px 15px 7px 11px;
  font-family:var(--fm); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink2); transition:border-color .4s, background .4s}
.tgl:hover{border-color:var(--line3); background:rgba(255,255,255,.035)}
.tgl i{width:26px; height:14px; border-radius:100px; background:rgba(150,190,255,.16); position:relative; transition:background .4s; flex:none}
.tgl i::after{content:''; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--mut); transition:.4s var(--e)}
.tgl[aria-pressed="true"] i{background:rgba(60,204,252,.35)}
.tgl[aria-pressed="true"] i::after{left:14px; background:var(--cyan); box-shadow:0 0 8px var(--cyan)}

/* capability grid */
.caps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.caps>div{background:var(--bg2); padding:22px 22px; transition:background .4s}
.caps>div:hover{background:var(--bg3)}
.caps .n{font-family:var(--fm); font-size:9px; letter-spacing:.2em; color:var(--faint); display:block; margin-bottom:11px}
.caps h4{font-size:15.5px; margin-bottom:7px}
.caps p{font-size:13px; color:var(--mut); line-height:1.62}
.caps .sa{display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-family:var(--fm); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase}
.caps .sa.y{color:var(--green)} .caps .sa.n{color:var(--faint)}
.caps .sa::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor}
@media(max-width:1100px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.caps{grid-template-columns:1fr}}

/* ==================================================================
   POLISH PASS
================================================================== */
/* hairline highlight along the top edge of cards & panels */
.card::after,.panel::after{
  content:''; position:absolute; left:14%; right:14%; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(150,190,255,.30),transparent);
}
.panel{position:relative}
.card{box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.card:hover{box-shadow:0 18px 40px -22px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05) inset}

/* panel headers sit a touch tighter and read as instrument labels */
.panel-h{background:linear-gradient(180deg,rgba(255,255,255,.028),transparent)}
.panel-h .t{color:var(--ink)}

/* section eyebrow numbers */
.card .idx{align-items:baseline}

/* stat strip: subtle vertical accent on hover */
.strip-c{position:relative; transition:background .45s}
.strip-c::after{content:''; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--grad-r); opacity:0; transition:opacity .45s}
.strip-c:hover{background:rgba(255,255,255,.018)}
.strip-c:hover::after{opacity:.9}

/* feature list icons pick up brand tint on hover */
.fitem{transition:border-color .4s}
.fitem .ic{transition:border-color .4s, background .4s, transform .5s var(--e)}
.fitem:hover .ic{border-color:var(--line3); background:rgba(60,204,252,.07); transform:translateY(-2px)}

/* pills */
.pill{transition:border-color .4s, color .4s, background .4s}
.pill:hover{border-color:var(--line3); color:var(--ink); background:rgba(255,255,255,.03)}

/* table rows: leading accent */
.tbl tbody tr{position:relative}
.tbl tbody tr td:first-child{position:relative}
.tbl tbody tr:hover td:first-child::before{content:''; position:absolute; left:0; top:18%; bottom:18%; width:2px; background:var(--grad-r)}

/* capability grid: number becomes brand-tinted on hover */
.caps>div{transition:background .4s}
.caps>div:hover .n{color:var(--cyan)}
.caps .n{transition:color .4s}


/* ==================================================================
   3D VECTOR ILLUSTRATIONS
================================================================== */
.hero-3d{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-3d canvas{width:100%; height:100%; display:block}
.hero-3d::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 74% at 12% 46%, rgba(5,7,12,.92) 0%, rgba(5,7,12,.45) 44%, transparent 74%),
    linear-gradient(to top, var(--bg) 0%, rgba(5,7,12,.18) 14%, transparent 40%);
}
.hero .hero-cv{opacity:.5}

.stage canvas{position:relative; z-index:2; width:100%; display:block}
.stage:has(canvas){background:radial-gradient(ellipse 84% 120% at 50% 118%, rgba(24,152,252,.16), transparent 62%), var(--bg2)}
.card:hover .stage::after{opacity:.8}

/* ==================================================================
   MOBILE — real fixes, not squeezed desktop
================================================================== */
@media(max-width:820px){
  :root{--navh:64px}

  /* ---- hero: 3D scene becomes a block ABOVE the copy ---- */
  .hero,.hero.mid{min-height:auto; display:block;
    padding:calc(var(--navh) + 14px) 0 46px}
  .hero-3d{position:relative; inset:auto; height:32svh; min-height:210px; max-height:280px;
    margin:0 0 6px; border-bottom:1px solid var(--line)}
  .hero-3d::after{background:linear-gradient(to bottom,transparent 34%,rgba(5,7,12,.55) 76%,var(--bg) 100%)}
  .hero .hero-cv{display:none}
  .hero .wrap{position:relative; z-index:3}
  .hero h1,.hero .h1{font-size:clamp(31px,8.4vw,44px) !important; line-height:1.02; margin-top:16px !important}
  .hero .eyebrow{font-size:9.5px; letter-spacing:.17em; line-height:1.7}
  .hero .eyebrow::before{width:18px}
  .hero-sub{margin-top:18px; font-size:15px; line-height:1.62}
  .hero .btn-row{margin-top:24px !important; gap:10px}
  .hero .btn{padding:13px 20px; font-size:14px}
  .scrollcue{display:none}
  .hero .two,.hero .two-a,.hero .two-b{gap:22px}

  /* ---- delivery: no scroll-jacking on phones ---- */
  .flowpin{height:auto; padding:8px 0 4px}
  .flowpin canvas{display:none}
  .flowpin .shade{display:none}
  .flowpin .cnt{position:static; height:auto}
  .flowstep{position:static; opacity:1 !important; transform:none !important; pointer-events:auto;
    max-width:none; left:auto; right:auto; padding:22px 0; border-top:1px solid var(--line)}
  .flowstep:first-child{border-top:0}
  .flowstep h3{font-size:clamp(23px,6.4vw,30px); margin-bottom:10px}
  .flowstep p{font-size:15px; max-width:none}
  .flowbar{display:none}

  /* ---- typography rhythm ---- */
  .h1{font-size:clamp(31px,8.4vw,46px)}
  .h2{font-size:clamp(26px,6.8vw,36px)}
  .h3{font-size:clamp(21px,5.4vw,27px)}
  .lead{font-size:15.5px; line-height:1.66}
  .sec{padding:clamp(52px,11vw,74px) 0}
  .sec-s{padding:clamp(40px,9vw,58px) 0}
  .stmt{padding:clamp(56px,13vw,84px) 0}
  .stmt .big{font-size:clamp(23px,6.6vw,31px); line-height:1.28; max-width:none}
  .sechead{gap:16px}
  .mt-l{margin-top:26px}

  /* ---- panels & charts ---- */
  .panel-h{padding:13px 15px; gap:11px}
  .panel-h .lg{gap:11px; row-gap:6px}
  .panel-h .lg span{font-size:8.5px}
  .panel-h .t{font-size:9.5px}
  .tgl{padding:6px 12px 6px 9px; font-size:9px}
  .readout>div{padding:12px 14px}
  .readout b{font-size:17px}
  .readout span{font-size:8px; margin-bottom:5px}

  /* ---- cards ---- */
  .card-b{padding:20px}
  .card p{font-size:14px}
  .kv b{font-size:15px}
  .kv span{font-size:8px}
  .kv.k3{grid-template-columns:repeat(3,1fr)}
  .stage{height:190px !important}

  /* ---- tables scroll rather than squash ---- */
  .tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tbl th,.tbl td{padding:12px 14px; font-size:13px}
  .tbl td:first-child{font-size:13.6px}

  /* ---- nav / menu ---- */
  #nav{padding:0 18px}
  #menu{padding:var(--navh) 18px 28px}
  #menu .ml a{font-size:clamp(27px,8.6vw,38px); gap:12px}
  #menu .ml a em{font-size:10px}
  #menu .ms a.big{font-size:15.5px}

  /* ---- forms: comfortable tap targets ---- */
  .fld input,.fld select,.fld textarea{padding:27px 14px 11px; font-size:16px}  /* 16px stops iOS zoom */
  .btn{padding:14px 22px}
  .pcard a{padding:11px 0}

  /* ---- footer ---- */
  footer{padding:44px 0 26px}
  .fbot{gap:10px}
  .fbot p{font-size:9.5px}
  .ind div{padding:17px 10px; font-size:9px}
}

@media(max-width:480px){
  .kv.k3{grid-template-columns:1fr 1fr}
  .kv.k3>div:last-child{grid-column:span 2}
  .readout{grid-template-columns:1fr 1fr}
  .strip-c{padding:20px 18px}
  .strip-c b{font-size:28px}
}

/* ==================================================================
   CONTACT — process strip + office panel
================================================================== */
.steps4{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden}
.steps4 .st{background:var(--bg2); padding:clamp(22px,2.5vw,30px); transition:background .45s; position:relative}
.steps4 .st:hover{background:var(--bg3)}
.steps4 .st::after{content:''; position:absolute; left:0; top:0; height:2px; width:100%;
  background:var(--grad-r); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--e)}
.steps4 .st:hover::after{transform:scaleX(1)}
.steps4 .n{font-family:var(--fm); font-size:10px; letter-spacing:.22em; color:var(--cyan); display:block; margin-bottom:14px}
.steps4 h4{font-size:16.5px; margin-bottom:8px; letter-spacing:-.012em}
.steps4 p{font-size:13.4px; color:var(--mut); line-height:1.62}
@media(max-width:1100px){.steps4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps4{grid-template-columns:1fr}}

.office{position:relative; overflow:hidden}
.office::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at 100% 0%, rgba(60,204,252,.10), transparent 62%)}

/* vector artwork sits cleanly in card stages */
.stage img[src$=".svg"]{width:88%; max-height:86%; object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}