/* roulang page: index */
:root{
        --color-primary:#5B21B6;
        --color-primary-deep:#6D28D9;
        --color-gold:#EAB308;
        --color-amber:#F59E0B;
        --color-pink:#EC4899;
        --color-cyan:#22D3EE;
        --color-dark:#0E0A1F;
        --color-light:#FAF7F2;
        --color-mid:#F1EBF9;
        --color-warm:#F3EEE6;
        --text-main:#1E1A2E;
        --text-sub:#4A4466;
        --text-weak:#8B85A6;
        --border-color:rgba(20,10,40,.08);
        --radius-lg:24px;
        --radius-md:16px;
        --radius-sm:12px;
        --shadow-card:0 1px 3px rgba(20,10,40,.08),0 8px 24px rgba(20,10,40,.06);
        --shadow-hover:0 12px 32px rgba(91,33,182,.18);
        --spacing-section:96px;
        --spacing-section-mobile:64px;
        --gradient-primary:linear-gradient(135deg,#5B21B6 0%,#EAB308 100%);
        --gradient-card:linear-gradient(135deg,rgba(91,33,182,.12) 0%,rgba(234,179,8,.18) 100%);
    }
    *{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',sans-serif;background:var(--color-light);color:var(--text-main);line-height:1.75;font-size:16px;}
    img{max-width:100%;display:block;}
    a{text-decoration:none;color:inherit;transition:color .2s ease;}
    button{font-family:inherit;cursor:pointer;border:none;background:none;}
    input{font-family:inherit;outline:none;}
    .container{max-width:1200px;margin:0 auto;padding:0 24px;}
    .section{padding:var(--spacing-section) 0;}
    .section-alt{background:var(--color-mid);}
    .text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
    .btn-primary{
        display:inline-flex;align-items:center;justify-content:center;gap:8px;
        background:var(--gradient-primary);color:#fff;font-weight:600;
        padding:14px 32px;border-radius:999px;font-size:16px;min-height:48px;
        transition:all .3s ease;box-shadow:0 4px 16px rgba(91,33,182,.25);
        border:1px solid rgba(255,255,255,.15);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(91,33,182,.35);filter:brightness(1.05);}
    .btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(91,33,182,.2);}
    .btn-primary:focus-visible{outline:3px solid rgba(232,121,249,.5);outline-offset:2px;}
    .btn-secondary{
        display:inline-flex;align-items:center;justify-content:center;gap:8px;
        background:transparent;color:var(--color-primary);font-weight:600;
        padding:14px 32px;border-radius:999px;font-size:16px;min-height:48px;
        border:1.5px solid var(--color-primary);transition:all .3s ease;
    }
    .btn-secondary:hover{background:rgba(91,33,182,.08);transform:translateY(-2px);}
    .btn-secondary:active{transform:translateY(0);background:rgba(91,33,182,.14);}
    .btn-secondary:focus-visible{outline:3px solid rgba(232,121,249,.5);outline-offset:2px;}
    .card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);transition:all .3s ease;overflow:hidden;}
    .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(91,33,182,.2);}
    .badge{
        display:inline-flex;align-items:center;gap:4px;
        padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;
        background:rgba(91,33,182,.08);color:var(--color-primary);
    }
    .badge-gold{background:rgba(234,179,8,.12);color:#926A08;}
    .badge-pink{background:rgba(236,72,153,.1);color:#BE185D;}
    .badge-cyan{background:rgba(34,211,238,.1);color:#0E7C9C;}
    .badge-purple{background:rgba(91,33,182,.12);color:var(--color-primary);}
    .faq-item{background:#fff;border-radius:var(--radius-md);border:1px solid var(--border-color);transition:all .3s ease;overflow:hidden;}
    .faq-item.open{border-color:rgba(234,179,8,.4);box-shadow:0 4px 20px rgba(91,33,182,.08);}
    .faq-q{display:flex;align-items:center;gap:16px;padding:22px 28px;cursor:pointer;font-weight:600;font-size:17px;}
    .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 28px;}
    .faq-item.open .faq-a{max-height:300px;padding-bottom:22px;}
    .faq-q .faq-icon{transition:transform .2s ease;color:var(--color-gold);}
    .faq-item.open .faq-icon{transform:rotate(45deg);}
    .nav-pill{
        position:sticky;top:16px;z-index:50;
        background:rgba(250,247,242,.85);backdrop-filter:blur(12px);
        border-radius:999px;box-shadow:0 4px 24px rgba(20,10,40,.1);
        border:1px solid rgba(255,255,255,.6);
        max-width:1200px;margin:16px auto 0;padding:8px 12px;
    }
    .nav-pill .nav-link{
        padding:10px 20px;border-radius:999px;font-weight:500;font-size:15px;
        color:var(--text-main);transition:all .25s ease;white-space:nowrap;
    }
    .nav-pill .nav-link:hover{color:var(--color-primary);background:rgba(91,33,182,.06);}
    .nav-pill .nav-link.active{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 12px rgba(91,33,182,.3);}
    .nav-pill .logo-text{
        font-size:20px;font-weight:800;letter-spacing:.5px;
        background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
        display:flex;align-items:center;gap:4px;
    }
    .nav-pill .logo-text .vii{
        font-size:12px;font-weight:800;background:linear-gradient(135deg,#EC4899,#EAB308);
        -webkit-background-clip:text;-webkit-text-fill-color:transparent;
        padding:2px 6px;border-radius:6px;border:1px solid rgba(236,72,153,.3);
    }
    .hero-section{
        background:var(--color-dark);
        background-image:url('/assets/images/backpic/back-1.png');
        background-size:cover;background-position:center;background-blend-mode:overlay;
        position:relative;overflow:hidden;
    }
    .hero-section::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,10,31,.96) 30%,rgba(14,10,31,.75) 60%,rgba(14,10,31,.4) 100%);}
    .hero-section::after{
        content:'VII';position:absolute;right:4%;top:50%;transform:translateY(-50%);
        font-size:28vw;font-weight:900;line-height:1;
        background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(234,179,8,.15));
        -webkit-background-clip:text;-webkit-text-fill-color:transparent;
        pointer-events:none;z-index:1;font-family:Georgia,serif;
    }
    .hero-glow-1{position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(91,33,182,.35);filter:blur(100px);top:-80px;left:10%;z-index:1;}
    .hero-glow-2{position:absolute;width:360px;height:360px;border-radius:50%;background:rgba(234,179,8,.2);filter:blur(90px);bottom:-60px;right:18%;z-index:1;}
    .hero-content{position:relative;z-index:2;padding:120px 0 110px;}
    .bar-list{border-bottom:1px solid var(--border-color);transition:all .3s ease;}
    .bar-list:last-child{border-bottom:none;}
    .bar-list:hover{background:rgba(91,33,182,.02);}
    .empty-list{
        border:2px dashed rgba(91,33,182,.2);border-radius:var(--radius-md);
        padding:48px 24px;text-align:center;color:var(--text-weak);
    }
    .footer-section{background:var(--color-dark);color:rgba(255,255,255,.7);padding:70px 0 30px;}
    .footer-section h4{color:#fff;font-size:16px;font-weight:600;margin-bottom:20px;}
    .footer-section a{color:rgba(255,255,255,.65);transition:color .25s ease;}
    .footer-section a:hover{color:var(--color-gold);}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;margin-top:48px;font-size:14px;color:rgba(255,255,255,.45);}
    .social-btn{
        display:inline-flex;align-items:center;justify-content:center;
        width:40px;height:40px;border-radius:50%;
        border:1px solid rgba(255,255,255,.2);transition:all .25s ease;
    }
    .social-btn:hover{background:var(--color-primary);border-color:var(--color-primary);transform:translateY(-3px);}
    .bento-card{transition:all .3s ease;position:relative;}
    .bento-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
    .bento-card.gold-edge::before{
        content:'';position:absolute;inset:0;border-radius:var(--radius-lg);
        padding:2px;background:var(--gradient-primary);
        -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
        -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2;
    }
    .news-time{
        display:flex;flex-direction:column;align-items:center;justify-content:center;
        background:var(--gradient-primary);color:#fff;border-radius:10px;
        min-width:64px;height:72px;padding:8px;line-height:1.2;
    }
    .news-time .month{font-size:12px;font-weight:500;opacity:.85;text-transform:uppercase;}
    .news-time .day{font-size:22px;font-weight:800;}
    .mobile-menu{display:none;position:fixed;inset:0;z-index:100;background:rgba(14,10,31,.98);padding:80px 32px 32px;}
    .mobile-menu.open{display:flex;flex-direction:column;}
    .mobile-menu a{color:#fff;font-size:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);}
    .mobile-menu .close-btn{position:absolute;top:24px;right:24px;color:#fff;font-size:24px;}
    @media(max-width:768px){
        .section{padding:var(--spacing-section-mobile) 0;}
        .nav-pill{top:10px;margin:10px 12px 0;padding:6px 8px;}
        .nav-pill .nav-links{display:none;}
        .nav-pill .mobile-toggle{display:block;color:var(--color-primary);padding:8px;border-radius:999px;}
        .hero-content{padding:80px 0 70px;}
        .news-time{min-width:56px;height:62px;}
        .news-time .day{font-size:18px;}
    }
    @media(min-width:769px){
        .nav-pill .mobile-toggle{display:none;}
    }
    @media(max-width:520px){
        .container{padding:0 16px;}
        .hero-content{padding:60px 0 50px;}
        .btn-primary,.btn-secondary{padding:12px 22px;font-size:15px;width:100%;justify-content:center;}
        .btn-group-mobile{flex-direction:column;width:100%;gap:12px;}
    }
    .stats-item{text-align:center;padding:24px 16px;}
    .stats-item .num{font-size:36px;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2;}
    .stats-item .label{color:var(--text-weak);font-size:14px;margin-top:6px;}
    .card-hover-img{overflow:hidden;}
    .card-hover-img img{transition:transform .5s ease;}
    .card-hover-img:hover img{transform:scale(1.05);}
    .cta-section{background:var(--color-dark);background-image:url('/assets/images/backpic/back-2.png');background-size:cover;background-position:center;position:relative;}
    .cta-section::before{content:'';position:absolute;inset:0;background:rgba(14,10,31,.88);}
    .cta-glow-1{position:absolute;width:300px;height:300px;background:rgba(234,179,8,.15);border-radius:50%;filter:blur(80px);top:0;right:5%;z-index:1;}
    .cta-glow-2{position:absolute;width:260px;height:260px;background:rgba(236,72,153,.12);border-radius:50%;filter:blur(70px);bottom:0;left:8%;z-index:1;}
    .cta-content{position:relative;z-index:2;}
    .subscribe-input{
        background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
        border-radius:999px;height:48px;padding:0 24px;color:#fff;font-size:15px;min-width:0;
        transition:border-color .3s ease,box-shadow .3s ease;
    }
    .subscribe-input::placeholder{color:rgba(255,255,255,.4);}
    .subscribe-input:focus{border-color:var(--color-gold);box-shadow:0 0 0 3px rgba(234,179,8,.25);}
    .subscribe-btn{
        background:var(--gradient-primary);color:#fff;height:48px;padding:0 28px;
        border-radius:999px;font-weight:600;transition:all .3s ease;border:1px solid rgba(255,255,255,.15);
        white-space:nowrap;
    }
    .subscribe-btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 24px rgba(234,179,8,.3);}
    .subscribe-btn:active{transform:translateY(0);}
    .subscribe-btn:focus-visible{outline:3px solid rgba(232,121,249,.5);outline-offset:2px;}
    .feature-tag{display:inline-block;padding:6px 16px;border-radius:999px;background:rgba(91,33,182,.06);border:1px solid rgba(91,33,182,.1);font-size:14px;color:var(--color-primary);font-weight:500;margin:0 8px 8px 0;}
    .section-title{font-size:34px;font-weight:800;line-height:1.3;letter-spacing:-.5px;}
    .section-subtitle{font-size:16px;color:var(--text-sub);max-width:640px;line-height:1.8;}
    @media(max-width:768px){
        .section-title{font-size:26px;}
        .hero-section::after{font-size:60vw;right:2%;}
    }
    .banner-section{position:relative;background:var(--color-dark);overflow:hidden;}
    .banner-section::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,10,31,.92) 20%,rgba(14,10,31,.7))}
    .banner-content{position:relative;z-index:2;padding:70px 0;}
    .step-item{display:flex;gap:20px;padding:24px;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);transition:all .3s ease;}
    .step-item:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}
    .step-num{font-size:32px;font-weight:800;line-height:1;color:var(--color-primary);opacity:.25;min-width:40px;}
    h2,h3,h4{line-height:1.35;}

