/* ===================================================================
   图忆 Tuyo — 主样式表
   配色体系沿用参考站（runline）：深色底 + 蓝色主色
   =================================================================== */

:root{
  --bg:        #05070A;
  --bg-2:      #0A0E13;
  --surface:   #101418;
  --surface-2: #151A20;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.06);

  --blue:      #2E9BF5;
  --blue-dim:  #1A6FBF;
  --blue-soft: rgba(46,155,245,.12);

  --ink:       #DDE4EC;
  --dim:       #93A1B0;
  --dimmer:    #7F8D9B;
  --faint:     #6B7885;
  --ghost:     #46525E;

  --font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC",
          "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei",
          "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "JetBrains Mono", "Cascadia Mono", monospace;

  --max: 1120px;
  --r:   14px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
em{ font-style:normal; }

.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:800px; }

/* ============================ 导航 ============================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(5,7,10,.72);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled{ border-bottom-color:var(--line); background:rgba(5,7,10,.88); }

.nav-inner{
  max-width:var(--max); margin:0 auto; padding:0 24px;
  height:64px; display:flex; align-items:center; gap:28px;
}

.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand-logo{ width:28px; height:28px; border-radius:8px; }
.brand-name{
  font-size:16px; font-weight:500; letter-spacing:.02em; color:var(--ink);
}
.brand-name em{ color:var(--dim); font-weight:300; margin-left:2px; }

.nav-links{
  display:flex; align-items:center; gap:26px;
  margin-left:auto; font-size:14px; font-weight:400;
}
.nav-links a{ color:var(--dim); transition:color .2s; }
.nav-links a:hover{ color:var(--ink); }

.nav-cta{
  flex:0 0 auto; font-size:14px; font-weight:500;
  padding:8px 18px; border-radius:100px;
  background:var(--blue); color:#fff;
  transition:filter .2s, transform .2s;
}
.nav-cta:hover{ filter:brightness(1.12); transform:translateY(-1px); }

/* ---------- 中英文切换按钮 ---------- */
.lang-toggle{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px 7px 10px; margin-right:2px;
  border:1px solid var(--line); border-radius:100px;
  background:rgba(255,255,255,.03);
  color:var(--dim); font:inherit; font-size:13px; font-weight:500;
  letter-spacing:.02em; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.lang-toggle:hover{
  color:var(--ink); border-color:rgba(46,155,245,.42);
  background:rgba(46,155,245,.08);
}
.lang-toggle-icon{ display:grid; place-items:center; }
.lang-toggle-icon svg{ width:15px; height:15px; display:block; }
.lang-toggle-text{ min-width:1.6em; text-align:center; }

/* ============================ 首屏 ============================ */
.hero{
  position:relative; padding:150px 0 90px;
  overflow:hidden;
}
.hero-glow{
  position:absolute; top:-320px; left:50%; transform:translateX(-50%);
  width:1000px; height:620px; pointer-events:none;
  background:radial-gradient(ellipse at center,
              rgba(46,155,245,.20) 0%,
              rgba(46,155,245,.06) 42%,
              transparent 70%);
  filter:blur(20px);
}

.hero .wrap{ position:relative; text-align:center; }

.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:400; color:var(--dim);
  padding:6px 14px 6px 10px; margin-bottom:30px;
  border:1px solid var(--line); border-radius:100px;
  background:rgba(255,255,255,.03);
}
.hero-badge .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 10px var(--blue);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.45; transform:scale(.82); }
}

