/* Same visual as design-demo.html */
:root {
        --surface: #f7f5f2;
        --elevated: #ffffff;
        --ink: #1c1917;
        --muted: #3f3b37;
        --accent: #4f5f34;
        --accent-hover: #3f4c29;
        --accent-soft: #6d8248;
        --border: #d9d4cc;
        --soft: #f3f0ea;
        --note: #efe8d4;
        --radius: 0.75rem;
        --pad: clamp(1.25rem, 4vw, 2.5rem);
        --fab: 2.75rem;
        --dock-h: 5rem;
        --header-h: 4.25rem;
        --btn-bg: #4f5f34;
        --btn-ink: #f7f5f2;
        color-scheme: light;
      }
      html.dark {
        --surface: #1c1917;
        --elevated: #292524;
        --ink: #fafaf9;
        --muted: #d6d3d1;
        --accent: #c5d4a4;
        --accent-hover: #d7e4b8;
        --accent-soft: #9cb076;
        --border: #44403c;
        --soft: #241f1c;
        --note: #3a3428;
        --btn-bg: #c5d4a4;
        --btn-ink: #1c1917;
        color-scheme: dark;
      }
      * { box-sizing: border-box; }
      html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--header-h) + 0.75rem);
        scrollbar-color: var(--accent-soft) var(--soft);
      }
      html, body { margin: 0; }
      body {
        font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
        background: var(--surface);
        color: var(--ink);
        -webkit-font-smoothing: antialiased;
      }
      ::selection { background: #d5e0b8; color: #1c1917; }
      a { color: var(--accent); text-underline-offset: 0.18em; }
      a:hover { color: var(--accent-hover); }
      a:focus-visible, button:focus-visible, summary:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      .skip {
        position: absolute;
        left: 0.75rem;
        top: 0.75rem;
        z-index: 80;
        padding: 0.65rem 1rem;
        background: var(--ink);
        color: var(--surface);
        border-radius: 0.5rem;
        text-decoration: none;
        transform: translateY(-150%);
      }
      .skip:focus { transform: none; color: var(--surface); }
      [id] { scroll-margin-top: calc(var(--header-h) + 0.75rem); }
      .demo-banner {
        padding: 0.55rem var(--pad);
        background: #3f4a2c;
        color: #f7f5f2;
        font-size: 0.8125rem;
        line-height: 1.4;
      }
      .demo-banner a { color: #e8efc8; }
      html.embed .demo-banner { display: none; }
      header {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: var(--header-h);
        padding: 0.5rem max(var(--pad), env(safe-area-inset-right)) 0.5rem max(var(--pad), env(safe-area-inset-left));
        background: var(--surface);
        border-bottom: 1px solid var(--border);
      }
      .brand {
        font-family: "Source Serif 4", Georgia, serif;
        font-size: 1.125rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        text-decoration: none;
        color: var(--ink);
      }
      .nav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
      .nav a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 0.75rem;
        border-radius: 999px;
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        color: var(--muted);
      }
      .nav a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
      .icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--fab);
        height: var(--fab);
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 0.65rem;
        background: var(--elevated);
        color: var(--ink);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }
      .icon-btn:hover { background: var(--soft); }
      .icon-btn:active { transform: translateY(1px); }
      .icon-btn.is-playing { color: var(--accent); border-color: var(--accent); }
      html.dark #theme-icon-dark { display: none; }
      html:not(.dark) #theme-icon-light { display: none; }
      .nav .call {
        color: var(--accent);
        background: color-mix(in srgb, var(--accent) 12%, transparent);
      }
      .wrap {
        max-width: 72rem;
        margin: 0 auto;
        padding: 4.5rem var(--pad);
      }
      .hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.15rem;
        max-width: 72rem;
        margin: 0 auto;
        padding: 1rem var(--pad) calc(var(--dock-h) + 1.75rem);
      }
      .portrait {
        width: 6.25rem;
        height: 7.75rem;
        margin: 0;
        border-radius: var(--radius);
        overflow: hidden;
        background: #ddd6cb;
      }
      .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 12%; display: block; }
      h1, h2, h3 { font-family: "Source Serif 4", Georgia, serif; letter-spacing: -0.025em; }
      h1 {
        margin: 0;
        font-size: clamp(1.85rem, 5vw + 0.6rem, 3.15rem);
        font-weight: 600;
        line-height: 1.12;
        max-width: 18ch;
        text-wrap: balance;
      }
      h1 em { font-style: normal; color: var(--accent-soft); font-weight: 700; }
      h2 {
        margin: 0;
        font-size: clamp(1.6rem, 3vw, 2.15rem);
        font-weight: 600;
        max-width: 22ch;
        text-wrap: balance;
      }
      h3 { margin: 0; font-size: 1.125rem; font-weight: 600; text-wrap: pretty; }
      .lead, .muted { color: var(--muted); line-height: 1.6; }
      .lead { margin: 0.75rem 0 0; max-width: 38rem; font-size: 1.0625rem; text-wrap: pretty; }
      .proof { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; max-width: 36rem; }
      .proof li { display: flex; gap: 0.65rem; font-size: 0.9375rem; line-height: 1.45; color: var(--muted); }
      .proof li::before {
        content: "";
        width: 0.45rem; height: 0.45rem; margin-top: 0.45rem;
        border-radius: 50%; background: var(--accent); flex-shrink: 0;
      }
      .actions { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.15rem; }
      .btn {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 3rem; padding: 0 1.35rem; border-radius: 999px;
        font-size: 1rem; font-weight: 600; text-decoration: none;
        touch-action: manipulation; -webkit-tap-highlight-color: transparent;
        border: 1px solid transparent;
      }
      .btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
      .btn-primary:hover { background: var(--accent-hover); color: var(--btn-ink); }
      .btn-primary:active { transform: translateY(1px); }
      .btn-ghost {
        color: var(--ink); background: transparent; text-decoration: underline;
        text-underline-offset: 4px; font-weight: 500; min-height: 2.75rem;
      }
      .btn-ghost:hover { color: var(--accent); }
      .more-link { display: inline-block; margin-top: 1.5rem; font-weight: 600; }
      .block .more-link { margin-top: 0.85rem; }
      .note .more-link { margin-top: 0.85rem; }
      .band { border-top: 1px solid var(--border); }
      .band-soft { background: var(--soft); }
      .stack { display: grid; gap: 1.75rem; margin-top: 1.75rem; }
      .row {
        display: grid;
        gap: 0.4rem 2rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid var(--border);
      }
      .row:last-child { border-bottom: 0; padding-bottom: 0; }
      .row p { margin: 0; color: var(--muted); max-width: 42rem; }
      .grid-3, .grid-2 { display: grid; gap: 1.25rem 1.75rem; margin-top: 1.75rem; }
      .block p { margin: 0.5rem 0 0; color: var(--muted); }
      #market-now .lead time { font-variant-numeric: tabular-nums; }
      #market-now .grid-3 + .more-link { margin-top: 1.5rem; }
      .compare-cards {
        display: grid;
        gap: 1rem;
        margin-top: 1.75rem;
      }
      .compare-card {
        padding: 1.25rem 1.25rem 1.15rem;
        background: var(--elevated);
        border: 1px solid var(--border);
        border-radius: var(--radius);
      }
      .compare-card h3 {
        margin: 0 0 1rem;
        font-size: 1.125rem;
      }
      .compare-card h3 a {
        color: var(--ink);
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .compare-card h3 a:hover { color: var(--accent); }
      .compare-card dl {
        margin: 0;
        display: grid;
        gap: 0.75rem;
      }
      .compare-card dl > div {
        display: grid;
        gap: 0.2rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
      }
      .compare-card dl > div:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }
      .compare-card dt {
        margin: 0;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--ink);
      }
      .compare-card dd {
        margin: 0;
        color: var(--muted);
        font-size: 0.9375rem;
        line-height: 1.45;
      }
      .compare-scroll {
        display: none;
        margin-top: 1.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--elevated);
      }
      .compare-scroll:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      .compare-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9375rem;
        line-height: 1.45;
      }
      .compare-caption {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .compare-table th,
      .compare-table td {
        padding: 0.85rem 1rem;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid var(--border);
      }
      .compare-table thead th {
        font-weight: 600;
        background: var(--soft);
      }
      .compare-table thead th a {
        color: var(--ink);
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .compare-table thead th a:hover { color: var(--accent); }
      .compare-table tbody th[scope="row"] {
        font-weight: 600;
        color: var(--ink);
        background: var(--elevated);
        min-width: 7.5rem;
      }
      .compare-table td { color: var(--muted); }
      .compare-table tbody tr:last-child th,
      .compare-table tbody tr:last-child td { border-bottom: 0; }
      .compare-note {
        margin: 1.25rem 0 0;
        max-width: 46rem;
        color: var(--muted);
        font-size: 0.9375rem;
        line-height: 1.5;
      }
      .compare-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem 1.5rem;
        margin-top: 1.25rem;
      }
      .compare-actions .more-link { margin-top: 0; }
      .compare-actions .btn {
        width: 100%;
        max-width: 24rem;
      }
      .podbor-steps {
        margin-top: 1.5rem;
        max-width: 40rem;
      }
      .podbor-actions {
        margin-top: 1.5rem;
      }
      .podbor-actions .btn-primary {
        width: 100%;
        max-width: 24rem;
      }
      @media (min-width: 40rem) {
        .podbor-actions {
          flex-direction: row;
          align-items: center;
        }
        .podbor-actions .btn-primary { width: auto; }
      }
      @media (min-width: 48rem), (orientation: landscape) {
        .compare-cards { display: none; }
        .compare-scroll { display: block; }
        .compare-actions .btn { width: auto; }
      }
      /* На узком landscape таблица может чуть не влезть — скролл вбок у .compare-scroll */
      @media (orientation: landscape) and (max-width: 47.98rem) {
        .compare-table { min-width: 36rem; }
      }
      .note {
        margin-top: 1.75rem;
        padding: 1.25rem 1.35rem;
        background: var(--note);
        border-radius: var(--radius);
        max-width: 46rem;
      }
      .note p { margin: 0; color: var(--ink); line-height: 1.5; }
      .steps { margin: 0.85rem 0 0; padding-left: 1.2rem; color: var(--muted); }
      .steps li { margin: 0.4rem 0; }
      .split { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; }
      .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.85rem 0 0; }
      .chips a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
        padding: 0 0.85rem;
        border-radius: 999px;
        background: var(--elevated);
        font-size: 0.9375rem;
        font-weight: 500;
        text-decoration: none;
        color: var(--ink);
      }
      .chips a:hover { background: var(--note); color: var(--accent); }
      .more-districts { margin-top: 1.25rem; }
      .more-districts summary {
        cursor: pointer;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
        font-weight: 600;
        color: var(--accent);
      }
      .cards { display: grid; gap: 1.25rem; margin-top: 2rem; }
      .card {
        display: flex; flex-direction: column;
        background: var(--elevated);
        border-radius: var(--radius);
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        box-shadow: 0 12px 28px -16px rgba(28, 25, 23, 0.38);
      }
      .card:hover { transform: translateY(-3px); color: inherit; }
      .card img { width: 100%; height: 11rem; object-fit: cover; display: block; }
      .card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
      .card-meta { margin: 0; font-size: 0.8125rem; color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
      .card h3 { margin-top: 0.4rem; }
      .card p { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.9375rem; flex: 1; }
      .card span { margin-top: 0.85rem; color: var(--accent); font-weight: 600; font-size: 0.9375rem; }
      .faq { margin-top: 1.75rem; }
      .faq details { border-bottom: 1px solid var(--border); }
      .faq summary {
        cursor: pointer; min-height: 3.25rem; display: flex; align-items: center;
        font-weight: 600; color: var(--ink); text-wrap: pretty;
      }
      .faq summary:hover { color: var(--accent); }
      .faq .ans { padding: 0 0 1.15rem; color: var(--muted); max-width: 46rem; }
      .faq .ans p { margin: 0 0 0.6rem; }
      .contact-chips {
        display: flex; flex-wrap: wrap; gap: 0.5rem;
        margin: 1.5rem 0 0; padding: 0; list-style: none;
      }
      .contact-chips a {
        display: inline-flex; align-items: center;
        min-height: 2.75rem; padding: 0 1rem;
        border-radius: 999px; background: var(--elevated);
        text-decoration: none; color: var(--ink); font-weight: 500;
      }
      .contact-chips a:hover { background: var(--note); color: var(--accent); }
      .reviews-panel {
        margin-top: 1.75rem;
        padding: 1.35rem 1.4rem;
        background: var(--elevated);
        border-radius: var(--radius);
        max-width: 40rem;
      }
      .reviews-panel p { margin: 0; color: var(--muted); }
      footer { border-top: 1px solid var(--border); padding: 2.5rem var(--pad) 6.5rem; }
      footer .inner { max-width: 72rem; margin: 0 auto; }
      footer p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9375rem; }
      footer .fineprint { margin-top: 1rem; font-size: 0.8125rem; }
      .group-label { margin: 1.5rem 0 0; }
      .more-districts .group-label:first-of-type { margin-top: 1rem; }
      .dock {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        padding: 0.75rem var(--pad) max(0.75rem, env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -10px 24px -18px rgba(28, 25, 23, 0.35);
      }
      .dock .btn { width: 100%; }
      .tools-fab {
        position: fixed;
        z-index: 31;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .tools-fab--left {
        left: var(--pad);
        bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
      }
      .tools-fab--right {
        right: var(--pad);
        bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
      }
      @media (min-width: 40rem) {
        .hero { grid-template-columns: minmax(0, 1fr) 13rem; align-items: start; gap: 2rem; padding-bottom: 3.5rem; }
        .portrait { width: 13rem; height: 16.5rem; order: 2; }
        .copy { order: 1; }
        .nav .short { display: none; }
        .grid-2 { grid-template-columns: 1fr 1fr; }
        .cards { grid-template-columns: 1fr 1fr; }
        .actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
      }
      @media (max-width: 39.99rem) {
        .nav .full { display: none; }
        .nav .mid { display: none; }
      }
      @media (min-width: 64rem) {
        .hero { grid-template-columns: minmax(0, 1fr) 22rem; min-height: calc(100vh - 7rem); align-items: center; padding-bottom: 3rem; }
        .portrait { width: 22rem; height: 28rem; }
        .dock { display: none; }
        footer { padding-bottom: 2.5rem; }
        .tools-fab--left,
        .tools-fab--right { bottom: var(--pad); }
        .actions { flex-direction: row; align-items: center; }
        .cards { grid-template-columns: 1fr 1fr 1fr; }
        .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
        .row { grid-template-columns: 14rem 1fr; }
      }
      @media (max-width: 63.99rem) {
        #contacts .btn-primary {
          background: transparent;
          color: var(--accent);
          border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
        }
        #contacts .btn-primary:hover {
          background: color-mix(in srgb, var(--accent) 12%, transparent);
          color: var(--accent-hover);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .card:hover, .icon-btn:active, .btn-primary:active { transform: none; }
        .hero .copy, .hero .portrait { animation: none; }
      }
      @media (prefers-reduced-motion: no-preference) {
        .hero .copy { animation: rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
        .hero .portrait { animation: rise 0.85s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both; }
        @keyframes rise {
          from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
          to { opacity: 1; transform: none; filter: none; }
        }
      }

/* Live site: same tokens as demo, so Tailwind leftovers match */
:root {
  --color-surface: var(--surface);
  --color-surface-elevated: var(--elevated);
  --color-ink: var(--ink);
  --color-ink-muted: var(--muted);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-border: var(--border);
}
html.br-embed .demo-banner { display: none; }
.hero-section.hero { background: transparent; min-height: 0; }
.hero-section .copy,
.hero-section .portrait { position: relative; z-index: 2; }
.btn-glass-primary { background: var(--btn-bg); color: var(--btn-ink); border-radius: 999px; min-height: 3rem; }
.btn-glass, .btn-glass-icon, .br-scroll-fab, #br-music-toggle, #br-scroll-top {
  width: var(--fab);
  height: var(--fab);
  min-height: var(--fab);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--elevated);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
}
.btn-glass { width: auto; height: auto; min-height: 3rem; padding: 0 1.35rem; border-radius: 999px; }
#sticky-cta { z-index: 30; }

.hero {
  position: relative;
}

.hero-portrait-bleed.portrait {
  width: 6.25rem;
  height: 7.75rem;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #ddd6cb;
  order: -1;
}

.hero-portrait-bleed.portrait img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 12%;
  mask-image: none;
  -webkit-mask-image: none;
}

@media (min-width: 40rem) {
  .hero-portrait-bleed.portrait {
    width: 13rem;
    height: 16.5rem;
    order: 2;
  }
}

@media (min-width: 64rem) {
  .hero-portrait-bleed.portrait {
    width: 22rem;
    height: 28rem;
  }
}