/* roulang page: index */
:root{
  --gold:#C9A063;
  --gold-light:#E2BE81;
  --gold-soft:rgba(201,160,99,.14);
  --ink:#0D0E12;
  --ink-2:#111317;
  --ink-3:#151920;
  --paper:#F3F1EC;
  --card:#FCFBF8;
  --text-light:#EAECEC;
  --text-mid:#A5ABB3;
  --text-dark:#1D1E1C;
  --text-dark-2:#64665F;
  --line-light:rgba(255,255,255,.08);
  --line-dark:rgba(0,0,0,.1);
  --green:#3F7A5F;
  --green-soft:rgba(63,122,95,.16);
  --amber:#B58A3A;
  --red:#B34A4A;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:26px;
  --shadow-1:0 6px 22px rgba(0,0,0,.07);
  --shadow-2:0 24px 50px rgba(0,0,0,.11);
  --transition:cubic-bezier(.2,0,0,1) .25s;
  --container:1240px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--ink);
  color:var(--text-light);
  line-height:1.7;
  letter-spacing:.01em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
section{scroll-margin-top:96px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip-link{position:fixed;left:16px;top:-60px;z-index:2000;padding:10px 16px;background:var(--gold);color:#111;border-radius:8px;transition:top .25s ease}
.skip-link:focus{top:16px}
.container{width:min(92vw,var(--container));margin:0 auto}
.container--narrow{width:min(92vw,760px);margin:0 auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;letter-spacing:.14em;padding:7px 13px;
  border:1px solid rgba(201,160,99,.42);border-radius:999px;color:var(--gold-light);
  background:rgba(13,14,18,.25);
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(63,122,95,.45);animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(63,122,95,.5)}
  70%{box-shadow:0 0 0 7px rgba(63,122,95,0)}
  100%{box-shadow:0 0 0 0 rgba(63,122,95,0)}
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 22px;border-radius:9px;border:1px solid transparent;
  font-size:15px;font-weight:600;transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
  white-space:nowrap;user-select:none;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--gold);color:#1d1e1c;border-color:var(--gold)}
.btn--primary:hover{background:var(--gold-light);border-color:var(--gold-light);box-shadow:0 12px 26px rgba(201,160,99,.22)}
.btn--ghost{background:rgba(255,255,255,.03);border-color:rgba(201,160,99,.5);color:var(--gold-light)}
.btn--ghost:hover{background:var(--gold-soft);border-color:var(--gold-light)}
.btn--ghost-light{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.18);color:var(--text-dark)}
.btn--ghost-light:hover{border-color:var(--gold);background:rgba(201,160,99,.08);color:var(--text-dark)}
.btn--sm{min-height:40px;padding:8px 14px;font-size:14px}
.text-link{color:var(--gold);display:inline-flex;align-items:center;gap:6px;font-weight:600;transition:color .2s ease}
.text-link .arr{transition:transform .2s var(--transition)}
.text-link:hover .arr{transform:translateX(4px)}
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(13,14,18,.82);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line-light);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand__mark{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:var(--gold);flex:none}
.brand__name{display:flex;flex-direction:column;line-height:1.2;justify-content:center}
.brand__text{font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--text-light)}
.brand__sub{font-size:11px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.nav{display:flex;align-items:center;gap:30px}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__link{position:relative;font-size:15px;font-weight:500;color:var(--text-mid);padding:8px 2px;transition:color .2s ease}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--gold);transition:right .25s var(--transition)}
.nav__link:hover,.nav__link.is-active{color:var(--text-light)}
.nav__link:hover::after,.nav__link.is-active::after{right:0}
.nav__cta{margin-left:8px}
.nav-toggle{
  display:none;position:relative;width:42px;height:42px;border:1px solid var(--line-light);
  background:rgba(255,255,255,.04);border-radius:10px;
}
.nav-toggle__bar{position:absolute;left:10px;right:10px;height:2px;background:var(--text-light);border-radius:2px;transition:top .2s ease,transform .2s ease,opacity .2s ease}
.nav-toggle__bar:nth-child(1){top:13px}
.nav-toggle__bar:nth-child(2){top:20px}
.nav-toggle__bar:nth-child(3){top:27px}
.nav-toggle.is-open .nav-toggle__bar:nth-child(1){top:20px;transform:rotate(45deg)}
.nav-toggle.is-open .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle.is-open .nav-toggle__bar:nth-child(3){top:20px;transform:rotate(-45deg)}

.section{padding:84px 0}
.section--dark{background:var(--ink)}
.section--dark2{background:var(--ink-2)}
.section--paper{background:var(--paper);color:var(--text-dark)}
.section__head{max-width:720px;margin-bottom:40px}
.section__head--light{color:var(--text-light)}
.section__head--paper{color:var(--text-dark)}
.section__eyebrow{display:inline-flex;align-items:center;color:var(--gold);font-size:13px;letter-spacing:.12em;font-weight:600;margin-bottom:12px}
.section__eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);margin-right:9px}
.section__title{font-size:clamp(24px,4vw,38px);font-weight:700;line-height:1.28;letter-spacing:.02em}
.section__title--gold{color:var(--text-light)}
.section__title--darktext{color:var(--text-dark)}
.section__desc{margin-top:14px;font-size:16px;color:var(--text-mid)}
.section--paper .section__desc{color:var(--text-dark-2)}

.hero{
  position:relative;
  padding:150px 0 50px;
  background:
    linear-gradient(180deg,rgba(13,14,18,.65) 0%,rgba(13,14,18,.75) 55%,rgba(13,14,18,.95) 100%),
    linear-gradient(120deg,rgba(13,14,18,.4),rgba(13,14,18,.2) 60%,rgba(13,14,18,.72)),
    url('/assets/images/backpic/back-1.png') center/cover no-repeat;
  background-color:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.03);
}
.hero__inner{position:relative;z-index:2}
.hero__row{display:flex;gap:48px;align-items:flex-start}
.hero__main{flex:1;max-width:660px}
.hero__badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid rgba(201,160,99,.4);border-radius:999px;background:rgba(201,160,99,.08);color:var(--gold-light);font-size:13px;letter-spacing:.08em}
.hero__badge .icon{display:inline-flex;width:8px;height:8px;border-radius:50%;background:#3F7A5F;box-shadow:0 0 12px rgba(63,122,95,.6)}
.hero__title{
  margin-top:28px;
  font-size:clamp(38px,6.5vw,68px);
  line-height:1.16;
  font-weight:700;
  color:var(--text-light);
  letter-spacing:.02em;
}
.hero__lead{
  margin-top:20px;
  max-width:540px;
  font-size:clamp(17px,1.2vw,20px);
  line-height:1.75;
  color:#C6C9CB;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero__aside{
  flex:0 0 268px;margin-top:76px;
}
.hero__data-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  padding:18px 18px 12px;
}
.hero__data-item{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.1);font-size:14px}
.hero__data-item:last-child{border-bottom:none}
.hero__data-label{color:var(--text-mid)}
.hero__data-value{color:var(--gold-light);font-weight:600;font-family:var(--mono);font-size:14px}
.hero__stats{
  margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.025);
}
.hero__stat{padding:18px 22px;border-right:1px solid rgba(255,255,255,.08);line-height:1.4}
.hero__stat:last-child{border-right:none}
.hero__stat strong{display:block;font-size:22px;font-weight:700;color:var(--gold-light);letter-spacing:.02em}
.hero__stat span{font-size:13px;color:var(--text-mid)}

