:root {
      --bg:#0b1020; --card:#111836; --ink:#eaf0ff;
      --muted:#9fb0d7; --brand:#5aa6ff; --accent:#9b7dff;
      --max:1080px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#0b1020,#0d1430);color:var(--ink);line-height:1.7}
    a{color:var(--brand);text-decoration:none}
    a:hover{text-decoration:underline}
    .wrap{max-width:var(--max);margin:auto;padding:24px}
    header.hero{background:var(--card);border-radius:24px;padding:32px;border:1px solid rgba(255,255,255,.06)}
    .hero h1{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;margin:0 0 10px}
    .hero p{color:var(--muted);margin:0 0 16px}
    .cta-row{display:flex;flex-wrap:wrap;gap:12px}
    .btn{padding:12px 20px;border-radius:14px;font-weight:700;display:inline-flex;align-items:center;gap:.5rem}
    .btn.primary{background:linear-gradient(90deg,var(--brand),var(--accent));color:white}
    .btn.ghost{border:1px solid rgba(255,255,255,.1);color:var(--ink);background:rgba(255,255,255,.04)}
    .grid{display:grid;gap:24px;margin-top:24px}
    @media(min-width:900px){.grid{grid-template-columns:1.2fr .8fr}}
    .card{background:var(--card);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:24px}
    h2{color:#cfe3ff;margin-top:26px}
    h3{color:#d7e4ff;margin-top:20px}
    ul{margin:8px 0 8px 20px}
    details{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;margin:10px 0}
    summary{cursor:pointer;font-weight:700}
    footer.cta{border:1px dashed rgba(255,255,255,.1);border-radius:16px;padding:20px;background:rgba(255,255,255,.03);margin-top:30px;text-align:center}