/* roulang page: index */
:root{
  --color-primary:#1A1D21;
  --color-primary-hover:#2B2F36;
  --color-secondary:#7A8B7A;
  --color-accent:#C9A063;
  --color-accent-hover:#D9B078;
  --color-bg:#F7F5F2;
  --color-surface:#FFFFFF;
  --color-surface-alt:#EFEBE5;
  --color-text:#22252A;
  --color-text-secondary:#5A5E66;
  --color-muted:#8E9298;
  --color-border:#E3DED6;
  --color-success:#4A7C59;
  --color-warning:#C87A2C;
  --color-danger:#B5483A;
  --font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",sans-serif;
  --font-heading:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-size-xs:12px;
  --font-size-sm:14px;
  --font-size-base:15px;
  --font-size-lg:17px;
  --font-size-xl:20px;
  --font-size-2xl:24px;
  --font-size-3xl:30px;
  --font-size-4xl:38px;
  --font-size-5xl:48px;
  --line-height-tight:1.3;
  --line-height-relaxed:1.75;
  --letter-spacing-tight:-0.02em;
  --letter-spacing-wide:0.05em;
  --container-max:1200px;
  --section-padding:80px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.12);
  --transition-base:all .25s ease;
  --header-height:72px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--color-primary);text-decoration:none;transition:var(--transition-base)}
a:hover{color:var(--color-accent)}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit}
.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}
.section{padding:var(--section-padding) 0}
.section-header{margin-bottom:48px;max-width:640px}
.section-tag{
  display:inline-block;
  font-size:var(--font-size-xs);
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
  color:var(--color-accent);
  font-weight:700;
  margin-bottom:12px;
  padding:4px 14px;
  border:1px solid rgba(201,160,99,.4);
  border-radius:100px;
  background:rgba(201,160,99,.06);
}
.section-title{
  font-size:var(--font-size-3xl);
  font-weight:800;
  line-height:var(--line-height-tight);
  letter-spacing:var(--letter-spacing-tight);
  color:var(--color-primary);
  margin-bottom:14px;
}
.section-desc{
  font-size:var(--font-size-lg);
  color:var(--color-text-secondary);
  line-height:var(--line-height-relaxed);
}
@media(max-width:768px){
  :root{--section-padding:48px}
  .section-title{font-size:var(--font-size-2xl)}
  .section-desc{font-size:var(--font-size-base)}
  .section-header{margin-bottom:32px}
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 26px;
  border-radius:var(--radius-md);
  font-size:var(--font-size-base);
  font-weight:600;
  line-height:1.4;
  transition:var(--transition-base);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{
  background:var(--color-primary);
  color:#fff;
}
.btn-primary:hover{
  background:var(--color-accent);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.btn-secondary{
  background:transparent;
  color:var(--color-primary);
  border-color:var(--color-border);
}
.btn-secondary:hover{
  border-color:var(--color-accent);
  color:var(--color-accent);
  background:rgba(201,160,99,.05);
  transform:translateY(-2px);
}
.btn-light{
  background:#fff;
  color:var(--color-primary);
}
.btn-light:hover{
  background:var(--color-accent);
  color:#fff;
  transform:translateY(-2px);
}
.btn-sm{
  padding:8px 18px;
  font-size:var(--font-size-sm);
}
.btn-lg{
  padding:15px 32px;
  font-size:var(--font-size-lg);
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:var(--header-height);
  background:rgba(245,243,240,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.25);
  transition:var(--transition-base);
}
.site-header.scrolled{
  background:rgba(245,243,240,.96);
  border-bottom-color:var(--color-border);
  box-shadow:var(--shadow-sm);
}
.site-header.scrolled .logo-text{color:var(--color-primary)}
.site-header.scrolled .main-nav a{color:var(--color-text)}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-height);
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.logo-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  background:var(--color-primary);
  color:var(--color-accent);
  font-weight:800;
  font-size:var(--font-size-sm);
  border-radius:10px;
  letter-spacing:0;
}
.logo-text{
  font-size:var(--font-size-lg);
  font-weight:800;
  color:var(--color-primary);
  letter-spacing:var(--letter-spacing-tight);
  line-height:1.2;
}
.main-nav{margin-left:32px}
.main-nav ul{display:flex;gap:32px;align-items:center}
.main-nav a{
  font-size:var(--font-size-base);
  font-weight:500;
  color:rgba(26,29,33,.85);
  padding:8px 2px;
  position:relative;
}
.main-nav a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:0;height:2px;
  background:var(--color-accent);
  transition:var(--transition-base);
  border-radius:2px;
}
.main-nav a:hover{color:var(--color-accent)}
.main-nav a:hover::after{width:100%}
.main-nav a.active{color:var(--color-primary);font-weight:700}
.main-nav a.active::after{width:100%}
.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.search-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:var(--radius-md);
  color:var(--color-text-secondary);
  font-size:var(--font-size-sm);
  transition:var(--transition-base);
  border:1px solid transparent;
}
.search-toggle:hover{
  color:var(--color-accent);
  background:rgba(201,160,99,.08);
  border-color:rgba(201,160,99,.2);
}
.search-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.hamburger{
  display:none;
  width:42px;height:42px;
  border-radius:var(--radius-md);
  align-items:center;
  justify-content:center;
  border:1px solid var(--color-border);
}
.hamburger svg{width:20px;height:20px;stroke:var(--color-primary);fill:none;stroke-width:2;stroke-linecap:round}
.mobile-menu{
  display:none;
  position:fixed;
  top:var(--header-height);
  left:0;right:0;bottom:0;
  background:var(--color-bg);
  z-index:99;
  padding:24px;
  overflow-y:auto;
}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;
  padding:16px 0;
  font-size:var(--font-size-xl);
  font-weight:700;
  color:var(--color-primary);
  border-bottom:1px solid var(--color-border);
}
.mobile-menu .btn{display:flex;margin-top:24px}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:calc(var(--header-height) + 48px) 0 80px;
  background:
    linear-gradient(115deg,rgba(10,11,13,.94) 0%,rgba(14,15,18,.85) 42%,rgba(20,21,24,.55) 100%),
    url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 180 Q60 160 120 170 Q200 184 300 160 Q420 130 540 155 Q660 180 780 150 Q900 120 1020 148 Q1100 168 1200 146 L1200 200 L0 200 Z' fill='rgba(201,160,99,0.05)'/%3E%3C/svg%3E") bottom/cover no-repeat;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:64px;
  align-items:center;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 16px;
  border-radius:100px;
  background:rgba(201,160,99,.12);
  border:1px solid rgba(201,160,99,.3);
  color:var(--color-accent);
  font-size:var(--font-size-xs);
  font-weight:600;
  letter-spacing:var(--letter-spacing-wide);
  margin-bottom:24px;
}
.hero-title{
  font-size:var(--font-size-5xl);
  font-weight:800;
  line-height:1.2;
  letter-spacing:var(--letter-spacing-tight);
  margin-bottom:20px;
  color:#fff;
}
.hero-title .accent{color:var(--color-accent)}
.hero-sub{
  font-size:var(--font-size-xl);
  line-height:var(--line-height-relaxed);
  color:rgba(255,255,255,.9);
  margin-bottom:28px;
  max-width:560px;
}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:36px;
}
.hero-trust{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  font-size:var(--font-size-sm);
  color:rgba(255,255,255,.75);
}
.hero-trust span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.hero-trust span::before{
  content:'';
  width:5px;height:5px;
  border-radius:50%;
  background:var(--color-accent);
}
.hero-card{
  background:rgba(26,29,33,.6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-xl);
  padding:32px;
  position:relative;
  overflow:hidden;
}
.hero-card::before{
  content:'';
  position:absolute;
  top:-30px;right:-30px;
  width:120px;height:120px;
  border-radius:50%;
  background:rgba(201,160,99,.15);
  filter:blur(40px);
}
.hero-card h4{
  font-size:var(--font-size-sm);
  font-weight:600;
  color:var(--color-accent);
  letter-spacing:var(--letter-spacing-wide);
  margin-bottom:18px;
  text-transform:uppercase;
}
.hero-card-list{display:flex;flex-direction:column;gap:14px}
.hero-card-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
  transition:var(--transition-base);
}
.hero-card-item:hover{
  background:rgba(255,255,255,.09);
  transform:translateX(4px);
}
.hero-card-item .hc-left{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--font-size-sm);
  color:rgba(255,255,255,.92);
}
.hero-card-item .hc-icon{
  width:30px;height:30px;
  border-radius:8px;
  background:rgba(201,160,99,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--font-size-xs);
  color:var(--color-accent);
}
.hero-card-item .hc-tag{
  font-size:var(--font-size-xs);
  padding:2px 10px;
  border-radius:100px;
  background:rgba(201,160,99,.2);
  color:var(--color-accent);
}

