/* SHIFT — «клавиша переключения»
   Палитра и типографика взяты из презентации проекта.
   Заголовки выключены по левому краю, перенос строки расставлен вручную. */

:root{
  --bg:#E7EEEA;
  --card:#F4F8F6;
  --dark:#16242A;
  --dark2:#0E191E;
  --mint:#35B9A0;
  --mint-deep:#146253;
  --ink:#14201F;
  --ink-mute:#4A5C58;
  --on-dark:#DCE7E3;
  --on-dark-mute:#9DB3AD;

  --m:8px;                      /* модуль сетки */
  --pad:clamp(90px,13vh,150px); /* вертикальный ритм секции, десктоп */
  --gap:52px;
  --gut:clamp(20px,4vw,64px);
  --wrap:1280px;

  --r-card:18px;
  --r-btn:11px;
  --r-field:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.62 "Golos Text",system-ui,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:"Unbounded",system-ui,sans-serif;font-weight:300;margin:0}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:12px;z-index:99;background:var(--dark);color:var(--on-dark);padding:10px 16px;border-radius:var(--r-btn)}

:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* — логотип — */
.wordmark{
  font-family:"Unbounded",sans-serif;font-weight:400;
  letter-spacing:.30em;font-size:15px;
}

/* — шапка — */
.top{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gut);
  color:var(--on-dark);
  transition:background .3s,color .3s,box-shadow .3s;
}
.top.solid{background:rgba(231,238,234,.94);backdrop-filter:blur(10px);color:var(--ink);box-shadow:0 1px 0 rgba(20,32,31,.08)}
.pill{
  border:1px solid currentColor;background:none;border-radius:var(--r-btn);
  padding:11px 22px;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
@media (max-width:720px){.pill{display:none}}

/* — оглавление — */
/* Оглавление появляется, когда начались главы. На первом экране его нет:
   там справа стоит кадр, и любой цвет пунктов на нём либо теряется,
   либо спорит с рендером. */
.toc{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:35;
  display:none;opacity:0;pointer-events:none;transition:opacity .3s;
}
.toc.show{opacity:1;pointer-events:auto}
@media (min-width:1180px){.toc{display:block}}
.toc a{
  display:flex;align-items:center;gap:10px;justify-content:flex-end;
  padding:5px 0;text-decoration:none;color:var(--ink-mute);
  font-size:12px;letter-spacing:.04em;
}
.toc i{font-style:normal;font-size:10px;letter-spacing:.14em;opacity:.55}
.toc span{opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s}
.toc a:hover span,.toc a.on span{opacity:1;transform:none}
.toc a.on{color:var(--mint-deep);font-weight:600}
.toc.on-dark a{color:var(--on-dark-mute)}
.toc.on-dark a.on{color:var(--mint)}

/* — общий каркас секций — */
.sec{
  padding:var(--pad) var(--gut);
  margin:0 auto;
}
.sec>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.sec-light{background:var(--bg)}
.sec-dark{background:var(--dark);color:var(--on-dark)}
.sec-tight{padding-top:calc(var(--pad) * .55)}

.label{
  font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--mint-deep);margin:0 0 calc(var(--m)*3);
}
.sec-dark .label{color:var(--mint)}

h1{font-size:clamp(38px,5.4vw,82px);line-height:1.06;letter-spacing:-.02em}
h2{font-size:clamp(26px,3.4vw,50px);line-height:1.12;letter-spacing:-.015em;margin-bottom:calc(var(--m)*5)}
h3{font-size:clamp(19px,2vw,25px);line-height:1.2;margin-bottom:calc(var(--m)*2)}

/* Перенос строки в заголовке — управляем тем, где он ломается.
   Сдвиг второй строки на модуль был снят 06.08.2026: когда сдвинутая часть
   сама переносится на две строки (заголовок «Детям» на телефоне), отступ
   получают обе, и это читается не как жест, а как съехавший текст. */
.shifted{display:block}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gap);margin-bottom:calc(var(--m)*7)}
.cols p:last-child{margin-bottom:0}

