/* ============================================================
   满分计划官网 — 主题色取自 logo（珊瑚红 #E8503A / 奶白 #F7EFE6）
   ============================================================ */
:root{
  --red:#E8503A;
  --red-dark:#C93A26;
  --red-soft:#FDEDEA;
  --cream:#F8F1E9;
  --paper:#FDFAF6;
  --ink:#271F1B;
  --ink-2:#4A403A;
  --muted:#8A7F77;
  --line:#EBE3DA;
  --radius:14px;
  --shadow:0 30px 80px -28px rgba(39,31,27,.28), 0 6px 20px rgba(39,31,27,.06);
  --stage-unit:95vh;
  --nav-h:60px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--red-dark);text-decoration:none}
ul{list-style:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- 导航 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(253,250,246,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:12px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink)}
.brand img{width:30px;height:30px;border-radius:7px}
.brand small{font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.nav-links{margin-left:auto;display:flex;gap:26px;font-size:15px}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover{color:var(--red-dark)}

/* 微信提示条 */
.wxbar{display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;background:var(--red);color:#fff;text-align:center;font-size:14px;padding:9px 16px}
.wxbar.show{display:block}

/* ---------- Hero ---------- */
.hero{
  min-height:92vh;display:flex;align-items:center;padding-top:calc(var(--nav-h) + 34px);
  background:radial-gradient(1000px 500px at 82% -10%, rgba(232,80,58,.09), transparent 60%), var(--paper);
}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--red-dark);border:1px solid rgba(232,80,58,.35);border-radius:999px;padding:6px 14px;background:var(--red-soft)}
h1.title{font-size:clamp(52px,9vw,88px);font-weight:900;letter-spacing:.01em;margin:20px 0 8px;line-height:1.08}
.subtitle{font-size:clamp(18px,2.6vw,24px);color:var(--ink-2);font-weight:600}
.badge{margin-top:14px;display:inline-block;font-size:14px;font-weight:700;color:var(--red-dark);background:var(--red-soft);border-radius:8px;padding:6px 12px}
.lead{margin-top:16px;font-size:16px;color:var(--muted)}
.trust-line{margin-top:8px;font-size:14px;color:var(--red-dark);font-weight:600}
.dl{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:13px 26px;font-size:16px;font-weight:700;border:1.5px solid var(--ink);color:var(--ink);background:#fff;transition:transform .18s,box-shadow .18s,background .18s;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 12px 30px -10px rgba(232,80,58,.55)}
.btn.primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.ver{margin-top:12px;font-size:13px;color:var(--muted)}

/* ---------- 开场断言 ---------- */
.assert{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:58px 0;text-align:center}
.assert h2{font-size:clamp(23px,3.6vw,36px);font-weight:800;line-height:1.35}
.assert .but{margin-top:14px;font-size:clamp(17px,2.4vw,21px);color:var(--ink-2)}
.assert .fix{margin-top:18px;font-size:15px;color:var(--muted)}
.assert .fix a{font-weight:700;color:var(--red-dark);border-bottom:2px solid var(--red)}

/* ---------- 区块通用 ---------- */
section.feat,section.steps,section.sync,section.pricing{padding:92px 0 30px}
.sec-head{max-width:730px;margin-bottom:30px}
.tag{font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--red-dark)}
.feat h2,section h2.big{font-size:clamp(26px,4vw,38px);font-weight:800;line-height:1.3;margin:10px 0 12px}
.sub{font-size:17px;color:var(--ink-2)}
.sub .note{font-size:13px;color:var(--muted)}
.points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 22px;margin-top:28px}
.points li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14.5px;color:var(--ink-2)}
.points b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px}

