/* roulang page: index */
:root {
      --bg: #f5f7f4;
      --panel: #ffffff;
      --soft: #eef3ec;
      --soft-2: #f8faf7;
      --line: #d9e3d7;
      --text: #111827;
      --muted: #5f6b71;
      --primary: #b53346;
      --primary-2: #165d56;
      --accent: #e8a21b;
      --accent-2: #e85f3d;
      --dark: #111827;
      --shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
      --shadow-strong: 0 14px 30px rgba(17, 24, 39, 0.12);
      --radius: 8px;
      --radius-sm: 6px;
      --space: 1rem;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background: var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      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;
    }

    button {
      border: 0;
      background: none;
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .container-xxl {
      max-width: 1240px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1030;
      background: rgba(255, 255, 255, 0.96);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04);
      backdrop-filter: saturate(120%) blur(4px);
    }

    .navbar {
      padding: 0.8rem 0;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      color: #fff;
      box-shadow: 0 8px 18px rgba(181, 51, 70, 0.24);
      flex: 0 0 auto;
    }

    .navbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      font-weight: 800;
      color: var(--text);
      letter-spacing: 0;
    }

    .navbar-brand .brand-text {
      font-size: 1rem;
      line-height: 1.15;
    }

    .navbar-nav {
      gap: 0.35rem;
    }

    .nav-link {
      color: var(--muted);
      font-weight: 600;
      border-radius: 6px;
      padding: 0.58rem 0.8rem !important;
      transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .nav-link:hover,
    .nav-link:focus {
      color: var(--text);
      background: var(--soft);
      transform: translateY(-1px);
    }

    .nav-link.active {
      color: var(--primary);
      background: rgba(181, 51, 70, 0.08);
    }

    .search-box {
      width: 250px;
      position: relative;
    }

    .search-box .form-control {
      height: 42px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      padding-left: 2.4rem;
      box-shadow: none;
      color: var(--text);
    }

    .search-box .form-control::placeholder {
      color: #7b858a;
    }

    .search-box .bi-search {
      position: absolute;
      left: 0.8rem;
      top: 50%;
      transform: translateY(-50%);
      color: #7b858a;
      pointer-events: none;
    }

    .btn-brand,
    .btn-soft,
    .btn-ghost {
      border-radius: 8px;
      font-weight: 700;
      padding: 0.72rem 1rem;
      transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .btn-brand {
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #8f2737);
      box-shadow: 0 10px 18px rgba(181, 51, 70, 0.2);
      border: 1px solid rgba(181, 51, 70, 0.2);
    }

    .btn-brand:hover,
    .btn-brand:focus {
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 14px 20px rgba(181, 51, 70, 0.22);
      background: linear-gradient(135deg, #9f2d3d, #7d1f2f);
    }

    .btn-soft {
      color: var(--primary-2);
      background: rgba(22, 93, 86, 0.08);
      border: 1px solid rgba(22, 93, 86, 0.16);
    }

    .btn-soft:hover,
    .btn-soft:focus {
      color: var(--primary-2);
      background: rgba(22, 93, 86, 0.13);
      transform: translateY(-1px);
    }

    .btn-ghost {
      color: var(--text);
      background: #fff;
      border: 1px solid var(--line);
    }

    .btn-ghost:hover,
    .btn-ghost:focus {
      color: var(--primary);
      border-color: rgba(181, 51, 70, 0.24);
      background: rgba(181, 51, 70, 0.04);
      transform: translateY(-1px);
    }

    .section-band {
      padding: 4.5rem 0;
      position: relative;
      overflow: hidden;
    }

    .section-soft {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.34)),
        var(--soft);
    }

    .section-dark {
      background: linear-gradient(135deg, #111827 0%, #13211f 100%);
      color: #f8fafc;
    }

    .section-title {
      margin-bottom: 1.4rem;
    }

    .section-title h2 {
      margin: 0;
      font-size: 2rem;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: 0;
    }

    .section-title p {
      margin: 0.65rem 0 0;
      max-width: 760px;
      color: var(--muted);
    }

    .section-dark .section-title p,
    .section-dark .muted-light {
      color: rgba(248, 250, 252, 0.76);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.55rem;
      border-radius: 6px;
      background: rgba(181, 51, 70, 0.1);
      color: var(--primary);
      font-weight: 700;
      font-size: 0.88rem;
      margin-bottom: 0.85rem;
    }

    .hero-section {
      padding: 2rem 0 3.5rem;
      background:
        linear-gradient(135deg, rgba(181, 51, 70, 0.98) 0%, rgba(140, 40, 58, 0.98) 42%, rgba(22, 93, 86, 0.96) 100%);
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .hero-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity: 0.18;
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: 1.5rem;
      align-items: stretch;
      min-height: 640px;
    }

    .hero-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 1rem 0;
      max-width: 640px;
    }

    .hero-tagline {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 0.65rem;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.12);
      width: fit-content;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .hero-title {
      margin: 0;
      font-size: 3.1rem;
      line-height: 1.08;
      font-weight: 900;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .hero-subtitle {
      margin: 1rem 0 0;
      font-size: 1.02rem;
      line-height: 1.8;
      max-width: 620px;
      color: rgba(255, 255, 255, 0.88);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      margin-top: 1.4rem;
    }

    .hero-actions .btn {
      padding: 0.8rem 1.1rem;
    }

    .hero-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      margin-top: 1.35rem;
      max-width: 620px;
    }

    .mini-stat {
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.09);
      border-radius: 8px;
      padding: 0.8rem 0.85rem;
    }

    .mini-stat strong {
      display: block;
      font-size: 1.05rem;
      margin-bottom: 0.2rem;
    }

    .mini-stat span {
      color: rgba(255, 255, 255, 0.82);
      font-size: 0.92rem;
    }

    .hero-board {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 0.95rem;
      align-items: stretch;
      padding: 0.4rem 0;
    }

    .hero-countdown,
    .hero-matrix,
    .hero-stream {
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 18px 30px rgba(17, 24, 39, 0.16);
    }

    .hero-countdown {
      padding: 1rem;
    }

    .countdown-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
    }

    .countdown-top .label {
      font-weight: 800;
      letter-spacing: 0;
    }

    .countdown-top .badge-time {
      padding: 0.33rem 0.5rem;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      font-weight: 700;
      font-size: 0.88rem;
    }

    .count-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.55rem;
    }

    .count-box {
      padding: 0.8rem 0.5rem;
      text-align: center;
      background: rgba(255, 255, 255, 0.12);
      border-radius: 8px;
    }

    .count-box strong {
      display: block;
      font-size: 1.45rem;
      line-height: 1;
      margin-bottom: 0.3rem;
    }

    .count-box span {
      font-size: 0.86rem;
      color: rgba(255, 255, 255, 0.82);
    }

    .hero-matrix {
      padding: 1rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }

    .hero-entry {
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.96);
      color: var(--text);
      padding: 0.9rem;
      border: 1px solid rgba(255, 255, 255, 0.68);
      box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .hero-entry .tag {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.28rem 0.45rem;
      border-radius: 6px;
      background: rgba(181, 51, 70, 0.08);
      color: var(--primary);
      font-weight: 700;
      font-size: 0.84rem;
    }

    .hero-entry strong {
      font-size: 1rem;
      line-height: 1.35;
    }

    .hero-entry p {
      margin: 0;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.55;
    }

    .hero-stream {
      padding: 0.85rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }

    .hero-stream-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .hero-stream-top .label {
      font-weight: 800;
    }

    .hero-stream-list {
      display: grid;
      gap: 0.6rem;
    }

    .hero-stream-item {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      padding: 0.68rem 0.7rem;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.12);
    }

    .hero-stream-item i {
      color: #fff;
      font-size: 1rem;
      margin-top: 0.08rem;
    }

    .hero-stream-item span {
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.5;
      font-size: 0.94rem;
    }

    .section-band .card,
    .section-band .table,
    .section-band .accordion-item,
    .section-band .form-control,
    .section-band .form-select {
      border-radius: 8px !important;
    }

    .tier-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }

    .tier-card {
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-top: 4px solid transparent;
      padding: 1rem;
      min-height: 100%;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .tier-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-strong);
    }

    .tier-card.is-1 {
      border-top-color: var(--primary);
    }

    .tier-card.is-2 {
      border-top-color: var(--accent);
    }

    .tier-card.is-3 {
      border-top-color: var(--primary-2);
    }

    .tier-card.is-4 {
      border-top-color: var(--accent-2);
    }

    .tier-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
    }

    .tier-step {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border-radius: 6px;
      font-weight: 800;
      background: var(--soft);
      color: var(--text);
      flex: 0 0 auto;
    }

    .tier-card.is-1 .tier-step {
      background: rgba(181, 51, 70, 0.1);
      color: var(--primary);
    }

    .tier-card.is-2 .tier-step {
      background: rgba(232, 162, 27, 0.12);
      color: #a96a00;
    }

    .tier-card.is-3 .tier-step {
      background: rgba(22, 93, 86, 0.1);
      color: var(--primary-2);
    }

    .tier-card.is-4 .tier-step {
      background: rgba(232, 95, 61, 0.12);
      color: #b7482c;
    }

    .tier-card h3 {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 800;
      line-height: 1.25;
    }

    .tier-card .tier-note {
      margin: 0.2rem 0 0;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .detail-list {
      list-style: none;
      margin: 0.9rem 0 0;
      padding: 0;
      display: grid;
      gap: 0.55rem;
    }

    .detail-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
      color: var(--text);
      line-height: 1.5;
      font-size: 0.95rem;
    }

    .detail-list i {
      color: var(--primary);
      margin-top: 0.15rem;
      font-size: 0.95rem;
    }

    .tier-card .tag {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.3rem 0.46rem;
      border-radius: 6px;
      background: var(--soft);
      color: var(--muted);
      font-size: 0.84rem;
      font-weight: 700;
    }

    .compare-wrap {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .compare-table {
      margin: 0;
      color: var(--text);
    }

    .compare-table thead th {
      background: #f4f7f3;
      border-bottom: 1px solid var(--line);
      color: var(--text);
      font-weight: 800;
      vertical-align: middle;
      padding: 1rem;
    }

    .compare-table tbody th,
    .compare-table tbody td {
      padding: 0.95rem 1rem;
      border-color: var(--line);
      vertical-align: middle;
    }

    .compare-table tbody th {
      background: #fafcf8;
      width: 21%;
      font-weight: 700;
    }

    .compare-table tbody td.highlight {
      background: rgba(181, 51, 70, 0.06);
      position: relative;
    }

    .compare-table .recommend {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.5rem;
      border-radius: 6px;
      background: rgba(181, 51, 70, 0.1);
      color: var(--primary);
      font-size: 0.8rem;
      font-weight: 700;
      margin-left: 0.45rem;
    }

    .limited-band {
      background: linear-gradient(135deg, #16211e 0%, #122823 45%, #0f1d23 100%);
      color: #fff;
    }

    .limited-panel {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 1.4rem;
      align-items: center;
    }

    .limited-copy {
      padding-right: 0.5rem;
    }

    .limited-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 900;
      line-height: 1.18;
    }

    .limited-copy p {
      margin: 0.9rem 0 0;
      color: rgba(248, 250, 252, 0.82);
      max-width: 620px;
    }

    .limited-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 1rem;
    }

    .limited-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.55rem;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.09);
      font-size: 0.9rem;
      color: #fff;
    }

    .limited-grid {
      display: grid;
      gap: 0.8rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 1rem;
    }

    .limited-flag {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding-bottom: 0.7rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .limited-flag strong {
      font-size: 1rem;
    }

    .limited-flag .badge-time {
      padding: 0.32rem 0.5rem;
      border-radius: 6px;
      background: rgba(232, 162, 27, 0.18);
      color: #ffd979;
      font-weight: 700;
      font-size: 0.88rem;
    }

    .limited-entry {
      padding: 0.8rem;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.09);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.9rem;
    }

    .limited-entry strong {
      display: block;
      font-size: 1rem;
      margin-bottom: 0.2rem;
    }

    .limited-entry span {
      color: rgba(248, 250, 252, 0.78);
      font-size: 0.92rem;
    }

    .limited-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: 0.3rem;
    }

    .limited-actions .btn {
      padding: 0.72rem 1rem;
    }

    .news-grid {
      display: grid;
      grid-template-columns: 1.18fr 0.82fr;
      gap: 1rem;
      align-items: start;
    }

    .news-list-wrap,
    .news-side {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 1rem;
    }

    .news-list {
      display: grid;
      gap: 0.6rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .news-item {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 0.8rem;
      align-items: center;
      padding: 0.8rem 0.25rem;
      border-bottom: 1px solid var(--line);
    }

    .news-item:last-child {
      border-bottom: 0;
      padding-bottom: 0.3rem;
    }

    .news-date {
      min-width: 76px;
      text-align: center;
      border-radius: 6px;
      padding: 0.45rem 0.55rem;
      background: var(--soft);
      color: var(--primary-2);
      font-weight: 800;
      font-size: 0.88rem;
    }

    .news-item a {
      display: inline-flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .news-item strong {
      font-size: 1rem;
      line-height: 1.38;
      font-weight: 800;
    }

    .news-item p {
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .news-tag {
      justify-self: end;
      padding: 0.3rem 0.5rem;
      border-radius: 6px;
      background: rgba(181, 51, 70, 0.08);
      color: var(--primary);
      font-weight: 700;
      font-size: 0.8rem;
    }

    .news-side {
      background: linear-gradient(180deg, #ffffff 0%, #fafcf9 100%);
    }

    .news-side h3 {
      margin: 0 0 0.55rem;
      font-size: 1.15rem;
      font-weight: 800;
    }

    .news-side p {
      margin: 0 0 0.9rem;
      color: var(--muted);
    }

    .matrix-list {
      display: grid;
      gap: 0.7rem;
    }

    .matrix-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      padding: 0.85rem;
      border-radius: 8px;
      background: var(--soft);
      border: 1px solid rgba(22, 93, 86, 0.08);
    }

    .matrix-item strong {
      display: block;
      margin-bottom: 0.12rem;
      font-size: 0.98rem;
    }

    .matrix-item span {
      color: var(--muted);
      font-size: 0.9rem;
    }

    .matrix-item i {
      color: var(--primary);
      font-size: 1.15rem;
      flex: 0 0 auto;
    }

    .scene-grid {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 1.1rem;
      align-items: stretch;
    }

    .scene-copy,
    .scene-visual {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 1rem;
    }

    .scene-copy h3,
    .proof-col h3,
    .contact-col h3 {
      margin: 0;
      font-size: 1.18rem;
      font-weight: 800;
    }

    .scene-copy p,
    .proof-col p,
    .contact-col p {
      margin: 0.65rem 0 0;
      color: var(--muted);
    }

    .scene-steps {
      margin-top: 1rem;
      display: grid;
      gap: 0.75rem;
    }

    .scene-step {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.8rem;
      align-items: start;
      padding: 0.85rem;
      border-radius: 8px;
      background: var(--soft-2);
      border: 1px solid var(--line);
    }

    .scene-step .num {
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      background: rgba(181, 51, 70, 0.08);
      color: var(--primary);
    }

    .scene-step strong {
      display: block;
      margin-bottom: 0.15rem;
      font-size: 1rem;
    }

    .scene-step span {
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.55;
    }

    .process-board {
      height: 100%;
      display: grid;
      gap: 0.75rem;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(106px, auto);
    }

    .process-card {
      border-radius: 8px;
      padding: 0.9rem;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, #fff 0%, #fafcf8 100%);
    }

    .process-card.primary {
      background: linear-gradient(135deg, rgba(181, 51, 70, 0.1), rgba(22, 93, 86, 0.08));
      border-color: rgba(181, 51, 70, 0.16);
    }

    .process-card strong {
      display: block;
      margin-bottom: 0.35rem;
      font-size: 1rem;
    }

    .process-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.93rem;
      line-height: 1.55;
    }

    .process-card .badge-soft {
      display: inline-flex;
      align-items: center;
      gap: 0.32rem;
      padding: 0.3rem 0.45rem;
      border-radius: 6px;
      background: rgba(22, 93, 86, 0.08);
      color: var(--primary-2);
      font-size: 0.84rem;
      font-weight: 700;
      margin-bottom: 0.55rem;
    }

    .proof-grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 1rem;
      align-items: stretch;
    }

    .proof-col {
      background: rgba(255, 255, 255, 0.04);
      border-radius: 8px;
      padding: 0.2rem;
    }

    .proof-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      margin-top: 1rem;
    }

    .proof-metric {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      padding: 0.95rem;
      min-height: 100%;
    }

    .proof-metric strong {
      display: block;
      font-size: 1.02rem;
      margin-bottom: 0.25rem;
    }

    .proof-metric span {
      color: rgba(248, 250, 252, 0.8);
      font-size: 0.92rem;
    }

    .quote-grid {
      display: grid;
      gap: 0.8rem;
    }

    .quote-card {
      border-radius: 8px;
      padding: 0.95rem;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .quote-card .quote-head {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.45rem;
      color: #fff;
      font-weight: 800;
    }

    .quote-card p {
      margin: 0;
      color: rgba(248, 250, 252, 0.82);
      line-height: 1.65;
    }

    .faq-wrap {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 0.25rem;
    }

    .accordion-item {
      border: 1px solid var(--line);
      overflow: hidden;
    }

    .accordion-item + .accordion-item {
      margin-top: 0.8rem;
    }

    .accordion-button {
      background: #fff;
      color: var(--text);
      font-weight: 800;
      box-shadow: none !important;
      padding: 1rem 1.1rem;
    }

    .accordion-button:not(.collapsed) {
      color: var(--primary);
      background: rgba(181, 51, 70, 0.05);
    }

    .accordion-button::after {
      background-size: 1rem;
    }

    .accordion-body {
      color: var(--muted);
      padding: 0.95rem 1.1rem 1.05rem;
      background: #fff;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 0.82fr;
      gap: 1rem;
      align-items: stretch;
    }

    .contact-col,
    .contact-side {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 1rem;
    }

    .form-label {
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.45rem;
    }

    .form-control,
    .form-select {
      border: 1px solid var(--line);
      border-radius: 8px;
      min-height: 46px;
      color: var(--text);
      background-color: #fff;
      box-shadow: none !important;
    }

    .form-control:focus,
    .form-select:focus {
      border-color: rgba(181, 51, 70, 0.42);
      box-shadow: 0 0 0 0.2rem rgba(181, 51, 70, 0.08) !important;
    }

    textarea.form-control {
      min-height: 124px;
      resize: vertical;
    }

    .contact-side {
      background: linear-gradient(180deg, #ffffff 0%, #fafcf8 100%);
    }

    .support-list {
      list-style: none;
      margin: 1rem 0 0;
      padding: 0;
      display: grid;
      gap: 0.7rem;
    }

    .support-list li {
      display: flex;
      gap: 0.65rem;
      align-items: flex-start;
      color: var(--muted);
      line-height: 1.55;
    }

    .support-list i {
      color: var(--primary-2);
      margin-top: 0.15rem;
    }

    .footer {
      background: #111827;
      color: #eef2f7;
      padding: 2.25rem 0 1.3rem;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer .brand-line {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      margin-bottom: 0.9rem;
    }

    .footer .brand-mark {
      background: linear-gradient(135deg, var(--primary), var(--accent));
    }

    .footer .site-name {
      font-size: 1.02rem;
      font-weight: 800;
    }

    .footer p,
    .footer small,
    .footer a {
      color: rgba(238, 242, 247, 0.78);
    }

    .footer a:hover {
      color: #fff;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7rem 1rem;
      margin: 0.85rem 0 0;
      padding: 0;
      list-style: none;
    }

    .footer-links a {
      padding: 0.18rem 0;
      font-weight: 700;
    }

    .footer-bottom {
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.6rem;
      font-size: 0.92rem;
    }

    .badge-inline {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.34rem 0.5rem;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-weight: 700;
      font-size: 0.84rem;
    }

    @media (max-width: 1199.98px) {
      .hero-grid,
      .limited-panel,
      .news-grid,
      .scene-grid,
      .proof-grid,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        max-width: none;
      }

      .hero-board {
        padding-top: 0;
      }

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

    @media (max-width: 991.98px) {
      .navbar .container-xxl {
        gap: 0.6rem;
      }

      .navbar-collapse {
        padding-top: 0.8rem;
      }

      .search-box {
        width: 100%;
      }

      .hero-section {
        padding-top: 1.5rem;
      }

      .hero-grid {
        min-height: auto;
      }

      .hero-title {
        font-size: 2.45rem;
      }

      .hero-points {
        grid-template-columns: 1fr;
      }

      .limited-title {
        font-size: 1.8rem;
      }

      .proof-metrics {
        grid-template-columns: 1fr;
      }

      .process-board {
        grid-template-columns: 1fr;
      }

      .news-item {
        grid-template-columns: 1fr;
        align-items: start;
      }

      .news-tag {
        justify-self: start;
      }
    }

    @media (max-width: 767.98px) {
      .section-band {
        padding: 3.4rem 0;
      }

      .section-title h2 {
        font-size: 1.6rem;
      }

      .hero-title {
        font-size: 2.15rem;
      }

      .hero-subtitle {
        font-size: 0.98rem;
      }

      .hero-matrix {
        grid-template-columns: 1fr;
      }

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

      .tier-grid {
        grid-template-columns: 1fr;
      }

      .compare-table thead th,
      .compare-table tbody th,
      .compare-table tbody td {
        padding: 0.8rem;
      }

      .footer-bottom {
        flex-direction: column;
      }
    }

    @media (max-width: 575.98px) {
      .navbar-brand .brand-text {
        font-size: 0.96rem;
      }

      .hero-actions,
      .limited-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .hero-actions .btn,
      .limited-actions .btn {
        width: 100%;
        justify-content: center;
      }

      .count-box strong {
        font-size: 1.25rem;
      }

      .hero-board {
        gap: 0.8rem;
      }

      .hero-entry strong {
        font-size: 0.96rem;
      }

      .support-list {
        gap: 0.55rem;
      }
    }

/* roulang page: category2 */
:root{
  --bg:#f5f7f9;
  --bg-soft:#eef2f5;
  --surface:#ffffff;
  --surface-strong:#15171c;
  --surface-dark:#101217;
  --line:#d9e0e7;
  --line-strong:#c8d0d8;
  --text:#151922;
  --muted:#5f6876;
  --muted-2:#7d8692;
  --primary:#d63f2f;
  --primary-deep:#b63124;
  --secondary:#0f766e;
  --secondary-deep:#0b5f58;
  --accent:#f4b642;
  --accent-soft:#fff4d7;
  --success:#2f8a5a;
  --danger:#d63f2f;
  --shadow:0 12px 30px rgba(21,25,34,.08);
  --shadow-strong:0 18px 44px rgba(21,25,34,.14);
  --radius:8px;
  --radius-sm:6px;
  --space:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    linear-gradient(180deg, #f8fafc 0%, #f5f7f9 42%, #eef2f5 100%);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;transition:all .2s ease}
a:hover{color:var(--primary)}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
::selection{background:rgba(214,63,47,.18);color:var(--text)}
:focus-visible{outline:2px solid rgba(214,63,47,.6);outline-offset:2px}

.container-xxl{
  padding-left:1.25rem;
  padding-right:1.25rem;
}

.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(217,224,231,.92);
  box-shadow:0 2px 16px rgba(17,24,39,.04);
}
.navbar{
  padding:.85rem 0;
}
.navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:.72rem;
  font-weight:800;
  color:var(--text);
  letter-spacing:0;
}
.brand-mark{
  width:2.25rem;
  height:2.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--primary) 0%, #e86a3b 100%);
  color:#fff;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 8px 18px rgba(214,63,47,.18);
  border-radius:8px;
  flex:0 0 auto;
}
.brand-text{
  font-size:1.02rem;
  line-height:1.1;
  white-space:nowrap;
}
.navbar-nav{
  gap:.45rem;
}
.navbar-nav .nav-link{
  position:relative;
  padding:.55rem .9rem;
  color:#2b3240;
  border-radius:8px;
  font-weight:700;
}
.navbar-nav .nav-link:hover{
  background:rgba(214,63,47,.06);
  color:var(--primary);
}
.navbar-nav .nav-link.active{
  color:var(--primary);
  background:rgba(214,63,47,.08);
}
.navbar-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:.9rem;
  right:.9rem;
  bottom:.35rem;
  height:2px;
  border-radius:999px;
  background:var(--primary);
}
.search-box{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:240px;
  padding:.56rem .8rem;
  background:#f4f7fa;
  border:1px solid var我已经把页面骨架接上了，接下来会把剩余 CSS、首屏和各区块一次补完整，确保它能作为独立 PHP 页面直接跑起来。重点是把当前分类页做成“专题落地页”而不是列表站，导航、按钮、表单和 FAQ 都会跟同一套视觉一起落地。(--line);
  border-radius:999px;
  transition:all .2s ease;
}
.search-box i{
  color:var(--muted-2);
  font-size:1rem;
}
.search-box .form-control{
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
  min-height:auto;
  color:var(--text);
}
.search-box .form-control::placeholder{color:#8a93a0}
.search-box:focus-within{
  background:#fff;
  border-color:rgba(214,63,47,.45);
  box-shadow:0 0 0 .2rem rgba(214,63,47,.08);
}
.btn{
  border-radius:8px;
  font-weight:700;
  padding:.72rem 1rem;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{
  transform:translateY(-1px);
}
.btn-brand{
  background:linear-gradient(135deg, var(--primary) 0%, #ea6737 100%);
  color:#fff;
  border:1px solid rgba(214,63,47,.18);
  box-shadow:0 12px 24px rgba(214,63,47,.18);
}
.btn-brand:hover{
  background:linear-gradient(135deg, var(--primary-deep) 0%, #d65a2f 100%);
  color:#fff;
  box-shadow:0 14px 28px rgba(214,63,47,.22);
}
.btn-outline-brand{
  border:1px solid rgba(214,63,47,.32);
  color:var(--primary);
  background:#fff;
}
.btn-outline-brand:hover{
  background:rgba(214,63,47,.08);
  color:var(--primary-deep);
  border-color:rgba(214,63,47,.52);
}

main{overflow:hidden}
.hero{
  position:relative;
  padding:2rem 0 1.25rem;
}
.hero-shell{
  position:relative;
  overflow:hidden;
  border-radius:0;
  background:
    linear-gradient(135deg, rgba(214,63,47,.98) 0%, rgba(230,93,54,.95) 38%, rgba(15,118,110,.92) 100%);
  color:#fff;
  box-shadow:var(--shadow-strong);
}
.hero-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.12) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 100%);
  background-size:22px 22px, 22px 22px;
  opacity:.35;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  padding:2rem;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.36rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.16);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:0;
}
.hero h1{
  margin:1rem 0 .9rem;
  font-size:clamp(2rem, 4vw, 3.6rem);
  line-height:1.08;
  font-weight:900;
}
.hero .lead{
  margin:0;
  font-size:1.04rem;
  max-width:42rem;
  color:rgba(255,255,255,.9);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.25rem;
}
.hero-actions .btn{
  min-width:140px;
}
.hero-note{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:1rem;
}
.hero-note .chip{
  display:inline-flex;
  align-items:center;
  gap:.38rem;
  padding:.42rem .72rem;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
  font-size:.9rem;
}
.hero-visual{
  position:relative;
  padding:1.75rem;
  height:100%;
}
.coupon-wall{
  display:grid;
  grid-template-columns:1.2fr .88fr;
  gap:.9rem;
  align-items:stretch;
  min-height:100%;
}
.coupon-main{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,248,241,.98) 100%);
  color:var(--text);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 18px 40px rgba(26,31,38,.2);
  border-radius:8px;
  padding:1.15rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.coupon-main::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  padding:1px;
  background:linear-gradient(135deg, rgba(214,63,47,.55), rgba(244,182,66,.7), rgba(15,118,110,.45));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.coupon-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.coupon-amount{
  font-size:2.4rem;
  line-height:1;
  font-weight:900;
  color:var(--primary);
}
.coupon-label{
  font-size:.93rem;
  color:var(--muted);
  margin-top:.35rem;
}
.coupon-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.32rem .6rem;
  border-radius:999px;
  background:var(--accent-soft);
  color:#8f5b00;
  font-size:.84rem;
  font-weight:700;
}
.coupon-main .btn{
  width:100%;
}
.coupon-list{
  display:grid;
  gap:.75rem;
}
.coupon-mini{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  padding:.9rem;
  color:#fff;
}
.coupon-mini strong{
  display:block;
  font-size:1rem;
  margin-bottom:.25rem;
}
.coupon-mini span{
  color:rgba(255,255,255,.88);
  font-size:.88rem;
}
.coupon-mini.alt{
  background:rgba(16,18,23,.18);
}

