/* =========================================================
   魔法水印相机 · 官网样式
   品牌黄 #FFD43F / 墨黑 #111925
   ========================================================= */

:root{
  --brand:        #FFD43F;
  --brand-deep:   #FFC61A;
  --brand-soft:   #FFF7DC;
  --ink:          #111925;
  --ink-2:        #39414F;
  --muted:        #6E7684;
  --line:         #E7EAEF;
  --line-2:       #F0F2F5;
  --soft:         #F6F7F9;
  --white:        #fff;

  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 11px;

  --sh-s: 0 1px 2px rgba(17,25,37,.04), 0 4px 14px -6px rgba(17,25,37,.08);
  --sh-m: 0 18px 44px -22px rgba(17,25,37,.22);
  --sh-l: 0 48px 90px -46px rgba(17,25,37,.45);
  --sh-phone: 0 2px 6px rgba(17,25,37,.14), 0 34px 70px -34px rgba(17,25,37,.5);

  --container: 1180px;
  --ease: cubic-bezier(.22,.7,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Display","PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
h1,h2,h3,h4,p,dl,dd,dt,ul,ol,li{ margin:0; }
ul,ol{ padding:0; list-style:none; }
svg{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

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

/* ---------- 通用按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px; border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:.01em;
  white-space:nowrap;
  transition:transform .18s var(--ease), background .18s, box-shadow .25s, color .18s, border-color .18s;
}
.btn svg{ width:18px; height:18px; flex:0 0 auto; }
.btn:active{ transform:translateY(1px) scale(.99); }

.btn--brand{ background:var(--brand); color:var(--ink); box-shadow:0 10px 26px -12px rgba(255,198,26,.9); }
.btn--brand:hover{ background:var(--brand-deep); box-shadow:0 16px 34px -14px rgba(255,198,26,.95); }

.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:#222c3c; box-shadow:0 16px 34px -18px rgba(17,25,37,.9); }

.btn--ghost{ border:1px solid var(--line); color:var(--ink); background:#fff; }
.btn--ghost:hover{ border-color:#cfd4dc; background:#fbfbfc; }

.btn--ghost-light{ border:1px solid rgba(255,255,255,.28); color:#fff; }
.btn--ghost-light:hover{ background:rgba(255,255,255,.1); }

.btn--lg{ height:54px; padding:0 28px; font-size:16px; }
.btn--sm{ height:40px; padding:0 18px; font-size:14px; }
.btn--block{ width:100%; }

/* ---------- 导航 ---------- */
.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.nav.is-scrolled{
  border-color:var(--line);
  box-shadow:0 12px 30px -26px rgba(17,25,37,.5);
}
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  height:70px; display:flex; align-items:center; gap:32px;
}
.brand img{ height:30px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:28px; margin-left:auto; }
.nav-links a{
  font-size:15px; color:var(--ink-2); font-weight:500;
  position:relative; padding:6px 0; transition:color .18s;
}
.nav-links a::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; border-radius:2px;
  background:var(--brand-deep); transform:translateX(-50%); transition:width .22s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:16px; }
.nav-actions{ display:flex; align-items:center; gap:10px; margin-left:8px; }
.nav-toggle{
  display:none; width:44px; height:44px; margin-left:auto;
  border-radius:12px; position:relative;
}
.nav-toggle span{
  position:absolute; left:12px; width:20px; height:1.8px; border-radius:2px; background:var(--ink);
  transition:transform .25s var(--ease), opacity .2s;
}
.nav-toggle span:nth-child(1){ top:17px; }
.nav-toggle span:nth-child(2){ top:24px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:64px 0 0; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 460px at 82% -6%, rgba(255,212,63,.55), rgba(255,212,63,0) 70%),
    radial-gradient(520px 360px at 104% 24%, rgba(255,212,63,.28), rgba(255,212,63,0) 70%),
    radial-gradient(600px 420px at 8% 8%, #FBFCFD, rgba(251,252,253,0) 70%);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(to right, rgba(17,25,37,.045) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(17,25,37,.045) 1px, transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(560px 420px at 70% 12%, #000 10%, transparent 72%);
  mask-image:radial-gradient(560px 420px at 70% 12%, #000 10%, transparent 72%);
  opacity:.7;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center;
  padding-bottom:44px;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 14px 0 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  box-shadow:var(--sh-s);
}
.pill .dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand-deep);
  box-shadow:0 0 0 4px rgba(255,212,63,.35);
}
.hero h1{
  margin-top:22px;
  font-size:clamp(36px,4.5vw,60px);
  line-height:1.14; letter-spacing:-.025em; font-weight:800;
}
.hero h1 em{
  font-style:normal; position:relative; padding-bottom:8px;
  background-image:linear-gradient(to top, var(--brand) 0 34%, transparent 34%);
  background-repeat:no-repeat; background-size:100% 100%;
}
.lede{
  margin-top:22px; max-width:520px;
  font-size:17px; line-height:1.85; color:var(--ink-2);
}
.hero-cta{ display:flex; align-items:center; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero-points{ display:flex; gap:22px; margin-top:24px; flex-wrap:wrap; }
.hero-points li{
  display:flex; align-items:center; gap:6px;
  font-size:14px; color:var(--muted); font-weight:500;
}
.hero-points svg{ width:15px; height:15px; color:var(--ink); stroke-width:2.4; }

/* 手机模型 */
.hero-visual{
  position:relative; min-height:600px;
  display:flex; align-items:center; justify-content:center;
}
.phone{
  position:relative; width:266px;
  border-radius:42px; padding:9px;
  background:linear-gradient(150deg,#2a2f3a,#111520 60%);
  box-shadow:var(--sh-phone);
  flex:0 0 auto;
}
.phone::after{
  content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:64px; height:5px; border-radius:99px; background:rgba(255,255,255,.18);
}
.phone-screen{ border-radius:34px; overflow:hidden; background:#fff; }
.phone-screen img{ width:100%; height:auto; }

.phone--front{ position:relative; z-index:3; width:262px; }
.phone--back{
  position:relative; z-index:2; width:214px;
  margin-right:-58px;
  transform:translateY(16px) rotate(-7deg);
  opacity:.97;
}
.phone--back .phone-screen{ border-radius:30px; }
/* 背景手机内的长截图只露出顶部，模拟「参数列表」 */
.phone--back .phone-screen img{
  height:100%; object-fit:cover; object-position:top center;
}
.phone--back .phone-screen{ aspect-ratio:375/812; }

.phone--sm{ width:180px; padding:6px; border-radius:30px; }
.phone--sm .phone-screen{ border-radius:24px; }
.phone--sm::after{ width:44px; height:3.5px; top:11px; }


/* ---------- 数据条 ---------- */
.stats{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  margin-top:8px;
}
.stats > div{ padding:26px 8px 30px; text-align:center; position:relative; }
.stats > div + div::before{
  content:""; position:absolute; left:0; top:34px; bottom:30px; width:1px; background:var(--line);
}
.stats dt{
  font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.stats dd{ font-size:13.5px; color:var(--muted); margin-top:4px; }

/* ---------- 场景跑马灯 ---------- */
.marquee-wrap{ position:relative; z-index:1; padding:22px 0 8px; }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track{
  display:flex; gap:12px; width:max-content;
  animation:slide 46s linear infinite;
}
.marquee-track span{
  display:inline-flex; align-items:center; height:38px; padding:0 16px;
  border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; color:var(--ink-2); background:#fff; white-space:nowrap;
}
.marquee-track span::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); margin-right:8px;
}
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- 区块通用 ---------- */
.section{ padding:96px 0; position:relative; }
.section--soft{ background:var(--soft); }
.section--dark{ background:#0D1320; color:#fff; }

.section-head{ max-width:720px; margin-bottom:52px; }
.section-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#9A7B00;
  background:var(--brand-soft); border-radius:999px; padding:5px 12px;
}
.section-head h2{
  margin-top:16px;
  font-size:clamp(28px,3.4vw,42px); line-height:1.28; letter-spacing:-.02em; font-weight:800;
}
.section-head h2 em{ font-style:normal; position:relative; white-space:nowrap; }
.section-head h2 em::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:2px; height:10px;
  background:var(--brand); border-radius:3px; z-index:-1; opacity:.85;
}
.section-head p{ margin-top:14px; font-size:16px; color:var(--ink-2); line-height:1.8; }
.section-head--light h2 em::after{ opacity:1; }
.section-head--light .eyebrow{ color:var(--brand); background:rgba(255,212,63,.12); }
.section-head--light p{ color:rgba(255,255,255,.68); }

/* ---------- Bento ---------- */
.bento{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:30px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-m); border-color:#DEE2E9; }
.card h3{
  font-size:21px; line-height:1.4; letter-spacing:-.01em; font-weight:750; margin-top:14px;
}
.card p{ margin-top:10px; font-size:14.5px; line-height:1.8; color:var(--ink-2); max-width:44ch; }
.card .tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:#8A6A00; background:var(--brand-soft); border-radius:8px; padding:3px 9px;
}
.mini-list{ margin-top:14px; display:grid; gap:6px; }
.mini-list li{
  position:relative; padding-left:18px; font-size:13.5px; color:var(--muted);
}
.mini-list li::before{
  content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:2px;
  background:var(--brand); transform:rotate(45deg);
}