/* ---------- Categories ---------- */
.categories{
  background:var(--color-bg);
}
.categories .section-header{text-align:center;margin-left:auto;margin-right:auto}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.cat-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  transition:var(--transition-base);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cat-card::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:3px;
  background:var(--color-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.cat-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(201,160,99,.4);
}
.cat-card:hover::before{transform:scaleX(1)}
.cat-icon{
  width:48px;height:48px;
  border-radius:var(--radius-md);
  background:rgba(201,160,99,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  margin-bottom:18px;
  color:var(--color-accent);
}
.cat-card h3{
  font-size:var(--font-size-xl);
  font-weight:700;
  color:var(--color-primary);
  margin-bottom:8px;
  letter-spacing:var(--letter-spacing-tight);
}
.cat-card p{
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  line-height:1.6;
  margin-bottom:18px;
  flex-grow:1;
}
.cat-link{
  font-size:var(--font-size-sm);
  font-weight:600;
  color:var(--color-accent);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.cat-link .arrow{transition:transform .25s ease}
.cat-link:hover .arrow{transform:translateX(4px)}
.cat-link:hover{color:var(--color-primary)}

/* ---------- Scenarios ---------- */
.scenarios{
  background:var(--color-surface);
  border-block:1px solid var(--color-border);
}
.scenarios-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
}
.scenario-main{
  background:
    linear-gradient(120deg,rgba(10,11,13,.85) 0%,rgba(15,16,19,.7) 100%),
    url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
  border-radius:var(--radius-xl);
  padding:40px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:340px;
  position:relative;
  overflow:hidden;
}
.scenario-main h3{
  font-size:var(--font-size-2xl);
  font-weight:800;
  margin-bottom:12px;
  letter-spacing:var(--letter-spacing-tight);
}
.scenario-main p{
  font-size:var(--font-size-base);
  color:rgba(255,255,255,.85);
  line-height:1.75;
  max-width:420px;
  margin-bottom:20px;
}
.scenario-link{
  color:var(--color-accent);
  font-weight:600;
  font-size:var(--font-size-sm);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.scenario-side{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.scenario-card{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:28px;
  transition:var(--transition-base);
  flex:1;
}
.scenario-card:hover{
  border-color:rgba(201,160,99,.4);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.scenario-card .sc-icon{
  font-size:24px;
  margin-bottom:12px;
}
.scenario-card h4{
  font-size:var(--font-size-lg);
  font-weight:700;
  color:var(--color-primary);
  margin-bottom:8px;
}
.scenario-card p{
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  line-height:1.65;
}

/* ---------- Updates (CMS) ---------- */
.updates{
  background:var(--color-bg);
}
.updates-grid{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:48px;
  align-items:start;
}
.update-item{
  display:flex;
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid var(--color-border);
  transition:var(--transition-base);
}
.update-item:hover{background:rgba(201,160,99,.03)}
.update-item:last-child{border-bottom:none}
.update-thumb{
  width:120px;height:84px;
  border-radius:var(--radius-md);
  overflow:hidden;
  flex-shrink:0;
  background:var(--color-surface-alt);
}
.update-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:var(--transition-base);
}
.update-item:hover .update-thumb img{transform:scale(1.04)}
.update-content{flex:1;min-width:0}
.update-meta{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:var(--font-size-xs);
  color:var(--color-muted);
  margin-bottom:6px;
}
.update-meta .cat{
  color:var(--color-accent);
  font-weight:600;
  background:rgba(201,160,99,.1);
  padding:2px 10px;
  border-radius:100px;
}
.update-content h3{
  font-size:var(--font-size-lg);
  font-weight:700;
  line-height:1.45;
  margin-bottom:6px;
}
.update-content h3 a{
  color:var(--color-primary);
}
.update-content h3 a:hover{color:var(--color-accent)}
.update-content p{
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  line-height:1.6;
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.update-read{
  font-size:var(--font-size-xs);
  font-weight:600;
  color:var(--color-accent);
}
.sidebar{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.side-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:24px;
}
.side-card h4{
  font-size:var(--font-size-lg);
  font-weight:700;
  color:var(--color-primary);
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--color-border);
}
.side-list li{margin-bottom:4px}
.side-list a{
  display:block;
  padding:10px 0;
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  border-bottom:1px dashed var(--color-border);
  transition:var(--transition-base);
}
.side-list a:hover{
  color:var(--color-accent);
  padding-left:6px;
}
.side-list a .count{
  float:right;
  font-size:var(--font-size-xs);
  color:var(--color-muted);
  background:var(--color-bg);
  padding:2px 8px;
  border-radius:100px;
}
.side-search{
  display:flex;
  gap:8px;
}
.side-search input{
  flex:1;
  padding:10px 14px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  font-size:var(--font-size-sm);
  background:var(--color-bg);
  color:var(--color-text);
  transition:var(--transition-base);
  outline:none;
}
.side-search input:focus{
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px rgba(201,160,99,.15);
}
.side-search button{
  padding:10px 18px;
  border-radius:var(--radius-md);
  background:var(--color-primary);
  color:#fff;
  font-size:var(--font-size-sm);
  font-weight:600;
  transition:var(--transition-base);
}
.side-search button:hover{background:var(--color-accent)}
.empty-note{
  text-align:center;
  padding:48px 24px;
  color:var(--color-muted);
  font-size:var(--font-size-base);
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  border:1px dashed var(--color-border);
}

/* ---------- Stats Band ---------- */
.stats-band{
  background:var(--color-primary);
  padding:56px 0;
  color:#fff;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  text-align:center;
}
.stats-item .stat-icon{
  font-size:28px;
  margin-bottom:14px;
  color:var(--color-accent);
}
.stats-item h3{
  font-size:var(--font-size-xl);
  font-weight:800;
  margin-bottom:6px;
  color:#fff;
  letter-spacing:var(--letter-spacing-tight);
}
.stats-item p{
  font-size:var(--font-size-sm);
  color:rgba(255,255,255,.65);
  max-width:240px;
  margin:0 auto;
}

/* ---------- Guide ---------- */
.guide{
  background:var(--color-surface);
}
.guide-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.guide-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.guide-step{
  position:relative;
  padding:32px 24px;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  transition:var(--transition-base);
}
.guide-step:hover{
  border-color:rgba(201,160,99,.4);
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}
.step-num{
  font-size:var(--font-size-4xl);
  font-weight:800;
  color:transparent;
  -webkit-text-stroke:1.5px var(--color-accent);
  line-height:1;
  margin-bottom:14px;
  display:block;
}
.guide-step h4{
  font-size:var(--font-size-lg);
  font-weight:700;
  color:var(--color-primary);
  margin-bottom:8px;
}
.guide-step p{
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  line-height:1.65;
}

/* ---------- Reviews ---------- */
.reviews{
  background:var(--color-surface-alt);
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.review-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:28px;
  position:relative;
  transition:var(--transition-base);
}
.review-card:hover{
  border-color:var(--color-accent);
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}
.review-card .quote-mark{
  font-size:56px;
  line-height:1;
  color:rgba(201,160,99,.25);
  font-family:Georgia,serif;
  margin-bottom:8px;
}
.review-card p{
  font-size:var(--font-size-base);
  color:var(--color-text);
  line-height:1.7;
  margin-bottom:20px;
}
.review-user{
  display:flex;
  align-items:center;
  gap:12px;
}
.review-avatar{
  width:40px;height:40px;
  border-radius:50%;
  background:var(--color-primary);
  color:var(--color-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--font-size-sm);
  font-weight:700;
}
.review-user .ru-name{
  font-size:var(--font-size-sm);
  font-weight:700;
  color:var(--color-primary);
}
.review-user .ru-time{
  font-size:var(--font-size-xs);
  color:var(--color-muted);
}
.review-tag{
  margin-left:auto;
  font-size:var(--font-size-xs);
  color:var(--color-success);
  background:rgba(74,124,89,.1);
  padding:2px 10px;
  border-radius:100px;
}

/* ---------- Membership ---------- */
.membership{
  background:var(--color-bg);
}
.member-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.member-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  transition:var(--transition-base);
  display:flex;
  flex-direction:column;
}
.member-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.member-card.featured{
  border:2px solid var(--color-accent);
  position:relative;
  box-shadow:var(--shadow-lg);
  transform:scale(1.02);
}
.member-card.featured:hover{transform:scale(1.02) translateY(-4px)}
.member-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--color-accent);
  color:#fff;
  font-size:var(--font-size-xs);
  font-weight:700;
  padding:4px 16px;
  border-radius:100px;
  white-space:nowrap;
}
.member-card h4{
  font-size:var(--font-size-xl);
  font-weight:800;
  color:var(--color-primary);
  margin-bottom:6px;
  letter-spacing:var(--letter-spacing-tight);
}
.member-card .member-level{
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
  margin-bottom:18px;
}
.member-list{
  margin-bottom:24px;
  flex-grow:1;
}
.member-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:7px 0;
  font-size:var(--font-size-sm);
  color:var(--color-text-secondary);
}
.member-list li::before{
  content:'✓';
  color:var(--color-success);
  font-weight:700;
  flex-shrink:0;
}