.band{
  padding:1.1rem 0 0;
}
.section-band{
  margin-top:1.25rem;
  padding:1.15rem 0 1.3rem;
}
.section-band.soft{
  background:linear-gradient(180deg, rgba(255,255,255,.68), rgba(238,242,245,.88));
  border-top:1px solid rgba(217,224,231,.75);
  border-bottom:1px solid rgba(217,224,231,.75);
}
.section-band.dark{
  background:var(--surface-strong);
  color:#fff;
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.section-title{
  margin:0;
  font-size:1.6rem;
  font-weight:900;
  line-height:1.15;
}
.section-sub{
  margin:.38rem 0 0;
  color:var(--muted);
  max-width:48rem;
}
.section-band.dark .section-sub,
.section-band.dark .section-title{
  color:#fff;
}
.section-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .68rem;
  border-radius:999px;
  background:rgba(214,63,47,.1);
  color:var(--primary);
  font-size:.84rem;
  font-weight:700;
}
.section-band.dark .section-tag{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.hotbar{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-bottom:1rem;
}
.hotbar .tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.44rem .72rem;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  color:#374151;
  font-size:.86rem;
  font-weight:700;
}
.hotbar .tag.active{
  border-color:rgba(214,63,47,.4);
  background:rgba(214,63,47,.08);
  color:var(--primary-deep);
}

