/* roulang page: index */
/* ===== Design Tokens ===== */
:root{
  --primary:#C73E3A;
  --primary-dark:#A9322C;
  --accent:#D87632;
  --accent2:#C99020;
  --bg-warm:#F7F4EF;
  --bg-light:#FCFBF8;
  --bg-dark:#1C1917;
  --text-main:#1C1917;
  --text-secondary:#57534E;
  --text-muted:#8C8580;
  --text-invert:#FAF9F6;
  --border:#E7E2DC;
  --success:#2D6A4F;
  --error:#B3261E;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --shadow-sm:0 1px 3px rgba(28,25,23,.08);
  --shadow-hover:0 10px 24px rgba(28,25,23,.12);
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-serif:"Noto Serif SC","Songti SC",SimSun,serif;
}

/* ===== Reset / Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg-warm);
  color:var(--text-main);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}

::selection{background:rgba(199,62,58,.2)}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:var(--bg-warm)}
body::-webkit-scrollbar-thumb{background:#C9BEB5;border-radius:5px}
body::-webkit-scrollbar-thumb:hover{background:var(--primary)}

/* ===== Container ===== */
.container{max-width:80rem;margin:0 auto;padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.container{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1024px){.container{padding-left:2rem;padding-right:2rem}}

/* ===== Topbar ===== */
.topbar{background:var(--primary);height:34px;display:flex;align-items:center;overflow:hidden}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.topbar-brand{color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.topbar-brand em{font-style:normal;background:rgba(255,255,255,.2);padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
.topbar-ticker{color:rgba(255,255,255,.92);font-size:12px;display:flex;gap:24px;overflow:hidden;white-space:nowrap}
.topbar-ticker span{display:inline-flex;align-items:center;gap:4px}
.topbar-ticker i{width:5px;height:5px;background:#FCD34D;border-radius:50%;display:inline-block}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,244,239,.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:900;color:var(--text-main);letter-spacing:.02em}
.brand-mark{width:10px;height:10px;background:var(--primary);border-radius:2px;display:inline-block;transform:rotate(8deg)}
.brand:hover{color:var(--primary)}
.main-nav{display:none;align-items:center;gap:8px}
@media(min-width:1024px){.main-nav{display:flex}}
.nav-link{
  padding:8px 14px;font-size:15px;font-weight:500;color:var(--text-secondary);
  border-radius:var(--radius-sm);position:relative;transition:color .2s,background .2s;
}
.nav-link:hover{color:var(--primary);background:rgba(199,62,58,.06)}
.nav-link.active{color:var(--primary);font-weight:700}
.nav-link.active::after{
  content:'';position:absolute;left:14px;right:14px;bottom:-2px;height:2px;
  background:var(--primary);border-radius:2px;
}
.nav-cta{display:none}
@media(min-width:1024px){.nav-cta{display:inline-flex}}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;line-height:1.2;
  padding:12px 24px;border-radius:var(--radius-md);
  border:2px solid transparent;cursor:pointer;
  transition:all .2s ease;white-space:nowrap;
}
.btn:focus-visible{outline:2px solid rgba(199,62,58,.7);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:var(--shadow-hover)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:rgba(199,62,58,.06)}
.btn-light{background:#fff;color:var(--primary);border-color:#fff}
.btn-light:hover{background:#F3EDE7}
.btn-lg{padding:15px 32px;font-size:16px}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-block{display:flex;width:100%}

/* ===== Hero ===== */
.hero-section{
  position:relative;
  background:var(--bg-dark);
  color:var(--text-invert);
  overflow:hidden;
  padding:64px 0 72px;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.22;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(28,25,23,.95) 0%,rgba(28,25,23,.65) 55%,rgba(28,25,23,.35) 100%);
}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr;gap:48px;
}
@media(min-width:1024px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
}
.hero-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;
  color:rgba(255,255,255,.88);margin-bottom:20px;
}
.hero-chip i{width:6px;height:6px;background:var(--primary);border-radius:50%}
.hero-title{
  font-size:42px;line-height:1.15;font-weight:900;
  margin-bottom:14px;letter-spacing:.01em;
}
@media(min-width:640px){.hero-title{font-size:52px}}
@media(min-width:1024px){.hero-title{font-size:58px}}
.title-accent{color:var(--primary);font-family:var(--font-serif);font-weight:800}
.hero-sub{
  font-size:18px;font-weight:600;color:rgba(255,255,255,.95);
  margin-bottom:16px;line-height:1.5;
}
@media(min-width:640px){.hero-sub{font-size:21px}}
.hero-desc{
  font-size:15px;line-height:1.75;color:rgba(255,255,255,.72);
  max-width:480px;margin-bottom:28px;
}
.hero-metrics{
  display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:16px 18px;margin-bottom:30px;max-width:480px;
}
.progress-ring{flex-shrink:0}
.progress-text{display:flex;flex-direction:column;gap:2px}
.progress-num{font-size:24px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.progress-label{font-size:13px;color:rgba(255,255,255,.68)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* Hero Rank Panel */
.rank-panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:22px 20px;
  backdrop-filter:blur(6px);
}
.rank-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.rank-title{font-size:18px;font-weight:800;color:#fff}
.rank-badge{
  font-size:11px;background:var(--primary);color:#fff;
  padding:3px 10px;border-radius:999px;font-weight:600;
}
.rank-list{margin-top:6px}
.rank-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 6px;
  border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer;transition:background .2s ease;
  border-radius:var(--radius-sm);
}
.rank-item:hover{background:rgba(255,255,255,.06)}
.rank-item:last-child{border-bottom:none}
.rank-num{font-size:22px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums;line-height:1.2;min-width:36px}
.rank-content{flex:1}
.rank-content h4{
  font-size:15px;font-weight:600;color:rgba(255,255,255,.95);
  line-height:1.45;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.rank-meta{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px;display:block}
.rank-more{
  display:block;text-align:center;margin-top:14px;
  font-size:14px;color:rgba(255,255,255,.75);font-weight:600;
  padding:8px;border-radius:var(--radius-md);
  transition:all .2s;
}
.rank-more:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ===== Section common ===== */
.section{padding:64px 0}
@media(min-width:1024px){.section{padding:88px 0}}
.section-head{margin-bottom:40px}
.section-head h2{
  font-size:28px;font-weight:900;line-height:1.3;margin-bottom:10px;
}
@media(min-width:640px){.section-head h2{font-size:34px}}
.section-head p{
  font-size:16px;color:var(--text-secondary);
  max-width:560px;line-height:1.7;
}
.section-head.center{text-align:center}
.section-head.center p{margin-left:auto;margin-right:auto}

/* ===== Services ===== */
.services-section{background:var(--bg-light)}
.services-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
.service-card{
  background:var(--bg-warm);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:30px 26px;
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}
.service-card:nth-child(1){border-top:3px solid var(--primary)}
.service-card:nth-child(2){border-top:3px solid var(--accent)}
.service-card:nth-child(3){border-top:3px solid #6B8E7B}
.service-card:nth-child(4){border-top:3px solid #7C6B8E}
.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);background:#fff}
.service-icon{
  width:48px;height:48px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:rgba(199,62,58,.1);color:var(--primary);
  margin-bottom:18px;
}
.service-card:nth-child(2) .service-icon{background:rgba(216,118,50,.1);color:var(--accent)}
.service-card:nth-child(3) .service-icon{background:rgba(43,138,98,.1);color:#2B8A62}
.service-card:nth-child(4) .service-icon{background:rgba(124,107,142,.1);color:#7C6B8E}
.service-card h3{font-size:20px;font-weight:800;margin-bottom:8px}
.service-card p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:16px}
.service-link{font-size:14px;font-weight:700;color:var(--primary);display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
.service-link:hover{gap:8px}

/* ===== Stats ===== */
.stats-section{background:var(--bg-dark);color:#fff;padding:56px 0}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 20px}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-item{text-align:center;padding:16px 8px;border-radius:var(--radius-md);transition:background .2s}
.stat-item:hover{background:rgba(255,255,255,.04)}
.stat-num{font-size:40px;font-weight:900;line-height:1.1;display:block;color:#fff;font-variant-numeric:tabular-nums}
@media(min-width:640px){.stat-num{font-size:52px}}
.stat-unit{color:var(--accent);font-size:60%;font-weight:800;margin-left:2px}
.stat-label{display:block;font-size:14px;color:rgba(255,255,255,.6);margin-top:8px}

/* ===== Hot / Case ===== */
.hot-section{background:var(--bg-warm)}
.hot-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.hot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.hot-grid{grid-template-columns:repeat(3,1fr)}}
.hot-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  transition:all .25s ease;display:flex;flex-direction:column;
}
.hot-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.hot-card-featured{grid-column:1/-1;flex-direction:column}
@media(min-width:640px){.hot-card-featured{grid-column:span 2;flex-direction:row}}
.hot-card-featured .hot-card-body{padding:24px;flex:1}
.hot-card-cover{position:relative;overflow:hidden;background:linear-gradient(135deg,#E7E2DC,#D6D0C9)}
.hot-card-featured .hot-card-cover{min-height:220px}
@media(min-width:640px){.hot-card-featured .hot-card-cover{width:55%;min-height:280px}}
.hot-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.hot-card:hover .hot-card-cover img{transform:scale(1.04)}
.hot-card-cover .img-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--text-muted);
}
.hot-card-body{padding:18px 18px 16px;display:flex;flex-direction:column;flex:1}
.tag{
  display:inline-block;align-self:flex-start;
  background:var(--primary);color:#fff;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:4px;margin-bottom:10px;
}
.tag-alt{background:var(--accent)}
.tag-green{background:#2B8A62}
.tag-dark{background:var(--bg-dark)}
.hot-card h3{font-size:17px;font-weight:800;line-height:1.45;margin-bottom:8px}
.hot-card-featured h3{font-size:22px}
.hot-card p{
  font-size:14px;color:var(--text-secondary);line-height:1.65;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.hot-meta{
  margin-top:auto;padding-top:12px;
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text-muted);
}
.hot-meta i{width:3px;height:3px;background:#D6D0C9;border-radius:50%}

/* ===== Plans ===== */
.plans-section{background:var(--bg-light)}
.plans-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch}
@media(min-width:640px){.plans-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.plans-grid{grid-template-columns:repeat(3,1fr)}}
.plan-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:32px 26px;
  display:flex;flex-direction:column;position:relative;
  transition:all .25s ease;
}
.plan-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.plan-featured{
  border:2px solid var(--primary);
  box-shadow:0 4px 20px rgba(199,62,58,.12);
}
.plan-badge{
  position:absolute;top:-12px;right:20px;
  background:var(--primary);color:#fff;font-size:12px;font-weight:800;
  padding:4px 14px;border-radius:var(--radius-sm);
  letter-spacing:.02em;
}
.plan-card h3{font-size:18px;font-weight:800;margin-bottom:6px}
.plan-price{font-size:38px;font-weight:900;color:var(--text-main);font-variant-numeric:tabular-nums;margin-bottom:20px}
.plan-price span{font-size:14px;font-weight:500;color:var(--text-muted);margin-left:2px}
.plan-features{margin-bottom:24px;flex:1}
.plan-features li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;color:var(--text-secondary);line-height:1.6;
  padding:6px 0;
}
.plan-features li svg{flex-shrink:0;margin-top:3px;color:var(--success)}

/* ===== FAQ ===== */
.faq-section{background:var(--bg-warm)}
.faq-layout{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:1024px){.faq-layout{grid-template-columns:.8fr 1.4fr;gap:64px}}
.faq-head h2{font-size:28px;font-weight:900;margin-bottom:12px}
@media(min-width:640px){.faq-head h2{font-size:34px}}
.faq-head p{font-size:15px;color:var(--text-secondary);line-height:1.7;margin-bottom:18px}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-question{
  display:flex;align-items:center;gap:16px;
  padding:20px 8px;cursor:pointer;transition:background .2s;
}
.faq-question:hover{background:rgba(199,62,58,.03)}
.faq-num{font-size:18px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums;min-width:34px}
.faq-question h4{font-size:16px;font-weight:700;flex:1;line-height:1.5}
.faq-icon{
  width:20px;height:20px;color:var(--text-muted);
  transition:transform .25s ease;flex-shrink:0;
}
.faq-item.active .faq-icon{transform:rotate(180deg);color:var(--primary)}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease;
}
.faq-item.active .faq-answer{max-height:320px}
.faq-answer p{
  padding:0 8px 20px 58px;
  font-size:14px;color:var(--text-secondary);line-height:1.75;
}

/* ===== Contact ===== */
.contact-section{background:var(--bg-dark);color:var(--text-invert)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:1024px){.contact-grid{grid-template-columns:.9fr 1.1fr;gap:64px}}
.contact-info h2{font-size:28px;font-weight:900;margin-bottom:12px}
@media(min-width:640px){.contact-info h2{font-size:34px}}
.contact-info .lead{font-size:15px;color:rgba(255,255,255,.65);line-height:1.75;margin-bottom:28px;max-width:380px}
.contact-list{display:flex;flex-direction:column;gap:18px}
.contact-list li{display:flex;align-items:flex-start;gap:14px}
.contact-list svg{flex-shrink:0;color:var(--accent);margin-top:3px}
.contact-list .label{font-size:13px;color:rgba(255,255,255,.5);display:block}
.contact-list .value{font-size:15px;font-weight:600;color:#fff}
.contact-form{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:28px;
}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:14px;font-weight:600;color:rgba(255,255,255,.9);margin-bottom:6px}
.required{color:var(--primary);margin-left:2px}
.form-group input,.form-group textarea{
  width:100%;height:48px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-md);
  padding:0 14px;font-size:15px;color:#fff;
  transition:all .2s ease;
}
.form-group textarea{height:auto;padding:12px 14px;resize:vertical;min-height:100px}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.4)}
.form-group input:focus,.form-group textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(199,62,58,.2);
  background:rgba(255,255,255,.08);
}
.form-group input:-webkit-autofill,
.form-group textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #2A2522 inset;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
}

