/* ═══════════════════════════════════════
   ASTERI ACADEMIC CONSULTING
   Design: Swiss Grid + Brutalist Accents
   Palette: Deep Blue / White / Yellow / Red
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root {
  --blue: #0B1F3A;
  --blue-light: #132D52;
  --blue-dark: #061220;
  --white: #F5F5F0;
  --white-pure: #FFFFFF;
  --yellow: #FFD23F;
  --yellow-light: #FFE680;
  --red: #FF4D2E;
  --red-light: #FF7A63;
  --gray: #8899AA;
  --gray-light: #AABBCC;
  --gray-dark: #445566;
  --border: 2px solid var(--white);
  --border-thick: 4px solid var(--white);
  --radius: 0px;
  --radius-sm: 2px;
  --font-en: 'Inter', system-ui, sans-serif;
  --font-zh: 'Noto Sans SC', 'Inter', system-ui, sans-serif;
  --gap: clamp(1rem, 4vw, 4rem);
  --section-pad: clamp(4rem, 10vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-en);
  background: var(--blue);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.lang-zh { font-family: var(--font-zh); }

/* ── Typography ── */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.kicker {
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--yellow);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.section-title {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  margin-bottom: 1rem;
}
.section-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--gray-light);
  max-width: 36rem;
}

/* ── Layout Helpers ── */
.container { width: min(90%, 1200px); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.section-header { margin-bottom: var(--gap); }

/* ── Brutalist Divider ── */
.divider {
  width: 4rem;
  height: 4px;
  background: var(--yellow);
  margin: 1rem 0 2rem;
}
.divider--center { margin-inline: auto; }

/* ═══════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  background: rgba(11, 31, 58, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: padding 0.3s;
}
.nav--scrolled { padding: 0.75rem 0; }
.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(90%, 1200px);
  margin-inline: auto;
}
.nav__logo {
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--white);
  text-decoration: none;
}
.nav__logo span { color: var(--yellow); }
.nav__links {
  display: flex;
  gap: 2rem;
  align-items: center;
  list-style: none;
}
.nav__links a {
  color: var(--gray-light);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: color 0.2s;
  text-transform: uppercase;
}
.nav__links a:hover { color: var(--white); }
.nav__lang {
  background: none;
  border: var(--border);
  border-color: var(--gray-dark);
  color: var(--white);
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}
.nav__lang:hover { border-color: var(--white); background: rgba(255,255,255,0.05); }
.nav__mobile { display: none; background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; }
.nav__links--open {
  display: flex !important;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  flex-direction: column;
  background: rgba(11,31,58,0.98);
  padding: 1.5rem 2rem;
  gap: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════
   HERO
   ═══════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 4rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80vw;
  height: 200vh;
  background: radial-gradient(ellipse at center, rgba(255,210,63,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: center;
}
.hero__content { position: relative; z-index: 2; }
.hero__kicker {
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--yellow);
  margin-bottom: 1.5rem;
}
.hero__title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 1.5rem;
}
.hero__title .line2 {
  display: block;
  position: relative;
  left: 0.5em;
}
.hero__title em {
  font-style: normal;
  color: var(--yellow);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--yellow);
  margin-left: -0.05em;
}
.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--gray-light);
  max-width: 28rem;
  margin-bottom: 2.5rem;
}
.hero__cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 0.85rem 2rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
}
.btn--primary {
  background: var(--yellow);
  color: var(--blue-dark);
}
.btn--primary:hover { background: var(--yellow-light); transform: translateY(-2px); }
.btn--outline {
  background: transparent;
  color: var(--white);
  border: var(--border);
}
.btn--outline:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.btn--submit {
  background: var(--white);
  color: var(--blue-dark);
  width: 100%;
  padding: 1rem;
  font-size: 0.85rem;
}
.btn--submit:hover { background: var(--yellow); }

.hero__visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__illustration {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1;
}

/* ═══════════════════════════════════════
   SERVICES CARDS
   ═══════════════════════════════════════ */
.services { position: relative; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: var(--gap);
}
.service-card {
  background: var(--blue-light);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 2.5rem 2rem;
  position: relative;
  transition: all 0.3s;
  /* brutalist: strong border on hover */
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--yellow);
  box-shadow: 8px 8px 0 rgba(255,210,63,0.15);
}
.service-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.5rem;
  color: var(--yellow);
}
.service-card__en {
  font-family: var(--font-en);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.service-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.service-card__desc {
  font-size: 0.95rem;
  color: var(--gray-light);
  margin-bottom: 1.25rem;
  line-height: 1.7;
}
.service-card__points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.service-card__points li {
  font-size: 0.85rem;
  color: var(--gray);
  padding-left: 1.25rem;
  position: relative;
}
.service-card__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  background: var(--yellow);
}

