/* ===== DESIGN TOKENS ===== */
:root {
  /* Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  /* Fonts — unified network-wide: Playfair Display (display) + Noto Serif SC (CJK display),
     Hanken Grotesk (body) + Noto Sans SC (CJK body) */
  --font-display: 'Playfair Display', 'Noto Serif SC', 'Instrument Serif', Georgia, serif;
  --font-body: 'Hanken Grotesk', 'Noto Sans SC', 'Inter', 'Helvetica Neue', sans-serif;
}

/* ===== CJK typographic refinements — Chinese text needs looser leading ===== */
.lang-cn,
:lang(zh),
:lang(zh-Hans) {
  line-height: 1.78;
  letter-spacing: 0.012em;
}
h1 .lang-cn, h2 .lang-cn, h3 .lang-cn,
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 {
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* ===== Modern typographic refinements ===== */
html {
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-feature-settings: "ss01" on, "cv11" on;   /* Hanken Grotesk: alternate stylistic set */
}
/* Display face: Playfair Display (network standard) + Noto Serif SC for CJK.
   No font-variation-settings: Fraunces-only axes (opsz/SOFT/WONK) removed with Fraunces. */

/* ===== CUSTOM PALETTE — Editorial / aligned with Intelligence ===== */
:root, [data-theme="light"] {
  --color-bg:             #F5EFE6;
  --color-surface:        #FBF7F0;
  --color-surface-2:      #EFE8DD;
  --color-surface-offset: #E6DECF;
  --color-divider:        #D5CBB8;
  --color-border:         #C4B89F;
  --color-text:           #0A192F;
  --color-text-muted:     #4A5468;
  --color-text-faint:     #8B8472;
  --color-text-inverse:   #F5EFE6;
  --color-primary:        #0A192F;
  --color-primary-hover:  #122849;
  --color-primary-active: #061222;
  --color-primary-highlight: #DBE4F1;
  --color-accent:         #7A1F2B;
  --color-accent-hover:   #5E1620;
  --color-accent-active:  #4A1019;
  --color-gold:           #C9A961;
  --shadow-sm: 0 1px 2px rgba(10,25,47,0.06);
  --shadow-md: 0 4px 16px rgba(10,25,47,0.10);
  --shadow-lg: 0 12px 32px rgba(10,25,47,0.14);
}

[data-theme="dark"] {
  --color-bg:             #111110;
  --color-surface:        #1a1918;
  --color-surface-2:      #222120;
  --color-surface-offset: #1e1d1c;
  --color-divider:        #2d2c2a;
  --color-border:         #3a3937;
  --color-text:           #d4d2ce;
  --color-text-muted:     #8a8782;
  --color-text-faint:     #5a5855;
  --color-text-inverse:   #111110;
  --color-primary:        #6a9bc8;
  --color-primary-hover:  #5488b8;
  --color-primary-active: #4277a5;
  --color-primary-highlight: #1e2a36;
  --color-accent:         #daa54e;
  --color-accent-hover:   #c89540;
  --color-accent-active:  #b58535;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #111110;
    --color-surface:        #1a1918;
    --color-surface-2:      #222120;
    --color-surface-offset: #1e1d1c;
    --color-divider:        #2d2c2a;
    --color-border:         #3a3937;
    --color-text:           #d4d2ce;
    --color-text-muted:     #8a8782;
    --color-text-faint:     #5a5855;
    --color-text-inverse:   #111110;
    --color-primary:        #6a9bc8;
    --color-primary-hover:  #5488b8;
    --color-primary-active: #4277a5;
    --color-primary-highlight: #1e2a36;
    --color-accent:         #daa54e;
    --color-accent-hover:   #c89540;
    --color-accent-active:  #b58535;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  }
}

/* ===== GLOBAL ===== */
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

.container {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.section-padding {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}

/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: oklch(from var(--color-bg) l c h / 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-divider);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-4);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;       /* keep brand block from being squeezed by nav */
  min-width: 0;
}

/* ===== Text wordmark beside the logo image — editorial brand stack ===== */
.header__wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.1;
}
.header__wordmark-name {
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 0.88rem + 0.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-text);
  white-space: nowrap;
}
.header__wordmark-tagline {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}
/* Hide wordmark on cramped viewports — logo image already carries the brand */
@media (max-width: 1180px) {
  .header__wordmark { display: none; }
  /* …but on Chinese mode keep it visible: the logo image is English-dominant
     so mobile-CN users need the Chinese wordmark to see 洞见桥全球洞察. */
  [data-lang="cn"] .header__wordmark {
    display: flex;
  }
  [data-lang="cn"] .header__wordmark-name {
    font-size: clamp(0.9rem, 3vw, 1rem);
  }
  [data-lang="cn"] .header__wordmark-tagline {
    font-size: 0.55rem;
  }
}
/* Language toggle for the wordmark */
[data-lang="en"] .header__wordmark .lang-cn { display: none; }
[data-lang="cn"] .header__wordmark .lang-en { display: none; }

.header__logo-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.header__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.header__logo-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  flex-wrap: nowrap;
}