/* ---------- FAQ ---------- */
.faq{
  background:var(--color-surface);
}
.faq-wrapper{
  max-width:800px;
  margin:0 auto;
}
.faq-item{
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  margin-bottom:14px;
  overflow:hidden;
  background:var(--color-bg);
  transition:var(--transition-base);
}
.faq-item[open]{
  border-color:rgba(201,160,99,.4);
  box-shadow:var(--shadow-sm);
}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  cursor:pointer;
  font-size:var(--font-size-base);
  font-weight:600;
  color:var(--color-primary);
  list-style:none;
  min-height:56px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--color-accent)}
.faq-item .faq-icon{
  width:30px;height:30px;
  border-radius:50%;
  border:1px solid var(--color-border);
  background:var(--color-surface);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:16px;
  position:relative;
  transition:var(--transition-base);
}
.faq-item[open] .faq-icon{
  border-color:var(--color-accent);
  transform:rotate(45deg);
}
.faq-item .faq-icon::before,
.faq-item .faq-icon::after{
  content:'';
  position:absolute;
  background:var(--color-primary);
  transition:var(--transition-base);
}
.faq-item .faq-icon::before{width:12px;height:2px}
.faq-item .faq-icon::after{width:2px;height:12px}
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after{background:var(--color-accent)}
.faq-answer{
  padding:0 24px 22px;
  font-size:var(--font-size-base);
  color:var(--color-text-secondary);
  line-height:1.75;
}