/* ═══════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════ */
.process { background: var(--blue-dark); }
.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: var(--gap);
  border: var(--border);
  border-color: rgba(255,255,255,0.1);
}
.process-step {
  background: var(--blue);
  padding: 2.5rem 2rem;
  position: relative;
  transition: background 0.3s;
}
.process-step:hover { background: var(--blue-light); }
.process-step__num {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 900;
  color: var(--yellow);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.process-step__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.process-step__desc {
  font-size: 0.9rem;
  color: var(--gray-light);
}

/* ═══════════════════════════════════════
   WHY US
   ═══════════════════════════════════════ */
.why { position: relative; }
.why__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: var(--gap) 0;
  border: var(--border);
  border-color: rgba(255,255,255,0.08);
}
.stat {
  background: var(--blue-light);
  padding: 2.5rem 2rem;
  text-align: center;
}
.stat__num {
  font-family: var(--font-en);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat__label {
  font-size: 0.9rem;
  color: var(--gray-light);
}
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: var(--gap);
}
.why-item__title {
  font-family: var(--font-en);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--yellow);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.why-item__title::before {
  content: '';
  width: 12px;
  height: 2px;
  background: var(--yellow);
}
.why-item__heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.why-item__desc {
  font-size: 0.95rem;
  color: var(--gray-light);
}

/* ═══════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════ */
.contact { background: var(--blue-dark); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: var(--gap);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--gray-light);
}
.form-group input,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--white);
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--yellow);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  padding-left: 2rem;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.contact-info__item h4 {
  font-family: var(--font-en);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--gray);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.contact-info__item p {
  font-size: 1rem;
  color: var(--gray-light);
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 3rem 0;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: min(90%, 1200px);
  margin-inline: auto;
}
.footer__tagline {
  font-size: 0.9rem;
  color: var(--gray);
}
.footer__copy {
  font-size: 0.8rem;
  color: var(--gray-dark);
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__mobile { display: block; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { display: none; }
  .services__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; }
  .contact-info { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding-left: 0; padding-top: 2rem; }
  .why__grid { grid-template-columns: 1fr; }
  .why__stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .process__grid { grid-template-columns: 1fr; }
  .why__stats { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; }
  .hero__title { font-size: clamp(2rem, 10vw, 3.5rem); }
  .footer__inner { flex-direction: column; text-align: center; }
}

/* ── Fade-in Animation ── */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════
   MULTI-PAGE ROUTER
   ═══════════════════════════════════════ */
.page { display: none; }
.page--active { display: block; }
.nav__links a.active { color: var(--yellow); }

/* ═══════════════════════════════════════
   PAGE HERO (inner pages)
   ═══════════════════════════════════════ */
.page-hero {
  padding-top: 8rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.page-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}
.page-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--gray-light);
  max-width: 42rem;
}
.page-lede {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: var(--white);
  max-width: 46rem;
  line-height: 1.5;
  border-left: 4px solid var(--yellow);
  padding-left: 1.5rem;
}

/* prose */
.prose { max-width: 46rem; }
.prose p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--gray-light);
  margin-bottom: 1.25rem;
}
.prose p:first-child {
  color: var(--white);
  font-size: 1.15rem;
}
.prose--story { max-width: 48rem; margin-inline: auto; }

