/* ==========================================================================
   PK VOIR — home.css · V2 «CINEMATIC LUXURY»
   Видео — ЗВЕЗДА: full-bleed полотна scene1..4 с киногрейдингом, поверх —
   минимальный выразительный текст + лёгкий Three.js-акцент (золотая нить).
   Одна сильная идея на экран. Воздух. Letterbox. Grain (в base.css).
   ========================================================================== */

/* ===== stage: видео + WebGL ===== */
#stage{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, #0b1220 0%, var(--ink) 55%);
}
#scene-canvas{ width:100%; height:100%; display:block; position:relative; z-index:2; }
.no-webgl #scene-canvas{ display:none; }

/* ===== видео-слой: full-bleed, киногрейдинг, crossfade ===== */
.scene-video{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:0; pointer-events:none;
  filter:var(--grade) brightness(.92);
  transition:opacity 1.1s var(--ease-lux);
  transform:scale(1.04);            /* лёгкий «kinopan»-кроп против пиксель-в-пиксель */
  will-change:opacity;
}
.scene-video.visible{ opacity:1; }
/* тёплый кино-оверлей поверх видео (свет как в кадре, а не фильтр-плёнка) */
#video-grade{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity 1.1s var(--ease-lux);
  background:
    radial-gradient(90% 70% at 78% 18%, rgba(232,163,61,.10), transparent 60%),
    radial-gradient(120% 90% at 50% 110%, rgba(7,11,20,.55), transparent 55%),
    linear-gradient(180deg, rgba(7,11,20,.35) 0%, rgba(7,11,20,0) 22%, rgba(7,11,20,0) 70%, rgba(4,7,13,.6) 100%);
  mix-blend-mode:normal;
}
#video-grade.visible{ opacity:1; }

#home-story{ position:relative; z-index:3; }

/* ===== phase sections =====
   4 sections x 125vh = 500vh; phase bands: 0-.25 сеть, .25-.5 закрома,
   .5-.75 неземные, .75-1 AI-ОС. Текст — поверх видео, воздуха много. */
/* V2 ГЕОМЕТРИЯ КАДРА (приёмка: «контент распилен нижней кромкой»):
   каждая фаза = РОВНО 100vh → маркеры скриншотов 0/25/50/75% точно кадрируют
   свою фазу целиком, а фазовые полосы progress (0-.25/.25-.5/.5-.75/.75-1)
   совпадают с секциями 1:1. Плюс «одна сильная идея на экран» по брифу. */
.phase{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  /* safe-margin + clearance под letterbox-бар (приёмка v2: низ не режем) */
  padding:calc(var(--header-h) + 1.1rem) 0 calc(clamp(1.4rem, 3.5vh, 2.6rem) + clamp(18px,3.2vh,42px));
  overflow-x:clip; overflow-y:visible;
}
.phase-inner{ width:100%; }
/* хвост-«выдох»: чистое кино перед финальным CTA (маркер 100%) и точная
   геометрия скролла: story = 4×100vh + 100vh */
#home-story{ padding-bottom:100vh; }

