/* ============================================================
   FrameRush — dark cinematic landing
   Display: Inter · Body: Inter · Accent: #2d93de (blue)
   ============================================================ */

/* ===== RESET & TOKENS ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* — Colors — */
  --bg:        #080c14;
  --bg-2:      #0c1220;
  --bg-3:      #101a2e;
  --ink:       #f3efe7;
  --dim:       rgba(243,239,231,0.56);
  --muted:     rgba(243,239,231,0.30);
  --line:      rgba(243,239,231,0.10);
  --line-2:    rgba(243,239,231,0.18);
  --accent:    #2d93de;
  --accent-2:  #5bb0ef;
  --accent-ink:#ffffff;
  --glow:      rgba(45,147,222,0.35);
  --danger:    #c0392b; /* ранее хардкод в 4 местах */

  /* — Typography — */
  --display: 'Inter', -apple-system, sans-serif;
  --body:    'Inter', -apple-system, sans-serif;

  --fs-xs:   11px;                       /* метки, micro */
  --fs-sm:   13px;                       /* вторичный текст */
  --fs-base: 15px;                       /* тело */
  --fs-md:   clamp(15px, 1.4vw, 18px);  /* lead / sub */
  --fs-lg:   clamp(18px, 2.2vw, 32px);  /* intro h2 */
  --fs-xl:   clamp(22px, 3.2vw, 48px);  /* section-title / hero */
  --fs-2xl:  clamp(28px, 4vw, 58px);    /* contact-title */

  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:   1.04;
  --lh-snug:    1.14;
  --lh-base:    1.55;
  --lh-relaxed: 1.6;

  --ls-tight:  -0.03em;
  --ls-snug:   -0.02em;
  --ls-wide:    0.10em;
  --ls-wider:   0.18em;

  /* — Border radius — */
  --r-sm:   8px;    /* теги, превью, мелкие элементы */
  --r-md:   12px;   /* карточки шагов, why-cards */
  --r-lg:   16px;   /* основные карточки, модалки */
  --r-pill: 999px;  /* кнопки, nav-cta, admin-bar */

  /* — Spacing (8px grid) — */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  80px;
  --sp-10: 96px;

  /* — Layout — */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: max(clamp(20px, 4vw, 64px), calc((100vw - 1440px) / 2));
}

html { scrollbar-width: thin; scrollbar-color: var(--accent) #07111f; scroll-behavior: smooth; }

body {
  background: linear-gradient(to right, #07111f, #080c14);
  color: var(--ink);
  font-family: var(--body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: #07111f; }
body::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--r-pill); }
body::-webkit-scrollbar-thumb:hover { background: #5ab4f0; }

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--accent); }
img { max-width: 100%; display: block; }

/* ===== DOT-GRID BACKGROUND ===== */
.dot-grid-bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.dot-grid-bg canvas { display: block; }
.dot-grid-bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(16,15,18,0.55);
  pointer-events: none;
}

/* ===== WORKS VIDEO GRID ===== */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4); /* 18→16px */
  grid-auto-flow: row dense;
}
.work-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .28s var(--ease), border-color .3s, box-shadow .3s;
  will-change: transform;
}
.work-card[data-cols="1"][data-rows="1"] { aspect-ratio: 16 / 9; }
.works-grid--main {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4); /* унифицировано с works-grid */
  grid-auto-flow: row;
}
.admin-mode .works-grid--main {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(25% - 12px + 16px/4) calc(25vw * 9/16);
  border-radius: var(--r-sm);
}
body:not(.admin-mode) .works-grid--main .work-card-resize { display: none !important; }
.work-add, .work-placeholder { aspect-ratio: 16 / 9; }

/* YouTube inline player */
.yt-iframe-wrap { position: absolute; inset: 0; }
.yt-iframe-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

.work-card:hover { border-color: var(--line-2); }
.work-card.is-hovering { z-index: 6; border-color: var(--line-2); box-shadow: 0 26px 60px -22px rgba(0,0,0,0.72); }
.work-card > video,
.work-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wc-poster {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0.42));
  transition: opacity .4s var(--ease);
}
.wc-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wc-play {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%; /* 54→48 */
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); color: #fff; font-size: var(--fs-base);
  backdrop-filter: blur(4px); padding-left: var(--sp-1);
}
@media (hover: hover) { .work-card:hover .wc-poster { opacity: 0; } }
/* body.is-touch .wc-poster { opacity: 0; } — отключено: на тач нет автоплея */

/* Resize handle (admin only) */
.work-card-resize {
  position: absolute; right: 0; bottom: 0; z-index: 4;
  width: 24px; height: 24px; cursor: nwse-resize; display: none;
  touch-action: none;
  background: linear-gradient(135deg, transparent 45%, var(--accent) 45%);
  border-bottom-right-radius: var(--r-lg);
}
body.admin-mode .work-card-resize { display: block; }
.work-card.resizing { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 10; }
.work-card.resizing .wc-poster { opacity: 0; }

/* Edit button (admin only) */
.work-card-edit {
  position: absolute; top: var(--sp-2); right: 46px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,9,8,0.72); border: 1px solid var(--line-2); color: #fff;
  font-size: var(--fs-sm); line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.work-card-edit:hover { background: var(--accent); border-color: var(--accent); }