/* ---------- CTA ---------- */
.cta-section{
  background:
    linear-gradient(135deg,rgba(10,11,13,.92),rgba(26,20,14,.85)),
    url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;
  padding:96px 0;
  color:#fff;
  text-align:center;
  position:relative;
}
.cta-section::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 160 Q80 190 160 162 Q280 120 400 150 Q540 186 680 140 Q800 100 920 132 Q1060 170 1200 120 L1200 200 L0 200 Z' fill='rgba(255,255,255,0.02)'/%3E%3C/svg%3E") bottom/cover no-repeat;
  pointer-events:none;
}
.cta-inner{position:relative;z-index:2;max-width:640px;margin:0 auto}
.cta-section h2{
  font-size:var(--font-size-4xl);
  font-weight:800;
  line-height:1.3;
  letter-spacing:var(--letter-spacing-tight);
  margin-bottom:16px;
  color:#fff;
}
.cta-section p{
  font-size:var(--font-size-lg);
  color:rgba(255,255,255,.8);
  margin-bottom:32px;
  line-height:1.7;
}
.cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--color-primary);
  color:rgba(255,255,255,.7);
  padding:64px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr .8fr 1.2fr;
  gap:48px;
  padding-bottom:48px;
}
.footer-brand .logo-text{
  color:#fff;
  font-size:var(--font-size-xl);
  display:block;
  margin-bottom:14px;
}
.footer-brand p{
  font-size:var(--font-size-sm);
  line-height:1.7;
  color:rgba(255,255,255,.55);
  max-width:320px;
}
.footer-title{
  font-size:var(--font-size-base);
  font-weight:700;
  color:#fff;
  margin-bottom:18px;
  letter-spacing:var(--letter-spacing-wide);
}
.footer-links li{margin-bottom:10px}
.footer-links a{
  font-size:var(--font-size-sm);
  color:rgba(255,255,255,.55);
  transition:var(--transition-base);
}
.footer-links a:hover{color:var(--color-accent);padding-left:4px}
.footer-note{
  font-size:var(--font-size-xs);
  color:rgba(255,255,255,.4);
  line-height:1.7;
}
.footer-note .beian-placeholder{
  display:block;
  margin-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-size:var(--font-size-xs);
  color:rgba(255,255,255,.35);
}
.footer-bottom a{color:rgba(255,255,255,.5)}
.footer-bottom a:hover{color:var(--color-accent)}

/* ---------- Animations ---------- */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.hero .hero-inner>*{animation:fadeInUp .7s ease both}
.hero .hero-inner>*:nth-child(2){animation-delay:.15s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .scenarios-grid{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero{min-height:auto}
  .hero-card{max-width:480px}
  .updates-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .stats-grid{gap:24px}
}
@media(max-width:992px){
  .main-nav{display:none}
  .search-toggle{display:none}
  .hamburger{display:inline-flex}
}
@media(max-width:768px){
  .container{padding:0 20px}
  .hero-title{font-size:32px}
  .hero-sub{font-size:var(--font-size-lg)}
  .cat-grid{grid-template-columns:1fr 1fr;gap:16px}
  .cat-card{padding:22px 18px}
  .reviews-grid{grid-template-columns:1fr;gap:16px}
  .member-grid{grid-template-columns:1fr;gap:20px}
  .member-card.featured{transform:none}
  .member-card.featured:hover{transform:translateY(-4px)}
  .guide-steps{grid-template-columns:1fr;gap:16px}
  .stats-grid{grid-template-columns:1fr;gap:32px}
  .update-thumb{width:90px;height:68px}
  .update-content h3{font-size:var(--font-size-base)}
  .cta-section{padding:64px 0}
  .cta-section h2{font-size:var(--font-size-3xl)}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;text-align:center}
  .hero-actions .btn{flex:1;min-width:150px}
}
@media(max-width:520px){
  .cat-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .hero-trust{flex-direction:column;gap:10px}
  .scenario-main{padding:28px 22px;min-height:280px}
  .cta-actions{flex-direction:column}
  .cta-actions .btn{width:100%}
  .update-item{flex-direction:column}
  .update-thumb{width:100%;height:120px}
  .section-header{margin-bottom:28px}
}

/* roulang page: article */
:root{
  --color-primary:#1A1D21;
  --color-primary-hover:#C9A063;
  --color-secondary:#7A8B7A;
  --color-accent:#C9A063;
  --color-accent-light:#E8D9BC;
  --color-bg:#F7F5F2;
  --color-surface:#FFFFFF;
  --color-surface-alt:#F0EEE9;
  --color-text:#212529;
  --color-text-secondary:#5A5E66;
  --color-muted:#8A8F98;
  --color-border:#E6E2DC;
  --color-success:#4A7C59;
  --color-warning:#C87A2C;
  --color-danger:#B5483A;
  --font-body:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Helvetica Neue",sans-serif;
  --font-heading:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-size-xs:12px;
  --font-size-sm:14px;
  --font-size-base:15px;
  --font-size-lg:18px;
  --font-size-xl:24px;
  --font-size-2xl:32px;
  --font-size-3xl:40px;
  --font-size-4xl:48px;
  --font-size-5xl:56px;
  --line-height-tight:1.3;
  --line-height-relaxed:1.8;
  --letter-spacing-tight:-0.02em;
  --letter-spacing-wide:0.08em;
  --container-max:1200px;
  --section-padding:80px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.12);
  --transition-base:0.25s ease;
  --header-height:72px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,textarea{font-family:inherit;}
