/* roulang page: index */
:root {
      --ink: #17212b;
      --muted: #6f7b86;
      --paper: #f6f8fa;
      --white: #fff;
      --line: #e4e9ee;
      --teal: #0d8f86;
      --teal-dark: #086d68;
      --coral: #ed765b;
      --navy: #162b3b;
      --radius: 18px;
      --shadow: 0 14px 40px rgba(23,33,43,.08);
      --shadow-hover: 0 20px 48px rgba(23,33,43,.14);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
      line-height: 1.75;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input { font: inherit; }
    .container { max-width: 1180px; }
    .shell-nav {
      position: fixed;
      z-index: 30;
      top: 0;
      bottom: 0;
      left: 0;
      width: 236px;
      padding: 28px 18px;
      background: var(--navy);
      color: #dbe7eb;
      box-shadow: 8px 0 30px rgba(8,31,43,.12);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px 34px;
      color: #fff;
      font-weight: 800;
      font-size: 20px;
      letter-spacing: 0;
    }
    .brand-mark {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: #fff;
      background: var(--coral);
      box-shadow: 0 8px 18px rgba(237,118,91,.25);
    }
    .nav-label {
      padding: 0 12px 10px;
      color: #89a0aa;
      font-size: 11px;
      letter-spacing: 1.5px;
    }
    .side-link {
      display: flex;
      align-items: center;
      gap: 13px;
      margin: 4px 0;
      padding: 12px;
      border-radius: 12px;
      color: #b9cbd1;
      transition: .2s ease;
    }
    .side-link:hover, .side-link.active {
      color: #fff;
      background: rgba(255,255,255,.1);
    }
    .side-link.active { box-shadow: inset 3px 0 var(--coral); }
    .nav-foot {
      position: absolute;
      right: 18px;
      bottom: 24px;
      left: 18px;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 14px;
      color: #a9bdc5;
      font-size: 12px;
    }
    .page { margin-left: 236px; }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 74px;
      padding: 0 5vw;
      background: rgba(246,248,250,.9);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(14px);
    }
    .crumb { color: var(--muted); font-size: 13px; }
    .search {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 220px;
      padding: 8px 13px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--white);
      color: var(--muted);
      font-size: 13px;
    }
    .search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }
    .hero {
      padding: 76px 5vw 66px;
      background: var(--white);
      border-bottom: 1px solid var(--line);
    }
    .hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; }
    .eyebrow, .section-kicker {
      color: var(--teal);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.6px;
      text-transform: uppercase;
    }
    h1, h2, h3 { margin-top: 0; line-height: 1.25; font-weight: 800; }
    h1 { max-width: 760px; margin: 16px 0 20px; font-size: clamp(2.2rem, 4vw, 4.2rem); }
    .hero-copy { max-width: 680px; color: var(--muted); font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .btn-main, .btn-soft {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 12px 18px;
      border-radius: 10px;
      font-weight: 700;
      transition: .2s ease;
    }
    .btn-main { color: #fff; background: var(--teal); }
    .btn-main:hover { color: #fff; background: var(--teal-dark); transform: translateY(-2px); }
    .btn-soft { color: var(--ink); background: #edf3f2; }
    .btn-soft:hover { color: var(--teal-dark); background: #dceae8; }
    .hero-panel {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f7faf9;
      box-shadow: var(--shadow);
    }
    .matrix { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
    .matrix-item {
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--teal-dark);
      background: #e1f0ed;
      font-size: 22px;
    }
    .matrix-item:nth-child(2n) { color: #b65342; background: #fde9e3; }
    .status-line { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
    .status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #39af78; }
    main { overflow: hidden; }
    section { padding: 78px 5vw; }
    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 30px; }
    .section-head h2 { margin: 10px 0 0; font-size: clamp(1.65rem, 2.6vw, 2.5rem); }
    .section-intro { max-width: 590px; margin: 0; color: var(--muted); }
    .split-section { background: #f1f5f6; }
    .story-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; }
    .feature-story {
      min-height: 360px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: end;
      border-radius: var(--radius);
      color: #fff;
      background: linear-gradient(160deg, rgba(15,42,54,.1), rgba(15,42,54,.86)), url("https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1200&q=80") center/cover;
      box-shadow: var(--shadow);
    }
    .feature-story h3 { max-width: 560px; margin: 12px 0; font-size: 30px; }
    .feature-story p { max-width: 560px; margin: 0; color: #dce8eb; }
    .rank-list { padding: 25px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
    .rank-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
    .rank-item:last-child { border-bottom: 0; }
    .rank-no { color: var(--coral); font-size: 21px; font-weight: 800; }
    .rank-item strong { display: block; font-size: 15px; }
    .rank-item small { color: var(--muted); }
    .rank-score { color: var(--teal); font-weight: 800; }
    .topic-strip { padding-top: 0; background: #f1f5f6; }
    .topic-row { display: flex; flex-wrap: wrap; gap: 12px; }
    .topic-chip { padding: 10px 17px; border: 1px solid #cfe0de; border-radius: 999px; color: var(--teal-dark); background: #e5f1ef; transition: .2s; }
    .topic-chip:hover { color: #fff; background: var(--teal); border-color: var(--teal); }
    .updates { background: var(--white); }
    .update-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
    .update-card { padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: .2s; }
    .update-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .card-meta { display: flex; justify-content: space-between; margin-bottom: 18px; color: var(--muted); font-size: 12px; }
    .tag { padding: 4px 8px; border-radius: 6px; color: var(--teal-dark); background: #e2f1ee; }
    .update-card h3 { margin-bottom: 10px; font-size: 19px; }
    .update-card p { margin: 0; color: var(--muted); font-size: 14px; }
    .metrics { background: var(--navy); color: #fff; }
    .metrics .section-kicker { color: #72d3c6; }
    .metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 30px; background: rgba(255,255,255,.15); }
    .metric { padding: 26px; background: var(--navy); }
    .metric strong { display: block; color: #fff; font-size: 32px; }
    .metric span { color: #a9bdc5; font-size: 13px; }
    .path { background: #fff; }
    .path-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 34px; }
    .path-step { position: relative; padding: 22px 24px 22px 0; }
    .path-step:not(:last-child)::after { content: "→"; position: absolute; top: 25px; right: 15px; color: var(--coral); font-size: 22px; }
    .step-no { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 10px; color: #fff; background: var(--coral); font-weight: 800; }
    .path-step h3 { margin-bottom: 8px; font-size: 17px; }
    .path-step p { margin: 0; color: var(--muted); font-size: 14px; }
    .vertical-section { background: #f1f5f6; }
    .vertical-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
    .vertical-card { overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 5px 20px rgba(23,33,43,.06); }
    .vertical-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
    .vertical-body { padding: 17px; }
    .vertical-body h3 { margin-bottom: 7px; font-size: 16px; }
    .vertical-body p { margin: 0; color: var(--muted); font-size: 13px; }
    .partners { background: #fff; }
    .partner-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-top: 30px; }
    .partner { padding: 20px 12px; text-align: center; border: 1px solid var(--line); border-radius: 10px; color: #65747c; font-weight: 700; }
    .timeline { background: #f1f5f6; }
    .timeline-list { max-width: 820px; margin-top: 28px; border-left: 2px solid #c8dedb; }
    .timeline-item { position: relative; padding: 0 0 28px 28px; }
    .timeline-item::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border: 3px solid #f1f5f6; border-radius: 50%; background: var(--teal); }
    .timeline-item strong { color: var(--teal-dark); font-size: 14px; }
    .timeline-item h3 { margin: 6px 0; font-size: 18px; }
    .timeline-item p { margin: 0; color: var(--muted); font-size: 14px; }
    .subscribe { padding-top: 62px; padding-bottom: 62px; background: var(--coral); color: #fff; }
    .subscribe-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .subscribe h2 { margin-bottom: 9px; font-size: 28px; }
    .subscribe p { max-width: 650px; margin: 0; color: #ffe9e3; }
    .subscribe .btn-soft { color: #a94b3d; background: #fff; }
    footer { padding: 42px 5vw 28px; color: #aebfc6; background: #102330; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
    footer .brand { padding: 0 0 14px; }
    footer p { max-width: 340px; margin: 0; font-size: 13px; }
    .footer-title { margin-bottom: 14px; color: #fff; font-weight: 700; }
    .footer-link { display: block; margin: 7px 0; color: #aebfc6; font-size: 13px; }
    .footer-link:hover { color: #fff; }
    .copyright { padding-top: 22px; font-size: 12px; }
    :focus-visible { outline: 3px solid rgba(237,118,91,.5); outline-offset: 3px; }
    @media (max-width: 1024px) {
      .shell-nav { width: 200px; }
      .page { margin-left: 200px; }
      .hero-grid, .story-grid { grid-template-columns: 1fr; }
      .vertical-grid { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width: 768px) {
      .shell-nav { position: static; width: 100%; padding: 13px 18px; }
      .brand { padding: 0; }
      .side-nav { display: flex; gap: 5px; margin-top: 12px; overflow-x: auto; }
      .nav-label, .nav-foot { display: none; }
      .side-link { flex: 0 0 auto; margin: 0; padding: 9px 12px; }
      .page { margin-left: 0; }
      .topbar { min-height: 62px; padding: 0 5vw; }
      .hero { padding-top: 55px; }
      .metric-grid, .path-list { grid-template-columns: repeat(2,1fr); }
      .update-grid { grid-template-columns: 1fr; }
      .partner-row { grid-template-columns: repeat(3,1fr); }
      .subscribe-inner { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 520px) {
      .topbar { gap: 12px; }
      .search { width: 145px; }
      section, .hero { padding-right: 20px; padding-left: 20px; }
      h1 { font-size: 2.25rem; }
      .hero-copy { font-size: 15px; }
      .feature-story { min-height: 320px; padding: 23px; }
      .feature-story h3 { font-size: 24px; }
      .vertical-grid, .metric-grid, .path-list, .partner-row { grid-template-columns: 1fr; }
      .path-step { padding-right: 0; }
      .path-step:not(:last-child)::after { display: none; }
      .footer-grid { grid-template-columns: 1fr; gap: 25px; }
    }

/* roulang page: category1 */
:root {
      --ink: #17212b;
      --muted: #6f7b86;
      --paper: #f6f8fa;
      --white: #fff;
      --line: #e4e9ee;
      --teal: #0d8f86;
      --teal-dark: #086d68;
      --coral: #ed765b;
      --navy: #162b3b;
      --radius: 18px;
      --shadow: 0 14px 40px rgba(23,33,43,.08);
      --shadow-hover: 0 20px 48px rgba(23,33,43,.14);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
      line-height: 1.75;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible { outline: 3px solid rgba(13,143,134,.42); outline-offset: 3px; }
    img { max-width: 100%; display: block; }
    button, input { font: inherit; }
    .container { max-width: 1180px; }
    .shell-nav {
      position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: 236px;
      padding: 28px 18px; background: var(--navy); color: #dbe7eb;
      box-shadow: 8px 0 30px rgba(8,31,43,.12);
    }
    .brand {
      display: flex; align-items: center; gap: 10px; padding: 0 12px 34px;
      color: #fff; font-weight: 800; font-size: 20px;
    }
    .brand:hover { color: #fff; }
    .brand-mark {
      width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
      border-radius: 11px; color: #fff; background: var(--coral);
      box-shadow: 0 8px 18px rgba(237,118,91,.25);
    }
    .nav-label { padding: 0 12px 10px; color: #89a0aa; font-size: 11px; letter-spacing: 1.5px; }
    .side-nav { display: grid; gap: 7px; }
    .side-link {
      display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 13px;
      border-radius: 10px; color: #b9cbd1; font-size: 14px; font-weight: 650;
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }
    .side-link i { width: 18px; text-align: center; }
    .side-link:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }
    .side-link.active { color: #fff; background: rgba(13,143,134,.28); box-shadow: inset 3px 0 var(--coral); }
    .nav-foot {
      position: absolute; right: 18px; bottom: 24px; left: 18px; padding: 16px;
      border: 1px solid rgba(255,255,255,.1); border-radius: 14px; color: #a9bdc5; font-size: 12px;
    }
    .page-shell { min-height: 100vh; margin-left: 236px; }
    .topbar {
      display: flex; align-items: center; justify-content: space-between; min-height: 74px;
      padding: 0 5vw; background: rgba(246,248,250,.92); border-bottom: 1px solid var(--line);
      backdrop-filter: blur(14px);
    }
    .crumb { color: var(--muted); font-size: 13px; }
    .crumb a { color: var(--teal-dark); font-weight: 700; }
    .top-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
    .top-note i { color: var(--teal); }
    main { overflow: hidden; }
    .hero {
      position: relative; overflow: hidden; padding: 64px 5vw 54px;
      background: var(--white); border-bottom: 1px solid var(--line);
    }
    .hero::after {
      content: ""; position: absolute; right: -110px; top: -150px; width: 380px; height: 380px;
      border: 1px solid #e5efed; border-radius: 50%; box-shadow: 0 0 0 38px #f7faf9, 0 0 0 39px #e5efed;
      pointer-events: none;
    }
    .hero-inner { position: relative; z-index: 1; }
    .eyebrow, .section-kicker {
      color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: 1.6px;
    }
    h1 { max-width: 780px; margin: 12px 0 16px; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.2; font-weight: 850; }
    .hero-copy { max-width: 760px; margin: 0; color: var(--muted); font-size: 17px; }
    .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    .hero-tag, .tag {
      display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 7px;
      color: var(--teal-dark); background: #e2f1ee; font-size: 12px; font-weight: 700;
    }
    section { padding: 62px 5vw; }
    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
    .section-head h2 { margin: 8px 0 0; font-size: 29px; line-height: 1.35; font-weight: 800; }
    .section-intro { max-width: 570px; margin: 0; color: var(--muted); }
    .summary-band { background: #f1f5f6; }
    .summary-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
    .summary-copy h2 { margin: 10px 0 14px; font-size: 30px; line-height: 1.4; }
    .summary-copy p { margin: 0; color: var(--muted); }
    .summary-visual {
      min-height: 245px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px;
      padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
      box-shadow: var(--shadow);
    }
    .visual-main {
      display: flex; flex-direction: column; justify-content: end; padding: 24px; border-radius: 13px;
      color: #fff; background: linear-gradient(160deg, rgba(15,42,54,.12), rgba(15,42,54,.82)),
      url("https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&w=1000&q=80") center/cover;
    }
    .visual-main strong { font-size: 21px; }
    .visual-main span { color: #e2eeee; font-size: 13px; }
    .visual-side { display: grid; gap: 12px; }
    .visual-tile { display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border-radius: 12px; background: #e5f1ef; color: var(--teal-dark); }
    .visual-tile:nth-child(2) { color: #a84f3e; background: #fde9e3; }
    .visual-tile i { font-size: 20px; }
    .visual-tile strong { font-size: 14px; }
    .topic-section { background: var(--white); }
    .topic-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items: stretch; }
    .topic-feature {
      position: relative; min-height: 275px; overflow: hidden; display: flex; flex-direction: column;
      justify-content: end; padding: 30px; border-radius: var(--radius); color: #fff;
      background: linear-gradient(160deg, rgba(16,43,53,.05), rgba(16,43,53,.88)),
      url("https://images.unsplash.com/photo-1455390582262-044c迷?auto=format&fit=crop&w=1200&q=80") center/cover;
      box-shadow: var(--shadow);
    }
    .topic-feature h3 { margin: 9px 0; font-size: 25px; }
    .topic-feature p { max-width: 520px; margin: 0; color: #e2eeee; }
    .topic-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .topic-item {
      display: flex; flex-direction: column; justify-content: space-between; min-height: 130px;
      padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: #fff;
      transition: .2s ease;
    }
    .topic-item:hover { border-color: #b9d9d4; box-shadow: var(--shadow); transform: translateY(-3px); }
    .topic-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--teal-dark); background: #e2f1ee; }
    .topic-item:nth-child(2) .topic-icon, .topic-item:nth-child(3) .topic-icon { color: #b65342; background: #fde9e3; }
    .topic-item strong { margin-top: 14px; font-size: 15px; }
    .topic-item small { color: var(--muted); }
    .method-section { background: #f1f5f6; }
    .method-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid #dce4e8; }
    .method-step { position: relative; padding: 25px 22px 5px 0; }
    .method-step:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: 18px; width: 30px; height: 1px; background: #bccbcf; }
    .step-num { color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
    .method-step h3 { margin: 10px 0 7px; font-size: 17px; }
    .method-step p { margin: 0; color: var(--muted); font-size: 14px; }
    .catalog-section { background: var(--white); }
    .catalog-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 34px; align-items: start; }
    .catalog-aside { padding: 26px; border-radius: var(--radius); background: var(--navy); color: #fff; }
    .catalog-aside .section-kicker { color: #8ad2c9; }
    .catalog-aside h2 { margin: 12px 0; font-size: 25px; }
    .catalog-aside p { margin: 0; color: #c0d0d5; }
    .catalog-points { display: grid; gap: 13px; margin: 22px 0 0; padding: 0; list-style: none; }
    .catalog-points li { display: flex; gap: 10px; color: #dbe7eb; font-size: 14px; }
    .catalog-points i { margin-top: 5px; color: #77c8bd; }
    .catalog-results { display: grid; gap: 12px; }
    .result-row {
      display: grid; grid-template-columns: 46px 1fr auto; gap: 15px; align-items: center;
      padding: 17px 19px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
      transition: .2s ease;
    }
    .result-row:hover { border-color: #b9d9d4; box-shadow: 0 8px 24px rgba(23,33,43,.07); }
    .result-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; color: var(--teal-dark); background: #e2f1ee; }
    .result-row:nth-child(2) .result-mark { color: #b65342; background: #fde9e3; }
    .result-row:nth-child(3) .result-mark { color: #526b80; background: #e9eff4; }
    .result-row strong { display: block; font-size: 15px; }
    .result-row small { color: var(--muted); }
    .result-arrow { color: #8b999f; }
    .editorial-section { background: #f1f5f6; }
    .editorial-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; }
    .editorial-lead { padding: 28px; border-left: 4px solid var(--coral); background: #fff; }
    .editorial-lead h2 { margin: 12px 0; font-size: 26px; line-height: 1.4; }
    .editorial-lead p { margin: 0; color: var(--muted); }
    .editorial-list { margin: 0; padding: 0; list-style: none; }
    .editorial-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid #dce4e8; }
    .editorial-list li:last-child { border-bottom: 0; }
    .editorial-list i { margin-top: 5px; color: var(--teal); }
    .editorial-list strong { display: block; margin-bottom: 3px; font-size: 15px; }
    .editorial-list span { color: var(--muted); font-size: 14px; }
    .fresh-section { background: var(--white); }
    .fresh-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .fresh-card { padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: .2s ease; }
    .fresh-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .fresh-card .tag { margin-bottom: 17px; }
    .fresh-card h3 { margin: 0 0 9px; font-size: 18px; }
    .fresh-card p { margin: 0; color: var(--muted); font-size: 14px; }
    .fresh-meta { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--line); color: #849099; font-size: 12px; }
    .voices-section { background: #eaf2f1; }
    .voice-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; align-items: center; }
    .voice-stat { padding: 26px; border-radius: 14px; color: #fff; background: var(--teal-dark); }
    .voice-stat strong { display: block; font-size: 42px; line-height: 1.1; }
    .voice-stat span { display: block; margin-top: 9px; color: #c6e6e2; font-size: 14px; }
    .quote-box { padding: 28px 30px; border: 1px solid #d6e5e2; border-radius: 14px; background: #fff; }
    .quote-box i { color: var(--coral); font-size: 22px; }
    .quote-box blockquote { margin: 12px 0 16px; font-size: 18px; font-weight: 650; }
    .quote-box cite { color: var(--muted); font-size: 13px; font-style: normal; }
    .audience-section { background: var(--white); }
    .audience-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
    .audience-copy h2 { margin: 8px 0 13px; font-size: 28px; }
    .audience-copy p { margin: 0; color: var(--muted); }
    .audience-tags { display: flex; flex-wrap: wrap; gap: 10px; }
    .audience-tags span { padding: 9px 14px; border: 1px solid #d6e2e4; border-radius: 9px; background: #f7faf9; color: #42555f; font-size: 14px; }
    .numbers-section { color: #fff; background: var(--navy); }
    .numbers-section .section-kicker { color: #78cfc3; }
    .numbers-section h2 { margin: 8px 0 0; font-size: 29px; }
    .numbers-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 28px; border-top: 1px solid rgba(255,255,255,.16); }
    .number-item { padding: 22px 18px 0 0; }
    .number-item strong { display: block; color: #fff; font-size: 28px; }
    .number-item span { color: #aec1c8; font-size: 13px; }
    .latest-section { background: #f1f5f6; }
    .latest-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 34px; }
    .latest-heading h2 { margin: 8px 0 12px; font-size: 28px; }
    .latest-heading p { color: var(--muted); }
    .latest-list { display: grid; gap: 11px; }
    .latest-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 16px; border-bottom: 1px solid #dce4e8; }
    .latest-item:first-child { border-top: 1px solid #dce4e8; }
    .latest-item i { color: var(--teal); }
    .latest-item strong { display: block; font-size: 15px; }
    .latest-item small { color: var(--muted); }
    .latest-item time { color: #849099; font-size: 12px; white-space: nowrap; }
    .closing-section { padding-top: 48px; padding-bottom: 56px; background: var(--white); }
    .closing-box { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border: 1px solid #d4e5e2; border-radius: var(--radius); background: #eff7f5; }
    .closing-box h2 { margin: 0 0 6px; font-size: 23px; }
    .closing-box p { margin: 0; color: var(--muted); }
    .btn-main, .btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 18px; border: 0; border-radius: 10px; font-weight: 700; transition: .2s ease; }
    .btn-main { color: #fff; background: var(--teal); }
    .btn-main:hover { color: #fff; background: var(--teal-dark); transform: translateY(-2px); }
    .btn-soft { color: var(--ink); background: #e5efed; }
    .btn-soft:hover { color: var(--teal-dark); background: #d5e8e4; }
    footer { padding: 48px 5vw 22px; color: #d9e5e8; background: #102430; }
    .footer-grid { display: grid; grid-template-columns: 1.4fr .7fr .9fr; gap: 40px; }
    footer .brand { padding: 0; margin-bottom: 15px; }
    footer p { max-width: 390px; margin: 0; color: #9fb3bb; font-size: 14px; }
    .footer-title { margin-bottom: 13px; color: #fff; font-weight: 750; }
    .footer-link { display: block; width: fit-content; margin: 7px 0; color: #aabdc4; font-size: 14px; transition: color .2s; }
    .footer-link:hover { color: #fff; }
    .copyright { margin-top: 35px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.12); color: #8299a2; font-size: 12px; }
    @media (max-width: 1100px) {
      .shell-nav { width: 210px; }
      .page-shell { margin-left: 210px; }
      .hero { padding-left: 4vw; padding-right: 4vw; }
      section { padding-left: 4vw; padding-right: 4vw; }
      .summary-layout, .catalog-layout, .editorial-layout, .latest-layout { gap: 22px; }
    }
    @media (max-width: 768px) {
      .shell-nav {
        position: sticky; top: 0; bottom: auto; width: 100%; height: auto; padding: 10px 16px;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
      }
      .brand { padding: 0; font-size: 16px; }
      .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
      .nav-label, .nav-foot { display: none; }
      .side-nav { display: flex; gap: 5px; }
      .side-link { min-height: 38px; padding: 8px 10px; font-size: 12px; }
      .side-link i { display: none; }
      .page-shell { margin-left: 0; }
      .topbar { min-height: 55px; padding: 0 5vw; }
      .hero { padding-top: 48px; padding-bottom: 42px; }
      .hero::after { right: -210px; }
      section { padding-top: 48px; padding-bottom: 48px; }
      .summary-layout, .topic-grid, .catalog-layout, .editorial-layout, .voice-layout, .audience-layout, .latest-layout { grid-template-columns: 1fr; }
      .method-strip { grid-template-columns: 1fr 1fr; }
      .method-step:nth-child(2)::after { display: none; }
      .fresh-grid { grid-template-columns: 1fr 1fr; }
      .numbers-grid { grid-template-columns: 1fr 1fr; row-gap: 10px; }
      .section-head { align-items: start; flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      .shell-nav { align-items: flex-start; flex-direction: column; }
      .side-nav { width: 100%; }
      .side-link { flex: 1; justify-content: center; }
      .top-note { font-size: 11px; }
      h1 { font-size: 35px; }
      .hero-copy { font-size: 15px; }
      .summary-visual { min-height: 220px; grid-template-columns: 1fr; }
      .visual-main { min-height: 150px; }
      .visual-side { grid-template-columns: 1fr 1fr; }
      .topic-grid { gap: 16px; }
      .topic-feature { min-height: 230px; padding: 22px; }
      .topic-list { grid-template-columns: 1fr 1fr; }
      .topic-item { min-height: 120px; padding: 14px; }
      .method-strip { grid-template-columns: 1fr; }
      .method-step { padding: 18px 0; border-bottom: 1px solid #dce4e8; }
      .method-step::after { display: none; }
      .fresh-grid { grid-template-columns: 1fr; }
      .result-row { grid-template-columns: 42px 1fr 18px; gap: 10px; padding: 14px; }
      .result-mark { width: 40px; height: 40px; }
      .latest-item { grid-template-columns: 26px 1fr; }
      .latest-item time { grid-column: 2; }
      .closing-box { align-items: flex-start; flex-direction: column; padding: 23px; }
      .numbers-grid { grid-template-columns: 1fr 1fr; }
      .number-item { padding-right: 8px; }
      .number-item strong { font-size: 24px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
      footer { padding-top: 38px; }
    }