/* ═══════════════════════════════════════════════════════════════
   home-hero.css — стили первого экрана главной страницы.
   Экран взят из варианта index-polished.html и перенесён в боевую
   index.html; тексты — с прежней версии главной.

   Правила намеренно вложены в .ph-hero:
   1) исходный класс .hero конфликтует с .hero из autopark.css,
      поэтому корень переименован в .ph-hero;
   2) остальные имена (hero__*, proof, shell, eyebrow, button)
      с боевыми стилями не пересекаются, но вложенность защищает
      от будущих совпадений.

   Токены polished сведены к нашим переменным из autopark.css:
   --muted → --mute, --blue-dark → --blue-d, --shell → --wrap.
   Подключать ПОСЛЕ autopark.css и site-chrome.css.
   ═══════════════════════════════════════════════════════════════ */

.ph-hero{
  --ph-white:#fff;
  --ph-line-medium:rgba(14,17,22,.18);
  --ph-radius:18px;
  position:relative;
  overflow:hidden;
  padding:80px 0 0;
  background:linear-gradient(180deg,#F8FAFC 0%,var(--paper) 100%);
}
/* Мягкое голубое свечение в правом верхнем углу */
.ph-hero::before{
  position:absolute;top:-20%;right:-12%;width:52vw;height:52vw;content:"";
  background:radial-gradient(circle,rgba(181,212,244,.42),transparent 62%);
  pointer-events:none;
}

/* Контейнер повторяет .sec-in из autopark.css ОДИН В ОДИН: та же внешняя
   ширина и те же боковые поля на тех же брейкпоинтах. Иначе первый экран
   шире остального контента: у .sec-in 1600 — это внешняя ширина с полями
   по 64px внутри (контент 1472), а формула min(100% - 128px, 1600px)
   давала контент ровно 1600 — экран выпирал на 64px с каждой стороны. */
.ph-hero .shell{
  position:relative;z-index:1;
  width:100%;
  max-width:var(--wrap,1600px);
  margin-inline:auto;
  padding:0 64px;
}
@media (min-width:1441px){ .ph-hero .shell{padding:0 80px} }
@media (max-width:991px){  .ph-hero .shell{padding:0 32px} }
@media (max-width:767px){  .ph-hero .shell{padding:0 20px} }
@media (max-width:479px){  .ph-hero .shell{padding:0 16px} }

.ph-hero__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
  padding-bottom:64px;
}

/* ── Левая колонка ── */
.ph-hero .eyebrow{
  margin:0 0 18px;color:var(--blue);
  font-size:11px;font-weight:750;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;
}
/* Кегль подобран под НАШ заголовок: он длиннее исходного из polished
   («Автопарк «под ключ» для вашей компании в любом городе РФ» против
   «Корпоративный транспорт по всей России»), и на исходных 72px
   разваливался на пять строк, выталкивая полосу показателей за сгиб. */
.ph-hero h1{
  margin:0;max-width:740px;
  font-family:'Geologica',Arial,sans-serif;font-weight:520;
  font-size:clamp(40px,3.5vw,56px);letter-spacing:-.038em;line-height:1.08;
  color:var(--ink);
}
.ph-hero h1 span{color:var(--blue)}
.ph-hero__lead{
  max-width:520px;margin:24px 0 0;
  color:var(--mute);font-size:17px;line-height:172%;
}
.ph-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ph-hero__note{margin:20px 0 0;color:var(--faint);font-size:13px;line-height:160%}

/* Кнопки первого экрана */
.ph-hero .button{
  display:inline-flex;min-height:48px;align-items:center;justify-content:center;
  padding:0 22px;border:1px solid var(--blue);border-radius:10px;
  font-family:'Geologica',sans-serif;font-size:14px;font-weight:600;line-height:100%;
  color:var(--ph-white);background:var(--blue);
  cursor:pointer;transition:background .2s,border-color .2s,transform .18s,box-shadow .18s;
}
.ph-hero .button:hover{
  background:var(--blue-d);border-color:var(--blue-d);
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(26,95,168,.22);
}
.ph-hero .button--ghost{
  color:var(--ink);background:transparent;border-color:var(--ph-line-medium);
}
.ph-hero .button--ghost:hover{
  color:var(--blue);background:var(--ph-white);
  border-color:rgba(26,95,168,.4);box-shadow:none;
}

/* ── Правая колонка: фото ── */
.ph-hero__visual{position:relative}
.ph-hero__image{
  position:relative;overflow:hidden;border-radius:var(--ph-radius);
  border:1px solid var(--line);background:var(--alt);
  aspect-ratio:3/2;                 /* пропорция фотографий клиента 1536×1024 */
  box-shadow:0 24px 60px rgba(7,30,61,.14);
}
.ph-hero__image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.ph-hero__caption{
  position:absolute;left:20px;bottom:20px;z-index:2;
  padding:12px 18px;border-radius:12px;
  background:rgba(7,30,61,.78);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
}
.ph-hero__caption span{display:block;color:rgba(255,255,255,.62);font-size:11px;line-height:130%}
.ph-hero__caption strong{
  display:block;margin-top:3px;color:#fff;
  font-family:'Geologica',sans-serif;font-size:14px;font-weight:600;line-height:130%;
}

/* ── Полоса показателей ── */
.ph-hero .proof-strip{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);border-bottom:0;
  border-radius:var(--ph-radius) var(--ph-radius) 0 0;
  background:var(--ph-white);overflow:hidden;
}
.ph-hero .proof{min-height:118px;padding:26px 28px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center}
.ph-hero .proof:last-child{border-right:0}
.ph-hero .proof strong{
  display:block;font-family:'Geologica',sans-serif;font-size:21px;font-weight:560;
  letter-spacing:-.025em;color:var(--ink);line-height:126%;
}
.ph-hero .proof span{display:block;margin-top:4px;color:var(--mute);font-size:12px;line-height:150%}

/* ── Адаптив ── */
@media (max-width:1100px){
  .ph-hero{padding-top:58px}
  .ph-hero__grid{grid-template-columns:1fr;gap:40px;padding-bottom:48px}
  .ph-hero h1{font-size:44px;max-width:none}
  .ph-hero__lead{max-width:none}
  .ph-hero .proof{padding-inline:18px}
}
@media (max-width:767px){
  .ph-hero{padding-top:42px}
  .ph-hero h1{font-size:clamp(34px,8.5vw,44px)}
  .ph-hero .proof-strip{grid-template-columns:1fr}
  .ph-hero .proof{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .ph-hero .proof:last-child{border-bottom:0}
}
@media (max-width:479px){
  .ph-hero__actions .button{width:100%}
  .ph-hero .proof{min-height:102px;padding:20px 15px}
  .ph-hero .proof strong{font-size:17px}
}