/* roulang page: index */
:root{
      --bg:#07090d;
      --bg-2:#0d1118;
      --panel:#111722;
      --panel-2:#161d29;
      --line:#243044;
      --text:#eef3f8;
      --muted:#9aa6b7;
      --soft:#c4cfdd;
      --accent:#d5b15c;
      --accent-2:#61dfc0;
      --accent-3:#7a8cff;
      --danger:#ff6c78;
      --shadow:0 14px 34px rgba(0,0,0,.28);
      --shadow-soft:0 8px 22px rgba(0,0,0,.18);
      --radius:8px;
      --radius-sm:6px;
      --space:24px;
      --nav-h:74px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
        radial-gradient(circle at top left, rgba(213,177,92,.06), transparent 28%),
        radial-gradient(circle at top right, rgba(97,223,192,.05), transparent 24%),
        var(--bg);
      color:var(--text);
      line-height:1.7;
      letter-spacing:0;
      min-height:100vh;
      padding-top:var(--nav-h);
      padding-bottom:108px;
    }
    a{color:inherit;text-decoration:none}
    a:hover{color:inherit}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(213,177,92,.24);color:var(--text)}
    .container-xxl{max-width:1240px}
    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:1030;
      backdrop-filter:saturate(140%) blur(16px);
      background:rgba(7,9,13,.86);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .navbar{
      min-height:var(--nav-h);
      padding:.55rem 0;
    }
    .navbar-brand{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      color:var(--text);
      font-weight:800;
      letter-spacing:0;
      line-height:1.1;
      font-size:1.02rem;
    }
    .brand-mark{
      width:32px;
      height:32px;
      border-radius:8px;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg, rgba(213,177,92,.18), rgba(97,223,192,.12));
      border:1px solid rgba(213,177,92,.26);
      color:var(--accent);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      flex:none;
    }
    .nav-links{
      gap:.35rem;
    }
    .navbar .nav-link{
      color:var(--soft);
      padding:.55rem .85rem;
      border-radius:999px;
      font-size:.95rem;
      font-weight:600;
      transition:all .18s ease;
    }
    .navbar .nav-link:hover,
    .navbar .nav-link:focus{
      color:var(--text);
      background:rgba(255,255,255,.04);
    }
    .navbar .nav-link.active{
      color:var(--text);
      background:rgba(213,177,92,.12);
      border:1px solid rgba(213,177,92,.24);
    }
    .nav-search{
      min-width:250px;
    }
    .nav-search .form-control{
      height:42px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
      border-radius:8px 0 0 8px;
      box-shadow:none;
    }
    .nav-search .form-control::placeholder{color:#8090a4}
    .nav-search .form-control:focus{
      border-color:rgba(213,177,92,.5);
      box-shadow:0 0 0 .18rem rgba(213,177,92,.12);
    }
    .nav-search .btn{
      height:42px;
      border-radius:0 8px 8px 0;
      border:1px solid rgba(213,177,92,.42);
      background:linear-gradient(180deg, rgba(213,177,92,.92), rgba(176,132,41,.92));
      color:#121212;
      font-weight:700;
      padding:0 .95rem;
    }
    .nav-search .btn:hover{
      background:linear-gradient(180deg, rgba(241,205,117,.98), rgba(202,155,56,.98));
      transform:translateY(-1px);
    }
    .nav-toggle{
      border-color:rgba(255,255,255,.12);
      box-shadow:none;
    }
    .nav-toggle:focus{box-shadow:0 0 0 .18rem rgba(213,177,92,.12)}
    .nav-toggle .navbar-toggler-icon{
      filter:invert(1) brightness(1.1);
    }
    .btn{
      border-radius:8px;
      font-weight:700;
      letter-spacing:0;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    }
    .btn:focus,
    .btn:active,
    .btn:focus-visible{
      box-shadow:0 0 0 .2rem rgba(213,177,92,.14) !important;
    }
    .btn-accent{
      background:linear-gradient(180deg, rgba(213,177,92,.98), rgba(182,136,45,.98));
      color:#101215;
      border:1px solid rgba(213,177,92,.5);
    }
    .btn-accent:hover{
      color:#101215;
      transform:translateY(-1px);
      box-shadow:0 12px 22px rgba(213,177,92,.18);
    }
    .btn-ghost{
      color:var(--text);
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
    }
    .btn-ghost:hover{
      color:var(--text);
      border-color:rgba(97,223,192,.28);
      background:rgba(97,223,192,.08);
      transform:translateY(-1px);
    }
    .btn-linkish{
      color:var(--soft);
      padding:0;
      background:transparent;
      border:0;
      text-decoration:none;
    }
    .btn-linkish:hover{color:var(--text)}
    .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.38rem .72rem;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      color:var(--soft);
      font-size:.84rem;
      font-weight:600;
    }
    .badge-gold{
      background:rgba(213,177,92,.12);
      border-color:rgba(213,177,92,.24);
      color:#f5d89c;
    }
    .badge-teal{
      background:rgba(97,223,192,.11);
      border-color:rgba(97,223,192,.2);
      color:#a7f0df;
    }
    .page-hero,
    .page-block{
      position:relative;
    }
    .page-hero{
      padding:2.1rem 0 1.4rem;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
      gap:1.1rem;
      align-items:stretch;
    }
    .hero-copy,
    .hero-stage,
    .surface-box,
    .feature-card,
    .info-panel,
    .social-card,
    .update-card,
    .faq-box,
    .cta-box,
    .category-card{
      background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .hero-copy{
      padding:2rem;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        linear-gradient(140deg, rgba(213,177,92,.06), rgba(97,223,192,.03) 45%, rgba(122,140,255,.03));
    }
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.34rem .72rem;
      border-radius:999px;
      border:1px solid rgba(213,177,92,.22);
      background:rgba(213,177,92,.08);
      color:#f1d6a0;
      font-size:.82rem;
      font-weight:700;
      margin-bottom:1rem;
    }
    h1,h2,h3,h4,h5{
      margin:0;
      letter-spacing:0;
      line-height:1.15;
    }
    h1{
      font-size:3rem;
      font-weight:800;
      max-width:12ch;
      margin-bottom:1rem;
    }
    .hero-copy p{
      color:var(--soft);
      font-size:1.02rem;
      max-width:60ch;
      margin:0 0 1.4rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin-bottom:1.25rem;
    }
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
    }
    .meta-chip{
      display:flex;
      align-items:center;
      gap:.55rem;
      padding:.7rem .8rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--soft);
      font-size:.88rem;
      min-width:132px;
    }
    .meta-chip strong{
      display:block;
      color:var(--text);
      font-size:.96rem;
      line-height:1.2;
    }
    .hero-stage{
      padding:1.25rem;
      display:grid;
      grid-template-rows:auto 1fr;
      gap:1rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
        radial-gradient(circle at 20% 0%, rgba(213,177,92,.08), transparent 28%),
        radial-gradient(circle at 80% 0%, rgba(97,223,192,.06), transparent 26%);
    }
    .stage-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      padding-bottom:.25rem;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .stage-title{
      display:flex;
      flex-direction:column;
      gap:.2rem;
    }
    .stage-title strong{
      font-size:1.02rem;
    }
    .stage-title span{
      color:var(--muted);
      font-size:.88rem;
    }
    .stage-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:.8rem;
      align-content:start;
    }
    .option-card{
      padding:.95rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(10,14,20,.56);
      min-height:150px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .option-card:hover{
      transform:translateY(-2px);
      border-color:rgba(213,177,92,.28);
      background:rgba(14,18,26,.84);
    }
    .option-card.recommend{
      border-color:rgba(213,177,92,.34);
      background:
        linear-gradient(180deg, rgba(213,177,92,.12), rgba(10,14,20,.86));
      box-shadow:0 16px 28px rgba(0,0,0,.2);
    }
    .option-card .label{
      display:inline-flex;
      align-items:center;
      width:fit-content;
      margin-bottom:.6rem;
      padding:.22rem .5rem;
      border-radius:999px;
      font-size:.74rem;
      font-weight:700;
      color:#f0dca8;
      background:rgba(213,177,92,.1);
      border:1px solid rgba(213,177,92,.2);
    }
    .option-card h3{
      font-size:1.06rem;
      margin-bottom:.5rem;
      font-weight:800;
    }
    .option-card p{
      color:var(--muted);
      margin:0;
      font-size:.87rem;
      line-height:1.55;
    }
    .option-foot{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.75rem;
      margin-top:.85rem;
    }
    .option-foot small{
      color:#cdd7e4;
      font-weight:600;
    }
    .signal-panel{
      margin-top:.8rem;
      border-radius:8px;
      padding:.9rem;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.025);
      display:grid;
      gap:.75rem;
    }
    .signal-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      color:var(--soft);
      font-size:.88rem;
    }
    .signal-bar{
      position:relative;
      height:10px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
    }
    .signal-bar span{
      position:absolute;
      inset:0 auto 0 0;
      width:78%;
      background:linear-gradient(90deg, rgba(213,177,92,.92), rgba(97,223,192,.92));
      border-radius:inherit;
    }
    .section-wrap{
      padding:1rem 0 0;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:1rem;
      margin-bottom:1rem;
    }
    .section-head h2{
      font-size:1.6rem;
      font-weight:800;
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      max-width:56ch;
      font-size:.96rem;
    }
    .surface-box{
      padding:1.15rem;
    }
    .feature-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:1rem;
    }
    .feature-card{
      padding:1.1rem;
      min-height:100%;
      transition:transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .feature-card:hover{
      transform:translateY(-2px);
      border-color:rgba(97,223,192,.24);
      background:rgba(255,255,255,.04);
    }
    .feature-icon{
      width:42px;
      height:42px;
      border-radius:8px;
      display:grid;
      place-items:center;
      margin-bottom:.95rem;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:var(--accent);
      font-size:1.05rem;
    }
    .feature-card h3{
      font-size:1.08rem;
      margin-bottom:.45rem;
      font-weight:800;
    }
    .feature-card p{
      margin:0;
      color:var(--muted);
      font-size:.93rem;
      line-height:1.65;
    }
    .split-grid{
      display:grid;
      grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
      gap:1rem;
    }
    .info-panel{
      padding:1.15rem;
      height:100%;
    }
    .step-list{
      display:grid;
      gap:.8rem;
      margin-top:1rem;
    }
    .step-item{
      display:flex;
      gap:.8rem;
      align-items:flex-start;
      padding:.85rem;
      border-radius:8px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
    }
    .step-num{
      width:28px;
      height:28px;
      border-radius:7px;
      flex:none;
      display:grid;
      place-items:center;
      background:rgba(213,177,92,.12);
      color:#f2d79a;
      border:1px solid rgba(213,177,92,.18);
      font-weight:800;
      font-size:.86rem;
    }
    .step-item strong{
      display:block;
      margin-bottom:.14rem;
      font-size:.97rem;
    }
    .step-item span{
      color:var(--muted);
      font-size:.88rem;
      line-height:1.55;
    }
    .compare-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border-radius:8px;
      margin-top:.25rem;
      border:1px solid rgba(255,255,255,.08);
    }
    .compare-table th,
    .compare-table td{
      padding:.86rem .9rem;
      border-bottom:1px solid rgba(255,255,255,.06);
      color:var(--soft);
      font-size:.92rem;
      vertical-align:top;
    }
    .compare-table th{
      background:rgba(255,255,255,.035);
      color:var(--text);
      font-weight:800;
    }
    .compare-table tr:last-child td{border-bottom:0}
    .compare-table td.highlight{
      color:#f5e2b5;
      background:rgba(213,177,92,.06);
    }
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:1rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.42rem .68rem;
      border-radius:999px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      color:#d7dfeb;
      font-size:.83rem;
      font-weight:600;
    }
    .social-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:1rem;
    }
    .social-card{
      padding:1rem;
      min-height:100%;
    }
    .social-card .num{
      font-size:1.6rem;
      font-weight:800;
      color:#fff;
      line-height:1.05;
      margin-bottom:.35rem;
    }
    .social-card .label{
      color:#f1d6a0;
      font-size:.82rem;
      font-weight:700;
      margin-bottom:.3rem;
      display:inline-flex;
      align-items:center;
      gap:.3rem;
    }
    .social-card p{
      color:var(--muted);
      margin:0;
      font-size:.9rem;
      line-height:1.55;
    }
    .quote-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:1rem;
      margin-top:1rem;
    }
    .quote-card{
      padding:1rem 1.05rem;
      border-radius:8px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.07);
      min-height:100%;
    }
    .quote-card .head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:.7rem;
    }
    .quote-card .stars{
      color:#f2d79a;
      letter-spacing:1px;
      font-size:.88rem;
    }
    .quote-card p{
      color:#d7deea;
      margin:0;
      font-size:.93rem;
      line-height:1.7;
    }
    .quote-card small{
      display:block;
      margin-top:.65rem;
      color:var(--muted);
    }
    .category-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:1rem;
    }
    .category-card{
      padding:1.1rem;
      position:relative;
      overflow:hidden;
      min-height:100%;
    }
    .category-card::before{
      content:"";
      position:absolute;
      inset:0 auto auto 0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg, rgba(213,177,92,.92), rgba(97,223,192,.88));
    }
    .category-card h3{
      font-size:1.15rem;
      font-weight:800;
      margin-bottom:.45rem;
    }
    .category-card p{
      margin:0 0 .9rem;
      color:var(--muted);
      font-size:.93rem;
      line-height:1.65;
    }
    .category-card .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-bottom:1rem;
    }
    .category-card .chip{
      padding:.36rem .6rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#dce4ef;
      font-size:.82rem;
      font-weight:600;
    }
    .updates-grid{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
      gap:1rem;
      align-items:start;
    }
    .update-card{
      padding:1.05rem;
    }
    .news-list{
      display:grid;
      gap:.7rem;
      margin-top:.2rem;
    }
    .news-item{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:flex-start;
      padding:.84rem .85rem;
      border-radius:8px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
      transition:transform .16s ease, border-color .16s ease;
    }
    .news-item:hover{
      transform:translateY(-1px);
      border-color:rgba(97,223,192,.18);
    }
    .news-item strong{
      display:block;
      font-size:.97rem;
      margin-bottom:.2rem;
      font-weight:800;
    }
    .news-item span{
      display:block;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.55;
    }
    .news-item i{
      color:var(--accent);
      margin-top:.16rem;
    }
    .right-rail{
      display:grid;
      gap:1rem;
    }
    .rail-box{
      padding:1.05rem;
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
    }
    .rail-box h3{
      font-size:1.04rem;
      margin-bottom:.7rem;
      font-weight:800;
    }
    .rail-box ul{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.55rem;
    }
    .rail-box li{
      display:flex;
      align-items:center;
      gap:.55rem;
      color:var(--soft);
      font-size:.9rem;
    }
    .rail-box li i{
      color:var(--accent-2);
    }
    .faq-box{
      padding:1.1rem;
    }
    .accordion{
      --bs-accordion-bg:transparent;
      --bs-accordion-border-color:rgba(255,255,255,.08);
      --bs-accordion-border-radius:8px;
      --bs-accordion-inner-border-radius:8px;
      --bs-accordion-btn-bg:transparent;
      --bs-accordion-btn-color:var(--text);
      --bs-accordion-btn-padding-x:1rem;
      --bs-accordion-btn-padding-y:1rem;
      --bs-accordion-active-bg:rgba(255,255,255,.03);
      --bs-accordion-active-color:var(--text);
      --bs-accordion-btn-focus-box-shadow:none;
      --bs-accordion-btn-icon-width:1rem;
      --bs-accordion-btn-icon-transform:rotate(-180deg);
      --bs-accordion-btn-icon-transition:transform .18s ease;
      --bs-accordion-color:var(--soft);
      --bs-accordion-body-padding-x:1rem;
      --bs-accordion-body-padding-y:.2rem 1rem 1rem;
    }
    .accordion-item{
      background:rgba(255,255,255,.025);
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:.75rem;
      border-radius:8px;
      overflow:hidden;
    }
    .accordion-button{
      border:0;
      box-shadow:none;
      font-weight:800;
    }
    .accordion-button:not(.collapsed){
      box-shadow:none;
      background:rgba(213,177,92,.06);
      color:var(--text);
    }
    .accordion-body{
      color:var(--muted);
      font-size:.94rem;
      line-height:1.7;
    }
    .cta-box{
      padding:1.4rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      background:
        linear-gradient(120deg, rgba(213,177,92,.1), rgba(97,223,192,.05)),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    }
    .cta-box h2{
      font-size:1.5rem;
      font-weight:800;
      margin-bottom:.35rem;
    }
    .cta-box p{
      margin:0;
      color:var(--soft);
      max-width:62ch;
      font-size:.96rem;
    }
    .footer{
      padding:1.35rem 0 2rem;
      border-top:1px solid rgba(255,255,255,.08);
      margin-top:1.25rem;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.1fr .75fr .95fr;
      gap:1rem;
      align-items:start;
    }
    .footer h3{
      font-size:1rem;
      font-weight:800;
      margin-bottom:.8rem;
    }
    .footer p,
    .footer a,
    .footer li{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.7;
    }
    .footer a:hover{color:var(--text)}
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.45rem;
    }
    .copyright{
      margin-top:1.1rem;
      padding-top:1rem;
      border-top:1px solid rgba(255,255,255,.06);
      color:#8d98a8;
      font-size:.86rem;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:.5rem;
    }
    .bottom-bar{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:1040;
      padding:.72rem 0;
      background:rgba(7,9,13,.9);
      backdrop-filter:blur(14px) saturate(140%);
      border-top:1px solid rgba(255,255,255,.08);
      box-shadow:0 -8px 24px rgba(0,0,0,.2);
    }
    .bottom-bar-inner{
      display:flex;
      align-items:center;
      gap:.85rem;
    }
    .bottom-note{
      min-width:150px;
      color:#d9e1ec;
      font-weight:700;
      font-size:.92rem;
    }
    .quick-jump{
      flex:1;
      display:flex;
      gap:.5rem;
      align-items:center;
    }
    .quick-jump .form-control{
      height:44px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
      border-radius:8px;
      box-shadow:none;
    }
    .quick-jump .form-control::placeholder{color:#7f8d9e}
    .quick-jump .form-control:focus{
      border-color:rgba(97,223,192,.36);
      box-shadow:0 0 0 .18rem rgba(97,223,192,.1);
    }
    .quick-actions{
      display:flex;
      gap:.5rem;
      flex:none;
    }
    .quick-actions .btn{
      height:44px;
      padding-inline:1rem;
      white-space:nowrap;
    }
    .section-space{margin-top:1rem}
    .small-muted{color:var(--muted);font-size:.88rem}
    .divider{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
      margin:1rem 0;
    }
    .hidden-md-up{display:none}
    .inline-legend{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:.85rem;
    }
    .legend-item{
      padding:.42rem .62rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#d9e2ee;
      font-size:.83rem;
      font-weight:600;
    }
    .hero-stage .legend-item{
      background:rgba(255,255,255,.025);
    }
    .pill-link{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      color:#f0d8a2;
      font-weight:700;
      font-size:.88rem;
    }
    .pill-link:hover{color:#ffe4ac}
    .focus-ring:focus-visible{
      outline:0;
      box-shadow:0 0 0 .22rem rgba(213,177,92,.16);
    }
    @media (max-width: 1199.98px){
      h1{font-size:2.65rem}
      .hero-grid,
      .split-grid,
      .updates-grid{
        grid-template-columns:1fr;
      }
      .social-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .footer-grid{
        grid-template-columns:1fr 1fr;
      }
      .bottom-note{min-width:auto}
    }
    @media (max-width: 991.98px){
      .navbar .navbar-collapse{
        padding:1rem 0 .25rem;
      }
      .nav-search{
        min-width:100%;
        margin-top:.8rem;
      }
      .hero-copy{
        padding:1.45rem;
      }
      .stage-grid,
      .feature-grid,
      .category-grid,
      .quote-grid{
        grid-template-columns:1fr;
      }
      h1{font-size:2.35rem;max-width:14ch}
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .cta-box{
        flex-direction:column;
        align-items:flex-start;
      }
      .bottom-bar-inner{
        flex-direction:column;
        align-items:stretch;
      }
      .quick-jump{
        width:100%;
      }
      .quick-actions{
        width:100%;
      }
      .quick-actions .btn{
        flex:1;
      }
    }
    @media (max-width: 767.98px){
      body{
        padding-top:68px;
        padding-bottom:152px;
      }
      :root{--nav-h:68px}
      h1{font-size:2rem}
      .page-hero{
        padding-top:1.1rem;
      }
      .hero-copy,
      .hero-stage,
      .surface-box,
      .info-panel,
      .social-card,
      .update-card,
      .faq-box,
      .cta-box,
      .category-card{
        border-radius:8px;
      }
      .hero-actions{
        flex-direction:column;
      }
      .hero-actions .btn{
        width:100%;
      }
      .meta-chip{
        min-width:calc(50% - .35rem);
        flex:1 1 calc(50% - .35rem);
      }
      .social-grid{
        grid-template-columns:1fr;
      }
      .footer-grid{
        grid-template-columns:1fr;
      }
      .hidden-md-up{display:block}
      .bottom-note{
        width:100%;
      }
      .quick-jump{
        flex-direction:column;
        align-items:stretch;
      }
      .quick-actions{
        flex-direction:column;
      }
    }
    @media (max-width: 519.98px){
      h1{font-size:1.82rem}
      .hero-copy p,
      .section-head p,
      .cta-box p{
        font-size:.94rem;
      }
      .option-card{
        min-height:auto;
      }
      .meta-chip{
        min-width:100%;
      }
      .news-item{
        flex-direction:column;
      }
      .news-item i{
        margin-top:0;
      }
    }

/* roulang page: category1 */
:root{
  --bg:#070b10;
  --bg-2:#0b1118;
  --panel:#0f1620;
  --panel-2:#131c27;
  --panel-3:#182231;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#eef3f8;
  --muted:#a7b3c3;
  --muted-2:#7f8a98;
  --gold:#d8b56d;
  --gold-2:#f1d79a;
  --teal:#7ed9c9;
  --red:#d56f6f;
  --shadow:0 20px 60px rgba(0,0,0,.34);
  --shadow-soft:0 10px 30px rgba(0,0,0,.24);
  --radius:14px;
  --radius-sm:12px;
  --radius-xs:10px;
  --space:clamp(1rem, 1vw + .7rem, 1.5rem);
}
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    radial-gradient(1200px 700px at 15% -10%, rgba(216,181,109,.12), transparent 42%),
    radial-gradient(1000px 700px at 90% 5%, rgba(126,217,201,.08), transparent 40%),
    linear-gradient(180deg, #070b10 0%, #0a0f14 55%, #06090d 100%);
  color:var(--text);
  line-height:1.7;
  letter-spacing:0;
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:90px 90px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.16), transparent 75%);
  opacity:.22;
  z-index:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
::selection{background:rgba(216,181,109,.32);color:#fff}
:focus-visible{outline:2px solid rgba(241,215,154,.95);outline-offset:3px}
.container-xxl{position:relative;z-index:1}
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(8,12,18,.88), rgba(8,12,18,.68));
  border-bottom:1px solid var(--line);
}
.site-header .navbar{
  padding:.9rem 0;
}
.navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font-weight:800;
  letter-spacing:0;
  color:var(--text);
}
.brand-mark{
  width:2.1rem;
  height:2.1rem;
  border-radius:12px;
  display:inline-grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(216,181,109,.22), rgba(126,217,201,.14));
  border:1px solid rgba(241,215,154,.24);
  color:var(--gold-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-links{
  gap:.35rem;
}
.nav-link{
  position:relative;
  color:var(--muted);
  font-weight:600;
  border-radius:999px;
  padding:.55rem .92rem;
  transition:background .2s ease,color .2s ease,transform .2s ease,border-color .2s ease;
  border:1px solid transparent;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active{
  color:var(--text);
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}
.nav-search{
  min-width:min(22rem, 100%);
}
.nav-search .form-control{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  border-radius:999px 0 0 999px;
  padding:.78rem 1rem;
  box-shadow:none;
}
.nav-search .form-control::placeholder{color:var(--muted-2)}
.nav-search .form-control:focus{
  background:rgba(255,255,255,.05);
  border-color:rgba(241,215,154,.42);
  box-shadow:0 0 0 .2rem rgba(216,181,109,.14);
  color:var(--text);
}
.btn,
.btn:focus{
  box-shadow:none !important;
}
.btn-accent{
  background:linear-gradient(135deg, #e2c27d 0%, #b78638 100%);
  color:#11151a;
  border:1px solid rgba(241,215,154,.3);
  font-weight:700;
  border-radius:999px;
  padding:.78rem 1.1rem;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn-accent:hover,
.btn-accent:focus-visible{
  color:#0d1117;
  transform:translateY(-1px);
  filter:saturate(1.06);
  box-shadow:0 14px 30px rgba(184,135,58,.24);
}
.btn-ghost{
  background:rgba(255,255,255,.035);
  color:var(--text);
  border:1px solid var(--line);
  font-weight:700;
  border-radius:999px;
  padding:.78rem 1.05rem;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-color:rgba(241,215,154,.24);
  transform:translateY(-1px);
}
.navbar-toggler{
  border:1px solid var(--line);
  border-radius:12px;
  padding:.6rem .75rem;
  background:rgba(255,255,255,.03);
}
.navbar-toggler-icon{
  filter:invert(1) brightness(1.2);
}
main{
  position:relative;
  z-index:1;
  padding-bottom:8.75rem;
}
.hero-section,
.section-band,
.footer{
  position:relative;
}
.hero-section{
  padding:2rem 0 2.8rem;
}
.hero-wrap{
  padding-top:1rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(1.2rem, 2vw, 2rem);
  align-items:stretch;
}
.hero-copy{
  padding:clamp(1.25rem, 2vw, 2.2rem) 0;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.38rem .75rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(241,215,154,.18);
  color:var(--gold-2);
  font-size:.94rem;
  font-weight:700;
  margin-bottom:1rem;
}
.hero-title{
  margin:0;
  font-size:clamp(2.25rem, 4vw, 4.15rem);
  line-height:1.02;
  font-weight:900;
  letter-spacing:0;
  max-width:12ch;
}
.hero-title .accent{
  color:var(--gold-2);
}
.hero-lead{
  margin:1rem 0 0;
  max-width:36rem;
  color:var(--muted);
  font-size:1.05rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.5rem;
}
.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.25rem;
}
.meta-pill,
.tag-pill,
.info-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:999px;
  padding:.42rem .72rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font-size:.9rem;
}
.hero-visual{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    linear-gradient(145deg, rgba(216,181,109,.11), rgba(126,217,201,.08));
  border:1px solid rgba(255,255,255,.09);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(110deg, rgba(255,255,255,.10), transparent 20%, transparent 80%, rgba(255,255,255,.08)),
    radial-gradient(circle at 30% 20%, rgba(241,215,154,.12), transparent 26%),
    radial-gradient(circle at 75% 30%, rgba(126,217,201,.12), transparent 24%);
  pointer-events:none;
}
.visual-inner{
  position:relative;
  padding:1rem;
  display:grid;
  gap:.9rem;
  min-height:100%;
}
.visual-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}
.visual-title{
  margin:0;
  font-size:1.05rem;
  font-weight:800;
}
.visual-sub{
  color:var(--muted);
  font-size:.92rem;
}
.ratio-box{
  display:grid;
  gap:.6rem;
}
.progress-rail{
  height:.8rem;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  overflow:hidden;
}
.progress-rail > span{
  display:block;
  height:100%;
  width:64%;
  border-radius:inherit;
  background:linear-gradient(90deg, #f0d79a, #cf9e4d 60%, #7ed9c9 100%);
  box-shadow:0 0 18px rgba(216,181,109,.22);
}
.visual-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.75rem;
}
.visual-tile{
  min-height:7.2rem;
  border-radius:var(--radius-sm);
  background:rgba(8,12,18,.45);
  border:1px solid rgba(255,255,255,.08);
  padding:.9rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.visual-tile strong{
  font-size:1.4rem;
  line-height:1;
}
.visual-tile span{
  color:var(--muted);
  font-size:.9rem;
}
.visual-stack{
  display:grid;
  gap:.65rem;
}
.stack-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.82rem .9rem;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.stack-line b{
  font-size:.98rem;
}
.stack-line small{
  color:var(--muted);
}
.section-band{
  padding:2.4rem 0;
}
.section-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.1rem;
}
.section-heading h2{
  margin:0;
  font-size:clamp(1.55rem, 2.2vw, 2.1rem);
  line-height:1.08;
  font-weight:850;
}
.section-heading p{
  margin:0;
  color:var(--muted);
  max-width:44rem;
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.feature-card,
.scene-card,
.score-card,
.faq-wrap,
.cta-banner,
.footer,
.bottom-rail{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
  border-radius:var(--radius);
}
.feature-card{
  padding:1.1rem;
  min-height:100%;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.feature-card:hover{
  transform:translateY(-2px);
  border-color:rgba(241,215,154,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}
.feature-icon{
  width:2.6rem;
  height:2.6rem;
  display:inline-grid;
  place-items:center;
  border-radius:12px;
  background:rgba(216,181,109,.12);
  border:1px solid rgba(241,215,154,.18);
  color:var(--gold-2);
  margin-bottom:.95rem;
}
.feature-card h3{
  margin:0 0 .45rem;
  font-size:1.08rem;
  font-weight:800;
}
.feature-card p{
  margin:0;
  color:var(--muted);
}
.scene-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1rem;
  align-items:start;
}
.scene-card{
  padding:1.1rem;
}
.scene-list{
  display:grid;
  gap:.8rem;
}
.scene-step{
  display:flex;
  gap:.85rem;
  padding:.9rem;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}
.step-mark{
  flex:0 0 2.2rem;
  height:2.2rem;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(216,181,109,.16), rgba(126,217,201,.12));
  border:1px solid rgba(241,215,154,.16);
  color:var(--gold-2);
  font-weight:800;
}
.scene-step h4{
  margin:0 0 .15rem;
  font-size:1rem;
  font-weight:800;
}
.scene-step p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}
.compare-table{
  display:grid;
  gap:.7rem;
}
.compare-head,
.compare-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  align-items:center;
}
.compare-head{
  color:var(--muted);
  font-size:.9rem;
  padding:0 .15rem;
}
.compare-row{
  padding:.9rem 1rem;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}
