:root{
  --bg: #030304;     /* самый тёмный край */
  --bg2: #0d0e10;    /* нейтральный графит в центре */
  --fg: #f4f6f8;
  --muted: #9a9ca2;
  --accent: #e8edf2;
  --spot: 150,152,158; /* нейтральный серый софит (rgb), без цвета */
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: auto; }

body{
  background:
    /* мягкий нейтральный софит за роботом */
    radial-gradient(70% 52% at 50% 34%, rgba(var(--spot), .10), rgba(var(--spot), 0) 60%),
    /* база: графит -> почти чёрный */
    radial-gradient(135% 115% at 50% 16%, var(--bg2) 0%, #08090a 44%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: "League Spartan", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== Слои-эффекты поверх кадра ===== */
.fx{ position: absolute; inset: 0; pointer-events: none; }
/* виньетка: мягко затемняет края кадра */
.fx-vignette{
  background: radial-gradient(118% 92% at 50% 44%, rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%);
}
/* кинозерно */
.fx-grain{
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ===== Загрузчик ===== */
#loader{
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity .6s ease;
}
#loader.hidden{ opacity: 0; pointer-events: none; }
.loader-inner{ text-align: center; width: min(320px, 70vw); }
.loader-title{
  font-size: 14px; letter-spacing: .5em; text-indent: .5em;
  color: var(--muted); margin-bottom: 18px;
}
.loader-dots{ display:flex; gap:6px; justify-content:center; }
.loader-dots span{
  width:6px; height:6px; border-radius:50%; background: var(--muted);
  animation: blink 1.2s infinite ease-in-out both;
}
.loader-dots span:nth-child(2){ animation-delay:.2s; }
.loader-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.2 } 40%{ opacity:1 } }

/* ===== Сцена ===== */
#stage{
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
}

#hero,
#hero-rev{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;            /* кадр всегда на весь экран */
  object-position: 50% 100%;    /* прижат к низу: режется пустой верх, постамент цел */
  will-change: transform;       /* GPU-слой с самого начала — без перекомпозиции при отмотке */
}
/* реверс-видео лежит поверх основного и показывается только во время отмотки.
   Переключение мгновенное (без transition) — слой обязан в любой момент ПОЛНОСТЬЮ
   крыть #hero; появление/снятие в JS привязаны к реальной отрисовке кадра (rVFC),
   поэтому стыка двух декодеров не видно. */
#hero-rev{
  opacity: 0;
  pointer-events: none;
}
#hero-rev.show{ opacity: 1; }

/* ===== Hero-контент первой страницы (League Spartan) ===== */
/* Постоянный логотип в правом верхнем углу — виден на всех страницах */
.site-logo{
  position: absolute;
  top: clamp(16px, 3vh, 32px);
  right: clamp(20px, 4vw, 56px);
  z-index: 7;
  height: clamp(60px, 9vh, 105px);
  width: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  opacity: 0;                    /* гаснет/появляется вместе с контентом страницы */
  transition: opacity .55s ease;
}

.hero-ui{
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 6;
  display: flex; align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(20px, 3vh, 36px) clamp(28px, 4vw, 56px);
  pointer-events: none;
  font-family: "League Spartan", "Inter", sans-serif;
}
.hero-ui > *{ pointer-events: auto; }

.hero-wordmark{
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(30px, 2.9vw, 44px);
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  opacity: 0;
  animation: heroFadeIn 1s cubic-bezier(.22,.61,.36,1) .4s forwards;
}

.hero-nav{
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: center;
}
.hero-nav a{
  font-family: inherit;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--fg);
  text-decoration: none;
  opacity: 0;
  animation: heroFadeIn 1s cubic-bezier(.22,.61,.36,1) forwards;
  transition: color .2s ease, opacity .4s ease;
}
.hero-nav a:hover{ color: rgba(255,255,255,.65); }
.hero-nav a:nth-child(1){ animation-delay: .55s; }
.hero-nav a:nth-child(2){ animation-delay: .65s; }
.hero-nav a:nth-child(3){ animation-delay: .75s; }
.hero-nav a:nth-child(4){ animation-delay: .85s; }

