:root {
  --bg:#FDFBFF; --surface:#EFE6FA; --butter:#FDF3D8; --ink:#2C1A3A; --muted:#5C4A70;
  --violet:#8A55E8; --gold:#F2B72E; --pink:#EE59C5; --outline:#2C1A3A; --divider:#ECE2F6;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#221530; --surface:#33224A; --butter:#3A2C20; --ink:#F3ECFC; --muted:#CBB8DD;
    --violet:#C9A4FF; --outline:#8A68B8; --divider:#33254A; }
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system, system-ui, "Segoe UI", sans-serif; line-height:1.6; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px 80px; }
p, li { text-wrap: pretty; }
h1,h2,h3 { text-wrap: balance; }
header { display:flex; align-items:center; justify-content:space-between; padding:28px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand b { font-weight:900; letter-spacing:2px; font-size:19px; }
.wave { display:flex; align-items:center; gap:3px; height:22px; }
.wave span { width:4px; border-radius:2px; animation: bounce 1.1s ease-in-out infinite; }
.wave span:nth-child(1){ background:var(--gold);  height:8px;  animation-delay:0s; }
.wave span:nth-child(2){ background:var(--violet);height:16px; animation-delay:.15s; }
.wave span:nth-child(3){ background:var(--pink);  height:22px; animation-delay:.3s; }
.wave span:nth-child(4){ background:var(--violet);height:14px; animation-delay:.45s; }
.wave span:nth-child(5){ background:var(--gold);  height:9px;  animation-delay:.6s; }
@keyframes bounce { 0%,100%{ transform:scaleY(.45);} 50%{ transform:scaleY(1);} }
@media (prefers-reduced-motion: reduce) { .wave span { animation:none; } }
nav { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; justify-content:flex-end; }
nav a { color:var(--muted); text-decoration:none; font-weight:700; font-size:14px; }
nav a:hover { color:var(--violet); }
.hero { text-align:center; padding: 48px 0 24px; }
.hero h1 { font-size: clamp(34px, 6vw, 54px); font-weight:900; letter-spacing:-1px; margin:0 0 12px; }
.hero h1 em { font-style:normal; color:var(--violet); }
.hero p { font-size:19px; color:var(--muted); max-width:56ch; margin:0 auto; }
.badge { display:inline-block; margin-top:28px; background:var(--gold); color:#2C1A3A;
  border:2px solid var(--outline); border-radius:26px; padding:14px 30px; font-weight:800; font-size:16px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:56px; }
.card { border:2px solid var(--outline); border-radius:18px; padding:22px; background:var(--surface); }
.card.gold { background:var(--butter); }
.card h3 { margin:0 0 6px; font-size:19px; font-weight:800; }
.card p { margin:0; font-size:14.5px; color:var(--muted); }
.stat { text-align:center; margin-top:64px; }
.stat .num { font-size:52px; font-weight:900; color:var(--violet); }
.stat p { color:var(--muted); max-width:52ch; margin:6px auto 0; }
.page h1 { font-size:32px; font-weight:900; margin-top:24px; }
.page h2 { font-size:19px; font-weight:800; margin-top:28px; }
.page .muted { color:var(--muted); font-size:14px; }
footer { border-top:2px solid var(--divider); margin-top:72px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; color:var(--muted); font-size:13px; }
footer a { color:var(--muted); }
a { color:var(--violet); }

/* GET THE APP — header CTA. Swap href + drop .soon when the App Store link lands. */
.getapp { display:inline-flex; align-items:center; gap:8px; margin-left:18px; background:var(--gold); color:#2C1A3A; text-decoration:none; font-weight:900; font-size:13px; letter-spacing:.5px; padding:9px 16px; border-radius:999px; border:2px solid var(--outline, #2C1A3A); white-space:nowrap; }
.getapp .soon { font-weight:800; font-size:10px; letter-spacing:1px; text-transform:uppercase; background:#2C1A3A; color:#F2B72E; padding:3px 8px; border-radius:999px; }
.getapp[aria-disabled="true"] { cursor:default; }
@media (max-width:600px){ header { flex-wrap:wrap; gap:10px; } .getapp { margin-left:0; } }

/* mobile header: stack brand over nav, pills wrap — no horizontal scroll */
@media (max-width: 640px) {
  header { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 0; }
  nav { width: 100%; justify-content: flex-start; gap: 6px 16px; }
  .getapp { margin-left: 0; padding: 8px 14px; font-size: 12px; }
  .getapp .soon { font-size: 9px; padding: 2px 6px; }
}

/* small screens: let the hero headline wrap naturally instead of clipping */
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(28px, 8.5vw, 40px); }
  .hero h1 br { display: none; }
}