/* 商家莱拍™ 官网主页样式（10-18 定稿）。
   克制做法：黑白灰为主、品牌蓝只在大标题区 / 趋势雷达 / 联系我们和按钮、靠底色分段、卡片无阴影大圆角、胶囊按钮。
   只给电脑用户看（手机、微信里打开根目录直接进系统，见 server/services/site-entry.js），不做手机适配。 */
:root {
  --brand:#2a63e3; --grad:linear-gradient(135deg,#3b81fe 0%,#2a63e3 50%,#1946c8 100%);
  --ink:#1d1d1f; --gray:#6e6e73; --soft:#86868b; --bg-gray:#f5f5f7; --line:#d2d2d7; --black:#000;
  --font:"PingFang SC","Microsoft YaHei","Heiti SC",sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.tm { font-size:.42em; font-weight:400; vertical-align:super; margin-left:1px; letter-spacing:0; }

/* 顶栏：细、半透明、毛玻璃 */
.nav { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.8); backdrop-filter:saturate(1.8) blur(20px); -webkit-backdrop-filter:saturate(1.8) blur(20px); border-bottom:1px solid rgba(0,0,0,.06); }
.nav .wrap { display:flex; align-items:center; height:48px; gap:10px; }
.nav img { width:26px; height:26px; border-radius:7px; }
.nav .bn { font-size:15px; font-weight:700; }
.nav .links { margin-left:auto; display:flex; gap:32px; font-size:13px; color:rgba(0,0,0,.72); }
.nav .links a:hover { color:var(--ink); }
.nav .cta { margin-left:28px; background:var(--brand); color:#fff; border-radius:980px; padding:5px 14px; font-size:12.5px; }

/* 胶囊按钮 */
.pill { display:inline-block; border-radius:980px; padding:12px 24px; font-size:17px; line-height:1.2; transition:opacity .2s; }
.pill:hover { opacity:.88; }
.pill.solid { background:var(--brand); color:#fff; }
.pill.line { border:1px solid var(--brand); color:var(--brand); padding:11px 23px; }
.pill.white { background:#fff; color:#1946c8; }
.pill.white-line { border:1px solid rgba(255,255,255,.85); color:#fff; padding:11px 23px; }

/* 通用段落：小标题 → 一句大话 → 灰色副标题 */
.band { padding:120px 0; }
.band.gray { background:var(--bg-gray); }
.band.dark { background:var(--grad); color:#fff; }
.eyebrow { font-size:21px; font-weight:700; margin:0; }
.big { font-size:52px; line-height:1.1; font-weight:700; margin:10px 0 0; letter-spacing:-.005em; }
.lede { font-size:21px; line-height:1.45; color:var(--gray); margin:18px 0 0; max-width:720px; }
.dark .lede { color:rgba(255,255,255,.85); }
.center { text-align:center; } .center .lede { margin-left:auto; margin-right:auto; }

/* 大标题区：全宽品牌渐变 + 水的动效（慢、淡，不抢字；系统「减少动画」时停） */
.hero { position:relative; overflow:hidden; background:var(--grad); color:#fff; text-align:center; padding:110px 24px 250px; }
.hero > *:not(.water) { position:relative; z-index:2; }
.water { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.caustic { position:absolute; inset:-30%; opacity:.35; mix-blend-mode:soft-light;
  background:
    radial-gradient(ellipse 18% 9% at 20% 30%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse 14% 7% at 70% 20%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(ellipse 20% 8% at 45% 60%, rgba(255,255,255,.4), transparent 70%),
    radial-gradient(ellipse 12% 6% at 85% 55%, rgba(255,255,255,.4), transparent 70%),
    radial-gradient(ellipse 16% 7% at 10% 75%, rgba(255,255,255,.35), transparent 70%);
  animation: caustic 14s ease-in-out infinite alternate; }
@keyframes caustic { 0% { transform: translate(0,0) rotate(0deg) scale(1); } 50% { transform: translate(4%,-3%) rotate(6deg) scale(1.08); } 100% { transform: translate(-3%,2%) rotate(-4deg) scale(1.02); } }
/* 三层波浪：一段正弦波按固定宽度横向重复（--tw=一个波长），每次正好平移一个波长，无缝循环；
   三层波长/速度/方向都不同，只靠深浅叠层次（浪尖描白线试过，线条感太重） */
.wave { position:absolute; left:0; bottom:-12px; width:calc(100% + var(--tw)); height:var(--h); background-repeat:repeat-x; background-size:var(--tw) 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cpath d='M0 84 C50 84 92 14 132 14 C172 14 214 82 280 96 C330 106 370 84 400 84 V160 H0Z' fill='%23ffffff'/%3E%3C/svg%3E");
  animation: wave var(--t) linear infinite, swell var(--s) ease-in-out infinite alternate; }
/* 海浪形：浪峰尖、浪谷平；四层由远到近 波长变短、速度变快、颜色变亮；每层还会上下涌 */
.wave.w1 { --tw:980px; --h:270px; --t:22s; --s:7s; opacity:.12; }
.wave.w2 { --tw:720px; --h:215px; --t:15s; --s:6s; opacity:.14; animation-direction:reverse, alternate; }
.wave.w3 { --tw:540px; --h:160px; --t:10s; --s:5s; opacity:.18; }
.wave.w4 { --tw:400px; --h:105px; --t:7s; --s:4s; opacity:.28; animation-direction:reverse, alternate; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tw))); } }
@keyframes swell { from { translate:0 0; } to { translate:0 12px; } }
.bubble { position:absolute; bottom:-20px; width:var(--s); height:var(--s); left:var(--x); border-radius:50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.75), rgba(255,255,255,.12) 60%, transparent 70%);
  border:1px solid rgba(255,255,255,.35); animation: rise var(--t) ease-in infinite; animation-delay:var(--d); opacity:0; }
@keyframes rise { 0% { transform: translate(0,0); opacity:0; } 10% { opacity:.8; } 50% { transform: translate(14px,-260px); } 90% { opacity:.5; } 100% { transform: translate(-8px,-560px); opacity:0; } }
.hero .eyebrow { font-size:19px; font-weight:400; opacity:.9; }
.hero h1 { font-size:104px; line-height:1.05; font-weight:700; margin:12px 0 0; letter-spacing:.02em; }
.hero h1 .tm { font-size:.26em; vertical-align:top; position:relative; top:.5em; margin-left:4px; }
.hero .slogan { font-size:40px; line-height:1.25; font-weight:700; margin:18px 0 0; }
.hero .lede { color:rgba(255,255,255,.85); font-size:22px; margin:16px auto 0; }
.hero .btns { margin-top:40px; display:flex; justify-content:center; gap:16px; }

/* 为什么用：四个痛点，粗体前半句+灰色后半句 */
.pains { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:72px; text-align:left; }
.pains p { margin:0; font-size:17px; line-height:1.6; color:var(--gray); border-top:1px solid var(--line); padding-top:20px; }
.pains b { color:var(--ink); font-weight:700; display:block; font-size:21px; margin-bottom:6px; }

/* 能做什么：横滑卡片 */
.rail { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-top:56px;
  padding:0 max(24px, calc((100% - 1080px) / 2 + 24px)); scroll-padding:0 max(24px, calc((100% - 1080px) / 2 + 24px)); }
.rail::-webkit-scrollbar { display:none; }
.fc { flex:0 0 340px; scroll-snap-align:start; background:#fff; border-radius:28px; padding:14px 14px 34px; min-height:420px; display:flex; flex-direction:column; position:relative; }
.fc .vis { height:220px; border-radius:20px; background:linear-gradient(160deg,#f2f6ff 0%,#e3ecff 100%); display:grid; place-items:center; }
.fc .ic { width:96px; height:96px; color:var(--brand); }
.fc .cap { padding:0 20px; }
.fc .badge { position:absolute; top:30px; left:30px; background:#fff; }
/* 特色功能：图标区用品牌蓝渐变，跟其它卡片拉开 */
.fc.star .vis { background:var(--grad); }
.fc.star .ic { color:#fff; }
.fc.star .badge { background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.7); }
.fc .ic svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fc .cap { margin-top:auto; font-size:19px; line-height:1.55; color:var(--gray); }
.fc .cap b { color:var(--ink); }
.fc .badge { font-size:12px; color:var(--brand); border:1px solid var(--brand); border-radius:980px; padding:2px 10px; }
.lede, .cap, .pains p, .st span, .card p { text-wrap:pretty; }
.rail-ctl { display:flex; justify-content:flex-end; gap:14px; margin-top:28px; }
.rail-ctl button { width:40px; height:40px; border-radius:50%; border:0; background:rgba(0,0,0,.08); color:var(--ink); font-size:18px; cursor:pointer; display:grid; place-items:center; }
.rail-ctl button:hover { background:rgba(0,0,0,.13); }
.rail-ctl button:disabled { opacity:.35; cursor:default; }

/* 趋势雷达亮点：纯线条雷达扫描 */
.radar-row { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.radar { position:relative; width:420px; height:420px; margin-left:auto; border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 69px, rgba(255,255,255,.14) 70px 71px, transparent 72px 139px, rgba(255,255,255,.14) 140px 141px, transparent 142px 208px, rgba(255,255,255,.18) 209px 210px, transparent 211px); }
.radar::before, .radar::after { content:""; position:absolute; background:rgba(255,255,255,.1); }
.radar::before { left:50%; top:0; bottom:0; width:1px; } .radar::after { top:50%; left:0; right:0; height:1px; }
.sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(255,255,255,.45), rgba(255,255,255,0) 70deg, transparent 360deg); animation: sweep 5s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.blip { --c:255,193,46;position:absolute; left:var(--x); top:var(--y); width:11px; height:11px; margin:-5.5px; border-radius:50%; background:rgb(var(--c)); box-shadow:0 0 10px 2px rgba(var(--c),.55); animation: blip 5s ease-out infinite; animation-delay:var(--d); opacity:.6; }  @keyframes blip { 0% { opacity:1; transform:scale(1.35); box-shadow:0 0 10px 2px rgba(var(--c),.6), 0 0 0 0 rgba(var(--c),.7); } 40% { opacity:.9; transform:scale(1); box-shadow:0 0 10px 2px rgba(var(--c),.55), 0 0 0 18px rgba(var(--c),0); } 100% { opacity:.6; } }

/* 怎么用：四步大数字 */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:72px; }
.st i { font-style:normal; font-size:56px; font-weight:300; color:var(--brand); line-height:1; }
.st b { display:block; font-size:21px; margin-top:18px; }
.st span { display:block; color:var(--gray); font-size:17px; line-height:1.55; margin-top:6px; }

/* 下载 */
.dl { display:grid; grid-template-columns:1.25fr 1fr; gap:20px; margin-top:64px; text-align:left; }
.card { background:#fff; border-radius:28px; padding:44px 40px; }
.card h3 { margin:0; font-size:28px; font-weight:700; } .card h3 small { font-size:14px; font-weight:400; color:var(--soft); margin-left:10px; }
.card p { color:var(--gray); font-size:17px; line-height:1.6; margin:12px 0 0; }
.card ul { list-style:none; padding:0; margin:22px 0 0; font-size:17px; line-height:2.1; }
.card li::before { content:"✓"; color:var(--brand); margin-right:10px; }
.card .pill { margin-top:30px; }
.card .sign { display:block; font-size:13px; color:var(--soft); margin-top:14px; }
.qr { width:148px; height:148px; border-radius:16px; background:#fff; display:grid; place-items:center; margin-top:26px; padding:10px; border:1px solid var(--line); }
.qr img, .qr canvas { width:100%; height:100%; display:block; }

/* 联系 */
.contact-row { display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:center; }
.contact dl { display:grid; grid-template-columns:72px 1fr; gap:14px 10px; margin:40px 0 0; font-size:17px; }
.contact dt { color:rgba(255,255,255,.7); } .contact dd { margin:0; }
.wx-pair { display:flex; justify-content:flex-end; gap:28px; }
.wx-pair figure { margin:0; text-align:center; }
.contact .qr { margin:0; border:0; width:168px; height:168px; }
.wx-pair figcaption { margin-top:14px; font-size:13px; color:rgba(255,255,255,.75); line-height:1.6; }
.wx-pair figcaption b { display:block; font-size:17px; color:#fff; }

/* 页脚：一行；/guide/ 有内容后再加「常见问题」栏 */
footer { background:var(--bg-gray); color:var(--gray); font-size:12px; line-height:1.4; padding:26px 0; }
.fbot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.fbot .r { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.fbot a { cursor:pointer; }
.fbot a:hover { color:var(--ink); text-decoration:underline; }
.fbot .sep { width:1px; height:11px; background:var(--line); }
.fbot .mps { display:inline-flex; align-items:center; gap:4px; }
.fbot .mps img { width:14px; height:15px; }

/* 往下滚时淡入 */
/* 只有脚本真跑起来（html 带 js 类）才先藏再淡入；不跑脚本的抓取程序直接看到全部内容 */
.js .rv { opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv.on { opacity:1; transform:none; }

/* 常见问题：点一下展开 */
.faq-wrap { max-width:860px; }
.faq { margin-top:56px; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 4px; font-size:21px; font-weight:700; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:28px; font-weight:300; color:var(--brand); transition:transform .25s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { margin:0; padding:0 4px 26px; font-size:17px; line-height:1.7; color:var(--gray); max-width:720px; }
@media (prefers-reduced-motion: reduce) {
  .caustic, .wave, .bubble, .sweep, .blip { animation:none; } .bubble { display:none; }
  .js .rv { opacity:1; transform:none; transition:none; }
}