.hero-tagline{
  position: absolute;
  left: clamp(28px, 4vw, 56px);
  bottom: clamp(32px, 6vh, 60px);
  z-index: 6;
  max-width: 460px;
  pointer-events: none;
  font-family: "League Spartan", "Inter", sans-serif;
  opacity: 0;
  animation: heroFadeIn 1.1s cubic-bezier(.22,.61,.36,1) 1s forwards;
}
.hero-tagline h3{
  font-family: inherit;
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-bottom: 12px;
  color: #fff;
}
.hero-tagline p{
  font-family: inherit;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--muted);
}

.hero-stage-tag{
  position: absolute;
  right: clamp(28px, 4vw, 56px);
  bottom: clamp(32px, 6vh, 60px);
  z-index: 6;
  font-family: "League Spartan", "Inter", sans-serif;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  opacity: 0;
  animation: heroFadeIn 1.1s cubic-bezier(.22,.61,.36,1) 1.15s forwards;
}

@keyframes heroFadeIn{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* спрятать hero-контент, как только ушли с первой «страницы» */
.hero-ui,
.hero-tagline,
.hero-stage-tag{
  transition: opacity .5s ease;
}
body.past-intro .hero-ui,
body.past-intro .hero-tagline,
body.past-intro .hero-stage-tag,
body.past-intro .hero-wordmark,
body.past-intro .hero-nav a{
  animation: none !important;   /* снимаем forwards, чтобы opacity перешла */
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity .5s ease;
}

/* ===== Панели контента ===== */
.panel{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  max-width: 420px;
  padding: 28px 30px;
  opacity: 0;                 /* управляется из JS */
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity .55s ease, transform .55s ease;
}
.panel[data-align="left"]{ left: clamp(24px, 7vw, 120px); text-align: left; }
.panel[data-align="right"]{ right: clamp(24px, 7vw, 120px); text-align: right; }
.panel[data-align="center"]{
  left: 50%; right: auto;
  top: auto; bottom: clamp(40px, 9vh, 110px);
  transform: translateX(-50%);
  text-align: center;
  max-width: 640px;
}

.panel h2{
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
  margin-bottom: 16px;
}
.panel p{
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6; color: var(--muted);
}

/* ===== Полноэкранная панель (1-я остановка) — текст как на референсе ===== */
.panel--full{
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: none;
  transform: none;
  padding: clamp(36px, 5vh, 64px) clamp(32px, 3.5vw, 64px);
  display: flex; flex-direction: column;
  justify-content: flex-start;
  gap: clamp(24px, 4vh, 56px);
  overflow: hidden;
  font-family: "League Spartan", "Inter", sans-serif;
  z-index: 5;
}
.panel--full .panel-title-xl{
  font-family: "League Spartan", "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: .98;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
  white-space: nowrap;
}
.panel-cards{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(20px, 2.4vw, 40px);
  margin-top: clamp(28px, 5vh, 64px);
  margin-bottom: auto;
}
.panel-card{
  border: 1px solid rgba(255,255,255,.55);
  padding: clamp(22px, 2.2vw, 34px) clamp(24px, 2.4vw, 38px);
  color: #fff;
  background: rgba(0,0,0,.05);
}
.panel-card h4{
  font-family: inherit;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  color: #fff;
}
.panel-card p{
  font-family: inherit;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}
/* Левая карточка (текст «The kitchen still runs on hands.») — крупнее */
.panel-cards .panel-card:first-child h4{
  font-size: clamp(24px, 2.1vw, 32px);
  margin-bottom: 16px;
}
.panel-cards .panel-card:first-child p{
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.55;
}
.panel-stats{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.panel-stats li{
  display: grid;
  grid-template-columns: clamp(80px, 7vw, 110px) 1fr;
  gap: 16px;
  font-family: inherit;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.4;
  color: #fff;
}
.panel-stats b{ font-weight: 700; }
.panel-source{
  margin-top: clamp(18px, 2.4vh, 28px) !important;
  font-weight: 700 !important;
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.45 !important;
}

/* ===== 3-я остановка: Prototype — три клипа BOIL/CUT/PLATE ===== */
.panel--proto{
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: none;
  transform: none;
  padding: 0;
  font-family: "League Spartan", "Inter", sans-serif;
  z-index: 5;
  overflow: hidden;
}
.proto-note{
  position: absolute;
  top: clamp(16px, 3vh, 28px);
  left: clamp(20px, 3vw, 40px);
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-left: 12px;
  border-left: 2px solid rgba(255,255,255,.55);
  z-index: 2;
}
.proto-note b{ color: #fff; font-weight: 800; }

/* Сцена 16:9 — заполняет весь экран COVER-ом, привязана к низу (как #hero,
   object-position 50% 100%). Робот внутри = фуллскрин как фон-видео, а видео и
   надписи в той же системе координат, поэтому не «слазят». */
.proto-stage{
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width:  max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));
  container-type: size;
}

.proto-videos{
  position: absolute;
  top: 20%;
  left: 48.85%; transform: translateX(-50%);
  display: flex;
  gap: 0;
  width: 61%;
}
.proto-clip{
  flex: 1 1 0; min-width: 0; margin: 0;
  position: relative;                 /* якорь для подписи поверх видео */
  cursor: pointer;                    /* клик -> полное видео на YouTube */
}
.proto-clip video{ transition: filter .2s ease; }
.proto-clip:hover video{ filter: brightness(1) !important; }   /* подсветка при наведении */
.proto-clip figcaption{
  position: absolute;
  top: -20.5%;                            /* положение на видео: больше % = ниже */
  left: 50%; transform: translateX(-50%);
  z-index: 1;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 4.8cqw;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);   /* читаемость поверх видео */
}
.proto-clip video{
  width: 100%;
  height: 24cqh;
  object-fit: cover;
  display: block;
  filter: brightness(.72);   /* чуть притемняем клипы */
}
/* статичный вырез робота: заполняет сцену 16:9 (картинка тоже 16:9), поверх клипов И текста */
.proto-robot{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;   /* выше .proto-word — руки перекрывают надписи */
  opacity: 0;   /* картинка-вырез: появляется/исчезает мгновенно, без fade */
}
.panel--proto.is-active .proto-robot{ opacity: 1; }
.proto-word{
  position: absolute;
  color: #fff;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  font-size: 5.4cqw;
  pointer-events: none;
}
.proto-word--b{ top: 81.5%; left: 47%; }   /* basic tasks. */
.proto-word--a{ top: 63.7%; left: 19%; }   /* Prototype */