.card--a{ grid-column:span 2; display:flex; gap:20px; align-items:flex-start; min-height:400px; }
.card--a .card-copy{ position:relative; z-index:2; max-width:54%; }
.card--a .card-shot{ position:absolute; right:26px; bottom:-104px; }
.card--a .card-shot .phone{ width:204px; padding:7px; border-radius:34px; }
.card--a .card-shot .phone-screen{ border-radius:26px; }

.card--b{ display:flex; flex-direction:column; min-height:400px; }
.card--b .card-shot--tall{ position:absolute; left:50%; transform:translateX(-50%); bottom:-138px; }
.card--b .card-shot--tall .phone{ width:152px; padding:5px; border-radius:26px; }
.card--b .card-shot--tall .phone-screen{ border-radius:21px; }
.card--b p{ max-width:100%; }

.phone--scroll .phone-screen{
  position:relative; overflow:hidden; aspect-ratio:375/812;
}
.phone--scroll img{ transition:transform 9s cubic-bezier(.4,0,.3,1); }

.card--wide{
  margin-top:18px;
  display:grid; grid-template-columns:1fr 268px; align-items:center; gap:24px;
  padding:34px 0 34px 34px;
}
.card--wide .card-copy{ max-width:100%; }
.card-shot--side{ display:flex; justify-content:center; align-items:center; padding-right:34px; }
.mini-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.mini-chips li{
  font-size:12.5px; color:var(--ink-2); background:var(--soft);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}
