/* =========================================================
   Creed Designs — основной сайт
   Чёрная тема в духе systemdlc.com и voltbz.net: глубокий чёрный фон,
   серый туман, белый и серый текст, золото для акцентов.
   Кнопки — «жидкое стекло» iOS с неподвижным зерном, на фоне — живой туман
   (fog.js) и мелкое неподвижное зерно.
   ========================================================= */

@property --rim-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 125deg;
}

:root {
  /* основа */
  --bg: #050505;
  --panel: #0a0a0b;
  --white: #f5f4f0;
  --text: #b3b2b0;
  --muted: #76767a;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);

  /* золото */
  --gold: #d9b46a;
  --gold-hi: #f6e2b0;
  --gold-lo: #a97b35;
  --on-gold: #1a1307;

  --grad: linear-gradient(90deg, #ffffff 0%, #dcdad4 38%, #ecd3a0 72%, #d4a456 100%);
  --rim: #ffffff70, #ffffff1c 18%, #f6e2b080 36%, #ffffff14 52%, #ffffff60 70%, #ffffff1c 86%, #ffffff70;

  /* зерно рисует tv.js (пока шторка закрывает экран); до этого его просто нет —
     SVG-шум на месте зерна браузер считал бы на процессоре */
  --grain: none;
  --grain-a: none;
  --grain-size: 160px;

  --r: 20px;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --spring: cubic-bezier(.3, 1.35, .45, 1);
  --glide: cubic-bezier(.6, .05, .2, 1);
  --sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Noto Serif Display', 'Cormorant Garamond', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(16px, 3.2vw, 44px);
  --hdr: 74px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--white);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr) + 8px);
}
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--gold); color: var(--on-gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em; line-height: 1.5; }
.wrap { padding: 0 var(--gutter); max-width: 1680px; margin: 0 auto; }
/* выделенные слова: серебро переходит в золото */
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btns { display: flex; flex-wrap: wrap; gap: 12px; }

main, .foot { position: relative; z-index: 1; }

/* =========================================================
   Фон: мягкие пятна света, звёздочки, туман, зерно
   ========================================================= */
