:root{
  --page:#06111f;
  --page-2:#0a1830;
  --surface:rgba(10,21,42,.72);
  --surface-2:#0f203c;
  --surface-3:#122848;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  --text:#eef4ff;
  --text-soft:rgba(225,234,248,.72);
  --text-dim:rgba(225,234,248,.52);
  --brand:#8cdcff;
  --brand-2:#4f7dff;
  --mint:#7df1c4;
  --warm:#ffca7f;
  --danger:#ff9da7;
  --ink:#08111f;
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --shadow:0 28px 80px rgba(0,0,0,.28);
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:"Manrope","Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 12% 0, rgba(125,241,196,.12), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(79,125,255,.16), transparent 22%),
    linear-gradient(180deg, var(--page) 0%, var(--page-2) 48%, #081220 100%);
}

a{color:inherit;text-decoration:none}
h1,h2,h3,.button,.brand strong,.badge,.eyebrow,.hero-card-top,.roadmap-card span{
  font-family:"Space Grotesk","Manrope",sans-serif;
  letter-spacing:-.03em;
}

.site-shell{
  position:relative;
  overflow:hidden;
}

.site-shell:before,
.site-shell:after{
  content:"";
  position:fixed;
  width:34rem;
  height:34rem;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  opacity:.38;
  z-index:0;
}

.site-shell:before{
  top:-14rem;
  left:-11rem;
  background:radial-gradient(circle, rgba(125,241,196,.16), transparent 68%);
}

.site-shell:after{
  right:-12rem;
  bottom:-12rem;
  background:radial-gradient(circle, rgba(79,125,255,.18), transparent 70%);
}

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

.topbar{
  padding:24px 0 10px;
}

.topbar-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:16px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(10,20,40,.66);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 44px rgba(0,0,0,.18);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#04111d;
  font-weight:800;
  background:linear-gradient(135deg,#d7fff3,#8cdcff);
  box-shadow:0 18px 34px rgba(79,125,255,.22);
}

.brand-copy strong{
  display:block;
  font-size:1rem;
}

.brand-copy small{
  display:block;
  color:var(--text-soft);
}

.topnav{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  color:var(--text-soft);
  font-size:.95rem;
}

.topnav a:hover{
  color:#fff;
}

.nav-cta{
  padding:11px 18px;
  border-radius:999px;
  color:var(--ink);
  font-weight:700;
  background:linear-gradient(135deg,#dcfff4,#a8dcff);
}

.hero{
  padding:20px 0 56px;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:28px;
  align-items:stretch;
}

.hero-copy,
.hero-panel,
.feature-card,
.plugin-card,
.pillar-card,
.roadmap-shell,
.cta-card{
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.hero-copy{
  padding:42px;
  background:
    radial-gradient(circle at top right, rgba(140,220,255,.16), transparent 28%),
    linear-gradient(180deg, rgba(11,23,44,.96), rgba(7,15,29,.98));
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  color:#04171a;
  background:linear-gradient(135deg,#d7fff3,#b6ffe0);
}

.eyebrow-dark{
  color:var(--ink);
  background:linear-gradient(135deg,#d9fff6,#b9e8ff);
}

.hero h1{
  margin:18px 0 16px;
  max-width:11ch;
  font-size:clamp(2.8rem, 6vw, 5.2rem);
  line-height:.95;
}

.hero-lead,
.section-head p,
.feature-card p,
.plugin-card p,
.pillar-card p,
.roadmap-card p,
.cta-card p{
  color:var(--text-soft);
  line-height:1.75;
  font-size:1.02rem;
}

.hero-actions,
.feature-actions,
.cta-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:28px;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 20px;
  border-radius:16px;
  font-weight:800;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.button:hover{
  transform:translateY(-2px);
}

.button-primary{
  color:#04111d;
  background:linear-gradient(135deg,#d7fff3,#8cdcff);
  box-shadow:0 18px 34px rgba(79,125,255,.2);
}

.button-secondary{
  color:#fff;
  background:rgba(255,255,255,.04);
  border-color:var(--line-2);
}

.hero-points{
  margin:28px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}

.hero-points li{
  padding-left:18px;
  position:relative;
  color:var(--text-soft);
}

.creator-note{
  margin:22px 0 0;
  color:var(--text-soft);
  font-size:.96rem;
}

.creator-note a{
  color:#a6d5ff;
  font-weight:700;
}

.hero-points li:before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--mint),var(--brand));
}

.hero-panel{
  padding:26px;
  background:linear-gradient(180deg, rgba(12,24,47,.92), rgba(8,17,32,.98));
}

.hero-card{
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.hero-card-main{
  padding:24px;
}

.hero-card-top{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-soft);
  font-size:.9rem;
}

.status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,#89f4cc,#4f7dff);
  box-shadow:0 0 0 8px rgba(125,241,196,.08);
}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}

.hero-metrics article{
  padding:18px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.hero-metrics strong{
  display:block;
  font-size:2rem;
}

.hero-metrics span{
  display:block;
  margin-top:6px;
  color:var(--text-dim);
  font-size:.92rem;
}

.hero-rail{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.hero-rail div{
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
}

.hero-rail p{
  margin:0 0 6px;
  color:var(--text-dim);
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero-rail strong{
  display:block;
  font-size:1rem;
  line-height:1.5;
}

.hero-mini-grid{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.hero-mini-card{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(140,220,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(140,220,255,.14);
}

.hero-mini-card span{
  display:block;
  color:var(--text-dim);
  font-size:.84rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero-mini-card strong{
  display:block;
  margin-top:10px;
  font-size:1.08rem;
  line-height:1.45;
}

.hero-mini-card.muted{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.08);
}

.launch-strip{
  padding:0 0 32px;
}

.launch-strip-inner{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  padding:24px 28px;
  border-radius:28px;
  background:linear-gradient(135deg,#eff8ff,#edfef8);
  color:var(--ink);
  box-shadow:0 22px 52px rgba(4,13,24,.12);
}

.launch-strip h2{
  margin:8px 0 0;
  font-size:clamp(1.7rem,3.3vw,2.5rem);
}

.launch-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.launch-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  color:#fff;
  background:#0d1b33;
}

.featured,
.plugins,
.philosophy,
.roadmap,
.cta{
  padding:56px 0;
}

.section-head{
  max-width:760px;
  margin-bottom:28px;
}

.section-head.left{
  margin-bottom:0;
}

.section-head h2{
  margin:16px 0 14px;
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.02;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.feature-card,
.plugin-card,
.pillar-card,
.roadmap-card{
  padding:28px;
  background:linear-gradient(180deg, rgba(12,24,47,.94), rgba(8,16,30,.98));
}

.feature-card.accent{
  background:
    radial-gradient(circle at top right, rgba(125,241,196,.12), transparent 26%),
    linear-gradient(180deg, rgba(12,24,47,.94), rgba(8,16,30,.98));
}

.feature-badges,
.plugin-card-top{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  border:1px solid rgba(255,255,255,.08);
  color:#d8e3ff;
}

.badge-live{
  color:#042218;
  background:linear-gradient(135deg,#d8fff4,#b5ffe0);
  border-color:transparent;
}

.badge-soon{
  color:#291704;
  background:linear-gradient(135deg,#ffe7bb,#ffcf8a);
  border-color:transparent;
}

.feature-card h3,
.plugin-card h3,
.pillar-card h3,
.roadmap-card h3{
  margin:18px 0 12px;
  font-size:1.55rem;
}

.feature-card ul{
  margin:18px 0 0;
  padding-left:18px;
  color:var(--text-soft);
  line-height:1.8;
}

.plugin-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.plugin-card{
  min-height:280px;
}

.plugin-card.live{
  background:
    radial-gradient(circle at top right, rgba(140,220,255,.12), transparent 24%),
    linear-gradient(180deg, rgba(12,24,47,.94), rgba(8,16,30,.98));
}

.plugin-card a{
  display:inline-flex;
  margin-top:18px;
  color:#a6d5ff;
  font-weight:700;
}

.philosophy-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:24px;
  align-items:start;
}

.pillar-grid,
.roadmap-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.roadmap-shell{
  padding:32px;
  background:linear-gradient(180deg, rgba(12,24,47,.94), rgba(8,16,30,.98));
}

.roadmap-card span{
  color:var(--brand);
  font-size:.84rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.cta-card{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:24px;
  align-items:center;
  padding:34px;
  background:linear-gradient(135deg,#eef7ff,#eefdf8);
  color:var(--ink);
  box-shadow:0 24px 60px rgba(6,17,31,.16);
}

.cta-card h2{
  margin:16px 0 12px;
  font-size:clamp(2rem,3.8vw,3.4rem);
  line-height:1.04;
}

.cta-card p{
  color:#415068;
}

.cta-card .button-secondary{
  color:#0b1730;
  background:#d8eaff;
  border-color:#c1dafb;
}

.site-footer{
  padding:8px 0 56px;
}

.site-footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);
  gap:28px;
  align-items:center;
  padding:28px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
}

.site-footer-brand{
  display:flex;
  align-items:flex-start;
  gap:18px;
  min-width:0;
}

.site-footer-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:18px;
  font-family:"Space Grotesk","Manrope",sans-serif;
  font-size:1.05rem;
  font-weight:800;
  color:#08111f;
  background:linear-gradient(135deg,#d7fff3,#a8dcff);
  box-shadow:0 18px 38px rgba(79,125,255,.2);
}

.site-footer-copy{
  display:grid;
  gap:8px;
  min-width:0;
  max-width:720px;
}

.site-footer-kicker{
  margin:0;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#9fd8ff;
}

.site-footer-copy h3{
  margin:0;
  color:#fff;
  font-size:1.16rem;
  line-height:1.5;
  font-weight:700;
}

.site-footer-note{
  margin:0;
  color:var(--text-soft);
  line-height:1.7;
  font-size:.96rem;
}

.site-footer-meta{
  display:grid;
  justify-items:start;
  gap:12px;
  flex:0 0 auto;
  padding:22px 0 22px 24px;
  border-left:1px solid rgba(255,255,255,.1);
}

.site-footer-meta-label{
  margin:0;
  color:var(--text-soft);
  font-size:.95rem;
}

.site-footer-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(166,213,255,.26);
  background:rgba(255,255,255,.04);
  color:#a6d5ff;
  font-weight:700;
  white-space:nowrap;
}

@media (max-width: 1120px){
  .hero-grid,
  .philosophy-grid,
  .cta-card{
    grid-template-columns:1fr;
  }

  .plugin-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .launch-strip-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 780px){
  .topbar-inner{
    border-radius:28px;
    align-items:flex-start;
    flex-direction:column;
  }

  .hero-copy,
  .hero-panel,
  .feature-card,
  .plugin-card,
  .pillar-card,
  .roadmap-shell,
  .cta-card{
    border-radius:24px;
  }

  .hero-copy,
  .hero-panel,
  .feature-card,
  .plugin-card,
  .roadmap-shell,
  .cta-card{
    padding:24px;
  }

  .feature-grid,
  .hero-metrics,
  .pillar-grid,
  .roadmap-grid,
  .plugin-grid{
    grid-template-columns:1fr;
  }

  .topnav{
    width:100%;
  }

  .launch-links,
  .hero-actions,
  .cta-actions{
    width:100%;
  }

  .launch-pill,
  .button{
    width:100%;
  }

  .site-footer-inner{
    grid-template-columns:1fr;
    gap:18px;
    padding-top:24px;
  }

  .site-footer-meta{
    padding:0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:18px;
  }
}