.header__nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  position: relative;
  padding-block: var(--space-1);
  white-space: nowrap;      /* think-tank nav: never wrap a label onto two lines */
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

.header__nav a:hover,
.header__nav a.active {
  color: var(--color-text);
}

.header__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header__controls button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

.header__controls button:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

.mobile-menu-btn {
  display: none;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-12);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Stronger cream overlay so both columns sit on a calm reading surface */
  background:
    linear-gradient(95deg,
      oklch(from var(--color-bg) l c h / 0.95) 0%,
      oklch(from var(--color-bg) l c h / 0.86) 55%,
      oklch(from var(--color-bg) l c h / 0.78) 100%);
}
/* Dark mode: the near-black --color-bg at 0.78-0.95 opacity was blacking out
   the hero background image entirely (user reported "背景图完全消失").
   Drop opacity substantially so the architectural photo shows through.
   Applied ONLY when the theme is explicitly dark OR the OS prefers dark and
   the user hasn't set an explicit theme — light users are never affected. */
[data-theme="dark"] .hero__bg::after {
  background:
    linear-gradient(95deg,
      oklch(from var(--color-bg) l c h / 0.55) 0%,
      oklch(from var(--color-bg) l c h / 0.40) 55%,
      oklch(from var(--color-bg) l c h / 0.25) 100%);
}
/* Light mode explicitly wins the specificity war back — the :not() rule
   above would otherwise fire on default light users too. */
[data-theme="light"] .hero__bg::after {
  background:
    linear-gradient(95deg,
      oklch(from var(--color-bg) l c h / 0.95) 0%,
      oklch(from var(--color-bg) l c h / 0.86) 55%,
      oklch(from var(--color-bg) l c h / 0.78) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hero__bg::after {
    background:
      linear-gradient(95deg,
        oklch(from var(--color-bg) l c h / 0.55) 0%,
        oklch(from var(--color-bg) l c h / 0.40) 55%,
        oklch(from var(--color-bg) l c h / 0.25) 100%);
  }
}

/* ===== Hero 2-column grid (editorial layout, sister-site aligned) ===== */
.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  column-gap: clamp(2.5rem, 6vw, 5rem);
  row-gap: var(--space-12);
  align-items: start;
}
@media (max-width: 960px) {
  .hero__layout {
    grid-template-columns: 1fr;
  }
}

.hero__content {
  max-width: 720px;
}

/* ----- Brand mark: two lines, ranked typography ----- */
.hero__brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  max-width: max-content;
}
.hero__brand-name {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 0.85rem + 0.35vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.2;
}
.hero__brand-tagline {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1.2;
}

/* ----- Main display headline ----- */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem);
  font-weight: 500;             /* refined editorial weight, not bold */
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.18rem);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-8);
  max-width: 56ch;
}

/* ----- Editorial-style CTA: thin-bordered, no fill, sharp corners ----- */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-text);
  border-radius: 0;
  transition: background-color var(--transition-interactive),
              color var(--transition-interactive),
              border-color var(--transition-interactive);
}
.hero__cta svg { transition: transform var(--transition-interactive); }
.hero__cta:hover {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.hero__cta:hover svg { transform: translateX(3px); }

/* ----- Inline publication link beneath the CTA ----- */
.hero__publication-link {
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.hero__publication-link a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--transition-interactive);
}
.hero__publication-link a:hover { color: var(--color-text); }

/* ============================================================
   Hero RIGHT sidebar — Latest Headlines (news brief)
   Naturalised: removed boxed panel + top accent rule; relies only
   on thin divider lines so it blends into the hero background.
   ============================================================ */
.hero__brief {
  position: relative;
  padding: 0;
  background: transparent;
  border-top: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
@media (min-width: 961px) {
  .hero__brief {
    /* nudge into hero with a touch of top alignment to display headline */
    margin-top: 0.5rem;
  }
}

.hero__brief-head {
  margin-bottom: var(--space-5);
}
.hero__brief-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.hero__brief-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
}

.hero__brief-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
}
.hero__brief-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
}
.hero__brief-date {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.hero__brief-link {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.hero__brief-link:hover { color: var(--color-accent); }

.hero__brief-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 3px;
  transition: color var(--transition-interactive),
              border-color var(--transition-interactive);
}
.hero__brief-more:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Language-toggle visibility for new hero markup */
[data-lang="en"] .hero__brand .lang-cn,
[data-lang="en"] .hero__brief .lang-cn,
[data-lang="en"] .hero__publication-link .lang-cn { display: none; }
[data-lang="cn"] .hero__brand .lang-en,
[data-lang="cn"] .hero__brief .lang-en,
[data-lang="cn"] .hero__publication-link .lang-en { display: none; }

/* Keep legacy classes neutral (not used on home anymore, kept for safety) */
.hero__label { display: none; }
.editorial-brief-section { display: none !important; }

/* ===== FRAMEWORK SECTION ===== */
.framework {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  position: relative;
  overflow: hidden;
}

.framework__bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
}

.framework__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.framework__content {
  position: relative;
  z-index: 1;
}

.framework__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.framework__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
  color: #fff;
}

