/* roulang page: index */
:root {
      --bg: #f3f5f7;
      --bg-soft: #eef1f4;
      --surface: #ffffff;
      --surface-2: #f8fafc;
      --line: #d7dde4;
      --line-strong: #c4ccd6;
      --text: #101828;
      --muted: #667085;
      --muted-2: #8a94a6;
      --accent: #0f766e;
      --accent-2: #d97706;
      --accent-3: #dc2626;
      --ink: #111827;
      --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
      --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.05);
      --radius: 8px;
      --radius-sm: 6px;
      --container: 1180px;
      --ease: 180ms ease;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(243, 245, 247, 0.96)),
        linear-gradient(90deg, rgba(15, 118, 110, 0.04), rgba(217, 119, 6, 0.02));
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.65;
      letter-spacing: 0;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(17, 24, 39, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 39, 0.03) 1px, transparent 1px);
      background-size: 68px 68px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 88%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 88%);
      z-index: -1;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), opacity var(--ease);
    }

    a:hover {
      color: var(--accent);
    }

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

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

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

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1030;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(247, 248, 250, 0.88);
      border-bottom: 1px solid rgba(215, 221, 228, 0.85);
    }

    .navbar {
      padding: 0.8rem 0;
    }

    .navbar-brand {
      font-weight: 900;
      letter-spacing: 0;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0;
      margin-right: 1rem;
    }

    .brand-mark {
      width: 2.15rem;
      height: 2.15rem;
      border-radius: 8px;
      border: 1px solid rgba(15, 118, 110, 0.2);
      background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.16), rgba(217, 119, 6, 0.12)),
        #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      box-shadow: var(--shadow-soft);
      flex: 0 0 auto;
    }

    .navbar-nav {
      gap: 0.5rem;
    }

    .nav-link {
      color: var(--muted);
      font-weight: 700;
      padding: 0.7rem 0.9rem !important;
      border-radius: var(--radius-sm);
      transition: background-color var(--ease), color var(--ease), transform var(--ease);
    }

    .nav-link:hover,
    .nav-link:focus,
    .nav-link.active,
    .nav-link[aria-current="page"] {
      color: var(--ink);
      background: rgba(15, 118, 110, 0.08);
    }

    .navbar-toggler {
      border: 1px solid rgba(17, 24, 39, 0.12);
      border-radius: var(--radius-sm);
      box-shadow: none !important;
      padding: 0.45rem 0.55rem;
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.12) !important;
    }

    .btn {
      border-radius: var(--radius-sm);
      font-weight: 700;
      padding: 0.72rem 1rem;
      transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease), border-color var(--ease), color var(--ease);
      box-shadow: none !important;
      letter-spacing: 0;
    }

    .btn:focus,
    .btn:active {
      box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.12) !important;
    }

    .btn-primary {
      background: var(--ink);
      border-color: var(--ink);
      color: #fff;
    }

    .btn-primary:hover,
    .btn-primary:focus {
      background: #0b1220;
      border-color: #0b1220;
      transform: translateY(-1px);
      color: #fff;
    }

    .btn-outline-dark {
      border-color: var(--line-strong);
      color: var(--ink);
      background: rgba(255, 255, 255, 0.85);
    }

    .btn-outline-dark:hover,
    .btn-outline-dark:focus {
      background: #fff;
      border-color: var(--ink);
      color: var(--ink);
      transform: translateY(-1px);
    }

    .btn-soft {
      background: rgba(15, 118, 110, 0.08);
      border: 1px solid rgba(15, 118, 110, 0.18);
      color: var(--accent);
    }

    .btn-soft:hover,
    .btn-soft:focus {
      background: rgba(15, 118, 110, 0.14);
      border-color: rgba(15, 118, 110, 0.3);
      color: var(--accent);
      transform: translateY(-1px);
    }

    .section-band {
      padding: 1.35rem 0 1.75rem;
    }

    .section-shell {
      border-top: 1px solid rgba(215, 221, 228, 0.8);
      border-bottom: 1px solid rgba(215, 221, 228, 0.8);
      padding: 1.45rem 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.38rem 0.7rem;
      border-radius: 999px;
      background: rgba(15, 118, 110, 0.08);
      color: var(--accent);
      font-size: 0.9rem;
      font-weight: 700;
      border: 1px solid rgba(15, 118, 110, 0.12);
    }

    .eyebrow i {
      font-size: 0.85rem;
    }

    .hero-section {
      padding-top: 1.2rem;
      padding-bottom: 0.9rem;
    }

    .countdown-strip {
      background: #111827;
      color: #fff;
      border-radius: var(--radius);
      padding: 1rem 1.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      box-shadow: var(--shadow);
      margin-bottom: 1.2rem;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .countdown-left {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      min-width: 0;
    }

    .countdown-left strong {
      font-size: 1.02rem;
      color: #fff;
    }

    .countdown-left span {
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.95rem;
    }

    .countdown-boxes {
      display: grid;
      grid-template-columns: repeat(4, minmax(64px, 1fr));
      gap: 0.5rem;
      width: min(100%, 420px);
      flex: 0 0 auto;
    }

    .countdown-box {
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255, 255, 255, 0.11);
      background: rgba(255, 255, 255, 0.06);
      text-align: center;
      padding: 0.58rem 0.3rem 0.52rem;
      min-width: 0;
    }

    .countdown-box strong {
      display: block;
      font-size: 1.45rem;
      line-height: 1;
      color: #fff;
      font-weight: 800;
    }

    .countdown-box small {
      display: block;
      margin-top: 0.2rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.74rem;
      letter-spacing: 0;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.18fr 0.82fr;
      gap: 1.25rem;
      align-items: stretch;
    }

    .hero-copy {
      padding: 0.4rem 0 0.3rem;
    }

    .hero-title {
      margin: 0.85rem 0 0.8rem;
      font-size: 3.35rem;
      line-height: 1.03;
      font-weight: 900;
      letter-spacing: 0;
      color: var(--ink);
      max-width: 12ch;
    }

    .hero-desc {
      max-width: 48rem;
      color: var(--muted);
      font-size: 1.05rem;
      margin-bottom: 1.3rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      margin-bottom: 1.15rem;
    }

    .hero-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.7rem;
      max-width: 44rem;
    }

    .meta-chip {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.86);
      border-radius: var(--radius);
      padding: 0.8rem 0.85rem;
      box-shadow: var(--shadow-soft);
      min-height: 4.45rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.18rem;
    }

    .meta-chip strong {
      font-size: 1rem;
      color: var(--ink);
      line-height: 1.2;
    }

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

    .hero-stage {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.98));
      box-shadow: var(--shadow);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.95rem;
      min-height: 100%;
    }

    .stage-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 0.2rem;
      border-bottom: 1px solid rgba(215, 221, 228, 0.8);
    }

    .stage-head strong {
      font-size: 1.02rem;
      color: var(--ink);
    }

    .stage-head span {
      color: var(--muted);
      font-size: 0.92rem;
    }

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

    .route-item {
      border: 1px solid rgba(215, 221, 228, 0.95);
      border-radius: var(--radius-sm);
      background: #fff;
      padding: 0.82rem 0.85rem;
      display: grid;
      grid-template-columns: 2.2rem 1fr;
      gap: 0.8rem;
      align-items: flex-start;
      transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
    }

    .route-item:hover {
      transform: translateY(-1px);
      border-color: rgba(15, 118, 110, 0.22);
      box-shadow: var(--shadow-soft);
    }

    .route-index {
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 8px;
      background: rgba(15, 118, 110, 0.08);
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      flex: 0 0 auto;
    }

    .route-item strong {
      display: block;
      color: var(--ink);
      margin-bottom: 0.1rem;
      font-size: 0.98rem;
    }

    .route-item p {
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.55;
    }

    .stage-bars {
      display: grid;
      gap: 0.55rem;
      padding-top: 0.2rem;
    }

    .stage-line {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-size: 0.92rem;
      color: var(--muted);
    }

    .stage-track {
      height: 8px;
      border-radius: 999px;
      background: #e8edf2;
      overflow: hidden;
      position: relative;
    }

    .stage-track::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 72%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), rgba(217, 119, 6, 0.82));
    }

    .section-title {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .section-title h2 {
      margin: 0;
      font-size: 1.75rem;
      line-height: 1.15;
      color: var(--ink);
      font-weight: 850;
      letter-spacing: 0;
    }

    .section-title p {
      margin: 0;
      color: var(--muted);
      max-width: 44rem;
      font-size: 0.98rem;
    }

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

    .feature-card {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.9);
      border-radius: var(--radius);
      padding: 1.05rem;
      box-shadow: var(--shadow-soft);
      transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
      min-height: 100%;
    }

    .feature-card:hover {
      transform: translateY(-2px);
      border-color: rgba(15, 118, 110, 0.22);
      box-shadow: var(--shadow);
    }

    .feature-icon {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 118, 110, 0.08);
      color: var(--accent);
      margin-bottom: 0.85rem;
      font-size: 1.1rem;
    }

    .feature-card h3 {
      font-size: 1.08rem;
      margin: 0 0 0.35rem;
      color: var(--ink);
      font-weight: 800;
    }

    .feature-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.65;
    }

    .feature-foot {
      margin-top: 0.95rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 0.34rem;
      padding: 0.34rem 0.55rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      font-size: 0.82rem;
      color: var(--muted);
      font-weight: 700;
    }

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

    .wall-tile {
      position: relative;
      min-height: 18rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
      box-shadow: var(--shadow-soft);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }

    .wall-tile:hover {
      transform: translateY(-2px);
      border-color: rgba(15, 118, 110, 0.25);
      box-shadow: var(--shadow);
    }

    .wall-tile svg {
      width: 100%;
      height: 100%;
    }

    .tile-caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 0.95rem 0.95rem 0.9rem;
      background: linear-gradient(180deg, rgba(17, 24, 39, 0), rgba(17, 24, 39, 0.88));
      color: #fff;
    }

    .tile-caption strong {
      display: block;
      font-size: 1rem;
      margin-bottom: 0.2rem;
      font-weight: 800;
    }

    .tile-caption span {
      display: block;
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.88rem;
      line-height: 1.45;
    }

    .cta-band {
      border-top: 1px solid rgba(215, 221, 228, 0.8);
      border-bottom: 1px solid rgba(215, 221, 228, 0.8);
      background:
        linear-gradient(90deg, rgba(15, 118, 110, 0.07), rgba(217, 119, 6, 0.06));
      padding: 1.2rem 0;
    }

    .cta-panel {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1.2rem;
      align-items: center;
    }

    .cta-copy h2 {
      margin: 0 0 0.35rem;
      font-size: 1.7rem;
      line-height: 1.2;
      color: var(--ink);
      font-weight: 850;
    }

    .cta-copy p {
      margin: 0;
      color: var(--muted);
      max-width: 42rem;
      font-size: 0.98rem;
    }

    .cta-form {
      display: grid;
      grid-template-columns: minmax(0, 280px) auto;
      gap: 0.7rem;
      align-items: center;
      justify-content: end;
      min-width: min(100%, 520px);
    }

    .input-shell {
      position: relative;
    }

    .form-control {
      border-radius: var(--radius-sm);
      border-color: var(--line-strong);
      background: rgba(255, 255, 255, 0.95);
      padding: 0.85rem 1rem;
      min-height: 48px;
      box-shadow: none !important;
    }

    .form-control:focus {
      border-color: rgba(15, 118, 110, 0.45);
      box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.1) !important;
    }

    .form-note {
      grid-column: 1 / -1;
      font-size: 0.9rem;
      color: var(--muted);
      margin: 0;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1.02fr 0.98fr;
      gap: 1rem;
      align-items: start;
    }

    .accordion {
      display: grid;
      gap: 0.7rem;
    }

    .accordion-item {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: var(--shadow-soft);
    }

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

    .accordion-button:not(.collapsed) {
      background: rgba(15, 118, 110, 0.06);
      color: var(--ink);
    }

    .accordion-button:focus {
      box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.12) !important;
    }

    .accordion-body {
      padding: 0.95rem 1rem 1rem;
      color: var(--muted);
      font-size: 0.95rem;
      background: #fff;
      border-top: 1px solid rgba(215, 221, 228, 0.7);
    }

    .side-note {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: var(--shadow-soft);
      padding: 1.05rem;
      position: sticky;
      top: 5.6rem;
    }

    .side-note h3 {
      margin: 0 0 0.45rem;
      font-size: 1.08rem;
      font-weight: 850;
      color: var(--ink);
    }

    .side-note p {
      margin: 0 0 0.95rem;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.65;
    }

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

    .note-list li {
      display: flex;
      align-items: start;
      gap: 0.55rem;
      color: var(--muted);
      font-size: 0.94rem;
      line-height: 1.55;
    }

    .note-list i {
      color: var(--accent);
      margin-top: 0.15rem;
      flex: 0 0 auto;
    }

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

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

    .news-item {
      display: grid;
      grid-template-columns: 4.3rem 1fr;
      gap: 0.8rem;
      align-items: flex-start;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.92);
      padding: 0.85rem 0.9rem;
      box-shadow: var(--shadow-soft);
      transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
    }

    .news-item:hover {
      transform: translateY(-1px);
      border-color: rgba(15, 118, 110, 0.22);
      box-shadow: var(--shadow);
    }

    .news-date {
      width: 4.3rem;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(217, 119, 6, 0.16);
      background: rgba(217, 119, 6, 0.08);
      color: #9a4a00;
      text-align: center;
      font-weight: 800;
      padding: 0.45rem 0.3rem;
      line-height: 1.12;
      font-size: 0.88rem;
    }

    .news-body strong {
      display: block;
      font-size: 1rem;
      color: var(--ink);
      margin-bottom: 0.2rem;
      font-weight: 800;
    }

    .news-body span {
      display: block;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.55;
    }

    .news-side {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
      box-shadow: var(--shadow-soft);
      padding: 1.05rem;
    }

    .news-side h3 {
      margin: 0 0 0.45rem;
      font-size: 1.08rem;
      color: var(--ink);
      font-weight: 850;
    }

    .news-side p {
      margin: 0 0 1rem;
      color: var(--muted);
      font-size: 0.95rem;
    }

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

    .stack-tile {
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: #fff;
      padding: 0.78rem 0.8rem;
      box-shadow: var(--shadow-soft);
      min-height: 5.4rem;
    }

    .stack-tile strong {
      display: block;
      color: var(--ink);
      margin-bottom: 0.2rem;
      font-size: 0.95rem;
    }

    .stack-tile span {
      display: block;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.45;
    }

    .entry-matrix {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 1rem;
      align-items: start;
    }

    .matrix-copy {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: var(--shadow-soft);
      padding: 1.05rem;
    }

    .matrix-copy h3 {
      margin: 0 0 0.45rem;
      font-size: 1.08rem;
      font-weight: 850;
      color: var(--ink);
    }

    .matrix-copy p {
      margin: 0 0 0.9rem;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .chip-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }

    .chip-btn {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      border-radius: 999px;
      padding: 0.55rem 0.8rem;
      font-size: 0.88rem;
      font-weight: 700;
      transition: transform var(--ease), border-color var(--ease), background-color var(--ease), color var(--ease);
    }

    .chip-btn:hover,
    .chip-btn:focus {
      border-color: rgba(15, 118, 110, 0.25);
      background: rgba(15, 118, 110, 0.06);
      color: var(--accent);
      transform: translateY(-1px);
    }

    .matrix-board {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.8rem;
    }

    .board-item {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 0.88rem 0.8rem;
      box-shadow: var(--shadow-soft);
      min-height: 6rem;
    }

    .board-item strong {
      display: block;
      color: var(--ink);
      font-size: 1.08rem;
      line-height: 1.1;
      margin-bottom: 0.35rem;
    }

    .board-item span {
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.5;
      display: block;
    }

    .update-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.95rem;
      align-items: start;
    }

    .timeline {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.92);
      box-shadow: var(--shadow-soft);
      padding: 1.05rem;
    }

    .timeline h3 {
      margin: 0 0 0.8rem;
      font-size: 1.08rem;
      color: var(--ink);
      font-weight: 850;
    }

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

    .timeline-item {
      display: grid;
      grid-template-columns: 4.2rem 1fr;
      gap: 0.8rem;
      align-items: start;
    }

    .timeline-mark {
      border-radius: var(--radius-sm);
      border: 1px solid rgba(15, 118, 110, 0.18);
      background: rgba(15, 118, 110, 0.07);
      color: var(--accent);
      text-align: center;
      padding: 0.45rem 0.3rem;
      font-weight: 800;
      line-height: 1.15;
      font-size: 0.86rem;
    }

    .timeline-body strong {
      display: block;
      color: var(--ink);
      font-size: 0.98rem;
      margin-bottom: 0.14rem;
      font-weight: 800;
    }

    .timeline-body span {
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.6;
      display: block;
    }

    .quick-box {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.92));
      box-shadow: var(--shadow-soft);
      padding: 1.05rem;
    }

    .quick-box h3 {
      margin: 0 0 0.45rem;
      font-size: 1.08rem;
      color: var(--ink);
      font-weight: 850;
    }

    .quick-box p {
      margin: 0 0 0.9rem;
      color: var(--muted);
      font-size: 0.95rem;
    }

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

    .quick-list li {
      display: flex;
      align-items: start;
      gap: 0.55rem;
      color: var(--muted);
      font-size: 0.93rem;
      line-height: 1.55;
    }

    .quick-list i {
      color: var(--accent-2);
      margin-top: 0.14rem;
      flex: 0 0 auto;
    }

    .site-footer {
      margin-top: 1.2rem;
      border-top: 1px solid rgba(215, 221, 228, 0.8);
      background: rgba(255, 255, 255, 0.7);
      padding: 1.15rem 0 1.35rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr auto;
      gap: 1rem;
      align-items: start;
    }

    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .footer-brand strong {
      color: var(--ink);
      font-size: 1.08rem;
      font-weight: 850;
    }

    .footer-brand p {
      margin: 0;
      color: var(--muted);
      font-size: 0.94rem;
      max-width: 46rem;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem 0.8rem;
      justify-content: flex-end;
      align-items: center;
    }

    .footer-links a {
      color: var(--muted);
      font-weight: 700;
      font-size: 0.92rem;
    }

    .footer-links a:hover {
      color: var(--accent);
    }

    .footer-meta {
      margin-top: 0.9rem;
      color: var(--muted-2);
      font-size: 0.88rem;
      border-top: 1px solid rgba(215, 221, 228, 0.7);
      padding-top: 0.85rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem 1rem;
      justify-content: space-between;
    }

    .nav-mega {
      position: relative;
    }

    .mega-panel {
      position: absolute;
      left: 0;
      top: calc(100% + 0.6rem);
      width: min(38rem, 82vw);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
      pointer-events: none;
      z-index: 10;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.98);
      box-shadow: var(--shadow);
      padding: 0.9rem;
    }

    .nav-mega:hover .mega-panel,
    .nav-mega:focus-within .mega-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

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

    .mega-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: #fff;
      padding: 0.8rem 0.78rem;
      min-height: 8.2rem;
      box-shadow: var(--shadow-soft);
      transition: transform var(--ease), border-color var(--ease);
    }

    .mega-card:hover {
      transform: translateY(-1px);
      border-color: rgba(15, 118, 110, 0.22);
    }

    .mega-card .mini-label {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.24rem 0.45rem;
      border-radius: 999px;
      background: rgba(15, 118, 110, 0.08);
      color: var(--accent);
      font-size: 0.78rem;
      font-weight: 800;
      margin-bottom: 0.55rem;
    }

    .mega-card strong {
      display: block;
      color: var(--ink);
      font-size: 0.92rem;
      font-weight: 800;
      margin-bottom: 0.25rem;
    }

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

    .nav-cta {
      margin-left: auto;
    }

    .nav-cta .btn {
      padding-inline: 0.95rem;
    }

    @media (max-width: 1199.98px) {
      .hero-title {
        font-size: 2.95rem;
      }

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

      .news-grid,
      .update-grid,
      .faq-grid,
      .entry-matrix,
      .cta-panel {
        grid-template-columns: 1fr;
      }

      .cta-form {
        min-width: 100%;
        justify-content: stretch;
        grid-template-columns: 1fr auto;
      }

      .side-note {
        position: static;
      }

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

      .footer-links {
        justify-content: flex-start;
      }
    }

    @media (max-width: 991.98px) {
      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero-title {
        font-size: 2.45rem;
        max-width: 100%;
      }

      .hero-meta,
      .feature-grid,
      .matrix-board,
      .stack-grid {
        grid-template-columns: 1fr;
      }

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

      .countdown-boxes {
        width: 100%;
      }

      .nav-cta {
        margin-left: 0;
      }

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

      .nav-mega {
        position: static;
      }

      .mega-panel {
        position: static;
        width: 100%;
        margin-top: 0.55rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
      }

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

    @media (max-width: 767.98px) {
      .hero-title {
        font-size: 2.2rem;
      }

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

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

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

      .image-wall {
        grid-template-columns: 1fr;
      }

      .wall-tile {
        min-height: 15rem;
      }

      .cta-form {
        grid-template-columns: 1fr;
      }

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

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

      .news-date {
        width: fit-content;
        min-width: 4.3rem;
      }

      .timeline-item {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 575.98px) {
      .container-custom {
        width: min(100% - 1rem, var(--container));
      }

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

      .countdown-strip,
      .hero-stage,
      .feature-card,
      .wall-tile,
      .cta-band,
      .accordion-item,
      .timeline,
      .quick-box,
      .news-item,
      .news-side,
      .matrix-copy,
      .board-item,
      .stack-tile {
        border-radius: 7px;
      }

      .hero-meta {
        gap: 0.55rem;
      }

      .meta-chip {
        padding: 0.7rem 0.75rem;
      }

      .hero-actions .btn {
        width: 100%;
      }

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

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

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

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

/* roulang page: category1 */
:root{
      --bg:#f5f7f6;
      --bg-2:#eef2ef;
      --surface:#ffffff;
      --surface-2:#fafbfa;
      --ink:#111418;
      --muted:#66707a;
      --line:#d9e1db;
      --line-strong:#b8c4bc;
      --accent:#1f7a54;
      --accent-2:#c68236;
      --accent-soft:#e2f1e8;
      --warn:#8e5e1c;
      --good:#166a42;
      --shadow:0 16px 36px rgba(16, 20, 24, .08);
      --shadow-soft:0 10px 24px rgba(16, 20, 24, .05);
      --radius:8px;
      --radius-sm:6px;
      --radius-xs:4px;
      --container:1180px;
    }
    *, *::before, *::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      background:
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(245,247,246,.96)),
        linear-gradient(135deg, rgba(31,122,84,.04), transparent 35%),
        var(--bg);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.65;
      letter-spacing:0;
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a, button, input, textarea, select{font:inherit}
    a{
      color:inherit;
      text-decoration:none;
      transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    }
    a:hover{color:inherit}
    img{max-width:100%; display:block}
    button, .btn{border-radius:var(--radius)}
    .container-custom{
      width:min(var(--container), calc(100% - 2rem));
      margin-inline:auto;
    }
    .section-pad{
      padding:28px 0;
    }
    .section-title{
      margin:0;
      font-size:1.5rem;
      line-height:1.2;
      font-weight:800;
      letter-spacing:0;
    }
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      margin-bottom:.7rem;
      padding:.28rem .6rem;
      border:1px solid var(--line);
      background:rgba(255,255,255,.72);
      color:var(--accent);
      border-radius:999px;
      font-size:.82rem;
      font-weight:700;
    }
    .section-note{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .soft-panel{
      background:rgba(255,255,255,.82);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1030;
      background:rgba(245,247,246,.82);
      backdrop-filter:saturate(160%) blur(14px);
      border-bottom:1px solid rgba(217,225,219,.9);
    }
    .site-header .navbar{
      padding:.85rem 0;
    }
    .site-header .navbar-brand{
      display:inline-flex;
      align-items:center;
      gap:.72rem;
      font-weight:800;
      letter-spacing:0;
      font-size:1.02rem;
      color:var(--ink);
    }
    .brand-mark{
      width:2rem;
      height:2rem;
      display:inline-grid;
      place-items:center;
      border-radius:var(--radius-sm);
      background:linear-gradient(135deg, var(--accent), #2b9a69);
      color:#fff;
      box-shadow:0 8px 18px rgba(31,122,84,.18);
      flex:0 0 auto;
    }
    .navbar-toggler{
      border:1px solid var(--line);
      background:rgba(255,255,255,.9);
      box-shadow:none;
      padding:.55rem .7rem;
      border-radius:var(--radius-sm);
    }
    .navbar-toggler:focus{
      box-shadow:0 0 0 .2rem rgba(31,122,84,.14);
    }
    .navbar-toggler-icon{
      width:1.2em;
      height:1.2em;
      background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17,20,24,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    .navbar-nav{
      gap:.3rem;
    }
    .nav-link{
      position:relative;
      padding:.72rem .95rem !important;
      border-radius:var(--radius-sm);
      color:var(--muted);
      font-weight:700;
      font-size:.96rem;
    }
    .nav-link:hover,
    .nav-link:focus{
      color:var(--ink);
      background:rgba(255,255,255,.75);
    }
    .nav-link.active{
      color:var(--ink);
      background:rgba(31,122,84,.08);
    }
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:.95rem;
      right:.95rem;
      bottom:.28rem;
      height:2px;
      border-radius:99px;
      background:var(--accent);
    }
    .nav-cta .btn,
    .btn-soft,
    .btn-accent,
    .btn-outline-soft{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border-radius:var(--radius-sm);
      font-weight:700;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
    }
    .btn-accent{
      color:#fff;
      background:linear-gradient(135deg, var(--accent), #2a9165);
      border:1px solid rgba(31,122,84,.12);
      box-shadow:0 12px 22px rgba(31,122,84,.16);
    }
    .btn-accent:hover{
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 16px 30px rgba(31,122,84,.2);
    }
    .btn-soft{
      background:rgba(31,122,84,.08);
      color:var(--accent);
      border:1px solid rgba(31,122,84,.18);
    }
    .btn-soft:hover{
      color:var(--accent);
      background:rgba(31,122,84,.12);
      transform:translateY(-1px);
    }
    .btn-outline-soft{
      color:var(--ink);
      background:rgba(255,255,255,.82);
      border:1px solid var(--line);
    }
    .btn-outline-soft:hover{
      color:var(--ink);
      border-color:var(--line-strong);
      background:#fff;
      transform:translateY(-1px);
    }
    .nav-mega{
      position:relative;
    }
    .mega-panel{
      position:absolute;
      left:0;
      top:calc(100% + .55rem);
      width:min(720px, calc(100vw - 2rem));
      padding:1rem;
      background:rgba(255,255,255,.98);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      opacity:0;
      visibility:hidden;
      transform:translateY(8px);
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
    }
    .nav-mega:hover .mega-panel,
    .nav-mega:focus-within .mega-panel{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
      pointer-events:auto;
    }
    .mega-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:.85rem;
    }
    .mega-card{
      padding:.95rem;
      background:var(--surface-2);
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
      min-height:138px;
    }
    .mini-label{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.24rem .55rem;
      border-radius:999px;
      background:rgba(31,122,84,.09);
      color:var(--accent);
      border:1px solid rgba(31,122,84,.16);
      font-size:.8rem;
      font-weight:700;
    }
    .mega-card strong{
      display:block;
      margin-top:.65rem;
      font-size:1rem;
      line-height:1.35;
    }
    .mega-card p{
      margin:.45rem 0 0;
      color:var(--muted);
      font-size:.9rem;
    }
    .countdown-strip{
      padding:16px 0 6px;
    }
    .countdown-shell{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      padding:1rem 1.1rem;
      background:linear-gradient(135deg, rgba(31,122,84,.08), rgba(255,255,255,.92));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .countdown-copy{
      display:flex;
      flex-direction:column;
      gap:.2rem;
    }
    .countdown-copy strong{
      font-size:1.05rem;
      line-height:1.35;
    }
    .countdown-time{
      color:var(--accent);
      font-weight:800;
      font-variant-numeric:tabular-nums;
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.34rem .6rem;
      background:rgba(255,255,255,.8);
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--muted);
      font-size:.84rem;
      font-weight:700;
      white-space:nowrap;
    }
    .hero-area{
      padding:16px 0 8px;
    }
    .hero-stage{
      padding:1.2rem;
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,251,250,.88));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.28rem .6rem;
      margin-bottom:.85rem;
      background:rgba(31,122,84,.09);
      color:var(--accent);
      border:1px solid rgba(31,122,84,.16);
      border-radius:999px;
      font-size:.82rem;
      font-weight:800;
    }
    .hero-stage h1{
      margin:0 0 .8rem;
      font-size:2.8rem;
      line-height:1.14;
      font-weight:900;
      letter-spacing:0;
      max-width:13ch;
    }
    .hero-stage .lead{
      margin:0;
      color:var(--muted);
      font-size:1.01rem;
      max-width:52ch;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:1.25rem;
    }
    .hero-badges{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      margin-top:1rem;
    }
    .hero-badges .chip{
      background:rgba(31,122,84,.06);
      color:var(--good);
    }
    .status-shell{
      height:100%;
      padding:1.1rem;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,248,.9));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      display:flex;
      flex-direction:column;
      gap:1rem;
    }
    .status-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:.9rem;
    }
    .status-head strong{
      font-size:1.02rem;
      line-height:1.35;
    }
    .status-head span{
      color:var(--muted);
      font-size:.88rem;
    }
    .status-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:.65rem;
    }
    .status-box{
      padding:.9rem .8rem;
      background:var(--surface-2);
      border:1px solid var(--line);
      border-radius:var(--radius-sm);
      min-height:96px;
    }
    .status-box .num{
      display:block;
      font-size:1.5rem;
      font-weight:900;
      line-height:1;
      color:var(--ink);
      font-variant-numeric:tabular-nums;
    }
    .status-box .label{
      display:block;
      margin-top:.35rem;
      color:var(--muted);
      font-size:.84rem;
      line-height:1.35;
    }
    .status-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.7rem;
    }
    .status-list li{
      display:flex;
      align-items:flex-start;
      gap:.65rem;
      color:var(--ink);
      font-size:.95rem;
    }
    .status-list i{
      color:var(--accent);
      margin-top:.15rem;
    }
    .control-band{
      padding:20px 0 8px;
    }
    .control-shell{
      padding:1rem;
      background:rgba(255,255,255,.9);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .control-top{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:1rem;
      margin-bottom:1rem;
    }
    .control-top .section-title{
      font-size:1.3rem;
    }
    .control-top .meta{
      color:var(--muted);
      font-size:.9rem;
      text-align:right;
    }
    .filter-row{
      display:grid;
      grid-template-columns:1.3fr auto;
      gap:1rem;
      align-items:center;
    }
    .search-wrap .input-group{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:0 8px 20px rgba(16,20,24,.04);
    }
    .search-wrap .input-group-text{
      background:var(--surface);
      border:0;
      color:var(--muted);
      padding-left:1rem;
    }
    .search-wrap .form-control{
      border:0;
      box-shadow:none;
      padding:.8rem .2rem .8rem 0;
      color:var(--ink);
      background:var(--surface);
    }
    .search-wrap .form-control:focus{
      box-shadow:none;
    }
    .search-wrap .form-control::placeholder{
      color:#94a0a6;
    }
    .search-wrap .btn{
      border:0;
      border-left:1px solid var(--line);
      border-radius:0;
      background:var(--surface-2);
      color:var(--ink);
      padding:.8rem 1rem;
    }
    .sort-set{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      justify-content:flex-end;
    }
    .sort-set .btn-check:checked + .btn-outline-soft{
      background:rgba(31,122,84,.1);
      color:var(--accent);
      border-color:rgba(31,122,84,.24);
      box-shadow:0 8px 16px rgba(31,122,84,.08);
    }
    .listing-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      margin:2px 0 1rem;
    }
    .listing-head p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .listing-stat{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.34rem .6rem;
      background:rgba(255,255,255,.9);
      border:1px solid var(--line);
      border-radius:999px;
      color:var(--ink);
      font-size:.84rem;
      font-weight:700;
      white-space:nowrap;
    }
    .entry-card{
      height:100%;
      display:flex;
      flex-direction:column;
      background:rgba(255,255,255,.94);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .entry-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow);
      border-color:#c7d1ca;
    }
    .entry-visual{
      position:relative;
      min-height:118px;
      border-bottom:1px solid var(--line);
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(17,20,24,.78), rgba(31,122,84,.48)),
        linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,.08));
    }
    .entry-visual::before{
      content:"";
      position:absolute;
      inset:14px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:calc(var(--radius) - 2px);
    }
    .entry-visual::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:18px;
      height:8px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.88) 0 14%, transparent 14% 23%, rgba(255,255,255,.64) 23% 42%, transparent 42% 52%, rgba(255,255,255,.48) 52% 68%, transparent 68% 100%);
      opacity:.7;
      border-radius:999px;
    }
    .entry-visual span{
      position:absolute;
      top:14px;
      left:14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:2rem;
      height:2rem;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.9);
      color:var(--ink);
      font-weight:900;
      font-size:.92rem;
      z-index:1;
    }
    .entry-body{
      display:flex;
      flex-direction:column;
      gap:.75rem;
      padding:1rem;
      flex:1;
    }
    .entry-topline{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:.55rem;
    }
    .status-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.22rem .5rem;
      border-radius:999px;
      border:1px solid rgba(31,122,84,.18);
      background:rgba(31,122,84,.08);
      color:var(--accent);
      font-size:.78rem;
      font-weight:800;
    }
    .entry-meta-mini{
      color:var(--muted);
      font-size:.8rem;
      white-space:nowrap;
    }
    .entry-body h3{
      margin:0;
      font-size:1.08rem;
      line-height:1.35;
      font-weight:800;
      letter-spacing:0;
    }
    .entry-body p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.7;
    }
    .entry-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      margin-top:auto;
      padding-top:.2rem;
    }
    .entry-footnote{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      color:var(--muted);
      font-size:.8rem;
    }
    .entry-footnote span{
      display:inline-flex;
      align-items:center;
      gap:.3rem;
      padding:.22rem .42rem;
      background:var(--surface-2);
      border:1px solid var(--line);
      border-radius:999px;
    }
    .mosaic-section{
      padding:26px 0 10px;
    }
    .mosaic-shell{
      padding:1rem;
      background:rgba(255,255,255,.9);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .mosaic-grid{
      display:grid;
      grid-template-columns:repeat(12, minmax(0, 1fr));
      gap:.9rem;
      margin-top:1rem;
    }
    .mosaic-tile{
      position:relative;
      overflow:hidden;
      min-height:220px;
      padding:1rem;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:var(--surface);
      box-shadow:var(--shadow-soft);
    }
    .tile-a{grid-column:span 5; background:linear-gradient(145deg, rgba(31,122,84,.08), rgba(255,255,255,.95));}
    .tile-b{grid-column:span 7; background:linear-gradient(145deg, rgba(198,130,54,.08), rgba(255,255,255,.95));}
    .tile-c{grid-column:span 7; background:linear-gradient(145deg, rgba(17,20,24,.06), rgba(255,255,255,.96));}
    .tile-d{grid-column:span 5; background:linear-gradient(145deg, rgba(31,122,84,.05), rgba(255,255,255,.96));}
    .mosaic-kicker{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      margin-bottom:.7rem;
      padding:.24rem .5rem;
      border-radius:999px;
      background:rgba(255,255,255,.92);
      border:1px solid var(--line);
      color:var(--muted);
      font-size:.78rem;
      font-weight:800;
    }
    .mosaic-tile strong{
      display:block;
      font-size:1.22rem;
      line-height:1.35;
      margin-bottom:.45rem;
      letter-spacing:0;
    }
    .mosaic-tile p{
      margin:0;
      color:var(--muted);
      max-width:38ch;
    }
    .mosaic-art{
      position:absolute;
      inset:auto 1rem 1rem 1rem;
      display:grid;
      gap:.55rem;
    }
    .art-bars{
      display:grid;
      grid-template-columns:repeat(6, 1fr);
      gap:.35rem;
      align-items:end;
      height:72px;
    }
    .art-bars span{
      display:block;
      border-radius:999px;
      background:rgba(31,122,84,.82);
    }
    .art-bars span:nth-child(2n){background:rgba(198,130,54,.86)}
    .art-bars span:nth-child(1){height:28%}
    .art-bars span:nth-child(2){height:58%}
    .art-bars span:nth-child(3){height:40%}
    .art-bars span:nth-child(4){height:78%}
    .art-bars span:nth-child(5){height:48%}
    .art-bars span:nth-child(6){height:88%}
    .art-path{
      display:flex;
      gap:.45rem;
      flex-wrap:wrap;
    }
    .art-path span{
      padding:.28rem .5rem;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(255,255,255,.88);
      font-size:.78rem;
      color:var(--muted);
      font-weight:700;
    }
    .art-map{
      display:grid;
      gap:.55rem;
    }
    .art-line{
      display:grid;
      grid-template-columns:84px 1fr;
      gap:.55rem;
      align-items:center;
    }
    .art-line label{
      color:var(--muted);
      font-size:.8rem;
      font-weight:700;
    }
    .art-track{
      height:10px;
      border-radius:999px;
      background:rgba(17,20,24,.08);
      overflow:hidden;
    }
    .art-track i{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--accent), #39a671);
    }
    .cta-section{
      padding:28px 0 8px;
    }
    .cta-shell{
      padding:1.2rem;
      background:linear-gradient(135deg, rgba(17,20,24,.96), rgba(34,42,36,.96));
      color:#f4f7f5;
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:1rem;
      align-items:center;
    }
    .cta-shell .section-kicker{
      background:rgba(255,255,255,.08);
      color:#d8f1e1;
      border-color:rgba(255,255,255,.08);
    }
    .cta-shell h2{
      margin:0 0 .7rem;
      font-size:1.5rem;
      line-height:1.25;
      font-weight:900;
      letter-spacing:0;
    }
    .cta-shell p{
      margin:0;
      color:rgba(244,247,245,.76);
      max-width:54ch;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.7rem;
      margin-top:1rem;
    }
    .btn-ghost-light{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.4rem;
      padding:.72rem 1rem;
      color:#f4f7f5;
      background:transparent;
      border:1px solid rgba(255,255,255,.18);
      border-radius:var(--radius-sm);
      font-weight:700;
    }
    .btn-ghost-light:hover{
      color:#fff;
      border-color:rgba(255,255,255,.3);
      background:rgba(255,255,255,.05);
      transform:translateY(-1px);
    }
    .cta-side{
      padding:1rem;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      border-radius:var(--radius);
    }
    .cta-side ul{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.7rem;
    }
    .cta-side li{
      display:flex;
      align-items:flex-start;
      gap:.6rem;
      color:rgba(244,247,245,.86);
      font-size:.95rem;
    }
    .cta-side i{
      color:#8fe1b6;
      margin-top:.15rem;
    }
    .faq-section{
      padding:26px 0 34px;
    }
    .faq-shell{
      padding:1rem;
      background:rgba(255,255,255,.9);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
    }
    .accordion{
      --bs-accordion-bg: transparent;
      --bs-accordion-border-color: var(--line);
      --bs-accordion-border-width: 1px;
      --bs-accordion-inner-border-radius: var(--radius-sm);
      --bs-accordion-btn-padding-x: 1rem;
      --bs-accordion-btn-padding-y: .95rem;
      --bs-accordion-btn-color: var(--ink);
      --bs-accordion-btn-bg: rgba(255,255,255,.92);
      --bs-accordion-active-color: var(--ink);
      --bs-accordion-active-bg: rgba(31,122,84,.06);
      --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(31,122,84,.12);
      --bs-accordion-btn-icon-width: 1rem;
    }
    .accordion-item{
      overflow:hidden;
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.9);
      margin-bottom:.7rem;
      box-shadow:var(--shadow-soft);
    }
    .accordion-button{
      font-weight:800;
      box-shadow:none;
    }
    .accordion-button:not(.collapsed){
      color:var(--ink);
      box-shadow:none;
    }
    .accordion-button::after{
      width:.9rem;
      height:.9rem;
      background-size:.9rem;
    }
    .accordion-body{
      color:var(--muted);
      padding:0 1rem 1rem;
    }
    .site-footer{
      margin-top:12px;
      padding:22px 0 26px;
      border-top:1px solid rgba(217,225,219,.9);
      background:rgba(246,248,247,.88);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr .9fr;
      gap:1rem;
      align-items:flex-start;
      padding-bottom:1rem;
      border-bottom:1px solid var(--line);
    }
    .footer-brand strong{
      display:block;
      font-size:1.02rem;
      margin-bottom:.45rem;
    }
    .footer-brand p{
      margin:0;
      color:var(--muted);
      max-width:56ch;
      font-size:.92rem;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:.5rem 1rem;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:700;
      padding:.24rem 0;
    }
    .footer-links a:hover{
      color:var(--ink);
    }
    .footer-meta{
      display:flex;
      flex-wrap:wrap;
      gap:.9rem 1.2rem;
      padding-top:1rem;
      color:var(--muted);
      font-size:.86rem;
    }
    .focus-ring:focus-visible,
    .btn:focus-visible,
    .nav-link:focus-visible,
    .footer-links a:focus-visible,
    .accordion-button:focus-visible,
    .form-control:focus-visible{
      outline:none;
      box-shadow:0 0 0 .2rem rgba(31,122,84,.16);
    }
    .form-control{
      border-radius:0;
    }
    .text-accent{color:var(--accent) !important;}
    .text-muted-2{color:var(--muted) !important;}
    @media (max-width: 991.98px){
      .mega-panel{
        position:static;
        width:100%;
        margin-top:.6rem;
        opacity:1;
        visibility:visible;
        transform:none;
        pointer-events:auto;
        box-shadow:none;
      }
      .mega-grid{
        grid-template-columns:1fr;
      }
      .filter-row,
      .cta-shell,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .countdown-shell,
      .control-top,
      .listing-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .control-top .meta{
        text-align:left;
      }
      .hero-stage h1{
        max-width:none;
        font-size:2.2rem;
      }
      .status-grid{
        grid-template-columns:1fr;
      }
      .mosaic-grid{
        grid-template-columns:1fr;
      }
      .tile-a, .tile-b, .tile-c, .tile-d{
        grid-column:span 1;
      }
      .footer-links{
        justify-content:flex-start;
      }
    }
    @media (max-width: 767.98px){
      .site-header .navbar{
        padding:.7rem 0;
      }
      .hero-stage{
        padding:1rem;
      }
      .hero-stage h1{
        font-size:1.95rem;
      }
      .hero-stage .lead{
        font-size:.96rem;
      }
      .entry-body{
        padding:.9rem;
      }
      .section-title{
        font-size:1.28rem;
      }
      .cta-shell{
        padding:1rem;
      }
      .cta-shell h2{
        font-size:1.28rem;
      }
      .status-shell,
      .control-shell,
      .mosaic-shell,
      .faq-shell{
        padding:.9rem;
      }
    }
    @media (max-width: 575.98px){
      .container-custom{
        width:min(var(--container), calc(100% - 1.1rem));
      }
      .countdown-shell{
        padding:.9rem;
      }
      .hero-actions,
      .cta-actions{
        width:100%;
      }
      .hero-actions .btn,
      .cta-actions .btn{
        width:100%;
      }
      .search-wrap .input-group{
        border-radius:var(--radius-sm);
      }
      .sort-set{
        justify-content:flex-start;
      }
      .entry-visual{
        min-height:104px;
      }
      .footer-meta{
        gap:.4rem .9rem;
      }
    }