body.admin-mode .work-card-edit { display: flex; }

/* Drag-to-reorder */
body.admin-mode .work-card[data-id] { cursor: grab; }
.work-card.dragging { opacity: .45; outline: 2px dashed var(--accent); outline-offset: -2px; cursor: grabbing; }

/* Drop zone indicators */
.work-card.drop-n, .work-card.drop-s,
.work-card.drop-e, .work-card.drop-w { outline: 3px solid var(--accent) !important; outline-offset: 2px; }
.work-card.drop-blocked { outline: 3px solid var(--danger) !important; outline-offset: 2px; } /* #c0392b → var(--danger) */
.work-card.drop-n::after, .work-card.drop-s::after,
.work-card.drop-e::after, .work-card.drop-w::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  border-radius: var(--r-md);
}
.work-card.drop-n::after  { background: linear-gradient(to bottom,  rgba(45,147,222,.28) 0%, transparent 50%); }
.work-card.drop-s::after  { background: linear-gradient(to top,     rgba(45,147,222,.28) 0%, transparent 50%); }
.work-card.drop-w::after  { background: linear-gradient(to right,   rgba(45,147,222,.28) 0%, transparent 50%); }
.work-card.drop-e::after  { background: linear-gradient(to left,    rgba(45,147,222,.28) 0%, transparent 50%); }
.work-card.drop-blocked::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  border-radius: var(--r-md);
  background: rgba(192,57,43,.18);
}

.work-card-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 46px var(--sp-4) var(--sp-3); /* 14→12, 16 */
  font-family: var(--display); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  color: #fff; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.7);
  background: linear-gradient(transparent, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.88));
}
.work-card-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 48px; height: 48px; border-radius: 50%; /* 56→48 */
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 18px;
  backdrop-filter: blur(4px); pointer-events: none;
}
.work-empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: var(--fs-sm);
}

/* Delete button (admin only) */
.work-card-del {
  position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,9,8,0.72); border: 1px solid var(--line-2); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.work-card-del:hover { background: var(--danger); border-color: var(--danger); } /* #c0392b → var(--danger) */
body.admin-mode .work-card-del { display: flex; }

/* Add tile + placeholder */
.work-add, .work-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  background: rgba(255,255,255,0.02);
  border: 1.5px dashed var(--line-2); color: var(--dim);
  font-family: var(--body); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.work-add:hover { border-color: var(--accent); color: var(--accent); background: rgba(45,147,222,0.06); }
.work-add-plus { font-size: 30px; line-height: 1; font-weight: var(--fw-medium); }

/* ===== WORK MODALS ===== */
.wm-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  background: rgba(6,6,8,0.74); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .25s var(--ease);
}
.wm-overlay.open { opacity: 1; }
.wm-dialog {
  position: relative; width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5); /* 26→24px */
  transform: translateY(14px); transition: transform .3s var(--ease);
}
.wm-overlay.open .wm-dialog { transform: none; }
.wm-close {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 5; /* 12→12 */
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid var(--line-2); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.wm-close:hover { background: rgba(255,255,255,0.14); }
.wm-title { font-family: var(--display); font-size: 20px; font-weight: var(--fw-semibold); margin: 0 0 var(--sp-4); }
.wm-preview {
  border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-4);
  background: #000; aspect-ratio: 16 / 9;
}
.wm-preview video, .wm-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wm-uploading { color: var(--dim); font-size: var(--fs-sm); padding: var(--sp-2) 0; }
.wm-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); } /* 6→8, 14→16 */
.wm-field > span { font-size: var(--fs-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--dim); font-weight: var(--fw-bold); }
.wm-field input, .wm-field textarea {
  width: 100%; padding: var(--sp-3) var(--sp-3); font: inherit; color: var(--ink); /* 11 13→12 12 */
  background: rgba(255,255,255,0.03); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); resize: vertical;
}
.wm-field input:focus, .wm-field textarea:focus { outline: none; border-color: var(--accent); }
.wm-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); } /* 10→12, 20→24 */
.wm-actions .btn { flex: 1; }
.wm-thumb { display: flex; align-items: center; gap: var(--sp-3); } /* 12→12 */
.wm-thumb-prev {
  width: 80px; height: 80px; flex: 0 0 auto; border-radius: var(--r-sm); overflow: hidden;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: var(--fs-xs);
}
.wm-thumb-prev img { width: 100%; height: 100%; object-fit: cover; }
.wm-thumb-btn.btn { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); } /* 9 16→8 16 */
.wm-thumb-clear { background: none; border: none; color: var(--dim); font-size: var(--fs-xs); cursor: pointer; text-decoration: underline; }
.wm-thumb-clear:hover { color: var(--ink); }

/* ── Lightbox: бегущая обводка ── */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes wlBorderRun {
  to { --border-angle: 360deg; }
}

