/* ============================================================
   КОМПОНЕНТЫ
   ============================================================ */

/* ─────────── ПРЕЛОАДЕР ───────────
   Пять актов: включение экрана, входящий сигнал, субъект,
   архив, сборка. Всё движение считает один rAF-таймлайн
   в boot.js — здесь только внешний вид и переходы состояний. */

.boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #030304;
  overflow: hidden;
  cursor: pointer;
}

/* Акт 0: линия разворачивается в полный кадр, как включается ЭЛТ. */
.boot__crt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%) scaleX(.02) scaleY(.002);
  background: #0b0b10;
  box-shadow: 0 0 60px rgba(255, 255, 255, .35);
  transition: transform 460ms cubic-bezier(.7, 0, .2, 1);
}
.boot.act-on .boot__crt { transform: translate(-50%, -50%) scaleX(1) scaleY(.002); }
.boot.act-open .boot__crt {
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  transition: transform 520ms cubic-bezier(.2, .8, .2, 1), box-shadow 700ms linear;
}

.boot__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, 760px);
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.boot.act-open .boot__inner { opacity: 1; }

/* ---- Кадр наблюдения ---- */

.boot__frame {
  position: relative;
  margin: 0 0 var(--space-3);
  aspect-ratio: 16 / 8.2;
  overflow: hidden;
  background: #060608;
  border: 1px solid rgba(255, 255, 255, .14);
}

.boot__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: contrast(1.2) brightness(1.1);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 520ms var(--ease), transform 3200ms linear;
}
.boot__img.is-on { opacity: 1; transform: scale(1); }

/* Проявление кадра сверху вниз: маска ползёт вместе с полосой. */
.boot__reveal {
  position: absolute;
  inset: 0;
  background: #060608;
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 900ms cubic-bezier(.4, 0, .2, 1);
}
.boot__frame.is-revealed .boot__reveal { transform: scaleY(0); }

.boot__scanbar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
  box-shadow: 0 0 22px 6px rgba(255, 46, 136, .5);
  opacity: 0;
}
.boot__frame.is-scanning .boot__scanbar { opacity: 1; }

.boot__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--pink);
}
.boot__corner--tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.boot__corner--tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.boot__corner--bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.boot__corner--br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

.boot__cap {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--fg-muted);
  background: rgba(3, 3, 4, .8);
  padding: .25em .6em;
}

/* Плитки, на которые кадр рассыпается в акте «сборка». */
.boot__tiles {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(5, 1fr);
  pointer-events: none;
}
.boot__tiles i {
  background: #050506;
  opacity: 0;
  transform: scale(1);
  transition: opacity 260ms linear, transform 420ms var(--ease-sharp);
}
.boot__frame.is-breaking .boot__tiles i {
  opacity: 1;
  transform: scale(1.04) translateY(var(--ty, 0));
  transition-delay: var(--d, 0ms);
}

/* ---- Выноски ---- */

.boot__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.boot__labels span {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--cyan);
  background: rgba(3, 3, 4, .86);
  border: 1px solid rgba(33, 230, 255, .35);
  padding: .3em .6em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.boot__labels span.is-on { opacity: 1; transform: none; }

/* ---- Логотип из символов ---- */

.boot__ascii {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: clamp(4px, 1.15vw, 9px);
  line-height: 1.12;
  color: var(--pink);
  white-space: pre;
  overflow: hidden;
  min-height: 6.8em;
  opacity: .2;
  transition: opacity 600ms var(--ease);
}
.boot__ascii.is-on { opacity: 1; }

/* ---- Консоль ---- */

.boot__console {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: start;
  font-family: var(--font-mono);
  font-size: var(--step-sm);
}

.boot__log {
  min-height: 7.4em;
  color: var(--fg-muted);
  white-space: pre-wrap;
  line-height: 1.6;
}
.boot__log b { color: var(--lime); font-weight: 400; }
.boot__log i { color: var(--cyan); font-style: normal; }
.boot__log u { color: var(--pink); text-decoration: none; }

.boot__hex {
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
  color: rgba(33, 230, 255, .4);
  text-align: right;
  white-space: pre;
}

/* ---- Прогресс ---- */

.boot__bar {
  height: 4px;
  margin-top: var(--space-2);
  background: rgba(255, 255, 255, .1);
}
.boot__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--pink));
}

.boot__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: .6rem;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: .08em;
  color: var(--fg-dim);
}

