/* roulang page: index */
:root{
      --bg:#0b0a0f;
      --bg2:#100f16;
      --panel:#14131c;
      --panel2:#1a1724;
      --line:rgba(255,255,255,.08);
      --line2:rgba(255,255,255,.13);
      --text:#f5f1f7;
      --muted:#b7aebf;
      --brand:#c94663;
      --brand2:#f1c57a;
      --shadow:0 24px 80px rgba(0,0,0,.34);
      --shadow2:0 18px 40px rgba(201,70,99,.14);
      --radius:24px;
    }
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 20% 10%, rgba(201,70,99,.22), transparent 28%),
        radial-gradient(circle at 80% 18%, rgba(241,197,122,.14), transparent 24%),
        radial-gradient(circle at 50% 75%, rgba(110,82,150,.12), transparent 28%),
        linear-gradient(180deg, #0b0a0f 0%, #0d0c12 35%, #0b0a0f 100%);
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: radial-gradient(circle at center, black 0%, black 55%, transparent 100%);
      opacity:.28;
      z-index:-1;
    }
    *{box-sizing:border-box}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container-page{width:min(1180px, calc(100% - 32px)); margin:0 auto}
    .glass{
      background: linear-gradient(180deg, rgba(26,23,36,.92), rgba(18,17,26,.9));
      border:1px solid var(--line);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
    }
    .glass-soft{
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid var(--line);
      box-shadow: 0 12px 36px rgba(0,0,0,.18);
      backdrop-filter: blur(12px);
    }
    .nav-pill{
      transition: all .25s ease;
    }
    .nav-pill:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.16);
    }
    .nav-pill.active{
      background: linear-gradient(135deg, rgba(201,70,99,.25), rgba(241,197,122,.18));
      border-color: rgba(241,197,122,.28);
      color:#fff;
      box-shadow: 0 10px 26px rgba(201,70,99,.16);
    }
    .hero-title{
      letter-spacing:-0.03em;
      text-wrap: balance;
    }
    .section-title{
      letter-spacing:-0.025em;
      text-wrap: balance;
    }
    .subtle{
      color:var(--muted);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      padding:.9rem 1.35rem;
      font-weight:700;
      transition: all .22s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:focus-visible,
    .field:focus-visible,
    summary:focus-visible{
      outline:2px solid rgba(241,197,122,.72);
      outline-offset:2px;
    }
    .btn-primary{
      background: linear-gradient(135deg, var(--brand), #a93e5a 55%, #7f2f42);
      color:#fff;
      box-shadow: var(--shadow2);
    }
    .btn-primary:hover{box-shadow:0 18px 34px rgba(201,70,99,.26)}
    .btn-secondary{
      background: rgba(255,255,255,.03);
      border-color: rgba(255,255,255,.11);
      color: #f7f3f8;
    }
    .btn-secondary:hover{
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.18);
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.36rem .72rem;
      border-radius:999px;
      font-size:.82rem;
      font-weight:700;
      background: rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.09);
      color:#f2ecf5;
    }
    .chip.gold{
      background: rgba(241,197,122,.12);
      border-color: rgba(241,197,122,.22);
      color:#ffe4b0;
    }
    .card{
      background: linear-gradient(180deg, rgba(24,23,34,.98), rgba(17,16,24,.94));
      border:1px solid var(--line);
      box-shadow: 0 14px 40px rgba(0,0,0,.22);
      border-radius: 24px;
      transition: all .24s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(241,197,122,.18);
      box-shadow: 0 20px 46px rgba(0,0,0,.28);
    }
    .ring-accent{
      position:relative;
    }
    .ring-accent::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      padding:1px;
      background: linear-gradient(135deg, rgba(241,197,122,.2), rgba(201,70,99,.24), rgba(255,255,255,.02));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
    }
    .wave{
      display:flex;
      align-items:flex-end;
      gap:4px;
      height:48px;
    }
    .wave span{
      width:6px;
      border-radius:999px;
      background: linear-gradient(180deg, #ffd996, #c94663);
      animation: pulse 1.8s ease-in-out infinite;
      opacity:.92;
    }
    .wave span:nth-child(2){animation-delay:.1s;height:28px}
    .wave span:nth-child(3){animation-delay:.2s;height:42px}
    .wave span:nth-child(4){animation-delay:.3s;height:18px}
    .wave span:nth-child(5){animation-delay:.4s;height:34px}
    .wave span:nth-child(6){animation-delay:.5s;height:50px}
    .wave span:nth-child(7){animation-delay:.6s;height:24px}
    @keyframes pulse{
      0%,100%{transform:scaleY(.8);opacity:.65}
      50%{transform:scaleY(1.12);opacity:1}
    }
    .fake-cover{
      background:
        radial-gradient(circle at 30% 25%, rgba(241,197,122,.3), transparent 24%),
        radial-gradient(circle at 80% 25%, rgba(201,70,99,.28), transparent 26%),
        linear-gradient(135deg, #201621 0%, #181422 42%, #0e0d14 100%);
    }
    .list-link{
      display:flex;
      align-items:flex-start;
      gap:.75rem;
      padding:.85rem 0;
      border-bottom:1px solid rgba(255,255,255,.07);
      transition: all .2s ease;
    }
    .list-link:hover{
      transform: translateX(3px);
      color:#fff;
    }
    .list-link:last-child{border-bottom:none}
    .dot{
      width:.55rem;height:.55rem;border-radius:999px;margin-top:.55rem;
      background: linear-gradient(135deg, var(--brand2), var(--brand));
      box-shadow: 0 0 0 4px rgba(241,197,122,.08);
      flex:none;
    }
    .metric{
      position:relative;
      overflow:hidden;
    }
    .metric::before{
      content:"";
      position:absolute;
      inset:auto auto -18px -18px;
      width:110px;height:110px;border-radius:50%;
      background: radial-gradient(circle, rgba(241,197,122,.16), transparent 68%);
      pointer-events:none;
    }
    details{
      border-radius:20px;
      border:1px solid rgba(255,255,255,.09);
      background: rgba(255,255,255,.03);
      overflow:hidden;
    }
    details + details{margin-top:14px}
    summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.1rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      font-weight:700;
    }
    summary::-webkit-details-marker{display:none}
    details[open] summary{
      background: rgba(255,255,255,.03);
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    details .answer{
      padding:0 1.1rem 1rem 1.1rem;
      color:var(--muted);
    }
    .form-field{
      width:100%;
      background: rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.1);
      color: #f5f1f7;
      border-radius: 16px;
      padding: .95rem 1rem;
      transition: all .2s ease;
    }
    .form-field::placeholder{color:#8f8495}
    .form-field:focus{
      border-color: rgba(241,197,122,.35);
      box-shadow: 0 0 0 4px rgba(241,197,122,.08);
      outline:none;
    }
    .sticky-bar{
      position:sticky;
      top:90px;
    }
    .section-pad{padding: 28px 0}
    .hero-grid{
      display:grid;
      gap: 28px;
      grid-template-columns: 1.18fr .82fr;
    }
    @media (max-width: 1024px){
      .hero-grid{grid-template-columns:1fr}
      .sticky-bar{position:relative; top:auto}
    }
    @media (max-width: 768px){
      .container-page{width:min(100% - 22px, 1180px)}
      .hero-grid{gap:20px}
      .section-pad{padding: 22px 0}
    }
    @media (max-width: 520px){
      .btn{width:100%}
      summary{padding: .95rem .95rem}
      .card{border-radius:20px}
    }

/* roulang page: category1 */
:root{
      --bg:#120c10;
      --bg-soft:#1b1117;
      --panel:#23151d;
      --panel-2:#2b1822;
      --text:#fff8ef;
      --muted:rgba(255,248,239,.66);
      --faint:rgba(255,248,239,.46);
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(241,215,167,.28);
      --brand:#8d1f3d;
      --brand-2:#b83b5e;
      --gold:#f1d7a7;
      --cream:#fff3dc;
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
      --shadow:0 24px 70px rgba(0,0,0,.34);
      --shadow-soft:0 16px 42px rgba(0,0,0,.24);
      --container:1180px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      line-height:1.65;
      background:
        radial-gradient(circle at 16% 4%, rgba(184,59,94,.34), transparent 34%),
        radial-gradient(circle at 84% 12%, rgba(241,215,167,.18), transparent 30%),
        linear-gradient(180deg,#10090d 0%,#160d12 42%,#100b0d 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.18;
      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:34px 34px;
      mask-image:linear-gradient(to bottom, black, transparent 82%);
      z-index:0;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(241,215,167,.32);color:#fff}
    .container-page{
      width:min(calc(100% - 32px),var(--container));
      margin-inline:auto;
      position:relative;
      z-index:1;
    }
    .glass{
      background:linear-gradient(135deg,rgba(35,21,29,.78),rgba(18,12,16,.62));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:0 18px 50px rgba(0,0,0,.28);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
    .nav-pill{
      transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
      white-space:nowrap;
    }
    .nav-pill:hover{
      background:rgba(255,255,255,.08);
      border-color:rgba(241,215,167,.22);
      color:#fff;
      transform:translateY(-1px);
    }
    .nav-pill.active{
      background:linear-gradient(135deg,rgba(141,31,61,.92),rgba(184,59,94,.72));
      border-color:rgba(241,215,167,.26);
      color:#fff;
      box-shadow:0 10px 28px rgba(141,31,61,.30);
    }
    .section{padding:74px 0}
    .section-tight{padding:48px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--gold);
      background:rgba(255,255,255,.045);
      font-size:13px;
      font-weight:800;
      letter-spacing:.06em;
    }
    .eyebrow:before{
      content:"";
      width:7px;height:7px;border-radius:999px;
      background:var(--gold);
      box-shadow:0 0 0 6px rgba(241,215,167,.10);
    }
    .title-xl{
      font-size:clamp(38px,6vw,72px);
      line-height:1.04;
      letter-spacing:-.06em;
      font-weight:950;
    }
    .title-lg{
      font-size:clamp(28px,4vw,46px);
      line-height:1.16;
      letter-spacing:-.035em;
      font-weight:950;
    }
    .lead{
      color:var(--muted);
      font-size:clamp(16px,1.8vw,19px);
      line-height:1.9;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:48px;
      padding:12px 18px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:850;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
    }
    .btn-primary{
      color:#1a0e13;
      background:linear-gradient(135deg,var(--gold),#fff1c7);
      box-shadow:0 16px 38px rgba(241,215,167,.18);
    }
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(241,215,167,.26)}
    .btn-secondary{
      color:#fff;
      background:rgba(255,255,255,.07);
      border-color:rgba(255,255,255,.12);
    }
    .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(241,215,167,.35);background:rgba(255,255,255,.11)}
    .card{
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
      box-shadow:var(--shadow-soft);
      transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease;
      overflow:hidden;
    }
    .card:hover{
      transform:translateY(-4px);
      border-color:rgba(241,215,167,.30);
      box-shadow:0 28px 70px rgba(0,0,0,.34);
      background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045));
    }
    .badge,.chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      color:rgba(255,248,239,.78);
      padding:7px 11px;
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }
    .chip{
      font-size:13px;
      padding:9px 13px;
      color:rgba(255,248,239,.74);
      transition:all .2s ease;
    }
    .chip:hover,.chip.active{
      color:#1b0e13;
      background:var(--gold);
      border-color:var(--gold);
    }
    .hero-shell{
      padding-top:122px;
      position:relative;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.35fr .65fr;
      grid-template-rows:auto auto;
      gap:18px;
      align-items:stretch;
    }
    .hero-main{
      min-height:440px;
      border-radius:34px;
      padding:42px;
      background:
        radial-gradient(circle at 15% 20%,rgba(241,215,167,.18),transparent 28%),
        linear-gradient(135deg,rgba(51,28,40,.92),rgba(21,12,17,.88));
      border:1px solid rgba(255,255,255,.10);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero-main:after{
      content:"";
      position:absolute;
      right:-110px;
      bottom:-150px;
      width:430px;
      height:430px;
      border-radius:50%;
      border:1px solid rgba(241,215,167,.18);
      background:repeating-radial-gradient(circle,rgba(241,215,167,.15) 0 2px,transparent 2px 18px);
      opacity:.55;
    }
    .hero-side,.hero-cta{
      border-radius:30px;
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
      box-shadow:var(--shadow-soft);
      padding:24px;
      overflow:hidden;
    }
    .hero-cta{
      grid-column:1 / -1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      background:linear-gradient(90deg,rgba(141,31,61,.36),rgba(241,215,167,.09));
    }
    .wave{
      display:flex;
      gap:6px;
      align-items:center;
      height:76px;
    }
    .wave span{
      width:7px;
      border-radius:999px;
      background:linear-gradient(180deg,var(--gold),rgba(184,59,94,.65));
      opacity:.78;
    }
    .wave span:nth-child(1){height:22px}.wave span:nth-child(2){height:42px}.wave span:nth-child(3){height:64px}.wave span:nth-child(4){height:34px}.wave span:nth-child(5){height:55px}.wave span:nth-child(6){height:28px}.wave span:nth-child(7){height:70px}.wave span:nth-child(8){height:38px}.wave span:nth-child(9){height:50px}.wave span:nth-child(10){height:24px}
    .filter-bar{
      position:sticky;
      top:88px;
      z-index:20;
      padding:12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(18,12,16,.76);
      backdrop-filter:blur(16px);
      box-shadow:0 16px 42px rgba(0,0,0,.24);
      overflow-x:auto;
      scrollbar-width:none;
    }
    .filter-bar::-webkit-scrollbar{display:none}
    .select-soft{
      appearance:none;
      border:1px solid rgba(255,255,255,.12);
      border-radius:999px;
      background:rgba(255,255,255,.06);
      color:#fff;
      padding:9px 36px 9px 14px;
      outline:none;
    }
    .select-soft:focus,input:focus,textarea:focus{
      border-color:rgba(241,215,167,.62);
      box-shadow:0 0 0 4px rgba(241,215,167,.12);
    }
    .content-card .thumb{
      height:188px;
      border-radius:20px;
      background:
        radial-gradient(circle at 28% 26%,rgba(241,215,167,.28),transparent 22%),
        linear-gradient(135deg,rgba(141,31,61,.62),rgba(37,20,29,.92));
      position:relative;
      overflow:hidden;
    }
    .content-card .thumb:before{
      content:"";
      position:absolute;
      inset:18px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.13);
      background:linear-gradient(135deg,rgba(255,255,255,.10),transparent);
    }
    .content-card .thumb:after{
      content:"";
      position:absolute;
      left:22px;
      right:22px;
      bottom:24px;
      height:42px;
      background:repeating-linear-gradient(90deg,rgba(241,215,167,.78) 0 5px,transparent 5px 14px);
      mask-image:linear-gradient(to top,black,transparent 92%);
      opacity:.58;
      border-radius:16px;
    }
    .metric{
      border-radius:24px;
      padding:22px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.055);
    }
    .metric strong{
      display:block;
      font-size:34px;
      line-height:1;
      color:var(--gold);
      letter-spacing:-.04em;
      font-weight:950;
    }
    .timeline{
      position:relative;
    }
    .timeline:before{
      content:"";
      position:absolute;
      left:22px;
      top:10px;
      bottom:10px;
      width:1px;
      background:linear-gradient(var(--gold),rgba(255,255,255,.08));
    }
    .step{
      position:relative;
      padding-left:62px;
    }
    .step:before{
      content:attr(data-step);
      position:absolute;
      left:0;
      top:0;
      width:44px;height:44px;
      border-radius:999px;
      display:grid;
      place-items:center;
      color:#1b0e13;
      background:var(--gold);
      font-weight:950;
      box-shadow:0 0 0 8px rgba(241,215,167,.10);
    }
    .faq-item{
      border:1px solid var(--line);
      border-radius:20px;
      background:rgba(255,255,255,.045);
      overflow:hidden;
    }
    .faq-q{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:20px 22px;
      color:#fff;
      text-align:left;
      font-weight:900;
    }
    .faq-a{
      max-height:0;
      overflow:hidden;
      transition:max-height .28s ease;
    }
    .faq-a p{
      padding:0 22px 20px;
      color:var(--muted);
      font-size:15px;
      line-height:1.85;
    }
    .faq-item.open .faq-a{max-height:180px}
    .faq-item .mark{transition:transform .22s ease;color:var(--gold)}
    .faq-item.open .mark{transform:rotate(45deg)}
    .form-field{
      width:100%;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.055);
      color:#fff;
      border-radius:18px;
      padding:14px 16px;
      outline:none;
      transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .form-field::placeholder{color:rgba(255,248,239,.38)}
    .form-field:focus{background:rgba(255,255,255,.075)}
    .divider-wave{
      height:12px;
      opacity:.45;
      background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(241,215,167,.60) 10px 16px,transparent 16px 26px);
      border-radius:999px;
    }
    @media (max-width:1024px){
      .hero-grid{grid-template-columns:1fr}
      .hero-main{min-height:auto}
      .hero-cta{grid-column:auto;align-items:flex-start;flex-direction:column}
      .filter-bar{top:82px;border-radius:24px}
    }
    @media (max-width:768px){
      .container-page{width:min(calc(100% - 24px),var(--container))}
      .hero-shell{padding-top:116px}
      .hero-main{padding:28px;border-radius:28px}
      .hero-side,.hero-cta{padding:20px;border-radius:24px}
      .section{padding:54px 0}
      .section-tight{padding:36px 0}
      header .glass{border-radius:26px}
      header nav{align-items:flex-start}
      .title-xl{letter-spacing:-.045em}
      .filter-bar{position:relative;top:auto}
    }
    @media (max-width:520px){
      .btn{width:100%}
      .hero-main{padding:24px}
      .content-card .thumb{height:160px}
      .filter-bar{margin-inline:-2px}
      .nav-pill{padding:8px 10px;font-size:12px}
    }