.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.portal-card{
  position:relative;display:flex;flex-direction:column;gap:13px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.075);
  border-radius:var(--r-lg);padding:22px;
  min-height:220px;
  transition:transform .25s var(--transition),border-color .25s ease,background .25s ease,box-shadow .3s ease;
  overflow:hidden;
}
.portal-card::after,.portal-card::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,160,99,.07),transparent);top:-60px;right:-50px;pointer-events:none}
.portal-card:hover{transform:translateY(-5px);border-color:rgba(201,160,99,.45);background:rgba(255,255,255,.055);box-shadow:var(--shadow-2)}
.portal-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.portal-icon{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid rgba(201,160,99,.45);border-radius:11px;background:var(--gold-soft);color:var(--gold-light)}
.portal-state{font-size:12px;color:#75A390;display:inline-flex;align-items:center;gap:5px}
.portal-state::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green)}
.portal-card h3{font-size:17px;color:#FBFAF8;font-weight:600;letter-spacing:.02em}
.portal-card p{font-size:13.5px;line-height:1.75;color:var(--text-mid);margin:0;flex:1}
.portal-more{display:inline-flex;gap:6px;align-items:center;font-size:13.5px;font-weight:600;color:var(--gold);margin-top:10px;transition:gap .2s var(--transition)}
.portal-card:hover .portal-more{color:var(--gold-light)}
.portal-card:hover .portal-more span{margin-left:4px}
.portal-more span{transition:margin .2s var(--transition)}

.scene-wrap{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.scene-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.scene-side__title{font-size:30px;line-height:1.35;font-weight:700;letter-spacing:.01em}
.scene-side__text{color:var(--text-dark-2);font-size:15px;line-height:1.8}
.scene-side__text strong{color:#0e8;}
.scene-list{display:grid;gap:16px}
.scene-card{
  display:grid;grid-template-columns:68px 1fr;gap:18px;
  background:var(--card);border:1px solid rgba(0,0,0,.07);
  border-radius:var(--r-md);padding:22px;
  box-shadow:var(--shadow-1);
  transition:transform .25s var(--transition),box-shadow .25s ease,border-color .25s ease;
}
.scene-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:rgba(201,160,99,.65)}
.scene-num{font-size:14px;font-weight:700;color:var(--text-dark-2)}
.scene-num b{display:block;font-size:25px;color:var(--gold);font-weight:700;margin-bottom:3px}
.scene-card h3{font-size:18px;font-weight:700;color:var(--text-dark)}
.scene-card p{margin-top:6px;color:var(--text-dark-2);font-size:14.5px;line-height:1.8}
.scene-action{margin-top:13px;display:inline-flex;gap:6px;align-items:center;color:var(--green);font-weight:600;font-size:14px;border-bottom:1px solid transparent;transition:border-color .2s ease}
.scene-action:hover{border-color:currentColor}
.scene-action span{transition:transform .2s var(--transition)}
.scene-action:hover span{transform:translateX(4px)}

.news-list{display:flex;flex-direction:column}
.news-row{
  display:grid;grid-template-columns:190px 1fr 130px;gap:22px;align-items:center;
  padding:22px 4px;border-bottom:1px solid rgba(255,255,255,.08);
  transition:padding-left .2s ease,background .2s ease;
}
.news-row:hover{padding-left:12px;background:rgba(255,255,255,.018)}
.news-row:first-child{border-top:1px solid rgba(255,255,255,.08)}
.news-meta{display:flex;flex-direction:column;gap:6px}
.news-tag{display:inline-flex;align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-light);font-size:12px;border:1px solid rgba(201,160,99,.26)}
.news-time{color:var(--text-mid);font-size:12.5px;font-family:var(--mono)}
.news-title{font-size:17px;font-weight:600;color:#F2F3F2;transition:color .2s ease;line-height:1.5}
.news-row:hover .news-title{color:var(--gold-light)}
.news-excerpt{grid-column:2;color:var(--text-mid);font-size:14px;line-height:1.7;align-self:start}
.news-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:60px 20px;border:1px dashed rgba(255,255,255,.16);border-radius:18px;text-align:center}
.news-empty span{color:var(--text-mid)}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-card{background:var(--card);border:1px solid rgba(0,0,0,.07);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-1);transition:transform .25s var(--transition),box-shadow .25s ease}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.case-thumb{aspect-ratio:16/8;overflow:hidden;background:#EAE7DF}
.case-thumb img{width:100%;height:100%;object-fit:cover}
.case-body{display:flex;flex-direction:column;gap:12px;padding:20px 20px 18px;flex:1}
.case-tag{font-size:12px;letter-spacing:.04em;color:var(--green);font-weight:700}
.case-card h3{font-size:17px;color:var(--text-dark);font-weight:700;line-height:1.5}
.case-card p{font-size:14px;color:var(--text-dark-2);line-height:1.75;flex:1}
.case-result{display:inline-flex;align-items:baseline;gap:4px;border-top:1px solid rgba(0,0,0,.08);padding-top:10px;margin-top:2px;color:var(--text-dark);font-size:13px}
.case-result b{font-size:15px;color:var(--gold);font-weight:700;font-family:var(--mono)}
.case-link{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-size:13.5px;font-weight:600;margin-top:6px}
.case-link span{transition:transform .2s var(--transition)}
.case-link:hover span{transform:translateX(4px)}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-xl);padding:28px 24px;display:flex;flex-direction:column;gap:20px;position:relative;transition:border-color .25s ease,transform .25s var(--transition)}
.plan--featured{border-color:rgba(201,160,99,.68);background:linear-gradient(165deg,rgba(201,160,99,.13),rgba(255,255,255,.035) 50%);transform:translateY(-6px)}
.plan--featured:hover{transform:translateY(-8px)}
.plan__recommend{position:absolute;top:-11px;left:22px;background:var(--gold);color:#16130E;font-size:12px;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:3px 11px}
.plan__type{display:flex;align-items:center;gap:10px}
.plan__name{font-size:18px;font-weight:700;color:#FBFAF8}
.plan__price{margin-top:4px;display:flex;align-items:baseline;gap:8px}
.plan__price b{font-size:27px;font-weight:700;color:var(--gold)}
.plan__price span{font-size:12.5px;color:var(--text-mid)}
.plan__tag{display:inline-flex;align-items:center;font-size:12.5px;color:#A0D3B7;border:1px solid rgba(63,122,95,.48);background:var(--green-soft);padding:3px 10px;border-radius:999px}
.plan__list{display:grid;gap:10px;flex:1}
.plan__list li{display:flex;gap:9px;font-size:14px;color:#D7DAD9;line-height:1.6}
.plan__list li::before{content:"✓";flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--green);color:#7DC7A0;font-size:11px;text-align:center;line-height:17px;margin-top:3px}
.plan__footer{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.plan__note{margin-top:auto;font-size:12.5px;color:var(--text-mid);line-height:1.7}

.faq-layout{display:grid;grid-template-columns:300px 1fr;gap:60px}
.faq-side h2{font-size:30px;color:var(--text-dark);line-height:1.35;font-weight:700}
.faq-side p{margin-top:12px;color:var(--text-dark-2);font-size:14.5px}
.faq-accordion{display:grid;gap:12px;width:100%}
.faq-item{background:var(--card);border:1px solid rgba(0,0,0,.09);border-radius:13px;overflow:hidden}
.faq-item.is-open{border-color:rgba(201,160,99,.55)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;
  padding:17px 20px;font-size:16px;font-weight:600;color:var(--text-dark);background:transparent;border:0;
}
.faq-q:hover{color:#9b742f}
.faq-q__icon{flex:none;width:22px;height:22px;position:relative;border:1px solid rgba(0,0,0,.2);border-radius:50%;transition:transform .2s ease,border-color .2s ease}
.faq-q__icon::before,.faq-q__icon::after{content:"";position:absolute;background:var(--text-dark);border-radius:2px;transition:background .2s ease,transform .3s var(--transition)}
.faq-q__icon::before{left:6px;right:6px;top:10px;height:2px}
.faq-q__icon::after{top:6px;bottom:6px;left:10px;width:2px}
.faq-item.is-open .faq-q__icon{transform:rotate(45deg);border-color:var(--gold)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 20px}
.faq-answer p{padding-bottom:18px;font-size:14.5px;line-height:1.85;color:var(--text-dark-2)}
.cta-section{position:relative;background:linear-gradient(180deg,rgba(13,14,18,.88),rgba(13,14,18,.96)),url('/assets/images/backpic/back-2.png') center/cover no-repeat;background-color:var(--ink);text-align:center;padding:86px 0}
.cta-section__title{font-size:clamp(22px,4vw,36px);color:#F5F4F1;font-weight:700;line-height:1.35;max-width:720px;margin:0 auto}
.cta-section__sub{color:var(--text-mid);max-width:540px;margin:16px auto 0}
.cta-section__actions{display:flex;justify-content:center;gap:12px;margin-top:30px}

.site-footer{background:#090A0D;border-top:1px solid rgba(255,255,255,.07)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;padding:52px 0 26px}
.footer__brand .brand{justify-content:flex-start}
.footer__text{color:var(--text-mid);font-size:13.5px;line-height:1.85;margin-top:16px}
.footer__block h4{color:var(--text-light);font-size:15px;font-weight:600;letter-spacing:.04em;margin-bottom:15px}
.footer__link{display:block;color:var(--text-mid);font-size:14px;line-height:2.4;transition:color .2s ease}
.footer__link:hover{color:var(--gold)}
.footer__tech{color:var(--text-mid);font-size:13.5px;line-height:1.9}
.footer__tech b{color:var(--gold);font-weight:600}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0 22px;font-size:13px;color:#73777C;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between}
.footer__bottom a{color:#9299A0;border-bottom:1px solid transparent}
.footer__bottom a:hover{color:var(--gold);border-color:var(--gold)}

.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .6s var(--transition)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

@media (max-width:1100px){
  .grid-cards{grid-template-columns:repeat(3,1fr)}
  .hero__row{flex-direction:column}
  .hero__aside{flex:none;width:100%;margin-top:24px}
  .hero__data-card{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .hero__data-item{flex-direction:column;gap:2px;border-right:1px dashed rgba(255,255,255,.08);padding:12px;border-bottom:none}
  .hero__data-item:last-child{border-right:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .cases{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:calc(100% + 6px);left:4vw;right:4vw;
    background:#101116;border:1px solid rgba(255,255,255,.1);
    border-radius:16px;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;
    box-shadow:0 40px 70px rgba(0,0,0,.4);
    opacity:0;transform:translateY(-10px);visibility:hidden;
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
  }
  .nav.is-open{opacity:1;transform:none;visibility:visible}
  .nav__links{flex-direction:column;align-items:flex-start;width:100%;gap:2px}
  .nav__link{display:block;width:100%;font-size:16px;padding:12px 6px}
  .nav__link::after{display:none}
  .nav__cta{width:100%;justify-content:center;margin:8px 0 2px}
  .pricing-grid{grid-template-columns:1fr 1fr}
  .plan--featured{transform:none}
  .plan--featured:hover{transform:translateY(-4px)}
}
@media (max-width:900px){
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .scene-wrap{grid-template-columns:1fr}
  .scene-side{position:static}
  .faq-layout{grid-template-columns:1fr;gap:24px}
  .news-row{grid-template-columns:140px 1fr;gap:10px 20px}
  .news-excerpt{grid-column:2}
  .news-time{grid-column:2}
  .news-tag{grid-column:1}
}
@media (max-width:640px){
  .section{padding:64px 0}
  .site-header__inner{min-height:64px}
  .brand__mark{width:32px;height:32px}
  .brand__text{font-size:17px}
  .hero{padding:110px 0 40px}
  .hero__title{font-size:36px}
  .hero__stats{grid-template-columns:1fr 1fr}
  .hero__stat:nth-child(2){border-right:none}
  .hero__stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
  .hero__data-card{grid-template-columns:1fr 1fr}
  .hero__data-item:nth-child(2){border-right:none}
  .hero__actions .btn{width:100%}
  .grid-cards{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .plan--featured{transform:none}
  .footer__grid{grid-template-columns:1fr;gap:30px;padding-top:40px}
  .news-row{grid-template-columns:1fr;gap:8px}
  .news-excerpt{grid-column:1}
  .news-time{grid-column:1}
  .news-tag{grid-column:1}
  .scenenum{width:100%}
}

/* roulang page: category1 */
:root {
    --gold-1: #C9A063;
    --gold-2: #E2BE81;
    --gold-3: #A9844E;
    --ink-0: #EAECEC;
    --ink-1: #A5ABB3;
    --ink-2: #1D1E1C;
    --ink-3: #64665F;
    --night-1: #0D0E12;
    --night-2: #111317;
    --night-3: #151920;
    --moon-1: #F3F1EC;
    --moon-2: #FCFBF8;
    --line-dark: rgba(255, 255, 255, 0.08);
    --line-moon: rgba(0, 0, 0, 0.08);
    --success: #3F7A5F;
    --warn: #B58A3A;
    --error: #B34A4A;
    --fs-3: 13px;
    --fs-2: 14px;
    --fs-1: 15px;
    --fs-0: 16px;
    --fs-4: 18px;
    --fs-5: 20px;
    --fs-6: 24px;
    --fs-7: 32px;
    --fs-8: 44px;
    --rad-1: 8px;
    --rad-2: 12px;
    --rad-3: 16px;
    --shadow-1: 0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-2: 0 20px 40px rgba(0, 0, 0, 0.10);
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 80px;
    --ease-1: cubic-bezier(0.2, 0, 0, 1);
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: var(--fs-0);
    line-height: 1.7;
    background: var(--moon-1);
    color: var(--ink-2);
    -webkit-font-smoothing: antialiased;
}

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

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

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

ul, ol, dl, dd, p, h1, h2, h3, h4, h5 {
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4 {
    line-height: 1.3;
    font-weight: 600;
}

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

::-moz-focus-inner {
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--gold-1);
    outline-offset: 2px;
    border-radius: 4px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-0);
    font-weight: 600;
    line-height: 1.2;
    padding: 14px 24px;
    border-radius: var(--rad-1);
    transition: background-color 0.22s var(--ease-1), color 0.22s var(--ease-1), transform 0.18s var(--ease-1), box-shadow 0.22s var(--ease-1), border-color 0.22s var(--ease-1);
    min-height: 44px;
}

.btn--sm {
    padding: 8px 18px;
    font-size: var(--fs-1);
    min-height: 38px;
}

.btn--primary {
    background: var(--gold-1);
    color: var(--night-1);
}

.btn--primary:hover {
    background: var(--gold-2);
    color: #121418;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(201, 160, 99, 0.18);
}

.btn--secondary {
    background: transparent;
    border: 1px solid var(--gold-1);
    color: var(--gold-1);
    cursor: pointer;
}

.btn--secondary:hover {
    background: rgba(201, 160, 99, 0.10);
    color: var(--gold-2);
    border-color: var(--gold-2);
}

.btn--cta {
    background: var(--gold-1);
    color: var(--night-1);
    font-weight: 700;
}

.btn--cta:hover {
    background: var(--gold-2);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(201, 160, 99, 0.28);
}

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

.btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 11, 14, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    gap: 16px;
}

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

.brand__mark {
    width: 36px;
    height: 36px;
}

.brand__name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.1;
}

.brand__text {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-0);
    letter-spacing: 0.02em;
}

.brand__sub {
    font-size: var(--fs-2);
    font-weight: 400;
    color: var(--gold-1);
    letter-spacing: 0.08em;
}

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

.nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav__link {
    position: relative;
    display: inline-block;
    font-size: var(--fs-1);
    color: rgba(234, 236, 236, 0.72);
    font-weight: 500;
    padding: 8px 2px;
    transition: color 0.2s var(--ease-1);
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 2px;
    height: 2px;
    background: var(--gold-1);
    border-radius: 2px;
    transition: right 0.24s var(--ease-1);
}

.nav__link:hover {
    color: var(--ink-0);
}

.nav__link:hover::after {
    right: 0;
    left: 0;
}

.nav__link.is-active {
    color: var(--gold-2);
}

.nav__link.is-active::after {
    right: 0;
    left: 0;
}

.nav__cta {
    margin-left: 8px;
}

.nav-toggle {
    display: none;
    background: none;
    padding: 10px;
    margin-left: auto;
    align-items: center;
    gap: 6px;
}

.nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink-0);
    transition: transform 0.24s var(--ease-1), opacity 0.2s var(--ease-1);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -5px);
}

/* hero */
.cat-hero {
    background-color: var(--night-1);
    background-image:
        linear-gradient(to bottom, rgba(13, 14, 18, 0.88) 0%, rgba(13, 14, 18, 0.72) 45%, rgba(13, 14, 18, 0.95) 100%),
        url('/assets/images/backpic/back-2.png');
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: cover;
    color: var(--ink-0);
    padding: var(--space-6) 0 var(--space-6) 0;
    border-bottom: 1px solid var(--line-dark);
    position: relative;
}

.cat-hero__inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, 0.9fr);
    gap: 48px;
    align-items: end;
}

.breadcrumb {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-2);
    color: rgba(165, 171, 179, 0.72);
    margin-bottom: 24px;
}

.breadcrumb a {
    color: rgba(165, 171, 179, 0.8);
    transition: color 0.2s var(--ease-1);
}

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

.breadcrumb .sep {
    color: rgba(165, 171, 179, 0.4);
}

.cat-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(226, 190, 129, 0.08);
    border: 1px solid rgba(201, 160, 99, 0.45);
    color: var(--gold-2);
    padding: 5px 14px;
    border-radius: 100px;
    font-size: var(--fs-2);
    font-weight: 500;
    margin-bottom: var(--space-4);
}

.cat-hero__eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
}

