/* roulang page: index */
:root{
  --ink:#14181f;
  --ink-2:#2b3340;
  --ink-3:#525b6b;
  --paper:#f7f5ef;
  --paper-2:#fffdf8;
  --paper-3:#efeade;
  --gold:#e0a92c;
  --gold-deep:#a97612;
  --gold-soft:#fbf0d2;
  --teal:#1d5f58;
  --teal-soft:#e3f0ec;
  --line:#e3ddce;
  --line-strong:#cfc6b1;
  --muted:#6d7482;
  --white:#ffffff;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:24px;
  --radius-pill:999px;
  --shadow-s:0 1px 2px rgba(20,24,31,.05),0 2px 10px rgba(20,24,31,.05);
  --shadow-m:0 6px 24px rgba(20,24,31,.08);
  --shadow-l:0 18px 48px rgba(20,24,31,.14);
  --space-1:8px;
  --space-2:14px;
  --space-3:22px;
  --space-4:32px;
  --space-5:48px;
  --space-6:72px;
  --space-7:104px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.75;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit;}
input,textarea,select{font-family:inherit;font-size:inherit;}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:3px solid rgba(224,169,44,.7);
  outline-offset:3px;
  border-radius:6px;
}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
.container-narrow{max-width:880px;}

/* ===== 顶部导航 ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,253,248,.94);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:74px;
  padding:10px 0;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:18px;
  letter-spacing:.2px;
  color:var(--ink);
  white-space:nowrap;
}
.logo-mark{
  width:38px;height:38px;
  border-radius:12px;
  background:linear-gradient(150deg,var(--gold),#c98a12);
  color:#2a1e04;
  display:grid;place-items:center;
  font-size:16px;font-weight:900;
  box-shadow:0 6px 16px rgba(201,138,18,.32);
  flex:none;
}
.logo-text small{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--muted);
  line-height:1.4;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}
.nav-links a{
  display:inline-block;
  padding:9px 15px;
  border-radius:var(--radius-pill);
  font-size:15px;
  font-weight:600;
  color:var(--ink-3);
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.nav-links a:hover{background:var(--paper-3);color:var(--ink);transform:translateY(-1px);}
.nav-links a.is-active{
  background:var(--ink);
  color:var(--paper-2);
  box-shadow:var(--shadow-s);
}
.nav-cta{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border-radius:var(--radius-pill);
  background:linear-gradient(140deg,#e8b23a,#c98a12);
  color:#241a04;
  font-weight:800;
  font-size:15px;
  box-shadow:0 8px 20px rgba(201,138,18,.28);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(201,138,18,.36);filter:brightness(1.04);}
.nav-cta:active{transform:translateY(0);}
.nav-toggle{
  display:none;
  margin-left:auto;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid var(--line-strong);
  background:var(--paper-2);
  align-items:center;justify-content:center;
}
.nav-toggle span{
  display:block;width:19px;height:2px;background:var(--ink);position:relative;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}

/* ===== 首屏 ===== */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 88% -10%,rgba(224,169,44,.28),transparent 62%),
    radial-gradient(700px 380px at 0% 110%,rgba(29,95,88,.18),transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--line);
}
.hero-inner{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:56px;
  align-items:center;
  padding:76px 0 84px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:var(--radius-pill);
  background:var(--paper-2);
  border:1px solid var(--line-strong);
  font-size:13px;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--gold-deep);
  box-shadow:var(--shadow-s);
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold-deep);
  box-shadow:0 0 0 4px rgba(169,118,18,.14);
}
.hero h1{
  margin:22px 0 18px;
  font-size:clamp(30px,4.2vw,50px);
  line-height:1.22;
  letter-spacing:-.5px;
  font-weight:900;
  color:var(--ink);
}
.hero h1 .hl{
  background:linear-gradient(180deg,transparent 62%,rgba(224,169,44,.55) 62%,rgba(224,169,44,.55) 92%,transparent 92%);
  padding:0 2px;
}
.hero-lead{
  font-size:17px;
  line-height:1.85;
  color:var(--ink-3);
  max-width:560px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  font-weight:800;
  font-size:16px;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper-2);
  box-shadow:var(--shadow-m);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-l);background:#000;}
.btn-gold{
  background:linear-gradient(140deg,#e8b23a,#c98a12);
  color:#241a04;
  box-shadow:0 10px 24px rgba(201,138,18,.3);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(201,138,18,.4);}
.btn-ghost{
  background:var(--paper-2);
  color:var(--ink);
  border:1.5px solid var(--line-strong);
}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow-s);}
.btn:active{transform:translateY(0);}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.tag{
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  font-size:13px;
  font-weight:700;
  background:var(--paper-2);
  border:1px solid var(--line);
  color:var(--ink-3);
}
.tag-gold{background:var(--gold-soft);border-color:#eddaa6;color:var(--gold-deep);}
.tag-teal{background:var(--teal-soft);border-color:#c6e0d8;color:var(--teal);}

.hero-card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);
  padding:26px;
}
.hero-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:16px;
  border-bottom:1px dashed var(--line-strong);
}
.hero-card-head strong{font-size:16px;color:var(--ink);font-weight:800;}
.hero-card-head span{font-size:12px;color:var(--muted);font-weight:600;}
.mini-list{margin-top:8px;}
.mini-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.mini-list li:last-child{border-bottom:0;padding-bottom:2px;}
.mini-list .idx{
  flex:none;
  width:28px;height:28px;
  border-radius:9px;
  display:grid;place-items:center;
  font-size:13px;font-weight:900;
  background:var(--ink);
  color:var(--gold);
  margin-top:2px;
}
.mini-list h4{font-size:15px;color:var(--ink);font-weight:800;margin-bottom:2px;}
.mini-list p{font-size:13.5px;color:var(--muted);line-height:1.65;}

/* ===== 统计条 ===== */
.stats{
  background:var(--ink);
  color:var(--paper-2);
  padding:34px 0;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.stat b{
  display:block;
  font-size:30px;
  font-weight:900;
  letter-spacing:-.5px;
  color:var(--gold);
  line-height:1.2;
}
.stat span{
  display:block;
  font-size:13.5px;
  color:#b8bec9;
  margin-top:6px;
}

/* ===== 通用板块 ===== */
.section{padding:var(--space-7) 0;}
.section-alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{max-width:720px;margin-bottom:var(--space-5);}
.section-kicker{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
  color:var(--gold-deep);
  margin-bottom:12px;
}
.section-head h2{
  font-size:clamp(24px,3vw,34px);
  line-height:1.32;
  font-weight:900;
  color:var(--ink);
  letter-spacing:-.3px;
}
.section-head p{
  margin-top:14px;
  font-size:16px;
  color:var(--ink-3);
  line-height:1.85;
}

/* ===== 剧情看点卡片 ===== */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:28px 26px;
  box-shadow:var(--shadow-s);
  transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;
  display:flex;
  flex-direction:column;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--line-strong);}
