:root {
  /* Colors — Figma Design Tokens */
  --bg-page: #ffffff;
  --bg-subtle: #f7f8fa;
  --bg-elevated: #ffffff;
  --bg-inverse: #0a0a0a;

  --brand-primary: #003a9b;
  --brand-primary-soft: #eef2fb;
  --brand-accent: #ff8c00;
  --brand-accent-soft: #fff4e6;
  --brand-shopify: #2aae67;
  --brand-shopify-deep: #377e62;
  --17blue: #0007b7;

  --text-primary: #0a0a0a;
  --text-secondary: #5c6370;
  --text-tertiary: #8a919c;
  --text-on-brand: #ffffff;
  --text-link: #003a9b;

  --border-default: #e6e8ec;
  --border-strong: #d0d4dc;
  --border-focus: #003a9b;

  --success: #18a058;
  --success-soft: rgba(42, 174, 103, 0.1);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;

  /*
       * Vertical rhythm (modules)
       * --sec-y:        section top/bottom padding
       * --sec-head-gap: title block → content (cards / grid)
       * --sec-title-desc: h1/h2 → lead/description
       * --sec-cta-gap:  copy block → CTA row
       * Fluid type scales with viewport; clamp keeps desktop norms.
       */
  --sec-y: clamp(64px, 8vw, 136px);
  --sec-y-tight: clamp(48px, 6vw, 96px);
  --sec-head-gap: clamp(28px, 4vw, 56px);
  --sec-title-desc: clamp(12px, 1.4vw, 18px);
  --sec-cta-gap: clamp(20px, 2.5vw, 28px);

  /* Type scale — follow desktop hierarchy, shrink on narrow screens */
  --fs-display: clamp(27px, calc(18px + 2.5vw), 52px);
  --fs-h2: clamp(21.5px, calc(14.84px + 1.85vw), 40px);
  --fs-h3: clamp(16px, calc(13.84px + 0.6vw), 22px);
  --fs-lead: clamp(14px, calc(12.92px + 0.3vw), 17px);
  --fs-body: clamp(13px, calc(11.92px + 0.3vw), 16px);
  --fs-small: clamp(12px, 1.1vw, 13px);

  /* Content shell: 1440px · horizontal padding scales down on tablet/phone */
  --max: 1440px;
  --max-wide: 1440px;
  --page-pad-x: clamp(16px, 3.2vw, 24px);
  /* 顶栏实测覆盖；过小会导致 features 标题 sticky 钻进 header 背后 */
  --topbar-h: 64px;
  --ai-content-h: calc(100vh - var(--topbar-h) - 100px);
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 10, 10, 0.06);
  --shadow-lg: 0 20px 50px rgba(10, 10, 10, 0.1);
  --shadow-xl: 0 28px 70px rgba(10, 10, 10, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* slightly tighter type tracking site-wide */
  --track-body: -0.015em;
  --track-title: -0.03em;
}

* {
  box-sizing: border-box;
  font-family: var(--yq-font-inter), Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
html {
  scroll-behavior: auto;
}
body {
  margin: 0;
  font-family: var(--yq-font-inter), Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: var(--track-title);
}
h1 {
  font-size: var(--fs-display);
  line-height: 1.12;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
}
.lead {
  font-size: var(--fs-lead);
  font-weight: 400;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
.glass-shell a,
.glass-shell a:hover,
.glass-shell a:focus,
.glass-shell a:focus-visible {
  text-decoration: none !important;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
/* overflow-x:clip breaks position:sticky descendants — keep page open */
.page {
  min-height: 100vh;
  overflow-x: visible;
  padding-bottom: 0;
}

/*
     * Long-page memory: skip layout/paint for far-off sections (no visual change when scrolled in).
     * Do NOT apply to sticky/pin tracks (impact / features / ai-intro).
     */
.credentials,
.brands-say,
.site-footer,
.section.alt:not(.features-section) {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

/* ——— Nav (Figma component) ——— */
.topbar {
  position: sticky;
  top: 0;
  z-index: 200; /* above pill fixed dots / rail scrub */
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--border-default);
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}
/* 深色区块上：不透明度拉高，避免透出背景发脏 */
.topbar.topbar-on-dark {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-4) var(--page-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  box-sizing: border-box;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 40px;
  min-width: 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 20px;
  line-height: 0;
}
/* 整标一体，禁止拆成两图再 gap */
.logo img,
.logo svg {
  display: block;
  height: 20px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  font-weight: 500;
  line-height: 20px;
  color: var(--text-secondary);
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease);
  white-space: nowrap;
}
.nav-item:hover,
.nav-item.active {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  border-radius: var(--radius-pill);
}
.nav-item img {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}
.nav-item:hover img,
.nav-item.active img {
  opacity: 1;
  filter: none;
}
.nav-divider {
  width: 1px;
  height: 16px;
  background: var(--border-default);
  flex: 0 0 auto;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--space-2);
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  font-weight: 500;
  line-height: 20px;
  color: var(--17blue);
  white-space: nowrap;
}
.btn-text img {
  width: 16px;
  height: 16px;
}

/* Split pill buttons — Figma Sign up / Shopify App */
.btn-split {
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  transition: filter 0.18s var(--ease);
}
.btn-split:hover {
  filter: brightness(1.08);
  transform: none;
  box-shadow: none;
}
.btn-split.shopify:hover {
  filter: brightness(1.08);
  box-shadow: none;
}
.btn-split .main {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 16px;
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  font-weight: 500;
  line-height: 20px;
  color: #fff;
  white-space: nowrap;
}
.btn-split .caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-height: 36px;
  padding-right: 8px;
}
.btn-split .caret img,
.btn-split .main img {
  width: 16px;
  height: 16px;
}
.btn-split.primary .main,
.btn-split.primary .caret {
  background: var(--brand-primary);
}
.btn-split.shopify .main,
.btn-split.shopify .caret {
  background: var(--brand-shopify-deep);
}

/* Generic buttons — hover 只用亮度，不用投影 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: clamp(12.5px, calc(11.6px + 0.25vw), 15px);
  font-weight: 600;
  line-height: 22px;
  box-shadow: none;
  transition:
    filter 0.18s var(--ease),
    background 0.18s var(--ease),
    border-color 0.18s var(--ease),
    color 0.18s var(--ease);
}
.btn:hover {
  filter: brightness(1.06);
  box-shadow: none;
  transform: none;
}
.btn.primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn.primary:hover {
  filter: brightness(1.1);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: none;
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
.btn.ghost:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
  filter: brightness(1.04);
  transform: none;
  box-shadow: none;
}
.btn.light {
  background: #fff;
  border-color: #fff;
  color: var(--text-primary);
}
.btn.light:hover {
  filter: brightness(0.96);
  box-shadow: none;
}
.btn.outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.btn.outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  filter: brightness(1.08);
  box-shadow: none;
}

/* Start free trial — primary 蓝底 + 内层 shader；钮固定右侧（2026-09-21 Park：去 hover 滑动） */
.btn-switch {
  --sw-pad: 4px;
  --sw-knob: 36px;
  --sw-h: 44px;
  --sw-gap: 10px;
  --sw-dur: 0.48s;
  --sw-ease: cubic-bezier(0.65, 0, 0.35, 1);
  /* 贴近 --brand-primary #003a9b */
  --sw-bg0: #002f80;
  --sw-bg1: #0a4bb8;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--sw-h);
  min-height: var(--sw-h);
  min-width: 188px;
  /* 钮在右：文案落在左侧空档 */
  padding: var(--sw-pad);
  padding-left: calc(var(--sw-pad) + 14px);
  padding-right: calc(var(--sw-pad) + var(--sw-knob) + var(--sw-gap));
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(160, 190, 255, 0.28);
  background: linear-gradient(
    180deg,
    var(--sw-bg1) 0%,
    var(--brand-primary) 48%,
    var(--sw-bg0) 100%
  );
  color: #f5f8ff;
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 3px rgba(0, 40, 110, 0.28) !important;
  filter: none !important;
  transform: none !important;
}
/* 内层 shader：偏 primary 蓝光雾（border-beam 占用 ::before/::after） */
.btn-switch-shader {
  position: absolute !important;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0 !important;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 75% 95% at 14% 30%,
      rgba(120, 175, 255, 0.45),
      transparent 58%
    ),
    radial-gradient(
      ellipse 60% 80% at 88% 70%,
      rgba(40, 100, 220, 0.35),
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 55% at 50% 110%,
      rgba(0, 58, 155, 0.25),
      transparent 52%
    ),
    radial-gradient(
      ellipse 40% 45% at 70% 8%,
      rgba(180, 210, 255, 0.2),
      transparent 50%
    );
  mix-blend-mode: soft-light;
  opacity: 0.9;
  animation: btn-switch-shader-flow 7.5s ease-in-out infinite alternate;
  will-change: filter, transform, opacity;
}
@keyframes btn-switch-shader-flow {
  0% {
    filter: hue-rotate(-6deg) brightness(0.98) saturate(1.05);
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 0.82;
  }
  50% {
    filter: hue-rotate(8deg) brightness(1.1) saturate(1.15);
    transform: scale(1.05) translate3d(2%, -2%, 0);
    opacity: 0.96;
  }
  100% {
    filter: hue-rotate(14deg) brightness(1.04) saturate(1.1);
    transform: scale(1.02) translate3d(-2%, 2%, 0);
    opacity: 0.88;
  }
}
.btn-switch-knob {
  /* 钮固定右侧，不滑动 */
  --sw-knob-w: var(--sw-knob);
  position: absolute !important;
  right: var(--sw-pad);
  top: 50%;
  width: var(--sw-knob-w);
  height: var(--sw-knob);
  margin-top: calc(var(--sw-knob) / -2);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #eef2fb 100%);
  color: var(--brand-primary);
  z-index: 5 !important;
  box-shadow:
    0 1px 3px rgba(0, 30, 90, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  pointer-events: none;
}
.btn-switch-knob svg {
  width: 18px;
  height: 18px;
  display: block;
}
/*
     * 白钮 morph keyframes 已随 hover 滑动移除（2026-09-21 Park：按钮保持静息态）
     */
@media (prefers-reduced-motion: reduce) {
  .btn-switch-shader {
    animation: none;
  }
}
.btn-switch-label {
  position: relative !important;
  z-index: 4 !important;
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 30, 80, 0.28);
}
.btn-switch .btn-switch-label,
.btn-switch:hover .btn-switch-label,
.btn-switch:focus-visible .btn-switch-label {
  color: #f5f8ff !important;
  -webkit-text-fill-color: #f5f8ff !important;
}
.btn-switch:hover,
.btn-switch:focus-visible {
  color: #f5f8ff !important;
  filter: none !important;
  transform: none !important;
}
.btn-switch:focus-visible {
  outline: 2px solid rgba(0, 58, 155, 0.45);
  outline-offset: 3px;
}
/* bottom CTA：同 primary 家族，略深一点压在黑底上 */
.btn-switch.on-dark {
  border-color: rgba(160, 190, 255, 0.32);
  background: linear-gradient(
    180deg,
    #0a4bb8 0%,
    var(--brand-primary) 50%,
    #002a75 100%
  );
  color: #f5f8ff;
}
.btn-switch.on-dark .btn-switch-knob {
  background: linear-gradient(180deg, #ffffff 0%, #eef2fb 100%);
  color: var(--brand-primary);
}
.btn-switch.on-dark:hover,
.btn-switch.on-dark:focus-visible {
  filter: none !important;
  transform: none !important;
}
.ai-think .btn-switch {
  width: 100%;
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .btn-switch-shader {
    animation: none;
  }
}
/* 次要按钮：白底描边，全圆角 */
.btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 58, 155, 0.22);
  background: #fff;
  color: var(--brand-primary);
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  font-weight: 600;
  text-decoration: none;
  box-shadow: none !important;
  filter: none !important;
  transition:
    filter 0.18s var(--ease),
    background 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.btn-demo:hover {
  filter: brightness(0.97);
  background: var(--brand-primary-soft);
  border-color: var(--brand-primary);
  box-shadow: none !important;
  transform: none !important;
}
.btn-demo.on-dark {
  border-color: rgba(255, 140, 0, 0.55);
  background: transparent;
  color: #ffb347;
}
.btn-demo.on-dark:hover {
  filter: brightness(1.12);
  background: rgba(255, 140, 0, 0.12);
  border-color: var(--brand-accent);
  color: #ffc978;
}
.ai-think .btn-demo {
  width: 100%;
  box-sizing: border-box;
}

/* ——— Hero ——— */
.hero {
  position: relative;
  /* fit content — do not force 80vh empty sky */
  min-height: 0;
  display: flex;
  align-items: center;
  /* Fallback when particle earth WebGL unavailable */
  background:
    radial-gradient(
      ellipse 80% 70% at 50% 45%,
      rgba(186, 210, 245, 0.35),
      transparent 65%
    ),
    linear-gradient(180deg, #f5f9ff 0%, #e8f0fb 55%, #eef3fb 100%);
  /* float cards hang outside the mock — do not clip */
  overflow: visible;
}
.hero-undertones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  /* match hero sky so WebGL init never flashes black */
  background: linear-gradient(180deg, #f5f9ff 0%, #e8f0fb 55%, #eef3fb 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero-undertones.is-ready {
  opacity: 1;
}
.hero.hero-shader-fallback .hero-undertones {
  display: none;
}
/* 极淡网格，不抢粒子地球 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(0, 58, 155, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 58, 155, 0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.28), transparent 80%);
  pointer-events: none;
  opacity: 0.4;
}

/* ——— 页面滚动容器（默认 document 滚动，绝不锁死） ——— */
.glass-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
}
/* 仅 html-in-canvas 时：壳子锁视口，内容在 #glass-content 内滚 */
html.glass-html-in-canvas .glass-shell {
  height: 100vh;
  overflow: hidden;
}
#glass-source {
  display: none;
}
html.glass-html-in-canvas #glass-source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#glass-content {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
  background: var(--bg-page);
}
html.glass-html-in-canvas #glass-content {
  height: 100%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* 对齐 Glass.tsx：output 覆盖全视口，pointer-events:none，透镜由 WebGL scissor */
#glass-output {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 55;
  display: none;
}
html.glass-mode-liquid.glass-webgl-ready #glass-output,
html.glass-html-in-canvas.glass-mode-liquid #glass-output {
  display: block;
}

.product-dock {
  --dock-bottom: 22px;
  position: fixed;
  left: 50%;
  bottom: var(--dock-bottom);
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
  padding: 0 16px;
  max-width: calc(100vw - 24px);
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.35s;
}
/* AI Lab intro / cases 区域时隐藏底栏 tab */
.product-dock.is-hidden-by-intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px);
}
.product-dock .tabs {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  min-width: max-content;
  isolation: isolate;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

/* 默认毛玻璃（浅底） */
.product-dock .tabs,
html.glass-mode-frosted .product-dock .tabs,
html.glass-mode-liquid:not(.glass-webgl-ready) .product-dock .tabs {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
  backdrop-filter: blur(20px) saturate(1.6) brightness(1.05);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
}
/* 深色区域：自动反色毛玻璃（特异性压过默认浅色） */
html.glass-mode-frosted .product-dock.dock-on-dark .tabs,
html.glass-mode-liquid:not(.glass-webgl-ready) .product-dock.dock-on-dark .tabs,
.product-dock.dock-on-dark .tabs {
  background: rgba(18, 18, 22, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.4) brightness(0.95);
  backdrop-filter: blur(22px) saturate(1.4) brightness(0.95);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
/* liquid + WebGL：壳透明交给透镜；文字/选中态仍走 dock-on-dark 反色 */
html.glass-mode-liquid.glass-webgl-ready .product-dock .tabs,
html.glass-html-in-canvas.glass-mode-liquid .product-dock .tabs {
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html.glass-mode-liquid.glass-webgl-ready .product-dock.dock-on-dark .tabs,
html.glass-html-in-canvas.glass-mode-liquid .product-dock.dock-on-dark .tabs {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
html.glass-mode-solid .product-dock .tabs {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border-default);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 10px 40px rgba(10, 10, 10, 0.12);
}

.product-dock .tab {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  color: rgba(40, 48, 60, 0.72);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  /* longer soft ease — avoid hard black/white snap */
  transition:
    background 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 0.35s ease,
    opacity 0.35s ease;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  background: transparent;
}
.product-dock .tab:hover {
  color: rgba(10, 10, 10, 0.88);
  background: rgba(15, 23, 42, 0.05);
}
.product-dock .tab.active {
  color: rgba(255, 255, 255, 0.96);
  /* soft charcoal — not pure black; edge blends into dock */
  background: linear-gradient(
    165deg,
    #4b4f58 0%,
    #2f323a 38%,
    #23262e 72%,
    #1c1e24 100%
  );
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow:
        /* outer soft halo — blurs hard black/white cut */
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 10px 2px rgba(255, 255, 255, 0.22),
    0 4px 14px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
/* 深色底：文字/选中反色（含 liquid，特异性压过默认） */
html.glass-mode-frosted .product-dock.dock-on-dark .tab,
html.glass-mode-liquid .product-dock.dock-on-dark .tab,
.product-dock.dock-on-dark .tab {
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  background: transparent;
}
html.glass-mode-frosted .product-dock.dock-on-dark .tab:hover,
html.glass-mode-liquid .product-dock.dock-on-dark .tab:hover,
.product-dock.dock-on-dark .tab:hover {
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.08);
}
html.glass-mode-frosted .product-dock.dock-on-dark .tab.active,
html.glass-mode-liquid .product-dock.dock-on-dark .tab.active,
.product-dock.dock-on-dark .tab.active {
  color: #1a1c22;
  background: linear-gradient(165deg, #ffffff 0%, #f4f5f8 45%, #e8eaef 100%);
  text-shadow: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 12px 2px rgba(255, 255, 255, 0.2),
    0 4px 14px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}
/* 深色底栏 + border beam：边线交给 beam，避免双描边 */
.product-dock.dock-on-dark .tabs[data-beam] {
  border-color: rgba(255, 255, 255, 0.08);
}
.product-dock .tabs[data-beam] {
  /* beam 层 overflow；内容仍可点 */
  overflow: hidden;
}
.product-dock .tabs[data-beam] > .tab {
  z-index: 4;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  /* tighter vertical padding → shorter hero band */
  padding: 40px var(--page-pad-x) 36px;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  /* right column wider so tracking mock reads larger */
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.35fr);
  gap: 28px 32px;
  align-items: center;
}
.eyebrows {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  box-shadow: var(--shadow-sm);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
}
.badge.shopify {
  border-color: rgba(42, 174, 103, 0.28);
  background: var(--success-soft);
  color: #176b3f;
}
.badge.shopify::before {
  background: var(--brand-shopify);
}
/* Hero: official Built for Shopify mark */
.badge-shopify-img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
}

.hero h1 {
  margin: 0;
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--track-title);
  max-width: 16ch;
}
.hero .lead {
  margin: var(--sec-title-desc) 0 0;
  max-width: 36em;
  color: var(--text-secondary);
  font-size: var(--fs-lead);
  line-height: 1.65;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sec-cta-gap);
  align-items: center;
}
.cta-note {
  margin-top: 14px;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 20px;
}

/* Hero visual — flat product stage (no 3D rotate) */
.visual {
  --fc-radius: 18px;
  --fc-blur: 28px;
  position: relative;
  min-height: 0;
  /* larger mock — was 520, cramped tracking UI */
  max-width: 780px;
  width: 100%;
  margin-left: auto;
  padding: 4px 0 12px 0;
  box-sizing: content-box;
  overflow: visible;
  display: grid;
  align-items: end;
}
.visual::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 78%;
  height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 70% 55% at 50% 70%,
    rgba(37, 99, 235, 0.14) 0%,
    rgba(99, 102, 241, 0.06) 42%,
    transparent 72%
  );
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}
.hero:has(.visual) {
  overflow: visible;
}

.visual-asm {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin-left: auto;
  min-height: 0;
  z-index: 1;
}
.visual .browser {
  max-width: 780px;
  position: relative;
  z-index: 1;
}
.browser {
  width: 100%;
  max-width: 780px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 20px;
  background: #fbfbfc;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85) inset,
    0 1px 1px rgba(15, 23, 42, 0.03),
    0 12px 24px -10px rgba(15, 23, 42, 0.1),
    0 36px 64px -20px rgba(15, 23, 42, 0.16),
    0 64px 100px -36px rgba(15, 23, 42, 0.12);
  overflow: hidden; /* clip OGL page to chrome */
}

