:root{--r:#ff4d6d;--o:#ff9f1c;--y:#ffd60a;--g:#2ec27e;--b:#3a86ff;--p:#8338ec;--pk:#ff70a6}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Fredoka',sans-serif;color:#2b2140;background:#fffaf0;
 background-image:radial-gradient(var(--y) 2px,transparent 2.5px),radial-gradient(var(--pk) 2px,transparent 2.5px);background-size:46px 46px,46px 46px;background-position:0 0,23px 23px}
h1,h2,h3{font-family:'Baloo 2',cursive;margin:.2em 0}
img{max-width:100%;display:block}
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:8px 20px;background:#fff;border-bottom:5px solid transparent;border-image:linear-gradient(90deg,var(--r),var(--o),var(--y),var(--g),var(--b),var(--p)) 1}
.navlogo{height:44px}.links a{margin-left:18px;font-weight:700;text-decoration:none;color:var(--p);font-size:1.1rem}.links a:nth-child(2){color:var(--g)}.links a:nth-child(3){color:var(--r)}
.hero{position:relative;overflow:hidden;text-align:center;padding:40px 16px 50px;background:linear-gradient(135deg,#ffe5ec,#fff3c4 30%,#d8f8e1 55%,#d6e6ff 80%,#eadcff)}
.herologo{width:min(520px,85%);margin:0 auto}
.rainbow{background:linear-gradient(90deg,var(--r),var(--o),var(--g),var(--b),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{font-size:clamp(2.3rem,6vw,4rem);font-weight:800}
.tag{font-size:1.25rem;max-width:640px;margin:0 auto 28px}
.showcase{display:flex;justify-content:center;align-items:flex-end;margin:10px auto 34px;max-width:1100px}
.showcase img{width:19%;border-radius:14px;border:6px solid #fff;box-shadow:0 10px 24px rgba(60,30,90,.25);margin:0 -1.2%;transition:transform .25s}
.s1{transform:rotate(-8deg) translateY(10px)}.s2{transform:rotate(-4deg)}.s3{transform:scale(1.12);z-index:2;position:relative}.s4{transform:rotate(4deg)}.s5{transform:rotate(8deg) translateY(10px)}
.showcase img:hover{transform:scale(1.18) rotate(0);z-index:3;position:relative}
.dood{position:absolute;font-size:2.4rem;opacity:.8}.d1{top:6%;left:6%;color:var(--y)}.d2{top:14%;right:8%;color:var(--pk)}.d3{top:45%;left:3%;color:var(--b)}.d4{bottom:12%;right:5%;color:var(--r)}.d5{bottom:20%;left:10%;color:var(--p)}.d6{top:38%;right:3%;color:var(--g)}
.btn{display:inline-block;padding:11px 22px;border-radius:999px;background:var(--b);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 4px 0 rgba(0,0,0,.18);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}.btn.big{font-size:1.2rem;padding:14px 30px;background:linear-gradient(90deg,var(--r),var(--o))}
.wave{height:22px;background:repeating-linear-gradient(90deg,var(--r) 0 40px,var(--o) 40px 80px,var(--y) 80px 120px,var(--g) 120px 160px,var(--b) 160px 200px,var(--p) 200px 240px)}
.books{padding:50px 18px;max-width:1200px;margin:auto}.books h2,.about h2{text-align:center;font-size:clamp(2rem,5vw,3rem)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:20px}
.card{position:relative;background:#fff;border-radius:24px;padding:16px;border:5px solid;box-shadow:0 8px 0 rgba(0,0,0,.08);display:flex;flex-direction:column}
.card img{border-radius:14px;margin-bottom:12px}.card h3{font-size:1.45rem;line-height:1.15}.card .sub{font-weight:600;opacity:.75;margin:0 0 6px}.card p{margin:.3em 0 .8em}.card .btn{margin-top:auto;text-align:center}
.badge{position:absolute;top:6px;right:6px;padding:6px 14px;border-radius:999px;color:#fff;font-weight:700;transform:rotate(6deg);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.c1{border-color:var(--b)}.c1 .badge,.c1 .btn{background:var(--b)}.c2{border-color:var(--o)}.c2 .badge,.c2 .btn{background:var(--o)}
.c3{border-color:var(--p)}.c3 .badge,.c3 .btn{background:var(--p)}.c4{border-color:var(--g)}.c4 .badge,.c4 .btn{background:var(--g)}.c5{border-color:var(--r)}.c5 .badge,.c5 .btn{background:var(--r)}
.about{padding:20px 18px 50px}.aboutbox{max-width:760px;margin:auto;background:#fff;border:5px dashed var(--pk);border-radius:28px;padding:26px 30px;text-align:center;font-size:1.2rem}
.contact{text-align:center;padding:50px 18px;background:linear-gradient(135deg,var(--p),var(--b));color:#fff}.contact h2{font-size:2.6rem}
footer{text-align:center;padding:18px;background:#2b2140;color:#fff}
@media(max-width:600px){.links a{margin-left:10px;font-size:.95rem}.navlogo{height:34px}.showcase{flex-wrap:wrap;gap:10px}.showcase img{width:30%;margin:0}.s3{transform:none}.dood{font-size:1.6rem}}
.grid{display:flex;flex-wrap:wrap;justify-content:center}.card{flex:0 1 340px}
.badge{top:-16px;right:-10px}
.herologo{filter:drop-shadow(0 2px 1px rgba(22,36,82,.35)) drop-shadow(0 8px 10px rgba(60,30,90,.28)) drop-shadow(0 18px 26px rgba(60,30,90,.18))}
.navlogo{filter:drop-shadow(0 1px 1px rgba(22,36,82,.35)) drop-shadow(0 3px 4px rgba(60,30,90,.22))}
.card h3,.card .sub{text-align:center}
.card h3,.card .sub{text-wrap:balance}
.hero h1{position:relative}.hero h1 .rainbow{position:relative}
.hero h1::before{content:attr(data-text);position:absolute;inset:0;background:none;-webkit-text-fill-color:#8b0000;color:#8b0000;-webkit-text-stroke:7px #8b0000;stroke-linejoin:round}
@media(max-width:600px){.hero h1::before{-webkit-text-stroke-width:5px}}