/* ── Lightbox: общее ── */
.wl-overlay .wm-dialog {
  --mx: -9999px;
  --my: -9999px;
  width: auto; padding: 0; overflow: hidden;
  background:
    /* 1. Контент */
    linear-gradient(#0c0f14, #0c0f14) padding-box,
    /* 2. Курсорный glow поверх полоски */
    radial-gradient(90px circle at var(--mx) var(--my),
      rgba(255,255,255,0.18),
      transparent 70%
    ) border-box,
    /* 3. Бегущая полоска */
    conic-gradient(
      from var(--border-angle),
      rgba(255,255,255,0.05) 0deg,
      rgba(255,255,255,0.05) 346deg,
      rgba(104,32,184,0.4)   350deg,
      #6820b8                354deg,
      #2d93de                359deg,
      rgba(45,147,222,0.2)   360deg
    ) border-box;
  border: 2px solid transparent;
  border-radius: var(--r-lg);
  max-height: 92vh;
  box-shadow: 0 28px 70px rgba(0,0,0,0.7);
  animation: wlBorderRun 5s linear infinite;
}
.wl-media { background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wl-media video, .wl-media iframe, .wl-media img {
  width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000;
}

/* ── Горизонтальное видео (16:9): видео сверху, инфо снизу ── */
.wl-overlay:not(.wl-reel) .wm-dialog { width: min(900px, 94vw); }
.wl-overlay:not(.wl-reel) .wm-body { display: flex; flex-direction: column; }
.wl-overlay:not(.wl-reel) .wl-media { width: 100%; flex-shrink: 0; aspect-ratio: 16 / 9; }
.wl-overlay:not(.wl-reel) .wl-info {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.07);
  background: #0c0f14;
}
@media (max-width: 580px) { .wl-overlay:not(.wl-reel) .wl-media { aspect-ratio: 4 / 3; } }

/* ── Инфо-панель: типографика ── */
.wl-info { padding: var(--sp-5); background: #0c0f14; }
.wl-title {
  font-family: var(--display); font-weight: var(--fw-bold);
  font-size: clamp(18px, 2.2vw, 26px); line-height: 1.2;
  margin: 0 0 var(--sp-2); color: var(--ink);
}
.wl-meta {
  color: var(--accent); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-4);
}
.wl-desc {
  color: var(--dim); font-size: var(--fs-sm); line-height: var(--lh-relaxed);
  margin: 0 0 var(--sp-4); white-space: pre-wrap;
}
.wl-yt-link {
  display: block; text-align: center; margin-top: 8px;
  font-size: 12px; color: rgba(255,255,255,0.45); text-decoration: none;
  letter-spacing: 0.03em; transition: color .2s;
}
.wl-yt-link:hover { color: var(--accent); }

.wl-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wl-tag {
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(45,147,222,0.08); border: 1px solid rgba(45,147,222,0.28);
  color: var(--accent);
}

/* ── Вертикальный рил (9:16): видео слева, инфо справа ── */
.wl-reel .wm-dialog { max-width: min(94vw, 920px); }
.wl-reel .wm-body { display: flex; align-items: stretch; }
.wl-reel .wl-media {
  flex: 0 0 auto;
  height: min(88vh, 840px); width: auto; aspect-ratio: 9 / 16;
}
.wl-reel .wl-info {
  flex: 1 1 260px; min-width: 200px; max-width: 340px;
  padding: var(--sp-8) var(--sp-6); overflow-y: auto;
  display: flex; flex-direction: column; justify-content: flex-start; gap: var(--sp-1);
  background: #0e1219;
  border-left: 1px solid rgba(255,255,255,0.07);
}
.wl-reel .wl-title { font-size: clamp(20px, 2.8vw, 30px); }
.wl-reel .wl-meta { margin-bottom: var(--sp-3); }
.wl-reel .wl-desc { font-size: var(--fs-base); }
@media (max-width: 680px) {
  .wl-reel .wm-dialog { max-width: 98vw; }
  .wl-reel .wm-body { flex-direction: column; }
  .wl-reel .wl-media { width: 100%; height: auto; max-height: 60vh; }
  .wl-reel .wl-info {
    max-width: none; min-width: 0; padding: var(--sp-5);
    border-left: none; border-top: 1px solid rgba(255,255,255,0.07);
    justify-content: flex-start;
  }
}

/* ===== ADMIN MODE BAR ===== */
.admin-bar {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); /* 22→24 */
  z-index: 9997;
  display: flex; align-items: center; gap: var(--sp-3); /* 12→12 */
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); /* 10 12 10 18→8 12 8 16 */
  background: rgba(16,15,18,0.82);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 50px rgba(0,0,0,0.55);
}
.admin-bar[hidden] { display: none; }
.admin-bar.busy { opacity: 0.6; pointer-events: none; }
.admin-bar-title {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--accent); font-weight: var(--fw-black); white-space: nowrap;
}
.admin-bar-dot {
  width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px var(--accent); animation: recBlink 1.4s steps(1) infinite;
}
.admin-bar-btn {
  font-family: var(--body); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--ink); background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); /* 8 14→8 12 */
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
  transition: background .25s, border-color .25s, color .25s;
}
.admin-bar-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-bar-exit:hover { background: var(--danger); border-color: var(--danger); } /* #c0392b → var(--danger) */