.pull{
  font-family:"Unbounded",sans-serif;font-weight:300;
  font-size:clamp(19px,2.2vw,28px);line-height:1.34;letter-spacing:-.01em;
  border-left:2px solid var(--mint);padding-left:calc(var(--m)*3);
  margin:calc(var(--m)*5) 0;
}
.pull-wide{max-width:840px}
.footnote{font-size:14px;color:var(--ink-mute);margin-top:calc(var(--m)*4)}
.sec-dark .footnote{color:var(--on-dark-mute)}

/* — кнопки — */
.btn{
  display:inline-block;border:1px solid transparent;border-radius:var(--r-btn);
  padding:15px 30px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;transition:background .2s,color .2s,border-color .2s;
}
.btn-mint{background:var(--mint);color:#0B1A17;border-color:var(--mint)}
.btn-mint:hover{background:#2AA791;border-color:#2AA791}
.btn-dark{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.btn-dark:hover{background:#0E191E}
.btn-ghost{background:none;color:var(--on-dark);border-color:rgba(220,231,227,.45)}
.btn-ghost:hover{border-color:var(--on-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:calc(var(--m)*2);margin-top:calc(var(--m)*5)}

/* — первый экран — */
.hero{
  display:grid;grid-template-columns:1fr;
  min-height:100svh;background:var(--dark);color:var(--on-dark);
}
.hero-panel{
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--m)*14) var(--gut) calc(var(--m)*8);
  order:2;
}
/* Кадр подаётся родной пропорцией, а не растягивается на колонку:
   1310×730 это 1.79, а колонка сплита узкая и высокая — cover срезал бы
   ансамбль до двух башен. Вокруг кадра остаётся тёмное поле и тонкий
   кейлайн: та же рамка, что на разворотах презентации. */
.hero-frame{position:relative;order:1;display:grid;place-items:center;padding:var(--gut)}
.hero-frame img{width:100%;height:auto;border-radius:var(--r-card)}
.hero-frame::after{
  content:"";position:absolute;inset:calc(var(--gut) - 12px);
  border:1px solid rgba(53,185,160,.32);border-radius:calc(var(--r-card) + 8px);
  pointer-events:none;
}
/* в сплите колонка текста узкая — H1 считается от неё, а не от окна */
.hero h1{font-size:clamp(34px,4.1vw,58px);line-height:1.08;margin-bottom:calc(var(--m)*4)}
.hero-sub{max-width:46ch;color:var(--on-dark-mute);margin-bottom:calc(var(--m)*5)}
.hero .btn{align-self:flex-start}
.hero-note{font-size:14px;color:var(--on-dark-mute);margin:calc(var(--m)*2) 0 0}

/* десктоп: сплит. Колонка кадра не шире 54% — иначе проваливаемся
   по плотности (исходник 1310px, порог 1,6×). */
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,46%) minmax(0,54%)}
  .hero-panel{order:1;padding:var(--gut) calc(var(--m)*8) var(--gut) var(--gut)}
  .hero-frame{order:2}
}
/* телефон: тот же кадр родной пропорцией сверху, текст сразу под ним */
@media (max-width:899px){
  .hero{min-height:0}
  .hero-frame{padding:calc(var(--m)*8) var(--gut) 0}
  .hero-frame::after{inset:calc(var(--m)*8 - 10px) calc(var(--gut) - 10px) -10px}
  .hero-panel{padding-top:calc(var(--m)*6);padding-bottom:calc(var(--m)*8)}
}

/* — сплит «текст + портретный кадр» — */
.split{display:grid;gap:var(--gap);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr minmax(0,42%)}}
.split-img{margin:0}
.split-img img{width:100%;height:auto;border-radius:var(--r-card)}
@media (max-width:899px){.split-img img{max-height:62vh;object-fit:cover}}

