/* roulang page: index */
:root{
  --flame:#F5562D;
  --flame-hover:#FF6A3D;
  --lime:#D6F335;
  --carbon:#14161C;
  --coal:#1A1E27;
  --paper:#F6F2EA;
  --cream:#FCFAF5;
  --sand:#EFE9DE;
  --ink:#1B1E24;
  --mute:#757982;
  --line:#E4DED3;
  --radius-lg:20px;
  --radius-md:14px;
  --shadow-card:0 12px 40px rgba(20,22,28,.07);
  --shadow-lift:0 18px 50px rgba(20,22,28,.12);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,border .2s ease;}
button,input,select,textarea{font-family:inherit;font-size:inherit;}
::selection{background:var(--flame);color:#fff;}
.container{max-width:1280px;margin:0 auto;padding-left:20px;padding-right:20px;}
.section{padding:80px 0;}
.section-tight{padding:60px 0;}
.section-dark{background:var(--carbon);color:#F4F1EA;}
.text-muted{color:var(--mute);}
.bg-canvas{background:var(--paper);}
.bg-sand{background:var(--sand);}

/* ===== 顶部信息条 ===== */
.top-strap{background:#242833;color:#C3C6CE;font-size:13px;}
.top-strap .container{display:flex;align-items:center;gap:8px;height:34px;justify-content:center;text-align:center;}
.top-strap .strap-dot{width:7px;height:7px;border-radius:99px;background:var(--lime);box-shadow:0 0 10px var(--lime);flex:none;}

/* ===== 品牌 / Logo ===== */
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand-mark{
  position:relative;width:46px;height:46px;border-radius:14px;flex:none;
  background:linear-gradient(145deg,#FF7B3A,#F04A22);
  color:#fff;display:grid;place-items:center;font-size:27px;font-weight:800;
  box-shadow:inset 0 -5px 0 rgba(88,12,0,.24),0 6px 18px rgba(240,74,34,.28);
}
.brand-mark::after{content:'';position:absolute;inset:3px;border-radius:10px;border:1px solid rgba(255,255,255,.32);}
.brand-text strong{display:block;font-size:21px;line-height:1.15;letter-spacing:.01em;color:#1A1B20;}
.brand-text small{display:block;font-size:11.5px;line-height:1.5;color:var(--flame);font-weight:600;letter-spacing:.06em;}

/* ===== Header 导航 ===== */
.site-header{
  background:rgba(246,242,234,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;
}
.header-inner{display:flex;align-items:center;min-height:72px;gap:12px;justify-content:space-between;}
.main-nav{display:none;align-items:center;gap:4px;}
.nav-link{
  display:inline-block;padding:8px 12px;border-radius:12px;
  font-size:15px;color:#2D3038;font-weight:500;position:relative;
}
.nav-link:hover{color:var(--flame);background:rgba(245,86,45,.08);}
.nav-link.is-active{color:var(--flame);font-weight:600;}
.nav-link.is-active::after{
  content:'';position:absolute;left:12px;right:12px;bottom:2px;height:3px;
  border-radius:2px;background:var(--flame);
}
.header-cta{display:none;}

/* 移动端抽屉 */
.mobile-overlay{
  position:fixed;inset:0;background:rgba(9,11,15,.6);z-index:79;opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.mobile-overlay.show{opacity:1;pointer-events:auto;}
.mobile-drawer{
  position:fixed;top:0;right:0;width:min(320px,86vw);height:100dvh;z-index:82;
  background:#171A21;color:#EDEAE3;transform:translateX(104%);transition:transform .32s ease;
  display:flex;flex-direction:column;padding:24px;
}
.mobile-drawer.open{transform:translateX(0);}
.drawer-brand{display:flex;gap:10px;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:18px;margin-bottom:10px;}
.drawer-brand .brand-mark{width:38px;height:38px;font-size:21px;border-radius:10px;}
.drawer-brand strong{display:block;font-size:16px;color:#fff;}
.drawer-brand small{font-size:11px;color:#F7A184;}
.drawer-link{display:block;padding:12px 2px;color:#CFD1DA;border-bottom:1px solid rgba(255,255,255,.06);font-size:16px;}
.drawer-link:hover,.drawer-link.is-active{color:var(--flame);}
.burger{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--cream);
  display:grid;place-items:center;cursor:pointer;transition:background .2s,border .2s;
}
.burger:hover{background:#fff;border-color:#D5C9BA;}
@media (min-width:1024px){
  .main-nav{display:flex;}
  .header-cta{display:inline-flex;}
  .burger{display:none;}
}

/* ===== 按钮系统 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 20px;border-radius:12px;
  font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;text-align:center;
  border:1px solid transparent;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.btn:focus-visible{outline:3px solid rgba(245,86,45,.34);outline-offset:3px;}
.btn:active{transform:translateY(2px);}
.btn-primary{background:var(--flame);color:#fff;box-shadow:0 4px 0 #B93C18;}
.btn-primary:hover{background:var(--flame-hover);transform:translateY(-2px);box-shadow:0 6px 0 #B93C18;}
.btn-primary:active{box-shadow:0 1px 0 #B93C18;transform:translateY(2px);}
.btn-glass{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#fff;}
.btn-glass:hover{border-color:#FFB39A;background:rgba(255,255,255,.12);color:#fff;}
.btn-darkline{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;}
.btn-soft{background:#fff;border:1px solid #E2DACD;color:var(--ink);}
.btn-soft:hover{border-color:var(--flame);color:var(--flame);background:#FFFDF9;}
.btn-lg{min-height:52px;padding:14px 24px;border-radius:14px;font-size:16px;}

/* ===== Hero ===== */
.hero{position:relative;background:var(--carbon);overflow:hidden;}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.36;
}
.hero-fade{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 88% 16%,rgba(214,243,53,.10),transparent 32%),
    linear-gradient(103deg,rgba(13,15,21,.94) 0%,rgba(13,15,21,.78) 42%,rgba(12,13,18,.55) 100%);
}
.hero-zone{position:relative;color:#F7F4EE;padding:84px 0 118px;min-height:540px;display:flex;align-items:center;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);border-radius:99px;padding:6px 14px;font-size:13px;margin-bottom:22px;}
.live-dot{width:9px;height:9px;border-radius:99px;background:#FFD75C;box-shadow:0 0 0 0 rgba(255,215,92,.7);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,215,92,.7);}70%{box-shadow:0 0 0 10px rgba(255,215,92,0);}100%{box-shadow:0 0 0 0 rgba(255,215,92,0);}}
.hero h1{font-size:38px;line-height:1.22;letter-spacing:-.015em;font-weight:800;margin-bottom:20px;}
.hero h1 .hot{color:#FFB197;}
.hero-sub{font-size:16px;color:#C5C3C4;max-width:560px;line-height:1.9;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;}
.hero-side{position:relative;}
.shadow-card-live{background:rgba(27,31,40,.72);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:20px;backdrop-filter:blur(6px);}
.live-line{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.12);}
.live-line:last-child{border-bottom:0;padding-bottom:2px;}
.live-index{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--lime);font-size:13px;font-weight:700;width:22px;flex:none;background:rgba(214,243,53,.08);border-radius:8px;height:22px;display:grid;place-items:center;}
@media (min-width:768px){
  .hero h1{font-size:48px;}
  .hero-side{display:block;margin-top:0;}
}
.hero-note-consent{font-size:12px;color:#9BA0A8;}

/* ===== 倒计时 ===== */
.countdown-band{background:#0D0F14;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.cd-label{color:#C6CBD4;font-size:14px;letter-spacing:.08em;}
.cd-cell{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:14px;min-width:70px;padding:12px 6px;text-align:center;}
.cd-cell b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:32px;line-height:1.15;color:var(--lime);text-shadow:0 0 20px rgba(214,243,53,.22);}
.cd-cell i{font-style:normal;font-size:12px;color:#959BA4;letter-spacing:.1em;display:block;margin-top:4px;}
.cd-sep{color:#5b606a;font-size:20px;font-weight:700;align-self:center;}

/* ===== 通用区块标题 ===== */
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;color:var(--flame);font-weight:600;margin-bottom:12px;}
.kicker::before{content:'';width:22px;height:2px;background:var(--flame);border-radius:4px;}
.kicker-center::before{width:0;}
.h2-title{font-size:32px;line-height:1.23;font-weight:800;letter-spacing:-.01em;}
.section-desc{font-size:15px;color:var(--mute);line-height:1.9;}
.dark-section .h2-title{color:#F5F3EC;}
.dark-section .section-desc{color:#A7ABB2;}

/* ===== 看点编号阅读流 ===== */
.point-rows{display:grid;gap:12px;}
.point-row{
  display:grid;grid-template-columns:72px 1fr;gap:20px;
  background:var(--cream);border:1px solid var(--line);
  border-radius:18px;padding:26px 26px;transition:transform .2s,border-color .2s,box-shadow .2s;
}
.point-row:hover{transform:translateY(-3px);border-color:#EDC4B6;box-shadow:var(--shadow-card);}
.point-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:48px;font-weight:800;color:var(--flame);opacity:.92;line-height:1;letter-spacing:-.04em;
}
@media (min-width:768px){.point-rows{grid-template-columns:repeat(3,1fr);} .point-row{grid-template-columns:1fr;padding:28px 24px;}}
.point-tag{display:inline-block;border:1px solid #F2B39C;background:#FFF2EC;color:#C9430F;font-size:12px;border-radius:99px;padding:3px 10px;margin:8px 0 4px;}

/* ===== 分类导航卡 ===== */
.cat-card{position:relative;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--line);display:block;transition:transform .2s,border-color .2s,box-shadow .2s;}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#EDC0AF;}
.cat-thumb{position:relative;overflow:hidden;border-radius:20px 20px 0 0;}
.cat-thumb img{width:100%;height:auto;object-fit:cover;transition:transform .45s ease;}
.cat-card:hover img{transform:scale(1.04);}
.cat-body{padding:22px 24px 26px;}
.cat-title{font-size:19px;font-weight:700;margin-bottom:8px;}
.cat-desc{font-size:14px;color:var(--mute);line-height:1.8;}
.cat-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--flame);}
.cat-go i{transition:transform .2s;}
.cat-card:hover .cat-go i{transform:translateX(5px);}

/* ===== 订阅 / 表单 ===== */
.form-area{background:radial-gradient(circle at 0 0,rgba(214,243,53,.05),transparent 38%),#15181F;border-radius:24px;padding:36px;color:#E6E2DB;}
.frm-grid{display:grid;gap:16px;margin-top:24px;}
@media (min-width:768px){
  .frm-grid{grid-template-columns:1fr 0.94fr 1.14fr ;}
  .form-area{padding:48px;}
}
.field{width:100%;min-height:48px;border:1px solid #373C47;background:#20242E;color:#F1EFEC;border-radius:13px;padding:11px 16px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s;}
.field::placeholder{color:#838993;}
.field:focus{border-color:var(--flame);box-shadow:0 0 0 4px rgba(245,86,45,.15);}
.privacy-line{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:#A5A8B0;line-height:1.6;margin-top:18px;}
.privacy-line input{accent-color:var(--flame);margin-top:5px;flex:none;}
.form-success{display:none;background:rgba(214,243,53,.08);border:1px solid rgba(214,243,53,.25);color:#D9F26C;border-radius:12px;padding:12px 16px;margin-top:18px;font-size:14px;}

/* ===== 内容 / 资讯卡片 ===== */
.news-card{
  background:var(--cream);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s;height:100%;
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:#EFC8B8;}
.news-card-img{position:relative;overflow:hidden;border-radius:18px 18px 0 0;background:#d9d2c6;}
.news-card-img img{transition:transform .45s ease;}
.news-card:hover .news-card-img img{transform:scale(1.04);}
.news-card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.news-title{font-size:17.5px;line-height:1.45;font-weight:700;color:#171A20;}
.news-excerpt{font-size:14px;color:var(--mute);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:6px;background:#FFF1EB;color:#D34A1E;font-size:12px;font-weight:600;padding:4px 11px;border-radius:99px;border:1px solid #F6C9B9;}
.chip-outline{background:transparent;border:1px solid #E4DCCF;color:var(--mute);}
.time-text{font-size:12px;color:#989B9E;font-family:ui-monospace,Menlo,Consolas,monospace;}
.empty-news{
  text-align:center;background:var(--cream);border:1px dashed #DBCFC1;border-radius:24px;padding:54px 24px;color:var(--mute);
}
.empty-news p{font-size:16px;color:#7A7F87;}
.news-feature{
  background:var(--carbon);border-radius:22px;overflow:hidden;color:#ECEAE5;display:flex;flex-direction:column;
}
@media (min-width:1024px){.news-feature{flex-direction:row;}}
.news-feature .feature-main{flex:1;padding:36px;}
.news-feature .feature-title{font-size:28px;line-height:1.35;font-weight:800;color:#fff;}
.news-feature .news-meta{color:#B4B8C0;}

/* ===== FAQ ===== */
.faq-wrap{display:grid;gap:14px;max-width:900px;}
.faq-item{background:var(--cream);border:1px solid var(--line);border-radius:16px;transition:border-color .2s;}
.faq-item.open{border-color:#E8AF9B;}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:none;border:0;text-align:left;padding:20px 24px;cursor:pointer;
  color:var(--ink);font-weight:600;font-size:16px;line-height:1.5;border-radius:16px;
}
.faq-q:hover{color:var(--flame);}
.faq-mark{width:30px;height:30px;border-radius:99px;border:1px solid var(--line);display:grid;place-items:center;font-size:20px;font-weight:300;color:var(--flame);flex:none;transition:transform .3s,background .2s;}
.faq-item.open .faq-mark{transform:rotate(135deg);background:#FFF1EB;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a-inner{padding:0 24px 22px;color:#555A64;font-size:15px;line-height:1.95;}

/* ===== CTA ===== */
.cta-band{background:#0E1015;color:#fff;position:relative;overflow:hidden;}
.cta-band .cta-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.24;}
.cta-inner{position:relative;padding:78px 0;display:grid;gap:30px;text-align:center;}
@media (min-width:1024px){.cta-inner{align-items:center;grid-template-columns:1.6fr .7fr;text-align:left;}}

/* ===== Footer ===== */
.site-footer{background:#101217;color:#B8BBC3;}
.footer-top{display:grid;gap:42px;padding:62px 0 40px;}
.footer-brand strong{color:#fff;font-size:20px;display:block;line-height:1.4;}
.footer-brand .brand-mark{width:38px;height:38px;font-size:20px;}
.footer-brand small{font-size:12px;color:#A5A0A0;}
.footer-col-title{font-size:15px;color:#fff;font-weight:600;margin-bottom:18px;letter-spacing:.04em;}
.footer-link{display:inline-block;padding:6px 0;font-size:14px;color:#B2B6BF;transition:color .2s,padding-left .2s;}
.footer-link:hover{color:var(--flame-hover);padding-left:4px;}
.footer-note{font-size:13px;line-height:1.9;color:#8D9199;max-width:260px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:22px 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13px;color:#878B94;}
.footer-bottom .domain-tech{color:#5F646D;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;}
@media (min-width:900px){.footer-top{grid-template-columns:1.5fr .8fr .8fr 1.2fr;}}

/* ===== 表单 / 移动端适配 ===== */
@media (max-width:600px){
  .section{padding:60px 0;}
  .hero-zone{min-height:auto;padding:58px 0 92px;}
  .hero-actions .btn{min-width:46%;flex:1 1 140px;}
  .h2-title{font-size:26px;}
  .point-num{font-size:40px;}
}
@media (max-width:400px){
  .hero-actions{flex-direction:column;}
  .hero-actions .btn{width:100%;}
  .form-area{padding:26px 20px;}
}

/* roulang page: category1 */
:root{
    --primary:#FF6622;
    --primary-strong:#E85511;
    --accent:#C8F135;
    --paper:#F7F4EE;
    --paper-deep:#EFEAE0;
    --coal:#14161C;
    --coal-soft:#1E222B;
    --coal-line:#313845;
    --text:#1E222B;
    --muted:#6D6A63;
    --line:#E4DED2;
    --radius-card:18px;
    --radius-btn:10px;
    --shadow-card:0 14px 40px rgba(35,28,20,.08);
    --max-w:1280px;
  }

  /* ===== reset & base ===== */
  *, *::before, *::after{
    box-sizing:border-box;
  }
  html{
    scroll-behavior:smooth;
  }
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
    background:var(--paper);
    color:var(--text);
    font-size:16px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ text-decoration:none; color:inherit; }
  button{ font-family:inherit; }
  h1,h2,h3,h4,p,figure,ul{ margin:0; }
  ul{ padding:0; list-style:none; }
  .container{
    max-width:var(--max-w);
    margin:0 auto;
    padding-left:24px;
    padding-right:24px;
  }
  @media (min-width:1024px){
    .container{ padding-left:32px; padding-right:32px; }
  }

  /* ===== top ticker ===== */
  .top-ticker{
    height:36px;
    background:#0E1014;
    color:#CFC9C1;
    font-size:13px;
    letter-spacing:.03em;
    display:flex;
    align-items:center;
    overflow:hidden;
    white-space:nowrap;
  }
  .top-ticker .ticker-inner{
    display:flex;
    gap:8px;
    align-items:center;
  }
  .top-ticker .tick-dot{
    width:6px;height:6px;border-radius:999px;
    background:var(--accent);
    display:inline-block;
    margin-right:6px;
    box-shadow:0 0 8px rgba(200,241,53,.8);
  }

  /* ===== header ===== */
  .site-header{
    position:sticky;
    top:36px;
    z-index:1000;
    background:rgba(247,244,238,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .header-inner{
    display:flex;
    align-items:center;
    min-height:76px;
    gap:28px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }
  .brand-mark{
    width:44px;
    height:44px;
    border-radius:9px;
    background:linear-gradient(135deg,#FF7B2C 0%, var(--primary) 68%);
    color:#fff;
    font-size:24px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 7px 18px rgba(255,102,34,.28), inset 0 -3px 0 rgba(0,0,0,.12);
    transform:rotate(-3deg);
  }
  .brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
  }
  .brand-text strong{
    font-size:20px;
    letter-spacing:.01em;
  }
  .brand-text small{
    font-size:12px;
    color:#8B7E70;
    letter-spacing:.14em;
    margin-top:2px;
  }
  .main-nav{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:6px;
  }
  .main-nav .nav-link{
    position:relative;
    display:flex;
    align-items:center;
    padding:12px 15px;
    border-radius:9px;
    color:#39342F;
    font-size:15px;
    font-weight:500;
    transition:color .25s, background .25s;
  }
  .main-nav .nav-link:hover{
    color:var(--primary);
    background:rgba(255,102,34,.07);
  }
  .main-nav .nav-link.is-active{
    color:var(--primary);
    font-weight:700;
  }
  .main-nav .nav-link.is-active::after{
    content:"";
    position:absolute;
    left:15px;right:15px;bottom:6px;
    height:3px;
    border-radius:4px;
    background:var(--primary);
  }
  .header-cta{
    margin-left:auto;
  }
  .burger{
    display:none;
    background:transparent;
    border:0;
    width:42px;
    height:42px;
    border-radius:8px;
    align-items:center;
    justify-content:center;
    color:#2B2520;
    margin-left:10px;
  }

  /* ===== buttons ===== */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--radius-btn);
    font-weight:700;
    line-height:1.2;
    letter-spacing:.02em;
    transition:transform .2s ease, box-shadow .2s, background .2s, border-color .2s;
    cursor:pointer;
    border:1px solid transparent;
  }
  .btn-primary{
    background:linear-gradient(180deg,#FF7B2C,#FF5E1A);
    color:#fff;
    box-shadow:0 6px 0 #B84508, 0 12px 26px rgba(255,120,40,.24);
    padding:14px 24px;
    font-size:15px;
  }
  .btn-primary:hover{
    background:linear-gradient(180deg,#FF9555,#FF6B2B);
    transform:translateY(-2px);
    box-shadow:0 9px 0 #B84508, 0 18px 34px rgba(255,120,40,.26);
  }
  .btn-primary:active{
    transform:translateY(2px);
    box-shadow:0 4px 0 #B84508, 0 8px 16px rgba(255,120,40,.16);
  }
  .btn-primary:focus-visible,
  .btn-ghost:focus-visible,
  .nav-btn:focus-visible{
    outline:3px solid rgba(255,102,34,.42);
    outline-offset:2px;
  }
  .btn-ghost{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.7);
    color:#fff;
    padding:14px 24px;
    font-size:15px;
  }
  .btn-ghost:hover{
    border-color:#fff;
    background:rgba(255,255,255,.16);
    transform:translateY(-2px);
  }
  .text-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#5A5248;
    font-weight:600;
    font-size:14px;
    transition:color .2s;
    background:transparent;
    padding:4px 0;
    border:0;
    cursor:pointer;
  }
  .text-btn:hover{ color:var(--primary); }
  .text-btn svg{ transition:transform .25s; }
  .text-btn:hover svg{ transform:translateX(4px);}

  /* ===== hero ===== */
  .page-hero{
    position:relative;
    background:url('/assets/images/backpic/back-3.png') center 28% / cover no-repeat;
    background-color:#171A21;
    color:#fff;
    padding:96px 0 100px;
    isolation:isolate;
  }
  .page-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 78% 10%, rgba(255,102,34,.2) 0%, transparent 42%),
      linear-gradient(90deg, rgba(13,15,20,.92) 0%, rgba(13,15,20,.66) 54%, rgba(13,15,20,.46) 100%);
    z-index:-1;
  }
  .page-hero .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.28);
    padding:7px 14px;
    border-radius:999px;
    color:#FFE8D8;
    font-size:13px;
    letter-spacing:.1em;
  }
  .page-hero h1{
    max-width:880px;
    font-size:52px;
    line-height:1.18;
    color:#fff;
    font-weight:900;
    letter-spacing:-.02em;
    margin-top:22px;
  }
  .page-hero h1 .hl{
    color:#FFA66B;
    position:relative;
    white-space:nowrap;
  }
  .page-hero .sub{
    max-width:620px;
    margin-top:22px;
    font-size:17px;
    color:#EAE2D9;
    line-height:1.9;
    font-weight:400;
  }
  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
    margin-top:36px;
  }
  .hero-note{
    margin-top:22px;
    font-size:13px;
    color:#BDB2A8;
    display:flex;
    align-items:center;
    gap:8px;
  }

  /* ===== intro strip ===== */
  .intro-strip{
    background:var(--paper-deep);
    border-bottom:1px solid var(--line);
  }
  .intro-strip-inner{
    display:grid;
    grid-template-columns:1.1fr 1.4fr .8fr;
    gap:22px;
    padding:30px 32px;
    align-items:center;
    background:#fff;
    border-radius:0 0 22px 22px;
    box-shadow:0 18px 30px rgba(0,0,0,.03);
  }
  .intro-num{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:11px;
    letter-spacing:.18em;
    color:#b08a5f;
    margin-bottom:2px;
    font-weight:700;
  }
  .intro-strip h2{
    font-size:23px;
    color:#241F1B;
  }
  .intro-more{
    font-size:14px;
    color:var(--muted);
    padding-left:8px;
    border-left:1px solid var(--line);
  }
  .intro-strip .text-btn{ margin-top:10px; }

  /* ===== section generic ===== */
  .section-block{
    padding:90px 0;
  }
  .section-head{
    margin-bottom:42px;
  }
  .section-head .kicker{
    display:inline-block;
    font-size:13px;
    color:var(--primary);
    letter-spacing:.1em;
    font-weight:800;
    margin-bottom:8px;
    text-transform:uppercase;
  }
  .section-head h2{
    font-size:34px;
    line-height:1.3;
    letter-spacing:-.01em;
    color:#17191F;
  }
  .section-head p{
    margin-top:12px;
    color:var(--muted);
    max-width:660px;
    font-size:16px;
  }

  /* ===== directory cards ===== */
  .directory-cards{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
  }
  .menu-card{
    background:#fff;
    border:1px solid #F0E9DF;
    border-radius:var(--radius-card);
    padding:28px;
    display:flex;
    flex-direction:column;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s;
    position:relative;
  }
  .menu-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-card);
    border-color:#f0d8c0;
  }
  .menu-flag{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
  }
  .flag-chip{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12px;
    letter-spacing:.12em;
    color:#86644F;
    background:#FAF2EC;
    padding:6px 10px;
    border-radius:20px;
    font-weight:700;
  }
  .menu-ico{
    width:46px;height:46px;
    background:linear-gradient(145deg,#FFECDC,#FFDDC8);
    color:#D7540E;
    font-size:22px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .menu-card h3{
    font-size:20px;
    font-weight:800;
    margin-bottom:10px;
  }
  .menu-card p{
    color:var(--muted);
    font-size:15px;
    line-height:1.85;
    flex:1;
  }
  .menu-tag-list{
    margin-top:22px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .menu-tag{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:#F7F3ED;
    color:#5C554B;
    border-radius:20px;
    padding:5px 12px;
    font-size:12px;
    border:1px solid #ECE4D9;
  }
  .menu-tag.is-live{
    background:#F1FAD8;
    border-color:#DCEBA8;
    color:#566B10;
  }
  .menu-tag .dot{
    width:5px;height:5px;
    border-radius:50%;
    background:currentColor;
  }
  .menu-card .text-btn{
    margin-top:18px;
  }

  /* ===== timer & remind ===== */
  .remind-zone{
    background:linear-gradient(135deg, #14161C 0%, #1D2027 55%, #25201B 100%);
    color:#fff;
    position:relative;
    overflow:hidden;
    z-index:1;
  }
  .remind-zone::before{
    content:"";
    position:absolute;
    width:360px;height:360px;
    left:-80px;top:-80px;
    background:radial-gradient(circle, rgba(255,102,34,.28), transparent 68%);
    z-index:-1;
  }
  .remind-zone::after{
    content:"";
    position:absolute;
    width:320px;height:320px;
    right:-40px;bottom:-80px;
    background:radial-gradient(circle, rgba(200,241,53,.14), transparent 70%);
    z-index:-1;
  }
  .remind-zone .remind-zone-inner{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:52px;
    align-items:center;
    padding:76px 0;
  }
  .countdown-label{
    font-size:15px;
    color:#E5B194;
    letter-spacing:.08em;
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .countdown-label::before{
    content:"";
    width:8px;height:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 12px var(--accent);
  }
  .remind-zone h2{
    font-size:38px;
    line-height:1.2;
    font-weight:900;
    color:#FFF;
    margin-bottom:18px;
  }
  .remind-zone h2 span{
    color:#FF8A40;
  }
  .remind-sub{
    color:#CFC7BD;
    max-width:430px;
    line-height:1.9;
    font-size:15px;
    margin-bottom:34px;
  }
  .timer-grid{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .time-square{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:13px;
    min-width:80px;
    text-align:center;
    padding:16px 12px 12px;
  }
  .time-square .number{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    display:block;
    font-size:34px;
    color:#FFC8A5;
    font-weight:700;
    line-height:1;
    text-shadow:0 0 18px rgba(255,102,34,.25);
  }
  .time-square .unit{
    margin-top:10px;
    font-size:13px;
    display:block;
    color:#B9B0A6;
    letter-spacing:.12em;
  }
  .timer-divider{
    font-size:28px;
    color:#5b5148;
    font-weight:600;
    padding-bottom:18px;
  }

  .remind-panel{
    background:#fff;
    border-radius:20px;
    color:#1B1E24;
    padding:30px;
    box-shadow:0 25px 50px rgba(0,0,0,.18);
  }
  .remind-panel h3{
    font-size:21px;
    font-weight:800;
    margin-bottom:4px;
  }
  .remind-panel p{
    color:#73685D;
    font-size:14px;
  }
  .remind-panel .form-field{
    margin-top:16px;
  }
  .remind-panel input[type="text"],
  .remind-panel input[type="email"],
  .remind-panel input[type="tel"]{
    width:100%;
    height:48px;
    border:1px solid #E1D7CA;
    border-radius:9px;
    background:#FDFBF8;
    font-size:15px;
    color:#25201B;
    padding:0 14px;
    transition:border .2s, box-shadow .2s;
  }
  .remind-panel input:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(255,102,34,.15);
  }
  .remind-panel .btn {
    width:100%;
    margin-top:10px;
    height:48px;
  }
  .privacy-line{
    margin-top:14px;
    font-size:12px;
    color:#8C8375;
    display:flex;
    align-items:flex-start;
    gap:6px;
    line-height:1.7;
  }
  .form-msg{
    margin-top:12px;
    font-size:14px;
    display:none;
    color:#5F7F0B;
    background:#F2FAE0;
    border-radius:7px;
    padding:8px 10px;
  }
  .form-msg.show{ display:block; }

  /* ===== feature split ===== */
  .feature-split{
    background:#fff;
    border-top:1px solid #E9E1D6;
    border-bottom:1px solid #E9E1D6;
  }
  .feature-split-inner{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:64px;
    padding:90px 24px;
  }
  .feature-img-box{
    position:relative;
  }
  .feature-img-box::before{
    content:"";position:absolute;top:30px;left:-26px;
    width:110px;height:110px;
    background:radial-gradient(circle, rgba(255,102,34,.25) 0%, transparent 68%);
  }
  .feature-img-box img{
    border-radius:20px;
    border:1px solid #F1EBE2;
    box-shadow:0 30px 60px rgba(50,40,25,.14);
    position:relative;
    z-index:2;
  }
  .feature-img-box figcaption{
    position:absolute;
    left:15px;bottom:15px;
    background:rgba(20,22,28,.78);
    color:#FFF;
    border-radius:9px;
    padding:7px 13px;
    font-size:12px;
    border-left:3px solid var(--primary);
    z-index:3;
    backdrop-filter:blur(4px);
  }
  .feature-content h2{
    font-size:33px;
    line-height:1.3;
    color:#1B1B1B;
    margin-bottom:18px;
  }
  .feature-content h2 span{
    color:var(--primary);
  }
  .lead-text{
    color:#5D584F;
    font-size:16px;
    margin-bottom:24px;
    line-height:1.95;
  }
  .check-set{
    display:grid;
    gap:14px;
  }
  .check-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
    border:1px solid #EFE9E0;
    border-radius:13px;
    padding:14px 18px;
    background:#FBF8F4;
  }
  .check-item .check{
    width:23px;height:23px;border-radius:50%;
    background:#FFECE2;
    color:#E85511;
    display:flex;align-items:center;justify-content:center;
    font-weight:900;
    font-size:13px;
    flex-shrink:0;
    border:1px solid #FBD8BE;
  }
  .check-item strong{
    display:inline-block;
    color:#292722;
    font-size:15px;
  }
  .check-item small{
    display:block;
    color:#878075;
    font-size:13px;
    line-height:1.7;
  }

  /* ===== workflow list ===== */
  .workflow-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .panel-card{
    border-radius:20px;
    padding:30px;
    background:#FFF9F3;
    border:1px solid #F3E3D4;
  }
  .panel-card.dark{
    background:#22252D;
    color:#fff;
    border-color:#2D313B;
  }
  .panel-card .step-top{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:12px;
  }
  .panel-card .step-num{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:13px;
    font-weight:700;
    letter-spacing:.15em;
    color:#D2631C;
  }
  .panel-card h3{ font-size:20px; margin-bottom:8px; }
  .panel-card p{ color:inherit; opacity:.8; font-size:15px; }
  .panel-stack{
    display:grid;
    gap:16px;
    margin-top:20px;
  }

  .mini-entry{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-radius:12px;
    background:#fff;
    border:1px solid #EEE4DA;
    padding:12px 15px;
  }
  .dark .mini-entry{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.1);
  }
  .mini-entry .me-label{
    font-size:14px;
    font-weight:600;
    display:flex;
    gap:9px;
    align-items:center;
  }
  .badge{
    font-size:11px;
    border-radius:5px;
    background:#F3EAE1;
    padding:2px 8px;
    color:#7D5B3C;
    letter-spacing:.02em;
  }
  .mini-entry time{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    color:#9A8C7B;
    font-size:12px;
    white-space:nowrap;
  }

  /* ===== cta block ===== */
  .cta-block{
    position:relative;
    background:url('/assets/images/backpic/back-1.png') 50% 65% / cover no-repeat;
    background-color:#1D1010;
    color:#fff;
    padding:88px 0;
    isolation:isolate;
  }
  .cta-block::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(120deg, rgba(16,13,12,.95) 0%, rgba(34,23,19,.82) 45%, rgba(11,14,15,.76) 100%);
    z-index:-1;
  }
  .cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
  }
  .cta-left{
    flex:1 1 380px;
  }
  .cta-left .kicker{
    color:#FFA97A;
    font-size:14px;
    font-weight:800;
    letter-spacing:.1em;
    margin-bottom:12px;
  }
  .cta-left h2{
    max-width:620px;
    font-size:34px;
    font-weight:900;
    color:#fff;
  }
  .cta-left p{
    max-width:620px;
    margin-top:14px;
    color:rgba(255,255,255,.78);
  }
  .cta-right{
    flex-shrink:0;
  }

  /* ===== faq ===== */
  .faq-wrap{
    display:grid;
    gap:14px;
    max-width:850px;
  }
  .faq-item{
    background:#FFF;
    border:1px solid #E5DED4;
    border-radius:14px;
    overflow:hidden;
    transition:border .2s;
  }
  .faq-item.open{
    border-color:#F3C5A6;
    box-shadow:0 12px 28px rgba(255,80,20,.05);
  }
  .faq-q{
    width:100%;
    background:transparent;
    border:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:19px 20px;
    font-size:16px;
    color:#302923;
    font-weight:600;
    cursor:pointer;
    text-align:left;
    transition:background .2s;
  }
  .faq-q:hover{ background:#FBF5EF; }
  .faq-btn-ico{
    width:26px;height:26px;
    border-radius:50%;
    border:1px solid #DCCDBE;
    display:flex;align-items:center;justify-content:center;
    color:#B66F3A;
    transition:all .3s;
    flex-shrink:0;
    background:#FFF;
    font-size:18px;
  }
  .faq-item.open .faq-btn-ico{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    transform:rotate(45deg);
  }
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .32s ease;
    border-top:1px solid transparent;
  }
  .faq-item.open .faq-a{
    border-top-color:#F2EDE7;
  }
  .faq-a p{
    padding:0 21px 20px;
    color:#70665B;
    font-size:15px;
    line-height:1.95;
  }

  /* ===== footer ===== */
  .site-footer{
    background:#171A20;
    color:#CBBDB3;
    font-size:14px;
  }
  .footer-top{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1.2fr;
    gap:38px;
    padding:58px 0 40px;
  }
  .footer-brand strong{
    display:block;
    font-size:19px;
    color:#fff;
    line-height:1.4;
  }
  .footer-brand small{
    color:#A58E88;
    display:block;
    margin-top:3px;
  }
  .footer-note{
    margin:15px 0 0;
    color:#AB9E94;
    line-height:1.9;
    max-width:320px;
    font-size:14px;
  }
  .footer-col-title{
    color:#fff;
    font-size:15px;
    font-weight:700;
    margin-bottom:15px;
    letter-spacing:.04em;
  }
  .footer-link{
    display:inline-block;
    color:#C2B3A8;
    padding:5px 0;
    transition:color .2s;
  }
  .footer-link:hover{ color:#FF8F55; }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.1);
    padding:20px 0;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:8px 24px;
    font-size:13px;
    color:#947F74;
  }

  /* ===== responsive ===== */
  @media (max-width:1023px){
    .main-nav{ display:none; }
    .burger{ display:flex; }
    .intro-strip-inner{ grid-template-columns:1fr; gap:18px; }
    .intro-more{ border:0; padding-left:0;}
    .directory-cards{ grid-template-columns:1fr 1fr; }
    .remind-zone .remind-zone-inner{ grid-template-columns:1fr; gap:36px; padding:60px 20px; }
    .feature-split-inner{ grid-template-columns:1fr; gap:36px; padding:64px 24px; }
    .workflow-layout{ grid-template-columns:1fr; }
    .footer-top{ grid-template-columns:1fr 1fr; }
    .cta-inner{ flex-direction:column;}
    .cta-right{ align-self:center; }
  }
  @media (max-width:767px){
    .page-hero{ padding:70px 0; }
    .page-hero h1{ font-size:33px; }
    .page-hero .sub{ font-size:15px; }
    .directory-cards{ grid-template-columns:1fr; }
    .remind-zone h2{ font-size:29px; }
    .timer-grid{ gap:5px; }
    .time-square{ min-width:61px; padding:12px 8px 10px; }
    .time-square .number{ font-size:24px; }
    .timer-divider{ font-size:20px; }
    .section-block{ padding:60px 0; }
    .section-head h2{ font-size:28px; }
    .feature-split-inner{ padding:55px 18px; }
    .feature-content h2{ font-size:27px; }
    .footer-top{ grid-template-columns:1fr; gap:28px; }
    .header-inner{ min-height:64px; }
    .brand-text strong{ font-size:17px; }
    .brand-text small{ font-size:11px; }
    .brand-mark{ width:38px;height:38px; font-size:19px; }
    .header-cta{ display:none; }
  }

/* 移动抽屉补充样式 */
  .mobile-drawer{
    display:none;
    background:rgba(20,22,28,.98);
    padding:20px 0 28px;
    color:#fff;
    box-shadow:0 8px 22px rgba(0,0,0,.16);
    backdrop-filter:blur(10px);
  }
  .mobile-drawer.show{
    display:block;
  }
  .drawer-link{
    display:block;
    padding:12px 0;
    color:#E9E0D8;
    font-size:16px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .drawer-link:hover{ color:#FFA97A; }
  .drawer-link.is-current{ color:var(--primary); font-weight:700; }
  .drawer-cta{ display:block; margin-top:14px; text-align:center; }

  @media(min-width:1024px){
    .mobile-drawer{ display:none !important; }
  }

/* roulang page: article */
:root {
  --primary: #F96414;
  --primary-deep: #C93E05;
  --accent: #D7E467;
  --bg: #F6F1EA;
  --card: #FFFFFF;
  --ink: #211A16;
  --soft-ink: #4E443F;
  --muted: #7F7169;
  --line: #E7DCD3;
  --night: #14161C;
  --night-soft: #1C2028;
  --radius-card: 22px;
  --radius-btn: 12px;
  --radius-media: 18px;
  --shadow-card: 0 14px 42px rgba(38, 22, 14, 0.07);
  --max-width: 1220px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

button,
input {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

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

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

/* 顶部窄条 */
.site-topbar {
  background: #1C1B18;
  color: #C8BBB2;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.site-topbar .topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.topbar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(215, 228, 103, 0.18);
  flex: 0 0 auto;
}

.topbar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .topbar-text {
    font-size: 12px;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(224, 211, 201, 0.7);
}

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

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

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF7A18 0%, #E84305 100%);
  color: #fff;
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  box-shadow: 0 0 0 6px rgba(237, 88, 21, 0.12), 0 8px 20px rgba(233, 78, 8, 0.24);
  flex: 0 0 auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.22;
}

.brand-text strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}

.brand-text small {
  font-size: 11px;
  color: #9C8D84;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  margin: 0 4px;
  font-size: 16px;
  font-weight: 500;
  color: #4E4640;
  border-radius: 10px;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.nav-link:hover {
  color: var(--primary);
  background: rgba(249, 100, 20, 0.06);
}

.nav-link.is-active {
  color: var(--primary);
  font-weight: 700;
}

.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 1px;
  height: 3px;
  border-radius: 4px;
  background: var(--primary);
}

.header-cta {
  flex: 0 0 auto;
}

.header-cta {
  margin-left: 4px;
}

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #EDE3DA;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.burger:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.nav-mobile-cta {
  display: none;
}

@media (max-width: 920px) {
  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: 16px;
    right: 16px;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 22px 58px rgba(20, 15, 12, 0.16);
  }

  .main-nav {
    display: none;
  }

  .nav-link {
    justify-content: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    margin: 2px 0;
  }

  .nav-link.is-active::after {
    left: 16px;
    right: auto;
    top: auto;
    bottom: 8px;
    width: 22px;
    height: 3px;
  }

  .nav-mobile-cta {
    display: flex;
    margin: 10px 0 0;
  }

  .burger {
    display: inline-flex;
  }

  .header-cta {
    display: none;
  }
}

/* 按钮系统 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  height: 46px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:focus-visible {
  outline: 3px solid rgba(249, 100, 20, 0.45);
  outline-offset: 3px;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 5px 0 #A73700, 0 12px 26px rgba(232, 84, 6, 0.22);
}

.btn-primary:hover {
  background: #FF7A2C;
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #A73700, 0 15px 30px rgba(232, 84, 6, 0.24);
}

.btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #A73700, 0 6px 14px rgba(232, 84, 6, 0.16);
}

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

.btn-ghost:hover {
  border-color: var(--primary);
  color: #fff;
  background: rgba(249, 100, 20, 0.1);
}

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

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-dark {
  background: var(--night);
  color: #fff;
  box-shadow: 0 4px 0 #07090F;
}

.btn-dark:hover {
  background: #242934;
  transform: translateY(-2px);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--soft-ink);
  font-weight: 600;
  font-size: 15px;
  padding: 8px 4px;
}

.btn-text:hover {
  color: var(--primary);
}

/* 标签等 */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(249, 100, 20, 0.1);
  color: var(--primary-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tag-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

/* 文章区 */
.post-section {
  padding: 52px 0 92px;
  background:
    radial-gradient(circle at 92% 18%, rgba(249, 100, 20, 0.07), transparent 320px),
    var(--bg);
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 20px;
  max-width: 860px;
}

.breadcrumb a {
  color: var(--soft-ink);
  font-weight: 500;
}

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

.breadcrumb .crumb-current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  max-width: 260px;
}

.post-card {
  position: relative;
  max-width: 860px;
  background: var(--card);
  border: 1px solid rgba(242, 232, 224, 0.8);
  border-radius: 30px;
  padding: 54px 62px 62px;
  box-shadow: var(--shadow-card);
}

@media (max-width: 768px) {
  .post-card {
    border-radius: 24px;
    padding: 34px 22px 44px;
  }
}

.post-title {
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.28;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  overflow-wrap: break-word;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid #F0E7E0;
  color: var(--muted);
  font-size: 14px;
}

.article-body {
  color: #342D29;
  font-size: 17px;
  line-height: 2;
}

.article-body p {
  margin: 0 0 1.6em;
}

.article-body h2 {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.45;
  margin: 1.8em 0 0.7em;
  color: var(--ink);
  padding-left: 14px;
  border-left: 4px solid var(--primary);
}

.article-body h3 {
  font-size: 21px;
  font-weight: 700;
  margin: 1.6em 0 0.6em;
  color: var(--ink);
}

.article-body a {
  color: var(--primary-deep);
  border-bottom: 1px solid rgba(201, 62, 5, 0.3);
}

.article-body a:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.article-body ul {
  margin: 0 0 1.8em;
  padding-left: 4px;
}

.article-body ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
}

.article-body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.84em;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--primary);
  transform: rotate(45deg);
}

.article-body ol {
  margin: 0 0 1.8em;
  padding-left: 24px;
  counter-reset: article-ol;
}

.article-body ol li {
  position: relative;
  counter-increment: article-ol;
  padding-left: 14px;
  margin-bottom: 10px;
}

.article-body ol li::before {
  content: counter(article-ol) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--primary);
}

.article-body blockquote {
  margin: 0 0 1.9em;
  padding: 20px 24px;
  background: #FBF6EF;
  border-left: 4px solid var(--accent);
  border-radius: 0 18px 18px 0;
  color: var(--soft-ink);
  font-size: 16px;
}

.article-body img {
  border-radius: 20px;
  margin: 2em 0 0.6em;
  box-shadow: 0 12px 30px rgba(30, 18, 12, 0.08);
}

.article-body figure {
  margin: 2.2em 0;
}

.article-body figure img {
  margin: 0 0 10px;
}

.article-body figcaption {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.article-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #FBF6F0;
  border: 1px solid #F0E4DA;
  border-radius: 16px;
  padding: 14px 18px;
  margin-top: 34px;
  color: var(--muted);
  font-size: 13px;
}

/* 内容未找到 */
.missing-panel {
  text-align: center;
  padding: 42px 10px 16px;
}

.missing-emoji {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 30px;
  background: #FBEEDF;
  margin: 0 auto 22px;
  font-size: 38px;
  color: var(--primary);
}

.missing-panel .post-title {
  font-size: 32px;
  margin-bottom: 8px;
}

.missing-panel p {
  color: var(--muted);
  font-size: 16px;
  max-width: 440px;
  margin: 12px auto 28px;
}

/* 相关推荐 */
.related-section {
  padding: 88px 0 30px;
  background: var(--bg);
}

.section-title-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 580px) {
  .section-title-wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

.section-title {
  font-size: 32px;
  line-height: 1.28;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.section-subtitle {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #F0E5DC;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(38, 22, 14, 0.05);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.media-card:hover {
  box-shadow: 0 18px 48px rgba(38, 22, 14, 0.1);
  transform: translateY(-4px);
}

.media-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #E3D7CC;
}

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

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

.media-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.28) 100%);
}

.media-card-body {
  flex: 1;
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
}

.media-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 8px;
}

.media-card-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 提醒与FAQ */
.sub-faq-section {
  padding: 70px 0 90px;
  background: var(--bg);
}

.sub-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 900px) {
  .sub-faq-grid {
    grid-template-columns: 1fr;
  }
}

.remind-card,
.faq-card {
  background: var(--card);
  border: 1px solid #F0E5DC;
  border-radius: 24px;
  padding: 30px 30px 34px;
  box-shadow: var(--shadow-card);
}

.remind-card h3,
.faq-card h3 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.4;
  margin: 10px 0 8px;
  color: var(--ink);
}

.remind-card > p,
.faq-card > p:not(.faq-lead) {
  color: var(--muted);
  font-size: 14px;
}

.remind-form {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--soft-ink);
  margin-bottom: 6px;
}

.form-field input[type="text"],
.form-field input[type="email"] {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-size: 15px;
  border: 1px solid #E6D9D0;
  border-radius: 12px;
  background: #FEFCFA;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-field input::placeholder {
  color: #B9A99F;
}

.form-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(249, 100, 20, 0.16);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.form-check input {
  margin-top: 4px;
  accent-color: var(--primary);
}

.form-feedback {
  font-size: 14px;
  color: #B84C00;
  line-height: 1.7;
  background: #FFF4DC;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 500;
}

/* FAQ折叠 */
.faq-item {
  border-bottom: 1px solid #EFE4DB;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.15s ease;
}

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

.faq-item summary:hover {
  color: var(--primary);
}

.faq-item summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #F7ECE3;
  color: var(--primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.faq-item[open] summary::after {
  content: "–";
  background: var(--primary);
  color: #fff;
}

.faq-item p {
  padding: 0 2px 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
  max-width: 95%;
}

/* CTA */
.entry-cta {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20, 22, 28, 0.78), rgba(20, 22, 28, 0.82)),
    url('/assets/images/backpic/back-2.png') center / cover no-repeat;
  color: #fff;
  padding: 84px 0;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta-content h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.3;
  max-width: 780px;
  margin-bottom: 14px;
}

.cta-content p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
  margin-bottom: 32px;
}

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

/* Footer */
.site-footer {
  background: #171A21;
  color: #D9CDB8;
}

.site-footer .container {
  padding-top: 60px;
  padding-bottom: 28px;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 980px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.footer-brand strong,
.footer-brand small {
  display: block;
}

.footer-brand strong {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.footer-brand small {
  font-size: 13px;
  color: #A58E88;
}

.footer-note {
  max-width: 340px;
  font-size: 14px;
  line-height: 1.85;
  color: #B3A79B;
  margin-top: 4px;
}

.footer-col-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}

.footer-link {
  color: #B3A79B;
  font-size: 14px;
  padding: 5px 0;
  transition: color 0.18s ease, padding-left 0.18s ease;
}

.footer-link:hover {
  color: #FF9B52;
  padding-left: 4px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 24px;
  color: #8F857D;
  font-size: 13px;
}

.domain-tech {
  color: #7B716B;
  font-size: 12px;
}

@media (max-width: 600px) {
  .entry-cta {
    padding: 64px 0;
  }

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

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

  .section-title {
    font-size: 26px;
  }

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

@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
}

/* roulang page: category2 */
:root {
      --primary: #F1561C;
      --primary-deep: #C94115;
      --accent: #D9E539;
      --night: #14161C;
      --night-soft: #1D2027;
      --shell: #F7F4EE;
      --ink: #2A272B;
      --muted: #7B7473;
      --line: #E9E1D5;
      --card-radius: 20px;
      --btn-radius: 10px;
      --shadow-card: 0 14px 42px rgba(20, 18, 16, .08);
      --shadow-press: 0 4px 0 #92330F;
      --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

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

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

    body {
      margin: 0;
      background: var(--shell);
      color: var(--ink);
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.85;
      text-rendering: optimizeLegibility;
    }

    h1, h2, h3, p {
      margin: 0;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease;
    }

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

    button {
      border: 0;
      background: transparent;
      font-family: inherit;
      cursor: pointer;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
      outline: 3px solid rgba(241, 86, 28, .35);
      outline-offset: 2px;
      border-radius: 6px;
    }

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

    /* 顶部信息条 */
    .topstrip {
      height: 36px;
      background: #0F1115;
      color: #9C969E;
      font-size: 13px;
      display: flex;
      align-items: center;
      letter-spacing: .02em;
    }
    .topstrip .container {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /* 导航 */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 70;
      background: rgba(247, 244, 238, .93);
      border-bottom: 1px solid rgba(41, 38, 39, .06);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .header-inner {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

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

    .brand-mark {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 13px;
      background: linear-gradient(135deg, #FF7A1A, #E4470E);
      color: #fff;
      font-weight: 900;
      font-size: 24px;
      font-family: var(--font-mono);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 8px 18px rgba(225, 67, 12, .22);
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.16;
    }
    .brand-text strong {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: .02em;
      color: #201D1C;
    }
    .brand-text small {
      font-size: 12px;
      font-weight: 500;
      color: #96867E;
      letter-spacing: .1em;
      margin-top: 3px;
    }

    .main-nav {
      display: none;
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 12px;
      font-size: 16px;
      font-weight: 500;
      color: #4D4747;
      border-radius: 8px;
      position: relative;
      white-space: nowrap;
    }
    .nav-link:hover {
      color: var(--primary);
    }
    .nav-link.is-active {
      color: var(--primary);
      font-weight: 700;
    }
    .nav-link.is-active::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 0;
      height: 2px;
      border-radius: 4px;
      background: var(--primary);
      box-shadow: 0 0 8px rgba(241, 86, 28, .4);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: var(--btn-radius);
      font-weight: 700;
      font-size: 15px;
      line-height: 1;
      padding: 14px 22px;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }

    .btn-primary {
      background: var(--primary);
      color: #fff;
      box-shadow: var(--shadow-press), 0 12px 26px rgba(241, 86, 28, .18);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      background: #FF6A2B;
      box-shadow: 0 6px 0 #92330F, 0 16px 30px rgba(241, 86, 28, .22);
    }
    .btn-primary:active {
      transform: translateY(1px);
      box-shadow: 0 2px 0 #92330F;
    }

    .btn-outline {
      border: 1px solid rgba(120, 100, 90, .35);
      color: #3D3836;
      background: rgba(255, 255, 255, .4);
      box-shadow: none;
    }
    .btn-outline:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: #fff;
    }

    .btn-outline-light {
      border: 1px solid rgba(255, 255, 255, .38);
      color: #F7F3F1;
      background: rgba(255, 255, 255, .07);
    }
    .btn-outline-light:hover {
      border-color: #fff;
      color: #fff;
      background: rgba(255, 255, 255, .12);
    }

    .header-cta {
      padding: 12px 20px;
      flex-shrink: 0;
      margin-left: auto;
    }

    .burger {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #2A272B;
      border-radius: 10px;
      transition: background .2s ease;
    }
    .burger:hover {
      background: rgba(20, 18, 16, .06);
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 122px;
      left: 18px;
      right: 18px;
      z-index: 66;
      background: #FFFBF4;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 18px;
      box-shadow: 0 24px 60px rgba(20, 18, 16, .16);
    }
    .mobile-menu.is-open {
      display: block;
    }
    .mobile-link {
      display: block;
      padding: 13px 12px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      color: #3A3536;
    }
    .mobile-link:hover {
      background: #F4ECE2;
      color: var(--primary);
    }
    .mobile-link.is-active {
      color: var(--primary);
      background: #F7EDE5;
    }

    /* 主体板块 */
    .section {
      padding: 96px 0;
      scroll-margin-top: 90px;
    }
    .section-tight {
      padding: 72px 0;
    }

    /* Hero */
    .hero {
      position: relative;
      background: #0D0F14;
      overflow: hidden;
      color: #F8F5F2;
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('/assets/images/backpic/back-2.png');
      background-size: cover;
      background-position: center 22%;
    }
    .hero-scrim {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 420px at 88% 20%, rgba(241, 86, 28, .30), transparent 70%),
        linear-gradient(100deg, rgba(8, 9, 13, .94) 8%, rgba(8, 9, 13, .78) 48%, rgba(8, 9, 13, .44) 100%);
    }
    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      padding-top: 86px;
      padding-bottom: 86px;
      gap: 48px;
    }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .12em;
      color: #E3B99A;
      background: rgba(255, 255, 255, .06);
      padding: 7px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .12);
      margin-bottom: 22px;
    }
    .kicker-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(217, 229, 57, .1);
    }
    .hero h1 {
      font-size: 44px;
      line-height: 1.2;
      letter-spacing: -.01em;
      font-weight: 800;
      max-width: 12em;
    }
    .hero-gradient-text {
      color: #FF8F48;
    }
    .hero-sub {
      color: #C8C2C4;
      font-size: 17px;
      line-height: 1.8;
      margin-top: 18px;
      max-width: 34em;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }
    .hero-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 34px;
    }
    .hero-chip {
      font-size: 13px;
      color: #D8D2D0;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .1);
      padding: 6px 13px;
      border-radius: 999px;
    }

    .hero-side {
      display: none;
    }

    .side-glow {
      position: relative;
      margin: 0 auto;
      max-width: 440px;
    }
    .side-glow::after {
      content: "";
      position: absolute;
      inset: 20px -10px -10px 20px;
      background: radial-gradient(circle, rgba(241, 86, 28, .34), transparent 70%);
      filter: blur(10px);
      z-index: 0;
      pointer-events: none;
    }
    .side-card {
      position: relative;
      z-index: 1;
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow: 0 26px 70px rgba(0, 0, 0, .4);
    }
    .side-card img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }
    .side-note {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 16px;
      background: rgba(13, 14, 17, .68);
      backdrop-filter: blur(8px);
      border-radius: 16px;
      padding: 12px 16px;
      color: #F8F5F2;
      border: 1px solid rgba(255, 255, 255, .08);
      font-size: 13px;
      line-height: 1.5;
    }

    /* 区块标题 */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--primary);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      margin-bottom: 12px;
    }
    .eyebrow::before {
      content: "";
      width: 18px;
      height: 2px;
      border-radius: 4px;
      background: var(--primary);
    }
    .section-title {
      font-size: 32px;
      line-height: 1.3;
      font-weight: 800;
      letter-spacing: -.01em;
      color: #1E1B1B;
    }
    .section-lead {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.95;
      margin-top: 16px;
      max-width: 48em;
    }

    /* 左图右列表模块 */
    .schedule-zone {
      background: var(--shell);
    }

    .side-sticky {
      position: sticky;
      top: 110px;
    }
    .thumb-wall {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: #e0d6c8;
      box-shadow: var(--shadow-card);
    }
    .thumb-wall img {
      width: 100%;
      height: 460px;
      object-fit: cover;
    }
    .live-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(17, 18, 22, .72);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      padding: 7px 12px;
      border-radius: 999px;
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, .12);
    }
    .live-badge::before {
      content: "";
      width: 6px;
      height: 6px;
      background: #FF6B2A;
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(255, 107, 42, .18);
    }
    .thumb-caption {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 16px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      background: rgba(17, 18, 22, .62);
      backdrop-filter: blur(8px);
      padding: 10px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .08);
    }
    .side-info {
      margin-top: 18px;
      background: #EDE6DA;
      border-radius: 18px;
      padding: 18px 20px;
    }
    .side-info strong {
      display: block;
      font-size: 16px;
      margin-bottom: 8px;
    }
    .side-info p {
      color: #665E5C;
      font-size: 14px;
      line-height: 1.8;
    }

    .entry-list {
      display: flex;
      flex-direction: column;
    }
    .entry-item {
      position: relative;
      display: flex;
      gap: 16px;
      padding: 26px 4px 26px 8px;
      border-bottom: 1px solid var(--line);
    }
    .entry-item:last-child {
      border-bottom: 0;
    }
    .entry-index {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 800;
      color: var(--primary);
      opacity: .88;
      width: 32px;
      flex-shrink: 0;
      line-height: 1.2;
      padding-top: 2px;
    }
    .entry-main {
      min-width: 0;
    }
    .entry-topline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      background: #F7EAE1;
      color: #B44918;
    }
    .tag-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--primary);
    }
    .tag-soft {
      background: #EDE7DF;
      color: #6E6561;
    }
    .entry-time {
      font-size: 13px;
      color: #96908C;
    }
    .entry-main h3 {
      font-size: 19px;
      font-weight: 750;
      line-height: 1.5;
      margin-bottom: 5px;
      color: #211E1E;
    }
    .entry-main p {
      color: #6D6664;
      font-size: 15px;
      line-height: 1.9;
      max-width: 640px;
    }
    .entry-foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      margin-top: 13px;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      border-radius: 8px;
      background: #F3EEE7;
      color: #665E58;
      font-size: 13px;
      font-weight: 500;
      padding: 3px 9px;
    }
    .tool-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--primary);
      font-size: 14px;
      font-weight: 700;
      margin-left: auto;
    }
    .tool-link svg {
      transition: transform .2s ease;
    }
    .tool-link:hover svg {
      transform: translateX(4px);
    }

    /* 横排价值流 */
    .feature-zone {
      background: #EFE8DC;
    }
    .feature-rail {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 42px;
    }
    .feature-block {
      background: #FFFDF9;
      border-radius: 18px;
      padding: 26px 26px 24px;
      box-shadow: 0 8px 28px rgba(20, 18, 16, .03);
      border: 1px solid rgba(227, 218, 207, .7);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .feature-block:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 32px rgba(20, 18, 16, .06);
    }
    .feature-num {
      display: inline-flex;
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .04em;
      color: #fff;
      background: var(--primary);
      border-radius: 8px;
      padding: 4px 9px;
      margin-bottom: 18px;
    }
    .feature-block h3 {
      font-size: 18px;
      font-weight: 750;
      line-height: 1.45;
      color: #231F20;
    }
    .feature-block p {
      color: #6C6460;
      font-size: 15px;
      line-height: 1.85;
      margin-top: 9px;
    }

    /* 路径图 */
    .route-zone {
      background: var(--shell);
    }
    .route-steps {
      border-top: 1px solid var(--line);
      margin-top: 6px;
    }
    .route-step {
      display: flex;
      gap: 18px;
      padding: 24px 0;
      border-bottom: 1px solid var(--line);
    }
    .route-step-num {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: #1D2026;
      color: #FFE9DD;
      font-weight: 800;
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .route-step h3 {
      font-size: 18px;
      font-weight: 750;
      margin-bottom: 6px;
    }
    .route-step p {
      font-size: 15px;
      line-height: 1.85;
      color: var(--muted);
    }
    .route-figure {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: #17140F;
      box-shadow: var(--shadow-card);
    }
    .route-figure img {
      width: 100%;
      height: 440px;
      object-fit: cover;
    }
    .route-figure-caption {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      background: rgba(18, 18, 22, .7);
      color: #F7F4F1;
      border-radius: 14px;
      padding: 12px 16px;
      font-size: 13px;
      border: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(8px);
    }

    /* FAQ */
    .faq-zone {
      background: #EDE7DD;
    }
    .faq-note {
      border-radius: 18px;
      background: #FFFDF9;
      padding: 20px 22px;
      border: 1px solid rgba(228, 219, 207, .68);
      margin-top: 28px;
    }
    .faq-note strong {
      display: block;
      font-size: 16px;
      color: #29262A;
      margin-bottom: 6px;
    }
    .faq-note p {
      font-size: 14px;
      color: #756D68;
      line-height: 1.8;
    }

    .faq-list {
      border-radius: 22px;
      background: #FFFCF7;
      border: 1px solid rgba(228, 219, 207, .65);
      padding: 8px 22px;
    }
    .faq-item {
      border-bottom: 1px solid var(--line);
    }
    .faq-item:last-child {
      border-bottom: 0;
    }
    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      text-align: left;
      padding: 18px 0;
      font-size: 16px;
      font-weight: 700;
      color: #2A272B;
      line-height: 1.5;
    }
    .faq-question:hover {
      color: var(--primary);
    }
    .faq-icon {
      position: relative;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .faq-icon::before,
    .faq-icon::after {
      content: "";
      position: absolute;
      background: currentColor;
      border-radius: 2px;
      transition: transform .2s ease, opacity .2s ease;
    }
    .faq-icon::before {
      width: 2px;
      height: 18px;
      left: 8px;
      top: 0;
    }
    .faq-icon::after {
      width: 18px;
      height: 2px;
      left: 0;
      top: 8px;
    }
    .faq-item.is-open .faq-icon::before {
      transform: scaleY(0);
    }
    .faq-answer {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height .28s ease, opacity .22s ease, padding .28s ease;
      padding: 0 28px 0 0;
    }
    .faq-item.is-open .faq-answer {
      max-height: 360px;
      opacity: 1;
      padding-bottom: 20px;
    }
    .faq-answer p {
      color: #746C68;
      font-size: 15px;
      line-height: 1.9;
    }

    /* CTA */
    .cta-zone {
      background: #0F1116;
      color: #F8F5F2;
      overflow: hidden;
    }
    .cta-box {
      background:
        radial-gradient(600px 300px at 20% 10%, rgba(241, 86, 28, .28), transparent 65%),
        radial-gradient(440px 280px at 95% 90%, rgba(217, 229, 57, .10), transparent 65%),
        url('/assets/images/backpic/back-1.png') no-repeat center / cover;
      border-radius: 30px;
      padding: 60px 30px;
      position: relative;
      border: 1px solid rgba(255, 255, 255, .08);
      text-align: center;
    }
    .cta-box::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 30px;
      background: rgba(12, 13, 17, .58);
    }
    .cta-inner {
      position: relative;
      z-index: 2;
      max-width: 720px;
      margin: 0 auto;
    }
    .cta-inner h2 {
      font-size: 30px;
      line-height: 1.35;
      font-weight: 800;
    }
    .cta-inner p {
      color: #C8C1C3;
      font-size: 16px;
      line-height: 1.9;
      margin-top: 16px;
    }
    .cta-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
      justify-content: center;
      margin-top: 26px;
    }
    .remind-note {
      display: inline-block;
      margin-top: 24px;
      font-size: 13px;
      color: #B7AFA8;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 999px;
      padding: 6px 14px;
    }

    /* Footer */
    .site-footer {
      background: #111318;
      color: #C9C4C5;
      padding: 66px 0 0;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 1fr;
      gap: 34px;
      padding-bottom: 44px;
    }
    .footer-brand .brand-mark {
      width: 42px;
      height: 42px;
    }
    .footer-brand strong {
      display: block;
      font-size: 18px;
      font-weight: 700;
      color: #FFF9F5;
    }
    .footer-note {
      color: #AFA9A8;
      font-size: 14px;
      line-height: 1.85;
      margin-top: 14px;
      max-width: 42em;
    }
    .footer-col-title {
      font-size: 15px;
      font-weight: 700;
      color: #F2ECEC;
      letter-spacing: .05em;
      margin-bottom: 14px;
    }
    .footer-link {
      display: inline-block;
      color: #B4AEAF;
      font-size: 15px;
      line-height: 2.15;
      transition: color .2s ease;
    }
    .footer-link:hover {
      color: #FF8A46;
    }
    .footer-bottom {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 20px 0;
      border-top: 1px solid rgba(255, 255, 255, .06);
      color: #8C878B;
      font-size: 13px;
    }
    .domain-tech {
      color: #7C777B;
    }

    @media (min-width: 640px) {
      .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      .feature-rail {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 768px) {
      .hero-grid {
        grid-template-columns: 1fr 0.86fr;
      }
      .hero-side {
        display: block;
      }
      .cta-box {
        padding: 80px 60px;
      }
    }

    @media (min-width: 1024px) {
      .main-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        gap: 4px;
        margin: 0 12px;
      }
      .burger {
        display: none !important;
      }
      .header-cta {
        margin-left: 0;
      }
      .footer-top {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 40px;
      }
      .feature-rail {
        grid-template-columns: repeat(4, 1fr);
      }
      .section {
        padding: 110px 0;
      }
    }

    @media (min-width: 1200px) {
      .hero h1 {
        font-size: 50px;
      }
      .section-title {
        font-size: 36px;
      }
    }

    @media (max-width: 600px) {
      .header-cta {
        display: none;
      }
      .brand-text strong {
        font-size: 18px;
      }
      .brand-text small {
        font-size: 11px;
      }
      .brand-mark {
        width: 40px;
        height: 40px;
      }
      .topstrip .container {
        padding-left: 16px;
        padding-right: 16px;
      }
      .container {
        padding-left: 16px;
        padding-right: 16px;
      }
      .section {
        padding: 68px 0;
      }
      .hero-grid {
        padding-top: 64px;
        padding-bottom: 64px;
      }
      .hero h1 {
        font-size: 32px;
      }
      .hero-sub {
        font-size: 16px;
      }
      .section-title {
        font-size: 28px;
      }
      .thumb-wall img {
        height: 360px;
      }
      .entry-item {
        padding-left: 0;
        gap: 10px;
      }
      .entry-index {
        width: 26px;
        font-size: 17px;
      }
      .cta-box {
        padding: 40px 22px;
      }
      .footer-top {
        gap: 30px;
      }
      .mobile-menu {
        top: 90px;
      }
    }