.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* пятна — радиальные градиенты: мягкие сами по себе, без дорогого blur() на движущемся слое */
.ambient i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); animation: drift 26s ease-in-out infinite alternate; will-change: transform; }
.ambient .a1 { --c: #2b2b2f; width: 70vw; aspect-ratio: 1; left: -26vw; top: -28vw; opacity: .55; }
.ambient .a2 { --c: #3a2b12; width: 60vw; aspect-ratio: 1; right: -23vw; top: calc(30vh - 11vw); opacity: .45; animation-duration: 32s; animation-delay: -8s; }
.ambient .a3 { --c: #202024; width: 56vw; aspect-ratio: 1; left: 19vw; bottom: -33vw; opacity: .5; animation-duration: 36s; animation-delay: -15s; }
/* звёздочки: наполовину за краем экрана, медленно крутятся на месте — дымчатое серебро и золото.
   Размытие нарисовано внутри SVG: слой растрируется один раз и дальше только поворачивается */
.ambient .star {
  position: absolute;
  width: clamp(348px, 50vw, 864px);
  aspect-ratio: 1;
  opacity: .22;
  animation: spin 40s linear infinite;
  will-change: transform;
}
.ambient .s1 { left: 0; top: 0; translate: -33.3% -33.3%; }
.ambient .s2 { right: 0; bottom: 0; translate: 33.3% 33.3%; opacity: .17; animation-duration: 50s; animation-direction: reverse; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 8%) scale(1.08); }
  100% { transform: translate(-5%, 3%) scale(.95); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* туман: живой рисует fog.js на WebGL (canvas, класс .gl); без WebGL —
   два слоя дымки из фрактального шума медленно плывут навстречу друг другу */
.fog { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fog canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fog.gl i { display: none; }
.fog i {
  position: absolute;
  inset: -40% -40%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.0022 .0036' numOctaves='5' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.9 0 0 0 -.92'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  background-size: 1400px 900px;
  opacity: .16;
  animation: fog1 80s linear infinite alternate;
  will-change: transform;
}
.fog i + i {
  background-size: 2100px 1350px;
  opacity: .12;
  animation: fog2 110s linear infinite alternate;
}
@keyframes fog1 { to { transform: translate(18%, 6%); } }
@keyframes fog2 { from { transform: translate(14%, -4%) scaleX(-1); } to { transform: translate(-12%, 8%) scaleX(-1); } }

/* зерно: мелкие неподвижные светлые точки по всему фону, как на плёнке */
.tv {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--grain-a) 0 0 / var(--grain-size);
  opacity: .22;
}

/* чёрная шторка на время загрузки: тает, когда начинается появление первого экрана */
.veil { display: none; }
.js .veil {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  pointer-events: none;
  transition: opacity .9s var(--ease), visibility 0s .9s;
}
.js.is-ready .veil { opacity: 0; visibility: hidden; }
/* страховка: если intro.js не загрузился (нет класса .sp), шторка уходит сама */
.js:not(.sp) .veil { animation: veilFail .6s 7s forwards; }
@keyframes veilFail { to { opacity: 0; visibility: hidden; } }

/* анимации блоков за пределами экрана спят (класс ставит main.js) */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* ---------- Появление при скролле: подъём и проявление из размытия ---------- */
.js .rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s), filter 1s var(--ease) var(--d, 0s), translate .6s var(--ease);
}
.js .sec-head.rv, .js .panel.rv .panel-title { filter: blur(10px); }
.js .rv.in, .js .panel.rv.in .panel-title { opacity: 1; transform: none; filter: none; }
.js .panel.rv .panel-title { transition: filter 1.2s var(--ease) .15s; }

/* =========================================================
   Стеклянные кнопки
   ========================================================= */
.gbtn {
  --light-angle: 125deg;
  --lx: 20%;
  --ly: 10%;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 60px;
  padding: 0 26px;
  border-radius: 999px;
  color: var(--white);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  background: rgba(255, 255, 255, .05) linear-gradient(125deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 48%, rgba(246, 226, 176, .06));
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  backdrop-filter: var(--lg-ref,) blur(6px) saturate(1.4);
  box-shadow:
    inset 1.5px 1.5px 0 -.5px rgba(255, 255, 255, .7),
    inset -1px -1px 0 -.5px rgba(255, 255, 255, .3),
    inset 0 0 16px rgba(255, 255, 255, .06),
    0 14px 30px -16px rgba(0, 0, 0, .9),
    0 0 18px rgba(255, 255, 255, .04);
  transition: background .45s, box-shadow .45s, transform .35s var(--ease);
}
.gbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.25px;
  background: conic-gradient(from var(--light-angle), #ffffff88, #ffffff22 12%, #f6e2b0aa 25%, #ffffff18 38%, #ffffff70 52%, #ffffff14 66%, #fff 78%, #ffffff22 88%, #ffffff88);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .8;
  pointer-events: none;
}
.gbtn::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .22), inset 0 -1px 2px rgba(255, 255, 255, .08);
  pointer-events: none;
}
.gbtn .g-optics {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at var(--lx) var(--ly), rgba(255, 255, 255, .5), transparent 65%),
    linear-gradient(165deg, rgba(255, 255, 255, .12) 8%, transparent 27%, rgba(246, 226, 176, .06) 64%, rgba(255, 255, 255, .22));
  opacity: .22;
  transition: opacity .4s;
}
.gbtn .g-glint {
  position: absolute;
  inset: 2px;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: .5;
}
/* у стеклянных кнопок неподвижное зерно лежит в слое блика; у золотых оно в самом цвете */
.gbtn:not(.gbtn--accent) .g-glint { background: var(--grain-a) 0 0 / var(--grain-size); }
.gbtn .g-glint::before {
  content: "";
  position: absolute;
  inset: -80% -40%;
  background: linear-gradient(110deg, transparent 39%, rgba(255, 255, 255, .05) 43%, rgba(255, 255, 255, .5) 49%, rgba(246, 226, 176, .38) 50%, rgba(255, 255, 255, .3) 51%, transparent 57%);
  transform: translateX(-60%);
  animation: glint var(--gd, 8s) ease-in-out var(--gdl, 0s) infinite;
}
.gbtn .g-wave {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.gbtn .g-wave i {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: inset 0 0 3px 2px #fff, inset 3px 0 5px rgba(246, 226, 176, .9), inset -3px 0 5px rgba(255, 255, 255, .6);
  transform: translate(-50%, -50%) scale(.1);
  animation: ripple .9s var(--ease) forwards;
}
.gbtn .g-label, .gbtn svg { position: relative; z-index: 1; }
.gbtn svg { width: 20px; height: 20px; flex: none; transition: transform .45s var(--ease); }
.gbtn:hover {
  background: rgba(255, 255, 255, .09) linear-gradient(125deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 48%, rgba(246, 226, 176, .1));
  box-shadow:
    inset 1.5px 1.5px 0 -.5px rgba(255, 255, 255, .9),
    inset -1px -1px 0 -.5px rgba(255, 255, 255, .4),
    inset 0 0 18px rgba(255, 255, 255, .1),
    0 16px 32px -16px rgba(0, 0, 0, .9),
    0 0 24px rgba(246, 226, 176, .08);
}
.gbtn:hover .g-optics { opacity: .5; }
.gbtn:hover svg { transform: translateX(3px); }
.gbtn:active { transform: scale(.975); }
.gbtn--sm { height: 44px; padding: 0 18px; gap: 10px; font-size: 13.5px; }
.gbtn--sm svg { width: 16px; height: 16px; }
.gbtn--round { width: 96px; height: 58px; padding: 0; }
.gbtn--round svg { width: 38px; }

/* прозрачное жидкое стекло — «смотреть работы», почта */
.gbtn--light {
  color: var(--white);
  background: rgba(255, 255, 255, .06) linear-gradient(125deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 48%, rgba(246, 226, 176, .08));
  box-shadow:
    inset 1.5px 1.5px 0 -.5px rgba(255, 255, 255, .9),
    inset -1px -1px 0 -.5px rgba(255, 255, 255, .42),
    inset 0 0 18px rgba(255, 255, 255, .1),
    0 16px 30px -14px rgba(0, 0, 0, .85),
    0 0 20px rgba(255, 255, 255, .05);
}
.gbtn--light::after { box-shadow: inset 0 1px 2px rgba(255, 255, 255, .3), inset 0 -1px 2px rgba(255, 255, 255, .12); }
.gbtn--light:hover {
  background: rgba(255, 255, 255, .11) linear-gradient(125deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04) 48%, rgba(246, 226, 176, .12));
}

