/* roulang page: index */
:root{
  --bg-main:#F6F8FC;
  --bg-card:#FFFFFF;
  --bg-deep:#12263F;
  --bg-deep2:#1E3A5F;
  --brand1:#3C64E8;
  --brand2:#7C5CFC;
  --gold1:#F6B01E;
  --gold2:#FF8A00;
  --text1:#0E1C2D;
  --text2:#4C5C70;
  --text3:#8A94A6;
  --line:#D6DEE8;
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-card:0 8px 24px rgba(15,35,70,.08);
  --shadow-card-lg:0 18px 40px rgba(15,35,70,.14);
  --shadow-gold:0 20px 60px rgba(255,138,0,.16);
  --tr:.25s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg-main);
  color:var(--text1);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input{font:inherit;border:none;background:none;color:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold1);outline-offset:3px;border-radius:4px}
.container{width:100%;max-width:1248px;margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.skip-link{
  position:absolute;left:-999px;top:8px;background:var(--gold1);color:#0E1C2D;
  padding:10px 18px;border-radius:10px;z-index:1000;font-weight:600
}
.skip-link:focus{left:8px}
.topbar{position:relative;z-index:110;background:linear-gradient(90deg,#0F2035,#1E3A5F 55%,#12263F);color:rgba(255,255,255,.92);font-size:13px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:18px}
.topbar-left{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-dot{width:7px;height:7px;border-radius:50%;background:var(--gold1);box-shadow:0 0 0 4px rgba(246,176,30,.16);display:inline-block;flex:0 0 auto}
.topbar-right{display:flex;align-items:center;gap:14px;white-space:nowrap}
.topbar-right a{color:rgba(255,255,255,.86)}
.topbar-right a:hover{color:var(--gold1)}
.topbar-close{color:rgba(255,255,255,.6);font-size:15px;padding:4px 6px;line-height:1;transition:color var(--tr)}
.topbar-close:hover{color:#fff}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(246,248,252,.92);
  backdrop-filter:blur(12px);
  padding:14px 0;
}
.nav-panel{
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--bg-card);
  border-radius:18px;
  padding:10px 14px 10px 20px;
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--tr),transform var(--tr);
}
.site-header.is-stuck .nav-panel{
  box-shadow:0 12px 30px rgba(15,35,70,.14);
}
.brand{
  display:flex;flex-direction:column;justify-content:center;line-height:1.15;flex:0 0 auto;
}
.brand-name{
  font-size:22px;font-weight:800;letter-spacing:.01em;color:var(--text1);white-space:nowrap;
  background:linear-gradient(108deg,var(--text1) 0%,var(--text1) 62%,var(--brand1) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.brand-sub{font-size:11px;color:var(--text3);letter-spacing:.28em;margin-top:2px;font-weight:600;text-transform:uppercase}
.nav-list{
  display:flex;align-items:center;gap:8px;flex:1;justify-content:center;
}
.nav-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:14px;
  font-size:14px;font-weight:600;color:var(--text2);
  background:transparent;
  transition:background var(--tr),color var(--tr),box-shadow var(--tr);
  position:relative;white-space:nowrap;
}
.nav-link svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-link:hover{background:#F0F4FF;color:var(--brand1)}
.nav-link.active{color:var(--text1);background:#FDF4E7}
.nav-link.active::after{
  content:"";position:absolute;left:18px;right:18px;bottom:3px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold1),var(--gold2));opacity:.9;
}
.nav-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav-toggle{
  display:none;
  width:44px;height:44px;border-radius:12px;background:#F6F8FC;
  align-items:center;justify-content:center;transition:background var(--tr);
}
.nav-toggle:hover{background:var(--gold1)}
.nav-toggle svg{width:22px;height:22px;stroke:var(--text1);stroke-width:2;fill:none;stroke-linecap:round}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;border-radius:14px;line-height:1;
  transition:transform var(--tr),background var(--tr),box-shadow var(--tr),opacity var(--tr);
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:linear-gradient(135deg,var(--gold1),var(--gold2));
  color:#1A1F2E;box-shadow:0 12px 26px rgba(255,138,0,.2);
  height:48px;padding:0 24px;font-size:15px;
}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 16px 32px rgba(255,138,0,.28)}
.btn-dark{
  background:var(--bg-deep);color:#fff;
  height:48px;padding:0 24px;font-size:15px;
}
.btn-dark:hover{background:var(--bg-deep2)}
.btn-ghost-light{
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);
  height:48px;padding:0 24px;font-size:15px;
}
.btn-ghost-light:hover{background:rgba(255,255,255,.16)}
.btn-outline{
  border:1px solid var(--line);background:#fff;color:var(--text1);
  height:40px;padding:0 20px;font-size:14px;
}
.btn-outline:hover{border-color:var(--brand1);background:#F2F6FF}
.btn-sm{height:42px;padding:0 20px;font-size:14px;border-radius:12px}

.hero{
  position:relative;
  background:
    radial-gradient(900px 400px at 78% 20%,rgba(124,92,252,.22),transparent 60%),
    linear-gradient(115deg,rgba(10,20,36,.93) 0%,rgba(18,38,63,.84) 46%,rgba(30,58,95,.62) 100%),
    url("/assets/images/backpic/back-1.webp") center/cover no-repeat;
  color:#fff;
  padding:96px 0 72px;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;width:520px;height:520px;right:-200px;bottom:-220px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,176,30,.16),transparent 68%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2;max-width:820px}
.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:999px;
  padding:6px 14px;font-size:13px;margin-bottom:24px;font-weight:600;
}
.hero-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold1);box-shadow:0 0 0 4px rgba(246,176,30,.2)}
.hero h1{
  font-size:64px;line-height:1.12;font-weight:800;letter-spacing:-.01em;
  margin-bottom:20px;text-shadow:0 6px 30px rgba(0,0,0,.3);
}
.hero h1 .grad-gold{
  background:linear-gradient(120deg,#FDE68A,var(--gold1) 46%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-lead{
  font-size:20px;line-height:1.8;color:rgba(255,255,255,.84);margin-bottom:32px;max-width:680px;
}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}
.hero-data{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.data-chip{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px 16px;
  backdrop-filter:blur(6px);
}
.data-chip b{
  display:block;font-size:26px;font-weight:800;color:var(--gold1);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2;
}
.data-chip span{font-size:12px;color:rgba(255,255,255,.7);display:block;margin-top:4px}
.data-chip.hot{border-color:rgba(246,176,30,.35);background:linear-gradient(135deg,rgba(246,176,30,.12),rgba(255,138,0,.05))}

.sec-head{max-width:680px;margin-bottom:48px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--brand1);font-size:13px;font-weight:700;letter-spacing:.12em;
  margin-bottom:10px;text-transform:uppercase;
}
.eyebrow::after{content:"";width:28px;height:1px;background:var(--brand2)}
.sec-head.center .eyebrow::after{background:none}
.sec-head h2{
  font-size:36px;line-height:1.25;font-weight:800;color:var(--text1);margin-bottom:14px;
}
.sec-head p{font-size:16px;color:var(--text2)}

.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.why-card{
  display:flex;gap:18px;background:var(--bg-card);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-card);transition:box-shadow var(--tr),transform var(--tr);
}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-lg)}
.why-icon{
  flex:0 0 58px;width:58px;height:58px;border-radius:16px;
  background:linear-gradient(135deg,var(--brand1),var(--brand2));
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.why-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.why-body h3{font-size:19px;margin-bottom:8px;font-weight:700}
.why-body p{font-size:15px;color:var(--text2)}

.hot-section{background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-main) 100%)}
.hot-grid{display:grid;grid-template-columns:1.65fr 1fr 1fr;gap:24px}
.hot-card{
  background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card);transition:box-shadow var(--tr),transform var(--tr);
  display:flex;flex-direction:column;
}
.hot-card:hover{box-shadow:var(--shadow-card-lg);transform:translateY(-4px)}
.hot-media{position:relative;aspect-ratio:16/9;overflow:hidden}
.hot-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.hot-card:hover .hot-media img{transform:scale(1.04)}
.hot-media .picture-label{
  position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.92);color:var(--text1);
  font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;
}
.hot-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.hot-cat{
  font-size:12px;font-weight:700;color:var(--brand1);letter-spacing:.06em;margin-bottom:8px;
}
.hot-body h3{font-size:21px;line-height:1.45;font-weight:700;margin-bottom:10px}
.hot-body p{font-size:14px;color:var(--text2);flex:1}
.hot-more{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--text1);
  font-size:14px;margin-top:20px;transition:color var(--tr),gap var(--tr);
}
.hot-more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--tr)}
.hot-card:hover .hot-more{color:var(--brand1);gap:12px}
.hot-card:hover .hot-more svg{transform:translateX(3px)}
.hot-small .hot-body{padding:18px 20px}
.hot-small .hot-body h3{font-size:17px}

.channel-wrap{
  display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:stretch;
}
.channel-index{
  background:var(--bg-deep);border-radius:var(--radius-lg);padding:28px 20px;
  display:flex;flex-direction:column;gap:8px;color:#fff;
}
.channel-index-item{
  border-radius:14px;padding:12px 14px;font-size:15px;cursor:default;
  display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);
  background:transparent;border:1px solid transparent;transition:background var(--tr),border var(--tr);
  font-weight:600;
}
.channel-index-item .num{font-weight:800;font-size:13px;color:rgba(255,255,255,.36);font-variant-numeric:tabular-nums}
.channel-index-item.active{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);
  color:var(--gold1);
}
.channel-index-item.active .num{color:var(--gold1)}
.channel-pane{
  background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  padding:30px;display:flex;gap:30px;
}
.channel-pane-img{
  flex:0 0 300px;width:300px;border-radius:16px;overflow:hidden;position:relative;min-height:230px;
}
.channel-pane-img img{width:100%;height:100%;object-fit:cover}
.channel-pane-content{flex:1;display:flex;flex-direction:column;justify-content:center}
.channel-pane-content h3{font-size:26px;font-weight:800;margin-bottom:12px;line-height:1.3}
.channel-pane-content p{font-size:15px;color:var(--text2);margin-bottom:20px}
.u-list{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:22px}
.u-list li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text2);width:calc(50% - 9px)}
.u-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--gold1),var(--gold2));flex:0 0 auto}