/* ===== GRAIN + VIGNETTE ===== */
.grain {
  position: fixed; inset: -50%;
  z-index: 9000; pointer-events: none; opacity: 0.05;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.6s steps(2) infinite;
}
@keyframes grainShift { 0%{transform:translate(0,0)} 100%{transform:translate(-4%,3%)} }
.vignette {
  position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ===== CUSTOM CURSOR ===== */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 32px; height: 32px; /* 34→32 */
  border: 1.5px solid rgba(243,239,231,0.5);
  border-radius: 50%; transform: translate(-50%,-50%);
  pointer-events: none; z-index: 10050;
  transition: width .35s var(--ease), height .35s var(--ease), background .3s, border-color .3s, opacity .3s;
  will-change: transform;
}
.cursor.hover { width: 72px; height: 72px; border-color: var(--accent); background: rgba(45,147,222,0.10); } /* 74→72 */
.cursor.hide { opacity: 0; }
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: var(--sp-1); height: var(--sp-1); background: var(--accent); /* 5→4 */
  border-radius: 50%; transform: translate(-50%,-50%);
  pointer-events: none; z-index: 10051; will-change: transform;
}
.cursor.hover ~ .cursor-dot { opacity: 0; }

/* ===== SITE LOADER ===== */
.site-loader {
  position: fixed; inset: 0; z-index: 10001;
  background: linear-gradient(to right, #07111f, #080c14);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); /* 26→24 */
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.site-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-box { width: 170px; height: 170px; }
.loader-word {
  font-family: var(--display); font-weight: var(--fw-black); letter-spacing: 0.4em;
  font-size: var(--fs-xs); color: var(--dim); padding-left: 0.4em;
  animation: loaderPulse 1.6s ease-in-out infinite;
}
@keyframes loaderPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.preloader { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 3px var(--accent)); }
.crack {
  position: absolute; width: 10%; aspect-ratio: 1; background-color: var(--accent);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation: rotate 3.5s linear infinite;
}
.crack2 { width: 12%; animation-delay: 0.15s; }
.crack3 { width: 14%; animation-delay: 0.3s; }
.crack4 { width: 16%; animation-delay: 0.45s; }
.crack5 { width: 18%; animation-delay: 0.6s; }
@keyframes rotate { to { transform: rotate(360deg); } }

/* ===== ADMIN TRIGGER ===== */
.admin-trigger { position: fixed; top: 0; left: 0; width: 56px; height: 56px; z-index: 9998; cursor: pointer; }

/* ===== NAV ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--pad); /* 20→24 */
  transition: padding .4s var(--ease), background .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding: var(--sp-3) var(--pad); /* 13→12 */
  background: rgba(10,9,8,0.72); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.brand {
  font-family: var(--display); font-weight: var(--fw-black); font-size: 20px; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: var(--sp-3); /* 10→12 */
}
.brand-dot {
  width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--accent); /* 9→8 */
  box-shadow: 0 0 12px var(--glow); animation: recBlink 1.8s steps(1) infinite;
}
@keyframes recBlink { 0%,60%{opacity:1} 61%,100%{opacity:.25} }
.nav-links { display: flex; gap: var(--sp-6); } /* 34→32 */
.nav-links a { font-size: var(--fs-sm); color: var(--dim); position: relative; transition: color .3s; }
.nav-links a::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background: var(--accent); transition: width .35s var(--ease); } /* -5→-4 */
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  font-family: var(--display); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-5); border: 1px solid var(--line-2); border-radius: var(--r-pill); /* 11 22→12 24 */
  transition: background .3s, color .3s, border-color .3s;
}
.nav-cta:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nav-burger { display: none; background: none; border: none; flex-direction: column; gap: var(--sp-2); cursor: none; padding: var(--sp-2); } /* 6→8 */
.nav-burger span { width: 24px; height: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .3s; } /* 26→24 */
.nav-burger.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* MOBILE MENU */
.mobile-menu {
  position: fixed; inset: 0; z-index: 890;
  background: rgba(10,9,8,0.97); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5); /* 26→24 */
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu a { font-family: var(--display); font-weight: var(--fw-semibold); font-size: 30px; }
.mobile-menu-cta { color: var(--accent) !important; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-3); /* 10→12 */
  background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--display); font-weight: var(--fw-semibold); font-size: var(--fs-base);
  padding: var(--sp-4) var(--sp-6); /* 17 30→16 32 — сетка 8px */
  border-radius: var(--r-pill); border: 1px solid transparent;
  transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  will-change: transform;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 40px -12px var(--glow); }
.btn-primary:hover { box-shadow: 0 16px 50px -10px var(--glow); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(255,255,255,0.04); }
.btn-arr { transition: transform .3s var(--ease); }
.btn:hover .btn-arr { transform: translateX(4px); } /* 5→4 */

