:root{
  --bg:#0b0e12; --panel:#0f141a; --text:#e8edf2; --muted:#a9b3be; --stroke:#1e2935; --accent:#7aa2ff;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: light){:root{--bg:#ffffff;--panel:#f6f8fb;--text:#0e1116;--muted:#475569;--stroke:#e5e7eb;--accent:#3b82f6}}
*{box-sizing:border-box}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--text); background:radial-gradient(50% 60% at 90% -10%, rgba(122,162,255,.15), transparent 60%), var(--bg)}
a{color:inherit; text-decoration:none}
.container{max-width:1080px; margin-inline:auto; padding:0 20px}

/* header */
header{position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px); background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--stroke)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:36px; height:36px; display:inline-block; background-image:url("./images/kadojo.png"); background-size:contain; background-repeat:no-repeat; background-position:center; border-radius:8px}
.brand span{font-weight:700}
nav a{color:var(--muted)}

/* hero */
.hero{padding:64px 0 28px; text-align:center}
.hero h1{font-size:clamp(26px,4.4vw,40px); margin:0 0 10px}
.hero p{color:var(--muted); margin:0}
.appicon{width:clamp(96px,20vw,140px); aspect-ratio:1; margin:0 auto 24px; background-image:url("./images/kadojo.png"); background-size:contain; background-repeat:no-repeat; background-position:center; border-radius:24px; box-shadow:var(--shadow)}
.tagline{font-size:clamp(16px,2.2vw,19px)}
.launch{margin-top:28px; color:var(--text); font-weight:600}

/* calls to action */
.cta-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; margin:20px 0 0}
/* 40px rather than the 48 the old text buttons used: the Google badge is a
   270x80 raster, so 40 CSS px lands exactly on 2x for a retina screen and
   anything taller upscales it. Apple's badge is vector and just follows.
   Neither file carries transparent padding, so equal height aligns them with
   no correction. */
.store-badge{display:inline-flex; border-radius:8px; transition:transform .12s ease}
.store-badge img{display:block; height:40px; width:auto}
/* The artwork is never recoloured or filtered - altering it breaks both
   vendors' terms - so the hover affordance moves the badge, not its pixels. */
.store-badge:hover{transform:translateY(-1px)}
.store-badge:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.store-badge{transition:none} .store-badge:hover{transform:none}}
/* .hero p sets margin:0 at specificity (0,1,1), so a bare .web-soon (0,1,0)
   loses and its margin-top is silently dropped. Scoped to .hero to outrank it. */
.hero .web-soon{margin-top:32px; font-size:14px}

/* socials */
.socials{display:flex; gap:18px; justify-content:center; margin-top:20px}
.socials a{display:inline-flex; color:var(--muted); padding:6px; border-radius:8px; transition:color .12s ease}
.socials svg{width:22px; height:22px; display:block}
.socials a:hover{color:var(--text)}
.socials a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.socials a{transition:none}}
/* Same specificity problem as .web-soon above - .hero p wins over a bare
   .quiz and would drop the margin. */
.hero .quiz{margin-top:12px; font-size:14px}
.quiz time{color:var(--text); font-weight:600}

/* footer */
footer{border-top:1px solid var(--stroke); padding:24px 0; color:var(--muted); margin-top:20px}
footer .links{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
footer a{color:var(--muted)}