/* =========================================================================
   Ипотечка — Недвижимость и инвестиции в Дубае
   СВЕТЛЫЙ ЛЮКС: тёплый айвори, приглушённое золото, графит, воздух,
   чистый гротеск (Manrope), крупная фотография, тонкие линии.
   ========================================================================= */

:root{
  /* ПАЛИТРА «ДОВЕРИЕ + ПРЕМИУМ»: глубокий navy (финансы/надёжность) +
     чистый порцелан + благородное золото акцентом + трастовый зелёный.
     Старая «тёплый айвори/золото/графит» — в комментариях справа, для отката. */

  /* Светлая база — чистый порцелан (было #F7F4EF / #F0EBE2 / #EAE3D6) */
  --bg:            #F4F6F8;
  --bg-2:          #FFFFFF;
  --bg-3:          #EAEEF2;
  --sand:          #E1E7ED;

  /* Основа — глубокий navy (было графит #1A1A1A) */
  --ink:           #15273E;   /* navy-текст, тёмные блоки, футер, CTA */
  --ink-2:         #0F1D30;
  --ink-soft:      #45566C;
  --muted:         #7B8798;
  --muted-2:       #A2ABB8;

  /* РЕБРЕНДИНГ 2026-07-16: акцент теперь СИНИЙ. Имена токенов исторически
     «gold» (на них завязаны десятки мест по всем страницам) — значения синие. */
  --gold:          #1456F0;
  --gold-2:        #4D82F8;
  --gold-deep:     #0D3FCC;
  --gold-tint:     #EDF3FE;

  /* Линии / тени — прохладный navy-подтон */
  --line:          rgba(21,39,62,.11);
  --line-soft:     rgba(21,39,62,.06);
  --goldline:      rgba(20,86,240,.30);
  --shadow:        0 30px 70px -34px rgba(15,29,48,.32);
  --shadow-sm:     0 12px 34px -18px rgba(15,29,48,.22);

  --green:         #1F8B5C;   /* трастовый зелёный (доходность/плюс) */
  --radius:        20px;
  --radius-sm:     14px;
  --maxw:          1280px;  /* единая сетка: контейнер 1280, 12 колонок, gutter 24 (поля 80 на 1440) */
  --ease:          cubic-bezier(.22,.61,.36,1);
  --font: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ТИПОГРАФИЧЕСКАЯ ШКАЛА (п.3 разбора дизайнера: база была ~13.5px, норма 17-18).
     4 текстовые ступени + заголовки clamp + акцент-цифры. Менять размеры ТУТ,
     не точечно. На мобиле (@640) и сжатой высоте (mq840) база переопределяется. */
  --fs-cap:  12px;   /* микро-метки, uppercase-подписи */
  --fs-sm:   14px;   /* мелкая подпись, hints, чипы, мета */
  --fs-body: 17px;   /* основной текст */
  --fs-h3:   20px;   /* заголовки карточек h3/h4 */
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }
input,select,textarea{ font-family:inherit; font-size:var(--fs-body) }

/* мягкий холодный тон фона */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(50% 40% at 85% 0%, rgba(20,86,240,.05), transparent 60%),
    radial-gradient(48% 38% at 5% 8%, rgba(21,39,62,.05), transparent 60%);
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px }
section{ position:relative; padding:104px 0 }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:var(--fs-sm); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin-bottom:24px;
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold); }

h1,h2,h3{ font-weight:800; line-height:1.08; letter-spacing:-.022em }
.h-section{ font-size:clamp(30px,4.3vw,50px); margin-bottom:16px; color:var(--ink) }
.accent{ color:var(--gold-deep) }
.sub{ color:var(--ink-soft); font-size:clamp(17px,1.7vw,19px); max-width:640px; font-weight:500 }
.section-head{ margin-bottom:56px }
.section-head.center{ text-align:center; margin-inline:auto }
.section-head.center .sub{ margin-inline:auto }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 32px; border-radius:100px; font-weight:700; font-size:16px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-gold{ background:var(--gold); color:#fff; box-shadow:0 12px 30px -12px rgba(20,86,240,.45) }
.btn-gold:hover{ background:var(--gold-deep); transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(20,86,240,.45) }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line) }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px) }
.btn-dark{ background:var(--ink); color:#fff }
.btn-dark:hover{ background:#000; transform:translateY(-2px) }
.btn-lg{ padding:20px 40px; font-size:17px }  /* полушаг 4px: btn-lg должна быть заметно крупнее .btn */
.btn-block{ width:100% }

/* ---------- Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--bg-2); border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.header.scrolled{
  box-shadow:0 10px 30px -18px rgba(15,29,48,.22);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px }
.brand{ display:flex; align-items:center; gap:12px }
.brand-mark{
  width:40px; height:40px; border-radius:11px; flex:none;
  background:linear-gradient(135deg, var(--gold-2), var(--gold-deep));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:19px;
  box-shadow:0 8px 20px -8px rgba(20,86,240,.45);
}
.brand-mark svg{ width:56%; height:56%; display:block }
.brand-name{ font-size:20px; font-weight:800; letter-spacing:.005em; color:var(--ink) }
.brand-name b{ color:var(--gold-deep); font-weight:800 }
.brand-sub{ display:block; font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); font-weight:700; margin-top:2px }
.nav-links{ display:flex; align-items:center; gap:24px }
.nav-links a{ font-size:14.5px; color:var(--ink-soft); font-weight:600; transition:color .25s; position:relative; white-space:nowrap }
.nav-links a:hover{ color:var(--gold-deep) }
.nav-links a.active{ color:var(--ink) }
.nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--gold); border-radius:2px }
.nav-links a.nav-key{ color:var(--gold-deep); font-weight:700 }
.nav-links a.nav-key::before{ content:"✦ "; font-size:11px }
.nav-links a.nav-cab{ color:var(--muted); font-weight:600 }
.nav-links a.nav-cab::before{ content:""; display:inline-block; width:1px; height:14px; background:var(--line);
  margin-right:16px; vertical-align:middle }
.nav-cta{ display:flex; align-items:center; gap:16px }
.nav-phone{ font-size:14px; color:var(--ink-soft); font-weight:700 }
.burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line) }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); margin:3px auto; transition:.3s }

/* ---------- Hero ---------- */
.hero{ padding:104px 0 56px }
.hero-inner{
  position:relative; border-radius:28px; overflow:hidden; min-height:640px;
  display:grid; grid-template-columns:1.12fr .88fr; box-shadow:var(--shadow);
}
.hero-media{ position:absolute; inset:0; z-index:0 }
.hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,22,38,.80) 0%, rgba(11,22,38,.52) 42%, rgba(11,22,38,.20) 100%);
}
.hero-left{ position:relative; z-index:2; padding:64px 56px; display:flex; flex-direction:column; justify-content:center; color:#fff }
.hero-left .eyebrow{ color:var(--gold-2) }
.hero-left .eyebrow::before{ background:var(--gold-2) }
.hero h1{ font-size:clamp(34px,4.9vw,58px); margin-bottom:24px; color:#fff }
.hero h1 .accent{ color:var(--gold-2) }
.hero .lead{ font-size:clamp(17px,1.8vw,20px); color:rgba(255,255,255,.9); max-width:520px; margin-bottom:32px; font-weight:500 }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:40px }
.hero-actions .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4) }
.hero-actions .btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff }
.trust-row{ display:flex; flex-wrap:wrap; gap:8px }
.trust-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:100px;
  font-size:var(--fs-sm); color:#fff; font-weight:600; backdrop-filter:blur(6px);
}