ul,ol{list-style:none;}
.container{max-width:var(--container-max);margin:0 auto;padding:0 24px;}
@media(max-width:768px){
  .container{padding:0 20px;}
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--font-size-base);font-weight:600;
  padding:12px 28px;border-radius:var(--radius-sm);
  border:1px solid transparent;transition:all var(--transition-base);
  line-height:1.2;text-align:center;white-space:nowrap;
}
.btn:focus-visible{outline:3px solid rgba(201,160,99,0.4);outline-offset:2px;}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-primary:hover{background:var(--color-primary-hover);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-outline{border-color:var(--color-border);background:transparent;color:var(--color-text);}
.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent);background:rgba(201,160,99,0.06);transform:translateY(-2px);}
.btn-light{background:#fff;color:var(--color-primary);}
.btn-light:hover{background:var(--color-accent);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-sm{padding:8px 16px;font-size:var(--font-size-sm);}
.btn-lg{padding:16px 36px;font-size:var(--font-size-lg);}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-height);
  background:rgba(247,245,242,0.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(230,226,220,0.7);
  transition:all 0.3s ease;
}
.site-header.scrolled{
  background:rgba(26,29,33,0.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-md);
  border-bottom-color:rgba(255,255,255,0.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:var(--color-accent);color:#1A1D21;
  font-size:20px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:-0.02em;box-shadow:0 2px 8px rgba(201,160,99,0.35);
}
.brand-text{font-size:var(--font-size-lg);font-weight:800;letter-spacing:-0.01em;color:var(--color-primary);transition:color 0.3s;}
.site-header.scrolled .brand-text{color:#fff;}
.main-nav{margin-left:40px;}
.main-nav ul{display:flex;gap:32px;}
.main-nav a{
  font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);
  padding:8px 0;position:relative;transition:color 0.3s;
}
.main-nav a::after{
  content:"";position:absolute;bottom:0;left:0;width:0;height:2px;
  background:var(--color-accent);transition:width 0.3s ease;
}
.main-nav a:hover{color:var(--color-accent);}
.main-nav a:hover::after{width:100%;}
.main-nav a.active{color:var(--color-accent);}
.main-nav a.active::after{width:100%;}
.site-header.scrolled .main-nav a{color:rgba(255,255,255,0.8);}
.site-header.scrolled .main-nav a:hover,.site-header.scrolled .main-nav a.active{color:var(--color-accent);}
.header-actions{display:flex;align-items:center;gap:16px;}
.header-search{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.6);border:1px solid var(--color-border);
  border-radius:100px;padding:7px 16px;color:var(--color-muted);
  font-size:var(--font-size-sm);transition:all 0.3s;cursor:pointer;
}
.header-search:hover{border-color:var(--color-accent);color:var(--color-accent);}
.site-header.scrolled .header-search{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15);color:rgba(255,255,255,0.6);}
.nav-toggle{
  display:none;width:44px;height:44px;border:none;background:transparent;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:var(--radius-sm);transition:background 0.3s;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--color-primary);border-radius:2px;transition:all 0.3s;}
.site-header.scrolled .nav-toggle span{background:#fff;}
.nav-toggle:hover{background:rgba(201,160,99,0.15);}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:992px){
  .main-nav{
    position:fixed;top:var(--header-height);left:0;right:0;
    background:var(--color-surface);box-shadow:var(--shadow-lg);
    max-height:0;overflow:hidden;transition:max-height 0.4s ease;
    margin-left:0;border-bottom:1px solid var(--color-border);
  }
  .main-nav.open{max-height:400px;}
  .main-nav ul{flex-direction:column;gap:0;padding:16px 24px;}
  .main-nav li{border-bottom:1px solid var(--color-border);}
  .main-nav li:last-child{border-bottom:none;}
  .main-nav a{display:block;padding:16px 0;font-size:var(--font-size-base);}
  .nav-toggle{display:flex;}
  .header-search{display:none;}
  .header-actions .btn{display:none;}
}

/* Article Hero */
.article-hero{
  position:relative;padding:160px 0 80px;
  background:linear-gradient(135deg,rgba(26,29,33,0.92) 0%,rgba(26,29,33,0.78) 100%),url(/assets/images/backpic/back-1.jpg) center/cover no-repeat;
  color:#fff;
}
.article-hero-inner{max-width:860px;}
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:var(--font-size-sm);color:rgba(255,255,255,0.6);margin-bottom:28px;
}
.breadcrumb a{color:rgba(255,255,255,0.75);transition:color 0.3s;}
.breadcrumb a:hover{color:var(--color-accent);}
.breadcrumb .sep{color:rgba(255,255,255,0.35);}
.breadcrumb .current{color:var(--color-accent-light);}
.article-badge{
  display:inline-block;background:rgba(201,160,99,0.18);
  border:1px solid rgba(201,160,99,0.4);
  color:var(--color-accent-light);font-size:var(--font-size-xs);
  font-weight:600;letter-spacing:var(--letter-spacing-wide);
  padding:6px 18px;border-radius:100px;margin-bottom:20px;
}
.article-hero h1{
  font-size:var(--font-size-4xl);font-weight:800;line-height:1.25;
  letter-spacing:var(--letter-spacing-tight);margin-bottom:24px;color:#fff;
}
.article-meta{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  font-size:var(--font-size-sm);color:rgba(255,255,255,0.65);
}
.article-meta .meta-item{display:flex;align-items:center;gap:6px;}
@media(max-width:768px){
  .article-hero{padding:130px 0 56px;}
  .article-hero h1{font-size:var(--font-size-2xl);}
}