/* section alt + cta row */
.section--alt { background: var(--blue-dark); }
.cta-row { margin-top: 2.5rem; display: flex; justify-content: flex-start; }

/* ═══════════════════════════════════════
   PILLAR CARDS (home overview)
   ═══════════════════════════════════════ */
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: var(--gap);
}
.pillar-card {
  background: var(--blue-light);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 2rem 1.5rem;
  text-decoration: none;
  color: var(--white);
  transition: all 0.3s;
  display: block;
}
.pillar-card:hover { transform: translateY(-4px); border-color: var(--yellow); }
.pillar-card__num {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 900;
  color: var(--yellow);
  opacity: 0.35;
  margin-bottom: 0.75rem;
}
.pillar-card__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.pillar-card__desc { font-size: 0.85rem; color: var(--gray-light); line-height: 1.6; }

/* pillar links (services overview) */
.pillars__grid--link { grid-template-columns: 1fr; }
.pillar-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.5rem;
  padding: 2rem 1.5rem;
  background: var(--blue-light);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: var(--white);
  transition: all 0.3s;
}
.pillar-link:hover { border-color: var(--yellow); }
.pillar-link__title { font-size: 1.5rem; font-weight: 700; }
.pillar-link__desc { font-size: 0.95rem; color: var(--gray-light); grid-column: 1 / -1; }
.pillar-link__arrow { font-size: 1.5rem; color: var(--yellow); grid-row: 1; grid-column: 2; align-self: center; }

/* ═══════════════════════════════════════
   TIMELINE (home pathway overview)
   ═══════════════════════════════════════ */
.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: var(--gap);
}
.timeline-step {
  background: var(--blue-light);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 1.5rem 1.25rem;
}
.timeline-step__num {
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 900;
  color: var(--yellow);
  margin-bottom: 0.5rem;
}
.timeline-step__label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.25rem;
}
.timeline-step__title { font-size: 1rem; font-weight: 700; }

/* ═══════════════════════════════════════
   EARLY NOTE + STAGE LIST (pathway page)
   ═══════════════════════════════════════ */
.early-note { max-width: 46rem; }
.early-note__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--yellow);
}
.stage-list { display: flex; flex-direction: column; gap: 2rem; }
.stage {
  background: var(--blue-light);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 2.5rem 2rem;
}
.stage__head {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.stage__num {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 900;
  color: var(--yellow);
  opacity: 0.4;
  line-height: 1;
}
.stage__meta { flex: 1; }
.stage__label {
  font-family: var(--font-en);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.25rem;
}
.stage__title { font-size: 1.75rem; font-weight: 700; }
.stage__body p {
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--gray-light);
  margin-bottom: 1rem;
}
.stage__body p:first-child { color: var(--white); }
.stage__pillars {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--yellow);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════
   FOUNDERS (about page)
   ═══════════════════════════════════════ */
.founders { display: flex; flex-direction: column; gap: 3rem; }
.founder {
  background: var(--blue-light);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 3rem 2.5rem;
}
.founder__name { font-size: 2rem; font-weight: 900; margin-bottom: 0.25rem; }
.founder__role {
  font-family: var(--font-en);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 1.5rem;
}
.founder__body p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray-light);
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════
   RESPONSIVE (multi-page additions)
   ═══════════════════════════════════════ */
@media (max-width: 900px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: 1fr; }
  .page-hero { padding-top: 6rem; }
}
@media (max-width: 600px) {
  .pillars__grid { grid-template-columns: 1fr; }
  .stage__head { flex-direction: column; gap: 0.5rem; }
}

/* ============================================================
   双语言双风格 (Dual-language, dual-style)
   中文版：信息密集、字号偏大、行距更宽（中文阅读习惯）
   英文版：留白更大、节奏更疏、字号对比更强（编辑式阅读）
   依据：中文段落需更大字号与行距（字形复杂）；东亚用户偏密集信息布局，
        欧美用户偏留白与简洁。共用一套代码，仅切 body.lang-zh / lang-en。
   ============================================================ */