.framework__desc {
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: var(--space-10);
  opacity: 0.9;
  color: rgba(255,255,255,0.9);
}

.framework__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.framework__card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  backdrop-filter: blur(8px);
}

.framework__card-icon {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.framework__card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: #fff;
}

.framework__card p {
  font-size: var(--text-sm);
  line-height: 1.6;
  opacity: 0.8;
  color: rgba(255,255,255,0.8);
}

/* ===== PARADIGM TABLE ===== */
.paradigm-table {
  margin-top: var(--space-10);
  overflow-x: auto;
}

.paradigm-table table {
  min-width: 700px;
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.paradigm-table th {
  background: rgba(255,255,255,0.12);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  color: #fff;
}

.paradigm-table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}

.paradigm-table tr:hover td {
  background: rgba(255,255,255,0.04);
}

/* ===== PUBLICATIONS ===== */
.publications__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.pub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--transition-interactive),
              transform var(--transition-interactive);
}

.pub-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pub-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.pub-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.pub-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.pub-card__meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ===== ABOUT ===== */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-12);
  align-items: start;
}

.about__image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
}

.about__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.about__credentials {
  margin-top: var(--space-8);
}

.about__cred-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}

.about__cred-item:last-child {
  border-bottom: none;
}

.about__cred-icon {
  flex-shrink: 0;
  width: 20px;
  color: var(--color-accent);
  margin-top: 2px;
}

.about__cred-text strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.about__cred-text span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ===== CASE STUDIES ===== */
.case-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-interactive);
}

.case-card:hover {
  box-shadow: var(--shadow-md);
}

.case-card__header {
  padding: var(--space-6) var(--space-6) var(--space-4);
}

.case-card__tag {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.case-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.case-card__body {
  padding: 0 var(--space-6) var(--space-6);
}

.case-card__body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.case-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.case-card__topics span {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}

/* ===== BOOK BANNER ===== */
.book-banner {
  background: var(--color-surface-offset);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: flex;
  align-items: center;
  gap: var(--space-10);
  margin-top: var(--space-12);
}

.book-banner__icon {
  font-size: 4rem;
  flex-shrink: 0;
}

.book-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.book-banner__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===== CONTACT ===== */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}

.contact__info-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.contact__info-item:last-child {
  border-bottom: none;
}

.contact__info-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* ===== CONTACT FORM — REQUEST TYPE CARDS ===== */
.ib-request-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 14px;
  border: 2px solid var(--color-border);
  border-radius: 14px;
  cursor: pointer;
  background: var(--color-surface);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  user-select: none;
}
.ib-request-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.ib-request-card--active {
  border-color: var(--color-primary);
  background: var(--color-primary-highlight);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
@media (max-width: 480px) {
  .ib-request-card { padding: 14px 10px; }
}

.contact__form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

.contact__form input,
.contact__form textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.contact__form input:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.contact__form textarea {
  min-height: 140px;
  resize: vertical;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-gold);
  color: #0A192F;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.btn-primary:hover {
  background: #B8964A;
}

.btn-primary:active {
  background: #A8873B;
}

/* ===== FOOTER ===== */
.footer {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-10);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer__links {
  display: flex;
  gap: var(--space-6);
}

.footer__links a {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--color-text);
}

/* ===== SECTION HEADERS ===== */
.section-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.section-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: var(--space-10);
}

/* ===== QUOTE ===== */
.pullquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  margin-block: var(--space-8);
}

.pullquote p {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.5;
}

.pullquote cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: normal;
  margin-top: var(--space-2);
}

/* ===== STAT ROW ===== */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-block: var(--space-10);
}

.stat-item {
  text-align: center;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}

.stat-item__number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-item__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== MOBILE OVERLAY NAV ===== */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: oklch(from var(--color-bg) l c h / 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  text-decoration: none;
}

.mobile-nav__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}

/* ===== PAGE DIVIDERS ===== */
.page-divider {
  display: none;
}

/* ===== PUBLICATION CARD — READ LINKS ===== */
.pub-card__links { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.pub-card__link { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.75rem; border: 1px solid rgba(200,145,58,0.4); border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--color-accent); text-decoration: none; transition: all 0.2s; }
.pub-card__link:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pub-card__link svg { width: 14px; height: 14px; }

/* ===== ABOUT — EMAIL ===== */
.about__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary-highlight);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.about__email:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ===== ABOUT — SIDEBAR (Executive-bio PDF layout) ===== */
.about__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.about__sidebar .about__image-wrap {
  aspect-ratio: 326/474;
  margin-bottom: var(--space-2);
  max-width: 380px;
}

.about__sidebar .about__image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.about__sidebar .about__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about__meta-block {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
}

.about__meta-block:first-of-type {
  border-top: none;
  padding-top: 0;
}

.about__meta-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2) 0;
  font-weight: 700;
}

.about__meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about__meta-list li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text);
  padding-block: 2px;
}

.about__meta-list a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-divider);
}

.about__meta-list a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.about__meta-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.about__scholar-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--color-primary);
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  transition: background 0.2s, border-color 0.2s;
}

