/* roulang page: index */
:root{
  --primary:#0F7B72;
  --primary-deep:#0B5C56;
  --deep:#0A2B2B;
  --deep-soft:#103B38;
  --accent:#DF973D;
  --accent-soft:#F7E7CD;
  --paper:#F7F5EF;
  --card:#FFFFFF;
  --text:#20302D;
  --muted:#62736E;
  --border:#E1E5DE;
  --white:#fff;
  --radius-xl:20px;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-soft:0 1px 2px rgba(24,52,50,.04),0 12px 28px -20px rgba(24,52,50,.25);
  --shadow-hover:0 2px 4px rgba(24,52,50,.06),0 20px 44px -20px rgba(24,52,50,.36);
  --font-serif:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0;background:var(--paper);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font-family:var(--font-sans)}
.container{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px;width:100%}
.section{padding-top:88px;padding-bottom:96px}
#main{scroll-margin-top:120px}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--deep);color:#fff;padding:10px 18px;z-index:999}
.skip-link:focus{left:0}

.section-head{max-width:820px;margin-bottom:42px}
.section-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--primary);background:rgba(15,123,114,.1);border:1px solid rgba(15,123,114,.15);padding:5px 16px;border-radius:999px;text-transform:uppercase;margin-bottom:16px}
.section-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary)}
.section-title{font-family:var(--font-serif);font-size:clamp(28px,3.2vw,38px);line-height:1.32;margin:0 0 16px;color:var(--deep)}
.section-text{font-size:16px;line-height:1.9;color:var(--muted);margin:0}
.section-head.is-center{text-align:center;margin-left:auto;margin-right:auto}

