/* roulang page: index */
:root{
  --color-primary:#15332E;
  --color-primary-dark:#0D2621;
  --color-accent:#B9915B;
  --color-paper:#F3F1EC;
  --color-dark:#0E1C19;
  --color-card:#FFFFFF;
  --color-title:#16221F;
  --color-body:#4A524E;
  --color-muted:#7B8580;
  --color-border:#E3DFD6;
  --color-success:#2F7D5C;
  --color-error:#C7493D;
  --color-link:#2E5F4E;
  --color-footer-text:#B9C2BE;
  --radius-card:8px;
  --radius-btn:4px;
  --radius-tag:999px;
  --shadow-card:0 1px 3px rgba(21,48,44,.06);
  --shadow-card-hover:0 8px 24px rgba(21,48,44,.12);
  --transition:.25s ease-out;
  --font-sans:"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --font-num:"Inter","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--color-paper);
  color:var(--color-body);
  font-size:16px;
  line-height:1.8;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--color-link);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-accent)}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--color-title);margin-top:0;font-weight:700}
p{margin-top:0}
button{font-family:inherit}
ul,ol{padding-left:0;margin-top:0}
.container,.container-lg,.container-xl{width:100%;max-width:1200px;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto}
section[id]{scroll-margin-top:96px}

/* Buttons */
.btn{border-radius:var(--radius-btn);padding:12px 28px;font-weight:500;font-size:15px;border:none;display:inline-block;transition:all var(--transition);color:var(--color-title)}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:none;box-shadow:0 0 0 3px rgba(21,48,44,.15)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-dark);color:#fff}
.btn-primary:active{background:var(--color-primary-dark);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--color-accent);color:var(--color-accent)}
.btn-outline:hover{background:rgba(185,145,91,.1);color:var(--color-accent);border-color:var(--color-accent)}
.btn-outline:active{background:rgba(185,145,91,.16);color:var(--color-accent)}

/* Tags & links */
.tag{display:inline-flex;align-items:center;padding:5px 14px;border-radius:var(--radius-tag);font-size:13px;font-weight:500;line-height:1.4;background:rgba(185,145,91,.1);color:var(--color-accent)}
.text-link{color:var(--color-link);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.text-link i{transition:transform var(--transition)}
.text-link:hover{color:var(--color-accent)}
.text-link:hover i{transform:translateX(4px)}

/* Topbar */
.site-topbar{background:var(--color-dark);color:rgba(255,255,255,.68);font-size:13px;padding:8px 0}
.site-topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.site-topbar a{color:rgba(255,255,255,.85)}
.site-topbar a:hover{color:var(--color-accent)}

/* Header */
.site-header{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);position:sticky;top:0;z-index:1030;border-bottom:1px solid transparent;transition:border-color .3s ease,box-shadow .3s ease}
.site-header.scrolled{border-bottom-color:var(--color-border);box-shadow:0 1px 10px rgba(21,48,44,.05)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand:hover{color:inherit}
.brand__mark{position:relative;width:42px;height:42px;border-radius:12px;background:var(--color-primary);color:#fff;font-family:var(--font-num);font-weight:700;font-size:15px;letter-spacing:-.02em;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(21,48,44,.18)}
.brand__mark::after{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:18px;height:2px;border-radius:2px;background:var(--color-accent)}
.brand__text{font-size:20px;font-weight:700;color:var(--color-title);letter-spacing:.02em;line-height:1.2}
.main-nav{margin-left:24px}
.main-nav ul{display:flex;gap:32px;align-items:center;margin:0;padding:0;list-style:none}
.main-nav a{font-size:15px;font-weight:500;color:var(--color-body);position:relative;padding:6px 2px}
.main-nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--color-accent);transition:width .3s ease-out}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.main-nav a.active{color:var(--color-primary);font-weight:600}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.btn-header{padding:10px 22px;font-size:14px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--color-border);background:#fff;border-radius:8px;color:var(--color-title);font-size:18px;cursor:pointer;transition:all var(--transition)}
.nav-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* Offcanvas mobile nav */
.offcanvas{background:var(--color-card);max-width:320px}
.offcanvas-header{padding:20px 24px;border-bottom:1px solid var(--color-border)}
.offcanvas-header .brand__text{font-size:18px}
.offcanvas-header .btn-close{font-size:13px}
.mobile-menu{padding:8px 0}
.mobile-menu a{display:flex;align-items:center;gap:12px;padding:14px 24px;color:var(--color-body);font-size:16px;font-weight:500;border-bottom:1px solid #F0EDE6;transition:all var(--transition)}
.mobile-menu a i{color:var(--color-accent);font-size:14px;width:18px}
.mobile-menu a.active{color:var(--color-primary);background:rgba(21,48,44,.04);border-left:3px solid var(--color-accent)}
.mobile-menu__cta{padding:24px}
.mobile-menu__cta .btn{width:100%}
.mobile-menu__contact{padding:0 24px 28px;font-size:13px;color:var(--color-muted)}
.mobile-menu__contact p{margin-bottom:6px}
.mobile-menu__contact i{color:var(--color-accent);margin-right:8px}

/* Section base */
.section{padding:96px 0}
.section--dark{background:linear-gradient(rgba(14,28,25,.94),rgba(14,28,25,.96)),url('/assets/images/backpic/back-2.webp') center/cover no-repeat;color:var(--color-footer-text)}
.section-heading{margin-bottom:48px;display:flex;flex-direction:column;gap:10px}
.section-heading h2{font-size:32px;font-weight:600;letter-spacing:.01em;margin-bottom:0}
.section-heading p{font-size:15px;color:var(--color-muted);max-width:620px;margin-bottom:0}
.section-heading--light h2{color:#fff}
.section-heading--light p{color:rgba(255,255,255,.62)}

/* Hero */
.hero{position:relative;background:var(--color-paper);padding:88px 0 96px;overflow:hidden}
.hero::before{content:'';position:absolute;left:-140px;bottom:-140px;width:360px;height:360px;border-radius:50%;border:1px solid rgba(185,145,91,.18);pointer-events:none}
.hero__container{position:relative;z-index:2}
.hero__content{max-width:560px;position:relative;z-index:2}
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(185,145,91,.1);color:#A87E4B;border-radius:var(--radius-tag);padding:6px 16px;font-size:13px;font-weight:500;margin-bottom:24px;letter-spacing:.03em}
.hero__content h1{font-size:52px;line-height:1.15;color:var(--color-title);margin-bottom:24px;font-weight:700}
.hero__lead{font-size:17px;line-height:1.8;color:var(--color-body);margin-bottom:32px;max-width:520px}
.hero__actions{display:flex;gap:16px;margin-bottom:44px;flex-wrap:wrap}
.hero__trust{display:flex;gap:28px;flex-wrap:wrap}
.trust-item{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--color-muted);font-weight:500}
.trust-item__bar{width:4px;height:18px;background:var(--color-accent);border-radius:2px;display:inline-block;flex-shrink:0}
.hero__media{position:absolute;top:0;right:0;width:46%;height:100%;z-index:1}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::before{content:'';position:absolute;top:0;left:0;width:120px;height:100%;background:linear-gradient(to right,var(--color-paper) 0%,rgba(243,241,236,0) 100%);z-index:2}
.hero__media::after{content:'';position:absolute;inset:0;background:rgba(21,48,44,.05);z-index:1}

/* Solutions */
.solution-card{background:var(--color-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:transform var(--transition),box-shadow var(--transition);height:100%;overflow:hidden}
.solution-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.solution-card--large{display:grid;grid-template-columns:1.05fr 1fr}
.solution-card__media{position:relative;min-height:280px;overflow:hidden}
.solution-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out}
.solution-card:hover .solution-card__media img{transform:scale(1.04)}
.solution-card__content{padding:32px;display:flex;flex-direction:column}
.solution-card__content h3{font-size:20px;font-weight:600;margin:16px 0 12px}
.solution-card__content>p{font-size:15px;color:var(--color-muted);line-height:1.8;margin-bottom:16px}
.solution-card__content .text-link{margin-top:auto}
.solution-stack{display:flex;flex-direction:column;gap:24px;height:100%}
.solution-card--small{padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.solution-card--small h3{font-size:18px;font-weight:600;margin-bottom:10px}
.solution-card--small p{font-size:14px;color:var(--color-muted);line-height:1.7;margin-bottom:16px}
.solution-card--small .text-link{margin-top:auto}
.solution-card__icon{width:48px;height:48px;border-radius:10px;background:rgba(185,145,91,.12);display:inline-flex;align-items:center;justify-content:center;color:var(--color-accent);font-size:20px;margin-bottom:16px}
.feature-list{list-style:none;margin:0 0 24px;padding:0}
.feature-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--color-body);margin-bottom:10px}
.feature-list li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--color-accent);font-size:13px;flex-shrink:0}