/* подложка под текстом — мягчайший двусторонний feather (без кромок-«заплаток») */
.plate, .aios-panel, .fact-card, .top-model .cell{
  position:relative;
  isolation:isolate;
  background:none;
  border:0;
}
.plate::before, .aios-panel::before{
  content:"";
  position:absolute;
  inset:-26% -14%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(160deg,
    rgba(5,8,15,.9) 0%, rgba(5,8,15,.82) 46%, rgba(5,8,15,.55) 78%, rgba(5,8,15,.3) 100%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite:intersect;
}
.top-model .cell::before, .fact-card::before{
  content:"";
  position:absolute;
  inset:0 -14% -26%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(160deg,
    rgba(6,10,18,.8) 0%, rgba(6,10,18,.7) 46%, rgba(6,10,18,.4) 78%, rgba(6,10,18,.2) 100%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite:intersect;
}
/* ЕДИНАЯ колоночная сетка: все текстовые плиты фаз стоят на ОДНОЙ левой
   колонке .wrap (приёмка v2 требовала сквозной композиционной оси). */
.plate{ padding:var(--sp-3) 0; max-width:min(720px, 100%); }
.plate-right{ margin-left:auto; }
.plate-center{ max-width:min(820px, 100%); text-align:left; }
.aios-panel{ padding:var(--sp-3) 0; }
/* мера тела ≤75 знаков; сноска — той же ширины, что колонка (единая мера) */
.plate p, .plate-center p, .aios-panel p, .hero-lead{ max-width:62ch; }
.plate .note, .plate-center .note{ max-width:62ch; }

/* ЕДИНАЯ иерархия: hero h1 = --fs-hero; ВСЕ h2 фаз — один масштаб
   (приёмка v2: рассогласование 90px/64px между секциями = «отдельные шаблоны»). */
.phase h2{
  font-size:clamp(2rem, 4.8vw, 4rem);
  font-weight:900; letter-spacing:-0.04em; line-height:1.03;
}

/* крошки главной — вне потока, поверх hero: не создают мёртвую зону и
   не сдвигают геометрию фаз (приёмка v2) */
#home-story > .breadcrumbs{
  position:absolute; top:0; left:0; right:0; z-index:6;
  padding-top:calc(var(--header-h) + .9rem);
}

/* reveal mechanics (gsap controls; initial visible without JS) */
.reveal{ opacity:1; transform:none; }
.js-anim .phase .reveal{ opacity:0; }

/* ==========================================================================
   HERO — ФАЗА 1 «СЕТЬ»: full-bleed видео + огромный заголовок + 1 CTA
   ========================================================================== */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:var(--sp-4); align-items:start; width:100%;
}
/* Кинематографичный SCRIM под текстом hero (дефект приёмки: «нет scrim под
   текстом»): направленная тень слева + нижний фейд → огромный заголовок
   читается на любом кадре видео. Только ::before, не на элементе с текстом. */
/* V2.1: скрим фаз — радиально-мягкий, БЕЗ диагоналей и без прямоугольных
   кромок (приёмка: «scrim даёт видимый прямоугольник — панель, а не свет»).
   Четырёхсторонний feather маской: alpha уходит в 0 ВНУТРИ границ псевдо-
   элемента, поэтому прямой линии нет ни по одной из 4 сторон. */
.phase .phase-inner::before{
  content:""; position:absolute; inset:-22% -6%; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,7,13,.74) 0%, rgba(4,7,13,.48) 44%, rgba(4,7,13,.1) 74%, rgba(4,7,13,0) 94%),
    linear-gradient(0deg, rgba(4,7,13,.44) 0%, rgba(4,7,13,0) 34%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite:intersect;
}
/* фаза 2 — зеркальный скрим (текст в правой трети, ярмарка — герой слева) */
.phase--zakroma .phase-inner::before{
  background:
    linear-gradient(270deg, rgba(4,7,13,.8) 0%, rgba(4,7,13,.54) 42%, rgba(4,7,13,.12) 72%, rgba(4,7,13,0) 94%),
    linear-gradient(0deg, rgba(4,7,13,.48) 0%, rgba(4,7,13,0) 36%);
}
.hero-eyebrow{ display:flex; align-items:center; gap:.7rem; margin-bottom:var(--sp-2); }
.hero-eyebrow .line{
  width:64px; height:1px; flex:0 0 auto;
  background:linear-gradient(90deg, var(--amber), transparent);
  box-shadow:0 0 10px rgba(232,163,61,.6);
}
/* у eyebrow уже есть своя .line — вторая черта от .tag::before создавала
   «рваный» двойной штрих (дефект приёмки). Гасим её здесь. */
.hero-eyebrow .tag{ padding:0; background:none; border:0; }
.hero-eyebrow .tag::before{ display:none; }
.phase--network h1{
  font-size:var(--fs-hero);
  font-weight:900;
  letter-spacing:-0.045em;
  line-height:.96;
  margin-bottom:clamp(.9rem,2.4vh,1.5rem);
  max-width:14ch;
  text-wrap:balance;               /* приёмка: никаких «дыр» в середине блока */
  text-shadow:0 4px 40px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.8);
}
/* ПРАВИЛО: янтарь — только цифры/цены. В заголовке акцентное слово остаётся
   БЕЛЫМ, а «золотая нить» читается как СВЕТ вокруг него (glow), не как цвет букв. */
/* Приёмка: световой выброс видео бьёт в punchline → локальное затемнение
   под плитой hero (ещё один слой скрима, мягкий, без кромок). */