/* roulang page: category1 */
:root {
  --color-primary: #5B21B6;
  --color-primary-deep: #4C1D95;
  --color-gold: #EAB308;
  --color-gold-light: #F59E0B;
  --color-magenta: #EC4899;
  --color-cyan: #22D3EE;
  --color-bg-dark: #0E0A1F;
  --color-bg-light: #FAF7F2;
  --color-bg-mid: #F1EBF9;
  --color-text: #1F1533;
  --color-text-weak: #6B7280;
  --color-border: rgba(20,10,40,.08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-card: 0 1px 3px rgba(20,10,40,.08), 0 8px 24px rgba(20,10,40,.06);
  --shadow-hover: 0 12px 32px rgba(91,33,182,.18);
  --font-sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg-light);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; transition: all .25s ease; }
button { font-family: inherit; }

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

/* ---------- 悬浮胶囊导航 ---------- */
.nav-pill {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: 0 8px 32px rgba(20,10,40,.12), 0 0 0 1px rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.6);
}
.logo-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--color-primary) !important;
}
.logo-text .vii {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-gold);
  border: 1.5px solid rgba(234,179,8,.5);
  border-radius: 6px;
  padding: 2px 5px;
  line-height: 1;
  background: rgba(234,179,8,.08);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: #4B5563;
  white-space: nowrap;
}
.nav-link:hover { color: var(--color-primary); background: rgba(91,33,182,.06); }
.nav-link.active {
  background: linear-gradient(135deg, #6D28D9, #8B5CF6);
  color: #fff;
  box-shadow: 0 4px 16px rgba(91,33,182,.35);
}
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .nav-links { display: none !important; }
  .mobile-toggle { display: inline-flex; }
  .nav-cta { display: none; }
}
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(14,10,31,.97);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu-inner { width: 88%; max-width: 360px; text-align: center; }
.mobile-link {
  display: block;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  border-radius: 16px;
  margin-bottom: 8px;
  transition: all .2s;
}
.mobile-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.mobile-link.active { background: rgba(139,92,246,.22); color: var(--color-gold); }