.card-shot--side .phone{ width:172px; }

/* 滑块模拟 */
.slider-mock{
  margin-top:20px; background:var(--soft); border-radius:18px; padding:18px 16px 14px;
  display:grid; gap:14px;
}
.slider-row{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.slider-row span{ width:30px; flex:0 0 auto; }
.slider-row em{ font-style:normal; font-size:11.5px; color:var(--ink); font-weight:700; width:38px; text-align:right; }
.track{
  position:relative; flex:1; height:4px; border-radius:99px; background:#E4E7EC;
}
.track b{
  position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--brand-deep);
}
.track u{
  position:absolute; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:#fff; border:2.5px solid var(--brand); box-shadow:0 2px 6px rgba(17,25,37,.14);
}
.swatches{ display:flex; gap:8px; padding-top:2px; }
.swatches i{ width:22px; height:22px; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(17,25,37,.08); }
.swatches i:first-child{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--brand-deep); }

/* 防伪模拟 */
.seal-mock{
  margin-top:22px; display:flex; align-items:center; gap:14px;
  background:var(--soft); border-radius:18px; padding:16px;
}
.seal-mark{
  width:58px; height:58px; border-radius:14px; flex:0 0 auto;
  background:#fff; border:1.5px solid var(--ink);
  display:grid; place-content:center; text-align:center; gap:1px;
}
.seal-mark span{ font-size:15px; font-weight:800; letter-spacing:.06em; }
.seal-mark small{ font-size:6.5px; letter-spacing:.16em; color:var(--muted); }
.seal-code{
  font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

/* 相册模拟 */
.album-mock{ position:relative; margin-top:22px; height:104px; }
.album-mock img{
  position:absolute; width:78px; height:98px; object-fit:cover; border-radius:12px;
  border:3px solid #fff; box-shadow:0 10px 24px -12px rgba(17,25,37,.5);
}
.album-mock img:nth-child(1){ left:6px; top:6px; transform:rotate(-6deg); }
.album-mock img:nth-child(2){ left:62px; top:0; transform:rotate(3deg); z-index:2; }
.album-badge{
  position:absolute; left:150px; top:34px; z-index:3;
  width:30px; height:30px; border-radius:50%; background:var(--brand);
  display:grid; place-content:center; font-size:10px; font-weight:800; color:var(--ink);
  box-shadow:0 8px 18px -8px rgba(255,198,26,.9);
}

/* ---------- 模板区（暗） ---------- */
.section--dark::before{
  content:""; position:absolute; inset:0 0 auto; height:420px; pointer-events:none;
  background:radial-gradient(760px 320px at 50% 0%, rgba(255,212,63,.16), transparent 70%);
}
.tpl-rows{ display:grid; gap:46px; min-width:0; }
.tpl-row{ position:relative; min-width:0; }
.tpl-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:18px;
}
.tpl-head h3{
  font-size:19px; font-weight:750; letter-spacing:-.01em; color:#fff;
  display:flex; align-items:baseline; gap:10px;
}
.tpl-head h3 span{
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.45);
  letter-spacing:0;
}
.tpl-head p{ margin-top:6px; font-size:13.5px; color:rgba(255,255,255,.45); }
.tpl-nav{ display:flex; gap:8px; flex:0 0 auto; }
.tpl-arrow{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-content:center;
  border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.8);
  transition:background .2s, border-color .2s, color .2s, opacity .2s;
}
.tpl-arrow svg{ width:16px; height:16px; stroke-width:2; }
.tpl-arrow:hover:not(:disabled){ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.32); color:#fff; }
.tpl-arrow:disabled{ opacity:.28; cursor:default; }

