/* =============================================================================
 * OpenBMB × BMB · Responsive layout layer (V2 prototype)
 * Breakpoints: 1280 · 1100 · 1024 · 900 · 768 · 640
 * ============================================================================= */

:root {
  --site-nav-height: 76px;
}

/* ─── Fluid container tokens ───────────────────────────────────── */
@media (max-width: 1280px) {
  :root {
    --container-page-side: 56px;
  }
}

@media (max-width: 1024px) {
  :root {
    --container-page-side: 32px;
    --font-size-display-xl: clamp(36px, 5vw, 49px);
    --font-size-display-lg: clamp(32px, 4.5vw, 44px);
    --font-size-display-md: clamp(26px, 3.5vw, 32px);
  }
}

@media (max-width: 768px) {
  :root {
    --site-nav-height: 64px;
    --container-page-side: 20px;
    --space-4xl: 56px;
    --space-5xl: 80px;
  }
}

@media (max-width: 640px) {
  :root {
    --container-page-side: 16px;
    --space-3xl: 32px;
    --space-4xl: 48px;
  }
}

/* ─── Page shell ───────────────────────────────────────────────── */
html {
  overflow-x: clip;
}

.ds-page {
  overflow-x: clip;
}

/* ─── Section layout (replaces inline maxWidth + double padding) ─ */
.ds-section {
  position: relative;
  padding-block: var(--space-5xl);
}

.ds-section--compact {
  padding-block: var(--space-4xl);
}

.ds-section__inner {
  width: min(100%, var(--container-content));
  margin-inline: auto;
  padding-inline: var(--container-page-side);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .ds-section {
    padding-block: var(--space-4xl);
  }
}

/* ─── Responsive grids ───────────────────────────────────────── */
.ds-grid {
  display: grid;
  gap: var(--space-xl);
}

.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.ds-grid--footer {
  grid-template-columns: minmax(0, 1.5fr) minmax(312px, auto) minmax(0, 1fr);
  gap: var(--space-3xl);
}

/* Footer — WeChat QR placeholders in one row */
.ds-footer-qr-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: flex-start;
}

.ds-footer-qr-item {
  flex: 0 0 auto;
  width: 96px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-grid--footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .ds-grid--2,
  .ds-grid--3,
  .ds-grid--5 { grid-template-columns: 1fr; }
  .ds-grid--footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .ds-grid--4 { grid-template-columns: 1fr; }
  .ds-grid--footer { grid-template-columns: 1fr; }
  .ds-footer-qr-row {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* ─── Section typography ───────────────────────────────────────── */
.ds-section-title {
  font-family: var(--font-family-zh);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin: 0;
  max-width: 820px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

#about .ds-section-title {
  font-size: clamp(32px, 4.5vw, 56px);
}

.ds-section-subtitle {
  font-family: var(--font-family-zh);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: var(--color-text-tertiary);
  max-width: 760px;
  margin-top: 18px;
  margin-bottom: 0;
}

#about .ds-section-subtitle {
  max-width: min(100%, 920px);
}

.ds-about-title-line2 {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 10px 0 0;
  max-width: 820px;
}

.ds-about-intro {
  line-height: 1.95;
  margin-top: 22px;
}

/* Target — center welcome card */
.target-welcome-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.target-welcome-card {
  width: 100%;
  max-width: 720px;
}

/* Process — steps without left timeline rail */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.process-step {
  width: 100%;
}

/* ─── Hero ─────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

@media (max-width: 900px) {
  .hero-section {
    min-height: auto;
    height: auto;
  }
}

.hero-main {
  position: absolute;
  top: var(--site-nav-height);
  bottom: 64px;
  left: 0;
  right: 0;
  padding: 76px var(--container-page-side) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .hero-main {
    position: relative;
    top: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    /* Nav is absolute — reserve its full height so headlines are not covered */
    padding-top: calc(var(--site-nav-height) + 28px);
    padding-bottom: 32px;
  }

  .hero-visual {
    display: none;
  }

}

/* Hero copy column — shrink in grid; container drives fluid headline scale */
.hero-copy {
  container-type: inline-size;
  container-name: hero-copy;
  color: #fff;
  width: 100%;
  min-width: 0;
  max-width: min(680px, 100%);
}

