* { box-sizing: border-box; margin: 0; padding: 0; }
    html {
      background: #000;
      overflow-x: clip;
    }
    body {
      background: #000;
      color: #fff;
      font-family: var(--font);
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
      /* 不能设 overflow-y，否则 sticky 叠纸失效；横向用 html clip */
    }
    /* 后续纸页全屏：不为顶栏预留黑条（Scale 同款） */
    :root {
      --chrome-h: 0px;
      --sheet-h: 100vh;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
    img, video { display: block; max-width: 100%; }
    ul { list-style: none; }

    /* ========== Banner / Nav ========== */
    .banner {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      height: 44px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
      background: rgba(10,10,10,.92); border-bottom: 1px solid rgba(255,255,255,.1);
      font-size: 13px; color: #eaeaea; padding: 0 16px; text-align: center;
      backdrop-filter: blur(10px);
    }
    .banner a { border-bottom: 1px solid rgba(255,255,255,.4); white-space: nowrap; }

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 var(--pad);
      background: transparent;
      color: #fff;
      transition: background .3s, color .3s;
      /* 纯悬浮合成层：只动 transform/opacity，不参与文档流 */
      transform: translate3d(0, 0, 0);
      transform-origin: 50% 0;
      backface-visibility: hidden;
      contain: layout style;
      isolation: isolate;
      pointer-events: auto;
    }
    .nav.is-hiding {
      will-change: transform, opacity;
    }
    .nav.is-hidden {
      pointer-events: none;
    }
    .nav.is-light {
      background: rgba(255,255,255,.94);
      color: #000;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .nav-left, .nav-right { display: flex; align-items: center; gap: 24px; }
    .logo { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; letter-spacing: -.03em; text-transform: lowercase; }
    .logo-mark {
      position: relative;
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border: none;
      background: transparent;
      overflow: visible;
      color: inherit;
      /* 占位保留，飞行时仅隐身，汇聚目标不变 */
      opacity: 1;
      transition: opacity .18s ease;
    }
    .logo-mark.is-ball-flight {
      opacity: 0;
    }
    .logo-mark-dot {
      position: absolute;
      border-radius: 50%;
      background: currentColor;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    /* 九球飞行叠层（fixed，跟随滚动进度） */
    .ball-flight {
      position: fixed;
      inset: 0;
      z-index: 210;
      pointer-events: none;
      overflow: visible;
      opacity: 0;
      visibility: hidden;
    }
    .ball-flight.is-on {
      opacity: 1;
      visibility: visible;
    }
    .ball-flight-dot {
      position: fixed;
      left: 0;
      top: 0;
      border-radius: 50%;
      background: #fff;
      transform: translate(-50%, -50%);
      will-change: transform, width, height, background-color;
      box-shadow: 0 0 0 0 transparent;
    }
    .nav-links { display: flex; gap: 20px; }
    .nav-links a { font-size: 14px; opacity: .75; }
    .login {
      font-size: 14px;
      height: 36px; padding: 0 14px; display: inline-flex; align-items: center;
      border: 1px solid rgba(255,255,255,.35); border-radius: 8px;
    }
    .nav.is-light .login { border-color: rgba(0,0,0,.2); }
    .nav-cta {
      display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
      border-radius: 8px; background: #e8e8e8; color: #000; font-size: 14px;
      transition: transform .2s;
    }
    .nav.is-light .nav-cta { background: #000; color: #fff; }
    .nav-cta:hover { transform: scale(.96); }
    .menu-btn { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; }
    .nav.is-light .menu-btn { border-color: rgba(0,0,0,.15); }
    .menu-btn span { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; }
    .menu-btn span::before, .menu-btn span::after {
      content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor;
    }
    .menu-btn span::before { top: -5px; } .menu-btn span::after { top: 5px; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14px;
      transition: transform .2s;
    }
    .btn:hover { transform: scale(.96); }
    .btn-dark { background: #000; color: #fff; }
    .btn-light { background: #fff; color: #000; }
    .btn-ghost { border: 1px solid rgba(255,255,255,.3); color: #fff; }
    .link-line {
      display: inline-flex; align-items: center; gap: 8px; width: fit-content;
      font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 2px; opacity: .85;
    }
    .link-line:hover { opacity: 1; }
    .link-line svg { width: 14px; height: 14px; }

    .anim { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
    .anim.in { opacity: 1; transform: none; }
    .anim-d1 { transition-delay: .08s; }
    .anim-d2 { transition-delay: .16s; }

    .eyebrow {
      font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
      text-transform: uppercase; margin-bottom: 14px; opacity: .55;
    }

    /* =========================================================
       叠纸核心：同级 sticky 面板 + 递增 z-index
       下一张从下方滑上来盖住上一张
       ========================================================= */
    .stack {
      position: relative;
      isolation: isolate;
      /* 纸页收窄缝隙露底：始终为「上一页」色；Quote 前为 Hero 深色舞台 */
      background: var(--stack-underlay, #000000);
    }

    /* 所有「纸」：外层垫「上一页」色；.sheet-scale 收窄时两侧露垫色（图3） */
    .sheet {
      position: sticky;
      top: 0;
      height: 100vh;
      width: 100%;
      background: var(--paper-behind, #eaeaea) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: visible;
    }
    .sheet-scale {
      position: relative;
      height: 100%;
      width: 100%;
      margin: 0 auto;
      transform-origin: center top;
      border-radius: 28px 28px 0 0;
      overflow: hidden;
      box-sizing: border-box;
      box-shadow: 0 -8px 40px rgba(0, 0, 0, calc(0.28 * var(--paper-shadow, 1)));
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      --cover: 0;
      --paper-inset: 0%;
      --paper-shadow: 1;
    }
    /* 被下一页盖住时用叠加变暗，代替滚动期 brightness filter */
    .sheet-scale::after {
      content: "";
      position: absolute;
      inset: 0;
      background: #000;
      opacity: calc(var(--cover, 0) * 0.28);
      pointer-events: none;
      z-index: 6;
    }
    /* Industry 入场与其它纸同构 scaleX；settle 后 JS 去 scale 以利 orbit */
    .sheet-quote .sheet-scale { background: var(--gray-90); color: #000; }
    .sheet-industry .sheet-scale { background: #e4eee8; color: #000; }
    .sheet-app .sheet-scale { background: #fff; color: #000; }
    .sheet-data .sheet-scale { background: var(--gray-10); color: #fff; }
    .sheet-cases .sheet-scale { background: var(--gray-90); color: #000; }
    .sheet-bench .sheet-scale { background: #fff; color: #000; }
    .sheet-news .sheet-scale { background: var(--gray-90); color: #000; }
    .sheet-cta .sheet-scale {
      background: var(--tan); color: #000;
      border-radius: 28px 28px 0 0;
    }
    .sheet-fill {
      height: 100%;
      width: 100%;
      padding: clamp(40px, 7vh, 80px) var(--pad);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* ---- Hero ---- */
    .hero-track {
      position: relative;
      z-index: 1;
      height: 400vh;
      background: #fff;
    }
    .hero-sheet {
      position: sticky;
      top: 0;
      height: 100vh;
      /* visible：避免 overflow:hidden 压扁 3D 叠层 */
      overflow: visible;
      background: #ffffff;
    }
    .hero-stage {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      /* 四角由各层 matrix3d 自带透视 */
      perspective: none;
      transform-style: flat;
    }

    .hero-card {
      position: absolute;
      inset: 0;
      z-index: 3;
      overflow: visible;
      background: transparent;
      transform-style: preserve-3d;
      pointer-events: none;
    }
    .hero-stack-3d {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform-origin: 0 0;
      pointer-events: none;
    }
    .hero-tilt {
      position: absolute;
      inset: 0;
      transform-origin: 50% 50%;
      transform-style: preserve-3d;
      pointer-events: none;
      transition: none;
      perspective: 800px;
    }

    /* 勿 will-change / mix-blend / 低 opacity，否则叠层会被压成单层 */
    .hero-glass {
      position: absolute;
      inset: 0;
      z-index: auto;
      border-radius: 0;
      pointer-events: none;
      transform-style: flat;
      opacity: 0;
      visibility: hidden;
      box-sizing: border-box;
      background: transparent;
      --glass-a: 1;
    }
    .hero-glass--back {
      /* 白卡后右上玻璃：透底+白描边；黑的是舞台底，不是这块实心 */
      background: rgba(255, 255, 255, 0.07);
      border: 2px solid rgba(255, 255, 255, calc(0.48 * var(--glass-a)));
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
    }
    .hero-glass-ticks {
      position: absolute;
      inset: 0;
      color: rgba(255, 255, 255, 0.35);
      font-size: 9px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      letter-spacing: 0.04em;
      pointer-events: none;
    }
    .hero-glass-ticks i {
      position: absolute;
      font-style: normal;
      opacity: 0.85;
    }
    .hero-glass-ticks i:nth-child(1) { top: 10%; left: 4%; }
    .hero-glass-ticks i:nth-child(2) { top: 12%; right: 5%; }
    .hero-glass-ticks i:nth-child(3) { bottom: 14%; left: 5%; }
    .hero-glass-ticks i:nth-child(4) { bottom: 11%; right: 6%; }
    .hero-glass-grid {
      position: absolute;
      inset: 14% 12%;
      background-image:
        linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity: 0.3;
      mask-image: linear-gradient(135deg, transparent 10%, #000 40%, #000 70%, transparent 95%);
      -webkit-mask-image: linear-gradient(135deg, transparent 10%, #000 40%, #000 70%, transparent 95%);
    }
    .hero-glass-dots,
    .hero-glass-topo { display: none !important; }

    /* 三层前玻璃：在白卡前面、偏左下；从左下往右上渐淡；无花纹 */
    .hero-glass--f1,
    .hero-glass--f2,
    .hero-glass--f3 {
      background: transparent;
      overflow: visible;
      box-shadow: none;
      mix-blend-mode: normal;
      color: transparent;
      pointer-events: none;
    }
    /* f3 最前(最左下)最实 → f1 靠近白卡更淡 */
    .hero-glass--f3 {
      border: 2px solid rgba(255, 255, 255, calc(0.95 * var(--glass-a)));
    }
    .hero-glass--f2 {
      border: 2px solid rgba(255, 255, 255, calc(0.58 * var(--glass-a)));
    }
    .hero-glass--f1 {
      border: 2px solid rgba(255, 255, 255, calc(0.30 * var(--glass-a)));
    }

    .hero-card-face {
      position: absolute;
      inset: 0;
      z-index: auto;
      pointer-events: auto;
      border-radius: 0;
      overflow: hidden;
      background: #fff;
      border: 1px solid transparent;
      transform-style: flat;
      box-shadow: none;
    }
    /* 侧屏：允许白卡背景被滚动淡化（由 JS 写 inline） */
    .hero-card-face.is-side {
      /* 不再强制实心白 */
    }
    .hero-card-face.is-side .hero-card-inner {
      background: transparent;
    }
    .hero-card-face.is-side .logo-split {
      background: transparent;
    }
    .hero-card-face.is-side .logo-canvas-right,
    .hero-card-face.is-side .logo-canvas-right #canvas-container {
      background: transparent !important;
    }
    .hero-card-face.is-side .logo-text-left {
      background: rgba(16, 20, 26, 0.92);
    }
    .hero-card-face.is-side .logo-text-left,
    .hero-card-face.is-side .logo-canvas-right {
      height: 100%;
      align-self: stretch;
    }
    .hero-card-face.is-side .logo-emergence {
      color: rgba(255, 255, 255, 0.14);
    }
    .hero-card-face.is-side .logo-desc {
      color: rgba(255, 255, 255, 0.62);
    }
    .hero-card-face.is-side .logo-desc-2 {
      color: rgba(255, 255, 255, 0.45);
    }
    .hero-card-inner {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: #fff;
      border-radius: inherit;
      transition: background-color .15s linear;
    }

    .scroll-explore {
      position: absolute; right: 28px; bottom: 24px; z-index: 6;
      display: inline-flex; align-items: center; gap: 10px;
      color: rgba(0,0,0,.55); font-size: 13px; pointer-events: none;
    }
    .scroll-explore.is-light { color: rgba(255,255,255,.85); }
    .scroll-explore .box {
      width: 28px; height: 28px; border: 1px solid currentColor;
      border-radius: 4px; display: grid; place-items: center;
    }
    .scroll-explore .box svg { width: 14px; height: 14px; }

    .hero-copy {
      position: absolute; left: 50%; bottom: 7%;
      transform: translateX(-50%);
      width: min(560px, calc(100% - 48px));
      text-align: center; color: #fff; z-index: 6;
      opacity: 0; pointer-events: none;
    }
    .hero-copy h2 {
      font-size: clamp(26px, 3.8vw, 42px);
      letter-spacing: -.035em; line-height: 1.15; font-weight: 400;
      margin-bottom: 12px; color: #f0eef5;
    }
    .hero-copy p {
      color: rgba(255,255,255,.55);
      font-size: clamp(14px, 1.25vw, 16px); line-height: 1.45;
    }

    .hero-apps,
    .hero-data {
      position: absolute;
      top: 0; bottom: 0;
      z-index: 5;
      display: flex; flex-direction: column; justify-content: center;
      color: #fff;
      opacity: 0;
      pointer-events: none;
    }
    /* Scale：左文 pad≈9vw、宽≈21–28%、垂直与右板中心对齐（勿顶偏） */
    .hero-apps {
      left: 0;
      width: min(28vw, 360px);
      padding: 72px 16px 72px clamp(48px, 9vw, 110px);
      box-sizing: border-box;
    }
    .hero-data {
      right: 0;
      width: min(28vw, 360px);
      padding: 72px clamp(48px, 9vw, 110px) 72px 16px;
      box-sizing: border-box;
    }
    .hero-apps .eyebrow,
    .hero-data .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      color: rgba(255,255,255,.55); margin-bottom: 18px;
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .hero-apps h3,
    .hero-data h3 {
      font-size: clamp(26px, 3.6vw, 48px);
      letter-spacing: -.04em; line-height: 1.08; font-weight: 400;
      margin-bottom: 16px; max-width: 12ch;
    }
    .hero-apps .desc,
    .hero-data .desc {
      color: rgba(255,255,255,.62); font-size: 15px; max-width: 32ch; margin-bottom: 22px;
      line-height: 1.5;
    }
    .hero-apps .cta,
    .hero-data .cta {
      display: inline-flex; align-items: center; width: fit-content;
      height: 42px; padding: 0 16px;
      border: 1px solid rgba(255,255,255,.35); border-radius: 6px; font-size: 14px;
    }
    .hero-data .cta {
      background: rgba(34, 80, 64, .85);
      border-color: rgba(255,255,255,.2);
    }

    /* Logo：随主屏 scale，整页一起变小，文字不被裁切 */
    .logo-split {
      display: flex;
      width: 100%;
      height: 100%;
      background: #fff;
    }
    .logo-text-left {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 clamp(28px, 5vw, 72px);
      box-sizing: border-box;
      min-width: 0;
      transition: opacity .2s linear;
    }
    .logo-text-inner {
      max-width: 480px;
      min-width: 0;
    }
    .logo-emergence {
      font-size: clamp(32px, 5.8vw, 96px);
      font-weight: 300;
      letter-spacing: -0.04em;
      line-height: 1;
      color: rgba(0, 0, 0, 0.08);
      margin-bottom: clamp(16px, 3vh, 32px);
      font-family: var(--font);
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .logo-desc {
      font-size: clamp(14px, 1.4vw, 24px);
      line-height: 1.55;
      color: #333;
      margin-bottom: 12px;
      font-weight: 300;
    }
    .logo-desc-2 {
      font-size: clamp(14px, 1.4vw, 24px);
      line-height: 1.55;
      color: #000;
      font-weight: 400;
    }
    .logo-canvas-right {
      width: 50%;
      height: 100%;
      position: relative;
      min-width: 0;
    }
    .logo-canvas-right #canvas-container {
      width: 100%;
      height: 100%;
    }

    @media (max-width: 980px) {
      .hero-track { height: 400vh; }
      .hero-apps,
      .hero-data {
        width: 100%;
        max-width: none;
        padding: 100px 24px 42vh;
        justify-content: flex-start;
      }
      .hero-data {
        padding-right: 24px;
        padding-left: 24px;
      }
      .logo-split {
        flex-direction: column;
      }
      .logo-text-left,
      .logo-canvas-right {
        width: 100%;
        height: 50%;
      }
      .logo-text-left {
        padding: 80px 32px 0;
      }
    }

    /* ---- 后续各纸：z-index 递增；底色已在 .sheet-scale ---- */
    /*
      Quote 上提叠入 Hero 轨尾（略晚于汇聚中段）：
      减小叠入使入场稍晚；升起行程由 JS 对 Quote 加长 expand。
      九球 fixed z=210 仍可与纸页并行汇入顶栏。
    */
    .sheet-quote {
      z-index: 2;
      margin-top: -140vh;
    }
    .sheet-industry { z-index: 3; }
    .sheet-app { z-index: 4; }
    .sheet-data { z-index: 5; }
    .sheet-cases { z-index: 6; }
    .sheet-bench { z-index: 7; }
    .sheet-news { z-index: 8; }
    .sheet-cta { z-index: 9; }

    .quote-layout {
      max-width: 1400px; margin: 0 auto; width: 100%;
      display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 12px;
      height: min(68vh, 560px);
    }
    .quote-video { border-radius: 18px; overflow: hidden; background: #111; }
    .quote-video video { width: 100%; height: 100%; object-fit: cover; }
    .quote-panel {
      background: var(--evergreen); border-radius: 16px; padding: clamp(24px, 4vw, 48px);
      display: flex; flex-direction: column; justify-content: center; gap: 16px;
    }
    .quote-panel .big {
      font-size: clamp(26px, 4vw, 44px); letter-spacing: -.04em; line-height: 1.12; font-weight: 400;
    }
    .quote-panel .meta { color: rgba(255,255,255,.65); font-size: 15px; max-width: 40ch; }

    /* Industry：椭圆环绕（与纸壳缩放解耦） */
    /* Industry：轨道加长，保证下一纸入场时本纸仍 sticky 垫底（露底=本页色） */
    .industry-track {
      position: relative;
      z-index: 3;
      height: 170vh;
      background: #e4eee8;
    }
    .industry-sheet-inner {
      height: 100%;
      display: grid;
      place-items: center;
      text-align: center;
      position: relative;
      padding: var(--pad);
      overflow: hidden;
      background: #e4eee8;
      /* 透视挂内层，与纸壳 scale 解耦 */
      perspective: 900px;
      transform: translateZ(0);
    }
    .industry-orbit {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      transform-style: preserve-3d;
      opacity: 0;
      transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .industry-orbit.is-live {
      opacity: 1;
    }
    .industry-orbit-card {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(118px, 12vw);
      aspect-ratio: 1;
      margin: 0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 14px 32px rgba(0,0,0,.2);
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(255,255,255,.35);
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }
    .industry-orbit.is-live .industry-orbit-card {
      will-change: transform;
    }
    .industry-content { position: relative; z-index: 1; }
    .industry-content .eyebrow {
      color: var(--gray-30);
      margin-bottom: 12px;
      font-size: 13px;
    }
    .industry-content h2 {
      font-size: clamp(34px, 6.2vw, 72px);
      letter-spacing: -.045em;
      line-height: 1.05;
      font-weight: 400;
      min-height: 1.15em;
    }
    .industry-content p {
      margin-top: 14px;
      color: var(--gray-30);
      font-size: 14px;
    }

    .split {
      max-width: 1180px; margin: 0 auto; width: 100%;
      display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 5vw, 72px);
    }
    .split h2 {
      font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -.04em; line-height: 1.06; font-weight: 400;
      margin-bottom: 14px;
    }
    .split .lead { font-size: 16px; opacity: .6; max-width: 34ch; }
    .side { display: grid; gap: 16px; }
    .side p { font-size: 16px; opacity: .72; max-width: 44ch; }
    .stat { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
    .stat .num { font-size: clamp(52px, 8vw, 88px); letter-spacing: -.05em; line-height: 1; }
    .stat .num span { color: var(--accent); }
    .stat p { margin-top: 10px; opacity: .55; max-width: 30ch; font-size: 15px; }

    .cases-head {
      max-width: 1180px; margin: 0 auto 22px; width: 100%;
      display: flex; justify-content: space-between; align-items: end; gap: 16px;
    }
    .cases-head h2 {
      font-size: clamp(28px, 3.8vw, 42px); letter-spacing: -.04em; font-weight: 400; max-width: 12ch;
    }
    .carousel-wrap { width: 100vw; margin-left: calc(50% - 50vw); padding: 0 var(--pad); }
    .carousel {
      display: flex; gap: 14px; overflow-x: auto; cursor: grab;
      scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    .carousel::-webkit-scrollbar { display: none; }
    .carousel.dragging { cursor: grabbing; scroll-snap-type: none; }
    .case-card {
      flex: 0 0 auto; width: min(360px, 80vw); scroll-snap-align: start;
      background: #fff; border-radius: 14px; overflow: hidden;
      border: 1px solid rgba(0,0,0,.06);
      transition: transform .25s var(--ease);
    }
    .case-card:hover { transform: translateY(-4px); }
    .case-card .thumb-wrap { overflow: hidden; }
    .case-card .thumb {
      aspect-ratio: 16/10; background: #ddd center/cover no-repeat;
      transition: transform .45s var(--ease);
    }
    .case-card:hover .thumb { transform: scale(1.05); }
    .case-card .body { padding: 14px 16px 18px; display: grid; gap: 8px; }
    .case-card .client {
      font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
      text-transform: uppercase; color: var(--gray-30);
    }
    .case-card h3 { font-size: 15px; line-height: 1.3; font-weight: 400; letter-spacing: -.02em; }

    .bench-grid {
      max-width: 1180px; margin: 28px auto 0; width: 100%;
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    .bench-card {
      background: #f4f4f4; border-radius: 14px; padding: 24px 20px; min-height: 230px;
      display: flex; flex-direction: column; gap: 12px;
      transition: transform .25s, background .25s;
    }
    .bench-card:hover { transform: translateY(-3px); background: #ececec; }
    .bench-card h3 { font-size: 20px; letter-spacing: -.03em; line-height: 1.2; font-weight: 400; }
    .bench-card p { font-size: 14px; opacity: .6; flex: 1; }
    .bench-card a { font-size: 13px; opacity: .7; }

    .news-grid {
      max-width: 1180px; margin: 24px auto 0; width: 100%;
      display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px;
    }
    .news-card {
      background: #fff; border-radius: 14px; overflow: hidden;
      border: 1px solid rgba(0,0,0,.05);
      transition: transform .25s;
      display: flex; flex-direction: column;
    }
    .news-card:hover { transform: translateY(-3px); }
    .news-card.featured { grid-row: span 2; }
    .news-card .media-wrap { overflow: hidden; }
    .news-card .media {
      aspect-ratio: 16/10; background: #ddd center/cover no-repeat;
      transition: transform .45s;
    }
    .news-card.featured .media { aspect-ratio: 4/3; }
    .news-card:hover .media { transform: scale(1.04); }
    .news-card .meta { padding: 14px 16px 18px; display: grid; gap: 8px; }
    .news-card .tag {
      font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
      text-transform: uppercase; color: var(--gray-30);
    }
    .news-card h3 { font-size: 16px; letter-spacing: -.02em; line-height: 1.25; font-weight: 400; }

    .cta-layout {
      max-width: 1180px; margin: 0 auto; width: 100%;
      display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: end;
    }
    .cta-layout h2 {
      font-size: clamp(34px, 5vw, 60px); letter-spacing: -.045em; line-height: 1.05;
      font-weight: 400; max-width: 11ch; margin-bottom: 14px;
    }
    .cta-layout p { max-width: 34ch; margin-bottom: 22px; opacity: .75; }
    .cta-video {
      border-radius: 18px; overflow: hidden; aspect-ratio: 16/10; background: #111;
      box-shadow: 0 18px 48px rgba(0,0,0,.22);
    }
    .cta-video video { width: 100%; height: 100%; object-fit: cover; }

    .footer {
      position: relative; z-index: 10;
      background: #000; color: #fff;
      padding: 72px var(--pad) 28px;
      border-top-left-radius: 20px; border-top-right-radius: 20px;
    }
    .footer-top {
      max-width: 1180px; margin: 0 auto 36px;
      display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 24px;
    }
    .footer-brand p { color: var(--gray-60); font-size: 14px; max-width: 26ch; margin-top: 12px; }
    .footer h4 {
      font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
      text-transform: uppercase; color: var(--gray-60); margin-bottom: 12px;
    }
    .footer ul { display: grid; gap: 9px; }
    .footer a { font-size: 14px; color: #c7c7c7; }
    .footer a:hover { color: #fff; }
    .footer-bottom {
      max-width: 1180px; margin: 0 auto; padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.1);
      display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
      color: var(--gray-30); font-size: 12px;
    }
    .footer-bottom a { color: var(--gray-60); margin-left: 12px; }

    @media (max-width: 980px) {
      .nav-links, .login { display: none; }
      .menu-btn { display: grid; }
      .hero-split, .quote-layout, .split, .cta-layout { grid-template-columns: 1fr; }
      .quote-layout { height: auto; }
      .quote-video { min-height: 200px; }
      .bench-grid, .news-grid, .footer-top { grid-template-columns: 1fr; }
      .news-card.featured { grid-row: auto; }
      .hero-track { height: 400vh; }
      .industry-track { height: 170vh; }
    }

    #canvas-container {
      width: 100%;
      height: 100%;
    }
    #ui-container {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .hint {
      font-size: 13px;
      color: #888888;
      letter-spacing: 1px;
    }
    .btn {
      padding: 10px 24px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      background-color: #000000;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
      transition: all 0.3s ease;
    }
    .btn:hover {
      transform: scale(1.05);
      background-color: #222222;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    }

