/* Reset & base */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{--bg:#0b1220;--card:rgba(255,255,255,.05);--border:rgba(255,255,255,.12);--text:#fff;--dim:rgba(255,255,255,.8);--brand:#2563eb;--brand-2:#1e4fd6}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block;border-radius:12px}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:24px}
.section{padding:56px 0}
@media (min-width:900px){.section{padding:72px 0}}
.grid-2{display:grid;gap:24px}
@media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px}
.center{text-align:center}

/* Header */
.site-header{border-bottom:1px solid var(--border);backdrop-filter:saturate(140%) blur(6px)}
.brand{display:flex;align-items:center;gap:12px;font-weight:600}
.nav{display:none;gap:24px;color:var(--dim)}
.nav a{padding:6px 2px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--text);border-bottom-color:var(--border)}
@media (min-width:900px){.nav{display:flex}}

/* Typography */
h1{font-size:clamp(2rem,6vw,3.5rem);line-height:1.1;margin:0 0 16px}
h2{font-size:clamp(1.5rem,3.5vw,2rem);margin:0 0 12px}
h3{font-size:clamp(1.125rem,2.5vw,1.25rem);margin:0 0 8px}
p{margin:12px 0; color:var(--dim)}
.lead{font-size:1.125rem;max-width:60ch}

/* Lists */
.list{list-style:disc;padding-left:1.25rem;color:var(--dim)}
.list li{margin:6px 0}
.list-grid{display:grid;gap:12px}
@media (min-width:900px){.list-grid{grid-template-columns:1fr 1fr}}
.ol{list-style:decimal;padding-left:1.25rem;color:var(--dim)}
.ol li{margin:6px 0}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text);transition:background .2s,border-color .2s,transform .05s ease}
.btn:hover{background:rgba(255,255,255,.08)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* Forms */
input,textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text)}
label{display:block;margin-bottom:10px;color:var(--dim)}
form .btn{margin-top:8px}

/* Footer */
footer{border-top:1px solid var(--border);padding:24px;color:#9ca3af}


/* Hero sizing + image fit */
.hero{min-height:clamp(420px,70vh,720px);display:grid;gap:24px;align-items:center}
@media (min-width:900px){.hero{grid-template-columns:1fr 1fr}}
.card-media{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.card-media img{width:100%;height:auto;border-radius:12px}
/* Section headers spacing */
.section h1{margin-bottom:12px}
.section h2{margin-top:20px}
/* How page card grids */
.feature-cards{display:grid;gap:16px}
@media (min-width:900px){.feature-cards{grid-template-columns:1fr 1fr}}


/* How It Works polish */
.section .lead{margin:6px 0 18px;max-width:70ch}
.card h2{margin:0 0 10px}
.list li,.ol li{line-height:1.6}
.feature-cards{margin-top:24px}


/* Ensure consistent card sizing on How It Works */
.feature-cards .card{display:flex;flex-direction:column}
.feature-cards .list{margin-top:6px}
.feature-cards .list li{margin:6px 0}