:root{
  --bg:#0a0712; --panel:#140d22; --ink:#f4f1ff; --muted:#a99fc4;
  --y:#ffd23f; --o:#ff7a2f; --p:#ff3da6; --c:#19e0ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--c); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px; margin:0 auto; padding:0 22px}
.bg-glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40rem 30rem at 18% -8%, rgba(255,61,166,.20), transparent 60%),
    radial-gradient(36rem 30rem at 92% 8%, rgba(25,224,255,.16), transparent 60%),
    radial-gradient(50rem 40rem at 50% 120%, rgba(255,122,47,.16), transparent 60%);
}
.grad{
  background:linear-gradient(120deg,var(--y),var(--o),var(--p));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Hero */
header.hero{text-align:center; padding:64px 0 28px}
header.hero img.logo{width:128px; height:128px; filter:drop-shadow(0 6px 22px rgba(255,61,166,.45))}
h1{font-size:clamp(34px,7vw,60px); font-weight:900; letter-spacing:2px; margin:14px 0 6px}
.tagline{color:var(--muted); font-size:clamp(16px,2.4vw,20px); margin:0 0 18px}
.cta{display:inline-block; margin-top:8px; padding:12px 22px; border-radius:999px;
  font-weight:800; color:#1a1206; background:linear-gradient(120deg,var(--y),var(--o));
  box-shadow:0 8px 24px rgba(255,122,47,.35)}
.soon{display:inline-block; margin-top:14px; color:var(--muted); font-size:14px;
  border:1px solid rgba(255,255,255,.14); padding:8px 16px; border-radius:999px}
/* Sections */
section{padding:34px 0}
h2{font-size:clamp(22px,4vw,30px); font-weight:800; margin:0 0 18px}
.lead{color:var(--muted); max-width:62ch}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px 18px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card h3{margin:0 0 6px; font-size:17px}
.card p{margin:0; color:var(--muted); font-size:14px}
.cats{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cat{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px 18px}
.cat .tag{font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase}
.cat ul{margin:8px 0 0; padding-left:18px; color:var(--muted)}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px;
  border:1px solid rgba(255,255,255,.16); color:var(--ink); margin:0 6px 6px 0}
.price{background:var(--panel); border:1px solid rgba(255,210,63,.35); border-radius:18px;
  padding:22px; text-align:center}
.price strong{font-size:22px}
/* FAQ */
.faq details{background:var(--panel); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:4px 18px; margin:0 0 12px}
.faq summary{cursor:pointer; font-weight:700; padding:12px 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋"; color:var(--o); font-weight:900; margin-right:10px}
.faq details[open] summary::before{content:"－"}
.faq p{margin:0 0 14px; color:var(--muted)}
/* Footer */
footer{border-top:1px solid rgba(255,255,255,.08); margin-top:40px; padding:26px 0 50px; text-align:center; color:var(--muted); font-size:14px}
footer a{margin:0 10px}
.prose p{color:var(--muted)} .prose h2{margin-top:28px}