/* — полосы-кадры — */
/* Ширина слота ограничена тем, что выдерживает исходник.
   Презентация растровая, потолок 1920px, после кропа остаётся 1000–1900px,
   а порог по DESIGN.md — 1,6× плотности. Поэтому полос во всю ширину
   на сайте нет: у каждого кадра свой предел через --maxw.
   Снимается, когда застройщик пришлёт исходники от 3000px. */
.band{margin:calc(var(--m)*6) auto;max-width:var(--maxw,100%)}
.band img{width:100%;height:auto;border-radius:var(--r-card)}
.band figcaption{font-size:14px;color:var(--ink-mute);margin-top:calc(var(--m)*2)}
.sec-dark .band figcaption{color:var(--on-dark-mute)}

.duo{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:calc(var(--m)*6) auto}
.duo figure{margin:0}
.duo img{width:100%;height:auto;border-radius:var(--r-card)}
.duo figcaption{font-size:15px;color:var(--ink-mute);margin-top:calc(var(--m)*2)}
.card{background:var(--card);border-radius:var(--r-card);padding:calc(var(--m)*5);box-shadow:0 8px 30px rgba(20,32,31,.06)}
.card p:last-child{margin-bottom:0}
.card-num{font-family:"Unbounded",sans-serif;font-weight:200;font-size:clamp(34px,4vw,56px);letter-spacing:-.03em;color:var(--mint-deep);margin:0 0 calc(var(--m)*1)}

/* — цифры — */
/* колонка считается от самого широкого числа (68 660), иначе оно переносится */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:calc(var(--m)*6) var(--gap)}
.figures b{
  display:block;font-family:"Unbounded",sans-serif;font-weight:200;
  font-size:clamp(38px,4.6vw,66px);line-height:1;letter-spacing:-.03em;
  color:var(--mint);margin-bottom:calc(var(--m)*1.5);
}
.figures span{display:block;font-size:15px;color:var(--on-dark-mute);max-width:24ch}
.figures-two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* на светлой секции мята слишком светлая — берём глубокий вариант,
   иначе контраст 2,4 при пороге 3,0 для крупного текста */
.figures-light b{color:var(--mint-deep)}
.figures-light span{color:var(--ink-mute)}
.drive{margin-bottom:calc(var(--m)*7)}

/* — факты списком — */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap)}
.facts li{border-top:1px solid rgba(20,32,31,.16);padding-top:calc(var(--m)*2)}
.facts b{display:block;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:calc(var(--m)*1.5);color:var(--mint-deep)}

/* — виды — */
.views{margin-top:calc(var(--m)*5)}
.views-title{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:calc(var(--m)*2)}
.views ul{display:flex;flex-wrap:wrap;gap:calc(var(--m)*1.5)}
.views li{border:1px solid rgba(20,32,31,.18);border-radius:99px;padding:8px 16px;font-size:14px}