/* idle float — pure 2D, no 3D transform */
.visual .float-card-metric {
  animation: float-y-a 6.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.visual .float-card-video {
  animation: float-y-video 7.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.visual .float-card-rec {
  animation: float-y-b 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .visual .float-card {
    animation: none !important;
  }
}
.browser-top {
  height: 42px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: linear-gradient(180deg, #fcfcfd 0%, #f4f4f6 100%);
  border-radius: 19px 19px 0 0;
  overflow: hidden;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e4e4e7;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.dot:nth-child(1) {
  background: #ff5f57;
}
.dot:nth-child(2) {
  background: #febc2e;
}
.dot:nth-child(3) {
  background: #28c840;
}
.browser-url {
  margin-left: 8px;
  flex: 1;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #71717a;
  font-size: 11px;
  font-weight: 450;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  max-width: 240px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.browser-url-lock {
  width: 10px;
  height: 10px;
  opacity: 0.45;
  flex: 0 0 auto;
}
.browser-top-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.browser-top-actions i {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.05);
}

/*
     * Hero browser — larger tracking mock, height = content (no empty hero band)
     */
.hero-ogl {
  position: relative;
  height: 580px;
  overflow: hidden;
  border-radius: 0 0 19px 19px;
  background: #f4f2ef;
  color: #1a1a1a;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
}
.hero-ogl .ogl-page {
  width: 100%;
  background: #f4f2ef;
  pointer-events: none;
}
.hero-ogl .ogl-nav {
  position: relative;
  padding: 12px 18px;
}
.hero-ogl .ogl-logo {
  font-size: 17px;
  letter-spacing: 0.26em;
}
.hero-ogl .ogl-nav-links {
  gap: 14px;
  font-size: 11px;
}
.hero-ogl .ogl-nav-icons svg {
  width: 15px;
  height: 15px;
}
.hero-ogl .ogl-hero {
  height: 280px;
  min-height: 280px;
}
.hero-ogl .ogl-track-float {
  width: min(88%, 320px);
  padding: 16px 16px 14px;
  border-radius: 8px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}
.hero-ogl .ogl-track-float h3 {
  font-size: 11.5px;
  margin-bottom: 10px;
  letter-spacing: 0.12em;
}
.hero-ogl .ogl-fields {
  gap: 8px;
  margin-bottom: 9px;
}
.hero-ogl .ogl-fields input {
  padding: 9px 11px;
  font-size: 12.5px;
  border-radius: 4px;
}
.hero-ogl .ogl-track-btn {
  padding: 10px 12px;
  font-size: 11px;
  border-radius: 4px;
  letter-spacing: 0.12em;
}
.hero-ogl .hero-ogl-status {
  max-width: none;
  margin: 0;
  padding: 18px 18px 20px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.9fr);
  gap: 16px;
  align-items: start;
}
.hero-ogl .ogl-status-main h2 {
  font-size: 19px;
  margin: 0 0 5px;
  letter-spacing: -0.025em;
}
.hero-ogl .ogl-status-main .ogl-sub {
  font-size: 12.5px;
  margin: 0 0 11px;
  color: #6b6660;
}
.hero-ogl .ogl-note {
  margin-bottom: 12px;
  padding: 10px 11px;
  border-radius: 10px;
}
.hero-ogl .ogl-note strong {
  font-size: 12px;
}
.hero-ogl .ogl-note span {
  font-size: 11px;
}
.hero-ogl .ogl-tl-item {
  padding-bottom: 11px;
  grid-template-columns: 16px 1fr;
  gap: 9px;
}
.hero-ogl .ogl-tl-dot {
  width: 11px;
  height: 11px;
  margin-top: 3px;
  box-shadow: 0 0 0 2.5px #f4f2ef;
}
.hero-ogl .ogl-tl-item:not(:last-child)::before {
  left: 4.5px;
  top: 15px;
}
.hero-ogl .ogl-tl-item.active .ogl-tl-dot {
  box-shadow:
    0 0 0 2.5px #f4f2ef,
    0 0 0 4.5px rgba(26, 26, 26, 0.12);
}
.hero-ogl .ogl-tl-body strong {
  font-size: 12.5px;
  margin-bottom: 2px;
}
.hero-ogl .ogl-tl-time,
.hero-ogl .ogl-tl-loc {
  font-size: 11px;
}
.hero-ogl .ogl-order-card {
  padding: 14px 13px 12px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(40, 30, 20, 0.06);
}
.hero-ogl .ogl-order-card h4 {
  font-size: 11px;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.hero-ogl .ogl-order-row {
  font-size: 12px;
  margin-bottom: 6px;
}
.hero-ogl .ogl-order-item {
  gap: 9px;
  margin-top: 9px;
}
.hero-ogl .ogl-order-item img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.hero-ogl .ogl-order-item .t {
  font-size: 12px;
}
.hero-ogl .ogl-order-item .m {
  font-size: 11px;
}
.track-page {
  display: none;
}
/* Hero track mock — delivered card (matches product UI reference) */
.tp-head {
  text-align: center;
  padding: 10px 8px 22px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.tp-head-title {
  margin: 0;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #111;
}
.tp-head-date {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #3f3f46;
  letter-spacing: -0.01em;
}
.tp-head-sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: #a1a1aa;
  font-weight: 450;
}
.tp-section {
  padding: 18px 2px 8px;
  flex: 1;
}
.tp-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.tp-section-bar strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #18181b;
}
.tp-lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #52525b;
}
.tp-lang svg {
  width: 12px;
  height: 12px;
  opacity: 0.55;
}
.tp-carrier {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}
.tp-carrier-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f4f4f5;
  display: grid;
  place-items: center;
}
.tp-carrier-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tp-carrier-meta {
  min-width: 0;
}
.tp-carrier-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #18181b;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.tp-carrier-num {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11.5px;
  color: #a1a1aa;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.tp-carrier-num .tp-blur {
  filter: blur(3.5px);
  user-select: none;
  opacity: 0.85;
}
.tp-carrier-num svg {
  width: 12px;
  height: 12px;
  opacity: 0.4;
  flex: 0 0 auto;
}
.tp-share {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #71717a;
  border: 1px solid transparent;
}
.tp-share svg {
  width: 15px;
  height: 15px;
  display: block;
}
.tp-timeline {
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 2px;
  flex: 1;
  align-content: start;
}
.tp-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 0 0 20px;
}
.tp-tl-item:last-child {
  padding-bottom: 8px;
}
.tp-tl-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tp-tl-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-sizing: border-box;
  z-index: 1;
  background: #fff;
  border: 1.5px solid #d4d4d8;
}
.tp-tl-item.is-done .tp-tl-dot {
  border: none;
  background: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
  color: #fff;
  display: grid;
  place-items: center;
}
.tp-tl-item.is-done .tp-tl-dot svg {
  width: 9px;
  height: 9px;
  display: block;
}
.tp-tl-item:not(:last-child) .tp-tl-rail::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: -2px;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: #e4e4e7;
}
.tp-tl-item.is-done:not(:last-child) .tp-tl-rail::after {
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.35), #e4e4e7 70%);
}
.tp-tl-body {
  min-width: 0;
  padding-top: 0;
}
.tp-tl-time {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: #18181b;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.tp-tl-item:not(.is-done) .tp-tl-time {
  color: #71717a;
  font-weight: 500;
}
.tp-tl-desc {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #3f3f46;
  letter-spacing: -0.01em;
}
.tp-tl-item:not(.is-done) .tp-tl-desc {
  color: #a1a1aa;
}
.tp-tl-more {
  display: inline-block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: #18181b;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tp-order {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.tp-order > strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #18181b;
  margin-bottom: 10px;
}
.tp-protect {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f4f7ff;
  border: 1px solid rgba(59, 130, 246, 0.08);
}
.tp-protect-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.tp-protect-ico svg {
  width: 14px;
  height: 14px;
  display: block;
}
.tp-protect-label {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #18181b;
  letter-spacing: -0.015em;
}
.tp-protect-badge {
  font-size: 12px;
  font-weight: 600;
  color: #3b82f6;
  letter-spacing: -0.01em;
}
/* 顶部订单面板：材质感（噪点 + 多层光 + 实色），非廉价渐变 */
.mock-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: stretch;
  padding: 14px 14px 12px;
  border-radius: 12px;
  color: #fff;
  min-height: 148px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 12px 28px -16px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  background-color: #0e1118;
  background-image:
        /* 细噪点质感 */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    /* 顶缘冷光 */
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 28%),
    /* 右上弱高光 */
    radial-gradient(
        ellipse 70% 55% at 92% 8%,
        rgba(120, 160, 255, 0.16),
        transparent 55%
      ),
    /* 左下深色体积 */
    radial-gradient(
        ellipse 65% 70% at 8% 100%,
        rgba(0, 40, 110, 0.45),
        transparent 58%
      ),
    /* 主体实色分层 */
    linear-gradient(165deg, #141820 0%, #10141c 38%, #0c1220 72%, #0a0e16 100%);
}
.mock-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -12deg,
    transparent 0,
    transparent 11px,
    rgba(255, 255, 255, 0.012) 11px,
    rgba(255, 255, 255, 0.012) 12px
  );
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.mock-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.28), transparent);
  pointer-events: none;
}
.mock-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 0;
}
.mock-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: #a7f3d0;
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0.01em;
}
.mock-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.22);
}
.mock-order-id {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.mock-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: #f4f4f5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.mock-title em {
  font-style: normal;
  color: #fff;
  font-weight: 650;
}
.mock-sub {
  margin-top: 6px;
  color: rgba(228, 228, 231, 0.55);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 32em;
}
.mock-eta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mock-chip strong {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
}
.product-card {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  background: rgba(8, 10, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px;
  display: grid;
  align-content: start;
  gap: 8px;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 24px -10px rgba(0, 0, 0, 0.55);
}
.product-thumb {
  height: 68px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  background: #12151c;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.product-meta {
  display: grid;
  gap: 3px;
}
.product-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.product-sku {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.01em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.product-price {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: -0.02em;
}
/* 事件时间线 */
.mock-feed {
  display: grid;
  gap: 0;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  overflow: hidden;
}
.mock-feed-item {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 9px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}
.mock-feed-item:first-child {
  border-top: 0;
}
.mock-feed-item.is-current {
  background: linear-gradient(90deg, rgba(0, 58, 155, 0.04), transparent 70%);
}
.mock-feed-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: #d4d4d8;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(15, 23, 42, 0.06);
}
.mock-feed-item.is-done .mock-feed-dot {
  background: #22c55e;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(34, 197, 94, 0.15);
}
.mock-feed-item.is-current .mock-feed-dot {
  background: var(--brand-primary);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(0, 58, 155, 0.14);
}
.mock-feed-body strong {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #18181b;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.mock-feed-body span {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  color: #71717a;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.mock-feed-time {
  font-size: 10px;
  color: #a1a1aa;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 2px;
}
.mock-notify {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.mock-notify-ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  border: 1px solid rgba(0, 58, 155, 0.1);
}
.mock-notify-ico svg {
  width: 12px;
  height: 12px;
  display: block;
}
.mock-notify strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #18181b;
  letter-spacing: -0.02em;
}
.mock-notify span {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  color: #71717a;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.status {
  min-height: 0;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 10px;
  padding: 11px 11px 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.status.done {
  border-color: rgba(34, 197, 94, 0.22);
  background: linear-gradient(180deg, #f7fdf9 0%, #f0faf4 100%);
}
.status.live {
  border-color: rgba(0, 58, 155, 0.18);
  background: linear-gradient(180deg, #f7f9fd 0%, #eef2fb 100%);
  box-shadow:
    0 0 0 1px rgba(0, 58, 155, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.status strong {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #18181b;
}
.status span {
  color: #71717a;
  font-size: 10.5px;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.status-check {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #22c55e;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}
.status-check svg {
  width: 8px;
  height: 8px;
  display: block;
}
.status-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 58, 155, 0.12);
  animation: status-live-pulse 1.8s ease-in-out infinite;
}
@keyframes status-live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(0, 58, 155, 0.12);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(0, 58, 155, 0.08);
  }
}
.progress {
  height: 3px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.06);
  overflow: hidden;
  margin-top: 10px;
}
.progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
}
.status.done .progress > i {
  background: #22c55e;
  width: 100%;
}
.status.live .progress > i {
  width: 68%;
  background: linear-gradient(90deg, var(--brand-primary), #4d7fd6);
  animation: pulse-bar 2.2s ease-in-out infinite;
}
.status:not(.done):not(.live) .progress > i {
  width: 14%;
  background: #d4d4d8;
}
@keyframes pulse-bar {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

.float-card {
  position: absolute;
  width: 200px;
  border-radius: var(--fc-radius, 18px);
  /* frosted glass — more glass, less “white sticker” */
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.68) 48%,
    rgba(248, 250, 252, 0.72) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(var(--fc-blur, 28px)) saturate(1.55);
  -webkit-backdrop-filter: blur(var(--fc-blur, 28px)) saturate(1.55);
  padding: 13px 13px 12px;
  /* layered shadow: hairline ring + soft ambient + deep cast */
  box-shadow:
    0 0 0 0.5px rgba(15, 23, 42, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -0.5px 0 rgba(15, 23, 42, 0.03) inset,
    0 2px 4px rgba(15, 23, 42, 0.03),
    0 12px 28px -8px rgba(15, 23, 42, 0.14),
    0 28px 56px -18px rgba(15, 23, 42, 0.12);
  z-index: 3;
  pointer-events: none;
  color: #0f172a;
}
/*
     * Float cards around tracking page:
     * L-top  WISMO metric | R-top  Brand video
     * L-bot  Order info   | R-bot  Product rec
     */
/* WISMO further left; video top-right; rec bottom-right — no order card */
.float-card-metric {
  left: -72px;
  top: 88px;
  bottom: auto;
  right: auto;
  width: 176px;
  z-index: 4;
}
.float-card-video {
  left: auto;
  right: -36px;
  top: 64px;
  bottom: auto;
  width: 188px;
  z-index: 5;
  padding: 11px;
}
.float-card-rec {
  left: auto;
  right: -40px;
  top: auto;
  bottom: 24px;
  width: 220px;
  z-index: 6;
  box-shadow:
    0 0 0 0.5px rgba(15, 23, 42, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(15, 23, 42, 0.03),
    0 14px 32px -10px rgba(15, 23, 42, 0.15),
    0 32px 60px -20px rgba(37, 99, 235, 0.1);
}
/* specular sheen */
.float-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.08) 28%,
    transparent 48%,
    transparent 100%
  );
  opacity: 0.9;
  z-index: 0;
}
.float-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  z-index: 0;
}
.float-card > * {
  position: relative;
  z-index: 1;
}
@keyframes float-y-a {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3.5px);
  }
}
@keyframes float-y-video {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes float-y-b {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3.5px);
  }
}
.float-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.float-card .label {
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.float-card-tag {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #15803d;
  background: rgba(240, 253, 244, 0.9);
  border: 1px solid rgba(34, 197, 94, 0.16);
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.1;
}
.float-card-tag.rec {
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.14);
  background: rgba(239, 246, 255, 0.92);
}
.float-card-tag.video {
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.14);
  background: rgba(245, 243, 255, 0.92);
}
.float-card .num {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 28px;
  line-height: 1;
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: #0b1f5c;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.float-card .num-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1;
  color: #16a34a;
  letter-spacing: 0;
}
.float-card .hint {
  display: block;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  font-weight: 450;
}

/* Brand video card */
.video-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 40%, #312e81 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 20px -8px rgba(15, 23, 42, 0.35);
  margin-bottom: 10px;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
  transform: scale(1.02);
  /* no monochrome filter — keep apparel color consistent with order items */
  filter: saturate(0.95) contrast(1.02);
}
.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.08) 0%,
    rgba(15, 23, 42, 0.42) 100%
  );
  pointer-events: none;
}
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 0 6px rgba(255, 255, 255, 0.12),
    0 8px 20px rgba(15, 23, 42, 0.28);
  color: #0f172a;
}
.video-play svg {
  width: 11px;
  height: 11px;
  margin-left: 1px;
  display: block;
}
.video-title {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 5px;
}
.video-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 450;
  letter-spacing: -0.01em;
}
.video-meta i {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
}
.mini-bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3.5px;
  align-items: end;
  height: 34px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}
.mini-bars span {
  display: block;
  border-radius: 3px;
  background: linear-gradient(180deg, #7ba4f0 0%, #1e4db7 100%);
  opacity: 0.88;
  min-height: 4px;
  box-shadow: 0 1px 2px rgba(30, 77, 183, 0.12);
}
.mini-bars span:nth-child(odd) {
  opacity: 0.68;
}
.mini-bars span:last-child {
  opacity: 0.48;
}

/* product recommendation float card */
.rec-items {
  display: grid;
  gap: 6px;
}
.rec-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 1px 2px rgba(15, 23, 42, 0.03);
}
.rec-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  background: #f1f5f9;
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.06);
}
.rec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rec-meta {
  min-width: 0;
}
.rec-meta strong {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-meta span {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 450;
}
.rec-cta {
  font-size: 10px;
  font-weight: 650;
  color: #1d4ed8;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.1);
  letter-spacing: 0.02em;
}

/* in-page recommendation strip (inside track page) */
.mock-rec-strip {
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.mock-rec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.mock-rec-head strong {
  font-size: 11.5px;
  font-weight: 650;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.mock-rec-head span {
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-rec-row {
  display: flex;
  gap: 7px;
  overflow: hidden;
}
.mock-rec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 10.5px;
  font-weight: 550;
  color: #334155;
  white-space: nowrap;
  min-width: 0;
}
.mock-rec-chip i,
.mock-rec-chip .chip-img {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  background: #e2e8f0;
}
.mock-rec-chip .chip-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mock-rec-chip .t-c {
  background: linear-gradient(145deg, #86efac, #22c55e);
}
@media (prefers-reduced-motion: reduce) {
  .float-card {
    animation: none !important;
  }
}

/* ——— Trust ——— */
.trust-band {
  background: #fff;
  /* 底边线全档去掉（2026-08-31 Park「怎么还有分割线」——桌面也不要） */
  border-bottom: 0;
  overflow: visible;
}
.trust {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 128px) var(--page-pad-x);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sec-head-gap);
}
.trust-copy {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.trust strong {
  display: block;
  font-size: clamp(15px, calc(13.92px + 0.3vw), 18px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.trust span {
  display: block;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  line-height: 1.5;
}
/* Logo strip — static two rows of six, centered (Tracking 同款) */
.logos-marquee {
  overflow: visible;
  width: 100%;
}
.logos-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: min(1280px, 100%);
  margin-inline: auto;
  overflow: visible;
}
.logos-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 24px 72px;
  width: 100%;
  overflow: visible;
}
.logo-tile {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}
.logo-tile img {
  display: block;
  height: 18px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.62;
  transition: opacity 0.18s;
}
.logo-tile:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.logo-tile:hover img {
  opacity: 0.82;
}
.logo-tile img[alt="AliExpress"],
.logo-tile img[alt="Baleaf"] {
  height: 22px;
}
.logo-tile img[alt="Cainiao"] {
  height: 26px;
}
.logo-tile img[alt="eufy"] {
  height: 26px;
  opacity: 0.88;
}
.logo-tile:hover img[alt="eufy"] {
  opacity: 1;
}
.logo-tile img[alt="SHARGE"],
.logo-tile img[alt="totwoo"],
.logo-tile img[alt="Vaporesso"],
.logo-tile img[alt="GOELIA"] {
  height: 24px;
}

/* ——— Sections ——— */
.section {
  border-bottom: 1px solid var(--border-default);
}
.section.alt {
  background: var(--bg-subtle);
}
.section-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sec-y) var(--page-pad-x);
  width: 100%;
  box-sizing: border-box;
}
.section-head {
  max-width: 760px;
  margin-bottom: var(--sec-head-gap);
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: var(--brand-primary);
}
h2 {
  margin: 0;
  font-size: clamp(21.5px, calc(14.84px + 1.85vw), 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--track-title);
}
.lead {
  margin: var(--sec-title-desc) 0 0;
  color: var(--text-secondary);
  font-size: clamp(14px, calc(12.92px + 0.3vw), 17px);
  line-height: 1.65;
  letter-spacing: var(--track-body);
}
.section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: var(--sec-head-gap);
}

/*
     * Features — sticky frame model
     * 1. Module hits header → whole frame sticks (title + left + right viewport)
     * 2. Keep scrolling → right stack moves (scroll feel); left switches
     * 3. Past last panel → frame unsticks, module scrolls away together
     */
