/* roulang page: index */
:root {
      color-scheme: light;
      --ink: #182b28;
      --ink-soft: #36514c;
      --muted: #70827d;
      --line: #dce6e1;
      --paper: #f5f8f6;
      --surface: #ffffff;
      --surface-tint: #edf4ef;
      --green: #1e594b;
      --green-dark: #143d35;
      --green-light: #d9eee1;
      --coral: #e77258;
      --yellow: #efc966;
      --shadow: 0 16px 44px rgba(23, 57, 48, .09);
      --shadow-small: 0 7px 22px rgba(23, 57, 48, .07);
      --radius: 18px;
      --radius-large: 28px;
      --container: 1200px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { color: inherit; }
    button:focus-visible, a:focus-visible, input:focus-visible {
      outline: 3px solid rgba(231, 114, 88, .55);
      outline-offset: 3px;
    }
    ::selection { color: var(--green-dark); background: #f3d98e; }

    .skip-link {
      position: fixed;
      z-index: 100;
      top: 10px;
      left: 10px;
      padding: 10px 16px;
      color: #fff;
      background: var(--green-dark);
      border-radius: 10px;
      transform: translateY(-150%);
    }
    .skip-link:focus { transform: translateY(0); }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }

    .site-header {
      position: sticky;
      z-index: 20;
      top: 0;
      background: rgba(250, 252, 250, .94);
      border-bottom: 1px solid rgba(220, 230, 225, .85);
      backdrop-filter: blur(14px);
    }
    .nav-shell {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
      color: var(--green-dark);
      font-size: 18px;
      font-weight: 800;
    }
    .brand-mark {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      color: #fff;
      background: linear-gradient(145deg, var(--green), #39866b);
      border-radius: 13px;
      box-shadow: 0 6px 14px rgba(30, 89, 75, .2);
      font-size: 19px;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .nav-links a {
      display: inline-flex;
      min-height: 42px;
      align-items: center;
      padding: 0 13px;
      color: var(--ink-soft);
      border-radius: 11px;
      font-size: 14px;
      font-weight: 650;
      transition: color .2s ease, background .2s ease;
    }
    .nav-links a:hover, .nav-links a[aria-current="page"] {
      color: var(--green-dark);
      background: var(--green-light);
    }
    .nav-links .nav-highlight {
      margin-left: 5px;
      color: #fff;
      background: var(--green);
    }
    .nav-links .nav-highlight:hover { color: #fff; background: var(--green-dark); }
    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      cursor: pointer;
    }
    .menu-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      margin: 4px auto;
      background: var(--green-dark);
      border-radius: 2px;
      transition: transform .2s ease;
    }

    .hero {
      position: relative;
      min-height: 590px;
      overflow: hidden;
      display: flex;
      align-items: center;
      color: #fff;
      background-color: var(--green-dark);
      background-image:
        linear-gradient(90deg, rgba(13, 38, 33, .92) 0%, rgba(13, 38, 33, .75) 46%, rgba(13, 38, 33, .2) 100%),
        url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=2000&q=88");
      background-position: center, center 46%;
      background-size: cover;
    }
    .hero::after {
      position: absolute;
      right: -140px;
      bottom: -270px;
      width: 620px;
      height: 620px;
      content: "";
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 50%;
      box-shadow: 0 0 0 54px rgba(255,255,255,.035), 0 0 0 108px rgba(255,255,255,.025);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(var(--container), calc(100% - 48px));
      margin-inline: auto;
      padding: 80px 0 58px;
    }
    .hero-copy { max-width: 760px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 18px;
      color: #f0d989;
      font-size: 13px;
      font-weight: 750;
    }
    .eyebrow::before {
      width: 24px;
      height: 2px;
      content: "";
      background: var(--coral);
      border-radius: 2px;
    }
    .hero h1 {
      max-width: 760px;
      margin: 0;
      font-size: 54px;
      font-weight: 850;
      line-height: 1.18;
    }
    .hero h1 span { color: #f0cf71; }
    .hero-lead {
      margin: 18px 0 0;
      color: rgba(255,255,255,.84);
      font-size: 20px;
      font-weight: 550;
    }
    .hero-description {
      max-width: 680px;
      margin: 16px 0 0;
      color: rgba(255,255,255,.77);
      font-size: 15px;
      line-height: 1.9;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
    .button {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 19px;
      border: 1px solid transparent;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 750;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary {
      color: var(--green-dark);
      background: #f0d47a;
      box-shadow: 0 9px 22px rgba(12, 32, 28, .18);
    }
    .button-primary:hover { background: #f6df96; box-shadow: 0 12px 26px rgba(12, 32, 28, .24); }
    .button-ghost {
      color: #fff;
      border-color: rgba(255,255,255,.36);
      background: rgba(255,255,255,.08);
    }
    .button-ghost:hover { background: rgba(255,255,255,.17); }
    .hero-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      margin-top: 42px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.22);
    }
    .hero-spec {
      min-width: 190px;
      padding: 0 24px;
      border-right: 1px solid rgba(255,255,255,.2);
    }
    .hero-spec:first-child { padding-left: 0; }
    .hero-spec:last-child { border: 0; }
    .hero-spec strong { display: block; color: #fff; font-size: 15px; }
    .hero-spec span { display: block; margin-top: 2px; color: rgba(255,255,255,.62); font-size: 12px; }

    main { overflow: clip; }
    .section { padding: 78px 0; }
    .section-compact { padding: 58px 0; }
    .section-tint { background: var(--surface-tint); }
    .section-dark { color: #fff; background: var(--green-dark); }
    .section-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 30px;
    }
    .section-heading-copy { max-width: 740px; }
    .section-kicker {
      margin: 0 0 7px;
      color: var(--coral);
      font-size: 12px;
      font-weight: 800;
    }
    .section-heading h2 {
      margin: 0;
      color: var(--ink);
      font-size: 31px;
      font-weight: 820;
      line-height: 1.3;
    }
    .section-dark .section-heading h2 { color: #fff; }
    .section-heading p {
      max-width: 760px;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.85;
    }
    .section-dark .section-heading p { color: rgba(255,255,255,.67); }
    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex: 0 0 auto;
      color: var(--green);
      font-size: 14px;
      font-weight: 750;
    }
    .text-link:hover { color: var(--coral); }

    .search-band { padding: 28px 0; background: #fff; border-bottom: 1px solid var(--line); }
    .search-row { display: flex; align-items: center; gap: 18px; }
    .search-label { flex: 0 0 auto; color: var(--green-dark); font-size: 14px; font-weight: 800; }
    .search-form {
      display: flex;
      width: min(650px, 100%);
      min-height: 50px;
      margin-left: auto;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #f9fbf9;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .search-form:focus-within { border-color: #7bad94; box-shadow: 0 0 0 4px rgba(80, 145, 111, .12); }
    .search-form input {
      width: 100%;
      min-width: 0;
      padding: 0 16px;
      color: var(--ink);
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 14px;
    }
    .search-form input::placeholder { color: #98a8a2; }
    .search-form button {
      flex: 0 0 auto;
      padding: 0 20px;
      color: #fff;
      border: 0;
      background: var(--green);
      font-weight: 750;
      cursor: pointer;
      transition: background .2s ease;
    }
    .search-form button:hover { background: var(--green-dark); }
    .search-status { min-width: 118px; color: var(--muted); font-size: 12px; text-align: right; }

    .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .category-card {
      position: relative;
      min-height: 160px;
      overflow: hidden;
      padding: 23px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .category-card:hover { transform: translateY(-3px); border-color: #b7d2c2; box-shadow: var(--shadow-small); }
    .category-card::after {
      position: absolute;
      right: -18px;
      bottom: -34px;
      width: 112px;
      height: 112px;
      content: "";
      border: 1px solid rgba(30, 89, 75, .12);
      border-radius: 50%;
      box-shadow: 0 0 0 16px rgba(30, 89, 75, .035);
    }
    .category-number { color: var(--coral); font-size: 12px; font-weight: 800; }
    .category-card h3 { position: relative; z-index: 1; margin: 8px 0 6px; color: var(--green-dark); font-size: 18px; }
    .category-card p { position: relative; z-index: 1; max-width: 310px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .feature-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 5px 18px rgba(23, 57, 48, .035);
      transition: transform .22s ease, box-shadow .22s ease;
    }
    .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .feature-image { position: relative; height: 225px; overflow: hidden; background: #d9e3dd; }
    .feature-image img, .media-image img, .news-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s ease;
    }
    .feature-card:hover .feature-image img, .media-card:hover .media-image img, .news-card:hover .news-image img { transform: scale(1.04); }
    .image-label {
      position: absolute;
      top: 13px;
      left: 13px;
      padding: 5px 10px;
      color: #fff;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 20px;
      background: rgba(18, 53, 45, .82);
      font-size: 11px;
      font-weight: 750;
      backdrop-filter: blur(8px);
    }
    .feature-content { padding: 19px 20px 20px; }
    .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
    .rating { color: #a17417; font-weight: 800; }
    .feature-content h3 { margin: 9px 0 6px; font-size: 18px; font-weight: 800; line-height: 1.45; }
    .feature-content p { min-height: 48px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
    .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #edf1ee; }
    .tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 2px 8px;
      color: var(--green);
      border: 1px solid #d8e8dd;
      border-radius: 7px;
      background: #f2f8f3;
      font-size: 11px;
      font-weight: 700;
    }
    .save-button {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 33px;
      padding: 0 9px;
      color: var(--green);
      border: 1px solid #dce8e0;
      border-radius: 9px;
      background: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: color .2s ease, background .2s ease, border-color .2s ease;
    }
    .save-button:hover, .save-button.is-saved { color: #fff; border-color: var(--green); background: var(--green); }

    .release-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: -3px 0 23px; }
    .filter-button {
      min-height: 36px;
      padding: 0 13px;
      color: var(--ink-soft);
      border: 1px solid var(--line);
      border-radius: 9px;
      background: #fff;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: color .18s ease, border-color .18s ease, background .18s ease;
    }
    .filter-button:hover, .filter-button.is-active { color: #fff; border-color: var(--green); background: var(--green); }
    .media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
    .media-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .media-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-small); }
    .media-image { position: relative; height: 165px; overflow: hidden; background: #d9e3dd; }
    .media-status {
      position: absolute;
      right: 10px;
      bottom: 10px;
      padding: 5px 8px;
      color: #fff;
      border-radius: 6px;
      background: rgba(18, 53, 45, .86);
      font-size: 10px;
      font-weight: 800;
    }
    .media-content { padding: 13px 14px 14px; }
    .media-content h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
    .media-content p { min-height: 42px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .media-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
    .media-meta .tag { min-height: 23px; font-size: 10px; }
    .media-meta .rating { font-size: 12px; }
    .empty-state {
      display: none;
      grid-column: 1 / -1;
      padding: 28px;
      color: var(--muted);
      border: 1px dashed #b8c9bf;
      border-radius: 14px;
      background: #fff;
      text-align: center;
    }

    .ranking-layout { display: grid; grid-template-columns: 1fr 290px; gap: 30px; align-items: start; }
    .ranking-list { margin: 0; padding: 0; list-style: none; }
    .ranking-item {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) 94px 58px 80px;
      align-items: center;
      gap: 14px;
      min-height: 67px;
      padding: 10px 13px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      transition: background .18s ease;
    }
    .ranking-item:hover { background: rgba(255,255,255,.055); }
    .rank-number {
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      color: rgba(255,255,255,.7);
      border-radius: 9px;
      background: rgba(255,255,255,.09);
      font-size: 13px;
      font-weight: 850;
    }
    .ranking-item:nth-child(-n+3) .rank-number { color: var(--green-dark); background: var(--yellow); }
    .rank-title { color: #fff; font-size: 14px; font-weight: 750; }
    .rank-note { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 400; }
    .rank-heat, .rank-score { color: rgba(255,255,255,.78); font-size: 12px; text-align: right; }
    .rank-score { color: #f0d47a; font-weight: 800; }
    .rank-category { justify-self: end; padding: 4px 8px; color: rgba(255,255,255,.77); border: 1px solid rgba(255,255,255,.18); border-radius: 7px; font-size: 10px; }
    .ranking-aside {
      padding: 22px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--radius);
      background: rgba(255,255,255,.07);
    }
    .ranking-aside .aside-mark { display: grid; width: 42px; height: 42px; place-items: center; color: var(--green-dark); border-radius: 13px; background: var(--yellow); font-size: 18px; font-weight: 900; }
    .ranking-aside h3 { margin: 15px 0 7px; color: #fff; font-size: 18px; }
    .ranking-aside p { margin: 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.8; }
    .ranking-aside .aside-line { height: 1px; margin: 17px 0; background: rgba(255,255,255,.16); }
    .ranking-aside strong { color: #f0d47a; font-size: 13px; }

    .resource-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 38px; align-items: center; }
    .resource-visual {
      position: relative;
      min-height: 360px;
      overflow: hidden;
      border-radius: var(--radius-large);
      background: #dbe8df url("https://images.unsplash.com/photo-1440404653325-ab127d49abc1?auto=format&fit=crop&w=1000&q=85") center/cover;
      box-shadow: var(--shadow);
    }
    .resource-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(16,51,42,.06), rgba(16,51,42,.66)); }
    .resource-visual-label {
      position: absolute;
      z-index: 1;
      right: 18px;
      bottom: 18px;
      left: 18px;
      padding: 16px 18px;
      color: #fff;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 14px;
      background: rgba(15, 53, 43, .68);
      backdrop-filter: blur(9px);
    }
    .resource-visual-label strong { display: block; font-size: 17px; }
    .resource-visual-label span { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: 12px; }
    .resource-copy h2 { margin: 0; font-size: 29px; line-height: 1.35; }
    .resource-copy > p { margin: 12px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.9; }
    .format-list { display: grid; gap: 10px; }
    .format-item {
      display: grid;
      grid-template-columns: 42px 1fr auto;
      align-items: center;
      gap: 13px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: #fff;
    }
    .format-icon {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      color: var(--green);
      border-radius: 11px;
      background: var(--green-light);
      font-size: 12px;
      font-weight: 850;
    }
    .format-item strong { display: block; font-size: 13px; }
    .format-item span { display: block; color: var(--muted); font-size: 11px; }
    .format-type { color: var(--coral); font-size: 11px; font-weight: 800; }

    .timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin-top: 30px;
      border-top: 1px solid var(--line);
    }
    .timeline-item { position: relative; padding: 24px 20px 0 0; }
    .timeline-item::before {
      position: absolute;
      top: -6px;
      left: 0;
      width: 11px;
      height: 11px;
      content: "";
      border: 2px solid var(--paper);
      border-radius: 50%;
      background: var(--coral);
      box-shadow: 0 0 0 1px var(--coral);
    }
    .timeline-item strong { display: block; color: var(--green-dark); font-size: 14px; }
    .timeline-item p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }

    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
    .news-card {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-small); }
    .news-image { height: 168px; overflow: hidden; background: #d9e3dd; }
    .news-content { padding: 16px 17px 18px; }
    .news-content time { color: var(--coral); font-size: 11px; font-weight: 800; }
    .news-content h3 { margin: 7px 0; font-size: 15px; line-height: 1.55; }
    .news-content p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }

    .saved-panel {
      display: grid;
      grid-template-columns: minmax(220px, .72fr) 1.28fr;
      gap: 30px;
      align-items: center;
      padding: 29px 32px;
      border: 1px solid #d7e6dc;
      border-radius: var(--radius-large);
      background: linear-gradient(120deg, #e3f1e6 0%, #f8faf7 74%);
    }
    .saved-panel h2 { margin: 0; color: var(--green-dark); font-size: 25px; line-height: 1.35; }
    .saved-panel p { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .saved-items { display: flex; flex-wrap: wrap; gap: 8px; }
    .saved-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      padding: 0 11px;
      color: var(--green-dark);
      border: 1px solid #d2e2d7;
      border-radius: 9px;
      background: rgba(255,255,255,.82);
      font-size: 12px;
      font-weight: 700;
    }
    .saved-chip button {
      width: 20px;
      height: 20px;
      padding: 0;
      color: var(--muted);
      border: 0;
      border-radius: 6px;
      background: transparent;
      cursor: pointer;
    }
    .saved-chip button:hover { color: #fff; background: var(--coral); }
    .saved-empty { color: var(--muted); font-size: 13px; }

    .standards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .standard-card {
      display: flex;
      gap: 15px;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: #fff;
    }
    .standard-icon {
      display: grid;
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      place-items: center;
      color: var(--green);
      border-radius: 12px;
      background: var(--green-light);
      font-size: 16px;
      font-weight: 900;
    }
    .standard-card h3 { margin: 0 0 5px; font-size: 15px; }
    .standard-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

    .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .faq-item {
      padding: 20px 21px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }
    .faq-item h3 { display: flex; gap: 10px; margin: 0 0 8px; color: var(--green-dark); font-size: 15px; line-height: 1.5; }
    .faq-item h3 span { color: var(--coral); font-size: 14px; font-weight: 900; }
    .faq-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }

    .site-footer { padding: 52px 0 22px; color: rgba(255,255,255,.75); background: #112f29; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 38px; padding-bottom: 36px; }
    .footer-brand { color: #fff; }
    .footer-brand .brand-mark { color: var(--green-dark); background: var(--yellow); box-shadow: none; }
    .footer-intro { max-width: 340px; margin: 15px 0 0; color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.9; }
    .footer-column h2 { margin: 4px 0 13px; color: #fff; font-size: 13px; }
    .footer-column ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .footer-column a { color: rgba(255,255,255,.62); font-size: 12px; transition: color .2s ease; }
    .footer-column a:hover { color: #f0d47a; }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.13);
      color: rgba(255,255,255,.48);
      font-size: 11px;
    }
    .footer-bottom a { color: rgba(255,255,255,.62); }
    .footer-bottom a:hover { color: #f0d47a; }

    @media (max-width: 1024px) {
      .container { width: min(100% - 40px, var(--container)); }
      .hero-inner { width: min(100% - 40px, var(--container)); }
      .nav-shell { gap: 14px; }
      .nav-links { gap: 2px; }
      .nav-links a { padding-inline: 10px; font-size: 13px; }
      .media-grid { grid-template-columns: repeat(3, 1fr); }
      .ranking-layout { grid-template-columns: 1fr 250px; gap: 20px; }
      .feature-image { height: 200px; }
    }
    @media (max-width: 768px) {
      .container, .hero-inner { width: min(100% - 36px, var(--container)); }
      .nav-shell { min-height: 68px; }
      .menu-toggle { display: block; }
      .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        gap: 4px;
        padding: 12px 18px 16px;
        border-bottom: 1px solid var(--line);
        background: rgba(250, 252, 250, .98);
        box-shadow: 0 14px 24px rgba(23, 57, 48, .08);
      }
      .nav-links.is-open { display: grid; }
      .nav-links a { min-height: 44px; padding-inline: 13px; }
      .nav-links .nav-highlight { margin: 4px 0 0; }
      .hero { min-height: 550px; background-position: center, 58% center; }
      .hero h1 { max-width: 610px; font-size: 44px; }
      .hero-lead { font-size: 18px; }
      .hero-specs { gap: 14px 0; margin-top: 32px; }
      .hero-spec { min-width: 33.33%; padding-inline: 15px; }
      .hero-spec:nth-child(3) { border: 0; }
      .section { padding: 62px 0; }
      .section-compact { padding: 48px 0; }
      .section-heading { align-items: start; margin-bottom: 24px; }
      .section-heading h2 { font-size: 27px; }
      .search-row { flex-wrap: wrap; gap: 10px; }
      .search-form { order: 2; width: 100%; }
      .search-status { order: 3; min-width: 0; margin-left: auto; }
      .category-grid { grid-template-columns: repeat(2, 1fr); }
      .feature-grid { grid-template-columns: repeat(2, 1fr); }
      .feature-grid .feature-card:last-child { display: none; }
      .media-grid { grid-template-columns: repeat(2, 1fr); }
      .ranking-layout { grid-template-columns: 1fr; }
      .ranking-aside { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
      .ranking-aside .aside-mark { grid-row: span 2; }
      .ranking-aside h3 { margin: 0; }
      .ranking-aside p { margin-top: 3px; }
      .ranking-aside .aside-line, .ranking-aside strong { display: none; }
      .resource-layout { grid-template-columns: 1fr; gap: 27px; }
      .resource-visual { min-height: 320px; }
      .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 22px; border-top: 0; }
      .timeline-item { padding: 18px 16px 0 17px; border-top: 1px solid var(--line); }
      .timeline-item::before { top: -6px; left: 0; }
      .news-grid { grid-template-columns: repeat(2, 1fr); }
      .saved-panel { grid-template-columns: 1fr; gap: 20px; padding: 25px; }
      .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 28px 22px; }
      .footer-brand-column { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      .container, .hero-inner { width: min(100% - 32px, var(--container)); }
      .brand { gap: 9px; font-size: 16px; }
      .brand-mark { width: 37px; height: 37px; border-radius: 12px; }
      .hero { min-height: 610px; background-position: center, 60% center; }
      .hero-inner { padding: 66px 0 42px; }
      .hero h1 { font-size: 37px; }
      .hero-lead { max-width: 340px; font-size: 17px; }
      .hero-description { font-size: 14px; }
      .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
      .button { min-height: 46px; padding-inline: 12px; font-size: 12px; }
      .hero-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; }
      .hero-spec { min-width: 0; padding-inline: 12px; }
      .hero-spec:nth-child(odd) { padding-left: 0; }
      .hero-spec:nth-child(2) { border: 0; }
      .hero-spec strong { font-size: 13px; }
      .section { padding: 50px 0; }
      .section-compact { padding: 40px 0; }
      .section-heading { display: block; }
      .section-heading h2 { font-size: 24px; }
      .section-heading p { font-size: 13px; }
      .section-heading .text-link { margin-top: 12px; }
      .search-band { padding: 20px 0; }
      .search-form button { padding-inline: 14px; }
      .category-grid { grid-template-columns: 1fr; gap: 10px; }
      .category-card { min-height: 136px; padding: 18px; }
      .feature-grid { grid-template-columns: 1fr; }
      .feature-grid .feature-card:last-child { display: block; }
      .feature-image { height: 205px; }
      .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .media-image { height: 125px; }
      .media-content { padding: 11px; }
      .media-content h3 { font-size: 13px; }
      .media-content p { min-height: 59px; font-size: 11px; }
      .media-meta { align-items: start; flex-direction: column; }
      .ranking-item { grid-template-columns: 34px minmax(0, 1fr) 54px 44px; gap: 8px; padding-inline: 2px; }
      .rank-category { display: none; }
      .rank-heat, .rank-score { font-size: 11px; }
      .rank-title { font-size: 13px; }
      .rank-number { width: 27px; height: 27px; }
      .resource-visual { min-height: 260px; border-radius: 20px; }
      .resource-copy h2 { font-size: 24px; }
      .timeline { grid-template-columns: 1fr; row-gap: 16px; }
      .timeline-item { min-height: 78px; }
      .news-grid { grid-template-columns: 1fr; }
      .news-image { height: 190px; }
      .saved-panel { padding: 21px; border-radius: 20px; }
      .saved-panel h2 { font-size: 22px; }
      .standards-grid, .faq-list { grid-template-columns: 1fr; }
      .standard-card { padding: 16px; }
      .faq-item { padding: 17px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
      .footer-brand-column { grid-column: 1 / -1; }
      .footer-bottom { align-items: start; flex-direction: column; gap: 6px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }