/* ============ 设计令牌 ============ */
    :root {
      --night: #0B0F19;
      --ink: #F2EFE9;
      --muted: #98A0B0;
      --amber: #E9A05C;
      --dusk: #6E9BE8;
      --hairline: rgba(255, 255, 255, 0.07);
      --surface: #0F1420;
    }

    /* ============ 基础 ============ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      background-color: var(--night);
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background-color: var(--night);
      color: var(--ink);
      font-family: "Segoe UI Variable Display", "Segoe UI", "PingFang SC",
                   "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      font-size: 15px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    img {
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* ============ 布局骨架 ============ */
    .wrap {
      width: 100%;
      max-width: 1152px;
      margin-inline: auto;
      padding-inline: 24px;
    }

    /* ============ 导航 ============ */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid transparent;
      transition: background-color 0.3s ease, border-color 0.3s ease,
                  box-shadow 0.3s ease, backdrop-filter 0.3s ease;
    }

    .site-header.is-scrolled {
      background-color: rgba(11, 15, 25, 0.74);
      border-bottom-color: var(--hairline);
      box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 14px 36px -24px rgba(0, 0, 0, 0.95);
      backdrop-filter: blur(14px) saturate(1.15);
      -webkit-backdrop-filter: blur(14px) saturate(1.15);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-block: 16px;
    }

    .brand {
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .brand__latin {
      display: none;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: #6B7385;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1.05rem;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.01em;
      white-space: nowrap;
      color: #F7F3EC;
      background: linear-gradient(180deg, rgba(233, 160, 92, 0.16), rgba(233, 160, 92, 0.05));
      border: 1px solid rgba(233, 160, 92, 0.26);
      box-shadow: 0 0 0 0 rgba(233, 160, 92, 0);
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }

    .pill:hover {
      border-color: rgba(233, 160, 92, 0.55);
      background: linear-gradient(180deg, rgba(233, 160, 92, 0.24), rgba(233, 160, 92, 0.08));
      box-shadow: 0 0 26px -4px rgba(233, 160, 92, 0.5);
    }

    /* ============ 首屏 ============ */
    .hero {
      position: relative;
      overflow: hidden;
    }

    /* 纯径向渐变，不用 filter: blur()——低端 GPU 下 blur 会留下可见矩形边 */
    .glow {
      position: absolute;
      border-radius: 9999px;
      pointer-events: none;
    }

    .glow--amber {
      top: -20rem;
      left: 50%;
      width: 64rem;
      height: 46rem;
      margin-left: -36rem;
      background: radial-gradient(closest-side,
        rgba(233, 160, 92, 0.20),
        rgba(233, 160, 92, 0.07) 52%,
        transparent 76%);
    }

    .glow--dusk {
      top: 4rem;
      right: -18rem;
      width: 48rem;
      height: 38rem;
      background: radial-gradient(closest-side,
        rgba(110, 155, 232, 0.16),
        rgba(110, 155, 232, 0.05) 55%,
        transparent 78%);
    }

    .hero__inner {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 74vh;
      max-width: 1152px;
      margin-inline: auto;
      padding: 48px 24px 64px;
      text-align: center;
    }

    .eyebrow {
      margin: 0;
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: #7C8598;
    }

    .eyebrow span {
      margin-inline: 10px;
      color: #3A4152;
    }

    h1 {
      margin: 28px 0 0;
      font-size: clamp(2.15rem, 8.5vw, 4.6rem);
      font-weight: 600;
      line-height: 1.14;
      letter-spacing: -0.02em;
      text-wrap: balance;
    }

    .lede {
      max-width: 36rem;
      margin: 24px auto 0;
      font-size: 15px;
      line-height: 1.75;
      color: var(--muted);
    }

    .lede__line {
      display: block;
      margin-top: 4px;
    }

    .cta-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      margin-top: 40px;
    }

    .cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.95rem 2rem;
      border-radius: 9999px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: #1A1208;
      background: linear-gradient(180deg, #F0B173, #DE8F44);
      box-shadow: 0 10px 34px -12px rgba(233, 160, 92, 0.65),
                  inset 0 1px 0 rgba(255, 255, 255, 0.38);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  box-shadow 0.3s ease, filter 0.3s ease;
    }

    .cta::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: radial-gradient(140px 70px at 50% -10%, rgba(255, 226, 190, 0.55), transparent 72%);
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .cta:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
      box-shadow: 0 18px 48px -14px rgba(233, 160, 92, 0.8),
                  inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    .cta:hover::after { opacity: 1; }
    .cta:active { transform: translateY(0); }

    .cta-meta {
      margin: 0;
      font-size: 12px;
      letter-spacing: 0.01em;
      color: #6B7385;
    }

    /* 免费声明：紧贴下载按钮下方，比 meta 更醒目一档 */
    .cta-free {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      max-width: 100%;
      margin: 0;
      font-size: 12.5px;
      line-height: 1.5;
      letter-spacing: 0.01em;
      color: #B9AE9C;
      text-align: center;
      text-wrap: pretty;
    }

    .cta-free__tag {
      flex: none;
      padding: 2px 9px;
      border-radius: 9999px;
      border: 1px solid rgba(233, 160, 92, 0.42);
      background: rgba(233, 160, 92, 0.10);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--amber);
      white-space: nowrap;
    }

    /* 绿色版入口：次级动作，不做成第二个按钮 */
    .cta-alt {
      margin: 0;
      max-width: 100%;
      font-size: 12.5px;
      line-height: 1.6;
      letter-spacing: 0.01em;
      color: #6B7385;
      text-align: center;
      text-wrap: pretty;
    }

    .cta-alt__link {
      color: #9AA3B4;
      border-bottom: 1px solid rgba(154, 163, 180, 0.32);
      padding-bottom: 1px;
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .cta-alt__link:hover {
      color: var(--amber);
      border-bottom-color: rgba(233, 160, 92, 0.62);
    }

    /* ============ 界面预览 ============ */
    .preview-section {
      max-width: 1152px;
      margin-inline: auto;
      padding: 0 24px 96px;
    }

    .preview {
      max-width: 960px;
      margin-inline: auto;
    }

    .preview__frame {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: var(--surface);
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: 0 44px 120px -48px rgba(233, 160, 92, 0.32),
                  0 24px 64px -32px rgba(0, 0, 0, 0.95);
    }

    /* 顶边一道极细的暖色高光，模拟屏幕发光 */
    .preview__frame::before {
      content: "";
      position: absolute;
      top: 0;
      left: 14%;
      right: 14%;
      height: 1px;
      z-index: 2;
      background: linear-gradient(90deg, transparent, rgba(233, 160, 92, 0.75), transparent);
    }

    .preview__bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 36px;
      padding-inline: 14px;
      background: rgba(255, 255, 255, 0.035);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 11.5px;
      letter-spacing: 0.03em;
      color: #8A92A4;
    }

    .preview__dots {
      display: flex;
      gap: 6px;
    }

    .preview__dots i {
      width: 8px;
      height: 8px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.14);
    }

    /* 固定宽高比：图片没加载出来时容器也不会塌，避免布局跳动 */
    .preview__shot {
      position: relative;
      aspect-ratio: 1920 / 1412;
      background:
        radial-gradient(120% 90% at 50% 0%, rgba(233, 160, 92, 0.10), transparent 62%),
        #121722;
    }

    .preview__shot img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* ============ 核心功能 ============ */
    .features-section {
      max-width: 1152px;
      margin-inline: auto;
      padding: 0 24px 112px;
    }

    .features {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .feature + .feature {
      border-top: 1px solid var(--hairline);
      padding-top: 48px;
    }

    .feature__idx {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.2em;
      color: var(--amber);
    }

    .feature h2 {
      margin: 16px 0 0;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .feature p {
      margin: 10px 0 0;
      font-size: 14px;
      line-height: 1.75;
      color: var(--muted);
    }

    /* ============ 页脚 ============ */
    .site-footer {
      border-top: 1px solid var(--hairline);
    }

    .footer__inner {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-block: 40px;
      font-size: 12.5px;
      color: #6B7385;
    }

    .footer__inner p {
      margin: 0;
    }

    .footer__link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #8A92A4;
      transition: color 0.2s ease;
    }

    .footer__link:hover {
      color: var(--amber);
    }

    /* ============ 滚动淡入 ============ */
    /* 只在 <html class="js"> 下才隐藏：脚本被拦、JS 关闭时内容依然可见 */
    .js .reveal {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .js .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    /* ============ 可达性 ============ */
    a:focus-visible {
      outline: 2px solid var(--amber);
      outline-offset: 3px;
      border-radius: 6px;
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }

      .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .cta,
      .pill,
      .site-header,
      .footer__link,
      .cta-alt__link {
        transition: none;
      }
    }

    /* ============ 断点 ============ */
    @media (min-width: 640px) {
      .brand__latin {
        display: inline;
      }
    }

    @media (min-width: 768px) {
      .wrap,
      .hero__inner,
      .preview-section,
      .features-section {
        padding-inline: 32px;
      }

      .lede {
        font-size: 16px;
      }

      .preview-section {
        padding-bottom: 128px;
      }

      .features-section {
        padding-bottom: 144px;
      }

      .features {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
      }

      .feature {
        padding-inline: 40px;
      }

      .feature:first-child {
        padding-left: 0;
      }

      .feature:last-child {
        padding-right: 0;
      }

      .feature + .feature {
        border-top: 0;
        border-left: 1px solid var(--hairline);
        padding-top: 0;
      }

      .footer__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
    
        /* ============ 微信内提示 ============ */
    .wx-tip {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 11px 16px;
      background: rgba(233, 160, 92, 0.97);
      color: #1A1208;
      font-size: 13px;
      line-height: 1.5;
      box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.9);
    }

    .wx-tip[hidden] { display: none; }

    .wx-tip__text strong {
      display: block;
      margin-bottom: 2px;
      font-weight: 600;
    }

    .wx-tip__close {
      flex: none;
      margin-left: auto;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 0;
      border-radius: 9999px;
      background: rgba(26, 18, 8, 0.14);
      color: #1A1208;
      font-size: 17px;
      line-height: 22px;
      text-align: center;
      cursor: pointer;
    }

    /* 老 X5 内核不支持 aspect-ratio 时，预览图容器会塌成 0 高 */
    @supports not (aspect-ratio: 1 / 1) {
      .preview__shot {
        height: 0;
        padding-top: 73.54%;   /* 1412 / 1920 */
      }
      .preview__shot img {
        position: absolute;
        inset: 0;
      }
    }