/* roulang page: index */
:root{
  --primary:#2B5CE6;
  --primary-hover:#1E48C8;
  --primary-active:#17379E;
  --primary-soft:#EEF3FF;
  --accent:#FF6B35;
  --accent-hover:#F05520;
  --teal:#12B2A0;
  --teal-soft:#E6F7F4;
  --ink:#1B2233;
  --ink-2:#5A6478;
  --ink-3:#8A93A6;
  --bg:#F5F7FB;
  --surface:#FFFFFF;
  --line:#E6EAF2;
  --footer-bg:#101A30;
  --footer-text:#C9D2E3;
  --radius-card:18px;
  --radius-btn:12px;
  --radius-img:14px;
  --radius-input:10px;
  --shadow-card:0 1px 2px rgba(20,32,64,.04), 0 8px 24px rgba(20,32,64,.06);
  --shadow-hover:0 12px 32px rgba(20,32,64,.10);
  --ease:160ms ease;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}
h1,h2,h3,h4{letter-spacing:-0.01em;line-height:1.3;}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px;}
::selection{background:var(--primary);color:#fff;}

.container-x{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;}
@media(min-width:768px){.container-x{padding:0 32px;}}
@media(min-width:1024px){.container-x{padding:0 40px;}}

.section{padding:56px 0;}
@media(min-width:1024px){.section{padding:96px 0;}}
.section-sm{padding:48px 0;}
@media(min-width:1024px){.section-sm{padding:80px 0;}}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--primary);background:var(--primary-soft);
  padding:6px 14px;border-radius:999px;
}
.eyebrow.teal{color:#0E8A7C;background:var(--teal-soft);}
.section-title{font-size:26px;font-weight:600;}
@media(min-width:1024px){.section-title{font-size:31px;}}
.section-desc{color:var(--ink-2);font-size:15px;margin-top:12px;}

/* ============ 顶部 Dock 导航 ============ */
.dock-wrap{position:fixed;top:16px;left:0;right:0;z-index:60;padding:0 16px;transition:top var(--ease);}
@media(min-width:1024px){.dock-wrap{top:20px;padding:0 24px;}}
.dock{
  max-width:1120px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 10px 8px 16px;
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(10px);
  transition:box-shadow var(--ease);
}
.dock.scrolled{box-shadow:0 10px 28px rgba(20,32,64,.12);}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--primary) 0%,#4F7BFF 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;font-weight:700;line-height:1;
  box-shadow:0 4px 10px rgba(43,92,230,.28);
}
.brand-name{font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;}
@media(min-width:1024px){.brand-name{font-size:17px;}}
.nav-list{display:none;align-items:center;gap:4px;}
@media(min-width:900px){.nav-list{display:flex;}}
.nav-link{
  position:relative;display:inline-flex;align-items:center;
  height:40px;padding:0 16px;border-radius:999px;
  font-size:15px;color:var(--ink-2);
  transition:color var(--ease),background var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:50%;bottom:5px;transform:translateX(-50%) scaleX(0);
  width:16px;height:2px;border-radius:2px;background:var(--primary);
  transition:transform 200ms ease;
}
.nav-link:hover{color:var(--primary);background:var(--primary-soft);}
.nav-link:hover::after{transform:translateX(-50%) scaleX(1);}
.nav-link.is-active{color:var(--primary);background:var(--primary-soft);font-weight:600;}
.nav-link.is-active::after{transform:translateX(-50%) scaleX(1);}
.dock-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{
  width:40px;height:40px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);border:1px solid transparent;
  transition:all var(--ease);
}
.icon-btn:hover{color:var(--primary);background:var(--primary-soft);}
.hamburger{display:inline-flex;}
@media(min-width:900px){.hamburger{display:none;}}

.mobile-panel{
  max-width:1120px;margin:10px auto 0;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-hover);padding:10px;display:none;
}
.mobile-panel.open{display:block;}
.mobile-panel a{
  display:flex;align-items:center;height:46px;padding:0 16px;border-radius:12px;
  color:var(--ink-2);font-size:15px;transition:all var(--ease);
}
.mobile-panel a:hover,.mobile-panel a.is-active{background:var(--primary-soft);color:var(--primary);font-weight:600;}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:var(--radius-btn);
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:all 180ms ease;border:1px solid transparent;
}
.btn:active{transform:translateY(1px);}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(255,107,53,.26);}
.btn-accent:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 12px 24px rgba(255,107,53,.32);}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(43,92,230,.24);}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px);}
.btn-sm{height:40px;padding:0 18px;font-size:14px;}
.btn-block{width:100%;}
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--primary);font-size:14px;font-weight:600;
  transition:color var(--ease);
}
.link-arrow svg{transition:transform 200ms ease;}
.link-arrow:hover{color:var(--primary-hover);}
.link-arrow:hover svg{transform:translateX(3px);}

/* ============ 卡片 / 徽章 ============ */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease;
}
.card-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:#D9E3FB;}
.badge{
  display:inline-flex;align-items:center;
  font-size:12px;line-height:1;padding:5px 10px;border-radius:6px;
  background:var(--primary-soft);color:var(--primary);font-weight:600;
}
.badge-teal{background:var(--teal-soft);color:#0E8A7C;}
.chip{
  display:inline-flex;align-items:center;height:34px;padding:0 16px;
  border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:13px;color:var(--ink-2);transition:all var(--ease);
}
.chip:hover{border-color:var(--primary);color:var(--primary);}
.chip.is-active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600;}

.img-frame{position:relative;overflow:hidden;border-radius:var(--radius-img);background:var(--primary-soft);}
.img-frame img{width:100%;height:100%;object-fit:cover;}

/* ============ Hero ============ */
.hero{padding-top:132px;padding-bottom:56px;background:linear-gradient(180deg,#FFFFFF 0%,#F5F7FB 100%);}
@media(min-width:1024px){.hero{padding-top:168px;padding-bottom:96px;}}
.hero h1{font-size:31px;font-weight:600;line-height:1.28;}
@media(min-width:768px){.hero h1{font-size:40px;}}
@media(min-width:1024px){.hero h1{font-size:48px;letter-spacing:-0.02em;}}
.hero-sub{font-size:16px;color:var(--ink-2);margin-top:18px;max-width:560px;}
@media(min-width:1024px){.hero-sub{font-size:17px;}}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;}
.trust-item{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);}
.trust-item svg{color:var(--teal);flex-shrink:0;}
.hero-visual{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 18px 44px rgba(20,32,64,.12);}
.hero-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,92,230,.10) 0%,rgba(43,92,230,.26) 100%);
  pointer-events:none;
}
.hero-visual img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.floating-stat{
  position:absolute;left:18px;bottom:18px;z-index:2;
  background:rgba(255,255,255,.96);border-radius:14px;
  padding:12px 18px;box-shadow:0 10px 26px rgba(20,32,64,.16);
  display:flex;align-items:center;gap:12px;
}
.floating-stat .num{font-size:24px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;line-height:1;}
.floating-stat .txt{font-size:12.5px;color:var(--ink-2);}

