/* =====================================================================
   CONNEXUS IoT — clean, modern theme
   Colors come from CSS variables; js/config.js can override them.
   ===================================================================== */

:root{
  --accent:  #0891b2;
  --accent2: #2563eb;
  --success: #10b981;
  --danger:  #ef4444;

  --bg:      #ffffff;
  --surface: #f6f8fb;
  --surface2:#eef2f7;
  --line:    #e3e9f1;
  --text:    #0f172a;
  --muted:   #5b677d;

  --font-d:  'Sora', system-ui, sans-serif;
  --font-b:  'Inter', system-ui, sans-serif;
  --shadow:  0 12px 30px rgba(15,23,42,.08);
  --shadow-sm: 0 4px 14px rgba(15,23,42,.06);
  --radius:  16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block}
em{font-style:normal}

/* ---------- interactive network background ---------- */
#mesh{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

/* ---------- aurora background ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.32}
.aurora span:nth-child(1){width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,var(--accent),transparent 70%)}
.aurora span:nth-child(2){width:480px;height:480px;top:18%;left:-160px;background:radial-gradient(circle,var(--accent2),transparent 70%);opacity:.22}
.aurora span:nth-child(3){width:420px;height:420px;bottom:-160px;right:8%;background:radial-gradient(circle,var(--accent),transparent 70%);opacity:.16}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:28px;
  padding:14px clamp(16px,4vw,48px);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-right:auto;line-height:1}
.brand-logo{width:34px;height:34px}
.brand-text{font-family:var(--font-d);font-weight:700;font-size:1.14rem;letter-spacing:-.01em}
.brand-text em,#footSuffix{color:var(--accent)}
.brand-wordmark{height:25px;width:auto;display:block}
.brand-iot{font-family:var(--font-d);font-weight:700;font-size:1rem;color:var(--accent);letter-spacing:.02em}
.brand-tag{font-family:var(--font-b);font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-left:2px}
.nav-links{display:flex;gap:26px}
.nav-links a{font-weight:500;font-size:.95rem;color:var(--muted);position:relative;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);transition:width .25s}
.nav-links a:hover::after{width:100%}
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;border-radius:2px;transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-b);font-weight:600;font-size:.96rem;
  padding:13px 26px;border-radius:11px;position:relative;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-sm{padding:9px 18px;font-size:.88rem}
.btn-solid{
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 20px rgba(8,145,178,.28);
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(8,145,178,.36)}
.btn-ghost{color:var(--text);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:130px clamp(16px,5vw,64px) 70px;position:relative}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;max-width:1240px;margin:0 auto;width:100%}
.hero-chip{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.86rem;font-weight:600;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;margin-bottom:24px;
  background:#fff;box-shadow:var(--shadow-sm);
}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

.hero-title{
  font-family:var(--font-d);font-weight:800;
  font-size:clamp(2.2rem,5.2vw,3.7rem);line-height:1.08;letter-spacing:-.02em;
}
.grad-text{
  background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.typing-wrap{margin-top:16px;min-height:30px;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600;color:var(--accent)}
.caret{display:inline-block;width:3px;height:1.15em;margin-left:3px;background:var(--accent);vertical-align:text-bottom;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hero-desc{margin-top:16px;max-width:560px;color:var(--muted);font-size:1.08rem}
.hero-desc strong{color:var(--text);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-actions.center{justify-content:center}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(18px,3.5vw,42px);margin-top:42px}
.hstat b{font-family:var(--font-d);font-size:1.55rem;color:var(--text);display:block;letter-spacing:-.01em}
.hstat span{font-size:.85rem;color:var(--muted)}

/* hub visual */
.hub{position:relative;width:min(420px,82vw);aspect-ratio:1;margin:0 auto;color:var(--accent)}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.hub-flow{animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.hub-ring{position:absolute;border-radius:50%;border:1.5px solid var(--line)}
.hub-ring.r1{inset:14%;animation:spin 26s linear infinite}
.hub-ring.r2{inset:26%;border-style:dashed;border-color:rgba(8,145,178,.25);animation:spinRev 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinRev{to{transform:rotate(-360deg)}}
.hub-core{
  position:absolute;inset:37%;border-radius:24px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(8,145,178,.18);
  animation:floaty 5s ease-in-out infinite;
}
@keyframes floaty{50%{transform:translateY(-7px)}}
.hub-logo{width:54%;height:54%}
.pill{
  position:absolute;top:var(--y);left:var(--x);transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:.82rem;font-weight:600;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;box-shadow:var(--shadow-sm);
  animation:floaty 6s ease-in-out infinite;
}
.pill:nth-child(5){animation-delay:.4s}
.pill:nth-child(6){animation-delay:.8s}
.pill:nth-child(7){animation-delay:1.2s}
.pill:nth-child(8){animation-delay:1.6s}

.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:24px;height:40px;border:2px solid var(--line);border-radius:13px}
.scroll-hint span{position:absolute;top:7px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:var(--accent);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:translateY(0);opacity:1}80%{transform:translateY(15px);opacity:0}100%{opacity:0}}

