/* roulang page: index */
:root {
  --st-primary:#21317D;
  --st-violet:#6A4DE0;
  --st-purple-bright:#8B5CF6;
  --st-glow:#FF9E4F;
  --st-deep:#0F1B3E;
  --st-paper:#F4F6FC;
  --st-card:#FFFFFF;
  --st-ink-1:#16214A;
  --st-ink-2:#465271;
  --st-border:#E4E8F4;
  --shadow-1:0 8px 24px rgba(19,32,96,.08);
  --shadow-2:0 18px 48px rgba(19,32,96,.16);
  --radius-pill:999px;
  --radius-card:20px;
  --radius-banner:28px;
  --gradient-main:linear-gradient(125deg,#14204f 0%,#2b2580 38%,#6a4de0 76%,#d97743 130%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--st-paper);
  color:var(--st-ink-1);
  font-size:16px;
  line-height:1.8;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
ul,ol,dl,p{margin-bottom:0}
button{font-family:inherit}

.st-container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* 导航 */
.st-nav{
  position:fixed;top:18px;left:0;right:0;z-index:1080;
  display:flex;justify-content:center;padding:0 18px;
}
.st-nav-inner{
  width:100%;max-width:1200px;
  background:rgba(11,20,48,.38);
  border-radius:var(--radius-pill);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 10px 22px;
  box-shadow:0 6px 22px rgba(11,20,48,.16);
  border:1px solid rgba(255,255,255,.08);
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.st-brand{
  display:flex;align-items:center;gap:10px;
  color:#fff;flex-shrink:0;
  min-width:fit-content;
}
.st-brand .brand-icon{
  width:38px;height:38px;border-radius:13px;
  background:var(--gradient-main);
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;
  box-shadow:0 6px 14px rgba(106,77,224,.24);
}
.st-brand-name{font-size:19px;font-weight:700;letter-spacing:.01em;color:#fff}
.st-brand-tag{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;
  background:var(--gradient-main);border-radius:var(--radius-pill);
  color:#fff;font-size:12px;line-height:1;white-space:nowrap;
}
.st-nav-links{
  display:none;flex-direction:column;
  position:absolute;top:calc(100% + 10px);left:12px;right:12px;
  background:rgba(255,255,255,.94);
  border-radius:24px;
  padding:12px 8px;
  box-shadow:var(--shadow-2);
}
.st-nav-links.nav-open{display:flex}
.st-nav-link{
  color:#fff;
  font-size:14px;font-weight:600;
  padding:10px 14px;border-radius:var(--radius-pill);
  display:flex;align-items:center;gap:6px;
  position:relative;
  white-space:nowrap;
}
.st-nav-link i{width:16px;font-size:13px;text-align:center}
.st-nav-link:hover{color:#FFE9CE}
.st-nav-link.active{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.st-nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  height:42px;padding:0 22px;border-radius:var(--radius-pill);
  background:var(--gradient-main);color:#fff;
  font-size:14px;font-weight:700;
  box-shadow:0 8px 18px rgba(255,158,79,.16);
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
  flex-shrink:0;
}
.st-nav-cta:hover{color:#fff;filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 24px rgba(255,158,79,.24)}
.st-nav-cta i{font-size:13px}
.st-toggler{
  width:42px;height:42px;border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  color:#fff;font-size:17px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:6px;flex-shrink:0;
}

.st-nav.scrolled .st-nav-inner{
  background:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 10px 30px rgba(19,32,96,.12);
}
.st-nav.scrolled .st-brand-name,.st-nav.scrolled .brand-icon .fa,.st-nav.scrolled .st-toggler i{color:var(--st-ink-1)}
.st-nav.scrolled .st-brand .fa{color:#fff}
.st-nav.scrolled .st-brand-name{color:var(--st-ink-1)}
.st-nav.scrolled .st-nav-link{color:var(--st-ink-2)}
.st-nav.scrolled .st-nav-link:hover{color:var(--st-primary)}
.st-nav.scrolled .st-nav-link.active{
  background:linear-gradient(125deg,var(--st-primary),var(--st-violet));
  color:#fff;
}
.st-nav.scrolled .st-toggler{border-color:var(--st-border);background:#fff;color:var(--st-ink-1)}

/* Hero */
.hero{
  position:relative;
  padding:110px 18px 40px;
  min-height:96vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:18px;
  border-radius:var(--radius-banner);
  background:
    linear-gradient(100deg, rgba(15,28,69,.06), rgba(9,20,55,.27), rgba(23,17,71,.22)),
    url('/assets/images/backpic/back-1.webp') center/cover no-repeat,
    var(--gradient-main);
  overflow:hidden;
  box-shadow:var(--shadow-2);
}
.hero-bg::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(128deg,rgba(15,27,62,.8) 8%,rgba(33,49,125,.62) 42%,rgba(15,27,62,.38) 82%);
  z-index:2;
}
.hero-bg::after{
  content:"";
  position:absolute;top:0;right:0;width:52%;height:100%;
  background:radial-gradient(circle at 75% 16%,rgba(255,205,130,.42),rgba(255,255,255,0) 44%);
  z-index:3;
}
.hero-content{
  position:relative;z-index:4;
  width:100%;max-width:980px;
  text-align:center;
  color:#fff;
  padding:40px 0 20px;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;letter-spacing:.04em;
  color:#FFCF9C;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-pill);
  padding:8px 18px;
  margin-bottom:22px;
}
.hero-eyebrow i{color:var(--st-glow)}
.hero h1{
  font-size:44px;font-weight:700;line-height:1.25;
  margin:0 0 14px;
  letter-spacing:.01em;
  color:#fff;
}
.hero-sub{
  font-size:18px;line-height:1.85;
  color:rgba(255,255,255,.9);
  max-width:720px;margin:0 auto 32px;
}
.hero-actions{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-bottom:34px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 28px;
  border-radius:var(--radius-pill);
  font-size:16px;font-weight:600;
  border:2px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease,border-color .25s ease;
  line-height:1;
}
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(106,77,224,.24);
}
.btn-st-primary{
  background:var(--gradient-main);color:#fff;
  box-shadow:0 10px 24px rgba(6,17,52,.32);
}
.btn-st-primary:hover{color:#fff;filter:brightness(1.07);transform:translateY(-3px);box-shadow:0 14px 32px rgba(6,17,52,.34)}
.btn-st-outline{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.62);
  color:#fff;
  backdrop-filter:blur(4px);
}
.btn-st-outline:hover{background:rgba(255,255,255,.16);color:#fff;border-color:#fff;transform:translateY(-3px)}
.hero-metrics{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
}
.hero-metrics span{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.13);
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.14);
  padding:9px 20px;
  font-size:14px;color:#fff;
}
.hero-metrics b{font-weight:700;color:#FFD8AA;font-size:16px}

/* 板块 */
.sec{
  padding:90px 0;
}
.sec-tight{padding:0 0 84px}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:30px;font-weight:700;
  color:var(--st-ink-1);
  margin:0;
  position:relative;
}
.section-head h2::after{
  content:"";display:block;width:42px;height:4px;
  border-radius:10px;
  background:var(--gradient-main);
  margin-top:10px;
}
.sec-more{
  color:var(--st-ink-2);
  font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .2s ease,gap .2s ease;
  padding-bottom:4px;
  border-bottom:2px solid var(--st-border);
}
.sec-more:hover{color:var(--st-primary);gap:11px}
.sec-label{
  display:inline-flex;align-items:center;
  font-size:13px;font-weight:600;color:var(--st-violet);
  background:rgba(106,77,224,.1);
  border-radius:var(--radius-pill);
  padding:5px 15px;
  margin-bottom:14px;
}

/* 合集目录 */
.dir-card{
  background:var(--st-card);
  border:1px solid var(--st-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .3s ease,box-shadow .3s ease;
  height:100%;
  display:flex;flex-direction:column;
}
.dir-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.dir-card-lg .dir-cover{height:300px;overflow:hidden;position:relative}
.dir-cover img,.dir-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.dir-card:hover .dir-cover img,.dir-card:hover .dir-card-thumb img{transform:scale(1.03)}
.dir-badge{
  position:absolute;right:16px;top:16px;
  background:rgba(255,255,255,.92);
  color:var(--st-primary);
  border-radius:var(--radius-pill);
  padding:6px 15px;
  font-size:13px;font-weight:600;
  box-shadow:var(--shadow-1);
  z-index:2;
}
.dir-card-body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1}
.tag,.tag-light{
  display:inline-flex;align-items:center;height:26px;padding:0 13px;
  font-size:12px;font-weight:700;
  background:rgba(106,77,224,.12);
  color:var(--st-violet);
  border-radius:var(--radius-pill);
  width:fit-content;
  margin-bottom:14px;
}
.dir-card-body h3,.dir-sm-body h3{font-size:22px;font-weight:700;margin:0 0 12px;line-height:1.45}
.dir-card-body p,.dir-sm-body p{font-size:15px;line-height:1.8;color:var(--st-ink-2);margin:0 0 20px}
.dir-card-body h3 a,.dir-sm-body h3 a{transition:color .2s ease}
.dir-card-body h3 a:hover,.dir-sm-body h3 a:hover{color:var(--st-violet)}
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--st-primary);font-weight:700;font-size:15px;
  margin-top:auto;
  transition:gap .25s ease,color .2s ease;
}
.link-arrow:hover{color:var(--st-violet);gap:11px}
.col-right-stack{display:flex;flex-direction:column;gap:24px;height:100%}
.dir-card-sm{
  display:flex;
  border:1px solid var(--st-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);
  background:var(--st-card);
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease;
  flex:1;
}
.dir-card-sm:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.dir-card-thumb{width:190px;min-width:190px;overflow:hidden}
.dir-card-thumb img{width:100%;height:100%;object-fit:cover}
.dir-sm-body{padding:20px 24px;display:flex;flex-direction:column;flex:1}
.dir-sm-body h3{font-size:18px}

/* 精选条目 */
.featured-wrap{
  background:#fff;
  border:1px solid var(--st-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);
  padding:8px 24px 6px;
}
.feature-row{
  display:flex;align-items:center;gap:24px;
  padding:30px 0;
  border-bottom:1px solid var(--st-border);
  position:relative;
}
.feature-row:last-child{border-bottom:0}
.feature-num{
  font-size:40px;font-weight:800;
  color:transparent;
  -webkit-text-stroke:1.7px #B6B9D8;
  width:54px;flex-shrink:0;text-align:center;
  line-height:1;
}
.feature-thumb{
  width:166px;height:100px;border-radius:14px;overflow:hidden;flex-shrink:0;
  box-shadow:0 6px 16px rgba(19,32,96,.12);
}
.feature-thumb img{width:100%;height:100%;object-fit:cover}
.feature-info{flex:1;min-width:0}
.feature-info .tag-light{margin-bottom:8px}
.feature-info h3{font-size:19px;font-weight:700;line-height:1.5;margin:0 0 8px}
.feature-info h3 a{transition:color .2s}
.feature-info h3 a:hover{color:var(--st-violet)}
.feature-info p{font-size:14px;color:var(--st-ink-2);line-height:1.75;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.feature-footer{
  padding:22px 10px 24px;
  text-align:center;
}

/* 资讯 CMS */
.sec-news{background:var(--st-paper)}
.news-aside-item{
  background:#fff;border:1px solid var(--st-border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-1);
  padding:28px;
  margin-bottom:20px;
}
.news-cms-list{
  background:#fff;border:1px solid var(--st-border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-1);
  padding:6px 26px;
  min-height:240px;
}
.cms-news-item{
  border-bottom:1px solid var(--st-border);
  padding:22px 4px;
  display:flex;flex-direction:column;gap:8px;
}
.cms-news-item:last-child{border-bottom:0}
.news-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.news-cat{
  display:inline-flex;align-items:center;height:24px;padding:0 13px;
  border-radius:var(--radius-pill);background:#EAF0FF;
  color:var(--st-primary);font-size:12px;font-weight:700;
}
.news-date,.news-time{color:#8B94AD;font-size:13px}
.news-title{font-size:17px;font-weight:700;margin:0}
.news-title a{transition:color .2s}
.news-title a:hover{color:var(--st-violet)}
.news-excerpt{font-size:14px;color:var(--st-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.news-more{
  align-self:flex-start;margin-top:6px;
  font-size:13px;color:var(--st-violet);font-weight:700;
  display:inline-flex;align-items:center;gap:5px;
  transition:gap .2s;
}
.news-more:hover{color:var(--st-primary);gap:8px}
.news-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:52px 20px;color:#66708F;
}
.news-empty i{font-size:36px;color:#B6C1E4;margin-bottom:14px}
.news-empty p{margin:0;font-size:15px}
.aside-title{font-size:18px;font-weight:700;margin:0 0 14px}
.aside-desc{font-size:14px;color:var(--st-ink-2);line-height:1.85}
.aside-btn{
  margin-top:22px;height:42px;padding:0 18px;
  display:inline-flex;align-items:center;gap:6px;
  border-radius:var(--radius-pill);
  font-size:14px;font-weight:700;color:#fff;
  background:var(--gradient-main);border:0;
  transition:box-shadow .3s,transform .3s;
}
.aside-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-2)}
.rss-box{
  background:linear-gradient(135deg,#F0EEFF 0%,#FFF7EE 100%);
  border:1px solid rgba(106,77,224,.12);
}

/* FAQ */
.st-faq-card{
  border-radius:var(--radius-card);
  background:#fff;
  border:1px solid var(--st-border);
  box-shadow:var(--shadow-1);
  padding:14px 26px 16px;
}
.st-accordion .accordion-item{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--st-border);
  border-radius:0 !important;
}
.st-accordion .accordion-item:last-child{border-bottom:0}
.st-accordion .accordion-header{background:transparent}
.st-accordion .accordion-button{
  background:transparent;
  font-size:17px;
  font-weight:600;
  color:var(--st-ink-1);
  border:0;
  padding:22px 2px;
  box-shadow:none;
  line-height:1.6;
  transition:color .2s;
  align-items:center;
}
.st-accordion .accordion-button:hover{background:transparent;color:var(--st-primary)}
.st-accordion .accordion-button:not(.collapsed){background:transparent;color:var(--st-primary)}
.st-accordion .accordion-button::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2321317D' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size:20px;
  width:30px;height:30px;
  transition:transform .3s ease;
}
.st-accordion .accordion-button:not(.collapsed)::after{
  transform:rotate(45deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236A4DE0' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.st-accordion .accordion-body{
  color:var(--st-ink-2);
  font-size:15px;
  line-height:1.9;
  padding:0 36px 24px 2px;
}

/* 相关推荐 */
.sec-recommend{background:var(--st-paper)}
.rec-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--st-border);
  box-shadow:var(--shadow-1);
  display:flex;flex-direction:column;
  height:100%;
  transition:transform .3s ease,box-shadow .3s ease;
}
.rec-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.rec-cover{height:158px;overflow:hidden;position:relative}
.rec-cover img{width:100%;height:100%;object-fit:cover}
.rec-cover .badge-tag{
  position:absolute;left:14px;top:14px;
  background:rgba(255,255,255,.92);
  color:var(--st-primary);
  font-size:12px;font-weight:700;
  border-radius:var(--radius-pill);
  padding:5px 12px;
  z-index:2;
}
.rec-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;gap:12px}
.rec-body h3{font-size:16px;font-weight:700;line-height:1.6;margin:0}
.rec-body a:hover{color:var(--st-violet)}
.rec-arrow{
  font-size:13px;color:var(--st-violet);font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .25s;
}
.rec-card:hover .rec-arrow{gap:10px}

/* CTA */
.sec-cta{padding:20px 0 80px}
.cta-panel{
  position:relative;
  border-radius:var(--radius-banner);
  overflow:hidden;
  padding:74px 40px;
  background:linear-gradient(126deg,rgba(12,25,64,.9),rgba(33,49,125,.83),rgba(106,77,224,.82)),url('/assets/images/backpic/back-2.png') center/cover no-repeat;
  box-shadow:var(--shadow-2);
  color:#fff;
  display:flex;align-items:center;
}
.cta-panel::before{
  content:"";
  position:absolute;top:-74px;right:-24px;
  width:260px;height:260px;
  border-radius:50%;
  border:4px dashed rgba(255,214,166,.42);
  opacity:.7;
  z-index:1;
}
.cta-panel::after{
  content:"";
  position:absolute;top:8px;right:118px;
  width:80px;height:80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,105,.28),transparent 70%);
  z-index:1;
}
.cta-inner{position:relative;z-index:2}
.cta-panel h2{font-size:32px;font-weight:700;margin:0 0 16px;color:#fff}
.cta-panel p{font-size:16px;color:rgba(255,255,255,.88);line-height:1.85;max-width:560px;margin:0 0 32px}
.cta-btns{display:flex;flex-wrap:wrap;gap:14px}
.cta-btn{
  height:48px;padding:0 28px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;
  font-size:15px;font-weight:700;cursor:pointer;
  border:0;
  box-shadow:var(--shadow-1);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.cta-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.cta-btn i{margin-right:8px}
.cta-btn-white{background:#fff;color:var(--st-primary)}
.cta-btn-white:hover{filter:brightness(.95)}
.cta-btn-grad{background:linear-gradient(120deg,#FF9E4F,#FFB571);color:#382B1C}
.cta-btn-line{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.75)}
.cta-copy-tip{width:100%;margin-top:14px;color:#FFCE8E;font-size:14px;min-height:20px}
.cta-quicksearch{
  position:relative;z-index:2;
  margin-left:auto;
}
.cta-form{
  background:#fff;
  border-radius:var(--radius-pill);
  padding:5px;
  display:flex;
  box-shadow:var(--shadow-1);
  width:100%;max-width:360px;
}
.cta-form input{
  flex:1;
  border:0;outline:0;
  background:transparent;
  padding:0 18px;
  height:42px;
  color:var(--st-ink-1);
  font-size:14px;
  width:120px;
}
.cta-form button{
  height:42px;padding:0 18px;border:0;border-radius:var(--radius-pill);
  background:var(--gradient-main);color:#fff;
  font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
}
.cta-form input:focus{box-shadow:none}

/* 页脚 */
.site-footer{
  background:var(--st-deep);
  padding:72px 0 0;
  color:#AAB3D5;
  margin-top:30px;
}
.footer-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-brand .brand-rows{display:flex;align-items:center;gap:10px}
.footer-logo-name{font-size:22px;font-weight:700;color:#fff}
.footer-logo-tag{
  display:inline-flex;height:26px;align-items:center;padding:0 13px;
  background:var(--gradient-main);border-radius:var(--radius-pill);
  font-size:12px;color:#fff;font-weight:600;
}
.footer-desc{font-size:14px;line-height:1.9;max-width:340px}
.footer-col-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:20px}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.footer-links a{color:#AAB3D5;font-size:15px;transition:color .25s}
.footer-links a i{width:20px;opacity:.7;font-size:12px;margin-right:6px}
.footer-links a:hover{color:#FFC586}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:58px;
  padding:24px 0;
}
.footer-bottom-box{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  font-size:13px;
}

@media (max-width: 1199px){
  .hero-metrics span{padding:7px 14px}
}
@media (max-width: 991px){
  .st-nav-inner{padding:8px 10px 8px 18px}
  .st-nav-links{
    border-radius:24px;
    background:rgba(255,255,255,.95);
    min-width:0;
    gap:4px;
    box-shadow:var(--shadow-2);
  }
  .st-nav {top:14px}
  .st-nav-link{
    color:var(--st-ink-1);
    padding:14px 16px;
    justify-content:center;
    font-size:15px;
    border-radius:16px;
  }
  .st-nav-link.active{background:rgba(106,77,224,.12);color:var(--st-violet)}
  .st-nav.scrolled .st-nav-links{background:rgba(255,255,255,.95)}
  .st-nav.scrolled .st-nav-link{color:var(--st-ink-1)}
  .st-toggler{display:inline-flex}
  .hero{padding-top:108px}
  .hero-bg{inset:12px;border-radius:26px}
  .hero h1{font-size:36px}
  .dir-card-lg .dir-cover{height:242px}
  .col-right-stack{gap:24px}
  .cta-panel{flex-direction:column;align-items:flex-start;gap:30px;padding:54px 34px}
  .cta-quicksearch{margin-left:0;width:100%}
  .cta-form{max-width:460px}
}
@media (max-width: 767px){
  .sec{padding:60px 0}
  .sec-tight{padding-bottom:56px}
  .section-head h2{font-size:24px}
  .sec-more{font-size:14px}
  .feature-thumb{width:108px;height:76px}
  .feature-num{font-size:28px;width:36px}
  .feature-row{gap:12px;padding:22px 0}
  .feature-info h3{font-size:16px}
  .feature-info p{-webkit-line-clamp:1}
  .hero-sub{font-size:16px}
  .dir-card-lg .dir-cover{height:190px}
  .dir-card-thumb{width:112px;min-width:112px}
  .dir-sm-body h3{font-size:16px}
  .dir-sm-body p{display:none}
  .dir-card-body{padding:20px}
  .dir-card-body h3,{font-size:19px}
  .cta-panel{padding:45px 24px}
  .cta-panel h2{font-size:25px}
  .cta-btns .cta-btn{width:100%;justify-content:center}
  .footer-upper .row>[class*=col-]{margin-bottom:28px}
  .footer-bottom-box{flex-direction:column;text-align:center;justify-content:center}
}
@media (max-width: 575px){
  .hero{padding:104px 10px 24px}
  .hero-bg{inset:10px}
  .hero h1{font-size:30px}
  .hero-sub{font-size:15px}
  .hero-actions .btn{width:100%}
  .hero-actions{gap:10px}
  .hero-metrics{width:100%;gap:8px}
  .hero-metrics span{flex:1 1 auto;justify-content:center;padding:8px 8px;font-size:12px}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px}
  .featured-wrap{padding:0 14px 2px}
  .feature-row{flex-wrap:wrap;gap:12px}
  .feature-thumb{width:100%;height:150px}
  .feature-num{display:none}
  .featured-wrap .feature-info p{-webkit-line-clamp:2}
  .dir-card-thumb{width:92px;min-width:92px;height:112px}
  .dir-card-sm{flex-wrap:wrap}
  .dir-card-sm .dir-card-thumb{width:100%;height:150px}
  .dir-card-sm .dir-card-thumb img{width:100%;height:100%}
  .dir-sm-body p{display:block;font-size:14px}
  .news-cms-list{padding:0 18px}
  .st-faq-card{padding:4px 16px 8px}
  .st-accordion .accordion-button{font-size:15px;padding:19px 0}
  .st-accordion .accordion-body{padding-right:6px}
  .cta-form{flex-direction:column;border-radius:24px;gap:6px;padding:10px}
  .cta-form input{width:100%;padding:10px 14px;height:38px}
  .cta-form button{justify-content:center}
}

/* roulang page: category1 */
:root {
            --st-primary: #21317D;
            --st-violet: #6A4DE0;
            --st-purple-bright: #8B5CF6;
            --st-glow: #FF9E4F;
            --st-deep: #0F1B3E;
            --st-paper: #F4F6FC;
            --st-card: #FFFFFF;
            --st-ink-1: #16214A;
            --st-ink-2: #465271;
            --st-border: #E4E8F4;
            --grad-main: linear-gradient(125deg, #14204f 0%, #2b2580 38%, #6a4de0 76%, #d97743 130%);
            --shadow-1: 0 8px 24px rgba(19, 32, 96, .08);
            --shadow-2: 0 18px 48px rgba(19, 32, 96, .16);
            --radius-pill: 999px;
            --radius-card: 20px;
            --radius-banner: 28px;
        }

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

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

        body {
            margin: 0;
            background: var(--st-paper);
            color: var(--st-ink-1);
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.8;
            font-size: 16px;
            overflow-x: hidden;
        }

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

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

        button,
        input,
        textarea {
            font-family: inherit;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px rgba(106, 77, 224, .18);
            border-radius: 12px;
        }

        ::selection {
            background: rgba(139, 92, 246, .25);
        }

        .st-container {
            width: min(1180px, 92%);
            margin-left: auto;
            margin-right: auto;
        }

        .st-section {
            padding: 96px 0;
        }

        .st-section.paper-skin {
            background: var(--st-paper);
        }

        .st-section.white-skin {
            background: #fff;
        }

        .st-section.tight {
            padding-top: 72px;
            padding-bottom: 72px;
        }

        .st-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
            margin-bottom: 40px;
        }

        .st-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(106, 77, 224, .1);
            color: var(--st-violet);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .04em;
            border-radius: var(--radius-pill);
            padding: 7px 16px;
        }

        .st-kicker i {
            font-size: 12px;
        }

        .st-h2 {
            font-size: 30px;
            font-weight: 700;
            letter-spacing: .01em;
            margin: 14px 0 0;
            color: var(--st-ink-1);
            line-height: 1.35;
        }

        .st-lead {
            color: var(--st-ink-2);
            max-width: 780px;
            margin: 14px 0 0;
            font-size: 16px;
        }

        .st-more-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--st-violet);
            font-weight: 600;
            border-radius: var(--radius-pill);
            padding: 10px 18px;
            transition: .25s ease;
            white-space: nowrap;
        }

        .st-more-link:hover {
            background: rgba(106, 77, 224, .08);
            color: var(--st-primary);
        }

        .st-more-link i {
            transition: transform .25s ease;
        }

        .st-more-link:hover i {
            transform: translateX(4px);
        }

        .st-nav {
            position: fixed;
            top: 16px;
            left: 0;
            right: 0;
            z-index: 1050;
            display: flex;
            justify-content: center;
            pointer-events: none;
            padding: 0 16px;
        }

        .st-nav-inner {
            pointer-events: auto;
            width: min(1240px, 100%);
            background: rgba(11, 20, 48, .42);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: var(--radius-pill);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 8px 10px 8px 18px;
            box-shadow: 0 6px 24px rgba(8, 18, 48, .24);
            transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
        }

        .st-nav.scrolled .st-nav-inner {
            background: rgba(255, 255, 255, .86);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-color: rgba(228, 232, 244, .8);
            box-shadow: var(--shadow-1);
        }

        .st-brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            flex-shrink: 0;
            transition: color .3s;
        }

        .st-nav.scrolled .st-brand {
            color: var(--st-ink-1);
        }

        .brand-icon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: radial-gradient(circle at 30% 25%, #6A4DE0, #1c2367 78%);
            color: #fff;
            font-size: 17px;
            box-shadow: 0 6px 18px rgba(20, 32, 80, .3);
        }

        .st-brand-name {
            font-size: 20px;
            font-weight: 800;
            letter-spacing: .01em;
            white-space: nowrap;
        }

        .st-brand-tag {
            display: inline-block;
            background: linear-gradient(90deg, #FF9E4F, #d97743);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            border-radius: var(--radius-pill);
            padding: 3px 11px;
            margin-left: 2px;
            white-space: nowrap;
        }

        .st-toggler {
            display: none;
            background: transparent;
            border: 0;
            color: #fff;
            font-size: 20px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            transition: background .3s;
            margin-left: auto;
        }

        .st-nav.scrolled .st-toggler {
            color: var(--st-ink-1);
        }

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

        .st-nav-link {
            display: inline-flex;
            align-items: center;
            color: rgba(255, 255, 255, .9);
            font-size: 15px;
            font-weight: 600;
            padding: 10px 16px;
            border-radius: var(--radius-pill);
            transition: background .25s, color .25s;
            position: relative;
            white-space: nowrap;
        }

        .st-nav.scrolled .st-nav-link {
            color: var(--st-ink-1);
        }

        .st-nav-link:hover {
            background: rgba(255, 255, 255, .12);
            color: #fff;
        }

        .st-nav.scrolled .st-nav-link:hover {
            background: rgba(106, 77, 224, .1);
            color: var(--st-primary);
        }

        .st-nav-link.active {
            color: #fff;
            background: rgba(255, 255, 255, .14);
        }

        .st-nav.scrolled .st-nav-link.active {
            color: var(--st-primary);
            background: rgba(106, 77, 224, .1);
        }

        .st-nav-link.active::after {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 5px;
            height: 2px;
            border-radius: 99px;
            background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .2));
        }

        .st-nav.scrolled .st-nav-link.active::after {
            background: linear-gradient(90deg, var(--st-violet), rgba(106, 77, 224, .15));
        }

        .st-nav-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--grad-main);
            color: #fff !important;
            font-size: 15px;
            font-weight: 600;
            border-radius: var(--radius-pill);
            padding: 11px 20px;
            box-shadow: 0 8px 22px rgba(93, 65, 212, .3);
            margin-left: 8px;
            transition: box-shadow .25s, transform .25s, opacity .25s;
        }

        .st-nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(93, 65, 212, .38);
            color: #fff;
        }

        .st-nav-cta i {
            font-size: 13px;
        }

        .cat-hero {
            position: relative;
            min-height: 46vh;
            display: flex;
            align-items: center;
            color: #fff;
            overflow: hidden;
            background: var(--st-deep);
        }

        .cat-hero-bg {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(125deg, rgba(8, 15, 42, .94) 0%, rgba(19, 28, 82, .84) 45%, rgba(59, 44, 137, .72) 100%), url('/assets/images/backpic/back-2.png');
            background-size: cover;
            background-position: center;
        }

        .cat-hero-bg::after {
            content: "";
            position: absolute;
            top: -10%;
            right: -5%;
            width: 430px;
            height: 430px;
            background: radial-gradient(circle, rgba(255, 158, 79, .18), transparent 62%);
            filter: blur(34px);
        }

        .cat-hero-inner {
            position: relative;
            width: min(1180px, 92%);
            margin-left: auto;
            margin-right: auto;
            padding: 150px 0 70px;
        }

        .hero-crumb {
            list-style: none;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            padding: 0;
            margin: 0 0 24px;
            font-size: 14px;
            color: rgba(255, 255, 255, .72);
        }

        .hero-crumb a {
            color: rgba(255, 255, 255, .9);
            transition: color .2s;
        }

        .hero-crumb a:hover {
            color: var(--st-glow);
        }

        .hero-crumb i {
            font-size: 10px;
            color: rgba(255, 255, 255, .5);
        }

        .cat-hero h1 {
            font-size: 44px;
            font-weight: 800;
            line-height: 1.24;
            margin: 0 0 18px;
            letter-spacing: .01em;
        }

        .cat-hero p {
            font-size: 17px;
            max-width: 720px;
            margin: 0 0 28px;
            color: rgba(255, 255, 255, .86);
        }

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

        .hero-metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .hero-metrics li {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .14);
            padding: 8px 16px;
            border-radius: var(--radius-pill);
            font-size: 14px;
            color: rgba(255, 255, 255, .85);
        }

        .hero-metrics strong {
            font-size: 18px;
            color: #fff;
        }

        .btn-st {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 2px solid transparent;
            border-radius: var(--radius-pill);
            padding: 0 26px;
            height: 48px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all .25s ease;
            white-space: nowrap;
            box-shadow: none;
        }

        .btn-st i {
            font-size: 14px;
        }

        .btn-st-primary {
            background: linear-gradient(125deg, #21317D, #6A4DE0 80%);
            color: #fff;
            box-shadow: 0 12px 28px rgba(22, 33, 74, .28);
        }

        .btn-st-primary:hover {
            transform: translateY(-3px);
            filter: brightness(1.06);
            box-shadow: 0 16px 34px rgba(70, 55, 170, .35);
            color: #fff;
        }

        .btn-st-ghost {
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 255, 255, .68);
            color: #fff;
        }

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

        .btn-st-light {
            background: #fff;
            color: var(--st-primary);
            border-color: #fff;
            box-shadow: 0 8px 20px rgba(10, 18, 50, .12);
        }

        .btn-st-light:hover {
            background: #f5f6fd;
            transform: translateY(-3px);
            box-shadow: 0 12px 26px rgba(10, 18, 50, .16);
            color: var(--st-primary);
        }

        .btn-st-outline-light {
            background: transparent;
            border-color: rgba(255, 255, 255, .8);
            color: #fff;
        }

        .btn-st-outline-light:hover {
            background: rgba(255, 255, 255, .14);
            border-color: #fff;
            color: #fff;
        }

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

        .btn-st-outline:hover {
            background: rgba(33, 49, 125, .06);
            transform: translateY(-2px);
        }

        .entry-overview .container-box {
            background: #fff;
            border-radius: var(--radius-banner);
            box-shadow: var(--shadow-1);
            padding: 36px;
        }

        .box-card {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-card);
            background: #fff;
            box-shadow: var(--shadow-1);
            transition: transform .3s ease, box-shadow .3s ease;
            border: 1px solid rgba(228, 232, 244, .6);
            height: 100%;
        }

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

        .box-card-rect {
            height: 100%;
        }

        .box-thumb {
            position: relative;
            min-height: 210px;
            overflow: hidden;
        }

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

        .box-card:hover .box-thumb img {
            transform: scale(1.03);
        }

        .box-thumb-mask {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(15, 27, 62, .02), rgba(15, 27, 62, .46));
        }

        .box-badge {
            position: absolute;
            top: 16px;
            left: 16px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(15, 27, 62, .58);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, .18);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            border-radius: var(--radius-pill);
            padding: 5px 12px;
        }

        .box-body {
            padding: 26px 28px 30px;
        }

        .box-body h3 {
            font-size: 21px;
            font-weight: 700;
            margin: 8px 0 12px;
            line-height: 1.4;
        }

        .box-body p {
            color: var(--st-ink-2);
            font-size: 15px;
            margin: 0 0 18px;
        }

        .box-tagline {
            color: var(--st-violet);
            font-size: 13px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .mini-row-card {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid rgba(228, 232, 244, .65);
            border-radius: var(--radius-card);
            padding: 22px 24px;
            transition: transform .3s, box-shadow .3s, border-color .3s;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .mini-row-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 20%;
            bottom: 20%;
            width: 4px;
            border-radius: 0 99px 99px 0;
            background: linear-gradient(180deg, var(--st-violet), var(--st-glow));
            opacity: .72;
        }

        .mini-row-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-2);
            border-color: rgba(106, 77, 224, .16);
        }

        .mini-row-card .mini-icon {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--st-violet);
            background: rgba(106, 77, 224, .1);
            border-radius: 12px;
            font-size: 17px;
            margin-bottom: 12px;
        }

        .mini-row-card h3 {
            font-size: 17px;
            font-weight: 700;
            margin: 0 0 8px;
        }

        .mini-row-card p {
            font-size: 14px;
            color: var(--st-ink-2);
            margin: 0 0 14px;
            line-height: 1.7;
        }

        .mini-row-foot {
            margin-top: auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--st-violet);
            font-size: 14px;
            font-weight: 600;
        }

        .split-topic {
            border-radius: var(--radius-banner);
            padding: 40px;
            background: #fff;
            border: 1px solid rgba(228, 232, 244, .5);
            box-shadow: var(--shadow-1);
        }

        .split-media {
            border-radius: var(--radius-card);
            overflow: hidden;
            box-shadow: var(--shadow-1);
            height: 100%;
            min-height: 300px;
            position: relative;
        }

        .split-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .feature-branch+.feature-branch {
            margin-top: 26px;
            padding-top: 26px;
            border-top: 1px solid var(--st-border);
        }

        .feature-branch {
            display: flex;
            align-items: flex-start;
            gap: 18px;
        }

        .feature-ico {
            width: 52px;
            height: 52px;
            flex: 0 0 52px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(106, 77, 224, .16), rgba(255, 158, 79, .12));
            color: var(--st-violet);
            font-size: 20px;
        }

        .feature-branch h3 {
            font-size: 18px;
            font-weight: 700;
            margin: 0 0 6px;
        }

        .feature-branch p {
            color: var(--st-ink-2);
            margin: 0;
            font-size: 15px;
        }

        .feature-branch .inline-links {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
            align-items: center;
        }

        .tag-mini {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: var(--st-paper);
            border-radius: var(--radius-pill);
            color: var(--st-primary);
            font-size: 13px;
            font-weight: 600;
            padding: 4px 12px;
            transition: background .2s, color .2s;
        }

        .tag-mini:hover {
            background: rgba(106, 77, 224, .1);
            color: var(--st-violet);
        }

        .picks-card {
            background: #fff;
            border-radius: var(--radius-banner);
            border: 1px solid rgba(228, 232, 244, .7);
            box-shadow: var(--shadow-1);
            overflow: hidden;
            padding: 6px 32px;
        }

        .pick-item {
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 24px 0;
            border-bottom: 1px solid var(--st-border);
            transition: background .25s ease;
        }

        .pick-item:last-child {
            border-bottom: 0;
        }

        .pick-item:hover {
            background: rgba(244, 246, 252, .5);
        }

        .pick-num {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 800;
            border-radius: 14px;
            background: rgba(33, 49, 125, .07);
            color: var(--st-primary);
            letter-spacing: .02em;
        }

        .pick-thumb {
            width: 168px;
            height: 106px;
            flex: 0 0 auto;
            border-radius: 16px;
            overflow: hidden;
        }

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

        .pick-item:hover .pick-thumb img {
            transform: scale(1.05);
        }

        .pick-content {
            min-width: 0;
        }

        .pick-content h3 {
            font-size: 18px;
            font-weight: 700;
            margin: 0 0 6px;
        }

        .pick-content p {
            color: var(--st-ink-2);
            font-size: 14px;
            margin: 0 0 8px;
            max-width: 680px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .pick-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }

        .pick-links a {
            font-size: 13px;
            color: var(--st-violet);
            font-weight: 600;
            transition: color .2s;
        }

        .pick-links a:hover {
            color: var(--st-glow);
        }

        .route-steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 40px;
        }

        .step-chip {
            background: #fff;
            border: 1px solid rgba(228, 232, 244, .7);
            border-radius: var(--radius-card);
            padding: 24px 22px;
            box-shadow: var(--shadow-1);
            transition: transform .25s, box-shadow .25s;
            position: relative;
        }

        .step-chip:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-2);
        }

        .step-chip i {
            width: 42px;
            height: 42px;
            border-radius: 13px;
            background: linear-gradient(135deg, #f6f0ff, #fff4e8);
            color: var(--st-violet);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            margin-bottom: 14px;
        }

        .step-chip b {
            display: inline-block;
            font-size: 13px;
            color: var(--st-glow);
            font-weight: 800;
            letter-spacing: .03em;
            margin-bottom: 6px;
        }

        .step-chip h3 {
            font-size: 17px;
            font-weight: 700;
            margin: 0 0 6px;
        }

        .step-chip p {
            font-size: 14px;
            color: var(--st-ink-2);
            margin: 0;
            line-height: 1.7;
        }

        .faq-shell {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 30px;
            align-items: start;
        }

        .st-accordion {
            border-radius: var(--radius-banner);
            border: 1px solid var(--st-border);
            box-shadow: var(--shadow-1);
            background: #fff;
            overflow: hidden;
        }

        .accordion-item {
            border: 0;
            background: transparent;
        }

        .accordion-item+.accordion-item {
            border-top: 1px solid var(--st-border);
        }

        .accordion-header {
            margin: 0;
        }

        .st-accordion-btn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
            background: #fff;
            border: 0;
            text-align: left;
            padding: 22px 28px;
            font-size: 17px;
            font-weight: 700;
            color: var(--st-ink-1);
            transition: color .2s, background .2s;
            border-radius: 0 !important;
            position: relative;
        }

        .st-accordion-btn:hover,
        .st-accordion-btn:not(.collapsed) {
            color: var(--st-primary);
            background: #fafafe;
        }

        .st-accordion-btn::after {
            display: none !important;
        }

        .st-accordion-btn .acc-plus {
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(106, 77, 224, .1);
            color: var(--st-violet);
            font-size: 14px;
            transition: transform .3s, background .3s, color .3s;
        }

        .st-accordion-btn:not(.collapsed) .acc-plus {
            background: linear-gradient(135deg, #21317D, #6A4DE0);
            color: #fff;
            transform: rotate(135deg);
        }

        .accordion-body {
            background: #fff;
            border-top: 0;
            padding: 4px 50px 20px 28px;
            color: var(--st-ink-2);
            line-height: 1.85;
        }

        .faq-aside {
            background: linear-gradient(160deg, #101b3e, #28246b);
            border-radius: var(--radius-banner);
            padding: 28px 26px;
            color: #fff;
            box-shadow: var(--shadow-1);
        }

        .faq-aside h3 {
            font-size: 19px;
            color: #fff;
            font-weight: 700;
        }

        .faq-aside p {
            color: rgba(255, 255, 255, .8);
            font-size: 14px;
            margin: 10px 0 18px;
        }

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

        .continue-card {
            background: #fff;
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-1);
            border: 1px solid rgba(228, 232, 244, .7);
            overflow: hidden;
            transition: transform .28s ease, box-shadow .28s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .continue-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-2);
        }

        .continue-thumb {
            width: 100%;
            height: 108px;
            overflow: hidden;
        }

        .continue-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s;
        }

        .continue-card:hover .continue-thumb img {
            transform: scale(1.05);
        }

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

        .continue-body .tiny-label {
            font-size: 12px;
            color: var(--st-violet);
            font-weight: 700;
            letter-spacing: .04em;
            margin-bottom: 8px;
        }

        .continue-body h3 {
            font-size: 17px;
            font-weight: 700;
            margin: 0 0 8px;
            line-height: 1.45;
        }

        .continue-body p {
            font-size: 13px;
            color: var(--st-ink-2);
            margin: 0 0 14px;
            flex: 1;
        }

        .continue-arrow {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--st-violet);
            font-weight: 700;
            font-size: 14px;
            transition: gap .2s;
        }

        .continue-card:hover .continue-arrow {
            gap: 10px;
            color: var(--st-primary);
        }

        .cta-panel {
            border-radius: var(--radius-banner);
            padding: 60px 56px;
            background: linear-gradient(125deg, #101b3e 0%, #221f6b 46%, #543796 88%, #b06134 135%);
            position: relative;
            overflow: hidden;
            color: #fff;
            box-shadow: var(--shadow-2);
        }

        .cta-panel::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
            background-size: 27px 27px;
            opacity: .32;
        }

        .cta-panel::after {
            content: "";
            position: absolute;
            top: -60px;
            right: -30px;
            width: 340px;
            height: 340px;
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 48%;
            transform: rotate(36deg);
            box-shadow: 0 0 0 44px rgba(255, 255, 255, .035), 0 0 0 90px rgba(255, 255, 255, .02);
        }

        .cta-panel>div {
            position: relative;
            z-index: 2;
        }

        .cta-panel h2 {
            font-size: 30px;
            font-weight: 800;
            letter-spacing: .01em;
            max-width: 620px;
            line-height: 1.4;
        }

        .cta-panel p {
            color: rgba(255, 255, 255, .84);
            max-width: 620px;
            margin: 16px 0 28px;
            font-size: 15px;
        }

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

        .site-footer {
            background: #0F1B3E;
            color: rgba(255, 255, 255, .72);
            padding: 76px 0 28px;
            position: relative;
            overflow: hidden;
        }

        .site-footer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .6), rgba(255, 158, 79, .5), transparent);
        }

        .footer-inner {
            width: min(1180px, 92%);
            margin: 0 auto;
        }

        .footer-brand .brand-rows {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .footer-logo-name {
            color: #fff;
            font-size: 25px;
            font-weight: 800;
        }

        .footer-logo-tag {
            display: inline-block;
            background: linear-gradient(90deg, #6A4DE0, #FF9E4F);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            border-radius: var(--radius-pill);
            padding: 4px 12px;
        }

        .footer-desc {
            color: rgba(255, 255, 255, .7);
            font-size: 14px;
            line-height: 1.9;
            margin: 0;
            max-width: 340px;
        }

        .footer-col-title {
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            margin: 0 0 18px;
            letter-spacing: .02em;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li+li {
            margin-top: 10px;
        }

        .footer-links a {
            color: rgba(255, 255, 255, .7);
            font-size: 14px;
            line-height: 1.6;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: color .2s;
        }

        .footer-links a i {
            font-size: 12px;
            color: rgba(255, 255, 255, .4);
            transition: color .2s;
        }

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

        .footer-links a:hover i {
            color: var(--st-glow);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .1);
            padding-top: 26px;
            margin-top: 44px;
        }

        .footer-bottom-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px 26px;
            color: rgba(255, 255, 255, .48);
            font-size: 13px;
        }

        .footer-bottom-box span {
            line-height: 1.7;
        }

        .copy-tip {
            position: fixed;
            right: 26px;
            bottom: 32px;
            background: var(--st-deep);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, .2);
            padding: 12px 20px;
            border-radius: var(--radius-pill);
            font-size: 14px;
            box-shadow: var(--shadow-2);
            transform: translateY(90px);
            opacity: 0;
            transition: .35s ease;
            z-index: 1200;
            pointer-events: none;
        }

        .copy-tip.show {
            transform: translateY(0);
            opacity: 1;
        }

        @media (max-width: 1199.98px) {
            .route-steps {
                grid-template-columns: repeat(2, 1fr);
            }
            .continue-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .faq-shell {
                grid-template-columns: 1fr;
            }
            .faq-aside {
                margin-top: 4px;
            }
        }

        @media (max-width: 991.98px) {
            .st-nav-links {
                display: none;
                flex-direction: column;
                align-items: stretch;
                background: rgba(255, 255, 255, .96);
                box-shadow: var(--shadow-2);
                position: absolute;
                top: 62px;
                left: 8px;
                right: 8px;
                border-radius: 28px;
                padding: 14px;
                gap: 6px;
            }
            .st-nav-links.open {
                display: flex;
            }
            .st-nav-link,
            .st-nav.scrolled .st-nav-link {
                color: var(--st-ink-1);
                padding: 12px 16px;
                border-radius: 14px;
            }
            .st-nav-link.active,
            .st-nav.scrolled .st-nav-link.active {
                background: rgba(106, 77, 224, .1);
                color: var(--st-primary);
            }
            .st-nav-link.active::after {
                display: none;
            }
            .st-nav-cta {
                margin-left: 0;
                background: linear-gradient(125deg, #21317D, #6A4DE0);
            }
            .st-toggler {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-left: auto;
            }
            .cat-hero-inner {
                padding-top: 126px;
            }
            .cat-hero h1 {
                font-size: 34px;
            }
            .entry-overview .container-box {
                padding: 24px;
            }
            .pick-move {
                flex-wrap: wrap;
            }
            .split-topic {
                padding: 24px;
            }
            .split-media {
                min-height: 250px;
            }
        }

        @media (max-width: 767.98px) {
            .st-section {
                padding: 60px 0;
            }
            .st-h2 {
                font-size: 24px;
            }
            .cat-hero {
                min-height: 36vh;
            }
            .cat-hero-inner {
                padding: 112px 0 48px;
            }
            .cat-hero h1 {
                font-size: 28px;
            }
            .cat-hero p {
                font-size: 16px;
            }
            .hero-metrics {
                gap: 8px;
            }
            .entry-overview .container-box {
                border-radius: 24px;
            }
            .picks-card {
                padding: 8px 16px;
            }
            .pick-item {
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 14px;
                padding: 20px 4px;
            }
            .pick-num {
                width: 36px;
                height: 36px;
                flex-basis: 36px;
                font-size: 13px;
            }
            .pick-thumb {
                width: 100%;
                height: 132px;
            }
            .pick-content {
                flex: 0 0 100%;
            }
            .route-steps {
                grid-template-columns: 1fr;
                gap: 14px;
            }
            .continue-grid {
                grid-template-columns: 1fr;
            }
            .faq-shell {
                grid-template-columns: 1fr;
            }
            .st-accordion-btn {
                font-size: 15px;
                padding: 18px 18px;
            }
            .accordion-body {
                padding: 2px 22px 18px;
            }
            .cta-panel {
                padding: 36px 24px;
                border-radius: 22px;
            }
            .cta-panel h2 {
                font-size: 23px;
            }
            .btn-st {
                height: 44px;
                padding: 0 18px;
                font-size: 14px;
            }
            .split-topic {
                padding: 18px;
            }
            .split-media {
                min-height: 200px;
            }
            .footer-bottom-box {
                flex-direction: column;
            }
        }

        @media (max-width: 575.98px) {
            .st-nav-inner {
                padding-left: 10px;
                padding-right: 6px;
            }
            .st-brand-name {
                font-size: 17px;
            }
            .brand-icon {
                width: 36px;
                height: 36px;
                border-radius: 12px;
                font-size: 15px;
            }
            .st-brand-tag {
                display: none;
            }
            .st-nav-cta span {
                display: none;
            }
            .st-nav-cta {
                padding: 11px 14px;
            }
            .st-nav-cta i {
                margin: 0;
            }
            .st-nav-links {
                top: 58px;
            }
            .hero-metrics li {
                font-size: 13px;
                padding: 7px 12px;
            }
            .mini-row-card {
                padding: 20px;
            }
            .box-body h3 {
                font-size: 19px;
            }
            .st-head {
                margin-bottom: 26px;
            }
            .faq-aside {
                padding: 22px 20px;
            }
        }

/* roulang page: article */
:root {
    --st-primary: #21317d;
    --st-violet: #6a4de0;
    --st-purple-bright: #8b5cf6;
    --st-glow: #ff9e4f;
    --st-deep: #0f1b3e;
    --st-paper: #f4f6fc;
    --st-card: #ffffff;
    --st-ink-1: #16214a;
    --st-ink-2: #465271;
    --st-border: #e4e8f4;
    --shadow-1: 0 8px 24px rgba(19, 32, 96, .08);
    --shadow-2: 0 18px 48px rgba(19, 32, 96, .16);
    --radius-pill: 999px;
    --radius-card: 20px;
    --radius-banner: 28px;
    --brand-gradient: linear-gradient(125deg, #14204f 0%, #2b2580 38%, #6a4de0 76%, #d97743 130%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: var(--st-paper);
    color: var(--st-ink-1);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

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

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

button {
    font-family: inherit;
}

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

section {
    scroll-margin-top: 28px;
}

h1, h2, h3, h4 {
    letter-spacing: .01em;
    text-wrap: balance;
}

p {
    margin: 0 0 1em;
}

/* 悬浮胶囊导航 */
.st-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    padding: 16px clamp(16px, 3vw, 32px) 0;
    pointer-events: none;
}

.st-nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: var(--radius-pill);
    background: rgba(11, 20, 48, .38);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 8px 10px 8px 22px;
    pointer-events: auto;
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.st-nav.scrolled .st-nav-inner {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 10px 32px rgba(19, 32, 96, .12);
}

.st-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    background: linear-gradient(135deg, #5f4bd6, #f39b62);
    box-shadow: 0 6px 16px rgba(20, 26, 70, .18);
}

.st-brand-name {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .04em;
    transition: color .3s ease;
}

.st-brand-tag {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    transition: all .3s ease;
}

.st-nav.scrolled .st-brand-name {
    color: var(--st-ink-1);
}

.st-nav.scrolled .st-brand-tag {
    color: var(--st-primary);
    background: linear-gradient(120deg, rgba(33, 49, 125, .1), rgba(139, 92, 246, .12));
    border-color: rgba(106, 77, 224, .28);
}

.st-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.st-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    transition: background .24s ease, color .24s ease;
}

.st-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.st-nav.scrolled .st-nav-link {
    color: var(--st-ink-1);
}

.st-nav.scrolled .st-nav-link:hover {
    color: var(--st-primary);
    background: rgba(106, 77, 224, .08);
}

.st-nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.st-nav.scrolled .st-nav-link.active {
    color: var(--st-primary);
    background: rgba(106, 77, 224, .12);
}

.st-nav-link.active:after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 5px;
    height: 2px;
    border-radius: 3px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .1));
}

