/* ==========================================================================
   GeekChain — тёмная дизайн-система
   Цвета логотипа: красный, жёлтый, зелёный, синий. Шрифты: Geist, Geist Mono.
   ========================================================================== */

/* ---------- Шрифты (самохостинг, вариативные) ---------- */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-mono-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-mono-symbols.woff2) format('woff2'); unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Токены ---------- */
:root {
  --bg: #050608;
  --bg-1: #08090c;
  --bg-2: #0c0e12;
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --line-3: rgba(255, 255, 255, .24);
  --text: #edeef0;
  --text-2: #a0a6b1;
  --text-3: #6b717d;

  /* цвета логотипа, чуть подсвеченные для тёмного фона */
  --red: #ff4a3d;
  --yellow: #ffc21f;
  --green: #4cc44b;
  --blue: #2c9bf0;
  /* исходные цвета логотипа */
  --brand-red: #db1b19;
  --brand-yellow: #f7bd01;
  --brand-green: #459b35;
  --brand-blue: #097dbd;

  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --hdr: 64px;
  --radius: 24px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 12px);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* лёгкое зерно поверх фона — убирает «пластиковость» и бандинг градиентов */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: rgba(255, 194, 31, .32); color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.icon { width: 20px; height: 20px; flex: none; }
.glyph {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--g) center / contain no-repeat;
  mask: var(--g) center / contain no-repeat;
}
.glyph--telegram { --g: url(../img/icons/telegram.svg); }
.glyph--habr { --g: url(../img/icons/habr.svg); }
.glyph--max { --g: url(../img/icons/max.svg); }
.glyph--vk { --g: url(../img/icons/vk.svg); }
.glyph--youtube { --g: url(../img/icons/youtube.svg); }
.glyph--linkedin { --g: url(../img/icons/linkedin.svg); }
.glyph--mc { --g: url(../img/icons/mc.svg); }

.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--text);
  color: #07080a;
  font-weight: 500;
  text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 16px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: clamp(80px, 10vw, 150px); }
.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--wrap), calc(100% - 2 * var(--gutter)));
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}

/* ---------- Метки, заголовки разделов ---------- */
.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 500 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--text));
  box-shadow: 0 0 12px var(--c, rgba(255, 255, 255, .7));
}
.label__i {
  padding: 4px 6px 3px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--text-3);
  letter-spacing: .06em;
}

.shead { margin-bottom: clamp(40px, 6vw, 76px); }
.shead--center { text-align: center; }
.shead__title {
  margin: 20px 0 0;
  max-width: 19ch;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.042em;
  font-weight: 580;
  background: linear-gradient(180deg, #fff 0%, #bfc4cc 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.shead__lead {
  margin: 22px 0 0;
  max-width: 620px;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--text-2);
}

/* ---------- Кнопки и ссылки ---------- */
.btn {
  --h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 15px/1 var(--font);
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background .25s, border-color .25s, color .25s, box-shadow .3s, transform .25s var(--ease), opacity .25s;
}
.btn .icon { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn--light { background: var(--text); color: #07080a; }
.btn--light:hover { background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .07), 0 10px 34px -10px rgba(255, 255, 255, .45); }
.btn--ghost { border-color: var(--line-2); background: rgba(255, 255, 255, .02); }
.btn--ghost:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .06); }
.btn--sm { --h: 36px; padding: 0 14px; font-size: 14px; }
.btn--lg { --h: 54px; padding: 0 26px; font-size: 16px; }
.btn:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.btn:disabled .icon { transform: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-2);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition: border-color .3s, gap .3s var(--ease);
}
.link-arrow .icon { width: 18px; height: 18px; color: var(--c, var(--text)); }
.link-arrow:hover { gap: 12px; border-color: var(--c, var(--text)); }

.pulse {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2.4s var(--ease-out) infinite;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(5, 6, 8, .4);
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.tags li {
  padding: 6px 9px 5px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .055);
  font: 500 12px/1 var(--mono);
  color: var(--text-2);
}

/* подсветка карточек за курсором */
[data-spotlight] { --mx: 50%; --my: 50%; }
[data-spotlight]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255, 255, 255, .055), transparent 42%);
  opacity: 0;
  transition: opacity .45s;
}
[data-spotlight]:hover::after { opacity: 1; }