/* ============ 痛点问答 ============ */
.ask-item{
  display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line);
}
.ask-item:last-child{border-bottom:0;}
.ask-num{
  flex-shrink:0;width:28px;height:28px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.answer-box{
  background:var(--primary-soft);border-radius:16px;padding:18px 20px;
  font-size:14.5px;color:var(--ink-2);line-height:1.75;
  border:1px solid #DDE7FF;
}
.answer-box strong{color:var(--primary);font-weight:600;}

/* ============ Bento 卡片 ============ */
.bento-main{grid-column:span 1;}
@media(min-width:1024px){.bento-main{grid-column:span 2;}}
.mini-card{
  display:flex;flex-direction:column;gap:10px;
  padding:22px;border-radius:var(--radius-card);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease;
}
.mini-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:#D9E3FB;}
.mini-num{
  width:34px;height:34px;border-radius:10px;background:var(--primary-soft);
  color:var(--primary);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.mini-card h3{font-size:17px;font-weight:600;}
.mini-card p{font-size:14px;color:var(--ink-2);line-height:1.7;}

/* ============ 数据带 ============ */
.stats-band{
  background:#F0F5FF;border-top:1px solid #E2EAFF;border-bottom:1px solid #E2EAFF;
}
.stat-cell{
  padding:26px 20px;text-align:center;
  border-right:1px solid #DCE6FF;
}
.stat-cell:last-child{border-right:0;}
@media(max-width:640px){
  .stat-cell{border-right:0;border-bottom:1px solid #DCE6FF;}
  .stat-cell:nth-child(odd){border-right:1px solid #DCE6FF;}
  .stat-cell:nth-last-child(-n+2){border-bottom:0;}
}
.stat-num{font-size:32px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;line-height:1.1;}
@media(min-width:1024px){.stat-num{font-size:38px;}}
.stat-num.accent{color:var(--accent);}
.stat-label{font-size:13.5px;color:var(--ink-2);margin-top:8px;}

/* ============ 资讯列表 ============ */
.news-card{
  display:grid;grid-template-columns:1fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease;
}
@media(min-width:640px){.news-card{grid-template-columns:220px 1fr;}}
@media(min-width:1024px){.news-card{grid-template-columns:260px 1fr;}}
.news-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:#D9E3FB;}
.news-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--primary-soft);}
.news-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 400ms ease;}
.news-card:hover .thumb img{transform:scale(1.04);}
.news-body{padding:20px 22px;display:flex;flex-direction:column;gap:10px;}
.news-body h3{font-size:17px;font-weight:600;line-height:1.45;}
.news-body h3 a{transition:color var(--ease);}
.news-body h3 a:hover{color:var(--primary);}
.news-body p{font-size:14px;color:var(--ink-2);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--ink-3);margin-top:auto;}
.news-meta .dot{width:3px;height:3px;border-radius:50%;background:#C7CEDC;}
.empty-state{
  text-align:center;padding:56px 24px;background:#fff;
  border:1px dashed #D6DEEC;border-radius:var(--radius-card);
}
.empty-state .icon{
  width:56px;height:56px;border-radius:16px;background:var(--primary-soft);
  color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.empty-state p{color:var(--ink-2);font-size:15px;}

/* ============ FAQ ============ */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 2px;font-size:16px;font-weight:500;color:var(--ink);
  transition:color var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--primary);}
.faq-icon{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);position:relative;
  transition:transform 240ms ease,background 240ms ease,border-color 240ms ease;
}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink-2);
  transform:translate(-50%,-50%);transition:background 240ms ease;
}
.faq-icon::before{width:11px;height:1.6px;}
.faq-icon::after{width:1.6px;height:11px;}
.faq-item[open] .faq-icon{transform:rotate(180deg);background:var(--primary);border-color:var(--primary);}
.faq-item[open] .faq-icon::before,.faq-item[open] .faq-icon::after{background:#fff;}
.faq-item[open] .faq-icon::after{opacity:0;}
.faq-body{padding:0 40px 22px 2px;font-size:15px;color:var(--ink-2);line-height:1.8;}

/* ============ 表单 ============ */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-card);padding:26px;
}
@media(min-width:1024px){.form-card{padding:30px;}}
.field{margin-bottom:16px;}
.field label{display:block;font-size:14px;color:var(--ink);margin-bottom:8px;font-weight:500;}
.field input,.field select,.field textarea{
  width:100%;height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--radius-input);
  background:#fff;font-size:15px;color:var(--ink);
  transition:border-color var(--ease),box-shadow var(--ease);
}
.field textarea{height:auto;padding:12px 14px;resize:vertical;min-height:96px;line-height:1.7;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(43,92,230,.14);
}
.field .err{display:none;font-size:12.5px;color:#E23B3B;margin-top:6px;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#E23B3B;}
.field.has-error .err{display:block;}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);line-height:1.6;margin-top:12px;}
.consent input{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--primary);}
.privacy-list li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);padding:7px 0;}
.privacy-list svg{flex-shrink:0;color:var(--teal);margin-top:4px;}

/* ============ 模态表单 ============ */
.modal-mask{
  position:fixed;inset:0;z-index:100;
  background:rgba(15,23,41,.55);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-mask.open{display:flex;}
.modal-panel{
  width:100%;max-width:440px;background:#fff;border-radius:20px;
  padding:26px;box-shadow:0 24px 60px rgba(9,16,34,.32);
  max-height:88vh;overflow-y:auto;
  animation:panelIn 220ms ease;
}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
@media(max-width:640px){
  .modal-mask{align-items:flex-end;padding:0;}
  .modal-panel{max-width:100%;border-radius:24px 24px 0 0;animation:sheetIn 240ms ease;}
  @keyframes sheetIn{from{transform:translateY(100%);}to{transform:translateY(0);}}
}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;}
.modal-head h3{font-size:19px;font-weight:600;}
.modal-head p{font-size:13.5px;color:var(--ink-3);margin-top:6px;}
.modal-close{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
  transition:all var(--ease);
}
.modal-close:hover{background:var(--bg);color:var(--ink);}
.form-success{display:none;text-align:center;padding:26px 6px;}
.form-success.show{display:block;}
.success-icon{
  width:56px;height:56px;border-radius:50%;background:var(--teal-soft);
  color:var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:spin .7s linear infinite;display:none;
}
@keyframes spin{to{transform:rotate(360deg);}}
.is-loading .spinner{display:inline-block;}
.is-loading .btn-label{opacity:.85;}