/* ===== Footer ===== */
.site-footer{background:#14100E;color:rgba(255,255,255,.7);padding:56px 0 24px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
@media(min-width:640px){.footer-grid{grid-template-columns:1.4fr 1fr 1.2fr}}
.footer-brand .brand{color:#fff;font-size:22px;margin-bottom:12px}
.footer-brand p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.55);max-width:300px}
.footer-links h4,.footer-contact h4{
  font-size:15px;font-weight:700;color:#fff;margin-bottom:14px;
}
.footer-links a{
  display:block;padding:4px 0;font-size:14px;color:rgba(255,255,255,.6);transition:color .2s;
}
.footer-links a:hover{color:var(--primary)}
.footer-contact p{font-size:14px;color:rgba(255,255,255,.55);padding:4px 0;line-height:1.6}
.footer-bottom{padding-top:24px;display:flex;flex-direction:column;gap:8px}
@media(min-width:640px){.footer-bottom{flex-direction:row;justify-content:space-between}}
.footer-bottom span{font-size:13px;color:rgba(255,255,255,.4)}

/* ===== Mobile Tabs ===== */
.mobile-tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  display:flex;background:var(--bg-light);
  border-top:1px solid var(--border);
  height:60px;
  box-shadow:0 -2px 8px rgba(28,25,23,.06);
}
@media(min-width:1024px){.mobile-tabs{display:none}}
.tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;font-size:11px;font-weight:600;color:var(--text-secondary);
  transition:all .15s ease;
}
.tab-item svg{width:20px;height:20px}
.tab-item:active{transform:scale(.93)}
.tab-item.active{color:var(--primary)}
.tab-item.active svg{stroke-width:2.5}

