/* Buni website — bright picture-book look, built for mums reading on a phone. */
:root{
  --ink:#2a1052; --ink2:#5b4a7a; --paper:#fffaf3; --card:#ffffff; --line:#efe6f7;
  --violet:#7c3aed; --violet-d:#5b21b6; --pink:#ec4899; --sun:#fbbf24; --mint:#10b981; --sky:#38bdf8; --peach:#fb923c;
  --hero:linear-gradient(135deg,#ff9ad5 0%,#c084fc 48%,#7dd3fc 100%);
  --shadow:0 10px 0 #2a105214, 0 18px 40px #2a10521a;
  --r:28px; --wrap:1120px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;color:var(--ink);background:var(--paper);font-size:18px;line-height:1.6;overflow-x:hidden}
h1,h2,h3,.brand,.btn,.big-letter{font-family:'Baloo 2','Nunito',system-ui,sans-serif;line-height:1.1;font-weight:800}
h1{font-size:clamp(40px,7.5vw,76px);letter-spacing:-.01em}
h2{font-size:clamp(30px,5vw,46px);margin-bottom:14px}
h3{font-size:24px;margin-bottom:6px}
p{max-width:62ch}
a{color:var(--violet)}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:4px solid var(--sun);outline-offset:3px;border-radius:12px}

