/* =========================================================
   POLEVEKTOR v4 — cinematic layer (поверх style.css)
   GSAP/ScrollTrigger + Three.js. Прогрессивное улучшение.
   Контент виден без JS; анимации добавляются сверху.
   ========================================================= */

:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-io:cubic-bezier(0.77,0,0.175,1);
  --maxw:1280px;
}

/* ---------- HERO (кинематографичный) ---------- */
.vhero{
  position:relative; min-height:100svh; overflow:clip;
  background:linear-gradient(180deg,#0E1115 0%,#16191E 55%,#1A1D22 100%);
  color:#fff; display:flex; align-items:center;
  isolation:isolate;
}
/* Фотореалистичная картинка-фон hero */
.vhero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.vhero__media img{
  width:100%; height:100%; object-fit:cover; object-position:62% center;
  transform:scale(1.06) translate3d(0,0,0); will-change:transform;
  transition:transform .25s var(--ease-out);
}
/* Видео-фон hero (десктоп) — поверх картинки-постера */
.vhero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0; transition:opacity 1s var(--ease-out); }
.vhero__video.is-on{ opacity:1; }
/* Скрим: затемнение слева/снизу под текст */
.vhero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(13,15,18,.92) 0%, rgba(13,15,18,.62) 32%, rgba(13,15,18,.06) 60%, transparent 80%),
    linear-gradient(0deg, rgba(13,15,18,.58) 0%, transparent 40%);
}
@media (max-width:760px){
  .vhero__media img{ object-position:center 20%; transform:scale(1.04); }
  /* видео показываем и на мобиле (вертикальный journey-mobile.mp4 подставляет main.js) */
  .vhero__scrim{ background:linear-gradient(180deg, rgba(13,15,18,.5) 0%, rgba(13,15,18,.42) 36%, rgba(13,15,18,.74) 70%, rgba(13,15,18,.96) 100%); }
  .vhero__inner{ padding-top:104px; }
  .vhero__title{ font-size:clamp(26px,7.0vw,44px); }
  .vhero__lead{ font-size:15px; }
  .vhero__eyebrow{ font-size:11px; letter-spacing:.16em; }
  .vhero__title, .vhero__lead, .vhero__eyebrow{ text-shadow:0 2px 16px rgba(0,0,0,.55); }
}
.vhero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw);
  margin:0 auto; padding:120px 24px 80px; }
.vhero__eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 22px;
  font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.vhero__eyebrow .dot{ width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(240,168,26,.18); }
.vhero__title{
  margin:0; max-width:18ch; font-weight:800; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(40px,6.4vw,84px); color:#fff;
  overflow-wrap:break-word; hyphens:manual;
}
.vhero__title .accent{
  background:linear-gradient(96deg,#9CC79A 0%,#7ACB1D 34%,#F0D21F 68%,#F0A81A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vhero__lead{ margin:24px 0 0; max-width:60ch; font-size:clamp(15px,1.25vw,19px);
  line-height:1.65; color:rgba(255,255,255,.8); }
.vhero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.vhero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5);
  display:flex; flex-direction:column; align-items:center; gap:8px; }
.vhero__scroll i{ width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.6),transparent);
  animation:scrollpulse 1.8s var(--ease-io) infinite; }
@keyframes scrollpulse{ 0%{transform:scaleY(.3);transform-origin:top;opacity:.3}
  50%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(.3);transform-origin:bottom;opacity:.3} }