/* золото — главные кнопки: крем → золото → тёплый оранжевый, с неподвижным зерном */
.gbtn--accent {
  --acc: linear-gradient(115deg, #fbf3e2 0%, #f8d27a 38%, #f4a443 70%, #ef7b31 100%);
  color: var(--on-gold);
  background: var(--grain) 0 0 / var(--grain-size) repeat, var(--acc) 0 0 / 130% 100%;
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 1px #fff,
    inset 0 -1px 1px rgba(255, 220, 170, .6),
    0 16px 30px -14px rgba(0, 0, 0, .8),
    -4px 0 18px rgba(244, 194, 27, .18),
    4px 2px 20px rgba(240, 123, 44, .26);
}
.gbtn--accent::before { background: conic-gradient(from var(--light-angle), #fff, #ffe7a8 20%, #fff 40%, #ffc58a 60%, #fff 80%, #ffe7a8); opacity: .95; }
.gbtn--accent::after { box-shadow: inset 0 1px 2px rgba(255, 255, 255, .5), inset 0 -1px 2px rgba(255, 220, 170, .3); }
.gbtn--accent .g-optics { opacity: .42; }
.gbtn--accent:hover {
  background: var(--grain) 0 0 / var(--grain-size) repeat, var(--acc) 100% 0 / 130% 100%;
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 1px #fff,
    inset 0 -1px 1px rgba(255, 220, 170, .7),
    0 20px 34px -14px rgba(0, 0, 0, .85),
    -4px 0 22px rgba(244, 194, 27, .3),
    4px 2px 24px rgba(240, 123, 44, .4);
}
.gbtn--accent:hover .g-optics { opacity: .62; }

@keyframes glint {
  0%, 15% { transform: translateX(-60%); }
  65%, 100% { transform: translateX(60%); }
}
@keyframes ripple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  15% { opacity: .85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(12); }
}

/* =========================================================
   Тёмные стеклянные карточки с тонкой светлой кромкой
   ========================================================= */
.gcard {
  --mx: 50%;
  --my: 0%;
  position: relative;
  isolation: isolate;
  border-radius: var(--r);
  /* без backdrop-filter: под карточками всё время движется туман, и размытие
     пересчитывалось бы на каждом кадре для каждой карточки */
  background: rgba(13, 13, 15, .8) linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012) 55%, rgba(246, 226, 176, .025));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .1),
    0 0 0 1px rgba(255, 255, 255, .07),
    0 30px 60px -36px rgba(0, 0, 0, .95);
  transition: translate .6s var(--ease), box-shadow .5s;
}
.gcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--rim-a), var(--rim));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .35;
  animation: rim 14s linear infinite paused;
  transition: opacity .5s;
  pointer-events: none;
}
.gcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--mx) var(--my), rgba(246, 226, 176, .08), transparent 60%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.gcard:hover { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .1), 0 36px 70px -36px rgba(0, 0, 0, 1); }
.gcard:hover::before { opacity: .85; animation-play-state: running; }
.gcard:hover::after { opacity: 1; }
@keyframes rim { to { --rim-a: 485deg; } }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
}

/* =========================================================
   «Жидкое стекло» iOS: почти прозрачная линза с бликом по кромке.
   Преломление фона у краёв добавляет glass.js (в Chrome, Edge, Яндексе),
   в Safari и Firefox остаётся мягко размытое стекло.
   ========================================================= */
:root {
  --lg-shadow:
    inset 1.5px 1.5px 0 -.5px rgba(255, 255, 255, .6),
    inset -1.5px -1.5px 0 -.5px rgba(255, 255, 255, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 0 16px rgba(255, 255, 255, .05),
    0 12px 30px -12px rgba(0, 0, 0, .9);
}
.lg {
  background: rgba(22, 22, 24, .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: var(--lg-ref,) blur(6px) saturate(1.6) brightness(1.05);
  box-shadow: var(--lg-shadow);
}
/* без преломления (Safari, Firefox) стекло чуть плотнее, чтобы текст читался */
html:not(.lg-refract) .lg { -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
.nav-lens.lg {
  background: rgba(255, 255, 255, .1);
  box-shadow:
    inset 1.5px 1.5px 0 -.5px rgba(255, 255, 255, .85),
    inset -1px -1px 0 -.5px rgba(255, 255, 255, .35),
    inset 0 0 12px rgba(255, 255, 255, .1),
    0 6px 16px -6px rgba(0, 0, 0, .8);
}

/* =========================================================
   Шапка
   ========================================================= */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--hdr);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 var(--gutter);
}
/* при прокрутке за шапкой появляется мягкая дымка: текст уходит под неё, а не под пустоту */
.hdr::before {
  content: "";
  position: absolute;
  inset: 0 0 -34px;
  z-index: -1;
  background: linear-gradient(rgba(5, 5, 5, .86), rgba(5, 5, 5, .5) 55%, rgba(5, 5, 5, 0));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.hdr.is-scrolled::before { opacity: 1; }
.logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-left: -8px;
  padding: 0 18px 0 8px;
  border-radius: 999px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: var(--white);
  transition: background .5s, box-shadow .5s;
}
/* при прокрутке логотип ложится на стеклянную капсулу, как меню */
.hdr.is-scrolled .logo {
  background: rgba(22, 22, 24, .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--lg-shadow);
}
.logo-mark {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 14px -6px rgba(0, 0, 0, .9);
}
.nav { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.pill {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--text);
  font-size: 13.5px;
  transition: color .35s;
}
.pill:hover, .pill.is-active { color: #fff; }
.pill.is-active { font-weight: 500; }
/* линза под пунктом меню: плавно переплывает к пункту под курсором и к текущему разделу */
.nav-lens {
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 0;
  width: 0;
  height: calc(100% - 8px);
  border-radius: 999px;
  opacity: 0;
  scale: .7;
  pointer-events: none;
  transition: transform .8s var(--glide), width .8s var(--glide), opacity .45s var(--ease), scale .6s var(--ease), background .45s;
}
.nav-lens.on { opacity: 1; scale: 1; }
/* в пути капля чуть вытягивается и потом мягко собирается обратно */
.nav-lens.jelly { scale: 1.05 .94; }
.nav-lens::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--rim-a), var(--rim));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: rim 6s linear infinite paused;
}
.nav:hover .nav-lens.on::before { animation-play-state: running; }
.hdr-cta { justify-self: end; }

