/* ============================================================
   Блоки главной по ТЗ сайт4: шаги, отзывы, категории, FOMO,
   «Всё о скупке», SEO-закрытие
   ============================================================ */
.sec-h2{ font-size:38px; line-height:1.14; font-weight:800; color:var(--p-ink); margin:0; letter-spacing:-.01em; }
.sec-lead{ margin:10px 0 0; font-size:17px; color:var(--p-ink-2); line-height:1.5; }
.btn-outline4{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--p-ink); border:1px solid var(--p-border);
  border-radius:var(--p-r-pill); padding:13px 24px; font-weight:700; font-size:15px; text-decoration:none;
  transition:.18s ease; cursor:pointer;
}
.btn-outline4:hover{ border-color:var(--p-green-2); color:var(--p-green); }

/* ---------------- ТРИ ШАГА ---------------- */
.steps3{ background:#fff; padding:64px 0; }
.steps3__head{ text-align:center; margin-bottom:34px; }
.steps3__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.steps3__card{
  display:grid; grid-template-columns:1fr 132px; gap:16px; align-items:stretch;
  background:var(--p-bg); border:1px solid var(--p-border); border-radius:var(--p-r-lg);
  padding:22px; box-shadow:var(--p-sh); transition:.2s ease;
}
.steps3__card:hover{ box-shadow:var(--p-sh-mid); transform:translateY(-2px); }
.steps3__body{ display:flex; flex-direction:column; min-width:0; }
.steps3__num{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:50%; background:var(--p-green); color:#fff; font-weight:800; font-size:15px; margin-bottom:12px;
}
.steps3__ic{ color:var(--p-green-2); margin-bottom:8px; }
.steps3__card h3{ margin:0 0 8px; font-size:19px; font-weight:800; color:var(--p-ink); }
.steps3__card p{ margin:0 0 14px; font-size:14.5px; line-height:1.55; color:var(--p-ink-2); }
.steps3__tag{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  background:var(--p-green-sf); color:var(--p-green); border-radius:var(--p-r-pill);
  padding:8px 13px; font-size:12.5px; font-weight:700;
}
.steps3__photo{ border-radius:var(--p-r); overflow:hidden; background:var(--p-green-sf); aspect-ratio:1/1; }
.steps3__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.steps3__photo.is-empty{ background:linear-gradient(135deg,var(--p-green-sf),#fff); }
.steps3__photo.is-empty img{ display:none; }

/* ---------------- ОТЗЫВЫ ---------------- */
.reviews2{ background:var(--p-bg); padding:64px 0; }
.reviews2__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.reviews2__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rev-card{
  background:#fff; border:1px solid var(--p-border); border-radius:var(--p-r-lg);
  padding:22px; box-shadow:var(--p-sh); display:flex; flex-direction:column;
}
.rev-card__stars{ display:flex; gap:3px; margin-bottom:12px; }
.rev-card__stars svg{ width:17px; height:17px; fill:#DFE3E0; }
.rev-card__stars svg.on{ fill:var(--p-gold); }
.rev-card__text{ margin:0 0 16px; font-size:15px; line-height:1.6; color:var(--p-ink); flex:1; }
.rev-card__foot{ display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--p-border); padding-top:12px; }
.rev-card__foot b{ font-size:14.5px; color:var(--p-ink); }
.rev-card__foot span{ font-size:12.5px; color:var(--p-ink-2); }
.reviews2 .trust-line{ margin-top:22px; }
.reviews2__slogan{
  margin-top:22px; display:flex; align-items:center; justify-content:flex-end; gap:12px;
  color:var(--p-green); font-size:19px; font-weight:800;
}
.reviews2__heart{ color:var(--p-cta); display:inline-flex; }
.reviews2__heart svg{ fill:rgba(239,49,36,.12); }

/* ---------------- КАТЕГОРИИ ---------------- */
.cats4{ background:#fff; padding:64px 0; }
.cats4__head{ text-align:center; max-width:760px; margin:0 auto 34px; }
.cats4__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cat-card{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--p-bg); border:1px solid var(--p-border); border-radius:var(--p-r-lg);
  padding:22px; transition:.2s ease; min-height:100%;
}
.cat-card:hover{ background:#fff; box-shadow:var(--p-sh-mid); transform:translateY(-3px); border-color:var(--p-green-2); }
.cat-card__ic{
  display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px;
  border-radius:var(--p-r); background:#fff; color:var(--p-green); margin-bottom:14px;
  border:1px solid var(--p-border);
}
.cat-card:hover .cat-card__ic{ background:var(--p-green-sf); border-color:transparent; }
.cat-card__t{ font-size:18px; font-weight:800; color:var(--p-ink); margin-bottom:8px; }
.cat-card__d{ font-size:13.5px; line-height:1.55; color:var(--p-ink-2); flex:1; }
.cat-card__more{ margin-top:14px; font-size:14px; font-weight:700; color:var(--p-green-2); }

/* ---------------- FOMO ---------------- */
.fomo{ background:#FFF8E7; padding:56px 0; }
.fomo__box{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;
  background:#fff; border-radius:var(--p-r-lg); padding:34px; box-shadow:var(--p-sh);
  border:1px solid rgba(245,179,0,.28);
}
.fomo__badge{
  display:inline-block; background:var(--p-gold); color:#131614; font-weight:800; font-size:14px;
  padding:9px 16px; border-radius:var(--p-r-pill); margin-bottom:14px;
}
.fomo__text p{ margin:12px 0 22px; font-size:16px; line-height:1.55; color:var(--p-ink-2); }
.fomo__cta{ min-width:230px; }
.fomo__art{ border-radius:var(--p-r); overflow:hidden; aspect-ratio:16/10; background:linear-gradient(135deg,#FFF3CF,#FFE49B); }
.fomo__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.fomo__art.is-empty img{ display:none; }

/* ---------------- ВСЁ О СКУПКЕ ---------------- */
.allabout{ background:var(--p-bg); padding:64px 0; }
.allabout__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.seg--small .seg__btn{ padding:9px 16px; font-size:14.5px; }
.allabout__pane.is-hidden{ display:none; }

.faq2{ display:grid; gap:10px; }
.faq2__item{
  background:#fff; border:1px solid var(--p-border); border-radius:var(--p-r); padding:0 20px;
  transition:.18s ease;
}
.faq2__item[open]{ box-shadow:var(--p-sh); border-color:var(--p-green-2); }
.faq2__item summary{
  list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative;
  font-size:16.5px; font-weight:700; color:var(--p-ink);
}
.faq2__item summary::-webkit-details-marker{ display:none; }
.faq2__sign{ position:absolute; right:0; top:50%; width:18px; height:18px; margin-top:-9px; }
.faq2__sign::before,
.faq2__sign::after{ content:''; position:absolute; background:var(--p-green); border-radius:2px; transition:.2s ease; }
.faq2__sign::before{ left:0; top:8px; width:18px; height:2px; }
.faq2__sign::after{ left:8px; top:0; width:2px; height:18px; }
.faq2__item[open] .faq2__sign::after{ transform:scaleY(0); }
.faq2__ans{ padding:0 0 18px; font-size:15px; line-height:1.62; color:var(--p-ink-2); }
.faq2__ans p{ margin:0 0 10px; }
.faq2__foot{
  margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--p-border); border-radius:var(--p-r-lg); padding:22px 24px;
}
.faq2__foot p{ margin:0; font-size:15px; color:var(--p-ink-2); max-width:620px; line-height:1.55; }

.arts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.art-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--p-border);
  border-radius:var(--p-r-lg); overflow:hidden; text-decoration:none; transition:.2s ease;
}
.art-card:hover{ box-shadow:var(--p-sh-mid); transform:translateY(-2px); }
.art-card__img{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--p-green-sf); }
.art-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.art-card__t{ padding:16px 18px 6px; font-size:16px; font-weight:700; color:var(--p-ink); line-height:1.4; }
.art-card__d{ padding:0 18px 16px; font-size:13px; color:var(--p-ink-2); }

.docs{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.doc-card{ background:#fff; border:1px solid var(--p-border); border-radius:var(--p-r); padding:12px; text-decoration:none; color:var(--p-ink); font-size:13.5px; }
.doc-card img{ width:100%; height:auto; border-radius:var(--p-r-sm); display:block; margin-bottom:8px; }
.docs-list{ background:#fff; border:1px solid var(--p-border); border-radius:var(--p-r-lg); padding:26px; }
.docs-list p{ margin:0 0 14px; font-size:16px; color:var(--p-ink); font-weight:600; }
.docs-list ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.docs-list li{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--p-ink-2); }
.docs-list svg{ color:var(--p-green); flex:0 0 auto; }

/* ---------------- SEO ---------------- */
.seoblock{ background:#fff; padding:60px 0 64px; }
.seoblock__h2{ max-width:900px; font-size:32px; }
.seoblock__lead{ margin:16px 0 30px; max-width:900px; font-size:16px; line-height:1.65; color:var(--p-ink-2); }
.seoblock__cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px 36px; }
.seoblock__item h3{ margin:0 0 8px; font-size:17px; font-weight:800; color:var(--p-ink); display:flex; gap:9px; align-items:baseline; }
.seoblock__tick{ color:var(--p-green-2); }
.seoblock__item p{ margin:0; font-size:14.5px; line-height:1.65; color:var(--p-ink-2); }
.seoblock__foot{
  margin-top:32px; background:var(--p-bg); border-radius:var(--p-r-lg); padding:26px;
}
.seoblock__foot b{ font-size:18px; color:var(--p-ink); }
.seoblock__foot p{ margin:8px 0 18px; font-size:15px; color:var(--p-ink-2); line-height:1.6; max-width:760px; }
.seoblock__btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------------- адаптив ---------------- */
@media (max-width:1100px){
  .sec-h2{ font-size:30px; }
  .steps3__grid{ grid-template-columns:1fr; }
  .steps3__card{ grid-template-columns:1fr 160px; }
  .reviews2__grid, .arts{ grid-template-columns:repeat(2,1fr); }
  .cats4__grid{ grid-template-columns:repeat(3,1fr); }
  .docs{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px){
  .sec-h2{ font-size:25px; }
  .sec-lead{ font-size:15.5px; }
  .steps3, .reviews2, .cats4, .allabout, .seoblock{ padding:44px 0; }
  .steps3__card{ grid-template-columns:1fr; }
  .steps3__photo{ aspect-ratio:16/9; order:-1; }
  .reviews2__grid, .arts, .docs{ grid-template-columns:1fr; }
  .reviews2__head{ flex-direction:column; align-items:stretch; }
  .reviews2__head .btn-outline4{ width:100%; }
  .reviews2__slogan{ justify-content:center; text-align:center; font-size:17px; }
  .cats4__grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .cat-card{ padding:16px; }
  .cat-card__ic{ width:48px; height:48px; margin-bottom:10px; }
  .cat-card__t{ font-size:15.5px; }
  .cat-card__d{ font-size:12.5px; }
  .fomo__box{ grid-template-columns:1fr; padding:22px; }
  .fomo__art{ order:-1; }
  .fomo__cta{ width:100%; }
  .allabout__head{ flex-direction:column; align-items:stretch; }
  .seg--small{ width:100%; }
  .seg--small .seg__btn{ flex:1 1 0; padding:10px 4px; font-size:13px; }
  .faq2__item summary{ font-size:15.5px; padding:16px 30px 16px 0; }
  .faq2__foot{ flex-direction:column; align-items:stretch; text-align:left; }
  .faq2__foot .btn{ width:100%; }
  .seoblock__cols{ grid-template-columns:1fr; gap:20px; }
  .seoblock__h2{ font-size:24px; }
  .seoblock__btns .btn{ width:100%; }
}


/* ---------- доводка 12.09 ---------- */
.steps3__card--nophoto{ grid-template-columns:1fr; }
.office-perks{
  list-style:none; margin:14px 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px;
}
.office-perks li{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--p-green-sf); color:var(--p-green); border-radius:var(--p-r-pill);
  padding:8px 13px; font-size:12.5px; font-weight:700;
}
.office-perks svg{ flex:0 0 auto; }

/* FOMO без фото — фирменная плашка вместо пустоты */
.fomo__art--stub{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#FFD874,var(--p-gold));
}
.fomo__stub{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px; text-align:center; }
.fomo__stub-sum{ font-size:44px; font-weight:800; color:#131614; letter-spacing:-.02em; line-height:1; }
.fomo__stub-sum i{ font-style:normal; font-size:22px; font-weight:700; }
.fomo__stub-cap{ font-size:14px; font-weight:700; color:#4a3d10; }

/* Категории на мобиле: ровная сетка, текст не рвётся на куски */
@media (max-width:767px){
  .cat-card__d{
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
    overflow:hidden; min-height:66px;
  }
  .cat-card__t{ min-height:38px; }
  .office-perks li{ font-size:12px; padding:7px 11px; }
  .fomo__stub-sum{ font-size:34px; }
}


/* Подсказка МАКС на мобиле закрывала кнопки первого экрана — оставляем только саму кнопку. */
@media (max-width:767px){
  .max-widget__bubble,
  .max-widget__tip,
  .max-widget__hint,
  .max-widget__popup{ display:none !important; }
}


/* ============================================================
   hero-mobile-fold: по ТЗ сайт4 ценовой блок — главный conversion trigger,
   на телефоне он обязан попадать на первый экран. Поджимаем всё, что выше.
   ============================================================ */
@media (max-width:767px){
  .hero .hero-left > .pill{ margin-bottom:8px !important; font-size:11px !important; padding:6px 12px !important; }
  .hero .hero-h1{ font-size:26px !important; line-height:1.12 !important; margin-bottom:10px !important; }
  .hero .hero-h1 .sub{ font-size:14.5px !important; line-height:1.4 !important; margin-top:10px !important; }

  .hero .hero-quick{ margin:12px 0 14px !important; gap:8px 16px !important; }
  .hero .hero-quick a{ font-size:14.5px !important; padding-bottom:4px !important; }

  .hero .hero-contacts{ gap:8px !important; margin-bottom:14px !important; }
  .hero .hero-contact{ padding:10px 12px !important; border-radius:14px !important; }
  .hero .hero-contact__ic{ width:36px !important; height:36px !important; }
  .hero .hero-contact__ic svg{ width:18px !important; height:18px !important; }
  .hero .hero-contact__body b{ font-size:14.5px !important; }
  .hero .hero-contact__body em{ font-size:13px !important; }
  .hero .hero-contact--reserve{ display:none !important; }

  /* ценовой блок компактнее, но цифра по-прежнему доминирует */
  .hero .hero-price{ padding:16px !important; }
  .hero .hero-price__row{ gap:8px !important; margin-bottom:6px !important; }
  .hero .hero-price__label{ font-size:13px !important; }
  .hero .hero-price__row .pill{ font-size:10px !important; padding:5px 10px !important; white-space:nowrap !important; }
  .hero .hero-price__main{
    display:flex !important; flex-wrap:wrap !important; align-items:baseline !important;
    gap:6px !important; margin:4px 0 !important;
  }
  .hero .hero-price__metal{ font-size:16px !important; }
  .hero .hero-price__value{ font-size:46px !important; line-height:1 !important; }
  .hero .hero-price__unit{ font-size:20px !important; }
  .hero .hero-price__meta{ margin-top:4px !important; font-size:12px !important; }
  .hero .hero-price__note{ font-size:12.5px !important; line-height:1.4 !important; margin:6px 0 10px !important; }
  .hero .hero-price__cta{ width:100% !important; padding:13px 18px !important; font-size:15px !important; }

  /* строка цен под шапкой съедала первый экран */
  .site-header .header-cats{ padding-top:6px !important; padding-bottom:6px !important; }
  .site-header .header-cats a{ font-size:13px !important; }
}


/* hero-mobile-fold-2: прошлые правила перебивались более специфичными — поднимаем вес. */
@media (max-width:767px){
  html body .hero .hero-left .hero-h1{ font-size:25px !important; line-height:1.1 !important; margin:0 0 8px !important; }
  html body .hero .hero-left .hero-h1 .sub{ font-size:14px !important; line-height:1.38 !important; margin-top:8px !important; display:block !important; }
  html body .hero .hero-left .hero-quick{ margin:10px 0 12px !important; gap:6px 14px !important; }
  html body .hero .hero-left .hero-quick a{ font-size:14px !important; padding-bottom:3px !important; }
  html body .hero .hero-left > .pill{ margin:0 0 8px !important; }
  html body .hero .hero-left .hero-contacts{ gap:8px !important; margin:0 0 12px !important; }
  html body .hero .hero-left .hero-contact{ padding:9px 12px !important; }
  html body .hero .hero-left .hero-price{ padding:14px !important; }
  html body .hero{ padding-top:14px !important; padding-bottom:22px !important; }

  /* Плавающая кнопка МАКС на телефоне — компактный кружок, иначе закрывает главную цифру. */
  html body .max-widget__btn{
    width:52px !important; height:52px !important; padding:0 !important;
    border-radius:50% !important; justify-content:center !important; overflow:hidden !important;
  }
  html body .max-widget__btn .max-widget__label,
  html body .max-widget__btn span:not([class*="icon"]):not([class*="ic"]){ display:none !important; }
  html body .max-widget{ right:12px !important; }
}


/* steps3-width-fix: фото распирало карточку и давало горизонтальную прокрутку */
.steps3__card{ display:grid !important; grid-template-columns: minmax(0,1fr) 132px !important; }
.steps3__card--nophoto{ grid-template-columns: minmax(0,1fr) !important; }
.steps3__photo{ width:132px !important; max-width:132px !important; }
.steps3__body{ min-width:0 !important; }
.offices-hero__map{ overflow:hidden !important; }
@media (max-width:1100px){
  .steps3__card{ grid-template-columns: minmax(0,1fr) 160px !important; }
  .steps3__photo{ width:160px !important; max-width:160px !important; }
}
@media (max-width:767px){
  .steps3__card{ grid-template-columns: minmax(0,1fr) !important; }
  .steps3__photo{ width:100% !important; max-width:100% !important; }
}


/* steps3-photo-square: по ТЗ сайт4 «в каждом блоке справа фото (квадрат)» — было мелко */
.steps3__card{ grid-template-columns: minmax(0,1fr) 190px !important; gap: 20px !important; padding: 24px !important; }
.steps3__photo{ width:190px !important; max-width:190px !important; aspect-ratio:1/1 !important; align-self:center !important; }
.steps3__photo img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; }

/* «Почему выбирают нас»: случайные жёлтые карточки выбивались из системы —
   оставляем ровную светлую сетку, акцент даёт только иконка */
html body .advantages .adv-card,
html body .advantages [class*="adv"][class*="card"]{
  background: #FFF !important;
  border: 1px solid var(--p-border) !important;
  color: var(--p-ink) !important;
  box-shadow: var(--p-sh) !important;
}
html body .advantages [class*="card"] *{ color: inherit !important; }
html body .advantages [class*="card"] p,
html body .advantages [class*="card"] .desc{ color: var(--p-ink-2) !important; }

@media (max-width:1100px){
  .steps3__card{ grid-template-columns: minmax(0,1fr) 170px !important; }
  .steps3__photo{ width:170px !important; max-width:170px !important; }
}
@media (max-width:767px){
  .steps3__card{ grid-template-columns: minmax(0,1fr) !important; padding:18px !important; }
  .steps3__photo{ width:100% !important; max-width:100% !important; aspect-ratio:16/9 !important; }
}