.st-nav.scrolled .st-nav-link.active:after {
    background: linear-gradient(90deg, var(--st-primary), var(--st-purple-bright));
}

.st-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-pill);
    background: linear-gradient(120deg, #2b2580, #6a4de0);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(31, 27, 108, .22);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.st-nav-cta i {
    font-size: 13px;
    transition: transform .25s ease;
}

.st-nav-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 12px 28px rgba(31, 27, 108, .3);
}

.st-nav-cta:hover i {
    transform: translateX(3px);
}

.st-toggler {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
}

.st-nav.scrolled .st-toggler {
    color: var(--st-ink-1);
    background: rgba(33, 49, 125, .08);
}

/* 文章横幅 */
.art-hero {
    position: relative;
    min-height: 66vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-color: var(--st-deep);
    overflow: hidden;
    padding: 150px 0 90px;
}

.art-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(10, 18, 46, .95) 0%, rgba(24, 25, 88, .86) 38%, rgba(81, 40, 111, .62) 76%, rgba(177, 101, 68, .35) 120%);
    z-index: 1;
}

.art-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 72% 24%, rgba(255, 158, 79, .18), transparent 30%), radial-gradient(circle at 10% 85%, rgba(139, 92, 246, .16), transparent 35%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-card {
    max-width: 920px;
}

.st-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    margin-bottom: 26px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .08);
    border-radius: var(--radius-pill);
    width: fit-content;
    backdrop-filter: blur(8px);
}

