/* roulang page: index */
:root{
  --primary:#6C4CF1;
  --primary-dark:#5438d8;
  --secondary:#F2567A;
  --cyan:#19B7C6;
  --bg:#F7F5FF;
  --ink:#1E1733;
  --text:#4F4780;
  --text-light:#8D86B5;
  --line:#E9E3FF;
  --success:#2E9E62;
  --white:#ffffff;
  --radius-card:22px;
  --radius-btn:12px;
  --shadow-card:0 2px 8px rgba(30,23,51,0.04),0 12px 32px rgba(30,23,51,0.08);
  --shadow-hover:0 8px 16px rgba(30,23,51,0.08),0 24px 48px rgba(30,23,51,0.12);
  --transition:all .25s ease;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Microsoft YaHei","HarmonicOS Sans","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.2px;
}
body.menu-lock{overflow:hidden}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--secondary)}
ul,ol,li{list-style:none}
img{max-width:100%;display:block}
button,input{font-family:inherit}
.container{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
main{display:block;padding-top:72px}
.section{padding:clamp(72px,8vw,112px) 0}
.section-tint{background:linear-gradient(180deg,#F0EBFF 0%,#fff 100%)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 32px;border-radius:var(--radius-btn);
  font-size:16px;font-weight:600;line-height:1;border:none;cursor:pointer;
  transition:var(--transition);letter-spacing:.4px;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;box-shadow:0 10px 24px rgba(108,76,241,.28);
}
.btn-primary:hover{background:linear-gradient(135deg,#7a5cf5,#ff6b8e);box-shadow:0 14px 32px rgba(242,86,122,.3);color:#fff}
.btn-light{
  background:#fff;color:var(--primary);border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(30,23,51,.04);
}
.btn-light:hover{border-color:var(--primary);background:#FBF9FF;color:var(--primary)}
.btn-white{background:#fff;color:var(--primary);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.btn-white:hover{color:var(--secondary);background:#fff}
.btn-lg{min-height:58px;padding:0 40px;font-size:17px;border-radius:14px}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px;border-radius:10px}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:72px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(233,227,255,.8);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:0 8px 30px rgba(30,23,51,.08)}
.header-inner{
  height:72px;display:flex;align-items:center;gap:18px;
}
.brand-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;width:auto}
.logo-mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 6px 14px rgba(108,76,241,.3);color:#fff;font-size:20px;
}
.logo-text{
  font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.5px;white-space:nowrap;
}
.primary-nav{
  display:flex;align-items:center;gap:6px;margin-left:10px;flex:1;
}
.primary-nav a{
  position:relative;display:inline-flex;align-items:center;
  padding:22px 12px 18px;font-size:15px;font-weight:500;color:var(--text);
  border-bottom:2px solid transparent;margin-bottom:0;white-space:nowrap;
}
.primary-nav a:hover{color:var(--primary)}
.primary-nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:12px;height:3px;
  border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.primary-nav a:hover::after{transform:scaleX(1)}
.primary-nav a.active{color:var(--primary)}
.primary-nav a.active::after{transform:scaleX(1)}
.header-extras{display:flex;align-items:center;gap:8px;margin-left:auto}
.fake-search{
  display:flex;align-items:center;gap:8px;width:200px;height:42px;
  background:#F1EEFC;border:1px solid transparent;border-radius:999px;
  padding:0 14px;cursor:text;transition:all .2s;
}
.fake-search:hover{border-color:#d9d0fa;background:#F7F5FF}
.fake-search .fa-magnifying-glass{font-size:13px;color:#9A93C2}
.fake-search .search-ph{font-size:13px;color:#9A93C2;flex:1;white-space:nowrap;overflow:hidden}
.fake-search kbd{
  font-size:11px;background:#fff;border:1px solid var(--line);border-radius:6px;
  color:#8D86B5;padding:2px 5px;box-shadow:0 1px 2px rgba(0,0,0,.04);font-family:inherit;
}
.quick-icons{display:flex;align-items:center;gap:4px}
.icon-btn{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:11px;border:none;background:transparent;color:#6E67A0;
  cursor:pointer;transition:var(--transition);font-size:15px;
}
.icon-btn:hover{background:#F1EEFC;color:var(--primary)}
.nav-cta{
  height:46px;padding:0 24px;display:inline-flex;align-items:center;gap:8px;
  color:#fff;border-radius:12px;font-size:14px;font-weight:600;white-space:nowrap;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 8px 18px rgba(108,76,241,.22);
}
.nav-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px rgba(108,76,241,.3)}
.menu-toggle{
  display:none;width:42px;height:42px;border-radius:11px;background:#F1EEFC;
  border:none;font-size:17px;color:var(--ink);cursor:pointer;align-items:center;justify-content:center;
}
.mobile-nav{
  display:none;
}
@media(min-width:1025px){
  .mobile-nav{display:none!important}
}
@media(max-width:1024px){
  main{padding-top:64px}
  .site-header{height:64px}
  .header-inner{height:64px;gap:10px}
  .logo-mark{width:34px;height:34px;font-size:18px}
  .logo-text{font-size:17px;overflow:hidden;text-overflow:ellipsis;max-width:180px}
  .primary-nav,.header-extras{display:none}
  .menu-toggle{display:inline-flex}
  .site-header.open .mobile-nav{
    display:block;position:fixed;top:64px;left:0;right:0;bottom:0;
    background:#fff;z-index:999;padding:12px 20px 24px;overflow-y:auto;
    box-shadow:0 20px 40px rgba(30,23,51,.12);
  }
  .mobile-nav-inner{display:flex;flex-direction:column;gap:4px}
  .mobile-nav a{
    padding:14px 8px;border-radius:10px;color:var(--ink);
    font-size:16px;font-weight:500;border-bottom:1px solid #F4F1FF;
  }
  .mobile-nav a.active{background:#F0EBFF;color:var(--primary)}
  .mobile-nav a:hover{background:#F7F5FF;color:var(--primary)}
  .mobile-cta-row{display:flex;gap:10px;margin-top:18px}
  .mobile-cta-row .btn{flex:1;font-size:14px;padding:0 10px}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#2A1E5C 0%,#4B2FA3 42%,#8B3EFF 100%);
}
.hero .bg-image{
  position:absolute;inset:0;background-image:url('/assets/images/backpic/back-1.webp');
  background-size:cover;background-position:center;opacity:.2;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 72% 28%,rgba(242,86,122,.22),transparent 40%),
    radial-gradient(circle at 20% 80%,rgba(25,183,198,.2),transparent 42%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:56px 56px;
}
.hero-wrap{
  position:relative;z-index:2;padding:clamp(74px,8vw,116px) 0 clamp(90px,9vw,130px);
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero-chip{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;
  padding:7px 16px;font-size:13px;color:#F2EEFF;backdrop-filter:blur(4px);
}
.hero-chip .dot{width:6px;height:6px;border-radius:50%;background:#5DF2A5;box-shadow:0 0 0 4px rgba(93,242,165,.18)}
.hero-title{
  margin:22px 0 18px;font-size:clamp(34px,4.6vw,54px);font-weight:700;
  line-height:1.22;letter-spacing:1px;color:#fff;max-width:760px;
}
.hero-title .grad-text{
  background:linear-gradient(100deg,#FFD7E3 0%,#B9F3FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  font-size:17px;line-height:1.9;color:rgba(242,238,255,.86);
  max-width:600px;margin-bottom:32px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:26px}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:22px;font-size:13px;color:rgba(242,238,255,.76);
}
.trust-item{display:inline-flex;align-items:center;gap:7px}
.trust-item i{color:#A9F2FF}
.hero-visual{position:relative}
.hero-visual-card{
  border-radius:28px;overflow:hidden;box-shadow:0 30px 60px rgba(18,10,46,.45);
  border:1px solid rgba(255,255,255,.22);position:relative;transform:rotate(1.2deg);
}
.hero-visual-card img{width:100%;height:320px;object-fit:cover}
.float-badge{
  position:absolute;backdrop-filter:blur(14px);
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.85);
  border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:8px;
  box-shadow:0 18px 38px rgba(25,15,66,.25);
}
.badge-num{font-size:25px;font-weight:700;color:var(--primary);line-height:1}
.badge-label{font-size:12px;color:#6B6494;line-height:1.4}
.badge-1{top:30px;right:-18px}
.badge-2{bottom:-18px;left:18px}
.badge-2 .badge-num{color:var(--secondary)}
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:52px}
  .hero-visual{max-width:560px;margin:0 auto}
  .float-badge.badge-1{right:8px}
  .float-badge.badge-2{left:8px}
}
@media(max-width:600px){
  .hero-cta .btn{flex:1 1 100%}
  .hero-sub{font-size:15px}
  .hero-visual-card img{height:210px}
}

/* ---------- Stats ---------- */
.stats-band{
  position:relative;z-index:5;margin-top:-30px;padding-bottom:12px;
}
.stats-inner{
  background:#fff;border-radius:26px;border:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.stat-item{
  padding:32px 24px;text-align:center;position:relative;
}
.stat-item + .stat-item::before{content:"";position:absolute;left:0;top:26%;height:48%;width:1px;background:var(--line)}
.stat-num{
  font-size:clamp(30px,3.2vw,42px);font-weight:700;line-height:1.2;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-unit{font-size:15px;font-weight:600;color:var(--ink)}
.stat-label{font-size:13px;color:var(--text-light);margin-top:4px}
.stat-item:nth-child(2) .stat-num{background:linear-gradient(135deg,var(--secondary),#FD9D6B);-webkit-background-clip:text;background-clip:text}
.stat-item:nth-child(3) .stat-num{background:linear-gradient(135deg,var(--cyan),var(--primary));-webkit-background-clip:text;background-clip:text}
.stat-item:nth-child(4) .stat-num{background:linear-gradient(135deg,#2E9E62,#8BD8B0);-webkit-background-clip:text;background-clip:text}
@media(max-width:900px){
  .stats-inner{grid-template-columns:repeat(2,1fr);gap:0}
  .stat-item:nth-child(3)::before{display:none}
  .stat-item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:520px){
  .stats-inner{grid-template-columns:1fr 1fr}
  .stat-item{padding:24px 12px}
  .stat-num{font-size:28px}
}

/* ---------- Section heads ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--primary);letter-spacing:2px;margin-bottom:10px;
}
.eyebrow::before{content:"";width:20px;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:2px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:44px;flex-wrap:wrap}
.section-title{font-size:clamp(27px,3vw,38px);font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:.5px}
.section-title span{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.more-link{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;
  font-weight:600;color:var(--primary);background:#F0EBFF;
  border-radius:999px;padding:10px 18px;border:1px solid transparent;
}
.more-link:hover{background:#E6DEFF;border-color:#C9BDF8;color:var(--primary)}
.more-link i{transition:transform .25s ease}
.more-link:hover i{transform:translateX(4px)}

/* ---------- Featured magazine grid ---------- */
.featured-grid{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:1fr 1fr;gap:24px}
.fcard{
  background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow-card);transition:var(--transition);display:flex;flex-direction:column;
}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.fcard-media{position:relative;overflow:hidden;background:#F0EBFF}
.fcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.fcard:hover .fcard-media img{transform:scale(1.05)}
.fcard-main{
  display:grid;grid-template-columns:1fr .98fr;grid-row:span 2;
}
.fcard-main .fcard-media{height:100%;min-height:420px}
.fcard-body{padding:26px 24px;display:flex;flex-direction:column;flex:1}
.fcard-side .fcard-media{height:190px}
.card-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;
  font-size:12px;font-weight:600;background:rgba(108,76,241,.1);color:var(--primary);
}
.pill.cyan{background:rgba(25,183,198,.12);color:#1299A6}
.pill.pink{background:rgba(242,86,122,.12);color:var(--secondary)}
.card-date{font-size:12px;color:var(--text-light)}
.fcard h3{
  font-size:20px;line-height:1.45;font-weight:700;color:var(--ink);
  margin:10px 0 12px;letter-spacing:.3px;
}
.fcard-main h3{font-size:25px;line-height:1.4}
.fcard-desc{font-size:14px;color:var(--text);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fcard-side .fcard-desc{-webkit-line-clamp:2;margin-bottom:8px}
.fcard-bottom{
  margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;
  align-items:center;
}
.text-link{font-size:14px;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:6px}
.text-link i{transition:transform .25s}
.text-link:hover i{transform:translateX(4px)}
.hot-val{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-light)}
.hot-val i{color:#FF9F43}
@media(max-width:940px){
  .featured-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .fcard-main{grid-template-columns:1fr;grid-row:auto}
  .fcard-main .fcard-media{min-height:260px;height:auto}
}
@media(max-width:600px){
  .featured-grid{grid-template-columns:1fr}
  .fcard-side .fcard-media{height:180px}
}

/* ---------- Latest list ---------- */
.latest-wrap{
  display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start;
}
.latest-panel{
  background:#fff;border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--shadow-card);padding:12px 22px;
}
.latest-item{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:20px 14px 20px 18px;border-radius:14px;transition:background .25s ease,border-color .25s ease;
}
.latest-item::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:4px;
  background:linear-gradient(var(--primary),var(--secondary));
  border-radius:4px;opacity:0;transform:scaleY(.4);transition:var(--transition);
}
.latest-item:hover{background:#F9F7FF}
.latest-item:hover::before{opacity:1;transform:scaleY(1)}
.latest-item + .latest-item{border-top:1px solid #F1EDFF}
.latest-main-content{flex:1;min-width:240px}
.latest-meta-info{display:flex;align-items:center;gap:12px;margin-bottom:7px;flex-wrap:wrap}
.latest-main-content h3{
  font-size:17px;font-weight:700;color:var(--ink);line-height:1.5;
  margin-bottom:4px;letter-spacing:.3px;
}
.latest-item:hover h3{background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.latest-snippet{font-size:14px;color:var(--text-light);line-height:1.7}
.latest-foot{
  display:flex;align-items:center;gap:22px;margin-top:0;font-size:13px;color:#8D86B5;
}
.latest-idx{
  width:34px;height:34px;border-radius:10px;background:#F4F1FF;
  display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--primary);
}
.latest-arrow{
  width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--primary);font-size:13px;transition:var(--transition);
  flex-shrink:0;
}
.latest-item:hover .latest-arrow{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateX(3px)}
.latest-empty{
  padding:90px 24px;text-align:center;color:var(--text-light);font-size:15px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.latest-empty .empty-icon{width:60px;height:60px;border-radius:50%;background:#F0EBFF;color:var(--primary);display:grid;place-items:center;font-size:24px}
.latest-empty p{color:var(--text-light);font-size:15px}
.side-panel{
  display:flex;flex-direction:column;gap:22px;position:sticky;top:96px;
}
.side-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-card)}
.side-card h3{
  font-size:16px;font-weight:700;color:var(--ink);margin-bottom:16px;letter-spacing:.4px;
  display:flex;align-items:center;gap:8px;
}
.side-card h3 i{color:var(--secondary)}
.side-list li{margin-bottom:12px}
.side-list a{
  display:flex;gap:12px;align-items:center;color:var(--text);padding:8px;
  border-radius:12px;transition:background .25s ease;
}
.side-list a:hover{background:#F8F6FF;color:var(--primary)}
.side-list-img{width:72px;height:50px;border-radius:8px;object-fit:cover;background:#E9E3FF;flex-shrink:0}
.side-list-title{font-size:14px;line-height:1.5;color:inherit;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.side-list-date{font-size:12px;color:var(--text-light);margin-top:4px}
.side-tags{display:flex;flex-wrap:wrap;gap:8px}
.side-tags a{
  font-size:13px;padding:6px 12px;border-radius:999px;background:#F4F1FF;
  color:var(--primary);border:1px solid transparent;
}
.side-tags a:hover{background:#fff;border-color:var(--primary)}
@media(max-width:960px){
  .latest-wrap{grid-template-columns:1fr}
  .side-panel{position:static;grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .side-panel{grid-template-columns:1fr}
  .latest-panel{padding:8px 8px}
  .latest-item{gap:10px;padding:18px 8px 18px 14px}
  .latest-idx{display:none}
  .latest-foot{gap:14px}
  .latest-arrow{display:none}
}

/* ---------- Promo zones ---------- */
.promo-section{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.promo-card{
  min-height:220px;border-radius:24px;position:relative;overflow:hidden;color:#fff;
  display:flex;align-items:flex-end;background-size:cover;background-position:center;
  box-shadow:var(--shadow-card);transition:var(--transition);
}
.promo-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.promo-overlay{
  position:absolute;inset:0;background:linear-gradient(120deg,rgba(40,20,90,.58),rgba(108,76,241,.16) 70%,rgba(25,183,198,.3));
}
.promo-tint-2 .promo-overlay{background:linear-gradient(120deg,rgba(82,12,50,.6),rgba(242,86,122,.22) 70%)}
.promo-content{position:relative;z-index:2;padding:34px 28px;width:100%}
.promo-content h3{font-size:24px;font-weight:700;margin-bottom:8px;line-height:1.35}
.promo-content p{font-size:14px;opacity:.9;line-height:1.7;max-width:420px;margin-bottom:14px}
.promo-link{
  display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;
}
.promo-link:hover{color:#FFD9E3;border-color:#FFD9E3}
@media(max-width:800px){
  .promo-grid{grid-template-columns:1fr}
}

/* ---------- FAQ ---------- */
.faq-section{background:linear-gradient(180deg,#EFEAFF 0%,var(--bg) 100%)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.faq-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:8px 24px;transition:box-shadow .3s ease;
}
.faq-card:hover{box-shadow:var(--shadow-card)}
details.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:18px 0;font-size:16px;font-weight:600;color:var(--ink);
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary .faq-q{
  display:inline-flex;align-items:center;gap:12px;
}
details.faq-item summary .faq-q i{color:var(--primary);font-size:13px;background:rgba(108,76,241,.1);border-radius:8px;width:26px;height:26px;display:grid;place-items:center;flex-shrink:0}
.faq-icon{
  width:24px;height:24px;border-radius:50%;background:#F0EBFF;color:var(--primary);
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
  transition:transform .25s ease;
}
details[open] .faq-icon{transform:rotate(45deg)}
.faq-answer{
  padding:0 6px 22px 38px;color:var(--text);font-size:15px;line-height:1.9;
}
@media(max-width:800px){
  .faq-grid{grid-template-columns:1fr}
}

/* ---------- CTA band ---------- */
.cta-section{background:#fff;padding-bottom:clamp(80px,8vw,110px)}
.cta-band{
  border-radius:32px;position:relative;overflow:hidden;
  background:linear-gradient(130deg,#4E2FAD 0%,var(--primary) 44%,var(--secondary) 125%);
  padding:clamp(38px,5vw,56px) clamp(24px,4vw,54px);
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  color:#fff;box-shadow:0 20px 48px rgba(108,76,241,.35);
}
.cta-band::before{
  content:"";position:absolute;right:-40px;top:-60px;width:260px;height:260px;
  border-radius:50%;border:34px solid rgba(255,255,255,.11);
}
.cta-band::after{
  content:"";position:absolute;right:120px;bottom:-90px;width:190px;height:190px;
  border-radius:50%;background:rgba(25,183,198,.18);
}
.cta-copy{position:relative;z-index:2;max-width:680px}
.cta-copy h2{
  font-size:clamp(23px,2.6vw,32px);font-weight:700;line-height:1.4;margin-bottom:10px;letter-spacing:.5px;
}
.cta-copy p{color:rgba(255,255,255,.87);font-size:16px}
.cta-btn{position:relative;z-index:2;flex-shrink:0}
@media(max-width:700px){
  .cta-band{flex-direction:column;align-items:flex-start}
}

/* ---------- Footer ---------- */
.site-footer{background:#17122F;color:#B8B0D9;font-size:14px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding:64px 0 40px}
.footer-brand .brand-text{color:#fff;font-size:19px}
.footer-brand p{font-size:14px;line-height:1.9;color:#948BBD;margin-top:18px;max-width:300px}
.social-row{display:flex;gap:10px;margin-top:22px}
.social-btn{
  width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.07);
  display:inline-flex;align-items:center;justify-content:center;color:#D9D3F0;
  font-size:15px;transition:var(--transition);
}
.social-btn:hover{background:var(--primary);color:#fff;transform:translateY(-3px)}
.footer-title{font-size:16px;font-weight:600;color:#fff;margin-bottom:20px;letter-spacing:.4px}
.footer-links li{margin-bottom:12px}
.footer-links a{color:#948BBD;font-size:14px;transition:color .2s ease}
.footer-links a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:24px 0 28px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font-size:13px;color:#7D75A5;
}
.footer-bottom a{color:#A79DD0}
.footer-bottom a:hover{color:#fff}
.footer-wave{margin-bottom:-1px}
.footer-wave svg{display:block;width:100%;height:40px}
@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr;padding-top:48px}
  .footer-bottom{flex-direction:column}
}
.back-to-top{
  position:fixed;right:24px;bottom:30px;z-index:99;width:44px;height:44px;
  border-radius:50%;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 10px 22px rgba(108,76,241,.35);font-size:15px;
  transition:var(--transition);display:grid;place-items:center;
}
.back-to-top:hover{transform:translateY(-4px)}
.back-to-top:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* roulang page: category1 */
:root {
      --primary: #6C4CF1;
      --primary-600: #5b39d8;
      --primary-soft: rgba(108, 76, 241, 0.1);
      --secondary: #F2567A;
      --cyan: #19B7C6;
      --bg: #F7F5FF;
      --ink: #1E1733;
      --text: #4F4780;
      --line: #E9E3FF;
      --white: #ffffff;
      --radius-card: 22px;
      --radius-btn: 999px;
      --shadow-1: 0 2px 8px rgba(30, 23, 51, 0.04), 0 12px 32px rgba(30, 23, 51, 0.08);
      --shadow-hover: 0 8px 16px rgba(30, 23, 51, 0.08), 0 24px 48px rgba(30, 23, 51, 0.12);
      --space-section: clamp(72px, 8vw, 104px);
      --font-family: "PingFang SC", "Microsoft YaHei", "HarmonicOS Sans", "Helvetica Neue", Arial, sans-serif;
    }
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    html {
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      font-family: var(--font-family);
      background: var(--bg);
      color: var(--text);
      line-height: 1.8;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    }
    a {
      color: var(--primary);
      text-decoration: none;
      transition: color 0.25s ease;
    }
    a:hover {
      color: var(--secondary);
    }
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    input,
    button {
      font-family: inherit;
    }
    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding-left: clamp(20px, 5vw, 32px);
      padding-right: clamp(20px, 5vw, 32px);
    }
    .section {
      padding-top: var(--space-section);
      padding-bottom: var(--space-section);
    }
    .section-sm {
      padding-top: clamp(44px, 5vw, 64px);
      padding-bottom: clamp(44px, 5vw, 64px);
    }
    .text-center {
      text-align: center;
    }
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 28px;
      border-radius: var(--radius-btn);
      font-size: 16px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
      text-decoration: none;
      line-height: 1.2;
      white-space: nowrap;
    }
    .btn:focus-visible,
    .social-btn:focus-visible,
    .faq-trigger:focus-visible,
    .primary-nav a:focus-visible,
    a:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: #fff;
      box-shadow: 0 8px 20px rgba(108, 76, 241, 0.35);
    }
    .btn-primary:hover {
      color: #fff;
      background: linear-gradient(135deg, #5f3de0, #f04872);
      box-shadow: 0 12px 26px rgba(108, 76, 241, 0.46);
      transform: translateY(-2px);
    }
    .btn-primary:active {
      transform: scale(0.98);
    }
    .btn-secondary {
      background: #fff;
      color: var(--primary);
      border: 1px solid rgba(108, 76, 241, 0.22);
      box-shadow: 0 4px 14px rgba(30, 23, 51, 0.04);
    }
    .btn-secondary:hover {
      background: rgba(108, 76, 241, 0.06);
      color: var(--primary-600);
      border-color: rgba(108, 76, 241, 0.4);
      transform: translateY(-2px);
    }
    .btn-secondary:active {
      transform: scale(0.98);
    }
    .btn-white {
      background: #fff;
      color: var(--primary);
    }
    .btn-white:hover {
      background: #f7f3ff;
      color: var(--primary-600);
      transform: translateY(-2px);
    }
    .btn-lg {
      min-height: 54px;
      padding: 0 36px;
      font-size: 17px;
    }
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100%;
      height: 72px;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(233, 227, 255, 0.7);
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .site-header.scrolled {
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 8px 24px rgba(30, 23, 51, 0.06);
    }
    .nav-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      height: 72px;
    }
    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .brand-logo .logo-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: #fff;
      font-size: 18px;
      box-shadow: 0 4px 14px rgba(108, 76, 241, 0.3);
    }
    .brand-logo .brand-text {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: 0.02em;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .primary-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0 auto;
      flex-wrap: nowrap;
    }
    .primary-nav a {
      display: inline-block;
      padding: 9px 14px;
      font-size: 15px;
      font-weight: 500;
      color: var(--text);
      border-radius: 999px;
      position: relative;
      white-space: nowrap;
    }
    .primary-nav a::after {
      content: "";
      position: absolute;
      left: 15px;
      right: 15px;
      bottom: -3px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.3s ease;
    }
    .primary-nav a:hover {
      color: var(--primary);
      background: rgba(108, 76, 241, 0.05);
    }
    .primary-nav a:hover::after,
    .primary-nav a.active::after {
      transform: scaleX(1);
    }
    .primary-nav a.active {
      color: var(--primary);
      background: rgba(108, 76, 241, 0.06);
      font-weight: 600;
    }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .search-box {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 190px;
      height: 40px;
      padding: 0 10px 0 14px;
      background: #f2eefa;
      border: 1px solid transparent;
      border-radius: 999px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }
    .search-box:focus-within {
      background: #fff;
      border-color: rgba(108, 76, 241, 0.4);
      box-shadow: 0 0 0 3px rgba(108, 76, 241, 0.12);
    }
    .search-box i {
      color: #8b84b0;
      font-size: 14px;
      flex-shrink: 0;
    }
    .search-box input {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      font-size: 14px;
      color: var(--ink);
      outline: none;
    }
    .search-box input::placeholder {
      color: #aaa0c9;
      font-size: 13px;
    }
    .search-box .search-kbd {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 24px;
      padding: 0 6px;
      background: #fff;
      border: 1px solid #e6e0fa;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #7b72a6;
      letter-spacing: 0.05em;
      flex-shrink: 0;
    }
    .nav-toggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      padding: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
    }
    .nav-toggle span {
      width: 100%;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .nav-toggle.is-open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle.is-open span:nth-child(2) {
      opacity: 0;
    }
    .nav-toggle.is-open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
    .category-hero {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 320px;
      margin-top: 72px;
      padding: 48px 0 56px;
      overflow: hidden;
      background: linear-gradient(120deg, #6C4CF1 0%, #8B5CF6 44%, #F2567A 120%);
    }
    .category-hero .bg-image {
      position: absolute;
      inset: 0;
      background-image: url('/assets/images/backpic/back-2.webp');
      background-size: cover;
      background-position: center 30%;
      opacity: 0.18;
      z-index: 0;
    }
    .category-hero::before {
      content: "";
      position: absolute;
      top: -120px;
      right: -80px;
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, transparent 70%);
      z-index: 1;
    }
    .category-hero::after {
      content: "";
      position: absolute;
      left: 20%;
      bottom: -100px;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(25, 183, 198, 0.26) 0%, transparent 70%);
      z-index: 1;
    }
    .category-hero-inner {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 50px;
      width: 100%;
    }
    .category-hero-content {
      flex: 0 0 58%;
      color: #fff;
    }
    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      padding: 5px 14px;
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: #fff;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .category-hero-content h1 {
      margin: 0 0 10px;
      font-size: clamp(34px, 4vw, 48px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.01em;
      color: #fff;
    }
    .category-hero-content .lead {
      max-width: 560px;
      margin: 0 0 22px;
      font-size: 17px;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.94);
    }
    .category-hero-content .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 18px;
    }
    .category-hero-content .btn-primary,
    .category-hero-content .btn-secondary {
      background: #fff;
      color: var(--primary);
      border: none;
    }
    .category-hero-content .btn-primary:hover,
    .category-hero-content .btn-secondary:hover {
      background: #f8f5ff;
      color: var(--primary-600);
      transform: translateY(-2px);
    }
    .hero-badge-line {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.95);
    }
    .status-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #27e29a;
      box-shadow: 0 0 0 4px rgba(46, 158, 98, 0.28);
    }
    .category-hero-art {
      position: relative;
      flex: 0 0 32%;
      max-width: 340px;
    }
    .category-hero-art img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 28px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      box-shadow: 0 18px 44px rgba(30, 23, 51, 0.26);
    }
    .hero-art-badge {
      position: absolute;
      bottom: -14px;
      left: -34px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 14px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 8px 22px rgba(30, 23, 51, 0.12);
    }
    .section-header {
      margin-bottom: clamp(30px, 4vw, 52px);
      text-align: center;
    }
    .section-header h2 {
      margin: 0 0 8px;
      font-size: clamp(26px, 3vw, 36px);
      font-weight: 700;
      color: var(--ink);
      line-height: 1.35;
      letter-spacing: 0.01em;
    }
    .section-header .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: var(--primary);
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.03em;
    }
    .section-header p {
      max-width: 680px;
      margin: 0 auto;
      font-size: 16px;
      line-height: 1.8;
      color: var(--text);
    }
    .section-header.left {
      text-align: left;
    }
    .section-header.left p {
      margin-left: 0;
    }
    .cat-intro-card {
      background: #fff;
      border: 1px solid rgba(108, 76, 241, 0.08);
      border-radius: 26px;
      box-shadow: var(--shadow-1);
      overflow: hidden;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      display: flex;
      align-items: stretch;
      margin-bottom: 28px;
    }
    .cat-intro-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-4px);
    }
    .cat-intro-card .intro-media {
      flex: 0 0 44%;
      min-height: 260px;
      overflow: hidden;
      position: relative;
    }
    .cat-intro-card .intro-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
      transition: transform 0.5s ease;
    }
    .cat-intro-card:hover .intro-media img {
      transform: scale(1.03);
    }
    .cat-intro-card .intro-body {
      flex: 1;
      padding: clamp(26px, 4vw, 44px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .cat-intro-card .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      margin-bottom: 10px;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      background: rgba(108, 76, 241, 0.1);
      color: var(--primary);
    }
    .cat-intro-card h3 {
      margin: 0 0 12px;
      font-size: clamp(22px, 2.4vw, 28px);
      font-weight: 700;
      color: var(--ink);
      line-height: 1.4;
    }
    .cat-intro-card p {
      margin: 0 0 16px;
      line-height: 1.9;
      color: var(--text);
      font-size: 16px;
    }
    .cat-intro-card .card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
      color: var(--primary);
    }
    .cat-intro-card .card-link i {
      transition: transform 0.25s ease;
    }
    .cat-intro-card .card-link:hover i {
      transform: translateX(4px);
    }
    .reverse-row .intro-media {
      order: 2;
    }
    .quote-strip {
      position: relative;
      padding: 30px 34px;
      border-radius: 22px;
      background: linear-gradient(120deg, rgba(108, 76, 241, 0.08), rgba(25, 183, 198, 0.06));
      border-left: 4px solid var(--primary);
      margin: 22px 0;
    }
    .quote-strip p {
      margin: 0 0 8px;
      font-size: 17px;
      line-height: 1.9;
      color: var(--ink);
      font-weight: 500;
    }
    .quote-strip .quote-source {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: #847bb0;
      font-weight: 600;
    }
    .quote-strip .quote-source i {
      color: var(--secondary);
    }
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .feature-item {
      background: #fff;
      padding: 30px 26px 28px;
      border-radius: 22px;
      border: 1px solid rgba(108, 76, 241, 0.08);
      box-shadow: var(--shadow-1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .feature-item:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }
    .feature-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      margin-bottom: 16px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(108, 76, 241, 0.14), rgba(242, 86, 122, 0.1));
      color: var(--primary);
      font-size: 20px;
    }
    .feature-item h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
    }
    .feature-item p {
      margin: 0;
      font-size: 14px;
      line-height: 1.75;
      color: var(--text);
    }
    .step-section {
      background: #fff;
      border-radius: 32px;
      overflow: hidden;
      box-shadow: var(--shadow-1);
    }
    .step-section .step-inner {
      padding: clamp(30px, 4vw, 48px);
    }
    .step-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      counter-reset: step-counter;
    }
    .step-item {
      counter-increment: step-counter;
      position: relative;
      padding: 28px 22px 24px;
      border-radius: 20px;
      background: rgba(247, 245, 255, 0.72);
      border: 1px solid var(--line);
    }
    .step-item::before {
      content: counter(step-counter);
      position: absolute;
      top: -16px;
      left: 24px;
      min-width: 34px;
      height: 34px;
      padding: 0 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(108, 76, 241, 0.3);
    }
    .step-item h3 {
      margin: 8px 0 8px;
      font-size: 17px;
      font-weight: 700;
      color: var(--ink);
    }
    .step-item p {
      margin: 0;
      font-size: 14px;
      color: var(--text);
      line-height: 1.75;
    }
    .featured-layout {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      grid-auto-rows: minmax(160px, auto);
      gap: 22px;
    }
    .featured-card {
      position: relative;
      display: flex;
      align-items: flex-end;
      border-radius: 24px;
      overflow: hidden;
      padding: 28px;
      background: #1e1733;
      min-height: 230px;
      border: none;
      color: #fff;
      text-decoration: none;
      box-shadow: var(--shadow-1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .featured-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      color: #fff;
    }
    .featured-card > .featured-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0.52;
      transition: opacity 0.3s ease, transform 0.5s ease;
    }
    .featured-card:hover > .featured-bg {
      opacity: 0.63;
      transform: scale(1.04);
    }
    .featured-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(30, 23, 51, 0) 25%, rgba(30, 23, 51, 0.82) 100%);
    }
    .featured-content {
      position: relative;
      z-index: 2;
    }
    .featured-card .fc-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
      padding: 4px 12px;
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.32);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      backdrop-filter: blur(4px);
    }
    .featured-card h3 {
      margin: 0 0 6px;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.4;
    }
    .featured-card p {
      margin: 0;
      max-width: 460px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.75;
    }
    .featured-card.wide {
      min-height: 250px;
    }
    .featured-card.wide h3 {
      font-size: 24px;
    }
    .featured-col {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .featured-col .featured-card {
      flex: 1;
      min-height: 120px;
    }
    .faq-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 42px;
      align-items: flex-start;
    }
    .faq-panel {
      background: #fff;
      border: 1px solid rgba(108, 76, 241, 0.08);
      border-radius: 24px;
      box-shadow: var(--shadow-1);
      overflow: hidden;
    }
    .faq-item {
      border-bottom: 1px solid var(--line);
    }
    .faq-item:last-child {
      border-bottom: none;
    }
    .faq-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      width: 100%;
      padding: 20px 24px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.5;
      transition: background 0.2s ease;
    }
    .faq-trigger:hover {
      background: rgba(108, 76, 241, 0.04);
    }
    .faq-trigger .faq-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(108, 76, 241, 0.1);
      color: var(--primary);
      font-size: 15px;
      font-weight: 400;
      transition: transform 0.3s ease, background 0.3s ease;
    }
    .faq-item.is-open .faq-trigger {
      background: rgba(108, 76, 241, 0.03);
    }
    .faq-item.is-open .faq-icon {
      transform: rotate(45deg);
      background: var(--primary);
      color: #fff;
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .faq-answer .answer-inner {
      padding: 0 24px 24px;
      font-size: 15px;
      line-height: 1.9;
      color: var(--text);
    }
    .cta-band {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      flex-wrap: wrap;
      padding: clamp(32px, 5vw, 60px);
      border-radius: 30px;
      background: linear-gradient(120deg, var(--primary) 0%, #8d5cff 50%, var(--secondary) 110%);
      color: #fff;
      overflow: hidden;
      box-shadow: 0 16px 36px rgba(108, 76, 241, 0.36);
    }
    .cta-band::before {
      content: "";
      position: absolute;
      top: -80px;
      left: 8%;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      z-index: 0;
    }
    .cta-band::after {
      content: "";
      position: absolute;
      right: -60px;
      bottom: -90px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: rgba(25, 183, 198, 0.22);
      z-index: 0;
    }
    .cta-content {
      position: relative;
      z-index: 2;
    }
    .cta-content h2 {
      margin: 0 0 6px;
      font-size: clamp(24px, 3vw, 34px);
      font-weight: 700;
      color: #fff;
      line-height: 1.4;
    }
    .cta-content p {
      margin: 0;
      color: rgba(255, 255, 255, 0.9);
      font-size: 16px;
    }
    .cta-actions {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .site-footer {
      position: relative;
      margin-top: 90px;
      padding-top: 0;
      background: linear-gradient(145deg, #17122f, #221b45);
      color: #aaa1cf;
      overflow: hidden;
    }
    .footer-wave svg {
      display: block;
      width: 100%;
      height: 40px;
      margin-bottom: -1px;
    }
    .footer-wave path {
      fill: #17122f;
    }
    .site-footer .container {
      position: relative;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      padding: 44px 0 36px;
    }
    .footer-brand .brand-logo .brand-text {
      color: #fff;
      background: none;
      -webkit-text-fill-color: #fff;
    }
    .footer-brand .logo-mark {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: #fff;
    }
    .footer-brand p {
      max-width: 300px;
      margin: 14px 0 16px;
      font-size: 14px;
      line-height: 1.8;
      color: #9e94c8;
    }
    .social-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.08);
      color: #cfc7ee;
      font-size: 14px;
      transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    .social-btn:hover {
      background: var(--primary);
      color: #fff;
      transform: translateY(-2px);
    }
    .footer-title {
      margin: 0 0 14px;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
    }
    .footer-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .footer-links a {
      display: inline-block;
      font-size: 14px;
      color: #9e94c8;
      line-height: 1.5;
      transition: color 0.2s ease, transform 0.2s ease;
    }
    .footer-links a:hover {
      color: #fff;
      transform: translateX(3px);
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding: 20px 0 26px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      font-size: 13px;
      color: #746b9d;
    }
    .breadcrumb-bar {
      background: #fff;
      border-bottom: 1px solid var(--line);
      padding: 90px 0 0;
    }
    .breadcrumb-bar .breadcrumb-inner {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 13px;
      padding: 14px 0;
      color: #9a92be;
    }
    .breadcrumb-bar a {
      color: var(--primary);
    }
    .breadcrumb-bar a:hover {
      color: var(--secondary);
    }
    .breadcrumb-bar .sep {
      color: #c8bfe4;
    }
    .breadcrumb-bar .current {
      color: #4b427f;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 280px;
    }
    .back-to-top {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 50;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      border: none;
      box-shadow: 0 8px 18px rgba(108, 76, 241, 0.32);
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
      opacity: 0;
      pointer-events: none;
    }
    .back-to-top.show {
      opacity: 1;
      pointer-events: auto;
    }
    .back-to-top:hover {
      background: var(--primary-600);
      transform: translateY(-3px);
    }
    @media screen and (max-width: 1100px) {
      .search-box {
        width: 150px;
      }
      .primary-nav a {
        padding: 9px 9px;
        font-size: 14px;
      }
      .cat-intro-card {
        flex-direction: column;
      }
      .cat-intro-card .intro-media {
        flex-basis: auto;
        min-height: 220px;
      }
      .cat-intro-card .intro-media img {
        position: static;
        height: 220px;
      }
      .reverse-row .intro-media {
        order: 0;
      }
    }
    @media screen and (max-width: 1024px) {
      .primary-nav {
        gap: 4px;
      }
      .faq-wrap {
        grid-template-columns: 1fr;
      }
    }
    @media screen and (max-width: 900px) {
      .site-header {
        height: 64px;
      }
      .nav-container {
        height: 64px;
      }
      .nav-toggle {
        display: flex;
      }
      .primary-nav {
        position: fixed;
        top: 64px;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 14px 28px rgba(30, 23, 51, 0.08);
        flex-direction: column;
        align-items: flex-start;
        padding: 0 24px;
        transition: max-height 0.4s ease, padding 0.4s ease;
        z-index: 99;
      }
      .primary-nav.nav-open {
        max-height: 360px;
        padding: 14px 24px 22px;
      }
      .primary-nav a {
        width: 100%;
        padding: 12px 8px;
        border-radius: 10px;
      }
      .primary-nav a::after {
        left: 8px;
        right: auto;
        width: 0;
        height: 100%;
        border-radius: 0;
        right: auto;
        bottom: auto;
        left: 0;
        top: 0;
        transform: scaleY(0);
        transform-origin: left;
        border-radius: 10px;
        background: rgba(108, 76, 241, 0.06);
        transition: transform 0.3s ease;
      }
      .primary-nav a.active::after,
      .primary-nav a:hover::after {
        transform: scaleY(1);
      }
      .primary-nav a.active,
      .primary-nav a:hover {
        background: rgba(108, 76, 241, 0.06);
      }
      .nav-actions .search-box {
        width: 42px;
      }
      .nav-actions .search-box input,
      .nav-actions .search-box .search-kbd {
        display: none;
      }
      .nav-actions .search-box {
        justify-content: center;
        padding: 0;
      }
      .nav-actions .btn {
        padding: 0 17px;
        min-height: 40px;
        font-size: 14px;
      }
      .category-hero-inner {
        flex-direction: column;
        gap: 24px;
      }
      .category-hero-content {
        flex-basis: auto;
      }
      .category-hero-art {
        max-width: 480px;
        width: 100%;
        flex-basis: auto;
      }
      .category-hero {
        padding-bottom: 64px;
      }
      .hero-art-badge {
        left: 12px;
      }
      .feature-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .step-list {
        grid-template-columns: 1fr;
        gap: 22px;
      }
      .step-item {
        padding-top: 24px;
      }
      .step-item::before {
        top: -14px;
        left: 18px;
      }
      .featured-layout {
        grid-template-columns: 1fr;
      }
      .featured-col {
        flex-direction: row;
      }
      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }
      .cta-band {
        border-radius: 24px;
      }
    }
    @media screen and (max-width: 640px) {
      body {
        font-size: 15px;
      }
      .brand-logo .brand-text {
        font-size: 16px;
      }
      .brand-logo .logo-mark {
        width: 34px;
        height: 34px;
        font-size: 16px;
      }
      .nav-actions .btn {
        width: 40px;
        padding: 0;
        font-size: 0;
      }
      .nav-actions .btn::before {
        content: "\f11b";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 14px;
      }
      .feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .feature-item {
        padding: 24px 20px 22px;
      }
      .feature-item h3 {
        font-size: 16px;
      }
      .cat-intro-card .intro-body {
        padding: 24px 20px;
      }
      .cta-actions {
        width: 100%;
      }
      .cta-actions .btn {
        flex: 1;
      }
      .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
    }
    @media screen and (max-width: 480px) {
      .feature-grid {
        grid-template-columns: 1fr;
      }
      .category-hero .lead {
        font-size: 15px;
      }
      .category-hero-content h1 {
        font-size: 30px;
      }
      .cat-intro-card .intro-body {
        padding: 20px 16px;
      }
      .category-hero-inner {
        gap: 18px;
      }
      .section-header h2 {
        font-size: 24px;
      }
      .step-list {
        grid-template-columns: 1fr;
      }
    }

/* roulang page: article */
:root {
  --primary: #6C4CF1;
  --primary-deep: #5A3CE0;
  --pink: #F2567A;
  --cyan: #19B7C6;
  --success: #2E9E62;
  --ink: #1E1733;
  --text: #4F4780;
  --text-soft: #857CB0;
  --bg: #F7F5FF;
  --card: #FFFFFF;
  --line: #EAE3FF;
  --line-deep: #DCD1FF;
  --footer-bg: #17122F;
  --footer-deep: #241C4F;
  --radius-card: 24px;
  --radius-md: 16px;
  --radius-btn: 999px;
  --shadow-xs: 0 2px 8px rgba(30,23,51,.04);
  --shadow-md: 0 8px 20px rgba(30,23,51,.06);
  --shadow-lg: 0 20px 48px rgba(30,23,51,.12);
  --grad-main: linear-gradient(135deg, #6C4CF1, #F2567A);
  --grad-cyan: linear-gradient(135deg, #19B7C6, #6C4CF1);
  --grad-soft: linear-gradient(135deg, #EFE8FF, #FFF0F6 60%, #FFF6EC);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "HarmonicOS Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: inline-block; }
a { color: var(--primary); text-decoration: none; transition: color .25s ease, background-color .25s ease, border-color .25s ease, opacity .25s ease, transform .25s ease, box-shadow .25s ease; }
a:hover { color: var(--pink); }
button, input { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: clamp(20px, 4vw, 32px); padding-right: clamp(20px, 4vw, 32px); }
.main-wrap { padding-top: 76px; }

/* ===== Header / Command Nav ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; z-index: 1000;
  width: 100%;
  height: 72px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(223, 214, 255, .75);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 72px;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-logo:hover { color: var(--ink); }
.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--grad-main);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  box-shadow: 0 6px 14px rgba(108, 76, 241, .35);
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav a {
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  white-space: nowrap;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: 6px;
  height: 3px;
  border-radius: 4px;
  background: var(--grad-main);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.primary-nav a:hover { color: var(--primary); background: rgba(108,76,241,.06); }
.primary-nav a:hover::after { transform: scaleX(.8); }
.primary-nav a.active { color: var(--primary); font-weight: 600; }
.primary-nav a.active::after { transform: scaleX(1); }
.header-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header-search {
  position: relative;
  display: flex;
  align-items: center;
}
.header-search .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 180px;
  height: 40px;
  padding: 0 12px;
  background: #F5F2FF;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  color: var(--text-soft);
  transition: all .25s ease;
}
.header-search .search-box:hover, .header-search .search-box:focus-within {
  border-color: rgba(108, 76, 241, .35);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(108,76,241,.07);
}
.header-search input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--ink);
}
.header-search input::placeholder { color: #A39ACB; }
.header-search .fa-magnifying-glass { color: #8F84C8; font-size: 15px; }
.search-kbd {
  flex-shrink: 0;
  display: inline-block;
  padding: 0 7px;
  height: 22px;
  line-height: 22px;
  font-size: 11px;
  font-family: inherit;
  color: #8F84C8;
  background: #fff;
  border: 1px solid var(--line-deep);
  border-radius: 6px;
}
.quick-icons { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all .2s ease;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); background: #F6F2FF; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-btn);
  background: var(--grad-main);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  box-shadow: 0 8px 18px rgba(108,76,241,.28);
  transition: all .22s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(242,86,122,.3); }
.btn-primary:active { transform: scale(.98); }
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 4px; transition: all .2s ease; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Breadcrumb / Article Hero ===== */
.article-hero {
  position: relative;
  background:
    radial-gradient(circle at 18% 30%, rgba(108,76,241,.16), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(242,86,122,.14), transparent 28%),
    linear-gradient(135deg, #F1ECFF 0%, #FFFFFF 55%, #FFECF4 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .65);
}
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
  opacity: .16;
  pointer-events: none;
}
.article-hero .breadcrumb-area {
  position: relative;
  z-index: 2;
  padding: 34px 0 4px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--text-soft);
}
.breadcrumb a { color: var(--primary); }
.breadcrumb a:hover { color: var(--pink); }
.breadcrumb i.fa-solid { font-size: 10px; color: #B6ACDD; }
.crumb-current {
  color: var(--ink);
  font-weight: 500;
  display: inline-block;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-hero-inner {
  position: relative;
  z-index: 3;
  padding: 46px 0 64px;
}

/* ===== Article Main Area ===== */
.article-layout-section {
  position: relative;
  z-index: 4;
  margin-top: -48px;
  padding-bottom: 20px;
}
.article-card-head {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 30px;
  padding: clamp(28px, 4vw, 46px);
  box-shadow: var(--shadow-lg);
  margin-top: 0;
}
.article-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 5px 14px;
  background: rgba(108,76,241,.1);
  color: var(--primary);
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 600;
}
.article-eyebrow i { font-size: 12px; }
.article-title {
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.34;
  letter-spacing: .5px;
  color: var(--ink);
  margin: 0 0 20px;
  font-weight: 700;
}
.article-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-size: 14px;
  color: var(--text-soft);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.main-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px;
  background: var(--grad-main);
  color: #fff;
  font-size: 13px;
  border-radius: 6px;
}
.meta-item { display: inline-flex; align-items: center; gap: 6px; }
.meta-item i { font-size: 14px; color: #9F95CE; }

.article-content {
  color: var(--text);
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .2px;
}
.article-content p { margin: 1.2em 0; }
.article-content > p:first-child::first-letter {
  font-size: 2.6em;
  font-weight: 600;
  padding: 0 4px 0 0;
  color: var(--primary);
  line-height: 1;
}
.article-content h2 {
  color: var(--ink);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  margin: 1.8em 0 .6em;
  padding-left: 14px;
  border-left: 5px solid var(--primary);
  border-radius: 3px;
}
.article-content h3 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  margin: 1.6em 0 .5em;
}
.article-content img {
  width: auto;
  max-width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  margin: 2em auto;
  display: block;
}
.article-content figure { margin: 2em auto; }
.article-content figcaption { text-align: center; font-size: 13px; color: var(--text-soft); margin-top: 12px; }
.article-content ul, .article-content ol { margin: 1.2em 0 1.2em 1.4em; }
.article-content li { margin: .5em 0; }
.article-content blockquote {
  position: relative;
  margin: 1.8em 0;
  padding: 20px 24px 20px 28px;
  background: #FAF8FF;
  border-radius: 0 18px 18px 0;
  border-left: 4px solid var(--primary);
  color: #413A6B;
  font-size: 17px;
}
.article-content blockquote::before {
  content: "❝";
  position: absolute;
  top: 8px; right: 16px;
  font-size: 44px;
  color: rgba(108,76,241,.18);
  line-height: 1;
}
.article-content blockquote p { margin: .3em 0; }
.article-content pre {
  background: #211A3E;
  color: #DAD1FF;
  border-radius: 16px;
  padding: 22px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.7;
}
.article-content code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: #F0EBFF;
  color: #552ED6;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: .9em;
}
.article-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.article-content table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: collapse;
  border-radius: 14px;
  overflow: hidden;
  font-size: 15px;
}
.article-content th {
  background: #F1ECFF;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
}
.article-content td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.article-content hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }

/* ===== Article Foot Info ===== */
.article-foot-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 34px 0 22px;
  padding: 16px 18px;
  background: #F8F6FF;
  border: 1px solid rgba(108,76,241,.08);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-soft);
}
.article-foot-note i { color: var(--success); }
.foot-tag-group { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-tag {
  display: inline-block;
  padding: 5px 13px;
  background: #F0EBFF;
  color: var(--primary);
  font-size: 13px;
  border-radius: var(--radius-btn);
  margin-right: 6px;
}
.foot-tag:hover { background: var(--primary); color: #fff; }
.article-share {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.share-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
}
.share-btn:hover { color: #fff; background: var(--primary); border-color: var(--primary); }

/* pager */
.post-pager {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 28px 0 0;
}
.pager-btn {
  flex: 1 1 240px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: var(--shadow-xs);
  color: var(--text);
}
.pager-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pager-btn i { color: var(--primary); }
.pager-label { font-size: 12px; color: var(--text-soft); display: block; }
.pager-text { max-width: 100%; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
}
.list-back-btn:hover { background: var(--primary); color: #fff; }

/* ===== Sidebar ===== */
.article-side-wrap { position: relative; }
.side-sticky { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; }
.side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow-xs);
}
.side-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
}
.side-title::before {
  content: "";
  width: 4px;
  height: 18px;
  background: var(--grad-main);
  border-radius: 4px;
}
.side-bar-list { list-style: none; margin: 0; padding: 0; }
.side-bar-list li + li { margin-top: 12px; }
.side-bar-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text);
  background: #FAF8FF;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid transparent;
  transition: all .2s ease;
}
.side-bar-link:hover { border-color: rgba(108,76,241,.15); box-shadow: var(--shadow-xs); transform: translateX(3px); }
.side-thumb {
  width: 72px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #F0EBFF;
}
.side-link-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 4px;
}
.side-bar-link:hover .side-link-title { color: var(--primary); }
.side-link-meta { font-size: 12px; color: var(--text-soft); }
.side-chip-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.side-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #F4F0FF;
  color: #6D5EAE;
  font-size: 13px;
  border-radius: 10px;
}
.side-chip i { color: var(--primary); }
.side-chip:hover { background: var(--primary); color: white; }
.side-chip:hover i { color: white; }
.side-lead-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.side-lead-item strong { color: var(--ink); font-size: 14px; display: block; }
.side-lead-item span { font-size: 12px; color: var(--text-soft); }

/* Empty State */
.empty-card {
  background: #fff;
  border-radius: 28px;
  padding: 70px 30px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  border: 1px solid var(--line);
}
.empty-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #F0EBFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--primary);
}
.empty-card h1 { font-size: 26px; color: var(--ink); margin-bottom: 12px; }
.empty-card p { max-width: 480px; margin-left: auto; margin-right: auto; color: var(--text-soft); }
.empty-card .btn-primary { margin-top: 22px; }

/* ===== Pre Footer CTA ===== */
.cta-band { margin: 90px 0 70px; }
.cta-band-inner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-radius: 30px;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.26), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,.12), transparent 30%),
    var(--grad-main);
  padding: clamp(28px, 5vw, 58px);
  color: #fff;
  box-shadow: 0 24px 50px rgba(108,76,241,.3);
}
.cta-band-inner::after {
  content: "";
  position: absolute;
  right: -60px; top: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
}
.cta-band-copy { position: relative; z-index: 2; }
.cta-band-copy .section-sub { color: rgba(255,255,255,.85); }
.cta-band-copy h2 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.4; margin: 6px 0 0; }
.cta-band-action { position: relative; z-index: 2; flex-shrink: 0; }
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 30px;
  background: #fff;
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-radius: var(--radius-btn);
  box-shadow: 0 12px 24px rgba(31,28,76,.22);
  white-space: nowrap;
}
.btn-white:hover { color: var(--pink); transform: translateY(-2px); box-shadow: 0 16px 30px rgba(31,28,76,.28); }