/* ---------- 按钮 ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6D28D9, #EAB308);
  border: none;
  box-shadow: 0 4px 20px rgba(91,33,182,.3);
  cursor: pointer;
  transition: all .25s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8B5CF6, #F59E0B);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(91,33,182,.4);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 12px rgba(91,33,182,.3); }
.btn-primary:focus-visible {
  outline: 3px solid rgba(232,121,249,.5);
  outline-offset: 2px;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  background: transparent;
  border: 1.5px solid rgba(91,33,182,.35);
  cursor: pointer;
  transition: all .25s ease;
}
.btn-secondary:hover {
  background: rgba(91,33,182,.08);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.btn-secondary:active { transform: translateY(0); }
.btn-secondary:focus-visible {
  outline: 3px solid rgba(91,33,182,.3);
  outline-offset: 2px;
}

/* ---------- 标签 ---------- */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  background: rgba(91,33,182,.1);
  color: var(--color-primary);
  border: 1px solid rgba(91,33,182,.15);
}
.tag-gold {
  background: rgba(234,179,8,.15);
  color: #A16207;
  border-color: rgba(234,179,8,.25);
}

/* ---------- 卡片 ---------- */
.content-card {
  display: block;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all .3s ease;
}
.content-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(91,33,182,.25);
}
.card-img { position: relative; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.content-card:hover .card-img img { transform: scale(1.05); }
.feature-card {
  position: relative;
  border: 2px solid transparent;
  background: 
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(139,92,246,.7), rgba(234,179,8,.7)) border-box;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature-card:hover {
  box-shadow: 0 16px 40px rgba(91,33,182,.22);
  transform: translateY(-4px);
}

/* ---------- Hero ---------- */
.cat-hero {
  position: relative;
  background: var(--color-bg-dark);
  padding: 72px 0 88px;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
}
.cat-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}
.cat-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(14,10,31,.92) 20%, rgba(91,33,182,.35) 60%, rgba(234,179,8,.1) 100%);
}
.cat-hero .hero-content { position: relative; z-index: 2; }
.cat-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gold);
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.3);
  margin-bottom: 24px;
}
.cat-hero h1 {
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 900;
  line-height: 1.25;
  color: #fff;
  letter-spacing: 1px;
}
.cat-hero h1 .gold-text {
  background: linear-gradient(135deg, #EAB308, #F59E0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cat-hero .intro {
  color: rgba(255,255,255,.75);
  font-size: 17px;
  max-width: 620px;
  line-height: 1.8;
  margin-top: 18px;
}
.hero-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,.25), transparent 65%);
  top: -100px;
  right: -60px;
  z-index: 1;
  pointer-events: none;
}
.hero-glow-2 {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.18), transparent 60%);
  bottom: -120px;
  left: 30%;
  z-index: 1;
  pointer-events: none;
}
.vii-watermark {
  position: absolute;
  right: 6%;
  bottom: -20px;
  font-size: 180px;
  font-weight: 900;
  color: rgba(255,255,255,.06);
  z-index: 1;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
  letter-spacing: -8px;
}