/* Hero header: 4 lines never wrap; each block scales down together on narrow widths */
.hero-copy .hero-plan-title {
  font-family: var(--font-family-zh);
  /* ~14 chars on line 2 → ~6.5cqi keeps within container */
  font-size: clamp(20px, 6.5cqi, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.hero-copy .hero-slogan {
  font-family: var(--font-family-zh);
  /* ~9 chars per slogan line → slightly larger cqi ratio */
  font-size: clamp(26px, 10.5cqi, 76px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 24px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports not (container-type: inline-size) {
  .hero-copy .hero-plan-title {
    font-size: clamp(20px, 4.2vw, 48px);
  }

  .hero-copy .hero-slogan {
    font-size: clamp(26px, 6.8vw, 76px);
  }
}

.hero-copy .hero-headline-line {
  display: block;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  white-space: nowrap;
}

/* Plan intro: fixed size; both sentences wrap (no vw shrink on line 2) */
.hero-copy .hero-desc {
  font-family: var(--font-family-zh);
  font-size: 19px;
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 44px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

.hero-copy .hero-desc-line {
  display: block;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  white-space: normal;
}

@media (max-width: 768px) {
  .hero-main {
    padding-top: calc(var(--site-nav-height) + 20px);
  }

  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch !important;
  }

  .hero-cta-group button {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Hero SCOPE card constellation (fluid scale on wide viewports) ─ */
.hero-constellation {
  /* Base design: 172×184px @ ~1280px; cap ~240px on 4K */
  --scope-card-w: clamp(172px, 14vw, 240px);
  --scope-card-h: calc(var(--scope-card-w) * 184 / 172);
  --scope-scale: calc(var(--scope-card-w) / 172);
  --scope-radius: calc(20px * var(--scope-card-w) / 172);
  --scope-font-label: clamp(9px, 0.72vw, 12px);
  --scope-font-title: clamp(16px, 1.28vw, 22px);
  --scope-font-desc: clamp(10px, 0.8vw, 13px);
  --scope-viz-h: clamp(50px, 4vw, 70px);
  --scope-viz-max-w: calc(var(--scope-card-w) * 152 / 172);
  height: 100%;
  min-height: clamp(400px, 42vh, 560px);
  position: relative;
  perspective: clamp(1100px, 86vw, 1400px);
  overflow: visible;
}

/* Outer wrap: 3D transforms only (rotateY breaks border-radius on same node) */
.scope-card-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transition: transform 350ms var(--motion-easing-emphasized), box-shadow 220ms;
  cursor: pointer;
}

.scope-card-wrap--0,
.scope-card--0 {
  transform: translate(calc(-50% - var(--scope-card-w) * 0.593), calc(-50% - var(--scope-card-h) * 0.348)) rotate(-5deg) rotateY(10deg);
  box-shadow: 0 calc(12px * var(--scope-scale)) calc(32px * var(--scope-scale)) rgba(12, 13, 21, 0.16);
}

.scope-card-wrap--1,
.scope-card--1 {
  transform: translate(calc(-50% + var(--scope-card-w) * 0.384), calc(-50% - var(--scope-card-h) * 0.163)) rotate(4deg) rotateY(-8deg);
  box-shadow: 0 calc(18px * var(--scope-scale)) calc(42px * var(--scope-scale)) rgba(12, 13, 21, 0.20);
}

.scope-card-wrap--2,
.scope-card--2 {
  transform: translate(calc(-50% + var(--scope-card-w) * 0.081), calc(-50% + var(--scope-card-h) * 0.641)) rotate(-1.5deg) rotateY(6deg);
  box-shadow: 0 calc(24px * var(--scope-scale)) calc(52px * var(--scope-scale)) rgba(12, 13, 21, 0.24);
}

.scope-card {
  position: relative;
  width: var(--scope-card-w);
  height: var(--scope-card-h);
  border-radius: clamp(16px, 1.2vw, 28px) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  padding: calc(10px * var(--scope-scale)) calc(10px * var(--scope-scale)) calc(11px * var(--scope-scale));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: none;
}

.scope-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  padding-top: calc(6px * var(--scope-scale));
  border-radius: inherit;
  overflow: hidden;
}

.scope-card__label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  margin-bottom: calc(6px * var(--scope-scale));
}

.scope-card__label {
  font-family: var(--font-family-en);
  font-size: var(--scope-font-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  opacity: 0.92;
  text-align: center;
}

.scope-card__viz {
  flex: 0 0 auto;
  height: var(--scope-viz-h);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scope-card__viz-inner {
  width: 100%;
  max-width: var(--scope-viz-max-w);
  line-height: 0;
}

.scope-card__viz svg {
  width: 100%;
  height: var(--scope-viz-h);
  display: block;
}

.scope-card__body {
  flex-shrink: 0;
  margin-top: calc(14px * var(--scope-scale));
  width: 100%;
  text-align: center;
}

.scope-card__title {
  font-family: var(--font-family-zh);
  font-size: var(--scope-font-title);
  font-weight: 500;
  margin-bottom: calc(2px * var(--scope-scale));
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-align: center;
}

.scope-card__desc {
  font-size: var(--scope-font-desc);
  opacity: 0.62;
  line-height: 1.45;
  text-align: center;
}

.hero-bottom-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 0 var(--container-page-side);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.hero-bottom-strip::-webkit-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .hero-bottom-strip {
    position: relative;
    height: auto;
    min-height: 56px;
    padding-block: 14px;
    flex-wrap: nowrap;
  }

  .hero-bottom-strip .hero-scroll-hint {
    display: none;
  }
}

/* ─── Site navigation ──────────────────────────────────────────── */
.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--site-nav-height, 76px);
  display: flex;
  align-items: center;
  padding: 0 var(--container-page-side);
  z-index: 5;
  box-sizing: border-box;
}

.site-nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

.site-nav--sticky {
  position: fixed;
  /* Unified with hero nav for consistent header format */
  height: var(--site-nav-height, 76px);
  background: var(--overlay-glass-white-90);
  border-bottom: 0.5px solid var(--color-border-subtle);
}

.site-nav__links {
  display: flex;
  gap: clamp(16px, 2.5vw, 32px);
  margin-left: 56px;
  flex: 1;
  min-width: 0;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  min-width: 0;
}

/* 右侧：立即申请 + 汉堡（同一 flex 组，避免挤出视口） */
.site-nav__end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: auto;
  min-width: 0;
}

.site-nav__apply-btn {
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-family-zh);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-nav__desktop-only {
  display: flex;
}

@media (max-width: 1024px) {
  .site-nav {
    gap: 8px;
    overflow-x: clip;
  }

  .site-nav__links {
    display: none !important;
  }

  .site-nav__desktop-only--wide {
    display: none !important;
  }

  /* 有汉堡时隐藏语言切换，给 Logo + CTA 腾空间 */
  .site-nav__lang {
    display: none !important;
  }

  .site-nav__brand {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }

  .site-nav__brand img {
    height: 22px !important;
    max-height: 22px;
  }

  .site-nav__end {
    gap: 8px;
    max-width: min(52vw, 220px);
  }

  .site-nav__actions {
    gap: 8px;
    min-width: 0;
  }

  .site-nav__apply-btn {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    gap: 4px;
  }

  .site-nav__apply-btn__arrow {
    display: none;
  }

  .site-nav__menu-btn {
    flex: 0 0 auto;
    margin: 0;
  }
}

/* 更窄平板：顶栏只保留 Logo + 汉堡，申请入口在抽屉 / FAB */
@media (max-width: 900px) {
  .site-nav__apply-nav {
    display: none !important;
  }

  .site-nav__end {
    max-width: none;
  }
}

/* Below 768px: hide 中/EN + 立即申请 — only logo + menu button remain */
@media (max-width: 768px) {
  .site-nav,
  .site-nav--sticky {
    height: var(--site-nav-height, 64px);
    padding: 0 16px;
  }
  .site-nav__desktop-only { display: none !important; }
  .site-nav__actions { gap: 8px; }
}

.site-nav__menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0.5px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .site-nav__menu-btn {
    display: inline-flex;
  }
}