/* ===== Footer (shared) ===== */
.site-footer {
  background: linear-gradient(180deg, #14102C 0%, #17122F 100%);
  color: #B9B3D9;
  margin-top: 40px;
  padding-top: 0;
}
.footer-wave { line-height: 0; display: block; }
.footer-wave svg { width: 100%; height: 40px; display: block; }
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px 30px;
  padding: 60px 0 44px;
}
.footer-brand .brand-logo { color: #fff; margin-bottom: 16px; }
.footer-brand .brand-logo .logo-mark { width: 38px; height: 38px; font-size: 17px; }
.footer-brand p { color: #9A93BB; font-size: 14px; line-height: 1.9; }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #C9C2EB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all .2s ease;
}
.social-btn:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.footer-title { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 20px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: 12px; }
.footer-links a { color: #9A93BB; font-size: 14px; }
.footer-links a:hover { color: #fff; padding-left: 8px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 24px 0 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: 13px;
  color: #7F78A8;
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 30px;
  z-index: 98;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.back-to-top:hover { background: var(--primary); color: #fff; transform: translateY(-4px); }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .header-search .search-box { width: 150px; }
  .primary-nav a { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 1099px) {
  .primary-nav {
    position: absolute;
    top: 60px;
    left: 16px;
    right: 16px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 60px rgba(30,23,51,.18);
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: all .25s ease;
  }
  .site-header.nav-open .primary-nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .primary-nav a { padding: 12px 16px; border-radius: 10px; font-size: 16px; }
  .primary-nav a::after { display: none; }
  .primary-nav a:hover { background: #F0EBFF; color: var(--primary); }
  .nav-toggle { display: inline-flex; }
  .header-search { margin-left: auto; }
}
@media (max-width: 899px) {
  .header-tools .icon-btn { display: none; }
  .header-search .search-box { width: 130px; }
  .btn-header-cta { display: none; }
}
@media (max-width: 639px) {
  .main-wrap { padding-top: 66px; }
  .site-header, .header-inner { height: 64px; }
  .header-inner { gap: 12px; }
  .brand-logo { font-size: 16px; }
  .logo-mark { width: 36px; height: 36px; font-size: 16px; border-radius: 11px; }
  .header-search .search-box { width: 100%; height: 38px; padding-left: 10px; }
  .search-kbd { display: none; }
  .header-search .fa-magnifying-glass { flex-shrink: 0; }
  .header-search input { display: block; }
  .header-search { order: 2; margin-left: auto; }
  .header-tools > .header-search { margin-left: auto; }
  .nav-toggle { order: 3; width: 38px; height: 38px; }
  .article-hero-inner { padding: 28px 0 44px; }
  .article-card-head { border-radius: 22px; padding: 24px 18px; }
  .article-title { font-size: clamp(24px, 7vw, 34px); }
  .article-content { font-size: 16px; }
  .article-content pre { padding: 16px; }
  .article-share { margin-left: 0; }
  .cta-band-inner { padding: 26px 20px; }
  .cta-band-action { width: 100%; }
  .btn-white { width: 100%; height: 48px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px 18px; padding-top: 44px; }
  .footer-bottom { flex-direction: column; }
  .back-to-top { right: 14px; bottom: 20px; width: 38px; height: 38px; }
}

/* roulang page: category2 */
:root {
      --brand: #6C4CF1;
      --brand-deep: #4C2EE0;
      --brand-2: #F2567A;
      --accent: #19B7C6;
      --deep: #1E1733;
      --dark-bg: #191435;
      --dark-bg-2: #221B45;
      --text: #4F4780;
      --ink: #2A2342;
      --muted: #8B82B5;
      --line: #E9E3FF;
      --bg: #F7F5FF;
      --white: #fff;
      --grad-main: linear-gradient(135deg, #6C4CF1, #F2567A);
      --grad-hover: linear-gradient(135deg, #7D61FF, #FF6787);
      --grad-cool: linear-gradient(135deg, #19B7C6, #6C4CF1);
      --radius-lg: 28px;
      --radius-card: 20px;
      --radius-btn: 14px;
      --shadow-card: 0 2px 8px rgba(30,23,51,.04), 0 12px 32px rgba(30,23,51,.08);
      --shadow-card-hover: 0 8px 16px rgba(30,23,51,.08), 0 24px 48px rgba(30,23,51,.12);
      --space-section: clamp(76px, 8vw, 110px);
      --container-padding: clamp(20px, 5vw, 40px);
      --font-cn: "PingFang SC", "Microsoft YaHei", "HarmonicOS Sans", "Helvetica Neue", Arial, sans-serif;
    }

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

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-cn);
      font-size: 16px;
      line-height: 1.8;
      -webkit-font-smoothing: antialiased;
    }

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

    a {
      color: var(--brand);
      text-decoration: none;
      transition: color .25s ease, background .25s ease, box-shadow .25s ease;
    }

    a:hover {
      color: var(--brand-2);
    }

    button, input {
      font-family: inherit;
    }

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

    h1, h2, h3, h4, h5, h6 {
      color: var(--deep);
      font-weight: 700;
      line-height: 1.3;
      margin: 0 0 .5em;
    }

    p {
      margin-top: 0;
    }

    .section {
      padding-top: var(--space-section);
      padding-bottom: var(--space-section);
    }

    .section-alt {
      background: #F0EBFF;
    }

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

    .section-head h2 {
      font-size: clamp(28px, 3vw, 38px);
      letter-spacing: 1px;
    }

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

    .section-head-center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(108, 76, 241, .12);
      color: var(--brand-deep);
      border-radius: 999px;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .4px;
      margin-bottom: 18px;
    }

    .eyebrow .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(25, 183, 198, .18);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 26px;
      border-radius: var(--radius-btn);
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
      border: 0;
    }

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

    .btn-main {
      background: var(--grad-main);
      color: #fff;
      box-shadow: 0 10px 24px rgba(108, 76, 241, .28);
    }

    .btn-main:hover {
      background: var(--grad-hover);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 14px 34px rgba(242, 86, 122, .34);
    }

    .btn-white {
      background: #ffffff;
      color: var(--brand-deep);
      box-shadow: 0 10px 24px rgba(30, 23, 51, .18);
    }

    .btn-white:hover {
      color: var(--brand-2);
      transform: translateY(-2px);
      box-shadow: 0 16px 30px rgba(30, 23, 51, .26);
    }

    .btn-ghost {
      background: transparent;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .48);
      color: #fff;
    }

    .btn-ghost:hover {
      background: rgba(255, 255, 255, .14);
      color: #fff;
      box-shadow: inset 0 0 0 1px #fff;
      transform: translateY(-2px);
    }

    .btn-sm {
      min-height: 38px;
      padding: 0 18px;
      font-size: 14px;
      border-radius: 10px;
    }

    .btn-lg {
      min-height: 54px;
      padding: 0 34px;
      font-size: 17px;
    }

    /* ===== Header ===== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 6px 24px rgba(30, 23, 51, .04);
    }

    .header-inner {
      position: relative;
      height: 72px;
      display: flex;
      align-items: center;
      gap: 18px;
    }

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

    .logo-mark {
      width: 38px;
      height: 38px;
      background: var(--grad-main);
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px;
      box-shadow: 0 8px 18px rgba(108, 76, 241, .32);
    }

    .brand-text {
      font-size: 18px;
      font-weight: 700;
      color: var(--deep);
      white-space: nowrap;
      letter-spacing: .5px;
    }

    .primary-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }

    .primary-nav a {
      display: inline-flex;
      align-items: center;
      position: relative;
      padding: 10px 13px;
      font-size: 15px;
      font-weight: 500;
      color: var(--text);
      border-radius: 10px;
      white-space: nowrap;
      transition: color .25s ease;
    }

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

    .primary-nav a.active {
      color: var(--brand-deep);
      font-weight: 600;
    }

    .primary-nav a.active::after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 3px;
      height: 3px;
      background: var(--grad-main);
      border-radius: 99px;
    }

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

    .search-bar {
      display: flex;
      align-items: center;
      position: relative;
    }

    .search-bar input {
      width: 208px;
      height: 40px;
      border: 0;
      background: #F2EEFF;
      border-radius: 999px;
      padding: 0 52px 0 36px;
      font-size: 13px;
      color: var(--ink);
      transition: width .28s ease, box-shadow .28s ease, background .28s ease;
    }

    .search-bar input::placeholder {
      color: var(--muted);
    }

    .search-bar input:focus {
      outline: 0;
      width: 246px;
      box-shadow: 0 0 0 2px var(--brand);
      background: #fff;
    }

    .search-bar .fa-magnifying-glass {
      position: absolute;
      left: 13px;
      color: var(--muted);
      font-size: 14px;
      pointer-events: none;
    }

    .search-kbd {
      position: absolute;
      right: 10px;
      font-size: 12px;
      color: var(--muted);
      background: #E5DFF9;
      border-radius: 6px;
      padding: 2px 7px;
      letter-spacing: .2px;
    }

    .search-kbd kbd {
      font-family: inherit;
    }

    .btn-header {
      min-height: 40px;
      border-radius: 999px;
      font-size: 14px;
      padding: 0 20px;
    }

    .nav-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--deep);
      font-size: 18px;
      cursor: pointer;
    }

    .mobile-nav-panel {
      display: none;
      flex-direction: column;
      padding: 14px 22px 22px;
      background: #fff;
      border-top: 1px solid var(--line);
      border-radius: 0 0 24px 24px;
      box-shadow: 0 20px 40px rgba(30, 23, 51, .1);
    }

    .mobile-nav-panel.open {
      display: flex;
    }

    .mobile-nav-panel a {
      padding: 12px 6px;
      color: var(--text);
      border-bottom: 1px dashed var(--line);
      font-size: 15px;
      font-weight: 500;
    }

    .mobile-nav-panel a:last-child {
      border-bottom: 0;
    }

    .mobile-nav-panel a:hover,
    .mobile-nav-panel a.active {
      color: var(--brand-deep);
    }

    /* ===== Breadcrumb ===== */
    .breadcrumb {
      margin-bottom: 18px;
    }

    .breadcrumb ol {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
      font-size: 13px;
      color: var(--muted);
    }

    .breadcrumb li {
      display: inline-flex;
      align-items: center;
    }

    .breadcrumb li + li::before {
      content: "/";
      margin: 0 9px;
      color: #b9b1d8;
    }

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

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

    .breadcrumb li:last-child {
      color: var(--ink);
      font-weight: 500;
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ===== Category Hero ===== */
    .category-hero {
      position: relative;
      overflow: hidden;
      background: var(--deep);
      padding: 72px 0 94px;
      color: #fff;
    }

    .category-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url('/assets/images/backpic/back-1.webp') center / cover no-repeat;
      opacity: .42;
    }

    .category-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, rgba(30, 23, 51, .98) 14%, rgba(108, 76, 241, .76) 68%, rgba(242, 86, 122, .42) 100%);
    }

    .category-hero .container {
      position: relative;
      z-index: 2;
    }

    .category-hero .breadcrumb {
      color: rgba(255, 255, 255, .65);
    }

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

    .category-hero .breadcrumb li + li::before {
      color: rgba(255, 255, 255, .4);
    }

    .category-hero .breadcrumb li:last-child {
      color: #fff;
    }

    .hero-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 50px;
    }

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

    .page-title {
      font-size: clamp(38px, 5vw, 60px);
      color: #fff;
      letter-spacing: 1px;
      margin: 0 0 18px;
    }

    .hero-lead {
      color: rgba(255, 255, 255, .84);
      font-size: 18px;
      line-height: 1.8;
      max-width: 580px;
      margin-bottom: 30px;
    }

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

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

    .mini-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 14px;
      padding: 8px 16px;
      font-size: 14px;
      color: rgba(255, 255, 255, .82);
      backdrop-filter: blur(8px);
    }

    .mini-badge strong {
      color: #fff;
      font-size: 20px;
    }

    .hero-visual {
      flex-shrink: 0;
      width: 280px;
      display: none;
    }

    .hero-card-stack {
      position: relative;
    }

    .hero-visual-card {
      background: rgba(255, 255, 255, .13);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 28px;
      padding: 16px;
      backdrop-filter: blur(10px);
      box-shadow: 0 28px 60px rgba(0, 0, 0, .22);
      transform: rotate(4deg);
    }

    .hero-visual-card img {
      border-radius: 20px;
      box-shadow: 0 18px 30px rgba(30, 23, 51, .3);
    }

    /* ===== Category tiles ===== */
    .category-overview {
      background: #fff;
    }

    .tile-card {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      padding: 26px 22px;
      height: 100%;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .tile-card:hover {
      transform: translateY(-6px);
      background: #fff;
      box-shadow: var(--shadow-card-hover);
    }

    .tile-icon {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: #fff;
      margin-bottom: 18px;
      background: var(--grad-main);
    }

    .tile-card:nth-child(3n+2) .tile-icon {
      background: var(--grad-cool);
    }

    .tile-card:nth-child(3n) .tile-icon {
      background: linear-gradient(135deg, #F2567A, #FF9A5C);
    }

    .tile-card h3 {
      font-size: 19px;
      margin-bottom: 6px;
    }

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

    /* ===== Hotspot magazine ===== */
    .hotspot-section {
      background: var(--bg);
    }

    .magazine-grid {
      align-items: stretch;
    }

    .spotlight-card {
      position: relative;
      background: var(--deep);
      border-radius: 28px;
      overflow: hidden;
      min-height: 520px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      box-shadow: var(--shadow-card);
    }

    .spotlight-card .cover {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform .6s ease;
    }

    .spotlight-card:hover .cover {
      transform: scale(1.04);
    }

    .spotlight-card .card-mask {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(30, 23, 51, .06) 18%, rgba(30, 23, 51, .52) 62%, rgba(30, 23, 51, .94) 100%);
    }

    .spotlight-content {
      position: relative;
      z-index: 2;
      padding: 32px;
      color: #fff;
    }

    .spotlight-content .card-tag {
      display: inline-block;
      background: var(--grad-main);
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      letter-spacing: .4px;
      margin-bottom: 12px;
    }

    .spotlight-content h3 {
      font-size: 25px;
      color: #fff;
      line-height: 1.4;
      margin-bottom: 10px;
    }

    .spotlight-content p {
      color: rgba(255, 255, 255, .78);
      margin-bottom: 18px;
      max-width: 480px;
    }

    .small-card {
      background: #fff;
      border-radius: 20px;
      padding: 20px;
      box-shadow: var(--shadow-card);
      display: flex;
      gap: 16px;
      align-items: center;
      border: 1px solid rgba(108, 76, 241, .08);
      transition: transform .25s ease, box-shadow .25s ease;
      margin-bottom: 20px;
    }

    .small-card:last-child {
      margin-bottom: 0;
    }

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

    .small-cover {
      width: 120px;
      height: 88px;
      border-radius: 16px;
      overflow: hidden;
      flex-shrink: 0;
    }

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

    .small-card-content {
      flex: 1;
      min-width: 0;
    }

    .small-card-content .tag {
      display: inline-block;
      font-size: 12px;
      color: var(--brand);
      background: rgba(108, 76, 241, .1);
      border-radius: 6px;
      padding: 2px 8px;
      margin-bottom: 6px;
    }

    .small-card-content h3 {
      font-size: 16px;
      margin: 0 0 4px;
      color: var(--deep);
      line-height: 1.45;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .small-card-content p {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    /* ===== Steps / ranking explain ===== */
    .ranking-steps-section {
      background: #fff;
    }

    .step-card {
      height: 100%;
      background: var(--bg);
      border-radius: var(--radius-card);
      padding: 28px 24px;
      border: 1px solid var(--line);
      position: relative;
      transition: transform .25s ease, box-shadow .25s ease;
    }

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

    .step-num {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: .4px;
      background: var(--grad-main);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 8px;
    }

    .step-card:nth-child(odd) .step-num {
      background: linear-gradient(135deg, #19B7C6, #6C4CF1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .step-card h3 {
      font-size: 19px;
      margin-bottom: 8px;
    }

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

    /* quote card */
    .editor-note {
      background: #fff;
      border-radius: 24px;
      padding: 36px;
      border: 1px solid var(--line);
      border-left: 4px solid var(--brand);
      box-shadow: var(--shadow-card);
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin-top: var(--space-section);
    }

    .editor-note .note-icon {
      flex-shrink: 0;
      width: 50px;
      height: 50px;
      border-radius: 18px;
      background: var(--grad-main);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    .editor-note blockquote {
      margin: 0;
      padding: 0;
      border: 0;
    }

    .editor-note blockquote p {
      font-size: 18px;
      color: var(--ink);
      line-height: 1.8;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .editor-note cite {
      font-style: normal;
      color: var(--muted);
      font-size: 14px;
    }

    /* ===== FAQ ===== */
    .faq-section {
      background: #F0EBFF;
    }

    .faq-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 0 24px;
      margin-bottom: 16px;
      transition: box-shadow .25s ease;
    }

    .faq-card:hover {
      box-shadow: var(--shadow-card);
    }

    .faq-card details {
      padding: 0;
    }

    .faq-card summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 0;
      font-size: 17px;
      font-weight: 600;
      color: var(--deep);
      user-select: none;
    }

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

    .faq-card summary::after {
      content: "+";
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: rgba(108, 76, 241, .12);
      color: var(--brand-deep);
      font-size: 20px;
      font-weight: 400;
      transition: transform .25s ease, background .25s ease;
      flex-shrink: 0;
    }

    .faq-card details[open] summary::after {
      transform: rotate(45deg);
      background: var(--grad-main);
      color: #fff;
    }

    .faq-card details p {
      padding: 0 0 22px;
      margin: 0;
      font-size: 15px;
      color: var(--text);
      line-height: 1.8;
      border-top: 1px dashed var(--line);
      padding-top: 4px;
    }

    /* ===== CTA band ===== */
    .cta-section {
      background: var(--bg);
      padding-top: 36px;
      padding-bottom: 90px;
    }

    .cta-panel {
      background: linear-gradient(115deg, #2B1F5D 0%, #6C4CF1 54%, #F2567A 100%);
      border-radius: 30px;
      padding: 54px clamp(26px, 5vw, 76px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 26px 60px rgba(108, 76, 241, .34);
    }

    .cta-panel::after {
      content: "";
      position: absolute;
      width: 320px;
      height: 320px;
      right: -100px;
      top: -100px;
      background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, transparent 70%);
    }

    .cta-copy {
      position: relative;
      z-index: 2;
      flex: 1;
    }

    .cta-copy h2 {
      color: #fff;
      font-size: clamp(24px, 3vw, 32px);
      margin-bottom: 10px;
    }

    .cta-copy p {
      color: rgba(255, 255, 255, .82);
      margin-bottom: 0;
    }

    .cta-actions {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 14px;
    }

    /* ===== Footer ===== */
    .site-footer {
      background: var(--dark-bg);
      background: linear-gradient(180deg, #191435, #221B45);
      color: #B7AEE6;
      position: relative;
      overflow: hidden;
      padding-top: 10px;
    }

    .footer-wave {
      margin: 0;
      line-height: 0;
    }

    .footer-wave svg {
      display: block;
      width: 100%;
      height: 40px;
    }

    .site-footer .container {
      position: relative;
      z-index: 2;
    }

    .footer-top {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 42px;
      padding: 54px 0 46px;
    }

    .brand-logo.footer-logo {
      color: #fff;
    }

    .footer-brand p {
      color: #8F85C2;
      font-size: 14px;
      line-height: 1.8;
      margin: 16px 0 18px;
      max-width: 320px;
    }

    .social-row {
      display: flex;
      gap: 10px;
    }

    .social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgba(255, 255, 255, .05);
      color: #CFC7F5;
      font-size: 15px;
      transition: background .25s ease, transform .25s ease, color .25s ease;
    }

    .social-btn:hover {
      background: var(--brand);
      color: #fff;
      transform: translateY(-3px);
    }

    .footer-title {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
    }

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

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

    .footer-links a {
      color: #8F85C2;
      font-size: 14px;
      transition: color .2s ease, padding-left .2s ease;
    }

    .footer-links a:hover {
      color: #fff;
      padding-left: 3px;
    }

    .footer-bottom {
      display: flex;
      flex-direction: column;
      gap: 4px;
      border-top: 1px solid rgba(255, 255, 255, .08);
      padding: 22px 0 30px;
      font-size: 14px;
      color: #8379B8;
    }

    .to-top {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: 0;
      background: var(--grad-main);
      color: #fff;
      font-size: 16px;
      box-shadow: 0 10px 22px rgba(108, 76, 241, .3);
      cursor: pointer;
      z-index: 990;
      opacity: .92;
      transition: transform .2s ease, opacity .2s ease;
    }

    .to-top:hover {
      transform: translateY(-4px);
      opacity: 1;
    }

    /* ===== Responsive ===== */
    @media screen and (max-width: 1199px) {
      .search-bar input {
        width: 0;
        padding: 0 8px 0 36px;
        opacity: 0;
      }
      .search-bar:focus-within input {
        width: 210px;
        opacity: 1;
      }
      .search-bar .fa-magnifying-glass {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
      .search-bar:focus-within .search-kbd {
        display: none;
      }
      .search-bar:not(:focus-within) .search-kbd {
        display: block;
      }
      .primary-nav a {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 14px;
      }
    }

    @media screen and (max-width: 1023px) {
      .site-header {
        border-radius: 0;
      }

      .primary-nav {
        display: none;
      }

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

      .btn-header {
        display: none;
      }

      .search-bar {
        margin-left: auto;
      }

      .category-hero {
        padding: 56px 0 72px;
      }

      .hero-row {
        flex-direction: column;
        gap: 18px;
      }

      .hero-visual {
        display: block;
      }

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

    @media screen and (max-width: 767px) {
      body {
        font-size: 15px;
      }

      .search-bar {
        display: none;
      }

      .header-inner {
        gap: 10px;
      }

      .brand-text {
        font-size: 16px;
      }

      .logo-mark {
        width: 34px;
        height: 34px;
        font-size: 17px;
        border-radius: 11px;
      }

      .spotlight-card {
        min-height: 420px;
      }

      .spotlight-content {
        padding: 24px;
      }

      .spotlight-content h3 {
        font-size: 21px;
      }

      .small-card {
        padding: 14px;
        gap: 12px;
      }

      .small-cover {
        width: 84px;
        height: 68px;
      }

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

      .cta-actions {
        justify-content: flex-start;
      }

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

      .editor-note {
        padding: 24px;
        flex-direction: column;
        gap: 12px;
      }

      .faq-card summary {
        font-size: 15px;
      }
    }

    @media screen and (max-width: 520px) {
      .hero-actions .btn {
        width: 100%;
      }

      .brand-text {
        font-size: 15px;
      }

      .mini-badge {
        font-size: 13px;
      }

      .mini-badge strong {
        font-size: 17px;
      }

      .spotlight-content h3 {
        font-size: 19px;
      }

      .small-card {
        flex-direction: column;
        align-items: flex-start;
      }

      .small-cover {
        width: 100%;
        height: 120px;
      }

      .page-title {
        font-size: 34px;
      }

      .hero-lead {
        font-size: 16px;
      }

      .to-top {
        right: 14px;
        bottom: 14px;
        width: 38px;
        height: 38px;
        font-size: 14px;
      }
    }

/* roulang page: category3 */
:root {
      --primary: #6C4CF1;
      --primary-dark: #5536CF;
      --secondary: #F2567A;
      --cyan: #19B7C6;
      --green: #2E9E62;
      --bg: #F7F5FF;
      --white: #FFFFFF;
      --ink: #1E1733;
      --ink-2: #4F4780;
      --ink-3: #7A72A3;
      --line: #E9E3FF;
      --radius-card: 22px;
      --radius-btn: 48px;
      --shadow-1: 0 2px 8px rgba(30, 23, 51, 0.04), 0 12px 32px rgba(30, 23, 51, 0.08);
      --shadow-2: 0 8px 16px rgba(30, 23, 51, 0.08), 0 24px 48px rgba(30, 23, 51, 0.12);
      --grad-main: linear-gradient(135deg, #6C4CF1 0%, #F2567A 100%);
      --grad-alt: linear-gradient(135deg, #19B7C6 0%, #6C4CF1 100%);
      --radius-lg: 28px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "PingFang SC", "Microsoft YaHei", "HarmonicOS Sans", "Helvetica Neue", Arial, sans-serif;
      background: var(--bg);
      color: var(--ink-2);
      font-size: 16px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0 0 12px;
      font-family: inherit;
      color: var(--ink);
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    p {
      margin: 0 0 1.2em;
      line-height: 1.8;
    }

    a {
      color: var(--primary);
      text-decoration: none;
      transition: color .25s ease;
    }

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

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    label:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
      border-radius: 6px;
    }

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

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding-left: clamp(20px, 5vw, 32px);
      padding-right: clamp(20px, 5vw, 32px);
    }

    .section {
      padding-top: clamp(70px, 8vw, 110px);
      padding-bottom: clamp(70px, 8vw, 110px);
    }

    .section-head {
      max-width: 780px;
      margin-bottom: 44px;
    }

    .section-head.centered {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .section-head .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--primary);
      font-weight: 600;
      background: rgba(108, 76, 241, 0.08);
      border: 1px solid rgba(108, 76, 241, 0.14);
      padding: 6px 14px;
      border-radius: 999px;
      margin-bottom: 16px;
    }

    .section-head h2 {
      font-size: clamp(28px, 3.2vw, 40px);
      line-height: 1.3;
      margin-bottom: 14px;
    }

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

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 48px;
      padding: 0 28px;
      border-radius: var(--radius-btn);
      font-size: 16px;
      font-weight: 600;
      border: 0;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
      text-decoration: none;
    }

    .btn i {
      font-size: 15px;
    }

    .btn-primary {
      background: var(--grad-main);
      color: #fff;
      box-shadow: 0 8px 22px rgba(108, 76, 241, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }

    .btn-primary:hover {
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(108, 76, 241, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

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

    .btn-secondary {
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.36);
      backdrop-filter: blur(4px);
    }

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

    .btn-white {
      background: #fff;
      color: var(--primary);
      box-shadow: 0 10px 30px rgba(30, 23, 51, 0.14);
    }

    .btn-white:hover {
      background: #fff;
      color: var(--secondary);
      transform: translateY(-2px);
      box-shadow: 0 16px 40px rgba(30, 23, 51, 0.2);
    }

    .btn-outline {
      background: transparent;
      color: var(--primary);
      border: 1px solid rgba(108, 76, 241, 0.35);
    }

    .btn-outline:hover {
      color: var(--secondary);
      border-color: var(--secondary);
      background: rgba(242, 86, 122, 0.05);
      transform: translateY(-2px);
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: 72px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(233, 227, 255, 0.9);
      transition: box-shadow .3s ease, background .3s ease;
    }

    .site-header:hover {
      box-shadow: 0 10px 30px rgba(30, 23, 51, 0.06);
    }

    .nav-wrap {
      display: flex;
      align-items: center;
      gap: 18px;
      height: 72px;
    }

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

    .logo-mark {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: rgba(108, 76, 241, 0.08);
    }

    .brand-text {
      font-size: 20px;
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      letter-spacing: 0;
    }

    .nav-center {
      flex: 1;
      display: flex;
      justify-content: center;
      min-width: 0;
    }

    .primary-nav {
      display: flex;
      align-items: center;
      gap: 2px;
      background: #F7F5FF;
      padding: 5px;
      border-radius: 12px;
    }

    .primary-nav a {
      display: inline-flex;
      align-items: center;
      height: 38px;
      padding: 0 15px;
      border-radius: 9px;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--ink-2);
      white-space: nowrap;
      position: relative;
      transition: color .25s ease, background .25s ease;
    }

    .primary-nav a:hover {
      color: var(--primary);
      background: rgba(108, 76, 241, 0.08);
    }

    .primary-nav a.active {
      color: var(--primary);
      background: #fff;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(30, 23, 51, 0.06);
    }

    .primary-nav a.active::after {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: -1px;
      height: 2px;
      border-radius: 4px;
      background: var(--grad-main);
    }

    .nav-tools {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .command-search {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      width: 200px;
      height: 40px;
      padding: 0 12px;
      background: #F7F5FF;
      border: 1px solid transparent;
      border-radius: 999px;
      color: var(--ink-3);
      font-size: 13px;
      cursor: text;
      transition: border-color .25s ease, background .25s ease;
    }

    .command-search:hover {
      background: #F1EBFF;
      border-color: var(--line);
    }

    .command-search i {
      color: var(--primary);
      font-size: 14px;
    }

    .command-search span {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .command-search kbd {
      font-family: inherit;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 1px 7px;
      font-size: 12px;
      color: var(--ink-3);
      box-shadow: 0 1px 2px rgba(30, 23, 51, 0.04);
      white-space: nowrap;
    }

    .quick-btn {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: #F7F5FF;
      color: var(--ink-2);
      border: 1px solid transparent;
      transition: all .2s ease;
      text-decoration: none;
    }

    .quick-btn:hover {
      color: var(--primary);
      background: #F1EBFF;
      border-color: var(--line);
    }

    .btn-header {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 0 18px;
      border-radius: 999px;
      background: var(--grad-main);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      box-shadow: 0 6px 16px rgba(108, 76, 241, 0.24);
      transition: all .25s ease;
      text-decoration: none;
    }

    .btn-header:hover {
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(108, 76, 241, 0.34);
    }

    .nav-drawer-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .nav-drawer-btn {
      display: none;
      width: 42px;
      height: 42px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: #F7F5FF;
      border-radius: 12px;
      cursor: pointer;
      border: 0;
    }

    .nav-drawer-btn span {
      display: block;
      width: 18px;
      height: 2px;
      background: var(--ink);
      border-radius: 3px;
      transition: transform .3s ease, opacity .3s ease;
    }

    .search-icon-mobile {
      display: none;
    }

    .site-body {
      padding-top: 72px;
    }

    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 18px;
    }

    .breadcrumb a {
      color: rgba(255, 255, 255, 0.82);
      text-decoration: none;
    }

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

    .breadcrumb .sep {
      color: rgba(255, 255, 255, 0.42);
    }

    .category-hero {
      position: relative;
      color: #fff;
      overflow: hidden;
      padding: 96px 0 76px;
      background-image:
        radial-gradient(circle at 82% 26%, rgba(25, 183, 198, 0.22), transparent 30%),
        radial-gradient(circle at 72% 70%, rgba(255, 255, 255, 0.12), transparent 24%),
        linear-gradient(125deg, #6C4CF1 0%, #8B5CF6 48%, #F2567A 100%);
    }

    .category-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(120deg, #000 0%, rgba(0, 0, 0, 0.8) 60%, transparent 100%);
    }

    .category-hero::after {
      content: "";
      position: absolute;
      right: -100px;
      bottom: -80px;
      width: 420px;
      height: 420px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 50%;
      box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.04), 0 0 0 90px rgba(255, 255, 255, 0.025);
      pointer-events: none;
    }

    .category-hero .container {
      position: relative;
      z-index: 2;
    }

    .hero-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.26);
      color: #fff;
      font-size: 13px;
      padding: 6px 14px;
      border-radius: 999px;
      backdrop-filter: blur(6px);
      margin-bottom: 18px;
    }

    .hero-chip i {
      font-size: 14px;
      color: #FFE08A;
    }

    .category-hero h1 {
      color: #fff;
      font-size: clamp(38px, 5.2vw, 60px);
      line-height: 1.14;
      margin-bottom: 18px;
      letter-spacing: 1px;
    }

    .category-hero .lead {
      max-width: 600px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 17px;
      line-height: 1.8;
      margin-bottom: 26px;
    }

    .hero-btn-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-bottom: 30px;
    }

    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 13px;
    }

    .hero-trust .trust-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hero-trust .dot {
      width: 6px;
      height: 6px;
      background: #7CF0C5;
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(124, 240, 197, 0.18);
    }

    .hero-visual {
      position: relative;
    }

    .hero-img-card {
      position: relative;
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(30, 23, 51, 0.24);
      border: 4px solid rgba(255, 255, 255, 0.35);
      transform: perspective(900px) rotateY(2deg);
      transition: transform .45s ease, box-shadow .45s ease;
    }

    .hero-img-card:hover {
      transform: perspective(900px) rotateY(0deg);
      box-shadow: 0 26px 70px rgba(30, 23, 51, 0.32);
    }

    .hero-img-card img {
      width: 100%;
      height: 280px;
      object-fit: cover;
    }

    .float-badge {
      position: absolute;
      background: rgba(255, 255, 255, 0.86);
      backdrop-filter: blur(8px);
      border-radius: 14px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(255, 255, 255, 0.7);
      box-shadow: 0 12px 30px rgba(30, 23, 51, 0.14);
      animation: floatY 4s ease-in-out infinite;
      white-space: nowrap;
    }

    .fb-num {
      font-size: 26px;
      font-weight: 700;
      color: var(--primary);
      line-height: 1.2;
    }

    .fb-label {
      font-size: 12px;
      color: var(--ink-2);
      line-height: 1.4;
    }

    .float-badge.b1 {
      left: -16px;
      top: 28px;
    }

    .float-badge.b2 {
      right: 18px;
      bottom: -18px;
      background: rgba(255, 255, 255, 0.92);
      animation-delay: 1.2s;
    }

    .float-badge.b2 .fb-num {
      color: var(--cyan);
    }

    @keyframes floatY {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-9px);
      }
    }

    .trust-note-strip {
      position: relative;
      z-index: 3;
      margin-top: -28px;
    }

    .trust-note-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow-1);
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 20px 22px;
      min-height: 96px;
      transition: box-shadow .3s ease, transform .3s ease;
    }

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

    .trust-note-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .trust-note-title i {
      color: var(--primary);
      width: 20px;
      text-align: center;
      font-size: 16px;
    }

    .trust-note-card p {
      font-size: 13.5px;
      line-height: 1.6;
      color: var(--ink-3);
      margin: 0;
    }

    .feature-duo {
      background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
    }

    .feature-card-large,
    .feature-card-mini {
      border-radius: var(--radius-card);
      background: #fff;
      border: 1px solid rgba(108, 76, 241, 0.08);
      box-shadow: var(--shadow-1);
      transition: box-shadow .3s ease, transform .3s ease;
      overflow: hidden;
      height: 100%;
    }

    .feature-card-large:hover,
    .feature-card-mini:hover {
      box-shadow: var(--shadow-2);
      transform: translateY(-5px);
    }

    .feature-img {
      height: 100%;
      min-height: 260px;
    }

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

    .feature-body {
      padding: 28px 24px;
    }

    .feature-mini .feature-thumb {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .feature-mini .feature-body {
      padding: 24px;
    }

    .feature-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--primary);
      background: rgba(108, 76, 241, 0.08);
      padding: 5px 12px;
      border-radius: 999px;
      margin-bottom: 14px;
      font-weight: 500;
    }

    .feature-body h3 {
      font-size: 22px;
      line-height: 1.4;
      margin-bottom: 10px;
      color: var(--ink);
    }

    .feature-body p {
      color: var(--ink-2);
      font-size: 15px;
      margin-bottom: 16px;
    }

    .feature-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 15px;
    }

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

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

    .mini-stat-row {
      display: flex;
      gap: 14px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    .mini-stat {
      flex: 1;
    }

    .mini-stat strong {
      display: block;
      font-size: 22px;
      color: var(--ink);
      line-height: 1.3;
    }

    .mini-stat span {
      font-size: 12px;
      color: var(--ink-3);
    }

    .icon-grid-section {
      background: #fff;
    }

    .icon-grid-item {
      background: var(--bg);
      border: 1px solid #EFEAFF;
      border-radius: 18px;
      padding: 24px 20px;
      height: 100%;
      transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
    }

    .icon-grid-item:hover {
      background: #fff;
      border-color: rgba(108, 76, 241, 0.2);
      box-shadow: var(--shadow-2);
      transform: translateY(-4px);
    }

    .icon-grid-icon {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      font-size: 20px;
      color: #fff;
      margin-bottom: 16px;
    }

    .icon-grid-item h3 {
      font-size: 16px;
      color: var(--ink);
      margin-bottom: 6px;
    }

    .icon-grid-item p {
      font-size: 13.5px;
      color: var(--ink-3);
      line-height: 1.65;
      margin: 0;
    }

    .icon-bg-1 {
      background: linear-gradient(135deg, #6C4CF1, #9C7BFF);
    }

    .icon-bg-2 {
      background: linear-gradient(135deg, #F2567A, #F78CA6);
    }

    .icon-bg-3 {
      background: linear-gradient(135deg, #19B7C6, #5FDC8F);
    }

    .icon-bg-4 {
      background: linear-gradient(135deg, #F5A524, #F2567A);
    }

    .icon-bg-5 {
      background: linear-gradient(135deg, #22B8AF, #19B7C6);
    }

    .icon-bg-6 {
      background: linear-gradient(135deg, #8C5FF8, #6C4CF1);
    }

    .process-section {
      background: linear-gradient(180deg, #fff 0%, #F7F5FF 100%);
    }

    .process-step {
      position: relative;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 28px 24px 24px;
      height: 100%;
      transition: box-shadow .3s ease, transform .3s ease;
      overflow: hidden;
    }

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

    .step-num {
      position: absolute;
      right: 20px;
      top: 14px;
      font-size: 52px;
      font-weight: 800;
      color: rgba(108, 76, 241, 0.07);
      line-height: 1;
      z-index: 0;
    }

    .step-icon {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(108, 76, 241, 0.09);
      color: var(--primary);
      border-radius: 12px;
      font-size: 18px;
      margin-bottom: 16px;
    }

    .process-step h3 {
      position: relative;
      z-index: 1;
      font-size: 17px;
      color: var(--ink);
      margin-bottom: 8px;
    }

    .process-step p {
      position: relative;
      z-index: 1;
      font-size: 14px;
      color: var(--ink-3);
      margin: 0;
      line-height: 1.7;
    }

    .quote-card {
      position: relative;
      background: linear-gradient(135deg, #EDE8FF, #FCE6EF);
      border: 1px solid rgba(108, 76, 241, 0.1);
      border-radius: 24px;
      padding: 38px clamp(24px, 4vw, 56px);
      text-align: center;
    }

    .quote-card i.fa-quote-left {
      font-size: 36px;
      color: var(--primary);
      opacity: 0.28;
      margin-bottom: 10px;
      display: inline-block;
    }

    .quote-card blockquote {
      margin: 0 auto 10px;
      font-size: clamp(20px, 2.4vw, 30px);
      font-weight: 600;
      color: var(--ink);
      max-width: 880px;
      line-height: 1.5;
    }

    .quote-card .quote-from {
      color: var(--ink-3);
      font-size: 14px;
      letter-spacing: 1px;
    }

    .subscribe-banner {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      padding: 52px 48px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-image:
        radial-gradient(circle at 18% 20%, rgba(25, 183, 198, 0.28), transparent 36%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12), transparent 44%),
        linear-gradient(112deg, #4B32C2, #6C4CF1 52%, #E4487A);
      box-shadow: 0 24px 60px rgba(108, 76, 241, 0.22);
      flex-wrap: wrap;
      gap: 24px;
    }

    .subscribe-banner::after {
      content: "";
      position: absolute;
      right: -20px;
      top: -28px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    .subscribe-banner h2 {
      color: #fff;
      font-size: clamp(24px, 2.6vw, 34px);
      margin-bottom: 8px;
      position: relative;
      z-index: 1;
    }

    .subscribe-banner p {
      max-width: 560px;
      margin: 0;
      opacity: 0.88;
      font-size: 15px;
      position: relative;
      z-index: 1;
    }

    .subscribe-banner .banner-actions {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .faq-section {
      background: #fff;
    }

    .faq-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      align-items: flex-start;
    }

    .faq-intro {
      flex: 0 0 360px;
    }

    .faq-list {
      flex: 1;
      min-width: 280px;
    }

    .faq-item {
      background: #FBF9FF;
      border: 1px solid var(--line);
      border-radius: 18px;
      margin-bottom: 14px;
      transition: border-color .3s ease, box-shadow .3s ease;
      overflow: hidden;
    }

    .faq-item:hover {
      border-color: rgba(108, 76, 241, 0.24);
      box-shadow: var(--shadow-1);
    }

    .faq-item[open] {
      border-color: rgba(108, 76, 241, 0.3);
      background: #fff;
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 20px 18px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      user-select: none;
      list-style: none;
    }

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

    .faq-icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      background: #F1EBFF;
      color: var(--primary);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform .3s ease, background .3s ease, color .3s ease;
    }

    .faq-item[open] .faq-icon {
      transform: rotate(135deg);
      background: var(--primary);
      color: #fff;
    }

    .faq-item summary .faq-icon i {
      font-size: 14px;
    }

    .faq-answer {
      padding: 0 22px 24px 66px;
      color: var(--ink-2);
      font-size: 15px;
      line-height: 1.8;
    }

    .final-cta {
      background: linear-gradient(180deg, #F7F5FF 0%, #EDE8FF 100%);
      padding-bottom: 100px;
    }

    .cta-big-card {
      background-image:
        radial-gradient(circle at 12% 10%, rgba(25, 183, 198, 0.12), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(242, 86, 122, 0.12), transparent 30%),
        linear-gradient(135deg, #6C4CF1 0%, #8B5CF6 48%, #F2567A 100%);
      border-radius: 30px;
      padding: clamp(32px, 6vw, 76px);
      color: #fff;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      box-shadow: 0 28px 60px rgba(108, 76, 241, 0.2);
    }

    .cta-big-card::before {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -60px;
      bottom: -80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
      box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.06), 0 0 0 76px rgba(255, 255, 255, 0.04);
    }

    .cta-big-card h2 {
      color: #fff;
      position: relative;
      z-index: 2;
      font-size: clamp(22px, 3vw, 36px);
      margin-bottom: 12px;
    }

    .cta-big-card p {
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
      max-width: 560px;
      font-size: 16px;
      position: relative;
      z-index: 2;
    }

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

    .site-footer {
      background: linear-gradient(180deg, #221B45 0%, #17122F 100%);
      color: #C9C0E8;
      font-size: 14px;
      position: relative;
      padding: 0 0 40px;
    }

    .footer-wave {
      margin-bottom: 20px;
      line-height: 0;
    }

    .footer-wave svg {
      display: block;
      width: 100%;
      height: 44px;
    }

    .footer-top {
      display: flex;
      gap: clamp(30px, 5vw, 70px);
      flex-wrap: wrap;
      padding-bottom: 38px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-brand {
      flex: 1 1 260px;
      max-width: 340px;
    }

    .footer-brand .brand-logo {
      margin-bottom: 12px;
    }

    .footer-brand .brand-text {
      color: #fff;
      font-size: 20px;
    }

    .footer-brand .logo-mark {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
    }

    .footer-brand p {
      margin: 0 0 20px;
      color: #B5A8DB;
      font-size: 14px;
      line-height: 1.8;
    }

    .social-row {
      display: flex;
      gap: 10px;
    }

    .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.08);
      color: #DAD1FF;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.04);
      transition: all .25s ease;
    }

    .social-btn:hover {
      color: #fff;
      background: var(--primary);
      transform: translateY(-3px);
      border-color: transparent;
    }

    .site-footer .footer-title {
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 18px;
      letter-spacing: 1px;
    }

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

    .site-footer .footer-links a {
      color: #B5A8DB;
      font-size: 14px;
      text-decoration: none;
      transition: color .25s ease;
    }

    .site-footer .footer-links a:hover {
      color: #fff;
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-top: 28px;
      color: #9789C4;
      font-size: 13px;
      flex-wrap: wrap;
    }

    .footer-bottom span {
      display: inline-block;
    }

    .footer-bottom a {
      color: #C2B5EE;
    }

    .back-to-top {
      position: fixed;
      right: 24px;
      bottom: 26px;
      z-index: 50;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--grad-main);
      color: #fff;
      font-size: 18px;
      box-shadow: 0 12px 28px rgba(108, 76, 241, 0.3);
      text-decoration: none;
      transition: all .3s ease;
      opacity: 0.88;
    }

    .back-to-top:hover {
      color: #fff;
      transform: translateY(-4px);
      opacity: 1;
    }

    .hide-desktop {
      display: none !important;
    }

    @media screen and (max-width: 1199px) {
      .command-search {
        width: 170px;
      }
    }

    @media screen and (max-width: 1023px) {
      .nav-wrap {
        gap: 12px;
      }

      .nav-center {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: #FFFFFF;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-1);
        padding: 16px 20px;
        display: none;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        z-index: 99;
      }

      .primary-nav {
        flex-direction: column;
        align-items: stretch;
        background: transparent;
        gap: 4px;
        padding: 0;
      }

      .primary-nav a {
        height: auto;
        padding: 12px 8px;
        border-radius: 10px;
        justify-content: flex-start;
        border-bottom: 1px solid #F3F0FF;
        width: 100%;
      }

      .primary-nav a.active {
        background: rgba(108, 76, 241, 0.1);
        box-shadow: none;
      }

      .primary-nav a.active::after {
        display: none;
      }

      .site-header:has(.nav-drawer-input:checked) .nav-center {
        display: block;
      }

      .nav-drawer-btn {
        display: inline-flex;
      }

      .nav-tools {
        margin-left: auto;
        gap: 8px;
      }

      .command-search {
        display: none;
      }

      .search-icon-mobile {
        display: inline-flex;
      }

      .category-hero {
        padding: 60px 0 54px;
      }

      .float-badge {
        padding: 8px 12px;
      }

      .subscribe-banner {
        padding: 36px 26px;
      }
    }

    @media screen and (max-width: 639px) {
      .site-header {
        height: 64px;
      }

      .nav-wrap {
        height: 64px;
      }

      .site-body {
        padding-top: 64px;
      }

      .brand-text {
        font-size: 17px;
      }

      .btn-header {
        font-size: 13px;
        height: 38px;
        padding: 0 14px;
      }

      .quick-btn {
        width: 38px;
        height: 38px;
      }

      .hide-for-small-only {
        display: none !important;
      }

      .nav-drawer-btn {
        width: 38px;
        height: 38px;
      }

      .category-hero h1 {
        font-size: 32px;
      }

      .category-hero .lead {
        font-size: 15px;
      }

      .hero-btn-group {
        gap: 10px;
      }

      .hero-img-card img {
        height: 180px;
      }

      .float-badge.b1 {
        left: 6px;
        top: 10px;
      }

      .float-badge.b2 {
        right: 8px;
        bottom: -14px;
      }

      .section {
        padding-top: 56px;
        padding-bottom: 56px;
      }

      .section-head {
        margin-bottom: 28px;
      }

      .feature-body {
        padding: 20px 18px;
      }

      .feature-img {
        min-height: 180px;
      }

      .subscribe-banner {
        flex-direction: column;
        align-items: flex-start;
      }

      .cta-big-card {
        padding: 30px 20px;
      }

      .faq-wrap {
        display: block;
      }

      .faq-answer {
        padding: 0 18px 20px 18px;
      }

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

      .back-to-top {
        right: 14px;
        bottom: 18px;
        width: 40px;
        height: 40px;
      }
    }

/* roulang page: category4 */
:root {
      --primary: #6C4CF1;
      --primary-dark: #5A3AE6;
      --pink: #F2567A;
      --cyan: #19B7C6;
      --ink: #1E1733;
      --text: #4F4780;
      --text-light: #8A82B5;
      --bg: #F7F5FF;
      --white: #ffffff;
      --line: #E9E3FF;
      --dark: #17122F;
      --success: #2E9E62;
      --soft: #F3EFFD;
      --grad-primary: linear-gradient(135deg, #6C4CF1 0%, #F2567A 100%);
      --grad-cyan: linear-gradient(135deg, #19B7C6, #6C4CF1);
      --shadow-sm: 0 2px 8px rgba(30,23,51,.04), 0 12px 32px rgba(30,23,51,.08);
      --shadow-md: 0 6px 18px rgba(30,23,51,.06), 0 18px 42px rgba(30,23,51,.10);
      --shadow-lg: 0 12px 30px rgba(30,23,51,.12), 0 28px 64px rgba(30,23,51,.14);
      --radius-lg: 24px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --radius-pill: 999px;
      --font-sans: "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans", "Helvetica Neue", Arial, sans-serif;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.8;
      -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0 0 10px;
      color: var(--ink);
      font-weight: 700;
      line-height: 1.3;
    }

    p {
      margin: 0 0 16px;
    }

    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    a {
      color: var(--primary);
      text-decoration: none;
      transition: color .25s ease;
    }

    a:hover,
    a:focus {
      color: var(--pink);
    }

    img {
      max-width: 100%;
      vertical-align: middle;
      border: 0;
    }

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

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

    section {
      position: relative;
    }

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

    ::selection {
      background: rgba(108, 76, 241, .18);
      color: var(--ink);
    }

    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
      -webkit-appearance: none;
      display: none;
    }

    .container,
    .grid-container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding-left: clamp(20px, 5vw, 32px);
      padding-right: clamp(20px, 5vw, 32px);
    }

    .section {
      padding: clamp(64px, 8vw, 96px) 0;
    }

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

    .section-head .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      background: rgba(108, 76, 241, .1);
      color: var(--primary);
      border-radius: var(--radius-pill);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .5px;
    }

    .section-head h2 {
      font-size: clamp(28px, 3vw, 38px);
      margin: 16px 0 8px;
      letter-spacing: .5px;
    }

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

    .mini-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 8px;
      background: rgba(108, 76, 241, .1);
      color: var(--primary);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.6;
    }

    .btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 10px;
      height: 52px;
      padding: 0 28px;
      border-radius: 14px;
      border: none;
      font-size: 16px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      text-decoration: none !important;
      cursor: pointer;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
    }

    .btn-primary {
      background-image: var(--grad-primary) !important;
      color: #fff !important;
      box-shadow: 0 8px 24px rgba(108, 76, 241, .28);
    }

    .btn-primary:hover,
    .btn-primary:focus {
      color: #fff !important;
      background-image: linear-gradient(135deg, #7D5CF8, #FF6B8B) !important;
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(242, 86, 122, .34);
    }

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

    .btn-outline {
      background: rgba(255, 255, 255, .12) !important;
      border: 1px solid rgba(255, 255, 255, .34);
      color: #fff !important;
      backdrop-filter: blur(4px);
    }

    .btn-outline:hover,
    .btn-outline:focus {
      background: rgba(255, 255, 255, .2) !important;
      border-color: rgba(255, 255, 255, .6);
      color: #fff !important;
    }

    .btn-white {
      background: #fff !important;
      color: var(--primary) !important;
      box-shadow: 0 10px 28px rgba(17, 8, 56, .18);
    }

    .btn-white:hover,
    .btn-white:focus {
      background: #fff;
      color: var(--pink) !important;
      box-shadow: 0 14px 36px rgba(17, 8, 56, .26);
      transform: translateY(-2px);
    }

    .btn-lg {
      height: 56px;
      padding: 0 32px;
      border-radius: 16px;
    }

    .btn-sm {
      height: 40px;
      padding: 0 18px;
      border-radius: 12px;
      font-size: 14px;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      color: var(--primary);
    }

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

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

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 90;
      background: rgba(255, 255, 255, .94);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(233, 227, 255, .85);
      box-shadow: 0 1px 10px rgba(30, 23, 51, .03);
    }

    .header-inner {
      display: flex;
      align-items: center;
      min-height: 72px;
      gap: 14px;
      flex-wrap: nowrap;
    }

    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      text-decoration: none;
    }

    .brand-logo .logo-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: var(--grad-primary);
      box-shadow: 0 4px 14px rgba(108, 76, 241, .3);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 17px;
    }

    .brand-logo .brand-text {
      font-size: 18px;
      font-weight: 800;
      color: var(--ink);
      white-space: nowrap;
      letter-spacing: .5px;
    }

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

    .primary-nav {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-left: 14px;
      flex-wrap: nowrap;
    }

    .primary-nav a {
      position: relative;
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 13px;
      font-size: 15px;
      font-weight: 600;
      color: var(--ink);
      border-radius: 10px;
      text-decoration: none;
      white-space: nowrap;
      transition: color .25s ease, background .25s ease;
    }

    .primary-nav a:hover {
      background: rgba(108, 76, 241, .07);
      color: var(--primary);
    }

    .primary-nav a.active {
      color: var(--primary);
    }

    .primary-nav a.active::after {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 2px;
      height: 2px;
      border-radius: 2px;
      background: var(--grad-primary);
    }

    .header-tools {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      flex: 0 0 auto;
    }

    .top-search {
      display: flex;
      align-items: center;
      position: relative;
      flex: 0 0 190px;
      max-width: 210px;
    }

    .search-input {
      width: 100%;
      height: 40px;
      background: #F2EFFA;
      border: 1px solid transparent;
      border-radius: var(--radius-pill);
      padding: 0 42px 0 38px;
      font-size: 14px;
      color: var(--ink);
      transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .search-input::placeholder {
      color: #8A82B5;
    }

    .search-input:focus {
      outline: none;
      background: #fff;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(108, 76, 241, .14);
    }

    .top-search .search-icon {
      position: absolute;
      left: 13px;
      top: 50%;
      transform: translateY(-50%);
      color: #6A6197;
      font-size: 14px;
      pointer-events: none;
    }

    .hotkey {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      padding: 2px 7px;
      background: #fff;
      border: 1px solid #DDD4F4;
      border-radius: 6px;
      color: #8A82B5;
      font-size: 11px;
      font-family: inherit;
      line-height: 1.3;
    }

    .tool-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 11px;
      color: var(--text);
      transition: background .25s ease, color .25s ease;
    }

    .tool-icon:hover {
      background: var(--soft);
      color: var(--primary);
    }

    .nav-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      color: var(--ink);
      background: var(--soft);
      font-size: 18px;
      align-items: center;
      justify-content: center;
      margin-left: 2px;
    }

    .nav-toggle:active {
      transform: scale(.96);
    }

    /* Hero */
    .cat-hero {
      padding: 46px 0 80px;
      overflow: hidden;
      color: #fff;
      background-image:
        radial-gradient(920px 500px at 78% -10%, rgba(255, 255, 255, .16), transparent 60%),
        radial-gradient(760px 440px at 4% 112%, rgba(25, 183, 198, .3), transparent 60%),
        linear-gradient(115deg, #1B1240 0%, #3A27A8 48%, #B43A68 125%);
    }

    .cat-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
      background-size: 36px 36px;
      pointer-events: none;
    }

    .cat-hero .container {
      position: relative;
      z-index: 2;
    }

    .crumbs {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: rgba(255, 255, 255, .72);
      margin-bottom: 18px;
    }

    .crumbs a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: rgba(255, 255, 255, .76);
    }

    .crumbs a:hover {
      color: #fff;
    }

    .crumbs .current {
      color: #fff;
      font-weight: 600;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .13);
      border: 1px solid rgba(255, 255, 255, .2);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .5px;
    }

    .cat-h1 {
      font-size: clamp(34px, 4.4vw, 52px);
      line-height: 1.12;
      color: #fff;
      margin: 18px 0 16px;
      letter-spacing: 1px;
    }

    .cat-lead {
      max-width: 630px;
      color: rgba(255, 255, 255, .88);
      font-size: 17px;
      line-height: 1.9;
      margin: 0;
    }

    .hero-btn-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }

    .hero-notes {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 22px;
      margin-top: 26px;
    }

    .hero-notes li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, .85);
      font-size: 14px;
    }

    .hero-notes li i {
      color: #6FE0A9;
    }

    .hero-media-wrap {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .hero-frame {
      position: relative;
      width: 100%;
      max-width: 470px;
      aspect-ratio: 4/3;
      border-radius: 28px;
      overflow: hidden;
      border: 6px solid rgba(255, 255, 255, .28);
      background: #fff;
      box-shadow: 0 26px 70px rgba(17, 8, 56, .42);
      transform: rotate(.6deg);
    }

    .hero-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-float-card {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 12px 32px rgba(30, 23, 51, .22);
      color: var(--ink);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .hero-float-card .float-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: rgba(108, 76, 241, .12);
      color: var(--primary);
      font-size: 14px;
    }

    .hero-float-card .float-icon.cyan-icon {
      background: rgba(25, 183, 198, .13);
      color: #188A9B;
    }

    .hero-float-card strong {
      display: block;
      font-size: 14px;
      line-height: 1.3;
    }

    .hero-float-card small {
      display: block;
      color: var(--text);
      font-size: 12px;
      line-height: 1.4;
      margin-top: 2px;
    }

    .float-top {
      top: 20px;
      left: -20px;
    }

    .float-bottom {
      bottom: 20px;
      right: -12px;
    }

    /* Stats */
    .stats-section {
      padding: clamp(40px, 5vw, 60px) 0;
    }

    .stats-strip {
      padding: 28px 18px 12px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }

    .stat-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 8px 12px;
      min-height: 110px;
    }

    .stat-ico {
      flex: 0 0 46px;
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      font-size: 18px;
    }

    .stat-ico.violet {
      background: rgba(108, 76, 241, .12);
      color: var(--primary);
    }

    .stat-ico.pink {
      background: rgba(242, 86, 122, .12);
      color: var(--pink);
    }

    .stat-ico.cyan {
      background: rgba(25, 183, 198, .12);
      color: #188A9B;
    }

    .stat-ico.green {
      background: rgba(46, 158, 98, .12);
      color: var(--success);
    }

    .stat-item h3 {
      font-size: 16px;
      font-weight: 700;
      margin: 2px 0 4px;
    }

    .stat-item p {
      color: var(--text);
      font-size: 14px;
      line-height: 1.7;
      margin: 0;
    }

    /* Feature */
    .feature-section {
      background: #fff;
      border-top: 1px solid var(--line);
    }

    .feature-grid {
      align-items: stretch;
    }

    .feature-card {
      height: 100%;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 4px 18px rgba(30, 23, 51, .05);
      transition: transform .3s ease, box-shadow .3s ease;
    }

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

    .feature-card-media {
      width: 100%;
      aspect-ratio: 16/9;
      overflow: hidden;
      background: var(--soft);
    }

    .feature-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s ease;
    }

    .feature-card:hover .feature-card-media img {
      transform: scale(1.03);
    }

    .feature-card-body {
      padding: 28px 30px 30px;
    }

    .feature-card-body h3 {
      font-size: 22px;
      margin: 12px 0 10px;
    }

    .feature-card-body p {
      color: var(--text);
      font-size: 15px;
      line-height: 1.8;
      margin-bottom: 0;
    }

    .feature-check {
      display: grid;
      gap: 12px;
      margin: 20px 0 24px;
    }

    .feature-check li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: var(--text);
      font-size: 15px;
    }

    .feature-check li i {
      margin-top: 7px;
      color: var(--success);
      font-size: 13px;
    }

    .feature-card-foot {
      padding-top: 8px;
    }

    .side-stack {
      display: flex;
      flex-direction: column;
      gap: 24px;
      height: 100%;
    }

    .side-card {
      flex: 1 1 auto;
      display: flex;
      gap: 18px;
      align-items: flex-start;
      background: #FBF9FF;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 24px;
      transition: box-shadow .3s ease, transform .3s ease, background .3s ease;
    }

    .side-card:hover {
      background: #fff;
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
    }

    .side-card-ico {
      flex: 0 0 52px;
      width: 52px;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      font-size: 19px;
    }

    .side-ico-purple {
      background: rgba(108, 76, 241, .12);
      color: var(--primary);
    }

    .side-ico-magenta {
      background: rgba(242, 86, 122, .12);
      color: var(--pink);
    }

    .side-card h3 {
      font-size: 18px;
      margin: 10px 0 6px;
    }

    .side-card p {
      font-size: 14px;
      line-height: 1.75;
      color: var(--text);
      margin: 0;
    }

    /* Guide cards */
    .guide-section {
      background: linear-gradient(180deg, #F7F5FF 0%, #F2EDFE 100%);
      border-top: 1px solid var(--line);
    }

    .icon-grid {
      margin-top: 12px;
    }

    .icon-grid .cell {
      display: flex;
      margin-bottom: 18px;
    }

    .guide-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      padding: 22px 20px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .guide-card:hover {
      transform: translateY(-4px);
      border-color: rgba(108, 76, 241, .22);
      box-shadow: var(--shadow-md);
    }

    .icon-bubble {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border-radius: 15px;
      font-size: 18px;
      margin-bottom: 14px;
      transition: transform .25s ease;
    }

    .guide-card:hover .icon-bubble {
      transform: scale(1.06) rotate(-3deg);
    }

    .icon-grid .cell:nth-child(4n+1) .icon-bubble {
      background: rgba(108, 76, 241, .12);
      color: var(--primary);
    }

    .icon-grid .cell:nth-child(4n+2) .icon-bubble {
      background: rgba(242, 86, 122, .12);
      color: var(--pink);
    }

    .icon-grid .cell:nth-child(4n+3) .icon-bubble {
      background: rgba(25, 183, 198, .12);
      color: #1B93A1;
    }

    .icon-grid .cell:nth-child(4n+4) .icon-bubble {
      background: rgba(46, 158, 98, .12);
      color: var(--success);
    }

    .guide-card h3 {
      font-size: 16px;
      margin: 0 0 6px;
    }

    .guide-card p {
      color: var(--text);
      font-size: 14px;
      line-height: 1.72;
      margin: 0;
    }

    /* Steps */
    .steps-section {
      background: #fff;
      border-top: 1px solid var(--line);
    }

    .step-grid {
      margin-top: 12px;
    }

    .step-grid .cell {
      display: flex;
      margin-bottom: 22px;
    }

    .step-card {
      position: relative;
      width: 100%;
      background: #FBF9FF;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 30px 26px 26px;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    }

    .step-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 64px;
      background: var(--grad-primary);
      border-radius: 0 0 4px 0;
    }

    .step-card:hover {
      transform: translateY(-5px);
      background: #fff;
      box-shadow: var(--shadow-md);
    }

    .step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
      padding: 0 10px;
      border-radius: 10px;
      background: var(--grad-primary);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .5px;
    }

    .step-icon {
      display: block;
      margin-top: 18px;
      color: var(--primary);
      font-size: 22px;
    }

    .step-card h3 {
      font-size: 17px;
      margin: 8px 0 6px;
    }

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

    /* FAQ */
    .faq-section {
      background: #FBF9FF;
      border-top: 1px solid var(--line);
    }

    .faq-grid {
      margin-top: 24px;
    }

    .faq-grid .cell {
      display: flex;
      margin-bottom: 16px;
    }

    .faq-item {
      width: 100%;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      transition: box-shadow .25s ease, border-color .25s ease;
    }

    .faq-item[open] {
      border-color: rgba(108, 76, 241, .32);
      box-shadow: 0 8px 28px rgba(30, 23, 51, .08);
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 64px;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
      list-style: none;
    }

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

    .faq-item summary .faq-q {
      flex: 1 1 auto;
    }

    .faq-item summary .fa-plus {
      flex: 0 0 auto;
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(108, 76, 241, .1);
      color: var(--primary);
      font-size: 13px;
      transition: transform .3s ease, background .3s ease, color .3s ease;
    }

    .faq-item[open] summary .fa-plus {
      background: var(--primary);
      color: #fff;
      transform: rotate(45deg);
    }

    .faq-a {
      padding: 0 22px 20px;
      font-size: 15px;
      line-height: 1.8;
      color: var(--text);
    }

    .faq-a p:last-child {
      margin: 0;
    }

    /* CTA */
    .cta-area {
      padding: 8px 0 clamp(56px, 8vw, 88px);
    }

    .cta-panel {
      position: relative;
      overflow: hidden;
      border-radius: 30px;
      padding: clamp(34px, 5vw, 62px);
      color: #fff;
      background-image:
        radial-gradient(680px 360px at 86% 15%, rgba(242, 86, 122, .34), transparent 60%),
        radial-gradient(640px 380px at 2% 100%, rgba(25, 183, 198, .24), transparent 55%),
        linear-gradient(120deg, #1C1239 0%, #3A28A8 48%, #C23B72 125%);
      box-shadow: var(--shadow-lg);
    }

    .cta-panel-bg {
      position: absolute;
      inset: 0;
      background-image: url('/assets/images/backpic/back-3.webp');
      background-position: center;
      background-size: cover;
      opacity: .34;
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .cta-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .cta-copy {
      flex: 1 1 460px;
    }

    .cta-copy .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 13px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .13);
      border: 1px solid rgba(255, 255, 255, .2);
      font-size: 13px;
      font-weight: 600;
      color: #fff;
    }

    .cta-copy h2 {
      font-size: clamp(26px, 2.8vw, 36px);
      color: #fff;
      margin: 14px 0 10px;
    }

    .cta-copy p {
      color: rgba(255, 255, 255, .85);
      margin: 0;
      max-width: 580px;
    }

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

    .cta-panel .btn-ghost {
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .36);
      color: #fff;
    }

    .cta-panel .btn-ghost:hover {
      background: rgba(255, 255, 255, .22);
      color: #fff;
    }

    /* Footer */
    .site-footer {
      background: linear-gradient(180deg, #17122F 0%, #221B45 100%);
      color: #B6ACD9;
    }

    .footer-wave {
      line-height: 0;
      margin-top: -1px;
    }

    .footer-wave svg {
      width: 100%;
      height: 40px;
      display: block;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 34px;
      padding: 44px 0 36px;
    }

    .footer-brand {
      max-width: 360px;
    }

    .site-footer .brand-logo .brand-text {
      color: #fff;
    }

    .site-footer .brand-logo .logo-mark {
      box-shadow: none;
    }

    .footer-brand p {
      margin: 14px 0 20px;
      color: #9B91C4;
      font-size: 14px;
      line-height: 1.8;
    }

    .social-row {
      display: flex;
      gap: 10px;
    }

    .social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .08);
      color: #CFC5ED;
      transition: background .25s ease, color .25s ease, transform .25s ease;
    }

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

    .footer-title {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 14px;
      letter-spacing: .5px;
    }

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

    .footer-links a {
      color: #9B91C4;
      font-size: 14px;
      text-decoration: none;
      transition: color .2s ease, padding-left .2s ease;
    }

    .footer-links a:hover {
      color: #fff;
      padding-left: 4px;
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 8px 20px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      padding: 20px 0 24px;
      color: #847AAD;
      font-size: 13px;
      line-height: 1.8;
    }

    /* Responsive */
    @media (min-width: 1024px) and (max-width: 1279px) {
      .top-search {
        flex-basis: 44px;
        flex-grow: 0;
        max-width: 44px;
      }

      .top-search .search-input {
        opacity: 0;
        padding: 0;
      }

      .top-search .search-icon {
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .hotkey {
        display: none;
      }

      .primary-nav a {
        padding: 0 10px;
        font-size: 14px;
      }

      .header-cta {
        font-size: 13px;
        padding: 0 14px;
      }
    }

    @media (max-width: 1023px) {
      .header-inner {
        min-height: 64px;
      }

      .primary-nav {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 70px;
        z-index: 98;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        margin: 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 2px;
        padding: 12px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: var(--shadow-md);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
      }

      .primary-nav a {
        width: 100%;
        height: 48px;
        padding: 0 14px;
        font-size: 15px;
        border-radius: 10px;
      }

      .primary-nav a.active {
        background: var(--soft);
      }

      .primary-nav a.active::after {
        left: auto;
        right: auto;
        top: 15px;
        bottom: auto;
        left: 0;
        width: 3px;
        height: 18px;
        border-radius: 0 3px 3px 0;
      }

      body.nav-open .primary-nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      body.nav-open {
        overflow: hidden;
      }

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

      .top-search {
        display: none;
      }

      .hero-media-wrap {
        justify-content: center;
        margin-top: 30px;
      }

      .hero-frame {
        max-width: 500px;
      }
    }

    @media (max-width: 767px) {
      .brand-logo .logo-mark {
        width: 34px;
        height: 34px;
        font-size: 15px;
      }

      .brand-logo .brand-text {
        font-size: 16px;
        letter-spacing: .3px;
      }

      .header-tools {
        gap: 4px;
      }

      .tool-icon {
        display: none;
      }

      .header-cta {
        font-size: 13px;
        padding: 0 14px;
        height: 38px;
        border-radius: 11px;
      }

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

      .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
      }
    }

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

      .header-cta {
        max-width: 92px;
        padding: 0 12px;
      }

      .header-cta .cta-icon {
        display: none;
      }

      .btn-lg {
        width: 100%;
      }

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

      .hero-frame {
        border-width: 4px;
      }

      .float-top {
        left: 8px;
      }

      .float-bottom {
        right: 6px;
      }

      .hero-float-card {
        padding: 9px 11px;
      }

      .stat-item {
        min-height: auto;
        padding: 10px 4px;
      }

      .guide-card {
        padding: 18px 14px;
      }

      .feature-card-body {
        padding: 22px 18px;
      }

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

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

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