/* ===== 4-я остановка: The Ratatouille deck. ===== */
.panel--deck{
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: none;
  transform: none;
  padding: 0;
  font-family: "League Spartan", "Inter", sans-serif;
  z-index: 5;
  overflow: hidden;
  container-type: size;   /* cqw/cqh у заголовка и текста = % от экрана */
}
/* заметка download PDF — верхний левый угол (привязана к экрану) */
.deck-note{
  position: absolute;
  top: clamp(16px, 3vh, 28px);
  left: clamp(20px, 3vw, 40px);
  color: #fff;
  font-weight: 800;
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.1;
  letter-spacing: .01em;
  z-index: 6;
  opacity: 0;
  transition: opacity .55s ease, color .2s ease;   /* плавное угасание при уходе со слайда */
  text-decoration: none;            /* это ссылка-скачивание */
  cursor: pointer;
  display: inline-block;
  border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 2px;
}
.deck-note:hover{ color: rgba(255,255,255,.7); border-bottom-color: rgba(255,255,255,.9); }

/* сцена 16:9, cover, привязана к низу — как у proto/#hero */
.deck-stage{
  position: absolute;
  overflow: hidden;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  /* робот фуллскрин cover (как #hero); рамка и заголовок внутри сцены
     масштабируются ВМЕСТЕ с роботом, поэтому рамка всегда его обнимает */
  width:  max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));
  z-index: 2;
  container-type: size;   /* заголовок (cqw/cqh) масштабируется вместе с роботом */
}

/* рамка-прямоугольник, рисуется линией. Привязана к ЭКРАНУ (panel):
   всегда влезает, одинаковая на всех экранах, низ впритык к низу экрана.
   Центр по горизонтали ~46.4% (совпадает с роботом на 16:9). */
.deck-frame{
  position: absolute;

  left: 22%;
  width: 49%;

  top: 13%;
  height: 87%;

  z-index: 5;
  overflow: visible;
}
.deck-frame rect{
  fill: none;
  stroke: #fff;
  stroke-width: 4px;          /* толще */
  /* периметр в px подставляет JS (--deck-perim) */
  stroke-dasharray: var(--deck-perim, 2600);
  stroke-dashoffset: 0;       /* держим нарисованной; видимость — через opacity */
  opacity: 0;                 /* скрыта, пока слайд не активен */
  transition: opacity .55s ease;   /* плавное угасание при уходе со слайда */
}