/* ---------- 运镜窗口（自主循环运镜，不占滚动行程、不响应滚轮） ---------- */
.stage{margin:6px 0 10px}
.stage .holder{max-width:1020px;margin:0 auto}
.win{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.win img{width:100%;height:auto;transform-origin:50% 50%;will-change:transform}

/* ---------- 三步：左侧小手机 + 右侧上下两张 16:9 电脑窗口 ---------- */
.step-duo{display:grid;grid-template-columns:auto 1fr;gap:36px;margin-top:34px;align-items:start}
.step-col{display:flex;flex-direction:column;gap:14px}
.step-col:first-child{align-items:center;max-width:250px;gap:16px}
.step-col:first-child .phone-frame{width:106px}
.step-col:first-child .step-label{flex-direction:column;gap:8px;align-items:center;text-align:center}
.step-label{display:flex;gap:12px;align-items:flex-start}
.step-label .num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.step-col:first-child .step-label .num{margin-top:0}
.step-label h3{font-size:19px;margin-bottom:2px}
.step-label p{font-size:14.5px;color:var(--ink-2)}
.step-item .visual{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 10px 30px -18px rgba(39,31,27,.35)}
.step-item .visual img{width:100%;height:auto}

/* 手机截图黑框（圆弧角，模拟手机） */
.phone-frame{display:inline-block;background:#17120F;border-radius:32px;padding:7px;box-shadow:var(--shadow)}
.phone-frame img{width:100%;height:auto;border-radius:25px;display:block}
.step .phone-frame{width:122px;margin:16px auto 0}
.sync-visual .phone-frame{width:164px}

/* 手机示意（CSS 画，备用） */
.phone{width:150px;height:272px;border:3px solid var(--ink);border-radius:26px;margin:0 auto;position:relative;background:#fff;box-shadow:var(--shadow)}
.phone .cam{position:absolute;top:16px;left:13px;right:13px;bottom:64px;border:2px dashed #D8CEC4;border-radius:10px;background:var(--cream)}
.phone .cam::before{content:'';position:absolute;left:9px;bottom:9px;width:12px;height:12px;border-left:2px solid var(--muted);border-bottom:2px solid var(--muted)}
.phone .cam::after{content:'';position:absolute;right:9px;top:9px;width:12px;height:12px;border-right:2px solid var(--muted);border-top:2px solid var(--muted)}
.phone .mode{position:absolute;top:24px;left:0;right:0;text-align:center;font-size:11px;color:var(--red-dark);font-weight:700}
.phone .shutter{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;background:var(--red);border:4px solid #fff;box-shadow:0 0 0 2px var(--red)}

/* ---------- 双端协同 ---------- */
.sync{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sync-visual{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);margin:44px 0 8px}
.sync-visual .phone-frame{width:112px;flex:0 0 auto}
.sync-visual .mini-win{width:min(860px,78vw);border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.sync-visual .mini-win img{width:100%;height:auto}
.flowline{flex:0 0 clamp(30px,5vw,84px);height:2px;background:repeating-linear-gradient(90deg,var(--red) 0 8px,transparent 8px 16px);position:relative}
.flowline::after{content:'';position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--red);animation:flow 2.2s linear infinite}
@keyframes flow{to{left:calc(100% - 8px)}}
@media(max-width:720px){
  .sync-visual{flex-direction:column;gap:20px}
  .sync-visual .phone-frame{width:120px}
  .flowline{width:2px;height:48px;flex-basis:auto;background:repeating-linear-gradient(180deg,var(--red) 0 8px,transparent 8px 16px)}
  .flowline::after{animation:none}
}

/* ---------- 生理（纯文字） ---------- */
.vitals{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vitals .sec-head{max-width:820px}

/* ---------- 定价 ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;text-align:center}
.plan .name{font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--red-dark)}
.plan h3{font-size:26px;font-weight:900;margin:6px 0 2px}
.plan .cn{font-size:14px;color:var(--muted)}
.plan .price{margin:18px 0;font-size:15px;color:var(--muted);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:12px 0}
.plan ul{text-align:left;font-size:14.5px;color:var(--ink-2)}
.plan ul li{padding:7px 0 7px 20px;position:relative}
.plan ul li::before{content:'';position:absolute;left:0;top:15px;width:8px;height:8px;border-radius:50%;background:var(--red)}

/* ---------- 下载区 ---------- */
.download{background:var(--cream);border-top:1px solid var(--line);padding:92px 0 70px}
.dl-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:40px;align-items:start;margin-top:32px}
.platform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:18px}
.platform h3{font-size:19px}
.platform .meta{font-size:13.5px;color:var(--muted);margin:4px 0 14px}
.tips{display:grid;gap:8px;margin-top:26px}
.tips li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--ink-2)}
.qrbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.qrbox .qr{display:inline-block;padding:12px;border:1px solid var(--line);border-radius:10px;min-height:120px;min-width:120px}
.qrbox .qr svg,.qrbox .qr img{display:block}
.qrbox p{font-size:13px;color:var(--muted);margin-top:10px}
.changelog{margin-top:44px}
.changelog h3{font-size:16px;margin-bottom:12px}
.changelog li{font-size:14px;color:var(--ink-2);border-left:3px solid var(--red);padding:5px 0 5px 14px;margin-bottom:8px}
.changelog time{color:var(--muted);margin-right:10px;font-size:13px}

/* ---------- 页脚 ---------- */
footer{background:var(--ink);color:#CFC6BF;padding:38px 0;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center}
footer .brand{color:#fff;font-size:16px}
footer .slogan{color:#9C918A}
footer nav{margin-left:auto;display:flex;gap:20px}
footer a{color:#CFC6BF}
footer a:hover{color:#fff}

/* ---------- 子页（教程/隐私） ---------- */
.page{padding:calc(var(--nav-h) + 60px) 0 80px}
.page h1{font-size:clamp(30px,5vw,44px);font-weight:900;margin-bottom:14px}
.gstep{display:grid;grid-template-columns:56px 1fr;gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:18px;max-width:720px}
.gstep .num{width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center}
.gstep h2{font-size:20px;margin-bottom:6px}
.gstep p{color:var(--ink-2);font-size:15px}
.privacy-line{font-size:clamp(22px,4vw,34px);font-weight:800;line-height:1.5;max-width:760px}

/* ---------- 入场动画 ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media(max-width:820px){
  .step-duo{grid-template-columns:1fr}
  .step-col:first-child{align-items:center;max-width:none}
  .price-grid{grid-template-columns:1fr}
  .price-grid{max-width:420px;margin-left:auto;margin-right:auto}
  .dl-grid{grid-template-columns:1fr}
  .points{grid-template-columns:1fr}
}
@media(max-width:720px){
  .hero{min-height:auto;padding-bottom:40px}
  .brand small{display:none}
  .nav-links{gap:16px;font-size:14px}
  .sync-visual{flex-direction:column}
  .flowline{width:2px;height:60px;flex-basis:auto;background:repeating-linear-gradient(180deg,var(--red) 0 8px,transparent 8px 16px)}
  .flowline::after{animation:none}
}

/* （2026-09-20 站长定稿：不做 prefers-reduced-motion 降级，运镜全环境开启） */