/* ── 变量层 ── */
body.lang-zh {
  --lang-line-height: 1.9;
  --lang-section-pad: clamp(4.5rem, 9vw, 7rem);
  --lang-grid-gap: clamp(1rem, 2.2vw, 1.5rem);
  --lang-hero-size: clamp(2.8rem, 7vw, 5.2rem);
  --lang-page-title: clamp(2.2rem, 5.4vw, 4rem);
  --lang-section-title: clamp(1.8rem, 5.2vw, 3.4rem);
  --lang-tracking: 0;
  --lang-container: 1240px;
}
body.lang-en {
  --lang-line-height: 1.75;
  --lang-section-pad: clamp(6.5rem, 14vw, 11rem);
  --lang-grid-gap: clamp(1.6rem, 3.6vw, 3rem);
  --lang-hero-size: clamp(3.2rem, 9vw, 7rem);
  --lang-page-title: clamp(2.6rem, 7vw, 5.2rem);
  --lang-section-title: clamp(2.2rem, 6.4vw, 4.4rem);
  --lang-tracking: -0.01em;
  --lang-container: 1080px;
}

/* ── 应用到规则 ── */
body[class*="lang-"] { line-height: var(--lang-line-height); }
body[class*="lang-"] .container { width: min(90%, var(--lang-container)); }
body[class*="lang-"] .section { padding-block: var(--lang-section-pad); }
body[class*="lang-"] .hero__title {
  font-size: var(--lang-hero-size);
  letter-spacing: var(--lang-tracking);
}
body[class*="lang-"] .page-hero h1,
body[class*="lang-"] .page-title { font-size: var(--lang-page-title); }
body[class*="lang-"] .section-title { font-size: var(--lang-section-title); }
body[class*="lang-"] .pillars__grid { gap: var(--lang-grid-gap); }
body[class*="lang-"] p,
body[class*="lang-"] li { line-height: var(--lang-line-height); letter-spacing: var(--lang-tracking); }

/* 英文版：段落间距更疏、标题与正文对比更强（编辑式） */
body.lang-en .section-header { margin-bottom: calc(var(--gap) * 1.25); }
body.lang-en p + p { margin-top: 1.4em; }

/* 中文版：段落更紧凑，信息密度更高 */
body.lang-zh .section-header { margin-bottom: calc(var(--gap) * 0.85); }

/* ── 移动端：避免中英字号设定在手机上过大 ── */
@media (max-width: 600px) {
  body.lang-zh { --lang-hero-size: clamp(2rem, 9vw, 2.8rem); --lang-section-pad: 3.5rem; }
  body.lang-en { --lang-hero-size: clamp(2.2rem, 10vw, 3.2rem); --lang-section-pad: 5rem; }
}


/* ============================================================
   Stack Photos —— 扇形照片墙（首页 Hero）
   默认：扇形完全展开，四张全部可见
   悬停：该张放大到约 50% 屏幕宽，位置不变、浮在最上层
   定位用 margin-left（按容器百分比），保证放大时中心点不漂移
   ============================================================ */
.photo-stack {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 5 / 4;
  margin-inline: auto;
}
.photo-stack__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: 3 / 4;
  margin: 0;
  border: 2px solid var(--white);
  background: var(--blue-dark);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
  overflow: hidden;
  cursor: zoom-in;
  transition: width .45s cubic-bezier(.2, .8, .2, 1),
              transform .45s cubic-bezier(.2, .8, .2, 1),
              box-shadow .45s ease,
              border-color .45s ease;
  will-change: width, transform;
}
.photo-stack__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 默认扇形：margin-left 为容器百分比 → 放大时中心不移动 */
.photo-stack__item:nth-child(1) { margin-left: -27%; transform: translate(-50%, -50%) rotate(-13deg); z-index: 1; }
.photo-stack__item:nth-child(2) { margin-left:  -9%; transform: translate(-50%, -50%) rotate(-4deg);  z-index: 2; }
.photo-stack__item:nth-child(3) { margin-left:   9%; transform: translate(-50%, -50%) rotate(5deg);   z-index: 3; }
.photo-stack__item:nth-child(4) { margin-left:  27%; transform: translate(-50%, -50%) rotate(13deg);  z-index: 4; }