.st-breadcrumb a {
    color: rgba(255, 255, 255, .9);
    transition: color .2s ease;
}

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

.st-breadcrumb i {
    font-size: 12px;
    color: rgba(255, 255, 255, .48);
}

.art-hero h1 {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.28;
    color: #fff;
    margin: 0 0 22px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .24);
}

.art-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.art-meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-pill);
    padding: 8px 15px;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

.art-meta li i {
    color: var(--st-glow);
}

/* 正文阅读卡 */
.article-main-wrap {
    background: var(--st-paper);
    padding: 0 0 40px;
    position: relative;
    z-index: 2;
}

.article-sheet-area {
    margin-top: -64px;
}

.article-sheet {
    background: var(--st-card);
    border: 1px solid rgba(228, 232, 244, .8);
    border-radius: var(--radius-banner);
    box-shadow: var(--shadow-1);
    padding: clamp(26px, 6vw, 60px);
    position: relative;
    z-index: 5;
}

.article-format {
    max-width: 800px;
    margin: 0 auto;
    color: var(--st-ink-2);
}

.article-format h2 {
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--st-ink-1);
    font-weight: 800;
    line-height: 1.4;
    margin: 40px 0 18px;
    padding-left: 16px;
    border-left: 4px solid var(--st-purple-bright);
}

