/* ГЛАВНАЯ: только раскладка и блоки этой страницы (hero, о компании, цифры, качество, вопросы). Общие компоненты — в components.css */
.hero{position:relative;display:flex;align-items:flex-end;min-height:calc(100svh - var(--header-h) - var(--bottom-nav-h));color:var(--c-white);background:var(--c-dark);overflow:hidden}
.hero__bg,.hero__bg video,.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:var(--grad-hero)}
.hero__in{position:relative;width:100%;padding-block:var(--sp-gap) var(--sp-section)}
.hero h1{margin-bottom:var(--sp-gap);font-size:var(--fs-h1);font-weight:400;line-height:var(--lh-head);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero .tile{padding:calc(var(--sp-inner)*.75) var(--sp-inner)}
.hero .tile div span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero__tiles{display:grid;gap:calc(var(--sp-gap)*.6);margin-bottom:var(--sp-gap)}
@media (min-width:768px){
  .hero__shade{background:linear-gradient(90deg,rgba(20,38,22,.62) 0%,rgba(20,38,22,.32) 45%,rgba(20,38,22,.05) 75%),linear-gradient(180deg,rgba(20,38,22,.35) 0%,rgba(20,38,22,0) 30%,rgba(20,38,22,.35) 100%)}
  .hero{min-height:100svh}
  .hero__bg video,.hero__bg img{object-position:right center}   /* люди в кадре справа: при обрезке по бокам лицо остаётся целым */
  .hero__in{padding-top:calc(var(--header-h) + var(--sp-gap))}
  .hero__tiles,.hero h1{max-width:34rem}
  .hero__in{padding-bottom:calc(var(--sp-section)*1.2)}
}
.about{display:grid;gap:var(--sp-head)}
@media (min-width:768px){
  .about{grid-template-columns:1.1fr .9fr;align-items:center}
}
.about h2{font-size:var(--fs-h2);line-height:var(--lh-head);font-weight:300;color:var(--c-forest);margin:.4em 0 .6em}
.about p{color:var(--c-muted)}
.facts{display:grid;gap:var(--sp-gap);margin-top:var(--sp-head)}
.fact b{display:block;font-weight:600}
.fact span{color:var(--c-muted);font-size:var(--fs-sm)}
.about__media{position:relative;border-radius:var(--radius);aspect-ratio:1;box-shadow:var(--shadow-lift);background:var(--c-tint)}
.about__media::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--c-tint);transform:translate(var(--sp-gap),var(--sp-gap));z-index:-1}
.about__media img,.about__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.about{isolation:isolate}
.about__media{margin:0 var(--sp-gap) var(--sp-gap) 0}
.quality{display:grid;gap:var(--sp-head)}
@media (min-width:768px){
  .quality{grid-template-columns:1fr minmax(0,320px);align-items:center}
}
.quality .head{text-align:left;margin-bottom:var(--sp-gap)}
.quality p{color:var(--c-muted);margin-bottom:var(--sp-gap)}
.cert{display:block;padding:var(--sp-inner);border-radius:var(--radius);background:var(--c-white);box-shadow:var(--shadow-lift);text-align:center;text-decoration:none;color:var(--c-muted);font-size:var(--fs-cap)}
.cert img{width:100%;height:auto;border-radius:calc(var(--radius)*.5);margin-bottom:.6em}
.cert span{min-height:var(--tap);display:grid;place-items:center}
@media (max-width:767px){   /* телефон: сертификат строкой с миниатюрой, полный — по нажатию */
  .cert{display:flex;align-items:center;gap:var(--sp-gap);padding:calc(var(--sp-inner)*.6);text-align:left}
  .cert img{flex:none;width:5.5rem;margin:0}
  .cert span{place-items:center start}
}
.hero .tile{align-items:center;gap:var(--sp-inner);background:rgba(18,34,20,.38);color:var(--c-white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 8px 24px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.hero .tile b{font-weight:500}
.hero .tile div span{color:rgba(255,255,255,.82)}
.hero .tile .ico{background:rgba(255,255,255,.18);color:var(--c-white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
@media (min-width:1024px){
  .hero{align-items:stretch}
  .hero__in{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding-bottom:var(--sp-head)}
  .hero h1{order:1;margin-bottom:var(--sp-head);font-size:var(--fs-hero);font-weight:300;line-height:1.08;letter-spacing:-.01em}
  .hero__cta{order:2;margin-bottom:calc(var(--sp-head) * 1.6)}
  .hero__cta .btn{min-height:var(--btn-h);padding-inline:2em}
  .hero__tiles{order:3;max-width:none;width:100%;margin:0;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:calc(var(--radius)*1.4);background:rgba(18,34,20,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);overflow:hidden}
  .hero .tile{flex-direction:row;align-items:center;gap:var(--sp-inner);border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero .tile+.tile{box-shadow:inset 1px 0 0 rgba(255,255,255,.18)}
  .hero .tile div span{font-size:var(--fs-sm)}
}
@media (min-width:1024px){
  .hero .tile{padding:var(--sp-inner) var(--sp-inner)}
  .hero .tile div span{display:block;overflow:visible}
}
@media (min-width:1024px){
  .hero h1{text-wrap:balance;max-width:20ch}
}
.quality .head h2::after{margin-left:0}
.facts .tile{padding:.15em 0 .15em var(--sp-inner);border-radius:0;background:none;box-shadow:none;border-left:3px solid var(--c-green-bright)}
.facts .tile b{font-size:var(--fs-body)}
.quality .list li{border-radius:var(--radius);background:var(--c-mist);box-shadow:none}
.quality .list .ico{flex:none;--ico-box:1.6em;--ico-size:1.5em;color:var(--c-green-dark)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-gap)}
@media (max-width:767px){
  .hero__cta .btn--glass{display:none}
}
.section--lines{padding-bottom:calc(var(--sp-section) * .6)}
.faqwrap{display:grid;gap:var(--sp-head)}
@media (max-width:767px){   /* телефон: сначала вопросы, звонок — после них */
  .faqwrap{gap:0}
  .faqwrap__side{display:contents}
  .faqwrap__side .tag{justify-self:start}
  .faq{order:1}
  .faq-call{order:2;margin-top:var(--sp-head)}
}
.faqwrap__side .tag{margin-bottom:.8em}
.faqwrap__side h2{margin-bottom:var(--sp-gap);font-size:var(--fs-h2);line-height:var(--lh-head);font-weight:300;color:var(--c-forest)}
/* звонок — акцентная карточка: телефон не теряется рядом со списком вопросов */
.faq-call{display:grid;gap:var(--sp-gap);max-width:26rem;padding:var(--sp-inner);border-radius:var(--radius);background:var(--c-forest);color:var(--c-white);box-shadow:var(--shadow-lift)}
.faq-call p{color:var(--c-on-dark)}
@media (min-width:1024px){
  .faqwrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(var(--sp-head) * 1.6);align-items:start}
  .faqwrap__side{position:sticky;top:calc(var(--header-h) + var(--sp-gap))}
}
@media (max-width:767px){
  main{display:flex;flex-direction:column}
  main>*{order:3}
  main>.hero{order:0}
  main>#popular{order:1}
  main>.section--lines{order:2}
}
.reviews-sec{background:linear-gradient(180deg,var(--c-mist),var(--c-white))}
/* популярные: на главной только полные ряды — 4 на телефоне, 6 в три колонки, 8 в четыре; остальное в каталоге */
@media (max-width:599px){#popular .grid--products>.card:nth-child(n+5){display:none}}
@media (min-width:600px) and (max-width:1023px){#popular .grid--products>.card:nth-child(n+7){display:none}}