/* ═══════════════════════════════════════
   DESIGN TOKENS
   Modern Vivid: White + Coral + Plum
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Outfit:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&display=swap');

:root {
  /* colors */
  --white:          #FFFFFF;
  --off-white:      #FAFAFA;
  --warm-gray:      #F5F3F0;
  --coral:          #E8634A;
  --coral-deep:     #C9472F;
  --coral-soft:     #F4A898;
  --coral-pale:     #FFF0EC;
  --plum:           #6B3FA0;
  --plum-deep:      #4E2D78;
  --plum-soft:      #A87DD8;
  --plum-pale:      #F3EEFA;
  --ink:            #1A1A1A;
  --ink-mid:        #3A3A3A;
  --ink-soft:       #666666;
  --ink-muted:      #999999;
  --border:         rgba(26,26,26,0.07);
  --border-strong:  rgba(26,26,26,0.13);

  /* typography */
  --font-zh:        'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body:      'Outfit', sans-serif;
  --font-display:   'Fraunces', Georgia, serif;

  /* layout */
  --max-w:          1140px;
  --nav-h:          60px;
  --gap:            clamp(1.25rem, 4vw, 4rem);
  --section-pad:    clamp(3rem, 7vw, 6rem);
  --radius-sm:      5px;
  --radius-md:      8px;
  --radius-lg:      10px;
}

/* ── RESETS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── I18N: language toggle ── */
[data-lang="en"] .zh-only { display: none !important; }
[data-lang="zh"] .en-only { display: none !important; }

.t-zh { font-family: var(--font-zh); }

[data-lang="zh"] h1, [data-lang="zh"] h2, [data-lang="zh"] h3,
[data-lang="zh"] p, [data-lang="zh"] .nav-links a,
[data-lang="zh"] .svc-title, [data-lang="zh"] .svc-desc,
[data-lang="zh"] .pathway-title, [data-lang="zh"] .pathway-desc,
[data-lang="zh"] .faq-q, [data-lang="zh"] .faq-a,
[data-lang="zh"] .price-note {
  font-family: var(--font-zh);
}

/* ── ENTRANCE ANIMATIONS ── */
@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    opacity: 0;
    transform: translateY(14px);
    animation: fadeUp 0.55s ease forwards;
  }
  .fade-in.d1 { animation-delay: 0.08s; }
  .fade-in.d2 { animation-delay: 0.16s; }
  .fade-in.d3 { animation-delay: 0.24s; }
  .fade-in.d4 { animation-delay: 0.32s; }
  .fade-in.d5 { animation-delay: 0.40s; }

  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }
}