.article-format h3 {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    color: var(--st-ink-1);
    margin: 32px 0 14px;
    padding-left: 12px;
    border-left: 3px solid var(--st-glow);
}

.article-format p {
    line-height: 1.9;
    margin-bottom: 1.2em;
}

.article-format img {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    margin: 24px 0;
    border: 1px solid var(--st-border);
}

.article-format blockquote {
    position: relative;
    margin: 28px 0;
    padding: 18px 24px;
    border-radius: 14px;
    background: var(--st-paper);
}

.article-format blockquote:before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 6px;
    background: var(--st-glow);
}

.article-format ul,
.article-format ol {
    padding-left: 24px;
    margin-bottom: 1.2em;
}

.article-format ul li,
.article-format ol li {
    margin-bottom: 8px;
}

.article-format a {
    color: var(--st-primary);
    border-bottom: 1px solid rgba(33, 49, 125, .3);
}

.article-format a:hover {
    color: var(--st-violet);
    border-bottom-color: var(--st-violet);
}

.article-format hr {
    border: none;
    border-top: 1px solid var(--st-border);
    margin: 32px 0;
}

.article-tags {
    max-width: 800px;
    margin: 48px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--st-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.art-tag-label {
    color: var(--st-ink-1);
    font-size: 14px;
    font-weight: 700;
    margin-right: 4px;
}

.art-tag,
.article-tags span,
.article-tags a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--st-paper);
    color: var(--st-ink-2);
    border: 1px solid var(--st-border);
    font-size: 14px;
    transition: all .24s ease;
}

