/* =============================================================
   Category / subpage — ночной hero по макету «Страницы»: крошки,
   pill, градиентный h1, стат-карты, фото в рамке с плавающим
   бейджем, полоса фактов; блоки features/text/related.
   ============================================================= */

/* ---------------- HERO2 (ночной) ---------------- */
.hero2 {
  position: relative;
  overflow: hidden;
  background: #0B0B0E;
  color: #F7F7F9;
}
.hero2__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #26262E 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .55;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(880px 520px at 28% 45%, black, transparent);
  mask-image: radial-gradient(880px 520px at 28% 45%, black, transparent);
}
.hero2__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* орбы статичны — постоянный дрейф грузил GPU, глазом почти не читался */
.hero2__orb--1 {
  top: -200px;
  left: 4%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(239,159,39,.15), transparent 66%);
}
.hero2__orb--2 {
  bottom: -260px;
  left: 32%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(239,159,39,.09), transparent 68%);
}

.hero2__grid {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  gap: 32px;
}
.hero2--with-photo .hero2__grid {
  grid-template-columns: 1.08fr .92fr;
}
.hero2__copy {
  padding: 64px 0 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero2__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  margin: 0 0 22px;
  width: fit-content;
  font-size: 11.5px;
  color: #9A9AA6;
  animation: rise .6s var(--ease-out) both;
}
.hero2__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ECF8E;
  animation: pulse-ok 2.6s infinite;
  flex-shrink: 0;
}

.hero2__h1 {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 800;
  color: #F7F7F9;
  line-height: 1.04;
  letter-spacing: -.04em;
  margin: 0 0 16px;
  animation: rise .7s var(--ease-out) .05s both;
}
.hero2__lead {
  font-size: 16px;
  color: #9A9AA6;
  line-height: 1.68;
  margin: 0 0 28px;
  max-width: 52ch;
  animation: rise .7s var(--ease-out) .1s both;
}

.hero2__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
  max-width: 560px;
  animation: rise .7s var(--ease-out) .15s both;
}

.hero2__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  animation: rise .7s var(--ease-out) .2s both;
}
.hero2__tel {
  border-color: rgba(255,255,255,.16);
  color: #F7F7F9;
  font-weight: 600;
}
.hero2__tel:hover:not(:disabled) {
  border-color: #EF9F27;
  color: #EF9F27;
  background: transparent;
}

/* photo — кадр с внутренней рамкой, вуалью и плавающим бейджем */
.hero2__photo {
  position: relative;
  min-height: 480px;
  overflow: hidden;
}
.hero2__photo img,
.hero2__photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.06);
  /* бесконечный floaty-зум на большом фото с filter держал огромный
     компоузер-слой активным всю прокрутку — убран ради плавности */
}
.hero2__photo-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #0B0B0E 0%, rgba(11,11,14,.6) 12%, rgba(11,11,14,.06) 54%, rgba(11,11,14,.5) 86%, rgba(11,11,14,.85) 100%),
    linear-gradient(180deg, rgba(11,11,14,.6) 0%, rgba(11,11,14,0) 32%, rgba(11,11,14,0) 66%, rgba(11,11,14,.7) 100%);
}
.hero2__photo-frame {
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  pointer-events: none;
}
.hero2__photo-tag {
  position: absolute;
  right: 38px;
  top: 38px;
  font-size: 10px;
  letter-spacing: 1.8px;
  color: rgba(247,247,249,.42);
  text-transform: uppercase;
}
.hero2__badge {
  position: absolute;
  left: 42px;
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: rgba(11,11,14,.78);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 13px 17px 13px 14px;
  box-shadow: 0 24px 54px rgba(0,0,0,.45);
}
.hero2__badge-ic {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(239,159,39,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero2__badge-ic i {
  width: 9px;
  height: 9px;
  background: #FFC46B;
  transform: rotate(45deg);
  display: block;
}
.hero2__badge-t {
  font-size: 12.5px;
  font-weight: 700;
  color: #F7F7F9;
  letter-spacing: -.015em;
  margin: 0;
}
.hero2__badge-s {
  font-size: 10.5px;
  color: #9A9AA6;
  margin: 3px 0 0;
}

/* полоса фактов под hero */
.hero2__facts {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hero2__facts-row {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.hero2__fact {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: #9A9AA6;
  white-space: nowrap;
}
.hero2__fact i {
  width: 6px;
  height: 6px;
  background: #EF9F27;
  transform: rotate(45deg);
  display: block;
  flex-shrink: 0;
}

/* ---------------- text block («Об услуге», текстовые секции) ----------------
   Узкая колонка центрируется как блок (как в макете) — иначе на широком
   экране справа остаётся пустая половина; текст внутри остаётся слева. */
.text-block { max-width: 880px; margin-inline: auto; }
.text-block h2 { font-size: var(--fs-3xl); margin-bottom: var(--s-5); }
.text-block__p {
  font-size: var(--fs-base);
  color: var(--t2);
  line-height: 1.78;
  max-width: 75ch;
  text-wrap: pretty;
}
.text-block h3 {
  font-size: 17px;
  margin: var(--s-6) 0 var(--s-2);
}

/* ---------------- features (Преимущества) ---------------- */
.feature-section h2 { font-size: var(--fs-3xl); margin-bottom: var(--s-8); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  transition: all .28s var(--ease-out);
}
.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--ac);
  box-shadow: var(--shadow-pop);
}
.feature-card__idx {
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 11px;
  color: var(--t3);
  opacity: .55;
}
.feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  padding-right: 24px;
}
.feature-card p {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  margin: 0;
}

/* FAQ-заголовок и аккордеон центрируются общими правилами faq.css */

/* ---------------- breakpoints ---------------- */
@media (max-width: 1024px) {
  .hero2--with-photo .hero2__grid { grid-template-columns: 1fr; }
  .hero2__photo { min-height: 300px; margin-bottom: 0; }
  .hero2__photo-frame { inset: 16px; }
  .hero2__badge { left: 28px; bottom: 28px; }
}
@media (max-width: 680px) {
  /* с телефона правая часть hero (фото) не показывается — сразу к делу:
     заголовок, факты, кнопки, дальше контент */
  .hero2__photo { display: none; }
  .hero2__copy { padding: 40px 0 44px; }
}
@media (max-width: 900px) {
  .feature-grid, .feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .hero2__copy { padding: 40px 0 44px; }
  .hero2__h1 { font-size: 29px; }
  .hero2__stats { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .hero2__cta { flex-direction: column; align-items: stretch; }
  .feature-grid, .feature-grid--4 { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: 1fr; }
  .hero2__facts-row { justify-content: flex-start; gap: 12px 20px; }
}

/* ---------------- галерея работ (мастерская) ---------------- */
.gallery-section h2 { font-size: var(--fs-3xl); margin-bottom: var(--s-8); }
/* flex вместо grid: неполный последний ряд (например, 2 карточки из 3)
   встаёт по центру, а не прижимается к левому краю */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.gallery-card {
  width: calc((100% - 32px) / 3);
  padding: 0;
  overflow: hidden;
  margin: 0;
}
.gallery-card__photo {
  display: block;
  height: 220px;
  position: relative;
  overflow: hidden;
}
.gallery-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9);
  transition: transform .5s var(--ease-out);
}
.gallery-card:hover .gallery-card__photo img { transform: scale(1.05); }
.gallery-card__body { padding: 22px; }
.gallery-card__body h3 {
  font-size: 16px;
  margin-bottom: 8px;
}
.gallery-card__body p {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) { .gallery-card { width: calc((100% - 16px) / 2); } }
@media (max-width: 620px) { .gallery-card { width: 100%; } }

