/* roulang page: index */
:root{
      --bg:#0f0d12;
      --bg-2:#15121a;
      --bg-3:#1d1822;
      --surface:rgba(255,255,255,.05);
      --surface-2:rgba(255,255,255,.08);
      --surface-3:rgba(255,255,255,.12);
      --text:#f4ede5;
      --muted:#b5aa9b;
      --soft:#d4c3ad;
      --line:rgba(255,255,255,.1);
      --line-2:rgba(216,161,93,.28);
      --brand:#d8a15d;
      --brand-2:#b56a55;
      --brand-3:#ecd0a9;
      --success:#86c5a7;
      --danger:#d6776a;
      --shadow:0 20px 50px rgba(0,0,0,.28);
      --shadow-soft:0 12px 32px rgba(0,0,0,.18);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --space-1:.35rem;
      --space-2:.6rem;
      --space-3:.9rem;
      --space-4:1.25rem;
      --space-5:1.75rem;
      --space-6:2.5rem;
      --space-7:3.5rem;
      --space-8:5rem;
      --ease:cubic-bezier(.2,.7,.2,1);
    }

    *,*::before,*::after{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",sans-serif;
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 20% -10%, rgba(216,161,93,.16), transparent 60%),
        radial-gradient(900px 560px at 92% 8%, rgba(181,106,85,.12), transparent 60%),
        radial-gradient(780px 520px at 50% 110%, rgba(255,255,255,.04), transparent 60%),
        linear-gradient(180deg, #0b0910 0%, #0f0d12 42%, #0d0b10 100%);
      line-height:1.7;
      letter-spacing:.01em;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.03) 0, rgba(255,255,255,0) 24%),
        linear-gradient(0deg, rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
      background-size:auto, 100% 38px, 38px 100%;
      opacity:.35;
      mask-image:radial-gradient(circle at center, black 62%, transparent 100%);
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:color .22s var(--ease), transform .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease);
    }
    a:hover{color:var(--brand-3)}
    img{max-width:100%;display:block}
    button,input,textarea,select{
      font:inherit;
    }
    ::selection{background:rgba(216,161,93,.28);color:var(--text)}
    :focus-visible{
      outline:3px solid rgba(216,161,93,.35);
      outline-offset:2px;
    }
    .container{
      max-width:1240px;
      padding-left:1rem;
      padding-right:1rem;
      position:relative;
      z-index:1;
    }
    @media (min-width:1400px){
      .container{max-width:1320px}
    }

    .site-header{
      position:sticky;
      top:0.7rem;
      z-index:1030;
      padding:0.45rem 0 0;
      margin-bottom:-0.1rem;
    }
    .nav-shell{
      margin:0 auto;
      border:1px solid rgba(255,255,255,.08);
      border-radius:24px;
      background:rgba(18,15,22,.72);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease);
    }
    .site-header.is-scrolled .nav-shell{
      background:rgba(16,13,19,.88);
      border-color:rgba(255,255,255,.12);
      box-shadow:0 18px 45px rgba(0,0,0,.32);
    }
    .navbar{
      padding:.9rem 1rem;
    }
    .navbar-brand{
      display:inline-flex;
      align-items:center;
      gap:.75rem;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--text) !important;
      white-space:nowrap;
    }
    .brand-mark{
      width:2.4rem;height:2.4rem;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(135deg, rgba(216,161,93,.18), rgba(181,106,85,.28)),
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
      border:1px solid rgba(216,161,93,.28);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      position:relative;
      overflow:hidden;
      flex:0 0 auto;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:-20%;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 48%);
      transform:rotate(18deg);
    }
    .brand-mark span{
      position:relative;
      z-index:1;
      font-size:.95rem;
      color:var(--brand-3);
      font-weight:900;
    }
    .navbar-nav{
      gap:.35rem;
    }
    .nav-link{
      color:var(--soft) !important;
      padding:.7rem .95rem !important;
      border-radius:999px;
      font-weight:600;
      position:relative;
      transition:background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      color:var(--text) !important;
      background:rgba(255,255,255,.05);
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#fff !important;
      background:linear-gradient(135deg, rgba(216,161,93,.2), rgba(181,106,85,.22));
      border:1px solid rgba(216,161,93,.25);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }
    .nav-cta{
      padding:.72rem 1rem !important;
      background:linear-gradient(135deg, rgba(216,161,93,.25), rgba(181,106,85,.35));
      color:#fff !important;
      border:1px solid rgba(216,161,93,.25);
      box-shadow:0 10px 24px rgba(181,106,85,.12);
    }
    .nav-cta:hover{box-shadow:0 14px 30px rgba(181,106,85,.22)}
    .navbar-toggler{
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      background:rgba(255,255,255,.03);
      box-shadow:none !important;
      padding:.55rem .7rem;
    }
    .navbar-toggler-icon{
      width:1.3em;height:1.3em;
      filter:invert(1) brightness(1.2);
    }
    .nav-shell .navbar-collapse{
      margin-top:.9rem;
    }
    .nav-shell .navbar-collapse.show,
    .nav-shell .navbar-collapse.collapsing{
      padding-top:.75rem;
      border-top:1px solid rgba(255,255,255,.08);
    }

    .hero{
      padding:3rem 0 2rem;
    }
    .hero-wrap{
      position:relative;
      padding:2.25rem 0 1.2rem;
    }
    .hero-wrap::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:34px;
      background:
        radial-gradient(700px 380px at 15% 20%, rgba(216,161,93,.12), transparent 60%),
        radial-gradient(500px 280px at 85% 15%, rgba(181,106,85,.15), transparent 60%);
      filter:blur(0);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      z-index:1;
      align-items:center;
      row-gap:1.5rem;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.5rem .85rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:var(--soft);
      font-size:.92rem;
      letter-spacing:.02em;
    }
    .eyebrow i{
      width:.55rem;height:.55rem;border-radius:50%;
      background:var(--brand);
      display:inline-block;
      box-shadow:0 0 0 5px rgba(216,161,93,.12);
    }
    .hero h1{
      margin:.95rem 0 .95rem;
      font-size:clamp(2.4rem, 5vw, 4.8rem);
      line-height:1.05;
      letter-spacing:-.03em;
      font-weight:900;
      text-wrap:balance;
    }
    .hero-lead{
      max-width:42rem;
      color:var(--soft);
      font-size:1.06rem;
      margin-bottom:1.3rem;
    }
    .hero-points{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin:0 0 1.3rem;
      padding:0;
      list-style:none;
    }
    .hero-points li,
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.55rem .8rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      color:var(--soft);
      font-size:.92rem;
      line-height:1;
    }
    .chip strong{color:var(--text)}
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      align-items:center;
      margin-bottom:1.25rem;
    }
    .btn-custom{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      border-radius:999px;
      padding:.9rem 1.2rem;
      font-weight:700;
      border:1px solid transparent;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
      white-space:nowrap;
    }
    .btn-custom:hover{transform:translateY(-1px)}
    .btn-brand{
      color:#1a120a;
      background:linear-gradient(135deg, #f0c98d 0%, #d8a15d 55%, #c98a62 100%);
      box-shadow:0 14px 28px rgba(216,161,93,.18);
    }
    .btn-brand:hover{
      color:#160f08;
      box-shadow:0 18px 36px rgba(216,161,93,.24);
    }
    .btn-ghost{
      color:var(--text);
      border-color:rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
    }
    .btn-ghost:hover{
      border-color:rgba(216,161,93,.26);
      background:rgba(216,161,93,.08);
      color:#fff;
    }
    .btn-soft{
      color:var(--text);
      border-color:rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
    }
    .btn-soft:hover{
      background:rgba(255,255,255,.07);
      color:#fff;
    }
    .hero-search{
      max-width:44rem;
      padding:1rem;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      box-shadow:var(--shadow-soft);
    }
    .hero-search .form-label{
      color:var(--soft);
      font-size:.95rem;
      margin-bottom:.55rem;
    }
    .hero-search .input-group{
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(12,10,15,.8);
    }
    .hero-search .form-control{
      min-height:3.4rem;
      background:transparent;
      color:var(--text);
      border:0;
      box-shadow:none;
      padding-left:1rem;
    }
    .hero-search .form-control::placeholder{color:#8f8374}
    .hero-search .form-control:focus{background:rgba(255,255,255,.02)}
    .hero-search .btn{
      min-height:3.4rem;
      border:0;
      border-radius:0;
      padding:0 1.15rem;
      font-weight:700;
    }
    .hero-hint{
      margin-top:.65rem;
      color:#978d80;
      font-size:.88rem;
    }
    .hero-stage{
      position:relative;
      max-width:520px;
      margin:0 auto;
    }
    .poster-card{
      position:relative;
      min-height:620px;
      border-radius:32px;
      padding:1.1rem;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
        linear-gradient(160deg, rgba(16,13,20,.92), rgba(28,22,31,.86));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .poster-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(340px 220px at 82% 18%, rgba(216,161,93,.22), transparent 60%),
        radial-gradient(320px 200px at 18% 84%, rgba(181,106,85,.18), transparent 58%);
      pointer-events:none;
    }
    .poster-top{
      position:relative;
      z-index:1;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      margin-bottom:1rem;
    }
    .poster-top .tag{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.48rem .72rem;
      border-radius:999px;
      border:1px solid rgba(216,161,93,.24);
      color:var(--brand-3);
      background:rgba(216,161,93,.08);
      font-size:.9rem;
    }
    .poster-top .meta{
      color:#d2c7b8;
      font-size:.92rem;
    }
    .poster-visual{
      position:relative;
      z-index:1;
      aspect-ratio: 4 / 5;
      border-radius:28px;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(16,14,20,.22), rgba(16,14,20,.82)),
        radial-gradient(circle at 50% 25%, rgba(216,161,93,.42), transparent 28%),
        linear-gradient(135deg, #20181f 0%, #2a1f25 40%, #18131b 100%);
      border:1px solid rgba(255,255,255,.09);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    .poster-visual::after{
      content:"";
      position:absolute;
      inset:auto -8% -10% -8%;
      height:38%;
      background:
        linear-gradient(180deg, transparent, rgba(0,0,0,.46)),
        linear-gradient(135deg, rgba(216,161,93,.18), rgba(181,106,85,.12));
      transform:skewY(-6deg);
    }
    .poster-glow{
      position:absolute;
      top:16%;
      left:9%;
      width:7rem;
      height:7rem;
      border-radius:50%;
      background:radial-gradient(circle, rgba(240,201,141,.5) 0%, rgba(240,201,141,.08) 42%, transparent 70%);
      filter:blur(2px);
    }
    .poster-copy{
      position:absolute;
      inset:0;
      padding:1.35rem;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      z-index:1;
    }
    .poster-copy h2{
      margin:0;
      font-size:1.9rem;
      line-height:1.1;
      font-weight:900;
      letter-spacing:-.03em;
    }
    .poster-copy p{
      margin:.75rem 0 0;
      color:#d4c8ba;
      max-width:18rem;
    }
    .poster-pill-row{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:1rem;
    }
    .poster-pill{
      padding:.45rem .7rem;
      border-radius:999px;
      background:rgba(0,0,0,.25);
      border:1px solid rgba(255,255,255,.08);
      color:#eadfcd;
      font-size:.84rem;
    }
    .poster-action{
      position:absolute;
      right:1.15rem;
      bottom:1.1rem;
      width:4.2rem;
      height:4.2rem;
      border-radius:50%;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.14);
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.06));
      box-shadow:0 16px 32px rgba(0,0,0,.26);
      z-index:2;
    }
    .poster-action::before{
      content:"";
      margin-left:.18rem;
      width:0;height:0;
      border-top:.45rem solid transparent;
      border-bottom:.45rem solid transparent;
      border-left:.75rem solid #f5ece2;
    }
    .ticket-card{
      position:absolute;
      left:1rem;
      bottom:-1.2rem;
      z-index:3;
      width:min(78%, 360px);
      border-radius:22px;
      padding:1rem 1rem .95rem;
      background:rgba(16,13,20,.96);
      border:1px solid rgba(216,161,93,.22);
      box-shadow:var(--shadow-soft);
    }
    .ticket-card .line{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:flex-start;
    }
    .ticket-card .line strong{
      display:block;
      font-size:1.05rem;
      margin-bottom:.2rem;
    }
    .ticket-card small{
      color:#b9ad9d;
      display:block;
    }
    .ticket-meter{
      margin-top:.8rem;
      height:.45rem;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
    }
    .ticket-meter span{
      display:block;
      width:72%;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, #d8a15d, #b56a55);
    }
    .ticket-foot{
      display:flex;
      gap:.55rem;
      flex-wrap:wrap;
      margin-top:.85rem;
    }

    .section{
      padding:4.2rem 0 0;
    }
    .section-head{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:1rem 1.5rem;
      align-items:flex-end;
      margin-bottom:1.6rem;
    }
    .section-head .copy{
      max-width:46rem;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.45rem .8rem;
      border-radius:999px;
      color:var(--brand-3);
      background:rgba(216,161,93,.08);
      border:1px solid rgba(216,161,93,.2);
      margin-bottom:.8rem;
      font-size:.88rem;
      letter-spacing:.02em;
    }
    .section-kicker::before{
      content:"";
      width:.5rem;height:.5rem;border-radius:50%;
      background:var(--brand);
      box-shadow:0 0 0 5px rgba(216,161,93,.12);
      flex:0 0 auto;
    }
    .section-head h2{
      margin:0;
      font-size:clamp(1.8rem, 3.3vw, 2.7rem);
      line-height:1.12;
      letter-spacing:-.025em;
      font-weight:900;
    }
    .section-head p{
      margin:.8rem 0 0;
      color:var(--soft);
      max-width:40rem;
    }
    .section-note{
      color:#9f9486;
      font-size:.95rem;
    }

    .panel{
      border-radius:var(--radius-xl);
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .panel-inner{
      padding:1.2rem;
    }
    .feature-main{
      min-height:100%;
      padding:1.35rem;
      background:
        radial-gradient(460px 260px at 10% 0%, rgba(216,161,93,.12), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
    }
    .feature-main h3,
    .feature-card h3,
    .scenario-card h3,
    .case-card h3,
    .price-card h3{
      margin:0;
      font-size:1.22rem;
      line-height:1.3;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .feature-main p,
    .feature-card p,
    .scenario-card p,
    .case-card p,
    .price-card p{
      margin:.8rem 0 0;
      color:var(--soft);
    }
    .feature-badge{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      font-size:.82rem;
      padding:.38rem .65rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      color:#e0d3c2;
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:1rem;
    }
    .feature-num{
      display:inline-grid;
      place-items:center;
      width:2.35rem;
      height:2.35rem;
      border-radius:14px;
      margin-bottom:1rem;
      color:#1b120a;
      background:linear-gradient(135deg, #f0c98d, #d8a15d);
      font-weight:900;
      box-shadow:0 10px 24px rgba(216,161,93,.16);
    }
    .feature-list{
      list-style:none;
      padding:0;
      margin:1rem 0 0;
      display:grid;
      gap:.75rem;
    }
    .feature-list li{
      display:flex;
      gap:.65rem;
      align-items:flex-start;
      color:#e8ded1;
    }
    .feature-list li::before{
      content:"";
      width:.6rem;
      height:.6rem;
      border-radius:50%;
      margin-top:.45rem;
      background:linear-gradient(135deg, #d8a15d, #b56a55);
      box-shadow:0 0 0 4px rgba(216,161,93,.12);
      flex:0 0 auto;
    }

    .feature-card{
      height:100%;
      padding:1.2rem;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .feature-card::after{
      content:"";
      position:absolute;
      inset:auto -20% -28% auto;
      width:12rem;
      height:12rem;
      border-radius:50%;
      background:radial-gradient(circle, rgba(216,161,93,.12) 0%, transparent 68%);
      pointer-events:none;
    }
    .feature-card .mini-head{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:flex-start;
      margin-bottom:.5rem;
    }
    .feature-card .mini-head span{
      display:inline-flex;
      padding:.32rem .58rem;
      border-radius:999px;
      font-size:.8rem;
      color:var(--brand-3);
      border:1px solid rgba(216,161,93,.2);
      background:rgba(216,161,93,.06);
      white-space:nowrap;
    }
    .feature-card .mini-foot{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.8rem;
      margin-top:1rem;
      color:#cfc2b1;
      font-size:.9rem;
    }
    .feature-card .mini-link{
      color:#fff;
      font-weight:700;
    }

    .scenario-card,
    .case-card,
    .price-card{
      height:100%;
      padding:1.2rem;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .scenario-card:hover,
    .feature-card:hover,
    .case-card:hover,
    .price-card:hover,
    .update-card:hover,
    .related-card:hover{
      transform:translateY(-3px);
      border-color:rgba(216,161,93,.22);
      box-shadow:0 18px 36px rgba(0,0,0,.24);
    }
    .scenario-card .slot,
    .case-card .slot{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      font-size:.8rem;
      color:#e1d6c5;
      padding:.35rem .55rem;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:1rem;
    }
    .scenario-card .slot::before{
      content:"";
      width:.45rem;height:.45rem;border-radius:50%;
      background:var(--success);
      box-shadow:0 0 0 4px rgba(134,197,167,.12);
    }
    .scenario-card ul,
    .price-list{
      margin:1rem 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.55rem;
    }
    .scenario-card li,
    .price-list li{
      display:flex;
      gap:.55rem;
      color:#e5dbcc;
      align-items:flex-start;
    }
    .scenario-card li::before,
    .price-list li::before{
      content:"";
      width:.48rem;height:.48rem;border-radius:50%;
      margin-top:.55rem;
      background:rgba(216,161,93,.85);
      box-shadow:0 0 0 4px rgba(216,161,93,.08);
      flex:0 0 auto;
    }
    .scenario-foot,
    .case-foot{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      margin-top:1rem;
      color:#bfb2a2;
      font-size:.9rem;
    }
    .scenario-foot a,
    .case-foot a{
      font-weight:700;
      color:#fff;
    }

    .case-metrics{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.8rem;
      margin-top:1rem;
    }
    .metric-card{
      padding:1rem;
      border-radius:20px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
    }
    .metric-card strong{
      display:block;
      font-size:1.45rem;
      line-height:1;
      color:var(--brand-3);
      margin-bottom:.35rem;
    }
    .metric-card span{
      color:#cfc2b1;
      font-size:.9rem;
    }

    .case-rail{
      display:grid;
      gap:1rem;
    }
    .case-card{
      display:flex;
      flex-direction:column;
      gap:.9rem;
      min-height: 100%;
    }
    .case-index{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:2.1rem;
      height:2.1rem;
      border-radius:999px;
      background:rgba(216,161,93,.12);
      color:var(--brand-3);
      border:1px solid rgba(216,161,93,.2);
      font-weight:900;
      margin-bottom:.2rem;
    }
    .case-result{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      width:fit-content;
      padding:.35rem .6rem;
      border-radius:999px;
      border:1px solid rgba(134,197,167,.22);
      background:rgba(134,197,167,.08);
      color:#d6f1e3;
      font-size:.84rem;
    }
    .case-result::before{
      content:"";
      width:.42rem;height:.42rem;border-radius:50%;
      background:var(--success);
    }

    .price-card{
      display:flex;
      flex-direction:column;
    }
    .price-head{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:flex-start;
      margin-bottom:.95rem;
    }
    .price-tag{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.36rem .64rem;
      border-radius:999px;
      font-size:.8rem;
      color:var(--brand-3);
      border:1px solid rgba(216,161,93,.22);
      background:rgba(216,161,93,.08);
      white-space:nowrap;
    }
    .price{
      font-size:2.5rem;
      font-weight:900;
      letter-spacing:-.04em;
      line-height:1;
      margin:.25rem 0 .15rem;
    }
    .price small{
      font-size:.95rem;
      color:#b8ab99;
      font-weight:600;
    }
    .price-note{
      color:var(--soft);
      min-height:3.2rem;
    }
    .price-reco{
      margin-top:-.2rem;
      margin-bottom:.55rem;
      align-self:flex-start;
      display:inline-flex;
      padding:.35rem .62rem;
      border-radius:999px;
      background:rgba(216,161,93,.12);
      border:1px solid rgba(216,161,93,.22);
      color:var(--brand-3);
      font-size:.8rem;
      font-weight:700;
    }
    .price-card.recommended{
      border-color:rgba(216,161,93,.24);
      background:
        radial-gradient(460px 260px at 50% 0%, rgba(216,161,93,.12), transparent 56%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    }
    .price-card .btn-custom{
      margin-top:1rem;
      width:100%;
    }

    .updates-wrap{
      border-radius:34px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(520px 280px at 8% 18%, rgba(216,161,93,.10), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .updates-head{
      padding:1.2rem 1.2rem 0;
    }
    .updates-grid{
      padding:1.2rem;
    }
    .update-card{
      display:block;
      border-radius:22px;
      padding:1rem 1rem .95rem;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 10px 24px rgba(0,0,0,.12);
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
    }
    .update-card + .update-card{margin-top:.95rem}
    .update-card .top{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:.75rem;
      align-items:center;
      margin-bottom:.7rem;
    }
    .update-card .badge-row{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
    }
    .mini-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.35rem .58rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#d8ccb9;
      font-size:.78rem;
      line-height:1;
    }
    .mini-badge.time{
      color:#cdbca7;
      border-color:rgba(216,161,93,.18);
      background:rgba(216,161,93,.06);
    }
    .update-card h3{
      margin:0;
      font-size:1.08rem;
      line-height:1.45;
      font-weight:800;
      letter-spacing:-.01em;
    }
    .update-card h3 a{
      color:var(--text);
    }
    .update-card h3 a:hover{
      color:var(--brand-3);
    }
    .update-card p{
      margin:.7rem 0 0;
      color:var(--soft);
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height:3.2em;
    }
    .update-card .bottom{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      align-items:center;
      margin-top:.95rem;
    }
    .update-card .link{
      color:#fff;
      font-weight:700;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
    }
    .update-side{
      height:100%;
      padding:1.2rem;
      border-left:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.05));
    }
    .side-card{
      padding:1rem;
      border-radius:22px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:1rem;
    }
    .side-card h3{
      margin:0;
      font-size:1rem;
      font-weight:800;
    }
    .side-card p{
      margin:.55rem 0 0;
      color:var(--soft);
      font-size:.94rem;
    }
    .search-pill-row{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:.85rem;
    }
    .related-card{
      display:flex;
      gap:.9rem;
      padding:1rem;
      border-radius:20px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      margin-bottom:.9rem;
    }
    .related-thumb{
      width:4.7rem;
      border-radius:16px;
      flex:0 0 auto;
      background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, rgba(216,161,93,.2), rgba(181,106,85,.18)),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
      position:relative;
      overflow:hidden;
    }
    .related-thumb::after{
      content:"";
      position:absolute;
      inset:auto 10% 10% 10%;
      height:30%;
      border-radius:999px;
      background:rgba(255,255,255,.14);
    }
    .related-card strong{
      display:block;
      margin-bottom:.35rem;
      font-size:.98rem;
    }
    .related-card p{
      color:var(--soft);
      font-size:.92rem;
      margin:0;
    }

    .accordion-wrap{
      border-radius:32px;
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
      box-shadow:var(--shadow-soft);
    }
    .accordion-item{
      background:transparent;
      border-color:rgba(255,255,255,.08);
    }
    .accordion-button{
      background:transparent;
      color:var(--text);
      font-weight:800;
      padding:1.15rem 1.2rem;
      box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
      color:#fff;
      background:rgba(216,161,93,.08);
    }
    .accordion-button::after{
      filter:invert(1) grayscale(1) brightness(1.6);
    }
    .accordion-body{
      color:var(--soft);
      padding:0 1.2rem 1.2rem;
    }

    .cta-band{
      margin-top:4rem;
      padding:0 0 2rem;
    }
    .cta-panel{
      border-radius:34px;
      padding:1.45rem;
      border:1px solid rgba(216,161,93,.2);
      background:
        radial-gradient(700px 280px at 0% 0%, rgba(216,161,93,.18), transparent 58%),
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
      box-shadow:var(--shadow);
    }
    .cta-panel h2{
      margin:0;
      font-size:clamp(1.6rem, 3vw, 2.3rem);
      line-height:1.15;
      font-weight:900;
      letter-spacing:-.025em;
    }
    .cta-panel p{
      margin:.8rem 0 0;
      color:var(--soft);
      max-width:46rem;
    }
    .cta-panel .form-inline{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      align-items:center;
      margin-top:1.1rem;
    }
    .cta-panel .form-control{
      min-height:3.55rem;
      border-radius:18px;
      background:rgba(10,8,12,.78);
      border:1px solid rgba(255,255,255,.1);
      color:var(--text);
      box-shadow:none;
      padding:0 1rem;
    }
    .cta-panel .form-control::placeholder{color:#8d8275}
    .cta-panel .form-control:focus{
      border-color:rgba(216,161,93,.35);
      background:rgba(10,8,12,.92);
    }
    .cta-panel .form-inline .btn-custom{
      min-height:3.55rem;
    }

    footer{
      padding:1rem 0 6rem;
      position:relative;
      z-index:1;
    }
    .footer-panel{
      border-radius:32px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      box-shadow:var(--shadow-soft);
      padding:1.35rem;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:.85rem;
      margin-bottom:1rem;
    }
    .footer-brand .brand-mark{width:2.8rem;height:2.8rem}
    .footer-brand strong{
      font-size:1.12rem;
      display:block;
    }
    .footer-brand span{
      color:var(--muted);
      font-size:.92rem;
    }
    .footer-title{
      color:#efe5d6;
      font-weight:800;
      margin-bottom:.7rem;
    }
    .footer-links{
      display:grid;
      gap:.55rem;
    }
    .footer-links a{
      color:var(--muted);
    }
    .footer-links a:hover{
      color:#fff;
      transform:translateX(2px);
    }
    .footer-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem 1rem;
      justify-content:space-between;
      align-items:center;
      margin-top:1.15rem;
      padding-top:1rem;
      border-top:1px solid rgba(255,255,255,.08);
      color:#958a7c;
      font-size:.92rem;
    }
    .footer-meta a{
      color:var(--brand-3);
      font-weight:700;
    }

    .mobile-cta-bar{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:1050;
      padding:.8rem;
      background:linear-gradient(180deg, rgba(15,13,18,0), rgba(15,13,18,.92) 35%, rgba(15,13,18,.98));
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      display:none;
    }
    .mobile-cta-inner{
      max-width:1240px;
      margin:0 auto;
      display:flex;
      gap:.75rem;
    }
    .mobile-cta-inner .btn-custom{
      flex:1 1 0;
      min-height:3.2rem;
      border-radius:16px;
      font-size:.95rem;
    }

    .quick-grid{
      display:grid;
      gap:1rem;
    }

    .divider-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
      margin:1.25rem 0;
    }

    @media (max-width: 1199.98px){
      .poster-card{min-height:560px}
      .update-side{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
    }
    @media (max-width: 991.98px){
      .site-header{top:0}
      .hero{padding-top:2.2rem}
      .hero-wrap{padding-top:1rem}
      .poster-card{min-height:auto}
      .poster-visual{aspect-ratio: 16 / 10}
      .ticket-card{
        position:relative;
        left:auto;
        bottom:auto;
        width:100%;
        margin-top:1rem;
      }
      .nav-shell .navbar-collapse{
        margin-top:.85rem;
        padding-top:.85rem;
        border-top:1px solid rgba(255,255,255,.08);
      }
      .navbar-nav{
        gap:.25rem;
      }
      .nav-link{
        width:100%;
      }
      .mobile-cta-bar{display:block}
      footer{padding-bottom:6.8rem}
    }
    @media (max-width: 767.98px){
      .hero-actions,
      .cta-panel .form-inline{
        flex-direction:column;
        align-items:stretch;
      }
      .hero-actions .btn-custom,
      .cta-panel .form-inline .btn-custom{
        width:100%;
      }
      .case-metrics{
        grid-template-columns:1fr;
      }
      .section{
        padding-top:3.2rem;
      }
      .hero h1{
        font-size:clamp(2rem, 11vw, 3.4rem);
      }
      .hero-lead,
      .section-head p,
      .cta-panel p{
        font-size:.98rem;
      }
      .section-head{
        margin-bottom:1.1rem;
      }
      .updates-grid,
      .updates-head{
        padding:1rem;
      }
      .feature-main,
      .feature-card,
      .scenario-card,
      .case-card,
      .price-card,
      .cta-panel{
        border-radius:24px;
      }
      .accordion-wrap,
      .footer-panel,
      .updates-wrap{
        border-radius:24px;
      }
    }
    @media (max-width: 575.98px){
      .navbar{
        padding:.85rem .85rem;
      }
      .nav-shell{
        border-radius:22px;
      }
      .hero-wrap{
        border-radius:26px;
      }
      .hero-search{
        padding:.85rem;
      }
      .hero-search .input-group{
        border-radius:16px;
      }
      .hero-search .form-control,
      .cta-panel .form-control{
        min-height:3.15rem;
      }
      .hero-search .btn,
      .cta-panel .form-inline .btn-custom{
        min-height:3.15rem;
      }
      .poster-card{
        padding:.9rem;
        border-radius:26px;
      }
      .poster-copy{
        padding:1rem;
      }
      .poster-copy h2{
        font-size:1.55rem;
      }
      .section-head h2{
        font-size:1.65rem;
      }
      .update-card h3{
        font-size:1rem;
      }
      .price{
        font-size:2.1rem;
      }
    }
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
      }
    }

/* roulang page: article */
:root{
      --bg:#0f0d12;
      --bg-2:#15121a;
      --bg-3:#1d1822;
      --surface:rgba(255,255,255,.05);
      --surface-2:rgba(255,255,255,.08);
      --surface-3:rgba(255,255,255,.12);
      --text:#f4ede5;
      --muted:#b5aa9b;
      --soft:#d4c3ad;
      --line:rgba(255,255,255,.1);
      --line-2:rgba(216,161,93,.28);
      --brand:#d8a15d;
      --brand-2:#b56a55;
      --brand-3:#ecd0a9;
      --success:#86c5a7;
      --danger:#d6776a;
      --shadow:0 20px 50px rgba(0,0,0,.28);
      --shadow-soft:0 12px 32px rgba(0,0,0,.18);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --space-1:.35rem;
      --space-2:.6rem;
      --space-3:.9rem;
      --space-4:1.25rem;
      --space-5:1.75rem;
      --space-6:2.5rem;
      --space-7:3.5rem;
      --space-8:5rem;
      --ease:cubic-bezier(.2,.7,.2,1);
    }
    *{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",sans-serif;
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 20% -10%, rgba(216,161,93,.16), transparent 60%),
        radial-gradient(900px 560px at 92% 8%, rgba(181,106,85,.12), transparent 60%),
        radial-gradient(780px 520px at 50% 110%, rgba(255,255,255,.04), transparent 60%),
        linear-gradient(180deg, #0b0910 0%, #0f0d12 42%, #0d0b10 100%);
      line-height:1.7;
      letter-spacing:.01em;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.03) 0, rgba(255,255,255,0) 24%),
        linear-gradient(0deg, rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
      background-size:auto, 100% 38px, 38px 100%;
      opacity:.35;
      mask-image:radial-gradient(circle at center, black 62%, transparent 100%);
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:color .22s var(--ease), transform .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease);
    }
    a:hover{color:var(--brand-3)}
    a:focus-visible,
    button:focus-visible,
    .btn:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible{
      outline:2px solid rgba(216,161,93,.55);
      outline-offset:3px;
      box-shadow:none !important;
    }
    img{max-width:100%;display:block}
    button,input,textarea,select{
      font:inherit;
    }
    ::selection{
      background:rgba(216,161,93,.28);
      color:#fff;
    }
    .container{
      max-width:1320px;
      padding-left:1rem;
      padding-right:1rem;
      position:relative;
      z-index:1;
    }
    .site-header{
      position:sticky;
      top:.7rem;
      z-index:1030;
      padding:.45rem 0 0;
      margin-bottom:-.1rem;
    }
    .nav-shell{
      margin:0 auto;
      border:1px solid rgba(255,255,255,.08);
      border-radius:24px;
      background:rgba(18,15,22,.72);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease);
    }
    .site-header.is-scrolled .nav-shell{
      background:rgba(16,13,19,.88);
      border-color:rgba(255,255,255,.12);
      box-shadow:0 18px 45px rgba(0,0,0,.32);
    }
    .navbar{
      padding:.9rem 1rem;
    }
    .navbar-brand{
      display:inline-flex;
      align-items:center;
      gap:.75rem;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--text) !important;
      white-space:nowrap;
    }
    .brand-mark{
      width:2.4rem;
      height:2.4rem;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(135deg, rgba(216,161,93,.18), rgba(181,106,85,.28)),
        linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
      border:1px solid rgba(216,161,93,.28);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
      position:relative;
      overflow:hidden;
      flex:0 0 auto;
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:-20%;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 48%);
      transform:rotate(18deg);
    }
    .brand-mark span{
      position:relative;
      z-index:1;
      font-size:.95rem;
      color:var(--brand-3);
      font-weight:900;
    }
    .navbar-nav{
      gap:.35rem;
    }
    .nav-link{
      color:var(--soft) !important;
      padding:.7rem .95rem !important;
      border-radius:999px;
      font-weight:600;
      position:relative;
      transition:background-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      color:var(--text) !important;
      background:rgba(255,255,255,.05);
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#fff !important;
      background:linear-gradient(135deg, rgba(216,161,93,.2), rgba(181,106,85,.22));
      border:1px solid rgba(216,161,93,.25);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }
    .nav-cta{
      padding:.72rem 1rem !important;
      background:linear-gradient(135deg, rgba(216,161,93,.25), rgba(181,106,85,.35));
      color:#fff !important;
      border:1px solid rgba(216,161,93,.25);
      box-shadow:0 10px 24px rgba(181,106,85,.12);
    }
    .nav-cta:hover{
      box-shadow:0 14px 30px rgba(181,106,85,.22);
    }
    .navbar-toggler{
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      background:rgba(255,255,255,.03);
      box-shadow:none !important;
      padding:.55rem .7rem;
    }
    .navbar-toggler-icon{
      width:1.3em;
      height:1.3em;
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28244,237,229,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .nav-shell .navbar-collapse{
      margin-top:.9rem;
    }
    .nav-shell .navbar-collapse.show,
    .nav-shell .navbar-collapse.collapsing{
      padding-top:.75rem;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .article-hero{
      padding:1.5rem 0 1rem;
    }
    .article-hero-shell{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      border:1px solid var(--line);
      background:
        linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.03)),
        linear-gradient(180deg, rgba(28,23,33,.92), rgba(18,15,22,.92));
      box-shadow:var(--shadow);
      padding:1.35rem;
    }
    .article-hero-shell::before,
    .article-hero-shell::after{
      content:"";
      position:absolute;
      border-radius:50%;
      pointer-events:none;
    }
    .article-hero-shell::before{
      width:22rem;
      height:22rem;
      right:-8rem;
      top:-10rem;
      background:radial-gradient(circle, rgba(216,161,93,.16), transparent 65%);
      filter:blur(5px);
    }
    .article-hero-shell::after{
      width:15rem;
      height:15rem;
      left:-5rem;
      bottom:-7rem;
      background:radial-gradient(circle, rgba(181,106,85,.12), transparent 70%);
      filter:blur(4px);
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.4rem .75rem;
      border-radius:999px;
      border:1px solid rgba(216,161,93,.25);
      background:rgba(216,161,93,.08);
      color:var(--brand-3);
      font-size:.86rem;
      letter-spacing:.04em;
      font-weight:700;
    }
    .breadcrumb-bar{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:.45rem;
      color:var(--muted);
      font-size:.92rem;
      margin-top:.95rem;
    }
    .breadcrumb-bar a{
      color:var(--soft);
    }
    .breadcrumb-bar a:hover{
      color:#fff;
    }
    .hero-title{
      font-size:clamp(2rem, 4vw, 4.1rem);
      line-height:1.08;
      margin:.95rem 0 1rem;
      font-weight:900;
      letter-spacing:-.02em;
      position:relative;
      z-index:1;
    }
    .hero-lead{
      color:var(--soft);
      max-width:46rem;
      font-size:1.04rem;
      margin:0;
      position:relative;
      z-index:1;
    }
    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin:1.35rem 0 0;
      position:relative;
      z-index:1;
    }
    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.55rem .9rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.04);
      color:var(--soft);
      font-size:.92rem;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .action-row{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      margin-top:1.4rem;
      position:relative;
      z-index:1;
    }
    .btn{
      border-radius:999px;
      padding:.82rem 1.2rem;
      font-weight:700;
      border:1px solid transparent;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
    }
    .btn:hover{
      transform:translateY(-1px);
    }
    .btn-brand{
      color:#fff;
      background:linear-gradient(135deg, rgba(216,161,93,.96), rgba(181,106,85,.95));
      border-color:rgba(216,161,93,.24);
      box-shadow:0 14px 30px rgba(181,106,85,.18);
    }
    .btn-brand:hover{
      color:#fff;
      box-shadow:0 16px 34px rgba(181,106,85,.25);
    }
    .btn-outline-brand{
      color:var(--text);
      border-color:rgba(216,161,93,.28);
      background:rgba(255,255,255,.02);
    }
    .btn-outline-brand:hover{
      color:#fff;
      border-color:rgba(216,161,93,.42);
      background:rgba(216,161,93,.1);
      box-shadow:0 10px 22px rgba(0,0,0,.16);
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:1.15rem;
      position:relative;
      z-index:1;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      padding:.48rem .75rem;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      color:var(--soft);
      font-size:.88rem;
      transition:transform .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease);
    }
    .chip:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.06);
      border-color:rgba(216,161,93,.2);
    }
    .poster-card{
      position:relative;
      min-height:100%;
      border-radius:var(--radius-lg);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.09);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        linear-gradient(160deg, rgba(43,34,48,.92), rgba(20,17,26,.95));
      box-shadow:var(--shadow-soft);
      padding:1.15rem;
    }
    .poster-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(500px 240px at 70% 16%, rgba(216,161,93,.2), transparent 56%),
        radial-gradient(360px 180px at 18% 82%, rgba(181,106,85,.16), transparent 58%);
      pointer-events:none;
    }
    .poster-card::after{
      content:"";
      position:absolute;
      inset:1rem;
      border-radius:calc(var(--radius-lg) - 8px);
      border:1px dashed rgba(255,255,255,.08);
      pointer-events:none;
    }
    .poster-frame{
      position:relative;
      z-index:1;
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:1rem;
      min-height:320px;
    }
    .poster-kicker{
      display:inline-flex;
      align-items:center;
      padding:.4rem .7rem;
      border-radius:999px;
      background:rgba(216,161,93,.09);
      border:1px solid rgba(216,161,93,.18);
      color:var(--brand-3);
      font-size:.84rem;
      letter-spacing:.04em;
      font-weight:700;
    }
    .poster-frame h2{
      margin:.75rem 0 .6rem;
      font-size:clamp(1.4rem, 2.6vw, 2.1rem);
      font-weight:800;
      letter-spacing:-.02em;
    }
    .poster-frame p{
      margin:0;
      color:var(--soft);
      max-width:24rem;
    }
    .ticket-strip{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.05rem;
      border-radius:18px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .ticket-strip small{
      display:block;
      color:var(--muted);
      margin-bottom:.15rem;
    }
    .ticket-strip strong{
      display:block;
      font-size:1.02rem;
      color:#fff;
    }
    .poster-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.55rem .75rem;
      min-width:4.2rem;
      border-radius:999px;
      background:linear-gradient(135deg, rgba(216,161,93,.2), rgba(181,106,85,.28));
      border:1px solid rgba(216,161,93,.24);
      color:#fff;
      font-weight:700;
    }
    .poster-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem 1rem;
      color:var(--muted);
      font-size:.92rem;
      margin-top:.85rem;
    }
    .section-pad{
      padding:2.2rem 0;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1.15rem;
    }
    .section-title{
      font-size:clamp(1.45rem, 2.2vw, 2.15rem);
      line-height:1.18;
      margin:0;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .section-note{
      margin:0;
      color:var(--muted);
      max-width:44rem;
      font-size:.98rem;
    }
    .panel-card{
      position:relative;
      border-radius:var(--radius-xl);
      border:1px solid var(--line);
      background:
        linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
        linear-gradient(180deg, rgba(25,20,29,.9), rgba(18,15,22,.94));
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
    }
    .panel-card:hover{
      transform:translateY(-2px);
      border-color:rgba(216,161,93,.16);
      box-shadow:0 18px 36px rgba(0,0,0,.22);
    }
    .panel-body{
      padding:1.25rem 1.25rem;
    }
    .feature-card{
      height:100%;
      padding:1.2rem;
      border-radius:var(--radius-lg);
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
        rgba(255,255,255,.025);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
      transition:transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
      position:relative;
      overflow:hidden;
    }
    .feature-card::before{
      content:"";
      position:absolute;
      inset:auto auto -6rem -6rem;
      width:11rem;
      height:11rem;
      border-radius:50%;
      background:radial-gradient(circle, rgba(216,161,93,.12), transparent 65%);
      pointer-events:none;
    }
    .feature-card:hover{
      transform:translateY(-3px);
      border-color:rgba(216,161,93,.18);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
        rgba(255,255,255,.03);
    }
    .feature-index{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:2.1rem;
      height:2.1rem;
      padding:0 .55rem;
      border-radius:999px;
      background:rgba(216,161,93,.1);
      border:1px solid rgba(216,161,93,.2);
      color:var(--brand-3);
      font-size:.88rem;
      font-weight:800;
      letter-spacing:.03em;
      margin-bottom:1rem;
    }
    .feature-title{
      font-size:1.08rem;
      margin:0 0 .55rem;
      font-weight:800;
      letter-spacing:-.01em;
    }
    .feature-text{
      margin:0;
      color:var(--soft);
      line-height:1.8;
      min-height:3.6rem;
    }
    .feature-foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-top:1rem;
      color:var(--muted);
      font-size:.88rem;
    }
    .tag-inline{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.35rem .65rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      color:var(--muted);
      background:rgba(255,255,255,.03);
      font-size:.83rem;
    }
    .article-panel{
      padding:0;
    }
    .article-topbar{
      padding:1.1rem 1.25rem;
      border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.02);
    }
    .article-mini-meta{
      margin-top:.35rem;
      color:var(--muted);
      font-size:.92rem;
    }
    .article-content-wrap{
      padding:1.3rem 1.25rem;
    }
    .article-content{
      color:var(--text);
      font-size:1.03rem;
      line-height:1.92;
      word-break:break-word;
    }
    .article-content > *:first-child{margin-top:0}
    .article-content > *:last-child{margin-bottom:0}
    .article-content h2{
      margin:1.9rem 0 .9rem;
      font-size:1.55rem;
      line-height:1.3;
      font-weight:800;
      letter-spacing:-.02em;
      color:#fff;
    }
    .article-content h3{
      margin:1.55rem 0 .7rem;
      font-size:1.2rem;
      line-height:1.35;
      font-weight:800;
      color:#fff;
    }
    .article-content p{
      margin:0 0 1.05rem;
      color:var(--soft);
    }
    .article-content ul,
    .article-content ol{
      padding-left:1.2rem;
      margin:0 0 1.1rem;
      color:var(--soft);
    }
    .article-content li{
      margin:.45rem 0;
    }
    .article-content a{
      color:var(--brand-3);
      text-decoration:underline;
      text-decoration-thickness:1px;
      text-underline-offset:2px;
    }
    .article-content a:hover{
      color:#fff;
    }
    .article-content blockquote{
      margin:1.2rem 0;
      padding:1rem 1.1rem;
      border-left:4px solid var(--brand);
      background:rgba(216,161,93,.08);
      border-radius:0 18px 18px 0;
      color:#f0e5d8;
    }
    .article-content img{
      margin:1rem 0 1.25rem;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 12px 26px rgba(0,0,0,.18);
    }
    .article-content table{
      width:100%;
      margin:1rem 0 1.3rem;
      border-collapse:collapse;
      overflow:hidden;
      border-radius:18px;
      display:block;
      overflow-x:auto;
      white-space:nowrap;
    }
    .article-content th,
    .article-content td{
      border:1px solid rgba(255,255,255,.08);
      padding:.75rem .85rem;
      color:var(--soft);
      background:rgba(255,255,255,.02);
    }
    .article-content th{
      color:#fff;
      background:rgba(255,255,255,.06);
      font-weight:700;
    }
    .article-content pre{
      margin:1rem 0 1.25rem;
      padding:1rem 1.1rem;
      border-radius:18px;
      background:#0b0910;
      color:#f2e8dc;
      border:1px solid rgba(255,255,255,.08);
      overflow:auto;
    }
    .article-content code{
      padding:.18rem .42rem;
      border-radius:8px;
      background:rgba(255,255,255,.06);
      color:#f5dbc0;
    }
    .article-content pre code{
      padding:0;
      background:transparent;
      color:inherit;
    }
    .article-content hr{
      margin:1.4rem 0;
      border:0;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .article-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      padding:1.15rem 1.25rem 1.25rem;
      border-top:1px solid var(--line);
      background:rgba(255,255,255,.02);
    }
    .sidebar-stack{
      display:grid;
      gap:1rem;
      position:sticky;
      top:6rem;
    }
    .info-list{
      display:grid;
      gap:.2rem;
      margin-top:1rem;
    }
    .info-item{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      padding:.82rem 0;
      border-bottom:1px dashed rgba(255,255,255,.08);
      color:var(--muted);
      font-size:.95rem;
    }
    .info-item:last-child{
      border-bottom:none;
      padding-bottom:0;
    }
    .info-item strong{
      color:var(--text);
      font-weight:700;
      text-align:right;
    }
    .info-quick{
      display:grid;
      gap:.7rem;
      margin-top:1rem;
    }
    .quick-link{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      padding:.9rem 1rem;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--soft);
    }
    .quick-link:hover{
      background:rgba(255,255,255,.05);
      color:#fff;
      border-color:rgba(216,161,93,.18);
      transform:translateY(-1px);
    }
    .quick-link span:last-child{
      color:var(--brand-3);
    }
    .update-list{
      display:grid;
      gap:.85rem;
    }
    .update-card{
      display:flex;
      gap:1rem;
      padding:1rem;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      transition:transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
    }
    .update-card:hover{
      transform:translateY(-2px);
      border-color:rgba(216,161,93,.18);
      background:rgba(255,255,255,.05);
    }
    .update-time{
      min-width:74px;
      padding:.55rem .6rem;
      border-radius:14px;
      background:rgba(216,161,93,.1);
      border:1px solid rgba(216,161,93,.18);
      color:var(--brand-3);
      text-align:center;
      font-size:.82rem;
      line-height:1.45;
      flex:0 0 auto;
    }
    .update-time strong{
      display:block;
      font-size:1rem;
      color:#fff;
    }
    .update-content{
      min-width:0;
      flex:1;
    }
    .update-content h3{
      font-size:1rem;
      font-weight:800;
      margin:0 0 .35rem;
      color:#fff;
      line-height:1.45;
    }
    .update-content p{
      margin:0 0 .55rem;
      color:var(--soft);
      font-size:.94rem;
      line-height:1.72;
    }
    .update-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      align-items:center;
      color:var(--muted);
      font-size:.85rem;
    }
    .update-link{
      margin-left:auto;
      color:var(--brand-3);
      font-weight:700;
      white-space:nowrap;
    }
    .scene-card{
      height:100%;
      border-radius:var(--radius-lg);
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
        rgba(255,255,255,.025);
      padding:1.2rem;
      transition:transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .scene-card:hover{
      transform:translateY(-2px);
      border-color:rgba(216,161,93,.18);
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028)),
        rgba(255,255,255,.03);
    }
    .scene-index{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:2rem;
      height:2rem;
      border-radius:999px;
      background:rgba(181,106,85,.12);
      border:1px solid rgba(181,106,85,.18);
      color:#f5d7c8;
      font-weight:800;
      font-size:.86rem;
      margin-bottom:1rem;
    }
    .scene-card h3{
      margin:0 0 .55rem;
      font-size:1.08rem;
      font-weight:800;
      color:#fff;
    }
    .scene-card p{
      margin:0 0 .95rem;
      color:var(--soft);
      line-height:1.82;
    }
    .scene-card .scene-foot{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      color:var(--muted);
      font-size:.88rem;
    }
    .browse-card{
      height:100%;
    }
    .browse-card .panel-body{
      display:flex;
      flex-direction:column;
      height:100%;
      gap:.8rem;
    }
    .browse-card h3{
      margin:0;
      font-size:1.15rem;
      font-weight:800;
      color:#fff;
    }
    .browse-card p{
      margin:0;
      color:var(--soft);
      line-height:1.8;
      flex:1;
    }
    .browse-price{
      display:flex;
      align-items:flex-end;
      gap:.45rem;
      margin-top:.1rem;
    }
    .browse-price strong{
      font-size:2rem;
      line-height:1;
      color:#fff;
      letter-spacing:-.03em;
    }
    .browse-price span{
      color:var(--muted);
      font-size:.92rem;
      padding-bottom:.25rem;
    }
    .browse-list{
      display:grid;
      gap:.6rem;
      margin:0;
      padding:0;
      list-style:none;
    }
    .browse-list li{
      display:flex;
      align-items:flex-start;
      gap:.55rem;
      color:var(--soft);
    }
    .browse-list li::before{
      content:"";
      width:.55rem;
      height:.55rem;
      margin-top:.55rem;
      border-radius:50%;
      background:linear-gradient(135deg, var(--brand), var(--brand-2));
      flex:0 0 auto;
      box-shadow:0 0 0 4px rgba(216,161,93,.08);
    }
    .price-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.35rem .65rem;
      border-radius:999px;
      background:rgba(216,161,93,.1);
      border:1px solid rgba(216,161,93,.18);
      color:var(--brand-3);
      font-size:.84rem;
      font-weight:700;
      align-self:flex-start;
    }
    .faq-wrap .accordion-item{
      background:transparent;
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px !important;
      overflow:hidden;
      margin-bottom:.9rem;
      background:rgba(255,255,255,.03);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .faq-wrap .accordion-button{
      background:transparent;
      color:var(--text);
      font-weight:700;
      padding:1rem 1.1rem;
      box-shadow:none;
    }
    .faq-wrap .accordion-button:not(.collapsed){
      background:rgba(255,255,255,.05);
      color:#fff;
    }
    .faq-wrap .accordion-button::after{
      filter:invert(1) brightness(1.25);
    }
    .faq-wrap .accordion-body{
      color:var(--soft);
      line-height:1.85;
      padding:0 1.1rem 1rem;
    }
    .cta-banner{
      position:relative;
      overflow:hidden;
      border-radius:var(--radius-xl);
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(135deg, rgba(216,161,93,.13), rgba(181,106,85,.08)),
        linear-gradient(180deg, rgba(24,20,28,.96), rgba(17,14,21,.96));
      box-shadow:var(--shadow);
      padding:1.35rem;
    }
    .cta-banner::before{
      content:"";
      position:absolute;
      inset:auto -8rem -6rem auto;
      width:18rem;
      height:18rem;
      border-radius:50%;
      background:radial-gradient(circle, rgba(216,161,93,.18), transparent 70%);
      pointer-events:none;
    }
    .cta-banner h2{
      margin:0 0 .6rem;
      font-size:clamp(1.45rem, 2.3vw, 2rem);
      font-weight:800;
      letter-spacing:-.02em;
    }
    .cta-banner p{
      margin:0;
      color:var(--soft);
      max-width:44rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.8rem;
      margin-top:1.15rem;
    }
    .empty-state{
      padding:2.2rem 1.6rem 2rem;
      text-align:center;
    }
    .empty-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-bottom:1rem;
      padding:.45rem .75rem;
      border-radius:999px;
      background:rgba(216,161,93,.1);
      border:1px solid rgba(216,161,93,.18);
      color:var(--brand-3);
      font-weight:700;
      font-size:.88rem;
    }
    .empty-state p{
      margin:0 auto 1.2rem;
      color:var(--soft);
      max-width:34rem;
      line-height:1.85;
    }
    footer{
      padding:1rem 0 2rem;
    }
    .footer-panel{
      background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
        linear-gradient(180deg, rgba(24,20,28,.95), rgba(17,14,21,.97));
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-soft);
      padding:1.4rem;
      overflow:hidden;
    }
    .footer-brand{
      display:flex;
      align-items:flex-start;
      gap:.9rem;
    }
    .footer-brand strong{
      display:block;
      font-size:1.08rem;
      color:#fff;
      margin-bottom:.2rem;
    }
    .footer-brand span{
      color:var(--muted);
      font-size:.92rem;
    }
    .footer-title{
      font-weight:800;
      margin-bottom:.9rem;
      color:#fff;
      letter-spacing:-.01em;
    }
    .footer-links{
      display:grid;
      gap:.65rem;
    }
    .footer-links a,
    .footer-links span{
      color:var(--muted);
    }
    .footer-links a:hover{
      color:#fff;
    }
    .footer-meta{
      display:flex;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      margin-top:1.2rem;
      padding-top:1rem;
      border-top:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      font-size:.95rem;
    }
    .sticky-lg-top{
      position:sticky;
      z-index:1;
    }
    .btn-link-soft{
      color:var(--brand-3);
      padding:0;
      background:transparent;
      border:none;
      text-decoration:none;
      font-weight:700;
    }
    .btn-link-soft:hover{
      color:#fff;
    }
    @media (min-width: 992px){
      .nav-shell .navbar-collapse{
        margin-top:0;
      }
    }
    @media (max-width: 991.98px){
      .site-header{
        top:.55rem;
      }
      .nav-shell{
        border-radius:22px;
      }
      .hero-title{
        font-size:2.25rem;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .article-hero-shell{
        padding:1rem;
      }
      .poster-frame{
        min-height:280px;
      }
      .sidebar-stack{
        position:static;
      }
    }
    @media (max-width: 767.98px){
      .container{
        padding-left:.85rem;
        padding-right:.85rem;
      }
      .navbar{
        padding:.8rem .8rem;
      }
      .hero-title{
        font-size:2rem;
      }
      .hero-lead{
        font-size:.98rem;
      }
      .action-row,
      .meta-row,
      .chip-row,
      .article-actions,
      .cta-actions{
        gap:.65rem;
      }
      .btn-brand,
      .btn-outline-brand{
        width:100%;
        justify-content:center;
      }
      .poster-card{
        min-height:auto;
      }
      .poster-frame{
        min-height:auto;
      }
      .footer-meta{
        flex-direction:column;
      }
      .update-card{
        flex-direction:column;
      }
      .update-time{
        min-width:100%;
        text-align:left;
      }
      .update-link{
        margin-left:0;
      }
    }
    @media (max-width: 575.98px){
      .hero-title{
        font-size:1.92rem;
      }
      .section-pad{
        padding:1.8rem 0;
      }
      .panel-card,
      .footer-panel,
      .article-hero-shell{
        border-radius:22px;
      }
      .feature-text,
      .scene-card p,
      .browse-card p,
      .cta-banner p,
      .article-content{
        font-size:.98rem;
      }
    }

/* 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}