.cat-hero__title {
    font-size: var(--fs-8);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 18px;
    max-width: 720px;
}

.cat-hero__title .gold {
    color: var(--gold-2);
}

.cat-hero__desc {
    font-size: var(--fs-4);
    color: var(--ink-1);
    line-height: 1.8;
    max-width: 720px;
    margin-bottom: var(--space-4);
}

.cat-hero__meta .data-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: var(--fs-2);
    color: rgba(165, 171, 179, 0.85);
}

.cat-hero__meta .dot {
    color: var(--gold-1);
}

@media (min-width: 769px) {
    .cat-hero__inner {
        grid-template-columns: 1.2fr 0.8fr;
    }
    .cat-hero__aside {
        justify-self: end;
        width: 100%;
        max-width: 360px;
    }
}

/* section tag */
.link-card-area {
    background: var(--night-1);
    color: var(--ink-0);
    padding: var(--space-7) 0 60px 0;
    position: relative;
}

.link-card-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-3), transparent);
    opacity: 0.4;
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: var(--space-5);
}

.section-head__tag {
    font-size: var(--fs-2);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-1);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.section-head__tag::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--gold-1);
    opacity: 0.6;
}

.section-head__title {
    font-weight: 600;
    line-height: 1.3;
}

.section-head__sub {
    margin-top: 10px;
    color: rgba(165, 171, 179, 0.9);
    line-height: 1.7;
    font-size: var(--fs-0);
    max-width: 760px;
}