/* Data section */
.stat-grid{width:100%}
.stat-block{text-align:center;padding:24px 16px}
.stat-grid>[class*="col"]{position:relative}
.stat-grid>[class*="col"]+[class*="col"]::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:64px;width:1px;background:rgba(255,255,255,.14)}
.stat-block__num{font-family:var(--font-num);font-size:56px;font-weight:700;color:var(--color-accent);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat-block__label{font-size:15px;color:var(--color-footer-text);font-weight:500;margin-top:10px}
.stat-block__note{font-size:12px;color:rgba(255,255,255,.55);margin-top:4px}
.section__action{margin-top:52px;text-align:center}

/* News */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-card{background:var(--color-card);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition);display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.news-card__thumb{display:block;overflow:hidden;position:relative}
.news-card__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease-out}
.news-card:hover .news-card__thumb img{transform:scale(1.04)}
.news-card__body{padding:24px;display:flex;flex-direction:column;flex:1}
.news-card__meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.news-card__date{font-size:13px;color:var(--color-muted)}
.news-card__title{font-size:18px;font-weight:600;line-height:1.5;margin-bottom:10px;min-height:54px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card__title a{color:var(--color-title)}
.news-card__title a:hover{color:var(--color-accent)}
.news-card__summary{font-size:14px;color:var(--color-muted);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px;flex:1}
.news-card__body .text-link{margin-top:auto}
.news-empty{grid-column:1/-1;background:var(--color-card);border-radius:var(--radius-card);padding:48px 24px;text-align:center;color:var(--color-muted);box-shadow:var(--shadow-card)}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:2fr 3fr;gap:64px;align-items:start}
.faq-guide h2{font-size:32px;font-weight:600;margin-bottom:16px}
.faq-guide p{color:var(--color-muted);margin-bottom:28px;max-width:320px}
.faq-guide .btn{margin-top:4px}
.accordion{display:flex;flex-direction:column;gap:14px}
.accordion-item{background:var(--color-card);border:1px solid var(--color-border)!important;border-left:3px solid transparent!important;border-radius:var(--radius-card)!important;overflow:hidden;transition:box-shadow var(--transition),border-color var(--transition)}
.accordion-item:has(.accordion-button:not(.collapsed)){border-left-color:var(--color-accent)!important;box-shadow:var(--shadow-card)}
.accordion-header{margin-bottom:0}
.accordion-button{padding:20px 24px;background:var(--color-card)!important;color:var(--color-title)!important;font-size:16px;font-weight:600;text-align:left;line-height:1.5}
.accordion-button::after{color:var(--color-primary);width:16px;height:16px;background-size:16px}
.accordion-button:not(.collapsed){color:var(--color-primary)!important;box-shadow:none!important}
.accordion-button:focus,.accordion-button:focus-visible{box-shadow:none!important;outline:none}
.accordion-body{padding:0 24px 22px;color:var(--color-body);font-size:15px;line-height:1.8}