/* — планировки — */
.tabs{display:flex;flex-wrap:wrap;gap:calc(var(--m)*1.5);margin-bottom:calc(var(--m)*5)}
.tabs button{
  background:none;border:1px solid rgba(220,231,227,.35);border-radius:var(--r-btn);
  padding:12px 22px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-dark-mute);
}
.tabs button[aria-selected="true"]{background:var(--mint);border-color:var(--mint);color:#0B1A17}
.note-euro{
  border-left:2px solid var(--mint);padding-left:calc(var(--m)*3);
  font-size:15px;color:var(--on-dark-mute);max-width:70ch;
  margin:calc(var(--m)*4) auto calc(var(--m)*5);
}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--gap)}
.plans figure{margin:0}
.plans img{width:100%;height:auto;background:#fff;border-radius:var(--r-card)}
.plans figcaption{font-size:14px;color:var(--on-dark-mute);margin-top:calc(var(--m)*1.5)}

/* — форма — */
.form-sec .form-lead{max-width:54ch;margin-bottom:calc(var(--m)*5)}
.lead-form{display:grid;gap:calc(var(--m)*2);max-width:440px}
.lead-form label{display:grid;gap:6px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.sec-dark .lead-form label,.sheet .lead-form label{color:var(--on-dark-mute)}
/* Размер шрифта поля — не меньше 16px. iOS Safari принудительно зумит страницу
   при фокусе на поле мельче 16px и обратно её не отматывает: шторка заявки
   уезжала за правый край экрана. Раньше здесь стоял font:inherit, а он тянул
   13px от подписи <label>. */
.lead-form input{
  font-family:inherit;font-size:17px;line-height:1.4;
  text-transform:none;letter-spacing:normal;font-weight:400;
  padding:13px 15px;border:1px solid rgba(20,32,31,.22);border-radius:var(--r-field);
  background:#fff;color:var(--ink);
}
.sheet .lead-form input{background:rgba(255,255,255,.06);border-color:rgba(220,231,227,.28);color:var(--on-dark)}
.lead-form .btn{justify-self:start;border:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.consent{font-size:12px;color:var(--ink-mute);margin:0}
.sheet .consent{color:var(--on-dark-mute)}
.form-msg{font-size:14px;margin:0;min-height:1.4em}
.form-msg.ok{color:var(--mint-deep)}
.sheet .form-msg.ok{color:var(--mint)}
.form-msg.err{color:#B3453A}

/* — плавающая кнопка, нижний бар, шторка — */
.fab{
  position:fixed;right:20px;bottom:20px;z-index:45;
  width:58px;height:58px;border-radius:50%;border:none;
  background:var(--dark);color:var(--on-dark);
  display:grid;place-items:center;
  box-shadow:0 0 0 12px rgba(53,185,160,.16),0 10px 26px rgba(14,25,30,.24);
  transition:opacity .25s,transform .25s;
}
.fab.hide{opacity:0;transform:scale(.85);pointer-events:none}
/* На телефоне заявку держит нижний бар. Плавающая кнопка там лишняя:
   она дублирует тот же призыв и наезжает на кнопки внутри контента. */
@media (max-width:720px){.fab{display:none}}

.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:44;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;min-height:56px;
  background:var(--dark2);color:var(--on-dark);
  transition:transform .3s;
}
.bar span{font-size:13px;line-height:1.25;color:var(--on-dark-mute)}
.bar .btn{padding:12px 18px;white-space:nowrap}
.bar.hide{transform:translateY(110%)}
@media (max-width:720px){.bar{display:flex}}

.sheet{position:fixed;inset:0;z-index:60;background:rgba(11,20,24,.55);display:grid;align-items:end}
.sheet[hidden]{display:none}
@media (min-width:721px){.sheet{place-items:center}}
.sheet-card{
  position:relative;width:100%;max-width:460px;
  background:var(--dark);color:var(--on-dark);
  border-radius:20px 20px 0 0;padding:calc(var(--m)*5) calc(var(--m)*4) calc(var(--m)*5);
}
@media (min-width:721px){.sheet-card{border-radius:20px}}
.sheet-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:28px;line-height:1;color:var(--on-dark-mute)}
.sheet h3{margin-bottom:calc(var(--m)*1.5)}
.sheet>.sheet-card>p{color:var(--on-dark-mute);font-size:15px}

/* — подвал — */
.foot{background:var(--dark2);color:var(--on-dark-mute);padding:calc(var(--m)*10) var(--gut) calc(var(--m)*14)}
.foot>*{max-width:var(--wrap);margin:0 auto 1.1em}
.foot .wordmark{display:block;color:var(--on-dark);margin-bottom:calc(var(--m)*3)}
.disclaimer{font-size:12.5px;line-height:1.55;opacity:.75}

/* — появление блоков —
   раскрываем заранее, полупрозрачного текста человек видеть не должен */
.rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media (max-width:820px){.rise{transition-duration:.45s}}

/* — телефон: отдельный ритм — */
@media (max-width:820px){
  :root{--pad:clamp(48px,7vh,72px);--gap:26px}
  .band{margin:calc(var(--m)*4) auto}
  .duo,.figures{gap:calc(var(--m)*4)}
  .pull{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}