/* roulang page: index */
:root {
      --ink: #202521;
      --muted: #707970;
      --paper: #f5f6f1;
      --surface: #fff;
      --surface-soft: #edf0e8;
      --line: #dfe4db;
      --green: #315f4c;
      --green-dark: #244635;
      --lime: #c9e68a;
      --coral: #e27458;
      --gold: #d4a95f;
      --radius: 8px;
      --shadow: 0 12px 34px rgba(28, 42, 32, .08);
      --container: 1180px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 86px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(250, 251, 247, .94);
      border-bottom: 1px solid rgba(31, 49, 37, .1);
      backdrop-filter: blur(16px);
    }
    .nav-shell { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; font-weight: 800; font-size: 16px; }
    .brand-mark {
      width: 34px; height: 34px; display: grid; place-items: center;
      color: var(--green-dark); background: var(--lime); border-radius: 7px;
      font-size: 13px; font-weight: 900;
    }
    .nav-links { display: flex; align-items: center; gap: 7px; margin: 0; list-style: none; }
    .nav-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; color: #566058; border-radius: 6px; font-size: 13px; font-weight: 650; }
    .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--green-dark); background: #e8eee5; }
    .nav-links .nav-highlight { color: #fff; background: var(--green); }
    .nav-links .nav-highlight:hover { color: #fff; background: var(--green-dark); }

    .hero {
      position: relative; overflow: hidden; padding: 78px 0 68px;
      background:
        radial-gradient(ellipse at 13% 18%, rgba(201,230,138,.38), transparent 34%),
        radial-gradient(ellipse at 85% 2%, rgba(226,116,88,.13), transparent 30%),
        #f5f6f1;
    }
    .hero::after {
      content: ""; position: absolute; right: -90px; bottom: -220px; width: 490px; height: 490px;
      border: 1px solid rgba(49,95,76,.13); border-radius: 50%; pointer-events: none;
      box-shadow: 0 0 0 42px rgba(49,95,76,.025), 0 0 0 84px rgba(49,95,76,.02);
    }
    .hero-inner { position: relative; z-index: 1; max-width: 900px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: 0; }
    .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--coral); }
    h1 { max-width: 850px; margin: 19px 0 14px; font-size: clamp(38px, 5vw, 62px); line-height: 1.15; letter-spacing: 0; font-weight: 850; }
    h1 .accent { color: var(--green); }
    .hero-subtitle { margin: 0 0 17px; color: #526158; font-size: 19px; font-weight: 650; }
    .hero-copy { max-width: 780px; margin: 0; color: #626d65; font-size: 15px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }
    .button-custom {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px;
      padding: 0 19px; border: 1px solid var(--green); border-radius: 6px;
      color: #fff; background: var(--green); font-size: 13px; font-weight: 750;
    }
    .button-custom:hover { color: #fff; background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(36,70,53,.18); }
    .button-outline { color: var(--green-dark); background: rgba(255,255,255,.68); border-color: #c9d3c8; }
    .button-outline:hover { color: var(--green-dark); background: #fff; }
    .hero-facts { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 25px; color: #647067; font-size: 12px; }
    .hero-facts span { display: inline-flex; align-items: center; gap: 7px; }
    .fact-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

    main { overflow: hidden; }
    .section { padding: 66px 0; border-top: 1px solid rgba(41,58,46,.08); }
    .section-white { background: var(--surface); }
    .section-soft { background: var(--surface-soft); }
    .section-dark { color: #f3f5f0; background: #202b24; }
    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 27px; }
    .section-kicker { margin: 0 0 6px; color: var(--coral); font-size: 11px; font-weight: 850; }
    .section h2 { margin: 0; font-size: 27px; line-height: 1.3; letter-spacing: 0; font-weight: 800; }
    .section-intro { max-width: 700px; margin: 11px 0 0; color: var(--muted); font-size: 14px; }
    .section-dark .section-intro { color: #b9c3ba; }
    .section-link { flex: 0 0 auto; color: var(--green); font-size: 13px; font-weight: 750; }
    .section-link:hover { color: var(--coral); }
    .section-dark .section-link { color: var(--lime); }

    .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
    .kpi-item { min-height: 142px; padding: 23px 24px; background: #fff; }
    .kpi-label { display: block; color: var(--muted); font-size: 12px; font-weight: 650; }
    .kpi-value { display: block; margin-top: 9px; color: var(--green-dark); font-size: 29px; line-height: 1.2; font-weight: 850; }
    .kpi-note { display: block; margin-top: 7px; color: #818a82; font-size: 11px; }

    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
    .feature-item { min-height: 205px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
    .feature-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .feature-index { display: inline-grid; place-items: center; width: 31px; height: 31px; color: var(--green-dark); background: #e6efdd; border-radius: 6px; font-size: 12px; font-weight: 850; }
    .feature-item h3 { margin: 17px 0 7px; font-size: 17px; }
    .feature-item p { margin: 0; color: var(--muted); font-size: 13px; }

    .scene-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
    .scene-aside { padding: 28px 0; }
    .scene-aside .section-intro { max-width: 440px; }
    .scene-list { margin: 23px 0 0; padding: 0; list-style: none; }
    .scene-list li { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); }
    .scene-num { flex: 0 0 27px; color: var(--coral); font-size: 12px; font-weight: 850; }
    .scene-list strong { display: block; font-size: 14px; }
    .scene-list span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
    .scene-board { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
    .scene-tile { min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; padding: 23px; border-radius: var(--radius); }
    .scene-tile-main { min-height: 372px; color: #fff; background: var(--green); }
    .scene-tile-coral { color: #3a2823; background: #f0c5b5; }
    .scene-tile-light { color: var(--ink); background: #e6edda; }
    .tile-label { font-size: 11px; font-weight: 800; opacity: .78; }
    .scene-tile h3 { margin: 10px 0 5px; font-size: 21px; line-height: 1.35; }
    .scene-tile p { margin: 0; max-width: 340px; font-size: 12px; opacity: .82; }
    .tile-arrow { align-self: flex-end; font-size: 22px; }

    .proof-band { padding: 46px 0; background: #e7eedf; }
    .proof-inner { display: flex; align-items: center; justify-content: space-between; gap: 34px; }
    .proof-copy { max-width: 650px; }
    .proof-copy h2 { margin: 0 0 8px; font-size: 24px; }
    .proof-copy p { margin: 0; color: #626d65; font-size: 13px; }
    .proof-stats { display: flex; gap: 28px; }
    .proof-stat strong { display: block; color: var(--green-dark); font-size: 25px; line-height: 1.2; }
    .proof-stat span { color: #69756c; font-size: 11px; }

    .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
    .compare-panel { padding: 23px 25px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
    .compare-panel.featured { border-color: #92ac92; box-shadow: inset 0 3px 0 var(--green); }
    .compare-panel h3 { margin: 0 0 13px; font-size: 16px; }
    .compare-panel ul { margin: 0; padding: 0; list-style: none; }
    .compare-panel li { position: relative; padding: 9px 0 9px 23px; border-top: 1px solid #edf0eb; color: #687269; font-size: 13px; }
    .compare-panel li::before { content: "•"; position: absolute; left: 4px; color: var(--coral); font-size: 18px; line-height: 1.2; }

    .milestone { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 28px; border-top: 1px solid #536157; }
    .milestone-item { position: relative; padding: 25px 18px 0 0; }
    .milestone-item::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border: 2px solid #202b24; border-radius: 50%; background: var(--lime); }
    .milestone-date { color: var(--lime); font-size: 11px; font-weight: 800; }
    .milestone-item h3 { margin: 8px 0 5px; font-size: 15px; }
    .milestone-item p { margin: 0; color: #b9c3ba; font-size: 12px; }

    .news-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; }
    .news-feature { position: relative; min-height: 330px; display: flex; align-items: end; overflow: hidden; border-radius: var(--radius); background: #46584b; }
    .news-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .66; }
    .news-feature::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(transparent, rgba(14,23,17,.84)); }
    .news-feature-copy { position: relative; z-index: 1; padding: 27px; color: #fff; }
    .news-feature-copy .tag { color: #202b24; background: var(--lime); }
    .news-feature-copy h3 { max-width: 510px; margin: 12px 0 7px; font-size: 22px; line-height: 1.4; }
    .news-feature-copy p { margin: 0; color: rgba(255,255,255,.78); font-size: 12px; }
    .news-list { margin: 0; padding: 0; list-style: none; }
    .news-list li { padding: 13px 0; border-bottom: 1px solid var(--line); }
    .news-list time { display: block; color: #8a938b; font-size: 11px; }
    .news-list a { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; line-height: 1.5; }
    .news-list a:hover { color: var(--green); }
    .tag { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; background: #edf1e8; color: var(--green-dark); font-size: 10px; font-weight: 800; }

    .assurance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; }
    .assurance-item { display: flex; gap: 15px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
    .assurance-icon { flex: 0 0 35px; height: 35px; display: grid; place-items: center; border: 1px solid #627269; border-radius: 7px; color: var(--lime); font-size: 14px; font-weight: 850; }
    .assurance-item h3 { margin: 0 0 4px; font-size: 14px; }
    .assurance-item p { margin: 0; color: #b9c3ba; font-size: 12px; }

    .faq-list { max-width: 900px; margin: 25px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .faq-list li { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
    .faq-list h3 { margin: 0; font-size: 14px; }
    .faq-list p { margin: 0; color: var(--muted); font-size: 13px; }

    .closing { padding: 55px 0; background: #dce8d4; }
    .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .closing h2 { margin: 0 0 7px; font-size: 24px; }
    .closing p { max-width: 680px; margin: 0; color: #5e6a61; font-size: 13px; }
    .closing .button-custom { flex: 0 0 auto; }

    .site-footer { padding: 48px 0 20px; color: #c2cbc3; background: #17211b; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 36px; padding-bottom: 35px; }
    .footer-brand { color: #fff; }
    .footer-about { max-width: 300px; margin: 14px 0 0; color: #9eaaa0; font-size: 12px; }
    .footer-col h3 { margin: 2px 0 13px; color: #f4f6f2; font-size: 12px; }
    .footer-col ul { margin: 0; padding: 0; list-style: none; }
    .footer-col li { margin: 8px 0; color: #9eaaa0; font-size: 12px; }
    .footer-col a:hover { color: var(--lime); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.13); color: #849188; font-size: 11px; }
    .adult-note { color: #bbc4bb; }

    @media (max-width: 1024px) {
      .container { width: min(var(--container), calc(100% - 36px)); }
      .nav-shell { gap: 14px; }
      .brand { font-size: 14px; }
      .nav-links a { padding-inline: 9px; font-size: 12px; }
      .scene-layout { gap: 30px; }
      .footer-grid { gap: 24px; }
    }
    @media (max-width: 768px) {
      .nav-shell { min-height: 66px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 0 8px; }
      .nav-links { width: 100%; gap: 3px; overflow-x: auto; scrollbar-width: none; }
      .nav-links::-webkit-scrollbar { display: none; }
      .nav-links a { min-height: 32px; padding-inline: 10px; white-space: nowrap; font-size: 11px; }
      .brand-mark { width: 29px; height: 29px; }
      .hero { padding: 55px 0 49px; }
      .hero::after { right: -250px; }
      .hero-copy { font-size: 14px; }
      .section { padding: 49px 0; }
      .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
      .kpi-grid { grid-template-columns: repeat(2, 1fr); }
      .feature-grid { grid-template-columns: 1fr 1fr; }
      .scene-layout { grid-template-columns: 1fr; gap: 18px; }
      .scene-aside { padding: 0; }
      .scene-board { grid-template-columns: 1fr 1fr; }
      .scene-tile-main { min-height: 280px; grid-row: span 2; }
      .scene-tile { min-height: 134px; padding: 18px; }
      .proof-inner { align-items: flex-start; flex-direction: column; }
      .proof-stats { gap: 34px; }
      .news-grid { grid-template-columns: 1fr; gap: 20px; }
      .news-feature { min-height: 290px; }
      .milestone { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
      .closing-inner { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 30px); }
      h1 { font-size: 38px; }
      .hero-subtitle { font-size: 16px; }
      .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
      .button-custom { padding-inline: 12px; font-size: 12px; }
      .hero-facts { gap: 8px 14px; font-size: 11px; }
      .section h2 { font-size: 23px; }
      .kpi-item { min-height: 124px; padding: 17px; }
      .kpi-value { font-size: 25px; }
      .feature-grid { grid-template-columns: 1fr; gap: 10px; }
      .feature-item { min-height: 0; padding: 19px; }
      .scene-board { grid-template-columns: 1fr 1fr; }
      .scene-tile-main { min-height: 260px; }
      .scene-tile h3 { font-size: 17px; }
      .proof-stats { width: 100%; justify-content: space-between; gap: 12px; }
      .proof-stat strong { font-size: 21px; }
      .compare-grid { grid-template-columns: 1fr; }
      .milestone { grid-template-columns: 1fr 1fr; }
      .news-feature { min-height: 270px; }
      .news-feature-copy { padding: 19px; }
      .news-feature-copy h3 { font-size: 18px; }
      .assurance-grid { grid-template-columns: 1fr; gap: 0; }
      .faq-list li { grid-template-columns: 1fr; gap: 7px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
      .footer-grid > :first-child { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; gap: 7px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root {
      --ink: #202521;
      --muted: #707970;
      --paper: #f5f6f1;
      --surface: #fff;
      --surface-soft: #edf0e8;
      --line: #dfe4db;
      --green: #315f4c;
      --green-dark: #244635;
      --lime: #c9e68a;
      --coral: #e27458;
      --gold: #d4a95f;
      --radius: 8px;
      --shadow: 0 12px 34px rgba(28,42,32,.08);
      --container: 1180px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 86px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(250,251,247,.94);
      border-bottom: 1px solid rgba(31,49,37,.1);
      backdrop-filter: blur(16px);
    }
    .nav-shell { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; font-weight: 800; font-size: 16px; }
    .brand-mark {
      width: 34px; height: 34px; display: grid; place-items: center;
      color: var(--green-dark); background: var(--lime); border-radius: 7px;
      font-size: 13px; font-weight: 900;
    }
    .nav-links { display: flex; align-items: center; gap: 7px; margin: 0; list-style: none; }
    .nav-links a {
      display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px;
      color: #566058; border-radius: 6px; font-size: 13px; font-weight: 650;
    }
    .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--green-dark); background: #e8eee5; }
    .nav-links .nav-highlight { color: #fff; background: var(--green); }
    .nav-links .nav-highlight:hover { color: #fff; background: var(--green-dark); }
    main { overflow: hidden; }
    .category-hero {
      position: relative; padding: 58px 0 48px;
      background: #f5f6f1;
      border-bottom: 1px solid rgba(41,58,46,.08);
    }
    .breadcrumb { margin: 0 0 20px; color: var(--muted); font-size: 12px; }
    .breadcrumb a { color: var(--green); font-weight: 700; }
    .breadcrumb span { margin: 0 8px; color: #a0a99f; }
    .hero-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: 54px; align-items: center; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--green); font-size: 12px; font-weight: 800; }
    .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--coral); }
    h1 { max-width: 690px; margin: 12px 0 10px; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.14; font-weight: 850; letter-spacing: 0; }
    h1 em { color: var(--green); font-style: normal; }
    .hero-subtitle { margin: 0 0 14px; color: #526158; font-size: 18px; font-weight: 650; }
    .hero-copy { max-width: 650px; margin: 0; color: #626d65; font-size: 14px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 23px; }
    .button-custom {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px;
      padding: 0 18px; border: 1px solid var(--green); border-radius: 6px;
      color: #fff; background: var(--green); font-size: 13px; font-weight: 750;
    }
    .button-custom:hover { color: #fff; background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(36,70,53,.18); }
    .button-outline { color: var(--green-dark); background: rgba(255,255,255,.7); border-color: #c9d3c8; }
    .button-outline:hover { color: var(--green-dark); background: #fff; }
    .hero-panel { padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
    .panel-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
    .panel-top strong { font-size: 14px; }
    .live-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-size: 11px; font-weight: 800; }
    .live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #69a96c; box-shadow: 0 0 0 4px #e8f2e4; }
    .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
    .quick-link {
      min-height: 75px; padding: 12px; border: 1px solid var(--line); border-radius: 6px;
      background: #fbfcf9;
    }
    .quick-link:hover { border-color: #b6c9b2; background: #f3f7ef; transform: translateY(-2px); }
    .quick-link small { display: block; color: var(--muted); font-size: 10px; }
    .quick-link strong { display: block; margin-top: 4px; color: var(--green-dark); font-size: 13px; }
    .section { padding: 54px 0; border-top: 1px solid rgba(41,58,46,.08); }
    .section-white { background: var(--surface); }
    .section-soft { background: var(--surface-soft); }
    .section-dark { color: #f3f5f0; background: #202b24; }
    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 23px; }
    .section-kicker { margin: 0 0 6px; color: var(--coral); font-size: 11px; font-weight: 850; }
    .section h2 { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 800; }
    .section-intro { max-width: 720px; margin: 9px 0 0; color: var(--muted); font-size: 13px; }
    .section-dark .section-intro { color: #b9c3ba; }
    .section-link { flex: 0 0 auto; color: var(--green); font-size: 13px; font-weight: 750; }
    .section-link:hover { color: var(--coral); }
    .section-dark .section-link { color: var(--lime); }
    .topic-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(230px,.55fr); gap: 36px; align-items: start; }
    .topic-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
    .topic-item { display: grid; grid-template-columns: 44px 1fr; gap: 13px; padding: 17px 0; border-top: 1px solid var(--line); }
    .topic-number { color: var(--coral); font-size: 12px; font-weight: 850; }
    .topic-item h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
    .topic-item p { margin: 0; color: var(--muted); font-size: 12px; }
    .topic-aside { padding: 21px; border-left: 3px solid var(--lime); background: #f4f7ef; }
    .topic-aside h3 { margin: 0 0 8px; font-size: 15px; }
    .topic-aside p { margin: 0; color: #667168; font-size: 12px; }
    .feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
    .feature-item {
      min-height: 172px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius);
      background: #fff; transition: transform .2s ease, box-shadow .2s ease;
    }
    .feature-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .feature-index { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--green-dark); background: #e6efdd; border-radius: 6px; font-size: 11px; font-weight: 850; }
    .feature-item h3 { margin: 15px 0 6px; font-size: 15px; }
    .feature-item p { margin: 0; color: var(--muted); font-size: 12px; }
    .editorial-band { display: grid; grid-template-columns: .85fr 1.15fr; gap: 42px; align-items: center; }
    .editorial-mark { padding: 28px; background: var(--green); color: #fff; border-radius: var(--radius); }
    .editorial-mark span { display: block; color: var(--lime); font-size: 11px; font-weight: 800; }
    .editorial-mark strong { display: block; max-width: 330px; margin-top: 12px; font-size: 26px; line-height: 1.35; }
    .editorial-copy h2 { margin: 0 0 10px; font-size: 25px; line-height: 1.35; }
    .editorial-copy p { margin: 0; color: var(--muted); font-size: 13px; }
    .editorial-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
    .editorial-points span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 5px; color: #526158; background: #fff; font-size: 11px; font-weight: 700; }
    .story-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
    .story-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: start; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.16); }
    .story-num { color: var(--lime); font-size: 12px; font-weight: 850; }
    .story-row h3 { margin: 0 0 3px; font-size: 14px; }
    .story-row p { margin: 0; color: #b9c3ba; font-size: 11px; }
    .story-tag { padding: 3px 7px; border: 1px solid rgba(201,230,138,.36); border-radius: 4px; color: var(--lime); font-size: 10px; white-space: nowrap; }
    .policy-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
    .policy-item { padding: 18px; border-top: 2px solid var(--green); background: #fff; }
    .policy-item h3 { margin: 0 0 6px; font-size: 14px; }
    .policy-item p { margin: 0; color: var(--muted); font-size: 11px; }
    .news-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
    .news-item { display: grid; grid-template-columns: 48px 1fr; gap: 13px; padding: 16px 0; border-top: 1px solid var(--line); }
    .news-date { display: grid; place-items: center; width: 46px; height: 46px; color: var(--green-dark); background: #e9efe4; border-radius: 6px; font-size: 10px; font-weight: 800; text-align: center; line-height: 1.25; }
    .news-item h3 { margin: 0 0 4px; font-size: 13px; }
    .news-item p { margin: 0; color: var(--muted); font-size: 11px; }
    .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
    .faq-item { padding: 17px 0; border-top: 1px solid var(--line); }
    .faq-item h3 { display: flex; gap: 10px; margin: 0 0 6px; font-size: 14px; }
    .faq-item h3 span { color: var(--coral); }
    .faq-item p { margin: 0; color: var(--muted); font-size: 12px; }
    .closing-band { padding: 30px; display: flex; justify-content: space-between; align-items: center; gap: 25px; color: #fff; background: var(--green-dark); border-radius: var(--radius); }
    .closing-band h2 { margin: 0 0 5px; font-size: 21px; }
    .closing-band p { margin: 0; color: #d2ded4; font-size: 12px; }
    .closing-band .button-custom { flex: 0 0 auto; color: var(--green-dark); background: var(--lime); border-color: var(--lime); }
    .closing-band .button-custom:hover { color: var(--green-dark); background: #d8efa6; }
    .site-footer { padding: 47px 0 20px; color: #dce4dc; background: #202b24; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; }
    .footer-brand { color: #fff; }
    .footer-brand .brand-mark { color: var(--green-dark); }
    .footer-about { max-width: 290px; margin: 15px 0 0; color: #aeb9b0; font-size: 12px; }
    .footer-col h3 { margin: 2px 0 12px; color: #fff; font-size: 13px; }
    .footer-col ul { margin: 0; padding: 0; list-style: none; }
    .footer-col li { margin: 7px 0; color: #aeb9b0; font-size: 11px; }
    .footer-col a:hover { color: var(--lime); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 15px; margin-top: 34px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.13); color: #9eaaa1; font-size: 10px; }
    .adult-note { color: #c5d0c6; }
    @media (max-width: 1024px) {
      .nav-shell { gap: 15px; }
      .nav-links { gap: 2px; }
      .nav-links a { padding-inline: 9px; font-size: 12px; }
      .hero-layout { gap: 30px; }
      .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
      .footer-col:last-child { grid-column: 2 / 4; }
    }
    @media (max-width: 768px) {
      .container { width: min(var(--container), calc(100% - 36px)); }
      .nav-shell { min-height: auto; padding: 13px 0 10px; align-items: flex-start; flex-direction: column; gap: 10px; }
      .nav-shell nav { width: 100%; overflow-x: auto; }
      .nav-links { width: max-content; }
      .nav-links a { min-height: 36px; }
      .category-hero { padding: 38px 0 35px; }
      .hero-layout { grid-template-columns: 1fr; gap: 25px; }
      .hero-panel { max-width: 580px; }
      .section { padding: 43px 0; }
      .topic-layout { grid-template-columns: 1fr; gap: 22px; }
      .topic-aside { border-left-width: 3px; }
      .feature-grid { grid-template-columns: 1fr 1fr; }
      .editorial-band { grid-template-columns: 1fr; gap: 24px; }
      .policy-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-col:last-child { grid-column: auto; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 30px); }
      .brand { font-size: 15px; }
      .nav-links a { padding-inline: 9px; font-size: 11px; }
      h1 { font-size: 35px; }
      .hero-subtitle { font-size: 16px; }
      .hero-actions { align-items: stretch; }
      .hero-actions .button-custom { flex: 1 1 auto; }
      .hero-panel { padding: 17px; }
      .quick-grid { gap: 7px; }
      .quick-link { min-height: 70px; padding: 10px; }
      .section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
      .section h2 { font-size: 23px; }
      .topic-list, .feature-grid, .story-list, .news-list, .faq-grid { grid-template-columns: 1fr; }
      .feature-item { min-height: 0; }
      .policy-grid { grid-template-columns: 1fr; }
      .story-row { grid-template-columns: 30px 1fr auto; }
      .closing-band { align-items: flex-start; flex-direction: column; padding: 23px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 18px; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; }
    }