/* CTA band */
.cta-band{background:var(--color-primary);padding:56px 0}
.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:28px;font-weight:600;margin-bottom:8px}
.cta-band p{color:rgba(255,255,255,.75);font-size:15px;margin:0}
.cta-band__actions{display:flex;gap:16px;flex-wrap:wrap}
.cta-band .btn-outline{border-color:rgba(255,255,255,.6);color:#fff}
.cta-band .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* Privacy note */
.privacy-note{background:var(--color-paper);border-top:1px solid var(--color-border);padding:16px 0;font-size:13px;color:var(--color-muted)}
.privacy-note .container{display:flex;align-items:center;justify-content:center;gap:8px}
.privacy-note i{color:var(--color-accent)}

/* Footer */
.site-footer{background:var(--color-dark);color:var(--color-footer-text);padding-top:64px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:48px;padding-bottom:48px}
.footer-col--brand .brand__text{color:#fff}
.footer-col--brand .brand__mark{box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.footer-brand__desc{font-size:14px;line-height:1.8;margin-top:16px;color:rgba(255,255,255,.6);max-width:320px}
.footer-title{color:#fff;font-size:15px;font-weight:600;margin-bottom:18px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:10px}
.footer-links a{color:var(--color-footer-text);font-size:14px;transition:all var(--transition)}
.footer-links a:hover{color:var(--color-accent);padding-left:4px}
.footer-contact{list-style:none;margin:0;padding:0}
.footer-contact li{display:flex;align-items:flex-start;gap:10px;font-size:14px;margin-bottom:12px;color:var(--color-footer-text)}
.footer-contact i{color:var(--color-accent);margin-top:4px;font-size:13px;width:16px;flex-shrink:0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:rgba(255,255,255,.45)}

/* Modal & form */
.modal-content{border:none;border-radius:var(--radius-card);overflow:hidden}
.modal-header{border-bottom:1px solid var(--color-border);padding:24px}
.modal-title{font-size:22px;font-weight:600}
.modal-header .btn-close{font-size:14px}
.modal-body{padding:24px}
.modal-subtitle{font-size:14px;color:var(--color-muted);margin-bottom:24px;line-height:1.7}
.modal-footer{border-top:1px solid var(--color-border);padding:16px 24px}
.form-label{font-size:13px;font-weight:500;color:var(--color-title);margin-bottom:6px}
.form-control,.form-select{border:1px solid var(--color-border);border-radius:6px;padding:12px 14px;font-size:15px;background:#FBFBF9;color:var(--color-title);transition:border-color var(--transition),box-shadow var(--transition)}
.form-control:focus,.form-select:focus{border-color:var(--color-primary);background:#fff;box-shadow:0 0 0 3px rgba(21,48,44,.1);outline:none}
.form-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2315332E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
.form-status{display:none;background:rgba(47,125,92,.08);border:1px solid rgba(47,125,92,.25);color:var(--color-success);border-radius:6px;padding:12px 14px;font-size:14px;margin-bottom:16px;line-height:1.6}
.form-status.show{display:block}
.form-privacy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--color-muted);text-align:center;margin-top:16px;margin-bottom:0}
.form-privacy i{color:var(--color-accent)}

/* Reveal animation */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s ease-out}
.js .reveal.revealed{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .news-card,.solution-card{transition:none}
  .hero__media img,.news-card__thumb img,.solution-card__media img{transition:none}
}

/* Responsive */
@media (max-width:1199.98px){
  .hero__content h1{font-size:44px}
  .stat-block__num{font-size:46px}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:40px}
}
@media (max-width:991.98px){
  .section{padding:72px 0}
  .hero{padding:56px 0 0}
  .hero__content{max-width:100%}
  .hero__content h1{font-size:38px}
  .hero__media{position:static;width:100%;height:280px;margin-top:48px}
  .hero__media::before{display:none}
  .hero::before{display:none}
  .main-nav{display:none}
  .nav-toggle{display:inline-flex}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .faq-layout{grid-template-columns:1fr;gap:40px}
  .stat-grid>[class*="col"]+[class*="col"]::before{display:none}
  .stat-block{padding:20px 8px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .solution-card--large{grid-template-columns:1fr}
  .solution-card__media{min-height:220px}
}
@media (max-width:767.98px){
  .section{padding:56px 0}
  .section-heading{margin-bottom:32px}
  .section-heading h2{font-size:24px}
  .hero{padding:40px 0 0}
  .hero__content h1{font-size:34px;line-height:1.2}
  .hero__lead{font-size:16px}
  .hero__media{height:240px;margin-top:36px}
  .hero__actions .btn{flex:1;text-align:center}
  .news-grid{grid-template-columns:1fr}
  .stat-block__num{font-size:28px}
  .stat-block__label{font-size:14px}
  .cta-band{padding:48px 0}
  .cta-band h2{font-size:22px}
  .cta-band__inner{flex-direction:column;text-align:center}
  .cta-band__actions{justify-content:center;width:100%}
  .cta-band .btn{flex:1;text-align:center}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;text-align:center}
  .btn-header{display:none}
  .site-topbar__left{display:none}
  .site-topbar__right{width:100%;text-align:center}
  .modal-body{padding:20px}
  .modal-header{padding:20px}
}
@media (max-width:575.98px){
  .container{padding-left:16px;padding-right:16px}
  .trust-item{font-size:12px}
  .faq-guide h2{font-size:24px}
  .solution-card__content{padding:24px}
}

/* roulang page: category1 */
:root {
  --ink: #15332E;
  --ink-dark: #0D2621;
  --bronze: #B9915B;
  --paper: #F3F1EC;
  --dark-green: #0E1C19;
  --card-bg: #FFFFFF;
  --heading: #16221F;
  --body: #4A524E;
  --muted: #7B8580;
  --border: #E3DFD6;
  --success: #2F7D5C;
  --error: #C7493D;
  --link: #2E5F4E;
  --radius-card: 8px;
  --radius-btn: 4px;
  --radius-tag: 999px;
  --shadow-sm: 0 1px 3px rgba(21,48,44,.06);
  --shadow-hover: 0 8px 24px rgba(21,48,44,.12);
  --transition: 200ms ease-out;
  --font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-num: "Inter", "Helvetica Neue", Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

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

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

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

a:hover {
  color: var(--bronze);
}

.container {
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1200px;
  }
}

/* ===== 按钮体系 ===== */
.btn {
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 26px;
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  border: 1px solid transparent;
}

.btn-primary {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ink-dark);
  border-color: var(--ink-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(21,48,44,.22);
}

.btn-primary:active {
  background-color: var(--ink-dark);
  border-color: var(--ink-dark);
  transform: translateY(0);
  box-shadow: none;
}

.btn-bronze-outline {
  background: transparent;
  border: 1px solid var(--bronze);
  color: var(--bronze);
}

.btn-bronze-outline:hover,
.btn-bronze-outline:focus {
  background: rgba(185,145,91,.1);
  border-color: var(--bronze);
  color: var(--bronze);
  transform: translateY(-1px);
}

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

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

.btn-block {
  display: block;
  width: 100%;
}

.btn-lg {
  padding: 15px 36px;
  font-size: 17px;
}

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

.text-link i {
  transition: transform var(--transition);
}

.text-link:hover {
  color: var(--bronze);
}

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

/* ===== 标签 ===== */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: var(--radius-tag);
  font-size: 13px;
  font-weight: 500;
  background: rgba(185,145,91,.1);
  color: var(--bronze);
}

.tag--outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
}