.article-tags a:hover {
    color: var(--st-primary);
    border-color: rgba(106, 77, 224, .45);
    background: rgba(106, 77, 224, .06);
}

.post-bottom-nav {
    max-width: 800px;
    margin: 34px auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.post-bottom-nav .st-button {
    height: 44px;
}

.post-bottom-nav .back-link {
    color: var(--st-ink-2);
    font-size: 15px;
}

.post-bottom-nav .back-link:hover {
    color: var(--st-violet);
}

/* 按钮系统 */
.st-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 28px;
    height: 48px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    transition: all .25s ease;
    white-space: nowrap;
}

.st-button i {
    font-size: 14px;
    transition: transform .25s ease;
}

.st-button--primary {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 10px 24px rgba(30, 32, 108, .2);
}

.st-button--primary:hover {
    color: #fff;
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

.st-button--ghost {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

.st-button--ghost:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: #fff;
}

.st-button--soft {
    background: var(--st-paper);
    color: var(--st-ink-1);
    border: 1px solid var(--st-border);
}

.st-button--soft:hover {
    border-color: rgba(106, 77, 224, .4);
    background: #fff;
    color: var(--st-primary);
    box-shadow: var(--shadow-1);
    transform: translateY(-2px);
}

.st-button--gold {
    background: linear-gradient(135deg, #ffb86c, #f28c4f);
    color: #fff;
    box-shadow: 0 8px 20px rgba(242, 140, 79, .24);
}

.st-button--gold:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(242, 140, 79, .3);
}

/* FAQ */
.faq-region {
    padding: 80px 0 32px;
    background: var(--st-paper);
}

.section-head {
    max-width: 720px;
    margin-bottom: 40px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--st-primary);
    background: rgba(106, 77, 224, .09);
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.section-head h2 {
    color: var(--st-ink-1);
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 800;
    margin: 0 0 10px;
}

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

.faq-list .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--st-border);
    border-radius: 0 !important;
    background: transparent;
    margin-bottom: 0;
}

.faq-list .accordion-item:last-child {
    border-bottom: 0;
}

.faq-list .accordion-button {
    background: transparent;
    border-radius: 0 !important;
    box-shadow: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--st-ink-1);
    padding: 22px 44px 22px 0;
    line-height: 1.5;
}

.faq-list .accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.faq-list .accordion-button:not(.collapsed) {
    color: var(--st-primary);
    background: transparent;
}

.faq-list .accordion-button::after {
    background-image: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    transition: transform .3s ease;
    opacity: .7;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\2b";
    position: absolute;
    right: 0;
    background: var(--st-paper);
    border-radius: 50%;
}

.faq-list .accordion-button:not(.collapsed)::after {
    content: "\f068";
    color: var(--st-violet);
    transform: rotate(180deg);
}

.faq-list .accordion-body {
    padding: 0 72px 20px 0;
    color: var(--st-ink-2);
    line-height: 1.85;
    font-size: 15px;
}

/* 相关推荐 */
.related-area {
    padding: 76px 0 72px;
    background: #fff;
}

.related-area + .faq-region {
    padding-top: 64px;
}

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

.section-top h2 {
    font-size: clamp(24px, 3vw, 30px);
    margin: 0;
    font-weight: 800;
    color: var(--st-ink-1);
}

.rel-link {
    font-size: 15px;
    font-weight: 700;
    color: var(--st-primary);
    white-space: nowrap;
}

.rel-link i {
    margin-left: 6px;
    transition: transform .2s ease;
}

.rel-link:hover {
    color: var(--st-violet);
}

.rel-link:hover i {
    transform: translateX(4px);
}

.rel-card {
    background: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    height: 100%;
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    transition: transform .28s ease, box-shadow .28s ease;
}

.rel-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-2);
}

.rel-thumb {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--st-paper);
}

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

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

.rel-info {
    padding: 20px 22px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rel-badge {
    align-self: flex-start;
    background: rgba(106, 77, 224, .1);
    color: var(--st-primary);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
}

.rel-info h3 {
    font-size: 17px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--st-ink-1);
    margin: 0 0 10px;
}

.rel-info p {
    color: var(--st-ink-2);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rel-arrow {
    margin-top: auto;
    color: var(--st-violet);
    font-size: 14px;
    font-weight: 700;
}

.rel-arrow i {
    margin-left: 6px;
    transition: transform .2s ease;
}

.rel-card:hover .rel-arrow i {
    transform: translateX(4px);
}

/* 轻量CTA */
.cta-soft {
    padding: 20px 0 88px;
    background: var(--st-paper);
}

.cta-card {
    position: relative;
    overflow: hidden;
    background: var(--brand-gradient);
    border-radius: var(--radius-banner);
    padding: 44px 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: #fff;
    box-shadow: 0 18px 48px rgba(15, 27, 62, .24);
}

.cta-card:after {
    content: "";
    position: absolute;
    right: -50px;
    top: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .18), transparent 68%);
    pointer-events: none;
}

.cta-card h2 {
    font-size: clamp(20px, 2.4vw, 28px);
    margin: 0 0 6px;
    font-weight: 800;
}

.cta-card p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
}

.cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 2;
}

/* 未找到 */
.not-found-wrap {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 150px 20px 90px;
}

.not-found-card {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border-radius: var(--radius-banner);
    padding: 60px 40px;
    box-shadow: var(--shadow-1);
}

.not-found-card .nf-icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(106, 77, 224, .1);
    color: var(--st-primary);
    font-size: 34px;
}

.not-found-card h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 14px;
    color: var(--st-ink-1);
}

.not-found-card p {
    color: var(--st-ink-2);
}

/* footer */
.site-footer {
    background: #0d1740;
    color: rgba(255, 255, 255, .78);
    padding: 74px 0 0;
}

.footer-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-upper {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-brand .footer-logo-name {
    display: block;
    font-size: 26px;
    color: #fff;
    font-weight: 800;
}

.footer-logo-tag {
    display: inline-flex;
    margin-top: 8px;
    background: linear-gradient(120deg, rgba(139, 92, 246, .3), rgba(255, 158, 79, .2));
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
}

.footer-desc {
    color: rgba(255, 255, 255, .58);
    font-size: 14px;
    line-height: 1.8;
    margin: 20px 0 0;
    max-width: 360px;
}

.footer-col-title {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: .02em;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    transition: color .2s ease;
}

.footer-links a i {
    font-size: 11px;
    margin-right: 6px;
    color: rgba(255, 255, 255, .28);
}

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

.footer-bottom {
    padding: 22px 0 30px;
}

.footer-bottom-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    color: rgba(255, 255, 255, .4);
    font-size: 13px;
}

