/* roulang page: index */
:root {
      --bg: #F3F0E8;
      --bg-alt: #E7E2D6;
      --ink: #1C2422;
      --muted: #5C6764;
      --primary: #3E5C55;
      --primary-2: #C3922E;
      --accent: #D2652D;
      --steel: #8B97A0;
      --dark: #141A1C;
      --card: #FFFBF3;
      --white: #FFFCFA;
      --line: rgba(139, 151, 160, .38);
      --radius: 24px;
      --radius-lg: 28px;
      --radius-sm: 14px;
      --pill: 999px;
      --shadow: 0 12px 30px rgba(20, 26, 28, .08);
      --shadow-hover: 0 16px 36px rgba(20, 26, 28, .14);
      --container: 1220px;
      --grad: linear-gradient(135deg, #3E5C55, #C3922E);
      --grad-dark: linear-gradient(135deg, #141A1C, #3E5C55);
      --space: 104px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--ink);
      background: var(--bg);
      font-size: 16px;
      line-height: 1.75;
      letter-spacing: .01em;
    }
    img { max-width: 100%; display: block; height: auto; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font-family: inherit; }
    button { cursor: pointer; }
    h1, h2, h3, h4 { margin: 0; letter-spacing: -.04em; font-weight: 700; line-height: 1.25; }
    p { margin: 0; }
    ul { margin: 0; padding: 0; list-style: none; }
    .container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
    :focus-visible { outline: 2px solid var(--primary-2); outline-offset: 3px; }
    .skip {
      position: absolute; left: -999px; top: 8px;
    }
    .skip:focus { left: 8px; z-index: 80; background: #fff; padding: 8px 12px; border-radius: 8px; }

    .badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 12px; border-radius: var(--pill);
      font-size: 12px; font-weight: 600; letter-spacing: .04em;
      background: var(--primary-2); color: #1C2422; white-space: nowrap;
    }
    .badge.green { background: var(--primary); color: #F3F0E8; }
    .badge.ink { background: var(--ink); color: #F3F0E8; }
    .badge.ghost { background: rgba(243,240,232,.16); color: #F3F0E8; border: 1px solid rgba(243,240,232,.28); }
    .badge.steel { background: rgba(139,151,160,.18); color: var(--ink); }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 46px; padding: 0 22px; border-radius: var(--pill); border: 1px solid transparent;
      font-size: 15px; font-weight: 600; letter-spacing: .02em; transition: .22s ease;
    }
    .btn-primary {
      background: var(--grad); color: #fff; box-shadow: 0 8px 18px rgba(62,92,85,.28);
    }
    .btn-primary:hover { filter: brightness(1.07); transform: translateY(-2px); }
    .btn-primary:active { transform: translateY(0); filter: brightness(.96); }
    .btn-ghost {
      background: transparent; color: var(--ink); border-color: var(--steel);
    }
    .btn-ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
    .btn-light {
      background: #F3F0E8; color: var(--ink);
    }
    .btn-light:hover { background: #fff; transform: translateY(-2px); }
    .btn-link {
      background: none; border: 0; padding: 0; color: var(--primary-2); font-weight: 600; min-height: 44px;
    }
    .btn-link::after { content: " →"; }
    .btn-link:hover { color: var(--accent); }

    .topbar {
      background: var(--dark); color: #E7E2D6; font-size: 13px;
    }
    .topbar .container {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 40px; gap: 16px;
    }
    .topbar-left, .topbar-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .topbar a { color: #E7E2D6; }
    .topbar a:hover { color: var(--primary-2); }
    .trust-mark { color: var(--primary-2); font-weight: 600; }
    .top-cta {
      background: var(--grad); color: #fff !important; border-radius: var(--pill);
      padding: 6px 14px; min-height: 32px; display: inline-flex; align-items: center; font-weight: 600;
    }

    .nav-main {
      position: sticky; top: 0; z-index: 50;
      background: rgba(243,240,232,.94);
      backdrop-filter: saturate(1.1);
      border-bottom: 1px solid var(--line);
    }
    .nav-main .container {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 76px; gap: 18px;
    }
    .brand {
      display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    }
    .brand-mark {
      width: 42px; height: 42px; border-radius: 12px;
      background: var(--grad-dark); display: grid; place-items: center;
      box-shadow: var(--shadow);
    }
    .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
    .brand-text strong { font-size: 18px; font-weight: 700; }
    .brand-text span { font-size: 12px; color: var(--muted); letter-spacing: .12em; }

    .menu {
      display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center;
    }
    .menu a {
      position: relative; padding: 10px 11px; font-size: 14px; font-weight: 500; color: var(--muted);
      min-height: 44px; display: inline-flex; align-items: center;
    }
    .menu a:hover, .menu a.is-active { color: var(--ink); }
    .menu a.is-active::after {
      content: ""; position: absolute; left: 11px; right: 11px; bottom: 6px; height: 2px;
      border-radius: 2px; background: var(--grad);
    }
    .nav-actions { display: flex; align-items: center; gap: 10px; }
    .burger {
      display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px;
      background: var(--card); align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    }
    .burger i { width: 18px; height: 2px; background: var(--ink); display: block; border-radius: 2px; }

    .drawer {
      display: none; position: fixed; inset: 0; z-index: 60; background: rgba(20,26,28,.46);
    }
    .drawer.is-open { display: block; }
    .drawer-panel {
      position: absolute; right: 0; top: 0; bottom: 0; width: min(86vw, 360px);
      background: var(--bg); padding: 24px; overflow: auto;
      display: flex; flex-direction: column; gap: 8px;
    }
    .drawer-panel a {
      min-height: 48px; display: flex; align-items: center; padding: 0 12px;
      border-radius: 12px; font-weight: 600;
    }
    .drawer-panel a:hover, .drawer-panel a.is-active { background: var(--bg-alt); }

    .hero {
      position: relative; min-height: calc(100vh - 116px); color: #F3F0E8; overflow: hidden;
    }
    .hero-stage { position: relative; min-height: inherit; }
    .hero-slides, .hero-slide, .hero-mask { position: absolute; inset: 0; }
    .hero-slide {
      background-size: cover; background-position: center;
      opacity: 0; transform: scale(1.08);
      transition: opacity 1s ease, transform 8s linear;
    }
    .hero-slide.is-on { opacity: 1; transform: scale(1); }
    .hero-mask {
      background:
        linear-gradient(135deg, rgba(20,26,28,.78) 8%, rgba(62,92,85,.42) 52%, rgba(195,146,46,.28) 100%),
        linear-gradient(to top, rgba(20,26,28,.72), transparent 42%);
    }
    .hero-copy {
      position: relative; z-index: 2; width: min(var(--container), calc(100% - 40px));
      margin: 0 auto; padding: 88px 0 72px;
      display: grid; gap: 22px; max-width: 760px;
    }
    .brand-kicker { font-size: 14px; letter-spacing: .28em; font-weight: 600; color: var(--primary-2); }
    .hero h1 { font-size: clamp(32px, 5vw, 56px); max-width: 12em; }
    .hero-lead { font-size: 16px; line-height: 1.8; color: #E7E2D6; max-width: 42em; }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
    .hero-play {
      position: absolute; z-index: 3; right: 8%; bottom: 18%;
      width: 84px; height: 84px; border-radius: 50%; border: 0;
      background: var(--grad); color: #fff; display: grid; place-items: center;
      box-shadow: 0 12px 30px rgba(20,26,28,.28);
      transition: .22s ease;
    }
    .hero-play:hover { transform: scale(1.06) translateY(-2px); filter: brightness(1.08); }
    .hero-play svg { width: 28px; height: 28px; margin-left: 3px; }
    .hero-play.is-paused svg { margin-left: 0; }
    .hero-arrows { position: absolute; z-index: 3; left: 24px; right: 24px; top: 50%; display: flex; justify-content: space-between; pointer-events: none; }
    .hero-arrows button {
      pointer-events: auto; width: 44px; height: 44px; border-radius: 50%;
      border: 1px solid rgba(243,240,232,.3); background: rgba(20,26,28,.35); color: #fff;
    }
    .hero-dots {
      position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%);
      display: flex; gap: 8px;
    }
    .hero-dots button {
      width: 28px; height: 6px; border: 0; border-radius: var(--pill); background: rgba(243,240,232,.35);
    }
    .hero-dots button.is-on { background: var(--primary-2); width: 36px; }
    .slide-caption {
      position: absolute; z-index: 2; left: 0; right: 0; bottom: 58px;
      width: min(var(--container), calc(100% - 40px)); margin: 0 auto;
      font-size: 13px; color: #E7E2D6; opacity: 0; transition: .4s;
    }
    .hero-slide.is-on + .hero-mask + .hero-copy .slide-note { display: none; }

    main section { padding: var(--space) 0; scroll-margin-top: 88px; }
    .sec-head { margin-bottom: 36px; max-width: 760px; }
    .sec-head.wide { max-width: none; display: flex; justify-content: space-between; gap: 24px; align-items: end; }
    .sec-head h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; }
    .sec-head p { color: var(--muted); font-size: 16px; }
    .eyebrow { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .16em; margin-bottom: 8px; }

    .coverage { background: var(--bg-alt); }
    .cover-grid {
      display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: stretch;
    }
    .region-map {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 28px; box-shadow: var(--shadow); min-height: 320px;
      background-image: linear-gradient(rgba(243,240,232,.82), rgba(243,240,232,.7)), url("/assets/images/87a7a9c49f077161.webp");
      background-size: cover; background-position: center;
    }
    .region-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
    .region-item {
      background: rgba(255,251,243,.9); border-radius: 16px; padding: 14px 16px; border: 1px solid var(--line);
    }
    .region-item strong { display: block; font-size: 15px; }
    .region-item span { font-size: 13px; color: var(--muted); }
    .cover-aside {
      display: grid; gap: 14px;
    }
    .metric-card, .promise-card {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 22px; box-shadow: var(--shadow);
    }
    .metric-card b {
      font-family: "JetBrains Mono", "Noto Sans SC", monospace;
      font-size: 32px; display: block; letter-spacing: -.04em;
    }
    .icon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .icon-row li {
      display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600;
      min-height: 44px;
    }
    .dot-ico {
      width: 10px; height: 10px; border-radius: 50%; background: var(--primary-2); flex-shrink: 0;
    }

    .split {
      display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
    }
    .split.reverse { grid-template-columns: .95fr 1.05fr; }
    .media-frame {
      border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
      border: 1px solid var(--line); min-height: 420px;
    }
    .media-frame img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
    .spec-box {
      margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .spec-box div {
      background: var(--bg-alt); border-radius: 14px; padding: 12px 14px; font-size: 14px;
    }
    .spec-box b { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }

    .bento {
      display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px;
    }
    .bento-card {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px;
      transition: .22s ease;
    }
    .bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .bento-card.wide { grid-column: 1 / 2; grid-row: 1 / 3; }
    .bento-card h3 { font-size: 22px; }
    .bento-card img {
      width: 100%; height: 160px; object-fit: cover; border-radius: 16px;
    }
    .bento-card.wide img { height: 220px; }
    .points { display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
    .points li { padding-left: 14px; position: relative; }
    .points li::before {
      content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
      position: absolute; left: 0; top: .55em;
    }

    .adv-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    }
    .adv-card {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
      padding: 28px; min-height: 220px; box-shadow: var(--shadow); position: relative;
      transition: .22s ease;
    }
    .adv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .adv-card h3 { font-size: 20px; margin: 14px 0 8px; }
    .adv-card p { color: var(--muted); font-size: 14px; }
    .num {
      font-family: "JetBrains Mono", "Noto Sans SC", monospace;
      font-size: 28px; font-weight: 700; color: var(--primary);
    }

    .scene-grid {
      display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px;
    }
    .scene-card {
      position: relative; border-radius: var(--radius); overflow: hidden; min-height: 280px;
      border: 1px solid var(--line); box-shadow: var(--shadow); display: block; color: #fff;
    }
    .scene-card img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; transition: .4s; }
    .scene-card:hover img { transform: scale(1.04); }
    .scene-card figcaption {
      position: absolute; inset: auto 0 0 0; padding: 22px;
      background: linear-gradient(to top, rgba(20,26,28,.82), transparent);
    }
    .scene-card h3 { font-size: 22px; margin-bottom: 6px; }
    .scene-card p { color: #E7E2D6; font-size: 14px; }

    .compare-wrap {
      overflow: auto; border-radius: var(--radius); border: 1px solid var(--line);
      background: var(--card); box-shadow: var(--shadow);
    }
    table.compare { width: 100%; border-collapse: collapse; min-width: 720px; }
    .compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; }
    .compare th { background: var(--dark); color: #F3F0E8; font-weight: 600; }
    .compare td:first-child, .compare th:first-child { font-weight: 600; }
    .compare tr:hover td { background: rgba(62,92,85,.05); }

    .product-stage {
      display: grid; grid-template-columns: 1.35fr .85fr; gap: 16px;
    }
    .product-side { display: grid; gap: 16px; }
    .product-card {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
      overflow: hidden; box-shadow: var(--shadow); display: grid; transition: .22s ease;
    }
    .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .product-card.feature { min-height: 100%; }
    .product-card img { width: 100%; height: 240px; object-fit: cover; }
    .product-card.feature img { height: 340px; }
    .product-body { padding: 24px; display: grid; gap: 12px; }
    .kv { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
    .kv span { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
    .kv b { color: var(--ink); font-weight: 600; }

    .coupon-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    }
    .coupon {
      background: var(--card); border-radius: var(--radius); border: 1px dashed var(--primary-2);
      padding: 22px; position: relative; box-shadow: var(--shadow); overflow: hidden;
    }
    .coupon::before, .coupon::after {
      content: ""; position: absolute; width: 22px; height: 22px; background: var(--bg);
      border-radius: 50%; top: 58%;
    }
    .coupon::before { left: -11px; }
    .coupon::after { right: -11px; }
    .coupon .yen {
      font-family: "JetBrains Mono", monospace; font-size: 34px; color: var(--accent); font-weight: 700;
    }
    .coupon p { color: var(--muted); font-size: 14px; margin: 8px 0 14px; }
    .coupon.is-got { opacity: .72; }

    .demo {
      background:
        linear-gradient(180deg, rgba(243,240,232,.92), rgba(231,226,214,.9)),
        url("/assets/images/171614c6d264e129.webp") center/cover;
    }
    .demo-board {
      display: grid; grid-template-columns: 1.4fr .8fr; gap: 18px;
    }
    .hotspot {
      position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px;
      border: 1px solid var(--line);
    }
    .hotspot img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
    .pin {
      position: absolute; background: var(--primary-2); color: var(--ink);
      border-radius: var(--pill); padding: 6px 10px; font-size: 12px; font-weight: 700;
    }
    .demo-notes { display: grid; gap: 12px; }
    .demo-notes article {
      background: var(--card); border-radius: 20px; padding: 18px; border: 1px solid var(--line);
    }
    .demo-notes h3 { font-size: 18px; margin-bottom: 6px; }

    .dark-band {
      background: var(--dark); color: #F3F0E8;
      background-image: linear-gradient(135deg, rgba(20,26,28,.88), rgba(62,92,85,.55)), url("/assets/images/a6031e95e286951a.webp");
      background-size: cover; background-position: center;
    }
    .dark-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; }
    .dark-layout h2 { color: #fff; }
    .dark-layout .sec-head p { color: #C9D0CC; }
    .case-stack { display: grid; gap: 12px; }
    .case-card {
      background: rgba(20,26,28,.46); border: 1px solid rgba(139,151,160,.28);
      border-radius: var(--radius); padding: 20px; display: grid; gap: 8px;
    }
    .case-card h3 { font-size: 18px; }

    .story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .story {
      background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }
    .story img { height: 210px; width: 100%; object-fit: cover; }
    .story div { padding: 22px; }
    .quote { font-size: 15px; color: var(--ink); }
    .who { margin-top: 12px; color: var(--muted); font-size: 13px; }

    .price-grid { display: grid; grid-template-columns: .9fr 1.2fr .9fr; gap: 16px; align-items: stretch; }
    .price-card {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
      padding: 0 0 24px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
    }
    .price-card.featured {
      transform: translateY(-12px);
      border: 1px solid transparent;
      background:
        linear-gradient(var(--card), var(--card)) padding-box,
        var(--grad) border-box;
    }
    .price-top { height: 8px; background: var(--steel); }
    .price-card.featured .price-top { background: var(--grad); height: 10px; }
    .price-body { padding: 24px 24px 0; display: grid; gap: 10px; flex: 1; }
    .price { font-family: "JetBrains Mono", monospace; font-size: 30px; font-weight: 700; color: var(--primary); }
    .price-body ul { display: grid; gap: 8px; color: var(--muted); font-size: 14px; margin: 8px 0 16px; }
    .price-body li { padding-left: 16px; position: relative; }
    .price-body li::before { content: "■"; position: absolute; left: 0; color: var(--primary-2); font-size: 10px; top: 4px; }

    .stats {
      padding: 36px 0 !important;
      background: var(--grad-dark); color: #F3F0E8;
    }
    .stats-row {
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
    }
    .stat { text-align: left; padding: 8px 0; }
    .stat b {
      font-family: "JetBrains Mono", monospace; font-size: 28px; display: block;
    }
    .stat span { font-size: 13px; color: #C9D0CC; }

    .review-wall {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    }
    .review {
      background: var(--card); border: 1px solid var(--line); border-radius: 20px;
      padding: 20px; box-shadow: var(--shadow);
    }
    .stars { color: var(--primary-2); letter-spacing: 2px; font-size: 14px; font-weight: 700; }
    .review p { font-size: 14px; margin: 8px 0 12px; }
    .review small { color: var(--muted); }

    .timeline { display: grid; gap: 0; }
    .tl-item {
      display: grid; grid-template-columns: 140px 24px 1fr; gap: 16px; padding: 12px 0;
    }
    .tl-item i {
      width: 12px; height: 12px; border-radius: 50%; background: var(--primary-2);
      margin: 8px auto 0; position: relative;
    }
    .tl-item i::after {
      content: ""; position: absolute; left: 5px; top: 12px; width: 2px; height: calc(100% + 28px); background: var(--line);
    }
    .tl-item:last-child i::after { display: none; }
    .tl-card {
      background: var(--bg-alt); border-radius: 20px; padding: 18px 20px; border: 1px solid var(--line);
    }

    .news-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
    .news-card {
      background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
      box-shadow: var(--shadow); display: flex; flex-direction: column;
    }
    .news-card img { height: 170px; object-fit: cover; width: 100%; }
    .news-card.lead img { height: 240px; }
    .news-card div { padding: 18px 20px 20px; display: grid; gap: 8px; }
    .news-card time { font-size: 12px; color: var(--muted); }
    .news-card h3 { font-size: 18px; }

    .faq-list { display: grid; gap: 10px; }
    .faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
    .faq-item button {
      width: 100%; text-align: left; background: none; border: 0; padding: 16px 20px;
      font-size: 16px; font-weight: 700; min-height: 56px; display: flex; justify-content: space-between; gap: 12px;
    }
    .faq-item .answer {
      display: none; padding: 0 20px 18px 20px; color: var(--muted); border-left: 3px solid var(--primary-2);
      margin: 0 20px 16px; font-size: 15px;
    }
    .faq-item.is-open .answer { display: block; }

    .cta-band {
      background: var(--grad-dark); color: #F3F0E8; padding: 88px 0;
    }
    .cta-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; }
    .cta-band h2 { color: #fff; }
    .contact-line { display: grid; gap: 8px; margin-top: 18px; color: #C9D0CC; }
    .form {
      background: var(--card); color: var(--ink); border-radius: var(--radius-lg); padding: 28px;
      display: grid; gap: 12px; box-shadow: var(--shadow);
    }
    .form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
    .form input, .form select, .form textarea {
      min-height: 46px; border-radius: 14px; border: 1px solid var(--line);
      background: #fff; padding: 10px 12px; font-size: 15px;
    }
    .form textarea { min-height: 96px; resize: vertical; }
    .form input:focus, .form select:focus, .form textarea:focus {
      border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(195,146,46,.2); outline: none;
    }
    .form .is-error { border-color: var(--accent); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .form-msg { color: var(--accent); font-size: 14px; }
    .success-box {
      background: var(--card); color: var(--ink); border-radius: var(--radius); padding: 36px;
      text-align: left;
    }
    .success-box h3 { margin-bottom: 8px; }

    footer {
      background: #101518; color: #C9D0CC; padding: 56px 0 24px;
    }
    .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; }
    footer h3 { color: #F3F0E8; font-size: 16px; margin-bottom: 12px; }
    footer a { color: #C9D0CC; display: inline-block; min-height: 32px; }
    footer a:hover { color: var(--primary-2); }
    .foot-brand strong { color: #F3F0E8; font-size: 20px; display: block; margin-bottom: 8px; }
    .legal {
      border-top: 1px solid rgba(139,151,160,.2); margin-top: 32px; padding-top: 16px;
      font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    }

    @media (max-width: 1440px) {
      .hero-play { right: 5%; }
    }
    @media (max-width: 1024px) {
      :root { --space: 80px; }
      .menu { display: none; }
      .burger { display: inline-flex; }
      .cover-grid, .split, .split.reverse, .bento, .adv-grid, .scene-grid, .product-stage,
      .coupon-grid, .demo-board, .dark-layout, .story-grid, .price-grid, .stats-row,
      .review-wall, .news-grid, .cta-grid, .foot-grid {
        grid-template-columns: 1fr 1fr;
      }
      .bento-card.wide { grid-column: auto; grid-row: auto; }
      .price-card.featured { transform: none; }
      .stats-row { grid-template-columns: repeat(3, 1fr); }
      .coupon-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 768px) {
      .topbar-left span:nth-child(n+3), .trust-mark { display: none; }
      .hero { min-height: 620px; }
      .hero-copy { padding: 56px 0 84px; }
      .hero-play { right: 20px; bottom: 86px; width: 64px; height: 64px; }
      .hero-arrows { display: none; }
      .cover-grid, .split, .split.reverse, .bento, .adv-grid, .scene-grid, .product-stage,
      .coupon-grid, .demo-board, .dark-layout, .story-grid, .price-grid, .review-wall,
      .news-grid, .cta-grid, .foot-grid, .form-row, .region-list, .icon-row {
        grid-template-columns: 1fr;
      }
      .stats-row { grid-template-columns: 1fr 1fr; }
      .tl-item { grid-template-columns: 24px 1fr; }
      .tl-item time { grid-column: 2; }
      .media-frame, .media-frame img, .hotspot, .hotspot img { min-height: 240px; }
      .sec-head.wide { display: block; }
      .legal { flex-direction: column; }
    }
    @media (max-width: 520px) {
      .container { width: min(var(--container), calc(100% - 28px)); }
      :root { --space: 64px; }
      .hero { min-height: 560px; }
      .hero h1 { font-size: 30px; }
      .nav-main .container { min-height: 64px; }
      .brand-text span { display: none; }
      .btn { width: 100%; }
      .hero-actions { display: grid; }
      .top-cta, .nav-actions .btn { width: auto; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero-slide, .btn, .bento-card, .product-card { transition: none; }
    }

/* roulang page: index */
:root{
  --bg:#F3F0E8;
  --bg-alt:#E7E2D6;
  --ink:#1C2422;
  --ink-soft:#4A5552;
  --primary:#3E5C55;
  --primary-2:#C3922E;
  --accent:#D2652D;
  --steel:#8B97A0;
  --dark:#141A1C;
  --card:#FFFcf6;
  --line:rgba(28,36,34,.12);
  --white:#F8F4EA;
  --radius:24px;
  --radius-sm:14px;
  --pill:999px;
  --shadow:0 12px 30px rgba(20,26,28,.08);
  --shadow-hover:0 16px 36px rgba(20,26,28,.14);
  --space:104px;
  --w:1220px;
  --grad:linear-gradient(135deg,#3E5C55 0%,#C3922E 100%);
  --grad-dark:linear-gradient(135deg,#141A1C 0%,#3E5C55 100%);
  --header-top:42px;
  --header-main:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;border:none;background:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--primary-2);outline-offset:3px}
.container{width:min(var(--w),calc(100% - 40px));margin:0 auto}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:80}

/* Header dual row */
.site-header{position:relative;z-index:50}
.topbar{
  height:var(--header-top);
  background:#1A2220;
  color:#E8E2D4;
  font-size:13px;
  display:flex;
  align-items:center;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.top-links a,.top-links span{color:#E8E2D4;white-space:nowrap}
.top-links a:hover{color:#F0C56A}
.trust-mark{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(195,146,46,.18);
  border:1px solid rgba(195,146,46,.45);
  color:#F0C56A;
  border-radius:var(--pill);
  padding:2px 10px;
  font-size:12px;
  letter-spacing:.04em;
}
.top-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;padding:0 14px;border-radius:var(--pill);
  background:var(--grad);color:#fff;font-weight:600;font-size:12px;
}
.top-cta:hover{filter:brightness(1.08)}
.top-cta:active{transform:translateY(1px)}
.mainbar{
  height:var(--header-main);
  background:rgba(243,240,232,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.1);
}
.mainbar.is-sticky{
  position:sticky;top:0;
  box-shadow:0 8px 24px rgba(20,26,28,.08);
}
.mainbar .container{height:100%;display:flex;align-items:center;gap:22px}
.logo{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--ink);
}
.logo-mark{
  width:36px;height:36px;border-radius:10px;
  background:var(--grad-dark);display:grid;place-items:center;
  box-shadow:var(--shadow);
}
.nav-desk{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-desk a{
  position:relative;padding:10px 11px;font-size:14px;font-weight:500;color:var(--ink-soft);
  min-height:44px;display:inline-flex;align-items:center;
}
.nav-desk a:hover{color:var(--ink)}
.nav-desk a.active{color:var(--ink)}
.nav-desk a.active::after{
  content:"";position:absolute;left:11px;right:11px;bottom:6px;height:3px;border-radius:var(--pill);
  background:var(--grad);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;border-radius:var(--pill);font-weight:600;font-size:14px;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 18px rgba(62,92,85,.25)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0);filter:brightness(.96)}
.btn-ghost{border:1px solid var(--steel);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:rgba(62,92,85,.06)}
.btn-ghost:active{transform:translateY(1px)}
.btn-text{color:var(--primary);padding:0;min-height:auto;border-radius:0;font-weight:600}
.btn-text:hover{color:var(--accent)}
.nav-cta{margin-left:8px;flex-shrink:0}
.burger{
  display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;margin-left:auto;
}
.burger span{width:18px;height:2px;background:var(--ink);border-radius:2px;display:block}
.drawer{
  position:fixed;inset:0;background:rgba(20,26,28,.46);opacity:0;pointer-events:none;
  transition:opacity .25s ease;z-index:60;
}
.drawer.open{opacity:1;pointer-events:auto}
.drawer-panel{
  position:absolute;right:0;top:0;height:100%;width:min(86vw,360px);
  background:var(--bg);padding:28px 22px;transform:translateX(100%);
  transition:transform .28s ease;display:flex;flex-direction:column;gap:8px;
  box-shadow:-16px 0 40px rgba(20,26,28,.18);
}
.drawer.open .drawer-panel{transform:none}
.drawer a,.drawer button.linkish{
  min-height:44px;display:flex;align-items:center;padding:8px 6px;font-weight:600;color:var(--ink);
}
.drawer-close{align-self:flex-end;width:44px;height:44px;border-radius:12px;border:1px solid var(--line)}

/* Hero video stage */
.hero{
  position:relative;min-height:min(88vh,820px);color:var(--white);overflow:hidden;
  isolation:isolate;
}
.hero-slides{position:absolute;inset:0}
.hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .8s ease;
}
.hero-slide.is-on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-mask{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(20,26,28,.78) 8%,rgba(62,92,85,.42) 48%,rgba(195,146,46,.28) 100%);
}
.hero-grid{
  position:absolute;inset:0;opacity:.12;pointer-events:none;
  background-image:linear-gradient(rgba(248,244,234,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(248,244,234,.4) 1px,transparent 1px);
  background-size:72px 72px;
}
.hero .container{position:relative;z-index:2;padding:90px 0 78px;display:grid;gap:28px;align-items:end}
.hero-brand{display:inline-flex;align-items:center;gap:8px;color:#F0C56A;font-weight:700;letter-spacing:.12em;font-size:13px}
.hero h1,.hero-frame-title{
  font-size:clamp(32px,5vw,56px);line-height:1.18;font-weight:700;letter-spacing:.02em;max-width:18em;
}
.hero-lead{max-width:42em;font-size:16px;line-height:1.8;color:#F3EAD7}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.play-btn{
  width:76px;height:76px;border-radius:50%;
  background:rgba(248,244,234,.14);border:1px solid rgba(248,244,234,.4);
  display:grid;place-items:center;color:#fff;backdrop-filter:blur(2px);
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.play-btn:hover{transform:scale(1.04);background:rgba(195,146,46,.35)}
.play-btn svg{margin-left:4px}
.hero.is-playing .play-icon{display:none}
.hero.is-playing .pause-icon{display:block}
.pause-icon{display:none}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  min-height:28px;padding:0 10px;border-radius:var(--pill);font-size:12px;font-weight:700;
  background:#C3922E;color:#1C2422;letter-spacing:.02em;
}
.badge.green{background:#3E5C55;color:#F8F4EA}
.badge.orange{background:#D2652D;color:#fff}
.badge.steel{background:#8B97A0;color:#141A1C}
.hero-ctrl{
  position:absolute;z-index:3;inset:auto 0 28px 0;display:flex;justify-content:center;gap:10px;align-items:center;
}
.hero-dots{display:flex;gap:8px}
.hero-dots button{
  width:28px;height:8px;border-radius:var(--pill);background:rgba(248,244,234,.35);
}
.hero-dots button.on{background:#F0C56A;width:36px}
.hero-arrows{position:absolute;inset:0 18px 0 auto;width:calc(100% - 36px);display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:3}
.hero-arrows button{
  pointer-events:auto;width:44px;height:44px;border-radius:50%;
  background:rgba(20,26,28,.35);color:#fff;border:1px solid rgba(248,244,234,.25);
}
.hero-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(248,244,234,.2);z-index:4}
.hero-progress span{display:block;height:100%;width:0;background:var(--grad)}
.hero.is-playing .hero-progress span{animation:load 3.5s linear infinite}
@keyframes load{from{width:0}to{width:100%}}

main{display:block}
section{padding:var(--space) 0;position:relative}
.sec-kicker{color:var(--primary);font-weight:700;font-size:13px;letter-spacing:.14em;margin-bottom:10px}
.sec-title{font-size:clamp(26px,3.2vw,40px);line-height:1.25;font-weight:700;letter-spacing:.01em}
.sec-desc{margin-top:14px;max-width:46em;color:var(--ink-soft);font-size:16px;line-height:1.8}
.alt{background:var(--bg-alt)}

/* Coverage */
.coverage-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;margin-top:36px}
.coverage-stat{
  background:var(--dark);color:var(--white);border-radius:28px;padding:36px;min-height:360px;
  background-image:linear-gradient(135deg,rgba(20,26,28,.72),rgba(62,92,85,.55)),url("/assets/images/39fd569d81c70505.jpg");
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
}
.coverage-stat strong{font-size:64px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.coverage-chips{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chip{
  background:var(--card);border:1px solid var(--steel);border-radius:22px;padding:18px 18px 16px;
  box-shadow:var(--shadow);min-height:112px;
}
.chip h3{font-size:16px;margin-bottom:6px}
.chip p{font-size:14px;color:var(--ink-soft);line-height:1.65}
.trust-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}
.trust-item{
  background:rgba(255,252,246,.7);border:1px solid var(--line);border-radius:18px;padding:16px;
  text-align:left;font-size:14px;font-weight:600;
}
.trust-item span{display:block;color:var(--ink-soft);font-weight:400;font-size:13px;margin-top:4px}

/* Intro */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;margin-top:36px}
.intro-pic{
  border-radius:28px;overflow:hidden;min-height:420px;box-shadow:var(--shadow);border:1px solid var(--line);
}
.intro-pic img{width:100%;height:100%;object-fit:cover;min-height:420px}
.intro-copy h2{margin-bottom:12px}
.spec-table{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spec-table div{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px;
}
.spec-table b{display:block;color:var(--primary);font-size:12px;letter-spacing:.08em}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(170px,auto);gap:16px;margin-top:32px}
.bento-card{
  background:var(--card);border:1px solid var(--steel);border-radius:24px;padding:24px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,box-shadow .2s ease;
}
.bento-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.bento-card.wide{grid-column:span 7;grid-row:span 2;background:
  linear-gradient(160deg,rgba(255,252,246,.2),rgba(20,26,28,.55)),url("/assets/images/ec304358d696417a.webp") center/cover;
  color:#F8F4EA;border:none;min-height:360px;justify-content:flex-end}
.bento-card.mid{grid-column:span 5}
.bento-card.sm{grid-column:span 4}
.bento-card h3{font-size:22px}
.bento-card li{font-size:14px;padding-left:12px;position:relative;color:inherit;opacity:.95}
.bento-card li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--primary-2)}
.bento-card.wide li::before{background:#F0C56A}

/* Advantages */
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.adv-card{
  background:var(--card);border-radius:26px;padding:26px;border:1px solid var(--line);box-shadow:var(--shadow);
  min-height:230px;display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,box-shadow .2s ease;
}
.adv-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.adv-card h3{font-size:20px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.adv-card p{color:var(--ink-soft);font-size:14px}

/* Scenes */
.scene-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:16px;
  overflow-x:auto;margin-top:28px;padding-bottom:8px;scroll-snap-type:x mandatory;
}
.scene-card{
  scroll-snap-align:start;border-radius:24px;overflow:hidden;min-height:340px;position:relative;color:#fff;
  border:1px solid var(--line);
}
.scene-card img{width:100%;height:100%;object-fit:cover;min-height:340px}
.scene-card figcaption{
  position:absolute;inset:auto 0 0 0;padding:20px;
  background:linear-gradient(180deg,transparent,rgba(20,26,28,.82));
}
.scene-card h3{font-size:20px;margin-bottom:6px}
.scene-card p{font-size:14px;color:#E8E2D4}

/* Local */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:32px;position:relative}
.steps::before{
  content:"";position:absolute;left:4%;right:4%;top:28px;height:1px;border-top:2px dashed rgba(62,92,85,.35);
}
.step{background:var(--card);border-radius:22px;padding:22px 16px;border:1px solid var(--line);position:relative}
.step b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--grad);color:#fff;margin-bottom:10px}
.step h3{font-size:16px;margin-bottom:6px}
.step p{font-size:14px;color:var(--ink-soft)}

/* Coupons */
.coupon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.coupon{
  background:
    radial-gradient(circle at left 54px, var(--bg) 10px, transparent 11px),
    radial-gradient(circle at right 54px, var(--bg) 10px, transparent 11px),
    linear-gradient(#fff,#fff);
  border-radius:20px;padding:20px;border:1px dashed #C3922E;position:relative;min-height:210px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;
}
.coupon .yen{font-size:34px;font-weight:700;color:var(--accent);line-height:1.1}
.coupon h3{font-size:16px}
.coupon p{font-size:13px;color:var(--ink-soft)}
.coupon .btn{margin-top:auto;width:100%}
.coupon.got{opacity:.7}

/* Products */
.prod-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:16px;margin-top:32px}
.prod-side{display:grid;gap:16px}
.prod{
  background:var(--card);border-radius:26px;overflow:hidden;border:1px solid var(--steel);box-shadow:var(--shadow);
  display:grid;transition:transform .2s ease,box-shadow .2s ease;
}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.prod.feature{min-height:560px;grid-template-rows:1.1fr auto}
.prod img{width:100%;height:100%;object-fit:cover}
.prod.feature img{min-height:300px}
.prod-side .prod img{height:150px;object-fit:cover}
.prod-body{padding:22px 22px 20px}
.prod-body h3{font-size:22px;margin-bottom:8px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px;color:var(--ink-soft);margin:10px 0 14px}
.kv b{color:var(--ink);font-weight:600}

/* Compare */
.compare-table{margin-top:28px;overflow:auto;border-radius:24px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:14px 16px;text-align:left;font-size:14px;border-bottom:1px solid var(--line)}
th{background:var(--primary);color:#F8F4EA;font-weight:600}
tr:last-child td{border-bottom:none}
td strong{color:var(--primary)}

/* Demo */
.demo-stage{margin-top:28px;border-radius:28px;overflow:hidden;position:relative;min-height:460px;border:1px solid var(--line)}
.demo-stage img{width:100%;height:520px;object-fit:cover}
.hotspot{
  position:absolute;background:rgba(20,26,28,.72);color:#fff;border-radius:16px;padding:10px 12px;font-size:13px;max-width:200px;
}
.hotspot b{display:block;color:#F0C56A}
.hs1{left:8%;top:18%}
.hs2{right:10%;top:28%}
.hs3{left:18%;bottom:14%}

/* Cases dark */
.cases{background:var(--dark);color:var(--white);background-image:linear-gradient(135deg,rgba(20,26,28,.88),rgba(62,92,85,.72)),url("/assets/images/a6031e95e286951a.webp");background-size:cover;background-position:center}
.cases .sec-desc{color:#D9D3C5}
.case-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;margin-top:32px}
.idea{font-size:28px;line-height:1.4;font-weight:700;max-width:12em}
.case-grid{display:grid;gap:12px}
.case-card{
  background:rgba(20,26,28,.45);border:1px solid rgba(139,151,160,.35);border-radius:22px;padding:18px 18px 16px;
}
.case-card h3{font-size:18px;margin-bottom:6px}
.case-card p{font-size:14px;color:#D9D3C5}

/* Stories */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.story{
  background:var(--card);border-radius:24px;padding:0;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
}
.story img{height:180px;width:100%;object-fit:cover}
.story div{padding:18px 18px 20px}
.story h3{font-size:16px;margin-bottom:6px}
.story p{font-size:14px;color:var(--ink-soft)}
.story q{display:block;margin-top:8px;font-size:14px}

/* Pricing */
.price-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:16px;margin-top:32px;align-items:stretch}
.price{
  background:var(--card);border-radius:26px;padding:26px 22px;border:1px solid var(--steel);box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:8px;
}
.price.featured{
  transform:translateY(-10px);
  border:1px solid transparent;
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    var(--grad) border-box;
  box-shadow:var(--shadow-hover);
}
.price.featured::before{
  content:"库内常用配置";display:block;background:var(--grad);color:#fff;border-radius:12px 12px 0 0;
  margin:-26px -22px 12px;padding:10px 22px;font-size:13px;font-weight:700;letter-spacing:.08em;
}
.price .num{font-size:32px;font-weight:700;color:var(--primary)}
.price li{font-size:14px;color:var(--ink-soft);padding:4px 0 4px 14px;position:relative}
.price li::before{content:"▸";position:absolute;left:0;color:var(--primary-2)}
.price .btn{margin-top:auto}

/* Stats */
.stats{padding:42px 0;background:var(--grad-dark);color:#F8F4EA}
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stat{text-align:left;padding:8px}
.stat b{display:block;font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;opacity:.86}

/* Reviews */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.review{
  background:var(--card);border-radius:22px;padding:18px;border:1px solid var(--line);box-shadow:var(--shadow);
}
.stars{color:#C3922E;letter-spacing:2px;font-size:14px;font-weight:700}
.review p{font-size:14px;margin:8px 0;color:var(--ink-soft)}
.review small{color:var(--steel);font-size:12px}

/* Reputation timeline */
.time-line{margin-top:28px;display:grid;gap:14px}
.time-item{
  display:grid;grid-template-columns:140px 1fr;gap:18px;background:var(--card);border-radius:22px;padding:18px 20px;
  border:1px solid var(--line);
}
.time-item b{color:var(--primary)}

/* News */
.news-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:16px;margin-top:28px}
.news-card{background:var(--card);border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column}
.news-card img{height:180px;object-fit:cover;width:100%}
.news-card.big img{height:240px}
.news-card div{padding:16px 16px 18px}
.news-card time{font-size:12px;color:var(--steel)}
.news-card h3{font-size:18px;margin:6px 0}
.news-card p{font-size:14px;color:var(--ink-soft)}

/* FAQ */
.faq-list{margin-top:28px;display:grid;gap:10px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.faq-item button{
  width:100%;text-align:left;padding:16px 18px;font-weight:700;font-size:16px;display:flex;justify-content:space-between;gap:12px;min-height:52px;
}
.faq-item .ans{display:none;padding:0 18px 16px;color:var(--ink-soft);border-left:3px solid var(--primary-2);margin:0 18px 16px;font-size:15px;line-height:1.75}
.faq-item.open .ans{display:block}

/* Inquiry */
.inquiry{
  background:var(--grad-dark);color:#F8F4EA;
  background-image:linear-gradient(135deg,rgba(20,26,28,.88),rgba(62,92,85,.7)),url("/assets/images/87a7a9c49f077161.webp");
  background-size:cover;background-position:center;
}
.inquiry .sec-desc{color:#E8E2D4}
.inquiry-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:24px;margin-top:28px}
.contact-card{background:rgba(20,26,28,.4);border:1px solid rgba(139,151,160,.35);border-radius:24px;padding:24px}
.contact-card p{margin:8px 0;color:#E8E2D4}
.form{
  background:rgba(248,244,234,.96);color:var(--ink);border-radius:26px;padding:24px;display:grid;gap:12px;
}
.form label{font-size:13px;font-weight:600;display:grid;gap:6px}
.form input,.form select,.form textarea{
  min-height:44px;border-radius:14px;border:1px solid var(--steel);padding:10px 12px;background:#fff;color:var(--ink);font-size:15px;
}
.form textarea{min-height:96px;resize:vertical}
.form input.error,.form select.error,.form textarea.error{border-color:var(--accent);box-shadow:0 0 0 3px rgba(210,101,45,.15)}
.form .btn{width:100%;border-radius:14px}
.form-success{display:none;background:#fff;border-radius:20px;padding:28px;text-align:center}
.form.ok .fields,.form.ok .btn{display:none}
.form.ok .form-success{display:block}

/* Footer */
.site-footer{background:#101618;color:#D5D0C4;padding:56px 0 24px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:24px}
.site-footer h3{color:#F8F4EA;font-size:16px;margin-bottom:12px}
.site-footer a{display:block;padding:6px 0;color:#D5D0C4;min-height:36px}
.site-footer a:hover{color:#F0C56A}
.legal{margin-top:28px;padding-top:16px;border-top:1px solid rgba(139,151,160,.25);font-size:13px;color:#9AA39C;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:1440px){
  :root{--w:1180px}
}
@media (max-width:1024px){
  :root{--space:84px}
  .nav-desk,.nav-cta{display:none}
  .burger{display:flex}
  .coverage-wrap,.intro-grid,.case-split,.inquiry-grid,.prod-layout{grid-template-columns:1fr}
  .bento-card.wide,.bento-card.mid,.bento-card.sm{grid-column:span 6}
  .adv-grid,.story-grid,.review-grid,.coupon-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr; }
  .steps::before{display:none}
  .price-grid{grid-template-columns:1fr; }
  .price.featured{transform:none}
  .stats-row{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr 1fr}
  .trust-row{grid-template-columns:1fr 1fr}
  .hero-arrows{display:none}
  .prod.feature{min-height:auto}
}
@media (max-width:768px){
  .container{width:min(var(--w),calc(100% - 28px))}
  .top-links span.hide-sm,.trust-mark{display:none}
  .bento{grid-template-columns:1fr}
  .bento-card.wide,.bento-card.mid,.bento-card.sm{grid-column:auto}
  .coverage-chips,.adv-grid,.story-grid,.review-grid,.coupon-grid,.news-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero{min-height:640px}
  .hero .container{padding:72px 0 86px}
  .demo-stage img{height:380px}
  .hotspot{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:8px;max-width:none}
  .demo-stage{display:flex;flex-direction:column}
  .time-item{grid-template-columns:1fr}
}
@media (max-width:520px){
  :root{--space:72px;--header-main:64px}
  .topbar .container{justify-content:space-between}
  .top-links span,.top-links a.mail{display:none}
  .hero h1,.hero-frame-title{font-size:30px}
  .hero-lead{font-size:15px}
  .coverage-stat strong{font-size:48px}
  .steps,.trust-row,.stats-row,.foot-grid{grid-template-columns:1fr}
  .legal{flex-direction:column}
  .spec-table,.kv{grid-template-columns:1fr}
  .play-btn{width:56px;height:56px}
}