: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); }
    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 蓝底 + border beam + 内层 shader；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;
      /* 默认：左侧给 knob 留位 */
      padding: var(--sw-pad);
      padding-left: calc(var(--sw-pad) + var(--sw-knob) + var(--sw-gap));
      padding-right: calc(var(--sw-pad) + 14px);
      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;
      transition:
        padding var(--sw-dur) var(--sw-ease),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    }
    /* 内层 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 {
      /* !important：border-beam 会给子元素写 position:relative，需保住绝对定位滑动 */
      --sw-knob-w: var(--sw-knob);
      position: absolute !important;
      left: 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);
      /* left 滑行 + 回程宽度收圆 */
      transition:
        left var(--sw-dur) var(--sw-ease),
        width 0.22s ease;
      pointer-events: none;
      will-change: left, width;
    }
    .btn-switch-knob svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    /*
     * 白钮 morph：圆形 → 滑动中略成胶囊 → 到位恢复圆形
     * (JS 加 .is-knob-go / .is-knob-back 驱动，避免 leave 时动画被掐断)
     */
    @keyframes btn-switch-knob-go {
      0% {
        width: var(--sw-knob);
      }
      32% {
        /* 加速段：拉成一点胶囊 */
        width: calc(var(--sw-knob) + 15px);
      }
      68% {
        width: calc(var(--sw-knob) + 10px);
      }
      100% {
        width: var(--sw-knob);
      }
    }
    @keyframes btn-switch-knob-back {
      0% {
        width: var(--sw-knob);
      }
      32% {
        width: calc(var(--sw-knob) + 15px);
      }
      68% {
        width: calc(var(--sw-knob) + 10px);
      }
      100% {
        width: var(--sw-knob);
      }
    }
    .btn-switch-knob.is-knob-go {
      animation: btn-switch-knob-go var(--sw-dur) cubic-bezier(0.4, 0, 0.15, 1) forwards;
    }
    .btn-switch-knob.is-knob-back {
      animation: btn-switch-knob-back var(--sw-dur) cubic-bezier(0.4, 0, 0.15, 1) forwards;
    }
    @media (prefers-reduced-motion: reduce) {
      .btn-switch-knob.is-knob-go,
      .btn-switch-knob.is-knob-back {
        animation: none;
      }
    }
    .btn-switch-label {
      position: relative !important;
      z-index: 4 !important;
      display: block;
      width: 100%;
      text-align: center;
      white-space: nowrap;
      transition: none;
      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 {
      /* 右侧给 knob 留位，文案整体落在左侧空档 */
      color: #f5f8ff !important;
      padding-left: calc(var(--sw-pad) + 14px);
      padding-right: calc(var(--sw-pad) + var(--sw-knob) + var(--sw-gap));
      border-color: rgba(190, 215, 255, 0.42);
      filter: none !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 4px 14px rgba(0, 58, 155, 0.32) !important;
      transform: none !important;
    }
    .btn-switch:hover .btn-switch-shader,
    .btn-switch:focus-visible .btn-switch-shader {
      opacity: 1;
      filter: hue-rotate(6deg) brightness(1.14) saturate(1.2);
    }
    .btn-switch:hover .btn-switch-knob,
    .btn-switch:focus-visible .btn-switch-knob,
    .btn-switch-knob.is-knob-go {
      /* 滑到最右；文案已通过 padding 让到左侧，不重叠 */
      left: calc(100% - var(--sw-pad) - var(--sw-knob));
    }
    .btn-switch-knob.is-knob-back {
      left: var(--sw-pad);
    }
    .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 {
      border-color: rgba(190, 215, 255, 0.45);
      background: linear-gradient(180deg, #1256c4 0%, #0042ad 50%, #003088 100%);
    }
    .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,.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 28px 12px 48px;
      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;
      border-bottom: 1px solid var(--border-default);
      overflow: visible;
    }
    .trust {
      max-width: var(--max);
      margin: 0 auto;
      padding: var(--sec-y-tight) 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.05em; */
      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: 768px) {
      .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: clamp(28px, calc(23.68px + 1.2vw), 40px);
      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%;
      /* 容器：≤720 卡宽用 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);
      /* 全档统一上限（sync from API 2026-08-31 Park：桌面 340 / 手机 100cqw 全宽都钳到 320） */
      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; }
    }
    @media (max-width: 640px) {
      /* 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;
      }
      .brand-card {
        width: 100cqw;
      }
    }

    /* Explore — solid green / blue cards + mouse-inverse 3D tilt */
    .explore-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      perspective: 1600px;
      perspective-origin: 50% 45%;
    }
    .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;
      transform: none;
      transform-style: flat;
      /* 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;
    }
    .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;
      transform: none;
    }
    .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.32) inset,
        0 8px 24px rgba(124, 58, 237, 0.42);
    }

    /* Returns — solid #20B195 family; board tilt same as API (base .explore-card) */
    .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);
    }
    .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);
    }
    /* stage = reverse parallax layer (same pattern as .explore-api-visual) */
    .explore-card-returns .returns-ui {
      background: linear-gradient(
        165deg,
        #e6faf5 0%,
        #d4f3eb 55%,
        #c5ede4 100%
      );
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 0 10px 28px rgba(16, 100, 85, 0.14);
      overflow: visible;
      height: auto;
      min-height: 0;
      max-height: none;
      align-self: stretch;
      border-radius: var(--r-inner);
      --layer-x: 0px;
      --layer-y: 0px;
      transform: translate3d(var(--layer-x), var(--layer-y), 8px);
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
      transform-style: preserve-3d;
      color: #0f172a !important;
      -webkit-text-fill-color: #0f172a;
    }
    .explore-card-returns.is-tilting .returns-ui {
      transition: transform 0.08s linear;
    }
    /* 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 + reverse-parallax transform (like API code-window) */
    .returns-ui-card,
    .returns-method {
      --layer-x: 0px;
      --layer-y: 0px;
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
      transform-style: preserve-3d;
    }
    .explore-card-returns.is-tilting .returns-ui-card,
    .explore-card-returns.is-tilting .returns-method {
      transition: transform 0.08s linear;
    }

    /* 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.16;
      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.22;
    }
    /* copy above the matrix; visual stays z-index:auto so terminal glass can blur ASCII */
    .explore-card-api > .explore-card-copy {
      position: relative;
      z-index: 1;
    }
    .explore-card-api > .explore-api-visual {
      position: relative;
      z-index: auto;
      isolation: auto;
    }
    .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;
    }
    /* 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: translateY(0); }
      to   { transform: translateY(-50%); }
    }
    @keyframes api-ascii-drift-rev {
      from { transform: translateY(-50%); }
      to   { transform: translateY(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 */
      /* frosted glass — drop-shadow/transform would kill backdrop-filter */
      --cw-bg: rgba(18, 22, 32, 0.28);
      --cw-panel: rgba(38, 45, 60, 0.32);
      --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: rgba(18, 22, 32, 0.28);
      -webkit-backdrop-filter: blur(22px) saturate(1.45);
      backdrop-filter: blur(22px) saturate(1.45);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.08);
      /* 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;
      --layer-x: 0px;
      --layer-y: 0px;
      transform: none !important;
      filter: none;
      will-change: auto;
    }
    .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.1);
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 100%
      );
    }
    .explore-card-api .code-window-foot {
      background: rgba(16, 20, 30, 0.32);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .explore-card-api .api-carriers {
      transform: none;
    }
    .explore-card-api .explore-api-visual {
      transform: none;
    }
    .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;
      transform: none;
      transform-style: flat;
    }
    .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: reverse-arrow draws + flow on hover (like LordIcon play) —— */
    .explore-title-ico-returns .ico-r-path {
      stroke-dasharray: 36;
      stroke-dashoffset: 0;
    }
    .explore-title-ico-returns .ico-r-arrow {
      stroke-dasharray: 14;
      stroke-dashoffset: 0;
      transform-origin: 6.5px 9px;
    }
    .explore-title-ico-returns .ico-r-dot {
      opacity: 0;
      transform-origin: center;
    }
    .explore-card-returns:hover .explore-title-ico-returns .ico-r-path,
    .explore-card-returns.is-tilting .explore-title-ico-returns .ico-r-path {
      animation: ico-returns-path 1.35s cubic-bezier(0.45, 0, 0.2, 1) infinite;
    }
    .explore-card-returns:hover .explore-title-ico-returns .ico-r-arrow,
    .explore-card-returns.is-tilting .explore-title-ico-returns .ico-r-arrow {
      animation: ico-returns-arrow 1.35s cubic-bezier(0.45, 0, 0.2, 1) infinite;
    }
    .explore-card-returns:hover .explore-title-ico-returns .ico-r-dot,
    .explore-card-returns.is-tilting .explore-title-ico-returns .ico-r-dot {
      animation: ico-returns-dot 1.35s cubic-bezier(0.45, 0, 0.2, 1) infinite;
    }
    @keyframes ico-returns-path {
      0%   { stroke-dashoffset: 36; opacity: 0.35; }
      18%  { stroke-dashoffset: 0;  opacity: 1; }
      70%  { stroke-dashoffset: 0;  opacity: 1; }
      88%  { stroke-dashoffset: -8; opacity: 0.55; }
      100% { stroke-dashoffset: 36; opacity: 0.35; }
    }
    @keyframes ico-returns-arrow {
      0%   { stroke-dashoffset: 14; opacity: 0; transform: translateX(3px); }
      12%  { stroke-dashoffset: 14; opacity: 0; transform: translateX(3px); }
      32%  { stroke-dashoffset: 0;  opacity: 1; transform: translateX(0); }
      55%  { stroke-dashoffset: 0;  opacity: 1; transform: translateX(-1px); }
      72%  { stroke-dashoffset: 0;  opacity: 1; transform: translateX(0); }
      90%  { stroke-dashoffset: -4; opacity: 0.4; transform: translateX(-2px); }
      100% { stroke-dashoffset: 14; opacity: 0; transform: translateX(3px); }
    }
    @keyframes ico-returns-dot {
      0%, 28% { opacity: 0; transform: translate(12px, 14px) scale(0.4); }
      40%     { opacity: 0.95; transform: translate(12px, 14px) scale(1); }
      62%     { opacity: 0.7; transform: translate(8px, 14px) scale(0.85); }
      82%, 100% { opacity: 0; transform: translate(4px, 14px) scale(0.3); }
    }

    /* —— 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;
    }
    @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-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 — roomy stack + solid cards (no glass); 3D via board tilt */
    .returns-ui {
      position: relative;
      width: 100%;
      min-height: 0;
      height: auto;
      max-height: none;
      border-radius: var(--r-inner, 12px);
      overflow: visible;
      pointer-events: none;
      user-select: none;
      display: grid;
      place-items: center;
      padding: 18px 10px 36px;
      box-sizing: border-box;
      background: linear-gradient(165deg, #ecfdf8 0%, #d8f5ee 52%, #c8efe6 100%);
    }
    .returns-ui-blobs {
      display: none;
    }
    .returns-ui-stack {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 340px;
      height: 380px;
      min-height: 380px;
      transform-style: preserve-3d;
      animation: returns-ui-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes returns-ui-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    /* product card — solid white, reverse-parallax transform (no glass) */
    .returns-ui-card {
      position: absolute;
      top: 8px;
      left: 0;
      width: 84%;
      z-index: 1;
      border-radius: 18px;
      padding: 16px 14px 14px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: #0f172a;
      -webkit-text-fill-color: #0f172a;
      border: 1px solid rgba(255, 255, 255, 0.95);
      background: #fff;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 16px 40px -12px rgba(15, 23, 42, 0.16);
      transform: translate3d(var(--layer-x), var(--layer-y), 14px);
    }
    .returns-ui-card > * {
      position: relative;
      z-index: 1;
    }
    /* method card — solid white, offset stack, higher Z */
    .returns-method {
      position: absolute;
      top: 196px;
      left: 72px;
      width: 78%;
      z-index: 2;
      border-radius: 18px;
      padding: 14px 12px 12px;
      box-sizing: border-box;
      font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
      color: #0f172a;
      -webkit-text-fill-color: #0f172a;
      border: 1px solid rgba(255, 255, 255, 0.98);
      background: #fff;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 18px 44px -14px rgba(15, 23, 42, 0.18),
        0 8px 20px rgba(15, 118, 90, 0.08);
      transform: translate3d(var(--layer-x), var(--layer-y), 22px);
    }
    .returns-method > * {
      position: relative;
      z-index: 1;
    }
    .returns-method-frost {
      display: none !important;
    }
    .returns-ui-brand {
      margin: 0;
      text-align: center;
      font-family: var(--yq-font-inter), Inter, system-ui, sans-serif;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      color: #0f172a;
      -webkit-text-fill-color: #0f172a;
      line-height: 1.2;
    }
    .returns-ui-head {
      text-align: center;
      padding: 0 4px;
    }
    .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: 40px minmax(0, 1fr) 18px;
      gap: 10px;
      align-items: center;
      padding: 9px 10px;
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 14px;
      background: #f8fafc;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(15, 23, 42, 0.04);
      color: #0f172a;
      -webkit-text-fill-color: #0f172a;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }
    .returns-ui-item.is-active {
      background: #fff;
      border-color: rgba(32, 177, 149, 0.35);
      box-shadow:
        0 0 0 3px rgba(32, 177, 149, 0.1),
        0 4px 12px rgba(15, 23, 42, 0.06);
    }
    .returns-ui-thumb {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(15, 23, 42, 0.05);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      display: grid;
      place-items: center;
      overflow: hidden;
      flex-shrink: 0;
    }
    .returns-ui-thumb svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    .returns-ui-item[data-product="sneakers"] .returns-ui-thumb {
      color: #475569;
      background: linear-gradient(160deg, #f8fafc, #eef2f7);
    }
    .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: 8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(15, 23, 42, 0.06);
      background: rgba(255, 255, 255, 0.4);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #0f172a;
      -webkit-text-fill-color: #0f172a;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
    }
    .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-color: rgba(32, 177, 149, 0.45);
      background: linear-gradient(
        180deg,
        rgba(236, 253, 245, 0.72),
        rgba(209, 250, 229, 0.42)
      );
      box-shadow:
        0 0 0 3px rgba(32, 177, 149, 0.1),
        0 2px 8px rgba(15, 118, 90, 0.06);
    }
    .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: 14px;
      height: 14px;
      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: clamp(28px, calc(23.68px + 1.2vw), 40px);
      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;
      }
    }

    /* 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.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.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;
    }

    /* 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; }
    }

    /* —— ≤1024: topbar 挤不下完整 nav，收汉堡（rebalance） —— */
    @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; }
    }

    /* —— ≤768: 共享壳旧模块单列堆叠（returns 页面这些 DOM 不在，规则供同源站用） —— */
    @media (max-width: 768px) {
      .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-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;
      }
      .returns-ui-stack {
        height: 260px;
        min-height: 260px;
      }
      .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; }
      .explore-grid {
        grid-template-columns: 1fr 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 —— */
    @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;
      }

      .hero-undertones,
      .bottom-cta-shader,
      .ai-intro-rail,
      .api-ascii {
        display: none !important;
      }

      /* 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;
      }

      .explore-card {
        grid-template-columns: 1fr !important;
        transform: none !important;
        min-height: 0;
      }
      .explore-card.is-tilting,
      .explore-card:hover {
        transform: none !important;
      }
      .explore-card-api .code-window {
        height: 240px;
        min-height: 240px;
        max-height: 240px;
      }
      .returns-ui-stack {
        height: 240px;
        min-height: 240px;
      }

      .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;
        /* 纵向 flex 里 cta-row 被 ≤768 块拉成 100% 宽，按钮内容需显式居中（对齐 h2/lead） */
        justify-content: center;
      }
      .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 */
      .logos-track,
      .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 —— */
    @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: auto;
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
      }
      /* 手机 CTA 并排一行（Park 2026-09-01）：两颗各吃一半，不再全宽堆叠 */
      .bottom-cta .cta-row {
        flex-direction: row;
        align-items: stretch;
      }
      .bottom-cta .cta-row .btn,
      .bottom-cta .cta-row .btn-switch,
      .bottom-cta .cta-row a {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        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;
      }
      .site-footer-nav {
        grid-template-columns: 1fr 1fr;
        gap: 24px 16px;
      }
    }

    @media (hover: none), (pointer: coarse) {
      .explore-card,
      .explore-card.is-tilting,
      .explore-card:hover {
        transform: none !important;
      }
      .explore-card {
        cursor: auto;
      }
    }
  
/* =========================================================
   Footer responsive — synced from API project (2026-08-31 Park)
   分档语义同 API：>640 保持 brand 左 + nav 右（≤1024 nav 2×2）；
   ≤640 才上下堆叠 + 链接两列均分（右列起点在行中线）。
   放文件末尾，按源顺序覆盖上方 ≤560 块里的旧 footer 规则。
   ========================================================= */
@media (max-width: 1024px) {
  .site-footer-main {
    /* 桌面式左右布局保持（API Park：1024 不该变上下堆叠） */
    flex-direction: row;
    align-items: flex-start;
  }

  .site-footer-brand {
    max-width: 480px;
    min-width: min(320px, 100%);
  }

  .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-main {
    flex-direction: column;
    gap: 48px;
  }

  .site-footer-brand {
    max-width: none;
    min-width: 0;
  }

  .site-footer-inner {
    padding: 48px var(--page-pad-x) 0;
    gap: 40px;
  }

  .site-footer-nav {
    /* 两列均分：Products/Partners 横排贴左，Company/Support 起点在行中线；
       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;
  }
}