/* заголовок: «Ratatouille» белым и крупнее, центр ~ центр робота;
   The слева от рамки, deck. справа, «e» заходит под палец (x≈59%, y≈15.7%) */
/* .panel--deck в селекторе поднимает специфичность выше `.panel h2`
   (clamp(28px,5vw,56px)), который иначе перебивал размер фикс. пикселями */
.panel--deck .deck-title{
  /* ===== НАСТРОЙКИ ЗАГОЛОВКА (всё в cqh = % высоты 16:9-сцены,
     поэтому масштабируется вместе с роботом на всех десктопах) ===== */
  --deck-side-size: 10cqh;     /* размер слов «The» и «deck.» */
  --deck-mid-size: 11.4cqh;   /* размер слова «Ratatouille» (независимо) */
  --deck-spread: 72%;         /* «размах»: больше → The/deck. дальше к краям */
  --deck-top: 11%;            /* вертикальное положение всего заголовка */
  --deck-the-shift: 3cqw;     /* доп. сдвиг «The» влево (симметрия с «deck.» у рамки) */
  --deck-side-drop: 4cqh;     /* опустить «The» и «deck.» вниз (не трогая «Ratatouille») */
  --deck-mid-x: -8%;          /* «Ratatouille» по горизонтали (больше → правее) */
  --deck-mid-y: 55%;          /* «Ratatouille» по вертикали (больше → ниже) */

  position: absolute;
  top: var(--deck-top);
  left: 50%;
  transform: translateX(-50%);

  width: var(--deck-spread);

  display: flex;
  justify-content: space-between;
  align-items: baseline;

  font-weight: 800;
  font-size: var(--deck-side-size);

  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;

  color: #fff;

  z-index: 1;
  opacity: 0;
  transition: opacity .55s ease;   /* плавное угасание при уходе со слайда */
}

.deck-title-mid{
  /* размер «Ratatouille» теперь независим от The/deck. */
  font-size: var(--deck-mid-size);

  transform: translate(var(--deck-mid-x), var(--deck-mid-y));
}
/* «The» — доп. сдвиг влево (симметрия с «deck.») + опускание вниз */
.panel--deck .deck-title > span:first-child{
  transform: translate(calc(-1 * var(--deck-the-shift)), var(--deck-side-drop));
}
/* «deck.» — опускание вниз вместе с «The» */
.panel--deck .deck-title > span:last-child{
  transform: translateY(var(--deck-side-drop));
}
/* вырез робота: фуллскрин cover, поверх заголовка */
.deck-robot{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
  opacity: 0;   /* картинка-вырез: появляется/исчезает мгновенно, без fade */
}
.panel--deck.is-active .deck-robot{ opacity: 1; }

/* каскадный текст по бокам — лесенкой, «воронкой» к роботу */
.panel--deck .deck-text{
  position: absolute;
  z-index: 3;
  font-weight: 700;
  /* cqh = % высоты 16:9-сцены (как робот/рамка) → одинаково на всех десктопах */
  font-size: 2.5cqh;
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .55s ease;   /* плавное угасание при уходе со слайда */

  --cascade-step: 1.0cqw;   /* шаг лесенки: каждая строка ниже сдвигается на это */
  --left-size: 2.7cqh;      /* размер текста (слева и справа одинаковый) */
  --right-size: 2.7cqh;
}
/* каждая строка — отдельный блок, сдвиг = индекс × шаг */
.panel--deck .deck-text span{ display: block; }

.panel--deck .deck-text--left{
  left: 1.25%;              /* равный зазор: край страницы <-> текст <-> рамка */
  top: 36%;
  text-align: left;
  font-size: var(--left-size);
}
.deck-text--left span{
  margin-left: calc(var(--i, 0) * var(--cascade-step));   /* вниз → правее */
}

.panel--deck .deck-text--right{
  right: 4%;
  top: 30%;
  text-align: right;
  font-size: var(--right-size);
}
.deck-text--right span{
  margin-right: calc(var(--i, 0) * var(--cascade-step));  /* вниз → левее */
}
/* ----- анимации появления (по классу .is-active) ----- */
.panel--deck.is-active .deck-frame rect{
  animation: deckDraw 1.7s cubic-bezier(.6,.0,.2,1) .1s forwards;
}
@keyframes deckDraw{
  from{ stroke-dashoffset: var(--deck-perim, 2600); opacity: 1; }
  to  { stroke-dashoffset: 0; opacity: 1; }
}

