/* roulang page: index */
:root{
  --copper:#A67B3A;
  --gold:#D6A85E;
  --champagne:#F0D9A6;
  --wine:#7A2E2A;
  --green:#3E6B5D;
  --deep-bg:#16110D;
  --warm-bg:#F7F2EA;
  --card-bg:#FFFFFF;
  --ink:#2C2420;
  --muted:#73665B;
  --line:#E1D3C2;
  --light-line:#EFE6DA;
  --gutter:20px;
  --radius:20px;
  --radius-lg:24px;
  --shadow-sm:0 6px 18px rgba(40,25,15,.06);
  --shadow-md:0 16px 40px rgba(40,25,15,.10);
  --shadow-lg:0 30px 60px rgba(40,25,15,.14);
  --serif:"Noto Serif SC","Songti SC","SimSun",serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding-top:86px;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--warm-bg);
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit;transition:color .25s ease}
a:hover{color:var(--copper)}
button{font-family:inherit}
p{margin:0}
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
}
.container{max-width:1200px}
.section{
  padding:92px 0;
}
@media(max-width:800px){
  .section{padding:64px 0}
}
body{
  padding-top:86px;
}
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--deep-bg);
  color:#fff;
  padding:10px 20px;
  z-index:9999;
}
.skip-link:focus{
  left:8px;
  top:8px;
  color:#fff;
}

/* ============= header ============= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1040;
  height:86px;
  background:rgba(22,17,13,.92);
  transition:background .35s ease,height .3s ease,box-shadow .3s ease;
  border-bottom:1px solid rgba(214,168,94,.16);
}
.site-header.is-scrolled{
  height:66px;
  background:rgba(22,17,13,.98);
  box-shadow:0 8px 30px rgba(0,0,0,.22);
  border-bottom-color:rgba(214,168,94,.22);
}
.header-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:86px;
  transition:height .3s ease;
}
.site-header.is-scrolled .header-grid{height:66px}
.nav-left,.nav-right{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-left{justify-content:flex-end;padding-right:20px}
.nav-right{justify-content:flex-start;padding-left:20px}
.nav-link{
  display:inline-block;
  padding:8px 14px;
  color:rgba(240,230,210,.94);
  font-size:15px;
  letter-spacing:.04em;
  position:relative;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:2px;
  background:var(--gold);
  border-radius:999px;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .3s ease;
}
.nav-link:hover,.nav-link.active{
  color:var(--gold);
}
.nav-link:hover::after,
.nav-link.active::after{
  transform:scaleX(1);
  transform-origin:left center;
}
.brand-logo{
  text-align:center;
  padding:0 14px;
}
.brand-logo a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--serif);
  font-size:23px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--champagne);
  white-space:nowrap;
}
.brand-logo .brand-mark{
  width:36px;
  height:36px;
  border:1px solid rgba(240,217,166,.66);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-weight:700;
  font-size:17px;
  color:var(--gold);
}
.brand-logo em{
  font-style:normal;
  background:linear-gradient(135deg,#F0D9A6,#D6A85E);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-right:2px;
}
.header-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:transparent;
  border:1px solid rgba(240,217,166,.4);
  border-radius:12px;
  width:44px;
  height:44px;
  align-items:center;
  transition:background .2s ease,border-color .2s ease;
}
.header-burger span{
  display:block;
  width:20px;
  height:2px;
  background:var(--champagne);
  border-radius:999px;
  transition:all .3s ease;
}
.header-burger:hover{
  background:rgba(240,217,166,.12);
  border-color:var(--gold);
}
.header-burger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.header-burger[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.header-burger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}
.mobile-nav{
  display:none;
  background:rgba(22,17,13,.99);
  border-top:1px solid rgba(214,168,94,.16);
  padding:18px 24px 30px;
}
.mobile-nav a{
  display:block;
  padding:14px 6px;
  border-bottom:1px solid rgba(240,217,166,.12);
  color:var(--champagne);
  font-size:17px;
}
.mobile-nav a.active{
  color:var(--gold);
}
.mobile-nav a:hover{
  padding-left:12px;
  color:var(--gold);
}
@media(max-width:1199.98px){
  .nav-left,.nav-right{display:none}
  .header-burger{
    display:flex;
    margin-left:auto;
  }
  .header-grid{
    grid-template-columns:1fr auto;
    padding-left:20px;
    padding-right:20px;
  }
}
@media(max-width:575.98px){
  .brand-logo a{
    font-size:20px;
  }
  .brand-logo .brand-mark{
    width:32px;
    height:32px;
    font-size:15px;
  }
  body{
    padding-top:80px;
  }
  .site-header{
    height:80px;
  }
  .header-grid{
    height:80px;
  }
}
@media(min-width:1200px){
  .mobile-nav{
    display:none !important;
  }
}

/* ============== hero ============== */
.hero{
  position:relative;
  min-height:760px;
  display:flex;
  align-items:center;
  color:var(--champagne);
  background:
    radial-gradient(circle at 75% 20%,rgba(166,123,58,.28),transparent 34%),
    linear-gradient(100deg,rgba(22,17,13,.96) 10%,rgba(22,17,13,.76) 55%,rgba(22,17,13,.92) 100%),
    url('/assets/images/backpic/back-1.png') center/cover no-repeat;
  overflow:hidden;
  border-bottom:1px solid rgba(214,168,94,.2);
}
.hero .container{
  position:relative;
  z-index:2;
}
@media(max-width:991.98px){
  .hero{
    min-height:auto;
    padding-top:62px;
    padding-bottom:72px;
  }
}
.hero-tagline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(240,217,166,.10);
  border:1px solid rgba(240,217,166,.28);
  color:var(--champagne);
  padding:6px 16px;
  border-radius:999px;
  font-size:14px;
  letter-spacing:.12em;
  margin-bottom:28px;
}
.hero-tagline i{
  color:var(--gold);
  font-size:13px;
}
.hero h1{
  color:#FFF7EA;
  font-size:clamp(2.05rem,4vw,3.45rem);
  line-height:1.3;
  margin-bottom:24px;
  max-width:720px;
}
.hero h1 .grad-text{
  background:linear-gradient(120deg,var(--champagne),var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-lead{
  font-size:1.1rem;
  line-height:1.8;
  color:rgba(246,239,228,.88);
  max-width:600px;
  margin-bottom:34px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:34px;
}
.btn-gold,.btn-ghost{
  min-height:48px;
  padding:0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.05em;
  transition:all .25s ease;
}
.btn-gold{
  border:1px solid rgba(214,168,94,.6);
  background:linear-gradient(135deg,#E2BD7F,#C99A4E);
  color:#1E150C;
}
.btn-gold:hover{
  background:linear-gradient(135deg,#EBCE9B,#D6A85E);
  color:#1E150C;
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,0,0,.22);
}
.btn-ghost{
  border:1px solid rgba(240,217,166,.48);
  color:var(--champagne);
  background:rgba(240,217,166,.05);
}
.btn-ghost:hover{
  background:rgba(240,217,166,.14);
  color:#fff;
  border-color:var(--gold);
  transform:translateY(-2px);
}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid rgba(240,217,166,.18);
  border-bottom:1px solid rgba(240,217,166,.18);
  max-width:600px;
}
.hero-stat{
  padding:18px 8px;
  border-left:1px solid rgba(240,217,166,.18);
}
.hero-stat:first-child{
  border-left:none;
}
.hero-stat strong{
  display:block;
  font-family:var(--serif);
  font-size:1.4rem;
  color:var(--champagne);
  font-variant-numeric:tabular-nums;
}
.hero-stat span{
  display:block;
  font-size:13px;
  color:rgba(240,217,166,.72);
  margin-top:4px;
}
@media(max-width:640px){
  .hero-stat strong{font-size:1.2rem}
  .hero-stat span{font-size:12px}
  .hero .btn-gold,.hero .btn-ghost{
    width:100%;
  }
  .hero-stats{
    grid-template-columns:repeat(2,1fr);
  }
  .hero-stat:nth-child(3){
    border-left:none;
  }
  .hero-stat{
    border-bottom:1px solid rgba(240,217,166,.12);
  }
}
.hero-visual{
  background:rgba(22,17,13,.24);
  border:1px solid rgba(240,217,166,.2);
  border-radius:var(--radius-lg);
  padding:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.hero-visual .media-frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:16/10;
}
.hero-visual .media-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-media-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 36%,rgba(22,17,13,.8) 100%);
}
.hero-media-badge{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:rgba(22,17,13,.72);
  border:1px solid rgba(240,217,166,.24);
  backdrop-filter:blur(6px);
  border-radius:14px;
  padding:12px 16px;
}
.hero-media-badge .unit{
  color:var(--champagne);
  font-size:15px;
}
.hero-media-badge .unit strong{
  font-size:20px;
  color:#fff;
  margin-right:4px;
  font-family:var(--serif);
}
.hero-media-badge .live-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(62,107,93,.6);
  animation:livePulse 1.8s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(62,107,93,.50)}
  60%{box-shadow:0 0 0 10px rgba(62,107,93,0)}
  100%{box-shadow:0 0 0 0 rgba(62,107,93,0)}
}