.link-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.link-card {
    background: var(--night-3);
    border: 1px solid var(--line-dark);
    border-radius: var(--rad-3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.26s var(--ease-1), transform 0.24s var(--ease-1), box-shadow 0.26s var(--ease-1);
}

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

.link-card__media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #202329;
}

.link-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.link-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 14, 18, 0.55), transparent 60%);
}

.link-card__tag {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    background: rgba(13, 14, 18, 0.82);
    border: 1px solid rgba(201, 160, 99, 0.5);
    color: var(--gold-2);
    font-size: 12px;
    padding: 2px 12px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.link-card__status {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(13, 14, 18, 0.82);
    border: 1px solid rgba(63, 122, 95, 0.6);
    color: #a7dcc2;
}

.link-card__status::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--success);
}

.link-card__status.is-warn {
    border-color: rgba(181, 138, 58, 0.65);
    color: #dfc18e;
}

.link-card__status.is-warn::before {
    background: var(--warn);
}

.link-card__body {
    display: block;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 18px 22px;
}

.link-card__title {
    font-size: var(--fs-5);
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ink-0);
}

.link-card__url {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: rgba(165, 171, 179, 0.64);
    margin-bottom: 14px;
    word-break: break-all;
    transition: color 0.2s var(--ease-1);
}

.link-card:hover .link-card__url {
    color: rgba(165, 171, 179, 0.9);
}

.link-card__desc {
    color: rgba(165, 171, 179, 0.9);
    line-height: 1.7;
    font-size: var(--fs-1);
    flex: 1;
    margin-bottom: 20px;
}

.link-card__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--gold-1);
    font-size: var(--fs-1);
    transition: color 0.2s var(--ease-1), gap 0.22s var(--ease-1);
}

.link-card__action svg {
    transition: transform 0.22s var(--ease-1);
}

.link-card__action:hover svg,
.link-card:hover .link-card__action svg {
    transform: translateX(4px);
}

/* update band */
.update-ticker {
    padding: 22px 0;
    background: var(--night-1);
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
}

.update-ticker__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.update-ticker__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201, 160, 99, 0.12);
    color: var(--gold-2);
    border-radius: 100px;
    padding: 4px 16px;
    font-size: var(--fs-2);
    font-weight: 600;
    white-space: nowrap;
}

.update-ticker__text {
    color: rgba(234, 236, 236, 0.8);
    font-size: var(--fs-1);
    line-height: 1.6;
    margin: 0;
}

/* check section */
.procedure-area {
    background: var(--moon-1);
    padding: var(--space-7) 0;
}

.procedure-area .section-head__title {
    color: var(--ink-2);
}

.procedure-area .section-head__sub {
    color: var(--ink-3);
}

.procedure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.procedure-item {
    position: relative;
    background: var(--moon-2);
    border: 1px solid var(--line-moon);
    border-radius: var(--rad-2);
    padding: 32px 26px 28px 26px;
    transition: box-shadow 0.24s var(--ease-1), transform 0.24s var(--ease-1), border-color 0.24s var(--ease-1);
}

.procedure-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-1);
    border-color: rgba(201, 160, 99, 0.3);
}

.procedure-item__num {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gold-3);
    color: var(--gold-3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-4);
    margin-bottom: 22px;
    transition: background-color 0.22s var(--ease-1), color 0.22s var(--ease-1);
}

.procedure-item:hover .procedure-item__num {
    background: var(--gold-1);
    color: var(--night-1);
    border-color: var(--gold-1);
}

.procedure-item__title {
    font-size: var(--fs-5);
    margin-bottom: 8px;
    color: var(--ink-2);
    font-weight: 600;
}

.procedure-item__desc {
    font-size: var(--fs-0);
    color: var(--ink-3);
    line-height: 1.75;
    margin-bottom: 16px;
}

.procedure-item__time {
    font-size: var(--fs-3);
    color: var(--gold-3);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.procedure-item__time::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold-3);
    opacity: 0.6;
}

/* notice area */
.notice-area {
    background: var(--night-1);
    padding: var(--space-7) 0;
    border-top: 1px solid var(--line-dark);
}

.notice-block {
    background: linear-gradient(135deg, rgba(201, 160, 99, 0.06), rgba(201, 160, 99, 0.01));
    border: 1px solid rgba(201, 160, 99, 0.28);
    border-radius: var(--rad-3);
    overflow: hidden;
    position: relative;
}

.notice-block__stars {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--gold-1);
    opacity: 0.4;
}

.notice-block__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
}

.notice-block__copy {
    padding: 32px 34px;
    color: var(--ink-0);
}

.notice-block__title {
    font-size: var(--fs-6);
    margin-bottom: 12px;
    color: var(--gold-2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.notice-block__text {
    color: rgba(234, 236, 236, 0.8);
    line-height: 1.9;
    font-size: var(--fs-1);
}

.notice-block__list {
    list-style: none;
    padding: 28px 34px;
    background: rgba(13, 14, 18, 0.6);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
}

.notice-block__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(234, 236, 236, 0.82);
    font-size: var(--fs-1);
    line-height: 1.6;
}

.notice-block__list li::before {
    content: "★";
    color: var(--gold-1);
    font-size: 11px;
    margin-top: 8px;
}

/* faq */
.faq-area {
    background: var(--moon-1);
    border-top: 1px solid var(--line-moon);
    padding: var(--space-7) 0;
}

.faq-layout {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 64px;
}

.faq-area .section-head__title {
    color: var(--ink-2);
    margin-bottom: 10px;
}

.faq-area .section-head__sub {
    color: var(--ink-3);
}

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

.faq-item {
    background: var(--moon-2);
    border: 1px solid var(--line-moon);
    border-radius: var(--rad-2);
    overflow: hidden;
    transition: border-color 0.24s var(--ease-1), box-shadow 0.24s var(--ease-1);
}

.faq-item.is-open {
    border-color: rgba(201, 160, 99, 0.4);
    box-shadow: var(--shadow-1);
}

.faq-item__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: transparent;
    padding: 18px 22px;
    font-size: var(--fs-1);
    color: var(--ink-2);
    line-height: 1.5;
    font-weight: 500;
    gap: 16px;
}

.faq-item__btn span:last-child {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    position: relative;
    transition: transform 0.26s var(--ease-1), background-color 0.22s var(--ease-1);
}

.faq-item__btn span:last-child::before,
.faq-item__btn span:last-child::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 5px;
    width: 10px;
    height: 1.5px;
    background: var(--gold-3);
    transition: background-color 0.22s var(--ease-1), opacity 0.2s var(--ease-1);
}

.faq-item__btn span:last-child::after {
    transform: rotate(90deg);
}

.faq-item.is-open .faq-item__btn span:last-child {
    background: rgba(201, 160, 99, 0.1);
    border-color: rgba(201, 160, 99, 0.4);
}

.faq-item.is-open .faq-item__btn span:last-child::before {
    opacity: 0;
}