/* ---------------- таблица тарифов / экономии ---------------- */
.rate-table__sub {
  font-size: var(--fs-sm);
  color: var(--t2);
  max-width: 60ch;
  margin: 0 0 var(--s-6);
}
.rate-table {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 20px;
  overflow: hidden;
  margin-top: var(--s-4);
}
.rate-table__row {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--bd);
}
.rate-table__row:last-child { border-bottom: none; }
.rate-table__row > span {
  flex: 1;
  font-size: var(--fs-sm);
  color: var(--t2);
  min-width: 0;
}
.rate-table__row > span:first-child { color: var(--t1); font-weight: 500; }
.rate-table__row--head {
  background: var(--s2);
}
.rate-table__row--head > span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: .02em;
}
.rate-table__note {
  font-size: var(--fs-caption);
  color: var(--t3);
  margin-top: var(--s-4);
}
@media (max-width: 560px) {
  .rate-table__row { padding: 13px 16px; gap: 8px; }
  .rate-table__row > span { font-size: 12px; }
}

/* ---------------- компактные шаги процесса ---------------- */
.steps-mini-section { background: var(--s1); border-top: 1px solid var(--bd); }
/* шаги — узкий центрированный блок, заголовок по центру */
.steps-mini__head { text-align: center; margin-bottom: 44px; }
.steps-mini__head h2 { margin-bottom: 10px; font-size: var(--fs-3xl); }
.steps-mini__sub { font-size: var(--fs-sm); color: var(--t2); margin: 0; }
.steps-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin-inline: auto;
}
.steps-mini--4 { grid-template-columns: repeat(4, 1fr); }
.steps-mini__item { text-align: center; padding: 0 8px; }
.steps-mini__num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--ac);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ac);
  box-shadow: 0 0 0 6px var(--ac-dim);
}
.steps-mini__item h3 { font-size: 15px; margin-bottom: 8px; }
.steps-mini__item p {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .steps-mini, .steps-mini--4 { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}
@media (max-width: 560px) {
  .steps-mini, .steps-mini--4 { grid-template-columns: 1fr; }
}

/* ссылка внизу feature-карточки («Подробнее →» на странице о нас) */
.feature-card__link {
  margin-top: auto;
  padding-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
}

/* «Два основных направления» — две широкие карточки */
.about-directions { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .about-directions { grid-template-columns: 1fr; } }

/* --- мобильный порядок секций раздела: hero -> калькулятор -> остальное.
   :has ограничивает правило страницами, где калькулятор вообще есть
   (браузеры без :has просто сохраняют DOM-порядок — не поломка). --- */
@media (max-width: 768px) {
  main:has(> #calc-section) { display: flex; flex-direction: column; }
  main:has(> #calc-section) > * { order: 5; }
  main:has(> #calc-section) > .hero2 { order: 1; }
  main:has(> #calc-section) > #calc-section { order: 2; }
}