*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg:#040713;
  --bg-2:#0a1023;
  --surface:rgba(10,15,33,.74);
  --surface-2:rgba(16,24,46,.95);
  --line:rgba(255,255,255,.09);
  --text:#f5f8ff;
  --muted:#a7b3ce;
  --blue:#4e7bff;
  --blue-2:#7ab2ff;
  --violet:#8b5dff;
  --cyan:#7ae7ff;
  --green:#77f1c4;
  --shadow:0 28px 90px rgba(0,0,0,.42);
  --radius-xl:30px;
  --radius-lg:22px;
  --container:1200px;
}

html { scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--text);
  font-family:"Inter",system-ui,sans-serif;
  background:
    radial-gradient(circle at 14% 8%, rgba(78,123,255,.18), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(139,93,255,.17), transparent 22%),
    linear-gradient(180deg, #040713 0%, #070b1b 48%, #03050f 100%);
  overflow-x:hidden;
}

.site-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at center, black 34%, transparent 90%);
}

.site-glow{
  position:fixed;
  width:40vw;
  height:40vw;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
  opacity:.18;
}
.site-glow-a{
  left:-10vw; top:8vh;
  background:rgba(78,123,255,.55);
  animation: driftA 11s ease-in-out infinite alternate;
}
.site-glow-b{
  right:-10vw; top:20vh;
  background:rgba(139,93,255,.45);
  animation: driftB 13s ease-in-out infinite alternate;
}
@keyframes driftA{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(6vw,4vh,0); }
}
@keyframes driftB{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-5vw,6vh,0); }
}

.container{
  width:min(var(--container), calc(100% - 42px));
  margin:0 auto;
  position:relative;
  z-index:2;
}

.header{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(18px);
  background:rgba(4,7,19,.58);
  border-bottom:1px solid var(--line);
}
.nav{
  min-height:78px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand{
  display:inline-flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  letter-spacing:-.03em;
}
.brand-logo{
  width:34px; height:34px;
  filter:drop-shadow(0 0 24px rgba(78,123,255,.38));
}
.brand-word,h1,h2,h3,.arch-kicker,.price-kicker{
  font-family:"Space Grotesk","Inter",sans-serif;
}

.menu{
  display:flex;
  gap:24px;
  align-items:center;
}
.menu a{
  text-decoration:none;
  color:var(--muted);
  font-weight:500;
}
.menu a:hover{ color:var(--text); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  background:linear-gradient(135deg, var(--blue), var(--violet));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 55px rgba(78,123,255,.24);
}
.btn-ghost{
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  color:var(--text);
  box-shadow:none;
}
.btn-small{
  min-height:42px;
  padding:0 16px;
}

.hero{
  position:relative;
  padding:94px 0 70px;
  overflow:hidden;
}
.hero-typo-bg{
  position:absolute;
  top:-40px;
  left:50%;
  transform:translateX(-50%);
  width:min(1500px, 130vw);
  opacity:.4;
  pointer-events:none;
}
.hero-layout{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:40px;
  align-items:center;
}
.eyebrow,.section-label{
  margin:0 0 14px;
  color:var(--green);
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
}
h1{
  margin:0;
  font-size:clamp(2.8rem, 6vw, 5.7rem);
  line-height:.95;
  letter-spacing:-.055em;
}
h1 span{
  background:linear-gradient(135deg, #fff 0%, var(--blue-2) 44%, #c7bbff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  margin:24px 0 0;
  color:var(--muted);
  font-size:1.1rem;
  line-height:1.8;
  max-width:64ch;
}
.hero-actions{
  display:flex;
  gap:14px;
  margin-top:30px;
  flex-wrap:wrap;
}
.hero-badges{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}
.hero-badges span{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#dbe5ff;
  font-size:.94rem;
}

.glass-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    var(--surface);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  border-radius:var(--radius-xl);
}

.dashboard-card{ padding:28px; }
.dashboard-header,
.metric-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.pill,.micro{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  padding:9px 14px;
}
.pill{ font-weight:700; color:var(--cyan); }
.micro{ color:var(--muted); }
.micro strong{ color:var(--text); margin-left:6px; }

.network-visual{
  position:relative;
  height:300px;
  margin:26px 0;
  border-radius:26px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at center, rgba(78,123,255,.12), transparent 55%),
    rgba(255,255,255,.02);
  overflow:hidden;
}
.network-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.network-lines path{
  fill:none;
  stroke:rgba(122,178,255,.52);
  stroke-width:2.5;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(78,123,255,.14));
}

.node{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow:0 0 0 6px rgba(122,231,255,.06), 0 0 20px rgba(122,231,255,.28);
  animation:pulse 3.4s ease-in-out infinite;
}
.node.n1{ left:12%; top:28%; }
.node.n2{ left:34%; top:16%; animation-delay:.3s; }
.node.n3{ left:53%; top:42%; animation-delay:.6s; }
.node.n4{ left:76%; top:22%; animation-delay:.9s; }
.node.n5{ left:66%; top:71%; animation-delay:1.2s; }
.node.n6{ left:18%; top:62%; animation-delay:1.5s; }