.boot__pct {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--pink);
  letter-spacing: -0.02em;
}
.boot__pct::after { content: "%"; font-size: .5em; opacity: .6; margin-left: .15em; }

.boot__act { flex: 1; text-transform: uppercase; color: var(--fg-muted); }

.boot__skip {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: .1em;
  color: var(--fg-dim);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--duration) var(--ease);
}
.boot__skip:hover { color: var(--pink); }

/* ---- Финал ---- */

/* Специфичность выше, чем у .glitch ниже по файлу: иначе тот
   перебивает position и невидимый блок занимает место в потоке. */
.boot .boot__granted {
  position: absolute;
  z-index: 4;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
.boot.is-granted .boot__granted { animation: granted 820ms var(--ease-sharp) both; }
@keyframes granted {
  0%   { opacity: 0; transform: scale(.9) skewX(-12deg); }
  20%  { opacity: 1; transform: scale(1.03) skewX(2deg); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}
.boot.is-granted .boot__inner { opacity: 0; transition: opacity 240ms linear; }

.boot__slats {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.boot.is-done .boot__slats { opacity: 1; }
.boot__slats i {
  flex: 1;
  background: #030304;
  transform: translateY(0);
  transition: transform 640ms cubic-bezier(.65, 0, .2, 1);
}
.boot.is-done { pointer-events: none; }
.boot.is-done .boot__slats i { transform: translateY(-101%); }
.boot.is-done .boot__slats i:nth-child(1) { transition-delay: 0ms; }
.boot.is-done .boot__slats i:nth-child(2) { transition-delay: 70ms; }
.boot.is-done .boot__slats i:nth-child(3) { transition-delay: 140ms; }
.boot.is-done .boot__slats i:nth-child(4) { transition-delay: 40ms; }
.boot.is-done .boot__slats i:nth-child(5) { transition-delay: 170ms; }
.boot.is-done .boot__slats i:nth-child(6) { transition-delay: 100ms; }
.boot.is-done .boot__slats i:nth-child(7) { transition-delay: 200ms; }
.boot.is-done .boot__slats i:nth-child(8) { transition-delay: 30ms; }

@media (max-width: 620px) {
  .boot__console { grid-template-columns: 1fr; }
  .boot__hex { display: none; }
  .boot__labels span { font-size: 9px; }
}

/* ─────────── ГЛИТЧ-ТЕКСТ ─────────── */

.glitch { position: relative; display: inline-block; }

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}
.glitch::before {
  color: var(--cyan);
  transform: translate(-2px, 0);
  animation: glitch-a 3.4s steps(2) infinite;
  mix-blend-mode: screen;
}
.glitch::after {
  color: var(--pink);
  transform: translate(2px, 0);
  animation: glitch-b 2.8s steps(2) infinite;
  mix-blend-mode: screen;
}

@keyframes glitch-a {
  0%, 88%, 100% { clip-path: inset(0 0 100% 0); }
  90%  { clip-path: inset(12% 0 60% 0); transform: translate(-5px, -2px); }
  93%  { clip-path: inset(55% 0 22% 0); transform: translate(4px, 1px); }
  96%  { clip-path: inset(78% 0 8% 0);  transform: translate(-3px, 2px); }
}
@keyframes glitch-b {
  0%, 85%, 100% { clip-path: inset(100% 0 0 0); }
  87%  { clip-path: inset(30% 0 48% 0); transform: translate(5px, 2px); }
  91%  { clip-path: inset(66% 0 14% 0); transform: translate(-4px, -1px); }
  95%  { clip-path: inset(5% 0 82% 0);  transform: translate(3px, 1px); }
}

/* ─────────── HERO ─────────── */

.hero {
  position: relative;
  z-index: 1;
  height: 420vh;               /* длина скролл-скраба */
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: #030206;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform, filter;
  opacity: 0;
  transition: opacity 800ms var(--ease);
}
.hero__video.is-ready { opacity: 1; }

/* Розовая перекраска исходного бело-синего видео. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 28% at 50% 47%, rgba(4,4,6,.8), rgba(4,4,6,.45) 42%, rgba(4,4,6,0) 78%),
    radial-gradient(ellipse 70% 58% at 50% 48%, rgba(255,46,136,.07), transparent 75%),
    linear-gradient(180deg, rgba(4,4,6,.72), rgba(4,4,6,.12) 26%, rgba(4,4,6,.18) 62%, rgba(4,4,6,.88));
  mix-blend-mode: normal;
  pointer-events: none;
}

.hero__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 4px);
  animation: scan-move 7s linear infinite;
}
@keyframes scan-move { to { background-position: 0 200px; } }

.hero__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 1.25rem;
  text-align: center;
  pointer-events: none;
}

.hero__layer {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(30px) scale(.97);
  will-change: opacity, transform;
}
.hero__layer a { pointer-events: auto; }

.hero__title {
  font-size: clamp(1.7rem, 8vw, 5.4rem);
  max-width: 94vw;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.95), 0 0 42px rgba(0,0,0,.8);
}

.hero__sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-sm);
  letter-spacing: 0.187em;
  color: var(--fg-muted);
}

.hero__step {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.187em;
  color: var(--pink);
}

.hero__big { font-size: var(--step-4); color: #fff; }

.hero__note {
  margin: 0;
  max-width: 34ch;
  font-size: var(--step-sm);
  color: var(--fg-muted);
}

.hero__final {
  font-size: clamp(1.5rem, 3.6vw + .6rem, 3.4rem);
  color: #fff;
  margin-bottom: var(--space-3);
}

.hero__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 6vh, 54px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.209em;
  color: #ffffff;
  transition: opacity 400ms var(--ease);
}
.hero__hint svg { animation: hint-bounce 1.7s var(--ease) infinite; }
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50%      { transform: translateY(6px); opacity: 1; }
}

.hero__track {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.1);
}
.hero__track i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--violet), var(--pink), #fff);
  box-shadow: var(--glow-pink);
}

/* ─────────── HUD ─────────── */

.hud {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.055em;
  color: var(--fg-muted);
  line-height: 1.7;
  padding: .55rem .7rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(4,4,6,.82);
  pointer-events: none;
}
.hud b { color: var(--pink); font-weight: 400; margin-right: .5em; }
.hud--tl { top: 88px; left: clamp(12px, 3vw, 30px); }
.hud--tr { top: 88px; right: clamp(12px, 3vw, 30px); text-align: right; }
.hud--bl { bottom: 26px; left: clamp(12px, 3vw, 30px); }

.rec {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: .5em;
  border-radius: 50%;
  background: var(--alert);
  box-shadow: 0 0 10px var(--alert);
  animation: led 1.1s ease-in-out infinite;
}

/* ─────────── БЕГУЩАЯ СТРОКА ─────────── */

.marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-block: 1px solid var(--border-color);
  background: rgba(255,46,136,.05);
  padding: .75rem 0;
}

.marquee__row {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.060em;
  text-transform: uppercase;
  color: rgba(246,233,243,.86);
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__row span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--pink);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ─────────── СПИСОК-ГАЛОЧКИ ─────────── */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: .75rem 0;
  border-top: 1px solid var(--border-soft);
  font-size: var(--step-sm);
  color: var(--fg-muted);
  transition: color var(--duration) var(--ease), padding-left var(--duration) var(--ease);
}
.ticks li:hover { color: var(--fg); padding-left: .5rem; }
.ticks b {
  font-family: var(--font-mono);
  color: var(--pink);
  font-weight: 700;
}

