/* roulang page: index */
:root {
      --bg: #0b0d10;
      --bg-soft: #11151b;
      --panel: #151a21;
      --panel-2: #1b212a;
      --line: rgba(232, 201, 131, 0.16);
      --line-strong: rgba(232, 201, 131, 0.32);
      --text: #f3efe6;
      --muted: #b6b0a3;
      --muted-2: #8f8a80;
      --gold: #d9b56f;
      --gold-2: #f1d79c;
      --green: #78c2a4;
      --red: #e48f8f;
      --shadow: 0 12px 30px rgba(0,0,0,0.24);
      --radius: 8px;
      --radius-sm: 6px;
      --container: 1180px;
      --gap: 24px;
      --space-1: 6px;
      --space-2: 10px;
      --space-3: 14px;
      --space-4: 18px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 48px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background:
        radial-gradient(1200px 700px at 12% -10%, rgba(217, 181, 111, 0.12), transparent 55%),
        radial-gradient(800px 500px at 90% 5%, rgba(120, 194, 164, 0.08), transparent 45%),
        linear-gradient(180deg, #0a0c0f 0%, #0d1014 40%, #0b0d10 100%);
      color: var(--text);
      line-height: 1.65;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, textarea, select {
      font: inherit;
      color: inherit;
    }
    button {
      border: 0;
      background: none;
      cursor: pointer;
    }
    ::selection { background: rgba(217, 181, 111, 0.28); }

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

    .skip-link {
      position: absolute;
      left: -999px;
      top: 8px;
      background: var(--gold);
      color: #111;
      padding: 8px 12px;
      border-radius: 6px;
      z-index: 1000;
    }
    .skip-link:focus { left: 16px; }

    header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(18px);
      background: rgba(10, 12, 15, 0.78);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 72px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 700;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background:
        linear-gradient(145deg, rgba(217, 181, 111, 0.95), rgba(92, 73, 35, 0.9));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
      display: grid;
      place-items: center;
      color: #16110a;
      font-weight: 800;
      font-size: 14px;
      letter-spacing: 0;
    }
    nav {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .nav-link {
      position: relative;
      padding: 10px 12px;
      color: var(--muted);
      transition: color .2s ease, background .2s ease, transform .2s ease;
      border-radius: 999px;
      white-space: nowrap;
      font-size: 14px;
    }
    .nav-link:hover,
    .nav-link:focus-visible {
      color: var(--text);
      background: rgba(255,255,255,0.04);
      outline: none;
      transform: translateY(-1px);
    }
    .nav-link.active {
      color: var(--gold-2);
      background: rgba(217, 181, 111, 0.08);
      box-shadow: inset 0 0 0 1px rgba(217, 181, 111, 0.18);
    }
    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .icon-btn, .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 8px;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
      white-space: nowrap;
    }
    .icon-btn {
      width: 40px;
      height: 40px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      color: var(--text);
    }
    .icon-btn:hover, .icon-btn:focus-visible {
      transform: translateY(-1px);
      background: rgba(255,255,255,0.06);
      border-color: rgba(217,181,111,0.28);
      outline: none;
    }
    .btn {
      padding: 12px 16px;
      border: 1px solid transparent;
      font-weight: 600;
      font-size: 14px;
    }
    .btn-primary {
      color: #17120a;
      background: linear-gradient(145deg, var(--gold-2), var(--gold));
      box-shadow: 0 10px 22px rgba(217,181,111,0.16);
    }
    .btn-primary:hover, .btn-primary:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(217,181,111,0.22);
      outline: none;
    }
    .btn-secondary {
      color: var(--text);
      background: rgba(255,255,255,0.03);
      border-color: rgba(255,255,255,0.08);
    }
    .btn-secondary:hover, .btn-secondary:focus-visible {
      border-color: rgba(217,181,111,0.28);
      background: rgba(217,181,111,0.05);
      outline: none;
    }

    main { padding-bottom: 42px; }
    section {
      padding: 28px 0;
    }
    .hero {
      padding: 34px 0 26px;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 20px;
      align-items: stretch;
    }
    .hero-copy, .panel, .content-box {
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }
    .hero-copy {
      padding: 30px;
      position: relative;
      overflow: hidden;
    }
    .hero-copy:before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(217,181,111,0.08), transparent 35%),
        radial-gradient(500px 160px at 90% 8%, rgba(120,194,164,0.08), transparent 60%);
      pointer-events: none;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(217,181,111,0.2);
      background: rgba(217,181,111,0.06);
      color: var(--gold-2);
      font-size: 12px;
      letter-spacing: 0;
      position: relative;
      z-index: 1;
    }
    h1, h2, h3, h4, p { margin: 0; }
    h1 {
      margin-top: 18px;
      font-size: clamp(34px, 4vw, 52px);
      line-height: 1.08;
      letter-spacing: 0;
      position: relative;
      z-index: 1;
    }
    .hero-text {
      margin-top: 16px;
      max-width: 56ch;
      color: var(--muted);
      font-size: 16px;
      position: relative;
      z-index: 1;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 22px;
      position: relative;
      z-index: 1;
    }
    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 12px;
      margin-top: 24px;
      position: relative;
      z-index: 1;
    }
    .metric {
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(5,7,9,0.28);
      border-radius: 8px;
      padding: 14px;
    }
    .metric strong {
      display: block;
      font-size: 18px;
      color: var(--gold-2);
      line-height: 1.2;
    }
    .metric span {
      display: block;
      margin-top: 4px;
      color: var(--muted-2);
      font-size: 13px;
    }

    .hero-stage {
      display: grid;
      gap: 14px;
      padding: 20px;
      grid-template-columns: 1fr;
    }
    .hero-stage-top {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 14px;
    }
    .stage-card, .stage-list, .feature-card, .news-card, .review-card, .faq-item, .cta-box {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.03);
    }
    .stage-card {
      padding: 18px;
      min-height: 210px;
      position: relative;
      overflow: hidden;
    }
    .stage-card:before {
      content: "";
      position: absolute;
      inset: auto -25% -30% auto;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(217,181,111,0.2), transparent 60%);
      pointer-events: none;
    }
    .stage-title {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.25;
    }
    .stage-sub {
      margin-top: 8px;
      color: var(--muted);
      font-size: 14px;
    }
    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .pill {
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(217,181,111,0.16);
      background: rgba(217,181,111,0.06);
      color: var(--gold-2);
      font-size: 12px;
    }
    .stage-list {
      padding: 16px;
      display: grid;
      gap: 10px;
    }
    .status-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .status-line:last-child { border-bottom: 0; padding-bottom: 0; }
    .status-line span {
      color: var(--muted);
      font-size: 13px;
    }
    .status-line strong {
      color: var(--text);
      font-size: 13px;
    }
    .status-dot {
      display: inline-flex;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 4px rgba(120,194,164,0.12);
      margin-right: 8px;
      vertical-align: middle;
    }

    .search-strip {
      margin-top: 18px;
      padding: 18px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      position: relative;
      z-index: 1;
    }
    .search-form {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
    }
    .search-input {
      width: 100%;
      min-height: 48px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(5,7,9,0.45);
      padding: 0 14px;
      color: var(--text);
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .search-input::placeholder { color: #8d877a; }
    .search-input:focus {
      border-color: rgba(217,181,111,0.34);
      box-shadow: 0 0 0 4px rgba(217,181,111,0.08);
      background: rgba(5,7,9,0.6);
    }
    .quick-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 12px;
    }
    .quick-link {
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      font-size: 13px;
      background: rgba(255,255,255,0.02);
      transition: border-color .2s ease, color .2s ease, transform .2s ease;
    }
    .quick-link:hover, .quick-link:focus-visible {
      transform: translateY(-1px);
      color: var(--text);
      border-color: rgba(217,181,111,0.24);
      outline: none;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 18px;
      margin-bottom: 16px;
    }
    .section-head h2 {
      font-size: 26px;
      line-height: 1.2;
    }
    .section-head p {
      color: var(--muted);
      max-width: 62ch;
      font-size: 14px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
    }
    .grid-4 {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 14px;
    }
    .feature-card {
      padding: 18px;
      min-height: 160px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .feature-card:hover {
      transform: translateY(-2px);
      border-color: rgba(217,181,111,0.24);
      background: rgba(255,255,255,0.04);
    }
    .feature-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .feature-icon {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(217,181,111,0.18);
      background: rgba(217,181,111,0.08);
      color: var(--gold-2);
      font-weight: 700;
    }
    .badge {
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      background: rgba(255,255,255,0.03);
    }
    .feature-card h3, .news-card h3 {
      font-size: 16px;
      line-height: 1.35;
    }
    .feature-card p, .news-card p, .review-card p, .faq-item p {
      color: var(--muted);
      font-size: 14px;
    }
    .feature-actions {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding-top: 8px;
    }
    .link-inline {
      color: var(--gold-2);
      font-weight: 600;
      font-size: 13px;
    }

    .showcase {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .show-card {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.03);
      padding: 18px;
    }
    .show-card h3 {
      font-size: 17px;
      margin-bottom: 8px;
    }
    .show-list {
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .show-list li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: var(--muted);
      font-size: 14px;
    }
    .show-list li:before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-top: 7px;
      background: var(--gold);
      flex: 0 0 auto;
    }

    .review-strip {
      overflow: hidden;
      position: relative;
    }
    .review-track {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
    }
    .review-card {
      padding: 18px;
      min-height: 176px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .stars {
      color: var(--gold-2);
      letter-spacing: 1px;
      font-size: 13px;
    }
    .review-meta {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      color: var(--muted-2);
      font-size: 12px;
    }

    .badge-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 12px;
    }
    .badge-box {
      padding: 16px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 82px;
    }
    .badge-mark {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: rgba(217,181,111,0.08);
      color: var(--gold-2);
      border: 1px solid rgba(217,181,111,0.18);
      flex: 0 0 auto;
    }
    .badge-box strong {
      display: block;
      font-size: 14px;
      line-height: 1.3;
    }
    .badge-box span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 2px;
    }

    .news-layout {
      display: grid;
      grid-template-columns: 1.35fr 0.65fr;
      gap: 14px;
    }
    .news-list {
      display: grid;
      gap: 12px;
    }
    .news-card {
      padding: 16px;
      display: grid;
      gap: 8px;
    }
    .news-meta {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      color: var(--muted-2);
      font-size: 12px;
    }
    .news-side {
      padding: 18px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
    }
    .news-side h3 { font-size: 17px; margin-bottom: 12px; }
    .side-list {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }
    .side-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding-bottom: 10px;
    }
    .side-item:last-child { border-bottom: 0; padding-bottom: 0; }
    .side-item span {
      color: var(--muted);
      font-size: 13px;
    }
    .side-item strong {
      color: var(--text);
      font-size: 13px;
      text-align: right;
    }

    .form-box {
      padding: 20px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
    }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px;
      margin-top: 14px;
    }
    .field {
      display: grid;
      gap: 8px;
    }
    .field label {
      font-size: 13px;
      color: var(--muted);
    }
    .field input, .field select, .field textarea {
      width: 100%;
      min-height: 46px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(5,7,9,0.45);
      padding: 10px 12px;
      color: var(--text);
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .field textarea {
      min-height: 96px;
      resize: vertical;
    }
    .field input:focus, .field select:focus, .field textarea:focus {
      border-color: rgba(217,181,111,0.34);
      box-shadow: 0 0 0 4px rgba(217,181,111,0.08);
    }

    .faq-grid {
      display: grid;
      gap: 12px;
    }
    .faq-item {
      overflow: hidden;
    }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 16px 18px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      font-weight: 600;
      color: var(--text);
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:after {
      content: "+";
      color: var(--gold-2);
      font-size: 20px;
      line-height: 1;
    }
    .faq-item[open] summary:after { content: "–"; }
    .faq-item p {
      padding: 0 18px 16px;
      max-width: 80ch;
    }

    .cta-box {
      padding: 24px;
      display: grid;
      grid-template-columns: 1.1fr auto;
      gap: 18px;
      align-items: center;
      background:
        linear-gradient(135deg, rgba(217,181,111,0.1), rgba(255,255,255,0.03)),
        rgba(255,255,255,0.03);
    }
    .cta-box h2 {
      font-size: 26px;
      line-height: 1.2;
      margin-bottom: 8px;
    }
    .cta-box p { color: var(--muted); max-width: 64ch; }
    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: flex-end;
    }

    footer {
      margin-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.08);
      background: rgba(4,6,8,0.64);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr 0.8fr;
      gap: 18px;
      padding: 28px 0;
    }
    .footer-col h3 {
      font-size: 16px;
      margin-bottom: 12px;
    }
    .footer-col p, .footer-link {
      color: var(--muted);
      font-size: 14px;
    }
    .footer-links {
      display: grid;
      gap: 10px;
    }
    .footer-link:hover, .footer-link:focus-visible {
      color: var(--gold-2);
      outline: none;
    }
    .copyright {
      padding: 14px 0 24px;
      color: var(--muted-2);
      font-size: 13px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    @media (max-width: 1024px) {
      .hero-grid, .news-layout, .showcase, .cta-box, .footer-grid {
        grid-template-columns: 1fr;
      }
      .grid-4, .badge-row, .review-track {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
      .grid-3 {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
      .hero-stage-top {
        grid-template-columns: 1fr;
      }
      nav {
        display: none;
      }
      .nav-wrap {
        gap: 12px;
      }
    }

    @media (max-width: 768px) {
      .container { width: min(calc(100% - 24px), var(--container)); }
      .hero-copy, .hero-stage, .form-box, .cta-box, .news-side, .show-card {
        padding: 18px;
      }
      h1 { font-size: 32px; }
      .section-head {
        flex-direction: column;
        align-items: start;
      }
      .grid-3, .grid-4, .badge-row, .review-track, .form-grid, .hero-metrics {
        grid-template-columns: 1fr;
      }
      .search-form {
        grid-template-columns: 1fr;
      }
      .nav-actions .btn-secondary {
        display: none;
      }
      .cta-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 520px) {
      .nav-wrap {
        min-height: 64px;
      }
      .brand span {
        font-size: 15px;
      }
      .hero {
        padding-top: 22px;
      }
      .hero-copy {
        padding: 20px 16px;
      }
      h1 { font-size: 28px; }
      .hero-text, .section-head p, .cta-box p {
        font-size: 14px;
      }
      .btn {
        width: 100%;
        justify-content: center;
      }
      .hero-actions, .quick-links, .pill-row {
        gap: 8px;
      }
      .quick-link, .pill, .badge {
        font-size: 12px;
      }
      .section-head h2, .cta-box h2 {
        font-size: 22px;
      }
    }

/* roulang page: category1 */
:root{
  --bg:#0b0e0d;
  --bg-2:#101512;
  --surface:#121816;
  --surface-2:#161d1a;
  --line:#2a332f;
  --line-2:#39433f;
  --text:#f2efe6;
  --muted:#a6afa7;
  --soft:#7f8982;
  --accent:#d8b25b;
  --accent-2:#7ecab1;
  --accent-3:#a25f59;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --shadow-soft:0 6px 16px rgba(0,0,0,.18);
  --r:8px;
  --r-sm:6px;
  --gap:20px;
  --container:1200px;
  --focus:0 0 0 3px rgba(216,178,91,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
    linear-gradient(135deg,#090b0a 0%,#0b0e0d 45%,#0f1512 100%);
  line-height:1.7;
  letter-spacing:0;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(transparent 0, transparent 96%, rgba(255,255,255,.03) 100%),
    linear-gradient(90deg, transparent 0, transparent 96%, rgba(255,255,255,.025) 100%);
  background-size:100% 3px, 3px 100%;
  mix-blend-mode:soft-light;
  opacity:.12;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:rgba(216,178,91,.28)}
.container{
  width:min(var(--container),calc(100% - 32px));
  margin:0 auto;
}
.site{
  min-height:100vh;
  position:relative;
  overflow:hidden;
}
header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(11,14,13,.82);
  border-bottom:1px solid rgba(42,51,47,.85);
}
.nav-wrap{
  min-height:76px;
  display:flex;
  align-items:center;
  gap:18px;
  justify-content:space-between;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
}
.brand-mark{
  width:32px;
  height:32px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,rgba(216,178,91,.28),rgba(216,178,91,.08));
  border:1px solid rgba(216,178,91,.55);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
nav{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid rgba(42,51,47,.9);
  background:rgba(16,21,18,.65);
  border-radius:999px;
}
.nav-link{
  position:relative;
  padding:10px 14px;
  color:var(--muted);
  border-radius:999px;
  transition:color .2s ease, background .2s ease, transform .2s ease;
}
.nav-link:hover,.nav-link:focus-visible{
  color:var(--text);
  background:rgba(255,255,255,.03);
  outline:none;
}
.nav-link.active{
  color:var(--text);
  background:rgba(216,178,91,.12);
  box-shadow:inset 0 0 0 1px rgba(216,178,91,.28);
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.icon-btn,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.icon-btn{
  width:40px;
  padding:0;
  background:rgba(255,255,255,.02);
  border-color:rgba(42,51,47,.9);
  color:var(--muted);
}
.btn:hover,.btn:focus-visible,.icon-btn:hover,.icon-btn:focus-visible{
  transform:translateY(-1px);
  outline:none;
  box-shadow:var(--focus);
}
.btn-primary{
  background:linear-gradient(180deg,rgba(216,178,91,.98),rgba(182,142,44,.94));
  color:#111;
  font-weight:700;
  border-color:rgba(216,178,91,.9);
}
.btn-primary:hover,.btn-primary:focus-visible{
  box-shadow:0 10px 24px rgba(216,178,91,.18), var(--focus);
}
.btn-secondary{
  color:var(--text);
  background:rgba(255,255,255,.02);
  border-color:rgba(67,78,73,.95);
}
main{
  padding:22px 0 56px;
}
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:14px;
}
.breadcrumb a{
  color:var(--muted);
}
.breadcrumb span{
  color:#66706a;
}
.hero{
  margin-top:18px;
  padding:26px 0 10px;
}
.hero-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(52,61,58,.95);
  background:
    linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,0)),
    linear-gradient(180deg,rgba(18,24,22,.98),rgba(12,15,14,.98));
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 0 18%,rgba(216,178,91,.06) 18% 19%,transparent 19% 100%),
    linear-gradient(180deg,transparent 0 92%,rgba(255,255,255,.04) 92% 100%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:28px;
  padding:30px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(216,178,91,.28);
  color:var(--accent);
  background:rgba(216,178,91,.08);
  font-size:13px;
  white-space:nowrap;
}
.hero h1{
  margin:14px 0 14px;
  font-size:clamp(30px,4vw,52px);
  line-height:1.08;
  letter-spacing:0;
}
.hero p{
  margin:0;
  max-width:62ch;
  color:var(--muted);
  font-size:16px;
}
.hero-actions{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.hero-meta{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(58,68,64,.95);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-size:13px;
}
.badge strong{color:var(--text);font-weight:600}
.live-cover{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.cover-frame{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  border-radius:var(--r);
  border:1px solid rgba(66,74,70,.95);
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),
    linear-gradient(135deg,#181f1b 0%,#111715 48%,#0c1010 100%);
  box-shadow:var(--shadow-soft);
}
.cover-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(160deg,rgba(216,178,91,.16),transparent 28%),
    linear-gradient(0deg,transparent 58%,rgba(0,0,0,.45) 100%);
}
.cover-frame::after{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:calc(var(--r) - 2px);
}
.cover-top{
  position:absolute;
  inset:18px 18px auto 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:1;
}
.live-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(12,15,14,.72);
  border:1px solid rgba(216,178,91,.35);
  color:var(--text);
  font-size:13px;
}
.live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ef6761;
  box-shadow:0 0 0 4px rgba(239,103,97,.12);
}
.cover-note{
  color:var(--muted);
  font-size:13px;
  background:rgba(12,15,14,.68);
  border:1px solid rgba(57,67,63,.9);
  padding:7px 10px;
  border-radius:999px;
}
.cover-bottom{
  position:absolute;
  inset:auto 18px 18px 18px;
  z-index:1;
  display:grid;
  gap:10px;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.count-box{
  padding:12px 10px;
  text-align:center;
  border-radius:var(--r-sm);
  background:rgba(11,14,13,.74);
  border:1px solid rgba(64,74,69,.95);
}
.count-box strong{
  display:block;
  font-size:26px;
  line-height:1.1;
  color:var(--accent);
}
.count-box span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}
.remind{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:14px 15px;
  border-radius:var(--r-sm);
  background:rgba(17,22,20,.92);
  border:1px solid rgba(57,67,63,.95);
}
.remind label{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:14px;
}
.remind small{
  color:var(--muted);
}
.remind-form{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.input{
  min-width:220px;
  min-height:40px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(57,67,63,.95);
  background:#0e1311;
  color:var(--text);
}
.input::placeholder{color:#6f7a74}
.section{
  margin-top:28px;
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.section-head h2{
  margin:0;
  font-size:24px;
  line-height:1.2;
}
.section-head p{
  margin:0;
  color:var(--muted);
  max-width:62ch;
  font-size:14px;
}
.filter-bar{
  display:grid;
  grid-template-columns:1.2fr repeat(4,minmax(0,.75fr));
  gap:12px;
  padding:16px;
  border-radius:var(--r);
  border:1px solid rgba(52,61,58,.95);
  background:rgba(16,21,18,.72);
}
.filter-block{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.filter-label{
  font-size:12px;
  color:var(--soft);
}
.select,.search{
  width:100%;
  min-height:42px;
  border-radius:var(--r-sm);
  border:1px solid rgba(57,67,63,.95);
  background:#0e1311;
  padding:0 12px;
  color:var(--text);
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(57,67,63,.95);
  color:var(--muted);
}
.tag.active{
  color:var(--text);
  border-color:rgba(216,178,91,.35);
  background:rgba(216,178,91,.10);
}
.grid{
  display:grid;
  gap:16px;
}
.feature-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.feature-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  border:1px solid rgba(57,67,63,.95);
  background:linear-gradient(180deg,rgba(17,23,20,.96),rgba(13,17,16,.96));
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feature-card:hover,.feature-card:focus-within{
  transform:translateY(-2px);
  border-color:rgba(216,178,91,.48);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.feature-cover{
  aspect-ratio:16/9;
  position:relative;
  border-bottom:1px solid rgba(57,67,63,.95);
  background:
    linear-gradient(135deg,rgba(216,178,91,.16),transparent 35%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),
    linear-gradient(135deg,#202925 0%,#131917 52%,#0c100f 100%);
}
.feature-cover::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.05);
}
.feature-badge{
  position:absolute;
  top:14px;
  left:14px;
  z-index:1;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(11,14,13,.72);
  border:1px solid rgba(216,178,91,.35);
  color:var(--accent);
  font-size:12px;
}
.feature-score{
  position:absolute;
  top:14px;
  right:14px;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(11,14,13,.72);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  font-size:12px;
}
.feature-body{
  padding:16px;
}
.feature-body h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.25;
}
.feature-body p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.feature-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(57,67,63,.82);
}
.feature-mini{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.mini{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(57,67,63,.95);
  color:var(--soft);
  font-size:12px;
}
.link-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--accent);
  font-size:14px;
  white-space:nowrap;
}
.link-btn svg{stroke-width:2}
.compare{
  padding:18px;
  border-radius:var(--r);
  border:1px solid rgba(52,61,58,.95);
  background:rgba(16,21,18,.72);
  overflow:hidden;
}
table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  padding:14px 12px;
  border-bottom:1px solid rgba(57,67,63,.85);
  text-align:left;
  vertical-align:top;
  font-size:14px;
}
th{
  color:var(--text);
  font-weight:700;
  background:rgba(255,255,255,.02);
}
td{
  color:var(--muted);
}
tbody tr:nth-child(2n) td{background:rgba(255,255,255,.012)}
.review-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px,1fr);
  gap:14px;
  overflow-x:auto;
  padding-bottom:4px;
  scroll-snap-type:x mandatory;
}
.review-card{
  scroll-snap-align:start;
  padding:18px;
  border-radius:var(--r);
  border:1px solid rgba(57,67,63,.95);
  background:rgba(17,22,20,.88);
}
.review-card p{
  margin:0 0 12px;
  color:var(--text);
  font-size:15px;
}
.review-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:13px;
}
.assurance{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.assurance-item{
  padding:16px;
  border-radius:var(--r);
  background:rgba(255,255,255,.02);
  border:1px solid rgba(57,67,63,.95);
}
.assurance-item strong{
  display:block;
  margin-bottom:6px;
  color:var(--text);
}
.assurance-item span{
  color:var(--muted);
  font-size:14px;
}
.faq-wrap{
  display:grid;
  gap:12px;
}
details{
  border-radius:var(--r);
  border:1px solid rgba(57,67,63,.95);
  background:rgba(16,21,18,.78);
  overflow:hidden;
}
summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";
  color:var(--accent);
  font-size:20px;
  line-height:1;
}
details[open] summary::after{content:"−"}
details p{
  margin:0;
  padding:0 18px 18px;
  color:var(--muted);
  font-size:14px;
}
.cta{
  margin-top:28px;
  padding:22px;
  border-radius:var(--r);
  border:1px solid rgba(64,74,69,.95);
  background:
    linear-gradient(180deg,rgba(216,178,91,.10),rgba(216,178,91,0)),
    linear-gradient(135deg,rgba(18,24,22,.98),rgba(13,17,16,.98));
}
.cta-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
}
.cta h2{
  margin:0 0 10px;
  font-size:24px;
}
.cta p{
  margin:0;
  color:var(--muted);
  max-width:64ch;
}
.cta-form{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cta-form .input{min-width:min(100%,320px)}
footer{
  margin-top:32px;
  border-top:1px solid rgba(42,51,47,.9);
  background:rgba(10,13,12,.96);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr .75fr .9fr;
  gap:22px;
  padding:28px 0 20px;
}
.footer-col h3{
  margin:0 0 12px;
  font-size:16px;
}
.footer-col p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.footer-links{
  display:grid;
  gap:10px;
}
.footer-link{
  color:var(--muted);
  transition:color .2s ease;
}
.footer-link:hover,.footer-link:focus-visible{
  color:var(--text);
  outline:none;
}
.copyright{
  padding:16px 0 24px;
  border-top:1px solid rgba(42,51,47,.85);
  color:var(--soft);
  font-size:13px;
}
.copyright a{color:var(--accent)}
.focusable:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow:var(--focus);
}
@media (max-width: 1024px){
  .hero-inner,
  .cta-grid,
  .footer-grid{
    grid-template-columns:1fr;
  }
  .feature-grid,
  .assurance{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .filter-bar{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 768px){
  .nav-wrap{
    flex-wrap:wrap;
    padding:12px 0;
  }
  nav{
    order:3;
    width:100%;
    justify-content:flex-start;
    overflow:auto;
    scrollbar-width:none;
  }
  nav::-webkit-scrollbar{display:none}
  .nav-actions{
    margin-left:auto;
  }
  .hero-inner,
  .section-head{
    gap:12px;
  }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .feature-grid,
  .assurance{
    grid-template-columns:1fr;
  }
  .filter-bar{
    grid-template-columns:1fr;
  }
  .countdown{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .cta{
    padding:18px;
  }
  .cta-form{
    flex-direction:column;
  }
  .input{
    min-width:0;
    width:100%;
  }
}
@media (max-width: 520px){
  .container{width:min(var(--container),calc(100% - 22px))}
  .nav-actions{
    width:100%;
    justify-content:space-between;
  }
  .btn-secondary{
    flex:1;
  }
  .btn-primary{
    flex:1;
  }
  .hero-inner{
    padding:18px;
  }
  .hero p,
  .cta p{
    font-size:15px;
  }
  .hero h1{
    font-size:28px;
  }
  .review-strip{
    grid-auto-columns:minmax(84vw,1fr);
  }
  .feature-body h3,
  .section-head h2,
  .cta h2{
    font-size:20px;
  }
  .remind{
    padding:12px;
  }
  .remind label{
    width:100%;
  }
}

/* roulang page: category2 */
:root{
  --bg:#070b0a;
  --bg-soft:#0d1210;
  --panel:#111816;
  --panel-2:#0f1513;
  --text:#f4efe2;
  --muted:#9aa59f;
  --soft:#71807a;
  --line:rgba(217,190,116,.16);
  --line-strong:rgba(217,190,116,.28);
  --accent:#d8b96b;
  --accent-2:#7fb79a;
  --wine:#7d3141;
  --success:#8dd2b2;
  --shadow:0 20px 44px rgba(0,0,0,.32);
  --shadow-soft:0 10px 24px rgba(0,0,0,.18);
  --radius:8px;
  --radius-sm:6px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    linear-gradient(180deg, rgba(18,25,23,.92), rgba(7,11,10,.98) 34%, rgba(8,10,9,1) 100%),
    linear-gradient(135deg, rgba(16,23,20,.72), rgba(9,12,11,.72));
  color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.7;
  letter-spacing:0;
  color-scheme:dark;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 128px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 128px);
  opacity:.12;
  mix-blend-mode:soft-light;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
::selection{background:rgba(216,185,107,.28);color:#fff}
.container{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
}
.section{
  padding:56px 0;
  position:relative;
}
.section + .section{
  border-top:1px solid rgba(255,255,255,.04);
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:var(--accent);
  text-transform:none;
  letter-spacing:0;
  margin-bottom:10px;
}
.kicker::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(216,185,107,.12);
}
h1,h2,h3,p{margin:0}
h1{
  font-size:3rem;
  line-height:1.08;
  letter-spacing:0;
}
h2{
  font-size:1.7rem;
  line-height:1.2;
}
h3{
  font-size:1.08rem;
  line-height:1.3;
}
.lead{
  color:var(--muted);
  max-width:64ch;
  margin-top:14px;
  font-size:1rem;
}
.small{
  font-size:.92rem;
  color:var(--muted);
}
.mini{
  font-size:.84rem;
  color:var(--soft);
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(7,11,10,.86);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.nav-wrap{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
}
.brand-mark{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(216,185,107,.35);
  background:linear-gradient(160deg, rgba(216,185,107,.24), rgba(13,18,16,.92));
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
nav[aria-label="主导航"]{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.nav-link{
  position:relative;
  color:var(--muted);
  padding:8px 0;
  transition:color .18s ease;
  white-space:nowrap;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
  border-radius:999px;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active{
  color:var(--text);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after{
  transform:scaleX(1);
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.icon-btn,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 16px;
  border-radius:8px;
  border:1px solid transparent;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  letter-spacing:0;
}
.icon-btn{
  width:40px;
  padding:0;
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-color:rgba(255,255,255,.08);
}
.icon-btn:hover,
.icon-btn:focus-visible{
  border-color:var(--line-strong);
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
}
.btn{
  font-weight:600;
}
.btn-primary{
  background:linear-gradient(160deg, rgba(216,185,107,.98), rgba(191,152,60,.96));
  color:#10110f;
  box-shadow:0 12px 26px rgba(216,185,107,.14);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(216,185,107,.18);
}
.btn-secondary{
  color:var(--text);
  border-color:rgba(216,185,107,.24);
  background:rgba(255,255,255,.02);
}
.btn-secondary:hover,
.btn-secondary:focus-visible{
  border-color:rgba(216,185,107,.45);
  background:rgba(216,185,107,.08);
  transform:translateY(-1px);
}
.hero{
  padding:34px 0 54px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:28px;
  align-items:stretch;
}
.hero-copy{
  padding:26px 0 0;
}
.hero-copy h1{
  max-width:11ch;
}
.hero-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(216,185,107,.22);
  background:rgba(216,185,107,.08);
  color:#f4e4b6;
  font-size:.84rem;
}
.badge.soft{
  background:rgba(127,183,154,.08);
  border-color:rgba(127,183,154,.22);
  color:#bce2d1;
}
.badge.wine{
  background:rgba(125,49,65,.12);
  border-color:rgba(125,49,65,.28);
  color:#f0cbd1;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}
.hero-points{
  display:grid;
  gap:10px;
  margin-top:24px;
  padding-left:0;
  list-style:none;
}
.hero-points li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
}
.hero-points li::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  margin-top:10px;
  background:linear-gradient(180deg, var(--accent), rgba(216,185,107,.5));
  box-shadow:0 0 0 4px rgba(216,185,107,.08);
  flex:none;
}
.hero-panel{
  border:1px solid rgba(216,185,107,.18);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(14,18,16,.98), rgba(9,12,11,.96)),
    linear-gradient(135deg, rgba(216,185,107,.12), rgba(125,49,65,.08));
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 28%, transparent 72%, rgba(255,255,255,.03));
  pointer-events:none;
}
.cover-art{
  min-height:220px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  background:
    linear-gradient(140deg, rgba(216,185,107,.2), rgba(12,17,15,.08) 30%, rgba(9,12,11,.92) 74%),
    linear-gradient(20deg, rgba(127,183,154,.12), transparent 38%);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.cover-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.cover-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(7,11,10,.54);
  border:1px solid rgba(255,255,255,.09);
  color:#f3ead0;
  font-size:.84rem;
}
.cover-title{
  font-size:1.55rem;
  line-height:1.15;
  max-width:10ch;
  margin-top:10px;
}
.cover-copy{
  color:#d7dbd5;
  max-width:40ch;
  font-size:.95rem;
}
.cover-rail{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.time-box{
  border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(6,10,9,.58);
  padding:10px 8px;
  text-align:center;
}
.time-box strong{
  display:block;
  font-size:1.45rem;
  line-height:1.05;
  color:#fff6db;
}
.time-box span{
  display:block;
  margin-top:4px;
  font-size:.78rem;
  color:var(--muted);
}
.panel-body{
  padding:18px 20px 20px;
  display:grid;
  gap:14px;
}
.panel-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.panel-row:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.panel-row .mini{
  display:block;
}
.panel-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.metric{
  border:1px solid rgba(216,185,107,.14);
  background:rgba(255,255,255,.02);
  border-radius:8px;
  padding:12px 12px 10px;
}
.metric strong{
  display:block;
  font-size:1.18rem;
  color:#fff5dd;
}
.metric span{
  display:block;
  margin-top:4px;
  font-size:.8rem;
  color:var(--muted);
}
.band{
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.015);
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.stat{
  padding:18px 16px;
  border:1px solid rgba(216,185,107,.14);
  border-radius:8px;
  background:rgba(10,14,13,.55);
  box-shadow:var(--shadow-soft);
}
.stat strong{
  display:block;
  font-size:1.65rem;
  line-height:1;
  color:#ffefc2;
}
.stat span{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:.9rem;
}
.toolbar{
  display:grid;
  grid-template-columns:1.4fr .78fr auto;
  gap:12px;
  align-items:center;
  margin-bottom:18px;
}
.field,
select,
input[type="text"],
input[type="email"],
textarea{
  width:100%;
  min-height:44px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(8,12,11,.9);
  color:var(--text);
  padding:0 14px;
  outline:none;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
textarea{
  min-height:118px;
  padding:12px 14px;
  resize:vertical;
}
.field::placeholder,
input::placeholder,
textarea::placeholder{
  color:#7f8a84;
}
.field:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus{
  border-color:rgba(216,185,107,.46);
  box-shadow:0 0 0 3px rgba(216,185,107,.12);
}
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.chip:hover,
.chip:focus-visible{
  border-color:rgba(216,185,107,.34);
  color:var(--text);
  transform:translateY(-1px);
}
.chip.active{
  background:rgba(216,185,107,.12);
  border-color:rgba(216,185,107,.5);
  color:#f7e7bb;
}
.rank-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}
.rank-card{
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  border:1px solid rgba(216,185,107,.14);
  background:
    linear-gradient(180deg, rgba(15,20,18,.96), rgba(10,14,13,.96));
  border-radius:8px;
  padding:18px;
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.rank-card:hover,
.rank-card:focus-within{
  transform:translateY(-2px);
  border-color:rgba(216,185,107,.34);
  box-shadow:0 18px 32px rgba(0,0,0,.26);
}
.rank-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.rank-no{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:8px;
  background:rgba(216,185,107,.1);
  color:#f5dfab;
  border:1px solid rgba(216,185,107,.18);
  font-weight:700;
}
.rank-card p{
  color:var(--muted);
}
.meta-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  list-style:none;
}
.meta-list li{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  color:#c3cec7;
  font-size:.82rem;
}
.rank-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:4px;
}
.link-strong{
  color:#f8e8b9;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.link-strong:hover,
.link-strong:focus-visible{
  color:#fff7dd;
}
.table-wrap{
  overflow-x:auto;
  border:1px solid rgba(216,185,107,.12);
  border-radius:8px;
  background:rgba(10,14,13,.6);
  box-shadow:var(--shadow-soft);
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
.compare-table th,
.compare-table td{
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
.compare-table th{
  color:#f4e1b0;
  background:rgba(255,255,255,.02);
  font-size:.9rem;
}
.compare-table td{
  color:var(--text);
}
.compare-table tbody tr:nth-child(odd) td{
  background:rgba(255,255,255,.01);
}
.review-shell{
  position:relative;
}
.review-controls{
  display:flex;
  gap:10px;
  margin-left:auto;
}
.review-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px, 1fr);
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(216,185,107,.45) rgba(255,255,255,.05);
}
.review-track::-webkit-scrollbar{
  height:10px;
}
.review-track::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);
  border-radius:999px;
}
.review-track::-webkit-scrollbar-thumb{
  background:rgba(216,185,107,.44);
  border-radius:999px;
}
.review-card{
  scroll-snap-align:start;
  border:1px solid rgba(216,185,107,.14);
  background:rgba(10,14,13,.78);
  border-radius:8px;
  padding:18px;
  min-height:200px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.stars{
  display:flex;
  gap:6px;
  color:var(--accent);
}
.review-card blockquote{
  margin:0;
  color:var(--text);
  font-size:1.02rem;
  line-height:1.75;
}
.review-card footer{
  margin-top:auto;
  color:var(--muted);
  font-size:.88rem;
}
.assurance-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.assure{
  padding:18px 16px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
  border-radius:8px;
}
.assure h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.assure p{
  color:var(--muted);
}
.faq-list{
  display:grid;
  gap:12px;
}
.faq-item{
  border:1px solid rgba(216,185,107,.14);
  border-radius:8px;
  background:rgba(10,14,13,.7);
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  color:var(--accent);
  font-size:1.2rem;
  line-height:1;
  flex:none;
}
.faq-item[open] summary::after{
  content:"−";
}
.faq-item .faq-answer{
  padding:0 18px 16px;
  color:var(--muted);
}
.cta-band{
  background:linear-gradient(180deg, rgba(17,24,22,.9), rgba(10,14,13,.96));
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.cta-grid{
  display:grid;
  grid-template-columns:1fr .98fr;
  gap:18px;
  align-items:start;
}
.cta-panel{
  border:1px solid rgba(216,185,107,.14);
  border-radius:8px;
  padding:22px;
  background:rgba(255,255,255,.02);
  box-shadow:var(--shadow-soft);
}
.cta-points{
  margin-top:18px;
  display:grid;
  gap:10px;
  padding:0;
  list-style:none;
}
.cta-points li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
}
.cta-points li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  margin-top:9px;
  background:var(--accent-2);
  box-shadow:0 0 0 4px rgba(127,183,154,.08);
  flex:none;
}
.form-grid{
  display:grid;
  gap:12px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:6px;
}
.form-status{
  min-height:24px;
  color:#bfe6d2;
  font-size:.9rem;
}
.site-footer{
  padding:34px 0 28px;
  background:rgba(7,11,10,.96);
  border-top:1px solid rgba(255,255,255,.05);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:24px;
}
.footer-col h3{
  margin-bottom:12px;
  font-size:1rem;
}
.footer-col p{
  color:var(--muted);
  max-width:36ch;
}
.footer-links{
  display:grid;
  gap:10px;
}
.footer-link{
  color:#cdd4cf;
}
.footer-link:hover,
.footer-link:focus-visible{
  color:#fff3cb;
}
.copyright{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--soft);
  font-size:.9rem;
}
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:80;
  max-width:min(92vw, 320px);
  padding:14px 16px;
  border-radius:8px;
  border:1px solid rgba(127,183,154,.3);
  background:rgba(8,13,11,.96);
  color:#d9f0e4;
  box-shadow:var(--shadow);
  transform:translateY(20px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
}
[data-hidden="true"]{
  display:none !important;
}
@media (max-width: 1280px){
  .hero-grid{grid-template-columns:1fr .98fr}
  .rank-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .assurance-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 1024px){
  h1{font-size:2.5rem}
  .stat-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .cta-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .toolbar{grid-template-columns:1fr 1fr}
  .toolbar .tool-wide{grid-column:1 / -1}
}
@media (max-width: 768px){
  .container{width:min(100% - 24px, 1180px)}
  .nav-wrap{
    align-items:flex-start;
    padding:14px 0 16px;
    flex-wrap:wrap;
  }
  nav[aria-label="主导航"]{
    gap:16px;
  }
  .nav-actions{
    width:100%;
    justify-content:flex-start;
  }
  .hero{padding-top:24px}
  .hero-grid,
  .rank-grid,
  .assurance-grid,
  .footer-grid,
  .form-row,
  .toolbar{
    grid-template-columns:1fr;
  }
  .cover-rail{grid-template-columns:repeat(2, minmax(0, 1fr))}
  h1{font-size:2.15rem}
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .review-controls{
    margin-left:0;
  }
}
@media (max-width: 520px){
  .container{width:min(100% - 20px, 1180px)}
  .section{padding:42px 0}
  h1{font-size:1.92rem}
  h2{font-size:1.45rem}
  .hero-actions .btn,
  .form-actions .btn,
  .nav-actions .btn{
    width:100%;
  }
  .nav-actions .icon-btn{
    width:40px;
  }
  .hero-copy{
    padding-top:8px;
  }
  .panel-grid,
  .stat-grid{
    grid-template-columns:1fr;
  }
  .compare-table{
    min-width:680px;
  }
  .review-track{
    grid-auto-columns:minmax(86%, 1fr);
  }
  .cta-panel,
  .rank-card,
  .review-card,
  .assure{
    padding:16px;
  }
}