.features-section {
  position: relative;
  background: var(--bg-subtle);
  --feature-pin-top: var(--topbar-h, 64px);
  --feature-pin-gap: 36px;
  --feature-panel-gap: 24px;
  --feature-n: 4;
  /* roomy right visual */
  --feature-visual-h: min(640px, calc(100vh - var(--feature-pin-top) - 120px));
  /* no top border / shadow that reads as a seam */
  border-top: none;
  box-shadow: none;
}
.features-section > .section-inner {
  position: relative;
  z-index: 1;
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}
/* tall track: sticky frame height + travel for (n) panels */
.feature-scroll {
  position: relative;
  height: calc(
    100vh - var(--feature-pin-top) + (var(--feature-n) - 0.15) *
      (100vh - var(--feature-pin-top))
  );
  min-height: 320vh;
}
/* pinned UI — nothing in here rides up after stick */
.feature-sticky {
  position: sticky;
  top: var(--feature-pin-top);
  height: calc(100vh - var(--feature-pin-top));
  max-height: calc(100vh - var(--feature-pin-top));
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--bg-subtle);
  padding: var(--feature-pin-gap) 0 28px;
}
.features-section .section-head {
  position: relative; /* inside sticky frame — not sticky itself */
  top: auto;
  z-index: 2;
  margin: 0;
  max-width: none;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 0 0 var(--sec-head-gap);
  background: transparent;
  box-sizing: border-box;
  text-align: left;
}
.features-section .section-head-text {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 720px;
  margin: 0;
  width: auto;
}
.features-section .section-head h2 {
  font-size: clamp(26px, calc(23.12px + 0.8vw), 34px);
  line-height: 1.2;
}
.features-section .section-head .lead {
  margin-top: var(--sec-title-desc);
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  font-size: clamp(12.5px, calc(11.6px + 0.25vw), 15px);
  line-height: 1.55;
}
.features-section .feature-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  margin: 6px 0 0;
  padding: 0;
}
.features-section .feature-cta .btn-switch,
.features-section .feature-cta .btn-demo {
  flex: 0 1 auto;
}
/* body row: left switcher + right viewport — vertically centered in sticky */
.feature-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 24px 36px;
  align-items: center; /* center left + right as a block */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  /* sit in the middle of remaining sticky space under title */
  align-content: center;
}
.feature-side-wrap {
  min-width: 0;
  min-height: 0;
  height: auto;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
.feature-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
  background: transparent;
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
}
.feature-list {
  display: grid;
  gap: 22px;
  width: 100%;
  align-content: center;
  grid-auto-rows: auto;
  box-sizing: border-box;
  height: auto;
}
/* right: clipped viewport; height set by JS to panelH, then centered */
.feature-panels-col {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: var(--feature-panel-h, auto);
  max-height: 100%;
  align-self: center;
  overflow: hidden;
  /* no top/bottom mask fade */
  -webkit-mask-image: none;
  mask-image: none;
}
.feature-panels {
  display: flex;
  flex-direction: column;
  gap: var(--feature-panel-gap);
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-bottom: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.feature-panel {
  margin: 0;
  scroll-margin-top: 0;
  min-height: 0;
  flex: 0 0 auto;
  /* each panel fills the viewport column height */
  height: 100%;
  opacity: 1;
  transform: none;
  position: relative;
  z-index: 1;
  /* progressive blur while scrolling out — driven by --fp-blur / --fp-op */
  --fp-blur: 0px;
  --fp-op: 1;
  filter: blur(var(--fp-blur));
  opacity: var(--fp-op);
  will-change: filter, opacity;
  transition: none;
}
.feature-panel.is-active .feature-visual {
  /* no outer shadow — clipped by .feature-panels-col overflow */
  box-shadow: none;
}
.feature-panel .feature-visual {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.feature-panel:last-child .feature-visual {
  min-height: 0;
}

/* Impact — 100vh sticky, 2×2 big stats + upward growth curve (ref) */
/* Business impact — light blue (淡蓝) theme */
.impact-band {
  position: relative;
  color: var(--text-primary);
  border-bottom: none;
  /* 200vh → 170vh：sticky 行程约 -30%，数字/曲线跟手更快 */
  height: 170vh;
  /* same base as Features — no hard white→gray seam */
  background: var(--bg-subtle, #f7f8fa);
}
.impact-band-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  /* pale sky → features floor color (no pure-white knife edge) */
  background: linear-gradient(
    180deg,
    #f5f9ff 0%,
    #f8fbff 40%,
    #f7f8fa 78%,
    var(--bg-subtle, #f7f8fa) 100%
  );
}
.impact-bg-shader {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1;
}
/* hide CSS dotted grid — fluid shader owns the field */
.impact-band-sticky.has-impact-shader::before {
  opacity: 0.22;
}
.impact-band-sticky.has-impact-shader {
  /* match Features floor under canvas */
  background: var(--bg-subtle, #f7f8fa);
}
.impact-band-sticky.impact-shader-fallback {
  background:
    radial-gradient(
      ellipse 70% 70% at 88% 55%,
      rgba(96, 165, 250, 0.22),
      transparent 58%
    ),
    radial-gradient(
      ellipse 50% 45% at 8% 12%,
      rgba(147, 197, 253, 0.35),
      transparent 52%
    ),
    linear-gradient(
      180deg,
      #f5f9ff 0%,
      #eef5ff 45%,
      var(--bg-subtle, #f7f8fa) 100%
    );
}
/* soft dotted grid over shader */
.impact-band-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(
    rgba(37, 99, 235, 0.08) 1px,
    transparent 1px
  );
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 78%);
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.4),
    transparent 78%
  );
  pointer-events: none;
  opacity: 0.75;
}
.impact-band .section-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: var(--sec-y);
  padding-bottom: min(28vh, 220px);
}
.impact-band .section-head {
  /* wide enough for “Turn post-purchase into measurable” on one line */
  max-width: min(920px, 100%);
  margin-bottom: var(--sec-head-gap);
}
.impact-band .kicker {
  display: none;
}
.impact-band h2 {
  color: #0b1f44;
  /* line1: Turn post-purchase into · line2: measurable growth (one line) */
  max-width: none;
  font-size: clamp(34px, calc(26.08px + 2.2vw), 56px);
  letter-spacing: -0.04em;
  line-height: 1.08;
  font-weight: 700;
}
.impact-band h2 .impact-h2-l1 {
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .impact-band h2 .impact-h2-l1 {
    white-space: normal;
  }
}
.impact-band .impact-sub {
  margin: var(--sec-title-desc) 0 0;
  max-width: 34em;
  color: rgba(30, 58, 95, 0.58);
  font-size: clamp(13px, calc(11.92px + 0.3vw), 16px);
  line-height: 1.65;
}
.impact-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 80px;
  max-width: 680px;
  position: relative;
  z-index: 2;
}
.impact-stat {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  opacity: 0.35;
  transform: translateY(16px);
  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.impact-band.is-active .impact-stat {
  opacity: 1;
  transform: none;
}
.impact-band.is-active .impact-stat:nth-child(2) {
  transition-delay: 0.06s;
}
.impact-band.is-active .impact-stat:nth-child(3) {
  transition-delay: 0.12s;
}
.impact-band.is-active .impact-stat:nth-child(4) {
  transition-delay: 0.18s;
}
.impact-stat-bar {
  width: 3px;
  height: 52px;
  margin-top: 12px;
  border-radius: 99px;
  flex: 0 0 auto;
  background: var(
    --stat-bar,
    linear-gradient(180deg, #60a5fa 0%, #2563eb 100%)
  );
  box-shadow: 0 0 14px var(--stat-glow, rgba(37, 99, 235, 0.4));
  opacity: calc(0.45 + var(--metric-p, 0) * 0.55);
  transform: scaleY(calc(0.55 + var(--metric-p, 0) * 0.45));
  transform-origin: top center;
  transition: box-shadow 0.2s ease;
}
/* per-stat multi-hue palettes — more colorful than flat blue */
.impact-stat:nth-child(1) {
  --stat-bar: linear-gradient(180deg, #38bdf8 0%, #2563eb 55%, #4f46e5 100%);
  --stat-glow: rgba(56, 189, 248, 0.45);
  --metric-grad: linear-gradient(
    115deg,
    #0ea5e9 0%,
    #2563eb 32%,
    #6366f1 62%,
    #8b5cf6 100%
  );
}
.impact-stat:nth-child(2) {
  --stat-bar: linear-gradient(180deg, #a78bfa 0%, #6366f1 50%, #2563eb 100%);
  --stat-glow: rgba(139, 92, 246, 0.42);
  --metric-grad: linear-gradient(
    125deg,
    #6366f1 0%,
    #7c3aed 30%,
    #2563eb 58%,
    #06b6d4 100%
  );
}
.impact-stat:nth-child(3) {
  --stat-bar: linear-gradient(180deg, #2dd4bf 0%, #3b82f6 55%, #8b5cf6 100%);
  --stat-glow: rgba(45, 212, 191, 0.4);
  --metric-grad: linear-gradient(
    120deg,
    #14b8a6 0%,
    #0ea5e9 28%,
    #3b82f6 58%,
    #a855f7 100%
  );
}
.impact-stat:nth-child(4) {
  --stat-bar: linear-gradient(180deg, #60a5fa 0%, #818cf8 45%, #e879f9 100%);
  --stat-glow: rgba(232, 121, 249, 0.4);
  --metric-grad: linear-gradient(
    130deg,
    #3b82f6 0%,
    #6366f1 28%,
    #a855f7 58%,
    #ec4899 100%
  );
}
.impact-stat .metric {
  --metric-p: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: clamp(36px, calc(23.04px + 3.6vw), 72px);
  font-weight: 700;
  line-height: 1;
  /* letter-spacing: -0.01em; */
  font-variant-numeric: tabular-nums;
  /* scroll: muted → vivid */
  filter: saturate(calc(0.7 + var(--metric-p, 0) * 0.7))
    brightness(calc(0.92 + var(--metric-p, 0) * 0.12));
}
/* gradient on each text node; position shifts with scroll for color motion */
.impact-stat .metric-num,
.impact-stat .metric-prefix,
.impact-stat .metric-suffix {
  background-image: var(--metric-grad);
  background-size: 240% 240%;
  background-position: calc(8% + var(--metric-p, 0) * 84%)
    calc(30% + var(--metric-p, 0) * 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.impact-stat .metric-prefix,
.impact-stat .metric-suffix {
  font-size: 0.45em;
  font-weight: 650;
}
.impact-stat .metric-label {
  display: block;
  margin-top: 12px;
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  font-weight: 500;
  color: rgba(30, 64, 120, 0.5);
  letter-spacing: -0.01em;
}
/* full-bleed growth curve + soft under-curve fill (no outer stroke) */
.impact-curve {
  position: absolute;
  left: -4%;
  right: -6%;
  bottom: 0;
  height: min(64vh, 580px);
  /* above white floor veil so left of line stays visible */
  z-index: 2;
  pointer-events: none;
  --curve-p: 0;
  overflow: visible;
}
.impact-curve svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* soft reveal — no hard rectangular cut */
.impact-curve-grow {
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 max(0%, calc(var(--curve-p, 0) * 100% - 4%)),
    transparent min(100%, calc(var(--curve-p, 0) * 100% + 3%))
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 max(0%, calc(var(--curve-p, 0) * 100% - 4%)),
    transparent min(100%, calc(var(--curve-p, 0) * 100% + 3%))
  );
}
/* area fill: vertical wash under the line (30% → 0 via SVG gradient) */
.impact-curve .curve-fill {
  fill: url(#impact-area-grad);
  stroke: none;
  opacity: 1;
}
.impact-curve .curve-line {
  fill: none;
  stroke: url(#impact-curve-grad);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.35));
}
/*
     * Floor veil → Features bg (--bg-subtle), long soft ramp (no hard cut).
     */
.impact-band-sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56%;
  z-index: 1; /* under curve (2) + copy (3) */
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(247, 248, 250, 0) 0%,
    rgba(247, 248, 250, 0.35) 38%,
    rgba(247, 248, 250, 0.82) 72%,
    var(--bg-subtle, #f7f8fa) 100%
  );
}
/* soft bridge into Features (covers sticky unstick edge) */
.impact-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 120px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(247, 248, 250, 0) 0%,
    var(--bg-subtle, #f7f8fa) 70%,
    var(--bg-subtle, #f7f8fa) 100%
  );
}
.impact-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  border-right: 1px solid var(--border-default);
  font-weight: 600;
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  color: var(--text-secondary);
}
.impact-step:last-child {
  border-right: 0;
}
.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--brand-primary-soft);
}

/* left nav — flat list; active larger, idle readable, soft transitions */
.feature {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 4px 10px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
  cursor: pointer;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition:
    gap 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature:hover {
  background: transparent;
  box-shadow: none;
}
.feature.active {
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.feature.active:hover {
  opacity: 1;
}
.feature-list .icon {
  display: none;
}
.feature h3 {
  margin: 0;
  font-size: clamp(14px, calc(12.92px + 0.3vw), 17px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #64748b; /* idle: readable slate, not washed out */
  overflow-wrap: anywhere;
  word-break: break-word;
  transition:
    color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    font-weight 0.35s ease,
    letter-spacing 0.35s ease;
}
.feature:hover h3 {
  color: #475569;
}
.feature.active h3 {
  font-size: clamp(18px, calc(16.56px + 0.4vw), 22px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0f172a;
}
.feature p {
  margin: 0;
  color: #94a3b8; /* idle desc: mid gray, still clear */
  font-size: clamp(12px, calc(11.46px + 0.15vw), 13.5px);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  display: block;
  overflow: visible;
  max-height: 4.5em;
  transition:
    color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}
.feature:hover p {
  color: #788595;
}
.feature.active p {
  color: #475569;
  font-size: clamp(12px, calc(11.1px + 0.25vw), 14.5px);
}
.feature-visual {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 80% 20%, rgba(0, 58, 155, 0.08), transparent 40%),
    linear-gradient(160deg, #ffffff, #eef2fb 90%);
  padding: 20px 22px;
  min-height: 0;
  height: 100%;
  max-height: var(--feature-visual-h, 640px);
  display: grid;
  align-content: stretch;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
/* Right visual: tracking-page mock (like hero browser) + copy */
.phone-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.85fr);
  gap: 24px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}
/* compose always visible (scroll-stack; hide only caused empty right area) */
.feature-compose {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ——— Feature stage: glass modules + scroll converge ——— */
.feature-stage {
  --fx-c: 1; /* 1 = converged (active), 0 = scattered */
  position: relative;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: block; /* art only — no copy column */
  overflow: hidden;
  border-radius: calc(var(--radius-xl) - 4px);
  isolation: isolate;
}
.feature-stage-copy {
  display: none !important; /* no descriptive text in content area */
}
.feature-stage-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 80% 70% at 20% 10%,
      rgba(147, 197, 253, 0.45),
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 50% at 90% 80%,
      rgba(196, 181, 253, 0.35),
      transparent 50%
    ),
    linear-gradient(160deg, #e8eefc 0%, #dbe7fb 45%, #eef2ff 100%);
}
.feature-stage[data-theme="notify"] .feature-stage-art {
  background:
    radial-gradient(
      ellipse 70% 60% at 80% 15%,
      rgba(134, 239, 172, 0.4),
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 50% at 10% 85%,
      rgba(125, 211, 252, 0.4),
      transparent 52%
    ),
    linear-gradient(155deg, #ecfdf5 0%, #e0f2fe 55%, #f0f9ff 100%);
}
.feature-stage[data-theme="lastmile"] .feature-stage-art {
  background:
    radial-gradient(
      ellipse 65% 55% at 15% 20%,
      rgba(253, 224, 71, 0.28),
      transparent 50%
    ),
    radial-gradient(
      ellipse 70% 60% at 90% 70%,
      rgba(147, 197, 253, 0.4),
      transparent 52%
    ),
    linear-gradient(160deg, #f0f7ff 0%, #e8f0fe 45%, #eef2ff 100%);
}
/* Last-mile route map + truck along arc */
.fx-route-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.fx-route-map svg {
  display: block;
  width: 100%;
  height: 100%;
}
.fx-route-map .route-base {
  fill: none;
  stroke: rgba(148, 163, 184, 0.35);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 8;
}
.fx-route-map .route-live {
  fill: none;
  stroke: url(#fx-route-grad);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: fx-route-draw 4.5s ease-in-out infinite;
}
@keyframes fx-route-draw {
  0% {
    stroke-dashoffset: 280;
    opacity: 0.55;
  }
  15% {
    opacity: 1;
  }
  55% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
}
.fx-route-map .route-node {
  fill: #fff;
  stroke: #3b82f6;
  stroke-width: 2;
}
.fx-route-map .route-node.is-hub {
  fill: #2563eb;
  stroke: #fff;
  stroke-width: 2;
}
.fx-route-map .route-node.is-home {
  fill: #ef4444;
  stroke: #fff;
}
.fx-route-map .route-label {
  font-size: 9px;
  font-weight: 650;
  fill: #475569;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
}
.fx-route-map .fx-van-g {
  filter: drop-shadow(0 3px 5px rgba(15, 23, 42, 0.28));
}
/* pause SMIL when panel inactive — via CSS can't pause SMIL easily; JS toggles */
.feature-stage[data-theme="lastmile"]:not(.is-route-on) .route-live {
  animation-play-state: paused;
}
.feature-stage[data-theme="lastmile"].is-route-on .route-live {
  animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
  .fx-route-map .route-live {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.feature-stage[data-theme="lastmile"] .fx-main {
  /* smaller glass overlay so map stays readable */
  left: auto;
  right: 5%;
  top: 8%;
  width: 44%;
  height: auto;
  max-height: none;
  --ox: 40px;
  --oy: -28px;
}
.feature-stage[data-theme="lastmile"] .fx-float-a {
  left: 6%;
  right: auto;
  top: auto;
  bottom: 10%;
  width: 42%;
  --ox: -36px;
  --oy: 40px;
}
.feature-stage[data-theme="lastmile"] .fx-float-b {
  right: 6%;
  bottom: 10%;
  top: auto;
  width: 40%;
}
.feature-stage[data-theme="lastmile"] .fx-float-c {
  display: none;
}
.feature-stage[data-theme="split"] .feature-stage-art {
  background:
    radial-gradient(
      ellipse 60% 55% at 25% 75%,
      rgba(251, 207, 232, 0.45),
      transparent 52%
    ),
    radial-gradient(
      ellipse 65% 50% at 85% 20%,
      rgba(165, 243, 252, 0.4),
      transparent 50%
    ),
    linear-gradient(155deg, #fdf4ff 0%, #ecfeff 50%, #f8fafc 100%);
}
/* soft grid + depth */
.feature-stage-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    #000 20%,
    transparent 75%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    #000 20%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}
.fx-glass {
  position: absolute;
  z-index: 2;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 12px 32px -12px rgba(15, 23, 42, 0.18);
  color: #0f172a;
  box-sizing: border-box;
  /* converge: 0 scattered → 1 docked */
  --ox: 0px;
  --oy: 0px;
  --or: 0deg;
  --os: 1;
  transform: translate3d(
      calc(var(--ox) * (1 - var(--fx-c, 1))),
      calc(var(--oy) * (1 - var(--fx-c, 1))),
      0
    )
    rotate(calc(var(--or) * (1 - var(--fx-c, 1))))
    scale(calc(0.88 + var(--fx-c, 1) * 0.12 * var(--os, 1)));
  opacity: calc(0.35 + var(--fx-c, 1) * 0.65);
  transition: none;
  will-change: transform, opacity;
}
.fx-glass strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #0f172a;
}
.fx-glass span,
.fx-glass p {
  display: block;
  margin: 4px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: #64748b;
}
.fx-glass .fx-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.fx-glass .fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 650;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #334155;
}
.fx-glass .fx-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #22c55e;
}
.fx-glass .fx-dot.is-blue {
  background: #3b82f6;
}
.fx-glass .fx-dot.is-amber {
  background: #f59e0b;
}
.fx-glass .fx-dot.is-pink {
  background: #ec4899;
}
/* main browser shell */
.fx-main {
  left: 5%;
  top: 6%;
  width: min(64%, 440px);
  height: 86%;
  max-height: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --ox: -48px;
  --oy: 36px;
  --or: -4deg;
}
.fx-main .fx-chrome {
  flex-shrink: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.fx-main .fx-chrome i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d1d5db;
}
.fx-main .fx-chrome i:nth-child(1) {
  background: #fca5a5;
}
.fx-main .fx-chrome i:nth-child(2) {
  background: #fcd34d;
}
.fx-main .fx-chrome i:nth-child(3) {
  background: #86efac;
}
.fx-main .fx-url {
  margin-left: 6px;
  flex: 1;
  height: 16px;
  max-width: 55%;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.05);
  font-size: 9px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
}
.fx-main .fx-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.5),
    rgba(241, 245, 249, 0.65)
  );
}
.fx-hero-block {
  border-radius: 10px;
  padding: 10px 10px 8px;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.fx-hero-block.has-photo {
  min-height: 140px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fx-hero-block.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 20%,
    rgba(15, 23, 42, 0.88) 100%
  );
  z-index: 1;
}
.fx-hero-block.has-photo > * {
  position: relative;
  z-index: 2;
}
.fx-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.fx-hero-block strong {
  color: #fff;
  font-size: 13px;
}
.fx-hero-block span {
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
}
.fx-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.fx-status-grid b {
  display: block;
  text-align: center;
  padding: 8px 2px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 23, 42, 0.05);
  font-size: 9px;
  font-weight: 650;
  color: #475569;
}
.fx-status-grid b em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 8px;
  font-weight: 500;
  color: #94a3b8;
}
.fx-status-grid b.is-on {
  background: rgba(219, 234, 254, 0.9);
  color: #1d4ed8;
}
.fx-status-grid b.is-ok {
  background: rgba(220, 252, 231, 0.9);
  color: #15803d;
}
/* floating glass pieces — larger, fill the stage with main */
.fx-float-a,
.fx-float-b,
.fx-float-c {
  width: max-content;
  box-sizing: border-box;
}
.fx-float-a {
  right: 4%;
  top: 8%;
  padding: 0 0 12px;
  z-index: 4;
  width: min(240px, 36%);
  max-width: 260px;
  --ox: 56px;
  --oy: -40px;
  --or: 8deg;
  overflow: hidden;
}
/* product card: photo full-bleed on top, text padded */
.fx-float-a .fx-illus {
  height: 110px;
  margin: 0 0 10px;
  border-radius: 14px 14px 0 0;
}
.fx-float-a > strong,
.fx-float-a > span {
  padding: 0 14px;
}
.fx-float-a > strong {
  font-size: 13px;
}
.fx-float-a > span {
  margin-top: 3px;
  font-size: 11px;
}
.fx-float-b {
  right: 4%;
  bottom: 7%;
  left: auto;
  padding: 12px 14px;
  z-index: 5;
  width: min(220px, 34%);
  max-width: 240px;
  --ox: 40px;
  --oy: 52px;
  --or: -6deg;
}
.fx-float-b > strong {
  font-size: 13px;
}
.fx-float-c {
  left: 7%;
  bottom: 7%;
  right: auto;
  padding: 12px 14px;
  z-index: 3;
  width: min(180px, 28%);
  max-width: 200px;
  --ox: -44px;
  --oy: 48px;
  --or: 5deg;
}
.fx-float-c > strong {
  font-size: 13px;
}
.fx-float-c > span {
  font-size: 11px;
}
/* branded: big main browser + proportionally large floats */
.feature-stage[data-theme="branded"] .fx-main {
  left: 5%;
  top: 6%;
  width: min(62%, 420px);
  height: 86%;
  max-height: none;
}
.feature-stage[data-theme="branded"] .fx-float-a {
  right: 4%;
  top: 10%;
  width: min(240px, 34%);
  max-width: 260px;
}
.feature-stage[data-theme="branded"] .fx-float-a .fx-illus {
  height: 120px;
}
.feature-stage[data-theme="branded"] .fx-float-b {
  right: 5%;
  bottom: 8%;
  width: min(230px, 32%);
  max-width: 250px;
}
.feature-stage[data-theme="branded"] .fx-float-c {
  left: 6%;
  bottom: 8%;
  width: min(190px, 28%);
  max-width: 210px;
}
.feature-stage-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 2px 0;
  /* copy also eases in with converge */
  opacity: calc(0.45 + var(--fx-c, 1) * 0.55);
  transform: translate3d(calc((1 - var(--fx-c, 1)) * 24px), 0, 0);
}
.feature-stage-copy h3 {
  margin: 0;
  font-size: clamp(16px, calc(14.56px + 0.4vw), 20px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: #0f172a;
}
.feature-stage-copy > p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #64748b;
}
.feature-stage-copy .fx-note {
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-left: 3px solid var(--brand-primary);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.12);
}
.feature-stage-copy .fx-note strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
.feature-stage-copy .fx-note span {
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}
/* real photos inside glass cards */
.fx-illus {
  height: 52px;
  border-radius: 8px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  background: #e2e8f0;
}
.fx-illus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.fx-float-a .fx-illus img {
  object-position: center 40%;
}
.fx-thumb-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: nowrap;
}
.fx-thumb-row img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.fx-pkg-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}
.fx-pkg-pair > div {
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(15, 23, 42, 0.05);
  color: #334155;
}
.fx-pkg-pair > div img {
  width: 100%;
  height: 40px;
  object-fit: cover;
  display: block;
}
.fx-pkg-pair > div span {
  display: block;
  padding: 5px 6px 6px;
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  color: #334155;
}
.fx-pkg-pair > div em {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-weight: 500;
  font-size: 8px;
  color: #94a3b8;
}
.fx-carrier-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.fx-carrier-row img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  background: #fff;
  border-radius: 5px;
  padding: 2px;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
@media (max-width: 1024px) {
  .feature-stage {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-visual {
    max-height: none;
    height: auto;
  }
  .feature-stage-art {
    min-height: 300px;
    max-height: 420px;
  }
  .feature-stage-copy {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glass,
  .feature-stage-copy {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Browser mock = tracking page visual */
.feature-browser {
  min-width: 0;
  height: 100%;
  min-height: 0;
  border-radius: 14px;
  background: #fbfbfc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  /* no outer drop-shadow — clipped by .feature-visual overflow */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.feature-browser-top {
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  background: linear-gradient(180deg, #f8f8f9, #f1f1f3);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.feature-browser-top .dot {
  width: 7px;
  height: 7px;
}
.feature-browser-url {
  margin-left: 6px;
  flex: 1;
  max-width: 200px;
  height: 18px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: #71717a;
  font-size: 10px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
}
.feature-browser-page {
  padding: 14px;
  display: grid;
  gap: 12px;
  flex: 1 1 auto;
  align-content: stretch;
  background: linear-gradient(180deg, #f4f4f5, #ececee);
  min-height: 0;
}
.fb-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 12px;
  color: #fff;
  background:
    radial-gradient(
      ellipse 70% 55% at 92% 8%,
      rgba(120, 160, 255, 0.16),
      transparent 55%
    ),
    linear-gradient(165deg, #141820 0%, #0c1220 72%, #0a0e16 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 128px;
}
.fb-banner-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.fb-banner-copy strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fb-banner-copy span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.35;
}
.fb-product {
  border-radius: 8px;
  background: rgba(12, 14, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 7px;
  display: grid;
  gap: 6px;
  backdrop-filter: blur(12px);
}
.fb-product-img {
  height: 64px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255, 255, 255, 0.2),
      transparent 42%
    ),
    linear-gradient(145deg, #4b5568 0%, #1f2937 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* earbuds product silhouette */
.fb-product-img::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 18px;
  margin: -9px 0 0 -14px;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, #e2e8f0, #94a3b8);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}
.fb-product-img::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow:
    16px 6px 0 rgba(255, 255, 255, 0.2),
    -16px 6px 0 rgba(255, 255, 255, 0.2);
}
.fb-product-meta {
  display: grid;
  gap: 1px;
}
.fb-product-meta .name {
  font-size: 9.5px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-product-meta .price {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
}
.fb-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.fb-status span {
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 10px 6px 9px;
  font-size: 10.5px;
  font-weight: 650;
  color: #334155;
  text-align: center;
  line-height: 1.25;
}
.fb-status span em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-weight: 500;
  font-size: 8.5px;
  color: #94a3b8;
}
.fb-status span.is-done {
  background: #f0fdf4;
  border-color: rgba(34, 197, 94, 0.2);
  color: #15803d;
}
.fb-status span.is-live {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.2);
  color: #1d4ed8;
}
.fb-timeline {
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 10px 14px;
  display: grid;
  gap: 0;
  flex: 1 1 auto;
}
.fb-timeline div {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px 0;
  font-size: 11.5px;
  color: #475569;
  border-top: 1px solid rgba(15, 23, 42, 0.04);
}
.fb-timeline div:first-child {
  border-top: 0;
}
.fb-timeline i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-primary-soft);
}
.fb-timeline i.muted {
  background: #d0d4dc;
  box-shadow: none;
}
.fb-timeline time {
  font-size: 9.5px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.fb-rec {
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  padding: 12px 14px;
}
.fb-rec > strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}
.fb-rec-row {
  display: flex;
  gap: 6px;
  overflow: hidden;
}
.fb-rec-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 5px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 10px;
  font-weight: 550;
  color: #334155;
  white-space: nowrap;
}
.fb-rec-chip b {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
}
.fb-rec-chip b.a {
  background: linear-gradient(145deg, #93c5fd, #3b82f6);
}
.fb-rec-chip b.b {
  background: linear-gradient(145deg, #f9a8d4, #ec4899);
}
.fb-rec-chip b.c {
  background: linear-gradient(145deg, #86efac, #22c55e);
}

/* keep old phone classes harmless if residual refs */
.phone {
  display: none;
}
.visual-copy h3 {
  font-size: clamp(18px, calc(16.56px + 0.4vw), 22px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sec-title-desc);
}
.visual-copy p {
  color: var(--text-secondary);
  margin: 0 0 16px;
  font-size: clamp(12px, calc(11.46px + 0.15vw), 13.5px);
  line-height: 1.5;
}
.notification {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  max-width: 300px;
  box-shadow: var(--shadow-md);
  position: relative;
}
.notification::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 99px;
  background: var(--brand-primary);
}
.notification strong {
  font-size: 13px;
  font-weight: 700;
  padding-left: 8px;
}
.notification span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  padding-left: 8px;
}

/* Lenis 平滑滚动 */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ——— AI Lab ——— */
.ai-lab {
  --ai-violet: #7c3aed;
  --ai-violet-soft: #a78bfa;
  --ai-fuchsia: #c026d3;
  --ai-ink: #0c0618;
  --ai-line: rgba(167, 139, 250, 0.28);
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* 供绝对定位竖线从 intro 模块连到案例 */
  /* 更淡的浅灰背景 */
  background:
    radial-gradient(
      ellipse 70% 50% at 50% 0%,
      rgba(0, 0, 0, 0.02),
      transparent 55%
    ),
    #f4f4f5;
}
/*
     * Intro track: sticky while pills morph → line ride.
     * Transparent residual (no solid wall). ~140vh → enough pin for morph.
     */
.ai-lab-intro-track {
  position: relative;
  height: 140vh;
  margin: 0;
  padding: 0;
  background: transparent;
}
.ai-lab-intro {
  --intro-fade: 1;
  --intro-blur: 0px;
  position: sticky;
  top: 0;
  /* 整屏 100vh 钉在视口；track 滚动驱动 pill morph */
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--topbar-h, 64px) + 20px) var(--page-pad-x)
    calc(var(--dock-bottom, 22px) + 72px);
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      ellipse 80% 55% at 50% 42%,
      rgba(88, 40, 140, 0.2),
      transparent 65%
    ),
    radial-gradient(
      ellipse 50% 40% at 80% 20%,
      rgba(76, 29, 149, 0.12),
      transparent 55%
    ),
    linear-gradient(180deg, #0a0514 0%, #0e081c 48%, #090412 100%);
  transition: none;
  z-index: 1;
}
.ai-intro-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--intro-fade, 1);
}
/* GPU-composited SVG streams — no canvas rAF */
.ai-intro-streams {
  position: absolute;
  inset: -4% -6%;
  z-index: 0;
  opacity: 0.55;
}
.ai-intro-streams-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ai-stream-layer-a .ai-stream {
  stroke-width: 1.15;
  opacity: 0.55;
}
.ai-stream-layer-b .ai-stream {
  stroke-width: 0.9;
  opacity: 0.4;
}
.ai-stream-layer-a {
  animation: ai-stream-drift-a 28s linear infinite;
  will-change: transform;
}
.ai-stream-layer-b {
  animation: ai-stream-drift-b 36s linear infinite reverse;
  will-change: transform;
}
@keyframes ai-stream-drift-a {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-2.5%, 1.2%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes ai-stream-drift-b {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(2%, -1%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.ai-intro-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(196, 181, 253, 0.35) 1px,
    transparent 1.2px
  );
  background-size: 56px 52px;
  background-position: 0 0;
  opacity: 0.28;
  mask-image: radial-gradient(
    ellipse 75% 60% at 50% 50%,
    transparent 28%,
    #000 72%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 75% 60% at 50% 50%,
    transparent 28%,
    #000 72%
  );
  animation: ai-dots-drift 40s linear infinite;
  will-change: background-position;
}
@keyframes ai-dots-drift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 56px -52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-stream-layer-a,
  .ai-stream-layer-b,
  .ai-intro-dots {
    animation: none;
  }
}
/* soft center for type */
.ai-intro-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 55% at 50% 48%,
    rgba(8, 4, 18, 0.58) 0%,
    rgba(8, 4, 18, 0.3) 50%,
    transparent 78%
  );
}
.ai-lab-intro-inner {
  position: relative;
  z-index: 2;
  max-width: min(1080px, 100%);
  margin: 0 auto;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  /* 不再整层 filter/opacity —— pills 必须保持清晰，不能被 intro blur 吃掉 */
}
/* 仅标题/文案/orb 淡出+模糊；pills 在外层 sibling，始终锐利 */
.ai-lab-intro-copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: var(--intro-fade, 1);
  transform: translate3d(0, calc((1 - var(--intro-fade, 1)) * -20px), 0);
  will-change: opacity, transform;
}
.ai-lab-intro-copy.has-intro-blur {
  filter: blur(var(--intro-blur, 0px));
  will-change: opacity, filter, transform;
}
/* 标题粒子：idle 实字；hover 仅鼠标附近 mask + 粒子 */
.ai-lab-intro h2#ai-intro-title {
  position: relative;
  z-index: 3;
  cursor: default;
  pointer-events: auto;
  overflow: visible;
}
.ai-lab-intro h2#ai-intro-title .ai-title-solid {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  /* mask 由 JS 在笔刷处挖洞；勿 isolation，避免弄坏 background-clip 字 */
}
.ai-title-particles {
  position: absolute;
  /* left/top/size 由 JS 设为 -PAD 与扩展尺寸；与采样共用 canvas 屏幕矩形 */
  pointer-events: none;
  z-index: 4;
  overflow: visible;
  display: block;
  margin: 0;
  padding: 0;
}
.ai-lab-intro h2#ai-intro-title .ai-word {
  position: relative;
  z-index: 1;
  margin: 0 0.04em;
}
/* thinking orb + 文案（加大、亮点） */
.ai-intro-orb-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 36px;
  width: 100%;
}
.ai-intro-orb-row #ai-intro-orb-canvas {
  width: 72px;
  height: 72px;
  display: block;
  flex: 0 0 auto;
}
.ai-intro-orb-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  min-height: 1.2em;
}
.ai-intro-orb-label .ai-orb-type-text {
  display: inline-block;
  /* 亮字 + 内部扫光 */
  background: linear-gradient(
    100deg,
    rgba(237, 233, 254, 0.72) 0%,
    rgba(237, 233, 254, 0.72) 38%,
    #ffffff 48%,
    rgba(221, 214, 254, 0.95) 52%,
    rgba(237, 233, 254, 0.72) 62%,
    rgba(237, 233, 254, 0.72) 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ai-orb-label-shine 2.4s ease-in-out infinite;
  white-space: nowrap;
}
.ai-intro-orb-label .ai-orb-caret {
  display: inline-block;
  width: 2px;
  height: 0.92em;
  margin-left: 1px;
  border-radius: 1px;
  background: rgba(237, 233, 254, 0.9);
  box-shadow: 0 0 8px rgba(196, 181, 253, 0.55);
  flex-shrink: 0;
  animation: ai-orb-caret-blink 1.05s step-end infinite;
}
.ai-intro-orb-label.is-typing .ai-orb-caret {
  animation: none;
  opacity: 1;
}
.ai-lab-intro h2 {
  position: relative;
  margin: 0 auto;
  max-width: min(22ch, 100%);
  font-size: clamp(34px, calc(26.08px + 2.2vw), 56px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  word-spacing: 0.04em;
  /* 整体渐变：铺在整行标题上，单词用同一 background-size/position 对齐 */
  --title-grad: linear-gradient(
    105deg,
    #f5f3ff 0%,
    #e9d5ff 14%,
    #c4b5fd 32%,
    #a78bfa 48%,
    #c026d3 72%,
    #e879f9 100%
  );
  color: transparent;
}
.ai-lab-intro .lead {
  margin: 20px auto 0;
  max-width: 56ch;
  color: rgba(237, 233, 254, 0.82);
  font-size: clamp(14px, calc(12.92px + 0.3vw), 17px);
  line-height: 1.6;
}
.ai-lab-intro .ai-pills {
  margin-top: var(--sec-head-gap);
}
/*
     * 连接桥：保留一点呼吸间距，背景透明（不要实心灰/白墙）
     * 底下 .ai-lab 的浅底会自然透上来
     */
.ai-intro-bridge {
  display: block;
  position: relative;
  z-index: 1;
  height: clamp(48px, 8vh, 88px);
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: transparent;
}
.ai-lab-work {
  margin-top: 0;
  padding-top: 0;
}
/* 竖线：从 intro 标签模块下沿一直连到案例区顶（JS 设 top/height） */
.ai-intro-rail {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 12; /* 压过 intro 底部柔化层 */
  width: 2px;
  height: 200px;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.ai-intro-rail.is-ready {
  opacity: 1;
}
/* 不再预画整段灰跑道；线条 = 填充，随原点一起往下长 */
.ai-intro-rail-track {
  display: none;
}
/* 已出现段：从顶到原点，和原点同步 */
.ai-intro-rail-fill {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  height: 0%;
  border-radius: 99px;
  background: linear-gradient(
    180deg,
    #e879f9 0%,
    #c084fc 35%,
    #a78bfa 65%,
    #7c3aed 100%
  );
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.65);
  will-change: height;
  opacity: 0;
  transition: none;
}
.ai-intro-rail.is-drawing .ai-intro-rail-fill {
  opacity: 1;
  /* 不要 opacity transition，否则开线时和圆不同步像跳一下 */
  transition: none;
}
/*
     * 竖线末端的「点」= 汇聚后的 pill 圆（JS 驱动），不再画独立 rail-dot
     */
.ai-intro-rail-dot {
  display: none !important;
}
/* 滚动渐显 + 模糊出现（kicker / lead） */
.ai-reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
.ai-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.ai-reveal.delay-2 {
  transition-delay: 0.55s;
}
/* 标题：按词 blur；渐变是整段共用（background-size = 整行宽） */
.ai-lab-intro h2 .ai-word {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(0.45em);
  color: transparent;
  /* 下层整体紫渐变；扫光时叠一层高光（仍 clip 进字） */
  background-image: var(--title-grad);
  background-repeat: no-repeat;
  background-size: var(--grad-w, 100%) 100%;
  background-position: var(--grad-x, 0px) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 单词 blur 出现：更慢、词与词间隔更大 */
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.12s + var(--i, 0) * 0.1s);
  will-change: opacity, filter, transform;
}
.ai-lab-intro h2.is-words-in .ai-word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
/* 退出：尾词先收（略慢一点） */
.ai-lab-intro.is-intro-out h2 .ai-word {
  transition-delay: calc(0.04s + var(--ri, 0) * 0.07s);
}
.ai-lab-intro.is-intro-out .ai-reveal {
  transition-delay: 0.12s;
}
.ai-lab-intro.is-intro-out .ai-pill {
  transition-delay: calc(0.02s + (4 - var(--pill-i, 1)) * 0.06s);
}
/* 整体扫光：一条高光带扫过整段标题（JS 驱动 --shine-x，clip 进字形） */
.ai-lab-intro h2 {
  --shine-x: 0px;
}
.ai-lab-intro h2.is-shine .ai-word {
  /* 上层高光 + 下层整体紫渐变，坐标都对齐整行宽 */
  background-image:
    linear-gradient(
      105deg,
      transparent 0%,
      transparent 38%,
      rgba(255, 255, 255, 0.12) 44%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0.12) 56%,
      transparent 62%,
      transparent 100%
    ),
    var(--title-grad);
  background-size:
    calc(var(--grad-w, 100%) * 0.5) 100%,
    var(--grad-w, 100%) 100%;
  background-repeat: no-repeat, no-repeat;
  /* 同一 --shine-x 平移 = 整段一起扫，不是每词各自扫 */
  background-position:
    calc(var(--shine-x, 0px) + var(--grad-x, 0px)) 0,
    var(--grad-x, 0px) 0;
  -webkit-background-clip: text, text;
  background-clip: text, text;
}
.ai-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: var(--sec-head-gap);
  /* never inherit intro blur; stay above fade layers */
  position: relative;
  z-index: 20;
  filter: none !important;
  opacity: 1;
}
/*
     * Default: crisp frosted chip — bright type, soft violet rim.
     * Hover: laser ring (kept).
     */