/* roulang page: category3 */
:root {
    --bg: #F7F4EE;
    --surface: #FFFFFF;
    --surface-soft: #F3EFE7;
    --brand: #EA6528;
    --brand-deep: #C34A14;
    --brand-soft: #FBE9DE;
    --accent: #CFE35B;
    --ink: #1E2127;
    --muted: #71726C;
    --border: #E5DED2;
    --night: #171A21;
    --night-soft: #22252F;
    --radius-lg: 22px;
    --radius-md: 14px;
    --shadow: 0 18px 50px rgba(18, 20, 22, .10);
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  }

  html {
    scroll-behavior: smooth;
  }

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

  body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }

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

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

  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    border: 0;
    background: none;
  }

  :focus-visible {
    outline: 3px solid rgba(234, 101, 40, .45);
    outline-offset: 2px;
  }

  .container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 24px;
  }

  .section-pad {
    padding-block: 96px;
  }

  @media (max-width: 768px) {
    .section-pad {
      padding-block: 64px;
    }
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--brand);
    text-transform: uppercase;
  }

  .eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--brand);
    border-radius: 99px;
  }

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

  .section-head h2 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.22;
    margin: 8px 0 14px;
    letter-spacing: -0.01em;
  }

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

  @media (max-width: 640px) {
    .section-head {
      margin-bottom: 32px;
    }
  }

  /* ---------- Topbar ---------- */
  .topbar {
    height: 36px;
    display: flex;
    align-items: center;
    background: #121318;
    color: rgba(255, 245, 235, .8);
    font-size: 13px;
    letter-spacing: .02em;
  }

  .topbar .container {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
    overflow: hidden;
  }

  .topbar-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    margin-right: 7px;
    flex: 0 0 auto;
  }

  .topbar-mini {
    color: rgba(255, 245, 235, .55);
    border-left: 1px solid rgba(255, 255, 255, .12);
    padding-left: 18px;
  }

  @media (max-width: 720px) {
    .topbar-mini {
      display: none;
    }
  }

  /* ---------- Header ---------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(251, 248, 243, .93);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
  }

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

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

  .brand-mark {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #F25F1F, #D44A16);
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    border-radius: 14px 14px 14px 6px;
    box-shadow: 0 6px 16px rgba(234, 101, 40, .3);
    flex: 0 0 auto;
  }

  .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
  }

  .brand-text strong {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .01em;
  }

  .brand-text small {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .12em;
    margin-top: 3px;
  }

  .main-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline: auto;
  }

  .nav-link {
    position: relative;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 500;
    color: #494B4E;
    border-radius: 10px;
    transition: color .2s, background .2s;
  }

  .nav-link:hover {
    color: var(--brand);
    background: rgba(234, 101, 40, .07);
  }

  .nav-link.is-active {
    color: var(--brand);
    font-weight: 700;
  }

  .nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 3px;
    border-radius: 99px;
    background: var(--brand);
  }

  .header-cta {
    flex-shrink: 0;
  }

  .burger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    color: #383B40;
    background: #FFF;
    border: 1px solid var(--border);
  }

  @media (max-width: 980px) {
    .burger {
      display: inline-flex;
    }

    .main-nav {
      position: fixed;
      top: 78px;
      left: 0;
      right: 0;
      display: block;
      margin: 0;
      background: #FCFAF6;
      border-bottom: 1px solid var(--border);
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease, border-color .3s ease;
      box-shadow: 0 18px 30px rgba(20, 20, 22, .06);
    }

    .site-header.menu-open .main-nav {
      max-height: 420px;
      border-bottom: 1px solid var(--border);
    }

    .nav-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 28px;
      font-size: 16px;
      border-radius: 0;
      border-bottom: 1px solid rgba(230, 224, 214, .5);
      margin: 0;
    }

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

    .nav-link.is-active {
      background: var(--brand-soft);
    }
  }

  @media (max-width: 520px) {
    .brand-text strong {
      font-size: 17px;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
    }

    .header-inner {
      height: 68px;
    }

    .main-nav {
      top: 68px;
    }
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 14px 22px;
    border-radius: 12px;
    transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
    white-space: nowrap;
  }

  .btn svg {
    flex: 0 0 auto;
  }

  .btn-primary {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 5px 0 #B73F0D, 0 12px 24px rgba(234, 101, 40, .25);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    background: #F27335;
    box-shadow: 0 7px 0 #B73F0D, 0 16px 30px rgba(234, 101, 40, .28);
  }

  .btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #B73F0D, 0 6px 14px rgba(234, 101, 40, .18);
  }

  .btn-ghost {
    background: rgba(255, 255, 255, .05);
    color: #F7F0EA;
    border: 1px solid rgba(255, 244, 240, .45);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  }

  .btn-ghost:hover {
    border-color: var(--brand);
    color: #FFE1D0;
    background: rgba(255, 255, 255, .10);
    transform: translateY(-2px);
  }

  .btn-light-ghost {
    background: #FFF;
    color: var(--ink);
    border: 1px solid var(--border);
    box-shadow: 0 2px 0 var(--border);
  }

  .btn-light-ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
  }

  .btn-sm {
    padding: 9px 14px;
    font-size: 13px;
    border-radius: 10px;
  }

  @media (max-width: 520px) {
    .btn {
      padding: 13px 18px;
    }
  }

  /* ---------- Page Hero ---------- */
  .page-hero {
    position: relative;
    padding: 78px 0 90px;
    background-color: #16171C;
    background-image: linear-gradient(110deg, rgba(12, 13, 16, .93) 22%, rgba(28, 24, 22, .62) 100%), url('/assets/images/backpic/back-2.png');
    background-position: center;
    background-size: cover;
    color: #FFF4EC;
    border-bottom: 4px solid var(--brand);
    overflow: hidden;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    align-items: center;
    position: relative;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 240, 230, .65);
    margin-bottom: 20px;
  }

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

  .hero-breadcrumb .divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    display: inline-block;
  }

  .hero-copy h1 {
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    text-shadow: 0 12px 40px rgba(0, 0, 0, .3);
  }

  .hero-copy h1 .warm-line {
    color: #FF9A66;
  }

  .hero-lead {
    font-size: 17px;
    line-height: 1.9;
    max-width: 640px;
    color: rgba(255, 238, 226, .85);
    margin: 0 0 30px;
  }

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

  .hero-visual {
    position: relative;
  }

  .hero-figure {
    position: relative;
    margin: 0;
    background: #202127;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px 24px 24px 8px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);
    transform: rotate(1.2deg);
  }

  .hero-figure img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
  }

  .hero-figure figcaption {
    padding: 12px 15px;
    font-size: 12px;
    color: rgba(255, 240, 226, .72);
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #1A1B1F;
  }

  .hero-status-card {
    position: absolute;
    right: -10px;
    bottom: 40px;
    background: rgba(20, 21, 25, .9);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #FFF7EF;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
    backdrop-filter: blur(8px);
  }

  .hero-status-card .live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #D7F05F;
    box-shadow: 0 0 0 5px rgba(215, 240, 95, .13);
  }

  @media (max-width: 1050px) {
    .hero-grid {
      grid-template-columns: 1fr 320px;
      gap: 30px;
    }
  }

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

    .hero-visual {
      max-width: 560px;
    }

    .page-hero {
      padding: 52px 0 62px;
    }
  }

  @media (max-width: 520px) {
    .hero-copy h1 {
      font-size: 38px;
    }

    .hero-figure img {
      height: 220px;
    }

    .hero-actions .btn {
      width: calc(100% - 10px);
    }
  }

  /* ---------- Background sections ---------- */
  .section-bone {
    background: #F3EFE7;
  }

  .section-paper {
    background: #FFFCF8;
  }

  .section-ink {
    background: var(--night);
    color: #F1E9E2;
  }

  /* ---------- Tab help section ---------- */
  .tab-shell {
    background: #FFFDFB;
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 17px 20px 0;
    background: #FCF9F4;
    border-bottom: 1px solid var(--border);
  }

  .tab-btn {
    padding: 11px 17px;
    font-size: 14px;
    font-weight: 600;
    color: #7A746D;
    border-radius: 12px 12px 0 0;
    border: 1px solid transparent;
    border-bottom: 0;
    transition: all .2s;
    position: relative;
    bottom: -1px;
  }

  .tab-btn:hover {
    color: var(--brand);
    background: #F4E4DA;
  }

  .tab-btn.is-active {
    background: #FFFDFB;
    border-color: var(--border);
    color: var(--brand);
    font-weight: 700;
  }

  .tab-btn.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #FFFDFB;
  }

  .tab-panel {
    display: none;
    padding: 40px;
  }

  .tab-panel.is-active {
    display: block;
    animation: fadeUp .35s ease;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .panel-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 46px;
    align-items: center;
  }

  .panel-media,
  .panel-media img {
    border-radius: 18px;
  }

  .panel-media img {
    width: 100%;
    height: 260px;
    object-fit: cover;
  }

  .panel-body h3 {
    font-size: 25px;
    line-height: 1.3;
    margin: 0 0 10px;
  }

  .panel-body .lead {
    color: var(--muted);
    margin: 0 0 22px;
  }

  .check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: grid;
    gap: 12px;
  }

  .check-list li {
    position: relative;
    padding-left: 28px;
    color: #3D3F42;
    font-size: 15px;
    line-height: 1.75;
  }

  .check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 17px;
    height: 9px;
    border-left: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(-45deg);
  }

  .simple-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
  }

  .simple-list li {
    position: relative;
    padding: 10px 0 10px 30px;
    border-bottom: 1px dashed #E9E2D8;
    font-size: 15px;
  }

  .simple-list li:last-child {
    border-bottom: 0;
  }

  .simple-list .num {
    position: absolute;
    left: 0;
    top: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
  }

  @media (max-width: 900px) {
    .panel-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .panel-media img {
      height: 220px;
    }
  }

  @media (max-width: 640px) {
    .tab-panel {
      padding: 24px 18px;
    }

    .tab-btn {
      flex: 1 1 40%;
      text-align: center;
      font-size: 13px;
      padding: 10px 10px;
    }
  }

  /* ---------- Square entrance ---------- */
  .square-section {
    background: #F1ECE3;
    border-top: 1px solid #E1DACA;
    border-bottom: 1px solid #E1DACA;
  }

  .square-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .square-card {
    background: #FFFDF8;
    border: 1px solid #E8E2D8;
    border-radius: 18px;
    padding: 24px 24px 20px;
    transition: transform .22s, box-shadow .22s, border-color .22s;
    display: flex;
    flex-direction: column;
    min-height: 166px;
  }

  .square-card:hover {
    transform: translateY(-4px);
    border-color: rgba(234, 101, 40, .4);
    box-shadow: 0 14px 32px rgba(60, 46, 32, .1);
  }

  .square-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #FBEDE4;
    color: var(--brand);
    margin-bottom: 14px;
  }

  .square-card strong {
    display: block;
    font-size: 17px;
    margin-bottom: 6px;
  }

  .square-card p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
  }

  .square-go {
    margin-top: auto;
    padding-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand);
  }

  @media (max-width: 860px) {
    .square-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 480px) {
    .square-grid {
      grid-template-columns: 1fr;
    }

    .square-card {
      min-height: auto;
    }
  }

  /* ---------- Steps ---------- */
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .step-card {
    background: #FFFDFB;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 25px 24px;
    position: relative;
    transition: transform .2s, box-shadow .2s;
  }

  .step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(18, 20, 22, .08);
  }

  .step-card::before {
    counter-increment: step;
    content: "0" counter(step);
    font-size: 30px;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1.4px var(--brand);
    position: absolute;
    right: 20px;
    top: 16px;
    opacity: .9;
  }

  .step-card strong {
    display: block;
    font-size: 18px;
    margin-bottom: 10px;
    padding-right: 54px;
  }

  .step-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.85;
  }

  @media (max-width: 900px) {
    .steps-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .step-card {
      padding: 22px 22px 20px;
    }
  }

  /* ---------- FAQ ---------- */
  .faq-wrap {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
  }

  .faq-item {
    border: 1px solid var(--border);
    background: #FFFCF8;
    border-radius: 16px;
    transition: box-shadow .2s, border-color .2s;
  }

  .faq-item[open] {
    box-shadow: 0 12px 28px rgba(18, 20, 22, .05);
    border-color: rgba(234, 101, 40, .25);
  }

  .faq-item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 19px 22px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    gap: 20px;
    user-select: none;
  }

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

  .faq-item .faq-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--brand-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--brand);
    transition: transform .25s;
  }

  .faq-item[open] .faq-icon {
    transform: rotate(45deg);
  }

  .faq-answer {
    padding: 0 22px 20px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.95;
    max-width: 780px;
  }

  @media (max-width: 520px) {
    .faq-item summary {
      font-size: 15px;
      padding: 16px 16px;
    }

    .faq-answer {
      padding-inline: 16px;
    }
  }

  /* ---------- CTA block ---------- */
  .cta-zone {
    position: relative;
    background-color: #14151A;
    background-image: linear-gradient(110deg, rgba(15, 15, 19, .96) 20%, rgba(22, 22, 27, .82)), url('/assets/images/backpic/back-1.png');
    background-position: center;
    background-size: cover;
    border-radius: 28px;
    overflow: hidden;
    color: #FFF1E9;
    padding: 48px 50px;
    display: grid;
    grid-template-columns: 1fr .96fr;
    gap: 50px;
    align-items: center;
    box-shadow: 0 22px 56px rgba(15, 15, 20, .3);
  }

  .cta-zone h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.25;
    margin: 8px 0 14px;
  }

  .cta-zone .cta-desc {
    color: rgba(255, 240, 228, .72);
    margin: 0 0 22px;
    max-width: 500px;
    line-height: 1.9;
  }

  .cta-note {
    font-size: 13px;
    color: rgba(255, 240, 228, .6);
  }

  .cta-form {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(8px);
  }

  .cta-label {
    display: block;
    font-size: 13px;
    color: rgba(255, 244, 236, .74);
    margin-bottom: 8px;
    letter-spacing: .02em;
  }

  .cta-input {
    width: 100%;
    height: 47px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    padding: 0 14px;
    margin-bottom: 14px;
    transition: border-color .2s, background .2s;
  }

  .cta-input::placeholder {
    color: rgba(255, 255, 255, .42);
  }

  .cta-input:focus {
    outline: none;
    border-color: #FF9E67;
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 0 4px rgba(255, 158, 103, .2);
  }

  .cta-input-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .cta-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 244, 236, .68);
    line-height: 1.6;
    margin: 6px 0 14px;
  }

  .cta-check input {
    margin-top: 3px;
    accent-color: var(--brand);
  }

  @media (max-width: 880px) {
    .cta-zone {
      grid-template-columns: 1fr;
      padding: 34px 24px;
      gap: 30px;
    }

    .cta-input-group {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    .cta-zone {
      border-radius: 20px;
      padding: 26px 18px;
    }

    .cta-form {
      padding: 18px;
    }
  }

  /* ---------- Footer ---------- */
  .site-footer {
    background: #15161C;
    color: #E8E0D8;
    margin-top: 0;
  }

  .site-footer .container {
    padding-top: 60px;
    padding-bottom: 26px;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1.6fr .8fr .9fr 1.3fr;
    gap: 40px;
    padding-bottom: 46px;
  }

  .footer-brand strong,
  .footer-col-title {
    font-weight: 700;
  }

  .footer-brand strong {
    font-size: 17px;
  }

  .footer-note {
    font-size: 14px;
    line-height: 1.9;
    color: rgba(240, 230, 220, .60);
    max-width: 310px;
    margin: 0;
  }

  .footer-col-title {
    display: block;
    font-size: 16px;
    margin-bottom: 14px;
    color: #FFF6EF;
  }

  .footer-link {
    color: rgba(240, 230, 220, .64);
    font-size: 14px;
    padding: 6px 0;
    transition: color .18s, transform .18s;
  }

  .footer-link:hover {
    color: #FFAF81;
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 20px;
    font-size: 13px;
    color: rgba(240, 230, 220, .45);
  }

  .domain-tech {
    color: rgba(240, 230, 220, .38);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  @media (max-width: 880px) {
    .footer-top {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 560px) {
    .footer-top {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .footer-bottom {
      flex-direction: column;
    }
  }