/* ===== HERO ===== */
.hero {
  min-height: 100svh; position: relative;
  padding: 128px var(--pad) var(--sp-8);
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(45,147,222,0.12), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(91,176,239,0.08), transparent 55%);
}
/* Сетка плавно угасает снизу, переходя в следующий блок */
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 240px;
  background: linear-gradient(to bottom, transparent, #07111f);
  pointer-events: none;
  z-index: 2;
}
.hero-topbar {
  position: absolute; top: 96px; left: var(--pad); right: var(--pad); /* 100→96 */
  display: flex; align-items: center; gap: var(--sp-5); /* 20→24 */
  font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); /* 14→12 */
}
.rec { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent); font-weight: var(--fw-bold); }
.rec-dot { width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--accent); animation: recBlink 1.4s steps(1) infinite; }
.hero-tc { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.hero-meta { color: var(--muted); }

.hero-eyebrow {
  font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--dim);
  margin-top: var(--sp-6); margin-bottom: var(--sp-5); font-weight: var(--fw-medium); /* 36→32, 22→24 */
}
.hero-layout {
  display: flex; align-items: center;
  gap: clamp(24px, 4vw, 80px);
  width: 100%; flex: 1;
  padding-top: clamp(20px, 3vw, 48px);
}
.hero-visual {
  flex: 0 0 44%; height: clamp(320px, 42vw, 560px);
  position: relative; pointer-events: none;
}
.hero-visual canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.hero-inner { flex: 1 1 auto; min-width: 0; }
.hero-title {
  font-family: var(--display); font-weight: var(--fw-bold);
  font-size: clamp(27px, 4vw, 60px); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  text-transform: none;
}
.hero-claim {
  font-family: var(--display); font-weight: var(--fw-bold);
  font-size: clamp(27px, 4vw, 60px); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  margin-top: var(--sp-1);
}
@media (max-width: 768px) {
  .hero-layout { flex-direction: column; gap: 0; }
  .hero-visual { display: none; }
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-title .line > span { display: block; transform: translateY(112%); transition: transform 1s var(--ease); }
.hero-title .line.is-visible > span { transform: none; }
.hero-title .line:nth-child(2) > span { transition-delay: .1s; }
.hero-sub {
  max-width: 560px; margin-top: var(--sp-5); /* 26→24 */
  font-size: var(--fs-md); color: var(--dim);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); } /* 14→12, 52→48 */
.hero-scroll {
  position: absolute; bottom: var(--sp-6); left: var(--pad); /* 34→32 */
  display: flex; align-items: center; gap: var(--sp-3); /* 14→12 */
  font-size: var(--fs-xs); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
}
.hero-scroll-line { width: 56px; height: 1px; background: var(--line-2); position: relative; overflow: hidden; } /* 60→56 */
.hero-scroll-line::after { content:''; position:absolute; inset:0; width: 30%; background: var(--accent); animation: scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine { 0%{transform:translateX(-100%)} 100%{transform:translateX(330%)} }

/* ===== MARQUEE ===== */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--sp-4) 0; overflow: hidden; background: var(--bg-2); /* 16→16 */
}
.marquee-track {
  display: flex; align-items: center; gap: var(--sp-5); width: max-content;
  will-change: transform;
  animation: marquee 44s linear infinite;
}
.marquee-track span { font-family: var(--display); font-weight: var(--fw-bold); font-size: clamp(11px, 1.3vw, 16px); text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.marquee-track .mq-star { color: var(--accent); font-size: clamp(9px, 1vw, 12px); }
@keyframes marquee { to { transform: translate3d(-25%, 0, 0); } }

/* ===== SECTION BASE ===== */
.section {
  padding: clamp(72px, 9vw, 120px) var(--pad);
  position: relative;
}
.tag { display: inline-block; font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-4); font-weight: var(--fw-semibold); } /* 12→var(--fs-xs), 20→16 */
.section-head { max-width: 860px; margin-bottom: var(--sp-7); }
.section-title {
  font-family: var(--display); font-weight: var(--fw-black);
  font-size: var(--fs-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-snug);
}
.section-lead { margin-top: var(--sp-4); font-size: var(--fs-md); color: var(--dim); max-width: 620px; } /* 18→16 */

/* ===== INTRO ===== */
.intro .section-title { font-size: clamp(18px, 2.4vw, 36px); }
.intro-body {
  max-width: 680px;
  margin-bottom: var(--sp-7);
}
.intro-body p { color: var(--dim); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.intro-body p + p { margin-top: var(--sp-4); }

/* STATS */
.stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(24px, 3.5vw, 40px); /* 44→40 */
  padding-top: clamp(16px, 2.5vw, 32px); /* 20→16 */
  border-top: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column; }