.hero-title{
  font-size:clamp(38px, 6.4vw, 68px);
  font-weight:200; line-height:1.18; letter-spacing:-.02em;
  margin-bottom:24px; color:#fff;
}
.hero-title .grad{
  font-weight:500;
  background:linear-gradient(96deg, #4FB2FF 0%, #2E9BF5 48%, #6FD0FF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-sub{
  font-size:clamp(15px, 1.7vw, 17px);
  color:var(--dim); font-weight:300; line-height:1.85;
  max-width:600px; margin:0 auto 38px;
}

.hero-actions{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:500; letter-spacing:.01em;
  padding:13px 30px; border-radius:100px;
  cursor:pointer; border:1px solid transparent;
  transition:filter .2s, transform .2s, background .2s, border-color .2s;
  white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ filter:brightness(1.14); transform:translateY(-2px); }
.btn-ghost{
  background:rgba(255,255,255,.03); color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }
.btn-lg{ padding:16px 40px; font-size:16px; }

.hero-meta{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:30px; font-size:13px; color:var(--faint); font-weight:400;
}
.hero-meta i{ width:1px; height:11px; background:var(--ghost); }

/* ---------- 手机演示 ---------- */
/* 整机等比缩放：868px 高的手机放不进常见笔记本首屏，
   按视口高度收缩，让手机完整可见（上限 1，不放大）。
   缩放比例由 script.js 读取后再写回 --phone-scale，纯 CSS 兜底 0.72 */
.phone-stage{
  margin-top:64px;
  display:flex; flex-direction:column; align-items:center;
  --phone-scale:0.72;
}
.phone{
  position:relative; width:414px; height:868px;
  border-radius:60px; padding:12px;
  background:linear-gradient(160deg, #232A32 0%, #14181D 52%, #0C1013 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 40px 90px -20px rgba(0,0,0,.85),
    0 0 130px -30px rgba(46,155,245,.30);
  transform:scale(var(--phone-scale));
  transform-origin:center top;
  margin-bottom:calc((var(--phone-scale) - 1) * 868px);
}

/* 屏幕：App 真实浅色界面（390×844） */
.screen{
  position:relative; width:390px; height:844px;
  /* ⚠️ 不要加 overflow:hidden —— 它会让 .screen 成为「滚动容器」，
     底部绝对定位的 .home-indicator / .more-menu 一旦在滚出区域外就不可见，
     且与 .phone 的圆角裁切叠加后容易出现底部黑边观感。改用 border-radius 裁切即可。 */
  border-radius:48px;
  display:flex; flex-direction:column;
  /* 关键：flex 子项默认 min-height:auto，会被内容撑破，
     导致 Tab 栏被挤出屏幕底边（压在机身圆角上）。
     用 min-height:0 让 card-area 真正吸收剩余空间 */
  min-height:0;
  max-height:844px;
  /* 环境渐变 wash：左上冷瓷青 → 右上暖沙 → 中部中性灰收敛，46% 处淡入纯白 */
  background:
    radial-gradient(90% 46% at 0% 0%, #d9e4e6 0%, rgba(217,228,230,0) 100%),
    radial-gradient(90% 46% at 100% 0%, #b2b3ae 0%, #dbcfbf 45%, rgba(219,207,191,0) 100%),
    linear-gradient(180deg, #cacaca 0%, #dcdbd7 14%, #eae9e7 24%, #f5f4f2 33%, #ffffff 46%);
  --fg:#1d1d1f; --fg-2:#424245; --muted:#6e6e73;
  --border-soft:#e8e8ed; --surface:#f5f5f7;
  --accent:#0071e3; --accent-active:#0066cc;
  --card-back-1:#d9e4e6; --card-back-2:#e2e4e1; --card-back-3:#dbcfbf;
  --card-glow:rgba(255,255,255,.75);
  color:var(--fg);
}
.island{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:118px; height:34px; border-radius:980px;
  background:#000; z-index:60;
}

/* 状态栏 */
.statusbar{
  height:58px; flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 30px 0;
}
.statusbar .time{ font-size:16px; font-weight:600; letter-spacing:-.2px; }
.statusbar .right{ display:flex; align-items:center; gap:7px; }
.statusbar svg{ display:block; }

/* 抽卡数量：紧贴灵动岛下方成一栏，不随卡片浮动 */
.draw-bar{
  flex:none;
  display:flex; justify-content:center;
  padding:2px 20px 0;
  position:relative; z-index:70;   /* 高于卡片，菜单展开时不被遮挡 */
}

/* 内容区：翻转卡居中。min-height:0 让它可在空间不足时收缩，
   不把 Tab 栏挤出屏幕 */
.card-area{
  flex:1 1 auto; min-height:0;
  display:grid; place-items:center;
  padding:8px 20px 12px;
  overflow:hidden;
}

/* 抽卡翻转结构：白色相框 + 正反面 */
.card-3d{ width:272px; height:356px; perspective:1400px; }
.flipper{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform 560ms cubic-bezier(.28,0,.22,1);
}
.flipper.flipped{ transform:rotateY(180deg); }
.face{
  position:absolute; inset:0;
  border-radius:24px;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.08);
}

/* 背面：wash 色系渐变星芒 */
.face-back{
  background:
    radial-gradient(170px 140px at 58% 52%, var(--card-glow), transparent 72%),
    linear-gradient(135deg, var(--card-back-1) 0%, var(--card-back-2) 52%, var(--card-back-3) 100%);
}
/* 星芒：白星芒在白卡背上会隐形，改用品牌蓝 + 少量金色，
   既保留抽卡的闪光感，又与站点蓝色主调呼应 */
.spark{ position:absolute; color:#2E9BF5; filter:drop-shadow(0 1px 3px rgba(46,155,245,.35)); }
.spark.gold{ color:#D9A441; filter:drop-shadow(0 1px 3px rgba(217,164,65,.45)); }
.spark.lt{ color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.08)); }
.spark.s1{ width:46px; top:42%; right:18%; }
.spark.s2{ width:15px; top:26%; left:24%; }
.spark.s3{ width:11px; top:68%; left:16%; }
.spark.s4{ width:13px; top:20%; right:30%; }
.spark.s5{ width:24px; top:74%; right:12%; }
.spark.s6{ width:9px; top:12%; left:46%; }
.spark svg{ display:block; width:100%; height:auto; }

/* 正面：照片（先显示渐变场景占位，JS 加载到风景照后替换为真实照片） */
.face-photo{ transform:rotateY(180deg); background:#111; }
.photo-layer{
  position:absolute; inset:0; opacity:0;
  transition:opacity 220ms cubic-bezier(.28,0,.22,1);
}
.photo-layer.active{ opacity:1; }
.photo-layer .scene{ position:absolute; inset:0; background-size:cover; background-position:center; }
.photo-layer.p1 .scene{
  background:
    radial-gradient(90px 60px at 62% 26%, rgba(255,214,140,.9), transparent 70%),
    linear-gradient(180deg, #f2b16a 0%, #d97a4e 34%, #7c4a6b 68%, #38294f 100%);
}
.photo-layer.p2 .scene{
  background:
    linear-gradient(180deg, rgba(226,240,235,.55) 0%, transparent 40%),
    linear-gradient(180deg, #cfe8dd 0%, #7fb8a4 42%, #3f7d74 72%, #1f4a4d 100%);
}
.photo-layer.p3 .scene{
  background:
    linear-gradient(180deg, transparent 62%, rgba(13,27,62,.85) 63%),
    linear-gradient(180deg, #f6c99a 0%, #e2926b 40%, #6d5b96 74%, #232a5c 100%);
}
.photo-layer .caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 16px 14px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  color:rgba(255,255,255,.92);
  font-size:12px; font-weight:500; letter-spacing:.08em; text-align:center;
}

.card-link{ display:block; border-radius:24px; }

/* 抽卡数量选择（下拉） */
.draw-select{ position:relative; }
.draw-trigger{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:none; border-radius:12px;
  background:rgba(255,255,255,.55);
  font:inherit; color:var(--fg); cursor:pointer;
  transition:background 150ms cubic-bezier(.28,0,.22,1);
}
.draw-trigger:hover{ background:rgba(255,255,255,.9); }
.draw-trigger .label{ font-size:16px; font-weight:400; }
.draw-trigger .value{ font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.draw-trigger .chev{ color:var(--fg-2); display:grid; place-items:center; transition:transform 220ms cubic-bezier(.28,0,.22,1); }
.draw-select.open .chev{ transform:rotate(180deg); }

.draw-menu{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  width:148px; padding:8px; border-radius:16px;
  background:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,.18), 0 0 0 1px var(--border-soft);
  display:none;
}
.draw-select.open .draw-menu{ display:block; }
.draw-option{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:11px 14px;
  border:none; border-radius:12px; background:transparent;
  font:inherit; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--fg); cursor:pointer;
  transition:background 150ms cubic-bezier(.28,0,.22,1);
}
.draw-option:hover{ background:var(--surface); }
.draw-option .check{ display:none; color:var(--accent); }
.draw-option[aria-checked="true"]{ background:#eef1f8; color:var(--accent-active); }
.draw-option[aria-checked="true"] .check{ display:inline-flex; color:var(--accent-active); }

/* 底部标签栏 */
.tabbar{
  flex:0 0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  /* 顶部留一点呼吸，底部只留出 Home 指示条的空间。
     Tab 内容靠下，贴近 Home 指示条（原来 38px 底 padding 让下方空了太多） */
  padding:10px 18px 22px;
  align-items:end;
  background:#fff;
}
.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:4px;
  padding:8px 0 6px; border:none; border-radius:18px; background:transparent;
  color:var(--fg); font:inherit; cursor:pointer; text-decoration:none;
  transition:background 150ms, color 150ms;
}
.tab svg{ display:block; }
.tab .tab-label{ font-size:12px; font-weight:500; letter-spacing:.02em; }
.tab.active{ color:var(--accent); }
.tab.active .tab-label{ font-weight:600; }

/* 更多菜单：Tab「更多」唤出（圆形扩散转场） */
.more-menu{
  position:absolute; right:16px; bottom:86px;
  padding:5px; z-index:45;
  background:#fff; border-radius:20px;
  box-shadow:0 14px 36px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
  overflow:hidden; opacity:0; visibility:hidden;
  clip-path:circle(0px at var(--mo-x, 100%) var(--mo-y, 100%));
  transform:scale(.92);
  transform-origin:var(--mo-x, 100%) var(--mo-y, 100%);
  transition:
    clip-path 400ms cubic-bezier(.22,.61,.36,1),
    transform 400ms cubic-bezier(.22,.61,.36,1),
    opacity 200ms ease,
    visibility 0s linear 400ms;
}
.more-menu.open{
  opacity:1; visibility:visible;
  clip-path:circle(var(--mr, 340px) at var(--mo-x, 100%) var(--mo-y, 100%));
  transform:scale(1);
  transition:
    clip-path 400ms cubic-bezier(.22,.61,.36,1),
    transform 400ms cubic-bezier(.22,.61,.36,1),
    opacity 160ms ease;
}
.more-item{
  display:flex; align-items:center; gap:8px;
  width:100%; height:36px; padding:0 8px;
  color:var(--fg); cursor:default;
}
.more-item + .more-item{ border-top:1px solid var(--border-soft); }
.more-item .mi-icon{ flex:none; display:grid; place-items:center; color:#48484a; }
.more-item .mi-label{ flex:none; font-size:15px; font-weight:500; letter-spacing:.02em; white-space:nowrap; }
.tab.more-open{ color:var(--accent); background:rgba(0,113,227,.12); }

/* Home 指示条 */
.home-indicator{
  position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
  width:140px; height:5px; border-radius:980px;
  background:var(--fg); opacity:.9; z-index:60;
}

.stage-caption{
  margin-top:26px; font-size:12.5px; color:var(--ghost); font-weight:400;
}


/* ============================ 通用区块 ============================ */
.section{ padding:100px 0; position:relative; }
.section-alt{ background:var(--bg-2); }

.sec-head{ margin-bottom:46px; max-width:640px; }
.sec-eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px;
}
.sec-title{
  font-size:clamp(26px, 3.4vw, 36px);
  font-weight:300; letter-spacing:-.015em;
  color:#fff; line-height:1.3; margin-bottom:14px;
}
.sec-desc{ font-size:15.5px; color:var(--dim); font-weight:300; }

.sec-head.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ============================ 三特点 ============================ */
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.feature{
  background:var(--bg); padding:38px 30px 40px;
  transition:background .3s;
}
.feature:hover{ background:var(--surface); }

.f-num{
  font-family:var(--mono); font-size:12px; font-weight:500;
  color:var(--blue); letter-spacing:.1em; margin-bottom:20px;
}
.feature h3{
  font-size:18px; font-weight:500; color:var(--ink);
  margin-bottom:12px; letter-spacing:-.005em;
}
.feature p{ font-size:14.5px; color:var(--dimmer); font-weight:300; line-height:1.8; }

/* ============================ 留白占位区 ============================ */
.placeholder{
  border:1px dashed rgba(46,155,245,.32);
  border-radius:var(--r);
  background:
    repeating-linear-gradient(45deg,
      rgba(46,155,245,.028) 0px,
      rgba(46,155,245,.028) 12px,
      transparent 12px,
      transparent 24px);
  padding:70px 30px;
  display:flex; align-items:center; justify-content:center;
}
.placeholder-inner{ text-align:center; max-width:440px; }

.placeholder-icon{
  width:52px; height:52px; margin:0 auto 20px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft);
  border:1px solid rgba(46,155,245,.28);
  color:var(--blue);
}
.placeholder-icon svg{ width:24px; height:24px; }

.placeholder-title{
  font-size:15.5px; font-weight:400; color:var(--ink);
  margin-bottom:8px;
}
.placeholder-note{ font-size:13.5px; color:var(--faint); font-weight:300; }

/* ============================ FAQ ============================ */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }

.faq-item summary{
  list-style:none; cursor:pointer;
  padding:24px 40px 24px 0; position:relative;
  font-size:16px; font-weight:400; color:var(--ink);
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--blue); }

.faq-item summary .q{
  font-family:var(--mono); font-size:14px; font-weight:500;
  color:var(--blue); margin-right:10px;
}
.faq-item summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:1.5px solid var(--faint);
  border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg);
  transition:transform .25s, border-color .25s;
}
.faq-item[open] summary::after{
  transform:rotate(-135deg); margin-top:-2px;
  border-color:var(--blue);
}

.faq-body{
  padding:0 40px 26px 0;
  font-size:14.5px; color:var(--dimmer); font-weight:300; line-height:1.85;
  animation:fadeIn .28s ease;
}
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none; } }