.faq-item.is-open .faq-item__btn span:last-child::after {
    transform: rotate(0);
    background: var(--gold-1);
}

.faq-item__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s var(--ease-1);
}

.faq-item__answer {
    padding: 2px 24px 22px 24px;
    font-size: var(--fs-1);
    color: var(--ink-3);
    line-height: 1.85;
    border-top: none;
    max-width: 720px;
}

/* CTA */
.cta-area {
    background-color: var(--night-1);
    background-image:
        linear-gradient(rgba(13, 14, 18, 0.92), rgba(13, 14, 18, 0.92)),
        url('/assets/images/backpic/back-1.png');
    background-size: cover;
    background-position: center;
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
    padding: var(--space-7) 0;
    text-align: center;
}

.cta-area__inner {
    max-width: 720px;
    margin: 0 auto;
}

.cta-area__star {
    letter-spacing: 8px;
    color: var(--gold-1);
    font-size: 12px;
    margin-bottom: 18px;
}

.cta-area__title {
    color: var(--ink-0);
    font-size: var(--fs-7);
    margin-bottom: 16px;
    line-height: 1.35;
}

.cta-area__title span {
    color: var(--gold-2);
}

.cta-area__desc {
    color: var(--ink-1);
    font-size: var(--fs-4);
    line-height: 1.8;
    margin-bottom: 36px;
}

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

/* footer */
.site-footer {
    background: var(--night-1);
    color: var(--ink-1);
    border-top: 1px solid var(--line-dark);
}

.site-footer .container {
    padding-top: var(--space-5);
    padding-bottom: 0;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: var(--space-5);
}

.footer__brand {
    max-width: 360px;
}

.footer__brand .brand__text {
    color: var(--ink-0);
}

.footer__text {
    color: var(--ink-1);
    font-size: var(--fs-1);
    line-height: 1.8;
    margin-top: 18px;
}

.site-footer h4 {
    color: var(--ink-0);
    font-size: var(--fs-0);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    margin-top: 0;
    position: relative;
    padding-bottom: 10px;
}

.site-footer h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--gold-1);
    opacity: 0.7;
}

.footer__link {
    display: block;
    color: rgba(165, 171, 179, 0.8);
    font-size: var(--fs-1);
    line-height: 1.7;
    padding: 4px 0;
    transition: color 0.2s var(--ease-1), padding-left 0.2s var(--ease-1);
}

.footer__link:hover {
    color: var(--gold-2);
    padding-left: 4px;
}

.footer__tech {
    font-size: var(--fs-2);
    color: rgba(165, 171, 179, 0.7);
    line-height: 1.85;
    border-left: 2px solid rgba(201, 160, 99, 0.4);
    padding-left: 14px;
    padding-top: 2px;
}

.footer__tech b {
    color: var(--gold-2);
    font-weight: 600;
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding: 20px 0 24px 0;
    font-size: var(--fs-3);
    color: rgba(165, 171, 179, 0.55);
    letter-spacing: 0.02em;
}

/* motion */
.reveal {
    opacity: 1;
    transform: translateY(0);
}

.reveal-hidden {
    opacity: 0;
    transform: translateY(12px);
}