/* ===== Responsive body padding ===== */
@media(max-width:1023px){
  body{padding-bottom:60px}
}

/* ===== CTA strip ===== */
.cta-strip{
  background:var(--primary);
  border-radius:var(--radius-lg);
  padding:36px 32px;
  display:flex;flex-direction:column;gap:20px;
  align-items:flex-start;
}
@media(min-width:768px){
  .cta-strip{padding:44px 48px;flex-direction:row;align-items:center;justify-content:space-between}
}
.cta-strip h3{font-size:22px;font-weight:900;color:#fff;line-height:1.4}
@media(min-width:640px){.cta-strip h3{font-size:26px}}
.cta-strip p{font-size:14px;color:rgba(255,255,255,.82);margin-top:6px;line-height:1.6}

/* ===== Focus visible ===== */
a:focus-visible,button:focus-visible{
  outline:2px solid rgba(199,62,58,.7);outline-offset:2px;
}

/* ===== Utils ===== */
.center{text-align:center}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}

/* roulang page: category1 */
/* ===== Design Tokens ===== */
:root{
  --primary:#C73E3A;
  --primary-dark:#A9322C;
  --accent:#D87632;
  --accent2:#C99020;
  --bg-warm:#F7F4EF;
  --bg-light:#FCFBF8;
  --bg-dark:#1C1917;
  --text-main:#1C1917;
  --text-secondary:#57534E;
  --text-muted:#8C8580;
  --text-invert:#FAF9F6;
  --border:#E7E2DC;
  --success:#2D6A4F;
  --error:#B3261E;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --shadow-sm:0 1px 3px rgba(28,25,23,.08);
  --shadow-hover:0 10px 24px rgba(28,25,23,.12);
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-serif:"Noto Serif SC","Songti SC",SimSun,serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg-warm);
  color:var(--text-main);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:rgba(199,62,58,.2)}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:var(--bg-warm)}
