/* roulang page: index */
:root {
      --c-primary: #2E6AA3;
      --c-primary-dark: #245887;
      --c-primary-soft: #E8F1F8;
      --c-accent: #D97706;
      --c-accent-soft: #FEF3C7;
      --c-bg: #F5F7FA;
      --c-card: #FFFFFF;
      --c-text: #3A4450;
      --c-muted: #6B7380;
      --c-line: #E6EBF0;
      --c-dark: #1E252B;
      --c-dark-2: #2A3238;
      --c-danger: #C24141;
      --c-ok: #1F7A4D;
      --radius: 10px;
      --shadow: 0 10px 28px rgba(30, 37, 43, .08);
      --shadow-hover: 0 14px 32px rgba(30, 37, 43, .12);
      --container: 1220px;
      --space: 96px;
      --nav-h: 64px;
      --top-h: 40px;
      --header-h: 104px;
      --font: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--font);
      color: var(--c-text);
      background: var(--c-bg);
      font-size: 16px;
      line-height: 1.75;
      overflow-x: hidden;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { color: var(--c-primary); text-decoration: none; }
    a:hover { color: var(--c-primary-dark); }
    button, input, select, textarea { font-family: inherit; }
    button { cursor: pointer; }
    h1, h2, h3, h4, p { margin: 0; }
    ul { margin: 0; padding: 0; list-style: none; }
    :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
    .container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
    .skip {
      position: absolute; left: -999px; top: 0;
    }
    .skip:focus { left: 12px; top: 12px; z-index: 80; background: #fff; padding: 8px 12px; }
    .topbar {
      height: var(--top-h);
      background: #EEF3F8;
      border-bottom: 1px solid var(--c-line);
      color: var(--c-muted);
      font-size: 12.5px;
      display: flex;
      align-items: center;
    }
    .topbar-inner {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }
    .topbar a { color: var(--c-text); }
    .topbar a:hover { color: var(--c-primary); }
    .topbar-mid { text-align: center; }
    .topbar-right { text-align: right; display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.96);
      backdrop-filter: saturate(1.1);
      border-bottom: 1px solid var(--c-line);
    }
    .nav-main {
      height: var(--nav-h);
      display: flex;
      align-items: center;
    }
    .nav-inner {
      display: flex;
      align-items: center;
      gap: 18px;
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--c-dark);
      font-weight: 700;
      font-size: 18px;
      letter-spacing: .02em;
      flex-shrink: 0;
    }
    .logo-mark {
      width: 28px; height: 28px;
      border-radius: 6px;
      background: linear-gradient(180deg, var(--c-primary), var(--c-primary-dark));
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
    }
    .logo-mark::after {
      content: "";
      position: absolute;
      left: 6px; right: 6px; top: 13px;
      height: 2px;
      background: var(--c-accent);
      transform: skewX(-28deg);
    }
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex: 1;
    }
    .nav-links a {
      position: relative;
      color: var(--c-text);
      font-size: 14px;
      padding: 10px 10px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 10px; right: 10px; bottom: 6px;
      height: 2px;
      background: var(--c-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }
    .nav-links a:hover,
    .nav-links a.is-active { color: var(--c-primary); }
    .nav-links a.is-active::after { transform: scaleX(1); }
    .nav-cta { margin-left: auto; flex-shrink: 0; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 18px;
      border-radius: var(--radius);
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 600;
      transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .btn:active { transform: translateY(1px); }
    .btn-primary {
      background: var(--c-primary);
      color: #fff;
      box-shadow: 0 8px 18px rgba(46,106,163,.22);
    }
    .btn-primary:hover {
      background: var(--c-primary-dark);
      color: #fff;
      box-shadow: 0 10px 20px rgba(46,106,163,.28), 0 2px 0 var(--c-accent);
    }
    .btn-ghost {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,.55);
    }
    .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: var(--c-accent); }
    .btn-line {
      background: #fff;
      color: var(--c-primary);
      border-color: #C5D6E6;
    }
    .btn-line:hover {
      border-color: var(--c-accent);
      color: var(--c-primary-dark);
      box-shadow: 0 2px 0 var(--c-accent);
    }
    .menu-toggle {
      display: none;
      width: 44px; height: 44px;
      border: 1px solid var(--c-line);
      background: #fff;
      border-radius: 8px;
      margin-left: auto;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
    }
    .menu-toggle span {
      width: 18px; height: 2px; background: var(--c-dark); display: block;
    }
    .drawer {
      position: fixed;
      inset: 0 0 0 auto;
      width: min(86vw, 360px);
      background: #fff;
      z-index: 70;
      transform: translateX(100%);
      transition: transform .28s ease;
      box-shadow: -16px 0 40px rgba(30,37,43,.16);
      display: flex;
      flex-direction: column;
      padding: 20px;
    }
    .drawer.is-open { transform: translateX(0); }
    .drawer-mask {
      position: fixed; inset: 0; background: rgba(30,37,43,.4);
      z-index: 60; opacity: 0; pointer-events: none; transition: opacity .28s ease;
    }
    .drawer-mask.is-open { opacity: 1; pointer-events: auto; }
    .drawer-close {
      align-self: flex-end; width: 44px; height: 44px; border: 1px solid var(--c-line); background: #fff; border-radius: 8px;
    }
    .drawer-meta { font-size: 13px; color: var(--c-muted); padding: 12px 0 18px; border-bottom: 1px solid var(--c-line); }
    .drawer-meta a { color: var(--c-text); display: block; min-height: 36px; }
    .drawer nav a {
      display: flex; align-items: center;
      min-height: 48px; color: var(--c-text); border-bottom: 1px solid var(--c-line); font-weight: 600;
    }
    .drawer .btn { width: 100%; margin-top: 18px; }
    .hero {
      position: relative;
      height: min(78vh, 760px);
      background: var(--c-dark);
      overflow: hidden;
    }
    .slides { height: 100%; }
    .slide {
      position: absolute; inset: 0;
      opacity: 0; visibility: hidden;
      transition: opacity .5s ease;
    }
    .slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
    .slide img {
      width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.05);
    }
    .slide::after {
      content: "";
      position: absolute; inset: 0;
      background:
        linear-gradient(90deg, rgba(18,24,29,.78) 0%, rgba(18,24,29,.46) 48%, rgba(18,24,29,.22) 100%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px);
    }
    .hero-copy {
      position: absolute; inset: 0; z-index: 2;
      display: flex; align-items: center;
    }
    .hero-copy .container { width: min(100% - 40px, var(--container)); }
    .badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    .badge {
      display: inline-flex; align-items: center;
      min-height: 28px; padding: 0 10px;
      border-radius: 6px; font-size: 12px; font-weight: 600;
      background: var(--c-primary-soft); color: var(--c-primary-dark);
    }
    .badge-accent { background: var(--c-accent-soft); color: #9A5704; }
    .badge-dark { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.2); }
    h1 {
      font-size: clamp(30px, 4vw, 42px);
      line-height: 1.25;
      color: #fff;
      font-weight: 700;
      max-width: 720px;
    }
    .hero h2, .slide-kicker {
      font-size: clamp(26px, 3.4vw, 36px);
      line-height: 1.3;
      color: #fff;
      font-weight: 700;
      max-width: 720px;
    }
    .lead {
      margin-top: 16px;
      max-width: 680px;
      color: rgba(255,255,255,.88);
      font-size: 15.5px;
    }
    .qualify {
      margin-top: 14px;
      max-width: 640px;
      color: #F6E7C8;
      font-size: 14px;
      border-left: 3px solid var(--c-accent);
      padding-left: 12px;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
    .carousel-ui {
      position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px;
      display: flex; align-items: center; justify-content: space-between;
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }
    .dots { display: flex; gap: 8px; }
    .dots button {
      width: 28px; height: 4px; border: 0; border-radius: 2px;
      background: rgba(255,255,255,.35); padding: 0;
    }
    .dots button.is-on { background: var(--c-accent); }
    .arrow-group { display: flex; gap: 8px; }
    .icon-btn {
      width: 44px; height: 44px; border-radius: 8px;
      border: 1px solid rgba(255,255,255,.28);
      background: rgba(18,24,29,.35); color: #fff;
    }
    .icon-btn:hover { border-color: var(--c-accent); }
    main section { scroll-margin-top: 88px; }
    .sec { padding: var(--space) 0; position: relative; }
    .sec-h {
      font-size: clamp(24px, 2.6vw, 30px);
      line-height: 1.3;
      font-weight: 700;
      color: var(--c-dark);
    }
    .sec-p {
      margin-top: 12px;
      color: var(--c-muted);
      max-width: 760px;
      font-size: 15.5px;
    }
    .sec-head { margin-bottom: 36px; }
    .sec-alt { background: #fff; }
    .grid-2 {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 40px;
      align-items: center;
    }
    .cover {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid var(--c-line);
      background: #dfe6ee;
    }
    .cover img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
    .spec-list { margin-top: 18px; display: grid; gap: 10px; }
    .spec-list li {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 10px;
      padding: 10px 12px;
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 8px;
      font-size: 14.5px;
    }
    .spec-list b { color: var(--c-primary); font-weight: 700; }
    .issue {
      margin-top: 18px;
      display: grid;
      gap: 8px;
    }
    .issue li {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      font-size: 14.5px;
      color: var(--c-text);
    }
    .num {
      width: 28px; height: 28px; border-radius: 6px;
      background: var(--c-primary); color: #fff;
      display: grid; place-items: center; font-size: 12px; font-weight: 700;
    }
    .fn-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .fn-card {
      background: var(--c-card);
      border: 1px solid var(--c-line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 22px 20px;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .fn-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
    .fn-ico {
      width: 42px; height: 42px; border-radius: 8px;
      background: var(--c-primary-soft); color: var(--c-primary);
      display: grid; place-items: center; margin-bottom: 12px;
    }
    .fn-card h3 { font-size: 18px; }
    .fn-card ul { margin: 12px 0 16px; display: grid; gap: 6px; }
    .fn-card li {
      font-size: 14px; color: var(--c-muted);
      padding-left: 12px; position: relative;
    }
    .fn-card li::before {
      content: "";
      position: absolute; left: 0; top: 9px;
      width: 6px; height: 2px; background: var(--c-accent);
    }
    .prod-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .prod-card {
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .prod-card img { height: 210px; width: 100%; object-fit: cover; }
    .prod-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .prod-body h3 { font-size: 19px; }
    .kv {
      display: grid; gap: 6px; font-size: 14px;
      background: var(--c-bg); border-radius: 8px; padding: 10px 12px;
    }
    .kv span { display: flex; justify-content: space-between; gap: 12px; color: var(--c-muted); }
    .kv b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
    .scene-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      grid-template-rows: auto auto;
      gap: 16px;
    }
    .scene {
      position: relative;
      min-height: 230px;
      border-radius: 12px;
      overflow: hidden;
      color: #fff;
      display: flex;
      align-items: flex-end;
      text-align: left;
      border: 0;
      padding: 0;
      box-shadow: var(--shadow);
    }
    .scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .scene::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(18,24,29,.1), rgba(18,24,29,.78));
    }
    .scene-body { position: relative; z-index: 1; padding: 20px; }
    .scene-body h3 { font-size: 20px; color: #fff; }
    .scene-body p { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.86); }
    .scene.wide { grid-row: span 2; min-height: 476px; }
    .film {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(220px, 1fr);
      gap: 14px;
      overflow-x: auto;
      padding-bottom: 8px;
      scroll-snap-type: x mandatory;
    }
    .frame {
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
      scroll-snap-align: start;
    }
    .frame img { height: 170px; width: 100%; object-fit: cover; }
    .frame p { padding: 12px 14px 14px; font-size: 13.5px; color: var(--c-muted); }
    .cases { background: var(--c-dark); color: #d7dee4; }
    .cases .sec-h, .cases h3 { color: #fff; }
    .cases .sec-p { color: #aeb7bf; }
    .case-grid {
      display: grid;
      grid-template-columns: 1.15fr 1.15fr .8fr;
      gap: 16px;
    }
    .case-card, .principle {
      background: var(--c-dark-2);
      border: 1px solid #343d44;
      border-radius: 12px;
      padding: 22px;
    }
    .case-card h3 { font-size: 18px; margin-bottom: 10px; }
    .metric {
      display: flex; gap: 18px; margin-top: 14px; font-variant-numeric: tabular-nums;
    }
    .metric b { display: block; color: var(--c-accent); font-size: 22px; }
    .metric span { font-size: 12px; color: #9aa3ab; }
    .principle li {
      padding: 10px 0;
      border-bottom: 1px solid #3b444b;
      font-size: 14px;
    }
    .stories {
      display: grid;
      grid-template-columns: 1.4fr .8fr;
      gap: 18px;
    }
    .story-main, .story-side {
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .story-main img { height: 280px; width: 100%; object-fit: cover; }
    .story-main .txt, .story-side { padding: 20px; }
    .quote { font-size: 16px; color: var(--c-text); }
    .meta { margin-top: 12px; color: var(--c-muted); font-size: 13px; }
    .side-stack { display: grid; gap: 18px; }
    .story-side img { height: 120px; width: 100%; object-fit: cover; }
    .stats {
      background: #fff;
      border-top: 1px solid var(--c-line);
      border-bottom: 1px solid var(--c-line);
      padding: 48px 0;
    }
    .stat-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .stat {
      text-align: left;
      padding: 8px 12px;
      border-left: 2px solid var(--c-accent);
    }
    .stat b {
      display: block;
      font-size: 32px;
      color: var(--c-primary);
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em;
      line-height: 1.2;
    }
    .stat span { color: var(--c-muted); font-size: 13.5px; }
    .plan-wrap {
      display: grid;
      grid-template-columns: 1.7fr .7fr;
      gap: 18px;
    }
    .table-wrap {
      overflow: auto;
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 12px;
      box-shadow: var(--shadow);
    }
    table { width: 100%; border-collapse: collapse; min-width: 720px; }
    th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--c-line); font-size: 14px; vertical-align: top; }
    th { background: #F3F7FB; color: var(--c-dark); font-weight: 700; }
    tr.is-hot td { background: #FFF8EC; }
    .price { color: var(--c-primary); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .rec {
      background: var(--c-dark);
      color: #dce3e8;
      border-radius: 12px;
      padding: 22px;
    }
    .rec h3 { color: #fff; font-size: 18px; margin-bottom: 10px; }
    .rec .price { color: var(--c-accent); font-size: 28px; display: block; margin: 8px 0 12px; }
    .guarantee {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 22px;
    }
    .g-item {
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 10px;
      padding: 14px 16px;
      font-size: 14px;
    }
    .g-item b { display: block; color: var(--c-primary); margin-bottom: 4px; }
    .reviews {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .rev {
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 12px;
      padding: 16px;
      box-shadow: var(--shadow);
      min-height: 170px;
    }
    .stars { color: var(--c-accent); letter-spacing: 1px; font-size: 13px; }
    .rev h3 { font-size: 15px; margin: 8px 0; }
    .rev p { font-size: 13.5px; color: var(--c-muted); }
    .voice-grid {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 20px;
    }
    .voice-side {
      background: var(--c-primary-soft);
      border-radius: 12px;
      padding: 18px;
    }
    .voice-side li { padding: 10px 0; border-bottom: 1px solid #d5e4f0; font-size: 14px; }
    .voice-list { display: grid; gap: 14px; }
    .voice-card {
      background: #fff;
      border-left: 3px solid var(--c-primary);
      border-radius: 0 12px 12px 0;
      padding: 18px 20px;
      box-shadow: var(--shadow);
    }
    .mark { display: inline-flex; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--c-accent-soft); color: #9A5704; margin-left: 8px; }
    .cons {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
    }
    .cons a, .cons article {
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 12px;
      padding: 16px;
      box-shadow: var(--shadow);
      color: inherit;
      display: block;
      transition: transform .2s ease;
    }
    .cons a:hover { transform: translateY(-3px); color: inherit; }
    .cons h3 { font-size: 16px; margin-bottom: 8px; }
    .cons p { font-size: 13.5px; color: var(--c-muted); }
    .news-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .news {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 14px;
      background: #fff;
      border: 1px solid var(--c-line);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .news img { width: 160px; height: 100%; object-fit: cover; min-height: 120px; }
    .news div { padding: 14px 14px 14px 0; }
    .news time { font-size: 12px; color: var(--c-muted); }
    .news h3 { font-size: 16px; margin: 4px 0 6px; }
    .news p { font-size: 13.5px; color: var(--c-muted); }
    .more { margin-top: 16px; }
    .faq { display: grid; gap: 10px; }
    .faq-item { background: #fff; border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; }
    .faq-item button {
      width: 100%; text-align: left; background: #fff; border: 0;
      min-height: 56px; padding: 14px 48px 14px 18px;
      font-size: 16px; font-weight: 650; color: var(--c-dark); position: relative;
    }
    .faq-item button::after {
      content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
      color: var(--c-primary); font-size: 22px;
    }
    .faq-item.is-open button::after { content: "–"; }
    .faq-item .ans {
      display: none; background: #F7F9FB; padding: 0 18px 16px;
      color: var(--c-muted); font-size: 14.5px;
    }
    .faq-item.is-open .ans { display: block; }
    .contact {
      background: linear-gradient(180deg, #1E252B, #24303a);
      color: #d5dde3;
    }
    .contact .sec-h { color: #fff; }
    .contact-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 28px;
      align-items: start;
    }
    .aside-line { font-size: 14.5px; margin-top: 14px; }
    .aside-line a { color: #fff; }
    form {
      background: #fff; color: var(--c-text);
      border-radius: 12px; padding: 22px;
      box-shadow: var(--shadow);
    }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    label { display: grid; gap: 6px; font-size: 13px; font-weight: 650; }
    input, select, textarea {
      min-height: 44px; border: 1px solid #D5DEE6; border-radius: 8px;
      padding: 8px 12px; font-size: 14.5px; background: #fff; color: var(--c-text);
    }
    textarea { min-height: 96px; resize: vertical; }
    .full { grid-column: 1 / -1; }
    .hint { font-weight: 400; color: var(--c-muted); }
    .err { color: var(--c-danger); font-size: 12px; min-height: 16px; }
    .success {
      display: none;
      background: #E9F7EF;
      color: var(--c-ok);
      border: 1px solid #BFE3CD;
      border-radius: 8px;
      padding: 12px 14px;
      margin-bottom: 12px;
      font-weight: 650;
    }
    .success.is-show { display: block; }
    .site-footer {
      background: #161C21;
      color: #b8c1c8;
      padding: 48px 0 24px;
    }
    .foot-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 28px;
      padding-bottom: 28px;
      border-bottom: 1px solid #2b3339;
    }
    .site-footer h3 { color: #fff; font-size: 16px; margin-bottom: 12px; }
    .site-footer a { color: #c5ced4; display: inline-block; min-height: 32px; }
    .copy { padding-top: 16px; font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .privacy { margin-top: 10px; font-size: 13px; color: #9aa3ab; }
    @media (max-width: 1280px) {
      .case-grid { grid-template-columns: 1fr 1fr; }
      .principle { grid-column: 1 / -1; }
    }
    @media (max-width: 1024px) {
      :root { --space: 72px; }
      .nav-links { display: none; }
      .nav-cta { display: none; }
      .menu-toggle { display: inline-flex; }
      .grid-2, .stories, .plan-wrap, .voice-grid, .contact-grid { grid-template-columns: 1fr; }
      .fn-grid, .prod-grid, .reviews { grid-template-columns: 1fr 1fr; }
      .cons { grid-template-columns: 1fr 1fr; }
      .stat-row, .guarantee { grid-template-columns: 1fr 1fr; }
      .scene.wide { grid-row: auto; min-height: 280px; }
      .hero { height: 62vh; }
    }
    @media (max-width: 768px) {
      :root { --space: 56px; }
      .topbar-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
      .topbar { height: auto; padding: 6px 0; }
      .topbar-right { justify-content: center; text-align: center; }
      .topbar-mid { display: none; }
      .fn-grid, .prod-grid, .reviews, .news-grid, .cons, .scene-grid { grid-template-columns: 1fr; }
      .news { grid-template-columns: 1fr; }
      .news img { width: 100%; height: 180px; }
      .form-grid { grid-template-columns: 1fr; }
      .hero { height: 56vh; min-height: 520px; }
      h1 { font-size: 28px; }
      .lead { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
      .copy { flex-direction: column; }
      .foot-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 375px) {
      .container, .nav-inner, .topbar-inner, .carousel-ui { width: min(100% - 24px, var(--container)); }
      .hero-actions .btn { width: 100%; }
      .stat b { font-size: 26px; }
    }

/* roulang page: index */
:root {
            --bg: #F4F7FA;
            --bg-alt: #EEF3F7;
            --primary: #1F6FA8;
            --primary-dark: #155781;
            --primary-soft: #E6F1F8;
            --steel: #4C5863;
            --steel-deep: #2C3540;
            --ink: #1B232B;
            --muted: #6A7680;
            --orange: #D9762C;
            --orange-soft: #F8E6D6;
            --card: #FFFFFF;
            --line: #E6ECF1;
            --line-strong: #D3DCE4;
            --dark: #1B232B;
            --dark-2: #242E38;
            --dark-text: #E8EEF2;
            --dark-muted: #A8B4BE;
            --green: #2F8F6B;
            --danger: #C44536;
            --radius: 10px;
            --radius-sm: 8px;
            --shadow: 0 8px 24px rgba(28, 45, 64, .08);
            --shadow-hover: 0 14px 32px rgba(28, 45, 64, .14);
            --container: 1240px;
            --header-top: 38px;
            --header-main: 68px;
            --focus: 0 0 0 3px rgba(31, 111, 168, .28);
            --font: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
            --mono: "Roboto Mono", "DIN Alternate", ui-monospace, monospace;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 118px; }
        body {
            margin: 0;
            font-family: var(--font);
            font-size: 16px;
            line-height: 1.75;
            color: var(--ink);
            background: var(--bg);
            -webkit-font-smoothing: antialiased;
        }
        body.nav-lock { overflow: hidden; }
        img { max-width: 100%; height: auto; display: block; }
        a { color: var(--primary); text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
        a:hover { color: var(--primary-dark); }
        button, input, select, textarea { font-family: inherit; font-size: 15px; }
        button { cursor: pointer; }
        h1, h2, h3, h4 { margin: 0; line-height: 1.28; color: var(--ink); letter-spacing: 0; }
        p { margin: 0 0 1em; }
        ul, ol { margin: 0; padding: 0; }
        table { border-collapse: collapse; width: 100%; }
        :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
        .container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
        .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 80;
            background: rgba(255,255,255,.96);
            backdrop-filter: saturate(140%) blur(10px);
            box-shadow: 0 1px 0 var(--line);
        }
        .topbar {
            background: #EEF2F6;
            color: var(--steel);
            font-size: 12px;
            min-height: var(--header-top);
            display: flex;
            align-items: center;
        }
        .topbar-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            width: min(100% - 40px, var(--container));
            margin: 0 auto;
            padding: 6px 0;
        }
        .topbar-left, .topbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
        .topbar a { color: var(--steel); }
        .topbar a:hover { color: var(--primary); }
        .trust-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 2px 8px;
            border: 1px solid var(--line-strong);
            border-radius: 4px;
            background: #fff;
            color: var(--primary-dark);
            font-weight: 500;
        }
        .btn-tiny {
            height: 28px;
            padding: 0 12px;
            border-radius: 6px;
            border: 1px solid var(--primary);
            background: #fff;
            color: var(--primary);
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
        }
        .btn-tiny:hover { background: var(--primary); color: #fff; }
        .mainbar { height: var(--header-main); display: flex; align-items: center; transition: height .2s ease; }
        .site-header.is-compact .mainbar { height: 56px; }
        .mainbar-inner {
            width: min(100% - 40px, var(--container));
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 28px;
        }
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--ink);
            flex-shrink: 0;
        }
        .logo:hover { color: var(--ink); }
        .logo-mark {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 70%);
            display: grid;
            place-items: center;
            box-shadow: inset 0 -1px 0 rgba(255,255,255,.18);
        }
        .logo-text { display: flex; flex-direction: column; line-height: 1.15; }
        .logo-text strong { font-size: 17px; font-weight: 700; }
        .logo-text span { font-size: 11px; color: var(--muted); font-weight: 500; }
        .nav-desktop { display: flex; align-items: center; gap: 4px; margin-left: auto; }
        .nav-desktop a {
            position: relative;
            color: var(--steel-deep);
            font-size: 14px;
            font-weight: 500;
            padding: 8px 10px;
            white-space: nowrap;
        }
        .nav-desktop a:hover { color: var(--primary); }
        .nav-desktop a.is-active { color: var(--primary-dark); }
        .nav-desktop a.is-active::after,
        .nav-desktop a:hover::after {
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 2px;
            height: 2px;
            background: var(--orange);
            border-radius: 2px;
        }
        .header-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 44px;
            padding: 0 18px;
            border-radius: 8px;
            font-weight: 600;
            border: 1px solid transparent;
            transition: .2s ease;
            text-align: center;
        }
        .btn-primary {
            background: var(--primary);
            color: #fff;
            box-shadow: inset 0 -2px 0 var(--orange);
        }
        .btn-primary:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); }
        .btn-primary:active { transform: translateY(0); }
        .btn-ghost {
            background: #fff;
            color: var(--primary);
            border-color: var(--primary);
        }
        .btn-ghost:hover { background: var(--primary-soft); color: var(--primary-dark); }
        .btn-dark {
            background: var(--orange);
            color: #fff;
            border-color: var(--orange);
        }
        .btn-dark:hover { background: #c26520; color: #fff; }
        .btn-line {
            background: transparent;
            color: #fff;
            border-color: rgba(255,255,255,.55);
        }
        .btn-line:hover { background: rgba(255,255,255,.1); color: #fff; }
        .icon-btn {
            width: 44px;
            height: 44px;
            min-width: 44px;
            border: 1px solid var(--line);
            background: #fff;
            border-radius: 8px;
            display: none;
            align-items: center;
            justify-content: center;
            color: var(--ink);
        }
        .icon-btn span, .icon-btn span::before, .icon-btn span::after {
            display: block;
            width: 18px;
            height: 2px;
            background: currentColor;
            border-radius: 2px;
            position: relative;
            transition: .2s ease;
        }
        .icon-btn span::before, .icon-btn span::after { content: ""; position: absolute; left: 0; }
        .icon-btn span::before { top: -6px; }
        .icon-btn span::after { top: 6px; }
        .nav-phone {
            display: none;
            width: 44px;
            height: 44px;
            border-radius: 8px;
            background: var(--primary-soft);
            color: var(--primary-dark);
            align-items: center;
            justify-content: center;
        }
        .drawer {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 90;
            pointer-events: none;
        }
        .drawer.is-open { display: block; pointer-events: auto; }
        .drawer-mask { position: absolute; inset: 0; background: rgba(27,35,43,.46); }
        .drawer-panel {
            position: absolute;
            top: 0;
            right: 0;
            width: min(86vw, 360px);
            height: 100%;
            background: #fff;
            padding: 24px 22px 32px;
            box-shadow: -12px 0 32px rgba(28,45,64,.16);
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow: auto;
        }
        .drawer-panel a {
            color: var(--ink);
            padding: 12px 8px;
            border-bottom: 1px solid var(--line);
            font-weight: 600;
            min-height: 44px;
            display: flex;
            align-items: center;
        }
        .hero {
            position: relative;
            min-height: 680px;
            color: #fff;
            overflow: hidden;
            background: var(--dark);
        }
        .slides { position: absolute; inset: 0; }
        .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: scale(1.04);
            transition: opacity .7s ease, transform 1.1s ease;
            pointer-events: none;
        }
        .slide.is-on { opacity: 1; transform: scale(1); pointer-events: auto; }
        .slide img.slide-bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: saturate(1.05) contrast(1.05);
        }
        .slide::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(27,35,43,.72) 0%, rgba(27,35,43,.42) 48%, rgba(27,35,43,.18) 100%);
        }
        .hero-copy {
            position: relative;
            z-index: 2;
            padding: 84px 0 180px;
        }
        .badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            min-height: 28px;
            padding: 0 10px;
            border-radius: 4px;
            background: rgba(217,118,44,.92);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .04em;
        }
        .hero h1, .slide-title {
            margin: 14px 0 12px;
            font-size: 46px;
            font-weight: 700;
            max-width: 760px;
            text-shadow: 0 8px 24px rgba(0,0,0,.25);
        }
        .hero-lead {
            max-width: 720px;
            font-size: 16px;
            line-height: 1.8;
            color: #E8EEF2;
            margin-bottom: 22px;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .hero-nav {
            position: absolute;
            z-index: 3;
            top: 42%;
            width: 44px;
            height: 44px;
            border: 1px solid rgba(255,255,255,.35);
            background: rgba(27,35,43,.35);
            color: #fff;
            border-radius: 8px;
        }
        .hero-nav.prev { left: 18px; }
        .hero-nav.next { right: 18px; }
        .hero-nav:hover { background: var(--primary); border-color: var(--primary); }
        .hero-dots {
            position: absolute;
            z-index: 3;
            left: 50%;
            transform: translateX(-50%);
            bottom: 132px;
            display: flex;
            gap: 8px;
        }
        .hero-dots button {
            width: 28px;
            height: 4px;
            border: 0;
            border-radius: 4px;
            background: rgba(255,255,255,.35);
            padding: 0;
        }
        .hero-dots button.is-on { background: var(--orange); width: 42px; }
        .qualify {
            position: absolute;
            z-index: 4;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(244,247,250,.94);
            color: var(--ink);
            border-top: 2px solid var(--orange);
        }
        .qualify-inner {
            width: min(100% - 40px, var(--container));
            margin: 0 auto;
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 22px;
            align-items: center;
            padding: 16px 0;
        }
        .rights { display: flex; flex-wrap: wrap; gap: 8px; }
        .rights span {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 6px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
            color: var(--primary-dark);
        }
        .qualify p { margin: 0; font-size: 13px; color: var(--steel); line-height: 1.6; }
        section { padding: 92px 0; position: relative; }
        .sec-head { max-width: 760px; margin-bottom: 36px; }
        .sec-head h2 {
            font-size: 30px;
            font-weight: 700;
            padding-left: 14px;
            border-left: 3px solid var(--primary);
            position: relative;
        }
        .sec-head h2::after {
            content: "";
            display: block;
            width: 42px;
            height: 2px;
            background: var(--orange);
            margin-top: 10px;
        }
        .sec-head p { margin: 14px 0 0; color: var(--steel); }
        .intro { background: #fff; }
        .split {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 48px;
            align-items: center;
        }
        .media {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            border: 1px solid var(--line);
            position: relative;
        }
        .media img { width: 100%; height: 430px; object-fit: cover; }
        .media-tag {
            position: absolute;
            left: 14px;
            bottom: 14px;
            background: rgba(27,35,43,.78);
            color: #fff;
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 6px;
        }
        .check-list { list-style: none; display: grid; gap: 10px; margin: 18px 0 22px; }
        .check-list li {
            padding-left: 26px;
            position: relative;
            color: var(--steel-deep);
        }
        .check-list li::before {
            content: "";
            width: 14px;
            height: 14px;
            border-radius: 3px;
            background: var(--green);
            position: absolute;
            left: 0;
            top: 7px;
            box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--green);
        }
        .pain {
            display: grid;
            gap: 10px;
            margin-top: 8px;
        }
        .pain-item {
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: 12px;
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: 12px 14px;
        }
        .pain-item b { font-family: var(--mono); color: var(--orange); font-size: 18px; }
        .pain-item span { display: block; color: var(--muted); font-size: 13px; }
        .functions { background: var(--bg); }
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .cap-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 22px;
            box-shadow: var(--shadow);
            transition: .22s ease;
            min-height: 220px;
        }
        .cap-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: #bfd6e8;
        }
        .cap-ico {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            background: var(--primary-soft);
            color: var(--primary-dark);
            display: grid;
            place-items: center;
            margin-bottom: 12px;
        }
        .cap-card h3 { font-size: 18px; margin-bottom: 10px; }
        .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
        .chip {
            font-family: var(--mono);
            font-size: 12px;
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 4px;
            padding: 3px 8px;
            color: var(--primary-dark);
        }
        .cap-card p { color: var(--steel); font-size: 14px; margin: 0; }
        .products { background: #fff; }
        .series {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: -8px 0 24px;
        }
        .series a, .series button {
            border: 1px solid var(--line-strong);
            background: #fff;
            color: var(--steel);
            border-radius: 6px;
            min-height: 36px;
            padding: 0 12px;
            font-weight: 600;
            font-size: 13px;
        }
        .series a:hover, .series button:hover, .series .on {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }
        .product-grid {
            display: grid;
            grid-template-columns: 1.38fr 1fr 1fr;
            gap: 18px;
            align-items: stretch;
        }
        .prod {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            transition: .22s ease;
        }
        .prod:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: #bfd6e8; }
        .prod img { width: 100%; height: 210px; object-fit: cover; }
        .prod.featured img { height: 280px; }
        .prod-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
        .prod h3 { font-size: 20px; }
        .meta { font-size: 13px; color: var(--muted); }
        .params { display: grid; gap: 6px; font-size: 13px; color: var(--steel-deep); }
        .params b { font-family: var(--mono); font-weight: 600; color: var(--primary-dark); }
        .prod .btn { margin-top: auto; align-self: flex-start; min-height: 40px; }
        .scenes { background: var(--bg-alt); }
        .scene-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .scene {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            min-height: 230px;
            box-shadow: var(--shadow);
            border: 1px solid var(--line);
        }
        .scene img { width: 100%; height: 230px; object-fit: cover; }
        .scene figcaption {
            position: absolute;
            inset: auto 0 0 0;
            padding: 16px;
            background: linear-gradient(180deg, transparent, rgba(27,35,43,.88));
            color: #fff;
        }
        .scene h3 { color: #fff; font-size: 18px; margin-bottom: 4px; }
        .scene p { margin: 0; font-size: 13px; color: #d5dee5; }
        .demo { background: #fff; }
        .demo-wall {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 16px;
        }
        .demo-card {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--line);
            box-shadow: var(--shadow);
        }
        .demo-card img { width: 100%; height: 280px; object-fit: cover; }
        .demo-card.tall img { height: 360px; }
        .note {
            position: absolute;
            left: 12px;
            top: 12px;
            background: rgba(255,255,255,.92);
            border-left: 3px solid var(--orange);
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 12px;
            color: var(--steel-deep);
            max-width: 70%;
        }
        .note b { display: block; color: var(--primary-dark); font-family: var(--mono); }
        .cases {
            background: var(--dark);
            color: var(--dark-text);
            padding: 96px 0;
        }
        .cases .sec-head h2, .cases h3 { color: #fff; }
        .cases .sec-head p { color: var(--dark-muted); }
        .cases-grid {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 28px;
        }
        .principle {
            background: var(--dark-2);
            border-radius: 12px;
            padding: 24px;
            border: 1px solid rgba(255,255,255,.06);
        }
        .principle li {
            list-style: none;
            padding: 14px 0;
            border-bottom: 1px solid rgba(217,118,44,.35);
        }
        .principle li:last-child { border-bottom: 0; }
        .principle strong { display: block; margin-bottom: 4px; }
        .principle span { color: var(--dark-muted); font-size: 14px; }
        .case-bar {
            background: #151b21;
            border-radius: 12px;
            padding: 18px 20px;
            margin-bottom: 12px;
            border-left: 3px solid var(--orange);
        }
        .case-bar h3 { font-size: 17px; margin-bottom: 8px; }
        .case-bar p { margin: 0; color: var(--dark-muted); font-size: 14px; }
        .kv { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: #cfe3f1; }
        .pricing { background: var(--bg); }
        .price-grid {
            display: grid;
            grid-template-columns: 1fr 1.08fr 1fr;
            gap: 16px;
            align-items: stretch;
        }
        .plan {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 24px 22px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .plan.hot {
            border: 1px solid var(--primary);
            box-shadow: 0 12px 28px rgba(31,111,168,.14);
            transform: translateY(-6px);
        }
        .plan-badge {
            align-self: flex-start;
            background: var(--orange);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
        }
        .plan h3 { font-size: 22px; }
        .plan .price { font-size: 15px; color: var(--primary-dark); font-weight: 700; }
        .plan ul { list-style: none; color: var(--steel); font-size: 14px; }
        .plan li { padding: 6px 0 6px 20px; position: relative; }
        .plan li::before { content: "＋"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
        .plan li.off::before { content: "－"; color: var(--muted); }
        .plan .btn { margin-top: 8px; width: 100%; }
        .compare { margin-top: 28px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
        .compare table th, .compare table td {
            padding: 12px 14px;
            border-bottom: 1px solid var(--line);
            text-align: left;
            font-size: 14px;
        }
        .compare th { background: var(--bg-alt); color: var(--steel-deep); font-weight: 700; }
        .stories { background: #fff; }
        .story-grid {
            display: grid;
            grid-template-columns: 1.4fr .8fr;
            gap: 16px;
        }
        .story-main {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            min-height: 420px;
            box-shadow: var(--shadow);
        }
        .story-main img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
        .story-main .quote {
            position: absolute;
            inset: auto 0 0 0;
            padding: 24px;
            background: linear-gradient(180deg, transparent, rgba(27,35,43,.9));
            color: #fff;
        }
        .story-main h3 { color: #fff; margin-bottom: 8px; }
        .side-stories { display: grid; gap: 16px; }
        .side-card {
            background: var(--bg);
            border: 1px solid var(--line);
            border-radius: 12px;
            overflow: hidden;
            display: grid;
            grid-template-columns: 140px 1fr;
            min-height: 202px;
        }
        .side-card img { width: 140px; height: 100%; object-fit: cover; }
        .side-card div { padding: 16px; }
        .side-card h3 { font-size: 16px; margin-bottom: 6px; }
        .side-card p { margin: 0; color: var(--steel); font-size: 14px; }
        .stats { background: var(--primary-dark); color: #fff; padding: 48px 0; }
        .stats .sec-head { margin-bottom: 18px; }
        .stats .sec-head h2 { color: #fff; border-left-color: var(--orange); }
        .stats .sec-head p { color: #d7e6f1; }
        .stat-row {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
        }
        .stat {
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 10px;
            padding: 16px 10px;
            text-align: center;
        }
        .stat b {
            display: block;
            font-family: var(--mono);
            font-size: 28px;
            color: #fff;
            font-weight: 600;
        }
        .stat span { font-size: 12px; color: #c9d8e4; }
        .reviews { background: var(--bg); }
        .review-wall {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }
        .rev {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 16px;
            box-shadow: var(--shadow);
        }
        .rev:nth-child(2), .rev:nth-child(5) { transform: translateY(16px); }
        .rev:nth-child(3), .rev:nth-child(8) { transform: translateY(8px); }
        .who { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; }
        .who b { color: var(--ink); }
        .tag {
            background: var(--orange-soft);
            color: #9a4e12;
            border-radius: 4px;
            padding: 1px 6px;
            font-size: 12px;
            font-weight: 600;
        }
        .rev p { margin: 0; color: var(--steel); font-size: 14px; }
        .voice { background: #fff; }
        .voice-quote {
            background: var(--bg-alt);
            border-left: 4px solid var(--primary);
            padding: 22px 24px;
            border-radius: 0 12px 12px 0;
            margin-bottom: 22px;
            font-size: 18px;
            color: var(--steel-deep);
        }
        .photo-band {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 28px;
        }
        .photo-band img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
        .timeline {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            position: relative;
        }
        .timeline::before {
            content: "";
            position: absolute;
            left: 8%;
            right: 8%;
            top: 14px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--orange));
        }
        .node {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 28px 16px 16px;
            position: relative;
            box-shadow: var(--shadow);
        }
        .node i {
            width: 14px;
            height: 14px;
            background: var(--orange);
            border: 3px solid #fff;
            box-shadow: 0 0 0 2px var(--orange);
            border-radius: 50%;
            position: absolute;
            top: 8px;
            left: 18px;
            display: block;
        }
        .node b { font-family: var(--mono); color: var(--primary-dark); display: block; margin-bottom: 6px; }
        .news { background: var(--bg-alt); }
        .news-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .news-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
        }
        .news-card img { width: 100%; height: 160px; object-fit: cover; }
        .news-card div { padding: 16px 16px 18px; }
        .news-card time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
        .news-card h3 { font-size: 17px; margin: 6px 0 8px; }
        .news-card p { margin: 0; color: var(--steel); font-size: 14px; }
        .more-link { display: inline-flex; margin-top: 18px; font-weight: 600; color: var(--primary-dark); }
        .guide { background: #fff; }
        .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
        .filters button {
            min-height: 38px;
            padding: 0 12px;
            border-radius: 6px;
            border: 1px solid var(--line-strong);
            background: #fff;
            color: var(--steel);
            font-weight: 600;
        }
        .filters button.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
        .table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
        .table-wrap table th, .table-wrap table td { padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 14px; white-space: nowrap; }
        .table-wrap th { background: var(--primary-dark); color: #fff; font-weight: 600; }
        .table-wrap tr.is-on td { background: #e8f3fb; color: var(--primary-dark); font-weight: 600; }
        .faq { background: var(--bg); }
        .faq-list { display: grid; gap: 10px; }
        .faq-item { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
        .faq-item button {
            width: 100%;
            min-height: 48px;
            background: #fff;
            border: 0;
            text-align: left;
            padding: 0 46px 0 16px;
            font-weight: 600;
            color: var(--ink);
            position: relative;
        }
        .faq-item button::after {
            content: "+";
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary);
            font-size: 20px;
        }
        .faq-item.is-open button::after { content: "–"; color: var(--orange); }
        .faq-item .ans {
            display: none;
            background: #F7FAFC;
            padding: 4px 16px 16px;
            color: var(--steel);
        }
        .faq-item.is-open .ans { display: block; }
        .cta { background: #fff; padding-bottom: 100px; }
        .cta-box {
            display: grid;
            grid-template-columns: .84fr 1.16fr;
            gap: 28px;
            background: linear-gradient(180deg, rgba(27,35,43,.82), rgba(27,35,43,.88)), url("/assets/images/7bd9e5bd5fbeb009.webp") center/cover;
            border-radius: 14px;
            overflow: hidden;
            color: #fff;
            box-shadow: var(--shadow-hover);
        }
        .cta-copy { padding: 36px 32px; }
        .cta-copy h2 { color: #fff; font-size: 28px; margin-bottom: 12px; }
        .cta-copy > p { color: #d5e0e8; }
        .promise { list-style: none; margin-top: 18px; }
        .promise li {
            padding: 12px 0;
            border-bottom: 1px solid rgba(217,118,44,.4);
        }
        .promise strong { display: block; }
        .promise span { color: #b9c6d0; font-size: 14px; }
        .cta-form {
            background: #fff;
            color: var(--ink);
            padding: 28px 24px;
            margin: 18px;
            border-radius: 12px;
        }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .field { display: flex; flex-direction: column; gap: 6px; }
        .field.full { grid-column: 1 / -1; }
        label { font-size: 13px; font-weight: 600; color: var(--steel-deep); }
        input, select, textarea {
            border: 1px solid var(--line-strong);
            border-radius: 8px;
            min-height: 44px;
            padding: 8px 12px;
            background: #fff;
            color: var(--ink);
        }
        textarea { min-height: 96px; resize: vertical; }
        input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: var(--focus); outline: none; }
        .form-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
        .form-ok { background: #e7f6ef; color: var(--green); padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; }
        .form-err { background: #fdecea; color: var(--danger); padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; }
        .site-footer {
            background: #151b21;
            color: #c5d0d8;
            padding: 56px 0 24px;
        }
        .foot-grid {
            display: grid;
            grid-template-columns: 1.3fr .8fr .9fr .8fr;
            gap: 28px;
            margin-bottom: 28px;
        }
        .site-footer h3 { color: #fff; font-size: 16px; margin-bottom: 12px; }
        .site-footer a { color: #c5d0d8; display: inline-block; padding: 4px 0; }
        .site-footer a:hover { color: #fff; }
        .legal { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; font-size: 12px; color: #8b98a3; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }
        .skip {
            position: absolute;
            left: -999px;
            top: 8px;
        }
        .skip:focus { left: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
        @media (max-width: 1440px) {
            .hero h1, .slide-title { font-size: 42px; }
        }
        @media (max-width: 1024px) {
            .nav-desktop { display: none; }
            .icon-btn, .nav-phone { display: inline-flex; }
            .header-cta .btn { display: none; }
            .split, .cases-grid, .story-grid, .cta-box, .demo-wall, .qualify-inner { grid-template-columns: 1fr; }
            .product-grid, .price-grid { grid-template-columns: 1fr 1fr; }
            .prod.featured { grid-column: 1 / -1; }
            .plan.hot { transform: none; }
            .stat-row { grid-template-columns: repeat(3, 1fr); }
            .review-wall { grid-template-columns: 1fr 1fr; }
            .rev:nth-child(n) { transform: none; }
            .scene-grid, .news-grid { grid-template-columns: 1fr 1fr; }
            .foot-grid { grid-template-columns: 1fr 1fr; }
            .hero { min-height: 620px; }
            .hero-copy { padding-bottom: 220px; }
            .media img { height: 320px; }
        }
        @media (max-width: 768px) {
            section { padding: 64px 0; }
            .sec-head h2, .cta-copy h2 { font-size: 26px; }
            .hero h1, .slide-title { font-size: 30px; }
            .hero { min-height: 700px; }
            .hero-copy { padding: 48px 0 250px; }
            .hero-dots { bottom: 230px; }
            .grid-3, .product-grid, .price-grid, .scene-grid, .news-grid, .photo-band, .timeline, .form-grid { grid-template-columns: 1fr; }
            .side-card { grid-template-columns: 1fr; }
            .side-card img { width: 100%; height: 160px; }
            .stat-row { grid-template-columns: 1fr 1fr; }
            .review-wall { grid-template-columns: 1fr; }
            .foot-grid { grid-template-columns: 1fr; }
            .container, .topbar-inner, .mainbar-inner, .qualify-inner { width: min(100% - 28px, var(--container)); }
            .topbar-left span:nth-child(2), .topbar-left span:nth-child(3) { display: none; }
            .qualify-inner { text-align: left; }
            .timeline::before { display: none; }
            .demo-card img, .demo-card.tall img { height: 220px; }
        }
        @media (max-width: 520px) {
            .hero h1, .slide-title { font-size: 28px; }
            .btn { width: 100%; }
            .hero-actions { width: 100%; }
            .logo-text span { display: none; }
            .rights span { width: 100%; }
            .stat b { font-size: 22px; }
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            * { transition: none !important; animation: none !important; }
        }