/* ===== Header / 导航 ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 12px rgba(14,28,25,.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
}

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

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bronze);
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
}

.brand__text {
  font-size: 20px;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: .5px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  position: relative;
  color: var(--body);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 2px;
}

.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav-list a:hover {
  color: var(--heading);
}

.nav-list a:hover::after,
.nav-list a.active::after {
  transform: scaleX(1);
}

.nav-list a.active {
  color: var(--ink);
  font-weight: 600;
}

.header-cta {
  padding: 10px 22px;
  font-size: 14px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== Hero 小横幅 ===== */
.category-hero {
  position: relative;
  background: var(--ink);
  background-image: url('/assets/images/backpic/back-1.webp');
  background-size: cover;
  background-position: center;
  padding: 110px 0 86px;
  color: #fff;
  overflow: hidden;
}

.category-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(14,28,25,.94) 15%, rgba(14,28,25,.78) 65%, rgba(14,28,25,.55));
  z-index: 1;
}

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

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 14px;
  color: rgba(255,255,255,.6);
}

.breadcrumb-nav a {
  color: rgba(255,255,255,.75);
}

.breadcrumb-nav a:hover {
  color: #fff;
}

.breadcrumb-nav .separator {
  color: rgba(255,255,255,.4);
}

.breadcrumb-nav .current {
  color: #fff;
  font-weight: 500;
}

.category-hero h1 {
  font-size: 52px;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: 1px;
}

.category-hero .hero-lead {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,.82);
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== Section 通用 ===== */
.section {
  padding: 96px 0;
  scroll-margin-top: 80px;
}

.section-head {
  margin-bottom: 48px;
  max-width: 760px;
}

.section-head h2 {
  font-size: 32px;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.3;
  margin: 0 0 14px;
}

.section-head p {
  font-size: 16px;
  color: var(--muted);
  margin: 0;
}

/* ===== 分类介绍区 ===== */
.intro-section {
  background: var(--paper);
}

.intro-text {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(227,223,214,.6);
  margin-bottom: 24px;
}

.intro-text h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 16px;
  line-height: 1.3;
}

.intro-text p {
  font-size: 16px;
  color: var(--body);
  line-height: 1.85;
  margin: 0;
}

.text-card {
  display: flex;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(227,223,214,.6);
  margin-bottom: 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}

.text-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.text-card__media {
  flex: 0 0 250px;
  overflow: hidden;
}

.text-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease-out;
}

.text-card:hover .text-card__media img {
  transform: scale(1.03);
}

.text-card__body {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.text-card__body h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 10px;
}

.text-card__body p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  margin: 0 0 18px;
}

/* ===== 侧栏 ===== */
.sidebar {
  position: sticky;
  top: 100px;
}

.side-card {
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(227,223,214,.6);
  margin-bottom: 24px;
}

.side-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  font-size: 15px;
  color: var(--body);
  line-height: 1.5;
}

.service-list li i {
  color: var(--bronze);
  font-size: 13px;
  margin-top: 5px;
}

.side-card--dark {
  background: var(--ink);
  border-color: var(--ink);
  color: rgba(255,255,255,.8);
}

.side-card--dark h3 {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.15);
}

.side-card--dark p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.72);
  margin-bottom: 22px;
}

.side-card--dark .btn-primary {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #fff;
}

.side-card--dark .btn-primary:hover {
  background: #A97E4B;
  border-color: #A97E4B;
}

/* ===== 服务流程 ===== */
.process-section {
  background: var(--dark-green);
  color: #fff;
  padding: 96px 0;
}

.process-section .section-head h2 {
  color: #fff;
}

.process-section .section-head p {
  color: rgba(255,255,255,.6);
}

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

.process-step {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-card);
  padding: 28px 22px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  counter-increment: process;
}

.process-step:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(185,145,91,.35);
  transform: translateY(-3px);
}

.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--bronze);
  color: var(--bronze);
  font-family: var(--font-num);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}

.process-step__num::before {
  content: "0" counter(process);
}

.process-step h3 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
}

.process-step p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.62);
  margin: 0;
}

.process-note {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,.5);
}