/* ─────────── ПАНЕЛЬ-HUD ─────────── */

.panel {
  border: 1px solid var(--border-color);
  background: linear-gradient(180deg, var(--surface), rgba(11,7,16,.6));
  box-shadow: var(--shadow);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.panel__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem .9rem;
  background: linear-gradient(90deg, var(--pink), var(--pink-deep));
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.099em;
}
.panel__bar i {
  width: 34px; height: 8px;
  background: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 4px);
}

.panel__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
}

.stat { display: flex; flex-direction: column; gap: .2rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--pink);
  line-height: 1;
}
.stat__cap {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.066em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

.meter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem .6rem;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.077em;
  color: var(--fg-dim);
}
.meter i {
  grid-column: 1 / -1;
  height: 7px;
  background: #1b1122;
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
}
.meter i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--v);
  background: repeating-linear-gradient(90deg, var(--pink) 0 5px, transparent 5px 8px);
  animation: meter-in 1.4s var(--ease) both;
}
@keyframes meter-in { from { width: 0; } }
.meter b { color: var(--fg); font-weight: 500; }

.panel__foot {
  padding: .7rem .9rem;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.055em;
  color: var(--fg-dim);
}

.caret {
  display: inline-block;
  width: 8px; height: 1em;
  margin-left: .3em;
  background: var(--pink);
  vertical-align: text-bottom;
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ─────────── КАРТОЧКИ УСЛУГ ─────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface), rgba(8,5,12,.75));
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease),
              transform 200ms var(--ease);
}