.site-nav--glass .site-nav__menu-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* StickyNav hidden: off-screen + no hit-testing (avoid blocking hero menu) */
.site-nav--sticky[data-shown="false"] {
  pointer-events: none;
  visibility: hidden;
}

/* Mobile drawer — portaled to body; slides in from the right */
.nav-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.nav-drawer-root .nav-drawer-backdrop,
.nav-drawer-root .nav-drawer {
  pointer-events: auto;
}

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.nav-drawer-backdrop.is-visible {
  opacity: 1;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(300px, 86vw);
  padding: 20px 20px 28px;
  background: #ffffff;
  border-left: 0.5px solid var(--color-border-subtle);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-drawer.is-visible {
  transform: translateX(0);
}

.nav-drawer--glass {
  background: rgba(12, 13, 21, 0.96);
  border-left-color: rgba(255, 255, 255, 0.12);
  box-shadow: -8px 0 48px rgba(0, 0, 0, 0.35);
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.nav-drawer__title {
  font-family: var(--font-family-zh);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.nav-drawer--glass .nav-drawer__title {
  color: rgba(255, 255, 255, 0.9);
}

.nav-drawer__close {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0.5px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-drawer--glass .nav-drawer__close {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.nav-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-drawer__links a {
  display: block;
  padding: 14px 14px;
  border-radius: var(--radius-lg);
  font-family: var(--font-family-zh);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  color: var(--color-text-secondary);
}

.nav-drawer__links a:hover,
.nav-drawer__links a.is-active {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font-weight: 500;
}

.nav-drawer--glass .nav-drawer__links a {
  color: rgba(255, 255, 255, 0.82);
}

.nav-drawer--glass .nav-drawer__links a:hover,
.nav-drawer--glass .nav-drawer__links a.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nav-drawer__cta {
  margin-top: auto;
  padding-top: 20px;
  flex-shrink: 0;
}

.nav-drawer__cta a {
  display: flex !important;
  justify-content: center;
  width: 100%;
}

/* ─── Apply page ───────────────────────────────────────────────── */
.apply-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 4vw, 56px);
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .apply-layout {
    grid-template-columns: 1fr;
  }

  .apply-sidebar {
    order: -1;
  }
}

@media (max-width: 640px) {
  .apply-form-card {
    padding: 24px !important;
  }
}

.apply-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .apply-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Final CTA ────────────────────────────────────────────────── */
.final-cta-section {
  padding-block: clamp(80px, 12vw, 140px);
}

.final-cta-title {
  font-size: clamp(32px, 7vw, 64px) !important;
}

/* ─── FAB — bottom-right ───────────────────────────────────────── */
.floating-apply-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: auto;
  z-index: 90;
}

@media (max-width: 768px) {
  .floating-apply-fab {
    bottom: 16px;
    right: 16px;
  }
}

@media (max-width: 1024px) {
  .floating-apply-fab {
    bottom: 80px;
  }
}

/* ─── Utility ──────────────────────────────────────────────────── */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}