.about__scholar-link:hover {
  background: rgba(26, 58, 92, 0.06);
  border-color: var(--color-primary);
}

/* ===== ABOUT — BIO (main column) ===== */
.about__bio {
  display: flex;
  flex-direction: column;
}

.about__bio-eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3) 0;
  font-weight: 700;
}

.about__bio-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 var(--space-8) 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.about__bio-subhead {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-primary);
  margin: var(--space-6) 0 var(--space-3) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  font-weight: 600;
}

.about__bio-para {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

/* Executive-Bio PDF download call-to-action */
.about__bio-download {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-8) 0;
  padding: var(--space-4) var(--space-5);
  background: rgba(10, 25, 47, 0.04);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 6px 6px 0;
}

.about__bio-download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 18px;
  background: var(--color-primary);
  color: #f5e6d3;
  border-radius: 5px;
  transition: background 0.2s, transform 0.15s;
}

.about__bio-download-link:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

.about__bio-download-link svg {
  flex-shrink: 0;
}

.about__bio-download-meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Mobile: sidebar stacks above bio, meta blocks split into 2 columns to save vertical space */
@media (max-width: 768px) {
  .about__sidebar .about__image-wrap {
    aspect-ratio: 4/3;
    max-width: 320px;
    margin-inline: auto;
  }
  .about__bio-headline {
    font-size: 1.6rem;
  }
}

/* ===== ABOUT — DIPLOMAS ===== */
.about__diplomas {
  margin-top: var(--space-10);
}

.about__diplomas-heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.about__diplomas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.about__diploma-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}

.about__diploma-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== ABOUT — FORTHCOMING BOOKS ===== */
.about__books {
  margin-top: var(--space-10);
}

.about__books h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.about__book-item {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.about__book-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.about__book-item span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ===== AI MODEL SECTION ===== */
.ai-model {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d1b2a 0%, #1b2a3e 40%, #1a3050 70%, #152238 100%);
  color: #fff;
}

.ai-model::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(106,155,200,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(200,145,58,0.06) 0%, transparent 50%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 60px,
      rgba(255,255,255,0.02) 60px,
      rgba(255,255,255,0.02) 61px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 60px,
      rgba(255,255,255,0.02) 60px,
      rgba(255,255,255,0.02) 61px
    );
  pointer-events: none;
}

.ai-model__content {
  position: relative;
  z-index: 1;
}

.ai-model__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.ai-model__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-bottom: var(--space-6);
  color: #fff;
}

.ai-model__desc {
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: var(--space-10);
  color: rgba(255,255,255,0.85);
}

.ai-model__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.ai-model__card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  backdrop-filter: blur(8px);
  transition: transform var(--transition-interactive),
              box-shadow var(--transition-interactive);
}

.ai-model__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.ai-model__card-icon {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.ai-model__card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: #fff;
}

.ai-model__card p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}

/* ===== AI MODEL — APPLICATIONS ===== */
.ai-model__applications {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.ai-model__applications-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: #fff;
  margin-bottom: var(--space-6);
}

.ai-model__applications-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.ai-model__app-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
}

.ai-model__app-item svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

/* ===== BOOK BANNER — MULTI-BOOK ===== */
.book-banner__books {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.book-banner__book-item {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

.book-banner__book-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .framework__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ai-model__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .header__nav { display: none; }
  .mobile-menu-btn { display: flex; }

  .hero { min-height: 70vh; }
  .hero__title { font-size: var(--text-2xl); }

  .framework__grid {
    grid-template-columns: 1fr;
  }

  .ai-model__grid {
    grid-template-columns: 1fr;
  }

  .ai-model__applications-grid {
    grid-template-columns: 1fr;
  }

  .publications__grid {
    grid-template-columns: 1fr;
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__diplomas-grid {
    grid-template-columns: 1fr;
  }

  .contact__grid {
    grid-template-columns: 1fr;
  }

  .stat-row {
    grid-template-columns: 1fr;
  }

  .book-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--space-6);
  }

  .footer__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ===== PAGE VISIBILITY ===== */
/* ===== LANGUAGE TOGGLE ===== */
[data-lang="en"] .lang-cn { display: none !important; }
[data-lang="cn"] .lang-en { display: none !important; }

.page { display: none; }
.page.active { display: block; }

/* ===== NEWS TICKER ===== */
.news-ticker {
  background: var(--color-primary);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 99;
}

.news-ticker__track {
  display: inline-flex;
  text-decoration: none;
  color: var(--color-text-inverse);
  padding-block: var(--space-2);
}

.news-ticker__track:hover {
  color: var(--color-text-inverse);
  opacity: 0.9;
}

.news-ticker__content {
  display: inline-block;
  animation: ticker-scroll 35s linear infinite;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-left: 100%;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.news-ticker:hover .news-ticker__content {
  animation-play-state: paused;
}

/* ===== NEWS SECTION ===== */
.news-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.news-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: box-shadow var(--transition-interactive),
              transform var(--transition-interactive);
}

.news-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.news-card__date {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.news-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.news-card__body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.news-card__body p:last-child {
  margin-bottom: 0;
}

.news-card__product {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.news-card__product strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.news-card__product p {
  margin-bottom: var(--space-3);
}

.news-card__demo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(200,145,58,0.4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: all 0.2s;
}

.news-card__demo-link:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.news-card__book-list {
  padding-left: var(--space-5);
  margin-bottom: var(--space-4);
}

.news-card__book-list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.news-card__book-list li strong {
  color: var(--color-text);
}

@media (max-width: 768px) {
  .news-card {
    padding: var(--space-5);
  }
}

/* ============================================================
   LANGUAGE DROPDOWN & RTL — appended Apr 2026
   ============================================================ */

/* ----- Language dropdown ----- */
.lang-select {
  position: relative;
}

.lang-select__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-interactive), color var(--transition-interactive);
}

.lang-select__btn:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

.lang-select__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: min(220px, calc(100vw - var(--space-6)));
  max-width: calc(100vw - var(--space-6));
  max-height: calc(100dvh - 80px);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 300;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.lang-select__menu.open {
  display: block;
}

.lang-select__option {
  display: flex;
  align-items: center;
  width: 100% !important;
  min-width: 100%;
  height: auto !important;
  box-sizing: border-box;
  padding: 10px var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-interactive), color var(--transition-interactive);
  min-height: 40px;
  gap: var(--space-2);
  white-space: nowrap;
  line-height: 1.3;
  flex-shrink: 0;
  border-radius: 0;
}