.stat-num { font-family: var(--display); font-weight: var(--fw-black); font-size: clamp(24px, 2.8vw, 40px); line-height: 1; letter-spacing: var(--ls-tight); }
.stat-num .suf { color: var(--accent); }
.stat-label { margin-top: var(--sp-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } /* 5→4 */

/* ===== SERVICES / STEPS ===== */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3); /* 10→12 */
}
.step {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4); /* 14→12, 24 20 28→24 16 */
  transition: border-color .3s, background .3s; position: relative;
}
.step:hover { background: rgba(45,147,222,0.07); border-color: rgba(45,147,222,0.3); }
.step-meta { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; } /* 6→8, 14→12 */
.step-idx { font-family: var(--display); font-weight: var(--fw-bold); color: var(--accent); }
.step-sep { color: var(--muted); }
.step-name { color: var(--muted); font-weight: var(--fw-semibold); }
.step h3 { font-family: var(--display); font-weight: var(--fw-bold); font-size: clamp(15px, 1.5vw, 18px); margin-bottom: var(--sp-2); letter-spacing: var(--ls-snug); } /* 19→18, 10→8 */
.step p { color: var(--dim); font-size: var(--fs-sm); line-height: var(--lh-base); } /* clamp(12,1.1vw,13)→var(--fs-sm) */
.step-result { background: var(--accent); border-color: transparent; }
.step-result:hover { background: var(--accent); border-color: transparent; }
.step-result .step-idx, .step-result .step-sep, .step-result .step-name, .step-result h3 { color: #fff; }
.step-result p { color: rgba(255,255,255,0.85); }

/* ===== WORKS / GALLERY ===== */
.works { min-height: unset; }
.gallery-wrap { position: relative; }
.gallery { width: 100%; height: clamp(400px, 60vh, 640px); overflow: hidden; cursor: grab; } /* 420→400 */
.gallery:active { cursor: grabbing; }
.gallery canvas { display: block; }
.gallery-fallback { display: grid; place-items: center; height: 300px; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }

/* ===== EDITING ===== */
.editing-steps { grid-template-columns: repeat(5, 1fr); }
.section.editing .step-idx,
.section.editing .step-sep { display: none; }

/* ===== CLIENTS ===== */
.clients-head { max-width: 820px; margin-bottom: var(--sp-7); } /* 44→48 */
.clients-heading-pre {
  display: block; font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); color: var(--accent);
  letter-spacing: var(--ls-wide); text-transform: uppercase; margin-bottom: var(--sp-3); /* 14→12 */
}
.clients-heading-main {
  font-family: var(--display); font-weight: var(--fw-black);
  font-size: var(--fs-xl); letter-spacing: var(--ls-snug); line-height: var(--lh-tight);
}
.clients-dot { color: var(--accent); }
.clients-heading-sub {
  margin-top: var(--sp-4); /* 16→16 */
  font-size: var(--fs-md); color: var(--dim); line-height: var(--lh-relaxed);
}
.clients-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
  overflow: visible; /* карточки могут выходить за пределы сетки при магните */
}
.client-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2);
  position: relative; z-index: 1;
  /* transform убран из transition — магнит двигает напрямую через style */
  transition: border-color .22s, background .22s, box-shadow .22s;
  will-change: transform;
}
.client-card:hover {
  border-color: var(--accent);
  background: rgba(45,147,222,0.06);
  box-shadow: 0 12px 40px -16px rgba(45,147,222,0.25);
  z-index: 10; /* поверх соседних карточек */
}
.client-avatar {
  width: 64px; height: 64px; border-radius: 50%; /* 72→64 */
  background: var(--av, var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: var(--fw-bold); color: #fff; /* 20→18 */
  margin-bottom: var(--sp-3); overflow: hidden; /* 14→12 */
  box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 4px var(--av, var(--accent));
}
.client-card-name {
  font-family: var(--display); font-weight: var(--fw-bold);
  font-size: var(--fs-base); color: var(--ink); margin-bottom: var(--sp-1); /* clamp(14,1.2vw,17)→var(--fs-base), 5→4 */
}
.client-card-subs { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; } /* 12→var(--fs-xs) */

/* ===== WHY ===== */
.why-path { position: relative; padding-top: var(--sp-7); margin-bottom: 0; } /* 44→48 */
.why-track {
  position: absolute; top: var(--sp-4); left: 10%; right: 10%; /* 16→16 */
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, var(--accent) 100%);
}
.why-dots { position: absolute; top: 0; left: 10%; right: 10%; display: flex; justify-content: space-between; }
.why-dot {
  width: var(--sp-3); height: var(--sp-3); border-radius: 50%; /* 10→12 */
  border: 2px solid var(--accent); background: var(--bg);
  position: relative; top: var(--sp-3); /* 11→12 */
}
.why-dot:first-child { border-color: rgba(255,255,255,0.25); }
.why-dot:nth-child(2) { border-color: rgba(45,147,222,0.5); }
.why-dot:nth-child(3) { border-color: rgba(45,147,222,0.7); }
.why-dot:nth-child(4) { border-color: rgba(45,147,222,0.85); }
.why-dot:last-child { background: var(--accent); box-shadow: 0 0 10px var(--glow); }
.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); } /* 10→12 */
.why-card {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-4); /* 14→12, 20 16 22→16 16 */
  display: flex; flex-direction: column; gap: var(--sp-3); /* 10→12 */
  background: var(--bg-2);
  transition: transform .35s var(--ease), border-color .3s;
}
.why-card:nth-child(1) { background: linear-gradient(160deg, var(--bg-2) 50%, rgba(255,255,255,0.02)); }
.why-card:nth-child(2) { background: linear-gradient(160deg, var(--bg-2) 40%, rgba(45,147,222,0.04)); }
.why-card:nth-child(3) { background: linear-gradient(160deg, var(--bg-2) 30%, rgba(45,147,222,0.08)); }
.why-card:nth-child(4) { background: linear-gradient(160deg, var(--bg-2) 20%, rgba(45,147,222,0.13)); }
.why-card:nth-child(5) { background: linear-gradient(160deg, var(--bg-2) 10%, rgba(45,147,222,0.22)); border-color: rgba(45,147,222,0.3); }
.why-card:hover { transform: translateY(-4px); border-color: rgba(45,147,222,0.45); }
.why-num { display: none; }
.why-card p { font-size: var(--fs-sm); color: var(--ink); line-height: var(--lh-base); } /* clamp(12,1.1vw,14)→var(--fs-sm) */
.why-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); /* 8→8 */
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); /* 28 22→24 24 */
}
.why-tool {
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted);
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--r-pill); background: rgba(255,255,255,0.02);
  white-space: nowrap;
  transition: border-color .25s, color .25s, background .25s;
}
.why-tool:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: rgba(45,147,222,0.08);
}

