/* roulang page: index */
:root {
      --ink: #202622;
      --muted: #66716a;
      --paper: #f7f7f2;
      --white: #fff;
      --green: #245c47;
      --green-dark: #173f32;
      --lime: #d5ed73;
      --coral: #ed795e;
      --line: #e2e6dc;
      --soft: #edf1e7;
      --radius: 8px;
      --shadow: 0 18px 44px rgba(32, 38, 34, .08);
      --container: 1160px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 3px solid rgba(237,121,94,.55);
      outline-offset: 3px;
    }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 20;
      background: rgba(247,247,242,.94);
      border-bottom: 1px solid rgba(226,230,220,.9);
      backdrop-filter: blur(14px);
    }
    .nav {
      height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px;
    }
    .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 20px; white-space: nowrap; }
    .brand-mark {
      width: 38px; height: 38px; display: grid; place-items: center;
      border-radius: 7px; color: var(--lime); background: var(--green);
      font-size: 13px; font-weight: 900; letter-spacing: 0;
    }
    .nav-links { display: flex; align-items: center; gap: 8px; }
    .nav-links a {
      padding: 9px 13px; color: var(--muted); font-size: 14px; border-radius: 6px;
      transition: color .2s, background .2s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--green-dark); background: var(--soft); }
    .nav-links a.active { font-weight: 700; }
    .nav-note { color: var(--muted); font-size: 13px; }
    .hero {
      position: relative; min-height: 610px; display: flex; align-items: center; overflow: hidden;
      color: var(--white); background: #233d31;
    }
    .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
    .hero::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(16,35,27,.88) 0%, rgba(20,41,31,.72) 46%, rgba(17,36,29,.16) 100%);
    }
    .hero-content { position: relative; z-index: 1; max-width: 720px; padding: 88px 0 96px; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px; color: var(--lime);
      font-size: 13px; font-weight: 700; letter-spacing: 0;
    }
    .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--lime); }
    h1 { max-width: 680px; margin: 20px 0 18px; font-size: clamp(44px, 6vw, 76px); line-height: 1.12; letter-spacing: 0; }
    .hero-copy { max-width: 660px; margin: 0; color: rgba(255,255,255,.84); font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
    .button {
      min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 0 19px; border: 1px solid transparent; border-radius: 6px;
      font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s;
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary { color: var(--green-dark); background: var(--lime); }
    .button-primary:hover { background: #e1f69a; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
    .button-ghost { color: var(--white); border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.08); }
    .button-ghost:hover { background: rgba(255,255,255,.17); }
    .hero-foot { margin-top: 31px; color: rgba(255,255,255,.72); font-size: 13px; }
    .hero-foot strong { color: var(--white); }
    main section { padding: 76px 0; border-bottom: 1px solid var(--line); }
    main section:nth-of-type(even) { background: #f0f2eb; }
    .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 26px; margin-bottom: 34px; }
    .section-heading > div { max-width: 700px; }
    .kicker { margin: 0 0 8px; color: var(--green); font-size: 12px; font-weight: 800; }
    h2 { margin: 0; font-size: clamp(27px, 3.4vw, 39px); line-height: 1.25; letter-spacing: 0; }
    .section-intro { max-width: 760px; margin: 12px 0 0; color: var(--muted); }
    .text-link { color: var(--green); font-weight: 700; white-space: nowrap; }
    .text-link:hover { color: var(--coral); }
    .metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--white); }
    .metric { padding: 25px 26px; border-right: 1px solid var(--line); }
    .metric:last-child { border-right: 0; }
    .metric strong { display: block; color: var(--green); font-size: 30px; line-height: 1.2; }
    .metric span { color: var(--muted); font-size: 14px; }
    .matrix { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .matrix-item {
      min-height: 190px; padding: 25px; background: rgba(255,255,255,.62);
      border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
      transition: background .2s, transform .2s;
    }
    .matrix-item:hover { position: relative; z-index: 1; background: var(--white); transform: translateY(-3px); }
    .index { color: var(--coral); font-size: 12px; font-weight: 800; }
    .matrix-item h3, .story-card h3, .news-item h3 { margin: 12px 0 8px; font-size: 19px; line-height: 1.4; }
    .matrix-item p, .story-card p, .news-item p { margin: 0; color: var(--muted); font-size: 14px; }
    .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .compare-panel { padding: 28px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
    .compare-panel.highlight { color: var(--white); background: var(--green-dark); border-color: var(--green-dark); }
    .compare-panel h3 { margin: 0 0 17px; font-size: 20px; }
    .compare-panel ul { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
    .compare-panel li { display: flex; gap: 11px; align-items: flex-start; color: var(--muted); font-size: 14px; }
    .compare-panel.highlight li { color: rgba(255,255,255,.82); }
    .compare-panel li::before { content: "＋"; color: var(--coral); font-weight: 900; }
    .compare-panel.highlight li::before { color: var(--lime); }
    .timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
    .milestone { position: relative; padding: 8px 24px 8px 27px; border-left: 2px solid #c8d6b8; }
    .milestone::before { content: ""; position: absolute; left: -7px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); }
    .milestone small { color: var(--green); font-weight: 800; }
    .milestone h3 { margin: 8px 0; font-size: 18px; }
    .milestone p { margin: 0; color: var(--muted); font-size: 14px; }
    .story-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
    .story-card { overflow: hidden; border: 1px solid var(--line); background: var(--white); transition: box-shadow .2s, transform .2s; }
    .story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .story-image { height: 190px; background-size: cover; background-position: center; }
    .story-card:first-child .story-image { height: 235px; }
    .story-content { padding: 20px; }
    .tag { display: inline-flex; padding: 4px 9px; color: var(--green); background: var(--soft); border-radius: 4px; font-size: 12px; font-weight: 700; }
    .story-card h3 { margin-top: 12px; }
    .news-list { border-top: 1px solid var(--line); }
    .news-item { display: grid; grid-template-columns: 110px 1fr auto; gap: 22px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--line); }
    .news-date { color: var(--green); font-size: 13px; font-weight: 700; }
    .news-item h3 { margin: 0 0 4px; font-size: 17px; }
    .news-item p { font-size: 13px; }
    .news-arrow { color: var(--coral); font-size: 20px; }
    .category-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
    .category-link { display: flex; align-items: center; justify-content: space-between; padding: 20px; color: var(--green-dark); background: var(--white); border: 1px solid var(--line); transition: border .2s, transform .2s; }
    .category-link:hover { transform: translateY(-2px); border-color: var(--green); }
    .category-link span { font-size: 18px; font-weight: 800; }
    .category-link b { color: var(--coral); font-size: 20px; }
    .update-band { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 32px; background: var(--green-dark); color: var(--white); }
    .update-band h3 { margin: 0 0 10px; font-size: 23px; }
    .update-band p { margin: 0; color: rgba(255,255,255,.75); }
    .update-list { display: grid; gap: 13px; }
    .update-line { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 14px; }
    .update-line:last-child { padding-bottom: 0; border: 0; }
    .update-line span:last-child { color: var(--lime); white-space: nowrap; }
    .platform { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
    .platform-image { min-height: 310px; background: url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1000&q=85") center/cover; }
    .platform-points { display: grid; gap: 14px; margin-top: 22px; }
    .platform-point { padding: 16px 0; border-top: 1px solid var(--line); }
    .platform-point strong { display: block; margin-bottom: 4px; }
    .platform-point span { color: var(--muted); font-size: 14px; }
    .quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .quick-item { padding: 22px; border-top: 3px solid var(--coral); background: var(--white); }
    .quick-item h3 { margin: 0 0 8px; font-size: 17px; }
    .quick-item p { margin: 0; color: var(--muted); font-size: 14px; }
    .faq-list { max-width: 850px; }
    details { padding: 19px 0; border-bottom: 1px solid var(--line); }
    summary { cursor: pointer; font-weight: 750; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; float: right; color: var(--coral); font-size: 20px; line-height: 1; }
    details[open] summary::after { content: "−"; }
    details p { max-width: 760px; margin: 12px 0 0; color: var(--muted); }
    .contact-section { color: var(--white); background: #263d32 !important; }
    .contact-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; align-items: center; }
    .contact-section .kicker { color: var(--lime); }
    .contact-section .section-intro { color: rgba(255,255,255,.72); }
    .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
    .contact-form input, .contact-form textarea {
      width: 100%; padding: 13px 14px; color: var(--white); background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.25); border-radius: 5px;
    }
    .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.66); }
    .contact-form textarea { grid-column: 1 / -1; min-height: 95px; resize: vertical; }
    .contact-form button { grid-column: 1 / -1; justify-self: start; cursor: pointer; border: 0; }
    .form-note { grid-column: 1 / -1; margin: 0; color: rgba(255,255,255,.65); font-size: 12px; }
    .site-footer { padding: 34px 0; color: var(--muted); background: #eff1e9; }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
    .footer-brand { color: var(--ink); font-weight: 800; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
    .footer-links a:hover { color: var(--green); }
    .copyright { font-size: 12px; }
    @media (max-width: 900px) {
      .nav-note { display: none; }
      .story-grid { grid-template-columns: repeat(2, 1fr); }
      .story-card:first-child { grid-column: 1 / -1; }
      .timeline { grid-template-columns: 1fr; gap: 22px; }
      .platform, .contact-wrap { grid-template-columns: 1fr; }
      .platform-image { min-height: 260px; }
    }
    @media (max-width: 700px) {
      .container { width: min(100% - 32px, var(--container)); }
      .nav { height: auto; min-height: 68px; flex-wrap: wrap; gap: 5px 12px; padding: 10px 0; }
      .brand { font-size: 18px; }
      .brand-mark { width: 34px; height: 34px; }
      .nav-links { width: 100%; overflow-x: auto; padding-bottom: 2px; }
      .nav-links a { flex: 0 0 auto; padding: 7px 10px; font-size: 13px; }
      .hero { min-height: 570px; }
      .hero::after { background: linear-gradient(90deg, rgba(16,35,27,.88), rgba(16,35,27,.5)); }
      .hero-content { padding: 72px 0; }
      .hero-copy { font-size: 15px; }
      main section { padding: 56px 0; }
      .section-heading { display: block; }
      .section-heading > .text-link { display: inline-block; margin-top: 16px; }
      .metrics { grid-template-columns: repeat(2,1fr); }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .matrix { grid-template-columns: repeat(2,1fr); }
      .compare { grid-template-columns: 1fr; }
      .category-grid, .quick-grid { grid-template-columns: 1fr 1fr; }
      .news-item { grid-template-columns: 82px 1fr auto; gap: 12px; }
      .update-band { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
      .footer-inner { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 520px) {
      h1 { font-size: 43px; }
      .hero { min-height: 590px; }
      .hero-actions { align-items: stretch; flex-direction: column; max-width: 270px; }
      .matrix, .story-grid, .category-grid, .quick-grid { grid-template-columns: 1fr; }
      .story-card:first-child { grid-column: auto; }
      .story-image, .story-card:first-child .story-image { height: 200px; }
      .news-item { grid-template-columns: 1fr auto; }
      .news-date { grid-column: 1 / -1; }
      .news-item h3 { font-size: 16px; }
      .contact-form { grid-template-columns: 1fr; }
      .contact-form textarea, .contact-form button, .form-note { grid-column: 1; }
      .footer-links { gap: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root {
      --ink: #202622;
      --muted: #66716a;
      --paper: #f7f7f2;
      --white: #fff;
      --green: #245c47;
      --green-dark: #173f32;
      --lime: #d5ed73;
      --coral: #ed795e;
      --line: #e2e6dc;
      --soft: #edf1e7;
      --radius: 8px;
      --shadow: 0 18px 44px rgba(32, 38, 34, .08);
      --container: 1160px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 3px solid rgba(237,121,94,.55);
      outline-offset: 3px;
    }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 20;
      background: rgba(247,247,242,.94);
      border-bottom: 1px solid rgba(226,230,220,.9);
      backdrop-filter: blur(14px);
    }
    .nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 20px; white-space: nowrap; }
    .brand-mark {
      width: 38px; height: 38px; display: grid; place-items: center;
      border-radius: 7px; color: var(--lime); background: var(--green);
      font-size: 13px; font-weight: 900; letter-spacing: 0;
    }
    .nav-links { display: flex; align-items: center; gap: 8px; }
    .nav-links a {
      padding: 9px 13px; color: var(--muted); font-size: 14px; border-radius: 6px;
      transition: color .2s, background .2s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--green-dark); background: var(--soft); }
    .nav-links a.active { font-weight: 700; }
    .nav-note { color: var(--muted); font-size: 13px; white-space: nowrap; }
    .page-intro { padding: 42px 0 26px; }
    .breadcrumbs { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
    .breadcrumbs a:hover { color: var(--green); }
    .breadcrumbs span[aria-current] { color: var(--green-dark); }
    .hero {
      position: relative; min-height: 430px; display: flex; align-items: center; overflow: hidden;
      color: var(--white); background: #233d31;
    }
    .hero-image {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%;
    }
    .hero::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(16,35,27,.88) 0%, rgba(20,41,31,.72) 48%, rgba(17,36,29,.15) 100%);
    }
    .hero-content { position: relative; z-index: 1; max-width: 770px; padding: 68px 0 76px; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px; color: var(--lime);
      font-size: 13px; font-weight: 700;
    }
    .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--lime); }
    h1 { max-width: 720px; margin: 18px 0 15px; font-size: clamp(38px, 5vw, 62px); line-height: 1.15; }
    .hero-copy { max-width: 650px; margin: 0; color: rgba(255,255,255,.84); font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
    .button {
      min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 0 19px; border: 1px solid transparent; border-radius: 6px;
      font-weight: 700; transition: transform .2s, background .2s, box-shadow .2s;
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary { color: var(--green-dark); background: var(--lime); }
    .button-primary:hover { background: #e1f69a; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
    .button-ghost { color: var(--white); border-color: rgba(255,255,255,.48); background: rgba(255,255,255,.08); }
    .button-ghost:hover { background: rgba(255,255,255,.17); }
   background: rgba(255,255,255,.17); }
    main section { padding: 74px 0; border-bottom: 1px solid var(--line); }
    main section:nth-of-type(even) { background: #f0f2eb; }
    .section-heading {
      display: flex; justify-content: space-between; align-items: end; gap: 26px; margin-bottom: 32px;
    }
    .section-heading > div { max-width: 720px; }
    h2 { margin: 0; color: var(--green-dark); font-size: clamp(27px, 3vw, 38px); line-height: 1.25; }
    h3 { color: var(--green-dark); }
    .section-intro { max-width: 760px; margin: 12px 0 0; color: var(--muted); }
    .text-link { color: var(--green); font-weight: 700; white-space: nowrap; }
    .text-link:hover { color: var(--coral); }
    .stats {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
      background: var(--line); border: 1px solid var(--line);
    }
    .stat {
      min-height: 142px; padding: 24px; background: var(--white);
    }
    .stat strong { display: block; color: var(--green); font-size: 37px; line-height: 1.1; }
    .stat span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; }
    .matrix {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
      border: 1px solid var(--line); background: var(--line);
    }
    .matrix-item {
      min-height: 190px; padding: 25px; background: rgba(255,255,255,.7);
      transition: background .2s, transform .2s;
    }
    .matrix-item:hover { position: relative; z-index: 1; background: var(--white); transform: translateY(-3px); }
    .matrix-icon {
      width: 38px; height: 38px; display: grid; place-items: center;
      color: var(--green-dark); background: var(--lime); border-radius: 50%; font-weight: 800;
    }
    .matrix-item h3, .story-card h3, .news-item h3 { margin: 13px 0 8px; font-size: 19px; line-height: 1.4; }
    .matrix-item p, .story-card p, .news-item p { margin: 0; color: var(--muted); font-size: 14px; }
    .feature-layout {
      display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch;
    }
    .feature-panel {
      min-height: 330px; padding: 34px; color: var(--white); background: var(--green-dark);
      position: relative; overflow: hidden;
    }
    .feature-panel::before {
      content: "异"; position: absolute; right: 28px; bottom: -28px;
      color: rgba(213,237,115,.13); font-size: 190px; font-weight: 900; line-height: 1;
    }
    .feature-panel > * { position: relative; z-index: 1; }
    .feature-panel h3 { max-width: 440px; margin: 18px 0 12px; color: var(--white); font-size: 31px; line-height: 1.3; }
    .feature-panel p { max-width: 510px; margin: 0; color: rgba(255,255,255,.74); }
    .feature-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 28px; }
    .tag {
      display: inline-flex; padding: 4px 9px; color: var(--green); background: var(--soft);
      border-radius: 4px; font-size: 12px; font-weight: 700;
    }
    .feature-panel .tag { color: var(--green-dark); background: var(--lime); }
    .compare {
      display: grid; gap: 14px; padding: 27px; border: 1px solid var(--line); background: var(--white);
    }
    .compare-title { margin: 0 0 5px; color: var(--green-dark); font-size: 20px; }
    .compare-row {
      display: grid; grid-template-columns: 96px 1fr; gap: 15px;
      align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line);
    }
    .compare-row:last-child { border-bottom: 0; }
    .compare-row span { color: var(--muted); font-size: 13px; }
    .bar { height: 8px; overflow: hidden; border-radius: 10px; background: var(--soft); }
    .bar i { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
    .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
    .milestone {
      position: relative; padding: 0 24px 0 28px; border-left: 1px solid var(--line);
    }
    .milestone:first-child { padding-left: 0; border-left: 0; }
    .milestone b { display: block; color: var(--coral); font-size: 14px; }
    .milestone h3 { margin: 9px 0 7px; font-size: 19px; }
    .milestone p { margin: 0; color: var(--muted); font-size: 14px; }
    .story-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
    .story-card {
      overflow: hidden; border: 1px solid var(--line); background: var(--white);
      transition: box-shadow .2s, transform .2s;
    }
    .story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
    .story-image {
      height: 165px;
      background: linear-gradient(135deg, rgba(36,92,71,.2), rgba(237,121,94,.45)),
      url("https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1000&q=85") center/cover;
    }
    .story-card:first-child .story-image { height: 235px; }
    .story-body { padding: 21px 22px 25px; }
    .story-card h3 { margin-top: 12px; }
    .news-list { border-top: 1px solid var(--line); }
    .news-item {
      display: grid; grid-template-columns: 112px 1fr auto; gap: 22px; align-items: center;
      padding: 20px 4px; border-bottom: 1px solid var(--line);
    }
    .news-date { color: var(--coral); font-size: 13px; font-weight: 700; }
    .news-item h3 { margin: 0 0 4px; font-size: 17px; }
    .news-item p { font-size: 13px; }
    .news-arrow { color: var(--coral); font-size: 20px; }
    .platform {
      display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
    }
    .platform-image {
      min-height: 310px;
      background: linear-gradient(135deg, rgba(23,63,50,.16), rgba(23,63,50,.1)),
      url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1000&q=85") center/cover;
    }
    .platform-points { display: grid; gap: 14px; margin-top: 22px; }
    .platform-point { padding: 16px 0; border-top: 1px solid var(--line); }
    .platform-point strong { display: block; margin-bottom: 4px; color: var(--green-dark); }
    .platform-point span { color: var(--muted); font-size: 14px; }
    .quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
    .quick-item { padding: 22px; border-top: 3px solid var(--coral); background: var(--white); }
    .quick-item h3 { margin: 0 0 8px; font-size: 18px; }
    .quick-item p { margin: 0; color: var(--muted); font-size: 14px; }
    .faq-list { max-width: 900px; }
    details { padding: 19px 0; border-top: 1px solid var(--line); }
    details:last-child { border-bottom: 1px solid var(--line); }
    summary {
      display: flex; justify-content: space-between; gap: 20px; cursor: pointer;
      color: var(--green-dark); font-weight: 700; list-style: none;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; color: var(--coral); font-size: 23px; line-height: 1; }
    details[open] summary::after { content: "−"; }
    details p { max-width: 760px; margin: 12px 28px 0 0; color: var(--muted); font-size: 14px; }
    .contact {
      display: grid; grid-template-columns: .85fr 1.15fr; gap: 38px; align-items: start;
    }
    .contact-copy h2 { max-width: 420px; }
    .contact-copy p { max-width: 440px; color: var(--muted); }
    .contact-form {
      display: grid; gap: 14px; padding: 27px; background: var(--white); border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    .field { display: grid; gap: 7px; }
    .field label { color: var(--green-dark); font-size: 13px; font-weight: 700; }
    .field input, .field textarea {
      width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 5px;
      color: var(--ink); background: #fbfcf8; transition: border .2s, box-shadow .2s;
    }
    .field textarea { min-height: 108px; resize: vertical; }
    .field input:focus, .field textarea:focus {
      border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,92,71,.12); outline: 0;
    }
    .form-note { margin: 0; color: var(--muted); font-size: 12px; }
    .site-footer { padding: 30px 0; background: var(--green-dark); color: rgba(255,255,255,.72); }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .footer-brand { color: var(--white); font-size: 19px; font-weight: 800; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
    .footer-links a:hover { color: var(--lime); }
    .copyright { font-size: 12px; text-align: right; }
    @media (max-width: 1024px) {
      .nav-note { display: none; }
      .feature-layout, .platform, .contact { grid-template-columns: 1fr; }
      .story-grid { grid-template-columns: 1fr 1fr; }
      .story-card:first-child { grid-column: span 2; }
      .timeline { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
      .milestone:nth-child(3) { padding-left: 0; border-left: 0; }
    }
    @media (max-width: 768px) {
      .container { width: min(var(--container), calc(100% - 34px)); }
      .nav { height: auto; min-height: 68px; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; }
      .nav-links { order: 3; width: 100%; overflow-x: auto; padding-bottom: 3px; }
      .nav-links a { flex: 0 0 auto; padding: 7px 10px; }
      .page-intro { padding-top: 25px; }
      .hero { min-height: 500px; }
      .hero-content { padding: 58px 0; }
      main section { padding: 56px 0; }
      .section-heading { display: block; margin-bottom: 25px; }
      .section-heading .text-link { display: inline-block; margin-top: 14px; }
      .stats { grid-template-columns: 1fr 1fr; }
      .matrix, .quick-grid { grid-template-columns: 1fr 1fr; }
      .news-item { grid-template-columns: 82px 1fr auto; gap: 12px; }
      .footer-inner { align-items: flex-start; flex-direction: column; }
      .copyright { text-align: left; }
    }
    @media (max-width: 520px) {
      h1 { font-size: 38px; }
      .hero-copy { font-size: 15px; }
      .stats, .matrix, .quick-grid, .story-grid, .timeline { grid-template-columns: 1fr; }
      .story-card:first-child { grid-column: auto; }
      .story-card:first-child .story-image { height: 190px; }
      .milestone, .milestone:nth-child(3) {
        padding: 0 0 0 18px; border-left: 1px solid var(--line);
      }
      .news-item { grid-template-columns: 1fr auto; }
      .news-date { grid-column: 1 / -1; }
      .news-item p { display: none; }
      .contact-form { padding: 20px; }
      .footer-links { gap: 10px 16px; }
    }

/* roulang page: category2 */
:root{
 --ink:#202622;
 --muted:#66716a;
 --paper:#f7f7f2;
 --white:#fff;
 --green:#245c47;
 --green-dark:#173f32;
 --lime:#d5ed73;
 --coral:#ed795e;
 --line:#e2e6dc;
 --soft:#edf1e7;
 --radius:8px;
 --shadow:0 18px 44px rgba(32,38,34,.08);
 --container:1160px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(237,121,94,.55);outline-offset:3px}
.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(247,247,242,.94);border-bottom:1px solid rgba(226,230,220,.9);backdrop-filter:blur(14px)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:20px;white-space:nowrap}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:7px;color:var(--lime);background:var(--green);font-size:13px;font-weight:900}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{padding:9px 13px;color:var(--muted);font-size:14px;border-radius:6px;transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a.active{color:var(--green-dark);background:var(--soft)}
.nav-links a.active{font-weight:700}
.nav-note{color:var(--muted);font-size:13px;white-space:nowrap}
.hero{position:relative;min-height:540px;display:flex;align-items:center;overflow:hidden;color:var(--white);background:#233d31}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,35,27,.9) 0%,rgba(20,41,31,.7) 50%,rgba(17,36,29,.16) 100%)}
.hero-content{position:relative;z-index:1;max-width:760px;padding:88px 0 92px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--lime);font-size:13px;font-weight:700}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--lime)}
h1,h2,h3,p{margin-top:0}
h1{max-width:760px;margin:17px 0 18px;font-size:clamp(38px,5vw,68px);line-height:1.1;letter-spacing:-.045em}
h2{margin:0;font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.03em}
h3{line-height:1.4}
.hero-copy{max-width:670px;margin:0;color:rgba(255,255,255,.84);font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 19px;border:1px solid transparent;border-radius:6px;font-weight:700;transition:transform .2s,background .2s,box-shadow .2s}
.button:hover{transform:translateY(-2px)}
.button-primary{color:var(--green-dark);background:var(--lime)}
.button-primary:hover{background:#e1f69a;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.button-ghost{color:var(--white);border-color:rgba(255,255,255,.48);background:rgba(255,255,255,.08)}
.button-ghost:hover{background:rgba(255,255,255,.17)}
.hero-foot{margin-top:30px;color:rgba(255,255,255,.72);font-size:13px}
.hero-foot strong{color:var(--white)}
main section{padding:76px 0;border-bottom:1px solid var(--line)}
main section:nth-of-type(even){background:#f0f2eb}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:26px;margin-bottom:34px}
.section-heading>div{max-width:720px}
.section-intro{max-width:760px;margin:12px 0 0;color:var(--muted)}
.text-link{color:var(--green);font-weight:700;white-space:nowrap}
.text-link:hover{color:var(--coral)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{min-height:150px;padding:25px;background:var(--white)}
.stat strong{display:block;color:var(--green);font-size:38px;line-height:1.1;letter-spacing:-.04em}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:14px}
.featured{display:grid;grid-template-columns:1.12fr .88fr;gap:20px}
.feature-card{min-height:330px;position:relative;overflow:hidden;background:var(--green-dark);color:var(--white)}
.feature-card img{width:100%;height:100%;min-height:330px;object-fit:cover;opacity:.78;transition:transform .5s}
.feature-card:hover img{transform:scale(1.04)}
.feature-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(13,29,23,.92))}
.feature-card-content{position:absolute;z-index:1;left:28px;right:28px;bottom:25px}
.feature-card h3{margin:12px 0 6px;font-size:27px}
.feature-card p{margin:0;color:rgba(255,255,255,.78);font-size:14px}
.side-stories{display:grid;gap:16px}
.side-story{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:14px;background:var(--white);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.side-story:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.side-story img{width:150px;height:112px;object-fit:cover}
.side-story h3{margin:0 0 5px;font-size:18px}
.side-story p{margin:0;color:var(--muted);font-size:13px}
.tag{display:inline-flex;padding:4px 9px;color:var(--green);background:var(--soft);border-radius:4px;font-size:12px;font-weight:700}
.matrix{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.matrix-item{min-height:180px;padding:25px;background:rgba(255,255,255,.62);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .2s,transform .2s}
.matrix-item:hover{position:relative;z-index:1;background:var(--white);transform:translateY(-3px)}
.matrix-item h3{margin:13px 0 8px;font-size:19px}
.matrix-item p{margin:0;color:var(--muted);font-size:14px}
.matrix-number{color:var(--coral);font-size:13px;font-weight:800}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare-card{padding:30px;background:var(--white);border:1px solid var(--line)}
.compare-card.dark{color:var(--white);background:var(--green-dark);border-color:var(--green-dark)}
.compare-card h3{margin:0 0 20px;font-size:22px}
.compare-list{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.compare-list li{display:flex;gap:12px;padding-top:13px;border-top:1px solid var(--line);font-size:14px}
.compare-card.dark .compare-list li{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.82)}
.compare-list b{color:var(--coral)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--green)}
.milestone{position:relative;padding:25px 22px 5px;border-right:1px solid var(--line)}
.milestone:before{content:"";position:absolute;top:-8px;left:22px;width:14px;height:14px;border-radius:50%;background:var(--lime);border:3px solid var(--green)}
.milestone small{color:var(--coral);font-weight:800}
.milestone h3{margin:10px 0 7px;font-size:18px}
.milestone p{margin:0;color:var(--muted);font-size:14px}
.news-list{border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:105px 1fr auto;gap:22px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line)}
.news-date{color:var(--coral);font-size:13px;font-weight:700}
.news-item h3{margin:0 0 4px;font-size:17px}
.news-item p{margin:0;color:var(--muted);font-size:13px}
.news-arrow{color:var(--coral);font-size:20px}
.platform{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:stretch}
.platform-image{min-height:315px;background:url("https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1000&q=85") center/cover}
.platform-copy{padding:8px 0}
.platform-points{display:grid;gap:14px;margin-top:22px}
.platform-point{padding:16px 0;border-top:1px solid var(--line)}
.platform-point strong{display:block;margin-bottom:4px}
.platform-point span{color:var(--muted);font-size:14px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq-item{padding:22px;background:var(--white);border:1px solid var(--line)}
.faq-item h3{margin:0 0 8px;font-size:17px}
.faq-item p{margin:0;color:var(--muted);font-size:14px}
.contact-box{display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:start}
.contact-box .section-intro{margin-bottom:24px}
.contact-form{padding:28px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:7px;margin-bottom:15px}
.field label{font-size:13px;font-weight:700}
.field input,.field textarea{width:100%;padding:12px 13px;color:var(--ink);background:#fbfcf8;border:1px solid var(--line);border-radius:5px;outline:none;transition:border .2s,box-shadow .2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(237,121,94,.12)}
.form-note{margin:11px 0 0;color:var(--muted);font-size:12px}
.site-footer{background:var(--green-dark);color:rgba(255,255,255,.72)}
.footer-inner{min-height:115px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.footer-brand{color:var(--white);font-size:20px;font-weight:800}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;font-size:13px}
.footer-links a:hover{color:var(--lime)}
.copyright{font-size:12px;color:rgba(255,255,255,.52);white-space:nowrap}
@media(max-width:1024px){
 .nav-note{display:none}
 .featured,.contact-box{grid-template-columns:1fr}
 .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
 .container{width:min(var(--container),calc(100% - 32px))}
 .nav{height:auto;min-height:70px;gap:12px;flex-wrap:wrap;padding:12px 0}
 .nav-links{order:3;width:100%;overflow-x:auto;padding-bottom:3px}
 .nav-links a{white-space:nowrap}
 .hero{min-height:510px}
 .hero-content{padding:72px 0}
 main section{padding:58px 0}
 .section-heading{display:block;margin-bottom:25px}
 .section-heading .text-link{display:inline-block;margin-top:15px}
 .matrix,.compare,.faq-grid{grid-template-columns:1fr}
 .timeline{grid-template-columns:1fr 1fr;gap:22px 0}
 .milestone{min-height:145px}
 .platform{grid-template-columns:1fr}
 .platform-image{min-height:230px}
 .footer-inner{padding:28px 0;align-items:flex-start;flex-direction:column}
 .copyright{white-space:normal}
}
@media(max-width:520px){
 h1{font-size:40px}
 .hero-copy{font-size:15px}
 .hero-actions{display:grid}
 .hero-actions .button{width:100%}
 .stats{grid-template-columns:1fr 1fr}
 .stat{min-height:125px;padding:18px}
 .stat strong{font-size:29px}
 .featured{gap:14px}
 .feature-card,.feature-card img{min-height:275px}
 .feature-card-content{left:20px;right:20px}
 .feature-card h3{font-size:23px}
 .side-story{grid-template-columns:105px 1fr;gap:12px}
 .side-story img{width:105px;height:92px}
 .side-story h3{font-size:16px}
 .news-item{grid-template-columns:1fr auto;gap:7px}
 .news-date{grid-column:1/-1}
 .news-item p{font-size:12px}
 .timeline{grid-template-columns:1fr}
 .milestone{min-height:0;padding-bottom:5px}
 .form-row{grid-template-columns:1fr}
 .contact-form{padding:20px}
 .footer-links{gap:11px 15px}
}

/* roulang page: category3 */
:root {
      --ink: #202622;
      --muted: #66716a;
      --paper: #f7f7f2;
      --white: #fff;
      --green: #245c47;
      --green-dark: #173f32;
      --lime: #d5ed73;
      --coral: #ed795e;
      --line: #e2e6dc;
      --soft: #edf1e7;
      --warm: #f5eadf;
      --radius: 8px;
      --shadow: 0 18px 44px rgba(32, 38, 34, .08);
      --container: 1160px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 3px solid rgba(237,121,94,.55);
      outline-offset: 3px;
    }
    h1, h2, h3, p { overflow-wrap: anywhere; }
    h1, h2, h3 { margin-top: 0; }
    .container {
      width: min(var(--container), calc(100% - 48px));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(247,247,242,.94);
      border-bottom: 1px solid rgba(226,230,220,.9);
      backdrop-filter: blur(14px);
    }
    .nav {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-weight: 800;
      font-size: 20px;
      white-space: nowrap;
    }
    .brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      color: var(--lime);
      background: var(--green);
      font-size: 13px;
      font-weight: 900;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .nav-links a {
      padding: 9px 13px;
      color: var(--muted);
      font-size: 14px;
      border-radius: 6px;
      transition: color .2s, background .2s;
    }
    .nav-links a:hover,
    .nav-links a.active {
      color: var(--green-dark);
      background: var(--soft);
    }
    .nav-links a.active { font-weight: 700; }
    .nav-note { color: var(--muted); font-size: 13px; }

    .hero {
      position: relative;
      min-height: 550px;
      display: flex;
      align-items: center;
      overflow: hidden;
      color: var(--white);
      background: #31483d;
    }
    .hero-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 46%;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(20,42,32,.9) 0%, rgba(23,48,37,.7) 48%, rgba(25,42,34,.18) 100%);
    }
    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 720px;
      padding: 86px 0 92px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--lime);
      font-size: 13px;
      font-weight: 700;
    }
    .eyebrow::before {
      content: "";
      width: 22px;
      height: 2px;
      background: var(--lime);
    }
    .hero h1 {
      max-width: 680px;
      margin: 19px 0 18px;
      font-size: clamp(42px, 6vw, 76px);
      line-height: 1.12;
      letter-spacing: 0;
    }
    .hero-copy {
      max-width: 635px;
      margin: 0;
      color: rgba(255,255,255,.84);
      font-size: 17px;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }
    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 19px;
      border: 1px solid transparent;
      border-radius: 6px;
      font-weight: 700;
      transition: transform .2s, background .2s, box-shadow .2s;
    }
    .button:hover { transform: translateY(-2px); }
    .button-primary {
      color: var(--green-dark);
      background: var(--lime);
    }
    .button-primary:hover {
      background: #e1f69a;
      box-shadow: 0 8px 20px rgba(0,0,0,.15);
    }
    .button-ghost {
      color: var(--white);
      border-color: rgba(255,255,255,.48);
      background: rgba(255,255,255,.08);
    }
    .button-ghost:hover { background: rgba(255,255,255,.17); }
    .hero-foot {
      margin-top: 31px;
      color: rgba(255,255,255,.72);
      font-size: 13px;
    }
    .hero-foot strong { color: var(--white); }

    main section {
      padding: 76px 0;
      border-bottom: 1px solid var(--line);
    }
    main section:nth-of-type(even) { background: #f0f2eb; }
    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 26px;
      margin-bottom: 34px;
    }
    .section-heading > div { max-width: 700px; }
    .section-kicker {
      margin: 0 0 8px;
      color: var(--coral);
      font-size: 13px;
      font-weight: 800;
    }
    .section-heading h2 {
      margin: 0;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.2;
    }
    .section-intro {
      max-width: 760px;
      margin: 12px 0 0;
      color: var(--muted);
    }
    .text-link {
      color: var(--green);
      font-weight: 700;
      white-space: nowrap;
    }
    .text-link:hover { color: var(--coral); }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }
    .stat {
      min-height: 150px;
      padding: 25px;
      background: var(--white);
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .stat strong {
      display: block;
      color: var(--green);
      font-size: 40px;
      line-height: 1.1;
    }
    .stat span {
      display: block;
      margin-top: 12px;
      color: var(--muted);
      font-size: 14px;
    }

    .channel-layout {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 38px;
      align-items: start;
    }
    .channel-note {
      padding: 28px;
      color: var(--white);
      background: var(--green-dark);
    }
    .channel-note h3 {
      margin-bottom: 12px;
      color: var(--lime);
      font-size: 25px;
    }
    .channel-note p { margin: 0; color: rgba(255,255,255,.75); }
    .channel-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }
    .channel-item {
      min-height: 150px;
      padding: 22px;
      background: var(--white);
      transition: transform .2s, box-shadow .2s;
    }
    .channel-item:hover {
      position: relative;
      z-index: 1;
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }
    .channel-item b {
      display: block;
      margin-bottom: 6px;
      color: var(--green);
      font-size: 18px;
    }
    .channel-item span { color: var(--muted); font-size: 14px; }

    .story-grid {
      display: grid;
      grid-template-columns: 1.25fr 1fr 1fr;
      gap: 18px;
    }
    .story-card {
      overflow: hidden;
      border: 1px solid var(--line);
      background: var(--white);
      transition: box-shadow .2s, transform .2s;
    }
    .story-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }
    .story-image {
      height: 180px;
      overflow: hidden;
      background: var(--soft);
    }
    .story-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s;
    }
    .story-card:hover .story-image img { transform: scale(1.04); }
    .story-card:first-child .story-image { height: 235px; }
    .story-body { padding: 21px; }
    .tag {
      display: inline-flex;
      padding: 4px 9px;
      color: var(--green);
      background: var(--soft);
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
    }
    .story-card h3 {
      margin: 12px 0 8px;
      font-size: 19px;
      line-height: 1.4;
    }
    .story-card p { margin: 0; color: var(--muted); font-size: 14px; }

    .compare {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }
    .compare-panel {
      padding: 30px;
      border: 1px solid var(--line);
      background: var(--white);
    }
    .compare-panel.highlight {
      color: var(--white);
      background: var(--green);
      border-color: var(--green);
    }
    .compare-panel h3 { margin-bottom: 18px; font-size: 23px; }
    .compare-panel p { margin: 0 0 20px; color: var(--muted); }
    .compare-panel.highlight p { color: rgba(255,255,255,.78); }
    .compare-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .compare-list li {
      position: relative;
      padding-left: 25px;
      font-size: 14px;
    }
    .compare-list li::before {
      content: "＋";
      position: absolute;
      left: 0;
      color: var(--coral);
      font-weight: 800;
    }
    .compare-panel.highlight .compare-list li::before { color: var(--lime); }

    .timeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
    }
    .milestone {
      position: relative;
      min-height: 180px;
      padding: 27px 22px 22px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.52);
    }
    .milestone:last-child { border-right: 0; }
    .milestone-number {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      color: var(--white);
      background: var(--coral);
      border-radius: 50%;
      font-size: 13px;
      font-weight: 800;
    }
    .milestone h3 { margin: 17px 0 7px; font-size: 18px; }
    .milestone p { margin: 0; color: var(--muted); font-size: 14px; }

    .news-list { border-top: 1px solid var(--line); }
    .news-item {
      display: grid;
      grid-template-columns: 110px 1fr auto;
      gap: 22px;
      align-items: center;
      padding: 20px 4px;
      border-bottom: 1px solid var(--line);
    }
    .news-date { color: var(--coral); font-size: 13px; font-weight: 800; }
    .news-item h3 { margin: 0 0 4px; font-size: 17px; }
    .news-item p { margin: 0; color: var(--muted); font-size: 13px; }
    .news-arrow { color: var(--coral); font-size: 20px; }

    .platform {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center;
    }
    .platform-image {
      min-height: 330px;
      background: url("https://images.unsplash.com/photo-1511988617509-a57c8a288659?auto=format&fit=crop&w=1000&q=85") center/cover;
    }
    .platform-points {
      display: grid;
      gap: 14px;
      margin-top: 22px;
    }
    .platform-point {
      padding: 16px 0;
      border-top: 1px solid var(--line);
    }
    .platform-point strong {
      display: block;
      margin-bottom: 4px;
    }
    .platform-point span { color: var(--muted); font-size: 14px; }

    .quick-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .quick-item {
      padding: 22px;
      border-top: 3px solid var(--coral);
      background: var(--white);
    }
    .quick-item h3 { margin: 0 0 8px; font-size: 18px; }
    .quick-item p { margin: 0; color: var(--muted); font-size: 14px; }

    .faq-list {
      max-width: 860px;
      margin: 0 auto;
      border-top: 1px solid var(--line);
    }
    .faq-item {
      padding: 21px 0;
      border-bottom: 1px solid var(--line);
    }
    .faq-item h3 {
      margin: 0 0 8px;
      color: var(--green-dark);
      font-size: 17px;
    }
    .faq-item p { margin: 0; color: var(--muted); font-size: 14px; }

    .contact-section {
      background: var(--green-dark) !important;
      color: var(--white);
      border-bottom: 0;
    }
    .contact-layout {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 52px;
      align-items: start;
    }
    .contact-section .section-kicker { color: var(--lime); }
    .contact-section h2 { margin-bottom: 14px; }
    .contact-section .section-intro { color: rgba(255,255,255,.7); }
    .contact-form {
      display: grid;
      gap: 13px;
      padding: 28px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
    }
    .contact-form label {
      color: rgba(255,255,255,.82);
      font-size: 13px;
      font-weight: 700;
    }
    .contact-form input,
    .contact-form textarea {
      width: 100%;
      margin-top: 6px;
      padding: 12px 14px;
      color: var(--white);
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 5px;
      resize: vertical;
    }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder { color: rgba(255,255,255,.48); }
    .contact-form textarea { min-height: 100px; }
    .contact-form .button { margin-top: 4px; border: 0; cursor: pointer; }

    .site-footer {
      color: rgba(255,255,255,.7);
      background: #102a21;
    }
    .footer-inner {
      min-height: 92px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .footer-brand {
      color: var(--white);
      font-size: 18px;
      font-weight: 800;
    }
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      font-size: 13px;
    }
    .footer-links a:hover { color: var(--lime); }
    .copyright { font-size: 12px; white-space: nowrap; }

    @media (max-width: 1024px) {
      .nav-note { display: none; }
      .story-grid { grid-template-columns: repeat(2, 1fr); }
      .story-card:first-child { grid-column: span 2; }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .timeline { grid-template-columns: repeat(2, 1fr); }
      .milestone:nth-child(2) { border-right: 0; }
    }

    @media (max-width: 768px) {
      .container { width: min(var(--container), calc(100% - 32px)); }
      .nav { height: auto; min-height: 72px; flex-wrap: wrap; padding: 12px 0; gap: 10px; }
      .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
      }
      .nav-links a { flex: 0 0 auto; }
      .hero { min-height: 570px; }
      .hero-content { padding: 72px 0 78px; }
      main section { padding: 58px 0; }
      .section-heading { display: block; margin-bottom: 26px; }
      .section-heading .text-link { display: inline-block; margin-top: 17px; }
      .channel-layout,
      .platform,
      .contact-layout { grid-template-columns: 1fr; gap: 24px; }
      .story-grid { grid-template-columns: 1fr 1fr; }
      .story-card:first-child { grid-column: span 2; }
      .compare { grid-template-columns: 1fr; }
      .quick-grid { grid-template-columns: 1fr; }
      .contact-form { padding: 22px; }
      .footer-inner { padding: 24px 0; align-items: flex-start; flex-direction: column; }
      .copyright { white-space: normal; }
    }

    @media (max-width: 520px) {
      .brand { font-size: 18px; }
      .brand-mark { width: 34px; height: 34px; }
      .hero h1 { font-size: 43px; }
      .hero-copy { font-size: 15px; }
      .hero-actions { align-items: stretch; flex-direction: column; }
      .hero-actions .button { width: 100%; }
      .stats,
      .channel-list,
      .story-grid,
      .timeline { grid-template-columns: 1fr; }
      .story-card:first-child { grid-column: auto; }
      .milestone { border-right: 0; }
      .news-item { grid-template-columns: 1fr auto; gap: 5px 15px; }
      .news-date { grid-column: 1 / -1; }
      .news-arrow { grid-column: 2; grid-row: 2; }
      .platform-image { min-height: 230px; }
    }