/* Article Body */
.article-section{padding:64px 0 48px;}
.article-layout{max-width:820px;margin:0 auto;}
.article-content{
  background:var(--color-surface);border-radius:var(--radius-lg);
  border:1px solid var(--color-border);box-shadow:var(--shadow-sm);
  padding:48px 56px;margin-bottom:40px;
}
.article-content h2{
  font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:800;
  margin:40px 0 16px;color:var(--color-primary);line-height:1.4;
  letter-spacing:-0.01em;
}
.article-content h2:first-child{margin-top:0;}
.article-content h3{
  font-size:var(--font-size-lg);font-weight:700;margin:28px 0 12px;
  color:var(--color-primary);line-height:1.4;
}
.article-content p{font-size:15.5px;line-height:1.85;color:#3A3E44;margin-bottom:20px;}
.article-content a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px;}
.article-content a:hover{color:var(--color-primary-hover);}
.article-content img{border-radius:var(--radius-md);box-shadow:var(--shadow-md);margin:28px 0;}
.article-content blockquote{
  border-left:4px solid var(--color-accent);background:var(--color-surface-alt);
  padding:16px 24px;border-radius:0 var(--radius-md) var(--radius-md) 0;
  margin:24px 0;font-size:var(--font-size-base);color:var(--color-text-secondary);
}
.article-content ul,.article-content ol{margin:0 0 22px;padding-left:24px;}
.article-content ul{list-style:disc;}
.article-content ol{list-style:decimal;}
.article-content li{margin-bottom:8px;line-height:1.75;color:#3A3E44;}
.article-content table{width:100%;border-collapse:collapse;margin:28px 0;font-size:var(--font-size-sm);}
.article-content th,.article-content td{
  border:1px solid var(--color-border);padding:12px 16px;text-align:left;
}
.article-content th{background:var(--color-surface-alt);font-weight:700;color:var(--color-primary);}
.article-content tr:nth-child(even) td{background:rgba(247,245,242,0.4);}
.article-content hr{border:none;border-top:1px solid var(--color-border);margin:40px 0;}

.article-tags{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  border-top:1px solid var(--color-border);padding-top:28px;margin-top:36px;
}
.article-tags .tag-label{font-size:var(--font-size-sm);color:var(--color-muted);margin-right:4px;}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--color-surface-alt);border:1px solid var(--color-border);
  color:var(--color-text-secondary);font-size:var(--font-size-xs);
  font-weight:500;padding:4px 14px;border-radius:100px;transition:all 0.3s;
}
.tag:hover{border-color:var(--color-accent);color:var(--color-accent);}
.article-footer-actions{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  margin-top:32px;
}
.article-footer-actions .btn i{margin-right:6px;}

.not-found{
  background:var(--color-surface);border-radius:var(--radius-lg);
  border:1px solid var(--color-border);box-shadow:var(--shadow-sm);
  padding:64px 48px;text-align:center;
}
.not-found h2{font-size:var(--font-size-2xl);font-weight:800;color:var(--color-primary);margin-bottom:16px;}
.not-found p{color:var(--color-text-secondary);font-size:var(--font-size-base);margin-bottom:32px;}

@media(max-width:768px){
  .article-section{padding:40px 0 32px;}
  .article-content{padding:28px 24px;}
  .article-content h2{font-size:var(--font-size-xl);}
  .article-content p{font-size:15px;}
  .article-footer-actions{flex-direction:column;align-items:flex-start;}
}

/* Related Section */
.related-section{padding:80px 0;background:var(--color-surface-alt);}
.section-head{margin-bottom:48px;}
.section-kicker{
  display:block;font-size:var(--font-size-xs);font-weight:700;
  letter-spacing:var(--letter-spacing-wide);color:var(--color-accent);
  text-transform:uppercase;margin-bottom:12px;
}
.section-head h2{
  font-size:var(--font-size-2xl);font-weight:800;color:var(--color-primary);
  letter-spacing:var(--letter-spacing-tight);margin-bottom:12px;
}
.section-head p{color:var(--color-text-secondary);font-size:var(--font-size-base);max-width:560px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.related-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);overflow:hidden;transition:all 0.3s ease;display:flex;flex-direction:column;
}
.related-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(201,160,99,0.5);
}
.related-card .card-img{aspect-ratio:16/10;overflow:hidden;}
.related-card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;}
.related-card:hover .card-img img{transform:scale(1.04);}
.related-card .card-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.related-card .card-tag{
  align-self:flex-start;font-size:var(--font-size-xs);font-weight:600;
  background:rgba(201,160,99,0.12);color:var(--color-accent);
  padding:4px 12px;border-radius:100px;margin-bottom:12px;
}
.related-card h3{font-size:var(--font-size-lg);font-weight:700;line-height:1.4;color:var(--color-primary);margin-bottom:10px;}
.related-card h3 a{transition:color 0.3s;}
.related-card h3 a:hover{color:var(--color-accent);}
.related-card .card-desc{
  font-size:var(--font-size-sm);color:var(--color-text-secondary);
  line-height:1.65;margin-bottom:20px;flex:1;
}
.related-card .card-meta{font-size:var(--font-size-xs);color:var(--color-muted);display:flex;gap:14px;}
@media(max-width:992px){
  .related-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .related-section{padding:48px 0;}
  .related-grid{grid-template-columns:1fr;}
  .section-head h2{font-size:var(--font-size-xl);}
}

/* CTA Section */
.cta-section{
  position:relative;padding:96px 0;background:var(--color-primary);
  color:#fff;text-align:center;overflow:hidden;
}
.cta-section::before{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;
  background:url(/assets/images/backpic/back-3.jpg) center/cover no-repeat;
  opacity:0.15;pointer-events:none;
}
.cta-inner{position:relative;z-index:1;max-width:680px;margin:0 auto;}
.cta-inner h2{font-size:var(--font-size-3xl);font-weight:800;margin-bottom:16px;letter-spacing:-0.02em;}
.cta-inner p{color:rgba(255,255,255,0.75);font-size:var(--font-size-lg);margin-bottom:40px;line-height:1.7;}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
@media(max-width:768px){
  .cta-section{padding:64px 0;}
  .cta-inner h2{font-size:var(--font-size-2xl);}
  .cta-buttons .btn{width:100%;}
}