/* ===== 适用场景 ===== */
.scenario-section {
  background: #fff;
  padding: 96px 0;
}

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

.scenario-card {
  display: flex;
  gap: 20px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.scenario-card__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(185,145,91,.12);
  color: var(--bronze);
  font-size: 20px;
}

.scenario-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 8px;
}

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

/* ===== FAQ ===== */
.faq-section {
  background: var(--paper);
  padding: 96px 0;
}

.faq-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 60px;
  align-items: start;
}

.faq-intro h2 {
  font-size: 32px;
  font-weight: 600;
  color: var(--heading);
  margin: 0 0 14px;
  line-height: 1.3;
  position: relative;
  padding-bottom: 18px;
}

.faq-intro h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--bronze);
}

.faq-intro p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 28px;
}

.faq-intro .text-link {
  font-size: 16px;
}

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

.accordion-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.accordion-item:first-child {
  border-radius: var(--radius-card);
}

.accordion-item:last-child {
  border-radius: var(--radius-card);
}

.accordion-button {
  background: #fff;
  color: var(--heading);
  font-size: 16px;
  font-weight: 600;
  padding: 20px 24px;
  border: none;
  box-shadow: none;
  border-left: 2px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}

.accordion-button:hover {
  background: rgba(185,145,91,.04);
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background: #fff;
  color: var(--ink);
  border-left-color: var(--bronze);
}

.accordion-button::after {
  background: none;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f078";
  color: var(--bronze);
  font-size: 14px;
  width: auto;
  height: auto;
  transition: transform var(--transition);
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  background: none;
}

.accordion-body {
  padding: 4px 26px 22px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--body);
  border-left: 2px solid var(--bronze);
  background: #fff;
}

/* ===== CTA 区 ===== */
.cta-section {
  position: relative;
  background: var(--ink);
  padding: 96px 0;
  color: #fff;
  text-align: center;
}

.cta-section h2 {
  font-size: 34px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
}

.cta-section p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,.72);
  max-width: 640px;
  margin: 0 auto 34px;
}

.cta-section .btn-primary {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #fff;
}

.cta-section .btn-primary:hover {
  background: #A97E4B;
  border-color: #A97E4B;
}

/* ===== 隐私说明条 ===== */
.privacy-note {
  background: var(--dark-green);
  padding: 18px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
}

.privacy-note span {
  font-size: 13px;
  color: rgba(255,255,255,.5);
}

.privacy-note i {
  color: var(--bronze);
  margin-right: 6px;
}

/* ===== 页脚 ===== */
.site-footer {
  background: var(--dark-green);
  padding: 64px 0 0;
  color: #B9C2BE;
}

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

.footer-col--brand .brand__mark {
  background: rgba(255,255,255,.1);
  color: var(--bronze);
}

.footer-col--brand .brand__text {
  color: #fff;
}

.footer-brand__desc {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.58);
  max-width: 360px;
}

.footer-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 18px;
}

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

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

.footer-links a {
  font-size: 14px;
  color: rgba(255,255,255,.58);
  transition: color var(--transition), padding-left var(--transition);
}

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

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

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.58);
}

.footer-contact li i {
  color: var(--bronze);
  font-size: 14px;
  width: 20px;
  text-align: center;
}

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

/* ===== Modal 表单 ===== */
.modal-content {
  border: none;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(14,28,25,.28);
}

.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 24px 28px 16px;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--heading);
}

.modal-sub {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

.modal-body {
  padding: 24px 28px 28px;
}

.btn-close {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-btn);
  background: transparent;
  font-size: 15px;
  opacity: .7;
  transition: background var(--transition), opacity var(--transition);
}

.btn-close:hover {
  background: rgba(14,28,25,.06);
  opacity: 1;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--heading);
  margin-bottom: 6px;
}

.form-control,
.form-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 10px 14px;
  font-size: 15px;
  color: var(--heading);
  background-color: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(21,51,46,.12);
}

textarea.form-control {
  min-height: 104px;
  resize: vertical;
}

.modal-footer-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}

.modal-footer-note i {
  color: var(--bronze);
  margin-right: 4px;
}

/* ===== 响应式 ===== */
@media (max-width: 991.98px) {
  .section {
    padding: 64px 0;
  }

  .category-hero {
    padding: 88px 0 64px;
  }

  .category-hero h1 {
    font-size: 40px;
  }

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

  .process-step:last-child {
    grid-column: 1 / -1;
  }

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

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

  .text-card__media {
    flex: 0 0 200px;
  }

  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 24px 20px 32px;
    box-shadow: 0 16px 32px rgba(14,28,25,.1);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    gap: 20px;
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }

  .nav-list a {
    display: block;
    padding: 10px 0;
    font-size: 17px;
    width: 100%;
  }

  .header-cta {
    width: 100%;
    text-align: center;
  }
}

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

  .category-hero {
    padding: 60px 0 48px;
  }

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

  .category-hero .hero-lead {
    font-size: 15px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

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

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

  .intro-text {
    padding: 24px;
  }

  .intro-text h2 {
    font-size: 22px;
  }

  .text-card {
    flex-direction: column;
  }

  .text-card__media {
    flex: none;
    width: 100%;
    height: 200px;
  }

  .text-card__body {
    padding: 22px;
  }

  .sidebar {
    position: static;
  }

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

  .process-step:last-child {
    grid-column: auto;
  }

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

  .scenario-card {
    padding: 22px;
  }

  .cta-section {
    padding: 64px 0;
  }

  .cta-section h2 {
    font-size: 26px;
  }

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

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

  .modal-body {
    padding: 20px;
  }

  .modal-header {
    padding: 20px 20px 12px;
  }
}

