:root {
    /* Base palette — ATAMURA Brandbook 2024 */
    --bg:        #F7F5EE;                  /* warm off-white, brandbook-tinted */
    --card:      #FBFBFB;                  /* brandbook white */
    --ink:       #1E1E1E;                  /* brandbook black (NOT pure black) */
    --ink-soft:  #4A4A4A;
    --ink-mute:  #888888;
    --line:      #E0DDD3;
    --line-soft: #ECEAE2;
    --black:     #1E1E1E;
    --grey:      #BCBCBC;                  /* brandbook grey */
    --green:     oklch(62% 0.16 145);
    --tg:        oklch(62% 0.13 230);

    /* Spacing */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --s-9: 80px;

    /* Radii */
    --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
    --r-pill: 999px;

    /* Type */
    --t-display: clamp(72px, 8.5vw, 132px);
    --t-h1: clamp(36px, 3.6vw, 56px);
    --t-h2: clamp(28px, 2.6vw, 40px);
    --t-h3: clamp(20px, 1.6vw, 26px);
    --t-body: 15px;

    --container: 1320px;
    --shadow-card: 0 1px 2px oklch(0% 0 0 / 0.04);
    --shadow-pop: 0 16px 40px oklch(0% 0 0 / 0.12), 0 4px 12px oklch(0% 0 0 / 0.04);
  }

  /* ============ THEME A: Бирюза + Золото (Brandbook combination 2: teal-led) ============ */
  [data-theme="teal"] {
    --brand:        #007484;               /* brandbook dark teal */
    --brand-deep:   #005763;
    --brand-soft:   #E0EEF0;
    --brand-on:     #FBFBFB;
    --accent:       #CFB372;               /* brandbook gold */
    --accent-soft:  #EFE6CD;
    --accent-deep:  #A88E48;
    --accent-on:    #1E1E1E;
    --cta-orange:   #D86700;               /* brandbook contrast orange (paired with teal) */
    --dark-cta:     #284157;               /* brandbook dark navy */
    --pop-eyebrow-bg: var(--accent-soft);
    --pop-eyebrow-fg: var(--accent-on);
    --ai-grad-1:    #007484;
    --ai-grad-2:    #CFB372;
  }

  /* ============ THEME B: Навы + Золото (Brandbook combination 3: navy-led) ============ */
  [data-theme="blue"] {
    --brand:        #284157;               /* brandbook dark navy */
    --brand-deep:   #1A2B3A;
    --brand-soft:   #E5EAF0;
    --brand-on:     #FBFBFB;
    --accent:       #CFB372;               /* brandbook gold (constant accent) */
    --accent-soft:  #EFE6CD;
    --accent-deep:  #A88E48;
    --accent-on:    #1E1E1E;
    --cta-orange:   #866638;               /* brandbook brown-gold paired with navy */
    --dark-cta:     #1A2B3A;
    --pop-eyebrow-bg: var(--accent-soft);
    --pop-eyebrow-fg: var(--accent-on);
    --ai-grad-1:    #284157;
    --ai-grad-2:    #CFB372;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; padding-bottom: 80px;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Jost', 'Futura PT', 'Futura', -apple-system, system-ui, sans-serif;
    font-size: var(--t-body); line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss03", "cv11";
    transition: background 200ms;
  }
  img { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }

  .wrap { max-width: var(--container); margin: 0 auto; padding-inline: clamp(16px, 2vw, 32px); }

  /* ============ THEME SWITCHER (hidden — final theme = teal) ============ */
  .theme-switcher {
    display: none !important;
    position: fixed; top: 12px; right: 12px;
    z-index: 200;
    background: var(--ink); color: oklch(98% 0 0);
    padding: 4px;
    border-radius: var(--r-pill);
    display: flex; gap: 2px;
    box-shadow: var(--shadow-pop);
    font-size: 12px; font-weight: 600;
  }
  .theme-switcher::before {
    content: 'Тема:';
    padding: 8px 4px 8px 12px;
    color: oklch(70% 0.005 230);
    align-self: center;
    font-weight: 500;
  }
  .theme-btn {
    background: transparent; border: 0;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    color: oklch(75% 0.005 230);
    display: inline-flex; align-items: center; gap: 6px;
    transition: 180ms;
  }
  .theme-btn::before {
    content: ''; width: 10px; height: 10px;
    border-radius: 50%;
  }
  .theme-btn[data-theme="teal"]::before { background: #007484; }
  .theme-btn[data-theme="blue"]::before { background: #284157; }
  .theme-btn.is-on {
    background: oklch(98% 0 0); color: var(--ink);
  }

  /* ============ TOP UTILITY STRIP ============ */
  .util { background: var(--bg); border-bottom: 1px solid var(--line); }
  .util-row {
    max-width: var(--container); margin: 0 auto;
    padding: 14px clamp(16px, 2vw, 32px);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-5); font-size: 13px; font-weight: 600;
  }
  .util-tabs { display: flex; gap: var(--s-6); }
  .util-tabs a { color: var(--ink); padding-block: 4px; position: relative; }
  .util-tabs a.is-on::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -14px;
    height: 2px; background: var(--ink);
  }
  .util-tabs a:not(.is-on) { color: var(--ink-mute); }
  .city {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink); font-weight: 600;
  }
  .city svg { color: var(--accent-deep); }

  /* ============ HEADER ============ */
  .head {
    background: var(--bg);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(12px);
  }
  .head-row {
    max-width: var(--container); margin: 0 auto;
    padding: 18px clamp(16px, 2vw, 32px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-6); align-items: center;
  }

  /* ============ ATAMURA LOGO (approved — 4 dots + Atamura Group wordmark) ============ */
  .logo {
    display: inline-flex; align-items: center; gap: 12px;
    color: var(--ink);
  }
  .logo-mark {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 32px; height: 32px;
    align-content: center;
    flex-shrink: 0;
  }
  .logo-mark span {
    display: block;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--brand);
    transition: background 200ms;
  }
  /* brandbook: 4 equal dots; on dark surfaces invert to gold */
  [data-theme="blue"] .logo-mark span,
  [data-theme="teal"] .logo-mark span { background: var(--brand); }
  .logo-text {
    display: flex; flex-direction: column;
    line-height: 1;
  }
  .logo-name {
    font-size: 18px; font-weight: 700;
    letter-spacing: -0.005em;
  }
  .logo-sub {
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--ink-mute);
    text-transform: uppercase;
    margin-top: 5px;
  }
  /* small variant for footer */
  .logo.is-sm .logo-mark { width: 24px; height: 24px; gap: 3px; }
  .logo.is-sm .logo-mark span { width: 9px; height: 9px; }
  .logo.is-sm .logo-name { font-size: 16px; }
  .logo.is-sm .logo-sub { font-size: 8px; margin-top: 4px; }

  /* nav */
  .nav-main { display: flex; gap: var(--s-5); align-items: center; font-size: 14px; font-weight: 500; }
  .nav-main a { color: var(--ink); padding-block: var(--s-2); transition: color 120ms; }
  .nav-main a:hover { color: var(--brand-deep); }
  .nav-main .nav-consult {
    color: var(--brand-deep); font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .nav-main .nav-consult::before {
    content: ''; display: inline-block; width: 14px; height: 12px;
    background: currentColor; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'><path fill='black' d='M2 0a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2v2l3-2h5a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/></svg>") center/contain no-repeat;
  }
  .head-utils { display: flex; align-items: center; gap: var(--s-4); }
  .lang-switch { font-size: 14px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; background: transparent; border: 0; }
  .phone-block { text-align: right; line-height: 1.2; }
  .phone-block strong { font-size: 16px; font-weight: 700; }
  .phone-block small { font-size: 11px; color: var(--ink-mute); display: block; margin-top: 2px; }
  .icon-btn {
    width: 44px; height: 44px;
    background: transparent; border: 0; border-radius: 50%;
    display: grid; place-items: center;
    transition: 120ms;
  }
  .icon-btn:hover { background: oklch(92% 0.005 230); }
  .login-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: transparent;
    font-size: 14px; font-weight: 600;
    transition: 120ms;
  }
  .login-btn:hover { border-color: var(--ink); }

  /* ============ HERO ============ */
  .hero { padding-top: var(--s-5); padding-bottom: var(--s-9); }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--s-3);
    height: clamp(480px, 60vw, 700px);
  }
  .hero-block {
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    background: var(--card);
  }
  .hero-block.is-main { grid-column: 1; grid-row: 1 / span 2; }

  .promo {
    height: 100%;
    position: relative;
    background:
      linear-gradient(155deg,
        color-mix(in oklch, var(--brand-deep) 65%, transparent) 0%,
        color-mix(in oklch, var(--accent-deep) 50%, transparent) 100%),
      url('https://images.unsplash.com/photo-1493809842364-78817add7ffb?auto=format&fit=crop&w=1600&q=80');
    background-size: cover; background-position: center;
    color: oklch(98% 0 0);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--s-7);
    transition: background 280ms;
  }
  .promo-eyebrow { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
  .promo-numbers {
    font-size: var(--t-display); font-weight: 700;
    line-height: 0.92; letter-spacing: -0.05em;
    margin: var(--s-5) 0;
    display: flex; align-items: baseline; gap: 4px;
  }
  .promo-numbers .pct { font-size: 0.42em; font-weight: 600; vertical-align: top; align-self: flex-start; margin-top: 0.3em; }
  .promo-numbers .plus { margin: 0 8px; opacity: 0.85; }
  .promo-bottom { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
  .promo-counter { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); font-size: 13px; opacity: 0.9; }
  .promo-counter span { background: oklch(20% 0 0 / 0.35); padding: 6px 12px; border-radius: var(--r-pill); font-weight: 600; backdrop-filter: blur(6px); }
  .promo-arrows { display: flex; gap: 4px; }
  .promo-arrows button {
    width: 36px; height: 36px;
    border-radius: 50%; border: 0;
    background: oklch(20% 0 0 / 0.35);
    color: oklch(98% 0 0);
    display: grid; place-items: center;
    backdrop-filter: blur(6px);
  }

  .teaser {
    height: 100%;
    overflow: hidden;
    position: relative;
    color: oklch(98% 0 0);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--s-5);
  }
  .teaser-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    transition: transform 600ms cubic-bezier(.2,.9,.25,1);
  }
  .teaser:hover .teaser-bg { transform: scale(1.04); }
  .teaser::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, oklch(0% 0 0 / 0.05) 30%, oklch(0% 0 0 / 0.55) 100%);
    z-index: 1;
  }
  .teaser > * { position: relative; z-index: 2; }
  .teaser-title { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; margin: 0; max-width: 14ch; }
  .teaser-foot { display: flex; align-items: end; justify-content: space-between; gap: var(--s-3); }
  .teaser-meta { font-size: 13px; line-height: 1.3; opacity: 0.95; max-width: 18ch; }
  .teaser-arrow { width: 38px; height: 38px; border-radius: 50%; background: oklch(98% 0 0); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; transition: 200ms; }
  .teaser:hover .teaser-arrow { background: var(--brand); color: oklch(98% 0 0); }

  .teaser.is-1 .teaser-bg { background-image: url('https://images.unsplash.com/photo-1518806118471-f28b20a1d79d?auto=format&fit=crop&w=1200&q=80'); }
  .teaser.is-2 .teaser-bg { background-image: url('https://images.unsplash.com/photo-1531835551805-16d864c8d311?auto=format&fit=crop&w=1200&q=80'); }
  .teaser.is-3 .teaser-bg { background-image: url('https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=1200&q=80'); }
  .teaser.is-4 .teaser-bg { background-image: url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1200&q=80'); }

  /* ============ BUTTONS ============ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 24px; min-height: 48px;
    font-family: inherit; font-size: 14px; font-weight: 600;
    border-radius: var(--r-pill); border: 1px solid transparent;
    transition: 180ms cubic-bezier(.2, .9, .25, 1);
    white-space: nowrap;
  }
  .btn-light { background: oklch(98% 0 0); color: var(--ink); }
  .btn-light:hover { background: var(--ink); color: oklch(98% 0 0); }
  .btn-dark { background: var(--ink); color: oklch(98% 0 0); }
  .btn-dark:hover { background: var(--brand-deep); }
  .btn-brand { background: var(--brand); color: var(--brand-on); }
  .btn-brand:hover { background: var(--brand-deep); }
  .btn-accent { background: var(--accent); color: var(--accent-on); }
  .btn-accent:hover { background: var(--accent-deep); color: oklch(98% 0 0); }
  .btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
  .btn-outline:hover { border-color: var(--ink); }

  /* ============ SECTION TITLES ============ */
  .sect-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); margin-bottom: var(--s-6); flex-wrap: wrap; }
  .sect-title { font-size: var(--t-h1); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .sect-title-mute { color: oklch(74% 0.005 230); font-weight: 500; }
  .sect-title-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 0.66em; font-weight: 500; color: var(--ink); border-bottom: 1px dashed var(--ink-mute); padding-bottom: 2px; }

  .toggle { width: 48px; height: 28px; background: var(--ink); border: 0; border-radius: var(--r-pill); position: relative; padding: 0; cursor: pointer; flex-shrink: 0; }
  .toggle::after { content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: oklch(98% 0 0); transition: transform 200ms cubic-bezier(.2,.9,.25,1); }
  .toggle.is-right::after { transform: translateX(20px); }

  /* ============ PROJECTS ============ */
  .sect-projects { padding-block: var(--s-7) var(--s-9); }
  .sect-projects-row1 { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; justify-content: space-between; }
  .filters-row { display: flex; gap: var(--s-2); flex-wrap: wrap; background: var(--card); padding: var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--line); }
  .filter-btn { padding: 10px 18px; min-height: 40px; background: transparent; border: 0; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: 120ms; }
  .filter-btn:hover { background: oklch(94% 0.005 230); }
  .filter-btn.is-on { background: var(--ink); color: oklch(98% 0 0); }
  .filter-btn.has-arrow::after { content: ''; width: 8px; height: 8px; border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); margin-left: 4px; }
  .actions-row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .ai-helper {
    background: oklch(96% 0.005 230);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    display: flex; flex-direction: column; gap: var(--s-4);
    position: relative;
    overflow: hidden;
  }
  .ai-helper::before {
    content: '';
    position: absolute; top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, var(--ai-grad-1) 0%, var(--ai-grad-2) 70%, transparent 100%);
    opacity: 0.22; filter: blur(20px);
    border-radius: 50%;
    transition: background 280ms;
  }
  .ai-helper > * { position: relative; }
  .ai-helper h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
  .ai-helper p { font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin: 0; }
  .ai-prompts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ai-prompt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; font-size: 12px; line-height: 1.35; cursor: pointer; transition: 120ms; text-align: left; color: var(--ink); }
  .ai-prompt:hover { border-color: var(--ink-mute); }
  .ai-input-wrap { display: flex; align-items: center; gap: var(--s-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 4px 4px 16px; margin-top: auto; }
  .ai-input { flex: 1; min-height: 40px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; }
  .ai-input::placeholder { color: var(--ink-mute); }
  .ai-send { width: 38px; height: 38px; background: var(--ink); color: oklch(98% 0 0); border: 0; border-radius: 50%; display: grid; place-items: center; }

  .pcard { background: var(--card); border-radius: var(--r-lg); overflow: hidden; border: 1px solid transparent; transition: 220ms; position: relative; display: flex; flex-direction: column; }
  .pcard:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: var(--shadow-card); }
  .pcard-photo { aspect-ratio: 4 / 3.2; position: relative; overflow: hidden; background: var(--brand-soft); }
  .pcard-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.9,.25,1); }
  .pcard:hover .pcard-photo img { transform: scale(1.04); }
  .pcard-badges { position: absolute; top: var(--s-3); left: var(--s-3); display: flex; flex-wrap: wrap; gap: 6px; }
  .badge { padding: 6px 10px; background: oklch(20% 0 0 / 0.85); color: oklch(98% 0 0); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; border-radius: var(--r-pill); backdrop-filter: blur(6px); display: inline-flex; align-items: center; gap: 5px; }
  .badge.is-light { background: oklch(98% 0 0 / 0.92); color: var(--ink); }
  .badge.is-accent { background: var(--accent); color: var(--accent-on); }
  .badge.is-soft { background: var(--accent-soft); color: var(--accent-on); }
  .badge.is-status::before {
    content: ''; width: 14px; height: 14px;
    background: currentColor;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='7' cy='7' r='6' fill='none' stroke='black' stroke-width='1.4'/><path d='M4 7l2 2 4-4' fill='none' stroke='black' stroke-width='1.4'/></svg>") center/contain no-repeat;
  }

  .pcard-body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; align-items: end; justify-content: space-between; gap: var(--s-3); }
  .pcard-info { min-width: 0; }
  .pcard-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
  .pcard-loc { font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
  .pcard-loc .dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: middle; }
  .pcard-loc .dot.is-coral::before { background: var(--accent-deep); }
  .pcard-loc .walk::before { content: ''; display: inline-block; width: 12px; height: 12px; background: currentColor; margin-right: 4px; vertical-align: middle; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='2' r='1.4' fill='black'/><path d='M6 4l-2 3 2 1v3M6 4l2 3' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'/></svg>") center/contain no-repeat; }
  .pcard-price { font-size: 13px; color: var(--ink-soft); text-align: right; flex-shrink: 0; }
  .pcard-price strong { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

  /* ============ "Поможем с выбором" CTA ============ */
  .help-cta {
    background: var(--dark-cta);
    color: oklch(98% 0 0);
    border-radius: var(--r-lg);
    padding: var(--s-7);
    margin-top: var(--s-7);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-6);
    align-items: end;
    transition: background 280ms;
  }
  .help-cta h3 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--s-3); }
  .help-cta p { font-size: 16px; color: oklch(80% 0.005 230); margin: 0; max-width: 50ch; }

  /* ============ PREMIUM 2-CARD ============ */
  .premium-row { padding-block: var(--s-7); }
  .premium-row h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.025em; margin: 0 0 var(--s-5); }
  .premium-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .premium-card { border-radius: var(--r-lg); overflow: hidden; position: relative; color: oklch(98% 0 0); padding: var(--s-6); display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; }
  .premium-card::before { content: ''; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
  .premium-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, oklch(0% 0 0 / 0.1) 0%, oklch(0% 0 0 / 0.55) 100%); }
  .premium-card > * { position: relative; z-index: 2; }
  .premium-card.is-prem::before { background-image: url('https://images.unsplash.com/photo-1493809842364-78817add7ffb?auto=format&fit=crop&w=1400&q=80'); }
  .premium-card.is-last::before { background-image: url('https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=1400&q=80'); }
  .premium-title { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
  .premium-arrow { align-self: end; width: 44px; height: 44px; border-radius: 50%; background: oklch(98% 0 0); color: var(--ink); display: grid; place-items: center; }

  /* ============ MORTGAGE ============ */
  .mortgage { padding-block: var(--s-9); }
  .mortgage-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
  .mortgage-info h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 var(--s-4); }
  .mortgage-info p { font-size: 16px; color: var(--ink-soft); max-width: 42ch; margin: 0 0 var(--s-5); }
  .mort-bullets { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
  .mort-bullet { font-size: 14px; color: var(--ink); display: flex; gap: var(--s-3); align-items: flex-start; }
  .mort-bullet svg { color: var(--brand); margin-top: 2px; flex-shrink: 0; }

  .mort-card { background: var(--card); border-radius: var(--r-lg); padding: var(--s-7); display: grid; gap: var(--s-5); box-shadow: var(--shadow-card); border: 1px solid var(--line); }
  .mort-card h3 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
  .mort-field { display: grid; gap: 10px; }
  .mort-field-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
  .mort-field-label strong { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .slider { width: 100%; height: 4px; background: var(--line); border-radius: 2px; appearance: none; accent-color: var(--brand); }
  .slider::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); cursor: pointer; border: 3px solid var(--card); box-shadow: 0 1px 4px oklch(0% 0 0 / 0.15); }
  .mort-result { background: var(--brand-soft); padding: var(--s-5); border-radius: var(--r-md); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); }
  .mort-result-label { font-size: 13px; color: var(--ink-soft); }
  .mort-result-value { font-size: 28px; font-weight: 700; color: var(--brand-deep); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
  .mort-result-value sub { font-size: 12px; font-weight: 500; color: var(--ink-mute); margin-left: 4px; }

  /* ============ REVIEWS ============ */
  .reviews { padding-block: var(--s-9); border-top: 1px solid var(--line); }
  .reviews-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); margin-bottom: var(--s-6); flex-wrap: wrap; }
  .reviews h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.025em; margin: 0; }
  .reviews-rating { display: inline-flex; align-items: center; gap: var(--s-3); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 18px; font-size: 14px; }
  .reviews-rating strong { font-size: 18px; font-weight: 700; }
  .stars { color: var(--accent-deep); letter-spacing: 1px; }

  .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .review { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
  .review-stars { color: var(--accent-deep); font-size: 13px; letter-spacing: 1.5px; }
  .review p { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0; }
  .review-author { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); margin-top: auto; }
  .review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--brand-deep); }
  .review-name { font-size: 13px; font-weight: 600; }
  .review-zk { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }

  /* ============ NEWS ============ */
  .news { padding-block: var(--s-9); }
  .news-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); margin-bottom: var(--s-6); }
  .news h2 { font-size: var(--t-h2); font-weight: 600; letter-spacing: -0.025em; margin: 0; }
  .news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
  .news-card { background: var(--card); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; transition: 180ms; }
  .news-card:hover { transform: translateY(-2px); }
  .news-photo { aspect-ratio: 4/3; background: var(--brand-soft); }
  .news-photo img { width: 100%; height: 100%; object-fit: cover; }
  .news-body { padding: var(--s-5); display: grid; gap: var(--s-2); }
  .news-date { font-size: 11px; font-weight: 600; color: var(--ink-mute); letter-spacing: 0.04em; text-transform: uppercase; }
  .news-title { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); margin: 0; }

  /* ============ FOOTER ============ */
  .foot { background: var(--bg); border-top: 1px solid var(--line); padding-block: var(--s-9); }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr; gap: var(--s-7); margin-bottom: var(--s-7); }
  .foot-phone { font-size: 13px; color: var(--ink-mute); }
  .foot-phone strong { display: block; font-size: 22px; font-weight: 700; color: var(--ink); margin: 8px 0 var(--s-4); letter-spacing: -0.01em; }
  .foot-hours { font-size: 13px; color: var(--ink-mute); margin: 0 0 var(--s-2); }
  .foot-hours strong { display: block; font-size: 15px; color: var(--ink); margin-top: 4px; }
  .foot-search { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 4px 4px 16px; max-width: 280px; }
  .foot-search input { flex: 1; min-height: 36px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; }
  .foot-search input::placeholder { color: var(--ink-mute); }
  .foot-search-btn { width: 32px; height: 32px; background: var(--ink); color: oklch(98% 0 0); border: 0; border-radius: 50%; display: grid; place-items: center; }
  .foot-col h4 { font-size: 14px; font-weight: 600; margin: 0 0 var(--s-4); color: var(--ink); }
  .foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
  .foot-col a { font-size: 13px; color: var(--ink-soft); transition: color 120ms; }
  .foot-col a:hover { color: var(--ink); }
  .foot-col .new { display: inline-block; padding: 2px 6px; margin-left: 6px; background: var(--accent); color: var(--accent-on); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; border-radius: 4px; vertical-align: middle; }

  .foot-bottom { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: center; padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-mute); }
  .foot-bottom-disclaimer { max-width: 60ch; line-height: 1.5; }

  /* ============ STICKY CTA ============ */
  .sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--ink); color: oklch(98% 0 0); z-index: 40; transform: translateY(100%); transition: transform 320ms cubic-bezier(.2,.9,.25,1); }
  .sticky-bar.is-on { transform: translateY(0); }
  .sticky-row { max-width: var(--container); margin: 0 auto; padding: var(--s-3) clamp(16px, 2vw, 32px); display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--s-4); align-items: center; }
  .sticky-counter { font-size: 12px; color: oklch(70% 0.005 230); display: inline-flex; align-items: center; gap: var(--s-2); }
  .sticky-counter::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
  .sticky-text { font-size: 14px; font-weight: 500; color: oklch(98% 0 0); }
  .sticky-text strong { color: var(--accent); font-weight: 600; }
  .sticky-bar .btn-light { padding: 10px 18px; min-height: 40px; font-size: 13px; }
  .sticky-close { background: transparent; border: 0; color: oklch(60% 0.005 230); padding: 6px; }

  /* ============ FLOATING BUBBLES ============ */
  .floater { position: fixed; right: clamp(16px, 2vw, 24px); bottom: 96px; z-index: 35; display: flex; flex-direction: column-reverse; gap: var(--s-3); }
  .float-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; box-shadow: 0 6px 20px oklch(0% 0 0 / 0.15); transition: 200ms cubic-bezier(.2,.9,.25,1); color: oklch(98% 0 0); position: relative; }
  .float-btn:hover { transform: scale(1.08); }
  .float-btn.is-tg { background: var(--tg); }
  .float-btn.is-ai { background: linear-gradient(135deg, var(--ai-grad-1), var(--ai-grad-2)); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; transition: background 280ms; }
  .float-btn.is-ai::before { content: ''; width: 14px; height: 14px; background: oklch(98% 0 0); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path fill='black' d='M7 0L8 4L12 5L8 6L7 10L6 6L2 5L6 4Z'/><circle cx='12' cy='2' r='1' fill='black'/><circle cx='2' cy='12' r='1.5' fill='black'/></svg>") center/contain no-repeat; margin-right: 2px; }

  /* ============ POPUPS ============ */
  .popup-overlay { position: fixed; inset: 0; z-index: 100; background: oklch(20% 0.02 230 / 0.6); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: var(--s-5); animation: fade 220ms; }
  .popup-overlay.is-on { display: flex; }
  @keyframes fade { from { opacity: 0; } }
  .popup { background: var(--card); border-radius: var(--r-lg); max-width: 460px; width: 100%; padding: var(--s-7); position: relative; box-shadow: var(--shadow-pop); animation: slide 320ms cubic-bezier(.2,.9,.25,1); }
  @keyframes slide { from { transform: translateY(20px); opacity: 0; } }
  .popup-close { position: absolute; top: var(--s-3); right: var(--s-3); background: oklch(96% 0.005 230); border: 0; border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); }
  .popup-eyebrow { display: inline-block; background: var(--pop-eyebrow-bg); color: var(--pop-eyebrow-fg); padding: 4px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
  .popup h3 { font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; margin: var(--s-4) 0; }
  .popup p { color: var(--ink-soft); margin: 0 0 var(--s-5); font-size: 14px; }
  .popup-form { display: grid; gap: var(--s-3); }
  .input-pill { width: 100%; padding: 14px 18px; min-height: 48px; background: oklch(96% 0.005 230); border: 1px solid transparent; border-radius: var(--r-pill); font: inherit; font-size: 14px; outline: none; color: var(--ink); transition: 180ms; }
  .input-pill:focus { border-color: var(--brand); background: var(--card); }
  .popup-fineprint { font-size: 11px; color: var(--ink-mute); margin-top: var(--s-2); }

  /* ============ MOBILE ============ */
  @media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; height: auto; }
    .hero-block.is-main { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 16/9; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .premium-grid { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
    .mortgage-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 760px) {
    .util-tabs { gap: var(--s-3); font-size: 12px; }
    .nav-main { display: none; }
    .head-utils .lang-switch, .head-utils .icon-btn { display: none; }
    .hero-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: var(--s-3); }
    .hero-block.is-main { grid-column: 1; aspect-ratio: 16/13; }
    .promo { padding: var(--s-5); }
    .promo-numbers { font-size: clamp(56px, 14vw, 88px); }
    .grid-3 { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: 1fr 1fr; }
    .reviews-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; }
    .foot-bottom { grid-template-columns: 1fr; }
    .sticky-row { grid-template-columns: 1fr auto; }
    .sticky-counter, .sticky-close { display: none; }
    .help-cta { grid-template-columns: 1fr; }
    .floater { bottom: 88px; }
    .float-btn { width: 52px; height: 52px; }
    .theme-switcher { top: auto; bottom: 90px; right: 12px; }
    .theme-switcher::before { display: none; }
    .theme-btn { padding: 6px 10px; font-size: 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: oklch(98% 0 0); padding: 12px 16px; z-index: 100; }
  .skip:focus { left: 0; }