.plate-hero::before{
  background:
    radial-gradient(120% 90% at 30% 40%, rgba(4,7,13,.72) 0%, rgba(4,7,13,.5) 46%, rgba(4,7,13,.16) 78%, rgba(4,7,13,0) 100%) !important;
}
.hero h1 .gold, .phase--network h1 .gold{
  color:#FFFFFF;
  text-shadow:
    0 0 34px rgba(255,208,137,.55),
    0 0 72px rgba(232,163,61,.35),
    0 2px 6px rgba(0,0,0,.85);
}
.hero-lead{
  font-size:clamp(.95rem, 1.15vw, 1.12rem);
  font-weight:200; line-height:1.62; color:#fff;
  max-width:52ch; letter-spacing:.008em;
  text-shadow:0 1px 10px rgba(0,0,0,.9);
}
/* одна главная CTA; вторая — тихий «воздушный» ghost */
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:var(--sp-3); align-items:center; }
.hero-actions .btn{ font-size:.92rem; padding:.85rem 2rem; }
.hero-actions .btn-ghost{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  font-weight:400;
}

/* факты: не «плитки», а крупная воздушная линия вдоль низа hero */
.hero-facts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1rem, 3vw, 3rem);
  margin-top:clamp(1rem, 2.6vh, 2rem);
  max-width:960px;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:.9rem;
}
.fact-card{
  padding:.4rem 0 0;
  transition:transform var(--dur-med) var(--ease-lux);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
  background:none;
}
.fact-card::before{ display:none; }        /* линия сверху вместо «подложки-карточки» */
.fact-card::after{
  content:""; position:absolute; left:0; top:-1px; width:52px; height:1px;
  background:linear-gradient(90deg, var(--amber-hi), transparent);
  box-shadow:0 0 10px rgba(232,163,61,.7);
}
.fact-card:hover{ transform:translateY(-3px); }
.fact-card b{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.9rem, 3.6vw, 2.9rem); line-height:1;
  letter-spacing:-0.04em; color:var(--amber-hi);   /* цифры — янтарь (правило: цифры/цены) */
}
.fact-card span{
  display:block; margin-top:.45rem;
  font-size:.78rem; font-weight:300; line-height:1.45; color:#FFFFFF;
  letter-spacing:.015em; max-width:26ch;
}

.scroll-cue{
  position:absolute; right:clamp(1.2rem,4vw,3rem); bottom:calc(.9rem + clamp(18px,3.2vh,42px));
  transform:none; left:auto; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:400; font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.75);
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}
.scroll-cue .mouse{ width:20px; height:32px; border:1px solid rgba(255,255,255,.45); border-radius:11px; position:relative; }
.scroll-cue .mouse::after{ content:""; position:absolute; left:50%; top:6px; width:2px; height:6px; border-radius:2px; background:var(--amber-hi); box-shadow:0 0 6px var(--amber); transform:translateX(-50%); animation:cue 2.2s var(--ease-lux) infinite; }
@keyframes cue{ 0%{opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0; transform:translate(-50%,11px)} }

/* ==========================================================================
   ФАЗА 2 «ЗАКРОМА»: editorial — правая колонка, крупная цифра-цена
   ========================================================================== */