/* 响应式 */
@media (max-width: 991.98px) {
    .st-nav-links {
        position: absolute;
        top: calc(100% - 6px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(14px);
        border-radius: 24px;
        padding: 12px;
        box-shadow: 0 18px 48px rgba(15, 27, 62, .2);
        display: none;
        pointer-events: auto;
        border: 1px solid var(--st-border);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }

    .st-nav-inner.expanded .st-nav-links {
        display: flex;
    }

    .st-nav-link {
        justify-content: flex-start;
        height: 52px;
        color: var(--st-ink-1) !important;
        border-radius: 14px;
        padding: 0 18px;
    }

    .st-nav-link:hover,
    .st-nav-link.active {
        background: rgba(106, 77, 224, .1) !important;
    }

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

    .st-nav-cta {
        justify-content: center;
        height: 50px;
        border-radius: 14px;
        margin-top: 8px;
    }

    .st-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    .st-nav-inner {
        flex-wrap: wrap;
        position: relative;
    }

    .st-nav.scrolled .st-nav-links {
        background: rgba(255, 255, 255, .98);
    }

    .cta-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 34px 30px;
    }

    .cta-actions {
        width: 100%;
    }

    .cta-actions .st-button {
        flex: 1;
        min-width: 132px;
    }

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

@media (max-width: 767.98px) {
    .st-nav {
        padding: 10px 12px 0;
    }

    .st-nav-inner {
        padding-left: 12px;
        border-radius: 22px;
    }

    .st-brand-name {
        font-size: 18px;
    }

    .st-brand-tag {
        display: none;
    }

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

    .art-hero {
        min-height: 72vh;
        padding: 130px 0 70px;
    }

    .st-breadcrumb {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .art-meta li {
        font-size: 13px;
        padding: 7px 12px;
    }

    .article-sheet-area {
        margin-top: -36px;
    }

    .article-sheet {
        padding: 24px 18px 30px;
        border-radius: 22px;
    }

    .article-tags {
        margin-top: 30px;
    }

    .post-bottom-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .post-bottom-nav .st-button {
        width: 100%;
    }

    .faq-list .accordion-body {
        padding-right: 20px;
    }

    .faq-region,
    .related-area {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .section-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-card {
        padding: 30px 22px;
    }

    .cta-actions {
        flex-direction: column;
    }

    .cta-actions .st-button {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .art-meta li {
        width: 100%;
    }

    .art-hero h1 {
        font-size: 28px;
    }

    .not-found-card {
        padding: 40px 18px;
    }

    .article-format h2 {
        padding-left: 12px;
    }

    .article-format h3 {
        padding-left: 10px;
    }
}

.st-button:active,
.st-nav-cta:active,
.st-toggler:active {
    transform: scale(.97);
}

/* roulang page: category2 */
:root {
  --st-primary: #21317D;
  --st-violet: #6A4DE0;
  --st-purple-bright: #8B5CF6;
  --st-glow: #FF9E4F;
  --st-deep: #0F1B3E;
  --st-paper: #F4F6FC;
  --st-card: #FFFFFF;
  --st-ink-1: #16214A;
  --st-ink-2: #465271;
  --st-border: #E4E8F4;
  --shadow-1: 0 8px 24px rgba(19, 32, 96, .08);
  --shadow-2: 0 18px 48px rgba(19, 32, 96, .16);
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-banner: 28px;
  --gradient-brand: linear-gradient(125deg, #14204F 0%, #2B2580 38%, #6A4DE0 76%, #D97743 130%);
  --gradient-dark: linear-gradient(122deg, rgba(8, 14, 36, .96) 0%, rgba(20, 30, 74, .88) 48%, rgba(56, 35, 115, .74) 100%);
}
html { scroll-behavior: smooth; }
body {
  background: var(--st-paper);
  color: var(--st-ink-1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
a { text-decoration: none; color: inherit; transition: color .25s ease; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font-family: inherit; }
.container-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.section-block { padding: 88px 0; }
.section-block.paper-bg { background: var(--st-card); border-radius: 32px; padding: 90px 0; }
.text-muted-2 { color: var(--st-ink-2); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  border: 0;
  transition: all .3s ease;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 4px solid rgba(106, 77, 224, .24);
  box-shadow: none;
}
.btn-main {
  background: var(--gradient-brand);
  color: #fff !important;
  box-shadow: var(--shadow-1);
}
.btn-main:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); filter: brightness(1.05); color: #fff; }
.btn-outline {
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 255, 255, .72);
  color: #fff;
}
.btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .18); color: #fff; transform: translateY(-2px); }
.btn-light-solid { background: #fff; color: var(--st-primary); box-shadow: var(--shadow-1); }
.btn-light-solid:hover { background: #fff; color: var(--st-violet); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--st-primary); }
.link-arrow i { transition: transform .28s ease; }
.link-arrow:hover { color: var(--st-violet); }
.link-arrow:hover i { transform: translateX(4px); }

/* 悬浮胶囊导航 */
.st-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1140px, calc(100% - 36px));
  z-index: 1080;
  border-radius: var(--radius-pill);
  background: rgba(11, 20, 48, .38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(4, 10, 30, .06);
  transition: background .35s ease, box-shadow .35s ease;
}
.st-nav.scrolled {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(19, 32, 96, .1);
}
.st-nav-inner {
  height: 62px;
  padding: 0 10px 0 20px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.st-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  background: var(--gradient-brand);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .16);
}
.st-brand-name { font-size: 20px; font-weight: 800; letter-spacing: .01em; color: #fff; transition: color .3s ease; }
.st-brand-tag {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
}
.st-nav.scrolled .st-brand-name, .st-nav.scrolled .st-brand-tag { color: var(--st-ink-1); }
.st-nav.scrolled .st-brand-tag { background: rgba(106, 77, 224, .14); color: var(--st-violet); }
.st-toggler {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 16px;
  align-items: center;
  justify-content: center;
}
.st-nav.scrolled .st-toggler { color: var(--st-ink-1); background: rgba(106, 77, 224, .12); }
.st-nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.st-nav-link {
  position: relative;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
  transition: color .3s ease, background .3s ease;
}
.st-nav.scrolled .st-nav-link { color: var(--st-ink-1); }
.st-nav-link:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.st-nav.scrolled .st-nav-link:hover { background: rgba(106, 77, 224, .1); color: var(--st-primary); }
.st-nav-link.active { background: rgba(255, 255, 255, .2); color: #fff; }
.st-nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #fff, #FF9E4F);
}
.st-nav.scrolled .st-nav-link.active { background: rgba(106, 77, 224, .13); color: var(--st-primary); }
.st-nav.scrolled .st-nav-link.active::after { background: linear-gradient(90deg, var(--st-violet), var(--st-glow)); }
.st-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  margin-left: 10px;
  box-shadow: 0 6px 14px rgba(20, 32, 79, .16);
}
.st-nav-cta i { font-size: 13px; }
.st-nav-cta:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow-2); color: #fff; }
@media (max-width: 1199px) {
  .st-nav-link { padding: 9px 11px; font-size: 14px; }
  .st-nav-cta { padding: 0 18px; }
  .st-brand-name { font-size: 18px; }
  .st-brand-tag { display: none; }
}
@media (max-width: 991px) {
  .st-nav { width: calc(100% - 36px); }
  .st-toggler { display: inline-flex; }
  .st-nav-links {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(18px);
    border: 1px solid var(--st-border);
    border-radius: 24px;
    padding: 14px;
    box-shadow: var(--shadow-2);
  }
  .st-nav-links.open { display: flex; }
  .st-nav-link, .st-nav.scrolled .st-nav-link { color: var(--st-ink-1); }
  .st-nav-link.active, .st-nav.scrolled .st-nav-link.active { background: rgba(106, 77, 224, .13); color: var(--st-primary); }
  .st-nav-link.active::after, .st-nav.scrolled .st-nav-link.active::after { background: linear-gradient(90deg, var(--st-violet), var(--st-glow)); }
  .st-nav-cta {
    justify-content: center;
    margin: 12px 0 0;
  }
}

/* 分类页矮首屏 */
.category-hero {
  position: relative;
  min-height: 380px;
  margin: 104px 24px 0;
  border-radius: var(--radius-banner);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(96deg, rgba(7, 13, 36, .94) 0%, rgba(15, 27, 62, .86) 44%, rgba(73, 47, 151, .68) 100%),
    url('/assets/images/backpic/back-2.png') center center / cover no-repeat,
    var(--st-deep);
}
.category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .3) 0 1px, transparent 1.5px),
    radial-gradient(circle at 35% 68%, rgba(255, 255, 255, .22) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, .23) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 74%, rgba(255, 158, 79, .4) 0 1px, transparent 1.6px);
  background-size: 130px 130px, 210px 210px, 180px 180px, 260px 260px;
}
.category-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, .3) 0%, rgba(139, 92, 246, 0) 68%);
  opacity: .5;
}
.category-hero-inner {
  position: relative;
  z-index: 2;
  width: min(1100px, calc(100% - 56px));
  margin: 0 auto;
  padding-bottom: 52px;
  padding-left: 12px;
  padding-top: 80px;
}
.hero-cat-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 22px;
  backdrop-filter: blur(4px);
}
.category-hero-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
}
.category-hero-breadcrumb a { color: rgba(255, 255, 255, .82); }
.category-hero-breadcrumb a:hover { color: #FF9E4F; }
.category-hero-breadcrumb .sep { opacity: .55; }
.category-title { color: #fff; font-size: 42px; font-weight: 800; line-height: 1.25; margin-bottom: 14px; max-width: 820px; }
.category-lead { color: rgba(255, 255, 255, .9); font-size: 18px; max-width: 760px; margin-bottom: 22px; line-height: 1.8; }
.hero-guide-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  color: rgba(255, 255, 255, .93);
  background: rgba(255, 255, 255, .1);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 14px;
}
.hero-chip i { color: #FF9E4F; }
@media (max-width: 991px) {
  .category-hero { min-height: 320px; margin: 88px 16px 0; }
  .category-hero-inner { width: calc(100% - 30px); padding-left: 0; padding-bottom: 34px; padding-top: 60px; }
  .category-title { font-size: 30px; }
  .category-lead { font-size: 16px; }
}
@media (max-width: 520px) {
  .category-hero { min-height: 300px; margin: 76px 12px 0; border-radius: 24px; }
  .hero-chip { padding: 6px 10px; font-size: 12px; }
}

/* 通用区块标题 */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--st-violet);
  background: rgba(106, 77, 224, .09);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.section-title { font-size: 30px; font-weight: 800; color: var(--st-ink-1); line-height: 1.4; margin-bottom: 14px; }
.section-desc { max-width: 740px; color: var(--st-ink-2); font-size: 16px; margin-bottom: 34px; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .section-block { padding: 60px 0; }
  .section-title { font-size: 24px; }
  .section-desc { font-size: 15px; margin-bottom: 24px; }
}

/* 目录大卡 */
.entry-panel { padding: 32px 0 12px; }
.directory-card {
  border: 1px solid var(--st-border);
  background: var(--st-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: transform .35s ease, box-shadow .35s ease;
}
.directory-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.directory-card.cover-column { min-height: 400px; }
.directory-card .dc-thumb { position: relative; overflow: hidden; height: 230px; }
.directory-card .dc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.directory-card:hover .dc-thumb img { transform: scale(1.04); }
.directory-card .dc-body { padding: 24px 26px 26px; }
.dc-count-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: rgba(15, 27, 62, .6);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, .22);
}
.dc-tag {
  display: inline-block;
  background: rgba(139, 92, 246, .11);
  color: var(--st-violet);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.dc-title { font-size: 23px; font-weight: 800; margin-bottom: 8px; color: var(--st-ink-1); }
.dc-text { font-size: 15px; color: var(--st-ink-2); line-height: 1.8; margin-bottom: 16px; }
.dc-list { display: grid; gap: 9px; margin-bottom: 20px; }
.dc-list li { display: flex; gap: 9px; font-size: 14px; color: var(--st-ink-2); }
.dc-list li i { color: var(--st-glow); margin-top: 5px; }
.btn-small { height: 40px; padding: 0 20px; font-size: 14px; }
.side-card {
  display: flex;
  flex-direction: column;
  padding: 24px 26px;
  background: var(--st-card);
  border: 1px solid var(--st-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.side-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.side-card .sc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sc-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  background: var(--gradient-brand);
}
.sc-title { font-size: 18px; font-weight: 700; }
.side-card p { color: var(--st-ink-2); font-size: 14px; margin-bottom: 14px; line-height: 1.8; }
.side-card a { font-size: 14px; margin-top: auto; }
.directory-col { height: 100%; }
.top-line-card { margin-bottom: 16px; }
.top-line-card:last-child { margin-bottom: 0; }
@media (max-width: 992px) {
  .directory-card.cover-column { min-height: auto; }
  .side-column { margin-top: 20px; }
}

/* 精选路线大卡 */
.route-list-card {
  background: var(--st-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--st-border);
  box-shadow: var(--shadow-1);
  padding: 6px 24px;
}
.route-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--st-border);
}
.route-item:last-child { border-bottom: 0; }
.route-num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: rgba(139, 92, 246, .3);
  width: 52px;
  flex-shrink: 0;
}
.route-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 17px;
  background: rgba(106, 77, 224, .1);
  color: var(--st-violet);
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.route-info { flex: 1; min-width: 0; }
.route-info h3 { font-size: 20px; font-weight: 700; margin-bottom: 3px; color: var(--st-ink-1); }
.route-info p { color: var(--st-ink-2); font-size: 15px; margin-bottom: 0; }
.route-action { text-align: right; flex-shrink: 0; }
.route-action .btn { height: 42px; padding: 0 20px; font-size: 14px; }
@media (max-width: 767px) {
  .route-list-card { padding: 6px 18px; }
  .route-item { flex-wrap: wrap; gap: 12px; padding: 22px 0; }
  .route-num { width: 36px; font-size: 26px; }
  .route-icon { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
  .route-info { flex: 1 1 65%; }
  .route-info h3 { font-size: 17px; }
  .route-info p { font-size: 14px; }
  .route-action { width: 100%; text-align: left; }
}

/* 适用场景 */
.scenario-card {
  background: var(--st-card);
  border: 1px solid var(--st-border);
  border-radius: var(--radius-card);
  padding: 28px;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: transform .35s ease, box-shadow .35s ease;
}
.scenario-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.scenario-card .scenario-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  background: var(--gradient-brand);
  margin-bottom: 18px;
}
.scenario-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 7px; color: var(--st-ink-1); }
.scenario-card p { color: var(--st-ink-2); font-size: 14px; margin-bottom: 12px; }
.scenario-card .tag-mini { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--st-violet); }
.scenario-card .tag-mini i { color: var(--st-glow); }