.ai-pill {
  --laser-angle: 0deg;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1px;
  border-radius: 999px;
  border: 0;
  /* quiet luminous rim */
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(196, 181, 253, 0.22) 45%,
    rgba(255, 255, 255, 0.12) 100%
  );
  color: #f5f3ff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.2);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px) scale(0.96);
  transform-origin: center bottom;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1),
    background 0.3s ease,
    color 0.25s ease,
    box-shadow 0.3s ease;
  isolation: isolate;
  cursor: default;
}
.ai-pill-label {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(36, 22, 64, 0.72) 0%,
    rgba(24, 14, 44, 0.78) 100%
  );
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(233, 213, 255, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 1;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.ai-pills.is-in .ai-pill {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}
/* hover: laser ring + slightly brighter glass */
.ai-pills.is-in .ai-pill:hover,
.ai-pills.is-in .ai-pill:focus-visible {
  color: #ffffff;
  background: conic-gradient(
    from var(--laser-angle),
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 255, 255, 0.65) 52%,
    #ddd6fe 58%,
    #c4b5fd 64%,
    #a78bfa 70%,
    #e9d5ff 76%,
    rgba(255, 255, 255, 0.1) 84%,
    rgba(255, 255, 255, 0.08) 100%
  );
  animation: ai-pill-laser 1.8s linear infinite;
  box-shadow:
    0 0 22px rgba(167, 139, 250, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}
.ai-pills.is-in .ai-pill:hover .ai-pill-label,
.ai-pills.is-in .ai-pill:focus-visible .ai-pill-label {
  background: linear-gradient(
    180deg,
    rgba(48, 30, 84, 0.78) 0%,
    rgba(32, 18, 58, 0.85) 100%
  );
  border-color: rgba(233, 213, 255, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
@property --laser-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes ai-pill-laser {
  to {
    --laser-angle: 360deg;
  }
}
/* 进入：标题词之后；退出 delay 由 .is-intro-out 控制 */
/* pills 等标题词更慢出完后再进 */
.ai-lab-intro:not(.is-intro-out) .ai-pills.is-in .ai-pill:nth-child(1) {
  transition-delay: 1.45s;
}
.ai-lab-intro:not(.is-intro-out) .ai-pills.is-in .ai-pill:nth-child(2) {
  transition-delay: 1.6s;
}
.ai-lab-intro:not(.is-intro-out) .ai-pills.is-in .ai-pill:nth-child(3) {
  transition-delay: 1.75s;
}
.ai-lab-intro:not(.is-intro-out) .ai-pills.is-in .ai-pill:nth-child(4) {
  transition-delay: 1.9s;
}
.ai-pill:nth-child(1) {
  --pill-i: 1;
}
.ai-pill:nth-child(2) {
  --pill-i: 2;
}
.ai-pill:nth-child(3) {
  --pill-i: 3;
}
.ai-pill:nth-child(4) {
  --pill-i: 4;
}
/*
     * Auto sequence (not scroll): text out → width shrink to circle (no scale)
     * → converge to center. After converged, scroll drives ride-down on rail.
     */
.ai-pills.is-merging {
  z-index: 22;
  /* MUST lock size: absolute children would collapse width→0 and shift origin to page center */
  width: var(--pills-w, 100%);
  min-height: var(--pills-h, 44px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  filter: none !important;
}
.ai-pills.is-converged {
  z-index: 24;
}
/* 禁止再用 overflow:hidden 锁整页 —— 会吞顶栏、卡死回滚 */
.ai-pill.is-merging {
  --text-op: 1;
  position: absolute;
  left: var(--pill-left, 0);
  top: var(--pill-top, 0);
  z-index: 15;
  animation: none !important;
  transition: none !important;
  will-change: transform, width, opacity;
  pointer-events: none;
  box-sizing: border-box;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  overflow: hidden;
  margin: 0;
}
.ai-pill.is-merging .ai-pill-label {
  transition: none !important;
  white-space: nowrap;
  overflow: hidden;
  opacity: var(--text-op, 1);
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0 !important;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  /* hide glyphs while shell shrinks — width owns the morph */
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none;
  border-radius: inherit;
}
.ai-pill.is-merging:hover,
.ai-pill.is-merging:focus-visible {
  transform: none !important;
  animation: none !important;
}
.ai-lab-work {
  position: relative;
  height: 380vh;
}
.ai-lab-sticky {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
  /* 与 .topbar-inner 一致：外层不额外 pad，内容壳自己 1440 + 24 */
  padding: 12px 0 28px;
  box-sizing: border-box;
  /* 顶部与 bridge 相接 */
  background:
    radial-gradient(
      ellipse 70% 55% at 12% 35%,
      rgba(0, 0, 0, 0.025),
      transparent 55%
    ),
    linear-gradient(180deg, #f4f4f5 0%, #f0f0f2 50%, #ececee 100%);
}
/* 与 topbar-inner 对齐：max 1440 + 左右 24；给底部按钮留高 */
.ai-lab-grid {
  width: 100%;
  max-width: var(--max);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: auto;
  /* CTA 已进左栏，整格可用 */
  max-height: var(--ai-content-h);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
/* AI panel shell — border beam via js/border-beam.js (beam.jakubantalik.com) */
.ai-think {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  /* 1px 轻投影即可 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  padding: 12px;
  box-sizing: border-box;
}
.ai-agent-card {
  flex: 0 0 auto;
  border-radius: 16px;
  background: linear-gradient(165deg, #f6f6f7 0%, #efeff1 100%);
  color: #18181b;
  padding: 16px 16px 14px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.ai-agent-title {
  display: none;
}
.ai-agent-lead {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: #18181b;
}
.ai-agent-url {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.ai-agent-url-ico {
  color: #a1a1aa;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.ai-agent-url-ico svg {
  width: 13px;
  height: 13px;
}
.ai-agent-url-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #3f3f46;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-agent-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f4f4f5;
  color: #52525b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.ai-agent-badge.is-done {
  background: #18181b;
  color: #fafafa;
  border-color: transparent;
}
.ai-sse {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow-x: hidden;
  /* 仍可 JS 程序化 scrollTop；滚轮转给页面，不在此嵌套滚 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  scroll-behavior: smooth;
  /* 隐藏滚动条，仍可程序化滚动 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: none;
  -webkit-mask-image: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.ai-think {
  /* 整块 agent 上滚轮都交给页面（见 ai-lab.js） */
  overscroll-behavior: none;
}
.ai-sse::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.ai-timeline {
  /* 右侧/左右多留一点，避免卡片阴影贴边被 .ai-sse 裁切 */
  padding: 16px 16px 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: min-content;
}
.ai-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 16px;
  position: relative;
  padding-bottom: 20px;
  /* 未进行：可读但不抢 active（原 0.28 过浅） */
  opacity: 0.58;
  transform: translateY(4px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-step.is-pending {
  opacity: 0.62;
}
.ai-step:last-child {
  padding-bottom: 2px;
}
.ai-step::before {
  content: "";
  position: absolute;
  left: 12px; /* 圆心：26/2 - 1/2 */
  top: 26px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.06) 70%,
    rgba(0, 0, 0, 0.02) 100%
  );
}
.ai-step:last-child::before {
  display: none;
}
.ai-step.is-active,
.ai-step.is-done {
  opacity: 1;
  transform: none;
}
.ai-step-ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: grid;
  place-items: center;
  color: #a1a1aa;
  background: #fff;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex-shrink: 0;
  transition:
    border-color 0.3s,
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}
.ai-step.is-pending .ai-step-ico {
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.22);
  color: #a1a1aa;
  background: rgba(250, 250, 250, 0.9);
}
.ai-step.is-active .ai-step-ico {
  border-style: solid;
  border-color: transparent;
  color: #fafafa;
  background: #18181b;
  box-shadow:
    0 0 0 3px rgba(24, 24, 27, 0.08),
    0 3px 10px rgba(0, 0, 0, 0.12);
  animation: ai-step-pulse 1.6s ease-in-out infinite;
}
.ai-step.is-done .ai-step-ico {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.08);
  background: #f4f4f5;
  color: #18181b;
  box-shadow: none;
  animation: none;
}
@keyframes ai-step-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(24, 24, 27, 0.07),
      0 3px 10px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(24, 24, 27, 0.1),
      0 3px 12px rgba(0, 0, 0, 0.12);
  }
}
.ai-step-ico svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke-width: 1.75;
}
.ai-step-body {
  min-width: 0;
  padding-top: 3px;
}
.ai-step-title {
  color: #18181b;
  font-size: clamp(12px, calc(11.46px + 0.15vw), 13.5px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.ai-step.is-pending .ai-step-title {
  color: #71717a;
  font-weight: 500;
}
.ai-step.is-done .ai-step-title {
  color: #3f3f46;
}
.ai-step-detail {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  /* 收起时裁切；展开后 visible，避免 mini-card 投影被切 */
  overflow: hidden;
  /* 给阴影预留内边距（展开过渡中也够用） */
  padding: 2px 6px 0;
  margin-left: -6px;
  margin-right: -2px;
  box-sizing: border-box;
  transition:
    max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    margin 0.35s ease,
    padding 0.35s ease;
}
.ai-step.is-active .ai-step-detail,
.ai-step.is-done .ai-step-detail {
  max-height: 220px;
  opacity: 1;
  overflow: visible;
  padding-bottom: 12px;
}
.ai-step.is-done .ai-step-detail {
  opacity: 0.72;
}
.ai-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: #fff;
  color: #52525b;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 6px 6px 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.ai-step-detail .ai-chips {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -2px;
}
.ai-mini-card {
  width: 100%;
  max-width: 230px;
  border-radius: 14px;
  background: #fff;
  color: #111;
  padding: 12px 14px 13px;
  /* 描边略加重 */
  border: 1.5px solid rgba(0, 0, 0, 0.11);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.08),
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}
.ai-mini-card-top {
  display: flex;
  gap: 5px;
  margin-bottom: 9px;
}
.ai-mini-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e4e4e7;
}
.ai-mini-card strong {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: #18181b;
}
.ai-mini-card span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #a1a1aa;
  letter-spacing: -0.01em;
}
.ai-step-sub {
  font-size: 12.5px;
  color: #a1a1aa;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.ai-step-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  color: #71717a;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0;
  cursor: default;
}
.ai-step-link span {
  opacity: 0.55;
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  line-height: 1;
}
.ai-orb-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 6px;
}
.ai-orb-row #ai-orb-canvas {
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 auto;
}
.ai-orb-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  min-height: 1.2em;
}
.ai-orb-label .ai-orb-type-text {
  display: inline-block;
  /* solid base first — clip/gradient is progressive enhancement */
  color: #52525b;
  -webkit-text-fill-color: #52525b;
  background: linear-gradient(
    100deg,
    #71717a 0%,
    #71717a 38%,
    #18181b 48%,
    #3f3f46 52%,
    #71717a 62%,
    #71717a 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ai-orb-label-shine 2.4s ease-in-out infinite;
  white-space: nowrap;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ai-orb-label .ai-orb-type-text {
    color: #52525b;
    -webkit-text-fill-color: #52525b;
    background: none;
    animation: none;
  }
}
.ai-orb-label .ai-orb-caret {
  display: inline-block;
  width: 1.5px;
  height: 0.95em;
  margin-left: 1px;
  border-radius: 1px;
  background: #71717a;
  flex-shrink: 0;
  animation: ai-orb-caret-blink 1.05s step-end infinite;
}
.ai-orb-label.is-typing .ai-orb-caret {
  animation: none;
  opacity: 1;
}
@keyframes ai-orb-label-shine {
  0% {
    background-position: 100% 0;
  }
  55%,
  100% {
    background-position: -100% 0;
  }
}
@keyframes ai-orb-caret-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.ai-stack {
  position: relative;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  perspective: 1400px;
  box-sizing: border-box;
}
/* 右侧案例区：撑满列宽，占满除 hint 外的高度 */
.ai-stack-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  min-height: 0;
}
.ai-case {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  transform-style: preserve-3d;
  /* 滚动叠卡：transform 跟手，不 transition，避免歪斜拖影 */
  transition:
    box-shadow 0.3s ease,
    opacity 0.2s ease;
  cursor: pointer;
  will-change: transform;
}
.ai-case-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 22px;
}
.ai-case-face {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* 1px 轻投影即可，不要大面积软影 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  background: #f4f2ef;
}
.ai-case-face.front {
  background: #f4f2ef;
}
/* 已改为放大弹层，不再翻面 */
.ai-case-face.back {
  display: none;
}
/* 叠卡内：预览不可滚动，只裁切展示 */
.ai-case-art {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
  background: #f4f2ef;
  display: block;
  pointer-events: none; /* 滚轮交给页面叠卡；点击由卡片/放大镜接管 */
}
.ai-case-art .ogl-page {
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  background: #f4f2ef;
  color: #1a1a1a;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
  pointer-events: none;
}
/* 放大弹层：从卡片 FLIP 缩放到居中 1440-48；慢—快—慢 */
.ai-case-lightbox {
  --ai-zoom-ease: cubic-bezier(0.65, 0, 0.35, 1); /* slow-fast-slow */
  --ai-zoom-dur: 0.62s;
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  visibility: hidden;
  pointer-events: none;
}
.ai-case-lightbox.is-open {
  visibility: visible;
  pointer-events: auto;
}
.ai-case-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 12, 28, 0.42);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0;
  transition: opacity var(--ai-zoom-dur) var(--ai-zoom-ease);
}
.ai-case-lightbox.is-open .ai-case-lightbox-backdrop {
  opacity: 1;
}
/* 收回：遮罩淡出，面板仍沿 FLIP 原路径缩回（不卸 is-open） */
.ai-case-lightbox.is-open.is-closing .ai-case-lightbox-backdrop {
  opacity: 0;
}
.ai-case-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(calc(1440px - 48px), calc(100vw - 48px));
  height: min(92vh, calc(100vh - 48px));
  max-height: min(92vh, calc(100vh - 48px));
  border-radius: 18px;
  overflow: hidden;
  background: #f4f2ef;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  transform-origin: 0 0;
  will-change: transform, border-radius;
  opacity: 0;
}
.ai-case-lightbox.is-open .ai-case-lightbox-panel {
  opacity: 1;
}
.ai-case-lightbox.is-open.is-closing .ai-case-lightbox-close {
  opacity: 0;
  transition-delay: 0s;
}
.ai-case-lightbox-scroll {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}
.ai-case-lightbox-scroll .ogl-page {
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: #f4f2ef;
  color: #1a1a1a;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
  pointer-events: auto;
}
/* 弹层内内容稍放大，贴近真页 */
.ai-case-lightbox-scroll .ogl-hero {
  height: 420px;
  min-height: 380px;
}
.ai-case-lightbox-scroll .ogl-track-float {
  top: 46%;
  width: min(92%, 420px);
  padding: 26px 28px 22px;
}
.ai-case-lightbox-scroll .ogl-status,
.ai-case-lightbox-scroll .ogl-fav,
.ai-case-lightbox-scroll .ogl-why {
  max-width: 1040px;
  padding-left: 36px;
  padding-right: 36px;
}
.ai-case-lightbox-scroll .ogl-status {
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 0.8fr);
  gap: 36px;
}
.ai-case-lightbox-scroll .ogl-status-main h2 {
  font-size: 22px;
}
.ai-case-lightbox-scroll .ogl-fav h3 {
  font-size: 18px;
}
.ai-case-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.94);
  color: #1a1a1a;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s,
    opacity 0.28s var(--ai-zoom-ease) 0.28s;
}
.ai-case-lightbox.is-open .ai-case-lightbox-close {
  opacity: 1;
}
.ai-case-lightbox-close:hover {
  background: #1a1a1a;
  color: #fff;
  transform: scale(1.05);
}
.ai-case-lightbox-close svg {
  width: 18px;
  height: 18px;
  display: block;
}
body.ai-case-lightbox-active {
  overflow: hidden;
}
.ai-case.is-zooming {
  opacity: 0 !important;
  pointer-events: none;
}
.ogl-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 2;
}
.ogl-logo {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #111;
  line-height: 1;
}
.ogl-nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #333;
}
.ogl-nav-links span {
  opacity: 0.85;
}
.ogl-nav-icons {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #222;
}
.ogl-nav-icons svg {
  width: 16px;
  height: 16px;
  display: block;
}
.ogl-hero {
  position: relative;
  height: min(46%, 360px);
  min-height: 280px;
  overflow: hidden;
}
.ogl-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  filter: saturate(0.92) contrast(1.04) brightness(0.98);
}
.ogl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.32) 55%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}
.ogl-track-float {
  position: absolute;
  left: 50%;
  /* 略靠上：垂直中偏上，避免贴底 */
  top: 48%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(88%, 380px);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-radius: 6px;
  padding: 22px 22px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.ogl-track-float h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: #1a1a1a;
}
.ogl-fields {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.ogl-fields input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d8d4cf;
  border-radius: 2px;
  padding: 9px 11px;
  font-size: 12px;
  color: #333;
  background: #fff;
  font-family: inherit;
}
.ogl-fields input::placeholder {
  color: #9a9590;
}
.ogl-track-btn {
  width: 100%;
  border: 0;
  background: #1a1a1a;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 12px;
  border-radius: 2px;
  cursor: default;
  font-family: inherit;
}
/* brand accents */
.ogl-page.theme-lume .ogl-logo {
  letter-spacing: 0.28em;
}
.ogl-page.theme-lume .ogl-track-btn {
  background: #5c4a3a;
}
.ogl-page.theme-lume .ogl-tl-item.done .ogl-tl-dot,
.ogl-page.theme-lume .ogl-tl-item.active .ogl-tl-dot {
  background: #c4a484;
}
.ogl-page.theme-nova .ogl-logo {
  letter-spacing: 0.22em;
  font-weight: 800;
}
.ogl-page.theme-nova .ogl-track-btn {
  background: #3b82f6;
  border-radius: 8px;
}
.ogl-page.theme-nova .ogl-nav {
  background: #0f1419;
  border-color: rgba(255, 255, 255, 0.08);
}
.ogl-page.theme-nova .ogl-logo,
.ogl-page.theme-nova .ogl-nav-links,
.ogl-page.theme-nova .ogl-nav-icons {
  color: #e5e7eb;
}
.ogl-page.theme-trail .ogl-logo {
  letter-spacing: 0.18em;
}
.ogl-page.theme-trail .ogl-track-btn {
  background: #1f4d3a;
  border-radius: 10px;
}
.ogl-page.theme-trail .ogl-tl-item.done .ogl-tl-dot,
.ogl-page.theme-trail .ogl-tl-item.active .ogl-tl-dot {
  background: #2d6a4f;
}

