/* roulang page: index */
:root{
  --bg:#f6f8ff;
  --surface:#ffffff;
  --text:#1d2240;
  --muted:#5d6a8a;
  --navy:#182044;
  --blue:#3a5cf5;
  --violet:#7d4ef8;
  --gold:#f5bc57;
  --line:#e6e9f5;
  --radius:20px;
  --radius-sm:12px;
  --shadow:0 18px 42px rgba(25, 38, 86, 0.08);
  --shadow-lg:0 26px 60px rgba(31, 45, 119, 0.14);
  --transition:all .25s ease;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  letter-spacing:.01em;
}
a{text-decoration:none;color:inherit;transition:var(--transition)}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.01em;color:var(--text)}
.container{max-width:1200px}
.bg-white-soft{background:#fff}
.text-muted{color:var(--muted)!important}
.gold-text{color:var(--gold)!important}

/* Buttons */
.btn{border-radius:50rem;font-weight:700;padding:.65rem 1.35rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:var(--transition)}
.btn-star{
  background:linear-gradient(135deg,var(--blue),var(--violet));
  color:#fff!important;
  border:none;
  box-shadow:0 10px 26px rgba(72,80,245,.28);
}
.btn-star:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(72,80,245,.36);background:linear-gradient(135deg,#2f4ff0,#6a38f4)}
.btn-star:active{transform:translateY(0)}
.btn-soft{
  background:#fff;
  border:1px solid var(--line);
  color:var(--navy);
  box-shadow:0 6px 14px rgba(34,42,78,.05);
}
.btn-soft:hover{border-color:#c7d1f5;color:var(--blue);transform:translateY(-2px)}
.btn-soft:active{transform:translateY(0)}

/* navbar */
.navbar{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);
  padding:1rem 0;
  transition:var(--transition);
  border-bottom:1px solid rgba(228,232,246,.7);
}
.navbar.is-sticky{box-shadow:0 10px 36px rgba(26,34,74,.07);padding:.62rem 0}
.brand-icon{
  width:40px;height:40px;border-radius:13px;
  background:linear-gradient(140deg,var(--blue),var(--violet));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.1rem;box-shadow:0 8px 16px rgba(68,71,240,.24);
}
.navbar-brand{font-weight:800;font-size:1.28rem;color:var(--navy);letter-spacing:-.02em;display:flex;align-items:center;gap:.7rem}
.navbar .nav-link{
  color:#3c456d;
  font-weight:600;
  padding:.5rem .9rem!important;
  border-radius:50rem;
  margin:0 .2rem;
}
.navbar .nav-link:hover{color:var(--blue);background:#eef1fe}
.navbar .nav-link.active{
  color:var(--navy);
  background:linear-gradient(135deg,#f1f5ff,#fff);
  box-shadow:inset 0 0 0 1px #dfe6fd;
}
.nav-cta{
  background:linear-gradient(135deg,var(--blue),var(--violet));
  color:#fff!important;
  font-weight:700;
  border-radius:50rem;
  padding:.5rem 1.3rem!important;
  box-shadow:0 8px 18px rgba(69,66,236,.18);
}
.nav-cta:hover{transform:translateY(-2px);color:#fff!important;box-shadow:0 12px 24px rgba(69,66,236,.28)}
.navbar-toggler{border:1px solid var(--line);border-radius:.7rem}
.navbar-toggler:focus{box-shadow:0 0 0 .25rem rgba(93,108,251,.15)}

/* hero */
.hero{
  position:relative;
  color:#fff;
  padding:148px 0 128px;
  background:
    linear-gradient(120deg, rgba(9,14,39,.92) 0%, rgba(28,20,78,.78) 48%, rgba(20,32,112,.64) 100%),
    url('/assets/images/backpic/back-1.webp') center center / cover no-repeat;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;right:-140px;top:-100px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(245,188,87,.24),transparent 70%);
  pointer-events:none;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  border-radius:50rem;
  padding:.45rem 1rem;
  font-size:.86rem;color:#e9edff;font-weight:600;
}
.hero-badge .dot{width:9px;height:9px;border-radius:50%;background:#62e6a6;box-shadow:0 0 0 4px rgba(98,230,166,.18)}
.hero h1{
  color:#fff;
  font-size:clamp(2.3rem,4.6vw,3.9rem);
  line-height:1.16;
  margin:1.7rem 0 1.4rem;
  max-width:14em;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(135deg,#ffe1a1,#ffc46b);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-lead{
  color:#dfe3ff;
  font-size:1.15rem;
  max-width:590px;
  margin-bottom:2rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero-note{color:#c7cdf2;font-size:.88rem;margin-top:1.2rem;display:flex;align-items:center;gap:.6rem}
.hero-note i{color:var(--gold)}
.hero-card{
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:24px;
  color:#fff;
  padding:1.8rem;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.hero-card .status{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.9rem;color:#e2e7ff;margin-bottom:1.2rem;
}
.hero-card .status span i{margin-right:.35rem;color:#62e6a6}
.hero-card h5{color:#fff;font-weight:800}
.hero-list{list-style:none;margin:1rem 0 1.5rem;padding:0}
.hero-list li{padding:.35rem 0;font-size:.95rem;color:#e0e4ff}
.hero-list li i{color:var(--gold);width:24px}
.hero-card .btn{width:100%}
.hero-card .secure-line{display:flex;align-items:center;gap:.6rem;color:#aeb9ff;font-size:.85rem;margin-top:1rem;justify-content:center}
.hero-card .secure-line i{color:#62e6a6}

/* sections */
.section{padding:90px 0}
.section.tint{background:#f2f5ff}
.section.dark{
  background:
    radial-gradient(circle at 15% 20%,rgba(96,82,255,.25),transparent 36%),
    linear-gradient(135deg,#12162f,#2d267a);
  color:#fff;
}
.section-dark-title{color:#fff}
.breadline{
  display:inline-flex;align-items:center;gap:.6rem;
  background:#edf0ff;
  color:var(--blue);
  border-radius:50rem;
  padding:.4rem 1rem;
  font-size:.85rem;font-weight:700;
  letter-spacing:.04em;margin-bottom:1rem;
}
.breadline i{color:var(--gold)}
.dark .breadline{background:rgba(255,255,255,.12);color:#fff}

.section-title{
  font-size:clamp(1.8rem,3vw,2.5rem);
  line-height:1.3;
  margin:0 0 1rem;
}
.section-sub{font-size:1.05rem;color:var(--muted);max-width:680px}
.dark .section-sub{color:#c8cef2}
.section-head{margin-bottom:3.2rem}

/* feature cards */
.feature-card{
  height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.8rem;
  transition:var(--transition);
  box-shadow:0 4px 10px rgba(31,44,99,.02);
}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#d7def8}
.feature-icon{
  width:56px;height:56px;border-radius:17px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  background:linear-gradient(145deg,#eef2ff,#fff);
  border:1px solid #e3e8fd;
  color:var(--blue);
  margin-bottom:1.2rem;
}
.feature-card h5{font-size:1.14rem;margin-bottom:.7rem}
.feature-card p{color:var(--muted);font-size:.95rem;margin-bottom:0}

/* cover section */
.cover-block .row.g-4{}
.cover-card{
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  text-align:left;
  height:100%;
  display:block;
  transition:var(--transition);
  box-shadow:0 4px 8px rgba(26,35,72,.04);
}
.cover-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg)}
.cover-media{position:relative;height:200px;overflow:hidden}
.cover-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cover-card:hover .cover-media img{transform:scale(1.06)}
.cover-tag{
  position:absolute;left:16px;top:16px;
  background:rgba(18,24,56,.62);
  backdrop-filter:blur(10px);
  color:#fff;border-radius:50rem;
  padding:.22rem .8rem;
  font-size:.8rem;font-weight:600;
}
.cover-body{padding:1.3rem 1.4rem 1.5rem}
.cover-body h5{font-size:1.1rem;margin-bottom:.4rem}
.cover-body p{font-size:.92rem;color:var(--muted);margin-bottom:.9rem}
.cover-more{color:var(--blue);font-size:.9rem;font-weight:700;display:inline-flex;align-items:center;gap:.4rem}
.cover-more i{transition:transform .2s}
.cover-more:hover i{transform:translateX(4px)}

/* story split */
.story-wrap{
  background:var(--surface);
  border-radius:30px;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.story-media{min-height:460px;height:100%;position:relative}
.story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-body{padding:3.2rem 3rem}
.story-body h3{font-size:1.9rem;line-height:1.35}
.story-list{list-style:none;margin:1.5rem 0;padding:0}
.story-list li{padding:.5rem 0;display:flex;gap:1rem;align-items:flex-start;color:#363f67}
.story-list li i{color:var(--gold);background:#fff2d9;border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;margin-top:.2rem}

/* steps */
.step-item{position:relative}
.step-num{
  font-size:.92rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:16px;margin-bottom:1.2rem;
  background:linear-gradient(145deg,#ecf0ff,#fff);
  box-shadow:inset 0 0 0 1px #e0e7ff;
  color:var(--blue);
}
.step-card{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(29,40,90,.06);
  border-radius:20px;
  height:100%;
  padding:1.7rem;
  transition:var(--transition);
}
.step-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.step-card h5{font-size:1.08rem;margin-bottom:.5rem}
.step-card p{color:var(--muted);font-size:.94rem;margin:0}

/* stat dark band */
.stat-band{
  padding:46px 0;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.stat-box{text-align:center;padding:1.5rem 1rem}
.stat-num{font-size:2.5rem;font-weight:900;letter-spacing:-.02em;color:#fff}
.stat-num span{color:var(--gold)}
.stat-label{color:#c9cff2;font-size:.9rem;margin-top:.3rem;letter-spacing:.05em}

/* cms list */
.latest-card{
  background:#fff;
  border-radius:24px;
  border:1px solid var(--line);
  padding:2rem;
  box-shadow:0 10px 30px rgba(30,43,97,.04);
}
.latest-list{display:flex;flex-direction:column}
.latest-item{
  display:grid;
  grid-template-columns:120px 150px 1fr auto;
  gap:1.2rem;
  align-items:center;
  padding:1.15rem 1rem;
  border-radius:16px;
  transition:var(--transition);
  border-bottom:1px solid #eef1fa;
}
.latest-item:hover{background:#f7f9ff;transform:translateX(5px)}
.latest-item:last-child{border-bottom:0}
.latest-item .badge-cate{
  background:#f0f2ff;color:var(--violet);font-weight:700;
  border-radius:50rem;padding:.2rem .7rem;font-size:.8rem;
}
.latest-item .title{font-weight:800;color:var(--navy);font-size:1.05rem;line-height:1.4}
.latest-item .summary{color:var(--muted);font-size:.9rem;display:block;margin-top:.2rem}
.latest-item .date{color:#8592b8;font-size:.85rem;display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.empty-tip{
  background:#f8f9fe;border:1px dashed #cfd8f5;border-radius:16px;
  padding:2rem;text-align:center;color:var(--muted);font-weight:600;
}

/* faq */
.faq-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(28,40,84,.06);
}
.accordion-item{border:0;background:transparent}
.accordion-button{
  background:#fff!important;
  color:var(--navy);
  font-weight:800;
  font-size:1.05rem;
  padding:1.4rem 1.5rem;
  box-shadow:none!important;
}
.accordion-button::after{opacity:.6}
.accordion-button:not(.collapsed)::after{opacity:1}
.accordion-button:focus{box-shadow:none}
.accordion-body{color:var(--muted);padding:.2rem 1.6rem 1.5rem;font-size:.98rem;line-height:1.9}
.faq-side{
  background:linear-gradient(160deg,#1f2764,#5440cf);
  border-radius:24px;
  color:#fff;
  padding:2.2rem;
  height:100%;
  display:flex;flex-direction:column;justify-content:center;
}
.faq-side h3{color:#fff;font-size:1.8rem}
.faq-side p{color:#cdd4ff}
.faq-side .icon{
  font-size:2rem;color:var(--gold);margin-bottom:1.4rem;
}

/* cta */
.cta-area{
  border-radius:32px;
  overflow:hidden;
  position:relative;
  background:
    linear-gradient(100deg, rgba(12,19,62,.94), rgba(63,30,160,.85)),
    url('/assets/images/backpic/back-3.webp') center center / cover no-repeat;
  padding:4rem 3rem;
  text-align:center;
  color:#fff;
  box-shadow:0 30px 80px rgba(25,36,112,.25);
}
.cta-area h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.9rem);margin-bottom:1rem}
.cta-area p{color:#dfe4ff;max-width:620px;margin:0 auto 2rem}
.cta-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  color:#fff;background:rgba(255,255,255,.12);
  border-radius:50rem;padding:.4rem 1rem;margin-bottom:1.2rem;
  font-size:.87rem;border:1px solid rgba(255,255,255,.2);
}

/* footer */
.footer{
  background:#10142e;
  color:#b7bfe4;
  padding:4.5rem 0 0;
}
.footer .brand-lg{color:#fff;font-size:1.4rem;font-weight:800;display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.footer p{color:#aeb6da;font-size:.95rem}
.footer h5{color:#fff;font-size:.95rem;font-weight:700;margin-bottom:1rem;letter-spacing:.08em}
.footer a{color:#b7bfe4;display:block;padding:.24rem 0;font-size:.94rem}
.footer a:hover{color:#fff;transform:translateX(3px)}
.footer .social{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);color:#ccd3fe;
  margin-right:.6rem;font-size:.95rem;
}
.footer .social:hover{background:#fff;color:#10142e;border-color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:3rem;padding:1.4rem 0;
  font-size:.85rem;color:#8a94c4;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
}

/* misc */
.circle-check{color:#52c988}
.overline{font-size:.86rem;font-weight:800;color:var(--blue);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem}
.dark .overline{color:var(--gold)}
.rounded-shadow{box-shadow:var(--shadow)}
.font-weight-bold{font-weight:800}

/* responsive */
@media (max-width: 991px){
  .navbar-collapse{
    background:#fff;
    border-radius:20px;
    padding:1.2rem;
    box-shadow:0 20px 42px rgba(22,27,62,.12);
    margin-top:1rem;
  }
  .navbar .nav-link{margin:0;padding:.7rem .9rem!important;border-radius:12px}
  .nav-cta{margin-left:0;text-align:center}
  .hero{padding:110px 0 90px}
  .section{padding:66px 0}
  .story-body{padding:2.4rem 1.8rem}
  .faq-side{margin-top:1.4rem}
}
@media (max-width: 767px){
  .hero h1{font-size:2.15rem}
  .hero-actions .btn{width:100%}
  .cta-area{padding:2.8rem 1.3rem}
  .latest-item{grid-template-columns:1fr 1fr;gap:.7rem 1rem}
  .latest-item .title{grid-column:1 / -1;order:-1}
  .latest-item .summary{grid-column:1 / -1;display:none}
  .latest-item .date{text-align:right}
}
@media (max-width: 520px){
  .navbar-brand{font-size:1.12rem;gap:.5rem}
  .brand-icon{width:34px;height:34px;border-radius:10px;font-size:.95rem}
  .hero h1{font-size:1.95rem}
  .hero-lead{font-size:1rem}
  .section-title{font-size:1.65rem}
  .feature-card{padding:1.35rem}
  .latest-card{padding:1.2rem}
  .latest-item{grid-template-columns:1fr;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
  .latest-item .date{display:none}
  .footer-bottom{justify-content:center;text-align:center}
}

/* roulang page: category1 */
:root {
  --ink: #172038;
  --muted: #5d6986;
  --soft-bg: #f3f5fb;
  --line: #e5e9f2;
  --dark-900: #081129;
  --dark-800: #0d1a45;
  --dark-700: #162b6e;
  --gold: #f7c843;
  --gold-deep: #f3a900;
  --card-bg: #ffffff;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 8px 24px rgba(15, 25, 60, 0.06);
  --shadow-md: 0 18px 46px rgba(15, 25, 60, 0.10);
  --shadow-lg: 0 32px 72px rgba(8, 17, 46, 0.16);
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: #f7f8fc;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  font-family: inherit;
}

.container {
  max-width: 1220px;
}

/* navbar */
#mainNav {
  padding: 12px 0;
  background: rgba(8, 17, 42, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  transition: background .3s, box-shadow .3s;
}

#mainNav .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.18rem;
  color: #fff;
  letter-spacing: .2px;
}

#mainNav .navbar-brand:hover,
#mainNav .navbar-brand:focus {
  color: var(--gold);
}

.brand-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold), #fff3c4);
  color: var(--dark-900);
  font-size: 18px;
  box-shadow: 0 8px 18px rgba(247, 200, 67, 0.32);
}

.navbar .nav-link {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  padding: 10px 18px;
  border-radius: 999px;
  transition: color .25s, background .25s;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.navbar .nav-link.active {
  color: var(--gold-deep);
  background: rgba(247, 200, 67, 0.12);
}

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

.nav-cta {
  color: #fff;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  border: 0;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(243, 169, 0, 0.28);
  transition: transform .25s, box-shadow .25s, color .25s;
}

.nav-cta:hover {
  color: var(--dark-900);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(243, 169, 0, 0.38);
}

.navbar-toggler {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(247, 200, 67, 0.22);
}

/* hero */
.category-hero {
  position: relative;
  padding: 176px 0 124px;
  color: #fff;
  background:
    linear-gradient(100deg, rgba(4, 9, 28, 0.96) 0%, rgba(8, 18, 52, 0.86) 44%, rgba(13, 29, 72, 0.52) 100%),
    url('/assets/images/backpic/back-1.webp') center / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
}

.category-hero .hero-card {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid rgba(247, 200, 67, 0.35);
  background: rgba(247, 200, 67, 0.12);
  color: #ffe5a3;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: .3px;
  margin-bottom: 24px;
  backdrop-filter: blur(4px);
}

.category-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: .5px;
  margin-bottom: 20px;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}

.category-hero h1 .text-gold {
  color: var(--gold);
}

.hero-subtitle {
  font-size: 1.12rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 34px;
  max-width: 640px;
}

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

.btn {
  border-radius: 999px;
  font-weight: 700;
  padding: 12px 26px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}

.btn-gold {
  background: linear-gradient(135deg, #ffe08a, var(--gold-deep));
  color: var(--dark-900);
  box-shadow: 0 16px 34px rgba(243, 169, 0, 0.34);
}

.btn-gold:hover {
  transform: translateY(-3px);
  color: var(--dark-900);
  box-shadow: 0 22px 42px rgba(243, 169, 0, 0.44);
}

.btn-ghost-light {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  backdrop-filter: blur(6px);
}

.btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
  transform: translateY(-3px);
}

.hero-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 0;
  margin: 36px 0 0;
}

.hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.76);
  font-size: .94rem;
}

.hero-meta i {
  color: var(--gold);
}

/* sections */
.section {
  padding: 96px 0;
}

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

.section-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dark-700);
  background: #eef1fb;
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: .4px;
  margin-bottom: 18px;
}

.section-head h2 {
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--dark-900);
  margin: 0 0 12px;
}

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

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

/* feature */
.feature-card {
  position: relative;
  height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s;
  overflow: hidden;
}

.feature-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dark-700), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s;
}

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

.feature-card:hover::after {
  transform: scaleX(1);
}

.feature-card .feature-icon {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #edf1fe, #fdf6e1);
  color: var(--dark-700);
  font-size: 26px;
  margin-bottom: 24px;
  box-shadow: inset 0 0 0 1px rgba(23, 36, 88, 0.05), 0 10px 24px rgba(23, 36, 88, 0.08);
}

.feature-tag {
  display: inline-block;
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 4px 14px;
  font-size: 0.78rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .4px;
}

.tag-gold {
  color: #774d00;
  background: #fff0c4;
}

.tag-blue {
  color: #1644a4;
  background: #e7ecff;
}

.tag-soft {
  color: #965300;
  background: #ffe4c8;
}

.feature-card h3 {
  font-size: 1.32rem;
  font-weight: 750;
  color: var(--dark-900);
  margin-bottom: 12px;
}

.feature-card p {
  color: var(--muted);
  margin: 0;
  font-size: .98rem;
}

/* scenario */
.bg-soft {
  background: var(--soft-bg);
}

.scenario-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .3s, box-shadow .3s;
}

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

.scenario-card .card-media {
  position: relative;
  height: 200px;
  overflow: hidden;
}

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

.scenario-card:hover .card-media img {
  transform: scale(1.06);
}

.scenario-card .media-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(8, 17, 42, 0.72);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .83rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.scenario-card .card-body-media {
  padding: 28px;
  flex: 1;
}

.scenario-card h3 {
  font-size: 1.24rem;
  font-weight: 750;
  margin-bottom: 10px;
  color: var(--dark-900);
}

.scenario-card p {
  color: var(--muted);
  font-size: .96rem;
  margin-bottom: 16px;
}

.scenario-link {
  color: var(--dark-700);
  font-weight: 700;
  font-size: .93rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

.scenario-link:hover {
  color: var(--gold-deep);
}

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

/* flow */
.flow-section {
  position: relative;
  background: linear-gradient(135deg, #0a1740, #0f2364 58%, #16317e);
  color: #fff;
  overflow: hidden;
}

.flow-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(247, 200, 67, 0.14), transparent 28%),
    radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.08), transparent 24%);
  pointer-events: none;
}

.flow-section .eyebrow-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffeec0;
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: 18px;
}

.flow-section h2 {
  color: #fff;
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 14px;
}

.flow-section .section-lead {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 36px;
}

.step-card {
  height: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 32px 28px;
  backdrop-filter: blur(10px);
  position: relative;
  transition: background .3s, transform .3s;
}

.step-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-5px);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, var(--gold), #fff0bc);
  color: var(--dark-900);
  font-weight: 900;
  font-size: 1.3rem;
  border-radius: 16px;
  margin-bottom: 20px;
  box-shadow: 0 12px 24px rgba(247, 200, 67, 0.26);
}

.step-card h3 {
  color: #fff;
  font-size: 1.18rem;
  font-weight: 750;
  margin-bottom: 12px;
}

.step-card p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-size: .95rem;
}

/* security */
.security-grid {
  align-items: center;
  row-gap: 42px;
}

.security-media {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

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

.security-media .media-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(8, 17, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10px 20px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  font-size: .9rem;
  font-weight: 700;
}

.security-content h2 {
  color: var(--dark-900);
  margin-bottom: 16px;
  font-size: clamp(1.6rem, 2.5vw, 2.3rem);
  font-weight: 800;
}

.security-content p {
  color: var(--muted);
  margin-bottom: 20px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.check-list li {
  padding: 10px 0 10px 40px;
  position: relative;
  color: var(--ink);
  border-bottom: 1px dashed var(--line);
}

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

.check-list li i {
  position: absolute;
  left: 0;
  top: 14px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e9f8ef;
  color: #1b9b55;
  font-size: .7rem;
}

.btn-primary-dark {
  background: var(--dark-900);
  color: #fff;
}

.btn-primary-dark:hover {
  background: var(--dark-700);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(8, 17, 42, 0.24);
}

/* FAQ */
.faq-q-list {
  max-width: 920px;
}

.faq-item {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(15, 25, 60, 0.04);
  margin-bottom: 16px;
  overflow: hidden;
}

.faq-item .accordion-button {
  padding: 22px 26px;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--dark-900);
  background: transparent;
  box-shadow: none;
  border-radius: 22px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-item .accordion-button:not(.collapsed) {
  color: var(--dark-700);
  border-bottom: 1px solid var(--line);
}

.faq-item .accordion-button::after {
  background: none;
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--dark-700);
  width: auto;
  height: auto;
  font-size: 1rem;
  transition: transform .3s;
}

.faq-item .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.faq-item .accordion-body {
  padding: 10px 28px 26px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.9;
}

/* CTA */
.cta-section {
  padding: 72px 0 80px;
}

.cta-panel {
  position: relative;
  border-radius: 36px;
  color: #fff;
  padding: 64px 56px;
  overflow: hidden;
  background:
    linear-gradient(96deg, rgba(5, 10, 32, 0.94), rgba(16, 34, 94, 0.86), rgba(22, 49, 126, 0.74)),
    url('/assets/images/backpic/back-2.png') center / cover no-repeat;
  box-shadow: var(--shadow-lg);
}

.cta-panel::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -70px;
  top: -70px;
  background: radial-gradient(circle, rgba(247, 200, 67, 0.34), transparent 70%);
  pointer-events: none;
}

.cta-panel h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 850;
  letter-spacing: .2px;
  margin-bottom: 16px;
  line-height: 1.3;
}

.cta-panel p {
  color: rgba(255, 255, 255, 0.76);
  max-width: 640px;
  font-size: 1.05rem;
  margin-bottom: 28px;
}

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

/* footer */
.footer {
  background: var(--dark-900);
  color: #b6c0da;
  padding: 64px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer .brand-lg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 14px;
}

.footer p {
  color: #8b97bd;
  font-size: .95rem;
  line-height: 1.9;
}

.footer .social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  margin-right: 8px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background .3s, color .3s, transform .3s;
}

.footer .social:hover {
  background: var(--gold);
  color: var(--dark-900);
  transform: translateY(-3px);
}

.footer h5 {
  color: #fff;
  font-size: 1rem;
  font-weight: 750;
  margin-bottom: 18px;
  letter-spacing: .2px;
}

.footer a {
  display: block;
  color: #8b97bd;
  padding: 5px 0;
  font-size: .95rem;
}

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

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: .88rem;
  color: #6d7a9c;
  padding: 22px 0 26px;
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

/* responsive */
@media (max-width: 992px) {
  #mainNav .navbar-collapse {
    background: rgba(8, 17, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 18px 20px;
    margin-top: 12px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  }

  #mainNav .nav-link {
    padding: 11px 14px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
  }

  #mainNav .nav-link.active {
    background: rgba(247, 200, 67, 0.12);
  }

  .nav-cta {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
  }

  .section {
    padding: 74px 0;
  }

  .category-hero {
    padding: 150px 0 96px;
  }

  .security-media img {
    height: 380px;
  }

  .cta-panel {
    padding: 44px 30px;
  }
}

@media (max-width: 768px) {
  .category-hero {
    text-align: left;
    padding: 135px 0 80px;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-meta {
    gap: 8px 14px;
  }

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

  .feature-card {
    padding: 28px 22px;
  }

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

  .security-media img {
    height: 300px;
  }

  .cta-panel h2 {
    font-size: 1.7rem;
  }
}

@media (max-width: 576px) {
  .section {
    padding: 62px 0;
  }

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

  .category-hero h1 {
    font-size: 2.1rem;
  }

  .hero-badge {
    font-size: .8rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

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

  .scenario-card .card-media {
    height: 180px;
  }

  .cta-panel {
    padding: 38px 22px;
    border-radius: 26px;
  }

  .footer {
    padding-top: 44px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: left;
  }
}

/* roulang page: article */
:root {
            --space-950:#070f1c;
            --space-900:#0b1c33;
            --space-800:#102840;
            --space-700:#16384f;
            --gold-200:#f8e5c0;
            --gold-300:#f0c988;
            --gold-400:#e9b75e;
            --gold-500:#d99b3a;
            --gold-600:#b87a28;
            --ink:#132238;
            --muted:#5f6e82;
            --border:#dae2ed;
            --surface:#ffffff;
            --bg:#f5f7fb;
            --bg-soft:#eef2f8;
            --radius-xl:28px;
            --radius-lg:20px;
            --radius-md:14px;
            --shadow-sm:0 8px 24px rgba(15,35,70,.08);
            --shadow-md:0 16px 40px rgba(15,35,70,.10);
            --shadow-lg:0 26px 70px rgba(9,25,52,.14);
            --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
        }

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

        html {
            scroll-behavior:smooth;
        }

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

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

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

        a:hover {
            color:var(--gold-500);
        }

        .container {
            max-width:1200px;
        }

        .section {
            padding:84px 0;
            position:relative;
        }

        .section-alt {
            background:var(--surface);
            border-top:1px solid rgba(218,226,237,.7);
            border-bottom:1px solid rgba(218,226,237,.7);
        }

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

        .section-head .eyebrow {
            margin-bottom:14px;
        }

        .section-head h2 {
            font-size:clamp(1.8rem,3vw,2.5rem);
            font-weight:800;
            letter-spacing:-.01em;
            color:var(--space-900);
            line-height:1.25;
            margin:0 0 16px;
        }

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

        .eyebrow {
            display:inline-flex;
            align-items:center;
            gap:10px;
            font-size:.82rem;
            font-weight:700;
            letter-spacing:.08em;
            color:var(--gold-600);
            background:linear-gradient(135deg,rgba(233,183,94,.18),rgba(233,183,94,.08));
            padding:8px 16px;
            border-radius:999px;
            border:1px solid rgba(217,155,58,.25);
        }

        .navbar {
            padding:14px 0;
            background:rgba(7,15,28,.82);
            backdrop-filter:blur(18px);
            -webkit-backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(255,255,255,.07);
            transition:background .3s ease;
        }

        .navbar .container {
            position:relative;
        }

        .navbar-brand {
            display:inline-flex;
            align-items:center;
            gap:10px;
            font-weight:800;
            font-size:1.16rem;
            color:#ffffff;
            letter-spacing:.01em;
        }

        .navbar-brand:hover {
            color:#fff;
        }

        .brand-icon {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:40px;
            height:40px;
            border-radius:13px;
            background:linear-gradient(135deg,#f0c987,#c98d31);
            color:#0b1c33;
            box-shadow:0 8px 22px rgba(233,183,94,.32);
        }

        .navbar-nav {
            gap:2px;
        }

        .nav-link {
            color:rgba(255,255,255,.78) !important;
            font-weight:600;
            font-size:.95rem;
            border-radius:10px;
            padding:.55rem .82rem !important;
            transition:all .25s ease;
        }

        .nav-link:hover,
        .nav-link:focus {
            color:#fff !important;
            background:rgba(255,255,255,.08);
        }

        .nav-link.active {
            color:#fff !important;
            background:linear-gradient(135deg,rgba(233,183,94,.28),rgba(217,155,58,.12));
        }

        .nav-cta {
            background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
            color:var(--space-900) !important;
            border:none;
            border-radius:14px;
            padding:.68rem 1.1rem;
            font-weight:800;
            font-size:.92rem;
            box-shadow:0 12px 30px rgba(217,155,58,.28);
            transition:all .3s ease;
        }

        .nav-cta:hover {
            transform:translateY(-3px);
            color:var(--space-900) !important;
            box-shadow:0 18px 38px rgba(217,155,58,.38);
        }

        .btn {
            border-radius:13px;
            padding:.74rem 1.4rem;
            font-weight:700;
            transition:all .3s ease;
        }

        .btn-gold {
            background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
            border:0;
            color:var(--space-900);
            box-shadow:0 16px 38px rgba(217,155,58,.26);
        }

        .btn-gold:hover {
            transform:translateY(-3px);
            background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
            color:var(--space-900);
            box-shadow:0 22px 46px rgba(217,155,58,.34);
        }

        .btn-outline-light {
            border:1px solid rgba(255,255,255,.5);
            color:#fff;
            background:transparent;
        }

        .btn-outline-light:hover {
            background:rgba(255,255,255,.12);
            border-color:#fff;
            color:#fff;
            transform:translateY(-3px);
        }

        .btn:focus-visible,
        .nav-cta:focus-visible {
            outline:3px solid rgba(233,183,94,.55);
            outline-offset:2px;
        }

        .article-hero {
            position:relative;
            padding:168px 0 80px;
            background-position:center;
            background-size:cover;
            background-repeat:no-repeat;
            color:#fff;
            isolation:isolate;
        }

        .article-hero::before {
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg,rgba(6,13,26,.38) 0%,rgba(6,13,26,.78) 70%,rgba(6,13,26,.93) 100%);
            z-index:-1;
        }

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

        .badge-hero {
            display:inline-flex;
            align-items:center;
            gap:8px;
            background:rgba(255,255,255,.14);
            padding:8px 16px;
            border:1px solid rgba(255,255,255,.2);
            border-radius:999px;
            color:var(--gold-200);
            font-weight:700;
            font-size:.86rem;
            backdrop-filter:blur(8px);
            margin-bottom:22px;
        }

        .article-hero h1 {
            font-size:clamp(2.1rem,4.6vw,3.45rem);
            font-weight:800;
            line-height:1.18;
            letter-spacing:-.02em;
            margin:0 0 20px;
            text-shadow:0 8px 30px rgba(0,0,0,.2);
        }

        .hero-lead {
            font-size:1.15rem;
            line-height:1.8;
            color:rgba(255,255,255,.88);
            max-width:800px;
            margin:0 0 28px;
        }

        .article-meta {
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:14px 20px;
            color:rgba(255,255,255,.82);
            font-size:.94rem;
        }

        .article-meta span {
            display:inline-flex;
            align-items:center;
            gap:7px;
        }

        .article-category {
            background:rgba(233,183,94,.18);
            border:1px solid rgba(233,183,94,.3);
            color:var(--gold-200);
            padding:6px 14px;
            border-radius:999px;
            font-weight:700;
        }

        .article-section {
            padding-top:0;
            margin-top:-56px;
            z-index:5;
            position:relative;
        }

        .article-card {
            background:var(--surface);
            border:1px solid rgba(218,226,237,.8);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow-lg);
            padding:clamp(24px,5vw,56px);
        }

        .article-body {
            color:#22334c;
            font-size:1.08rem;
            line-height:1.95;
            overflow-wrap:break-word;
        }

        .article-body p {
            margin-bottom:1.6rem;
        }

        .article-body h1,
        .article-body h2,
        .article-body h3,
        .article-body h4 {
            color:var(--space-900);
            font-weight:800;
            line-height:1.35;
            margin:2.3rem 0 1rem;
            letter-spacing:-.01em;
        }

        .article-body h2 {
            font-size:1.9rem;
        }

        .article-body h3 {
            font-size:1.35rem;
        }

        .article-body h4 {
            font-size:1.1rem;
        }

        .article-body img {
            width:100%;
            height:auto;
            border-radius:18px;
            margin:1.8rem 0;
            box-shadow:var(--shadow-md);
        }

        .article-body blockquote {
            background:linear-gradient(135deg,rgba(233,183,94,.12),rgba(233,183,94,.04));
            border-left:4px solid var(--gold-500);
            border-radius:6px 16px 16px 6px;
            padding:20px 26px;
            margin:1.8rem 0;
            color:#334458;
        }

        .article-body ul,
        .article-body ol {
            margin-bottom:1.5rem;
        }

        .article-body li {
            margin-bottom:.5rem;
        }

        .article-body a {
            color:var(--gold-600);
            font-weight:700;
            text-decoration:underline;
            text-underline-offset:4px;
        }

        .article-body a:hover {
            color:var(--space-800);
        }

        .article-body > *:last-child {
            margin-bottom:0;
        }

        .not-found-card {
            background:#fff;
            border:1px solid var(--border);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow-md);
            padding:60px 32px;
            text-align:center;
            max-width:760px;
            margin:0 auto;
        }

        .not-found-card .nf-icon {
            width:84px;
            height:84px;
            border-radius:24px;
            background:linear-gradient(135deg,rgba(233,183,94,.22),rgba(217,155,58,.08));
            display:inline-flex;
            align-items:center;
            justify-content:center;
            color:var(--gold-600);
            font-size:2rem;
            margin-bottom:22px;
        }

        .not-found-card h2 {
            font-size:1.8rem;
            font-weight:800;
            color:var(--space-900);
        }

        .not-found-card p {
            color:var(--muted);
            margin-bottom:28px;
            max-width:480px;
            margin-left:auto;
            margin-right:auto;
        }

        .feature-wrap {
            align-items:center;
        }

        .feature-content h2 {
            font-size:clamp(1.8rem,3vw,2.4rem);
            font-weight:800;
            color:var(--space-900);
            margin:0 0 18px;
        }

        .feature-content p {
            color:var(--muted);
            font-size:1.05rem;
            margin-bottom:18px;
        }

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

        .check-list li {
            display:flex;
            align-items:flex-start;
            gap:12px;
            font-weight:600;
            padding:7px 0;
            color:var(--ink);
        }

        .check-list i {
            color:var(--gold-600);
            margin-top:6px;
            font-size:1rem;
        }

        .feature-figure {
            position:relative;
            margin:0;
            padding:0;
        }

        .feature-figure img {
            width:100%;
            border-radius:28px;
            box-shadow:var(--shadow-lg);
            object-fit:cover;
        }

        .feature-figure::after {
            content:"";
            position:absolute;
            inset:auto -18px -18px auto;
            width:60%;
            height:60%;
            background:linear-gradient(135deg,rgba(233,183,94,.25),rgba(217,155,58,.06));
            border-radius:32px;
            z-index:-1;
        }

        .safe-section {
            background:linear-gradient(135deg,var(--space-900) 0%,var(--space-800) 55%,#1a4b6d 100%);
            color:#fff;
            padding:88px 0;
            overflow:hidden;
        }

        .safe-card {
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.12);
            border-radius:26px;
            padding:30px;
            height:100%;
            backdrop-filter:blur(4px);
        }

        .safe-card .icon-lg {
            width:56px;
            height:56px;
            border-radius:18px;
            background:linear-gradient(135deg,var(--gold-300),var(--gold-600));
            color:#0b1c33;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:1.3rem;
            margin-bottom:18px;
        }

        .safe-card h4 {
            color:#fff;
            font-weight:800;
            font-size:1.15rem;
            margin-bottom:10px;
        }

        .safe-card p {
            color:rgba(255,255,255,.75);
            font-size:.96rem;
            margin:0;
        }

        .safe-head .eyebrow {
            border-color:rgba(255,255,255,.12);
            background:rgba(255,255,255,.1);
            color:#fff;
        }

        .safe-head h2 {
            color:#fff;
        }

        .safe-head p {
            color:rgba(255,255,255,.76);
        }

        .guide-block {
            background:linear-gradient(180deg,#fff 0%,#f8f9fd 100%);
        }

        .step-card {
            background:#fff;
            border:1px solid var(--border);
            border-radius:var(--radius-lg);
            padding:28px;
            height:100%;
            box-shadow:var(--shadow-sm);
            transition:all .3s ease;
        }

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

        .step-num {
            width:52px;
            height:52px;
            border-radius:16px;
            background:linear-gradient(135deg,#102840,#1b4a6b);
            color:var(--gold-200);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            font-weight:800;
            font-size:1.3rem;
            margin-bottom:18px;
            box-shadow:0 12px 28px rgba(16,40,64,.24);
        }

        .step-card h3 {
            font-size:1.18rem;
            font-weight:800;
            color:var(--space-900);
            margin-bottom:10px;
        }

        .step-card p {
            color:var(--muted);
            font-size:.97rem;
            margin:0;
        }

        .guide-card {
            display:flex;
            flex-direction:column;
            background:#fff;
            border:1px solid var(--border);
            border-radius:22px;
            overflow:hidden;
            height:100%;
            box-shadow:var(--shadow-sm);
            transition:transform .3s ease,box-shadow .3s ease;
        }

        .guide-card:hover {
            transform:translateY(-7px);
            box-shadow:var(--shadow-lg);
        }

        .guide-thumb {
            overflow:hidden;
            position:relative;
        }

        .guide-thumb img {
            width:100%;
            aspect-ratio:16/10;
            object-fit:cover;
            transition:transform .6s ease;
        }

        .guide-card:hover .guide-thumb img {
            transform:scale(1.06);
        }

        .guide-thumb .guide-badge {
            position:absolute;
            left:16px;
            bottom:14px;
            background:rgba(7,15,28,.78);
            backdrop-filter:blur(8px);
            color:#fff;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.14);
            padding:5px 14px;
            font-size:.82rem;
            font-weight:700;
        }

        .guide-body {
            padding:24px;
            display:flex;
            flex-direction:column;
            flex:1;
        }

        .guide-body h3 {
            font-size:1.22rem;
            font-weight:800;
            color:var(--space-900);
            margin-bottom:10px;
        }

        .guide-body p {
            color:var(--muted);
            font-size:.98rem;
            flex:1;
            margin-bottom:16px;
        }

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

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

        .guide-card:hover .link-arrow i {
            transform:translateX(5px);
        }

        .faq-accordion .accordion-item {
            background:#fff;
            border:1px solid var(--border);
            border-radius:18px !important;
            overflow:hidden;
            margin-bottom:14px;
            box-shadow:var(--shadow-sm);
        }

        .faq-accordion .accordion-button {
            background:#fff;
            border:0;
            box-shadow:none;
            color:var(--space-900);
            font-weight:800;
            font-size:1.02rem;
            padding:1.1rem 1.3rem;
        }

        .faq-accordion .accordion-button::after {
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230b1c33'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
        }

        .faq-accordion .accordion-button:not(.collapsed) {
            background:#fff8ec;
            color:var(--space-900);
            border-radius:18px 18px 0 0;
        }

        .faq-accordion .accordion-button:focus {
            outline:none;
            box-shadow:0 0 0 4px rgba(233,183,94,.16);
        }

        .faq-accordion .accordion-body {
            color:var(--muted);
            padding:0 1.3rem 1.3rem;
            line-height:1.8;
            border-top:1px solid rgba(218,226,237,.5);
            margin:0 1.15rem;
            background:#fff8ec;
            border-radius:0 0 18px 18px;
            padding-left:0;
            padding-right:0;
            background:transparent;
        }

        .cta-box {
            background:linear-gradient(135deg,#0c2138,#1a4667);
            border-radius:34px;
            padding:clamp(30px,6vw,70px);
            color:#fff;
            position:relative;
            overflow:hidden;
            box-shadow:var(--shadow-lg);
        }

        .cta-box::before {
            content:"";
            position:absolute;
            width:360px;
            height:360px;
            border-radius:50%;
            background:radial-gradient(circle,rgba(233,183,94,.22),transparent 70%);
            top:-100px;
            right:-80px;
        }

        .cta-box .btn-gold {
            position:relative;
            z-index:2;
        }

        .cta-box .btn-outline-light {
            position:relative;
            z-index:2;
        }

        .cta-box h2 {
            font-size:clamp(1.9rem,3vw,2.6rem);
            font-weight:800;
            margin-bottom:14px;
            max-width:680px;
        }

        .cta-box p {
            color:rgba(255,255,255,.8);
            max-width:620px;
            margin-bottom:0;
        }

        .footer {
            background:var(--space-950);
            color:#a8b5c6;
            padding-top:70px;
            margin-top:0;
        }

        .footer h5 {
            color:#fff;
            font-weight:800;
            font-size:1rem;
            margin-bottom:16px;
            letter-spacing:.01em;
        }

        .brand-lg {
            display:flex;
            align-items:center;
            gap:10px;
            font-size:1.25rem;
            font-weight:800;
            color:#fff;
            margin-bottom:16px;
        }

        .brand-lg .brand-icon {
            width:42px;
            height:42px;
            border-radius:13px;
            background:linear-gradient(135deg,#f0c987,#c98d31);
            color:#0b1c33;
            display:inline-flex;
            align-items:center;
            justify-content:center;
        }

        .footer p {
            color:#8d9db1;
            font-size:.95rem;
            line-height:1.85;
            margin-bottom:12px;
        }

        .footer a {
            color:#9faec2;
            font-size:.94rem;
            display:block;
            padding:.3rem 0;
            transition:color .25s ease,padding-left .25s ease;
        }

        .footer a:hover {
            color:var(--gold-300);
            padding-left:4px;
        }

        .footer .social {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:42px;
            height:42px;
            border-radius:13px;
            background:rgba(255,255,255,.07);
            color:#dbe4ef;
            margin-right:8px;
            transition:background .25s ease,transform .25s ease;
        }

        .footer .social:hover {
            background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
            color:#0b1c33;
            transform:translateY(-3px);
        }

        .footer-bottom {
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            align-items:center;
            gap:10px 20px;
            border-top:1px solid rgba(255,255,255,.08);
            margin-top:52px;
            padding:24px 0 30px;
            font-size:.88rem;
            color:#75869c;
        }

        @media (max-width: 991.98px) {
            .section {
                padding:64px 0;
            }

            .navbar-collapse {
                background:rgba(7,15,28,.98);
                border:1px solid rgba(255,255,255,.08);
                border-radius:18px;
                padding:14px;
                margin-top:14px;
            }

            .navbar-nav {
                gap:4px;
                margin-bottom:10px;
            }

            .nav-link {
                padding:.7rem .9rem !important;
            }

            .nav-cta {
                width:100%;
                justify-content:center;
            }

            .feature-figure {
                margin-top:30px;
            }

            .article-hero {
                padding:140px 0 80px;
            }

            .cta-box {
                text-align:center;
            }

            .cta-box .btn {
                margin-left:6px;
                margin-right:6px;
            }
        }

        @media (max-width: 767.98px) {
            .article-hero h1 {
                font-size:2rem;
            }

            .hero-lead {
                font-size:1rem;
            }

            .section {
                padding:52px 0;
            }

            .footer-bottom {
                flex-direction:column;
                text-align:center;
            }
        }

        @media (max-width: 575.98px) {
            .navbar-brand {
                font-size:.98rem;
                gap:6px;
            }

            .navbar-brand .brand-icon {
                width:32px;
                height:32px;
                font-size:.9rem;
                border-radius:10px;
            }

            .article-card {
                padding:22px 18px;
            }

            .article-section {
                margin-top:-40px;
            }

            .step-card {
                padding:20px;
            }

            .cta-box {
                border-radius:24px;
            }

            .cta-box .btn {
                display:block;
                width:92%;
                margin:.5rem auto;
            }

            .footer .col-6 {
                padding-left:10px;
                padding-right:10px;
            }
        }

/* roulang page: category3 */
:root {
            --primary: #6d28d9;
            --primary-deep: #4c1d95;
            --primary-soft: #ede9fe;
            --secondary: #f59e0b;
            --secondary-soft: #fef3c7;
            --dark: #0f172a;
            --dark-2: #1e293b;
            --text: #1f2937;
            --text-muted: #6b7280;
            --border: #e5e7eb;
            --bg-light: #f8fafc;
            --bg-deep-dark: #020617;
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
            --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);
            --transition: all 0.3s ease;
        }

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

        html {
            scroll-behavior: smooth;
        }

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

        a {
            text-decoration: none;
            transition: var(--transition);
        }

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

        .container {
            max-width: 1280px;
        }

        /* 导航样式 */
        .navbar {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(139, 92, 246, 0.15);
            box-shadow: 0 1px 20px rgba(0, 0, 0, 0.05);
            padding-top: 14px;
            padding-bottom: 14px;
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 1.35rem;
            letter-spacing: -0.3px;
            color: var(--dark) !important;
            transition: var(--transition);
        }

        .navbar-brand .brand-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--primary), #a855f7);
            color: #fff;
            font-size: 1.1rem;
            box-shadow: 0 8px 20px rgba(109, 40, 217, 0.3);
        }

        .navbar-brand:hover {
            color: var(--primary) !important;
        }

        .navbar-nav .nav-link {
            font-weight: 500;
            font-size: 1rem;
            color: var(--dark-2) !important;
            padding: 10px 18px !important;
            border-radius: 100px;
            margin: 0 4px;
            position: relative;
        }

        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transition: var(--transition);
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
            color: var(--primary) !important;
            background: var(--primary-soft);
        }

        .navbar-nav .nav-link:hover::after,
        .navbar-nav .nav-link.active::after {
            width: 20px;
        }

        .navbar-toggler {
            border: none;
            background: none;
            font-size: 1.4rem;
            color: var(--primary);
            padding: 4px 8px;
            border-radius: 8px;
        }

        .navbar-toggler:focus {
            box-shadow: none;
            outline: 2px solid var(--primary);
        }

        .nav-cta {
            background: linear-gradient(135deg, var(--primary), #8b5cf6);
            color: #fff !important;
            border-radius: 100px;
            padding: 10px 22px;
            font-weight: 600;
            font-size: 0.95rem;
            box-shadow: 0 8px 20px rgba(109, 40, 217, 0.3);
            border: none;
            transition: var(--transition);
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(109, 40, 217, 0.4);
            background: linear-gradient(135deg, var(--primary-deep), var(--primary));
        }

        /* 通用按钮 */
        .btn-gradient {
            background: linear-gradient(135deg, var(--primary), #8b5cf6);
            color: #fff;
            border: none;
            border-radius: 100px;
            padding: 12px 28px;
            font-weight: 600;
            box-shadow: 0 8px 20px rgba(109, 40, 217, 0.25);
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-gradient:hover {
            transform: translateY(-3px);
            color: #fff;
            box-shadow: 0 14px 32px rgba(109, 40, 217, 0.35);
        }

        .btn-outline-light {
            border-radius: 100px;
            border: 2px solid rgba(255, 255, 255, 0.7);
            color: #fff;
            padding: 10px 26px;
            font-weight: 600;
            transition: var(--transition);
        }

        .btn-outline-light:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            transform: translateY(-3px);
        }

        .btn-warm {
            background: linear-gradient(135deg, #f59e0b, #f97316);
            color: #fff;
            border: none;
            border-radius: 100px;
            padding: 12px 28px;
            font-weight: 600;
            box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
            transition: var(--transition);
        }

        .btn-warm:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 32px rgba(245, 158, 11, 0.4);
            color: #fff;
        }

        /* Hero */
        .page-hero {
            position: relative;
            background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
            padding: 160px 0 80px 0;
            overflow: hidden;
        }

        .page-hero .hero-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('/assets/images/backpic/back-1.webp');
            background-size: cover;
            background-position: center;
            opacity: 0.25;
        }

        .page-hero .hero-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(76, 29, 149, 0.7), rgba(109, 40, 217, 0.5));
        }

        .page-hero .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #fff;
        }

        .page-hero .badge {
            display: inline-block;
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 8px 18px;
            border-radius: 100px;
            font-weight: 500;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            color: #fff;
            backdrop-filter: blur(8px);
            margin-bottom: 20px;
        }

        .page-hero h1 {
            color: #fff;
            font-size: 3rem;
            font-weight: 800;
            letter-spacing: -1.5px;
            margin-bottom: 20px;
            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .page-hero p.lead {
            color: rgba(255, 255, 255, 0.85);
            font-size: 1.15rem;
            max-width: 680px;
            margin: 0 auto 36px;
        }

        .page-hero .hero-actions {
            display: flex;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .page-hero::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 60px;
            background: #fff;
            border-radius: 50% 50% 0 0 / 30px 30px 0 0;
        }

        /* 内容板块 */
        .section {
            padding: 80px 0;
        }

        .section-head {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-head .section-label {
            display: inline-block;
            background: var(--primary-soft);
            color: var(--primary);
            font-size: 0.9rem;
            font-weight: 600;
            padding: 8px 16px;
            border-radius: 100px;
            margin-bottom: 14px;
        }

        .section-head h2 {
            font-size: 2.4rem;
            font-weight: 700;
            letter-spacing: -0.8px;
            color: var(--dark);
            margin-bottom: 12px;
        }

        .section-head p {
            font-size: 1.05rem;
            color: var(--text-muted);
            max-width: 680px;
            margin: 0 auto;
        }

        /* 核心卖点 */
        .feature-card {
            background: var(--bg-light);
            border-radius: var(--radius-lg);
            padding: 30px 24px;
            height: 100%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
        }

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

        .feature-card .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            border-radius: 18px;
            margin-bottom: 20px;
            color: #fff;
        }

        .feature-icon.ic-purple {
            background: linear-gradient(135deg, #6d28d9, #a855f7);
            box-shadow: 0 10px 24px rgba(109, 40, 217, 0.2);
        }

        .feature-icon.ic-amber {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            box-shadow: 0 10px 24px rgba(245, 158, 11, 0.2);
        }

        .feature-icon.ic-pink {
            background: linear-gradient(135deg, #ec4899, #f472b6);
            box-shadow: 0 10px 24px rgba(236, 72, 153, 0.2);
        }

        .feature-icon.ic-blue {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            box-shadow: 0 10px 24px rgba(59, 130, 246, 0.2);
        }

        .feature-card h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 10px;
        }

        .feature-card p {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin: 0;
        }

        /* 活动卡片 */
        .activity-card {
            background: #fff;
            border-radius: var(--radius-lg);
            overflow: hidden;
            border: 1px solid rgba(139, 92, 246, 0.1);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            height: 100%;
        }

        .activity-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
            border-color: transparent;
        }

        .activity-card .cover {
            position: relative;
            overflow: hidden;
            aspect-ratio: 16 / 9;
            background: var(--primary-soft);
        }

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

        .activity-card:hover .cover img {
            transform: scale(1.08);
        }

        .activity-card .cover .mask {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15, 23, 42, 0.5), transparent 70%);
            opacity: 0;
            transition: var(--transition);
        }

        .activity-card:hover .cover .mask {
            opacity: 1;
        }

        .activity-card .tag {
            position: absolute;
            top: 16px;
            left: 16px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(8px);
            color: var(--primary);
            font-size: 0.8rem;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: 100px;
            z-index: 2;
        }

        .activity-card .card-body {
            padding: 24px 20px 20px;
        }

        .activity-card .card-body h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 8px;
        }

        .activity-card .card-body p {
            font-size: 0.95rem;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .activity-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* 参与流程 */
        .process-section {
            background: linear-gradient(180deg, #f8fafc, #fff);
            border-radius: 40px;
            margin: 20px auto;
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }

        .process-section .process-bg {
            position: absolute;
            top: 0;
            right: -100px;
            width: 300px;
            height: 300px;
            background-image: url('/assets/images/backpic/back-3.webp');
            background-size: cover;
            opacity: 0.1;
            border-radius: 50%;
        }

        .step-card {
            text-align: center;
            padding: 20px;
            position: relative;
        }

        .step-card .step-num {
            width: 48px;
            height: 48px;
            line-height: 48px;
            border-radius: 50%;
            margin: 0 auto 16px;
            background: linear-gradient(135deg, var(--primary), #8b5cf6);
            color: #fff;
            font-weight: 800;
            font-size: 1.2rem;
            box-shadow: 0 8px 20px rgba(109, 40, 217, 0.2);
        }

        .step-card h3 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--dark);
        }

        .step-card p {
            font-size: 0.92rem;
            color: var(--text-muted);
            max-width: 240px;
            margin: 0 auto;
        }

        .arrow-step {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 1.4rem;
            opacity: 0.6;
        }

        /* FAQ */
        .faq-wrap {
            background: var(--bg-light);
            border-radius: var(--radius-lg);
            margin-bottom: 16px;
            border: 1px solid rgba(139, 92, 246, 0.1);
            overflow: hidden;
            transition: var(--transition);
        }

        .faq-wrap:hover {
            border-color: rgba(109, 40, 217, 0.4);
            box-shadow: var(--shadow-sm);
        }

        .faq-wrap .faq-q {
            padding: 22px 24px;
            font-weight: 700;
            font-size: 1.05rem;
            color: var(--dark);
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            gap: 16px;
            background: #fff;
        }

        .faq-wrap .faq-q i {
            color: var(--primary);
            transition: var(--transition);
            flex-shrink: 0;
        }

        .faq-wrap .faq-a {
            padding: 0 24px 0 24px;
            color: var(--text-muted);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            border-top: 1px solid transparent;
        }

        .faq-wrap.active {
            box-shadow: var(--shadow-md);
        }

        .faq-wrap.active .faq-q {
            color: var(--primary);
        }

        .faq-wrap.active .faq-q i {
            transform: rotate(180deg);
        }

        .faq-wrap.active .faq-a {
            max-height: 400px;
            border-top-color: var(--border);
            padding: 16px 24px 24px;
        }

        /* CTA */
        .cta-banner {
            background: linear-gradient(135deg, #4c1d95, #6d28d9, #8b5cf6);
            border-radius: 32px;
            padding: 60px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(109, 40, 217, 0.3);
        }

        .cta-banner .cta-bg {
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background-image: url('/assets/images/backpic/back-2.png');
            background-size: cover;
            opacity: 0.2;
        }

        .cta-banner h2 {
            color: #fff;
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .cta-banner p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 1.05rem;
            max-width: 560px;
        }

        .cta-banner .btn-warm {
            font-size: 1rem;
            padding: 14px 36px;
        }

        /* 页脚 */
        .footer {
            background: var(--bg-deep-dark);
            padding: 80px 0 0;
            margin-top: 80px;
            color: rgba(255, 255, 255, 0.7);
        }

        .footer h5 {
            color: #fff;
            font-weight: 700;
            margin-bottom: 22px;
            font-size: 1rem;
            position: relative;
            padding-bottom: 12px;
        }

        .footer h5::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 24px;
            height: 3px;
            border-radius: 3px;
            background: var(--secondary);
        }

        .footer a {
            color: rgba(255, 255, 255, 0.7);
            display: block;
            padding: 6px 0;
            font-size: 0.95rem;
        }

        .footer a:hover {
            color: #a78bfa;
            padding-left: 6px;
        }

        .brand-lg {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 800;
            font-size: 1.4rem;
            color: #fff;
            margin-bottom: 18px;
        }

        .brand-lg .brand-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 14px;
            background: linear-gradient(135deg, var(--primary), #a855f7);
            color: #fff;
            font-size: 1.2rem;
            box-shadow: 0 10px 24px rgba(109, 40, 217, 0.3);
        }

        .social {
            display: inline-flex !important;
            width: 40px;
            height: 40px;
            border-radius: 12px !important;
            border: 1px solid rgba(255, 255, 255, 0.2);
            align-items: center;
            justify-content: center !important;
            font-size: 1rem;
            color: #fff !important;
            margin-right: 8px;
            padding: 0 !important;
            transition: var(--transition);
        }

        .social:hover {
            background: var(--primary);
            border-color: var(--primary);
            transform: translateY(-4px);
            padding: 0 !important;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding: 20px 0;
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 0.88rem;
        }

        /* 响应式断点 */
        @media (max-width: 1024px) {
            .page-hero h1 {
                font-size: 2.5rem;
            }
            .section-head h2 {
                font-size: 2rem;
            }
            .cta-banner {
                padding: 40px;
            }
        }

        @media (max-width: 768px) {
            .navbar-collapse {
                background: rgba(255, 255, 255, 0.98);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                border-radius: 16px;
                padding: 12px;
                margin-top: 10px;
            }
            .navbar-nav {
                padding-bottom: 10px;
            }
            .page-hero {
                padding: 130px 0 60px;
            }
            .page-hero h1 {
                font-size: 2rem;
            }
            .page-hero p.lead {
                font-size: 1rem;
                margin-bottom: 28px;
            }
            .btn-gradient,
            .btn-outline-light,
            .btn-warm {
                width: 100%;
                justify-content: center;
                margin-bottom: 10px;
            }
            .section {
                padding: 60px 0;
            }
            .arrow-step {
                transform: rotate(90deg);
                padding: 12px 0;
            }
            .cta-banner {
                padding: 32px 24px;
            }
            .cta-banner h2 {
                font-size: 1.8rem;
            }
            .footer-bottom {
                flex-direction: column;
                gap: 4px;
            }
        }

        @media (max-width: 520px) {
            .page-hero h1 {
                font-size: 1.7rem;
            }
            .section-head h2 {
                font-size: 1.6rem;
            }
            .activity-card .card-body {
                padding: 18px;
            }
            .navbar-brand {
                font-size: 1.1rem;
            }
        }

        /* 发现好礼 */
        .gift-card {
            display: flex;
            align-items: center;
            gap: 24px;
            background: #fff;
            border-radius: var(--radius-lg);
            padding: 24px;
            border: 1px solid rgba(139, 92, 246, 0.12);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            height: 100%;
        }

        .gift-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: transparent;
        }

        .gift-icon {
            width: 70px;
            height: 70px;
            flex-shrink: 0;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #ede9fe, #ddd6fe);
            color: var(--primary);
            font-size: 1.8rem;
        }

        .gift-info h4 {
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 6px;
            color: var(--dark);
        }

        .gift-info span {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

/* roulang page: category2 */
:root{
  --ink:#0c1224;
  --ink-2:#161f3d;
  --ink-3:#242f55;
  --brand:#3f5bff;
  --brand-dark:#2f45d6;
  --brand-soft:#eef1ff;
  --aqua:#1fc2c2;
  --gold:#f3b75a;
  --bg:#f5f7fc;
  --surface:#ffffff;
  --text:#1a2138;
  --muted:#616b88;
  --line:#e5e9f5;
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-sm:0 10px 24px -18px rgba(12,18,36,.42);
  --shadow-md:0 24px 48px -30px rgba(12,18,36,.5);
  --shadow-lg:0 40px 80px -40px rgba(12,18,36,.6);
  --nav-h:74px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .22s ease,opacity .22s ease;}
a:hover{color:var(--brand);}
button,input,textarea,select{font:inherit;color:inherit;}
:focus-visible{outline:3px solid rgba(63,91,255,.45);outline-offset:3px;border-radius:6px;}

.container{max-width:1180px;}
section{scroll-margin-top:96px;}

/* ===== 通用标题与文本 ===== */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;letter-spacing:.16em;font-weight:700;
  color:var(--brand);text-transform:uppercase;
  background:var(--brand-soft);
  padding:7px 15px;border-radius:999px;
  margin-bottom:16px;
}
.eyebrow.on-dark{color:#a9b8ff;background:rgba(63,91,255,.18);}
.section{padding:88px 0;}
.section-head{max-width:760px;margin:0 auto 52px;text-align:center;}
.section-head.left{margin-left:0;text-align:left;}
h1,h2,h3,h4,h5{font-weight:800;line-height:1.28;color:var(--ink);letter-spacing:-.01em;}
h1{font-size:clamp(1.85rem,4vw,3rem);}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem);}
h3{font-size:1.13rem;}
.lead{font-size:1.06rem;color:var(--muted);}
.section-head p{color:var(--muted);margin:14px 0 0;}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff;}
.on-dark p,.on-dark .lead{color:rgba(233,238,255,.78);}

/* ===== 按钮 ===== */
.btn{
  border-radius:999px;font-weight:700;padding:.74rem 1.55rem;
  border:1px solid transparent;transition:all .24s ease;letter-spacing:.01em;
}
.btn-brand{
  background:linear-gradient(120deg,var(--brand) 0%,#6a7dff 100%);
  color:#fff;box-shadow:0 16px 32px -18px rgba(63,91,255,.85);
}
.btn-brand:hover,.btn-brand:focus{
  background:linear-gradient(120deg,var(--brand-dark) 0%,var(--brand) 100%);
  color:#fff;transform:translateY(-2px);box-shadow:0 22px 38px -18px rgba(63,91,255,.9);
}
.btn-ghost{
  background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.28);
}
.btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-2px);}
.btn-outline-ink{
  background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm);
}
.btn-outline-ink:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);}
.btn-lg{padding:.9rem 2rem;font-size:1.02rem;}