body::-webkit-scrollbar-thumb{background:#C9BEB5;border-radius:5px}
body::-webkit-scrollbar-thumb:hover{background:var(--primary)}
.dark-section::-webkit-scrollbar-track{background:var(--bg-dark)}
.dark-section::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
.dark-section::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}

/* ===== Container ===== */
.container{max-width:80rem;margin:0 auto;padding-left:1rem;padding-right:1rem}
@media(min-width:768px){
  .container{padding-left:1.5rem;padding-right:1.5rem}
}
@media(min-width:1024px){
  .container{padding-left:2rem;padding-right:2rem}
}

/* ===== Topbar ===== */
.topbar{
  background:var(--primary);
  height:34px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.topbar-brand{
  color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.topbar-brand em{
  font-style:normal;background:rgba(255,255,255,.2);
  padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;
}
.topbar-ticker{
  color:rgba(255,255,255,.92);font-size:12px;
  display:flex;gap:24px;overflow:hidden;white-space:nowrap;
}
.topbar-ticker span{display:inline-flex;align-items:center;gap:4px}
.topbar-ticker i{width:5px;height:5px;background:#FCD34D;border-radius:50%;display:inline-block}
@media(max-width:767px){
  .topbar-ticker{display:none}
  .topbar .container{justify-content:center}
}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(247,244,239,.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{
  display:flex;align-items:center;gap:10px;
  font-size:22px;font-weight:900;color:var(--text-main);letter-spacing:.02em;
}
.brand-mark{
  width:10px;height:10px;background:var(--primary);
  border-radius:2px;display:inline-block;transform:rotate(8deg);
}
.brand:hover{color:var(--primary)}
.main-nav{display:none;align-items:center;gap:8px}
@media(min-width:768px){
  .main-nav{display:flex}
}
.nav-link{
  padding:8px 14px;font-size:15px;font-weight:500;color:var(--text-secondary);
  border-radius:var(--radius-sm);position:relative;transition:color .2s,background .2s;
}
.nav-link:hover{color:var(--primary);background:rgba(199,62,58,.06)}
.nav-link.active{color:var(--primary);font-weight:700}
.nav-link.active::after{
  content:'';position:absolute;left:14px;right:14px;bottom:-2px;
  height:2px;background:var(--primary);border-radius:2px;
}
.nav-cta{display:none}
@media(min-width:768px){
  .nav-cta{display:inline-flex}
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;line-height:1.2;
  padding:12px 24px;border-radius:var(--radius-md);
  border:2px solid transparent;cursor:pointer;
  transition:all .2s ease;white-space:nowrap;
}
.btn:focus-visible{outline:2px solid rgba(199,62,58,.7);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:var(--shadow-hover)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover{background:rgba(199,62,58,.06)}
.btn-light{background:#fff;color:var(--primary);border-color:#fff}
.btn-light:hover{background:#F3EDE7}
.btn-lg{padding:15px 32px;font-size:16px}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-block{display:flex;width:100%}

/* ===== Breadcrumb ===== */
.breadcrumb-wrap{
  background:var(--bg-light);
  border-bottom:1px solid var(--border);
  padding:14px 0;
}
.breadcrumb{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--text-muted);
}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb-sep{color:var(--border)}
.breadcrumb-current{color:var(--primary);font-weight:600}

/* ===== Category Header ===== */
.category-header{
  background:var(--bg-light);
  padding:40px 0 36px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.category-header::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);
  opacity:.6;
}
.category-header-inner{
  display:flex;flex-direction:column;gap:24px;
  justify-content:space-between;align-items:flex-start;
}
@media(min-width:768px){
  .category-header-inner{flex-direction:row;align-items:flex-end}
}
.category-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(199,62,58,.08);
  color:var(--primary);
  font-size:13px;font-weight:600;
  padding:5px 12px;border-radius:999px;
  margin-bottom:10px;
}
.category-header h1{
  font-size:32px;font-weight:900;line-height:1.2;
  color:var(--text-main);margin:0 0 10px;
}
@media(min-width:768px){
  .category-header h1{font-size:40px}
}
.category-header p{
  font-size:15px;line-height:1.7;
  color:var(--text-secondary);
  max-width:560px;margin:0;
}
.category-header-search{
  width:100%;max-width:320px;
  position:relative;
}
.category-header-search input{
  width:100%;height:46px;
  border:1px solid #D6D0C9;
  border-radius:var(--radius-md);
  background:#fff;
  padding:0 44px 0 16px;
  font-size:14px;
  transition:border .2s,box-shadow .2s;
}
.category-header-search input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(199,62,58,.15);
}
.category-header-search svg{
  position:absolute;right:14px;top:50%;
  transform:translateY(-50%);
  width:18px;height:18px;
  color:var(--text-muted);
  pointer-events:none;
}

/* ===== Category Content Grid ===== */
.category-content{
  padding:40px 0 48px;
}
.category-content-grid{
  display:grid;grid-template-columns:1fr;gap:36px;
}
@media(min-width:1024px){
  .category-content-grid{grid-template-columns:1fr 320px;gap:44px}
}
.article-main{min-width:0}

/* ===== Feature Card ===== */
.feature-card{
  display:grid;grid-template-columns:1fr;gap:20px;
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:32px;
  transition:box-shadow .25s ease,transform .25s ease;
}
.feature-card:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
}
@media(min-width:768px){
  .feature-card{grid-template-columns:1.1fr 1fr;gap:0}
}
.feature-card-image{
  position:relative;
  min-height:220px;
  overflow:hidden;
  background:linear-gradient(135deg,#E8E0D6,#DACFC2);
}
@media(min-width:768px){
  .feature-card-image{min-height:100%}
}
.feature-card-image img{
  width:100%;height:100%;
  object-fit:cover;
  position:absolute;inset:0;
  transition:transform .4s ease;
}
.feature-card:hover .feature-card-image img{transform:scale(1.04)}
.feature-card-image::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(28,25,23,.35));
}
.card-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--primary);color:#fff;
  font-size:12px;font-weight:600;
  padding:4px 12px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.feature-card-body{
  padding:24px 24px 28px;
  display:flex;flex-direction:column;justify-content:center;
}
.feature-card-body h2{
  font-size:22px;font-weight:800;line-height:1.45;
  margin:0 0 12px;
}
@media(min-width:768px){
  .feature-card-body h2{font-size:24px}
}
.feature-card-body h2 a:hover{color:var(--primary)}
.feature-card-body p{
  font-size:15px;line-height:1.7;
  color:var(--text-secondary);
  margin:0 0 18px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ===== Card Meta ===== */
.card-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:13px;color:var(--text-muted);
}
.meta-dot{color:var(--border)}