.compare-row strong{
  display:block;
  font-size:.98rem;
}
.compare-row span{
  color:var(--muted);
  font-size:.92rem;
}
.compare-row .good{
  color:#dff6f0;
}
.label-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.9rem;
}
.label-cloud .tag-pill{
  background:rgba(255,255,255,.03);
}
.score-strip{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
  margin-bottom:1rem;
}
.score-card{
  padding:1rem;
}
.score-value{
  display:block;
  font-size:1.6rem;
  line-height:1;
  font-weight:900;
  color:var(--gold-2);
  margin-bottom:.3rem;
}
.score-label{
  color:var(--muted);
  font-size:.92rem;
}
.review-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.review-card{
  padding:1.05rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.review-card .quote{
  margin:0;
  font-size:1rem;
  color:#f4f7fb;
}
.review-card .who{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:.85rem;
  color:var(--muted);
  font-size:.92rem;
}
.review-stars{
  color:#f0d79a;
  letter-spacing:1px;
}
.faq-wrap{
  padding:1rem;
}
.accordion{
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--text);
  --bs-accordion-border-color: rgba(255,255,255,.08);
  --bs-accordion-btn-color: var(--text);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-active-color: var(--text);
  --bs-accordion-active-bg: rgba(255,255,255,.03);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f1d79a'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v14m7-7H5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f1d79a'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 12H5'/%3e%3c/svg%3e");
}
.accordion-item{
  background:transparent;
  border-color:rgba(255,255,255,.08);
}
.accordion-button{
  box-shadow:none !important;
  font-weight:800;
  border-radius:0;
  padding:1rem 1.1rem;
}
.accordion-button:not(.collapsed){
  color:var(--text);
  background:rgba(255,255,255,.03);
}
.accordion-body{
  color:var(--muted);
  padding:0 1.1rem 1rem;
}
.cta-banner{
  padding:1.2rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.cta-banner h2{
  margin:0;
  font-size:clamp(1.35rem, 2vw, 1.8rem);
  font-weight:900;
}
.cta-banner p{
  margin:.3rem 0 0;
  color:var(--muted);
}
.footer{
  margin-top:1rem;
  padding:1.5rem 0 1rem;
  border-radius:0;
  border-left:none;
  border-right:none;
  border-bottom:none;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.02));
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr 1fr;
  gap:1.2rem;
}
.footer h3{
  margin:0 0 .8rem;
  font-size:1.05rem;
  font-weight:850;
}
.footer p,
.footer-links a{
  color:var(--muted);
}
.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.55rem;
}
.footer-links a{
  transition:color .2s ease, transform .2s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible{
  color:var(--text);
}
.copyright{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.75rem;
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--muted-2);
  font-size:.92rem;
}
.bottom-rail{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1040;
  margin:0;
  border-left:none;
  border-right:none;
  border-bottom:none;
  border-radius:0;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(9,13,19,.68), rgba(9,13,19,.92));
}
.bottom-rail-inner{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) auto auto;
  gap:.75rem;
  align-items:center;
  padding:.85rem 0;
}
.bottom-rail .rail-copy{
  min-width:0;
}
.bottom-rail .rail-copy strong{
  display:block;
  font-size:1rem;
  line-height:1.2;
}
.bottom-rail .rail-copy span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
}
.rail-search .form-control{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  border-radius:999px;
  padding:.72rem .95rem;
}
.rail-search .form-control::placeholder{color:var(--muted-2)}
.rail-search .form-control:focus{
  border-color:rgba(241,215,154,.42);
  box-shadow:0 0 0 .2rem rgba(216,181,109,.12);
}
.rail-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.rail-actions .btn{
  white-space:nowrap;
}
.section-note{
  color:var(--muted-2);
  font-size:.92rem;
  margin-top:.65rem;
}
@media (max-width: 1199.98px){
  .hero-grid,
  .scene-grid{
    grid-template-columns:1fr;
  }
  .feature-grid,
  .review-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .score-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 991.98px){
  .nav-links{
    gap:.25rem;
    margin:.5rem 0;
  }
  .navbar-collapse{
    padding-top:1rem;
  }
  .nav-search{
    width:100%;
  }
  .bottom-rail-inner{
    grid-template-columns:1fr;
  }
  .rail-actions{
    justify-content:flex-start;
  }
}
@media (max-width: 767.98px){
  .hero-section{
    padding-top:1.5rem;
  }
  .feature-grid,
  .review-grid,
  .score-strip,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .visual-grid{
    grid-template-columns:1fr;
  }
  .compare-head,
  .compare-row{
    grid-template-columns:1fr;
  }
  .hero-title{
    max-width:none;
  }
}
@media (max-width: 575.98px){
  .site-header .navbar{
    padding:.75rem 0;
  }
  .nav-link{
    width:100%;
    justify-content:center;
  }
  .btn-accent,
  .btn-ghost{
    width:100%;
    justify-content:center;
  }
  .hero-actions .btn{
    flex:1 1 100%;
  }
  .cta-banner{
    align-items:stretch;
  }
  .cta-banner .btn{
    width:100%;
  }
}