.card-icon{
  width:46px;height:46px;
  border-radius:14px;
  display:grid;place-items:center;
  font-size:20px;
  font-weight:900;
  background:var(--gold-soft);
  color:var(--gold-deep);
  margin-bottom:18px;
}
.card-icon.teal{background:var(--teal-soft);color:var(--teal);}
.card-icon.ink{background:#e8eaee;color:var(--ink);}
.card h3{
  font-size:19px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:10px;
  line-height:1.45;
}
.card p{font-size:14.8px;color:var(--ink-3);line-height:1.8;}
.card .card-link{
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:800;
  color:var(--gold-deep);
  transition:gap .22s ease,color .22s ease;
}
.card .card-link:hover{gap:12px;color:var(--ink);}

/* ===== 人物阵营 ===== */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  align-items:start;
}
.role-list li{
  display:flex;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.role-list li:first-child{padding-top:0;}
.role-list li:last-child{border-bottom:0;padding-bottom:0;}
.role-avatar{
  flex:none;
  width:52px;height:52px;
  border-radius:16px;
  display:grid;place-items:center;
  font-weight:900;
  font-size:18px;
  color:var(--paper-2);
  background:var(--ink);
}
.role-avatar.g{background:linear-gradient(140deg,#e8b23a,#c98a12);color:#241a04;}
.role-avatar.t{background:linear-gradient(140deg,#2b7a71,#1d5f58);}
.role-avatar.s{background:linear-gradient(140deg,#6d7482,#414855);}
.role-list h4{
  font-size:16.5px;
  color:var(--ink);
  font-weight:800;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.role-list .role-tag{
  font-size:11.5px;
  font-weight:800;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  background:var(--paper-3);
  color:var(--ink-3);
}
.role-list p{font-size:14.5px;color:var(--ink-3);margin-top:6px;line-height:1.78;}

.panel{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:30px;
  box-shadow:var(--shadow-m);
}
.panel h3{font-size:19px;font-weight:900;color:var(--ink);margin-bottom:8px;}
.panel > p{font-size:14.5px;color:var(--muted);line-height:1.8;margin-bottom:18px;}
.fact-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:13px 0;
  border-bottom:1px dashed var(--line-strong);
  font-size:14.5px;
}
.fact-row:last-child{border-bottom:0;}
.fact-row dt{color:var(--muted);font-weight:600;}
.fact-row dd{margin:0;color:var(--ink);font-weight:800;text-align:right;}

/* ===== 追剧路线 ===== */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  counter-reset:step;
}
.step{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:26px 22px;
  transition:transform .26s ease,box-shadow .26s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);}
.step::before{
  counter-increment:step;
  content:"0" counter(step);
  display:block;
  font-size:26px;
  font-weight:900;
  color:var(--gold);
  letter-spacing:-1px;
  margin-bottom:12px;
}
.step h3{font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:8px;}
.step p{font-size:14px;color:var(--ink-3);line-height:1.75;}

/* ===== 精选内容列表 ===== */
.post-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.post{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:22px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  transition:border-color .24s ease,transform .24s ease,box-shadow .24s ease;
}
.post:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow-m);}
.post-thumb{
  flex:none;
  width:64px;height:64px;
  border-radius:16px;
  display:grid;place-items:center;
  font-weight:900;
  font-size:14px;
  letter-spacing:.5px;
  background:linear-gradient(150deg,var(--gold),#c98a12);
  color:#241a04;
}
.post-thumb.t{background:linear-gradient(150deg,#2b7a71,#1d5f58);color:#eaf5f1;}
.post-thumb.k{background:linear-gradient(150deg,#3a4250,#14181f);color:#e6e8ec;}
.post h3{font-size:16px;font-weight:800;color:var(--ink);line-height:1.5;margin-bottom:6px;}
.post p{font-size:13.8px;color:var(--muted);line-height:1.7;}
.post .meta{
  margin-top:10px;
  font-size:12.5px;
  font-weight:700;
  color:var(--gold-deep);
}

/* ===== 观众反馈 ===== */
.quote-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.quote{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:26px 24px;
  box-shadow:var(--shadow-s);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.quote .stars{color:var(--gold);font-size:14px;letter-spacing:2px;}
.quote p{font-size:15px;color:var(--ink-2);line-height:1.85;}
.quote .who{
  margin-top:auto;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.quote .who span{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--paper-3);
  color:var(--ink);
  font-weight:900;
  font-size:12px;
}

/* ===== FAQ ===== */
.faq{
  display:grid;
  gap:14px;
  max-width:900px;
}
.faq details{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:0 24px;
  transition:border-color .24s ease,box-shadow .24s ease;
}
.faq details[open]{border-color:var(--line-strong);box-shadow:var(--shadow-s);}
.faq details:hover{border-color:var(--gold);}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:20px 34px 20px 0;
  font-size:16.5px;
  font-weight:800;
  color:var(--ink);
  position:relative;
  line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";
  position:absolute;
  right:0;top:50%;
  transform:translateY(-50%);
  font-size:22px;
  font-weight:400;
  color:var(--gold-deep);
  transition:transform .24s ease;
}
.faq details[open] summary::after{content:"–";}
.faq .answer{
  padding:0 0 22px;
  font-size:15px;
  color:var(--ink-3);
  line-height:1.85;
  border-top:1px dashed var(--line-strong);
  padding-top:16px;
}

/* ===== CTA ===== */
.cta-band{
  padding:var(--space-7) 0;
  background:
    radial-gradient(700px 320px at 12% 0%,rgba(224,169,44,.28),transparent 60%),
    radial-gradient(600px 300px at 92% 100%,rgba(29,95,88,.32),transparent 62%),
    var(--ink);
  color:var(--paper-2);
}
.cta-inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:52px;
  align-items:center;
}
.cta-band h2{
  font-size:clamp(24px,3vw,34px);
  font-weight:900;
  line-height:1.34;
  letter-spacing:-.3px;
}
.cta-band p{
  margin-top:16px;
  font-size:16px;
  color:#c3c9d3;
  line-height:1.85;
  max-width:560px;
}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}
.cta-band .btn-ghost{
  background:transparent;
  color:var(--paper-2);
  border-color:rgba(255,255,255,.28);
}
.cta-band .btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent;}
.cta-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-l);
  padding:28px;
}
.cta-card h3{font-size:17px;font-weight:800;margin-bottom:14px;color:#fff;}
.cta-card ul{display:grid;gap:12px;}
.cta-card li{
  display:flex;
  gap:10px;
  font-size:14.5px;
  color:#c3c9d3;
  line-height:1.7;
}
.cta-card li::before{
  content:"✓";
  color:var(--gold);
  font-weight:900;
  flex:none;
}

/* ===== 页脚 ===== */
.site-footer{
  background:var(--paper-3);
  border-top:1px solid var(--line);
  padding:58px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:38px;
  border-bottom:1px solid var(--line-strong);
}
.footer-brand .logo{margin-bottom:16px;}
.footer-brand p{
  font-size:14px;
  color:var(--ink-3);
  line-height:1.85;
  max-width:320px;
}
.footer-col h4{
  font-size:14px;
  font-weight:900;
  color:var(--ink);
  letter-spacing:.5px;
  margin-bottom:16px;
}
.footer-col li{margin-bottom:11px;}
.footer-col a{
  font-size:14px;
  color:var(--ink-3);
  transition:color .2s ease,padding-left .2s ease;
}
.footer-col a:hover{color:var(--gold-deep);padding-left:4px;}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:space-between;
  align-items:center;
  padding-top:24px;
  font-size:13px;
  color:var(--muted);
}
.footer-bottom .f-links{display:flex;gap:18px;flex-wrap:wrap;}
.footer-bottom a:hover{color:var(--gold-deep);}

/* ===== 响应式 ===== */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px;padding:56px 0 64px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:28px;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;gap:36px;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .quote-grid{grid-template-columns:1fr 1fr;}
  .cta-inner{grid-template-columns:1fr;gap:36px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:860px){
  .nav-links{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    background:var(--paper-2);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-m);
    padding:14px 20px 20px;
    display:none;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{padding:12px 16px;border-radius:12px;}
  .nav-toggle{display:inline-flex;}
  .nav-cta{display:none;}
  .nav{position:relative;gap:12px;}
  .grid-3{grid-template-columns:1fr;}
  .post-list{grid-template-columns:1fr;}
  .quote-grid{grid-template-columns:1fr;}
  .section{padding:56px 0;}
  .cta-band{padding:56px 0;}
}
@media (max-width:520px){
  .container{padding:0 18px;}
  .hero h1{font-size:27px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .btn{width:100%;}
  .stats-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .logo{font-size:16px;}
  .logo-mark{width:34px;height:34px;font-size:14px;}
  .panel{padding:22px;}
  .card{padding:22px;}
  .cta-card{padding:22px;}
}

/* roulang page: category2 */
:root{
  --ink:#0e1720;
  --ink-soft:#1a2632;
  --ink-line:rgba(255,255,255,.14);
  --gold:#d8a43c;
  --gold-deep:#b6832a;
  --gold-tint:#f8eed7;
  --bg:#f7f5f0;
  --paper:#ffffff;
  --text:#1b232b;
  --muted:#5e6975;
  --line:#e6e0d3;
  --radius-xl:24px;
  --radius-lg:18px;
  --radius:14px;
  --radius-sm:10px;
  --shadow-xs:0 1px 3px rgba(18,26,34,.06);
  --shadow-sm:0 6px 18px rgba(18,26,34,.07);
  --shadow-md:0 16px 38px rgba(18,26,34,.11);
  --shadow-lg:0 28px 66px rgba(14,23,32,.20);
  --container:1160px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.78;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.32;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
small{font-size:.82em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}
::selection{background:var(--gold-tint);color:var(--ink)}

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

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 20px rgba(18,26,34,.05);
}
.nav{position:relative;display:flex;align-items:center;gap:26px;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}
.logo-mark{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--ink) 0%,#26384a 100%);
  color:var(--gold);
  font-size:20px;font-weight:700;
  box-shadow:0 6px 16px rgba(14,23,32,.24);
}
.logo-text{display:block;font-size:17px;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:.01em}
.logo-text small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.16em;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{
  position:relative;display:inline-block;
  padding:9px 14px;border-radius:10px;
  font-size:15px;font-weight:500;color:#3b4652;
  transition:background .2s ease,color .2s ease;
}
.nav-links a:hover{background:#f3efe5;color:var(--ink)}
.nav-links a.is-active{color:var(--ink);font-weight:700;background:#f6f1e4}
.nav-links a.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--gold);border-radius:2px;
}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;
  background:linear-gradient(140deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:#211a08;font-size:15px;font-weight:700;
  box-shadow:0 8px 20px rgba(184,131,42,.30);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
  white-space:nowrap;
}
.nav-cta::after{content:"→";font-size:15px;transition:transform .2s ease}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(184,131,42,.38);filter:brightness(1.04)}
.nav-cta:hover::after{transform:translateX(3px)}
.nav-cta:active{transform:translateY(0)}
.nav-toggle{
  display:none;margin-left:auto;
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);background:#fff;
  align-items:center;justify-content:center;
}
.nav-toggle span{position:relative;display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .24s ease,top .24s ease;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;border-radius:999px;
  background:var(--gold-tint);color:var(--gold-deep);
  font-size:13px;font-weight:700;letter-spacing:.12em;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.eyebrow.on-dark{background:rgba(216,164,60,.16);color:#f2d79c}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:999px;
  font-size:16px;font-weight:700;line-height:1.2;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.btn-gold{
  background:linear-gradient(140deg,var(--gold) 0%,var(--gold-deep) 100%);
  color:#221a06;box-shadow:0 12px 28px rgba(184,131,42,.34);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(184,131,42,.42)}
.btn-line{border:1.5px solid rgba(255,255,255,.34);color:#f4f1e9;background:rgba(255,255,255,.05)}
.btn-line:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:#fdfaf3;box-shadow:0 12px 26px rgba(14,23,32,.24)}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(14,23,32,.32)}
.btn:active{transform:translateY(0)}
.tag{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:#f2eee3;color:#5b5140;font-size:12.5px;font-weight:600;letter-spacing:.04em;
}
.tag.gold{background:var(--gold-tint);color:var(--gold-deep)}
.section{padding:78px 0}
.section--tight{padding:60px 0}
.section-head{max-width:720px;margin-bottom:38px}
.section-head h2{font-size:clamp(24px,3.4vw,34px);margin:16px 0 12px;color:var(--ink)}
.section-head p{color:var(--muted);font-size:16.5px}
.hairline{height:1px;background:var(--line);border:0;margin:0}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 88% -10%,rgba(216,164,60,.22) 0%,rgba(216,164,60,0) 62%),
    linear-gradient(160deg,#0e1720 0%,#16232f 54%,#1d2c3a 100%);
  color:#f2efe7;
  padding:72px 0 76px;
}
.hero::after{
  content:"";position:absolute;inset:auto -120px -180px auto;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,164,60,.16) 0%,rgba(216,164,60,0) 70%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:start;z-index:1}
.hero-brand{font-size:13.5px;letter-spacing:.2em;color:#c9bda0;margin-bottom:18px;font-weight:600}
.hero h1{
  font-size:clamp(29px,4.4vw,44px);
  line-height:1.24;letter-spacing:-.02em;color:#fff;margin:18px 0 20px;
}
.hero h1 em{font-style:normal;color:var(--gold);}
.hero-lead{font-size:17px;color:#c3ccd6;max-width:600px;line-height:1.86}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-note{margin-top:22px;font-size:13.5px;color:#8f9daa;display:flex;align-items:center;gap:8px}
.hero-note::before{content:"";width:26px;height:1px;background:rgba(216,164,60,.6)}

.panel{
  background:rgba(255,255,255,.055);
  border:1px solid var(--ink-line);
  border-radius:var(--radius-xl);
  padding:28px 26px;
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow-lg);
}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.panel-title strong{font-size:15.5px;color:#fff;letter-spacing:.02em}
.panel-title span{font-size:12px;letter-spacing:.14em;color:#93a1ae}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.stat{
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:16px 16px 14px;
  background:rgba(255,255,255,.04);
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.stat:hover{border-color:rgba(216,164,60,.5);transform:translateY(-2px);background:rgba(216,164,60,.08)}
.stat b{display:block;font-size:26px;color:var(--gold);line-height:1.1;letter-spacing:-.01em}
.stat span{display:block;margin-top:6px;font-size:13px;color:#a9b5c1}
.panel-foot{
  margin-top:20px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.16);
  font-size:13.5px;color:#a5b1bd;line-height:1.75;
}

/* ---------- groups ---------- */
.group-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.group-card{
  position:relative;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 22px 24px;
  box-shadow:var(--shadow-xs);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.group-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d9cfb6}
.group-card .idx{
  display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--ink);color:var(--gold);
  font-size:14px;font-weight:700;margin-bottom:16px;
}
.group-card h3{font-size:18px;color:var(--ink);margin-bottom:8px}
.group-card .who{font-size:13.5px;color:var(--gold-deep);font-weight:700;margin-bottom:12px;letter-spacing:.02em}
.group-card p{font-size:14.5px;color:var(--muted);line-height:1.8}

/* ---------- roles ---------- */
.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.role-card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px 24px;
  box-shadow:var(--shadow-xs);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.role-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#ddd2b8}
.role-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.avatar{
  width:54px;height:54px;flex:0 0 54px;border-radius:16px;
  display:grid;place-items:center;
  font-size:21px;font-weight:700;color:#2a2009;
  background:linear-gradient(145deg,#f4dcae 0%,var(--gold) 100%);
  box-shadow:0 8px 18px rgba(184,131,42,.26);
}
.role-name{font-size:18px;color:var(--ink);line-height:1.3}
.role-id{font-size:13px;color:var(--muted);margin-top:3px}
.role-card p{font-size:14.5px;color:#4b5661;line-height:1.82}
.role-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid #f0ebdf}

/* ---------- flow ---------- */
.flow-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.flow-list{counter-reset:flow}
.flow-item{
  position:relative;padding:0 0 26px 54px;
  border-left:2px solid var(--line);margin-left:17px;
}
.flow-item:last-child{padding-bottom:0;border-left-color:transparent}
.flow-item::before{
  counter-increment:flow;content:counter(flow);
  position:absolute;left:-18px;top:0;
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--paper);border:2px solid var(--gold);
  color:var(--gold-deep);font-size:14px;font-weight:700;
}
.flow-item h3{font-size:17.5px;color:var(--ink);margin-bottom:7px}
.flow-item p{font-size:14.8px;color:var(--muted);line-height:1.82}

.quote-card{
  background:linear-gradient(165deg,#12202c 0%,#1b2b39 100%);
  color:#e8e4da;border-radius:var(--radius-xl);
  padding:32px 30px;box-shadow:var(--shadow-md);
}
.quote-card h3{font-size:19px;color:#fff;margin-bottom:14px}
.quote-card p{font-size:14.8px;color:#b7c2cd;line-height:1.85}
.quote-card ul{margin-top:18px;display:grid;gap:12px}
.quote-card li{
  display:flex;gap:10px;font-size:14.3px;color:#c8d2dc;line-height:1.75;
  padding-bottom:12px;border-bottom:1px dashed rgba(255,255,255,.12);
}
.quote-card li:last-child{border-bottom:0;padding-bottom:0}
.quote-card li::before{content:"◆";color:var(--gold);font-size:10px;line-height:1.9;flex:0 0 auto}

/* ---------- timeline ---------- */
.timeline{display:grid;gap:16px}
.tl-item{
  display:grid;grid-template-columns:150px 1fr;gap:24px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px 26px;
  box-shadow:var(--shadow-xs);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.tl-item:hover{border-color:#dccfae;box-shadow:var(--shadow-sm);transform:translateX(3px)}
.tl-stage{font-size:13px;font-weight:700;color:var(--gold-deep);letter-spacing:.1em;padding-top:3px}
.tl-body h3{font-size:17px;color:var(--ink);margin-bottom:6px}
.tl-body p{font-size:14.6px;color:var(--muted);line-height:1.82}

/* ---------- compare ---------- */
.compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.compare-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-xs);
  transition:transform .22s ease,box-shadow .22s ease;
}
.compare-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.compare-head{
  background:#f6f2e8;padding:16px 20px;border-bottom:1px solid var(--line);
  font-size:15px;font-weight:700;color:var(--ink);
}
.compare-body{padding:6px 20px 18px}
.compare-row{padding:13px 0;border-bottom:1px dashed #ece6d8}
.compare-row:last-child{border-bottom:0}
.compare-row b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.compare-row span{font-size:14px;color:var(--muted);line-height:1.75}

/* ---------- checklist ---------- */
.check-panel{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-xl);padding:34px 34px 30px;box-shadow:var(--shadow-sm);
}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin-top:22px}
.check-item{display:flex;gap:13px;padding:14px 0;border-bottom:1px dashed #ece6d8}
.check-item::before{
  content:"✓";flex:0 0 24px;width:24px;height:24px;border-radius:8px;
  display:grid;place-items:center;font-size:13px;font-weight:700;
  background:var(--gold-tint);color:var(--gold-deep);margin-top:2px;
}
.check-item b{display:block;font-size:15px;color:var(--ink);margin-bottom:3px}
.check-item span{font-size:14.2px;color:var(--muted);line-height:1.78}

/* ---------- faq ---------- */
.faq-list{display:grid;gap:12px;max-width:900px}
.faq-item{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-xs);overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item[open]{border-color:#ddcfae;box-shadow:var(--shadow-sm)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 22px;font-size:16px;font-weight:600;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:0 0 26px;width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;background:#f4efe2;color:var(--gold-deep);
  font-size:17px;font-weight:700;line-height:1;transition:transform .2s ease,background .2s ease;
}
.faq-item[open] summary::after{content:"−";background:var(--gold-tint)}
.faq-item summary:hover{color:var(--gold-deep)}
.faq-body{padding:0 22px 20px;font-size:15px;color:var(--muted);line-height:1.86}

/* ---------- cta ---------- */
.cta-block{
  position:relative;overflow:hidden;
  background:
    radial-gradient(700px 320px at 12% 0%,rgba(216,164,60,.22) 0%,rgba(216,164,60,0) 60%),
    linear-gradient(150deg,#0f1a24 0%,#1b2a38 100%);
  border-radius:var(--radius-xl);
  padding:52px 48px;color:#f3f0e8;
  box-shadow:var(--shadow-lg);
}
.cta-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;position:relative;z-index:1}
.cta-block h2{font-size:clamp(23px,3.2vw,32px);color:#fff;margin-bottom:14px}
.cta-block p{font-size:15.6px;color:#bcc7d2;line-height:1.86;max-width:620px}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}
.cta-links{display:grid;gap:10px;margin-top:20px}
.cta-links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-size:14.5px;color:#dfe5ec;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.cta-links a::after{content:"→";color:var(--gold)}
.cta-links a:hover{background:rgba(216,164,60,.14);border-color:rgba(216,164,60,.45);transform:translateX(3px)}

/* ---------- footer ---------- */
.site-footer{background:#0c141c;color:#94a1ad;padding:64px 0 28px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
.footer-brand .logo-text{color:#f2efe7}
.footer-brand .logo-text small{color:#8c99a6}
.footer-brand p{margin-top:18px;font-size:14.2px;line-height:1.85;color:#8e9aa6;max-width:340px}
.footer-col h4{font-size:14px;color:#f1eee5;letter-spacing:.08em;margin-bottom:16px;font-weight:700}
.footer-col ul{display:grid;gap:11px}
.footer-col a{font-size:14.2px;color:#93a0ac;transition:color .2s ease,padding-left .2s ease}
.footer-col a:hover{color:var(--gold);padding-left:4px}
.footer-bottom{
  margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13.4px;color:#78868f;
}
.f-links{display:flex;flex-wrap:wrap;gap:18px}
.f-links a{color:#8d9aa5}
.f-links a:hover{color:var(--gold)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-wrap{grid-template-columns:1fr;gap:32px}
  .cta-inner{grid-template-columns:1fr;gap:28px}
  .cta-actions{justify-content:flex-start}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1}
  .footer-brand p{max-width:none}
}
@media (max-width:860px){
  .nav{min-height:68px;gap:14px}
  .nav-toggle{display:inline-flex}
  .nav-cta{margin-left:0;padding:10px 16px;font-size:14px}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;padding:12px 16px 18px;
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(18,26,34,.12);
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:12px 12px;font-size:15.5px;border-radius:10px}
  .nav-links a.is-active::after{left:12px;right:auto;width:22px;bottom:8px}
  .hero{padding:52px 0 58px}
  .section{padding:58px 0}
  .section--tight{padding:48px 0}
  .tl-item{grid-template-columns:1fr;gap:8px;padding:20px 22px}
  .check-panel{padding:26px 22px}
  .check-grid{grid-template-columns:1fr}
  .cta-block{padding:38px 26px}
  .site-footer{padding:48px 0 24px}
}
@media (max-width:640px){
  .container{width:min(100% - 32px,var(--container))}
  .logo-text{font-size:15px}
  .logo-text small{display:none}
  .logo-mark{width:38px;height:38px;font-size:18px;border-radius:11px}
  .nav-cta{display:none}
  .group-grid{grid-template-columns:1fr}
  .role-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:29px}
  .hero-lead{font-size:15.6px}
  .panel{padding:22px 18px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:380px){
  .hero-actions .btn{width:100%}
  .stat-grid{grid-template-columns:1fr}
}

/* roulang page: category1 */
:root{
  --ink:#121a26;
  --ink-2:#2c3a4f;
  --muted:#5d6b7f;
  --line:#e3e0d8;
  --line-2:#d5d9e2;
  --bg:#f6f4ef;
  --surface:#ffffff;
  --brand:#1b3a5c;
  --brand-deep:#12283f;
  --brand-mid:#23507c;
  --brand-soft:#e8eef6;
  --accent:#c08427;
  --accent-soft:#faf2e2;
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow-s:0 1px 2px rgba(18,26,38,.06),0 2px 8px rgba(18,26,38,.05);
  --shadow:0 10px 30px rgba(18,26,38,.09);
  --shadow-l:0 24px 60px rgba(18,26,38,.14);
  --container:1160px;
  --font:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}
strong{font-weight:800;color:var(--brand-deep)}
:focus-visible{outline:3px solid rgba(192,132,39,.6);outline-offset:3px;border-radius:8px}
::selection{background:#f1dcb4;color:var(--brand-deep)}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}

/* ---------- 导航 ---------- */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(246,244,239,.93);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:16px;min-height:78px}
.logo{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto}
.logo-mark{
  width:44px;height:44px;border-radius:14px;
  background:linear-gradient(150deg,var(--brand-mid) 0%,var(--brand-deep) 100%);
  color:#f2d9a8;display:grid;place-items:center;
  font-size:20px;font-weight:800;letter-spacing:0;
  box-shadow:var(--shadow-s);flex:0 0 auto;
}
.logo-text{
  display:flex;flex-direction:column;
  font-size:16px;font-weight:800;line-height:1.25;
  letter-spacing:.3px;color:var(--brand-deep);
}
.logo-text small{font-size:11.5px;font-weight:500;letter-spacing:2.5px;color:var(--muted);margin-top:2px}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links a{
  position:relative;padding:9px 14px;border-radius:10px;
  font-size:15px;font-weight:600;color:var(--ink-2);
  transition:background .2s,color .2s,transform .2s;
}
.nav-links a:hover{color:var(--brand-deep);background:var(--brand-soft);transform:translateY(-1px)}
.nav-links a.is-active{color:var(--brand-deep);background:var(--brand-soft)}
.nav-links a.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;
  height:2px;border-radius:2px;background:var(--accent);
}
.nav-cta{
  margin-left:8px;padding:11px 20px;border-radius:12px;
  background:var(--brand-deep);color:#fff;
  font-size:14.5px;font-weight:700;white-space:nowrap;
  box-shadow:var(--shadow-s);
  transition:background .22s,transform .22s,box-shadow .22s;
}
.nav-cta:hover{background:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.nav-cta:active{transform:translateY(0)}
.nav-toggle{
  display:none;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line-2);background:#fff;
  place-items:center;
}
.nav-toggle span{
  display:block;width:18px;height:2px;background:var(--brand-deep);
  position:relative;border-radius:2px;transition:.2s;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;
  background:var(--brand-deep);border-radius:2px;transition:.2s;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* ---------- 按钮 / 标签 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:13px;
  font-size:15px;font-weight:700;line-height:1.2;
  transition:transform .22s,box-shadow .22s,background .22s,border-color .22s,color .22s;
}
.btn-primary{background:var(--brand-deep);color:#fff;box-shadow:0 10px 24px rgba(18,40,63,.22)}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 14px 30px rgba(192,132,39,.3)}
.btn-ghost{background:#fff;color:var(--brand-deep);border:1px solid var(--line-2);box-shadow:var(--shadow-s)}
.btn-ghost:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--brand-deep)}
.btn-light:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.btn-outline-light{border:1px solid rgba(255,255,255,.42);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:999px;
  background:var(--accent-soft);border:1px solid #ecdcb9;
  color:#8a5c11;font-size:13px;font-weight:700;
}
.chip-s{border-radius:999px;background:var(--brand-soft);border:1px solid #d3e0ef;color:var(--brand);padding:4px 11px;font-size:12.5px;font-weight:700;display:inline-flex}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:74px 0 68px;
  background:
    radial-gradient(860px 420px at 88% -10%, #e4ecf6 0%, rgba(228,236,246,0) 62%),
    linear-gradient(180deg,#fbfaf6 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.hero::after{
  content:"";position:absolute;right:-120px;bottom:-160px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(192,132,39,.13), rgba(192,132,39,0) 70%);
  pointer-events:none;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:52px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:800;letter-spacing:2.5px;
  color:#a06c1c;text-transform:uppercase;
}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--accent)}
.hero h1{
  margin-top:16px;
  font-size:clamp(30px,4vw,46px);
  line-height:1.22;font-weight:800;letter-spacing:-.6px;
  color:var(--brand-deep);
}
.hero h1 em{font-style:normal;color:var(--accent);position:relative;white-space:nowrap}
.hero .lead{margin-top:20px;font-size:17px;color:var(--ink-2);max-width:34em}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:30px;
  box-shadow:var(--shadow);
}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:18px;font-weight:800;color:var(--brand-deep);letter-spacing:0}
.panel-head span{font-size:12.5px;color:var(--muted);letter-spacing:1px}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}
.stat{padding:16px 6px;border-bottom:1px dashed #eae6dd}
.stat:nth-last-child(-n+2){border-bottom:0}
.stat-num{font-size:30px;font-weight:800;line-height:1.15;color:var(--brand-deep);letter-spacing:-.5px}
.stat-num i{font-style:normal;font-size:14px;font-weight:700;color:var(--accent);margin-left:3px}
.stat-label{font-size:13px;color:var(--muted);margin-top:3px}
.panel-note{
  margin-top:14px;padding:12px 14px;border-radius:12px;
  background:var(--accent-soft);border:1px solid #efe1c4;
  font-size:13px;color:#7f5714;line-height:1.6;
}

/* ---------- 快捷索引 ---------- */
.quick-index{background:#fff;border-bottom:1px solid var(--line)}
.qi-inner{display:flex;align-items:center;gap:10px;overflow-x:auto;padding:15px 0;scrollbar-width:none}
.qi-inner::-webkit-scrollbar{display:none}
.qi-inner .qi-label{font-size:12.5px;font-weight:800;letter-spacing:2px;color:var(--muted);white-space:nowrap;margin-right:4px}
.qi-inner a{
  white-space:nowrap;font-size:14px;font-weight:600;color:var(--ink-2);
  padding:8px 15px;border-radius:999px;background:var(--brand-soft);
  transition:background .2s,color .2s,transform .2s;
}
.qi-inner a:hover{background:var(--brand-deep);color:#fff;transform:translateY(-1px)}

/* ---------- 通用板块 ---------- */
.section{padding:76px 0}
.section-alt{background:#fbfaf6;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{max-width:740px;margin-bottom:38px}
.section-head h2{margin-top:14px;font-size:clamp(24px,2.7vw,33px);line-height:1.3;font-weight:800;letter-spacing:-.5px;color:var(--brand-deep)}
.section-head p{margin-top:14px;font-size:16px;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;
  box-shadow:var(--shadow-s);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfd8e6}
.card h3{font-size:18px;font-weight:800;color:var(--brand-deep);margin-bottom:10px;letter-spacing:-.2px}
.card p{font-size:15px;color:var(--muted)}
.card .chip-s{margin-bottom:14px}

/* 转折卡 */
.turn-card{
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:20px;
  padding:26px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-s);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.turn-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfd8e6}
.turn-num{
  width:58px;height:58px;border-radius:17px;
  background:linear-gradient(150deg,var(--brand-mid),var(--brand-deep));
  color:#f3dcae;display:grid;place-items:center;
  font-size:20px;font-weight:800;letter-spacing:-.5px;
}
.turn-card h3{font-size:17.5px;font-weight:800;color:var(--brand-deep);margin-bottom:8px}
.turn-card p{font-size:15px;color:var(--muted)}

/* 伏笔清单 */
.list-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-s)}
.list-block h3{display:flex;align-items:center;gap:10px;font-size:17.5px;font-weight:800;color:var(--brand-deep);margin-bottom:6px}
.list-block h3::before{content:"";width:6px;height:18px;border-radius:3px;background:var(--accent)}
.check-list{margin-top:12px}
.check-list li{
  display:flex;gap:12px;padding:14px 0;
  border-bottom:1px dashed #e7e2d8;font-size:15px;color:var(--ink-2);
}
.check-list li:last-child{border-bottom:0;padding-bottom:0}
.check-list li::before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--accent);margin-top:9px;
  box-shadow:0 0 0 4px rgba(192,132,39,.14);
}
.check-list li span{color:var(--brand-deep);font-weight:700;margin-right:2px}

/* 名场面 */
.scene-list{display:flex;flex-direction:column;gap:12px}
.scene-row{
  display:grid;grid-template-columns:190px minmax(0,1fr) 150px;
  gap:22px;align-items:center;
  padding:20px 24px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.scene-row:hover{transform:translateX(4px);box-shadow:var(--shadow-s);border-color:#cfd8e6}
.scene-name{font-size:16px;font-weight:800;color:var(--brand-deep)}
.scene-desc{font-size:14.5px;color:var(--muted)}
.meter-wrap{display:flex;flex-direction:column;gap:7px}
.meter-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);font-weight:600}
.meter-top b{color:var(--brand-deep);font-size:13px}
.meter{height:8px;border-radius:99px;background:#eae6dd;overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#c08427,#e2b562)}

/* 适合谁看 */
.aud-card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-s);
  transition:transform .25s,box-shadow .25s;
}
.aud-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.aud-icon{
  width:46px;height:46px;border-radius:14px;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:18px;font-weight:800;
  margin-bottom:16px;
}
.aud-card h3{font-size:17.5px;font-weight:800;color:var(--brand-deep);margin-bottom:10px}
.aud-card p{font-size:15px;color:var(--muted)}

/* FAQ */
.faq-wrap{max-width:840px}
.faq-item{
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:0 24px;margin-bottom:12px;
  transition:border-color .2s,box-shadow .2s;
}
.faq-item:hover{border-color:#cfd8e6}
.faq-item[open]{border-color:#c6d5e7;box-shadow:var(--shadow-s)}
.faq-item summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:19px 0;font-size:16.5px;font-weight:700;
  color:var(--brand-deep);cursor:pointer;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:22px;font-weight:700;color:var(--accent);
  line-height:1;transition:transform .2s;flex:0 0 auto;
}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding:0 0 22px;font-size:15px;color:var(--muted);max-width:64em}

/* CTA */
.cta-section{padding:0 0 84px}
.cta-band{
  position:relative;overflow:hidden;
  border-radius:var(--radius-l);
  padding:56px 56px;
  background:linear-gradient(135deg,#0f2437 0%,#1b3a5c 56%,#26547f 100%);
  color:#fff;
  box-shadow:var(--shadow-l);
}
.cta-band::before{
  content:"";position:absolute;right:-80px;top:-120px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,132,39,.32),rgba(192,132,39,0) 68%);
}
.cta-band::after{
  content:"";position:absolute;left:-60px;bottom:-160px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),rgba(255,255,255,0) 70%);
}
.cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center}
.cta-inner h2{font-size:clamp(24px,2.8vw,34px);line-height:1.3;font-weight:800;letter-spacing:-.5px}
.cta-inner p{margin-top:14px;font-size:16px;color:#c3d3e3;max-width:36em}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-end}

/* 页脚 */
.site-footer{background:#0d1b28;color:#a9b9ca;padding:64px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:38px}
.footer-brand .logo{margin-bottom:0}
.footer-brand .logo-mark{background:linear-gradient(150deg,#26547f,#12283f);color:#f2d9a8;box-shadow:none}
.footer-brand .logo-text{color:#fff}
.footer-brand .logo-text small{color:#7d92a7}
.footer-brand p{margin-top:18px;font-size:14.5px;line-height:1.85;color:#95a8bb;max-width:34ch}
.footer-col h4{font-size:14px;font-weight:800;color:#fff;letter-spacing:1.5px;margin-bottom:16px}
.footer-col li{margin-bottom:11px}
.footer-col a{font-size:14.5px;color:#95a8bb;transition:color .2s,transform .2s;display:inline-block}
.footer-col a:hover{color:#f0c680;transform:translateX(3px)}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:46px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13.5px;color:#8298ad;
}
.f-links{display:flex;flex-wrap:wrap;gap:18px}
.f-links a{color:#8298ad;transition:color .2s}
.f-links a:hover{color:#f0c680}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero{padding:58px 0 54px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:38px}
  .panel{max-width:620px}
  .section{padding:62px 0}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .cta-inner{grid-template-columns:minmax(0,1fr);gap:28px}
  .cta-actions{justify-content:flex-start}
  .cta-band{padding:46px 38px}
  .scene-row{grid-template-columns:160px minmax(0,1fr);gap:16px}
  .meter-wrap{grid-column:1 / -1}
}
@media (max-width:900px){
  .nav{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;min-height:0;padding:13px 0}
  .logo{grid-column:1;min-width:0}
  .nav-cta{grid-column:2;margin-left:0;padding:9px 15px;font-size:13.5px}
  .nav-toggle{grid-column:3;display:grid;margin-left:0}
  .nav-links{
    grid-column:1 / -1;display:none;flex-direction:column;
    align-items:stretch;gap:4px;margin:0;padding:6px 0 2px;
    border-top:1px solid var(--line);
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:12px 14px;font-size:15px}
  .nav-links a.is-active::after{display:none}
  .logo-text{font-size:15px}
  .logo-text small{letter-spacing:1.6px;font-size:11px}
}
@media (max-width:768px){
  .section{padding:52px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .hero h1{letter-spacing:-.3px}
  .hero .lead{font-size:16px}
  .card,.list-block,.panel{padding:24px}
  .scene-row{grid-template-columns:minmax(0,1fr);padding:20px}
  .turn-card{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px}
  .turn-num{width:48px;height:48px;border-radius:14px;font-size:17px}
  .cta-band{padding:38px 26px;border-radius:20px}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .container{padding:0 18px}
  .logo-mark{width:40px;height:40px;border-radius:12px;font-size:18px}
  .logo-text{font-size:14px}
  .logo-text small{display:none}
  .nav-cta{padding:8px 12px;font-size:12.5px;border-radius:10px}
  .hero{padding:42px 0 44px}
  .hero-actions{gap:10px}
  .hero-actions .btn{width:100%}
  .stat-grid{gap:2px}
  .stat-num{font-size:26px}
  .btn{padding:12px 20px;font-size:14.5px}
  .chip{font-size:12px;padding:5px 12px}
  .cta-actions .btn{width:100%}
  .faq-item{padding:0 18px}
  .faq-item summary{font-size:15.5px;padding:17px 0}
}

/* roulang page: category3 */
:root{
  --gold:#e9b44c;
  --gold-deep:#c98a1b;
  --gold-soft:#f6e3ba;
  --ink:#16130f;
  --ink-2:#221d17;
  --ink-3:#2f2820;
  --paper:#fdf9f2;
  --paper-2:#f6efe3;
  --white:#ffffff;
  --text:#1e1a15;
  --muted:#6f6558;
  --line:rgba(30,26,21,.12);
  --line-dark:rgba(255,255,255,.14);
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow-s:0 2px 8px rgba(30,26,21,.06);
  --shadow:0 14px 34px -18px rgba(30,26,21,.35);
  --shadow-l:0 30px 60px -30px rgba(30,26,21,.45);
  --space:clamp(56px,7vw,104px);
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

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

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

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

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

a{color:inherit;text-decoration:none;transition:color .22s ease,opacity .22s ease;}

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

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

h1,h2,h3,h4{margin:0 0 .6em;line-height:1.25;font-weight:800;letter-spacing:-.01em;color:var(--ink);}

p{margin:0 0 1em;}

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

:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:6px;}

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

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(22,19,15,.96);
  border-bottom:1px solid var(--line-dark);
  backdrop-filter:blur(10px);
}

.nav{
  display:flex;
  align-items:center;
  gap:24px;
  min-height:76px;
  padding:12px 0;
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#fff;
  flex-shrink:0;
}

.logo:hover{color:#fff;opacity:.9;}

.logo-mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  color:#241a06;
  font-weight:900;
  font-size:19px;
  box-shadow:0 8px 18px -8px rgba(233,180,76,.9);
}

.logo-text{
  display:flex;
  flex-direction:column;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.01em;
}

.logo-text small{
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  color:rgba(255,255,255,.55);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex-wrap:wrap;
}

.nav-links a{
  display:inline-block;
  padding:9px 15px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:600;
  color:rgba(255,255,255,.76);
  border:1px solid transparent;
  transition:all .22s ease;
}

.nav-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}

.nav-links a.is-active{
  color:#241a06;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  border-color:rgba(255,255,255,.2);
  box-shadow:0 10px 22px -14px rgba(233,180,76,.95);
}

.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:700;
  color:#241a06;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 28px -16px rgba(233,180,76,.95);
  white-space:nowrap;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.nav-cta:hover{
  color:#241a06;
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 20px 34px -16px rgba(233,180,76,.95);
}

.nav-cta:active{transform:translateY(0);}

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  margin-left:auto;
  border:1px solid var(--line-dark);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  position:relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  position:absolute;
  left:50%;
  width:20px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transform:translateX(-50%);
  transition:transform .25s ease,opacity .25s ease;
}

.nav-toggle span{top:50%;margin-top:-1px;}
.nav-toggle span::before{content:"";top:-7px;}
.nav-toggle span::after{content:"";top:7px;}

.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateX(-50%) rotate(45deg);top:0;}
.nav-toggle[aria-expanded="true"] span::after{transform:translateX(-50%) rotate(-45deg);top:0;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 15% -10%,rgba(233,180,76,.22),transparent 62%),
    radial-gradient(720px 380px at 92% 8%,rgba(233,180,76,.12),transparent 60%),
    linear-gradient(180deg,#16130f 0%,#1f1a14 62%,#241e17 100%);
  color:#fff;
  padding:clamp(48px,6vw,84px) 0 clamp(52px,6vw,92px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto -10% -60% 40%;
  height:420px;
  background:radial-gradient(closest-side,rgba(233,180,76,.18),transparent 70%);
  pointer-events:none;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,60px);
  align-items:center;
  position:relative;
  z-index:1;
}

.hero h1{
  color:#fff;
  font-size:clamp(29px,4vw,48px);
  line-height:1.2;
  margin-bottom:18px;
}

.hero h1 em{
  font-style:normal;
  color:var(--gold);
}

.hero p.lead{
  color:rgba(255,255,255,.78);
  font-size:clamp(15px,1.4vw,17.5px);
  max-width:56ch;
  margin-bottom:28px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 16px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--gold);
  background:rgba(233,180,76,.12);
  border:1px solid rgba(233,180,76,.32);
  margin-bottom:22px;
}

.eyebrow::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}

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

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 30px;
  border-radius:999px;
  font-size:15.5px;
  font-weight:700;
  border:1px solid transparent;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}

.btn-primary{
  color:#241a06;
  background:linear-gradient(145deg,var(--gold),var(--gold-deep));
  box-shadow:0 18px 34px -18px rgba(233,180,76,.95);
}

.btn-primary:hover{
  color:#241a06;
  transform:translateY(-2px);
  filter:brightness(1.06);
}

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

.btn-ghost:hover{
  color:#fff;
  background:rgba(255,255,255,.13);
  transform:translateY(-2px);
}

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

.btn-dark:hover{
  color:#fff;
  background:var(--ink-3);
  transform:translateY(-2px);
}

.btn-outline{
  color:var(--ink);
  border-color:rgba(30,26,21,.22);
  background:var(--white);
}

.btn-outline:hover{
  color:var(--ink);
  border-color:var(--gold-deep);
  background:var(--gold-soft);
  transform:translateY(-2px);
}

.hero-card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-l);
  padding:clamp(22px,3vw,32px);
  box-shadow:var(--shadow-l);
}

.hero-card h3{
  color:#fff;
  font-size:16px;
  letter-spacing:.02em;
  margin-bottom:18px;
}

.hero-card h3 span{
  color:var(--gold);
}

.steps-mini li{
  display:flex;
  gap:14px;
  padding:13px 0;
  border-bottom:1px dashed rgba(255,255,255,.14);
}

.steps-mini li:last-child{border-bottom:0;padding-bottom:0;}

.step-num{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:13px;
  font-weight:800;
  color:var(--gold);
  background:rgba(233,180,76,.14);
  border:1px solid rgba(233,180,76,.32);
}

.steps-mini strong{
  display:block;
  font-size:14.5px;
  color:#fff;
  margin-bottom:2px;
}

.steps-mini span{
  font-size:13px;
  color:rgba(255,255,255,.6);
  line-height:1.6;
}

/* ---------- section base ---------- */
.section{padding:var(--space) 0;}

.section-alt{background:var(--paper-2);}

.section-dark{
  background:linear-gradient(160deg,#16130f,#241e17 70%,#1c1710);
  color:rgba(255,255,255,.8);
}

.section-dark h2,.section-dark h3,.section-dark h4{color:#fff;}

.section-head{
  max-width:760px;
  margin-bottom:clamp(28px,3.4vw,46px);
}

.section-head.center{
  margin-inline:auto;
  text-align:center;
}

.section-tag{
  display:inline-block;
  padding:5px 14px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--gold-deep);
  background:rgba(233,180,76,.16);
  border:1px solid rgba(201,138,27,.28);
  margin-bottom:14px;
}

.section-dark .section-tag{
  color:var(--gold);
  background:rgba(233,180,76,.12);
  border-color:rgba(233,180,76,.3);
}

.section-head h2{
  font-size:clamp(23px,2.7vw,34px);
  margin-bottom:12px;
}

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

.section-dark .section-head p{color:rgba(255,255,255,.66);}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px);}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--shadow-s);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:rgba(201,138,27,.38);
}

.card .num{
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--gold-deep);
  margin-bottom:12px;
}

.card h3{
  font-size:18.5px;
  margin-bottom:10px;
}

.card p{
  color:var(--muted);
  font-size:14.8px;
  margin-bottom:16px;
}

.card .meta{
  margin-top:auto;
  font-size:13px;
  color:var(--gold-deep);
  font-weight:700;
}

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.tag{
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-3);
  background:var(--paper-2);
  border:1px solid var(--line);
}

.tag-gold{
  color:#5c3f06;
  background:var(--gold-soft);
  border-color:rgba(201,138,27,.35);
}

/* ---------- stats ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
  margin-top:clamp(28px,3vw,40px);
}

.stat{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:22px 24px;
}

.stat b{
  display:block;
  font-size:clamp(24px,2.6vw,32px);
  color:var(--gold);
  line-height:1.2;
  margin-bottom:4px;
}

.stat span{
  font-size:13.5px;
  color:rgba(255,255,255,.66);
}

/* ---------- route list ---------- */
.route{
  display:grid;
  gap:18px;
}

.route-item{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:clamp(16px,2.4vw,30px);
  align-items:start;
  background:var(--white);
  border:1px solid var(--line);
  border-left:4px solid var(--gold);
  border-radius:var(--radius);
  padding:clamp(20px,2.4vw,30px);
  box-shadow:var(--shadow-s);
  transition:transform .24s ease,box-shadow .24s ease;
}

.route-item:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.route-item .stage{
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--gold-deep);
  padding-top:4px;
}

.route-item .stage b{
  display:block;
  font-size:26px;
  color:var(--ink);
  letter-spacing:0;
  line-height:1.15;
  margin-top:4px;
}

.route-item h3{font-size:19px;margin-bottom:8px;}

.route-item p{color:var(--muted);font-size:14.8px;margin-bottom:12px;}

.route-item ul.ticks li{
  position:relative;
  padding-left:22px;
  font-size:14.4px;
  color:var(--ink-3);
  margin-bottom:6px;
}

.route-item ul.ticks li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:9px;
  height:9px;
  border-radius:3px;
  background:var(--gold);
  transform:rotate(45deg);
}