/* header */
.top{position:sticky;top:0;z-index:20;background:#fffaf3e6;backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-size:30px;color:var(--ink);text-decoration:none}
.brand .pup{width:44px;height:44px}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:800;padding:8px 14px;border-radius:14px}
.nav a:hover{background:#f3e8ff}
.nav .btn{padding:10px 18px;font-size:18px;color:#fff}
.nav .btn:hover{background:var(--violet)}
@media (max-width:720px){.nav a:not(.btn){display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;text-decoration:none;font-size:22px;padding:14px 26px;border-radius:20px;
  background:var(--violet);color:#fff;box-shadow:0 6px 0 var(--violet-d);transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--violet-d)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--violet-d)}
.btn.sun{background:var(--sun);color:var(--ink);box-shadow:0 6px 0 #d97706}
.btn.white{background:#fff;color:var(--violet);box-shadow:0 6px 0 #2a105226}
.btn.pink{background:var(--pink);box-shadow:0 6px 0 #be185d}
.btn.small{font-size:18px;padding:10px 18px;border-radius:16px}

/* hero */
.hero{background:var(--hero);color:#fff;position:relative;overflow:hidden;padding:56px 0 90px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:70px;background:var(--paper);clip-path:ellipse(70% 100% at 50% 100%)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;position:relative;z-index:1}
.hero h1{text-shadow:0 4px 0 #2a105233}
.hero .lead{font-size:clamp(19px,2.4vw,23px);margin:18px 0 26px;font-weight:700}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.badge{background:#ffffff33;border:2px solid #ffffff66;padding:6px 14px;border-radius:999px;font-size:15px;font-weight:800}
.hero .pup-big{width:min(100%,420px);margin:auto;filter:drop-shadow(0 18px 0 #2a105226);animation:bob 3.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(-2deg)}}
.floaty{position:absolute;font-family:'Baloo 2';font-weight:800;color:#ffffff59;font-size:90px;pointer-events:none;animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-24px) rotate(8deg)}}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr;text-align:center}.hero .cta,.hero .badges{justify-content:center}.hero p{margin-inline:auto}.hero .pup-big{width:230px}}

/* sections */
section.block{padding:70px 0}
.kicker{display:inline-block;font-weight:900;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.center{text-align:center}.center p{margin-inline:auto}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}
@media (max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);border:2px solid var(--line)}
.card .ico{font-size:44px;width:76px;height:76px;display:grid;place-items:center;border-radius:24px;margin-bottom:14px}
.c1 .ico{background:#fce7f3}.c2 .ico{background:#ede9fe}.c3 .ico{background:#dcfce7}.c4 .ico{background:#fef3c7}.c5 .ico{background:#e0f2fe}.c6 .ico{background:#ffedd5}
.card p{color:var(--ink2)}
.step-n{font-family:'Baloo 2';font-weight:800;font-size:20px;background:var(--violet);color:#fff;width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;margin-bottom:10px}

/* alphabet tiles */
.abc{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px;margin-top:28px}
.tile{position:relative;aspect-ratio:1;border-radius:26px;display:grid;place-items:center;text-decoration:none;color:#fff;font-family:'Baloo 2';font-weight:800;font-size:56px;
  box-shadow:0 7px 0 #2a105222;transition:transform .15s}
.tile:hover{transform:translateY(-4px) rotate(-3deg)}
.tile small{position:absolute;bottom:8px;font-family:'Nunito';font-size:13px;font-weight:800;opacity:.9}
.tile.soon{background:#efe6f7 !important;color:#b9a8d0;box-shadow:none;cursor:default}
.tile.soon:hover{transform:none}
.tile svg{width:70%;height:70%}
.t0{background:#f472b6}.t1{background:#a78bfa}.t2{background:#38bdf8}.t3{background:#34d399}.t4{background:#fbbf24}.t5{background:#fb923c}

/* letter page */
.crumbs{font-size:15px;color:var(--ink2);padding:18px 0 0}
.crumbs a{color:var(--ink2)}
.lhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;padding:24px 0 10px}
@media (max-width:860px){.lhero{grid-template-columns:1fr}}
.board{position:relative;background:var(--hero);border-radius:40px;aspect-ratio:1;box-shadow:var(--shadow);overflow:hidden;display:grid;place-items:center}
.board::before{content:"";position:absolute;inset:7%;border-radius:30px;background:#fff;box-shadow:inset 0 0 0 3px #ffffff}
.board .lines{position:absolute;inset:7%;border-radius:30px;background:repeating-linear-gradient(#fff 0 calc(25% - 2px),#f3e8ff calc(25% - 2px) 25%)}
.board svg.write{position:relative;width:78%;height:78%;overflow:visible}
.board .actions{position:absolute;bottom:4%;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:2}
.write .ghost{fill:none;stroke:#efe6f7;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.write .ink{fill:none;stroke:var(--violet);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.write .dot circle{fill:var(--mint)}
.write .dot text{fill:#fff;font:800 8px 'Nunito';text-anchor:middle;dominant-baseline:central}
.write .pencil{font-size:16px}
.ltext h1 .big-letter{display:inline-block;color:var(--pink)}
.ltext .lead{font-size:21px;margin:12px 0 20px;color:var(--ink2)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{background:#f3e8ff;color:var(--violet-d);padding:6px 14px;border-radius:999px;font-weight:800;font-size:15px}
.soundbox{display:flex;gap:16px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:24px;padding:16px 18px;box-shadow:var(--shadow)}
.soundbox p{font-size:17px}
.play{flex:none;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;background:var(--pink);color:#fff;font-size:26px;box-shadow:0 5px 0 #be185d;display:grid;place-items:center}
.play:active{transform:translateY(3px);box-shadow:0 2px 0 #be185d}
.play.on{animation:pulse .6s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}

.steps{counter-reset:s;list-style:none;display:grid;gap:12px;margin-top:16px}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:20px;padding:14px 16px;border:2px solid var(--line)}
.steps li::before{content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;background:var(--mint);color:#fff;font:800 18px 'Baloo 2';display:grid;place-items:center}

.words{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:22px}
.word{border:0;cursor:pointer;background:#fff;border-radius:24px;padding:18px 10px 14px;box-shadow:var(--shadow);text-align:center;font:800 21px 'Baloo 2';color:var(--ink);transition:transform .15s;border:2px solid var(--line)}
.word .e{font-size:56px;display:block;line-height:1.1;margin-bottom:6px}
.word b{color:var(--pink)}
.word:hover{transform:translateY(-4px) rotate(-2deg)}
.word.on{transform:scale(1.06);border-color:var(--pink)}

/* mini game */
.game{background:linear-gradient(135deg,#fef3c7,#fce7f3);border-radius:40px;padding:34px 24px;text-align:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.game h2{margin-bottom:4px}
.bubbles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-width:640px;margin:24px auto 18px}
@media (max-width:560px){.bubbles{grid-template-columns:repeat(4,1fr)}}
.bub{aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;font:800 clamp(28px,6vw,42px) 'Baloo 2';color:#fff;box-shadow:0 6px 0 #2a105226, inset 0 -6px 0 #0000001a;transition:transform .15s}
.bub:hover{transform:scale(1.07)}
.bub.ok{animation:pop .45s forwards}
.bub.no{animation:shake .4s}
@keyframes pop{40%{transform:scale(1.3)}100%{transform:scale(0);opacity:0}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.game .score{font:800 22px 'Baloo 2'}
.game .win{display:none;margin-top:12px}
.game.won .win{display:block}
.confetti{position:absolute;font-size:28px;pointer-events:none;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(420px) rotate(540deg);opacity:0}}

/* riddle, tips, worksheets */
.riddle{background:var(--violet);color:#fff;border-radius:34px;padding:30px;box-shadow:var(--shadow)}
.riddle blockquote{font:800 clamp(22px,3vw,28px)/1.35 'Baloo 2';margin:10px 0 16px}
.riddle details summary{cursor:pointer;font-weight:800;display:inline-block;background:#ffffff33;padding:8px 16px;border-radius:14px}
.riddle details[open] summary{margin-bottom:10px}
.riddle .ans{font:800 26px 'Baloo 2'}
.tips{display:grid;gap:14px;margin-top:18px}
.tips li{list-style:none;background:#fff;border-left:8px solid var(--sun);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow)}
.sheets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
@media (max-width:760px){.sheets{grid-template-columns:1fr}}
.sheet{background:#fff;border-radius:24px;padding:18px;border:2px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.sheet .pv{aspect-ratio:210/297;background:#fbf7ff;border-radius:14px;margin-bottom:12px;display:grid;place-items:center;border:2px dashed #e4d4f7}
.sheet .pv svg{width:70%}
.sheet b{font:800 20px 'Baloo 2';display:block}

/* CTA band */
.band{background:var(--hero);color:#fff;border-radius:40px;padding:40px 30px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;box-shadow:var(--shadow)}
.band .pup{width:130px}
.band p{font-size:19px;font-weight:700}
@media (max-width:820px){.band{grid-template-columns:1fr;text-align:center}.band .pup{margin:auto}}

/* prev/next */
.pn{display:flex;justify-content:space-between;gap:12px;margin-top:40px}
.pn a{flex:1;max-width:280px;text-decoration:none;background:#fff;border:2px solid var(--line);border-radius:22px;padding:14px 18px;color:var(--ink);font-weight:800;box-shadow:var(--shadow)}
.pn a.next{text-align:right;margin-left:auto}
.pn a span{display:block;font:800 34px 'Baloo 2';color:var(--violet)}

/* faq */
.faq{display:grid;gap:12px;margin-top:20px}
.faq details{background:#fff;border-radius:20px;padding:16px 20px;border:2px solid var(--line)}
.faq summary{cursor:pointer;font-weight:800;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font:800 26px/1 'Baloo 2';color:var(--violet)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--ink2)}

/* story */
.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center}
.story .photo{aspect-ratio:1;border-radius:40px;background:linear-gradient(135deg,#fde68a,#f9a8d4);display:grid;place-items:center;font-size:130px;box-shadow:var(--shadow);transform:rotate(-3deg)}
@media (max-width:820px){.story{grid-template-columns:1fr}.story .photo{max-width:300px;margin:auto}}

/* footer */
footer{margin-top:80px;background:var(--ink);color:#e9ddff;padding:46px 0 30px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
footer a{color:#fff;text-decoration:none;display:block;padding:3px 0}
footer h4{font:800 20px 'Baloo 2';margin-bottom:8px;color:#fff}
footer .fine{grid-column:1/-1;border-top:1px solid #ffffff22;padding-top:18px;font-size:14px;opacity:.75}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* pup */
.pup .tail{transform-origin:146px 150px;animation:wag .6s ease-in-out infinite alternate}
@keyframes wag{to{transform:rotate(14deg)}}
.pup .eyes-closed,.pup .zzz{display:none}
.pup .zzz{font:800 30px 'Baloo 2';fill:#fff}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* worksheet previews (and the sheets themselves) */
svg .solid{fill:none;stroke:#7c3aed;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
svg .dash,svg .pv-dash{fill:none;stroke:#9ca3af;stroke-width:4;stroke-dasharray:1 7;stroke-linecap:round;stroke-linejoin:round}
svg .pv-dash{stroke:#a78bfa;stroke-width:6}
svg .sd circle{fill:#10b981}
svg .sd text{fill:#fff;font:800 8px Nunito,sans-serif;text-anchor:middle;dominant-baseline:central}
svg .out,svg .pv-out{fill:none;stroke:#222;stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
svg .pv-out{stroke:#7c3aed}
svg .in,svg .pv-in{fill:none;stroke:#fff;stroke-width:17;stroke-linecap:round;stroke-linejoin:round}
.riddle{display:flex;flex-direction:column;justify-content:center}
/* digits: counting */
.count{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;background:#fff;border:2px solid var(--line);border-radius:28px;padding:20px 22px;box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--ink);width:100%;text-align:left}
.count .e{font-size:clamp(40px,7vw,58px);line-height:1;animation:popin .4s both}
.count b{margin-left:auto;font:800 64px/1 'Baloo 2';color:var(--pink)}
@keyframes popin{from{transform:scale(0)}}
/* parent guides */
.guide h2{margin-top:34px}.guide p,.guide li{font-size:19px;max-width:none;margin-top:12px}.guide ul,.guide ol{padding-left:24px}.guide h1{font-size:clamp(34px,5.5vw,54px);margin:6px 0 10px}