/* roulang page: index */
:root{
  --primary:#1F4FD8;
  --primary-dark:#1740B8;
  --primary-soft:#E6EDFD;
  --primary-wash:#F4F7FE;
  --accent:#FF7A2F;
  --teal:#0E9F9F;
  --ink:#0F172A;
  --body:#334155;
  --mute:#64748B;
  --line:#E5E9F2;
  --surface:#F6F8FC;
  --radius-card:18px;
  --radius-sm:14px;
  --radius-btn:12px;
  --sh1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --sh2:0 8px 24px -8px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
  --sh3:0 24px 48px -16px rgba(31,79,216,.18);
  --ease:0.2s ease;
  --dock-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0;background:#fff;color:var(--body);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:16px;line-height:1.8;overflow-x:hidden;
}
img{max-width:100%;display:block;border-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
input{font:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:3px solid rgba(31,79,216,.18);outline-offset:2px;border-radius:8px}

/* 容器与区块 */
.container-page{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
@media (max-width:640px){.container-page{padding:0 20px}}
.section{padding:96px 0}
@media (max-width:1023px){.section{padding:76px 0}}
@media (max-width:767px){.section{padding:56px 0}}
section[id],div[id]{scroll-margin-top:96px}
.sec-head{max-width:760px;margin-bottom:48px}
@media (max-width:767px){.sec-head{margin-bottom:32px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--primary);background:var(--primary-soft);border-radius:999px;padding:6px 14px;font-weight:600}
.sec-title{font-size:clamp(24px,2.6vw,34px);line-height:1.25;font-weight:700;color:var(--ink);margin:16px 0 12px}
.sec-desc{font-size:16px;line-height:1.8;color:var(--mute);max-width:42em}

/* 顶部浮动 Dock */
.dock-wrap{position:fixed;top:16px;left:0;right:0;z-index:70;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.dock{
  pointer-events:auto;width:100%;max-width:1120px;height:var(--dock-h);
  display:flex;align-items:center;gap:18px;padding:0 16px 0 22px;
  background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh1);
  transition:height var(--ease),box-shadow var(--ease),background var(--ease);
}
.dock.scrolled{height:56px;box-shadow:var(--sh2);background:#fff}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;letter-spacing:.02em}
.brand-text{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.dock-nav{display:flex;align-items:center;gap:22px;margin-left:8px;flex:1 1 auto;justify-content:center}
.dock-nav a{position:relative;font-size:14px;color:var(--body);padding:8px 4px;white-space:nowrap;transition:color var(--ease)}
.dock-nav a:hover{color:var(--primary)}
.dock-nav a.is-active{color:var(--primary);font-weight:600;background:var(--primary-soft);border-radius:999px;padding:8px 14px}
.dock-nav a.is-active::after{content:"";position:absolute;left:50%;bottom:1px;width:5px;height:5px;border-radius:50%;background:var(--primary);transform:translateX(-50%)}
.dock-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.icon-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--body);border:1px solid transparent;transition:all var(--ease)}
.icon-btn:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--line)}
.burger{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;color:var(--ink);border:1px solid var(--line)}
.burger:hover{background:var(--primary-soft);color:var(--primary)}
@media (max-width:1023px){
  .dock-nav{display:none}
  .burger{display:flex}
  .dock{gap:10px;padding:0 12px 0 16px}
  .brand-text{font-size:15px}
}
@media (max-width:400px){.brand-text{font-size:14px;letter-spacing:0}}

/* 抽屉 */
.drawer-mask{position:fixed;inset:0;background:rgba(15,23,42,.42);opacity:0;visibility:hidden;transition:opacity var(--ease),visibility var(--ease);z-index:80}
.drawer-mask.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:320px;max-width:88vw;background:#fff;z-index:90;transform:translateX(102%);transition:transform .26s ease;display:flex;flex-direction:column;box-shadow:var(--sh3)}
.drawer.show{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-head span{font-weight:700;color:var(--ink);font-size:15px}
.drawer-nav{padding:12px 12px 0;display:flex;flex-direction:column}
.drawer-nav a{padding:14px 12px;border-radius:12px;font-size:15px;color:var(--body);min-height:44px;display:flex;align-items:center;transition:background var(--ease),color var(--ease)}
.drawer-nav a:hover,.drawer-nav a.is-active{background:var(--primary-soft);color:var(--primary);font-weight:600}
.drawer-cta{margin-top:auto;padding:20px}
.drawer-cta .btn{width:100%}

/* 按钮体系 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:13px 24px;border-radius:var(--radius-btn);font-size:15px;font-weight:600;border:1px solid transparent;transition:all var(--ease);cursor:pointer;text-align:center}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--sh1)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--sh2);color:#fff}
.btn-primary:active{transform:scale(.98)}
.btn-primary[disabled],.btn-primary.is-disabled{opacity:.45;transform:none;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-ghost:hover{background:var(--primary-soft)}
.btn-ghost:active{transform:scale(.98)}
.btn-link{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:15px;min-height:44px;padding:8px 0}
.btn-link svg{transition:transform var(--ease)}
.btn-link:hover svg{transform:translateX(3px)}
.btn-sm{padding:10px 18px;font-size:14px;min-height:44px}

/* 标签、徽章 */
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:600;letter-spacing:.02em}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--primary)}
.chip-accent{background:#FFF1E7;color:#C2540F}
.chip-teal{background:#E4F5F5;color:#0B7C7C}
.chip-line{background:#fff;border:1px solid var(--line);color:var(--mute)}

/* 卡片 */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh1);transition:transform var(--ease),box-shadow var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.card-pad{padding:24px}
.card-pad-sm{padding:20px}

/* Hero */
.hero{padding:132px 0 88px;background:
  radial-gradient(680px 320px at 88% 6%, rgba(31,79,216,.06), transparent 70%),
  linear-gradient(180deg,#FFFFFF 0%, #F8FAFF 100%);
  border-bottom:1px solid var(--line)}
@media (max-width:1023px){.hero{padding:112px 0 64px}}
@media (max-width:767px){.hero{padding:96px 0 48px}}
.hero h1{font-size:clamp(30px,4.2vw,52px);line-height:1.15;font-weight:800;color:var(--ink);margin:20px 0 16px;letter-spacing:-.01em}
.hero-lead{font-size:17px;line-height:1.8;color:var(--mute);max-width:34em}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px}
.hero-points li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--body)}
.hero-points svg{flex:0 0 auto;color:var(--primary)}
.hero-visual{position:relative}
.hero-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-card);border:1px solid var(--line);box-shadow:var(--sh3)}
.hero-badge{position:absolute;left:-14px;bottom:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--sh2);padding:12px 16px;display:flex;align-items:center;gap:10px}
.hero-badge strong{font-size:22px;font-weight:800;color:var(--primary);line-height:1}
.hero-badge span{font-size:12px;color:var(--mute);line-height:1.4}
@media (max-width:520px){.hero-badge{left:8px;bottom:8px;padding:10px 14px}}

/* 信任标签条 */
.trust-bar{background:#fff;border-bottom:1px solid var(--line)}
.trust-inner{display:flex;flex-wrap:wrap;gap:12px;padding:20px 0;align-items:center}
.trust-inner .chip{height:30px;padding:0 14px;font-size:13px}

/* 卖点交错栅格 */
.feature-row{display:grid;grid-template-columns:repeat(12,1fr);gap:40px;align-items:center;margin-bottom:64px}
.feature-row:last-child{margin-bottom:0}
.f-media{grid-column:span 7}
.f-copy{grid-column:span 5}
.feature-row.reverse .f-media{grid-column:span 7;order:2}
.feature-row.reverse .f-copy{grid-column:span 5;order:1}
.f-media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-card);border:1px solid var(--line);box-shadow:var(--sh1)}
.f-copy h3{font-size:22px;font-weight:600;color:var(--ink);line-height:1.4;margin:14px 0 12px}
.f-copy p{color:var(--mute);font-size:15.5px;line-height:1.85}
.f-list{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.f-list li{display:flex;gap:10px;font-size:14.5px;color:var(--body)}
.f-list li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-top:10px}
@media (max-width:1023px){
  .f-media,.f-copy,.feature-row.reverse .f-media,.feature-row.reverse .f-copy{grid-column:span 12;order:0}
  .feature-row{gap:24px;margin-bottom:48px}
}

/* 演示 Tab */
.demo-wrap{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:inline-flex;gap:6px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh1);flex-wrap:wrap}
.tab-btn{padding:10px 20px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--mute);transition:all var(--ease);min-height:44px}
.tab-btn:hover{color:var(--primary)}
.tab-btn.is-active{background:var(--primary-soft);color:var(--primary);box-shadow:var(--sh1)}
.browser{border:1px solid var(--line);border-radius:var(--radius-card);background:#fff;box-shadow:var(--sh2);overflow:hidden;margin-top:28px}
.browser-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:#FBFCFE}
.browser-dots{display:flex;gap:6px}
.browser-dots i{width:10px;height:10px;border-radius:50%;background:#DDE3EE;display:block}
.browser-url{flex:1;height:30px;border-radius:999px;background:#F1F4FA;border:1px solid var(--line);display:flex;align-items:center;padding:0 14px;font-size:12.5px;color:var(--mute);overflow:hidden;white-space:nowrap}
.browser-body{padding:22px}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
.panel-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.panel-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
.panel-grid h4{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:10px}
.panel-grid p{font-size:15px;color:var(--mute);line-height:1.85}
.panel-steps{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.panel-steps li{display:flex;gap:12px;font-size:14.5px;color:var(--body);align-items:flex-start}
.step-no{flex:0 0 auto;width:24px;height:24px;border-radius:8px;background:var(--primary-soft);color:var(--primary);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:4px}
@media (max-width:1023px){.panel-grid{grid-template-columns:1fr;gap:20px}}

/* 证据区 */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:22px;box-shadow:var(--sh1)}
.kpi strong{display:block;font-size:40px;line-height:1.1;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
.kpi strong em{font-style:normal;color:var(--accent);font-size:20px;margin-left:2px}
.kpi span{display:block;margin-top:8px;font-size:14px;color:var(--mute)}
@media (max-width:1023px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.proof-split{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;margin-top:32px}
.proof-quote{background:#fff;border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--radius-sm);padding:22px;box-shadow:var(--sh1)}
.proof-quote p{font-size:15.5px;color:var(--body);line-height:1.85}
.proof-quote footer{margin-top:14px;font-size:13px;color:var(--mute)}
.proof-img{position:relative;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh1)}
.proof-img img{width:100%;height:100%;min-height:240px;object-fit:cover}
@media (max-width:1023px){.proof-split{grid-template-columns:1fr}}

/* 价格条状卡 */
.plan-row{display:flex;align-items:center;gap:28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:26px 28px;box-shadow:var(--sh1);margin-bottom:18px;transition:transform var(--ease),box-shadow var(--ease);position:relative}
.plan-row:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.plan-row.recommend{border:2px solid var(--primary);box-shadow:var(--sh2);transform:scale(1.01)}
.plan-row.recommend:hover{transform:scale(1.01) translateY(-3px)}
.plan-tag{position:absolute;top:-12px;left:28px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:4px 12px;letter-spacing:.04em}
.plan-left{flex:1 1 auto;min-width:0}
.plan-left h3{font-size:19px;font-weight:600;color:var(--ink);margin-bottom:6px}
.plan-left p{font-size:14.5px;color:var(--mute);line-height:1.75}
.plan-feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.plan-right{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.plan-price{font-size:26px;font-weight:800;color:var(--primary);line-height:1.2}
.plan-price small{display:block;font-size:12.5px;font-weight:400;color:var(--mute);margin-top:4px}
@media (max-width:767px){
  .plan-row{flex-direction:column;align-items:flex-start;gap:18px;padding:24px 20px}
  .plan-row.recommend{transform:none}
  .plan-right{text-align:left;align-items:flex-start;width:100%}
  .plan-right .btn{width:100%}
}

/* 资讯列表 */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1023px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.news-grid{grid-template-columns:1fr}}
.news-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--sh1);transition:transform var(--ease),box-shadow var(--ease)}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.news-thumb{overflow:hidden;border-bottom:1px solid var(--line)}
.news-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s ease}
.news-card:hover .news-thumb img{transform:scale(1.03)}
.news-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}
.news-title{font-size:17px;font-weight:600;color:var(--ink);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--ease)}
.news-card:hover .news-title{color:var(--primary)}
.news-desc{font-size:14px;color:var(--mute);line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.news-empty{border:1px dashed var(--line);border-radius:var(--radius-card);background:#fff;padding:40px 24px;text-align:center}
.news-empty p{color:var(--mute);font-size:15px;margin-bottom:14px}

/* FAQ */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--sh1);overflow:hidden;transition:border-color var(--ease)}
.faq-item.open{border-color:rgba(31,79,216,.4)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-size:16px;font-weight:600;color:var(--ink);text-align:left;min-height:44px}
.faq-q:hover{color:var(--primary)}
.faq-plus{flex:0 0 auto;width:22px;height:22px;color:var(--primary);transition:transform .25s ease}
.faq-item.open .faq-plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.faq-item.open .faq-a{max-height:360px}
.faq-a-inner{padding:0 22px 20px;font-size:15px;line-height:1.85;color:var(--mute);border-top:1px solid var(--line);padding-top:16px;margin:0 22px 0;padding-left:0;padding-right:0}

