:root{
  --bg:#0b1020; --bg2:#0f1630; --card:#121a36; --line:#222c52;
  --text:#e8ecfa; --muted:#a3adcc; --accent:#6366f1; --accent2:#14b8a6; --coffee:#ffdd00;
  --radius:16px; --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#9db0ff;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent2);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,6vw,3.6rem);letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:1.2rem}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.grad{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:var(--accent2);font-weight:600;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:1rem}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
.center{text-align:center}.center .lead{margin-inline:auto}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700}
.brand:hover{text-decoration:none}
nav{display:flex;align-items:center;gap:20px}
nav a{color:var(--muted);font-size:.95rem}
nav a:hover{color:var(--text);text-decoration:none}

/* buttons */
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),#4f46e5);color:#fff;padding:12px 22px;border-radius:12px;font-weight:600;border:1px solid transparent;transition:transform .15s,box-shadow .15s}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,.35)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-small{padding:8px 16px;font-size:.9rem;color:#fff}
nav a.btn-small{color:#fff}
.btn-coffee{background:var(--coffee);color:#111}
.btn-coffee:hover{box-shadow:0 8px 24px rgba(255,221,0,.3)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:1.6rem 0}
.cta.center{justify-content:center}

/* hero */
.hero{padding:88px 0 56px;background:radial-gradient(900px 400px at 15% -10%,rgba(99,102,241,.28),transparent),radial-gradient(700px 360px at 90% 0,rgba(20,184,166,.18),transparent)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:2.5rem 0 0}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stats dt{font-size:2rem;font-weight:800;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats dd{margin:0;color:var(--muted);font-size:.9rem}

/* sections */
.section{padding:72px 0}
.alt{background:var(--bg2)}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:32px}
.two.small-gap{margin-top:28px;grid-template-columns:1fr 1fr}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.card h3,.card h4{margin-bottom:.4em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.facts ul{list-style:none;margin:0;padding:0}
.facts li{padding:10px 0;border-bottom:1px solid var(--line)}
.facts li:last-child{border:0}
.facts span{display:block;color:var(--accent2);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}

/* timeline */
.timeline{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--line);display:grid;gap:20px}
.timeline>li{position:relative}
.timeline>li::before{content:"";position:absolute;left:-30px;top:28px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--bg2)}
.when{color:var(--accent2);font-size:.85rem;font-weight:600}
.org{color:var(--muted);margin-bottom:.8em}
.card ul{margin:0;padding-left:1.2em}
.card li{margin-bottom:.4em}
.plain{list-style:none;padding:0!important}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:#1a2347;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.85rem;color:#cdd6f4}
.projects{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.projects p{color:var(--muted);font-size:.95rem}

/* vtoxi */
.vtoxi{padding:88px 0;background:linear-gradient(180deg,#0a0f22,#101a3a 60%,#0a0f22);border-block:1px solid var(--line);position:relative;overflow:hidden}
.vtoxi::before{content:"";position:absolute;inset:-20% -10% auto auto;width:520px;height:520px;background:radial-gradient(circle,rgba(20,184,166,.18),transparent 65%)}
.vtoxi .wrap{position:relative}
.vt-title{font-size:clamp(3rem,9vw,5.5rem);letter-spacing:.06em;margin-bottom:.2em}
.services{margin:2rem 0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sub{margin:2.4rem 0 1rem;font-size:1.3rem}
.products .card{display:flex;flex-direction:column;color:var(--text)}
.products .card:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-3px)}
.products .card{transition:transform .15s,border-color .15s}
.products p{color:var(--muted);flex:1}
.tag{align-self:flex-start;margin-top:.6em;background:rgba(20,184,166,.15);color:#5eead4;border-radius:999px;padding:2px 10px;font-size:.78rem}

.links a{white-space:nowrap}
.links{color:var(--muted)}
.foot{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);text-align:center;font-size:.9rem}

@media (max-width:760px){
  nav a:not(.btn){display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .two,.two.small-gap{grid-template-columns:1fr}
  .hero{padding:56px 0 40px}
  .section{padding:52px 0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ---------- ventures + IoT ---------- */
.ventures{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.venture .tag{margin:0 0 .6em}
.venture{border-color:#2a3a72;background:linear-gradient(160deg,#141f45,#101834)}
.iot{background:radial-gradient(800px 360px at 85% 0,rgba(20,184,166,.14),transparent),var(--bg)}
.chips.big{margin:1.2rem 0 1.8rem}
.chips.big span{font-size:.95rem;padding:6px 14px}
.iot-grid .card{position:relative;display:flex;flex-direction:column;color:var(--text);transition:transform .15s,border-color .15s}
.iot-grid .card.link:hover{text-decoration:none;border-color:var(--accent2);transform:translateY(-3px)}
.iot-grid p{color:var(--muted);flex:1}
.pulse{position:absolute;top:22px;right:22px;width:10px;height:10px;border-radius:50%;background:var(--accent2);box-shadow:0 0 0 0 rgba(20,184,166,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(20,184,166,0)}100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}}

/* ---------- 3D timeline ---------- */
.tl3d{position:relative;height:460px;margin:1rem 0 .8rem;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:radial-gradient(700px 320px at 50% 0,rgba(99,102,241,.22),transparent),linear-gradient(180deg,#0b1128,#0a0f22);touch-action:pan-y;cursor:grab}
.tl3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tl-labels{position:absolute;inset:0;pointer-events:none}
.tl-label{position:absolute;left:0;top:0;white-space:nowrap;font-size:.78rem;font-weight:600;color:#dbe3ff;text-shadow:0 1px 8px #000,0 0 2px #000;will-change:transform}
.tl-label small{display:block;font-weight:500;color:var(--muted);font-size:.7rem}
.tl-year{font-size:.72rem;color:#7f8bb5;font-weight:500}
.tl-over{color:#ffe08a;font-size:.74rem}
.tl-tip{position:absolute;z-index:3;pointer-events:none;max-width:260px;background:rgba(10,15,34,.95);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.85rem;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.tl-tip b{display:block;margin-bottom:2px}
.tl-tip span{color:var(--muted);display:block}
.tl-tip em{color:#ffe08a;font-style:normal;display:block;margin-top:4px}
.tl-fallback{display:none;position:absolute;inset:0;margin:0;padding:24px;align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.tl3d.no-webgl{height:auto;min-height:90px}
.tl3d.no-webgl canvas,.tl3d.no-webgl .tl-labels{display:none}
.tl3d.no-webgl .tl-fallback{display:flex;position:static}
.tl-legend{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--muted);font-size:.85rem}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:4px}
.sw-overlap{background:rgba(255,224,138,.55);box-shadow:0 0 10px rgba(255,224,138,.8)}
.badge{display:inline-block;margin:.2rem 0 .7rem;background:rgba(255,224,138,.12);color:#ffe08a;border:1px solid rgba(255,224,138,.35);border-radius:999px;padding:2px 12px;font-size:.78rem}
@media (max-width:760px){
  .tl3d{height:300px}
  .tl-label:not(.tl-year){display:none}
}

/* ---------- icons & imagery ---------- */
.ico{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}
.title-ico{color:var(--accent2);margin-right:.45em;width:1.25em;height:1.25em}
.mini{width:1em;height:1em;margin-right:.45em;color:var(--accent2);vertical-align:-.12em}
.btn .mini{color:currentColor;margin-right:.5em}
.dark{color:#111!important}
.stat-ico{display:block;width:1.5rem;height:1.5rem;color:var(--accent2);margin-bottom:.5rem}
.ibox{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;margin-bottom:.8rem;background:linear-gradient(135deg,rgba(99,102,241,.28),rgba(20,184,166,.22));border:1px solid var(--line);color:#c7d2fe}
.ibox .ico{width:22px;height:22px}
.venture .ibox{float:right;margin:0 0 .5rem .8rem}
.facts span{display:flex;align-items:center}

.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}
.avatar{position:relative;justify-self:center;width:min(280px,70vw);aspect-ratio:1}
.avatar img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;border:6px solid var(--bg);box-shadow:0 20px 60px rgba(0,0,0,.5);z-index:1}
.avatar .ring{position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 0deg,var(--accent),var(--accent2),#f472b6,var(--accent));animation:spin 12s linear infinite;filter:blur(.3px)}
@keyframes spin{to{transform:rotate(360deg)}}
.float{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(18,26,54,.92);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.82rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:bob 5s ease-in-out infinite}
.float .ico{color:var(--accent2)}
.f1{top:6%;left:-14%}.f2{bottom:14%;right:-12%;animation-delay:-1.6s}.f3{bottom:-2%;left:6%;animation-delay:-3.2s}
@keyframes bob{50%{transform:translateY(-8px)}}

.marquee{display:flex;overflow:hidden;border-block:1px solid var(--line);background:#0a0f22;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;flex:none;gap:36px;padding-right:36px;animation:slide 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
.logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;color:#cdd6f4;font-weight:600;font-size:.95rem}
.logo img{width:22px;height:22px}
.logo-ico{width:22px;height:22px;color:#7aa2ff}
.chips .wl{display:inline-flex;align-items:center;gap:6px}
.chips .wl img{width:14px;height:14px}

.socials{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:1.8rem}
.soc{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 16px;color:var(--text);font-size:.92rem;transition:transform .15s,border-color .15s}
.soc:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--accent)}
.soc .mini{margin:0}
.btn .mini{vertical-align:-.12em}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .avatar{order:-1;width:min(200px,55vw);margin-bottom:12px}
  .f1{left:-18%}.f2{right:-18%}
}
@media (prefers-reduced-motion:reduce){
  .avatar .ring,.float,.pulse{animation:none!important}
  .track{animation:none!important}
  .marquee{flex-wrap:wrap;justify-content:center;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .track[aria-hidden="true"]{display:none}
}

/* ---------- interactivity ---------- */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:80;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:0 50%}
.kbd-btn{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:10px;padding:6px 10px;font:inherit;font-size:.82rem;cursor:pointer}
.kbd-btn:hover{color:var(--text);border-color:var(--accent)}
kbd{font:inherit;font-size:.72rem;border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:#0b1226;color:var(--muted)}
.swatches{display:flex;gap:6px}
.swatches button{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.swatches button:nth-child(1){background:linear-gradient(135deg,#6366f1,#14b8a6)}
.swatches button:nth-child(2){background:linear-gradient(135deg,#f97316,#ec4899)}
.swatches button:nth-child(3){background:linear-gradient(135deg,#10b981,#22d3ee)}
.swatches button.on{border-color:#fff}
.btn{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000))}
.btn-ghost{background:transparent}
.btn-coffee{background:var(--coffee)}
.eyebrow,.title-ico,.mini,.stat-ico,.facts span{color:var(--accent2)}
.grad,.stats dt,.vt-title .grad{background-image:linear-gradient(90deg,var(--accent),var(--accent2))}
.timeline>li::before{background:var(--accent)}
.progress{background:linear-gradient(90deg,var(--accent),var(--accent2))}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.card{position:relative}
.card::after,.stats>div::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),rgba(255,255,255,.09),transparent 65%);opacity:0;transition:opacity .2s;pointer-events:none}
.card:hover::after,.stats>div:hover::after{opacity:1}
.stats>div{position:relative;transition:transform .15s}
.grid>.card,.stats>div,.venture{will-change:transform}

.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(255,255,255,.07),transparent 70%);pointer-events:none}
.typed-line{color:var(--muted);margin:.4rem 0 0;font-size:1.05rem}
.typed-line #typed{color:var(--text);font-weight:600}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--accent2);margin-left:3px;vertical-align:-.18em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.avatar{cursor:pointer}
.avatar.burst .ring{animation:spin .8s linear 2}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#10183a;border:1px solid var(--line);color:var(--text);padding:10px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.3s;z-index:90;max-width:90vw;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* command menu */
.palette{position:fixed;inset:0;z-index:100;background:rgba(5,8,20,.65);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}
.palette[hidden]{display:none}
.pal-box{width:min(560px,92vw);background:#0f1634;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.pal-box input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;font-size:1.05rem;padding:16px 18px;outline:none}
.pal-box ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
.pal-box li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--text)}
.pal-box li em{font-style:normal;color:var(--muted);font-size:.78rem}
.pal-box li.sel,.pal-box li:hover{background:color-mix(in srgb,var(--accent) 28%,transparent)}
.pal-box li.none{color:var(--muted);cursor:default}
.pal-hint{margin:0;padding:10px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem;display:flex;gap:6px;align-items:center}

/* timeline controls */
.tl3d.dragging{cursor:grabbing}
.tl-controls{position:absolute;top:12px;right:12px;z-index:4;display:flex;gap:6px}
.tl-controls button,.filters button,.pg-legend button,.seg button{font:inherit;font-size:.8rem;cursor:pointer;background:rgba(18,26,54,.9);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.tl-controls button:hover,.filters button:hover,.pg-legend button:hover,.seg button:hover{color:var(--text);border-color:var(--accent)}
.tl-controls button.on,.filters button.on,.pg-legend button.on,.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tl-detail{position:absolute;left:12px;bottom:12px;right:12px;z-index:3;background:rgba(10,15,34,.92);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.88rem;max-width:620px}
.tl-detail[hidden]{display:none}
.tl-detail span{color:#ffe08a}
.tl-hint{color:var(--muted);font-size:.82rem;text-align:center;margin:.4rem 0 0}

/* skills playground */
.playground{border:1px solid var(--line);border-radius:20px;background:radial-gradient(600px 240px at 50% 0,rgba(99,102,241,.16),transparent),#0a0f22;padding:14px 14px 10px;margin-bottom:2rem}
.pg-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:6px}
.pg-legend button{display:inline-flex;align-items:center;gap:6px}
.pg-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.pg-svg{display:block;width:100%;touch-action:pan-y}
.pg-node{cursor:grab;transition:opacity .25s}
.pg-node:active{cursor:grabbing}
.sub{margin:2rem 0 1rem}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1rem}
.products .card{transition:opacity .3s,transform .3s}
.products .card.hide{display:none}

/* simulator */
.sim{margin-top:2.4rem}
.sim-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sim-head h3{margin:0}
.sim-body{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:28px;align-items:center;margin:1.2rem 0}
.tank{width:100%;height:auto;max-height:300px}
.wave{animation:wave 4s linear infinite}
@keyframes wave{to{transform:translateX(100px)}}
.sim-panel{display:grid;gap:14px}
.sim-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sim-row>span:first-child{min-width:74px;color:var(--muted)}
.sim-row small{color:var(--muted)}
.led{width:14px;height:14px;border-radius:50%;background:#334;box-shadow:inset 0 0 0 2px #1d2650}
.led.on{background:#22c55e;box-shadow:0 0 14px #22c55e}
.led.bad{background:#ef4444;box-shadow:0 0 14px #ef4444;animation:blink 1s steps(2) infinite}
.seg{display:inline-flex;gap:6px}
.switch{position:relative;display:inline-block;width:40px;height:22px}
.switch input{opacity:0;position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;background:#1d2650;border-radius:999px;transition:.2s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+i{background:var(--accent)}
.switch input:checked+i::after{transform:translateX(18px)}
.switch input:focus-visible+i{outline:3px solid var(--accent2);outline-offset:2px}
.sim-actions{display:flex;gap:10px;flex-wrap:wrap}
.log{list-style:none;margin:0;padding:10px 12px;background:#080d1f;border:1px solid var(--line);border-radius:12px;font-size:.8rem;min-height:128px;max-height:140px;overflow:hidden}
.log li{padding:2px 0;color:#9fb0e6}
.log li.warn{color:#fca5a5}
.log code{color:#5eead4;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.note{color:var(--muted);font-size:.82rem;margin:0}

@media (max-width:860px){.kbd-btn kbd,.swatches{display:none}.sim-body{grid-template-columns:1fr}.tank{max-height:220px}.tl-controls{top:8px;right:8px}.tl-controls button{padding:4px 9px;font-size:.74rem}}
@media (max-width:760px){.kbd-btn span{display:none}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.wave,.caret{animation:none}}

.pg-stage{position:relative}
.pg-canvas{display:block;margin:0 auto;touch-action:pan-y;border-radius:14px}
.pg-tip{position:absolute;pointer-events:none;background:rgba(10,15,34,.95);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.78rem;white-space:nowrap;z-index:2}
.pg-tip[hidden]{display:none}

/* ---------- AquaSync overflow, flood and emergency stop ---------- */
.spill-line{stroke:#38bdf8;stroke-width:5;stroke-linecap:round;stroke-dasharray:7 11;fill:none;animation:drip .5s linear infinite}
.spill-line.l2{animation-delay:-.2s}
@keyframes drip{to{stroke-dashoffset:-18}}
.spill-lip{stroke:#7dd3fc;stroke-width:4;stroke-linecap:round;fill:none;opacity:.8}
.puddle{fill:#38bdf8;opacity:.8;animation:puddle 2.4s ease-in-out infinite alternate;transform-origin:100px 242px}
@keyframes puddle{to{transform:scaleX(2.6)}}
.sim.overflowing{animation:shake .35s linear infinite;border-color:#ef4444;box-shadow:0 0 0 1px #ef4444,0 0 40px rgba(239,68,68,.35)}
@keyframes shake{25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}
.hint-line b{color:var(--text)}

.flood{position:fixed;left:0;right:0;bottom:0;height:64vh;z-index:45;pointer-events:none;visibility:hidden;transform:translate3d(0,100%,0);will-change:transform;
  background:linear-gradient(180deg,rgba(56,189,248,.34),rgba(37,99,235,.55) 55%,rgba(30,64,175,.72));
  -webkit-backdrop-filter:blur(1.4px) saturate(1.5) hue-rotate(-8deg) brightness(.92);backdrop-filter:blur(1.4px) saturate(1.5) hue-rotate(-8deg) brightness(.92)}
.flood > svg{position:absolute;left:0;top:-18px;width:200%;height:20px;fill:rgba(125,211,252,.55)}
.flood > .wave-a{animation:waveSlide 7s linear infinite}
.flood > .wave-b{top:-12px;fill:rgba(56,189,248,.45);animation:waveSlide 11s linear infinite reverse}
@keyframes waveSlide{to{transform:translateX(-50%)}}
.flood-body{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(120px 60px at 20% 30%,rgba(255,255,255,.12),transparent 70%),
  radial-gradient(160px 70px at 70% 55%,rgba(255,255,255,.10),transparent 70%)}
.flood-body i{position:absolute;bottom:-12px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5),transparent 60%);animation:rise 6s linear infinite}
@keyframes rise{to{transform:translateY(calc(var(--h,200px) * -1));opacity:0}}
.alarm{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;box-shadow:inset 0 0 140px 20px rgba(239,68,68,.55);transition:opacity .4s}
body.emergency .alarm{opacity:1;animation:alarm 1s ease-in-out infinite alternate}
@keyframes alarm{from{box-shadow:inset 0 0 90px 10px rgba(239,68,68,.25)}to{box-shadow:inset 0 0 170px 30px rgba(239,68,68,.65)}}
.estop-panel{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:95;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  background:rgba(12,6,10,.92);border:2px solid #ef4444;border-radius:20px;padding:14px 18px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(239,68,68,.4);
  transition:transform .5s cubic-bezier(.2,1.2,.3,1);max-width:94vw}
.estop-panel.show{transform:translate(-50%,0)}
.estop-panel p{margin:0;color:#fecaca;font-size:.95rem}
.estop-panel p b{color:#fff}
.estop{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:#fff;font:inherit;font-weight:800;letter-spacing:.12em;font-size:1.05rem;padding:14px 26px;border-radius:14px;
  border:3px solid transparent;
  background:linear-gradient(#e11d2e,#b30f1f) padding-box,repeating-linear-gradient(-45deg,#facc15 0 10px,#111 10px 20px) border-box;
  box-shadow:0 6px 0 #6b0912,0 10px 24px rgba(239,68,68,.55);transition:transform .08s,box-shadow .08s;animation:estopPulse 1.1s ease-in-out infinite}
.estop svg{width:26px;height:26px;fill:#7f0a14;stroke:#fff;stroke-width:2;stroke-linecap:round}
.estop svg path:first-child{fill:#fff;stroke:none;opacity:.2}
.estop:hover{filter:brightness(1.1)}
.estop:active{transform:translateY(5px);box-shadow:0 1px 0 #6b0912,0 4px 12px rgba(239,68,68,.5)}
.estop:focus-visible{outline:3px solid #fff;outline-offset:4px}
@keyframes estopPulse{50%{box-shadow:0 6px 0 #6b0912,0 10px 38px rgba(239,68,68,.95)}}
@media (prefers-reduced-motion:reduce){
  .sim.overflowing,.spill-line,.puddle,.flood .wave-a,.flood .wave-b,.flood-body i,body.emergency .alarm,.estop{animation:none!important}
}

/* floating things on the water surface */
.floaters{position:absolute;left:0;right:0;top:0;height:0}
.drift{position:absolute;top:-34px;left:0;animation:drift linear infinite;will-change:transform}
@keyframes drift{from{transform:translateX(-18vw)}to{transform:translateX(108vw)}}
.bob{animation:bobY 3s ease-in-out infinite alternate;will-change:transform}
@keyframes bobY{from{transform:translateY(-2px) rotate(-7deg)}to{transform:translateY(8px) rotate(7deg)}}
.fl{display:block}
.fl.chip{background:rgba(15,23,42,.88);border:1px solid rgba(125,211,252,.55);color:#e0f2fe;border-radius:999px;padding:3px 11px;font-size:.78rem;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.fl.duck{font-size:30px;line-height:1;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.fl.ring{width:36px;height:36px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.flood-body::after{content:"";position:absolute;inset:-25%;background:repeating-radial-gradient(circle at 30% 20%,rgba(255,255,255,.08) 0 14px,transparent 14px 42px);animation:caustic 10s linear infinite alternate;mix-blend-mode:soft-light}
@keyframes caustic{to{transform:translate(9%,7%) rotate(9deg)}}
@media (prefers-reduced-motion:reduce){.drift,.bob,.flood-body::after{animation:none!important}}

/* analytics consent */
.consent{position:fixed;left:16px;bottom:16px;z-index:96;max-width:min(420px,calc(100vw - 32px));background:rgba(12,18,40,.97);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 18px 50px rgba(0,0,0,.55);transform:translateY(24px);opacity:0;transition:transform .4s cubic-bezier(.2,.9,.3,1),opacity .4s}
.consent.show{transform:none;opacity:1}
.consent[hidden]{display:none}
.consent p{margin:0 0 10px;font-size:.88rem;color:var(--muted);line-height:1.5}
.consent p b{color:var(--text)}
.consent-btns{display:flex;gap:8px}
.linkbtn{background:none;border:0;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.linkbtn:hover{color:var(--text)}
@media (max-width:560px){.consent{left:8px;right:8px;bottom:8px;max-width:none}}
body.emergency .consent{display:none}

/* ---------- case studies ---------- */
.cases{display:grid;gap:14px}
.case{padding:0;overflow:hidden}
.case-head{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:18px 22px;cursor:pointer}
.case-head:hover .chev{color:var(--accent2)}
.case-head .ibox{margin:0}
.case-title b{display:block;font-size:1.05rem}
.case-title small{color:var(--muted);font-size:.88rem}
.case-metric{font-size:.8rem;font-weight:600;color:#5eead4;background:rgba(20,184,166,.12);border:1px solid rgba(20,184,166,.3);border-radius:999px;padding:4px 12px;white-space:nowrap}
.chev{width:22px;height:22px;color:var(--muted);transition:transform .35s}
.case.open .chev{transform:rotate(180deg)}
.case-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.js .case-panel{grid-template-rows:0fr}
.js .case.open .case-panel{grid-template-rows:1fr}
.case-inner{overflow:hidden;min-height:0;padding:0 22px}
.case-inner::after{content:"";display:block;height:22px}
.case-inner h4{margin:1rem 0 .3rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2)}
.case-inner p,.case-inner ul{margin:0 0 .4rem;color:#cdd6f4}
.case-inner ul{padding-left:1.2rem}
.case-tags{margin-top:.2rem!important}
.outcome{color:#fff!important;font-weight:600}
@media (max-width:760px){.case-head{grid-template-columns:auto 1fr auto}.case-metric{display:none}}

/* ---------- contact form ---------- */
.contact-form{max-width:640px;margin:2rem auto 0;text-align:left;display:grid;gap:14px}
.contact-form label{display:grid;gap:6px;font-size:.88rem;color:var(--muted)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;background:#0a0f22;border:1px solid var(--line);border-radius:12px;color:var(--text);font:inherit;padding:11px 14px;transition:border-color .15s,box-shadow .15s}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.cf-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cf-status{margin:0;font-size:.9rem;color:var(--muted)}
.cf-status.ok{color:#4ade80}.cf-status.err{color:#fca5a5}
.cf-status a{color:#fff;text-decoration:underline}
.cf-note{margin:0;font-size:.78rem;color:var(--muted)}
.contact-form.sending .btn{opacity:.7}
.contact-form.sent{border-color:#22c55e;box-shadow:0 0 0 1px #22c55e,0 0 30px rgba(34,197,94,.2)}
.contact-form .btn:disabled{cursor:wait}
@media (max-width:600px){.cf-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.case-panel{transition:none}.chev{transition:none}}