.motion-safe .reveal-hidden {
    transition: opacity 0.5s var(--ease-1), transform 0.5s var(--ease-1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal-hidden {
        opacity: 1;
        transform: none;
    }
    .btn--cta:hover,
    .btn--primary:hover {
        transform: none;
    }
    .link-card:hover,
    .procedure-item:hover {
        transform: none;
    }
}

/* mobile nav keyframes */
@keyframes navMenuFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* responsive */
@media (max-width: 1024px) {
    :root {
        --fs-8: 38px;
        --fs-7: 30px;
        --fs-6: 22px;
        --space-7: 60px;
    }
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .link-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .procedure-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .footer__brand {
        grid-column: 1 / -1;
        max-width: 500px;
    }
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .notice-block__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --fs-8: 32px;
        --fs-7: 28px;
        --space-7: 56px;
        --space-6: 40px;
    }
    body {
        font-size: 15px;
    }
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .site-header__inner {
        min-height: 64px;
    }
    .brand__text {
        font-size: 20px;
    }
    .brand__sub {
        font-size: 12px;
    }
    .brand__mark {
        width: 32px;
        height: 32px;
    }
    .nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: block;
        background: rgba(10, 11, 14, 0.98);
        border-bottom: 1px solid var(--line-dark);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        padding: 10px 20px 18px 20px;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s var(--ease-1), transform 0.24s var(--ease-1);
    }
    .nav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .nav__links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin-bottom: 12px;
    }
    .nav__link {
        font-size: 17px;
        padding: 12px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .nav__link::after {
        display: none;
    }
    .nav__cta {
        margin-left: 0;
        width: 100%;
    }
    .nav-toggle {
        display: inline-flex;
    }
    .cat-hero {
        padding-top: var(--space-5);
    }
    .cat-hero__inner {
        display: block;
    }
    .cat-hero__aside {
        margin-top: 40px;
        max-width: 100%;
    }
    .cat-hero__title {
        font-size: var(--fs-8);
        letter-spacing: -0.01em;
    }
    .link-card-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .procedure-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .section-head {
        align-items: flex-start;
        margin-bottom: 28px;
        flex-direction: column;
        gap: 8px;
    }
    .section-head__sub {
        margin-top: 6px;
        font-size: 15px;
    }
    .update-ticker__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .notice-block__copy,
    .notice-block__list {
        padding: 24px 20px;
    }
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    .footer__brand {
        grid-column: 1 / -1;
    }
    .cta-area__title {
        font-size: 28px;
    }
    .cta-area__desc {
        font-size: 16px;
    }
    .cta-area__actions .btn {
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 520px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .brand__sub {
        display: none;
    }
    .cat-hero__title {
        font-size: 29px;
    }
    .cat-hero__desc {
        font-size: 16px;
    }
    .btn--cta {
        min-width: 0;
    }
    .link-card {
        border-radius: 14px;
    }
    .footer__grid {
        grid-template-columns: 1fr;
    }
    .footer__brand {
        grid-column: 1;
    }
    .footer__tech {
        margin-top: 0;
    }
    .faq-item__btn {
        font-size: 15px;
        padding: 16px 16px;
    }
    .procedure-item {
        padding: 24px 18px 24px 18px;
    }
    .update-ticker__label {
        width: 100%;
        justify-content: center;
    }
    .notice-block__stars {
        display: none;
    }
}

@media (min-width: 1400px) {
    .container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* roulang page: article */
:root{
    --site-max:1240px;
    --site-pad:24px;
    --gold:#C9A063;
    --gold-light:#E2BE81;
    --gold-soft:rgba(201,160,99,.12);
    --night:#0D0E12;
    --night-2:#111317;
    --night-card:#151920;
    --night-line:rgba(255,255,255,.08);
    --paper:#F3F1EC;
    --paper-card:#FCFBF8;
    --ink:#1D1E1C;
    --muted:#64665F;
    --line:rgba(0,0,0,.1);
    --radius-lg:18px;
    --radius-md:13px;
    --radius-sm:8px;
    --shadow-panel:0 24px 60px rgba(0,0,0,.08);
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);line-height:1.7;background:var(--paper);color:var(--ink);min-width:320px}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
.container{width:min(100% - 48px,var(--site-max));margin-inline:auto}
.site-header{position:fixed;inset:0 0 auto;z-index:80;transition:background-color .25s ease,border-color .25s ease;background:transparent;border-bottom:1px solid transparent}
.site-header.is-scrolled{background:rgba(13,14,18,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--night-line)}
.site-header__inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand__mark{width:38px;height:38px;display:block;flex:none}
.brand__name{display:flex;flex-direction:column;line-height:1.12}
.brand__text{font-size:19px;font-weight:680;letter-spacing:.02em;color:#fff}
.brand__sub{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.18em;color:var(--gold)}
.brand__sub::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);display:inline-block}
.nav{display:flex;align-items:center;gap:32px}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__link{position:relative;font-size:15px;font-weight:500;color:#E9EAEC;padding:8px 1px;transition:color .2s}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:3px;background:var(--gold);transition:right .28s cubic-bezier(.2,0,0,1)}
.nav__link:hover::after,.nav__link.is-active::after{right:0}
.nav__link:hover,.nav__link.is-active{color:var(--gold-light)}
.nav__cta{margin-left:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-sm);font-weight:600;line-height:1;transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .12s}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn--primary{background:var(--gold);color:#161206;box-shadow:0 6px 18px rgba(201,160,99,.2)}
.btn--primary:hover{background:var(--gold-light);box-shadow:0 8px 24px rgba(201,160,99,.3)}
.btn--ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn--ghost:hover{background:var(--gold-soft);border-color:var(--gold-light)}
.btn--paper{background:var(--paper-card);color:var(--ink);border:1px solid var(--line)}
.btn--paper:hover{border-color:var(--gold);color:#7a5f2b}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px;border-radius:7px}
.btn--md{min-height:48px;padding:0 24px;font-size:15px}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:8px}
.nav-toggle__bar{width:24px;height:2px;background:#fff;border-radius:99px;transition:transform .25s,opacity .2s}
.nav-toggle.is-open .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle.is-open .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.article-page .site-header:not(.is-scrolled) .nav-toggle__bar{background:#fff}
.article-hero{position:relative;background:#0d0e12 url("/assets/images/backpic/back-2.png") center 22%/cover no-repeat;color:#fff;padding:160px 0 0;border-bottom:1px solid var(--night-line)}
.article-hero .hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,14,18,.42) 0%,rgba(13,14,18,.82) 60%,#0D0E12 99%);pointer-events:none}
.article-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 33%,transparent 85%);opacity:.65}
.article-skyline{position:relative;z-index:2;padding-bottom:58px}
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:34px;font-size:14px;color:#B5B9BF}
.breadcrumb a{display:inline-flex;align-items:center;gap:6px;color:#fff;opacity:.76;transition:opacity .18s}
.breadcrumb a:hover{opacity:1;color:var(--gold-light)}
.breadcrumb__sep{color:var(--gold);opacity:.75}
.breadcrumb__current{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:320px;color:#fff;opacity:.95}
.hero-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.hero-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.15em;color:var(--gold-light);border:1px solid rgba(201,160,99,.5);border-radius:999px;padding:6px 13px;background:rgba(11,10,8,.24)}
.hero-tag i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;animation:twinkle 2s infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.3}}
.article-hero__title{max-width:900px;font-size:42px;line-height:1.28;font-weight:680;color:#FFFDF7;letter-spacing:.01em;margin:0 0 26px}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:14px;color:#B6BBC3}
.article-meta__item{display:inline-flex;align-items:center;gap:8px;min-height:0}
.article-meta__item svg{width:14px;height:14px;opacity:.8;stroke:var(--gold)}
.article-meta span.sep{color:var(--gold);opacity:.7}
.article-main{position:relative;background:var(--paper);padding:56px 0 76px}
.article-main::before{content:"";position:absolute;top:0;left:0;right:0;height:70px;background:linear-gradient(180deg,#111317,var(--paper));pointer-events:none;opacity:.3}
.article-main__inner{max-width:900px;position:relative}
.article-panel{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);padding:54px 58px;position:relative}
.article-body{max-width:754px;margin-inline:auto;font-size:17px;line-height:1.9;color:#2A2B27;word-break:break-word}
.article-body>:first-child{margin-top:0}
.article-body p{margin:0 0 24px;letter-spacing:.02em}
.article-body h2,.article-body h3,.article-body h4{color:var(--ink);font-weight:680}
.article-body h2{font-size:25px;line-height:1.45;margin:52px 0 20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.article-body h3{font-size:20px;margin:36px 0 16px}
.article-body h4{font-size:17px;margin:26px 0 12px}
.article-body a{color:#9a7a3e;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s,text-decoration .2s}
.article-body a:hover{color:#6f5220}
.article-body img,.article-body video{max-width:100%;height:auto;margin:28px 0;border-radius:14px;background:#e5e2da}
.article-body ul,.article-body ol{margin:0 0 24px;padding-left:28px}
.article-body li{margin-bottom:8px}
.article-body blockquote{margin:32px 0;padding:18px 22px;background:var(--paper);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;color:#57554b;font-size:16px}
.article-body code{background:#efece4;border-radius:6px;padding:3px 8px;font-family:var(--mono);font-size:.92em}
.article-body pre{background:#121419;color:#E9E7E0;border-radius:14px;padding:20px;overflow-x:auto;margin-bottom:26px;line-height:1.7}
.article-body pre code{background:transparent;color:inherit;padding:0}
.article-empty{max-width:560px;margin:0 auto;text-align:center;padding:40px 0 26px}
.article-empty__icon{width:88px;height:88px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line)}
.article-empty h2{font-size:32px;font-weight:700;margin-bottom:16px}
.article-empty p{color:var(--muted);font-size:15px;margin-bottom:26px}
.article-empty .btn{min-width:150px}
.article-backbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.article-backbar p{font-size:15px;color:var(--muted);display:flex;align-items:center;gap:8px}
.article-backbar p svg{width:17px;height:17px;stroke:var(--gold)}
.article-backbar .actions{display:flex;flex-wrap:wrap;gap:10px}
.related-wrap{max-width:900px;margin:38px auto 0}
.related-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:20px}
.related-head h2{font-size:23px;font-weight:680;color:var(--ink)}
.related-head span{font-size:14px;color:var(--muted)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.related-card{border:1px solid var(--line);background:var(--paper-card);border-radius:14px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:6px;transition:transform .22s,border-color .22s,box-shadow .22s}
.related-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 30px rgba(0,0,0,.07)}
.related-card .rc-label{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#8a6a33}
.related-card .rc-back{font-size:13px;color:#a8a295;margin-top:4px}
.article-endlink{width:100%;margin-top:0}
.article-guide{max-width:1240px;margin:0 auto;padding:22px 0 0}
.article-guide__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.guide-card{position:relative;min-height:250px;border-radius:18px;overflow:hidden;border:1px solid var(--line);display:flex;align-items:flex-end;background:var(--night-2);box-shadow:0 12px 28px rgba(0,0,0,.05);transition:transform .24s,border-color .24s,box-shadow .24s}
.guide-card::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;opacity:.24;transition:opacity .35s ease}
.guide-card--one::before{background-image:url("/assets/images/coverpic/cover-6.png")}
.guide-card--two::before{background-image:url("/assets/images/coverpic/cover-7.png")}
.guide-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,14,18,.04),rgba(13,14,18,.7) 100%);transition:background .3s}
.guide-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.guide-card:hover::after{background:linear-gradient(180deg,rgba(13,14,18,.02),rgba(13,14,18,.8) 100%)}
.guide-card__body{position:relative;z-index:2;color:#fff;padding:28px 30px;max-width:100%}
.guide-card__tag{display:inline-flex;font-size:12px;letter-spacing:.1em;color:var(--gold-light);border:1px solid rgba(201,160,99,.6);padding:4px 12px;border-radius:99px;background:rgba(11,11,10,.32);margin-bottom:12px}
.guide-card__title{font-size:26px;font-weight:680;margin-bottom:8px}
.guide-card__text{color:rgba(255,255,255,.86);font-size:14px;max-width:420px;margin-bottom:18px}
.guide-card__cta{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:var(--gold-light);transition:color .2s}
.guide-card__cta svg{width:16px;height:16px;stroke:currentColor;transition:transform .2s}
.guide-card:hover .guide-card__cta svg{transform:translateX(5px)}
.article-cta{background:var(--night);color:#fff;position:relative;overflow:hidden;padding:86px 0 84px}
.article-cta::before{content:"";position:absolute;inset:0;background:url("/assets/images/backpic/back-1.png") center/cover no-repeat;opacity:.16;pointer-events:none}
.article-cta .container{position:relative}
.article-cta__inner{max-width:760px}
.article-cta h2{font-size:38px;line-height:1.3;font-weight:700;margin-bottom:16px;color:#F5F2E9}
.article-cta h2 em{font-style:normal;color:var(--gold-light)}
.article-cta p{color:#B2B7BD;font-size:16px;margin-bottom:28px}
.article-cta__actions{display:flex;flex-wrap:wrap;gap:12px}
.site-footer{background:var(--night);color:#B7Bcc3;padding-top:72px}
.site-footer .container{position:relative}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:52px}
.footer__grid .brand__text{color:#fff}
.footer__text{font-size:14px;color:#9da3a8;max-width:320px;padding-top:16px}
.footer__grid h4{color:#F0EFE7;font-weight:600;font-size:15px;margin-bottom:16px;letter-spacing:.03em}
.footer__link{display:block;font-size:14px;color:#B3B8BF;padding:5px 0;transition:color .18s,padding-left .2s}
.footer__link:hover{color:var(--gold-light);padding-left:5px}
.footer__tech{font-size:13px;line-height:1.85;color:#8f979d;font-family:var(--mono)}
.footer__tech b{color:var(--gold-light);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.footer__tech::before{content:"*";display:block;color:var(--gold);font-size:15px;margin-bottom:8px}
.footer__bottom{border-top:1px solid var(--night-line);padding:20px 0;font-size:13px;color:#838a93}
.footer__bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
body.no-js .reveal,.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,0,0,1)}
.js .reveal.is-visible{opacity:1;transform:translateY(0)}
body{transition:background-color .3s}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
 .js .reveal{opacity:1;transform:none}
}
@media (max-width:1024px){
 .nav{gap:20px}
 .nav__links{gap:16px}
 .container{width:min(100% - 40px,var(--site-max))}
 .article-panel{padding:46px 40px}
 .guide-card__body{padding:24px}
 .footer__grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:767px){
 .site-header__inner{height:66px}
 .nav-toggle{display:flex}
 .nav{position:fixed;z-index:55;right:20px;top:70px;min-width:calc(100% - 40px);background:rgba(13,14,18,.97);border:1px solid var(--night-line);border-radius:16px;flex-direction:column;align-items:stretch;padding:18px 20px 22px;gap:18px;display:none;opacity:0;transform:translateY(-8px)}
 .nav.is-open{display:flex;animation:navIn .24s ease forwards}
 @keyframes navIn{to{opacity:1;transform:translateY(0);}}
 @keyframes navOut{to{opacity:0;transform:translateY(-8px);}}
 .nav__links{flex-direction:column;align-items:stretch;gap:4px;border-bottom:1px solid var(--night-line);padding-bottom:15px}
 .nav__link{padding:11px 3px;font-size:16px}
 .nav__cta{width:100%}
 .brand__mark{width:34px;height:34px}
 .brand__text{font-size:17px}
 .article-hero{padding:120px 0 0;background-position:center 0}
 .article-skyline{padding-bottom:42px}
 .breadcrumb{margin-bottom:26px}
 .article-hero__title{font-size:34px;line-height:1.32}
 .article-main{padding:38px 0 58px}
 .article-main::before{height:100px;opacity:.45}
 .article-panel{border-radius:14px;padding:30px 22px;box-shadow:0 12px 30px rgba(0,0,0,.07)}
 .article-body{font-size:17px}
 .article-body h2{font-size:23px}
 .article-backbar{flex-direction:column;align-items:flex-start}
 .article-backbar .actions{width:100%}
 .related-head{align-items:flex-start;flex-direction:column}
 .related-grid{grid-template-columns:1fr}
 .article-guide__grid{grid-template-columns:1fr}
 .guide-card{min-height:205px}
 .guide-card__title{font-size:22px}
 .article-cta{padding:60px 0}
 .article-cta h2{font-size:29px}
 .article-cta__actions a{width:100%}
 .footer__grid{grid-template-columns:1fr;gap:28px}
 .site-footer{padding-top:52px}
}

/* roulang page: category2 */
:root {
  --gold: #C9A063;
  --gold-light: #E2BE81;
  --dark-0: #0A0B0E;
  --dark-1: #111317;
  --dark-2: #151920;
  --cream: #F3F1EC;
  --paper: #FCFBF8;
  --ink: #1D1E1C;
  --ink-soft: #64665F;
  --border-light: rgba(0, 0, 0, 0.09);
  --border-dark: rgba(255, 255, 255, 0.09);
  --ok: #3F7A5F;
  --warn: #B58A3A;
  --danger: #B34A4A;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.10);
  --max-width: 1240px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--dark-0);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

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

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

ul,
ol {
  list-style: none;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 20px;
  z-index: 9999;
  background: var(--gold);
  color: var(--dark-0);
  padding: 8px 16px;
  border-radius: 6px;
  transition: top .2s var(--ease);
}

.skip-link:focus-visible {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .12s var(--ease), box-shadow .22s var(--ease);
}

.btn--primary {
  background: var(--gold);
  color: #111317;
  border-color: var(--gold);
}

.btn--primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  box-shadow: 0 8px 22px rgba(201, 160, 99, .14);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--gold);
  border-color: rgba(201, 160, 99, .7);
}

.btn--ghost:hover {
  background: rgba(201, 160, 99, .12);
  border-color: var(--gold-light);
}

.btn--dark {
  color: var(--ink);
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .03);
}

.btn--dark:hover {
  background: rgba(255, 255, 255, .08);
}

.btn--sm {
  min-height: 42px;
  padding: 8px 16px;
  font-size: 14px;
}

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

.btn--ghost.btn--sm,
.btn--dark.btn--sm {
  color: var(--gold-light);
}

.btn--ghost.btn--sm {
  color: var(--gold);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(12, 13, 17, .88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  min-height: 76px;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #f2f3f4;
}

.brand__mark {
  width: 42px;
  height: 42px;
  flex: none;
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__text {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
}

.brand__sub {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: .22em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 76px;
  font-size: 15px;
  font-weight: 500;
  color: #A5ABB3;
  transition: color .2s var(--ease);
}

.nav__link:hover {
  color: #F0F1F1;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  transition: right .22s var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  right: 0;
}

.nav__link.is-active {
  color: #F5F0E6;
}

.nav__link.is-active::after {
  right: 0;
}

.nav__cta {
  margin-left: 28px;
}

.nav {
  display: flex;
  align-items: center;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
}

.nav-toggle__bar {
  width: 20px;
  height: 2px;
  background: #EAECEC;
  border-radius: 3px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}

.site-header.nav-is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.nav-is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.site-header.nav-is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Hero */
.category-hero {
  position: relative;
  background:
    linear-gradient(90deg, rgba(10, 11, 14, 0.88) 0%, rgba(10, 11, 14, 0.78) 45%, rgba(10, 11, 14, 0.46) 100%),
    linear-gradient(180deg, rgba(10, 11, 14, .38) 0%, rgba(10, 11, 14, .92) 100%),
    url('/assets/images/backpic/back-2.png') center / cover no-repeat;
  padding: 84px 0 70px;
  border-bottom: 1px solid rgba(201, 160, 99, .22);
}

.category-hero__inner {
  max-width: 900px;
}

.hero-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #A5ABB3;
  margin-bottom: 30px;
}

.hero-breadcrumb a {
  color: #A5ABB3;
  transition: color .2s;
}

.hero-breadcrumb a:hover {
  color: var(--gold-light);
  text-decoration: underline;
}

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

.hero-breadcrumb .is-current {
  color: #E7E5E0;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border: 1px solid rgba(201, 160, 99, .45);
  border-radius: 999px;
  color: var(--gold-light);
  font-size: 13px;
  margin-bottom: 24px;
}

.hero-eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(201, 160, 99, .14);
}

.category-hero h1 {
  color: #F0F1F1;
  font-size: clamp(34px, calc(2.3rem + 2.2vw), 62px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}

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

.hero-lead {
  max-width: 760px;
  color: #C4CAD0;
  font-size: 17px;
  line-height: 1.85;
  margin-bottom: 34px;
}

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

.hero-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 42px;
  padding-top: 26px;
  border-top: 1px solid var(--border-dark);
}

.signal-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #A5ABB3;
  font-size: 14px;
}

.signal-line strong {
  color: #EAECEC;
  font-weight: 600;
}

.signal-line__icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 160, 99, .14);
  color: var(--gold-light);
}

/* Intro signal cards */
.signal-section {
  background: var(--dark-0);
  padding: 76px 0 80px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.section-heading .kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  margin-bottom: 10px;
}

.kicker--dark {
  color: var(--gold);
}

.kicker--cream {
  color: #A18036;
}

.section-heading h2 {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.message--dark {
  color: #EAECEC;
}

.message--dark h2 {
  color: #F0F1F1;
}

.section-heading p {
  color: #A5ABB3;
  font-size: 16px;
  line-height: 1.8;
}

.message--cream h2 {
  color: var(--ink);
}

.message--cream p {
  color: var(--ink-soft);
}

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

.reminder-card {
  background: var(--dark-1);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}

.reminder-card:hover {
  transform: translateY(-3px);
  background: var(--dark-2);
  border-color: rgba(201, 160, 99, .35);
}

.reminder-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(201, 160, 99, .13);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  margin-bottom: 20px;
}

.reminder-card h3 {
  color: #F0F1F1;
  font-size: 18px;
  margin-bottom: 8px;
}

.reminder-card p {
  color: #A5ABB3;
  font-size: 14px;
  line-height: 1.75;
}

/* checklist */
.checklist-section {
  background: var(--cream);
  padding: 84px 0 92px;
  position: relative;
}

.checklist-section::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 160, 99, .45), transparent);
}

.check-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  background: rgba(201, 160, 99, .12);
  color: #835F1F;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.checklist-panel {
  background: var(--paper);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.check-table-head,
.check-row {
  display: grid;
  grid-template-columns: 74px 210px minmax(0, 1fr) 132px 60px;
  gap: 18px;
  align-items: center;
}

.check-table-head {
  padding: 15px 24px;
  background: #F5F3EB;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  font-weight: 600;
  color: #78766F;
  letter-spacing: .04em;
}

.check-table-head span {
  display: block;
}

.check-row {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  transition: background .2s var(--ease);
}

.check-row:last-child {
  border-bottom: 0;
}

.check-row:hover {
  background: #F8F5EF;
}

.check-no {
  color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
}

.check-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
}

.check-desc {
  color: #5E6059;
  font-size: 14px;
  line-height: 1.8;
}

.check-status {
  display: inline-flex;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge--neutral {
  background: rgba(49, 53, 58, .08);
  color: #4A4C49;
}

.badge--warn {
  background: rgba(181, 138, 58, .13);
  color: #8B6523;
}

.badge--danger {
  background: rgba(179, 74, 74, .12);
  color: #A23D3D;
}

.badge--ok {
  background: rgba(63, 122, 95, .12);
  color: #2E6248;
}

.check-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .08);
  color: var(--gold);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.check-row:hover .check-link-icon {
  transform: translateX(4px);
  border-color: var(--gold);
  background: rgba(201, 160, 99, .08);
}

.checklist-note {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: #EAE5DA;
  color: #5E5441;
  font-size: 14px;
  line-height: 1.8;
}

/* flow steps */
.flow-section {
  background: var(--dark-0);
  padding: 84px 0;
}

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

.flow-step {
  position: relative;
  background: var(--dark-1);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  min-height: 180px;
  padding: 26px 22px 22px;
}

.flow-step:hover {
  border-color: rgba(201, 160, 99, .4);
  background: var(--dark-2);
}

.step-num {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 160, 99, .55);
  color: var(--gold-light);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  margin-bottom: 18px;
}

.flow-step h3 {
  color: #ECEDEC;
  font-size: 17px;
  margin-bottom: 8px;
}

.flow-step p {
  color: #9CA1A8;
  font-size: 13px;
  line-height: 1.75;
}

/* visual guide */
.visual-section {
  background: var(--cream);
  padding: 96px 0;
}

.guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.guide-copy h2 {
  color: var(--ink);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.3;
  margin-bottom: 18px;
}

.guide-copy > p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 26px;
}

.tip-list {
  display: grid;
  gap: 14px;
}

.tip-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 17px;
  background: #F6F4EE;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--radius-md);
}

.tip-list li em {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(201, 160, 99, .22);
  color: #8A6220;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tip-list li strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}

.tip-list li span {
  color: #64665F;
  font-size: 14px;
  line-height: 1.75;
}

.guide-media {
  position: relative;
}

.guide-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--border-light);
}

