/* ==== Палитра: только графит / холодный белый / нейтральный серый. Без акцентов. ==== */
:root{
  --bg:#141517;        /* near-black graphite */
  --ink:#F0F1F2;       /* cold white */
  --ink-2:#9A9CA1;     /* neutral grey */
  --line:#2C2E32;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ==== HERO ==== */
.hero{position:relative;width:100vw;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:none}

/* верхняя панель */
.top{
  position:absolute;z-index:3;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:clamp(24px,3vw,38px) clamp(22px,4vw,56px);
}
/* читаемость — мягкая тень на самом тексте, видео не затемняем */
.brand,.nav{text-shadow:0 1px 2px rgba(10,10,12,.38),0 2px 20px rgba(10,10,12,.28)}
/* ==== ТИПОГРАФИКА (легче и чище, без bold) ==== */
.brand__name{font-weight:400;font-size:clamp(17px,1.2vw,19px);letter-spacing:.07em;line-height:1;color:var(--ink)}
.brand__role{margin-top:8px;font-weight:300;font-size:clamp(11px,.9vw,12px);letter-spacing:.16em;color:var(--ink);opacity:.8}

.nav{display:flex;align-items:center;gap:clamp(18px,2vw,32px);font-weight:400;
  font-size:clamp(12px,.9vw,13px);letter-spacing:.09em}
.nav a{color:var(--ink);text-decoration:none;opacity:.9;transition:opacity .3s var(--ease)}
.nav a:hover{opacity:.5}

/* sound toggle — только иконка */
.sound{position:absolute;z-index:3;right:clamp(22px,4vw,56px);bottom:28px;
  width:34px;height:34px;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:.9;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sound:hover{opacity:.55;transform:scale(1.06)}
.sound svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 5px rgba(10,10,12,.5))}
.sound .wave{opacity:0;transition:opacity .25s var(--ease)}
.sound.is-on .wave{opacity:1}
.sound.is-on .slash{opacity:0}
.sound .slash{transition:opacity .25s var(--ease)}

/* ==== CUSTOM CURSOR: двухслойный (dot + ring), mix-blend-mode:difference ==== */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:100;
  border-radius:50%;mix-blend-mode:difference;opacity:0;will-change:transform,left,top}
.cursor-dot{width:6px;height:6px;background:var(--ink);
  transform:translate(-50%,-50%);transition:opacity .25s var(--ease)}
.cursor-ring{width:34px;height:34px;border:1px solid var(--ink);
  transform:translate(-50%,-50%);
  transition:width .28s var(--ease),height .28s var(--ease),opacity .3s var(--ease)}
html.cursor-on .cursor-dot,html.cursor-on .cursor-ring{opacity:1}
html.cursor-on,html.cursor-on *{cursor:none !important}
/* состояния кольца */
.cursor-ring.is-link{width:18px;height:18px}   /* ссылки/кнопки — сжимается */
.cursor-ring.is-view{width:66px;height:66px}   /* будущие карточки WORKS — растёт */

@media (max-width:640px){
  .top{padding:20px 18px}
  .brand__name{font-size:16px}
  .nav{gap:16px;font-size:12px}
  .sound{bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .cursor-dot,.cursor-ring{display:none}
  html.cursor-on,html.cursor-on *{cursor:auto !important}
}

/* ==== MARQUEE после SHOWREEL ====
   Механика утверждена: две строки навстречу, бесшовный цикл, плавная
   остановка при наведении, деликатное рассыпание букв под курсором.
   Ничего в параметрах не менять. */
.marquee-section{background:#141517;padding:clamp(2.2rem,5vw,4rem) 0;overflow:hidden}
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee__row{overflow:hidden;white-space:nowrap}
.marquee__row + .marquee__row{margin-top:.12em}
.marquee__track{position:relative;display:inline-block;white-space:nowrap;will-change:transform;
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  font-size:clamp(1.6rem,4.6vw,3rem);line-height:1.28}
.marquee .seg--en{color:#F0F1F2;font-weight:700;letter-spacing:.012em}
.marquee .seg--ru{color:#9A9CA1;font-weight:300;letter-spacing:.008em}
.marquee .seg--sep{color:#9A9CA1;opacity:.5;font-weight:400;margin:0 .5em}
.marquee .ltr{display:inline-block;will-change:transform}