html { scroll-behavior: smooth; }
body { background: var(--cream); }

.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: calc(env(safe-area-inset-top) + 10px);
  background: rgba(255, 246, 217, 0.92); backdrop-filter: blur(8px);
}
.nav-links { flex: 1; display: flex; justify-content: flex-end; gap: 4px; }
.nav-links a { text-decoration: none; font-weight: 800; padding: 8px 10px; border-radius: 12px; }
.nav-links a:hover { background: var(--cream-2); }
.nav-cta { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-d); white-space: nowrap; }
.nav-cta:hover { background: var(--red) !important; }
.round { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 1.1rem; box-shadow: inset 0 0 0 2px var(--cream-2); flex: none; }
@media (max-width: 560px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav .brand img { height: 30px; }
}
@media (max-width: 380px) {
  .nav { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .nav .brand img { height: 24px; }
  .nav-links a.nav-cta { padding: 8px 8px; }
}

/* Hero */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 12px;
  max-width: 1120px; margin: 0 auto; padding: 32px 20px 48px;
}
.confetti {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle, var(--red) 5px, transparent 6px) 8% 18% / 100% 100% no-repeat,
    radial-gradient(circle, var(--blue) 4px, transparent 5px) 92% 12% / 100% 100% no-repeat,
    radial-gradient(circle, var(--green) 6px, transparent 7px) 85% 78% / 100% 100% no-repeat,
    radial-gradient(circle, var(--yellow) 5px, transparent 6px) 46% 6% / 100% 100% no-repeat,
    radial-gradient(circle, var(--blue) 3px, transparent 4px) 4% 70% / 100% 100% no-repeat;
}
.hero > :not(.confetti) { position: relative; z-index: 1; }
.kicker { font-weight: 800; color: var(--blue); margin: 0 0 14px; }
.tiles { display: flex; gap: 10px; margin-bottom: 10px; }
.tiles .t {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 20px;
  color: #fff; font-size: 56px; line-height: 1;
  animation: drop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}
.tiles .t.narrow { width: 66px; }
.tiles .t.red { background: var(--red); box-shadow: 0 7px 0 var(--red-d); transform: rotate(-4deg); }
.tiles .t.blue { background: var(--blue); box-shadow: 0 7px 0 var(--blue-d); animation-delay: 0.12s; }
.tiles .t:last-child { transform: rotate(3deg); animation-delay: 0.24s; }
@keyframes drop { from { transform: translateY(-80px) rotate(-20deg); opacity: 0; } }
.pinyin { margin: 6px 0 14px; font-family: var(--f-head); font-size: 1.2rem; color: var(--yellow-d); }
.pinyin b { color: #9a6a00; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 0.3em; }
.lead { font-size: 1.15rem; line-height: 1.5; max-width: 34em; margin: 0 0 22px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-cat { position: relative; aspect-ratio: 1 / 1; max-height: 520px; }
#catCanvas { width: 100%; height: 100%; display: block; cursor: pointer; touch-action: manipulation; }
.cat-bubble {
  position: absolute; left: 6%; right: 6%; top: 2%;
  background: #fff; border-radius: 22px; padding: 12px 16px; text-align: center;
  font-family: var(--f-head); font-size: 1.15rem; line-height: 1.35;
  box-shadow: 0 5px 0 rgba(30, 42, 94, 0.15); animation: pop 0.25s ease-out;
}
.cat-bubble::after {
  content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -12px;
  border: 12px solid transparent; border-bottom: 0; border-top-color: #fff;
}
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 18px; text-align: left; }
  .hero-cat { order: -1; max-width: 360px; width: 100%; justify-self: center; aspect-ratio: 1.15 / 1; }
  .tiles .t { width: 74px; height: 74px; font-size: 44px; }
  .tiles .t.narrow { width: 54px; }
}

/* Sections */
.band { max-width: 1120px; margin: 0 auto; padding: 48px 20px; }
.band.cream { background: var(--paper); border-radius: 36px; max-width: 1160px; }
.band > h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); text-align: center; }
.sub { text-align: center; font-size: 1.05rem; max-width: 40em; margin: 0 auto 28px; line-height: 1.5; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.step { background: #fff; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border-top: 8px solid var(--c); }
.step .num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 1.3rem; margin-bottom: 10px; }
.step p { margin: 0; line-height: 1.5; }
.parent-note { text-align: center; font-weight: 800; color: var(--purple); margin-top: 24px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

.demos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.demo { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.demo img { width: 120px; border-radius: 8px; box-shadow: 0 2px 8px rgba(30, 42, 94, 0.2); }
.demo .zh { color: var(--blue); font-weight: 500; }
.demo p { margin: 0 0 12px; line-height: 1.45; }
.demo-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.demo .big-btn { min-height: 46px; font-size: 1rem; padding: 0 1.1em; }
@media (max-width: 760px) { .demos { grid-template-columns: 1fr; } }

.series { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.jilid { position: relative; background: #fff; border-radius: var(--radius); padding: 20px 18px 18px; box-shadow: var(--shadow); }
.jilid-tag {
  display: inline-grid; place-items: center; width: 58px; height: 62px; border-radius: 14px; margin-bottom: 10px;
  background: var(--c); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 1.8rem; line-height: 1;
  transform: rotate(-4deg); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}
.jilid-tag small { font-size: 0.6rem; letter-spacing: 0.1em; }
.jilid p { line-height: 1.45; margin: 0 0 12px; }
.price { font-family: var(--f-head); font-size: 1.3rem; color: var(--red); }
.price small { display: block; font-family: var(--f-body); font-size: 0.85rem; color: var(--navy); }
.badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; }
.badge.preorder { background: var(--red); color: #fff; }
.badge.soon { background: var(--cream-2); color: var(--navy); }
@media (max-width: 900px) { .series { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .series { grid-template-columns: 1fr; } }

.aixin { display: flex; gap: 20px; align-items: center; background: #fff; border-radius: 36px; box-shadow: var(--shadow); max-width: 900px; margin-top: 12px; }
.aixin .jar { flex: none; display: grid; place-items: center; width: 96px; height: 110px; border-radius: 18px 18px 26px 26px; border: 5px solid #9CCFE8; color: var(--red); font-size: 2.4rem; background: linear-gradient(transparent 55%, #FBC94A 55%); }
.aixin p { margin: 0; line-height: 1.55; }

.order { text-align: center; }
.countdown { display: flex; justify-content: center; gap: 10px; margin: 18px 0; }
.cd { width: 78px; padding: 10px 0; border-radius: 16px; background: var(--c); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18); }
.cd b { display: block; font-family: var(--f-head); font-size: 2rem; line-height: 1; }
.cd small { font-weight: 800; }

.foot { text-align: center; padding: 36px 20px calc(env(safe-area-inset-bottom) + 36px); }
.foot-logo { height: 90px; width: auto; margin: 0 auto 10px; display: block; }
.foot p { margin: 6px 0; }

.nav .lang { display: flex; background: #fff; border-radius: 14px; padding: 3px; box-shadow: inset 0 0 0 2px var(--cream-2); flex: none; }
.nav .lang button { border: 0; background: none; padding: 6px 9px; border-radius: 11px; font-weight: 800; font-size: 0.85rem; color: var(--navy); }
.nav .lang button.on { background: var(--blue); color: #fff; }