.header-block{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(10,43,43,.1)}
.header-main{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--deep)}
.brand-icon{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--primary);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:20px;font-weight:700;letter-spacing:.01em;color:var(--deep)}
.brand-text small{font-size:11px;color:var(--muted);font-weight:400;letter-spacing:.06em}
.header-note{font-size:13px;color:var(--muted);display:none}
.header-cta{display:flex;align-items:center;gap:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;line-height:1.2;padding:10px 24px;border-radius:999px;border:1px solid transparent;background:transparent;cursor:pointer;transition:all .2s ease;text-align:center;white-space:nowrap}
.btn i{font-size:13px}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-deep);border-color:var(--primary-deep);transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(15,123,114,.65)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:#c9852b;border-color:#c9852b;transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(223,151,61,.6)}
.btn-accent:active{transform:translateY(0)}
.btn-outline{border-color:currentColor;color:#fff;background:rgba(255,255,255,.06)}
.btn-outline:hover{background:rgba(255,255,255,.14);border-color:currentColor;color:#fff;transform:translateY(-2px)}
.btn-light{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.btn-light:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;transform:translateY(-2px)}
.btn-deep-outline{border-color:var(--deep);color:var(--deep)}
.btn-deep-outline:hover{background:var(--deep);color:#fff;border-color:var(--deep);transform:translateY(-2px)}
.btn-sm{padding:8px 16px;font-size:13px;border-radius:999px}
.btn:active{transform:translateY(0) scale(.99)}
.btn[disabled]{opacity:.6;cursor:not-allowed;pointer-events:none}

.channel-tabs{border-top:1px solid rgba(10,43,43,.08);position:relative}
.tabs-scroll{overflow-x:auto;scrollbar-width:none}
.tabs-scroll::-webkit-scrollbar{display:none}
.channel-tabs ul{list-style:none;display:flex;gap:34px;margin:0;padding:0;white-space:nowrap;min-width:max-content}
.channel-tabs ul li{margin:0}
.channel-tabs a{display:inline-block;padding:13px 2px 14px;font-size:15px;font-weight:500;color:var(--deep-soft);border-bottom:2px solid transparent;transition:color .2s,box-shadow .2s}
.channel-tabs a i{font-size:12px;margin-right:7px;opacity:.7}
.channel-tabs a:hover,.channel-tabs a:focus-visible{color:var(--primary)}
.channel-tabs a.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-slug{display:none}

.hero{position:relative;overflow:hidden;background:linear-gradient(108deg,rgba(8,40,39,.98) 2%,rgba(11,74,71,.92) 48%,rgba(15,123,114,.88) 100%),url('/assets/images/backpic/back-1.webp') no-repeat center/cover;color:#fff;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px;opacity:.55;pointer-events:none}
.hero-inner{padding:82px 0 78px}
.hero-copy{max-width:640px}
.hero-pill{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.05em;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#F3EFE6;padding:7px 16px;border-radius:999px;margin-bottom:24px}
.hero-pill i{color:var(--accent)}
.hero h1{font-family:var(--font-serif);font-size:clamp(30px,4vw,50px);line-height:1.26;margin:0 0 20px;color:#fff;font-weight:700}
.hero-sub{font-size:18px;line-height:1.85;color:rgba(255,255,255,.83);max-width:560px;margin:0 0 34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:590px;margin:0}
.stat-line{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px 18px;backdrop-filter:blur(4px)}
.stat-line strong{display:block;font-family:var(--font-serif);font-size:24px;line-height:1.3;color:#fff}
.stat-line span{font-size:12px;color:rgba(255,255,255,.75)}
.hero-visual{position:relative}
.hero-card{background:rgba(255,255,255,.98);border-radius:var(--radius-xl);box-shadow:0 30px 80px -30px rgba(0,0,0,.4);overflow:hidden;color:var(--text);transform:translateY(0);animation:floatY 5s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-card .ph{position:relative;height:190px;overflow:hidden}
.hero-card .ph img{width:100%;height:100%;object-fit:cover}
.hero-card-body{padding:20px 24px 8px}
.hero-card-body strong{font-size:17px;color:var(--deep)}
.hero-card-item{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:13px;color:var(--muted);border-top:1px solid #edf0ea}
.hero-card-item i{color:var(--primary);font-size:11px;width:18px;text-align:center}
.hero-card-item b{color:var(--deep);font-weight:500}
.hero-card-extra{padding:10px 24px 24px}

.section-steps{background:var(--paper)}
.section-steps .section-head{margin-bottom:50px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;margin-top:20px}
.steps-grid::before{content:"";position:absolute;top:31px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(15,123,114,.4),rgba(223,151,61,.5),rgba(15,123,114,.4),transparent);pointer-events:none}
.step-item{background:rgba(255,255,255,.01);padding:0 16px;position:relative;text-align:center}
.step-number{width:62px;height:62px;border-radius:50%;margin:0 auto 18px;background:var(--paper);border:1px solid rgba(15,123,114,.14);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;box-shadow:0 0 0 8px rgba(247,245,239,.9)}
.step-number span{font-family:var(--font-serif);font-weight:700;color:var(--accent);font-size:17px}
.step-title{font-family:var(--font-serif);font-size:20px;margin:0 0 10px;color:var(--deep)}
.step-desc{font-size:14.5px;line-height:1.9;color:var(--muted);margin:0}
.step-icon{display:block;width:56px;height:56px;margin:0 auto 10px;border-radius:16px;background:rgba(15,123,114,.08);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:22px}

.section-proof{background:#fff;border-top:1px solid rgba(224,228,220,.6);border-bottom:1px solid rgba(224,228,220,.6)}
.proof-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch}
.proof-feature{border-radius:var(--radius-lg);overflow:hidden;background:var(--paper);border:1px solid var(--border);transition:box-shadow .25s,transform .25s}
.proof-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.proof-imgwrap{position:relative;height:240px;overflow:hidden}
.proof-imgwrap img{width:100%;height:100%;object-fit:cover}
.proof-imgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,43,43,0) 45%,rgba(10,43,43,.55))}
.proof-tier{position:absolute;left:18px;bottom:14px;z-index:2;color:#fff;font-size:12px;font-weight:500;background:rgba(255,255,255,.16);padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.proof-body{padding:23px 25px 26px}
.proof-body h3{font-size:21px;line-height:1.45;font-family:var(--font-serif);color:var(--deep);margin:0 0 14px}
.proof-body p{font-size:14.5px;line-height:1.9;color:var(--muted);margin:0 0 20px}
.result-tags{display:flex;flex-wrap:wrap;gap:8px}
.result-tags span{font-size:12px;font-weight:500;color:var(--primary);background:rgba(15,123,114,.1);border-radius:8px;padding:5px 11px}
.proof-col{display:flex;flex-direction:column;gap:24px}
.proof-small{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:21px 23px;display:flex;gap:15px;flex:1 1 0;transition:box-shadow .25s,transform .25s}
.proof-small:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.proof-small .icon-placeholder{flex:0 0 50px;width:50px;height:50px;border-radius:15px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px}
.proof-small h4{margin:0 0 6px;font-size:15px;color:var(--deep);font-weight:600}
.proof-small p{margin:0 0 4px;font-size:12.5px;color:var(--muted);line-height:1.8}
.proof-small em{font-style:normal;font-size:12px;font-weight:600;color:var(--accent)}
.section-note{display:inline-flex;align-items:center;gap:6px;margin-top:26px;font-size:12px;color:var(--muted)}
.section-note i{color:var(--accent)}

.section-faq{background:var(--paper)}
.faq-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
.faq-intro{position:sticky;top:140px}
.faq-intro h2{margin-bottom:18px}
.faq-intro p{font-size:15px;color:var(--muted);margin:0 0 26px}
.help-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-soft)}
.help-card strong{display:block;font-size:17px;color:var(--deep);margin-bottom:10px}
.help-card p{font-size:13.5px;color:var(--muted);margin:0 0 16px;line-height:1.75}
.help-card a.btn{padding:8px 20px;font-size:13px}
.faq-list{margin:0;border-top:1px solid var(--border)}
.faq-item{background:#fff;border:1px solid var(--border);border-top:none;transition:background .2s}
.faq-item:first-child{border-radius:16px 16px 0 0;border-top:1px solid var(--border)}
.faq-item:last-child{border-radius:0 0 16px 16px}
.faq-item summary{list-style:none;cursor:pointer;position:relative;display:flex;align-items:flex-start;gap:16px;padding:19px 58px 19px 22px;font-weight:600;font-size:15px;color:var(--deep);line-height:1.6;transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--primary)}
.faq-item summary .sum-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:11px}
.faq-item summary .fa-chevron-down{position:absolute;right:22px;top:21px;color:var(--muted);transition:transform .25s;font-size:13px}
.faq-item[open] summary{color:var(--primary)}
.faq-item[open] summary .fa-chevron-down{transform:rotate(180deg)}
.faq-item .faq-answer{padding:0 56px 22px 46px;font-size:14px;color:var(--muted);line-height:1.9}
.faq-item .faq-answer p{margin:0}
.faq-other{margin-top:26px;font-size:13px;color:var(--muted)}
.faq-other a{color:var(--primary);font-weight:500}

.section-news{background:#fff;border-top:1px solid rgba(224,228,220,.6)}
.news-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}
.news-featured{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow .25s,transform .25s}
.news-featured:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.news-featured a.thumb{display:block;height:214px;overflow:hidden}
.news-featured a.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.news-featured:hover a.thumb img{transform:scale(1.03)}
.news-feature-main{display:flex;flex-direction:column;padding:23px 25px 26px;flex:1}
.news-badge{align-self:flex-start;font-size:12px;font-weight:500;padding:5px 13px;border-radius:999px;background:rgba(15,123,114,.1);color:var(--primary);margin-bottom:11px}
.news-feature-main h3{font-size:20px;line-height:1.5;margin:0 0 10px;font-family:var(--font-serif);color:var(--deep)}
.news-feature-main p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 18px}
.news-feature-main .meta-row{display:flex;align-items:center;gap:14px;margin-top:auto;font-size:12.5px;color:var(--muted)}
.news-feature-main .meta-row i{color:var(--primary);width:13px}
.news-feature-main .meta-row span{display:inline-flex;align-items:center;gap:6px}
.news-feature-main .read-more{margin-left:auto;font-size:13px;color:var(--primary);font-weight:600}
.news-feature-main .read-more i{color:var(--primary)}
.news-aside{display:flex;flex-direction:column;gap:13px}
.news-list-item{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 17px;transition:border-color .2s,box-shadow .2s;position:relative}
.news-list-item:hover{border-color:rgba(15,123,114,.35);box-shadow:var(--shadow-soft)}
.news-list-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.news-list-top .tag{color:var(--primary);background:rgba(15,123,114,.09);padding:2px 9px;border-radius:999px;font-size:11px;font-weight:500}
.news-list-top .date{display:inline-flex;align-items:center;gap:4px}
.news-list-top .date i{font-size:10px}
.news-list-item h4{font-size:14px;line-height:1.6;font-weight:600;color:var(--deep);margin:4px 0 2px}
.news-list-item h4 a{color:inherit}
.news-list-item h4 a:hover{color:var(--primary)}
.news-list-item p{font-size:12.5px;line-height:1.75;color:var(--muted);margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.news-list-item a.go{font-size:12px;color:var(--primary);font-weight:500;align-self:flex-start}
.news-empty-state{text-align:center;padding:50px 24px;grid-column:1/-1;background:var(--paper);border:1px dashed var(--border);border-radius:var(--radius-lg);color:var(--muted)}
.news-empty-state i{display:block;font-size:34px;color:var(--primary);margin-bottom:10px}

.section-contact{background:linear-gradient(112deg,rgba(10,43,43,1),rgba(12,72,68,.98)),url('/assets/images/backpic/back-2.png') center/cover;color:#fff;position:relative;isolation:isolate}
.section-contact::before{content:"";position:absolute;inset:0;background:url('/assets/images/backpic/back-3.webp') no-repeat 90% 20%/400px auto;opacity:.07;z-index:-1}
.contact-title{font-family:var(--font-serif);font-size:clamp(28px,3.2vw,42px);color:#fff;line-height:1.4;margin:0 0 15px}
.contact-title span{color:var(--accent)}
.contact-copy{color:rgba(255,255,255,.8);font-size:16px;line-height:1.9;max-width:600px;margin-bottom:30px}
.contact-form{background:#fff;border-radius:var(--radius-lg);padding:30px;color:var(--text);box-shadow:0 24px 70px -20px rgba(0,0,0,.45)}
.contact-form h3{font-family:var(--font-serif);font-size:23px;color:var(--deep);margin:0 0 5px}
.contact-form .sub{font-size:13px;color:var(--muted);margin:0 0 22px}
.contact-form label{display:block;font-size:13px;font-weight:500;color:var(--deep);margin-bottom:6px}
.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;border-radius:10px;border:1px solid #d6ddd6;padding:11px 13px;background:var(--paper);font-size:14px;color:var(--text);transition:border-color .2s,background .2s;margin-bottom:16px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(15,123,114,.14)}
.contact-form textarea{min-height:70px;resize:vertical}
.contact-form .btn-accent{width:100%;margin-top:2px}
.form-success{display:none;gap:10px;align-items:center;background:rgba(15,123,114,.1);color:var(--primary);border:1px solid rgba(15,123,114,.2);border-radius:10px;padding:12px 15px;font-size:13px;margin-top:12px}
.form-success.show{display:flex}
.contact-meta{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.contact-meta .item{display:flex;align-items:center;gap:11px;font-size:14px;color:#fff}
.contact-meta .item i{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:15px;flex:0 0 36px}
.contact-meta .item span{line-height:1.6}
.contact-meta .item small{display:block;color:rgba(255,255,255,.6);font-size:11px}

.site-footer{background:var(--deep);color:rgba(255,255,255,.82);padding-top:54px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:46px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand .brand-text strong{color:#fff}
.footer-brand .brand-text small{color:rgba(255,255,255,.6)}
.footer-brand .brand-icon{background:var(--accent);color:var(--deep)}
.footer-brand>p{font-size:13.5px;line-height:1.9;color:rgba(255,255,255,.65);margin:18px 0 0}
.footer-title{font-size:15px;font-weight:600;color:#fff;margin:0 0 14px;font-family:var(--font-serif)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-links a{font-size:13px;color:rgba(255,255,255,.72);transition:color .2s}
.footer-links a:hover{color:#fff}
.footer-links i{width:17px;font-size:11px;color:var(--accent)}
.footer-contact{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:13px}
.footer-contact i{width:22px;color:var(--accent)}
.footer-bottom{font-size:12px;color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 0}
.footer-bottom .legal{display:inline-flex;gap:12px}

.goto-top{position:fixed;right:16px;bottom:18px;width:42px;height:42px;border-radius:50%;background:var(--deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 10px 20px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.3);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.goto-top.show{opacity:1;pointer-events:auto}
.goto-top:hover{transform:translateY(-3px)}

@media(max-width:1120px){
  .section{padding-top:68px;padding-bottom:78px}
  .hero-card{max-width:500px;margin-left:auto}
  .hero-visual{display:none}
  .hero-inner{padding:64px 0;max-width:760px}
  .hero-stats{grid-template-columns:repeat(3,1fr);max-width:560px}
  .faq-wrap{grid-template-columns:1fr;gap:30px}
  .faq-intro{position:static}
  .footer-grid{gap:32px}
}
@media(max-width:1023px){
  .header-note{display:none}
  .proof-grid{grid-template-columns:1fr}
  .proof-col{flex-direction:row;flex-wrap:wrap}
  .proof-small{flex:1 1 calc(50% - 20px);min-width:250px}
  .proof-feature .ph{height:220px}
}
@media(max-width:768px){
  .container{padding-left:17px;padding-right:17px}
  .section{padding-top:54px;padding-bottom:60px}
  .header-main{min-height:60px}
  .brand-icon{width:32px;height:32px;border-radius:8px}
  .brand-text strong{font-size:18px}
  .brand-text small{display:none}
  .channel-tabs a{padding:11px 0 12px;font-size:14px}
  .step-title,.section-title{font-size:25px}
  .news-layout{grid-template-columns:1fr}
  .faq-item summary{padding:16px 46px 16px 15px}
  .faq-item summary .fa-chevron-down{right:15px;top:18px}
  .faq-answer{padding-left:27px;padding-right:25px}
  .contact-form{padding:22px}
  .contact-meta{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .hero h1{font-size:clamp(26px,6vw,35px);line-height:1.35}
  .hero-sub{font-size:15px}
  .hero-actions .btn{width:calc(50% - 7px);padding-left:12px;padding-right:12px}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:7px}
  .stat-line{padding:10px 9px}
  .stat-line strong{font-size:18px}
  .stat-line span{font-size:10.5px;line-height:1.4;display:block}
  .proof-small{flex-basis:100%}
  .contact-form input,.contact-form select,.contact-form textarea{font-size:16px}
  .footer-bottom{flex-direction:column;align-items:flex-start;font-size:11px;gap:4px}
}
@media(max-width:560px){
  .hero-title{font-size:23px}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn{width:100%}
  .section-kicker{font-size:12px}
  .contact-title{font-size:25px}
}

/* roulang page: article */
:root {
    --primary: #0F7B72;
    --primary-dark: #095D56;
    --primary-soft: #E4F1EE;
    --accent: #DF973D;
    --accent-soft: #F7E7CD;
    --deep: #0A2B2B;
    --ink: #20302D;
    --ink-2: #5D6E69;
    --ink-3: #8A9893;
    --paper: #F7F5EF;
    --card: #FFFFFF;
    --line: #E1E5DE;
    --line-deep: #C9D3CD;
    --shadow-sm: 0 1px 2px rgba(24,52,50,.05), 0 10px 24px -18px rgba(24,52,50,.25);
    --shadow-hover: 0 14px 32px -18px rgba(24,52,50,.28);
    --font-title: "Noto Serif SC", "Songti SC", "Source Han Serif SC", "STSong", serif;
    --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    line-height: 1.36;
    color: var(--ink);
    margin: 0 0 16px;
}

p {
    margin: 0 0 1.25em;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

a:hover {
    color: var(--primary-dark);
}

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

ul,
ol {
    margin: 0;
    padding: 0;
}

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

input,
textarea {
    outline: none;
}

.container,
.grid-container {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
}

.grid-container {
    padding-left: 24px;
    padding-right: 24px;
}

.grid-margin-x > .cell {
    margin-bottom: 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .82rem 1.55rem;
    cursor: pointer;
    transition: all .22s ease;
    text-decoration: none;
    background: transparent;
    line-height: 1.2;
}

.btn i {
    font-size: .92em;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 20px -12px rgba(15,123,114,.65);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(10,90,84,.7);
    outline: none;
}

.btn-primary:active {
    transform: translateY(0);
    background: #084B46;
}

.btn-accent {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 8px 20px -12px rgba(223,151,61,.6);
}

.btn-accent:hover,
.btn-accent:focus {
    background: #C67F2C;
    color: #fff;
    transform: translateY(-2px);
}

.btn-accent:active {
    transform: translateY(0);
}

.btn-outline {
    border-color: rgba(255,255,255,.45);
    color: #fff;
    background: rgba(255,255,255,.04);
}

.btn-outline:hover,
.btn-outline:focus {
    border-color: #fff;
    color: #fff;
    background: rgba(255,255,255,.1);
}

.btn-sm {
    padding: .5rem 1.12rem;
    min-height: 40px;
    font-size: 14px;
}

.btn-block-mobile {
    width: auto;
}

.header-block {
    position: sticky;
    top: 0;
    z-index: 120;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 74px;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;
    min-width: 0;
}

.brand-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 14px;
    flex: 0 0 42px;
}

.brand-icon svg {
    width: 24px;
    height: 24px;
}

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

.brand-text strong {
    font-family: var(--font-title);
    font-size: 20px;
    letter-spacing: .02em;
    color: var(--ink);
    white-space: nowrap;
}

.brand-text small {
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: .06em;
    margin-top: 4px;
    white-space: nowrap;
}

.header-cta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.channel-tabs {
    background: #FCFCF8;
    border-top: 1px solid var(--line);
}

.tabs-scroll ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.tabs-scroll li {
    flex: 0 0 auto;
}

.tabs-scroll a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px 12px;
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
}

.tabs-scroll a i {
    color: var(--ink-3);
    font-size: 14px;
    transition: color .2s ease;
}

.tabs-scroll a:hover {
    color: var(--primary);
    background: rgba(15,123,114,.05);
}

.tabs-scroll a:hover i {
    color: var(--primary);
}

.tabs-scroll a.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.tabs-scroll a.active i {
    color: var(--primary);
}

.tabs-scroll a:focus-visible,
.btn:focus-visible,
.site-footer a:focus-visible,
.post-direction a:focus-visible,
.related-card a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.article-main {
    padding: 42px 0 64px;
    position: relative;
}

.article-main::before {
    content: "";
    position: absolute;
    inset: 0 0 32% 0;
    pointer-events: none;
    background: radial-gradient(circle at 15% 8%, rgba(15,123,114,.06), transparent 28%), radial-gradient(circle at 88% 18%, rgba(223,151,61,.08), transparent 26%);
    z-index: 0;
}

.article-wrapper {
    position: relative;
    z-index: 1;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-2);
    margin-bottom: 22px;
}

.breadcrumb-nav a {
    color: var(--primary);
}

.breadcrumb-nav a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.breadcrumb-nav span,
.breadcrumb-nav em {
    color: var(--ink-3);
    font-style: normal;
}

.post-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow-sm);
    padding: 48px 48px 52px;
    margin-bottom: 28px;
}

.post-header {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.post-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.post-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.post-pill i {
    font-size: 12px;
}

.post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ink-2);
}

.post-meta-item i {
    color: var(--accent);
}

.post-title {
    font-size: clamp(27px, 4vw, 42px);
    letter-spacing: .02em;
    margin: 0 0 16px;
}

.post-summary {
    font-size: 16px;
    color: var(--ink-2);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.9;
}

.post-divider {
    width: 64px;
    height: 3px;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    margin: 28px auto 0;
    border: 0;
}

.reading-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(24,52,50,.03);
    margin-bottom: 28px;
    overflow: hidden;
}

.reading-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 26px 48px 0;
}

.reading-head i {
    color: var(--primary);
    font-size: 20px;
}

.reading-head-line {
    font-size: 13px;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
    width: 100%;
}

.article-body {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 48px 52px;
    font-size: 17.5px;
    line-height: 2;
    color: var(--ink);
    overflow-wrap: break-word;
    word-break: normal;
}

.article-body > *:first-child {
    margin-top: 0;
}

.article-body p {
    line-height: 2;
    margin-bottom: 1.7em;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    font-family: var(--font-title);
    margin: 2em 0 1em;
    color: var(--ink);
    letter-spacing: .02em;
}

.article-body h2 {
    font-size: 28px;
    padding-left: 16px;
    border-left: 4px solid var(--primary);
    border-radius: 2px;
}

.article-body h3 {
    font-size: 22px;
}

.article-body h4 {
    font-size: 18px;
    font-weight: 600;
}

.article-body a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.article-body a:hover {
    color: var(--primary-dark);
    text-decoration-thickness: 2px;
}

.article-body img {
    border-radius: 18px;
    box-shadow: 0 12px 24px -18px rgba(24,52,50,.35);
    margin: 34px auto;
}

.article-body figure {
    margin: 34px auto;
}

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

.article-body ul,
.article-body ol {
    margin: 0 0 1.8em 1.5em;
    padding-left: 0;
}

.article-body li {
    margin-bottom: .5em;
    padding-left: 4px;
}

.article-body blockquote {
    position: relative;
    margin: 2em 0;
    padding: 24px 28px 24px 32px;
    border-radius: 16px;
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    color: var(--ink);
    font-size: 17px;
}

.article-body blockquote p {
    margin-bottom: .8em;
}

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

.article-body blockquote cite {
    display: block;
    font-style: normal;
    color: var(--primary-dark);
    font-size: 14px;
    margin-top: 10px;
}

.article-body pre {
    background: var(--deep);
    color: #E4F3EE;
    padding: 24px 26px;
    border-radius: 16px;
    overflow-x: auto;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 14px;
    line-height: 1.8;
    margin: 2em 0;
}

.article-body pre code {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

.article-body code {
    background: rgba(15,123,114,.08);
    color: #0B5B55;
    padding: 2px 7px;
    border-radius: 7px;
    font-family: "SFMono-Regular", "Liberation Mono", Menlo, monospace;
    font-size: .92em;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    margin: 2em 0;
    display: block;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    white-space: nowrap;
}

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

.article-body th {
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
}

.article-body tr:last-child td {
    border-bottom: none;
}

.article-body hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 3em auto;
    max-width: 480px;
}

.article-empty {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px 60px;
    text-align: center;
}

.article-empty .empty-icon {
    font-size: 58px;
    color: var(--accent);
    margin-bottom: 18px;
}

.article-empty h1 {
    font-size: 28px;
}

.article-empty p {
    color: var(--ink-2);
}

.article-empty .btn {
    margin-top: 10px;
}

.empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.post-direction-panel {
    border-bottom: 1px solid var(--line);
    margin-bottom: 48px;
    padding-bottom: 40px;
}

.post-direction {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 860px;
    margin: 0 auto;
}

.direction-item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 2px rgba(24,52,50,.02);
    transition: all .24s ease;
    min-width: 0;
}

.direction-item:hover,
.direction-item:focus {
    border-color: rgba(15,123,114,.35);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.direction-icon {
    background: var(--primary-soft);
    color: var(--primary);
    width: 42px;
    height: 42px;
    border-radius: 14px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.direction-item.next .direction-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

.direction-text {
    min-width: 0;
}

.direction-text span {
    display: block;
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 4px;
}

.direction-text strong {
    font-size: 15px;
    color: var(--ink);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-block {
    margin-bottom: 52px;
}

.section-headline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.section-headline h2 {
    font-size: 28px;
    margin: 0;
}

.headline-sub {
    color: var(--ink-3);
    font-size: 13px;
    letter-spacing: .04em;
}

.related-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.related-list > * {
    width: calc(33.3333% - 24px);
    margin: 0 12px 24px;
}

.related-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 1px 2px rgba(24,52,50,.03);
    transition: all .24s ease;
}

.related-card:hover,
.related-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(15,123,114,.28);
    box-shadow: var(--shadow-hover);
}

.related-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--primary-soft);
    position: relative;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.related-card:hover .related-thumb img {
    transform: scale(1.03);
}

.related-thumb .thumb-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(10,43,43,.16));
    pointer-events: none;
}

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

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

.related-title {
    font-family: var(--font-title);
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.related-desc {
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.85;
    flex: 1;
    margin-bottom: 18px;
}

.related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--primary);
}

.related-link i {
    transition: transform .2s ease;
}

.related-link:hover i {
    transform: translateX(4px);
}

.contact-band {
    position: relative;
    background: var(--deep);
    border-radius: 28px;
    overflow: hidden;
    padding: 58px 12%;
    margin-bottom: 30px;
    background-image: linear-gradient(90deg, rgba(10,43,43,.97) 0%, rgba(10,43,43,.84) 100%), url('/assets/images/backpic/back-1.webp');
    background-size: cover;
    background-position: center right;
}

.contact-inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
    color: #EDF7F3;
}

.contact-inner h2 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 14px;
}

