/* roulang page: index */
:root {
      --ink: #1b1d1c;
      --ink-soft: #303533;
      --paper: #f4f0e8;
      --paper-deep: #e9e3d7;
      --white: #fffdf8;
      --orange: #c86531;
      --orange-dark: #9f4823;
      --orange-light: #f1c3a2;
      --green: #879d82;
      --green-dark: #516956;
      --line: #d6cec1;
      --muted: #72766f;
      --shadow: 0 18px 50px rgba(44, 39, 31, .11);
      --shadow-soft: 0 8px 22px rgba(44, 39, 31, .08);
      --radius-lg: 16px;
      --radius-md: 10px;
      --radius-sm: 6px;
      --container: 1220px;
      --ease: 180ms ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      font-size: 16px;
      line-height: 1.85;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, p {
      margin-top: 0;
    }

    h1, h2, h3, h4 {
      color: var(--ink);
      line-height: 1.25;
      font-weight: 800;
      letter-spacing: 0;
    }

    h1 {
      font-size: clamp(2.6rem, 5vw, 4.7rem);
      max-width: 760px;
      margin-bottom: 22px;
    }

    h2 {
      font-size: clamp(1.9rem, 3.4vw, 3rem);
      margin-bottom: 15px;
    }

    h3 {
      font-size: 1.3rem;
      margin-bottom: 10px;
    }

    p {
      color: var(--muted);
      margin-bottom: 18px;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
    }

    a:hover {
      color: var(--orange-dark);
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    button,
    .button {
      cursor: pointer;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible {
      outline: 3px solid rgba(200, 101, 49, .42);
      outline-offset: 3px;
    }

    .container {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }

    .topbar {
      background: var(--ink);
      color: #e9e5da;
      min-height: 34px;
      display: flex;
      align-items: center;
      font-size: .78rem;
      letter-spacing: .02em;
    }

    .topbar-inner {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .topbar-status {
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      background: var(--orange-light);
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(241, 195, 162, .13);
    }

    .topbar-action {
      color: #fff8ee;
      border-bottom: 1px solid rgba(255, 248, 238, .48);
      white-space: nowrap;
    }

    .site-header {
      background: rgba(244, 240, 232, .96);
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(8px);
    }

    .nav-shell {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      flex-shrink: 0;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      border: 2px solid var(--orange);
      border-radius: 50%;
      position: relative;
      display: grid;
      place-items: center;
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      background: var(--orange);
    }

    .brand-mark::before {
      width: 14px;
      height: 2px;
    }

    .brand-mark::after {
      width: 2px;
      height: 14px;
    }

    .brand-name {
      font-size: 1.16rem;
      color: var(--ink);
      font-weight: 850;
      letter-spacing: .02em;
    }

    .brand-sub {
      display: block;
      font-size: .65rem;
      color: var(--muted);
      line-height: 1.2;
      margin-top: 2px;
      letter-spacing: .08em;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-link {
      padding: 10px 12px;
      color: var(--ink-soft);
      border-bottom: 2px solid transparent;
      font-size: .92rem;
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--orange-dark);
      border-bottom-color: var(--orange);
    }

    .nav-menu {
      display: none;
      width: 44px;
      height: 42px;
      border: 1px solid var(--line);
      color: var(--ink);
      background: var(--white);
      border-radius: var(--radius-sm);
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
    }

    .mobile-nav {
      display: none;
      padding: 8px 0 20px;
      border-top: 1px solid var(--line);
    }

    .mobile-nav.open {
      display: block;
    }

    .mobile-nav a {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
    }

    .hero {
      min-height: 690px;
      position: relative;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--ink);
      color: var(--white);
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(22, 24, 23, .96) 0%, rgba(22, 24, 23, .78) 44%, rgba(22, 24, 23, .34) 100%),
        url("/assets/images/backpic/back-1.webp") center / cover no-repeat;
      z-index: -2;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 54px 54px;
      opacity: .32;
      z-index: -1;
      pointer-events: none;
    }

    .hero-inner {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
      padding: 84px 0 72px;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 7px 13px;
      border: 1px solid rgba(241, 195, 162, .5);
      color: var(--orange-light);
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .hero h1 {
      color: var(--white);
    }

    .hero-intro {
      color: #e4e0d7;
      max-width: 690px;
      font-size: 1.05rem;
      line-height: 1.95;
      margin-bottom: 28px;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 35px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 10px 20px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      font-weight: 800;
      font-size: .92rem;
      transition: all var(--ease);
    }

    .button.primary {
      background: var(--orange);
      color: #fffaf4;
      box-shadow: 0 8px 18px rgba(200, 101, 49, .2);
    }

    .button.primary:hover {
      background: #db7740;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 12px 22px rgba(200, 101, 49, .29);
    }

    .button.primary:active {
      transform: translateY(0);
    }

    .button.secondary {
      background: transparent;
      color: #fff8ee;
      border-color: rgba(255, 248, 238, .5);
    }

    .button.secondary:hover {
      border-color: var(--orange-light);
      color: var(--orange-light);
      background: rgba(255, 255, 255, .06);
    }

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 15px 24px;
      color: #d5d2c9;
      font-size: .87rem;
    }

    .hero-point {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .hero-point strong {
      color: var(--orange-light);
      font-size: 1.14rem;
    }

    .hero-rail {
      display: grid;
      grid-template-columns: repeat(3, minmax(130px, 1fr));
      gap: 1px;
      max-width: 760px;
      margin-top: 62px;
      border-top: 1px solid rgba(255,255,255,.24);
      border-bottom: 1px solid rgba(255,255,255,.24);
    }

    .hero-rail-item {
      padding: 18px 20px 17px 0;
      min-height: 88px;
      border-right: 1px solid rgba(255,255,255,.18);
    }

    .hero-rail-item:last-child {
      border-right: 0;
      padding-left: 20px;
    }

    .hero-rail-item:nth-child(2) {
      padding-left: 20px;
    }

    .hero-rail-label {
      color: #aaa99f;
      font-size: .75rem;
      display: block;
      margin-bottom: 3px;
    }

    .hero-rail-value {
      color: #fffaf1;
      font-weight: 750;
    }

    .scroll-hint {
      position: absolute;
      bottom: 22px;
      right: max(20px, calc((100vw - var(--container)) / 2));
      writing-mode: vertical-rl;
      color: #bcb9b0;
      font-size: .7rem;
      letter-spacing: .12em;
    }

    .section {
      padding: 96px 0;
    }

    .section.compact {
      padding: 76px 0;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 26px;
      margin-bottom: 40px;
    }

    .eyebrow {
      color: var(--orange-dark);
      font-weight: 850;
      letter-spacing: .08em;
      font-size: .75rem;
      display: block;
      margin-bottom: 10px;
    }

    .section-head p {
      max-width: 610px;
      margin-bottom: 2px;
    }

    .section-index {
      color: var(--green-dark);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .1em;
      white-space: nowrap;
    }

    .flash-section {
      background: var(--white);
    }

    .flash-layout {
      display: grid;
      grid-template-columns: 1.16fr .84fr;
      gap: 24px;
      align-items: stretch;
    }

    .feature-card {
      min-height: 400px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
      background: var(--ink);
      color: var(--white);
      display: flex;
      align-items: end;
      box-shadow: var(--shadow);
    }

    .feature-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(20, 22, 21, .96), rgba(20,22,21,.08) 75%), url("/assets/images/coverpic/cover-2.webp") center / cover no-repeat;
    }

    .feature-content {
      position: relative;
      padding: 34px;
      z-index: 1;
    }

    .feature-content h3 {
      color: var(--white);
      font-size: 1.8rem;
      max-width: 470px;
    }

    .feature-content p {
      color: #dad6cc;
      max-width: 540px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      border: 1px solid currentColor;
      border-radius: 3px;
      padding: 2px 8px;
      font-size: .7rem;
      line-height: 1.6;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .tag.orange {
      color: var(--orange-light);
    }

    .tag.green {
      color: var(--green-dark);
      border-color: #a5b5a0;
      background: #eef2e9;
    }

    .feature-meta {
      display: flex;
      gap: 16px;
      margin: 18px 0;
      color: #c6c3ba;
      font-size: .78rem;
      flex-wrap: wrap;
    }

    .support-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    .support-card {
      border: 1px solid var(--line);
      padding: 24px;
      background: var(--paper);
      border-radius: var(--radius-md);
      min-height: 192px;
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }

    .support-card:hover {
      transform: translateY(-4px);
      border-color: var(--orange-light);
      box-shadow: var(--shadow-soft);
    }

    .support-number {
      color: var(--orange-dark);
      font-weight: 900;
      font-size: .77rem;
      letter-spacing: .1em;
      display: block;
      margin-bottom: 18px;
    }

    .support-card h3 {
      font-size: 1.1rem;
    }

    .support-card p {
      font-size: .88rem;
      line-height: 1.7;
      margin-bottom: 0;
    }

    .notice-band {
      background: var(--paper-deep);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .notice-layout {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 60px;
      align-items: center;
    }

    .notice-copy p {
      max-width: 480px;
    }

    .stock-panel {
      background: var(--ink);
      color: var(--white);
      border-radius: var(--radius-md);
      padding: 28px 30px;
      box-shadow: var(--shadow-soft);
    }

    .stock-top,
    .stock-bottom {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      align-items: center;
    }

    .stock-top {
      border-bottom: 1px solid rgba(255,255,255,.15);
      padding-bottom: 18px;
      margin-bottom: 24px;
    }

    .stock-title {
      color: #f8f1e8;
      font-weight: 800;
    }

    .stock-state {
      color: var(--orange-light);
      font-size: .8rem;
      white-space: nowrap;
    }

    .stock-meter {
      height: 9px;
      background: #444944;
      border-radius: 12px;
      overflow: hidden;
      margin: 14px 0 11px;
    }

    .stock-meter span {
      display: block;
      width: 72%;
      height: 100%;
      background: var(--orange);
    }

    .stock-panel p,
    .stock-bottom {
      color: #c9c7bd;
      font-size: .86rem;
      margin-bottom: 0;
    }

    .stock-bottom strong {
      color: #fffaf2;
      font-size: 1.2rem;
    }

    .metrics {
      background: var(--ink-soft);
      color: var(--white);
    }

    .metrics .eyebrow,
    .metrics h2 {
      color: var(--white);
    }

    .metrics .section-head p {
      color: #c9cbc4;
    }

    .metric-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid rgba(255,255,255,.18);
      border-bottom: 1px solid rgba(255,255,255,.18);
    }

    .metric {
      padding: 26px 28px;
      border-right: 1px solid rgba(255,255,255,.18);
    }

    .metric:last-child {
      border-right: 0;
    }

    .metric-number {
      display: block;
      color: var(--orange-light);
      font-size: 2.25rem;
      font-weight: 850;
      line-height: 1.15;
      margin-bottom: 8px;
    }

    .metric-label {
      color: #f4eee4;
      font-weight: 750;
      display: block;
      margin-bottom: 7px;
    }

    .metric p {
      color: #bdc1b9;
      font-size: .82rem;
      line-height: 1.7;
      margin-bottom: 0;
    }

    .news-section {
      background: var(--paper);
    }

    .news-layout {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 48px;
    }

    .news-list {
      border-top: 1px solid var(--line);
    }

    .news-item {
      display: grid;
      grid-template-columns: 108px 1fr auto;
      gap: 22px;
      align-items: center;
      padding: 23px 0;
      border-bottom: 1px solid var(--line);
    }

    .news-date {
      color: var(--orange-dark);
      font-size: .78rem;
      font-weight: 850;
      letter-spacing: .05em;
    }

    .news-item h3 {
      font-size: 1.1rem;
      margin-bottom: 4px;
    }

    .news-item p {
      margin: 0;
      font-size: .88rem;
      line-height: 1.65;
    }

    .news-arrow {
      color: var(--orange);
      font-size: 1.2rem;
    }

    .recommendation {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      overflow: hidden;
    }

    .recommendation img {
      aspect-ratio: 1.7 / 1;
      width: 100%;
      object-fit: cover;
    }

    .recommendation-body {
      padding: 24px;
    }

    .recommendation-body h3 {
      margin-top: 12px;
    }

    .recommendation-body p {
      font-size: .9rem;
      line-height: 1.75;
    }

    .text-link {
      color: var(--orange-dark);
      font-weight: 800;
      font-size: .88rem;
    }

    .brand-story {
      background: var(--white);
    }

    .story-layout {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 72px;
      align-items: start;
    }

    .story-title {
      position: sticky;
      top: 120px;
    }

    .story-title h2 {
      max-width: 360px;
    }

    .story-copy {
      max-width: 700px;
    }

    .story-copy p {
      font-size: 1rem;
      line-height: 2;
      color: #555b54;
    }

    .story-note {
      border-left: 3px solid var(--orange);
      padding: 8px 0 8px 22px;
      margin: 28px 0;
      color: var(--ink-soft);
      font-weight: 700;
      font-size: 1.05rem;
    }

    .case-section {
      background: var(--paper-deep);
    }

    .case-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .case-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: transform var(--ease), box-shadow var(--ease);
    }

    .case-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-soft);
    }

    .case-card img {
      width: 100%;
      aspect-ratio: 1.55 / 1;
      object-fit: cover;
    }

    .case-body {
      padding: 23px 24px 25px;
    }

    .case-body h3 {
      margin-top: 13px;
      font-size: 1.2rem;
    }

    .case-body p {
      font-size: .88rem;
      line-height: 1.75;
      margin-bottom: 17px;
    }

    .case-fields {
      border-top: 1px solid var(--line);
      padding-top: 14px;
      display: grid;
      gap: 9px;
      font-size: .82rem;
    }

    .case-field {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 9px;
    }

    .case-field b {
      color: var(--orange-dark);
    }

    .case-field span {
      color: var(--muted);
    }

    .plans {
      background: var(--white);
    }

    .plan-layout {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 60px;
    }

    .plan-intro p {
      max-width: 390px;
    }

    .plan-list {
      border-top: 1px solid var(--line);
    }

    .plan-item {
      display: grid;
      grid-template-columns: 70px 1fr auto;
      gap: 22px;
      align-items: start;
      border-bottom: 1px solid var(--line);
      padding: 23px 0;
    }

    .plan-index {
      color: var(--orange);
      font-size: 1.6rem;
      font-weight: 900;
      line-height: 1.2;
    }

    .plan-item h3 {
      margin-bottom: 5px;
    }

    .plan-item p {
      font-size: .88rem;
      line-height: 1.7;
      margin-bottom: 0;
    }

    .plan-state {
      color: var(--green-dark);
      background: #edf1e9;
      border: 1px solid #c3d0be;
      border-radius: 3px;
      padding: 2px 8px;
      font-size: .72rem;
      white-space: nowrap;
      font-weight: 800;
    }

    .calendar-section {
      background: var(--paper);
      border-top: 1px solid var(--line);
    }

    .calendar-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .calendar-card {
      border: 1px solid var(--line);
      background: var(--paper-deep);
      border-radius: var(--radius-md);
      padding: 27px;
    }

    .calendar-card h3 {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 16px;
      margin-bottom: 4px;
    }

    .calendar-card h3 span {
      color: var(--orange-dark);
      font-size: .75rem;
      font-weight: 700;
    }

    .calendar-line {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 18px;
      padding: 15px 0;
      border-bottom: 1px solid rgba(214, 206, 193, .8);
    }

    .calendar-line:last-child {
      border-bottom: 0;
    }

    .calendar-line time {
      color: var(--orange-dark);
      font-weight: 850;
      font-size: .82rem;
    }

    .calendar-line p {
      color: var(--ink-soft);
      font-size: .88rem;
      line-height: 1.65;
      margin: 0;
    }

    .faq-section {
      background: var(--paper-deep);
    }

    .faq-layout {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 64px;
    }

    .faq-intro p {
      max-width: 370px;
    }

    .accordion {
      margin: 0;
      background: transparent;
      border: 0;
    }

    .accordion-item {
      border-top: 1px solid var(--line);
      background: transparent;
    }

    .accordion-item:last-child {
      border-bottom: 1px solid var(--line);
    }

    .accordion-title {
      color: var(--ink);
      font-weight: 800;
      font-size: 1rem;
      padding: 20px 38px 20px 0;
      border: 0;
      background: transparent;
    }

    .accordion-title:hover {
      color: var(--orange-dark);
      background: transparent;
    }

    .accordion-title::before {
      right: 8px;
      color: var(--orange);
    }

    .accordion-content {
      border: 0;
      background: transparent;
      padding: 0 38px 21px 0;
    }

    .accordion-content p {
      font-size: .92rem;
      line-height: 1.85;
      margin-bottom: 0;
      color: #5b6059;
    }

    .contact-section {
      background: var(--ink);
      color: var(--white);
      padding: 86px 0;
    }

    .contact-layout {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 70px;
      align-items: start;
    }

    .contact-section h2,
    .contact-section h3 {
      color: var(--white);
    }

    .contact-section .eyebrow {
      color: var(--orange-light);
    }

    .contact-section p {
      color: #c7c9c1;
    }

    .contact-note {
      color: #f3eee3;
      border-left: 3px solid var(--orange);
      padding-left: 18px;
      margin-top: 28px;
    }

    .contact-form {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 32px;
      color: var(--ink);
      box-shadow: var(--shadow);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-field {
      margin-bottom: 18px;
    }

    .form-field label {
      color: var(--ink);
      display: block;
      font-weight: 800;
      font-size: .86rem;
      margin-bottom: 7px;
    }

    .required {
      color: var(--orange-dark);
      margin-left: 3px;
    }

    .form-field input,
    .form-field textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: #fffefa;
      border-radius: var(--radius-sm);
      padding: 11px 13px;
      color: var(--ink);
      box-shadow: none;
      transition: border-color var(--ease), box-shadow var(--ease);
    }

    .form-field textarea {
      min-height: 124px;
      resize: vertical;
    }

    .form-field input:hover,
    .form-field textarea:hover {
      border-color: #b5aa9b;
    }

    .form-field input:focus,
    .form-field textarea:focus {
      border-color: var(--orange);
      box-shadow: 0 0 0 3px rgba(200, 101, 49, .13);
      outline: 0;
    }

    .field-error {
      display: none;
      color: #a53d2c;
      font-size: .78rem;
      margin-top: 5px;
    }

    .form-field.invalid input,
    .form-field.invalid textarea {
      border-color: #a53d2c;
    }

    .form-field.invalid .field-error {
      display: block;
    }

    .privacy-note {
      color: var(--muted);
      font-size: .76rem;
      line-height: 1.65;
      margin: 14px 0 18px;
    }

    .form-feedback {
      display: none;
      padding: 11px 13px;
      border-radius: var(--radius-sm);
      background: #edf1e9;
      border: 1px solid #c3d0be;
      color: var(--green-dark);
      font-size: .86rem;
      margin-top: 15px;
    }

    .form-feedback.show {
      display: block;
    }

    .site-footer {
      background: #121514;
      color: #ddd9cf;
      padding: 55px 0 26px;
    }

    .footer-main {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 48px;
      padding-bottom: 38px;
      border-bottom: 1px solid rgba(255,255,255,.16);
    }

    .footer-brand .brand-name {
      color: #fffaf2;
    }

    .footer-brand .brand-sub {
      color: #9fa39c;
    }

    .footer-brand p {
      color: #aaa89f;
      max-width: 340px;
      font-size: .87rem;
      line-height: 1.8;
      margin-top: 20px;
    }

    .footer-heading {
      color: var(--orange-light);
      font-size: .82rem;
      font-weight: 850;
      letter-spacing: .06em;
      margin-bottom: 15px;
    }

    .footer-links {
      display: grid;
      gap: 7px;
      font-size: .86rem;
    }

    .footer-links a {
      color: #c5c3ba;
    }

    .footer-links a:hover {
      color: #fff6e9;
      padding-left: 4px;
    }

    .footer-bottom {
      padding-top: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      color: #949991;
      font-size: .76rem;
      flex-wrap: wrap;
    }

    .footer-records {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
    }

    .back-top {
      border: 1px solid rgba(255,255,255,.25);
      border-radius: var(--radius-sm);
      padding: 7px 12px;
      color: #e4dfd4;
    }

    .back-top:hover {
      color: var(--orange-light);
      border-color: var(--orange-light);
    }

    @media screen and (max-width: 1023px) {
      .desktop-nav {
        gap: 0;
      }

      .nav-link {
        padding-left: 8px;
        padding-right: 8px;
        font-size: .84rem;
      }

      .hero {
        min-height: 630px;
      }

      .flash-layout,
      .news-layout,
      .plan-layout,
      .faq-layout {
        gap: 32px;
      }

      .metric {
        padding-left: 18px;
        padding-right: 18px;
      }
    }

    @media screen and (max-width: 767px) {
      .container,
      .topbar-inner,
      .hero-inner {
        width: min(100% - 30px, var(--container));
      }

      .topbar-inner {
        overflow: hidden;
      }

      .topbar-status {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .topbar-action {
        display: none;
      }

      .nav-shell {
        min-height: 70px;
      }

      .desktop-nav {
        display: none;
      }

      .nav-menu {
        display: inline-flex;
      }

      .hero {
        min-height: auto;
      }

      .hero-inner {
        padding: 64px 0 74px;
      }

      h1 {
        font-size: clamp(2.35rem, 11vw, 3.6rem);
      }

      .hero-intro {
        font-size: .98rem;
      }

      .hero-rail {
        grid-template-columns: 1fr;
        margin-top: 45px;
      }

      .hero-rail-item,
      .hero-rail-item:nth-child(2),
      .hero-rail-item:last-child {
        padding: 15px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
      }

      .hero-rail-item:last-child {
        border-bottom: 0;
      }

      .scroll-hint {
        display: none;
      }

      .section,
      .section.compact {
        padding: 64px 0;
      }

      .section-head {
        display: block;
        margin-bottom: 28px;
      }

      .section-index {
        display: block;
        margin-top: 15px;
      }

      .flash-layout,
      .notice-layout,
      .news-layout,
      .story-layout,
      .plan-layout,
      .calendar-layout,
      .faq-layout,
      .contact-layout {
        grid-template-columns: 1fr;
      }

      .feature-card {
        min-height: 390px;
      }

      .support-grid {
        grid-template-columns: 1fr 1fr;
      }

      .notice-layout,
      .contact-layout {
        gap: 30px;
      }

      .metric-row {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
        overflow-x: auto;
      }

      .metric {
        min-width: 150px;
      }

      .news-item {
        grid-template-columns: 78px 1fr auto;
        gap: 12px;
      }

      .story-title {
        position: static;
      }

      .case-grid {
        grid-template-columns: 1fr;
      }

      .plan-item {
        grid-template-columns: 48px 1fr;
        gap: 14px;
      }

      .plan-state {
        grid-column: 2;
        justify-self: start;
        margin-top: -5px;
      }

      .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }

      .footer-brand {
        grid-column: 1 / -1;
      }

      .form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }

    @media screen and (max-width: 519px) {
      .brand-sub {
        display: none;
      }

      .hero-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .hero-actions .button {
        width: 100%;
      }

      .support-grid {
        grid-template-columns: 1fr;
      }

      .feature-content {
        padding: 25px;
      }

      .stock-panel,
      .contact-form {
        padding: 23px 20px;
      }

      .news-item {
        grid-template-columns: 1fr auto;
      }

      .news-date {
        grid-column: 1 / -1;
      }

      .news-item p {
        font-size: .84rem;
      }

      .calendar-line {
        grid-template-columns: 60px 1fr;
        gap: 12px;
      }

      .footer-main {
        grid-template-columns: 1fr;
      }

      .footer-brand {
        grid-column: auto;
      }

      .footer-bottom {
        display: block;
      }

      .footer-records {
        display: grid;
        gap: 6px;
        margin-bottom: 16px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }

/* roulang page: category1 */
:root {
      --ink:#1b1d1c; --ink-soft:#303533; --paper:#f4f0e8; --paper-deep:#e9e3d7;
      --white:#fffdf8; --orange:#c86531; --orange-dark:#9f4823; --orange-light:#f1c3a2;
      --green:#879d82; --green-dark:#516956; --line:#d6cec1; --muted:#72766f;
      --shadow:0 18px 50px rgba(44,39,31,.11); --shadow-soft:0 8px 22px rgba(44,39,31,.08);
      --radius-lg:16px; --radius-md:10px; --radius-sm:6px; --container:1220px; --ease:180ms ease;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif; font-size:16px; line-height:1.85; -webkit-font-smoothing:antialiased; }
    h1,h2,h3,h4,p,ul,ol { margin-top:0; }
    h1,h2,h3,h4 { color:var(--ink); line-height:1.28; font-weight:850; letter-spacing:-.025em; }
    h1 { font-size:clamp(2.35rem,5vw,4.35rem); margin-bottom:20px; }
    h2 { font-size:clamp(1.8rem,3.4vw,2.8rem); margin-bottom:16px; }
    h3 { font-size:1.28rem; margin-bottom:10px; }
    a { color:inherit; text-decoration:none; transition:color var(--ease),background-color var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease); }
    a:hover { color:var(--orange-dark); }
    img { display:block; max-width:100%; height:auto; }
    button,input,textarea { font:inherit; }
    button,.button { cursor:pointer; }
    button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid rgba(200,101,49,.42); outline-offset:3px; }
    .container { width:min(calc(100% - 40px),var(--container)); margin:0 auto; }
    .topbar { min-height:34px; display:flex; align-items:center; background:var(--ink); color:#e9e5da; font-size:.78rem; letter-spacing:.02em; }
    .topbar-inner { width:min(calc(100% - 40px),var(--container)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
    .topbar-status { display:flex; align-items:center; gap:9px; white-space:nowrap; }
    .status-dot { width:7px; height:7px; border-radius:50%; background:var(--orange-light); box-shadow:0 0 0 4px rgba(241,195,162,.12); }
    .topbar-action { color:#fff8ee; border-bottom:1px solid rgba(255,248,238,.48); white-space:nowrap; }
    .site-header { position:sticky; top:0; z-index:20; background:rgba(244,240,232,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
    .nav-shell { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
    .brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; }
    .brand-mark { width:36px; height:36px; border:2px solid var(--orange); border-radius:50%; position:relative; display:grid; place-items:center; }
    .brand-mark:before,.brand-mark:after { content:""; position:absolute; background:var(--orange); }
    .brand-mark:before { width:14px; height:2px; }.brand-mark:after { width:2px; height:14px; }
    .brand-name { display:block; font-size:1.16rem; color:var(--ink); font-weight:850; letter-spacing:.02em; }
    .brand-sub { display:block; font-size:.65rem; color:var(--muted); line-height:1.2; margin-top:2px; letter-spacing:.08em; }
    .desktop-nav { display:flex; align-items:center; gap:6px; }
    .nav-link { padding:10px 12px; color:var(--ink-soft); border-bottom:2px solid transparent; font-size:.92rem; }
    .nav-link:hover,.nav-link.active { color:var(--orange-dark); border-bottom-color:var(--orange); }
    .nav-menu { display:none; width:44px; height:42px; border:1px solid var(--line); color:var(--ink); background:var(--white); border-radius:var(--radius-sm); align-items:center; justify-content:center; font-size:1.25rem; }
    .mobile-nav { display:none; padding:8px 0 20px; border-top:1px solid var(--line); }
    .mobile-nav.open { display:block; }.mobile-nav a { display:block; padding:10px 0; border-bottom:1px solid var(--line); font-weight:700; }
    .hero-inner { padding:72px 0 60px; }
    .hero { background:var(--ink); color:var(--white); overflow:hidden; position:relative; }
    .hero:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(22,24,23,.97),rgba(22,24,23,.78) 48%,rgba(22,24,23,.48)),url('/assets/images/backpic/back-2.webp') center/cover; opacity:.95; }
    .hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:68px; align-items:center; }
    .hero-kicker,.eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--orange-light); border:1px solid rgba(241,195,162,.5); padding:6px 12px; font-size:.76rem; letter-spacing:.1em; }
    .hero-kicker { margin-bottom:22px; }.hero h1 { color:var(--white); max-width:720px; }
    .hero-intro { color:#e4e0d7; max-width:680px; font-size:1.05rem; line-height:1.95; margin-bottom:27px; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; }
    .button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border:1px solid transparent; border-radius:var(--radius-sm); font-weight:800; font-size:.92rem; transition:all var(--ease); }
    .button.primary { background:var(--orange); color:#fffaf4; }.button.primary:hover { background:#df7941; color:#fff; transform:translateY(-2px); box-shadow:0 9px 20px rgba(200,101,49,.26); }
    .button.secondary { color:var(--white); background:rgba(255,253,248,.07); border-color:rgba(255,253,248,.45); }.button.secondary:hover { background:var(--white); color:var(--ink); }
    .hero-note { display:flex; align-items:center; gap:13px; color:#c8c6bd; font-size:.88rem; }.hero-note strong { color:var(--orange-light); font-size:1.15rem; }
    .choice-console { background:rgba(28,31,29,.83); border:1px solid rgba(241,195,162,.35); padding:24px; box-shadow:var(--shadow); }
    .console-head { display:flex; justify-content:space-between; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.15); color:#bfc3b9; font-size:.78rem; }
    .console-state { color:var(--orange-light); }.console-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:20px 0; }
    .console-cell { min-height:92px; padding:12px 10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.035); }.console-cell:hover { border-color:var(--orange-light); background:rgba(200,101,49,.1); }
    .console-cell b { display:block; color:var(--white); font-size:1.32rem; line-height:1.1; margin:7px 0 3px; }.console-cell span { color:#aaaFA7; font-size:.73rem; }
    .console-line { display:flex; align-items:center; gap:11px; color:#d9d6cc; font-size:.83rem; }.line-track { height:5px; flex:1; background:rgba(255,255,255,.15); }.line-track i { display:block; width:72%; height:100%; background:var(--orange); }
    .section { padding:92px 0; }.section-deep { background:var(--paper-deep); }.section-dark { background:var(--ink); color:var(--white); }
    .section-head { max-width:760px; margin-bottom:42px; }.section-head h2 { margin-top:14px; }.section-head p { color:var(--muted); max-width:680px; }.section-dark h2,.section-dark h3 { color:var(--white); }.section-dark .section-head p { color:#c9c8bf; }
    .eyebrow { color:var(--orange-dark); border-color:rgba(200,101,49,.42); }.section-dark .eyebrow { color:var(--orange-light); border-color:rgba(241,195,162,.5); }
    .feature-layout { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:38px; align-items:start; }
    .feature-lead { position:sticky; top:120px; padding:28px; background:var(--ink); color:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
    .feature-lead:after { content:"精选 / 01"; display:block; color:var(--orange-light); margin-top:60px; letter-spacing:.14em; font-size:.76rem; }.feature-lead h3 { color:var(--white); font-size:1.75rem; margin-top:18px; }.feature-lead p { color:#d1d0c7; }.feature-lead img { width:100%; aspect-ratio:1.25/1; object-fit:cover; opacity:.9; margin:18px 0 0; }
    .featured-list { display:grid; gap:15px; }.featured-item { display:grid; grid-template-columns:56px 1fr auto; gap:19px; align-items:start; padding:23px 24px; background:var(--white); border:1px solid var(--line); border-left:4px solid transparent; transition:all var(--ease); }.featured-item:hover { border-left-color:var(--orange); transform:translateX(4px); box-shadow:var(--shadow-soft); }.item-no { color:var(--orange); font-size:.82rem; font-weight:850; letter-spacing:.08em; padding-top:3px; }.item-meta { display:flex; gap:9px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }.tag { display:inline-flex; padding:3px 8px; background:#eee8dc; color:var(--green-dark); font-size:.72rem; line-height:1.4; border-radius:3px; }.tag.warm { background:#f7dfcf; color:var(--orange-dark); }.featured-item h3 { margin-bottom:6px; font-size:1.25rem; }.featured-item p { margin-bottom:0; color:var(--muted); font-size:.92rem; line-height:1.75; }.item-link { color:var(--orange-dark); font-weight:800; font-size:.86rem; white-space:nowrap; padding-top:23px; }.item-link:hover { transform:translateX(3px); }
    .detail-wrap { display:grid; grid-template-columns:1fr 1fr; gap:22px; }.detail-card { background:var(--white); border:1px solid var(--line); padding:28px; min-height:285px; }.detail-card.wide { grid-column:span 2; display:grid; grid-template-columns:.85fr 1.15fr; gap:30px; align-items:center; }.detail-card h3 { font-size:1.45rem; }.detail-card p { color:var(--muted); }.detail-card img { width:100%; height:230px; object-fit:cover; border-radius:var(--radius-md); }.detail-list { list-style:none; margin:20px 0 0; padding:0; }.detail-list li { position:relative; padding:10px 0 10px 23px; border-top:1px solid var(--line); color:var(--ink-soft); }.detail-list li:before { content:""; position:absolute; left:2px; top:20px; width:8px; height:8px; border:2px solid var(--orange); border-radius:50%; }
    .reading-band { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }.reading-cell { background:var(--paper); padding:27px; }.reading-cell strong { display:block; color:var(--orange-dark); font-size:2rem; line-height:1; margin-bottom:12px; }.reading-cell p { color:var(--muted); margin:0; font-size:.92rem; }
    .scenario-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; }.scenario-panel { padding:34px; background:#252927; border:1px solid rgba(255,255,255,.12); }.scenario-panel h3 { font-size:1.6rem; }.scenario-panel p { color:#c5c7be; }.scenario-steps { display:grid; gap:14px; }.scenario-step { display:grid; grid-template-columns:46px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14); }.step-num { color:var(--orange-light); font-weight:850; font-size:1.2rem; }.scenario-step strong { display:block; color:var(--white); margin-bottom:4px; }.scenario-step span { color:#b6bab0; font-size:.9rem; }
    .faq-list { max-width:900px; display:grid; gap:10px; }.faq-item { background:var(--white); border:1px solid var(--line); }.faq-item summary { list-style:none; cursor:pointer; padding:19px 23px; font-weight:800; display:flex; justify-content:space-between; gap:20px; }.faq-item summary::-webkit-details-marker { display:none; }.faq-item summary:after { content:"+"; color:var(--orange); font-size:1.35rem; line-height:1; }.faq-item[open] summary { color:var(--orange-dark); border-bottom:1px solid var(--line); }.faq-item[open] summary:after { content:"−"; }.faq-answer { padding:17px 23px 20px; color:var(--muted); }.faq-answer p { margin:0; }
    .cta-section { padding:74px 0; background:var(--orange); color:#fffaf4; }.cta-box { display:flex; align-items:center; justify-content:space-between; gap:32px; }.cta-box h2 { color:#fffaf4; margin-bottom:10px; }.cta-box p { max-width:720px; margin:0; color:#fff0e5; }.cta-box .button { background:var(--ink); color:var(--white); }.cta-box .button:hover { background:#000; transform:translateY(-2px); }
    .contact-section { padding:92px 0; }.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }.contact-copy p { color:var(--muted); }.contact-points { margin-top:25px; display:grid; gap:14px; }.contact-point { padding:14px 0; border-top:1px solid var(--line); }.contact-point strong { display:block; margin-bottom:3px; }.contact-point span { color:var(--muted); font-size:.9rem; }.contact-form { background:var(--white); border:1px solid var(--line); padding:30px; box-shadow:var(--shadow-soft); }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.form-field { margin-bottom:18px; }.form-field label { display:block; margin-bottom:7px; color:var(--ink-soft); font-size:.88rem; font-weight:800; }.required { color:var(--orange); }.form-field input,.form-field textarea { width:100%; border:1px solid var(--line); background:#fbf8f1; border-radius:var(--radius-sm); padding:12px 14px; color:var(--ink); }.form-field input:hover,.form-field textarea:hover { border-color:#b8aa98; }.form-field input:focus,.form-field textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(200,101,49,.12); outline:0; }.form-field textarea { min-height:130px; resize:vertical; }.form-note { color:var(--muted); font-size:.78rem; margin:12px 0 0; }.form-feedback { min-height:25px; color:var(--green-dark); font-size:.86rem; margin:12px 0 0; }
    .site-footer { background:#242725; color:#d8d7cf; padding:66px 0 26px; }.site-footer .brand-name { color:var(--white); }.site-footer .brand-sub { color:#aeb2a8; }.footer-main { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.14); }.footer-brand p { color:#aeb2a8; max-width:440px; margin:21px 0 0; font-size:.92rem; }.footer-heading { color:var(--orange-light); font-weight:800; margin-bottom:14px; }.footer-links { display:grid; gap:8px; }.footer-links a { color:#d8d7cf; font-size:.9rem; }.footer-links a:hover { color:#fff; transform:translateX(2px); }.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:23px; }.footer-records { display:flex; flex-wrap:wrap; gap:8px 20px; color:#9ea39a; font-size:.74rem; }.footer-records a { color:#d8d7cf; }.back-top { color:var(--orange-light); font-size:.82rem; white-space:nowrap; }
    @media (max-width:1024px) { .desktop-nav { gap:0; }.nav-link { padding-left:8px; padding-right:8px; }.hero-grid { gap:35px; }.section { padding:72px 0; }.feature-layout,.scenario-grid { grid-template-columns:1fr; }.feature-lead { position:relative; top:auto; display:grid; grid-template-columns:1fr .75fr; gap:25px; align-items:center; }.feature-lead:after { margin-top:0; }.feature-lead img { grid-column:2; grid-row:1 / span 3; margin:0; }.detail-card.wide { grid-template-columns:1fr 1fr; } }
    @media (max-width:768px) { .container,.topbar-inner { width:min(calc(100% - 30px),var(--container)); }.topbar-inner { overflow:hidden; }.topbar-action { display:none; }.nav-shell { min-height:70px; }.desktop-nav { display:none; }.nav-menu { display:flex; }.hero-inner { padding:60px 0 54px; }.hero-grid { grid-template-columns:1fr; }.choice-console { max-width:560px; }.section { padding:62px 0; }.section-head { margin-bottom:30px; }.detail-wrap,.reading-band { grid-template-columns:1fr; }.detail-card.wide { grid-column:span 1; grid-template-columns:1fr; }.footer-main,.contact-grid { grid-template-columns:1fr; gap:30px; }.footer-main { padding-bottom:32px; }.footer-bottom { align-items:flex-start; flex-direction:column; }.form-row { grid-template-columns:1fr; gap:0; }.cta-box { align-items:flex-start; flex-direction:column; gap:22px; } }
    @media (max-width:520px) { body { font-size:15px; }.hero h1 { font-size:2.25rem; }.hero-intro { font-size:.97rem; }.console-grid { grid-template-columns:repeat(2,1fr); }.console-cell:last-child { grid-column:span 2; }.feature-lead { display:block; padding:22px; }.feature-lead img { margin-top:18px; }.featured-item { grid-template-columns:34px 1fr; gap:11px; padding:19px 16px; }.item-link { grid-column:2; padding-top:0; }.reading-band { border-left:0; border-right:0; }.reading-cell { padding:22px; }.scenario-panel,.contact-form { padding:22px; }.cta-section { padding:54px 0; } }
    @media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* roulang page: category2 */
:root {
      --ink: #1b1d1c;
      --ink-soft: #303533;
      --paper: #f4f0e8;
      --paper-deep: #e9e3d7;
      --white: #fffdf8;
      --orange: #c86531;
      --orange-dark: #9f4823;
      --orange-light: #f1c3a2;
      --green: #879d82;
      --green-dark: #516956;
      --line: #d6cec1;
      --muted: #72766f;
      --shadow: 0 18px 50px rgba(44, 39, 31, .11);
      --shadow-soft: 0 8px 22px rgba(44, 39, 31, .08);
      --radius-lg: 16px;
      --radius-md: 10px;
      --radius-sm: 6px;
      --container: 1220px;
      --ease: 180ms ease;
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      font-size: 16px;
      line-height: 1.85;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, p {
      margin-top: 0;
    }

    h1, h2, h3, h4 {
      color: var(--ink);
      line-height: 1.25;
      letter-spacing: -.025em;
    }

    h1 {
      font-size: clamp(2.45rem, 5vw, 4.25rem);
      margin-bottom: 22px;
      font-weight: 850;
    }

    h2 {
      font-size: clamp(1.85rem, 3.4vw, 2.7rem);
      margin-bottom: 16px;
      font-weight: 820;
    }

    h3 {
      font-size: 1.24rem;
      margin-bottom: 10px;
      font-weight: 800;
    }

    p {
      color: var(--muted);
      margin-bottom: 18px;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
    }

    a:hover {
      color: var(--orange-dark);
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    button, input, textarea {
      font: inherit;
    }

    button, .button {
      cursor: pointer;
    }

    button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
      outline: 3px solid rgba(200, 101, 49, .42);
      outline-offset: 3px;
    }

    .container {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }

    .topbar {
      min-height: 34px;
      display: flex;
      align-items: center;
      background: var(--ink);
      color: #e9e5da;
      font-size: .78rem;
      letter-spacing: .02em;
    }

    .topbar-inner {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .topbar-status {
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      display: inline-block;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px rgba(135, 157, 130, .18);
    }

    .topbar-action {
      color: #fff8ee;
      border-bottom: 1px solid rgba(255, 248, 238, .48);
      white-space: nowrap;
    }

    .topbar-action:hover {
      color: var(--orange-light);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(244, 240, 232, .97);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(8px);
    }

    .nav-shell {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      flex-shrink: 0;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      position: relative;
      display: grid;
      place-items: center;
      border: 2px solid var(--orange);
      border-radius: 50%;
    }

    .brand-mark::before, .brand-mark::after {
      content: "";
      position: absolute;
      background: var(--orange);
    }

    .brand-mark::before {
      width: 14px;
      height: 2px;
    }

    .brand-mark::after {
      width: 2px;
      height: 14px;
    }

    .brand-name {
      display: block;
      color: var(--ink);
      font-size: 1.16rem;
      font-weight: 850;
      letter-spacing: .02em;
    }

    .brand-sub {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: .65rem;
      line-height: 1.2;
      letter-spacing: .08em;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-link {
      padding: 10px 12px;
      color: var(--ink-soft);
      border-bottom: 2px solid transparent;
      font-size: .92rem;
    }

    .nav-link:hover, .nav-link.active {
      color: var(--orange-dark);
      border-bottom-color: var(--orange);
    }

    .nav-menu {
      display: none;
      width: 44px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--white);
      color: var(--ink);
      font-size: 1.25rem;
    }

    .mobile-nav {
      display: none;
      padding: 8px 0 20px;
      border-top: 1px solid var(--line);
    }

    .mobile-nav.open {
      display: block;
    }

    .mobile-nav a {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      color: var(--ink-soft);
      font-weight: 700;
    }

    .mobile-nav a.active {
      color: var(--orange-dark);
    }

    .hero {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: var(--ink);
      color: var(--white);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(90deg, rgba(22, 24, 23, .97) 0%, rgba(22, 24, 23, .84) 49%, rgba(22, 24, 23, .48) 100%),
        url("/assets/images/backpic/back-2.webp") center / cover no-repeat;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .3;
      background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 54px 54px;
    }

    .hero-inner {
      width: min(100% - 40px, var(--container));
      min-height: 570px;
      margin: 0 auto;
      padding: 78px 0 68px;
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
      align-items: center;
      gap: 70px;
    }

    .hero-kicker, .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--orange-light);
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .hero-kicker {
      padding: 7px 13px;
      margin-bottom: 22px;
      border: 1px solid rgba(241, 195, 162, .5);
    }

    .hero-kicker::before, .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      background: var(--orange);
      border-radius: 1px;
      transform: rotate(45deg);
    }

    .hero h1 {
      max-width: 680px;
      color: var(--white);
    }

    .hero-intro {
      max-width: 650px;
      margin-bottom: 28px;
      color: #e4e0d7;
      font-size: 1.05rem;
      line-height: 1.95;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 28px;
    }

    .button {
      min-height: 48px;
      padding: 10px 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      font-size: .92rem;
      font-weight: 800;
      transition: all var(--ease);
    }

    .button.primary {
      background: var(--orange);
      color: #fffaf4;
      box-shadow: 0 8px 20px rgba(200, 101, 49, .2);
    }

    .button.primary:hover {
      background: var(--orange-dark);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 12px 25px rgba(200, 101, 49, .28);
    }

    .button.primary:active {
      transform: translateY(0);
    }

    .button.secondary {
      border-color: rgba(255,255,255,.42);
      color: var(--white);
      background: rgba(255,255,255,.06);
    }

    .button.secondary:hover {
      border-color: var(--orange-light);
      background: rgba(255,255,255,.12);
      color: var(--white);
    }

    .button.light {
      background: var(--white);
      color: var(--ink);
    }

    .button.light:hover {
      background: var(--orange-light);
      color: var(--ink);
      transform: translateY(-2px);
    }

    .hero-note {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #bfc2b9;
      font-size: .83rem;
    }

    .hero-note strong {
      color: var(--orange-light);
      font-weight: 800;
    }

    .hero-panel {
      position: relative;
      padding: 13px;
      border: 1px solid rgba(255,255,255,.24);
      background: rgba(16, 18, 17, .58);
      box-shadow: 0 22px 48px rgba(0,0,0,.23);
    }

    .hero-panel::before {
      content: "互动入口 / 02";
      position: absolute;
      top: -12px;
      right: 18px;
      padding: 3px 9px;
      background: var(--orange);
      color: #fffaf4;
      font-size: .68rem;
      letter-spacing: .08em;
    }

    .hero-image {
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #383b38;
    }

    .hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .88;
      mix-blend-mode: screen;
    }

    .panel-caption {
      padding: 18px 7px 5px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: #d8d5cc;
      font-size: .82rem;
    }

    .panel-caption b {
      display: block;
      margin-bottom: 3px;
      color: var(--white);
      font-size: 1rem;
    }

    .panel-state {
      align-self: flex-start;
      padding: 3px 7px;
      border: 1px solid rgba(135,157,130,.55);
      color: #c3d0bb;
      white-space: nowrap;
      font-size: .72rem;
    }

    .section {
      padding: 96px 0;
    }

    .section-head {
      max-width: 730px;
      margin-bottom: 42px;
    }

    .section-head .eyebrow {
      margin-bottom: 13px;
      color: var(--orange-dark);
    }

    .section-head p {
      max-width: 680px;
      margin-bottom: 0;
      font-size: 1rem;
    }

    .category-layout {
      display: grid;
      grid-template-columns: 235px minmax(0, 1fr);
      gap: 64px;
      align-items: start;
    }

    .category-index {
      position: sticky;
      top: 112px;
      padding: 22px 20px;
      border-left: 3px solid var(--orange);
      background: var(--paper-deep);
    }

    .index-label {
      margin-bottom: 17px;
      color: var(--muted);
      font-size: .7rem;
      font-weight: 850;
      letter-spacing: .12em;
    }

    .category-index a {
      display: flex;
      align-items: baseline;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(114,118,111,.2);
      color: var(--ink-soft);
      font-size: .91rem;
      font-weight: 750;
    }

    .category-index a:last-child {
      border-bottom: 0;
    }

    .category-index a span {
      color: var(--orange);
      font-family: Georgia, serif;
      font-size: .8rem;
    }

    .category-index a:hover {
      padding-left: 4px;
      color: var(--orange-dark);
    }

    .content-group {
      margin-bottom: 78px;
      scroll-margin-top: 120px;
    }

    .content-group:last-child {
      margin-bottom: 0;
    }

    .group-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 26px;
      padding-bottom: 17px;
      border-bottom: 1px solid var(--line);
    }

    .group-heading h2 {
      margin-bottom: 0;
      font-size: clamp(1.65rem, 3vw, 2.25rem);
    }

    .group-heading p {
      max-width: 430px;
      margin: 2px 0 0;
      font-size: .94rem;
    }

    .mode-feature {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr);
      min-height: 280px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--white);
      box-shadow: var(--shadow-soft);
    }

    .mode-feature-copy {
      padding: 34px 36px;
    }

    .mode-feature-copy .number {
      display: block;
      margin-bottom: 22px;
      color: var(--orange);
      font-family: Georgia, serif;
      font-size: 2.4rem;
      line-height: 1;
    }

    .mode-feature-copy h3 {
      font-size: 1.6rem;
    }

    .mode-feature-copy p {
      max-width: 520px;
      margin-bottom: 12px;
    }

    .mode-image {
      min-height: 280px;
      overflow: hidden;
      background: var(--ink);
    }

    .mode-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .86;
      filter: saturate(.78);
    }

    .mode-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .mode-item {
      padding: 23px 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(255,253,248,.62);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }

    .mode-item:hover {
      transform: translateY(-3px);
      border-color: var(--orange-light);
      box-shadow: var(--shadow-soft);
    }

    .mode-item .mode-meta {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 13px;
      color: var(--orange-dark);
      font-size: .72rem;
      font-weight: 850;
      letter-spacing: .08em;
    }

    .mode-item h3 {
      margin-bottom: 7px;
      font-size: 1.08rem;
    }

    .mode-item p {
      margin-bottom: 0;
      font-size: .91rem;
      line-height: 1.75;
    }

    .boundary-grid {
      display: grid;
      grid-template-columns: .78fr 1.22fr;
      gap: 22px;
      align-items: stretch;
    }

    .boundary-photo {
      min-height: 360px;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: var(--ink);
    }

    .boundary-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.72);
    }

    .boundary-card {
      padding: 32px 34px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--ink);
      color: var(--white);
    }

    .boundary-card h3 {
      color: var(--white);
      font-size: 1.55rem;
    }

    .boundary-card p {
      color: #d0d1c9;
    }

    .check-list {
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      position: relative;
      padding: 12px 0 12px 28px;
      border-top: 1px solid rgba(255,255,255,.14);
      color: #e8e4db;
      font-size: .93rem;
    }

    .check-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 11px;
      color: var(--orange-light);
      font-weight: 900;
    }

    .process-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .process-step {
      position: relative;
      min-height: 190px;
      padding: 26px 24px 25px 0;
      margin-right: 24px;
      border-right: 1px solid var(--line);
    }

    .process-step:last-child {
      margin-right: 0;
      border-right: 0;
    }

    .process-step .step-no {
      display: inline-block;
      margin-bottom: 22px;
      color: var(--orange);
      font-family: Georgia, serif;
      font-size: 1.45rem;
      font-weight: 700;
    }

    .process-step h3 {
      margin-bottom: 8px;
      font-size: 1.08rem;
    }

    .process-step p {
      margin: 0;
      font-size: .88rem;
      line-height: 1.7;
    }

    .scene-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .scene-card {
      padding: 25px 27px;
      border: 1px solid var(--line);
      background: var(--white);
      transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
    }

    .scene-card:nth-child(2) {
      margin-top: 28px;
    }

    .scene-card:hover {
      transform: translateY(-3px);
      border-color: var(--orange-light);
      box-shadow: var(--shadow-soft);
    }

    .scene-tag {
      display: inline-block;
      padding: 4px 9px;
      margin-bottom: 15px;
      border-radius: 3px;
      background: #e0e8da;
      color: var(--green-dark);
      font-size: .72rem;
      font-weight: 850;
    }

    .scene-card h3 {
      margin-bottom: 8px;
    }

    .scene-card p {
      margin-bottom: 0;
      font-size: .91rem;
    }

    .faq-section {
      background: var(--paper-deep);
    }

    .faq-layout {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 70px;
      align-items: start;
    }

    .faq-intro p {
      max-width: 390px;
    }

    .faq-note {
      padding: 17px 18px;
      border-left: 3px solid var(--green);
      background: rgba(255,253,248,.62);
      color: var(--ink-soft);
      font-size: .88rem;
    }

    .faq-list details {
      margin-bottom: 10px;
      border: 1px solid var(--line);
      background: var(--white);
    }

    .faq-list summary {
      position: relative;
      padding: 19px 50px 19px 22px;
      color: var(--ink);
      cursor: pointer;
      list-style: none;
      font-weight: 800;
    }

    .faq-list summary::-webkit-details-marker {
      display: none;
    }

    .faq-list summary::after {
      content: "+";
      position: absolute;
      top: 14px;
      right: 21px;
      color: var(--orange);
      font-size: 1.45rem;
      font-weight: 400;
      transition: transform var(--ease);
    }

    .faq-list details[open] summary {
      color: var(--orange-dark);
    }

    .faq-list details[open] summary::after {
      transform: rotate(45deg);
    }

    .faq-answer {
      padding: 0 22px 19px;
      border-top: 1px solid var(--line);
    }

    .faq-answer p {
      margin: 14px 0 0;
      font-size: .92rem;
      line-height: 1.8;
    }

    .cta-section {
      padding: 88px 0;
      background: var(--ink);
    }

    .cta-panel {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 54px;
      align-items: start;
    }

    .cta-copy h2 {
      color: var(--white);
    }

    .cta-copy p {
      max-width: 470px;
      color: #c8cbc2;
    }

    .cta-points {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 25px;
    }

    .cta-points span {
      padding: 6px 10px;
      border: 1px solid rgba(255,255,255,.2);
      color: #e4e1d8;
      font-size: .78rem;
    }

    .contact-form {
      padding: 29px;
      border: 1px solid rgba(255,255,255,.17);
      background: #292d2b;
      border-radius: var(--radius-lg);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 17px;
    }

    .form-field.full {
      grid-column: 1 / -1;
    }

    .contact-form label {
      display: block;
      margin-bottom: 7px;
      color: #e9e6dc;
      font-size: .83rem;
      font-weight: 750;
    }

    .required {
      margin-left: 3px;
      color: var(--orange-light);
    }

    .contact-form input, .contact-form textarea {
      width: 100%;
      margin: 0;
      padding: 11px 13px;
      border: 1px solid #505650;
      border-radius: var(--radius-sm);
      background: #202321;
      color: var(--white);
      box-shadow: none;
      transition: border-color var(--ease), background-color var(--ease);
    }

    .contact-form input {
      height: 46px;
    }

    .contact-form textarea {
      min-height: 116px;
      resize: vertical;
    }

    .contact-form input::placeholder, .contact-form textarea::placeholder {
      color: #8f958c;
    }

    .contact-form input:hover, .contact-form textarea:hover {
      border-color: #777e75;
    }

    .contact-form input:focus, .contact-form textarea:focus {
      border-color: var(--orange-light);
      background: #242825;
      box-shadow: 0 0 0 3px rgba(241,195,162,.1);
      outline: none;
    }

    .form-actions {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .privacy-note {
      margin: 0;
      color: #aeb4aa;
      font-size: .76rem;
      line-height: 1.6;
    }

    .form-state {
      display: none;
      margin-top: 14px;
      padding: 10px 12px;
      border-left: 3px solid var(--green);
      background: rgba(135,157,130,.12);
      color: #dce7d7;
      font-size: .84rem;
    }

    .form-state.show {
      display: block;
    }

    .site-footer {
      padding: 60px 0 23px;
      background: #131615;
      color: #d7d5cd;
    }

    .footer-main {
      display: grid;
      grid-template-columns: 1.55fr .7fr .7fr;
      gap: 70px;
      padding-bottom: 50px;
    }

    .site-footer .brand-name {
      color: var(--white);
    }

    .site-footer .brand-sub {
      color: #959b92;
    }

    .footer-brand p {
      max-width: 470px;
      margin: 20px 0 0;
      color: #aeb3aa;
      font-size: .89rem;
      line-height: 1.8;
    }

    .footer-heading {
      margin-bottom: 15px;
      color: var(--orange-light);
      font-size: .8rem;
      font-weight: 850;
      letter-spacing: .08em;
    }

    .footer-links {
      display: grid;
      gap: 8px;
    }

    .footer-links a {
      width: fit-content;
      color: #c6cbc1;
      font-size: .87rem;
    }

    .footer-links a:hover {
      color: var(--orange-light);
      transform: translateX(3px);
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.13);
    }

    .footer-records {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
      color: #858d83;
      font-size: .72rem;
    }

    .footer-records a {
      color: #b5bcb1;
    }

    .footer-records a:hover {
      color: var(--orange-light);
    }

    .back-top {
      flex-shrink: 0;
      color: var(--orange-light);
      font-size: .78rem;
      font-weight: 800;
    }

    .back-top:hover {
      color: #fff;
      transform: translateY(-2px);
    }

    @media screen and (max-width: 1023px) {
      .desktop-nav {
        gap: 0;
      }

      .nav-link {
        padding-left: 8px;
        padding-right: 8px;
        font-size: .84rem;
      }

      .hero-inner {
        gap: 38px;
      }

      .category-layout {
        gap: 38px;
      }

      .faq-layout {
        gap: 40px;
      }

      .footer-main {
        gap: 35px;
      }
    }

    @media screen and (max-width: 767px) {
      .container, .topbar-inner, .hero-inner {
        width: min(100% - 30px, var(--container));
      }

      .topbar {
        min-height: 32px;
        overflow: hidden;
      }

      .topbar-inner {
        gap: 12px;
        font-size: .7rem;
      }

      .topbar-status {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .topbar-action {
        display: none;
      }

      .site-header {
        position: relative;
      }

      .nav-shell {
        min-height: 72px;
      }

      .desktop-nav {
        display: none;
      }

      .nav-menu {
        display: flex;
      }

      .hero-inner {
        min-height: auto;
        grid-template-columns: 1fr;
        padding: 67px 0 58px;
        gap: 38px;
      }

      .hero-intro {
        font-size: .96rem;
      }

      .hero-panel {
        max-width: 590px;
      }

      .section {
        padding: 67px 0;
      }

      .category-layout {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      .category-index {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 0 18px;
        padding: 15px 17px;
        border-left: 0;
        border-top: 3px solid var(--orange);
      }

      .index-label {
        width: 100%;
        margin-bottom: 4px;
      }

      .category-index a {
        padding: 8px 0;
      }

      .content-group {
        margin-bottom: 58px;
      }

      .group-heading {
        display: block;
        margin-bottom: 22px;
      }

      .group-heading p {
        margin-top: 12px;
      }

      .mode-feature {
        grid-template-columns: 1fr;
      }

      .mode-image {
        min-height: 220px;
        order: -1;
      }

      .mode-feature-copy {
        padding: 27px 25px;
      }

      .mode-list, .scene-list {
        grid-template-columns: 1fr;
      }

      .scene-card:nth-child(2) {
        margin-top: 0;
      }

      .boundary-grid, .faq-layout, .cta-panel {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .boundary-photo {
        min-height: 240px;
      }

      .process-strip {
        grid-template-columns: 1fr 1fr;
        gap: 0;
      }

      .process-step {
        min-height: 170px;
        margin-right: 17px;
        padding-right: 17px;
        border-bottom: 1px solid var(--line);
      }

      .process-step:nth-child(2) {
        margin-right: 0;
        padding-right: 0;
        border-right: 0;
      }

      .process-step:nth-child(3), .process-step:nth-child(4) {
        border-bottom: 0;
      }

      .process-step:nth-child(3) {
        padding-top: 24px;
      }

      .contact-form {
        padding: 23px 20px;
      }

      .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 35px 25px;
      }

      .footer-brand {
        grid-column: 1 / -1;
      }

      .footer-bottom {
        display: block;
      }

      .back-top {
        display: inline-block;
        margin-top: 18px;
      }
    }

    @media screen and (max-width: 519px) {
      h1 {
        font-size: 2.4rem;
      }

      .hero-actions .button {
        width: 100%;
      }

      .panel-caption {
        display: block;
      }

      .panel-state {
        display: inline-block;
        margin-top: 10px;
      }

      .mode-item, .scene-card {
        padding: 21px 20px;
      }

      .process-strip {
        grid-template-columns: 1fr;
      }

      .process-step, .process-step:nth-child(3), .process-step:nth-child(4) {
        min-height: auto;
        margin: 0;
        padding: 20px 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .process-step:last-child {
        border-bottom: 0;
      }

      .form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .form-field.full {
        grid-column: auto;
      }

      .form-actions .button {
        width: 100%;
      }

      .footer-main {
        grid-template-columns: 1fr;
      }

      .footer-brand {
        grid-column: auto;
      }

      .footer-records {
        display: grid;
        gap: 7px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *, *::before, *::after {
        transition-duration: .01ms !important;
      }
    }

/* roulang page: category3 */
:root {
      --ink: #1b1d1c;
      --ink-soft: #303533;
      --paper: #f4f0e8;
      --paper-deep: #e9e3d7;
      --white: #fffdf8;
      --orange: #c86531;
      --orange-dark: #9f4823;
      --orange-light: #f1c3a2;
      --green: #879d82;
      --green-dark: #516956;
      --line: #d6cec1;
      --muted: #72766f;
      --shadow: 0 18px 50px rgba(44, 39, 31, .11);
      --shadow-soft: 0 8px 22px rgba(44, 39, 31, .08);
      --radius-lg: 16px;
      --radius-md: 10px;
      --radius-sm: 6px;
      --container: 1220px;
      --ease: 180ms ease;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      font-size: 16px;
      line-height: 1.85;
      -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    h4,
    p {
      margin-top: 0;
    }

    h1,
    h2,
    h3,
    h4 {
      line-height: 1.28;
      letter-spacing: .01em;
    }

    h1 {
      font-size: clamp(2.35rem, 5vw, 4.25rem);
      margin-bottom: 22px;
    }

    h2 {
      font-size: clamp(1.9rem, 3vw, 2.75rem);
      margin-bottom: 14px;
    }

    h3 {
      font-size: 1.25rem;
      margin-bottom: 10px;
    }

    p {
      color: var(--ink-soft);
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
    }

    a:hover {
      color: var(--orange-dark);
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    button,
    .button {
      cursor: pointer;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    summary:focus-visible {
      outline: 3px solid rgba(200, 101, 49, .42);
      outline-offset: 3px;
    }

    .container {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }

    .topbar {
      min-height: 34px;
      display: flex;
      align-items: center;
      background: var(--ink);
      color: #e9e5da;
      font-size: .78rem;
      letter-spacing: .02em;
    }

    .topbar-inner {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .topbar-status {
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
    }

    .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #a5bf8c;
      box-shadow: 0 0 0 4px rgba(165, 191, 140, .12);
    }

    .topbar-action {
      color: #fff8ee;
      border-bottom: 1px solid rgba(255, 248, 238, .48);
      white-space: nowrap;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(244, 240, 232, .96);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(8px);
    }

    .nav-shell {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      flex-shrink: 0;
    }

    .brand-mark {
      position: relative;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 2px solid var(--orange);
      border-radius: 50%;
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      background: var(--orange);
    }

    .brand-mark::before {
      width: 14px;
      height: 2px;
    }

    .brand-mark::after {
      width: 2px;
      height: 14px;
    }

    .brand-name {
      color: var(--ink);
      font-size: 1.16rem;
      font-weight: 850;
      letter-spacing: .02em;
    }

    .brand-sub {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: .65rem;
      line-height: 1.2;
      letter-spacing: .08em;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-link {
      padding: 10px 12px;
      color: var(--ink-soft);
      border-bottom: 2px solid transparent;
      font-size: .92rem;
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--orange-dark);
      border-bottom-color: var(--orange);
    }

    .nav-menu {
      display: none;
      width: 44px;
      height: 42px;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--white);
      color: var(--ink);
      font-size: 1.25rem;
    }

    .mobile-nav {
      display: none;
      padding: 8px 0 20px;
      border-top: 1px solid var(--line);
    }

    .mobile-nav.open {
      display: block;
    }

    .mobile-nav a {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
    }

    .mobile-nav a[aria-current="page"] {
      color: var(--orange-dark);
    }

    .hero {
      position: relative;
      min-height: 690px;
      display: flex;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
      color: var(--white);
      background: var(--ink);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(90deg, rgba(22, 24, 23, .94) 0%, rgba(22, 24, 23, .78) 44%, rgba(22, 24, 23, .28) 100%),
        url("/assets/images/coverpic/cover-7.webp") center / cover no-repeat;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .3;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 54px 54px;
    }

    .hero-inner {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
      padding: 86px 0 72px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(300px, .7fr);
      align-items: end;
      gap: 72px;
    }

    .hero-kicker,
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--orange-light);
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .hero-kicker {
      margin-bottom: 22px;
      padding: 7px 13px;
      border: 1px solid rgba(241, 195, 162, .5);
    }

    .hero-kicker::before,
    .section-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      display: inline-block;
      background: var(--orange);
      border-radius: 50%;
    }

    .hero h1 {
      max-width: 720px;
      color: var(--white);
    }

    .hero-intro {
      max-width: 680px;
      margin-bottom: 28px;
      color: #e4e0d7;
      font-size: 1.08rem;
      line-height: 1.95;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 30px;
    }

    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      font-size: .92rem;
      font-weight: 800;
      transition: all var(--ease);
    }

    .button.primary {
      color: #fffaf4;
      background: var(--orange);
    }

    .button.primary:hover {
      color: #fff;
      background: var(--orange-dark);
      box-shadow: 0 8px 18px rgba(200, 101, 49, .22);
      transform: translateY(-2px);
    }

    .button.secondary {
      color: var(--white);
      border-color: rgba(255, 253, 248, .55);
      background: rgba(255,255,255,.04);
    }

    .button.secondary:hover {
      color: var(--white);
      border-color: var(--orange-light);
      background: rgba(255,255,255,.1);
      transform: translateY(-2px);
    }

    .button.light {
      color: var(--ink);
      background: var(--white);
    }

    .button.light:hover {
      color: var(--orange-dark);
      background: #fff5e9;
      transform: translateY(-2px);
    }

    .button:active {
      transform: translateY(1px);
    }

    .button[disabled] {
      cursor: not-allowed;
      opacity: .56;
      transform: none;
    }

    .hero-note {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #d4d0c5;
      font-size: .86rem;
    }

    .hero-note strong {
      color: var(--orange-light);
      font-weight: 700;
    }

    .hero-panel {
      padding: 25px;
      border: 1px solid rgba(255, 253, 248, .24);
      border-radius: var(--radius-lg);
      background: rgba(28, 30, 29, .72);
      box-shadow: var(--shadow);
    }

    .panel-label {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
      color: #d9d3c7;
      font-size: .78rem;
      letter-spacing: .07em;
    }

    .panel-label span:last-child {
      color: var(--orange-light);
    }

    .countdown {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 20px;
    }

    .countdown-item {
      padding: 12px 8px;
      text-align: center;
      border: 1px solid rgba(255, 253, 248, .16);
      background: rgba(255,255,255,.05);
    }

    .countdown-number {
      display: block;
      color: var(--white);
      font-size: 1.55rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .countdown-label {
      color: #aaa99f;
      font-size: .7rem;
    }

    .panel-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .panel-list li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 0;
      color: #e4e0d7;
      border-top: 1px solid rgba(255,255,255,.12);
      font-size: .9rem;
    }

    .panel-list li::before {
      content: "↗";
      color: var(--orange-light);
      font-weight: 800;
    }

    .section {
      padding: 96px 0;
    }

    .section-deep {
      background: var(--paper-deep);
    }

    .section-head {
      max-width: 700px;
      margin-bottom: 42px;
    }

    .section-head h2 {
      margin-top: 13px;
    }

    .section-head p {
      max-width: 660px;
      margin-bottom: 0;
      color: var(--muted);
    }

    .intro-layout {
      display: grid;
      grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
      gap: 72px;
      align-items: start;
    }

    .intro-statement {
      padding-left: 22px;
      border-left: 4px solid var(--orange);
    }

    .intro-statement h2 {
      margin-bottom: 18px;
    }

    .intro-statement p {
      margin-bottom: 0;
      font-size: 1.04rem;
    }

    .intro-copy p {
      margin-bottom: 18px;
    }

    .signal-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 30px;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }

    .signal-list li {
      position: relative;
      padding: 0 0 0 22px;
      color: var(--ink-soft);
      font-size: .94rem;
    }

    .signal-list li::before {
      content: "";
      position: absolute;
      top: .75em;
      left: 0;
      width: 9px;
      height: 2px;
      background: var(--orange);
    }

    .scenario-section {
      padding: 104px 0;
      background: var(--white);
    }

    .scenario-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    .scenario-card {
      display: grid;
      grid-template-columns: 180px minmax(0, 1fr);
      min-height: 252px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--paper);
      transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }

    .scenario-card:first-child {
      grid-column: span 2;
      grid-template-columns: 310px minmax(0, 1fr);
      background: var(--ink);
      color: var(--white);
    }

    .scenario-card:hover {
      border-color: rgba(200, 101, 49, .65);
      box-shadow: var(--shadow-soft);
      transform: translateY(-4px);
    }

    .scenario-image {
      min-height: 100%;
      overflow: hidden;
      background: var(--paper-deep);
    }

    .scenario-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 500ms ease;
    }

    .scenario-card:hover .scenario-image img {
      transform: scale(1.04);
    }

    .scenario-content {
      padding: 25px 28px;
    }

    .scenario-card:first-child .scenario-content {
      padding: 32px 34px;
    }

    .scenario-index {
      display: block;
      margin-bottom: 11px;
      color: var(--orange);
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .scenario-content h3 {
      margin-bottom: 12px;
      color: var(--ink);
    }

    .scenario-card:first-child .scenario-content h3 {
      color: var(--white);
      font-size: 1.55rem;
    }

    .scenario-content p {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: .94rem;
      line-height: 1.78;
    }

    .scenario-card:first-child .scenario-content p {
      color: #d6d2c8;
    }

    .scenario-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 16px;
      color: var(--green-dark);
      font-size: .8rem;
      font-weight: 700;
    }

    .scenario-card:first-child .scenario-meta {
      color: var(--orange-light);
    }

    .scenario-meta span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .scenario-meta span::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    .choice-note {
      margin-top: 36px;
      padding: 19px 23px;
      border-left: 3px solid var(--green);
      background: #eef0e8;
      color: var(--green-dark);
    }

    .choice-note p {
      margin: 0;
      color: var(--green-dark);
      font-size: .94rem;
    }

    .process-section {
      padding: 100px 0;
      background: var(--paper);
    }

    .process-layout {
      display: grid;
      grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
      gap: 76px;
      align-items: start;
    }

    .process-heading {
      position: sticky;
      top: 120px;
    }

    .process-heading p {
      color: var(--muted);
    }

    .process-line {
      position: relative;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .process-line::before {
      content: "";
      position: absolute;
      top: 13px;
      bottom: 13px;
      left: 18px;
      width: 1px;
      background: var(--line);
    }

    .process-item {
      position: relative;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 22px;
      padding-bottom: 34px;
    }

    .process-item:last-child {
      padding-bottom: 0;
    }

    .process-number {
      position: relative;
      z-index: 1;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid var(--orange);
      border-radius: 50%;
      background: var(--paper);
      color: var(--orange-dark);
      font-size: .78rem;
      font-weight: 800;
    }

    .process-item h3 {
      margin-bottom: 7px;
    }

    .process-item p {
      max-width: 650px;
      margin-bottom: 0;
      color: var(--muted);
    }

    .comparison-section {
      padding: 96px 0;
      background: var(--ink);
      color: var(--white);
    }

    .comparison-section .section-kicker {
      color: var(--orange-light);
    }

    .comparison-section h2 {
      color: var(--white);
    }

    .comparison-section .section-head p {
      color: #c9c6bc;
    }

    .comparison-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
      gap: 28px;
      align-items: stretch;
    }

    .comparison-table {
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--radius-md);
    }

    .comparison-row {
      display: grid;
      grid-template-columns: 1fr 1.2fr .8fr;
      border-bottom: 1px solid rgba(255,255,255,.13);
    }

    .comparison-row:last-child {
      border-bottom: 0;
    }

    .comparison-row > div {
      padding: 17px 18px;
      color: #d8d4ca;
      font-size: .9rem;
    }

    .comparison-row > div + div {
      border-left: 1px solid rgba(255,255,255,.13);
    }

    .comparison-row.header {
      background: rgba(255,255,255,.07);
    }

    .comparison-row.header > div {
      color: var(--orange-light);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .05em;
    }

    .comparison-row:not(.header) > div:first-child {
      color: var(--white);
      font-weight: 700;
    }

    .comparison-aside {
      padding: 28px;
      border: 1px solid rgba(241, 195, 162, .35);
      border-radius: var(--radius-md);
      background: rgba(200, 101, 49, .12);
    }

    .comparison-aside h3 {
      color: var(--white);
    }

    .comparison-aside p {
      color: #d8d4ca;
      font-size: .94rem;
    }

    .comparison-aside a {
      display: inline-flex;
      margin-top: 8px;
      color: var(--orange-light);
      font-weight: 800;
    }

    .faq-section {
      padding: 100px 0;
      background: var(--white);
    }

    .faq-layout {
      display: grid;
      grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr);
      gap: 76px;
      align-items: start;
    }

    .faq-list {
      border-top: 1px solid var(--line);
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

    .faq-item summary {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      padding: 20px 0;
      cursor: pointer;
      list-style: none;
      color: var(--ink);
      font-weight: 800;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: "+";
      flex-shrink: 0;
      color: var(--orange);
      font-size: 1.4rem;
      font-weight: 400;
      transition: transform var(--ease);
    }

    .faq-item[open] summary::after {
      transform: rotate(45deg);
    }

    .faq-answer {
      max-width: 730px;
      padding: 0 42px 20px 0;
    }

    .faq-answer p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: .95rem;
    }

    .contact-section {
      padding: 100px 0;
      background: var(--paper-deep);
    }

    .contact-panel {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr);
      gap: 60px;
      padding: 48px;
      border-radius: var(--radius-lg);
      background: var(--orange-dark);
      box-shadow: var(--shadow);
    }

    .contact-copy .section-kicker {
      color: #f8d2b8;
    }

    .contact-copy h2 {
      color: var(--white);
    }

    .contact-copy p {
      max-width: 530px;
      color: #f3ddd0;
    }

    .contact-points {
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }

    .contact-points li {
      position: relative;
      padding: 8px 0 8px 22px;
      color: #f8e9df;
      font-size: .92rem;
    }

    .contact-points li::before {
      content: "—";
      position: absolute;
      left: 0;
      color: #f3c4a5;
    }

    .contact-form {
      padding: 27px;
      border-radius: var(--radius-md);
      background: var(--white);
    }

    .form-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .form-field {
      margin-bottom: 16px;
    }

    .form-field label {
      display: block;
      margin-bottom: 6px;
      color: var(--ink);
      font-size: .86rem;
      font-weight: 800;
    }

    .required {
      color: var(--orange);
    }

    .form-field input,
    .form-field textarea {
      width: 100%;
      margin: 0;
      padding: 11px 13px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      outline: 0;
      background: #fffefa;
      color: var(--ink);
      box-shadow: none;
      transition: border-color var(--ease), box-shadow var(--ease), background-color var(--ease);
    }

    .form-field textarea {
      min-height: 118px;
      resize: vertical;
    }

    .form-field input:hover,
    .form-field textarea:hover {
      border-color: #b5aa9b;
    }

    .form-field input:focus,
    .form-field textarea:focus {
      border-color: var(--orange);
      background: var(--white);
      box-shadow: 0 0 0 3px rgba(200,101,49,.12);
    }

    .field-error {
      display: none;
      margin-top: 5px;
      color: #a64732;
      font-size: .78rem;
    }

    .form-field.has-error input,
    .form-field.has-error textarea {
      border-color: #b74c34;
      background: #fff5f1;
    }

    .form-field.has-error .field-error {
      display: block;
    }

    .privacy-note {
      margin: 13px 0 18px;
      color: var(--muted);
      font-size: .75rem;
      line-height: 1.6;
    }

    .form-feedback {
      display: none;
      margin-top: 15px;
      padding: 11px 13px;
      border-radius: var(--radius-sm);
      background: #e8f0e4;
      color: var(--green-dark);
      font-size: .85rem;
    }

    .form-feedback.visible {
      display: block;
    }

    .site-footer {
      padding: 62px 0 26px;
      background: var(--ink);
      color: #e9e5da;
    }

    .footer-main {
      display: grid;
      grid-template-columns: minmax(280px, 1.6fr) repeat(2, minmax(150px, .7fr));
      gap: 55px;
      padding-bottom: 45px;
    }

    .site-footer .brand-name {
      color: var(--white);
    }

    .site-footer .brand-sub {
      color: #a6a69d;
    }

    .site-footer .brand-mark {
      border-color: var(--orange-light);
    }

    .site-footer .brand-mark::before,
    .site-footer .brand-mark::after {
      background: var(--orange-light);
    }

    .footer-brand p {
      max-width: 430px;
      margin: 20px 0 0;
      color: #b9b8af;
      font-size: .88rem;
      line-height: 1.8;
    }

    .footer-heading {
      margin-bottom: 15px;
      color: var(--orange-light);
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .footer-links {
      display: grid;
      gap: 8px;
    }

    .footer-links a {
      width: fit-content;
      color: #cbc9c0;
      font-size: .88rem;
    }

    .footer-links a:hover {
      color: var(--white);
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,.14);
    }

    .footer-records {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      color: #92948d;
      font-size: .73rem;
    }

    .footer-records a {
      color: #d5d1c7;
    }

    .footer-records a:hover {
      color: var(--orange-light);
    }

    .back-top {
      flex-shrink: 0;
      color: var(--orange-light);
      font-size: .8rem;
      font-weight: 800;
    }

    .back-top:hover {
      color: var(--white);
      transform: translateY(-2px);
    }

    @media screen and (max-width: 1023px) {
      .desktop-nav {
        display: none;
      }

      .nav-menu {
        display: inline-flex;
      }

      .hero-grid,
      .intro-layout,
      .process-layout,
      .faq-layout,
      .comparison-layout {
        gap: 42px;
      }

      .hero {
        min-height: 650px;
      }

      .scenario-card:first-child {
        grid-template-columns: 250px minmax(0, 1fr);
      }

      .footer-main {
        gap: 32px;
      }
    }

    @media screen and (max-width: 767px) {
      .container,
      .topbar-inner,
      .hero-inner {
        width: min(100% - 32px, var(--container));
      }

      .topbar {
        min-height: 32px;
        font-size: .7rem;
      }

      .topbar-inner {
        gap: 10px;
        overflow: hidden;
      }

      .topbar-status {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .topbar-action {
        display: none;
      }

      .nav-shell {
        min-height: 72px;
      }

      .hero {
        min-height: 0;
      }

      .hero::before {
        background-position: 62% center;
      }

      .hero-inner {
        padding: 66px 0 58px;
      }

      .hero-grid,
      .intro-layout,
      .process-layout,
      .faq-layout,
      .comparison-layout,
      .contact-panel {
        grid-template-columns: 1fr;
      }

      .hero-grid {
        gap: 38px;
      }

      .hero-intro {
        font-size: 1rem;
      }

      .hero-panel {
        max-width: 480px;
      }

      .section,
      .scenario-section,
      .process-section,
      .comparison-section,
      .faq-section,
      .contact-section {
        padding: 70px 0;
      }

      .section-head {
        margin-bottom: 30px;
      }

      .intro-layout,
      .process-layout,
      .faq-layout {
        gap: 34px;
      }

      .signal-list {
        grid-template-columns: 1fr;
      }

      .scenario-grid {
        grid-template-columns: 1fr;
      }

      .scenario-card,
      .scenario-card:first-child {
        grid-column: auto;
        grid-template-columns: 130px minmax(0, 1fr);
        min-height: 230px;
      }

      .scenario-card:first-child .scenario-content,
      .scenario-content {
        padding: 21px;
      }

      .scenario-card:first-child .scenario-content h3 {
        font-size: 1.3rem;
      }

      .comparison-row > div {
        padding: 13px 10px;
        font-size: .78rem;
      }

      .comparison-row {
        grid-template-columns: 1fr 1.15fr .75fr;
      }

      .contact-panel {
        padding: 28px 20px;
        gap: 32px;
      }

      .footer-main {
        grid-template-columns: 1fr 1fr;
      }

      .footer-brand {
        grid-column: span 2;
      }

      .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
      }
    }

    @media screen and (max-width: 519px) {
      h1 {
        font-size: 2.35rem;
      }

      h2 {
        font-size: 1.85rem;
      }

      .hero-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .hero-actions .button {
        width: 100%;
      }

      .countdown-number {
        font-size: 1.25rem;
      }

      .scenario-card,
      .scenario-card:first-child {
        display: block;
      }

      .scenario-image {
        height: 170px;
      }

      .scenario-content {
        min-height: 215px;
      }

      .form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .contact-form {
        padding: 21px 17px;
      }

      .footer-main {
        grid-template-columns: 1fr;
      }

      .footer-brand {
        grid-column: auto;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }

/* roulang page: category5 */
:root {
      --ink: #1b1d1c;
      --ink-soft: #303533;
      --paper: #f4f0e8;
      --paper-deep: #e9e3d7;
      --white: #fffdf8;
      --orange: #c86531;
      --orange-dark: #9f4823;
      --orange-light: #f1c3a2;
      --green: #879d82;
      --green-dark: #516956;
      --line: #d6cec1;
      --muted: #72766f;
      --shadow: 0 18px 50px rgba(44, 39, 31, .11);
      --shadow-soft: 0 8px 22px rgba(44, 39, 31, .08);
      --radius-lg: 16px;
      --radius-md: 10px;
      --radius-sm: 6px;
      --container: 1220px;
      --ease: 180ms ease;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      font-size: 16px;
      line-height: 1.85;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease); }
    a:hover { color: var(--orange-dark); }
    img { display: block; max-width: 100%; height: auto; }
    button, input, textarea { font: inherit; }
    button, .button { cursor: pointer; }
    button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(200, 101, 49, .42); outline-offset: 3px; }
    .container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
    .topbar { min-height: 34px; display: flex; align-items: center; background: var(--ink); color: #e9e5da; font-size: .78rem; letter-spacing: .02em; }
    .topbar-inner { width: min(100% - 40px, var(--container)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .topbar-status { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
    .status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(135, 157, 130, .18); }
    .topbar-action { color: #fff8ee; border-bottom: 1px solid rgba(255, 248, 238, .48); white-space: nowrap; }
    .site-header { position: sticky; top: 0; z-index: 20; background: rgba(244, 240, 232, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
    .nav-shell { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
    .brand-mark { width: 36px; height: 36px; border: 2px solid var(--orange); border-radius: 50%; position: relative; display: grid; place-items: center; }
    .brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--orange); }
    .brand-mark::before { width: 14px; height: 2px; }
    .brand-mark::after { width: 2px; height: 14px; }
    .brand-name { display: block; color: var(--ink); font-size: 1.16rem; font-weight: 850; letter-spacing: .02em; }
    .brand-sub { display: block; margin-top: 2px; color: var(--muted); font-size: .65rem; line-height: 1.2; letter-spacing: .08em; }
    .desktop-nav { display: flex; align-items: center; gap: 6px; }
    .nav-link { padding: 10px 12px; color: var(--ink-soft); border-bottom: 2px solid transparent; font-size: .92rem; }
    .nav-link:hover, .nav-link.active { color: var(--orange-dark); border-bottom-color: var(--orange); }
    .nav-menu { display: none; width: 44px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--white); font-size: 1.25rem; }
    .mobile-nav { display: none; padding: 8px 0 20px; border-top: 1px solid var(--line); }
    .mobile-nav.open { display: block; }
    .mobile-nav a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
    .eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; color: var(--orange-dark); font-size: .76rem; font-weight: 850; letter-spacing: .12em; }
    .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { color: var(--ink); line-height: 1.28; letter-spacing: -.025em; }
    h1 { max-width: 720px; margin-bottom: 22px; font-size: clamp(2.5rem, 5vw, 4.2rem); font-weight: 900; }
    h2 { margin-bottom: 15px; font-size: clamp(1.8rem, 3.2vw, 2.75rem); font-weight: 850; }
    h3 { margin-bottom: 9px; font-size: 1.2rem; font-weight: 850; }
    .hero-inner h1 { color: var(--white); }
    .hero { min-height: 530px; position: relative; display: flex; align-items: end; overflow: hidden; color: var(--white); background: var(--ink); isolation: isolate; }
    .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(22, 24, 23, .95) 0%, rgba(22, 24, 23, .79) 46%, rgba(22, 24, 23, .3) 100%), url("/assets/images/backpic/back-2.webp") center / cover no-repeat; }
    .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .32; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 54px 54px; }
    .hero-inner { width: min(100% - 40px, var(--container)); margin: 0 auto; padding: 92px 0 72px; }
    .hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 7px 13px; border: 1px solid rgba(241, 195, 162, .5); color: var(--orange-light); font-size: .78rem; letter-spacing: .08em; }
    .hero-copy { max-width: 670px; }
    .hero-intro { margin-bottom: 28px; color: #e4e0d7; font-size: 1.05rem; line-height: 1.95; }
    .hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
    .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 800; transition: all var(--ease); }
    .button.primary { background: var(--orange); color: #fffaf4; }
    .button.primary:hover { background: #dd7740; color: #fff; transform: translateY(-2px); box-shadow: 0 9px 18px rgba(200, 101, 49, .28); }
    .button.secondary { border-color: rgba(255, 253, 248, .5); color: var(--white); background: rgba(255,255,255,.06); }
    .button.secondary:hover { border-color: var(--orange-light); color: var(--orange-light); background: rgba(255,255,255,.12); }
    .button.dark { background: var(--ink); color: var(--white); }
    .button.dark:hover { background: var(--orange-dark); color: var(--white); transform: translateY(-2px); }
    .hero-note { display: flex; flex-wrap: wrap; gap: 18px; color: #c6c5bc; font-size: .84rem; }
    .hero-note span { display: inline-flex; align-items: center; gap: 7px; }
    .hero-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-light); }
    .crumb-wrap { padding: 18px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
    .breadcrumbs { margin: 0; color: var(--muted); font-size: .84rem; }
    .breadcrumbs a:hover { color: var(--orange-dark); }
    .section { padding: 94px 0; }
    .section.alt { background: var(--paper-deep); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
    .section-head > div:first-child { max-width: 680px; }
    .section-lead { max-width: 660px; margin-bottom: 0; color: var(--muted); }
    .section-index { color: var(--orange-dark); font-size: .8rem; font-weight: 850; letter-spacing: .1em; white-space: nowrap; }
    .case-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 46px; align-items: start; }
    .case-feed { display: grid; gap: 20px; }
    .case-feature { display: grid; grid-template-columns: 40% 1fr; min-height: 294px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
    .case-feature:hover { box-shadow: var(--shadow); }
    .case-feature img { width: 100%; height: 100%; min-height: 294px; object-fit: cover; }
    .case-body { padding: 31px 34px; }
    .case-tag, .filter-tag, .mini-tag { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--green-dark); background: #eef1e9; font-size: .75rem; font-weight: 800; line-height: 1.35; }
    .case-body h3 { margin-top: 16px; font-size: 1.55rem; }
    .case-body p { color: var(--muted); }
    .case-meta { display: flex; gap: 17px; flex-wrap: wrap; margin: 18px 0; color: var(--muted); font-size: .78rem; }
    .case-meta strong { color: var(--ink-soft); }
    .text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--orange-dark); font-weight: 850; }
    .text-link:hover { gap: 11px; color: var(--orange); }
    .case-row { display: grid; grid-template-columns: 122px 1fr auto; gap: 22px; align-items: center; padding: 19px; background: rgba(255,253,248,.72); border: 1px solid var(--line); border-radius: var(--radius-md); }
    .case-row img { width: 122px; height: 92px; object-fit: cover; border-radius: var(--radius-sm); }
    .case-row h3 { margin-bottom: 5px; font-size: 1.1rem; }
    .case-row p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
    .case-row .text-link { font-size: .87rem; white-space: nowrap; }
    .side-panel { position: sticky; top: 112px; padding: 24px; background: var(--ink); color: #e8e4da; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
    .side-panel h3 { color: var(--white); font-size: 1.15rem; }
    .side-panel p { color: #bfc1b7; font-size: .9rem; line-height: 1.75; }
    .filter-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
    .filter-tag { border-color: rgba(255,255,255,.16); color: #e6e3d8; background: rgba(255,255,255,.07); }
    .filter-tag:hover, .filter-tag.selected { border-color: var(--orange-light); color: #fff6e9; background: rgba(200,101,49,.24); }
    .side-rule { height: 1px; margin: 20px 0; background: rgba(255,255,255,.14); }
    .side-stat { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; color: #bfc1b7; font-size: .84rem; border-bottom: 1px solid rgba(255,255,255,.1); }
    .side-stat strong { color: var(--orange-light); font-weight: 800; }
    .side-panel .button { width: 100%; margin-top: 20px; }
    .reading-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: center; }
    .reading-grid figure { position: relative; margin: 0; }
    .reading-grid figure::after { content: "体验记录 / 05"; position: absolute; right: -14px; bottom: 20px; padding: 8px 12px; color: var(--white); background: var(--orange); font-size: .72rem; font-weight: 850; letter-spacing: .08em; }
    .reading-grid img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
    .reading-copy p { color: var(--muted); }
    .reading-copy p:last-of-type { margin-bottom: 26px; }
    .quote-box { margin-top: 24px; padding: 20px 22px; border-left: 4px solid var(--orange); background: var(--white); color: var(--ink-soft); font-size: 1.02rem; }
    .quote-box small { display: block; margin-top: 8px; color: var(--muted); font-size: .78rem; }
    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .step { position: relative; min-height: 198px; padding: 30px 25px 27px 0; }
    .step:not(:last-child) { margin-right: 26px; border-right: 1px solid var(--line); }
    .step-number { display: block; margin-bottom: 18px; color: var(--orange-dark); font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
    .step p { margin-bottom: 0; color: var(--muted); font-size: .9rem; line-height: 1.75; }
    .detail-band { display: grid; grid-template-columns: .72fr 1.28fr; gap: 50px; align-items: start; }
    .detail-title { position: sticky; top: 125px; }
    .detail-title p { color: var(--muted); }
    .detail-content { display: grid; gap: 16px; }
    .detail-item { padding: 24px 26px; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--radius-md); }
    .detail-item h3 { display: flex; align-items: baseline; gap: 12px; }
    .detail-item h3 span { color: var(--orange-dark); font-size: .75rem; letter-spacing: .08em; }
    .detail-item p { margin-bottom: 0; color: var(--muted); }
    .faq-list { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--line); }
    .faq-list details { border-bottom: 1px solid var(--line); }
    .faq-list summary { position: relative; padding: 22px 45px 22px 0; cursor: pointer; list-style: none; color: var(--ink); font-size: 1.05rem; font-weight: 850; }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 19px; color: var(--orange-dark); font-size: 1.4rem; font-weight: 400; transition: transform var(--ease); }
    .faq-list details[open] summary::after { transform: rotate(45deg); }
    .faq-answer { max-width: 820px; padding: 0 45px 22px 0; color: var(--muted); }
    .cta-section { padding: 88px 0; background: var(--orange); }
    .cta-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
    .cta-copy h2 { color: #fffaf4; }
    .cta-copy p { max-width: 470px; color: #ffe7d7; }
    .cta-points { margin: 28px 0 0; padding: 0; list-style: none; color: #fff4e8; }
    .cta-points li { position: relative; padding: 8px 0 8px 23px; border-bottom: 1px solid rgba(255,255,255,.22); }
    .cta-points li::before { content: "→"; position: absolute; left: 0; color: #fff; }
    .contact-form { padding: 28px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
    .contact-form .grid-x { margin-left: -8px; margin-right: -8px; }
    .contact-form .cell { padding-left: 8px; padding-right: 8px; }
    .contact-form label { margin-bottom: 6px; color: var(--ink-soft); font-size: .85rem; font-weight: 800; }
    .contact-form input, .contact-form textarea { width: 100%; margin-bottom: 15px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fffefa; color: var(--ink); box-shadow: none; }
    .contact-form input:hover, .contact-form textarea:hover { border-color: #b5aa9a; }
    .contact-form input:focus, .contact-form textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(200,101,49,.12); }
    .contact-form textarea { min-height: 112px; resize: vertical; }
    .form-note { margin: 1px 0 17px; color: var(--muted); font-size: .76rem; line-height: 1.6; }
    .form-status { min-height: 26px; margin: 14px 0 0; color: var(--green-dark); font-size: .86rem; }
    .site-footer { padding: 64px 0 20px; background: var(--ink); color: #d5d4ca; }
    .footer-main { display: grid; grid-template-columns: 1.5fr .8fr .8fr; gap: 50px; padding-bottom: 44px; }
    .footer-brand .brand-name { color: var(--white); }
    .footer-brand .brand-sub { color: #9ea39b; }
    .footer-brand p { max-width: 420px; margin: 22px 0 0; color: #aeb1a8; font-size: .9rem; line-height: 1.85; }
    .footer-heading { margin-bottom: 14px; color: var(--orange-light); font-size: .83rem; font-weight: 850; letter-spacing: .08em; }
    .footer-links { display: grid; gap: 7px; color: #c8c9c0; font-size: .88rem; }
    .footer-links a:hover { color: var(--orange-light); }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.14); }
    .footer-records { display: flex; flex-wrap: wrap; gap: 8px 19px; color: #8f958d; font-size: .72rem; }
    .footer-records a { color: #b5b8ae; }
    .back-top { flex-shrink: 0; color: var(--orange-light); font-size: .8rem; font-weight: 800; }
    .back-top:hover { color: var(--white); }
    .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }
    @media (max-width: 1024px) {
      .desktop-nav { gap: 0; }
      .nav-link { padding-left: 8px; padding-right: 8px; font-size: .86rem; }
      .case-layout { grid-template-columns: minmax(0, 1fr) 245px; gap: 25px; }
      .reading-grid { gap: 35px; }
      .cta-wrap { gap: 35px; }
    }
    @media (max-width: 768px) {
      .container, .topbar-inner, .hero-inner { width: min(100% - 32px, var(--container)); }
      .desktop-nav { display: none; }
      .nav-menu { display: inline-flex; }
      .nav-shell { min-height: 72px; }
      .hero { min-height: 500px; }
      .hero-inner { padding: 70px 0 54px; }
      .section { padding: 68px 0; }
      .section-head { display: block; margin-bottom: 28px; }
      .section-index { display: block; margin-top: 12px; }
      .case-layout, .reading-grid, .detail-band, .cta-wrap { grid-template-columns: 1fr; gap: 30px; }
      .side-panel, .detail-title { position: static; }
      .case-feature { grid-template-columns: 1fr; }
      .case-feature img { height: 250px; min-height: 0; }
      .case-body { padding: 25px; }
      .case-row { grid-template-columns: 90px 1fr; gap: 16px; }
      .case-row img { width: 90px; height: 78px; }
      .case-row .text-link { grid-column: 2; }
      .reading-grid img { height: 340px; }
      .steps { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
      .step { min-height: 175px; }
      .step:not(:last-child) { margin-right: 0; border-right: 0; }
      .step:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 20px; }
      .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .step:nth-child(even) { padding-left: 0; }
      .footer-main { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 520px) {
      .topbar { min-height: 31px; font-size: .7rem; }
      .topbar-action { display: none; }
      .brand-name { font-size: 1.02rem; }
      .brand-sub { font-size: .58rem; }
      .brand-mark { width: 32px; height: 32px; }
      h1 { font-size: 2.45rem; }
      h2 { font-size: 1.85rem; }
      .hero-intro { font-size: .96rem; }
      .hero-actions .button { width: 100%; }
      .case-row { grid-template-columns: 76px 1fr; padding: 14px; }
      .case-row img { width: 76px; height: 72px; }
      .case-row .text-link { grid-column: 1 / -1; }
      .contact-form { padding: 21px 17px; }
      .footer-main { grid-template-columns: 1fr; }
      .footer-brand { grid-column: auto; }
      .footer-records { display: grid; gap: 6px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

/* roulang page: category4 */
:root {
      --ink: #1b1d1c;
      --ink-soft: #303533;
      --paper: #f4f0e8;
      --paper-deep: #e9e3d7;
      --white: #fffdf8;
      --orange: #c86531;
      --orange-dark: #9f4823;
      --orange-light: #f1c3a2;
      --green: #879d82;
      --green-dark: #516956;
      --green-pale: #dbe2d7;
      --line: #d6cec1;
      --muted: #72766f;
      --danger: #a34735;
      --shadow: 0 18px 50px rgba(44, 39, 31, .11);
      --shadow-soft: 0 8px 22px rgba(44, 39, 31, .08);
      --radius-lg: 16px;
      --radius-md: 10px;
      --radius-sm: 6px;
      --container: 1220px;
      --ease: 180ms ease;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
      font-size: 16px;
      line-height: 1.85;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    ol {
      margin-top: 0;
    }

    h1,
    h2,
    h3,
    h4 {
      color: var(--ink);
      font-weight: 850;
      line-height: 1.25;
      letter-spacing: 0;
    }

    h1 {
      font-size: clamp(2.35rem, 5vw, 4.15rem);
      margin-bottom: 22px;
    }

    h2 {
      font-size: clamp(1.85rem, 3.2vw, 2.7rem);
      margin-bottom: 16px;
    }

    h3 {
      font-size: 1.22rem;
      margin-bottom: 10px;
    }

    p {
      margin-bottom: 1rem;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
    }

    a:hover {
      color: var(--orange-dark);
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    button,
    .button {
      cursor: pointer;
    }

    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    summary:focus-visible {
      outline: 3px solid rgba(200, 101, 49, .42);
      outline-offset: 3px;
    }

    .container {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }

    .topbar {
      min-height: 34px;
      display: flex;
      align-items: center;
      background: var(--ink);
      color: #e9e5da;
      font-size: .78rem;
      letter-spacing: .02em;
    }

    .topbar-inner {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .topbar-status {
      display: flex;
      align-items: center;
      gap: 9px;
      white-space: nowrap;
    }

    .topbar-status::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 4px rgba(135, 157, 130, .15);
    }

    .topbar-action {
      color: #fff8ee;
      border-bottom: 1px solid rgba(255, 248, 238, .48);
      white-space: nowrap;
    }

    .topbar-action:hover {
      color: var(--orange-light);
      border-color: var(--orange-light);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(244, 240, 232, .96);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(8px);
    }

    .nav-shell {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      flex-shrink: 0;
    }

    .brand-mark {
      position: relative;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 2px solid var(--orange);
      border-radius: 50%;
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      background: var(--orange);
    }

    .brand-mark::before {
      width: 14px;
      height: 2px;
    }

    .brand-mark::after {
      width: 2px;
      height: 14px;
    }

    .brand-name {
      display: block;
      color: var(--ink);
      font-size: 1.16rem;
      font-weight: 850;
      letter-spacing: .02em;
      line-height: 1.2;
    }

    .brand-sub {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: .65rem;
      line-height: 1.2;
      letter-spacing: .08em;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-link {
      padding: 10px 12px;
      color: var(--ink-soft);
      border-bottom: 2px solid transparent;
      font-size: .92rem;
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--orange-dark);
      border-bottom-color: var(--orange);
    }

    .nav-menu {
      display: none;
      width: 44px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--white);
      color: var(--ink);
      font-size: 1.25rem;
    }

    .mobile-nav {
      display: none;
      padding: 8px 0 20px;
      border-top: 1px solid var(--line);
    }

    .mobile-nav.open {
      display: block;
    }

    .mobile-nav a {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
    }

    .mobile-nav a[aria-current="page"] {
      color: var(--orange-dark);
    }

    .page-hero {
      position: relative;
      overflow: hidden;
      background: var(--ink);
      color: var(--white);
      isolation: isolate;
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(90deg, rgba(24, 26, 25, .98) 0%, rgba(24, 26, 25, .87) 46%, rgba(24, 26, 25, .48) 100%),
        url("/assets/images/backpic/back-2.webp") center / cover no-repeat;
    }

    .page-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .3;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 54px 54px;
    }

    .hero-inner {
      min-height: 650px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
      align-items: center;
      gap: 76px;
      padding: 66px 0 74px;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 27px;
      color: #c7c7bd;
      font-size: .82rem;
    }

    .breadcrumb a {
      color: #e8c1aa;
    }

    .breadcrumb span {
      color: #8f948b;
    }

    .hero-kicker,
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--orange-light);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .hero-kicker {
      margin-bottom: 20px;
    }

    .hero-kicker::before,
    .section-kicker::before {
      content: "";
      width: 24px;
      height: 2px;
      background: currentColor;
    }

    .page-hero h1 {
      max-width: 720px;
      color: var(--white);
    }

    .hero-intro {
      max-width: 700px;
      margin-bottom: 28px;
      color: #e4e0d7;
      font-size: 1.04rem;
      line-height: 1.95;
    }

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .hero-points li {
      padding: 6px 11px;
      border: 1px solid rgba(241, 195, 162, .42);
      border-radius: 999px;
      color: #f4d7c3;
      font-size: .78rem;
    }

    .question-panel {
      padding: 28px;
      border: 1px solid rgba(255, 253, 248, .22);
      border-radius: var(--radius-lg);
      background: rgba(255, 253, 248, .1);
      box-shadow: 0 24px 50px rgba(0, 0, 0, .18);
    }

    .question-panel-label {
      margin-bottom: 8px;
      color: var(--orange-light);
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .question-panel h2 {
      margin-bottom: 10px;
      color: var(--white);
      font-size: 1.55rem;
    }

    .question-panel p {
      margin-bottom: 19px;
      color: #ddd9d0;
      font-size: .9rem;
      line-height: 1.75;
    }

    .question-search {
      display: flex;
      gap: 8px;
    }

    .question-search input {
      min-width: 0;
      height: 48px;
      flex: 1;
      padding: 0 14px;
      border: 1px solid rgba(255, 253, 248, .32);
      border-radius: var(--radius-sm);
      outline: none;
      background: rgba(255,255,255,.93);
      color: var(--ink);
    }

    .question-search input::placeholder {
      color: #7c8078;
    }

    .question-search input:focus {
      border-color: var(--orange-light);
      box-shadow: 0 0 0 3px rgba(241, 195, 162, .2);
    }

    .button {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 20px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      font-size: .92rem;
      font-weight: 800;
      line-height: 1.2;
      transition: all var(--ease);
    }

    .button.primary {
      background: var(--orange);
      color: #fffaf4;
    }

    .button.primary:hover {
      background: var(--orange-dark);
      color: #fffaf4;
      box-shadow: 0 8px 18px rgba(159, 72, 35, .22);
      transform: translateY(-2px);
    }

    .button.primary:active {
      transform: translateY(0);
      box-shadow: none;
    }

    .button.secondary {
      border-color: var(--line);
      background: transparent;
      color: var(--ink-soft);
    }

    .button.secondary:hover {
      border-color: var(--orange);
      background: rgba(200, 101, 49, .07);
      color: var(--orange-dark);
    }

    .button.light {
      border-color: rgba(255, 253, 248, .45);
      background: rgba(255,255,255,.06);
      color: var(--white);
    }

    .button.light:hover {
      border-color: var(--orange-light);
      background: rgba(255,255,255,.13);
      color: #fffaf4;
    }

    .button:disabled {
      cursor: not-allowed;
      opacity: .52;
      transform: none;
    }

    .hero-note {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      color: #bfc3b9;
      font-size: .76rem;
    }

    .hero-note::before {
      content: "•";
      color: var(--green);
      font-size: 1.1rem;
    }

    .section {
      padding: 94px 0;
    }

    .section.deep {
      background: var(--paper-deep);
    }

    .section.dark {
      background: var(--ink);
      color: var(--white);
    }

    .section-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 34px;
      margin-bottom: 42px;
    }

    .section-heading > div:first-child {
      max-width: 690px;
    }

    .section-kicker {
      margin-bottom: 15px;
      color: var(--orange-dark);
    }

    .dark .section-kicker {
      color: var(--orange-light);
    }

    .section-heading h2 {
      margin-bottom: 12px;
    }

    .dark .section-heading h2,
    .dark h3 {
      color: var(--white);
    }

    .section-heading p {
      max-width: 680px;
      margin-bottom: 0;
      color: var(--muted);
    }

    .dark .section-heading p {
      color: #c4c8bf;
    }

    .heading-index {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .1em;
      white-space: nowrap;
    }

    .heading-index::before {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--orange);
    }

    .question-entries {
      display: grid;
      grid-template-columns: minmax(280px, .82fr) minmax(0, 1.45fr);
      gap: 24px;
      align-items: stretch;
    }

    .entry-lead {
      position: relative;
      min-height: 390px;
      overflow: hidden;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, rgba(31, 35, 32, .03) 10%, rgba(31, 35, 32, .88) 100%),
        url("/assets/images/coverpic/cover-7.webp") center / cover no-repeat;
      color: var(--white);
      box-shadow: var(--shadow-soft);
    }

    .entry-lead::before {
      content: "Q / 04";
      position: absolute;
      top: 22px;
      left: 24px;
      color: #f0c7ad;
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .entry-lead h3 {
      max-width: 360px;
      margin-bottom: 12px;
      color: var(--white);
      font-size: 1.7rem;
    }

    .entry-lead p {
      max-width: 390px;
      margin-bottom: 0;
      color: #e5e4dc;
      line-height: 1.8;
    }

    .entry-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .question-route {
      position: relative;
      min-height: 188px;
      padding: 25px 23px 21px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--white);
      transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
    }

    .question-route:hover,
    .question-route.selected {
      border-color: var(--orange);
      box-shadow: var(--shadow-soft);
      transform: translateY(-3px);
    }

    .route-number {
      display: block;
      margin-bottom: 16px;
      color: var(--orange);
      font-size: .75rem;
      font-weight: 850;
      letter-spacing: .1em;
    }

    .question-route h3 {
      margin-bottom: 8px;
      font-size: 1.08rem;
    }

    .question-route p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.7;
    }

    .route-arrow {
      position: absolute;
      right: 20px;
      bottom: 19px;
      color: var(--orange-dark);
      font-size: 1.12rem;
    }

    .topic-response {
      display: none;
      margin-top: 20px;
      padding: 18px 20px;
      border-left: 3px solid var(--orange);
      background: rgba(200, 101, 49, .08);
      color: var(--ink-soft);
    }

    .topic-response.visible {
      display: block;
    }

    .topic-response strong {
      color: var(--orange-dark);
    }

    .comparison-layout {
      display: grid;
      grid-template-columns: 255px minmax(0, 1fr);
      gap: 48px;
      align-items: start;
    }

    .criterion-nav {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .criterion-button {
      position: relative;
      padding: 15px 18px;
      border: 1px solid rgba(255, 253, 248, .19);
      border-radius: var(--radius-sm);
      background: transparent;
      color: #cdd0c8;
      text-align: left;
      font-weight: 750;
      transition: all var(--ease);
    }

    .criterion-button:hover,
    .criterion-button.active {
      border-color: var(--orange);
      background: rgba(200, 101, 49, .16);
      color: var(--white);
    }

    .criterion-button.active::after {
      content: "→";
      position: absolute;
      right: 16px;
      color: var(--orange-light);
    }

    .criterion-note {
      margin-top: 22px;
      color: #9da49a;
      font-size: .84rem;
      line-height: 1.75;
    }

    .compare-result {
      min-height: 370px;
      padding: 34px 36px;
      border: 1px solid rgba(255, 253, 248, .18);
      background: #252927;
    }

    .result-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255, 253, 248, .15);
    }

    .result-label {
      color: var(--orange-light);
      font-size: .76rem;
      font-weight: 800;
      letter-spacing: .1em;
    }

    .result-state {
      padding: 5px 9px;
      border: 1px solid rgba(135, 157, 130, .5);
      border-radius: 999px;
      color: #c8d8c1;
      font-size: .73rem;
    }

    .compare-result h3 {
      margin: 27px 0 10px;
      font-size: 1.75rem;
    }

    .compare-result > p {
      max-width: 700px;
      color: #c5c9c0;
    }

    .compare-board {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 34px;
      margin-top: 27px;
    }

    .compare-row {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 12px;
      padding: 14px 0;
      border-top: 1px solid rgba(255, 253, 248, .12);
    }

    .compare-row dt {
      color: #979e94;
      font-size: .82rem;
    }

    .compare-row dd {
      margin: 0;
      color: #f1eee6;
      font-size: .88rem;
    }

    .scene-layout {
      display: grid;
      grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr);
      gap: 62px;
      align-items: center;
    }

    .scene-image {
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: var(--paper-deep);
      box-shadow: var(--shadow);
    }

    .scene-image img {
      width: 100%;
      aspect-ratio: 1.12 / 1;
      object-fit: cover;
    }

    .scene-copy .section-kicker {
      margin-bottom: 15px;
    }

    .scene-copy h2 {
      max-width: 610px;
    }

    .scene-copy > p {
      max-width: 650px;
      color: var(--muted);
    }

    .scene-list {
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }

    .scene-list li {
      display: grid;
      grid-template-columns: 35px 1fr;
      gap: 15px;
      padding: 16px 0;
      border-top: 1px solid var(--line);
    }

    .scene-list li:last-child {
      border-bottom: 1px solid var(--line);
    }

    .scene-list-number {
      color: var(--orange);
      font-weight: 850;
      font-size: .8rem;
      letter-spacing: .08em;
    }

    .scene-list strong {
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
    }

    .scene-list span {
      color: var(--muted);
      font-size: .9rem;
    }

    .process-section {
      background: var(--white);
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .process-step {
      position: relative;
      min-height: 210px;
      padding: 28px 31px 28px 0;
    }

    .process-step + .process-step {
      padding-left: 31px;
      border-left: 1px solid var(--line);
    }

    .process-step::after {
      content: "";
      position: absolute;
      right: -7px;
      top: 40px;
      width: 13px;
      height: 13px;
      border: 3px solid var(--paper);
      border-radius: 50%;
      background: var(--orange);
    }

    .process-step:last-child::after {
      display: none;
    }

    .step-number {
      display: block;
      margin-bottom: 20px;
      color: var(--orange);
      font-size: 1rem;
      font-weight: 850;
      letter-spacing: .08em;
    }

    .process-step h3 {
      margin-bottom: 9px;
      font-size: 1.16rem;
    }

    .process-step p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.75;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: .75fr 1.5fr;
      gap: 64px;
      align-items: start;
    }

    .faq-intro p {
      max-width: 360px;
      color: var(--muted);
    }

    .faq-quick {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 23px;
    }

    .faq-quick span {
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--green-dark);
      font-size: .77rem;
    }

    .faq-list {
      border-top: 1px solid var(--line);
    }

    .faq-item {
      border-bottom: 1px solid var(--line);
    }

    .faq-item summary {
      position: relative;
      padding: 20px 44px 20px 0;
      cursor: pointer;
      list-style: none;
      color: var(--ink);
      font-weight: 800;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: "+";
      position: absolute;
      right: 8px;
      top: 16px;
      color: var(--orange);
      font-size: 1.45rem;
      font-weight: 400;
      transition: transform var(--ease);
    }

    .faq-item[open] summary::after {
      transform: rotate(45deg);
    }

    .faq-item summary:hover {
      color: var(--orange-dark);
    }

    .faq-answer {
      max-width: 760px;
      padding: 0 40px 21px 0;
      color: var(--muted);
      font-size: .93rem;
    }

    .contact-section {
      padding: 0 0 94px;
      background: var(--paper);
    }

    .contact-shell {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 48px;
      padding: 54px 58px;
      border-radius: var(--radius-lg);
      background: var(--ink);
      color: var(--white);
      box-shadow: var(--shadow);
    }

    .contact-copy {
      align-self: center;
    }

    .contact-copy .section-kicker {
      color: var(--orange-light);
    }

    .contact-copy h2 {
      color: var(--white);
    }

    .contact-copy p {
      max-width: 470px;
      color: #c8cbc3;
    }

    .contact-points {
      margin: 25px 0 0;
      padding: 0;
      list-style: none;
    }

    .contact-points li {
      position: relative;
      padding-left: 19px;
      margin-bottom: 8px;
      color: #e0e1d9;
      font-size: .88rem;
    }

    .contact-points li::before {
      content: "";
      position: absolute;
      top: .8em;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
    }

    .contact-form {
      padding: 29px;
      border-radius: var(--radius-md);
      background: var(--white);
      color: var(--ink);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 17px;
    }

    .form-field {
      margin: 0;
    }

    .form-field.full {
      grid-column: 1 / -1;
    }

    .form-field label {
      display: block;
      margin-bottom: 7px;
      color: var(--ink-soft);
      font-size: .84rem;
      font-weight: 800;
    }

    .required {
      color: var(--orange-dark);
    }

    .form-field input,
    .form-field textarea,
    .form-field select {
      width: 100%;
      min-height: 47px;
      margin: 0;
      padding: 10px 13px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      outline: none;
      background: #fffdfa;
      color: var(--ink);
      box-shadow: none;
      transition: border-color var(--ease), box-shadow var(--ease);
    }

    .form-field textarea {
      min-height: 116px;
      resize: vertical;
    }

    .form-field input:focus,
    .form-field textarea:focus,
    .form-field select:focus {
      border-color: var(--orange);
      box-shadow: 0 0 0 3px rgba(200, 101, 49, .12);
    }

    .form-field.invalid input,
    .form-field.invalid textarea {
      border-color: var(--danger);
    }

    .error-message {
      display: none;
      margin-top: 4px;
      color: var(--danger);
      font-size: .76rem;
    }

    .form-field.invalid .error-message {
      display: block;
    }

    .form-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 18px;
    }

    .privacy-note {
      margin: 0;
      color: var(--muted);
      font-size: .75rem;
      line-height: 1.6;
    }

    .form-status {
      display: none;
      margin-top: 15px;
      padding: 11px 14px;
      border-left: 3px solid var(--green-dark);
      background: var(--green-pale);
      color: var(--green-dark);
      font-size: .84rem;
    }

    .form-status.visible {
      display: block;
    }

    .site-footer {
      padding: 66px 0 24px;
      background: #242725;
      color: #d6d8d0;
    }

    .footer-main {
      display: grid;
      grid-template-columns: 1.5fr .7fr .7fr;
      gap: 68px;
      padding-bottom: 47px;
    }

    .site-footer .brand-name {
      color: var(--white);
    }

    .site-footer .brand-sub {
      color: #a7aaa2;
    }

    .footer-brand p {
      max-width: 420px;
      margin: 22px 0 0;
      color: #aeb2aa;
      font-size: .88rem;
      line-height: 1.85;
    }

    .footer-heading {
      margin-bottom: 15px;
      color: var(--orange-light);
      font-size: .82rem;
      font-weight: 850;
      letter-spacing: .08em;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .footer-links a {
      color: #c7cbc2;
      font-size: .87rem;
    }

    .footer-links a:hover {
      color: var(--orange-light);
    }

    .footer-bottom {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      padding-top: 23px;
      border-top: 1px solid rgba(255, 253, 248, .14);
    }

    .footer-records {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 18px;
      color: #959c93;
      font-size: .72rem;
    }

    .footer-records a {
      color: #c4c9c0;
    }

    .footer-records a:hover {
      color: var(--orange-light);
    }

    .back-top {
      flex-shrink: 0;
      padding: 7px 11px;
      border: 1px solid rgba(255, 253, 248, .2);
      border-radius: var(--radius-sm);
      color: #d9ddd3;
      font-size: .76rem;
    }

    .back-top:hover {
      border-color: var(--orange-light);
      color: var(--orange-light);
    }

    @media screen and (max-width: 1024px) {
      .desktop-nav {
        gap: 0;
      }

      .nav-link {
        padding-left: 8px;
        padding-right: 8px;
        font-size: .86rem;
      }

      .hero-inner {
        gap: 42px;
      }

      .question-entries,
      .scene-layout {
        gap: 30px;
      }

      .contact-shell {
        gap: 34px;
        padding: 44px;
      }
    }

    @media screen and (max-width: 768px) {
      .container,
      .topbar-inner {
        width: min(100% - 32px, var(--container));
      }

      .topbar {
        min-height: 31px;
      }

      .topbar-inner {
        overflow: hidden;
        gap: 12px;
      }

      .topbar-status {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .topbar-action {
        display: none;
      }

      .nav-shell {
        min-height: 72px;
      }

      .desktop-nav {
        display: none;
      }

      .nav-menu {
        display: inline-flex;
      }

      .hero-inner {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 52px 0 59px;
      }

      .page-hero::before {
        background-position: 62% center;
      }

      .question-panel {
        max-width: 520px;
      }

      .section {
        padding: 73px 0;
      }

      .section-heading {
        display: block;
        margin-bottom: 31px;
      }

      .heading-index {
        margin-top: 20px;
      }

      .question-entries,
      .scene-layout,
      .faq-layout,
      .contact-shell {
        grid-template-columns: 1fr;
      }

      .entry-lead {
        min-height: 300px;
      }

      .comparison-layout {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .criterion-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .criterion-note {
        display: none;
      }

      .compare-result {
        min-height: auto;
      }

      .process-grid {
        grid-template-columns: 1fr;
      }

      .process-step,
      .process-step + .process-step {
        min-height: auto;
        padding: 26px 0;
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      .process-step:first-child {
        border-top: 0;
      }

      .process-step::after {
        display: none;
      }

      .contact-section {
        padding-bottom: 73px;
      }

      .footer-main {
        grid-template-columns: 1.3fr 1fr 1fr;
        gap: 30px;
      }
    }

    @media screen and (max-width: 560px) {
      h1 {
        font-size: 2.3rem;
      }

      h2 {
        font-size: 1.85rem;
      }

      .question-search {
        display: block;
      }

      .question-search input {
        width: 100%;
        margin-bottom: 9px;
      }

      .question-search .button {
        width: 100%;
      }

      .entry-list {
        grid-template-columns: 1fr;
      }

      .question-route {
        min-height: auto;
      }

      .criterion-nav {
        grid-template-columns: 1fr;
      }

      .criterion-button {
        padding: 12px 15px;
      }

      .compare-result {
        padding: 25px 21px;
      }

      .compare-board {
        grid-template-columns: 1fr;
      }

      .scene-image img {
        aspect-ratio: 1.2 / 1;
      }

      .contact-shell {
        padding: 31px 20px;
        border-radius: var(--radius-md);
      }

      .contact-form {
        padding: 21px 17px;
      }

      .form-grid {
        grid-template-columns: 1fr;
        gap: 13px;
      }

      .form-field.full {
        grid-column: auto;
      }

      .form-actions {
        display: block;
      }

      .form-actions .button {
        width: 100%;
        margin-top: 14px;
      }

      .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .footer-bottom {
        display: block;
      }

      .back-top {
        display: inline-block;
        margin-top: 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition-duration: .01ms !important;
      }
    }