.panel--deck.is-active .deck-note { animation: deckFade .7s ease .25s forwards; }
.panel--deck.is-active .deck-title{ animation: deckFadeT .8s ease .55s forwards; }
.panel--deck.is-active .deck-text--left { animation: deckFade .8s ease .9s forwards; }
.panel--deck.is-active .deck-text--right{ animation: deckFade .8s ease 1.15s forwards; }
@keyframes deckFade{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}
/* для заголовка — без translateY, чтобы не сбивать центрирование translateX(-50%) */
@keyframes deckFadeT{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
.panel--deck.is-active .deck-title{ transform: translateX(-50%); }

/* ===== 4-я остановка: Contact ===== */
.panel--contact{
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: none;
  transform: none;
  padding: 0;
  z-index: 5;
  font-family: "League Spartan", "Inter", sans-serif;
}
/* «Contact» — крупный, по центру у самого верха (как на макете) */
.panel--contact .contact-title{
  position: absolute;
  top: clamp(6px, 2.2vh, 26px);
  left: 0; right: 0;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
/* центральный блок: текст + CTA + email */
.panel--contact .contact-body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 3vh, 32px);
}
.panel--contact .contact-lead{
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.5;
  letter-spacing: .005em;
  text-wrap: balance;
}
.panel--contact .contact-cta{
  display: inline-block;
  padding: clamp(13px, 1.5vh, 18px) clamp(26px, 2.6vw, 40px);
  background: #fff;
  color: #0a0b0c;
  font-weight: 800;
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.panel--contact .contact-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  background: #e8edf2;
}
.panel--contact .contact-mail{
  color: #fff;
  font-weight: 700;
  font-size: clamp(16px, 1.55vw, 22px);
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
}
.panel--contact .contact-mail:hover{ border-bottom-color: #fff; }

/* подсказка прокрутки */
.scroll-hint{
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .25em; color: var(--muted);
  text-transform: uppercase;
  animation: bob 1.8s ease-in-out infinite;
  transition: opacity .4s ease;
}
@keyframes bob{ 0%,100%{ transform: translate(-50%,0) } 50%{ transform: translate(-50%,6px) } }

/* ============================================================
   АДАПТИВ: планшеты и телефоны
   ============================================================ */

/* мобильные браузеры: 100vh «прыгает» из-за адресной строки — где можно,
   используем динамическую высоту вьюпорта */
@supports (height: 100dvh){
  #stage{ height: 100dvh; }
}

/* ---------- Планшеты в альбомной ориентации / узкие десктопы ---------- */
@media (max-width: 1180px) and (orientation: landscape){
  .panel--full .panel-title-xl{ max-width: 85%; }
  .panel-cards{ gap: 18px; }
}

/* ---------- Портретная ориентация (планшеты + телефоны) и узкие окна ----------
   Композиция десктопа построена на 16:9-сцене — в портрете она не работает,
   поэтому панели перестраиваются в вертикальный поток. */
@media (orientation: portrait), (max-width: 820px){

  /* fixed-фон на iOS не поддерживается и дёргается на Android */
  body{ background-attachment: scroll; }

  /* --- Hero --- */
  .site-logo{
    top: clamp(12px, 2vh, 20px);
    right: clamp(14px, 4vw, 28px);
    height: clamp(44px, 6.5vh, 72px);
  }
  .hero-ui{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(16px, 2.6vh, 28px) clamp(18px, 5vw, 36px);
  }
  .hero-wordmark{ font-size: clamp(26px, 7.5vw, 40px); }
  .hero-nav{ flex-wrap: wrap; gap: 12px 22px; }
  .hero-nav a{ font-size: clamp(15px, 4.2vw, 19px); }
  .hero-tagline{
    left: clamp(18px, 5vw, 36px);
    right: clamp(18px, 5vw, 36px);
    bottom: clamp(78px, 11vh, 130px);   /* выше маркера стадии */
    max-width: none;
  }
  .hero-tagline h3{ font-size: clamp(20px, 5.6vw, 30px); }
  .hero-tagline p{ font-size: clamp(14px, 3.8vw, 17px); }
  .hero-tagline p br{ display: none; }   /* десктопные переносы не нужны */
  .hero-stage-tag{
    right: clamp(18px, 5vw, 36px);
    bottom: clamp(26px, 4.5vh, 44px);
    font-size: clamp(14px, 3.8vw, 18px);
  }

  /* --- 1-я остановка: Why (карточки в колонку, панель прокручивается) --- */
  .panel--full{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: clamp(64px, 9vh, 96px) 6vw 36px;   /* сверху — место под логотип */
  }
  .panel--full .panel-title-xl{
    max-width: 100%;
    font-size: clamp(30px, 8.5vw, 72px);
  }
  .panel-cards{
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .panel-card{ padding: 16px 18px; }
  .panel-card p br,
  .panel-source br{ display: none; }
  .panel-cards .panel-card:first-child h4{ font-size: clamp(18px, 5vw, 26px); }
  .panel-cards .panel-card:first-child p{ font-size: clamp(14px, 4vw, 19px); }
  .panel-stats li{
    grid-template-columns: clamp(70px, 19vw, 96px) 1fr;
    gap: 12px;
    font-size: clamp(13px, 3.6vw, 16px);
  }
  .panel-source{
    margin-top: 14px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
  }

  /* --- 2-я остановка: Prototype --------------------------------------
     Сцена выходит из абсолютного позиционирования в обычный вертикальный
     поток: заголовок, затем три клипа. Если экран низкий — панель
     прокручивается, ничего не обрезается. */
  .panel--proto{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .proto-stage{
    position: static;
    transform: none;
    width: 100%; height: auto;
    min-height: 100%;
    container-type: normal;     /* size-containment ломает height:auto */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: clamp(56px, 8vh, 88px) 7vw 36px;
  }
  .proto-robot{ display: none; }
  .proto-word{ position: static; }
  .proto-word--a{
    order: -1;
    margin-top: auto;           /* центрируем группу, когда контент влезает */
    font-size: clamp(28px, 8vw, 52px);
  }
  .proto-word--b{ display: none; }
  .proto-videos{
    position: static;
    transform: none;
    flex-direction: column;
    width: min(86vw, 460px);
    gap: 14px;
    margin-bottom: auto;
  }
  .proto-clip figcaption{
    position: static;
    transform: none;
    display: block;
    text-align: center;
    margin-bottom: 6px;
    font-size: clamp(14px, 4vw, 20px);
  }
  .proto-clip video{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;       /* естественная высота, ужимается с экраном */
    filter: brightness(.85);
  }
  .proto-note{
    top: clamp(12px, 2vh, 22px);
    left: clamp(16px, 4vw, 28px);
    font-size: clamp(10px, 2.8vw, 13px);
  }

  /* --- 3-я остановка: Deck --------------------------------------------
     Та же логика: заголовок и оба текстовых блока складываются в колонку
     с нормальным размером шрифта; рамка и вырез робота не нужны. */
  .panel--deck{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .deck-stage{
    position: static;
    transform: none;
    width: 100%; height: auto;
    min-height: 100%;
    overflow: visible;
    container-type: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: clamp(56px, 8vh, 88px) 6vw 36px;
  }
  .deck-frame,
  .deck-robot{ display: none; }
  .panel--deck .deck-title,
  .panel--deck.is-active .deck-title{
    position: static;
    transform: none;            /* перебивает translateX(-50%) активного состояния */
    width: auto;
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .3em;
    font-size: clamp(24px, 7vw, 44px);
  }
  .deck-title-mid{ font-size: clamp(28px, 8.2vw, 52px); }
  .deck-title-mid,
  .panel--deck .deck-title > span:first-child,
  .panel--deck .deck-title > span:last-child{ transform: none; }
  .panel--deck .deck-text{
    --cascade-step: 0px;
    position: static;
    width: 100%;
    max-width: 460px;
    font-size: clamp(15px, 4.2vw, 19px) !important;
    line-height: 1.5;
    white-space: normal;
    /* читаемость поверх белых деталей робота в видео-кадре */
    background: rgba(3,3,4,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 14px 16px;
    border-radius: 4px;
  }
  .panel--deck .deck-text span{ display: inline; }  /* строки сливаются в абзац */
  .panel--deck .deck-text span::after{ content: " "; }
  .panel--deck .deck-text--left{ text-align: left; }
  .panel--deck .deck-text--right{
    text-align: left;
    margin-bottom: auto;
  }
  .deck-note{
    top: clamp(12px, 2vh, 22px);
    left: clamp(16px, 4vw, 28px);
    font-size: clamp(12px, 3.2vw, 15px);
  }

  /* --- 4-я остановка: Contact ------------------------------------------ */
  .panel--contact{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: clamp(56px, 8vh, 88px) 6vw 36px;
  }
  .panel--contact .contact-title{
    position: static;
    margin-top: auto;
    font-size: clamp(36px, 10vw, 80px);
  }
  .panel--contact .contact-body{
    position: static;
    transform: none;
    margin-bottom: auto;
    width: min(560px, 100%);
    /* подложка: в портрете видео-фон даёт белый корпус робота под текстом */
    background: rgba(3,3,4,.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: clamp(18px, 3vh, 28px) clamp(16px, 4vw, 26px);
    border-radius: 4px;
  }
  .panel--contact .contact-lead{ font-size: clamp(15px, 4.3vw, 21px); }
  .panel--contact .contact-mail{
    font-size: clamp(14px, 4vw, 19px);
    word-break: break-all;
  }
}

/* ---------- Альбомная ориентация уже «квадратнее» 16:9 (iPad 4:3, 16:10) ----------
   .deck-stage = 16:9 cover и шире экрана; элементы, привязанные к её краям,
   уезжают за вьюпорт. Прижимаем тексты и заголовок к видимой области:
   вылет сцены с каждой стороны = (100vh·16/9 − 100vw) / 2. */
@media (orientation: landscape) and (max-aspect-ratio: 16/9) and (min-width: 821px){
  .panel--deck .deck-title{ width: min(72%, 90vw); }
  .panel--deck .deck-text--left{
    left: calc((100vh * 16 / 9 - 100vw) / 2 + 2.5vw);
  }
  .panel--deck .deck-text--right{
    right: calc((100vh * 16 / 9 - 100vw) / 2 + 2.5vw);
  }
}

/* ---------- Телефоны в альбомной ориентации (низкие экраны) ---------- */
@media (max-height: 480px) and (orientation: landscape){
  .panel--full{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(56px, 9vh, 80px) 5vw 60px;
  }
  .panel--full .panel-title-xl{ font-size: clamp(30px, 6vw, 56px); }
  .panel-cards{ gap: 14px; }
  .panel-card{ padding: 14px 18px; }
  .site-logo{ height: 44px; }
  .hero-tagline{ max-width: 50vw; }
  .hero-tagline p br{ display: none; }
}

/* ===== Нулевая страница (обложка) ===== */
#cover{
  position: fixed; inset: 0; z-index: 200;
  overflow: hidden;
  background: var(--bg);
  opacity: 1;
  transition: opacity .9s ease;
}
#cover.cover--hidden{ opacity: 0; pointer-events: none; }

#cover-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;             /* фон всегда на весь экран */
  object-position: 50% 50%;
  filter: brightness(.94);       /* цветное видео, лишь чуть притушено под текст */
}

/* затемнение по краям + к низу — для читаемости текста */
.cover-scrim{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,0) 46%, rgba(0,0,0,.6) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%);
}

.cover-content{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  padding: 0 6vw;
  font-family: "League Spartan", "Inter", sans-serif;
}
.cover-word{
  font-weight: 800;
  font-size: clamp(44px, 8vw, 120px);
  letter-spacing: -.02em;
  color: var(--fg);
  line-height: .96;
  min-height: .96em;             /* держим высоту, пока текст «печатается» */
}
/* мигающая каретка печатной машинки */
.cover-word::after{
  content: "";
  display: inline-block;
  width: .05em; height: .82em;
  margin-left: .04em;
  background: var(--fg);
  vertical-align: text-bottom;
  opacity: 0;
}
.cover-word.typing::after{ opacity: 1; }                       /* печатаем — каретка горит */
.cover-word.typed::after{ animation: caretBlink 1.05s steps(1) infinite; }  /* готово — мигает */
@keyframes caretBlink{ 0%,100%{ opacity: 1 } 50%{ opacity: 0 } }

.cover-enter{
  position: absolute; left: 50%; bottom: clamp(26px, 5vh, 52px);
  transform: translateX(-50%);
  font-family: "League Spartan", "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase;
  color: var(--fg);
  animation: coverBob 2s infinite ease-in-out;
}
@keyframes coverBob{ 0%,100%{ transform: translate(-50%, 0); opacity: .7 } 50%{ transform: translate(-50%, 6px); opacity: 1 } }