.contact-inner p {
    color: rgba(237,247,243,.76);
    margin-bottom: 28px;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.site-footer {
    background: var(--deep);
    color: rgba(229,241,236,.78);
    padding: 60px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr .7fr .9fr;
    gap: 46px;
    margin-bottom: 42px;
}

.site-footer .brand {
    color: #EDF7F3;
    margin-bottom: 16px;
}

.site-footer .brand-icon {
    background: rgba(255,255,255,.09);
}

.site-footer .brand-text strong {
    color: #fff;
}

.site-footer .brand-text small {
    color: rgba(229,241,236,.5);
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.95;
    color: rgba(229,241,236,.64);
    margin-bottom: 0;
}

.footer-title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: .02em;
}

.footer-links {
    list-style: none;
    padding: 0;
}

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

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(229,241,236,.68);
    font-size: 14px;
}

.footer-links a i {
    color: var(--accent);
    font-size: 10px;
}

.footer-links a:hover {
    color: #fff;
}

.footer-contact {
    list-style: none;
    padding: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: rgba(229,241,236,.68);
    margin-bottom: 10px;
}

.footer-contact i {
    color: var(--accent);
    margin-top: 5px;
}

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

.footer-bottom .legal {
    display: flex;
    gap: 12px;
}

.back-top {
    position: fixed;
    right: 18px;
    bottom: 28px;
    z-index: 90;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: var(--primary);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: all .25s ease;
    box-shadow: 0 10px 24px -12px rgba(10,43,43,.45);
}

.back-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-top:hover,
.back-top:focus {
    background: var(--accent);
    outline: none;
}

.back-top:active {
    transform: scale(.96);
}