/* ============================ 法律文档 ============================ */
.doc-sec .sec-head{ margin-bottom:34px; }

.doc{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  padding:46px 44px 40px;
}
.doc-title{
  font-size:20px; font-weight:500; color:#fff;
  letter-spacing:-.005em; margin-bottom:22px;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.doc-lead{
  font-size:15px; color:var(--dimmer); font-weight:300;
  line-height:1.9; margin-bottom:30px;
}
.doc h4{
  font-size:15.5px; font-weight:500; color:var(--ink);
  margin:26px 0 12px; letter-spacing:.005em;
}
.doc ul{ list-style:none; padding-left:0; }
.doc li{
  position:relative; padding-left:20px;
  font-size:14.5px; color:var(--dimmer); font-weight:300;
  line-height:1.9; margin-bottom:8px;
}
.doc li::before{
  content:""; position:absolute; left:2px; top:12px;
  width:5px; height:5px; border-radius:50%;
  background:var(--ghost);
}
.doc li a{ color:var(--blue); border-bottom:1px solid rgba(46,155,245,.32); }
.doc li a:hover{ border-bottom-color:var(--blue); }

.doc-date{
  margin-top:32px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px; font-weight:400;
  color:var(--faint); letter-spacing:.03em;
}

/* ============================ 结尾 CTA ============================ */
.cta{
  position:relative; padding:110px 0 120px;
  text-align:center; overflow:hidden;
  background:var(--bg-2);
  border-top:1px solid var(--line);
}
.cta-glow{
  position:absolute; bottom:-300px; left:50%; transform:translateX(-50%);
  width:900px; height:520px; pointer-events:none;
  background:radial-gradient(ellipse at center,
              rgba(46,155,245,.20) 0%,
              rgba(46,155,245,.05) 45%,
              transparent 70%);
  filter:blur(24px);
}
.cta .wrap{ position:relative; }

.cta-logo{
  width:76px; height:76px; margin:0 auto 30px;
  border-radius:20px;
  box-shadow:0 16px 44px -12px rgba(230,110,20,.55);
}
.cta-title{
  font-size:clamp(24px, 3.2vw, 34px);
  font-weight:300; color:#fff; letter-spacing:-.015em;
  margin-bottom:16px; line-height:1.35;
}
.cta-sub{
  font-size:15.5px; color:var(--dim); font-weight:300;
  margin-bottom:36px;
}
.cta-note{
  margin-top:22px; font-size:12.5px; color:var(--ghost); font-weight:400;
}

/* ============================ 页脚 ============================ */
.footer{
  background:var(--bg); border-top:1px solid var(--line);
  padding:52px 0 34px;
}
.foot-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  padding-bottom:30px; border-bottom:1px solid var(--line-2);
}
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-logo{ width:26px; height:26px; border-radius:7px; }
.foot-brand span{ font-size:15px; font-weight:500; color:var(--ink); }
.foot-brand span em{ color:var(--faint); font-weight:300; margin-left:2px; }