/* 悬停 / 键盘聚焦：放大到约 50% 屏幕宽，置顶 */
.photo-stack__item:hover,
.photo-stack__item:focus-visible {
  width: min(48vw, 700px);
  z-index: 90;
  border-color: var(--yellow);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .65);
}

/* 放大的元素要能溢出 Hero，否则会被裁掉 */
.hero { overflow: visible; }

/* 双风格：英文版留白更足，中文版更紧凑 */
body.lang-en .photo-stack { max-width: 620px; }
body.lang-zh .photo-stack { max-width: 540px; }

@media (max-width: 900px) {
  .photo-stack { max-width: 480px; }
  .photo-stack__item:hover,
  .photo-stack__item:focus-visible { width: min(62vw, 520px); }
}
@media (max-width: 600px) {
  .photo-stack { max-width: 340px; aspect-ratio: 1 / 1.1; }
  .photo-stack__item { width: 46%; cursor: default; }
  .photo-stack__item:nth-child(1) { margin-left: -25%; transform: translate(-50%, -50%) rotate(-11deg); }
  .photo-stack__item:nth-child(2) { margin-left:  -8%; transform: translate(-50%, -50%) rotate(-3deg); }
  .photo-stack__item:nth-child(3) { margin-left:   8%; transform: translate(-50%, -50%) rotate(4deg); }
  .photo-stack__item:nth-child(4) { margin-left:  25%; transform: translate(-50%, -50%) rotate(11deg); }
  /* 触屏无 hover：不做放大，避免遮挡 */
  .photo-stack__item:hover,
  .photo-stack__item:focus-visible { width: 46%; border-color: var(--white); box-shadow: 0 16px 38px rgba(0, 0, 0, .45); }
}


/* ============================================================
   Bento 便当盒布局 —— 首页「五大支柱」
   2 大 3 小：把主推的「升学路径规划」与「翻译与沟通」放大，
   小格并列补充。大格带图片背景，视觉上表达「重点」。
   仅作用于首页卡片：:not(.pillars__grid--link) 排除服务页列表。
   ============================================================ */
.pillars__grid:not(.pillars__grid--link) {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: var(--lang-grid-gap, 1rem);
}
.pillars__grid:not(.pillars__grid--link) > *:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.pillars__grid:not(.pillars__grid--link) > *:nth-child(4) { grid-column: 4 / 7; grid-row: 1 / 3; }
.pillars__grid:not(.pillars__grid--link) > *:nth-child(2) { grid-column: 1 / 3; grid-row: 3 / 4; }
.pillars__grid:not(.pillars__grid--link) > *:nth-child(3) { grid-column: 3 / 5; grid-row: 3 / 4; }
.pillars__grid:not(.pillars__grid--link) > *:nth-child(5) { grid-column: 5 / 7; grid-row: 3 / 4; }

/* 大格：图片背景 + 更大留白与字号 */
.pillars__grid:not(.pillars__grid--link) > *:nth-child(1),
.pillars__grid:not(.pillars__grid--link) > *:nth-child(4) {
  padding: 2.6rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  position: relative;
}
.pillars__grid:not(.pillars__grid--link) > *:nth-child(1) {
  background-image: linear-gradient(rgba(6, 18, 32, .70), rgba(6, 18, 32, .92)), url("/img/campus.png");
}
.pillars__grid:not(.pillars__grid--link) > *:nth-child(4) {
  background-image: linear-gradient(rgba(6, 18, 32, .70), rgba(6, 18, 32, .92)), url("/img/story-handover.png");
  border-color: rgba(255, 210, 63, .38);
}
.pillars__grid:not(.pillars__grid--link) > *:nth-child(1) .pillar-card__title,
.pillars__grid:not(.pillars__grid--link) > *:nth-child(4) .pillar-card__title {
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
}
.pillars__grid:not(.pillars__grid--link) > *:nth-child(1) .pillar-card__desc,
.pillars__grid:not(.pillars__grid--link) > *:nth-child(4) .pillar-card__desc {
  max-width: 34ch;
}
/* 大格的序号更醒目 */
.pillars__grid:not(.pillars__grid--link) > *:nth-child(1) .pillar-card__num,
.pillars__grid:not(.pillars__grid--link) > *:nth-child(4) .pillar-card__num { opacity: .6; }