.feature-grid{
  display:grid;
  grid-template-columns:1.4fr .9fr;
  gap:1rem;
}
.feature-list{
  display:grid;
  gap:.9rem;
}
.entry-card{
  position:relative;
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:1rem;
  align-items:stretch;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(17,24,39,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.entry-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(17,24,39,.09);
  border-color:rgba(214,63,47,.28);
}
.entry-visual{
  min-height:140px;
  background:
    linear-gradient(135deg, rgba(214,63,47,.95), rgba(244,182,66,.9)),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  position:relative;
}
.entry-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18) 0 14px, transparent 14px 28px);
  opacity:.25;
}
.entry-body{
  padding:1rem 0;
}
.entry-body h3{
  margin:0 0 .5rem;
  font-size:1.05rem;
  font-weight:900;
}
.entry-body p{
  margin:0 0 .65rem;
  color:var(--muted);
  font-size:.94rem;
}
.entry-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.entry-meta .meta{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.82rem;
  color:var(--muted);
  background:#f5f7fa;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.28rem .55rem;
}
.entry-action{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  border-left:1px dashed var(--line);
}
.entry-action .btn{
  min-width:112px;
}
.side-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:1rem;
  box-shadow:0 8px 20px rgba(17,24,39,.04);
}
.side-card + .side-card{margin-top:.9rem}
.side-card h4{
  margin:0 0 .6rem;
  font-size:1rem;
  font-weight:900;
}
.stat-stack{
  display:grid;
  gap:.75rem;
}
.stat-item{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:.75rem;
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:8px;
}
.stat-icon{
  width:2rem;
  height:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:rgba(214,63,47,.1);
  color:var(--primary);
  flex:0 0 auto;
}
.stat-item strong{
  display:block;
  font-size:.96rem;
  margin-bottom:.14rem;
}
.stat-item span{
  color:var(--muted);
  font-size:.88rem;
}

