:root {
  --ink: #111;
  --black: #000;
  --paper: #dde0d9;
  --light: #dfe3de;
  --gray: #8a8a8a;
  --dim: #5a5a5a;
  --line: #d6d6d6;
  --violet: #d17dff;
  --violet-hover: #dfa3ff;
  --title: "Anton", "Arial Narrow", Impact, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "Fira Mono", ui-monospace, Menlo, monospace;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --form: "Space Grotesk", var(--body);
  --side: clamp(16px, 3vw, 44px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--light);
  font: 400 15px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

/* Кнопка «домой» в правом верхнем углу — на всех страницах */
.home-btn {
  position: fixed;
  z-index: 20;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #000;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
  transition: transform .2s;
}
.home-btn:hover { transform: scale(1.08); }
.home-btn svg { width: 22px; height: 22px; fill: #fff; }

/* Первый экран: зацикленное видео, точечный растр поверх, заголовок снизу */
.hero {
  position: relative;
  min-height: clamp(380px, 56vw, 820px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #000;
}
.hero--short { min-height: clamp(360px, 44vw, 640px); }
.hero video, .hero .hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(0, 0, 0, .55) 38%, transparent 42%);
  background-size: 4px 4px;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .75));
  pointer-events: none;
}
.hero-text {
  position: relative;
  z-index: 2;
  padding: 0 var(--side) clamp(18px, 3vw, 40px);
}
.hero h1 {
  font: 400 clamp(40px, 12vw, 190px)/.9 var(--title);
  overflow-wrap: anywhere;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--light);
}
.hero .sub {
  margin-top: .3em;
  font: 500 clamp(17px, 2.6vw, 40px)/1.1 var(--cond);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--light);
}
.hero .down {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 14px;
  width: 54px;
  height: 30px;
  transform: translateX(-50%);
  animation: nudge 2.4s ease-in-out infinite;
}
.hero .down svg { width: 100%; height: 100%; stroke: var(--light); fill: none; stroke-width: 2; }
@keyframes nudge { 50% { transform: translate(-50%, 6px); } }

/* Бегущая строка */
.marquee {
  overflow: hidden;
  background: #000;
  padding: 8px 0;
  border-bottom: 1px solid #1d1d1d;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: run 38s linear infinite;
}
.marquee span {
  flex: none;
  padding-right: .6em;
  font: 400 clamp(15px, 1.7vw, 24px)/1.2 var(--title);
  text-transform: uppercase;
  color: #4b4b4b;
  white-space: nowrap;
}
@keyframes run { to { transform: translateX(-50%); } }

/* Текстовые блоки */
.intro {
  padding: clamp(36px, 5vw, 72px) var(--side) clamp(48px, 7vw, 110px);
  background: var(--ink);
}
.intro--black { background: #000; color: #9a9a9a; }
.intro p { max-width: 680px; }
.intro p + p { margin-top: .9em; }
.intro .lead { font-weight: 600; margin-bottom: 1.4em; }

/* Разделитель «LATEST PROJECTS», «CONTACTS» */
.divider {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 0;
  font: 400 13px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b0b0b0;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #8f8f8f; }

/* Карточки проектов на главной */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 4px;
}
.card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: var(--light);
  text-align: left;
}
.card--wide { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
.card img, .card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.card:hover img, .card:hover video { transform: scale(1.03); }
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 50%);
}
.card-text {
  position: absolute;
  z-index: 1;
  left: clamp(14px, 2.4vw, 32px);
  right: 120px;
  bottom: clamp(14px, 2.2vw, 30px);
}
.card h2 {
  font: 400 clamp(26px, 3.4vw, 50px)/1 var(--title);
  text-transform: uppercase;
}
.card .tag {
  margin-top: .25em;
  font: 500 clamp(14px, 1.45vw, 21px)/1.1 var(--cond);
  text-transform: uppercase;
}
.chev {
  position: absolute;
  z-index: 1;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2.2vw, 30px);
  width: clamp(56px, 6vw, 92px);
  fill: var(--light);
  transition: transform .3s;
}
.card:hover .chev { transform: translateX(8px); }