.foot-links{
  display:flex; flex-wrap:wrap; gap:12px 26px;
  font-size:13.5px; font-weight:400;
}
.foot-links a{ color:var(--faint); transition:color .2s; }
.foot-links a:hover{ color:var(--ink); }

.foot-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-top:24px;
  font-size:12.5px; color:var(--ghost); font-weight:400;
}
/* 版权 + ICP 备案号 合成左侧一组，避免第三个元素被 space-between 推到中间 */
.foot-legal{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:4px 16px;
}
.foot-bottom .beian{
  color:var(--ghost); transition:color .2s;
  white-space:nowrap;                    /* 备案号整体不折行 */
}
.foot-bottom .beian:hover{ color:var(--blue); }
/* 公安备案：官方警徽 + 编号整体不折行（nowrap 继承自 .beian） */
.foot-bottom .beian-gongan{
  display:inline-flex; align-items:center; gap:5px;
}
.foot-bottom .beian-badge{
  display:block; height:16px; width:auto; flex:0 0 auto;
  /* 官方徽标保持原色，不做滤镜处理 */
}

/* ============================ 怎么用（步骤） ============================ */
.steps{
  display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.step{
  display:flex; gap:26px; align-items:flex-start;
  background:var(--bg-2); padding:32px 34px;
  transition:background .3s;
}
.step:hover{ background:var(--surface); }

.step-no{
  flex:0 0 auto;
  font-family:var(--mono); font-size:22px; font-weight:500;
  color:var(--blue); line-height:1.2; letter-spacing:.02em;
  min-width:44px;
}
.step-body h3{
  font-size:17.5px; font-weight:500; color:var(--ink);
  margin-bottom:9px; letter-spacing:-.005em;
}
.step-body p{
  font-size:14.5px; color:var(--dimmer); font-weight:300; line-height:1.85;
}
.step-body b{ color:var(--ink); font-weight:500; }

.how-note{
  display:flex; gap:16px; align-items:flex-start;
  margin-top:22px; padding:22px 26px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg);
}
.how-note-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); border:1px solid rgba(46,155,245,.24);
  color:var(--blue);
}
.how-note-icon svg{ width:17px; height:17px; }
.how-note p{
  font-size:14px; color:var(--dimmer); font-weight:300; line-height:1.85;
}
.how-note b{ color:var(--ink); font-weight:500; }

