/* roulang page: index */
:root {
      --bg: #f7f2ea;
      --bg-soft: #eee7dd;
      --panel: #fbfaf7;
      --panel-2: #f4eee4;
      --ink: #2b2a27;
      --ink-2: #5e574f;
      --muted: #7b7369;
      --line: rgba(43, 42, 39, 0.12);
      --accent: #b58a4a;
      --accent-2: #8a6332;
      --accent-soft: #ead8b8;
      --deep: #201f1d;
      --blue-gray: #4b5563;
      --shadow: 0 18px 50px rgba(43, 42, 39, 0.08);
      --shadow-soft: 0 12px 28px rgba(43, 42, 39, 0.06);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --container: 1240px;
      --ease: 180ms ease;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,0)),
        var(--bg);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      line-height: 1.75;
      letter-spacing: 0;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a { color: inherit; text-decoration: none; }
    a:hover { color: inherit; }
    img { max-width: 100%; display: block; }
    button, input, textarea, select { font: inherit; }
    ::selection { background: rgba(181, 138, 74, 0.2); }

    .page-shell { position: relative; }
    .container { max-width: var(--container); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1040;
      background: rgba(247, 242, 234, 0.86);
      backdrop-filter: blur(0px);
      border-bottom: 1px solid rgba(43, 42, 39, 0.08);
      transition: background var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .site-header.is-scrolled {
      background: rgba(251, 250, 247, 0.98);
      box-shadow: 0 10px 24px rgba(43, 42, 39, 0.06);
    }
    .navbar {
      padding: 0.9rem 0;
    }
    .navbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--ink);
      font-size: 1.02rem;
      font-weight: 800;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .navbar-toggler {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      border: 1px solid rgba(43, 42, 39, 0.12) !important;
      background: rgba(251, 250, 247, 0.94);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .navbar-toggler:focus {
      box-shadow: 0 0 0 4px rgba(181, 138, 74, 0.12);
    }
    .brand-mark {
      width: 2.1rem;
      height: 2.1rem;
      border-radius: 0.85rem;
      border: 1px solid rgba(181, 138, 74, 0.28);
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(236,224,203,.75));
      color: var(--accent-2);
      font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
      flex: 0 0 auto;
    }
    .brand-copy {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }
    .brand-copy small {
      color: var(--muted);
      font-weight: 500;
      font-size: 0.75rem;
      margin-top: 0.14rem;
    }

    .nav-links {
      gap: 0.35rem;
      align-items: center;
    }
    .nav-links .nav-link {
      color: var(--ink-2);
      font-weight: 600;
      border-radius: 999px;
      padding: 0.68rem 1rem;
      transition: background var(--ease), color var(--ease), transform var(--ease);
    }
    .nav-links .nav-link:hover,
    .nav-links .nav-link:focus-visible,
    .nav-links .nav-link.active {
      background: rgba(181, 138, 74, 0.12);
      color: var(--ink);
      transform: translateY(-1px);
    }

    .search-box {
      min-width: 280px;
      max-width: 360px;
      position: relative;
      flex: 1 1 320px;
    }
    .search-box input {
      width: 100%;
      height: 48px;
      border-radius: 999px;
      border: 1px solid rgba(43, 42, 39, 0.14);
      background: rgba(251, 250, 247, 0.92);
      padding: 0.85rem 1rem 0.85rem 2.85rem;
      color: var(--ink);
      outline: none;
      transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
    }
    .search-box input::placeholder { color: #8a8378; }
    .search-box input:focus {
      border-color: rgba(181, 138, 74, 0.52);
      box-shadow: 0 0 0 4px rgba(181, 138, 74, 0.13);
      background: #fff;
    }
    .search-box .bi-search {
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--accent-2);
      pointer-events: none;
    }

    .btn-ink,
    .btn-soft {
      border: 0;
      font-weight: 700;
      border-radius: 999px;
      padding: 0.86rem 1.2rem;
      transition: transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease), border-color var(--ease);
    }
    .btn-ink {
      background: var(--deep);
      color: #fbfaf7;
      box-shadow: 0 10px 22px rgba(32, 31, 29, 0.12);
    }
    .btn-ink:hover,
    .btn-ink:focus-visible {
      color: #fff;
      background: #2d2b28;
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(32, 31, 29, 0.16);
    }
    .btn-soft {
      background: transparent;
      color: var(--ink);
      border: 1px solid rgba(43, 42, 39, 0.14);
    }
    .btn-soft:hover,
    .btn-soft:focus-visible {
      color: var(--ink);
      background: rgba(181, 138, 74, 0.1);
      border-color: rgba(181, 138, 74, 0.35);
      transform: translateY(-1px);
    }
    .btn .bi { font-size: 0.95rem; }

    .offcanvas {
      background: #faf7f1;
      border-left: 1px solid rgba(43, 42, 39, 0.08);
    }
    .offcanvas .btn-close { box-shadow: none; opacity: .85; }
    .offcanvas .nav-link {
      border-radius: 16px;
      padding: 0.9rem 1rem;
      color: var(--ink-2);
      font-weight: 600;
    }
    .offcanvas .nav-link.active,
    .offcanvas .nav-link:hover,
    .offcanvas .nav-link:focus-visible {
      background: rgba(181, 138, 74, 0.12);
      color: var(--ink);
    }

    .section {
      padding: 88px 0;
    }
    .section.section-alt {
      background: linear-gradient(180deg, rgba(238,231,221,0.38), rgba(238,231,221,0.58));
      border-top: 1px solid rgba(43, 42, 39, 0.05);
      border-bottom: 1px solid rgba(43, 42, 39, 0.05);
    }
    .section-head {
      margin-bottom: 2rem;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--accent-2);
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: none;
      margin-bottom: 0.8rem;
    }
    .eyebrow::before {
      content: "";
      width: 1.75rem;
      height: 1px;
      background: currentColor;
      opacity: 0.6;
    }
    .section-title {
      font-size: clamp(1.95rem, 2vw + 1rem, 3rem);
      line-height: 1.12;
      margin: 0;
      color: var(--ink);
      font-weight: 800;
      letter-spacing: 0;
    }
    .section-desc {
      margin: 0;
      max-width: 760px;
      color: var(--ink-2);
      font-size: 1rem;
    }

    .soft-card {
      background: rgba(251, 250, 247, 0.96);
      border: 1px solid rgba(43, 42, 39, 0.1);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
    }
    .soft-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
      border-color: rgba(181, 138, 74, 0.3);
    }

    .hero-section {
      padding: 32px 0 0;
    }
    .hero-panel {
      position: relative;
      border-radius: 32px;
      overflow: hidden;
      border: 1px solid rgba(43, 42, 39, 0.08);
      background:
        linear-gradient(135deg, rgba(251, 250, 247, 0.96) 0%, rgba(247, 242, 234, 0.9) 45%, rgba(238, 231, 221, 0.96) 100%);
      box-shadow: 0 24px 70px rgba(43, 42, 39, 0.1);
    }
    .hero-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(43,42,39,0.02) 1px, transparent 1px),
        linear-gradient(180deg, rgba(43,42,39,0.02) 1px, transparent 1px);
      background-size: 42px 42px;
      opacity: 0.5;
      pointer-events: none;
    }
    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.06fr 0.94fr;
      gap: 2rem;
      align-items: stretch;
      padding: 1.4rem;
    }
    .hero-copy {
      padding: 2.4rem 1.3rem 2rem 1.3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 640px;
    }
    .hero-copy h1 {
      font-size: clamp(2.3rem, 3vw + 1rem, 4.05rem);
      line-height: 1.06;
      font-weight: 800;
      margin: 0 0 1rem;
      letter-spacing: 0;
      max-width: 11ch;
    }
    .hero-copy .lead {
      font-size: 1.04rem;
      line-height: 1.8;
      color: var(--ink-2);
      max-width: 42rem;
      margin-bottom: 1.45rem;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1.2rem;
    }
    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin-top: auto;
    }
    .trust-pill,
    .tag-pill,
    .mini-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      border-radius: 999px;
      border: 1px solid rgba(43, 42, 39, 0.11);
      background: rgba(255, 255, 255, 0.7);
      color: var(--ink-2);
      padding: 0.5rem 0.8rem;
      font-size: 0.86rem;
      font-weight: 600;
      line-height: 1;
    }
    .trust-pill i,
    .mini-badge i { color: var(--accent-2); }

    .hero-search {
      margin: 1rem 0 1.25rem;
      max-width: 34rem;
      position: relative;
    }
    .hero-search input {
      width: 100%;
      height: 56px;
      border-radius: 999px;
      border: 1px solid rgba(43, 42, 39, 0.14);
      background: rgba(255, 255, 255, 0.82);
      padding: 0.9rem 1rem 0.9rem 3rem;
      outline: none;
      transition: border-color var(--ease), box-shadow var(--ease);
    }
    .hero-search input:focus {
      border-color: rgba(181, 138, 74, 0.55);
      box-shadow: 0 0 0 4px rgba(181, 138, 74, 0.12);
    }
    .hero-search .bi-search {
      position: absolute;
      left: 1.05rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--accent-2);
      pointer-events: none;
    }

    .hero-note {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      margin-top: 1rem;
    }
    .note-box {
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(43,42,39,.08);
      border-radius: 18px;
      padding: 0.95rem 1rem;
    }
    .note-box strong {
      display: block;
      font-size: 0.98rem;
      margin-bottom: 0.15rem;
    }
    .note-box span {
      color: var(--ink-2);
      font-size: 0.9rem;
      line-height: 1.65;
    }

    .hero-visual {
      min-height: 640px;
      padding: 1rem;
      display: grid;
      align-content: center;
    }
    .visual-frame {
      position: relative;
      background:
        linear-gradient(180deg, rgba(32,31,29,0.04), rgba(32,31,29,0.01)),
        linear-gradient(135deg, #2e2c29 0%, #3b3834 50%, #4d4a45 100%);
      border-radius: 28px;
      padding: 1.1rem;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 24px 48px rgba(32,31,29,.18);
      overflow: hidden;
    }
    .visual-frame::before,
    .visual-frame::after {
      content: "";
      position: absolute;
      inset: auto auto 0 0;
      width: 100%;
      height: 100%;
      background:
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 44px 44px;
      opacity: .35;
      pointer-events: none;
    }
    .visual-topline {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(251,250,247,.85);
      margin-bottom: 1rem;
      font-size: 0.86rem;
      letter-spacing: 0;
    }
    .visual-topline .dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 50%;
      background: #d5c4a0;
      display: inline-block;
      margin-right: 0.4rem;
    }
    .visual-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.95rem;
    }
    .visual-card {
      min-height: 138px;
      background: rgba(251,250,247,.08);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 20px;
      padding: 1rem;
      color: #fbfaf7;
      backdrop-filter: blur(0px);
    }
    .visual-card.light {
      background: rgba(251,250,247,.92);
      color: var(--ink);
      border-color: rgba(255,255,255,.65);
    }
    .visual-card .tiny {
      color: inherit;
      opacity: .72;
      font-size: .82rem;
      margin-bottom: .3rem;
    }
    .visual-card h3 {
      font-size: 1.08rem;
      margin: 0 0 .4rem;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0;
    }
    .visual-card p {
      font-size: .92rem;
      margin: 0;
      line-height: 1.65;
      opacity: .9;
    }
    .matrix {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.55rem;
      margin-top: 0.9rem;
    }
    .matrix span {
      display: grid;
      place-items: center;
      min-height: 58px;
      border-radius: 16px;
      background: rgba(251,250,247,.08);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(251,250,247,.88);
      font-size: .88rem;
      font-weight: 600;
      text-align: center;
      padding: .45rem;
    }
    .list-mini {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: .6rem;
    }
    .list-mini li {
      display: flex;
      gap: .6rem;
      align-items: flex-start;
      color: inherit;
      font-size: .92rem;
      line-height: 1.55;
    }
    .list-mini i { color: #d7b97f; margin-top: .18rem; }

    .section-kicker {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }
    .section-kicker .small-note {
      color: var(--muted);
      font-size: 0.92rem;
    }

    .timeline-wrap {
      position: relative;
      padding-top: 0.75rem;
    }
    .timeline-line {
      position: absolute;
      left: 1.05rem;
      top: 1.7rem;
      bottom: 1rem;
      width: 1px;
      background: rgba(181, 138, 74, 0.26);
    }
    .timeline-item {
      position: relative;
      padding-left: 3.15rem;
      padding-bottom: 1.15rem;
    }
    .timeline-dot {
      position: absolute;
      left: 0.35rem;
      top: 0.24rem;
      width: 1.4rem;
      height: 1.4rem;
      border-radius: 999px;
      background: #f6e5c6;
      border: 3px solid #fff8eb;
      box-shadow: 0 0 0 1px rgba(181, 138, 74, 0.22);
      display: grid;
      place-items: center;
      color: var(--accent-2);
      font-size: 0.78rem;
      font-weight: 800;
    }
    .timeline-item h3 {
      margin: 0 0 0.35rem;
      font-size: 1.12rem;
      font-weight: 700;
    }
    .timeline-item p {
      margin: 0;
      color: var(--ink-2);
      font-size: 0.97rem;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: 1.18fr 0.82fr 0.82fr;
      gap: 1rem;
    }
    .feature-main,
    .feature-card {
      padding: 1.3rem;
      height: 100%;
    }
    .feature-main h3,
    .feature-card h3,
    .resource-card h3,
    .compare-card h3,
    .info-card h3 {
      font-size: 1.12rem;
      margin: 0 0 .55rem;
      font-weight: 750;
      line-height: 1.4;
    }
    .feature-main p,
    .feature-card p,
    .resource-card p,
    .compare-card p,
    .info-card p {
      margin: 0;
      color: var(--ink-2);
      font-size: 0.96rem;
      line-height: 1.74;
    }
    .feature-main .big-quote {
      font-size: 1.35rem;
      line-height: 1.5;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 0.9rem;
      letter-spacing: 0;
    }
    .feature-main .meta-row,
    .resource-meta,
    .compare-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 1rem;
    }

    .resource-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }
    .resource-card {
      padding: 1.25rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 240px;
    }
    .resource-card .tag {
      margin-bottom: 0.9rem;
    }
    .resource-card .count {
      font-size: 1.9rem;
      font-weight: 800;
      letter-spacing: 0;
      color: var(--accent-2);
      line-height: 1;
    }
    .resource-card .entry-link {
      margin-top: 1rem;
      font-weight: 700;
      color: var(--ink);
    }

    .loop-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 1rem;
    }
    .feed-list {
      display: grid;
      gap: 0.9rem;
    }
    .feed-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1rem;
      align-items: start;
      padding: 1.08rem 1.15rem;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(43, 42, 39, 0.1);
      background: rgba(255, 255, 255, 0.82);
      transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
    }
    .feed-item:hover {
      transform: translateY(-2px);
      border-color: rgba(181, 138, 74, 0.28);
      box-shadow: var(--shadow-soft);
    }
    .feed-item h3 {
      font-size: 1.05rem;
      margin: 0 0 .35rem;
      font-weight: 700;
      line-height: 1.48;
    }
    .feed-item p {
      margin: 0;
      color: var(--ink-2);
      font-size: 0.95rem;
      line-height: 1.7;
    }
    .feed-meta {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      align-items: end;
      min-width: 98px;
      color: var(--muted);
      font-size: 0.82rem;
      text-align: right;
    }
    .feed-meta .date {
      padding: .38rem .62rem;
      border-radius: 999px;
      background: rgba(181, 138, 74, 0.1);
      color: var(--accent-2);
      font-weight: 700;
    }
    .feed-meta a {
      color: var(--ink);
      font-weight: 700;
    }
    .sidebar-card {
      padding: 1.2rem;
      position: sticky;
      top: 96px;
    }
    .check-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 0.8rem;
    }
    .check-list li {
      display: flex;
      gap: 0.72rem;
      align-items: flex-start;
      color: var(--ink-2);
      line-height: 1.65;
      font-size: 0.95rem;
    }
    .check-list i {
      margin-top: 0.2rem;
      color: var(--accent-2);
      flex: 0 0 auto;
    }

    .compare-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }
    .compare-card {
      padding: 1.3rem;
      position: relative;
    }
    .compare-card.featured {
      background: linear-gradient(180deg, rgba(254, 248, 236, 0.96), rgba(251, 250, 247, 0.96));
      border-color: rgba(181, 138, 74, 0.35);
      box-shadow: 0 22px 40px rgba(181, 138, 74, 0.1);
    }
    .compare-card .price-block {
      font-size: 0.92rem;
      color: var(--muted);
      margin-bottom: 0.9rem;
    }
    .compare-card .price-block strong {
      font-size: 1.7rem;
      color: var(--ink);
      margin-right: 0.2rem;
    }
    .compare-card ul {
      list-style: none;
      padding: 0;
      margin: 0.9rem 0 0;
      display: grid;
      gap: 0.62rem;
    }
    .compare-card li {
      position: relative;
      padding-left: 1.25rem;
      color: var(--ink-2);
      font-size: 0.95rem;
      line-height: 1.65;
    }
    .compare-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.62rem;
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 50%;
      background: rgba(181, 138, 74, 0.8);
    }
    .compare-card .card-cta {
      margin-top: 1.2rem;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-weight: 700;
      color: var(--ink);
    }

    .accordion-shell .accordion-item {
      border: 1px solid rgba(43, 42, 39, 0.1);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(251, 250, 247, 0.92);
      box-shadow: var(--shadow-soft);
      margin-bottom: 0.85rem;
    }
    .accordion-shell .accordion-button {
      background: transparent;
      color: var(--ink);
      font-weight: 700;
      padding: 1.05rem 1.15rem;
      box-shadow: none;
    }
    .accordion-shell .accordion-button:not(.collapsed) {
      background: rgba(181, 138, 74, 0.08);
      color: var(--ink);
    }
    .accordion-shell .accordion-button:focus {
      box-shadow: 0 0 0 4px rgba(181, 138, 74, 0.12);
      border-color: rgba(181, 138, 74, 0.4);
    }
    .accordion-shell .accordion-button::after {
      background-image: none;
      content: "+";
      font-size: 1.4rem;
      font-weight: 400;
      width: auto;
      height: auto;
      margin-left: auto;
      color: var(--accent-2);
      transition: transform var(--ease);
    }
    .accordion-shell .accordion-button:not(.collapsed)::after {
      transform: rotate(45deg);
    }
    .accordion-shell .accordion-body {
      color: var(--ink-2);
      padding: 0 1.15rem 1.1rem;
      line-height: 1.8;
    }

    .cta-band {
      position: relative;
      padding: 92px 0;
      background:
        linear-gradient(180deg, rgba(32, 31, 29, 0.95), rgba(43, 42, 39, 0.98)),
        linear-gradient(135deg, rgba(181, 138, 74, 0.16), rgba(181, 138, 74, 0));
      color: #fbfaf7;
    }
    .cta-band .section-title,
    .cta-band .section-desc,
    .cta-band .small-note {
      color: #fbfaf7;
    }
    .cta-band .small-note {
      opacity: 0.78;
    }
    .cta-box {
      padding: 0;
      background: transparent;
      box-shadow: none;
    }
    .cta-actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-top: 1.5rem;
    }
    .btn-light-ghost {
      background: rgba(251, 250, 247, 0.08);
      color: #fbfaf7;
      border: 1px solid rgba(251, 250, 247, 0.18);
    }
    .btn-light-ghost:hover,
    .btn-light-ghost:focus-visible {
      background: rgba(251, 250, 247, 0.12);
      color: #fbfaf7;
      border-color: rgba(251, 250, 247, 0.3);
      transform: translateY(-1px);
    }
    .cta-links {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }
    .cta-links a {
      color: rgba(251, 250, 247, 0.86);
      font-weight: 600;
      text-decoration: underline;
      text-decoration-color: rgba(251, 250, 247, 0.26);
      text-underline-offset: 0.18em;
    }

    .site-footer {
      background: var(--deep);
      color: rgba(251, 250, 247, 0.86);
      padding: 3rem 0 2rem;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .site-footer .brand {
      color: #fbfaf7;
      font-weight: 800;
      font-size: 1.1rem;
      margin-bottom: 0.8rem;
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
    }
    .site-footer p,
    .site-footer li,
    .site-footer a {
      color: rgba(251, 250, 247, 0.78);
    }
    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 0.55rem;
    }
    .footer-links a:hover {
      color: #fff;
    }
    .footer-note {
      margin-top: 1.25rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255,255,255,0.08);
      font-size: 0.92rem;
      color: rgba(251, 250, 247, 0.68);
    }

    .breadcrumb-lite {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 0.9rem;
      margin-bottom: 1rem;
    }
    .breadcrumb-lite span + span::before {
      content: "/";
      margin-right: 0.45rem;
      color: rgba(43, 42, 39, 0.36);
    }

    .mini-sep {
      width: 100%;
      height: 1px;
      background: rgba(43, 42, 39, 0.08);
      margin: 0.8rem 0;
    }

    @media (max-width: 1199.98px) {
      .hero-grid,
      .loop-grid,
      .feature-grid,
      .resource-grid,
      .compare-grid {
        grid-template-columns: 1fr;
      }
      .hero-copy,
      .hero-visual {
        min-height: auto;
      }
      .sidebar-card { position: static; }
      .hero-note {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 991.98px) {
      .navbar .nav-links,
      .navbar .search-box,
      .navbar .desktop-cta {
        display: none !important;
      }
      .section { padding: 64px 0; }
      .hero-copy { padding: 1.2rem; }
      .hero-copy h1 { max-width: 100%; }
      .hero-panel { border-radius: 26px; }
      .hero-grid { padding: 0.95rem; gap: 1rem; }
      .visual-grid { grid-template-columns: 1fr; }
      .timeline-line { left: 0.86rem; }
      .feed-item { grid-template-columns: 1fr; }
      .feed-meta { align-items: flex-start; text-align: left; }
      .section-head { align-items: start; }
    }
    @media (max-width: 767.98px) {
      .navbar { padding: 0.75rem 0; }
      .navbar-brand { font-size: 0.96rem; }
      .brand-copy small { font-size: 0.72rem; }
      .hero-copy h1 { font-size: clamp(2rem, 8vw, 2.7rem); }
      .hero-copy .lead { font-size: 0.98rem; }
      .section-title { font-size: clamp(1.55rem, 6vw, 2.25rem); }
      .hero-note { gap: 0.6rem; }
      .note-box { padding: 0.85rem 0.9rem; }
      .section { padding: 56px 0; }
      .hero-panel { border-radius: 22px; }
      .soft-card, .accordion-shell .accordion-item, .feed-item { border-radius: 18px; }
      .cta-band { padding: 72px 0; }
      .site-footer { padding: 2.4rem 0 1.6rem; }
      .search-box { min-width: 0; }
    }

/* roulang page: category2 */
:root{
      --bg: #f7f2ea;
      --bg-soft: #fbfaf7;
      --panel: #fffdf9;
      --panel-2: #f0e8db;
      --ink: #2b2a27;
      --muted: #6f6a62;
      --line: rgba(43,42,39,.10);
      --line-strong: rgba(181,138,74,.28);
      --accent: #b58a4a;
      --accent-dark: #8f6932;
      --accent-soft: rgba(181,138,74,.12);
      --shadow: 0 18px 50px rgba(43,42,39,.08);
      --shadow-soft: 0 10px 30px rgba(43,42,39,.06);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --container: 1220px;
      --transition: all .25s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      color:var(--ink);
      line-height:1.75;
      background:
        radial-gradient(circle at top left, rgba(181,138,74,.12), transparent 26%),
        radial-gradient(circle at 90% 10%, rgba(111,106,98,.08), transparent 28%),
        linear-gradient(180deg,#fbfaf7 0%, #f6f0e7 100%);
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    a:hover{color:var(--accent-dark)}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    .container{max-width:var(--container)}
    ::selection{background:rgba(181,138,74,.22);color:var(--ink)}
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      background:rgba(251,250,247,.92);
      border-bottom:1px solid rgba(43,42,39,.08);
      transition:var(--transition);
    }
    .site-header.scrolled{
      background:rgba(251,250,247,.98);
      box-shadow:0 10px 30px rgba(43,42,39,.06);
    }
    .navbar{
      padding:1rem 0;
    }
    .navbar-brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      color:var(--ink);
      font-weight:700;
      letter-spacing:.02em;
    }
    .brand-mark{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      border:1px solid rgba(181,138,74,.35);
      background:linear-gradient(180deg,#fffdf9 0%, #f3eadc 100%);
      color:var(--ink);
      font-size:1rem;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
      flex:0 0 auto;
    }
    .brand-copy{
      display:flex;
      flex-direction:column;
      line-height:1.1;
      font-size:1rem;
    }
    .brand-copy small{
      display:block;
      margin-top:.35rem;
      color:var(--muted);
      font-weight:500;
      font-size:.76rem;
      letter-spacing:.08em;
    }
    .nav-links{
      gap:.35rem;
    }
    .nav-links .nav-link{
      color:var(--muted);
      font-weight:600;
      padding:.7rem 1rem;
      border-radius:999px;
    }
    .nav-links .nav-link:hover,
    .nav-links .nav-link:focus{
      color:var(--ink);
      background:rgba(181,138,74,.09);
    }
    .nav-links .nav-link.active{
      color:var(--ink);
      background:rgba(181,138,74,.14);
      box-shadow:inset 0 0 0 1px rgba(181,138,74,.18);
    }
    .search-box{
      display:flex;
      align-items:center;
      gap:.65rem;
      min-width:320px;
      padding:.78rem 1rem;
      border:1px solid rgba(43,42,39,.12);
      border-radius:999px;
      background:rgba(255,255,255,.72);
      box-shadow:0 8px 24px rgba(43,42,39,.03);
      transition:var(--transition);
    }
    .search-box:focus-within{
      border-color:rgba(181,138,74,.38);
      box-shadow:0 0 0 4px rgba(181,138,74,.12);
      background:#fff;
    }
    .search-box i{color:var(--accent-dark);font-size:1rem}
    .search-box input{
      width:100%;
      border:none;
      outline:none;
      background:transparent;
      color:var(--ink);
      padding:0;
      font-size:.95rem;
    }
    .search-box input::placeholder{color:#8a847b}
    .btn-ink,
    .btn-ink:focus{
      background:var(--ink);
      color:#fff;
      border:1px solid var(--ink);
      border-radius:999px;
      padding:.82rem 1.15rem;
      box-shadow:0 14px 30px rgba(43,42,39,.12);
      transition:var(--transition);
    }
    .btn-ink:hover{
      background:#1f1e1b;
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 18px 34px rgba(43,42,39,.16);
    }
    .btn-soft,
    .btn-soft:focus{
      background:rgba(255,255,255,.7);
      color:var(--ink);
      border:1px solid rgba(43,42,39,.14);
      border-radius:999px;
      padding:.82rem 1.15rem;
      transition:var(--transition);
    }
    .btn-soft:hover{
      background:#fff;
      border-color:rgba(181,138,74,.4);
      color:var(--ink);
      transform:translateY(-1px);
      box-shadow:0 16px 30px rgba(43,42,39,.08);
    }
    .btn-wide{min-width:170px}
    .btn .bi{font-size:.95rem;vertical-align:-.1em}
    .badge-soft{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.38rem .78rem;
      border-radius:999px;
      background:rgba(181,138,74,.10);
      color:var(--accent-dark);
      font-size:.82rem;
      font-weight:700;
      letter-spacing:.02em;
    }
    .badge-ghost{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.35rem .72rem;
      border-radius:999px;
      background:rgba(43,42,39,.04);
      color:var(--muted);
      font-size:.8rem;
      border:1px solid rgba(43,42,39,.08);
    }
    .section{
      padding:88px 0;
    }
    .section-sm{
      padding:72px 0;
    }
    .section-light{
      background:rgba(255,255,255,.44);
      border-top:1px solid rgba(43,42,39,.05);
      border-bottom:1px solid rgba(43,42,39,.05);
    }
    .eyebrow{
      color:var(--accent-dark);
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.16em;
      text-transform:uppercase;
      margin-bottom:.9rem;
    }
    .section-title{
      margin-bottom:2rem;
    }
    .section-title h2{
      margin:0;
      font-size:clamp(2rem, 3vw, 3rem);
      line-height:1.15;
      letter-spacing:-.02em;
      color:var(--ink);
    }
    .section-title p{
      margin:.95rem 0 0;
      max-width:760px;
      color:var(--muted);
      font-size:1.03rem;
    }
    .hero-section{
      padding:84px 0 44px;
    }
    .hero-shell{
      position:relative;
      padding:22px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.84), rgba(242,234,223,.74)),
        radial-gradient(circle at top right, rgba(181,138,74,.12), transparent 22%);
      border:1px solid rgba(43,42,39,.08);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:18px;
      border-radius:calc(var(--radius-xl) - 10px);
      border:1px solid rgba(181,138,74,.10);
      pointer-events:none;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:28px;
      align-items:stretch;
      position:relative;
      z-index:1;
      min-height:520px;
    }
    .hero-content{
      padding:20px 12px 22px 10px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .crumbs{
      color:var(--muted);
      font-size:.88rem;
      margin-bottom:1rem;
    }
    .crumbs a{
      color:var(--muted);
    }
    .crumbs a:hover{color:var(--accent-dark)}
    .hero-title{
      margin:0;
      font-size:clamp(2.4rem, 4.8vw, 4.2rem);
      line-height:1.08;
      letter-spacing:-.03em;
      color:var(--ink);
      max-width:10.5em;
    }
    .hero-lead{
      margin:1.2rem 0 0;
      font-size:1.08rem;
      color:var(--muted);
      max-width:42rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.9rem;
      margin-top:1.6rem;
    }
    .hero-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      margin-top:1.5rem;
    }
    .hero-tags .badge-ghost{
      background:rgba(255,255,255,.66);
    }
    .hero-visual{
      position:relative;
      padding:22px;
      border-radius:calc(var(--radius-xl) - 4px);
      background:
        linear-gradient(180deg, rgba(43,42,39,.94) 0%, rgba(43,42,39,.82) 100%),
        radial-gradient(circle at 20% 0%, rgba(181,138,74,.30), transparent 30%);
      color:#f9f4ec;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--shadow);
      overflow:hidden;
    }
    .hero-visual::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(115deg, transparent 0 28%, rgba(181,138,74,.08) 28% 29%, transparent 29% 100%),
        linear-gradient(180deg, transparent 0 62%, rgba(255,255,255,.03) 62% 63%, transparent 63% 100%);
      opacity:.9;
      pointer-events:none;
    }
    .hero-visual .visual-inner{
      position:relative;
      z-index:1;
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:16px;
    }
    .visual-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .visual-top .mini-label{
      font-size:.82rem;
      color:rgba(255,255,255,.78);
      letter-spacing:.14em;
      text-transform:uppercase;
    }
    .status-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .status-card{
      min-height:128px;
      padding:16px;
      border-radius:20px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.09);
      backdrop-filter:none;
    }
    .status-card .status-kicker{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-size:.78rem;
      color:rgba(255,255,255,.72);
      margin-bottom:.55rem;
    }
    .status-card h3{
      margin:0;
      font-size:1.12rem;
      color:#fff;
    }
    .status-card p{
      margin:.5rem 0 0;
      color:rgba(255,255,255,.74);
      font-size:.92rem;
      line-height:1.6;
    }
    .status-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.7rem;
    }
    .status-list li{
      display:flex;
      align-items:flex-start;
      gap:.7rem;
      color:rgba(255,255,255,.84);
      font-size:.92rem;
    }
    .status-list .dot{
      width:9px;
      height:9px;
      margin-top:.55rem;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(181,138,74,.22);
      flex:0 0 auto;
    }
    .hero-note{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      padding-top:2px;
    }
    .hero-note span{
      padding:.42rem .7rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.06);
      font-size:.82rem;
      color:rgba(255,255,255,.8);
    }
    .floating-card{
      position:absolute;
      right:18px;
      bottom:18px;
      width:min(290px, 44%);
      border-radius:20px;
      background:rgba(255,253,249,.96);
      color:var(--ink);
      box-shadow:0 14px 34px rgba(0,0,0,.16);
      padding:16px 16px 14px;
      border:1px solid rgba(255,255,255,.45);
      z-index:2;
    }
    .floating-card .small{
      color:var(--muted);
    }
    .floating-card h4{
      margin:.25rem 0 .6rem;
      font-size:1rem;
    }
    .floating-card .mini-check{
      display:grid;
      gap:.45rem;
      margin:0;
      padding:0;
      list-style:none;
      color:var(--muted);
      font-size:.88rem;
    }
    .floating-card .mini-check li{
      display:flex;
      align-items:center;
      gap:.5rem;
    }
    .floating-card .mini-check i{
      color:var(--accent-dark);
    }
    .check-card{
      height:100%;
      padding:22px;
      border:1px solid rgba(43,42,39,.08);
      border-radius:var(--radius-lg);
      background:linear-gradient(180deg,#fff, #faf6ef);
      box-shadow:var(--shadow-soft);
      transition:var(--transition);
    }
    .check-card:hover{
      transform:translateY(-3px);
      box-shadow:0 20px 38px rgba(43,42,39,.08);
      border-color:rgba(181,138,74,.22);
    }
    .check-icon{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:var(--accent-dark);
      background:rgba(181,138,74,.10);
      margin-bottom:1rem;
      font-size:1.2rem;
    }
    .check-card h3{
      margin:0 0 .55rem;
      font-size:1.15rem;
    }
    .check-card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-size:.96rem;
    }
    .check-card .mini{
      display:inline-flex;
      margin-top:.9rem;
      color:var(--accent-dark);
      font-size:.86rem;
      font-weight:700;
    }
    .timeline-wrap{
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(247,240,231,.72));
      border:1px solid rgba(43,42,39,.08);
      box-shadow:var(--shadow-soft);
      padding:28px;
    }
    .timeline-grid{
      position:relative;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:18px;
      margin-top:1.5rem;
    }
    .timeline-grid::before{
      content:"";
      position:absolute;
      left:4%;
      right:4%;
      top:32px;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(181,138,74,.28), transparent);
      z-index:0;
    }
    .step-card{
      position:relative;
      z-index:1;
      height:100%;
      padding:22px 18px 18px;
      border-radius:22px;
      background:#fff;
      border:1px solid rgba(43,42,39,.08);
      box-shadow:0 12px 28px rgba(43,42,39,.05);
      transition:var(--transition);
    }
    .step-card:hover{
      transform:translateY(-2px);
      border-color:rgba(181,138,74,.22);
      box-shadow:0 16px 34px rgba(43,42,39,.08);
    }
    .step-index{
      width:34px;
      height:34px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(181,138,74,.12);
      color:var(--accent-dark);
      font-weight:800;
      font-size:.92rem;
      margin-bottom:1rem;
    }
    .step-card h3{
      margin:0 0 .5rem;
      font-size:1.1rem;
    }
    .step-card p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
      line-height:1.72;
    }
    .step-tag{
      display:inline-flex;
      margin-top:.9rem;
      padding:.35rem .68rem;
      border-radius:999px;
      background:rgba(43,42,39,.05);
      border:1px solid rgba(43,42,39,.08);
      color:var(--muted);
      font-size:.78rem;
      font-weight:700;
    }
    .side-note{
      height:100%;
      padding:24px;
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg,#2e2c28 0%, #221f1c 100%);
      color:#f7f2ea;
      box-shadow:var(--shadow);
    }
    .side-note h3{
      margin:0 0 1rem;
      font-size:1.2rem;
      color:#fff;
    }
    .side-note .stat{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      margin:1rem 0 1.1rem;
    }
    .side-note .stat div{
      padding:14px 12px;
      border-radius:18px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.08);
    }
    .side-note .stat strong{
      display:block;
      font-size:1.25rem;
      line-height:1.1;
      color:#fff;
    }
    .side-note .stat span{
      display:block;
      margin-top:.28rem;
      font-size:.8rem;
      color:rgba(255,255,255,.72);
    }
    .side-note ul{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.75rem;
    }
    .side-note li{
      display:flex;
      gap:.65rem;
      color:rgba(255,255,255,.82);
      font-size:.92rem;
      line-height:1.65;
    }
    .side-note li i{
      color:#f0c57f;
      margin-top:.15rem;
    }
    .tab-shell{
      padding:28px;
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg, #fff, #faf6ef);
      border:1px solid rgba(43,42,39,.08);
      box-shadow:var(--shadow-soft);
    }
    .pill-tabs{
      gap:.65rem;
      border-bottom:none;
      margin-bottom:1.25rem;
    }
    .pill-tabs .nav-link{
      border:1px solid rgba(43,42,39,.1);
      border-radius:999px;
      color:var(--muted);
      background:#fff;
      padding:.68rem 1rem;
      font-weight:700;
      transition:var(--transition);
    }
    .pill-tabs .nav-link:hover{
      color:var(--ink);
      border-color:rgba(181,138,74,.24);
      background:rgba(181,138,74,.08);
    }
    .pill-tabs .nav-link.active{
      color:#fff;
      background:var(--ink);
      border-color:var(--ink);
      box-shadow:0 12px 24px rgba(43,42,39,.14);
    }
    .tab-pane-card{
      padding:22px;
      border-radius:24px;
      background:linear-gradient(180deg,#fff,#fbf7f0);
      border:1px solid rgba(43,42,39,.08);
    }
    .tab-pane-card h3{
      font-size:1.2rem;
      margin:0 0 .85rem;
    }
    .tab-pane-card .grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .mini-item{
      padding:15px 16px;
      border-radius:18px;
      background:rgba(181,138,74,.08);
      border:1px solid rgba(181,138,74,.14);
    }
    .mini-item strong{
      display:block;
      margin-bottom:.3rem;
      font-size:.95rem;
    }
    .mini-item span{
      color:var(--muted);
      font-size:.9rem;
      line-height:1.6;
    }
    .tab-side{
      height:100%;
      padding:24px;
      border-radius:24px;
      background:linear-gradient(180deg,#2b2a27,#1f1e1b);
      color:#f8f3ea;
      box-shadow:var(--shadow);
    }
    .tab-side h3{
      color:#fff;
      margin:0 0 .75rem;
      font-size:1.14rem;
    }
    .tab-side p{
      color:rgba(255,255,255,.76);
      margin:0 0 1rem;
      font-size:.95rem;
    }
    .quick-check{
      display:grid;
      gap:.75rem;
      margin:0;
      padding:0;
      list-style:none;
    }
    .quick-check li{
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      color:rgba(255,255,255,.86);
      font-size:.92rem;
      line-height:1.6;
    }
    .quick-check i{
      color:#f0c57f;
      margin-top:.15rem;
    }
    .compare-card{
      height:100%;
      padding:24px;
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg,#fff, #faf7f1);
      border:1px solid rgba(43,42,39,.08);
      box-shadow:var(--shadow-soft);
      transition:var(--transition);
      display:flex;
      flex-direction:column;
    }
    .compare-card:hover{
      transform:translateY(-3px);
      border-color:rgba(181,138,74,.26);
      box-shadow:0 18px 36px rgba(43,42,39,.09);
    }
    .compare-card.featured{
      border-color:rgba(181,138,74,.34);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,240,226,.92));
    }
    .compare-card .topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:1rem;
    }
    .compare-card h3{
      margin:0;
      font-size:1.18rem;
    }
    .price-line{
      display:flex;
      align-items:baseline;
      gap:.25rem;
      margin:.6rem 0 1rem;
      color:var(--ink);
    }
    .price-line strong{
      font-size:1.7rem;
      line-height:1;
      letter-spacing:-.03em;
    }
    .price-line span{
      color:var(--muted);
      font-size:.92rem;
    }
    .compare-card ul{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.65rem;
      color:var(--muted);
    }
    .compare-card li{
      display:flex;
      gap:.65rem;
      align-items:flex-start;
      line-height:1.62;
    }
    .compare-card li i{
      color:var(--accent-dark);
      margin-top:.15rem;
    }
    .compare-card .card-cta{
      margin-top:auto;
      padding-top:1.2rem;
    }
    .faq-panel{
      padding:28px;
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg, #fff, #faf6ef);
      border:1px solid rgba(43,42,39,.08);
      box-shadow:var(--shadow-soft);
    }
    .faq-search-wrap{
      display:flex;
      gap:.8rem;
      align-items:center;
      flex-wrap:wrap;
      margin-bottom:1.25rem;
    }
    .faq-search{
      flex:1 1 280px;
      display:flex;
      align-items:center;
      gap:.7rem;
      padding:.84rem 1rem;
      border:1px solid rgba(43,42,39,.1);
      border-radius:999px;
      background:#fff;
      transition:var(--transition);
    }
    .faq-search:focus-within{
      border-color:rgba(181,138,74,.35);
      box-shadow:0 0 0 4px rgba(181,138,74,.12);
    }
    .faq-search i{
      color:var(--accent-dark);
    }
    .faq-search input{
      flex:1;
      border:none;
      outline:none;
      background:transparent;
      color:var(--ink);
    }
    .faq-search input::placeholder{color:#8d887f}
    .faq-count{
      color:var(--muted);
      font-size:.92rem;
    }
    .accordion.faq-accordion{
      display:grid;
      gap:.9rem;
    }
    .faq-accordion .accordion-item{
      border:1px solid rgba(43,42,39,.08);
      border-radius:18px !important;
      overflow:hidden;
      background:#fff;
      box-shadow:0 10px 24px rgba(43,42,39,.04);
    }
    .faq-accordion .accordion-button{
      background:#fff;
      color:var(--ink);
      font-weight:700;
      padding:1.1rem 1.2rem;
      box-shadow:none;
    }
    .faq-accordion .accordion-button:focus{
      box-shadow:0 0 0 4px rgba(181,138,74,.12);
      border-color:rgba(181,138,74,.3);
    }
    .faq-accordion .accordion-button::after{
      width:1rem;
      height:1rem;
      background-size:1rem;
      filter:grayscale(1) brightness(.55);
    }
    .faq-accordion .accordion-button:not(.collapsed){
      color:var(--ink);
      background:rgba(181,138,74,.08);
      box-shadow:inset 0 -1px 0 rgba(181,138,74,.1);
    }
    .faq-accordion .accordion-body{
      color:var(--muted);
      padding:1rem 1.2rem 1.2rem;
      background:linear-gradient(180deg,#fff, #fcf8f1);
    }
    .faq-accordion .accordion-body ul{
      margin:0;
      padding-left:1.1rem;
    }
    .faq-side{
      position:sticky;
      top:96px;
      padding:24px;
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg,#2e2c28 0%, #221f1c 100%);
      color:#f7f2ea;
      box-shadow:var(--shadow);
    }
    .faq-side h3{
      color:#fff;
      margin:0 0 .9rem;
      font-size:1.18rem;
    }
    .faq-side .check{
      display:grid;
      gap:.7rem;
      padding:0;
      margin:0;
      list-style:none;
    }
    .faq-side .check li{
      display:flex;
      gap:.65rem;
      align-items:flex-start;
      color:rgba(255,255,255,.84);
      line-height:1.65;
      font-size:.93rem;
    }
    .faq-side .check i{
      color:#f0c57f;
      margin-top:.15rem;
    }
    .faq-side .tip{
      margin-top:1rem;
      padding:14px 15px;
      border-radius:18px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.82);
      font-size:.9rem;
      line-height:1.7;
    }
    .cta-shell{
      position:relative;
      padding:40px 28px;
      border-radius:32px;
      background:
        linear-gradient(135deg, rgba(43,42,39,.96), rgba(43,42,39,.86)),
        radial-gradient(circle at top left, rgba(181,138,74,.28), transparent 26%);
      color:#f8f3ea;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .cta-shell::before{
      content:"";
      position:absolute;
      inset:18px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      pointer-events:none;
    }
    .cta-shell .inner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:1rem;
    }
    .cta-shell h2{
      margin:0;
      font-size:clamp(2rem, 3vw, 3rem);
      line-height:1.15;
      max-width:14em;
      color:#fff;
    }
    .cta-shell p{
      margin:0;
      max-width:760px;
      color:rgba(255,255,255,.78);
      font-size:1.02rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:.85rem;
      margin-top:.5rem;
    }
    .cta-footnote{
      color:rgba(255,255,255,.62);
      font-size:.88rem;
    }
    .site-footer{
      background:#23211f;
      color:#f6efe4;
      padding:70px 0 28px;
      margin-top:0;
    }
    .site-footer .brand{
      display:flex;
      align-items:center;
      gap:.75rem;
      font-weight:700;
      font-size:1.1rem;
      margin-bottom:1rem;
    }
    .site-footer .brand .brand-mark{
      background:linear-gradient(180deg,#2f2d29,#1e1c19);
      border-color:rgba(255,255,255,.12);
      color:#f6efe4;
      box-shadow:none;
    }
    .site-footer p{
      color:rgba(246,239,228,.76);
      line-height:1.85;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.65rem;
    }
    .footer-links a{
      color:rgba(246,239,228,.76);
    }
    .footer-links a:hover{
      color:#fff;
      padding-left:2px;
    }
    .footer-note{
      margin-top:2rem;
      padding-top:1rem;
      border-top:1px solid rgba(255,255,255,.09);
      color:rgba(246,239,228,.62);
      font-size:.9rem;
    }
    .offcanvas{
      background:linear-gradient(180deg,#fbfaf7,#f3ebdf);
    }
    .offcanvas .offcanvas-header{
      border-bottom:1px solid rgba(43,42,39,.08);
    }
    .offcanvas .nav-link{
      color:var(--muted);
      padding:.9rem 0;
      font-weight:700;
      border-bottom:1px solid rgba(43,42,39,.06);
    }
    .offcanvas .nav-link.active{
      color:var(--ink);
    }
    .offcanvas .mobile-search{
      display:flex;
      align-items:center;
      gap:.7rem;
      padding:.8rem 1rem;
      margin-top:1rem;
      border:1px solid rgba(43,42,39,.1);
      border-radius:999px;
      background:#fff;
    }
    .offcanvas .mobile-search input{
      border:none;
      outline:none;
      width:100%;
      background:transparent;
    }
    .offcanvas .mobile-cta{
      width:100%;
      justify-content:center;
      margin-top:1rem;
    }
    .text-muted-custom{color:var(--muted)!important}
    .border-soft{border-color:var(--line)!important}

    @media (max-width: 1199.98px){
      .hero-grid{grid-template-columns:1fr; min-height:auto}
      .hero-content{padding:6px 6px 0}
      .hero-visual{min-height:420px}
      .floating-card{width:min(300px, 48%)}
      .timeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .timeline-grid::before{display:none}
      .faq-side{position:relative; top:auto; margin-top:1.2rem}
      .search-box{min-width:260px}
    }
    @media (max-width: 991.98px){
      .navbar{padding:.85rem 0}
      .search-box{min-width:220px}
      .section{padding:72px 0}
      .section-sm{padding:60px 0}
      .pill-tabs .nav-link{padding:.62rem .9rem}
      .tab-pane-card .grid{grid-template-columns:1fr}
      .side-note .stat{grid-template-columns:1fr}
      .cta-shell{padding:34px 20px}
    }
    @media (max-width: 767.98px){
      .hero-section{padding:64px 0 32px}
      .hero-shell{padding:16px}
      .hero-title{max-width:none}
      .hero-lead{font-size:1rem}
      .hero-actions .btn,
      .cta-actions .btn{
        width:100%;
      }
      .hero-visual{min-height:auto; padding:18px}
      .status-grid{grid-template-columns:1fr}
      .floating-card{
        position:relative;
        right:auto;
        bottom:auto;
        width:100%;
        margin-top:14px;
      }
      .timeline-grid{
        grid-template-columns:1fr;
      }
      .section-title h2{
        font-size:clamp(1.7rem, 8vw, 2.2rem);
      }
      .compare-card,
      .check-card,
      .tab-shell,
      .faq-panel,
      .timeline-wrap,
      .side-note{
        padding:20px;
      }
      .faq-search-wrap{
        align-items:stretch;
      }
      .faq-search{
        flex-basis:100%;
      }
      .faq-search-wrap .faq-count{
        width:100%;
      }
      .cta-shell h2{max-width:none}
      .btn-wide{min-width:unset}
      .site-footer{
        padding-top:56px;
      }
    }
    @media (max-width: 575.98px){
      .brand-copy{
        font-size:.96rem;
      }
      .hero-title{
        font-size:clamp(2rem, 10vw, 2.7rem);
      }
      .hero-shell::before{inset:10px}
      .badge-soft,
      .badge-ghost{
        font-size:.76rem;
      }
      .offcanvas{
        width:min(92vw, 360px);
      }
    }

/* roulang page: category1 */
:root{
      --bg:#f7f2ea;
      --bg-soft:#fbfaf7;
      --surface:#fffdf9;
      --surface-2:#f2ece3;
      --ink:#2b2a27;
      --ink-soft:#4d4740;
      --muted:#6f685f;
      --line:rgba(43,42,39,.12);
      --line-strong:rgba(43,42,39,.2);
      --accent:#b58a4a;
      --accent-2:#d7b06d;
      --accent-soft:#edd8b1;
      --shadow:0 18px 50px rgba(43,42,39,.08);
      --shadow-soft:0 10px 28px rgba(43,42,39,.06);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --header-h:72px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      color:var(--ink);
      line-height:1.75;
      background:
        radial-gradient(circle at 12% 14%, rgba(181,138,74,.08), transparent 24%),
        radial-gradient(circle at 88% 0%, rgba(181,138,74,.06), transparent 22%),
        linear-gradient(180deg, #fbfaf7 0%, #f8f3eb 34%, #f3eadf 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(rgba(43,42,39,.02), rgba(43,42,39,.02)),
        repeating-linear-gradient(
          90deg,
          transparent 0,
          transparent 58px,
          rgba(43,42,39,.02) 58px,
          rgba(43,42,39,.02) 59px
        );
      opacity:.26;
      z-index:-1;
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:color .22s ease, background-color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
    }
    img{max-width:100%; display:block}
    button,input,textarea,select{font:inherit}
    :focus-visible{
      outline:3px solid rgba(181,138,74,.26);
      outline-offset:2px;
    }
    .container{
      max-width:1280px;
    }
    [id]{
      scroll-margin-top:96px;
    }
    .section-gap{
      padding:88px 0;
    }
    .section-gap-soft{
      padding:72px 0;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      background:rgba(251,250,247,.96);
      border-bottom:1px solid var(--line);
      transition:box-shadow .22s ease, background-color .22s ease;
    }
    .site-header.is-scrolled{
      box-shadow:0 8px 28px rgba(43,42,39,.08);
      background:rgba(251,250,247,.98);
    }
    .navbar{
      min-height:var(--header-h);
      padding:.75rem 0;
    }
    .navbar-brand{
      display:inline-flex;
      align-items:center;
      gap:.8rem;
      color:var(--ink);
      font-weight:700;
      letter-spacing:.01em;
      transition:transform .22s ease;
    }
    .navbar-brand:hover{
      transform:translateY(-1px);
      color:var(--ink);
    }
    .brand-mark{
      width:40px;
      height:40px;
      border-radius:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(145deg, #2f2b27, #4d453c);
      color:#fff;
      font-size:1rem;
      font-weight:700;
      box-shadow:0 10px 24px rgba(43,42,39,.14);
      flex:0 0 auto;
    }
    .brand-copy{
      display:flex;
      flex-direction:column;
      line-height:1.15;
    }
    .brand-copy small{
      margin-top:.18rem;
      color:var(--muted);
      font-weight:500;
      letter-spacing:.08em;
    }
    .nav-links{
      gap:.4rem;
    }
    .nav-links .nav-link{
      color:var(--ink-soft);
      padding:.7rem 1rem;
      border-radius:999px;
      font-weight:600;
      font-size:.98rem;
    }
    .nav-links .nav-link:hover{
      color:var(--ink);
      background:rgba(181,138,74,.08);
    }
    .nav-links .nav-link.active{
      color:var(--ink);
      background:rgba(181,138,74,.14);
      box-shadow:inset 0 0 0 1px rgba(181,138,74,.18);
    }
    .search-box{
      display:flex;
      align-items:center;
      gap:.65rem;
      min-width:280px;
      padding:.72rem 1rem;
      border:1px solid var(--line);
      border-radius:999px;
      background:var(--surface);
      box-shadow:var(--shadow-soft);
      transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }
    .search-box:focus-within{
      border-color:rgba(181,138,74,.46);
      box-shadow:0 0 0 4px rgba(181,138,74,.14);
      transform:translateY(-1px);
    }
    .search-box i{
      color:var(--accent);
      font-size:1rem;
      flex:0 0 auto;
    }
    .search-box input{
      border:0;
      outline:none;
      background:transparent;
      width:100%;
      color:var(--ink);
      min-width:0;
    }
    .search-box input::placeholder{
      color:#8f877d;
    }
    .btn-ink,
    .btn-sand,
    .btn-soft{
      border-radius:999px;
      padding:.82rem 1.25rem;
      font-weight:700;
      border:1px solid transparent;
      transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
    }
    .btn-ink{
      background:var(--ink);
      color:#fff;
      box-shadow:0 14px 26px rgba(43,42,39,.14);
    }
    .btn-ink:hover{
      background:#1f1d1a;
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 18px 30px rgba(43,42,39,.18);
    }
    .btn-sand{
      background:var(--accent);
      color:#fff;
      box-shadow:0 14px 26px rgba(181,138,74,.18);
    }
    .btn-sand:hover{
      background:#a67b3d;
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 18px 30px rgba(181,138,74,.22);
    }
    .btn-soft{
      background:transparent;
      border-color:var(--line-strong);
      color:var(--ink);
    }
    .btn-soft:hover{
      background:#f5efe5;
      border-color:rgba(181,138,74,.38);
      color:var(--ink);
      transform:translateY(-1px);
    }
    .desktop-cta{
      white-space:nowrap;
    }
    .navbar-toggler{
      border-radius:14px;
      width:46px;
      height:46px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:var(--surface);
      border:1px solid var(--line);
      box-shadow:var(--shadow-soft);
    }
    .navbar-toggler:focus{
      box-shadow:0 0 0 4px rgba(181,138,74,.14);
    }
    .navbar-toggler-icon{
      width:1.15em;
      height:1.15em;
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(43,42,39,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .site-offcanvas{
      background:var(--bg-soft);
      border-left:1px solid var(--line);
    }
    .site-offcanvas .offcanvas-header{
      border-bottom:1px solid var(--line);
      padding:1rem 1.1rem;
    }
    .site-offcanvas .offcanvas-body{
      padding:1rem 1.1rem 1.25rem;
    }
    .mobile-nav{
      display:grid;
      gap:.6rem;
    }
    .mobile-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:1rem 1rem;
      border-radius:16px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.72);
      color:var(--ink);
      font-weight:700;
    }
    .mobile-link.active{
      background:rgba(181,138,74,.12);
      border-color:rgba(181,138,74,.24);
    }
    .hero-category{
      position:relative;
      padding:72px 0 34px;
    }
    .hero-category::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(43,42,39,.12), transparent);
    }
    .breadcrumb-wrap{
      margin-bottom:1.1rem;
    }
    .breadcrumb{
      margin:0;
      font-size:.92rem;
      color:var(--muted);
    }
    .breadcrumb a{
      color:var(--muted);
    }
    .breadcrumb a:hover{
      color:var(--ink);
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.46rem .84rem;
      border-radius:999px;
      background:rgba(181,138,74,.12);
      color:var(--accent);
      font-weight:700;
      font-size:.82rem;
      letter-spacing:.08em;
    }
    .section-kicker::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(181,138,74,.14);
    }
    .hero-title{
      margin-top:1.1rem;
      font-size:clamp(2.35rem,4.8vw,4.15rem);
      line-height:1.08;
      letter-spacing:-.03em;
      font-weight:800;
      max-width:11.5ch;
    }
    .hero-lead{
      margin:1.2rem 0 0;
      max-width:42rem;
      font-size:1.08rem;
      color:var(--muted);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.85rem;
      margin-top:1.7rem;
    }
    .hero-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
      margin-top:1.4rem;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.55rem .82rem;
      border-radius:999px;
      background:rgba(255,255,255,.72);
      border:1px solid var(--line);
      color:var(--ink-soft);
      font-size:.93rem;
      font-weight:600;
      box-shadow:var(--shadow-soft);
    }
    .hero-panel{
      position:relative;
      padding:1.45rem;
      border-radius:var(--radius-xl);
      background:
        linear-gradient(160deg, rgba(43,42,39,.98), rgba(67,58,48,.96)),
        radial-gradient(circle at 20% 20%, rgba(181,138,74,.26), transparent 30%);
      color:#f8f4ee;
      box-shadow:0 22px 52px rgba(43,42,39,.16);
      overflow:hidden;
      isolation:isolate;
    }
    .hero-panel::before{
      content:"";
      position:absolute;
      inset:14px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.08);
      pointer-events:none;
    }
    .hero-panel::after{
      content:"";
      position:absolute;
      right:-46px;
      top:-40px;
      width:220px;
      height:220px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(215,176,109,.16), transparent 64%);
      pointer-events:none;
    }
    .panel-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
      position:relative;
      z-index:1;
    }
    .panel-chip{
      display:inline-flex;
      align-items:center;
      padding:.38rem .72rem;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      color:#f7f2ea;
      font-size:.82rem;
      letter-spacing:.08em;
      font-weight:700;
    }
    .panel-time{
      color:rgba(248,244,238,.72);
      font-size:.9rem;
    }
    .panel-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.8rem;
      position:relative;
      z-index:1;
    }
    .mini-card{
      min-height:92px;
      padding:1rem;
      border-radius:20px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.08);
      color:#fff;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }
    .mini-card strong{
      display:block;
      font-size:1.04rem;
      margin-bottom:.2rem;
    }
    .mini-card small{
      color:rgba(248,244,238,.76);
      font-size:.88rem;
    }
    .panel-check{
      margin-top:1rem;
      padding:1rem;
      border-radius:20px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      position:relative;
      z-index:1;
    }
    .panel-check h3{
      margin:0 0 .75rem;
      font-size:1rem;
      color:#fff;
    }
    .check-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.58rem;
    }
    .check-list li{
      display:flex;
      align-items:flex-start;
      gap:.6rem;
      color:rgba(248,244,238,.88);
      font-size:.94rem;
    }
    .check-list i{
      color:var(--accent-2);
      margin-top:.18rem;
      flex:0 0 auto;
    }
    .filter-panel{
      padding:1.35rem;
      border-radius:var(--radius-xl);
      background:rgba(255,255,255,.76);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .filter-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1.15rem;
    }
    .filter-head h2,
    .section-heading h2{
      margin:0;
      font-size:clamp(1.65rem,2.6vw,2.55rem);
      line-height:1.15;
      letter-spacing:-.03em;
      font-weight:800;
    }
    .filter-head p,
    .section-lead{
      margin:0;
      color:var(--muted);
      max-width:46rem;
    }
    .filter-bar{
      display:grid;
      gap:1rem;
    }
    .filter-search{
      display:flex;
      align-items:center;
      gap:.75rem;
      padding:1rem 1.1rem;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:var(--shadow-soft);
      transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }
    .filter-search:focus-within{
      border-color:rgba(181,138,74,.46);
      box-shadow:0 0 0 4px rgba(181,138,74,.12);
      transform:translateY(-1px);
    }
    .filter-search i{
      color:var(--accent);
    }
    .filter-search input{
      border:0;
      outline:none;
      width:100%;
      background:transparent;
      color:var(--ink);
    }
    .filter-search input::placeholder{
      color:#8d8477;
    }
    .filter-pills{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
    }
    .filter-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.7rem 1rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--ink-soft);
      font-weight:700;
      transition:background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
    }
    .filter-pill:hover{
      transform:translateY(-1px);
      border-color:rgba(181,138,74,.34);
      background:#f7f1e6;
      color:var(--ink);
    }
    .filter-pill.active{
      background:var(--ink);
      color:#fff;
      border-color:var(--ink);
      box-shadow:0 12px 22px rgba(43,42,39,.16);
    }
    .section-heading{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:1.2rem;
      margin-bottom:1.25rem;
      flex-wrap:wrap;
    }
    .section-heading .section-lead{
      max-width:46rem;
      font-size:1rem;
    }
    .guide-grid{
      margin-top:1.5rem;
    }
    .entry-col{
      display:block;
    }
    .entry-card,
    .compare-card,
    .route-card,
    .side-card,
    .cta-panel,
    .faq-side{
      border-radius:var(--radius-xl);
      border:1px solid var(--line);
      background:rgba(255,255,255,.84);
      box-shadow:var(--shadow-soft);
    }
    .entry-card{
      padding:1.25rem;
      height:100%;
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
      position:relative;
      overflow:hidden;
    }
    .entry-card::before{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:3px;
      background:linear-gradient(90deg, rgba(181,138,74,0), rgba(181,138,74,.5), rgba(181,138,74,0));
      opacity:0;
      transition:opacity .22s ease;
    }
    .entry-card:hover{
      transform:translateY(-3px);
      border-color:rgba(181,138,74,.3);
      box-shadow:0 20px 44px rgba(43,42,39,.1);
      background:rgba(255,255,255,.95);
    }
    .entry-card:hover::before{
      opacity:1;
    }
    .entry-card.featured{
      padding:1.5rem;
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,244,234,.96));
    }
    .entry-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      margin-bottom:1rem;
      flex-wrap:wrap;
    }
    .entry-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .75rem;
      border-radius:999px;
      background:rgba(181,138,74,.11);
      color:var(--accent);
      font-weight:700;
      font-size:.82rem;
      letter-spacing:.06em;
    }
    .entry-time{
      color:var(--muted);
      font-size:.88rem;
    }
    .entry-card h3{
      margin:0 0 .8rem;
      font-size:clamp(1.18rem,1.5vw,1.48rem);
      line-height:1.28;
      font-weight:800;
    }
    .entry-card p{
      margin:0;
      color:var(--muted);
    }
    .entry-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:1rem;
    }
    .entry-meta .tag{
      padding:.42rem .68rem;
      font-size:.84rem;
      background:rgba(255,255,255,.7);
    }
    .dash-list{
      list-style:none;
      padding:0;
      margin:1rem 0 0;
      display:grid;
      gap:.56rem;
    }
    .dash-list li{
      display:flex;
      gap:.6rem;
      color:var(--ink-soft);
      align-items:flex-start;
    }
    .dash-list li::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      margin-top:.6rem;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(181,138,74,.14);
      flex:0 0 auto;
    }
    .entry-card .btn{
      margin-top:1.15rem;
    }
    .entry-feature-wrap{
      display:grid;
      grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
      gap:1.2rem;
      align-items:stretch;
    }
    .entry-note{
      padding:1rem;
      border-radius:22px;
      background:#f6efe3;
      border:1px solid rgba(181,138,74,.2);
      height:100%;
    }
    .entry-note h4{
      margin:0 0 .85rem;
      font-size:1rem;
      font-weight:800;
    }
    .entry-note ol{
      margin:0;
      padding-left:1.2rem;
      color:var(--ink-soft);
    }
    .entry-note li+li{
      margin-top:.75rem;
    }
    .entry-note small{
      display:block;
      margin-top:1rem;
      color:var(--muted);
    }
    .sidebar-sticky{
      position:sticky;
      top:96px;
      display:grid;
      gap:1rem;
    }
    .side-card{
      padding:1.25rem;
    }
    .side-card h3{
      margin:0 0 .9rem;
      font-size:1.08rem;
      font-weight:800;
    }
    .side-card p{
      color:var(--muted);
      margin:0;
    }
    .status-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.8rem;
    }
    .status-list li{
      display:flex;
      align-items:flex-start;
      gap:.68rem;
      color:var(--ink-soft);
    }
    .status-list i{
      color:var(--accent);
      margin-top:.18rem;
      flex:0 0 auto;
    }
    .route-card{
      display:block;
      padding:1.1rem;
      height:100%;
    }
    .route-card:hover{
      transform:translateY(-3px);
      border-color:rgba(181,138,74,.3);
      box-shadow:0 18px 38px rgba(43,42,39,.08);
      color:var(--ink);
    }
    .route-kicker{
      display:inline-flex;
      margin-bottom:.6rem;
      color:var(--accent);
      font-weight:700;
      font-size:.84rem;
      letter-spacing:.08em;
    }
    .route-card p{
      color:var(--muted);
    }
    .compare-section{
      background:rgba(255,255,255,.18);
      border-top:1px solid rgba(43,42,39,.06);
      border-bottom:1px solid rgba(43,42,39,.06);
    }
    .compare-card{
      padding:1.35rem;
      height:100%;
      position:relative;
      overflow:hidden;
    }
    .compare-card.recommended{
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,244,233,.98));
      border-color:rgba(181,138,74,.3);
      box-shadow:0 22px 46px rgba(181,138,74,.08);
    }
    .compare-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .compare-index{
      font-size:2rem;
      line-height:1;
      font-weight:800;
      color:rgba(181,138,74,.3);
    }
    .compare-badge{
      display:inline-flex;
      align-items:center;
      padding:.38rem .72rem;
      border-radius:999px;
      background:rgba(181,138,74,.12);
      color:var(--accent);
      font-size:.78rem;
      font-weight:700;
      letter-spacing:.08em;
    }
    .compare-card h3{
      margin:0 0 .7rem;
      font-size:1.24rem;
      line-height:1.28;
      font-weight:800;
    }
    .compare-card p{
      margin:0;
      color:var(--muted);
    }
    .compare-list{
      margin-top:1rem;
      display:grid;
      gap:.7rem;
    }
    .compare-item{
      display:flex;
      align-items:flex-start;
      gap:.6rem;
      color:var(--ink-soft);
    }
    .compare-item i{
      color:var(--accent);
      margin-top:.14rem;
    }
    .compare-card .btn{
      margin-top:1.15rem;
    }
    .faq-wrap .accordion-item{
      background:rgba(255,255,255,.86);
      border:1px solid var(--line);
      border-radius:20px !important;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
      margin-bottom:1rem;
    }
    .faq-wrap .accordion-button{
      background:transparent;
      color:var(--ink);
      font-weight:800;
      padding:1.15rem 1.2rem;
      box-shadow:none;
    }
    .faq-wrap .accordion-button:not(.collapsed){
      color:var(--ink);
      background:rgba(181,138,74,.08);
      box-shadow:none;
    }
    .faq-wrap .accordion-button::after{
      background-size:1rem;
      opacity:.85;
    }
    .faq-wrap .accordion-body{
      color:var(--muted);
      padding:0 1.2rem 1.2rem;
    }
    .faq-side{
      padding:1.25rem;
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,239,226,.95));
    }
    .faq-side h3{
      margin:0 0 .85rem;
      font-size:1.08rem;
      font-weight:800;
    }
    .faq-side .tag{
      margin:0 .45rem .45rem 0;
      background:#fff;
    }
    .cta-section{
      background:
        radial-gradient(circle at top left, rgba(181,138,74,.1), transparent 24%),
        linear-gradient(180deg, rgba(243,234,223,.9), rgba(248,243,236,.96));
    }
    .cta-panel{
      position:relative;
      padding:2.2rem 1.5rem;
      text-align:center;
      overflow:hidden;
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:auto -10% -22% -10%;
      height:260px;
      background:radial-gradient(circle, rgba(181,138,74,.12), transparent 62%);
      pointer-events:none;
    }
    .cta-panel h2{
      margin:0;
      font-size:clamp(1.8rem,3vw,2.7rem);
      line-height:1.14;
      letter-spacing:-.03em;
      font-weight:800;
    }
    .cta-panel p{
      margin:1rem auto 0;
      max-width:42rem;
      color:var(--muted);
    }
    .cta-actions{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:.9rem;
      margin-top:1.6rem;
      position:relative;
      z-index:1;
    }
    .cta-note{
      margin-top:1rem;
      color:var(--muted);
      font-size:.94rem;
      position:relative;
      z-index:1;
    }
    .site-footer{
      background:#262420;
      color:#f8f3ed;
      padding:78px 0 28px;
      margin-top:0;
    }
    .site-footer .brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      font-weight:800;
      font-size:1.1rem;
      margin-bottom:1rem;
    }
    .site-footer .brand-mark{
      width:40px;
      height:40px;
      border-radius:14px;
      background:linear-gradient(145deg, #b58a4a, #d2a765);
      color:#221f1c;
      box-shadow:none;
    }
    .site-footer p{
      color:rgba(248,243,237,.76);
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:.7rem;
    }
    .footer-links a{
      color:rgba(248,243,237,.8);
    }
    .footer-links a:hover{
      color:#fff;
    }
    .footer-note{
      margin-top:2rem;
      padding-top:1.2rem;
      border-top:1px solid rgba(255,255,255,.12);
      color:rgba(248,243,237,.66);
      font-size:.94rem;
      text-align:center;
    }
    .empty-state{
      margin-top:1.3rem;
      padding:1.2rem 1.25rem;
      border-radius:22px;
      background:#f8f3ea;
      border:1px dashed rgba(181,138,74,.3);
      color:var(--muted);
    }
    .empty-state h3{
      margin:0 0 .35rem;
      color:var(--ink);
      font-size:1.08rem;
      font-weight:800;
    }
    @media (max-width:1199.98px){
      .search-box{min-width:230px}
      .hero-title{max-width:100%}
      .entry-feature-wrap{grid-template-columns:1fr}
    }
    @media (max-width:991.98px){
      .hero-category{padding:54px 0 28px}
      .section-gap{padding:70px 0}
      .section-gap-soft{padding:56px 0}
      .filter-head,
      .section-heading{
        align-items:flex-start;
      }
      .sidebar-sticky{
        position:static;
      }
      .desktop-cta{
        display:none;
      }
      .search-box{
        min-width:0;
        width:100%;
      }
    }
    @media (max-width:767.98px){
      .navbar{
        min-height:68px;
      }
      .brand-copy small{
        font-size:.68rem;
      }
      .hero-title{
        font-size:clamp(2rem,9vw,2.8rem);
      }
      .hero-lead{
        font-size:1rem;
      }
      .hero-panel{
        padding:1.2rem;
      }
      .panel-grid{
        grid-template-columns:1fr 1fr;
      }
      .filter-panel,
      .entry-card,
      .compare-card,
      .route-card,
      .side-card,
      .cta-panel,
      .faq-side{
        border-radius:24px;
      }
      .cta-panel{
        padding:1.8rem 1.1rem;
      }
      .filter-head h2,
      .section-heading h2{
        font-size:clamp(1.5rem,7vw,2.1rem);
      }
    }
    @media (max-width:575.98px){
      .hero-actions,
      .cta-actions{
        flex-direction:column;
      }
      .hero-actions .btn,
      .cta-actions .btn{
        width:100%;
      }
      .panel-grid{
        grid-template-columns:1fr;
      }
      .tag{
        width:100%;
        justify-content:flex-start;
      }
      .filter-pill{
        width:100%;
      }
    }