/* ===== CONTACT ===== */
.contact { text-align: center; position: relative; }
.contact-inner { max-width: 900px; margin: 0 auto; }
.contact-title {
  font-family: var(--display); font-weight: var(--fw-black);
  font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-snug);
  margin-top: var(--sp-4); /* 16→16 */
}
.contact-sub { color: var(--dim); font-size: var(--fs-md); margin: var(--sp-5) auto var(--sp-7); max-width: 560px; } /* 26 46→24 48 */
.contact-methods { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; } /* 18→16 */
.contact-card {
  flex: 1 1 300px; max-width: 380px; text-align: left;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-5); /* 18→16, 26 28→24 24 */
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: var(--sp-1) 0; /* 4→4 */
  transition: transform .4s var(--ease), border-color .4s, background .4s;
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--accent); background: rgba(45,147,222,0.05); } /* 6→4 */
.contact-kind { grid-column: 1; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } /* 13→var(--fs-xs) */
.contact-value { grid-column: 1; font-family: var(--display); font-weight: var(--fw-semibold); font-size: clamp(18px, 2.4vw, 26px); } /* 20 28→18 26 */
.contact-go { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 24px; color: var(--accent); transition: transform .3s var(--ease); } /* 26→24 */
.contact-card:hover .contact-go { transform: translateX(4px); } /* 6→4 */

/* ===== FOOTER ===== */
.footer {
  padding: var(--sp-7) var(--pad); border-top: 1px solid var(--line); /* 40→48 */
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; /* 20→24 */
  color: var(--muted); font-size: var(--fs-sm);
}
.footer-brand { font-family: var(--display); font-weight: var(--fw-black); font-size: 18px; color: var(--ink); display: flex; align-items: center; gap: var(--sp-2); } /* 9→8 */
.footer-links { display: flex; gap: var(--sp-5); } /* 24→24 */
.footer-links a:hover { color: var(--ink); }