/* 活动块内的邮箱链接：与 doc 里的链接保持同一视觉语言 */
.mail{
  color:var(--blue);
  border-bottom:1px solid rgba(46,155,245,.32);
  transition:border-bottom-color .2s;
}
.mail:hover{ border-bottom-color:var(--blue); }

/* 免费领会员块在深色 --bg 上（不像「怎么用」在 --bg-2 上），
   how-note 默认背景也是 --bg 会糊在一起，这里提亮一档 */
#pro .how-note{ background:var(--bg-2); }
/* 下方紧接「使用条款」(--bg-2)，收一点底 padding 避免纯色过渡过空。
   用 section#pro 提升权重，同时仍能被媒体查询覆盖 */
.section#pro{ padding-bottom:76px; }
@media (max-width: 760px){
  .section#pro{ padding-bottom:58px; }
}

/* ============================ 能力（卡片网格） ============================ */
.ability-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.ab{
  padding:30px 26px 32px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg-2);
  transition:border-color .3s, background .3s, transform .3s;
}
.ab:hover{
  border-color:rgba(46,155,245,.34);
  background:var(--surface);
  transform:translateY(-3px);
}
.ab-icon{
  width:40px; height:40px; margin-bottom:20px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft);
  border:1px solid rgba(46,155,245,.24);
  color:var(--blue);
}
.ab-icon svg{ width:20px; height:20px; }
.ab h3{
  font-size:16.5px; font-weight:500; color:var(--ink);
  margin-bottom:10px; letter-spacing:-.005em;
}
.ab p{ font-size:14px; color:var(--dimmer); font-weight:300; line-height:1.82; }