.media-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-size: 13px;
  color: #75756F;
}

.media-caption .badge {
  background: rgba(63, 122, 95, .1);
  color: #2F6850;
}

/* FAQ */
.faq-section {
  background: #FAF8F4;
  padding: 90px 0 96px;
  border-block: 1px solid rgba(0, 0, 0, .07);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 46px;
  align-items: start;
}

.faq-titleblock h2 {
  font-size: clamp(26px, 4vw, 38px);
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 12px;
}

.faq-titleblock p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
}

.faq-accordion {
  display: grid;
  gap: 12px;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.faq-item[data-open="true"] {
  border-color: rgba(201, 160, 99, .42);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .05);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.faq-toggle {
  flex: none;
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .28s var(--ease);
}

.faq-item[data-open="true"] .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}

.faq-item[data-open="true"] .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer__inner {
  overflow: hidden;
}

.faq-answer p {
  color: #555750;
  font-size: 15px;
  line-height: 1.85;
  padding: 0 20px 18px;
}

/* CTA */
.cta-section {
  background:
    linear-gradient(180deg, rgba(10, 11, 14, .92), rgba(13, 14, 18, .96)),
    url('/assets/images/backpic/back-3.png') center / cover no-repeat;
  padding: 94px 0;
  border-top: 1px solid rgb(201 160 99 / .3);
}