.tier-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}
.tier-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(17,24,39,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tier-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(17,24,39,.08);
  border-color:rgba(15,118,110,.26);
}
.tier-head{
  padding:1rem 1rem .85rem;
  background:linear-gradient(180deg, rgba(15,118,110,.08), rgba(255,255,255,0));
  border-bottom:1px solid var(--line);
}
.tier-head .name{
  font-size:1rem;
  font-weight:900;
  margin:0 0 .3rem;
}
.tier-head .desc{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
}
.tier-price{
  padding:1rem;
  display:flex;
  align-items:flex-end;
  gap:.4rem;
  color:var(--primary);
  font-weight:900;
}
.tier-price strong{
  font-size:2rem;
  line-height:1;
}
.tier-body{
  padding:0 1rem 1rem;
}
.tier-body ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.48rem;
}
.tier-body li{
  display:flex;
  gap:.45rem;
  color:#3b4453;
  font-size:.92rem;
}
.tier-body i{
  color:var(--success);
  margin-top:.1rem;
}
.tier-foot{
  padding:0 1rem 1rem;
}
.tier-card.featured{
  background:linear-gradient(180deg, #fff 0%, #fffaf4 100%);
  border-color:rgba(214,63,47,.28);
  box-shadow:0 18px 36px rgba(214,63,47,.12);
}
.tier-card.featured::before{
  content:"热推";
  position:absolute;
  top:.85rem;
  right:.85rem;
  padding:.28rem .55rem;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  font-size:.76rem;
  font-weight:800;
}

.compare-wrap{
  background:var(--surface-dark);
  color:#fff;
  border-radius:0;
  padding:1.4rem 0 1.4rem;
}
.compare-panel{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  overflow:hidden;
}
.compare-row{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:0;
}
.compare-row > div{
  padding:.95rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.compare-row.header > div{
  background:rgba(255,255,255,.06);
  font-weight:800;
  color:#fff;
}
.compare-row:nth-child(even):not(.header) > div{
  background:rgba(255,255,255,.02);
}
.compare-row .label{
  color:#d8dee7;
  font-weight:700;
}
.compare-row .ok{
  color:#7ef0a2;
}
.compare-row .dim{
  color:#b6bfcb;
}
.compare-row .highlight{
  background:rgba(214,63,47,.14);
  color:#fff;
  border-left:1px solid rgba(214,63,47,.22);
  border-right:1px solid rgba(214,63,47,.22);
}
.compare-panel .badge-line{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.32rem .58rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
}

.limited-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1rem;
}
.limit-strip{
  background:linear-gradient(135deg, #fff1ec 0%, #fff 100%);
  border:1px solid rgba(214,63,47,.18);
  border-radius:8px;
  padding:1rem;
  box-shadow:0 8px 20px rgba(17,24,39,.04);
}
.limit-strip .timebar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.7rem;
  margin-top:.9rem;
}
.countdown{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}
.countdown .box{
  min-width:4.2rem;
  text-align:center;
  border-radius:8px;
  background:var(--surface-dark);
  color:#fff;
  padding:.55rem .5rem;
}
.countdown .box strong{
  display:block;
  font-size:1.1rem;
  line-height:1;
}
.countdown .box span{
  display:block;
  margin-top:.2rem;
  font-size:.76rem;
  color:#c6ced8;
}
.limit-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:1rem;
  box-shadow:0 8px 20px rgba(17,24,39,.04);
}
.limit-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.7rem;
}
.limit-list li{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  color:#3b4453;
}
.limit-list i{
  color:var(--primary);
  margin-top:.1rem;
}
.limit-link{
  margin-top:1rem;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:1rem;
}
.contact-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 8px 20px rgba(17,24,39,.04);
  padding:1.1rem;
}
.contact-form .form-label{
  font-weight:700;
  color:#2b3240;
}
.contact-form .form-control,
.contact-form .form-select,
.contact-form textarea{
  border-radius:8px;
  border-color:#dbe2ea;
  background:#fbfcfd;
  box-shadow:none;
}
.contact-form .form-control:focus,
.contact-form .form-select:focus,
.contact-form textarea:focus{
  border-color:rgba(214,63,47,.5);
  box-shadow:0 0 0 .2rem rgba(214,63,47,.08);
}
.contact-side{
  display:grid;
  gap:.9rem;
}
.notice{
  background:linear-gradient(135deg, rgba(15,118,110,.08), rgba(255,255,255,.92));
  border:1px solid rgba(15,118,110,.15);
  border-radius:8px;
  padding:1rem;
}
.notice h4{
  margin:0 0 .45rem;
  font-size:1rem;
  font-weight:900;
}
.notice p{
  margin:0;
  color:var(--muted);
}
.notice-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.6rem;
}
.notice-list li{
  display:flex;
  gap:.5rem;
  color:#3b4453;
}
.notice-list i{
  color:var(--secondary);
  margin-top:.1rem;
}
.accordion{
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: 8px;
  --bs-accordion-btn-focus-border-color: rgba(214,63,47,.45);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(214,63,47,.08);
}
.accordion-item{
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(17,24,39,.04);
}
.accordion-button{
  font-weight:800;
  color:var(--text);
  background:#fff;
  padding:1rem 1rem;
}
.accordion-button:not(.collapsed){
  color:var(--primary-deep);
  background:rgba(214,63,47,.06);
  box-shadow:none;
}
.accordion-body{
  color:var(--muted);
  background:#fff;
}
.faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.footer{
  background:var(--surface-dark);
  color:#d7dee8;
  padding:1.5rem 0 1.1rem;
  margin-top:1.5rem;
}
.brand-line{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:.9rem;
}
.footer .brand-mark{
  background:linear-gradient(135deg, var(--primary) 0%, #ea6737 100%);
}
.site-name{
  font-weight:900;
  color:#fff;
  font-size:1.02rem;
}
.footer small{color:#aab3c0}
.footer p{
  color:#c6ced8;
  margin-bottom:1rem;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0 0 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .9rem;
}
.footer-links a{
  color:#d7dee8;
  padding:.2rem 0;
}
.footer-links a:hover{color:#fff}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.08);
  color:#b8c2d0;
  font-size:.92rem;
}
.badge-inline{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.34rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#fff;
  white-space:nowrap;
}
.block-preview{
  height:100%;
}
.preview-stack{
  display:grid;
  gap:.8rem;
}
.preview-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:.95rem;
  box-shadow:0 8px 20px rgba(17,24,39,.04);
}
.preview-card strong{
  display:block;
  margin-bottom:.2rem;
  font-size:1rem;
}
.preview-card span{
  color:var(--muted);
  font-size:.9rem;
}
.preview-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}
.preview-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.32rem .58rem;
  border-radius:999px;
  background:rgba(214,63,47,.08);
  color:var(--primary-deep);
  font-weight:700;
  font-size:.8rem;
}

