@charset "utf-8";
/* ===== 漫蛙3 内容专题站 · 全站共享样式 ===== */
:root{
  --ink:#1b1f2a;
  --ink-2:#39405a;
  --ink-3:#6c7490;
  --line:#e5e6f2;
  --bg:#f4f5ff;
  --white:#fff;
  --brand:#4a54dc;
  --brand-2:#232a7a;
  --brand-3:#6674ff;
  --sun:#ffce3a;
  --coral:#f0502c;
  --teal:#1d9e8e;
  --grad:linear-gradient(135deg,#6674ff,#4a54dc 52%,#232a7a);
  --grad-cta:linear-gradient(135deg,#ffd75e,#f7b712);
  --shadow:0 18px 44px rgba(35,42,122,.10);
  --shadow-sm:0 6px 18px rgba(35,42,122,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,blockquote,dl,dd,dt{margin:0;padding:0}
figure,figcaption{margin:0;padding:0}
ul,ol{list-style:none}
body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
  font-size:16px;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- 头部 ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;min-height:70px;gap:18px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:44px;height:44px;border-radius:13px;box-shadow:0 4px 12px rgba(74,84,220,.28)}
.brand-name{display:flex;flex-direction:column;line-height:1.25}
.brand-name b{font-size:20px;letter-spacing:.5px;color:var(--brand-2)}
.brand-name .sub{font-size:11.5px;color:var(--ink-3);letter-spacing:.4px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{display:inline-block;padding:8px 13px;border-radius:10px;font-size:15px;color:var(--ink-2);white-space:nowrap}
.nav a:hover{background:#eef0ff;color:var(--brand-2)}
.nav a.is-active{color:var(--brand-2);font-weight:700;background:#eceeff}
.nav .header-cta{
  margin-left:8px;padding:9px 20px;border-radius:24px;font-weight:700;font-size:15px;
  color:var(--brand-2)!important;background:var(--grad-cta);
  box-shadow:0 6px 16px rgba(247,183,18,.34);
}
.nav .header-cta:hover{filter:brightness(1.04)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;border-radius:30px;font-size:16.5px;font-weight:700;
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn-primary{color:var(--brand-2);background:var(--grad-cta);box-shadow:0 12px 28px rgba(247,183,18,.36)}
.btn-primary:hover{color:var(--brand-2);transform:translateY(-2px);box-shadow:0 16px 34px rgba(247,183,18,.44)}
.btn-ghost{color:var(--brand-2);background:#fff;border:1px solid #d9dcf6}
.btn-ghost:hover{background:#f1f2ff}
.btn-sm{padding:10px 22px;font-size:15px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 420px at 12% -10%,rgba(102,116,255,.20),transparent 62%),
  radial-gradient(700px 380px at 92% 6%,rgba(255,206,58,.26),transparent 60%),
  linear-gradient(180deg,#f7f8ff,#f1f2ff);}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--line)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:70px}
.hero-grid>*{min-width:0}
.badge{display:inline-block;padding:6px 15px;border-radius:20px;background:#fff;border:1px solid #dde0f8;
  font-size:13.5px;color:var(--brand);letter-spacing:.4px;box-shadow:var(--shadow-sm)}
.hero h1{font-size:44px;line-height:1.28;margin:18px 0 16px;letter-spacing:1px;color:var(--brand-2)}
.hero h1 em{font-style:normal;background:linear-gradient(180deg,transparent 66%,rgba(255,206,58,.72) 66%)}
.lead{font-size:17.5px;color:var(--ink-2);max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 22px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14.5px;color:var(--ink-3)}
.hero-meta li{display:flex;align-items:center;gap:7px}
.hero-meta li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sun)}
.hero-visual{display:flex;gap:18px;justify-content:flex-end;align-items:flex-end}
.phone-stage .phone{width:206px;flex-shrink:0}
.phone-stage .phone.small{width:142px;flex-shrink:0}
.phone{
  background:#141830;border-radius:26px;padding:7px;
  box-shadow:0 24px 50px rgba(27,31,42,.24),0 0 0 1px rgba(255,255,255,.5) inset;
}
.phone .screen{border-radius:20px;overflow:hidden;background:#fff}
.phone .screen img{width:100%;height:auto}
.phone.small{border-radius:22px;padding:6px}
.phone.small .screen{border-radius:17px}

/* ---------- 通用区块 ---------- */
.section{padding:74px 0}
.section.alt{background:#fff}
.sec-head{text-align:center;max-width:760px;margin:0 auto 44px}
.sec-title{font-size:32px;line-height:1.35;color:var(--brand-2);letter-spacing:.5px}
.sec-title span{color:var(--coral)}
.sec-sub{margin-top:14px;font-size:16px;color:var(--ink-3)}

/* 数据条 */
.stats{background:var(--grad);color:#fff;padding:34px 0}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat b{display:block;font-size:31px;line-height:1.2;color:var(--sun);letter-spacing:.5px}
.stat span{font-size:14.5px;opacity:.9}

/* 卡片 */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:#eef0ff;color:var(--brand);margin-bottom:16px}
.card-ico svg{width:24px;height:24px;display:block}
.card h3{font-size:19px;color:var(--ink);margin-bottom:9px}
.card p{font-size:15px;color:var(--ink-3)}

/* 截图墙 */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.shot{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.shot img{width:100%;height:auto}
.shot figcaption{padding:12px 14px 14px;font-size:13.5px;color:var(--ink-3);text-align:center;border-top:1px solid var(--line)}
.shot figcaption b{display:block;color:var(--ink-2);font-size:14.5px;margin-bottom:3px}

/* 入口卡 */
.entries{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.entry{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.entry:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--brand-2)}
.entry .tag{display:inline-block;font-size:12.5px;padding:3px 11px;border-radius:12px;background:#eef0ff;color:var(--brand);margin-bottom:13px}
.entry h3{font-size:18.5px;color:var(--ink);margin-bottom:8px}
.entry p{font-size:14.5px;color:var(--ink-3)}
.entry .more{display:inline-block;margin-top:14px;font-size:14.5px;color:var(--brand);font-weight:700}

/* 评价 */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-sm)}
.stars{color:var(--sun);letter-spacing:2px;font-size:15px;margin-bottom:12px}
.review p{font-size:15px;color:var(--ink-2)}
.who{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.who b{display:block;font-size:14.5px;color:var(--ink)}
.who span{font-size:12.5px;color:var(--ink-3)}

/* FAQ 速览 */
.faq-mini{max-width:900px;margin:0 auto}
.faq-mini details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:13px;overflow:hidden}
.faq-mini summary{cursor:pointer;padding:17px 22px;font-size:16px;font-weight:700;color:var(--ink-2);list-style:none;position:relative;padding-right:52px}
.faq-mini summary::-webkit-details-marker{display:none}
.faq-mini summary::after{content:"+";position:absolute;right:22px;top:14px;font-size:21px;color:var(--brand);font-weight:400}
.faq-mini details[open] summary::after{content:"−"}
.faq-mini details[open] summary{color:var(--brand-2);border-bottom:1px solid var(--line)}
.faq-mini .ans{padding:16px 22px 20px;font-size:15px;color:var(--ink-3)}
.faq-mini .ans a{font-weight:700}

/* 下载条 */
.cta-band{
  border-radius:22px;padding:46px 34px;text-align:center;color:#fff;
  background:var(--grad);box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.cta-band::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;
  background:rgba(255,206,58,.20);right:-90px;top:-120px}
.cta-band h2{font-size:29px;margin-bottom:12px;position:relative}
.cta-band p{font-size:16px;opacity:.92;margin-bottom:26px;position:relative}
.cta-band .btn{position:relative}

/* 页脚 */
.site-footer{background:#191d33;color:#b9bed6;padding:56px 0 30px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.10)}
.footer-col h4{color:#fff;font-size:16px;margin-bottom:16px}
.footer-col p{font-size:14px;line-height:1.85}
.footer-col a{display:block;font-size:14px;color:#b9bed6;padding:5px 0}
.footer-col a:hover{color:var(--sun)}
.footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.footer-brand img{width:40px;height:40px;border-radius:12px}
.footer-brand b{color:#fff;font-size:19px;letter-spacing:.5px}
.disclaimer{margin-top:24px;padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.05);
  font-size:13.5px;line-height:1.85;color:#a6abc4}
.copyright{margin-top:20px;text-align:center;font-size:13.5px;color:#8d93ae}
.copyright a{color:#b9bed6}

/* ---------- 内页 ---------- */
.page-hero{background:
  radial-gradient(700px 300px at 10% 0%,rgba(102,116,255,.18),transparent 60%),
  linear-gradient(180deg,#f7f8ff,#eef0ff);
  padding:52px 0 48px;border-bottom:1px solid var(--line)}
.crumb{font-size:14px;color:var(--ink-3);margin-bottom:14px}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand)}
.page-hero h1{font-size:36px;line-height:1.34;color:var(--brand-2);letter-spacing:.5px;max-width:900px}
.page-hero .desc{margin-top:16px;font-size:17px;color:var(--ink-2);max-width:880px}
.page-hero .meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 20px;font-size:14px;color:var(--ink-3)}

.prose{max-width:900px;min-width:0;margin:0 auto}
.prose h2{font-size:25px;color:var(--brand-2);margin:44px 0 16px;padding-left:15px;border-left:5px solid var(--sun);line-height:1.45}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19.5px;color:var(--ink);margin:28px 0 10px}
.prose p{font-size:16.5px;color:var(--ink-2);margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 0}
.prose ul li{position:relative;padding-left:22px;font-size:16.5px;color:var(--ink-2);margin-bottom:10px}
.prose ul li::before{content:"";position:absolute;left:4px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--brand-3)}
.prose ol{counter-reset:li}
.prose ol li{position:relative;padding-left:38px;font-size:16.5px;color:var(--ink-2);margin-bottom:12px;counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:3px;width:25px;height:25px;border-radius:8px;
  background:#eef0ff;color:var(--brand);font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.prose strong{color:var(--ink)}
.prose .shot{margin:28px auto;max-width:368px}
.prose .shot img{width:100%;height:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm)}
.prose .shot figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-3);text-align:center}

.tip{background:#fff8e6;border:1px solid #ffe6a8;border-left:5px solid var(--sun);border-radius:10px;padding:16px 20px;font-size:15.5px;color:#7a5a10;margin:22px 0}
.note{background:#eef7f5;border:1px solid #c9e8e2;border-left:5px solid var(--teal);border-radius:10px;padding:16px 20px;font-size:15.5px;color:#136a60;margin:22px 0}

.steps{counter-reset:st;margin:26px 0 10px}
.step{position:relative;padding:0 0 26px 62px;counter-increment:st}
.step:last-child{padding-bottom:0}
.step::before{content:counter(st);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:13px;
  background:var(--grad);color:#fff;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(74,84,220,.26)}
.step::after{content:"";position:absolute;left:20px;top:48px;bottom:6px;width:2px;background:var(--line)}
.step:last-child::after{display:none}
.step h3{margin:6px 0 8px;font-size:19px;color:var(--ink)}
.step p{font-size:16px;color:var(--ink-2);margin-bottom:8px}
.step .do{font-size:14.5px;color:var(--brand)}

.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:22px 0;background:#fff}
.table-scroll .cmp{border:0;border-radius:0}
.cmp{width:100%;min-width:680px;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp th{background:#f2f3ff;color:var(--brand-2);font-size:15px;white-space:nowrap}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}

.quote{border-left:5px solid var(--brand-3);background:#fff;border-radius:0 12px 12px 0;padding:18px 22px;margin:22px 0;font-size:16.5px;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.quote b{color:var(--brand-2)}

/* ---------- 渐显（仅首页启用） ---------- */
.reveal{transition:opacity .55s ease,transform .55s ease}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.reveal{opacity:1!important;transform:none!important;transition:none!important}
}
@media print{
  .js .reveal,.reveal{opacity:1!important;transform:none!important}
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:36px;padding-top:48px}
  .hero-visual{justify-content:flex-start}
  .hero h1{font-size:38px}
  .cards,.reviews{grid-template-columns:repeat(2,1fr)}
  .entries{grid-template-columns:repeat(2,1fr)}
  .shots{grid-template-columns:repeat(2,1fr)}
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:26px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .page-hero h1{font-size:30px}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .header-inner{flex-wrap:wrap;min-height:0;padding-top:10px;padding-bottom:10px;gap:8px}
  .brand{width:100%}
  .brand img{width:38px;height:38px}
  .brand-name b{font-size:18px}
  .brand-name .sub{display:none}
  .nav{width:100%;margin-left:0;flex-wrap:wrap;justify-content:space-between;gap:0}
  .nav a{flex:0 0 33.3333%;text-align:center;padding:7px 0;font-size:14px;white-space:nowrap}
  .nav .header-cta{display:none}
  .hero-grid{padding-top:36px;padding-bottom:48px}
  .hero h1{font-size:30px}
  .lead{font-size:16px}
  .hero-cta{gap:11px;margin:22px 0 18px}
  .btn{padding:12px 24px;font-size:15.5px;flex:1 1 auto}
  .hero-visual{order:2;flex-wrap:wrap;justify-content:center;gap:12px}
  .phone-stage .phone{width:44vw;max-width:196px}
  .phone-stage .phone.small{width:30vw;max-width:132px}
  .section{padding:52px 0}
  .sec-title{font-size:25px}
  .sec-head{margin-bottom:32px}
  .cards,.reviews,.entries,.shots{grid-template-columns:1fr}
  .shots{gap:18px}
  .stats-inner{grid-template-columns:1fr 1fr;gap:20px}
  .stat b{font-size:25px}
  .cta-band{padding:34px 20px}
  .cta-band h2{font-size:23px}
  .footer-grid{grid-template-columns:1fr;gap:22px}
  .page-hero{padding:36px 0 34px}
  .page-hero h1{font-size:25px}
  .page-hero .desc{font-size:15.5px}
  .prose h2{font-size:21px}
  .prose p,.prose ul li,.prose ol li{font-size:16px}
  .step{padding-left:54px}
  .step::before{width:36px;height:36px;font-size:15.5px;border-radius:11px}
  .step::after{left:17px;top:42px}
}