/* Быстрый расчёт */
.quick-card{
  position:relative; z-index:2; margin:24px; align-self:center;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow-sm);
}
.quick-card h3{ font-size:20px; font-weight:800; margin-bottom:4px }
.quick-card .qc-sub{ font-size:var(--fs-sm); color:var(--muted); margin-bottom:24px }
.field{ margin-bottom:16px }
.field label{ display:block; font-size:var(--fs-sm); color:var(--ink-soft); font-weight:700; margin-bottom:8px }
.field input,.field select{
  width:100%; padding:12px 16px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; transition:border-color .25s, background .25s;
}
.field input::placeholder{ color:var(--muted-2) }
.field input:focus,.field select:focus{ outline:none; border-color:var(--gold); background:#fff }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C877E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-note{ font-size:var(--fs-cap); color:var(--muted); margin-top:12px; line-height:1.5 }

/* ---------- Метрики ---------- */
.stats{ padding:32px 0 8px }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:40px 0 }
.stat{ text-align:center }
.stat .num{ font-size:clamp(30px,3.4vw,42px); color:var(--gold-deep); line-height:1; font-weight:800; letter-spacing:-.02em }
.stat .lbl{ font-size:var(--fs-sm); color:var(--muted); margin-top:8px; font-weight:500 }

/* ---------- Отступ под фикс-меню на внутренних страницах ---------- */
.nav-spacer{ height:20px }

/* ---------- Плитки-разделы на главной ---------- */
.explore-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.explore-card{ display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s }
.explore-card:hover{ transform:translateY(-6px); border-color:var(--goldline); box-shadow:var(--shadow) }
.explore-card .ex-ico{ width:52px; height:52px; border-radius:14px; margin-bottom:24px; background:var(--gold-tint);
  border:1px solid var(--goldline); display:grid; place-items:center }
.explore-card .ex-ico svg{ width:24px; height:24px; color:var(--gold-deep) }
.explore-card h3{ font-size:var(--fs-h3); font-weight:800; margin-bottom:12px }
.explore-card p{ font-size:var(--fs-body); color:var(--ink-soft); flex:1; margin:0 }
.explore-card .ex-go{ margin-top:16px; font-size:var(--fs-body); font-weight:700; color:var(--gold-deep) }
.explore-card:hover .ex-go{ text-decoration:underline; text-underline-offset:3px }
.explore-card.ex-accent{ background:linear-gradient(135deg, var(--gold-tint), #fffdf8); border-color:var(--goldline) }

/* ---------- Карточки ---------- */
.grid{ display:grid; gap:24px }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
  box-shadow:var(--shadow-sm);
}
.card:hover{ transform:translateY(-6px); border-color:var(--goldline); box-shadow:var(--shadow) }
.card-ico{
  width:52px; height:52px; border-radius:14px; margin-bottom:24px;
  background:var(--gold-tint); border:1px solid var(--goldline); display:grid; place-items:center;
}
.card-ico svg{ width:24px; height:24px; color:var(--gold-deep) }
.card h3{ font-size:var(--fs-h3); font-weight:800; margin-bottom:12px }
.card p{ font-size:var(--fs-body); color:var(--ink-soft); font-weight:500 }

/* ---------- Ипотека (split) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
.split-media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); position:relative }
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.4 }
.mortgage-list{ list-style:none; margin:24px 0 32px }
.mortgage-list li{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line) }
.mortgage-list li:last-child{ border-bottom:none }
.mortgage-list .mi-num{ font-size:18px; font-weight:800; color:var(--gold-deep); flex:none; width:28px }
.mortgage-list b{ display:block; margin-bottom:3px; font-size:var(--fs-body) }
.mortgage-list span{ font-size:var(--fs-body); color:var(--muted); font-weight:500 }

/* ---------- Калькулятор ---------- */
.calc{
  background:var(--bg-2); border:1px solid var(--line); border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow); display:grid; grid-template-columns:1.05fr .95fr;
}
.calc-inputs{ padding:48px }
.calc-out{ padding:48px; background:var(--ink); color:#fff }   /* тёмная панель результата — контраст */
.slider-field{ margin-bottom:24px }
.slider-field .sf-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px }
.slider-field label{ font-size:var(--fs-body); color:var(--ink-soft); font-weight:700 }
.slider-field .sf-val{ font-size:var(--fs-body); color:var(--gold-deep); font-weight:800 }
input[type=range]{
  -webkit-appearance:none; width:100%; height:5px; border-radius:5px;
  background:linear-gradient(90deg, var(--gold) var(--fill,40%), var(--sand) var(--fill,40%));
  outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; border:5px solid var(--gold); cursor:pointer;
  box-shadow:0 4px 12px -2px rgba(20,86,240,.45); transition:transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.14) }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:5px solid var(--gold); cursor:pointer }