.lang-select__option:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.lang-select__option.active {
  color: var(--color-primary);
  font-weight: 600;
  background: var(--color-primary-highlight);
}

/* Hide Google Translate bar that GT injects at top */
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
div#goog-gt- {
  display: none !important;
}

body {
  top: 0 !important; /* GT shifts body down by banner height */
}

/* ----- Arabic RTL ----- */
[dir="rtl"] .header__inner {
  flex-direction: row-reverse;
}

[dir="rtl"] .header__nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .mobile-nav {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid var(--color-divider);
  transform: translateX(-100%);
}

[dir="rtl"] .mobile-nav.open {
  transform: translateX(0);
}

[dir="rtl"] .pullquote {
  border-left: none;
  border-right: 3px solid var(--color-accent);
  padding-left: 0;
  padding-right: var(--space-6);
}

[dir="rtl"] .news-ticker__content {
  animation-direction: reverse;
}

[dir="rtl"] .lang-select__menu {
  right: auto;
  left: 0;
}

/* ============================================================
   MOBILE OPTIMISATIONS v4 — appended Apr 2026
   ============================================================ */

/* ----- Mobile drawer (slide-in from right) — MOBILE ONLY ----- */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Desktop: keep original display:none behaviour (drawer not needed) */
@media (min-width: 769px) {
  .mobile-nav {
    display: none !important;
  }
  .mobile-nav-backdrop {
    display: none !important;
  }
}

/* Mobile only: slide-in drawer */
@media (max-width: 768px) {
  .mobile-nav {
    /* override old full-screen centering FIRST so explicit anchors below win */
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(82vw, 300px);
    height: 100dvh;       /* fill the entire viewport so items can scroll if needed */
    max-height: 100dvh;
    z-index: 200;
    background: var(--color-surface);
    background-color: var(--color-surface);
    border-left: 1px solid var(--color-divider);
    padding: max(env(safe-area-inset-top), var(--space-3)) var(--space-5) max(env(safe-area-inset-bottom), var(--space-4));
    gap: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-nav.open {
    transform: translateX(0);
  }

  .mobile-nav a {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-divider);
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .mobile-nav a:last-of-type {
    border-bottom: none;
  }

  .mobile-nav__close {
    align-self: flex-end;
    margin: 0 calc(-1 * var(--space-2)) var(--space-2) 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    position: static;
    flex-shrink: 0;
  }
}

/* Fallback for older iOS Safari that doesn't support 100dvh */
@supports not (height: 100dvh) {
  @media (max-width: 768px) {
    .mobile-nav { height: 100vh; max-height: 100vh; }
  }
}

/* Tighter drawer on short phones (e.g. iPhone SE) */
@media (max-width: 768px) and (max-height: 700px) {
  .mobile-nav {
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
  }
  .mobile-nav a {
    padding: 8px 0;
    min-height: 40px;
    font-size: var(--text-sm);
  }
  .mobile-nav__close {
    width: 36px;
    height: 36px;
    margin-bottom: var(--space-1);
  }
}

/* ----- Reduce backdrop blur on header for mobile perf ----- */
@media (max-width: 768px) {
  .header {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ----- Hero shorter on mobile ----- */
@media (max-width: 768px) {
  .hero { min-height: 60vh; }
}

/* ----- Touch targets ≥ 44px ----- */
@media (max-width: 768px) {
  .header__controls button,
  .btn-primary,
  .hero__cta {
    min-height: 44px;
    min-width: 44px;
  }

  .header__nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer__links a {
    padding: var(--space-2) 0;
    display: inline-block;
  }
}

/* ----- Container padding tighter on small phones ----- */
@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-4);
  }

  .section-padding {
    padding-block: clamp(var(--space-8), 8vw, var(--space-16));
  }

  .stat-item {
    padding: var(--space-4);
  }

  .stat-item__number {
    font-size: clamp(1.6rem, 8vw, 2.5rem);
  }

  .pullquote p {
    font-size: var(--text-base);
  }
}

