:root{
  --bg:#0d1830;
  --bg-2:#122244;
  --bg-3:#18315f;
  --panel:#182a4c;
  --panel-2:#1d335d;
  --panel-3:#223d72;
  --ink:#eef6ff;
  --muted:#b8c8df;
  --line:rgba(130,176,255,.22);
  --line-strong:rgba(135,194,255,.42);
  --cyan:#48ddff;
  --blue:#6ea3ff;
  --violet:#9287ff;
  --green:#d8ff45;
  --green-deep:#a4cf00;
  --gold:#ffd56f;
  --shadow:0 18px 45px rgba(7,16,34,.28);
  --shadow-strong:0 28px 70px rgba(7,16,34,.34);
  --radius:22px;
  --max-width:1820px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 12%, rgba(72,221,255,.12), transparent 22%),
    radial-gradient(circle at 84% 10%, rgba(146,135,255,.12), transparent 20%),
    radial-gradient(circle at 86% 78%, rgba(216,255,69,.10), transparent 16%),
    linear-gradient(180deg, #0d1830 0%, #122246 42%, #17305c 100%);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{
  width:min(var(--max-width),calc(100% - 3rem));
  margin:0 auto;
}

.bg-grid,.bg-circuit,.bg-orb{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.bg-grid{
  background-image:
    linear-gradient(rgba(180,210,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,210,255,.035) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.18));
}
.bg-circuit{opacity:.18}
.bg-circuit-a{
  background:
    linear-gradient(115deg, transparent 0 15%, rgba(72,221,255,.18) 15.2%, transparent 15.6%, transparent 34%, rgba(216,255,69,.16) 34.2%, transparent 34.6%, transparent 100%),
    linear-gradient(180deg, transparent 0 28%, rgba(110,163,255,.14) 28.2%, transparent 28.6%, transparent 64%, rgba(72,221,255,.12) 64.2%, transparent 64.5%, transparent 100%);
}
.bg-circuit-b{
  background:
    radial-gradient(circle at 24% 28%, rgba(72,221,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 61% 18%, rgba(216,255,69,.38) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 70%, rgba(72,221,255,.34) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 42%, rgba(146,135,255,.34) 0 2px, transparent 3px);
}
.bg-orb{
  filter:blur(80px);
  opacity:.75;
}
.bg-orb-a{
  width:520px;height:520px;left:-8%;top:4%;
  background:radial-gradient(circle at center, rgba(72,221,255,.18), transparent 60%);
}
.bg-orb-b{
  width:520px;height:520px;right:-10%;top:10%;
  background:radial-gradient(circle at center, rgba(146,135,255,.16), transparent 60%);
}
.bg-orb-c{
  width:520px;height:520px;right:8%;bottom:-10%;
  background:radial-gradient(circle at center, rgba(216,255,69,.12), transparent 58%);
}

/* header */
.site-header{
  position:relative;
  z-index:20;
  background:rgba(15,27,52,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(140,190,255,.12);
}

.nav-wrap.nav-desktop.nav-centered-brand{
  position:relative;
  min-height:210px;
  padding-top:14px;
  padding-bottom:12px;
}

.brand-left-title{
  display:none !important;
}

.brand-centerblock{
  position:absolute;
  left:50%;
  top:14px;
  transform:translateX(-50%);
  width:min(72vw, 1120px);
  max-width:1120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  margin:0;
}

.brand-centerblock .brand-logo-wrap{
  width:100%;
  min-height:110px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.brand-centerblock .brand-logo-full{
  width:min(70vw, 940px);
  max-width:940px;
  height:auto;
  max-height:118px;
  object-fit:contain;
  object-position:center center;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 10px 18px rgba(72,221,255,.14));
}

.brand-centerblock .brand-sub-centered{
  width:100%;
  text-align:center;
  margin-top:.35rem;
  font-size:.95rem;
  line-height:1.2;
  color:#b0c2da;
}

.site-nav{
  position:absolute;
  right:0;
  top:12px;
  display:flex;
  gap:.7rem;
  align-items:center;
  justify-content:flex-end;
  z-index:3;
}
.site-nav a{
  padding:.58rem .86rem;
  border-radius:999px;
  font-weight:700;
  color:#d0deee;
  border:1px solid transparent;
  transition:.18s ease;
}
.site-nav a:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(140,190,255,.08);
}
.site-nav a.active{
  color:#0a1325;
  background:linear-gradient(135deg, rgba(72,221,255,.94), rgba(216,255,69,.88));
  box-shadow:0 12px 28px rgba(72,221,255,.16);
}

@media (max-width:1600px){
  .brand-centerblock{
    width:min(68vw, 980px);
    max-width:980px;
  }

  .brand-centerblock .brand-logo-full{
    width:min(64vw, 820px);
    max-width:820px;
    max-height:108px;
  }
}

@media (max-width:1200px){
  .nav-wrap.nav-desktop.nav-centered-brand{
    min-height:180px;
  }

  .brand-centerblock{
    width:min(74vw, 760px);
    max-width:760px;
  }

  .brand-centerblock .brand-logo-full{
    width:min(68vw, 620px);
    max-width:620px;
    max-height:92px;
  }

  .brand-centerblock .brand-sub-centered{
    font-size:.88rem;
  }
}

/* hero */
.hero{
  padding:4.4rem 0 2.8rem;
}
.hero-grid{
  display:grid;
  gap:1.5rem;
  align-items:center;
}
.hero-grid-desktop{
  grid-template-columns:minmax(560px, 760px) minmax(700px, 980px);
}
.section-tag{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 .85rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(140,190,255,.14);
  color:#dcebff;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero h1,.page-hero h1,.section-heading h2{
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  letter-spacing:-.04em;
}
.hero h1{
  margin:1rem 0 .95rem;
  font-size:clamp(3rem,4.4vw,5.6rem);
  line-height:.96;
  max-width:10ch;
}
.hero-lead,.page-lead,.section-heading p,.panel-card p,.clean-list li,figcaption,.mini-note{
  color:var(--muted);
  line-height:1.72;
}
.inline-signal-list{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.2rem;
  margin:1.4rem 0 1.6rem;
}
.inline-signal-list span{
  position:relative;
  color:#e6f3ff;
  font-weight:600;
  padding-left:1rem;
}
.inline-signal-list span::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green),#f6ffb8);
  box-shadow:0 0 0 4px rgba(216,255,69,.08);
}
.hero-actions{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
}
.btn{
  min-height:50px;
  padding:0 1.15rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  border:1px solid transparent;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  color:#09111c;
  background:linear-gradient(135deg, var(--green), #f4ffad 32%, var(--cyan) 100%);
  box-shadow:0 15px 32px rgba(216,255,69,.12), 0 14px 28px rgba(72,221,255,.12);
}
.btn-secondary{
  color:#eaf5ff;
  background:rgba(255,255,255,.06);
  border-color:rgba(140,190,255,.14);
}

/* panels/cards */
.frame-panel,
.panel-card{
  position:relative;
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(29,51,93,.86), rgba(22,40,74,.84)),
    linear-gradient(135deg, rgba(72,221,255,.05), rgba(216,255,69,.03));
  border:1px solid rgba(140,190,255,.18);
  box-shadow:var(--shadow);
}
.frame-panel::before,
.panel-card::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:calc(var(--radius) - 1px);
  border:1px solid rgba(255,255,255,.04);
  pointer-events:none;
}
.frame-panel{
  padding:1rem;
  overflow:hidden;
  box-shadow:var(--shadow-strong);
}
.frame-panel-hero{
  min-height:520px;
}
.hero-image,
.webui-image-wide{
  width:100%;
  object-fit:contain;
  object-position:center center;
  border-radius:16px;
  border:1px solid rgba(140,190,255,.12);
  background:
    linear-gradient(135deg, rgba(72,221,255,.10), rgba(146,135,255,.08), rgba(216,255,69,.06)),
    linear-gradient(180deg, #1b315b, #203a6d);
  padding:12px;
}
.hero-image-desktop{
  height:100%;
  max-height:470px;
}
.panel-label{
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:2;
  padding:.46rem .68rem;
  border-radius:999px;
  background:rgba(19,34,64,.92);
  border:1px solid rgba(140,190,255,.14);
  color:#e3f0ff;
  font-size:.73rem;
  font-weight:800;
}
.hero-status-row{
  position:absolute;
  left:1.15rem;
  bottom:1.15rem;
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  max-width:82%;
}
.status-label{
  min-height:32px;
  padding:0 .75rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:rgba(18,34,62,.88);
  border:1px solid rgba(140,190,255,.14);
  color:#e3f1ff;
  font-size:.74rem;
  font-weight:700;
}
.status-live{
  color:#1f3000;
  background:linear-gradient(135deg, rgba(216,255,69,.92), rgba(248,255,188,.88));
}
.corner-accent{
  position:absolute;
  width:58px;height:58px;
  pointer-events:none;
}
.corner-accent-tl{
  top:10px;left:10px;
  border-top:2px solid rgba(72,221,255,.34);
  border-left:2px solid rgba(72,221,255,.34);
  border-top-left-radius:14px;
}
.corner-accent-br{
  right:10px;bottom:10px;
  border-right:2px solid rgba(216,255,69,.28);
  border-bottom:2px solid rgba(216,255,69,.28);
  border-bottom-right-radius:14px;
}

/* sections */
.section{
  padding:2rem 0 4.6rem;
}
.section-surface{
  position:relative;
}
.section-surface::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    linear-gradient(90deg, rgba(72,221,255,.025), transparent 28%, transparent 72%, rgba(216,255,69,.025));
  border-top:1px solid rgba(140,190,255,.08);
  border-bottom:1px solid rgba(140,190,255,.08);
  pointer-events:none;
}
.section > .container,
.section-surface > .container{
  position:relative;
  z-index:1;
}
.narrow{max-width:980px}
.page-hero{
  padding:3.2rem 0 1rem;
}
.page-hero h1{
  margin:1rem 0 .75rem;
  font-size:clamp(2.5rem,3.4vw,4.1rem);
  line-height:1.02;
}
.section-heading{
  margin-bottom:1.35rem;
}
.section-heading h2{
  margin:.82rem 0 .58rem;
  font-size:clamp(2rem,3.2vw,3.2rem);
  line-height:1.05;
}