/* roulang page: category2 */
:root{
      --bg:#090b0f;
      --bg-soft:#0f1319;
      --panel:#12171e;
      --panel-2:#161c24;
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(255,255,255,.14);
      --text:#f3f4f6;
      --muted:#a8b0bb;
      --muted-2:#7f8895;
      --accent:#d8b76a;
      --accent-2:#6ed6ca;
      --accent-3:#8da8ff;
      --danger:#ff6d6d;
      --shadow:0 18px 40px rgba(0,0,0,.28);
      --shadow-soft:0 10px 24px rgba(0,0,0,.2);
      --radius:8px;
      --radius-sm:6px;
      --space:clamp(16px,2vw,24px);
      --container:1240px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 18%),
        linear-gradient(135deg, #07090c 0%, #0b0d11 40%, #0e1117 100%);
      min-height:100vh;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size:56px 56px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.16) 62%, rgba(0,0,0,0));
      opacity:.18;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(216,183,106,.28);color:#fff}
    .container-xxl{max-width:var(--container)}
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      backdrop-filter: blur(16px);
      background:rgba(9,11,15,.72);
      border-bottom:1px solid var(--line);
    }
    .navbar{
      padding:.6rem 0;
    }
    .navbar-brand{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      font-weight:800;
      letter-spacing:0;
      color:var(--text);
      white-space:nowrap;
    }
    .brand-mark{
      width:2rem;height:2rem;
      border-radius:7px;
      display:grid;place-items:center;
      background:linear-gradient(145deg, rgba(216,183,106,.22), rgba(110,214,202,.14));
      border:1px solid rgba(216,183,106,.35);
      color:var(--accent);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    .nav-links{gap:.35rem}
    .nav-link{
      color:var(--muted);
      font-weight:650;
      font-size:.96rem;
      padding:.62rem .85rem;
      border-radius:var(--radius-sm);
      border:1px solid transparent;
      transition:all .22s ease;
    }
    .nav-link:hover,
    .nav-link:focus{
      color:var(--text);
      border-color:var(--line-strong);
      background:rgba(255,255,255,.03);
    }
    .nav-link.active{
      color:#fff;
      background:rgba(216,183,106,.12);
      border-color:rgba(216,183,106,.24);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }
    .nav-search{
      min-width:min(330px, 100%);
    }
    .nav-search .form-control{
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:var(--text);
      border-radius:var(--radius-sm) 0 0 var(--radius-sm);
      box-shadow:none;
      min-height:42px;
    }
    .nav-search .form-control::placeholder{color:var(--muted-2)}
    .nav-search .form-control:focus{
      border-color:rgba(216,183,106,.38);
      box-shadow:0 0 0 .2rem rgba(216,183,106,.12);
      background:rgba(255,255,255,.05);
      color:var(--text);
    }
    .btn-accent,
    .btn-ghost,
    .btn-line{
      min-height:42px;
      border-radius:var(--radius-sm);
      font-weight:700;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
      letter-spacing:0;
    }
    .btn-accent{
      color:#15120a;
      background:linear-gradient(135deg, #e7cb86 0%, #caa24c 100%);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 10px 22px rgba(202,162,76,.18);
    }
    .btn-accent:hover,
    .btn-accent:focus{
      color:#120f08;
      transform:translateY(-1px);
      box-shadow:0 12px 26px rgba(202,162,76,.25);
    }
    .btn-ghost{
      color:var(--text);
      background:rgba(255,255,255,.03);
      border:1px solid var(--line);
    }
    .btn-ghost:hover,
    .btn-ghost:focus{
      color:#fff;
      border-color:rgba(110,214,202,.3);
      background:rgba(110,214,202,.08);
      transform:translateY(-1px);
    }
    .btn-line{
      color:var(--text);
      border:1px solid rgba(216,183,106,.24);
      background:rgba(216,183,106,.08);
    }
    .btn-line:hover,
    .btn-line:focus{
      color:#fff;
      border-color:rgba(216,183,106,.42);
      background:rgba(216,183,106,.14);
      transform:translateY(-1px);
    }
    .nav-toggle{
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.03);
      color:var(--text);
    }
    .nav-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,183,106,.12)}
    .nav-toggle .navbar-toggler-icon{
      filter:invert(1);
      opacity:.9;
    }
    main{position:relative;z-index:1}
    .hero{
      padding:clamp(1.2rem, 2vw, 1.8rem) 0 1.2rem;
    }
    .hero-shell{
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        linear-gradient(135deg, rgba(216,183,106,.08), rgba(110,214,202,.04) 30%, rgba(143,168,255,.05));
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:0;
      min-height:620px;
    }
    .hero-copy{
      padding:clamp(1.4rem, 3vw, 2.2rem);
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:1rem;
      border-right:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(12,15,20,.16), rgba(12,15,20,.02)),
        radial-gradient(circle at 15% 15%, rgba(216,183,106,.10), transparent 28%);
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.35rem .7rem;
      width:max-content;
      border-radius:999px;
      border:1px solid rgba(216,183,106,.22);
      background:rgba(216,183,106,.08);
      color:#f0deab;
      font-size:.85rem;
      font-weight:700;
    }
    .hero h1{
      margin:0;
      font-size:clamp(2rem, 3.8vw, 4rem);
      line-height:1.02;
      font-weight:900;
      letter-spacing:0;
      max-width:12ch;
    }
    .hero-lead{
      margin:0;
      color:var(--muted);
      font-size:1.03rem;
      line-height:1.8;
      max-width:58ch;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      align-items:center;
      margin-top:.2rem;
    }
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      margin-top:.15rem;
    }
    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.52rem .78rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--text);
      font-size:.92rem;
    }
    .hero-visual{
      position:relative;
      padding:clamp(1rem, 2.5vw, 1.6rem);
      display:flex;
      flex-direction:column;
      gap:1rem;
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
        radial-gradient(circle at 78% 18%, rgba(110,214,202,.09), transparent 24%);
    }
    .visual-board{
      flex:1;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(22,28,36,.96), rgba(15,19,25,.92));
      overflow:hidden;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .visual-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:.95rem 1rem;
      border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.02);
    }
    .visual-top strong{font-size:.98rem}
    .flag{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.34rem .56rem;
      border-radius:999px;
      background:rgba(216,183,106,.12);
      color:#f1dfae;
      border:1px solid rgba(216,183,106,.18);
      font-size:.82rem;
      font-weight:700;
    }
    .visual-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:.9rem;
      padding:1rem;
    }
    .visual-main,
    .visual-side{
      display:flex;
      flex-direction:column;
      gap:.85rem;
    }
    .screen{
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
      background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
      padding:.95rem;
      min-height:114px;
    }
    .screen h3{
      font-size:.98rem;
      margin:0 0 .45rem;
      font-weight:800;
    }
    .screen p{
      margin:0;
      color:var(--muted);
      line-height:1.65;
      font-size:.92rem;
    }
    .badge-row{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:.8rem;
    }
    .mini-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .55rem;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:#dfe4ea;
      font-size:.78rem;
      font-weight:650;
    }
    .metric-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:.75rem;
      padding:0 1rem 1rem;
    }
    .metric{
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
      padding:.82rem .85rem;
      background:rgba(255,255,255,.025);
    }
    .metric strong{
      display:block;
      font-size:1.2rem;
      line-height:1.1;
      margin-bottom:.25rem;
      color:#fff;
    }
    .metric span{
      color:var(--muted);
      font-size:.83rem;
    }
    .tag-strip{
      margin-top:-.35rem;
      padding:0 0 1rem;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      align-items:center;
    }
    .tag-chip{
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--text);
      border-radius:999px;
      padding:.48rem .75rem;
      font-size:.9rem;
      font-weight:650;
      transition:all .18s ease;
    }
    .tag-chip:hover,
    .tag-chip:focus{
      border-color:rgba(110,214,202,.26);
      background:rgba(110,214,202,.08);
      transform:translateY(-1px);
    }
    .section{
      padding:1rem 0 1.2rem;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:1rem;
      margin-bottom:.95rem;
    }
    .section-title{
      margin:0;
      font-size:clamp(1.35rem, 2vw, 1.85rem);
      font-weight:850;
      line-height:1.15;
    }
    .section-copy{
      margin:.25rem 0 0;
      color:var(--muted);
      line-height:1.7;
      max-width:62ch;
    }
    .section-note{
      color:var(--muted-2);
      font-size:.92rem;
      white-space:nowrap;
    }
    .panel{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(18,23,30,.98), rgba(15,19,25,.96));
      box-shadow:var(--shadow-soft);
    }
    .offer-stack{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:1rem;
      align-items:start;
    }
    .offer-list{
      display:grid;
      gap:.85rem;
    }
    .offer-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.025);
      padding:1rem;
      display:grid;
      grid-template-columns:auto 1fr auto;
      gap:.9rem;
      align-items:center;
      transition:transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .offer-card:hover{
      transform:translateY(-1px);
      border-color:rgba(216,183,106,.24);
      background:rgba(255,255,255,.035);
    }
    .offer-num{
      width:2.5rem;height:2.5rem;
      display:grid;place-items:center;
      border-radius:var(--radius-sm);
      border:1px solid rgba(216,183,106,.24);
      color:#f2dfad;
      background:rgba(216,183,106,.08);
      font-weight:800;
    }
    .offer-body h3{
      margin:0 0 .35rem;
      font-size:1.02rem;
      font-weight:800;
    }
    .offer-body p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.95rem;
    }
    .offer-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.4rem;
      margin-top:.65rem;
    }
    .tiny-tag{
      font-size:.78rem;
      color:#dfe6f0;
      padding:.2rem .48rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
    }
    .offer-action{
      align-self:center;
    }
    .side-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      padding:1rem;
      margin-bottom:.85rem;
    }
    .side-card h3{
      margin:0 0 .55rem;
      font-size:1rem;
      font-weight:800;
    }
    .side-card p,
    .side-card li{
      color:var(--muted);
      line-height:1.7;
      font-size:.93rem;
    }
    .side-card ul{
      padding-left:1.1rem;
      margin:0;
    }
    .stats{
      display:grid;
      gap:.7rem;
    }
    .stat-line{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:center;
      padding:.72rem .82rem;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.025);
      border:1px solid var(--line);
    }
    .stat-line strong{
      font-size:1rem;
    }
    .stat-line span{
      color:var(--accent-2);
      font-weight:800;
    }
    .demo-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:.85rem;
    }
    .demo-card{
      padding:1rem;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.02);
      min-height:190px;
      position:relative;
      overflow:hidden;
    }
    .demo-card::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:3px;
      background:linear-gradient(90deg, transparent, rgba(216,183,106,.55), transparent);
      opacity:.85;
    }
    .demo-icon{
      width:2.4rem;height:2.4rem;
      display:grid;place-items:center;
      border-radius:var(--radius-sm);
      margin-bottom:.85rem;
      border:1px solid rgba(216,183,106,.18);
      background:rgba(216,183,106,.08);
      color:#f1deaf;
    }
    .demo-card h3{
      margin:0 0 .45rem;
      font-size:1rem;
      font-weight:800;
    }
    .demo-card p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.93rem;
}
    .demo-feet{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.8rem;
      margin-top:1rem;
      padding-top:.85rem;
      border-top:1px solid var(--line);
      color:var(--muted-2);
      font-size:.86rem;
    }
    .proof-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:1rem;
    }
    .rating-box,
    .quote-box{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:rgba(255,255,255,.025);
      padding:1rem;
    }
    .rating-top{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:flex-start;
      margin-bottom:.8rem;
    }
    .stars{
      color:#f0cf73;
      letter-spacing:.08rem;
      font-size:1rem;
    }
    .rating-box h3,
    .quote-box h3{
      margin:0 0 .45rem;
      font-size:1rem;
      font-weight:800;
    }
    .rating-box p,
    .quote-box p{
      margin:0;
      color:var(--muted);
      line-height:1.75;
      font-size:.95rem;
    }
    .bar-list{
      display:grid;
      gap:.7rem;
      margin-top:1rem;
    }
    .bar-item{
      display:grid;
      grid-template-columns:110px 1fr auto;
      gap:.8rem;
      align-items:center;
      color:var(--muted);
      font-size:.9rem;
    }
    .bar-track{
      height:10px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.05);
      border:1px solid var(--line);
    }
    .bar-fill{
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, rgba(110,214,202,.9), rgba(216,183,106,.95));
    }
    .quote-list{
      display:grid;
      gap:.75rem;
      margin-top:1rem;
    }
    .quote{
      padding:.84rem .9rem;
      border-radius:var(--radius-sm);
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
    }
    .quote strong{
      display:block;
      margin-bottom:.3rem;
      color:#fff;
      font-size:.92rem;
    }
    .quote span{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.65;
    }
    .faq .accordion{
      --bs-accordion-bg: transparent;
      --bs-accordion-border-color: rgba(255,255,255,.08);
      --bs-accordion-color: var(--text);
      --bs-accordion-btn-color: var(--text);
      --bs-accordion-btn-bg: rgba(255,255,255,.03);
      --bs-accordion-active-bg: rgba(216,183,106,.06);
      --bs-accordion-active-color: #fff;
      --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(216,183,106,.12);
      --bs-accordion-btn-padding-x: 1rem;
      --bs-accordion-btn-padding-y: .95rem;
      --bs-accordion-body-padding-x: 1rem;
      --bs-accordion-body-padding-y: .95rem;
    }
    .faq .accordion-item{
      background:rgba(255,255,255,.02);
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      margin-bottom:.75rem;
    }
    .faq .accordion-button{
      font-weight:750;
      box-shadow:none;
    }
    .faq .accordion-button::after{
      filter:invert(1);
      opacity:.9;
    }
    .faq .accordion-body{
      color:var(--muted);
      line-height:1.75;
    }
    .bottom-cta{
      position:sticky;
      bottom:0;
      z-index:1025;
      padding:.75rem 0;
      margin-top:1rem;
      background:linear-gradient(180deg, rgba(9,11,15,0), rgba(9,11,15,.72) 22%, rgba(9,11,15,.92));
      border-top:1px solid rgba(255,255,255,.06);
      backdrop-filter: blur(14px);
    }
    .cta-bar{
      border:1px solid rgba(216,183,106,.18);
      border-radius:var(--radius);
      background:linear-gradient(135deg, rgba(18,23,30,.98), rgba(13,17,22,.98));
      padding:.8rem .95rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      box-shadow:var(--shadow-soft);
    }
    .cta-bar strong{
      display:block;
      font-size:1rem;
      margin-bottom:.18rem;
    }
    .cta-bar span{
      color:var(--muted);
      font-size:.9rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      align-items:center;
      justify-content:flex-end;
    }
    .footer{
      padding:1.2rem 0 1.5rem;
      border-top:1px solid var(--line);
      background:rgba(255,255,255,.015);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr .8fr .9fr;
      gap:1rem;
      padding:1rem 0;
    }
    .footer h3{
      margin:0 0 .65rem;
      font-size:1rem;
      font-weight:800;
    }
    .footer p,
    .footer li,
    .footer a{
      color:var(--muted);
      line-height:1.75;
      font-size:.92rem;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.4rem;
    }
    .footer-links a:hover,
    .footer-links a:focus{
      color:#fff;
    }
    .copyright{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      padding-top:.85rem;
      border-top:1px solid var(--line);
      color:var(--muted-2);
      font-size:.85rem;
    }
    .anchor-pad{
      scroll-margin-top:100px;
    }
    @media (max-width: 1199.98px){
      .hero-grid{grid-template-columns:1fr}
      .hero-copy{border-right:0;border-bottom:1px solid var(--line)}
      .offer-stack,
      .proof-grid{grid-template-columns:1fr}
      .demo-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 991.98px){
      .nav-search{min-width:100%}
      .nav-links{
        width:100%;
        padding-top:.25rem;
      }
      .hero{padding-top:1rem}
      .hero-grid{min-height:auto}
      .visual-grid,
      .metric-grid,
      .footer-grid{grid-template-columns:1fr}
      .bar-item{grid-template-columns:1fr}
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
    }
    @media (max-width: 767.98px){
      .navbar-brand{font-size:1rem}
      .hero-copy,
      .hero-visual,
      .visual-grid,
      .section,
      .footer{
        padding-left:0;
        padding-right:0;
      }
      .hero-shell,
      .panel,
      .cta-bar{
        border-left:0;
        border-right:0;
        border-radius:0;
      }
      .hero h1{max-width:none}
      .demo-grid{grid-template-columns:1fr}
      .cta-bar{
        align-items:flex-start;
        flex-direction:column;
      }
      .cta-actions{width:100%;justify-content:flex-start}
      .bottom-cta{padding-bottom:.55rem}
    }
    @media (max-width: 575.98px){
      .nav-link{padding:.55rem .7rem}
      .hero-lead,
      .section-copy,
      .footer p,
      .footer li,
      .rating-box p,
      .quote-box p,
      .offer-body p,
      .screen p{
        line-height:1.72;
      }
      .hero-actions,
      .cta-actions{
        width:100%;
      }
      .hero-actions .btn,
      .cta-actions .btn{
        flex:1 1 auto;
      }
      .tag-row{gap:.42rem}
      .tag-chip{padding:.42rem .65rem}
      .metric strong{font-size:1.08rem}
    }