.phase--zakroma .phase-inner{ display:flex; flex-direction:column; gap:var(--sp-3); }
.zakroma-head{ display:flex; justify-content:flex-end; }
.phase--zakroma .plate-right{ max-width:min(560px, 46%); }
/* заголовок/текст фазы 2 — над ярким боке: локальный мягкий скрим (text-shadow) */
.phase--zakroma h2{ text-shadow:0 2px 26px rgba(3,5,11,.92), 0 1px 4px rgba(3,5,11,.95); }
.phase--zakroma .plate > p, .phase--zakroma .note{ text-shadow:0 1px 12px rgba(3,5,11,.85); }
.phase--zakroma h2{ max-width:20ch; font-size:clamp(1.6rem,3.1vw,2.5rem); margin-bottom:.8rem; }
.phase--zakroma .plate > p{ font-size:.95rem; }
.phase--zakroma .top-model .cell{ font-size:.78rem; padding-top:.6rem; line-height:1.5; }
.phase--zakroma .top-model{ gap:clamp(.6rem,1.1vw,.9rem); margin-top:.9rem; }
.phase--zakroma .plate{ padding-top:.4rem; }
.phase--zakroma .price-box{ margin-top:1rem; }
.phase--zakroma .plate > p{ line-height:1.65; margin-bottom:.9rem; }
.phase--zakroma .top-model .cell b{ margin-bottom:.3rem; font-size:.72rem; }
.phase--zakroma .money{ font-size:clamp(1.9rem,3.6vw,2.9rem); }
.phase--zakroma .note{ font-size:.68rem; padding:.4rem .8rem; margin-top:.5rem; line-height:1.5; }
.phase--zakroma .hero-lead, .phase--zakroma .plate > p{ font-size:.9rem; line-height:1.6; }
.phase--zakroma .tag{ margin-bottom:.6rem; }
.top-model{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(.7rem, 1.4vw, 1.1rem); margin-top:var(--sp-2);
}
.top-model .cell{
  padding:.9rem 0 0; font-size:.86rem; font-weight:200; line-height:1.6; color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  transition:transform var(--dur-med) var(--ease-lux), border-color var(--dur-med);
  text-shadow:0 1px 6px rgba(0,0,0,.85);
}
.top-model .cell::before{ display:none; }
.top-model .cell::after{
  content:""; position:absolute; left:0; top:-1px; width:44px; height:1px;
  background:linear-gradient(90deg, var(--amber-hi), transparent);
  box-shadow:0 0 8px rgba(232,163,61,.7);
  transition:width var(--dur-slow) var(--ease-lux);
}
.top-model .cell:hover{ transform:translateY(-3px); }
.top-model .cell:hover::after{ width:88px; }
.top-model .cell b{
  display:block; font-family:var(--font-display); font-size:.78rem; font-weight:700;
  color:#fff; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.4rem;
}
.money{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.4rem, 5vw, 4rem); color:var(--amber-hi);
  letter-spacing:-0.03em; line-height:1;
  text-shadow:0 0 40px rgba(232,163,61,.35);
  white-space:nowrap;   /* «от 500 000 ₽» не рвётся (₽ не уезжает на новую строку) */
}
.price-box .price, .money .cur{ white-space:nowrap; }
/* ПРАВИЛО: янтарь — только ЦИФРЫ. Слова «от» и знак «₽» — тёплый белый. */
.money .cur, .price-box .from{ color:#F5EFE4; text-shadow:none; }
.money .cur{ font-weight:700; font-size:.6em; }
.price-box .from{ font-size:.8rem; letter-spacing:.24em; font-weight:400; }
.price-box{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-top:var(--sp-2); margin-bottom:.5rem; }
.price-box .note{ flex-basis:100%; margin-top:.35rem; }
/* компактные юр-сноски внутри фаз (текст дословно сохранён, кегль мельче) */
.phase .note{ font-size:.74rem; line-height:1.55; padding:.5rem .9rem; margin-top:.7rem; }
/* V2.1: юр-детали по смете — компактное раскрытие (смысл и формулировки
   сохранены дословно, меняется только подача: строка + «смета и расчёт») */
.claim-details{ margin-top:.7rem; }
.claim-details summary{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; min-height:44px;
  font-size:.74rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  color:#FFFFFF; list-style:none;
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:.15rem;
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
.claim-details summary::-webkit-details-marker{ display:none; }
.claim-details summary::before{
  content:"+"; font-family:var(--font-display); font-weight:700; font-size:.9rem;
  color:#FFFFFF; transition:transform var(--dur-med) var(--ease-lux);
}
.claim-details[open] summary::before{ transform:rotate(45deg); }
.claim-details summary:hover{ color:#fff; border-color:rgba(255,255,255,.75); }
.claim-details .note{ margin-top:.6rem; }
.phase h2{ margin-bottom:var(--sp-2); }
.phase .plate > p{ margin-bottom:var(--sp-2); }

/* ==========================================================================
   ФАЗА 3 «НЕЗЕМНЫЕ ПРИКЛЮЧЕНИЯ»: широкий воздух, чипы → лёгкая строка
   ========================================================================== */
.phase--adventure .phase-inner{ display:grid; place-items:center; }
.adventure-plate{ max-width:min(760px,92vw); text-align:left; }
.adventure-plate h2{ /* единый масштаб .phase h2 */ }
/* чипы v1 (моно-плашки) → V2: воздушная light-строка с янтарными точками-светом */
.chips{
  display:flex; gap:2.2rem; flex-wrap:wrap;
  margin-top:var(--sp-3); padding-top:var(--sp-2);
  border-top:1px solid rgba(255,255,255,.1);
}
.chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:0; border:0; border-radius:0; background:none;
  font-family:var(--font-body); font-size:.9rem; font-weight:300; color:#fff;
  letter-spacing:.02em;
  text-shadow:0 1px 8px rgba(0,0,0,.85);
  transition:transform var(--dur-med) var(--ease-lux);
}
.chip:hover{ transform:translateY(-2px); }
.chip i{
  width:4px; height:4px; border-radius:50%; background:#FFF;
  box-shadow:0 0 12px rgba(255,208,137,.85), 0 0 24px rgba(232,163,61,.4);
  font-style:normal; flex:0 0 auto;
}

/* ==========================================================================
   ФАЗА 4 «AI-ОС»: два крупных дышащих блока
   ========================================================================== */
.aios-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,4vw,4rem); align-items:start; width:100%; }
.phase--aios h2{ max-width:16ch; }
.aios-panel h3{ color:#fff; font-weight:800; letter-spacing:-0.02em; }
.aios-list{ margin-top:var(--sp-2); }
.aios-list li{
  display:flex; gap:1rem; padding:.8rem 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-size:.95rem; font-weight:200; line-height:1.6; color:#fff;
  letter-spacing:.01em;
}
.aios-list li:last-child{ border-bottom:0; }
.aios-list .idx{
  font-family:var(--font-display); font-size:.8rem; font-weight:700; color:#fff;
  padding-top:.25rem; display:inline-flex; align-items:center; gap:.5rem;
  letter-spacing:.08em; flex:0 0 auto;
}
.aios-list .idx::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--azure); box-shadow:0 0 10px var(--azure);
}
.price-box .from{
  font-family:var(--font-body); font-size:.78rem; font-weight:400; color:#fff;
  text-transform:uppercase; letter-spacing:.28em;
}
.price-box .price{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.4rem, 5vw, 4rem); color:var(--amber-hi);
  letter-spacing:-0.03em; line-height:1;
  text-shadow:0 0 40px rgba(232,163,61,.35);
}

