/* =========================================================
   牙齿小宇宙 · 首页样式
   ========================================================= */
.home { display: flow-root; }
@supports (overflow: clip) {
  .home { overflow-x: clip; }
}

/* ---------------- Hero ---------------- */
.hero {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(22px, 4vw, 52px) 0 clamp(8px, 1.6vw, 18px);
}
.hero__copy { position: relative; z-index: 2; }
.hero__title {
  margin-top: 18px;
  font-family: var(--font-round);
  font-size: clamp(34px, 4.7vw, 62px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -.015em;
}
.hero__hl {
  position: relative;
  display: inline-block;
  padding: 0 .08em;
  color: var(--coral-deep);
  background: linear-gradient(transparent 64%, rgba(255, 201, 77, .55) 64%, rgba(255, 201, 77, .55) 92%, transparent 92%);
  border-radius: 6px;
  white-space: nowrap;
}
.hero__hl::after {
  content: "✦";
  position: absolute;
  top: -.28em;
  right: -.42em;
  font-size: .34em;
  color: var(--sun);
  transform: rotate(14deg);
}
.hero__lede {
  margin-top: 18px;
  max-width: 30em;
  font-size: clamp(14.5px, 1.3vw, 17px);
  line-height: 1.8;
  color: var(--ink-soft);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero__chips .pill { background: rgba(255, 255, 255, .78); border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(87, 62, 38, .04); }

.hero__stage {
  position: relative;
  min-height: clamp(380px, 38vw, 520px);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero__halo {
  position: absolute;
  width: min(430px, 88%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(250, 240, 216, .95) 0%, rgba(243, 224, 186, .62) 44%, rgba(157, 31, 45, .08) 70%, transparent 76%);
  filter: blur(2px);
  z-index: 0;
}
.hero__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(176, 132, 96, .42);
  z-index: 0;
}
.hero__ring--1 { width: min(430px, 88%); aspect-ratio: 1; animation: spin-slow 70s linear infinite; }
.hero__ring--2 { width: min(520px, 104%); aspect-ratio: 1; border-color: rgba(176, 132, 96, .22); animation: spin-slow 110s linear infinite reverse; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.hero__mascot {
  position: relative;
  z-index: 2;
  width: min(310px, 58%);
  animation: mascot-bob 6s ease-in-out infinite;
  filter: drop-shadow(0 26px 30px rgba(120, 60, 55, .16));
  will-change: transform;
}
.hero__mascot svg { width: 100%; height: auto; }
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1.4deg); }
}

.hero__brush {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: 7%;
  width: clamp(52px, 6.5vw, 80px);
  transform: rotate(20deg);
  animation: brush-float 5.4s ease-in-out infinite;
  filter: drop-shadow(0 12px 16px rgba(120, 60, 55, .14));
}
@keyframes brush-float {
  0%, 100% { transform: rotate(20deg) translateY(0); }
  50% { transform: rotate(15deg) translateY(-10px); }
}

