:root{
  --bg-0:#070a12;
  --bg-1:#0a0e19;
  --bg-2:#0f1530;
  --grad-1:#0b1022;
  --grad-2:#123b38;
  --grad-3:#4455ff22;
  --text:#e7e9ff;
  --muted:#aab0d6;
  --brand:#9aa8ff;
  --brand-strong:#b7c1ff;
  --pill:#11162b;
  --pill-stroke:#273058;
  --white:#ffffff;
  --shadow:0 10px 40px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 600px at 70% -150px, #1c2540 0%, transparent 60%),
            radial-gradient(1200px 600px at -20% -180px, #183433 0%, transparent 55%),
            linear-gradient(180deg, var(--bg-0) 0%, var(--bg-2) 60%,rgb(53, 71, 207) 100%);
  background-attachment: fixed, fixed, fixed;
}

.container{width:min(1200px, 92%); margin:0 auto}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px)}
.site-header:before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,10,18,.9), rgba(7,10,18,.6)); pointer-events:none}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0; position:relative}
.brand{font-weight:800; font-size:24px; letter-spacing:.5px}
.primary-nav{display:none}
.actions{display:flex; gap:12px; align-items:center}
.btn{border:0; cursor:pointer; font-weight:700}
.btn-pill{padding:12px 18px; border-radius:999px}
.btn-light{background:var(--white); color:#0c1022}
.btn-dark{background:#0d1125; color:var(--white); border:1px solid #2c345f}
.btn-dark .arrow{margin-left:8px}
.icon-btn{width:42px; height:42px; border-radius:50%; border:1px solid #2c345f; background:#27305833; display:grid; place-items:center}
.icon-btn span{display:block; width:18px; height:2px; background:var(--white); margin:2px 0; opacity:.9}
.btn .dot{display:inline-block; width:8px; height:8px; background:#7bd97b; border-radius:50%; margin-right:8px}

/* Hero */
.hero{padding:120px 0 80px; position:relative;}
.hero:before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url('https://images.unsplash.com/photo-1639322537504-6427a16b0a28?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat fixed;
  filter:saturate(110%);
}
.hero:after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(7,10,18,.75), rgba(7,10,18,.6) 40%, rgba(7,10,18,.2));
}
.hero-inner{display:flex; flex-direction:column; align-items:center; text-align:center}
.hero h1{font-size:64px; line-height:1.05; margin:0 0 12px; letter-spacing:.2px}
.hero h1 span{color:var(--brand)}
.subtitle{color:var(--muted); max-width:790px; margin:10px auto 28px}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center}
/* removed decorative hero-art elements */
.scroll-down{margin-top:36px; background:transparent; color:var(--muted); border:1px solid #2c345f; width:42px; height:42px; border-radius:50%; cursor:pointer}

/* Features */
.features{padding:60px 0 120px; position:relative}
.section-header{text-align:center; margin-bottom:24px}
.section-header h2{font-size:42px; margin:0 0 6px}
.section-sub{font-size:36px; margin:0; color:var(--brand)}

.pill-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:28px}
.pill{background:var(--pill); border:1px solid var(--pill-stroke); color:var(--white); border-radius:999px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; box-shadow:0 6px 20px rgba(0,0,0,.25)}
.pill .label{font-weight:600}
.pill .chev{opacity:.9}

/* Footer */
.site-footer{padding:48px 0; border-top:1px solid #263058; background:linear-gradient(180deg, transparent, rgba(0,0,0,.2))}
.site-footer p{color:var(--muted); text-align:center; margin:0}

/* Responsive */
@media (max-width: 1024px){
  .pill-grid{grid-template-columns:repeat(2, 1fr)}
  .hero h1{font-size:54px}
}
@media (max-width: 640px){
  .primary-nav{display:none}
  .pill-grid{grid-template-columns:1fr}
  .hero{padding-top:96px}
  .hero h1{font-size:40px}
}


