:root { --ink: #36334d; --pink: #ff7b91; --cream: #fffaf1; --yellow: #ffd76b; --mint: #9ee3cc; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Nunito, sans-serif; }
.hero { min-height: 620px; overflow: hidden; position: relative; text-align: center; padding: 74px 24px 160px; background: linear-gradient(180deg,#bff0f1 0%,#dbf8e8 70%,#fff5d5 100%); }
.eyebrow { margin: 0 0 9px; color: #54877d; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.eyebrow span { color: #ff8095; }
h1,h2,h3 { font-family: "Baloo 2", sans-serif; margin: 0; line-height: .92; } h1 { font-size: clamp(3.6rem,9vw,6.8rem); font-weight: 800; letter-spacing: -.045em; } h1 span { color: var(--pink); }
.intro { max-width: 450px; margin: 24px auto; font-size: 1.08rem; font-weight: 700; line-height: 1.55; }.jump-link { display: inline-flex; gap: 9px; align-items: center; padding: 13px 20px; border: 3px solid var(--ink); border-radius: 99px; box-shadow: 0 4px 0 var(--ink); background: #fffdf8; color: var(--ink); font-weight: 800; text-decoration: none; transition: transform .2s, box-shadow .2s; }.jump-link:hover { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.cloud { position:absolute; background:#fffdf7; border-radius:50px; opacity:.92; }.cloud:before,.cloud:after { content:""; position:absolute; border-radius:50%; background:inherit; }.cloud:before { width:48px;height:48px;left:17px;top:-22px }.cloud:after { width:34px;height:34px;right:16px;top:-13px }.cloud-one { width:120px;height:29px;top:120px;left:9%; }.cloud-two { width:90px;height:22px;top:220px;right:8%; transform:scale(.7); }
.sparkle { position:absolute; color:#fff; font-size:2rem; animation: twinkle 2s ease-in-out infinite alternate; }.sparkle-one { top:90px;right:17%; }.sparkle-two { top:280px;left:13%; animation-delay:.8s; }.mascot { position:absolute;width:105px;height:100px;bottom:77px;left:calc(50% + 250px); z-index:2; }.face { position:absolute;inset:10px 0 0;background:#ffb56b;border:4px solid var(--ink);border-radius:52% 52% 44% 44%; }.ear { position:absolute;width:34px;height:43px;background:#ffb56b;border:4px solid var(--ink);border-radius:80% 20% 60% 30%;top:0; }.ear-left { left:3px;transform:rotate(-25deg) }.ear-right { right:3px;transform:scaleX(-1) rotate(-25deg) }.eye { position:absolute;width:9px;height:14px;background:var(--ink);border-radius:50%;top:39px }.eye.left { left:31px }.eye.right { right:31px }.smile { position:absolute;width:21px;height:11px;border-bottom:3px solid var(--ink);border-radius:50%;left:38px;top:57px }
.hill { position:absolute; border-radius:50% 50% 0 0; bottom:0; }.hill-back { width:800px;height:145px;background:#9bdc9e;left:calc(50% - 330px); }.hill-front { width:900px;height:105px;background:#70c982;left:calc(50% - 500px); }
.games { max-width:1120px; padding:70px 24px 90px; margin:auto; }.section-heading { display:flex;align-items:end;justify-content:space-between;margin-bottom:30px }.section-heading h2 { font-size:clamp(2.8rem,5vw,4.2rem); }.flower { font-size:3rem;color:#ff9a9a; }.game-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px; }.game-card { overflow:hidden;border:3px solid var(--ink);border-radius:27px;background:#fff;box-shadow:0 7px 0 var(--ink);animation:pop .5s both;animation-delay:var(--delay); }.art { position:relative;height:180px;display:grid;place-items:center;overflow:hidden;background:#ffd2bf; }.art:before,.art:after { content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.42) }.art:before { width:180px;height:180px;left:-43px;bottom:-100px }.art:after { width:100px;height:100px;right:-17px;top:-30px }.art-icon { z-index:1;font-size:5.3rem;filter:drop-shadow(0 5px 0 rgba(54,51,77,.15)); }.art-shape { position:absolute;width:62px;height:15px;background:#f59f82;border-radius:50%;bottom:27px; }.card-content { padding:20px 21px 23px; }.tag { display:inline-block;padding:4px 10px;border-radius:99px;background:#ffe9a7;color:#8a6923;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em }.game-card h3 { margin:12px 0 8px;font-size:2rem; }.game-card p { min-height:46px;margin:0 0 18px;font-weight:700;line-height:1.35 }.play-button { display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-weight:900;text-decoration:none }.play-button span { display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--yellow);font-size:1.2rem }.game-card:hover { transform:translateY(-4px);box-shadow:0 11px 0 var(--ink) }.game-card:hover .art-icon { transform:rotate(-8deg) scale(1.08) }
footer { display:flex;justify-content:space-between;gap:20px;padding:25px max(24px,calc((100vw - 1072px)/2));background:#403c58;color:#fff9ed;font-size:.9rem;font-weight:700 } footer b { color:#ff8fa1; } @keyframes twinkle { to { transform:scale(1.3) rotate(20deg);opacity:.65 } } @keyframes pop { from { transform:translateY(16px);opacity:0 } to { transform:translateY(0);opacity:1 } } @media (max-width:700px) { .hero { min-height:580px;padding-top:70px }.mascot { left:auto;right:8%;bottom:72px;transform:scale(.75);transform-origin:bottom right }.cloud-one{left:-20px}.sparkle-one{right:8%} footer { flex-direction:column;text-align:center;align-items:center }.games{padding-top:55px} }