.calc-out h3{ font-size:var(--fs-sm); font-weight:700; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.12em; margin-bottom:24px }
.result-main .rm-val{ font-size:clamp(34px,5vw,52px); color:var(--gold-2); line-height:1; font-weight:800; letter-spacing:-.02em }
.result-main .rm-lbl{ font-size:var(--fs-body); color:rgba(255,255,255,.6); margin-top:8px }
.result-rows{ margin:24px 0; border-top:1px solid rgba(255,255,255,.12) }
.result-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.12); font-size:var(--fs-body) }
.result-row span{ color:rgba(255,255,255,.72) }
.result-row b{ font-weight:800; font-size:var(--fs-body); color:#fff }
.result-row.highlight b{ color:#7FD3A6 }
.result-row.negative b{ color:var(--gold-2) }
.calc-out .btn-gold{ background:var(--gold-2); color:var(--ink) }
.calc-out .btn-gold:hover{ background:#fff }
.disclaimer{ font-size:var(--fs-cap); color:var(--muted); line-height:1.55; margin-top:16px;
  padding:12px 16px; background:var(--bg-3); border-radius:12px; border:1px solid var(--line) }
.calc-out .disclaimer{ color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1) }

/* ---------- Вкладки калькулятора ---------- */
.calc-tabs{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; justify-content:center }
.calc-tab{ padding:12px 24px; border-radius:100px; background:var(--bg-2); border:1px solid var(--line);
  font-weight:700; font-size:var(--fs-body); color:var(--ink-soft); transition:.25s }
.calc-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink) }
.calc-tab:hover:not(.active){ border-color:var(--goldline); color:var(--ink) }
[data-panel][hidden],[data-out][hidden]{ display:none }
.result-hero{ margin-bottom:8px }
.result-hero .rh-val{ font-size:clamp(30px,4.6vw,46px); color:var(--gold-2); font-weight:800; letter-spacing:-.02em; line-height:1 }
.result-hero .rh-lbl{ font-size:var(--fs-body); color:rgba(255,255,255,.6); margin-top:8px }

/* ---------- Факты об ипотеке ---------- */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px }
.fact{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:24px 24px; box-shadow:var(--shadow-sm) }
.fact .f-val{ font-size:23px; font-weight:800; color:var(--gold-deep); letter-spacing:-.02em }
.fact .f-lbl{ font-size:var(--fs-sm); color:var(--muted); margin-top:5px; font-weight:500 }

/* ---------- Стратегии ---------- */
.strat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.strat{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:32px;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
  display:flex; flex-direction:column }
.strat:hover{ transform:translateY(-6px); border-color:var(--goldline); box-shadow:var(--shadow) }
.strat-tag{ align-self:flex-start; font-size:var(--fs-cap); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-deep); background:var(--gold-tint); border:1px solid var(--goldline); padding:5px 12px;
  border-radius:100px; margin-bottom:16px }
.strat h3{ font-size:var(--fs-h3); font-weight:800; margin-bottom:12px }
.strat p{ font-size:var(--fs-body); color:var(--ink-soft); font-weight:500; margin-bottom:16px }
.strat-for{ margin-top:auto; font-size:var(--fs-sm); color:var(--muted); border-top:1px solid var(--line); padding-top:16px }
.strat-for b{ color:var(--ink); font-weight:700 }

/* ---------- Каталог ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; align-items:center }
.filter select{
  padding:12px 40px 12px 16px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:100px; color:var(--ink-soft); font-weight:600; font-size:var(--fs-body); cursor:pointer;
  appearance:none; transition:border-color .25s, color .25s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238C877E' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.filter select:hover{ border-color:var(--goldline); color:var(--ink) }
.filter-count{ margin-left:auto; font-size:var(--fs-body); color:var(--muted); font-weight:600 }
.props-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.prop{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.prop:hover{ transform:translateY(-6px); border-color:var(--goldline); box-shadow:var(--shadow) }
.prop-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-3) }
.prop-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); z-index:1 }
.prop:hover .prop-img img{ transform:scale(1.05) }

/* Премиальный плейсхолдер объекта (силуэт небоскрёбов + район) */
.ph-tile{ position:absolute; inset:0; overflow:hidden }
.ph-tile .ph-sky{ position:absolute; left:0; right:0; bottom:0; color:rgba(120,92,45,.32); line-height:0 }
.ph-tile .ph-sky svg{ width:100%; height:50%; display:block; fill:currentColor }
.ph-tile .ph-name{ position:absolute; top:42%; left:14px; right:14px; transform:translateY(-50%);
  text-align:center; font-weight:800; font-size:var(--fs-body); letter-spacing:.01em; color:rgba(60,45,20,.5) }
.ph-tile .ph-tag{ position:absolute; bottom:10px; left:0; right:0; text-align:center; font-size:var(--fs-cap);
  color:rgba(60,45,20,.42); font-weight:600 }
.prop:hover .ph-tile .ph-sky, .listing:hover .ph-tile .ph-sky{ color:rgba(120,92,45,.44) }
.prop-badges{ position:absolute; top:14px; left:14px; display:flex; gap:8px; flex-wrap:wrap; z-index:2 }
.badge{ padding:5px 12px; border-radius:100px; font-size:var(--fs-cap); font-weight:700; backdrop-filter:blur(6px) }
.badge-status{ background:rgba(255,255,255,.9); color:var(--ink); border:1px solid var(--line) }
.badge-best{ background:var(--gold); color:#fff }
.prop-fav{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px); display:grid; place-items:center; border:1px solid var(--line); z-index:2 }
.prop-fav svg{ width:16px; height:16px; color:var(--gold) }
.prop-body{ padding:24px; display:flex; flex-direction:column; flex:1 }
.prop-loc{ font-size:var(--fs-sm); color:var(--gold-deep); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; margin-bottom:8px; display:flex; align-items:center; gap:8px }
.prop h3{ font-size:var(--fs-h3); font-weight:800; margin-bottom:8px }
.prop-meta{ font-size:var(--fs-sm); color:var(--muted); margin-bottom:16px; font-weight:500 }
.prop-price{ margin-top:auto }
.prop-price .aed{ font-size:24px; color:var(--ink); font-weight:800; letter-spacing:-.02em }
.prop-price .rub{ font-size:var(--fs-sm); color:var(--muted); margin-top:2px }
.prop-stats{ display:flex; gap:16px; margin:16px 0; padding:16px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.prop-stat{ flex:1 }
.prop-stat .ps-val{ font-size:var(--fs-body); font-weight:800; color:var(--gold-deep) }
.prop-stat .ps-max{ font-size:var(--fs-sm); color:var(--muted); font-weight:600 }
.prop-stat .ps-lbl{ font-size:var(--fs-cap); color:var(--muted); margin-top:2px }
.prop .btn{ margin-top:4px }
.catalog-note{ text-align:center; margin-top:40px; font-size:var(--fs-sm); color:var(--muted) }

/* ---------- Самоокупаемость ---------- */
.selfpay{ background:var(--bg-2); border:1px solid var(--line); border-radius:26px; padding:56px; box-shadow:var(--shadow-sm) }
.selfpay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center }
.flow{ display:flex; flex-direction:column; gap:2px }
.flow-item{ display:flex; justify-content:space-between; align-items:center; padding:16px 24px;
  background:var(--bg-3); border:1px solid var(--line) }
.flow-item:first-child{ border-radius:14px 14px 0 0 }
.flow-item.total{ background:linear-gradient(135deg, rgba(62,142,104,.12), rgba(62,142,104,.04));
  border-color:rgba(62,142,104,.32); border-radius:0 0 14px 14px }