/* ——— Layout B: split (beauty) ——— */
.ogl-page.layout-split {
  background: #f7f3ef;
}
.ogl-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 520px;
  align-items: stretch;
}
.ogl-split-left {
  padding: 22px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #faf7f4;
}
.ogl-split-track {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(60, 40, 20, 0.06);
}
.ogl-split-track h3 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
}
.ogl-split-status h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ogl-split-left .ogl-events {
  flex: 1 1 auto;
  min-height: 0;
}
.ogl-split-left .ogl-timeline-rich .ogl-tl-item:last-child {
  padding-bottom: 4px;
}
.ogl-split-right {
  position: relative;
  overflow: hidden;
  background: #e8e0d8;
  display: flex;
  flex-direction: column;
}
.ogl-split-right > img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 280px;
  object-fit: cover;
  display: block;
}
.ogl-split-rail-wrap {
  padding: 12px;
  background: rgba(255, 252, 248, 0.92);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ogl-rail-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a847c;
}
.ogl-split-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ogl-split-rail .ogl-fav-card {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.ogl-split-rail .ogl-fav-card img {
  height: 72px;
  object-fit: cover;
  width: 100%;
  display: block;
}
.ogl-split-rail .cap {
  font-size: 10px;
  padding: 6px;
}
.ogl-page.layout-split .ogl-why-row {
  max-width: none;
  margin: 0;
  padding: 16px 20px 24px;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ——— Layout C: steps dashboard (electronics, dark) ——— */
.ogl-page.layout-steps {
  background: #0b0f14;
  color: #e5e7eb;
}
.ogl-dash {
  padding: 18px 18px 28px;
}
.ogl-dash-head {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}
.ogl-dash-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #f9fafb;
  letter-spacing: -0.02em;
}
.ogl-dash-head .ogl-sub {
  color: #9ca3af;
  margin: 0;
  font-size: 12px;
}
.ogl-dash-track {
  background: #151b24;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
}
.ogl-dash-track h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
  text-align: left;
}
.ogl-dash-track .ogl-fields input {
  background: #0b0f14;
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
}
.ogl-hsteps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.ogl-hstep {
  background: #151b24;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  min-width: 0;
}
.ogl-hstep-n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1f2937;
  color: #9ca3af;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 6px;
}
.ogl-hstep strong {
  display: block;
  font-size: 10px;
  color: #d1d5db;
  line-height: 1.25;
  margin-bottom: 2px;
}
.ogl-hstep-time {
  display: block;
  font-size: 9px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ogl-hstep.done {
  border-color: rgba(59, 130, 246, 0.35);
}
.ogl-hstep.done .ogl-hstep-n {
  background: #2563eb;
  color: #fff;
}
.ogl-hstep.active {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}
.ogl-hstep.active .ogl-hstep-n {
  background: #60a5fa;
  color: #0b0f14;
}
.ogl-dash-body {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 14px;
  margin-bottom: 14px;
}
.ogl-dash-events {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 14px;
  margin-bottom: 18px;
  align-items: start;
}
.ogl-page.layout-steps .ogl-events {
  background: #151b24;
  border-color: rgba(255, 255, 255, 0.08);
}
.ogl-page.layout-steps .ogl-events-head {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.ogl-page.layout-steps .ogl-events-head h4 {
  color: #f3f4f6;
}
.ogl-page.layout-steps .ogl-events-meta {
  color: #6b7280;
}
.ogl-page.layout-steps .ogl-tl-body strong {
  color: #e5e7eb;
}
.ogl-page.layout-steps .ogl-tl-time {
  color: #9ca3af;
}
.ogl-page.layout-steps .ogl-tl-loc {
  color: #6b7280;
}
.ogl-page.layout-steps .ogl-tl-dot {
  background: #374151;
  box-shadow: 0 0 0 3px #151b24;
}
.ogl-page.layout-steps .ogl-tl-item.done .ogl-tl-dot,
.ogl-page.layout-steps .ogl-tl-item.active .ogl-tl-dot {
  background: #3b82f6;
  box-shadow: 0 0 0 3px #151b24;
}
.ogl-page.layout-steps .ogl-tl-item:not(:last-child)::before {
  background: #1f2937;
}
.ogl-page.layout-steps .ogl-tl-item.done:not(:last-child)::before,
.ogl-page.layout-steps .ogl-tl-item.active:not(:last-child)::before {
  background: #2563eb;
}
.ogl-page.layout-steps .ogl-note {
  background: #151b24;
  border-color: rgba(255, 255, 255, 0.08);
}
.ogl-page.layout-steps .ogl-note strong {
  color: #f3f4f6;
}
.ogl-page.layout-steps .ogl-note span {
  color: #9ca3af;
}
.ogl-page.layout-steps .ogl-note-ico {
  background: #1f2937;
}
.ogl-map-panel {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 220px;
  background: #111827;
}
.ogl-map-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: grayscale(0.35) contrast(1.1);
  display: block;
  min-height: 220px;
}
.ogl-map-pin {
  position: absolute;
  left: 58%;
  top: 42%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow:
    0 0 0 6px rgba(59, 130, 246, 0.35),
    0 0 24px rgba(59, 130, 246, 0.6);
  transform: translate(-50%, -50%);
}
.ogl-map-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(15, 20, 28, 0.82);
  color: #e5e7eb;
  font-size: 11px;
  font-family: ui-monospace, monospace;
}
.ogl-page.layout-steps .ogl-order-card {
  background: #151b24;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}
.ogl-page.layout-steps .ogl-order-card h4,
.ogl-page.layout-steps .ogl-order-row b,
.ogl-page.layout-steps .ogl-order-item .t {
  color: #f3f4f6;
}
.ogl-page.layout-steps .ogl-order-row span,
.ogl-page.layout-steps .ogl-order-item .m {
  color: #9ca3af;
}
.ogl-fav-dark h3 {
  color: #f9fafb;
}
.ogl-fav-dark p {
  color: #9ca3af;
}
.ogl-fav-dark .ogl-fav-card {
  background: #151b24;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.ogl-fav-dark .cap {
  color: #e5e7eb;
}

/* ——— Layout D: wide outdoor trail (full width, not phone mock) ——— */
.ogl-page.layout-stack {
  background: #eef3ef;
}
.ogl-trail-banner {
  position: relative;
  height: min(38%, 300px);
  min-height: 240px;
  overflow: hidden;
}
.ogl-trail-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.04);
}
.ogl-trail-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(12, 28, 20, 0.72) 0%,
    rgba(12, 28, 20, 0.35) 48%,
    rgba(12, 28, 20, 0.15) 100%
  );
}
.ogl-trail-banner-copy {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 1;
  max-width: 520px;
  color: #fff;
}
.ogl-trail-banner-copy h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.ogl-trail-banner-copy .ogl-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.5;
}
.ogl-trail-banner-copy .ogl-badge {
  margin-bottom: 10px;
  background: rgba(220, 252, 231, 0.95);
}
.ogl-trail-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 24px 36px;
  box-sizing: border-box;
  width: 100%;
}
.ogl-progress-segs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.ogl-progress-segs i {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: #d1d9d4;
}
.ogl-progress-segs i.done,
.ogl-progress-segs i.active {
  background: #2d6a4f;
}
.ogl-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #166534;
  background: #dcfce7;
  padding: 3px 8px;
  border-radius: 99px;
  margin-bottom: 8px;
}
.ogl-trail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.9fr);
  gap: 18px;
  align-items: start;
  margin-top: 4px;
}
.ogl-trail-main .ogl-events {
  margin-bottom: 16px;
}
.ogl-trail-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 12px;
}
.ogl-trail-track {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 18px rgba(20, 40, 30, 0.05);
}
.ogl-trail-track h3 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
}
.ogl-page.layout-stack .ogl-note {
  margin: 0 0 14px;
}
.ogl-page.layout-stack .ogl-order-card {
  border-radius: 12px;
}
.ogl-trail-fav {
  max-width: none;
  margin: 0;
  padding: 4px 0 0;
}
.ogl-trail-fav h3 {
  font-size: 18px;
}
.ogl-page.layout-stack .ogl-why-row {
  max-width: none;
  margin: 20px 0 0;
  padding: 0;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ogl-page.layout-stack .ogl-footer {
  max-width: none;
  margin-top: 20px;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 768px) {
  .ogl-trail-grid {
    grid-template-columns: 1fr;
  }
  .ogl-trail-side {
    position: static;
  }
}
.ogl-status {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 22px 8px;
  display: grid;
  /* 左侧状态时间线加宽 */
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 0.85fr);
  gap: 28px;
  align-items: start;
}
.ogl-status-main h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #161616;
}
.ogl-status-main .ogl-sub {
  margin: 0 0 18px;
  font-size: 12px;
  color: #6b6660;
  line-height: 1.45;
}
.ogl-timeline {
  display: grid;
  gap: 0;
  position: relative;
  padding-left: 2px;
}
.ogl-tl-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  position: relative;
  padding-bottom: 16px;
}
.ogl-tl-item:last-child {
  padding-bottom: 0;
}
.ogl-tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 3px;
  background: #cfc9c2;
  box-shadow: 0 0 0 3px #f4f2ef;
  position: relative;
  z-index: 1;
}
.ogl-tl-item.done .ogl-tl-dot {
  background: #1a1a1a;
}
.ogl-tl-item.active .ogl-tl-dot {
  background: #1a1a1a;
  box-shadow:
    0 0 0 3px #f4f2ef,
    0 0 0 5px rgba(26, 26, 26, 0.15);
}
.ogl-tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 1.5px;
  background: #d9d3cc;
}
.ogl-tl-item.done:not(:last-child)::before,
.ogl-tl-item.active:not(:last-child)::before {
  background: #1a1a1a;
}
.ogl-tl-body {
  min-width: 0;
  padding-bottom: 2px;
}
.ogl-tl-body strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 3px;
  line-height: 1.3;
}
.ogl-tl-time {
  display: block;
  font-size: 11px;
  color: #7a756e;
  line-height: 1.35;
}
.ogl-tl-loc {
  display: block;
  font-size: 11px;
  color: #9a948c;
  line-height: 1.4;
  margin-top: 2px;
}
.ogl-tl-item.active .ogl-tl-body strong {
  color: #0a0a0a;
}
.ogl-tl-item:not(.done):not(.active) .ogl-tl-body strong {
  color: #9a948c;
}
.ogl-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: -0.02em;
  word-break: break-all;
  text-align: right;
}
.ogl-kicker {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a847c;
}
.ogl-kicker-dark {
  color: #6b7280;
}
.ogl-section-label {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7280;
}
.ogl-note {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  margin: 0 0 16px;
  border-radius: 10px;
  border: 1px solid #e8e3dc;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.ogl-note-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #f4f2ef;
  font-size: 13px;
}
.ogl-note strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}
.ogl-note span {
  display: block;
  font-size: 11px;
  color: #6b6660;
  line-height: 1.45;
}
.ogl-events,
.ogl-events-inline {
  background: #fff;
  border: 1px solid #e6e1da;
  border-radius: 10px;
  padding: 14px 14px 10px;
  margin: 0 0 14px;
}
.ogl-events-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0ebe4;
}
.ogl-events-head h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.ogl-events-meta {
  font-size: 10px;
  color: #8a847c;
  font-family: ui-monospace, Menlo, monospace;
  text-align: right;
}
.ogl-timeline-rich .ogl-tl-item {
  padding-bottom: 14px;
}
.ogl-order-card {
  background: #fff;
  border: 1px solid #e6e1da;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.ogl-order-card h4 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.ogl-order-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  padding: 6px 0;
  border-bottom: 1px solid #f0ebe4;
  color: #555;
}
.ogl-order-row:last-of-type {
  border-bottom: 0;
}
.ogl-order-row b {
  color: #1a1a1a;
  font-weight: 600;
}
.ogl-order-items {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.ogl-order-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
}
.ogl-order-item img {
  width: 48px;
  height: 56px;
  object-fit: cover;
  border-radius: 2px;
  background: #e8e4de;
}
.ogl-order-item .t {
  font-size: 11px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}
.ogl-order-item .m {
  font-size: 10px;
  color: #8a847c;
  margin-top: 2px;
}
.ogl-fav {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 22px 8px;
}
.ogl-fav h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  color: #161616;
}
.ogl-fav p {
  margin: 0 0 16px;
  text-align: center;
  font-size: 12px;
  color: #6b6660;
}
.ogl-fav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ogl-fav-card {
  background: #fff;
  border: 1px solid #e8e3dc;
  border-radius: 3px;
  overflow: hidden;
}
.ogl-fav-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  background: #e4e0d9;
}
.ogl-fav-card .cap {
  padding: 8px 8px 10px;
  font-size: 10px;
  font-weight: 500;
  color: #333;
  line-height: 1.3;
}
.ogl-fav-card .price {
  display: block;
  margin-top: 3px;
  color: #8a847c;
  font-weight: 400;
}
.ogl-why {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 0 22px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ogl-why-card {
  background: #fff;
  border: 1px solid #e8e3dc;
  border-radius: 3px;
  padding: 18px 16px;
}
.ogl-why-card h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1a1a1a;
}
.ogl-why-card p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #6b6660;
}
.ogl-footer {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.72);
  padding: 22px 22px 26px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 14px;
  font-size: 10px;
  line-height: 1.5;
}
.ogl-footer .brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #fff;
  margin-bottom: 8px;
}
.ogl-footer h5 {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.ogl-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.ogl-footer li {
  opacity: 0.7;
}
.ai-case-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  color: #1a1a1a;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background 0.2s,
    transform 0.2s,
    color 0.2s;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.ai-case-zoom:hover {
  background: #1a1a1a;
  color: #fff;
  transform: scale(1.06);
}
.ai-case-zoom svg {
  width: 18px;
  height: 18px;
  display: block;
}
.ai-stack-hint {
  flex: 0 0 auto;
  margin-top: 14px;
  text-align: center;
  color: rgba(31, 18, 53, 0.45);
  font-size: 13px;
}

/* 左栏 = agent 面板容器 */
.ai-lab-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  max-height: 100%;
}
.ai-lab-left .ai-think {
  flex: 1 1 auto;
  min-height: 0;
}
/* CTA 在 agent 卡片内底部 */
.ai-think .ai-lab-cta {
  flex: 0 0 auto;
  width: 100%;
  margin: 4px 0 0;
  padding: 10px 2px 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ai-think .ai-lab-cta .btn,
.ai-think .ai-lab-cta .btn-demo,
.ai-think .ai-lab-cta .btn-switch {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: center;
  text-align: center;
  border-radius: 999px;
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  box-shadow: none;
}
/* 主题色 brand-primary */
.ai-think .ai-lab-cta .btn.primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  box-shadow: none;
}
.ai-think .ai-lab-cta .btn.primary:hover {
  filter: brightness(1.1);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: none;
}
.ai-think .ai-lab-cta .btn:not(.primary) {
  border-color: rgba(0, 58, 155, 0.28);
  background: #fff;
  color: var(--brand-primary);
  box-shadow: none;
}
.ai-think .ai-lab-cta .btn:not(.primary):hover {
  filter: brightness(0.97);
  background: var(--brand-primary-soft);
  border-color: var(--brand-primary);
  box-shadow: none;
}

.screen {
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: end;
  box-shadow:
    inset 0 0 0 1px rgba(10, 10, 10, 0.06),
    var(--shadow-md);
  min-height: 300px;
}
.screen.dark {
  background: #1a1f2e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.screen-hero {
  min-height: 150px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #ff8c00, #0a0a0a);
  display: grid;
  align-content: end;
  padding: 16px;
  gap: 8px;
}
.screen-hero.blue {
  background: linear-gradient(135deg, #003a9b, #0a0a0a);
}

.screen-hero.green {
  background: linear-gradient(135deg, #2aae67, #0a0a0a);
}
.screen-line {
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.78);
}
.screen-line.short {
  width: 64%;
}
.screen-meta {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.02em;
}
.screen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.screen-tile {
  min-height: 72px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f0f2f6, #e6e8ec);
}
.screen.dark .screen-tile {
  background: linear-gradient(180deg, #2a3144, #222838);
}
.case-caption {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border-default);
  background: #fff;
}
.case-caption strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.case-caption span {
  color: var(--text-tertiary);
  font-size: 12px;
}

/* ——— Brands say — dual-row reverse marquee testimonials ——— */
.brands-say {
  --bs-bg: #fff;
  --bs-card: #fff;
  position: relative;
  background: #fff;
  color: #0f172a;
  border-bottom: 0;
  overflow: hidden;
}
.brands-say .section-inner {
  /* 与全站一致：max 1440 · 左右各 24 → 内容区 1440-48 */
  max-width: var(--max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
  box-sizing: border-box;
}
.brands-say-head {
  text-align: center;
  margin: 0 auto clamp(36px, 4.5vw, 52px);
  max-width: min(720px, 100%);
}
.brands-say-head h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--track-title);
  line-height: 1.15;
  color: #0f172a;
  text-wrap: balance;
}
.brands-say-head .lead {
  margin: 14px auto 0;
  max-width: 480px;
  color: var(--text-secondary);
  font-size: clamp(14px, calc(12.92px + 0.3vw), 17px);
  line-height: 1.65;
}
.brands-say-rows {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* stay inside content shell (1440 - 48) */
  margin: 0;
  width: 100%;
  max-width: 100%;
}
.brands-marquee {
  overflow: hidden;
  width: 100%;
  /* 容器：≤768 卡宽用 100cqw，随 marquee 实宽撑满（100vw 在缩放/异形视口会过冲） */
  container-type: inline-size;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.brands-track {
  display: flex;
  width: max-content;
  gap: 16px;
  will-change: transform;
  padding: 4px 0;
  animation-play-state: running;
}
.brands-track.is-left {
  animation: brands-scroll-left 48s linear infinite;
}
.brands-track.is-right {
  animation: brands-scroll-right 52s linear infinite;
}
/* only the hovered row pauses — sibling row keeps running */
.brands-marquee:hover > .brands-track {
  animation-play-state: paused;
}
@keyframes brands-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes brands-scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brands-track.is-left,
  .brands-track.is-right {
    animation: none;
  }
}
.brands-say-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(36px, 4vw, 48px);
}
.brands-say-cta .btn-demo {
  border-color: rgba(0, 58, 155, 0.22);
  color: var(--brand-primary);
  background: #fff;
}
.brands-say-cta .btn-demo:hover,
.brands-say-cta .btn-demo:focus-visible {
  background: var(--brand-primary-soft);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.brand-card {
  position: relative;
  flex: 0 0 auto;
  width: min(340px, 78vw);
  /* 全档统一上限（2026-08-31 Park：桌面 340 / 手机 100cqw 全宽都要被钳住） */
  max-width: 320px;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.28);
  background: var(--bs-card);
  text-decoration: none;
  color: inherit;
  display: block;
  /* no hover effects */
  transition: none;
}
.brand-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.brand-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transform: none;
}
.brand-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* frosted vignette — readable white type over photo */
  background:
    linear-gradient(
      115deg,
      rgba(8, 12, 28, 0.88) 0%,
      rgba(8, 12, 28, 0.72) 38%,
      rgba(8, 12, 28, 0.38) 68%,
      rgba(8, 12, 28, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 12, 28, 0.35) 0%,
      transparent 40%,
      rgba(8, 12, 28, 0.55) 100%
    );
  z-index: 1;
}
.brand-card-body {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
}
.brand-card-logo {
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  margin: 0 0 14px;
  display: block;
  flex-shrink: 0;
}
.brand-card-logo.is-color {
  filter: none;
  opacity: 1;
}
.brand-card-quote {
  margin: 0;
  flex: 1 1 auto;
  font-size: clamp(12px, calc(11.46px + 0.15vw), 13.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brand-card-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-card-author {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
}
@media (max-width: 768px) {
  .brand-card {
    width: min(300px, 86vw);
    height: 240px;
  }
  .brand-card-logo {
    height: 28px;
    max-width: 140px;
  }
  .brand-card-quote {
    -webkit-line-clamp: 4;
  }
  .brands-track.is-left {
    animation-duration: 40s;
  }
  .brands-track.is-right {
    animation-duration: 44s;
  }
  /* mobile: cards bleed edge-to-edge — rows break out of the shell, no mask fade */
  .brands-say-rows {
    margin: 0 calc(-1 * var(--page-pad-x));
    width: auto;
    /* 桌面的 max-width:100% 会把破壳宽度钳回 343，右侧空 32px */
    max-width: none;
  }
  .brands-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* 卡宽 100cqw（手机全宽卡）只到 ≤640；768 平板用块头 min(300px, 86vw)，
     768px 巨宽卡太夸张（2026-08-31 Park） */
}

/* Explore — solid green / blue cards; flat (no 3D board tilt) */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.explore-card {
  --explore-accent: #fff;
  --explore-glow: rgba(37, 99, 235, 0.35);
  /*
       * Nested radius formula: r_outer = r_inner + gap
       * pad (gap from outer edge to visual) = 24px → r_outer 24, r_inner 12?
       * Actually: r_inner = max(0, r_outer - pad). With pad 24 & outer 24 → 0 (too sharp).
       * Use outer 24, visual inset ~12 from card edge on nested corners → r_inner = 12.
       */
  --r-outer: 24px;
  --r-inner: 12px; /* = r_outer - 12px effective nested gap */
  --r-nested: 10px; /* glass cards inside returns stage */
  --spot-x: 50%;
  --spot-y: 35%;
  --spot-opacity: 0;
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--r-outer);
  padding: 24px 26px 22px 26px;
  min-height: 0;
  height: auto;
  display: grid;
  /* give terminal column enough width so [running] etc. not clipped */
  grid-template-columns: minmax(0, 0.88fr) minmax(280px, 1.2fr);
  gap: 16px 20px;
  align-items: stretch;
  overflow: visible;
  outline: none;
  text-decoration: none;
  color: #fff;
  /* no default drop shadow — only soft hover */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
  transition:
    box-shadow 0.4s ease,
    border-color 0.35s ease;
}
.explore-card:hover,
.explore-card.is-tilting {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 10px 28px rgba(15, 23, 42, 0.08);
}
.explore-card.is-tilting {
  transition:
    box-shadow 0.4s ease,
    border-color 0.35s ease;
}
.explore-card.is-leaving {
  transition:
    box-shadow 0.45s ease,
    border-color 0.35s ease;
}
/* Mouse spotlight + soft top sheen */
.explore-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: var(--spot-opacity);
  transition: opacity 0.35s ease;
  background:
    radial-gradient(
      520px circle at var(--spot-x) var(--spot-y),
      rgba(255, 255, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.18) 22%,
      rgba(255, 255, 255, 0.04) 42%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0) 46%
    );
  mix-blend-mode: soft-light;
}
.explore-card.is-tilting::before {
  opacity: 1;
}
/*
     * Returns hover = mint/white spotlight following pointer (same model as API).
     * normal blend so it reads clean on solid teal, not muddy soft-light.
     */