/* ============ trust strip ============ */
.trust-strip{
  background:linear-gradient(180deg,#221713,#191210);
  border-top:1px solid rgba(214,168,94,.16);
  border-bottom:1px solid rgba(214,168,94,.14);
  padding:34px 0;
  color:var(--champagne);
}
.trust-strip .trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.trust-item{
  display:flex;
  gap:13px;
  align-items:center;
}
.trust-item i{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:14px;
  background:rgba(240,217,166,.1);
  border:1px solid rgba(214,168,94,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-size:18px;
}
.trust-item .trust-text strong{
  display:block;
  font-size:15px;
  color:#FFF2DB;
  font-weight:600;
  letter-spacing:.03em;
}
.trust-item .trust-text span{
  font-size:13px;
  color:rgba(240,217,166,.65);
  line-height:1.4;
  display:block;
  margin-top:1px;
}
@media(max-width:991.98px){
  .trust-grid{
    grid-template-columns:repeat(2,1fr)!important;
    row-gap:18px;
  }
}
@media(max-width:575.98px){
  .trust-grid{
    grid-template-columns:1fr!important;
  }
}

/* section heading */
.sec-head{
  max-width:700px;
  margin-bottom:46px;
}
.sec-head .eyebrow{
  display:inline-block;
  color:var(--wine);
  letter-spacing:.14em;
  font-size:14px;
  font-weight:600;
  margin-bottom:14px;
  border:1px solid rgba(122,46,42,.18);
  padding:5px 14px;
  border-radius:999px;
  background:rgba(122,46,42,.04);
}
.sec-head h2{
  font-size:clamp(1.7rem,2.6vw,2.35rem);
  margin-bottom:18px;
  color:var(--ink);
}
.sec-head p{
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}
.section-bg-darker{
  background:var(--deep-bg);
  color:#EDE5DA;
}
.section-bg-darker .sec-head h2{
  color:#FFF3DF;
}
.section-bg-darker .sec-head p{
  color:rgba(246,239,228,.72);
}
/* feature */
.feature-grid{
  display:grid;
  grid-template-columns:.9fr 1.6fr;
  gap:50px;
  align-items:start;
}
.feature-left{
  position:sticky;
  top:120px;
}
.feature-left h2{
  font-size:clamp(1.8rem,2.4vw,2.3rem);
  line-height:1.4;
  margin-bottom:16px;
}
.feature-left p{
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}
.feature-cards{
  display:grid;
  gap:18px;
}
.feature-card{
  background:var(--card-bg);
  border:1px solid var(--light-line);
  border-left:4px solid var(--gold);
  border-radius:var(--radius);
  padding:28px 30px;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:20px;
  align-items:flex-start;
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.feature-card:hover{
  transform:translateX(4px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.feature-card .f-icon{
  width:50px;
  height:50px;
  background:rgba(166,123,58,.1);
  border:1px solid rgba(166,123,58,.18);
  color:var(--copper);
  font-size:21px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
}
.feature-card h3{
  font-size:1.16rem;
  font-weight:600;
  margin-bottom:8px;
}
.feature-card p{
  color:var(--muted);
  line-height:1.75;
  font-size:15px;
}
@media(max-width:991.98px){
  .feature-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .feature-left{
    position:static;
  }
}

/* ==== how to section ===== */
.howto{
  background:var(--warm-bg);
  position:relative;
}
.steps-wrap{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  align-items:center;
}
.step-list{
  position:relative;
  padding-left:0;
  list-style:none;
  margin:0;
}
.step-list:before{
  content:"";
  position:absolute;
  left:25px;
  top:14px;
  bottom:14px;
  width:2px;
  background:repeating-linear-gradient(to bottom,var(--gold) 0 8px,transparent 8px 14px);
  opacity:.5;
}
.step-item{
  position:relative;
  padding:0 0 38px 76px;
}
.step-item:last-child{
  padding-bottom:0;
}
.step-num{
  position:absolute;
  left:0;
  top:0;
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--wine);
  color:var(--champagne);
  font-family:var(--serif);
  font-weight:600;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(166,123,58,.55);
  box-shadow:0 0 0 6px rgba(122,46,42,.08);
}
.step-item h3{
  font-size:1.2rem;
  margin-bottom:8px;
  font-weight:600;
}
.step-item p{
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.howto-media{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(214,168,94,.24);
}
.howto-media img{
  width:100%;
  height:auto;
  object-fit:cover;
}
@media(max-width:991.98px){
  .steps-wrap{
    grid-template-columns:1fr;
  }
}

/* latest updates */
.update-panel{
  background:var(--card-bg);
  border:1px solid var(--light-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.update-list{
  display:flex;
  flex-direction:column;
}
.update-item{
  display:block;
  padding:26px 30px;
  border-bottom:1px solid var(--light-line);
  transition:background .25s ease;
}
.update-item:last-child{
  border-bottom:none;
}
.update-item:hover{
  background:#FBF7F1;
}
#latest .col-lg-4.more-side{
  background:var(--deep-bg);
  border-radius:var(--radius-lg);
  color:rgba(246,239,228,.76);
  padding:36px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}
.more-side h3{
  color:#FFF2DC;
  font-size:1.5rem;
  line-height:1.5;
}
.more-side p{
  font-size:15px;
  line-height:1.7;
}
.more-side .btn-outline-light{
  border:1px solid rgba(240,217,166,.38);
  border-radius:999px;
  color:var(--champagne);
  padding:10px 23px;
  align-self:flex-start;
}
.more-side .btn-outline-light:hover{
  background:rgba(240,217,166,.14);
  color:#fff;
  border-color:var(--gold);
}
.item-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-bottom:9px;
}
.item-cate{
  background:rgba(166,123,58,.1);
  border:1px solid rgba(166,123,58,.17);
  color:var(--copper);
  font-size:13px;
  padding:3px 12px;
  border-radius:999px;
}
.item-date{
  color:#A2968A;
  font-size:13px;
  margin-left:auto;
}
.item-title{
  font-size:1.15rem;
  margin-bottom:7px;
  font-weight:600;
  color:var(--ink);
}
.item-preview{
  color:var(--muted);
  margin-bottom:12px;
  font-size:15px;
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.go-link{
  font-size:14px;
  color:var(--copper);
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}
.go-link:hover{
  color:var(--wine);
}
.go-link i{
  font-size:12px;
  transition:transform .2s ease;
}
.go-link:hover i{
  transform:translateX(4px);
}
.update-empty{
  padding:42px 20px;
  text-align:center;
  border:2px dashed var(--line);
  border-radius:18px;
  color:var(--muted);
  background:var(--warm-bg);
}
.update-empty i{
  font-size:34px;
  color:var(--gold);
  display:block;
  margin-bottom:12px;
}

/* success stories/reviews */
.review-content{
  background:var(--deep-bg);
  border-radius:var(--radius-lg);
  padding:40px 38px;
  color:rgba(246,239,228,.94);
  border:1px solid rgba(214,168,94,.24);
}
@media(max-width:575px){
  .review-content{
    padding:28px 20px;
  }
}
.review-content .review-text{
  font-size:1.4rem;
  line-height:1.6;
  font-family:var(--serif);
  color:#FFF3DF;
  margin-bottom:24px;
  font-weight:500;
}
.review-meta h4{
  color:var(--gold);
  font-size:1.05rem;
  margin-bottom:4px;
}
.review-meta p{
  color:rgba(240,217,166,.64);
  font-size:14px;
}
.review-goals{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.goal-card{
  background:var(--card-bg);
  border:1px solid var(--light-line);
  border-radius:var(--radius);
  padding:24px 22px;
  transition:box-shadow .25s ease,transform .25s ease;
}
.goal-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}
.goal-card .goal-icon{
  width:44px;
  height:44px;
  background:linear-gradient(135deg,rgba(166,123,58,.18),rgba(122,46,42,.12));
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--wine);
  font-size:20px;
  margin-bottom:14px;
}
.goal-card h4{
  font-size:1.08rem;
  margin-bottom:6px;
}
.goal-card p{
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}

/* pricing */
.pricing{
  background:var(--warm-bg);
}
.pricing-card{
  background:#fff;
  border:1px solid var(--light-line);
  border-radius:var(--radius-lg);
  padding:32px 30px;
  height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .3s ease,box-shadow .3s ease;
}
.pricing-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.pricing-card.recommend{
  background:linear-gradient(135deg,#FFF9EF,#F5E8D4);
  border-top:4px solid var(--gold);
}
.recommend-tag{
  position:absolute;
  top:-14px;
  left:30px;
  background:linear-gradient(120deg,var(--wine),#A9583B);
  color:#FFEED9;
  border-radius:999px;
  padding:5px 15px;
  font-size:13px;
  letter-spacing:.04em;
  font-weight:600;
}
.price-title{
  font-size:1.05rem;
  letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:6px;
}
.price-amount{
  font-family:var(--serif);
  font-size:2.6rem;
  font-weight:600;
  line-height:1.2;
  margin-bottom:16px;
}
.price-amount small{
  font-size:15px;
  color:var(--muted);
  font-weight:400;
  margin-left:6px;
}
.price-list{
  list-style:none;
  padding:0;
  margin:0 0 28px;
  flex:1;
}
.price-list li{
  display:flex;
  gap:10px;
  padding:8px 0;
  font-size:15px;
  color:#4A3F35;
}
.price-list i{
  color:var(--gold);
  font-size:15px;
  margin-top:5px;
}
.price-list li.off{
  color:#AA9E92;
}
.price-list li.off i{
  color:#D4C6B6;
}
.price-btn{
  border:1px solid rgba(166,123,58,.4);
  background:transparent;
  color:var(--copper);
  height:46px;
  width:100%;
  border-radius:999px;
  font-weight:600;
  transition:all .25s ease;
}
.price-btn:hover{
  background:rgba(166,123,58,.08);
  border-color:var(--copper);
}
.recommend-btn{
  border:0;
  background:linear-gradient(135deg,#E2BD7F,#CD9E52);
  color:#241A0F;
}
.recommend-btn:hover{
  color:#241A0F;
  background:linear-gradient(135deg,#EBCE9B,#DDAB61);
  transform:scale(1.02);
}
.price-note{
  text-align:center;
  font-size:14px;
  color:var(--muted);
  margin-top:26px;
  line-height:1.7;
}

/* FAQ */
.faq-wrap{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--light-line);
}
.accordion-item{
  background:var(--card-bg)!important;
  border-bottom:1px solid var(--light-line);
  border-radius:0 !important;
  overflow:hidden;
}
.accordion-item:last-child{
  border-bottom:none;
}
.accordion-button{
  box-shadow:none!important;
  background:var(--card-bg)!important;
  color:var(--ink)!important;
  font-size:16px;
  font-weight:600!important;
  padding:24px 28px;
  min-height:64px;
  display:flex;
  align-items:center;
  letter-spacing:.02em;
  position:relative;
  border-radius:0!important;
}
.accordion-button:not(.collapsed){
  color:var(--copper)!important;
  background:#FCF8F2!important;
}
.accordion-button:focus{
  box-shadow:0 0 0 4px rgba(214,168,94,.18)!important;
  z-index:1;
}
.accordion-button::after{
  content:"\f055";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  background:none;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  color:var(--gold);
  font-size:18px;
  transition:transform .3s ease!important;
}
.accordion-button:not(.collapsed)::after{
  content:"\f056";
  color:var(--wine)!important;
  transform:rotate(180deg);
}
.accordion-body{
  padding:6px 30px 30px 28px;
  color:var(--muted);
  font-size:15px;
  line-height:1.85;
}

/* final cta */
.final-cta{
  background:
    radial-gradient(circle at 80% 0%,rgba(214,168,94,.18),transparent 35%),
    linear-gradient(130deg,#17100E 0%,#25150D 100%);
}
.cta-box{
  border:1px solid rgba(240,217,166,.3);
  background:rgba(245,238,226,.04);
  border-radius:var(--radius-lg);
  padding:44px 40px;
  color:rgba(246,239,228,.9);
}
@media(max-width:575px){
  .cta-box{
    padding:32px 20px;
  }
}
.cta-box h2{
  color:#FFF1DC;
  font-size:clamp(1.6rem,2.4vw,2.3rem);
  margin-bottom:16px;
}
.cta-box p{
  color:rgba(240,217,166,.72);
  max-width:700px;
  margin-bottom:28px;
}
.btn-light-gold{
  background:var(--champagne);
  color:#2B1E15;
  padding:13px 34px;
  border-radius:999px;
  font-weight:600;
  transition:all .25s ease;
  border:1px solid rgba(255,250,240,.5);
  min-height:48px;
}
.btn-light-gold:hover{
  background:#fff;
  color:#241a12;
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(0,0,0,.25);
}

/* footer */
.site-footer{
  background:#120D0A;
  color:#C9BBA8;
  border-top:1px solid rgba(214,168,94,.2);
  padding-top:66px;
}
.footer-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  font-family:var(--serif);
  color:var(--champagne);
  font-size:22px;
  font-weight:600;
  margin-bottom:18px;
}
.footer-logo .mark{
  border:1px solid rgba(240,217,166,.5);
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  color:var(--gold);
}
.footer-desc{
  font-size:14px;
  color:#9E8E7B;
  line-height:1.8;
  margin-bottom:28px;
  max-width:260px;
}
.site-footer h4{
  font-size:15px;
  color:#EAD9BA;
  letter-spacing:.06em;
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(240,217,166,.14);
  font-weight:600;
}
.footer-link-list{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-link-list li{
  padding:5px 0;
}
.footer-link-list a{
  color:#AE9E88;
  font-size:14px;
  transition:color .2s ease,transform .2s ease;
  display:inline-block;
}
.footer-link-list a:hover{
  color:var(--gold);
  transform:translateX(3px);
}
.footer-note{
  color:#978A7C;
  font-size:14px;
  line-height:1.9;
}
.footer-bottom{
  border-top:1px solid rgba(240,217,166,.12);
  margin-top:50px;
  padding:24px 0;
  font-size:13px;
  color:#857768;
}
.footer-bottom .container{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:8px 16px;
}

/* backtop */
.backtop-btn{
  position:fixed;
  right:26px;
  bottom:28px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(214,168,94,.7);
  background:rgba(22,17,13,.9);
  color:var(--gold);
  font-size:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1020;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
}
.backtop-btn.show{
  opacity:1;
  visibility:visible;
}
.backtop-btn:hover{
  transform:translateY(-4px);
  color:var(--champagne);
  background:var(--deep-bg);
}
a:focus,.btn:focus,.accordion-button:focus{
  outline:none;
}
a:focus-visible,.btn:focus-visible,.accordion-button:focus-visible,.btn-gold:focus-visible,.btn-ghost:focus-visible{
  outline:3px solid rgba(214,168,94,.65);
  outline-offset:3px;
}

/* responsive general */
@media(max-width:991px){
  .review-goals{
    grid-template-columns:1fr;
    margin-top:22px;
  }
}
@media(max-width:767px){
  .footer-bottom .container{
    flex-direction:column;
    text-align:center;
  }
}

/* roulang page: article */
:root {
  --cu-base: #A67B3A;
  --cu-light: #D6A85E;
  --cu-high: #F0D9A6;
  --cu-wine: #7A2E2A;
  --cu-green: #3E6B5D;
  --cu-dark: #16110D;
  --cu-cream: #F7F2EA;
  --cu-card: #FFFFFF;
  --cu-border: #EFE6DA;
  --cu-text: #2C2420;
  --cu-weak: #73665B;
  --cu-faint: #8C8176;
  --cu-title: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --cu-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --cu-r-lg: 24px;
  --cu-r-md: 20px;
  --cu-r-pill: 999px;
  --cu-shade: 0 10px 30px rgba(40,25,15,.08);
  --cu-shade-hover: 0 24px 50px rgba(40,25,15,.14);
  --cu-space: 88px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--cu-sans);
  background: var(--cu-cream);
  color: var(--cu-text);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

a:hover {
  color: inherit;
}

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

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

:focus-visible {
  outline: 2px solid var(--cu-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: 1240px;
  padding-left: 24px;
  padding-right: 24px;
}

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

/* ===== 顶部导航 ===== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1080;
  background: rgba(22, 17, 13, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(240, 233, 214, .1);
  transition: background .3s ease, box-shadow .3s ease;
}

.site-header.is-scrolled {
  background: rgba(22, 17, 13, .97);
  box-shadow: 0 18px 40px rgba(14, 8, 3, .32);
}

.site-header.nav-open {
  background: rgba(22, 17, 13, .98);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 88px;
  transition: min-height .3s ease;
}

.site-header.is-scrolled .header-inner {
  min-height: 68px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-left {
  justify-self: start;
}

.nav-right {
  justify-self: end;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 15px;
  letter-spacing: .05em;
  color: #F0E6D2;
  border-radius: var(--cu-r-pill);
  transition: color .25s ease, background .25s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cu-light), var(--cu-high));
  border-radius: 4px;
  transform: translateX(-50%);
  transition: width .28s ease, opacity .28s ease;
  opacity: 0;
}

.nav-link:hover {
  color: var(--cu-high);
}

.nav-link:hover::after {
  width: 70%;
  opacity: 1;
}

.nav-link.active {
  color: var(--cu-high);
}

.nav-link.active::after {
  width: 46%;
  opacity: 1;
}

.site-brand {
  display: flex;
  justify-content: center;
  padding: 0 28px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  font-size: 21px;
  font-weight: 700;
  color: #F6EFE4;
  letter-spacing: 0;
  background: linear-gradient(135deg, #7A2E2A 0%, #5F3E26 54%, #A67B3A 100%);
  box-shadow: 0 0 0 2px rgba(214, 168, 94, .35), 0 10px 23px rgba(30, 16, 9, .36);
}

.brand-text {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: .03em;
  color: #F6EFE4;
  white-space: nowrap;
  font-family: var(--cu-title);
}

.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(214, 168, 94, .45);
  color: #F0E6D2;
  background: transparent;
  transition: background .2s ease, transform .2s ease;
}

.nav-toggle:hover {
  background: rgba(214, 168, 94, .16);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.nav-toggle svg path {
  stroke: #F0E6D2;
}

@media (max-width: 1199.98px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    min-height: 76px;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 2px;
  }

  .site-header.is-scrolled .header-inner {
    min-height: 68px;
  }

  .nav-toggle {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .site-brand {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    justify-self: center;
  }

  .brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    font-size: 18px;
  }

  .brand-text {
    font-size: 18px;
  }

  .nav-left,
  .nav-right {
    grid-column: 1 / -1;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 0 20px;
    border-top: 1px solid rgba(214, 168, 94, .25);
    margin-top: 12px;
  }

  .site-header.nav-open .nav-left,
  .site-header.nav-open .nav-right {
    display: flex;
  }

  .site-header.nav-open .nav-left {
    grid-row: 2;
  }

  .site-header.nav-open .nav-right {
    grid-row: 3;
  }

  .nav-left {
    justify-self: stretch;
  }

  .nav-right {
    justify-self: stretch;
  }

  .nav-link {
    font-size: 16px;
    padding: 13px 8px;
    border-bottom: 1px solid rgba(214, 168, 94, .12);
    border-radius: 12px;
    color: #F0E6D2;
  }

  .nav-link::after {
    display: none;
  }

  .nav-link:hover,
  .nav-link.active {
    background: rgba(214, 168, 94, .15);
    color: var(--cu-high);
  }
}

/* ===== 页脚 ===== */
.site-footer {
  position: relative;
  background: var(--cu-dark);
  color: #EADFCB;
  border-top: 1px solid rgba(214, 168, 94, .14);
}

.site-footer .footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.site-footer .mark {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #7A2E2A, #A67B3A);
  color: #F6EFE4;
  font-weight: 700;
  font-size: 19px;
  box-shadow: 0 0 0 1px rgba(214, 168, 94, .38);
}

.site-footer .footer-logo span:last-child {
  font-family: var(--cu-title);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #F6EFE4;
}

.footer-desc {
  color: #C5B7A4;
  line-height: 1.85;
  font-size: 15px;
  max-width: 330px;
}

.footer-note {
  color: #C5B7A4;
  font-size: 14px;
  line-height: 1.9;
  margin: 0;
}

.footer-note i {
  color: var(--cu-light);
}

.site-footer h4 {
  font-size: 16px;
  letter-spacing: .06em;
  color: #EADFCB;
  margin: 8px 0 18px;
  font-weight: 600;
  position: relative;
  padding-bottom: 12px;
}

.site-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 2px;
  background: var(--cu-light);
  border-radius: 3px;
}

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

.footer-link-list a {
  color: #C2B3A2;
  font-size: 15px;
  transition: color .2s ease, padding-left .2s ease;
}

.footer-link-list a::before {
  content: "·";
  color: var(--cu-light);
  margin-right: 8px;
}

.footer-link-list a:hover {
  color: var(--cu-high);
  padding-left: 4px;
}

.footer-bottom {
  margin-top: 54px;
  border-top: 1px solid rgba(214, 168, 94, .16);
  padding: 28px 0;
}

.footer-bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #A99B8A;
  font-size: 14px;
}

@media (max-width: 575.98px) {
  .footer-bottom .container {
    justify-content: center;
    text-align: center;
  }

  .site-footer {
    padding-top: 8px;
  }
}

/* ===== 文章页面 ===== */
.article-page {
  background: linear-gradient(180deg, #ECE3D3 0%, #F7F2EA 340px);
}

.article-head {
  position: relative;
  background:
    radial-gradient(circle at 12% 0%, rgba(214, 168, 94, .22), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(122, 46, 42, .09), transparent 30%),
    linear-gradient(180deg, #EAE0CC 0%, #F7F2EA 100%);
  padding: 60px 0 56px;
  overflow: hidden;
  border-bottom: 1px solid #E3D5BF;
}

.article-head::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(166, 123, 58, .22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 217, 166, .22), transparent 62%);
}

.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #8F7D69;
  margin-bottom: 24px;
}

.article-breadcrumb a {
  color: #8F7D69;
  transition: color .2s ease;
}

.article-breadcrumb a:hover {
  color: var(--cu-base);
}

.article-breadcrumb i {
  font-size: 12px;
  color: #B7A48C;
}

.article-breadcrumb .current {
  color: #5E4B3C;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
  white-space: nowrap;
}

.article-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 7px 16px;
  border-radius: 999px;
  color: #F6EFE4;
  background: linear-gradient(135deg, #7A2E2A, #A67B3A);
  box-shadow: 0 0 0 2px rgba(214, 168, 94, .26);
  margin-bottom: 22px;
}

.article-cat i {
  font-size: 12px;
}

.article-h1 {
  font-family: var(--cu-title);
  font-size: clamp(1.75rem, 4vw, 2.85rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: .02em;
  color: var(--cu-text);
  max-width: 920px;
  margin: 0 0 22px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  color: #8A7561;
  font-size: 14px;
  margin-bottom: 26px;
}

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

.article-meta .meta-item i {
  color: var(--cu-base);
}

.article-lead {
  position: relative;
  margin-top: 14px;
  max-width: 860px;
  padding: 18px 26px 18px 28px;
  background: rgba(255, 255, 255, .55);
  border-radius: 0 18px 18px 0;
  border-left: 3px solid var(--cu-light);
  color: #6A5A49;
  font-size: 1.02rem;
  line-height: 1.85;
}

.article-main {
  padding: 68px 0 38px;
}

.article-frame {
  max-width: 880px;
  margin: 0 auto;
}

.article-body {
  background: rgba(255, 255, 255, .82);
  border: 1px solid #E9DFCE;
  border-radius: 24px;
  box-shadow: var(--cu-shade);
  padding: clamp(28px, 5vw, 64px);
}

.article-body p,
.article-body > div,
.article-body > section {
  margin: 0 0 1.5em;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
  font-family: var(--cu-title);
  font-weight: 600;
  color: #32241C;
  margin: 1.8em 0 .7em;
  line-height: 1.45;
}

.article-body h1 {
  font-size: 1.7rem;
}

.article-body h2 {
  font-size: 1.5rem;
  padding-left: 16px;
  border-left: 4px solid var(--cu-light);
}

.article-body h3 {
  font-size: 1.28rem;
}

.article-body h4 {
  font-size: 1.1rem;
}

.article-body p {
  font-size: 1rem;
  line-height: 1.9;
  color: #3D322B;
}

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

.article-body ul li,
.article-body ol li {
  margin-bottom: .65em;
  line-height: 1.85;
  color: #3D322B;
}

.article-body ul {
  list-style: square;
}

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

.article-body blockquote {
  margin: 1.8em 0;
  padding: 22px 28px;
  background: #F5EEDF;
  border-radius: 18px;
  border-left: 4px solid var(--cu-light);
  color: #6A5A49;
  font-size: 1rem;
}

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

.article-body img {
  border-radius: 18px;
  margin: 1.8em auto;
  box-shadow: var(--cu-shade);
}

.article-body a {
  color: #9A6A2A;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.article-body a:hover {
  color: #6D4520;
}

.article-body code {
  background: #F0E6D7;
  color: #7A2E2A;
  padding: .15em .45em;
  border-radius: 6px;
  font-size: .95em;
}

.article-body pre {
  background: #231A13;
  color: #F0E6D2;
  padding: 20px 24px;
  border-radius: 16px;
  overflow-x: auto;
  margin: 1.8em 0;
}

@media (max-width: 575.98px) {
  .article-main {
    padding: 44px 0 24px;
  }

  .article-head {
    padding: 38px 0 36px;
  }

  .article-body {
    padding: 24px 20px;
  }

  .article-breakcrumb {
    font-size: 13px;
  }

  .article-h1 {
    font-size: 1.55rem;
  }

  .article-meta {
    gap: 10px 14px;
  }

  .article-lead {
    padding: 14px 16px;
    font-size: .96rem;
  }
}

/* ===== 文末信息 ===== */
.article-toolbar {
  padding: 32px 0 12px;
  max-width: 880px;
  margin: 0 auto;
}

.article-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  font-size: 14px;
  color: #6F5745;
  background: #F1E7D7;
  border: 1px solid #E1D0B8;
  border-radius: 999px;
  transition: all .22s ease;
}

.tag-pill::before {
  content: "#";
  color: var(--cu-base);
  font-weight: 700;
}

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

.tag-pill:hover::before {
  color: var(--cu-dark);
}

.article-back-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.btn-cu {
  min-height: 48px;
  padding: 12px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .04em;
  font-size: 15px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}

.btn-cu-primary {
  background: linear-gradient(135deg, #7A2E2A 0%, #A67B3A 72%, #D6A85E 112%);
  color: #FFF5E4;
  border: none;
  box-shadow: 0 14px 30px rgba(93, 47, 20, .24);
}

.btn-cu-primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 18px 40px rgba(122, 70, 20, .34);
  color: #FFFFFF;
}

.btn-cu-primary:active {
  transform: scale(.98);
}

.btn-cu-outline {
  background: transparent;
  color: #7A4B26;
  border: 1px solid #C7A66F;
  box-shadow: none;
}

.btn-cu-outline:hover {
  background: rgba(214, 168, 94, .12);
  color: #5E3C1F;
  border-color: var(--cu-base);
  transform: translateY(-2px);
}

.btn-cu-outline:active {
  transform: scale(.99);
}

/* ===== 内容未找到 ===== */
.not-found-block {
  text-align: center;
  padding: 76px 24px;
  max-width: 780px;
  margin: 0 auto;
}

.not-found-block i {
  font-size: 48px;
  color: var(--cu-light);
  margin-bottom: 18px;
  opacity: .9;
}

.not-found-block h2 {
  font-family: var(--cu-title);
  font-size: 1.9rem;
  color: var(--cu-text);
  margin: 12px 0;
}

.not-found-block p {
  color: var(--cu-weak);
  margin-bottom: 28px;
}

/* ===== 相关推荐 ===== */
.related-section {
  background: #EFE6D6;
  padding: 76px 0 84px;
  border-top: 1px solid #E2D2BB;
  border-bottom: 1px solid #E2D2BB;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 38px;
}

.related-section .section-title {
  font-family: var(--cu-title);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--cu-text);
  margin: 0;
  position: relative;
  padding-bottom: 14px;
}

.related-section .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--cu-light), var(--cu-wine));
  border-radius: 6px;
}

.section-subtitle {
  color: var(--cu-faint);
  font-size: 15px;
  margin: 0;
}

.related-grid {
  gap: 28px;
}

.related-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #E5D9C5;
  box-shadow: var(--cu-shade);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.related-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--cu-shade-hover);
  border-color: rgba(166, 123, 58, .55);
}

.related-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

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

.related-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(22, 17, 13, .45));
  pointer-events: none;
}