.cta-box {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
}

.cta-shell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid rgba(201, 160, 99, .4);
  border-radius: 999px;
  color: var(--gold-light);
  background: rgba(201, 160, 99, .08);
  font-size: 13px;
  margin-bottom: 24px;
}

.cta-box h2 {
  color: #F0F1F1;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.32;
  margin-bottom: 18px;
}

.cta-box h2 span {
  color: var(--gold-light);
}

.cta-box p {
  color: #A9AFB7;
  font-size: 17px;
  line-height: 1.85;
  max-width: 660px;
  margin: 0 auto 34px;
}

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

/* footer */
.site-footer {
  background: #0A0B0E;
  border-top: 1px solid var(--border-dark);
  padding-top: 70px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.6fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer__text {
  max-width: 280px;
  color: #8B9098;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 18px;
}

.footer__grid h4 {
  color: #C7C9CB;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 18px;
}

.footer__link {
  display: flex;
  align-items: center;
  color: #81868E;
  font-size: 14px;
  margin-bottom: 10px;
  transition: color .2s var(--ease), transform .2s var(--ease);
}

.footer__link:hover {
  color: var(--gold-light);
  transform: translateX(3px);
}

.footer__tech {
  color: #81868E;
  font-size: 13px;
  line-height: 1.9;
}

.footer__tech b {
  color: var(--gold);
  font-weight: 600;
}

.footer__bottom {
  border-top: 1px solid var(--border-dark);
  padding: 18px 0 20px;
  color: #61666E;
  font-size: 13px;
}

/* reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* responsive */
@media (max-width: 1100px) {
  .check-table-head,
  .check-row {
    grid-template-columns: 60px 180px minmax(0, 1fr) 120px 50px;
    gap: 14px;
  }
  .flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 920px) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav {
    position: absolute;
    left: 20px;
    right: 20px;
    top: calc(100% + 10px);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(14, 15, 19, .98);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
  }
  .site-header.nav-is-open .nav {
    display: flex;
    gap: 8px;
  }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .nav__link {
    min-height: 44px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: 16px;
  }
  .nav__link::after {
    left: auto;
    right: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    transition: width .2s var(--ease);
  }
  .nav__link:hover::after,
  .nav__link.is-active::after {
    left: auto;
    right: 0;
    width: 28px;
  }
  .nav__cta {
    display: none;
  }
  .header-cta-mobile {
    display: flex;
    margin-top: 12px;
  }
}

@media (max-width: 960px) {
  .check-table-head {
    display: none;
  }
  .check-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 48px;
    grid-template-areas:
      "no title arrow"
      "desc desc status";
    row-gap: 10px;
    padding: 18px 20px;
  }
  .check-row > .check-no {
    grid-area: no;
  }
  .check-row > .check-title {
    grid-area: title;
    align-self: center;
  }
  .check-row > .check-desc {
    grid-area: desc;
  }
  .check-row > .check-status {
    grid-area: status;
  }
  .check-status,
  .check-link-icon {
    justify-self: start;
  }
  .check-row > .check-link-icon {
    grid-area: arrow;
    justify-self: center;
  }
}

@media (min-width: 921px) {
  .header-cta-mobile {
    display: none;
  }
}

@media (max-width: 900px) {
  .reminder-grid {
    grid-template-columns: 1fr;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .category-hero {
    padding: 54px 0 52px;
  }
  .category-hero h1 {
    font-size: 34px;
  }
  .hero-lead {
    font-size: 15px;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .signal-section,
  .checklist-section,
  .flow-section,
  .visual-section,
  .faq-section,
  .cta-section {
    padding-top: 72px;
    padding-bottom: 76px;
  }
  .flow-grid {
    grid-template-columns: 1fr;
  }
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .hero-signals {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .cta-actions .btn {
    width: 100%;
  }
  .cta-section {
    padding-top: 64px;
    padding-bottom: 66px;
  }
}

@media (max-width: 520px) {
  .container {
    width: min(100% - 28px, 1240px);
  }
}