/* ==========================================================================
   Общая основа сайта: шрифты, цвета тем, базовые правила, шапка.
   Используется на главной и (после переноса) на страницах кейсов.
   ========================================================================== */

/* ---------- Шрифты (все под свободной лицензией OFL) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/inter-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Big Shoulders — заголовки на латинице. Кириллицы в нём нет. */
@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/big-shoulders-400-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: 'Big Shoulders'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/big-shoulders-500.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/big-shoulders-600.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/big-shoulders-700.woff2') format('woff2'); }

/* Oswald — кириллица для заголовков (имя семейства сохранено с прежней версии). */
@font-face { font-family: 'Career Cyrillic'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/career-oswald-500.ttf') format('truetype'); unicode-range: U+0400-052F; }
@font-face { font-family: 'Career Cyrillic'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/career-oswald-700.ttf') format('truetype'); unicode-range: U+0400-052F; }
@font-face { font-family: 'Career Company'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/career-oswald-500.ttf') format('truetype'); }

/* ---------- Цвета. Светлая тема по умолчанию, тёмная — html[toggle-theme="dark"] ---------- */
:root {
  --bg: #fff;
  --text: #000;
  --text-muted: #575757;
  --surface: #f2f2f2;
  --surface-strong: #e3e3e3;
  --line: #f0f0f0;
  --line-strong: #e0e0e0;
  --accent: #ff6a00;
  --accent-soft: #fff0e3;
  --white: #fff;
  --black: #000;
  --nav-text: #616161;

  --font-display: 'Big Shoulders', 'Career Cyrillic', sans-serif;
  --font-text: 'Inter', sans-serif;

  --page-pad: 64px;
  --page-max: 1400px;
}
html[toggle-theme="dark"] {
  --bg: #0f0f0f;
  --text: #fff;
  --text-muted: #ccc;
  --surface: #1c1c1c;
  --surface-strong: #303030;
  --line: #242424;
  --line-strong: #3a3a3a;
  --nav-text: #a5a5a5;
}
@media (max-width: 1199.98px) { :root { --page-pad: 16px; } }

/* ---------- Базовые правила ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: sans-serif; font-size: 12px; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, video, svg { display: block; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Колонка страницы: поля по бокам и общая ширина. */
.page-band { display: flex; justify-content: center; width: 100%; padding-inline: var(--page-pad); }
.page-band > .page-frame { position: relative; flex: 1 0 0; width: 1px; max-width: var(--page-max); }

/* Тонкие линии сетки. data-lines="l r t b" — какие стороны рисовать. */
.lines { position: relative; }
.lines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 0 solid var(--line);
}
.lines[data-lines~="l"]::after { border-left-width: 1px; }
.lines[data-lines~="r"]::after { border-right-width: 1px; }
.lines[data-lines~="t"]::after { border-top-width: 1px; }
.lines[data-lines~="b"]::after { border-bottom-width: 1px; }
/* Вырез в линиях под звёздочкой в углу. */
.lines[data-notch]::after {
  -webkit-mask-image:
    radial-gradient(circle at top left, transparent var(--n-tl, 0px), #000 calc(var(--n-tl, 0px) + .5px)),
    radial-gradient(circle at top right, transparent var(--n-tr, 0px), #000 calc(var(--n-tr, 0px) + .5px)),
    radial-gradient(circle at bottom left, transparent var(--n-bl, 0px), #000 calc(var(--n-bl, 0px) + .5px)),
    radial-gradient(circle at bottom right, transparent var(--n-br, 0px), #000 calc(var(--n-br, 0px) + .5px));
  mask-image:
    radial-gradient(circle at top left, transparent var(--n-tl, 0px), #000 calc(var(--n-tl, 0px) + .5px)),
    radial-gradient(circle at top right, transparent var(--n-tr, 0px), #000 calc(var(--n-tr, 0px) + .5px)),
    radial-gradient(circle at bottom left, transparent var(--n-bl, 0px), #000 calc(var(--n-bl, 0px) + .5px)),
    radial-gradient(circle at bottom right, transparent var(--n-br, 0px), #000 calc(var(--n-br, 0px) + .5px));
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.lines[data-notch~="tl"] { --n-tl: 7px; }
.lines[data-notch~="tr"] { --n-tr: 7px; }
.lines[data-notch~="bl"] { --n-bl: 7px; }
.lines[data-notch~="br"] { --n-br: 7px; }

/* Звёздочка в узле сетки. */
.grid-star {
  position: absolute; z-index: 1; width: 14px; height: 14px; pointer-events: none;
  background: var(--text);
  -webkit-mask: url('/assets/grid-star.svg') center / contain no-repeat;
  mask: url('/assets/grid-star.svg') center / contain no-repeat;
}
.grid-star--tl { left: -7px; top: -7px; }
.grid-star--tr { right: -7px; top: -7px; }
.grid-star--bl { left: -7px; bottom: -7px; }
.grid-star--br { right: -7px; bottom: -7px; }

/* Бегущая строка: скрипт копирует пункты и задаёт расстояние и скорость */
.ticker { display: flex; overflow: hidden; }
.ticker__list {
  display: flex; align-items: center; flex: none; width: max-content;
  animation: ticker-move var(--ticker-duration, 20s) linear infinite; will-change: transform;
}
.ticker__item { flex: none; }
@keyframes ticker-move { to { transform: translateX(calc(-1 * var(--ticker-distance, 0px))); } }
@media (prefers-reduced-motion: reduce) { .ticker__list { animation: none; } }

/* ==========================================================================
   Шапка
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 10; width: 100%; }
.site-nav {
  display: flex; justify-content: center; align-items: center;
  padding-inline: 64px; background: var(--bg); overflow: hidden;
}
.site-nav__inner { display: flex; justify-content: center; align-items: flex-start; flex: 1 0 0; width: 1px; max-width: var(--page-max); }
.site-nav__side {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  flex: 1 0 0; width: 1px; height: 80px; padding-bottom: 4px;
}
.site-nav__side::after { content: ''; position: absolute; inset: 0; border-bottom: 1px solid var(--line); pointer-events: none; }
.site-nav__side--left { padding-left: 24px; }
.site-nav__side--right { padding-right: 24px; }
.site-nav__center { display: flex; flex-direction: column; align-items: center; gap: 4px; overflow: hidden; }

/* Кнопка «Открыт к сотрудничеству» */
.status-pill {
  position: relative; display: flex; align-items: center; border-radius: 100px;
  box-shadow: 0 2px 4px rgba(145, 58, 0, .07), 0 8px 8px rgba(145, 58, 0, .09), 0 16px 14px rgba(145, 58, 0, .11), 5px 30px 24px rgba(145, 58, 0, .16);
}
.status-pill__body {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px; height: 34px;
  border-radius: 90px; background: var(--text); overflow: hidden;
  /* пружина с небольшим перелётом, как в оригинале (замер: 1.10 за ~0.25 с, пик 1.1015) */
  transition: transform .54s linear(0, .0644 3.3%, .2068 6.7%, .3734 10%, .5334 13.3%, .6713 16.7%, .7817 20%, .8647 23.3%, .9239 26.7%, .9637 30%, .9888 33.3%, 1.0032 36.7%, 1.0103 40%, 1.0129 43.3%, 1.0127 46.7%, 1.0111 50%, 1.009 53.3%, 1.0069 56.7%, 1.005 60%, 1.0034 63.3%, 1.0022 66.7%, 1.0013 70%, 1.0007 73.3%, 1.0003 76.7%, 1);
}
.status-pill:hover .status-pill__body, .status-pill:focus-visible .status-pill__body { transform: scale(1.1); }
.status-pill__label { position: relative; z-index: 1; color: var(--bg); font: 600 14px/22.4px var(--font-text); letter-spacing: -.02em; white-space: pre; } /* над кольцом точки, как в оригинале */

/* Пульсирующая точка (зелёная — свободен, оранжевая — в кнопке Telegram) */
.pulse-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 100px; --dot: #33cf70; }
/* серая подложка под точкой; при наведении на кнопку убирается */
.pulse-dot::before { content: ''; position: absolute; inset: 1px; border-radius: 1000px; background: #636363; }
.status-pill:is(:hover, :focus-visible) .pulse-dot::before { display: none; }
.pulse-dot__core { /* сама точка с мягким «дыханием» */
  position: absolute; inset: 0; border-radius: 100px; background: var(--dot);
  animation: dot-breathe 1.8s ease-in-out infinite;
}
/* кольцо расходится всегда, но видно только при наведении: цвет рамки из прозрачного в акцент */
.pulse-dot__core::after {
  content: ''; position: absolute; inset: 0; border: 2px solid transparent; border-radius: 100px;
  animation: dot-ring 1.5s linear infinite; transition: border-color .2s cubic-bezier(0, 0, .58, 1); will-change: transform;
}
.status-pill:is(:hover, :focus-visible) .pulse-dot__core::after { border-color: var(--accent); }
.pulse-dot--accent { --dot: var(--accent); }
.pulse-dot--accent .pulse-dot__core { animation: none; }
@keyframes dot-breathe {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 50%, transparent); }
  50% { opacity: .62; box-shadow: 0 0 0 6px color-mix(in srgb, var(--dot) 0%, transparent); }
}
@keyframes dot-ring {
  0% { transform: scale(1); opacity: 1; }
  66.66% { transform: scale(3.4); opacity: 0; }
  66.67%, 100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .pulse-dot__core, .pulse-dot__core::after { animation: none; } }

/* Пункты меню с «прокруткой букв» */
.nav-link { position: relative; display: block; height: 19.2px; flex: 0 0 auto; white-space: nowrap; cursor: pointer; }
.nav-link--about, .nav-link--experience { width: 60px; }
.nav-link--projects { width: 64px; }
.letter-roll {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .05em;
  color: var(--nav-text); font: 500 16px/1.2 var(--font-display); letter-spacing: -.02em;
  pointer-events: none; transition: color .2s ease;
}
.letter-roll__column { display: block; height: 1.2em; overflow: hidden; }
.letter-roll__stack {
  display: flex; flex-direction: column; align-items: center; transform: translateY(0);
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 34ms);
}
.letter-roll__stack > span { display: flex; height: 1.2em; flex: 0 0 1.2em; align-items: center; justify-content: center; }
.letter-roll__column:nth-child(even) .letter-roll__stack { transform: translateY(-8.4em); }
:is(.nav-link, .footer-link, .footer-social):is(:hover, :focus-visible) .letter-roll__column:nth-child(odd) .letter-roll__stack { transform: translateY(-8.4em); }
:is(.nav-link, .footer-link, .footer-social):is(:hover, :focus-visible) .letter-roll__column:nth-child(even) .letter-roll__stack { transform: translateY(0); }
.nav-link[aria-current="true"] .letter-roll,
.nav-link:is(:hover, :focus-visible) .letter-roll { color: var(--accent); }

/* Логотип в центре: оранжевый знак и вращающееся кольцо из точек */
.site-logo { display: flex; justify-content: center; align-items: center; align-self: stretch; padding: 0 4px 4px; cursor: pointer; }
.site-logo__frame { position: relative; display: flex; justify-content: center; align-items: center; width: 76px; height: 77px; overflow: hidden; }
.site-logo__mark { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; width: 52px; height: 52px; border-radius: 27px; }
.site-logo__image {
  width: 46px; height: 46px; border-radius: 27px; background: var(--accent) url('/assets/sergey-logo.svg?v=2') center / 72% 72% no-repeat;
}
.site-logo__ring {
  position: absolute; inset: -13px; z-index: 1; pointer-events: none;
  animation: logo-ring 35s linear infinite;
}
.site-logo__ring svg { width: 100%; height: 100%; overflow: visible; }
.site-logo__ring text { font: 400 22px/1.1em var(--font-text); fill: var(--accent); }
@keyframes logo-ring { to { transform: rotate(360deg); } }

/* Точка-указатель текущего раздела вокруг логотипа */
.site-logo__indicator {
  position: absolute; inset: 0 0 1px 0; z-index: 1; display: flex; align-items: center; justify-content: flex-start;
  opacity: 0; pointer-events: none;
  transform: rotate(var(--indicator-angle, -90deg));
  transition: transform 450ms ease, opacity 180ms ease;
}
.site-logo__indicator::before { content: ''; width: 3px; height: 3px; border-radius: 3px; background: var(--accent); }
html[data-home-section="projects"] { --indicator-angle: -90deg; }
html[data-home-section="about"] { --indicator-angle: 0deg; }
html[data-home-section="experience"] { --indicator-angle: -180deg; }
html:is([data-home-section="projects"], [data-home-section="about"], [data-home-section="experience"]) .site-logo__indicator { opacity: 1; }

/* Переключатель темы */
.theme-toggle { position: relative; display: flex; flex: none; align-items: center; justify-content: center; border-radius: 90px; overflow: hidden; }
.theme-toggle::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 90px; pointer-events: none; }
.theme-toggle__button {
  position: relative; width: 54px; height: 30px; padding: 0; border: 0; border-radius: 15px; outline: none; cursor: pointer;
  background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .06); transition: background .2s, transform .1s ease-out;
}
.theme-toggle:hover .theme-toggle__button { transform: scale(1.2); }
.theme-toggle__knob {
  position: absolute; top: 3px; left: 27px; z-index: 10; display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  transition: left .2s cubic-bezier(.4, 1.2, .6, 1);
}
html[toggle-theme="dark"] .theme-toggle__knob { left: 3px; }
.theme-toggle__knob svg { width: 14.4px; height: 14.4px; }
.theme-toggle__sun { display: block; }
.theme-toggle__moon { display: none; }
html[toggle-theme="dark"] .theme-toggle__sun { display: none; }
html[toggle-theme="dark"] .theme-toggle__moon { display: block; }

/* ==========================================================================
   Подвал
   ========================================================================== */
.site-footer { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; overflow: hidden; background: var(--bg); }

/* Бегущая строка «НАЧАТЬ СОТРУДНИЧЕСТВО» — вся полоса ведёт в Telegram */
.footer-ticker { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; padding: 24px 0; }
.footer-ticker__track { flex: 1 0 0; width: 1px; }
.footer-ticker__track .ticker__list { gap: 24px; }
.footer-ticker__text {
  color: var(--text); font: 400 100px/1.2 var(--font-display); white-space: pre;
  transition: color .25s ease;
}
.footer-ticker__circle {
  display: block; width: 119px; height: 119px; background: var(--text); transition: background-color .25s ease;
  -webkit-mask: url('/assets/site/icons/arrow-circle.svg') center / contain no-repeat; mask: url('/assets/site/icons/arrow-circle.svg') center / contain no-repeat;
}
.footer-ticker__link { position: absolute; inset: 0; z-index: 5; display: block; border-radius: inherit; }
.footer-ticker__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.footer-ticker:is(:hover, :focus-within) .footer-ticker__text { color: var(--accent); }
.footer-ticker:is(:hover, :focus-within) .footer-ticker__circle { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .footer-ticker, .footer-ticker * { cursor: none; } }

/* Стеклянный круг со стрелкой, который следует за мышью над бегущей строкой */
.glass-cursor {
  position: fixed; top: 0; left: 0; z-index: 13; width: 110px; height: 110px; border-radius: 900px; overflow: hidden;
  pointer-events: none; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  opacity: 0; transform: translate(var(--x, -200px), var(--y, -200px)) translate(-50%, 0);
  /* появляется и исчезает сразу, как в оригинале; за мышью едет пружиной (site.js) */
}
.glass-cursor.is-visible { opacity: 1; }
.glass-cursor::before {
  content: ''; position: absolute; inset: 0; background: rgba(28, 28, 28, .19); box-shadow: 0 1px 2px #fff;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.glass-cursor::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%);
  background: url('/assets/site/icons/arrow-up-right.svg') center / contain no-repeat;
}
@media not ((hover: hover) and (pointer: fine)) { .glass-cursor { display: none; } }

/* Нижняя часть: портрет, разделы, соцсети, почта */
.footer-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-portrait { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; }
.footer-portrait__video { flex: 1 0 0; width: 100%; height: 1px; min-height: 100%; border-radius: 30px; object-fit: cover; object-position: 100% 0%; }
.footer-pages { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
.footer-link { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 64px; }
.footer-link .letter-roll { padding: 24px; justify-content: flex-start; font-weight: 600; line-height: 1.3; color: var(--text); }
.footer-link .letter-roll__column { height: 1.3em; }
.footer-link .letter-roll__stack > span { height: 1.3em; flex-basis: 1.3em; }
.footer-link .letter-roll__column:nth-child(even) .letter-roll__stack,
.footer-link:is(:hover, :focus-visible) .letter-roll__column:nth-child(odd) .letter-roll__stack { transform: translateY(-9.1em); }
.footer-link:is(:hover, :focus-visible) .letter-roll__column:nth-child(even) .letter-roll__stack { transform: translateY(0); }
.footer-link:is(:hover, :focus-visible) .letter-roll { color: var(--accent); }
.footer-link__dot { position: absolute; top: 28px; right: 16px; z-index: 1; width: 8px; height: 8px; border-radius: 100px; background: var(--accent); }
.footer-socials { display: flex; flex-direction: column; align-items: flex-start; align-self: start; padding: 24px; }
.footer-label { color: var(--text-muted); font: 500 16px/25.6px 'Career Cyrillic', 'Big Shoulders', sans-serif; white-space: pre-wrap; }
.footer-socials__list { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; padding: 24px 0; }
.footer-social { position: relative; display: block; width: 64px; height: 19.2px; white-space: nowrap; }
.footer-social .letter-roll { position: relative; inset: auto; justify-content: flex-start; }
.footer-social:is(:hover, :focus-visible) .letter-roll { color: var(--accent); }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; padding: 24px; }
.footer-copy { display: block; width: max-content; max-width: 100%; margin-top: auto; will-change: transform; }
.footer-copy__button {
  position: relative; display: inline-flex; place-items: center; place-content: center; padding: 0; border: 0; outline: none; cursor: pointer;
  background: transparent; color: var(--text); font: 500 20px/1em 'Big Shoulders', sans-serif; text-align: left; white-space: nowrap; user-select: none;
  transform-origin: left center; transition: transform 100ms ease-out;
}
.footer-copy__button:is(:hover, :focus-visible) { transform: scale(1.1); }
.footer-copy__stack { position: relative; display: grid; place-items: center; }
.footer-copy__stack > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .2s ease; }
.footer-copy__done { opacity: 0; }
.footer-copy__button.is-copied .footer-copy__text { opacity: 0; }
.footer-copy__button.is-copied .footer-copy__done { opacity: 1; }
.footer-phone {
  display: inline-block; width: max-content; max-width: 100%; margin-top: 18px; color: var(--text);
  font: 500 20px/1 'Big Shoulders', sans-serif; white-space: nowrap; transform-origin: left center;
  transition: color 180ms ease, transform 180ms ease;
}
.footer-phone:is(:hover, :focus-visible) { color: var(--accent); transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
  .footer-phone, .footer-copy__button { transition: none; }
  .footer-phone:is(:hover, :focus-visible), .footer-copy__button:is(:hover, :focus-visible) { transform: none; }
  .letter-roll__stack { transition: none; }
}

@media (max-width: 1199.98px) {
  .footer-ticker__text { font-size: 70px; }
  .footer-label { font-size: 15px; line-height: 24px; }
  .footer-portrait { padding: 16px; }
  .footer-socials, .footer-contact { padding: 24px 16px; }
}
@media (max-width: 809.98px) {
  .footer-ticker__text { font-size: 60px; }
  .footer-label { font-size: 14px; line-height: 22.4px; }
  .footer-ticker__circle { width: 80px; height: 80px; }
  .footer-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-portrait { grid-column: span 2; padding: 24px; }
  .footer-portrait__video { flex: 0 0 auto; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .footer-socials.lines::after { border-right-width: 0; border-bottom-width: 1px; }
  .footer-contact { grid-column: span 2; }
  .footer-copy { margin-top: 24px; }
}

/* Шапка на планшете и телефоне: без кнопки статуса, пункты ближе к логотипу */
@media (max-width: 1199.98px) {
  /* Шапка 115 px, но в потоке занимает 111 px: нижние 4 px заходят на первый экран. */
  .site-header { height: 111px; }
  .site-nav { flex-direction: column; align-items: flex-start; padding-inline: 16px; }
  .site-nav__inner { width: 100%; flex: none; gap: 5px; padding-bottom: 10px; }
  .site-nav__side--left { justify-content: flex-end; padding-left: 16px; }
  .site-nav__side--right { padding-right: 16px; }
  .site-nav__side--right .nav-link { z-index: 3; }
  .site-nav__center { gap: 5px; }
  .site-logo { padding: 0 0 4px; }
  .site-nav .status-pill { display: none; }
  .theme-toggle { z-index: 1; }
}

/* ==========================================================================
   Прелоадер. Фон — как на фото первого экрана: бордовый слева, оранжевый справа,
   сверху темнее, справа на уровне лица мягкий свет. Знак SV ровно заливается белым
   снизу вверх, под ним проценты. Финал одним жестом: экран делится по центру, и две
   половины вместе со своими половинами знака разъезжаются в стороны.
   Разметка и логика — в index.html (встроенный скрипт; кейсы берут их оттуда).
   ========================================================================== */
.preloader { display: none; }
html.is-preloading .preloader {
  display: flex; position: fixed; inset: 0; z-index: 10000; overflow: hidden;
  container-type: size; /* ширина копий знака — от экрана прелоадера (cqw), без учёта полосы прокрутки */
  /* Запасной выход, если скрипт не загрузится: экран сам исчезнет через 10 с */
  animation: preloader-failsafe 0s linear 10s forwards;
}
html.preloader-lock, html.preloader-lock body { overflow: hidden; }

/* Половина экрана несёт свою часть общего фона и свою половину знака */
.preloader__half {
  position: relative; flex: 1 1 0; overflow: hidden; margin-right: -1px;
  background:
    linear-gradient(180deg, rgba(70, 0, 0, .24) 0%, rgba(70, 0, 0, 0) 38%, rgba(70, 0, 0, 0) 72%, rgba(70, 0, 0, .1) 100%) var(--pos, 0) 0 / var(--bg-size) no-repeat,
    radial-gradient(55% 70% at 100% 46%, rgba(255, 128, 34, .75) 0%, rgba(255, 110, 28, .28) 45%, rgba(255, 100, 24, 0) 100%) var(--pos, 0) 0 / var(--bg-size) no-repeat,
    linear-gradient(90deg, #a50d07 0%, #b31508 22%, #c6290c 45%, #dc4415 68%, #eb5c1d 86%, #f2681d 100%) var(--pos, 0) 0 / var(--bg-size) no-repeat;
  transition: transform .95s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
.preloader__half + .preloader__half { --pos: 100%; margin-right: 0; }
.preloader { --bg-size: 100vw 100vh; }
@supports (width: 1cqw) { .preloader { --bg-size: 100cqw 100cqh; } }
/* Копия знака во всю ширину экрана: у левой половины прижата влево, у правой вправо,
   поэтому обе копии стоят ровно по центру экрана и вместе выглядят как один знак */
.preloader__face {
  position: absolute; top: 0; bottom: 0; width: 100vw; width: 100cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  animation: preloader-in .45s cubic-bezier(.22, 1, .36, 1) both;
}
.preloader__half:first-child .preloader__face { left: 0; }
.preloader__half + .preloader__half .preloader__face { right: 0; }
.preloader__logo { position: relative; width: clamp(84px, 6.6vw, 104px); aspect-ratio: 103.5 / 60.2; }
.preloader__mark {
  --preloader-logo: url("data:image/svg+xml,%3Csvg viewBox='18 31.5 103.5 60.2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70.3721 31.9114C70.8172 31.8501 71.3055 31.7316 71.6597 31.9634C71.7867 33.3841 71.7254 35.3602 71.7262 36.8438L71.7458 45.213C64.1591 45.1285 56.4983 45.2547 48.8999 45.2035C44.5505 45.246 40.1888 45.1085 35.8436 45.2799C33.2251 45.383 32.3118 46.9152 31.7502 49.2098C31.9684 50.0806 32.1601 50.8225 32.7323 51.5442C33.223 52.1631 33.9147 52.591 34.6875 52.7538C35.9888 53.0394 38.8683 52.9526 40.3219 52.947L50.5851 52.9051C52.5129 52.8997 54.9891 52.8507 56.8731 53.0381C59.0674 53.3343 61.9482 54.5682 63.515 56.1595C65.8548 58.6073 67.2868 61.8551 69.0769 64.7051C70.8483 67.525 72.5187 70.401 74.2325 73.2549C74.7815 74.1692 75.1944 75.0524 75.8541 75.9058C77.0507 73.6018 79.4763 70.0238 80.935 67.7504C83.4586 63.7944 85.956 59.8217 88.427 55.8326L97.3874 41.3822C99.0484 38.6604 101.49 34.4055 103.308 31.8792L114.763 31.9543C116.816 31.9571 119.335 32.0523 121.309 31.7283C119.974 33.6077 118.153 36.7767 116.896 38.8348L110.598 49.0309C104.27 59.2469 97.8753 69.4216 91.4148 79.5542C89.1363 83.1459 86.353 87.7611 83.8064 91.0912C83.3557 91.6806 70.3624 91.4585 68.8583 91.4228C67.5799 89.7042 65.8492 86.5835 64.7147 84.6771C62.3333 80.6356 59.914 76.6169 57.4568 72.6211C53.6001 66.3557 54.4285 65.9523 46.8729 65.9762L39.024 65.9993C32.8735 66.0146 28.2879 66.1268 23.4499 61.5396C20.2392 58.4666 18.3625 54.2563 18.2233 49.8142C18.114 45.1772 19.9919 41.0559 23.1679 37.723C29.8325 30.729 38.9267 32.0143 47.6351 31.9387C55.2016 31.8731 62.8122 32.0632 70.3721 31.9114Z' fill='%23000'/%3E%3Cpath d='M18.8896 77.3979C19.9048 77.6172 24.8601 77.5389 26.2959 77.5393L45.8388 77.5298C47.2555 77.527 56.5076 77.2512 57.0282 77.9627C58.1019 79.4304 65.0673 90.3979 65.0869 91.3089C64.6885 91.5619 64.665 91.4815 64.1263 91.5111C62.8244 91.6474 60.1924 91.5343 58.7431 91.527L48.1088 91.5085C41.7902 91.5728 35.4711 91.5914 29.1521 91.5641C26.438 91.5637 21.4627 91.6976 18.9764 91.4114C18.6622 90.9259 18.6766 78.5943 18.8896 77.3979Z' fill='%23000'/%3E%3C/svg%3E");
  position: absolute; inset: 0; background: #fff;
  -webkit-mask: var(--preloader-logo) center / contain no-repeat;
  mask: var(--preloader-logo) center / contain no-repeat;
}
.preloader__mark--base { opacity: .3; }
.preloader__mark--fill { clip-path: inset(calc(100% - var(--progress, 0%)) 0 0 0); }

/* Проценты: цифры в ячейках одной ширины, чтобы число не дрожало при смене */
.preloader__count { display: flex; height: 22px; color: #fff; font: 600 22px/22px var(--font-display); letter-spacing: .04em; }
.preloader__count i { width: .58em; font-style: normal; text-align: center; }
.preloader__count i:last-child { width: auto; margin-left: .08em; opacity: .7; }

.preloader.is-leaving .preloader__half:first-child { transform: translateX(-101%); }
.preloader.is-leaving .preloader__half + .preloader__half { transform: translateX(101%); }

@keyframes preloader-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes preloader-failsafe { to { visibility: hidden; } }

/* Альтернативные начертания Inter у подписей шапки и подвала, как в исходном дизайне.
   В конце файла: сокращённая запись font выше их сбрасывает. */
.status-pill__label, .footer-label { font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11"; }