/* ----- News ticker: slower on mobile ----- */
@media (max-width: 768px) {
  .news-ticker__content {
    animation-duration: 60s;
  }
}

/* ----- Pub cards: readable on mobile ----- */
@media (max-width: 480px) {
  .pub-card {
    padding: var(--space-4);
  }

  .pub-card__links {
    flex-direction: column;
  }
}

/* ----- Book banner: tighter on small phones ----- */
@media (max-width: 480px) {
  .book-banner {
    padding: var(--space-5);
    gap: var(--space-4);
  }
}

/* ----- Framework card: better on mobile ----- */
@media (max-width: 480px) {
  .framework__card,
  .ai-model__card {
    padding: var(--space-4);
  }
}

/* ----- Paradigm table: horizontal scroll hint ----- */
@media (max-width: 768px) {
  .paradigm-table {
    -webkit-overflow-scrolling: touch;
  }
  .paradigm-table::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
  }
}

/* ----- About diplomas: single column on tiny screens ----- */
@media (max-width: 480px) {
  .about__diplomas-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   iPad / Tablet drawer fix — 2026-04
   Force hamburger button + drawer hidden at >=769px so iPad
   users cannot accidentally trigger the side drawer.
   ============================================================ */
@media (min-width: 769px) {
  .mobile-menu-btn,
  .header__controls .mobile-menu-btn {
    display: none !important;
  }
  .mobile-nav,
  .mobile-nav.open,
  .mobile-nav-backdrop {
    display: none !important;
    transform: translateX(100%) !important;
    pointer-events: none !important;
  }
}

/* ============================================================
   iPad/Tablet hero + news ticker fixes — 2026-04
   ============================================================ */

/* 1) Hero background: ensure picture + img fill the hero container.
      Without this, the <img> (with html width/height attrs) gets aspect-ratio
      sized by base.css 'img { height: auto }', leaving white space below. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__bg picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__bg picture img,
.hero__bg > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
}

/* 2) News ticker: track must be block (not inline-flex) so the
      classic marquee pattern with padding-left:100% on the content
      can resolve the percentage against the full viewport width and
      actually scroll the text into view. */
.news-ticker__track {
  display: block !important;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text-inverse);
  padding-block: var(--space-2);
}
.news-ticker__content {
  display: inline-block !important;
  padding-left: 100% !important;
  animation: ticker-scroll 35s linear infinite;
}

/* ===== EDITORIAL BRIEF (Hero-adjacent news column) — InsightBridge editorial style ===== */
.editorial-brief-section {
  padding: var(--space-16) 0 var(--space-12);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.editorial-brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 900px) {
  .editorial-brief-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* LEFT column — Latest Headlines list */
.editorial-brief { position: relative; }
.editorial-brief__head {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-6);
  position: relative;
}
.editorial-brief__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.editorial-brief__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.editorial-brief__rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--color-accent);
  margin-top: var(--space-4);
}

.editorial-brief__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
}
.editorial-brief__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-divider);
  align-items: baseline;
}
.editorial-brief__date {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.editorial-brief__link {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.editorial-brief__link:hover {
  color: var(--color-accent);
}

.editorial-brief__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 4px;
  transition: color var(--transition-interactive), border-color var(--transition-interactive);
}
.editorial-brief__more:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* RIGHT column — Spotlight on Intelligence publication */
.editorial-spotlight {
  position: relative;
  padding: var(--space-8) var(--space-7);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: 4px;
  overflow: hidden;
}
.editorial-spotlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--color-accent);
}
.editorial-spotlight__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold, #C9A961);
  margin-bottom: var(--space-3);
}
.editorial-spotlight__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
.editorial-spotlight__lede {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-inverse);
  opacity: 0.85;
  margin: 0 0 var(--space-6);
}
.editorial-spotlight__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold, #C9A961);
  text-decoration: none;
  border-bottom: 1px solid var(--color-gold, #C9A961);
  padding-bottom: 4px;
  transition: color var(--transition-interactive), border-color var(--transition-interactive);
}
.editorial-spotlight__cta:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Show only one language at a time (mirrors site's existing convention) */
[data-lang="en"] .editorial-brief .lang-cn,
[data-lang="en"] .editorial-spotlight .lang-cn { display: none; }
[data-lang="cn"] .editorial-brief .lang-en,
[data-lang="cn"] .editorial-spotlight .lang-en { display: none; }


/* ============================================================
   Contact section — editorial polish 2026-01-07
   Replaces emoji icons + casual trust banner with subtle, professional treatment
   ============================================================ */
.contact__trust-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.contact__trust-note svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

.contact__request-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 0.85rem;
}
.contact__required {
  color: var(--color-accent);
  margin-left: 2px;
}