/* Page hero (for sub-pages) */
.page-hero { padding: clamp(48px, 8vh, 96px) 0 var(--s-7); }
.page-eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--s-5); }
.page-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--brand); }
.page-title { font-size: clamp(40px, 5vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -0.025em; margin: 0 0 var(--s-5); color: var(--ink); }
.page-title em { font-style: normal; color: var(--brand); }
.page-lead { font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-soft); max-width: 56ch; line-height: 1.55; margin: 0 0 var(--s-7); }
.breadcrumbs { display: flex; gap: var(--s-2); align-items: center; font-size: 13px; color: var(--ink-mute); margin-bottom: var(--s-5); }
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs span { color: var(--ink-mute); }

/* Two-column section */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; margin-block: var(--s-9); }
.two-col-photo { aspect-ratio: 4/5; border-radius: var(--r-lg); overflow: hidden; background: var(--brand-soft); }
.two-col-photo img { width: 100%; height: 100%; object-fit: cover; }
.two-col h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--s-4); }
.two-col p { color: var(--ink-soft); font-size: 17px; line-height: 1.6; margin: 0 0 var(--s-4); }
.two-col h2 em { font-style: normal; color: var(--brand); }

/* 4-dot pattern decoration */
.dot-pattern { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dot-pattern span { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); }
.dot-pattern span:nth-child(2) { background: var(--accent); }