/* ---------- plan cards ---------- */
.plan{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px,2.6vw,30px);
  box-shadow:var(--shadow-s);
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}

.plan:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:rgba(201,138,27,.4);
}

.plan h3{
  font-size:18px;
  margin-bottom:8px;
}

.plan .sub{
  font-size:13.5px;
  color:var(--gold-deep);
  font-weight:700;
  margin-bottom:14px;
}

.plan ol{
  counter-reset:p;
  margin-bottom:18px;
}

.plan ol li{
  counter-increment:p;
  position:relative;
  padding-left:34px;
  font-size:14.5px;
  color:var(--ink-3);
  margin-bottom:10px;
}

.plan ol li::before{
  content:counter(p);
  position:absolute;
  left:0;
  top:1px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  color:var(--gold-deep);
  background:var(--paper-2);
  border:1px solid rgba(201,138,27,.25);
}

.plan .foot{
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--line);
  font-size:13.5px;
  color:var(--muted);
}

/* ---------- tips list ---------- */
.tips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
}

.tip{
  display:flex;
  gap:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);
  padding:clamp(18px,2.2vw,24px);
  transition:background .24s ease,border-color .24s ease,transform .24s ease;
}

.tip:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(233,180,76,.4);
  transform:translateY(-3px);
}

.tip .ico{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:16px;
  font-weight:800;
  color:var(--gold);
  background:rgba(233,180,76,.14);
  border:1px solid rgba(233,180,76,.3);
}