/* ==========================================================================
   ФИНАЛ · CTA — кинематографично: огромное «Станьте пайщиком», нить света
   ========================================================================== */
.finale{
  position:relative; z-index:4;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(232,163,61,.14), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, #0a0d16 100%);
  border-top:1px solid rgba(232,163,61,.18);
  padding:calc(var(--sp-7) + 2rem) 0 var(--sp-7);
}
.finale-grid{ width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); }
.finale-grid h2{
  font-weight:900; letter-spacing:-0.045em;
  max-width:18ch; font-size:clamp(2.6rem, 6.4vw, 5.2rem); line-height:1;
}
.finale-grid p{ max-width:52ch; color:#fff; font-weight:200; line-height:1.75; }
.finale-actions{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:var(--sp-3); }
.finale-actions .btn{ padding:.95rem 2.3rem; font-size:.95rem; }
.finale-note{ max-width:64ch; text-align:left; }
.finale-thread{
  width:min(620px,82%); height:1px; margin:var(--sp-4) auto 0;
  background:linear-gradient(90deg, transparent, var(--amber), var(--amber-hi), var(--amber), transparent);
  box-shadow:0 0 22px rgba(232,163,61,.55);
}

/* ==========================================================================
   no-webgl: видео-постеры/CSS-градиенты (всё читается)
   ========================================================================== */
.no-webgl #scene-canvas{ display:none; }
.no-webgl .phase{ background-size:cover; background-position:center; }
.no-webgl .phase::before{ content:""; position:absolute; inset:0; background:rgba(5,8,15,.5); }
.no-webgl .phase .phase-inner{ position:relative; z-index:1; }
.no-webgl .phase--network{
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232,163,61,.5), transparent 28%),
    radial-gradient(circle at 75% 65%, rgba(47,184,166,.45), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(62,123,250,.25), transparent 45%),
    linear-gradient(160deg, #0b1424, var(--ink) 70%);
}
.no-webgl .phase--zakroma{
  background-image:
    radial-gradient(circle at 15% 80%, rgba(232,163,61,.55), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(255,208,137,.4), transparent 30%),
    repeating-linear-gradient(90deg, rgba(232,163,61,.07) 0 2px, transparent 2px 60px),
    linear-gradient(180deg, #0a101c, #1a1408 90%);
}
.no-webgl .phase--adventure{
  background-image:
    radial-gradient(circle at 70% 15%, rgba(245,239,228,.28), transparent 26%),
    radial-gradient(circle at 20% 60%, rgba(47,184,166,.35), transparent 32%),
    linear-gradient(180deg, #071018 0%, #0c1a26 45%, #05070d 100%);
}
.no-webgl .phase--aios{
  background-image:
    radial-gradient(circle at 50% 45%, rgba(62,123,250,.4), transparent 34%),
    radial-gradient(circle at 82% 75%, rgba(232,163,61,.3), transparent 26%),
    linear-gradient(200deg, #070c18, var(--ink) 75%);
}
/* если видео-слой жив, но WebGL нет — видео остаётся звездой (постеры не нужны) */
.no-webgl.has-video .phase{ background-image:none !important; }
.no-webgl.has-video .phase::before{ background:rgba(5,8,15,.25); }

/* ===== переходный scrim: гаснет на стыках фаз → единый пролёт камеры ===== */
#transition-scrim{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:radial-gradient(80% 70% at 50% 50%, rgba(4,7,13,0) 40%, rgba(4,7,13,.66) 100%);
}
/* лёгкая виньетка связывает видео/3D и текст (основная — в base.css body::after) */
#stage::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, rgba(7,11,20,0) 60%, rgba(7,11,20,.42) 100%);
}

/* ===== phase progress rail — тонкие кинематографичные штрихи ===== */
#phase-rail{
  position:fixed; right:1.2rem; top:50%; transform:translateY(-50%); z-index:120;
  display:flex; flex-direction:column; gap:.7rem; pointer-events:none;
}
#phase-rail .dot{
  width:2px; height:22px; border-radius:2px; background:rgba(255,255,255,.7);
  transition:background var(--dur-med) var(--ease-lux), box-shadow var(--dur-med), height var(--dur-med) var(--ease-lux);
}
#phase-rail .dot.active{
  background:var(--amber-hi); height:34px;
  box-shadow:0 0 14px rgba(232,163,61,.75);
}