.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-sharp);
}

.card:hover {
  border-color: var(--pink);
  box-shadow: var(--shadow-hover);
}
.card:hover::after { transform: scaleX(1); }

/* Линия-сканер, пробегающая по карточке при наведении. */
.card__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,46,136,.16), transparent);
  height: 40%;
  transform: translateY(-120%);
  pointer-events: none;
}
.card:hover .card__scan { animation: card-scan 1.1s var(--ease) infinite; }
@keyframes card-scan {
  from { transform: translateY(-120%); }
  to   { transform: translateY(320%); }
}

.card__idx {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.132em;
  color: var(--pink);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0;
}

.card__text {
  margin: 0;
  font-size: var(--step-sm);
  color: var(--fg-muted);
  flex: 1;
}

.card__list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: 0; padding: 0;
}
.card__list li {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  padding: .25em .6em;
  border: 1px solid var(--border-color);
  color: var(--fg-dim);
}

.card__foot {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.066em;
  color: var(--fg-dim);
}

/* ─────────── СЛАЙДЕРЫ ─────────── */

.slider {
  margin-top: var(--space-4);
  padding-left: max(1.25rem, calc((100vw - var(--container)) / 2));
  cursor: grab;
  user-select: none;
}
.slider.is-dragging { cursor: grabbing; }

.slider__rail {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .5rem 1.25rem .5rem 0;
  scrollbar-width: none;
}
.slider__rail::-webkit-scrollbar { display: none; }

.slider__bar {
  width: min(100% - 2.5rem, var(--container));
  height: 2px;
  margin-top: var(--space-3);
  background: rgba(255,255,255,.08);
}
.slider__bar i {
  display: block;
  height: 100%;
  width: 22%;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  box-shadow: var(--glow-pink);
  transform: translateX(0);
}

.step {
  flex: 0 0 clamp(230px, 30vw, 330px);
  scroll-snap-align: start;
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--surface-2), rgba(8,5,12,.6));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.step:hover { border-color: var(--pink); transform: translateY(-4px); }
.step__n {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px var(--pink);
  line-height: 1;
}
.step h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
  margin: var(--space-2) 0 .4rem;
}
.step p { margin: 0 0 var(--space-3); font-size: var(--step-sm); color: var(--fg-muted); }
.step__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.088em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(33,230,255,.3);
  padding: .25em .6em;
}

/* ─────────── РАБОТЫ ─────────── */

.work {
  flex: 0 0 clamp(260px, 38vw, 440px);
  scroll-snap-align: start;
}

.work__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: #0a0610;
}
.work__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) sepia(.4) hue-rotate(275deg) saturate(2.6);
  transform: scale(1.02);
  transition: filter 600ms var(--ease), transform 900ms var(--ease);
}
.work:hover .work__media img { filter: none; transform: scale(1.08); }

.work__media--lock { display: grid; place-items: center; }
.work__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: .28;
  animation: grain 400ms steps(2) infinite;
}

.work__badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.121em;
  padding: .3em .7em;
  background: var(--pink);
  color: #fff;
}
.work__badge--red { background: transparent; border: 1px solid var(--alert); color: var(--alert); }

.work__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem .6rem;
  padding: var(--space-2) 0 0;
}
.work__meta h3 {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-transform: uppercase;
  margin: 0;
}
.work__meta p { grid-column: 1; margin: 0; font-size: var(--step-sm); color: var(--fg-muted); }
.work__meta span {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: start;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  color: var(--fg-dim);
}

/* ─────────── ЛАБ / ТЕРМИНАЛ ─────────── */

.lab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.terminal {
  border: 1px solid var(--border-color);
  background: rgba(5,3,9,.88);
  box-shadow: var(--shadow);
}
.terminal__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  color: var(--fg-dim);
}
.terminal__bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--fg-dim);
}
.terminal__bar i:first-child { background: var(--alert); }
.terminal__bar i:nth-child(2) { background: var(--pink); }
.terminal__bar i:nth-child(3) { background: var(--lime); }
.terminal__bar span { margin-left: auto; }