/* Светлая полоса с заголовком (страницы работ) */
.band {
  background: var(--paper);
  color: #151515;
  padding: clamp(28px, 4vw, 60px) var(--side) clamp(36px, 5vw, 80px);
}
.band--dark { background: #1d1d1d; color: var(--light); }
.band h2, .band .h2 {
  font: 400 clamp(44px, 7.6vw, 118px)/.95 var(--title);
  text-transform: uppercase;
}
.band .sub {
  margin-top: .2em;
  font: 500 clamp(18px, 2.2vw, 32px)/1.1 var(--cond);
  text-transform: uppercase;
}
.band .text { max-width: 640px; margin-top: clamp(28px, 4vw, 56px); font-size: 14px; }
.band .text p + p { margin-top: .4em; }

/* Примеры анимации слотов */
.examples { background: var(--paper); display: grid; gap: 6px; padding-bottom: 6px; }
.ex-row { display: grid; grid-template-columns: 2.55fr 1fr; gap: 6px; }
.ex-row video, .ex-row img { width: 100%; height: 100%; object-fit: cover; background: #000; }
.ex-side { background: #000; display: grid; place-items: center; overflow: hidden; }
.ex-side--light { background: var(--paper); }
.ex-side--light video { width: 62%; height: auto; border-radius: 4px; }

.reel { background: #1d1d1d; padding: 0 0 6px; }
.reel video { width: 100%; height: auto; background: #000; }

/* Ролики синематиков */
.projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  background: #000;
  padding-bottom: 6px;
}
.project { background: var(--paper); color: #151515; }
.project-head { padding: 18px var(--side) 22px; min-height: 120px; }
.project h3 {
  font: 400 clamp(32px, 4vw, 54px)/1 var(--title);
  text-transform: uppercase;
}
.project .tag {
  margin-top: .3em;
  font: 600 clamp(14px, 1.3vw, 18px)/1.15 var(--cond);
  text-transform: uppercase;
}
.project .note { margin-top: .7em; font-size: 14px; }
.yt {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #4f4f4f;
  cursor: pointer;
  overflow: hidden;
  border: 0;
  padding: 0;
  width: 100%;
}
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.yt:hover img { transform: scale(1.03); }
.yt .play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, .35);
  display: grid;
  place-items: center;
  transition: background .2s;
}
.yt:hover .play { background: rgba(0, 0, 0, .6); }
.yt .play::before {
  content: "";
  margin-left: 6px;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Окно с роликом (шоурил на главной) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .92);
}
.modal.open { display: flex; }
.modal-box { width: min(100%, 1280px); aspect-ratio: 16 / 9; position: relative; }
.modal-box iframe { width: 100%; height: 100%; border: 0; }
.modal-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: none;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* Контакты */
.contacts { background: #000; padding: 26px var(--side) 40px; font-family: var(--form); }
.contacts h2 { font: 400 clamp(20px, 2vw, 26px)/1.2 var(--form); margin-bottom: 26px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: 13px; margin-bottom: 7px; }
.form input, .form textarea {
  width: 100%;
  background: transparent;
  color: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 12px;
  font: 400 16px/1.4 var(--form);
}
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--violet); outline-offset: 0; border-color: var(--violet); }
.form ::placeholder { color: #9c9c9c; }
.form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form button {
  border: 0;
  background: var(--violet);
  color: #000;
  font: 500 15px/1 var(--form);
  padding: 14px;
  cursor: pointer;
  transition: background .2s;
}
.form button:hover { background: var(--violet-hover); }
.form button:disabled { opacity: .6; cursor: wait; }
.form-msg { align-self: center; font-size: 14px; color: #c9c9c9; min-height: 1.4em; }
.form-msg.ok { color: #b9f58c; }
.form-msg.err { color: #ff9a9a; }

footer {
  background: #000;
  border-top: 1px solid #333;
  padding: 16px var(--side) calc(env(safe-area-inset-bottom, 0px) + 18px);
  font: 400 12px/1.4 var(--mono);
  color: #8a8a8a;
}
footer b { color: #b5b5b5; }

@media (min-width: 900px) {
  .projects { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; padding: 0 2px; }
  .card--wide { aspect-ratio: 16 / 9; }
  .card-text { right: 90px; }
  .ex-row { grid-template-columns: 1fr; }
  .ex-side { padding: 28px 0; }
  .ex-row .ex-side video { width: 62%; height: auto; object-fit: contain; }
  .ex-row .ex-side video.ex-gem { width: 50%; }
  .form { grid-template-columns: 1fr; }
  .project-head { min-height: 0; }
  .hero .down { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .hero .down { animation: none; }
  html { scroll-behavior: auto; }
}