.related-cat {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  background: rgba(22, 17, 13, .72);
  backdrop-filter: blur(6px);
  color: #F0D9A6;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(240, 217, 166, .4);
  padding: 5px 14px;
  border-radius: 999px;
}

.related-content {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.related-content h3 {
  font-family: var(--cu-title);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--cu-text);
  line-height: 1.45;
  margin-bottom: 12px;
}

.related-content p {
  color: var(--cu-weak);
  font-size: 15px;
  line-height: 1.8;
  flex: 1;
}

.related-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: #8A5A24;
  font-size: 14px;
  margin-top: 20px;
}

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

.related-link:hover {
  color: #5E3C1F;
}

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

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

  .related-section .section-title {
    font-size: 1.45rem;
  }

  .related-grid {
    gap: 20px;
  }
}

/* ===== CTA 区块 ===== */
.article-cta {
  background: var(--cu-dark);
  color: #EADFCB;
  padding: 60px 0;
}

.article-cta .cta-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.article-cta h2 {
  font-family: var(--cu-title);
  font-size: 1.7rem;
  font-weight: 600;
  color: #F6EFE4;
  margin-bottom: 8px;
}

.article-cta p {
  color: #C8B9A6;
  margin: 0;
  max-width: 680px;
}

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

@media (max-width: 767.98px) {
  .article-cta .cta-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-buttons .btn-cu {
    width: 100%;
  }
}