/* окно «приложения» — для иллюстраций */
.win {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: linear-gradient(180deg, #0f1116, #08090c);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}
.win__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  font: 500 11px/1 var(--mono);
  color: var(--text-3);
}
.win__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.win__bar i:nth-child(1) { background: color-mix(in oklab, var(--brand-red) 70%, #000); }
.win__bar i:nth-child(2) { background: color-mix(in oklab, var(--brand-yellow) 70%, #000); }
.win__bar i:nth-child(3) { background: color-mix(in oklab, var(--brand-green) 70%, #000); }
.win__bar span { margin-left: 10px; }

/* ---------- Логотип ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__mark { width: 28px; height: 28px; transition: transform 1s var(--ease-out); }
.logo:hover .logo__mark { transform: rotate(90deg); }
.logo__word { width: auto; height: 15px; }

/* ---------- Шапка ---------- */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--hdr);
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}
.hdr.is-scrolled, .menu-open .hdr {
  background: rgba(5, 6, 8, .72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.hdr__in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hdr__nav { display: flex; gap: 2px; margin-inline: auto; }
.hdr__nav a {
  position: relative;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14px;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.hdr__nav a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.hdr__nav a.is-active { color: var(--text); }
.hdr__nav a.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  translate: -50% 0;
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
}
.hdr__end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.hdr__nav + .hdr__end { margin-left: 0; }

.region {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
}
.region a {
  padding: 6px 9px;
  border-radius: 999px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--text-3);
  text-decoration: none;
  transition: color .2s, background .2s;
}
.region a:hover { color: var(--text); }
.region a[aria-current] { background: rgba(255, 255, 255, .1); color: var(--text); }

.hdr__burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.hdr__burger span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.hdr__burger span:nth-child(1) { top: 15px; }
.hdr__burger span:nth-child(2) { top: 23px; }
.hdr__burger[aria-expanded='true'] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.hdr__burger[aria-expanded='true'] span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: var(--hdr) 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 24px var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: rgba(5, 6, 8, .97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  overflow-y: auto;
}
.menu__nav { display: grid; }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 560;
  letter-spacing: -.035em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  animation: menuIn .6s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 45ms + 60ms);
}
.menu__nav a span { font: 500 12px/1 var(--mono); color: var(--text-3); letter-spacing: .1em; }
.menu__foot { display: grid; gap: 10px; }
.menu__contact { font-size: 20px; color: var(--text); text-decoration: none; }
.menu__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: max(100svh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--hdr) + 28px);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 68% 38%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 65% at 68% 38%, #000 0%, transparent 72%);
  opacity: .55;
}
/* сетка подсвечивается вокруг курсора */
.hero__grid--lit {
  background-image:
    linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(260px circle at var(--hx, -999px) var(--hy, -999px), #000, transparent 70%);
  mask-image: radial-gradient(260px circle at var(--hx, -999px) var(--hy, -999px), #000, transparent 70%);
  opacity: 1;
}
.hero__glow {
  position: absolute;
  width: 34vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--gc), transparent);
  opacity: .2;
  filter: blur(30px);
  animation: drift 22s ease-in-out infinite alternate;
}
.hero__glow--r { --gc: var(--brand-red); top: -6%; right: 40%; }
.hero__glow--y { --gc: var(--brand-yellow); top: -10%; right: 2%; animation-delay: -6s; opacity: .14; }
.hero__glow--g { --gc: var(--brand-green); top: 40%; right: -6%; animation-delay: -12s; }
.hero__glow--b { --gc: var(--brand-blue); top: 46%; right: 34%; animation-delay: -18s; opacity: .26; }
.hero__gear {
  position: absolute;
  top: 52%;
  right: -9vw;
  width: min(1240px, 75vw);
  aspect-ratio: 752 / 456;
  translate: 0 -50%;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), radial-gradient(ellipse 62% 70% at 58% 46%, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%), radial-gradient(ellipse 62% 70% at 58% 46%, #000 55%, transparent 100%);
  mask-composite: intersect;
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  transition: transform 1.2s var(--ease-out);
}
.hero__video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__video.is-ready, .no-js .hero__video { opacity: 1; }

.hero__in {
  position: relative;
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(28px, 5vh, 56px);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(5, 6, 8, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 500 12px/1.2 var(--mono);
  letter-spacing: .06em;
  color: var(--text-2);
}
.hero__title {
  margin: 28px 0 0;
  max-width: 15ch;
  filter: drop-shadow(0 6px 28px rgba(5, 6, 8, .65));
  font-size: clamp(40px, 6.1vw, 92px);
  line-height: .97;
  letter-spacing: -.048em;
  font-weight: 600;
}
.hero__title span {
  padding-right: .06em;
  background: linear-gradient(100deg, #fff 0%, #c8ccd3 35%, #6f7581 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  margin: 26px 0 0;
  max-width: 640px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--text-2);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding: 22px 24px 24px;
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5, 6, 8, .4), transparent);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__value {
  margin: 0;
  font: 500 clamp(30px, 3.4vw, 48px)/1 var(--mono);
  letter-spacing: -.05em;
  color: var(--text);
}
.stat__value small { margin-left: 6px; font-size: .42em; letter-spacing: 0; color: var(--text-2); }
.stat__label { font-size: 13.5px; line-height: 1.4; color: var(--text-3); max-width: 22ch; }

.ticker {
  position: relative;
  border-top: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: tick 70s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__run {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 17px 9px;
  font: 500 13px/1 var(--mono);
  color: var(--text-3);
  white-space: nowrap;
}
.ticker__run i { font-style: normal; color: rgba(255, 255, 255, .18); }

/* ---------- Экспертиза ---------- */
.xp-list { display: grid; gap: 20px; }
.xp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(70% 90% at 0% 0%, color-mix(in oklab, var(--c) 13%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
  overflow: hidden;
  isolation: isolate;
}
.xp:nth-child(even) { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); background: radial-gradient(70% 90% at 100% 0%, color-mix(in oklab, var(--c) 13%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)); }
.xp:nth-child(even) .xp__text { order: 2; }
.xp__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 500 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c);
}
.xp__tag span { padding: 4px 6px 3px; border: 1px solid color-mix(in oklab, var(--c) 45%, transparent); border-radius: 6px; }
.xp__title {
  margin: 20px 0 0;
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1.04;
  letter-spacing: -.038em;
  font-weight: 580;
}
.xp__desc { margin: 18px 0 0; max-width: 54ch; color: var(--text-2); font-size: clamp(15.5px, 1.2vw, 17px); }
.xp__points { display: grid; gap: 11px; margin: 26px 0 30px; padding: 0; list-style: none; }
.xp__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.xp__points .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--c); }
.xp__visual { position: relative; }
.xp__visual::before {
  content: '';
  position: absolute;
  inset: 12% 8%;
  z-index: -1;
  border-radius: 50%;
  background: var(--c);
  opacity: .1;
  filter: blur(60px);
}

/* 1 · спринт НИР */
.sprint { --c: var(--yellow); padding-bottom: 20px; }
.sprint__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 0; font: 500 12px/1 var(--mono); color: var(--text-3); }
.sprint__day { display: inline-flex; align-items: baseline; gap: 6px; }
.sprint__day b { font-size: 30px; font-weight: 500; color: var(--text); letter-spacing: -.04em; }
.sprint__day em { font-style: normal; }
.sprint__phase {
  padding: 7px 11px;
  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 12%, transparent);
  color: var(--c);
  letter-spacing: .06em;
  transition: color .3s, background .3s;
}
.sprint__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding: 18px 20px; }
.sprint__cell {
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 5px;
  background: rgba(255, 255, 255, .035);
  transition: background .35s, box-shadow .35s, border-color .35s;
}
.sprint__cell.is-on { background: color-mix(in oklab, var(--c) var(--lvl, 55%), #121318); border-color: transparent; }
.sprint__cell.is-now { box-shadow: 0 0 0 1px var(--c), 0 0 18px color-mix(in oklab, var(--c) 70%, transparent); background: var(--c); }
.sprint__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 20px; list-style: none; }
.sprint__steps li {
  padding: 11px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-3);
  transition: color .35s, border-color .35s, background .35s;
}
.sprint__steps li span { display: block; margin-bottom: 7px; font: 500 10px/1 var(--mono); letter-spacing: .08em; }
.sprint__steps li.is-done { color: var(--text-2); border-color: var(--line-2); }
.sprint__steps li.is-active { color: var(--text); border-color: color-mix(in oklab, var(--c) 70%, transparent); background: color-mix(in oklab, var(--c) 10%, transparent); }
.sprint__steps li.is-active span { color: var(--c); }
.sprint__bar { height: 3px; margin: 18px 20px 0; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.sprint__bar span { display: block; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in oklab, var(--c) 40%, transparent), var(--c)); transition: width .3s linear; }