.ability-foot{
  margin-top:30px; padding-top:28px;
  border-top:1px solid var(--line);
}
.ab-foot-label{
  display:block; font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin-bottom:16px;
}
.tags{ display:flex; flex-wrap:wrap; gap:9px; }
.tags span{
  font-size:12.5px; font-weight:400; color:var(--dim);
  padding:6px 14px; border-radius:100px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
}

/* ============================ 权限（条目列表） ============================ */
.perm-list{ display:flex; flex-direction:column; gap:16px; }

.perm{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--bg); overflow:hidden;
}
.perm-head{
  display:flex; align-items:center; gap:16px;
  padding:22px 26px; border-bottom:1px solid var(--line-2);
}
.perm-icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); border:1px solid rgba(46,155,245,.24);
  color:var(--blue);
}
.perm-icon svg{ width:20px; height:20px; }

.perm-title{ flex:1 1 auto; min-width:0; }
.perm-title h3{
  font-size:16.5px; font-weight:500; color:var(--ink);
  margin-bottom:2px; letter-spacing:-.005em;
}
.perm-q{ font-size:13px; color:var(--faint); font-weight:400; }

.perm-tag{
  flex:0 0 auto; font-size:12px; font-weight:500;
  padding:5px 13px; border-radius:100px;
  color:var(--dim); background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.perm-tag-must{
  color:var(--blue); background:var(--blue-soft);
  border-color:rgba(46,155,245,.3);
}

.perm-body{ list-style:none; padding:20px 26px 22px; }
.perm-body li{
  position:relative; padding-left:18px;
  font-size:14px; color:var(--dimmer); font-weight:300;
  line-height:1.85; margin-bottom:9px;
}
.perm-body li:last-child{ margin-bottom:0; }
.perm-body li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:4px; height:4px; border-radius:50%; background:var(--ghost);
}
.perm-body b{ color:var(--ink); font-weight:500; }

