/* ============================================================
   nex — Maksim Lisovskiy · portfolio & services
   dark pixel-workshop theme · no slop
   ============================================================ */

:root {
  --bg:    #0d0f12;
  --bg-2:  #14171c;
  --bg-3:  #1a1f26;
  --ink:   #e6e4da;
  --dim:   #a4a8ad;
  --mute:  #8a9097;
  --line:  rgba(230, 228, 218, .12);
  --line-2: rgba(230, 228, 218, .3);

  --red:  #ff4b4b;
  --cyan: #38e0e0;

  --px:   "Press Start 2P", "DotGothic16", monospace;
  --jp:   "DotGothic16", monospace;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", monospace;

  --w: min(1120px, calc(100vw - 40px));

  /* hero composition: text lives in the left strip, so the glass
     monogram (frame center) and the cat (bottom right) stay clear */
  --hero-x: 6.5%;
  --hero-y: 32%;
  --video-pos: 50% 50%;
}

/* ---------- base ---------- */

* { box-sizing: border-box }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit }
p { margin: 0 }

::selection { background: var(--red); color: #14161a }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 1px dashed var(--dim);
  outline-offset: 3px;
}

/* ---------- film grain over the whole site (static SVG tile) ---------- */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ---------- pixel cursors: crosshair + paw (canvas-generated, hotspots 16/16 · 16/2) ---------- */

@media (pointer: fine) {
  body {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABL0lEQVR4AcSUXRLCIAyEqcdwfPb+5/HZ8Ro1HyUx5afAdNROt8CSZDdKewlfvn4n8Ho+VnC2IWoArVPrYNXNk2OsYwLX230RBFEHcXNGQPLiLyA1Yh3NNYFELGlkmBYhSUAedUDIBYI6EEdDnUhc1bkIxbsQiGwIUT1sF4622fGTOPKARbYEup30nKtCUyAFeDc4TPRugCcO7DZY9ASsE4I99L/yXG3eFUhJuANpaQMcMCKfjArkecPr/wvoacktt/g8bqYDTkuez7rFs1e+yZGVhzpsnRblJe7wjR/pAIecFCDSu9tzxO02WRQC4ujw20KSR6+TQsAl4wiHwNHVqY8hz4JMYNa5VUiTVicmkOIYcIAjwHoGPoc6n1OkDmaq1WLzOnkHOAC13BmOGiC8AQAA//+qDGcCAAAABklEQVQDAKLVijFK8D3AAAAAAElFTkSuQmCC") 12 12, auto;
  }
  a, button, .chip, .lang__btn, .hero__sound, .brand, .menu__link, .work, .contact__btn, .hero__scroll {
    cursor: url("assets/lapa.png") 10 2, url("data:image/png;base64,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") 10 2, pointer;
  }
  input[type="text"], input[type="email"], textarea {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABL0lEQVR4AcSUXRLCIAyEqcdwfPb+5/HZ8Ro1HyUx5afAdNROt8CSZDdKewlfvn4n8Ho+VnC2IWoArVPrYNXNk2OsYwLX230RBFEHcXNGQPLiLyA1Yh3NNYFELGlkmBYhSUAedUDIBYI6EEdDnUhc1bkIxbsQiGwIUT1sF4622fGTOPKARbYEup30nKtCUyAFeDc4TPRugCcO7DZY9ASsE4I99L/yXG3eFUhJuANpaQMcMCKfjArkecPr/wvoacktt/g8bqYDTkuez7rFs1e+yZGVhzpsnRblJe7wjR/pAIecFCDSu9tzxO02WRQC4ujw20KSR6+TQsAl4wiHwNHVqY8hz4JMYNa5VUiTVicmkOIYcIAjwHoGPoc6n1OkDmaq1WLzOnkHOAC13BmOGiC8AQAA//+qDGcCAAAABklEQVQDAKLVijFK8D3AAAAAAElFTkSuQmCC") 12 12, text;
  }
}

/* ---------- header ---------- */

.head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px max(24px, calc((100vw - var(--w)) / 2 + 8px));
  border-bottom: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}