@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:.92; }
  50%{ transform:scale(1.22); opacity:1; }
}

.signal-card{
  position:absolute;
  min-width:120px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(8,14,30,.68);
  backdrop-filter:blur(12px);
}
.signal-card small{
  display:block;
  color:var(--muted);
  margin-bottom:6px;
}
.signal-card strong{
  font-size:1rem;
}
.signal-a{ left:7%; bottom:10%; }
.signal-b{ right:7%; top:10%; }
.signal-c{ right:12%; bottom:12%; }

.metric-row{ gap:12px; }
.metric-box{
  flex:1;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.metric-box small{
  display:block;
  color:var(--muted);
  margin-bottom:8px;
}
.metric-box strong{ font-size:1.03rem; }

.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.ticker-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:18px 0;
  color:#dde7ff;
  font-weight:700;
  letter-spacing:.08em;
  font-size:.88rem;
  flex-wrap:wrap;
}

.section{
  position:relative;
  padding:88px 0;
  overflow:hidden;
}
.intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}
h2{
  margin:0;
  font-size:clamp(2rem, 4vw, 3.3rem);
  line-height:1.03;
  letter-spacing:-.045em;
}
.muted{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.8;
}

.feature-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.feature{ padding:28px; }
.feature h3{
  margin:18px 0 10px;
  font-size:1.42rem;
}
.feature p{
  margin:0;
  color:var(--muted);
  line-height:1.78;
}
.feature-icon{
  width:58px; height:58px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(135deg, var(--blue), var(--violet));
}
.feature-icon.alt{
  transform:rotate(7deg);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(135deg, var(--cyan), var(--blue));
}
.feature-icon.prism{
  clip-path:polygon(50% 0%,100% 36%,81% 100%,19% 100%,0 36%);
}

.section-dark{
  background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.006));
}
.section-pattern{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.32;
  pointer-events:none;
}
.section-head{ max-width:760px; }
.narrow{ max-width:700px; }

.architecture{
  margin-top:36px;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:18px;
  align-items:center;
}
.arch-box{
  padding:28px;
  min-height:220px;
}
.arch-box.active{
  border-color:rgba(122,178,255,.34);
  box-shadow:0 26px 80px rgba(78,123,255,.16);
}
.arch-kicker{
  display:inline-block;
  margin-bottom:14px;
  color:var(--cyan);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.arch-box h3{
  margin:0 0 10px;
  font-size:1.38rem;
}
.arch-box p{
  margin:0;
  color:var(--muted);
  line-height:1.78;
}
.arch-arrow{
  font-size:2rem;
  color:rgba(255,255,255,.45);
  font-weight:700;
}

.simulator-wrap{ position:relative; }
.simulator-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:22px;
}
.simulator-card,
.simulator-results{
  padding:28px;
}
.sim-row + .sim-row{ margin-top:24px; }
.sim-row label{
  display:block;
  font-weight:600;
  margin-bottom:14px;
}
.sim-row input[type="range"]{
  width:100%;
  accent-color:#6f8fff;
}
.sim-value{
  margin-top:10px;
  color:#dfe8ff;
  font-weight:700;
}
.result-block + .result-block{
  margin-top:18px;
}
.result-block small{
  display:block;
  color:var(--muted);
  margin-bottom:8px;
}
.result-block strong{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:2rem;
}
.result-note{
  margin-top:26px;
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  line-height:1.75;
}

.pricing{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.price-card{ padding:30px; }
.price-card.featured{
  border-color:rgba(122,178,255,.36);
  transform:translateY(-6px);
  box-shadow:0 30px 90px rgba(78,123,255,.2);
}
.price-kicker{
  display:inline-flex;
  margin-bottom:14px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--cyan);
  background:rgba(255,255,255,.03);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.price-card h3{
  margin:0 0 10px;
  font-size:1.5rem;
}
.price-card p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}
.price-card ul{
  margin:22px 0 0;
  padding-left:18px;
  color:#d9e4ff;
  line-height:2;
}

.section-cta{ padding-top:24px; }
.cta{
  padding:34px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
}
.cta .btn{
  min-width:320px;
}

@media (max-width: 1100px){
  .hero-layout,
  .intro,
  .feature-grid,
  .simulator-grid,
  .pricing{
    display:grid;
    grid-template-columns:1fr;
  }

  .architecture{
    grid-template-columns:1fr;
  }
  .arch-arrow{
    transform:rotate(90deg);
    text-align:center;
  }

  .cta{
    display:grid;
  }
  .cta .btn{
    min-width:unset;
  }
}

@media (max-width: 760px){
  .menu{ display:none; }
  .container{ width:min(var(--container), calc(100% - 26px)); }
  .section{ padding:68px 0; }
  .hero{ padding-top:58px; }
  .dashboard-header,
  .metric-row{
    flex-direction:column;
    align-items:stretch;
  }
  .ticker-row{
    justify-content:center;
  }
  .signal-card{
    min-width:unset;
    padding:10px 12px;
  }
}