/* roulang page: index */
:root{
      --bg:#050505;
      --bg2:#0c0b0a;
      --panel:rgba(15,15,15,.72);
      --panel-strong:rgba(19,19,19,.9);
      --line:rgba(232,191,114,.18);
      --line-2:rgba(255,255,255,.08);
      --text:#f5f1e8;
      --muted:#b5aea4;
      --soft:#8d8477;
      --gold:#d9b56f;
      --gold-2:#f0cf90;
      --gold-3:#a98234;
      --shadow:0 18px 70px rgba(0,0,0,.45);
      --radius:20px;
    }
    html{scroll-behavior:smooth}
    body{
      color:var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(217,181,111,.12), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(255,209,128,.08), transparent 22%),
        radial-gradient(circle at 50% 88%, rgba(255,255,255,.04), transparent 28%),
        linear-gradient(180deg, #080808 0%, #090909 28%, #050505 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.14;
      mix-blend-mode:soft-light;
      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: 28px 28px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.25), rgba(0,0,0,.7));
    }
    ::selection{background:rgba(217,181,111,.3);color:#fff}
    .container-site{width:min(1180px, calc(100% - 2rem));margin-inline:auto}
    .glass-nav{
      background: linear-gradient(180deg, rgba(10,10,10,.54), rgba(10,10,10,.22));
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(18px);
      box-shadow: 0 10px 40px rgba(0,0,0,.2);
    }
    .scrolled .glass-nav{
      background: rgba(8,8,8,.94);
      border-color: rgba(232,191,114,.16);
      box-shadow: 0 12px 40px rgba(0,0,0,.4);
    }
    .logo-mark{
      background: linear-gradient(135deg, rgba(217,181,111,.22), rgba(255,255,255,.04));
      border:1px solid rgba(232,191,114,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }
    .section-chip{
      border:1px solid rgba(232,191,114,.18);
      background: rgba(255,255,255,.03);
      color: #f4e8cd;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .glass-card{
      background: linear-gradient(180deg, rgba(20,20,20,.82), rgba(12,12,12,.72));
      border: 1px solid rgba(232,191,114,.16);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }
    .glass-card-soft{
      background: linear-gradient(180deg, rgba(23,23,23,.76), rgba(11,11,11,.7));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 18px 50px rgba(0,0,0,.3);
    }
    .gold-btn{
      background: linear-gradient(135deg, var(--gold-2), var(--gold));
      color: #221707;
      box-shadow: 0 14px 28px rgba(217,181,111,.24);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .gold-btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 18px 34px rgba(217,181,111,.3);
      filter: brightness(1.03);
    }
    .ghost-btn{
      background: rgba(255,255,255,.03);
      border:1px solid rgba(232,191,114,.18);
      color: var(--text);
      transition: transform .18s ease, border-color .18s ease, background .18s ease;
    }
    .ghost-btn:hover{
      transform: translateY(-1px);
      border-color: rgba(232,191,114,.34);
      background: rgba(255,255,255,.05);
    }
    .nav-link{
      position:relative;
      color:#ede7db;
      transition: color .18s ease;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-8px;
      width:100%;
      height:2px;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(232,191,114,0), rgba(232,191,114,.95), rgba(232,191,114,0));
      transform: scaleX(0);
      transform-origin:center;
      transition: transform .2s ease;
    }
    .nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
    .nav-link:hover,.nav-link[aria-current="page"]{color:#fff}
    .hero-bg{
      background:
        linear-gradient(90deg, rgba(5,5,5,.86) 0%, rgba(5,5,5,.52) 48%, rgba(5,5,5,.78) 100%),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
    }
    .hero-panel{
      background:
        linear-gradient(180deg, rgba(20,20,20,.84), rgba(10,10,10,.66));
      border:1px solid rgba(232,191,114,.18);
      box-shadow: 0 28px 70px rgba(0,0,0,.45);
      backdrop-filter: blur(16px);
    }
    .ring-line{
      position:relative;
    }
    .ring-line::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      padding:1px;
      background: linear-gradient(135deg, rgba(232,191,114,.38), rgba(255,255,255,.04), rgba(232,191,114,.16));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
    }
    .gold-tag{
      background: rgba(217,181,111,.12);
      color:#f7deb0;
      border:1px solid rgba(232,191,114,.2);
    }
    .metric-card{
      background: linear-gradient(180deg, rgba(26,26,26,.9), rgba(12,12,12,.72));
      border:1px solid rgba(255,255,255,.08);
    }
    .soft-text{color:var(--muted)}
    .line-clamp-2, .line-clamp-3{
      display:-webkit-box;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .line-clamp-2{-webkit-line-clamp:2}
    .line-clamp-3{-webkit-line-clamp:3}
    .scrollbar-hide::-webkit-scrollbar{display:none}
    .scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
    details.faq{
      background: linear-gradient(180deg, rgba(22,22,22,.82), rgba(12,12,12,.7));
      border:1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      overflow:hidden;
    }
    details.faq[open]{
      border-color: rgba(232,191,114,.24);
      box-shadow: 0 12px 40px rgba(0,0,0,.25);
    }
    details.faq summary{
      list-style:none;
      cursor:pointer;
    }
    details.faq summary::-webkit-details-marker{display:none}
    .faq-arrow{
      transition: transform .18s ease;
    }
    details[open] .faq-arrow{transform: rotate(180deg)}
    .footer-link{
      color:var(--muted);
      transition: color .18s ease;
    }
    .footer-link:hover{color:#fff}
    .img-frame{
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
      border:1px solid rgba(232,191,114,.14);
      overflow:hidden;
    }
    .bar-track{
      background: rgba(255,255,255,.06);
      height: 10px;
      border-radius:999px;
      overflow:hidden;
    }
    .bar-fill{
      height:100%;
      border-radius:999px;
      background: linear-gradient(90deg, rgba(232,191,114,.5), rgba(255,214,135,.98));
      box-shadow: 0 8px 18px rgba(217,181,111,.22);
    }
    .mobile-drawer{
      background: rgba(7,7,7,.98);
      border-top:1px solid rgba(232,191,114,.14);
    }
    @media (max-width: 1024px){
      .hero-bg{background-position:center top}
    }
    @media (max-width: 768px){
      .container-site{width:min(100% - 1rem, 1180px)}
    }

/* roulang page: article */
:root {
      --bg: #050505;
      --bg-2: #0c0a08;
      --panel: rgba(18, 17, 15, .78);
      --panel-strong: rgba(26, 23, 18, .92);
      --line: rgba(239, 205, 140, .18);
      --line-soft: rgba(255, 255, 255, .08);
      --gold: #d9b76f;
      --gold-2: #f2d99b;
      --amber: #a8732a;
      --text: #f8f3e8;
      --muted: #b9afa1;
      --soft: #8e8579;
      --danger: #e9b872;
      --radius: 18px;
      --radius-sm: 12px;
      --shadow: 0 24px 70px rgba(0, 0, 0, .38);
      --shadow-gold: 0 18px 55px rgba(216, 174, 91, .16);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 12% 8%, rgba(183, 126, 45, .18), transparent 34%),
        radial-gradient(circle at 84% 10%, rgba(214, 194, 150, .08), transparent 30%),
        linear-gradient(135deg, #030303 0%, #0d0a07 44%, #080706 100%);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
      line-height: 1.7;
      letter-spacing: 0;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: .26;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, #000, transparent 78%);
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    :focus-visible {
      outline: 2px solid rgba(242, 217, 155, .72);
      outline-offset: 4px;
    }

    .container-site {
      width: min(1180px, calc(100% - 32px));
      margin-inline: auto;
    }

    .soft-text {
      color: var(--muted);
    }

    .gold-text {
      color: var(--gold-2);
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      padding: 16px 0;
      transition: padding .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .site-header.is-scrolled {
      padding: 10px 0;
      background: rgba(5, 5, 5, .82);
      border-bottom: 1px solid var(--line-soft);
      box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
      backdrop-filter: blur(18px);
    }

    .nav-shell {
      border: 1px solid rgba(239, 205, 140, .14);
      background: rgba(8, 8, 7, .55);
      box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
      backdrop-filter: blur(18px);
    }

    .logo-mark {
      border: 1px solid rgba(242, 217, 155, .32);
      background:
        linear-gradient(145deg, rgba(242, 217, 155, .28), rgba(122, 78, 25, .18)),
        rgba(255,255,255,.03);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px rgba(189, 137, 56, .16);
    }

    .nav-link {
      position: relative;
      color: #d8d0c4;
      padding: 8px 0;
      white-space: nowrap;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      border-radius: 999px;
      transform: scaleX(0);
      transform-origin: center;
      background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
      transition: transform .22s ease;
    }

    .nav-link:hover,
    .nav-link.active {
      color: #fff2cf;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      transform: scaleX(1);
    }

    .nav-cta,
    .btn-primary {
      color: #171009;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,.2);
      background: linear-gradient(135deg, #f6dfaa 0%, #c99845 55%, #8e5f22 100%);
      box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.35);
    }

    .nav-cta:hover,
    .btn-primary:hover {
      transform: translateY(-2px);
      filter: brightness(1.06);
      box-shadow: 0 24px 70px rgba(216, 174, 91, .22);
    }

    .btn-ghost {
      border: 1px solid rgba(242, 217, 155, .22);
      background: rgba(255,255,255,.045);
      color: #f7ead0;
    }

    .btn-ghost:hover {
      transform: translateY(-2px);
      border-color: rgba(242, 217, 155, .45);
      background: rgba(242, 217, 155, .08);
      box-shadow: 0 18px 46px rgba(0,0,0,.28);
    }

    .mobile-panel {
      display: none;
      border: 1px solid rgba(239, 205, 140, .14);
      background: rgba(8, 8, 7, .92);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
    }

    .mobile-panel.open {
      display: block;
    }

    .article-hero {
      position: relative;
      padding: 148px 0 64px;
      overflow: hidden;
      border-bottom: 1px solid var(--line-soft);
    }

    .article-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(90deg, rgba(5,5,5,.95) 0%, rgba(5,5,5,.68) 48%, rgba(5,5,5,.9) 100%),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      opacity: .9;
    }

    .article-hero::after {
      content: "";
      position: absolute;
      left: 6%;
      right: 6%;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(242,217,155,.45), transparent);
    }

    .crumb {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #d8c28d;
      border: 1px solid rgba(242,217,155,.22);
      background: rgba(0,0,0,.28);
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 13px;
    }

    .hero-card {
      border: 1px solid rgba(242,217,155,.18);
      background: linear-gradient(180deg, rgba(21,19,16,.86), rgba(8,8,7,.72));
      box-shadow: var(--shadow);
      border-radius: 26px;
      overflow: hidden;
    }

    .vertical-screen {
      position: relative;
      min-height: 420px;
      border-radius: 28px;
      border: 1px solid rgba(242,217,155,.18);
      background:
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.7)),
        url('/assets/images/coverpic/cover-4.webp') center/cover no-repeat;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 80px rgba(0,0,0,.32);
      overflow: hidden;
    }

    .vertical-screen::before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 22px;
      pointer-events: none;
    }

    .screen-chip {
      border: 1px solid rgba(242,217,155,.22);
      background: rgba(5,5,5,.58);
      backdrop-filter: blur(12px);
      color: #f9e9c0;
    }

    .meta-badge,
    .tag,
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid rgba(242,217,155,.2);
      background: rgba(242,217,155,.06);
      color: #ead6aa;
      font-size: 12px;
      line-height: 1;
      padding: 8px 10px;
      white-space: nowrap;
    }

    .status-badge {
      border-color: rgba(133, 245, 198, .18);
      background: rgba(69, 194, 141, .08);
      color: #b7efd3;
    }

    .main-wrap {
      padding: 56px 0 78px;
      background:
        radial-gradient(circle at 80% 16%, rgba(242,217,155,.08), transparent 28%),
        linear-gradient(180deg, rgba(5,5,5,.96), rgba(10,9,8,.98));
    }

    .article-layout {
      display: grid;
      grid-template-columns: minmax(0, 720px) minmax(260px, 1fr);
      gap: 34px;
      align-items: start;
    }

    .glass-card {
      border: 1px solid rgba(242,217,155,.15);
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .article-body {
      padding: 30px;
    }

    .article-body h2,
    .article-body h3,
    .article-body h4 {
      color: #fff7e5;
      font-weight: 850;
      line-height: 1.35;
      margin: 2.1em 0 .8em;
    }

    .article-body h2 {
      font-size: clamp(24px, 3vw, 32px);
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(242,217,155,.14);
    }

    .article-body h3 {
      font-size: clamp(20px, 2.4vw, 25px);
    }

    .article-body h4 {
      font-size: 18px;
    }

    .article-body p {
      margin: 1.1em 0;
      color: #ded5c8;
      font-size: 16px;
      line-height: 1.95;
    }

    .article-body a {
      color: #f2d99b;
      border-bottom: 1px solid rgba(242,217,155,.28);
    }

    .article-body a:hover {
      color: #fff2cf;
      border-color: rgba(242,217,155,.65);
    }

    .article-body ul,
    .article-body ol {
      margin: 1.1em 0;
      padding-left: 1.4em;
      color: #ded5c8;
    }

    .article-body li {
      margin: .58em 0;
      line-height: 1.9;
    }

    .article-body blockquote {
      margin: 1.6em 0;
      padding: 18px 20px;
      border-left: 3px solid var(--gold);
      border-radius: 0 14px 14px 0;
      background: rgba(242,217,155,.06);
      color: #f4e6c9;
    }

    .article-body table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      border-radius: 14px;
      margin: 1.5em 0;
      border: 1px solid rgba(242,217,155,.14);
      font-size: 14px;
    }

    .article-body th,
    .article-body td {
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      color: #ded5c8;
      text-align: left;
    }

    .article-body th {
      background: rgba(242,217,155,.08);
      color: #fff2cf;
      font-weight: 700;
    }

    .article-body code {
      border: 1px solid rgba(242,217,155,.14);
      background: rgba(0,0,0,.3);
      color: #f5dfaa;
      border-radius: 7px;
      padding: 2px 6px;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: .92em;
    }

    .article-body pre {
      overflow: auto;
      border: 1px solid rgba(242,217,155,.14);
      border-radius: 16px;
      background: rgba(0,0,0,.48);
      padding: 18px;
      margin: 1.6em 0;
    }

    .article-body pre code {
      border: 0;
      background: transparent;
      padding: 0;
    }

    .sidebar {
      position: sticky;
      top: 104px;
      display: grid;
      gap: 18px;
    }

    .side-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
      color: #d7cfc2;
      font-size: 14px;
    }

    .side-link:hover {
      color: #fff0c8;
      transform: translateX(3px);
    }

    .download-panel {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(35,27,16,.95), rgba(12,11,10,.88)),
        url('/assets/images/coverpic/cover-7.webp') center/cover no-repeat;
    }

    .download-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.76));
      pointer-events: none;
    }

    .download-panel > * {
      position: relative;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .info-box {
      border: 1px solid rgba(242,217,155,.14);
      background: rgba(255,255,255,.035);
      border-radius: 14px;
      padding: 14px;
    }

    .related-section {
      margin-top: 34px;
    }

    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .related-card {
      border: 1px solid rgba(242,217,155,.14);
      background: rgba(255,255,255,.035);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .related-card:hover {
      transform: translateY(-4px);
      border-color: rgba(242,217,155,.36);
      box-shadow: var(--shadow-gold);
    }

    .related-thumb {
      height: 126px;
      background: center/cover no-repeat;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .faq-item {
      border: 1px solid rgba(242,217,155,.13);
      background: rgba(255,255,255,.035);
      border-radius: 16px;
      padding: 18px;
    }

    .footer-link {
      color: #bdb3a5;
    }

    .footer-link:hover {
      color: #f2d99b;
      transform: translateX(2px);
    }

    @media (max-width: 1024px) {
      .article-layout {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .download-panel {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 768px) {
      .site-header {
        padding: 10px 0;
      }

      .article-hero {
        padding: 118px 0 44px;
      }

      .vertical-screen {
        min-height: 330px;
      }

      .article-body {
        padding: 22px;
      }

      .sidebar,
      .related-grid,
      .info-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 520px) {
      .container-site {
        width: min(100% - 24px, 1180px);
      }

      .article-hero h1 {
        font-size: 34px;
      }

      .crumb {
        max-width: 100%;
        white-space: normal;
      }

      .article-body {
        padding: 18px;
      }

      .article-body p {
        font-size: 15px;
      }
    }

/* roulang page: category2 */
:root{
      --bg:#050505;
      --bg2:#0a0908;
      --panel:rgba(11,11,11,.74);
      --panel-strong:rgba(10,10,10,.92);
      --line:rgba(255,255,255,.09);
      --line-strong:rgba(255,227,175,.16);
      --text:#f5f0e7;
      --muted:#b5ab9a;
      --muted-2:#8f8474;
      --gold:#d6b06a;
      --gold-strong:#f0d29a;
      --gold-deep:#9f7935;
      --shadow:0 18px 50px rgba(0,0,0,.45);
      --radius:18px;
      --radius-sm:12px;
      --radius-lg:26px;
    }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      letter-spacing: 0;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(214,176,106,.12), transparent 30%),
        radial-gradient(circle at 85% 8%, rgba(240,210,154,.08), transparent 18%),
        linear-gradient(180deg, #070707 0%, #050505 45%, #080808 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }
    body::before{
      content:"";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .08;
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 34px 34px;
      mix-blend-mode: soft-light;
    }
    a, button, input, select, textarea { letter-spacing: 0; }
    img { display: block; max-width: 100%; height: auto; }
    .container-site {
      width: min(1200px, calc(100% - 2rem));
      margin: 0 auto;
    }
    .soft-text { color: var(--muted); }
    .soft-text-2 { color: var(--muted-2); }
    .glass {
      background: linear-gradient(180deg, rgba(18,18,18,.76), rgba(10,10,10,.58));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 18px 44px rgba(0,0,0,.28);
      backdrop-filter: blur(18px);
    }
    .glass-strong {
      background: linear-gradient(180deg, rgba(14,14,14,.92), rgba(8,8,8,.88));
      border: 1px solid var(--line-strong);
      box-shadow: var(--shadow);
      backdrop-filter: blur(20px);
    }
    .hairline {
      border: 1px solid rgba(255,255,255,.08);
    }
    .gold-border {
      border: 1px solid rgba(255,214,143,.18);
    }
    .section-title {
      font-size: clamp(1.3rem, 1.1rem + .9vw, 2rem);
      line-height: 1.15;
      font-weight: 800;
      color: #fff;
    }
    .section-kicker {
      color: var(--gold-strong);
      letter-spacing: .18em;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 700;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: .42rem;
      border-radius: 999px;
      padding: .42rem .78rem;
      font-size: 12px;
      line-height: 1;
      border: 1px solid rgba(255,255,255,.1);
      color: #f6ecdb;
      background: rgba(255,255,255,.03);
    }
    .chip-gold {
      border-color: rgba(255,214,143,.24);
      background: rgba(214,176,106,.1);
      color: #ffe6b7;
    }
    .nav-link {
      position: relative;
      color: rgba(255,255,255,.82);
      transition: color .2s ease, transform .2s ease, opacity .2s ease;
      padding: .4rem 0;
    }
    .nav-link:hover,
    .nav-link[aria-current="page"] {
      color: #fff;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-.2rem;
      width:100%;
      height:1.5px;
      transform: scaleX(0);
      transform-origin: left;
      background: linear-gradient(90deg, transparent, rgba(240,210,154,.95), transparent);
      transition: transform .22s ease;
    }
    .nav-link:hover::after,
    .nav-link[aria-current="page"]::after{
      transform: scaleX(1);
    }
    .nav-pill {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      border-radius: 999px;
      padding: .68rem 1rem;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      color: #fff;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .nav-pill:hover {
      transform: translateY(-1px);
      border-color: rgba(240,210,154,.22);
      background: rgba(255,255,255,.06);
      box-shadow: 0 10px 24px rgba(0,0,0,.2);
    }
    .btn-gold {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      border-radius: 12px;
      background: linear-gradient(180deg, #f5d59a 0%, #d4a95e 55%, #aa7d2f 100%);
      color: #130f08;
      font-weight: 800;
      padding: .92rem 1.15rem;
      box-shadow: 0 14px 30px rgba(170,125,47,.24);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
      border: 1px solid rgba(255,226,173,.26);
    }
    .btn-gold:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 36px rgba(170,125,47,.3);
      filter: brightness(1.03);
    }
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      border-radius: 12px;
      padding: .92rem 1.15rem;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
      color: #fff;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .btn-ghost:hover {
      transform: translateY(-1px);
      border-color: rgba(240,210,154,.26);
      background: rgba(255,255,255,.06);
    }
    .btn-soft {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .45rem;
      border-radius: 12px;
      padding: .82rem 1rem;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.03);
      color: #efe7d7;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .btn-soft:hover {
      transform: translateY(-1px);
      border-color: rgba(240,210,154,.18);
      background: rgba(255,255,255,.05);
    }
    .card {
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(17,17,17,.86), rgba(8,8,8,.78));
      box-shadow: 0 14px 28px rgba(0,0,0,.24);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .card:hover {
      transform: translateY(-2px);
      border-color: rgba(240,210,154,.22);
      box-shadow: 0 18px 40px rgba(0,0,0,.3);
    }
    .card-media {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #111;
    }
    .card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.01);
      transition: transform .5s ease;
    }
    .card:hover .card-media img {
      transform: scale(1.05);
    }
    .card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.66));
    }
    .meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      align-items: center;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      border-radius: 999px;
      padding: .32rem .6rem;
      font-size: 11px;
      line-height: 1;
      border: 1px solid rgba(255,255,255,.1);
      color: #f5e7cd;
      background: rgba(255,255,255,.03);
    }
    .badge-hot { background: rgba(214,176,106,.12); border-color: rgba(214,176,106,.24); color: #ffe6b7; }
    .badge-ok { background: rgba(95,186,111,.12); border-color: rgba(95,186,111,.2); color: #daf3de; }
    .badge-soft { background: rgba(255,255,255,.04); color: #ddd4c5; }
    .shadow-line {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .focus-ring:focus-visible {
      outline: 2px solid rgba(240,210,154,.72);
      outline-offset: 2px;
    }
    .sticky-surface {
      position: sticky;
      top: 1rem;
    }
    .section-band {
      padding: 4rem 0;
    }
    .wide-image {
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      background: #111;
    }
    .wide-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .faq-item {
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
    }
    .scroll-row {
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scrollbar-width: thin;
      scrollbar-color: rgba(214,176,106,.45) rgba(255,255,255,.05);
    }
    .scroll-row::-webkit-scrollbar { height: 10px; }
    .scroll-row::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
    .scroll-row::-webkit-scrollbar-thumb {
      background: linear-gradient(90deg, rgba(214,176,106,.35), rgba(240,210,154,.6));
      border-radius: 999px;
    }
    .scroll-snap {
      scroll-snap-align: start;
    }
    .header-shell {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .header-shell.is-scrolled .header-inner {
      background: rgba(7,7,7,.94);
      border-color: rgba(255,255,255,.1);
      box-shadow: 0 18px 44px rgba(0,0,0,.35);
    }
    .header-inner {
      transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .mobile-drawer {
      position: fixed;
      inset: 0;
      z-index: 60;
      background: rgba(3,3,3,.72);
      backdrop-filter: blur(14px);
      display: none;
    }
    .mobile-drawer.open {
      display: block;
    }
    .mobile-panel {
      width: min(92vw, 360px);
      height: 100%;
      margin-left: auto;
      background: linear-gradient(180deg, rgba(11,11,11,.98), rgba(5,5,5,.98));
      border-left: 1px solid rgba(255,255,255,.08);
      padding: 1rem;
    }
    .footer-link {
      color: rgba(255,255,255,.72);
      transition: color .2s ease, transform .2s ease;
    }
    .footer-link:hover {
      color: #fff;
      transform: translateX(2px);
    }
    .metric {
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      padding: .95rem 1rem;
    }
    .metric strong {
      display: block;
      color: #fff;
      font-size: 1.02rem;
      line-height: 1.2;
    }
    .metric span {
      display: block;
      margin-top: .25rem;
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.45;
    }
    @media (max-width: 1024px) {
      .section-band { padding: 3.25rem 0; }
    }
    @media (max-width: 768px) {
      .container-site { width: min(100% - 1.1rem, 1200px); }
      .section-band { padding: 2.6rem 0; }
    }

/* roulang page: category1 */
:root{
      --bg:#070707;
      --bg-soft:#0c0c0c;
      --panel:rgba(13,13,13,.78);
      --panel-strong:rgba(9,9,9,.94);
      --line:rgba(255,255,255,.08);
      --line-strong:rgba(241,213,154,.22);
      --text:#f6f1e8;
      --soft:#b9af9f;
      --muted:#8e8578;
      --gold:#d7b26c;
      --gold-2:#f4ddad;
      --gold-3:#b9822f;
      --shadow:0 20px 50px rgba(0,0,0,.42);
      --radius:24px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
      background:
        radial-gradient(circle at 15% 10%, rgba(229,186,101,.09), transparent 18%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,.05), transparent 16%),
        radial-gradient(circle at 85% 78%, rgba(176,119,42,.09), transparent 22%),
        linear-gradient(180deg, #090909 0%, #060606 45%, #050505 100%);
      color:var(--text);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.03), transparent 18%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.03), transparent 22%);
      opacity:.65;
      z-index:-1;
    }
    img{display:block; max-width:100%}
    a{color:inherit; text-decoration:none}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(241,213,154,.25); color:#fff}
    .container-site{
      width:min(1200px, calc(100% - 1.5rem));
      margin-inline:auto;
    }
    .page-sheen{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:
        radial-gradient(circle at 20% 20%, rgba(236,195,114,.08), transparent 22%),
        radial-gradient(circle at 80% 12%, rgba(255,255,255,.04), transparent 18%),
        radial-gradient(circle at 82% 82%, rgba(200,145,55,.08), transparent 24%);
    }
    .site-header{
      transition:padding .25s ease, transform .25s ease;
    }
    .nav-shell{
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      background:rgba(8,8,8,.42);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .site-header.scrolled .nav-shell{
      background:rgba(5,5,5,.96);
      border-color:rgba(255,255,255,.06);
      box-shadow:0 18px 42px rgba(0,0,0,.55);
    }
    .logo-mark{
      background:linear-gradient(145deg, rgba(244,221,173,.24), rgba(159,107,31,.76));
      border:1px solid rgba(243,219,166,.24);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    .nav-link{
      position:relative;
      color:#d9d0c2;
      transition:color .2s ease, transform .2s ease;
    }
    .nav-link:hover{color:#fff7e7}
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-.45rem;
      width:100%;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--gold), var(--gold-2));
      box-shadow:0 0 10px rgba(244,221,173,.34);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .24s ease;
    }
    .nav-link:hover::after,
    .nav-link[aria-current="page"]::after{
      transform:scaleX(1);
    }
    .nav-link[aria-current="page"]{
      color:#fff2d8;
    }
    .gold-btn{
      background:linear-gradient(135deg, #f2d695 0%, #c99237 58%, #9f6a18 100%);
      color:#1a1308;
      border:1px solid rgba(255,238,198,.5);
      box-shadow:0 12px 30px rgba(211,164,77,.24);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    .gold-btn:hover{
      transform:translateY(-1px);
      box-shadow:0 18px 42px rgba(211,164,77,.34);
      filter:saturate(1.04);
    }
    .ghost-btn{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.12);
      color:#f4ead7;
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .ghost-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(241,213,154,.3);
      background:rgba(255,255,255,.06);
    }
    .glass-card{
      background:linear-gradient(180deg, rgba(16,16,16,.72), rgba(8,8,8,.92));
      border:1px solid var(--line);
      box-shadow:0 18px 48px rgba(0,0,0,.36);
    }
    .metal-card{
      background:linear-gradient(180deg, rgba(18,18,18,.75), rgba(8,8,8,.95));
      border:1px solid rgba(255,255,255,.09);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.02), 0 18px 44px rgba(0,0,0,.3);
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .metal-card:hover{
      transform:translateY(-2px);
      border-color:rgba(241,213,154,.24);
      box-shadow:0 22px 52px rgba(0,0,0,.42);
    }
    .section-tag{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.48rem .78rem;
      border-radius:999px;
      border:1px solid rgba(241,213,154,.18);
      background:rgba(241,213,154,.06);
      color:#f4dfb4;
      font-size:.77rem;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .badge-gold{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.45rem .75rem;
      border-radius:999px;
      border:1px solid rgba(241,213,154,.18);
      background:rgba(219,176,108,.1);
      color:#f6e8ca;
      font-size:.8rem;
    }
    .soft-text{color:var(--soft)}
    .muted-text{color:var(--muted)}
    .card-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.42rem .78rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.03);
      color:#ddd4c6;
      font-size:.8rem;
      transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    }
    .card-chip:hover{
      transform:translateY(-1px);
      border-color:rgba(241,213,154,.3);
      color:#fff6e6;
    }
    .card-chip.active{
      background:rgba(225,187,115,.15);
      border-color:rgba(241,213,154,.36);
      color:#fff4dc;
      box-shadow:0 0 0 1px rgba(241,213,154,.08) inset;
    }
    .resource-thumb{
      width:100%;
      aspect-ratio:16/10;
      object-fit:cover;
    }
    .input-metal{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.1);
      color:#f6ebda;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .input-metal::placeholder{color:#8f877b}
    .input-metal:focus{
      border-color:rgba(241,213,154,.36);
      box-shadow:0 0 0 3px rgba(241,213,154,.08);
      background:rgba(255,255,255,.05);
    }
    .faq-item{
      border-radius:22px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      overflow:hidden;
      transition:border-color .2s ease, background .2s ease;
    }
    .faq-item:hover{border-color:rgba(241,213,154,.2)}
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1.1rem 1.2rem;
      font-weight:600;
      color:#fff5e4;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item[open]{
      border-color:rgba(241,213,154,.24);
      background:rgba(255,255,255,.045);
    }
    .faq-body{
      padding:0 1.2rem 1.2rem;
      color:#bdb2a2;
      line-height:1.9;
    }
    .faq-arrow{
      transition:transform .22s ease, color .22s ease;
      color:#f4dfb4;
      flex:0 0 auto;
    }
    .faq-item[open] .faq-arrow{
      transform:rotate(180deg);
    }
    .footer-link{
      color:#b9af9f;
      transition:color .2s ease, transform .2s ease;
    }
    .footer-link:hover{
      color:#f6e4c0;
      transform:translateX(2px);
    }
    .mobile-menu{
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      background:rgba(6,6,6,.96);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 20px 50px rgba(0,0,0,.42);
    }
    .scrollbar-soft::-webkit-scrollbar{height:10px}
    .scrollbar-soft::-webkit-scrollbar-thumb{
      background:rgba(241,213,154,.24);
      border-radius:999px;
    }
    .scrollbar-soft::-webkit-scrollbar-track{
      background:rgba(255,255,255,.03);
    }
    .section-panel{
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
      box-shadow:0 18px 40px rgba(0,0,0,.2);
      border-radius:28px;
    }
    .mono{
      font-variant-numeric:tabular-nums;
      letter-spacing:.02em;
    }
    @media (max-width: 1024px){
      .nav-shell{border-radius:22px}
    }
    @media (max-width: 768px){
      .container-site{width:min(100% - 1rem, 1200px)}
    }

/* roulang page: category3 */
:root {
      --bg: #050505;
      --bg-2: #0b0a08;
      --panel: rgba(18, 17, 15, .78);
      --panel-2: rgba(27, 24, 19, .72);
      --text: #f7f0e4;
      --muted: #b5aa99;
      --soft: #8d8376;
      --gold: #e8c070;
      --gold-2: #f4d99b;
      --amber: #b9822c;
      --silver: #c8c4bc;
      --line: rgba(255, 255, 255, .1);
      --gold-line: rgba(232, 192, 112, .32);
      --shadow: 0 24px 70px rgba(0, 0, 0, .42);
      --glow: 0 0 32px rgba(232, 192, 112, .18);
      --radius: 16px;
      --radius-sm: 12px;
      --container: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 10%, rgba(232, 192, 112, .13), transparent 28%),
        radial-gradient(circle at 84% 18%, rgba(122, 87, 38, .18), transparent 30%),
        linear-gradient(145deg, #030303 0%, #090806 42%, #11100d 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
      line-height: 1.7;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .22;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: linear-gradient(to bottom, black, transparent 78%);
      z-index: -1;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    input:focus,
    button:focus,
    a:focus {
      outline: 2px solid rgba(232, 192, 112, .72);
      outline-offset: 3px;
    }

    .container-site {
      width: min(var(--container), calc(100% - 32px));
      margin-inline: auto;
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      padding: 14px 0;
      transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, padding .25s ease;
    }

    .site-header.is-scrolled {
      padding: 9px 0;
      background: rgba(5, 5, 5, .88);
      border-bottom: 1px solid rgba(232, 192, 112, .14);
      box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
      backdrop-filter: blur(18px);
    }

    .nav-shell {
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(9, 9, 8, .52);
      backdrop-filter: blur(18px);
      box-shadow: 0 16px 50px rgba(0, 0, 0, .28);
    }

    .logo-mark {
      border: 1px solid rgba(232, 192, 112, .45);
      background:
        linear-gradient(135deg, rgba(232, 192, 112, .22), rgba(255, 255, 255, .05)),
        rgba(10, 9, 7, .86);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 28px rgba(232, 192, 112, .14);
    }

    .nav-link {
      position: relative;
      color: #cfc5b6;
      transition: color .2s ease;
      white-space: nowrap;
    }

    .nav-link:hover,
    .nav-link.is-active {
      color: #fff5df;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -11px;
      height: 2px;
      transform: scaleX(0);
      transform-origin: center;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      transition: transform .22s ease;
    }

    .nav-link:hover::after,
    .nav-link.is-active::after {
      transform: scaleX(1);
    }

    .search-pill {
      border: 1px solid rgba(255,255,255,.11);
      background: rgba(255,255,255,.05);
      color: #d8d0c5;
    }

    .search-pill input {
      width: 122px;
      border: 0;
      outline: 0;
      background: transparent;
      color: #f7f0e4;
    }

    .search-pill input::placeholder {
      color: #8f8678;
    }

    .btn-primary,
    .btn-ghost,
    .btn-soft {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 44px;
      border-radius: var(--radius-sm);
      padding: 0 18px;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
      white-space: nowrap;
    }

    .btn-primary {
      color: #1b1205;
      border: 1px solid rgba(255,255,255,.26);
      background: linear-gradient(135deg, #f5dd9e 0%, #dfae54 56%, #a66f23 100%);
      box-shadow: 0 14px 36px rgba(232, 192, 112, .22), inset 0 1px 0 rgba(255,255,255,.46);
    }

    .btn-ghost {
      color: #f2e7d4;
      border: 1px solid rgba(232, 192, 112, .28);
      background: rgba(255,255,255,.055);
    }

    .btn-soft {
      color: #f6e7c4;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.075);
    }

    .btn-primary:hover,
    .btn-ghost:hover,
    .btn-soft:hover {
      transform: translateY(-2px);
      border-color: rgba(232, 192, 112, .58);
      box-shadow: var(--glow), 0 18px 42px rgba(0,0,0,.28);
    }

    .hero {
      position: relative;
      padding: 132px 0 68px;
      overflow: hidden;
      background-image:
        linear-gradient(90deg, rgba(5,5,5,.92), rgba(5,5,5,.68) 48%, rgba(5,5,5,.88)),
        url('/assets/images/backpic/back-3.webp');
      background-size: cover;
      background-position: center;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 160px;
      background: linear-gradient(to bottom, transparent, var(--bg));
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.03fr) minmax(340px, .72fr);
      gap: 36px;
      align-items: stretch;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      border: 1px solid rgba(232, 192, 112, .34);
      border-radius: 999px;
      padding: 7px 12px;
      color: #f5d997;
      background: rgba(232, 192, 112, .08);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .hero-title {
      margin-top: 18px;
      max-width: 820px;
      font-size: clamp(34px, 5vw, 66px);
      line-height: 1.05;
      font-weight: 950;
      letter-spacing: 0;
    }

    .hero-title span {
      color: #f5d997;
      text-shadow: 0 0 32px rgba(232, 192, 112, .2);
    }

    .hero-desc {
      margin-top: 20px;
      max-width: 720px;
      color: #d5cab8;
      font-size: 17px;
      line-height: 1.9;
    }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .badge,
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.06);
      color: #e7dbc8;
      padding: 7px 11px;
      font-size: 12px;
      font-weight: 750;
    }

    .badge.gold {
      border-color: rgba(232, 192, 112, .38);
      color: #f2d792;
      background: rgba(232, 192, 112, .1);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .anchor-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 30px;
      max-width: 760px;
    }

    .anchor-strip a {
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 14px;
      padding: 12px;
      background: rgba(255,255,255,.045);
      color: #d9cfbf;
      font-size: 13px;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .anchor-strip a:hover {
      transform: translateY(-2px);
      border-color: rgba(232,192,112,.42);
      background: rgba(232,192,112,.08);
    }

    .booking-panel,
    .glass-card {
      border: 1px solid rgba(232, 192, 112, .22);
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(18,17,15,.86), rgba(9,9,8,.74));
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
    }

    .booking-panel {
      padding: 22px;
    }

    .slot-list {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .slot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 15px;
      padding: 12px 13px;
      background: rgba(255,255,255,.045);
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }

    .slot:hover {
      transform: translateX(3px);
      border-color: rgba(232,192,112,.42);
      background: rgba(232,192,112,.08);
    }

    .slot strong {
      display: block;
      color: #fff4de;
      font-size: 14px;
    }

    .slot small {
      color: #9f9588;
      font-size: 12px;
    }

    .slot em {
      font-style: normal;
      color: #f4d99b;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 12px;
    }

    .section {
      padding: 70px 0;
      position: relative;
    }

    .section-tight {
      padding: 48px 0;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(280px, .55fr);
      gap: 24px;
      align-items: end;
      margin-bottom: 28px;
    }

    .section-kicker {
      color: var(--gold);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .section-title {
      margin-top: 8px;
      color: #fff7e8;
      font-size: clamp(26px, 3.2vw, 42px);
      line-height: 1.16;
      font-weight: 950;
      letter-spacing: 0;
    }

    .section-summary {
      color: #bfb4a4;
      font-size: 15px;
      line-height: 1.85;
    }

    .topic-layout {
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .side-nav {
      position: sticky;
      top: 104px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 18px;
      padding: 14px;
      background: rgba(255,255,255,.045);
      backdrop-filter: blur(14px);
    }

    .side-nav a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 12px;
      padding: 12px 12px;
      color: #d7cdbc;
      font-size: 14px;
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }

    .side-nav a:hover {
      transform: translateX(3px);
      background: rgba(232,192,112,.09);
      color: #fff3dc;
    }

    .feature-band {
      overflow: hidden;
      border: 1px solid rgba(232,192,112,.18);
      border-radius: 24px;
      background:
        linear-gradient(90deg, rgba(9,8,7,.94), rgba(15,13,10,.78)),
        url('/assets/images/coverpic/cover-7.webp');
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
    }

    .feature-band-inner {
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(280px, .45fr);
      gap: 22px;
      padding: 28px;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }

    .stat {
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 15px;
      padding: 15px;
      background: rgba(0,0,0,.26);
    }

    .stat b {
      display: block;
      color: #f5d997;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 22px;
      line-height: 1.1;
    }

    .stat span {
      display: block;
      margin-top: 6px;
      color: #bcb2a4;
      font-size: 12px;
    }

    .timeline {
      position: relative;
      display: grid;
      gap: 16px;
    }

    .timeline::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 10px;
      bottom: 10px;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(232,192,112,.46), transparent);
    }

    .timeline-item {
      position: relative;
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .timeline-dot {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 14px;
      border: 1px solid rgba(232,192,112,.42);
      color: #f5d997;
      background: rgba(16,14,11,.96);
      box-shadow: 0 0 22px rgba(232,192,112,.16);
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 12px;
      font-weight: 900;
    }

    .card {
      border: 1px solid rgba(255,255,255,.1);
      border-radius: var(--radius);
      background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
      box-shadow: 0 18px 48px rgba(0,0,0,.22);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .card:hover {
      transform: translateY(-3px);
      border-color: rgba(232,192,112,.34);
      box-shadow: var(--glow), 0 22px 58px rgba(0,0,0,.3);
      background: linear-gradient(145deg, rgba(232,192,112,.08), rgba(255,255,255,.03));
    }

    .module-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .module-card {
      min-height: 100%;
      padding: 18px;
    }

    .module-card img {
      width: 100%;
      height: 156px;
      object-fit: cover;
      border-radius: 13px;
      border: 1px solid rgba(255,255,255,.1);
      opacity: .9;
      margin-bottom: 15px;
    }

    .module-card h3,
    .timeline-card h3,
    .faq-item h3 {
      color: #fff4de;
      font-size: 18px;
      font-weight: 900;
      line-height: 1.35;
    }

    .module-card p,
    .timeline-card p,
    .faq-item p {
      margin-top: 9px;
      color: #bdb2a4;
      font-size: 14px;
      line-height: 1.75;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .process-grid {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(310px, .55fr);
      gap: 18px;
      align-items: stretch;
    }

    .check-list {
      display: grid;
      gap: 12px;
    }

    .check-item {
      display: flex;
      gap: 12px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 15px;
      padding: 14px;
      background: rgba(255,255,255,.045);
    }

    .check-icon {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 10px;
      color: #1a1206;
      background: linear-gradient(135deg, #f4dda5, #d39b42);
      font-weight: 950;
    }

    .compare-table {
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 18px;
      background: rgba(255,255,255,.04);
    }

    .compare-row {
      display: grid;
      grid-template-columns: 1.05fr 1fr 1fr;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .compare-row:last-child {
      border-bottom: 0;
    }

    .compare-row > div {
      padding: 15px;
      color: #c9beae;
      font-size: 14px;
    }

    .compare-row.head > div {
      color: #fff2d8;
      font-weight: 900;
      background: rgba(232,192,112,.08);
    }

    .testimonial-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .quote-card {
      padding: 18px;
    }

    .avatar {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(232,192,112,.32);
      background: rgba(232,192,112,.09);
      color: #f4d99b;
      font-weight: 950;
    }

    .stars {
      color: #f2c777;
      letter-spacing: 0;
    }

    .guarantee-bar {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .guarantee {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      border: 1px solid rgba(232,192,112,.18);
      border-radius: 16px;
      padding: 16px;
      background: rgba(255,255,255,.045);
    }

    .guarantee span:first-child {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      border-radius: 12px;
      color: #f5d997;
      background: rgba(232,192,112,.1);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .faq-item {
      padding: 20px;
    }

    .cta-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(232,192,112,.28);
      border-radius: 26px;
      padding: 34px;
      background:
        linear-gradient(120deg, rgba(9,8,7,.96), rgba(31,24,14,.86)),
        url('/assets/images/coverpic/cover-8.webp');
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
    }

    .cta-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 78% 30%, rgba(232,192,112,.18), transparent 34%);
      pointer-events: none;
    }

    .cta-content {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, .88fr) auto;
      gap: 24px;
      align-items: center;
    }

    .footer-link {
      color: #bdb3a6;
      transition: color .2s ease, transform .2s ease;
      width: fit-content;
    }

    .footer-link:hover {
      color: #f3d28b;
      transform: translateX(3px);
    }

    .soft-text {
      color: #aca295;
    }

    .mobile-menu {
      display: none;
      border-top: 1px solid rgba(255,255,255,.1);
      padding: 12px 0 4px;
    }

    .mobile-menu.is-open {
      display: grid;
      gap: 8px;
    }

    .mobile-menu a {
      border-radius: 12px;
      padding: 11px 12px;
      color: #ddd2c1;
      background: rgba(255,255,255,.045);
    }

    .mobile-menu a.is-active {
      color: #f6d991;
      background: rgba(232,192,112,.1);
    }

    @media (max-width: 1024px) {
      .hero-grid,
      .section-head,
      .topic-layout,
      .process-grid,
      .feature-band-inner,
      .cta-content {
        grid-template-columns: 1fr;
      }

      .side-nav {
        position: relative;
        top: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .module-grid,
      .testimonial-strip,
      .guarantee-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 768px) {
      .hero {
        padding-top: 112px;
      }

      .anchor-strip,
      .stat-grid,
      .module-grid,
      .testimonial-strip,
      .guarantee-bar,
      .faq-grid {
        grid-template-columns: 1fr;
      }

      .compare-row {
        grid-template-columns: 1fr;
      }

      .compare-row > div {
        border-bottom: 1px solid rgba(255,255,255,.06);
      }

      .compare-row > div:last-child {
        border-bottom: 0;
      }

      .feature-band-inner,
      .cta-panel {
        padding: 22px;
      }
    }

    @media (max-width: 520px) {
      .container-site {
        width: min(100% - 24px, var(--container));
      }

      .hero-title {
        font-size: 34px;
      }

      .hero-desc {
        font-size: 15px;
      }

      .hero-actions {
        flex-direction: column;
      }

      .btn-primary,
      .btn-ghost,
      .btn-soft {
        width: 100%;
      }

      .side-nav {
        grid-template-columns: 1fr;
      }

      .slot {
        align-items: flex-start;
        flex-direction: column;
      }
    }