.perm-note{
  display:flex; gap:16px; align-items:flex-start;
  margin-top:22px; padding:24px 26px;
  border:1px solid rgba(46,155,245,.24); border-radius:var(--r);
  background:var(--blue-soft);
}
.perm-note-icon{
  flex:0 0 auto; width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:var(--blue);
  background:rgba(46,155,245,.12);
}
.perm-note-icon svg{ width:17px; height:17px; }
.perm-note h4{
  font-size:15px; font-weight:500; color:var(--ink);
  margin-bottom:7px; letter-spacing:-.005em;
}
.perm-note p{
  font-size:13.5px; color:var(--dimmer); font-weight:300; line-height:1.85;
}

/* ============================ 响应式 ============================ */
@media (max-width: 900px){
  .feature-grid{ grid-template-columns:1fr; }
  .ability-grid{ grid-template-columns:repeat(2,1fr); }
  .doc{ padding:36px 26px 32px; }
}

@media (max-width: 760px){
  .nav-links{ display:none; }
  .hero{ padding:120px 0 70px; }
  .hero-meta{ flex-wrap:wrap; row-gap:8px; }
  .section{ padding:76px 0; }
  .cta{ padding:84px 0 90px; }
  .phone-stage{ margin-top:44px; }
  /* 机身等比缩放：整机 414 宽，小屏按视口宽度收 */
  .phone{
    --phone-scale:min(1, calc((100vw - 52px) / 414));
    transform:scale(var(--phone-scale));
    transform-origin:center top;
    margin-bottom:calc((var(--phone-scale) - 1) * 868px);
    border-radius:48px; padding:9px;
  }
  .screen{ border-radius:40px; }
  .foot-top{ flex-direction:column; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; }

  .step{ flex-direction:column; gap:14px; padding:26px 24px; }
  .step-no{ font-size:19px; }
  .how-note{ padding:20px 22px; }
  .ability-grid{ grid-template-columns:1fr; }
  .perm-head{ flex-wrap:wrap; row-gap:12px; padding:20px 22px; }
  .perm-body{ padding:18px 22px 20px; }
  .perm-note{ padding:20px 22px; }
}

@media (max-width: 420px){
  .wrap{ padding:0 18px; }
  .hero-actions{ flex-direction:column; }
  .btn{ width:100%; }
  .phone{ padding:8px; border-radius:44px; }
  .screen{ border-radius:36px; }
  .doc{ padding:30px 20px 26px; }
  .step{ padding:24px 20px; }
  .ab{ padding:26px 22px 28px; }
}


/* ============================================================
   英文版排版适配 / English typography
   ------------------------------------------------------------
   中文是方块字，行高与字距的观感与拉丁字母差别很大：
   - 英文单词更长，且靠空格分词，同样的字号占宽明显更大
   - 中文标题用的是「轻字重 + 大字号」显得雅致，
     英文若沿用同一字重会显得单薄无力
   - 英文需要更大的 line-height 才不挤
   所以英文下统一：标题降字号、提字重、放宽行高
   ============================================================ */