.tpl-track{
  display:flex; gap:16px; cursor:grab; max-width:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:2px 0 6px;
  -webkit-overflow-scrolling:touch;
}
.tpl-track::-webkit-scrollbar{ display:none; }
.tpl-track.is-drag{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.tpl{
  flex:0 0 288px; margin:0; position:relative;
  scroll-snap-align:start;
}
.tpl img{
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:16px;
  background:#151C29; display:block;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .38s var(--ease), box-shadow .38s var(--ease);
}
.tpl:hover img{
  transform:translateY(-4px);
  box-shadow:0 28px 56px -26px rgba(0,0,0,.9), 0 0 0 1px rgba(255,212,63,.45);
}
.tpl figcaption{
  margin-top:11px; padding:0 2px;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.85);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- 三步 ---------- */
.section-head--center + .steps{ margin-top:8px; }
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  position:relative;
}
.steps::before{
  content:""; position:absolute; top:34px; left:16.6%; right:16.6%; height:1px;
  background:repeating-linear-gradient(to right, var(--line) 0 7px, transparent 7px 15px);
}
.steps li{ position:relative; text-align:center; }
.step-no{
  display:grid; place-content:center;
  width:68px; height:68px; margin:0 auto 20px; border-radius:50%;
  background:var(--brand-soft); border:1px solid rgba(255,196,26,.45);
  font-size:17px; font-weight:800; letter-spacing:.02em; color:var(--ink);
  box-shadow:0 0 0 8px #fff, var(--sh-s);
  position:relative; z-index:1;
  font-variant-numeric:tabular-nums;
}
.steps h3{ font-size:18px; font-weight:750; }
.steps p{ margin-top:8px; font-size:14px; color:var(--ink-2); line-height:1.8; max-width:30ch; margin-inline:auto; }

/* ---------- 场景 Tabs ---------- */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }
.tab{
  height:42px; padding:0 20px; border-radius:999px; font-size:14.5px; font-weight:600;
  color:var(--ink-2); background:#fff; border:1px solid var(--line);
  transition:all .2s var(--ease);
}
.tab:hover{ border-color:#cfd4dc; }
.tab.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }

