@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;700;800;900&display=swap');
:root{
  --fuchsia:#e93fd8; --pink:#ff5da2; --purple:#7b2ff7; --grape:#9d4edd;
  --teal:#00b8a9; --teal-lt:#3ee6d8; --yellow:#ffd93d; --ink:#2e2235; --bg:#fdfaff;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Nunito',Verdana,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
h1,h2,h3,.brandname{font-family:'Baloo 2','Fredoka',Verdana,sans-serif}
header{background:#fff;position:sticky;top:0;z-index:10;box-shadow:0 4px 20px rgba(123,47,247,.10)}
.headwrap{max-width:1100px;margin:0 auto;padding:14px 20px 16px;text-align:center}
.brandname{font-size:36px;font-weight:800;color:var(--purple);letter-spacing:.2px}
.brandname .alt{color:var(--fuchsia)}
.brandname .alt2{color:var(--teal)}
.tagline{font-size:16px;color:#7a6f85;font-style:italic}
nav{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
nav a{color:var(--ink);text-decoration:none;padding:8px 17px;border-radius:999px;background:#f3eafd;font-weight:800;font-size:15px;transition:all .15s}
nav a:hover{background:var(--yellow);transform:translateY(-1px)}
nav a.active{background:linear-gradient(90deg,var(--fuchsia),var(--purple));color:#fff;box-shadow:0 4px 12px rgba(233,63,216,.35)}
main{max-width:1100px;margin:0 auto;padding:0 20px 54px}
.hero{position:relative;border-radius:36px;padding:46px 36px 54px;margin:22px 0 0;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--fuchsia) 0%,var(--purple) 52%,var(--teal) 115%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center}
@media(max-width:780px){.hero-grid{grid-template-columns:1fr}}
.cf{position:absolute;z-index:1;display:block}
.cf.c{border-radius:50%}
.cf.s{border-radius:4px}
.cf.star{clip-path:polygon(50% 0%,62% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,38% 35%)}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
.cf{animation:floaty 5s ease-in-out infinite}
.kicker{display:inline-block;background:var(--yellow);color:#4a2b00;font-weight:900;letter-spacing:1.2px;font-size:13px;text-transform:uppercase;padding:7px 15px;border-radius:999px;margin-bottom:14px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.hero h1{font-size:56px;line-height:1.03;margin:0 0 12px;text-shadow:0 3px 0 rgba(0,0,0,.12)}
@media(max-width:780px){.hero h1{font-size:41px}}
.hero p{font-size:20px;margin:8px 0}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 10px}
.badge{background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.65);color:#fff;border-radius:999px;padding:5px 15px;font-weight:900;font-size:14px;backdrop-filter:blur(2px)}
.coverframe{background:#fff;padding:13px;border-radius:26px;box-shadow:0 22px 44px rgba(46,10,80,.35);transform:rotate(-2deg)}
.coverframe img{display:block;width:100%;height:auto;border-radius:16px}
.sticker{position:absolute;z-index:3;background:var(--yellow);color:#4a2b00;font-family:'Baloo 2';font-weight:800;font-size:15px;padding:10px 14px;border-radius:50%;width:104px;height:104px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;transform:rotate(10deg);box-shadow:0 8px 18px rgba(0,0,0,.2);right:26px;top:20px}
@media(max-width:780px){.sticker{display:none}}
.btn{display:inline-block;background:#fff;color:var(--purple);text-decoration:none;padding:14px 28px;border-radius:999px;font-weight:900;font-size:18px;margin:10px 10px 4px 0;box-shadow:0 6px 0 rgba(46,10,80,.35);transition:transform .12s}
.btn:hover{transform:translateY(-2px)}
.btn.yellow{background:var(--yellow);color:#4a2b00}
.btn.green{background:#fff;color:var(--teal);box-shadow:0 6px 0 rgba(46,10,80,.35)}
.btn.blue{background:#fff;color:var(--purple)}
.btn.grape{background:#fff;color:var(--fuchsia)}
.band-teal .btn,.band .btn{box-shadow:0 6px 0 rgba(46,10,80,.3)}
.ribbon{background:var(--purple);color:#fff;overflow:hidden;border-radius:999px;margin:20px 0 4px;padding:9px 0;white-space:nowrap}
.ribbon-inner{display:inline-block;font-family:'Baloo 2';font-weight:700;letter-spacing:2px;font-size:15px;animation:scrollx 26s linear infinite}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
h1.page{font-size:41px;color:var(--purple);margin:32px 0 12px}
h2{font-size:31px;color:var(--purple);margin:12px 0 12px}
h2.center{text-align:center}
p{font-size:18px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{background:#fff;border-radius:24px;padding:22px 16px;text-align:center;box-shadow:0 10px 24px rgba(123,47,247,.10);border:2px solid #f1e7fd}
.tile .dot{width:60px;height:60px;border-radius:20px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:25px;color:#fff;font-family:'Baloo 2';font-weight:800;transform:rotate(-4deg)}
.tile h3{margin:4px 0 6px;font-size:19px;color:var(--ink)}
.tile p{font-size:15px;margin:0;color:#6f6478}
a.tile{display:block;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
a.tile:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(123,47,247,.16)}
.band{border-radius:30px;padding:32px;margin:28px 0;color:#fff;position:relative;overflow:hidden}
.band h2{color:#fff}
.band p{color:#fff}
.band.green{background:linear-gradient(120deg,var(--teal),#0d9488)}
.band.grape{background:linear-gradient(120deg,var(--grape),var(--purple))}
.band:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.35) 3px,transparent 3.6px),radial-gradient(rgba(255,255,255,.22) 3px,transparent 3.6px);background-size:90px 90px,140px 140px;background-position:0 0,40px 50px;pointer-events:none}
.band>*{position:relative;z-index:1}
.confetti{background-image:radial-gradient(var(--fuchsia) 3px,transparent 3.6px),radial-gradient(var(--teal) 3px,transparent 3.6px),radial-gradient(var(--grape) 3px,transparent 3.6px);background-size:90px 90px,120px 120px,150px 150px;background-position:0 0,30px 40px,70px 20px;background-color:#fff3fc;border:3px dashed #f3b8ec;border-radius:26px;padding:28px;margin:26px 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:22px 0}
@media(max-width:780px){.cards{grid-template-columns:1fr}}
.bookcard{background:#fff;border-radius:26px;padding:18px;box-shadow:0 12px 26px rgba(123,47,247,.12);border:2px solid #f1e7fd;text-align:center;transition:transform .15s;position:relative}
.bookcard:hover{transform:translateY(-5px) rotate(-.5deg)}
.bookcard img{width:100%;height:auto;border-radius:14px}
.bookcard h3{margin:12px 0 4px;font-size:21px;color:var(--ink)}
.bookcard .bk{display:inline-block;font-weight:900;color:#fff;font-size:13px;letter-spacing:1px;text-transform:uppercase;padding:4px 13px;border-radius:999px;margin-top:10px}
.bk1{background:var(--fuchsia)}.bk2{background:var(--grape)}.bk3{background:var(--teal)}
.card{background:#fff;border:2px solid #f1e7fd;border-radius:24px;padding:25px;margin:20px 0;box-shadow:0 10px 22px rgba(123,47,247,.08)}
.card.red{border-color:#ffb1e9}.card.green{border-color:#a7f0e6}.card.blue{border-color:#d9c2ff}.card.yellow{border-color:#ffe89a}
.peek{display:block;max-width:660px;width:100%;height:auto;border-radius:20px;margin:14px auto;border:6px solid #fff;box-shadow:0 14px 30px rgba(123,47,247,.18)}
ul{font-size:18px;padding-left:22px}
li{margin:7px 0}
.small{font-size:15px;color:#7a6f85}
footer{background:#2a1650;color:#e9defc;padding:32px 20px;text-align:center;font-size:16px}
footer .fbrand{font-family:'Baloo 2';font-weight:800;font-size:25px;color:#fff;margin-bottom:6px}
footer a{color:var(--yellow)}