/* roulang page: index */
:root{
  --ink:#0b1b2b;
  --ink-soft:#14324c;
  --teal:#0fa3b8;
  --teal-deep:#0a7f91;
  --gold:#e8a63c;
  --bg:#f4f7fa;
  --surface:#ffffff;
  --line:#e3eaf1;
  --text:#1b2a37;
  --muted:#5c7284;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 2px 10px rgba(13,40,64,.06);
  --shadow-md:0 10px 28px rgba(13,40,64,.10);
  --shadow-lg:0 18px 44px rgba(13,40,64,.16);
  --max:1160px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.78;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;border-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3,h4,p,figure{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
strong{font-weight:800;}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}
.btn:focus-visible,.nav-link:focus-visible,.nav-toggle:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(15,163,184,.45);outline-offset:2px;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease;}
.site-header.is-stuck{box-shadow:0 8px 24px rgba(13,40,64,.09);}
.header-inner{display:flex;align-items:center;gap:24px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--teal),var(--teal-deep));display:grid;place-items:center;color:#fff;box-shadow:0 6px 14px rgba(15,163,184,.35);flex:none;}
.brand-mark svg{width:19px;height:19px;}
.brand-text{font-size:16px;font-weight:800;letter-spacing:.3px;color:var(--ink);white-space:nowrap;}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav-link{position:relative;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s;}
.nav-link:hover{color:var(--ink);background:#eef4f8;}
.nav-link.active{color:var(--teal-deep);}
.nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--teal);}
.header-actions{display:flex;align-items:center;gap:10px;flex:none;}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;border:1px solid var(--line);color:var(--ink);background:#fff;}
.nav-toggle svg{width:20px;height:20px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:11px 22px;font-size:14.5px;font-weight:700;border:1px solid transparent;min-height:44px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;}
.btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 8px 18px rgba(10,127,145,.28);}
.btn-primary:hover{background:#086a79;transform:translateY(-2px);box-shadow:0 12px 24px rgba(10,127,145,.34);}
.btn-primary:active{transform:translateY(0);box-shadow:0 5px 12px rgba(10,127,145,.28);}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08);}
.btn-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff;box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px);}
.btn-sm{padding:8px 16px;min-height:38px;font-size:13.5px;border-radius:8px;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#08182a;color:#fff;padding:76px 0 86px;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(104deg,rgba(7,22,35,.95) 0%,rgba(7,22,35,.78) 48%,rgba(7,22,35,.45) 100%);}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .85fr;gap:48px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;font-weight:700;letter-spacing:.6px;color:#bfe6ec;background:rgba(15,163,184,.2);border:1px solid rgba(15,163,184,.42);border-radius:999px;padding:6px 14px;}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,166,60,.22);}
.hero h1{margin-top:20px;font-size:clamp(27px,3.5vw,42px);line-height:1.3;font-weight:800;letter-spacing:.5px;color:#fff;}
.hero-lead{margin-top:18px;font-size:15.5px;line-height:1.85;color:#c5d7e2;max-width:640px;}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.tag{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:#d5e8ef;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
.squad-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:26px;backdrop-filter:blur(8px);box-shadow:0 20px 44px rgba(0,0,0,.28);}
.squad-title{font-size:18px;font-weight:800;color:#fff;}
.squad-sub{margin-top:8px;font-size:13.2px;color:#a9c4d3;line-height:1.7;}
.squad-bar{margin-top:20px;height:9px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden;}
.squad-bar i{display:block;height:100%;width:60%;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--gold));}
.squad-dots{display:flex;align-items:center;gap:8px;margin-top:16px;}
.dot{width:26px;height:26px;border-radius:50%;border:1px dashed rgba(255,255,255,.4);display:grid;place-items:center;font-size:11.5px;color:#9fb9c8;}
.dot.on{background:rgba(15,163,184,.4);border:1px solid var(--teal);color:#fff;font-weight:700;}
.squad-people{margin-left:auto;font-size:13.2px;font-weight:700;color:var(--gold);}
.squad-list{margin-top:20px;display:grid;gap:10px;}
.squad-list li{display:flex;justify-content:space-between;gap:12px;font-size:13.4px;color:#a9c4d3;padding-bottom:10px;border-bottom:1px dashed rgba(255,255,255,.13);}
.squad-list li:last-child{border-bottom:none;padding-bottom:0;}
.squad-list b{color:#fff;font-weight:700;}

/* ---------- sections ---------- */
.section{padding:76px 0;}
.section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:780px;margin-bottom:40px;}
.section-kicker{display:inline-block;font-size:12.6px;font-weight:800;letter-spacing:1.4px;color:var(--teal-deep);margin-bottom:10px;}
.section-kicker::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--gold);vertical-align:middle;margin-right:9px;}
.section-title{font-size:clamp(22px,2.4vw,29px);line-height:1.4;font-weight:800;color:var(--ink);letter-spacing:.2px;}
.section-sub{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.8;}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.card{display:flex;flex-direction:column;gap:12px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2ec;}
.card-icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:#e9f6f8;color:var(--teal-deep);flex:none;}
.card-icon svg{width:22px;height:22px;}
.card-title{font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.5;}
.card-text{font-size:14px;color:var(--muted);line-height:1.75;}
.card-tag{align-self:flex-start;font-size:12px;font-weight:700;color:var(--teal-deep);background:#eef7fa;border-radius:999px;padding:3px 10px;margin-top:auto;}

/* ---------- steps ---------- */
.step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:step;}
.step-item{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px 22px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.step-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2ec;}
.step-num{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ink);color:#fff;font-size:14px;font-weight:800;margin-bottom:14px;}
.step-item h3{font-size:16px;font-weight:800;color:var(--ink);line-height:1.5;}
.step-item p{margin-top:8px;font-size:13.8px;color:var(--muted);line-height:1.75;}

/* ---------- channel matrix ---------- */
.channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.channel-card{display:flex;flex-direction:column;gap:12px;height:100%;padding:26px;border-radius:var(--radius);background:linear-gradient(160deg,#0f2b41,#0b1b2b);color:#cbdee8;border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow-md);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.channel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(15,163,184,.55);}
.channel-card h3{font-size:17.5px;font-weight:800;color:#fff;}
.channel-card p{font-size:13.8px;line-height:1.75;color:#9fb9c8;}
.channel-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.4px;font-weight:700;color:var(--teal);}
.channel-card:hover .channel-more{color:#5fe0f0;}

/* ---------- post cards ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.post-card{display:flex;flex-direction:column;gap:10px;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2ec;}
.post-card-cat{align-self:flex-start;font-size:12px;font-weight:700;color:var(--teal-deep);background:#e9f6f8;border-radius:999px;padding:3px 10px;}
.post-card-title{font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.55;}
.post-card:hover .post-card-title{color:var(--teal-deep);}
.post-card-text{font-size:13.8px;color:var(--muted);line-height:1.75;}
.post-card-time{margin-top:auto;font-size:12.6px;color:#8b9daa;}
.empty-note{padding:34px 24px;border:1px dashed #cfdde7;border-radius:var(--radius);background:#fff;color:var(--muted);font-size:14px;text-align:center;}

/* ---------- topic cards ---------- */
.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.topic-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;display:flex;flex-direction:column;height:100%;}
.topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2ec;}
.topic-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b1b2b;}
.topic-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.topic-card:hover .topic-thumb img{transform:scale(1.05);}
.topic-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1;}
.topic-body h3{font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.5;}
.topic-body p{font-size:13.8px;color:var(--muted);line-height:1.75;}
.topic-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}

/* ---------- news list ---------- */
.news-layout{display:grid;grid-template-columns:1.62fr .92fr;gap:28px;align-items:start;}
.news-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:6px 26px;}
.news-item{display:block;padding:20px 0;border-bottom:1px dashed var(--line);transition:padding-left .2s ease;}
.news-item:last-child{border-bottom:none;}
.news-item:hover{padding-left:6px;}
.news-item h3{font-size:16px;font-weight:800;color:var(--ink);line-height:1.6;transition:color .2s ease;}
.news-item:hover h3{color:var(--teal-deep);}
.news-item p{margin-top:6px;font-size:13.8px;color:var(--muted);line-height:1.75;}
.news-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;font-size:12.6px;color:#8b9daa;}
.news-side{background:linear-gradient(165deg,#0f2b41,#0b1b2b);border-radius:var(--radius);padding:28px;color:#bdd3df;box-shadow:var(--shadow-md);}
.news-side h3{font-size:17px;font-weight:800;color:#fff;margin-bottom:14px;}
.news-side p{font-size:13.8px;line-height:1.8;color:#9fb9c8;}
.side-list{margin-top:18px;display:grid;gap:2px;}
.side-list li{padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.13);font-size:13.6px;color:#cbdee8;}
.side-list li:last-child{border-bottom:none;}
.side-list b{color:var(--teal);font-weight:700;margin-right:8px;}

/* ---------- release log ---------- */
.log-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:10px 26px;}
.log-item{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:22px 0;border-bottom:1px dashed var(--line);}
.log-item:last-child{border-bottom:none;}
.log-ver{font-size:14px;font-weight:800;color:var(--teal-deep);}
.log-ver span{display:block;font-size:12.4px;font-weight:600;color:#8b9daa;margin-top:4px;}
.log-body h3{font-size:15.6px;font-weight:800;color:var(--ink);line-height:1.55;}
.log-body p{margin-top:6px;font-size:13.8px;color:var(--muted);line-height:1.75;}

/* ---------- platform split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;}
.split-media{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);background:#0b1b2b;}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.split-body h2{font-size:clamp(21px,2.3vw,27px);font-weight:800;color:var(--ink);line-height:1.42;}
.split-body p{margin-top:14px;font-size:14.6px;color:var(--muted);line-height:1.85;}
.feature-list{margin-top:22px;display:grid;gap:14px;}
.feature-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.2px;color:var(--text);line-height:1.75;}
.feature-list svg{width:20px;height:20px;flex:none;color:var(--teal-deep);margin-top:2px;}
.feature-list b{color:var(--ink);}

/* ---------- stat band ---------- */
.stat-band{background:#08182a;color:#fff;padding:60px 0;}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;text-align:center;}
.stat-num{font-size:clamp(26px,3vw,34px);font-weight:800;color:#fff;letter-spacing:.5px;}
.stat-num em{font-style:normal;font-size:16px;color:var(--teal);margin-left:2px;}
.stat-label{margin-top:8px;font-size:13.5px;color:#9fb6c6;}

/* ---------- quotes ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px;height:100%;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.quote-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2ec;}
.quote-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fdf3e2;color:#b8791e;}
.quote-mark svg{width:18px;height:18px;}
.quote-text{font-size:14.4px;color:var(--ink-soft);line-height:1.85;}
.quote-user{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px;}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(140deg,var(--teal),var(--teal-deep));flex:none;}
.quote-user b{display:block;font-size:13.8px;color:var(--ink);}
.quote-user span{font-size:12.4px;color:#8b9daa;}

/* ---------- faq ---------- */
.faq-wrap{max-width:880px;margin:0 auto;display:grid;gap:14px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 24px;transition:border-color .2s ease,box-shadow .2s ease;}
.faq-item:hover{border-color:#cfe2ec;box-shadow:var(--shadow-md);}
.faq-q{display:flex;align-items:flex-start;gap:12px;font-size:16px;font-weight:800;color:var(--ink);line-height:1.6;}
.faq-q i{font-style:normal;color:var(--teal-deep);font-weight:800;flex:none;}
.faq-a{margin-top:10px;padding-left:26px;font-size:14.2px;color:var(--muted);line-height:1.85;}

/* ---------- cta ---------- */
.cta-band{background:linear-gradient(120deg,#0a7f91,#0b1b2b);color:#fff;border-radius:18px;padding:48px 44px;display:grid;grid-template-columns:1.4fr auto;gap:32px;align-items:center;box-shadow:var(--shadow-lg);}
.cta-band h2{font-size:clamp(21px,2.4vw,28px);font-weight:800;line-height:1.42;color:#fff;}
.cta-band p{margin-top:12px;font-size:14.6px;color:#c9e2ea;line-height:1.8;max-width:660px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end;}

/* ---------- footer ---------- */
.site-footer{background:#071624;color:#9db3c4;padding:58px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand .brand-mark{box-shadow:none;}
.footer-brand span{font-size:16px;font-weight:800;color:#fff;}
.footer-desc{font-size:13.6px;line-height:1.85;color:#8ba3b4;max-width:400px;}
.footer-title{font-size:15px;font-weight:800;color:#fff;margin-bottom:16px;}
.footer-link{display:block;font-size:13.8px;color:#9db3c4;padding:6px 0;transition:color .2s ease,transform .2s ease;}
.footer-link:hover{color:var(--teal);transform:translateX(3px);}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding:22px 0 26px;font-size:12.8px;color:#7d95a7;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:36px;}
  .hero-lead{max-width:none;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3,.channel-grid,.post-grid,.topic-grid,.quote-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .step-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .news-layout{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;gap:30px;}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cta-band{grid-template-columns:1fr;padding:38px 30px;}
  .cta-actions{justify-content:flex-start;}
}
@media (max-width:900px){
  .header-inner{gap:14px;}
  .nav-toggle{display:inline-flex;}
  .main-nav{position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:2px;margin-left:0;padding:12px 18px 18px;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(13,40,64,.13);display:none;}
  .main-nav.is-open{display:flex;}
  .nav-link{padding:13px 12px;}
  .nav-link.active::after{display:none;}
  .nav-link.active{background:#eef7fa;border-radius:8px;}
  .header-actions .btn{display:none;}
}
@media (max-width:768px){
  .hero{padding:48px 0 58px;}
  .section{padding:52px 0;}
  .grid-3,.grid-4,.channel-grid,.post-grid,.topic-grid,.quote-grid,.step-grid{grid-template-columns:1fr;}
  .section-head{margin-bottom:28px;}
  .log-item{grid-template-columns:1fr;gap:8px;}
  .footer-grid{grid-template-columns:1fr;gap:30px;}
  .news-list{padding:4px 18px;}
}
@media (max-width:520px){
  .container{padding:0 16px;}
  .brand-text{font-size:14.5px;}
  .hero h1{font-size:25px;}
  .hero-lead{font-size:14.6px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .squad-card{padding:22px;}
  .stat-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .cta-band{padding:30px 22px;}
  .faq-a{padding-left:0;}
  .log-wrap{padding:6px 18px;}
}

/* roulang page: article */
:root{
 --ink:#0b1b2b;
 --ink-soft:#14324c;
 --teal:#0fa3b8;
 --teal-deep:#0a7f91;
 --gold:#e8a63c;
 --bg:#f4f7fa;
 --surface:#ffffff;
 --line:#e3eaf1;
 --text:#1b2a37;
 --muted:#5c7284;
 --radius:12px;
 --radius-sm:8px;
 --shadow-sm:0 2px 10px rgba(13,40,64,.06);
 --shadow-md:0 10px 28px rgba(13,40,64,.10);
 --shadow-lg:0 18px 44px rgba(13,40,64,.16);
 --max:1160px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.78;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;border-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure{margin:0;}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}
.btn:focus-visible,.nav-link:focus-visible,.nav-toggle:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(15,163,184,.45);outline-offset:2px;}
/* header */
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease;}
.site-header.is-stuck{box-shadow:0 8px 24px rgba(13,40,64,.09);}
.header-inner{display:flex;align-items:center;gap:24px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--teal),var(--teal-deep));display:grid;place-items:center;color:#fff;box-shadow:0 6px 14px rgba(15,163,184,.35);flex:none;}
.brand-mark svg{width:19px;height:19px;}
.brand-text{font-size:16px;font-weight:800;letter-spacing:.3px;color:var(--ink);white-space:nowrap;}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav-link{position:relative;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s;}
.nav-link:hover{color:var(--ink);background:#eef4f8;}
.nav-link.active{color:var(--teal-deep);}
.nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--teal);}
.header-actions{display:flex;align-items:center;gap:10px;flex:none;}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;border:1px solid var(--line);color:var(--ink);background:#fff;}
.nav-toggle svg{width:20px;height:20px;}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:11px 22px;font-size:14.5px;font-weight:700;border:1px solid transparent;min-height:44px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;}
.btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 8px 18px rgba(10,127,145,.28);}
.btn-primary:hover{background:#086a79;transform:translateY(-2px);box-shadow:0 12px 24px rgba(10,127,145,.34);}
.btn-primary:active{transform:translateY(0);box-shadow:0 5px 12px rgba(10,127,145,.28);}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08);}
.btn-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff;box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px);}
.btn-sm{padding:8px 16px;min-height:38px;font-size:13.5px;border-radius:8px;}
/* article hero */
.article-hero{position:relative;overflow:hidden;background:#08182a;color:#fff;padding:52px 0 62px;}
.article-hero .hero-bg{position:absolute;inset:0;background-image:url("/assets/images/592a579c12e9a8cd.webp");background-size:cover;background-position:center;opacity:.34;}
.article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(102deg,rgba(7,22,35,.96) 0%,rgba(7,22,35,.82) 52%,rgba(7,22,35,.52) 100%);}
.article-hero .inner{position:relative;z-index:2;max-width:900px;}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:#9db9c8;}
.breadcrumb a{transition:color .2s;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.45;}
.article-h1{margin-top:16px;font-size:clamp(25px,3.1vw,37px);line-height:1.36;font-weight:800;letter-spacing:.4px;color:#fff;}
.article-lead{margin-top:16px;font-size:15px;line-height:1.85;color:#c5d7e2;max-width:760px;}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.meta-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.8px;font-weight:600;color:#d5e8ef;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;}
.meta-pill b{color:#fff;font-weight:700;}
.meta-pill.is-accent{background:rgba(15,163,184,.22);border-color:rgba(15,163,184,.46);color:#bfe6ec;}
/* sections */
.section{padding:72px 0;}
.section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:780px;margin-bottom:38px;}
.section-kicker{display:inline-block;font-size:12.6px;font-weight:800;letter-spacing:1.4px;color:var(--teal-deep);margin-bottom:10px;}
.section-kicker::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--gold);vertical-align:middle;margin-right:9px;}
.section-title{font-size:clamp(22px,2.4vw,29px);line-height:1.4;font-weight:800;color:var(--ink);letter-spacing:.2px;}
.section-sub{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.8;}
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
/* article body */
.article-shell{padding:56px 0 20px;}
.article-wrap{max-width:900px;margin:0 auto;}
.article-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:38px clamp(20px,4.2vw,52px);}
.article-body{font-size:15.5px;line-height:1.9;color:#243544;word-break:break-word;}
.article-body p{margin:0 0 18px;}
.article-body h2{margin:34px 0 14px;font-size:22px;line-height:1.5;font-weight:800;color:var(--ink);padding-left:13px;border-left:4px solid var(--teal);}
.article-body h2:first-child{margin-top:0;}
.article-body h3{margin:26px 0 12px;font-size:18px;line-height:1.55;font-weight:800;color:var(--ink-soft);}
.article-body h4{margin:20px 0 10px;font-size:16px;font-weight:700;color:var(--ink-soft);}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px;list-style:revert;}
.article-body li{margin-bottom:8px;}
.article-body img{border-radius:12px;margin:20px 0;box-shadow:var(--shadow-sm);height:auto;}
.article-body a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;}
.article-body a:hover{color:#086a79;}
.article-body blockquote{margin:22px 0;padding:16px 20px;background:#f1f8fa;border-left:4px solid var(--teal);border-radius:0 10px 10px 0;color:#28414f;font-size:15px;}
.article-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px;}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;}
.article-body th{background:#f1f6f9;font-weight:700;color:var(--ink);}
.article-body strong{color:var(--ink);font-weight:800;}
.article-empty{text-align:center;padding:26px 0 10px;}
.article-empty h2{font-size:21px;font-weight:800;color:var(--ink);margin-bottom:10px;}
.article-empty p{color:var(--muted);margin-bottom:20px;}
.article-footnote{margin-top:30px;padding-top:20px;border-top:1px dashed var(--line);font-size:13.4px;color:var(--muted);line-height:1.85;}
/* point cards */
.point-card{display:flex;flex-direction:column;gap:12px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:26px 24px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.point-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cbe4ea;}
.point-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(15,163,184,.16),rgba(232,166,60,.18));color:var(--teal-deep);}
.point-icon svg{width:21px;height:21px;}
.point-title{font-size:16.5px;font-weight:800;color:var(--ink);}
.point-desc{font-size:14.3px;line-height:1.8;color:var(--muted);}
.tag-line{display:inline-flex;align-items:center;font-size:12.4px;font-weight:700;color:var(--teal-deep);background:#e9f6f8;border:1px solid #cfeaef;border-radius:999px;padding:4px 11px;width:fit-content;}
/* related cards */
.related-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cbe4ea;}
.related-media{display:block;aspect-ratio:16/10;overflow:hidden;background:#dfeaf1;}
.related-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.related-card:hover .related-media img{transform:scale(1.04);}
.related-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 24px;}
.related-title{font-size:16.5px;line-height:1.55;font-weight:800;color:var(--ink);}
.related-title a:hover{color:var(--teal-deep);}
.related-desc{font-size:14.2px;line-height:1.8;color:var(--muted);}
/* channel matrix */
.channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.channel-card{display:flex;flex-direction:column;gap:12px;height:100%;background:linear-gradient(165deg,#ffffff,#f0f7fa);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:26px 24px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.channel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#bcdde5;}
.channel-name{font-size:17px;font-weight:800;color:var(--ink);}
.channel-desc{font-size:14.2px;line-height:1.8;color:var(--muted);flex:1;}
.channel-more{display:inline-flex;align-items:center;gap:6px;font-size:13.8px;font-weight:700;color:var(--teal-deep);}
.channel-more svg{width:15px;height:15px;transition:transform .2s ease;}
.channel-card:hover .channel-more svg{transform:translateX(3px);}
/* faq */
.faq-wrap{max-width:880px;}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:14px;transition:border-color .2s ease,box-shadow .2s ease;}
.faq-item:hover{border-color:#cbe4ea;box-shadow:var(--shadow-md);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;font-size:15.6px;font-weight:700;color:var(--ink);min-height:44px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eef6f9;color:var(--teal-deep);font-size:16px;font-weight:800;transition:transform .2s ease,background .2s ease;}
.faq-item[open] summary::after{content:"−";background:var(--teal);color:#fff;}
.faq-answer{padding:0 22px 20px;font-size:14.6px;line-height:1.85;color:var(--muted);}
/* cta band */
.cta-band{position:relative;overflow:hidden;background:#08182a;color:#fff;padding:64px 0;}
.cta-band .cta-bg{position:absolute;inset:0;background-image:url("/assets/images/ecab2028ebe8c7a4.webp");background-size:cover;background-position:center;opacity:.22;}
.cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,22,35,.94),rgba(7,22,35,.6));}
.cta-inner{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;}
.cta-text{max-width:620px;}
.cta-title{font-size:clamp(21px,2.4vw,28px);font-weight:800;line-height:1.45;color:#fff;}
.cta-sub{margin-top:12px;font-size:14.8px;line-height:1.8;color:#c5d7e2;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;}
/* footer */
.site-footer{background:#0b1b2b;color:#a8bccd;padding:58px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-bottom:40px;}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:16px;margin-bottom:14px;}
.footer-desc{font-size:14px;line-height:1.85;color:#93a9bb;max-width:390px;}
.footer-title{font-size:15px;font-weight:800;color:#fff;margin:0 0 14px;}
.footer-link{display:block;font-size:14px;color:#9db3c5;padding:6px 0;transition:color .2s ease,transform .2s ease;}
.footer-link:hover{color:#5ed0e0;transform:translateX(3px);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid rgba(255,255,255,.12);padding:20px 0 26px;font-size:13px;color:#7f96a9;}
@media (max-width:1024px){
 .article-hero{padding:44px 0 52px;}
 .section{padding:60px 0;}
 .grid-3,.channel-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
 .footer-grid{grid-template-columns:1.3fr 1fr 1fr;gap:28px;}
}
@media (max-width:900px){
 .header-inner{gap:14px;}
 .nav-toggle{display:inline-flex;}
 .main-nav{position:absolute;top:64px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:4px;margin-left:0;padding:14px 20px 20px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(13,40,64,.12);}
 .main-nav.is-open{display:flex;}
 .nav-link{padding:12px 14px;font-size:15px;border-radius:9px;}
 .nav-link.active::after{left:14px;right:auto;width:22px;}
 .header-actions{margin-left:auto;}
 .article-card{padding:28px 20px;}
 .article-body{font-size:15px;}
}
@media (max-width:768px){
 .grid-2,.grid-3,.channel-grid{grid-template-columns:1fr;}
 .article-hero{padding:38px 0 44px;}
 .article-meta{gap:8px;}
 .meta-pill{font-size:12.2px;padding:5px 12px;}
 .section{padding:50px 0;}
 .section-head{margin-bottom:28px;}
 .article-shell{padding:38px 0 10px;}
 .article-body h2{font-size:20px;}
 .article-body h3{font-size:17px;}
 .cta-inner{flex-direction:column;align-items:flex-start;}
 .footer-grid{grid-template-columns:1fr;gap:26px;padding-bottom:30px;}
 .footer-desc{max-width:none;}
 .footer-bottom{flex-direction:column;gap:6px;}
}
@media (max-width:520px){
 .container{padding:0 18px;}
 .brand-text{font-size:14.6px;}
 .brand-mark{width:30px;height:30px;border-radius:9px;}
 .article-h1{font-size:24px;}
 .article-lead{font-size:14.2px;}
 .btn{width:100%;}
 .header-actions .btn{width:auto;}
 .cta-actions{width:100%;}
 .related-body,.point-card,.channel-card{padding:20px 18px 22px;}
 .faq-item summary{padding:16px 18px;font-size:14.8px;}
 .faq-answer{padding:0 18px 18px;font-size:14px;}
}

/* roulang page: category1 */
:root{
  --ink:#0b1b2b;
  --ink-soft:#14324c;
  --teal:#0fa3b8;
  --teal-deep:#0a7f91;
  --gold:#e8a63c;
  --bg:#f4f7fa;
  --surface:#ffffff;
  --line:#e3eaf1;
  --text:#1b2a37;
  --muted:#5c7284;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 2px 10px rgba(13,40,64,.06);
  --shadow-md:0 10px 28px rgba(13,40,64,.10);
  --shadow-lg:0 18px 44px rgba(13,40,64,.16);
  --max:1160px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.78;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;border-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}
.btn:focus-visible,.nav-link:focus-visible,.nav-toggle:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(15,163,184,.45);outline-offset:2px;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease;}
.site-header.is-stuck{box-shadow:0 8px 24px rgba(13,40,64,.09);}
.header-inner{display:flex;align-items:center;gap:24px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--teal),var(--teal-deep));display:grid;place-items:center;color:#fff;box-shadow:0 6px 14px rgba(15,163,184,.35);flex:none;}
.brand-mark svg{width:19px;height:19px;}
.brand-text{font-size:16px;font-weight:800;letter-spacing:.3px;color:var(--ink);white-space:nowrap;}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav-link{position:relative;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s;}
.nav-link:hover{color:var(--ink);background:#eef4f8;}
.nav-link.active{color:var(--teal-deep);}
.nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--teal);}
.header-actions{display:flex;align-items:center;gap:10px;flex:none;}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;border:1px solid var(--line);color:var(--ink);background:#fff;}
.nav-toggle svg{width:20px;height:20px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:11px 22px;font-size:14.5px;font-weight:700;border:1px solid transparent;min-height:44px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;}
.btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 8px 18px rgba(10,127,145,.28);}
.btn-primary:hover{background:#086a79;transform:translateY(-2px);box-shadow:0 12px 24px rgba(10,127,145,.34);}
.btn-primary:active{transform:translateY(0);box-shadow:0 5px 12px rgba(10,127,145,.28);}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08);}
.btn-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff;box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px);}
.btn-sm{padding:8px 16px;min-height:38px;font-size:13.5px;border-radius:8px;}

/* ---------- category hero ---------- */
.cat-hero{position:relative;overflow:hidden;background:#08182a;color:#fff;padding:68px 0 76px;}
.cat-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34;}
.cat-hero-glow{position:absolute;inset:0;background:
  radial-gradient(620px 320px at 18% 12%,rgba(15,163,184,.42),transparent 68%),
  radial-gradient(520px 300px at 82% 78%,rgba(232,166,60,.24),transparent 70%),
  linear-gradient(102deg,rgba(7,22,35,.96) 0%,rgba(7,22,35,.82) 52%,rgba(7,22,35,.52) 100%);}
.cat-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center;}
.crumb{display:flex;align-items:center;gap:8px;font-size:12.6px;color:#9dbccc;margin-bottom:16px;}
.crumb a:hover{color:#fff;}
.crumb span{color:#6f93a7;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;font-weight:700;letter-spacing:.6px;color:#bfe6ec;background:rgba(15,163,184,.2);border:1px solid rgba(15,163,184,.42);border-radius:999px;padding:6px 14px;}
.cat-hero h1{margin-top:18px;font-size:clamp(26px,3.3vw,41px);line-height:1.32;font-weight:800;letter-spacing:.4px;color:#fff;}
.cat-hero .hero-lead{margin-top:18px;font-size:15.4px;line-height:1.85;color:#c5d7e2;max-width:620px;}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.tag{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:#d5e8ef;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
.hero-figure{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 50px rgba(0,0,0,.34);background:#0e2436;}
.hero-figure img{width:100%;height:300px;object-fit:cover;}
.hero-figure-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(to top,rgba(6,20,32,.94),rgba(6,20,32,.05));font-size:13px;color:#cfe4ec;}
.hero-figure-cap b{display:block;color:#fff;font-size:14.6px;margin-bottom:3px;}
.hero-panel{display:grid;gap:10px;margin-top:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:18px 20px;backdrop-filter:blur(6px);}
.hero-panel-row{display:flex;justify-content:space-between;gap:12px;font-size:13.4px;color:#a9c4d3;padding-bottom:9px;border-bottom:1px dashed rgba(255,255,255,.13);}
.hero-panel-row:last-child{border-bottom:none;padding-bottom:0;}
.hero-panel-row b{color:#fff;font-weight:700;}

/* ---------- sections ---------- */
.section{padding:72px 0;}
.section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-dark{background:#0b1b2b;color:#dbe7ef;}
.section-head{max-width:800px;margin-bottom:38px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-kicker{display:inline-block;font-size:12.6px;font-weight:800;letter-spacing:1.4px;color:var(--teal-deep);margin-bottom:10px;}
.section-kicker::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--gold);vertical-align:middle;margin-right:9px;}
.section-title{font-size:clamp(21px,2.3vw,28px);line-height:1.42;font-weight:800;color:var(--ink);letter-spacing:.2px;}
.section-sub{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.82;}
.section-dark .section-title{color:#fff;}
.section-dark .section-sub{color:#a9c4d3;}
.section-dark .section-kicker{color:#63d3e0;}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.card{display:flex;flex-direction:column;gap:10px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe3ea;}
.card-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(15,163,184,.1);color:var(--teal-deep);border:1px solid rgba(15,163,184,.2);}
.card-icon svg{width:21px;height:21px;}
.card-title{font-size:16.6px;font-weight:800;color:var(--ink);line-height:1.5;}
.card-text{font-size:14.4px;color:var(--muted);line-height:1.8;}
.card-tag{align-self:flex-start;margin-top:auto;font-size:12.4px;font-weight:700;color:var(--teal-deep);background:rgba(15,163,184,.1);border-radius:999px;padding:4px 12px;}

/* value list */
.value-list{display:grid;gap:14px;}
.value-item{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.value-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe3ea;}
.value-rank{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;background:linear-gradient(140deg,var(--teal),var(--teal-deep));}
.value-rank.gold{background:linear-gradient(140deg,var(--gold),#c9822a);}
.value-rank.ink{background:linear-gradient(140deg,#33506a,var(--ink));}
.value-body h3{font-size:16px;font-weight:800;color:var(--ink);}
.value-body p{font-size:14px;color:var(--muted);line-height:1.75;margin-top:4px;}
.value-note{font-size:13px;font-weight:700;color:var(--teal-deep);white-space:nowrap;}

/* pain / solution */
.split{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);}
.panel-head{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.panel-dot{width:10px;height:10px;border-radius:50%;background:#e05a4d;box-shadow:0 0 0 4px rgba(224,90,77,.14);}
.panel-dot.green{background:var(--teal);box-shadow:0 0 0 4px rgba(15,163,184,.16);}
.panel-head h3{font-size:17px;font-weight:800;color:var(--ink);}
.mini-list{display:grid;gap:14px;}
.mini-list li{font-size:14.3px;color:var(--muted);line-height:1.78;padding-left:16px;position:relative;}
.mini-list li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:2px;background:#c3d5e0;}
.mini-list li b{color:var(--ink);}
.panel.green-panel{background:#f0fafb;border-color:#cfe9ee;}
.panel.green-panel .mini-list li::before{background:var(--teal);}

/* steps */
.steps{display:grid;gap:18px;counter-reset:step;}
.step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe3ea;}
.step-num{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:18px;font-weight:800;color:var(--teal-deep);background:rgba(15,163,184,.1);border:1px solid rgba(15,163,184,.25);}
.step h3{font-size:16.4px;font-weight:800;color:var(--ink);}
.step p{font-size:14.4px;color:var(--muted);line-height:1.8;margin-top:6px;}

/* metrics */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.metric{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:22px;transition:transform .2s ease,background .2s ease,border-color .2s ease;}
.metric:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);border-color:rgba(15,163,184,.5);}
.metric-num{font-size:28px;font-weight:800;color:#fff;letter-spacing:.5px;}
.metric-num em{font-style:normal;font-size:15px;color:var(--gold);margin-left:4px;}
.metric-label{margin-top:8px;font-size:13.4px;color:#a9c4d3;line-height:1.7;}

/* myths */
.myth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.myth{background:var(--surface);border:1px solid var(--line);border-left:3px solid #e05a4d;border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;}
.myth:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.myth .wrong{font-size:15px;font-weight:800;color:var(--ink);}
.myth .wrong span{color:#c9422f;}
.myth .right{margin-top:10px;font-size:14.2px;color:var(--muted);line-height:1.8;}
.myth .right b{color:var(--teal-deep);}

/* posts */
.post-card{height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;overflow:hidden;}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe3ea;}
.post-link{display:flex;flex-direction:column;gap:10px;padding:22px;height:100%;}
.post-tag{align-self:flex-start;font-size:12.2px;font-weight:700;color:var(--teal-deep);background:rgba(15,163,184,.1);border-radius:999px;padding:4px 11px;}
.post-title{font-size:16px;font-weight:800;color:var(--ink);line-height:1.55;}
.post-link:hover .post-title{color:var(--teal-deep);}
.post-excerpt{font-size:14px;color:var(--muted);line-height:1.78;}
.post-meta{margin-top:auto;padding-top:10px;font-size:12.6px;color:#8aa0af;border-top:1px dashed var(--line);}
.empty-note{padding:26px;background:#fff;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);font-size:14px;text-align:center;}

/* faq */
.faq{display:grid;gap:14px;max-width:900px;margin:0 auto;}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;}
.faq-item[open]{border-color:#bfe0e8;box-shadow:var(--shadow-md);}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-size:15.6px;font-weight:700;color:var(--ink);list-style:none;cursor:pointer;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(15,163,184,.12);color:var(--teal-deep);font-weight:800;transition:transform .2s ease,background .2s ease;}
.faq-item[open] summary::after{content:"–";transform:rotate(180deg);background:rgba(15,163,184,.2);}
.faq-body{padding:0 22px 20px;font-size:14.4px;color:var(--muted);line-height:1.85;}

/* cta */
.cta-band{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(120deg,#0b1b2b,#123a52 62%,#0a7f91 130%);color:#fff;padding:44px 42px;display:grid;grid-template-columns:1.4fr auto;gap:28px;align-items:center;box-shadow:var(--shadow-lg);}
.cta-band h2{font-size:clamp(20px,2.2vw,26px);font-weight:800;line-height:1.42;color:#fff;}
.cta-band p{margin-top:10px;font-size:14.6px;color:#bdd3df;line-height:1.8;max-width:640px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* footer */
.site-footer{background:#08182a;color:#a9c4d3;padding:56px 0 26px;margin-top:8px;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:16px;}
.footer-desc{margin-top:14px;font-size:13.8px;line-height:1.85;color:#9dbccc;max-width:430px;}
.footer-title{font-size:14.4px;font-weight:800;color:#fff;margin-bottom:14px;}
.footer-link{display:block;font-size:13.8px;color:#9dbccc;padding:5px 0;transition:color .2s ease,transform .2s ease;}
.footer-link:hover{color:#63d3e0;transform:translateX(3px);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:20px;font-size:12.8px;color:#7c9cb0;}

/* responsive */
@media (max-width:1024px){
  .cat-hero-inner{grid-template-columns:1fr;gap:34px;}
  .hero-figure img{height:260px;}
  .grid-4,.metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .cta-band{grid-template-columns:1fr;padding:36px 30px;}
}
@media (max-width:860px){
  .main-nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(13,40,64,.12);padding:12px 18px 18px;display:none;}
  .main-nav.open{display:flex;}
  .nav-link{padding:12px 12px;font-size:15px;}
  .nav-link.active::after{left:12px;right:auto;width:26px;bottom:6px;}
  .nav-toggle{display:inline-flex;}
  .header-actions{margin-left:auto;}
  .header-inner{gap:12px;}
  .split{grid-template-columns:1fr;}
  .myth-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .section{padding:56px 0;}
  .grid-2,.grid-3,.grid-4,.metrics{grid-template-columns:1fr;}
  .value-item{grid-template-columns:48px 1fr;row-gap:8px;}
  .value-note{grid-column:2;}
  .step{grid-template-columns:52px 1fr;gap:14px;padding:18px;}
  .step-num{width:44px;height:44px;font-size:16px;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-figure img{height:220px;}
}
@media (max-width:520px){
  .container{padding:0 16px;}
  .brand-text{font-size:14.4px;}
  .cat-hero{padding:48px 0 56px;}
  .cat-hero h1{font-size:25px;}
  .hero-actions .btn{width:100%;}
  .cta-actions .btn{width:100%;}
  .footer-bottom{justify-content:flex-start;}
  .section-head{margin-bottom:28px;}
}

/* roulang page: category2 */
:root{
  --ink:#0b1b2b;
  --ink-soft:#14324c;
  --teal:#0fa3b8;
  --teal-deep:#0a7f91;
  --gold:#e8a63c;
  --bg:#f4f7fa;
  --surface:#ffffff;
  --line:#e3eaf1;
  --text:#1b2a37;
  --muted:#5c7284;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 2px 10px rgba(13,40,64,.06);
  --shadow-md:0 10px 28px rgba(13,40,64,.10);
  --shadow-lg:0 18px 44px rgba(13,40,64,.16);
  --max:1160px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.78;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;display:block;border-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}
.btn:focus-visible,.nav-link:focus-visible,.nav-toggle:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(15,163,184,.45);outline-offset:2px;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease;}
.site-header.is-stuck{box-shadow:0 8px 24px rgba(13,40,64,.09);}
.header-inner{position:relative;display:flex;align-items:center;gap:24px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--teal),var(--teal-deep));display:grid;place-items:center;color:#fff;box-shadow:0 6px 14px rgba(15,163,184,.35);flex:none;}
.brand-mark svg{width:19px;height:19px;}
.brand-text{font-size:16px;font-weight:800;letter-spacing:.3px;color:var(--ink);white-space:nowrap;}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav-link{position:relative;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s;}
.nav-link:hover{color:var(--ink);background:#eef4f8;}
.nav-link.active{color:var(--teal-deep);}
.nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--teal);}
.header-actions{display:flex;align-items:center;gap:10px;flex:none;}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;border:1px solid var(--line);color:var(--ink);background:#fff;}
.nav-toggle svg{width:20px;height:20px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:11px 22px;font-size:14.5px;font-weight:700;border:1px solid transparent;min-height:44px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;}
.btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 8px 18px rgba(10,127,145,.28);}
.btn-primary:hover{background:#086a79;transform:translateY(-2px);box-shadow:0 12px 24px rgba(10,127,145,.34);}
.btn-primary:active{transform:translateY(0);box-shadow:0 5px 12px rgba(10,127,145,.28);}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08);}
.btn-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff;box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:#241703;box-shadow:0 8px 18px rgba(232,166,60,.3);}
.btn-gold:hover{background:#d9972b;transform:translateY(-2px);}
.btn-sm{padding:8px 16px;min-height:38px;font-size:13.5px;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#08182a;color:#fff;padding:72px 0 80px;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(104deg,rgba(7,22,35,.95) 0%,rgba(7,22,35,.8) 48%,rgba(7,22,35,.5) 100%);}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .8fr;gap:46px;align-items:start;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;font-weight:700;letter-spacing:.6px;color:#bfe6ec;background:rgba(15,163,184,.2);border:1px solid rgba(15,163,184,.42);border-radius:999px;padding:6px 14px;}
.hero h1{margin-top:20px;font-size:clamp(26px,3.4vw,40px);line-height:1.32;font-weight:800;letter-spacing:.5px;color:#fff;}
.hero-lead{margin-top:18px;font-size:15.5px;line-height:1.85;color:#c5d7e2;max-width:620px;}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.tag{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:#d5e8ef;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
.panel-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:24px;backdrop-filter:blur(8px);box-shadow:0 20px 44px rgba(0,0,0,.28);}
.panel-head{display:flex;align-items:center;gap:10px;font-size:16.5px;font-weight:800;color:#fff;}
.panel-head svg{width:20px;height:20px;color:#7fd8e5;}
.panel-list{margin-top:16px;display:grid;gap:0;}
.panel-list li{display:flex;justify-content:space-between;gap:14px;font-size:13.4px;color:#a9c4d3;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.14);}
.panel-list li:last-child{border-bottom:none;padding-bottom:0;}
.panel-list b{color:#fff;font-weight:700;text-align:right;}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.badge{font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;background:rgba(232,166,60,.16);color:#f5c877;border:1px solid rgba(232,166,60,.42);}

/* ---------- sections ---------- */
.section{padding:72px 0;}
.section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:800px;margin-bottom:38px;}
.section-kicker{display:inline-block;font-size:12.6px;font-weight:800;letter-spacing:1.4px;color:var(--teal-deep);margin-bottom:10px;}
.section-kicker::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--gold);vertical-align:middle;margin-right:9px;}
.section-title{font-size:clamp(21px,2.3vw,28px);line-height:1.4;font-weight:800;color:var(--ink);letter-spacing:.2px;}
.section-sub{margin-top:13px;font-size:15px;color:var(--muted);line-height:1.85;}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.card{display:flex;flex-direction:column;gap:12px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2ec;}
.card-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:rgba(15,163,184,.1);color:var(--teal-deep);border:1px solid rgba(15,163,184,.22);}
.card-icon svg{width:21px;height:21px;}
.card-title{font-size:16.5px;font-weight:800;color:var(--ink);line-height:1.45;}
.card-text{font-size:14.2px;color:var(--muted);line-height:1.8;}
.card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px;}
.chip{display:inline-flex;font-size:12px;font-weight:700;color:var(--teal-deep);background:#e9f6f8;border:1px solid #cde9ee;border-radius:999px;padding:3px 10px;}

.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe2ec;}
.stat-num{font-size:25px;font-weight:800;color:var(--teal-deep);line-height:1.2;}
.stat-label{margin-top:6px;font-size:14px;font-weight:700;color:var(--ink);}
.stat-desc{margin-top:8px;font-size:13.2px;color:var(--muted);line-height:1.75;}

/* ---------- split & figure ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md);background:#0b1b2b;}
.figure img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
.figcaption{padding:14px 18px;font-size:13px;color:var(--muted);background:#fff;border-top:1px solid var(--line);}

/* ---------- steps ---------- */
.steps{display:grid;gap:16px;}
.step{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe2ec;}
.step-num{width:38px;height:38px;flex:none;border-radius:11px;background:linear-gradient(140deg,var(--teal),var(--teal-deep));color:#fff;font-weight:800;font-size:15px;display:grid;place-items:center;box-shadow:0 6px 14px rgba(15,163,184,.3);}
.step-body h3{font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.step-body p{font-size:14px;color:var(--muted);line-height:1.78;}

/* ---------- check list ---------- */
.check-list{display:grid;gap:12px;margin-top:20px;}
.check-list li{position:relative;padding:13px 18px 13px 44px;background:var(--surface);border:1px solid var(--line);border-radius:10px;font-size:14.2px;color:var(--text);line-height:1.7;box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s;}
.check-list li:hover{border-color:#cfe2ec;transform:translateX(3px);}
.check-list li::before{content:"";position:absolute;left:16px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:rgba(15,163,184,.14);border:1px solid rgba(15,163,184,.5);}
.check-list li::after{content:"";position:absolute;left:21px;top:50%;width:7px;height:4px;margin-top:-4px;border-left:2px solid var(--teal-deep);border-bottom:2px solid var(--teal-deep);transform:rotate(-45deg);}

/* ---------- faq ---------- */
.faq-list{display:grid;gap:12px;max-width:900px;}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:0 22px;transition:border-color .2s,box-shadow .2s;}
.faq[open]{border-color:#cde9ee;box-shadow:var(--shadow-md);}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-size:15.2px;font-weight:700;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:8px;background:#eef4f8;color:var(--teal-deep);font-size:17px;font-weight:800;display:grid;place-items:center;transition:transform .2s ease,background .2s ease;}
.faq[open] summary::after{content:"–";background:#e0f2f5;}
.faq-body{padding:0 0 18px;font-size:14.2px;color:var(--muted);line-height:1.85;}

/* ---------- news list ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.news-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2ec;}
.news-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12.2px;color:var(--muted);}
.news-cat{font-weight:700;color:var(--teal-deep);background:#e9f6f8;border:1px solid #cde9ee;border-radius:999px;padding:2px 10px;}
.news-title{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.55;}
.news-card:hover .news-title{color:var(--teal-deep);}
.news-text{font-size:13.8px;color:var(--muted);line-height:1.78;}
.news-empty{font-size:14px;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:var(--radius);padding:26px;text-align:center;}

/* ---------- cta band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(118deg,#0b1b2b 0%,#14324c 62%,#0a5f6c 100%);color:#fff;padding:46px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;box-shadow:var(--shadow-lg);}
.cta-band h2{font-size:clamp(20px,2.2vw,26px);font-weight:800;line-height:1.4;}
.cta-band p{margin-top:12px;font-size:14.5px;color:#bcd2df;line-height:1.85;max-width:620px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;flex:none;}

/* ---------- footer ---------- */
.site-footer{background:#0b1b2b;color:#c5d7e2;padding:56px 0 26px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:#fff;}
.footer-desc{margin-top:14px;font-size:13.6px;line-height:1.85;color:#93aec1;max-width:420px;}
.footer-title{font-size:14px;font-weight:800;color:#fff;margin-bottom:14px;letter-spacing:.4px;}
.footer-link{display:block;font-size:13.6px;color:#93aec1;padding:5px 0;transition:color .2s,transform .2s;}
.footer-link:hover{color:#7fd8e5;transform:translateX(3px);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:22px;font-size:12.8px;color:#7f97a9;}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:34px;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .news-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .split{grid-template-columns:1fr;gap:28px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px;}
}
@media (max-width:960px){
  .header-inner{height:62px;}
  .nav-toggle{display:inline-flex;}
  .main-nav{position:absolute;top:62px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:4px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);padding:12px 18px 18px;margin-left:0;}
  .main-nav.is-open{display:flex;}
  .nav-link{padding:12px 10px;font-size:15px;}
  .nav-link.active::after{display:none;}
  .hero{padding:56px 0 62px;}
  .section{padding:56px 0;}
}
@media (max-width:768px){
  .grid-2,.grid-3,.grid-4,.news-grid{grid-template-columns:1fr;}
  .cta-band{flex-direction:column;align-items:flex-start;padding:34px 26px;}
  .cta-actions{width:100%;}
  .cta-actions .btn{flex:1 1 auto;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .footer-bottom{flex-direction:column;}
}
@media (max-width:520px){
  .container{padding:0 18px;}
  .brand-text{font-size:14.6px;}
  .hero h1{font-size:25px;}
  .hero-lead{font-size:14.6px;}
  .hero-actions .btn{width:100%;}
  .section-title{font-size:20px;}
  .card,.stat-card,.step,.news-card{padding:18px;}
  .faq{padding:0 16px;}
}

/* roulang page: category3 */
:root{
  --ink:#0b1b2b;
  --ink-soft:#14324c;
  --teal:#0fa3b8;
  --teal-deep:#0a7f91;
  --gold:#e8a63c;
  --bg:#f4f7fa;
  --surface:#ffffff;
  --line:#e3eaf1;
  --text:#1b2a37;
  --muted:#5c7284;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 2px 10px rgba(13,40,64,.06);
  --shadow-md:0 10px 28px rgba(13,40,64,.10);
  --shadow-lg:0 18px 44px rgba(13,40,64,.16);
  --max:1160px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.78;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}
img{max-width:100%;display:block;border-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}
.btn:focus-visible,.nav-link:focus-visible,.nav-toggle:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(15,163,184,.45);outline-offset:2px;}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease;}
.site-header.is-stuck{box-shadow:0 8px 24px rgba(13,40,64,.09);}
.header-inner{display:flex;align-items:center;gap:24px;height:64px;position:relative;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,var(--teal),var(--teal-deep));display:grid;place-items:center;color:#fff;box-shadow:0 6px 14px rgba(15,163,184,.35);flex:none;}
.brand-mark svg{width:19px;height:19px;}
.brand-text{font-size:16px;font-weight:800;letter-spacing:.3px;color:var(--ink);white-space:nowrap;}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.nav-link{position:relative;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:color .2s,background .2s;}
.nav-link:hover{color:var(--ink);background:#eef4f8;}
.nav-link.active{color:var(--teal-deep);}
.nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--teal);}
.header-actions{display:flex;align-items:center;gap:10px;flex:none;}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;border:1px solid var(--line);color:var(--ink);background:#fff;}
.nav-toggle svg{width:20px;height:20px;}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:11px 22px;font-size:14.5px;font-weight:700;border:1px solid transparent;min-height:44px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;}
.btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 8px 18px rgba(10,127,145,.28);}
.btn-primary:hover{background:#086a79;transform:translateY(-2px);box-shadow:0 12px 24px rgba(10,127,145,.34);}
.btn-primary:active{transform:translateY(0);box-shadow:0 5px 12px rgba(10,127,145,.28);}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08);}
.btn-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff;box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px);}
.btn-sm{padding:8px 16px;min-height:38px;font-size:13.5px;border-radius:8px;}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#08182a;color:#fff;padding:64px 0 72px;}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(104deg,rgba(7,22,35,.95) 0%,rgba(7,22,35,.78) 48%,rgba(7,22,35,.45) 100%);}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.28fr .9fr;gap:48px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.8px;font-weight:700;letter-spacing:.6px;color:#bfe6ec;background:rgba(15,163,184,.2);border:1px solid rgba(15,163,184,.42);border-radius:999px;padding:6px 14px;}
.hero h1{margin-top:20px;font-size:clamp(26px,3.4vw,40px);line-height:1.32;font-weight:800;letter-spacing:.5px;color:#fff;}
.hero-lead{margin-top:18px;font-size:15.5px;line-height:1.85;color:#c5d7e2;max-width:640px;}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.tag{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:#d5e8ef;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 14px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
.panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:24px;backdrop-filter:blur(8px);box-shadow:0 20px 44px rgba(0,0,0,.28);}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:16px;font-weight:800;color:#fff;}
.panel-badge{font-size:11.8px;font-weight:700;color:#0b1b2b;background:var(--gold);border-radius:999px;padding:3px 10px;letter-spacing:.4px;}
.panel-list{margin-top:18px;display:grid;gap:2px;}
.panel-list li{display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:13.4px;color:#a9c4d3;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.13);}
.panel-list li:last-child{border-bottom:none;}
.panel-list b{color:#fff;font-weight:700;}
.panel-note{margin-top:16px;font-size:12.6px;color:#8fabbd;line-height:1.7;}
.panel-grid{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.panel-link{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:9px;font-size:13.4px;font-weight:700;color:#e6f3f7;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);transition:background .2s,transform .2s,border-color .2s;}
.panel-link:hover{background:rgba(15,163,184,.28);border-color:rgba(15,163,184,.55);transform:translateY(-2px);}
/* ---------- sections ---------- */
.section{padding:72px 0;}
.section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:790px;margin-bottom:38px;}
.section-kicker{display:inline-block;font-size:12.6px;font-weight:800;letter-spacing:1.4px;color:var(--teal-deep);margin-bottom:10px;}
.section-kicker::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--gold);vertical-align:middle;margin-right:9px;}
.section-title{font-size:clamp(21px,2.3vw,28px);line-height:1.42;font-weight:800;color:var(--ink);letter-spacing:.2px;}
.section-sub{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.82;}
/* ---------- grids & cards ---------- */
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.card{display:flex;flex-direction:column;gap:12px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2ea;}
.card-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--teal-deep);background:#e8f6f8;border:1px solid #d3ecf0;flex:none;}
.card-icon svg{width:22px;height:22px;}
.card-title{font-size:17px;font-weight:800;color:var(--ink);line-height:1.45;}
.card-text{font-size:14.4px;color:var(--muted);line-height:1.8;}
.card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px;}
.pill{display:inline-flex;align-items:center;font-size:12.4px;font-weight:700;color:var(--teal-deep);background:#eaf7f9;border:1px solid #d2ecf1;border-radius:999px;padding:4px 11px;}
.pill-gold{color:#8a5b12;background:#fdf3e2;border-color:#f2e0c2;}
/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:step;}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px 22px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe2ea;}
.step-no{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--ink);color:#fff;font-size:14px;font-weight:800;margin-bottom:14px;}
.step h3{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px;}
.step p{font-size:14px;color:var(--muted);line-height:1.78;}
/* ---------- scenario ---------- */
.scenario{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
.scenario-media{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);position:relative;}
.scenario-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11;}
.scenario-list{display:grid;gap:16px;margin-top:24px;}
.scenario-item{display:flex;gap:14px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;}
.scenario-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#cfe2ea;}
.scenario-item .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);margin-top:9px;flex:none;box-shadow:0 0 0 4px rgba(15,163,184,.14);}
.scenario-item h3{font-size:15.5px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.scenario-item p{font-size:14px;color:var(--muted);line-height:1.78;}
/* ---------- stats ---------- */
.stats-band{background:linear-gradient(140deg,#0b1b2b,#123653 62%,#0a7f91 140%);color:#fff;padding:66px 0;position:relative;overflow:hidden;}
.stats-band::after{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(15,163,184,.34),transparent 68%);}
.stats-inner{position:relative;z-index:2;}
.stats-band .section-kicker{color:#8fd8e3;}
.stats-band .section-title{color:#fff;}
.stats-band .section-sub{color:#b6cddb;}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:34px;}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:22px;transition:background .2s,transform .2s;}
.stat:hover{background:rgba(15,163,184,.2);transform:translateY(-3px);}
.stat strong{display:block;font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#fff;letter-spacing:.5px;}
.stat span{display:block;margin-top:6px;font-size:13.4px;color:#a9c4d3;}
/* ---------- quotes ---------- */
.quote{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);height:100%;transition:transform .2s,box-shadow .2s;}
.quote:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.quote p{font-size:14.6px;color:var(--ink-soft);line-height:1.8;}
.quote footer{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:13.2px;color:var(--muted);font-weight:600;}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,var(--teal),var(--teal-deep));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none;}
/* ---------- channel ---------- */
.channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.channel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;}
.channel:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--teal);color:var(--teal-deep);}
.channel b{display:block;font-size:15.5px;font-weight:800;color:var(--ink);}
.channel small{display:block;margin-top:4px;font-size:12.8px;color:var(--muted);}
.channel .arrow{color:var(--teal-deep);font-size:18px;line-height:1;flex:none;}
/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.news-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;height:100%;}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#cfe2ea;}
.news-link{display:flex;flex-direction:column;height:100%;}
.news-thumb{aspect-ratio:16/9;overflow:hidden;background:#dce7ee;}
.news-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.news-card:hover .news-thumb img{transform:scale(1.04);}
.news-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.news-cat{align-self:flex-start;font-size:12.2px;font-weight:700;color:var(--teal-deep);background:#eaf7f9;border:1px solid #d2ecf1;border-radius:999px;padding:3px 10px;}
.news-title{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.5;}
.news-desc{font-size:13.8px;color:var(--muted);line-height:1.75;}
.news-date{margin-top:auto;font-size:12.6px;color:#8ba0b0;}
.news-empty{padding:26px;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);font-size:14px;}
/* ---------- faq ---------- */
.faq-list{display:grid;gap:14px;max-width:900px;}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.faq[open]{border-color:#cfe2ea;box-shadow:var(--shadow-md);}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:15.4px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:19px;font-weight:700;color:var(--teal-deep);transition:transform .2s;flex:none;}
.faq[open] summary::after{content:"–";}
.faq-body{padding:0 22px 20px;font-size:14.4px;color:var(--muted);line-height:1.82;}
/* ---------- cta ---------- */
.cta-band{background:linear-gradient(120deg,#0a7f91,#0fa3b8 58%,#12b3c6);color:#fff;padding:56px 0;}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.cta-inner h2{font-size:clamp(20px,2.4vw,27px);font-weight:800;color:#fff;line-height:1.45;}
.cta-inner p{margin-top:12px;font-size:14.6px;color:#dff3f7;max-width:620px;line-height:1.8;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;}
.cta-actions .btn-outline{background:rgba(255,255,255,.94);border-color:transparent;}
.cta-actions .btn-outline:hover{background:#fff;color:var(--teal-deep);}
/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#a9c0d0;padding:56px 0 26px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-size:16px;font-weight:800;margin-bottom:16px;}
.footer-desc{font-size:13.8px;line-height:1.85;color:#8fabbd;max-width:420px;}
.footer-title{font-size:14.2px;font-weight:800;color:#fff;margin-bottom:14px;letter-spacing:.4px;}
.footer-link{display:block;font-size:13.8px;color:#9db6c7;padding:6px 0;transition:color .2s,transform .2s;}
.footer-link:hover{color:#fff;transform:translateX(3px);}
.footer-bottom{margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.8px;color:#7f99ab;}
/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:32px;}
  .hero{padding:52px 0 58px;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .scenario{grid-template-columns:1fr;gap:28px;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .news-grid,.channel-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px;}
}
@media (max-width:900px){
  .nav-toggle{display:inline-flex;}
  .main-nav{position:absolute;top:64px;left:-24px;right:-24px;display:none;flex-direction:column;align-items:stretch;gap:4px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);padding:12px 24px 18px;margin-left:0;}
  .main-nav.is-open{display:flex;}
  .nav-link{padding:12px 10px;font-size:15px;}
  .nav-link.active{background:#eaf6f8;}
  .nav-link.active::after{display:none;}
  .header-actions{margin-left:auto;}
}
@media (max-width:768px){
  .section{padding:52px 0;}
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .news-grid,.channel-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:8px;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
  .brand-text{font-size:14.6px;}
  .header-inner{gap:12px;}
}
@media (max-width:520px){
  .container{padding:0 16px;}
  .main-nav{left:-16px;right:-16px;padding:12px 16px 16px;}
  .hero h1{font-size:25px;}
  .hero-lead{font-size:14.6px;}
  .grid-4,.steps,.stats{grid-template-columns:1fr;}
  .hero-actions .btn,.cta-actions .btn{width:100%;}
  .panel-grid{grid-template-columns:1fr;}
  .card,.step,.quote{padding:20px;}
  .header-actions .btn-sm{display:none;}
}