:root{
  --ink:#1d1b1a; --ink-soft:#4a4541; --paper:#fffaf0; --cream:#fff3d6;
  --sun:#ffc93c; --sun-deep:#f5a524; --sky:#bfe6ff; --mint:#c9f2d8; --coral:#ffc7bd;
  --grape:#e3d4ff; --peach:#ffe0b8; --leaf:#2e9e5b; --red:#e8483f;
  --radius:22px; --border:3px solid var(--ink); --shadow:6px 6px 0 var(--ink);
  --font-head:"Fredoka",system-ui,sans-serif; --font-body:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--font-body)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);line-height:1.15;margin:0 0 .4em}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
p{margin:0 0 1em}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;border:var(--border);border-radius:12px;z-index:9}
:focus-visible{outline:3px dashed var(--ink);outline-offset:3px}

/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(255,250,240,.92);backdrop-filter:blur(6px);border-bottom:var(--border)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.35rem var(--font-head);letter-spacing:.02em}
.brand img{width:44px;height:44px;border-radius:50%;border:var(--border)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{text-decoration:none;font:600 1rem var(--font-head);padding:8px 14px;border-radius:999px;border:3px solid transparent;transition:background .2s,border-color .2s}
.nav a:hover,.nav a[aria-current=page]{background:var(--sun);border-color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 22px;border:var(--border);border-radius:999px;background:#fff;box-shadow:4px 4px 0 var(--ink);font:600 1.05rem var(--font-head);text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn svg{width:22px;height:22px;flex:none}
.btn.yt{background:#ff5b4f;color:#fff}
.btn.ig{background:var(--grape)}
.btn.fb{background:var(--sky)}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffe07a,var(--sun));border-bottom:var(--border)}
.hero::before{content:"";position:absolute;inset:0;opacity:.35;background-image:url("img/doodles.svg");background-size:420px}
.hero .wrap{position:relative;display:grid;gap:24px;align-items:center;padding-top:48px;padding-bottom:56px}
.bubble{display:inline-block;background:#fff;border:var(--border);border-radius:18px;padding:8px 16px;font:600 1.05rem var(--font-head);position:relative;margin-bottom:14px}
.bubble::after{content:"";position:absolute;left:28px;bottom:-14px;border:12px solid transparent;border-top-color:var(--ink);border-bottom:0}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);margin-bottom:.25em}
.hero h1 span{background:#fff;padding:0 .18em;border:var(--border);border-radius:14px;display:inline-block;transform:rotate(-2deg)}
.hero .lead{font-size:1.2rem;max-width:34ch;color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero-art{max-width:520px;justify-self:center;width:100%}

/* sections */
section{padding:64px 0}
.kicker{display:inline-block;font:700 .9rem var(--font-head);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--sun);padding:4px 12px;border-radius:999px;margin-bottom:12px}
.center{text-align:center}.center .sub{margin:0 auto}
.sub{max-width:60ch;color:var(--ink-soft);font-size:1.1rem}

/* topic cards */
.grid{display:grid;gap:22px;margin-top:32px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:#fff;border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:9px 9px 0 var(--ink)}
.card h3{font-size:1.35rem}
.card p{margin:0;color:var(--ink-soft)}
.icon{width:64px;height:64px;border:var(--border);border-radius:18px;display:grid;place-items:center;margin-bottom:14px}
.icon svg{width:38px;height:38px}
.c1 .icon{background:var(--coral)}.c2 .icon{background:var(--sun)}.c3 .icon{background:var(--sky)}
.c4 .icon{background:var(--peach)}.c5 .icon{background:var(--mint)}.c6 .icon{background:var(--grape)}

/* trust */
.trust{background:var(--cream);border-top:var(--border);border-bottom:var(--border)}
.trust .wrap{display:grid;gap:32px;align-items:center}
.steps{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px;counter-reset:s}
.steps li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:var(--border);border-radius:18px;padding:14px 16px}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:38px;height:38px;border-radius:50%;background:var(--sun);border:var(--border);display:grid;place-items:center;font:700 1.1rem var(--font-head)}
.steps b{font-family:var(--font-head);font-size:1.1rem;display:block}
.trust-art{max-width:360px;justify-self:center;width:100%}

/* facts */
.facts{display:grid;gap:22px;margin-top:32px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.fact{border:var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);position:relative}
.fact:nth-child(1){background:var(--grape)}.fact:nth-child(2){background:var(--peach)}.fact:nth-child(3){background:var(--sky)}
.fact .big{font:700 1.3rem/1.3 var(--font-head);margin-bottom:10px}
.fact .src{font-size:.95rem;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:3px 12px;display:inline-flex;gap:6px;align-items:center}
.fact .src svg{width:16px;height:16px}

/* gallery */
.shots{display:grid;gap:16px;margin-top:32px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.phone{background:var(--ink);border-radius:28px;padding:10px;box-shadow:var(--shadow);margin:0}
.phone img{border-radius:20px;aspect-ratio:9/16;object-fit:cover;width:100%}
.phone figcaption{color:#fff;font:600 .98rem var(--font-head);padding:10px 6px 4px;text-align:center}

/* watch */
.watch{background:var(--ink);color:#fff}
.watch .sub{color:#e9e4da}
.watch .cta{justify-content:center;margin-top:26px}
.watch .btn{color:var(--ink)}.watch .btn.yt{color:#fff}

/* app note + footer */
.note{background:#fff;border:var(--border);border-radius:var(--radius);padding:22px 24px;max-width:780px;margin:0 auto}
footer{border-top:var(--border);background:var(--sun);padding:28px 0;font-size:.98rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{font-weight:700}

/* legal pages */
.page-head{background:var(--sun);border-bottom:var(--border);padding:44px 0 36px;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;opacity:.3;background-image:url("img/doodles.svg");background-size:420px}
.page-head .wrap{position:relative;display:flex;align-items:center;gap:18px}
.page-head img{width:84px;flex:none}
.page-head h1{font-size:clamp(2rem,5vw,3rem);margin:0}
.legal{max-width:820px;margin:0 auto;padding:40px 20px 64px}
.legal .card{margin:0 0 22px}
.legal .card:hover{transform:none;box-shadow:var(--shadow)}
.legal h2{font-size:1.5rem}
.legal li{margin-bottom:.5em}
.legal code{background:var(--cream);padding:1px 6px;border-radius:6px}
.legal a{font-weight:700}
.updated{display:inline-block;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:2px 12px;font-size:.95rem;margin-bottom:22px}

@media (min-width:860px){
  .hero .wrap{grid-template-columns:1.05fr 1fr;padding-top:64px;padding-bottom:72px}
  .trust .wrap{grid-template-columns:1.2fr 1fr}
}
@media (max-width:560px){
  .nav a{padding:6px 10px;font-size:.95rem}
  .brand span,.hide-sm{display:none}
  .phone{border-radius:22px;padding:7px}.phone figcaption{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}