.explore-card-returns::before {
  mix-blend-mode: normal;
  background: radial-gradient(
    440px circle at var(--spot-x) var(--spot-y),
    rgba(255, 255, 255, 0.48) 0%,
    rgba(220, 252, 241, 0.32) 18%,
    rgba(167, 243, 208, 0.16) 36%,
    rgba(255, 255, 255, 0.05) 52%,
    transparent 70%
  );
  opacity: 0;
}
.explore-card-returns.is-tilting::before,
.explore-card-returns:hover::before {
  opacity: 1;
}
/*
     * API hover = pure purple spotlight (normal blend).
     * Do NOT use screen/soft-light + pale lavender — reads as dirty white.
     */
.explore-card-api::before {
  mix-blend-mode: normal;
  background: radial-gradient(
    440px circle at var(--spot-x) var(--spot-y),
    rgba(168, 85, 247, 0.5) 0%,
    rgba(139, 92, 246, 0.32) 22%,
    rgba(124, 58, 237, 0.16) 42%,
    rgba(88, 28, 135, 0.06) 58%,
    transparent 72%
  );
}
.explore-card-api.is-tilting::before,
.explore-card-api:hover::before {
  opacity: 1;
}
/*
     * Tracking hover = sky/blue spotlight (normal blend).
     */
.explore-card-tracking::before {
  mix-blend-mode: normal;
  background: radial-gradient(
    440px circle at var(--spot-x) var(--spot-y),
    rgba(56, 189, 248, 0.5) 0%,
    rgba(59, 130, 246, 0.32) 22%,
    rgba(37, 99, 235, 0.16) 42%,
    rgba(30, 64, 175, 0.06) 58%,
    transparent 72%
  );
}
.explore-card-tracking.is-tilting::before,
.explore-card-tracking:hover::before {
  opacity: 1;
}
.explore-card::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -14px;
  height: 36px;
  background: var(--explore-glow);
  filter: blur(22px);
  opacity: 0; /* hidden by default */
  pointer-events: none;
  z-index: -1;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.explore-card > * {
  position: relative;
  z-index: 1;
}
.explore-card:hover::after,
.explore-card.is-tilting::after {
  opacity: 0.35; /* soft glow only on hover */
  transform: translateY(2px) scaleX(1.02);
}
.explore-card:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}
.explore-card-copy {
  min-width: 0;
  align-self: stretch;
  padding-top: 4px;
  padding-bottom: 2px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
}
.explore-card h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, calc(16.56px + 0.4vw), 22px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}
.explore-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(12.5px, calc(11.6px + 0.25vw), 15px);
  line-height: 1.55;
}
/*
     * CTA pill — more solid + dual ring; border-beam uses ::before/::after
     * so arrow lives in a real child (.explore-link-arrow).
     */
.explore-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  margin-top: auto;
  padding: 12px 20px 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  letter-spacing: 0.01em;
  line-height: 1;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  /* inner stroke */
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* outer stroke + top highlight + bottom shade + soft lift */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -1px 0 rgba(0, 0, 0, 0.1) inset,
    0 6px 18px rgba(0, 0, 0, 0.16);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  transition:
    gap 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.explore-link-label {
  position: relative;
  z-index: 4;
}
.explore-link-arrow {
  display: inline-block;
  position: relative;
  z-index: 4;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.explore-card:hover .explore-link,
.explore-card.is-tilting .explore-link {
  gap: 12px;
  border-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.14) 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -1px 0 rgba(0, 0, 0, 0.12) inset,
    0 8px 22px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}
.explore-card:hover .explore-link-arrow,
.explore-card.is-tilting .explore-link-arrow {
  transform: translateX(4px);
  animation: explore-arrow-nudge 0.9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes explore-arrow-nudge {
  0%,
  100% {
    transform: translateX(4px);
  }
  50% {
    transform: translateX(10px);
  }
}
/* Returns — brighter glass pill on teal */
.explore-card-returns .explore-link {
  border-color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.16) 100%
  );
  box-shadow:
    0 0 0 1px rgba(12, 80, 68, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -1px 0 rgba(0, 0, 0, 0.1) inset,
    0 6px 18px rgba(16, 100, 85, 0.28);
  text-shadow: 0 1px 1px rgba(8, 60, 50, 0.22);
}
.explore-card-returns:hover .explore-link,
.explore-card-returns.is-tilting .explore-link {
  border-color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  box-shadow:
    0 0 0 1px rgba(12, 80, 68, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 -1px 0 rgba(0, 0, 0, 0.12) inset,
    0 8px 24px rgba(16, 100, 85, 0.34);
}
/* API — denser glass + purple lift */
.explore-card-api .explore-link {
  border-color: rgba(226, 200, 255, 0.55);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(139, 92, 246, 0.28) 100%
  );
  box-shadow:
    0 0 0 1px rgba(88, 28, 135, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 -1px 0 rgba(0, 0, 0, 0.3) inset,
    0 6px 18px rgba(109, 40, 217, 0.36);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.explore-card-api:hover .explore-link,
.explore-card-api.is-tilting .explore-link {
  border-color: rgba(233, 213, 255, 0.75);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(167, 139, 250, 0.35) 100%
  );
  box-shadow:
    0 0 0 1px rgba(109, 40, 217, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -1px 0 rgba(0, 0, 0, 0.28) inset,
    0 8px 24px rgba(109, 40, 217, 0.42);
}
/* Tracking — glass pill on blue */
.explore-card-tracking .explore-link {
  border-color: rgba(186, 230, 253, 0.65);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(59, 130, 246, 0.3) 100%
  );
  box-shadow:
    0 0 0 1px rgba(30, 64, 175, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -1px 0 rgba(0, 0, 0, 0.22) inset,
    0 6px 18px rgba(37, 99, 235, 0.34);
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.28);
}
.explore-card-tracking:hover .explore-link,
.explore-card-tracking.is-tilting .explore-link {
  border-color: rgba(224, 242, 254, 0.85);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(96, 165, 250, 0.38) 100%
  );
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.48),
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 8px 24px rgba(37, 99, 235, 0.4);
}

/* Returns — solid #20B195 family */
.explore-card-returns {
  --returns-accent: #20b195;
  --explore-glow: rgba(32, 177, 149, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(
    165deg,
    #2bc4a6 0%,
    #20b195 42%,
    #189a82 72%,
    #148f78 100%
  );
  box-shadow:
    0 0 0 1px rgba(16, 100, 85, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.14) inset;
}
.explore-card-returns:hover,
.explore-card-returns.is-tilting {
  box-shadow:
    0 0 0 1px rgba(16, 100, 85, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 12px 32px rgba(20, 140, 118, 0.18);
}

/* Tracking — solid blue family (replaces API card on API product page) */
.explore-card-tracking {
  --explore-glow: rgba(59, 130, 246, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(
    165deg,
    #3b82f6 0%,
    #2563eb 42%,
    #1d4ed8 72%,
    #1e40af 100%
  );
  box-shadow:
    0 0 0 1px rgba(30, 64, 175, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.14) inset;
}
.explore-card-tracking:hover,
.explore-card-tracking.is-tilting {
  box-shadow:
    0 0 0 1px rgba(30, 64, 175, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 12px 32px rgba(37, 99, 235, 0.22);
}
.explore-card-tracking .explore-title-ico {
  color: #e0f2fe;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}
/* Tracking mock — from Returns ExploreMore; flat, no 3D */
.explore-card-tracking .track-ui {
  position: relative;
  width: 100%;
  align-self: stretch;
  min-height: 420px;
  height: auto;
  display: block;
  padding: 0;
  border-radius: var(--r-inner, 12px);
  overflow: visible;
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
  background: transparent;
  border: none;
  box-shadow: none;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}
.track-ui-board {
  position: absolute;
  top: 14px;
  left: 6px;
  right: 8px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100% - 24px);
  padding: 22px 16px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 16px 40px -12px rgba(15, 23, 42, 0.16);
}
.track-ui-status {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #12151c;
  -webkit-text-fill-color: #12151c;
  white-space: nowrap;
}
.track-ui-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  position: relative;
  margin: 0 2px;
}
.track-ui-progress::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8 0%, #2563eb 55%, #8b5cf6 100%);
  transform: translateY(-50%);
}
.track-ui-progress i {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2563eb;
  color: #f4f7fb;
}
.track-ui-progress i.is-now {
  background: linear-gradient(135deg, #7c5cfc 0%, #8b5cf6 100%);
  box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.18);
}
.track-ui-progress i svg {
  width: 11px;
  height: 11px;
  display: block;
}
.track-ui-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 7px 2px 0;
  flex-shrink: 0;
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  -webkit-text-fill-color: #94a3b8;
  text-align: center;
}
.track-ui-wismo,
.track-ui-video {
  position: absolute;
  z-index: 3;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 8px 18px rgba(15, 23, 42, 0.08),
    0 22px 48px -12px rgba(15, 23, 42, 0.28);
}
.track-ui-wismo {
  left: -8px;
  top: 208px;
  width: 168px;
  padding: 8px 10px;
  z-index: 4;
}
.track-ui-wismo-top,
.track-ui-video-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.track-ui-wismo-top span,
.track-ui-video-top span {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}
.track-ui-wismo-num {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #0b1f5c;
  -webkit-text-fill-color: #0b1f5c;
}
.track-ui-wismo-num b {
  font-size: 15px;
  font-weight: 600;
  color: #16a34a;
  -webkit-text-fill-color: #16a34a;
}
.track-ui-wismo-hint {
  margin: 0 0 5px;
  font-size: 9px;
  line-height: 1.35;
  color: #64748b;
  -webkit-text-fill-color: #64748b;
  white-space: nowrap;
}
.track-ui-bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  align-items: end;
  height: 15px;
  padding-top: 6px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}