.hero__float {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 10px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(61, 48, 33, .07);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(110, 74, 40, .13);
  line-height: 1.22;
  animation: floaty 6s ease-in-out infinite;
  white-space: nowrap;
}
.hero__float-emoji {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--bg-soft);
  font-size: 17px;
}
.hero__float strong { display: block; font-size: 13.5px; font-weight: 800; }
.hero__float small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-faint); }
.hero__float--a { top: 13%; left: -1%; animation-delay: -.8s; }
.hero__float--b { top: 36%; right: -2%; animation-delay: -2.4s; }
.hero__float--c { bottom: 13%; left: 6%; animation-delay: -4s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.hero__spark { position: absolute; z-index: 3; color: var(--sun); animation: twinkle 3.4s ease-in-out infinite; }
.hero__spark--1 { top: 9%; right: 22%; font-size: 22px; }
.hero__spark--2 { bottom: 24%; right: 14%; font-size: 15px; color: var(--coral); animation-delay: -1.2s; }
.hero__spark--3 { top: 30%; left: 8%; font-size: 18px; color: var(--teal); animation-delay: -2s; }
@keyframes twinkle {
  0%, 100% { opacity: .35; transform: scale(.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}

/* ---------------- 首页分区 ---------------- */
.home-section { margin-top: clamp(44px, 6.4vw, 84px); }
.home-section__badge { background: rgba(255, 255, 255, .72); border: 1px solid var(--line); }

/* ---------------- 玩法卡片 ---------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 22px);
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s;
}
.feature-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-2); border-color: rgba(61, 48, 33, .14); }
.feature-card:active { transform: translateY(-2px) scale(.995); }
.feature-card__art {
  position: relative;
  height: clamp(148px, 14vw, 180px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.feature-card__art svg { width: min(88%, 250px); height: auto; }
.feature-card--sandbox .feature-card__art { background: linear-gradient(135deg, #FDF1EA, #F8E2E3); }
.feature-card--brushing .feature-card__art { background: linear-gradient(135deg, #F7F2E4, #EFE6D1); }
.feature-card--learn .feature-card__art { background: linear-gradient(135deg, #EEF4EE, #E2EDE5); }
.feature-card__body { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.feature-card__tag {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
.feature-card--sandbox .feature-card__tag { background: var(--coral-soft); color: var(--coral-deep); }
.feature-card--brushing .feature-card__tag { background: var(--teal-soft); color: var(--teal-deep); }
.feature-card--learn .feature-card__tag { background: var(--sun-soft); color: var(--brand-gold-deep); }
.feature-card__title {
  margin-top: 10px;
  font-family: var(--font-round);
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 800;
}
.feature-card__desc { margin-top: 6px; font-size: 13.5px; line-height: 1.72; color: var(--ink-soft); }
.feature-card__link {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.feature-card__link span { transition: transform .22s var(--ease-spring); }
.feature-card:hover .feature-card__link span { transform: translateX(4px); }
.feature-card--sandbox .feature-card__link { color: var(--coral-deep); }
.feature-card--brushing .feature-card__link { color: var(--teal-deep); }
.feature-card--learn .feature-card__link { color: var(--brand-gold-deep); }

/* ---------------- 奖章护照 ---------------- */
.passport-block__count { background: var(--sun-soft); color: #96700B; border: 1px solid rgba(224, 162, 30, .2); white-space: nowrap; flex-shrink: 0; }
.passport-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.8vw, 18px);
}
.passport-card {
  position: relative;
  padding: 20px;
  background: rgba(255, 255, 255, .62);
  border: 1.5px dashed rgba(61, 48, 33, .18);
  border-radius: var(--radius-lg);
  transition: transform .26s var(--ease-out), box-shadow .26s, background .26s;
}
.passport-card__seal {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: 1.5px dashed rgba(61, 48, 33, .2);
  font-size: 21px;
  filter: grayscale(1);
  opacity: .55;
}
.passport-card__name { margin-top: 12px; font-weight: 800; font-size: 15.5px; }
.passport-card__desc { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.passport-card__status {
  margin-top: 12px;
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-faint);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(61, 48, 33, .05);
}
.passport-card.is-earned {
  background: linear-gradient(150deg, #FFFBEC, #FFF1CE);
  border: 1.5px solid rgba(224, 162, 30, .34);
  box-shadow: 0 12px 30px rgba(199, 146, 31, .13);
}
.passport-card.is-earned .passport-card__seal {
  filter: none;
  opacity: 1;
  border-color: rgba(224, 162, 30, .4);
  background: #fff;
  transform: rotate(-6deg);
}
.passport-card.is-earned .passport-card__status { background: rgba(31, 182, 166, .13); color: var(--teal-deep); }
.passport-block__hint { margin-top: 12px; font-size: 12px; color: var(--ink-faint); }
.passport-block.is-complete .passport-block__count { background: var(--teal-soft); color: var(--teal-deep); }

/* ---------------- 家长专区 ---------------- */
.parent-band__card {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr .78fr;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(24px, 4vw, 46px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(760px 360px at 90% -20%, rgba(200, 162, 74, .26), transparent 60%),
    radial-gradient(500px 300px at -10% 120%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(140deg, #5C0910, #7C1420 55%, #8C000D);
  color: #FFF9F2;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.parent-band__copy { position: relative; z-index: 2; }
.parent-band__copy .pill { background: rgba(255, 249, 242, .1); color: #F5E3BE; border: 1px solid rgba(255, 249, 242, .18); }
.parent-band__title {
  margin-top: 16px;
  font-family: var(--font-round);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.32;
  font-weight: 800;
  letter-spacing: .01em;
}
.parent-tips { margin-top: 22px; display: grid; gap: 16px; }
.parent-tips li { display: flex; gap: 14px; align-items: flex-start; }
.parent-tips__num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(200, 162, 74, .18);
  border: 1px solid rgba(200, 162, 74, .38);
  color: #F0D49A;
  font-size: 12px;
  font-weight: 800;
  font-family: ui-monospace, monospace;
  letter-spacing: .02em;
}
.parent-tips strong { display: block; font-size: 15px; font-weight: 800; color: #FFF9F2; }
.parent-tips p { margin-top: 3px; font-size: 12.5px; line-height: 1.66; color: rgba(255, 249, 242, .7); }

.parent-band__qr { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.qr-card {
  width: 100%;
  max-width: 240px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: #FFFDF8;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .22);
}
.qr-card__code {
  width: 142px; height: 142px;
  margin: 0 auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
}
.qr-card__code svg { width: 100% !important; height: auto !important; }
.qr-card__fallback { font-size: 12px; color: var(--ink-faint); }
.qr-card__title { margin-top: 12px; font-size: 13.5px; font-weight: 800; }
.qr-card__sub { margin-top: 2px; font-size: 11px; color: var(--ink-faint); }
.qr-card .btn { width: 100%; margin-top: 12px; }
.qr-card .text-link { margin-top: 2px; font-size: 12px; color: var(--ink-soft); justify-content: center; width: 100%; }

/* ---------------- 医院信息 ---------------- */
.hospital-band { position: relative; }
.hospital-band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.hospital-band__kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: var(--brand-red-2); }
.hospital-band__title {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.9vw, 34px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .015em;
}
.hospital-band__sub { margin-top: 8px; max-width: 820px; font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.hospital-band__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(14px, 2vw, 22px); }
.hospital-card {
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  background: var(--card);
}
.hospital-card--intro { background: linear-gradient(155deg, #FFFDFA 0%, #FBF2E4 100%); border-color: rgba(200, 162, 74, .3); }
.hospital-card--visit { background: #FFFDFA; }
.hospital-card h3 { font-family: var(--font-serif); font-size: clamp(19px, 2vw, 24px); font-weight: 700; letter-spacing: .01em; }
.hospital-motto { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--brand-gold-deep); }
.hospital-card__desc { margin-top: 10px; font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); }
.hospital-points { margin-top: 14px; display: grid; gap: 8px; }
.hospital-points li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.65; color: var(--ink-soft); }
.hospital-points li::before { content: "◆"; position: absolute; left: 0; top: 1px; font-size: 9px; color: var(--brand-gold); }
.hospital-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hospital-actions .btn { min-height: 42px; padding: 0 18px; font-size: 13.5px; }
.hospital-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hospital-card__top .text-link { min-height: 28px; font-size: 12.5px; }
.hospital-locations { margin-top: 14px; display: grid; gap: 8px; }
.hospital-locations li {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 12px;
}
.hospital-locations strong { color: var(--brand-red-2); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.hospital-locations span { color: var(--ink-soft); line-height: 1.45; }
.hospital-locations a { color: var(--ink); font-weight: 700; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hospital-locations a:hover { color: var(--brand-red-2); }
.hospital-note { margin-top: 12px; font-size: 11.5px; line-height: 1.7; color: var(--ink-faint); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; gap: 10px; padding-top: 26px; }
  .hero__copy { text-align: left; }
  .hero__title { font-size: clamp(34px, 5.6vw, 48px); }
  .hero__stage { min-height: 400px; margin-top: -6px; }
  .hero__mascot { width: min(270px, 46%); }
  .hero__halo { width: min(400px, 76%); }
  .hero__ring--1 { width: min(390px, 74%); }
  .hero__ring--2 { width: min(470px, 88%); }
  .hero__float--a { left: 6%; }
  .hero__float--b { right: 5%; }
  .hero__float--c { left: 16%; }
  .parent-band__card { grid-template-columns: 1fr; gap: 26px; }
  .parent-band__qr { justify-content: flex-start; }
  .qr-card { max-width: 260px; }
  .hospital-band__grid { grid-template-columns: 1fr; }
  .hospital-band__head { align-items: flex-start; flex-direction: column; }
  .hospital-band__head .text-link { min-height: 32px; }
}
@media (max-width: 760px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card__art { height: 156px; }
  .passport-strip { grid-template-columns: 1fr; }
  .passport-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 15px 16px; }
  .passport-card__seal { grid-row: span 2; margin: 0; }
  .passport-card__name { margin: 0; align-self: end; }
  .passport-card__desc { margin: 0; align-self: start; grid-column: 2; }
  .passport-card__status { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .home-section__badge { display: none; }
  .section-head { align-items: flex-start; }
}
@media (max-width: 639px) {
  .hospital-band__title { font-size: 22px; }
  .hospital-locations li { grid-template-columns: 76px minmax(0, 1fr); }
  .hospital-locations a { grid-column: 2; font-size: 12.5px; }
  .hospital-actions .btn { flex: 1 1 auto; }
  .hero { padding-top: 18px; }
  .hero__title { font-size: clamp(30px, 8.6vw, 38px); }
  .hero__hl { white-space: normal; }
  .hero__lede { font-size: 14px; line-height: 1.75; margin-top: 14px; }
  .hero__cta { margin-top: 20px; gap: 10px; }
  .hero__cta .btn { flex: 1; min-width: 0; padding: 0 18px; font-size: 15px; }
  .btn--lg { min-height: 50px; }
  .hero__chips { margin-top: 18px; gap: 6px; }
  .hero__chips .pill { font-size: 11.5px; padding: 5px 10px; }
  .hero__stage { min-height: 320px; }
  .hero__mascot { width: min(220px, 52%); }
  .hero__halo { width: min(310px, 84%); }
  .hero__ring--1 { width: min(310px, 84%); }
  .hero__ring--2 { width: min(370px, 98%); }
  .hero__brush { width: 46px; right: 9%; bottom: 6%; }
  .hero__float { padding: 7px 10px; border-radius: 14px; gap: 6px; }
  .hero__float-emoji { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; }
  .hero__float strong { font-size: 11.5px; }
  .hero__float small { font-size: 9.5px; }
  .hero__float--a { top: 8%; left: 0; }
  .hero__float--b { top: 31%; right: 0; }
  .hero__float--c { bottom: 5%; left: 4%; }
  .home-section { margin-top: 42px; }
  .parent-band__title br { display: none; }
  .parent-band__card { padding: 22px 18px; }
  .qr-card { max-width: none; display: grid; grid-template-columns: 96px 1fr; gap: 4px 14px; text-align: left; align-items: center; padding: 14px; }
  .qr-card__code { width: 96px; height: 96px; grid-row: span 4; margin: 0; }
  .qr-card__title { margin-top: 0; align-self: end; }
  .qr-card__sub { align-self: start; }
  .qr-card .btn { margin-top: 6px; grid-column: 2; }
  .qr-card .text-link { display: none; }
  .feature-card__body { padding: 16px 18px 20px; }
}