/* 2 · корпоративная интеграция */
.hub { --c: var(--blue); color: var(--c); }
.hub__svg { width: 100%; height: auto; padding: 8px 6px 4px; overflow: visible; }
.hub__line { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 3 4; animation: dash 1.4s linear infinite; }
.hub__packet { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); }
.hub__sys rect { fill: #101217; stroke: rgba(255, 255, 255, .14); }
.hub__sys text { fill: var(--text-2); font: 500 11px var(--mono); text-anchor: middle; }
.hub__sys { animation: sysBlink 4.8s ease-in-out infinite; animation-delay: var(--d); }
.hub__core rect { fill: color-mix(in oklab, var(--c) 16%, #0b0d11); stroke: var(--c); stroke-width: 1.2; }
.hub__core-t { fill: var(--text); font: 600 12px var(--font); letter-spacing: -.01em; text-anchor: middle; }
.hub__core-s { fill: var(--text-3); font: 500 8.5px var(--mono); text-anchor: middle; letter-spacing: .1em; }
.hub__halo { transform-box: fill-box; transform-origin: center; animation: breathe 5s ease-in-out infinite; }

/* 3 · между enterprise-системами */
.inter { --c: var(--green); }
.inter__stage { position: relative; padding: 8px 6px 18px; }
.inter__svg { width: 100%; height: auto; overflow: visible; }
.inter__line { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 1; stroke-dasharray: 3 4; animation: dash 1.4s linear infinite; }
.inter__box rect { fill: #101217; stroke: rgba(255, 255, 255, .14); }
.inter__box text { fill: var(--text-2); font: 500 11px var(--mono); text-anchor: middle; }
.inter__box--r rect { stroke: color-mix(in oklab, var(--c) 40%, transparent); }
.inter__packet { fill: var(--text); filter: drop-shadow(0 0 3px #fff); }
.inter__packet--out { fill: var(--c); filter: drop-shadow(0 0 4px var(--c)); }
.inter__ring { fill: #0b0d11; stroke: color-mix(in oklab, var(--c) 70%, transparent); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.inter__ring--2 { fill: none; animation: ripple 2.6s var(--ease-out) infinite; }
.inter__fn { position: absolute; left: 50%; top: calc(50% + 32px); translate: -50% 0; margin: 0; }
.inter__fn span {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--c) 12%, #08090c);
  font: 500 11px/1 var(--mono);
  color: var(--c);
  white-space: nowrap;
}
.inter__fn span.is-swap { animation: swap .5s var(--ease-out); }

/* ---------- Продукты ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: 500 14px/1 var(--font);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.chip span { font: 500 11px/1 var(--mono); color: var(--text-3); }
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip[aria-pressed='true'] { background: var(--text); border-color: var(--text); color: #07080a; }
.chip[aria-pressed='true'] span { color: #5b616c; }

.featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pf {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(110% 80% at 100% 0%, color-mix(in oklab, var(--pc) 26%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s, transform .5s var(--ease-out);
}
.pf:hover { border-color: var(--line-2); }
.pf__ghost {
  position: absolute;
  right: -10%;
  bottom: -18%;
  z-index: -1;
  width: 64%;
  opacity: .06;
  transform: rotate(-14deg);
  transition: transform 1s var(--ease-out), opacity .6s;
  pointer-events: none;
}
.pf:hover .pf__ghost { transform: rotate(-6deg) scale(1.06); opacity: .11; }
.pf__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf__logo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 40px -6px color-mix(in oklab, var(--pc) 60%, transparent);
}
.pf__logo img { width: 40px; height: 40px; object-fit: contain; }
.pf__name { margin: auto 0 0; padding-top: 56px; font-size: clamp(34px, 4vw, 54px); line-height: 1; letter-spacing: -.045em; font-weight: 600; }
.pf__desc { margin: 14px 0 0; max-width: 46ch; color: var(--text-2); font-size: 16.5px; }
.pf__docs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pf__docs a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px dashed var(--line-2);
  border-radius: 9px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.pf__docs a:hover { color: var(--text); border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
.pf__docs .icon { width: 15px; height: 15px; color: var(--pc); filter: brightness(1.6); }
.pf__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 26px;
  font: 500 14px/1 var(--mono);
  color: var(--text);
  text-decoration: none;
}
.pf__link .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.pf__link:hover .icon { transform: translate(2px, -2px); }
.pf__link::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }

.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.pc a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .018);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .3s, background .3s;
}
/* без «подпрыгивания»: плитка не сдвигается и не меняет высоту при наведении */
.pc a:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
.pc__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .045);
}
.pc__logo img { width: 32px; height: 32px; object-fit: contain; }
.pc__logo { transition: border-color .3s, background .3s; }
.pc__body { display: flex; flex-direction: column; min-width: 0; }
.pc__name { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.pc__name .icon { width: 15px; height: 15px; opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s, transform .35s var(--ease); }
.pc a:hover .pc__name .icon { opacity: 1; transform: none; }
.pc a:hover .pc__logo { border-color: var(--line-2); background: rgba(255, 255, 255, .07); }
.pc__desc {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}
.pc__tags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; font: 500 11px/1.4 var(--mono); color: var(--text-3); }
.pc__tags span + span::before { content: '·'; margin-right: 8px; opacity: .6; }
.pc--cta a { align-items: center; border-style: dashed; border-color: var(--line-2); background: radial-gradient(120% 120% at 100% 0%, rgba(255, 194, 31, .07), transparent 60%); }
.pc--cta a:hover { border-color: rgba(255, 194, 31, .45); }
.pc--cta .pc__logo { border-style: dashed; color: var(--yellow); }
.pc--cta .pc__logo .icon { width: 22px; height: 22px; transition: transform .5s var(--ease-out); }
.pc--cta a:hover .pc__logo .icon { transform: rotate(90deg); }
.pc--cta .pc__name .icon { opacity: 1; transform: none; }
.is-filtered-out { display: none !important; }
.is-filtered-in { animation: pop .5s var(--ease-out) both; }
.products__foot { margin: 36px 0 0; }

/* ---------- Опыт ---------- */
.exp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
.exp-head .shead { margin-bottom: clamp(36px, 5vw, 64px); }
.exp-count {
  display: flex;
  align-items: flex-start;
  margin: 0 0 clamp(28px, 4vw, 56px);
  font: 500 clamp(92px, 15vw, 230px)/.78 var(--mono);
  letter-spacing: -.07em;
  user-select: none;
}
.exp-count span {
  /* запас справа: при отрицательном трекинге последняя цифра выходит за рамку и обрезается фоном */
  padding-right: .1em;
  background: linear-gradient(180deg, #fff 5%, rgba(255, 255, 255, .06) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.exp-count em { font-style: normal; font-size: .4em; color: var(--yellow); }

.cases { border-top: 1px solid var(--line); }
.case { border-bottom: 1px solid var(--line); }
.case summary {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(170px, 250px) 42px;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
}
.case summary::-webkit-details-marker { display: none; }
.case__i { font: 500 13px/1 var(--mono); color: var(--text-3); }
.case__area { display: block; margin-bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.case__title { display: block; font-size: clamp(19px, 2.1vw, 28px); line-height: 1.15; letter-spacing: -.028em; font-weight: 560; color: #d9dce1; transition: color .25s; }
.case summary:hover .case__title, .case[open] .case__title { color: #fff; }
.case__metric b { display: block; font: 500 22px/1.1 var(--mono); letter-spacing: -.03em; color: var(--text); }
.case__metric span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--text-3); }
.case__toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transition: transform .45s var(--ease), background .3s, color .3s, border-color .3s;
}
.case__toggle .icon { width: 18px; height: 18px; }
.case summary:hover .case__toggle { border-color: var(--line-3); }
.case[open] .case__toggle { transform: rotate(45deg); background: var(--text); border-color: var(--text); color: #07080a; }
.case__body { padding: 0 0 40px 78px; }
.case[open] .case__body { animation: caseIn .6s var(--ease-out); }
.case__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 44px; margin: 0; }
.case__grid dt { margin-bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.case__grid dd { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.case__result { grid-column: 1 / -1; padding: 20px 22px; border: 1px solid rgba(76, 196, 75, .2); border-radius: 18px; background: linear-gradient(90deg, rgba(76, 196, 75, .09), rgba(76, 196, 75, .01)); }
.case__result dt { color: var(--green); }
.case__result dd { color: var(--text); }
.case__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.case__foot .tags { margin: 0; }
.case__product {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .25s, background .25s;
}
.case__product:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
.case__product img { width: 20px; height: 20px; }
.case__product .icon { width: 15px; height: 15px; color: var(--text-3); }

.more { margin-top: 56px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: 26px; background: rgba(255, 255, 255, .015); }
.more__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.more__title { margin: 0; font-size: 26px; font-weight: 580; letter-spacing: -.03em; }
.more__title span { font-family: var(--mono); font-weight: 500; color: var(--text-3); }
.more__note { margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.more__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; padding: 0; list-style: none; }
.more__list li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-2);
  cursor: default;
  transition: border-color .25s, color .25s, background .25s;
}
.more__list li:hover { border-color: var(--line-2); color: var(--text); background: rgba(255, 255, 255, .03); }
.more__list i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--tc); box-shadow: 0 0 8px var(--tc); }
[data-tag='iot'] { --tc: var(--green); }
[data-tag='ai'] { --tc: var(--yellow); }
[data-tag='security'] { --tc: var(--red); }
[data-tag='telephony'] { --tc: var(--blue); }
[data-tag='data'] { --tc: #a98bff; }
[data-tag='edtech'] { --tc: #ff7fcf; }
[data-tag='construction'] { --tc: #ff9b43; }
[data-tag='platform'] { --tc: #46d4e6; }

/* ---------- Команда ---------- */
.crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mate {
  position: relative;
  aspect-ratio: 3 / 4.25;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: linear-gradient(180deg, #0d0f13, #07080a);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .4s;
}
.mate:hover { border-color: color-mix(in oklab, var(--c) 40%, transparent); }
.mate__glow {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -32%;
  z-index: -1;
  height: 85%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: .32;
  filter: blur(26px);
  transition: opacity .6s, transform .8s var(--ease-out);
}
.mate:hover .mate__glow { opacity: .55; transform: scale(1.12); }
.mate__photo {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 80%;
  width: auto;
  max-width: none;
  translate: -50% 0;
  transition: transform .9s var(--ease-out);
  transform-origin: 50% 100%;
}
.mate:hover .mate__photo { transform: scale(1.04); }
.mate__photo--grigory { height: 66%; }
.mate__photo--alexander { height: 140%; bottom: -46%; }
.mate__photo--jared { height: 74%; }
.mate__photo--spock { height: 72%; }
.mate__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 8, .55), transparent 28%, transparent 52%, rgba(5, 6, 8, .94) 88%);
}
.mate__name { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.mate__name::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); }
.mate__quote { margin: 0; font-size: 14.5px; line-height: 1.5; color: #c8ccd3; }
.mate__quote::before { content: '«'; } .mate__quote::after { content: '»'; }
:lang(en) .mate__quote::before { content: '“'; } :lang(en) .mate__quote::after { content: '”'; }

/* ---------- Сообщество: созвездие ---------- */
.community__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(32px, 5vw, 88px); }
.community__text .shead { margin-bottom: 0; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 32px 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.legend i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.legend span { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--text-3); }
.community__hint { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.community__hint .icon { width: 15px; height: 15px; }
.community__text > .btn { margin-top: 28px; }
.demo-note { margin: 16px 0 0; font: 500 11px/1.5 var(--mono); color: #c99a2e; }

.cst { position: relative; width: 100%; max-width: 760px; margin-inline: auto; overflow-anchor: none; } /* вращается — не опора для прокрутки, см. .space-scene */
.cst__field { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.cst__rot { position: absolute; inset: 0; animation: spin 260s linear infinite; animation-play-state: paused; }
.cst__spin { position: relative; width: 100%; height: 100%; animation: spin 260s linear infinite reverse; animation-play-state: paused; }
.cst.is-live .cst__rot, .cst.is-live .cst__spin { animation-play-state: running; }
.cst.is-hover .cst__rot, .cst.is-hover .cst__spin { animation-play-state: paused; }
.cst__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cst__orbits circle { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.cst__paths path {
  fill: none;
  stroke: var(--c);
  stroke-opacity: .3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out) var(--d), stroke-opacity .3s, stroke-width .3s;
}
.cst.is-in .cst__paths path { stroke-dashoffset: 0; }
.cst.is-ready .cst__paths path { transition-delay: 0s; }
.cst__paths path.is-hl { stroke-opacity: 1; stroke-width: 2; }
.cst.has-hl .cst__paths path:not(.is-hl) { stroke-opacity: .12; }
.cst__pulse {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 60 1000;
  stroke-dashoffset: 60;
  opacity: 0;
}
.cst__pulse.is-run { animation: pulseRun 1.7s var(--ease) forwards; }

.cst__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: calc(var(--s) * 1cqw);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  transform: translate(calc((50 - var(--xn)) * 1cqw), calc((50 - var(--yn)) * 1cqw)) scale(.2);
  transition: transform 1.1s var(--ease-out) var(--d), opacity .7s var(--d);
}
.cst.is-in .cst__node { opacity: 1; transform: none; }
.cst.is-ready .cst__node { transition-delay: 0s; }
.cst__face {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in oklab, var(--c) 70%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--c) 30%, #0a0b0e);
  color: #fff;
  font: 600 calc(var(--s) * .34cqw) / 1 var(--font);
  letter-spacing: -.02em;
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s var(--ease-out), box-shadow .35s, background .35s;
}
.cst__face img { width: 100%; height: 100%; object-fit: cover; }
.cst__node--r4 .cst__face { font-size: calc(var(--s) * .32cqw); }
/* код специализации («химический элемент»), пока человек не дал согласие показать имя */
.cst__code { font-family: var(--mono); font-weight: 500; letter-spacing: -.04em; opacity: .9; }
.cst__node:hover .cst__face, .cst__node.is-hl .cst__face { transform: scale(1.35); background: color-mix(in oklab, var(--c) 45%, #0a0b0e); box-shadow: 0 0 0 1.5px var(--c), 0 0 26px var(--c); }
.cst__node:hover { z-index: 3; }
.cst__node--center { z-index: 2; }
.cst__node--center::before {
  content: '';
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  background: conic-gradient(from 270deg, var(--red) 0 25%, var(--yellow) 0 50%, var(--green) 0 75%, var(--blue) 0 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.cst__node--center::after {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .12), transparent);
}
.cst__node--center .cst__face { border: 0; background: radial-gradient(circle at 50% 40%, #16181e, #08090c 70%); }
.cst__face .cst__mark { width: 58%; height: 58%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .12)); }
.cst__node--center:hover .cst__face { transform: scale(1.06); box-shadow: 0 0 40px rgba(255, 255, 255, .25); }

.cst__tip {
  position: absolute;
  z-index: 10;
  min-width: 190px;
  max-width: 260px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--c, #fff);
  border-radius: 12px;
  background: rgba(11, 12, 16, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 48px -12px #000;
  pointer-events: none;
  translate: -50% calc(-100% - 12px);
  animation: tipIn .2s var(--ease-out);
}
.cst__tip.is-below { translate: -50% 12px; }
.cst__tip p { margin: 0; }
.cst__tip-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.cst__tip-role { margin-top: 2px !important; font-size: 13px; color: var(--text-2); }
.cst__tip-city { margin-top: 6px !important; font: 500 11px/1.3 var(--mono); color: var(--text-3); }

/* часовые пояса */
.tz { margin-top: 30px; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, .018); }
.tz__title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.tz__title .icon { width: 18px; height: 18px; color: var(--yellow); }
.tz__text { margin: 6px 0 0; font-size: 14px; color: var(--text-2); }
.tz__track { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 17), minmax(0, 1fr)); gap: 3px; height: 54px; margin-top: 18px; }
.tz__col { position: relative; border-radius: 5px; background: rgba(255, 255, 255, .035); transition: background .6s; }
.tz__col.is-work { background: linear-gradient(180deg, rgba(255, 194, 31, .34), rgba(255, 194, 31, .06)); }
.tz__col.is-edge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.tz__col em { position: absolute; left: 50%; bottom: -19px; translate: -50% 0; font: 500 9.5px/1 var(--mono); font-style: normal; color: var(--text-3); white-space: nowrap; }
.tz__dot { position: absolute; left: 50%; top: 50%; width: var(--d, 6px); height: var(--d, 6px); translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .8); }
.tz__ends { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 30px; }
.tz__ends p { margin: 0; font-size: 12px; color: var(--text-3); }
.tz__ends p:last-child { text-align: right; }
.tz__ends b { display: block; margin-top: 2px; font: 500 22px/1 var(--mono); letter-spacing: -.03em; color: var(--text); }
.tz__legend { display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono) !important; }
.tz__legend i { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 194, 31, .55), rgba(255, 194, 31, .12)); }
.tz-caption { margin: 14px 0 0; font: 500 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--text-3); }
.tz-caption b { font-weight: 500; color: var(--text); }

/* ---------- Сотрудничество ---------- */
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(80% 60% at 0% 0%, color-mix(in oklab, var(--c) 9%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .006));
  overflow: hidden;
  isolation: isolate;
}
.vcard::before { content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .85; }
.vcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vcard__n { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--c); }
.vcard__icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid color-mix(in oklab, var(--c) 35%, transparent); border-radius: 16px; background: color-mix(in oklab, var(--c) 10%, transparent); color: var(--c); box-shadow: 0 0 40px -8px color-mix(in oklab, var(--c) 50%, transparent); transition: transform .6s var(--ease-out); }
.vcard__icon .icon { width: 24px; height: 24px; }
.vcard:hover .vcard__icon { transform: rotate(-8deg) scale(1.06); }
.vcard__title { margin: 18px 0 18px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.032em; font-weight: 580; }
.vcard__text, .vcard__intro { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.vcard__list { margin: 0 0 14px; padding-left: 20px; font-size: 15.5px; line-height: 1.55; }
.vcard__list li { margin: 6px 0; }
.vcard__list li::marker { color: var(--c); }
.vcard__hl { margin: 6px 0 0; padding: 13px 16px; border: 1px solid color-mix(in oklab, var(--c) 30%, transparent); border-radius: 14px; background: color-mix(in oklab, var(--c) 10%, transparent); font-weight: 500; }
.vcard__more { align-self: flex-start; margin-top: auto; }
.vcard__text + .vcard__more, .vcard__hl + .vcard__more { margin-top: max(24px, auto); }

/* ---------- Товарные знаки и свидетельства ---------- */
.docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: 0; padding: 0; list-style: none; }
.doc { display: flex; flex-direction: column; gap: 22px; }
.doc__open { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; perspective: 1000px; border-radius: 12px; }
.doc__paper {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f1ea;
  box-shadow: 0 34px 60px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06);
  transform: rotateX(12deg) rotateZ(-2.2deg);
  transform-origin: 50% 100%;
  filter: brightness(.8) saturate(.85);
  transition: transform .8s var(--ease-out), filter .5s, box-shadow .5s;
}
.doc:nth-child(even) .doc__paper { transform: rotateX(12deg) rotateZ(2.2deg); }
.doc__open:hover .doc__paper, .doc__open:focus-visible .doc__paper { transform: translateY(-10px); filter: none; box-shadow: 0 50px 80px -30px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 255, 255, .1); }
.doc__paper img { width: 100%; height: auto; }
.doc__kind { display: flex; align-items: center; gap: 7px; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.doc__kind .icon { width: 14px; height: 14px; color: var(--yellow); }
.doc__title { margin: 10px 0 4px; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.doc__num { margin: 0; font: 500 15px/1.3 var(--mono); color: var(--text); }
.doc__dates { display: grid; gap: 6px; margin: 14px 0 0; }
.doc__dates div { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px dashed var(--line-2); font-size: 13px; }
.doc__dates dt { color: var(--text-3); }
.doc__dates dd { margin: 0; color: var(--text-2); text-align: right; }
.doc__pdf { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 500 12px/1 var(--mono); color: var(--text-2); text-decoration: none; }
.doc__pdf:hover { color: var(--text); }
.doc__pdf .icon { width: 15px; height: 15px; }

.creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
.cred { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .02); transition: border-color .3s, background .3s; }
.cred:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .035); }
.cred__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .05); color: #d8b35e; }
.cred__icon .glyph { width: 30px; height: 30px; }
.cred__icon .icon { width: 24px; height: 24px; color: var(--green); }
.cred__body { display: grid; gap: 3px; min-width: 0; }
.cred__kind { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.cred__title { font-weight: 600; letter-spacing: -.01em; }
.cred__num { font: 500 13px/1.3 var(--mono); color: var(--text-2); }
.cred__a { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-left: auto; border: 1px solid var(--line-2); border-radius: 50%; color: var(--text-2); }
.cred__a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cred__a .icon { width: 16px; height: 16px; }

.lb {
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 26px;
  background: #0a0b0e;
  color: var(--text);
  overflow: auto;
  overscroll-behavior: contain;
}
.lb::backdrop { background: rgba(2, 3, 4, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lb[open] { animation: lbIn .45s var(--ease-out); }
.lb__close { position: sticky; top: 14px; float: right; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin: 14px 14px -54px 0; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(10, 11, 14, .8); cursor: pointer; }
.lb__close .icon { width: 18px; height: 18px; }
.lb__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: clamp(20px, 3vw, 40px); padding: clamp(16px, 3vw, 36px); }
.lb__fig { margin: 0; border-radius: 12px; overflow: hidden; background: #f4f1ea; }
.lb__fig img { width: 100%; height: auto; }
.lb__meta { position: sticky; top: 24px; padding-top: 12px; }
.lb__title { margin: 10px 0 6px; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; }
.lb__holder { margin: 18px 0 22px; font-size: 14px; color: var(--text-2); }
.lb .btn .icon { width: 16px; height: 16px; }

/* ---------- Клиенты ---------- */
.clients__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.client { flex: 1 1 180px; max-width: 260px; height: 132px; }
.client a {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .018);
  overflow: hidden;
  transition: border-color .35s, background .35s;
}
.client a:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
/* все логотипы — в одном светлом стиле, при наведении проявляются полностью */
.client img {
  width: auto;
  height: var(--h, 32px);
  max-width: 76%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .55;
  transition: opacity .35s;
}
.client a:hover img { opacity: 1; }
.client--empty { display: grid; place-items: center; border: 1px dashed var(--line-2); border-radius: 20px; }
.client--empty span { padding: 8px 12px; border: 1px dashed var(--line-2); border-radius: 9px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Контакты и форма ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(36px, 6vw, 96px); }
.contact__info .shead { margin-bottom: 40px; }
.contact__list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.contact__list span { display: block; margin-bottom: 6px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.contact__list a {
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.contact__list a:hover { background-size: 100% 1px; }
.contact__socials { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 36px; }
.contact__socials > span { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials__a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--text-2); transition: color .25s, border-color .25s, background .25s, transform .3s var(--ease); }
.socials__a:hover { color: var(--text); border-color: var(--line-3); background: rgba(255, 255, 255, .05); transform: translateY(-2px); }

.contact__card {
  position: relative;
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .95);
}
.contact__card::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from 210deg, var(--brand-red), var(--brand-yellow), var(--brand-green), var(--brand-blue), var(--brand-red));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .4;
  pointer-events: none;
}
.form { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { position: relative; display: block; }
.field input, .field textarea {
  display: block;
  width: 100%;
  height: 58px;
  padding: 24px 16px 8px;
  border: 1px solid var(--line-2);
  border-radius: 15px;
  background: rgba(5, 6, 8, .55);
  color: var(--text);
  font: 400 16px/1.3 var(--font);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { height: auto; min-height: 128px; padding-top: 30px; line-height: 1.5; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--line-3); }
.field input:focus, .field textarea:focus { border-color: rgba(255, 255, 255, .4); background: rgba(5, 6, 8, .8); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
.field__label { position: absolute; left: 17px; top: 19px; font-size: 16px; color: var(--text-3); pointer-events: none; transform-origin: 0 0; transition: transform .22s var(--ease), color .22s; }
.field input:focus + .field__label, .field input:not(:placeholder-shown) + .field__label,
.field textarea:focus + .field__label, .field textarea:not(:placeholder-shown) + .field__label { transform: translateY(-10px) scale(.74); color: var(--text-2); }
.field.is-error input, .field.is-error textarea { border-color: rgba(255, 74, 61, .75); }
.field__err { display: block; margin: 7px 2px 0; font-size: 12.5px; color: #ff8a80; }
.field__err:empty { display: none; }
.topics { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.topics legend { margin-bottom: 11px; padding: 0; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.topics__list { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { position: relative; }
.topic input { position: absolute; opacity: 0; pointer-events: none; }
.topic span { display: inline-flex; align-items: center; height: 40px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; color: var(--text-2); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.topic span:hover { color: var(--text); border-color: var(--line-3); }
.topic input:checked + span { background: var(--text); border-color: var(--text); color: #07080a; }
.topic input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.topics.is-error .topic span { border-color: rgba(255, 74, 61, .55); }
.check { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; }
.check__box { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--line-3); border-radius: 6px; transition: background .2s, border-color .2s; }
.check__box .icon { width: 14px; height: 14px; color: #07080a; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s var(--ease-out); }
.check input:checked + .check__box { background: var(--text); border-color: var(--text); }
.check input:checked + .check__box .icon { opacity: 1; transform: none; }
.check input:focus-visible + .check__box { outline: 2px solid #fff; outline-offset: 2px; }
.check a { color: var(--text); text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.form__submit { width: 100%; margin-top: 6px; }
.form.is-sending .form__submit { pointer-events: none; }
.form.is-sending .form__submit .icon { animation: nudge .8s var(--ease) infinite alternate; }
.form__error { margin: 0; padding: 12px 14px; border: 1px solid rgba(255, 74, 61, .3); border-radius: 13px; background: rgba(255, 74, 61, .08); font-size: 14px; color: #ffb3ab; }
.form__error a { color: #fff; }
.done { display: grid; justify-items: start; gap: 12px; padding: 8px 0; outline: none; }
.done__icon { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgba(76, 196, 75, .4); border-radius: 50%; background: rgba(76, 196, 75, .12); color: var(--green); animation: pop .6s var(--ease-out); }
.done__icon .icon { width: 28px; height: 28px; }
.done__title { margin: 10px 0 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; }
.done__text { margin: 0 0 12px; color: var(--text-2); }
.done__text b { color: var(--text); font-weight: 500; }

/* ---------- Подвал ---------- */
.ftr { position: relative; padding-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
/* тонкая линия в цветах логотипа и мягкое свечение под ней */
/* z-index: -1 и pointer-events: none — свечение ::after (180 px) лежит под ссылками подвала и не перехватывает
   клики и выделение: из-за opacity линия — отдельный слой, и без этого оно оказывалось поверх первых ссылок колонок */
.ftr__line { position: absolute; top: -1px; left: 0; right: 0; z-index: -1; height: 1px; background: linear-gradient(90deg, transparent 4%, var(--brand-red) 18%, var(--brand-yellow) 39%, var(--brand-green) 61%, var(--brand-blue) 82%, transparent 96%); opacity: .75; pointer-events: none; }
.ftr__line::after { content: ''; position: absolute; left: 10%; right: 10%; top: 0; z-index: -1; height: 180px; background: linear-gradient(90deg, var(--brand-red), var(--brand-yellow), var(--brand-green), var(--brand-blue)); opacity: .06; filter: blur(60px); }
.ftr__in { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); }
.ftr__tagline { max-width: 34ch; margin: 22px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.ftr__info { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-2); font-size: 13px; line-height: 1.75; color: var(--text-3); }
.ftr__info p { margin: 0; }
.ftr__info a { color: var(--text-2); }
.ftr__company { color: var(--text-2); font-weight: 500; }
.ftr__h { margin: 6px 0 18px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.ftr__col ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* только ссылки-пункты списков: иконки соцсетей и кнопка в колонке «Контакты» живут по своим правилам */
.ftr__col li > a { display: inline-flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 14px; line-height: 1.35; color: var(--text-2); text-decoration: none; transition: color .2s; }
.ftr__col li > a:hover { color: var(--text); }
.ftr__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in oklab, var(--c) 32%, transparent);
  border-radius: 9px;
  background: color-mix(in oklab, var(--c) 10%, transparent);
  color: var(--c);
  transition: background .3s, box-shadow .3s, border-color .3s;
}
.ftr__ico .icon { width: 15px; height: 15px; }
.ftr__col li > a:hover .ftr__ico { border-color: color-mix(in oklab, var(--c) 60%, transparent); background: color-mix(in oklab, var(--c) 20%, transparent); box-shadow: 0 0 18px -4px var(--c); }
.ftr__col li > .ftr__big { font-size: 16px; font-weight: 500; color: var(--text); letter-spacing: -.01em; }
.ftr__contact .socials { margin-top: 16px; }
.ftr__contact .socials__a { width: 36px; height: 36px; border-radius: 10px; }
.ftr__cta { margin-top: 18px; }
.ftr__mark { height: clamp(48px, 15vw, 200px); margin-top: clamp(48px, 7vw, 96px); }
.ftr__mark span {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 65%) 0 0 / 300% 100%,
    linear-gradient(90deg, rgba(219, 27, 25, .2), rgba(247, 189, 1, .17), rgba(69, 155, 53, .2), rgba(9, 125, 189, .24)),
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
  -webkit-mask: url(../img/brand/wordmark.svg) center / contain no-repeat;
  mask: url(../img/brand/wordmark.svg) center / contain no-repeat;
  animation: sheen 11s linear infinite;
}
.ftr__accr { display: flex; align-items: center; gap: 14px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 18px 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.ftr__accr a { color: var(--text-2); }
.ftr__accr-icon { width: 30px !important; height: 30px !important; color: #c9a75a; }
.ftr__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0 max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }
.ftr__copy { margin: 0; }

/* статус системы и та самая кнопка */
.sys { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .03em; color: var(--text-3); }
.sys__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sys__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2.6s var(--ease-out) infinite; }
.sys__reboot {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 24px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--text-3);
  font: inherit;
  cursor: pointer;
  opacity: .4;
  transition: opacity .3s, color .3s, border-color .3s, background .3s, gap .3s;
}
.sys__reboot .icon { width: 13px; height: 13px; }
.sys__reboot span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .45s var(--ease); }
.sys__reboot:hover, .sys__reboot:focus-visible { gap: 6px; opacity: 1; color: var(--red); border-color: rgba(255, 74, 61, .35); background: rgba(255, 74, 61, .07); }
.sys__reboot:hover span, .sys__reboot:focus-visible span { max-width: 220px; }
.sys.is-busy .sys__dot { background: var(--yellow); }
.sys.is-busy .sys__reboot .icon { animation: spin 1.2s linear infinite; }

/* ---------- Cookie и уведомления ---------- */
.cookie {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  width: min(410px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  background: rgba(12, 13, 17, .93);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -20px #000;
  animation: up .6s var(--ease-out);
}
.cookie__title { margin: 0 0 6px; font-weight: 600; }
.cookie__text { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.cookie__text a { color: var(--text); }
.cookie__btns { display: flex; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; padding: 10px 16px; border-radius: 999px; translate: -50% 0; background: var(--text); color: #07080a; font-size: 14px; font-weight: 500; box-shadow: 0 20px 40px -10px #000; animation: up .35s var(--ease-out); }

/* ---------- Внутренние страницы ---------- */
.page-top { height: var(--hdr); }
.phero { position: relative; padding: calc(var(--hdr) + clamp(48px, 8vw, 112px)) 0 clamp(44px, 6vw, 80px); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.phero__bg, .nf__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.phero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 85% 0%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 100% at 85% 0%, #000, transparent 70%);
  opacity: .55;
}
.phero__glow { position: absolute; top: -50%; right: -12%; width: 64vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(44, 155, 240, .16), rgba(255, 194, 31, .05) 60%, transparent); filter: blur(10px); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 30px; font: 500 12px/1.4 var(--mono); color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs i { font-style: normal; opacity: .5; }
.phero__title { max-width: 20ch; margin: 20px 0 0; font-size: clamp(36px, 5.6vw, 78px); line-height: 1; letter-spacing: -.047em; font-weight: 600; }
.phero__lead { max-width: 660px; margin: 24px 0 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--text-2); }
.phero__meta { display: flex; align-items: center; gap: 8px; margin: 30px 0 0; font: 500 12px/1 var(--mono); color: var(--text-3); }
.phero__meta .icon { width: 15px; height: 15px; }

.article__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); padding-block: clamp(48px, 7vw, 100px); }
.article__grid--single { grid-template-columns: minmax(0, 1fr); }
.article__grid--single .prose { margin-inline: auto; }
.toc { position: sticky; top: calc(var(--hdr) + 32px); align-self: start; max-height: calc(100vh - var(--hdr) - 64px); overflow: auto; scrollbar-width: none; }
.toc__title { margin: 0 0 14px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.toc ol { display: grid; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 1px solid transparent; font-size: 13.5px; line-height: 1.4; color: var(--text-3); text-decoration: none; transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--text-2); }
.toc a.is-active { color: var(--text); border-left-color: var(--yellow); }

.prose { max-width: 740px; font-size: 17px; line-height: 1.75; color: #c2c7cf; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.1em 0 .7em; font-size: clamp(23px, 2.5vw, 31px); line-height: 1.2; letter-spacing: -.03em; font-weight: 600; color: var(--text); scroll-margin-top: calc(var(--hdr) + 24px); }
.prose h3 { margin: 1.8em 0 .6em; font-size: 21px; line-height: 1.3; color: var(--text); }
.prose p { margin: 0 0 1.05em; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.prose a:hover { text-decoration-color: #fff; }
.prose b, .prose strong { color: var(--text); font-weight: 600; }
.prose ol, .prose ul { margin: 0 0 1.3em; padding-left: 1.35em; }
.prose li { margin: .4em 0; padding-left: .2em; }
.prose li::marker { color: var(--text-3); font-family: var(--mono); font-size: .86em; }
.prose table { display: block; width: 100%; max-width: 100%; margin: 1.4em 0 1.8em; overflow-x: auto; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.prose tbody, .prose thead { display: table; width: 100%; border-collapse: collapse; }
.prose td, .prose th { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.prose td:first-child { white-space: nowrap; color: var(--text-2); }
.prose td[colspan] { white-space: normal; }
.prose img { height: auto; border-radius: 14px; }
.prose button[data-consent-revoke] { display: inline-flex; align-items: center; height: 42px; margin: .2em 0 1.4em; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--text); font: 500 15px/1 var(--font); cursor: pointer; transition: background .2s, border-color .2s; }
.prose button[data-consent-revoke]:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-3); }
.article--doc .prose h2 { font-size: clamp(20px, 2vw, 25px); }
.vulcan { margin: 72px 0 40px; font-size: 64px; line-height: 1; text-align: center; }
.vulcan a { display: inline-block; text-decoration: none !important; transition: transform .5s var(--ease-out); }
.vulcan a:hover { transform: rotate(-14deg) scale(1.12); }
/* Космическая сцена внизу страницы «Для гиков» (src/assets/js/space-scene.mjs): слои-canvas друг над другом в окне 740×560.
   overflow-anchor: none — непрерывная анимация сбивает «привязку прокрутки» браузера (Firefox): страница сама уезжала */
.space-scene { max-width: 740px; margin: 56px auto 0; overflow-anchor: none; }
/* без рамки: края сцены плавно растворяются в странице (маска к прозрачному), поэтому границ не видно */
.space-scene__stage {
  position: relative;
  aspect-ratio: 740 / 560;
  overflow: hidden;
  isolation: isolate;
  background: #050608;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 17%, #000 83%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 17%, #000 83%, transparent);
  mask-composite: intersect;
}
.space-scene__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.space-scene__debug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.space-scene__fps { min-width: 9ch; margin-left: auto; font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-3); }

.cta-band { padding-block: clamp(48px, 7vw, 96px); }
.cta-band__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(26px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(255, 194, 31, .1), transparent 60%),
    radial-gradient(70% 140% at 0% 100%, rgba(44, 155, 240, .1), transparent 60%),
    rgba(255, 255, 255, .02);
}
.cta-band__title { margin: 0; font-size: clamp(26px, 3vw, 42px); line-height: 1.1; letter-spacing: -.038em; font-weight: 600; }
.cta-band__text { margin: 10px 0 0; color: var(--text-2); }

/* реквизиты */
.reqs { display: grid; gap: 20px; padding-block: clamp(40px, 6vw, 80px); }
.req { padding: clamp(18px, 3vw, 36px); border: 1px solid var(--line); border-radius: 26px; background: rgba(255, 255, 255, .02); }
.req__head { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.req dl { margin: 0; }
.req__row { display: grid; grid-template-columns: minmax(150px, 300px) minmax(0, 1fr); gap: 8px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.req__row:last-child { border-bottom: 0; }
.req__row dt { font-size: 14px; color: var(--text-3); }
.req__row dd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; font-size: 15.5px; font-weight: 500; color: var(--text); }
.req__row dd span { min-width: 0; overflow-wrap: anywhere; }
.req__row dd .is-num { font-family: var(--mono); font-size: 15px; letter-spacing: .01em; }
.copy { display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-top: -4px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text-3); cursor: pointer; opacity: 0; transition: opacity .2s, color .2s, border-color .2s; }
.copy .icon { width: 15px; height: 15px; }
.req__row:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--text); border-color: var(--line-3); }
.copy.is-done { opacity: 1; color: var(--green); border-color: rgba(76, 196, 75, .45); }
.req__title { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.req__title img { border-radius: 8px; }
.req-it { margin-top: clamp(28px, 4vw, 48px); scroll-margin-top: calc(var(--hdr) + 24px); }
.req-it__title { margin: 18px 0 28px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.04em; font-weight: 600; }
.req-it .prose { max-width: 900px; }

/* медиа */
.kits { display: grid; gap: 20px; padding-block: clamp(40px, 6vw, 80px); }
.kits__legend { margin: 0 0 4px; font: 500 12px/1.6 var(--mono); color: var(--text-3); }
.kits__legend b { color: var(--text-2); font-weight: 500; }
.kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); border: 1px solid var(--line); border-radius: 26px; background: rgba(255, 255, 255, .02); overflow: hidden; scroll-margin-top: calc(var(--hdr) + 24px); }
.kit__previews { display: grid; grid-template-rows: 1fr 1fr; }
.kit__pv { display: grid; place-items: center; min-height: 150px; padding: 28px; }
.kit__pv img { max-width: 72%; max-height: 64px; width: auto; }
.kit__pv--dark { background: #0e1014; }
.kit__pv--light { background: #f2f3f5; }
.kit__body { padding: clamp(20px, 3vw, 32px); border-left: 1px solid var(--line); }
.kit__title { margin: 0 0 14px; font-size: 26px; letter-spacing: -.03em; font-weight: 600; }
.kit__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kit__table th, .kit__table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.kit__table thead th { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.kit__table tbody th { font-weight: 500; color: var(--text-2); }
.kit__table tr:last-child > * { border-bottom: 0; }
.dl { display: flex; flex-wrap: wrap; gap: 4px; }
.dl a { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; font: 500 11px/1 var(--mono); color: var(--text-2); text-decoration: none; transition: color .2s, border-color .2s; }
.dl a:hover { color: var(--text); border-color: var(--line-3); }
.dl sup { margin-left: 1px; font-size: 8px; color: var(--yellow); }

/* 404 */
.nf { position: relative; display: grid; place-items: center; min-height: 100svh; padding: calc(var(--hdr) + 40px) 0 80px; text-align: center; overflow: hidden; isolation: isolate; }
.nf__chain { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 36px); margin-bottom: 32px; }
.nf__link { width: clamp(48px, 7vw, 84px); height: auto; animation: floatA 6s ease-in-out infinite; }
.nf__link--b { animation-name: floatB; }
.nf__code { padding-right: .1em; font: 600 clamp(84px, 15vw, 180px)/.9 var(--mono); letter-spacing: -.07em; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .08)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf__title { margin: 0; font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -.045em; font-weight: 600; }
.nf__text { max-width: 540px; margin: 16px auto 0; color: var(--text-2); }
.nf__term { display: inline-block; margin: 30px auto 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 13px; background: #0a0b0e; font: 500 13px/1.75 var(--mono); color: var(--text-2); text-align: left; }
.nf__term span { color: var(--green); }
.nf__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- Появление при прокрутке ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--rd, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Анимации ---------- */
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes dash { to { stroke-dashoffset: -14; } }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-4vw, 3vw) scale(1.15); } }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sysBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes swap { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.94) translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes caseIn { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes pulseRun { 0% { stroke-dashoffset: 60; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -1000; opacity: 0; } }
@keyframes tipIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes menuIn { to { opacity: 1; transform: none; } }
@keyframes sheen { 0% { background-position: 150% 0, 0 0, 0 0; } 100% { background-position: -150% 0, 0 0, 0 0; } }
@keyframes nudge { to { transform: translateX(5px); } }
@keyframes floatA { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-10px, -6px) rotate(-12deg); } }
@keyframes floatB { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(10px, 6px) rotate(12deg); } }

/* ---------- Адаптив ---------- */
@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: block; }
  .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
  .doc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 960px) {
  .xp, .xp:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .xp:nth-child(even) .xp__text { order: 0; }
  .featured { grid-template-columns: minmax(0, 1fr); }
  .community__grid { grid-template-columns: minmax(0, 1fr); }
  .community__text { order: 2; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1; }
  .exp-head { grid-template-columns: minmax(0, 1fr); }
  .exp-head .exp-count { order: -1; margin-bottom: 24px; }
  .article__grid { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .lb__in { grid-template-columns: minmax(0, 1fr); }
  .lb__meta { position: static; }
  .kit { grid-template-columns: minmax(0, 1fr); }
  .kit__previews { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .kit__body { border-left: 0; border-top: 1px solid var(--line); }
  .client { flex-basis: 200px; }
  .hero__gear { top: 34%; right: -30vw; width: 130vw; opacity: .7; }
  .hero { justify-content: flex-end; }
}
@media (max-width: 760px) {
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat { padding: 20px 16px 22px; }
  .vgrid { grid-template-columns: minmax(0, 1fr); }
  .vcard { min-height: 0; }
  .creds { grid-template-columns: minmax(0, 1fr); }
  .case summary { grid-template-columns: 34px minmax(0, 1fr) 40px; gap: 14px; padding: 22px 0; }
  .case__metric { grid-column: 2; grid-row: 2; }
  .case__toggle { grid-column: 3; grid-row: 1; }
  .case__body { padding-left: 0; }
  .case__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .req__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .copy { opacity: 1; }
  .legend { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hdr__cta { display: none; }
  .crew { grid-template-columns: minmax(0, 1fr); }
  .mate { aspect-ratio: 4 / 4.4; }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .doc { grid-template-columns: 42% minmax(0, 1fr); gap: 18px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .sprint__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__ctas .btn { flex: 1 1 auto; }
  .cookie { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .ftr__bottom { flex-direction: column; align-items: flex-start; }
  .ftr__grid { grid-template-columns: minmax(0, 1fr); }
  .tz__col em { display: none; }
  .tz__col:nth-child(4n + 1) em { display: block; }
  .cst__node--r4 .cst__face span, .cst__node--r3 .cst__face span { display: none; }
  .client { flex-basis: 140px; height: 108px; }
  .client img { height: calc(var(--h, 32px) * .8); }
}
@media (hover: none) {
  .copy { opacity: 1; }
  .pc__name .icon { opacity: 1; transform: none; }
}

/* ---------- Без анимаций — по просьбе системы ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__video { display: none; }
  .hero__gear { background: url(../video/gear-poster.webp) center / cover no-repeat; }
  .ticker__track { animation: none; }
}