.flow-item span{ font-size:var(--fs-body); color:var(--ink-soft); font-weight:500 }
.flow-item b{ font-size:var(--fs-body); font-weight:800 }
.flow-item.total b{ color:var(--green) }
.flow-item .fv-neg{ color:var(--gold-deep) }

/* ---------- Резидентство ---------- */
.residency{ position:relative; border-radius:26px; overflow:hidden; box-shadow:var(--shadow) }
.residency-bg{ position:absolute; inset:0; z-index:0 }
.residency-bg img{ width:100%; height:100%; object-fit:cover }
.residency-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(18,15,11,.9) 26%, rgba(18,15,11,.45)) }
.residency-inner{ position:relative; z-index:2; padding:64px 56px; max-width:640px; color:#fff }
.residency .eyebrow{ color:var(--gold-2) } .residency .eyebrow::before{ background:var(--gold-2) }
.residency h2{ font-size:clamp(28px,3.6vw,42px); margin-bottom:16px; color:#fff }
.residency .sub{ margin-bottom:32px; color:rgba(255,255,255,.88) }
.visa-tiers{ display:flex; gap:16px; margin-bottom:32px; flex-wrap:wrap }
.visa-tier{ padding:16px 24px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:14px; flex:1; min-width:150px; backdrop-filter:blur(6px) }
.visa-tier .vt-num{ font-size:26px; color:var(--gold-2); font-weight:800; letter-spacing:-.02em }
.visa-tier .vt-lbl{ font-size:var(--fs-sm); color:rgba(255,255,255,.7); margin-top:4px }
.residency .disclaimer{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.6) }

/* ---------- Как мы работаем ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px }
.step{ padding:32px 24px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s, transform .3s, box-shadow .3s; box-shadow:var(--shadow-sm) }
.step:hover{ border-color:var(--goldline); transform:translateY(-4px); box-shadow:var(--shadow) }
.step .step-n{ font-size:32px; color:var(--gold-deep); font-weight:800; line-height:1; margin-bottom:16px; letter-spacing:-.02em }
.step h3{ font-size:var(--fs-h3); font-weight:800; margin-bottom:8px }
.step p{ font-size:var(--fs-body); color:var(--muted); font-weight:500 }
.step.accent-step{ background:var(--ink); border-color:var(--ink) }
.step.accent-step .step-n{ color:var(--gold-2) }
.step.accent-step h3{ color:#fff }
.step.accent-step p{ color:rgba(255,255,255,.7) }

/* ---------- Дорожная карта ---------- */
.roadmap-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.road{ padding:32px 24px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  transition:.3s; box-shadow:var(--shadow-sm) }
.road:hover{ border-color:var(--goldline); transform:translateY(-4px); box-shadow:var(--shadow) }
.road .road-n{ font-size:19px; font-weight:800; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--gold-2), var(--gold-deep)); color:#fff; margin-bottom:16px }
.road h3{ font-size:var(--fs-h3); font-weight:800; margin-bottom:8px }
.road p{ font-size:var(--fs-sm); color:var(--muted); font-weight:500 }
.road.cta{ background:var(--ink); border-color:var(--ink); display:flex; flex-direction:column; justify-content:center; text-align:center }
.road.cta h3{ font-size:var(--fs-h3); margin-bottom:16px; color:#fff }

/* ---------- Доверие ---------- */
.trust-band{ background:var(--bg-2); border:1px solid var(--line); border-radius:26px; padding:56px; box-shadow:var(--shadow-sm) }
.trust-cols{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; text-align:center }
.trust-col svg{ width:30px; height:30px; color:var(--gold-deep); margin:0 auto 14px }
.trust-col h4{ font-size:var(--fs-h3); font-weight:800; margin-bottom:8px }
.trust-col p{ font-size:var(--fs-sm); color:var(--muted); font-weight:500 }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin:0 auto }
.faq-item{ border-bottom:1px solid var(--line) }
.faq-q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center;
  gap:24px; padding:24px 0; font-size:var(--fs-body); font-weight:700; color:var(--ink); transition:color .25s }
.faq-q:hover{ color:var(--gold-deep) }
.faq-q .fq-ico{ flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--goldline);
  display:grid; place-items:center; position:relative; transition:.3s }
