:root {
      --bg: #050816;
      --ink: #F7FAFF;
      --muted: rgba(247,250,255,.68);
      --soft: rgba(247,250,255,.40);
      --line: rgba(255,255,255,.14);
      --white: #ffffff;
      --accent: #00E5FF;
      --accent2: #7C3DFF;
      --accent3: #00FF88;
      --panel: rgba(8, 14, 32, .62);
      --radius: clamp(18px, 2vw, 32px);
      --safe-x: clamp(22px, 4.8vw, 86px);
      --safe-y: clamp(18px, 3vw, 38px);
      --fade: 500ms;
      --scroll-vh: 3416;
    }

    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      min-height: 100%;
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    body { height: calc(var(--scroll-vh) * 1vh); }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }

    /* 原 Scrolltelling 动画结构：三段视频同时渲染 + opacity 切换 + main 视频滚动驱动 */
    .stage {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      background: radial-gradient(circle at 50% 35%, #14224A 0%, #050816 62%, #02040C 100%);
      isolation: isolate;
      transform: translateZ(0);
    }
    .video-layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--fade) ease;
      will-change: opacity;
      background: var(--bg);
    }
    .video-layer.is-active { opacity: 1; }
    .video-layer video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center center;
      transform: translateZ(0) scale(1.0001);
      backface-visibility: hidden;
      filter: none;
    }

    /* 只做文字可读性，不压坏视频清晰度 */
        .stage::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(5,8,22,.90) 0%, rgba(5,8,22,.68) 27%, rgba(5,8,22,.20) 56%, rgba(5,8,22,.44) 100%),
        radial-gradient(circle at 16% 28%, rgba(0,229,255,.24), transparent 28%),
        radial-gradient(circle at 72% 18%, rgba(124,61,255,.22), transparent 30%),
        radial-gradient(circle at 82% 78%, rgba(0,255,136,.14), transparent 26%),
        linear-gradient(180deg, rgba(5,8,22,.72) 0%, transparent 38%, rgba(5,8,22,.76) 100%);
    }
        .stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(0,229,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,61,255,.045) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: radial-gradient(circle at 50% 36%, black 0%, transparent 78%);
      opacity: .36;
    }

    .topbar {
      position: fixed;
      top: var(--safe-y);
      left: var(--safe-x);
      right: var(--safe-x);
      z-index: 30;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 28px;
      pointer-events: none;
    }
    .brand {
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      gap: 13px;
      width: fit-content;
      font-size: clamp(24px, 2.25vw, 40px);
      line-height: .95;
      font-weight: 950;
      letter-spacing: -.07em;
    }
    .brand::before {
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: linear-gradient(135deg, #00E5FF, #7C3DFF);
      box-shadow: 0 0 0 10px rgba(30,255,164,.10), 0 0 34px rgba(30,255,164,.55);
    }
    .nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(18px, 2.6vw, 38px);
      pointer-events: auto;
      padding: 8px 16px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      background: rgba(8,14,32,.38);
      backdrop-filter: blur(18px);
    }
    .nav a, .auth a {
      font-size: clamp(13px, .92vw, 16px);
      font-weight: 850;
      letter-spacing: -.02em;
      color: rgba(247,250,255,.78);
      transition: opacity .2s ease, color .2s ease, transform .2s ease;
      white-space: nowrap;
    }
    .nav a:hover, .auth a:hover { color: #008e62; transform: translateY(-1px); }
    .auth {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 16px;
      pointer-events: auto;
    }
    .login {
      min-width: 116px;
      height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #00E5FF, #7C3DFF);
      color: var(--white) !important;
      box-shadow: 0 20px 50px rgba(0,0,0,.12);
    }
    .menu-btn {
      display: none;
      pointer-events: auto;
      justify-self: end;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(5,5,5,.12);
      background: rgba(255,255,255,.50);
      backdrop-filter: blur(14px);
      font-weight: 900;
      cursor: pointer;
    }
    .mobile-menu {
      display: none;
      position: fixed;
      top: 76px;
      left: var(--safe-x);
      right: var(--safe-x);
      z-index: 45;
      padding: 12px;
      border-radius: 24px;
      background: rgba(244,244,238,.88);
      border: 1px solid rgba(5,5,5,.10);
      backdrop-filter: blur(22px);
      box-shadow: 0 24px 80px rgba(0,0,0,.14);
    }
    .mobile-menu.open { display: block; }
    .mobile-menu a {
      display: block;
      padding: 14px 14px;
      border-radius: 16px;
      font-weight: 850;
    }
    .mobile-menu a:hover { background: rgba(30,255,164,.16); }

    /* 架构师排版参考图语言：左大标题 / 右编号与说明 / 底部标签 */
    .scene {
      position: fixed;
      inset: 0;
      z-index: 16;
      opacity: 0;
      pointer-events: none;
      transition: opacity 420ms ease;
      will-change: opacity;
    }
    .scene.is-visible {
      opacity: 1;
      pointer-events: auto;
    }
    .hero-left {
      position: absolute;
      left: var(--safe-x);
      top: clamp(132px, 16vh, 172px);
      width: min(700px, 43vw);
      opacity: 0;
      transform: translateY(18px);
      filter: blur(5px);
      transition: opacity 520ms ease, transform 640ms cubic-bezier(.2,.7,.2,1), filter 520ms ease;
    }
    .scene.is-visible .hero-left {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
    .kicker {
      margin: 0 0 18px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(247,250,255,.58);
      font-size: 12px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .kicker::before {
      content: "";
      width: 34px;
      height: 2px;
      background: linear-gradient(135deg, #00E5FF, #7C3DFF);
      border-radius: 999px;
      box-shadow: 0 0 18px rgba(30,255,164,.45);
    }
    .title {
      margin: 0;
      font-size: clamp(58px, 7.2vw, 134px);
      line-height: .84;
      font-weight: 1000;
      letter-spacing: -.095em;
      color: var(--ink);
      white-space: pre-line;
      text-wrap: balance;
      max-width: 760px;
    }
    .subtitle {
      margin: 24px 0 0;
      max-width: 620px;
      font-size: clamp(18px, 1.55vw, 28px);
      line-height: 1.28;
      font-weight: 950;
      letter-spacing: -.05em;
      color: var(--ink);
    }
    .desc-cn {
      margin: 20px 0 0;
      max-width: 570px;
      font-size: clamp(14px, .95vw, 17px);
      line-height: 1.78;
      font-weight: 720;
      color: var(--muted);
    }
    .cta-row {
      margin-top: 30px;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity .36s ease, transform .36s ease;
    }
    .scene.has-cta .cta-row { opacity: 1; transform: translateY(0); }
    .cta {
      min-width: 240px;
      height: 58px;
      padding: 0 9px 0 25px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-radius: 999px;
      background: linear-gradient(135deg, #00E5FF, #7C3DFF);
      color: #ffffff;
      font-size: 15px;
      font-weight: 950;
      box-shadow: 0 20px 60px rgba(0,229,255,.18);
      transition: transform .24s ease, background .24s ease;
    }
    .cta:hover { transform: translateY(-2px); background: #0e5; color: #00140d; }
    .cta::after {
      content: "→";
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255,255,255,.96);
      color: #02040C;
      font-size: 28px;
      line-height: 1;
    }
    .right-stack {
      position: absolute;
      right: var(--safe-x);
      top: clamp(132px, 16vh, 172px);
      width: min(430px, 29vw);
      opacity: 0;
      transform: translateY(18px);
      filter: blur(5px);
      transition: opacity 520ms ease 60ms, transform 640ms cubic-bezier(.2,.7,.2,1) 60ms, filter 520ms ease 60ms;
    }
    .scene.is-visible .right-stack {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
    .node-num {
      margin: 0;
      text-align: right;
      font-size: clamp(72px, 8.2vw, 150px);
      line-height: .8;
      font-weight: 1000;
      letter-spacing: -.07em;
      color: var(--ink);
    }
    .node-note {
      width: min(390px, 100%);
      margin: 22px 0 0 auto;
      text-align: right;
      font-size: clamp(13px, .92vw, 16px);
      line-height: 1.65;
      font-weight: 760;
      color: rgba(5,5,5,.58);
    }
    .node-badge {
      margin-top: 24px;
      margin-left: auto;
      width: fit-content;
      max-width: 100%;
      padding: 12px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(8,14,32,.50);
      backdrop-filter: blur(16px);
      font-size: 12px;
      font-weight: 950;
      color: #00E5FF;
      text-align: right;
    }
    .tagbar {
      position: fixed;
      left: var(--safe-x);
      right: var(--safe-x);
      bottom: clamp(28px, 4vh, 42px);
      z-index: 22;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      align-items: center;
      gap: clamp(14px, 2vw, 32px);
      pointer-events: none;
    }
    .tag {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      color: rgba(5,5,5,.84);
      font-size: clamp(14px, 1.15vw, 21px);
      font-weight: 950;
      letter-spacing: -.055em;
      white-space: nowrap;
      opacity: .95;
    }
    .tag .ico {
      width: 20px;
      height: 20px;
      border: 3px solid currentColor;
      border-radius: 50%;
      flex: none;
    }
    .progress-wrap {
      position: fixed;
      z-index: 24;
      left: var(--safe-x);
      right: var(--safe-x);
      bottom: 18px;
      height: 4px;
      background: rgba(255,255,255,.14);
      border-radius: 999px;
      overflow: hidden;
      pointer-events: none;
    }
    .progress-fill {
      display: block;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #00E5FF, #7C3DFF, #00FF88);
      border-radius: inherit;
    }

    /* 科技风配色覆盖：深蓝黑底、赛博蓝紫、高级玻璃感 */
    .brand, .title, .subtitle, .node-num {
      color: #F7FAFF !important;
      text-shadow: 0 18px 70px rgba(0,0,0,.35);
    }
    .desc-cn, .node-note {
      color: rgba(247,250,255,.72) !important;
    }
    .kicker {
      color: rgba(0,229,255,.82) !important;
    }
    .kicker::before {
      background: linear-gradient(90deg, #00E5FF, #7C3DFF) !important;
      box-shadow: 0 0 22px rgba(0,229,255,.62) !important;
    }
    .brand::before,
    .tag .ico {
      border-color: #00E5FF !important;
      background: rgba(0,229,255,.10) !important;
      box-shadow: 0 0 26px rgba(0,229,255,.45) !important;
    }
    .tag {
      color: rgba(247,250,255,.86) !important;
      text-shadow: 0 12px 44px rgba(0,0,0,.32);
    }
    .nav a, .auth a {
      color: rgba(247,250,255,.78) !important;
    }
    .nav a:hover, .auth a:hover {
      color: #00E5FF !important;
    }
    .nav {
      background: rgba(8,14,32,.46) !important;
      border-color: rgba(255,255,255,.12) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 20px 70px rgba(0,0,0,.18);
    }
    .login, .cta {
      background: linear-gradient(135deg, #00E5FF 0%, #7C3DFF 100%) !important;
      color: #fff !important;
      box-shadow: 0 24px 72px rgba(0,229,255,.20), 0 18px 60px rgba(124,61,255,.18) !important;
    }
    .login:hover, .cta:hover {
      background: linear-gradient(135deg, #00FF88 0%, #00E5FF 100%) !important;
      color: #021015 !important;
    }
    .node-badge {
      color: #00E5FF !important;
      background: rgba(8,14,32,.54) !important;
      border-color: rgba(0,229,255,.22) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    }
    .mobile-menu {
      background: rgba(8,14,32,.88) !important;
      border-color: rgba(255,255,255,.13) !important;
      color: #F7FAFF !important;
    }
    .mobile-menu a:hover {
      background: rgba(0,229,255,.12) !important;
      color: #00E5FF !important;
    }


    /* =========================================================
       V3.2 惊艳清晰版：Logo 替换 / 提速滚动 / 去雾化 / 清晰视频
       ========================================================= */
    :root {
      --scroll-vh: 1651 !important;
    }
    .stage {
      background: #020617 !important;
    }
    .video-layer video {
      opacity: 1 !important;
      filter: contrast(1.08) saturate(1.08) brightness(1.02) !important;
      image-rendering: auto !important;
      transform: translateZ(0) scale(1.00001) !important;
    }
    .stage::before {
      background:
        linear-gradient(90deg,
          rgba(2,6,23,.86) 0%,
          rgba(2,6,23,.58) 24%,
          rgba(2,6,23,.16) 48%,
          rgba(2,6,23,.06) 68%,
          rgba(2,6,23,.24) 100%),
        radial-gradient(circle at 16% 26%, rgba(0,229,255,.18), transparent 24%),
        radial-gradient(circle at 78% 16%, rgba(124,61,255,.16), transparent 28%),
        linear-gradient(180deg, rgba(2,6,23,.38) 0%, transparent 38%, rgba(2,6,23,.46) 100%) !important;
    }
    .stage::after {
      opacity: .18 !important;
      background-size: 54px 54px !important;
    }
    .brand {
      gap: 14px !important;
      letter-spacing: -.045em !important;
    }
    .brand::before {
      display: none !important;
    }
    .brand-logo {
      width: clamp(44px, 3.4vw, 56px);
      height: clamp(44px, 3.4vw, 56px);
      object-fit: contain;
      object-position: center center;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      display: block;
      filter: drop-shadow(0 10px 24px rgba(0,229,255,.22));
    }
    .brand-name {
      display: grid;
      gap: 2px;
      line-height: .96;
    }
    .brand-name strong {
      font-size: clamp(20px, 1.5vw, 28px);
      color: #F7FAFF;
      font-weight: 1000;
      letter-spacing: -.055em;
    }
    .brand-name small {
      font-size: 10px;
      letter-spacing: .22em;
      color: rgba(0,229,255,.85);
      font-weight: 950;
    }
    .hero-logo-lockup {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 10px 14px 10px 10px;
      margin: 0 0 20px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 22px;
      background: rgba(8,14,32,.42);
      backdrop-filter: blur(18px);
      box-shadow: 0 22px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .hero-logo-lockup img {
      width: 46px;
      height: 46px;
      object-fit: contain;
      border-radius: 14px;
      background: rgba(255,255,255,.92);
    }
    .hero-logo-lockup span {
      display: grid;
      gap: 2px;
    }
    .hero-logo-lockup b {
      color: #fff;
      font-size: 16px;
      line-height: 1;
      letter-spacing: -.04em;
    }
    .hero-logo-lockup small {
      color: rgba(0,229,255,.88);
      font-size: 10px;
      letter-spacing: .18em;
      font-weight: 950;
    }
    .title {
      text-shadow: 0 24px 76px rgba(0,0,0,.50), 0 0 34px rgba(0,229,255,.12) !important;
    }
    .subtitle {
      color: rgba(247,250,255,.94) !important;
    }
    .desc-cn {
      color: rgba(247,250,255,.76) !important;
    }
    .nav {
      background: rgba(2,6,23,.42) !important;
      backdrop-filter: blur(22px) saturate(1.2) !important;
    }
    .tag {
      color: rgba(247,250,255,.78) !important;
    }
    .progress-fill {
      box-shadow: 0 0 22px rgba(0,229,255,.65);
    }

    /* V3.3 性能优先：虚拟滚动，避免浏览器原生长页面滚动 + 视频 seek 双重卡顿 */
    html, body {
      height: 100% !important;
      overflow: hidden !important;
    }
    #scrollSpace {
      display: none !important;
    }
    .progress-wrap {
      height: 5px !important;
      background: rgba(255,255,255,.18) !important;
    }
    .performance-tip {
      position: fixed;
      z-index: 26;
      left: var(--safe-x);
      bottom: 34px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(2,6,23,.46);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(14px);
      color: rgba(247,250,255,.62);
      font-size: 12px;
      font-weight: 800;
      pointer-events: none;
    }
    @media (max-width: 760px) {
      .performance-tip { display: none; }
    }

    @media (max-width: 760px) {
      .stage::before {
        background:
          linear-gradient(180deg, rgba(2,6,23,.62) 0%, rgba(2,6,23,.34) 44%, rgba(2,6,23,.60) 100%) !important;
      }
      .brand-logo {
        width: 42px;
        height: 42px;
      }
      .brand-name small {
        display: none;
      }
      .hero-logo-lockup {
        display: none;
      }
    }

    @media (max-width: 1120px) {
      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .nav, .auth { display: none; }
      .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
      .hero-left {
        width: min(660px, calc(100vw - var(--safe-x)*2));
        top: 112px;
      }
      .right-stack {
        display: none;
      }
      .tagbar {
        grid-template-columns: repeat(3, 1fr);
        bottom: 32px;
      }
    }
    @media (max-width: 760px) {
      :root {
        --safe-x: 20px;
        --safe-y: 18px;
      }
      .stage::before {
        background:
          linear-gradient(90deg, rgba(244,244,238,.88) 0%, rgba(244,244,238,.50) 100%),
          linear-gradient(180deg, rgba(244,244,238,.64) 0%, transparent 42%, rgba(244,244,238,.72) 100%);
      }
      .brand { font-size: 24px; }
      .hero-left {
        top: 96px;
      }
      .title {
        font-size: clamp(44px, 14vw, 72px);
        max-width: 96vw;
      }
      .subtitle { font-size: 18px; max-width: 90vw; }
      .desc-cn { font-size: 14px; max-width: 88vw; }
      .tagbar {
        display: none;
      }
    }


    /* 导航栏优化：圆角玻璃框内导航，参考用户截图 */
    .topbar {
      grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr) !important;
      gap: 28px !important;
    }
    .nav {
      height: 46px !important;
      min-width: clamp(520px, 38vw, 720px) !important;
      padding: 0 22px !important;
      gap: 0 !important;
      justify-content: space-between !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,255,255,.20) !important;
      background: linear-gradient(180deg, rgba(14,22,48,.68), rgba(8,14,32,.38)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 18px 56px rgba(0,0,0,.22) !important;
      backdrop-filter: blur(22px) saturate(1.25) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
    }
    .nav a {
      height: 100% !important;
      min-width: 86px !important;
      padding: 0 12px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 999px !important;
      color: rgba(247,250,255,.86) !important;
      text-shadow: 0 8px 26px rgba(0,0,0,.28) !important;
    }
    .nav a:hover {
      background: rgba(0,229,255,.10) !important;
      color: #00E5FF !important;
    }
    .mobile-menu a[href="#home"][data-jump="0.66"] {
      display: none !important;
    }

  
    /* 标题间距优化：避免中文字挤压、上下两行糊在一起 */
    .title {
      font-size: clamp(42px, 5vw, 82px) !important;
      line-height: 1.06 !important;
      letter-spacing: -0.01em !important;
      max-width: 760px !important;
      word-break: keep-all;
      overflow-wrap: normal;
    }
    .subtitle {
      font-size: clamp(18px, 1.28vw, 24px) !important;
      letter-spacing: 0 !important;
    }
    @media (max-width: 760px) {
      .title {
        font-size: clamp(38px, 10vw, 56px) !important;
        line-height: 1.08 !important;
        max-width: 88vw !important;
      }
      .subtitle { font-size: 17px !important; max-width: 82vw !important; }
    }

    /* V1.2 intro：与后续节点统一标题尺度，降低过渡突兀感 */
    .intro-scene .hero-left {
      top: clamp(164px, 20vh, 206px) !important;
      width: min(700px, 43vw) !important;
    }
    .intro-scene .title {
      font-size: clamp(42px, 5vw, 82px) !important;
      line-height: 1.06 !important;
      letter-spacing: -0.01em !important;
      max-width: 760px !important;
      text-wrap: balance;
    }
    .intro-scene .subtitle {
      margin-top: 24px !important;
      max-width: 420px !important;
      font-size: clamp(18px, 1.28vw, 24px) !important;
      letter-spacing: 0 !important;
    }
    .intro-scene .desc-cn {
      max-width: 500px !important;
      line-height: 1.72 !important;
    }
    @media (max-width: 1120px) {
      .intro-scene .hero-left {
        width: min(540px, calc(100vw - var(--safe-x)*2)) !important;
      }
    }
    @media (max-width: 760px) {
      .intro-scene .hero-left {
        top: 126px !important;
        width: calc(100vw - var(--safe-x)*2) !important;
      }
      .intro-scene .title {
        font-size: clamp(38px, 10vw, 56px) !important;
        line-height: 1.08 !important;
        max-width: 88vw !important;
      }
      .intro-scene .subtitle {
        font-size: 17px !important;
        max-width: 82vw !important;
      }
      .intro-scene .desc-cn {
        max-width: 86vw !important;
      }
    }


    /* 最终修正：主导航框左右留白完全一致，菜单项等距分布 */
    .nav {
      width: clamp(680px, 46vw, 880px) !important;
      min-width: unset !important;
      height: 46px !important;
      padding-left: 28px !important;
      padding-right: 28px !important;
      box-sizing: border-box !important;
      display: grid !important;
      grid-template-columns: repeat(6, minmax(82px, 1fr)) !important;
      column-gap: clamp(6px, .7vw, 14px) !important;
      justify-content: center !important;
      align-items: center !important;
    }
    .nav a {
      min-width: 0 !important;
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      text-align: center !important;
      justify-content: center !important;
    }
    .nav a.mall-entry {
      min-width: 96px !important;
    }
    @media (max-width: 1180px) {
      .nav {
        width: clamp(560px, 58vw, 740px) !important;
        grid-template-columns: repeat(6, minmax(72px, 1fr)) !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
      }
      .nav a {
        font-size: clamp(12px, .9vw, 14px) !important;
      }
    }

/* Shared primary navigation for every static page. */
:root {
  --site-nav-height: 92px;
}

body.site-page {
  padding-top: var(--site-nav-height);
}

.site-topbar {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(72px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 0 clamp(28px, 4.8vw, 70px);
  pointer-events: none;
}

.site-brand,
.site-nav,
.site-menu-btn,
.site-mobile-menu {
  pointer-events: auto;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: #f7fbff;
  text-decoration: none;
}

.site-brand-logo {
  width: 49px;
  height: 49px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0, 229, 255, .18));
}

.site-brand-name {
  display: grid;
  gap: 2px;
  line-height: 1;
}

.site-brand-name strong {
  font-size: clamp(18px, 1.45vw, 26px);
  font-weight: 950;
  letter-spacing: -.06em;
}

.site-brand-name small {
  color: #00e5ff;
  font-size: clamp(10px, .8vw, 13px);
  font-weight: 850;
  letter-spacing: .03em;
  white-space: nowrap;
}

.site-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(82px, 1fr));
  align-items: center;
  justify-content: center;
  column-gap: clamp(6px, .7vw, 14px);
  width: clamp(680px, 46vw, 880px);
  height: 46px;
  padding: 0 28px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(8,14,32,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 56px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
}

.site-nav a,
.site-mobile-menu a {
  color: rgba(247,250,255,.86);
  text-decoration: none;
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 850;
  letter-spacing: -.02em;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  text-shadow: 0 8px 26px rgba(0,0,0,.28);
}

.site-nav a:hover,
.site-nav a.is-current,
.site-mobile-menu a:hover,
.site-mobile-menu a.is-current {
  color: #00e5ff;
  background: rgba(0,229,255,.10);
}

.site-menu-btn {
  justify-self: end;
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #f7fbff;
  background: rgba(8,14,32,.58);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  cursor: pointer;
}

.site-mobile-menu {
  position: fixed;
  top: 82px;
  left: 18px;
  right: 18px;
  z-index: 99;
  display: none;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(8,14,32,.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 22px 62px rgba(0,0,0,.35);
}

.site-mobile-menu.is-open {
  display: grid;
}

.site-mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 12px;
}

.module-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #f7fbff !important;
  text-decoration: none !important;
}

.module-brand-logo {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 24px rgba(0, 229, 255, .16)) !important;
}

.module-brand-text {
  display: grid !important;
  gap: 3px !important;
  line-height: 1 !important;
}

.module-brand-text strong {
  color: #f7fbff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
}

.module-brand-text small {
  color: #00e5ff !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  .site-topbar {
    grid-template-columns: minmax(168px, 1fr) auto 48px;
    padding: 0 24px;
  }

  .site-nav {
    width: clamp(540px, 58vw, 740px);
    grid-template-columns: repeat(6, minmax(68px, 1fr));
    padding: 0 20px;
  }
}

@media (max-width: 860px) {
  :root {
    --site-nav-height: 82px;
  }

  .site-topbar {
    top: 16px;
    grid-template-columns: minmax(168px, 1fr) 42px;
    gap: 12px;
    padding: 0 18px;
  }

  .site-nav {
    display: none;
  }

  .site-menu-btn {
    display: inline-grid;
    place-items: center;
  }

  .site-brand-logo {
    width: 44px;
    height: 44px;
  }

  .site-brand-name strong {
    font-size: 18px;
  }

  .site-brand-name small {
    font-size: 10px;
  }
}

@media (max-width: 420px) {
  .site-brand-name strong {
    font-size: 16px;
  }

  .site-brand-name small {
    font-size: 9px;
  }
}