/* ============ 页脚 ============ */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:56px 0 0;margin-top:0;}
.site-footer h4{font-size:15px;color:#fff;font-weight:600;margin-bottom:16px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;}}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-desc{font-size:14px;color:#9AA7C0;line-height:1.8;max-width:320px;}
.footer-links li{margin-bottom:10px;}
.footer-links a{font-size:14px;color:var(--footer-text);transition:color var(--ease);border-bottom:1px solid transparent;padding-bottom:1px;}
.footer-links a:hover{color:#fff;border-bottom-color:#fff;}
.footer-contact li{font-size:14px;color:#9AA7C0;margin-bottom:12px;display:flex;gap:10px;}
.footer-contact strong{color:#fff;font-weight:600;display:block;font-size:14px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  margin-top:44px;padding:22px 0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:13px;color:#7E8BA6;
}
.footer-bottom a{color:#9AA7C0;}
.footer-bottom a:hover{color:#fff;}

/* 文本截断 */
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}

/* roulang page: article */
:root {
    --primary: #2B5CE6;
    --primary-hover: #1E48C8;
    --primary-press: #17379E;
    --primary-soft: #EEF3FF;
    --accent: #FF6B35;
    --accent-hover: #E85A26;
    --teal: #12B2A0;
    --ink: #1B2233;
    --ink-2: #5A6478;
    --ink-3: #8A93A6;
    --bg: #F5F7FB;
    --surface: #FFFFFF;
    --line: #E6EAF2;
    --footer-bg: #101A30;
    --radius-card: 18px;
    --radius-btn: 12px;
    --shadow-card: 0 1px 2px rgba(20, 32, 64, .04), 0 8px 24px rgba(20, 32, 64, .06);
    --shadow-card-hover: 0 12px 32px rgba(20, 32, 64, .10);
    --container: 1200px;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  a { color: inherit; text-decoration: none; }

  img { max-width: 100%; display: block; }

  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

  h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

  p { margin: 0; }

  ul, ol { margin: 0; padding: 0; list-style: none; }

  :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

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

  /* ---------- 浮动 Dock 导航 ---------- */
  .site-header {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 0 20px;
  }

  .dock {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 14px 10px 18px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-card);
    transition: box-shadow .22s ease, background .22s ease;
  }

  .dock.is-scrolled { box-shadow: var(--shadow-card-hover); background: #fff; }

  .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

  .brand-mark {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0;
  }

  .brand-text { font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
  }

  .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 15px;
    color: var(--ink-2);
    transition: color .18s ease, background .18s ease;
    white-space: nowrap;
  }

  .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width .22s ease;
  }

  .nav-link:hover { color: var(--primary); }
  .nav-link:hover::after { width: 18px; }

  .nav-link.is-active {
    color: var(--primary);
    background: var(--primary-soft);
    font-weight: 600;
  }
  .nav-link.is-active::after { width: 0; }

  .dock-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

  .menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--ink-2);
    transition: color .18s ease, border-color .18s ease;
  }
  .menu-toggle:hover { color: var(--primary); border-color: var(--primary); }

  .mobile-panel {
    display: none;
    max-width: 1120px;
    margin: 10px auto 0;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-card-hover);
  }
  .mobile-panel.is-open { display: block; }
  .mobile-panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 15px;
    color: var(--ink-2);
  }
  .mobile-panel a:hover { background: var(--primary-soft); color: var(--primary); }
  .mobile-panel a.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

  /* ---------- 按钮 ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border-radius: var(--radius-btn);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }

  .btn-primary { background: var(--primary); color: #fff; }
  .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
  .btn-primary:active { background: var(--primary-press); transform: translateY(0); }

  .btn-accent { background: var(--accent); color: #fff; }
  .btn-accent:hover { background: var(--accent-hover); transform: translateY(-1px); }
  .btn-accent:active { transform: translateY(0); }

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

  .btn-sm { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 10px; }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
  }
  .link-arrow span { transition: transform .18s ease; }
  .link-arrow:hover span { transform: translateX(3px); }

  /* ---------- 文章页顶部 ---------- */
  .page-main { padding-top: 128px; padding-bottom: 96px; }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 18px;
  }
  .breadcrumb a { color: var(--ink-3); transition: color .18s ease; }
  .breadcrumb a:hover { color: var(--primary); }
  .breadcrumb .sep { color: #C3CAD8; }
  .breadcrumb .current { color: var(--ink-2); }

  .article-head {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .article-head-inner { padding: 34px 40px 28px; }

  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
  }

  .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

  .article-h1 {
    font-size: 38px;
    line-height: 1.32;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -.01em;
    max-width: 900px;
  }

  .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-3);
  }

  .article-meta .meta-item { display: inline-flex; align-items: center; gap: 7px; }

  .badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--primary-soft);
    color: var(--primary);
  }
  .badge-teal { background: rgba(18, 178, 160, .12); color: #0E8E80; }

  .article-cover {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    background: var(--primary-soft);
    border-top: 1px solid var(--line);
  }

  /* ---------- 阅读布局 ---------- */
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: start;
    margin-top: 28px;
  }

  .article-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 40px;
    min-width: 0;
  }

  .article-body {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.85;
    color: #28303F;
    word-break: break-word;
  }

  .article-body > * + * { margin-top: 18px; }

  .article-body p { margin: 0; color: #28303F; }

  .article-body h2 {
    position: relative;
    margin: 40px 0 16px;
    padding-left: 16px;
    font-size: 26px;
    line-height: 1.42;
    color: var(--ink);
  }
  .article-body h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .4em;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--primary);
  }

  .article-body h3 {
    margin: 28px 0 12px;
    font-size: 19px;
    color: #1E48C8;
  }

  .article-body h4 { margin: 22px 0 10px; font-size: 17px; color: var(--ink); }

  .article-body ul, .article-body ol { padding-left: 22px; }
  .article-body ul { list-style: disc; }
  .article-body ol { list-style: decimal; }
  .article-body li { margin: 8px 0; }
  .article-body li::marker { color: var(--primary); }

  .article-body blockquote {
    margin: 24px 0;
    padding: 16px 22px;
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    border-radius: 0 12px 12px 0;
    color: var(--ink-2);
    font-size: 16px;
  }
  .article-body blockquote p { color: var(--ink-2); }

  .article-body img {
    border-radius: 12px;
    margin: 22px auto;
    background: var(--primary-soft);
  }

  .article-body figure { margin: 22px 0; }
  .article-body figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-3);
  }

  .article-body a { color: var(--primary); border-bottom: 1px solid rgba(43, 92, 230, .3); }
  .article-body a:hover { color: var(--primary-hover); border-bottom-color: var(--primary-hover); }

  .article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 15px;
  }
  .article-body th, .article-body td {
    border: 1px solid var(--line);
    padding: 11px 14px;
    text-align: left;
  }
  .article-body th { background: var(--primary-soft); color: var(--ink); font-weight: 600; }
  .article-body tbody tr:hover td { background: #FAFBFF; }

  .article-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 20px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 16px;
    background: #FAFBFF;
  }
  .empty-state .empty-title { font-size: 18px; font-weight: 600; color: var(--ink); }
  .empty-state .empty-desc { font-size: 14px; color: var(--ink-3); }

  /* ---------- 侧栏 ---------- */
  .sidebar { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 20px; }

  .side-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 20px;
  }

  .side-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
  }
  .side-title .line { flex: 1; height: 1px; background: var(--line); margin-left: 12px; }

  .toc-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
  .toc-list a {
    display: block;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
    transition: background .18s ease, color .18s ease;
  }
  .toc-list a:hover { background: var(--primary-soft); color: var(--primary); }
  .toc-list a.is-current { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
  .toc-list a.toc-h3 { padding-left: 22px; font-size: 13px; color: var(--ink-3); }

  .side-post {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .side-post:last-child { border-bottom: 0; padding-bottom: 0; }
  .side-post img {
    width: 64px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--primary-soft);
  }
  .side-post .sp-title {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .18s ease;
  }
  .side-post:hover .sp-title { color: var(--primary); }

  .consult-card {
    background: linear-gradient(180deg, #EEF3FF 0%, #FFFFFF 100%);
    border: 1px solid #DCE6FF;
    border-radius: var(--radius-card);
    padding: 22px;
  }
  .consult-card h4 { font-size: 16px; color: var(--ink); }
  .consult-card p { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
  .consult-card .btn { width: 100%; margin-top: 16px; }

  /* ---------- 文末模块 ---------- */
  .article-foot { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

  .tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .tag-row .label { font-size: 13px; color: var(--ink-3); }
  .tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 13px;
    transition: background .18s ease, color .18s ease;
  }
  .tag:hover { background: var(--primary); color: #fff; }

  .back-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

  /* ---------- 通用卡片 ---------- */
  .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
    border-color: #D8E2FA;
  }

  .card-cover {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--primary-soft);
  }

  .card-body { padding: 20px 22px 22px; }

  .card-title {
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-desc {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--ink-3);
  }

  .section-head { margin-bottom: 26px; }
  .section-head h2 { font-size: 28px; color: var(--ink); }
  .section-head p { margin-top: 10px; font-size: 15px; color: var(--ink-2); }

  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

  /* ---------- 底部 CTA ---------- */
  .cta-band {
    margin-top: 72px;
    border-radius: 22px;
    background: #101A30;
    color: #fff;
    padding: 44px 46px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
  }
  .cta-band h2 { font-size: 26px; color: #fff; }
  .cta-band p { margin-top: 12px; font-size: 15px; line-height: 1.8; color: #C9D2E3; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .cta-points { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 20px; }
  .cta-points span { font-size: 13px; color: #9FB0CC; display: inline-flex; align-items: center; gap: 7px; }
  .cta-points i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--teal); display: inline-block;
  }

  /* ---------- 页脚 ---------- */
  .site-footer {
    margin-top: 96px;
    background: var(--footer-bg);
    color: #C9D2E3;
    padding: 64px 0 26px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 36px;
  }

  .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

  .footer-desc { font-size: 14px; line-height: 1.85; color: #96A5C0; max-width: 360px; }

  .site-footer h4 {
    font-size: 15px;
    color: #fff;
    margin-bottom: 16px;
    font-weight: 600;
  }

  .footer-links { display: flex; flex-direction: column; gap: 10px; }
  .footer-links a {
    font-size: 14px;
    color: #C9D2E3;
    transition: color .18s ease;
  }
  .footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

  .footer-contact { display: flex; flex-direction: column; gap: 14px; }
  .footer-contact li { display: flex; gap: 10px; font-size: 14px; line-height: 1.7; color: #C9D2E3; }
  .footer-contact strong { display: block; color: #fff; font-weight: 600; }

  .footer-bottom {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    font-size: 13px;
    color: #8C9CB6;
  }
  .footer-bottom a { color: #C9D2E3; }
  .footer-bottom a:hover { color: #fff; }

  .skip-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    color: var(--ink-2);
    z-index: 50;
    transition: color .18s ease, transform .18s ease;
  }
  .skip-top:hover { color: var(--primary); transform: translateY(-2px); }
  .skip-top.is-show { display: inline-flex; }

  /* ---------- 响应式 ---------- */
  @media (max-width: 1180px) {
    .article-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  }

  @media (max-width: 1024px) {
    .container-x { padding: 0 32px; }
    .nav-list { display: none; }
    .menu-toggle { display: inline-flex; }
    .dock { justify-content: space-between; }
    .article-layout { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; }
    .article-h1 { font-size: 32px; }
    .foot-grid-fix { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .cta-band { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 768px) {
    .page-main { padding-top: 112px; padding-bottom: 64px; }
    .dock-right .btn { display: none; }
    .article-head-inner { padding: 26px 22px 22px; }
    .article-panel { padding: 26px 20px; }
    .article-h1 { font-size: 28px; }
    .article-body { font-size: 16px; line-height: 1.8; }
    .article-body h2 { font-size: 22px; margin-top: 32px; }
    .article-body h3 { font-size: 17px; }
    .section-head h2 { font-size: 23px; }
    .cta-band { margin-top: 56px; border-radius: 18px; padding: 30px 22px; }
    .cta-band h2 { font-size: 21px; }
    .site-footer { margin-top: 64px; padding-top: 48px; }
  }

  @media (max-width: 640px) {
    .container-x { padding: 0 20px; }
    .site-header { top: 12px; padding: 0 14px; }
    .brand-text { font-size: 15px; }
    .article-head { border-radius: 18px; }
    .article-h1 { font-size: 24px; }
    .grid-3 { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; }
    .btn { height: 46px; padding: 0 20px; }
    .skip-top { right: 16px; bottom: 16px; }
  }

/* roulang page: category1 */
:root {
    --primary: #2B5CE6;
    --primary-hover: #1E48C8;
    --primary-press: #17379E;
    --primary-soft: #EEF3FF;
    --accent: #FF6B35;
    --accent-hover: #E85A26;
    --mint: #12B2A0;
    --ink: #1B2233;
    --ink-2: #5A6478;
    --ink-3: #8A93A6;
    --bg: #F5F7FB;
    --surface: #FFFFFF;
    --line: #E6EAF2;
    --foot-bg: #101A30;
    --foot-text: #C9D2E3;
    --radius-card: 18px;
    --radius-btn: 12px;
    --shadow-card: 0 1px 2px rgba(20, 32, 64, .04), 0 8px 24px rgba(20, 32, 64, .06);
    --shadow-hover: 0 12px 32px rgba(20, 32, 64, .10);
    --container: 1200px;
  }

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

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

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
  }

  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  input, select, textarea { font: inherit; color: inherit; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  h1, h2, h3, h4, p { margin: 0; }

  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
  }

  ::selection { background: var(--primary-soft); color: var(--primary-press); }

  .container-x {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  .num { font-variant-numeric: tabular-nums; }

  /* ---------- 顶部 Dock 导航 ---------- */
  .site-header {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 0 16px;
  }

  .dock {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 18px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(140%) blur(8px);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-card);
    transition: box-shadow .22s ease, background .22s ease;
  }

  .site-header.is-scrolled .dock {
    box-shadow: var(--shadow-hover);
    background: #FFFFFF;
  }

  .dock-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .brand-text {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    flex: 1;
  }

  .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 15px;
    color: var(--ink-2);
    transition: color .18s ease, background .18s ease;
  }

  .nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s ease;
  }

  .nav-link:hover { color: var(--primary); }
  .nav-link:hover::after { transform: scaleX(1); }

  .nav-link.is-active {
    color: var(--primary);
    background: var(--primary-soft);
    font-weight: 600;
  }

  .nav-link.is-active::after { transform: scaleX(0); }

  .dock-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: var(--ink-2);
    transition: background .18s ease, color .18s ease;
  }

  .icon-btn:hover { background: var(--primary-soft); color: var(--primary); }

  .hamburger {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--ink-2);
    transition: background .18s ease, color .18s ease;
  }

  .hamburger:hover { background: var(--primary-soft); color: var(--primary); }

  .mobile-panel {
    display: none;
    max-width: 1120px;
    margin: 10px auto 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-hover);
    padding: 10px;
  }

  .mobile-panel.is-open { display: block; }

  .mobile-panel a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    color: var(--ink-2);
    font-size: 15px;
    transition: background .18s ease, color .18s ease;
  }

  .mobile-panel a:hover { background: var(--primary-soft); color: var(--primary); }
  .mobile-panel a.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

  /* ---------- 按钮 ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 22px;
    border-radius: var(--radius-btn);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }

  .btn:active { transform: translateY(1px); }

  .btn-accent {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 107, 53, .24);
  }

  .btn-accent:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 107, 53, .3); }

  .btn-primary { background: var(--primary); color: #fff; }
  .btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
  .btn-primary:active { background: var(--primary-press); }

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

  .btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

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

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    transition: color .18s ease;
  }

  .link-arrow svg { transition: transform .18s ease; }
  .link-arrow:hover { color: var(--primary-hover); }
  .link-arrow:hover svg { transform: translateX(2px); }

  /* ---------- 标签 / 徽章 ---------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
  }

  .badge-mint { background: rgba(18, 178, 160, .1); color: #0E8F81; }
  .badge-plain { background: #F1F4FA; color: var(--ink-2); }

  .tag {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    font-size: 13px;
  }

  /* ---------- 卡片 ---------- */
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  }

  .card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    border-color: #D9E3FA;
  }

  /* ---------- 面包屑 ---------- */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-3);
  }

  .breadcrumb a { color: var(--ink-2); transition: color .18s ease; }
  .breadcrumb a:hover { color: var(--primary); }
  .breadcrumb .sep { color: #C2C9D6; }

  /* ---------- 分类 Hero ---------- */
  .hero-cat {
    padding-top: 132px;
    padding-bottom: 56px;
  }

  .hero-cat h1 {
    font-size: 34px;
    line-height: 1.28;
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .hero-lead {
    margin-top: 14px;
    font-size: 16px;
    color: var(--ink-2);
    max-width: 620px;
  }

  .hero-figure {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: var(--primary-soft);
  }

  .hero-figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 24px;
  }

  .hero-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(43, 92, 230, .10);
    border-radius: 24px;
    pointer-events: none;
  }

  /* ---------- 板块 ---------- */
  .section { padding: 44px 0; }
  .section-lg { padding: 64px 0; }

  .section-head { margin-bottom: 28px; }

  .section-head h2 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .section-head p {
    margin-top: 8px;
    color: var(--ink-2);
    font-size: 15px;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
  }

  .eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
  }

  /* ---------- 左图右文长内容 ---------- */
  .story-figure {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--primary-soft);
    box-shadow: var(--shadow-card);
  }

  .story-figure img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-card);
  }

  .story-figure figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 18px 14px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(to top, rgba(16, 26, 48, .68), rgba(16, 26, 48, 0));
  }

  .story-block + .story-block { margin-top: 26px; }

  .story-block h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .story-block h3::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--primary);
  }

  .story-block p {
    color: var(--ink-2);
    font-size: 15.5px;
  }

  /* ---------- 要点清单 ---------- */
  .check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 15px;
    color: var(--ink);
  }

  .check-list li:last-child { border-bottom: 0; }

  .check-dot {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
  }

  /* ---------- 数据条 ---------- */
  .stat-band {
    background: #F0F5FF;
    border-top: 1px solid #E2EAFB;
    border-bottom: 1px solid #E2EAFB;
    padding: 40px 0;
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat-item {
    padding: 6px 20px;
    border-left: 1px solid #DCE5F8;
  }

  .stat-item:first-child { border-left: 0; }

  .stat-num {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--primary);
    letter-spacing: -.02em;
  }

  .stat-num.is-accent { color: var(--accent); }

  .stat-label {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--ink-2);
  }

  /* ---------- FAQ ---------- */
  .faq-item { border-bottom: 1px solid var(--line); }

  .faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 2px;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    transition: color .18s ease;
  }

  .faq-q:hover { color: var(--primary); }

  .faq-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--primary);
    transition: transform .24s ease, background .2s ease, border-color .2s ease;
  }

  .faq-item.is-open .faq-icon {
    transform: rotate(180deg);
    background: var(--primary-soft);
    border-color: #D5E0FB;
  }

  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }

  .faq-a-inner {
    padding: 0 2px 20px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--ink-2);
  }

  /* ---------- CTA / 表单 ---------- */
  .cta-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .field-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 6px;
  }

  .field {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    color: var(--ink);
    transition: border-color .18s ease, box-shadow .18s ease;
  }

  .field::placeholder { color: var(--ink-3); }

  .field:hover { border-color: #D5DDEB; }

  .field:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43, 92, 230, .12);
  }

  .field.has-error {
    border-color: #E24C4C;
    box-shadow: 0 0 0 3px rgba(226, 76, 76, .12);
  }

  .field-msg {
    margin-top: 6px;
    font-size: 12.5px;
    color: #D93B3B;
    min-height: 0;
  }

  .privacy-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-3);
  }

  .privacy-row input { margin-top: 3px; width: 15px; height: 15px; accent-color: var(--primary); }

  .form-success {
    display: none;
    padding: 34px 22px;
    text-align: center;
  }

  .form-success.is-visible { display: block; }

  .success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(18, 178, 160, .12);
    color: var(--mint);
    margin-bottom: 14px;
  }

  /* ---------- 页脚 ---------- */
  .site-footer {
    background: var(--foot-bg);
    color: var(--foot-text);
    margin-top: 72px;
    padding: 56px 0 0;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 32px;
    padding-bottom: 40px;
  }

  .footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .footer-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #9FABC4;
    max-width: 320px;
  }

  .site-footer h4 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
  }

  .footer-links li + li { margin-top: 10px; }

  .footer-links a {
    font-size: 14px;
    color: var(--foot-text);
    transition: color .18s ease;
  }

  .footer-links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .footer-contact li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--foot-text);
  }

  .footer-contact li + li { margin-top: 12px; }

  .footer-contact strong {
    display: block;
    font-weight: 500;
    color: #8E9BB8;
    font-size: 13px;
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px;
    color: #8E9BB8;
  }

  .footer-bottom a { color: var(--foot-text); }
  .footer-bottom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

  /* ---------- 响应式 ---------- */
  @media (max-width: 1024px) {
    .nav-list { display: none; }
    .hamburger { display: inline-flex; }
    .hero-cat { padding-top: 120px; }
    .hero-cat h1 { font-size: 30px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .story-figure img { aspect-ratio: 16 / 10; }
  }

  @media (max-width: 768px) {
    .section { padding: 34px 0; }
    .section-lg { padding: 46px 0; }
    .section-head h2 { font-size: 24px; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
    .stat-item { border-left: 0; padding: 4px 0; }
    .stat-item:nth-child(odd) { border-right: 1px solid #DCE5F8; padding-right: 16px; }
    .stat-num { font-size: 28px; }
    .btn { width: 100%; }
    .btn-inline-auto { width: auto; }
    .cta-wrap { border-radius: 18px; }
    .hero-cat { padding-top: 108px; padding-bottom: 40px; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-desc { max-width: none; }
  }

  @media (max-width: 520px) {
    .dock { padding: 8px 10px 8px 14px; gap: 8px; }
    .brand-text { font-size: 15px; }
    .dock-actions .btn { display: none; }
    .hero-cat h1 { font-size: 27px; }
    .stat-num { font-size: 25px; }
  }

/* roulang page: category2 */
:root{
    --primary:#2B5CE6;
    --primary-hover:#1E48C8;
    --primary-press:#17379E;
    --primary-soft:#EEF3FF;
    --accent:#FF6B35;
    --accent-hover:#E85A26;
    --teal:#12B2A0;
    --ink:#1B2233;
    --ink-2:#5A6478;
    --ink-3:#8A93A6;
    --bg:#F5F7FB;
    --surface:#FFFFFF;
    --line:#E6EAF2;
    --footer-bg:#101A30;
    --radius-card:18px;
    --radius-btn:12px;
    --shadow-card:0 1px 2px rgba(20,32,64,.04), 0 8px 24px rgba(20,32,64,.06);
    --shadow-card-hover:0 12px 32px rgba(20,32,64,.10);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body{
    margin:0;
    font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
    font-size:16px;
    line-height:1.75;
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
  p{ margin:0; }
  ul,ol{ margin:0; padding:0; list-style:none; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
  input,select,textarea{ font:inherit; color:inherit; }
  :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px; }
  ::selection{ background:#D7E2FF; color:#12204A; }

  .container-x{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
  @media (min-width:768px){ .container-x{ padding:0 32px; } }
  @media (min-width:1024px){ .container-x{ padding:0 40px; } }

  /* ---------- 顶部浮动导航 ---------- */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:80;
    padding:16px 20px 0;
  }
  .nav-shell{
    max-width:1120px; margin:0 auto;
    display:flex; align-items:center; gap:14px;
    padding:10px 14px 10px 16px;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(160%) blur(8px);
    backdrop-filter:saturate(160%) blur(8px);
    border:1px solid var(--line);
    border-radius:999px;
    box-shadow:var(--shadow-card);
    transition:box-shadow .22s ease, border-color .22s ease;
  }
  .site-header.is-scrolled .nav-shell{
    box-shadow:0 2px 6px rgba(20,32,64,.06), 0 14px 36px rgba(20,32,64,.12);
    border-color:#DCE3F2;
  }
  .brand{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; }
  .brand-mark{
    width:34px; height:34px; border-radius:11px;
    background:var(--primary); color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:15px; font-weight:700; letter-spacing:.02em;
    box-shadow:0 4px 12px rgba(43,92,230,.28);
  }
  .brand-text{ font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; }

  .nav-list{ display:none; flex:1; justify-content:center; align-items:center; gap:4px; }
  @media (min-width:768px){ .nav-list{ display:flex; } }
  .nav-link{
    position:relative;
    display:inline-flex; align-items:center;
    height:38px; padding:0 16px;
    border-radius:999px;
    font-size:15px; color:var(--ink-2);
    transition:color .18s ease, background-color .18s ease;
  }
  .nav-link::after{
    content:""; position:absolute; left:50%; bottom:5px;
    width:0; height:2px; border-radius:2px; background:var(--primary);
    transform:translateX(-50%);
    transition:width .18s ease;
  }
  .nav-link:hover{ color:var(--primary); }
  .nav-link:hover::after{ width:16px; }
  .nav-link.is-active{ color:var(--primary); background:var(--primary-soft); font-weight:500; }
  .nav-link.is-active::after{ display:none; }

  .nav-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
  .icon-btn{
    width:42px; height:42px; border-radius:999px;
    border:1px solid var(--line); background:#fff; color:var(--ink-2);
    display:inline-flex; align-items:center; justify-content:center;
    transition:all .18s ease;
  }
  .icon-btn:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
  .icon-btn:active{ transform:translateY(1px); }

  .btn-cta{
    display:inline-flex; align-items:center; justify-content:center;
    height:42px; padding:0 20px; border-radius:999px;
    background:var(--accent); color:#fff; font-size:14px; font-weight:500;
    box-shadow:0 6px 16px rgba(255,107,53,.24);
    transition:all .18s ease;
    white-space:nowrap;
  }
  .btn-cta:hover{ background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 10px 22px rgba(255,107,53,.30); }
  .btn-cta:active{ background:#D9501F; transform:translateY(0); }

  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:999px;
    border:1px solid var(--line); background:#fff; color:var(--ink);
    transition:all .18s ease;
  }
  .menu-btn:hover{ border-color:var(--primary); color:var(--primary); }
  @media (min-width:768px){ .menu-btn{ display:none; } }

  .mobile-panel{
    display:none;
    max-width:1120px; margin:10px auto 0;
    padding:12px;
    background:#fff; border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow-card-hover);
  }
  .mobile-panel.is-open{ display:block; }
  @media (min-width:768px){ .mobile-panel{ display:none !important; } }
  .m-link{
    display:flex; align-items:center; min-height:44px; padding:0 16px;
    border-radius:12px; font-size:15px; color:var(--ink-2);
    transition:background-color .16s ease, color .16s ease;
  }
  .m-link:hover{ background:var(--primary-soft); color:var(--primary); }
  .m-link.is-active{ background:var(--primary-soft); color:var(--primary); font-weight:500; }
  .m-cta{ margin:10px 4px 4px; width:calc(100% - 8px); }

  .search-pop{
    display:none;
    max-width:1120px; margin:10px auto 0;
    padding:12px;
    background:#fff; border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow-card-hover);
  }
  .search-pop.is-open{ display:block; }
  .search-pop form{ display:flex; gap:10px; }
  @media (max-width:560px){ .search-pop form{ flex-direction:column; } }

  /* ---------- 通用组件 ---------- */
  .section{ padding:88px 0; }
  @media (max-width:767px){ .section{ padding:56px 0; } }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; letter-spacing:.10em;
    color:var(--primary); text-transform:uppercase;
  }
  .eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:var(--accent); }
  .section-title{ font-size:30px; margin-top:12px; }
  @media (max-width:767px){ .section-title{ font-size:24px; } }
  .section-sub{ margin-top:12px; font-size:15px; color:var(--ink-2); max-width:640px; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-height:46px; padding:0 22px;
    border-radius:var(--radius-btn);
    font-size:15px; font-weight:500;
    border:1px solid transparent;
    transition:all .18s ease;
    white-space:nowrap;
  }
  .btn-accent{ background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(255,107,53,.22); }
  .btn-accent:hover{ background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 10px 22px rgba(255,107,53,.28); }
  .btn-accent:active{ transform:translateY(0); background:#D9501F; }
  .btn-primary{ background:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(43,92,230,.20); }
  .btn-primary:hover{ background:var(--primary-hover); transform:translateY(-1px); }
  .btn-primary:active{ background:var(--primary-press); transform:translateY(0); }
  .btn-outline{ background:#fff; border-color:var(--line); color:var(--ink); }
  .btn-outline:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); }
  .btn:disabled,.btn[disabled]{ opacity:.62; cursor:not-allowed; transform:none; }

  .link-arrow{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--primary); font-size:15px; font-weight:500;
    transition:color .18s ease;
  }
  .link-arrow svg{ transition:transform .18s ease; }
  .link-arrow:hover{ color:var(--primary-hover); }
  .link-arrow:hover svg{ transform:translateX(3px); }

  .badge{
    display:inline-flex; align-items:center;
    height:24px; padding:0 10px; border-radius:999px;
    background:var(--primary-soft); color:var(--primary);
    font-size:12px; font-weight:500; letter-spacing:.02em;
  }
  .badge-teal{ background:#E4F7F4; color:#0E8C7E; }

  .crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); }
  .crumb a{ color:var(--ink-3); transition:color .16s ease; }
  .crumb a:hover{ color:var(--primary); }
  .crumb span[aria-current]{ color:var(--ink-2); }

  .num{ font-variant-numeric:tabular-nums; }

  /* ---------- 分类 Hero ---------- */
  .hero-cat{
    padding:130px 0 64px;
    background:linear-gradient(180deg,#F1F5FF 0%, #F5F7FB 100%);
    border-bottom:1px solid var(--line);
  }
  @media (max-width:767px){ .hero-cat{ padding:112px 0 52px; } }
  .hero-title{ font-size:42px; margin-top:18px; }
  @media (max-width:1023px){ .hero-title{ font-size:36px; } }
  @media (max-width:767px){ .hero-title{ font-size:30px; } }
  .hero-lead{ margin-top:16px; font-size:16px; color:var(--ink-2); max-width:560px; }
  .hero-actions{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; }
  .hero-points{ margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 22px; }
  .hero-points li{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); }
  .hero-points svg{ flex:0 0 auto; }
  .hero-figure{
    position:relative;
    border-radius:24px; overflow:hidden;
    background:var(--primary-soft);
    border:1px solid var(--line);
    box-shadow:var(--shadow-card);
    aspect-ratio:4/3;
  }
  .hero-figure img{ width:100%; height:100%; object-fit:cover; }
  .hero-figure::after{
    content:""; position:absolute; inset:0;
    background:rgba(43,92,230,.10);
    pointer-events:none;
  }

  /* ---------- 数据带 ---------- */
  .stat-band{
    background:#F0F5FF;
    border-top:1px solid #DEE7FB;
    border-bottom:1px solid #DEE7FB;
    padding:40px 0;
  }
  .stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); }
  @media (min-width:768px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
  .stat-item{ padding:14px 22px; border-left:1px solid #D5E0F8; }
  .stat-item:first-child{ border-left:0; }
  @media (max-width:767px){
    .stat-item:nth-child(odd){ border-left:0; }
    .stat-item:nth-child(n+3){ margin-top:18px; padding-top:22px; border-top:1px solid #D5E0F8; }
  }
  .stat-num{ font-size:36px; font-weight:600; color:var(--primary); letter-spacing:-.02em; line-height:1.15; }
  .stat-num .unit{ font-size:18px; margin-left:2px; }
  .stat-num.is-accent{ color:var(--accent); }
  .stat-desc{ margin-top:6px; font-size:14px; color:var(--ink-2); }

  /* ---------- 图文卡片网格 ---------- */
  .media-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius-card);
    overflow:hidden;
    box-shadow:var(--shadow-card);
    display:flex; flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .media-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-card-hover);
    border-color:#D7E2FF;
  }
  .media-thumb{
    aspect-ratio:16/10; overflow:hidden; background:var(--primary-soft);
  }
  .media-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
  .media-card:hover .media-thumb img{ transform:scale(1.04); }
  .media-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .media-body h3{ font-size:19px; }
  .media-body p{ font-size:14.5px; color:var(--ink-2); }
  .media-foot{ margin-top:auto; padding-top:8px; }

  /* ---------- 时间轴 ---------- */
  .timeline{ position:relative; margin-top:8px; }
  .timeline-item{
    position:relative;
    display:grid; grid-template-columns:44px 1fr; gap:20px;
    padding-bottom:30px;
  }
  .timeline-item:last-child{ padding-bottom:0; }
  .timeline-item::before{
    content:""; position:absolute; left:21px; top:50px; bottom:6px;
    width:2px; background:var(--line); border-radius:2px;
  }
  .timeline-item:last-child::before{ display:none; }
  .timeline-marker{
    position:relative; z-index:1;
    width:44px; height:44px; border-radius:999px;
    background:#fff; border:2px solid var(--primary); color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:600;
    font-variant-numeric:tabular-nums;
  }
  .timeline-item:hover .timeline-marker{ background:var(--primary); color:#fff; }
  .timeline-marker{ transition:background-color .18s ease, color .18s ease; }
  .timeline-card{
    background:#fff; border:1px solid var(--line);
    border-radius:16px; padding:18px 22px;
    box-shadow:var(--shadow-card);
    transition:border-color .18s ease, transform .18s ease;
  }
  .timeline-item:hover .timeline-card{ border-color:#D7E2FF; transform:translateY(-2px); }
  .timeline-card h3{ font-size:18px; }
  .timeline-card p{ margin-top:8px; font-size:14.5px; color:var(--ink-2); }

  /* ---------- FAQ ---------- */
  .faq{
    background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-card); overflow:hidden;
    box-shadow:var(--shadow-card);
  }
  .faq-item + .faq-item{ border-top:1px solid var(--line); }
  .faq-q{
    width:100%; min-height:60px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 24px; text-align:left;
    font-size:16px; font-weight:500; color:var(--ink);
    transition:background-color .16s ease, color .16s ease;
  }
  .faq-q:hover{ background:#FAFBFE; color:var(--primary); }
  .faq-icon{ position:relative; flex:0 0 20px; width:20px; height:20px; }
  .faq-icon::before,.faq-icon::after{
    content:""; position:absolute; background:var(--primary); border-radius:2px;
    transition:transform .24s ease, opacity .24s ease;
  }
  .faq-icon::before{ left:0; top:9px; width:20px; height:2px; }
  .faq-icon::after{ left:9px; top:0; width:2px; height:20px; }
  .faq-item.is-open .faq-icon::after{ transform:rotate(90deg); opacity:0; }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .faq-a p{ padding:0 24px 22px; font-size:15px; line-height:1.85; color:var(--ink-2); }

  /* ---------- CTA 表单 ---------- */
  .cta-section{
    background:linear-gradient(180deg,#EEF3FF 0%, #F5F7FB 100%);
    border-top:1px solid var(--line);
  }
  .promise-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); margin-bottom:12px; }
  .promise-list svg{ flex:0 0 auto; margin-top:4px; }

  .form-card{
    background:#fff; border:1px solid var(--line);
    border-radius:22px; padding:28px;
    box-shadow:var(--shadow-card);
  }
  @media (max-width:520px){ .form-card{ padding:20px; } }
  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:14px; font-weight:500; color:var(--ink-2); margin-bottom:7px; }
  .input{
    width:100%; height:46px; padding:0 14px;
    border:1px solid var(--line); border-radius:10px;
    background:#fff; color:var(--ink);
    transition:border-color .16s ease, box-shadow .16s ease;
  }
  .input::placeholder{ color:var(--ink-3); }
  .input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(43,92,230,.12); }
  textarea.input{ height:auto; min-height:96px; padding:12px 14px; line-height:1.7; resize:vertical; }
  select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
  .field.has-error .input{ border-color:#E23D3D; box-shadow:none; }
  .err{ display:none; margin-top:6px; font-size:13px; color:#E23D3D; }
  .field.has-error .err{ display:block; }
  .agree-row{ display:flex; gap:10px; align-items:flex-start; margin-top:4px; }
  .agree-row input{ width:17px; height:17px; margin-top:3px; accent-color:var(--primary); flex:0 0 auto; }
  .agree-row label{ font-size:13px; color:var(--ink-2); line-height:1.7; }
  .privacy-note{ margin-top:10px; font-size:12.5px; color:var(--ink-3); line-height:1.7; }

  .form-success{ text-align:center; padding:26px 10px; }
  .form-success .ok-icon{
    width:56px; height:56px; margin:0 auto 16px;
    border-radius:999px; background:#E4F7F4; color:#0E8C7E;
    display:flex; align-items:center; justify-content:center;
  }
  .form-success h3{ font-size:20px; }
  .form-success p{ margin-top:10px; font-size:14.5px; color:var(--ink-2); }

  .back-row{ padding:36px 0 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }

  /* ---------- 页脚 ---------- */
  .site-footer{ background:var(--footer-bg); color:#C9D2E3; padding:64px 0 28px; margin-top:0; }
  .footer-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
  @media (min-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (min-width:1024px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px; } }
  .footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .footer-brand .brand-mark{ box-shadow:none; }
  .footer-desc{ font-size:14px; line-height:1.85; color:#9FAAC4; max-width:360px; }
  .site-footer h4{ font-size:15px; color:#fff; margin:0 0 14px; }
  .footer-links li{ margin-bottom:10px; }
  .footer-links a{
    font-size:14px; color:#C9D2E3;
    border-bottom:1px solid transparent; padding-bottom:1px;
    transition:color .16s ease, border-color .16s ease;
  }
  .footer-links a:hover{ color:#fff; border-bottom-color:#fff; }
  .footer-contact li{ display:flex; gap:10px; font-size:14px; color:#C9D2E3; margin-bottom:12px; line-height:1.7; }
  .footer-contact strong{ display:block; color:#fff; font-weight:500; }
  .footer-bottom{
    margin-top:44px; padding-top:20px;
    border-top:1px solid rgba(255,255,255,.10);
    display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
    font-size:13px; color:#8593B0;
  }
  .footer-bottom a{ color:#C9D2E3; transition:color .16s ease; }
  .footer-bottom a:hover{ color:#fff; text-decoration:underline; }