.tip h4{
  font-size:16px;
  margin-bottom:6px;
}

.tip p{
  font-size:14.2px;
  color:rgba(255,255,255,.66);
  margin:0;
}

/* ---------- rewatch ---------- */
.review-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}

.review{
  display:flex;
  gap:18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(20px,2.4vw,26px);
  box-shadow:var(--shadow-s);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}

.review:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:rgba(201,138,27,.4);
}

.review .index{
  flex:0 0 auto;
  font-size:24px;
  font-weight:900;
  color:var(--gold);
  line-height:1;
}

.review h4{font-size:16.5px;margin-bottom:6px;}

.review p{font-size:14.2px;color:var(--muted);margin:0;}

/* ---------- faq ---------- */
.faq{
  display:grid;
  gap:12px;
  max-width:900px;
  margin-inline:auto;
}

.faq details{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-s);
  transition:border-color .24s ease,box-shadow .24s ease;
  overflow:hidden;
}

.faq details[open]{
  border-color:rgba(201,138,27,.42);
  box-shadow:var(--shadow);
}

.faq summary{
  list-style:none;
  cursor:pointer;
  padding:19px 56px 19px 22px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  position:relative;
  transition:background .2s ease,color .2s ease;
}

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

.faq summary:hover{background:var(--paper-2);}

