/* roulang page: index */
:root {
      --bg: #0d0f12;
      --bg-soft: #14171d;
      --card: rgba(20, 23, 29, 0.88);
      --card-strong: #171b22;
      --line: rgba(255,255,255,0.08);
      --line-strong: rgba(255,255,255,0.14);
      --text: #f7f2eb;
      --muted: #b7b0a8;
      --muted-2: #8d8580;
      --accent: #d96c34;
      --accent-2: #ef9b53;
      --accent-3: #f6c96c;
      --success: #7bd389;
      --shadow: 0 24px 70px rgba(0,0,0,.42);
      --shadow-soft: 0 12px 28px rgba(0,0,0,.24);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --container: 1180px;
      --gap: 24px;
      --ease: all .28s cubic-bezier(.2,.8,.2,1);
    }

    * { 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:
        radial-gradient(circle at 15% 10%, rgba(217,108,52,.16), transparent 30%),
        radial-gradient(circle at 85% 20%, rgba(246,201,108,.12), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(239,155,83,.10), transparent 34%),
        linear-gradient(180deg, #0a0b0d 0%, #10131a 38%, #0d1015 100%);
      line-height: 1.7;
      overflow-x: hidden;
      padding-top: 78px;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    ::selection { background: rgba(217,108,52,.35); color: #fff; }
    a { color: inherit; text-decoration: none; }
    a:hover { color: inherit; }
    img { max-width: 100%; display: block; }
    button, input, textarea, select { font: inherit; }
    .container-wide {
      width: min(var(--container), calc(100% - 32px));
      margin-inline: auto;
    }
    .section-pad { padding: 88px 0; }
    .section-soft { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      color: var(--accent-3);
      font-size: .88rem;
      letter-spacing: .02em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }
    .eyebrow .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
      box-shadow: 0 0 0 6px rgba(217,108,52,.10);
    }
    .section-heading {
      max-width: 760px;
      margin-bottom: 32px;
    }
    .section-heading h2 {
      margin: 14px 0 12px;
      font-size: clamp(1.8rem, 3vw, 3rem);
      line-height: 1.12;
      letter-spacing: -.03em;
    }
    .section-heading p {
      margin: 0;
      color: var(--muted);
      max-width: 720px;
    }

    .navbar-glass {
      backdrop-filter: blur(18px);
      background: rgba(11, 13, 17, .82);
      border-bottom: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 10px 30px rgba(0,0,0,.2);
      transition: var(--ease);
    }
    .navbar-glass.scrolled {
      background: rgba(9,11,14,.94);
      box-shadow: 0 18px 42px rgba(0,0,0,.28);
    }
    .navbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: -.03em;
      color: #fff !important;
    }
    .brand-mark {
      width: 40px;
      height: 40px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 58%, var(--accent-3) 100%);
      color: #fff;
      font-weight: 900;
      box-shadow: 0 10px 26px rgba(217,108,52,.34);
    }
    .navbar .nav-link {
      color: rgba(247,242,235,.84);
      font-weight: 600;
      padding: .7rem .95rem !important;
      border-radius: 999px;
      transition: var(--ease);
    }
    .navbar .nav-link:hover,
    .navbar .nav-link:focus {
      color: #fff;
      background: rgba(255,255,255,.06);
    }
    .navbar .nav-link.active {
      color: #fff;
      background: linear-gradient(135deg, rgba(217,108,52,.2), rgba(246,201,108,.16));
      border: 1px solid rgba(246,201,108,.18);
    }
    .nav-search {
      min-width: 260px;
      position: relative;
    }
    .nav-search input {
      width: 100%;
      padding: .8rem 1rem .8rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.05);
      color: #fff;
      outline: none;
      transition: var(--ease);
    }
    .nav-search input::placeholder { color: rgba(255,255,255,.46); }
    .nav-search input:focus {
      border-color: rgba(246,201,108,.38);
      box-shadow: 0 0 0 4px rgba(217,108,52,.14);
    }
    .btn-warm {
      border: 0;
      color: #1a120f;
      font-weight: 700;
      background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
      border-radius: 999px;
      padding: .82rem 1.2rem;
      box-shadow: 0 14px 30px rgba(239,155,83,.26);
      transition: var(--ease);
    }
    .btn-warm:hover,
    .btn-warm:focus {
      color: #17120f;
      transform: translateY(-1px);
      box-shadow: 0 16px 34px rgba(239,155,83,.34);
    }
    .btn-ghost {
      color: #fff;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      border-radius: 999px;
      padding: .82rem 1.2rem;
      transition: var(--ease);
    }
    .btn-ghost:hover,
    .btn-ghost:focus {
      color: #fff;
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.2);
      transform: translateY(-1px);
    }

    .hero {
      position: relative;
      padding: 52px 0 36px;
    }
    .hero-shell {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 34px;
      background:
        radial-gradient(circle at 20% 20%, rgba(239,155,83,.16), transparent 22%),
        radial-gradient(circle at 86% 12%, rgba(246,201,108,.14), transparent 20%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
    }
    .hero-shell::before,
    .hero-shell::after {
      content: "";
      position: absolute;
      inset: auto;
      pointer-events: none;
    }
    .hero-shell::before {
      top: -150px;
      right: -80px;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(239,155,83,.18), transparent 68%);
      filter: blur(8px);
    }
    .hero-shell::after {
      left: -120px;
      bottom: -120px;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(217,108,52,.14), transparent 70%);
      filter: blur(10px);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 0;
      align-items: stretch;
    }
    .hero-copy {
      padding: clamp(32px, 4vw, 58px);
    }
    .hero-copy h1 {
      margin: 18px 0 16px;
      font-size: clamp(2.4rem, 5.2vw, 5.3rem);
      line-height: .98;
      letter-spacing: -.05em;
      text-wrap: balance;
    }
    .hero-copy .lead {
      max-width: 640px;
      color: rgba(247,242,235,.84);
      font-size: 1.06rem;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }
    .hero-search {
      margin-top: 22px;
      display: flex;
      gap: 10px;
      max-width: 560px;
    }
    .hero-search input {
      flex: 1;
      min-width: 0;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(8,10,13,.4);
      color: #fff;
      padding: .95rem 1rem;
      outline: none;
      transition: var(--ease);
    }
    .hero-search input::placeholder { color: rgba(255,255,255,.44); }
    .hero-search input:focus {
      border-color: rgba(246,201,108,.35);
      box-shadow: 0 0 0 4px rgba(217,108,52,.12);
    }
    .hero-search button {
      min-width: 132px;
    }
    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 12px;
      margin-top: 28px;
    }
    .metric {
      padding: 16px 18px;
      border-radius: 20px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      backdrop-filter: blur(8px);
    }
    .metric .value {
      display: block;
      font-size: 1.34rem;
      font-weight: 800;
      letter-spacing: -.03em;
      color: #fff;
    }
    .metric .label {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: .92rem;
    }

    .hero-visual {
      position: relative;
      min-height: 560px;
      padding: 22px;
      border-left: 1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(10,12,15,.24), rgba(10,12,15,.72)),
        radial-gradient(circle at 28% 16%, rgba(246,201,108,.18), transparent 18%),
        radial-gradient(circle at 78% 26%, rgba(217,108,52,.22), transparent 23%),
        linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
      isolation: isolate;
    }
    .video-stage {
      position: absolute;
      inset: 22px;
      border-radius: 28px;
      overflow: hidden;
      background:
        linear-gradient(130deg, rgba(10,12,15,.20), rgba(10,12,15,.72)),
        linear-gradient(145deg, #21160f 0%, #342116 26%, #14161d 58%, #0d0f13 100%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.32);
    }
    .video-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 30% 20%, rgba(246,201,108,.16), transparent 18%),
        radial-gradient(circle at 70% 35%, rgba(217,108,52,.18), transparent 20%),
        radial-gradient(circle at 50% 80%, rgba(255,255,255,.09), transparent 22%);
      mix-blend-mode: screen;
      opacity: .95;
    }
    .video-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(8,10,12,.08), rgba(8,10,12,.46));
    }
    .play-badge {
      position: absolute;
      left: 24px;
      bottom: 24px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(12,13,16,.66);
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(12px);
    }
    .play-btn {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      color: #fff;
      box-shadow: 0 12px 26px rgba(217,108,52,.34);
      font-size: 1.1rem;
    }
    .play-copy small { color: var(--muted); display:block; margin-top: 2px; }
    .floating-card {
      position: absolute;
      z-index: 2;
      padding: 16px 18px;
      border-radius: 20px;
      background: rgba(15,17,22,.74);
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow-soft);
    }
    .floating-card h3 {
      margin: 0 0 6px;
      font-size: 1rem;
      color: #fff;
    }
    .floating-card p {
      margin: 0;
      color: var(--muted);
      font-size: .9rem;
    }
    .floating-top { top: 30px; left: 30px; width: 190px; }
    .floating-mid { top: 90px; right: 28px; width: 208px; }
    .floating-bottom { top: 250px; right: 28px; width: 240px; }
    .avatar-wall {
      position: absolute;
      top: 44%;
      left: 28px;
      z-index: 2;
      width: calc(100% - 56px);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 16px;
      transform: translateY(-50%);
    }
    .stacked-avatars {
      display: inline-flex;
      align-items: center;
    }
    .avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      margin-left: -10px;
      border: 2px solid rgba(15,17,22,.92);
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, rgba(239,155,83,.9), rgba(217,108,52,.86));
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }
    .avatar:nth-child(2n) { background: linear-gradient(135deg, rgba(246,201,108,.95), rgba(239,155,83,.78)); color: #20120d; }
    .avatar:nth-child(3n) { background: linear-gradient(135deg, rgba(124,211,137,.95), rgba(239,155,83,.72)); }
    .avatar:first-child { margin-left: 0; }
    .hero-caption {
      align-self: end;
      position: relative;
      z-index: 2;
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: #fff;
    }
    .caption-card {
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(15,17,22,.68);
      border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(10px);
      min-width: 150px;
    }
    .caption-card strong {
      display: block;
      font-size: 1.03rem;
      margin-bottom: 2px;
    }
    .caption-card span { color: var(--muted); font-size: .88rem; }

    .glass-card {
      position: relative;
      height: 100%;
      padding: 22px;
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(14px);
      transition: var(--ease);
    }
    .glass-card:hover { transform: translateY(-4px); border-color: rgba(246,201,108,.18); }
    .glass-card .card-top {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 14px;
      margin-bottom: 18px;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.09);
      color: #fff;
      font-size: .82rem;
      line-height: 1;
      white-space: nowrap;
    }
    .tag.hot { background: rgba(217,108,52,.16); border-color: rgba(217,108,52,.22); color: #ffd3b8; }
    .tag.warn { background: rgba(246,201,108,.16); border-color: rgba(246,201,108,.22); color: #ffe9b5; }
    .tag.good { background: rgba(123,211,137,.14); border-color: rgba(123,211,137,.18); color: #d9ffd1; }
    .small-muted { color: var(--muted); font-size: .92rem; }
    .meta-line { color: var(--muted-2); font-size: .88rem; }

    .card-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .card-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .card-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .card-grid-mixed { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
    .mini-list {
      display: grid;
      gap: 14px;
    }
    .mini-row {
      display: flex;
      gap: 14px;
      align-items: start;
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      transition: var(--ease);
    }
    .mini-row:hover {
      transform: translateY(-2px);
      border-color: rgba(246,201,108,.18);
      background: rgba(255,255,255,.05);
    }
    .rank {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(217,108,52,.22), rgba(246,201,108,.18));
      border: 1px solid rgba(246,201,108,.18);
      color: #fff;
      font-weight: 800;
    }
    .mini-row h4,
    .news-item h4,
    .feature-card h3,
    .entry-card h3,
    .bubble h4 { margin: 0 0 8px; font-size: 1.03rem; line-height: 1.35; }
    .mini-row p,
    .feature-card p,
    .entry-card p,
    .bubble p,
    .news-item p { margin: 0; color: var(--muted); }
    .card-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      color: var(--accent-3);
      font-weight: 700;
    }
    .card-link span { transition: var(--ease); }
    .glass-card:hover .card-link span { transform: translateX(3px); }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }
    .pill {
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      color: rgba(247,242,235,.92);
      font-size: .88rem;
      transition: var(--ease);
    }
    .pill:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
    .pill.active {
      background: linear-gradient(135deg, rgba(217,108,52,.18), rgba(246,201,108,.14));
      border-color: rgba(246,201,108,.20);
      color: #fff;
    }

    .feature-card,
    .entry-card,
    .news-panel,
    .faq-panel,
    .cta-panel,
    .site-footer,
    .content-panel,
    .quote-panel {
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-xl);
      background: rgba(16,18,24,.84);
      box-shadow: var(--shadow-soft);
    }
    .feature-card,
    .entry-card,
    .news-panel,
    .quote-panel { padding: 22px; height: 100%; }
    .feature-icon,
    .entry-icon {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      margin-bottom: 16px;
      background: linear-gradient(135deg, rgba(217,108,52,.22), rgba(246,201,108,.18));
      border: 1px solid rgba(246,201,108,.16);
      color: #fff;
      font-size: 1.25rem;
    }
    .feature-list,
    .entry-list,
    .check-list {
      display: grid;
      gap: 10px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }
    .feature-list li,
    .entry-list li,
    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(247,242,235,.9);
    }
    .feature-list li::before,
    .entry-list li::before,
    .check-list li::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-top: .5rem;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
      box-shadow: 0 0 0 4px rgba(217,108,52,.14);
      flex: 0 0 auto;
    }
    .feature-list span,
    .entry-list span,
    .check-list span { color: var(--muted); }

    .news-item {
      padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .news-item:first-child { padding-top: 0; }
    .news-item:last-child { padding-bottom: 0; border-bottom: 0; }
    .news-item h4 a {
      color: #fff;
      transition: var(--ease);
    }
    .news-item h4 a:hover { color: var(--accent-3); }
    .news-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
      color: var(--muted-2);
      font-size: .88rem;
    }
    .news-right {
      display: grid;
      gap: 16px;
    }
    .recommend-card {
      padding: 18px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.08);
      transition: var(--ease);
    }
    .recommend-card:hover { transform: translateY(-3px); border-color: rgba(246,201,108,.16); }
    .recommend-card strong { display: block; margin-bottom: 8px; }
    .progress-mini {
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.07);
      overflow: hidden;
      margin-top: 12px;
    }
    .progress-mini span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), var(--accent-3));
    }

    .bubble-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .bubble {
      position: relative;
      padding: 20px;
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.08);
      transition: var(--ease);
    }
    .bubble:hover { transform: translateY(-3px); border-color: rgba(246,201,108,.18); }
    .bubble .stars {
      color: #ffd98e;
      letter-spacing: .12em;
      font-size: .9rem;
      margin-bottom: 14px;
    }
    .bubble .who {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 16px;
    }
    .bubble .who .avatar { width: 40px; height: 40px; font-size: .9rem; margin-left: 0; }
    .bubble .who strong { display: block; color: #fff; }
    .bubble .who span { display: block; color: var(--muted-2); font-size: .88rem; }
    .bubble-tag {
      position: absolute;
      top: 18px;
      right: 18px;
    }

    .compare-table {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 18px;
    }
    .compare-card {
      position: relative;
      padding: 24px;
      border-radius: 26px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }
    .compare-card.featured {
      background: linear-gradient(180deg, rgba(217,108,52,.18), rgba(255,255,255,.05));
      border-color: rgba(246,201,108,.18);
      transform: translateY(-6px);
    }
    .compare-card h3 { margin: 10px 0 10px; font-size: 1.25rem; }
    .price {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin: 16px 0 12px;
      color: #fff;
    }
    .price strong { font-size: 2rem; letter-spacing: -.04em; }
    .price span { color: var(--muted); }

    .faq-panel { padding: 12px; }
    .accordion-item {
      border: 0;
      background: transparent;
    }
    .accordion-item + .accordion-item { margin-top: 12px; }
    .accordion-button {
      border-radius: 18px !important;
      background: rgba(255,255,255,.05);
      color: #fff;
      box-shadow: none !important;
      padding: 1.05rem 1.2rem;
    }
    .accordion-button:not(.collapsed) {
      color: #fff;
      background: linear-gradient(135deg, rgba(217,108,52,.18), rgba(246,201,108,.12));
    }
    .accordion-button::after { filter: invert(1); opacity: .86; }
    .accordion-body {
      color: var(--muted);
      background: rgba(255,255,255,.03);
      border-radius: 0 0 18px 18px;
      margin-top: -2px;
    }

    .cta-panel {
      padding: 28px;
      background:
        radial-gradient(circle at 18% 18%, rgba(246,201,108,.14), transparent 20%),
        radial-gradient(circle at 82% 24%, rgba(217,108,52,.18), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    }
    .cta-panel h2 {
      margin: 0 0 12px;
      font-size: clamp(1.8rem, 3vw, 2.8rem);
      line-height: 1.1;
    }
    .cta-panel p { margin: 0; color: rgba(247,242,235,.84); max-width: 760px; }
    .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

    .site-footer {
      padding: 34px 0 22px;
      margin-top: 30px;
      background: rgba(12,14,18,.95);
      border-top-left-radius: 36px;
      border-top-right-radius: 36px;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 1.2fr .8fr .9fr;
      gap: 20px;
      padding-bottom: 22px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .footer-title {
      color: #fff;
      font-weight: 800;
      margin-bottom: 14px;
    }
    .footer-links {
      display: grid;
      gap: 10px;
    }
    .footer-links a {
      color: var(--muted);
      transition: var(--ease);
    }
    .footer-links a:hover { color: #fff; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      padding-top: 18px;
      color: var(--muted-2);
      font-size: .92rem;
    }
    .footer-note a { color: #fff; }

    .floating-bar {
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      width: min(1100px, calc(100% - 24px));
      z-index: 1040;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(12,14,18,.82);
      backdrop-filter: blur(16px);
      box-shadow: 0 18px 40px rgba(0,0,0,.32);
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .floating-bar strong { display: block; color: #fff; }
    .floating-bar span { color: var(--muted); font-size: .9rem; }
    .floating-bar .actions { display: flex; gap: 10px; flex-wrap: wrap; }

    .focus-ring:focus-visible,
    .btn:focus-visible,
    .nav-link:focus-visible,
    .accordion-button:focus-visible,
    input:focus-visible,
    a:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 4px rgba(217,108,52,.24);
    }

    @media (max-width: 1199.98px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-visual { min-height: 520px; border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
      .card-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .bubble-grid, .compare-table, .footer-top { grid-template-columns: 1fr; }
      .card-grid-mixed { grid-template-columns: 1fr; }
    }

    @media (max-width: 991.98px) {
      body { padding-top: 74px; }
      .section-pad { padding: 72px 0; }
      .nav-search { min-width: 100%; margin-top: 12px; }
      .navbar-nav { gap: 6px; padding-top: 12px; }
      .hero-copy h1 { max-width: 100%; }
      .hero-metrics { grid-template-columns: 1fr; }
      .hero-search { flex-direction: column; }
      .hero-search button { width: 100%; }
      .avatar-wall { top: auto; bottom: 102px; transform: none; align-items: flex-end; }
      .hero-caption { position: absolute; left: 22px; right: 22px; bottom: 22px; }
    }

    @media (max-width: 767.98px) {
      .section-pad { padding: 60px 0; }
      .hero { padding-top: 24px; }
      .hero-shell { border-radius: 28px; }
      .hero-copy { padding: 24px; }
      .hero-copy h1 { font-size: clamp(2rem, 11vw, 3.6rem); }
      .hero-visual { min-height: 430px; padding: 14px; }
      .video-stage { inset: 14px; }
      .floating-top { top: 20px; left: 16px; width: 164px; }
      .floating-mid { top: 78px; right: 16px; width: 182px; }
      .floating-bottom { top: 210px; right: 16px; width: 192px; }
      .avatar-wall { left: 18px; width: calc(100% - 36px); bottom: 88px; }
      .hero-caption { left: 16px; right: 16px; bottom: 16px; gap: 10px; }
      .caption-card { min-width: 0; flex: 1; }
      .card-grid-2, .card-grid-3, .card-grid-4 { grid-template-columns: 1fr; }
      .floating-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
      }
      .floating-bar .actions .btn { flex: 1 1 48%; }
    }

    @media (max-width: 575.98px) {
      .container-wide { width: min(100% - 20px, var(--container)); }
      .navbar .nav-link { padding: .64rem .86rem !important; }
      .hero-actions .btn { width: 100%; }
      .hero-metrics .metric { padding: 14px; }
      .hero-search input { padding: .88rem .92rem; }
      .footer-bottom { flex-direction: column; }
      .floating-bar { bottom: 10px; width: calc(100% - 16px); }
    }

/* roulang page: category2 */
:root{
      --bg:#fff8ef;
      --bg-soft:#fff3e2;
      --panel:#ffffff;
      --panel-dark:#1d1a18;
      --panel-warm:#2a211b;
      --text:#211b16;
      --muted:#76685c;
      --muted-2:#a99a8a;
      --line:rgba(54,40,28,.12);
      --line-dark:rgba(255,236,208,.16);
      --primary:#ff7a2f;
      --primary-2:#ffb84d;
      --accent:#ff4d5e;
      --gold:#ffc86b;
      --cream:#fffaf2;
      --radius-sm:12px;
      --radius:22px;
      --radius-lg:34px;
      --shadow-sm:0 10px 28px rgba(77,47,21,.08);
      --shadow:0 22px 60px rgba(77,47,21,.14);
      --shadow-strong:0 28px 80px rgba(34,22,14,.24);
      --nav-h:76px;
      --container:1180px;
      --ease:all .25s ease;
    }
    *{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",Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 8% 10%, rgba(255,184,77,.24), transparent 30%),
        radial-gradient(circle at 85% 18%, rgba(255,77,94,.13), transparent 28%),
        linear-gradient(180deg,#fff9f0 0%,#fff5e8 45%,#fffaf4 100%);
      line-height:1.72;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease);}
    a:hover{color:var(--primary);}
    img{max-width:100%;display:block;}
    button,input{font:inherit;}
    input:focus,button:focus,a:focus{outline:3px solid rgba(255,122,47,.28);outline-offset:3px;}
    .container-wide{width:min(var(--container),calc(100% - 40px));margin-inline:auto;}
    .section{padding:86px 0;position:relative;}
    .section-tight{padding:58px 0;}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,122,47,.12);color:#a64610;font-size:13px;font-weight:800;letter-spacing:.04em;}
    .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px rgba(255,122,47,.13);}
    .section-title{font-size:clamp(28px,3vw,44px);line-height:1.16;font-weight:950;letter-spacing:-.04em;margin:14px 0 14px;}
    .section-desc{color:var(--muted);font-size:17px;max-width:760px;margin:0;}
    .small-muted{color:var(--muted-2);font-size:14px;line-height:1.7;}
    .navbar-glass{
      min-height:var(--nav-h);
      padding:13px 0;
      background:rgba(29,26,24,.86);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(255,236,208,.14);
      box-shadow:0 14px 36px rgba(22,15,10,.18);
    }
    .navbar-brand{display:inline-flex;align-items:center;gap:10px;color:#fff!important;font-weight:950;letter-spacing:-.03em;font-size:19px;white-space:normal;line-height:1.2;}
    .brand-mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--gold));color:#1e130b;font-weight:1000;box-shadow:0 10px 24px rgba(255,122,47,.35);flex:0 0 auto;}
    .navbar-toggler{background:rgba(255,255,255,.08);border-radius:14px;padding:9px 11px;}
    .navbar-toggler-icon{filter:invert(1) sepia(1) saturate(0);}
    .nav-link{color:rgba(255,250,242,.76)!important;font-weight:800;font-size:15px;padding:10px 14px!important;border-radius:999px;}
    .nav-link:hover,.nav-link.active{color:#20140b!important;background:linear-gradient(135deg,var(--gold),#fff1c6);box-shadow:0 10px 24px rgba(255,184,77,.22);}
    .nav-search input{width:230px;border:1px solid rgba(255,236,208,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:10px 16px;transition:var(--ease);}
    .nav-search input::placeholder{color:rgba(255,250,242,.58);}
    .nav-search input:focus{width:270px;background:rgba(255,255,255,.12);border-color:rgba(255,184,77,.55);}
    .btn{border:0;border-radius:999px;padding:11px 18px;font-weight:900;letter-spacing:-.01em;transition:var(--ease);}
    .btn:hover{transform:translateY(-2px);}
    .btn-warm{background:linear-gradient(135deg,var(--primary),var(--gold));color:#24150b!important;box-shadow:0 14px 34px rgba(255,122,47,.33);}
    .btn-warm:hover{box-shadow:0 18px 42px rgba(255,122,47,.42);}
    .btn-ghost{background:rgba(255,255,255,.08);color:#fff!important;border:1px solid rgba(255,236,208,.2);}
    .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,184,77,.42);}
    .btn-soft{background:#fff;color:#8f390d!important;border:1px solid rgba(255,122,47,.18);box-shadow:var(--shadow-sm);}
    .btn-soft:hover{background:#fff7ec;color:#602106!important;}
    .page-hero{padding:128px 0 62px;background:linear-gradient(135deg,#211811 0%,#332016 48%,#5a2916 100%);color:#fff;overflow:hidden;position:relative;}
    .page-hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,184,77,.34),transparent 62%);filter:blur(4px);}
    .page-hero::after{content:"口碑高分";position:absolute;right:7%;top:118px;transform:rotate(9deg);padding:12px 18px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--primary));color:#fff;font-weight:1000;box-shadow:0 18px 45px rgba(255,77,94,.28);}
    .breadcrumb-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:rgba(255,250,242,.68);font-size:14px;margin-bottom:28px;}
    .breadcrumb-line a{color:rgba(255,250,242,.82);font-weight:800;}
    .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;position:relative;z-index:1;}
    h1{font-size:clamp(38px,5vw,68px);line-height:1.02;font-weight:1000;letter-spacing:-.06em;margin:16px 0 20px;max-width:760px;}
    .hero-lead{font-size:18px;color:rgba(255,250,242,.78);max-width:680px;margin:0 0 28px;}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;}
    .trust-row{display:flex;flex-wrap:wrap;gap:10px;}
    .trust-chip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,236,208,.14);color:rgba(255,250,242,.82);font-size:13px;font-weight:800;}
    .promo-board{border:1px solid rgba(255,236,208,.16);background:rgba(255,250,242,.08);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-strong);backdrop-filter:blur(12px);}
    .score-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;}
    .score-badge{width:98px;height:98px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--primary));color:#21140a;box-shadow:0 16px 40px rgba(255,122,47,.35);}
    .score-badge strong{font-size:34px;line-height:1;font-weight:1000;}
    .score-badge span{display:block;font-size:12px;font-weight:900;text-align:center;}
    .burst{display:inline-flex;align-items:center;justify-content:center;min-width:118px;min-height:72px;padding:12px;text-align:center;border-radius:28px 12px 28px 12px;background:#fff;color:#a43b09;font-weight:1000;transform:rotate(-5deg);box-shadow:0 18px 42px rgba(0,0,0,.24);}
    .metric-list{display:grid;gap:12px;}
    .metric-item{display:grid;grid-template-columns:92px 1fr auto;gap:12px;align-items:center;padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,236,208,.12);}
    .metric-item span{color:rgba(255,250,242,.68);font-size:13px;font-weight:800;}
    .bar{height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;}
    .bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--gold));}
    .metric-item b{font-size:13px;color:#ffe1a6;}
    .filter-panel{margin-top:-28px;position:relative;z-index:3;}
    .filter-box{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:18px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;}
    .filter-tags{display:flex;gap:10px;flex-wrap:wrap;}
    .tag{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#fff7ec;border:1px solid rgba(255,122,47,.16);color:#8d3a11;font-weight:850;font-size:13px;}
    .tag.dark{background:rgba(29,26,24,.92);color:#fff;border-color:rgba(255,236,208,.16);}
    .tag .dot{width:7px;height:7px;border-radius:50%;background:var(--primary);}
    .overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px;}
    .overview-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow-sm);}
    .overview-card b{display:block;font-size:28px;line-height:1;color:#2b1d14;font-weight:1000;margin-bottom:8px;}
    .overview-card span{color:var(--muted);font-weight:750;font-size:14px;}
    .content-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start;}
    .rank-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
    .rank-card{position:relative;min-height:260px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);overflow:hidden;transition:var(--ease);}
    .rank-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(255,122,47,.24);}
    .rank-card.featured{grid-column:span 2;background:linear-gradient(135deg,#fff 0%,#fff2df 100%);display:grid;grid-template-columns:1fr .75fr;gap:20px;}
    .rank-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:18px;}
    .rank-no{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--gold));color:#28170b;font-weight:1000;}
    .status{padding:7px 10px;border-radius:999px;background:rgba(255,77,94,.1);color:#b92e3d;font-size:12px;font-weight:950;}
    .rank-card h3{font-size:22px;font-weight:950;letter-spacing:-.03em;margin:0 0 10px;}
    .rank-card p{color:var(--muted);margin:0 0 18px;}
    .card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
    .action-line{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:14px;}
    .stars{color:#f4a01f;font-weight:1000;letter-spacing:.05em;white-space:nowrap;}
    .mini-visual{border-radius:24px;background:linear-gradient(145deg,#241812,#6b3016);padding:18px;color:#fff;min-height:100%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
    .bubble{background:rgba(255,255,255,.12);border:1px solid rgba(255,236,208,.14);border-radius:22px;padding:14px;margin-bottom:12px;}
    .bubble small{color:#ffd99b;font-weight:850;}
    .avatar-wall{display:flex;align-items:center;margin-top:12px;}
    .avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--accent));border:2px solid #fff;color:#30190c;font-size:13px;font-weight:1000;margin-left:-8px;box-shadow:0 6px 18px rgba(0,0,0,.18);}
    .avatar:first-child{margin-left:0;}
    .sidebar{position:sticky;top:96px;display:grid;gap:18px;}
    .side-card{background:var(--panel-dark);color:#fff;border-radius:var(--radius);padding:20px;border:1px solid var(--line-dark);box-shadow:var(--shadow-strong);}
    .side-card.light{background:#fff;color:var(--text);border-color:var(--line);box-shadow:var(--shadow-sm);}
    .side-title{font-weight:1000;font-size:18px;margin-bottom:14px;letter-spacing:-.02em;}
    .hot-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,236,208,.12);}
    .hot-row:last-child{border-bottom:0;}
    .hot-row span{color:rgba(255,250,242,.72);font-size:13px;}
    .hot-row b{color:#ffe1a6;}
    .check-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
    .check-list li{display:flex;gap:10px;color:var(--muted);font-weight:700;}
    .check-list li::before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,122,47,.13);color:var(--primary);font-weight:1000;flex:0 0 auto;margin-top:2px;}
    .compare-wrap{background:var(--panel-warm);color:#fff;border-radius:var(--radius-lg);padding:32px;border:1px solid var(--line-dark);box-shadow:var(--shadow-strong);}
    .compare-grid{display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:12px;margin-top:26px;}
    .compare-cell{padding:16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,236,208,.12);min-height:76px;}
    .compare-cell.head{background:linear-gradient(135deg,var(--primary),var(--gold));color:#25150a;font-weight:1000;}
    .compare-cell strong{display:block;font-weight:950;margin-bottom:4px;}
    .compare-cell span{color:rgba(255,250,242,.68);font-size:13px;}
    .scenario-band{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:center;}
    .steps{display:grid;gap:14px;}
    .step{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start;padding:18px;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);}
    .step-num{width:48px;height:48px;border-radius:18px;background:#1d1a18;color:#ffd37a;display:grid;place-items:center;font-weight:1000;}
    .step h3{font-size:18px;font-weight:950;margin:0 0 4px;}
    .step p{margin:0;color:var(--muted);}
    .quote-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
    .quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);transition:var(--ease);}
    .quote-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
    .quote-card .stars{margin-bottom:10px;}
    .quote-card p{margin:0 0 16px;color:#4b3b31;font-weight:750;}
    .user-line{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:850;}
    .user-line .avatar{margin-left:0;width:34px;height:34px;border:0;}
    .entry-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
    .entry-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
    .entry-card::after{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;border-radius:50%;background:rgba(255,122,47,.12);}
    .entry-card h3{font-size:24px;font-weight:1000;margin:12px 0 10px;}
    .entry-card p{color:var(--muted);margin:0 0 18px;}
    .accordion{display:grid;gap:12px;}
    .accordion-item{border:1px solid var(--line)!important;border-radius:20px!important;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);}
    .accordion-button{font-weight:950;color:var(--text);padding:18px 20px;background:#fff!important;box-shadow:none!important;}
    .accordion-button:not(.collapsed){color:#8f390d;background:#fff6eb!important;}
    .accordion-body{color:var(--muted);padding:0 20px 20px;}
    .cta-block{background:linear-gradient(135deg,#231912,#4c2415 62%,#ff7a2f 160%);color:#fff;border-radius:var(--radius-lg);padding:38px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;box-shadow:var(--shadow-strong);overflow:hidden;position:relative;}
    .cta-block::before{content:"";position:absolute;right:22%;top:-120px;width:260px;height:260px;border-radius:50%;background:rgba(255,184,77,.16);}
    .cta-block h2{font-size:clamp(28px,3vw,44px);font-weight:1000;letter-spacing:-.04em;margin:0 0 10px;position:relative;}
    .cta-block p{color:rgba(255,250,242,.72);margin:0;position:relative;}
    .site-footer{background:#171412;color:#fff;padding:54px 0 24px;border-top:1px solid rgba(255,236,208,.12);}
    .footer-top{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:32px;padding-bottom:30px;border-bottom:1px solid rgba(255,236,208,.12);}
    .footer-title{font-size:15px;font-weight:950;margin-bottom:14px;color:#ffe1a6;}
    .footer-links{display:grid;gap:10px;}
    .footer-links a{color:rgba(255,250,242,.72);font-weight:750;}
    .footer-links a:hover{color:var(--gold);transform:translateX(2px);}
    .footer-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:20px;color:rgba(255,250,242,.54);font-size:13px;}
    .footer-note a{color:#ffd37a;}
    @media (max-width:1024px){
      .hero-grid,.content-layout,.scenario-band{grid-template-columns:1fr;}
      .sidebar{position:static;grid-template-columns:1fr 1fr;}
      .overview-grid{grid-template-columns:repeat(2,1fr);}
      .rank-card.featured{grid-template-columns:1fr;}
      .compare-grid{grid-template-columns:1fr 1fr;}
      .quote-wall{grid-template-columns:1fr 1fr;}
      .footer-top{grid-template-columns:1fr 1fr;}
    }
    @media (max-width:768px){
      :root{--nav-h:68px;}
      .container-wide{width:min(100% - 28px,var(--container));}
      .navbar-glass{padding:10px 0;}
      .navbar-collapse{background:rgba(29,26,24,.96);border:1px solid rgba(255,236,208,.12);border-radius:22px;margin-top:12px;padding:14px;}
      .nav-search{display:block;margin:10px 0;}
      .nav-search input,.nav-search input:focus{width:100%;}
      .page-hero{padding-top:108px;}
      .page-hero::after{right:18px;top:92px;font-size:13px;padding:9px 12px;}
      .filter-box{grid-template-columns:1fr;}
      .rank-grid,.rank-card.featured,.entry-cards,.sidebar,.quote-wall,.footer-top{grid-template-columns:1fr;}
      .rank-card.featured{grid-column:auto;}
      .compare-grid{grid-template-columns:1fr;}
      .cta-block{grid-template-columns:1fr;padding:28px;}
      .section{padding:64px 0;}
      .footer-bottom{display:grid;}
    }
    @media (max-width:520px){
      h1{font-size:38px;}
      .hero-actions .btn,.cta-block .btn,.filter-box .btn{width:100%;justify-content:center;display:inline-flex;}
      .overview-grid{grid-template-columns:1fr;}
      .metric-item{grid-template-columns:78px 1fr;}
      .metric-item b{grid-column:2;}
      .score-top{align-items:flex-start;}
      .score-badge{width:86px;height:86px;border-radius:24px;}
      .burst{min-width:96px;min-height:62px;font-size:13px;}
      .brand-mark{width:34px;height:34px;border-radius:12px;}
      .navbar-brand{font-size:16px;max-width:245px;}
    }

/* roulang page: category1 */
:root{
      --bg:#0b0c10;
      --bg-soft:#11131a;
      --surface:#151823;
      --surface-2:#1b2030;
      --surface-3:#21283a;
      --text:#f7f4ee;
      --muted:#b9bcc8;
      --muted-2:#8f95a8;
      --line:rgba(255,255,255,.08);
      --line-2:rgba(255,255,255,.12);
      --brand:#f59e0b;
      --brand-2:#fb7185;
      --brand-3:#f97316;
      --accent:#ffd56a;
      --success:#34d399;
      --shadow:0 18px 50px rgba(0,0,0,.34);
      --shadow-soft:0 10px 30px rgba(0,0,0,.22);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --container:1240px;
      --transition:all .25s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(245,158,11,.18), transparent 26%),
        radial-gradient(circle at top right, rgba(251,113,133,.12), transparent 24%),
        radial-gradient(circle at 30% 20%, rgba(255,213,106,.07), transparent 18%),
        linear-gradient(180deg, #0d1016 0%, #0b0c10 42%, #0a0b0f 100%);
      color:var(--text);
      line-height:1.7;
      overflow-x:hidden;
      padding-top:84px;
    }
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    a:hover{color:var(--accent)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(245,158,11,.24);color:#fff}

    .container-wide{
      width:min(var(--container), calc(100% - 2rem));
      margin-inline:auto;
    }

    .navbar-glass{
      background:rgba(10,11,15,.72);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      border-bottom:1px solid var(--line);
      box-shadow:0 10px 30px rgba(0,0,0,.12);
      transition:var(--transition);
    }
    .navbar-glass.is-scrolled{
      background:rgba(9,10,14,.92);
      box-shadow:0 14px 34px rgba(0,0,0,.28);
    }
    .navbar{
      padding:.85rem 0;
    }
    .navbar-brand{
      display:inline-flex;
      align-items:center;
      gap:.72rem;
      font-weight:800;
      letter-spacing:.2px;
      color:#fff !important;
      white-space:nowrap;
    }
    .brand-mark{
      width:40px;
      height:40px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg, rgba(245,158,11,1), rgba(249,115,22,1));
      color:#fff;
      font-weight:900;
      box-shadow:0 10px 22px rgba(245,158,11,.28);
      flex:0 0 auto;
    }
    .navbar-nav{
      gap:.35rem;
    }
    .navbar .nav-link{
      color:var(--muted);
      font-weight:600;
      padding:.68rem 1rem;
      border-radius:999px;
      transition:var(--transition);
    }
    .navbar .nav-link:hover,
    .navbar .nav-link:focus{
      color:#fff;
      background:rgba(255,255,255,.06);
    }
    .navbar .nav-link.active,
    .navbar .nav-link[aria-current="page"]{
      color:#140d03;
      background:linear-gradient(145deg, rgba(255,213,106,1), rgba(245,158,11,1));
      box-shadow:0 10px 26px rgba(245,158,11,.22);
    }
    .navbar-toggler{
      border:0;
      box-shadow:none !important;
      color:#fff;
      padding:.45rem .6rem;
      border-radius:12px;
      background:rgba(255,255,255,.06);
    }
    .navbar-toggler:focus{
      box-shadow:0 0 0 .2rem rgba(245,158,11,.2) !important;
    }
    .navbar-toggler-icon{
      filter:invert(1);
    }
    .nav-search{
      min-width:260px;
      max-width:340px;
    }
    .nav-search input{
      width:100%;
      border:1px solid var(--line);
      background:rgba(255,255,255,.04);
      color:var(--text);
      border-radius:999px;
      padding:.78rem 1rem;
      outline:none;
      transition:var(--transition);
    }
    .nav-search input::placeholder{color:var(--muted-2)}
    .nav-search input:focus{
      border-color:rgba(245,158,11,.45);
      background:rgba(255,255,255,.06);
      box-shadow:0 0 0 .2rem rgba(245,158,11,.12);
    }

    .btn{
      border-radius:999px;
      padding:.82rem 1.2rem;
      font-weight:700;
      border:1px solid transparent;
      transition:var(--transition);
    }
    .btn:focus{
      box-shadow:0 0 0 .2rem rgba(245,158,11,.22);
    }
    .btn-warm{
      color:#170e02;
      background:linear-gradient(145deg, #ffd66d, #f59e0b 45%, #f97316 100%);
      border-color:rgba(255,255,255,.04);
      box-shadow:0 14px 30px rgba(245,158,11,.22);
    }
    .btn-warm:hover{
      transform:translateY(-1px);
      color:#170e02;
      box-shadow:0 18px 34px rgba(245,158,11,.3);
    }
    .btn-ghost{
      color:var(--text);
      background:rgba(255,255,255,.03);
      border-color:var(--line-2);
    }
    .btn-ghost:hover{
      color:#fff;
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.18);
      transform:translateY(-1px);
    }
    .btn-soft{
      color:var(--text);
      background:rgba(245,158,11,.12);
      border-color:rgba(245,158,11,.22);
    }
    .btn-soft:hover{
      background:rgba(245,158,11,.18);
      color:#fff;
      transform:translateY(-1px);
    }

    .page-shell{
      position:relative;
      isolation:isolate;
    }
    .page-shell::before,
    .page-shell::after{
      content:"";
      position:fixed;
      inset:auto;
      pointer-events:none;
      z-index:-1;
      filter:blur(20px);
      opacity:.55;
    }
    .page-shell::before{
      width:260px;height:260px;
      left:-90px;top:120px;
      background:radial-gradient(circle, rgba(245,158,11,.22), transparent 66%);
    }
    .page-shell::after{
      width:280px;height:280px;
      right:-110px;top:260px;
      background:radial-gradient(circle, rgba(251,113,133,.16), transparent 68%);
    }

    .hero-wrap{
      padding:1.4rem 0 2rem;
    }
    .breadcrumb-wrap{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:.55rem;
      color:var(--muted-2);
      font-size:.95rem;
      margin-bottom:1rem;
    }
    .breadcrumb-wrap a{
      color:var(--muted);
    }
    .breadcrumb-wrap a:hover{color:var(--accent)}
    .crumb-dot{
      width:5px;height:5px;border-radius:50%;
      background:rgba(255,255,255,.18);
    }

    .hero-card{
      position:relative;
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(245,158,11,.12), transparent 35%),
        radial-gradient(circle at 70% 15%, rgba(255,213,106,.12), transparent 20%);
      pointer-events:none;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.2fr .92fr;
      gap:1.2rem;
      padding:1.35rem;
      position:relative;
      z-index:1;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.42rem .85rem;
      border-radius:999px;
      background:rgba(245,158,11,.14);
      color:#ffd879;
      border:1px solid rgba(245,158,11,.22);
      font-weight:700;
      letter-spacing:.2px;
      margin-bottom:1rem;
    }
    .eyebrow::before{
      content:"";
      width:8px;height:8px;border-radius:999px;
      background:linear-gradient(145deg, #ffd66d, #f97316);
      box-shadow:0 0 0 .35rem rgba(245,158,11,.12);
    }
    .hero-title{
      font-size:clamp(2rem, 4vw, 4.25rem);
      line-height:1.06;
      font-weight:900;
      letter-spacing:-.03em;
      margin:0 0 1rem;
    }
    .hero-subtitle{
      max-width:46rem;
      color:var(--muted);
      font-size:1.05rem;
      margin-bottom:1.35rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-bottom:1.3rem;
    }
    .trust-row{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      margin-top:.4rem;
    }
    .trust-pill{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.58rem .78rem;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:#eef0f6;
      font-size:.92rem;
    }
    .trust-pill .dot{
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(145deg, #ffd66d, #f97316);
      box-shadow:0 0 0 .25rem rgba(245,158,11,.12);
    }

    .visual-stack{
      display:flex;
      flex-direction:column;
      gap:1rem;
      height:100%;
    }
    .feature-card{
      background:linear-gradient(180deg, rgba(27,32,48,.96), rgba(21,24,35,.98));
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      padding:1rem;
      box-shadow:var(--shadow-soft);
      height:100%;
    }
    .feature-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .feature-top h2,
    .feature-top h3{
      font-size:1.08rem;
      margin:0;
      font-weight:800;
    }
    .rating-pill{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.38rem .68rem;
      border-radius:999px;
      background:rgba(52,211,153,.12);
      color:#9ef0cb;
      border:1px solid rgba(52,211,153,.22);
      font-size:.88rem;
      font-weight:700;
      white-space:nowrap;
    }
    .feature-card .small-muted,
    .small-muted{
      color:var(--muted-2);
      font-size:.92rem;
    }
    .mini-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:.65rem;
    }
    .mini-stat{
      background:rgba(255,255,255,.03);
      border:1px solid var(--line);
      border-radius:18px;
      padding:.8rem .75rem;
    }
    .mini-stat strong{
      display:block;
      font-size:1.15rem;
      line-height:1.1;
    }
    .mini-stat span{
      display:block;
      color:var(--muted-2);
      font-size:.84rem;
      margin-top:.25rem;
    }

    .avatar-wall{
      display:flex;
      align-items:center;
      gap:.55rem;
      flex-wrap:wrap;
      margin-top:.9rem;
    }
    .avatar-stack{
      display:flex;
      align-items:center;
      margin-right:.25rem;
    }
    .avatar{
      width:42px;
      height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#121212;
      font-weight:800;
      margin-left:-10px;
      border:2px solid rgba(20,20,20,.85);
      background:linear-gradient(145deg, #ffd66d, #f97316);
      box-shadow:0 8px 18px rgba(0,0,0,.18);
    }
    .avatar:nth-child(2){background:linear-gradient(145deg, #f9a8d4, #fb7185)}
    .avatar:nth-child(3){background:linear-gradient(145deg, #a7f3d0, #34d399)}
    .avatar:nth-child(4){background:linear-gradient(145deg, #fde68a, #f59e0b)}
    .avatar:nth-child(5){background:linear-gradient(145deg, #c4b5fd, #f472b6)}
    .avatar:first-child{margin-left:0}
    .avatar-caption{
      color:var(--muted);
      font-size:.92rem;
    }

    .bubble-wrap{
      display:grid;
      gap:.7rem;
    }
    .bubble{
      background:rgba(255,255,255,.045);
      border:1px solid var(--line);
      border-radius:20px;
      padding:.9rem .95rem;
      position:relative;
      box-shadow:0 10px 26px rgba(0,0,0,.12);
    }
    .bubble::before{
      content:"";
      position:absolute;
      left:18px;
      top:-7px;
      width:12px;height:12px;
      background:inherit;
      border-left:1px solid var(--line);
      border-top:1px solid var(--line);
      transform:rotate(45deg);
      border-radius:2px;
    }
    .bubble .line-1{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      margin-bottom:.35rem;
    }
    .bubble .name{
      font-weight:800;
      color:#fff;
    }
    .bubble .tag{
      color:#ffd879;
      font-size:.82rem;
      font-weight:700;
      white-space:nowrap;
    }
    .bubble p{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
    }

    .section{
      padding:1.1rem 0 1.6rem;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .section-head h2{
      margin:0;
      font-size:clamp(1.4rem, 2.2vw, 2.1rem);
      font-weight:900;
      letter-spacing:-.02em;
    }
    .section-head p{
      margin:0;
      color:var(--muted-2);
      max-width:42rem;
      font-size:.98rem;
    }

    .filter-bar{
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      border-radius:22px;
      padding:.85rem;
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
      box-shadow:var(--shadow-soft);
    }
    .filter-chip{
      border:1px solid var(--line-2);
      background:rgba(255,255,255,.03);
      color:var(--text);
      border-radius:999px;
      padding:.64rem .95rem;
      font-weight:700;
      font-size:.92rem;
      transition:var(--transition);
    }
    .filter-chip:hover{
      transform:translateY(-1px);
      background:rgba(245,158,11,.11);
      border-color:rgba(245,158,11,.25);
      color:#fff;
    }
    .filter-chip.active{
      color:#170e02;
      background:linear-gradient(145deg, #ffd66d, #f59e0b);
      border-color:transparent;
      box-shadow:0 10px 24px rgba(245,158,11,.2);
    }

    .overview-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:.9rem;
      margin-top:1rem;
    }
    .overview-card{
      background:linear-gradient(180deg, rgba(27,32,48,.94), rgba(21,24,35,.96));
      border:1px solid var(--line);
      border-radius:22px;
      padding:1rem;
      box-shadow:var(--shadow-soft);
    }
    .overview-card .metric{
      font-size:1.7rem;
      line-height:1;
      font-weight:900;
      margin-bottom:.35rem;
      color:#fff;
    }
    .overview-card .label{
      color:var(--muted);
      margin-bottom:.35rem;
      font-weight:700;
    }
    .overview-card .desc{
      margin:0;
      color:var(--muted-2);
      font-size:.92rem;
    }

    .main-grid{
      display:grid;
      grid-template-columns:1.65fr .92fr;
      gap:1.15rem;
      align-items:start;
    }

    .card-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:1rem;
    }
    .content-card{
      position:relative;
      background:linear-gradient(180deg, rgba(27,32,48,.95), rgba(21,24,35,.98));
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      padding:1rem;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      transition:var(--transition);
      height:100%;
    }
    .content-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, rgba(245,158,11,.08), transparent 40%);
      opacity:0;
      transition:var(--transition);
      pointer-events:none;
    }
    .content-card:hover{
      transform:translateY(-4px);
      border-color:rgba(245,158,11,.24);
      box-shadow:0 18px 34px rgba(0,0,0,.32);
    }
    .content-card:hover::before{opacity:1}
    .card-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:.85rem;
    }
    .card-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.34rem .65rem;
      border-radius:999px;
      background:rgba(245,158,11,.14);
      border:1px solid rgba(245,158,11,.22);
      color:#ffd879;
      font-size:.8rem;
      font-weight:800;
      white-space:nowrap;
    }
    .content-card h3{
      margin:0 0 .55rem;
      font-size:1.16rem;
      font-weight:850;
      letter-spacing:-.01em;
    }
    .content-card p{
      margin:0 0 .9rem;
      color:var(--muted);
      font-size:.95rem;
    }
    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:.42rem;
      margin-bottom:1rem;
    }
    .tag{
      padding:.3rem .6rem;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      color:#eff1f7;
      font-size:.8rem;
    }
    .card-bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      margin-top:auto;
    }
    .meta-line{
      color:var(--muted-2);
      font-size:.86rem;
    }

    .side-panel{
      position:sticky;
      top:92px;
      display:grid;
      gap:1rem;
    }
    .panel-card{
      background:linear-gradient(180deg, rgba(27,32,48,.95), rgba(21,24,35,.98));
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      padding:1rem;
      box-shadow:var(--shadow-soft);
    }
    .panel-card h3{
      font-size:1.05rem;
      margin:0 0 .9rem;
      font-weight:850;
    }
    .rank-list{
      display:grid;
      gap:.75rem;
    }
    .rank-item{
      display:flex;
      align-items:flex-start;
      gap:.75rem;
      padding:.75rem;
      border-radius:18px;
      background:rgba(255,255,255,.03);
      border:1px solid var(--line);
    }
    .rank-num{
      width:30px;
      height:30px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(245,158,11,.16);
      color:#ffd879;
      font-weight:900;
      flex:0 0 auto;
    }
    .rank-content strong{
      display:block;
      margin-bottom:.18rem;
    }
    .rank-content span{
      color:var(--muted-2);
      font-size:.9rem;
    }
    .shortcut-list{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .shortcut-list .filter-chip{
      padding:.52rem .82rem;
      font-size:.88rem;
    }

    .social-section{
      padding:1.2rem 0 1.6rem;
    }
    .social-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1rem;
      align-items:stretch;
    }
    .social-card{
      background:linear-gradient(180deg, rgba(27,32,48,.96), rgba(21,24,35,.98));
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      padding:1rem;
      box-shadow:var(--shadow-soft);
    }
    .social-card h3{
      margin:0 0 .6rem;
      font-size:1.08rem;
      font-weight:850;
    }
    .quote-grid{
      display:grid;
      gap:.75rem;
    }
    .quote-row{
      display:flex;
      align-items:flex-start;
      gap:.75rem;
    }
    .quote-avatar{
      width:38px;
      height:38px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg, #ffd66d, #f97316);
      color:#16110a;
      font-weight:900;
      flex:0 0 auto;
      box-shadow:0 10px 20px rgba(245,158,11,.22);
    }
    .quote-bubble{
      flex:1;
      background:rgba(255,255,255,.04);
      border:1px solid var(--line);
      border-radius:18px;
      padding:.78rem .9rem;
    }
    .quote-bubble strong{
      display:block;
      margin-bottom:.12rem;
    }
    .quote-bubble p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .avatar-panel{
      display:flex;
      flex-direction:column;
      gap:1rem;
      justify-content:space-between;
    }
    .avatar-panel .mini-grid{
      grid-template-columns:repeat(3,1fr);
    }
    .pill-list{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
    }
    .pill-list .tag{
      background:rgba(245,158,11,.1);
      border-color:rgba(245,158,11,.18);
      color:#ffd879;
    }

    .tier-section{
      padding:1.2rem 0 1.6rem;
    }
    .tier-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1rem;
    }
    .tier-card{
      position:relative;
      background:linear-gradient(180deg, rgba(27,32,48,.95), rgba(21,24,35,.98));
      border:1px solid var(--line);
      border-radius:24px;
      padding:1.1rem;
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .tier-card.featured{
      border-color:rgba(245,158,11,.34);
      box-shadow:0 18px 42px rgba(245,158,11,.12);
      transform:translateY(-2px);
    }
    .tier-card.featured::after{
      content:"推荐";
      position:absolute;
      right:0;
      top:0;
      background:linear-gradient(145deg, #ffd66d, #f59e0b);
      color:#170e02;
      font-weight:900;
      font-size:.8rem;
      padding:.45rem .78rem;
      border-bottom-left-radius:14px;
    }
    .tier-card h3{
      margin:0 0 .45rem;
      font-size:1.14rem;
      font-weight:850;
    }
    .tier-card .price-like{
      font-size:1.8rem;
      font-weight:900;
      line-height:1;
      margin:.25rem 0 .75rem;
      color:#fff;
    }
    .tier-card ul{
      list-style:none;
      padding:0;
      margin:0 0 1rem;
      display:grid;
      gap:.55rem;
    }
    .tier-card li{
      display:flex;
      gap:.55rem;
      align-items:flex-start;
      color:var(--muted);
      font-size:.93rem;
    }
    .tier-card li::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      margin-top:.45rem;
      background:linear-gradient(145deg, #ffd66d, #f97316);
      box-shadow:0 0 0 .2rem rgba(245,158,11,.12);
      flex:0 0 auto;
    }

    .faq-section{
      padding:1.2rem 0 1.8rem;
    }
    .accordion{
      --bs-accordion-bg:transparent;
      --bs-accordion-border-color:transparent;
      --bs-accordion-btn-color:var(--text);
      --bs-accordion-btn-bg:rgba(255,255,255,.04);
      --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(245,158,11,.14);
      --bs-accordion-active-color:var(--text);
      --bs-accordion-active-bg:rgba(245,158,11,.1);
      --bs-accordion-btn-padding-x:1.05rem;
      --bs-accordion-btn-padding-y:1rem;
      --bs-accordion-body-padding-x:1.05rem;
      --bs-accordion-body-padding-y:.9rem;
    }
    .accordion-item{
      background:linear-gradient(180deg, rgba(27,32,48,.95), rgba(21,24,35,.98));
      border:1px solid var(--line);
      border-radius:20px !important;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      margin-bottom:.8rem;
    }
    .accordion-button{
      font-weight:800;
      box-shadow:none !important;
    }
    .accordion-button:not(.collapsed){
      color:#fff;
    }
    .accordion-button::after{
      filter:invert(1) brightness(1.2);
    }
    .accordion-body{
      color:var(--muted);
      padding-top:0;
    }

    .cta-section{
      padding:1.2rem 0 2rem;
    }
    .cta-shell{
      position:relative;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(245,158,11,.18), rgba(249,115,22,.08) 40%, rgba(255,255,255,.03) 100%),
        linear-gradient(180deg, rgba(27,32,48,.96), rgba(21,24,35,.98));
      border:1px solid rgba(245,158,11,.24);
      border-radius:var(--radius-xl);
      box-shadow:0 22px 54px rgba(0,0,0,.32);
      padding:1.35rem;
    }
    .cta-shell::before{
      content:"";
      position:absolute;
      width:260px;height:260px;
      right:-110px;top:-90px;
      background:radial-gradient(circle, rgba(255,213,106,.22), transparent 70%);
      pointer-events:none;
    }
    .cta-shell h2{
      margin:0 0 .6rem;
      font-size:clamp(1.5rem, 2.2vw, 2.2rem);
      font-weight:900;
      letter-spacing:-.02em;
    }
    .cta-shell p{
      margin:0;
      color:var(--muted);
      max-width:48rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:1rem;
    }

    .site-footer{
      margin-top:1rem;
      padding:1.2rem 0 1.4rem;
      border-top:1px solid var(--line);
      background:rgba(8,9,12,.74);
      backdrop-filter:blur(10px);
    }
    .footer-top{
      display:grid;
      grid-template-columns:1.4fr .8fr .9fr;
      gap:1rem;
      padding-bottom:1rem;
    }
    .footer-title{
      font-weight:850;
      margin-bottom:.75rem;
      color:#fff;
    }
    .footer-links{
      display:grid;
      gap:.5rem;
    }
    .footer-links a{
      color:var(--muted);
    }
    .footer-links a:hover{
      color:var(--accent);
    }
    .footer-bottom{
      border-top:1px solid var(--line);
      padding-top:1rem;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:.8rem;
      color:var(--muted-2);
      font-size:.92rem;
    }
    .footer-note a{
      color:#fff;
    }

    .section-divider{
      height:1px;
      margin:1.2rem 0;
      background:linear-gradient(90deg, transparent, rgba(245,158,11,.42), transparent);
    }

    .lead-muted{
      color:var(--muted);
    }

    @media (max-width: 1199.98px){
      .hero-grid,
      .main-grid,
      .social-grid,
      .footer-top{
        grid-template-columns:1fr;
      }
      .side-panel{
        position:static;
      }
      .tier-grid{
        grid-template-columns:1fr;
      }
      .card-grid{
        grid-template-columns:1fr;
      }
    }
    @media (max-width: 991.98px){
      body{padding-top:78px}
      .nav-search{
        width:100%;
        min-width:0;
        max-width:none;
        margin-top:.8rem;
      }
      .navbar .d-flex.gap-2{
        width:100%;
      }
      .overview-grid{
        grid-template-columns:1fr;
      }
      .mini-grid{
        grid-template-columns:1fr 1fr 1fr;
      }
      .hero-title{
        font-size:clamp(1.8rem, 7vw, 3rem);
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
    }
    @media (max-width: 767.98px){
      .hero-grid{padding:1rem}
      .hero-actions,.trust-row,.cta-actions,.pill-list,.shortcut-list,.filter-bar,.breadcrumb-wrap{
        gap:.5rem;
      }
      .mini-grid{
        grid-template-columns:1fr 1fr;
      }
      .footer-bottom{
        align-items:flex-start;
      }
      .filter-chip{
        padding:.56rem .8rem;
      }
      .cta-shell{
        padding:1rem;
      }
    }
    @media (max-width: 575.98px){
      body{padding-top:74px}
      .container-wide{width:min(var(--container), calc(100% - 1.1rem))}
      .navbar .btn{
        width:100%;
      }
      .hero-title{
        font-size:2rem;
      }
      .hero-subtitle{
        font-size:.98rem;
      }
      .mini-grid{
        grid-template-columns:1fr;
      }
      .overview-grid{
        gap:.75rem;
      }
      .content-card, .panel-card, .social-card, .tier-card, .feature-card, .overview-card, .accordion-item{
        border-radius:18px;
      }
    }

    /* Bootstrap override niceties */
    .collapse.show{
      transition:height .3s ease;
    }
    .modal,.dropdown-menu,.popover{border-radius:18px}
    .visually-hidden-focusable:not(:focus):not(:focus-within){
      position:absolute !important;
    }