/* CTA 带 */
.cta-band{background:linear-gradient(180deg,#F8FAFF 0%, #EEF3FE 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(31,79,216,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,79,216,.05) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-inner h2{font-size:clamp(22px,2.4vw,30px);font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:10px}
.cta-inner p{font-size:15.5px;color:var(--mute);max-width:40em}

/* 页脚 */
.site-footer{background:var(--primary-wash);border-top:1px solid var(--line);padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:44px}
@media (max-width:1023px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr;gap:26px}}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand .brand-mark{width:32px;height:32px;border-radius:9px}
.footer-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:14px}
.footer-text{font-size:14px;color:var(--mute);line-height:1.85;max-width:30em}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:14px;color:var(--body);transition:color var(--ease),transform var(--ease);display:inline-block}
.footer-links a:hover{color:var(--primary);transform:translateX(2px)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials span{width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--mute);transition:all var(--ease)}
.socials span:hover{color:var(--primary);border-color:rgba(31,79,216,.35)}
.sub-form{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sub-form input{flex:1 1 160px;height:44px;border:1px solid var(--line);border-radius:var(--radius-btn);padding:0 14px;font-size:14px;color:var(--ink);background:#fff;transition:border-color var(--ease),box-shadow var(--ease)}
.sub-form input::placeholder{color:#94A3B8}
.sub-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,79,216,.18)}
.footer-bottom{border-top:1px solid var(--line);padding:20px 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:var(--mute)}

/* 浮动元素 */
.float-cta{position:fixed;right:24px;bottom:24px;z-index:60;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity var(--ease),transform var(--ease),visibility var(--ease);box-shadow:var(--sh3)}
.float-cta.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top{position:fixed;left:24px;bottom:24px;z-index:60;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center;color:var(--primary);opacity:0;visibility:hidden;transition:all var(--ease)}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:var(--primary-soft)}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:65;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none;box-shadow:0 -6px 20px -12px rgba(16,24,40,.18)}
.mobile-bar .btn{width:100%}
@media (max-width:767px){
  .float-cta{display:none}
  .to-top{left:16px;bottom:84px}
  .mobile-bar{display:block}
  body{padding-bottom:76px}
}

/* 通用小工具 */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:767px){.grid-2{grid-template-columns:1fr}}
.divider{height:1px;background:var(--line);margin:0}
.text-ink{color:var(--ink)}
.text-mute{color:var(--mute)}

/* roulang page: article */
:root{
  --primary:#1F4FD8;
  --primary-deep:#1740B8;
  --primary-soft:#E6EDFD;
  --primary-fade:#F4F7FE;
  --accent:#FF7A2F;
  --teal:#0E9F9F;
  --ink:#0F172A;
  --text:#334155;
  --muted:#64748B;
  --line:#E5E9F2;
  --surface:#F6F8FC;
  --success:#12B76A;
  --warn:#F04438;
  --radius-card:18px;
  --radius-sm:14px;
  --radius-btn:12px;
  --sh1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --sh2:0 8px 24px -8px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
  --sh3:0 24px 48px -16px rgba(31,79,216,.18);
  --ease:0.2s ease;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:16px;line-height:1.8;color:var(--text);background:#fff;
  -webkit-font-smoothing:antialiased;
  padding-top:104px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:700}
ul,ol{margin:0}
:focus-visible{outline:3px solid rgba(31,79,216,.18);outline-offset:2px;border-radius:8px}
.container-page{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- Dock ---------- */
.dock{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:1120px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 12px 0 18px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--sh1);z-index:80;
  transition:height var(--ease),box-shadow var(--ease),background var(--ease);
}
.dock.is-scrolled{height:56px;box-shadow:var(--sh2);background:#fff}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;flex-shrink:0}
.brand-mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--primary);color:#fff;font-size:16px;font-weight:800;line-height:1;
}
.brand-text{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:.01em;white-space:nowrap}
.dock-nav{display:flex;align-items:center;gap:22px;flex:1;justify-content:center}
.dock-nav a{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  font-size:14px;color:var(--text);padding:0 2px;white-space:nowrap;
  transition:color var(--ease),background var(--ease);
}
.dock-nav a:hover{color:var(--primary)}
.dock-nav a.is-active{
  color:var(--primary);font-weight:600;background:var(--primary-soft);
  border-radius:999px;padding:0 14px;
}
.dock-nav a.is-active::after{
  content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--primary);
}
.dock-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.icon-btn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  color:var(--muted);transition:color var(--ease),background var(--ease);
}
.icon-btn:hover{color:var(--primary);background:var(--primary-soft)}
.burger{
  display:none;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
  transition:background var(--ease),color var(--ease);
}
.burger:hover{background:var(--primary-fade);color:var(--primary)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:12px 22px;border-radius:var(--radius-btn);
  font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:background var(--ease),color var(--ease),transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  text-align:center;
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--sh2)}
.btn-primary:active{transform:scale(.98)}
.btn-primary[disabled]{opacity:.45;transform:none;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:#fff;border-color:var(--primary);color:var(--primary)}
.btn-ghost:hover{background:var(--primary-soft)}
.btn-ghost:active{transform:scale(.98)}
.btn-sm{min-height:40px;padding:8px 18px;font-size:14px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:15px}
.link-arrow svg{transition:transform var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ---------- Chips / crumbs ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;
  border-radius:999px;background:var(--primary-soft);color:var(--primary);
  font-size:12px;font-weight:600;letter-spacing:.04em;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary)}
.chip-accent{background:#FFF1E8;color:#D9560E}
.chip-accent::before{background:var(--accent)}
.crumbs{padding:26px 0 4px;font-size:14px;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0}
.crumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.crumbs li+li::before{content:"/";color:#CBD5E1}
.crumbs a:hover{color:var(--primary)}
.crumbs [aria-current]{color:var(--primary);font-weight:600;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Article head ---------- */
.article-head{padding:20px 0 0}
.article-head h1{
  font-size:clamp(26px,3.4vw,42px);line-height:1.24;font-weight:800;
  margin:16px 0 18px;letter-spacing:-.005em;
}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:14px;color:var(--muted)}
.meta-row .dot{width:4px;height:4px;border-radius:50%;background:#CBD5E1}
.article-cover{margin-top:28px;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--sh1)}
.article-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ---------- Layout ---------- */
.article-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;
  align-items:start;padding:44px 0 0;
}
.article-side{position:sticky;top:104px}

/* ---------- Article body ---------- */
.article-body{font-size:17px;line-height:1.9;color:var(--text);max-width:720px;overflow-wrap:break-word}
.article-body p{margin:0 0 1.4em}
.article-body h2{
  position:relative;padding-left:14px;margin:40px 0 16px;
  font-size:26px;line-height:1.35;font-weight:700;color:var(--ink);
}
.article-body h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
  border-radius:2px;background:var(--primary);
}
.article-body h3{font-size:20px;line-height:1.4;font-weight:600;color:var(--ink);margin:28px 0 12px}
.article-body h4{font-size:17px;line-height:1.5;font-weight:600;color:var(--ink);margin:20px 0 10px}
.article-body ul,.article-body ol{margin:0 0 1.4em;padding-left:1.5em}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin:.4em 0}
.article-body ul li::marker{color:var(--primary)}
.article-body ol li::marker{color:var(--primary);font-weight:600}
.article-body blockquote{
  margin:24px 0;padding:16px 20px;background:var(--primary-fade);
  border-left:3px solid var(--primary);border-radius:0 12px 12px 0;
}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--primary-deep)}
.article-body img{border-radius:16px;margin:24px auto;border:1px solid var(--line)}
.article-body figure{margin:24px 0}
.article-body figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:10px}
.article-body table{
  display:block;width:100%;overflow-x:auto;border-collapse:collapse;
  margin:24px 0;font-size:15px;border:1px solid var(--line);border-radius:12px;
}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left;white-space:nowrap}
.article-body th{background:var(--surface);color:var(--ink);font-weight:600}
.article-body tbody tr:nth-child(even){background:var(--surface)}
.article-body pre{
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:16px;overflow-x:auto;font-size:14px;line-height:1.7;margin:24px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.article-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--surface);border-radius:4px;padding:1px 6px;font-size:.92em;
}
.article-body pre code{background:none;padding:0}
.article-body hr{border:none;border-top:1px solid var(--line);margin:32px 0}

/* ---------- Side cards ---------- */
.side-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);
  padding:24px;box-shadow:var(--sh1);
}
.side-card + .side-card{margin-top:20px}
.side-card h3{font-size:16px;font-weight:700;margin-bottom:14px}
.side-dl{display:grid;gap:12px;margin:0}
.side-dl div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.side-dl dt{color:var(--muted)}
.side-dl dd{margin:0;color:var(--ink);font-weight:600;text-align:right}
.side-list{list-style:none;padding:0}
.side-list li + li{border-top:1px solid var(--line)}
.side-list a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;font-size:14px;color:var(--text);transition:color var(--ease);
}
.side-list a:hover{color:var(--primary)}
.side-list span{color:var(--primary);font-size:16px;line-height:1}

/* ---------- Article footer blocks ---------- */
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:40px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.tag{
  display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:13px;color:var(--muted);
  transition:color var(--ease),border-color var(--ease),background var(--ease);
}
.tag:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-fade)}

.section-title{margin:56px 0 20px}
.section-title h2{font-size:clamp(22px,2.2vw,28px);line-height:1.3;font-weight:700}
.section-title p{margin:8px 0 0;color:var(--muted);font-size:15px}