.scene-panels{ position:relative; }
.scene{
  display:none; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:44px; box-shadow:var(--sh-s);
}
.scene.is-on{ display:grid; animation:fadeUp .45s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.scene h3{ font-size:26px; letter-spacing:-.02em; font-weight:800; line-height:1.35; }
.scene p{ margin-top:12px; font-size:15px; color:var(--ink-2); line-height:1.85; }
.scene-list{ margin:20px 0 26px; display:grid; gap:9px; }
.scene-list li{
  position:relative; padding-left:24px; font-size:14.5px; color:var(--ink-2);
}
.scene-list li::before{
  content:""; position:absolute; left:2px; top:7px; width:12px; height:12px; border-radius:50%;
  background:var(--brand-soft); border:3px solid var(--brand);
}
.scene-media{
  position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3;
  box-shadow:var(--sh-m); background:#111925;
}
.scene-media img{
  width:100%; height:100%; object-fit:cover; object-position:bottom center;
}

/* ---------- 会员 ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.price{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:32px 28px; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.price:hover{ transform:translateY(-4px); box-shadow:var(--sh-m); }
.price--hot{ border-color:var(--brand-deep); box-shadow:0 24px 60px -34px rgba(255,198,26,.75); }
.price-badge{
  position:absolute; top:-11px; left:28px;
  background:var(--brand); color:var(--ink); font-size:11.5px; font-weight:800;
  padding:3px 10px; border-radius:999px; letter-spacing:.02em;
}
.price-badge--gold{ background:var(--ink); color:var(--brand); }
.price h3{ font-size:19px; font-weight:750; }
.price-sub{ font-size:13px; color:var(--muted); margin-top:4px; }
.price-num{
  margin-top:18px; font-size:44px; font-weight:800; letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:4px;
}
.price-num i{ font-style:normal; font-size:20px; font-weight:700; }
.price-num span{ font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0; }
.price-old{ margin-top:8px; font-size:12.5px; color:var(--muted); text-decoration:line-through; }
.price-list{ margin:20px 0 26px; display:grid; gap:9px; }
.price-list li{
  position:relative; padding-left:22px; font-size:14px; color:var(--ink-2);
}
.price-list li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  font-size:12px; font-weight:800; color:#C79A00;
}
.price .btn{ margin-top:auto; }
.perks{
  margin-top:20px; display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 18px;
}
.perk{ text-align:center; display:grid; gap:2px; }
.perk-ico{
  width:38px; height:38px; margin:0 auto 8px; border-radius:12px;
  display:grid; place-content:center; background:var(--brand-soft); color:#8A6A00;
}
.perk-ico svg{ width:20px; height:20px; }
.perk b{ font-size:14px; font-weight:700; }
.perk small{ font-size:11.5px; color:var(--muted); }
.price-note{ margin-top:18px; font-size:12.5px; color:var(--muted); text-align:center; }

/* ---------- FAQ ---------- */
.guide-grid{
  max-width:980px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.guide-card{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:20px 22px; text-decoration:none;
  transition:border-color .22s, box-shadow .22s, transform .22s var(--ease);
}
a.guide-card:hover{
  border-color:#DCE0E7; box-shadow:var(--sh-s); transform:translateY(-2px);
}
.guide-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:var(--brand-soft); color:#8A6A00;
  display:grid; place-content:center;
}
.guide-ico svg{
  width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.guide-main{ min-width:0; }
.guide-name{
  margin:0 0 6px; font-size:15.5px; font-weight:680; color:var(--ink);
  letter-spacing:-.01em; line-height:1.4;
}
.guide-path{ margin:0; font-size:13px; line-height:1.8; color:var(--muted); }
.guide-path i{ font-style:normal; color:#C2C7D0; margin:0 4px; }
.guide-go{
  display:inline-flex; align-items:center; gap:4px; margin-top:9px;
  font-size:12.5px; font-weight:650; color:var(--ink);
}
.guide-go svg{
  width:13px; height:13px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
@media (max-width:720px){
  .guide-grid{ grid-template-columns:1fr; gap:10px; }
  .guide-card{ padding:16px 18px; }
}

/* ---------- 下载 ---------- */
.dl{
  position:relative; overflow:hidden;
  background:#0D1320; color:#fff; border-radius:36px;
  padding:64px; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
}
.dl-glow{
  position:absolute; inset:-40% -10% auto auto; width:620px; height:620px;
  background:radial-gradient(circle, rgba(255,212,63,.34), rgba(255,212,63,0) 62%);
  pointer-events:none;
}
.dl-copy{ position:relative; }
.dl h2{ font-size:clamp(28px,3.2vw,40px); line-height:1.3; letter-spacing:-.02em; font-weight:800; }
.dl p{ margin-top:14px; font-size:15px; color:rgba(255,255,255,.68); }
.dl-actions{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.dl-tip{ font-size:12.5px !important; color:rgba(255,255,255,.42) !important; margin-top:16px !important; }
.dl-side{ position:relative; display:grid; justify-items:center; gap:16px; }
.dl-app{
  width:132px; height:132px; border-radius:30px; overflow:hidden;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1);
  transform:rotate(-4deg);
}
.dl-app img{ width:100%; height:100%; object-fit:cover; }
.dl-badge{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 14px; border-radius:999px;
  background:rgba(255,212,63,.14); border:1px solid rgba(255,212,63,.32);
  color:var(--brand); font-size:12.5px; font-weight:600; white-space:nowrap;
}
.dl-badge::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 3px rgba(255,212,63,.18);
}

/* ---------- 页脚 ---------- */
.footer{ border-top:1px solid var(--line); padding:58px 0 34px; background:#fff; }
.footer-top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px;
}
.footer-brand img{ height:26px; width:auto; }
.footer-brand p{ margin-top:14px; font-size:13.5px; color:var(--muted); line-height:1.9; }
.footer-col h4{ font-size:13px; font-weight:750; letter-spacing:.06em; color:var(--ink); margin-bottom:14px; }
.footer-col a{
  display:block; font-size:13.5px; color:var(--muted); padding:5px 0; transition:color .18s;
}
.footer-col a:hover{ color:var(--ink); }
.footer-plain{ font-size:13.5px; color:var(--muted); line-height:1.9; margin-bottom:8px; }
.footer-plain a{ color:var(--ink); display:inline; padding:0; }
.footer-legal{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line-2);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color:#9096A1;
}
.footer-legal a{ color:#9096A1; }
.footer-legal a:hover{ color:var(--ink-2); }
.footer-legal span{ margin:0 6px; }

/* ---------- 移动底栏 ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .32s var(--ease);
}
.mobile-bar.is-on{ transform:none; }
.mobile-bar b{ display:block; font-size:14px; }
.mobile-bar span{ display:block; font-size:11.5px; color:var(--muted); }

/* ---------- 弹窗 ---------- */
.modal{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
  padding:20px;
}
.modal.is-on{ opacity:1; visibility:visible; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(9,13,20,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.modal-card{
  position:relative; z-index:1; width:100%; max-width:420px;
  background:#fff; border-radius:28px; padding:34px 30px 26px; text-align:center;
  box-shadow:0 60px 120px -50px rgba(9,13,20,.7);
  transform:translateY(14px) scale(.98); transition:transform .3s var(--ease);
}
.modal.is-on .modal-card{ transform:none; }
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  display:grid; place-content:center; color:var(--muted); background:var(--soft);
  outline:none;
}
.modal-close:focus-visible{ box-shadow:0 0 0 3px rgba(255,212,63,.7); }
.modal-close svg{ width:15px; height:15px; stroke-width:2; }
.modal-logo{ width:64px; height:64px; margin:0 auto 14px; border-radius:16px; }
.modal-card h3{ font-size:20px; font-weight:800; letter-spacing:-.01em; }
.modal-sub{ margin-top:6px; font-size:13px; color:var(--muted); }
.modal-rows{ margin-top:22px; display:grid; gap:10px; }
.dl-row{
  display:flex; align-items:center; gap:12px; text-align:left;
  border:1px solid var(--line); border-radius:16px; padding:12px 14px;
  transition:border-color .2s, background .2s, transform .2s;
}
.dl-row:hover{ border-color:#cfd4dc; background:#FCFCFD; transform:translateY(-1px); }
.dl-ico{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto;
  display:grid; place-content:center; background:var(--soft);
  font-size:12px; font-weight:800; color:var(--ink);
}
.dl-ico svg{ width:19px; height:19px; stroke-width:1.7; color:var(--ink-2); }
.dl-row b{ display:block; font-size:14.5px; font-weight:700; }
.dl-row small{ display:block; font-size:11.5px; color:var(--muted); }
.dl-row .arr{ width:16px; height:16px; margin-left:auto; color:#B6BBC5; }
.modal-qr{
  margin-top:20px; display:flex; align-items:center; gap:14px; justify-content:center;
  padding-top:20px; border-top:1px dashed var(--line);
}
.modal-qr p{ font-size:12px; font-weight:700; text-align:left; }
.modal-qr small{ font-weight:500; color:var(--muted); font-size:11px; }
.modal-status{
  margin-top:18px; display:flex; align-items:flex-start; gap:10px; text-align:left;
  background:var(--soft); border-radius:14px; padding:12px 14px;
}
.dot-live{
  width:8px; height:8px; border-radius:50%; background:var(--brand-deep); flex:0 0 auto; margin-top:6px;
  box-shadow:0 0 0 4px rgba(255,212,63,.22);
}
.modal-status p{ font-size:12px; color:var(--ink-2); line-height:1.6; }
.modal-status small{ color:var(--muted); }
button.dl-row{ width:100%; font:inherit; text-align:left; background:none; }
.modal-note{ margin-top:16px; font-size:11.5px; color:var(--muted); }
.modal-note a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }

/* ---------- 入场动画 ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  .float-chip{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; gap:52px; }
  .hero-visual{ min-height:auto; transform:none; }
  .bento{ grid-template-columns:repeat(2,1fr); }
  .card--a{ grid-column:span 2; }
  .perks{ grid-template-columns:repeat(3,1fr); gap:22px 14px; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .scene{ padding:32px; gap:32px; }
  .tpl{ flex-basis:246px; }
}

@media (max-width:860px){
  .nav-links{
    position:absolute; top:70px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:8px 24px 18px;
    box-shadow:0 24px 40px -30px rgba(17,25,37,.5);
    display:none;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding:13px 0; border-bottom:1px solid var(--line-2); font-size:15.5px; }
  .nav-links a::after{ display:none; }
  .nav-toggle{ display:block; }
  .nav-actions .btn{ display:none; }

  .section{ padding:68px 0; }
  .hero{ padding-top:44px; }
  .hero-visual{ justify-content:center; padding-left:0; min-height:auto; }
  .phone{ width:236px; }
  .phone--back{ width:176px; margin-right:-48px; transform:translateY(14px) rotate(-7deg); }

  .bento{ grid-template-columns:1fr; gap:14px; }
  /* 移动端改为文档流内堆叠，靠负 margin 做出血，避免与正文重叠 */
  .card--a{ grid-column:span 1; display:block; min-height:0; padding-bottom:0; }
  .card--a .card-copy{ max-width:100%; }
  .card--a .card-shot{
    position:static; transform:none; right:auto; bottom:auto;
    display:flex; justify-content:center; margin:22px 0 -70px;
  }
  .card--a .card-shot .phone{ width:178px; }
  .card--b{ min-height:0; padding-bottom:0; }
  .card--b .card-shot--tall{
    position:static; transform:none; left:auto; bottom:auto;
    display:flex; justify-content:center; margin:22px 0 -96px;
  }
  .card--b .card-shot--tall .phone{ width:150px; }
  .card--wide{ grid-template-columns:1fr; padding:26px 26px 0; gap:10px; }
  .card-shot--side{ padding:0; margin-bottom:-10px; }

  .steps{ grid-template-columns:1fr; gap:26px; }
  .steps::before{ display:none; }
  .steps li{ text-align:left; display:grid; grid-template-columns:68px 1fr; gap:0 18px; align-items:center; }
  .step-no{ margin:0; grid-row:span 2; }
  .steps p{ margin-inline:0; max-width:100%; }

  .scene{ grid-template-columns:1fr; padding:26px; }
  .scene-media{ aspect-ratio:4/3; }

  .price-grid{ grid-template-columns:1fr; }
  .dl{ grid-template-columns:1fr; padding:40px 28px; text-align:left; gap:28px; }
  .dl-side{ justify-items:start; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:26px; }
  .mobile-bar{ display:flex; }
  body{ padding-bottom:72px; }
  .footer-legal{ flex-direction:column; gap:6px; }
}

@media (max-width:560px){
  .container{ padding:0 18px; }
  .hero h1{ font-size:34px; }
  .lede{ font-size:15.5px; }
  .btn--lg{ height:50px; padding:0 22px; font-size:15px; }
  .hero-cta{ gap:10px; }
  .hero-cta .btn{ flex:1 1 auto; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats > div:nth-child(3)::before{ display:none; }
  .stats > div{ padding:18px 6px 22px; }
  .stats > div + div::before{ top:22px; bottom:22px; }
  .tpl{ flex-basis:74vw; }
  .tpl-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .tpl-nav{ display:none; }
  .tpl-rows{ gap:34px; }
  .card{ padding:24px; border-radius:24px; }
  .card h3{ font-size:19px; }
  .card--a .card-shot .phone{ width:162px; }
  .card--b .card-shot--tall .phone{ width:138px; }
  .perks{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; }
  .modal-card{ padding:28px 20px 22px; }
  .scene h3{ font-size:22px; }
  .phone--back{ display:none; }
}