/* home.css — страница «Главная» TerraUnit2. Все селекторы в scope .page-home.
   Значения из узлов Figma (home.json), брейкпоинты фикс: 900/760/600/390. */

/* ===== Утилиты страницы ===== */
.page-home .acc{font-family:var(--font-display);font-style:italic;font-weight:700}
.page-home .ic{display:inline-block;flex:0 0 auto;width:24px;height:24px;
  background-color:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}

.page-home .eyebrow{font-size:var(--fs-20);line-height:var(--lh-20);font-weight:400}
.page-home .eyebrow--grey{color:var(--c-grey)}
.page-home .eyebrow--beige{color:var(--c-beige)}
.page-home .sec-head{display:flex;flex-direction:column;gap:10px}
.page-home .sec-head--center{align-items:center;text-align:center}
.page-home .sec-title{font-size:var(--fs-h1);line-height:72px;font-weight:700;letter-spacing:var(--ls-tight)}

/* Кнопка-акция «Выбрать участок» (gold pill) */
.page-home .btn-cta{display:inline-flex;align-items:center;gap:12px;background:var(--c-gold);color:#2a2b1c;
  border-radius:12px;padding:24px 32px;font-size:var(--fs-20);line-height:var(--lh-20);white-space:nowrap;
  transition:filter .2s,transform .2s}
.page-home .btn-cta:hover{filter:brightness(.9)}
.page-home .btn-cta:active{transform:translateY(1px)}
.page-home .btn-cta .btn__icon{filter:none}

/* ================= HERO ================= */
.page-home .hero{position:relative}
.page-home .hero__top{position:relative;height:min(680px,82vh);min-height:620px;overflow:hidden;border-radius:40px 40px 0 0}
/* Hero-видео главной: те же 3 слоя (LQIP → постер-img → видео). */
.page-home .hero__video-lqip{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.08);filter:blur(20px)}
.page-home .hero__video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .12s linear}
.page-home .hero__video-poster.is-ready{opacity:1}
.page-home .hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* opacity:0/fade — ТОЛЬКО для реального <video>. Фото-hero (div.hero__video--photo) не прячем. */
.page-home video.hero__video{opacity:0;transition:opacity .4s ease}
.page-home video.hero__video.is-on{opacity:1}
/* Затемнение под текстом. ГОТЧА: оверлей должен быть НАД видео (z-index:2 > видео z-index:1),
   иначе на кадрах, где играет видео (белое небо), затемнение не действует — видео перекрывает скрим.
   Градиент темнее сверху — там и белое небо, и белый заголовок сливались. Текст (inner) выше оверлея. */
.page-home .hero__top::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(42,43,28,.58) 0%,rgba(42,43,28,.44) 42%,rgba(42,43,28,.38) 100%)}
.page-home .hero__top-inner{position:relative;z-index:3;padding-top:77px}

.page-home .hero__headline{position:relative;height:284px;color:var(--c-cream)}
.page-home .hero__title{position:relative;height:284px;margin:0;font-weight:700}
.page-home .hero__line{position:absolute;font-size:80px;line-height:80px;white-space:nowrap}
.page-home .hero__line--1{left:0;top:0}
.page-home .hero__line--2{left:326px;top:98px}
.page-home .hero__line--3{left:14px;top:204px}
.page-home .hero__line .acc{font-size:80px;line-height:80px}
.page-home .hero__tag{position:absolute;left:0;top:122px;display:inline-flex;align-items:center;gap:4px;
  height:44px;padding:10px;border-radius:12px;background:var(--c-cream);color:var(--c-green);
  font-size:var(--fs-16);line-height:var(--lh-16);font-weight:500}