/* ===== List Item ===== */
.list-item{
  display:grid;grid-template-columns:64px 1fr;gap:16px;
  padding:20px 0;
  border-top:1px solid var(--border);
  align-items:center;
}
@media(min-width:768px){
  .list-item{grid-template-columns:72px 1fr 112px;gap:20px}
}
.date-block{
  background:var(--primary);color:#fff;
  border-radius:var(--radius-sm);
  text-align:center;
  padding:8px 4px;
  line-height:1.2;
  display:flex;flex-direction:column;justify-content:center;
  min-height:64px;
}
.date-day{font-size:22px;font-weight:800;font-feature-settings:'tnum'}
.date-month{font-size:11px;font-weight:600;opacity:.85;margin-top:2px}
.list-item-body{min-width:0}
.list-item-body .tag{display:inline-block;margin-bottom:6px}
.list-item-body h3{
  font-size:17px;font-weight:700;line-height:1.5;
  margin:0 0 6px;
}
@media(min-width:768px){
  .list-item-body h3{font-size:18px}
}
.list-item-body h3 a:hover{color:var(--primary)}
.list-item-body p{
  font-size:14px;line-height:1.65;
  color:var(--text-secondary);
  margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.list-item-body .card-meta{font-size:12px}
.list-item-thumb{
  display:none;
  border-radius:var(--radius-sm);
  overflow:hidden;
  position:relative;
  aspect-ratio:112/84;
  background:linear-gradient(135deg,#E8E0D6,#DACFC2);
}
@media(min-width:768px){
  .list-item-thumb{display:block}
}
.list-item-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .3s ease;
}
.list-item:hover .list-item-thumb img{transform:scale(1.05)}

/* ===== Tag ===== */
.tag{
  background:var(--primary);color:#fff;
  font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:999px;
  letter-spacing:.02em;
}

/* ===== Sidebar ===== */
.article-sidebar{
  display:flex;flex-direction:column;gap:28px;
  min-width:0;
}
.widget{
  background:var(--bg-light);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px 22px;
}
.widget h3{
  font-size:17px;font-weight:800;
  margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:2px solid var(--border);
  position:relative;
}
.widget h3::after{
  content:'';
  position:absolute;left:0;bottom:-2px;
  width:42px;height:2px;background:var(--primary);
}

/* Popular List */
.hot-list{
  list-style:none;margin:0;padding:0;
  counter-reset:hot;
}
.hot-list li{
  counter-increment:hot;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  display:flex;gap:12px;align-items:flex-start;
}
.hot-list li:last-child{border-bottom:0;padding-bottom:0}
.hot-list li::before{
  content:counter(hot) '';
  font-size:20px;font-weight:800;
  color:var(--primary);
  font-feature-settings:'tnum';
  line-height:1.2;
  flex-shrink:0;
  min-width:24px;
}
.hot-list li a{
  font-size:14px;font-weight:500;
  line-height:1.5;
  color:var(--text-main);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hot-list li a:hover{color:var(--primary)}
.hot-list .hot-meta{
  display:block;font-size:11px;
  color:var(--text-muted);
  margin-top:3px;
}

/* Subscribe Card */
.widget-subscribe{
  background:var(--bg-dark);border-color:var(--bg-dark);
  color:var(--text-invert);
  text-align:center;
}
.widget-subscribe h3{
  border-bottom-color:rgba(255,255,255,.15);
  color:#fff;
}
.widget-subscribe h3::after{background:var(--accent)}
.widget-subscribe p{
  font-size:14px;color:rgba(255,255,255,.75);
  margin:0 0 18px;
}

/* Tag Cloud */
.tag-cloud{
  display:flex;flex-wrap:wrap;gap:8px;
}
.tag-cloud a{
  display:inline-block;
  font-size:13px;
  color:var(--text-secondary);
  background:var(--bg-warm);
  border:1px solid var(--border);
  padding:5px 12px;
  border-radius:999px;
  transition:all .2s ease;
}
.tag-cloud a:hover{
  background:var(--primary);color:#fff;
  border-color:var(--primary);
}

/* ===== Pagination ===== */
.pagination-wrap{
  padding:8px 0 48px;
}
.pagination{
  display:flex;justify-content:center;align-items:center;gap:6px;
}
.page-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-light);
  font-size:14px;font-weight:600;
  color:var(--text-secondary);
  transition:all .2s ease;
}
.page-link:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-link.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-arrow{font-size:16px}
.page-link:disabled{opacity:.5;cursor:not-allowed}