/* ---------- 品牌名：英文下只留 Tuyo，隐藏中文 ---------- */
.brand-name [data-i18n="brand.cn"],
.foot-brand [data-i18n="brand.cn"]{ display:inline; }
html[data-brand-cn="off"] [data-i18n="brand.cn"]{ display:none; }
/* 英文下品牌名不要左边的中文间隔 */
html[lang="en"] .brand-name em,
html[lang="en"] .foot-brand em{ margin-left:0; font-weight:400; }

/* ---------- 中文专用硬换行：英文态下让句子自然连排 ---------- */
html[lang="en"] .zh-only{ display:none; }

/* ---------- 标题：降字号 / 提字重 / 放宽行高 ---------- */
html[lang="en"] .hero-title{
  font-size:clamp(34px, 5.2vw, 58px);
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.022em;
}
html[lang="en"] .hero-title .grad{ font-weight:600; }

html[lang="en"] .sec-title{
  font-size:clamp(27px, 3.5vw, 38px);
  font-weight:400;
  line-height:1.26;
  letter-spacing:-.015em;
}

html[lang="en"] .cta-title{
  font-size:clamp(30px, 4.2vw, 46px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.018em;
}

/* 正文段落：英文行高更宽，字重略提 */
html[lang="en"] .hero-sub,
html[lang="en"] .sec-desc,
html[lang="en"] .step-body p,
html[lang="en"] .ab p,
html[lang="en"] .faq-body,
html[lang="en"] .how-note p,
html[lang="en"] .perm-body li,
html[lang="en"] .doc li,
html[lang="en"] .doc-lead{
  line-height:1.92;
}
html[lang="en"] .hero-sub{ font-weight:300; }
html[lang="en"] .step-body p,
html[lang="en"] .ab p,
html[lang="en"] .faq-body{ font-weight:300; }

/* 卡片/步骤标题 */
html[lang="en"] .step-body h3,
html[lang="en"] .ab h3{
  font-size:16.5px;
  font-weight:600;
  letter-spacing:-.005em;
}

/* eyebrow：英文全大写更利落 */
html[lang="en"] .sec-eyebrow{
  letter-spacing:.16em;
  font-size:11.5px;
}

/* ---------- 导航：英文标签更长，收紧间距 ---------- */
html[lang="en"] .nav-links{ gap:20px; font-size:13.5px; }
html[lang="en"] .nav-inner{ gap:20px; }

/* ---------- 手机原型内的英文 ---------- */
html[lang="en"] .tab .tab-label{ font-size:10.5px; letter-spacing:0; }
html[lang="en"] .draw-trigger .label{ font-size:14px; }
html[lang="en"] .draw-trigger .value{ font-size:15px; }
html[lang="en"] .draw-option{ font-size:14px; }
html[lang="en"] .more-item .mi-label{ font-size:13.5px; }
html[lang="en"] .photo-layer .caption{ font-size:11px; letter-spacing:.03em; }
html[lang="en"] .stage-caption{ font-size:12px; }

/* ---------- 能力卡片的「技术底子」标签 ---------- */
html[lang="en"] .ability-foot span{ font-size:12.5px; }
html[lang="en"] .ab-foot-label{ font-size:11.5px; }

/* ---------- 法律条款：英文段落排版 ---------- */
html[lang="en"] .doc-title{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
}
html[lang="en"] .doc h4{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
}
html[lang="en"] .doc-date{ letter-spacing:.01em; }

/* ---------- 按钮：英文文案更长，放宽内边距 ---------- */
html[lang="en"] .btn{ padding-left:26px; padding-right:26px; }
html[lang="en"] .nav-cta{ padding:8px 20px; }

/* ---------- 窄屏英文微调 ---------- */
@media (max-width: 900px){
  html[lang="en"] .nav-links{ display:none; }
}
@media (max-width: 760px){
  html[lang="en"] .hero-title{ font-size:clamp(30px, 7.6vw, 42px); }
  html[lang="en"] .sec-title{ font-size:clamp(24px, 5.6vw, 32px); }
  html[lang="en"] .step-body h3,
  html[lang="en"] .ab h3{ font-size:15.5px; }
  html[lang="en"] .lang-toggle{ padding:6px 11px 6px 9px; font-size:12.5px; }
}
@media (max-width: 420px){
  html[lang="en"] .hero-title{ font-size:29px; }
  html[lang="en"] .lang-toggle-text{ display:none; }
  html[lang="en"] .lang-toggle{ padding:8px; }
}