.page-home .hero__social{position:absolute;right:0;top:240px;display:flex;gap:4px}
/* Figma hero: соц-кнопки — белые квадраты с зелёными иконками (иконка нативно #424C2C) */
.page-home .hero__social .icn-btn{background:#fff}

.page-home .hero__features{margin-top:72px;display:flex;gap:24px;align-items:center;
  padding:12px;border-radius:12px;background:rgba(0,0,0,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.page-home .hero__feats{flex:1 1 auto;display:flex;gap:24px}
.page-home .hero__feature{flex:1 1 0;display:flex;gap:12px;align-items:flex-start;color:var(--c-cream)}
.page-home .hero__feat-ic{width:24px;height:24px}
.page-home .hero__feat-body{display:flex;flex-direction:column;gap:2px}
.page-home .hero__feat-title{font-size:var(--fs-16);line-height:var(--lh-16);font-weight:500}
.page-home .hero__feat-desc{font-size:var(--fs-14);line-height:var(--lh-14);font-weight:400}
.page-home .hero__feat-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;
  background:var(--c-gold);color:#2a2b1c;border-radius:12px;padding:24px 32px;
  font-size:var(--fs-20);line-height:var(--lh-20);white-space:nowrap;transition:filter .2s}
.page-home .hero__feat-btn:hover{filter:brightness(.9)}

/* Figma: круги О компании наполовину выступают за нижний край крем-панели на крем-фон */
.page-home .hero__lower{position:relative;z-index:1;background:var(--c-gold);
  border-radius:0 0 24px 24px;overflow:visible;display:flow-root;padding:72px 0 0}
.page-home .hero__lower-inner{position:relative;z-index:1}
/* Декор-кольца «О компании» — точный ассет Figma (rings-about.svg, circle cx723 cy584 r549) */
/* Ширина 100% (фон 1440px клипается краями элемента) — не создаёт гориз. переполнения,
   поэтому панель может быть overflow:visible и круги выступают вниз (R-03) */
.page-home .hero__rings{position:absolute;left:0;top:0;width:100%;height:100%;
  background:url("../icons/rings-about.svg") top center/1440px auto no-repeat;pointer-events:none;z-index:0}
.page-home .hero__about{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.page-home .hero__about-eyebrow{font-size:var(--fs-20);line-height:var(--lh-20);color:var(--c-beige)}
.page-home .hero__about-title{font-size:60px;line-height:72px;font-weight:700;color:var(--c-cream)}
.page-home .hero__about-title .acc{font-size:60px;color:#2a2b1c}

/* Figma: нижняя граница бежевого фона режет круги примерно посередине (h круга 343 → overhang ~172) */
.page-home .hero__circles{margin-top:36px;margin-bottom:-172px;position:relative;z-index:2;display:flex;justify-content:center;align-items:center}
.page-home .hero__circle{width:343px;height:343px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px}
/* Figma: тёмные боковые круги заходят ПОВЕРХ белого центрального */
.page-home .hero__circle--green{background:var(--c-green);color:var(--c-cream);z-index:2}
.page-home .hero__circle--cream{background:var(--c-cream);color:var(--c-green);border:2px solid var(--c-beige);z-index:1}
.page-home .hero__circle+.hero__circle{margin-left:-44px}
.page-home .hero__circle-title{font-size:32px;line-height:32px}
.page-home .hero__circle-title--lg{font-size:40px;line-height:40px}
.page-home .hero__circle-text{font-size:var(--fs-24);line-height:28px;font-weight:400}

/* ================= ПОСЕЛКИ ================= */
.page-home .poselki{padding:200px 0 72px}
/* Figma: стрелки на уровне нижней строки заголовка («проектами:») */
.page-home .poselki__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:60px}
/* Figma: основной текст тёмный, зелёное только слово «нашими» (.acc) */
.page-home .poselki__title{color:#2a2b1c;line-height:74px;max-width:880px}
.page-home .poselki__title .acc{color:var(--c-green)}
.page-home .poselki__arrows{display:flex;gap:8px;flex:0 0 auto}
.page-home .poselki__arr{width:52px;height:52px;background:var(--c-gold);transition:background-color .2s,transform .2s}
.page-home .poselki__arr img{width:20px;height:20px}
.page-home .poselki__arr:hover{background:var(--c-green)}
.page-home .poselki__arr:hover img{filter:brightness(0) invert(1)}
.page-home .poselki__arr:active{transform:translateY(1px)}

.page-home .poselki__track{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;padding-bottom:4px;scroll-snap-type:x proximity}
.page-home .poselki__track::-webkit-scrollbar{display:none}
/* Figma: справа выглядывает краешек 3-й карточки. Контейнер даёт inner ~1040 (2 карты),
   расширяем трек вправо за счёт бокового отступа контейнера, чтобы 3-я подглядывала */
@media (min-width:1081px){
  .page-home .poselki__track{margin-right:max(-160px, calc(50% - 50vw))}
}

/* Узкий десктоп 1081–1250: staggered-заголовок наезжает на соц-иконки (line3 nowrap + иконки
   у правого края). Переводим заголовок в поточный стек (иконки под текстом), навигацию не трогаем. */
@media (min-width:1081px) and (max-width:1250px){
  .page-home .hero__headline{height:auto;display:flex;flex-direction:column}
  .page-home .hero__title{position:static;height:auto;display:flex;flex-direction:column;gap:4px;order:2}
  .page-home .hero__line,.page-home .hero__line .acc{position:static;font-size:64px;line-height:1.06;white-space:normal}
  .page-home .hero__tag{position:static;order:1;margin:0 0 16px;align-self:flex-start;top:auto;left:auto}
  .page-home .hero__social{position:static;order:3;margin-top:16px;top:auto;right:auto;align-self:flex-start}
}
.page-home .pcard{flex:0 0 505px;max-width:505px;scroll-snap-align:start;background:var(--c-cream);border:1px solid var(--c-beige);
  border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:20px;text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.page-home .pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(42,43,28,.14);border-color:var(--c-gold)}
/* Появление карточек посёлков — более явное: крупнее сдвиг, дольше и мягче базового reveal.
   БЕЗ scale — зум сдвигал левый край карточки к центру, из-за чего в конце анимации карточка
   «отпрыгивала» влево (дёрганье). Только вертикальный подъём — карточка встаёт ровно на место.
   Задержку между соседними карточками ставит shared.js. */
@media (prefers-reduced-motion:no-preference){
  .page-home .pcard[data-reveal-item]{transform:translateY(56px);
    transition:opacity .75s cubic-bezier(.16,.84,.44,1),transform .75s cubic-bezier(.16,.84,.44,1)}
  .page-home .pcard[data-reveal-item].is-revealed{transform:none}
}
.page-home .pcard__img{width:100%;height:265px;object-fit:cover;border-radius:12px}
.page-home .pcard__body{display:flex;flex-direction:column;gap:24px}
.page-home .pcard__info{display:flex;flex-direction:column;gap:16px}
.page-home .pcard__head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.page-home .pcard__name{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:700;color:var(--c-green)}
.page-home .pcard__km{font-size:var(--fs-20);line-height:var(--lh-20);color:var(--c-green);white-space:nowrap}
.page-home .pcard__meta{display:flex;flex-direction:column;gap:8px}
.page-home .pcard__meta-row{display:flex;gap:8px;align-items:center;font-size:var(--fs-20);line-height:var(--lh-20);color:#2a2b1c}
.page-home .pcard__mic{width:16px;height:16px;color:var(--c-gold)}
.page-home .pcard__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.page-home .pcard__price{display:flex;flex-direction:column}
.page-home .pcard__from{font-size:var(--fs-16);line-height:var(--lh-16);font-weight:500;color:var(--c-green)}
.page-home .pcard__sum{display:flex;align-items:baseline;gap:8px;font-size:40px;line-height:40px;color:var(--c-green)}
.page-home .pcard__rub{font-size:var(--fs-16);line-height:var(--lh-16);font-weight:500;font-family:var(--font-sans);font-style:normal}
.page-home .pcard__go{width:40px;height:40px;background:var(--c-green);transition:background-color .2s}
.page-home .pcard__go img{width:20px;height:20px;filter:brightness(0) invert(1)}
.page-home .pcard:hover .pcard__go{background:var(--c-brown)}

/* ================= ЛОКАЦИЯ ================= */
.page-home .location{position:relative;background:var(--c-gold);border-radius:24px;padding:72px 0;overflow:hidden}
/* Декор-кольца локации — ассет Figma (rings-about.svg) */
.page-home .location__rings{position:absolute;left:50%;translate:-50% 0;top:0;width:1440px;max-width:none;height:100%;
  background:url("../icons/rings-about.svg") top center/1440px auto no-repeat;pointer-events:none;z-index:0}
.page-home .location .container{position:relative;z-index:1}
.page-home .location .sec-head{margin-bottom:60px}
/* Живая Яндекс-карта: тот же блок, что на странице посёлка */
.page-home .location__map .ya-map{width:100%;height:520px;border-radius:40px;overflow:hidden;background:var(--c-beige)}
.page-home .location__map .ya-map img{width:100%;height:100%;object-fit:cover}
.page-home .location__title{color:var(--c-cream);line-height:60px;max-width:740px}
/* Figma: «Удобное расположение» тёмным, «наших поселков» — крем */
.page-home .location__title .acc{color:#2a2b1c}
.page-home .location__map{position:relative}
.page-home .location__map .ya-map img{width:100%;height:100%;aspect-ratio:1240/520;object-fit:cover;border-radius:40px}
.page-home .location__btn{position:absolute;left:36px;bottom:36px}

/* ================= ПОЧЕМУ ================= */
.page-home .why{padding:72px 0}
.page-home .why__head{margin-bottom:60px}
.page-home .why__title{max-width:900px;color:#2a2b1c;line-height:72px}
.page-home .why__title .acc{color:var(--c-green)}
/* Раскладка «Почему» (после разбора с фронтенд-экспертом):
   грид НА КАЖДУЮ ПАРУ (не единый через display:contents — у него баги в Safari,
   как и у grid-auto-rows:1fr). Высоту ряда определяет ТЕКСТ: card height:auto +
   overflow:visible + min-height:min-content — карточка не может стать ниже своего
   текста ни в одном движке (структурная гарантия от обрезки). media min-height как
   пол, align-items:stretch тянет фото на высоту ряда = высоте текста.
   minmax(0,1fr) — страховка колонок от распора длинным контентом.
   Единую высоту всех 6 блоков доводит JS (fonts.ready + ResizeObserver, см. shared.js). */
.page-home .why__items{display:flex;flex-direction:column;gap:20px;margin-bottom:60px}
.page-home .why__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.page-home .why__media{border-radius:18px;background-size:cover;background-position:center;min-height:322px}
.page-home .why__card{background:var(--c-beige);border-radius:18px;padding:36px;display:flex;gap:24px;
  align-items:flex-start;justify-content:space-between;min-height:min-content;height:auto;overflow:visible}
.page-home .why__card-head{display:flex;flex-direction:column;gap:16px}
.page-home .why__card-title{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;color:#2a2b1c}
.page-home .why__card-text{font-size:var(--fs-20);line-height:var(--lh-20);color:var(--c-grey)}
.page-home .why__card-ic{width:48px;height:48px;color:var(--c-gold)}
.page-home .why__btn{display:flex;margin:0 auto}

/* ================= КОММУНИКАЦИИ ================= */
.page-home .comm{position:relative;background:var(--c-green);border-radius:24px;padding:72px 0;overflow:hidden}
.page-home .comm__inner{position:relative;z-index:1}
/* Декор-кольца коммуникаций — точный ассет Figma (rings-comm.svg, 2 круга, поворот -24°) */
.page-home .comm__rings{position:absolute;right:-360px;top:50%;width:2210px;height:1260px;
  background:url("../icons/rings-comm.svg") center/contain no-repeat;
  transform:translateY(-50%) rotate(-24.25deg);transform-origin:center;pointer-events:none;z-index:0}
.page-home .comm__title{font-size:60px;line-height:72px;font-weight:700;color:var(--c-cream);margin-bottom:60px}
.page-home .comm__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.page-home .comm__list{display:flex;flex-direction:column;gap:16px}
.page-home .comm__item{background:var(--c-brown);border-radius:24px;padding:24px;display:flex;gap:24px;
  align-items:center;min-height:188px}
.page-home .comm__thumb{flex:0 0 180px;width:180px;height:140px;border-radius:13px;background-size:cover;background-position:center}
.page-home .comm__label{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:700;color:var(--c-white)}
/* Figma: фото не зеркалить — засветка солнца слева-вверху (ассет экспортирован зеркально → возвращаем флип) */
.page-home .comm__photo{border-radius:12px;background-size:cover;background-position:center;min-height:596px;transform:scaleX(-1)}

/* ================= ФИЛОСОФИЯ ================= */
.page-home .philos{padding:72px 0}
.page-home .philos__head{gap:10px;margin-bottom:60px}
.page-home .philos__head-body{display:flex;flex-direction:column;gap:24px}
.page-home .philos__title{color:#2a2b1c;line-height:72px}
.page-home .philos__title .acc{color:var(--c-green)}
.page-home .philos__lead{font-size:var(--fs-20);line-height:var(--lh-20);color:#2a2b1c;max-width:1053px}
.page-home .philos__stage{position:relative}
.page-home .philos__viewport{position:relative}
/* scroll-snap: свайп/драг докручивается до ближайшего фото (proximity — мягко, не ломает
   левый «подгляд» в покое; scroll-padding оставляет место под sliver 60px+gap). */
.page-home .philos__track{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;border-radius:24px;
  scroll-snap-type:x proximity;scroll-padding-left:80px}
.page-home .philos__track::-webkit-scrollbar{display:none}
/* Figma: слева у края «подсматривающий» превью-слайд (sliver соседнего фото) */
.page-home .philos__track::before{content:"";flex:0 0 60px;align-self:stretch;border-radius:24px;
  background:url('../img/rectangle-18-6171b2b5.webp') right center/cover no-repeat}
.page-home .philos__slide{flex:0 0 1029px;max-width:1029px;height:540px;border-radius:24px;
  background-size:cover;background-position:center;position:relative;scroll-snap-align:start}
/* Навигация слайдера закреплена на сцене (не внутри слайда) → стрелки не уезжают при листании */
.page-home .philos__nav{position:absolute;left:36px;bottom:36px;z-index:3;background:var(--c-cream);
  border-radius:12px;padding:12px;display:inline-flex;gap:8px}
.page-home .philos__arr{width:52px;height:52px;background:var(--c-gold);transition:background-color .2s,transform .2s}
.page-home .philos__arr img{width:20px;height:20px}
.page-home .philos__arr:hover{background:var(--c-green)}
.page-home .philos__arr:hover img{filter:brightness(0) invert(1)}
.page-home .philos__arr:active{transform:translateY(1px)}
/* Figma: карточка компактная в правом-нижнем углу (~в 1.5 раза меньше) */
.page-home .philos__card{position:absolute;right:0;bottom:16px;width:336px;background:var(--c-green);
  color:var(--c-cream);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:24px}
.page-home .philos__card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.page-home .philos__card-title{font-size:22px;line-height:28px;font-weight:700}
.page-home .philos__tab{flex:0 0 auto;border:1px solid var(--c-cream);border-radius:200px;
  padding:6px 14px;font-size:12px;line-height:16px}
.page-home .philos__card-cols{display:flex;gap:16px}
.page-home .philos__card-col{flex:1 1 0;min-height:76px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.page-home .philos__card-ic{width:28px;height:28px;color:var(--c-cream)}
/* fix (клиент): подписи на тёмно-зелёной карточке были серыми (--c-grey) → не читались.
   Осветляем до крем с лёгкой прозрачностью — читаемо, но тише заголовка. */
.page-home .philos__card-label{font-size:15px;line-height:20px;color:rgba(251,249,243,.82)}
.page-home .philos__card-sep{flex:0 0 1px;width:1px;align-self:stretch;background:var(--c-cream)}

/* ================= ОПЛАТА ================= */
.page-home .pay{padding:72px 0}
.page-home .pay .sec-head{margin-bottom:60px}
.page-home .pay__title{color:#2a2b1c}
.page-home .pay__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.page-home .pay__card{background:var(--c-beige);border-radius:24px;padding:32px;min-height:212px;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.page-home .pay__icon{width:64px;height:64px;border-radius:12px;background:var(--c-gold);
  display:flex;align-items:center;justify-content:center;color:var(--c-cream)}
.page-home .pay__icon .ic{width:24px;height:24px}
.page-home .pay__name{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:700;color:#2a2b1c}
.page-home .pay__btn{display:flex;margin:60px auto 0}

/* ================= FAQ ================= */
.page-home .faq{position:relative;background:var(--c-gold);border-radius:40px;padding:72px 0;overflow:hidden}
.page-home .faq__inner{position:relative;z-index:1}
/* Декор-кольца FAQ — ассет Figma (rings-about.svg) */
.page-home .faq__rings{position:absolute;left:50%;translate:-50% 0;top:0;width:1440px;max-width:none;height:100%;
  background:url("../icons/rings-about.svg") top center/1440px auto no-repeat;pointer-events:none;z-index:0}
.page-home .faq__title{text-align:center;font-size:60px;line-height:72px;font-weight:700;color:var(--c-green);margin-bottom:48px}
.page-home .faq__items{display:flex;flex-direction:column}
.page-home .faq__item{border-bottom:1px solid var(--c-grey)}
.page-home .faq__trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  text-align:left;padding:36px 0}
.page-home .faq__q{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:700;color:#2a2b1c}
.page-home .faq__toggle{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:8px;background:var(--c-cream);transition:background .2s}
.page-home .faq__toggle::before,.page-home .faq__toggle::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:2px;background:var(--c-green);translate:-50% -50%;transition:transform .2s,background .2s}
.page-home .faq__toggle::after{transform:rotate(90deg)}
.page-home .faq__item.is-open .faq__toggle{background:var(--c-green)}
.page-home .faq__item.is-open .faq__toggle::before,.page-home .faq__item.is-open .faq__toggle::after{background:var(--c-cream)}
.page-home .faq__item.is-open .faq__toggle::before{transform:rotate(45deg)}
.page-home .faq__item.is-open .faq__toggle::after{transform:rotate(-45deg)}
.page-home .faq__answer{overflow:hidden;max-height:0;transition:max-height .3s ease,padding .3s ease}
.page-home .faq__item.is-open .faq__answer{max-height:600px;padding-bottom:36px}
.page-home .faq__answer p{font-size:var(--fs-20);line-height:var(--lh-20);color:#2a2b1c;max-width:1176px}

/* ==================================================================
   АДАПТИВ (фикс-брейкпоинты)
   ================================================================== */
/* ---- ПЛАНШЕТ (Figma@760, слой расширен до 1080 чтобы покрыть iPad Pro 1024) ---- */
@media (max-width:1080px){
  /* Figma-канва планшета = 760px с боковым отступом 24px (контент 712px).
     Наш clamp даёт ~46px → контент уже, широкие заголовки не влезают в строку.
     Приводим отступ к фигмовскому, чтобы секции совпадали 1:1. */
  .page-home .container{padding-inline:24px}

  .page-home .sec-title,
  .page-home .comm__title,.page-home .faq__title{font-size:44px;line-height:52px}
  /* Hero «Создаем участки…» — Figma@760: fs40/lh40, 2 строки */
  .page-home .hero__about-title,.page-home .hero__about-title .acc{font-size:40px;line-height:40px}
  /* Философия «Собственный уют…» — Figma@760: fs60/lh72, 1 строка.
     Наш боковой отступ шире фигмовского (24px), поэтому 60px не влезает в одну строку —
     при фигмовском отступе 24px (контент 712px) 60px помещается в строку как в макете. */
  .page-home .philos__title{font-size:60px;line-height:72px}
  /* ≤900: заголовок в стек (абсолютные px-строки налезали на промежуточных ширинах,
     напр. окно Safari ~800. Ставим flow-стек уже здесь, не только на ≤600). */
  .page-home .hero__headline{height:auto;display:flex;flex-direction:column}
  .page-home .hero__title{position:static;height:auto;display:flex;flex-direction:column;gap:2px;order:2}
  .page-home .hero__line,.page-home .hero__line .acc{position:static;font-size:48px;line-height:52px;white-space:normal}
  .page-home .hero__tag{position:static;order:1;margin:0 0 16px;align-self:flex-start;top:auto;left:auto}
  .page-home .hero__social{position:static;order:3;margin-top:16px;top:auto;right:auto;align-self:flex-start}
  .page-home .hero__top{height:auto;min-height:560px}
  /* Фото-зазор под панелью карточек до бежевой «О компании» (Figma: ~36px).
     Без него на 601–900 панель приклеивалась к бежевой секции (видно в узком окне Safari). */
  .page-home .hero__top-inner{padding-bottom:40px}

  /* Фич-карточка hero: 2×2 сетка (Эко|Инфра / Транспорт|кнопка), тёмная плашка */
  /* R-47: полупрозрачное блюр-стекло (как в макете — сквозь плашку виден размытый фон) */
  .page-home .hero__features{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:24px;
    background:rgba(42,43,28,.48);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .page-home .hero__feature{flex:none}
  .page-home .hero__feat-btn{width:100%;justify-content:center;align-self:center}

  /* Круги «О компании» в один ряд с нахлёстом (не сваливать в стек) */
  .page-home .hero__circle{width:240px;height:240px;padding:24px;gap:10px}
  .page-home .hero__circle-title{font-size:24px;line-height:24px}
  .page-home .hero__circle-title--lg{font-size:28px;line-height:28px}
  .page-home .hero__circle-text{font-size:18px;line-height:22px}

  /* why остаётся 2 колонки (чередование фото/текст) — не трогаем grid.
     Figma@760: фото landscape 373×265, карточка padding 16, текст тела 20/24. */
  /* Планшет: грид на пару (вариант A). Фото — пол min-height; карточка min-content
     (не обрежет текст), паддинг под канву 760. Единую высоту доводит JS. */
  .page-home .why__media{min-height:220px;aspect-ratio:auto}
  .page-home .why__card{min-height:min-content;padding:20px}
  .page-home .why__card-title{font-size:32px;line-height:38px}
  .page-home .why__card-text{font-size:16px;line-height:24px}

  /* Коммуникации: большое фото сверху, затем список карточек */
  .page-home .comm__grid{grid-template-columns:1fr}
  .page-home .comm__photo{order:-1;min-height:320px}

  /* Оплата остаётся 2×2 — grid не трогаем */

  .page-home .philos__slide{flex-basis:88%;height:auto;aspect-ratio:1029/540}
}

@media (max-width:600px){
  /* Галерея «Философия»: на узком экране слайд 16:9 слишком низкий — делаем выше (4:3), фото читается */
  .page-home .philos__slide{aspect-ratio:4/3;min-height:280px}
}

@media (max-width:760px){
  /* Круги «О компании» выступают вниз на -140px → даём поселкам верхний отступ,
     чтобы кикер «Поселки в продаже» не уходил под круги (Figma@760: кикер виден) */
  .page-home .poselki{padding:180px 0 56px}
  .page-home .pcard{flex-basis:82%;max-width:82%}
  .page-home .location,.page-home .comm,.page-home .why,.page-home .philos,.page-home .pay,.page-home .faq{padding:56px 0}
}

/* ---- МОБИЛА (Figma@390): одноколоночный стек ---- */
@media (max-width:600px){
  /* сброс планшетного отступа 24px — на мобиле возвращаем узкий боковой отступ (Figma@390: 20px) */
  .page-home .container{padding-inline:20px}
  .page-home .sec-title,
  .page-home .comm__title,.page-home .faq__title,.page-home .poselki__title{font-size:32px;line-height:38px}
  /* Hero «Создаем участки…» — Figma@390: fs36/lh36. Слово «профессионализмом» не рвём. */
  .page-home .hero__about-title,.page-home .hero__about-title .acc{font-size:min(34px,8vw);line-height:1.12;
    overflow-wrap:normal;word-break:normal;hyphens:none}
  /* Hero: убираем staggered-абсолют, ставим потоком (макет 390) */
  .page-home .hero__headline{height:auto;display:flex;flex-direction:column}
  .page-home .hero__title{position:static;height:auto;display:flex;flex-direction:column;gap:2px;order:2}
  .page-home .hero__line,.page-home .hero__line .acc{position:static;font-size:36px;line-height:40px;white-space:normal}
  /* Бейдж локации — над заголовком (Figma@390) */
  .page-home .hero__tag{position:static;order:1;margin:0 0 16px;align-self:flex-start}
  .page-home .hero__social{position:static;order:3;margin-top:16px}
  /* Мобила: круги не выступают (margin-bottom:0) → возвращаем обычный отступ */
  .page-home .poselki{padding-top:56px}

  /* R-48: фото-зазор между hero-карточками и «О компании» (как в макете) */
  .page-home .hero__top-inner{padding-bottom:40px}

  /* «О компании» — выключка влево */
  .page-home .hero__about{align-items:flex-start;text-align:left}

  /* Фич-карточка — в один столбец, кнопка на всю ширину */
  .page-home .hero__features{grid-template-columns:1fr}

  /* R-50: стрелки карусели «Посёлки» — под карточками, по центру.
     display:contents «распаковывает» head, чтобы sec-head/стрелки стали
     флекс-детьми контейнера и переупорядочивались вокруг трека. */
  .page-home .poselki [data-slider]{display:flex;flex-direction:column}
  .page-home .poselki__head{display:contents}
  .page-home .poselki .sec-head{order:0;margin-bottom:24px}
  .page-home .poselki__track{order:1}
  .page-home .poselki__arrows{order:2;justify-content:center;margin-top:24px}

  /* Круги — вертикальный стек с нахлёстом */
  .page-home .hero__circles{flex-direction:column;margin-bottom:0}
  .page-home .hero__circle{width:300px;height:300px}
  .page-home .hero__circle+.hero__circle{margin-left:0;margin-top:-40px}

  /* R-51: заголовок «Почему» — по левому краю (в макете не центр) */
  .page-home .why__head{align-items:flex-start;text-align:left}
  /* why — стек, фото всегда над карточкой. Сетку why__items выключаем (единая сетка
     только для планшета/десктопа), why__row снова flex-колонка. */
  .page-home .why__items{display:flex;flex-direction:column}
  .page-home .why__row{display:flex;flex-direction:column}
  /* R-51: фото перед каждой карточкой. aspect-ratio на пустом флекс-элементе
     давало высоту 0 → задаём высоту явно от ширины контента (Figma ~350×262). */
  .page-home .why__media{order:-1;width:100%;align-self:stretch;aspect-ratio:auto;height:calc((100vw - 40px) * .748);min-height:200px}
  .page-home .why__card-title{font-size:28px;line-height:34px}
  /* Figma@390: текст тела карточек — 16/24 (мельче, ~6 слов в строку) */
  .page-home .why__card-text{font-size:16px;line-height:24px}

  /* Коммуникации: карточки вертикальные (фото сверху, подпись по центру) */
  .page-home .comm__item{flex-direction:column;align-items:stretch;min-height:0}
  .page-home .comm__thumb{flex:none;width:100%;height:200px}
  .page-home .comm__label{text-align:center}

  /* Оплата — один столбец, кнопка на всю ширину */
  .page-home .pay__grid{grid-template-columns:1fr}
  .page-home .pay__btn,.page-home .why__btn{width:100%;justify-content:center}

  /* R-52: плашка переключателей — в нижний левый угол фото */
  .page-home .philos__nav{left:16px;bottom:16px}
  /* Философия: карточка под фото, бейдж над заголовком, две колонки сохраняются */
  .page-home .philos__card{position:static;width:100%;margin-top:20px}
  .page-home .philos__card-top{flex-direction:column;align-items:flex-start}
  .page-home .philos__tab{order:-1}
  .page-home .pcard{flex-basis:88%;max-width:88%}
}

@media (max-width:390px){
  .page-home .location__btn{position:static;margin-top:16px}
  .page-home .faq__q{font-size:20px;line-height:26px}
}