* { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --violet: #2D5596; --violet-d: #244A82; --violet-l: #3a6bb5;
    --ink: #16181d; --muted: #6b7280; --line: #e7e8ee; --soft: #f3f5fb;
    --bg: #fafbff; --card: #ffffff;
  }
  html { scroll-behavior: smooth; }
  body { font-family: -apple-system, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
    color: var(--ink); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; }
  a { color: var(--violet); text-decoration: none; }
  .wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px; }

  /* ============ 顶部导航 ============ */
  .nav { position: sticky; top: 0; z-index: 20; background: rgba(250,251,255,.82);
    backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: .5px; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .brand small { color: var(--muted); font-weight: 600; font-size: 13px; letter-spacing: 1px; }
  .nav-links { display: flex; align-items: center; gap: 22px; }
  .nav-links a { color: var(--ink); font-size: 14px; font-weight: 500; }
  .nav-links a:hover { color: var(--violet); }
  .nav-cta { background: var(--violet); color: #fff !important; padding: 8px 18px; border-radius: 9px; font-weight: 600; }
  .nav-cta:hover { background: var(--violet-d); }
  @media (max-width: 720px) { .nav-links a.hide-sm { display: none; } }

  /* ============ Hero ============ */
  .hero { position: relative; overflow: hidden; text-align: center;
    background:
      radial-gradient(900px 460px at 50% -220px, rgba(255,255,255,.12), transparent 70%),
      linear-gradient(165deg, #335f9b 0%, #2D5596 52%, #223f6c 100%);
    color: #fff; padding: 78px 22px 44px; }
  .badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); color: #fff;
    padding: 6px 14px; border-radius: 999px; margin-bottom: 22px; }
  .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #7Cf5b6; box-shadow: 0 0 0 3px rgba(124,245,182,.3); }
  .hero h1 { font-size: 44px; line-height: 1.18; letter-spacing: .5px; font-weight: 800; }
  .hero h1 .hl { background: linear-gradient(90deg,#cfe2ff,#fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero .sub { font-size: 18px; opacity: .94; margin-top: 16px; max-width: 620px; margin-left: auto; margin-right: auto; }
  .btns { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 11px;
    font-size: 16px; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease, background .15s; }
  .btn[hidden] { display: none; } /* .btn 的 display 会盖过 [hidden]，显式补一条让隐藏生效 */
  .btn-primary { background: #fff; color: var(--violet); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
  .btn-ghost { border: 1px solid rgba(255,255,255,.55); color: #fff; }
  .btn-ghost:hover { background: rgba(255,255,255,.12); }
  .req { margin-top: 16px; font-size: 13px; opacity: .82; }
  .hero-guide { margin-top: 22px; }  /* 往下挪：和 .req 拉开点距离、压掉下方多余留白 */
  @media (max-width: 600px) { .hero h1 { font-size: 33px; } .hero { padding: 56px 20px 48px; } }

  /* ============ 通用区块 ============ */
  section.block { padding: 70px 0; }
  .eyebrow { color: var(--violet); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
  .h2 { font-size: 30px; font-weight: 800; margin: 8px 0 10px; letter-spacing: .3px; }
  .lead { color: var(--muted); font-size: 16px; max-width: 640px; }
  .center { text-align: center; }
  .center .lead { margin: 0 auto; }

  /* ============ 能力橱窗（图文交错） ============ */
  .showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 46px 0; }
  .showcase.rev .txt { order: 2; }
  .showcase .txt h3 { font-size: 23px; font-weight: 800; margin-bottom: 10px; }
  .showcase .txt p { color: var(--muted); font-size: 15.5px; }
  .showcase .txt .pills { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
  .pill { font-size: 12.5px; font-weight: 600; color: var(--violet); background: var(--soft);
    border: 1px solid #dde6f6; padding: 5px 12px; border-radius: 999px; }
  @media (max-width: 740px) {
    .showcase { grid-template-columns: 1fr; gap: 26px; }
    .showcase.rev .txt { order: 0; }
  }

  /* 模拟界面卡片 */
  .mock { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 18px 40px -18px rgba(45,85,150,.28); overflow: hidden; }
  .mock-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
  .mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e2e4ec; display: inline-block; }
  .mock-bar i.r { background: #ff6159; } .mock-bar i.y { background: #ffbd2e; } .mock-bar i.g { background: #28c840; }
  .mock-bar span { margin-left: 8px; font-size: 12px; color: var(--muted); }
  .mock-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .bubble { max-width: 86%; padding: 10px 14px; border-radius: 13px; font-size: 14px; line-height: 1.55; }
  .bubble.user { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 4px; }
  .bubble.ai { align-self: flex-start; background: var(--soft); color: var(--ink); border-bottom-left-radius: 4px; }
  .code { margin-top: 8px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12.5px;
    background: #0f172a; color: #d7e3f4; border-radius: 9px; padding: 10px 12px; overflow-x: auto; }
  .code .add { color: #7ee0a8; } .code .mut { color: #8b9bb4; }
  .genimg { aspect-ratio: 16/10; border-radius: 11px; position: relative; overflow: hidden;
    background: linear-gradient(135deg,#6a5cff 0%, #e15bd0 45%, #ff9a5b 100%); }
  .genimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
  .genimg::before { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,.5), transparent 42%); }
  .genimg span { position: absolute; left: 12px; bottom: 10px; z-index: 2; color: #fff; font-size: 12.5px; font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,.4); }
  .typing { align-self: flex-start; display: inline-flex; gap: 4px; background: var(--soft); padding: 11px 14px; border-radius: 13px; }
  .typing i { width: 6px; height: 6px; border-radius: 50%; background: #b9c2d6; animation: blink 1.2s infinite; }
  .typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
  @keyframes blink { 0%,60%,100%{opacity:.3} 30%{opacity:1} }

  /* ============ 特性卡片 ============ */
  .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px; }
  @media (max-width: 820px) { .features { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 520px) { .features { grid-template-columns: 1fr; } }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 24px;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s; }
  .card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(45,85,150,.3); border-color: #d6e0f3; }
  .card .ico { font-size: 25px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    background: var(--soft); border-radius: 12px; }
  .card h3 { font-size: 16.5px; margin: 14px 0 7px; }
  .card p { color: var(--muted); font-size: 14px; }

  /* ============ 三步 ============ */
  .steps-band { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .step-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
  .step { flex: 1; min-width: 180px; max-width: 280px; text-align: center; background: var(--card);
    border: 1px solid var(--line); border-radius: 14px; padding: 26px 18px; }
  .step .n { width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 50%;
    background: linear-gradient(135deg,var(--violet-l),var(--violet)); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; }
  .step .t { font-size: 15px; font-weight: 700; }
  .step .d { font-size: 13px; color: var(--muted); margin-top: 4px; }

  /* ============ 下载 CTA ============ */
  .cta { text-align: center; }
  .cta-box { background: linear-gradient(135deg, var(--violet) 0%, var(--violet-l) 100%); color: #fff;
    border-radius: 22px; padding: 52px 28px; box-shadow: 0 24px 60px -26px rgba(45,85,150,.6); }
  .cta-box h2 { font-size: 28px; font-weight: 800; }
  .cta-box p { opacity: .92; margin-top: 8px; font-size: 15.5px; }
  .cta-box .btns { margin-top: 26px; }
  .cta-box .web-note { margin-top: 14px; font-size: 13px; opacity: .85; }

  /* ============ 页脚 ============ */
  footer { border-top: 1px solid var(--line); padding: 30px 22px; text-align: center; color: var(--muted); font-size: 13px; }
  footer a { color: var(--muted); }
  footer .row { margin-top: 6px; }

  /* ============ 动效 ============ */
  /* Hero 柔光：缓慢呼吸 + 漂移，营造"活"的感觉 */
  .hero::before { content: ""; position: absolute; top: -34%; left: 50%; width: 720px; height: 520px;
    transform: translateX(-50%); pointer-events: none; filter: blur(16px); will-change: transform, opacity;
    background: radial-gradient(closest-side, rgba(130,180,255,.32), transparent 70%); }
  @media (prefers-reduced-motion: no-preference) {
    .hero::before { animation: drift 11s ease-in-out infinite; }
    @keyframes drift { 0%,100% { transform: translateX(-55%) scale(1); opacity:.7 }
                       50% { transform: translateX(-45%) scale(1.14); opacity:1 } }
    /* 滚动进入：淡入上移 */
    .reveal { opacity: 0; transform: translateY(26px); will-change: transform, opacity;
      backface-visibility: hidden; -webkit-font-smoothing: antialiased;
      transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
    .reveal.in { opacity: 1; transform: translateY(0); }
    /* 分组逐个进入（特性卡 / 步骤） */
    .reveal-group > * { opacity: 0; transform: translateY(24px); will-change: transform, opacity;
      backface-visibility: hidden; -webkit-font-smoothing: antialiased;
      transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
    .reveal-group.in > * { opacity: 1; transform: translateY(0); }
    .reveal-group.in > *:nth-child(2){ transition-delay:.07s }
    .reveal-group.in > *:nth-child(3){ transition-delay:.14s }
    .reveal-group.in > *:nth-child(4){ transition-delay:.21s }
    .reveal-group.in > *:nth-child(5){ transition-delay:.28s }
    .reveal-group.in > *:nth-child(6){ transition-delay:.35s }
    /* Hero 入场：加载即播，逐级延迟 */
    .hero .badge, .hero h1, .hero .sub, .hero .btns, .hero .req {
      opacity: 0; backface-visibility: hidden; will-change: transform, opacity;
      animation: heroUp .85s cubic-bezier(.22,.61,.36,1) forwards; }
    .hero .badge { animation-delay:.05s } .hero h1 { animation-delay:.16s }
    .hero .sub { animation-delay:.3s } .hero .btns { animation-delay:.44s } .hero .req { animation-delay:.56s }
    @keyframes heroUp { from { opacity:0; transform: translateY(20px) } to { opacity:1; transform:none } }
  }

  /* ============ 登录 / 注册 ============ */
  .nav-link { color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
  .nav-link:hover { color: var(--violet); }
  .user-chip { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
  .user-chip[hidden] { display: none; }
  .user-chip #user-name { font-weight: 700; color: var(--ink); max-width: 140px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .user-chip a { color: var(--muted); font-size: 13px; }
  .user-chip a:hover { color: var(--violet); }
  .user-chip .ws-link { background: var(--violet); color: #fff; padding: 7px 16px; border-radius: 9px;
    font-weight: 700; font-size: 14px; }
  .user-chip .ws-link:hover { background: var(--violet-d); color: #fff; }
  .auth-overlay { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
    background: rgba(18,26,46,.5); backdrop-filter: blur(3px); padding: 20px; }
  .auth-card { position: relative; width: 100%; max-width: 384px; background: #fff; border-radius: 18px;
    padding: 30px 28px 22px; box-shadow: 0 30px 70px -20px rgba(20,40,90,.5); animation: pop .24s ease; }
  @keyframes pop { from { opacity:0; transform: translateY(12px) scale(.985) } to { opacity:1; transform:none } }
  .auth-close { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 18px;
    color: var(--muted); cursor: pointer; line-height: 1; }
  .auth-close:hover { color: var(--ink); }
  .auth-tabs { display: flex; gap: 6px; background: var(--soft); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
  .auth-tabs button { flex: 1; border: 0; background: none; padding: 9px; border-radius: 9px; font-size: 15px;
    font-weight: 700; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
  .auth-tabs button.active { background: #fff; color: var(--violet); box-shadow: 0 1px 4px rgba(0,0,0,.09); }
  .auth-card form { display: flex; flex-direction: column; gap: 12px; }
  .auth-card form[hidden] { display: none; }
  .auth-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
    font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; }
  .auth-card input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(45,85,150,.12); }
  .auth-submit { background: var(--violet); color: #fff; border: 0; padding: 12px; border-radius: 10px;
    font-size: 15.5px; font-weight: 700; cursor: pointer; margin-top: 4px; transition: background .15s, opacity .15s; }
  .auth-submit:hover { background: var(--violet-d); }
  .auth-submit:disabled { opacity: .6; cursor: default; }
  .auth-err { display: none; background: #fff1f0; border: 1px solid #ffccc7; color: #cf1322;
    font-size: 13px; padding: 9px 12px; border-radius: 9px; margin-bottom: 14px; }
  .auth-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 16px; }

  /* ============ 安装指引（越过 Windows 安全提示 · 浮层版）============ */
  .kicker { display:inline-block; font-size:13px; font-weight:700; letter-spacing:1px; color:var(--violet);
    background:var(--soft); padding:4px 13px; border-radius:999px; margin-bottom:12px; }
  /* 浮层卡片：比登录卡宽、可纵向滚动（步骤+两张示意图较高，小屏要能滚）。复用 .auth-overlay 的遮罩与居中。 */
  .guide-card { max-width:560px; max-height:90vh; overflow-y:auto; padding:26px 26px 22px; text-align:left; }
  .guide-hd { text-align:center; margin-bottom:6px; }
  .guide-ok { display:inline-block; background:#e7f7ec; color:#1a7f37; font-size:13px; font-weight:700;
    padding:4px 14px; border-radius:999px; }
  /* hero 下载按钮下的小字入口：低调但点得到，给想提前看的人。 */
  /* 入口在深蓝 hero 上：必须用浅色（var(--violet) 是深蓝紫，压深蓝背景=隐身）。
     给个半透明胶囊底，浅色字，既显眼又像可点。 */
  .hero-guide { margin-top:14px; font-size:13.5px; }
  .hero-guide a { display:inline-block; color:#eaf2ff; font-weight:600; text-decoration:none;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.30);
    padding:6px 15px; border-radius:999px; transition:background .15s,border-color .15s; }
  .hero-guide a:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.55); color:#fff; }
  /* 浮层内的步骤列表：占满卡片宽度、收紧上间距（非整页版那种 720/30 居中布局）。 */
  .guide-card .guide-steps { max-width:none; margin:16px 0 0; }
  .guide-card .win-dialog { max-width:none; }
  .guide-steps { max-width:720px; margin:30px auto 0; list-style:none; display:grid; gap:14px; }
  .guide-steps li { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
  .guide-steps li.key { border-color:var(--violet); box-shadow:0 10px 30px rgba(45,85,150,.12); }
  .gs-head { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; }
  .gs-n { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none;
    border-radius:50%; background:var(--violet); color:#fff; font-size:13px; font-weight:700; }
  .guide-steps p { color:var(--muted); margin-top:8px; font-size:14.5px; }
  .tag { margin-left:auto; background:#fde8e8; color:#d92d2d; font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px; }
  .kbd { display:inline-block; background:var(--soft); border:1px solid var(--line); border-radius:6px;
    padding:1px 8px; font-weight:600; color:var(--ink); font-size:13.5px; }
  /* Windows「已保护你的电脑」示意框 */
  .win-dialog { margin:12px 0; max-width:440px; background:#0f6cbd; color:#fff; border-radius:8px;
    padding:16px 18px; box-shadow:0 12px 32px rgba(15,108,189,.32); }
  .wd-title { font-size:17px; font-weight:700; margin-bottom:8px; }
  .wd-text { font-size:13px; opacity:.92; line-height:1.5; }
  .wd-link { margin-top:14px; font-size:14px; }
  .wd-link .hot { text-decoration:underline; font-weight:700; }
  .wd-btns { margin-top:16px; display:flex; gap:10px; }
  .wd-btn { display:inline-block; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);
    color:#fff; padding:6px 16px; border-radius:4px; font-size:13px; }
  .wd-btn.hot { background:#fff; color:#0f6cbd; border-color:#fff; font-weight:700; box-shadow:0 0 0 3px rgba(255,255,255,.5); }
  /* 两步弹窗：按钮右对齐 + 步骤间箭头 + 蓝框内黄色提示 */
  .wd-btns.end { justify-content: flex-end; }
  .wd-callout { display:inline-block; color:#ffd86b; font-size:13px; font-weight:700; margin-left:6px; }
  .guide-steps p.wd-arrow { text-align:center; color:var(--violet); font-weight:700; font-size:14px; }
  /* 用红框框住「该点的目标」，让眼睛一眼锁定（覆盖前面的白框样式）*/
  .wd-link .hot { display:inline-block; border:2px solid #ff3b30; border-radius:6px; padding:1px 9px; box-shadow:0 0 0 4px rgba(255,59,48,.30); }
  .wd-btn.hot { border:2px solid #ff3b30; box-shadow:0 0 0 4px rgba(255,59,48,.42); }