.trust-band{
  background:linear-gradient(120deg,var(--bg-deep) 0%,#173257 100%);
  color:#fff;border-radius:var(--radius-xl);
  padding:56px 48px 44px;position:relative;overflow:hidden;
}
.trust-band::before{
  content:"";position:absolute;right:-80px;bottom:-160px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,176,30,.15),transparent 65%);
}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.trust-item b{
  display:block;font-size:44px;font-weight:800;color:var(--gold1);
  font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.02em;
}
.trust-item span{font-size:14px;color:rgba(255,255,255,.72);display:block;margin-top:6px}
.trust-label{font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.45);margin-bottom:26px;text-align:center}

.feed-panel{
  background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
  padding:36px 36px 20px;margin-top:8px;
}
.feed-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:16px}
.feed-link{
  display:inline-flex;align-items:center;gap:6px;color:var(--brand1);font-weight:600;font-size:14px;
}
.feed-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feed-link:hover{gap:10px}
.feed-list{border-top:1px solid #EDF1F7}
.feed-item{
  display:flex;gap:22px;padding:24px 4px;
  border-bottom:1px solid #EDF1F7;
  transition:background var(--tr),transform var(--tr);
}
.feed-item:last-of-type{border-bottom:none}
.feed-item:hover{transform:translateX(6px)}
.feed-num{
  font-size:20px;font-weight:800;color:rgba(18,38,63,.14);
  font-variant-numeric:tabular-nums;line-height:1;min-width:48px;margin-top:8px;
}
.feed-content h3{font-size:18px;line-height:1.5;margin-bottom:8px}
.feed-content h3 a{transition:color var(--tr)}
.feed-content h3 a:hover{color:var(--brand1)}
.feed-summary{font-size:14px;color:var(--text2);margin-bottom:12px;max-width:880px}
.feed-meta{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--text3)}
.tag{
  display:inline-block;background:rgba(60,100,232,.08);
  color:var(--brand1);padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;
}
.empty-news{
  text-align:center;padding:70px 20px;color:var(--text3);
}
.empty-news .empty-icon{
  display:block;font-size:40px;margin-bottom:12px;color:var(--brand2);line-height:1;
}
.empty-news p{font-size:16px}

