/* ---------- Landing page (Pop Sticker) ---------- */
.site-header { border-bottom-color: transparent; }
.hero { position: relative; background: var(--sky); border-bottom: var(--line); padding: 34px 0 110px; overflow: hidden; isolation: isolate; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hero-copy { flex: 1 1 480px; min-width: 0; }
.badge { display: inline-block; padding: 8px 16px; background: var(--white); border: var(--line-thin); border-radius: 999px; font-weight: 900; font-size: .9rem; box-shadow: var(--pop-sm); }
.hero h1 { font-size: clamp(2.7rem, 6vw, 4.9rem); line-height: 1.04; letter-spacing: -.025em; margin: 26px 0 18px; }
html.ui-zh .hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.5rem); line-height: 1.2; letter-spacing: 0; }
.hero h1 .mark { animation: wobble 4s ease-in-out 1.2s infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg) scale(1.03); } }
.lead { font-size: 1.18rem; line-height: 1.65; max-width: 560px; margin: 0 0 26px; font-weight: 700; }
.pick-label { font-weight: 900; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.lang-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.lang-pill { font-weight: 900; font-size: 1rem; padding: 9px 16px; min-height: 46px; border-radius: 14px; border: var(--line-thin); background: var(--white); box-shadow: var(--pop-sm); cursor: pointer; transition: transform .25s var(--spring), box-shadow .2s, background .2s, color .2s; }
.lang-pill:hover { transform: translate(-2px, -2px) rotate(-2deg); box-shadow: 5px 5px 0 var(--ink); }
.lang-pill.on { background: var(--ink); color: var(--white); box-shadow: 3px 3px 0 var(--sun); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-cta.center { justify-content: center; }

.hero-glyphs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.glyph { position: absolute; font-family: 'Fredoka', 'Noto Sans SC', sans-serif; font-weight: 700; color: var(--white); -webkit-text-stroke: 2px var(--ink); opacity: 0; animation: drift var(--dur) ease-in-out var(--delay) infinite; }
@keyframes drift {
  0% { opacity: 0; transform: translate3d(0, 40px, 0) rotate(var(--r0)); }
  15%, 85% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(var(--dx), -160px, 0) rotate(var(--r1)); }
}

/* demo card */
.demo { position: relative; flex: 1 1 440px; min-width: 0; }
.demo-card { background: var(--white); border: var(--line); border-radius: 30px; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; transition: transform .5s var(--spring); }
.demo:hover .demo-card { transform: rotate(-1.5deg) translateY(-4px); }
.demo-top { background: var(--ink); color: var(--white); padding: 20px 22px; display: flex; align-items: center; gap: 14px; }
.demo-play { width: 48px; height: 48px; border-radius: 50%; background: var(--sky); color: var(--ink); display: grid; place-items: center; flex: none; border: 2px solid var(--white); }
.demo-play svg { width: 20px; height: 20px; margin-left: 2px; }
.demo-meta { flex: 1; min-width: 0; font-weight: 900; font-size: .95rem; }
.demo-bar { height: 8px; background: #2a4b6e; border-radius: 8px; margin-top: 8px; overflow: hidden; }
.demo-bar span { display: block; height: 100%; width: 0; background: var(--sun); border-radius: 8px; }
.eq { display: flex; gap: 4px; align-items: flex-end; height: 28px; }
.eq i { width: 5px; border-radius: 3px; background: var(--sky); animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s } .eq i:nth-child(3) { animation-delay: -.6s } .eq i:nth-child(4) { animation-delay: -.15s } .eq i:nth-child(5) { animation-delay: -.45s }
@keyframes eq { 0%, 100% { height: 6px; } 50% { height: 26px; } }
.demo-body { padding: 22px 24px 26px; }
.demo-dots { opacity: .35; font-weight: 900; font-size: 1.1rem; margin-bottom: 10px; }
.demo-line { background: var(--sky-soft); border: var(--line-thin); border-radius: 18px; padding: 16px 20px; }
.demo-line.swap { animation: lineIn .55s var(--spring); }
@keyframes lineIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.dl-orig { font-family: 'Noto Sans SC', 'Nunito', sans-serif; font-size: 1.7rem; font-weight: 900; line-height: 1.35; }
.dl-orig .hlw { background: var(--sun); border-radius: 8px; padding: 0 4px; display: inline-block; animation: pop .6s var(--spring) .35s both; }
@keyframes pop { from { transform: scale(.6) rotate(-6deg); } }
.dl-rom { color: var(--sky-deep); font-weight: 800; margin-top: 4px; }
.dl-tr { font-weight: 700; margin-top: 6px; }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (max-width: 480px) { .demo-grid { grid-template-columns: 1fr; } }
.demo-box { border: var(--line-thin); border-radius: 16px; padding: 14px 16px; }
.demo-box.sun { background: var(--sun-soft); }
.demo-box.peach { background: var(--peach); }
.db-label { font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.db-big { font-family: 'Noto Sans SC', 'Nunito', sans-serif; font-size: 1.35rem; font-weight: 900; margin-top: 2px; }
.db-sub { font-size: .85rem; font-weight: 800; color: var(--sky-deep); }
.db-text { font-weight: 700; font-size: .93rem; line-height: 1.5; margin-top: 4px; }
.sticker { position: absolute; display: grid; place-items: center; border: var(--line); border-radius: 50%; font-family: 'Fredoka', 'Noto Sans SC', sans-serif; font-weight: 700; box-shadow: var(--pop-sm); animation: bob 5s ease-in-out infinite; }
.sticker.s1 { width: 76px; height: 76px; background: var(--sun); top: -30px; right: -14px; font-size: 1.1rem; }
.sticker.s2 { width: 62px; height: 62px; background: var(--peach); bottom: -26px; left: -20px; font-size: 1.6rem; animation-delay: -1.6s; }
.sticker.s3 { width: 52px; height: 52px; background: var(--white); bottom: 40%; right: -26px; font-size: 1.3rem; animation-delay: -3.2s; }
@media (max-width: 960px) { .sticker.s3 { display: none; } .sticker.s1 { right: 6px; } .sticker.s2 { left: 6px; } }

/* hello band */
.band { background: var(--ink); color: var(--white); padding: 22px 0; overflow: hidden; border-bottom: var(--line); }
.band-track { display: flex; gap: 46px; width: max-content; animation: marquee 36s linear infinite; font-family: 'Fredoka', 'Noto Sans SC', sans-serif; font-size: 2rem; font-weight: 600; }
.band-track span:nth-child(3n+2) { color: var(--sky); }
.band-track span:nth-child(3n) { color: var(--sun); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* sections */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.section-head h2, .streak h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.section-head p, .streak p { font-size: 1.1rem; font-weight: 700; color: var(--ink-2); }
.why { padding: 96px 0 30px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; }
.feature { background: var(--bg); border: var(--line); border-radius: 26px; padding: 30px; box-shadow: 6px 6px 0 var(--ink); transition: transform .35s var(--spring), box-shadow .3s; }
.feature.in:hover { transform: translate(-4px, -6px) rotate(0deg); box-shadow: 10px 12px 0 var(--ink); }
.f-num { font-family: 'Fredoka', 'Noto Sans SC', sans-serif; font-size: 2.6rem; font-weight: 700; line-height: 1.1; }
.feature h3 { font-size: 1.55rem; margin: 10px 0 8px; }
.feature p { margin: 0; font-weight: 700; line-height: 1.65; }

.how { padding: 90px 0; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } .steps-path { display: none; } }
.steps-path { position: absolute; top: 8px; left: 0; width: 100%; height: 120px; overflow: visible; }
.steps-path path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 14; stroke-dashoffset: var(--dash, 1400); transition: stroke-dashoffset 2.2s var(--ease); }
.step { position: relative; z-index: 1; text-align: center; }
.step .num { display: grid; place-items: center; width: 82px; height: 82px; margin: 18px auto 20px; border-radius: 50%; background: var(--sun); border: var(--line); font-family: 'Fredoka', sans-serif; font-size: 2.1rem; font-weight: 700; box-shadow: var(--pop); transition: transform .5s var(--spring); }
.step:nth-child(3) .num { background: var(--sky); }
.step:nth-child(4) .num { background: var(--peach); }
.step:hover .num { transform: scale(1.12) rotate(-10deg); }
.step h3 { font-size: 1.5rem; }
.step p { max-width: 300px; margin: 0 auto; font-weight: 700; color: var(--ink-2); }

.streak { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding: 60px 0 80px; }
.streak > * { flex: 1 1 420px; min-width: 0; }
.week { padding: 28px; }
.week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .82rem; font-weight: 900; }
.day .cell { width: 100%; aspect-ratio: 1; border-radius: 14px; background: var(--cream); border: 2px dashed var(--ink-3); display: grid; place-items: center; transition: .5s var(--spring); }
.day .cell svg { width: 55%; height: 55%; transform: scale(0) rotate(-40deg); transition: transform .5s var(--spring); }
.day.done .cell { background: var(--sky); border: var(--line-thin); box-shadow: var(--pop-sm); transform: rotate(-4deg); }
.day.done:nth-child(even) .cell { background: var(--sun); transform: rotate(4deg); }
.day.done .cell svg { transform: scale(1); }
.week-caption { margin-top: 22px; display: flex; align-items: center; gap: 12px; font-weight: 900; }

.quote { text-align: center; padding: 50px 0 70px; }
.quote p { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.3; font-weight: 700; max-width: 950px; margin: 0 auto 18px; }
.quote > span { font-weight: 900; color: var(--ink-3); }

.cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 76px 30px; border-radius: 40px; background: var(--sky); border: var(--line); box-shadow: 12px 12px 0 var(--ink); }
.cta h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
.cta p { font-size: 1.15rem; font-weight: 800; margin: 0 auto 30px; max-width: 620px; }
.cta-bubbles { position: absolute; inset: 0; z-index: -1; }
.bubble { position: absolute; bottom: -70px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); animation: rise var(--dur) linear var(--delay) infinite; }
.bubble:nth-child(3n) { background: var(--sun); }
@keyframes rise { to { transform: translate(var(--dx), -620px) rotate(180deg); } }