.rec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.rec-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--sh1);
  transition:transform var(--ease),box-shadow var(--ease);
}
.rec-card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.rec-thumb{overflow:hidden;aspect-ratio:16/9;background:var(--surface)}
.rec-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.rec-card:hover .rec-thumb img{transform:scale(1.03)}
.rec-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.rec-body h3{
  font-size:17px;line-height:1.5;font-weight:600;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rec-card:hover .rec-body h3{color:var(--primary)}
.rec-body p{
  margin:0;font-size:14px;line-height:1.7;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rec-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}

.back-row{margin:36px 0 0}

/* ---------- CTA band ---------- */
.cta-band{
  margin-top:88px;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:var(--primary-fade);position:relative;
}
.cta-band::after{
  content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:rgba(31,79,216,.06);
}
.cta-inner{position:relative;z-index:1;padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-inner h2{font-size:clamp(22px,2.4vw,30px);line-height:1.3}
.cta-inner p{margin:10px 0 0;color:var(--text);font-size:15px;max-width:640px}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Empty state ---------- */
.empty-card{
  max-width:640px;margin:56px auto;padding:48px 32px;text-align:center;
  background:#fff;border:1px dashed var(--line);border-radius:var(--radius-card);
}
.empty-card h2{font-size:20px;margin-bottom:10px}
.empty-card p{margin:0 0 22px;color:var(--muted);font-size:15px}

/* ---------- Footer ---------- */
.site-footer{margin-top:96px;background:var(--primary-fade);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:36px;padding:60px 0 40px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer-brand .brand-mark{width:32px;height:32px;font-size:15px}
.footer-brand strong{font-size:16px;font-weight:800;color:var(--ink)}
.footer-desc{margin:0;font-size:14px;line-height:1.75;color:var(--muted);max-width:320px}
.social-row{display:flex;gap:10px;margin-top:18px}
.social-row span{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--muted);
  transition:color var(--ease),border-color var(--ease),transform var(--ease);
}
.social-row span:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-2px)}
.footer-col h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:14px;letter-spacing:.02em}
.footer-links{list-style:none;padding:0}
.footer-links a{
  display:block;padding:6px 0;font-size:14px;color:var(--text);
  transition:color var(--ease),transform var(--ease);
}
.footer-links a:hover{color:var(--primary);transform:translateX(2px)}
.sub-form{display:flex;gap:8px;margin-top:14px}
.sub-form input{
  flex:1;min-width:0;height:44px;padding:0 14px;border-radius:var(--radius-btn);
  border:1px solid var(--line);background:#fff;font-size:14px;color:var(--ink);
  transition:border-color var(--ease),box-shadow var(--ease);
}
.sub-form input::placeholder{color:#94A3B8}
.sub-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,79,216,.18)}
.sub-form button{
  height:44px;padding:0 20px;border-radius:var(--radius-btn);border:none;
  background:var(--primary);color:#fff;font-size:14px;font-weight:600;cursor:pointer;
  transition:background var(--ease),transform var(--ease);
}
.sub-form button:hover{background:var(--primary-deep)}
.sub-form button:active{transform:scale(.98)}
.footer-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.footer-bottom{
  border-top:1px solid var(--line);padding:20px 0 28px;
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--muted);
}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:18px}
.footer-bottom a:hover{color:var(--primary)}

/* ---------- Drawer ---------- */
.drawer-mask{
  position:fixed;inset:0;background:rgba(15,23,42,.38);opacity:0;visibility:hidden;
  transition:opacity var(--ease),visibility var(--ease);z-index:90;
}
.drawer-mask.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:320px;max-width:88vw;background:#fff;
  transform:translateX(100%);transition:transform .26s ease;z-index:95;
  display:flex;flex-direction:column;padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:-12px 0 32px -16px rgba(16,24,40,.24);overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.drawer-head strong{font-size:15px;font-weight:800;color:var(--ink)}