/* =========================================================
   Первый экран: заголовок по центру проступает из свечения
   ========================================================= */
.hero { position: relative; padding-top: calc(var(--hdr) + clamp(56px, 8vw, 120px)); }
.hero-in { position: relative; text-align: center; }
.hero-title {
  position: relative;
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-stretch: 62.5%;
  font-weight: 400;
  font-size: clamp(56px, 10vw, 168px);
  line-height: .92;
  letter-spacing: -.02em;
  text-shadow: 0 0 34px rgba(255, 255, 255, .14);
}
.hero-title .ln { display: block; }
.hero-title .w { display: inline-block; white-space: nowrap; }
/* «&» — отдельной строкой по центру, меньше и золотом, с тонкими линиями по бокам */
.hero-title .ln-amp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .32em;
  margin: .12em 0 .1em;
  font-size: .42em;
  line-height: 1;
  color: var(--gold);
}
.hero-title .ln-amp::before,
.hero-title .ln-amp::after {
  content: "";
  width: clamp(36px, 7vw, 120px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 180, 106, .75));
}
.hero-title .ln-amp::after { background: linear-gradient(270deg, transparent, rgba(217, 180, 106, .75)); }
.js .hero-title .ln-amp::before,
.js .hero-title .ln-amp::after { opacity: 0; transform: scaleX(.2); transition: opacity 1s var(--ease) .7s, transform 1.4s var(--ease) .7s; }
.js .hero-title .ln-amp::before { transform-origin: right; }
.js .hero-title .ln-amp::after { transform-origin: left; }
.js.is-ready .hero-title .ln-amp::before,
.js.is-ready .hero-title .ln-amp::after { opacity: 1; transform: none; }
/* буквы проступают по одной: из размытия и сильного свечения к чёткому белому */
.js .hero-title .ch {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(.14em) scale(1.06);
  text-shadow: 0 0 30px rgba(255, 255, 255, .95), 0 0 60px rgba(246, 226, 176, .5);
  transition: opacity .9s var(--ease) var(--cd), filter 1.2s var(--ease) var(--cd), transform 1.2s var(--ease) var(--cd), text-shadow 2.4s var(--ease) var(--cd);
}
.js.is-ready .hero-title .ch { opacity: 1; filter: none; transform: none; text-shadow: 0 0 34px rgba(255, 255, 255, .14); }
.hero-title.measuring .ch { transform: none !important; }
/* у разбитой на буквы строки градиент несёт каждая буква (glass.js не трогает) */
.hero-title.is-split .grad { background: none; color: inherit; }
.hero-title.is-split .grad .ch {
  background-image: var(--grad);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-note { max-width: 46ch; margin: clamp(20px, 2.4vw, 30px) auto 0; color: var(--text); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; text-wrap: balance; }
/* остальное на первом экране всплывает после заголовка */
.js .hdr, .js .hero-note, .js .reel-wrap, .js .fog {
  opacity: 0;
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
.js .hero-note { transform: translateY(14px); }
.js .reel-wrap { transform: translateY(80px); }
.js.is-ready .hdr { opacity: 1; transition-delay: .9s; }
.js.is-ready .hero-note { opacity: 1; transform: none; transition-delay: 1s; }
.js.is-ready .reel-wrap { opacity: 1; transform: none; transition-delay: 1.25s; transition-duration: 1.4s, 1.6s; }
.js.is-ready .fog { opacity: 1; transition-duration: 3s; transition-delay: .4s; }
/* страховка: если intro.js не загрузился, первый экран всё равно появится */
.js:not(.sp):not(.is-ready) :is(.hdr, .hero-note, .reel-wrap, .fog, .hero-title .ch) { animation: revealFail .8s 7.5s forwards; }
@keyframes revealFail { to { opacity: 1; transform: none; filter: none; } }

/* ---------- Тёмные блоки (витрина, о студии, контакт) ---------- */
.reel, .panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: calc(var(--r) + 4px);
  background: radial-gradient(120% 90% at 50% 0%, #19191b 0%, #0c0c0d 45%, #060606 100%);
  color: var(--white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .12), 0 60px 120px -60px rgba(0, 0, 0, 1);
}
.panel-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  animation: drift 18s ease-in-out infinite alternate;
  will-change: transform;
}
.blob.b1 { --c: #3c3c42; width: 55%; aspect-ratio: 1; left: -12%; top: -28%; opacity: .5; scale: 1.4; }
.blob.b2 { --c: #6b4e1f; width: 42%; aspect-ratio: 1; right: -10%; top: 6%; opacity: .34; scale: 1.4; animation-duration: 23s; animation-delay: -6s; }
.blob.b3 { --c: #2a2a2e; width: 40%; aspect-ratio: 1; left: 28%; bottom: -38%; opacity: .6; scale: 1.4; animation-duration: 27s; animation-delay: -11s; }
.grain {
  position: absolute;
  inset: 0;
  opacity: .22;
  background: var(--grain-a) 0 0 / var(--grain-size);
}

/* ---------- Витрина ---------- */
.reel-wrap { position: relative; margin-top: clamp(44px, 6vw, 88px); text-align: left; }
/* свет над верхней кромкой витрины, как над панелью у systemdlc */
.reel-wrap::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%;
  top: -46px;
  height: 92px;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .22), transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}
.reel-wrap::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  top: 0;
  height: 1px;
  z-index: 6;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85) 50%, transparent);
  pointer-events: none;
}
.reel { height: clamp(460px, 50vw, 820px); }
.reel-stage { position: absolute; inset: 0; perspective: 1400px; touch-action: pan-y; }
.win { position: absolute; display: block; padding: 0; text-align: left; transition: transform .9s var(--ease); will-change: transform; }
.win-in {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: clamp(12px, 1.4vw, 20px);
  overflow: hidden;
  background: #111;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .12);
  animation: float 7s ease-in-out var(--fd, 0s) infinite;
  transition: box-shadow .4s, transform 1.1s var(--glide);
}
.win:hover .win-in { box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(246, 226, 176, .45), 0 0 40px rgba(246, 226, 176, .16); }
.win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #111; user-select: none; -webkit-user-drag: none; }
/* при листании новая картинка мягко въезжает в окно, старая уходит в другую сторону */
.win img.win-new { animation: winIn .8s var(--ease) var(--wd, 0s) both; }
.win img.win-old { animation: winOut .6s var(--ease) var(--wd, 0s) both; }
@keyframes winIn { from { opacity: 0; transform: translateX(var(--dx)) scale(1.03); filter: blur(8px); } }
@keyframes winOut { to { opacity: 0; transform: translateX(var(--dx)) scale(.98); filter: blur(8px); } }
/* места окон: c — центр, l и r — по бокам */
.win[data-slot="c"] { width: 54%; left: 23%; top: 9%; z-index: 3; }
.win[data-slot="l"] { width: 34%; left: 3%; top: 30%; z-index: 2; }
.win[data-slot="r"] { width: 34%; left: 63%; top: 22%; z-index: 2; }
.win[data-slot="l"] .win-in { transform: rotate(-5deg); }
.win[data-slot="r"] .win-in { transform: rotate(4.5deg); }
/* стеклянные стрелки по центру слева и справа — как в галереях работ */
.gbtn.gbtn--icon.reel-nav { position: absolute; top: 50%; z-index: 6; width: 52px; height: 52px; margin-top: -26px; }
.gbtn--icon.reel-nav svg { width: 20px; height: 20px; }
.reel-prev { left: clamp(12px, 1.8vw, 28px); }
.reel-next { right: clamp(12px, 1.8vw, 28px); }
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
.reel-ui {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: clamp(16px, 2.4vw, 32px);
  padding-top: 90px;
  background: linear-gradient(to top, rgba(5, 5, 5, .94) 20%, transparent);
  pointer-events: none;
}
.reel-ui > * { pointer-events: auto; }
.reel-cap { margin: 0; max-width: 34ch; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.4; color: var(--text); }
.reel-name { display: block; margin-bottom: 4px; color: var(--white); font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.025em; animation: fadeIn .6s var(--ease); }
.reel-ui .btns { justify-content: flex-end; }