/* Big stat block */
.bigstat { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: baseline; padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.bigstat-num { font-size: clamp(40px, 5vw, 80px); font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.04em; }
.bigstat-label { font-size: 16px; color: var(--ink-soft); line-height: 1.4; }
.bigstat-label strong { color: var(--ink); display: block; font-size: 18px; font-weight: 600; margin-bottom: 4px; }

/* Plan/feature list */
.feat-list { display: grid; gap: var(--s-3); margin: var(--s-5) 0; }
.feat-item { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink); }
.feat-item::before { content: ''; flex-shrink: 0; width: 20px; height: 20px; background: var(--brand); border-radius: 50%; margin-top: 2px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/></svg>") center/14px no-repeat; background: var(--brand); }

/* Mobile two-col */
@media (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ============ MOBILE BURGER MENU ============ */
.burger {
  display: none;
  min-width: 88px; height: 44px;
  background: var(--brand); border: 0; border-radius: var(--r-pill);
  align-items: center; justify-content: center;
  gap: 8px; padding: 0 16px;
  cursor: pointer;
  color: var(--brand-on);
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.burger:active { transform: scale(0.97); }
.burger .burger-icon {
  display: inline-flex; flex-direction: column; gap: 4px;
  width: 16px;
}
.burger .burger-icon span {
  display: block; width: 16px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: 200ms;
}
.burger.is-on .burger-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-on .burger-icon span:nth-child(2) { opacity: 0; }
.burger.is-on .burger-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: inline-flex; }
  .head-row { grid-template-columns: auto 1fr auto !important; }
  .login-btn { display: none; }
  .head-utils .icon-btn { display: none; }
  .head-utils .lang-switch { display: none; }
  .phone-block { display: none; }
}

.drawer-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: oklch(20% 0.02 230 / 0.5);
  backdrop-filter: blur(8px);
  display: none; opacity: 0; transition: opacity 250ms;
}
.drawer-overlay.is-on { display: block; opacity: 1; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(360px, 90vw);
  background: var(--bg); z-index: 96;
  transform: translateX(100%); transition: transform 320ms cubic-bezier(.2,.9,.25,1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: var(--s-5) var(--s-6) var(--s-7);
  gap: var(--s-5);
}
.drawer-overlay.is-on .drawer { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.drawer-close {
  background: transparent; border: 0; width: 40px; height: 40px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--ink);
}
.drawer-close:hover { background: var(--card); }
.drawer-nav { display: flex; flex-direction: column; gap: var(--s-2); padding-block: var(--s-3); }
.drawer-nav a {
  font-size: 18px; font-weight: 600; padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink); display: flex; justify-content: space-between; align-items: center;
}
.drawer-nav a::after { content: '→'; color: var(--ink-mute); transition: 200ms; }
.drawer-nav a:hover { color: var(--brand); }
.drawer-nav a:hover::after { transform: translateX(3px); color: var(--brand); }
.drawer-nav a.is-current { color: var(--brand); }
.drawer-section { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.drawer-section h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--s-3); }
.drawer-phone { font-size: 22px; font-weight: 700; color: var(--ink); display: block; margin-bottom: 4px; }
.drawer-phone-sub { font-size: 13px; color: var(--ink-soft); }
.drawer-actions { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.drawer-actions .btn { width: 100%; min-height: 48px; }

/* lock body scroll when drawer open */
body.drawer-open { overflow: hidden; }