:root {
  --black: #050505;
  --red: #D71919;
  --white: #FFFFFF;
  --grey: #A8A8A8;
  --head: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--black); color: var(--white); -webkit-text-size-adjust: 100%; }
body { background: var(--black); font-family: var(--body); line-height: 1.45; overflow-x: hidden; }

/* шапка */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: max(18px, env(safe-area-inset-top)) clamp(16px, 4vw, 48px) 18px;
  pointer-events: none;
}
.logo {
  pointer-events: auto; color: var(--white); text-decoration: none;
  font: italic 900 clamp(26px, 2.6vw, 36px)/1 var(--head); letter-spacing: -0.02em;
}
.logo .bolt { color: var(--red); }
.count { font: italic 700 14px/1 var(--head); letter-spacing: 0.08em; color: var(--grey); }
.count b { color: var(--white); font-weight: 900; }

/* история: закреплённая сцена, прокрутка перематывает кадры */
.story { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,5,5,.55) 0%, rgba(5,5,5,0) 38%, rgba(5,5,5,0) 62%, rgba(5,5,5,.55) 100%);
}

.scene {
  position: absolute; top: 50%; width: min(34vw, 460px);
  opacity: 0; transform: translateY(calc(-50% + 24px)); will-change: opacity, transform;
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.scene[data-side="left"] { left: clamp(16px, 6vw, 96px); }
.scene[data-side="right"] { right: clamp(16px, 6vw, 96px); text-align: right; }
.eyebrow {
  display: inline-block; font: italic 800 13px/1 var(--head); letter-spacing: .16em; text-transform: uppercase;
  color: var(--white); background: var(--black); border-left: 3px solid var(--red); padding: 6px 10px 5px; margin-bottom: 18px;
}
.scene[data-pos="bottom"] { top: auto; bottom: clamp(56px, 11vh, 120px); width: min(60vw, 760px); }
.scene[data-pos="bottom"] h1 { font-size: clamp(40px, 4.6vw, 76px); }
.scene h1, .scene h2 {
  font: italic 900 clamp(48px, 6.4vw, 104px)/.92 var(--head); letter-spacing: -0.02em; text-transform: uppercase;
}
.lead { margin-top: 18px; font-size: clamp(16px, 1.25vw, 19px); color: #E9E9E9; max-width: 30em; }
.scene[data-side="right"] .lead { margin-left: auto; }
.note { margin-top: 14px; font: italic 700 13px/1.3 var(--head); letter-spacing: .06em; color: var(--grey); text-transform: uppercase; }

.dots {
  position: absolute; right: clamp(12px, 2vw, 28px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 5;
}
.dots i { display: block; width: 3px; height: 16px; background: rgba(255,255,255,.28); transition: background .3s, height .3s; }
.dots i.on { background: var(--red); height: 34px; }

.hint {
  position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  font: italic 700 13px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
  transition: opacity .4s;
}
.hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 12px auto 0; background: linear-gradient(var(--red), transparent); animation: drop 1.6s ease-in-out infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.loader { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); transition: opacity .6s; }
.loader span { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s; }
.loader.done { opacity: 0; }

/* финал */
.final {
  position: relative; z-index: 2; background: var(--black); border-top: 1px solid #1d1d1d;
  padding: clamp(80px, 14vh, 160px) clamp(16px, 6vw, 96px) clamp(64px, 10vh, 120px);
}
.chain { font: italic 900 clamp(44px, 7.4vw, 128px)/.95 var(--head); letter-spacing: -0.02em; text-transform: uppercase; }
.chain span { display: inline-block; }
.chain .red { color: var(--red); }
.facts {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: clamp(48px, 8vh, 88px);
  background: #222; border: 1px solid #222;
}
.facts li { background: var(--black); padding: 26px 22px; }
.facts b { display: block; font: italic 900 clamp(34px, 3.6vw, 56px)/1 var(--head); color: var(--white); }
.facts span { display: block; margin-top: 10px; color: var(--grey); font-size: 15px; }
.patent { margin-top: 28px; font: italic 700 14px/1.4 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }

.foot {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 22px clamp(16px, 6vw, 96px) max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid #1d1d1d; color: #6d6d6d; font: italic 700 13px/1 var(--head); letter-spacing: .14em;
}

/* телефон и узкие экраны: картинка сверху, текст снизу */
@media (max-aspect-ratio: 1/1) {
  .shade { background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0) 50%, rgba(5,5,5,.85) 72%, rgba(5,5,5,.95) 100%); }
  .scene, .scene[data-side="right"] {
    left: 16px; right: 16px; width: auto; top: auto; bottom: max(64px, calc(env(safe-area-inset-bottom) + 48px));
    text-align: left; transform: translateY(24px);
  }
  .scene[data-side="right"] .lead { margin-left: 0; }
  .scene h1, .scene h2 { font-size: clamp(40px, 12vw, 64px); }
  .eyebrow { margin-bottom: 12px; }
  .lead { margin-top: 12px; font-size: 16px; }
  .dots { top: auto; bottom: 24px; right: 16px; left: 16px; transform: none; flex-direction: row; gap: 6px; }
  .dots i { width: auto; flex: 1; height: 3px; }
  .dots i.on { height: 3px; }
  .hint { display: none; }
}
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li { padding: 20px 16px; }
  .facts span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hint::after { animation: none; }
}