@media (max-width: 1199.98px){
  .tier-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .feature-grid,
  .limited-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .coupon-wall{
    grid-template-columns:1fr;
  }
}
@media (max-width: 991.98px){
  .navbar-collapse{
    padding-top:.8rem;
  }
  .navbar-nav{
    align-items:flex-start;
    gap:.25rem;
    margin-bottom:.8rem;
  }
  .search-box{
    min-width:0;
    width:100%;
  }
  .hero-inner{
    padding:1.25rem;
  }
  .hero-visual{
    padding:1.1rem 1.25rem 1.35rem;
  }
  .entry-card{
    grid-template-columns:120px 1fr;
  }
  .entry-action{
    grid-column:1 / -1;
    border-left:0;
    border-top:1px dashed var(--line);
    justify-content:flex-start;
    padding:0 1rem 1rem;
  }
  .compare-row{
    grid-template-columns:1fr;
  }
  .compare-row > div{
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .faq-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 767.98px){
  .hero h1{
    font-size:2rem;
  }
  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .tier-grid{
    grid-template-columns:1fr;
  }
  .entry-card{
    grid-template-columns:1fr;
  }
  .entry-visual{
    min-height:128px;
  }
  .hero-actions .btn{
    width:100%;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media (max-width: 575.98px){
  .container-xxl{
    padding-left:1rem;
    padding-right:1rem;
  }
  .hero-shell,
  .side-card,
  .contact-form,
  .tier-card,
  .entry-card,
  .accordion-item,
  .preview-card,
  .limit-strip,
  .limit-panel,
  .notice{
    border-radius:8px;
  }
  .hero-inner{
    padding:1rem;
  }
  .hero-visual{
    padding:.9rem 1rem 1rem;
  }
  .coupon-top{
    flex-direction:column;
  }
  .coupon-amount{
    font-size:2rem;
  }
  .countdown .box{
    min-width:4rem;
  }
}

/* roulang page: category1 */
:root{
  --bg:#f5f1ea;
  --bg-soft:#fbf7f0;
  --surface:#ffffff;
  --ink:#231c27;
  --muted:#6f6672;
  --primary:#8c3b64;
  --primary-dark:#6d2f4c;
  --secondary:#2f7b68;
  --accent:#e08a2c;
  --warning:#d85a3e;
  --line:#e6ddd3;
  --line-strong:#d7cbbf;
  --shadow:0 12px 30px rgba(35, 28, 39, .08);
  --shadow-strong:0 16px 42px rgba(35, 28, 39, .12);
  --radius:8px;
  --radius-sm:6px;
  --space:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    linear-gradient(180deg, rgba(140,59,100,.05), rgba(140,59,100,0) 260px),
    linear-gradient(90deg, rgba(47,123,104,.05), transparent 42%),
    linear-gradient(180deg, #faf7f2 0%, var(--bg) 100%);
  font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  line-height:1.7;
  overflow-x:hidden;
}
::selection{background:rgba(140,59,100,.16);color:var(--ink)}
a{color:inherit;text-decoration:none;transition:color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease}
a:hover{color:var(--primary)}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button, .btn{border-radius:var(--radius) !important}
:focus-visible{outline:2px solid rgba(140,59,100,.45);outline-offset:2px}
.container-xxl{max-width:1280px}
.section-band{padding:56px 0; position:relative}
.section-band.soft{background:linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.94)); border-top:1px solid rgba(230,221,211,.84); border-bottom:1px solid rgba(230,221,211,.84)}
.section-band.deep{
  background:linear-gradient(135deg, #28192b 0%, #3a1630 56%, #8d5b22 150%);
  color:#fff;
}
.section-band.compact{padding:44px 0}
.section-head{margin-bottom:24px}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .65rem;
  background:rgba(140,59,100,.08);
  border:1px solid rgba(140,59,100,.16);
  color:var(--primary);
  font-size:.82rem;
  font-weight:800;
  border-radius:var(--radius);
}
.section-head h2{
  font-size:2rem;
  line-height:1.18;
  font-weight:900;
  margin:12px 0 10px;
  overflow-wrap:anywhere;
}
.section-head p{
  color:var(--muted);
  max-width:72ch;
  margin:0;
  overflow-wrap:anywhere;
}
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 24px rgba(35,28,39,.06);
  backdrop-filter:blur(12px);
}
.navbar{padding:.85rem 0}
.navbar-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:800;
  color:var(--ink);
  white-space:nowrap;
}
.brand-mark{
  width:40px;
  height:40px;
  border-radius:var(--radius);
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff;
  box-shadow:0 10px 20px rgba(140,59,100,.18);
  flex:0 0 auto;
}
.brand-mark i{font-size:1.08rem}
.brand-text{
  font-size:1.05rem;
  line-height:1.1;
  letter-spacing:0;
}
.navbar-nav{gap:.45rem}
.nav-link{
  padding:.62rem .95rem !important;
  border-radius:var(--radius);
  color:var(--muted);
  font-weight:800;
  border:1px solid transparent;
  line-height:1.2;
}
.nav-link:hover{
  background:rgba(140,59,100,.08);
  color:var(--primary);
}
.nav-link.active{
  background:var(--primary);
  color:#fff !important;
  box-shadow:0 10px 18px rgba(140,59,100,.18);
}
.navbar-toggler{
  width:46px;
  height:46px;
  color:var(--ink);
}
.navbar-toggler:focus{box-shadow:none}
.search-box{
  min-width:250px;
  max-width:320px;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.6rem .85rem;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.search-box i{color:var(--muted); font-size:1rem}
.search-box .form-control{
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  min-height:22px;
  color:var(--ink);
}
.search-box .form-control::placeholder{color:#877e88}
.search-box .form-control:focus{box-shadow:none}
.btn-brand{
  background:var(--primary);
  border:1px solid var(--primary);
  color:#fff;
  font-weight:800;
  padding:.72rem 1rem;
  box-shadow:0 12px 20px rgba(140,59,100,.14);
}
.btn-brand:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
  color:#fff;
  transform:translateY(-1px);
}
.btn-brand:focus{box-shadow:0 0 0 .2rem rgba(140,59,100,.18)}
.btn-brand-soft{
  background:#fff;
  color:var(--primary);
  border:1px solid rgba(140,59,100,.22);
  font-weight:800;
  padding:.72rem 1rem;
}
.btn-brand-soft:hover{
  background:rgba(140,59,100,.08);
  color:var(--primary-dark);
  border-color:rgba(140,59,100,.34);
  transform:translateY(-1px);
}
.btn-limited{
  background:#fff;
  color:#241b27;
  border:1px solid rgba(255,255,255,.32);
  font-weight:800;
  padding:.72rem 1rem;
}
.btn-limited:hover{
  background:#fff8ee;
  color:#241b27;
  border-color:#fff;
  transform:translateY(-1px);
}
.hero-band{padding:30px 0 12px}
.hero-shell{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(145deg, #fff 0%, #fff7ed 54%, #f4efe7 100%);
  box-shadow:var(--shadow-strong);
}
.hero-shell::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:8px;
  background:linear-gradient(180deg, var(--primary), var(--accent), var(--secondary));
}
.hero-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(120deg, rgba(140,59,100,.08) 0, rgba(140,59,100,.08) 1px, transparent 1px, transparent 38px),
    linear-gradient(90deg, rgba(47,123,104,.06) 0, rgba(47,123,104,.06) 1px, transparent 1px, transparent 40px);
  opacity:.48;
}
.hero-inner{
  position:relative;
  z-index:1;
  padding:34px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:24px;
  align-items:stretch;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .68rem;
  font-size:.82rem;
  font-weight:800;
  color:#7b3458;
  background:rgba(140,59,100,.08);
  border:1px solid rgba(140,59,100,.16);
  border-radius:var(--radius);
}
.hero-title{
  margin:14px 0 14px;
  font-size:3rem;
  line-height:1.08;
  font-weight:900;
  letter-spacing:0;
  overflow-wrap:anywhere;
}
.hero-subtitle{
  max-width:60ch;
  margin:0;
  color:var(--muted);
  font-size:1.05rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0 18px;
}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tag-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .62rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-size:.87rem;
  font-weight:700;
  white-space:nowrap;
}
.tag-chip.active{
  background:rgba(140,59,100,.1);
  border-color:rgba(140,59,100,.24);
  color:var(--primary);
}
.preview-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}
.preview-item{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(230,221,211,.96);
  border-radius:var(--radius);
  padding:14px 16px;
  min-height:88px;
}
.preview-item strong{
  display:block;
  font-size:1.02rem;
  margin-bottom:4px;
  font-weight:900;
}
.preview-item span{
  display:block;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.55;
}
.signal-panel{
  position:relative;
  overflow:hidden;
  height:100%;
  border-radius:var(--radius);
  background:linear-gradient(180deg, #2a1830 0%, #3a1630 47%, #2f2618 100%);
  color:#fff;
  padding:24px;
  box-shadow:0 18px 40px rgba(35, 28, 39, .18);
}
.signal-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 42px),
    linear-gradient(180deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 40px);
  opacity:.34;
}
.signal-top,
.signal-stack,
.signal-form{
  position:relative;
  z-index:1;
}
.signal-top h3{
  font-size:1.4rem;
  line-height:1.2;
  margin:10px 0 10px;
  font-weight:900;
}
.signal-top p{
  color:rgba(255,255,255,.78);
  margin:0;
}
.signal-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.34rem .58rem;
  border-radius:var(--radius);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:.82rem;
  font-weight:800;
}
.signal-stack{
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.signal-row{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.signal-row:first-child{border-top:none}
.signal-step{
  width:36px;
  height:36px;
  flex:0 0 auto;
  border-radius:var(--radius);
  background:rgba(255,255,255,.11);
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
}
.signal-row strong{
  display:block;
  margin-bottom:2px;
  font-size:1rem;
}
.signal-row small{
  color:rgba(255,255,255,.7);
  line-height:1.55;
}
.signal-form{
  margin-top:18px;
}
.signal-form label{
  display:block;
  margin-bottom:8px;
  font-size:.9rem;
  color:rgba(255,255,255,.84);
  font-weight:700;
}
.signal-form .form-control{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:var(--radius);
  padding:.78rem .95rem;
}
.signal-form .form-control::placeholder{color:rgba(255,255,255,.5)}
.signal-form .form-control:focus{
  border-color:rgba(255,255,255,.45);
  box-shadow:0 0 0 .18rem rgba(255,255,255,.08);
}
.hero-foot{
  margin-top:16px;
  color:var(--muted);
  font-size:.93rem;
  display:flex;
  align-items:center;
  gap:.45rem;
}
.content-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.65fr) minmax(300px, .85fr);
  gap:24px;
  align-items:start;
}
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
}
.filter-bar .tag-chip{
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.filter-bar .tag-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(35,28,39,.08);
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}
.entry-card{
  height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.entry-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-strong);
  border-color:rgba(140,59,100,.2);
}
.entry-media{
  position:relative;
  aspect-ratio:16/10;
  padding:18px;
  overflow:hidden;
  color:#fff;
}
.entry-media::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 1px, transparent 1px, transparent 28px),
    linear-gradient(45deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 32px);
  opacity:.35;
}
.media-a{background:linear-gradient(135deg, #8a3d66 0%, #c65c5f 58%, #f0b05e 100%)}
.media-b{background:linear-gradient(135deg, #2f7b68 0%, #35a36f 56%, #99c75c 100%)}
.media-c{background:linear-gradient(135deg, #55306e 0%, #834774 58%, #e08a2c 100%)}
.media-d{background:linear-gradient(135deg, #402d2f 0%, #6d3f35 60%, #b77b32 100%)}
.media-label{
  position:absolute;
  top:14px;
  right:14px;
  z-index:1;
  padding:.34rem .52rem;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius);
  font-size:.78rem;
  font-weight:800;
}
.metric-block{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}
.metric-block .number{
  font-size:2.6rem;
  line-height:1;
  font-weight:900;
}
.metric-block .title{
  display:block;
  margin-top:8px;
  font-size:1.02rem;
  font-weight:800;
}
.metric-block .note{
  margin-top:auto;
  max-width:22ch;
  font-size:.9rem;
  line-height:1.55;
  color:rgba(255,255,255,.84);
}
.entry-body{padding:18px}
.entry-body h3{
  margin:0 0 8px;
  font-size:1.18rem;
  line-height:1.34;
  font-weight:900;
  overflow-wrap:anywhere;
}
.entry-body p{
  margin:0 0 14px;
  color:var(--muted);
}
.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.32rem .55rem;
  border-radius:var(--radius);
  font-size:.84rem;
  font-weight:700;
  color:var(--muted);
  background:var(--bg-soft);
  border:1px solid var(--line);
}
.entry-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.entry-actions .btn{
  padding:.58rem .9rem;
  font-size:.92rem;
  font-weight:800;
}
.sidebar-panel{
  position:sticky;
  top:96px;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.sidebar-panel h3{
  margin:0 0 8px;
  font-size:1.28rem;
  line-height:1.3;
  font-weight:900;
}
.sidebar-panel p{
  color:var(--muted);
  margin:0;
}
.side-divider{
  margin:18px 0;
  border-top:1px solid var(--line);
}
.side-list{
  list-style:none;
  padding:0;
  margin:0;
}
.side-list li{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.side-list li:first-child{
  border-top:none;
  padding-top:0;
}
.side-list .mark{
  width:32px;
  height:32px;
  border-radius:var(--radius);
  background:rgba(140,59,100,.08);
  color:var(--primary);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-weight:900;
}
.side-list strong{
  display:block;
  margin-bottom:2px;
  font-weight:800;
}
.side-list small{
  display:block;
  color:var(--muted);
  line-height:1.55;
}
.quick-links{
  display:grid;
  gap:10px;
}
.quick-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:.82rem .95rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--bg-soft);
  font-weight:800;
}
.quick-links a:hover{
  border-color:rgba(140,59,100,.2);
  background:rgba(140,59,100,.05);
}
.tier-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.tier-card{
  position:relative;
  overflow:hidden;
  height:100%;
  min-height:230px;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tier-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-strong);
  border-color:rgba(140,59,100,.2);
}
.tier-card.featured{
  background:linear-gradient(180deg, #fff 0%, #fff8ef 100%);
  border-color:rgba(140,59,100,.22);
}
.tier-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.32rem .55rem;
  border-radius:var(--radius);
  font-size:.78rem;
  font-weight:800;
  color:var(--primary);
  background:rgba(140,59,100,.08);
  border:1px solid rgba(140,59,100,.18);
}
.tier-index{
  font-size:2.4rem;
  line-height:1;
  font-weight:900;
  margin-top:12px;
  color:var(--primary);
}
.tier-card h3{
  font-size:1.1rem;
  line-height:1.35;
  margin:10px 0 8px;
  font-weight:900;
}
.tier-card p{
  margin:0;
  color:var(--muted);
}
.tier-list{
  list-style:none;
  padding:0;
  margin:14px 0 0;
}
.tier-list li{
  display:flex;
  gap:.5rem;
  align-items:flex-start;
  margin-bottom:.45rem;
  color:var(--muted);
}
.tier-list i{
  color:var(--secondary);
  margin-top:.18rem;
}
.compare-shell{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.compare-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(300px, .9fr);
}
.compare-table-wrap{
  overflow:auto;
}
.compare-table{
  margin-bottom:0;
  min-width:700px;
}
.compare-table thead th{
  background:#f7f1e8;
  color:var(--ink);
  font-weight:900;
  border-bottom:1px solid var(--line);
  padding:1rem .9rem;
}
.compare-table tbody th,
.compare-table tbody td{
  vertical-align:middle;
  border-color:var(--line);
  padding:.95rem .9rem;
}
.compare-table tbody th{
  width:220px;
  font-weight:900;
  background:#fffdf9;
}
.compare-table .highlight-col{
  background:rgba(140,59,100,.05);
}
.compare-table .price-line{
  font-weight:900;
  color:var(--primary);
}
.compare-note{
  padding:22px;
  background:linear-gradient(180deg, #fbf7f0 0%, #fff 100%);
  border-left:1px solid var(--line);
}
.compare-note h3{
  font-size:1.22rem;
  line-height:1.3;
  margin:0 0 10px;
  font-weight:900;
}
.compare-note p{
  color:var(--muted);
  margin:0 0 16px;
}
.compare-note ul{
  padding-left:1.1rem;
  margin:0;
  color:var(--muted);
}
.compare-note li{margin-bottom:.5rem}
.note-box{
  margin-top:16px;
  padding:14px 16px;
  background:rgba(140,59,100,.06);
  border:1px solid rgba(140,59,100,.16);
  border-radius:var(--radius);
  color:var(--ink);
  font-weight:700;
}
.limited-band{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg, #221923 0%, #3c1530 52%, #906021 150%);
}
.limited-band::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 42px),
    linear-gradient(180deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 40px);
  opacity:.34;
}
.limited-inner{
  position:relative;
  z-index:1;
  padding:32px;
}
.limited-tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.34rem .58rem;
  border-radius:var(--radius);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:800;
  font-size:.82rem;
}
.limited-inner h2{
  font-size:2rem;
  line-height:1.18;
  font-weight:900;
  margin:12px 0 10px;
}
.limited-inner p{
  color:rgba(255,255,255,.78);
  margin:0;
  max-width:68ch;
}
.countdown-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
.count-box{
  text-align:center;
  padding:14px 12px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
.count-box strong{
  display:block;
  font-size:2rem;
  line-height:1;
  font-weight:900;
  margin-bottom:4px;
}
.count-box span{
  color:rgba(255,255,255,.74);
  font-size:.9rem;
  font-weight:700;
}
.limited-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.limited-actions .btn{
  padding:.72rem 1rem;
  font-weight:800;
}
.limited-foot{
  margin-top:14px;
  color:rgba(255,255,255,.72);
  font-size:.92rem;
  display:flex;
  align-items:center;
  gap:.45rem;
}
.accordion-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  margin-bottom:12px;
}
.accordion-button{
  font-weight:800;
  color:var(--ink);
  padding:1rem 1.05rem;
}
.accordion-button:not(.collapsed){
  color:var(--primary);
  background:rgba(140,59,100,.06);
  box-shadow:none;
}
.accordion-button:focus{box-shadow:none}
.accordion-body{
  color:var(--muted);
  padding:0 1.05rem 1rem;
}
.contact-shell{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-strong);
}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(320px, 1.05fr);
}
.contact-copy{
  padding:30px;
  background:linear-gradient(180deg, #fbf7f0 0%, #fff 100%);
  border-right:1px solid var(--line);
}
.contact-copy h2{
  font-size:2rem;
  line-height:1.18;
  margin:0 0 12px;
  font-weight:900;
}
.contact-copy p{
  color:var(--muted);
  margin:0 0 18px;
}
.contact-points{
  list-style:none;
  padding:0;
  margin:0;
}
.contact-points li{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.contact-points li:first-child{
  border-top:none;
  padding-top:0;
}
.contact-points .mark{
  width:32px;
  height:32px;
  border-radius:var(--radius);
  background:rgba(140,59,100,.08);
  color:var(--primary);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-weight:900;
}
.contact-points strong{
  display:block;
  font-weight:800;
}
.contact-points small{
  color:var(--muted);
  display:block;
  line-height:1.55;
}
.contact-form-wrap{
  padding:30px;
}
.form-grid{
  display:grid;
  gap:16px;
}
.form-field label{
  display:block;
  margin-bottom:8px;
  font-weight:800;
}
.form-control,
.form-select,
textarea{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:.84rem .95rem;
}
.form-control::placeholder,
textarea::placeholder{color:#8a808a}
.form-control:focus,
.form-select:focus,
textarea:focus{
  border-color:rgba(140,59,100,.42);
  box-shadow:0 0 0 .2rem rgba(140,59,100,.11);
}
textarea{min-height:140px; resize:vertical}
.form-note{
  font-size:.92rem;
  color:var(--muted);
  margin-top:10px;
}
.footer{
  background:#1f1721;
  color:rgba(255,255,255,.86);
  padding:34px 0 26px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer .brand-line{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}
.footer .brand-mark{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow:none;
}
.footer .site-name{
  font-size:1.08rem;
  font-weight:900;
  color:#fff;
}
.footer small{color:rgba(255,255,255,.72)}
.footer p{
  color:rgba(255,255,255,.72);
  margin-bottom:0;
}
.footer-links{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  padding:0;
  margin:18px 0 20px;
}
.footer-links a{
  color:#fff;
  opacity:.82;
  border-bottom:1px solid transparent;
}
.footer-links a:hover{
  opacity:1;
  border-bottom-color:rgba(255,255,255,.42);
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.92rem;
}
.badge-inline{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:#fff;
  opacity:.88;
}
@media (max-width: 1199.98px){
  .hero-title{font-size:2.7rem}
}
@media (max-width: 991.98px){
  .navbar-collapse{
    padding-top:1rem;
  }
  .navbar-nav{
    margin-bottom:1rem;
  }
  .search-box{
    width:100%;
    max-width:none;
  }
  .hero-grid,
  .content-layout,
  .compare-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }
  .sidebar-panel{
    position:relative;
    top:0;
    margin-top:24px;
  }
  .compare-note{
    border-left:none;
    border-top:1px solid var(--line);
  }
  .contact-copy{
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .tier-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .feature-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 767.98px){
  .hero-inner,
  .limited-inner,
  .contact-copy,
  .contact-form-wrap{
    padding:22px;
  }
  .hero-title{
    font-size:2.2rem;
    line-height:1.12;
  }
  .section-head h2,
  .limited-inner h2,
  .contact-copy h2{
    font-size:1.6rem;
  }
  .preview-strip{
    grid-template-columns:1fr;
  }
  .countdown-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .compare-table{
    min-width:640px;
  }
}
@media (max-width: 575.98px){
  .hero-band{padding-top:18px}
  .navbar-brand .brand-text{font-size:.98rem}
  .hero-actions .btn,
  .limited-actions .btn{
    width:100%;
    justify-content:center;
  }
  .hero-title{font-size:1.95rem}
  .tier-grid{
    grid-template-columns:1fr;
  }
  .countdown-grid{
    grid-template-columns:1fr 1fr;
  }
  .footer-bottom{
    flex-direction:column;
  }
  .form-control,
  .form-select,
  textarea{
    padding:.8rem .9rem;
  }
}