*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#00000a;color:#fff;font-family:'Orbitron',sans-serif;overflow-x:hidden;overflow-y:auto}
canvas{display:block;position:absolute;inset:0;z-index:0}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:26px 52px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(0,0,10,.95),transparent);transition:background .4s}
#nav.solid{background:rgba(0,0,10,.98);border-bottom:1px solid rgba(255,255,255,.05)}
.nav-logo{font-family:'Orbitron',sans-serif;font-size:17px;font-weight:800;letter-spacing:.28em;display:flex;align-items:center;gap:10px;color:#fff;line-height:1}
/* logo-canvas handled inline */
/* Nav logo rings handled by SVG animateTransform */
.nav-pulse{width:6px;height:6px;border-radius:50%;background:#00ffb3;box-shadow:0 0 10px #00ffb3,0 0 20px rgba(0,255,179,.4);animation:pulse 2.4s ease-in-out infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.6)}}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-link{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:.14em;color:rgba(255,255,255,.3);text-decoration:none;text-transform:uppercase;transition:color .2s}
.nav-link:hover{color:rgba(255,255,255,.85)}
.nav-cta{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:.14em;padding:9px 22px;border:1px solid rgba(0,255,179,.3);border-radius:2px;color:#00ffb3;text-decoration:none;text-transform:uppercase;transition:all .25s;position:relative;overflow:hidden}
.nav-cta::before{content:'';position:absolute;inset:0;background:rgba(0,255,179,.07);opacity:0;transition:opacity .25s}
.nav-cta:hover::before{opacity:1}
.nav-cta:hover{border-color:rgba(0,255,179,.6);box-shadow:0 0 20px rgba(0,255,179,.1)}

/* ── HERO ── */
#hero{position:relative;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(48px,6vh,80px);overflow:hidden}
#hero-canvas{z-index:1!important}

.hero-earth-wrap{position:relative;z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center;background:transparent;margin-bottom:24px}

.hero-earth-container{
  position:relative;
  width:clamp(260px,42vw,520px);
  height:clamp(260px,42vw,520px);
  display:flex;align-items:center;justify-content:center;
  perspective:900px;
  perspective-origin:50% 50%;
  transform-style:preserve-3d;
}

/* ── CANVAS EARTH ── */
/* The Earth is drawn by the hero canvas — this div is a transparent
   positioning reference so JS can getBoundingClientRect() */
.css-earth{
  position:absolute;
  width:56%;height:56%;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:1;border-radius:50%;
  pointer-events:none;
  background:transparent;
}

100%{transform:rotateX(33deg) rotateZ(445deg)}}

/* ── HERO TEXT ── */
.hero-text{text-align:center;opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease;pointer-events:none;position:relative;z-index:2;padding:0 20px}
.hero-text.show{opacity:1;transform:translateY(0)}
.hero-h1{
  font-family:'Orbitron',sans-serif;font-size:clamp(18px,2.8vw,42px);font-weight:800;
  letter-spacing:.04em;line-height:1.15;margin-bottom:14px;
  background:linear-gradient(135deg,#c4b5fd 0%,#a78bfa 40%,#818cf8 80%,#c4b5fd 100%);
  background-size:250% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 6s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{background-position:0%}50%{background-position:100%}}
.hero-automate{
  font-family:'Orbitron',sans-serif;font-size:clamp(8px,.9vw,12px);font-weight:600;
  letter-spacing:.15em;color:#00ffb3;text-transform:uppercase;
  text-shadow:0 0 20px rgba(0,255,179,.5),0 0 40px rgba(0,255,179,.25);
}

/* ── SCROLL CUE ── */
.scroll-cue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;cursor:pointer}
.scroll-cue.show{opacity:1;animation:floatcue 3s ease-in-out infinite}
@keyframes floatcue{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
.scroll-robot{font-size:24px;filter:drop-shadow(0 0 12px rgba(0,255,179,.6));transition:filter .3s,transform .3s}
.scroll-cue:hover .scroll-robot{filter:drop-shadow(0 0 28px rgba(0,255,179,1));transform:scale(1.18) translateY(-3px)}
.scroll-label{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:.25em;color:rgba(255,255,255,.22);text-transform:uppercase}
.chevrons{display:flex;flex-direction:column;align-items:center;gap:3px}
.chevrons i{display:block;width:10px;height:10px;border-right:1.5px solid rgba(0,255,179,.4);border-bottom:1.5px solid rgba(0,255,179,.4);transform:rotate(45deg)}
.chevrons i:nth-child(2){opacity:.4;margin-top:-4px}
.chevrons i:nth-child(3){opacity:.15;margin-top:-4px}

/* ── CONSTELLATION ── */
#constellation{position:relative;height:100vh;overflow:hidden;background:#00000a}
#chud{position:absolute;top:0;left:0;right:0;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:28px 44px;background:linear-gradient(180deg,rgba(0,0,10,.75),transparent)}
.hud-left{display:flex;flex-direction:column;gap:4px}
.hud-title{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.38em;color:rgba(255,255,255,.18)}
.hud-sub{font-family:'Orbitron',sans-serif;font-size:7px;letter-spacing:.2em;color:rgba(255,255,255,.1)}
.hud-stats{display:flex;gap:32px}
.hud-stat{text-align:center}
.stat-val{font-family:'Orbitron',sans-serif;font-size:26px;letter-spacing:.1em}
.stat-lbl{font-family:'Orbitron',sans-serif;font-size:7px;color:rgba(255,255,255,.2);letter-spacing:.2em;margin-top:2px}
#clegend{position:absolute;bottom:32px;left:40px;z-index:3;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.leg{display:flex;align-items:center;gap:9px;font-family:'Orbitron',sans-serif;font-size:8px;color:rgba(255,255,255,.3);letter-spacing:.1em}
.leg-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
#cctrl{position:absolute;bottom:32px;right:40px;z-index:3;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ctrl{font-family:'Orbitron',sans-serif;font-size:8px;letter-spacing:.12em;padding:6px 14px;border:1px solid rgba(255,255,255,.07);border-radius:2px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.35);cursor:pointer;transition:all .2s;text-transform:uppercase}
.ctrl:hover{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.05)}

/* ── TOOLTIP ── */
#tt{position:fixed;z-index:300;pointer-events:none;background:rgba(2,4,16,.97);border:1px solid rgba(255,255,255,.09);border-radius:6px;padding:16px 20px;min-width:250px;display:none;backdrop-filter:blur(20px)}
.tt-name{font-family:'Orbitron',sans-serif;font-size:16px;letter-spacing:.12em;margin-bottom:4px;font-weight:700}
.tt-tag{font-family:'Orbitron',sans-serif;font-size:8px;color:rgba(255,255,255,.28);letter-spacing:.16em;margin-bottom:10px;text-transform:uppercase}
.tt-status{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:.06em;margin-bottom:6px}
.tt-pills{font-family:'Orbitron',sans-serif;font-size:8px;color:rgba(255,255,255,.28);line-height:1.8}
.tt-desc{font-family:'Orbitron',sans-serif;font-size:10px;color:rgba(255,255,255,.45);margin-top:10px;line-height:1.65;border-top:1px solid rgba(255,255,255,.06);padding-top:10px}
.tt-cta{font-family:'Orbitron',sans-serif;font-size:8px;margin-top:10px;letter-spacing:.1em;text-transform:uppercase}

/* ── PLATFORMS SECTION ── */
#platforms{padding:100px 52px;background:linear-gradient(180deg,#00000a 0%,#000610 50%,#00000a 100%)}
.plat-eyebrow{font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:.3em;color:rgba(0,255,179,.45);text-transform:uppercase;text-align:center;margin-bottom:16px}
.plat-title{font-family:'Orbitron',sans-serif;font-size:clamp(24px,3.5vw,48px);font-weight:800;letter-spacing:.03em;text-align:center;line-height:1.1;margin-bottom:60px}
.plat-grad{background:linear-gradient(90deg,#00ffb3,#818cf8,#FF3CAC);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* Platform cards grid */
.plat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:860px;margin:0 auto 60px}
.plat-card{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;padding:28px;
  display:flex;flex-direction:column;gap:0;
  transition:all .3s;position:relative;overflow:hidden;
}
.plat-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none}
.plat-card.plat-ws::before{background:radial-gradient(circle at 30% 20%,rgba(0,255,179,.04),transparent 60%)}
.plat-card.plat-acq::before{background:radial-gradient(circle at 30% 20%,rgba(99,102,241,.04),transparent 60%)}
.plat-card.plat-syn::before{background:radial-gradient(circle at 30% 20%,rgba(255,60,172,.04),transparent 60%)}
.plat-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.12)}
.plat-card:hover::before{opacity:1}
.plat-card.plat-ws:hover{border-color:rgba(0,255,179,.2);box-shadow:0 12px 40px rgba(0,255,179,.06)}
.plat-card.plat-acq:hover{border-color:rgba(99,102,241,.2);box-shadow:0 12px 40px rgba(99,102,241,.06)}
.plat-card.plat-syn:hover{border-color:rgba(255,60,172,.2);box-shadow:0 12px 40px rgba(255,60,172,.06)}