/* ---------- Цепочка обработки (pinned scroll) ---------- */
.chain{ position:relative; background:#0F1216; color:#fff; }
.chain__head{ max-width:var(--maxw); margin:0 auto; padding:96px 24px 0; }
.chain__head h2{ color:#fff; font-size:clamp(28px,3.4vw,46px); }
.chain__lead{ color:rgba(255,255,255,.66); max-width:62ch; margin-top:12px; font-size:17px; line-height:1.6; }
.chain__track{ max-width:var(--maxw); margin:0 auto; padding:48px 24px 96px;
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.chain__step{
  position:relative; padding:22px 18px 20px; border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); min-height:200px;
  display:flex; flex-direction:column; gap:8px;
  /* стартовое состояние для GSAP-reveal (если JS) */
}
.js .chain__step{ opacity:0; transform:translateY(28px); }
.chain__step:hover{ border-color:rgba(122,203,29,.5); }
.chain__num{ font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--gold); }
.chain__step h3{ color:#fff; font-size:17px; margin:2px 0 0; }
.chain__step p{ color:rgba(255,255,255,.62); font-size:13.5px; line-height:1.5; margin:0; }
.chain__step a{ margin-top:auto; color:var(--lime); font-weight:600; font-size:13px;
  display:inline-flex; align-items:center; gap:6px; }
.chain__step a::after{ content:"→"; transition:transform .2s var(--ease-out); }
.chain__step a:hover::after{ transform:translateX(4px); }
@media (max-width:1000px){ .chain__track{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .chain__track{ grid-template-columns:1fr 1fr; } }

/* ---------- Направления / Решения (parallax cards) ---------- */
.feature{ padding:96px 0; }
.feature .container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.dir-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px; }
@media (max-width:1000px){ .dir-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .dir-grid{ grid-template-columns:1fr; } }
.dir{ display:block; padding:24px; border-radius:14px; background:#fff;
  border:1px solid var(--line); transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s; }
.js .dir{ opacity:0; transform:translateY(26px); }
.dir:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:rgba(20,138,27,.4); }
.dir__k{ font-size:12px; font-weight:800; color:var(--gold); letter-spacing:.08em; }
.dir h3{ margin:8px 0 6px; font-size:18px; }
.dir p{ margin:0; color:var(--steel-dark); font-size:14px; line-height:1.55; }
.dir__freq{ margin-top:12px; font-size:12px; color:var(--green); font-weight:600; }

/* ---------- Решения (тёмная секция со скейл-параллаксом) ---------- */
.solutions{ background:#16191E; color:#fff; }
.sol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; }
@media (max-width:900px){ .sol-grid{ grid-template-columns:1fr; } }
.sol{ padding:28px; border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); }
.sol h3{ color:#fff; font-size:20px; margin:0 0 8px; }
.sol p{ color:rgba(255,255,255,.66); font-size:14.5px; line-height:1.55; margin:0; }
.sol--accent{ background:linear-gradient(150deg,#0F6E15,#0A4D0F); border-color:transparent; }

/* ---------- Header v4 (светлая фиксированная шапка, логотип тёмный) ---------- */
.v-header{ position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
  -webkit-backdrop-filter:saturate(150%) blur(12px); backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line); }
.v-header[data-solid="false"]{ background:rgba(255,255,255,.95); }
.v-header[data-solid="true"]{ background:rgba(255,255,255,.99); box-shadow:0 6px 24px rgba(15,18,22,.08); }

/* ---------- Полировка (контраст AA, фокус, нажатие, тёмные заголовки) ---------- */
:root{ --steel-dark:#5E6873; }              /* вторичный текст — контраст AA на свету */
.solutions h2,.solutions .eyebrow + h2,.chain h2{ color:#fff; }
.solutions .section__lead,.solutions p.lead-intro{ color:rgba(255,255,255,.7); }
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:var(--radius); }
.btn:active{ transform:translateY(0) scale(.97); }
.dir,.sol{ will-change:transform; }
section[id]{ scroll-margin-top:88px; }

/* Мобильная типографика hero (после базовых правил — чтобы переопределяла) */
@media (max-width:760px){
  .vhero__title{ font-size:clamp(26px,7.0vw,42px); line-height:1.06; }
  .vhero__lead{ font-size:15px; }
  .vhero__eyebrow{ font-size:11px; letter-spacing:.16em; }
  .vhero__title,.vhero__lead,.vhero__eyebrow{ text-shadow:0 2px 16px rgba(0,0,0,.55); }
}

/* ---------- Мобильные отступы (убрать лишний «воздух») ---------- */
@media (max-width:600px){
  .feature{ padding:56px 0; }
  .feature .container{ padding:0 16px; }
  .chain__head{ padding:64px 16px 0; }
  .chain__track{ padding:28px 16px 64px; gap:12px; }
  .solutions .container{ padding:56px 16px; }
  .vhero__inner{ padding:100px 20px 72px; }
  .dir-grid,.sol-grid{ margin-top:28px; }
}

/* reduced-motion: гасим все стартовые скрытия */
@media (prefers-reduced-motion:reduce){
  .js .chain__step,.js .dir{ opacity:1; transform:none; }
  .vhero__scroll i{ animation:none; }
}