.faq-q .fq-ico::before,.faq-q .fq-ico::after{ content:""; position:absolute; background:var(--gold-deep); transition:.3s }
.faq-q .fq-ico::before{ width:10px; height:1.5px }
.faq-q .fq-ico::after{ width:1.5px; height:10px }
.faq-item.open .fq-ico::after{ transform:rotate(90deg); opacity:0 }
.faq-item.open .fq-ico{ background:var(--gold); border-color:var(--gold) }
.faq-item.open .fq-ico::before{ background:#fff }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease) }
.faq-a-inner{ padding:0 0 24px; font-size:var(--fs-body); color:var(--ink-soft); max-width:700px; font-weight:500 }

/* ---------- Финальный CTA (тёмный акцент) ---------- */
.final{ position:relative; border-radius:26px; overflow:hidden; box-shadow:var(--shadow) }
.final-bg{ position:absolute; inset:0; z-index:0 }
.final-bg video,.final-bg img{ width:100%; height:100%; object-fit:cover }
.final-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,15,11,.9), rgba(18,15,11,.84)) }
.final-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:64px; align-items:center; color:#fff }
.final .eyebrow{ color:var(--gold-2) } .final .eyebrow::before{ background:var(--gold-2) }
.final h2{ font-size:clamp(30px,4vw,46px); margin-bottom:16px; color:#fff }
.final .sub{ margin-bottom:24px; color:rgba(255,255,255,.88) }
.final-badges{ display:flex; flex-direction:column; gap:12px }
.final-badges .fb{ display:flex; gap:12px; align-items:center; font-size:var(--fs-body); color:rgba(255,255,255,.9); font-weight:500 }
.final-badges .fb svg{ width:18px; height:18px; color:var(--gold-2); flex:none }
.lead-form .field-row-3{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

/* ---------- Footer ---------- */
.footer{ padding:80px 0 40px; background:var(--ink); color:#fff }
.footer .brand-name{ color:#fff } .footer .brand-sub{ color:rgba(255,255,255,.5) }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px }
.footer h5{ font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.5); margin-bottom:16px; font-weight:700 }
.footer ul{ list-style:none }
.footer ul li{ margin-bottom:12px }
.footer ul a{ font-size:var(--fs-body); color:rgba(255,255,255,.78); transition:color .25s; font-weight:500 }
.footer ul a:hover{ color:var(--gold-2) }
.footer-brand p{ font-size:var(--fs-body); color:rgba(255,255,255,.6); margin-top:16px; max-width:280px }
.footer-legal{ padding-top:32px; border-top:1px solid rgba(255,255,255,.12); font-size:var(--fs-sm); color:rgba(255,255,255,.5); line-height:1.7 }
.footer-legal .copyright{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; color:rgba(255,255,255,.7) }

/* ---------- Плавающие кнопки ---------- */
.floating{ position:fixed; right:22px; bottom:22px; z-index:90; display:flex; flex-direction:column; gap:12px }
.float-btn{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 12px 30px -8px rgba(40,32,20,.4); transition:transform .3s }
.float-btn:hover{ transform:scale(1.08) }
.float-btn svg{ width:28px; height:28px; color:#fff }
.float-wa{ background:#25D366 } .float-tg{ background:#2AABEE }

/* Липкая мобильная панель действий — всегда виден следующий шаг */
.mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:95; display:none; gap:12px; padding:12px 16px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(16px); border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -18px rgba(40,32,20,.4) }
.mobile-cta .btn{ flex:1; padding:16px 12px; font-size:14.5px }
.mobile-cta .btn-ghost{ flex:0 0 40% }

/* Подсказка-скролл в hero */
.scroll-cue{ position:absolute; left:52px; bottom:26px; z-index:3; display:flex; align-items:center; gap:12px;
  color:rgba(255,255,255,.75); font-size:12.5px; font-weight:600; letter-spacing:.03em }
.scroll-cue .mouse{ width:22px; height:34px; border:2px solid rgba(255,255,255,.6); border-radius:12px; position:relative }
.scroll-cue .mouse::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:2px;
  background:#fff; transform:translateX(-50%); animation:scrolldot 1.6s var(--ease) infinite }
@keyframes scrolldot{ 0%{ opacity:0; transform:translate(-50%,0) } 40%{ opacity:1 } 80%{ opacity:0; transform:translate(-50%,10px) } }

/* ---------- Модалка ---------- */
.modal-overlay{ position:fixed; inset:0; z-index:200; background:rgba(13,25,42,.5);
  backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px }
.modal-overlay.show{ display:flex }
.modal{ background:var(--bg-2); border:1px solid var(--line); border-radius:24px; padding:40px; max-width:480px; width:100%;
  box-shadow:var(--shadow); position:relative; animation:pop .35s var(--ease) }
@keyframes pop{ from{ transform:scale(.94); opacity:0 } to{ transform:scale(1); opacity:1 } }
.modal-close{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); color:var(--muted); font-size:20px }
.modal-close:hover{ color:var(--ink); border-color:var(--ink) }
.modal h3{ font-size:22px; font-weight:800; margin-bottom:8px }
.modal .m-sub{ font-size:var(--fs-body); color:var(--muted); margin-bottom:24px }
.modal-success{ text-align:center; padding:24px 0 }
.modal-success .ms-ico{ width:64px; height:64px; border-radius:50%; margin:0 auto 20px;
  background:rgba(62,142,104,.12); border:1px solid rgba(62,142,104,.35); display:grid; place-items:center }
.modal-success .ms-ico svg{ width:32px; height:32px; color:var(--green) }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-d="1"]{ transition-delay:.08s }
.reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s }

/* ---------- Мобильное меню ---------- */
.mobile-menu{ position:fixed; inset:0; z-index:99; background:rgba(247,244,239,.98);
  backdrop-filter:blur(20px); display:none; flex-direction:column; align-items:center; justify-content:center; gap:24px }
.mobile-menu.open{ display:flex }
.mobile-menu a{ font-size:24px; font-weight:800; color:var(--ink) }
.mobile-menu a:hover{ color:var(--gold-deep) }

/* ---------- Адаптив ---------- */
@media (max-width:1024px){
  .hero-inner{ grid-template-columns:1fr; min-height:auto }
  .hero-left{ padding:48px 40px }
  .quick-card{ margin:0 24px 24px }
  .grid-3,.props-grid,.roadmap-grid,.strat-grid,.explore-grid{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr) }
  .trust-cols{ grid-template-columns:repeat(3,1fr) }
  .facts{ grid-template-columns:repeat(3,1fr) }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:32px }
  .calc,.split,.selfpay-grid,.final-inner{ grid-template-columns:1fr }
  .nav-links{ display:none }
  .burger{ display:block }
  .scroll-cue{ display:none }
}
@media (max-width:640px){
  :root{ --fs-body:15.5px; --fs-sm:13.5px; --fs-h3:18px }
  section{ padding:72px 0 }
  .wrap{ padding:0 16px }
  .mobile-cta{ display:flex }
  .floating{ bottom:82px; right:16px }
  body{ padding-bottom:72px }
  .grid-3,.grid-2,.props-grid,.roadmap-grid,.steps,.trust-cols,.stats-grid,.strat-grid,.facts,.explore-grid{ grid-template-columns:1fr }
  .field-row{ grid-template-columns:1fr }
  .nav-cta .nav-phone{ display:none }
  .hero-left{ padding:40px 24px }
  .selfpay,.trust-band,.residency-inner,.final-inner{ padding:32px 24px }
  .visa-tiers{ flex-direction:column }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px }
}

/* =========================================================================
   ПРЕМИУМ-ПРОХОД (skill: redesign-existing-projects) — точечные апгрейды
   поверх светлого люкса: моноцифры, баланс строк, состояния, глубина.
   ========================================================================= */

/* Табличные (моноширинные) цифры — финансовая точность и ровные колонки чисел */
.stat .num, .result-main .rm-val, .result-hero .rh-val, .fact .f-val, .visa-tier .vt-num,
.prop-price .aed, .prop-price .rub, .prop-stat .ps-val, .step .step-n, .road .road-n,
.mortgage-list .mi-num, .slider-field .sf-val, .stats .num{ font-variant-numeric:tabular-nums }

/* Заголовки без «висячих» слов; абзацы — аккуратный перенос */
h1, h2, .h-section{ text-wrap:balance }
p, .sub, .lead{ text-wrap:pretty }

/* Тактильный отклик на нажатие + видимый фокус для клавиатуры (доступность) */
.btn:active{ transform:translateY(0) scale(.985) }
a:focus-visible, button:focus-visible, .faq-q:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:8px;
}
.field input:focus-visible, .field select:focus-visible{ outline-offset:1px }

/* Утилита центрирования (была в разметке .center, но правила для неё не было —
   из-за этого CTA и кнопки «Весь каталог» съезжали влево). */
.center{ text-align:center }