.terminal__body {
  margin: 0;
  padding: var(--space-3);
  min-height: 19em;
  font-family: var(--font-mono);
  font-size: var(--step-sm);
  line-height: 1.7;
  color: var(--fg-muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.terminal__body .p { color: var(--pink); }
.terminal__body .g { color: var(--lime); }
.terminal__body .c { color: var(--cyan); }

/* ─────────── КОНТАКТ ─────────── */

.section--contact { text-align: center; padding-block: var(--space-7); }
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-4);
}
.contact__note {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.077em;
  color: var(--fg-dim);
}

/* ─────────── ВСПЛЫВАЮЩИЕ ОКНА ─────────── */

.toasts {
  position: fixed;
  right: clamp(10px, 2vw, 22px);
  /* Выше липкой плашки — иначе окна накладываются друг на друга. */
  bottom: clamp(74px, 10vh, 96px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: min(92vw, 330px);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  border: 1px solid var(--pink);
  background: #0b0810;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  animation: toast-in 420ms var(--ease) both;
  overflow: hidden;
}
.toast.is-out { animation: toast-out 320ms var(--ease-sharp) both; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px) skewX(-8deg); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(30px) scaleY(.6); }
}

.toast__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  background: repeating-linear-gradient(45deg, var(--pink) 0 6px, var(--pink-deep) 6px 12px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.099em;
}
.toast__bar button { margin-left: auto; line-height: 1; opacity: .8; }
.toast__bar button:hover { opacity: 1; }