/* ---------- Интро ---------- */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: clamp(22px, 4vw, 64px);
  align-items: start;
  padding-top: clamp(72px, 9vw, 140px);
  padding-bottom: clamp(56px, 7vw, 110px);
}
.intro p { margin: 0; max-width: 32ch; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.38; letter-spacing: -.015em; color: var(--text); }
.intro p:first-child { color: var(--white); }
.intro em { font-style: normal; font-weight: 500; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Бегущая строка ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid var(--line);
  padding: 18px 0;
}
.marquee-track {
  display: inline-flex;
  animation: marq 42s linear infinite;
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--white);
}
.marquee-track span { display: inline-flex; align-items: center; }
.marquee-track span::after {
  content: "*";
  margin: 0 .7em;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes marq { to { transform: translateX(-50%); } }

/* =========================================================
   Секции
   ========================================================= */
.sec { padding-top: clamp(84px, 10vw, 160px); }
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(26px, 4vw, 52px);
}
.sec-title, .panel-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(42px, 6.6vw, 104px);
  line-height: .92;
  letter-spacing: -.055em;
  padding-bottom: .04em;
}
.sec-title { color: var(--white); }
.sec-note { margin: 0; max-width: 36ch; color: var(--text); font-size: 15.5px; line-height: 1.45; }

