:root{--bg:#dff3ff;--bg2:#c9e8ff;--ink:#1d2a5b;--mut:#4a5a94;--coral:#ff6b6b;--sun:#ffc93c;--mint:#3ddbb0;--r:22px;--fd:'Fredoka',system-ui,sans-serif;--fb:'Manrope',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);line-height:1.55;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--fd);font-weight:700;font-size:1.5rem}
.brand img{width:44px;height:44px;border-radius:22%;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.navlink{font-weight:600;text-decoration:none}
.navlink:hover{text-decoration:underline}

h1,h2,h3{font-family:var(--fd);font-weight:700;margin:0}
h1{font-size:clamp(2.6rem,7.5vw,4.9rem);line-height:1}
h2{font-size:clamp(1.8rem,4.5vw,2.7rem);line-height:1.08}
.lead{font-size:1.15rem;color:var(--mut);max-width:30em;margin:18px 0 26px}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding:30px 0 80px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.badge img{display:block;height:52px;width:auto}
.btn{display:inline-block;padding:13px 22px;border-radius:var(--r);background:var(--sun);color:var(--ink);font-weight:800;text-decoration:none;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn:focus-visible,.badge:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.note{margin:16px 0 0;color:var(--mut);font-size:.95rem}

.phone{width:min(100%,300px);aspect-ratio:780/1688;border:4px solid var(--ink);border-radius:40px;overflow:hidden;background:#fff;box-shadow:0 10px 0 var(--ink);margin:0 auto}
.phone img,.phone video{display:block;width:100%;height:100%;object-fit:cover}

.rows{display:grid;gap:90px;padding:20px 0 90px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.row:nth-child(even) .phone{order:-1}
.row p{color:var(--mut);font-size:1.1rem;max-width:26em;margin:14px 0 0}
.chip{display:inline-block;padding:5px 14px;border-radius:999px;border:3px solid var(--ink);background:var(--mint);font-weight:800;font-size:.9rem;margin-bottom:14px}
.row:nth-child(2) .chip{background:var(--coral)}
.row:nth-child(3) .chip{background:var(--sun)}

.final{background:#fff;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:80px 0;text-align:center}
.final h2{margin:0 auto 12px;max-width:14em}
.final p{color:var(--mut);margin:0 auto 28px;max-width:30em}
.final .cta-row{justify-content:center}
footer{padding:30px 0 40px;text-align:center;color:var(--mut);font-size:.95rem}

@media(max-width:820px){.hero,.row{grid-template-columns:1fr;gap:34px}.row:nth-child(even) .phone{order:0}.rows{gap:70px}.hero{padding-bottom:56px}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* Privacy / long-form pages */
.doc{background:#fff;border:4px solid var(--ink);border-radius:var(--r);box-shadow:0 8px 0 var(--ink);padding:clamp(24px,5vw,56px);margin:20px auto 70px;max-width:820px}
.doc h1{font-size:clamp(2.2rem,6vw,3.4rem);margin-bottom:6px}
.doc .updated{color:var(--mut);margin:0 0 26px;font-weight:600}
.doc h2{font-size:1.45rem;margin:38px 0 10px}
.doc h3{font-size:1.1rem;margin:22px 0 6px}
.doc p,.doc li{font-size:1.02rem}
.doc ul{padding-left:1.3em;margin:8px 0 14px}
.doc li{margin:3px 0}
.doc a{color:var(--coral);font-weight:700}

/* Launch countdown (index) */
.count{display:inline-flex;align-items:baseline;gap:10px;margin:0 0 24px;padding:8px 20px;background:var(--sun);border:3px solid var(--ink);border-radius:var(--r);box-shadow:0 4px 0 var(--ink);transform:rotate(-2deg)}
.count[hidden]{display:none}
.count .num{font-family:var(--fd);font-weight:700;font-size:2.4rem;line-height:1}
.count .lbl{font-weight:800}

/* 404 page */
.err{text-align:center;padding:40px 0 100px}
.err h1{margin-bottom:6px}
.err .lead{margin:14px auto 26px}
.err .cta-row{justify-content:center}
.err .note a{font-weight:700}
.cards404{display:flex;gap:14px;justify-content:center;margin:0 0 34px}
.k{width:clamp(74px,22vw,120px);aspect-ratio:3/4;perspective:700px}
.k .in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:flip .7s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:var(--d)}
.k .f,.k .b{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);display:grid;place-items:center}
.k .b{background:linear-gradient(145deg,#ff6b6b,#ff9a4d)}
.k .f{background:#fff;transform:rotateY(180deg);font-family:var(--fd);font-weight:700;font-size:clamp(2.2rem,9vw,4rem)}
.k:nth-child(2) .f{background:var(--mint)}
@keyframes flip{to{transform:rotateY(180deg)}}
@media(prefers-reduced-motion:reduce){.k .in{animation:none;transform:rotateY(180deg)}}

/* QR codes: desktop only, since phones can just tap the buttons */
.qr-row{display:none;margin:44px auto 0;max-width:520px}
.qr-row .qr-hint{font-weight:800;margin:0 0 16px}
.qr-row .qrs{display:flex;gap:28px;justify-content:center}
.qr{margin:0}
.qr img{display:block;width:150px;height:150px;border:3px solid var(--ink);border-radius:var(--r);box-shadow:0 5px 0 var(--ink);background:#fff}
.qr figcaption{margin-top:12px;font-weight:700;font-size:.95rem}
@media (hover:hover) and (pointer:fine) and (min-width:821px){.qr-row{display:block}}

/* Social links */
.follow{font-family:var(--fd);font-weight:700;font-size:1.25rem;color:var(--ink);margin:0}
.social{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0;margin:12px 0 26px}
.social a{display:inline-block;padding:8px 16px;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:800;text-decoration:none;box-shadow:0 3px 0 var(--ink);transition:transform .12s}
.social a:hover{transform:translateY(-2px)}
