@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Baloo+2:wght@500;700&display=swap');

:root{
  --tangerine:#ff7a59;--tangerine-deep:#e85d3a;
  --sky:#4cc9f0;--sky-deep:#3aa8d8;
  --sun:#ffd23f;--grape:#9b5de5;--grape-deep:#7b3fc4;
  --mint:#7ae582;--rose:#ff8fab;--night:#2b2d6e;
  --cream:#fff8ef;--ink:#2d2a4a;--shadow:rgba(45,42,74,.18);
  --r-lg:32px;--r-md:22px;
  font-size:clamp(16px,1.1vw + 13px,20px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Fredoka',system-ui,sans-serif;color:var(--ink);background:var(--cream);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,210,63,.28), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(76,201,240,.25), transparent 26%),
    radial-gradient(circle at 78% 88%, rgba(155,93,229,.18), transparent 28%),
    radial-gradient(circle at 20% 82%, rgba(122,229,130,.22), transparent 26%);
  min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:'Baloo 2',sans-serif;line-height:1.1;letter-spacing:-.5px}
a{color:inherit;text-decoration:none}

.blob{position:fixed;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none;z-index:0;animation:drift 14s ease-in-out infinite}
.blob.b1{width:90px;height:90px;background:var(--sun);top:14%;left:6%}
.blob.b2{width:60px;height:60px;background:var(--rose);top:70%;left:4%;animation-delay:-3s}
.blob.b3{width:70px;height:70px;background:var(--mint);top:24%;right:7%;animation-delay:-6s}
.blob.b4{width:50px;height:50px;background:var(--sky);top:78%;right:9%;animation-delay:-9s}
@keyframes drift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-26px) scale(1.08)}}

.wrap{max-width:1080px;margin:0 auto;padding:0 5vw;position:relative;z-index:1}

header{padding:1.1rem 0 .4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.55rem;font-family:'Baloo 2';font-weight:700;font-size:1.5rem;color:var(--ink)}
.logo .mark{width:44px;height:44px;flex:none}
nav.top{display:flex;gap:.4rem;flex-wrap:wrap}
nav.top a{background:#fff;padding:.45rem .9rem;border-radius:999px;font-weight:600;font-size:.9rem;
  box-shadow:0 4px 0 var(--shadow);border:2px solid #ffe9dd;transition:transform .12s,box-shadow .12s}
nav.top a:hover,nav.top a:focus-visible{transform:translateY(-2px);box-shadow:0 6px 0 var(--shadow)}
nav.top a:active{transform:translateY(2px);box-shadow:0 1px 0 var(--shadow)}
nav.top a.active{background:var(--sun);border-color:#f0c020}

.btn{border:none;cursor:pointer;font-family:'Baloo 2';font-weight:700;font-size:1.05rem;
  padding:.8rem 1.3rem;border-radius:var(--r-md);display:inline-flex;align-items:center;gap:.5rem;
  transition:transform .12s,box-shadow .12s;color:#fff;min-height:48px}
.btn.primary{background:var(--tangerine);box-shadow:0 6px 0 var(--tangerine-deep)}
.btn.secondary{background:var(--grape);box-shadow:0 6px 0 var(--grape-deep)}
.btn.sky{background:var(--sky);box-shadow:0 6px 0 var(--sky-deep);color:#fff}
.btn.sun{background:var(--sun);box-shadow:0 6px 0 #d9a800;color:var(--ink)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--tangerine-deep)}
.btn.secondary:active{box-shadow:0 2px 0 var(--grape-deep)}
.btn.sky:active{box-shadow:0 2px 0 var(--sky-deep)}
.btn.sun:active{box-shadow:0 2px 0 #d9a800}
.btn[disabled]{opacity:.5;cursor:not-allowed}

footer{text-align:center;padding:2.5rem 0 3rem;font-weight:500}
footer .flinks{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
footer .flinks a{border-bottom:3px solid var(--sun)}
footer small{opacity:.6;display:block;margin-top:.6rem}
.audio-toggle{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:2px solid #ffe9dd;
  border-radius:999px;padding:.4rem .8rem;font-weight:600;font-size:.9rem;cursor:pointer;box-shadow:0 4px 0 var(--shadow);min-height:40px;font-family:inherit;color:var(--ink)}

@media(max-width:760px){
  nav.top{width:100%;justify-content:center}
  nav.top a{padding:.35rem .7rem;font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}