/* roulang page: index */
:root {
      --ink: #222c2a;
      --muted: #687572;
      --subtle: #8a9692;
      --paper: #f7f8f6;
      --white: #ffffff;
      --line: #e3e9e5;
      --green: #28685a;
      --green-dark: #1c4f44;
      --mint: #e9f2ec;
      --coral: #bd654f;
      --coral-pale: #f7ece7;
      --gold: #c49852;
      --radius: 8px;
      --shadow: 0 14px 36px rgba(29, 53, 44, .08);
      --container: 1180px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 88px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    :focus-visible { outline: 3px solid rgba(189, 101, 79, .55); outline-offset: 3px; }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(255,255,255,.94);
      border-bottom: 1px solid rgba(227,233,229,.9);
      backdrop-filter: blur(14px);
    }
    .nav-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; font-weight: 800; line-height: 1.25; }
    .brand-mark {
      width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
      color: #fff; background: var(--green); border-radius: 7px;
      font-family: Georgia, serif; font-size: 19px; font-weight: 700;
    }
    .brand-name { max-width: 295px; font-size: 15px; letter-spacing: 0; }
    .nav-links { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .nav-link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; color: #58635f; font-size: 14px; border-radius: 6px; }
    .nav-link:hover, .nav-link.active { color: var(--green-dark); background: var(--mint); }
    .nav-link.active { font-weight: 700; }
    .nav-side { display: flex; align-items: center; gap: 16px; }
    .location-link {
      display: flex; align-items: center; gap: 8px; color: #53615c;
      padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px;
    }
    .location-link:hover { border-color: #a9c1b4; color: var(--green-dark); background: #fbfdfb; }
    .location-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--coral-pale); }
    .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); color: var(--ink); background: #fff; border-radius: 6px; }
    .hero {
      position: relative; overflow: hidden; min-height: 510px; display: flex; align-items: center;
      color: #fff; background: #304840;
    }
    .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(22,42,36,.86) 0%, rgba(22,42,36,.68) 43%, rgba(22,42,36,.16) 100%); }
    .hero-content { position: relative; z-index: 1; width: 100%; padding-block: 78px 82px; }
    .hero-copy { max-width: 720px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #d3e3d9; font-size: 13px; font-weight: 700; }
    .eyebrow::before { content: ""; width: 24px; height: 1px; background: #d3e3d9; }
    .hero h1 { max-width: 700px; margin: 20px 0 18px; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.23; font-weight: 800; }
    .hero-desc { max-width: 690px; margin: 0; color: rgba(255,255,255,.84); font-size: 16px; line-height: 1.95; }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 27px; }
    .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 19px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
    .button:hover { transform: translateY(-2px); }
    .button-primary { color: #fff; background: var(--coral); box-shadow: 0 8px 20px rgba(91, 43, 30, .2); }
    .button-primary:hover { background: #a95541; box-shadow: 0 10px 24px rgba(91, 43, 30, .28); }
    .button-light { color: var(--green-dark); background: #fff; }
    .button-light:hover { background: #edf5ef; }
    .hero-note { display: flex; align-items: center; gap: 10px; margin-top: 25px; color: rgba(255,255,255,.76); font-size: 12px; }
    .age-mark { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: 10px; font-weight: 700; }
    main { display: block; }
    .section { padding: 76px 0; border-bottom: 1px solid var(--line); }
    .section-white { background: var(--white); }
    .section-green { background: #edf3ee; }
    .section-dark { color: #f5f8f5; background: #263d36; border: 0; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
    .section-kicker { display: block; margin-bottom: 7px; color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
    .section h2 { margin: 0; font-size: 29px; line-height: 1.35; font-weight: 800; }
    .section-intro { max-width: 640px; margin: 12px 0 0; color: var(--muted); line-height: 1.9; }
    .section-dark .section-intro { color: #c8d5ce; }
    .text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 700; font-size: 14px; white-space: nowrap; }
    .text-link:hover { color: var(--coral); gap: 12px; }
    .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .feature-card { min-height: 210px; padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
    .feature-card:hover, .topic-card:hover, .story-card:hover { transform: translateY(-4px); border-color: #c5d8cd; box-shadow: var(--shadow); }
    .number { color: #9caf9f; font-family: Georgia, serif; font-size: 13px; }
    .feature-card h3 { margin: 18px 0 9px; font-size: 18px; line-height: 1.45; }
    .feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
    .split-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
    .editorial-image { width: 100%; height: 340px; object-fit: cover; border-radius: var(--radius); }
    .image-caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--subtle); font-size: 12px; }
    .topic-list { display: grid; gap: 0; margin-top: 22px; border-top: 1px solid var(--line); }
    .topic-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); }
    .topic-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--green); background: var(--mint); border-radius: 6px; font-weight: 700; }
    .topic-row strong { display: block; font-size: 15px; }
    .topic-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
    .topic-count { color: var(--subtle); font-size: 12px; white-space: nowrap; }
    .spec-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
    .spec-table { width: 100%; border-collapse: collapse; }
    .spec-table th, .spec-table td { padding: 17px 21px; text-align: left; border-bottom: 1px solid var(--line); }
    .spec-table th { width: 23%; color: #44534d; background: #f1f5f1; font-size: 13px; font-weight: 700; }
    .spec-table td { color: var(--muted); font-size: 14px; }
    .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
    .case-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
    .case-feature { position: relative; min-height: 330px; overflow: hidden; border-radius: var(--radius); background: #475d51; }
    .case-feature img { width: 100%; height: 100%; min-height: 330px; object-fit: cover; }
    .case-feature::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(21,37,31,.86)); }
    .case-overlay { position: absolute; z-index: 1; right: 25px; bottom: 23px; left: 25px; color: #fff; }
    .case-overlay h3 { margin: 0 0 7px; font-size: 21px; }
    .case-overlay p { max-width: 520px; margin: 0; color: rgba(255,255,255,.8); font-size: 13px; }
    .case-side { display: grid; gap: 18px; }
    .case-note { display: flex; flex-direction: column; justify-content: center; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
    .case-note span { color: var(--coral); font-size: 12px; font-weight: 800; }
    .case-note h3 { margin: 9px 0 8px; font-size: 18px; }
    .case-note p { margin: 0; color: var(--muted); font-size: 13px; }
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 37px; }
    .step { position: relative; padding: 0 22px 0 0; }
    .step:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: 52px; right: 8px; border-top: 1px dashed #a9bbb0; }
    .step-num { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--green); border: 5px solid #edf3ee; border-radius: 50%; font-size: 11px; font-weight: 800; }
    .step h3 { margin: 15px 0 6px; font-size: 15px; }
    .step p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .story-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
    .story-card img { width: 100%; height: 180px; object-fit: cover; }
    .story-body { padding: 19px; }
    .tag { display: inline-flex; padding: 4px 9px; color: var(--green); background: var(--mint); border-radius: 4px; font-size: 11px; font-weight: 700; }
    .story-body h3 { margin: 12px 0 8px; font-size: 17px; line-height: 1.5; }
    .story-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .story-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 12px; color: var(--subtle); border-top: 1px solid var(--line); font-size: 11px; }
    .partner-band { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 27px 30px; border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius); background: rgba(255,255,255,.05); }
    .partner-band h3 { margin: 0; font-size: 17px; }
    .partner-band p { max-width: 630px; margin: 6px 0 0; color: #c8d5ce; font-size: 13px; }
    .partner-badges { display: flex; flex-wrap: wrap; gap: 9px; }
    .partner-badge { padding: 8px 12px; color: #dbe6df; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; font-size: 12px; white-space: nowrap; }
    .trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .trust-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
    .trust-symbol { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--coral); background: var(--coral-pale); border-radius: 50%; font-size: 13px; font-weight: 800; }
    .trust-item h3 { margin: 0 0 5px; font-size: 15px; }
    .trust-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .closing { padding: 54px 0; background: #e7efe9; }
    .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .closing h2 { margin: 0; font-size: 24px; }
    .closing p { max-width: 680px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
    .site-footer { color: #c8d2cc; background: #1f302b; }
    .footer-main { display: grid; grid-template-columns: 1.3fr .7fr; gap: 55px; padding: 44px 0 34px; }
    .footer-brand { color: #fff; }
    .footer-copy { max-width: 610px; margin: 15px 0 0; color: #aebcb4; font-size: 13px; line-height: 1.85; }
    .footer-nav { display: flex; justify-content: flex-end; align-content: start; flex-wrap: wrap; gap: 10px 20px; }
    .footer-nav a { color: #c8d2cc; font-size: 13px; }
    .footer-nav a:hover { color: #fff; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0 22px; color: #899a91; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; }
    .mobile-menu { display: none; }
    @media (max-width: 1024px) {
      .nav-row { gap: 14px; }
      .nav-link { padding-inline: 10px; }
      .location-link { font-size: 12px; }
      .split-layout { gap: 35px; }
      .container { width: min(var(--container), calc(100% - 40px)); }
    }
    @media (max-width: 768px) {
      .nav-row { min-height: 68px; }
      .nav-links, .nav-side { display: none; }
      .menu-toggle { display: grid; place-items: center; }
      .mobile-menu.open { display: grid; gap: 5px; padding: 0 20px 15px; background: #fff; border-top: 1px solid var(--line); }
      .mobile-menu .nav-link { width: 100%; }
      .mobile-menu .location-link { margin-top: 5px; width: fit-content; }
      .hero { min-height: 500px; }
      .hero-content { padding-block: 66px; }
      .hero::after { background: linear-gradient(90deg, rgba(22,42,36,.88), rgba(22,42,36,.53)); }
      .section { padding: 60px 0; }
      .section-head { align-items: flex-start; flex-direction: column; gap: 14px; }
      .feature-grid { grid-template-columns: repeat(2, 1fr); }
      .split-layout { grid-template-columns: 1fr; gap: 27px; }
      .editorial-image { height: 300px; }
      .case-grid { grid-template-columns: 1fr; }
      .case-side { grid-template-columns: repeat(2, 1fr); }
      .steps { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
      .step:nth-child(2)::after { display: none; }
      .editorial-grid { grid-template-columns: repeat(2, 1fr); }
      .partner-band { align-items: flex-start; flex-direction: column; }
      .trust-row { grid-template-columns: repeat(2, 1fr); }
      .closing-inner { align-items: flex-start; flex-direction: column; }
      .footer-main { grid-template-columns: 1fr; gap: 25px; }
      .footer-nav { justify-content: flex-start; }
    }
    @media (max-width: 520px) {
      body { font-size: 14px; }
      .container { width: calc(100% - 36px); }
      .brand-name { max-width: 245px; font-size: 13px; }
      .brand-mark { width: 35px; height: 35px; flex-basis: 35px; }
      .hero { min-height: 525px; }
      .hero-content { padding-block: 52px; }
      .hero h1 { font-size: 34px; }
      .hero-desc { font-size: 14px; line-height: 1.85; }
      .hero-actions { align-items: stretch; flex-direction: column; max-width: 280px; }
      .button { width: 100%; }
      .hero-note { align-items: flex-start; font-size: 11px; }
      .section { padding: 49px 0; }
      .section h2 { font-size: 24px; }
      .feature-grid, .editorial-grid, .trust-row { grid-template-columns: 1fr; }
      .feature-card { min-height: auto; }
      .editorial-image { height: 235px; }
      .topic-row { grid-template-columns: 36px 1fr; }
      .topic-count { grid-column: 2; }
      .spec-wrap { overflow-x: auto; }
      .spec-table { min-width: 530px; }
      .spec-table th, .spec-table td { padding: 13px 15px; }
      .case-feature, .case-feature img { min-height: 270px; }
      .case-side { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; gap: 22px; }
      .step { display: grid; grid-template-columns: 42px 1fr; column-gap: 11px; padding: 0; }
      .step:not(:last-child)::after { top: 35px; left: 18px; right: auto; height: calc(100% + 15px); border-top: 0; border-left: 1px dashed #a9bbb0; }
      .step-num { grid-row: span 2; }
      .step h3 { margin: 3px 0 4px; }
      .partner-band { padding: 22px; }
      .footer-bottom { flex-direction: column; gap: 6px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

/* roulang page: category1 */
:root {
      --ink: #222c2a;
      --muted: #687572;
      --subtle: #8a9692;
      --paper: #f7f8f6;
      --white: #fff;
      --line: #e3e9e5;
      --green: #28685a;
      --green-dark: #1c4f44;
      --mint: #e9f2ec;
      --coral: #bd654f;
      --coral-pale: #f7ece7;
      --gold: #c49852;
      --radius: 8px;
      --shadow: 0 14px 36px rgba(29, 53, 44, .08);
      --container: 1180px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 88px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(227,233,229,.9); backdrop-filter: blur(14px); }
    .nav-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; font-weight: 800; line-height: 1.25; }
    .brand-mark { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 7px; font-family: Georgia,serif; font-size: 19px; font-weight: 700; }
    .brand-name { max-width: 295px; font-size: 15px; }
    .nav-links { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .nav-link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; color: #58635f; font-size: 14px; border-radius: 6px; }
    .nav-link:hover, .nav-link.active { color: var(--green-dark); background: var(--mint); }
    .nav-link.active { font-weight: 700; }
    .nav-side { display: flex; align-items: center; gap: 16px; }
    .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); color: var(--ink); background: #fff; border-radius: 6px; }
    .menu-toggle:hover, .menu-toggle:focus-visible { border-color: var(--green); outline: 3px solid rgba(40,104,90,.15); }
    .section { padding: 70px 0; border-bottom: 1px solid var(--line); }
    .section-white { background: var(--white); }
    .section-green { background: #edf3ee; }
    .section-dark { color: #f5f8f5; background: #263d36; border: 0; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
    .section-kicker { display: block; margin-bottom: 7px; color: var(--coral); font-size: 12px; font-weight: 800; }
    .section h2 { margin: 0; font-size: 29px; line-height: 1.35; font-weight: 800; }
    .section-intro { max-width: 680px; margin: 12px 0 0; color: var(--muted); line-height: 1.9; }
    .section-dark .section-intro { color: #c8d5ce; }
    .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 19px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
    .button:hover { transform: translateY(-2px); }
    .button:focus-visible, .text-link:focus-visible, .footer-nav a:focus-visible { outline: 3px solid rgba(40,104,90,.3); outline-offset: 3px; }
    .button-primary { color: #fff; background: var(--coral); box-shadow: 0 8px 20px rgba(91,43,30,.2); }
    .button-primary:hover { background: #a95541; box-shadow: 0 10px 24px rgba(91,43,30,.28); }
    .button-light { color: var(--green-dark); background: #fff; }
    .button-light:hover { background: #edf5ef; }
    .text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 700; font-size: 14px; white-space: nowrap; }
    .text-link:hover { color: var(--coral); gap: 12px; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #d3e3d9; font-size: 13px; font-weight: 700; }
    .eyebrow::before { content: ""; width: 24px; height: 1px; background: #d3e3d9; }
    .hero { position: relative; overflow: hidden; min-height: 380px; display: flex; align-items: center; color: #fff; background: #304840; }
    .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(22,42,36,.88) 0%, rgba(22,42,36,.68) 52%, rgba(22,42,36,.18) 100%); }
    .hero-content { position: relative; z-index: 1; width: 100%; padding-block: 62px; }
    .hero-copy { max-width: 720px; }
    .hero h1 { max-width: 700px; margin: 18px 0 14px; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.24; font-weight: 800; }
    .hero-desc { max-width: 690px; margin: 0; color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.95; }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 23px; }
    .hero-note { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: rgba(255,255,255,.78); font-size: 12px; }
    .hero-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e4c17c; }
    .topic-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr); gap: 48px; align-items: start; }
    .topic-lead { max-width: 720px; }
    .topic-lead p { margin: 0 0 18px; color: var(--muted); line-height: 2; }
    .topic-lead p:last-child { margin-bottom: 0; }
    .topic-aside { padding: 25px 26px; background: var(--mint); border-left: 3px solid var(--green); }
    .topic-aside strong { display: block; margin-bottom: 8px; font-size: 17px; }
    .topic-aside p { margin: 0; color: #52635c; font-size: 14px; line-height: 1.9; }
    .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
    .feature-card { min-height: 190px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
    .feature-card:hover, .topic-card:hover, .story-card:hover { transform: translateY(-4px); border-color: #c5d8cd; box-shadow: var(--shadow); }
    .feature-number { display: inline-grid; place-items: center; width: 35px; height: 35px; color: var(--green-dark); background: var(--mint); border-radius: 6px; font-weight: 800; }
    .feature-card h3 { margin: 17px 0 8px; font-size: 18px; line-height: 1.45; }
    .feature-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
    .topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
    .topic-card { min-height: 176px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
    .topic-card:nth-child(2n) { background: #f8faf8; }
    .topic-tag { display: inline-flex; padding: 4px 9px; color: var(--coral); background: var(--coral-pale); border-radius: 4px; font-size: 11px; font-weight: 800; }
    .topic-card h3 { margin: 13px 0 7px; font-size: 17px; line-height: 1.45; }
    .topic-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .story-list { border-top: 1px solid var(--line); }
    .story-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
    .story-index { color: var(--coral); font-size: 13px; font-weight: 800; }
    .story-row h3 { margin: 0; font-size: 17px; line-height: 1.5; }
    .story-row p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
    .story-meta { color: var(--subtle); font-size: 12px; white-space: nowrap; }
    .quote-band { display: grid; grid-template-columns: .8fr 1.2fr; gap: 42px; align-items: center; }
    .quote-stat { padding: 26px 28px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
    .quote-stat strong { display: block; color: #f0d29b; font-size: 24px; line-height: 1.3; }
    .quote-stat span { display: block; margin-top: 8px; color: #cfdbd4; font-size: 13px; }
    .quote-copy { margin: 0; color: #f3f6f3; font-size: 21px; line-height: 1.8; }
    .quote-copy small { display: block; margin-top: 12px; color: #b9c9c0; font-size: 13px; }
    .comparison { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
    .comparison-col { padding: 25px 28px; background: #fff; }
    .comparison-col + .comparison-col { background: #edf3ee; border-left: 1px solid var(--line); }
    .comparison-col h3 { margin: 0 0 15px; font-size: 17px; }
    .check-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
    .check-list li { display: flex; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.7; }
    .check-list li::before { content: "✓"; color: var(--green); font-weight: 800; }
    .article-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 30px; align-items: start; }
    .article-feature { min-height: 275px; padding: 30px; color: #fff; background: #40594d; display: flex; flex-direction: column; justify-content: end; position: relative; overflow: hidden; }
    .article-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .article-feature::after { content: ""; position: absolute; inset: 25% 0 0; background: linear-gradient(0deg, rgba(21,39,32,.9), transparent); }
    .article-feature > div { position: relative; z-index: 1; }
    .article-feature h3 { max-width: 520px; margin: 12px 0 7px; font-size: 22px; line-height: 1.45; }
    .article-feature p { max-width: 560px; margin: 0; color: rgba(255,255,255,.82); font-size: 13px; }
    .article-side { display: grid; gap: 0; }
    .article-item { padding: 17px 0; border-bottom: 1px solid var(--line); }
    .article-item:first-child { padding-top: 0; }
    .article-item span { color: var(--coral); font-size: 11px; font-weight: 800; }
    .article-item h3 { margin: 5px 0; font-size: 16px; line-height: 1.5; }
    .article-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
    .principle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.2); }
    .principle { padding: 22px 24px 0 0; }
    .principle + .principle { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.2); }
    .principle strong { display: block; margin-bottom: 7px; color: #f0d29b; font-size: 15px; }
    .principle p { margin: 0; color: #d0dbd5; font-size: 13px; line-height: 1.8; }
    .cta-band { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px; background: var(--coral-pale); border-left: 4px solid var(--coral); }
    .cta-band h2 { margin: 0; font-size: 23px; line-height: 1.4; }
    .cta-band p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
    .site-footer { color: #e8eee9; background: #20352f; }
    .footer-main { display: grid; grid-template-columns: 1fr auto; gap: 40px; padding: 48px 0 36px; }
    .footer-brand { color: #fff; }
    .footer-brand .brand-mark { background: var(--coral); }
    .footer-copy { max-width: 600px; margin: 17px 0 0; color: #c0cdc5; font-size: 13px; line-height: 1.9; }
    .footer-nav { display: flex; flex-wrap: wrap; align-content: start; gap: 12px 22px; }
    .footer-nav a { color: #d6e0d9; font-size: 13px; }
    .footer-nav a:hover { color: #f0d29b; }
    .footer-bottom { min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid rgba(255,255,255,.14); color: #aebdb4; font-size: 12px; }
    .age-note { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
    .age-note::before { content: "18+"; display: grid; place-items: center; width: 29px; height: 23px; color: #f1d49e; border: 1px solid rgba(241,212,158,.5); border-radius: 4px; font-size: 10px; font-weight: 800; }
    @media (max-width: 1024px) {
      .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .topic-layout { gap: 30px; }
    }
    @media (max-width: 768px) {
      .container { width: min(var(--container), calc(100% - 36px)); }
      .nav-row { min-height: 68px; gap: 12px; }
      .brand-name { max-width: 225px; font-size: 13px; }
      .menu-toggle { display: inline-grid; place-items: center; flex: 0 0 42px; }
      .nav-side { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; padding: 10px 18px 16px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 14px 24px rgba(29,53,44,.08); }
      .nav-side.is-open { display: block; }
      .nav-links { display: grid; gap: 4px; }
      .nav-link { width: 100%; }
      .hero { min-height: 360px; }
      .hero-content { padding-block: 50px; }
      .hero-desc { font-size: 15px; }
      .section { padding: 56px 0; }
      .section-head { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 25px; }
      .section h2 { font-size: 25px; }
      .topic-layout, .article-grid { grid-template-columns: 1fr; }
      .topic-aside { max-width: none; }
      .feature-grid { grid-template-columns: 1fr; }
      .feature-card { min-height: 0; }
      .quote-band { grid-template-columns: 1fr; gap: 24px; }
      .principle-grid { grid-template-columns: 1fr; }
      .principle, .principle + .principle { padding: 17px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
      .footer-main { grid-template-columns: 1fr; gap: 25px; }
      .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding: 15px 0; }
    }
    @media (max-width: 520px) {
      .container { width: calc(100% - 32px); }
      .brand { gap: 8px; }
      .brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
      .brand-name { max-width: 205px; font-size: 12px; }
      .hero { min-height: 410px; }
      .hero h1 { font-size: 34px; }
      .hero-actions { align-items: stretch; flex-direction: column; max-width: 260px; }
      .hero-actions .button { width: 100%; }
      .topic-grid { grid-template-columns: 1fr; }
      .story-row { grid-template-columns: 36px minmax(0,1fr); gap: 12px; }
      .story-meta { grid-column: 2; white-space: normal; }
      .comparison { grid-template-columns: 1fr; }
      .comparison-col + .comparison-col { border-left: 0; border-top: 1px solid var(--line); }
      .cta-band { align-items: stretch; flex-direction: column; padding: 24px; }
      .cta-band .button { width: 100%; }
      .footer-nav { gap: 12px 16px; }
      .footer-copy { font-size: 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }