:root{
  --bg:#09122A; --text:#E6EDF3; --muted:#A7B4C7; --stroke:rgba(148,163,184,.16);
  --accent:#5271FF; --accent2:#7AA2FF; --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1180px,92vw);margin:0 auto}

/* Header */
header{position:sticky;top:0;z-index:80;background:#09122A;border-bottom:1px solid var(--stroke);
  box-shadow:0 8px 28px rgba(0,0,0,.55)}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
.brand img{height:38px;width:auto}
.navbar{display:flex;align-items:center;gap:.5rem;position:relative}
nav a{padding:.55rem .75rem;border-radius:10px}
nav a:hover{background:rgba(255,255,255,.06)}
.menu-toggle{display:none;appearance:none;border:1px solid var(--stroke);background:rgba(255,255,255,.06);color:var(--text);
  padding:.65rem .85rem;border-radius:12px;font-weight:800}

/* Components */
.main{padding:2rem 0}
.panel{padding:1.3rem;border-radius:18px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));box-shadow:0 10px 36px rgba(0,0,0,.25);margin:1rem 0}
.grid{display:grid;gap:1rem}
.split{display:grid;gap:1rem;grid-template-columns:1.08fr .92fr;align-items:start}
.features{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{padding:1rem;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--stroke);
  transition:transform .2s ease, box-shadow .2s ease; position:relative; overflow:hidden}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(0,0,0,.35)}
.badgebar{display:flex;gap:.6rem;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:10px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);font-weight:700}
.subtitle{color:var(--muted);line-height:1.6}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.15rem;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#05101e;font-weight:800;
  box-shadow:0 10px 34px rgba(82,113,255,.25);transition:transform .12s ease, filter .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn.secondary{background:rgba(255,255,255,.06);color:var(--text);box-shadow:none;border:1px solid var(--stroke)}

/* Animations */
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.reveal{opacity:0}
.reveal.in{animation:fadeUp .55s ease forwards}
.reveal.delay-1{animation-delay:.06s}
.reveal.delay-2{animation-delay:.12s}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1 !important; animation:none !important} .card,.btn{transition:none}}

/* Mobile menu overlay */
@media (max-width: 900px){
  .split{grid-template-columns:1fr}
  .menu-toggle{display:inline-flex}
  .brand img{height:32px}
  .navbar nav{display:none}
  .navbar[data-open="true"] nav{display:flex}
  .navbar nav{position:fixed;inset:56px 0 0 0;background:linear-gradient(180deg,rgba(9,18,42,.98),rgba(9,18,42,.96));border-top:1px solid var(--stroke);padding:1rem 4vw;flex-direction:column;gap:.5rem;z-index:85}
  .navbar nav a{width:100%;padding:1rem;border-radius:12px}
  .navbar nav a.btn{justify-content:center}
  .panel{box-shadow:0 8px 24px rgba(0,0,0,.25)}
}
@media (max-width: 680px){
  body{font-size:18.5px}
  h1{font-size:clamp(1.55rem,7.8vw,2.25rem)}
  .main{padding:1.25rem 0}
  .panel{padding:1rem}
  .features{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
}

/* Footer */
footer{border-top:1px solid var(--stroke);padding:1.6rem 0 2.2rem;color:var(--muted);text-align:center;margin-top:2rem}

/* Tease styling for Memberships */
.taunt{position:relative;overflow:hidden}
.taunt:before{content:"";position:absolute;inset:0;background:radial-gradient(500px 180px at 80% -20%, rgba(122,162,255,.14), transparent 60%),
  radial-gradient(220px 120px at 10% 110%, rgba(82,113,255,.18), transparent 60%);opacity:.9;pointer-events:none}
.locked .blur{filter:blur(3px);opacity:.75}
.locked .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(9,18,42,.5) 60%);}
.lock{position:absolute;top:.8rem;right:.8rem;opacity:.85}