:root {
  --ink: #0d1b2a;
  --ink-soft: #122338;
  --canvas: #f6f8fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #172033;
  --muted: #667085;
  --subtle: #98a2b3;
  --teal: #0f766e;
  --teal-dark: #0b5f58;
  --teal-soft: #dff7f4;
  --blue: #2563eb;
  --blue-soft: #e8efff;
  --green: #16803a;
  --green-soft: #e7f8ed;
  --amber: #b45309;
  --amber-soft: #fff3dd;
  --red: #c7372f;
  --red-soft: #fdeceb;
  --shadow: 0 16px 42px rgba(13, 27, 42, .08);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  min-width: 320px;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .32);
  outline-offset: 2px;
}

.container { margin: 0 auto; max-width: 1200px; padding: 0 28px; }
.eyebrow { color: var(--teal); font-size: .75rem; font-weight: 800; letter-spacing: .12em; margin: 0; text-transform: uppercase; }
.muted { color: var(--muted); }
.screen-reader-only { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

.brand { align-items: center; color: var(--ink); display: inline-flex; font-size: 1.38rem; font-weight: 780; gap: 10px; letter-spacing: -.06em; }
.brand:hover { color: var(--ink); }
.brand-word-mark b { color: #55d6c6; font-weight: inherit; }
.brand-mark { display: grid; height: 30px; position: relative; width: 34px; }
.brand-mark::before, .brand-mark::after { background: currentColor; content: ""; height: 2px; left: 5px; opacity: .92; position: absolute; top: 14px; transform-origin: left center; width: 23px; }
.brand-mark::before { transform: rotate(29deg); }
.brand-mark::after { transform: rotate(-31deg); }
.brand-mark i { background: #55d6c6; border: 2px solid currentColor; border-radius: 50%; height: 10px; position: absolute; width: 10px; z-index: 1; }
.brand-mark i:nth-child(1) { left: 0; top: 10px; }
.brand-mark i:nth-child(2) { right: 0; top: 1px; }
.brand-mark i:nth-child(3) { right: 0; bottom: 1px; }
.brand-mark i:nth-child(4) { background: #8ce6dc; left: 13px; top: 10px; }

.button { align-items: center; border: 1px solid transparent; border-radius: 8px; display: inline-flex; font-size: .9rem; font-weight: 760; gap: 8px; justify-content: center; line-height: 1.1; min-height: 43px; padding: 11px 16px; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--teal); box-shadow: 0 9px 18px rgba(15, 118, 110, .18); color: #fff; }
.button-primary:hover { background: var(--teal-dark); color: #fff; }
.button-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
.button-secondary:hover { border-color: var(--teal); color: var(--teal); }
.button-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.button-quiet:hover { background: var(--surface-soft); color: var(--text); }
.button-danger { background: var(--red-soft); border-color: rgba(199, 55, 47, .18); color: var(--red); }
.button-danger:hover { background: #f9dddd; color: #a92520; }
.button-small { font-size: .81rem; min-height: 36px; padding: 8px 11px; }
.button[disabled] { cursor: not-allowed; opacity: .52; transform: none; }

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.site-header-inner { align-items: center; display: flex; justify-content: space-between; min-height: 72px; }
.site-nav { align-items: center; display: flex; gap: 22px; }
.site-nav a { color: var(--muted); font-size: .88rem; font-weight: 650; }
.site-nav a:hover { color: var(--teal); }

.hero { background: radial-gradient(circle at 82% 16%, rgba(82, 214, 198, .18), transparent 27%), linear-gradient(132deg, var(--ink) 0%, #123447 100%); color: #fff; overflow: hidden; }
.hero-grid { align-items: center; display: grid; gap: clamp(34px, 6vw, 80px); grid-template-columns: minmax(0, 1fr) minmax(380px, .94fr); padding: clamp(56px, 9vw, 100px) 0; }
.hero .eyebrow { color: #76e0d4; }
.hero h1 { font-size: clamp(2.35rem, 5.1vw, 4.1rem); letter-spacing: -.075em; line-height: 1; margin: 11px 0 0; max-width: 670px; }
.hero-copy > p:not(.eyebrow) { color: #c7d4de; font-size: 1.05rem; line-height: 1.65; margin: 20px 0 0; max-width: 610px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.hero .button-secondary { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.hero .button-secondary:hover { background: rgba(255, 255, 255, .14); border-color: #8de4da; }
.hero-trust { color: #b8c9d4; display: flex; flex-wrap: wrap; font-size: .86rem; font-weight: 650; gap: 17px; margin-top: 25px; }
.hero-trust span { align-items: center; display: inline-flex; gap: 7px; }
.hero-trust strong { color: #70dfd3; font-size: 1rem; }

.product-preview { background: #f8fbfc; border: 1px solid rgba(255,255,255,.32); border-radius: 15px; box-shadow: 0 30px 62px rgba(0, 0, 0, .26); color: var(--text); overflow: hidden; transform: rotate(1.5deg); }
.preview-top { align-items: center; background: #fff; border-bottom: 1px solid var(--line); display: flex; height: 42px; padding: 0 14px; }
.preview-dots { display: flex; gap: 5px; }
.preview-dots i { background: #c9d5de; border-radius: 50%; height: 7px; width: 7px; }
.preview-title { color: #78889a; font-size: .7rem; font-weight: 700; margin: 0 auto; }
.preview-body { display: grid; grid-template-columns: 100px minmax(0, 1fr); min-height: 298px; }
.preview-side { background: linear-gradient(180deg, #0d1b2a, #102c3d); color: #b7c8d3; padding: 16px 11px; }
.preview-side-brand { color: #fff; font-size: .77rem; font-weight: 780; margin-bottom: 27px; }
.preview-side-brand b { color: #55d6c6; font-weight: inherit; }
.preview-side span { display: block; font-size: .63rem; margin: 13px 0; }
.preview-side span.is-active { background: rgba(85, 214, 198, .15); border-radius: 5px; color: #6ee1d4; margin-left: -5px; margin-right: -5px; padding: 7px 5px; }
.preview-content { padding: 16px; }
.preview-content-head { align-items: center; display: flex; justify-content: space-between; }
.preview-content-head p { color: #78889a; font-size: .6rem; font-weight: 750; letter-spacing: .08em; margin: 0; }
.preview-content-head h2 { font-size: 1rem; letter-spacing: -.035em; margin: 3px 0 0; }
.preview-create { background: var(--teal); border-radius: 6px; color: #fff; font-size: .63rem; font-weight: 750; padding: 7px 9px; }
.preview-metrics { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin-top: 15px; }
.preview-metric { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 9px; }
.preview-metric span { color: #7c8999; display: block; font-size: .58rem; }
.preview-metric strong { display: block; font-size: 1.2rem; letter-spacing: -.06em; margin-top: 3px; }
.preview-metric:nth-child(1) strong { color: var(--teal); }
.preview-metric:nth-child(2) strong { color: var(--blue); }
.preview-metric:nth-child(3) strong { color: #6d4aff; }
.preview-map { background: linear-gradient(130deg, #fff, #f4fafb); border: 1px solid var(--line); border-radius: 8px; height: 126px; margin-top: 10px; overflow: hidden; padding: 14px; position: relative; }
.preview-map::before { background-image: radial-gradient(#d4e0e5 1px, transparent 1px); background-size: 14px 14px; content: ""; inset: 0; opacity: .72; position: absolute; }
.map-node { align-items: center; background: #fff; border: 1px solid #d3e5e3; border-left: 3px solid var(--teal); border-radius: 5px; box-shadow: 0 3px 8px rgba(13, 27, 42, .08); color: #305061; display: flex; font-size: .58rem; font-weight: 760; height: 28px; justify-content: center; position: absolute; width: 72px; z-index: 1; }
.map-node::after { border-top: 1px solid #63c9ba; content: ""; position: absolute; width: 49px; }
.map-node:nth-child(1) { left: 16px; top: 49px; }
.map-node:nth-child(1)::after { left: 70px; }
.map-node:nth-child(2) { left: 128px; top: 21px; }
.map-node:nth-child(2)::after { left: -23px; top: 32px; transform: rotate(25deg); }
.map-node:nth-child(3) { left: 128px; top: 74px; }
.map-node:nth-child(3)::after { left: -22px; top: -6px; transform: rotate(-24deg); }

.benefit-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.benefit-item { border-right: 1px solid var(--line); padding: 25px 20px; }
.benefit-item:last-child { border-right: 0; }
.benefit-icon { align-items: center; background: var(--teal-soft); border-radius: 9px; color: var(--teal); display: inline-flex; font-size: 1.1rem; font-weight: 800; height: 35px; justify-content: center; width: 35px; }
.benefit-item strong { display: block; font-size: .92rem; margin-top: 10px; }
.benefit-item small { color: var(--muted); display: block; font-size: .79rem; line-height: 1.45; margin-top: 3px; }

.section { padding: 78px 0; }
.section-heading { margin-bottom: 29px; max-width: 760px; }
.section-heading h2 { font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -.065em; line-height: 1.08; margin: 9px 0 0; }
.section-heading > p:not(.eyebrow) { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 13px 0 0; }
.feature-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; min-height: 184px; padding: 20px; }
.feature-card .benefit-icon.is-blue { background: var(--blue-soft); color: var(--blue); }
.feature-card .benefit-icon.is-violet { background: #eeeaff; color: #6d4aff; }
.feature-card h3 { font-size: 1rem; letter-spacing: -.03em; margin: 15px 0 5px; }
.feature-card p { color: var(--muted); font-size: .87rem; line-height: 1.55; margin: 0; }

.configurator-section { background: #edf7f6; border-bottom: 1px solid #d6ebe8; border-top: 1px solid #d6ebe8; }
.configurator-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(340px, .43fr); }
.configurator-main { display: grid; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 9px 24px rgba(13, 27, 42, .035); }
.panel-header { align-items: start; border-bottom: 1px solid var(--line); display: flex; gap: 15px; justify-content: space-between; padding: 20px 21px 15px; }
.panel-header h3 { font-size: 1.06rem; letter-spacing: -.03em; margin: 3px 0 0; }
.panel-header p:not(.eyebrow) { color: var(--muted); font-size: .84rem; line-height: 1.5; margin: 6px 0 0; }
.period-picker { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); padding: 20px 21px; }
.period-option { border: 1px solid var(--line-strong); border-radius: 9px; cursor: pointer; display: block; padding: 13px; }
.period-option:has(input:checked) { background: var(--teal-soft); border-color: var(--teal); }
.period-option input { accent-color: var(--teal); margin-right: 7px; }
.period-option strong { font-size: .91rem; }
.period-option small { color: var(--muted); display: block; font-size: .78rem; line-height: 1.4; margin: 4px 0 0 24px; }
.period-option:has(input:checked) small { color: #24635d; }
.catalog-group + .catalog-group { border-top: 1px solid var(--line); }
.catalog-group-header { align-items: center; display: flex; justify-content: space-between; padding: 18px 21px 10px; }
.catalog-group-header h4 { font-size: .83rem; letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.catalog-group-header span { color: var(--muted); font-size: .76rem; }
.product-list { display: grid; gap: 9px; padding: 0 16px 17px; }
.product-card { border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 14px; transition: border-color .16s ease, background .16s ease; }
.product-card.is-selected { background: #fbfefd; border-color: rgba(15, 118, 110, .55); }
.product-card.is-mandatory { background: var(--surface-soft); }
.product-selector { align-items: center; background: var(--surface-soft); border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; display: inline-flex; height: 22px; justify-content: center; margin-top: 2px; width: 22px; }
.product-selector input { accent-color: var(--teal); height: 16px; margin: 0; width: 16px; }
.product-selector input:disabled { cursor: not-allowed; }
.product-copy { min-width: 0; }
.product-name-line { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.product-name-line strong { font-size: .92rem; }
.badge { background: var(--teal-soft); border-radius: 999px; color: var(--teal); font-size: .68rem; font-weight: 760; padding: 3px 7px; }
.badge-neutral { background: var(--surface-soft); color: var(--muted); }
.product-copy p { color: var(--muted); font-size: .8rem; line-height: 1.45; margin: 3px 0 0; }
.product-price { min-width: 132px; text-align: right; }
.product-price strong { display: block; font-size: .92rem; }
.product-price span { color: var(--muted); display: block; font-size: .73rem; margin-top: 2px; }
.quantity-input { align-items: center; display: flex; gap: 7px; margin-top: 9px; }
.quantity-input label { color: var(--muted); font-size: .76rem; }
.quantity-input input { border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text); font-size: .85rem; min-height: 34px; padding: 5px 7px; width: 85px; }
.hours-package { border-top: 1px solid var(--line); display: flex; gap: 9px; margin-top: 10px; padding-top: 10px; }
.hours-package input { accent-color: var(--teal); margin-top: 3px; }
.hours-package strong, .hours-package small { display: block; }
.hours-package strong { font-size: .82rem; }
.hours-package small { color: var(--muted); font-size: .75rem; line-height: 1.4; margin-top: 1px; }

.quote-panel { position: sticky; top: 91px; }
.quote-panel .panel-header { display: block; }
.quote-period { color: var(--muted); font-size: .81rem; margin: 6px 0 0; }
.quote-lines { display: grid; padding: 8px 21px 0; }
.quote-line { align-items: start; border-bottom: 1px solid var(--line); display: flex; gap: 13px; justify-content: space-between; padding: 11px 0; }
.quote-line:last-child { border-bottom: 0; }
.quote-line > span { color: var(--muted); font-size: .81rem; line-height: 1.4; max-width: 70%; }
.quote-line strong { font-size: .87rem; text-align: right; }
.quote-line.is-discount strong { color: var(--green); }
.quote-total { background: var(--teal-soft); border-radius: 9px; margin: 10px 16px 0; padding: 15px; }
.quote-total span { color: #17645e; display: block; font-size: .78rem; font-weight: 700; }
.quote-total strong { color: var(--teal-dark); display: block; font-size: 1.5rem; letter-spacing: -.055em; line-height: 1.15; margin-top: 3px; }
.quote-total small { color: #3c6e6a; display: block; font-size: .75rem; margin-top: 5px; }
.quote-actions { display: grid; gap: 8px; padding: 16px; }
.quote-actions .button { width: 100%; }
.quote-note { color: var(--muted); font-size: .73rem; line-height: 1.45; margin: 0; text-align: center; }
.quote-status { background: var(--amber-soft); border: 1px solid rgba(180, 83, 9, .2); border-radius: 8px; color: #87520c; font-size: .77rem; line-height: 1.45; margin: 0 16px 16px; padding: 10px; }
.quote-status[hidden] { display: none; }
.copy-feedback { color: var(--green); font-size: .78rem; min-height: 18px; text-align: center; }

.flow-section { background: var(--surface); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.flow-row { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 31px; }
.flow-step { background: var(--surface-soft); border: 1px solid var(--line); min-height: 121px; padding: 16px 14px; position: relative; }
.flow-step:first-child { border-radius: 9px 0 0 9px; }
.flow-step:last-child { border-radius: 0 9px 9px 0; }
.flow-step:not(:last-child)::after { background: var(--teal); clip-path: polygon(0 0, 100% 50%, 0 100%); content: ""; height: 11px; position: absolute; right: -7px; top: calc(50% - 6px); width: 8px; z-index: 1; }
.flow-step span { color: var(--teal); font-size: .75rem; font-weight: 800; }
.flow-step strong { display: block; font-size: .9rem; margin-top: 7px; }
.flow-step small { color: var(--muted); display: block; font-size: .76rem; line-height: 1.45; margin-top: 3px; }

.faq-list { display: grid; gap: 9px; grid-template-columns: repeat(2, 1fr); }
.faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 0 16px; }
.faq-list summary { cursor: pointer; font-size: .9rem; font-weight: 720; padding: 15px 0; }
.faq-list p { color: var(--muted); font-size: .85rem; line-height: 1.55; margin: 0 0 15px; }

.site-footer { background: var(--ink); color: #9fb2c0; font-size: .78rem; padding: 25px 0; }
.site-footer-inner { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.site-footer .brand { color: #fff; font-size: 1.08rem; }
.site-footer .brand-mark { transform: scale(.83); transform-origin: left center; }

.admin-page { min-height: 100vh; }
.admin-header { background: linear-gradient(132deg, var(--ink), #14384c); color: #fff; padding: 34px 0; }
.admin-header-inner { align-items: center; display: flex; gap: 24px; justify-content: space-between; }
.admin-header .brand { color: #fff; }
.admin-header .brand-mark i { border-color: var(--ink); }
.admin-header h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.06em; line-height: 1.1; margin: 10px 0 0; }
.admin-header p:not(.eyebrow) { color: #c5d4de; margin: 8px 0 0; max-width: 700px; }
.admin-header .eyebrow { color: #77e0d4; }
.admin-header .button-secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.27); color: #fff; }
.admin-header .button-secondary:hover { border-color: #7be1d5; color: #fff; }
.admin-main { padding: 30px 0 64px; }
.admin-alert { background: var(--amber-soft); border: 1px solid rgba(180,83,9,.2); border-radius: 10px; color: #79500f; margin-bottom: 20px; padding: 15px 17px; }
.admin-alert strong { display: block; font-size: .92rem; }
.admin-alert p { font-size: .84rem; line-height: 1.5; margin: 4px 0 0; }
.admin-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 290px; }
.admin-main-column { display: grid; gap: 16px; }
.admin-panel { padding: 20px; }
.admin-panel h2 { font-size: 1.1rem; letter-spacing: -.035em; margin: 4px 0 0; }
.admin-panel > p:not(.eyebrow) { color: var(--muted); font-size: .86rem; line-height: 1.5; margin: 6px 0 18px; }
.admin-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.admin-grid--three { grid-template-columns: repeat(3, 1fr); }
.field { display: grid; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field label, .field > span { color: var(--muted); font-size: .76rem; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }
.field input, .field select, .field textarea { background: var(--surface-soft); border: 1px solid var(--line-strong); border-radius: 7px; color: var(--text); min-height: 40px; padding: 9px 10px; width: 100%; }
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,118,110,.12); }
.admin-table-wrap { overflow-x: auto; }
.admin-table { border-collapse: collapse; min-width: 980px; width: 100%; }
.admin-table th { background: var(--surface-soft); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; padding: 10px 8px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-table td { border-bottom: 1px solid var(--line); padding: 9px 8px; vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table input, .admin-table select, .admin-table textarea { background: var(--surface-soft); border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text); font-size: .82rem; min-height: 35px; padding: 7px; width: 100%; }
.admin-table textarea { min-height: 58px; resize: vertical; }
.admin-table .check-cell { text-align: center; }
.admin-table .check-cell input { accent-color: var(--teal); height: 17px; min-height: auto; width: 17px; }
.admin-sidebar { display: grid; gap: 12px; position: sticky; top: 20px; }
.admin-sidebar .panel { padding: 16px; }
.admin-sidebar h3 { font-size: .98rem; letter-spacing: -.03em; margin: 4px 0 0; }
.admin-sidebar p { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: 6px 0 0; }
.admin-actions { display: grid; gap: 8px; margin-top: 14px; }
.admin-status { background: var(--teal-soft); border-radius: 7px; color: #24635d; font-size: .78rem; line-height: 1.45; margin-top: 12px; min-height: 0; padding: 0; }
.admin-status:not(:empty) { padding: 10px; }
.admin-hidden-file { display: none; }
.row-actions { display: flex; gap: 5px; }

@media (max-width: 960px) {
  .hero-grid, .configurator-layout, .admin-layout { grid-template-columns: 1fr; }
  .product-preview { margin: 0 auto; max-width: 530px; transform: none; width: 100%; }
  .quote-panel, .admin-sidebar { position: static; }
  .admin-sidebar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .container { padding: 0 18px; }
  .site-nav { display: none; }
  .benefit-grid, .feature-grid, .faq-list { grid-template-columns: repeat(2, 1fr); }
  .benefit-item:nth-child(2) { border-right: 0; }
  .benefit-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .flow-row { grid-template-columns: 1fr; }
  .flow-step { border-radius: 0 !important; min-height: auto; }
  .flow-step:first-child { border-radius: 9px 9px 0 0 !important; }
  .flow-step:last-child { border-radius: 0 0 9px 9px !important; }
  .flow-step:not(:last-child)::after { bottom: -7px; left: calc(50% - 5px); right: auto; top: auto; transform: rotate(90deg); }
  .admin-header-inner, .site-footer-inner { align-items: flex-start; flex-direction: column; }
  .admin-grid, .admin-grid--three, .admin-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .site-header-inner { min-height: 64px; }
  .site-header-inner .button { font-size: .77rem; min-height: 37px; padding: 9px 10px; }
  .brand { font-size: 1.16rem; }
  .brand-mark { transform: scale(.87); transform-origin: left center; }
  .preview-body { grid-template-columns: 77px minmax(0, 1fr); }
  .preview-side { padding-left: 8px; padding-right: 8px; }
  .preview-side span { font-size: .55rem; }
  .preview-content { padding: 12px; }
  .preview-map { height: 115px; }
  .map-node:nth-child(2), .map-node:nth-child(3) { left: 111px; }
  .benefit-grid, .feature-grid, .faq-list, .period-picker { grid-template-columns: 1fr; }
  .benefit-item { border-bottom: 1px solid var(--line); border-right: 0; }
  .benefit-item:last-child { border-bottom: 0; }
  .product-card { grid-template-columns: auto minmax(0, 1fr); }
  .product-price { grid-column: 2; text-align: left; }
  .hero-actions .button { width: 100%; }
  .section { padding: 56px 0; }
}