/* ---------- 步骤区 ---------- */
.steps-section {
  position: relative;
  background: var(--color-bg-dark);
  padding: 100px 0;
  overflow: hidden;
}
.steps-section .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .12;
}
.steps-section .content { position: relative; z-index: 2; }
.step-item {
  position: relative;
  padding: 32px 28px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-lg);
  transition: all .3s ease;
}
.step-item:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(234,179,8,.3);
  transform: translateY(-4px);
}
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, #6D28D9, #EAB308);
  color: #fff;
  box-shadow: 0 6px 20px rgba(91,33,182,.4);
  margin-bottom: 20px;
}

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
  transition: all .3s ease;
}
.faq-item:hover { border-color: rgba(91,33,182,.25); }
.faq-item.open { border-color: rgba(234,179,8,.4); box-shadow: 0 6px 24px rgba(91,33,182,.08); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 22px 26px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  gap: 16px;
}
.faq-question .faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(91,33,182,.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .3s ease;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #6D28D9, #EAB308);
  color: #fff;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-item.open .faq-answer { max-height: 600px; }
.faq-answer-inner {
  padding: 0 26px 24px;
  font-size: 15px;
  line-height: 1.85;
  color: #4B5563;
  border-top: 1px solid rgba(20,10,40,.05);
  padding-top: 16px;
  margin-top: 4px;
}

/* ---------- CTA / 订阅 ---------- */
.cta-section {
  position: relative;
  background: var(--color-bg-dark);
  padding: 88px 0;
  overflow: hidden;
}
.cta-section .bg-decor {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,.2), transparent 65%);
  top: -80px;
  left: -40px;
}
.cta-section .bg-decor-2 {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.16), transparent 60%);
  bottom: -60px;
  right: 10%;
}
.subscribe-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.subscribe-form input {
  flex: 1;
  min-width: 240px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  padding: 0 22px;
  font-size: 15px;
  color: #fff;
  outline: none;
  transition: all .25s;
}
.subscribe-form input::placeholder { color: rgba(255,255,255,.4); }
.subscribe-form input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(234,179,8,.25);
  background: rgba(255,255,255,.12);
}

/* ---------- 页脚 ---------- */
.footer-section {
  background: var(--color-bg-dark);
  padding: 72px 0 32px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-section h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 18px;
}
.footer-section ul li a {
  color: rgba(255,255,255,.5);
  font-size: 14px;
  transition: all .2s;
}
.footer-section ul li a:hover { color: var(--color-gold); padding-left: 4px; }
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7);
  font-size: 15px;
  transition: all .25s;
}
.social-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-3px);
}