.faq-list{max-width:900px;margin:0 auto}
.faq-item{
  background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-card);margin-bottom:14px;transition:box-shadow var(--tr);
}
.faq-item.is-open{box-shadow:var(--shadow-card-lg)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;text-align:left;font-size:17px;font-weight:700;color:var(--text1);
  border-radius:var(--radius-lg);
}
.faq-q .faq-arrow{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#F2F5FB;display:flex;align-items:center;justify-content:center;transition:transform var(--tr),background var(--tr)}
.faq-q .faq-arrow svg{width:17px;height:17px;stroke:var(--text1);fill:none;stroke-width:2}
.faq-item.is-open .faq-arrow{transform:rotate(180deg);background:linear-gradient(135deg,var(--gold1),var(--gold2))}
.faq-item.is-open .faq-arrow svg{stroke:#1A1F2E}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-inner{padding:0 26px 24px;font-size:15px;color:var(--text2)}

.cta-sec{
  background:linear-gradient(135deg,#0D1B2B,#1E3A5F 60%,#18315A);
  color:#fff;border-radius:var(--radius-xl);
  overflow:hidden;position:relative;
  background-image:radial-gradient(700px 320px at 80% 0%,rgba(124,92,252,.2),transparent 60%),url("/assets/images/backpic/back-2.webp");
  background-size:cover;background-position:center;
}
.cta-sec::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(12,25,47,.88),rgba(26,47,78,.67));border-radius:var(--radius-xl)}
.cta-grid{position:relative;display:grid;grid-template-columns:1.3fr .9fr;gap:54px;padding:74px 60px;align-items:center;z-index:1}
.cta-sec h2{font-size:38px;line-height:1.3;font-weight:800;letter-spacing:-.01em;margin-bottom:18px}
.cta-sec h2 span{background:linear-gradient(120deg,#FDE68A,var(--gold1),var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cta-desc{font-size:16px;color:rgba(255,255,255,.78);margin-bottom:28px;max-width:660px}
.cta-btns{display:flex;flex-wrap:wrap;gap:14px}
.subscribe-card{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:24px;padding:30px;
  backdrop-filter:blur(8px);
}
.subscribe-card h3{font-size:21px;font-weight:700;margin-bottom:12px}
.subscribe-card p{font-size:14px;color:rgba(255,255,255,.72);margin-bottom:20px}
.sub-form .form-row{display:flex;gap:10px;margin-bottom:10px}
.sub-form input{
  flex:1;min-width:0;height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);color:#fff;padding:0 16px;font-size:15px;
  transition:border var(--tr),box-shadow var(--tr);
}
.sub-form input::placeholder{color:rgba(255,255,255,.46)}
.sub-form input:focus{border-color:var(--gold1);box-shadow:0 0 0 4px rgba(246,176,30,.2);outline:none}
.sub-form .btn{height:50px}
.form-note{font-size:12px;color:rgba(255,255,255,.5)}
.form-success{
  display:none;background:rgba(22,163,74,.16);border:1px solid rgba(22,163,74,.4);
  color:#bbf7d0;padding:12px 14px;border-radius:12px;font-size:14px;margin-top:8px;
}
.form-row.invalid input{border-color:#FCA5A5;box-shadow:0 0 0 4px rgba(220,38,38,.13)}
.form-error{color:#fecaca;font-size:13px;margin-top:2px;display:none}

.site-footer{background:#101D2E;color:rgba(255,255,255,.76);margin-top:96px}
.footer-main{padding:56px 0 42px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1.2fr;gap:46px}
.footer-brand .brand-name{
  font-size:24px;color:#fff;
  background:linear-gradient(110deg,#fff,#fff 58%,var(--gold1) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.footer-brand p{font-size:14px;line-height:1.9;margin-top:16px;color:rgba(255,255,255,.6);max-width:400px}
.footer-col h4{font-size:16px;color:#fff;font-weight:700;margin-bottom:16px}
.footer-col ul li{margin-bottom:10px}
.footer-col a{font-size:14px;color:rgba(255,255,255,.6);transition:color var(--tr)}
.footer-col a:hover{color:var(--gold1)}
.footer-note{
  background:rgba(255,255,255,.03);border-radius:14px;padding:16px 18px;font-size:13px;
  color:rgba(255,255,255,.4);line-height:1.7;margin-top:32px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding:22px 0;font-size:13px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:rgba(255,255,255,.48);
}
.footer-bottom a{color:rgba(255,255,255,.6)}
.footer-bottom a:hover{color:var(--gold1)}

@media(max-width:1200px){
  .brand-name{font-size:18px}
  .nav-list{gap:4px}
  .nav-link{padding:8px 10px;font-size:13px;gap:6px}
  .nav-link svg{width:16px;height:16px}
  .nav-panel{padding-left:14px;gap:12px}
  .channel-wrap{grid-template-columns:190px 1fr}
  .channel-pane{padding:24px;gap:20px}
  .channel-pane-img{flex-basis:250px;width:250px}
}
@media(max-width:1024px){
  .hot-grid{grid-template-columns:1fr 1fr}
  .hot-card:first-child{grid-column:1/-1}
  .hot-card:first-child .hot-body h3{font-size:24px}
  .channel-wrap{grid-template-columns:1fr}
  .channel-index{flex-direction:row;flex-wrap:wrap}
  .channel-index-item{flex:1;justify-content:center}
  .cta-grid{grid-template-columns:1fr;gap:36px;padding:52px 40px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:768px){
  .section{padding:64px 0}
  .site-header{padding:10px 0}
  .nav-list{
    position:fixed;top:0;right:-92%;width:86%;max-width:420px;height:100vh;height:100dvh;
    background:#fff;flex-direction:column;justify-content:flex-start;gap:8px;
    padding:80px 20px 30px;box-shadow:-20px 0 60px rgba(15,35,70,.18);
    transition:right .3s ease;z-index:120;
  }
  .nav-list.is-open{right:0}
  .nav-link{width:100%;font-size:16px;padding:13px 14px}
  .nav-toggle{display:inline-flex;flex:0 0 auto}
  .nav-overlay{position:fixed;inset:0;background:rgba(12,24,42,.4);opacity:0;pointer-events:none;transition:opacity .3s;z-index:110}
  .nav-overlay.show{opacity:1;pointer-events:auto}
  .brand-name{font-size:17px}
  .hero{padding:64px 0 48px}
  .hero h1{font-size:44px}
  .hero-lead{font-size:17px}
  .hero-data{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr}
  .channel-pane{flex-direction:column}
  .channel-pane-img{width:100%;flex:none;aspect-ratio:16/9}
  .trust-band{padding:40px 28px 32px}
  .trust-grid{grid-template-columns:1fr 1fr;gap:26px}
  .feed-panel{padding:26px 22px 14px}
  .feed-item{flex-direction:row;gap:14px}
  .cta-grid{padding:44px 26px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:560px){
  .container{padding:0 16px}
  .topbar-right .topbar-time{display:none}
  .nav-panel{padding:8px 10px 8px 14px}
  .brand-name{font-size:14px;letter-spacing:-.01em}
  .brand-sub{display:none}
  .nav-actions .btn-enter-label{display:none}
  .nav-actions .btn-sm{padding:0 14px}
  .hero{padding:52px 0 40px}
  .hero h1{font-size:35px}
  .hero-lead{font-size:15px}
  .hero-btns .btn{width:100%}
  .data-chip{border-radius:14px;padding:12px}
  .sec-head h2{font-size:27px}
  .hot-grid{grid-template-columns:1fr}
  .channel-pane{padding:18px}
  .channel-index{padding:16px;gap:6px}
  .channel-index-item{font-size:13px;padding:10px}
  .trust-item b{font-size:32px}
  .trust-grid{grid-template-columns:1fr 1fr;gap:18px}
  .faq-q{padding:18px 18px;font-size:15px}
  .faq-a-inner{padding:0 18px 20px;font-size:14px}
  .cta-grid{padding:34px 18px}
  .cta-sec h2{font-size:28px}
  .sub-form .form-row{flex-direction:column}
  .sub-form .btn{width:100%}
  .footer-main{padding:40px 0 30px}
}

/* roulang page: category1 */
:root{
  --bg:#F6F8FC;
  --white:#FFFFFF;
  --ink:#0E1C2D;
  --muted:#4C5C70;
  --weak:#8A94A6;
  --line:#E2E8F2;
  --navy-800:#12263F;
  --navy-700:#1E3A5F;
  --brand-1:#3C64E8;
  --brand-2:#7C5CFC;
  --gold-1:#F6B01E;
  --gold-2:#FF8A00;
  --success:#16A34A;
  --warning:#D97706;
  --error:#DC2626;
  --shadow-sm:0 6px 18px rgba(15,35,70,.07);
  --shadow-md:0 8px 24px rgba(15,35,70,.08);
  --shadow-lg:0 18px 48px rgba(15,35,70,.11);
  --shadow-gold:0 20px 60px rgba(255,138,0,.15);
  --radius:24px;
  --radius-sm:14px;
  --gap-section:100px;
  --font:"PingFang SC","Microsoft YaHei","Noto Sans SC","Inter",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.8;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{font-family:var(--font)}
input,button{border:none;outline:none}
a,button{transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease,opacity .25s ease}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold-1);outline-offset:2px}
.container{max-width:1248px;margin:0 auto;padding-left:24px;padding-right:24px}

/* ===== Header ===== */
.site-header{position:sticky;top:0;left:0;right:0;z-index:80;padding:14px 0 8px;background:linear-gradient(180deg,rgba(246,248,252,.96) 0%,rgba(246,248,252,.88) 100%);backdrop-filter:blur(8px)}
.nav-panel{display:flex;align-items:center;gap:18px;background:var(--white);border:1px solid #EDF0F7;border-radius:26px;box-shadow:var(--shadow-md);padding:10px 14px;min-height:70px;transition:box-shadow .3s ease}
.scrolled .nav-panel{box-shadow:0 10px 28px rgba(15,35,70,.13)}
.brand{display:flex;flex-direction:column;justify-content:center;margin-right:6px;min-width:max-content}
.brand-name{font-size:1.36rem;font-weight:800;letter-spacing:.5px;background:linear-gradient(120deg,var(--brand-1),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.brand-sub{font-size:.62rem;letter-spacing:2.8px;color:var(--weak);font-weight:600;text-transform:uppercase}
.nav-list{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-link{display:inline-flex;align-items:center;gap:8px;padding:12px 15px;border-radius:18px;font-size:.92rem;font-weight:600;color:var(--muted);position:relative;white-space:nowrap}
.nav-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-link:hover{background:#F2F5FB;color:var(--ink)}
.nav-link.active{background:linear-gradient(135deg,rgba(60,100,232,.1),rgba(124,92,252,.1));color:var(--brand-1)}
.nav-link.active::after{content:"";position:absolute;left:18px;right:18px;bottom:5px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--brand-1),var(--gold-2))}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-sm);font-weight:700;height:48px;padding:0 22px;transition:.25s ease;cursor:pointer;font-size:.95rem}
.btn:active{transform:scale(.97)}
.btn-sm{height:42px;padding:0 18px;font-size:.9rem}
.btn-primary{background:linear-gradient(135deg,var(--gold-1),var(--gold-2));color:#1A1F2E;box-shadow:0 10px 22px rgba(255,138,0,.22)}
.btn-primary:hover{filter:brightness(1.05);box-shadow:var(--shadow-gold);transform:translateY(-2px)}
.btn-primary:active{transform:scale(.97)}
.btn-darkline{border:1px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06)}
.btn-darkline:hover{background:rgba(255,255,255,.16);border-color:#fff}
.btn-enter-label{position:relative;top:1px}
.nav-toggle{display:none;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,rgba(60,100,232,.08),rgba(124,92,252,.08));align-items:center;justify-content:center;cursor:pointer}
.nav-toggle svg{width:25px;height:25px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.nav-overlay{position:fixed;inset:0;background:rgba(10,20,40,.5);opacity:0;pointer-events:none;transition:.3s ease;z-index:60}

/* ===== Hero ===== */
.cat-hero{position:relative;border-radius:0 0 44px 44px;overflow:hidden;background:var(--navy-800);color:#fff}
.cat-hero .bg-layer{position:absolute;inset:0;background-image:url('/assets/images/backpic/back-1.webp');background-size:cover;background-position:center;opacity:.55}
.cat-hero .bg-glow{position:absolute;inset:0;background:linear-gradient(118deg,rgba(18,38,63,.92) 4%,rgba(18,38,63,.72) 38%,rgba(30,58,95,.45) 72%,rgba(124,92,252,.35) 100%),radial-gradient(circle at 80% 20%,rgba(246,176,30,.32),transparent 42%)}
.hero-content{position:relative;z-index:3;padding:92px 0 76px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;color:rgba(255,255,255,.72);font-size:.83rem}
.crumb a:hover{color:#fff}
.crumb-sep{opacity:.45}
.cat-label{display:flex;justify-content:center;margin-bottom:18px}
.cat-label span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:7px 19px;font-weight:600;font-size:.84rem;color:rgba(255,255,255,.9);backdrop-filter:blur(6px)}
.hero-md{text-align:center;max-width:860px;margin:0 auto}
.hero-title h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1.16;letter-spacing:1px;color:#fff}
.hero-title h1 .grad{background:linear-gradient(118deg,var(--gold-1),#FFBF63);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin:22px auto 0;max-width:680px;font-size:1.12rem;line-height:2;color:rgba(255,255,255,.85)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px}
.hero-note{margin-top:24px;font-size:.85rem;color:rgba(255,255,255,.6)}

/* ===== Section common ===== */
.section{padding:72px 0}
.section-head{max-width:760px;margin:0 auto 46px;text-align:center}
.section-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--brand-1);background:rgba(60,100,232,.08);border-radius:99px;padding:6px 15px}
.section-head h2{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:800;line-height:1.3;margin-top:16px}
.section-head p{margin-top:13px;font-size:1.03rem;color:var(--muted)}

/* ===== Feature rows ===== */
.info-feature{display:grid;gap:26px;margin-bottom:22px}
.feature-row{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;border:1px solid #EDF0F8;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .3s ease,transform .3s ease}
.feature-row:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.feature-row.reverse .feature-copy{order:2}
.feature-row.reverse .feature-media{order:1}
.feature-media{min-height:300px}
.feature-media img{width:100%;height:100%;object-fit:cover;min-height:300px}
.feature-copy{padding:36px 42px}
.feature-copy .f-tag{font-size:.78rem;font-weight:700;color:#fff;background:linear-gradient(120deg,var(--brand-1),var(--brand-2));border-radius:99px;padding:5px 13px;display:inline-block;margin-bottom:16px}
.feature-copy h3{font-size:1.65rem;font-weight:800;line-height:1.35}
.feature-copy p{color:var(--muted);margin-top:12px}
.feature-points{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.feature-points li{display:flex;align-items:center;gap:10px;color:var(--ink)}
.feature-points li svg{width:18px;height:18px;flex:none;stroke:var(--success);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.row-more{display:inline-flex;align-items:center;gap:7px;margin-top:22px;color:var(--brand-1);font-weight:700;font-size:.92rem}
.row-more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.row-more:hover{gap:12px;color:var(--brand-2)}

/* ===== Stats ===== */
.stats-block{background:linear-gradient(120deg,var(--navy-800),#1D3A5F);border-radius:var(--radius);padding:38px 34px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.stats-block::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 30%,rgba(246,176,30,.22),transparent 35%),radial-gradient(circle at 10% 80%,rgba(124,92,252,.25),transparent 35%)}
.stat-card{position:relative;text-align:center;padding:16px 8px}
.stat-card .num{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;color:var(--gold-1);font-variant-numeric:tabular-nums;line-height:1.2}
.stat-card .unit{font-size:1rem;margin-left:3px;color:#FFD49B}
.stat-card .label{color:rgba(255,255,255,.74);font-size:.92rem;margin-top:7px}
.stat-card .sub{color:rgba(255,255,255,.45);font-size:.78rem}

/* ===== Card grid ===== */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.content-card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease;border:1px solid rgba(241,244,250,.8);display:flex;flex-direction:column}
.content-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.media-box{position:relative;aspect-ratio:16/9;overflow:hidden;background:#E8EDF6}
.media-box img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.content-card:hover .media-box img{transform:scale(1.05)}
.media-box .tag{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.92);color:#16233C;padding:6px 14px;border-radius:99px;font-size:.78rem;font-weight:700}
.card-body{padding:22px 20px 20px;flex:1;display:flex;flex-direction:column}
.content-card h3{font-size:1.2rem;font-weight:800;line-height:1.55}
.content-card .summary{margin-top:8px;color:var(--muted);font-size:.92rem;line-height:1.8;flex:1}
.content-card .meta{margin-top:15px;font-size:.82rem;color:var(--weak);display:flex;align-items:center;gap:5px;justify-content:space-between;border-top:1px solid #EFF2F8;padding-top:12px}
.content-card .meta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.card-link-btn{color:var(--brand-1);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.card-link-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.content-card:hover .card-link-btn svg{transform:translateX(5px)}

/* ===== News list ===== */
.surface-dark{background:linear-gradient(180deg,#101F33,#1C3151);color:#fff}
.surface-dark .section-head h2,.surface-dark .section-head p{color:#fff}
.surface-dark .section-eyebrow{background:rgba(246,176,30,.18);color:var(--gold-1)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px 20px;min-width:0}
.news-panel h3{display:flex;align-items:center;gap:9px;color:#fff;font-size:1.15rem;font-weight:800;margin-bottom:17px}
.news-panel h3 .ico{width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,var(--gold-1),var(--gold-2));display:inline-block}
.news-list{display:flex;flex-direction:column}
.news-list li a{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.8);font-size:.95rem;line-height:1.7;transition:.2s ease}
.news-list li:last-child a{border-bottom:0}
.news-list li a:hover{color:var(--gold-1);padding-left:6px}
.news-list .ntime{flex:none;font-size:.92rem;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums;width:78px}
.news-list .ntag{flex:none;color:#FFB45B;font-weight:700;font-size:.78rem;background:rgba(246,176,30,.15);border-radius:6px;padding:0 10px;height:26px;line-height:26px;margin-top:3px}
.news-list .narrow{display:flex;flex-direction:column;min-width:0}
.news-list .narrow span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ===== Topic grid ===== */
.topic-card{background:#fff;border-radius:22px;padding:30px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid #EDF0F8;transition:.3s ease}
.topic-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.topic-card .t-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,rgba(60,100,232,.1),rgba(124,92,252,.1));display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.topic-card .t-icon svg{width:24px;height:24px;fill:none;stroke:var(--brand-1);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.topic-card h3{font-size:1.14rem;font-weight:800;margin-bottom:8px}
.topic-card p{font-size:.9rem;color:var(--muted);flex:1}
.topic-card .t-list{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.topic-card .topic-tag{font-size:.77rem;color:var(--muted);background:#F3F6FB;padding:4px 11px;border-radius:99px}
.topic-card .go{margin-top:18px;color:var(--brand-1);font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:6px}
.topic-card .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.topic-card .go:hover{gap:11px;color:var(--brand-2)}

/* ===== Accordion ===== */
.faq-list{max-width:780px;margin:0 auto}
.faq-item{background:#fff;border:1px solid #E7ECF6;border-radius:20px;margin-bottom:13px;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;background:transparent;padding:20px 24px;cursor:pointer;font-size:1.03rem;font-weight:700;color:var(--ink);text-align:left}
.faq-btn .plus{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(60,100,232,.1);color:var(--brand-1);position:relative}
.faq-btn .plus svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;transition:transform .3s ease}
.faq-btn[aria-expanded="true"] .plus{background:var(--gold-1);color:#1A1F2E}
.faq-btn[aria-expanded="true"] .plus svg{transform:rotate(135deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-answer-inner{padding:0 24px 22px;color:var(--muted);font-size:.95rem;line-height:1.95}

/* ===== Section note / CTA ===== */
.about-note{background:#fff;border:1px solid #E7ECF5;border-radius:var(--radius);padding:38px 40px;box-shadow:var(--shadow-sm)}
.about-note h3{font-size:1.3rem;font-weight:800;margin-bottom:14px}
.about-note p{color:var(--muted);font-size:.98rem}
.about-note ul{display:grid;grid-template-columns:1fr 1fr;gap:9px 26px;margin-top:18px}
.about-note li{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--muted)}
.about-note li svg{width:17px;height:17px;flex:none;stroke:var(--success);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.cta-panel{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--navy-800),#23416C 70%,#3E3D7F);border-radius:34px;color:#fff;padding:62px 46px;text-align:center;box-shadow:var(--shadow-lg)}
.cta-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(246,176,30,.3),transparent 30%),radial-gradient(circle at 80% 80%,rgba(124,92,252,.25),transparent 40%)}
.cta-panel .inner{position:relative}
.cta-panel h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;line-height:1.3}
.cta-panel p{margin:16px auto 0;max-width:610px;color:rgba(255,255,255,.82)}
.cta-actions{display:flex;justify-content:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.cta-secondary{padding:12px 22px;border:1px solid rgba(255,255,255,.4);border-radius:14px;color:#fff;height:48px;display:inline-flex;align-items:center;gap:8px;font-weight:700;background:rgba(255,255,255,.05)}
.cta-secondary:hover{background:rgba(255,255,255,.15)}

/* ===== Related channels ===== */
.sibling-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sibling-card{display:flex;flex-direction:column;background:#fff;border:1px solid #EDF0F8;border-radius:22px;padding:27px 25px;box-shadow:var(--shadow-sm);transition:.3s ease;min-height:210px}
.sibling-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.sibling-card .sick{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:16px;background:linear-gradient(135deg,rgba(246,176,30,.14),rgba(255,138,0,.1));margin-bottom:17px}
.sibling-card .sick svg{width:24px;height:24px;fill:none;stroke:var(--gold-2);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sibling-card.on{display:none}
.sibling-card h3{font-size:1.18rem;font-weight:800}
.sibling-card p{color:var(--muted);font-size:.89rem;margin-top:7px;flex:1}
.sibling-card a{margin-top:18px;color:var(--brand-1);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.sibling-card a svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* ===== Footer ===== */
.site-footer{background:#101C2A;color:#C7D0DE;margin-top:0}
.footer-main{padding:62px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:50px 40px}
.footer-brand .brand-name{display:inline-block;font-size:1.4rem;font-weight:800;margin-bottom:14px}
.footer-brand p{max-width:320px;font-size:.93rem;line-height:1.95;color:#9AA9BA}
.footer-col h4{color:#fff;font-size:1rem;font-weight:700;margin-bottom:15px}
.footer-col li{margin-bottom:8px}
.footer-col a{font-size:.92rem;color:#ADBCD0;padding:4px 0;display:inline-block;position:relative}
.footer-col a::after{content:"";position:absolute;left:0;bottom:1px;height:1px;width:0;background:var(--gold-1);transition:width .25s ease}
.footer-col a:hover{color:var(--gold-1)}
.footer-col a:hover::after{width:100%}
.footer-note{margin-top:35px;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);font-size:.83rem;line-height:1.9;color:#7F8FA3}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.06);font-size:.85rem;color:#90A0B4}
.footer-bottom a:hover{color:var(--gold-1)}

/* ===== Responsive ===== */
@media (max-width: 1200px){
  .section{padding:64px 0}
  .nav-link{padding:11px 11px}
  .nav-link svg{display:none}
  .card-grid,.news-grid,.sibling-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 1024px){
  .feature-row{grid-template-columns:1fr}
  .feature-row .feature-copy,.feature-row.reverse .feature-copy{order:1}
  .feature-row .feature-media,.feature-row.reverse .feature-media{order:2;min-height:240px}
  .feature-media img{min-height:240px}
}
@media (max-width: 991px){
  .nav-list{position:fixed;top:0;right:0;width:min(86%,390px);height:100vh;background:#fff;flex-direction:column;align-items:stretch;gap:8px;padding:90px 23px 30px;transform:translateX(103%);transition:transform .35s ease;box-shadow:-18px 0 58px rgba(0,0,0,.16);z-index:85;overflow:auto}
  body.nav-open .nav-list{transform:none}
  body.nav-open .nav-overlay{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .nav-link{font-size:1rem;padding:15px 16px;border-radius:16px}
  .nav-link svg{display:inline-block}
  .nav-link.active{background:linear-gradient(135deg,rgba(60,100,232,.1),rgba(124,92,252,.1))}
  .nav-toggle{display:inline-flex}
  .nav-actions{margin-left:auto}
  .brand-sub{display:none}
  .stats-block{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px){
  .section{padding:50px 0}
  .hero-content{padding:68px 0 52px}
  .container{padding-left:18px;padding-right:18px}
  .card-grid,.news-grid,.sibling-grid,.about-note ul{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:auto}
  .cta-panel{padding:44px 22px;border-radius:26px}
  .copyright-line{justify-content:center}
}
@media (max-width: 560px){
  .nav-panel{padding:8px 10px;gap:10px}
  .brand-name{font-size:1.08rem}
  .btn-sm{height:40px;padding:0 13px;font-size:.8rem;width:42px;padding:0;justify-content:center}
  .btn-sm .btn-enter-label{display:none}
  .brand-sub{display:none}
  .hero-content{padding:55px 0 44px}
  .hero-actions .btn{width:100%}
  .hero-actions .btn-darkline{width:auto}
  .hero-title h1{font-size:2rem}
  .feature-copy{padding:24px}
  .feature-copy h3{font-size:1.35rem}
  .section-head h2{font-size:1.75rem}
  .about-note{padding:26px 20px}
  .about-note ul{grid-template-columns:1fr}
  .stat-card{padding:10px 2px}
  .footer-bottom{flex-direction:column;text-align:center}
  .stats-block{padding:28px 14px}
}

/* roulang page: article */
:root {
  --bg: #F6F8FC;
  --card: #FFFFFF;
  --text: #0E1C2D;
  --muted: #4C5C70;
  --faint: #8A94A6;
  --line: #E3E9F2;
  --brand-start: #3C64E8;
  --brand-end: #7C5CFC;
  --gold: #F6B01E;
  --gold-deep: #FF8A00;
  --space: #12263F;
  --space-light: #1E3A5F;
  --safe: #16A34A;
  --warn: #D97706;
  --danger: #DC2626;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-sm: 0 2px 10px rgba(15, 35, 70, .05);
  --shadow-md: 0 8px 24px rgba(15, 35, 70, .08);
  --shadow-lg: 0 18px 42px rgba(15, 35, 70, .14);
  --font-main: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 700;
  line-height: 1.3;
}

input,
textarea,
select {
  font-family: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(246, 176, 30, .65);
  outline-offset: 2px;
}

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

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, filter .22s ease;
}

.btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  color: #1A1F2E;
  box-shadow: 0 8px 20px rgba(255, 138, 0, .24);
}

.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 12px 26px rgba(255, 138, 0, .3);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--card);
  color: var(--space);
  border: 1px solid #DCE4F0;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: rgba(60, 100, 232, .4);
  background: #F1F4FF;
  transform: translateY(-2px);
}

.btn-dark {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.btn-dark:hover {
  background: rgba(255, 255, 255, .2);
  transform: translateY(-2px);
}

.btn-sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
  border-radius: 12px;
}

.btn:active {
  transform: scale(.97);
}

/* ===== Header / Nav ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 18px 0 6px;
  background: transparent;
  transition: box-shadow .3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(15, 35, 70, .06);
}

.site-header .container {
  max-width: 1280px;
}

.nav-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  background: var(--card);
  border: 1px solid rgba(226, 232, 242, .8);
  border-radius: 22px;
  padding: 10px 14px 10px 20px;
  box-shadow: var(--shadow-md);
  transition: box-shadow .3s ease;
}

.site-header.is-scrolled .nav-panel {
  box-shadow: 0 14px 32px rgba(15, 35, 70, .12);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--space);
  line-height: 1.25;
  white-space: nowrap;
}

.brand-sub {
  font-size: 8px;
  letter-spacing: .48em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  white-space: nowrap;
}

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

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: background .22s ease, color .22s ease;
}

.nav-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link:hover {
  background: #F1F4FF;
  color: var(--brand-start);
}

.nav-link.active {
  color: var(--brand-start);
  background: #EEF1FF;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -8px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
}

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

.btn-enter-label {
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: #F1F4FF;
  border: 1px solid #E4EAF6;
  border-radius: 12px;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--space);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 16, 28, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 210;
}

.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Article Stage ===== */
.article-stage {
  position: relative;
  background:
    radial-gradient(circle at 12% -8%, rgba(255, 138, 0, .15), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(124, 92, 252, .32), transparent 36%),
    linear-gradient(145deg, #12263F 0%, #1E3A5F 100%);
  padding: 52px 0 56px;
  margin-bottom: -24px;
}

.article-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/backpic/back-3.png') center top / cover no-repeat;
  opacity: .08;
  pointer-events: none;
  mix-blend-mode: screen;
}

.article-stage .container {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.article-masthead {
  padding: 12px 0 8px;
}

.breadcrumb-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 13px;
}

.breadcrumb-row a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  color: rgba(255, 255, 255, .86);
  transition: background .22s ease, color .22s ease;
}

.breadcrumb-row a:hover {
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

.breadcrumb-row span {
  color: rgba(255, 255, 255, .45);
}

.breadcrumb-row .current-crumb {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .08);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
}

.article-title {
  color: #fff;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: 20px;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .16);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
}

.article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
}

.article-meta-item svg {
  width: 15px;
  height: 15px;
  stroke: rgba(255, 255, 255, .8);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-meta-item .meta-date {
  font-variant-numeric: tabular-nums;
}

/* ===== Article Body ===== */
.article-body-section {
  position: relative;
  padding: 48px 0 20px;
  background: var(--bg);
}

.article-body-section .container {
  max-width: 920px;
}

.article-paper {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 6vw, 68px) clamp(22px, 5.6vw, 64px) 40px;
  box-shadow: var(--shadow-md);
}

.article-content {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.9;
  color: #233448;
  word-break: break-word;
}

.article-content > * + * {
  margin-top: 1em;
}

.article-content p {
  margin-bottom: 1.6em;
}

.article-content h2 {
  margin: 2.1em 0 .8em;
  font-size: 28px;
  color: var(--space);
  line-height: 1.4;
}

.article-content h3 {
  margin: 1.8em 0 .6em;
  font-size: 23px;
  color: var(--space);
}

.article-content h4 {
  margin: 1.6em 0 .5em;
  font-size: 18px;
  color: var(--space);
}

.article-content a {
  color: var(--brand-start);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.article-content a:hover {
  color: var(--brand-end);
}

.article-content ul,
.article-content ol {
  margin: 1.4em 0;
  padding-left: 1.4em;
}

.article-content ul li,
.article-content ol li {
  margin-bottom: .5em;
  position: relative;
}

.article-content ul li::before {
  content: "";
  position: absolute;
  left: -1.2em;
  top: .82em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-start), var(--brand-end));
}

.article-content ol {
  list-style: decimal;
}

.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  margin: 1.8em auto;
  box-shadow: var(--shadow-md);
}

.article-content blockquote {
  margin: 2em 0;
  padding: 20px 24px;
  background: #F3F6FD;
  border-left: 6px solid var(--brand-start);
  border-radius: 16px;
  color: var(--muted);
  font-style: normal;
}

.article-content blockquote p:last-child {
  margin-bottom: 0;
}

.article-content table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: collapse;
  font-size: 15px;
}

.article-content th,
.article-content td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
}

.article-content th {
  background: #F6F8FE;
  color: var(--space);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  position: relative;
  max-width: 760px;
  margin: 38px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.article-tags-title {
  font-size: 13px;
  color: var(--faint);
  margin-right: 4px;
  font-weight: 600;
}

.article-tag {
  display: inline-block;
  padding: 6px 14px;
  background: #EEF1FE;
  color: #3343A3;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.article-tag:hover {
  background: #DDE2FF;
  transform: translateY(-1px);
}

.article-paper-footer {
  max-width: 760px;
  margin: 30px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.article-paper-footer p {
  font-size: 14px;
  color: var(--faint);
}

.article-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===== Not Found ===== */
.notfound-card {
  max-width: 680px;
  margin: 30px auto 0;
  text-align: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  border-radius: 28px;
  padding: 80px 30px 90px;
}

.notfound-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 28px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.notfound-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notfound-title {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 34px;
}

/* ===== Related ===== */
.related-section {
  padding: 72px 0 30px;
}

.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}

.section-head-row .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--brand-start);
  text-transform: uppercase;
  background: #EAF0FF;
  padding: 6px 14px;
  border-radius: 999px;
}

.section-title {
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 800;
  color: var(--space);
  line-height: 1.3;
}

.section-desc {
  color: var(--faint);
  max-width: 560px;
  font-size: 15px;
  margin-top: 10px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(230, 235, 244, .7);
  transition: box-shadow .26s ease, transform .26s ease;
}

.related-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.related-card .media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #EAF0FF;
}

.related-card .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.related-card:hover .media img {
  transform: scale(1.04);
}

.related-card .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
}

.related-card .card-label {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-start);
  background: #EDF1FF;
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

.related-card h3 {
  font-size: 19px;
  line-height: 1.48;
  margin-bottom: 10px;
  color: var(--space);
}

.related-card p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--faint);
  flex: 1;
}

.related-card .more-link {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-start);
  font-weight: 700;
  font-size: 14px;
  transition: gap .2s ease;
}

.related-card .more-link:hover {
  gap: 10px;
}

.related-card .more-link svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Article CTA ===== */
.article-cta {
  padding: 46px 0 10px;
}

.cta-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-radius: 30px;
  padding: 40px clamp(26px, 5vw, 58px);
  background:
    radial-gradient(circle at 0% 20%, rgba(255, 138, 0, .24), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(124, 92, 252, .3), transparent 45%),
    linear-gradient(135deg, #12263F 0%, #1E3A5F 100%);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.cta-panel::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(246, 176, 30, .14);
}

.cta-copy {
  position: relative;
  z-index: 1;
}

.cta-copy h2 {
  color: #fff;
  font-size: clamp(22px, 3vw, 31px);
  font-weight: 800;
  margin-bottom: 10px;
}

.cta-copy p {
  color: rgba(255, 255, 255, .74);
  max-width: 560px;
  font-size: 15px;
  line-height: 1.8;
}

.cta-panel .btn {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ===== Footer ===== */
.site-footer {
  background: #151F2E;
  color: #B9C2D0;
  margin-top: 80px;
  font-size: 14px;
}

.site-footer .container {
  max-width: 1280px;
}

.footer-main {
  padding: 58px 0 28px;
}

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

.footer-brand .brand-name {
  display: block;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
}

.footer-brand p {
  color: #98A3B5;
  line-height: 1.9;
  max-width: 420px;
  font-size: 14px;
}

.footer-col h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  color: #98A3B5;
  transition: color .2s ease, padding-left .2s ease;
}

.footer-col a:hover {
  color: var(--gold);
  padding-left: 4px;
}

.footer-note {
  margin-top: 44px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  color: #8490A3;
  font-size: 13px;
  line-height: 1.8;
  padding: 18px 22px;
}

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

.footer-bottom a {
  color: #8E9AAD;
  transition: color .2s ease;
}

.footer-bottom a:hover {
  color: var(--gold);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .nav-panel {
    gap: 18px;
  }

  .nav-link {
    padding: 0 9px;
    font-size: 14px;
  }

  .brand-name {
    font-size: 16px;
  }

  .brand-sub {
    letter-spacing: .28em;
    font-size: 7px;
  }

  .btn-enter-label {
    display: none;
  }

  .btn-primary {
    width: 42px;
    padding: 0;
  }
}

@media (max-width: 900px) {
  .nav-panel {
    flex-wrap: nowrap;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-actions .btn-primary {
    display: none;
  }

  .nav-list {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 360px);
    background: var(--card);
    box-shadow: var(--shadow-lg);
    z-index: 220;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 28px 22px 40px;
    border-radius: 0 24px 24px 0;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
  }

  .nav-list.open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-link {
    display: flex;
    min-height: 50px;
    padding: 0 14px;
    width: 100%;
    font-size: 16px;
    border-radius: 14px;
  }

  .nav-link.active::after {
    left: 16px;
    right: auto;
    width: 32px;
    bottom: 4px;
  }

  .article-stage {
    padding: 44px 0 46px;
  }
}

@media (max-width: 768px) {
  .breadcrumb-row .current-crumb {
    max-width: 180px;
  }

  .article-meta {
    gap: 10px;
  }

  .article-paper {
    border-radius: 22px;
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .cta-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-panel .btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding-top: 10px;
  }

  .nav-panel {
    border-radius: 18px;
    padding-left: 16px;
  }

  .brand {
    max-width: 190px;
  }

  .brand-name {
    font-size: 15px;
    white-space: normal;
  }

  .brand-sub {
    display: none;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
  }

  .article-stage {
    padding: 40px 0 40px;
  }

  .article-title {
    font-size: 30px;
    line-height: 1.32;
  }

  .article-meta {
    gap: 8px;
  }

  .article-meta-item {
    font-size: 13px;
    padding: 5px 10px;
  }

  .article-body-section {
    padding-top: 26px;
  }

  .article-content {
    font-size: 16px;
    line-height: 2;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 26px;
  }

  .section-head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .notfound-card {
    padding: 48px 20px 56px;
  }

  .footer-main {
    padding-top: 44px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* roulang page: category2 */
:root {
  --bg: #F6F8FC;
  --white: #FFFFFF;
  --navy: #12263F;
  --navy-2: #1E3A5F;
  --ink: #0E1C2D;
  --ink-2: #4C5C70;
  --ink-3: #8A94A6;
  --line: #D6DEE8;
  --c1: #3C64E8;
  --c2: #7C5CFC;
  --gold: #F6B01E;
  --gold-2: #FF8A00;
  --shadow-sm: 0 8px 24px rgba(15,35,70,.08);
  --shadow-md: 0 18px 42px rgba(15,35,70,.14);
  --shadow-gold: 0 20px 60px rgba(255,138,0,.16);
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --grad: linear-gradient(135deg, #3C64E8 0%, #7C5CFC 100%);
  --grad-gold: linear-gradient(135deg, #FF8A00 0%, #F6B01E 100%);
  --ease: .25s ease;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.75;
}
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding: 88px 0; }
.section-light { background: #F1F4F9; }
.section-dark { background: var(--navy); color: #E8EEF8; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 8px;
}
::selection { background: rgba(124,92,252,.22); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border-radius: 14px;
  border: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s, box-shadow .25s, background .25s, filter .2s;
  box-shadow: none;
}
.btn svg { flex: 0 0 auto; }
.btn-gold {
  background: var(--grad-gold);
  color: #1D2233;
  box-shadow: 0 12px 32px rgba(246,176,30,.22);
}
.btn-gold:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(255,138,0,.24);
}
.btn-gold:active { transform: scale(.97); }
.btn-ghost {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
}
.btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.btn-ghost:active { transform: scale(.97); }
.btn-plain {
  background: var(--white);
  color: var(--c1);
  border: 1px solid #E5EAF1;
  box-shadow: var(--shadow-sm);
}
.btn-plain:hover { background: #F2F3FF; transform: translateY(-2px); }
.btn-plain:active { transform: scale(.97); }
.btn-sm { height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; }

.site-header { position: sticky; top: 0; z-index: 120; padding: 14px 0 6px; background: linear-gradient(180deg, rgba(246,248,252,.94) 0%, rgba(246,248,252,.78) 100%); backdrop-filter: blur(14px); }
.nav-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: 24px;
  padding: 12px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s;
}
.site-header.is-scrolled .nav-panel { box-shadow: 0 10px 34px rgba(15,35,70,.16); }
.brand {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  line-height: 1.2;
  border-radius: 12px;
  padding: 4px 10px 4px 0;
}
.brand-name { display: block; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: .5px; white-space: nowrap; }
.brand-sub { display: block; font-size: 10px; letter-spacing: 2px; color: var(--ink-3); font-weight: 600; margin-top: 3px; }
.nav-list { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 13px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: background .2s, color .2s, transform .2s;
}
.nav-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.nav-link:hover { background: #F2F4F9; color: var(--ink); transform: translateY(-1px); }
.nav-link.active { color: #FFFFFF; background: var(--grad); box-shadow: 0 8px 20px rgba(60,100,232,.28); }
.nav-link:active { transform: scale(.97); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.btn-enter-label { white-space: nowrap; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: #F2F4F9;
  color: var(--ink);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle:hover { background: #E7EBF3; }
.nav-overlay { display: none; }

.page-hero { position: relative; overflow: hidden; color: #fff; background-color: var(--navy); }
.category-hero {
  margin-top: 18px;
  border-radius: 30px;
  background:
    linear-gradient(113deg, rgba(9,23,43,.97) 0%, rgba(18,38,63,.9) 50%, rgba(30,58,95,.8) 100%),
    url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
}
.category-hero::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: radial-gradient(60% 80% at 82% 12%, rgba(246,176,30,.3) 0%, rgba(255,255,255,0) 60%), radial-gradient(45% 60% at 8% 84%, rgba(124,92,252,.35) 0%, rgba(255,255,255,0) 55%);
}
.hero-container { position: relative; z-index: 1; padding-top: 54px; padding-bottom: 62px; }
.hero-breadcrumb { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 500; margin-bottom: 26px; }
.hero-breadcrumb a { color: rgba(255,255,255,.8); transition: color .2s; }
.hero-breadcrumb a:hover { color: var(--gold); }
.breadcrumb-sep { opacity: .55; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #DCE6F5;
  font-size: 12px;
  letter-spacing: 1.6px;
  margin-bottom: 18px;
}
.hero-title-block { display: block; }
.hero-big-line {
  display: block;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
}
.hero-brand-line {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(120deg, #F6B01E 0%, #fff 60%, #C9DFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-desc {
  max-width: 700px;
  margin-top: 22px;
  font-size: 16px;
  color: rgba(255,255,255,.88);
  line-height: 1.9;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 14px;
  margin-top: 42px;
  max-width: 780px;
}
.hero-metrics li {
  min-width: 154px;
  padding: 14px 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  backdrop-filter: blur(4px);
}
.metric-value { color: var(--gold); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .5px; line-height: 1.2; }
.metric-unit { font-size: 15px; margin-left: 2px; color: #fff; }
.metric-name { color: rgba(255,255,255,.75); font-size: 12px; font-weight: 500; letter-spacing: .4px; }

.section-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(124,92,252,.1);
  color: var(--c1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}
.section-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 800; margin: 14px 0 12px; }
.section-head p { color: var(--ink-2); font-size: 16px; line-height: 1.8; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: var(--white);
  border: 1px solid rgba(15,35,70,.04);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  padding: 26px 24px;
  transition: transform .25s, box-shadow .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(60,100,232,.24);
}
.feature-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 18px; margin-top: 18px; }
.card p { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.card .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--c1); font-size: 14px; font-weight: 700; transition: gap .2s; }
.card .card-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .card-link { gap: 10px; }

.pair-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 36px 0; }
.pair-block.reverse { direction: rtl; }
.pair-block.reverse > * { direction: ltr; }
.pair-visual { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/11; }
.pair-visual img { width: 100%; height: 100%; object-fit: cover; }
.pair-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(18,38,63,0) 55%, rgba(18,38,63,.18) 100%); pointer-events: none; }
.pair-visual-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(13,27,46,.7);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.pair-content-label { display: inline-flex; align-items: center; gap: 8px; color: var(--c1); font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.pair-content h3 { font-size: 26px; margin-top: 12px; }
.pair-content p { margin-top: 14px; color: var(--ink-2); font-size: 15px; line-height: 1.85; }
.pair-checklist { margin-top: 22px; display: grid; gap: 12px; }
.pair-checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 15px; }
.check-icon { margin-top: 5px; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: rgba(60,100,232,.12); color: var(--c1); display: inline-flex; align-items: center; justify-content: center; }
.check-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.pair-content .btn { margin-top: 28px; }

.data-dark-section { background: #132A44; color: #E8EEF8; }
.section-head.light h2 { color: #fff; }
.section-head.light p { color: rgba(255,255,255,.72); }
.section-head .tag-light { background: rgba(255,255,255,.14); color: #fff; }
.index-layout { display: grid; grid-template-columns: .9fr 1.6fr; gap: 44px; align-items: center; }
.index-intro h3 { color: #fff; font-size: 24px; }
.index-intro p { color: rgba(255,255,255,.74); margin-top: 14px; }
.index-intro .btn { margin-top: 28px; }
.static-index-panel {
  display: grid;
  gap: 14px;
}
.static-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.static-index-item {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 18px 18px;
  transition: transform .25s, background .2s;
  position: relative;
  overflow: hidden;
}
.static-index-item:hover { transform: translateY(-4px); background: rgba(255,255,255,.11); }
.index-no { position: absolute; right: 12px; top: 4px; color: rgba(246,176,30,.5); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.category-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; background: rgba(124,92,252,.22); color: #E4DBFF; border-radius: 999px; font-size: 12px; font-weight: 600; }
.static-index-item h3 { color: #fff; font-size: 17px; margin-top: 12px; }
.static-index-item p { color: rgba(255,255,255,.66); font-size: 13px; margin-top: 6px; line-height: 1.7; }

.scene-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.scene-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  border-top: 4px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .28s, border-color .2s;
}
.scene-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-top-color: var(--gold); }
.scene-number { color: var(--c2); font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.scene-card h3 { margin-top: 14px; font-size: 17px; }
.scene-card p { margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.8; }

.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item {
  background: var(--white);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(15,35,70,.06);
  overflow: hidden;
  margin-bottom: 14px;
  transition: box-shadow .25s;
}
.faq-item:hover { box-shadow: 0 12px 34px rgba(15,35,70,.12); }
.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 20px 62px 20px 24px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  transition: background .2s;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  color: var(--gold);
  transition: transform .25s, background .2s;
}
.faq-item[open] summary::after { content: "−"; background: var(--gold); color: var(--navy); border-color: var(--gold); }
.faq-answer { padding: 20px 28px 24px; background: #F6F8FC; color: var(--ink-2); font-size: 15px; line-height: 1.9; }

.cta-final { padding: 76px 0; }
.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(115deg, rgba(18,38,63,.96) 0%, rgba(30,58,95,.9) 100%), url("/assets/images/backpic/back-1.webp") center/cover no-repeat;
  color: #fff;
  padding: 64px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
}
.cta-panel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 80% at 84% 20%, rgba(246,176,30,.2) 0%, rgba(255,255,255,0) 70%); pointer-events: none; }
.cta-copy { position: relative; z-index: 1; max-width: 640px; }
.cta-copy h2 { color: #fff; font-size: clamp(1.8rem,3.6vw,2.6rem); }
.cta-copy p { margin-top: 14px; color: rgba(255,255,255,.78); }
.cta-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.cta-actions .btn { min-width: 220px; justify-content: center; }

.site-footer { background: #101C2D; color: #AEBBCD; padding: 64px 0 30px; }
.footer-main { display: grid; gap: 44px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr .8fr .9fr; gap: 42px; align-items: start; }
.footer-brand .brand-name { color: #fff; font-size: 22px; font-weight: 800; }
.footer-brand p { margin-top: 14px; color: #9AABC0; font-size: 14px; line-height: 1.9; max-width: 430px; }
.footer-col h4 { color: #fff; margin-bottom: 16px; font-size: 16px; font-weight: 700; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { display: inline-flex; color: #9AABC0; font-size: 14px; transition: color .2s, padding-left .2s; }
.footer-col a:hover { color: var(--gold); padding-left: 6px; }
.footer-note {
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 18px 0;
  color: #8290A8;
  font-size: 13px;
  line-height: 1.8;
}
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding-top: 26px; color: #7B89A0; font-size: 13px; }
.footer-bottom a { color: #96A4B8; }
.footer-bottom a:hover { color: var(--gold); }

@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .nav-list {
    position: fixed;
    top: 12px;
    right: 12px;
    width: min(320px, 82vw);
    height: calc(100dvh - 24px);
    margin: 0;
    padding: 24px 18px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 20px 70px rgba(13,27,46,.2);
    flex-direction: column;
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: opacity .3s, transform .3s, visibility .3s;
    overflow-y: auto;
    z-index: 220;
  }
  .nav-list.open { opacity: 1; visibility: visible; transform: translateX(0); }
  .nav-list .nav-link { display: flex; font-size: 15px; padding: 13px 14px; border-radius: 13px; color: var(--ink-2); }
  .nav-list .nav-link svg { width: 20px; height: 20px; }
  .nav-list .nav-link.active { color: #fff; }
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10,20,35,.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 210;
  }
  .nav-overlay.show { opacity: 1; visibility: visible; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .pair-block { grid-template-columns: 1fr 1fr; gap: 34px; }
  .static-index { grid-template-columns: 1fr 1fr; }
  .scene-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-panel { flex-direction: column; align-items: flex-start; }
  .cta-actions { flex-direction: row; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .site-header { padding-top: 12px; }
  .brand-name { font-size: 18px; }
  .hero-container { padding-top: 34px; padding-bottom: 44px; }
  .hero-metrics { grid-template-columns: 1fr 1fr; }
  .hero-metrics li { min-width: 0; }
  .section { padding: 62px 0; }
  .pair-block { grid-template-columns: 1fr; gap: 20px; }
  .pair-block.reverse { direction: ltr; }
  .index-layout { grid-template-columns: 1fr; gap: 28px; }
  .static-index { grid-template-columns: 1fr 1fr; }
  .faq-item summary { padding: 17px 54px 17px 18px; font-size: 15px; }
  .faq-answer { padding: 18px 20px 22px; }
  .cta-panel { padding: 40px 26px; }
  .cta-actions .btn { flex: 1; }
}

@media (max-width: 560px) {
  body { font-size: 15px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .nav-panel { padding: 10px 10px; border-radius: 18px; }
  .brand-name { font-size: 17px; }
  .brand-sub { display: none; }
  .nav-actions { gap: 6px; }
  .btn-enter-label { display: none; }
  .btn-enter-label + svg { margin: 0; }
  .category-hero, .category-hero::after { border-radius: 22px; }
  .hero-container { padding-top: 32px; padding-bottom: 32px; }
  .hero-kicker { letter-spacing: 1px; }
  .hero-big-line { font-size: 2.2rem; letter-spacing: 1px; }
  .hero-brand-line { font-size: 1.15rem; line-height: 1.7; }
  .hero-desc { font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .section { padding: 52px 0; }
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: 1.9rem; }
  .feature-grid { grid-template-columns: 1fr; gap: 16px; }
  .pair-block { padding: 26px 0; }
  .pair-content h3 { font-size: 22px; }
  .static-index { grid-template-columns: 1fr; }
  .scene-grid { grid-template-columns: 1fr; gap: 14px; }
  .faq-item summary { padding: 17px 16px; line-height: 1.5; }
  .faq-item summary::after { display: none; }
  .faq-answer { padding: 16px 18px; }
  .cta-final { padding: 48px 0; }
  .cta-panel { padding: 36px 22px; border-radius: 22px; }
  .cta-actions { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* roulang page: category3 */
:root {
      --bg: #F4F7FC;
      --bg-soft: #EBF0F8;
      --card: #FFFFFF;
      --ink: #0E1C2D;
      --ink-2: #43546A;
      --ink-3: #8895A9;
      --line: #DCE4EF;
      --primary: #3C64E8;
      --primary-2: #7C5CFC;
      --brand-grad: linear-gradient(135deg, #3C64E8, #7C5CFC);
      --gold: #F6B01E;
      --gold-2: #FF8A00;
      --gold-grad: linear-gradient(135deg, #F6B01E, #FF8A00);
      --space: #12263F;
      --space-2: #1E3A5F;
      --footer-bg: #212C3B;
      --shadow-sm: 0 6px 18px rgba(15, 35, 70, .06);
      --shadow-md: 0 14px 34px rgba(15, 35, 70, .10);
      --shadow-lg: 0 28px 64px rgba(15, 35, 70, .14);
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 30px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.75;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

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

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

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

    button {
      font-family: inherit;
      border: none;
      background: none;
    }

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible {
      outline: 3px solid rgba(246, 176, 30, .55);
      outline-offset: 3px;
      border-radius: 12px;
    }

    ::selection {
      background: rgba(124, 92, 252, .18);
    }

    .container {
      width: min(1200px, 100% - 48px);
      margin-inline: auto;
    }

    /* ===== Header & Nav ===== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 80;
      padding: 14px 0 10px;
      background: rgba(244, 247, 252, .86);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255, 255, 255, .45);
    }

    .nav-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: var(--card);
      padding: 12px 16px 12px 20px;
      border-radius: 24px;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .3s ease;
    }

    .site-header.is-scrolled .nav-panel {
      box-shadow: var(--shadow-md);
    }

    .brand {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
      min-width: max-content;
    }

    .brand-name {
      font-size: 21px;
      font-weight: 800;
      letter-spacing: .01em;
      background: var(--brand-grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-sub {
      font-size: 10px;
      letter-spacing: .28em;
      color: var(--ink-3);
      margin-top: 2px;
    }

    .nav-list {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex: 1;
    }

    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 14px;
      border-radius: 14px;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--ink-2);
      white-space: nowrap;
      transition: background .25s ease, color .25s ease, transform .2s ease;
    }

    .nav-link svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .25s ease;
    }

    .nav-link:hover {
      background: rgba(60, 100, 232, .08);
      color: var(--primary);
    }

    .nav-link:hover svg {
      transform: translateY(-2px);
    }

    .nav-link.active {
      color: #2450D8;
      background: rgba(60, 100, 232, .10);
    }

    .nav-link.active::after {
      content: "";
      position: absolute;
      left: 22%;
      right: 22%;
      bottom: 5px;
      height: 3px;
      border-radius: 8px;
      background: var(--brand-grad);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 14px;
      font-weight: 700;
      transition: filter .25s ease, transform .2s ease, box-shadow .25s ease, background .25s ease;
      cursor: pointer;
      line-height: 1;
    }

    .btn:active {
      transform: scale(.97);
    }

    .btn-primary {
      background: var(--gold-grad);
      color: #19202E;
      box-shadow: 0 10px 24px rgba(255, 138, 0, .2);
    }

    .btn-primary:hover {
      filter: brightness(1.06);
      box-shadow: 0 14px 28px rgba(255, 138, 0, .28);
    }

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

    .nav-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 13px;
      align-items: center;
      justify-content: center;
      background: rgba(60, 100, 232, .08);
      color: var(--ink);
      transition: background .25s ease;
    }

    .nav-toggle svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .nav-toggle:hover {
      background: rgba(60, 100, 232, .16);
    }

    .nav-overlay {
      display: none;
    }

    /* ===== Hero ===== */
    .hero {
      max-width: 1248px;
      margin: 26px auto 84px;
      padding: 0 24px;
    }

    .hero-inner {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      padding: 74px 0 66px;
      background-color: var(--space);
      background-image: linear-gradient(90deg, rgba(8, 17, 31, .92), rgba(18, 38, 63, .72) 52%, rgba(30, 58, 95, .48)), url('/assets/images/backpic/back-2.webp');
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow-lg);
      color: #FFFFFF;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .crumb {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .18);
      font-size: 13px;
      color: rgba(255, 255, 255, .82);
      margin-bottom: 22px;
    }

    .crumb span {
      opacity: .5;
    }

    .crumb a:hover {
      color: var(--gold);
    }

    .hero h1 {
      margin: 0 0 16px;
      font-size: clamp(36px, 5vw, 58px);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.02em;
      max-width: 780px;
    }

    .grad-text {
      background: var(--gold-grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-desc {
      max-width: 650px;
      font-size: 17px;
      line-height: 1.9;
      color: rgba(255, 255, 255, .9);
      margin: 0 0 28px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 42px;
    }

    .btn-lg {
      min-height: 52px;
      padding: 0 26px;
      border-radius: 15px;
      font-size: 15px;
    }

    .btn-gold {
      background: var(--gold-grad);
      color: #19202E;
      box-shadow: 0 12px 30px rgba(255, 138, 0, .22);
    }

    .btn-gold:hover {
      filter: brightness(1.06);
      box-shadow: 0 16px 36px rgba(255, 138, 0, .3);
    }

    .btn-outline-light {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .36);
      color: #fff;
    }

    .btn-outline-light:hover {
      background: rgba(255, 255, 255, .16);
      border-color: rgba(255, 255, 255, .6);
    }

    .hero-stats {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      max-width: 860px;
      margin-top: 6px;
    }

    .stat-badge {
      flex: 1 1 170px;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 16px 20px;
      background: rgba(255, 255, 255, .10);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius-md);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    .stat-badge strong {
      font-size: 30px;
      font-weight: 800;
      color: var(--gold);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }

    .stat-badge span {
      font-size: 14px;
      color: rgba(255, 255, 255, .86);
      line-height: 1.5;
    }

    /* ===== Generic sections ===== */
    .section {
      padding: 30px 0 80px;
    }

    .section + .section {
      padding-top: 10px;
    }

    .section-head {
      max-width: 760px;
      margin: 0 auto 48px;
      text-align: center;
    }

    .section-head h2,
    .split-head h2,
    .faq-head h2 {
      font-size: clamp(28px, 3.5vw, 40px);
      margin: 14px 0 14px;
      letter-spacing: -.02em;
      color: var(--ink);
      line-height: 1.3;
    }

    .section-head p {
      color: var(--ink-2);
      font-size: 16px;
      line-height: 1.85;
      margin: 0;
    }

    .tag {
      display: inline-block;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(60, 100, 232, .09);
      color: #2E55D6;
      font-weight: 600;
      font-size: 13px;
    }

    /* ===== Split rows ===== */
    .split-list {
      display: flex;
      flex-direction: column;
      gap: 58px;
    }

    .split-row {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 56px;
      align-items: center;
      background: var(--card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      padding: 34px;
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .split-row:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    .split-row:nth-child(even) .split-copy {
      order: 2;
    }

    .split-row:nth-child(even) .split-media {
      order: 1;
    }

    .split-copy h3 {
      font-size: 24px;
      margin: 0 0 14px;
      letter-spacing: -.01em;
      color: var(--ink);
    }

    .split-copy p {
      color: var(--ink-2);
      font-size: 15.5px;
      margin: 0 0 18px;
    }

    .split-copy ul {
      display: flex;
      flex-direction: column;
      gap: 11px;
      margin-top: 18px;
    }

    .split-copy ul li {
      position: relative;
      padding-left: 26px;
      color: var(--ink-2);
      font-size: 14.5px;
    }

    .split-copy ul li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 7px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: rgba(60, 100, 232, .14);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236933DB' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
      background-size: 10px;
      background-position: center;
      background-repeat: no-repeat;
    }

    .split-media {
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 18px 42px rgba(15, 35, 70, .12);
      aspect-ratio: 4 / 3;
      background: var(--bg-soft);
    }

    .split-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }

    .split-row:hover .split-media img {
      transform: scale(1.035);
    }

    .media-link {
      display: block;
      position: relative;
    }

    /* ===== Steps ===== */
    .steps-wrap {
      background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
    }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      counter-reset: step;
    }

    .step-card {
      position: relative;
      background: var(--card);
      border-radius: 24px;
      padding: 28px 24px 26px;
      box-shadow: var(--shadow-sm);
      border-top: 4px solid transparent;
      background-image: linear-gradient(var(--card), var(--card)), linear-gradient(135deg, #3C64E8, #7C5CFC);
      background-origin: border-box;
      background-clip: padding-box, border-box;
      transition: transform .3s ease, box-shadow .3s ease;
      counter-increment: step;
    }

    .step-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .step-card .step-num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: rgba(60, 100, 232, .10);
      color: #2E55D6;
      font-weight: 800;
      font-size: 20px;
      margin-bottom: 22px;
      font-variant-numeric: tabular-nums;
    }

    .step-card .step-num::after {
      content: counter(step);
    }

    .step-card h3 {
      font-size: 18px;
      margin: 0 0 10px;
    }

    .step-card p {
      margin: 0;
      color: var(--ink-2);
      font-size: 14.5px;
      line-height: 1.8;
    }

    /* ===== Scenario grid ===== */
    .scenario-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .scenario-card {
      background: var(--card);
      border-radius: 22px;
      padding: 30px 24px;
      box-shadow: var(--shadow-sm);
      transition: transform .3s ease, box-shadow .3s ease;
    }

    .scenario-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .scenario-icon {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: var(--brand-grad);
      color: #fff;
      margin-bottom: 18px;
      box-shadow: 0 10px 20px rgba(60, 100, 232, .22);
    }

    .scenario-icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .scenario-card h3 {
      margin: 0 0 10px;
      font-size: 18px;
      color: var(--ink);
    }

    .scenario-card p {
      margin: 0;
      font-size: 14px;
      color: var(--ink-2);
      line-height: 1.8;
    }

    /* ===== FAQ ===== */
    .faq-section {
      padding-bottom: 90px;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 54px;
      align-items: start;
    }

    .faq-head {
      position: sticky;
      top: 110px;
    }

    .faq-head .tag {
      margin-bottom: 14px;
    }

    .faq-head p {
      color: var(--ink-2);
      font-size: 15.5px;
      margin: 0 0 24px;
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    details.faq-item {
      background: var(--card);
      border-radius: 20px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      border: 1px solid transparent;
      transition: border-color .25s ease, box-shadow .25s ease;
    }

    details.faq-item:hover {
      border-color: rgba(60, 100, 232, .22);
    }

    details.faq-item[open] {
      box-shadow: var(--shadow-md);
      border-color: rgba(60, 100, 232, .18);
    }

    details.faq-item summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 20px 24px;
      font-weight: 600;
      font-size: 16px;
      color: var(--ink);
      transition: background .25s ease;
    }

    details.faq-item summary::after {
      content: "+";
      flex: 0 0 34px;
      height: 34px;
      border-radius: 12px;
      background: rgba(60, 100, 232, .10);
      color: var(--primary);
      font-size: 22px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .25s ease, background .25s ease, color .25s ease;
    }

    details.faq-item[open] summary::after {
      transform: rotate(45deg);
      background: var(--brand-grad);
      color: #fff;
    }

    details.faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-a {
      padding: 0 24px 22px;
      color: var(--ink-2);
      font-size: 15px;
      line-height: 1.9;
      border-top: 1px solid rgba(220, 228, 239, .7);
      margin-top: 0;
    }

    .faq-a p {
      margin: 16px 0 0;
    }

    /* ===== CTA ===== */
    .cta-section {
      padding: 20px 0 100px;
    }

    .cta-card {
      position: relative;
      border-radius: 36px;
      background: linear-gradient(120deg, #0E1C2D, #162B48 65%, #1E3A5F);
      padding: 60px 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 42px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }

    .cta-card::before {
      content: "";
      position: absolute;
      top: -90px;
      right: -80px;
      width: 360px;
      height: 360px;
      background: radial-gradient(circle, rgba(246, 176, 30, .34), transparent 65%);
      pointer-events: none;
    }

    .cta-card::after {
      content: "";
      position: absolute;
      bottom: -120px;
      left: 40%;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(124, 92, 252, .24), transparent 70%);
      pointer-events: none;
    }

    .cta-card .cta-info,
    .cta-card .cta-actions {
      position: relative;
      z-index: 2;
    }

    .cta-info h2 {
      margin: 0 0 12px;
      color: #fff;
      font-size: clamp(26px, 3vw, 38px);
      line-height: 1.35;
      letter-spacing: -.01em;
    }

    .cta-info p {
      margin: 0;
      color: rgba(255, 255, 255, .82);
      font-size: 15.5px;
      max-width: 520px;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
      max-width: 300px;
    }

    .btn-dark-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #fff;
      font-weight: 600;
      font-size: 15px;
      white-space: nowrap;
      transition: color .25s ease;
    }

    .btn-dark-link svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .25s ease;
    }

    .btn-dark-link:hover {
      color: var(--gold);
    }

    .btn-dark-link:hover svg {
      transform: translateX(5px);
    }

    /* ===== Footer ===== */
    .site-footer {
      background: var(--footer-bg);
      color: rgba(255, 255, 255, .86);
      padding: 68px 0 0;
      margin-top: 30px;
    }

    .footer-main {
      padding-bottom: 42px;
    }

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

    .footer-brand .brand-name {
      background: linear-gradient(135deg, #fff, #dce4ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-size: 24px;
      margin-bottom: 8px;
    }

    .footer-brand p {
      font-size: 14.5px;
      color: rgba(255, 255, 255, .66);
      line-height: 1.9;
      max-width: 430px;
      margin: 12px 0 0;
    }

    .footer-col h4 {
      font-size: 16px;
      color: #fff;
      margin: 0 0 18px;
    }

    .footer-col ul {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-col ul a {
      font-size: 14px;
      color: rgba(255, 255, 255, .68);
      transition: color .25s ease, padding-left .25s ease;
    }

    .footer-col ul a:hover {
      color: var(--gold);
      padding-left: 5px;
    }

    .footer-note {
      margin-top: 38px;
      padding: 22px 26px;
      background: rgba(255, 255, 255, .06);
      border-radius: 16px;
      font-size: 13px;
      line-height: 1.85;
      color: rgba(255, 255, 255, .56);
      border: 1px solid rgba(255, 255, 255, .08);
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .12);
      padding: 22px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      font-size: 13.5px;
      color: rgba(255, 255, 255, .56);
      flex-wrap: wrap;
    }

    .footer-bottom a {
      color: rgba(255, 255, 255, .62);
      transition: color .25s ease;
    }

    .footer-bottom a:hover {
      color: var(--gold);
    }

    /* ===== Responsive ===== */
    @media (max-width: 1100px) {
      .nav-link {
        padding: 10px 10px;
        font-size: 13.5px;
      }
      .brand-name {
        font-size: 19px;
      }
      .split-row {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }
      .steps-grid,
      .scenario-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 920px) {
      .nav-toggle {
        display: inline-flex;
      }
      .nav-list {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(84vw, 370px);
        background: #fff;
        z-index: 120;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 88px 22px 30px;
        gap: 8px;
        transform: translateX(105%);
        visibility: hidden;
        opacity: 0;
        transition: transform .35s ease, visibility .35s, opacity .35s;
        box-shadow: var(--shadow-lg);
        border-radius: 28px 0 0 28px;
      }
      .mobile-nav-open .nav-list {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
      }
      .nav-link {
        padding: 14px 18px;
        font-size: 16px;
        border-radius: 16px;
      }
      .nav-link.active::after {
        left: 18px;
        right: auto;
        bottom: auto;
        top: 50%;
        width: 5px;
        height: 26px;
        transform: translateY(-50%);
        border-radius: 8px;
      }
      .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(14, 28, 45, .65);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease;
        z-index: 110;
      }
      .mobile-nav-open .nav-overlay {
        opacity: 1;
        visibility: visible;
      }
      .hero {
        margin-top: 18px;
      }
      .faq-layout {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      .faq-head {
        position: static;
      }
      .cta-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 44px 36px;
      }
      .split-row:nth-child(even) .split-copy {
        order: 0;
      }
      .split-row:nth-child(even) .split-media {
        order: 0;
      }
    }

    @media (max-width: 768px) {
      .split-row {
        grid-template-columns: 1fr;
        padding: 26px;
      }
      .split-copy {
        order: 1 !important;
      }
      .split-media {
        order: 0 !important;
      }
      .cta-card {
        padding: 38px 28px;
      }
    }

    @media (max-width: 560px) {
      .container {
        width: calc(100% - 36px);
      }
      .site-header {
        padding: 10px 0 8px;
      }
      .nav-panel {
        padding: 10px 12px;
        border-radius: 20px;
      }
      .brand-sub {
        letter-spacing: .16em;
        font-size: 9px;
      }
      .brand-name {
        font-size: 17px;
      }
      .btn-sm {
        height: 42px;
        padding: 0 13px;
        font-size: 13px;
      }
      .nav-toggle {
        width: 42px;
        height: 42px;
      }
      .hero {
        padding: 0 16px;
        margin: 16px auto 62px;
      }
      .hero-inner {
        padding: 54px 0 48px;
        border-radius: 26px;
      }
      .hero h1 {
        font-size: 34px;
        line-height: 1.25;
      }
      .hero-desc {
        font-size: 15px;
      }
      .hero-actions {
        flex-direction: column;
      }
      .btn-lg {
        width: 100%;
      }
      .stat-badge {
        flex: 1 1 100%;
      }
      .section {
        padding: 20px 0 58px;
      }
      .section-head {
        margin-bottom: 34px;
      }
      .section-head p {
        font-size: 15px;
      }
      .split-list {
        gap: 36px;
      }
      .split-row {
        padding: 18px;
        gap: 22px;
      }
      .split-copy h3 {
        font-size: 21px;
      }
      .steps-grid,
      .scenario-grid {
        grid-template-columns: 1fr;
      }
      .cta-actions {
        flex-direction: column;
        width: 100%;
      }
      .cta-actions .btn {
        width: 100%;
      }
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .footer-note {
        padding: 16px 18px;
      }
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
    }