/* Финальный CTA: тёплый графит + скайлайн Дубая под вуалью = глубина, не «дыра» */
.cta-final{
  color:#fff;
  background:
    radial-gradient(62% 90% at 82% 4%, rgba(205,169,103,.18), transparent 58%),
    linear-gradient(158deg, rgba(21,39,62,.92) 0%, rgba(15,29,48,.90) 55%, rgba(11,22,38,.97) 100%),
    url("../media/gen-skyline.webp") center 62%/cover no-repeat;
}
.cta-final .wrap{ max-width:760px }
.cta-final .accent{ color:var(--gold-2) }
.cta-final .hero-actions{ justify-content:center }

/* Тонкое «бумажное» зерно поверх айвори — тёплая editorial-текстура, не грязь */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none; opacity:1; transform:none }
  .scroll-cue .mouse::after{ animation:none }
}

/* подсказка минимума под полем взноса («Быстрый расчёт») */
.field-hint{ font-size:var(--fs-sm); color:var(--muted); margin:8px 0 0 }
.field-hint.warn{ color:var(--gold-deep); font-weight:600 }


/* ---------- трастовые факты под хиро: три карточки (были голые галочки-строки —
   «блок без дизайна» из п.3 разбора; репорт юзера) ---------- */
.trustline{ padding:8px 0 }
.trustline-in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px }
.tl-item{ display:flex; align-items:flex-start; gap:12px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:16px; padding:18px 20px;
  box-shadow:var(--shadow-sm); font-size:var(--fs-sm); font-weight:600;
  color:var(--ink-soft); line-height:1.5 }
.tl-item i{ font-style:normal; flex:none; width:26px; height:26px; border-radius:50%;
  background:rgba(31,139,92,.12); color:var(--green); font-weight:800;
  display:grid; place-items:center; font-size:14px }
.tl-item b{ color:var(--ink); font-weight:800; font-size:var(--fs-h3); line-height:1.2 }
.tl-item[hidden]{ display:none }  /* авторский display:flex иначе перебивает hidden (карточка «живое число» до ответа API) */
@media(max-width:640px){
  .trustline-in{ grid-template-columns:1fr; gap:10px }
}


/* =========================================================================
   СИНЯЯ ДИЗАЙН-СИСТЕМА — этап 1: шапка + главный экран (по визуальному
   референсу: чистый светлый агрегатор, синий акцент, минимум декора).
   Только CSS-переопределения поверх существующих классов; разметка и JS
   не изменялись. Токены --acc* — глобальная система для следующих этапов.
   ========================================================================= */
:root{
  --acc:       #1456F0;   /* основной синий (кнопки, акценты) */
  --acc-2:     #3D74F4;   /* светлее — hover-подсветки, иконки */
  --acc-deep:  #0D3FCC;   /* темнее — hover основной кнопки */
  --acc-tint:  #EDF3FE;   /* голубая подложка */
  --acc-line:  rgba(20,86,240,.32);
}

/* ---------- Шапка: белая, компактная, синий акцент ---------- */
.header .brand-mark{ background:var(--acc); box-shadow:none; border-radius:12px }
.header .brand-name b{ color:var(--ink) }                 /* логотип одним тёмным словом */
.nav-links a:hover{ color:var(--acc) }
.nav-links a.active{ color:var(--acc) }
.nav-links a.active::after{ background:var(--acc) }
.header .nav-links a.nav-key{ color:var(--ink-soft); font-weight:600 }
.header .nav-links a.nav-key::before{ content:"" }        /* убираем декоративную звёздочку */
.header .nav-links a.nav-key:hover{ color:var(--acc) }
.nav-fav:hover{ color:var(--acc); border-color:var(--acc-line) }
.nav-fav b{ background:var(--acc) }
.header .btn{ border-radius:10px }
.header .btn-gold{ background:var(--acc); box-shadow:none; padding:12px 24px; font-size:14px }
.header .btn-gold:hover{ background:var(--acc-deep); transform:none; box-shadow:none }