/* Footer */
.site-footer{background:var(--color-primary);color:rgba(255,255,255,0.7);padding:72px 0 28px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:48px;margin-bottom:48px;}
.footer-brand .logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;background:var(--color-accent);
  color:var(--color-primary);font-size:22px;font-weight:800;
}
.footer-brand .logo-text{display:inline-block;font-size:var(--font-size-xl);font-weight:800;color:#fff;margin-left:10px;}
.footer-brand p{margin-top:16px;font-size:var(--font-size-sm);line-height:1.7;color:rgba(255,255,255,0.55);max-width:280px;}
.footer-title{
  font-size:var(--font-size-sm);font-weight:700;color:#fff;
  letter-spacing:var(--letter-spacing-wide);margin-bottom:20px;
}
.footer-links{display:flex;flex-direction:column;gap:12px;}
.footer-links a{font-size:var(--font-size-sm);color:rgba(255,255,255,0.6);transition:color 0.3s;}
.footer-links a:hover{color:var(--color-accent);}
.footer-note{font-size:var(--font-size-xs);line-height:1.8;color:rgba(255,255,255,0.45);}
.footer-note .beian-placeholder{display:inline-block;margin-top:6px;color:rgba(255,255,255,0.35);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);padding-top:28px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:var(--font-size-xs);color:rgba(255,255,255,0.4);
}
.footer-bottom a{color:rgba(255,255,255,0.5);transition:color 0.3s;}
.footer-bottom a:hover{color:var(--color-accent);}
@media(max-width:992px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media(max-width:768px){
  .site-footer{padding:56px 0 24px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;text-align:center;}
}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}

/* roulang page: category1 */
:root {
    --color-primary: #1A1D21;
    --color-primary-hover: #2A2E33;
    --color-secondary: #7A8B7A;
    --color-accent: #C9A063;
    --color-accent-hover: #D4A96A;
    --color-bg: #F7F5F2;
    --color-surface: #FFFFFF;
    --color-surface-alt: #F0EDE8;
    --color-text: #22252A;
    --color-text-secondary: #555B61;
    --color-muted: #8A8F96;
    --color-border: #E6E2DC;
    --color-success: #4A7C59;
    --color-warning: #C87A2C;
    --color-danger: #B5483A;
    --font-body: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', -apple-system, sans-serif;
    --font-heading: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', -apple-system, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --line-height-tight: 1.3;
    --line-height-relaxed: 1.75;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-wide: 0.04em;
    --container-max: 1200px;
    --section-padding: 80px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
    --transition-base: all 0.25s ease;
    --header-height: 76px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

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

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: none;
    outline: none;
    background: none;
}

ul, ol {
    list-style: none;
}

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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    background: rgba(247, 245, 242, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(230, 226, 220, 0.72);
    transition: var(--transition-base);
}

.site-header.scrolled {
    background: rgba(247, 245, 242, 0.96);
    box-shadow: var(--shadow-md);
    border-bottom-color: transparent;
}

.header-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    gap: 32px;
}

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: var(--color-accent);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.logo-text {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: var(--letter-spacing-tight);
    white-space: nowrap;
}

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

.main-nav a {
    display: inline-block;
    padding: 10px 16px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.main-nav a:hover {
    color: var(--color-accent);
    background: rgba(201, 160, 99, 0.1);
}

.main-nav a.active {
    color: var(--color-accent);
    background: rgba(201, 160, 99, 0.12);
}

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

.header-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.6);
    transition: var(--transition-base);
    cursor: pointer;
}

.header-search:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-base);
    white-space: nowrap;
    border: 1px solid transparent;
}

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

.btn-primary:hover {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(201, 160, 99, 0.3);
}

.btn-outline {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-2px);
}

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

.btn-light:hover {
    background: var(--color-accent);
    color: #fff;
    transform: translateY(-2px);
}

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

.btn-ghost-light:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: rgba(255,255,255,0.06);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.nav-toggle:hover {
    background: rgba(0,0,0,0.04);
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text);
    margin: 3px 0;
    border-radius: 2px;
    transition: var(--transition-base);
}

.hero {
    background: linear-gradient(rgba(26, 29, 33, 0.88), rgba(26, 29, 33, 0.94)), url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
    padding: calc(var(--header-height) + 80px) 0 80px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
}

.hero-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.65);
}

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

.hero-breadcrumb .sep {
    opacity: 0.4;
}

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

.hero h1 {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 16px;
    color: #fff;
}

.hero-sub {
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 28px;
    max-width: 560px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.55);
}

.trust-item svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-accent);
}

.hero-panel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: 28px;
    backdrop-filter: blur(6px);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.panel-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #fff;
    letter-spacing: var(--letter-spacing-wide);
}

.panel-badge {
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    background: rgba(201, 160, 99, 0.15);
    padding: 4px 10px;
    border-radius: 999px;
}

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: var(--transition-base);
}

.rank-item:hover {
    border-color: rgba(201, 160, 99, 0.3);
    background: rgba(255, 255, 255, 0.07);
}

.rank-num {
    font-size: var(--font-size-sm);
    font-weight: 800;
    color: var(--color-accent);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.rank-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
}

.rank-hot {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

.breadcrumb-section {
    padding: 24px 0 0;
}

.breadcrumb-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    flex-wrap: wrap;
}

.breadcrumb-inner a {
    color: var(--color-text-secondary);
}

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

.breadcrumb-inner .sep {
    opacity: 0.35;
}

.breadcrumb-inner .current {
    color: var(--color-accent);
    font-weight: 600;
}

.section {
    padding: var(--section-padding) 0;
}

.section-alt {
    background: var(--color-surface);
}

.section-head {
    max-width: var(--container-max);
    margin: 0 auto 48px;
    padding: 0 24px;
}

.section-tag {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: 12px;
}

.section-head h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 12px;
}

.section-head p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    max-width: 640px;
    line-height: 1.7;
}

.intro-section {
    padding: 40px 0 0;
}

.intro-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.intro-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-llg, 20px);
    padding: 36px;
    box-shadow: var(--shadow-sm);
}

.intro-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: var(--letter-spacing-tight);
}

.intro-card p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.intro-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--color-surface-alt);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: var(--transition-base);
}

.tag-chip:hover {
    background: rgba(201, 160, 99, 0.12);
    color: var(--color-accent);
}

.tag-chip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

.cat-section {
    padding: 60px 0 80px;
}

.cat-layout {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

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

.cat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
}

.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

.cat-card-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
    background: var(--color-surface-alt);
}

.cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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

.cat-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 29, 33, 0.08), transparent);
}

.cat-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cat-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.badge-hot {
    background: rgba(200, 122, 44, 0.12);
    color: var(--color-warning);
}

.badge-new {
    background: rgba(74, 124, 89, 0.12);
    color: var(--color-success);
}

