/* roulang page: index */
:root{
      --brand:#7c3aed;
      --brand-2:#f97316;
      --brand-3:#06b6d4;
      --ink:#151322;
      --muted:#69657a;
      --soft:#f7f3ff;
      --surface:#ffffff;
      --surface-2:#fff8f0;
      --line:rgba(36, 29, 58, .11);
      --dark:#151020;
      --dark-2:#211731;
      --success:#16a34a;
      --warning:#f59e0b;
      --danger:#ef4444;
      --radius-sm:14px;
      --radius:22px;
      --radius-lg:32px;
      --shadow-sm:0 10px 30px rgba(28, 18, 54, .08);
      --shadow:0 22px 60px rgba(54, 31, 94, .13);
      --shadow-strong:0 30px 80px rgba(58, 31, 120, .22);
      --sidebar:286px;
      --ease:all .24s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
      color:var(--ink);
      line-height:1.72;
      background:
        radial-gradient(circle at top left, rgba(124,58,237,.13), transparent 34rem),
        radial-gradient(circle at 92% 4%, rgba(249,115,22,.13), transparent 28rem),
        linear-gradient(180deg,#fff 0%,#fbf8ff 48%,#fff 100%);
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover{color:var(--brand)}
    img,svg{max-width:100%;height:auto}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(124,58,237,.18);color:var(--ink)}

    .skip-link{
      position:absolute;
      left:14px;
      top:-60px;
      z-index:9999;
      padding:10px 16px;
      border-radius:999px;
      background:var(--dark);
      color:#fff;
      transition:var(--ease);
    }
    .skip-link:focus{top:14px;outline:3px solid rgba(124,58,237,.28)}

    .app-shell{min-height:100vh}
    .side-nav{
      position:fixed;
      inset:0 auto 0 0;
      width:var(--sidebar);
      z-index:1000;
      padding:22px;
      background:rgba(255,255,255,.82);
      backdrop-filter:blur(22px);
      border-right:1px solid var(--line);
      display:flex;
      flex-direction:column;
      gap:20px;
      box-shadow:8px 0 38px rgba(48, 31, 75, .06);
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-height:52px;
      padding:8px 8px 16px;
      border-bottom:1px solid var(--line);
    }
    .brand-mark{
      width:44px;
      height:44px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:900;
      letter-spacing:-.04em;
      background:linear-gradient(135deg,var(--brand),var(--brand-2));
      box-shadow:0 16px 34px rgba(124,58,237,.25);
      flex:0 0 auto;
    }
    .brand-text{display:flex;flex-direction:column;min-width:0}
    .brand-name{
      font-weight:900;
      color:var(--ink);
      font-size:15px;
      line-height:1.25;
      letter-spacing:-.02em;
    }
    .brand-sub{font-size:12px;color:var(--muted);white-space:nowrap}

    .nav-label{
      margin:8px 10px 0;
      font-size:12px;
      color:#8a849b;
      font-weight:800;
      letter-spacing:.12em;
    }
    .nav-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
    .nav-link{
      display:flex;
      align-items:center;
      gap:12px;
      border-radius:18px;
      padding:13px 14px;
      color:#332b46;
      font-weight:800;
      border:1px solid transparent;
    }
    .nav-link .nav-icon{
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:13px;
      background:#f1eaff;
      color:var(--brand);
      transition:var(--ease);
    }
    .nav-link:hover{
      background:#fbf9ff;
      border-color:rgba(124,58,237,.14);
      transform:translateX(2px);
      color:var(--brand);
    }
    .nav-link.active{
      background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(249,115,22,.10));
      border-color:rgba(124,58,237,.18);
      box-shadow:var(--shadow-sm);
      color:var(--brand);
    }
    .nav-link.active .nav-icon{
      background:linear-gradient(135deg,var(--brand),var(--brand-2));
      color:#fff;
    }
    .side-search{
      margin-top:4px;
      padding:14px;
      background:linear-gradient(180deg,#fff,#fbf8ff);
      border:1px solid var(--line);
      border-radius:22px;
    }
    .search-control{
      position:relative;
      display:flex;
      align-items:center;
      gap:8px;
      background:#f6f1ff;
      border:1px solid transparent;
      border-radius:999px;
      padding:8px 10px 8px 14px;
      transition:var(--ease);
    }
    .search-control:focus-within{
      border-color:rgba(124,58,237,.38);
      box-shadow:0 0 0 4px rgba(124,58,237,.10);
      background:#fff;
    }
    .search-control input{
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:var(--ink);
      font-size:13px;
    }
    .search-control button{
      border:0;
      width:34px;
      height:34px;
      border-radius:50%;
      background:var(--dark);
      color:#fff;
      display:grid;
      place-items:center;
      transition:var(--ease);
    }
    .search-control button:hover{background:var(--brand);transform:scale(1.04)}
    .sidebar-card{
      margin-top:auto;
      border-radius:26px;
      padding:18px;
      color:#fff;
      background:
        radial-gradient(circle at 10% 0, rgba(255,255,255,.22), transparent 36%),
        linear-gradient(145deg,#20112f,#6d28d9 55%,#fb923c);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .sidebar-card:after{
      content:"";
      position:absolute;
      width:110px;
      height:110px;
      right:-42px;
      bottom:-42px;
      border-radius:50%;
      background:rgba(255,255,255,.16);
    }
    .sidebar-card strong{display:block;font-size:15px;margin-bottom:6px}
    .sidebar-card p{font-size:12px;color:rgba(255,255,255,.78);margin:0 0 14px}
    .sidebar-card a{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      background:#fff;
      color:#3b1b69;
      font-size:13px;
      font-weight:900;
    }
    .sidebar-card a:hover{transform:translateY(-2px);color:var(--brand)}

    .mobile-topbar{
      display:none;
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.86);
      backdrop-filter:blur(20px);
      border-bottom:1px solid var(--line);
      padding:12px 16px;
    }
    .mobile-menu-btn{
      border:0;
      width:44px;
      height:44px;
      border-radius:16px;
      background:var(--dark);
      color:#fff;
      display:grid;
      place-items:center;
      transition:var(--ease);
    }
    .mobile-menu-btn:hover,.mobile-menu-btn:focus{background:var(--brand);outline:none}

    .main-content{
      margin-left:var(--sidebar);
      min-height:100vh;
    }
    .page-wrap{
      width:min(1180px, calc(100% - 48px));
      margin:0 auto;
    }
    .section{padding:64px 0}
    .section-tight{padding:42px 0}
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:24px;
      margin-bottom:28px;
    }
    .section-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(124,58,237,.10);
      color:var(--brand);
      font-size:13px;
      font-weight:900;
      margin-bottom:12px;
    }
    .section-title{
      margin:0;
      font-size:clamp(28px,3vw,42px);
      line-height:1.18;
      font-weight:950;
      letter-spacing:-.045em;
      color:var(--ink);
    }
    .section-desc{
      margin:12px 0 0;
      max-width:680px;
      color:var(--muted);
      font-size:16px;
    }

    .btn-modern{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:12px 18px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:900;
      letter-spacing:-.01em;
      transition:var(--ease);
      cursor:pointer;
      white-space:nowrap;
    }
    .btn-primary-modern{
      background:linear-gradient(135deg,var(--brand),#9d4edd 50%,var(--brand-2));
      color:#fff;
      box-shadow:0 18px 34px rgba(124,58,237,.24);
    }
    .btn-primary-modern:hover{
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 24px 46px rgba(124,58,237,.32);
    }
    .btn-dark-modern{
      background:var(--dark);
      color:#fff;
      box-shadow:0 18px 34px rgba(17,13,29,.20);
    }
    .btn-dark-modern:hover{background:var(--brand);color:#fff;transform:translateY(-2px)}
    .btn-ghost-modern{
      background:rgba(255,255,255,.72);
      color:var(--ink);
      border-color:var(--line);
    }
    .btn-ghost-modern:hover{
      background:#fff;
      color:var(--brand);
      border-color:rgba(124,58,237,.28);
      transform:translateY(-2px);
    }
    .btn-modern:focus-visible,
    .nav-link:focus-visible,
    a:focus-visible,
    button:focus-visible,
    input:focus-visible{
      outline:3px solid rgba(124,58,237,.26);
      outline-offset:3px;
    }

    .hero{
      padding:30px 0 54px;
    }
    .promo-stage{
      position:relative;
      min-height:610px;
      border-radius:38px;
      overflow:hidden;
      color:#fff;
      background:
        linear-gradient(90deg, rgba(19,13,32,.92), rgba(64,22,115,.80) 46%, rgba(248,113,37,.56)),
        url("data:image/svg+xml,%3Csvg width='1400' height='720' viewBox='0 0 1400 720' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='a' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='.38'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1400' height='720' fill='%23201235'/%3E%3Ccircle cx='1150' cy='90' r='260' fill='%23fb923c' opacity='.55'/%3E%3Ccircle cx='930' cy='560' r='300' fill='%237c3aed' opacity='.75'/%3E%3Ccircle cx='320' cy='110' r='210' fill='url(/%23a)'/%3E%3Cg opacity='.22' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M0 570 C260 470 430 700 720 560 S1110 370 1400 455'/%3E%3Cpath d='M0 220 C240 120 460 330 710 210 S1080 30 1400 150'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
      box-shadow:var(--shadow-strong);
      padding:clamp(28px,5vw,68px);
      display:grid;
      align-items:stretch;
    }
    .promo-stage:before{
      content:"";
      position:absolute;
      inset:16px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:30px;
      pointer-events:none;
    }
    .burst{
      position:absolute;
      top:34px;
      right:34px;
      width:122px;
      height:122px;
      border-radius:34% 66% 42% 58% / 54% 36% 64% 46%;
      display:grid;
      place-items:center;
      text-align:center;
      background:#fff;
      color:#7c2d12;
      font-weight:950;
      line-height:1.1;
      transform:rotate(9deg);
      box-shadow:0 22px 48px rgba(0,0,0,.18);
      z-index:2;
    }
    .burst span{font-size:13px;color:#9a3412}
    .hero-content{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:42px;
      align-items:end;
    }
    .hero-copy{max-width:760px}
    .hero-badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
    .badge-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background:rgba(255,255,255,.12);
      backdrop-filter:blur(14px);
      color:#fff;
      font-weight:850;
      font-size:13px;
    }
    .hero h1{
      margin:0;
      font-size:clamp(42px,6.2vw,82px);
      line-height:1.02;
      letter-spacing:-.07em;
      font-weight:950;
    }
    .hero-intro{
      margin:24px 0 0;
      max-width:720px;
      color:rgba(255,255,255,.82);
      font-size:clamp(16px,1.6vw,19px);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      margin-top:32px;
    }
    .hero-actions .btn-ghost-modern{
      background:rgba(255,255,255,.12);
      border-color:rgba(255,255,255,.24);
      color:#fff;
    }
    .hero-actions .btn-ghost-modern:hover{background:#fff;color:var(--brand)}
    .hero-meter{
      display:grid;
      gap:14px;
      align-self:end;
    }
    .timer-card{
      padding:22px;
      border-radius:28px;
      background:rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.20);
      backdrop-filter:blur(18px);
      box-shadow:0 18px 48px rgba(0,0,0,.16);
    }
    .timer-title{font-weight:950;font-size:18px;margin-bottom:12px}
    .timer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .timer-box{
      padding:12px 8px;
      text-align:center;
      border-radius:18px;
      background:rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.16);
    }
    .timer-box strong{display:block;font-size:24px;line-height:1;font-weight:950}
    .timer-box span{font-size:12px;color:rgba(255,255,255,.72)}
    .data-strip{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .data-chip{
      padding:16px;
      border-radius:24px;
      background:rgba(255,255,255,.94);
      color:var(--ink);
      box-shadow:0 18px 38px rgba(0,0,0,.14);
    }
    .data-chip b{display:block;font-size:24px;line-height:1.1;color:var(--brand)}
    .data-chip span{font-size:12px;color:var(--muted);font-weight:800}

    .story-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:22px;
      align-items:stretch;
    }
    .pain-card{
      border-radius:var(--radius-lg);
      padding:30px;
      background:var(--dark);
      color:#fff;
      box-shadow:var(--shadow);
      min-height:100%;
      position:relative;
      overflow:hidden;
    }
    .pain-card:after{
      content:"";
      position:absolute;
      inset:auto -70px -110px auto;
      width:240px;
      height:240px;
      background:radial-gradient(circle,rgba(249,115,22,.38),transparent 66%);
    }
    .pain-card h2{
      margin:0 0 14px;
      font-size:clamp(26px,3vw,38px);
      letter-spacing:-.04em;
      font-weight:950;
    }
    .pain-card p{color:rgba(255,255,255,.76);margin:0 0 22px}
    .problem-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
    .problem-list li{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border-radius:18px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.86);
      font-size:14px;
    }
    .problem-list i{
      width:24px;
      height:24px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:rgba(249,115,22,.20);
      color:#fed7aa;
      font-style:normal;
      font-weight:950;
    }
    .vertical-stack{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .vertical-card{
      min-height:360px;
      border-radius:30px;
      padding:20px;
      color:#fff;
      background:linear-gradient(180deg,rgba(26,18,45,.16),rgba(20,12,34,.88)),
        var(--vbg,linear-gradient(135deg,#7c3aed,#fb923c));
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      position:relative;
      overflow:hidden;
      transition:var(--ease);
    }
    .vertical-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-strong)}
    .vertical-card:before{
      content:"";
      position:absolute;
      inset:16px 16px auto auto;
      width:58px;
      height:58px;
      border-radius:20px;
      background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.18);
    }
    .vertical-card .tag{
      position:absolute;
      top:18px;
      left:18px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      font-size:12px;
      font-weight:900;
    }
    .vertical-card h3{margin:0 0 8px;font-size:21px;font-weight:950}
    .vertical-card p{margin:0;color:rgba(255,255,255,.76);font-size:14px}

    .rank-layout{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:22px;
      align-items:start;
    }
    .rank-panel,.feature-panel,.testimonial-panel,.news-panel,.cart-panel,.faq-panel{
      border:1px solid var(--line);
      background:rgba(255,255,255,.80);
      backdrop-filter:blur(18px);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-sm);
    }
    .rank-panel{padding:14px}
    .rank-item{
      display:grid;
      grid-template-columns:48px 1fr auto;
      gap:14px;
      align-items:center;
      padding:16px;
      border-radius:22px;
      transition:var(--ease);
    }
    .rank-item + .rank-item{border-top:1px solid var(--line)}
    .rank-item:hover{
      background:#fff;
      transform:translateX(4px);
      box-shadow:0 14px 32px rgba(40,22,72,.08);
    }
    .rank-no{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:16px;
      color:#fff;
      background:linear-gradient(135deg,var(--brand),var(--brand-2));
      font-weight:950;
    }
    .rank-title{font-weight:950;margin-bottom:3px}
    .rank-desc{font-size:13px;color:var(--muted)}
    .rank-metrics{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:8px;
    }
    .metric{
      padding:7px 10px;
      border-radius:999px;
      background:#f4ecff;
      color:var(--brand);
      font-size:12px;
      font-weight:900;
      white-space:nowrap;
    }
    .feature-panel{
      padding:26px;
      min-height:100%;
      background:
        radial-gradient(circle at 100% 0, rgba(249,115,22,.15), transparent 40%),
        linear-gradient(180deg,#fff,#fbf8ff);
    }
    .feature-panel h3{font-weight:950;letter-spacing:-.03em;margin:0 0 12px}
    .feature-panel p{color:var(--muted);margin:0 0 18px}
    .check-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
    .check-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#40384f;
      font-size:14px;
    }
    .check-list li:before{
      content:"✓";
      width:24px;
      height:24px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(22,163,74,.12);
      color:var(--success);
      font-weight:950;
      flex:0 0 auto;
    }

    .testimonial-wall{
      display:grid;
      grid-template-columns:1fr 1.15fr;
      gap:22px;
    }
    .quote-lead{
      border-radius:var(--radius-lg);
      padding:32px;
      background:linear-gradient(135deg,#fff,#fff4e8);
      border:1px solid rgba(249,115,22,.16);
      box-shadow:var(--shadow-sm);
    }
    .quote-lead .big-score{
      font-size:64px;
      line-height:1;
      letter-spacing:-.07em;
      font-weight:950;
      background:linear-gradient(135deg,var(--brand),var(--brand-2));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .quote-lead p{color:var(--muted);margin:14px 0 0}
    .quote-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }
    .quote-card{
      padding:20px;
      border-radius:26px;
      border:1px solid var(--line);
      background:#fff;
      box-shadow:var(--shadow-sm);
      transition:var(--ease);
    }
    .quote-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .quote-card p{margin:0 0 15px;color:#3e354f}
    .user-row{display:flex;align-items:center;gap:10px}
    .avatar{
      width:40px;
      height:40px;
      border-radius:15px;
      display:grid;
      place-items:center;
      font-weight:950;
      color:#fff;
      background:linear-gradient(135deg,var(--brand-3),var(--brand));
    }
    .user-row strong{display:block;font-size:14px}
    .user-row span{font-size:12px;color:var(--muted)}

    .news-layout{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:22px;
      align-items:start;
    }
    .news-panel{padding:18px}
    .news-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
    .news-link{
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:14px;
      align-items:center;
      padding:15px;
      border-radius:20px;
      border:1px solid transparent;
      transition:var(--ease);
    }
    .news-link:hover{
      background:#fff;
      border-color:rgba(124,58,237,.14);
      box-shadow:0 12px 28px rgba(35,22,63,.08);
      color:var(--ink);
    }
    .news-date{
      width:58px;
      text-align:center;
      padding:8px 6px;
      border-radius:16px;
      background:#f4ecff;
      color:var(--brand);
      font-weight:950;
      line-height:1.15;
      font-size:12px;
    }
    .news-link h3{margin:0 0 4px;font-size:16px;font-weight:950}
    .news-link p{margin:0;color:var(--muted);font-size:13px}
    .news-arrow{
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:#f7f3ff;
      color:var(--brand);
      font-weight:950;
    }
    .recommend-card{
      border-radius:var(--radius-lg);
      padding:28px;
      min-height:100%;
      color:#fff;
      background:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,.18), transparent 36%),
        linear-gradient(135deg,#20112f,#5b21b6 60%,#f97316);
      box-shadow:var(--shadow);
    }
    .recommend-card h3{font-weight:950;letter-spacing:-.03em;margin:0 0 10px}
    .recommend-card p{color:rgba(255,255,255,.75);margin:0 0 18px}
    .progress-wrap{
      padding:16px;
      border-radius:22px;
      background:rgba(255,255,255,.11);
      border:1px solid rgba(255,255,255,.14);
      margin:18px 0;
    }
    .progress-label{display:flex;justify-content:space-between;font-size:13px;font-weight:900;margin-bottom:10px}
    .progress{
      height:12px;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      overflow:hidden;
    }
    .progress-bar{
      width:72%;
      background:linear-gradient(90deg,#fff,#fed7aa);
      border-radius:999px;
    }

    .cart-panel{
      padding:26px;
      background:
        radial-gradient(circle at 0 0, rgba(124,58,237,.11), transparent 30%),
        radial-gradient(circle at 100% 0, rgba(249,115,22,.13), transparent 32%),
        rgba(255,255,255,.86);
    }
    .tier-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
      margin-top:24px;
    }
    .tier-card{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      padding:22px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
      transition:var(--ease);
    }
    .tier-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .tier-card.featured{
      color:#fff;
      background:linear-gradient(145deg,#25113c,#7c3aed 58%,#f97316);
      border-color:transparent;
      box-shadow:var(--shadow-strong);
    }
    .tier-badge{
      display:inline-flex;
      padding:7px 10px;
      border-radius:999px;
      background:#f4ecff;
      color:var(--brand);
      font-size:12px;
      font-weight:950;
      margin-bottom:16px;
    }
    .featured .tier-badge{background:rgba(255,255,255,.18);color:#fff}
    .tier-card h3{font-weight:950;margin:0 0 8px}
    .tier-price{
      font-size:34px;
      font-weight:950;
      letter-spacing:-.06em;
      margin:12px 0;
      color:var(--brand);
    }
    .featured .tier-price{color:#fff}
    .tier-card p{color:var(--muted);margin:0 0 16px;font-size:14px}
    .featured p{color:rgba(255,255,255,.76)}
    .tier-card ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:9px}
    .tier-card li{font-size:13px;color:#433a52}
    .featured li{color:rgba(255,255,255,.82)}
    .tier-card li:before{content:"●";color:var(--brand-2);margin-right:8px;font-size:10px}
    .benefit-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
      margin-top:18px;
    }
    .benefit{
      padding:18px;
      border-radius:24px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:var(--shadow-sm);
    }
    .benefit-icon{
      width:42px;
      height:42px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(249,115,22,.12));
      margin-bottom:12px;
      font-weight:950;
      color:var(--brand);
    }
    .benefit h3{font-size:16px;font-weight:950;margin:0 0 6px}
    .benefit p{font-size:13px;color:var(--muted);margin:0}

    .faq-panel{padding:10px}
    .accordion{--bs-accordion-border-width:0;--bs-accordion-bg:transparent}
    .accordion-item{
      border:0;
      border-radius:22px !important;
      overflow:hidden;
      background:#fff;
      margin:10px;
      box-shadow:0 10px 26px rgba(39,24,68,.06);
    }
    .accordion-button{
      border-radius:22px !important;
      padding:20px 22px;
      font-weight:950;
      color:var(--ink);
      background:#fff;
      box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
      color:var(--brand);
      background:#fbf8ff;
    }
    .accordion-button:focus{box-shadow:0 0 0 4px rgba(124,58,237,.10) !important}
    .accordion-body{
      padding:0 22px 22px;
      color:var(--muted);
      font-size:15px;
    }

    .site-footer{
      margin-left:var(--sidebar);
      padding:38px 0 28px;
      background:var(--dark);
      color:#fff;
    }
    .footer-grid{
      width:min(1180px, calc(100% - 48px));
      margin:0 auto;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:28px;
      align-items:end;
    }
    .footer-brand{
      display:flex;
      gap:12px;
      align-items:center;
      margin-bottom:14px;
    }
    .footer-brand .brand-mark{box-shadow:none}
    .footer-brand strong{font-size:18px;font-weight:950}
    .footer-text{color:rgba(255,255,255,.68);max-width:680px;margin:0}
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:10px;
      margin-bottom:16px;
    }
    .footer-links a{
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      color:rgba(255,255,255,.76);
      font-size:13px;
      font-weight:800;
    }
    .footer-links a:hover{background:#fff;color:var(--brand)}
    .copyright{
      color:rgba(255,255,255,.54);
      text-align:right;
      font-size:13px;
      margin:0;
    }

    @media (max-width: 1199px){
      :root{--sidebar:252px}
      .hero-content,.story-grid,.rank-layout,.testimonial-wall,.news-layout{grid-template-columns:1fr}
      .hero-meter{max-width:680px}
      .vertical-stack{grid-template-columns:repeat(3,1fr)}
      .tier-grid,.benefit-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 991px){
      .side-nav{display:none}
      .mobile-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px}
      .main-content,.site-footer{margin-left:0}
      .page-wrap,.footer-grid{width:min(100% - 32px, 920px)}
      .section{padding:48px 0}
      .promo-stage{min-height:auto;border-radius:30px}
      .burst{width:98px;height:98px;right:22px;top:22px;font-size:14px}
      .hero-content{padding-top:70px}
      .vertical-stack{grid-template-columns:1fr}
      .vertical-card{min-height:260px}
      .quote-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .footer-links{justify-content:flex-start}
      .copyright{text-align:left}
      .offcanvas{
        border:0;
        border-radius:0 28px 28px 0;
        background:rgba(255,255,255,.94);
        backdrop-filter:blur(22px);
      }
    }
    @media (max-width: 767px){
      .section-head{display:block}
      .data-strip,.timer-grid,.tier-grid,.benefit-grid{grid-template-columns:1fr}
      .rank-item{grid-template-columns:42px 1fr}
      .rank-metrics{grid-column:2 / 3;justify-content:flex-start}
      .news-link{grid-template-columns:52px 1fr}
      .news-arrow{display:none}
      .hero-actions{display:grid;grid-template-columns:1fr}
      .btn-modern{width:100%}
      .promo-stage{padding:24px}
      .hero h1{font-size:42px}
      .hero-intro{font-size:15px}
      .burst{position:relative;top:auto;right:auto;margin:0 0 18px auto}
    }
    @media (max-width: 520px){
      .page-wrap,.footer-grid{width:min(100% - 24px, 520px)}
      .mobile-topbar{padding:10px 12px}
      .brand-name{font-size:13px}
      .brand-sub{display:none}
      .section-title{font-size:28px}
      .promo-stage{border-radius:24px}
      .promo-stage:before{inset:10px;border-radius:18px}
      .timer-card,.pain-card,.feature-panel,.quote-lead,.recommend-card,.cart-panel{border-radius:24px;padding:22px}
      .hero{padding-top:18px}
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}