/* ---------- sections ---------- */
.section{padding:100px clamp(16px,5vw,64px);max-width:1240px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:52px}
.sec-tag{
  display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:rgba(8,145,178,.08);border-radius:999px;padding:6px 14px;margin-bottom:14px;
}
.sec-head h2,.sec-copy h2,.cta-box h2{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.5rem);letter-spacing:-.02em;line-height:1.15;
}
.sec-head p{color:var(--muted);margin-top:12px;font-size:1.06rem;max-width:620px;margin-left:auto;margin-right:auto}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- HUD strip ---------- */
.hud{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px;
}
.hud-cell{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-align:center;box-shadow:var(--shadow-sm)}
.hud-label{display:block;font-size:.76rem;color:var(--muted);margin-bottom:5px}
.hud-cell b{font-family:var(--font-d);font-size:1.05rem;color:var(--text)}
.hud-cell b.ok,.ok{color:var(--success)}

/* ---------- control deck ---------- */
.deck-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dev{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  position:relative;box-shadow:var(--shadow-sm);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.dev:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfd9e6}
.dev.on{border-color:rgba(8,145,178,.4)}
.dev-wide{grid-column:1/-1}
.dev-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dev-top h3{font-family:var(--font-d);font-size:1.02rem;font-weight:600}
.dev-stage{
  height:130px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.dev-ctrl{display:flex;flex-direction:column;gap:11px;font-size:.9rem;color:var(--muted)}
.dev-ctrl label{display:flex;align-items:center;gap:12px;justify-content:space-between}
.dev-foot{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.led{width:9px;height:9px;border-radius:50%;background:#cbd5e1;transition:.3s}
.led.on{background:var(--success);box-shadow:0 0 0 3px rgba(16,185,129,.18)}

/* toggle switch */
.switch{position:relative;width:50px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;border-radius:999px;cursor:pointer;background:#cbd5e1;transition:.3s}
.slider::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.3s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(22px)}
.switch input:focus-visible + .slider{outline:2px solid var(--accent2);outline-offset:2px}

/* range inputs */
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:6px;background:var(--surface2);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
input[type=range].hue{background:linear-gradient(90deg,#ef4444,#eab308,#22c55e,#06b6d4,#8b5cf6,#ef4444)}

/* step / segment buttons */
.ctrl-row{flex-direction:row;align-items:center;justify-content:center;gap:14px}
.step-btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);cursor:pointer;background:var(--surface);color:var(--accent);font-size:1.35rem;font-weight:700;transition:.2s}
.step-btn:hover{background:rgba(8,145,178,.1);border-color:var(--accent)}
.ctrl-val{font-family:var(--font-d);font-size:1.12rem;color:var(--text);min-width:64px;text-align:center}
.seg{gap:8px}
.seg-btn{flex:1;padding:9px 0;border-radius:9px;border:1px solid var(--line);cursor:pointer;background:#fff;color:var(--muted);font-family:var(--font-b);font-weight:600;font-size:.86rem;transition:.2s}
.seg-btn:hover{border-color:var(--accent);color:var(--accent)}
.seg-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* light */
.bulb{position:relative;color:#cbd5e1;transition:color .4s}
.bulb-svg{width:72px;height:72px}
.bulb-glow{position:absolute;inset:-24px;border-radius:50%;opacity:0;transition:opacity .45s;background:radial-gradient(circle,var(--bulb-color,#fbbf24) 0%,transparent 65%);filter:blur(4px)}
.dev.on .bulb{color:var(--bulb-color,#fbbf24)}
.dev.on .bulb-glow{opacity:.8}

/* ac */
.ac-stage{flex-direction:column;gap:8px}
.ac-unit{width:128px;height:46px;border:2px solid #cbd5e1;border-radius:9px;position:relative;background:#fff;display:flex;align-items:center;justify-content:center;transition:border-color .4s}
.ac-vent{position:absolute;bottom:6px;left:10px;right:10px;height:3px;background:#cbd5e1;border-radius:3px}
.ac-display{font-family:var(--font-d);font-size:1rem;font-weight:600;color:#94a3b8;transition:color .4s}
#card-ac.on .ac-unit{border-color:var(--accent)}
#card-ac.on .ac-display{color:var(--accent)}
.cold-waves{display:flex;gap:10px;height:26px;align-items:flex-start}
.cold-waves i{width:3px;height:8px;border-radius:3px;background:#cbd5e1}
#card-ac.on .cold-waves i{background:var(--accent);animation:wave 1.6s ease-in-out infinite}
#card-ac.on .cold-waves i:nth-child(2){animation-delay:.25s}
#card-ac.on .cold-waves i:nth-child(3){animation-delay:.5s}
@keyframes wave{0%,100%{height:8px;opacity:.5}50%{height:24px;opacity:1}}

/* fan */
.fan-svg{width:90px;height:90px;color:#cbd5e1;transition:color .4s}
#card-fan.on .fan-svg{color:var(--accent)}
.fan-blades{transform-origin:32px 32px}
#card-fan.on .fan-blades{animation:spinBlades var(--fan-period,.6s) linear infinite}
@keyframes spinBlades{to{transform:rotate(360deg)}}

/* cooler */
.cooler{width:82px;height:102px;border:2px solid #cbd5e1;border-radius:9px;position:relative;overflow:hidden;background:#fff;transition:border-color .4s}
#card-cooler.on .cooler{border-color:var(--accent)}
.cooler-grill{position:absolute;top:10px;left:10px;right:10px;display:flex;flex-direction:column;gap:6px;z-index:1}
.cooler-grill i{height:3px;background:#cbd5e1;border-radius:3px;transition:background .4s}
#card-cooler.on .cooler-grill i{background:var(--accent)}
.water{position:absolute;bottom:0;left:0;right:0;height:26%;background:linear-gradient(rgba(8,145,178,.45),rgba(8,145,178,.18));transform:translateY(100%);transition:transform .6s}
#card-cooler.on .water{transform:none;animation:slosh 2.6s ease-in-out infinite}
@keyframes slosh{50%{height:32%}}

/* mixer */
.mixer{display:flex;flex-direction:column;align-items:center}
.jar{width:56px;height:72px;border:2px solid #cbd5e1;border-radius:6px 6px 10px 10px;display:flex;align-items:center;justify-content:center;background:#fff;transition:border-color .4s}
#card-mixer.on .jar{border-color:var(--accent)}
.blade-svg{width:38px;height:38px;color:#cbd5e1;transition:color .4s}
#card-mixer.on .blade-svg{color:var(--accent)}
#mixerBlades{transform-origin:20px 20px}
#card-mixer.on #mixerBlades{animation:spinBlades var(--mix-period,.18s) linear infinite}
#card-mixer.on .mixer{animation:vibrate .12s linear infinite}
@keyframes vibrate{25%{transform:translate(.6px,-.4px)}75%{transform:translate(-.6px,.4px)}}
.mixer-base{width:72px;height:18px;margin-top:4px;border-radius:5px;background:var(--surface2);border:1px solid var(--line)}

/* solar */
.solar-stage{flex-direction:column;gap:6px}
.flow-svg{width:100%;max-width:210px;color:#cbd5e1;transition:color .4s}
#card-solar.on .flow-svg{color:var(--accent)}
#card-solar.on .sun{animation:spin 16s linear infinite;transform-origin:24px 26px}
.flow-line{opacity:.5}
#card-solar.on .flow-line{opacity:1;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.solar-readout{font-size:.82rem;color:var(--muted)}
.solar-readout b{font-family:var(--font-d);font-size:1.05rem;color:var(--success)}

/* BMS */
.bms-badge{font-weight:600;font-size:.78rem;color:var(--success);background:rgba(16,185,129,.1);border-radius:999px;padding:6px 13px}
.bms-body{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:6px 4px}
.battery{position:relative;width:62px;height:116px;border:3px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.battery-cap{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:24px;height:8px;background:var(--line);border-radius:3px 3px 0 0}
.battery-fill{position:absolute;bottom:0;left:0;right:0;height:0%;background:linear-gradient(var(--success),rgba(16,185,129,.5));transition:height 1.2s ease}
.battery-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:1rem;font-weight:700;color:var(--text)}
.bms-cells{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.bms-cell{height:34px;border-radius:6px;border:1px solid var(--line);background:var(--surface);position:relative;overflow:hidden}
.bms-cell::after{content:"";position:absolute;bottom:0;left:0;right:0;height:var(--lvl,60%);background:rgba(16,185,129,.35);transition:height .8s}
.bms-cell.hot::after{background:rgba(245,158,11,.5)}
.bms-meta{display:grid;gap:10px}
.bms-meta div{display:flex;justify-content:space-between;gap:18px;font-size:.86rem}
.bms-meta span{color:var(--muted)}
.bms-meta b{font-family:var(--font-d);color:var(--text)}

/* ---------- features ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.feat-ico{font-size:1.5rem;width:54px;height:54px;border-radius:13px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(8,145,178,.12),rgba(37,99,235,.12))}
.feat h3{font-family:var(--font-d);font-size:1.05rem;font-weight:600;margin-bottom:9px}
.feat p{color:var(--muted);font-size:.97rem}

/* ---------- pipeline ---------- */
.pipeline{display:flex;align-items:stretch;justify-content:center;flex-wrap:nowrap}
.pipe-node{flex:1;max-width:240px;text-align:center;padding:26px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.pipe-node.hub-node{border-color:var(--accent);box-shadow:0 10px 26px rgba(8,145,178,.16)}
.pipe-ico{font-size:1.9rem;margin-bottom:10px}
.pipe-node b{display:block;font-family:var(--font-d);font-size:.96rem;font-weight:600}
.pipe-node span{font-size:.82rem;color:var(--muted)}
.pipe-link{flex:0 0 60px;position:relative;align-self:center;height:2px;background:var(--line)}
.packet{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:packet 2.1s linear infinite}
.packet.p2{animation-delay:.9s}
@keyframes packet{0%{left:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 4px);opacity:0}}

/* ---------- security ---------- */
.sec-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:54px;align-items:center}
.shield-wrap{position:relative;width:min(280px,70vw);aspect-ratio:1;margin:0 auto;color:var(--accent)}
.shield-ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(8,145,178,.35)}
.shield-ring.s1{inset:0;animation:spin 18s linear infinite}
.shield-ring.s2{inset:15%;border-color:rgba(37,99,235,.3);animation:spinRev 12s linear infinite}
.shield{position:absolute;inset:30%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.6rem;background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(8,145,178,.18)}
.sec-list{list-style:none;margin-top:22px;display:grid;gap:12px}
.sec-list li{padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:#fff;color:var(--muted);box-shadow:var(--shadow-sm)}
.sec-list b{color:var(--text)}

/* ---------- cost ---------- */
.cost-wrap{max-width:680px;margin:0 auto;display:grid;gap:18px}
.cost-row{display:grid;grid-template-columns:130px 1fr 56px;align-items:center;gap:16px}
.cost-name{font-weight:600;font-size:.92rem;color:var(--text)}
.cost-bar{height:18px;border-radius:9px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}
.cost-bar i{display:block;height:100%;width:0;border-radius:9px;transition:width 1.3s ease .2s}
.reveal.visible .cost-bar i{width:var(--w)}
.cb-other{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.cb-us{background:linear-gradient(90deg,var(--success),var(--accent))}
.cost-row b{font-family:var(--font-d);color:var(--text);font-size:.9rem}
.cost-note{text-align:center;color:var(--muted);margin-top:6px}
.cost-note b{color:var(--success)}

/* ---------- CTA ---------- */
.cta-box{
  text-align:center;padding:64px clamp(20px,6vw,80px);border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0b1220,#10233a);color:#fff;
  box-shadow:var(--shadow);
}
.cta-box h2{color:#fff}
.cta-box .grad-text{background:linear-gradient(120deg,#f9b24a,#ed7a23);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-box p{color:#aab6c9;margin:14px 0 26px;font-size:1.06rem}
.cta-box .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.cta-box .btn-ghost:hover{border-color:#f4a020;color:#f4a020}
.contact-line{margin-top:24px;font-size:.96rem;color:#aab6c9}
.contact-line a{color:#f4a020}

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--line);padding:30px clamp(16px,5vw,64px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--muted);font-size:.92rem;
}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;color:var(--text)}
.foot-brand .brand-logo{width:26px;height:26px}

/* ---------- hero connectivity chips ---------- */
.conn-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.conn-chips span{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:500;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;box-shadow:var(--shadow-sm)}

/* ---------- connectivity ---------- */
.conn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}
.conn-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
.conn-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.conn-ico{font-size:1.4rem;width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:linear-gradient(135deg,rgba(8,145,178,.12),rgba(37,99,235,.12))}
.conn-card h3{font-family:var(--font-d);font-size:1rem;font-weight:600;margin-bottom:7px}
.conn-card p{color:var(--muted);font-size:.94rem}
.mesh-viz{position:relative;color:var(--accent);background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm)}
.mesh-viz svg{width:100%;height:auto;display:block}
.mesh-links{animation:dash 1.6s linear infinite;opacity:.5}
.mesh-node{fill:#fff;stroke:var(--accent);stroke-width:2}
.mesh-node.hub{fill:var(--accent);stroke:none}
.mesh-nodes circle{animation:nodeGlow 2.4s ease-in-out infinite}
.mesh-nodes circle:nth-child(3){animation-delay:.3s}
.mesh-nodes circle:nth-child(5){animation-delay:.6s}
.mesh-nodes circle:nth-child(7){animation-delay:.9s}
.mesh-nodes circle:nth-child(9){animation-delay:1.2s}
@keyframes nodeGlow{50%{opacity:.55}}
.mesh-emoji{font-size:15px;text-anchor:middle;dominant-baseline:middle}
.hub-emoji{fill:#fff;font-size:18px;font-weight:700}
.mesh-cap{position:absolute;bottom:12px;right:16px;font-size:.78rem;color:var(--muted)}

/* ---------- analytics ---------- */
.analytics-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-bottom:20px}
.an-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.an-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.an-head h3{font-family:var(--font-d);font-size:1.02rem;font-weight:600}
.an-live{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted)}
.chart-box{width:100%;height:200px;position:relative}
#anChart{display:block;width:100%;height:100%}
.an-legend{display:flex;gap:22px;margin-top:14px;font-size:.84rem;color:var(--muted);flex-wrap:wrap}
.lg{display:inline-flex;align-items:center;gap:8px}
.lg::before{content:"";width:16px;height:3px;border-radius:3px;background:currentColor}
.lg-p{color:var(--accent)}
.lg-h{color:#64748b}
.gauge-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.gauge-card h3{align-self:flex-start}
.gauge{position:relative;width:160px;height:160px;margin-top:6px}
.gauge svg{width:160px;height:160px;transform:rotate(-90deg)}
.g-track{fill:none;stroke:var(--surface2);stroke-width:12}
.g-val{fill:none;stroke:var(--success);stroke-width:12;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset .6s ease, stroke .4s}
.gauge-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-num b{font-family:var(--font-d);font-size:2rem;line-height:1;color:var(--success)}
.gauge-num span{font-size:.82rem;color:var(--muted);margin-top:5px}
.gauge-meta{font-size:.8rem;color:var(--muted);margin-top:14px}
.wink-badge{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:.82rem;font-weight:600;color:var(--accent);background:rgba(8,145,178,.08);border:1px solid var(--line);border-radius:999px;padding:8px 15px;transition:.2s}
.wink-badge:hover{background:rgba(8,145,178,.16);transform:translateY(-1px)}
.an-split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.an-mini{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);display:flex;gap:14px;align-items:flex-start}
.an-mini-ico{font-size:1.35rem;width:46px;height:46px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(8,145,178,.12),rgba(37,99,235,.12))}
.an-mini h4{font-family:var(--font-d);font-size:.98rem;font-weight:600;margin-bottom:5px}
.an-mini p{color:var(--muted);font-size:.92rem}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .deck-grid,.feat-grid,.conn-grid{grid-template-columns:repeat(2,1fr)}
  .analytics-grid,.an-split{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-desc{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-stats,.conn-chips{justify-content:center}
  .hero-chip{margin-left:auto;margin-right:auto}
  .hub{display:none}
  .sec-split{grid-template-columns:1fr;gap:32px}
  .pipeline{flex-direction:column;align-items:center}
  .pipe-node{max-width:340px;width:100%}
  .pipe-link{flex:0 0 40px;width:2px;height:40px}
  .packet{top:0;left:-3px;animation:packetV 2.1s linear infinite}
  @keyframes packetV{0%{top:-4px;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:calc(100% - 4px);opacity:0}}
}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:block}
  .nav-links.openmenu{display:flex;position:fixed;top:64px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);z-index:99;box-shadow:var(--shadow)}
  .nav-links.openmenu a{padding:16px 24px;border-top:1px solid var(--line)}
}
@media (max-width:680px){
  .deck-grid,.feat-grid,.conn-grid{grid-template-columns:1fr}
  .hud{grid-template-columns:repeat(2,1fr)}
  .bms-body{grid-template-columns:1fr;justify-items:center;gap:20px}
  .bms-cells{width:100%}
  .hstat b{font-size:1.25rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.01s !important}
  .reveal{opacity:1 !important;transform:none !important}
}

/* =====================================================================
   LIVE IoT DATA FLOW  (self-contained component, scoped under .cx-flow)
   ===================================================================== */
.cx-flow{
  --accent:#ed7a23; --accent-deep:#c85f12; --accent-soft:#fef0e4;
  --cloud:#3b6fe0; --cloud-deep:#2952b8; --cloud-soft:#eaf0fd;
  --ink:#1c1b1a; --muted:#7b7672; --line:#e9e6e2; --card:#fff; --bg:#fbfaf8; --ok:#1f9d62;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-family:var(--sans);color:var(--ink);
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.045) 1px, transparent 0) 0 0/26px 26px, var(--bg);
  padding:48px 28px 40px;border:1px solid var(--line);border-radius:24px;
  max-width:1240px;margin:0 auto;position:relative;overflow:hidden;
}
.cx-flow *{margin:0;padding:0;}
.cx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px;}
.cx-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent-deep);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:7px 13px;border-radius:100px;margin-bottom:14px;}
.cx-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(237,122,35,.5);animation:cxping 1.8s infinite;}
@keyframes cxping{0%{box-shadow:0 0 0 0 rgba(237,122,35,.5);}70%{box-shadow:0 0 0 7px rgba(237,122,35,0);}100%{box-shadow:0 0 0 0 rgba(237,122,35,0);}}
.cx-title{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.08;}
.cx-title b{color:var(--accent);font-weight:700;}
.cx-sub{color:var(--muted);font-size:15px;margin-top:8px;max-width:560px;line-height:1.5;}
.cx-stats{display:flex;gap:10px;flex-wrap:wrap;}
.cx-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 16px;min-width:118px;}
.cx-stat .k{font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
.cx-stat .v{font-family:var(--mono);font-size:21px;font-weight:600;margin-top:3px;letter-spacing:-.01em;}
.cx-stat .v small{font-size:12px;color:var(--muted);font-weight:500;}
.cx-stat .v.live{color:var(--ok);}
.cx-legend{display:flex;flex-wrap:wrap;gap:18px;margin:4px 0 18px;align-items:center;}
.cx-leg{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500;}
.cx-leg .sw{width:22px;height:4px;border-radius:3px;}
.cx-leg .sw.local{background:var(--accent);}
.cx-leg .sw.cloud{background:var(--cloud);}
.cx-leg.hint{margin-left:auto;font-size:12.5px;color:var(--muted);}
.cx-leg.hint b{color:var(--accent-deep);font-weight:600;}
.cx-stage{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.cx-stage::-webkit-scrollbar{height:7px;}
.cx-stage::-webkit-scrollbar-thumb{background:#dcd7d1;border-radius:10px;}
.cx-svg{width:100%;height:auto;display:block;overflow:visible;}
.cx-scrollhint{display:none;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin:0 0 10px;font-weight:500;}
.cx-scrollhint .arrow{display:inline-flex;color:var(--accent);animation:cxnudge 1.3s ease-in-out infinite;}
@keyframes cxnudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}
.cx-flow .node-card{fill:var(--card);stroke:var(--line);stroke-width:1.5;transition:stroke .25s, filter .25s;}
.cx-flow .dev-group{cursor:pointer;}
.cx-flow .dev-group .hit{fill:transparent;}
.cx-flow .dev-name{font-family:var(--sans);font-size:14px;font-weight:600;fill:var(--ink);}
.cx-flow .dev-val{font-family:var(--mono);font-size:13px;font-weight:500;fill:var(--accent-deep);}
.cx-flow .icon{stroke:var(--ink);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.cx-flow .statusdot{fill:var(--ok);}
.cx-flow .hub-label{font-family:var(--sans);font-weight:600;fill:#fff;}
.cx-flow .hub-sub{font-family:var(--mono);fill:rgba(255,255,255,.72);}
.cx-flow .mid-label{font-family:var(--sans);font-weight:600;font-size:14px;fill:var(--ink);}
.cx-flow .mid-sub{font-family:var(--mono);font-size:10.5px;fill:var(--muted);}
.cx-flow .lane-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.02em;}
.cx-flow .lane-label.local{fill:var(--accent-deep);}
.cx-flow .lane-label.cloud{fill:var(--cloud-deep);}
.cx-flow .lane-label.sync{fill:#8a6fb0;}
.cx-flow .edge{fill:none;stroke-linecap:round;transition:stroke-opacity .3s, stroke-width .3s;}
.cx-flow .edge.local{stroke:var(--accent);}
.cx-flow .edge.cloud{stroke:var(--cloud);}
.cx-flow .edge.sync{stroke:url(#syncGrad);stroke-dasharray:1 9;stroke-width:2.4;stroke-opacity:.85;}
.cx-flow .edge.devedge{stroke:#d9d4ce;stroke-width:2;}
.cx-flow .edge.devedge.active{stroke:var(--accent);stroke-width:2.6;}
.cx-flow .dimmed{opacity:.32;transition:opacity .3s;}
@media (max-width:880px){
  .cx-flow .cx-svg{min-width:780px;}
  .cx-flow .cx-scrollhint{display:flex;}
}
@media (max-width:680px){
  .cx-flow{padding:30px 16px;}
  .cx-title{font-size:23px;}
  .cx-head{gap:16px;}
  .cx-stats{width:100%;}
  .cx-stat{flex:1 1 calc(50% - 5px);min-width:0;}
  .cx-legend{gap:10px 16px;}
  .cx-leg.hint{margin-left:0;flex-basis:100%;}
  /* data-flow: show the whole flow, fit to screen (no side-scroll) */
  .cx-flow .cx-svg{min-width:0;}
  .cx-flow .cx-scrollhint{display:none;}
}

/* =====================================================================
   SELF-HEALING MESH  (self-contained component, scoped under .cx-mesh)
   ===================================================================== */
.cx-mesh{
  --accent:#ed7a23; --accent-deep:#c85f12; --accent-soft:#fef0e4;
  --ink:#1c1b1a; --muted:#7b7672; --line:#e9e6e2; --card:#fff; --bg:#fbfaf8;
  --ok:#1f9d62; --ok-soft:#e6f4ec; --warn:#e08a1e; --down:#e0554e; --down-soft:#fcebea;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-family:var(--sans);color:var(--ink);
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.045) 1px, transparent 0) 0 0/26px 26px, var(--bg);
  padding:46px 28px 38px;border:1px solid var(--line);border-radius:24px;
  max-width:1240px;margin:0 auto;position:relative;overflow:hidden;
}
.cx-mesh *{margin:0;padding:0;}
.cx-mesh .cx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;}
.cx-mesh .cx-badge{display:inline-flex;align-items:center;gap:8px;background:var(--ok-soft);color:var(--ok);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:7px 13px;border-radius:100px;margin-bottom:14px;white-space:nowrap;}
.cx-mesh .cx-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(31,157,98,.5);animation:cxmping 1.8s infinite;}
@keyframes cxmping{0%{box-shadow:0 0 0 0 rgba(31,157,98,.5);}70%{box-shadow:0 0 0 7px rgba(31,157,98,0);}100%{box-shadow:0 0 0 0 rgba(31,157,98,0);}}
.cx-mesh .cx-title{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.08;}
.cx-mesh .cx-title b{color:var(--accent);}
.cx-mesh .cx-sub{color:var(--muted);font-size:15px;margin-top:8px;max-width:560px;line-height:1.5;}
.cx-mesh .cx-stats{display:flex;gap:10px;flex-wrap:wrap;}
.cx-mesh .cx-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 16px;min-width:104px;}
.cx-mesh .cx-stat .k{font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
.cx-mesh .cx-stat .v{font-family:var(--mono);font-size:21px;font-weight:600;margin-top:3px;letter-spacing:-.01em;}
.cx-mesh .cx-stat .v small{font-size:12px;color:var(--muted);font-weight:500;}
.cx-mesh .cx-narrate{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:2px 0 16px;font-size:14px;min-height:48px;transition:border-color .3s;}
.cx-mesh .cx-narrate .ico{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.cx-mesh .cx-narrate .ico svg{width:14px;height:14px;}
.cx-mesh .cx-narrate .msg{font-weight:500;}
.cx-mesh .cx-narrate .msg b{font-weight:600;}
.cx-mesh .cx-narrate .t{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;}
.cx-mesh .cx-narrate.ok{border-color:#bfe6cf;}
.cx-mesh .cx-narrate.ok .ico{background:var(--ok-soft);color:var(--ok);}
.cx-mesh .cx-narrate.warn{border-color:#f3d9ab;}
.cx-mesh .cx-narrate.warn .ico{background:var(--accent-soft);color:var(--warn);}
.cx-mesh .cx-narrate.down{border-color:#f3c9c6;}
.cx-mesh .cx-narrate.down .ico{background:var(--down-soft);color:var(--down);}
.cx-mesh .cx-narrate.info .ico{background:var(--accent-soft);color:var(--accent-deep);}
.cx-mesh .cx-legend{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:14px 0 0;font-size:13px;color:var(--muted);}
.cx-mesh .cx-leg{display:flex;align-items:center;gap:8px;font-weight:500;}
.cx-mesh .cx-leg .sw{width:22px;height:0;border-top:2.5px solid;border-radius:3px;}
.cx-mesh .cx-leg .sw.live{border-color:var(--accent);}
.cx-mesh .cx-leg .sw.heal{border-color:var(--ok);}
.cx-mesh .cx-leg .sw.dead{border-top-style:dotted;border-color:#c9c3bc;}
.cx-mesh .cx-leg.hint{margin-left:auto;color:var(--muted);}
.cx-mesh .cx-leg.hint b{color:var(--accent-deep);font-weight:600;}
.cx-mesh .cx-stage{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.cx-mesh .cx-stage::-webkit-scrollbar{height:7px;}
.cx-mesh .cx-stage::-webkit-scrollbar-thumb{background:#dcd7d1;border-radius:10px;}
.cx-mesh .cx-svg{width:100%;height:auto;display:block;overflow:visible;}
.cx-mesh .cx-scrollhint{display:none;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin:0 0 10px;font-weight:500;}
.cx-mesh .cx-scrollhint .arrow{display:inline-flex;color:var(--accent);animation:cxnudge 1.3s ease-in-out infinite;}
.cx-mesh .edge{fill:none;stroke-linecap:round;}
.cx-mesh .edge.idle{stroke:#f0c39a;stroke-width:2;stroke-dasharray:1.5 9;opacity:.65;animation:cxmarch 22s linear infinite;}
.cx-mesh .edge.inuse{stroke:var(--accent);stroke-width:2.6;stroke-dasharray:2 8;opacity:.95;animation:cxmarch 1.1s linear infinite;}
.cx-mesh .edge.healing{stroke:var(--ok);stroke-width:3.4;stroke-dasharray:2 8;opacity:1;filter:drop-shadow(0 0 5px rgba(31,157,98,.55));animation:cxmarch 1.1s linear infinite;}
.cx-mesh .edge.dead{stroke:#cfc9c3;stroke-width:1.6;stroke-dasharray:1 7;opacity:.5;}
.cx-mesh .edge.broken{stroke:var(--down);stroke-width:2.6;stroke-dasharray:3 6;opacity:.9;}
@keyframes cxmarch{to{stroke-dashoffset:-200;}}
.cx-mesh .node{cursor:pointer;}
.cx-mesh .node .ring{fill:#fff;stroke:var(--accent);stroke-width:2.6;transition:stroke .3s,opacity .3s;}
.cx-mesh .node .glow{fill:var(--accent);opacity:0;transition:opacity .3s;}
.cx-mesh .node.reroute .ring{stroke:var(--warn);}
.cx-mesh .node.offline .ring{stroke:#cfc9c3;stroke-dasharray:4 4;}
.cx-mesh .node.offline .nicon{opacity:.32;}
.cx-mesh .node .nlabel{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--ink);}
.cx-mesh .node.offline .nlabel{fill:var(--muted);}
.cx-mesh .node .nicon{stroke:var(--ink);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s;}
.cx-mesh .sdot{transition:fill .3s;}
.cx-mesh .cx-pill{font-family:var(--mono);font-size:10.5px;font-weight:600;}
@media (max-width:880px){
  .cx-mesh .cx-svg{min-width:820px;}
  .cx-mesh .cx-scrollhint{display:flex;}
}
@media (max-width:680px){
  .cx-mesh{padding:30px 16px;}
  .cx-mesh .cx-title{font-size:23px;}
  .cx-mesh .cx-head{gap:16px;}
  .cx-mesh .cx-stats{width:100%;}
  .cx-mesh .cx-stat{flex:1 1 calc(50% - 5px);min-width:0;}
  .cx-mesh .cx-narrate .t{display:none;}
  /* mesh: portrait layout fits the screen — no side-scroll */
  .cx-mesh .cx-svg{min-width:0;}
  .cx-mesh .cx-scrollhint{display:none;}
}

/* =====================================================================
   CONNECTED ECOSYSTEM  (hero hub + orbiting devices, scoped .eco-stage)
   ===================================================================== */
.eco-stage{
  --accent-deep:#c85f12; --accent-soft:#fef0e4;
  --eco-ink:#1c1b1a; --eco-line:#ece8e3; --eco-card:#fff;
  --eco-mono:'JetBrains Mono',ui-monospace,monospace;
  position:relative; width:100%; aspect-ratio:920/520;
  font-family:'Space Grotesk',var(--font-b); margin:0 auto;
}
.eco-stage .eco-canvas,.eco-stage .eco-svg{position:absolute;inset:0;width:100%;height:100%;}
.eco-stage .eco-svg{pointer-events:none;}
.eco-stage .spoke{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:1.5 7;opacity:.42;animation:ecomarch 18s linear infinite;transition:opacity .3s,stroke-width .3s;}
.eco-stage .spoke.active{opacity:.95;stroke-width:2.4;stroke-dasharray:2 6;animation-duration:1s;}
@keyframes ecomarch{to{stroke-dashoffset:-160;}}
.eco-stage .orbit{fill:none;stroke:#e7c9a8;stroke-width:1.2;opacity:.5;}
.eco-stage .orbit.d{stroke-dasharray:3 8;opacity:.45;}
.eco-stage .eco-hub{position:absolute;left:50%;top:51.9%;transform:translate(-50%,-50%);z-index:4;
  width:128px;height:128px;display:flex;align-items:center;justify-content:center;
  background:var(--eco-card);border:1px solid var(--eco-line);border-radius:28px;
  box-shadow:0 18px 40px -16px rgba(200,95,18,.45),0 2px 8px rgba(0,0,0,.04);}
.eco-stage .eco-hub::before{content:"";position:absolute;inset:-10px;border-radius:34px;
  background:conic-gradient(from 0deg, transparent 0 60%, rgba(237,122,35,.55) 78%, transparent 92%);
  -webkit-mask:radial-gradient(transparent 56px,#000 57px);mask:radial-gradient(transparent 56px,#000 57px);
  animation:ecospin 4.5s linear infinite;}
.eco-stage .eco-hub::after{content:"";position:absolute;inset:-10px;border-radius:34px;
  background:conic-gradient(from 180deg, transparent 0 72%, rgba(237,122,35,.3) 84%, transparent 94%);
  -webkit-mask:radial-gradient(transparent 60px,#000 61px);mask:radial-gradient(transparent 60px,#000 61px);
  animation:ecospin 7s linear infinite reverse;}
@keyframes ecospin{to{transform:rotate(360deg);}}
.eco-stage .eco-hub-logo{position:relative;width:78px;height:78px;border-radius:16px;}
.eco-stage .eco-hub .pulse{position:absolute;inset:0;border-radius:28px;border:1.5px solid var(--accent);opacity:0;animation:ecohpulse 3s ease-out infinite;}
@keyframes ecohpulse{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.9);opacity:0;}}
.eco-stage .eco-pill{position:absolute;transform:translate(-50%,-50%);z-index:6;display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px 9px 9px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--eco-line);border-radius:100px;cursor:pointer;white-space:nowrap;color:var(--eco-ink);
  box-shadow:0 10px 26px -12px rgba(28,27,26,.28),0 1px 3px rgba(0,0,0,.05);
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .28s;font-family:'Space Grotesk',var(--font-b);}
.eco-stage .eco-pill .chip{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;transition:background .28s,transform .28s;}
.eco-stage .eco-pill .chip svg{width:18px;height:18px;stroke:var(--accent-deep);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .28s;}
.eco-stage .eco-pill .lbl{font-size:15px;font-weight:600;letter-spacing:-.01em;}
.eco-stage .eco-pill .tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px);
  background:var(--eco-ink);color:#fff;border-radius:10px;padding:7px 11px;display:flex;flex-direction:column;gap:1px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 8px 20px -6px rgba(0,0,0,.4);}
.eco-stage .eco-pill .tip b{font-size:11px;font-weight:600;letter-spacing:.02em;}
.eco-stage .eco-pill .tip i{font-family:var(--eco-mono);font-size:12px;font-style:normal;color:#ffd9b8;}
.eco-stage .eco-pill .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--eco-ink);}
.eco-stage .eco-pill:hover,.eco-stage .eco-pill.active{transform:translate(-50%,-50%) scale(1.08);border-color:#f3c79c;
  box-shadow:0 18px 38px -14px rgba(200,95,18,.5),0 2px 6px rgba(0,0,0,.06);}
.eco-stage .eco-pill:hover .chip,.eco-stage .eco-pill.active .chip{background:var(--accent);transform:scale(1.04);}
.eco-stage .eco-pill:hover .chip svg,.eco-stage .eco-pill.active .chip svg{stroke:#fff;}
.eco-stage .eco-pill:hover .tip,.eco-stage .eco-pill.active .tip{opacity:1;transform:translate(-50%,0);}
@media (max-width:760px){ .eco-stage{aspect-ratio:1/1;max-width:420px;} }