.plat-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.plat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.04em}
.plat-icon-ws{background:rgba(0,255,179,.1);border:1px solid rgba(0,255,179,.2);color:#00ffb3}
.plat-icon-acq{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);color:#818cf8}
.plat-icon-syn{background:rgba(255,60,172,.1);border:1px solid rgba(255,60,172,.2);color:#FF3CAC}
.plat-badge{font-family:'Orbitron',sans-serif;font-size:8px;font-weight:700;letter-spacing:.1em;padding:3px 10px;border-radius:20px;border:1px solid}
.plat-name{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:800;letter-spacing:.04em;margin-bottom:4px}
.plat-sub{font-family:'Orbitron',sans-serif;font-size:8px;color:rgba(255,255,255,.3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.plat-desc{font-family:'Orbitron',sans-serif;font-size:10px;color:rgba(255,255,255,.4);line-height:1.75;margin-bottom:20px;flex:1}
.plat-features{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.plat-feat{font-family:'Orbitron',sans-serif;font-size:9px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:8px;letter-spacing:.04em}
.plat-check{color:#00ffb3;font-weight:700;flex-shrink:0}
.plat-cta{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;padding:11px 20px;border-radius:6px;text-decoration:none;text-transform:uppercase;text-align:center;transition:all .2s;display:block;margin-top:auto}
.plat-cta-ws{background:rgba(0,255,179,.1);border:1px solid rgba(0,255,179,.25);color:#00ffb3}
.plat-cta-ws:hover{background:rgba(0,255,179,.18);box-shadow:0 0 20px rgba(0,255,179,.15)}
.plat-cta-acq{background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);color:#818cf8}
.plat-cta-acq:hover{background:rgba(99,102,241,.18);box-shadow:0 0 20px rgba(99,102,241,.15)}
.plat-cta-syn{background:rgba(255,60,172,.1);border:1px solid rgba(255,60,172,.25);color:#FF3CAC}
.plat-cta-syn:hover{background:rgba(255,60,172,.18);box-shadow:0 0 20px rgba(255,60,172,.15)}

/* Agent stats bar */
.agent-stats{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.05);border-radius:12px;overflow:hidden;background:rgba(0,255,179,.015)}
.agent-stat{padding:28px 20px;border-right:1px solid rgba(255,255,255,.05);text-align:center}
.agent-stat:last-child{border-right:none}
.agent-stat-val{font-family:'Orbitron',sans-serif;font-size:36px;font-weight:800;letter-spacing:.02em;background:linear-gradient(135deg,#fff,rgba(0,255,179,.9));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.agent-stat-lbl{font-family:'Orbitron',sans-serif;font-size:8px;color:rgba(255,255,255,.22);letter-spacing:.16em;text-transform:uppercase;margin-top:6px}

/* ── CTA ── */
#cta{padding:120px 52px;text-align:center;position:relative;overflow:hidden}
#cta::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(0,255,179,.04) 0%,transparent 65%);pointer-events:none}
.cta-h{font-family:'Orbitron',sans-serif;font-size:clamp(26px,4.5vw,58px);letter-spacing:.04em;line-height:1;margin-bottom:20px;font-weight:800}
.cta-h span{background:linear-gradient(90deg,#00ffb3,#4a9eff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.cta-p{font-size:12px;color:rgba(255,255,255,.28);max-width:460px;margin:0 auto 44px;line-height:1.8;font-family:'Orbitron',sans-serif}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-p{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.14em;padding:14px 34px;background:#00ffb3;color:#000;border:none;border-radius:2px;cursor:pointer;text-decoration:none;text-transform:uppercase;font-weight:700;transition:all .25s}
.btn-p:hover{background:#00e6a0;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,255,179,.25)}
.btn-s{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.14em;padding:14px 34px;background:transparent;color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.14);border-radius:2px;cursor:pointer;text-decoration:none;text-transform:uppercase;transition:all .25s}
.btn-s:hover{border-color:rgba(255,255,255,.4);color:#fff}

/* ── FOOTER ── */
footer{padding:36px 52px;border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:space-between}
.foot-logo{font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:.28em;color:rgba(255,255,255,.16);font-weight:800}
.foot-copy{font-family:'Orbitron',sans-serif;font-size:8px;color:rgba(255,255,255,.12);letter-spacing:.1em}
.foot-status{display:flex;align-items:center;gap:7px;font-family:'Orbitron',sans-serif;font-size:8px;color:rgba(255,255,255,.12);letter-spacing:.1em}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .plat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  #nav{padding:14px 20px}
  .nav-right{gap:14px}
  .hero-earth-container{width:240px;height:240px}
  .plat-grid{grid-template-columns:1fr}
  .plat-card.plat-syn{grid-column:auto}
  .agent-stats{grid-template-columns:1fr 1fr}
  #platforms,#cta{padding:72px 20px}
  footer{padding:24px 20px;flex-direction:column;gap:12px;text-align:center}
  #hero{padding-top:56px}
  .hero-h1{font-size:clamp(14px,4.5vw,26px) !important}
  .hero-automate{font-size:7px !important;letter-spacing:.08em}
}