@media screen and (max-width: 1023px) {
    .header-main {
        min-height: 68px;
    }

    .related-list > * {
        width: calc(50% - 24px);
    }

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

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 767px) {
    .article-main {
        padding: 26px 0 48px;
    }

    .post-panel {
        padding: 34px 24px 36px;
        border-radius: 20px;
    }

    .reading-panel {
        border-radius: 18px;
    }

    .reading-head {
        padding: 22px 22px 0;
    }

    .article-body {
        padding: 26px 22px 40px;
        font-size: 16.5px;
    }

    .article-body h2 {
        font-size: 24px;
    }

    .article-body pre {
        padding: 18px;
        font-size: 13px;
    }

    .contact-band {
        padding: 44px 24px;
        border-radius: 22px;
    }

    .contact-inner h2 {
        font-size: 27px;
    }

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

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media screen and (max-width: 639px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .grid-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-block {
        backdrop-filter: none;
    }

    .brand-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 12px;
    }

    .brand-text strong {
        font-size: 17px;
    }

    .brand-text small {
        display: none;
    }

    .header-cta .btn {
        font-size: 0;
        width: 42px;
        height: 42px;
        padding: 0;
        min-height: 0;
        border-radius: 14px;
    }

    .header-cta .btn i {
        font-size: 16px;
    }

    .tabs-scroll {
        overflow: hidden;
    }

    .tabs-scroll::before,
    .tabs-scroll::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 10px;
        pointer-events: none;
        z-index: 2;
    }

    .tabs-scroll::before {
        left: 0;
        background: linear-gradient(90deg, rgba(252,252,248,.95), transparent);
    }

    .tabs-scroll::after {
        right: 0;
        background: linear-gradient(-90deg, rgba(252,252,248,.95), transparent);
    }

    .channel-tabs {
        background: #FCFCF8;
        position: relative;
    }

    .tabs-scroll ul {
        overflow-x: auto;
        scrollbar-width: none;
        padding: 6px 0 0;
    }

    .tabs-scroll ul::-webkit-scrollbar {
        display: none;
    }

    .tabs-scroll a {
        padding: 8px 14px 8px;
        font-size: 13px;
        border-radius: 999px 999px 0 0;
        border-bottom: 0;
        background: transparent;
    }

    .tabs-scroll a:hover {
        background: rgba(15,123,114,.06);
    }

    .tabs-scroll a.active {
        background: var(--primary);
        color: #fff;
    }

    .tabs-scroll a.active i {
        color: #fff;
    }

    .breadcrumb-nav {
        font-size: 13px;
    }

    .post-kicker {
        gap: 8px;
        margin-bottom: 16px;
    }

    .post-title {
        font-size: 25px;
        line-height: 1.45;
    }

    .post-summary {
        font-size: 15px;
    }

    .post-direction {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .section-headline {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .related-list {
        display: block;
        margin: 0;
    }

    .related-list > * {
        width: 100%;
        margin: 0 0 16px;
    }
}

@media (max-width: 1023px) and (min-width: 640px) {
    .brand-text strong {
        font-size: 18px;
    }

    .btn-sm {
        padding: .5rem 1rem;
        font-size: 13px;
    }
}

/* roulang page: category1 */
:root {
  --primary: #0F7B72;
  --primary-soft: rgba(15, 123, 114, 0.08);
  --deep: #0A2B2B;
  --deep-2: #123B3A;
  --accent: #DF973D;
  --accent-soft: #F7E7CD;
  --paper: #F7F5EF;
  --card: #FFFFFF;
  --text: #20302D;
  --muted: #62736E;
  --border: #E1E5DE;
  --shadow-card: 0 1px 2px rgba(24,52,50,.05), 0 10px 24px -18px rgba(24,52,50,.25);
  --shadow-hover: 0 16px 32px -20px rgba(10,43,43,.35), 0 2px 6px rgba(24,52,50,.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --container-width: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  background: #FAFAF7;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5 { font-family: var(--font-serif); margin: 0 0 0.5em; line-height: 1.35; color: var(--text); font-weight: 700; }
::-moz-selection { background: rgba(15,123,114,.18); }
::selection { background: rgba(15,123,114,.18); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding-left: 24px; padding-right: 24px; position: relative; }
.section { padding: 96px 0; }
.section-paper { background: var(--paper); }
.section-head { max-width: 820px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { font-size: 36px; font-weight: 900; color: var(--deep); letter-spacing: .01em; }
.section-head p:last-child { color: var(--muted); font-size: 17px; margin: 16px 0 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .05em;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--primary-soft);
}
::marker, summary::-webkit-details-marker { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-sans);
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn-sm { padding: 9px 18px; font-size: 14px; border-radius: 9px; gap: 8px; }
.btn-lg { padding: 16px 34px; font-size: 16px; border-radius: 12px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--deep); box-shadow: 0 8px 20px -12px rgba(223,151,61,.6); }
.btn-primary:hover { background: #E7A44E; border-color: #E7A44E; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(223,151,61,.7); }
.btn-primary:active { transform: translateY(0); background: #C9862C; border-color:#C9862C; }
.btn-outline { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0); background: rgba(255,255,255,.08); }
.btn-outline-dark { background: transparent; border-color: rgba(10,43,43,.3); color: var(--deep); }
.btn-outline-dark:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-accent-light { background: var(--accent); color: var(--deep); border-color: var(--accent); }
.btn-accent-light:hover { background: #EEAD5B; border-color:#EEAD5B; transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(223,151,61,.8); }

/*============================================
  Header
============================================*/
.header-block {
  position: relative;
  z-index: 50;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 18px -16px rgba(10,43,43,.2);
}
.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--deep); }
.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--primary), #0B5B55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -10px rgba(15,123,114,.7);
}
.brand-icon svg { display: block; }
.brand-text strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: .01em;
}
.brand-text small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.header-cta .btn-primary { background: var(--deep); border-color: var(--deep); color: #fff; box-shadow: 0 10px 20px -14px rgba(10,43,43,.8); }
.header-cta .btn-primary:hover { background: #123F3E; border-color:#123F3E; }
.channel-tabs { background: #fff; border-top: 1px solid rgba(225,229,222,.8); }
.channel-tabs .tabs-scroll { padding-top: 0; padding-bottom: 0; }
.channel-tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.channel-tabs ul::-webkit-scrollbar { display: none; }
.channel-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px 13px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
  white-space: nowrap;
}
.channel-tabs a i { color: var(--muted); font-size: 14px; transition: color .2s; }
.channel-tabs a:hover { color: var(--primary); background: rgba(15,123,114,.04); }
.channel-tabs a:hover i { color: var(--primary); }
.channel-tabs a.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(15,123,114,.06); }
.channel-tabs a.active i { color: var(--primary); }
.header-cta a { font-size: 14px; box-shadow: 0 6px 16px -8px rgba(10,43,43,.5); }

/*============================================
  Hero
============================================*/
.channel-hero {
  position: relative;
  color: #EAF3F1;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(7,32,32,.96) 0%, rgba(10,43,43,.86) 55%, rgba(15,123,114,.72) 100%),
    url('/assets/images/backpic/back-2.png') center center / cover no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.channel-hero::before {
  content: '';
  position: absolute;
  inset: auto -80px -120px auto;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223,151,61,.20) 0%, rgba(223,151,61,0) 70%);
  pointer-events: none;
}
.channel-hero::after {
  content: '';
  position: absolute;
  inset: auto auto -200px -120px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  pointer-events: none;
}
.hero-grid { padding: 94px 0 110px; position: relative; z-index: 2; }
.hero-copy { max-width: 720px; }
.hero-copy h1 {
  color: #fff;
  font-size: 46px;
  line-height: 1.2;
  font-weight: 900;
  margin: 14px 0 20px;
}
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(234,243,241,.75); }
.breadcrumb a { color: rgba(234,243,241,.85); }
.breadcrumb a:hover { color: #ECB269; }
.breadcrumb i { font-size: 10px; opacity: .6; }
.hero-copy .lead { font-size: 18px; color: rgba(234,243,241,.88); line-height: 1.9; max-width: 650px; margin-bottom: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 34px; }
.hero-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; color: rgba(234,243,241,.82); }
.hero-list li { display: inline-flex; align-items: center; gap: 6px; }
.hero-list i { color: #EEB967; }
.hero-side-card {
  max-width: 520px;
  margin-left: auto;
  margin-top: 26px;
  padding: 34px 30px 30px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-xl);
  color: #EAF3F1;
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.5);
}
.hero-side-card .card-kicker { display: block; font-size: 13px; color: #EFC279; font-weight: 700; margin-bottom: 8px; letter-spacing: .04em; }
.hero-side-card h2 { color: #fff; font-size: 24px; margin-bottom: 22px; }
.partner-type-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 14px; }
.partner-type-list li { display: grid; grid-template-columns: 118px 1fr; gap: 10px; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 12px; }
.partner-type-list strong { color: #fff; font-weight: 700; font-size: 15px; }
.partner-type-list span { color: rgba(234,243,241,.72); font-size: 13px; line-height: 1.6; }
.side-foot { font-size: 13px; color: rgba(234,243,241,.7); margin: 14px 0 0; }

/*============================================
  Process section
============================================*/
.process-section { background: var(--paper); }
.process-content { padding-right: 30px; }
.process-content .section-head { text-align: left; max-width: 100%; margin-bottom: 30px; }
.process-content .section-head p { margin: 12px 0 0; }
.process-figure {
  margin: 38px 0 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.process-figure img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.process-figure figcaption { padding: 12px 16px; font-size: 13px; color: var(--muted); text-align: center; border-top: 1px solid #EEF0EC; }
.process-track { padding-left: 22px; }
.track-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 18px 0 28px;
}
.track-item::before {
  content: '';
  position: absolute;
  top: 52px;
  bottom: -2px;
  left: 28px;
  width: 1px;
  background: #D5DDD5;
}
.track-item:last-child::before { display: none; }
.track-no {
  width: 54px;
  height: 54px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 18px;
  color: var(--accent);
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 2;
}
.track-item h3 { font-size: 22px; color: var(--deep); margin-bottom: 6px; }
.track-item p { color: var(--muted); font-size: 15px; margin: 0 0 10px; max-width: 600px; }
.track-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: #8A5B22;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
}

/*============================================
  Policy table
============================================*/
.policy-section { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.policy-section .section-head h2, .faq-section .section-head h2, .value-section .section-head h2, .contact-wrap h2 { color: var(--deep); }
.table-scroll {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
table.policy-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 920px;
  background: var(--card);
  font-size: 15px;
  margin-bottom: 0;
}
.policy-table th {
  background: var(--deep);
  color: #fff;
  padding: 18px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 15px;
  vertical-align: middle;
  white-space: nowrap;
}
.policy-table td {
  padding: 22px 18px;
  border-bottom: 1px solid #EDEFEA;
  vertical-align: top;
  line-height: 1.75;
}
.policy-table th:first-child { border-radius: 0; border-right: 1px solid rgba(255,255,255,.08); }
.policy-table tbody tr:nth-child(even) td { background: rgba(15,123,114,.035); }
.policy-table tbody tr:hover td { background: rgba(223,151,61,.06); }
.policy-table tbody tr:last-child td { border-bottom: 0; }
.policy-table td:first-child { font-weight: 700; color: var(--deep); }
.policy-table .muted-cell { color: var(--muted); font-size: 14px; }
.table-note { margin: 16px 4px 0; color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: flex-start; }
.table-note i { margin-top: 4px; color: var(--primary); }

/* hotline strip */
.hotline-strip {
  background: linear-gradient(135deg, var(--deep) 0%, #123F3E 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hotline-strip .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #EAF3F1;
}
.strip-text { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.strip-text .strip-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(223,151,61,.18);
  color: #ECB269;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.strip-text strong { display: block; font-size: 15px; color: #fff; }
.strip-text span em, .strip-text span { font-style: normal; color: rgba(234,243,241,.72); }
.strip-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* value / concerns */
.value-section { background: var(--paper); }
.concern-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.concern-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.concern-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.concern-card.wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: center;
  background:
    linear-gradient(120deg, #FFFFFF 60%, #F4F8F5 100%);
  border-color: #CFDBD2;
}
.concern-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 22px;
}
.concern-card h3 { font-size: 22px; color: var(--deep); margin-bottom: 12px; }
.concern-card p { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.concern-card a.link-arrow { color: var(--primary); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.concern-card a.link-arrow:hover { color: var(--accent); gap: 10px; transition: .2s; }
.wide-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.wide-metric { background: rgba(15,123,114,.05); border: 1px solid #E1ECE5; border-radius: 14px; padding: 20px 8px; }
.wide-metric strong { display: block; font-family: var(--font-serif); font-size: 26px; color: var(--primary); line-height: 1.2; }
.wide-metric span { font-size: 12px; color: var(--muted); }

/*============================================
  FAQ
============================================*/
.faq-section { background: #fff; }
.faq-inner { width: 100%; max-width: 930px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item[open] { border-color: rgba(15,123,114,.35); box-shadow: var(--shadow-card); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 17px;
  color: var(--deep);
  transition: background .2s;
}
.faq-item summary:hover { background: rgba(15,123,114,.035); }
.faq-item summary::after {
  content: '\f078';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  color: var(--muted);
  transform: rotate(0deg);
  transition: transform .25s ease, color .25s ease;
  flex: 0 0 auto;
}
.faq-item[open] summary::after { transform: rotate(180deg); color: var(--accent); }
.faq-answer { padding: 0 24px 22px; color: var(--muted); font-size: 15px; line-height: 1.9; border-top: 1px dashed var(--border); margin-top: -2px; }
.faq-answer p { margin: 16px 0 0; }

/*============================================
  Contact / CTA
============================================*/
.contact-section {
  position: relative;
  overflow: hidden;
  color: #EAF3F1;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(15,123,114,.42), transparent 70%),
    radial-gradient(500px 250px at 90% 90%, rgba(223,151,61,.18), transparent 60%),
    var(--deep);
}
.contact-section .container { position: relative; z-index: 2; }
.contact-wrap { padding: 92px 0 96px; }
.contact-intro { max-width: 560px; }
.contact-intro .eyebrow { background: rgba(223,151,61,.15); color: #ECB269; }
.contact-intro h2 { color: #fff; font-size: 34px; margin: 10px 0 18px; }
.contact-intro p { color: rgba(234,243,241,.78); font-size: 16px; margin-bottom: 28px; }
.contact-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: rgba(234,243,241,.85); }
.contact-points li i { color: #ECB269; margin-top: 5px; width: 20px; text-align: center; }
.form-card {
  background: #fff;
  border-radius: var(--radius-xl);
  color: var(--text);
  padding: 30px 28px;
  box-shadow: 0 22px 70px -32px rgba(0,0,0,.55);
}
.form-card h3 { color: var(--deep); font-size: 23px; margin-bottom: 12px; }
.form-card > p { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-item.full { grid-column: span 2; }
.form-item label { display: block; font-weight: 700; font-size: 13px; color: var(--deep); margin-bottom: 7px; }
.form-item input, .form-item select, .form-item textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #FBFCFA;
  color: var(--text);
  padding: 11px 14px;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
.form-item textarea { resize: vertical; min-height: 90px; }
.form-item input:focus, .form-item select:focus, .form-item textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15,123,114,.12);
  background: #fff;
}
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 36px; }
.select-wrap:after {
  content: '\f078';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.form-success {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  border: 1px solid #F2DAB5;
  color: #7A521D;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 14px;
}
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.privacy-note { font-size: 12px; color: var(--muted); max-width: 240px; line-height: 1.6; }

/*============================================
  Footer
============================================*/
.site-footer {
  background: #081F1F;
  color: #C9D7D2;
  padding: 64px 0 26px;
  font-size: 14px;
}
.site-footer .brand { color: #fff; }
.site-footer .brand-icon { background: #0D3B39; box-shadow: none; }
.site-footer .brand-text small { color: rgba(201,215,210,.55); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr .9fr 1.1fr;
  gap: 48px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand p { color: rgba(201,215,210,.72); font-size: 14px; line-height: 1.9; margin: 18px 0 0; max-width: 380px; }
.footer-title {
  color: #fff;
  font-size: 16px;
  margin-bottom: 16px;
}
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; color: #C9D7D2; transition: color .2s; }
.footer-links a i { font-size: 11px; color: rgba(201,215,210,.4); }
.footer-links a:hover { color: #ECB269; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: rgba(201,215,210,.78); }
.footer-contact i { color: #ECB269; margin-top: 5px; width: 18px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 24px;
  color: rgba(201,215,210,.62);
  font-size: 13px;
}
.footer-bottom .legal { display: inline-flex; gap: 12px; }
.footer-bottom a { color: rgba(201,215,210,.62); }
.footer-bottom a:hover { color: #fff; }

/*============================================
  Responsive
============================================*/
@media screen and (max-width: 1023px) {
  .section { padding: 80px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand p { max-width: 100%; }
}

@media screen and (max-width: 767px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: 28px; }
  .header-main { padding-top: 12px; padding-bottom: 12px; }
  .brand-text small { display: none; }
  .header-cta .btn-sm { padding: 9px 12px; font-size: 13px; }
  .brand-text strong { font-size: 17px; }
  .hero-grid { padding: 66px 0 74px; }
  .hero-copy h1 { font-size: 34px; }
  .hero-copy .lead { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-list { gap: 8px 16px; }
  .hero-side-card { padding: 24px 20px; }
  .partner-type-list li { grid-template-columns: 1fr; gap: 2px; }
  .process-content { padding-right: 0; }
  .process-track { padding-left: 0; }
  .track-item { grid-template-columns: 46px 1fr; gap: 14px; padding: 14px 0 22px; }
  .track-no { width: 44px; height: 44px; font-size: 16px; }
  .track-item::before { left: 22px; top: 46px; }
  .track-item p { font-size: 14px; }
  .concern-grid, .form-grid { grid-template-columns: 1fr; }
  .form-item.full { grid-column: span 1; }
  .concern-card.wide { grid-template-columns: 1fr; }
  .wide-metrics { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .contact-wrap { padding: 64px 0 70px; }
  .form-card { padding: 22px 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hotline-strip .container { flex-direction: column; align-items: flex-start; }
  .strip-actions { width: 100%; }
  .strip-actions .btn { flex: 1; }
}

@media screen and (max-width: 520px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .brand-icon { width: 36px; height: 36px; border-radius: 11px; }
  .brand-text strong { font-size: 16px; }
  .header-cta .btn-sm i { display: none; }
  .section { padding: 54px 0; }
  .hero-copy h1 { font-size: 30px; }
  .hero-copy .lead { font-size: 15px; }
  .track-item { grid-template-columns: 1fr; padding-left: 0; }
  .track-item::before { display: none; }
  .track-no { width: 48px; height: 48px; margin-bottom: 8px; }
  .track-item { margin-bottom: 12px; padding: 10px 0 18px; }
  .table-note { font-size: 12px; }
  .concern-card { padding: 24px 20px; }
  .wide-metric strong { font-size: 22px; }
  .contact-intro h2 { font-size: 28px; }
  .submit-row { flex-direction: column; align-items: stretch; }
  .privacy-note { max-width: 100%; }
}

/* roulang page: category2 */
:root{
  --primary:#0F7B72;
  --primary-dark:#095C55;
  --deep:#0A2B2B;
  --accent:#DF973D;
  --accent-light:#F7E7CD;
  --paper:#F7F5EF;
  --card:#FFFFFF;
  --ink:#20302D;
  --muted:#62736E;
  --border:#E1E5DE;
  --line-soft:rgba(10,43,43,.08);
  --focus:rgba(15,123,114,.35);
  --shadow:0 1px 2px rgba(24,52,50,.05), 0 10px 24px -18px rgba(24,52,50,.25);
  --shadow-hover:0 12px 30px -16px rgba(24,52,50,.35);
  --radius:16px;
  --radius-small:10px;
  --radius-tag:8px;
  --f-display:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --f-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);line-height:1.8;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.35;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.grid-container{max-width:1280px;padding-left:20px;padding-right:20px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
::selection{background:rgba(223,151,61,.25)}

.header-block{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);box-shadow:0 4px 18px -20px rgba(10,43,43,.3)}
.header-main{display:flex;align-items:center;justify-content:space-between;min-height:72px;padding-top:8px;padding-bottom:8px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.brand-icon{color:var(--primary);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:13px;background:rgba(15,123,114,.1);border:1px solid rgba(15,123,114,.18)}
.brand-text{display:flex;flex-direction:column}
.brand-text strong{font-family:var(--f-display);font-size:20px;line-height:1.3;letter-spacing:.5px;color:var(--deep)}
.brand-text small{font-size:10.5px;letter-spacing:1px;color:var(--muted)}
.header-cta .btn{margin-left:auto;white-space:nowrap}
.channel-tabs{border-top:1px solid var(--border);background:#fff}
.tabs-scroll{position:relative}
.channel-tabs ul{display:flex;gap:4px;margin:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.channel-tabs ul::-webkit-scrollbar{display:none}
.channel-tabs li{flex-shrink:0}
.channel-tabs li a{display:flex;align-items:center;gap:7px;padding:11px 16px 12px;font-size:14px;font-weight:500;color:var(--ink);position:relative;transition:color .2s}
.channel-tabs li a:hover{color:var(--primary)}
.channel-tabs li a.active{color:var(--primary)}
.channel-tabs li a.active::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--primary);border-radius:2px 2px 0 0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-align:center;font-weight:600;font-size:15px;line-height:1.2;padding:13px 22px;border-radius:999px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .25s;border:1px solid transparent;white-space:nowrap}
.btn i{font-size:15px}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 24px -16px rgba(15,123,114,.7)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(15,123,114,.9)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 12px 24px -14px rgba(223,151,61,.8)}
.btn-accent:hover{background:#d18b2f;border-color:#d18b2f;transform:translateY(-2px);box-shadow:0 15px 28px -14px rgba(223,151,61,.9)}
.btn-accent:active{transform:translateY(0)}
.btn-soft{background:var(--deep);color:#fff;border-color:var(--deep)}
.btn-soft:hover{background:#0e3a36;transform:translateY(-2px)}
.btn-small{padding:9px 16px;font-size:13.5px}
.btn-outline{background:#fff;color:var(--primary);border-color:rgba(15,123,114,.35)}
.btn-outline:hover{background:rgba(15,123,114,.08);border-color:var(--primary);transform:translateY(-2px)}

.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid rgba(223,151,61,.45);color:var(--accent);background:rgba(255,255,255,.04);font-size:13px;letter-spacing:1px;font-weight:500}
.page-hero{position:relative}
.channel-hero{background:linear-gradient(95deg,rgba(10,43,43,.96) 0%,rgba(10,43,43,.88) 35%,rgba(10,43,43,.42) 75%,rgba(10,43,43,.12) 100%),url("/assets/images/backpic/back-1.webp") center/cover no-repeat;color:#fff}
.channel-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) .5px,transparent .5px);background-size:22px 22px;opacity:.16;pointer-events:none}
.hero-inner{padding-top:86px;padding-bottom:84px;position:relative;z-index:2}
.hero-kicker{margin-bottom:18px}
.channel-hero h1{color:#fff;font-size:clamp(32px,5vw,50px);line-height:1.28;max-width:720px}
.hero-lead{margin-top:18px;max-width:620px;font-size:16.5px;color:rgba(255,255,255,.82);font-weight:300}
.btn-row{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.hero-stats{margin-top:50px;display:flex;flex-wrap:wrap;gap:18px}
.hero-stat{border-left:2px solid rgba(223,151,61,.8);padding-left:14px;min-width:130px}
.hero-stat b{display:block;font-family:var(--f-display);font-size:28px;line-height:1.2;color:#fff}
.hero-stat span{font-size:12px;color:rgba(255,255,255,.68);line-height:1.6;display:block;margin-top:4px}
.deco-line{position:absolute;right:-180px;top:0;height:100%;width:220px;border-left:1px solid rgba(255,255,255,.08);transform:skew(-12deg);pointer-events:none}
.deco-line::after{content:'';position:absolute;left:40px;top:18%;bottom:0;width:1px;background:rgba(255,255,255,.05)}

.section{padding:82px 0}
.section-soft{background:#FCFBF7}
.section-cloud{background:linear-gradient(180deg,#F7FAF7,var(--paper));position:relative;overflow:hidden}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--primary);border:1px solid rgba(15,123,114,.25);background:rgba(15,123,114,.06);padding:6px 14px;border-radius:99px;letter-spacing:.8px}
.section-head{margin-bottom:40px}
.section-head h2{font-size:clamp(24px,3.6vw,35px);color:var(--deep);margin-top:14px}
.section-head .lead{max-width:680px;margin-top:13px;color:var(--muted);font-size:15.5px}
.section-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.section-foot h2{font-size:clamp(24px,3.6vw,34px);color:var(--deep)}

.text-block p{color:var(--muted);font-size:15.8px;margin-top:14px}
.text-block strong{color:var(--ink)}
.lead-list{margin-top:22px;display:grid;gap:14px}
.lead-item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:14px;padding:13px 15px;transition:border-color .25s}
.lead-item:hover{border-color:rgba(15,123,114,.35)}
.lead-item i{color:var(--primary);margin-top:5px;font-size:16px;flex-shrink:0}
.lead-item h4{font-family:var(--f-body);font-weight:600;font-size:15px}
.lead-item p{color:var(--muted);font-size:13.5px;margin-top:3px;line-height:1.65}
.visual-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative;background:#EAF0EB}
.visual-frame img{width:100%;height:100%;object-fit:cover;min-height:260px}
.visual-badge{position:absolute;bottom:16px;left:16px;background:rgba(10,43,43,.82);color:#fff;padding:7px 14px;font-size:12px;border-radius:999px;backdrop-filter:blur(4px)}
.visual-tag{position:absolute;top:18px;right:18px;background:#fff;color:var(--deep);border-radius:999px;font-size:12px;padding:6px 13px;box-shadow:var(--shadow)}

.intro-card{border:1px solid var(--line-soft);border-radius:var(--radius);padding:28px 30px;background:var(--card)}
.quote-mark{color:var(--accent);font-family:var(--f-display);font-size:18px;line-height:1}
.intro-note{margin-top:18px;background:var(--accent-light);border-left:3px solid var(--accent);padding:14px 18px;border-radius:3px 10px 10px 3px;color:#513d21;font-size:14px}

.process-section{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.process-section .section-head h2{color:#fff}
.process-section .section-head .lead{color:rgba(255,255,255,.72)}
.process-section .eyebrow{border-color:rgba(223,151,61,.35);color:var(--accent);background:rgba(223,151,61,.06)}
.process-flow{position:relative;margin-top:44px;display:flex;flex-wrap:wrap}
.process-flow::before{content:'';position:absolute;left:4%;right:4%;top:30px;border-top:1px dashed rgba(255,255,255,.2)}
.flow-item{position:relative;padding:0 16px 20px;flex:1 1 200px}
.flow-item:nth-child(1){flex:1.25}
.flow-item:nth-child(2){flex:1}
.flow-item:nth-child(3){flex:1.2}
.flow-item:nth-child(4){flex:1}
.flow-step{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:20px;border:1px solid rgba(255,255,255,.18);background:var(--deep);position:relative;z-index:2;font-family:var(--f-display);font-size:19px;color:var(--accent);box-shadow:0 0 0 6px rgba(10,43,43,.85)}
.flow-item h3{margin-top:17px;font-family:var(--f-body);font-weight:600;font-size:16px;color:#fff}
.flow-item p{margin-top:9px;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.7;max-width:240px}
.flow-note{margin-top:38px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:15px 20px;font-size:13.5px;color:rgba(255,255,255,.76)}
.flow-note i{color:var(--accent);margin-right:8px}

.compare-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto;border:1px solid var(--border)}
.table-scroll{overflow-x:auto}
.compare-table{width:100%;min-width:820px;border-collapse:collapse;background:#fff;font-size:14px}
.compare-table th,.compare-table td{padding:15px 18px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.compare-table th{background:var(--deep);color:#fff;font-weight:600;font-family:var(--f-display);font-size:15px;letter-spacing:.3px}
.compare-table th:first-child{width:150px;background:#0d3232}
.compare-table td:first-child{font-weight:600;color:var(--deep);background:#FAF9F5}
.compare-table tbody tr:nth-child(even) td{background:#FBFCFA}
.compare-table tbody tr:nth-child(even) td:first-child{background:#F4F6F1}
.compare-table td i{color:var(--primary);margin-right:4px}
.compare-table td{line-height:1.7;color:#475B56}
.compare-table tr:last-child td{border-bottom:none}
.table-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-block;border-radius:999px;padding:4px 12px;background:rgba(15,123,114,.08);color:var(--primary);font-size:12px}

.benefits-wrap{display:grid;grid-template-columns:1fr 1.35fr;gap:24px;align-items:stretch}
.benefit-small{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.benefit-small:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.benefit-small .benefit-icon{width:50px;height:50px;border-radius:15px;background:rgba(15,123,114,.1);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:20px}
.benefit-small h3{margin-top:20px;font-family:var(--f-body);font-size:17.5px;font-weight:600}
.benefit-small p{flex:1;margin-top:10px;color:var(--muted);font-size:14px}
.benefit-small a{margin-top:20px;display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-size:14px;font-weight:500}
.benefit-small a i{transition:transform .2s}
.benefit-small a:hover i{transform:translateX(3px)}
.benefit-large{background:linear-gradient(135deg,#0A2B2B,#0E3E3A);color:#fff;border-radius:var(--radius);padding:34px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.benefit-large::after{content:'';position:absolute;right:-40px;top:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(15,123,114,.62),transparent 68%)}
.benefit-large .benefit-icon{width:52px;height:52px;border-radius:16px;background:rgba(223,151,61,.16);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px}
.benefit-large h3{margin-top:20px;color:#fff;font-size:22px}
.benefit-large p{margin-top:12px;color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.8}
.benefit-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.benefit-meta strong{display:block;font-size:18px;font-family:var(--f-display);color:var(--accent)}
.benefit-meta span{font-size:12px;color:rgba(255,255,255,.62)}
.benefit-large .btn{margin-top:26px;align-self:flex-start}

.hotline-band{display:flex;align-items:center;justify-content:space-between;gap:30px;background:#fff;border:1px solid var(--border);border-left:5px solid var(--accent);border-radius:18px;padding:28px 32px;box-shadow:var(--shadow);flex-wrap:wrap}
.hotline-main{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hotline-icon{background:var(--accent-light);color:var(--accent);width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.hotline-copy h3{font-family:var(--f-body);font-size:20px;font-weight:700;color:var(--deep)}
.hotline-copy p{color:var(--muted);font-size:14px;margin-top:4px}
.hotline-mail{display:inline-flex;align-items:center;gap:10px;border-radius:14px;background:#f4f7f4;padding:15px 20px;color:var(--primary);border:1px solid rgba(15,123,114,.18)}
.hotline-mail b{font-weight:600}
.hotline-mail small{display:block;color:var(--muted);font-size:12px}
.hotline-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.faq-band{display:grid;grid-template-columns:.9fr 1.5fr;gap:40px;align-items:start}
.faq-sticky{position:relative}
.faq-side{background:var(--accent-light);border-radius:var(--radius);padding:25px 24px;color:#513d21;font-size:14px;border:1px solid rgba(223,151,61,.26)}
.faq-side h3{font-family:var(--f-body);font-weight:600;font-size:17px}
.faq-side p{margin-top:9px;line-height:1.75}
.faq-list{display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;padding:19px 22px;font-weight:600;font-size:15.5px;color:var(--deep)}
.faq-item summary::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;font-size:13px;color:var(--accent);transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-answer{padding:3px 22px 20px;color:var(--muted);font-size:14px;line-height:1.85;border-top:1px dashed var(--border)}
.faq-answer p{margin-top:8px}

.cta-section{background:linear-gradient(rgba(10,43,43,.96),rgba(10,43,43,.96)),url("/assets/images/backpic/back-3.webp") center/cover;color:#fff;padding:90px 0;position:relative}
.cta-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) .5px,transparent .8px);background-size:18px 18px;opacity:.22}
.cta-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.cta-title{font-size:clamp(23px,3.3vw,34px);color:#fff;line-height:1.4}
.cta-title span{color:var(--accent)}
.cta-desc{margin-top:17px;font-size:15px;color:rgba(255,255,255,.74);line-height:1.9}
.cta-note{margin-top:24px;display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.65);font-size:13px}
.cta-note i{color:var(--accent)}
.cta-form{background:#fff;border-radius:20px;padding:28px;color:var(--ink);box-shadow:0 20px 46px -24px rgba(0,0,0,.45)}
.form-title{font-family:var(--f-body);font-weight:700;font-size:19px;color:var(--deep)}
.form-title small{display:block;margin-top:5px;font-weight:400;color:var(--muted);font-size:13px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.form-field.full{grid-column:1/-1}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--deep);margin-bottom:6px}
.form-control{width:100%;border:1px solid var(--border);border-radius:11px;padding:11px 13px;background:#FBFCFA;transition:border .2s,box-shadow .2s}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--focus);background:#fff}
textarea.form-control{min-height:80px;resize:vertical}
.form-submit{margin-top:18px;width:100%}
.form-success{margin-top:12px;text-align:center;background:rgba(15,123,114,.09);color:var(--primary);padding:10px;border-radius:11px;font-size:14px;display:none}

.site-footer{background:var(--deep);color:rgba(255,255,255,.72);padding:58px 0 22px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px;margin-bottom:36px}
.footer-brand .brand{color:#fff}
.site-footer .brand-text strong{color:#fff}
.site-footer .brand-text small{color:rgba(255,255,255,.46)}
.site-footer .brand-icon{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.footer-brand>p{margin-top:18px;font-size:14px;color:rgba(255,255,255,.58);line-height:1.9;max-width:390px}
.footer-title{color:#fff;font-family:var(--f-body);font-weight:600;font-size:15.5px;margin-bottom:18px;letter-spacing:.5px}
.footer-links,.footer-contact{display:grid;gap:11px}
.footer-links a{font-size:13.5px;display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.68);transition:color .2s,transform .2s}
.footer-links a i{font-size:10px;color:var(--accent)}
.footer-links a:hover{color:var(--accent);transform:translateX(3px)}
.footer-contact li{font-size:13.5px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.6)}
.footer-contact i{color:var(--accent);width:15px;text-align:center}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.45)}
.footer-bottom .legal{display:inline-flex;gap:18px}

.page-sec-divider{height:1px;background:var(--border)}
@media(max-width:1023px){
  .channel-hero .hero-inner{padding-top:64px;padding-bottom:58px}
  .channel-hero h1{font-size:36px}
  .benefits-wrap{grid-template-columns:1fr}
  .faq-band{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr;gap:40px}
  .hotline-band{justify-content:center;text-align:center}
  .hotline-main{justify-content:center}
  .hotline-actions{justify-content:center}
  .footer-grid{gap:28px}
}
@media(max-width:639px){
  .header-main{min-height:62px;padding-top:6px;padding-bottom:6px}
  .brand-text{line-height:1.2}
  .brand-text strong{font-size:16px}
  .brand-icon{width:34px;height:34px}
  .header-cta .btn{font-size:12px;padding:9px 14px}
  .header-cta .fa-solid{margin-right:2px}
  .channel-tabs li a{padding:10px 13px 11px;font-size:13px}
  .section{padding:48px 0}
  .process-section .section-head h2,.section-foot h2,.section-head h2{font-size:23px}
  .hero-stats{display:flex;gap:14px;flex-direction:column;align-items:flex-start}
  .hero-stat b{font-size:23px}
  .flow-item{padding:0 12px 20px}
  .comparison-heading{overflow-wrap:break-word}
  .hotline-band{padding:20px}
  .hotline-mail{width:100%;justify-content:center}
  .benefit-meta{grid-template-columns:1fr 1fr}
  .grid-margin-x>.cell{padding-left:.9375rem;padding-right:.9375rem}
  .form-grid{grid-template-columns:1fr}
  .cta-form{padding:22px 18px}
  .cta-note{align-items:flex-start}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{align-items:flex-start;flex-direction:column}
}

@supports not (background:linear-gradient(95deg,var(--deep),#113e3a)){}

/* roulang page: category3 */
@charset "UTF-8";

        :root {
            --primary: #0F7B72;
            --primary-dark: #0B5E56;
            --primary-light: #E5F0EB;
            --deep: #0A2B2B;
            --deep-soft: #143938;
            --accent: #DF973D;
            --accent-light: #F7E7CD;
            --paper: #F7F5EF;
            --card: #FFFFFF;
            --ink: #20302D;
            --muted: #62736E;
            --line: #E1E5DE;
            --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
            --font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
            --r-lg: 16px;
            --r-md: 12px;
            --r-sm: 8px;
            --shadow-card: 0 1px 2px rgba(24, 52, 50, .05), 0 16px 32px -22px rgba(24, 52, 50, .25);
            --shadow-hover: 0 10px 28px -18px rgba(13, 64, 59, .35);
            --transition: .25s ease;
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: var(--font-sans);
            font-size: 16px;
            line-height: 1.7;
        }

        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        p,
        figure,
        ul,
        ol,
        dl,
        blockquote {
            margin: 0;
        }

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

        a {
            color: var(--primary);
            text-decoration: none;
            transition: var(--transition);
        }

        a:hover {
            color: var(--primary-dark);
        }

        a:focus-visible,
        button:focus-visible,
        summary:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 3px;
            border-radius: 6px;
        }

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

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

        @media (max-width: 640px) {
            .container {
                padding-left: 18px;
                padding-right: 18px;
            }
        }

        .section {
            padding: 88px 0;
        }

        .hidden {
            display: none !important;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .2em;
            color: var(--primary);
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .section-head {
            max-width: 860px;
            margin-bottom: 40px;
        }

        .section-head h2 {
            font-family: var(--font-serif);
            font-size: 36px;
            font-weight: 600;
            line-height: 1.3;
            letter-spacing: .5px;
            color: var(--ink);
            margin-bottom: 16px;
        }

        .section-head p {
            font-size: 17px;
            line-height: 1.9;
            color: var(--muted);
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: 999px;
            border: 1px solid transparent;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;
            cursor: pointer;
            text-decoration: none;
            transition: background var(--transition), color var(--transition), border var(--transition), box-shadow var(--transition), transform var(--transition);
        }

        .btn:hover,
        .btn:focus-visible {
            text-decoration: none;
            transform: translateY(-2px);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn-primary {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 8px 20px -10px rgba(15, 123, 114, .5);
        }

        .btn-primary:hover,
        .btn-primary:focus-visible {
            background: var(--primary-dark);
            color: #fff;
            box-shadow: 0 10px 24px -10px rgba(11, 94, 86, .5);
        }

        .btn-outline {
            background: transparent;
            border-color: rgba(15, 123, 114, .6);
            color: var(--primary-dark);
        }

        .btn-outline:hover,
        .btn-outline:focus-visible {
            border-color: var(--primary);
            background: var(--primary-light);
            color: var(--primary-dark);
        }

        .btn-accent {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 8px 20px -12px rgba(223, 151, 61, .6);
        }

        .btn-accent:hover,
        .btn-accent:focus-visible {
            background: #C9852F;
            color: #fff;
        }

        .btn-ghost {
            background: transparent;
            border-color: rgba(255, 255, 255, .55);
            color: #fff;
        }

        .btn-ghost:hover,
        .btn-ghost:focus-visible {
            border-color: #fff;
            color: #fff;
            background: rgba(255, 255, 255, .06);
        }

        .btn-sm {
            padding: 8px 16px;
            font-size: 14px;
        }

        .btn-lg {
            padding: 15px 32px;
            font-size: 16px;
        }

        /* Header */
        .header-block {
            background: rgba(255, 255, 255, .96);
            border-bottom: 1px solid var(--line);
            position: relative;
            z-index: 60;
        }

        .header-main {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            min-height: 86px;
            padding-top: 14px;
            padding-bottom: 14px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            color: var(--ink);
            text-decoration: none;
        }

        .brand:hover {
            color: var(--ink);
        }

        .brand-icon {
            flex: 0 0 auto;
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            border-radius: 13px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff;
            box-shadow: 0 8px 22px -12px rgba(15, 123, 114, .7);
        }

        .brand-text strong {
            display: block;
            font-family: var(--font-serif);
            font-size: 22px;
            font-weight: 700;
            letter-spacing: .5px;
            line-height: 1.2;
        }

        .brand-text small {
            display: block;
            margin-top: 5px;
            color: var(--muted);
            font-size: 12px;
            letter-spacing: .3px;
        }

        .header-cta .btn {
            white-space: nowrap;
        }

        .header-cta .btn i {
            font-size: 16px;
            color: #fff;
            opacity: .92;
        }

        /* second layer nav */
        .channel-tabs {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(255, 255, 255, .97);
            backdrop-filter: blur(14px);
            border-top: 1px solid var(--line);
            box-shadow: 0 4px 12px -12px rgba(24, 52, 50, .2);
        }

        .tabs-scroll ul {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 4px;
            margin: 0;
            padding: 6px 0;
            white-space: nowrap;
        }

        .channel-tabs li a {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 10px 16px;
            border-radius: 999px;
            color: var(--ink);
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
            transition: var(--transition);
        }

        .channel-tabs li a i {
            color: var(--primary);
            font-size: 14px;
            opacity: .9;
        }

        .channel-tabs li a:hover {
            color: var(--primary-dark);
            background: var(--primary-light);
        }

        .channel-tabs li a.active {
            background: var(--primary);
            color: #fff;
        }

        .channel-tabs li a.active i {
            color: #fff;
            opacity: 1;
        }

        /* breadcrumb */
        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--muted);
            margin-bottom: 20px;
        }

        .breadcrumb a {
            color: var(--muted);
        }

        .breadcrumb a:hover {
            color: var(--primary);
        }

        .breadcrumb .sep {
            color: #B9C3BD;
        }

        .breadcrumb .current {
            color: var(--ink);
        }

        /* news hero */
        .news-hero {
            position: relative;
            overflow: hidden;
            padding: 88px 0 72px;
            background:
                linear-gradient(100deg, rgba(247, 245, 239, .98) 0%, rgba(237, 246, 240, .92) 74%, rgba(232, 242, 235, .78) 100%),
                url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            border-bottom: 1px solid var(--line);
        }

        .news-hero::after {
            content: "";
            position: absolute;
            right: -80px;
            top: -80px;
            width: 280px;
            height: 280px;
            background: radial-gradient(circle, rgba(15, 123, 114, .12), transparent 66%);
            border-radius: 50%;
            pointer-events: none;
        }

        .news-hero h1 {
            font-family: var(--font-serif);
            font-size: 46px;
            line-height: 1.25;
            font-weight: 700;
            letter-spacing: .5px;
            color: var(--ink);
            margin-bottom: 22px;
        }

        .news-hero .hero-lead {
            max-width: 650px;
            font-size: 18px;
            line-height: 1.9;
            color: #435B56;
            margin-bottom: 30px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin: 0 0 30px;
        }

        .hero-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }

        .hero-stat {
            background: rgba(255, 255, 255, .72);
            border: 1px solid rgba(225, 229, 222, .9);
            border-radius: var(--r-md);
            padding: 12px 18px;
            box-shadow: 0 1px 2px rgba(24, 52, 50, .04);
        }

        .hero-stat strong {
            display: block;
            color: var(--primary-dark);
            font-size: 20px;
            font-weight: 700;
            line-height: 1.2;
        }

        .hero-stat span {
            display: block;
            margin-top: 6px;
            font-size: 13px;
            color: var(--muted);
        }

        .hero-note-card {
            position: relative;
            z-index: 2;
            border-radius: 18px;
            background: rgba(255, 255, 255, .92);
            border: 1px solid var(--line);
            padding: 22px;
            box-shadow: var(--shadow-card);
        }

        .hero-note-card .note-title {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 16px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 16px;
        }

        .hero-note-card .note-title i {
            color: var(--accent);
        }

        .hero-note-card ul {
            display: flex;
            flex-direction: column;
            gap: 13px;
            margin: 0 0 18px;
        }

        .hero-note-card li {
            font-size: 14px;
            line-height: 1.6;
            padding-left: 18px;
            position: relative;
            color: var(--ink);
        }

        .hero-note-card li::before {
            content: "";
            position: absolute;
            left: 2px;
            top: 9px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--primary);
            opacity: .75;
        }

        .hero-note-card li .note-date {
            display: inline-block;
            margin-right: 8px;
            font-weight: 700;
            color: var(--accent);
            font-size: 13px;
        }

        .note-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 14px;
            font-weight: 600;
        }

        /* filter */
        .filter-panel {
            padding: 30px 0 8px;
        }

        .filter-wrap {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px;
            margin-bottom: 38px;
        }

        .filter-label {
            font-weight: 700;
            font-size: 14px;
            color: var(--ink);
            background: var(--accent-light);
            border-radius: 999px;
            padding: 8px 15px;
        }

        .filter-group {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .pill-filter {
            border: 1px solid var(--line);
            background: var(--card);
            color: #3B4A46;
            padding: 8px 18px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            line-height: 1.4;
        }

        .pill-filter:hover {
            border-color: var(--primary);
            color: var(--primary-dark);
            background: var(--primary-light);
        }

        .pill-filter.is-active {
            border-color: var(--primary);
            background: var(--primary);
            color: #fff;
            box-shadow: 0 8px 18px -12px rgba(15, 123, 114, .6);
        }

        /* featured media */
        .feature-card {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: var(--shadow-card);
            margin-bottom: 24px;
        }

        .media-card-copy {
            padding: 30px 34px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            justify-content: center;
        }

        .media-card-copy h3 {
            font-family: var(--font-serif);
            font-size: 27px;
            line-height: 1.4;
            font-weight: 600;
            color: var(--ink);
        }

        .media-card-copy h3 a {
            color: inherit;
        }

        .media-card-copy h3 a:hover {
            color: var(--primary);
        }

        .media-card-copy p {
            color: var(--muted);
            line-height: 1.9;
            font-size: 16px;
        }

        .media-card-thumb {
            min-height: 230px;
            position: relative;
            background: var(--primary-light);
        }

        .media-card-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
        }

        .media-card-thumb::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, transparent 70%, rgba(10, 43, 43, .12));
        }

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            font-size: 14px;
            color: var(--primary-dark);
        }

        .text-link i {
            transition: transform .25s;
        }

        .text-link:hover i {
            transform: translateX(4px);
        }

        .tag {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: var(--primary-light);
            color: var(--primary-dark);
            font-size: 13px;
            font-weight: 600;
            padding: 4px 13px;
            border-radius: 999px;
            width: fit-content;
        }

        .tag-accent {
            background: var(--accent-light);
            color: #A9651B;
        }

        .tag-neutral {
            background: #F1F1EA;
            color: var(--muted);
        }

        /* compact list */
        .compact-list {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .compact-card {
            display: grid;
            grid-template-columns: 112px 1fr;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            padding: 22px 26px;
            box-shadow: 0 1px 2px rgba(24, 52, 50, .03);
            transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
        }

        .compact-card:hover {
            border-color: rgba(15, 123, 114, .25);
            box-shadow: var(--shadow-hover);
            transform: translateY(-2px);
        }

        .compact-card.is-hidden {
            display: none !important;
        }

        .compact-date {
            color: var(--primary);
            font-weight: 700;
            line-height: 1.4;
        }

        .compact-date strong {
            font-family: var(--font-serif);
            font-size: 26px;
            display: block;
            color: var(--primary);
            line-height: 1.1;
        }

        .compact-date span {
            display: block;
            font-size: 13px;
            color: var(--muted);
            margin-top: 4px;
        }

        .compact-main {
            border-left: 1px dashed #D4DDD4;
            padding-left: 24px;
        }

        .compact-main h3 {
            font-family: var(--font-serif);
            font-size: 19px;
            font-weight: 600;
            margin-top: 9px;
            margin-bottom: 7px;
            color: var(--ink);
        }

        .compact-main h3 a {
            color: inherit;
        }

        .compact-main h3 a:hover {
            color: var(--primary);
        }

        .compact-main p {
            color: var(--muted);
            line-height: 1.8;
            font-size: 15px;
            margin-bottom: 10px;
        }

        .compact-footer {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .compact-footer .text-link {
            font-size: 14px;
        }

        /* type cards */
        .type-section {
            background: linear-gradient(180deg, transparent, #F2F5EE);
            padding: 96px 0;
        }

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

        .type-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 30px 30px 26px;
            box-shadow: var(--shadow-card);
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }

        .type-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(15, 123, 114, .2);
        }

        .type-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: var(--primary-light);
            color: var(--primary);
            display: grid;
            place-items: center;
            font-size: 23px;
            margin-bottom: 22px;
        }

        .type-card h3 {
            font-family: var(--font-serif);
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--ink);
        }

        .type-card p {
            color: var(--muted);
            line-height: 1.85;
            font-size: 15px;
        }

        /* download section */
        .download-section {
            padding: 96px 0 88px;
        }

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

        .doc-card {
            display: flex;
            gap: 18px;
            align-items: flex-start;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            padding: 28px 24px;
            box-shadow: var(--shadow-card);
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }

        .doc-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(15, 123, 114, .2);
        }

        .doc-icon {
            width: 58px;
            height: 58px;
            flex: 0 0 58px;
            border-radius: 15px;
            background: #FDEEF0;
            color: #C4455D;
            display: grid;
            place-items: center;
            font-size: 24px;
        }

        .doc-icon.doc-word {
            background: #E8F2FF;
            color: #3474D8;
        }

        .doc-icon.doc-check {
            background: var(--primary-light);
            color: var(--primary);
        }

        .doc-content h3 {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 7px;
            color: var(--ink);
        }

        .doc-content p {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.7;
            margin-bottom: 8px;
        }

        .doc-meta {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #87958E;
            font-size: 12px;
        }

        .doc-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 600;
            color: var(--primary-dark);
            margin-top: 10px;
        }

        .doc-btn i {
            transition: transform .25s;
        }

        .doc-btn:hover i {
            transform: translateX(4px);
        }

        /* faq */
        .faq-section {
            padding: 90px 0;
            background: #F7F5EF;
            border-top: 1px solid var(--line);
        }

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.28fr;
            gap: 46px;
            align-items: start;
        }

        .faq-intro .eyebrow {
            margin-bottom: 12px;
        }

        .faq-intro h2 {
            font-family: var(--font-serif);
            font-size: 36px;
            line-height: 1.3;
            margin-bottom: 16px;
        }

        .faq-intro p {
            color: var(--muted);
            line-height: 1.9;
        }

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

        .faq-item {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            box-shadow: 0 1px 2px rgba(24, 52, 50, .03);
            overflow: hidden;
            transition: box-shadow var(--transition), border-color var(--transition);
        }

        .faq-item[open] {
            border-color: rgba(15, 123, 114, .25);
            box-shadow: var(--shadow-card);
        }

        .faq-item summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 18px 21px;
            cursor: pointer;
            font-weight: 600;
            font-size: 16px;
            color: var(--ink);
            list-style: none;
        }

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

        .faq-item summary .faq-arrow {
            display: grid;
            place-items: center;
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
            font-size: 14px;
            transition: transform var(--transition), background var(--transition);
        }

        .faq-item[open] summary .faq-arrow {
            transform: rotate(180deg);
            background: var(--primary);
            color: #fff;
        }

        .faq-item .faq-body {
            padding: 0 21px 20px;
            color: var(--muted);
            line-height: 1.85;
            font-size: 15px;
        }

        /* CTA band */
        .cta-band {
            position: relative;
            overflow: hidden;
            padding: 82px 0;
            background:
                radial-gradient(900px 400px at 85% 10%, rgba(223, 151, 61, .22), transparent 60%),
                radial-gradient(700px 400px at 10% 120%, rgba(15, 123, 114, .35), transparent 65%),
                linear-gradient(130deg, #0A2B2B, #103432);
            color: #E7F1ED;
        }

        .cta-band::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
            background-size: 22px 22px;
            opacity: .32;
            pointer-events: none;
        }

        .cta-inner {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 34px;
            flex-wrap: wrap;
        }

        .cta-text h2 {
            font-family: var(--font-serif);
            font-size: 34px;
            line-height: 1.35;
            color: #fff;
            margin-bottom: 14px;
        }

        .cta-text p {
            color: #C9DCD5;
            font-size: 17px;
            line-height: 1.85;
            max-width: 620px;
        }

        .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }

        /* footer */
        .site-footer {
            background: var(--deep);
            color: #C8DAD3;
            padding-top: 58px;
            border-top: 1px solid rgba(255, 255, 255, .06);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr .9fr 1.1fr;
            gap: 46px;
            padding-bottom: 38px;
        }

        .site-footer .brand {
            color: #fff;
        }

        .site-footer .brand-text strong {
            font-size: 20px;
        }

        .site-footer .brand-text small {
            color: #9CB9B0;
        }

        .footer-brand p {
            max-width: 480px;
            margin-top: 20px;
            font-size: 15px;
            line-height: 1.9;
            color: #B4CAC2;
        }

        .footer-title {
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            margin: 14px 0 18px;
        }

        .footer-links,
        .footer-contact {
            display: flex;
            flex-direction: column;
            gap: 13px;
        }

        .footer-links a {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: #B4CAC2;
            font-size: 15px;
        }

        .footer-links a i {
            color: var(--accent);
            font-size: 12px;
        }

        .footer-links a:hover {
            color: #fff;
        }

        .footer-contact li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #B4CAC2;
            font-size: 15px;
            line-height: 1.7;
        }

        .footer-contact li i {
            margin-top: 5px;
            color: var(--accent);
        }

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

        .footer-bottom .legal {
            display: flex;
            gap: 16px;
            color: #8FA9A1;
        }

        .footer-bottom .legal span {
            line-height: 1.4;
        }

        @media (max-width: 1024px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 34px;
            }

            .footer-brand {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 900px) {
            .section {
                padding: 64px 0;
            }

            .type-section,
            .download-section,
            .faq-section {
                padding: 68px 0;
            }

            .type-grid,
            .doc-grid {
                grid-template-columns: 1fr 1fr;
            }

            .faq-layout {
                grid-template-columns: 1fr;
                gap: 26px;
            }

            .news-hero {
                padding: 50px 0 46px;
            }

            .news-hero h1 {
                font-size: 38px;
            }

            .section-head h2 {
                font-size: 31px;
            }
        }

        @media (max-width: 768px) {
            .feature-card {
                grid-template-columns: 1fr;
            }

            .media-card-thumb {
                min-height: 190px;
                order: -1;
            }

            .media-card-thumb img {
                position: static;
                height: 100%;
            }

            .media-card-copy {
                padding: 24px 24px 28px;
            }

            .compact-card {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .compact-main {
                border-left: none;
                padding-left: 0;
            }

            .compact-date {
                display: flex;
                align-items: baseline;
                gap: 8px;
            }

            .compact-date strong {
                font-size: 20px;
            }

            .compact-date span {
                display: inline;
                margin: 0;
            }
        }

        @media (max-width: 640px) {
            .header-main {
                min-height: 68px;
                gap: 12px;
            }

            .brand-text strong {
                font-size: 17px;
            }

            .brand-text small {
                display: none;
            }

            .brand-icon {
                width: 38px;
                height: 38px;
                border-radius: 12px;
            }

            .header-cta .btn-sm {
                padding: 8px 12px;
                font-size: 13px;
            }

            .header-cta .btn-sm i {
                display: none;
            }

            .tabs-scroll ul {
                gap: 2px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

            .tabs-scroll ul::-webkit-scrollbar {
                display: none;
            }

            .tabs-scroll li {
                flex: 0 0 auto;
            }

            .channel-tabs li a {
                padding: 9px 14px;
                font-size: 14px;
                gap: 6px;
            }

            .news-hero {
                padding-top: 42px;
            }

            .news-hero h1 {
                font-size: 34px;
            }

            .news-hero .hero-lead {
                font-size: 16px;
            }

            .hero-actions {
                gap: 10px;
            }

            .hero-actions .btn {
                width: 100%;
            }

            .hero-stats {
                flex-direction: column;
            }

            .hero-stat {
                width: 100%;
            }

            .section-head h2 {
                font-size: 27px;
            }

            .section-head p {
                font-size: 15px;
            }

            .type-grid,
            .doc-grid {
                grid-template-columns: 1fr;
            }

            .type-card,
            .doc-card {
                padding: 20px 20px;
            }

            .filter-panel {
                padding-top: 20px;
            }

            .filter-wrap {
                align-items: flex-start;
                flex-direction: column;
                gap: 12px;
            }

            .filter-group {
                width: 100%;
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
            }

            .filter-group::-webkit-scrollbar {
                display: none;
            }

            .pill-filter {
                flex: 0 0 auto;
                padding: 7px 14px;
                font-size: 13px;
            }

            .media-card-copy h3 {
                font-size: 22px;
            }

            .compact-main h3 {
                font-size: 18px;
            }

            .compact-footer {
                align-items: flex-start;
                flex-direction: column;
                gap: 6px;
            }

            .doc-card {
                gap: 16px;
            }

            .faq-section {
                padding: 54px 0;
            }

            .faq-item summary {
                padding: 16px 16px;
                font-size: 15px;
            }

            .faq-body {
                padding: 0 16px 16px;
            }

            .cta-band {
                padding: 58px 0;
            }

            .cta-text h2 {
                font-size: 27px;
            }

            .cta-actions {
                width: 100%;
            }

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

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

            .footer-brand {
                grid-column: auto;
            }

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