/* ===== page-load choreography (staggered reveal hero-элементов) ===== */
.js-anim .hero-eyebrow, .js-anim .phase--network h1, .js-anim .hero-lead,
.js-anim .hero-actions, .js-anim .hero-facts, .js-anim .scroll-cue{
  /* GSAP управляет; базовое состояние — .js-anim .phase .reveal{opacity:0} */
}

/* ===== responsive ===== */
@media (max-width: 1080px){
  .aios-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
}
@media (max-width: 900px){
  .phase{ min-height:100vh; }
  .hero-facts{ grid-template-columns:1fr; gap:var(--sp-2); max-width:100%; }
  .fact-card span{ max-width:40ch; }
  .plate{ max-width:100%; }
  .plate::before, .aios-panel::before{ inset:-16% 0; }
  .top-model{ grid-template-columns:1fr; }
  #phase-rail{ display:none; }
  .scroll-cue{ display:none; }
  .phase--network h1{ max-width:100%; }
}
@media (max-width: 560px){
  /* DEFECT 3: контент НЕ под полупрозрачной шапкой — padding-top >= header+16px */
  .phase{ padding-top:calc(var(--header-h) + .7rem); align-items:flex-start; }
  /* нижний safe-margin компактнее (letterbox на мобиле тонкий) — hero в фолд */
  .phase--network{ padding-bottom:calc(1.6rem + clamp(14px,2.4vh,30px)); }
  /* DEFECT 6: единая мобильная сетка отступов 20px.
     .phase-inner — это и есть .wrap (gutter 20px), поэтому у внутренних плит
     убираем собственный горизонтальный padding → крошки/stats/h1 на ОДНОЙ линии. */
  .plate{ padding-inline:0; max-width:100%; padding-block:var(--sp-3); }

  /* DEFECT 2: H1 не «3 рваные строки вплотную к полям» — clamp 32-40px, lh 1.12 */
  .phase--network h1{
    font-size:clamp(2rem, 9vw, 2.6rem);
    line-height:1.12; letter-spacing:-0.03em;
    max-width:100%; margin-bottom:1rem;
  }
  .phase h2{ font-size:clamp(1.6rem, 7.5vw, 2.2rem); line-height:1.1; }
  .hero-lead{ font-size:.95rem; line-height:1.6; max-width:100%; }
  /* hero влезает в фолд 390x844 БЕЗ переписывания текста: компактнее ритм
     (eyebrow/lead/actions/facts) и чуть меньше факты — только кегль/отступы. */
  .hero-eyebrow{ margin-bottom:.45rem; }
  .phase--network h1{ margin-bottom:.5rem; }
  .hero-lead{ margin-bottom:.3rem; }
  .hero-actions{ margin-top:.65rem; gap:.6rem; }
  .hero-facts{ margin-top:.7rem; gap:.8rem; padding-top:.5rem; }
  .fact-card{ padding-top:.2rem; }
  .fact-card b{ font-size:clamp(1.5rem,6.5vw,1.9rem); }
  .fact-card span{ font-size:.74rem; line-height:1.4; margin-top:.3rem; }

  /* DEFECT 7: Закрома — ОДНА колонка 100% ширины (не узкая правая ~150px) */
  .phase--zakroma .plate-right{ max-width:100%; margin-left:0; }
  .zakroma-head{ justify-content:flex-start; }
  .phase--zakroma h2{ max-width:100%; }
  .aios-grid{ grid-template-columns:1fr; gap:var(--sp-3); }
  .top-model{ grid-template-columns:1fr; }

  .hero-actions .btn{ width:100%; }
  .chips{ flex-direction:column; gap:.7rem; }
  /* DEFECT 5: тёмный scrim 40-60% под любым текстом поверх видео (контраст) */
  .phase .phase-inner::before{
    inset:-4% -20px;
    background:
      linear-gradient(180deg, rgba(4,7,13,.78) 0%, rgba(4,7,13,.62) 42%, rgba(4,7,13,.8) 100%);
    -webkit-mask-image:none; mask-image:none;
  }
  .phase--zakroma .phase-inner::before{
    background:linear-gradient(180deg, rgba(4,7,13,.8) 0%, rgba(4,7,13,.64) 42%, rgba(4,7,13,.8) 100%);
  }
  /* CTA не растворяется в светлом кадре — тень-посадка */
  .btn-primary{ box-shadow:0 6px 20px rgba(3,5,11,.55); }
  /* hero-текст: тёплый белый плотнее (читаемость на страйках видео) */
  .hero-lead{ color:#FFF8EE; text-shadow:0 1px 14px rgba(3,5,11,.95), 0 0 30px rgba(3,5,11,.7); }
  .fact-card b{ font-size:clamp(1.7rem,7vw,2.2rem); }
  .finale-grid h2{ font-size:clamp(1.8rem,8vw,2.6rem); }
}
/* узкие/низкие экраны (360-375px, SE/Android): hero ещё плотнее, чтобы факты
   не уезжали за фолд. Только кегль/отступы — текст не трогаем.
   (≤380 — НЕ задевает целевые 390px, где кегль = спецификация clamp(2rem,9vw,2.6rem)) */
@media (max-width: 380px){
  .phase--network h1{ font-size:clamp(1.8rem,8.2vw,2.3rem); margin-bottom:.6rem; }
  .hero-lead{ font-size:.88rem; line-height:1.55; }
  .hero-actions{ margin-top:.8rem; }
  .hero-actions .btn{ padding:.75rem 1.4rem; font-size:.88rem; }
  .hero-facts{ margin-top:.9rem; gap:.8rem; padding-top:.7rem; }
  .fact-card b{ font-size:clamp(1.4rem,6vw,1.7rem); }
  .fact-card span{ font-size:.72rem; line-height:1.35; }
}

/* ===== reduced motion: статика, видео-постер, scrub off ===== */
@media (prefers-reduced-motion: reduce){
  .scene-video{ transition:none; transform:none; }
  #video-grade{ transition:none; }
  .scroll-cue .mouse::after{ animation:none; }
}