/* ---------- Работы: галереи скриншотов ---------- */
.works { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: clamp(14px, 1.6vw, 22px); }
.wk { display: block; padding: 8px; }
.wk:hover { translate: 0 -4px; }
/* карточка свёрнута: миниатюра, название и кнопка-стрелка; по нажатию раскрывается галерея */
.wk-h { margin: 0; }
.wk-head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  width: 100%;
  padding: 6px;
  border-radius: calc(var(--r) - 8px);
  text-align: left;
  transition: background .4s;
}
.wk-head:hover { background: rgba(255, 255, 255, .03); }
.wk-thumb {
  flex: none;
  width: clamp(86px, 9vw, 128px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  background: #111;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 22px -12px rgba(0, 0, 0, .9);
}
.wk-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s var(--ease); }
.wk-head:hover .wk-thumb img { transform: scale(1.06); }
.wk-tt { flex: 1; min-width: 0; display: grid; gap: 7px; }
.wk-t { color: var(--white); font-size: clamp(19px, 1.7vw, 25px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.wk-sub { color: var(--text); font-size: 13px; letter-spacing: -.005em; }
.wk-tog {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .6s var(--ease), background .4s;
}
.wk-tog svg { width: 18px; height: 18px; }
.wk-head:hover .wk-tog { background: rgba(255, 255, 255, .11); }
.wk.open .wk-tog { transform: rotate(180deg); }
.wk-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s var(--ease); }
.wk.open .wk-body { grid-template-rows: 1fr; }
/* свёрнутая галерея не рисуется и её анимации стоят */
.wk-body-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .65s; }
.wk.open .wk-body-in { visibility: visible; transition: none; }
.wk:not(.open) .wk-body-in * { animation-play-state: paused !important; }
.wk-body .wk-img { margin-top: 8px; }
.wk-img {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(var(--r) - 8px);
  aspect-ratio: 16 / 10;
  background: #111;
  isolation: isolate;
}
.gal-track { display: flex; height: 100%; transition: transform .7s var(--ease); touch-action: pan-y; cursor: zoom-in; }
.gal-track.drag { transition: none; cursor: grabbing; }
.gal-track img { flex: none; width: 100%; height: 100%; object-fit: cover; object-position: top; user-select: none; -webkit-user-drag: none; }
/* лёгкое затемнение снизу, чтобы стеклянные кнопки читались на любом скриншоте */
.wk-img::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent 34%); opacity: 0; transition: opacity .5s; }
.gal-ui {
  position: absolute; left: 50%; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  transform: translateX(-50%);
}
/* стрелки, точки, подпись и «крупно» появляются, только когда курсор над сайтом */
.gal-ui, .gal-cap, .gbtn.gal-zoom {
  opacity: 0;
  transition: opacity .45s var(--ease), translate .6s var(--ease), transform .35s var(--ease), background .45s, box-shadow .45s;
}
.gal-ui { translate: 0 12px; }
.gal-cap { translate: 0 -8px; }
.gbtn.gal-zoom { translate: 0 -8px; }
.wk:hover :is(.gal-ui, .gal-cap, .gal-zoom), .gal:focus-within :is(.gal-ui, .gal-cap, .gal-zoom) {
  opacity: 1;
  translate: 0 0;
}
.wk:hover .wk-img::after, .gal:focus-within::after { opacity: 1; }
/* на сенсорных экранах наведения нет — там всё видно сразу */
@media (hover: none) {
  .gal-ui, .gal-cap, .gbtn.gal-zoom { opacity: 1; translate: 0 0; }
  .wk-img::after { opacity: 1; }
}
.gbtn.gbtn--icon { width: 44px; height: 44px; padding: 0; }
.gbtn--icon svg { width: 18px; height: 18px; }
.gbtn--icon:hover svg { transform: none; }
.gal-prev:hover svg { transform: translateX(-2px); }
.gal-next:hover svg { transform: translateX(2px); }
.gal-dots {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 13px; border-radius: 999px;
}
.lg.gal-dots { background: rgba(10, 10, 12, .35); }
.gal-dots button {
  position: relative; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  transition: transform .5s var(--ease), background .4s, box-shadow .4s;
}
.gal-dots button::before { content: ""; position: absolute; inset: -10px -5px; }
.gal-dots button:hover { background: rgba(255, 255, 255, .8); }
/* выбранный кадр — та же точка, только горит */
.gal-dots button.on {
  transform: scale(1.3);
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8), 0 0 14px 2px rgba(246, 226, 176, .45);
}
.gal-dots button.on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 9px 2px rgba(255, 255, 255, .7), 0 0 20px 4px rgba(246, 226, 176, .45);
  opacity: 0;
  animation: dotGlow 2.6s ease-in-out infinite;
}
@keyframes dotGlow { 50% { opacity: 1; } }
.gal-cap, .gal-zoom { position: absolute; top: 14px; z-index: 2; }
.gal-cap {
  left: 14px; padding: 8px 14px; border-radius: 999px;
  color: var(--white);
  font-size: 12.5px; font-weight: 500; letter-spacing: -.005em;
}
.lg.gal-cap { background: rgba(10, 10, 12, .5); }
.gbtn.gal-zoom { right: 14px; width: 40px; height: 40px; }