/* plate appears as soon as the page scrolls */
.head.is-scrolled {
  background: rgba(13, 15, 18, .84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  display: block;
  width: 26px;
  height: 26px;
}

.menu {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.menu__link {
  font: 13px/1 var(--mono);
  color: var(--dim);
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.menu__link:hover { color: var(--ink); border-color: var(--dim) }

.lang {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.lang__sep { color: var(--mute); font: 12px var(--mono) }

.lang__btn {
  font: 12px/1 var(--mono);
  color: var(--mute);
  background: none;
  border: 0;
  padding: 8px 4px;
  transition: color .15s ease;
}

.lang__btn:hover { color: var(--ink) }
.lang__btn.is-on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px }

/* ---------- coordinates chip (follows the crosshair) ---------- */

#coord {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 95;
  padding: 5px 8px;
  font: 10px var(--mono);
  letter-spacing: .04em;
  color: var(--dim);
  background: rgba(13, 15, 18, .92);
  border: 1px solid var(--line);
  white-space: nowrap;
  pointer-events: none;
  display: none;
}

#coord.is-on { display: block }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--video-pos, 50% 50%);
  z-index: -2;
}

/* gradient edges: site bg -> transparent, video melts into the page.
   own compositing layer so the gradient never flickers on scroll */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(13,15,18,0) 20%, rgba(13,15,18,0) 78%, var(--bg) 100%),
    radial-gradient(118% 96% at 50% 44%, rgba(13,15,18,0) 46%, var(--bg) 97%);
}

.hero__inner {
  position: absolute;
  left: var(--hero-x, 6.5%);
  top: var(--hero-y, 13%);
  z-index: 2;
  display: grid;
  gap: 16px;
  max-width: min(90vw, 30ch);
}

/* soft dark slab behind the text so it reads over flowers, melts right */
.hero__inner::before {
  content: "";
  position: absolute;
  inset: -28px -220px -28px -32px;
  z-index: -1;
  background: linear-gradient(93deg, rgba(13,15,18,.9) 26%, rgba(13,15,18,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  pointer-events: none;
}

.hero__over {
  font: 11px/1.7 var(--mono);
  letter-spacing: .12em;
  color: var(--dim);
}

.hero__name {
  margin: 0;
  display: grid;
  font: clamp(14px, 1.7vw, 24px)/1.55 var(--px);
  letter-spacing: .02em;
  color: var(--ink);
}

.hero__glyphs {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
}

.hero__glyphs .glitch      { font: clamp(24px, 3.6vw, 46px)/1 var(--px); letter-spacing: .05em }
.hero__glyphs .glitch--jp  { font: clamp(24px, 3.6vw, 42px)/1.15 var(--jp); letter-spacing: .28em }

.hero__tag {
  max-width: 32ch;
  font: 11px/1.9 var(--mono);
  letter-spacing: .08em;
  color: var(--ink);
  opacity: .7;
}

/* ---------- sound toggle (quiet, pixel, bottom-left) ---------- */

.hero__sound {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--mute);
  opacity: .72;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}

.hero__sound:hover { opacity: 1; color: var(--ink); border-color: var(--line) }
.hero__sound[aria-pressed="true"] { opacity: .85; color: var(--ink); border-color: var(--line) }
.hero__sound .hero__sound-on { display: none }
.hero__sound[aria-pressed="true"] .hero__sound-on { display: block }
.hero__sound[aria-pressed="true"] .hero__sound-off { display: none }

/* ---------- hero scroll down indicator (running arrow) ---------- */

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--dim);
  transition: color .15s ease;
}

.hero__scroll:hover {
  color: var(--ink);
}

.hero__scroll-text {
  font: 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: inherit;
  opacity: .85;
}