/* ===== Subscribe CTA ===== */
.anchor-placeholder{position:relative;top:-1px;height:0;visibility:hidden}
.subscribe-cta-section{
  background:var(--bg-dark);
  padding:0 0 64px;
}
.subscribe-cta{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  border-radius:var(--radius-lg);
  padding:48px 40px;
  display:flex;flex-direction:column;gap:24px;
  align-items:flex-start;
  color:#fff;
  position:relative;
  overflow:hidden;
}
@media(min-width:768px){
  .subscribe-cta{
    flex-direction:row;justify-content:space-between;align-items:center;
    padding:52px 56px;
  }
}
.subscribe-cta::after{
  content:'';
  position:absolute;right:-30px;top:-30px;
  width:140px;height:140px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
}
.subscribe-cta h2{
  font-size:26px;font-weight:900;
  margin:0 0 8px;
}
.subscribe-cta p{
  font-size:15px;
  color:rgba(255,255,255,.85);
  margin:0;
}
.subscribe-cta .btn{
  position:relative;z-index:2;
  flex-shrink:0;
}

/* ===== Footer ===== */
.site-footer{
  background:var(--bg-dark);
  color:rgba(255,255,255,.8);
  padding:56px 0 90px;
}
@media(min-width:768px){
  .site-footer{padding:56px 0 40px}
}
.footer-grid{
  display:grid;grid-template-columns:1fr;gap:36px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media(min-width:768px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:48px}
}
.footer-brand .brand{
  color:#fff;
  font-size:24px;
  margin-bottom:14px;
}
.footer-brand .brand-mark{background:var(--primary)}
.footer-brand p{
  font-size:14px;line-height:1.7;
  color:rgba(255,255,255,.6);
  margin:0;
  max-width:300px;
}
.footer-links h4,
.footer-contact h4{
  font-size:15px;font-weight:700;
  color:#fff;
  margin:0 0 16px;
}
.footer-links a{
  display:block;
  font-size:14px;
  padding:5px 0;
  color:rgba(255,255,255,.65);
  transition:color .2s;
}
.footer-links a:hover{color:var(--primary)}
.footer-contact p{
  font-size:14px;
  color:rgba(255,255,255,.65);
  margin:0 0 8px;
}
.footer-bottom{
  display:flex;flex-direction:column;gap:8px;
  padding-top:24px;
  font-size:13px;
  color:rgba(255,255,255,.45);
}
@media(min-width:768px){
  .footer-bottom{flex-direction:row;justify-content:space-between}
}