@media (max-width: 575.98px) {
  .brand__text {
    font-size: 17px;
  }

  .brand__mark {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .category-hero {
    padding: 52px 0 40px;
  }

  .category-hero h1 {
    font-size: 30px;
  }

  .text-card__body {
    padding: 18px;
  }

  .text-card__body h3 {
    font-size: 18px;
  }

  .scenario-card {
    flex-direction: column;
    gap: 14px;
  }

  .accordion-button {
    padding: 16px 18px;
    font-size: 15px;
  }

  .accordion-body {
    padding: 4px 20px 18px;
    font-size: 14px;
  }
}

/* roulang page: article */
:root {
      --ink-green: #15332E;
      --antique-bronze: #B9915B;
      --paper: #F3F1EC;
      --dark-green: #0E1C19;
      --white: #FFFFFF;
      --title-c: #16221F;
      --text-c: #4A524E;
      --muted-c: #7B8580;
      --line: #E3DFD6;
      --success: #2F7D5C;
      --error: #C7493D;
      --link-c: #2E5F4E;
      --shadow-card: 0 1px 3px rgba(21, 48, 44, .06);
      --shadow-hover: 0 8px 24px rgba(21, 48, 44, .12);
      --transition: .25s ease-out;
      --font: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
      --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
    body {
      font-family: var(--font);
      background: var(--paper);
      color: var(--text-c);
      font-size: 16px;
      line-height: 1.8;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--link-c); text-decoration: none; transition: color var(--transition); }
    a:hover { color: var(--antique-bronze); }
    button { font-family: inherit; }
    ul { list-style: none; padding: 0; }

    .container { max-width: 1200px; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1030;
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid transparent;
      transition: border-color .3s, box-shadow .3s;
    }
    .site-header.scrolled {
      border-bottom-color: var(--line);
      box-shadow: 0 2px 16px rgba(21, 48, 44, .06);
    }
    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      height: 74px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .brand__mark {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--ink-green);
      color: #fff;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1px;
      font-family: var(--font-en);
    }
    .brand__text {
      font-size: 19px;
      font-weight: 700;
      color: var(--title-c);
      letter-spacing: .5px;
    }
    .brand__text:hover { color: var(--title-c); }

    .main-nav ul {
      display: flex;
      gap: 36px;
      margin: 0;
      padding: 0;
    }
    .main-nav a {
      position: relative;
      padding: 8px 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--title-c);
      white-space: nowrap;
    }
    .main-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: var(--antique-bronze);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s ease-out;
    }
    .main-nav a:hover { color: var(--ink-green); }
    .main-nav a:hover::after { transform: scaleX(1); }
    .main-nav a.active { color: var(--ink-green); font-weight: 600; }
    .main-nav a.active::after { transform: scaleX(1); }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .btn-nav-cta {
      padding: 8px 22px;
      font-size: 14px;
    }
    .nav-toggle {
      display: none;
      background: none;
      border: 1px solid var(--line);
      border-radius: 4px;
      width: 44px;
      height: 44px;
      font-size: 18px;
      color: var(--title-c);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color var(--transition);
    }
    .nav-toggle:hover { border-color: var(--antique-bronze); }

    .mobile-drawer {
      display: none;
      background: #fff;
      border-top: 1px solid var(--line);
      padding: 20px 24px 28px;
    }
    .mobile-drawer.open { display: block; }
    .mobile-links { margin-bottom: 16px; }
    .mobile-links li { margin-bottom: 4px; }
    .mobile-links a {
      display: block;
      padding: 12px 8px;
      font-size: 16px;
      font-weight: 500;
      color: var(--title-c);
      border-radius: 6px;
      transition: background var(--transition);
    }
    .mobile-links a:hover { background: var(--paper); color: var(--ink-green); }
    .mobile-links a.active { color: var(--ink-green); background: rgba(21, 48, 44, .05); }
    .mobile-cta {
      display: block;
      text-align: center;
      width: 100%;
      padding: 12px;
      font-size: 15px;
    }

    .btn {
      border-radius: 4px;
      font-weight: 500;
      padding: 10px 26px;
      font-size: 15px;
      line-height: 1.6;
      transition: all var(--transition);
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
    }
    .btn-primary {
      background: var(--ink-green);
      border-color: var(--ink-green);
      color: #fff;
    }
    .btn-primary:hover, .btn-primary:focus {
      background: #0D2621;
      border-color: #0D2621;
      color: #fff;
      transform: translateY(-1px);
    }
    .btn-outline-bronze {
      background: transparent;
      border-color: var(--antique-bronze);
      color: var(--antique-bronze);
    }
    .btn-outline-bronze:hover {
      background: rgba(185, 145, 91, .1);
      color: var(--antique-bronze);
    }
    .btn-lg {
      padding: 14px 36px;
      font-size: 16px;
    }
    .btn:focus-visible {
      outline: 3px solid rgba(21, 48, 44, .25);
      outline-offset: 2px;
    }

    .badge {
      background: rgba(185, 145, 91, .12);
      color: var(--antique-bronze);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      padding: 5px 16px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .badge--dark {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, .4);
      color: rgba(255, 255, 255, .85);
    }

    .article-hero {
      background: var(--paper);
      padding: 56px 0 40px;
      border-bottom: 1px solid var(--line);
    }
    .breadcrumb-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--muted-c);
      margin-bottom: 32px;
      flex-wrap: wrap;
    }
    .breadcrumb-nav a { color: var(--muted-c); transition: color var(--transition); }
    .breadcrumb-nav a:hover { color: var(--ink-green); }
    .breadcrumb-nav .breadcrumb-divider { color: var(--line); font-size: 12px; }
    .breadcrumb-nav .breadcrumb-current {
      color: var(--text-c);
      font-weight: 500;
      max-width: 360px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .article-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .article-meta .meta-item {
      font-size: 13px;
      color: var(--muted-c);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .article-meta .meta-item i { color: var(--antique-bronze); font-size: 14px; }

    .article-hero h1 {
      font-size: 36px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--title-c);
      max-width: 900px;
      margin-bottom: 24px;
      word-break: break-word;
    }
    .article-summary {
      font-size: 16px;
      line-height: 1.8;
      color: var(--text-c);
      background: rgba(255, 255, 255, .7);
      border-left: 3px solid var(--antique-bronze);
      border-radius: 0 8px 8px 0;
      padding: 18px 24px;
      max-width: 860px;
    }

    .article-cover {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 24px 0;
    }
    .article-cover img {
      width: 100%;
      height: 440px;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: var(--shadow-card);
    }
    .cover-caption {
      font-size: 13px;
      color: var(--muted-c);
      margin-top: 12px;
      text-align: center;
    }

    .article-main {
      padding: 48px 0 80px;
    }
    .article-body {
      max-width: 780px;
      margin: 0 auto;
      background: var(--white);
      border-radius: 8px;
      padding: 48px 56px;
      box-shadow: var(--shadow-card);
    }
    .article-body p {
      margin-bottom: 24px;
      font-size: 16px;
      line-height: 1.9;
      color: var(--text-c);
    }
    .article-body h2 {
      font-size: 24px;
      font-weight: 600;
      color: var(--title-c);
      margin: 48px 0 16px;
    }
    .article-body h3 {
      font-size: 20px;
      font-weight: 600;
      color: var(--title-c);
      margin: 36px 0 16px;
      padding-left: 14px;
      border-left: 4px solid var(--ink-green);
      line-height: 1.5;
    }
    .article-body h4 {
      font-size: 17px;
      font-weight: 600;
      color: var(--title-c);
      margin: 28px 0 12px;
    }
    .article-body ul, .article-body ol {
      margin-bottom: 24px;
      padding-left: 22px;
    }
    .article-body ul li {
      margin-bottom: 10px;
      position: relative;
      color: var(--text-c);
    }
    .article-body ul li::marker {
      color: var(--ink-green);
      font-size: 1.1em;
    }
    .article-body ol li::marker {
      color: var(--antique-bronze);
      font-weight: 600;
    }
    .article-body li { margin-bottom: 8px; }
    .article-body blockquote {
      border-left: 3px solid var(--antique-bronze);
      background: var(--paper);
      padding: 18px 24px;
      border-radius: 0 8px 8px 0;
      margin: 28px 0;
      color: var(--text-c);
      font-size: 15px;
    }
    .article-body img {
      border-radius: 8px;
      width: 100%;
      margin: 28px 0;
    }
    .article-body figure {
      margin: 28px 0;
    }
    .article-body figcaption {
      font-size: 13px;
      color: var(--muted-c);
      text-align: center;
      margin-top: -16px;
      margin-bottom: 24px;
    }
    .article-body a {
      color: var(--ink-green);
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    .article-body a:hover { color: var(--antique-bronze); }
    .article-body table {
      width: 100%;
      margin-bottom: 24px;
      border-collapse: collapse;
      font-size: 14px;
    }
    .article-body th,
    .article-body td {
      border: 1px solid var(--line);
      padding: 12px 16px;
      text-align: left;
    }
    .article-body th {
      background: var(--paper);
      font-weight: 600;
      color: var(--title-c);
    }

    .not-found {
      text-align: center;
      padding: 72px 24px;
    }
    .not-found__icon {
      font-size: 48px;
      color: var(--antique-bronze);
      margin-bottom: 20px;
    }
    .not-found h2 {
      font-size: 22px;
      font-weight: 600;
      color: var(--title-c);
      margin-bottom: 12px;
    }
    .not-found p {
      color: var(--muted-c);
      margin-bottom: 28px;
    }

    .source-line {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 48px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      font-size: 14px;
      color: var(--muted-c);
    }
    .source-line .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--ink-green);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-en);
      flex-shrink: 0;
    }
    .source-line .source-name { font-weight: 600; color: var(--title-c); }

    .related-section {
      background: var(--white);
      border-top: 1px solid var(--line);
      padding: 80px 0;
    }
    .related-head {
      margin-bottom: 40px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
    }
    .related-title {
      font-size: 32px;
      font-weight: 600;
      color: var(--title-c);
      margin-bottom: 8px;
    }
    .related-sub {
      color: var(--muted-c);
      font-size: 15px;
    }
    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .related-card {
      background: var(--paper);
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid transparent;
      transition: all var(--transition);
      display: flex;
      flex-direction: column;
    }
    .related-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
      border-color: var(--line);
    }
    .related-card__img {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 9;
    }
    .related-card__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s ease-out;
    }
    .related-card:hover .related-card__img img { transform: scale(1.04); }
    .related-card__img::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(14, 28, 25, .35));
    }
    .related-card__body {
      padding: 24px 24px 28px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .related-card__body .badge { align-self: flex-start; margin-bottom: 12px; }
    .related-card__body h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--title-c);
      line-height: 1.5;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .related-card__body p {
      font-size: 14px;
      color: var(--muted-c);
      line-height: 1.7;
      margin-bottom: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      flex: 1;
    }
    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 500;
      color: var(--ink-green);
      transition: color var(--transition);
      margin-top: auto;
    }
    .text-link i { transition: transform var(--transition); }
    .text-link:hover { color: var(--antique-bronze); }
    .text-link:hover i { transform: translateX(4px); }
    .back-to-list {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--muted-c);
      transition: all var(--transition);
      padding: 8px 0;
    }
    .back-to-list i { transition: transform var(--transition); }
    .back-to-list:hover { color: var(--ink-green); }
    .back-to-list:hover i { transform: translateX(-4px); }

    .cta-section {
      background: var(--dark-green);
      padding: 72px 0;
      position: relative;
      overflow: hidden;
    }
    .cta-section::before {
      content: "";
      position: absolute;
      right: -80px;
      top: -100px;
      width: 400px;
      height: 400px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 50%;
    }
    .cta-section .container { position: relative; }
    .cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }
    .cta-text h2 {
      color: #fff;
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 12px;
    }
    .cta-text p {
      color: rgba(185, 194, 190, .85);
      max-width: 720px;
      font-size: 15px;
    }
    .cta-text p strong { color: #fff; font-weight: 600; }

    .site-footer {
      background: #0E1C19;
      color: #B9C2BE;
      padding: 64px 0 0;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.2fr;
      gap: 48px;
      padding-bottom: 48px;
    }
    .footer-col--brand .brand { margin-bottom: 16px; }
    .footer-col--brand .brand__mark {
      background: rgba(255, 255, 255, .1);
      color: #fff;
    }
    .footer-col--brand .brand__text { color: #fff; }
    .footer-brand__desc {
      font-size: 14px;
      line-height: 1.8;
      color: rgba(185, 194, 190, .75);
      max-width: 340px;
    }
    .footer-title {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 20px;
      letter-spacing: .3px;
    }
    .footer-links li { margin-bottom: 12px; }
    .footer-links a {
      font-size: 14px;
      color: rgba(185, 194, 190, .75);
      transition: color var(--transition);
    }
    .footer-links a:hover { color: var(--antique-bronze); }
    .footer-contact {
      display: grid;
      gap: 14px;
    }
    .footer-contact li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: rgba(185, 194, 190, .75);
    }
    .footer-contact i {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: rgba(255, 255, 255, .06);
      color: var(--antique-bronze);
      font-size: 14px;
      flex-shrink: 0;
    }
    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .08);
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 13px;
      color: rgba(185, 194, 190, .55);
    }

    .modal-content {
      background: var(--white);
      border: none;
      border-radius: 8px;
      padding: 12px;
      box-shadow: 0 24px 64px rgba(14, 28, 25, .2);
    }
    .modal-header {
      padding: 20px 20px 0;
      border-bottom: none;
    }
    .modal-title {
      font-size: 22px;
      font-weight: 600;
      color: var(--title-c);
    }
    .modal-sub {
      font-size: 14px;
      color: var(--muted-c);
      margin-top: 6px;
      line-height: 1.6;
    }
    .btn-close {
      background: transparent;
      border: none;
      font-size: 22px;
      line-height: 1;
      color: var(--muted-c);
      padding: 10px;
      margin: -6px -6px 0 0;
      border-radius: 6px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all var(--transition);
    }
    .btn-close:hover {
      background: var(--paper);
      color: var(--ink-green);
    }
    .modal-body { padding: 20px 20px 24px; }
    .form-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--title-c);
      margin-bottom: 8px;
    }
    .form-control {
      border-radius: 4px;
      border: 1px solid var(--line);
      background: var(--paper);
      padding: 10px 16px;
      font-size: 15px;
      color: var(--title-c);
      transition: all var(--transition);
    }
    .form-control:focus {
      background: #fff;
      border-color: var(--ink-green);
      box-shadow: 0 0 0 3px rgba(21, 48, 44, .08);
      outline: none;
    }
    .form-select {
      border-radius: 4px;
      border: 1px solid var(--line);
      background-color: var(--paper);
      padding: 10px 40px 10px 16px;
      font-size: 15px;
      color: var(--title-c);
      transition: all var(--transition);
    }
    .form-select:focus {
      border-color: var(--ink-green);
      box-shadow: 0 0 0 3px rgba(21, 48, 44, .08);
      outline: none;
    }
    textarea.form-control { resize: vertical; min-height: 100px; }
    .btn-submit {
      width: 100%;
      padding: 13px 20px;
      font-size: 15px;
      font-weight: 500;
    }
    .privacy-note {
      font-size: 13px;
      color: var(--muted-c);
      text-align: center;
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .privacy-note i { color: var(--antique-bronze); font-size: 12px; }

    @media (max-width: 991.98px) {
      .main-nav { display: none; }
      .nav-toggle { display: inline-flex; }
      .btn-nav-cta { display: none; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
      .related-grid { grid-template-columns: 1fr 1fr; }
      .article-body { padding: 40px 32px; }
    }

    @media (max-width: 767.98px) {
      .header-row { height: 64px; }
      .brand__mark { width: 32px; height: 32px; font-size: 13px; border-radius: 6px; }
      .brand__text { font-size: 17px; }
      .article-hero { padding: 36px 0 28px; }
      .article-hero h1 { font-size: 28px; line-height: 1.35; }
      .article-summary { padding: 14px 18px; font-size: 15px; }
      .article-cover { padding-top: 24px; }
      .article-cover img { height: 220px; border-radius: 6px; }
      .article-main { padding: 32px 0 56px; }
      .article-body { padding: 28px 20px; border-radius: 6px; }
      .article-body p { font-size: 15px; line-height: 1.85; }
      .article-body h2 { font-size: 21px; }
      .article-body h3 { font-size: 18px; }
      .breadcrumb-nav {
        margin-bottom: 20px;
        font-size: 13px;
      }
      .breadcrumb-nav .breadcrumb-current {
        max-width: 160px;
      }
      .article-meta { gap: 12px; }
      .source-line { flex-wrap: wrap; }
      .related-section { padding: 52px 0; }
      .related-head { flex-direction: column; gap: 12px; align-items: flex-start; }
      .related-title { font-size: 24px; }
      .related-grid { grid-template-columns: 1fr; gap: 16px; }
      .cta-section { padding: 56px 0; }
      .cta-inner { flex-direction: column; text-align: center; justify-content: center; }
      .cta-text h2 { font-size: 24px; }
      .cta-text p { font-size: 14px; }
      .cta-inner .btn { width: 100%; }
      .footer-grid { grid-template-columns: 1fr; gap: 32px; }
      .footer-bottom { justify-content: center; text-align: center; }
      .modal-content { padding: 8px; }
      .modal-body { padding: 16px 16px 20px; }
    }

    @media (max-width: 575.98px) {
      .container { padding-left: 20px; padding-right: 20px; }
      .related-card__body { padding: 20px; }
    }