/* cheerful defaults (yellow & blue split) */
:root{--yellow:#ffd54a;--blue:#5ec0ff;--accent:#ff6b6b;--card:#fff}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial}
.stage{min-height:100vh;display:flex;flex-direction:column}
.sky{position:fixed;inset:0;z-index:-2;display:block;background:linear-gradient(90deg,var(--yellow) 50%, var(--blue) 50%)}
.sun{position:absolute;right:12%;top:6%;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff7c2,#ffd54a);box-shadow:0 8px 30px rgba(255,200,0,0.25)}
.rainbow{position:absolute;left:6%;top:6%;width:240px;height:120px;border-radius:120px 120px 0 0;background:conic-gradient(#ffb3c6,#ffd54a,#9be7ff);opacity:0.85;transform:rotate(-12deg)}
.cloud{position:absolute;background:#fff;border-radius:50%;filter:blur(6px);opacity:0.9}
.cloud.c1{width:160px;height:60px;left:10%;top:18%}
.cloud.c2{width:120px;height:48px;left:50%;top:12%}
.cloud.c3{width:180px;height:68px;left:72%;top:22%}

.hero{padding:120px 24px 24px 24px;text-align:center}
.hero h1{font-size:clamp(28px,5vw,48px);margin:0}
.hero .tag{opacity:0.9}
.countdown{margin-top:12px;font-weight:700}

.mascot{position:fixed;right:6%;bottom:12%;width:120px;height:120px;pointer-events:none;transition:transform 300ms cubic-bezier(.2,.9,.2,1);z-index:10}
.mascot img{width:100%;height:100%;display:block}

.catalog{padding:24px;max-width:1100px;margin:0 auto}
.catalog h2{text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:16px}
.card{background:var(--card);border-radius:12px;padding:18px;text-align:center;box-shadow:0 8px 24px rgba(15,23,42,0.06);transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 18px 40px rgba(15,23,42,0.12)}
.card .icon{font-size:36px;margin-bottom:8px}

.foot{padding:24px;text-align:center;opacity:0.8}

@media (max-width:600px){
  .mascot{width:86px;height:86px;right:4%;bottom:6%}
  .sun{width:72px;height:72px}
}

a{color:inherit}