/* ---------- Услуги ---------- */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.svc-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(22px, 2.2vw, 30px);
}
.svc-card:hover { translate: 0 -6px; }
.svc-card h3 { margin: 0 0 12px; color: var(--white); font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.svc-card > p { margin: 0 0 20px; color: var(--text); font-size: 15.5px; line-height: 1.45; }
.svc-card .chips { margin-bottom: 22px; }
.svc-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.svc-price { color: var(--gold-hi); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.svc-time { color: var(--muted); font-size: 14px; text-align: right; }
/* широкая карточка «любые сайты» занимает две колонки (на телефоне — всю ширину) */
.svc-card--wide { grid-column: span 2; }
.chips--lg { gap: 8px; }
.chips--lg li { padding: 7px 14px; font-size: 14px; }
/* цена крупно — тем же шрифтом, что заголовок первого экрана */
.svc-card .svc-big {
  margin: 2px 0 16px;
  font-family: var(--serif);
  font-stretch: 62.5%;
  font-size: clamp(46px, 4.6vw, 72px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
  white-space: nowrap;
}
/* что входит в цену — список с золотыми галочками */
.ticks { display: grid; gap: 11px; margin: 4px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 30px; color: var(--text); font-size: 15.5px; line-height: 1.4; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(217, 180, 106, .13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23e8c16f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(217, 180, 106, .45);
}

/* ---------- Процесс ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.step { display: flex; flex-direction: column; padding: clamp(22px, 2.2vw, 28px); min-height: 280px; }
.step:hover { translate: 0 -6px; }
.step-ic, .fact-ic {
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(140deg, #222225, #0c0c0d);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 26px -12px rgba(0, 0, 0, .9);
  color: var(--gold-hi);
}
.step-ic { width: 52px; height: 52px; margin-bottom: 26px; }
.step-ic svg { width: 24px; height: 24px; }
.step h3 { margin: 0 0 8px; color: var(--white); font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.step-d {
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: 13px;
}
.step p { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.45; }

/* ---------- Тёмные панели: общие отступы ---------- */
.panel { padding: clamp(26px, 5vw, 72px); }
.panel-title { color: var(--white); font-size: clamp(50px, 8.2vw, 140px); line-height: .9; margin-bottom: clamp(22px, 3vw, 36px); }

/* ---------- О студии ---------- */
.panel--about .blob.b1 { left: auto; right: -14%; top: -36%; width: 50%; }
.panel--about .blob.b2 { right: auto; left: -12%; top: 40%; width: 44%; }
.panel--about .blob.b3 { left: 46%; bottom: -46%; width: 36%; }
.about {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.about-lead { margin: 0 0 16px; max-width: 30ch; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.3; letter-spacing: -.02em; color: var(--white); }
.about-sub { margin: 0 0 30px; max-width: 40ch; color: var(--text); font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.45; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fact { padding: 22px; }
.fact:hover { translate: 0 -4px; }
.fact-ic { width: 42px; height: 42px; margin-bottom: 18px; border-radius: 13px; }
.fact-ic svg { width: 21px; height: 21px; }
.fact h3 { margin: 0 0 6px; color: var(--white); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.fact p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.45; }
.panel .chips li { font-size: 12.5px; padding: 4px 10px; }

/* ---------- Контакт ---------- */
.cta .blob.b1 { left: -15%; top: -40%; }
.cta .blob.b2 { right: -14%; top: 30%; }
/* без формы заявки всё по центру панели: заголовок, текст и две кнопки мессенджеров */
.cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.cta-l > p:first-of-type { margin-inline: auto !important; }
.cta .btns { justify-content: center; }
.cta-l > p:first-of-type { margin: 0 0 26px; max-width: 38ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.4; color: var(--text); }
.cta-note { margin: 18px 0 0; color: var(--muted); }

/* ---------- Подвал ---------- */
.foot { padding: clamp(70px, 9vw, 130px) var(--gutter) 24px; max-width: 1680px; margin: 0 auto; }
.wordmark {
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-weight: 600;
  font-size: clamp(96px, 25vw, 430px);
  line-height: .78;
  letter-spacing: -.075em;
}
.wordmark > span:first-child {
  background: linear-gradient(180deg, #ffffff 30%, #5c5c60);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .02em;
}
/* звёздочка-сноска: отдельный SVG с центром на оси, поэтому крутится на месте */
.wordmark .ast {
  flex: none;
  width: .27em;
  height: .27em;
  margin: -.03em 0 0 .06em;
  overflow: visible;
  transform-origin: 50% 50%;
  animation: spin 14s linear infinite;
  filter: drop-shadow(0 0 18px rgba(246, 226, 176, .25));
}
.foot-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, 2.5vw, 32px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.totop { transition: color .3s; }
.totop:hover { color: var(--white); }

/* =========================================================
   Просмотр скриншотов крупно
   ========================================================= */
.lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.lb[hidden] { display: none; }
.lb-bg {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: fadeIn .35s var(--ease);
}
.lb-box { position: relative; display: grid; gap: 16px; justify-items: center; width: min(1320px, 100%); animation: popIn .55s var(--ease); }
.lb-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 0 64px; color: #fff; }
.lb-t { display: grid; gap: 2px; min-width: 0; }
.lb-t b { font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; letter-spacing: -.03em; }
.lb-t span { color: var(--text); font-size: 14px; }
.lb-stage { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.lb-view {
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  width: min(100%, calc((100vh - 200px) * 1.6)); aspect-ratio: 16 / 10;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 60px 120px -30px rgba(0, 0, 0, .9);
  background: #111;
}
.lb-track { display: flex; height: 100%; transition: transform .7s var(--ease); touch-action: pan-y; }
.lb-track.drag { transition: none; }
.lb-track img { flex: none; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }

/* ---------- Мобильная навигация ---------- */
.mnav { display: none; }

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 1100px) {
  .svc { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --hdr: 62px; }
  .hdr { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .logo { font-size: 18px; }

  .reel { height: auto; }
  .reel-stage { position: relative; height: 74vw; min-height: 290px; }
  .win[data-slot="c"] { width: 74%; left: 13%; top: 22%; }
  .win[data-slot="l"] { width: 48%; left: -6%; top: 44%; }
  .win[data-slot="r"] { width: 48%; left: 58%; top: 34%; }
  .gbtn.gbtn--icon.reel-nav { top: max(37vw, 145px); width: 44px; height: 44px; margin-top: -22px; }
  .reel-ui { position: relative; flex-direction: column; align-items: stretch; padding-top: 18px; background: none; }
  .reel-ui .btns .gbtn, .panel .btns .gbtn { flex: 1 1 220px; }

  .intro { grid-template-columns: 1fr; }
  .works { grid-template-columns: 1fr; }

  .foot { padding-bottom: 90px; }

  .mnav {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 60;
    transform: translateX(-50%);
    gap: 2px;
    padding: 5px;
    border-radius: 999px;
    max-width: calc(100vw - 20px);
  }
  .mnav.lg { background: rgba(18, 18, 20, .55); }
  .mnav .nav-lens { top: 5px; height: calc(100% - 10px); }
  .mnav a {
    position: relative;
    z-index: 1;
    padding: 9px 11px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    transition: color .3s;
  }
  .mnav a.is-active { color: #fff; font-weight: 500; }

  .lb { padding: 12px; }
  .lb-head { padding: 0 2px; }
  .lb-stage { position: relative; }
  .lb-prev, .lb-next { position: absolute; z-index: 2; top: 50%; margin-top: -22px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

@media (max-width: 620px) {
  .svc, .steps, .facts { grid-template-columns: 1fr; }
  .svc-card--wide { grid-column: auto; }
  .chips--lg { gap: 6px; }
  .chips--lg li { padding: 5px 11px; font-size: 13px; }
  .svc-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  .svc-time { text-align: left; }
  .svc-card, .step { min-height: 0; }
}

@media (max-width: 520px) {
  /* название целиком помещается в стеклянную капсулу и не переносится */
  .logo { gap: 8px; padding-right: 13px; font-size: 16.5px; }
  .logo-mark { width: 26px; height: 26px; }
  .hdr .gbtn--sm { padding: 0 14px; height: 40px; font-size: 12.5px; }
  .reel-cap { font-size: 14px; }
  .gbtn { height: 54px; padding: 0 20px; font-size: 14px; }
  .gbtn--round { width: 84px; height: 52px; padding: 0; }
  .mnav a { padding: 9px 9px; font-size: 11.5px; }
}

/* =========================================================
   Телефоны и планшеты: то же оформление, но легче для видеокарты.
   Живое размытие фона (backdrop-filter) пришлось бы пересчитывать на каждом кадре тумана
   под стеклом — здесь стекло просто плотнее. Медленно плывущие пятна и звёзды фона стоят
   на месте, заголовки проявляются без размытия, у букв первого экрана свечение
   не анимируется (иначе текст перерисовывался бы на каждом кадре).
   ========================================================= */
@media (hover: none) and (pointer: coarse) {
  .gbtn, .lg, .hdr::before, .hdr.is-scrolled .logo { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .gbtn:not(.gbtn--accent) { background-color: rgba(34, 34, 38, .62); }
  .lg { background-color: rgba(18, 18, 20, .8); }
  .lg.gal-dots { background: rgba(10, 10, 12, .55); }
  .lg.gal-cap { background: rgba(10, 10, 12, .7); }
  .mnav.lg { background: rgba(18, 18, 20, .9); }
  .hdr.is-scrolled .logo { background: rgba(22, 22, 24, .88); }
  .hdr::before { background: linear-gradient(rgba(5, 5, 5, .95), rgba(5, 5, 5, .72) 55%, rgba(5, 5, 5, 0)); }

  .ambient i, .ambient .star, .blob { animation: none; will-change: auto; }

  .js .sec-head.rv, .js .panel.rv .panel-title { filter: none; }

  .js .hero-title .ch {
    text-shadow: 0 0 34px rgba(255, 255, 255, .14);
    transition: opacity .9s var(--ease) var(--cd), filter 1.2s var(--ease) var(--cd), transform 1.2s var(--ease) var(--cd);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}