/* 小格：轻量化 */
.pillars__grid:not(.pillars__grid--link) > *:nth-child(2),
.pillars__grid:not(.pillars__grid--link) > *:nth-child(3),
.pillars__grid:not(.pillars__grid--link) > *:nth-child(5) {
  padding: 1.6rem 1.3rem;
}

/* 响应式降级 */
@media (max-width: 900px) {
  .pillars__grid:not(.pillars__grid--link) { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .pillars__grid:not(.pillars__grid--link) > * { grid-column: auto !important; grid-row: auto !important; }
  .pillars__grid:not(.pillars__grid--link) > *:nth-child(1),
  .pillars__grid:not(.pillars__grid--link) > *:nth-child(4) { padding: 2rem 1.5rem; min-height: 240px; }
}
@media (max-width: 600px) {
  .pillars__grid:not(.pillars__grid--link) { grid-template-columns: 1fr; }
}


/* ============================================================
   滚动动画系统（Rolling animation）
   静态内容由 JS 自动打 data-animate 标记；逐项 stagger 依次入场。
   语言化节奏：中文更紧凑、英文更舒缓（编辑式）。
   ============================================================ */

/* 覆盖基础动画：更顺的缓动 + 逐项延迟 */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition-property: opacity, transform;
  transition-duration: .7s;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--stagger, 0) * 70ms);
  will-change: opacity, transform;
}
[data-animate].visible {
  opacity: 1;
  transform: none;
}

/* 图片：轻微放大淡入，更有"浮现"感 */
figure[data-animate],
.photo-stack[data-animate] {
  transform: translateY(28px) scale(.97);
}
figure[data-animate].visible,
.photo-stack[data-animate].visible {
  transform: none;
}

/* 区块标题：位移小一点，出场更稳 */
.section-header[data-animate],
.page-hero[data-animate] {
  transform: translateY(18px);
}

/* ── 语言化节奏 ── */
body.lang-en [data-animate] {
  transition-duration: .85s;
  transition-delay: calc(var(--stagger, 0) * 95ms);
}
body.lang-zh [data-animate] {
  transition-duration: .6s;
  transition-delay: calc(var(--stagger, 0) * 52ms);
}

/* ── 无障碍：尊重「减少动态效果」系统设置 ── */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  figure[data-animate],
  .photo-stack[data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ============================================================
   作品墙（Work / Cases）
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lang-grid-gap, 1.25rem);
}
.work-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--blue-light);
  aspect-ratio: 4 / 3;
}
.work-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
  filter: saturate(.92) brightness(.94);
}
.work-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.1rem 1.2rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--white);
  background: linear-gradient(transparent, rgba(6, 18, 32, .92));
  transform: translateY(6px);
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
}
.work-card__field {
  display: block;
  font-family: var(--font-en);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: .25rem;
}
.work-card:hover img { transform: scale(1.06); filter: none; }
.work-card:hover figcaption { opacity: 1; transform: none; }

.work-note {
  margin-top: 1.6rem;
  font-size: .9rem;
  opacity: .65;
  max-width: 62ch;
}

