/* roulang page: index */
:root {
      --bg: #f5f7f6;
      --bg-soft: #eef2f1;
      --surface: #ffffff;
      --surface-2: #f9fbfa;
      --ink: #17201f;
      --muted: #5d6b68;
      --weak: #85908d;
      --line: #dce4e1;
      --dark: #151b1b;
      --dark-2: #202929;
      --cyan: #00a9b8;
      --cyan-dark: #007f8c;
      --green: #26b36a;
      --orange: #f28a2e;
      --red: #d95a4e;
      --shadow: 0 16px 46px rgba(23, 32, 31, .10);
      --shadow-soft: 0 10px 28px rgba(23, 32, 31, .08);
      --radius-lg: 16px;
      --radius: 12px;
      --radius-sm: 8px;
      --container: 1220px;
      --header-h: 112px;
      --focus: 0 0 0 3px rgba(0, 169, 184, .24);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.78;
      font-size: 16px;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; border: 0; background: none; color: inherit; }
    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: var(--radius-sm);
      padding: 12px 13px;
      color: var(--ink);
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
      outline: none;
      box-shadow: var(--focus);
      border-color: var(--cyan);
    }
    textarea { min-height: 104px; resize: vertical; }
    .container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
    .section { padding: 88px 0; position: relative; }
    .section.alt { background: var(--surface); }
    .section.soft { background: var(--bg-soft); }
    .section-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr); gap: 38px; align-items: end; margin-bottom: 34px; }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--cyan-dark);
      background: rgba(0, 169, 184, .09);
      border: 1px solid rgba(0, 169, 184, .22);
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .section-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
    h1, h2, h3 { line-height: 1.22; font-weight: 800; letter-spacing: 0; }
    h1 { font-size: clamp(32px, 5vw, 54px); color: #fff; max-width: 880px; }
    h2 { font-size: clamp(25px, 3vw, 36px); }
    h3 { font-size: 20px; }
    p { color: var(--muted); }
    .lead { font-size: 17px; color: #dce9e7; max-width: 820px; margin-top: 18px; }
    .section-desc { font-size: 17px; color: var(--muted); max-width: 640px; }
    .btn {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 18px;
      border-radius: 10px;
      font-weight: 800;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
    .btn-primary { background: var(--cyan); color: #071514; box-shadow: 0 10px 24px rgba(0, 169, 184, .24); }
    .btn-primary:hover { background: #20c3cf; box-shadow: 0 12px 30px rgba(0, 169, 184, .32); }
    .btn-secondary { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28); }
    .btn-secondary:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.48); }
    .btn-line { color: var(--ink); background: #fff; border-color: var(--line); }
    .btn-line:hover { border-color: var(--cyan); box-shadow: var(--shadow-soft); }
    .tag, .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      color: var(--cyan-dark);
      background: rgba(0, 169, 184, .08);
      border: 1px solid rgba(0, 169, 184, .18);
    }
    .badge.green { color: #157747; background: rgba(38,179,106,.10); border-color: rgba(38,179,106,.22); }
    .badge.orange { color: #9a531d; background: rgba(242,138,46,.12); border-color: rgba(242,138,46,.26); }
    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 1px 0 rgba(23,32,31,.03);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .card:hover { transform: translateY(-3px); border-color: rgba(0,169,184,.45); box-shadow: var(--shadow-soft); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(245,247,246,.94);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(220,228,225,.88);
      transition: box-shadow .2s ease;
    }
    .site-header.is-scrolled { box-shadow: 0 12px 32px rgba(23,32,31,.08); }
    .topbar {
      min-height: 38px;
      border-bottom: 1px solid rgba(220,228,225,.75);
      font-size: 13px;
      color: var(--muted);
    }
    .topbar .container, .nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .topbar .container { min-height: 38px; }
    .top-meta, .top-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
    .top-links a { color: var(--muted); transition: color .2s ease; }
    .top-links a:hover { color: var(--cyan-dark); }
    .nav-row { min-height: 72px; }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-weight: 900;
      color: var(--ink);
      min-height: 44px;
    }
    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background:
        linear-gradient(135deg, var(--cyan), var(--green));
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 20px rgba(0,169,184,.18);
    }
    .brand-mark::before, .brand-mark::after {
      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      height: 2px;
      background: rgba(7,21,20,.88);
      border-radius: 99px;
    }
    .brand-mark::before { top: 13px; }
    .brand-mark::after { top: 22px; width: 12px; right: auto; }
    .brand-text { display: grid; line-height: 1.1; }
    .brand-text strong { font-size: 17px; }
    .brand-text span { font-size: 12px; color: var(--muted); font-weight: 700; }
    .main-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
    }
    .main-nav a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
      border-radius: 9px;
      color: #31403d;
      font-weight: 700;
      font-size: 15px;
      transition: color .2s ease, background .2s ease;
    }
    .main-nav a:hover, .main-nav a.active { color: #071514; background: rgba(0,169,184,.10); }
    .nav-cta { margin-left: 10px; }
    .menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      align-items: center;
      justify-content: center;
    }
    .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
      width: 20px;
      height: 2px;
      background: var(--ink);
      border-radius: 99px;
      display: block;
      position: relative;
      transition: transform .2s ease, opacity .2s ease;
    }
    .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
    .menu-toggle span::before { top: -7px; }
    .menu-toggle span::after { top: 7px; }
    .menu-toggle[aria-expanded="true"] span { background: transparent; }
    .menu-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

    .hero {
      min-height: calc(100vh - var(--header-h) - 42px);
      max-height: 760px;
      position: relative;
      overflow: hidden;
      background: #111918;
      display: flex;
      align-items: stretch;
    }
    .hero-slider { position: absolute; inset: 0; }
    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .7s ease;
      background-size: cover;
      background-position: center;
    }
    .hero-slide.active { opacity: 1; }
    .hero-slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(12,18,18,.92), rgba(12,18,18,.58) 54%, rgba(12,18,18,.24)),
        linear-gradient(0deg, rgba(12,18,18,.40), rgba(12,18,18,.08));
    }
    .hero-grid {
      position: relative;
      z-index: 2;
      width: 100%;
      display: grid;
      align-items: center;
      padding: 72px 0 54px;
    }
    .hero-content { max-width: 900px; }
    .hero-region {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #dff7f5;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 14px;
      font-weight: 800;
      margin-bottom: 18px;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
    .trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }
    .trust-row .badge { background: rgba(255,255,255,.11); color: #e6fffb; border-color: rgba(255,255,255,.22); }
    .hero-panel {
      margin-top: 38px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 760px;
      border: 1px solid rgba(255,255,255,.20);
      background: rgba(9, 18, 18, .44);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .hero-panel div { padding: 16px 18px; border-right: 1px solid rgba(255,255,255,.16); }
    .hero-panel div:last-child { border-right: 0; }
    .hero-panel strong { display: block; color: #fff; font-size: 24px; line-height: 1.2; font-family: Consolas, Menlo, monospace; }
    .hero-panel span { color: #bdd0cd; font-size: 13px; }
    .slider-controls {
      position: absolute;
      z-index: 3;
      right: max(20px, calc((100vw - var(--container)) / 2));
      bottom: 34px;
      display: flex;
      gap: 9px;
    }
    .slider-dot {
      width: 42px;
      height: 4px;
      border-radius: 99px;
      background: rgba(255,255,255,.35);
      transition: background .2s ease, width .2s ease;
    }
    .slider-dot.active { width: 58px; background: var(--cyan); }

    .pain-layout {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
      gap: 34px;
      align-items: stretch;
    }
    .issue-list { display: grid; gap: 14px; }
    .issue-item {
      padding: 18px;
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 14px;
      align-items: start;
    }
    .issue-icon, .cap-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(242,138,46,.14);
      color: var(--orange);
      display: grid;
      place-items: center;
      font-weight: 900;
    }
    .risk-board {
      padding: 22px;
      background: var(--dark);
      color: #fff;
      border-radius: var(--radius-lg);
      overflow: hidden;
      position: relative;
    }
    .risk-board::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: .55;
    }
    .risk-board > * { position: relative; z-index: 1; }
    .risk-map {
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .risk-cell {
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      border-radius: 12px;
      padding: 16px;
      min-height: 118px;
    }
    .risk-cell strong { display: block; margin-bottom: 7px; color: #fff; }
    .risk-cell p { color: #b7c6c3; font-size: 14px; }

    .intro-grid, .dark-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
      gap: 42px;
      align-items: center;
    }
    .image-frame {
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
      background: #fff;
    }
    .image-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
    .image-frame:hover img { transform: scale(1.035); }
    .param-strip {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .param {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: var(--radius);
      padding: 14px;
    }
    .param strong { display: block; font-size: 18px; color: var(--ink); }
    .param span { color: var(--muted); font-size: 13px; }

    .architecture {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 24px;
      box-shadow: var(--shadow-soft);
    }
    .arch-layers {
      display: grid;
      gap: 12px;
    }
    .arch-layer {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 16px;
      align-items: center;
      padding: 16px;
      border-radius: 12px;
      background: var(--surface-2);
      border: 1px solid var(--line);
    }
    .arch-layer strong { color: var(--ink); }
    .module-tags { display: flex; flex-wrap: wrap; gap: 8px; }

    .adv-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr;
      gap: 16px;
    }
    .adv-card { padding: 22px; min-height: 210px; }
    .adv-card.featured { grid-row: span 2; background: #182221; color: #fff; border-color: #263635; }
    .adv-card.featured p { color: #c4d1ce; }
    .adv-card h3 { margin: 14px 0 10px; }
    .adv-card .tag { margin-top: 14px; }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .product-card { overflow: hidden; }
    .product-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
    .product-body { padding: 20px; }
    .product-body h3 { margin: 13px 0 9px; }
    .check-list { list-style: none; display: grid; gap: 8px; margin: 14px 0 18px; color: var(--muted); }
    .check-list li { padding-left: 22px; position: relative; }
    .check-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .72em;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
    }

    .timeline {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: #fff;
    }
    .step {
      padding: 24px 18px;
      border-right: 1px solid var(--line);
      position: relative;
      min-height: 210px;
    }
    .step:last-child { border-right: 0; }
    .step-num {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      background: #e8f8f7;
      color: var(--cyan-dark);
      display: grid;
      place-items: center;
      font-weight: 900;
      margin-bottom: 18px;
      font-family: Consolas, Menlo, monospace;
    }
    .step h3 { font-size: 18px; margin-bottom: 8px; }

    .dark-section {
      background: #121817;
      color: #fff;
      overflow: hidden;
    }
    .dark-section .section-kicker { color: #c8fffb; background: rgba(0,169,184,.14); border-color: rgba(0,169,184,.38); }
    .dark-section h2, .dark-section h3 { color: #fff; }
    .dark-section p { color: #bdd0cd; }
    .dark-visual {
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .dark-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .92; }
    .log-panel {
      margin-top: 18px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(0,0,0,.22);
    }
    .log-row {
      display: grid;
      grid-template-columns: 112px 1fr 72px;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      color: #d9e8e5;
      font-size: 14px;
    }
    .log-row:last-child { border-bottom: 0; }
    .status-ok { color: #66e097; }
    .status-watch { color: #ffbd72; }

    .story-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr;
      gap: 18px;
    }
    .story-card { padding: 22px; }
    .story-card:first-child { background: #f2fbfa; border-color: rgba(0,169,184,.25); }
    .story-meta {
      display: grid;
      gap: 10px;
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .story-meta span { color: var(--muted); font-size: 14px; }

    .stat-band {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }
    .stat {
      padding: 24px 18px;
      border-right: 1px solid var(--line);
    }
    .stat:last-child { border-right: 0; }
    .stat strong {
      display: block;
      font-size: 32px;
      line-height: 1.1;
      color: var(--ink);
      font-family: Consolas, Menlo, monospace;
    }
    .stat span { color: var(--muted); font-size: 14px; }

    .review-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .review-card { padding: 24px; }
    .role {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .role strong { color: var(--ink); }
    .quote {
      font-size: 17px;
      color: #34423f;
      position: relative;
    }

    .news-list {
      display: grid;
      gap: 12px;
    }
    .news-item {
      display: grid;
      grid-template-columns: 156px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 16px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: #fff;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .news-item:hover { transform: translateY(-2px); border-color: rgba(0,169,184,.42); box-shadow: var(--shadow-soft); }
    .news-item img { width: 156px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
    .news-text h3 { margin-bottom: 6px; }
    .news-date { color: var(--weak); font-size: 13px; font-family: Consolas, Menlo, monospace; }

    .faq-wrap {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(360px, .9fr);
      gap: 34px;
      align-items: start;
    }
    .faq-list { display: grid; gap: 12px; }
    .faq-item {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: var(--radius);
      overflow: hidden;
    }
    .faq-q {
      width: 100%;
      min-height: 56px;
      padding: 16px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      text-align: left;
      font-weight: 800;
    }
    .faq-q .plus {
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: rgba(0,169,184,.10);
      color: var(--cyan-dark);
      transition: transform .2s ease;
    }
    .faq-item.open .plus { transform: rotate(45deg); }
    .faq-a {
      display: none;
      padding: 0 18px 18px;
      color: var(--muted);
    }
    .faq-item.open .faq-a { display: block; }
    .contact-panel {
      background: #121817;
      border-radius: var(--radius-lg);
      padding: 26px;
      color: #fff;
      border: 1px solid rgba(255,255,255,.12);
      position: sticky;
      top: 132px;
    }
    .contact-panel p { color: #bdd0cd; }
    .contact-form { display: grid; gap: 12px; margin-top: 20px; }
    .contact-form input, .contact-form select, .contact-form textarea {
      background: rgba(255,255,255,.08);
      color: #fff;
      border-color: rgba(255,255,255,.18);
    }
    .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.55); }
    .form-note { font-size: 13px; color: #aebfbc; }

    .site-footer {
      background: #0f1514;
      color: #d7e4e1;
      padding: 54px 0 24px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr .65fr .7fr .9fr;
      gap: 34px;
      padding-bottom: 34px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .footer-grid h3 { color: #fff; font-size: 17px; margin-bottom: 14px; }
    .footer-grid p, .footer-grid li, .footer-bottom { color: #aebfbc; font-size: 14px; }
    .footer-links { list-style: none; display: grid; gap: 9px; }
    .footer-links a { color: #aebfbc; transition: color .2s ease; }
    .footer-links a:hover { color: #7ff4ef; }
    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 14px;
      padding-top: 22px;
    }

    @media (max-width: 1200px) {
      .main-nav a { padding: 0 9px; font-size: 14px; }
      .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .step { border-bottom: 1px solid var(--line); }
      .step:nth-child(3n) { border-right: 0; }
      .step:nth-last-child(-n+3) { border-bottom: 0; }
    }
    @media (max-width: 992px) {
      :root { --header-h: 78px; }
      .topbar { display: none; }
      .menu-toggle { display: inline-flex; }
      .main-nav {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 78px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow);
      }
      .main-nav.open { display: flex; }
      .main-nav a { width: 100%; justify-content: flex-start; }
      .nav-cta { display: none; }
      .section-head, .pain-layout, .intro-grid, .dark-grid, .faq-wrap { grid-template-columns: 1fr; }
      .adv-grid, .product-grid, .story-grid, .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .adv-card.featured { grid-row: auto; grid-column: 1 / -1; }
      .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stat { border-bottom: 1px solid var(--line); }
      .stat:nth-child(2n) { border-right: 0; }
      .contact-panel { position: static; }
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 28px, var(--container)); }
      .section { padding: 64px 0; }
      .hero { min-height: 640px; max-height: none; }
      .hero-grid { padding: 58px 0 44px; }
      .lead { font-size: 16px; }
      .hero-panel, .param-strip, .risk-map, .timeline, .adv-grid, .product-grid, .story-grid, .review-grid, .stat-band { grid-template-columns: 1fr; }
      .hero-panel div, .stat, .step { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
      .stat, .step { border-bottom-color: var(--line); }
      .hero-panel div:last-child, .stat:last-child, .step:last-child { border-bottom: 0; }
      .arch-layer { grid-template-columns: 1fr; }
      .news-item { grid-template-columns: 112px 1fr; }
      .news-date { grid-column: 2; }
      .news-item img { width: 112px; }
      .slider-controls { left: 14px; right: auto; bottom: 20px; }
    }
    @media (max-width: 576px) {
      .brand-text span { display: none; }
      .brand-text strong { font-size: 15px; }
      .hero-actions, .btn { width: 100%; }
      .btn { white-space: normal; }
      .role { align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; }
      .log-row { grid-template-columns: 1fr; gap: 4px; }
    }
    @media (max-width: 375px) {
      h1 { font-size: 30px; }
      h2 { font-size: 24px; }
      .container { width: min(100% - 24px, var(--container)); }
      .section { padding: 54px 0; }
      .hero-region { align-items: flex-start; border-radius: 12px; }
      .news-item { grid-template-columns: 1fr; }
      .news-item img { width: 100%; }
      .news-date { grid-column: auto; }
    }

/* roulang page: category2 */
*,
*::before,
*::after { box-sizing: border-box; }
:root {
 --bg: #f5f7f6;
 --bg-soft: #eef2f1;
 --surface: #ffffff;
 --surface-2: #f9fbfa;
 --ink: #17201f;
 --muted: #5d6b68;
 --weak: #85908d;
 --line: #dce4e1;
 --dark: #151b1b;
 --dark-2: #202929;
 --cyan: #00a9b8;
 --cyan-dark: #007f8c;
 --green: #26b36a;
 --orange: #f28a2e;
 --red: #d95a4e;
 --shadow: 0 16px 46px rgba(23, 32, 31, .10);
 --shadow-soft: 0 10px 28px rgba(23, 32, 31, .08);
 --radius-lg: 16px;
 --radius: 12px;
 --radius-sm: 8px;
 --container: 1220px;
 --header-h: 112px;
 --focus: 0 0 0 3px rgba(0, 169, 184, .24);
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, Arial, sans-serif;
 color: var(--ink);
 background: var(--bg);
 line-height: 1.78;
 font-size: 16px;
 overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea {
 width: 100%;
 border: 1px solid var(--line);
 background: #fff;
 border-radius: var(--radius-sm);
 padding: 12px 13px;
 color: var(--ink);
 outline: none;
 transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
 outline: none;
 box-shadow: var(--focus);
 border-color: var(--cyan);
}
textarea { min-height: 104px; resize: vertical; }
.container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
.section { padding: 86px 0; position: relative; }
.section.alt { background: var(--surface); }
.section.soft { background: var(--bg-soft); }
.section.dark { background: var(--dark); color: #eef8f6; overflow: hidden; }
.section-head {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr);
 gap: 38px;
 align-items: end;
 margin-bottom: 34px;
}
.section-kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--cyan-dark);
 background: rgba(0, 169, 184, .09);
 border: 1px solid rgba(0, 169, 184, .22);
 border-radius: 999px;
 padding: 5px 10px;
 font-size: 13px;
 font-weight: 700;
 margin-bottom: 12px;
}
.section-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(31px, 4vw, 52px); line-height: 1.16; margin-bottom: 18px; letter-spacing: 0; }
h2 { font-size: clamp(25px, 3vw, 35px); line-height: 1.28; margin-bottom: 12px; letter-spacing: 0; }
h3 { font-size: 20px; line-height: 1.36; margin-bottom: 10px; letter-spacing: 0; }
p { color: var(--muted); }
.section.dark p, .section.dark .section-desc { color: #c8d7d4; }
.section-desc { font-size: 17px; color: var(--muted); max-width: 660px; }
.btn {
 min-height: 46px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 9px;
 padding: 12px 18px;
 border-radius: 10px;
 font-weight: 800;
 transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
 border: 1px solid transparent;
 white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--cyan); color: #071514; box-shadow: 0 10px 24px rgba(0, 169, 184, .24); }
.btn-primary:hover { background: #20c3cf; box-shadow: 0 12px 30px rgba(0, 169, 184, .32); }
.btn-secondary { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-secondary:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.48); }
.btn-line { color: var(--ink); background: #fff; border-color: var(--line); }
.btn-line:hover { border-color: var(--cyan); box-shadow: var(--shadow-soft); }
.tag, .badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 5px 9px;
 border-radius: 999px;
 font-size: 13px;
 font-weight: 700;
 color: var(--cyan-dark);
 background: rgba(0, 169, 184, .08);
 border: 1px solid rgba(0, 169, 184, .18);
}
.badge.green { color: #157747; background: rgba(38,179,106,.10); border-color: rgba(38,179,106,.22); }
.badge.orange { color: #9a531d; background: rgba(242,138,46,.12); border-color: rgba(242,138,46,.26); }
.card {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 box-shadow: 0 1px 0 rgba(23,32,31,.03);
 transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-3px); border-color: rgba(0,169,184,.45); box-shadow: var(--shadow-soft); }

.site-header {
 position: sticky;
 top: 0;
 z-index: 60;
 background: rgba(245,247,246,.94);
 backdrop-filter: blur(14px);
 border-bottom: 1px solid rgba(220,228,225,.88);
 transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 12px 32px rgba(23,32,31,.08); }
.topbar {
 min-height: 38px;
 border-bottom: 1px solid rgba(220,228,225,.75);
 font-size: 13px;
 color: var(--muted);
}
.topbar .container, .nav-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 18px;
}
.topbar .container { min-height: 38px; }
.top-meta, .top-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.top-links a { color: var(--muted); transition: color .2s ease; }
.top-links a:hover { color: var(--cyan-dark); }
.nav-row { min-height: 72px; }
.brand {
 display: inline-flex;
 align-items: center;
 gap: 11px;
 font-weight: 900;
 color: var(--ink);
 min-height: 44px;
}
.brand-mark {
 width: 38px;
 height: 38px;
 border-radius: 11px;
 background: linear-gradient(135deg, var(--cyan), var(--green));
 position: relative;
 box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 20px rgba(0,169,184,.18);
}
.brand-mark::before, .brand-mark::after {
 content: "";
 position: absolute;
 left: 9px;
 right: 9px;
 height: 2px;
 background: rgba(7,21,20,.88);
 border-radius: 99px;
}
.brand-mark::before { top: 13px; }
.brand-mark::after { top: 22px; width: 12px; right: auto; }
.brand-text { display: grid; line-height: 1.1; }
.brand-text strong { font-size: 17px; }
.brand-text span { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 4px; }
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
 min-height: 44px;
 display: inline-flex;
 align-items: center;
 padding: 10px 13px;
 border-radius: 10px;
 color: #31403d;
 font-weight: 800;
 font-size: 15px;
 transition: background .2s ease, color .2s ease;
}
.main-nav a:hover, .main-nav a.active { background: rgba(0,169,184,.10); color: var(--cyan-dark); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle {
 display: none;
 width: 46px;
 height: 46px;
 border: 1px solid var(--line);
 border-radius: 10px;
 background: #fff;
 position: relative;
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
 content: "";
 position: absolute;
 left: 12px;
 right: 12px;
 height: 2px;
 background: var(--ink);
 border-radius: 2px;
 transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle span { top: 22px; }
.menu-toggle::before { top: 15px; }
.menu-toggle::after { top: 29px; }
.menu-toggle[aria-expanded="true"] span { opacity: 0; }
.menu-toggle[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }

.category-hero {
 padding: 58px 0 72px;
 background:
  linear-gradient(90deg, rgba(245,247,246,.96) 0%, rgba(245,247,246,.88) 46%, rgba(245,247,246,.64) 100%),
  url('/assets/images/fad20a7ed1b2420f.webp') center/cover no-repeat;
 border-bottom: 1px solid var(--line);
}
.hero-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) 420px;
 gap: 42px;
 align-items: center;
}
.hero-copy p { font-size: 18px; max-width: 740px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.param-panel {
 background: rgba(255,255,255,.92);
 border: 1px solid rgba(220,228,225,.92);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow);
 padding: 22px;
}
.param-panel h2 { font-size: 21px; margin-bottom: 16px; }
.param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.param-item {
 background: var(--surface-2);
 border: 1px solid var(--line);
 border-radius: 12px;
 padding: 14px;
}
.param-item strong { display: block; font-size: 25px; line-height: 1.2; color: var(--ink); }
.param-item span { display: block; color: var(--muted); font-size: 13px; margin-top: 5px; }
.param-note {
 margin-top: 14px;
 padding: 12px;
 border-radius: 12px;
 background: rgba(38,179,106,.09);
 color: #236246;
 font-size: 14px;
 border: 1px solid rgba(38,179,106,.20);
}

.capability-layout {
 display: grid;
 grid-template-columns: 1.1fr .9fr;
 gap: 24px;
 align-items: stretch;
}
.capability-list {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px;
}
.cap-card { padding: 22px; }
.cap-card .icon {
 width: 38px;
 height: 38px;
 border-radius: 12px;
 display: grid;
 place-items: center;
 color: #061a18;
 font-weight: 900;
 background: linear-gradient(135deg, rgba(0,169,184,.95), rgba(38,179,106,.95));
 margin-bottom: 15px;
}
.cap-card ul, .edge-list, .faq-answer ul {
 margin: 12px 0 0;
 padding-left: 18px;
 color: var(--muted);
}
.cap-card li, .edge-list li { margin: 6px 0; }
.feature-image {
 min-height: 100%;
 border-radius: var(--radius-lg);
 overflow: hidden;
 border: 1px solid var(--line);
 position: relative;
 background: var(--dark);
}
.feature-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.feature-image:hover img { transform: scale(1.035); }
.image-overlay {
 position: absolute;
 inset: auto 18px 18px 18px;
 padding: 16px;
 border-radius: 14px;
 background: rgba(21,27,27,.78);
 color: #eef8f6;
 backdrop-filter: blur(8px);
}
.image-overlay p { color: #c8d7d4; margin-bottom: 0; font-size: 14px; }

.io-table-wrap {
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 overflow: hidden;
 background: #fff;
 box-shadow: 0 1px 0 rgba(23,32,31,.03);
}
.io-table {
 width: 100%;
 border-collapse: collapse;
 min-width: 760px;
}
.io-table th, .io-table td {
 padding: 16px 18px;
 text-align: left;
 border-bottom: 1px solid var(--line);
 vertical-align: top;
}
.io-table th {
 background: #edf4f2;
 font-size: 14px;
 color: #31403d;
}
.io-table td { color: var(--muted); }
.io-table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.training-flow {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 14px;
 counter-reset: flow;
}
.flow-step {
 position: relative;
 padding: 22px 18px;
 background: #fff;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 min-height: 184px;
}
.flow-step::before {
 counter-increment: flow;
 content: "0" counter(flow);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-radius: 10px;
 background: var(--dark);
 color: var(--cyan);
 font-weight: 900;
 margin-bottom: 16px;
}
.flow-step p { font-size: 15px; margin-bottom: 0; }

.edge-grid {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 28px;
 align-items: center;
}
.edge-panel {
 background: var(--dark-2);
 border: 1px solid rgba(255,255,255,.12);
 border-radius: var(--radius-lg);
 padding: 24px;
}
.edge-panel h3 { color: #fff; }
.edge-metrics {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 margin-top: 22px;
}
.edge-metric {
 padding: 16px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.12);
 background: rgba(255,255,255,.05);
}
.edge-metric strong { display: block; font-size: 24px; color: var(--cyan); }
.edge-metric span { color: #c8d7d4; font-size: 13px; }

.visual-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 380px;
 gap: 24px;
 align-items: stretch;
}
.visual-main {
 position: relative;
 border-radius: var(--radius-lg);
 overflow: hidden;
 border: 1px solid var(--line);
 min-height: 420px;
}
.visual-main img { width: 100%; height: 100%; object-fit: cover; }
.hud-box {
 position: absolute;
 border: 2px solid rgba(0,169,184,.86);
 background: rgba(0,169,184,.08);
 border-radius: 8px;
}
.hud-box.one { width: 24%; height: 18%; left: 16%; top: 32%; }
.hud-box.two { width: 18%; height: 15%; right: 18%; top: 42%; border-color: rgba(38,179,106,.9); }
.hud-box.three { width: 14%; height: 12%; left: 48%; bottom: 22%; border-color: rgba(242,138,46,.9); }
.visual-side {
 display: grid;
 gap: 14px;
}
.signal-card {
 padding: 18px;
 border-radius: var(--radius);
 border: 1px solid var(--line);
 background: #fff;
}
.signal-card strong { display: block; margin-bottom: 8px; }
.signal-line {
 height: 8px;
 border-radius: 99px;
 background: #edf4f2;
 overflow: hidden;
}
.signal-line span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--green)); }

.article-list {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 18px;
}
.article-card {
 padding: 22px;
 display: grid;
 gap: 10px;
}
.article-card time { color: var(--weak); font-size: 13px; }
.article-card p { margin-bottom: 0; }
.more-row { display: flex; justify-content: center; margin-top: 26px; }

.faq-layout {
 display: grid;
 grid-template-columns: .82fr 1.18fr;
 gap: 34px;
 align-items: start;
}
.faq-list { display: grid; gap: 12px; }
.faq-item {
 background: #fff;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 overflow: hidden;
}
.faq-question {
 min-height: 56px;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 16px 18px;
 font-weight: 900;
 text-align: left;
}
.faq-question::after {
 content: "+";
 width: 26px;
 height: 26px;
 border-radius: 8px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: rgba(0,169,184,.10);
 color: var(--cyan-dark);
 flex: 0 0 auto;
}
.faq-item.is-open .faq-question::after { content: "−"; background: var(--cyan); color: #061a18; }
.faq-answer {
 display: none;
 padding: 0 18px 18px;
 color: var(--muted);
}
.faq-item.is-open .faq-answer { display: block; }
.contact-panel {
 background: var(--dark);
 color: #fff;
 border-radius: var(--radius-lg);
 padding: 26px;
 border: 1px solid rgba(255,255,255,.10);
}
.contact-panel p { color: #c8d7d4; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.contact-panel input, .contact-panel select, .contact-panel textarea {
 background: rgba(255,255,255,.08);
 border-color: rgba(255,255,255,.20);
 color: #fff;
}
.contact-panel input::placeholder, .contact-panel textarea::placeholder { color: #aebfbc; }
.contact-panel select option { color: var(--ink); }
.contact-panel .btn { width: 100%; margin-top: 12px; }

.site-footer {
 background: #111717;
 color: #c8d7d4;
 padding: 64px 0 24px;
}
.footer-grid {
 display: grid;
 grid-template-columns: 1.15fr .7fr .9fr 1fr;
 gap: 34px;
}
.site-footer h3 { color: #fff; font-size: 17px; margin-bottom: 14px; }
.site-footer p { color: #aebfbc; margin-bottom: 0; }
.footer-links {
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 gap: 10px;
}
.footer-links a { color: #c8d7d4; transition: color .2s ease; }
.footer-links a:hover { color: var(--cyan); }
.footer-bottom {
 margin-top: 38px;
 padding-top: 20px;
 border-top: 1px solid rgba(255,255,255,.10);
 display: flex;
 justify-content: space-between;
 gap: 18px;
 flex-wrap: wrap;
 color: #8fa09d;
 font-size: 13px;
}

@media (max-width: 1200px) {
 .container { width: min(100% - 32px, var(--container)); }
 .hero-grid, .capability-layout, .visual-grid { grid-template-columns: 1fr; }
 .feature-image { min-height: 360px; }
}
@media (max-width: 992px) {
 .topbar { display: none; }
 .nav-row { min-height: 70px; }
 .menu-toggle { display: inline-flex; }
 .main-nav {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 70px;
  display: none;
  flex-direction: column;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
 }
 .main-nav.is-open { display: flex; }
 .main-nav a { justify-content: flex-start; }
 .nav-actions .btn { display: none; }
 .section, .category-hero { padding: 62px 0; }
 .section-head, .faq-layout, .edge-grid { grid-template-columns: 1fr; }
 .training-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
 body { font-size: 15px; }
 .container { width: min(100% - 28px, var(--container)); }
 .capability-list, .article-list, .param-grid, .edge-metrics { grid-template-columns: 1fr; }
 .training-flow { grid-template-columns: 1fr; }
 .form-grid { grid-template-columns: 1fr; }
 .hero-actions { align-items: stretch; }
 .hero-actions .btn { width: 100%; }
 .visual-main { min-height: 320px; }
 .footer-grid { grid-template-columns: 1fr; }
 .footer-bottom { display: grid; }
}
@media (max-width: 576px) {
 .brand-text strong { font-size: 15px; }
 .brand-text span { font-size: 11px; }
 .section { padding: 54px 0; }
 .category-hero { padding: 46px 0 56px; }
 .param-panel, .contact-panel { padding: 18px; }
 .io-table { min-width: 660px; }
 .btn { width: 100%; white-space: normal; }
 .nav-actions { gap: 8px; }
}
@media (max-width: 375px) {
 .container { width: min(100% - 24px, var(--container)); }
 h1 { font-size: 30px; }
 h2 { font-size: 24px; }
 .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
 .brand-text strong { font-size: 14px; }
 .param-item strong { font-size: 22px; }
}

/* roulang page: category1 */
:root {
      --bg: #f5f7f6;
      --bg-soft: #eef2f1;
      --surface: #ffffff;
      --surface-2: #f9fbfa;
      --ink: #17201f;
      --muted: #5d6b68;
      --weak: #85908d;
      --line: #dce4e1;
      --dark: #151b1b;
      --dark-2: #202929;
      --cyan: #00a9b8;
      --cyan-dark: #007f8c;
      --green: #26b36a;
      --orange: #f28a2e;
      --red: #d95a4e;
      --shadow: 0 16px 46px rgba(23, 32, 31, .10);
      --shadow-soft: 0 10px 28px rgba(23, 32, 31, .08);
      --radius-lg: 16px;
      --radius: 12px;
      --radius-sm: 8px;
      --container: 1220px;
      --header-h: 112px;
      --focus: 0 0 0 3px rgba(0, 169, 184, .24);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.78;
      font-size: 16px;
      overflow-x: hidden;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { line-height: 1.25; letter-spacing: 0; }
    h1 { font-size: clamp(34px, 4vw, 54px); margin-bottom: 18px; }
    h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 14px; }
    h3 { font-size: 20px; margin-bottom: 10px; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; border: 0; background: none; color: inherit; }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: none;
      box-shadow: var(--focus);
    }
    .container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
    .section { padding: 88px 0; position: relative; }
    .section.alt { background: var(--surface); }
    .section.soft { background: var(--bg-soft); }
    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr);
      gap: 38px;
      align-items: end;
      margin-bottom: 34px;
    }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--cyan-dark);
      background: rgba(0, 169, 184, .09);
      border: 1px solid rgba(0, 169, 184, .22);
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .section-kicker::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
    }
    .section-desc { font-size: 17px; color: var(--muted); max-width: 650px; }
    .muted { color: var(--muted); }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--green);
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 25px;
      height: 1px;
      background: var(--green);
    }

    .btn {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 18px;
      border-radius: 10px;
      font-weight: 800;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
    .btn-primary {
      background: var(--cyan);
      color: #071514;
      box-shadow: 0 10px 24px rgba(0, 169, 184, .24);
    }
    .btn-primary:hover { background: #20c3cf; box-shadow: 0 12px 30px rgba(0, 169, 184, .32); }
    .btn-line { color: var(--ink); background: #fff; border-color: var(--line); }
    .btn-line:hover { border-color: var(--cyan); box-shadow: var(--shadow-soft); }
    .btn-dark { background: var(--dark); color: #fff; }
    .btn-dark:hover { background: var(--dark-2); }
    .tag, .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      color: var(--cyan-dark);
      background: rgba(0, 169, 184, .08);
      border: 1px solid rgba(0, 169, 184, .18);
    }
    .badge.green { color: #157747; background: rgba(38,179,106,.10); border-color: rgba(38,179,106,.22); }
    .badge.orange { color: #9a531d; background: rgba(242,138,46,.12); border-color: rgba(242,138,46,.26); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(245,247,246,.94);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(220,228,225,.88);
      transition: box-shadow .2s ease;
    }
    .site-header.is-scrolled { box-shadow: 0 12px 32px rgba(23,32,31,.08); }
    .topbar {
      min-height: 38px;
      border-bottom: 1px solid rgba(220,228,225,.75);
      font-size: 13px;
      color: var(--muted);
    }
    .topbar .container, .nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .topbar .container { min-height: 38px; }
    .top-meta, .top-links {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
    }
    .top-links a { color: var(--muted); transition: color .2s ease; }
    .top-links a:hover { color: var(--cyan-dark); }
    .nav-row { min-height: 72px; }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-weight: 900;
      color: var(--ink);
      min-height: 44px;
    }
    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      background: linear-gradient(135deg, var(--cyan), var(--green));
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 20px rgba(0,169,184,.18);
      flex: 0 0 auto;
    }
    .brand-mark::before, .brand-mark::after {
      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      height: 2px;
      background: rgba(7,21,20,.88);
      border-radius: 99px;
    }
    .brand-mark::before { top: 13px; }
    .brand-mark::after { top: 22px; width: 12px; right: auto; }
    .brand-text { display: grid; line-height: 1.1; }
    .brand-text strong { font-size: 17px; }
    .brand-text span { font-size: 12px; color: var(--muted); font-weight: 600; }
    .main-nav { display: flex; align-items: center; gap: 5px; }
    .main-nav a {
      position: relative;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 10px 12px;
      color: var(--muted);
      font-weight: 700;
      font-size: 15px;
      border-radius: 8px;
      transition: color .2s ease, background .2s ease;
    }
    .main-nav a::after {
      content: "";
      position: absolute;
      height: 2px;
      left: 12px;
      right: 12px;
      bottom: 5px;
      background: var(--cyan);
      transform: scaleX(0);
      transition: transform .2s ease;
    }
    .main-nav a:hover, .main-nav a.active { color: var(--ink); background: rgba(0,169,184,.06); }
    .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
    .nav-cta { display: inline-flex; align-items: center; gap: 10px; }
    .menu-toggle { display: none; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; }
    .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
      display: block; width: 19px; height: 2px; background: var(--ink); margin: auto; position: relative;
    }
    .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
    .menu-toggle span::before { top: -6px; }
    .menu-toggle span::after { top: 6px; }

    .page-intro {
      background: var(--dark);
      color: #fff;
      padding: 72px 0 64px;
      position: relative;
      overflow: hidden;
    }
    .page-intro::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: 42%;
      height: 100%;
      background-image: linear-gradient(rgba(0,169,184,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(0,169,184,.10) 1px, transparent 1px);
      background-size: 32px 32px;
      opacity: .5;
      pointer-events: none;
    }
    .intro-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, .75fr);
      gap: 50px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .page-intro h1 { max-width: 720px; }
    .intro-copy { color: #c9d6d3; font-size: 17px; max-width: 700px; }
    .intro-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
    .intro-panel {
      border: 1px solid rgba(142,213,210,.25);
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.06);
      padding: 22px;
    }
    .panel-top { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; color: #dce9e7; font-size: 14px; }
    .signal { color: var(--green); font-weight: 800; }
    .metric-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 15px 0;
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .metric-row strong { font-size: 24px; color: #fff; line-height: 1; }
    .metric-row span { color: #aec0bc; font-size: 13px; }
    .metric-line { height: 5px; background: rgba(255,255,255,.13); border-radius: 5px; margin-top: 8px; overflow: hidden; }
    .metric-line i { display: block; height: 100%; background: var(--cyan); border-radius: inherit; }
    .metric-line.green i { background: var(--green); }

    .solution-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: start; }
    .scheme-list { display: grid; gap: 12px; }
    .scheme-item {
      display: grid;
      grid-template-columns: 48px 1fr auto;
      gap: 16px;
      align-items: center;
      padding: 18px 20px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .scheme-item:hover { transform: translateX(3px); border-color: rgba(0,169,184,.48); box-shadow: var(--shadow-soft); }
    .scheme-number {
      width: 42px; height: 42px; border-radius: 10px;
      background: var(--dark); color: var(--cyan);
      display: grid; place-items: center; font-weight: 900;
    }
    .scheme-item h3 { margin-bottom: 3px; font-size: 18px; }
    .scheme-item p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.65; }
    .scheme-arrow { color: var(--cyan-dark); font-size: 23px; }
    .image-frame { border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--dark); }
    .image-frame img { width: 100%; height: 370px; object-fit: cover; }
    .image-caption {
      position: absolute; left: 18px; right: 18px; bottom: 18px;
      padding: 14px 16px; background: rgba(21,27,27,.88);
      color: #fff; border-left: 3px solid var(--cyan); border-radius: 7px;
    }
    .image-caption strong { display: block; margin-bottom: 3px; }
    .image-caption span { color: #b8cac6; font-size: 13px; }

    .architecture { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); background: var(--surface); }
    .architecture-step {
      min-height: 190px; padding: 22px 18px; position: relative; border-right: 1px solid var(--line);
    }
    .architecture-step:last-child { border-right: 0; }
    .architecture-step::after {
      content: "→"; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
      width: 20px; height: 20px; display: grid; place-items: center; color: var(--cyan);
      background: var(--surface); z-index: 2; font-weight: 900;
    }
    .architecture-step:last-child::after { display: none; }
    .architecture-step .node {
      width: 30px; height: 30px; border-radius: 8px; background: rgba(0,169,184,.12);
      color: var(--cyan-dark); display: grid; place-items: center; font-size: 13px; font-weight: 900; margin-bottom: 23px;
    }
    .architecture-step h3 { font-size: 17px; }
    .architecture-step p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; }

    .process-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
    .process-note { color: var(--muted); font-size: 16px; }
    .process-list { position: relative; padding-left: 35px; }
    .process-list::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 12px; width: 1px; background: #b9cbc7; }
    .process-step { position: relative; padding: 0 0 28px 25px; }
    .process-step:last-child { padding-bottom: 0; }
    .process-step::before {
      content: ""; position: absolute; left: -32px; top: 7px; width: 14px; height: 14px;
      border-radius: 50%; background: var(--surface); border: 3px solid var(--cyan); box-shadow: 0 0 0 4px rgba(0,169,184,.10);
    }
    .process-step .step-label { color: var(--cyan-dark); font-size: 13px; font-weight: 900; margin-bottom: 4px; }
    .process-step h3 { font-size: 19px; margin-bottom: 5px; }
    .process-step p { margin: 0; color: var(--muted); font-size: 15px; }

    .comparison { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
    .comparison table { width: 100%; min-width: 720px; border-collapse: collapse; }
    .comparison th, .comparison td { padding: 17px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
    .comparison th { background: var(--dark); color: #fff; font-size: 14px; font-weight: 800; }
    .comparison th:first-child { width: 24%; }
    .comparison td { color: var(--muted); font-size: 15px; }
    .comparison tr:last-child td { border-bottom: 0; }
    .comparison td strong { color: var(--ink); display: block; margin-bottom: 3px; }

    .deliver-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
    .deliver-item {
      display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line);
    }
    .check {
      width: 27px; height: 27px; flex: 0 0 auto; border-radius: 50%; background: rgba(38,179,106,.12);
      color: #16804b; display: grid; place-items: center; font-weight: 900;
    }
    .deliver-item strong { display: block; margin-bottom: 3px; }
    .deliver-item span { color: var(--muted); font-size: 14px; }

    .channel-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; }
    .channel-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .channel-inner h2 { font-size: 25px; margin-bottom: 4px; }
    .channel-inner p { margin: 0; color: var(--muted); }
    .channel-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
    .channel-links a { padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 700; transition: all .2s ease; }
    .channel-links a:hover { border-color: var(--cyan); color: var(--cyan-dark); background: rgba(0,169,184,.05); }

    .cta-section { padding: 76px 0; background: var(--dark); color: #fff; }
    .cta-box { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
    .cta-box h2 { margin-bottom: 10px; }
    .cta-box p { color: #b9cbc7; margin: 0; max-width: 690px; }
    .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }

    .site-footer { background: #101616; color: #aebfbc; padding: 58px 0 20px; }
    .footer-grid { display: grid; grid-template-columns: 1.35fr .8fr 1fr 1.15fr; gap: 38px; }
    .site-footer .brand { color: #fff; }
    .site-footer .brand-text strong { color: #fff; }
    .site-footer .brand-text span { color: #aebfbc; }
    .site-footer p { margin: 18px 0 0; font-size: 14px; line-height: 1.8; max-width: 320px; }
    .site-footer h3 { color: #fff; font-size: 16px; margin-bottom: 15px; }
    .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
    .footer-links a { transition: color .2s ease; }
    .footer-links a:hover { color: var(--cyan); }
    .footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); margin-top: 42px; padding-top: 18px; font-size: 12px; color: #7e918d; }

    @media (max-width: 1200px) {
      .main-nav a { padding-left: 9px; padding-right: 9px; }
      .nav-cta .btn { padding-left: 13px; padding-right: 13px; }
    }
    @media (max-width: 992px) {
      .main-nav { display: none; position: absolute; top: 100%; left: 20px; right: 20px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
      .main-nav.is-open { display: grid; }
      .main-nav a { width: 100%; }
      .main-nav a::after { left: 12px; right: auto; width: 26px; }
      .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
      .nav-row { position: relative; }
      .nav-cta .btn { display: none; }
      .intro-grid, .solution-grid, .process-wrap { grid-template-columns: 1fr; gap: 32px; }
      .architecture { grid-template-columns: repeat(3, 1fr); }
      .architecture-step:nth-child(3) { border-right: 0; }
      .architecture-step:nth-child(3)::after { display: none; }
      .architecture-step:nth-child(4) { border-top: 1px solid var(--line); }
      .architecture-step:nth-child(5) { border-top: 1px solid var(--line); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 32px, var(--container)); }
      .section { padding: 64px 0; }
      .section-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 25px; }
      .top-meta { display: none; }
      .topbar .container { justify-content: flex-end; }
      .page-intro { padding: 56px 0 50px; }
      .intro-grid { gap: 28px; }
      .intro-panel { max-width: 540px; }
      .architecture { grid-template-columns: 1fr 1fr; }
      .architecture-step { border-bottom: 1px solid var(--line); }
      .architecture-step:nth-child(2) { border-right: 0; }
      .architecture-step:nth-child(3) { border-right: 1px solid var(--line); }
      .architecture-step:nth-child(4) { border-right: 0; }
      .architecture-step:nth-child(3)::after { display: block; }
      .architecture-step:nth-child(even)::after { display: none; }
      .deliver-grid { grid-template-columns: 1fr; }
      .channel-inner, .cta-box { align-items: flex-start; flex-direction: column; }
      .channel-links { justify-content: flex-start; }
      .cta-actions { width: 100%; }
    }
    @media (max-width: 576px) {
      h1 { font-size: 34px; }
      h2 { font-size: 28px; }
      .top-links { gap: 9px; }
      .top-links span { display: none; }
      .brand-text strong { font-size: 15px; }
      .brand-text span { font-size: 11px; }
      .page-intro h1 { max-width: 100%; }
      .intro-copy { font-size: 16px; }
      .architecture { grid-template-columns: 1fr; }
      .architecture-step, .architecture-step:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line); min-height: auto; }
      .architecture-step::after, .architecture-step:nth-child(3)::after { display: none; }
      .architecture-step:last-child { border-bottom: 0; }
      .scheme-item { grid-template-columns: 42px 1fr; padding: 16px; }
      .scheme-arrow { display: none; }
      .image-frame img { height: 290px; }
      .btn { width: 100%; }
      .intro-actions, .cta-actions { width: 100%; }
      .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    }
    @media (max-width: 375px) {
      .container { width: min(100% - 26px, var(--container)); }
      .brand { gap: 8px; }
      .brand-mark { width: 34px; height: 34px; }
      .brand-text strong { font-size: 14px; }
      .page-intro { padding-top: 48px; }
    }

/* roulang page: category3 */
:root {
      --bg: #f5f7f6;
      --bg-soft: #eef2f1;
      --surface: #ffffff;
      --surface-2: #f9fbfa;
      --ink: #17201f;
      --muted: #5d6b68;
      --weak: #85908d;
      --line: #dce4e1;
      --dark: #151b1b;
      --dark-2: #202929;
      --cyan: #00a9b8;
      --cyan-dark: #007f8c;
      --green: #26b36a;
      --orange: #f28a2e;
      --red: #d95a4e;
      --shadow: 0 16px 46px rgba(23, 32, 31, .10);
      --shadow-soft: 0 10px 28px rgba(23, 32, 31, .08);
      --radius-lg: 16px;
      --radius: 12px;
      --radius-sm: 8px;
      --container: 1220px;
      --header-h: 112px;
      --focus: 0 0 0 3px rgba(0, 169, 184, .24);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: PingFang SC, Microsoft YaHei, Noto Sans SC, Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.78;
      font-size: 16px;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; border: 0; background: none; color: inherit; }
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
      outline: none;
      box-shadow: var(--focus);
    }
    .container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
    .section { padding: 88px 0; position: relative; }
    .section.alt { background: var(--surface); }
    .section.soft { background: var(--bg-soft); }
    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(280px, .75fr);
      gap: 38px;
      align-items: end;
      margin-bottom: 34px;
    }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--cyan-dark);
      background: rgba(0, 169, 184, .09);
      border: 1px solid rgba(0, 169, 184, .22);
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .section-kicker::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { line-height: 1.28; letter-spacing: 0; }
    h1 { font-size: clamp(36px, 4.3vw, 56px); margin-bottom: 18px; }
    h2 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 12px; }
    h3 { font-size: 20px; margin-bottom: 9px; }
    .section-desc { font-size: 17px; color: var(--muted); max-width: 650px; }
    .eyebrow { color: var(--cyan-dark); font-weight: 800; font-size: 14px; letter-spacing: 0; }
    .btn {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 18px;
      border-radius: 10px;
      font-weight: 800;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
    .btn-primary { background: var(--cyan); color: #071514; box-shadow: 0 10px 24px rgba(0, 169, 184, .24); }
    .btn-primary:hover { background: #20c3cf; box-shadow: 0 12px 30px rgba(0, 169, 184, .32); }
    .btn-line { color: var(--ink); background: #fff; border-color: var(--line); }
    .btn-line:hover { border-color: var(--cyan); box-shadow: var(--shadow-soft); }
    .btn-dark { color: #fff; background: var(--dark-2); border-color: #42504d; }
    .btn-dark:hover { background: #2d3937; border-color: var(--cyan); }
    .tag, .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      color: var(--cyan-dark);
      background: rgba(0, 169, 184, .08);
      border: 1px solid rgba(0, 169, 184, .18);
    }
    .badge.green { color: #157747; background: rgba(38,179,106,.10); border-color: rgba(38,179,106,.22); }
    .badge.orange { color: #9a531d; background: rgba(242,138,46,.12); border-color: rgba(242,138,46,.26); }
    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 1px 0 rgba(23,32,31,.03);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .card:hover { transform: translateY(-3px); border-color: rgba(0,169,184,.45); box-shadow: var(--shadow-soft); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(245,247,246,.95);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(220,228,225,.88);
      transition: box-shadow .2s ease;
    }
    .site-header.is-scrolled { box-shadow: 0 12px 32px rgba(23,32,31,.08); }
    .topbar { min-height: 38px; border-bottom: 1px solid rgba(220,228,225,.75); font-size: 13px; color: var(--muted); }
    .topbar .container, .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
    .topbar .container { min-height: 38px; }
    .top-meta, .top-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
    .top-links a { color: var(--muted); transition: color .2s ease; }
    .top-links a:hover { color: var(--cyan-dark); }
    .nav-row { min-height: 72px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 900; color: var(--ink); min-height: 44px; }
    .brand-mark {
      width: 38px; height: 38px; border-radius: 11px;
      background: linear-gradient(135deg, var(--cyan), var(--green));
      position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 20px rgba(0,169,184,.18);
      flex: 0 0 auto;
    }
    .brand-mark::before, .brand-mark::after {
      content: ""; position: absolute; left: 9px; right: 9px; height: 2px; background: rgba(7,21,20,.88); border-radius: 99px;
    }
    .brand-mark::before { top: 13px; }
    .brand-mark::after { top: 22px; width: 12px; right: auto; }
    .brand-text { display: grid; line-height: 1.1; }
    .brand-text strong { font-size: 17px; }
    .brand-text span { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 4px; }
    .main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
    .main-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 13px; color: #44524f; font-size: 15px; font-weight: 700; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease, background .2s ease; }
    .main-nav a:hover, .main-nav a.active { color: var(--cyan-dark); border-color: var(--cyan); }
    .nav-cta { margin-left: 12px; }
    .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 9px; }
    .nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ""; display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--ink); transition: transform .2s ease; }

    .page-intro {
      padding: 58px 0 62px;
      background: var(--dark);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .page-intro::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .16;
      background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
      background-size: 42px 42px;
      pointer-events: none;
    }
    .intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: 70px; align-items: center; position: relative; z-index: 1; }
    .page-intro h1 { max-width: 650px; margin-bottom: 14px; }
    .intro-copy { color: #cbd8d5; max-width: 680px; font-size: 17px; }
    .intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
    .intro-panel { border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.06); padding: 12px; border-radius: 14px; }
    .intro-panel img { width: 100%; height: 246px; object-fit: cover; border-radius: 9px; }
    .panel-note { display: flex; justify-content: space-between; gap: 14px; padding: 13px 4px 2px; color: #d9e8e4; font-size: 13px; }
    .panel-note strong { color: var(--green); }

    .verify-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 42px; align-items: start; }
    .verify-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .verify-card { padding: 23px; min-height: 190px; }
    .verify-no { color: var(--orange); font-weight: 900; font-family: Arial, sans-serif; font-size: 14px; }
    .verify-card p { color: var(--muted); margin-bottom: 0; font-size: 15px; }
    .mini-matrix { border-left: 3px solid var(--cyan); padding: 8px 0 8px 24px; }
    .mini-matrix h3 { margin-bottom: 18px; }
    .matrix-row { display: grid; grid-template-columns: 100px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
    .matrix-row:last-child { border-bottom: 0; }
    .matrix-row span { color: var(--weak); font-size: 14px; }
    .matrix-row strong { font-size: 15px; }

    .timeline { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding-top: 20px; }
    .timeline::before { content: ""; position: absolute; top: 39px; left: 4%; right: 4%; height: 2px; background: var(--line); }
    .step { position: relative; padding: 0 13px; }
    .step-dot { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--cyan); color: var(--cyan-dark); background: var(--surface); border-radius: 50%; font-weight: 900; position: relative; z-index: 1; margin-bottom: 17px; }
    .step p { font-size: 14px; color: var(--muted); margin-bottom: 0; }
    .step h3 { font-size: 17px; margin-bottom: 7px; }

    .metric-strip { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
    .metric { padding: 29px 24px; border-right: 1px solid var(--line); }
    .metric:last-child { border-right: 0; }
    .metric strong { display: block; font-size: 35px; line-height: 1.1; color: var(--cyan-dark); font-family: Arial, sans-serif; }
    .metric span { display: block; color: var(--muted); font-size: 14px; margin-top: 8px; }

    .loop-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 54px; align-items: center; }
    .loop-image img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--radius-lg); }
    .loop-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .flow-node { padding: 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); position: relative; }
    .flow-node:nth-child(odd)::after { content: "→"; position: absolute; right: -22px; top: 35px; color: var(--orange); font-size: 22px; z-index: 2; }
    .flow-node h3 { font-size: 17px; }
    .flow-node p { color: var(--muted); margin: 0; font-size: 14px; }

    .report-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 45px; align-items: center; }
    .report-copy p { color: var(--muted); font-size: 17px; }
    .report-paper { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 25px; border-radius: 10px; transform: rotate(1deg); }
    .report-top { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 17px; margin-bottom: 17px; }
    .report-top strong { font-size: 18px; }
    .report-label { color: var(--weak); font-size: 13px; }
    .report-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .report-table th, .report-table td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); }
    .report-table th { color: var(--muted); font-weight: 700; }
    .status { color: #187748; font-weight: 800; }
    .report-foot { display: flex; justify-content: space-between; gap: 15px; color: var(--weak); font-size: 13px; padding-top: 16px; }

    .channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .channel-card { padding: 24px; border-top: 3px solid var(--cyan); }
    .channel-card:nth-child(2) { border-top-color: var(--green); }
    .channel-card:nth-child(3) { border-top-color: var(--orange); }
    .channel-card p { color: var(--muted); margin-bottom: 16px; }
    .channel-card .btn { min-height: 42px; padding: 9px 14px; font-size: 14px; }

    .faq-cta { background: var(--dark); color: #fff; }
    .faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 68px; align-items: start; }
    .faq-layout .section-kicker { color: #78dce3; background: rgba(0,169,184,.15); border-color: rgba(0,169,184,.32); }
    .faq-layout .section-desc { color: #b9c9c5; }
    .faq-list { border-top: 1px solid rgba(255,255,255,.22); }
    .faq-item { border-bottom: 1px solid rgba(255,255,255,.22); }
    .faq-question { width: 100%; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; color: #fff; font-weight: 800; padding: 13px 0; }
    .faq-question span:last-child { color: var(--cyan); font-size: 24px; transition: transform .2s ease; }
    .faq-item.open .faq-question span:last-child { transform: rotate(45deg); }
    .faq-answer { max-height: 0; overflow: hidden; color: #bfceca; font-size: 15px; transition: max-height .25s ease, padding .25s ease; }
    .faq-item.open .faq-answer { max-height: 150px; padding: 0 35px 18px 0; }
    .cta-box { margin-top: 62px; padding: 35px 40px; background: #263433; border: 1px solid #41524f; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .cta-box h2 { margin-bottom: 7px; }
    .cta-box p { color: #bfd0cc; margin-bottom: 0; }

    .site-footer { background: #101615; color: #aebfbc; padding: 68px 0 22px; }
    .footer-grid { display: grid; grid-template-columns: 1.35fr .72fr .92fr 1fr; gap: 42px; }
    .site-footer .brand { color: #fff; }
    .site-footer .brand-text strong { color: #fff; }
    .site-footer .brand-text span { color: #aebfbc; }
    .site-footer p { margin-top: 18px; max-width: 330px; color: #91a29e; font-size: 14px; }
    .site-footer h3 { color: #fff; font-size: 16px; margin-bottom: 15px; }
    .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
    .footer-links a { color: #aebfbc; transition: color .2s ease; }
    .footer-links a:hover { color: var(--cyan); }
    .footer-bottom { border-top: 1px solid #293533; margin-top: 48px; padding-top: 18px; display: flex; justify-content: space-between; gap: 15px; color: #758681; font-size: 13px; }

    @media (max-width: 1200px) {
      .main-nav a { padding-left: 9px; padding-right: 9px; }
      .intro-grid { gap: 40px; }
    }
    @media (max-width: 992px) {
      .main-nav { gap: 0; }
      .main-nav a { font-size: 14px; padding-left: 7px; padding-right: 7px; }
      .intro-grid, .verify-grid, .loop-layout, .report-layout, .faq-layout { grid-template-columns: 1fr; gap: 30px; }
      .intro-panel { max-width: 620px; }
      .timeline { grid-template-columns: repeat(3, 1fr); gap: 28px 0; }
      .timeline::before { display: none; }
      .metrics { grid-template-columns: repeat(2, 1fr); }
      .metric:nth-child(2) { border-right: 0; }
      .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .footer-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 32px, var(--container)); }
      .topbar .container { align-items: flex-start; padding: 7px 0; }
      .top-links { display: none; }
      .nav-row { min-height: 68px; }
      .nav-toggle { display: block; }
      .main-nav { position: absolute; left: 16px; right: 16px; top: calc(100% + 1px); display: none; flex-direction: column; align-items: stretch; padding: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: var(--shadow-soft); }
      .main-nav.is-open { display: flex; }
      .main-nav a { min-height: 46px; padding: 10px 13px; border-bottom: 0; border-left: 3px solid transparent; }
      .main-nav a.active, .main-nav a:hover { border-left-color: var(--cyan); background: var(--bg-soft); }
      .nav-cta { display: none; }
      .brand-text strong { font-size: 15px; }
      .brand-text span { font-size: 11px; }
      .section { padding: 68px 0; }
      .section-head { display: block; margin-bottom: 25px; }
      .section-head .section-desc { margin-top: 14px; }
      .page-intro { padding: 48px 0 54px; }
      .verify-list, .channel-grid { grid-template-columns: 1fr; }
      .timeline { grid-template-columns: 1fr 1fr; }
      .step { padding: 0 8px 0 0; }
      .loop-image img { height: 270px; }
      .cta-box { display: block; padding: 28px 24px; }
      .cta-box .btn { margin-top: 21px; }
    }
    @media (max-width: 576px) {
      h1 { font-size: 34px; }
      h2 { font-size: 28px; }
      .intro-actions { align-items: stretch; flex-direction: column; }
      .intro-actions .btn { width: 100%; }
      .intro-panel img { height: 205px; }
      .timeline { grid-template-columns: 1fr; gap: 20px; }
      .metrics { grid-template-columns: 1fr; }
      .metric, .metric:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
      .metric:last-child { border-bottom: 0; }
      .loop-flow { grid-template-columns: 1fr; }
      .flow-node:nth-child(odd)::after { display: none; }
      .report-paper { padding: 15px; transform: none; overflow-x: auto; }
      .report-table { min-width: 460px; }
      .footer-grid { grid-template-columns: 1fr; gap: 28px; }
      .footer-bottom { display: block; }
      .footer-bottom span { display: block; margin-top: 7px; }
    }
    @media (max-width: 375px) {
      .container { width: min(100% - 26px, var(--container)); }
      .brand { gap: 7px; }
      .brand-mark { width: 34px; height: 34px; }
      .brand-text strong { font-size: 14px; }
      .matrix-row { grid-template-columns: 84px 1fr; gap: 8px; }
    }

/* roulang page: category4 */
:root {
 --bg:#f5f7f6;
 --bg-soft:#eef2f1;
 --surface:#fff;
 --surface-2:#f9fbfa;
 --ink:#17201f;
 --muted:#5d6b68;
 --weak:#85908d;
 --line:#dce4e1;
 --dark:#151b1b;
 --dark-2:#202929;
 --cyan:#00a9b8;
 --cyan-dark:#007f8c;
 --green:#26b36a;
 --orange:#f28a2e;
 --red:#d95a4e;
 --shadow:0 16px 46px rgba(23,32,31,.10);
 --shadow-soft:0 10px 28px rgba(23,32,31,.08);
 --radius-lg:16px;
 --radius:12px;
 --radius-sm:8px;
 --container:1220px;
 --focus:0 0 0 3px rgba(0,169,184,.24);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.78;font-size:16px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
.container{width:min(100% - 40px,var(--container));margin:0 auto}
.section{padding:88px 0;position:relative}
.section.alt{background:var(--surface)}
.section.soft{background:var(--bg-soft)}
.section-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.75fr);gap:38px;align-items:end;margin-bottom:34px}
.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--cyan-dark);background:rgba(0,169,184,.09);border:1px solid rgba(0,169,184,.22);border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700;margin-bottom:12px}
.section-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
h1,h2,h3{line-height:1.24;letter-spacing:0}
h1{font-size:clamp(34px,4vw,54px);max-width:760px}
h2{font-size:clamp(27px,3vw,36px)}
h3{font-size:20px}
.section-desc{font-size:17px;color:var(--muted);max-width:650px}
.lead{font-size:17px;color:#dce9e7;max-width:820px;margin-top:18px}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;border-radius:10px;font-weight:800;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;border:1px solid transparent;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus)}
.btn-primary{background:var(--cyan);color:#071514;box-shadow:0 10px 24px rgba(0,169,184,.24)}
.btn-primary:hover{background:#20c3cf;box-shadow:0 12px 30px rgba(0,169,184,.32)}
.btn-secondary{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-secondary:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.48)}
.btn-line{color:var(--ink);background:#fff;border-color:var(--line)}
.btn-line:hover{border-color:var(--cyan);box-shadow:var(--shadow-soft)}
.tag,.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:13px;font-weight:700;color:var(--cyan-dark);background:rgba(0,169,184,.08);border:1px solid rgba(0,169,184,.18)}
.badge.green{color:#157747;background:rgba(38,179,106,.1);border-color:rgba(38,179,106,.22)}
.badge.orange{color:#9a531d;background:rgba(242,138,46,.12);border-color:rgba(242,138,46,.26)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(23,32,31,.03);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(0,169,184,.45);box-shadow:var(--shadow-soft)}
.site-header{position:sticky;top:0;z-index:60;background:rgba(245,247,246,.95);backdrop-filter:blur(14px);border-bottom:1px solid rgba(220,228,225,.88);transition:box-shadow .2s ease}
.site-header.is-scrolled{box-shadow:0 12px 32px rgba(23,32,31,.08)}
.topbar{min-height:38px;border-bottom:1px solid rgba(220,228,225,.75);font-size:13px;color:var(--muted)}
.topbar .container,.nav-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.topbar .container{min-height:38px}
.top-meta,.top-links{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.top-links a{color:var(--muted);transition:color .2s ease}
.top-links a:hover{color:var(--cyan-dark)}
.nav-row{min-height:72px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;color:var(--ink);min-height:44px}
.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--cyan),var(--green));position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 8px 20px rgba(0,169,184,.18)}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;left:9px;right:9px;height:2px;background:rgba(7,21,20,.88);border-radius:99px}
.brand-mark:before{top:13px}.brand-mark:after{top:22px;width:12px;right:auto}
.brand-text{display:grid;line-height:1.1}.brand-text strong{font-size:17px}.brand-text span{font-size:12px;color:var(--muted);font-weight:600;margin-top:5px}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.main-nav a{position:relative;padding:10px 12px;color:var(--muted);font-weight:700;font-size:15px}
.main-nav a:after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.main-nav a:hover,.main-nav a.active{color:var(--ink)}
.main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
.nav-cta{margin-left:14px}
.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:9px;align-items:center;justify-content:center}
.menu-toggle span,.menu-toggle span:before,.menu-toggle span:after{display:block;width:20px;height:2px;background:var(--ink);position:relative;content:"";transition:.2s}
.menu-toggle span:before{position:absolute;top:-7px}.menu-toggle span:after{position:absolute;top:7px}
.page-hero{padding:72px 0 68px;background:var(--dark);color:#fff;position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(21,27,27,.94) 0%,rgba(21,27,27,.76) 44%,rgba(21,27,27,.30) 100%),url("/assets/images/04d75f7bf6b8cb2b.webp");background-size:cover;background-position:center}
.page-hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:58px;align-items:center}
.hero-copy{max-width:760px}
.hero-copy .section-kicker{color:#9be8df;background:rgba(0,169,184,.16);border-color:rgba(0,169,184,.34)}
.hero-copy p{color:#dce9e7;font-size:18px;max-width:720px;margin:20px 0 28px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-panel{border-left:1px solid rgba(255,255,255,.28);padding-left:28px}
.hero-panel h3{font-size:16px;color:#a5bdb8;margin-bottom:18px}
.progress-item{margin-bottom:18px}.progress-line{height:7px;background:rgba(255,255,255,.16);border-radius:8px;overflow:hidden;margin-top:7px}.progress-line i{display:block;height:100%;background:var(--cyan);border-radius:8px}.progress-item:nth-child(3) .progress-line i{background:var(--green)}.progress-item:nth-child(4) .progress-line i{background:var(--orange)}
.progress-label{display:flex;justify-content:space-between;color:#fff;font-size:14px}
.featured-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
.scenario-card{padding:28px;min-height:270px;display:flex;flex-direction:column;justify-content:space-between}
.scenario-card.large{min-height:390px;background:var(--dark);color:#fff;overflow:hidden;position:relative}
.scenario-card.large img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.54;transition:transform .4s ease}
.scenario-card.large:hover img{transform:scale(1.04)}
.scenario-card.large .scenario-content{position:relative;z-index:1;max-width:490px}
.scenario-card h3{margin:13px 0 10px}.scenario-card p{color:var(--muted);font-size:15px}.scenario-card.large p{color:#dce9e7}
.scenario-side{display:grid;grid-template-rows:1fr 1fr;gap:24px}
.scenario-side .scenario-card{background:var(--surface-2)}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;font-size:14px;color:var(--cyan-dark);font-weight:800}
.matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.matrix{width:100%;border-collapse:collapse;min-width:700px}
.matrix th,.matrix td{padding:17px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.matrix th{font-size:14px;color:var(--muted);background:var(--bg-soft);font-weight:800}
.matrix td{font-size:15px}.matrix tr:last-child td{border-bottom:0}.matrix td:first-child{font-weight:800;color:var(--ink);width:22%}
.dot-list{list-style:none;display:grid;gap:7px;margin-top:14px}.dot-list li{position:relative;padding-left:18px;color:var(--muted);font-size:15px}.dot-list li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.chain{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chain-item{padding:25px 18px 23px;position:relative;border-right:1px solid var(--line)}
.chain-item:last-child{border-right:0}.chain-item:not(:last-child):after{content:"→";position:absolute;right:-10px;top:34px;width:20px;text-align:center;color:var(--cyan);background:var(--bg);font-weight:900;z-index:2}
.chain-num{font-family:Arial,sans-serif;color:var(--cyan);font-size:13px;font-weight:900;letter-spacing:0}
.chain-item h3{font-size:17px;margin:10px 0 6px}.chain-item p{font-size:14px;color:var(--muted)}
.dark-band{background:var(--dark);color:#fff;padding:88px 0;overflow:hidden}
.dark-band .section-desc{color:#b9ceca}.dark-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:68px;align-items:center}
.dark-image{height:360px;position:relative;border:1px solid rgba(255,255,255,.18);overflow:hidden;border-radius:var(--radius-lg)}
.dark-image img{width:100%;height:100%;object-fit:cover;opacity:.72}
.scan-box{position:absolute;left:14%;top:24%;width:46%;height:30%;border:2px solid var(--cyan);box-shadow:0 0 0 1px rgba(0,169,184,.15),0 0 30px rgba(0,169,184,.22)}
.scan-box:after{content:"风险区域 / 低速目标";position:absolute;left:0;top:-29px;color:#8fe8dc;font-size:12px;background:var(--dark);padding:3px 7px}
.dark-copy h2{max-width:580px}.dark-copy p{color:#dce9e7;font-size:17px;margin:20px 0}
.signal-list{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.18);margin-top:28px}
.signal-list li{list-style:none;display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);color:#dce9e7;font-size:14px}.signal-list b{color:var(--cyan)}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.story{padding:25px}.story .tag{margin-bottom:17px}.story h3{margin-bottom:12px}.story p{font-size:15px;color:var(--muted)}.story strong{display:block;color:var(--cyan-dark);font-size:14px;margin-top:17px}
.people-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.person{padding:22px 17px;border-top:3px solid var(--cyan);background:var(--surface);border-bottom:1px solid var(--line);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.person:nth-child(2n){border-top-color:var(--green)}.person h3{font-size:17px;margin-bottom:8px}.person p{font-size:14px;color:var(--muted)}
.list-more{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.list-more:first-child{border-top:1px solid var(--line)}.list-more time{font-size:13px;color:var(--weak)}.list-more h3{font-size:18px}.list-more p{font-size:14px;color:var(--muted);margin-top:4px}.list-more a{color:var(--cyan-dark);font-weight:800;white-space:nowrap}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:68px;align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:15px;text-align:left;font-weight:800;padding:15px 2px}
.faq-question span:last-child{font-size:24px;color:var(--cyan);transition:transform .2s ease}
.faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
.faq-answer{display:none;color:var(--muted);font-size:15px;padding:0 35px 18px 2px}
.faq-item.open .faq-answer{display:block}
.cta-band{margin-top:52px;background:var(--cyan);border-radius:var(--radius-lg);padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:28px;color:#071514}
.cta-band p{margin-top:7px;font-size:15px}.cta-band .btn{background:var(--dark);color:#fff}
.site-footer{background:var(--dark);color:#aebfbc;padding:62px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.35fr .7fr .9fr 1.1fr;gap:38px}
.site-footer .brand{color:#fff}.site-footer .brand-text strong{color:#fff}.site-footer .brand-text span{color:#aebfbc}.site-footer p{margin-top:18px;font-size:14px;max-width:350px}
.site-footer h3{color:#fff;font-size:16px;margin-bottom:15px}
.footer-links{list-style:none;display:grid;gap:9px;font-size:14px}.footer-links a{transition:color .2s ease}.footer-links a:hover{color:var(--cyan)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.14);margin-top:45px;padding-top:18px;font-size:13px}
@media (max-width:1200px){.main-nav a{padding-left:8px;padding-right:8px}.hero-grid{gap:34px}.people-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:992px){.main-nav{display:none}.menu-toggle{display:flex;margin-left:auto}.nav-cta{display:none}.main-nav.is-open{display:flex;position:absolute;left:20px;right:20px;top:116px;flex-direction:column;align-items:stretch;background:var(--surface);padding:12px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);gap:0}.main-nav.is-open a{min-height:46px;padding:10px 14px}.main-nav.is-open a:after{display:none}.main-nav.is-open:after{content:"";display:block;height:1px;background:var(--line);margin:8px 0}.main-nav.is-open .mobile-cta{display:inline-flex;background:var(--cyan);color:#071514;margin:7px 0 2px;justify-content:center;border-radius:8px;font-weight:800}.hero-grid,.dark-layout,.faq-grid{grid-template-columns:1fr}.hero-panel{border-left:0;border-top:1px solid rgba(255,255,255,.25);padding:24px 0 0;max-width:500px}.chain{grid-template-columns:repeat(3,1fr)}.chain-item:nth-child(3){border-right:0}.chain-item:nth-child(3):after{display:none}.chain-item:nth-child(-n+3){border-bottom:1px solid var(--line)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.container{width:min(100% - 30px,var(--container))}.section{padding:62px 0}.section-head{display:block;margin-bottom:26px}.section-desc{margin-top:15px}.topbar .container{align-items:flex-start;padding:7px 0}.top-links{display:none}.top-meta{gap:8px}.nav-row{min-height:70px}.brand-text strong{font-size:15px}.featured-grid,.story-grid{grid-template-columns:1fr}.scenario-side{grid-template-rows:auto}.scenario-card.large{min-height:310px}.chain{grid-template-columns:1fr}.chain-item,.chain-item:nth-child(3){border-right:0;border-bottom:1px solid var(--line)}.chain-item:last-child{border-bottom:0}.chain-item:after,.chain-item:nth-child(3):after{content:"↓";display:block;right:18px;top:auto;bottom:-14px}.chain-item:last-child:after{display:none}.people-grid{grid-template-columns:repeat(2,1fr)}.cta-band{display:block;padding:27px 24px}.cta-band .btn{margin-top:20px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:6px}}
@media (max-width:576px){h1{font-size:34px}.page-hero{padding:56px 0 52px}.hero-copy p{font-size:16px}.hero-actions .btn{width:100%}.hero-panel{margin-top:10px}.scenario-card{padding:22px}.dark-band{padding:62px 0}.dark-image{height:270px}.people-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:28px}}
@media (max-width:375px){.container{width:calc(100% - 24px)}h1{font-size:31px}.brand{gap:8px}.brand-mark{width:35px;height:35px}.brand-text strong{font-size:14px}.brand-text span{font-size:11px}}