.hero__scroll-arrow {
  display: flex;
  animation: heroArrowRun 1.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes heroArrowRun {
  0% {
    transform: translateY(-4px);
    opacity: 0.35;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
  100% {
    transform: translateY(-4px);
    opacity: 0.35;
  }
}

/* ---------- glitch (RGB split, only bursts) ---------- */

.glitch {
  position: relative;
  display: inline-block;
  color: var(--ink);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

.glitch::before { color: var(--red);  animation: glitch-a 6.5s steps(1, end) infinite }
.glitch::after  { color: var(--cyan); animation: glitch-b 6.5s steps(1, end) infinite }

@keyframes glitch-a {
  0%, 11.9%      { opacity: 0 }
  12%            { opacity: 1; transform: translate(-6px, 0);  clip-path: inset(6% 0 78% 0) }
  13%            { opacity: 1; transform: translate(4px, -2px); clip-path: inset(30% 0 56% 0) }
  13.8%          { opacity: 1; transform: translate(-4px, 2px); clip-path: inset(48% 0 40% 0) }
  14.6%          { opacity: 1; transform: translate(3px, 1px); clip-path: inset(62% 0 24% 0) }
  15.3%          { opacity: 1; transform: translate(-2px, 0);  clip-path: inset(84% 0 2% 0) }
  16%            { opacity: 0 }
  54%, 54.9%     { opacity: 0 }
  55%            { opacity: 1; transform: translate(-4px, 1px); clip-path: inset(12% 0 74% 0) }
  55.5%          { opacity: 1; transform: translate(3px, -1px); clip-path: inset(52% 0 36% 0) }
  56%            { opacity: 0 }
  88%            { opacity: 1; transform: translate(4px, 0);  clip-path: inset(40% 0 46% 0) }
  88.4%          { opacity: 1; transform: translate(-3px, 1px); clip-path: inset(66% 0 20% 0) }
  88.8%          { opacity: 0 }
  100%           { opacity: 0 }
}

@keyframes glitch-b {
  0%, 12.3%      { opacity: 0 }
  12.4%          { opacity: 1; transform: translate(5px, 1px);  clip-path: inset(10% 0 76% 0) }
  13.2%          { opacity: 1; transform: translate(-4px, 2px); clip-path: inset(34% 0 52% 0) }
  14%            { opacity: 1; transform: translate(3px, -2px); clip-path: inset(52% 0 36% 0) }
  14.8%          { opacity: 1; transform: translate(-3px, 0); clip-path: inset(70% 0 18% 0) }
  15.5%          { opacity: 0 }
  54%, 55.5%     { opacity: 0 }
  55.6%          { opacity: 1; transform: translate(4px, -1px); clip-path: inset(18% 0 68% 0) }
  56.1%          { opacity: 1; transform: translate(-3px, 1px); clip-path: inset(58% 0 30% 0) }
  56.6%          { opacity: 0 }
  88.4%          { opacity: 1; transform: translate(-4px, 1px); clip-path: inset(44% 0 42% 0) }
  88.9%          { opacity: 1; transform: translate(3px, 0); clip-path: inset(74% 0 12% 0) }
  89.4%          { opacity: 0 }
  100%           { opacity: 0 }
}

.glitch--jp::before { animation-delay: 2.7s }
.glitch--jp::after  { animation-delay: 3.1s }

/* ---------- sections ---------- */

main { display: block }

.sec {
  width: var(--w);
  margin: clamp(96px, 14vh, 152px) auto 0;
}

.sec__head { max-width: 720px }

.sec__num {
  font: 12px var(--mono);
  color: var(--mute);
  letter-spacing: .14em;
}

.sec__title {
  margin: 12px 0 0;
  font: clamp(16px, 2.4vw, 26px)/1.5 var(--px);
  color: var(--ink);
}

.sec__lead {
  margin-top: 16px;
  color: var(--dim);
  font-size: 15px;
  max-width: 56ch;
}

/* ---------- chips ---------- */

.chips {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font: 12px/1 var(--mono);
  color: var(--dim);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 9px 12px;
  display: inline-block;
  transition: color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.chip:hover {
  color: var(--ink);
  border-color: var(--line-2);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--line);
}

/* ---------- about + works ---------- */

.layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  margin-top: 56px;
  align-items: start;
}

.about { position: sticky; top: 104px }

.about__title {
  margin: 0 0 16px;
  font: 600 15px/1.4 var(--sans);
}

.about p { color: var(--dim); font-size: 15px; margin-bottom: 14px }

.about__tools {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.about__tools li {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.about__tools b { font: 500 14px var(--sans); color: var(--ink) }
.about__tools span { font: 12px/1.7 var(--mono); color: var(--mute) }

.works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.work {
  position: relative;
  display: block;
  background: var(--bg-2);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.work:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--line);
  border-color: var(--line-2);
}

.work--wide { grid-column: 1 / -1 }

/* 8-bit snake walks this canvas along the card border (hover, see script.js) */
.work__snake {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.work__thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(45deg, var(--bg-3) 25%, transparent 25%, transparent 75%, var(--bg-3) 75%) 0 0 / 24px 24px,
    var(--bg-2);
}

.work--wide .work__thumb { aspect-ratio: 21 / 9 }

.work__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work__thumb img.is-broken { display: none }

.work__meta {
  display: grid;
  gap: 6px;
  padding: 14px 16px 16px;
}

.work__title { font: 500 15px/1.45 var(--sans); color: var(--ink) }
.work__title i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--dim); margin-left: 6px }

.work__props {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.work__tag { font: 11px var(--mono); color: var(--mute) }
.work__src { font: 11px var(--mono); color: var(--mute) }
.work:hover .work__src { color: var(--ink) }

/* ---------- team band ---------- */

.team {
  width: var(--w);
  margin: clamp(72px, 10vh, 112px) auto 0;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 28px 32px;
}

.team__title {
  margin: 0 0 10px;
  font: 14px/1.6 var(--px);
  color: var(--ink);
}

.team p { color: var(--dim); font-size: 15px; margin-bottom: 4px }

/* ---------- services ---------- */

.price {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.price li {
  display: grid;
  grid-template-columns: 56px minmax(180px, 240px) 1fr minmax(180px, 240px);
  gap: 24px;
  align-items: baseline;
  padding: 20px 8px;
  border-bottom: 1px solid var(--line);
  transition: background-color .15s ease;
}

.price li:hover { background: var(--bg-2) }

.price__num { font: 12px var(--mono); color: var(--mute) }
.price__name { font: 600 16px/1.5 var(--sans); color: var(--ink) }
.price__desc { font-size: 14px; color: var(--dim) }
.price__tools { font: 11px/1.7 var(--mono); color: var(--mute); text-align: right }

/* ---------- contact ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(40px, 5vw, 64px);
  margin-top: 48px;
  align-items: start;
}

.form {
  position: relative;
  display: grid;
  gap: 20px;
}

.form__hp { position: absolute; left: -9999px; top: -9999px }

.form__field { display: grid; gap: 8px }

.form__label {
  font: 12px var(--mono);
  color: var(--dim);
  letter-spacing: .06em;
}

.form__input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  padding: 12px 14px;
  border-radius: 0;
  transition: border-color .15s ease;
}

.form__input::placeholder { color: var(--mute) }
.form__input:hover { border-color: var(--line-2) }
.form__input:focus { outline: none; border-color: var(--dim) }

.form__input--area { resize: vertical; min-height: 128px }

.form__row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.form__send {
  font: 11px/1 var(--px);
  letter-spacing: .06em;
  color: var(--bg);
  background: var(--ink);
  border: 0;
  padding: 15px 20px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.form__send:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--line-2);
}

.form__send:active { transform: none; box-shadow: none }
.form__send:disabled { opacity: .5; transform: none; box-shadow: none }

.form__status { font: 12px/1.6 var(--mono); color: var(--dim) }

.contact__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  width: 100%;
}

.contact__btn.is-copied {
  background: var(--cyan);
  color: var(--bg);
}

.direct {
  list-style: none;
  margin: 0;
  padding: 0;
}

.direct li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}

.direct__k { font: 12px var(--mono); color: var(--mute) }
.direct__v { font-size: 15px; color: var(--ink); text-decoration: none }
.direct__v:hover { text-decoration: underline; text-underline-offset: 4px }

/* ---------- footer ---------- */

.foot {
  width: var(--w);
  margin: clamp(96px, 14vh, 152px) auto 0;
  padding: 36px 0 44px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.foot__brand {
  font: 14px/1 var(--px);
  text-decoration: none;
}

.foot__note { font: 12px var(--mono); color: var(--mute) }
.foot__set { font: 14px var(--jp); color: var(--mute); letter-spacing: .3em }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr }
  .about { position: static }
  .price li { grid-template-columns: 40px 1fr minmax(0, 220px) }
  .price__desc { grid-column: 2 / 3 }
}

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr }
  .head { gap: 20px }
  .menu { gap: 18px }
}