/* ===== 导航 ===== */
.navbar{
  --bs-navbar-padding-y:.7rem;
  background:rgba(10,15,32,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s ease,box-shadow .3s ease;
  min-height:var(--nav-h);
}
.navbar.scrolled{background:rgba(8,12,26,.97);box-shadow:0 18px 40px -30px rgba(0,0,0,.95);}
.navbar-brand{
  display:flex;align-items:center;gap:10px;
  color:#fff;font-weight:800;font-size:1.06rem;letter-spacing:-.01em;
}
.navbar-brand:hover{color:#fff;}
.brand-icon{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand) 0%,var(--aqua) 100%);
  color:#fff;font-size:1rem;box-shadow:0 10px 22px -12px rgba(63,91,255,.95);
}
.navbar-nav .nav-link{
  color:rgba(226,232,255,.76);font-weight:600;font-size:.95rem;
  padding:.5rem 1rem;border-radius:999px;position:relative;transition:all .22s ease;
}
.navbar-nav .nav-link:hover{color:#fff;background:rgba(255,255,255,.08);}
.navbar-nav .nav-link.active{color:#fff;background:rgba(63,91,255,.28);}
.nav-cta{
  background:linear-gradient(120deg,var(--brand) 0%,#6f81ff 100%);
  color:#fff;font-weight:700;font-size:.92rem;padding:.6rem 1.3rem;
  box-shadow:0 14px 30px -16px rgba(63,91,255,.95);
}
.nav-cta:hover{color:#fff;transform:translateY(-2px);}
.navbar-toggler{
  border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:12px;
  padding:.35rem .6rem;background:rgba(255,255,255,.06);
}
.navbar-toggler:focus{box-shadow:none;}

/* ===== Hero ===== */
.hero{
  position:relative;color:#fff;overflow:hidden;
  padding:calc(var(--nav-h) + 84px) 0 104px;
  background:
    linear-gradient(112deg,rgba(8,12,26,.95) 0%,rgba(9,14,32,.86) 44%,rgba(10,16,38,.66) 100%),
    url('/assets/images/backpic/back-2.png') center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:auto -12% -60% -12%;height:70%;
  background:radial-gradient(60% 100% at 50% 0,rgba(63,91,255,.34) 0%,rgba(63,91,255,0) 70%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2;}
.hero h1{color:#fff;margin:0 0 20px;}
.hero p.lead{color:rgba(226,232,255,.82);max-width:640px;font-size:1.08rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.hero-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
.hero-chip{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:rgba(233,238,255,.9);font-size:.86rem;font-weight:600;
  padding:.5rem 1rem;border-radius:999px;
}
.hero-chip i{color:var(--gold);}
.hero-panel{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-xl);
  padding:28px;backdrop-filter:blur(10px);
  box-shadow:var(--shadow-lg);
}
.hero-panel h3{color:#fff;font-size:1.02rem;margin-bottom:18px;}
.hero-panel .check-row{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.14);
  color:rgba(226,232,255,.85);font-size:.92rem;
}
.hero-panel .check-row:last-child{border-bottom:0;padding-bottom:0;}
.hero-panel .check-row i{color:var(--aqua);margin-top:4px;}

/* ===== 卡片通用 ===== */
.card-soft{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px;height:100%;
  box-shadow:var(--shadow-sm);
  transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;
}
.card-soft:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#d3dafc;}
.card-icon{
  width:50px;height:50px;border-radius:15px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand);font-size:1.15rem;margin-bottom:18px;
}
.card-soft h3{margin-bottom:10px;}
.card-soft p{color:var(--muted);margin:0;font-size:.95rem;}
.tag-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.tag{
  font-size:.78rem;font-weight:700;color:var(--brand);
  background:var(--brand-soft);border-radius:999px;padding:4px 12px;
}
.tag.gold{color:#a5731b;background:#fdf3e0;}
.tag.aqua{color:#0d7c7c;background:#e3f8f8;}

/* ===== 登录流程时间线 ===== */
.flow-wrap{position:relative;}
.flow-item{
  display:flex;gap:20px;padding:26px 28px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);height:100%;
  transition:transform .26s ease,box-shadow .26s ease;
}
.flow-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.flow-num{
  flex:0 0 46px;width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.02rem;color:#fff;
  background:linear-gradient(140deg,var(--ink-2) 0%,var(--brand) 100%);
}
.flow-item h3{font-size:1.04rem;margin-bottom:8px;}
.flow-item p{margin:0;color:var(--muted);font-size:.93rem;}

/* ===== 场景图文 ===== */
.scene-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;height:100%;box-shadow:var(--shadow-sm);
  transition:transform .26s ease,box-shadow .26s ease;
}
.scene-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.scene-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dfe4f5;}
.scene-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.scene-card:hover .scene-media img{transform:scale(1.06);}
.scene-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,18,36,0) 40%,rgba(12,18,36,.62) 100%);
}
.scene-body{padding:24px;}
.scene-body h3{font-size:1.06rem;margin-bottom:10px;}
.scene-body p{color:var(--muted);font-size:.93rem;margin:0;}

/* ===== 深色统计带 ===== */
.dark-band{
  background:
    linear-gradient(120deg,rgba(9,13,30,.96) 0%,rgba(13,20,46,.94) 100%),
    url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
  color:#fff;border-radius:var(--radius-xl);
  padding:56px 44px;box-shadow:var(--shadow-lg);
}
.stat-item h3{
  color:#fff;font-size:2.1rem;margin:0;font-weight:800;letter-spacing:-.02em;
}
.stat-item span{display:block;color:rgba(226,232,255,.72);font-size:.92rem;margin-top:6px;}
.stat-divider{border-right:1px solid rgba(255,255,255,.14);}

/* ===== 对照清单 ===== */
.check-list{list-style:none;padding:0;margin:0;}
.check-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:15px 0;border-bottom:1px dashed var(--line);color:var(--muted);font-size:.95rem;
}
.check-list li:last-child{border-bottom:0;}
.check-list i{color:var(--brand);margin-top:5px;flex:0 0 18px;}
.check-list strong{color:var(--ink);font-weight:700;}