/* ---------- 区块标题 ---------- */
.section-title {
  font-size: clamp(28px, 3.5vw, 38px);
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-text);
  letter-spacing: .5px;
}
.section-sub {
  font-size: 16px;
  color: var(--color-text-weak);
  line-height: 1.8;
  max-width: 560px;
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-kicker::before {
  content: '';
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
  border-radius: 2px;
}

/* ---------- 通用 ---------- */
.bg-mid { background: var(--color-bg-mid); }
.text-gradient {
  background: linear-gradient(135deg, #6D28D9, #D946EF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.divider-line {
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .cat-hero { padding: 56px 0 68px; border-radius: 0 0 28px 28px; }
  .cat-hero h1 { font-size: 30px; }
  .cat-hero .intro { font-size: 15px; }
  .steps-section { padding: 72px 0; }
  .cta-section { padding: 64px 0; }
  .footer-section { padding: 56px 0 24px; }
  .subscribe-form { flex-direction: column; }
  .subscribe-form input { width: 100%; }
  .subscribe-form .btn-primary { width: 100%; }
  .vii-watermark { font-size: 100px; }
}
@media (max-width: 520px) {
  .cat-hero h1 { font-size: 26px; }
  .section-title { font-size: 24px; }
  .nav-pill { padding: 8px 14px; }
  .logo-text { font-size: 19px; }
}

/* roulang page: article */
:root{
--color-primary:#5B21B6;--color-primary-dark:#6D28D9;--color-gold:#EAB308;--color-amber:#F59E0B;--color-pink:#EC4899;--color-cyan:#22D3EE;
--color-bg-dark:#0E0A1F;--color-bg-light:#FAF7F2;--color-bg-dark-mid:#F1EBF9;--color-text:#1F1832;--color-text-muted:#7C6F8A;
--color-border:rgba(20,10,40,.08);--radius-lg:24px;--radius-md:16px;--radius-sm:12px;
--shadow-card:0 1px 3px rgba(20,10,40,.08),0 8px 24px rgba(20,10,40,.06);--shadow-hover:0 12px 32px rgba(91,33,182,.18);
--font-main:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-main);background:var(--color-bg-light);color:var(--color-text);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit;transition:all .25s ease}
button,input{font-family:inherit;outline:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.container-narrow{width:100%;max-width:760px;margin:0 auto;padding:0 24px}
/* ===== 导航 ===== */
.nav-wrap{position:sticky;top:16px;z-index:100;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.nav-pill{pointer-events:auto;width:100%;max-width:1200px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:10px 18px;box-shadow:0 4px 20px rgba(20,10,40,.08)}
.nav-pill .logo-text{font-size:1.35rem;font-weight:900;letter-spacing:.5px;background:linear-gradient(135deg,#5B21B6,#EAB308);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:2px}
.nav-pill .logo-text .vii{font-size:11px;font-weight:800;color:#EC4899;border:1px solid rgba(236,72,153,.35);border-radius:6px;padding:1px 5px;margin-left:4px;-webkit-text-fill-color:#EC4899}
.nav-links .nav-link{font-size:15px;font-weight:500;color:var(--color-text);padding:8px 18px;border-radius:999px;transition:all .25s ease}
.nav-links .nav-link:hover{color:var(--color-primary);background:rgba(91,33,182,.06)}
.nav-links .nav-link.active{background:var(--color-primary);color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(91,33,182,.3)}
/* ===== 移动菜单 ===== */
.mobile-menu{position:fixed;inset:0;background:rgba(14,10,31,.97);backdrop-filter:blur(8px);z-index:200;padding:28px 28px 40px;display:flex;flex-direction:column;
transform:translateY(0);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a.block{color:#fff;font-size:18px;font-weight:500;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-menu a.block:hover{color:#EAB308;padding-left:8px}
.mobile-close{color:#fff;background:transparent;border:none;font-size:30px;cursor:pointer}
/* ===== 文章 Hero ===== */
.article-hero{position:relative;background:var(--color-bg-dark);overflow:hidden}
.article-hero .hero-bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.18}
.article-hero .hero-fx-1{position:absolute;top:-80px;right:-60px;width:340px;height:340px;border-radius:50%;background:rgba(234,179,8,.22);filter:blur(50px)}
.article-hero .hero-fx-2{position:absolute;bottom:-100px;left:-40px;width:320px;height:320px;border-radius:50%;background:rgba(236,72,153,.18);filter:blur(45px)}
.article-hero .hero-fx-3{position:absolute;top:40%;left:50%;width:200px;height:200px;border-radius:50%;background:rgba(34,211,238,.12);filter:blur(55px)}
.breadcrumb{font-size:14px;color:rgba(255,255,255,.55);letter-spacing:.3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumb a:hover{color:#EAB308}
.breadcrumb .sep{color:rgba(255,255,255,.3)}
.article-hero .article-title{font-size:34px;line-height:1.35;font-weight:800;color:#fff;max-width:840px;text-shadow:0 2px 14px rgba(0,0,0,.3)}
.meta-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.75);font-size:13.5px}
.chip-cat{background:rgba(234,179,8,.16);border-color:rgba(234,179,8,.35);color:#EAB308;font-weight:600}
/* ===== 文章正文 ===== */
.article-body{background:var(--color-bg-light);padding:48px 0 64px}
.article-content{font-size:16px;line-height:1.9;color:#333}
.article-content h2{font-size:24px;font-weight:700;margin:1.8em 0 .7em;padding-left:16px;border-left:4px solid var(--color-primary);line-height:1.4}
.article-content h3{font-size:20px;font-weight:600;margin:1.4em 0 .5em;line-height:1.5}
.article-content p{margin-bottom:1.3em}
.article-content img{border-radius:16px;margin:1.6em 0;box-shadow:var(--shadow-card)}
.article-content blockquote{border-left:4px solid var(--color-gold);background:rgba(234,179,8,.06);padding:16px 22px;border-radius:0 14px 14px 0;margin:1.5em 0;color:#5A4B3C}
.article-content ul,.article-content ol{padding-left:1.5em;margin-bottom:1.3em}
.article-content ul{list-style:disc}
.article-content ol{list-style:decimal}
.article-content li{margin-bottom:.4em}
.article-content a{color:var(--color-primary);text-decoration:underline}
.article-content a:hover{color:var(--color-pink)}
/* ===== 标签 ===== */
.tag-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:999px;background:rgba(91,33,182,.06);border:1px solid rgba(91,33,182,.12);color:var(--color-primary);font-size:13px;font-weight:500;transition:all .25s}
.tag-pill:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
/* ===== 相关推荐卡 ===== */
.rec-card{background:#fff;border-radius:20px;border:1px solid var(--color-border);box-shadow:var(--shadow-card);overflow:hidden;transition:all .3s ease;display:block}
.rec-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px);border-color:rgba(91,33,182,.2)}
.rec-card img{width:100%;height:130px;object-fit:cover}
.rec-card .rec-body{padding:18px 20px 20px}
.rec-card .rec-title{font-size:16px;font-weight:700;line-height:1.5;margin-bottom:6px;color:var(--color-text)}
.rec-card:hover .rec-title{color:var(--color-primary)}
.rec-card .rec-text{font-size:13.5px;color:var(--color-text-muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ===== 上一篇/下一篇 ===== */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.post-nav-link{background:#fff;border:1px solid var(--color-border);border-radius:16px;padding:18px 22px;transition:all .3s ease;display:block}
.post-nav-link:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px);border-color:rgba(91,33,182,.3)}
.post-nav-link .label{font-size:12.5px;color:var(--color-text-muted);display:block;margin-bottom:4px}
.post-nav-link .title{font-size:15px;font-weight:600;color:var(--color-text);line-height:1.4}
.post-nav-link:hover .title{color:var(--color-primary)}
/* ===== CTA条 ===== */
.cta-band{background:var(--color-bg-dark);border-radius:28px;overflow:hidden;position:relative}
.cta-band::before{content:'';position:absolute;top:-80px;right:-80px;width:280px;height:280px;border-radius:50%;background:rgba(234,179,8,.25);filter:blur(60px)}
.cta-band::after{content:'';position:absolute;bottom:-80px;left:-60px;width:240px;height:240px;border-radius:50%;background:rgba(236,72,153,.18);filter:blur(55px)}
/* ===== 页脚 ===== */
.footer-section{background:var(--color-bg-dark);color:#fff;padding-top:70px;padding-bottom:30px}
.footer-section h4{font-size:15px;font-weight:700;color:#fff;margin-bottom:18px;letter-spacing:.4px}
.footer-section ul li a{color:rgba(255,255,255,.5);font-size:14.5px;transition:all .25s}
.footer-section ul li a:hover{color:#EAB308;padding-left:4px}
.social-btn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:15px;transition:all .25s}
.social-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translateY(-3px)}
/* ===== 空态 ===== */
.not-found-card{border:2px dashed rgba(91,33,182,.25);border-radius:24px;padding:60px 30px;text-align:center;background:#fff}
.not-found-card .nf-icon{font-size:56px;margin-bottom:18px}
/* ===== 按钮 ===== */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 30px;border-radius:999px;font-size:15px;font-weight:700;color:#fff;
background:linear-gradient(135deg,#5B21B6,#8B5CF6 60%,#EAB308);background-size:150% 150%;border:none;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px rgba(91,33,182,.3)}
.btn-primary:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:0 10px 28px rgba(91,33,182,.35)}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(91,33,182,.25)}
.btn-primary:focus-visible{outline:3px solid rgba(232,121,249,.5);outline-offset:2px}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 30px;border-radius:999px;font-size:15px;font-weight:600;color:var(--color-primary);
background:transparent;border:1.5px solid rgba(91,33,182,.4);cursor:pointer;transition:all .3s ease}
.btn-outline:hover{background:rgba(91,33,182,.06);border-color:var(--color-primary);transform:translateY(-2px)}
.btn-outline:active{transform:translateY(0)}
.btn-outline:focus-visible{outline:3px solid rgba(232,121,249,.4);outline-offset:2px}
/* ===== 响应式 ===== */
@media(max-width:768px){
.nav-wrap{top:10px;padding:0 12px}
.nav-pill{padding:8px 14px}
.nav-pill .logo-text{font-size:1.15rem}
.nav-links{display:none!important}
.article-hero .article-title{font-size:26px}
.post-nav{grid-template-columns:1fr}
.article-body{padding:32px 0 48px}
}
@media(min-width:769px){
.mobile-toggle{display:none!important}
}
@media(max-width:520px){
.container{padding:0 18px}
.container-narrow{padding:0 18px}
.article-hero .article-title{font-size:22px;line-height:1.4}
.article-content h2{font-size:21px}
.rec-grid{grid-template-columns:1fr!important}
}

/* roulang page: category2 */
:root {
            --purple: #5B21B6;
            --purple-dark: #3B0764;
            --purple-light: #8B5CF6;
            --gold: #EAB308;
            --gold-light: #F59E0B;
            --pink: #EC4899;
            --cyan: #22D3EE;
            --deep-bg: #0E0A1F;
            --light-bg: #FAF7F2;
            --mid-bg: #F1EBF9;
            --text-main: #1F1836;
            --text-muted: #6B6680;
            --border-soft: rgba(20, 10, 40, .08);
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-pill: 999px;
            --shadow-card: 0 1px 3px rgba(20, 10, 40, .08), 0 8px 24px rgba(20, 10, 40, .06);
            --shadow-hover: 0 12px 32px rgba(91, 33, 182, .18);
            --grad-main: linear-gradient(135deg, #5B21B6, #EAB308);
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
            background: var(--light-bg);
            color: var(--text-main);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        a {
            color: inherit;
            text-decoration: none;
        }
        img {
            max-width: 100%;
            display: block;
        }
        button {
            cursor: pointer;
            font-family: inherit;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 24px;
        }
        .section-pad {
            padding: 96px 0;
        }

        /* ===== Nav Pill ===== */
        .nav-pill {
            position: sticky;
            top: 16px;
            z-index: 50;
            background: rgba(255, 255, 255, .85);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(20, 10, 40, .06);
            border-radius: 999px;
            padding: 10px 24px;
            box-shadow: 0 8px 30px rgba(20, 10, 40, .12);
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            transition: box-shadow .3s;
        }
        .nav-pill:hover {
            box-shadow: 0 12px 36px rgba(91, 33, 182, .15);
        }
        .logo-text {
            font-size: 20px;
            font-weight: 800;
            color: var(--purple-dark);
            letter-spacing: .5px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .logo-text .vii {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            color: var(--gold);
            border: 1px solid rgba(234, 179, 8, .4);
            border-radius: 6px;
            padding: 1px 4px;
            letter-spacing: 0;
        }
        .nav-link {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-muted);
            padding: 8px 18px;
            border-radius: 999px;
            transition: all .25s;
            white-space: nowrap;
        }
        .nav-link:hover {
            color: var(--purple);
            background: rgba(91, 33, 182, .06);
        }
        .nav-link.active {
            background: var(--purple);
            color: #fff;
            box-shadow: 0 4px 14px rgba(91, 33, 182, .35);
        }
        .mobile-toggle {
            display: none;
        }

        /* Mobile menu */
        .mobile-menu {
            position: fixed;
            inset: 0;
            z-index: 100;
            background: rgba(14, 10, 31, .97);
            padding: 32px 28px;
            transform: translateY(-100%);
            transition: transform .35s cubic-bezier(.4, 0, .2, 1);
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .mobile-menu.open {
            transform: translateY(0);
        }
        .mobile-link {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            padding: 16px 20px;
            border-radius: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            transition: background .2s;
        }
        .mobile-link:hover {
            background: rgba(255, 255, 255, .08);
        }
        .mobile-cta {
            margin-top: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: var(--grad-main);
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            padding: 14px 24px;
            border-radius: 999px;
        }

        /* ===== Hero Cat ===== */
        .hero-cat {
            position: relative;
            padding: 72px 0 64px;
            background: var(--deep-bg);
            overflow: hidden;
        }
        .hero-vii {
            font-size: 200px;
            font-weight: 900;
            line-height: 1;
            color: rgba(255, 255, 255, .04);
            position: absolute;
            right: 6%;
            top: 50%;
            transform: translateY(-50%);
            letter-spacing: -8px;
            user-select: none;
            pointer-events: none;
        }
        .hero-cat h1 {
            font-size: clamp(32px, 5vw, 48px);
            font-weight: 900;
            line-height: 1.25;
            color: #fff;
            max-width: 680px;
        }
        .hero-cat h1 .gold {
            background: linear-gradient(135deg, #EAB308, #F59E0B);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero-cat p {
            font-size: 17px;
            color: rgba(255, 255, 255, .7);
            max-width: 560px;
            margin-top: 16px;
        }

        /* ===== Cards ===== */
        .card-base {
            background: #fff;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-soft);
            box-shadow: var(--shadow-card);
            transition: all .3s ease;
            overflow: hidden;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .card-base:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(91, 33, 182, .25);
        }
        .card-gold-border {
            padding: 1px;
            background: linear-gradient(135deg, #8B5CF6, #EAB308);
            border-radius: 25px;
            height: 100%;
        }
        .card-gold-border .card-inner {
            background: #fff;
            border-radius: 24px;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 999px;
            background: rgba(91, 33, 182, .08);
            color: var(--purple);
        }
        .badge-gold {
            background: rgba(234, 179, 8, .12);
            color: #B45309;
        }

        /* ===== Steps ===== */
        .step-item {
            position: relative;
            background: #fff;
            border: 1px solid var(--border-soft);
            border-radius: 20px;
            padding: 32px 28px;
            box-shadow: var(--shadow-card);
            transition: all .3s;
            height: 100%;
        }
        .step-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: rgba(91, 33, 182, .25);
        }
        .step-num {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: var(--grad-main);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 20px;
            box-shadow: 0 6px 16px rgba(91, 33, 182, .3);
        }

        /* ===== Trust ===== */
        .trust-item {
            text-align: center;
            padding: 12px;
        }
        .trust-num {
            font-size: clamp(32px, 4vw, 48px);
            font-weight: 900;
            background: linear-gradient(135deg, #5B21B6, #EAB308);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.2;
        }
        .trust-label {
            font-size: 14px;
            color: var(--text-muted);
            margin-top: 6px;
        }

        /* ===== FAQ ===== */
        .faq-item {
            border: 1px solid var(--border-soft);
            border-radius: 16px;
            background: #fff;
            transition: all .3s;
            overflow: hidden;
        }
        .faq-item:hover {
            border-color: rgba(91, 33, 182, .25);
        }
        .faq-q {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 22px 26px;
            font-weight: 700;
            font-size: 17px;
            cursor: pointer;
            background: none;
            border: none;
            text-align: left;
            color: var(--text-main);
            transition: color .2s;
        }
        .faq-q:hover {
            color: var(--purple);
        }
        .faq-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(91, 33, 182, .08);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--gold);
            font-size: 13px;
            flex-shrink: 0;
        }
        .faq-arrow {
            margin-left: auto;
            transition: transform .25s;
            color: var(--purple);
            font-size: 14px;
        }
        .faq-item.open .faq-arrow {
            transform: rotate(180deg);
        }
        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s ease, padding .3s ease;
            padding: 0 26px;
        }
        .faq-item.open .faq-a {
            max-height: 320px;
            padding: 0 26px 24px;
        }
        .faq-a p {
            color: var(--text-muted);
            line-height: 1.8;
            font-size: 15px;
        }

        /* ===== CTA ===== */
        .cta-section {
            background: var(--deep-bg);
            position: relative;
            overflow: hidden;
        }
        .email-input {
            width: 100%;
            height: 52px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, .15);
            background: rgba(255, 255, 255, .08);
            padding: 0 24px;
            font-size: 15px;
            color: #fff;
            outline: none;
            transition: all .3s;
        }
        .email-input::placeholder {
            color: rgba(255, 255, 255, .4);
        }
        .email-input:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(234, 179, 8, .3);
        }
        .btn-subscribe {
            min-height: 52px;
            border-radius: 999px;
            background: var(--grad-main);
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            padding: 0 36px;
            border: none;
            transition: all .3s;
            white-space: nowrap;
        }
        .btn-subscribe:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(234, 179, 8, .35);
            filter: brightness(1.08);
        }
        .btn-subscribe:active {
            transform: translateY(0);
        }
        .btn-subscribe:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(232, 121, 249, .5);
        }

        /* ===== Footer ===== */
        .footer-section {
            background: #0E0A1F;
            padding: 72px 0 32px;
            border-top: 1px solid rgba(255, 255, 255, .06);
        }
        .footer-section h4 {
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 18px;
        }
        .footer-section ul li a {
            color: rgba(255, 255, 255, .5);
            font-size: 15px;
            transition: color .2s;
        }
        .footer-section ul li a:hover {
            color: var(--gold);
        }
        .social-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .18);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, .6);
            font-size: 15px;
            transition: all .3s;
        }
        .social-btn:hover {
            background: var(--purple);
            border-color: var(--purple);
            color: #fff;
            transform: translateY(-2px);
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding-top: 28px;
            margin-top: 48px;
            color: rgba(255, 255, 255, .35);
            font-size: 13px;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: space-between;
            align-items: center;
        }
        .footer-bottom a {
            color: rgba(255, 255, 255, .45);
            transition: color .2s;
        }
        .footer-bottom a:hover {
            color: var(--gold);
        }

        /* ===== Animations ===== */
        @keyframes float {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-12px);
            }
        }
        .float-anim {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .fade-up {
            animation: fadeUp .7s ease both;
        }

        /* ===== Responsive ===== */
        @media (max-width: 768px) {
            .nav-links {
                display: none !important;
            }
            .mobile-toggle {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 42px;
                height: 42px;
                border-radius: 50%;
                background: rgba(91, 33, 182, .08);
                color: var(--purple);
                border: none;
            }
            .nav-pill {
                padding: 8px 14px;
            }
            .section-pad {
                padding: 64px 0;
            }
            .hero-cat {
                padding: 56px 0 48px;
            }
        }
        @media (max-width: 520px) {
            .container {
                padding: 0 18px;
            }
            .faq-q {
                padding: 18px 18px;
                font-size: 15px;
            }
            .faq-a {
                padding: 0 18px;
            }
            .faq-item.open .faq-a {
                padding: 0 18px 20px;
            }
        }