.badge-rec {
    background: rgba(201, 160, 99, 0.15);
    color: var(--color-accent);
}

.cat-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin-bottom: 10px;
    letter-spacing: var(--letter-spacing-tight);
}

.cat-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
    flex: 1;
}

.cat-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-muted);
}

.cat-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent);
    transition: var(--transition-base);
}

.cat-card-link:hover {
    gap: 8px;
    color: var(--color-accent-hover);
}

.cat-card-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: calc(var(--header-height) + 24px);
}

.sidebar-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.sidebar-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.sidebar-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 32px;
    height: 2px;
    background: var(--color-accent);
}

.search-box {
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 12px 48px 12px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    transition: var(--transition-base);
}

.search-box input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(201, 160, 99, 0.15);
    background: #fff;
}

.search-box button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    transition: var(--transition-base);
}

.search-box button:hover {
    background: var(--color-accent);
}

.search-box button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.sidebar-nav ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.sidebar-nav a:hover {
    background: rgba(201, 160, 99, 0.08);
    color: var(--color-accent);
}

.sidebar-nav a.active {
    background: rgba(201, 160, 99, 0.1);
    color: var(--color-accent);
    font-weight: 600;
}

.sidebar-nav .nav-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    font-size: 14px;
}

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

.sidebar-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-border);
}

.sidebar-list-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-list-item a {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
    transition: var(--transition-base);
}

.sidebar-list-item a:hover {
    color: var(--color-accent);
}

.sidebar-list-meta {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
}

.scene-section {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.scene-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.scene-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.scene-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.scene-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(201, 160, 99, 0.4);
}

.scene-card:hover::before {
    transform: scaleX(1);
}

.scene-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 160, 99, 0.12);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    color: var(--color-accent);
}

.scene-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}

.scene-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: var(--letter-spacing-tight);
}

.scene-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 18px;
}

.scene-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent);
    transition: var(--transition-base);
}

.scene-link:hover {
    gap: 8px;
}

.member-section {
    background: var(--color-bg);
}

.member-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.member-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    transition: var(--transition-base);
    position: relative;
}

.member-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.member-card.featured {
    border: 2px solid var(--color-accent);
    box-shadow: 0 8px 24px rgba(201, 160, 99, 0.15);
    transform: scale(1.02);
}

.member-card.featured:hover {
    transform: scale(1.02) translateY(-4px);
}

.member-flag {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.member-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: var(--letter-spacing-tight);
}

.member-desc {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    margin-bottom: 22px;
}

.member-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    margin-bottom: 26px;
}

.member-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.member-list .check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 124, 89, 0.12);
    border-radius: 50%;
    color: var(--color-success);
    font-size: 12px;
    margin-top: 2px;
}

.faq-section {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

.faq-wrap {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 24px;
}

.faq-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    overflow: hidden;
    transition: var(--transition-base);
}

.faq-item[open] {
    border-color: rgba(201, 160, 99, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.faq-item summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    min-height: 44px;
    user-select: none;
}

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

.faq-q-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 160, 99, 0.15);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 800;
    border-radius: 50%;
}

.faq-q-text {
    flex: 1;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
}

.faq-toggle {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    transition: var(--transition-base);
}

.faq-item[open] .faq-toggle {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: rgba(201, 160, 99, 0.1);
}

.faq-toggle svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.faq-answer {
    padding: 0 20px 20px 62px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.75;
}

.faq-cta-bar {
    max-width: 840px;
    margin: 24px auto 0;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.faq-cta-bar span {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.faq-cta-bar a {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-base);
}

.faq-cta-bar a:hover {
    gap: 8px;
}

.cta-section {
    background: linear-gradient(rgba(26, 29, 33, 0.92), rgba(26, 29, 33, 0.96)), url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.cta-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.cta-inner h2 {
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 800;
    color: #fff;
    line-height: var(--line-height-tight);
    margin-bottom: 16px;
    letter-spacing: var(--letter-spacing-tight);
}

.cta-inner p {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.72);
    max-width: 560px;
    margin: 0 auto 36px;
    line-height: 1.7;
}

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

.site-footer {
    background: var(--color-primary);
    color: rgba(255, 255, 255, 0.7);
    padding: 64px 0 0;
    font-size: var(--font-size-sm);
}

.footer-grid {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
}

.footer-brand p {
    margin-top: 16px;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.75;
}

.footer-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: var(--letter-spacing-tight);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-sm);
    transition: var(--transition-base);
}

.footer-links a:hover {
    color: var(--color-accent);
}

.footer-note {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.75;
}

.beian-placeholder {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.3);
}

.footer-bottom {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 28px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.35);
    font-size: var(--font-size-xs);
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.4);
}

.footer-bottom a:hover {
    color: var(--color-accent);
}

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

    .cat-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

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

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

@media (max-width: 768px) {
    :root {
        --section-padding: 56px;
    }

    .main-nav {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        padding: 16px 24px;
    }

    .main-nav.open {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .main-nav a {
        display: block;
        padding: 14px 16px;
        font-size: var(--font-size-base);
    }

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

    .header-search {
        display: none;
    }

    .header-actions .btn {
        display: none;
    }

    .hero {
        padding: calc(var(--header-height) + 48px) 0 56px;
    }

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

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

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

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

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

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

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

    .member-card.featured {
        transform: scale(1);
    }

    .member-card.featured:hover {
        transform: translateY(-4px);
    }

    .faq-cta-bar {
        flex-direction: column;
        text-align: center;
    }

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

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

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

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

@media (max-width: 520px) {
    .container,
    .header-inner,
    .hero-inner,
    .breadcrumb-inner,
    .section-head,
    .intro-grid,
    .cat-layout,
    .scene-grid,
    .member-grid,
    .faq-wrap,
    .cta-inner,
    .footer-grid,
    .footer-bottom {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-panel {
        padding: 20px;
    }

    .cat-card-body {
        padding: 20px;
    }

    .intro-card {
        padding: 24px;
    }

    .member-card {
        padding: 28px 22px;
    }

    .scene-card {
        padding: 26px 22px;
    }

    .site-header.scrolled .logo-text {
        font-size: var(--font-size-base);
    }

    .logo-badge {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}