/* ---------- Герой: светлый, тёмный текст, синий акцент ---------- */
.hero-inner{ box-shadow:none; border:1px solid var(--line); border-radius:24px; background:var(--bg-2) }
.hero-media::after{
  background:linear-gradient(96deg,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 34%,
    rgba(244,247,252,.55) 66%, rgba(244,247,252,.12) 100%);
}
.hero-left{ color:var(--ink) }
.hero-left .eyebrow{
  color:var(--ink-soft); background:#fff; border:1px solid var(--line);
  padding:8px 16px; border-radius:100px; align-self:flex-start;
}
.hero-left .eyebrow::before{ width:6px; height:6px; border-radius:50%; background:var(--acc) }
.hero h1{ color:var(--ink); font-size:clamp(30px,3.9vw,46px); letter-spacing:-.02em }
.hero h1 .accent{ color:var(--acc) }
.hero h1 [data-aed]{ color:var(--acc) }   /* сумма взноса с валютой — тоже синяя */
.hero .lead{ color:var(--ink-soft) }
.hero-actions .btn{ border-radius:12px }
.hero-actions .btn-gold{ background:var(--acc); box-shadow:0 10px 24px -12px rgba(20,86,240,.55) }
.hero-actions .btn-gold:hover{ background:var(--acc-deep); box-shadow:0 14px 28px -12px rgba(13,63,204,.6) }
.hero-actions .btn-ghost{ color:var(--acc); border-color:var(--acc-line); background:#fff }
.hero-actions .btn-ghost:hover{ border-color:var(--acc); background:var(--acc-tint); color:var(--acc-deep) }
.scroll-cue{ color:var(--muted) }
.scroll-cue .mouse{ border-color:var(--muted-2) }
.scroll-cue .mouse::before{ background:var(--muted) }

/* трастовые чипы: белые карточки с тонкой рамкой (без стекла) */
.trust-chip{
  background:#fff; border:1px solid var(--line); color:var(--ink-soft);
  backdrop-filter:none; border-radius:12px; font-weight:600;
}

/* ---------- Карточка «Быстрый расчёт»: поля с рамкой, синяя кнопка ---------- */
.quick-card{ border-radius:16px; box-shadow:0 18px 44px -26px rgba(15,29,48,.28) }
.quick-card .field input,.quick-card .field select{
  background:#fff; border:1px solid rgba(21,39,62,.18); border-radius:10px;
}
.quick-card .field input:focus,.quick-card .field select:focus{
  border-color:var(--acc); box-shadow:0 0 0 3px rgba(20,86,240,.12); background:#fff;
}
.quick-card .btn-gold{ background:var(--acc); border-radius:12px; box-shadow:none }
.quick-card .btn-gold:hover{ background:var(--acc-deep); transform:none; box-shadow:none }
.quick-card .field-hint.warn{ color:#B4470B }

/* состояния фокуса для клавиатуры — на синем акценте */
.header a:focus-visible,.hero-actions .btn:focus-visible,.quick-card .btn:focus-visible{
  outline:2px solid var(--acc); outline-offset:2px;
}


/* =========================================================================
   ГЕРОЙ НА ВСЮ ШИРИНУ (этап 1.1): убираем «рамку-карточку» — фон тянется
   от края до края под шапкой, контент выравнивается по сетке контейнера.
   Тёплое видео гасим в холодный светлый тон фильтром. Только CSS.
   ========================================================================= */
.hero{ padding:72px 0 0 }
.hero .wrap{ max-width:none; padding:0 }
.hero-inner{
  border-radius:0; border:none; box-shadow:none; background:var(--bg-2);
  min-height:620px;
}
/* контент по осям контейнера 1280px, фон — на весь экран */
.hero-left{ padding:56px 48px 56px max(32px, calc(50vw - 640px)) }
.quick-card{
  margin:40px max(32px, calc(50vw - 640px)) 40px 16px;
  max-width:472px; justify-self:end; width:100%;
}
/* видео: приглушаем тёплый закат в светлый холодный кадр */
.hero-media video,.hero-media img{ filter:saturate(.55) brightness(1.14) contrast(.96) }
.hero-media::after{
  background:linear-gradient(94deg,
    rgba(250,252,255,.97) 0%, rgba(248,251,255,.90) 30%,
    rgba(243,248,254,.62) 58%, rgba(240,246,253,.22) 100%);
}
/* чипы — одна аккуратная зона, как карточки на референсе */
.trust-row{ gap:12px; max-width:620px }
.trust-chip{
  padding:12px 16px; border-radius:12px; font-size:var(--fs-sm);
  box-shadow:0 8px 18px -14px rgba(15,29,48,.25);
}
/* декоративная подсказка скролла в новом лейауте не нужна */
.scroll-cue{ display:none }

@media(max-width:1024px){
  .hero-inner{ min-height:0; max-height:none; grid-template-columns:1fr }
  .hero-left{ padding:48px 24px 8px }
  .quick-card{ margin:16px 16px 32px; justify-self:stretch; max-width:none }
}


/* ---------- поиск на герое (референс: строка с лупой, типом и «Найти») ---------- */
.hero-search{
  display:flex; align-items:center; gap:8px; max-width:640px; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:8px 8px 8px 16px; margin-bottom:16px;
  box-shadow:0 18px 44px -26px rgba(15,29,48,.35);
}
.hs-lens{ width:19px; height:19px; color:var(--muted); flex:none }
.hero-search input{
  flex:1; min-width:0; border:none; background:none; padding:12px 8px;
  font-size:var(--fs-body); font-weight:600; color:var(--ink);
}
.hero-search input:focus{ outline:none }
.hero-search input::placeholder{ color:var(--muted); font-weight:500 }
.hero-search select{
  border:none; background:none; padding:12px 24px 12px 16px; cursor:pointer;
  font-size:var(--fs-body); font-weight:600; color:var(--ink-soft); appearance:none; flex:none;
  border-left:1px solid var(--line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237B8798' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.hero-search select:focus{ outline:none; color:var(--acc) }
.hero-search .hs-go{ padding:12px 24px; border-radius:12px; font-size:var(--fs-body); flex:none;
  background:var(--acc); box-shadow:none }
.hero-search .hs-go:hover{ background:var(--acc-deep); transform:none }
@media(max-width:640px){
  .hero-search{ flex-wrap:wrap; padding:12px }
  .hero-search input{ flex:1 1 100% }
  .hero-search select{ border-left:none; flex:1 }
}

/* чипы — одна белая плашка, «иконка» (звёздочка) синяя */
.trust-row{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:8px 16px; gap:2px 24px; max-width:640px;
  box-shadow:0 10px 26px -20px rgba(15,29,48,.3);
}
.trust-chip{ background:none; border:none; box-shadow:none; padding:8px 2px; border-radius:0 }
.trust-chip::first-letter{ color:var(--acc) }


/* =========================================================================
   ЕДИНАЯ СЕТКА (2026-07-17): контейнер 1280 / 12 колонок / gutter 24;
   мобайл 4 колонки / поля 16 / gutter 16; отступы по системе 8px
   (значения <6px — микро/волосяные, вне сетки; 4px — полушаг контролов).
   ========================================================================= */

/* Топ-3 на главной: плашка «доходность %» скрыта визуально — конфликтует
   с показателем «годовых на вложенные» в каталоге. Данные и сортировка
   «по доходности» не тронуты. */
.prop-stats .prop-stat:nth-child(2){ display:none }

/* мобайл: поля 16, длинные CTA не распирают экран (min-content кнопки > вьюпорта) */
@media(max-width:640px){
  .btn{ white-space:normal }
  .quick-card{ padding:24px 16px; margin:16px 16px 32px; width:auto }  /* width:100% + margins давало 16px h-скролл */
  .hero-left{ padding:40px 16px 8px }
}

/* =========================================================================
   АДАПТИВ-ПОЛИРОВКА (2026-07-17, фидбэк со скринов юзера):
   1) невысокие десктопы: герой сжимается по вертикали — поиск и чипы
      попадают в первый экран, ничего не «съезжает»;
   2) мобильный поиск: лупа в одной строке с полем (была сиротой сверху);
   3) траст-чипы на мобиле компактные (был высокий столб воздуха);
   4) бургер-меню: синяя система вместо старого крема, меньше кегль,
      скролл — все пункты видны на любом экране.
   ========================================================================= */

/* 1. герой на экранах ниже ~840px (ноуты 1366x768, 1536x864) */
@media(min-width:1025px) and (max-height:840px){
  :root{ --fs-body:16px }   /* сжатая база для невысоких ноутбуков (1366x768) */
  .hero-inner{ min-height:0 }
  .hero-left{ padding-top:40px; padding-bottom:40px }
  .hero-left .eyebrow{ margin-bottom:16px }
  .hero h1{ font-size:clamp(30px,3.4vw,42px); margin-bottom:16px }
  .hero .lead{ font-size:var(--fs-body); margin-bottom:24px; max-width:460px }
  .hero-actions{ margin-bottom:24px }
  .hero-search{ margin-bottom:12px }
  .trust-chip{ padding:6px 2px; font-size:var(--fs-sm) }
  .quick-card{ margin-top:24px; margin-bottom:24px; padding:24px 32px }
}

/* 2. мобильный поиск: строка 1 — лупа+поле, строка 2 — тип+кнопка */
@media(max-width:640px){
  .hero-search{ padding:12px; gap:8px }
  .hero-search input{ flex:1 1 120px; width:auto; min-width:0; padding:10px 8px }
  .hero-search select{ flex:1 1 55%; border-left:none; padding-left:0 }
  .hero-search .hs-go{ flex:1 0 auto }
}

/* 3. траст-чипы: плотный список вместо столба */
@media(max-width:640px){
  .trust-row{ padding:8px 16px; gap:0 16px }
  .trust-chip{ padding:6px 0; font-size:var(--fs-sm); box-shadow:none }
}

/* 4. бургер-меню: порцелан вместо крема, компакт, скролл */
.mobile-menu{
  background:rgba(244,246,248,.97); backdrop-filter:blur(20px);
  justify-content:flex-start; overflow:auto; padding:104px 24px 40px; gap:4px;
}
.mobile-menu a{
  font-size:19px; font-weight:700; padding:12px 20px; border-radius:12px;
  width:100%; max-width:400px; text-align:center;
}
.mobile-menu a:hover,.mobile-menu a:active{ background:#fff; color:var(--gold-deep) }
.mobile-menu .mm-controls{ margin-top:16px }

/* =========================================================================
   СРАВНЕНИЕ (2026-07-20): Дубай vs вклад/ипотека РФ. 3 карточки,
   выигрышная подсвечена акцентом. Токены сайта, шаг 8px.
   ========================================================================= */
.compare{ padding:88px 0 }
.cmp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch }
.cmp-card{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:20px;
  padding:32px 28px; display:flex; flex-direction:column }
.cmp-flag{ display:inline-flex; align-items:center; align-self:flex-start; margin-bottom:16px;
  font-size:var(--fs-cap); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:100px; border:1px solid var(--line); color:var(--muted); background:var(--bg) }
.cmp-flag.cmp-ae{ color:var(--acc,#1456F0); border-color:var(--acc-line,rgba(20,86,240,.35)); background:var(--gold-tint,#EDF3FE) }
.cmp-name{ font-size:var(--fs-body); font-weight:700; color:var(--ink-soft); margin-bottom:12px }
/* подпись «доход/расход» — чтобы было понятно, что означает процент */
.cmp-kind{ font-size:var(--fs-cap); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px }
.cmp-kind.cmp-kind-pay{ color:#C0392B }
.cmp-win .cmp-kind{ color:var(--acc,#1456F0) }
.cmp-num{ font-size:44px; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--ink) }
.cmp-num.cmp-neg{ color:#C0392B }
.cmp-num.cmp-pos{ color:var(--acc,#1456F0) }
.cmp-unit{ font-size:var(--fs-body); color:var(--muted); font-weight:600; margin:12px 0 20px }
.cmp-notes{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:10px }
.cmp-notes li{ position:relative; padding-left:26px; font-size:var(--fs-body); line-height:1.4; color:var(--ink-soft) }
.cmp-notes li::before{ position:absolute; left:0; top:-1px; font-weight:800; font-size:var(--fs-body) }
.cmp-notes li.cmp-bad::before{ content:"–"; color:var(--muted-2) }
.cmp-notes li.cmp-ok::before{ content:"✓"; color:var(--acc,#1456F0) }
/* выигрышная карточка */
.cmp-card.cmp-win{ border-color:var(--acc,#1456F0); box-shadow:0 30px 60px -30px rgba(20,86,240,.4);
  background:linear-gradient(180deg, var(--gold-tint,#EDF3FE), var(--bg-2) 42%) }
.cmp-badge{ position:absolute; top:-13px; left:28px; background:var(--acc,#1456F0); color:#fff;
  font-size:var(--fs-sm); font-weight:800; letter-spacing:.02em; padding:6px 14px; border-radius:100px;
  box-shadow:0 10px 22px -10px rgba(20,86,240,.6) }
.cmp-foot{ margin-top:24px; font-size:var(--fs-sm); color:var(--muted); line-height:1.6; text-align:center;
  max-width:820px; margin-inline:auto }
@media(max-width:900px){ .cmp-grid{ grid-template-columns:1fr; gap:16px } .compare{ padding:64px 0 }
  .cmp-card.cmp-win{ order:-1 }   /* на мобиле выигрышную — первой */
  .cmp-num{ font-size:38px } }

/* =========================================================================
   КРОСС-ДЕВАЙС ПОЛИРОВКА ГЕРОЯ (2026-07-20): высота под вьюпорт + баланс.
   На MacBook 14/16" герой был короче экрана → снизу/справа висела
   затемнённая пустота видео. Теперь высота тянется от 100svh (потолок 780),
   контент центрируется по вертикали, карточка расчёта — по центру.
   ========================================================================= */
@media(min-width:1025px){
  .hero-inner{ align-items:center; min-height:clamp(560px, calc(100svh - 200px), 780px) }
  .hero-left{ padding-top:40px; padding-bottom:40px }
  .quick-card{ margin-top:0; margin-bottom:0; align-self:center }
}

/* мобилка: две кнопки героя в один ряд (не столбиком) */
@media(max-width:640px){
  .hero-actions{ flex-wrap:nowrap; gap:12px }
  .hero-actions .btn{ flex:1 1 0; min-width:0; padding:16px 10px; font-size:14.5px; line-height:1.2 }
}

/* ---------- ПОИСК В СЕРЕДИНЕ ЛЕНДИНГА (перенос с героя, п.6/10 разбора) ---------- */
.mid-search .hero-search{ margin:0 auto }

/* фикс: в тёмном финальном блоке ghost-кнопка снова прозрачная с белым текстом
   (append синей системы красил .hero-actions .btn-ghost в белую заливку — на тёмном
   фоне текст пропадал; репорт юзера «не видно ничерта») */
.cta-final .hero-actions .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45) }
.cta-final .hero-actions .btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff }

/* ---------- ГЕРОЙ ВПИСЫВАЕТСЯ В ПЕРВЫЙ ЭКРАН НА ЛЮБЫХ НОУТБУКАХ ----------
   Репорт юзера: на FHD-ноуте (окно ~940px) низ героя вылезал за экран.
   Причина: section-паддинги 104+104 + clamp с вычетом всего 200px.
   Здесь: паддинги героя 72 (высота шапки) сверху / 40 снизу, а высота
   hero-inner = экран минус (72+40+20 запас). Мобилу (≤1024) не трогаем. */
@media(min-width:1025px){
  /* герой = ровно первый экран: низ секции совпадает с низом окна,
     следующая секция не выглядывает (репорт юзера «снизу торчит») */
  .hero{ padding:72px 0 0 }
  .hero-inner{ min-height:max(560px, calc(100svh - 72px)) }
}