/* ===== 单页区块通用 ===== */
@media (max-width: 991.98px) {
  :root {
    --cu-space: 64px;
  }
}

/* roulang page: category1 */
:root{
  --copper:#A67B3A;
  --copper-bright:#D6A85E;
  --champagne:#F0D9A6;
  --wine:#7A2E2A;
  --green:#3E6B5D;
  --night:#16110D;
  --night-soft:#241812;
  --ink:#2C2420;
  --muted:#73665B;
  --muted-l:#8C8176;
  --bg:#F7F2EA;
  --bg-deep:#EFE6DA;
  --card:#FFFFFF;
  --border:#EFE6DA;
  --gold-line:rgba(214,168,94,.35);
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xlg:24px;
  --radius-pill:999px;
  --shadow-sm:0 6px 18px rgba(40,25,15,.06);
  --shadow-md:0 10px 30px rgba(40,25,15,.09);
  --shadow-lg:0 24px 50px rgba(40,25,15,.12);
  --grad-brand:135deg,#7A2E2A 0%,#6c2a24 40%,#A67B3A 100%;
  --grad-gold:135deg,#D6A85E 0%,#F0D9A6 60%,#D6A85E 100%;
  --font-head:"Noto Serif SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",serif;
  --font-body:"Noto Sans SC",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .2s ease,border-color .2s ease,background .2s ease}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font-family:inherit}
.container{max-width:1260px}