.toast--cyan .toast__bar { background: repeating-linear-gradient(45deg, var(--cyan) 0 6px, #0e7f92 6px 12px); color: #04121a; }
.toast--red  .toast__bar { background: repeating-linear-gradient(45deg, var(--alert) 0 6px, #7a1414 6px 12px); }

.toast__body {
  padding: .7rem .75rem;
  font-size: var(--step-sm);
  color: var(--fg-muted);
}
.toast__body b { color: var(--fg); font-weight: 600; }

.toast__actions {
  display: flex;
  gap: .4rem;
  padding: 0 .75rem .7rem;
}
.toast__actions button {
  flex: 1;
  padding: .45em .6em;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.088em;
  border: 1px solid var(--border-color);
  color: var(--fg-muted);
  transition: all var(--duration) var(--ease);
}
.toast__actions button:hover { border-color: var(--pink); color: #fff; background: var(--accent-soft); }
.toast__actions .is-primary { background: var(--pink); border-color: var(--pink); color: #fff; }

.toast__life {
  height: 2px;
  background: var(--pink);
  transform-origin: left;
  animation: toast-life linear forwards;
}
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ─────────── МОДАЛКА-ОШИБКА ─────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(3,1,6,.86);
  animation: modal-fade 240ms var(--ease) both;
  padding: 1.25rem;
}
@keyframes modal-fade { from { opacity: 0; } }

.modal[hidden] { display: none; }   /* класс с display перебивал атрибут hidden — окно висело поверх всей страницы */

.modal__win {
  width: min(100%, 520px);
  border: 1px solid var(--pink);
  background: #0a0510;
  box-shadow: 0 0 0 1px rgba(255,46,136,.2), 0 30px 90px rgba(0,0,0,.7);
  animation: modal-pop 360ms var(--ease-sharp) both;
}
@keyframes modal-pop {
  from { transform: translateY(18px) scale(.94) skewX(-3deg); opacity: 0; }
}

.modal__bar {
  padding: .5rem .8rem;
  background: repeating-linear-gradient(45deg, var(--pink) 0 7px, var(--pink-deep) 7px 14px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--step-sm);
  font-weight: 700;
  letter-spacing: 0.110em;
}

.modal__body {
  padding: var(--space-3);
  font-size: var(--step-sm);
  color: var(--fg-muted);
}
.modal__body pre {
  margin: var(--space-2) 0 0;
  padding: .7rem;
  background: #070310;
  border: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  white-space: pre-wrap;
}

.modal__foot {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  padding: 0 var(--space-3) var(--space-3);
}
.modal__foot button {
  padding: .6em 1.4em;
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  letter-spacing: 0.099em;
  border: 1px solid var(--border-color);
  color: var(--fg-muted);
  transition: all var(--duration) var(--ease);
}
.modal__foot button:hover { border-color: var(--pink); color: #fff; }
.modal__foot .is-primary { background: var(--pink); border-color: var(--pink); color: #fff; }

/* ─────────── HUD СКРОЛЛА ─────────── */

.topbar {
  position: fixed;
  top: 0; left: 0;
  z-index: 70;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--pink), #fff);
  box-shadow: var(--glow-pink);
}

.scrollhud {
  position: fixed;
  right: clamp(8px, 1.4vw, 18px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.099em;
  color: var(--fg-dim);
  pointer-events: none;
}
.scrollhud__pct { color: var(--pink); font-weight: 700; }
.scrollhud__track {
  width: 2px;
  height: clamp(90px, 22vh, 190px);
  background: rgba(255,255,255,.1);
  position: relative;
}
.scrollhud__track i {
  position: absolute;
  top: 0; left: -1px;
  width: 4px;
  height: 0%;
  background: linear-gradient(180deg, var(--pink), var(--violet));
  box-shadow: var(--glow-pink);
}
.scrollhud__sec { writing-mode: vertical-rl; letter-spacing: 0.165em; }

/* ─────────── РАДИАЛЬНОЕ МЕНЮ ─────────── */

.radial {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, #120610, #030106);
  animation: modal-fade 260ms var(--ease) both;
}
.radial[hidden] { display: none; }

.radial__rings {
  position: absolute;
  display: grid;
  place-items: center;
  width: 320px; height: 320px;
}
.radial__rings i {
  position: absolute;
  border: 1px dashed rgba(255,46,136,.3);
  border-radius: 50%;
  animation: spin 22s linear infinite;
}
.radial__rings i:nth-child(1) { width: 300px; height: 300px; }
.radial__rings i:nth-child(2) { width: 220px; height: 220px; animation-direction: reverse; animation-duration: 16s; border-style: dotted; }
.radial__rings i:nth-child(3) { width: 150px; height: 150px; animation-duration: 30s; }
@keyframes spin { to { transform: rotate(360deg); } }

.radial__core {
  position: absolute;
  display: grid;
  place-items: center;
  width: 108px; height: 108px;
  border: 1px solid var(--pink);
  border-radius: 50%;
  background: rgba(255,46,136,.08);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.055em;
  box-shadow: var(--glow-pink);
}
.radial__core small { font-family: var(--font-mono); font-size: 9px; color: var(--fg-dim); letter-spacing: 0.110em; }

.radial__item {
  position: absolute;
  width: 92px; height: 92px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.066em;
  text-align: center;
  color: var(--fg-muted);
  border: 1px solid var(--border-color);
  background: rgba(17,10,24,.9);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transform: rotate(calc(var(--i) * 60deg)) translateY(-152px) rotate(calc(var(--i) * -60deg)) scale(.4);
  opacity: 0;
  animation: radial-in 460ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms + 80ms);
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.radial__item:hover, .radial__item:active { border-color: var(--pink); color: #fff; }
.radial__item--accent { background: rgba(255,46,136,.16); color: #fff; border-color: var(--pink); }

@keyframes radial-in {
  to {
    opacity: 1;
    transform: rotate(calc(var(--i) * 60deg)) translateY(-152px) rotate(calc(var(--i) * -60deg)) scale(1);
  }
}

.radial__status {
  position: absolute;
  bottom: 8vh;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.110em;
  color: var(--fg-dim);
}
.radial__status i {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: led 1.4s ease-in-out infinite;
}

/* ─────────── АДАПТИВ ─────────── */

@media (max-width: 1100px) {
  .lab { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 900px) {
  .hero { height: 360vh; }
  .hud--tr, .hud--bl { display: none; }
  .hud--tl { top: 72px; font-size: 9px; }
  .scrollhud__sec { display: none; }
  .panel__body { grid-template-columns: 1fr 1fr; }
  .slider { padding-left: 1.25rem; }
  .toasts { width: min(94vw, 330px); }
}

@media (max-width: 420px) {
  .radial__item { width: 78px; height: 78px; transform: rotate(calc(var(--i) * 60deg)) translateY(-124px) rotate(calc(var(--i) * -60deg)) scale(.4); }
  @keyframes radial-in {
    to { opacity: 1; transform: rotate(calc(var(--i) * 60deg)) translateY(-124px) rotate(calc(var(--i) * -60deg)) scale(1); }
  }
  .radial__rings { width: 240px; height: 240px; }
  .radial__rings i:nth-child(1) { width: 232px; height: 232px; }
}

/* ─────────── ТОНИРОВКА ВИДЕО ───────────
   Исходник бело-синий: разворачиваем оттенок в розовый,
   чтобы герой жил в той же палитре, что и весь сайт. */
.hero__video {
  filter: hue-rotate(112deg) saturate(1.2) contrast(1.3) brightness(1.5);
  image-rendering: pixelated;
}