/* ===== Mobile Tabbar ===== */
.mobile-tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--bg-light);
  border-top:1px solid var(--border);
  display:flex;
  height:60px;
  box-shadow:0 -4px 16px rgba(28,25,23,.06);
}
@media(min-width:768px){
  .mobile-tabbar{display:none}
}
.tab-item{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  font-size:11px;font-weight:500;
  color:var(--text-muted);
  transition:color .2s,transform .15s;
}
.tab-item:active{transform:scale(.95)}
.tab-item.active{color:var(--primary);font-weight:700}
.tab-item svg{width:22px;height:22px}

/* ===== Focus States ===== */
a:focus-visible,
button:focus-visible{
  outline:2px solid rgba(199,62,58,.7);
  outline-offset:2px;
}
input:focus-visible{
  outline:2px solid rgba(199,62,58,.4);
  outline-offset:0;
}

/* ===== Autofill ===== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 40px #fff inset !important;
  -webkit-text-fill-color:var(--text-main) !important;
  border-color:var(--primary);
}

/* ===== Responsive ===== */
@media(max-width:520px){
  .category-header{padding:28px 0 24px}
  .category-header h1{font-size:28px}
  .feature-card-body{padding:18px}
  .feature-card-body h2{font-size:19px}
  .list-item{grid-template-columns:56px 1fr;gap:12px}
  .date-block{min-height:56px;padding:6px 2px}
  .date-day{font-size:18px}
  .date-month{font-size:10px}
  .subscribe-cta{padding:36px 24px}
  .subscribe-cta h2{font-size:22px}
  .widget{padding:18px 16px}
}