:root { color-scheme: dark; --night:#090d2a; --panel:#101746; --ink:#f5f7ff; --muted:#a8b0ca; --cyan:#33e6d2; --blue:#315efb; --gold:#ffc83d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 80% 8%, rgba(49,94,251,.2), transparent 28rem), var(--night); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.site-header, footer { display:flex; width:min(1180px, calc(100% - 40px)); align-items:center; justify-content:space-between; margin:auto; padding:22px 0; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; letter-spacing:.08em; }
.brand span { display:grid; width:38px; height:38px; place-items:center; border-radius:12px 12px 4px 12px; background:linear-gradient(145deg,var(--blue),#2436a5); font-weight:950; transform:rotate(-5deg); }
.brand strong { font-size:.82rem; }
.header-cta, .primary, .secondary { display:inline-flex; min-height:46px; align-items:center; justify-content:center; padding:0 20px; border-radius:99px; font-weight:850; text-decoration:none; }
.header-cta, .primary { background:linear-gradient(135deg,var(--cyan),#20bfb0); color:#071124; }
.secondary { border:1px solid rgba(255,255,255,.2); }
main { width:min(1180px, calc(100% - 40px)); margin:auto; }
.hero { display:grid; min-height:680px; grid-template-columns:.9fr 1.1fr; align-items:center; gap:54px; padding:70px 0 90px; }
.eyebrow { margin:0 0 16px; color:var(--cyan); font-size:.72rem; font-weight:900; letter-spacing:.16em; }
h1 { max-width:680px; margin:0; font-size:clamp(3rem,6vw,5.5rem); letter-spacing:-.065em; line-height:.92; }
.lead { max-width:620px; margin:26px 0; color:#ced3e5; font-size:1.13rem; line-height:1.7; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.quick-facts { display:flex; flex-wrap:wrap; gap:22px; margin:28px 0 0; padding:0; color:var(--muted); font-size:.82rem; font-weight:750; list-style:none; }
.quick-facts li::before { color:var(--gold); content:"●"; margin-right:8px; }
figure { margin:0; overflow:hidden; border:1px solid rgba(51,230,210,.25); border-radius:28px; background:var(--panel); box-shadow:0 30px 80px rgba(0,0,0,.38); transform:rotate(1deg); }
figure img { display:block; width:100%; height:auto; }
figcaption { padding:12px 16px; color:var(--muted); font-size:.74rem; }
.section { padding:100px 0; border-top:1px solid rgba(255,255,255,.09); }
h2 { max-width:760px; margin:0 0 40px; font-size:clamp(2.2rem,4.8vw,4rem); letter-spacing:-.055em; line-height:1; }
.card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card-grid article { min-height:250px; padding:26px; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:linear-gradient(145deg,rgba(20,30,82,.82),rgba(10,15,46,.82)); }
.card-grid article > span { color:var(--gold); font-size:.72rem; font-weight:900; }
.card-grid h3 { margin:34px 0 12px; font-size:1.25rem; }
.card-grid p, .how-to li span, .faq p, .final-cta > p:not(.eyebrow), footer p { color:var(--muted); line-height:1.65; }
.how-to { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.how-to ol { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.how-to li { display:grid; gap:6px; padding:20px 22px; border-left:3px solid var(--cyan); background:rgba(255,255,255,.035); }
.how-to .primary { width:max-content; align-self:start; }
.faq { max-width:900px; }
.faq details { border-top:1px solid rgba(255,255,255,.13); }
.faq summary { padding:22px 4px; cursor:pointer; font-size:1.08rem; font-weight:800; }
.faq details p { margin:0; padding:0 4px 22px; }
.final-cta { margin:70px 0; padding:70px; border:1px solid rgba(51,230,210,.25); border-radius:34px; background:radial-gradient(circle at 85% 20%,rgba(51,230,210,.15),transparent 28%),linear-gradient(135deg,#18275e,#0d1439); text-align:center; }
.final-cta h2 { margin-inline:auto; margin-bottom:18px; }
.final-cta .primary { margin-top:18px; }
footer { border-top:1px solid rgba(255,255,255,.09); }
footer p { font-size:.78rem; }
footer nav { display:flex; gap:14px; font-size:.75rem; font-weight:750; }
footer nav a { color:var(--muted); text-underline-offset:3px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; min-height:0; padding-top:40px; }.card-grid { grid-template-columns:1fr 1fr; }.how-to { grid-template-columns:1fr; } }
@media (max-width:600px) { .site-header, main, footer { width:min(100% - 28px,1180px); }.brand strong { display:none; }.header-cta { min-height:42px; padding-inline:15px; }.hero { gap:34px; padding-bottom:65px; }h1 { font-size:clamp(2.75rem,15vw,4rem); }.lead { font-size:1rem; }.hero-actions > * { width:100%; }.quick-facts { gap:10px 16px; }.section { padding:70px 0; }.card-grid { grid-template-columns:1fr; }.card-grid article { min-height:0; }.final-cta { margin:40px 0; padding:45px 20px; border-radius:24px; }footer { align-items:flex-start; flex-direction:column; gap:8px; } }