.faq summary::after{
  content:"";
  position:absolute;
  right:22px;
  top:50%;
  width:11px;
  height:11px;
  border-right:2.5px solid var(--gold-deep);
  border-bottom:2.5px solid var(--gold-deep);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .28s ease;
}

.faq details[open] summary::after{
  transform:translateY(-20%) rotate(-135deg);
}

.faq .answer{
  padding:0 22px 22px;
  font-size:14.8px;
  color:var(--muted);
  line-height:1.8;
}

/* ---------- cta ---------- */
.cta{
  background:
    radial-gradient(700px 300px at 12% 0%,rgba(233,180,76,.2),transparent 60%),
    linear-gradient(150deg,#16130f,#241e17);
  color:#fff;
  border-radius:var(--radius-l);
  padding:clamp(32px,4.4vw,60px);
  text-align:center;
  box-shadow:var(--shadow-l);
}

.cta h2{
  color:#fff;
  font-size:clamp(23px,2.8vw,34px);
  margin-bottom:14px;
}

.cta p{
  color:rgba(255,255,255,.72);
  max-width:640px;
  margin:0 auto 26px;
  font-size:15.5px;
}

.cta .hero-actions{justify-content:center;}

/* ---------- footer ---------- */
.site-footer{
  background:#12100c;
  color:rgba(255,255,255,.66);
  padding:clamp(40px,5vw,68px) 0 26px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:14.2px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(24px,3vw,44px);
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-brand .logo{margin-bottom:16px;}

.footer-brand p{
  font-size:13.8px;
  line-height:1.8;
  color:rgba(255,255,255,.55);
  max-width:34ch;
  margin:0;
}

.footer-col h4{
  color:#fff;
  font-size:14.5px;
  margin-bottom:14px;
  letter-spacing:.02em;
}

.footer-col li{margin-bottom:9px;}

.footer-col a{
  color:rgba(255,255,255,.6);
  font-size:13.8px;
  transition:color .2s ease,padding-left .2s ease;
}

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

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

.f-links{display:flex;flex-wrap:wrap;gap:16px;}

.f-links a{color:rgba(255,255,255,.55);font-size:13px;}

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

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-card{max-width:620px;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nav-links{gap:4px;}
  .nav-links a{padding:8px 12px;font-size:14px;}
}

@media (max-width:860px){
  .nav{gap:14px;min-height:68px;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    margin:0;
    padding:14px 22px 20px;
    background:rgba(22,19,15,.99);
    border-bottom:1px solid var(--line-dark);
    box-shadow:0 24px 40px -24px rgba(0,0,0,.8);
    display:none;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{
    padding:12px 16px;
    border-radius:12px;
    font-size:15px;
    border:1px solid rgba(255,255,255,.1);
  }
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr;}
  .tips,.review-list{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .route-item{grid-template-columns:1fr;gap:10px;}
  .route-item .stage{display:flex;align-items:baseline;gap:10px;padding-top:0;}
  .route-item .stage b{font-size:20px;margin-top:0;}
}

@media (max-width:520px){
  .container{width:min(1180px,100% - 32px);}
  .logo-text{font-size:14.5px;}
  .logo-text small{font-size:10px;letter-spacing:.1em;}
  .logo-mark{width:36px;height:36px;font-size:17px;border-radius:10px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .btn{width:100%;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .faq summary{font-size:15px;padding:16px 46px 16px 18px;}
  .faq .answer{padding:0 18px 18px;}
  .cta{padding:28px 20px;}
}