/* ===== SECTION BACKGROUNDS ===== */
/* Средние секции — фон совпадает с градиентом тела, скрывает сетку */
.section.intro,
.section.services,
.section.works,
.section.editing,
.section.clients { background: linear-gradient(to right, #07111f, #0a0908); }

/* why — фон плавно исчезает снизу, открывая сетку */
.section.why {
  background: linear-gradient(to right, #07111f, #080c14);
  padding-bottom: clamp(130px, 18vw, 220px);
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
}

/* contact — прозрачный, сетка видна сквозь него */
.section.contact { background: transparent; position: relative; padding-top: clamp(40px, 5vw, 72px); }

/* Дополнительное смягчение сверху (поверх уже плавного перехода из why) */
.section.contact::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(7,17,31,0.5), transparent);
  pointer-events: none; z-index: 0;
}
/* Сетка плавно уходит снизу к футеру */
.section.contact::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to top, #07111f, transparent);
  pointer-events: none; z-index: 0;
}
/* Контент поверх псевдоэлементов */
.contact-inner { position: relative; z-index: 1; }
.footer { background: linear-gradient(to right, #07111f, #0a0908); }

/* ===== REVEAL ===== */
.reveal:not(.line) { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } /* 28→24 */
.reveal.is-visible { opacity: 1; transform: none; }
.steps .reveal.is-visible, .why-grid .reveal.is-visible { transition-delay: var(--d, 0s); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
  .intro-grid { grid-template-columns: 1fr; align-items: start; gap: var(--sp-5); } /* 30→24 */
  .steps { grid-template-columns: repeat(2, 1fr); }
  .editing-steps { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .works-grid--main { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } /* 14→12 */
}
@media (max-width: 780px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-path { display: none; }
}
@media (max-width: 720px) {
  body { cursor: auto; }
  .cursor, .cursor-dot { display: none; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .hero-topbar { top: 88px; }
  .hero-meta { display: none; }
  .hero { padding-top: 88px; padding-bottom: var(--sp-7); }
  .hero-eyebrow { margin-top: var(--sp-3); }
  .hero-actions { margin-top: var(--sp-5); }
  .section { padding-top: clamp(40px, 8vw, 72px); padding-bottom: clamp(40px, 8vw, 72px); }
  .section-head { margin-bottom: var(--sp-5); }
  .steps { grid-template-columns: 1fr; }
  .editing-steps { grid-template-columns: 1fr; }
  .stats { gap: var(--sp-5) var(--sp-6); }
  .stat { flex: 0 0 auto; }
  .why-grid { grid-template-columns: 1fr; }
  .contact-methods { flex-direction: column; align-items: stretch; }
  .contact-card { width: 100%; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-burger { cursor: pointer; }
  .admin-trigger { width: 44px; height: 44px; }
  .works-grid--main { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .footer { flex-direction: column; gap: var(--sp-3); }
  .footer-links { flex-wrap: wrap; gap: var(--sp-4); }

  /* --- Performance: stop expensive effects on mobile --- */
  /* Grain is inset:-50% (200% viewport) repainting ~60fps — biggest CPU hog */
  .grain { animation: none; }
  /* backdrop-filter: blur is GPU-intensive on low-end phones */
  .nav.scrolled { backdrop-filter: none; background: rgba(10,9,8,0.93); }
  .mobile-menu { backdrop-filter: none; background: rgba(10,9,8,0.98); }
  .wc-poster { backdrop-filter: none; }
}
@media (max-width: 480px) {
  /* Works grids: 1 column, все карточки 1×1 чтобы не вылезали за экран */
  .works-grid--main { grid-template-columns: 1fr !important; gap: var(--sp-2) !important; }
  .works-grid { gap: var(--sp-2); }
  .works-grid--main .work-card,
  .works-grid .work-card {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  /* Клиенты — 1 колонка */
  .clients-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .works-grid--main { gap: var(--sp-1) !important; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .reveal, .hero-title .line > span { transition: none; opacity: 1; transform: none; }
}

/* ===== SOUND TOGGLE ===== */
#sfxToggle {
  position: fixed; left: var(--sp-5); bottom: var(--sp-5); /* 20→24 */
  z-index: 90;
  width: 48px; height: 48px; /* 46→48 */
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: rgba(16,14,13,0.6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--ink); cursor: none;
  transition: transform .4s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
#sfxToggle::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  box-shadow: 0 0 0 0 var(--glow); transition: box-shadow .4s var(--ease);
}
#sfxToggle:hover {
  transform: translateY(-4px) scale(1.06); /* 3→4 */
  border-color: var(--accent); color: var(--accent-2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45); /* 30→32 */
}
#sfxToggle:not(.muted) { color: var(--accent-2); border-color: rgba(45,147,222,0.4); }
#sfxToggle:not(.muted)::before { box-shadow: 0 0 22px 1px var(--glow); animation: sfx-pulse 2.4s var(--ease) infinite; }
#sfxToggle.muted { color: var(--muted); }
#sfxToggle svg { display: block; }
@keyframes sfx-pulse {
  0%,100% { box-shadow: 0 0 14px 0 rgba(45,147,222,0.20); }
  50%      { box-shadow: 0 0 24px 2px rgba(45,147,222,0.42); } /* 26→24 */
}
body.is-touch #sfxToggle, #sfxToggle { cursor: pointer; }
@media (max-width: 640px) {
  #sfxToggle { width: 40px; height: 40px; left: var(--sp-3); bottom: var(--sp-3); } /* 42→40, 14→12 */
}
@media (prefers-reduced-motion: reduce) {
  #sfxToggle:not(.muted)::before { animation: none; }
}

/* ===== GRADUAL BLUR ===== */
.gradual-blur { isolation: isolate; pointer-events: none; }
.gradual-blur-inner { position: relative; width: 100%; height: 100%; }
.gradual-blur-inner > div { -webkit-backdrop-filter: inherit; backdrop-filter: inherit; }
@supports not (backdrop-filter: blur(1px)) {
  .gradual-blur-inner > div { background: rgba(10,9,8,0.35); opacity: 0.5; }
}

/* ===== GLITCH TEXT ===== */
.glitch {
  --after-duration: 3s; --before-duration: 2s;
  --after-shadow: -4px 0 #e0554f; --before-shadow: 4px 0 #2d93de;
  position: relative; display: inline-block;
  color: inherit; font: inherit; user-select: none;
}
.glitch::after, .glitch::before {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  color: var(--ink); background: var(--bg); overflow: hidden; clip-path: inset(0 0 0 0);
}
.glitch.enable-on-hover::after,
.glitch.enable-on-hover::before { content: ''; opacity: 0; animation: none; }
.glitch.enable-on-hover:hover::after {
  content: attr(data-text); opacity: 1; left: 4px;
  text-shadow: var(--after-shadow);
  animation: glitch-anim var(--after-duration) infinite linear alternate-reverse;
}
.glitch.enable-on-hover:hover::before {
  content: attr(data-text); opacity: 1; left: -4px;
  text-shadow: var(--before-shadow);
  animation: glitch-anim var(--before-duration) infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0%   { clip-path: inset(20% 0 50% 0); } 5%   { clip-path: inset(10% 0 60% 0); }
  10%  { clip-path: inset(15% 0 55% 0); } 15%  { clip-path: inset(25% 0 35% 0); }
  20%  { clip-path: inset(30% 0 40% 0); } 25%  { clip-path: inset(40% 0 20% 0); }
  30%  { clip-path: inset(10% 0 60% 0); } 35%  { clip-path: inset(15% 0 55% 0); }
  40%  { clip-path: inset(25% 0 35% 0); } 45%  { clip-path: inset(30% 0 40% 0); }
  50%  { clip-path: inset(20% 0 50% 0); } 55%  { clip-path: inset(10% 0 60% 0); }
  60%  { clip-path: inset(15% 0 55% 0); } 65%  { clip-path: inset(25% 0 35% 0); }
  70%  { clip-path: inset(30% 0 40% 0); } 75%  { clip-path: inset(40% 0 20% 0); }
  80%  { clip-path: inset(20% 0 50% 0); } 85%  { clip-path: inset(10% 0 60% 0); }
  90%  { clip-path: inset(15% 0 55% 0); } 95%  { clip-path: inset(25% 0 35% 0); }
  100% { clip-path: inset(30% 0 40% 0); }
}