@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card figcaption { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .work-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   修复：照片堆叠的 transform 不能被入场动画覆盖
   通用 [data-animate].visible { transform: none } 的优先级 (0,2,1)
   高于 .photo-stack__item:nth-child(n) 的 (0,2,0)。
   这里用 (0,3,0) 的规则把它压回去。
   ============================================================ */
.photo-stack .photo-stack__item:nth-child(1) { transform: translate(-50%, -50%) rotate(-13deg); }
.photo-stack .photo-stack__item:nth-child(2) { transform: translate(-50%, -50%) rotate(-4deg); }
.photo-stack .photo-stack__item:nth-child(3) { transform: translate(-50%, -50%) rotate(5deg); }
.photo-stack .photo-stack__item:nth-child(4) { transform: translate(-50%, -50%) rotate(13deg); }

/* 照片堆叠自身也不做位移入场，只做淡入 */
.photo-stack[data-animate],
.photo-stack[data-animate].visible { transform: none; }

/* 修复：支柱卡片的悬停抬升被动画的 transform: none 覆盖 */
.pillar-card.visible:hover { transform: translateY(-4px); }

@media (max-width: 600px) {
  .photo-stack .photo-stack__item:nth-child(1) { transform: translate(-50%, -50%) rotate(-11deg); }
  .photo-stack .photo-stack__item:nth-child(2) { transform: translate(-50%, -50%) rotate(-3deg); }
  .photo-stack .photo-stack__item:nth-child(3) { transform: translate(-50%, -50%) rotate(4deg); }
  .photo-stack .photo-stack__item:nth-child(4) { transform: translate(-50%, -50%) rotate(11deg); }
}


/* ============================================================
   语言化结构（Language-gated modules）
   中文：信息密集 + 按年级路径 + 证据链
   英文：扁平导航 + 流程透明（How we work）+ 图片主导（Selected work）
   ============================================================ */
body.lang-en [data-zh-only] { display: none !important; }
body.lang-zh [data-en-only] { display: none !important; }

/* ── 英文专属：How we work 步骤卡片 ── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--lang-grid-gap, 1.5rem);
  margin-top: var(--gap);
}
.step-card {
  border: 1px solid rgba(255, 255, 255, .08);
  border-top: 3px solid var(--yellow);
  background: var(--blue-light);
  padding: 2rem 1.75rem;
}
.step-card__num {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--yellow);
  opacity: .5;
  margin-bottom: .6rem;
}
.step-card__title { font-size: 1.15rem; margin-bottom: .5rem; }
.step-card__desc { font-size: .95rem; opacity: .85; margin: 0; }
.work-teaser-cta { margin-top: 1.75rem; }

@media (max-width: 700px) {
  .steps-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   定价页（Pricing）
   中文：表格式，信息密集
   英文：卡片式，少而清晰
   ============================================================ */
.price-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.price-table th, .price-table td {
  text-align: left; padding: .85rem .7rem; border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .95rem; vertical-align: top;
}
.price-table th { border-bottom: 1px solid var(--yellow); font-weight: 700; white-space: nowrap; }
.price-table td:nth-child(3) { color: var(--yellow); font-weight: 600; white-space: nowrap; }
.price-notes { margin-top: 1.6rem; font-size: .9rem; opacity: .8; line-height: 1.9; }
.price-notes li { margin-bottom: .35rem; }
.price-cta { margin-top: 1.75rem; }

.price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lang-grid-gap, 1.5rem); }
.price-card {
  border: 1px solid rgba(255,255,255,.08);
  background: var(--blue-light);
  padding: 1.9rem 1.6rem;
}
.price-card h3 { font-size: 1.05rem; margin-bottom: .7rem; }
.price-card__fig {
  font-family: var(--font-en); font-size: 1.35rem; font-weight: 800;
  color: var(--yellow); margin-bottom: .7rem; line-height: 1.2;
}
.price-card p { font-size: .92rem; opacity: .82; margin: 0; }
@media (max-width: 900px) { .price-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .price-cards { grid-template-columns: 1fr; }
  .price-table { font-size: .85rem; }
  .price-table th:nth-child(4), .price-table td:nth-child(4) { display: none; }
}

/* ============================================================
   流程指南（Process）—— 原生 details 折叠，无需 JS
   ============================================================ */
.acc-group { margin-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); }
.acc { border-bottom: 1px solid rgba(255,255,255,.12); }
.acc > summary {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.5rem .25rem; cursor: pointer; list-style: none;
  transition: background .25s ease;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: rgba(255,255,255,.03); }