/* ===== FAQ ===== */
.accordion-item{
  background:#fff;border:1px solid var(--line)!important;
  border-radius:var(--radius-md)!important;margin-bottom:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.accordion-button{
  font-weight:700;color:var(--ink);background:#fff;padding:20px 24px;font-size:1rem;
  border-radius:var(--radius-md)!important;
}
.accordion-button:not(.collapsed){color:var(--brand);background:var(--brand-soft);box-shadow:none;}
.accordion-button:focus{box-shadow:none;border-color:transparent;}
.accordion-button::after{
  width:1.1rem;height:1.1rem;background-size:1.1rem;
  filter:invert(33%) sepia(72%) saturate(3200%) hue-rotate(226deg) brightness(97%) contrast(101%);
}
.accordion-body{padding:4px 24px 24px;color:var(--muted);font-size:.95rem;background:#fff;}

/* ===== CTA ===== */
.cta-band{
  background:linear-gradient(118deg,#3f5bff 0%,#6a7dff 55%,#1fc2c2 100%);
  border-radius:var(--radius-xl);color:#fff;padding:62px 48px;
  box-shadow:0 40px 80px -40px rgba(63,91,255,.85);
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;
  border-radius:50%;background:rgba(255,255,255,.14);
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.88);margin-bottom:0;}
.cta-band .btn-white{
  background:#fff;color:var(--brand);font-weight:700;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.5);
}
.cta-band .btn-white:hover{color:var(--brand-dark);transform:translateY(-2px);}
.cta-band .btn-line{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.6);
}
.cta-band .btn-line:hover{background:rgba(255,255,255,.16);color:#fff;}

/* ===== 页脚 ===== */
.footer{
  background:var(--ink);color:rgba(214,221,244,.72);
  padding:72px 0 26px;margin-top:96px;
}
.footer h5{color:#fff;font-size:1rem;margin-bottom:18px;font-weight:700;}
.footer p{font-size:.92rem;line-height:1.8;margin:0;}
.footer a{display:block;color:rgba(214,221,244,.72);font-size:.93rem;padding:5px 0;}
.footer a:hover{color:#fff;}
.brand-lg{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:16px;}
.social{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:#fff!important;margin-right:8px;transition:all .22s ease;
}
.social:hover{background:var(--brand);border-color:var(--brand);transform:translateY(-3px);}
.footer-bottom{
  margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.85rem;color:rgba(214,221,244,.6);
}

/* ===== 响应式 ===== */
@media (max-width:991.98px){
  .navbar-collapse{
    background:#0c1224;border:1px solid rgba(255,255,255,.1);
    border-radius:16px;padding:14px;margin-top:12px;
  }
  .navbar-nav .nav-link{padding:.65rem 1rem;}
  .nav-cta{margin-top:12px;width:100%;justify-content:center;}
  .hero{padding:calc(var(--nav-h) + 56px) 0 76px;}
  .section{padding:68px 0;}
  .hero-panel{margin-top:42px;}
  .dark-band{padding:44px 30px;}
  .stat-divider{border-right:0;}
  .cta-band{padding:48px 28px;}
  .footer{padding:56px 0 22px;margin-top:72px;}
}
@media (max-width:767.98px){
  body{font-size:15.5px;}
  .section{padding:56px 0;}
  .section-head{margin-bottom:38px;}
  .card-soft{padding:24px;}
  .flow-item{padding:22px;}
  .hero-actions .btn{flex:1 1 100%;justify-content:center;text-align:center;}
  .hero-meta{gap:10px;}
  .hero-chip{font-size:.82rem;}
}
@media (max-width:520px){
  .hero{padding:calc(var(--nav-h) + 40px) 0 62px;}
  .hero-panel{padding:22px;}
  .navbar-brand{font-size:.96rem;}
  .brand-lg{font-size:1rem;}
  .cta-band{padding:40px 22px;border-radius:var(--radius-lg);}
  .dark-band{border-radius:var(--radius-lg);padding:34px 22px;}
  .stat-item h3{font-size:1.7rem;}
}