.contact__request-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 560px) {
  .contact__request-grid {
    grid-template-columns: 1fr;
  }
}

/* The request-card itself — editorial style: thin border, sharp corners */
.ib-request-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.1rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 0;       /* sharp, editorial corners */
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ib-request-card:hover {
  border-color: var(--color-text);
  box-shadow: 0 4px 16px rgba(10, 25, 47, 0.08);
}
.ib-request-card:has(input:checked),
.ib-request-card.is-selected {
  border-color: var(--color-accent);
  border-left-width: 3px;
  background: var(--color-bg);
}
.ib-request-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 0.45rem;
  color: var(--color-accent);
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.ib-request-card:has(input:checked) .ib-request-card__icon,
.ib-request-card.is-selected .ib-request-card__icon {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.ib-request-card__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.ib-request-card__sub {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Submit button — match hero CTA editorial styling */
.contact__form .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--color-text);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.contact__form .btn-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.contact__form .btn-primary svg { transition: transform 0.18s ease; }
.contact__form .btn-primary:hover svg { transform: translateX(3px); }

/* Form inputs — flatter, editorial */
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form textarea,
.contact__form select {
  border-radius: 0 !important;
  border: 1px solid var(--color-divider) !important;
  background: var(--color-surface) !important;
  transition: border-color 0.15s ease;
}
.contact__form input:focus,
.contact__form textarea:focus,
.contact__form select:focus {
  outline: none;
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}
.contact__form label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Language toggle for contact section additions */
[data-lang="en"] .contact__trust-note .lang-cn,
[data-lang="en"] .contact__request-label .lang-cn,
[data-lang="en"] .ib-request-card .lang-cn { display: none; }
[data-lang="cn"] .contact__trust-note .lang-en,
[data-lang="cn"] .contact__request-label .lang-en,
[data-lang="cn"] .ib-request-card .lang-en { display: none; }

/* ============================================================
   Image protection — prevent right-click, drag, mobile long-press
   on credentials (diplomas, business license) and personal photos.
   Note: this is "speed-bump" protection only. Screenshots cannot
   be prevented; this stops casual right-click/long-press downloads.
   ============================================================ */
.credential-wrap,
.credential-wrap img,
.about__image-wrap,
.about__image-wrap img,
img[data-protected],
[data-protected] img {
  -webkit-touch-callout: none;   /* iOS Safari: disable long-press menu */
  -webkit-user-drag: none;       /* WebKit: disable native drag */
  -webkit-user-select: none;     /* prevent text/image selection */
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===== THEORY LANDING PAGES ===== */
.theory-wrap { max-width: 900px; margin: 0 auto; padding: 0 var(--space-6, 24px); }
.theory-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--color-divider, #e6e2dc); margin-bottom: var(--space-8, 48px); font-family: var(--font-display, Georgia, serif); }
.theory-nav a { color: var(--color-primary, #0A192F); text-decoration: none; font-weight: 600; }
.theory-nav a:hover { color: var(--color-accent, #7A1F2B); }
.theory-eyebrow { font-family: var(--font-display, Georgia, serif); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent, #7A1F2B); font-weight: 700; margin: 0 0 var(--space-2, 8px) 0; }
.theory-title { font-family: var(--font-display, Georgia, serif); font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--color-text, #1a1a1a); margin: 0 0 var(--space-2, 8px) 0; letter-spacing: -0.02em; line-height: 1.1; }
.theory-subtitle { font-family: var(--font-display, Georgia, serif); font-size: 1.2rem; color: var(--color-text-muted, #5a5a5a); font-style: italic; margin: 0 0 var(--space-8, 48px) 0; }
.theory-definition { font-size: 1.1rem; line-height: 1.7; color: var(--color-text, #1a1a1a); padding: var(--space-5, 20px) var(--space-6, 24px); background: rgba(10, 25, 47, 0.04); border-left: 3px solid var(--color-accent, #7A1F2B); border-radius: 0 6px 6px 0; margin: 0 0 var(--space-8, 48px) 0; }
.theory-section { margin-bottom: var(--space-8, 48px); }
.theory-section h2 { font-family: var(--font-display, Georgia, serif); font-size: 1.6rem; color: var(--color-primary, #0A192F); margin: 0 0 var(--space-4, 16px) 0; padding-bottom: var(--space-2, 8px); border-bottom: 1px solid var(--color-divider, #e6e2dc); }
.theory-section p { font-size: 1rem; line-height: 1.75; color: var(--color-text-muted, #4a4a4a); margin-bottom: var(--space-3, 12px); }
.theory-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4, 16px); margin: var(--space-5, 20px) 0; }
.theory-pillar { padding: var(--space-4, 16px); background: rgba(122, 31, 43, 0.03); border-radius: 8px; }
.theory-pillar h3 { font-family: var(--font-display, Georgia, serif); font-size: 1.05rem; color: var(--color-primary, #0A192F); margin: 0 0 8px 0; }
.theory-pillar p { font-size: 0.92rem; margin: 0; color: var(--color-text-muted, #4a4a4a); }
.theory-faq details { border-bottom: 1px solid var(--color-divider, #e6e2dc); padding: var(--space-3, 12px) 0; }
.theory-faq details summary { font-family: var(--font-display, Georgia, serif); font-size: 1.05rem; color: var(--color-primary, #0A192F); cursor: pointer; padding: 6px 0; font-weight: 600; }
.theory-faq details[open] summary { color: var(--color-accent, #7A1F2B); }
.theory-faq details p { margin: var(--space-2, 8px) 0 var(--space-3, 12px) 0; color: var(--color-text-muted, #4a4a4a); line-height: 1.7; }
.theory-footer { margin-top: var(--space-12, 64px); padding: var(--space-6, 24px) 0; border-top: 1px solid var(--color-divider, #e6e2dc); font-size: 0.88rem; color: var(--color-text-muted, #5a5a5a); font-family: var(--font-display, Georgia, serif); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.theory-footer a { color: var(--color-primary, #0A192F); text-decoration: none; margin-inline: 6px; }
.theory-footer a:hover { color: var(--color-accent, #7A1F2B); }
.theory-related { display: grid; gap: var(--space-3, 12px); }
.theory-related a { display: block; padding: 12px 16px; background: rgba(10, 25, 47, 0.03); border-radius: 6px; text-decoration: none; color: var(--color-primary, #0A192F); transition: background 0.2s; font-family: var(--font-display, Georgia, serif); }
.theory-related a:hover { background: rgba(122, 31, 43, 0.08); color: var(--color-accent, #7A1F2B); }
.theory-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-5, 20px); margin: var(--space-8, 48px) 0; }
.theory-card { padding: var(--space-5, 20px) var(--space-6, 24px); background: rgba(10, 25, 47, 0.03); border-left: 3px solid var(--color-accent, #7A1F2B); border-radius: 0 6px 6px 0; text-decoration: none; color: inherit; transition: background 0.2s, transform 0.15s; display: block; }
.theory-card:hover { background: rgba(122, 31, 43, 0.06); transform: translateY(-2px); }
.theory-card h3 { font-family: var(--font-display, Georgia, serif); font-size: 1.3rem; color: var(--color-primary, #0A192F); margin: 0 0 6px 0; }
.theory-card .theory-card-sub { font-size: 0.85rem; color: var(--color-accent, #7A1F2B); font-family: var(--font-display, Georgia, serif); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
.theory-card p { font-size: 0.95rem; color: var(--color-text-muted, #4a4a4a); line-height: 1.55; margin: 0; }


/* ============================================================
   REDESIGN 2026-08-15 — per mockup "首页Hero区-重设计稿"
   Top utility bar · IB square mark · two-line nav · clean
   (photo-free) hero · primary/secondary CTA pair.
   ============================================================ */

/* --- Top utility bar (fixed brand navy in both themes) --- */
.topbar {
  background: #0A192F;
  color: rgba(245, 239, 230, 0.85);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  position: relative;
  z-index: 101;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 0.5rem;
}
.topbar__left {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  min-width: 0;
}
.topbar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C9A961;
  flex-shrink: 0;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
.topbar__date {
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(245, 239, 230, 0.6);
  text-transform: none;
}
.topbar__right { white-space: nowrap; }
.topbar__right a {
  color: rgba(245, 239, 230, 0.85);
  text-decoration: none;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.topbar__right a:hover { color: #FFFFFF; }
.topbar__sep { margin: 0 0.5rem; color: rgba(245, 239, 230, 0.4); }
@media (max-width: 760px) {
  .topbar__date, .topbar__sep { display: none; }
  .topbar { font-size: 0.6rem; }
}

/* --- Header: IB navy square mark (replaces image logo) --- */
.header__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #0A192F;
  color: #F5EFE6;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  border-radius: 3px;
}
[data-theme="dark"] .header__logo-mark { background: #C9A961; color: #111110; }

/* --- Two-line nav labels: active language + small cross-language sub --- */
.header__nav a {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
}
.header__nav .nav-main { display: inline-flex; line-height: 1.2; }
.header__nav .nav-sub {
  display: inline-flex;
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  line-height: 1.1;
}
.header__nav a:hover .nav-sub,
.header__nav a.active .nav-sub { color: var(--color-accent); }
.header__nav a.active .nav-main { border-bottom: 2px solid var(--color-accent); padding-bottom: 1px; }
@media (max-width: 1180px) { .header__nav .nav-sub { display: none; } }

/* --- Clean editorial hero (no photo background per mockup) --- */
.hero {
  min-height: 0;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  background: var(--color-bg);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-5);
}
.hero__eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.hero__title-accent { color: var(--color-accent); }

.hero__title-alt {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.45rem);
  color: var(--color-text-muted);
  margin: calc(-1 * var(--space-4)) 0 var(--space-6);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Mockup button pair: filled navy primary + outlined secondary */
.hero__cta--primary {
  background: var(--color-gold);
  color: #0A192F;
  border-color: var(--color-gold);
}
.hero__cta--primary:hover {
  background: #B8964A;
  color: #0A192F;
  border-color: #B8964A;
}
.hero__cta--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}