:root{
  --bg:#0b1220; --bg2:#0a0f1a; --card:#121a2b; --muted:#9fb0c6; --acc:#31d0aa; --acc2:#47f0c7; --ring:rgba(255,255,255,0.08)
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,system-ui,Arial,Helvetica,sans-serif;color:#e6edf6;background:linear-gradient(180deg,var(--bg),var(--bg2) 70%)}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px 0;flex-wrap:wrap;gap:12px}
.brand{display:flex;gap:12px;align-items:center;justify-content:center;width:100%}
.site-logo{width:100%;max-width:600px;height:auto;display:block;margin:0 auto;border-radius:12px;box-shadow:0 2px 16px rgba(0,0,0,.35)}
nav a{font-size:14px;margin-left:14px;opacity:.9}
nav a:hover{opacity:1}
.hero{padding:24px 0 10px}
.row{display:grid;gap:12px}
@media(min-width:620px){.row{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.row{grid-template-columns:1fr 1fr 1fr}}
.pill{display:inline-flex;gap:8px;align-items:center;background:rgba(49,208,170,.12);border:1px solid rgba(71,240,199,.25);color:#b3f5e4;border-radius:999px;padding:6px 10px;font-size:12px}
.h1{font-size:40px;line-height:1.1;margin:12px 0 6px;font-weight:800}
.lead{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--ring);border-radius:18px;padding:14px}
.card h3{margin:4px 0 2px;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:13px}
.section-title{font-size:22px;font-weight:800;margin:0 0 10px}
.footer{border-top:1px solid var(--ring);padding:18px 0;margin-top:18px}
.footer .socials a{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--ring);padding:8px 12px;border-radius:12px;font-size:14px}
.note{font-size:13px;color:var(--muted)}

/* Visual band for middle section */
.band{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); padding:28px 0; border-top:1px solid var(--ring); border-bottom:1px solid var(--ring)}

/* Listen grid: clean and uniform */
.listen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.listen-grid .card{display:flex;flex-direction:column;justify-content:center;text-align:center;transition:transform .2s ease;padding:18px}
.listen-grid .card:hover{transform:translateY(-4px)}
.listen-grid h3{font-size:16px;margin:6px 0 4px;display:flex;align-items:center;justify-content:center;gap:6px}
.listen-grid h3 img{display:inline-block}
.listen-grid p{font-size:13px;color:var(--muted);margin:0}