/* 流程深色横幅 */
.steps-section {
  position: relative;
  border-radius: var(--radius-banner);
  overflow: hidden;
  padding: 62px 30px 74px;
  margin: 32px 0 88px;
  color: #fff;
  background:
    linear-gradient(105deg, rgba(9, 15, 32, .96) 0%, rgba(12, 22, 52, .91) 45%, rgba(47, 31, 104, .84) 100%),
    url('/assets/images/backpic/back-3.webp') center center / cover no-repeat,
    var(--st-deep);
}
.steps-section .star-layer {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,.24) 0 1px, transparent 1.4px),
    radial-gradient(circle at 65% 70%, rgba(255,255,255,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 90% 22%, rgba(255,158,79,.36) 0 1px, transparent 1.6px);
  background-size: 190px 190px, 230px 230px, 240px 240px;
}
.steps-intro { position: relative; z-index: 2; max-width: 640px; margin-bottom: 40px; }
.steps-intro .section-kicker { background: rgba(255,255,255,.14); color: #fff; }
.steps-intro h2 { color: #fff; font-size: 30px; font-weight: 800; margin-bottom: 12px; }
.steps-intro p { color: rgba(255,255,255,.86); font-size: 16px; }
.step-card {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  padding: 28px 24px;
  height: 100%;
  transition: background .3s ease, transform .3s ease;
}
.step-card:hover { background: rgba(255, 255, 255, .16); transform: translateY(-4px); }
.step-card .step-order {
  font-size: 15px;
  color: #FF9E4F;
  font-weight: 700;
}
.step-card .step-title { font-size: 20px; font-weight: 700; margin: 8px 0 10px; color: #fff; }
.step-card p { color: rgba(255, 255, 255, .86); font-size: 14px; margin-bottom: 0; line-height: 1.85; }
.steps-bottom { position: relative; z-index: 2; margin-top: 26px; }
@media (max-width: 991px) {
  .steps-section { padding: 42px 18px 44px; margin-top: 20px; margin-bottom: 60px; }
  .steps-intro h2 { font-size: 24px; }
}

/* FAQ */
.faq-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.accordion-item {
  background: var(--st-card);
  border: 1px solid var(--st-border);
  border-radius: 18px !important;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow .3s ease;
}
.accordion-item:last-child { margin-bottom: 0; }
.accordion-item:hover { box-shadow: var(--shadow-2); }
.accordion-button {
  background: #fff;
  color: var(--st-ink-1);
  font-size: 16px;
  font-weight: 600;
  padding: 21px 24px;
  border: 0;
  box-shadow: none !important;
  align-items: center;
  gap: 16px;
}
.accordion-button:not(.collapsed) { color: var(--st-primary); background: #F9F8FF; }
.accordion-button::after { display: none; }
.accordion-body { padding: 4px 24px 22px; color: var(--st-ink-2); font-size: 15px; line-height: 1.85; background: #fff; border-top: 1px solid #EFF1FA; }
.faq-plus-flex { display: inline-flex; align-items: center; justify-content: center; }
.faq-plus-flex .fa-plus {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(106, 77, 224, .12);
  color: var(--st-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: transform .4s ease, background .3s ease;
}
.accordion-button:not(.collapsed) .fa-plus { transform: rotate(135deg); background: var(--st-primary); color: #fff; }
.accordion-button .faq-text { flex: 1; }

/* 继续前往卡片 */
.continue-card {
  display: block;
  background: var(--st-card);
  border: 1px solid var(--st-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.continue-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
.continue-card:hover img { transform: scale(1.05); }
.continue-card .cc-img { height: 160px; overflow: hidden; position: relative; }
.continue-card .cc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.continue-card .cc-body { padding: 20px 22px 22px; }
.continue-card .cc-type { font-size: 13px; font-weight: 700; color: var(--st-violet); display: inline-flex; gap: 6px; align-items: center; }
.continue-card h3 { font-size: 18px; font-weight: 700; color: var(--st-ink-1); margin: 7px 0 6px; }
.continue-card p { color: var(--st-ink-2); font-size: 14px; }
.continue-card .arrow { font-size: 13px; margin-top: 8px; color: var(--st-primary); }

/* CTA 大区 */
.cta-final {
  position: relative;
  border-radius: var(--radius-banner);
  overflow: hidden;
  padding: 62px 42px 62px;
  background: var(--gradient-dark),
    url('/assets/images/backpic/back-1.webp') center right / cover no-repeat,
    var(--st-deep);
}
.cta-final::before {
  content: "";
  position: absolute;
  right: 6%;
  top: 12%;
  width: 180px;
  height: 180px;
  border: 1px dashed rgba(255, 158, 79, .7);
  border-radius: 50%;
  opacity: .6;
}
.cta-final::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 18%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 158, 79, .8), rgba(255, 158, 79, 0) 70%);
}
.cta-final-inner { position: relative; z-index: 2; max-width: 720px; }
.cta-final .cta-kicker { color: #FF9E4F; font-size: 15px; font-weight: 700; letter-spacing: .04em; margin-bottom: 13px; }
.cta-final h2 { color: #fff; font-size: 30px; font-weight: 800; line-height: 1.45; margin-bottom: 10px; }
.cta-final p { color: rgba(255, 255, 255, .88); font-size: 16px; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btn-glow { background: linear-gradient(110deg, #FF9E4F, #FFC08A); color: #16214A !important; font-weight: 700; }
.btn-glow:hover { filter: brightness(1.04); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255, 158, 79, .22); color: #16214A; }
.cta-row-inline { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; }
.cta-row-inline .btn { height: 44px; }
@media (max-width: 768px) {
  .cta-final { padding: 38px 20px 40px; }
  .cta-final h2 { font-size: 24px; }
  .cta-btns .btn, .cta-row-inline .btn { width: 100%; }
}
@media (max-width: 520px) {
  .cta-btns { flex-direction: column; width: 100%; }
}

/* 页脚 */
.site-footer {
  background: #0F1B3E;
  color: rgba(255, 255, 255, .78);
  margin-top: 90px;
}
.footer-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 74px 0 28px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.brand-rows { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-logo-name { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.footer-logo-tag { padding: 6px 14px; font-size: 13px; border-radius: var(--radius-pill); background: rgba(139, 92, 246, .24); color: #fff; }
.footer-desc { font-size: 14px; opacity: .92; max-width: 350px; line-height: 1.9; }
.footer-col-title { font-size: 16px; color: #fff; font-weight: 700; margin-bottom: 20px; position: relative; padding-bottom: 12px; }
.footer-col-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 2px; background: #FF9E4F; border-radius: 2px; }
.footer-links { display: grid; gap: 12px; }
.footer-links a { font-size: 14px; color: rgba(255, 255, 255, .78); display: inline-flex; gap: 9px; transition: color .25s ease; }
.footer-links a i { color: rgba(255, 255, 255, .45); font-size: 12px; line-height: 22px; transition: color .25s ease; }
.footer-links a:hover { color: #FF9E4F; }
.footer-links a:hover i { color: #FF9E4F; }
.footer-bottom { padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 56px; }
.footer-bottom-box { display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 12px; font-size: 13px; color: rgba(255, 255, 255, .55); }
@media (max-width: 991px) {
  .footer-inner { width: min(100% - 32px, 1180px); padding-top: 56px; }
  .footer-bottom-box { flex-direction: column; }
}
@media (max-width: 520px) {
  .footer-inner { width: calc(100% - 30px); }
  .footer-bottom-box { font-size: 12px; }
}

/* 淡入辅助 */
.fade-up { opacity: 0; transform: translateY(20px); animation: fadeUp .8s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
.toast-star {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1600;
  background: #16214A;
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.toast-star.show { opacity: 1; transform: translate(-50%, -4px); }

/* roulang page: category3 */
:root {
  --st-primary: #21317D;
  --st-violet: #6A4DE0;
  --st-purple-bright: #8B5CF6;
  --st-glow: #FF9E4F;
  --st-deep: #0F1B3E;
  --st-paper: #F4F6FC;
  --st-card: #FFFFFF;
  --st-ink-1: #16214A;
  --st-ink-2: #465271;
  --st-border: #E4E8F4;
  --shadow-1: 0 8px 24px rgba(19, 32, 96, .08);
  --shadow-2: 0 18px 48px rgba(19, 32, 96, .16);
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-banner: 28px;
  --gradient-brand: linear-gradient(125deg, #14204f 0%, #2b2580 38%, #6a4de0 76%, #d97743 130%);
  --gradient-soft: linear-gradient(110deg, #f6f4ff 0%, #eef2ff 100%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--st-paper);
  color: var(--st-ink-1);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; color: var(--st-ink-1); line-height: 1.35; letter-spacing: .01em; }
h1 { font-size: 44px; font-weight: 700; }
h2 { font-size: 30px; font-weight: 700; }
h3 { font-size: 22px; font-weight: 600; }
p { margin-bottom: 1em; }
a { color: var(--st-primary); text-decoration: none; transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
a:hover { color: var(--st-violet); }
img { max-width: 100%; display: block; }
button { background: none; border: 0; }
.container { max-width: 1200px; }

/* ===== 顶部胶囊导航 ===== */
.st-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  width: max-content;
  max-width: calc(100% - 28px);
  border-radius: var(--radius-pill);
  background: rgba(11, 20, 48, .38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(15, 27, 62, .2);
  transition: background .3s ease, box-shadow .3s ease, color .3s ease;
}
.st-nav.is-scrolled {
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 28px rgba(19, 32, 96, .12);
}
.st-nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px;
}
.st-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: var(--radius-pill);
  color: #fff;
  white-space: nowrap;
}
.st-brand:hover { color: #fff; }
.brand-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--st-deep);
  background: linear-gradient(135deg, #FFC47A, var(--st-glow));
  box-shadow: 0 0 0 4px rgba(255, 158, 79, .15);
}
.st-brand-name {
  font-size: 19px;
  font-weight: 700;
  color: inherit;
}
.st-brand-tag {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(105deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .1));
  border: 1px solid rgba(255, 255, 255, .34);
}
.st-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}
.st-nav-link,
.st-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1.4;
  transition: all .25s ease;
}
.st-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
.st-nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, .18);
  font-weight: 600;
}
.st-nav-cta {
  background: linear-gradient(105deg, var(--st-primary), var(--st-violet));
  color: #fff;
  border: 0;
  font-weight: 600;
  padding: 10px 18px;
  margin-left: 6px;
  box-shadow: 0 8px 22px rgba(106, 77, 224, .3);
}
.st-nav-cta:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(106, 77, 224, .36);
}
.st-toggler {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  cursor: pointer;
  transition: background .25s ease;
}
.st-toggler:hover { background: rgba(255, 255, 255, .22); }
.st-nav-links.open a:not(.st-nav-cta) { color: var(--st-ink-1); }
.st-nav-links.open .st-nav-link:hover { background: rgba(106, 77, 224, .12); }

/* 滚动后导航文字颜色 */
.st-nav.is-scrolled .st-brand,
.st-nav.is-scrolled .st-nav-link,
.st-nav.is-scrolled .st-toggler { color: var(--st-ink-1); }
.st-nav.is-scrolled .st-nav-link:hover,
.st-nav.is-scrolled .st-nav-link.active {
  color: var(--st-primary);
  background: rgba(106, 77, 224, .1);
}
.st-nav.is-scrolled .st-brand-tag {
  color: var(--st-primary);
  border-color: rgba(33, 49, 125, .24);
  background: rgba(255, 255, 255, .36);
}
.st-nav.is-scrolled .st-brand:hover { color: var(--st-primary); }
.st-nav.is-scrolled .st-toggler { border: 1px solid var(--st-border); }
.st-nav.is-scrolled .st-toggler:hover { background: var(--st-paper); }

/* ===== Hero / 分类封面 ===== */
.category-hero {
  position: relative;
  isolation: isolate;
  width: calc(100% - 32px);
  margin: 16px 16px 0;
  min-height: 46vh;
  display: flex;
  align-items: center;
  border-radius: var(--radius-banner);
  background-color: var(--st-deep);
  background-size: cover;
  background-position: center 24%;
  overflow: hidden;
}
.category-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 158, 79, .12), transparent 34%),
    radial-gradient(circle at 85% 70%, rgba(106, 77, 224, .2), transparent 46%);
}
.category-hero::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -42%;
  width: 58%;
  height: 80%;
  z-index: 0;
  background: radial-gradient(circle at 60% 48%, rgba(255, 158, 79, .2), rgba(106, 77, 224, .05) 55%, transparent 72%);
  pointer-events: none;
}
.category-hero-inner {
  position: relative;
  z-index: 2;
  padding: 132px 18px 84px;
  color: #fff;
}
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 20px;
}
.breadcrumb-nav a { color: rgba(255, 255, 255, .72); }
.breadcrumb-nav a:hover { color: #fff; }
.breadcrumb-nav i { font-size: 12px; opacity: .75; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 14px;
  margin-bottom: 22px;
  letter-spacing: .02em;
}
.category-hero h1 {
  color: #fff;
  margin-bottom: 16px;
  max-width: 840px;
}
.hero-lead {
  font-size: 18px;
  color: rgba(255, 255, 255, .92);
  max-width: 680px;
  margin-bottom: 30px;
  line-height: 1.85;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  transition: all .25s ease;
  text-decoration: none;
  cursor: pointer;
}
.btn:focus-visible { outline: 4px solid rgba(106, 77, 224, .18); outline-offset: 2px; }
.btn-primary-st {
  background: linear-gradient(105deg, #1d2b6b, var(--st-primary) 45%, var(--st-violet));
  color: #fff;
  box-shadow: 0 10px 26px rgba(33, 49, 125, .3);
}
.btn-primary-st:hover { color: #fff; filter: brightness(1.08); transform: translateY(-2px); }
.btn-outline-light-st {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .45);
}
.btn-outline-light-st:hover { background: #fff; color: var(--st-primary); border-color: #fff; }
.btn-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--st-primary);
}
.btn-link-arrow i { transition: transform .25s ease; }
.btn-link-arrow:hover i { transform: translateX(4px); }

/* ===== 通用区块 ===== */
.page-section { padding: 90px 0; position: relative; }
.page-section.soft-band { background: #fff; }
@media (max-width: 767px) {
  .page-section { padding: 56px 0; }
}
.section-head { margin-bottom: 42px; }
.section-head.is-center { text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--st-primary);
  background: rgba(106, 77, 224, .1);
  border: 1px solid rgba(106, 77, 224, .12);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  letter-spacing: .02em;
}
.section-head h2 { margin-bottom: 10px; }
.section-head .section-lead {
  color: var(--st-ink-2);
  font-size: 16px;
  max-width: 760px;
  margin: 0;
  line-height: 1.8;
}
.section-head.is-center .section-lead { margin-left: auto; margin-right: auto; }
.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--st-primary);
  background: rgba(33, 49, 125, .08);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* ===== 资讯速递阅读建议 ===== */
.about-section { margin-top: 90px; padding-top: 0; }
.about-section .container { position: relative; }
@media (min-width: 992px) {
  .about-section { margin-top: 0; }
  .category-hero { margin-bottom: -130px; }
}
.about-media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.about-media img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.about-media-panel {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: var(--shadow-1);
}
.about-media-panel span {
  color: var(--st-ink-2);
  font-size: 14px;
}
.about-media-panel strong {
  color: var(--st-primary);
  font-weight: 700;
  font-size: 15px;
}
.feature-mini-card {
  background: var(--st-card);
  border: 1px solid var(--st-border);
  border-radius: var(--radius-card);
  padding: 22px 20px;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-mini-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.feature-mini-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  margin-bottom: 14px;
  color: #fff;
  background: linear-gradient(125deg, var(--st-primary), var(--st-violet));
  font-size: 16px;
}
.feature-mini-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.feature-mini-card p { margin: 0; font-size: 14px; color: var(--st-ink-2); line-height: 1.75; }

/* ===== 速递看点列表 ===== */
.featured-section { background: #fff; }
.digest-list {
  display: grid;
  gap: 16px;
}
.digest-item {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--st-paper);
  border: 1px solid #edf0f7;
  border-radius: 22px;
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.digest-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  background: #fff;
}
.digest-index {
  flex: 0 0 58px;
  width: 58px;
  color: var(--st-primary);
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
.digest-thumb {
  flex: 0 0 178px;
  width: 178px;
  height: 108px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--st-paper);
}
.digest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.digest-content { flex: 1 1 auto; min-width: 0; }
.digest-content h3 { font-size: 18px; font-weight: 700; margin: 4px 0 6px; line-height: 1.5; }
.digest-content h3 a { color: var(--st-ink-1); }
.digest-content h3 a:hover { color: var(--st-primary); }
.digest-content p {
  color: var(--st-ink-2);
  font-size: 15px;
  margin: 0 0 6px;
  line-height: 1.75;
}
.digest-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 13px;
  color: var(--st-ink-2);
}
.digest-note span { display: inline-flex; align-items: center; gap: 6px; }
.digest-note i { color: var(--st-violet); font-size: 12px; }
.digest-link {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(106, 77, 224, .1);
  color: var(--st-primary);
  font-size: 15px;
}
.digest-link:hover {
  background: linear-gradient(125deg, var(--st-primary), var(--st-violet));
  color: #fff;
}

/* ===== 三步使用流程 ===== */
.step-card {
  background: var(--st-card);
  border: 1px solid var(--st-border);
  border-radius: 24px;
  padding: 28px 26px;
  height: 100%;
  box-shadow: var(--shadow-1);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.step-card.step-card-dark {
  background: linear-gradient(135deg, #14204f 0%, #2b2580 50%, #4b389f 100%);
  color: rgba(255, 255, 255, .86);
  border: 0;
}
.step-card-dark h3 { color: #fff; }
.step-card-dark p { color: rgba(255, 255, 255, .82); }
.step-number {
  font-size: 32px;
  font-weight: 800;
  display: block;
  margin-bottom: 12px;
  color: var(--st-violet);
  font-variant-numeric: tabular-nums;
}
.step-card-dark .step-number { color: var(--st-glow); }
.step-card h3 { font-size: 19px; margin-bottom: 10px; }
.step-card p { font-size: 15px; line-height: 1.75; margin: 0; color: var(--st-ink-2); }

/* ===== FAQ ===== */
.faq-section { background: #fff; }
.faq-accordion {
  max-width: 880px;
  margin: 0 auto;
}
.faq-accordion .accordion-item {
  border: 0;
  border-radius: 22px;
  background: var(--st-card);
  box-shadow: var(--shadow-1);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-accordion .accordion-button {
  background: var(--st-paper);
  color: var(--st-ink-1);
  font-weight: 700;
  font-size: 17px;
  padding: 20px 24px;
  border: 0;
  border-radius: 22px !important;
  box-shadow: none;
  gap: 14px;
  align-items: center;
  transition: background .2s ease, color .2s ease;
}
.faq-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(115deg, #f0f2ff 0%, #f8f5fe 100%);
  color: var(--st-primary);
}
.faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 4px rgba(106, 77, 224, .12);
}
.faq-accordion .accordion-button::after { display: none; }
.faq-accordion .accordion-button .faq-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-left: auto;
  background: rgba(106, 77, 224, .12);
  color: var(--st-primary);
  font-size: 13px;
  flex: 0 0 auto;
  transition: transform .3s ease, background .3s ease;
}
.faq-accordion .accordion-button:not(.collapsed) .faq-mark {
  transform: rotate(135deg);
  background: var(--st-primary);
  color: #fff;
}
.faq-accordion .accordion-body {
  padding: 8px 24px 22px;
  color: var(--st-ink-2);
  font-size: 15px;
  line-height: 1.8;
  background: var(--st-card);
  border-top: 1px solid #eef1f8;
}

/* ===== 继续前往 ===== */
.continue-section { background: var(--st-paper); }
.go-card {
  background: var(--st-card);
  border-radius: 24px;
  padding: 30px;
  height: 100%;
  border: 1px solid var(--st-border);
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.go-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.go-card-dark {
  background: linear-gradient(125deg, #14204f 0%, #2b2580 52%, #6a4de0 120%);
  border: 0;
  color: #fff;
}
.go-card-dark * { color: #fff; }
.go-card-dark p { color: rgba(255, 255, 255, .86); }
.go-card-icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(125deg, var(--st-primary), var(--st-violet));
  color: #fff;
  font-size: 20px;
  margin-bottom: 20px;
}
.go-card-dark .go-card-icon { background: rgba(255, 255, 255, .2); }
.go-card h3 { font-size: 21px; margin-bottom: 10px; }
.go-card p { font-size: 15px; color: var(--st-ink-2); margin-bottom: 18px; }

/* ===== CTA ===== */
.cta-section { padding-bottom: 96px; }
.cta-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-banner);
  background: linear-gradient(118deg, #14204f 0%, #2b2580 40%, #6a4de0 88%, #d97743 160%);
  color: #fff;
  padding: 62px 48px;
  isolation: isolate;
  box-shadow: var(--shadow-2);
}
.cta-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 158, 79, .34), transparent 34%),
    radial-gradient(circle at 20% 110%, rgba(139, 92, 246, .4), transparent 44%);
}
.cta-box h2 { color: #fff; font-size: 30px; margin-bottom: 10px; }
.cta-box p { color: rgba(255, 255, 255, .88); max-width: 640px; margin-bottom: 24px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-white {
  background: #fff;
  color: var(--st-primary);
  border: 0;
}
.btn-white:hover { color: var(--st-primary); background: #f3f0ff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(255,255,255,.3); }
.btn-gold {
  background: linear-gradient(120deg, #FF9E4F, #FFB35C);
  color: var(--st-deep);
  border: 0;
}
.btn-gold:hover { color: var(--st-deep); filter: brightness(1.07); transform: translateY(-2px); }
.btn-ghost-light {
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
}
.btn-ghost-light:hover { background: #fff; color: var(--st-primary); border-color: #fff; }
.copy-tip {
  display: inline-block;
  margin-left: 8px;
  color: var(--st-glow);
  font-size: 14px;
  opacity: 0;
  transition: opacity .25s ease;
}

/* ===== 页脚 ===== */
.site-footer {
  background: var(--st-deep);
  color: rgba(255,255,255,.72);
  padding: 74px 0 34px;
}
.footer-inner { width: min(1170px, 92%); margin: 0 auto; }
.footer-upper { padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
.brand-rows {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.footer-logo-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.footer-logo-name::before {
  content: "\f005";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--st-deep);
  background: linear-gradient(120deg, #FFC47A, var(--st-glow));
}
.footer-logo-tag {
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.08);
}
.footer-desc { color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.8; margin: 0; max-width: 360px; }
.footer-col-title {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: .04em;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  color: rgba(255,255,255,.68);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .25s ease, transform .25s ease;
}
.footer-links a i { font-size: 11px; color: rgba(255,255,255,.4); transition: transform .25s ease; }
.footer-links a:hover { color: var(--st-glow); }
.footer-links a:hover i { transform: translateX(3px); }
.footer-bottom { padding-top: 28px; }
.footer-bottom-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
  font-size: 14px;
  color: rgba(255,255,255,.5);
}
.footer-bottom-box span { display: inline-flex; align-items: center; }

/* ===== 响应式 ===== */
@media (max-width: 1199px) {
  .st-nav-link, .st-nav-cta { font-size: 14px; padding: 9px 12px; }
  .st-brand-tag { display: none; }
}
@media (max-width: 991px) {
  body { padding-top: 6px; }
  .category-hero { margin-top: 88px; min-height: 39vh; }
  .st-nav {
    width: max-content;
    max-width: calc(100% - 28px);
  }
  .st-brand-tag { display: inline-flex; }
  .st-toggler { display: inline-flex; }
  .st-nav-inner { gap: 6px; padding-right: 6px; }
  .st-nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: auto;
    width: 280px;
    max-width: calc(100vw - 60px);
    background: #fff;
    border-radius: 20px;
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    box-shadow: var(--shadow-2);
  }
  .st-nav-links.open { display: flex; }
  .st-nav-links .st-nav-link,
  .st-nav-links .st-nav-cta {
    color: var(--st-ink-1);
    justify-content: flex-start;
    padding: 13px 16px;
    font-size: 15px;
    white-space: normal;
  }
  .st-nav-links .st-nav-link:hover,
  .st-nav-links .st-nav-link.active { background: rgba(106,77,224,.12); color: var(--st-primary); }
  .st-nav-links .st-nav-cta {
    background: linear-gradient(105deg, var(--st-primary), var(--st-violet));
    color: #fff;
    margin-left: 0;
    justify-content: center;
  }
  .page-section { padding: 72px 0; }
  .feature-mini-card { padding: 18px; }
  .digest-item { flex-wrap: wrap; align-items: stretch; row-gap: 14px; }
  .digest-thumb { flex: 0 0 118px; width: 118px; height: 76px; }
  .digest-thumb { order: 3; }
  .digest-content { flex: 1 1 100%; order: 4; }
  .digest-link { order: 1; margin-left: auto; }
  .digest-index { order: 0; }
  .digest-content h3 { font-size: 18px; }
  .cta-box { padding: 40px 24px; }
}
@media (max-width: 767px) {
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  .category-hero { margin: 12px 12px 0; width: calc(100% - 24px); min-height: 44vh; }
  .category-hero-inner { padding: 130px 8px 48px; }
  .hero-lead { font-size: 16px; }
  .about-section .container, .featured-section .container, .faq-section .container { padding-left: 16px; padding-right: 16px; }
  .digest-list { gap: 12px; }
  .digest-item { padding: 16px; }
  .digest-index { flex-basis: 38px; font-size: 22px; }
  .digest-thumb { flex-basis: 92px; width: 92px; height: 64px; }
  .digest-content p { font-size: 14px; }
  .digest-link { flex-basis: 36px; width: 36px; height: 36px; font-size: 13px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .footer-bottom-box { flex-direction: column; align-items: flex-start; }
  .footer-upper { padding-bottom: 24px; }
}
@media (max-width: 420px) {
  .brand-icon { width: 32px; height: 32px; }
  .st-brand-name { font-size: 17px; }
  .st-brand-tag { font-size: 11px; padding: 2px 8px; }
  .st-nav-link, .st-nav-cta { font-size: 14px; }
  .hero-actions .btn { width: 100%; }
}