/* grids */
.card-grid{
  display:grid;
  gap:1.4rem;
}
.card-grid.two{
  grid-template-columns:repeat(2,minmax(520px,1fr));
}
.card-grid-downloads .feature-card p{
  max-width:38ch;
  font-size:1.02rem;
  line-height:1.65;
  white-space:normal;
  word-break:normal;
}
.card-grid.three,
.roadmap-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(360px,1fr));
  gap:1.4rem;
}

/* content cards */
.feature-card,
.mode-card,
.roadmap-card,
.placeholder-card,
.dep-card,
.module-detail,
.webui-card-wide,
.cta-band{
  padding:1.45rem;
}
.micro-label,
.mode-level{
  display:inline-flex;
  min-height:30px;
  padding:0 .7rem;
  align-items:center;
  border-radius:999px;
  background:rgba(72,221,255,.10);
  border:1px solid rgba(72,221,255,.14);
  color:#dcf6ff;
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.highlight-green{
  box-shadow:0 18px 40px rgba(216,255,69,.07), var(--shadow);
  border-color:rgba(216,255,69,.22);
}
.highlight-green .micro-label,
.mode-live{
  color:#253500;
  background:linear-gradient(135deg, rgba(216,255,69,.92), rgba(248,255,188,.88));
  border-color:rgba(216,255,69,.24);
}
.feature-card h3,
.mode-card h3,
.roadmap-card h3,
.placeholder-card h3,
.dep-card h3,
.module-detail h2,
.cta-band h3{
  margin:.8rem 0 .55rem;
  line-height:1.16;
}
.mode-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.mode-glyph{
  color:rgba(72,221,255,.6);
  font-size:1.2rem;
  line-height:1;
}
.clean-list{
  margin:.7rem 0 0;
  padding-left:1rem;
}
.clean-list li{
  margin:.38rem 0;
}
.cta-band{
  margin-top:1.2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.product-stack{
  display:grid;
  gap:1rem;
}
.module-detail-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.module-tag{
  display:inline-flex;
  min-height:31px;
  padding:0 .75rem;
  align-items:center;
  border-radius:999px;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.module-tag-gold{background:rgba(255,213,111,.18);color:#ffe7a6}
.module-tag-cyan{background:rgba(72,221,255,.14);color:#dcf8ff}
.module-tag-blue{background:rgba(110,163,255,.14);color:#e2edff}
.module-tag-violet{background:rgba(146,135,255,.16);color:#efeaff}
.module-state{
  color:#b6c7de;
  font-size:.78rem;
  font-weight:700;
}
.mini-note{
  margin-top:.8rem;
  padding:.8rem .9rem;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(140,190,255,.08);
}

/* desktop screenshot stack */
.webui-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:1.6rem;
}
.webui-card-wide{
  margin:0;
  display:flex;
  flex-direction:column;
  min-height:650px;
}
.webui-image-wide{
  height:560px;
  max-height:none;
}
.webui-card-wide figcaption{
  margin-top:1rem;
  font-size:1.05rem;
}

/* responsive */
@media (max-width:1600px){
  .brand-centerblock{
    width:900px;
    max-width:900px;
  }
  .brand-centerblock .brand-logo-full{
    width:560px;
    max-width:560px;
    height:120px;
  }
}
@media (max-width:1400px){
  .hero-grid-desktop{
    grid-template-columns:1fr;
  }
  .hero h1{
    max-width:none;
  }
  .card-grid.two,
  .card-grid.three,
  .roadmap-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:1200px){
  .nav-wrap.nav-desktop.nav-centered-brand{
    min-height:180px;
  }
  .brand-centerblock{
    width:680px;
    max-width:680px;
  }
  .brand-centerblock .brand-logo-full{
    width:560px;
    max-width:560px;
    height:96px;
  }
}