.drawer-close{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
}
.drawer-nav{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.drawer-nav a{
  display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;
  font-size:15px;color:var(--text);transition:background var(--ease),color var(--ease);
}
.drawer-nav a:hover{background:var(--primary-fade);color:var(--primary)}
.drawer-nav a.is-active{background:var(--primary-soft);color:var(--primary);font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:1119px){
  .dock-nav{gap:16px}
  .dock-nav a{font-size:13px}
  .brand-text{font-size:15px}
}
@media (max-width:1023px){
  body{padding-top:92px}
  .dock-nav{display:none}
  .burger{display:grid}
  .article-layout{grid-template-columns:1fr;gap:36px}
  .article-side{position:static;top:auto}
  .rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:767px){
  body{padding-top:88px}
  .container-page{padding:0 20px}
  .dock{top:10px;height:58px;padding:0 10px 0 14px}
  .dock.is-scrolled{height:54px}
  .article-head h1{margin:12px 0 14px}
  .article-body{font-size:16px;line-height:1.9}
  .article-body h2{font-size:22px;margin-top:32px}
  .article-body h3{font-size:18px;margin-top:24px}
  .cta-band{margin-top:64px}
  .cta-inner{padding:32px 22px}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1 1 auto}
  .site-footer{margin-top:64px}
  .footer-grid{padding:44px 0 32px}
  .rec-grid{grid-template-columns:1fr}
  .drawer{width:300px}
}
@media (max-width:520px){
  .brand-text{font-size:14px}
  .brand-mark{width:30px;height:30px;font-size:14px}
  .dock-right .btn-sm{display:none}
  .crumbs{padding-top:18px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{justify-content:flex-start}
}

/* roulang page: category1 */
:root {
    --primary: #1F4FD8;
    --primary-dark: #1740B8;
    --primary-soft: #E6EDFD;
    --primary-tint: #F4F7FE;
    --accent: #FF7A2F;
    --teal: #0E9F9F;
    --ink: #0F172A;
    --text: #334155;
    --muted: #64748B;
    --line: #E5E9F2;
    --surface: #FFFFFF;
    --alt: #F6F8FC;
    --success: #12B76A;
    --warning: #F04438;
    --r-card: 18px;
    --r-sm: 14px;
    --r-btn: 12px;
    --sh1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --sh2: 0 8px 24px -8px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
    --sh3: 0 24px 48px -16px rgba(31,79,216,.18);
    --t: .2s ease;
    --anchor-offset: 96px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  html body {
    margin: 0;
    padding-top: 104px;
    font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
  }
  html body.no-scroll { overflow: hidden; }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button, input { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid rgba(31,79,216,.18); outline-offset: 2px; }

  .container-page { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  /* ---------- Dock ---------- */
  .dock {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    width: calc(100% - 48px); max-width: 1120px; height: 64px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 0 12px 0 16px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--sh1);
    z-index: 90;
    transition: height var(--t), box-shadow var(--t), background var(--t);
  }
  .dock.is-scrolled { height: 58px; box-shadow: var(--sh2); background: rgba(255,255,255,.99); }

  .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .brand-mark {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: var(--primary); color: #fff; display: grid; place-items: center;
    font-weight: 800; font-size: 17px; line-height: 1;
  }
  .brand-text { font-weight: 700; color: var(--ink); font-size: 15.5px; letter-spacing: .01em; white-space: nowrap; }

  .dock-nav { display: flex; align-items: center; gap: 8px; }
  .dock-nav a {
    position: relative; padding: 9px 13px; border-radius: 999px;
    font-size: 14.5px; color: var(--text); white-space: nowrap;
    transition: background var(--t), color var(--t);
  }
  .dock-nav a:hover { background: var(--primary-tint); color: var(--primary-dark); }
  .dock-nav a.is-active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }
  .dock-nav a.is-active::before {
    content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--primary); margin-right: 6px; vertical-align: middle;
  }

  .dock-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .icon-btn {
    width: 44px; height: 44px; border-radius: 999px; display: inline-flex;
    align-items: center; justify-content: center; color: var(--primary);
    background: transparent; border: 1px solid transparent; cursor: pointer;
    transition: background var(--t), border-color var(--t), transform var(--t);
  }
  .icon-btn:hover { background: var(--primary-tint); border-color: var(--line); }
  .icon-btn:active { transform: scale(.96); }
  .burger { display: none; }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 12px 22px; border-radius: var(--r-btn);
    font-size: 15px; font-weight: 600; border: 1px solid transparent;
    cursor: pointer; text-align: center;
    transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  }
  .btn-primary { background: var(--primary); color: #fff; }
  .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--sh2); }
  .btn-primary:active { transform: scale(.98); box-shadow: none; }
  .btn-primary[disabled] { opacity: .45; pointer-events: none; }
  .btn-ghost { background: #fff; color: var(--primary); border-color: var(--primary); }
  .btn-ghost:hover { background: var(--primary-soft); transform: translateY(-2px); }
  .btn-ghost:active { transform: scale(.98); }
  .btn-sm { min-height: 40px; padding: 9px 16px; font-size: 14px; border-radius: 10px; }
  .link-arrow { color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
  .link-arrow span { transition: transform var(--t); display: inline-block; }
  .link-arrow:hover span { transform: translateX(3px); }

  /* ---------- Chip / Badge ---------- */
  .chip {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px;
    border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark);
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  }
  .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
  .chip-teal { background: rgba(14,159,159,.12); color: #0B7F7F; }
  .chip-teal::before { background: var(--teal); }

  /* ---------- Breadcrumb ---------- */
  .breadcrumb { padding: 6px 0 22px; }
  .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; font-size: 14px; color: var(--muted); }
  .breadcrumb a { color: var(--muted); transition: color var(--t); }
  .breadcrumb a:hover { color: var(--primary); }
  .breadcrumb .sep { color: #C3CBD9; }
  .breadcrumb [aria-current="page"] { color: var(--primary); font-weight: 600; }

  /* ---------- Hero head ---------- */
  .hero-head {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 44px; align-items: center;
    padding: 8px 0 56px;
  }
  .page-title {
    margin: 16px 0 0; color: var(--ink);
    font-size: clamp(30px, 4vw, 46px); line-height: 1.2; font-weight: 800; letter-spacing: -.01em;
  }
  .page-title .title-brand { color: var(--primary); }
  .lede { margin: 18px 0 0; font-size: 16.5px; color: var(--text); max-width: 620px; }
  .lede + .lede { margin-top: 6px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
  .hero-media {
    border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line);
    box-shadow: var(--sh2); background: var(--alt); aspect-ratio: 4 / 3;
  }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- Stats ---------- */
  .stats-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
    padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card);
    background: var(--primary-tint);
  }
  .stat { padding: 4px 8px; }
  .stat-num { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; color: var(--primary); line-height: 1.1; }
  .stat-num em { font-style: normal; font-size: .5em; color: var(--accent); margin-left: 2px; }
  .stat-label { margin-top: 6px; font-size: 13.5px; color: var(--muted); }

  /* ---------- Layout ---------- */
  .layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: start; }
  .sec { scroll-margin-top: var(--anchor-offset); padding: 56px 0; }
  .sec + .sec { border-top: 1px solid var(--line); }
  .sec-head { margin-bottom: 28px; }
  .sec-title { margin: 0; color: var(--ink); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; font-weight: 700; position: relative; padding-left: 16px; }
  .sec-title::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 4px; background: var(--primary); }
  .sec-sub { margin: 10px 0 0; color: var(--muted); font-size: 15px; max-width: 720px; }

  /* ---------- TOC ---------- */
  .toc {
    position: sticky; top: 104px;
    border: 1px solid var(--line); border-radius: var(--r-card); background: #fff;
    box-shadow: var(--sh1); padding: 22px;
  }
  .toc-title { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .06em; }
  .toc-nav { display: flex; flex-direction: column; gap: 2px; }
  .toc-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: var(--text);
    transition: background var(--t), color var(--t);
  }
  .toc-nav a:hover { background: var(--primary-tint); color: var(--primary-dark); }
  .toc-nav a i { width: 6px; height: 6px; border-radius: 50%; background: #C3CBD9; flex-shrink: 0; }
  .toc-nav a:hover i { background: var(--primary); }
  .toc-foot { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--muted); }
  .toc-foot .btn { width: 100%; margin-top: 12px; }

  /* ---------- Steps ---------- */
  .step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .step-item {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px;
    padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; box-shadow: var(--sh1);
    transition: box-shadow var(--t), transform var(--t), border-color var(--t);
  }
  .step-item:hover { box-shadow: var(--sh2); transform: translateY(-3px); border-color: #D6DEF3; }
  .step-num {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; font-size: 17px;
  }
  .step-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
  .step-text { margin: 6px 0 0; font-size: 15px; color: var(--text); }

  /* ---------- Info cards ---------- */
  .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .info-card {
    padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card);
    background: #fff; box-shadow: var(--sh1);
    transition: box-shadow var(--t), transform var(--t);
  }
  .info-card:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
  .info-icon {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--primary-tint); color: var(--primary); margin-bottom: 14px;
  }
  .card-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
  .card-text { margin: 8px 0 0; font-size: 14.8px; color: var(--text); }

  /* ---------- Trouble list ---------- */
  .trouble-list { display: flex; flex-direction: column; gap: 10px; }
  .trouble-row {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: 16px; padding: 16px 20px;
    border: 1px solid var(--line); border-left: 3px solid var(--teal);
    border-radius: var(--r-sm); background: var(--alt);
    transition: background var(--t), transform var(--t);
  }
  .trouble-row:hover { background: #fff; transform: translateX(3px); box-shadow: var(--sh1); }
  .trouble-q { font-size: 15px; font-weight: 600; color: var(--ink); }
  .trouble-a { font-size: 14.8px; color: var(--text); }

  /* ---------- Related ---------- */
  .rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .rel-card {
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r-card);
    background: #fff; box-shadow: var(--sh1);
    transition: box-shadow var(--t), transform var(--t);
  }
  .rel-card:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
  .rel-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--alt); }
  .rel-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
  .rel-card:hover .rel-media img { transform: scale(1.03); }
  .rel-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .rel-title { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.5; transition: color var(--t); }
  .rel-card:hover .rel-title { color: var(--primary); }
  .rel-text { margin: 0; font-size: 14.5px; color: var(--text); flex: 1; }

  /* ---------- FAQ ---------- */
  .faq-wrap { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
  .faq-item {
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: #fff; box-shadow: var(--sh1); overflow: hidden;
    transition: border-color var(--t), box-shadow var(--t);
  }
  .faq-item[open] { border-color: #CFDCF9; box-shadow: var(--sh2); }
  .faq-q {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 18px 22px; font-size: 16px; font-weight: 600; color: var(--ink);
  }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-q .plus {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; position: relative;
    background: var(--primary-tint); transition: transform var(--t), background var(--t);
  }
  .faq-q .plus::before,
  .faq-q .plus::after {
    content: ""; position: absolute; left: 50%; top: 50%; background: var(--primary);
    transform: translate(-50%, -50%); border-radius: 2px;
  }
  .faq-q .plus::before { width: 12px; height: 2px; }
  .faq-q .plus::after { width: 2px; height: 12px; }
  .faq-item[open] .faq-q .plus { transform: rotate(45deg); background: var(--primary-soft); }
  .faq-a { padding: 0 22px 20px; font-size: 15px; line-height: 1.8; color: var(--text); }

  /* ---------- CTA band ---------- */
  .cta-band {
    position: relative; margin-top: 24px; padding: 64px 0;
    background-image: url('/assets/images/backpic/back-2.png');
    background-size: cover; background-position: center;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .cta-band::before { content: ""; position: absolute; inset: 0; background: rgba(244,247,254,.94); }
  .cta-inner {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  }
  .cta-title { margin: 0; color: var(--ink); font-size: clamp(23px, 2.6vw, 32px); font-weight: 800; line-height: 1.3; }
  .cta-text { margin: 10px 0 0; color: var(--text); font-size: 15.5px; max-width: 560px; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

  /* ---------- Footer ---------- */
  .site-footer { background: var(--primary-tint); border-top: 1px solid var(--line); padding: 56px 0 0; }
  .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 36px; padding-bottom: 40px; }
  .foot-desc { margin: 16px 0 0; font-size: 14.5px; color: var(--muted); max-width: 320px; }
  .foot-social { display: flex; gap: 10px; margin-top: 18px; }
  .foot-social a {
    width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
    background: #fff; border: 1px solid var(--line); color: var(--primary);
    transition: background var(--t), transform var(--t), box-shadow var(--t);
  }
  .foot-social a:hover { background: var(--primary-soft); transform: translateY(-2px); box-shadow: var(--sh1); }
  .foot-title { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .06em; }
  .foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .foot-links a { font-size: 14.5px; color: var(--muted); display: inline-block; transition: color var(--t), transform var(--t); }
  .foot-links a:hover { color: var(--primary); transform: translateX(2px); }
  .foot-form { display: flex; gap: 8px; margin-top: 14px; }
  .foot-form input {
    flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: var(--r-btn);
    border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14.5px;
    transition: border-color var(--t), box-shadow var(--t);
  }
  .foot-form input::placeholder { color: #94A3B8; }
  .foot-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,79,216,.18); }
  .foot-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
  .foot-bottom {
    border-top: 1px solid var(--line); padding: 20px 0 26px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 13.5px; color: var(--muted);
  }
  .foot-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }
  .foot-bottom a { transition: color var(--t); }
  .foot-bottom a:hover { color: var(--primary); }

  /* ---------- Drawer ---------- */
  .drawer-mask {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; z-index: 110;
  }
  .drawer-mask.is-open { opacity: 1; visibility: visible; }
  .drawer {
    position: fixed; top: 0; right: 0; height: 100%; width: 320px; max-width: 86vw;
    background: #fff; border-left: 1px solid var(--line); box-shadow: var(--sh3);
    transform: translateX(100%); transition: transform .28s ease; z-index: 120;
    padding: 22px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
  }
  .drawer.is-open { transform: translateX(0); }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .drawer-nav { display: flex; flex-direction: column; gap: 4px; }
  .drawer-nav a {
    padding: 13px 14px; border-radius: 12px; font-size: 15px; color: var(--text);
    transition: background var(--t), color var(--t);
  }
  .drawer-nav a:hover { background: var(--primary-tint); color: var(--primary-dark); }
  .drawer-nav a.is-active { background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; }

  /* ---------- To top ---------- */
  .to-top {
    position: fixed; left: 24px; bottom: 24px; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--sh2); color: var(--primary);
    display: grid; place-items: center; cursor: pointer; z-index: 70;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--t), transform var(--t), visibility var(--t), background var(--t);
  }
  .to-top.is-show { opacity: 1; visibility: visible; transform: translateY(0); }
  .to-top:hover { background: var(--primary-soft); }

  /* ---------- Responsive ---------- */
  @media (max-width: 1023px) {
    html body { padding-top: 96px; }
    .dock-nav { display: none; }
    .burger { display: inline-flex; }
    .hero-head { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 40px; }
    .hero-media { aspect-ratio: 16 / 9; }
    .layout { grid-template-columns: minmax(0, 1fr); }
    .toc { position: static; }
    .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  }
  @media (max-width: 767px) {
    .container-page { padding: 0 20px; }
    .dock { top: 12px; width: calc(100% - 32px); height: 56px; padding: 0 8px 0 12px; }
    .dock.is-scrolled { height: 54px; }
    .brand-text { font-size: 14px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px; }
    .card-grid { grid-template-columns: minmax(0, 1fr); }
    .rel-grid { grid-template-columns: minmax(0, 1fr); }
    .sec { padding: 44px 0; }
    .step-item { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; }
    .step-num { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
    .trouble-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .cta-band { padding: 48px 0; }
    .cta-actions { width: 100%; }
    .cta-actions .btn { flex: 1; }
    .foot-grid { grid-template-columns: minmax(0, 1fr); }
    .foot-bottom { flex-direction: column; align-items: flex-start; }
    .to-top { left: auto; right: 20px; bottom: 20px; }
  }
  @media (max-width: 520px) {
    .hero-actions .btn { width: 100%; }
    .btn-sm { padding: 9px 12px; }
    .dock-right .btn-sm { display: none; }
  }

/* roulang page: category2 */
:root{
    --primary:#1F4FD8;
    --primary-hover:#1740B8;
    --primary-soft:#E6EDFD;
    --primary-tint:#F4F7FE;
    --accent:#FF7A2F;
    --teal:#0E9F9F;
    --ink:#0F172A;
    --body:#334155;
    --muted:#64748B;
    --line:#E5E9F2;
    --bg:#FFFFFF;
    --alt:#F6F8FC;
    --success:#12B76A;
    --warn:#F04438;
    --r-card:18px;
    --r-sm:14px;
    --r-btn:12px;
    --sh1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --sh2:0 8px 24px -8px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
    --sh3:0 24px 48px -16px rgba(31,79,216,.18);
    --ease:0.2s ease;
    --dock-h:64px;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--body);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    font-size:16px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;border-style:none;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
  input{font:inherit;}
  h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:700;letter-spacing:0;}
  h1{font-size:clamp(30px,4.2vw,46px);line-height:1.15;font-weight:800;}
  h2{font-size:clamp(24px,2.6vw,34px);line-height:1.25;}
  h3{font-size:20px;line-height:1.4;font-weight:600;}
  p{margin:0;}
  ul,ol{margin:0;padding:0;list-style:none;}
  :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,79,216,.18);border-radius:10px;}
  section[id]{scroll-margin-top:96px;}

  .container-page{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}
  .num-font{font-family:Inter,system-ui,-apple-system,"PingFang SC",sans-serif;}

  /* ---------- Dock 导航 ---------- */
  .dock{
    position:fixed;top:16px;left:50%;transform:translateX(-50%);
    width:min(1120px,calc(100% - 32px));height:var(--dock-h);
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:0 12px 0 16px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:var(--sh1);
    z-index:90;
    transition:height var(--ease),box-shadow var(--ease),background var(--ease);
  }
  .dock.is-scrolled{height:56px;box-shadow:var(--sh2);background:rgba(255,255,255,.99);}
  .brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;flex:0 0 auto;}
  .brand-mark{
    width:34px;height:34px;border-radius:11px;flex:0 0 34px;
    display:grid;place-items:center;
    background:var(--primary);color:#fff;font-weight:800;font-size:16px;
    box-shadow:0 6px 14px -6px rgba(31,79,216,.6);
  }
  .brand-text{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;}
  .dock-nav{display:flex;align-items:center;gap:4px;}
  .dock-nav a{
    position:relative;display:inline-flex;align-items:center;min-height:44px;
    padding:0 14px;border-radius:999px;
    font-size:14.5px;color:var(--body);white-space:nowrap;
    transition:color var(--ease),background var(--ease);
  }
  .dock-nav a:hover{color:var(--primary);background:var(--primary-tint);}
  .dock-nav a.is-active{color:var(--primary);background:var(--primary-soft);font-weight:600;}
  .dock-nav a.is-active::after{
    content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
    width:4px;height:4px;border-radius:50%;background:var(--primary);
  }
  .dock-right{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  .icon-btn{
    width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
    color:var(--primary);background:transparent;border:1px solid transparent;
    transition:background var(--ease),border-color var(--ease);
  }
  .icon-btn:hover{background:var(--primary-tint);border-color:var(--line);}
  .burger{
    display:none;width:44px;height:44px;border-radius:12px;place-items:center;
    color:var(--ink);border:1px solid var(--line);background:#fff;
    transition:background var(--ease);
  }
  .burger:hover{background:var(--primary-tint);}

  /* ---------- 按钮 ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;padding:0 24px;border-radius:var(--r-btn);
    font-size:15px;font-weight:600;border:1px solid transparent;
    transition:background var(--ease),color var(--ease),transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  }
  .btn-primary{background:var(--primary);color:#fff;box-shadow:var(--sh1);}
  .btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--sh2);}
  .btn-primary:active{transform:scale(.98);}
  .btn-primary:disabled{opacity:.45;transform:none;box-shadow:none;cursor:not-allowed;}
  .btn-ghost{background:#fff;color:var(--primary);border-color:var(--primary);}
  .btn-ghost:hover{background:var(--primary-soft);transform:translateY(-2px);}
  .btn-ghost:active{transform:scale(.98);}
  .btn-sm{min-height:44px;padding:0 18px;font-size:14px;}
  .link-arrow{
    display:inline-flex;align-items:center;gap:6px;min-height:44px;
    color:var(--primary);font-weight:600;font-size:15px;
  }
  .link-arrow svg{transition:transform var(--ease);}
  .link-arrow:hover svg{transform:translateX(3px);}

  /* ---------- 通用 ---------- */
  .chip{
    display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px;
    border-radius:999px;background:var(--primary-soft);color:var(--primary);
    font-size:12px;font-weight:600;letter-spacing:.06em;white-space:nowrap;
  }
  .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);}
  .chip-teal{background:rgba(14,159,159,.1);color:var(--teal);}
  .chip-teal::before{background:var(--teal);}
  .section{padding:88px 0;}
  .section-alt{background:var(--alt);}
  .section-head{max-width:780px;margin:0 auto 48px;text-align:center;}
  .section-head h2{margin:16px 0 14px;}
  .section-head p{color:var(--muted);font-size:16px;}

  /* ---------- 面包屑 ---------- */
  .breadcrumb{padding:104px 0 0;}
  .breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted);}
  .breadcrumb li{display:flex;align-items:center;gap:8px;}
  .breadcrumb li+li::before{content:"/";color:#CBD5E1;}
  .breadcrumb a:hover{color:var(--primary);}
  .breadcrumb [aria-current="page"]{color:var(--primary);font-weight:600;}

  /* ---------- 页头 ---------- */
  .page-hero{padding:28px 0 64px;}
  .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;}
  .page-hero h1{margin:16px 0 18px;}
  .page-hero .lead{font-size:17px;color:var(--body);max-width:42ch;}
  .page-hero .lead+.lead{margin-top:10px;color:var(--muted);font-size:16px;}
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
  .hero-figure{
    border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
    box-shadow:var(--sh2);background:#fff;
  }
  .hero-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;}

  /* ---------- KPI ---------- */
  .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .kpi{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
    padding:24px;box-shadow:var(--sh1);
    transition:box-shadow var(--ease),transform var(--ease);
  }
  .kpi:hover{box-shadow:var(--sh2);transform:translateY(-3px);}
  .kpi b{display:block;font-family:Inter,system-ui,sans-serif;font-size:38px;font-weight:800;line-height:1.1;color:var(--primary);}
  .kpi b em{font-style:normal;font-size:18px;color:var(--accent);margin-left:2px;}
  .kpi span{display:block;margin-top:8px;font-size:14px;color:var(--muted);}

  /* ---------- 交错图文 ---------- */
  .stack-grid{display:grid;gap:28px;}
  .feature-row{
    display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;
    padding:32px;background:#fff;border:1px solid var(--line);
    border-radius:var(--r-card);box-shadow:var(--sh1);
    transition:box-shadow var(--ease),transform var(--ease);
  }
  .feature-row:hover{box-shadow:var(--sh2);transform:translateY(-3px);}
  .feature-row.is-flip{grid-template-columns:7fr 5fr;}
  .feature-row.is-flip .feature-media{order:2;}
  .feature-media img{
    width:100%;aspect-ratio:16/10;object-fit:cover;
    border-radius:var(--r-sm);border:1px solid var(--line);
  }
  .feature-body .idx{
    display:inline-block;font-family:Inter,system-ui,sans-serif;
    font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--teal);
  }
  .feature-body h3{margin:8px 0 10px;}
  .feature-body p{font-size:15.5px;color:var(--body);max-width:52ch;}
  .ticks{display:grid;gap:10px;margin:18px 0 8px;}
  .ticks li{position:relative;padding-left:26px;font-size:15px;color:var(--body);}
  .ticks li::before{
    content:"";position:absolute;left:2px;top:9px;width:13px;height:7px;
    border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);
    transform:rotate(-45deg);
  }

  /* ---------- 场景条卡 ---------- */
  .scene-list{display:grid;gap:16px;max-width:980px;margin:0 auto;}
  .scene{
    display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;
    padding:20px 24px;background:#fff;border:1px solid var(--line);
    border-radius:var(--r-sm);box-shadow:var(--sh1);
    transition:box-shadow var(--ease),transform var(--ease);
  }
  .scene:hover{box-shadow:var(--sh2);transform:translateY(-3px);}
  .scene .idx{
    font-family:Inter,system-ui,sans-serif;font-size:20px;font-weight:800;
    color:var(--primary);width:44px;height:44px;border-radius:12px;
    background:var(--primary-tint);display:grid;place-items:center;
  }
  .scene h3{font-size:17px;margin-bottom:4px;}
  .scene p{font-size:14.5px;color:var(--muted);}
  .scene .tag{
    font-size:12px;font-weight:600;color:var(--teal);
    background:rgba(14,159,159,.1);border-radius:999px;padding:5px 12px;white-space:nowrap;
  }

  /* ---------- 步骤 ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .step{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
    padding:24px;box-shadow:var(--sh1);
    transition:box-shadow var(--ease),transform var(--ease);
  }
  .step:hover{box-shadow:var(--sh2);transform:translateY(-3px);}
  .step .dot{
    width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    background:var(--primary-soft);color:var(--primary);
    font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:15px;
    margin-bottom:16px;
  }
  .step h3{font-size:17px;margin-bottom:8px;}
  .step p{font-size:14.5px;color:var(--muted);}

  /* ---------- 交叉链接 ---------- */
  .cross-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .cross-card{
    display:flex;flex-direction:column;gap:12px;
    padding:24px;background:#fff;border:1px solid var(--line);
    border-radius:var(--r-card);box-shadow:var(--sh1);min-height:44px;
    transition:box-shadow var(--ease),transform var(--ease),border-color var(--ease);
  }
  .cross-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:#D5DEF5;}
  .cross-card h3{font-size:17px;}
  .cross-card p{font-size:14.5px;color:var(--muted);}
  .cross-card .go{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-size:14px;font-weight:600;margin-top:auto;}
  .cross-card .go svg{transition:transform var(--ease);}
  .cross-card:hover .go svg{transform:translateX(3px);}

  /* ---------- FAQ ---------- */
  .faq{max-width:800px;margin:0 auto;display:grid;gap:12px;}
  .faq-item{
    border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
    overflow:hidden;transition:box-shadow var(--ease),border-color var(--ease);
  }
  .faq-item[open]{box-shadow:var(--sh1);border-color:#D5DEF5;}
  .faq-item summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    gap:16px;min-height:44px;padding:18px 22px;
    font-size:16px;font-weight:600;color:var(--ink);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .plus{position:relative;width:20px;height:20px;flex:0 0 20px;transition:transform var(--ease);}
  .plus::before,.plus::after{content:"";position:absolute;background:var(--primary);border-radius:2px;}
  .plus::before{left:9px;top:0;width:2px;height:20px;}
  .plus::after{left:0;top:9px;width:20px;height:2px;}
  .faq-item[open] .plus{transform:rotate(45deg);}
  .faq-item .answer{
    padding:16px 22px 20px;background:var(--alt);
    font-size:15px;line-height:1.8;color:var(--body);border-top:1px solid var(--line);
  }

  /* ---------- 底部 CTA ---------- */
  .cta-band{
    position:relative;overflow:hidden;text-align:center;
    padding:64px 32px;border:1px solid var(--line);border-radius:24px;
    background-image:linear-gradient(0deg,rgba(244,247,254,.94),rgba(244,247,254,.94)),url("/assets/images/backpic/back-1.png");
    background-size:cover;background-position:center;
    box-shadow:var(--sh1);
  }
  .cta-band h2{margin:14px 0 14px;}
  .cta-band p{max-width:60ch;margin:0 auto;color:var(--body);font-size:16px;}
  .cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px;}

  /* ---------- 页脚 ---------- */
  .site-footer{margin-top:96px;background:var(--primary-tint);border-top:1px solid var(--line);padding-top:64px;}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:48px;}
  .foot-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;}
  .foot-text{font-size:14px;color:var(--muted);max-width:34ch;}
  .foot-title{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink);margin-bottom:16px;}
  .site-footer ul{display:grid;gap:8px;}
  .site-footer ul a{display:inline-block;font-size:14px;color:var(--body);transition:color var(--ease),transform var(--ease);}
  .site-footer ul a:hover{color:var(--primary);transform:translateX(2px);}
  .sub-form{display:flex;gap:8px;margin-bottom:10px;}
  .sub-form input{
    flex:1 1 auto;min-width:0;height:44px;padding:0 14px;
    border:1px solid var(--line);border-radius:var(--r-btn);background:#fff;color:var(--ink);
    transition:border-color var(--ease),box-shadow var(--ease);
  }
  .sub-form input::placeholder{color:#94A3B8;}
  .sub-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,79,216,.18);}
  .sub-form input.is-error{border-color:var(--warn);box-shadow:0 0 0 3px rgba(240,68,56,.14);}
  .sub-tip{font-size:13px;color:var(--muted);}
  .sub-tip.is-ok{color:var(--success);}
  .sub-tip.is-err{color:var(--warn);}
  .social-row{display:flex;gap:10px;margin-top:18px;}
  .social-row span{
    width:36px;height:36px;border-radius:999px;display:grid;place-items:center;
    background:#fff;border:1px solid var(--line);color:var(--primary);
  }
  .footer-bottom{
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
    padding-top:20px;padding-bottom:24px;border-top:1px solid var(--line);
    font-size:13px;color:var(--muted);
  }
  .footer-bottom a:hover{color:var(--primary);}
  .footer-bottom nav{display:flex;flex-wrap:wrap;gap:16px;}

  /* ---------- 浮层 ---------- */
  .float-cta{
    position:fixed;right:24px;bottom:24px;z-index:80;
    opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity var(--ease),transform var(--ease),visibility var(--ease);
    box-shadow:var(--sh3);
  }
  .float-cta.is-show{opacity:1;visibility:visible;transform:none;}
  .to-top{
    position:fixed;left:24px;bottom:24px;z-index:80;
    width:40px;height:40px;border-radius:50%;
    background:#fff;border:1px solid var(--line);box-shadow:var(--sh2);
    display:grid;place-items:center;color:var(--primary);
    opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity var(--ease),transform var(--ease),visibility var(--ease);
  }
  .to-top.is-show{opacity:1;visibility:visible;transform:none;}
  .mobile-cta{display:none;}
  .drawer,.drawer-mask{display:none;}

  /* ---------- 响应式 ---------- */
  @media (max-width:1023px){
    .dock-nav{display:none;}
    .burger{display:grid;}
    .dock .icon-btn{display:none;}
    .hero-grid{grid-template-columns:1fr;gap:32px;}
    .page-hero .lead{max-width:none;}
    .kpi-grid{grid-template-columns:repeat(2,1fr);}
    .feature-row,
    .feature-row.is-flip{grid-template-columns:1fr;gap:24px;padding:24px;}
    .feature-row.is-flip .feature-media{order:0;}
    .steps{grid-template-columns:repeat(2,1fr);}
    .cross-grid{grid-template-columns:1fr;}
    .scene{grid-template-columns:44px 1fr;row-gap:10px;}
    .scene .tag{grid-column:2;justify-self:start;}
    .footer-grid{grid-template-columns:repeat(2,1fr);gap:32px;}
    .float-cta{display:none;}
    .to-top{left:auto;right:16px;bottom:80px;}
    .mobile-cta{
      display:block;position:fixed;left:0;right:0;bottom:0;z-index:85;
      padding:8px 16px calc(8px + env(safe-area-inset-bottom));
      background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    }
    .mobile-cta .btn{width:100%;}

    .drawer{
      display:block;position:fixed;top:0;right:0;bottom:0;width:320px;max-width:86vw;z-index:100;
      background:#fff;border-left:1px solid var(--line);box-shadow:var(--sh2);
      padding:20px;transform:translateX(100%);
      transition:transform .24s ease;overflow-y:auto;
    }
    .drawer.is-open{transform:none;}
    .drawer-mask{
      display:block;position:fixed;inset:0;z-index:95;
      background:rgba(15,23,42,.38);
      opacity:0;pointer-events:none;transition:opacity .24s ease;
    }
    .drawer-mask.is-open{opacity:1;pointer-events:auto;}
    .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
    .drawer-head strong{color:var(--ink);font-size:15px;}
    .drawer-nav{display:grid;gap:6px;margin-bottom:20px;}
    .drawer-nav a{
      display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;
      font-size:15px;color:var(--body);border:1px solid transparent;
    }
    .drawer-nav a:hover{background:var(--primary-tint);color:var(--primary);}
    .drawer-nav a.is-active{background:var(--primary-soft);color:var(--primary);font-weight:600;border-color:#D5DEF5;}
  }

  @media (max-width:640px){
    .container-page{padding:0 20px;}
    .section{padding:56px 0;}
    .section-head{margin-bottom:32px;}
    .breadcrumb{padding-top:96px;}
    .page-hero{padding:20px 0 48px;}
    .kpi-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
    .kpi{padding:20px;}
    .kpi b{font-size:30px;}
    .steps{grid-template-columns:1fr;}
    .cta-band{padding:40px 20px;}
    .cta-actions .btn{width:100%;}
    .hero-actions .btn{width:100%;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;align-items:flex-start;}
    .brand-text{font-size:14px;}
  }

/* roulang page: category3 */
:root{
    --primary:#1F4FD8;
    --primary-600:#1740B8;
    --primary-100:#E6EDFD;
    --primary-50:#F4F7FE;
    --accent:#FF7A2F;
    --aqua:#0E9F9F;
    --ink:#0F172A;
    --body:#334155;
    --muted:#64748B;
    --line:#E5E9F2;
    --surface:#FFFFFF;
    --surface-alt:#F6F8FC;
    --ok:#12B76A;
    --warn:#F04438;
    --r-card:18px;
    --r-soft:14px;
    --r-btn:12px;
    --sh1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --sh2:0 8px 24px -8px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
    --sh3:0 24px 48px -16px rgba(31,79,216,.18);
    --ease:.2s ease;
    --anchor-offset:96px;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    font-size:16px;
    line-height:1.8;
    color:var(--body);
    background:var(--surface);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{max-width:100%;display:block;border-radius:var(--r-soft);object-fit:cover}
  a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),transform var(--ease)}
  button,input{font:inherit;color:inherit}
  h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:700}
  p{margin:0}
  ul,ol{margin:0;padding:0;list-style:none}
  section[id]{scroll-margin-top:var(--anchor-offset)}
  :focus-visible{outline:3px solid rgba(31,79,216,.35);outline-offset:2px;border-radius:6px}

  .container-page{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

  /* ---------- Dock ---------- */
  .dock{
    position:fixed;top:16px;left:50%;transform:translateX(-50%);
    width:min(1120px,calc(100% - 32px));
    height:64px;z-index:60;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:0 14px 0 20px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:var(--sh1);
    transition:height .25s ease,box-shadow .25s ease,background .25s ease;
  }
  .dock.is-scrolled{height:56px;box-shadow:var(--sh2);background:#fff}
  .brand{display:inline-flex;align-items:center;gap:10px;min-height:44px}
  .brand-mark{
    width:32px;height:32px;flex:0 0 32px;border-radius:10px;
    background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:800;letter-spacing:.02em;
  }
  .brand-text{font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap}
  .dock-nav{display:flex;align-items:center;gap:22px}
  .dock-nav a{
    font-size:14.5px;color:var(--muted);padding:8px 12px;border-radius:999px;
    white-space:nowrap;position:relative;
  }
  .dock-nav a:hover{color:var(--primary);background:var(--primary-50)}
  .dock-nav a.is-active{color:var(--primary);background:var(--primary-100);font-weight:600}
  .dock-nav a.is-active::after{
    content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
    width:5px;height:5px;border-radius:50%;background:var(--primary);
  }
  .dock-right{display:flex;align-items:center;gap:10px}
  .icon-btn{
    width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
    color:var(--muted);border:1px solid transparent;background:transparent;cursor:pointer;
  }
  .icon-btn:hover{color:var(--primary);background:var(--primary-50);border-color:var(--line)}
  .burger{
    display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
    background:#fff;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;
  }
  .burger:hover{background:var(--primary-50);color:var(--primary)}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:44px;padding:12px 24px;border-radius:var(--r-btn);
    font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer;
    transition:transform var(--ease),background var(--ease),color var(--ease),box-shadow var(--ease),border-color var(--ease);
    text-align:center;
  }
  .btn-primary{background:var(--primary);color:#fff}
  .btn-primary:hover{background:var(--primary-600);transform:translateY(-2px);box-shadow:var(--sh2)}
  .btn-primary:active{transform:scale(.98)}
  .btn-primary[disabled]{opacity:.45;transform:none;box-shadow:none;cursor:not-allowed}
  .btn-ghost{background:#fff;color:var(--primary);border-color:var(--primary)}
  .btn-ghost:hover{background:var(--primary-100);transform:translateY(-2px)}
  .btn-ghost:active{transform:scale(.98)}
  .btn-light{background:#fff;color:var(--primary)}
  .btn-light:hover{background:var(--primary-100);transform:translateY(-2px);box-shadow:var(--sh2)}
  .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
  .btn-outline-light:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
  .btn-sm{min-height:40px;padding:9px 18px;font-size:14px;border-radius:10px}
  .link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:15px}
  .link-arrow svg{transition:transform var(--ease)}
  .link-arrow:hover svg{transform:translateX(3px)}

  /* ---------- Chips & badges ---------- */
  .chip{
    display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 12px;
    border-radius:999px;background:var(--primary-100);color:var(--primary);
    font-size:12px;font-weight:600;letter-spacing:.06em;line-height:24px;
  }
  .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary)}
  .chip-accent{background:#FFF1E8;color:#C24E0A}
  .chip-accent::before{background:var(--accent)}
  .chip-aqua{background:#E4F5F5;color:#0B7B7B}
  .chip-aqua::before{background:var(--aqua)}

  /* ---------- Layout ---------- */
  main{padding-top:112px}
  .section{padding:96px 0}
  .section-alt{background:var(--surface-alt)}
  .section-head{max-width:760px;margin-bottom:44px}
  .section-head h2{font-size:clamp(24px,2.6vw,34px);line-height:1.25;margin:14px 0 14px}
  .section-head p{font-size:16px;color:var(--muted);line-height:1.85}

  /* ---------- Breadcrumb ---------- */
  .crumb{padding:8px 0 28px}
  .crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
  .crumb li{display:flex;align-items:center;gap:8px}
  .crumb li+li::before{content:"/";color:#C3CDDD}
  .crumb a:hover{color:var(--primary)}
  .crumb li[aria-current] a,.crumb li[aria-current]{color:var(--primary);font-weight:600}

  /* ---------- Hero ---------- */
  .page-hero{padding:8px 0 20px}
  .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
  .hero-grid h1{font-size:clamp(30px,4.2vw,52px);line-height:1.15;font-weight:800;letter-spacing:-.01em}
  .hero-grid h1 .h1-key{display:block;font-size:clamp(19px,2.1vw,26px);color:var(--primary);margin-top:12px;font-weight:700}
  .hero-lead{margin-top:22px;font-size:17px;color:var(--body);line-height:1.9;max-width:34em}
  .hero-lead span{display:block}
  .hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
  .hero-figure{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh2)}
  .hero-figure img{width:100%;aspect-ratio:4/3;border-radius:0}
  .hero-figure figcaption{padding:12px 18px;font-size:13px;color:var(--muted);background:#fff;border-top:1px solid var(--line)}

  /* ---------- Cards ---------- */
  .card{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
    box-shadow:var(--sh1);padding:24px;
    transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  }
  .card:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
  .card h3{font-size:20px;line-height:1.4;margin-bottom:10px}
  .card p{font-size:15px;color:var(--body);line-height:1.8}

  .check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .check-card .check-icon{
    width:40px;height:40px;border-radius:12px;background:var(--primary-100);color:var(--primary);
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  }
  .check-card:nth-child(2n) .check-icon{background:#E4F5F5;color:var(--aqua)}
  .check-card:nth-child(3n) .check-icon{background:#FFF1E8;color:#C24E0A}

  /* ---------- Compare ---------- */
  .compare{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff;box-shadow:var(--sh1)}
  .compare-head{display:grid;grid-template-columns:1fr 56px 1fr;background:var(--aqua);color:#fff;font-size:14px;font-weight:600;letter-spacing:.06em}
  .compare-head span{padding:16px 24px}
  .compare-head span:nth-child(3){text-align:left}
  .compare-head span:nth-child(2){padding:16px 0;text-align:center}
  .compare-row{display:grid;grid-template-columns:1fr 56px 1fr;border-top:1px solid var(--line);align-items:center}
  .compare-row:nth-child(odd){background:#fff}
  .compare-row:nth-child(even){background:var(--surface-alt)}
  .compare-row > div{padding:20px 24px;font-size:15px;line-height:1.8}
  .compare-symp{color:var(--ink);font-weight:600}
  .compare-fix{color:var(--body)}
  .compare-arrow{display:flex;align-items:center;justify-content:center;color:var(--primary)}

  /* ---------- Steps ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:step}
  .step{
    position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-soft);
    padding:26px 22px 22px;box-shadow:var(--sh1);transition:transform var(--ease),box-shadow var(--ease);
  }
  .step:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
  .step-num{
    width:34px;height:34px;border-radius:10px;background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;margin-bottom:16px;
  }
  .step h3{font-size:17px;margin-bottom:8px}
  .step p{font-size:14.5px;color:var(--muted);line-height:1.8}

  /* ---------- QA / FAQ ---------- */
  .qa-wrap{max-width:860px}
  .qa{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-soft);
    overflow:hidden;margin-bottom:12px;transition:box-shadow var(--ease),border-color var(--ease);
  }
  .qa[open]{box-shadow:var(--sh2);border-color:#D8E1F5}
  .qa summary{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 24px;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;
    min-height:44px;
  }
  .qa summary::-webkit-details-marker{display:none}
  .qa summary:hover{color:var(--primary)}
  .qa .plus{
    flex:0 0 24px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
    color:var(--primary);transition:transform var(--ease);
  }
  .qa[open] .plus{transform:rotate(45deg)}
  .qa-body{
    padding:16px 24px 22px;background:var(--primary-50);
    font-size:15px;line-height:1.8;color:var(--body);border-top:1px solid var(--line);
  }

  /* ---------- Cross links ---------- */
  .cross-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .cross-card{display:block;overflow:hidden;padding:0}
  .cross-card img{width:100%;aspect-ratio:16/9;border-radius:0}
  .cross-body{padding:22px 24px 24px}
  .cross-body h3{font-size:18px;margin:12px 0 8px}
  .cross-card:hover h3{color:var(--primary)}
  .cross-card:hover img{transform:scale(1.03)}
  .cross-card img{transition:transform .3s ease}

  /* ---------- CTA band ---------- */
  .cta-band{
    position:relative;background:var(--primary);color:#fff;overflow:hidden;
  }
  .cta-band::before{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
    background-size:44px 44px;opacity:.5;pointer-events:none;
  }
  .cta-inner{
    position:relative;padding:72px 24px;display:grid;grid-template-columns:1.3fr .7fr;
    gap:40px;align-items:center;
  }
  .cta-inner h2{color:#fff;font-size:clamp(24px,2.6vw,32px);line-height:1.3}
  .cta-inner p{color:rgba(255,255,255,.86);margin-top:14px;font-size:16px;line-height:1.85;max-width:36em}
  .cta-actions{display:flex;flex-direction:column;gap:12px}

  /* ---------- Footer ---------- */
  .site-footer{background:var(--surface-alt);border-top:1px solid var(--line);margin-top:0}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:64px 24px 40px}
  .footer-brand .brand{margin-bottom:16px}
  .footer-brand p{font-size:14px;color:var(--muted);line-height:1.9;max-width:28em}
  .social-row{display:flex;gap:10px;margin-top:18px}
  .social-row a{
    width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;
    display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
  }
  .social-row a:hover{color:var(--primary);border-color:#C9D6F6;background:var(--primary-50)}
  .footer-col h4{font-size:15px;margin-bottom:16px;color:var(--ink)}
  .footer-col ul{display:flex;flex-direction:column;gap:10px}
  .footer-col a{font-size:14px;color:var(--muted);display:inline-block}
  .footer-col a:hover{color:var(--primary);transform:translateX(2px)}
  .footer-sub p{font-size:14px;color:var(--muted);line-height:1.9;margin-bottom:14px}
  .sub-form{display:flex;gap:8px;flex-wrap:wrap}
  .sub-form input{
    flex:1 1 160px;min-height:44px;padding:0 14px;border-radius:12px;
    border:1px solid var(--line);background:#fff;font-size:14px;color:var(--ink);
    transition:border-color var(--ease),box-shadow var(--ease);
  }
  .sub-form input::placeholder{color:#94A3B8}
  .sub-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,79,216,.18)}
  .sub-form button{min-height:44px;padding:0 20px;border-radius:12px;border:none;background:var(--primary);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background var(--ease),transform var(--ease)}
  .sub-form button:hover{background:var(--primary-600);transform:translateY(-2px)}
  .sub-form button:active{transform:scale(.98)}
  .footer-bottom{
    border-top:1px solid var(--line);
    padding:20px 24px 28px;display:flex;flex-wrap:wrap;gap:12px 24px;
    align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);
  }
  .footer-bottom nav{display:flex;flex-wrap:wrap;gap:18px}
  .footer-bottom a:hover{color:var(--primary)}

  /* ---------- Drawer ---------- */
  .drawer-mask{
    position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:70;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .drawer-mask.is-open{opacity:1;pointer-events:auto}
  .drawer{
    position:fixed;top:0;right:0;height:100%;width:320px;max-width:86vw;z-index:80;
    background:#fff;box-shadow:var(--sh3);padding:24px 20px 32px;
    transform:translateX(102%);transition:transform .28s ease;
    display:flex;flex-direction:column;gap:6px;overflow-y:auto;
  }
  .drawer.is-open{transform:translateX(0)}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .drawer-head span{font-size:15px;font-weight:700;color:var(--ink)}
  .drawer nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;font-size:15px;color:var(--body)}
  .drawer nav a:hover{background:var(--primary-50);color:var(--primary)}
  .drawer nav a.is-active{background:var(--primary-100);color:var(--primary);font-weight:600}
  .drawer .btn{margin-top:16px;width:100%}

  /* ---------- Floating CTA & back to top ---------- */
  .float-cta{
    position:fixed;right:24px;bottom:24px;z-index:55;
    opacity:0;pointer-events:none;transform:translateY(10px);
    transition:opacity .25s ease,transform .25s ease,background var(--ease),box-shadow var(--ease);
    box-shadow:var(--sh3);
  }
  .float-cta.is-show{opacity:1;pointer-events:auto;transform:translateY(0)}
  .float-cta .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
  .to-top{
    position:fixed;left:24px;bottom:24px;z-index:55;width:40px;height:40px;border-radius:50%;
    background:#fff;border:1px solid var(--line);box-shadow:var(--sh2);color:var(--primary);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    opacity:0;pointer-events:none;transition:opacity .25s ease,transform var(--ease);
  }
  .to-top.is-show{opacity:1;pointer-events:auto}
  .to-top:hover{transform:translateY(-2px)}
  .bottom-cta{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:58;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    padding:8px 16px calc(8px + env(safe-area-inset-bottom));
    align-items:center;gap:12px;justify-content:space-between;
  }
  .bottom-cta span{font-size:14px;color:var(--muted)}
  .bottom-cta .btn{min-height:44px;flex:0 0 auto}

  /* ---------- Responsive ---------- */
  @media (max-width:1279px){
    .hero-grid{gap:40px}
  }
  @media (max-width:1023px){
    .dock-nav{display:none}
    .burger{display:inline-flex}
    main{padding-top:96px}
    .section{padding:72px 0}
    .hero-grid{grid-template-columns:1fr;gap:32px}
    .check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cross-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cta-inner{grid-template-columns:1fr;padding:56px 24px}
    .cta-actions{flex-direction:row;flex-wrap:wrap}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px;padding:56px 24px 32px}
    .float-cta,.to-top{display:none}
    .bottom-cta{display:flex}
    body{padding-bottom:72px}
  }
  @media (max-width:767px){
    .container-page{padding:0 20px}
    .section{padding:56px 0}
    .section-head{margin-bottom:32px}
    .check-grid{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .cross-grid{grid-template-columns:1fr}
    .compare-head{grid-template-columns:1fr;font-size:13px}
    .compare-head span{padding:12px 18px}
    .compare-head span:nth-child(2){display:none}
    .compare-row{grid-template-columns:1fr}
    .compare-row > div{padding:16px 18px}
    .compare-arrow{display:none}
    .compare-symp{border-bottom:1px dashed var(--line)}
    .footer-grid{grid-template-columns:1fr;gap:28px}
    .btn{width:100%}
    .dock-right .btn{width:auto}
    .qa summary{padding:16px 18px;font-size:15px}
    .qa-body{padding:14px 18px 18px}
  }
  @media (max-width:520px){
    .brand-text{font-size:14.5px}
    .hero-lead{font-size:16px}
    .cta-actions .btn{width:100%}
  }

/* roulang page: category4 */
:root{
    --primary:#1F4FD8;
    --primary-dark:#1740B8;
    --primary-soft:#E6EDFD;
    --primary-faint:#F4F7FE;
    --accent:#FF7A2F;
    --teal:#0E9F9F;
    --ink:#0F172A;
    --text:#334155;
    --muted:#64748B;
    --line:#E5E9F2;
    --surface:#F6F8FC;
    --white:#FFFFFF;
    --r-card:18px;
    --r-sm:14px;
    --r-btn:12px;
    --sh1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --sh2:0 8px 24px -8px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.05);
    --sh3:0 24px 48px -16px rgba(31,79,216,.18);
    --ease:.2s ease;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    padding:104px 0 0;
    font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    font-size:16px;
    line-height:1.8;
    color:var(--text);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,p,figure,ul,ol{margin:0;}
  ul,ol{padding:0;list-style:none;}
  img{display:block;max-width:100%;height:auto;}
  a{color:var(--primary);text-decoration:none;transition:color var(--ease),background var(--ease),transform var(--ease),box-shadow var(--ease);}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
  input{font:inherit;}
  :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,79,216,.18);border-radius:8px;}
  .num{font-family:Inter,system-ui,sans-serif;}

  .container-page{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
  }

  /* ---------- Dock 导航 ---------- */
  .dock{
    position:fixed;
    top:16px;
    left:50%;
    transform:translateX(-50%);
    width:min(1120px,calc(100% - 32px));
    height:64px;
    display:flex;
    align-items:center;
    gap:20px;
    padding:0 14px 0 18px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:var(--sh1);
    z-index:120;
    transition:height var(--ease),box-shadow var(--ease);
  }
  .dock.is-scrolled{height:56px;box-shadow:var(--sh2);}
  .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--ink);}
  .brand-mark{
    width:34px;height:34px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:var(--primary);color:#fff;font-size:16px;font-weight:800;
  }
  .brand-text{font-size:15px;font-weight:700;letter-spacing:.01em;white-space:nowrap;}
  .dock-nav{display:flex;align-items:center;gap:6px;margin-left:8px;}
  .dock-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 14px;
    border-radius:999px;
    font-size:15px;
    color:var(--muted);
    white-space:nowrap;
  }
  .dock-nav a:hover{color:var(--primary);background:var(--primary-faint);}
  .dock-nav a.is-active{color:var(--primary);background:var(--primary-soft);font-weight:600;}
  .dock-nav a.is-active::after{
    content:"";position:absolute;left:50%;bottom:5px;
    width:4px;height:4px;border-radius:50%;background:var(--primary);
    transform:translateX(-50%);
  }
  .dock-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
  .icon-btn{
    width:44px;height:44px;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--primary);border:1px solid var(--line);background:var(--white);
  }
  .icon-btn:hover{background:var(--primary-faint);border-color:var(--primary-soft);}
  .burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;color:var(--ink);border:1px solid var(--line);}

  /* ---------- 按钮 ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:0 24px;border-radius:var(--r-btn);
    font-size:15px;font-weight:600;border:1px solid transparent;
    transition:all var(--ease);
  }
  .btn-sm{min-height:40px;padding:0 18px;font-size:14px;}
  .btn-primary{background:var(--primary);color:#fff;box-shadow:var(--sh1);}
  .btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--sh2);color:#fff;}
  .btn-primary:active{transform:scale(.98);}
  .btn-ghost{background:var(--white);color:var(--primary);border-color:var(--primary);}
  .btn-ghost:hover{background:var(--primary-soft);transform:translateY(-2px);color:var(--primary-dark);}
  .btn-ghost:active{transform:scale(.98);}
  .btn-link{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-weight:600;font-size:15px;}
  .btn-link svg{transition:transform var(--ease);}
  .btn-link:hover svg{transform:translateX(3px);}
  .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

  /* ---------- 抽屉 ---------- */
  .drawer{
    position:fixed;top:0;right:0;bottom:0;width:320px;max-width:88vw;
    background:var(--white);border-left:1px solid var(--line);
    box-shadow:var(--sh3);z-index:200;
    transform:translateX(105%);transition:transform .28s ease;
    padding:24px 20px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;
  }
  .drawer.is-open{transform:translateX(0);}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .drawer-head strong{font-size:16px;color:var(--ink);}
  .drawer a{
    display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;
    color:var(--text);font-size:15px;border:1px solid transparent;
  }
  .drawer a:hover{background:var(--primary-faint);color:var(--primary);}
  .drawer a.is-active{background:var(--primary-soft);color:var(--primary);font-weight:600;}
  .drawer .btn{width:100%;margin-top:14px;}
  .mask{position:fixed;inset:0;background:rgba(15,23,42,.36);z-index:190;opacity:0;visibility:hidden;transition:opacity var(--ease),visibility var(--ease);}
  .mask.is-open{opacity:1;visibility:visible;}

  /* ---------- 通用区块 ---------- */
  .section{padding:96px 0;}
  .section.tight{padding:72px 0;}
  .section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .eyebrow{
    display:inline-flex;align-items:center;gap:6px;
    height:24px;padding:0 12px;border-radius:999px;
    background:var(--primary-soft);color:var(--primary);
    font-size:12px;font-weight:600;letter-spacing:.06em;
  }
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);}
  h1{font-size:clamp(30px,4.2vw,52px);line-height:1.15;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
  h2{font-size:clamp(24px,2.6vw,34px);line-height:1.25;font-weight:700;color:var(--ink);}
  h3{font-size:20px;line-height:1.4;font-weight:600;color:var(--ink);}
  h4{font-size:17px;line-height:1.5;font-weight:600;color:var(--ink);}
  .lead{font-size:17px;line-height:1.85;color:var(--text);}
  .section-head{max-width:760px;margin-bottom:44px;}
  .section-head h2{margin-top:16px;}
  .section-head p{margin-top:14px;font-size:16px;color:var(--muted);line-height:1.85;}

  /* ---------- 面包屑 ---------- */
  .crumbs{padding:20px 0 0;}
  .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted);}
  .crumbs li{display:inline-flex;align-items:center;}
  .crumbs li+li::before{content:"/";margin-right:8px;color:#CBD5E1;}
  .crumbs a{color:var(--muted);}
  .crumbs a:hover{color:var(--primary);}
  .crumbs .current{color:var(--primary);font-weight:600;}

  /* ---------- 页头 ---------- */
  .page-head{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:56px;
    align-items:center;
    padding:40px 0 8px;
  }
  .page-head .lead{margin-top:20px;max-width:560px;}
  .page-head .lead span{display:block;}
  .page-head .lead span+span{margin-top:6px;}
  .head-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
  .head-figure{
    border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
    box-shadow:var(--sh2);background:var(--surface);
  }
  .head-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;}
  .head-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
  .chip{
    display:inline-flex;align-items:center;gap:6px;
    height:26px;padding:0 12px;border-radius:999px;
    background:var(--primary-faint);color:var(--primary);
    font-size:12px;font-weight:600;letter-spacing:.04em;
    border:1px solid var(--primary-soft);
  }
  .chip.teal{background:#E6F6F6;color:var(--teal);border-color:#CBEBEB;}
  .chip.accent{background:#FFF1E8;color:#C2531A;border-color:#FFDCC8;}

  /* ---------- 时间轴 ---------- */
  .timeline{position:relative;padding-left:0;}
  .timeline::before{
    content:"";position:absolute;left:158px;top:10px;bottom:10px;
    width:2px;background:linear-gradient(180deg,var(--primary-soft),var(--line));
  }
  .tl-item{
    position:relative;
    display:grid;
    grid-template-columns:120px 40px 1fr;
    gap:0 20px;
    padding-bottom:28px;
  }
  .tl-item:last-child{padding-bottom:0;}
  .tl-date{
    text-align:right;font-size:13px;color:var(--muted);
    padding-top:16px;letter-spacing:.02em;font-family:Inter,system-ui,sans-serif;
  }
  .tl-date b{display:block;font-size:15px;color:var(--ink);font-weight:600;}
  .tl-node{position:relative;display:flex;justify-content:center;padding-top:20px;}
  .tl-node i{
    width:12px;height:12px;border-radius:50%;
    background:var(--white);border:3px solid var(--teal);z-index:1;
  }
  .tl-item.is-latest .tl-node i{border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,47,.14);}
  .tl-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
    padding:22px 24px;box-shadow:var(--sh1);transition:all var(--ease);
  }
  .tl-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);}
  .tl-card h3{font-size:17px;}
  .tl-card p{margin-top:10px;font-size:15px;line-height:1.8;color:var(--text);}
  .tl-foot{
    display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;
    padding-top:14px;border-top:1px dashed var(--line);
    font-size:13px;color:var(--muted);
  }
  .tl-foot b{color:var(--ink);font-weight:600;}

  /* ---------- 指标 ---------- */
  .metrics{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
    margin-top:48px;
  }
  .metric{
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:22px 20px;box-shadow:var(--sh1);
  }
  .metric strong{display:block;font-size:36px;line-height:1.1;font-weight:800;color:var(--primary);font-family:Inter,system-ui,sans-serif;}
  .metric strong em{font-style:normal;font-size:16px;color:var(--accent);margin-left:2px;}
  .metric span{display:block;margin-top:8px;font-size:14px;color:var(--muted);}

  /* ---------- 公告卡 ---------- */
  .notice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .notice-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
    overflow:hidden;box-shadow:var(--sh1);display:flex;flex-direction:column;
    transition:all var(--ease);
  }
  .notice-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);}
  .notice-card .thumb{overflow:hidden;background:var(--surface);}
  .notice-card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .35s ease;}
  .notice-card:hover .thumb img{transform:scale(1.03);}
  .notice-body{padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;flex:1;}
  .notice-body .tag{
    align-self:flex-start;height:24px;padding:0 10px;border-radius:999px;
    display:inline-flex;align-items:center;font-size:12px;font-weight:600;
    background:var(--primary-soft);color:var(--primary);
  }
  .notice-body .tag.teal{background:#E6F6F6;color:var(--teal);}
  .notice-body .tag.accent{background:#FFF1E8;color:#C2531A;}
  .notice-body h3{font-size:17px;line-height:1.5;}
  .notice-body p{font-size:14px;line-height:1.75;color:var(--muted);}
  .notice-body .foot{
    margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
    font-size:13px;color:var(--muted);
  }

  /* ---------- 交叉链接 ---------- */
  .cross-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .cross-card{
    display:block;background:var(--white);border:1px solid var(--line);
    border-radius:var(--r-card);padding:24px;box-shadow:var(--sh1);
    transition:all var(--ease);
  }
  .cross-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--primary-soft);}
  .cross-card h3{font-size:17px;}
  .cross-card h3:hover{color:var(--primary);}
  .cross-card p{margin-top:10px;font-size:14px;line-height:1.75;color:var(--muted);}
  .cross-card .go{
    display:inline-flex;align-items:center;gap:6px;margin-top:16px;
    font-size:14px;font-weight:600;color:var(--primary);
  }
  .cross-card:hover .go svg{transform:translateX(3px);}
  .cross-card .go svg{transition:transform var(--ease);}

  /* ---------- FAQ ---------- */
  .faq-wrap{max-width:800px;margin:0 auto;}
  .faq-item{
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
    margin-bottom:14px;overflow:hidden;transition:box-shadow var(--ease),border-color var(--ease);
  }
  .faq-item[open]{box-shadow:var(--sh2);border-color:var(--primary-soft);}
  .faq-item summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px 22px;font-size:16px;font-weight:600;color:var(--ink);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary:hover{color:var(--primary);}
  .faq-plus{
    flex:0 0 auto;width:26px;height:26px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    background:var(--primary-faint);color:var(--primary);
    transition:transform var(--ease),background var(--ease);
  }
  .faq-item[open] .faq-plus{transform:rotate(45deg);background:var(--primary-soft);}
  .faq-answer{
    margin:0 14px 14px;padding:16px 18px;border-radius:14px;
    background:var(--primary-faint);font-size:15px;line-height:1.8;color:var(--text);
  }

  /* ---------- CTA 带 ---------- */
  .cta-band{
    position:relative;overflow:hidden;
    background:var(--primary-faint);
    border:1px solid var(--primary-soft);
    border-radius:24px;
    padding:56px 48px;
    display:grid;grid-template-columns:1.4fr .6fr;gap:32px;align-items:center;
  }
  .cta-band::after{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(31,79,216,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(31,79,216,.06) 1px,transparent 1px);
    background-size:32px 32px;
    pointer-events:none;
  }
  .cta-band > *{position:relative;z-index:1;}
  .cta-band h2{font-size:clamp(22px,2.3vw,30px);}
  .cta-band p{margin-top:14px;font-size:16px;color:var(--text);max-width:640px;}
  .cta-actions{display:flex;flex-direction:column;gap:12px;}
  .cta-actions .btn{width:100%;}

  /* ---------- 页脚 ---------- */
  .site-footer{
    margin-top:96px;
    background:var(--primary-faint);
    border-top:1px solid var(--line);
  }
  .footer-grid{
    display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;
    padding:64px 0 40px;
  }
  .footer-brand{display:flex;align-items:center;gap:10px;color:var(--ink);}
  .footer-brand .brand-mark{width:32px;height:32px;border-radius:9px;font-size:15px;}
  .footer-brand span{font-size:15px;font-weight:700;}
  .footer-desc{margin-top:16px;font-size:14px;line-height:1.8;color:var(--muted);max-width:320px;}
  .socials{display:flex;gap:10px;margin-top:20px;}
  .socials a{
    width:40px;height:40px;border-radius:12px;background:var(--white);
    border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;
    color:var(--primary);
  }
  .socials a:hover{background:var(--primary-soft);transform:translateY(-2px);}
  .footer-col h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:18px;}
  .footer-col ul{display:flex;flex-direction:column;gap:12px;}
  .footer-col a{font-size:14px;color:var(--muted);display:inline-block;}
  .footer-col a:hover{color:var(--primary);transform:translateX(2px);}
  .footer-sub p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:16px;}
  .sub-form{display:flex;gap:10px;flex-wrap:wrap;}
  .sub-form input{
    flex:1 1 180px;height:44px;padding:0 14px;border-radius:12px;
    border:1px solid var(--line);background:var(--white);color:var(--ink);
    transition:border-color var(--ease),box-shadow var(--ease);
  }
  .sub-form input::placeholder{color:#94A3B8;}
  .sub-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,79,216,.18);}
  .footer-bottom{
    border-top:1px solid var(--line);
    padding:22px 0 28px;
    display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;
    font-size:13px;color:var(--muted);
  }
  .footer-bottom nav{display:flex;flex-wrap:wrap;gap:18px;}
  .footer-bottom a{color:var(--muted);}
  .footer-bottom a:hover{color:var(--primary);}

  /* ---------- 悬浮件 ---------- */
  .to-top{
    position:fixed;left:24px;bottom:24px;width:40px;height:40px;border-radius:50%;
    background:var(--white);border:1px solid var(--line);box-shadow:var(--sh2);
    display:flex;align-items:center;justify-content:center;color:var(--primary);
    opacity:0;visibility:hidden;z-index:110;transition:opacity var(--ease),visibility var(--ease),transform var(--ease);
  }
  .to-top.is-show{opacity:1;visibility:visible;}
  .to-top:hover{transform:translateY(-2px);}
  .sticky-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:115;display:none;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom));
    background:var(--white);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(16,24,40,.08);
  }
  .sticky-cta .btn{width:100%;}

  /* ---------- 响应式 ---------- */
  @media (max-width:1023px){
    .dock-nav{display:none;}
    .burger{display:inline-flex;}
    .dock{height:56px;}
    .page-head{grid-template-columns:1fr;gap:32px;padding-top:28px;}
    .notice-grid,.cross-grid{grid-template-columns:1fr 1fr;}
    .metrics{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
    .cta-band{grid-template-columns:1fr;padding:40px 28px;}
    .timeline::before{left:6px;}
    .tl-item{grid-template-columns:1fr;gap:0;padding-left:32px;padding-bottom:24px;}
    .tl-date{text-align:left;padding-top:0;margin-bottom:8px;}
    .tl-node{position:absolute;left:-1px;top:4px;padding-top:0;}
    .sticky-cta{display:block;}
    .to-top{bottom:88px;}
    .site-footer{padding-bottom:64px;}
  }
  @media (max-width:767px){
    body{padding-top:88px;}
    .container-page{padding:0 20px;}
    .section{padding:56px 0;}
    .section.tight{padding:56px 0;}
    .brand-text{display:none;}
    .section-head{margin-bottom:32px;}
    .notice-grid,.cross-grid{grid-template-columns:1fr;}
    .metrics{grid-template-columns:1fr 1fr;gap:16px;}
    .footer-grid{grid-template-columns:1fr;padding:48px 0 32px;}
    .cta-band{padding:32px 22px;}
    .tl-card{padding:18px;}
    .footer-bottom{flex-direction:column;align-items:flex-start;}
  }
  @media (max-width:400px){
    .metrics{grid-template-columns:1fr;}
  }