.acc__num { font-family: var(--font-en); font-weight: 900; color: var(--yellow); opacity: .55; }
.acc__title { font-size: 1.15rem; font-weight: 700; color: var(--white); }
.acc__win { font-size: .85rem; opacity: .6; margin-left: auto; }
.acc > summary::after {
  content: '+'; font-size: 1.35rem; line-height: 1; color: var(--yellow);
  order: 99; transition: transform .3s ease;
}
.acc[open] > summary::after { transform: rotate(45deg); }
.acc__body { padding: 0 .25rem 1.75rem; }
.acc__list { margin: 0 0 1rem; line-height: 1.95; font-size: .95rem; }
.acc__list li { margin-bottom: .4rem; }
.acc__when { font-size: .95rem; opacity: .9; margin: 0 0 1rem; }
.acc__link a { color: var(--yellow); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.acc-foot { margin-top: 2rem; font-size: .95rem; opacity: .85; }
.acc-foot a { color: var(--yellow); }
@media (max-width: 600px) { .acc__win { margin-left: 0; width: 100%; } }


/* 流程页：人味版 —— 一句话实话 + 我们见过的坑 */
.acc__hook {
  font-size: 1.05rem; font-weight: 600; color: var(--yellow);
  margin: 0 0 1.25rem; padding-left: .9rem;
  border-left: 3px solid var(--yellow); line-height: 1.7;
}
.acc__pit {
  margin: 1.25rem 0 1.25rem;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, .035);
  border-left: 3px solid #FF4D2E;
}
.acc__pit-title {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: #FF7A63; margin: 0 0 .7rem; font-weight: 700;
}
.acc__pit ul { margin: 0; padding-left: 1.1rem; line-height: 1.9; font-size: .93rem; }
.acc__pit li { margin-bottom: .45rem; }
.acc__when { font-size: .95rem; opacity: .95; margin: 0 0 1rem; }


/* 流程页：时间账（具体时长，补足"守则感"） */
.acc__time {
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 210, 63, .05);
  border-left: 3px solid var(--yellow);
}
.acc__time-title {
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--yellow); margin: 0 0 .7rem; font-weight: 700;
}
.acc__time ul { margin: 0; padding-left: 1.1rem; line-height: 1.95; font-size: .93rem; }
.acc__time li { margin-bottom: .45rem; }
.acc__time strong { color: var(--yellow); }


/* ============================================================
   ③ 配图：我们是谁（左文右图） + 关于页图片带
   ============================================================ */
.intro__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--lang-grid-gap, 2rem);
  align-items: start;
  margin-top: var(--gap);
}
.intro__figure { margin: 0; overflow: hidden; }
.intro__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

.about-band { padding: 0; }
.about-band__fig { margin: 0; overflow: hidden; }
.about-band__fig img {
  display: block; width: 100%; height: clamp(220px, 34vw, 420px);
  object-fit: cover; filter: saturate(.92) brightness(.95);
}

@media (max-width: 900px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__figure { max-height: 320px; }
}

/* ============================================================
   ④ 路径时间线：滚动叙事（进度条 + 逐段点亮）
   ============================================================ */
.timeline { position: relative; padding-top: 1.75rem; }
.timeline__progress {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255, 255, 255, .1);
}
.timeline__progress span {
  display: block; height: 100%; width: 0;
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(255, 210, 63, .5);
  transition: width .2s linear;
}
.timeline-step {
  transition: border-color .45s ease, background .45s ease;
}
.timeline-step.visible {
  border-color: rgba(255, 210, 63, .38);
  background: rgba(255, 210, 63, .045);
}
.timeline-step .timeline-step__num {
  opacity: .35;
  transition: opacity .45s ease, color .45s ease;
}
.timeline-step.visible .timeline-step__num {
  opacity: 1;
  color: var(--yellow);
}
@media (prefers-reduced-motion: reduce) {
  .timeline__progress span { transition: none; }
}