.track-ui-bars span {
  display: block;
  border-radius: 3px;
  background: linear-gradient(180deg, #7ba4f0 0%, #1e4db7 100%);
  opacity: 0.88;
  min-height: 4px;
}
.track-ui-bars span:nth-child(odd) {
  opacity: 0.68;
}
.track-ui-bars span:last-child {
  opacity: 0.48;
}
.track-ui-video {
  top: 132px;
  right: -8px;
  width: 164px;
  padding: 7px 8px 8px;
  z-index: 5;
}
.track-ui-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 6px;
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 40%, #312e81 100%);
}
.track-ui-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.track-ui-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.16),
    0 6px 16px rgba(15, 23, 42, 0.28);
  color: #0f172a;
}
.track-ui-play svg {
  width: 10px;
  height: 10px;
  margin-left: 1px;
  display: block;
}
.track-ui-video strong {
  display: block;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  line-height: 1.3;
  margin: 0 0 4px;
  white-space: nowrap;
}
.track-ui-video > p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 9px;
  color: #94a3b8;
  -webkit-text-fill-color: #94a3b8;
  white-space: nowrap;
}
.track-ui-video > p i {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: #cbd5e1;
}
.track-ui-events {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 12px 0 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.track-ui-ev-head {
  margin: 0 0 8px;
  padding: 0 2px;
}
.track-ui-ev-head strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}
.track-ui-ev-head span {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 500;
  color: #94a3b8;
  -webkit-text-fill-color: #94a3b8;
}
.track-ui-ev-list {
  --node-col: 20px;
  --node-size: 8px;
  --rail: calc(var(--node-col) / 2);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 4px;
  min-height: 0;
}
.track-ui-ev-list::before {
  content: "";
  position: absolute;
  left: calc(var(--rail) - 0.75px);
  top: 16px;
  bottom: 16px;
  width: 1.5px;
  background: #e2e8f0;
}
.track-ui-ev {
  display: grid;
  grid-template-columns: var(--node-col) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  position: relative;
  z-index: 1;
  padding: 8px 8px 8px 0;
  min-height: 40px;
  border-radius: 8px;
}
.track-ui-ev.is-now {
  background: #eef5ff;
}
.track-ui-ev > i {
  width: var(--node-size);
  height: var(--node-size);
  margin: 3px auto 0;
  box-sizing: border-box;
  justify-self: center;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  transform: rotate(45deg);
}
.track-ui-ev.is-now > i {
  border-radius: 50%;
  transform: none;
  background: #22c55e;
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}
.track-ui-ev b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}
.track-ui-ev span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.35;
  color: #64748b;
  -webkit-text-fill-color: #64748b;
}
.explore-card-returns .explore-title-ico {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 6px 16px rgba(16, 100, 85, 0.18);
}
.explore-card-returns .returns-ui {
  --kv-s: min(0.5, 100cqw / 704px);
  container-type: inline-size;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  overflow: clip;
  height: auto;
  min-height: 0;
  max-height: none;
  align-self: center;
  border-radius: var(--r-inner);
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}
.explore-card-returns .returns-ui-photo {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: 540px;
  margin: 12px 0 20px;
  object-fit: cover;
  object-position: 68% 36%;
  border-radius: 22px;
}
.returns-kv-fit {
  width: calc(704px * var(--kv-s));
  height: calc(572px * var(--kv-s));
  position: relative;
  flex: none;
}
.returns-kv-stage {
  position: absolute;
  left: calc(56px * var(--kv-s));
  top: 0;
  width: 620px;
  height: 572px;
  transform: scale(var(--kv-s));
  transform-origin: top left;
}
.returns-kv-flow, .returns-kv-method { position: absolute; z-index: 2; }
.returns-kv-flow { left: -56px; top: 28px; width: 292px; display: flex; flex-direction: column; align-items: stretch; }
.returns-kv-method { right: 0; bottom: 24px; width: 248px; z-index: 3; padding: 16px 16px 14px; }
.returns-kv-card, .returns-kv-method {
  border-radius: 20px;
  color: #111827;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 18px 40px -16px rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}
.returns-kv-card { padding: 16px 16px 14px; }
.returns-kv-card p, .returns-kv-method p { margin: 0 0 12px; font-size: 13px; font-weight: 500; letter-spacing: -0.02em; color: #111827; }
.returns-kv-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.returns-kv-item.is-on { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.returns-kv-item img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: block; }
.returns-kv-item strong { display: block; font-size: 12px; font-weight: 600; color: #111827; letter-spacing: -0.02em; line-height: 1.25; }
.returns-kv-item em { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; color: #71717a; }
.returns-kv-item i, .returns-kv-item b, .returns-kv-reason i, .returns-kv-reason b { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #d4d4d8; box-sizing: border-box; }
.returns-kv-item b, .returns-kv-reason.is-on b { border-color: #14b8a6; background: #14b8a6; box-shadow: inset 0 0 0 3px #fff; }
.returns-kv-link { display: flex; flex-direction: column; align-items: center; align-self: center; width: 10px; height: 36px; margin: -5px 0; z-index: 3; }
.returns-kv-link b { width: 8px; height: 8px; border-radius: 50%; background: #14b8a6; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22); }
.returns-kv-link s { flex: 1; width: 0; margin: 2px 0; border-left: 1.5px dashed #5eead4; }
.returns-kv-reason { display: flex; align-items: center; gap: 10px; padding: 2px 0; font-size: 12.5px; color: #52525b; }
.returns-kv-reason.is-on { color: #111827; font-weight: 600; }
.returns-kv-method div { display: flex; align-items: center; gap: 10px; height: 40px; margin-top: 8px; padding: 0 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); font-size: 12.5px; font-weight: 600; color: #111; white-space: nowrap; }
.returns-kv-method div:first-of-type { margin-top: 0; }
.returns-kv-method div.is-on { box-shadow: 0 0 0 2px #14b8a6; }
.returns-kv-method svg { width: 16px; height: 16px; flex: none; color: #0f766e; }
/* explicit dark type on every mock text node (beats inherit white) */
.explore-card-returns .returns-ui-brand,
.explore-card-returns .returns-ui-head strong,
.explore-card-returns .returns-ui-meta .name,
.explore-card-returns .returns-method-title,
.explore-card-returns .returns-method-opt {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}
.explore-card-returns .returns-ui-head span,
.explore-card-returns .returns-ui-meta .sub,
.explore-card-returns .returns-ui-meta .sub em,
.explore-card-returns .returns-ui-arrow {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b;
}
.explore-card-returns .returns-ui-meta .sub b {
  color: #334155 !important;
  -webkit-text-fill-color: #334155;
}
.explore-card-returns .returns-ui-item.is-active .returns-ui-arrow {
  color: #20b195 !important;
  -webkit-text-fill-color: #20b195;
}
.explore-card-returns .returns-method-opt .rm-tag {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e;
}
.explore-card-returns .returns-method-opt .rm-label {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
}
/* hide decorative blobs (light spots) */
.explore-card-returns .returns-ui-blobs {
  display: none;
}

/* stack cards: fixed top/left layout */

/* API = deep charcoal; hover light = purple only */
.explore-card-api {
  --explore-glow: rgba(139, 92, 246, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(
    120% 100% at 0% 0%,
    #3a3f4a 0%,
    #2a2e38 32%,
    #1c1f27 68%,
    #14161c 100%
  );
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

/* Faint ASCII matrix behind API card (ref: terminal product pages) */
.api-ascii {
  position: absolute;
  inset: 0;
  /* span full card grid so layer isn't stuck in first cell */
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0.1;
  transition: opacity 0.45s ease;
  -webkit-mask-image: radial-gradient(
    ellipse 95% 88% at 50% 45%,
    #000 36%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 95% 88% at 50% 45%,
    #000 36%,
    transparent 78%
  );
}
.explore-card-api:hover .api-ascii,
.explore-card-api.is-tilting .api-ascii {
  opacity: 0.14;
}
/* keep copy + terminal above the matrix */
.explore-card-api > .explore-card-copy,
.explore-card-api > .explore-api-visual {
  position: relative;
  z-index: 1;
}
.api-ascii-layer {
  position: absolute;
  left: -6%;
  width: 112%;
  margin: 0;
  padding: 0;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  white-space: pre;
  color: rgba(226, 232, 240, 0.48);
  user-select: none;
  will-change: transform;
  backface-visibility: hidden;
}
/* doubled content → -50% is seamless loop */
.api-ascii-a {
  top: 0;
  animation: api-ascii-drift 36s linear infinite;
}
.api-ascii-b {
  top: 0;
  opacity: 0.4;
  color: rgba(196, 181, 253, 0.42);
  animation: api-ascii-drift-rev 52s linear infinite;
}
@keyframes api-ascii-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}
@keyframes api-ascii-drift-rev {
  from {
    transform: translate3d(0, -50%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .api-ascii-a,
  .api-ascii-b {
    animation: none;
  }
}
.explore-card-api:hover,
.explore-card-api.is-tilting {
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.45),
    0 1px 0 rgba(216, 180, 254, 0.12) inset,
    0 16px 40px rgba(109, 40, 217, 0.35);
}
.explore-card-api .explore-title-ico {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 6px 16px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.explore-card-api .code-window {
  position: relative;
  z-index: 2; /* above line hub tuck under bottom edge */
  /* terminal: darker than card, but brighter than pure black */
  --cw-bg: #1e2430;
  --cw-panel: #262d3c;
  --cw-text: #f1f3f7;
  --cw-muted: #a8b0bd;
  --cw-green: #4ade80;
  --cw-blue: #93b4ff;
  --cw-add: rgba(74, 222, 128, 0.18);
  --cw-add-text: #d1fae5;
  --cw-del: rgba(248, 113, 113, 0.2);
  --cw-del-text: #fecaca;
  border-radius: var(--r-inner);
  background: var(--cw-bg);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  /* fixed shell — typing scrolls inside, never grows the card */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  height: 288px;
  min-height: 288px;
  max-height: 288px;
  overflow: hidden;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
}
.explore-card-api .code-window-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.explore-card-api .cw-edit {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.explore-card-api .cw-code {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none; /* height locked by parent shell */
  overflow: hidden;
  /* scroll container for typewriter lines */
}
.explore-card-api .code-window-chrome {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #2a3140 0%, #222836 100%);
}
.explore-card-api .api-carrier-name {
  color: rgba(255, 255, 255, 0.72);
}
.explore-card-api .api-flow-static {
  stroke: rgba(255, 255, 255, 0.28);
}
.explore-card-api .api-flow-pulse {
  stroke: rgba(203, 213, 225, 0.95);
  filter: drop-shadow(0 0 4px rgba(226, 232, 240, 0.55));
}
/* right column: terminal + carrier mesh */
.explore-api-visual {
  display: flex;
  flex-direction: column;
  gap: 0; /* lines bridge window → tiles; no gap break */
  min-width: 0;
  align-self: stretch;
  height: auto;
  min-height: 0;
  overflow: visible;
}
.api-carriers {
  position: relative;
  margin-top: 0;
  padding: 0 2px 0;
  flex-shrink: 0;
}
.api-carriers-hub {
  display: none;
}
/*
     * Curves: tuck under code-window bottom + into tile tops so ends touch both.
     * Hub at top-center of SVG = under terminal; ends at 5 col centers on tiles.
     */
.api-carriers-lines {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: -8px; /* attach to code-window bottom */
  margin-bottom: -16px; /* land on carrier tile tops */
  overflow: visible;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
/* solid base tree — cubic curves, not dashed / not orthogonal */
.api-flow-static {
  fill: none;
  stroke: rgba(147, 197, 253, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/*
     * Flow packet on solid path: short solid segment + long gap
     * (looks like a pulse, not a dashed line). Each branch has own delay.
     */
.api-flow-pulse {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16 200;
  stroke-dashoffset: 0;
  animation: api-flow-pulse 2.1s linear infinite;
  filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.85));
}
.api-flow-pulse.p2 {
  stroke: #93c5fd;
  animation-duration: 2.35s;
  animation-delay: 0.28s;
}
.api-flow-pulse.p3 {
  stroke: #3b82f6;
  animation-duration: 1.95s;
  animation-delay: 0.55s;
}
.api-flow-pulse.p4 {
  stroke: #93c5fd;
  animation-duration: 2.2s;
  animation-delay: 0.82s;
}
.api-flow-pulse.p5 {
  stroke: #60a5fa;
  animation-duration: 2.5s;
  animation-delay: 1.05s;
}
@keyframes api-flow-pulse {
  to {
    stroke-dashoffset: -216;
  }
}
.api-carriers-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
  padding-top: 14px; /* room for SVG tuck onto tile tops */
  position: relative;
  z-index: 2;
}
.api-carrier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.api-carrier-tile {
  width: 100%;
  max-width: 48px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 14px rgba(15, 23, 42, 0.07);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}
.api-carrier-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.api-carrier-name {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #64748b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.explore-card-api:hover .api-carrier-tile {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 10px 18px rgba(37, 99, 235, 0.12);
}
.explore-card-api:hover .api-carrier:nth-child(1) .api-carrier-tile {
  transition-delay: 0.02s;
}
.explore-card-api:hover .api-carrier:nth-child(2) .api-carrier-tile {
  transition-delay: 0.05s;
}
.explore-card-api:hover .api-carrier:nth-child(3) .api-carrier-tile {
  transition-delay: 0.08s;
}
.explore-card-api:hover .api-carrier:nth-child(4) .api-carrier-tile {
  transition-delay: 0.11s;
}
.explore-card-api:hover .api-carrier:nth-child(5) .api-carrier-tile {
  transition-delay: 0.14s;
}
@media (prefers-reduced-motion: reduce) {
  .api-flow-pulse {
    animation: none;
    opacity: 0.55;
  }
}

/* Explore title circular icons — Delucks-style hover SVG play */
.explore-title-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 0 12px;
  flex-shrink: 0;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    background 0.35s ease;
}
.explore-card.is-tilting .explore-title-ico,
.explore-card:hover .explore-title-ico {
  transform: translateZ(22px) scale(1.08);
}
.explore-title-ico svg {
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
}
.explore-title-ico svg path,
.explore-title-ico svg line {
  vector-effect: non-scaling-stroke;
}

/* —— Returns: cycle arrows draw once (tracking-react) —— */
.explore-title-ico-returns .ico-r-arc-a,
.explore-title-ico-returns .ico-r-arc-b {
  stroke-dasharray: 28;
  stroke-dashoffset: 0;
}
.explore-title-ico-returns .ico-r-head-a,
.explore-title-ico-returns .ico-r-head-b {
  stroke-dasharray: 12;
  stroke-dashoffset: 0;
}
.explore-card-returns:hover .explore-title-ico-returns .ico-r-arc-a,
.explore-card-returns.is-tilting .explore-title-ico-returns .ico-r-arc-a,
.explore-card-returns:hover .explore-title-ico-returns .ico-r-arc-b,
.explore-card-returns.is-tilting .explore-title-ico-returns .ico-r-arc-b {
  animation: ico-returns-arc 1.15s cubic-bezier(0.45, 0, 0.2, 1) 1 forwards;
}
.explore-card-returns:hover .explore-title-ico-returns .ico-r-head-a,
.explore-card-returns.is-tilting .explore-title-ico-returns .ico-r-head-a,
.explore-card-returns:hover .explore-title-ico-returns .ico-r-head-b,
.explore-card-returns.is-tilting .explore-title-ico-returns .ico-r-head-b {
  animation: ico-returns-head 1.15s cubic-bezier(0.45, 0, 0.2, 1) 1 forwards;
}
@keyframes ico-returns-arc {
  0% { stroke-dashoffset: 28; opacity: 0.35; }
  32% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ico-returns-head {
  0% { stroke-dashoffset: 12; opacity: 0; }
  22% { stroke-dashoffset: 12; opacity: 0; }
  48% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
/* —— API: brackets open + slash draw + pulse —— */
.explore-title-ico-api .ico-a-left,
.explore-title-ico-api .ico-a-right,
.explore-title-ico-api .ico-a-slash {
  transform-box: fill-box;
  transform-origin: center;
}
.explore-title-ico-api .ico-a-left {
  stroke-dasharray: 18;
  stroke-dashoffset: 0;
}
.explore-title-ico-api .ico-a-right {
  stroke-dasharray: 18;
  stroke-dashoffset: 0;
}
.explore-title-ico-api .ico-a-slash {
  stroke-dasharray: 16;
  stroke-dashoffset: 0;
}
.explore-card-api:hover .explore-title-ico-api .ico-a-left,
.explore-card-api.is-tilting .explore-title-ico-api .ico-a-left {
  animation: ico-api-left 1.25s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.explore-card-api:hover .explore-title-ico-api .ico-a-right,
.explore-card-api.is-tilting .explore-title-ico-api .ico-a-right {
  animation: ico-api-right 1.25s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.explore-card-api:hover .explore-title-ico-api .ico-a-slash,
.explore-card-api.is-tilting .explore-title-ico-api .ico-a-slash {
  animation: ico-api-slash 1.25s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes ico-api-left {
  0% {
    stroke-dashoffset: 18;
    opacity: 0.4;
    transform: translateX(2px);
  }
  22% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: translateX(0);
  }
  48% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: translateX(-1.5px);
  }
  72% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    stroke-dashoffset: 18;
    opacity: 0.4;
    transform: translateX(2px);
  }
}
@keyframes ico-api-right {
  0% {
    stroke-dashoffset: 18;
    opacity: 0.4;
    transform: translateX(-2px);
  }
  22% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: translateX(0);
  }
  48% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: translateX(1.5px);
  }
  72% {
    stroke-dashoffset: 0;
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    stroke-dashoffset: 18;
    opacity: 0.4;
    transform: translateX(-2px);
  }
}
@keyframes ico-api-slash {
  0% {
    stroke-dashoffset: 16;
    opacity: 0;
  }
  18% {
    stroke-dashoffset: 16;
    opacity: 0;
  }
  40% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  88% {
    stroke-dashoffset: -4;
    opacity: 0.45;
  }
  100% {
    stroke-dashoffset: 16;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .explore-card-returns:hover .explore-title-ico-returns path,
  .explore-card-returns.is-tilting .explore-title-ico-returns path,
  .explore-card-returns:hover .explore-title-ico-returns circle,
  .explore-card-returns.is-tilting .explore-title-ico-returns circle,
  .explore-card-api:hover .explore-title-ico-api path,
  .explore-card-api.is-tilting .explore-title-ico-api path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.explore-card-copy h3 {
  margin-top: 0;
}
.explore-card-copy .explore-card-headline {
  display: block;
  margin: 2px 0 6px;
  font-size: clamp(15px, calc(13.4px + 0.45vw), 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .explore-card,
  .explore-card.is-tilting,
  .explore-card.is-leaving {
    transition: none !important;
    transform: none !important;
  }
  .explore-card:hover .explore-link-arrow,
  .explore-card.is-tilting .explore-link-arrow {
    animation: none;
    transform: translateX(4px);
  }
  .returns-ui-card,
  .returns-method,
  .explore-card-returns .returns-ui,
  .explore-card-tracking .track-ui,
  .track-ui-board,
  .track-ui-wismo,
  .track-ui-video,
  .explore-card-api .code-window,
  .explore-card-api .api-carriers,
  .explore-card-api .explore-api-visual,
  .explore-card-copy {
    transform: none !important;
    transition: none !important;
    filter: none;
  }
}

/* Returns mock — tracking-react glass + scene photo */
.returns-ui {
  position: relative;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  border-radius: var(--r-inner, 12px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  display: grid;
  place-items: center;
  padding: 28px 16px 32px;
  box-sizing: border-box;
  background: #d8f3ea;
}
.returns-ui-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.returns-ui-blobs {
  display: none;
}
.returns-ui-stack {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 300px;
  height: 400px;
  min-height: 400px;
  transform: none;
  transform-style: flat;
}
.returns-win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 12px;
  margin: 0 0 12px;
}
.returns-win-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  background: #d1d5db;
}
.returns-win-bar i:nth-child(1) { background: #ff5f57; }
.returns-win-bar i:nth-child(2) { background: #febc2e; }
.returns-win-bar i:nth-child(3) { background: #28c840; }
.returns-ui-card {
  position: absolute;
  top: 18px;
  left: 8px;
  width: 78%;
  z-index: 1;
  border-radius: 14px;
  padding: 12px 14px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 22px 50px -18px rgba(15, 23, 42, 0.28);
}
.returns-ui-card > * {
  position: relative;
  z-index: 1;
}
.returns-method {
  position: absolute;
  top: 188px;
  right: 0;
  left: auto;
  width: 72%;
  z-index: 2;
  border-radius: 14px;
  padding: 12px 14px 14px;
  box-sizing: border-box;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 24px 56px -16px rgba(15, 23, 42, 0.3);
}
.returns-method > * {
  position: relative;
  z-index: 1;
}
.returns-method-frost {
  display: none !important;
}
.returns-ui-brand {
  margin: 0;
  text-align: left;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  line-height: 1.2;
}
.returns-ui-head {
  text-align: left;
  padding: 0;
}
.returns-ui-head strong {
  display: block;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  margin-bottom: 4px;
}
.returns-ui-head span {
  display: block;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
  font-size: 11px;
  color: #64748b;
  -webkit-text-fill-color: #64748b;
  line-height: 1.4;
}
.returns-ui-list {
  display: grid;
  gap: 8px;
}
.returns-ui-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}
.returns-ui-item.is-active {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.returns-ui-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: #e8ebe6;
}
.returns-ui-thumb img {
  position: absolute;
  width: 128px;
  height: 96px;
  max-width: none;
  left: 0;
  top: -62px;
  object-fit: fill;
  pointer-events: none;
}
.returns-ui-item[data-product="sneakers"] .returns-ui-thumb {
  color: transparent;
  background: #e8ebe6;
}
.returns-ui-item[data-product="perfume"] .returns-ui-thumb {
  color: #a16207;
  background: linear-gradient(160deg, #fffbeb, #fef3c7);
}
.returns-ui-meta {
  min-width: 0;
  font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
}
.returns-ui-meta .name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  line-height: 1.2;
}
.returns-ui-meta .sub {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
  color: #64748b;
  -webkit-text-fill-color: #64748b;
}
.returns-ui-meta .sub em {
  font-style: normal;
  color: #64748b;
}
.returns-ui-meta .sub i {
  font-style: normal;
  opacity: 0.45;
}
.returns-ui-meta .sub b {
  font-weight: 650;
  color: #334155;
  -webkit-text-fill-color: #334155;
}
/* legacy size/price if still present */
.returns-ui-meta .size,
.returns-ui-meta .price {
  display: none;
}
.returns-ui-arrow {
  display: grid;
  place-items: center;
  color: #94a3b8;
  -webkit-text-fill-color: #94a3b8;
  width: 18px;
  height: 18px;
}
.returns-ui-arrow svg {
  width: 14px;
  height: 14px;
  display: block;
}
.returns-ui-item.is-active .returns-ui-arrow {
  color: #20b195;
  -webkit-text-fill-color: #20b195;
}

.returns-method-title {
  margin: 0 0 8px;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}
.returns-method-list {
  display: grid;
  gap: 6px;
}
.returns-method-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
  box-shadow: none;
}
.returns-method-opt .rm-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  box-sizing: border-box;
  position: relative;
}
.returns-method-opt.is-selected {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.returns-method-opt.is-selected .rm-dot {
  border-color: #20b195;
  background: #20b195;
  box-shadow: 0 0 0 3px rgba(32, 177, 149, 0.16);
}
.returns-method-opt.is-selected .rm-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}
.returns-method-opt .rm-label {
  min-width: 0;
}
.returns-method-opt .rm-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  background: rgba(32, 177, 149, 0.16);
  border: 1px solid rgba(32, 177, 149, 0.22);
  padding: 3px 7px;
  border-radius: 99px;
}
.returns-method-opt .rm-ico {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  opacity: 0.9;
}
.returns-method-opt .rm-ico svg {
  width: 16px;
  height: 16px;
  display: block;
}
.returns-method-opt[data-kind="refund"] .rm-ico {
  color: #2563eb;
}
.returns-method-opt[data-kind="green"] .rm-ico {
  color: #0f766e;
}
.returns-method-opt[data-kind="exchange"] .rm-ico {
  color: #7c3aed;
}

/* Code window — lighter surface */
.code-window {
  /* soft dark — not pure black */
  --cw-bg: #2a2f3a;
  --cw-panel: #323845;
  --cw-text: #e4e7ed;
  --cw-muted: #9aa3b2;
  --cw-green: #4ade80;
  --cw-blue: #7aa2ff;
  --cw-add: rgba(74, 222, 128, 0.16);
  --cw-add-text: #bbf7d0;
  --cw-del: rgba(248, 113, 113, 0.18);
  --cw-del-text: #fecaca;
  position: relative;
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  border-radius: var(--r-inner, 12px);
  background: var(--cw-bg);
  color: var(--cw-text);
  box-shadow: none;
  border: none;
  outline: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    monospace;
  font-size: 11px;
  line-height: 1.45;
  pointer-events: none;
  user-select: none;
}
.code-window-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #333946 0%, #2c323e 100%);
  border-radius: var(--r-inner, 12px) var(--r-inner, 12px) 0 0;
}
.cw-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.cw-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}
.cw-dots i:nth-child(1) {
  background: #ff5f57;
}
.cw-dots i:nth-child(2) {
  background: #febc2e;
}
.cw-dots i:nth-child(3) {
  background: #28c840;
}
.cw-path {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--cw-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-progress {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  color: var(--cw-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.cw-progress-bar {
  width: 42px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.cw-progress-bar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5b8cff, #93b4ff);
  transition: width 0.35s linear;
}
.code-window-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* tasks / thought stay put; code region takes remaining height */
}
.code-window-body .cw-tasks,
.code-window-body .cw-thought {
  flex: 0 0 auto;
}
.cw-tasks {
  display: grid;
  gap: 4px;
}
.cw-task {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cw-muted);
  font-size: 11px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.cw-task .cw-ico {
  width: 10px;
  text-align: center;
  flex: 0 0 auto;
  color: #6b7385;
}
.cw-task .cw-label {
  flex: 1 1 0%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-task .cw-label .hl {
  color: #c5cbd6;
}
.cw-task .cw-label .tag {
  color: #7dd3fc;
}
.cw-task .cw-status {
  flex: 0 0 auto;
  font-size: 10.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cw-task.is-running .cw-status {
  color: var(--cw-blue);
}
.cw-task.is-done .cw-status {
  color: var(--cw-green);
}
.cw-task.is-pending .cw-status {
  color: #6b7385;
}
.cw-task.is-running .cw-ico {
  color: var(--cw-blue);
}
.cw-task.is-done .cw-ico {
  color: var(--cw-green);
}

.cw-thought {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9aa3b2;
  font-size: 11px;
  padding: 2px 0 0;
}
.cw-thought::before {
  content: "◆";
  font-size: 8px;
  color: #a78bfa;
}

.cw-edit {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 2px;
}
.cw-edit-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9aa3b2;
  font-size: 11px;
  margin-bottom: 6px;
}
.cw-edit-head::before {
  content: "◆";
  font-size: 8px;
  color: #a78bfa;
}
.cw-edit-head strong {
  color: var(--cw-green);
  font-weight: 600;
}
.cw-edit-head span {
  color: #93c5fd;
  font-weight: 500;
}
.cw-code {
  margin: 0;
  padding: 0;
  overflow: hidden; /* JS drives scrollTop to follow caret */
  max-height: 9.6em;
  position: relative;
}
.cw-code-scroll {
  display: flex;
  flex-direction: column;
}
.cw-line {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0;
  padding: 1px 0;
  border-radius: 2px;
  min-height: 1.45em;
}
.cw-ln {
  color: #6b7385;
  text-align: right;
  padding-right: 10px;
  user-select: none;
}
.cw-src {
  color: #e4e7ed;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
  padding-right: 6px;
  min-width: 0;
}
.cw-src .k {
  color: #c4b5fd;
} /* keyword */
.cw-src .s {
  color: #86efac;
} /* string */
.cw-src .n {
  color: #93c5fd;
} /* number / prop */
.cw-src .c {
  color: #6b7385;
} /* comment */
.cw-src .f {
  color: #67e8f9;
} /* function */
.cw-line.is-add {
  background: var(--cw-add);
}
.cw-line.is-add .cw-ln {
  color: #4ade80;
}
.cw-line.is-add .cw-src {
  color: var(--cw-add-text);
}
.cw-line.is-del {
  background: var(--cw-del);
}
.cw-line.is-del .cw-ln {
  color: #f87171;
}
.cw-line.is-del .cw-src {
  color: var(--cw-del-text);
  text-decoration: none;
}

/* typing caret */
.cw-caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: #f1f5f9;
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(241, 245, 249, 0.55);
  animation: cw-caret-blink 1.05s step-end infinite;
}
.cw-line.is-add .cw-caret {
  background: #bbf7d0;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.45);
}
.cw-line.is-del .cw-caret {
  background: #fecaca;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}
@keyframes cw-caret-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.code-window.is-typing .cw-caret {
  animation-duration: 0.9s;
}

.code-window-foot {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #242933;
  color: var(--cw-muted);
  font-size: 11px;
  flex-shrink: 0;
}
.code-window-foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
}
.code-window-foot .cw-build {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9aa3b2;
}
.code-window-foot .cw-build::before {
  content: "›";
  color: #6b7385;
  font-size: 13px;
}
.code-window-foot .cw-explore {
  color: #9aa3b2;
}
.code-window-foot .cw-prompt {
  flex: 1 1 auto;
  min-width: 0;
  color: #6b7385;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
}

.explore-card:hover .code-window,
.explore-card:focus-visible .code-window {
  outline: none;
}

/* ——— Credentials / compliance (Figma 11769:9469) ——— */
.credentials {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
}
.credentials .section-inner {
  /* inherit --sec-y from .section-inner; no extra vertical pad */
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}
.credentials-head {
  text-align: center;
  max-width: none;
  margin: 0 auto var(--sec-head-gap);
}
.credentials-head h2 {
  margin: 0 auto;
  max-width: 100%;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap; /* keep title on one line like Figma */
}
@media (max-width: 640px) {
  .credentials-head h2 {
    white-space: normal;
    max-width: 16em;
    text-wrap: balance;
  }
}
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}
.cred-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 36px 18px 32px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--border-default);
  box-shadow: none;
  text-align: center;
  min-height: 100%;
  /* scroll stagger reveal */
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--cred-i, 0) * 0.12s);
  will-change: opacity, transform;
}
.credentials.is-inview .cred-card,
.cred-card.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.cred-card:nth-child(1) {
  --cred-i: 0;
}
.cred-card:nth-child(2) {
  --cred-i: 1;
}
.cred-card:nth-child(3) {
  --cred-i: 2;
}
.cred-card:nth-child(4) {
  --cred-i: 3;
}
@media (prefers-reduced-motion: reduce) {
  .cred-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.cred-badge {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}
.cred-badge img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  object-position: center;
}
.cred-badge.is-rect {
  width: 100px;
  height: 88px;
}
.cred-badge.is-rect img {
  width: 96px;
  height: 84px;
}
.cred-copy {
  display: grid;
  gap: 8px; /* card title ↔ description */
  width: 100%;
}
.cred-copy h3 {
  margin: 0;
  font-size: clamp(15px, calc(13.92px + 0.3vw), 18px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.cred-copy p {
  margin: 0;
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1024px) {
  .credentials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .credentials-head {
    margin-bottom: 32px;
  }
}
@media (max-width: 640px) {
  .credentials-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
  .cred-card {
    padding: 28px 20px 24px;
    gap: 20px;
  }
}

/* CoverageBand：Top Global Carriers Coverage，居中 3+2 数据 + 空心点阵地球动画（coverage-globe.js） */
.coverage-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(460px, 60vh, 680px);
  padding: 72px 0;
  background: #010409;
  color: #fff;
  text-align: center;
}
.coverage-globe {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.coverage-band .section-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.coverage-head {
  margin-bottom: 8px;
}
.coverage-head h2 {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  background-image: linear-gradient(90deg, #ffffff 0%, #a8c6ff 55%, #4f8dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.coverage-data {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 44px 40px;
  max-width: 1200px;
  width: 100%;
  text-align: center;
}
.coverage-data li {
  grid-column: span 2;
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: center;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--cv-i, 0) * 0.12s);
}
.coverage-band.is-in .coverage-data li {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .coverage-data li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.coverage-data li:nth-child(4),
.coverage-data li:nth-child(5) {
  grid-column: span 3;
}
.coverage-data strong {
  font-size: clamp(34px, calc(25px + 2.4vw), 58px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
}
.coverage-data span {
  font-size: clamp(14px, calc(12.6px + 0.4vw), 17px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.64);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .coverage-band {
    min-height: 0;
    padding: 64px 0;
  }
  .coverage-data {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 18px;
    margin-top: 26px;
  }
  .coverage-data li,
  .coverage-data li:nth-child(4),
  .coverage-data li:nth-child(5) {
    grid-column: auto;
  }
  .coverage-data li:last-child {
    grid-column: 1 / -1;
  }

  .coverage-data span {
    white-space: normal;
    max-width: 100%;
    text-wrap: balance;
  }
}

/* Bottom CTA — 透视点阵波浪（图2：纯黑 + 白点） */
.bottom-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(420px, 56vh, 640px);
  display: flex;
  align-items: center;
  background: #000;
  color: #fff;
}
.bottom-cta-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.bottom-cta .section-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  width: 100%;
  padding-top: clamp(112px, 13vw, 160px);
  padding-bottom: clamp(112px, 13vw, 160px);
  border: 0;
  box-sizing: border-box;
}
.bottom-cta h2 {
  max-width: 16ch;
  color: #fff;
}
.bottom-cta p {
  color: rgba(255, 255, 255, 0.68);
  max-width: 42em;
  margin: var(--sec-title-desc) 0 0;
  font-size: clamp(13px, calc(11.92px + 0.3vw), 16px);
  line-height: 1.6;
}
/* CTA 按钮：主题橙 --brand-accent */
.bottom-cta .cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.bottom-cta .btn,
.bottom-cta .btn.cta-primary,
.bottom-cta .btn.cta-secondary,
.bottom-cta .btn.cta-ghost {
  border-radius: 999px;
}
.bottom-cta .btn.cta-primary {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
  box-shadow: none;
}
.bottom-cta .btn.cta-primary:hover {
  filter: brightness(1.1);
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  box-shadow: none;
}
.bottom-cta .btn.cta-secondary {
  background: transparent;
  border-color: rgba(255, 140, 0, 0.55);
  color: #ffb347;
  box-shadow: none;
}
.bottom-cta .btn.cta-secondary:hover {
  filter: brightness(1.12);
  background: rgba(255, 140, 0, 0.12);
  border-color: var(--brand-accent);
  color: #ffc978;
  box-shadow: none;
}
.bottom-cta .btn.cta-ghost {
  background: transparent;
  border-color: transparent;
  color: rgba(255, 200, 140, 0.72);
  box-shadow: none;
}
.bottom-cta .btn.cta-ghost:hover {
  filter: brightness(1.15);
  color: #ffd4a0;
  background: rgba(255, 140, 0, 0.08);
  transform: none;
  box-shadow: none;
}

/* Footer — Figma node 26:1988 */
.site-footer {
  position: relative;
  background: #000;
  color: #fff;
  /* 无扫光时只靠极淡描边；光靠 ::after */
  border-top: 1px solid rgba(255, 255, 255, 0.045);
  overflow: hidden;
  /* dock 叠在黑底上，避免页脚下白边 */
  padding-bottom: 96px;
}
/* 上边缘：无光时极淡细线；亮感只来自扫光 ::after */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 12%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 88%,
    transparent 100%
  );
  box-shadow: none;
}
.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  /* 压扁：很矮、略宽的扫光条，贴在描边上 */
  height: 6px;
  width: min(28vw, 280px);
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(192, 132, 252, 0) 5%,
    rgba(192, 132, 252, 0.45) 28%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(232, 121, 249, 0.5) 72%,
    rgba(192, 132, 252, 0) 95%,
    transparent 100%
  );
  filter: blur(2.5px);
  opacity: 0.95;
  mix-blend-mode: screen;
  transform: translate3d(-50%, 0, 0);
  animation: footer-edge-shine 5.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes footer-edge-shine {
  0% {
    transform: translate3d(-30%, 0, 0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(100vw + 20%), 0, 0);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer::after {
    animation: none;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    opacity: 0.7;
    width: min(24vw, 220px);
  }
}
.site-footer-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sec-y) var(--page-pad-x) 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.site-footer-main {
  display: flex;
  gap: 100px;
  align-items: flex-start;
}
.site-footer-brand {
  flex: 1 1 0;
  max-width: 480px;
  min-width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.site-footer-logo {
  display: inline-flex;
  align-items: center;
  height: 24px;
  line-height: 0;
}
.site-footer-logo img,
.site-footer-logo svg {
  display: block;
  height: 24px;
  width: auto;
}
.site-footer-who h3 {
  margin: 0 0 16px;
  font-size: clamp(15px, calc(13.92px + 0.3vw), 18px);
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: #fff;
}
.site-footer-who p {
  margin: 0;
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.7);
}
.site-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.site-footer-badges a {
  display: block;
  height: 44px;
  width: 154px;
  border-radius: 8px;
  overflow: hidden;
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease);
}
.site-footer-badges a:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.site-footer-badges img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.site-footer-social {
  display: flex;
  gap: 18px;
  align-items: center;
}
.site-footer-social a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  opacity: 0.9;
  transition: opacity 0.18s var(--ease);
}
.site-footer-social a:hover {
  opacity: 1;
}
.site-footer-social img {
  width: 24px;
  height: 24px;
  display: block;
}

.site-footer-nav {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-top: 56px;
}
.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.site-footer-col h3 {
  margin: 0;
  font-size: clamp(15px, calc(13.92px + 0.3vw), 18px);
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.03em;
  color: #fff;
}
.site-footer-col a {
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.18s var(--ease);
}
.site-footer-col a:hover {
  color: #fff;
}

.site-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0;
}
.site-footer-bottom-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer-bottom-left {
  display: flex;
  align-items: baseline;
  gap: 64px;
  flex-wrap: wrap;
}
.site-footer-lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(13px, calc(11.92px + 0.3vw), 16px);
  font-weight: 500;
  line-height: 24px;
  color: #fff;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.site-footer-lang img {
  width: 5px;
  height: 3px;
  display: block;
}
.site-footer-legal {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer-legal a {
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.03em;
}
.site-footer-legal a:hover {
  color: #fff;
}
.site-footer-copy {
  font-size: clamp(12px, calc(11.28px + 0.2vw), 14px);
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.03em;
  text-align: right;
}

@media (max-width: 1024px) {
  /* main 保持桌面的 brand 左 + nav 右（2026-08-31 Park：1024 footer 不该变上下堆叠）；
     nav 收成 2×2 放在 brand 右侧 */
  .site-footer-nav {
    padding-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .site-footer-bottom-left {
    gap: 24px;
  }
  .site-footer-copy {
    text-align: left;
  }
}
@media (max-width: 640px) {
  .site-footer-inner {
    padding: 48px var(--page-pad-x) 0;
    gap: 40px;
  }
  .site-footer-nav {
    /* 两列均分（2026-08-31 Park 标注图）：左列 Products/Partners 横排正常宽，
       右列 Company/Support 起点在行中线；1fr 1fr + width:100%（nav 的 flex:1 1 0
       在列方向 main 里宽度收缩到内容，必须显式撑满） */
    width: 100%;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
  .site-footer-bottom-left {
    gap: 16px;
  }
  .site-footer-legal {
    gap: 16px;
  }
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 99px;
}

@media (max-width: 1024px) {
  .nav-links .nav-group:last-child,
  .nav-divider {
    display: none;
  }
}

@media (max-width: 1024px) {
  .topbar-inner {
    padding: 12px var(--page-pad-x);
  }
  .nav-left {
    gap: 16px;
  }
  .nav-links {
    display: none;
  }
  .btn-split.shopify {
    display: none;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .hero {
    min-height: 0;
  }
  .hero-inner {
    min-height: 0;
    padding-top: 36px;
    padding-bottom: 32px;
  }
  .bottom-cta {
    min-height: clamp(380px, 52vh, 560px);
  }
  .feature-scroll {
    height: auto !important;
    min-height: 0 !important;
  }
  .feature-sticky {
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  .feature-layout {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    align-items: start;
    gap: 20px;
  }
  .feature-side,
  .feature-side-wrap {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .feature-panels-col {
    height: auto;
    overflow: visible;
  }
  .feature-panels {
    gap: 28px;
    transform: none !important;
  }
  .feature-panel {
    height: auto !important;
    min-height: 0;
  }
  .feature-panel .feature-visual {
    height: auto;
    min-height: 0;
  }
  .features-section .section-head {
    position: static;
    padding: 0 0 var(--sec-head-gap);
    background: none;
    flex-direction: column;
    align-items: stretch;
  }
  .features-section .feature-cta {
    margin-top: 4px;
    justify-content: flex-start;
  }
  .feature-list {
    gap: 16px;
    grid-auto-rows: auto;
    height: auto;
  }
  .feature.active {
    transform: none;
  }
  .feature-visual {
    min-height: 0;
    height: auto;
  }
  .feature-browser,
  .phone-wrap {
    min-height: 0;
  }
  .phone-wrap {
    grid-template-columns: 1fr;
  }
  .feature-browser {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
  .hero-inner {
    min-height: 0;
    padding-top: 56px;
    padding-bottom: 64px;
  }
  .bottom-cta .section-inner {
    grid-template-columns: 1fr;
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .ai-lab-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-height: calc(var(--ai-content-h) - 110px);
    height: auto;
  }
  .ai-lab-work {
    height: 320vh;
  }
  .ai-lab-sticky {
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    padding: 10px 0 20px;
  }
  .ai-lab-left {
    max-height: none;
  }
  .ai-lab-cta .btn {
    width: 100%;
    min-width: 0;
  }
  .ai-think {
    height: 100%;
    max-height: none;
  }
  .ai-stack-stage {
    height: 100%;
    width: 100%;
  }
  .browser {
    transform: none;
  }
  .visual {
    max-width: 500px;
    min-height: 420px;
    margin-left: 0;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 24px;
    padding-bottom: 16px;
  }
  .visual .browser {
    max-width: 500px;
  }
  .float-card-metric {
    left: -48px;
    top: 72px;
    width: 160px;
  }
  .float-card-video {
    right: -24px;
    width: 172px;
  }
  .float-card-rec {
    right: -28px;
    bottom: 16px;
    width: 200px;
  }
  .trust {
    gap: 22px;
    padding-top: 36px;
    padding-bottom: 40px;
  }
  .logos-track {
    gap: 28px;
  }
  .logos-row {
    gap: 16px 40px;
  }
  .impact-band {
    height: auto;
  }
  .impact-band-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 64px 0 100px;
  }
  .impact-stats {
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    max-width: none;
  }
  .impact-stat .metric {
  }
  .impact-curve {
    height: 34vh;
    opacity: 0.9;
  }
  .impact-band .section-inner {
    padding-bottom: 48px;
  }
  .explore-grid {
    grid-template-columns: 1fr;
  }
  .phone-wrap {
    grid-template-columns: 1fr;
  }
  .phone {
    margin: 0 auto;
  }
  .hero h1 {
    max-width: none;
  }
  .section-inner {
    padding-top: var(--sec-y);
    padding-bottom: var(--sec-y);
    padding-left: var(--page-pad-x);
    padding-right: var(--page-pad-x);
  }
}

@media (max-width: 768px) {
  .nav-actions .btn-text {
    display: none;
  }
  .btn-split.primary .main span.full {
    display: none;
  }
  .hero {
    min-height: 0;
  }
  .hero-inner {
    padding: 32px var(--page-pad-x) 36px;
    gap: 24px;
  }
  .product-dock {
    --dock-bottom: 24px;
  }
  .product-dock .tab {
    padding: 9px 14px;
    font-size: 13px;
  }
  .tp-tl-item:nth-child(n + 4) .tp-tl-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tp-head-title {
    font-size: 15px;
  }
  .logo-tile {
    height: 32px;
  }
  .logo-tile img {
    height: 16px;
  }
  .logo-tile img[alt="AliExpress"],
  .logo-tile img[alt="Baleaf"] {
    height: 18px;
  }
  .logo-tile img[alt="Cainiao"] {
    height: 22px;
  }
  .logo-tile img[alt="eufy"] {
    height: 22px;
    opacity: 0.88;
  }
  .logo-tile img[alt="SHARGE"],
  .logo-tile img[alt="totwoo"],
  .logo-tile img[alt="Vaporesso"],
  .logo-tile img[alt="GOELIA"] {
    height: 20px;
  }
  /* mobile: flatten to one 4-col grid → 3 rows of 4 */
  .logos-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 24px;
    width: 100%;
  }
  .logos-row {
    display: contents;
  }
  .float-card {
    position: static;
    width: auto;
    margin-bottom: 10px;
    animation: none;
  }
  .float-card-rec {
    margin-bottom: 12px;
  }
  .visual {
    display: block;
    min-height: auto;
  }
  .mock-rec-head span {
    display: none;
  }

  .impact-step {
    min-height: 48px;
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }
  .impact-step:last-child {
    border-bottom: 0;
  }
  .feature-visual {
    min-height: auto;
    padding: 14px;
    height: auto;
  }
  .phone-wrap {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-cta .btn-switch,
  .feature-cta .btn-demo {
    width: 100%;
    justify-content: center;
  }
  /* explore 卡的手机化布局只给 ≤640（原 ≤680，断点并档后曾把 768 的左右布局压成上下堆叠）；
     641-768 保持桌面左文右图 */
  @media (max-width: 640px) {
    .explore-card {
      grid-template-columns: 1fr;
      min-height: 0;
      height: auto;
      padding: 20px;
    }
    .code-window {
      min-height: 0;
      max-height: none;
      height: auto;
    }
    /* API terminal stays fixed height on mobile too */
    .explore-card-api .code-window {
      height: 268px;
      min-height: 268px;
      max-height: 268px;
    }
    .returns-ui {
      min-height: 0;
      max-height: none;
      height: auto;
      padding: 16px 10px 18px;
    }
    .returns-ui-photo {
      object-position: center;
    }
    .returns-ui-stack {
      width: 100%;
      max-width: none;
      height: 360px;
      min-height: 360px;
    }
    .returns-ui-card {
      top: 6px;
      left: 0;
      width: 86%;
      padding: 10px 12px 12px;
    }
    .returns-method {
      top: 178px;
      bottom: auto;
      right: 0;
      width: 82%;
      padding: 10px 12px 10px;
    }
    .explore-card-tracking .track-ui {
      min-height: 360px;
      height: 360px;
      overflow: hidden;
    }
    .track-ui-board {
      left: 6px;
      right: 6px;
      top: 10px;
    }
    .track-ui-video {
      width: 136px;
      right: 6px;
      top: 96px;
    }
    .track-ui-wismo {
      width: 144px;
      left: 6px;
      top: 168px;
    }
    .track-ui-ev:nth-child(n + 4) {
      display: none;
    }
  }
  .case-card {
    min-height: auto;
  }
  .case-art {
    min-height: 280px;
  }
  .bottom-cta .cta-row {
    width: 100%;
  }
  .bottom-cta .btn {
    flex: 1 1 auto;
  }
}

/* ========== Responsive (verified via screenshots) ==========
       1024: keep desktop structure, tighten only
       768: stack + simplify sticky/FX
       480: phone density
    */

/* —— ≤1024: tablet landscape — KEEP 2-col hero (was wrongly stacked) —— */
@media (max-width: 1024px) {
  :root {
    --sec-head-gap: 40px;
    --page-pad-x: 20px;
  }
  .hero-inner {
    /* still 2 columns — only rebalance */
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: 24px;
    padding-top: 36px;
    padding-bottom: 32px;
  }
  .visual {
    max-width: 560px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .hero-ogl {
    height: 560px;
  }
  .hero-ogl .ogl-hero {
    height: 260px;
    min-height: 260px;
  }
  .hero h1 {
    max-width: 14ch;
  }
  .visual {
    max-width: 460px;
    min-height: 520px;
    padding: 4px 16px 20px 12px;
  }
  .hero-ogl {
    height: 540px;
  }
  .hero-ogl .ogl-hero {
    height: 250px;
    min-height: 250px;
  }
  .float-card-metric {
    left: -40px;
  }
  .float-card-video {
    right: -20px;
  }
  .float-card-rec {
    right: -24px;
  }
  .float-card-metric {
    width: 150px;
  }
  .float-card-rec {
    width: 190px;
  }
  /* 1024 平板一行一个（2026-08-31 Park）：两列时文案列被压到每行两三个词；
     卡内部保持桌面左文右图布局，全宽自然舒展。≤768 本就单列，不受影响 */
  .explore-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .credentials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-lab-intro-track {
    height: 135vh;
  }
  .ai-lab-intro h2#ai-intro-title {
    max-width: 20em;
    margin-left: auto;
    margin-right: auto;
    white-space: normal;
  }
  .ai-lab-grid {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
  }
  .bottom-cta .section-inner {
    gap: 24px;
  }
  .product-dock .tab {
    padding: 9px 14px;
    font-size: 13px;
  }
}

/* —— ≤768: hero stacks when 2-col is too tight（原 ≤900，断点并档 2026-08-31） —— */
@media (max-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .hero h1 {
    max-width: none;
  }
  .visual {
    max-width: 480px;
    min-height: 0;
    margin: 0 auto;
    padding: 0 8px 16px;
  }
  .explore-grid {
    grid-template-columns: 1fr;
  }
  .ai-lab-grid {
    grid-template-columns: 1fr;
    max-height: none;
    height: auto;
  }
}

/* —— ≤768: mobile layout + kill heavy FX —— */
@media (max-width: 768px) {
  :root {
    --sec-y: clamp(56px, 9vw, 72px);
    --sec-head-gap: 28px;
    --sec-title-desc: 12px;
    --sec-cta-gap: 20px;
    --page-pad-x: 16px;
  }

  /* shader canvas 只在手机档（≤640）隐藏；768 平板吃完整桌面 FX（2026-08-31 Park） */
  .ai-intro-rail,
  .api-ascii {
    display: none !important;
  }

  /* trust-band 底边线已在基础规则全档去掉（2026-08-31 Park） */

  /* footer 从 ≤640 起才上下堆叠（2026-08-31 Park：768 也要左右布局——
     brand 左 + nav 2×2 右由 ≤1024 块覆盖） */
  @media (max-width: 640px) {
    .site-footer-main {
      flex-direction: column;
      gap: 48px;
    }
    .site-footer-brand {
      max-width: none;
      min-width: 0;
    }
  }

  /* AI intro: static, no sticky pin wall */
  .ai-lab-intro-track {
    height: auto !important;
    background: transparent !important;
  }
  .ai-lab-intro {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: calc(var(--topbar-h, 56px) + 32px) var(--page-pad-x) 40px;
  }
  .ai-lab-intro h2#ai-intro-title,
  .ai-lab-intro h2#ai-intro-title .ai-word,
  .ai-lab-intro h2 .ai-word {
    white-space: normal !important;
    /* 不再 font-size:inherit —— 会把标题压回 body 14px（Park：768 字太小），
       让桌面连续曲线 clamp(34px,26.08px+2.2vw,56px) 自然流下来 */
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-text-fill-color: unset;
  }
  .ai-lab-intro h2#ai-intro-title {
    line-height: 1.2 !important;
    background: none !important;
    color: #f5f3ff !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }
  .ai-lab-intro h2#ai-intro-title .ai-title-solid,
  .ai-lab-intro h2#ai-intro-title .ai-word {
    color: #f5f3ff !important;
    background: none !important;
    -webkit-text-fill-color: #f5f3ff !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ai-lab-intro .lead {
    max-width: none;
    color: rgba(237, 233, 254, 0.88);
  }
  .ai-pills {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
  }
  .ai-pill {
    width: 100%;
    justify-content: center;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .ai-lab-work {
    height: auto !important;
  }
  .ai-lab-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    padding: 20px 0 36px;
    overflow: visible;
  }
  .ai-lab-grid {
    grid-template-columns: 1fr;
    max-height: none !important;
    height: auto !important;
    gap: 16px;
  }
  .ai-stack-stage {
    height: auto;
    min-height: 280px;
  }
  .ai-think {
    max-height: none;
  }

  .impact-band {
    height: auto !important;
  }
  .impact-band-sticky {
    position: relative !important;
    height: auto !important;
    min-height: 0;
    padding: var(--sec-y) 0;
  }
  .impact-stats {
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
  }
  .impact-curve {
    display: none;
  }

  /* 禁倾斜保险保留 ≤768（平板触屏）；单列布局只给 ≤640——否则 768 的左右布局被压成堆叠 */
  .explore-card {
    transform: none !important;
    min-height: 0;
  }
  .explore-card.is-tilting,
  .explore-card:hover {
    transform: none !important;
  }
  /* 768 仍左右栏：井收一档，跟 tracking 一致 */
  .returns-ui-stack {
    height: 340px;
    min-height: 340px;
  }
  @media (max-width: 640px) {
    .explore-card {
      grid-template-columns: 1fr !important;
    }
    .explore-card-api .code-window {
      height: 240px;
      min-height: 240px;
      max-height: 240px;
    }
    .returns-ui-stack {
      height: 360px;
      min-height: 360px;
    }
  }

  .hero {
    min-height: 0;
  }
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 36px;
  }
  .hero h1 {
    max-width: none;
  }
  .float-card {
    display: none !important;
  }
  .visual {
    min-height: 0;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
  }
  .visual .browser {
    max-width: 100%;
  }
  .visual-asm {
    min-height: 0;
  }
  .visual .float-card {
    animation: none !important;
  }

  .credentials-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cred-card {
    padding: 22px 12px 18px;
    gap: 14px;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .bottom-cta {
    min-height: 0;
  }
  .bottom-cta .section-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: var(--sec-y);
    padding-bottom: var(--sec-y);
  }
  .bottom-cta .cta-row {
    flex-wrap: wrap;
    gap: 10px;
  }
  .bottom-cta h2 {
  }

  .product-dock {
    --dock-bottom: 24px;
  }
  .product-dock .tabs {
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-dock .tabs::-webkit-scrollbar {
    display: none;
  }
  .product-dock .tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Kill heavy / broken mid-animation states */
  .api-ascii-a,
  .api-ascii-b,
  .ai-stream-layer-a,
  .ai-stream-layer-b {
    animation: none !important;
  }
  .ai-reveal,
  .ai-lab-intro h2 .ai-word,
  .ai-lab-intro h2.is-words-in .ai-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .feature-panels {
    transform: none !important;
  }
}

/* —— ≤640 phone（原 ≤480，断点并档 2026-08-31） —— */
@media (max-width: 640px) {
  :root {
    --page-pad-x: 16px;
    --sec-y: 48px;
    --sec-head-gap: 24px;
  }
  .topbar-inner {
    padding: 10px var(--page-pad-x);
  }
  .logo img {
    width: 110px;
    height: auto;
  }
  .nav-actions .btn-text {
    display: none;
  }
  .credentials-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .impact-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .impact-stat .metric {
  }
  .hero .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .cta-row > * {
    width: 100%;
  }
  .hero .cta-row .btn,
  .hero .cta-row .btn-switch,
  .hero .cta-row .btn-demo {
    width: 100%;
    justify-content: center;
  }
  .bottom-cta .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .bottom-cta .cta-row .btn,
  .bottom-cta .cta-row .btn-switch,
  .bottom-cta .cta-row a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .section-head h2,
  .credentials-head h2 {
    white-space: normal;
    max-width: none;
  }
  .ai-pills {
    max-width: none;
  }
  .ai-pill {
    font-size: 13px;
  }
  .product-dock .tab {
    padding: 8px 12px;
    font-size: 12px;
  }
  /* shader canvas 手机档隐藏（768 平板保留 hero/bottom-cta 的 WebGL 背景，2026-08-31 Park） */
  .hero-undertones,
  .bottom-cta-shader {
    display: none !important;
  }

  /* BrandsSay 手机全宽卡（100cqw 相对 marquee 实宽）；768 平板不吃这条 */
  .brand-card {
    width: 100cqw;
  }

  /* CTA 按钮手机档别拉满整行（2026-08-31 Park） */
  .btn-switch {
    max-width: 320px;
  }
}

@media (hover: none), (pointer: coarse) {
  .explore-card,
  .explore-card.is-tilting,
  .explore-card:hover {
    transform: none !important;
  }
  .explore-card {
    cursor: auto;
  }
}

/* ========== ≤640 手机档（2026-08-29 Park 修正批次；断点 2026-08-31 并入 Tailwind 640 档） ========== */
@media (max-width: 640px) {
  /* ③ Explore 卡：按钮与正文之间的间距回来 */
  .explore-card .explore-link {
    margin-top: 20px;
  }

  /* ④ track-ui 插图：PC 版整体缩放——按本页桌面真实尺寸 354×435 冻结布局，
     transform 只缩渲染；负 margin-bottom 抵消缩放余高 */
  .explore-card-tracking .track-ui {
    width: 354px;
    height: 435px;
    min-height: 0;
    /* 768 档（原 ≤680）的 overflow:hidden 会把悬出板外的 WISMO / Brand video 裁掉（2026-08-31 Park） */
    overflow: visible;
    transform: scale(0.87) !important;
    transform-origin: 50% 0;
    margin-left: calc((100% - 354px) / 2);
    margin-bottom: -57px;
  }
  .explore-card-tracking .track-ui .track-ui-board {
    top: 14px;
  }
  .explore-card-tracking .track-ui .track-ui-video {
    width: 164px;
    right: -8px;
    top: 132px;
  }
  .explore-card-tracking .track-ui .track-ui-wismo {
    width: 168px;
    left: -8px;
    top: 208px;
  }
  .explore-card-tracking .track-ui .track-ui-ev:nth-child(n + 4) {
    display: block;
  }

  /* ⑤ returns-ui：跟踪 tracking 的手机档（照片井 + 卡位），不整体 scale */
  .explore-card-returns .returns-ui {
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 16px 10px 18px;
    transform: none !important;
    margin-left: 0;
    margin-bottom: 0;
  }
  .explore-card-returns .returns-ui-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 18px;
  }
  .explore-card-returns .returns-ui-stack {
    width: 100%;
    max-width: none;
    height: 360px;
    min-height: 360px;
  }
  .explore-card-returns .returns-ui-card {
    top: 6px;
    left: 0;
    width: 86%;
    padding: 10px 12px 12px;
  }
  .explore-card-returns .returns-method {
    top: 178px;
    right: 0;
    width: 82%;
    padding: 10px 12px 10px;
  }

  /* Scale the complete Returns illustration to the card width. */
  .explore-card-returns .returns-ui {
    --kv-s: min(0.78, 100cqw / 704px);
    container-type: inline-size;
    width: auto;
    height: auto;
    overflow: hidden;
    overflow: clip;
    padding: 0;
    transform: none !important;
    margin: 0;
  }
  .explore-card-returns .returns-ui-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: 540px;
    margin: 12px 0 20px;
    object-fit: cover;
    object-position: 68% 36%;
    border-radius: 22px;
  }

  /* ≤360 窄机再小一档（只缩 tracking 插图） */
  @media (max-width: 360px) {
    .explore-card-tracking .track-ui {
      transform: scale(0.7) !important;
      margin-bottom: -130px;
    }
  }
}