@media (max-width: 760px) {
  /* Hero на весь экран телефона: видео от верхнего до нижнего края (с обрезкой по бокам),
     текст на переднем плане поверх видео */
  .hero {
    min-height: 100svh;
    min-height: 100dvh;
    height: 100svh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 88px 24px 36px;
    overflow: hidden;
  }

  .hero__inner {
    position: relative;
    z-index: 2;
    max-width: min(92vw, 34ch);
    gap: 14px;
    padding: 0;
  }

  .hero__inner::before {
    inset: -20px -22px -20px -20px;
    background: linear-gradient(135deg, rgba(13,15,18,0.88) 0%, rgba(13,15,18,0.5) 100%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__video {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 50%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* видео сохраняет полную исходную яркость без затемнений */
    background: linear-gradient(180deg, transparent 82%, var(--bg) 100%);
  }

  .hero__sound {
    left: 20px;
    bottom: 20px;
    z-index: 10;
  }

  .team { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px }

  .price li { grid-template-columns: 40px 1fr }
  .price__tools { grid-column: 2; text-align: left }
}

@media (max-width: 640px) {
  .head { padding: 20px }
  .works { grid-template-columns: 1fr }
  .work--wide .work__thumb { aspect-ratio: 16 / 9 }
  .lang { margin-left: auto }
  .menu { margin-left: 0 }
  .foot { flex-wrap: wrap }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .glitch::before, .glitch::after { display: none }
  .head, .work, .chip, .form__send, .menu__link { transition: none }
}