/* 按钮系统 */
.btn{
  min-height:44px;
  border-radius:var(--radius-pill);
  padding:.62rem 1.45rem;
  font-size:.92rem;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:focus-visible{
  outline:3px solid rgba(214,168,94,.45);
  outline-offset:3px;
}
.btn-gold{
  background:linear-gradient(135deg,#C8964E,#E7C077);
  color:#241812;
  border-color:#E7C077;
  box-shadow:0 8px 20px rgba(166,123,58,.24);
}
.btn-gold:hover{
  background:linear-gradient(135deg,#D6A85E,#F0D9A6);
  transform:translateY(-2px);
  color:#241812;
  box-shadow:0 12px 28px rgba(166,123,58,.32);
}
.btn-outline-gold{
  background:transparent;
  color:#F0E6D2;
  border-color:rgba(240,217,166,.65);
}
.btn-outline-gold:hover{
  background:rgba(240,217,166,.1);
  color:#F0D9A6;
  border-color:#F0D9A6;
  transform:translateY(-2px);
}
.btn-outline-ink{
  background:transparent;
  color:var(--ink);
  border-color:#C9B49F;
}
.btn-outline-ink:hover{
  border-color:var(--copper);
  color:var(--copper);
  background:#FFF;
}
.btn:active{transform:scale(.98)}

/* 头部导航 */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1040;
  height:86px;
  background:rgba(22,17,13,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(240,217,166,.1);
  transition:height .3s ease,background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.site-header.scrolled{
  height:66px;
  background:rgba(22,17,13,.96);
  box-shadow:0 8px 30px rgba(0,0,0,.28);
  border-bottom-color:rgba(214,168,94,.2);
}
.header-inner{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1.2rem;
  position:relative;
}
.desktop-nav{
  display:flex;
  align-items:center;
  gap:.25rem;
}
.nav-left{justify-content:flex-start}
.nav-right{justify-content:flex-end}
.desktop-nav .nav-link{
  color:#F0E6D2;
  font-size:.93rem;
  font-weight:500;
  letter-spacing:.05em;
  padding:.5rem .7rem!important;
  border-radius:var(--radius-pill);
  position:relative;
  white-space:nowrap;
}
.desktop-nav .nav-link::after{
  content:"";
  position:absolute;
  left:1rem;right:1rem;bottom:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#D6A85E,#F0D9A6);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .28s ease;
}
.desktop-nav .nav-link:hover::after,
.desktop-nav .nav-link.active::after{
  transform:scaleX(1);
}
.desktop-nav .nav-link:hover{color:#F0D9A6}
.desktop-nav .nav-link.active{color:#D6A85E}
.brand-logo{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:#F6EFE4!important;
  max-width:220px;
  justify-self:center;
}
.brand-mark{
  width:38px;height:38px;
  border-radius:12px;
  background:linear-gradient(135deg,#7A2E2A,#A67B3A);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.15rem;
  color:#F6EFE4;
  border:1px solid rgba(240,217,166,.4);
  box-shadow:0 0 0 3px rgba(214,168,94,.12);
}
.brand-name{
  font-family:var(--font-head);
  font-size:1.18rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.25;
  white-space:nowrap;
  background:linear-gradient(120deg,#F6EFE4,#F0D9A6 70%,#D6A85E);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.navbar-toggler{
  display:none;
  border:none;
  background:transparent;
  width:46px;height:44px;
  padding:.5rem;
  border-radius:var(--radius-md);
  justify-self:end;
}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(214,168,94,.35);outline:none}
.navbar-toggler span{
  display:block;
  width:24px;height:2px;
  background:#F0D9A6;
  margin:5px auto;
  border-radius:2px;
  transition:transform .3s ease,opacity .3s ease;
}
.mobile-nav{
  display:none;
  position:fixed;
  inset:86px 0 auto 0;
  z-index:1030;
  background:rgba(22,17,13,.98);
  border-bottom:1px solid rgba(214,168,94,.25);
  padding:1.5rem 1.25rem 2rem;
  max-height:calc(100vh - 86px);
  overflow-y:auto;
}
.mobile-nav.show{display:block}
.mobile-nav a{
  display:block;
  padding:.8rem .75rem;
  color:#F0E6D2;
  font-size:1rem;
  border-radius:var(--radius-md);
  border-left:2px solid transparent;
}
.mobile-nav a:hover,
.mobile-nav a.active{
  color:#F0D9A6;
  background:rgba(214,168,94,.08);
  border-left-color:#D6A85E;
}
.mobile-nav .btn-mobile{
  margin-top:1.2rem;
  text-align:center;
  display:flex;
}

/* 分类页 Hero */
.category-hero{
  position:relative;
  padding-top:190px;
  padding-bottom:118px;
  background:linear-gradient(180deg,#16110D 0%,rgba(22,17,13,.72) 55%,#1e1510 100%);
  overflow:hidden;
}
.category-hero-bg{
  position:absolute;
  inset:0;
  background-image:url("/assets/images/backpic/back-1.png");
  background-size:cover;
  background-position:center 22%;
  opacity:.5;
  mix-blend-mode:luminosity;
}
.category-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,rgba(22,17,13,.92) 0%,rgba(22,17,13,.68) 45%,rgba(36,24,18,.5) 100%);
  z-index:1;
}
.category-hero .container{position:relative;z-index:2}
.crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  color:rgba(240,217,166,.82);
  font-size:.85rem;
  margin-bottom:1.4rem;
}
.crumb a{color:rgba(240,217,166,.7)}
.crumb a:hover{color:#F0D9A6}
.crumb i{font-size:.6rem;color:#A67B3A}
.crumb .current{color:#F0D9A6}
.hero-title{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.34;
  color:#F6EFE4;
  letter-spacing:.02em;
  margin-bottom:1.3rem;
}
.hero-title .gold{
  background:linear-gradient(120deg,#F0D9A6,#D6A85E 80%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-sub{
  color:rgba(246,239,228,.78);
  font-size:1rem;
  line-height:1.9;
  max-width:620px;
  margin-bottom:2rem;
  letter-spacing:.02em;
}
.breadcrumb-box{display:inline-block;margin-bottom:1.5rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-actions .btn{min-width:144px}
.hero-insight-card{
  background:linear-gradient(160deg,rgba(240,217,166,.1),rgba(22,17,13,.45));
  border:1px solid rgba(240,217,166,.28);
  border-radius:var(--radius-xlg);
  padding:1.8rem 1.6rem;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 22px 50px rgba(12,8,5,.4);
  position:relative;
  overflow:hidden;
}
.hero-insight-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,#7A2E2A,#D6A85E,#F0D9A6);
}
.insight-head{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:#F0D9A6;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:1.2rem;
}
.insight-head i{font-size:1rem;color:#D6A85E}
.insight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.insight-cell{
  background:rgba(240,217,166,.06);
  border:1px solid rgba(240,217,166,.12);
  border-radius:var(--radius-md);
  padding:.85rem .6rem;
  text-align:center;
}
.insight-cell b{
  display:block;
  font-size:1.5rem;
  font-family:var(--font-head);
  color:#F0D9A6;
  line-height:1.3;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.insight-cell span{
  font-size:.78rem;
  color:rgba(246,239,228,.68);
  line-height:1.4;
  display:block;
  margin-top:.2rem;
}
.insight-note{
  margin-top:1.2rem;
  background:rgba(62,107,93,.18);
  border:1px solid rgba(62,107,93,.36);
  border-radius:var(--radius-md);
  padding:.7rem .9rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.85rem;
  color:rgba(240,217,166,.9);
}
.insight-note .fa-solid{color:#F0D9A6}

/* 区块通用 */
.section{padding:98px 0}
.section-tight{padding:80px 0}
.section-dark{
  background:var(--night);
}
.section-head{
  margin-bottom:3.2rem;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.8rem;
  letter-spacing:.22em;
  color:var(--copper);
  font-weight:600;
  margin-bottom:1rem;
}
.kicker::before{
  content:"";
  width:28px;height:1px;
  background:var(--copper-bright);
}
.kicker.light{color:#D6A85E}
.section-head h2{
  font-family:var(--font-head);
  font-weight:600;
  font-size:clamp(1.55rem,2.8vw,2.2rem);
  line-height:1.45;
  color:var(--ink);
  margin-bottom:.8rem;
  letter-spacing:.01em;
}
.section-head.light h2{color:#F6EFE4}
.section-head p{
  color:var(--muted);
  font-size:.97rem;
  max-width:680px;
  line-height:1.85;
}
.section-head.light p{color:rgba(246,239,228,.7)}

/* 摘要区块 */
.overview-cols{
  display:grid;
  grid-template-columns:0.42fr .58fr;
  gap:64px;
  align-items:start;
}
.left-sticky{position:sticky;top:120px}
.intro-flow .card-text{color:var(--muted)}
.overview-list{
  list-style:none;
  padding:0;
  display:grid;
  gap:.75rem;
}
.overview-list li{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.35rem 1.5rem;
  display:flex;
  gap:1.1rem;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.overview-list li:hover{
  transform:translateX(5px);
  border-color:rgba(166,123,58,.4);
  box-shadow:var(--shadow-md);
}
.overview-icon{
  flex:0 0 52px;
  height:52px;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(122,46,42,.08),rgba(166,123,58,.12));
  border:1px solid rgba(166,123,58,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
  color:var(--copper);
}
.overview-list h3{
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
  margin-bottom:.3rem;
  font-family:var(--font-head);
}
.overview-list p{
  font-size:.9rem;
  color:var(--muted);
  margin:0;
  line-height:1.75;
}

/* 栏目卡 */
.channel-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-bottom:28px;
}
.channel-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xlg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  display:flex;
  flex-direction:column;
}
.channel-card:hover{
  box-shadow:var(--shadow-lg);
  border-color:rgba(214,168,94,.4);
}
.channel-card.dark{
  background:var(--night);
  color:var(--ink);
  border-color:#2e2218;
}
.channel-media{
  height:230px;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}
.channel-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(22,17,13,.55));
}
.channel-badge{
  position:absolute;
  top:18px;left:18px;
  z-index:2;
  background:rgba(22,17,13,.7);
  border:1px solid rgba(240,217,166,.5);
  border-radius:var(--radius-pill);
  padding:.24rem .9rem;
  color:#F0D9A6;
  font-size:.8rem;
  letter-spacing:.04em;
}
.channel-body{padding:1.7rem;display:flex;flex-direction:column;flex:1}
.channel-body h3{
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.2rem;
  margin-bottom:.6rem;
}
.channel-body p{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.85;
  flex:1;
  margin-bottom:1.2rem;
}
.channel-link{
  color:var(--copper);
  font-weight:500;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-bottom:1px solid transparent;
  padding-bottom:.2rem;
  align-self:flex-start;
}
.channel-link:hover{color:var(--copper);border-bottom-color:var(--copper)}
.channel-link i{transition:transform .2s ease}
.channel-link:hover i{transform:translateX(4px)}
.help-wide{
  background:radial-gradient(900px 240px at 85% 20%,rgba(122,46,42,.55),transparent 60%),linear-gradient(120deg,#241812,#16110D);
  border-radius:var(--radius-xlg);
  padding:2.2rem 2.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.2rem;
  border:1px solid rgba(214,168,94,.2);
  flex-wrap:wrap;
  position:relative;
  box-shadow:0 20px 45px rgba(20,12,8,.18);
}
.help-wide::before{
  content:"";
  position:absolute;
  left:0;top:18%;bottom:18%;
  width:3px;
  background:linear-gradient(180deg,#7A2E2A,#D6A85E);
}
.help-wide h3{
  font-family:var(--font-head);
  color:#F6EFE4;
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.4rem;
}
.help-wide p{
  color:rgba(246,239,228,.65);
  font-size:.92rem;
  max-width:580px;
  margin:0;
}
.help-link{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  min-width:170px;
  justify-content:center;
}

/* 时间线 */
.timeline-wrap{
  margin-top:3.5rem;
  position:relative;
}
.timeline-line{
  position:absolute;
  top:38px;
  left:4%;
  right:4%;
  height:2px;
  border-top:2px dashed rgba(166,123,58,.35);
}
.step-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  position:relative;
  counter-reset:step;
}
.step-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem 1.6rem 1.7rem;
  box-shadow:var(--shadow-sm);
  position:relative;
  transition:transform .25s ease,box-shadow .25s ease;
}
.step-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(166,123,58,.35);
}
.step-num{
  width:54px;height:54px;
  border-radius:50%;
  background:var(--wine);
  color:#F0D9A6;
  border:2px solid var(--copper-bright);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.15rem;
  margin-bottom:1.2rem;
  box-shadow:0 0 0 5px rgba(214,168,94,.1);
  font-variant-numeric:tabular-nums;
}
.step-item h3{
  font-size:1.05rem;
  font-weight:600;
  font-family:var(--font-head);
  margin-bottom:.55rem;
}
.step-item p{
  font-size:.9rem;
  color:var(--muted);
  margin:0;
  line-height:1.8;
}

/* 准则区 */
.values-inner{
  background:linear-gradient(160deg,#F0E7D8,#EADECB);
  border-radius:var(--radius-xlg);
  padding:3.5rem 3rem;
  border:1px solid #E5D6C0;
}
.value-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:24px;
  margin:2.2rem 0;
}
.value-cell{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(166,123,58,.2);
  border-radius:var(--radius-lg);
  padding:1.6rem 1.4rem;
  transition:transform .25s ease,box-shadow .25s ease;
}
.value-cell:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.value-icon{
  width:48px;height:48px;
  border-radius:14px;
  background:rgba(166,123,58,.14);
  border:1px solid rgba(166,123,58,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:var(--copper);
  margin-bottom:1rem;
}
.value-cell h3{font-size:.98rem;font-weight:600;font-family:var(--font-head);margin-bottom:.35rem}
.value-cell p{font-size:.86rem;color:var(--muted);line-height:1.75;margin:0}

/* FAQ */
.faq-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.accordion-item{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
}
.accordion-item:last-child{border-bottom:none}
.accordion-button{
  background:transparent;
  color:var(--ink);
  font-weight:600;
  font-family:var(--font-head);
  font-size:1rem;
  padding:1.4rem 1.8rem;
  box-shadow:none!important;
  border:none;
  position:relative;
  border-radius:0!important;
  min-height:60px;
  transition:color .2s ease,background .2s ease;
}
.accordion-button:hover{color:var(--copper);background:rgba(166,123,58,.04)}
.accordion-button:not(.collapsed){
  background:rgba(240,217,166,.1);
  color:var(--wine);
}
.accordion-button::after{
  content:"";
  background:none;
  width:28px;height:28px;
  border:1px solid rgba(166,123,58,.4);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  flex:0 0 28px;
  position:relative;
  margin-left:auto;
}
.accordion-button::before{
  content:"";position:absolute;
  right:-3px;top:50%;
}
.accordion-button::after{
  background:transparent;
  border-color:rgba(166,123,58,.38);
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  content:"\2b"!important;
  color:var(--copper);
  font-size:.85rem;
  line-height:26px;
  text-align:center;
}
.accordion-button:not(.collapsed)::after{
  content:"\f068"!important;
  background:rgba(166,123,58,.1);
}
.accordion-body{
  padding:.3rem 1.8rem 1.7rem;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.9;
  max-width:780px;
}

/* CTA */
.cta-band{
  background:linear-gradient(110deg,#16110D 0%,#241812 100%);
  position:relative;
  border-radius:var(--radius-xlg);
  overflow:hidden;
  padding:4rem 3rem;
  border:1px solid rgba(214,168,94,.16);
}
.cta-band::before{
  content:"";
  position:absolute;
  right:-100px;top:-100px;
  width:360px;height:360px;
  background:radial-gradient(circle,rgba(214,168,94,.16),transparent 68%);
  border-radius:50%;
}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{
  font-family:var(--font-head);
  font-weight:600;
  color:#F6EFE4;
  font-size:clamp(1.5rem,2.5vw,2rem);
  line-height:1.5;
  margin-bottom:.8rem;
}
.cta-band p{
  color:rgba(246,239,228,.7);
  max-width:640px;
  margin-bottom:2rem;
  font-size:.95rem;
}
.cta-actions{display:flex;flex-wrap:wrap;gap:.95rem}

/* 页脚 */
.site-footer{
  background:var(--night);
  color:rgba(246,239,228,.78);
  padding-top:5rem;
  margin-top:0;
  border-top:1px solid rgba(214,168,94,.15);
}
.site-footer .footer-logo{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:1.2rem;
}
.site-footer .footer-logo .mark{
  width:40px;height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,#7A2E2A,#A67B3A);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);
  font-weight:700;
  color:#F6EFE4;
  border:1px solid rgba(240,217,166,.4);
}
.footer-logo span:last-child{
  font-family:var(--font-head);
  color:#F6EFE4;
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:.02em;
}
.footer-desc{
  color:rgba(246,239,228,.62);
  font-size:.92rem;
  line-height:1.85;
  max-width:360px;
}
.footer-note{margin-top:1.3rem}
.footer-note p{font-size:.9rem;color:rgba(246,239,228,.65);margin-bottom:.4rem}
.site-footer h4{
  color:#F0D9A6;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.12em;
  margin-bottom:1.3rem;
  font-family:var(--font-head);
  position:relative;
  padding-bottom:.7rem;
}
.site-footer h4::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:28px;height:2px;
  background:var(--copper);
  border-radius:2px;
}
.footer-link-list{
  list-style:none;
  padding:0;
  display:grid;
  gap:.68rem;
}
.footer-link-list a{
  color:rgba(246,239,228,.68);
  font-size:.9rem;
  transition:color .2s ease,padding-left .2s ease;
}
.footer-link-list a:hover{
  color:#F0D9A6;
  padding-left:4px;
}
.footer-bottom{
  margin-top:3.5rem;
  border-top:1px solid rgba(240,217,166,.1);
  padding:1.5rem 0;
  font-size:.84rem;
  color:rgba(246,239,228,.52);
}
.footer-bottom .container{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.25rem 2rem;
}

/* 返回顶部 */
.back-top{
  position:fixed;
  right:24px;bottom:28px;
  z-index:999;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(22,17,13,.88);
  border:1px solid rgba(214,168,94,.5);
  color:#F0D9A6;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease,background .3s ease,transform .3s ease;
}
.back-top.show{opacity:1;visibility:visible}
.back-top:hover{background:#2c1f17;transform:translateY(-3px)}
.back-top:focus-visible{outline:3px solid rgba(240,217,166,.5);outline-offset:3px}

/* 响应式 */
@media (min-width:1200px){
  .site-header{transform:none}
}
@media (max-width:1199px){
  .desktop-nav{display:none}
  .navbar-toggler{display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
  .mobile-nav.show{display:block}
}
@media (max-width:991px){
  .section{padding:72px 0}
  .overview-cols{grid-template-columns:1fr;gap:36px}
  .left-sticky{position:static}
  .channel-row{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr 1fr}
  .step-grid{grid-template-columns:1fr 1fr;row-gap:60px}
  .timeline-line{display:none}
  .hero-insight-card{margin-top:2.5rem}
}
@media (max-width:767px){
  .site-header{
    height:70px;
  }
  .mobile-nav{inset:70px 0 auto 0;max-height:calc(100vh - 70px)}
  .category-hero{padding-top:140px;padding-bottom:64px}
  .section{padding:56px 0}
  .section-tight{padding:48px 0}
  .hero-actions .btn{width:100%}
  .brand-name{font-size:1.05rem}
  .brand-mark{width:34px;height:34px;font-size:1rem;border-radius:10px}
  .channel-grid,.step-grid,.value-grid,.insight-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .cta-band{padding:2.4rem 1.6rem;border-radius:18px}
  .cta-actions .btn{width:100%}
  .help-wide{padding:1.8rem 1.5rem}
  .help-wide .btn{width:100%}
  .section-head h2{font-size:1.5rem}
  .section-head p{font-size:.9rem}
  .footer-bottom .container{justify-content:center;text-align:center}
}

@media (max-width:520px){
  .insight-grid{grid-template-columns:1fr 1fr}
  .insight-cell:nth-child(3){grid-column:1/-1}
  .brand-name{font-size:.96rem;letter-spacing:.01em}
  .header-inner{gap:.4rem}
}

/* roulang page: category2 */
:root{
  --font-body:'Noto Sans SC','Source Han Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-head:'Noto Serif SC','Source Han Serif SC','Songti SC',serif;
  --gold:#B08643;
  --gold-light:#D6A85E;
  --gold-bright:#F0D9A6;
  --wine:#7A2E2A;
  --green:#3E6B5D;
  --deep:#16110D;
  --deep-2:#201812;
  --warm:#F7F2EA;
  --paper:#FFFDF8;
  --border:#E5D9C8;
  --border-2:#D8C7B1;
  --text:#2C2420;
  --muted:#73665B;
  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:24px;
  --shadow-sm:0 6px 18px rgba(40,25,15,.05);
  --shadow-md:0 12px 30px rgba(40,25,15,.09);
  --shadow-lg:0 24px 55px rgba(40,25,15,.16);
}
html{scroll-behavior:smooth}
body{background:var(--warm);color:var(--text);font-family:var(--font-body);line-height:1.75;letter-spacing:.01em}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--wine)}
img{max-width:100%;height:auto}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--text);font-weight:600}
h1{letter-spacing:.02em}
::selection{background:rgba(214,168,94,.35)}

/* ========== Buttons ========== */
.btn{border-radius:999px;padding:.85rem 1.9rem;font-weight:500;letter-spacing:.05em;font-size:1rem;line-height:1.4;border:1px solid transparent;transition:.25s ease;min-height:48px}
.btn:focus,.btn:active{box-shadow:0 0 0 .35rem rgba(214,168,94,.18)}
.btn-gold{background:linear-gradient(135deg,#F0D9A6 0%,#D6A85E 50%,#B08643 100%);color:#231A11;border:none;box-shadow:0 8px 24px rgba(150,105,48,.22)}
.btn-gold:hover{color:#231A11;transform:translateY(-2px);box-shadow:0 15px 35px rgba(150,105,48,.3)}
.btn-gold:active{transform:scale(.98)}
.btn-gold:focus{color:#231A11}
.btn-ghost-gold{border:1px solid rgba(224,190,132,.5);color:var(--gold-bright);background:rgba(214,168,94,.06)}
.btn-ghost-gold:hover{background:rgba(214,168,94,.16);color:#fff;transform:translateY(-2px)}
.btn-ghost-gold:active{transform:scale(.98)}
.btn-warm{border:1px solid var(--border-2);color:#4d4034;background:#fff}
.btn-warm:hover{border-color:var(--gold);color:#2c2420;transform:translateY(-2px)}
.cta-link{display:inline-flex;align-items:center;gap:.55rem;color:var(--wine);font-weight:600}
.cta-link i{transition:transform .25s ease}
.cta-link:hover{color:var(--gold)}
.cta-link:hover i{transform:translateX(6px)}

/* ========== Section spacing ========== */
.section{padding:96px 0}
.section-tight{padding:70px 0}
.section-deep{background:var(--deep);color:#f2ebe0}
.section-deep h1,.section-deep h2,.section-deep h3{color:#fff6e8}
.gold-text{background:linear-gradient(100deg,#F0D9A6,#C58A3E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.section-label{display:inline-flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:600;letter-spacing:.18em;color:#A2753C;text-transform:uppercase}
.section-label:before{content:"";width:30px;height:2px;background:linear-gradient(90deg,var(--gold-light),rgba(214,168,94,0))}
.section-label.has-line:after{content:"";width:60px;height:1px;background:linear-gradient(90deg,var(--gold-light),rgba(214,168,94,0))}
.section-title{font-size:clamp(1.8rem,3vw,2.45rem);margin:.3rem 0 .6rem}
.section-intro{color:var(--muted);font-size:1.05rem;max-width:820px;margin-bottom:0}

/* ========== Header ========== */
.site-header{position:fixed;left:0;top:0;width:100%;z-index:1050;background:linear-gradient(180deg,rgba(12,9,7,.92),rgba(18,14,11,.76));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(214,168,94,.1);transition:background .35s ease,box-shadow .35s ease}
.site-header.is-scrolled{background:#16110D;box-shadow:0 12px 30px rgba(15,11,8,.45)}
.site-header.is-scrolled .header-inner{height:66px}
.header-inner{height:86px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:0;transition:height .35s ease}
.header-tools{display:flex;align-items:center;gap:.75rem;min-width:0;height:100%}
.header-tools-left{justify-content:flex-start}
.header-tools-right{justify-content:flex-end}
.brand-logo{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;text-decoration:none;min-width:0;white-space:nowrap}
.brand-logo:hover{text-decoration:none}
.logo-mark{width:46px;height:46px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--wine),#3A2320 55%,var(--gold-light));color:var(--gold-bright);font-family:var(--font-head);font-weight:700;font-size:1.4rem;letter-spacing:0;box-shadow:inset 0 0 0 1px rgba(240,217,166,.38),0 8px 18px rgba(0,0,0,.25);position:relative}
.logo-mark i{font-size:1rem;color:var(--gold-bright)}
.logo-name{font-family:var(--font-head);font-weight:600;font-size:clamp(1rem,1.7vw,1.18rem);letter-spacing:.04em;color:#F6EFE4}
.header-status{display:inline-flex;align-items:center;gap:.55rem;color:rgba(246,239,228,.72);font-size:.86rem;border:1px solid rgba(240,217,166,.22);background:rgba(240,217,166,.05);border-radius:999px;padding:.4rem .85rem;white-space:nowrap}
.header-status:hover{color:var(--gold-bright);border-color:rgba(240,217,166,.42)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(62,107,93,.7);animation:breath 2.2s infinite}
@keyframes breath{0%,100%{opacity:1}50%{opacity:.4}}

/* Desktop nav*/
.desktop-nav{display:none;align-items:center;gap:clamp(1.15rem,2vw,2.3rem);list-style:none;margin:0;padding:0;height:100%}
.desktop-nav .nav-item{position:relative;display:inline-flex;align-items:center;min-height:44px;color:rgba(246,239,228,.76);font-size:.98rem;letter-spacing:.03em;padding:.2rem .05rem;transition:color .25s ease}
.desktop-nav .nav-item:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--gold-light),var(--gold));transform:scaleX(0);transform-origin:left center;transition:transform .28s ease;border-radius:2px}
.desktop-nav .nav-item:hover{color:var(--gold-bright)}
.desktop-nav .nav-item:hover:before,.desktop-nav .nav-item.active:before{transform:scaleX(1)}
.desktop-nav .nav-item.active{color:var(--gold-bright)}
.mobile-toggle{width:44px;height:44px;border:1px solid rgba(240,217,166,.24);background:rgba(240,217,166,.05);border-radius:12px;color:var(--gold-bright);font-size:1.2rem;display:inline-flex;align-items:center;justify-content:center;transition:.25s ease}
.mobile-toggle:hover{border-color:var(--gold-light);color:#fff;background:rgba(214,168,94,.14)}

/* Mobile menu */
.mobile-menu{position:fixed;top:86px;left:0;width:100%;z-index:1040;background:linear-gradient(180deg,var(--deep),#251B14);border-bottom:1px solid rgba(240,217,166,.14);box-shadow:0 30px 60px rgba(0,0,0,.4);padding:1.2rem 0 1.8rem}
.mobile-menu-inner{display:flex;flex-direction:column}
.mobile-menu-link{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;color:#F2E8D8;font-size:1.08rem;font-weight:500;border-bottom:1px dashed rgba(240,217,166,.12)}
.mobile-menu-link i{color:var(--gold)}
.mobile-menu-link.active,.mobile-menu-link:hover{color:var(--gold-bright);text-decoration:none}
.mobile-menu-note{margin-top:1.2rem;color:rgba(246,239,228,.58);font-size:.88rem}
@media (max-width:1199.98px){
  .desktop-nav{display:none!important}
}
@media (min-width:1200px){
  .mobile-toggle{display:none}
  .desktop-nav{display:flex}
}

/* ========== Page hero ========== */
.page-hero{position:relative;background:var(--deep);color:#F2EADA;padding:170px 0 84px;overflow:hidden}
.page-hero .bg-item{position:absolute;inset:0;background:url('/assets/images/backpic/back-2.png') center/cover no-repeat;opacity:.5}
.page-hero .bg-item:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,11,8,.98) 0%,rgba(17,13,10,.9) 45%,rgba(28,20,15,.72) 100%)}
.page-hero .container{position:relative;z-index:2}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:2.1rem;color:rgba(246,239,228,.58);font-size:.9rem}
.crumb a{color:rgba(246,239,228,.7)}
.crumb a:hover{color:var(--gold-bright)}
.crumb i{font-size:.75rem;color:var(--gold)}
.crumb .current{color:var(--gold-bright);font-weight:500}
.hero-title{color:#fff8EC;font-size:clamp(2rem,4vw,3.3rem);line-height:1.28;margin:.7rem 0 1.1rem}
.hero-lead{font-size:1.12rem;color:rgba(246,239,228,.78);max-width:58ch;line-height:1.85}
.hero-chips{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.6rem}
.hero-chip{border:1px solid rgba(240,217,166,.24);background:rgba(240,217,166,.05);border-radius:999px;color:#EBDDBB;padding:.55rem 1.1rem;font-size:.88rem;position:relative;padding-left:1.45rem}
.hero-chip:before{content:"";position:absolute;left:.8rem;top:12px;width:5px;height:5px;border-radius:50%;background:var(--gold-light)}
.hero-cover{position:relative;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 28px 60px rgba(0,0,0,.3);border:1px solid rgba(240,217,166,.24)}
.hero-cover img{width:100%;height:340px;object-fit:cover;display:block}
.hero-cover-caption{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(16,11,8,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;border:1px solid rgba(240,217,166,.18);padding:1rem 1.1rem;color:#f2e8d3}
.hero-cover-caption strong{color:#fff;font-size:1.05rem;display:block;font-weight:600}
.hero-cover-caption span{font-size:.84rem;color:rgba(242,232,211,.7)}
.pulse-pin{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:.45rem;box-shadow:0 0 0 0 rgba(62,107,93,.8);animation:breath 2.4s infinite}

/* ========== Reading direction ========== */
.direction-area{background:var(--warm)}
.direction-map{display:flex;flex-direction:column;gap:16px;margin-top:1.4rem}
.direction-row{display:flex;align-items:flex-start;justify-content:space-between;border-left:2px solid;border-image:linear-gradient(180deg,var(--gold-light),#F2E1C0) 1;border-radius:0;padding:.7rem 1.3rem 1.1rem;position:relative}
.direction-row:after{content:"";position:absolute;left:-6px;top:1.4rem;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--gold)}
.direction-text{max-width:78%}
.direction-text h3{font-size:1.18rem;margin-bottom:.4rem;color:var(--text);font-weight:600}
.direction-text p{color:var(--muted);font-size:.95rem;margin:0;line-height:1.75}
.direction-index{min-width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--wine),#5B2222);color:var(--gold-bright);font-family:var(--font-head);font-size:1.25rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(74,24,22,.15);border:1px solid rgba(240,217,166,.22)}
.topic-cards{display:flex;flex-direction:column;gap:1.05rem}
.topic-card{display:flex;gap:1.15rem;align-items:flex-start;background:var(--paper);border:1px solid var(--border);border-radius:20px;padding:1.35rem;box-shadow:var(--shadow-sm);transition:.3s ease}
.topic-card:hover{border-color:var(--gold-light);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.topic-icon{width:52px;height:52px;min-width:52px;border-radius:17px;background:#FBF3E6;border:1px solid rgba(214,168,94,.42);color:#9F713B;font-size:1.3rem;display:inline-flex;align-items:center;justify-content:center}
.topic-card h3{font-size:1.25rem;margin-bottom:.45rem}
.topic-card p{color:var(--muted);font-size:.96rem;margin:0;line-height:1.75}
.topic-link{margin-left:auto;align-self:center;min-width:46px;height:46px;border-radius:50%;border:1px solid var(--border-2);display:inline-flex;align-items:center;justify-content:center;color:var(--gold);transition:.25s ease}
.topic-link:hover{background:var(--gold);color:#fff;border-color:var(--gold);text-decoration:none}
@media(max-width:991px){
  .topic-card{flex-direction:row;flex-wrap:wrap}
  .topic-link{margin-left:0}
}

/* ========== Info / latest ========== */
.info-area{background:#EEE7DC}
.info-heading-row{margin-bottom:2rem}
.info-note{display:flex;gap:.85rem;align-items:flex-start;color:var(--muted);background:rgba(255,255,255,.42);border-radius:14px;padding:.9rem 1rem;font-size:.9rem;border:1px dashed #CBB89D}
.info-note i{color:var(--gold);font-size:1rem;margin-top:.3rem}
.news-list{display:flex;flex-direction:column;gap:1.15rem}
.info-card{background:var(--paper);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:.35s ease;margin-bottom:0}
.info-card:hover{border-color:rgba(214,168,94,.6);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.info-card .info-thumb-wrap{height:100%;min-height:170px;position:relative;overflow:hidden;background:var(--border)}
.info-card .info-thumb{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .45s ease}
.info-card:hover .info-thumb{transform:scale(1.06)}
.info-card .info-thumb-bg{display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--gold)}
.info-text{padding:1.65rem 1.5rem}
.info-cat{display:inline-block;font-size:.78rem;letter-spacing:.05em;font-weight:600;color:var(--wine);background:rgba(122,46,42,.08);padding:.28rem .75rem;border-radius:999px;margin-right:.55rem}
.info-time{font-size:.85rem;color:var(--muted);display:inline-flex;align-items:center;gap:.35rem}
.info-card h3{font-size:1.35rem;font-weight:600;line-height:1.45;margin:.8rem 0 .55rem}
.info-card h3 a{color:var(--text)}
.info-card h3 a:hover{color:var(--gold)}
.info-summary{color:var(--muted);font-size:.98rem;margin:0 0 1rem;line-height:1.75}
.read-more{display:inline-flex;align-items:center;gap:.45rem;color:#9A6E30;font-weight:600;font-size:.9rem}
.read-more i{transition:transform .22s ease}
.read-more:hover i{transform:translateX(5px)}
.card-link-overlay{position:absolute;inset:0;z-index:1}
@media(max-width:767px){
  .info-card .info-thumb-wrap{height:160px;position:relative}
}

/* Info aside */
.info-aside{position:sticky;top:110px}
.aside-box{background:var(--paper);border:1px solid var(--border);border-radius:20px;padding:1.5rem;margin-bottom:1.2rem;box-shadow:var(--shadow-sm)}
.aside-box .subtitle{display:flex;align-items:center;gap:.45rem;font-family:var(--font-head);font-weight:600;font-size:1.15rem;margin-bottom:.2rem}
.aside-box .subtitle small{font-family:var(--font-body);font-weight:400;color:var(--muted);font-size:.85rem}
.aside-rule{height:2px;background:var(--border);overflow:hidden;border-radius:2px;margin:1rem 0 1.1rem;position:relative}
.aside-rule:after{content:"";position:absolute;width:66px;top:0;bottom:0;background:linear-gradient(90deg,var(--gold-light),var(--gold))}
.aside-list{list-style:none;margin:0;padding:0}
.aside-list li{border-bottom:1px dashed var(--border)}
.aside-list li:last-child{border-bottom:0}
.aside-list a{display:flex;align-items:center;justify-content:space-between;padding:.85rem .15rem;color:#4d4034;font-size:.95rem;transition:.24s ease;border-radius:6px}
.aside-list a i{color:var(--gold);font-size:.85rem;opacity:.8}
.aside-list a:hover{color:var(--gold);text-decoration:none;padding-left:.5rem;background:rgba(214,168,94,.06)}
.aside-tip{background:linear-gradient(145deg,#211711,#1D1712);border-radius:20px;padding:1.5rem;color:#F2E8D8;position:relative;overflow:hidden}
.aside-tip:before{content:"";position:absolute;right:-24px;top:-24px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(214,168,94,.3),transparent 70%)}
.aside-tip .mini-kicker{letter-spacing:.12em;color:var(--gold-bright);font-size:.8rem;font-weight:600}
.aside-tip h4{color:#fff;font-size:1.1rem;margin:.5rem 0 .6rem}
.aside-tip p{color:rgba(246,239,228,.66);font-size:.88rem;line-height:1.65;margin-bottom:.8rem}
@media(max-width:991.98px){.info-aside{position:static;margin-top:1.8rem}}

/* ========== Reading rhythm ========== */
.rhythm-area{background:var(--deep);color:#F0E9DF}
.rhythm-card{background:rgba(255,255,255,.028);border:1px solid rgba(240,217,166,.18);border-radius:26px;padding:clamp(1.8rem,4vw,3.3rem);position:relative;overflow:hidden}
.rhythm-card:before{content:"";position:absolute;width:340px;height:340px;border:1px dashed rgba(214,168,94,.2);right:-100px;bottom:-100px;border-radius:50%}
.rhythm-list{margin-top:1.4rem;display:flex;flex-direction:column;gap:0}
.rhythm-item{display:flex;gap:1rem;padding:.95rem 0;border-bottom:1px dashed rgba(240,217,166,.13)}
.rhythm-item:last-child{border-bottom:0}
.rhythm-item .time{font-family:var(--font-head);color:var(--gold-bright);font-weight:600;font-size:.95rem;white-space:nowrap;min-width:80px}
.rhythm-item p{margin:0;color:rgba(246,239,228,.76);font-size:.96rem;line-height:1.7}
.rhythm-note{display:flex;align-items:center;gap:20px;background:rgba(0,0,0,.2);border-left:3px solid var(--gold-light);border-radius:16px;padding:1.2rem 1.3rem;margin-top:1.2rem;color:rgba(246,239,228,.8)}
.rhythm-note i{color:var(--gold-light);font-size:1.6rem}
.rhythm-note p{margin:0;font-size:.96rem;line-height:1.7}
@media(max-width:575px){
  .rhythm-item{flex-direction:column;gap:.35rem}
}

/* ========== FAQ ========== */
.faq-area{background:#FFFBF5;position:relative}
.faq-title-wrap{text-align:center;max-width:760px;margin:0 auto 2.6rem}
.faq-wrap{max-width:920px;margin:0 auto}
.accordion-item{border:1px solid var(--border)!important;background:#fff!important;border-radius:18px!important;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.accordion-button{background:#fff!important;color:var(--text)!important;font-size:1.08rem;font-weight:600;font-family:var(--font-head);box-shadow:none!important;padding:1.25rem 3.2rem 1.25rem 1.4rem;border-radius:18px!important}
.accordion-button:hover{background:#FBF4E8!important}
.accordion-button:not(.collapsed){color:var(--wine)!important}
.accordion-button:focus{outline:none}
.accordion-button:after{background-image:none!important;font-family:"Font Awesome 6 Free";font-weight:900;content:"\f067";color:var(--gold);font-size:1rem;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:rgba(214,168,94,.08);border-radius:50%;transition:.3s ease;right:1.1rem}
.accordion-button:not(.collapsed):after{transform:rotate(135deg);content:"\f067";color:#fff;background:var(--wine)}
.accordion-body{padding:0 1.45rem 1.35rem;color:var(--muted);font-size:.98rem;line-height:1.8}

/* ========== CTA ========== */
.cta-strip{background:var(--warm);padding:70px 0 96px}
.cta-card{background:linear-gradient(120deg,#221812,#16110D);border:1px solid rgba(240,217,166,.22);border-radius:30px;color:#F1E7D4;padding:clamp(1.8rem,4vw,3.6rem);position:relative;overflow:hidden}
.cta-card:after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(176,134,67,.34),transparent 68%)}
.cta-card h2{color:#fff8e9;font-size:clamp(1.6rem,3vw,2.6rem);max-width:620px}
.cta-card p{color:rgba(246,239,228,.68);max-width:620px;font-size:1.02rem}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.8rem;position:relative;z-index:2;padding-top:.9rem}

/* ========== Footer ========== */
.site-footer{background:var(--deep);color:rgba(242,232,211,.72);padding-top:4.4rem;border-top:1px solid rgba(214,168,94,.18)}
.site-footer h4{color:#F6EFE4;font-size:1.02rem;letter-spacing:.08em;margin-bottom:1.15rem;font-weight:600;display:flex;align-items:center;gap:.55rem}
.site-footer h4:before{content:"";width:2px;height:16px;background:var(--gold-light);border-radius:2px;display:inline-block}
.footer-logo{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.footer-logo .mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--wine),#574050);color:var(--gold-bright);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;border:1px solid rgba(240,217,166,.38);font-size:1.1rem}
.footer-logo span:last-child{font-family:var(--font-head);color:#fff8EF;font-weight:600;font-size:1.12rem;letter-spacing:.03em}
.footer-desc{color:rgba(246,239,228,.65);font-size:.95rem;line-height:1.85;max-width:90%}
.footer-link-list{list-style:none;padding:0;margin:0}
.footer-link-list li{margin-bottom:.7rem}
.footer-link-list a{color:rgba(242,232,211,.67);font-size:.94rem;display:inline-flex;align-items:center;gap:.55rem;transition:.22s ease;padding:.15rem 0}
.footer-link-list a:before{content:"\f105";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.75rem;color:var(--gold)}
.footer-link-list a:hover{color:var(--gold-bright);text-decoration:none;padding-left:.45rem}
.footer-note{color:rgba(246,239,228,.55);font-size:.9rem;line-height:1.75;margin-bottom:.9rem}
.footer-note p{margin:0}
.footer-note i{color:var(--gold);width:20px}
.footer-bottom{border-top:1px solid rgba(240,217,166,.12);margin-top:3rem;padding:1.3rem 0;color:rgba(246,239,228,.45);font-size:.85rem}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
@media(max-width:767px){.footer-bottom .container{flex-direction:column}}

/* ========== misc ========== */
.back-top{position:fixed;right:22px;bottom:26px;z-index:900;width:46px;height:46px;border-radius:14px;background:var(--deep);color:var(--gold-bright);border:1px solid rgba(240,217,166,.5);display:inline-flex;align-items:center;justify-content:center;font-size:1rem;opacity:0;visibility:hidden;transition:.3s ease}
.back-top.show{opacity:1;visibility:visible}
.back-top:hover{background:#2a1f18;color:#fff}
:focus-visible{outline:3px solid rgba(214,168,94,.55);outline-offset:2px;border-radius:4px}
@media(max-width:991px){
  .section{padding:72px 0}
  .hero-title{font-size:2rem}
  .page-hero{padding:140px 0 66px}
  .mobile-menu{top:86px}
}
@media(max-width:767px){
  .section{padding:56px 0}
  .section-tight{padding:44px 0}
  .page-hero{padding-top:126px}
  .info-card h3{font-size:1.2rem}
  .topic-card{flex-wrap:wrap;gap:.8rem}
  .topic-link{margin-left:0}
  .btn{width:auto}
  .cta-buttons .btn{width:100%}
  .page-hero{padding-bottom:50px}
}
@media(max-width:575px){
  .hero-title{font-size:1.72rem}
  .logo-name{font-size:1rem}
  .header-status{display:none}
}

/* roulang page: category3 */
:root {
      --copper: #A67B3A;
      --bright-copper: #D6A85E;
      --champagne: #F0D9A6;
      --berry: #7A2E2A;
      --forest: #3E6B5D;
      --deep: #16110D;
      --deep-soft: #201811;
      --cream: #F7F2EA;
      --white: #FFFFFF;
      --text-dark: #2C2420;
      --text-muted: #73665B;
      --line-cream: #EFE6DA;
      --radius-lg: 20px;
      --radius-xl: 24px;
      --radius-pill: 999px;
      --shadow-sm: 0 10px 30px rgba(40, 25, 15, .08);
      --shadow-lg: 0 24px 50px rgba(40, 25, 15, .16);
      --font-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
      --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 100px;
    }

    body {
      margin: 0;
      background: var(--cream);
      color: var(--text-dark);
      font-family: var(--font-sans);
      line-height: 1.75;
      letter-spacing: .01em;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-serif);
      font-weight: 600;
      color: inherit;
    }

    p {
      margin: 0 0 1rem;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: color .25s ease, background .25s ease, border .25s ease, transform .25s ease;
    }

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

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

    button, input {
      font-family: inherit;
    }

    .btn {
      --bs-btn-border-radius: var(--radius-pill);
      --bs-btn-focus-box-shadow: 0 0 0 0 rgba(214, 168, 94, 0);
      border-radius: var(--radius-pill);
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .75rem 1.8rem;
      font-weight: 500;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }

    .btn:hover,
    .btn:focus,
    .btn:active {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }

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

    .btn-brand-gold {
      background: linear-gradient(135deg, #D6A85E, #F0D9A6);
      border: 1px solid transparent;
      color: #2C2420;
    }

    .btn-brand-gold:hover {
      background: linear-gradient(135deg, #E2BC7B, #F7E3B6);
      color: #16110D;
    }

    .btn-outline-light {
      border: 1px solid rgba(240, 217, 166, .7);
      color: #F0D9A6;
      background: transparent;
    }

    .btn-outline-light:hover {
      background: rgba(240, 217, 166, .12);
      border-color: #F0D9A6;
      color: #F0D9A6;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    .accordion-button:focus-visible {
      outline: 2px solid var(--bright-copper);
      outline-offset: 3px;
      border-radius: 6px;
    }

    .container {
      max-width: 1200px;
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1060;
      background: rgba(22, 17, 13, .55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: background .35s ease, box-shadow .35s ease;
      border-bottom: 1px solid rgba(240, 217, 166, .08);
    }

    .site-header.scrolled {
      background: #16110D;
      box-shadow: 0 12px 40px rgba(22, 17, 13, .22);
      border-bottom-color: transparent;
    }

    .nav-container {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      height: 86px;
      transition: height .35s ease;
    }

    .site-header.scrolled .nav-container {
      height: 66px;
    }

    .nav-left,
    .nav-right {
      display: flex;
      align-items: center;
      gap: 2.2rem;
    }

    .nav-left {
      justify-self: start;
    }

    .nav-right {
      justify-self: end;
    }

    .site-header .nav-link {
      position: relative;
      display: inline-block;
      padding: .4rem 0;
      color: #F0E6D2;
      font-size: .94rem;
      font-weight: 400;
      letter-spacing: .04em;
      white-space: nowrap;
      transition: color .25s ease;
    }

    .site-header .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, #F0D9A6, #A67B3A);
      border-radius: var(--radius-pill);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .3s ease;
    }

    .site-header .nav-link:hover {
      color: #F0D9A6;
    }

    .site-header .nav-link:hover::after,
    .site-header .nav-link.active::after {
      transform: scaleX(1);
    }

    .site-header .nav-link.active {
      color: #D6A85E;
    }

    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      max-width: 180px;
      color: #F6EFE4;
      font-family: var(--font-serif);
      font-size: 1.24rem;
      font-weight: 600;
      letter-spacing: .03em;
      line-height: 1.2;
    }

    .brand-logo:hover {
      color: #F0D9A6;
    }

    .logo-mark {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: linear-gradient(135deg, #7A2E2A, #A67B3A);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #FFF6E8;
      font-family: var(--font-serif);
      font-size: 1.1rem;
      font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(240, 217, 166, .35);
      background: transparent;
      border-radius: 12px;
      align-items: center;
      justify-content: center;
      gap: 5px;
      flex-direction: column;
      cursor: pointer;
      z-index: 1090;
      transition: border-color .3s ease, background .3s ease;
    }

    .menu-toggle:hover {
      border-color: #D6A85E;
      background: rgba(214, 168, 94, .08);
    }

    .menu-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      background: #F0D9A6;
      border-radius: var(--radius-pill);
      transition: transform .3s ease, opacity .3s ease;
    }

    .menu-toggle.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.open span:nth-child(2) {
      opacity: 0;
    }

    .menu-toggle.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-nav {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      overflow: hidden;
      max-height: 0;
      background: #16110D;
      border-bottom: 1px solid rgba(240, 217, 166, .12);
      transition: max-height .45s ease;
      box-shadow: 0 24px 50px rgba(22, 17, 13, .18);
    }

    .mobile-nav.show {
      max-height: 420px;
    }

    .mobile-nav a {
      display: block;
      color: #F0E6D2;
      font-size: 1.05rem;
      padding: 1.1rem 1.5rem;
      border-bottom: 1px solid rgba(240, 217, 166, .08);
      transition: background .3s ease, padding .3s ease, color .3s ease;
    }

    .mobile-nav a:last-child {
      border-bottom: 0;
    }

    .mobile-nav a:hover,
    .mobile-nav a.active {
      color: #F0D9A6;
      background: rgba(214, 168, 94, .08);
      padding-left: 1.8rem;
    }

    .page-hero {
      position: relative;
      color: #F6EFE4;
      padding: 148px 0 78px;
      background:
        linear-gradient(115deg, rgba(22, 17, 13, .96) 0%, rgba(50, 26, 17, .88) 48%, rgba(22, 17, 13, .74) 100%),
        url("/assets/images/backpic/back-3.webp") center/cover no-repeat,
        #16110D;
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 82% 20%, rgba(214, 168, 94, .16), transparent 34%);
    }

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

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      margin: 0 0 1.25rem;
      padding: .25rem 0;
      font-size: .9rem;
      background: transparent;
    }

    .breadcrumb-item + .breadcrumb-item::before {
      content: "·";
      color: rgba(240, 217, 166, .6);
      padding: 0 .8rem;
      font-weight: 300;
    }

    .breadcrumb-item a {
      color: rgba(246, 239, 228, .72);
    }

    .breadcrumb-item a:hover {
      color: #F0D9A6;
    }

    .breadcrumb-item.active {
      color: #D6A85E;
    }

    .page-hero-content {
      max-width: 860px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-size: .82rem;
      letter-spacing: .14em;
      color: #F0D9A6;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }

    .hero-eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: #D6A85E;
    }

    .page-hero h1 {
      font-size: clamp(2rem, 4vw, 2.8rem);
      color: #FFFFFF;
      line-height: 1.3;
      margin-bottom: 1rem;
      font-weight: 600;
    }

    .page-hero h1 span {
      background: linear-gradient(120deg, #F0D9A6, #D6A85E);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-copy {
      font-size: 1.08rem;
      line-height: 1.8;
      color: rgba(246, 239, 228, .85);
      max-width: 760px;
      margin-bottom: 1.8rem;
    }

    .help-search {
      max-width: 720px;
      background: #FFFFFF;
      border-radius: var(--radius-pill);
      padding: 6px 6px 6px 22px;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 20px 50px rgba(22, 17, 13, .2);
      border: 1px solid rgba(240, 217, 166, .3);
    }

    .help-search .search-icon {
      color: #A67B3A;
      font-size: 1.05rem;
      margin-right: .25rem;
    }

    .help-search .form-control {
      border: 0;
      box-shadow: none;
      background: transparent;
      font-size: 1rem;
      color: #2C2420;
      padding: .85rem .6rem;
      min-width: 0;
    }

    .help-search .form-control::placeholder {
      color: #A39787;
    }

    .help-search .search-btn {
      background: linear-gradient(135deg, #D6A85E, #F0D9A6);
      border: 0;
      color: #2C2420;
      border-radius: var(--radius-pill);
      padding: .8rem 1.75rem;
      font-size: .95rem;
      font-weight: 600;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .help-search .search-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(214, 168, 94, .28);
    }

    .help-search .search-btn:active {
      transform: scale(.98);
    }

    .search-hint {
      margin-top: 1.1rem;
      font-size: .88rem;
      color: rgba(246, 239, 228, .6);
    }

    .search-hint i {
      color: #D6A85E;
      margin-right: .25rem;
    }

    .topic-section {
      padding: 96px 0 84px;
    }

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

    .section-head .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-size: .84rem;
      letter-spacing: .12em;
      color: #A67B3A;
      font-weight: 500;
      margin-bottom: .75rem;
    }

    .section-head .section-eyebrow::before {
      content: "";
      width: 32px;
      height: 1px;
      background: #A67B3A;
    }

    .section-head h2 {
      font-size: clamp(1.6rem, 3vw, 2.1rem);
      line-height: 1.35;
      margin-bottom: .5rem;
    }

    .section-head p {
      color: var(--text-muted);
      font-size: 1rem;
      max-width: 700px;
      margin: 0;
    }

    .topic-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    .topic-card {
      position: relative;
      display: block;
      background: #FFFFFF;
      border: 1px solid var(--line-cream);
      border-radius: var(--radius-lg);
      padding: 28px 24px;
      height: 100%;
      overflow: hidden;
      transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
    }

    .topic-card::after {
      content: "";
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, #A67B3A, #F0D9A6);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s ease;
    }

    .topic-card:hover {
      transform: translateY(-6px);
      border-color: #D6A85E;
      box-shadow: var(--shadow-lg);
    }

    .topic-card:hover::after {
      transform: scaleX(1);
    }

    .topic-card .topic-icon {
      width: 52px;
      height: 52px;
      margin-bottom: 1.25rem;
      border-radius: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #D6A85E;
      background: #FFF8EE;
      font-size: 1.2rem;
      border: 1px solid #EFE0C4;
    }

    .topic-card h3 {
      font-size: 1.12rem;
      margin-bottom: .5rem;
    }

    .topic-card p {
      font-size: .9rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin: 0;
    }

    .faq-section {
      background: linear-gradient(180deg, #FCF8F2 0%, #F7F2EA 100%);
      padding: 90px 0 96px;
    }

    .faq-section .section-head {
      text-align: center;
    }

    .faq-section .section-head .section-eyebrow {
      justify-content: center;
    }

    .faq-section .section-head .section-eyebrow::before {
      background: #A67B3A;
    }

    .faq-column-title {
      font-size: 1.3rem;
      margin-bottom: 1.4rem;
      display: flex;
      align-items: center;
      gap: .85rem;
      font-weight: 600;
    }

    .faq-column-title .title-num {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #7A2E2A;
      color: #F0D9A6;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-serif);
      font-size: .92rem;
      font-weight: 600;
    }

    .accordion {
      --bs-accordion-border-color: var(--line-cream);
      --bs-accordion-border-width: 1px;
      --bs-accordion-border-radius: 16px;
      --bs-accordion-inner-border-radius: 16px;
      --bs-accordion-btn-focus-box-shadow: none;
    }

    .accordion-item {
      background: #FFFFFF;
      border: 1px solid var(--line-cream);
      border-radius: 18px !important;
      margin-bottom: 12px;
      overflow: hidden;
      transition: border-color .3s ease, box-shadow .3s ease;
    }

    .accordion-item:last-child {
      margin-bottom: 0;
    }

    .accordion-button {
      background: #FFFFFF;
      padding: 1.15rem 1.35rem;
      font-size: .98rem;
      font-weight: 600;
      color: var(--text-dark);
      line-height: 1.6;
      box-shadow: none;
      transition: background .3s ease, color .3s ease;
    }

    .accordion-button:not(.collapsed) {
      background: #FFF8EE;
      color: #7A2E2A;
      box-shadow: none;
    }

    .accordion-button:hover {
      background: #FFF8EE;
    }

    .accordion-button::after {
      content: "+";
      background-image: none !important;
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 1.35rem;
      font-weight: 300;
      color: #A67B3A;
      margin-left: 1rem;
      transition: transform .35s ease, background .35s ease, color .35s ease;
    }

    .accordion-button:not(.collapsed)::after {
      content: "+";
      transform: rotate(135deg);
      color: #7A2E2A;
      background: rgba(214, 168, 94, .12);
    }

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

    .accordion-body {
      background: #FFFFFF;
      padding: .15rem 1.35rem 1.35rem;
      color: var(--text-muted);
      font-size: .96rem;
      line-height: 1.8;
    }

    .accordion-item:has(.accordion-button:not(.collapsed)) {
      border-color: rgba(214, 168, 94, .45);
    }

    .search-empty {
      display: none;
      text-align: center;
      border: 1px dashed #D6A85E;
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .6);
      padding: 48px 24px;
      color: var(--text-muted);
    }

    .search-empty i {
      font-size: 1.8rem;
      color: #A67B3A;
      margin-bottom: .5rem;
    }

    .guide-section {
      padding: 96px 0;
    }

    .guide-card {
      background: #16110D;
      border-radius: 28px;
      overflow: hidden;
      padding: 48px 48px 52px;
      position: relative;
      color: #F6EFE4;
    }

    .guide-card::before {
      content: "";
      position: absolute;
      right: -80px;
      top: -100px;
      width: 260px;
      height: 260px;
      background: radial-gradient(circle, rgba(214, 168, 94, .16), transparent 70%);
    }

    .guide-media {
      position: relative;
      z-index: 1;
      overflow: hidden;
      border-radius: 24px;
      box-shadow: 0 18px 44px rgba(22, 17, 13, .3);
    }

    .guide-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      min-height: 250px;
    }

    .guide-content {
      position: relative;
      z-index: 1;
    }

    .guide-content .section-eyebrow {
      color: #F0D9A6;
    }

    .guide-content h2 {
      font-size: clamp(1.5rem, 3vw, 2rem);
      color: #FFFFFF;
      margin-bottom: 1.5rem;
      line-height: 1.4;
    }

    .guide-steps {
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
    }

    .guide-step {
      display: flex;
      gap: 1.2rem;
      align-items: flex-start;
    }

    .step-num {
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(122, 46, 42, .9);
      border: 1px solid rgba(240, 217, 166, .35);
      color: #F0D9A6;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .88rem;
      font-weight: 600;
      font-family: var(--font-serif);
    }

    .guide-step-text h4 {
      font-size: 1.05rem;
      color: #FFFFFF;
      margin-bottom: .25rem;
      font-weight: 600;
    }

    .guide-step-text p {
      color: rgba(246, 239, 228, .72);
      font-size: .94rem;
      margin: 0;
    }

    .contact-section {
      display: block;
      background:
        linear-gradient(180deg, #F7F2EA 0%, #F0E8DB 100%);
      padding: 28px 0 96px;
    }

    .contact-card {
      background:
        linear-gradient(135deg, rgba(46, 27, 18, .98), rgba(22, 17, 13, .98)),
        url("/assets/images/backpic/back-1.png");
      border-radius: 24px;
      color: #F6EFE4;
      padding: 56px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(240, 217, 166, .14);
    }

    .contact-card::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -100px;
      width: 360px;
      height: 220px;
      background: radial-gradient(ellipse, rgba(214, 168, 94, .18), transparent 70%);
      transform: translateX(-50%);
    }

    .contact-card h2 {
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      color: #FFFFFF;
      margin-bottom: .6rem;
    }

    .contact-card p {
      max-width: 680px;
      margin: 0 auto 1.7rem;
      color: rgba(246, 239, 228, .8);
      font-size: 1rem;
    }

    .contact-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 1.8rem;
    }

    .contact-email {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      background: rgba(240, 217, 166, .08);
      border: 1px solid rgba(240, 217, 166, .18);
      color: #F0D9A6;
      border-radius: var(--radius-pill);
      padding: .7rem 1.6rem;
      font-size: .95rem;
      margin-bottom: 1.5rem;
    }

    .contact-email i {
      color: #D6A85E;
    }

    .site-footer {
      background: #16110D;
      color: #E8DCCD;
      font-size: .95rem;
      padding-top: 76px;
      border-top: 1px solid rgba(240, 217, 166, .06);
    }

    .site-footer h4 {
      color: #F0D9A6;
      font-size: 1rem;
      margin-bottom: 1rem;
      position: relative;
      padding-bottom: .6rem;
    }

    .site-footer h4::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 26px;
      height: 1px;
      background: #A67B3A;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: .8rem;
      font-family: var(--font-serif);
      font-size: 1.18rem;
      font-weight: 600;
      color: #F6EFE4;
      margin-bottom: .9rem;
    }

    .footer-logo .mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: linear-gradient(135deg, #7A2E2A, #A67B3A);
      color: #FFF6E8;
      font-size: 1.05rem;
      font-weight: 600;
      font-family: var(--font-serif);
    }

    .footer-desc {
      color: rgba(232, 220, 205, .68);
      font-size: .92rem;
      margin-bottom: 1.4rem;
      line-height: 1.8;
      max-width: 360px;
    }

    .footer-note {
      color: rgba(232, 220, 205, .6);
      font-size: .9rem;
      margin: 0 0 .5rem;
    }

    .footer-note i {
      color: #D6A85E;
    }

    .footer-link-list {
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }

    .footer-link-list a {
      color: rgba(232, 220, 205, .72);
      display: inline-block;
      transition: color .3s ease, padding .3s ease;
    }

    .footer-link-list a:hover {
      color: #F0D9A6;
      padding-left: 4px;
    }

    .footer-bottom {
      border-top: 1px solid rgba(240, 217, 166, .08);
      margin-top: 60px;
      padding: 22px 0;
      font-size: .85rem;
    }

    .footer-bottom .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: .5rem 1.5rem;
      color: rgba(246, 239, 228, .5);
    }

    .back-top {
      display: none;
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #2A211B;
      color: #F0D9A6;
      border: 1px solid rgba(214, 168, 94, .5);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1040;
      transition: transform .3s ease, background .3s ease, opacity .3s ease;
    }

    .back-top.show {
      display: inline-flex;
    }

    .back-top:hover {
      background: #16110D;
      transform: translateY(-4px);
    }

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

    @media (max-width: 1199.98px) {
      .nav-left,
      .nav-right {
        display: none;
      }

      .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 72px;
      }

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

    @media (max-width: 991.98px) {
      .page-hero {
        padding-top: 132px;
        padding-bottom: 64px;
      }

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

      .guide-card {
        padding: 36px 28px;
      }

      .faq-section {
        padding: 72px 0 74px;
      }

      .contact-card {
        padding: 44px 28px;
      }
    }

    @media (max-width: 767.98px) {
      .page-hero {
        padding-top: 118px;
        padding-bottom: 56px;
      }

      .page-hero-content {
        text-align: left;
      }

      .help-search {
        flex-wrap: wrap;
        padding: 8px;
        background: #FFFFFF;
        border-radius: 18px;
      }

      .help-search .search-icon {
        padding-left: .5rem;
      }

      .help-search .form-control {
        width: auto;
        flex: 1 1 200px;
      }

      .help-search .search-btn {
        width: 100%;
        justify-content: center;
        margin-top: .2rem;
      }

      .search-hint {
        font-size: .82rem;
        line-height: 1.6;
      }

      .topic-section {
        padding: 64px 0 56px;
      }

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

      .faq-section {
        padding: 56px 0 64px;
      }

      .guide-section {
        padding: 60px 0;
      }

      .guide-card {
        padding: 30px 22px;
        border-radius: 20px;
      }

      .accordion-button {
        font-size: .93rem;
        padding: 1rem .95rem;
      }

      .accordion-body {
        font-size: .92rem;
      }

      .contact-card {
        padding: 34px 18px;
        border-radius: 18px;
      }

      .contact-links {
        flex-direction: column;
      }

      .footer-link-list {
        margin-bottom: 1.5rem;
      }
    }

    @media (max-width: 520px) {
      .page-hero h1 {
        font-size: 1.75rem;
      }

      .hero-copy {
        font-size: .95rem;
      }

      .section-head h2 {
        font-size: 1.45rem;
      }

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