/* Сайт proektone. Токены цвета, шрифта, отступов и движения берутся из brand.css.
   Тема одна, тёмная: так требует брендбук. Скругления: 6px кнопки, 12px снимки, 20px карточки. */
/* Шрифт Geologica лежит на своём сервере: Google Fonts из России грузится нестабильно.
   Вариативный, оси толщины и остроты (SHRP), разбит по алфавитам */
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('assets/fonts/geologica-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('assets/fonts/geologica-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('assets/fonts/geologica-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: 'Geologica'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('assets/fonts/geologica-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; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--top-h); overflow-x: clip; scroll-snap-type: y proximity; }
body { margin: 0; overflow-x: clip; }
html { -webkit-tap-highlight-color: transparent; }
/* Рамка фокуса только при управлении с клавиатуры (класс kbd ставит скрипт). После касания её нет */
html.js:not(.kbd) :focus-visible { outline: none; }
/* Телефон и планшет: без магнита, прокрутка свободная */
@media (pointer: coarse) { html { scroll-snap-type: none; } }
::selection { background: rgba(210, 245, 60, 0.9); color: var(--po-on-accent); }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:root { --shell: var(--po-shell); --top-h: 76px; }
@media (min-width: 1680px) { :root { --shell: 1440px; } }
@media (min-width: 2200px) { :root { --shell: 1680px; } }
.shell { max-width: calc(var(--shell) + 2 * var(--po-gutter)); margin: 0 auto; padding: 0 var(--po-gutter); }

/* Кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--po-s-5);
  border: 1px solid transparent; border-radius: var(--po-r-sm); background: var(--po-surface);
  font-size: var(--po-fs-small); font-weight: 600; white-space: nowrap;
  transition: background var(--po-dur-fast) var(--po-ease), border-color var(--po-dur-fast) var(--po-ease);
}
.btn--accent { background: var(--po-accent); border-color: var(--po-accent); color: var(--po-on-accent); }
.btn--accent:hover { border-color: var(--po-text); }
.btn--big { min-height: 56px; padding: 0 var(--po-s-6); font-size: 1rem; }

/* Огромное слово proektone на фоне первого экрана: еле заметное, логотип целиком почти во всю ширину окна,
   под текстом и без наложения. Проявляется после расшифровки, под мышью буквы светлеют */
.giant { position: absolute; z-index: 0; left: 50%; bottom: 10px; width: var(--giant-w); translate: -50% 0; pointer-events: none; user-select: none; }
.giant img { display: block; width: 100%; height: auto; }
.giant__base { opacity: 0.05; }
/* Под мышью буквы логотипа светлеют мягким пятном */
.giant__lens {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle 240px at var(--gx, -999px) var(--gy, -999px), #000 0%, transparent 100%);
  mask-image: radial-gradient(circle 240px at var(--gx, -999px) var(--gy, -999px), #000 0%, transparent 100%);
  opacity: 0; transition: opacity var(--po-dur-slow) var(--po-ease);
}
.giant.is-lit .giant__lens { opacity: 0.28; }
.hero__head { position: relative; z-index: 1; }
/* Строка под заголовком: что делаю, тремя словами. Слова появляются по очереди после расшифровки */
.hero__sub { margin-top: var(--po-s-6); font-size: clamp(1.125rem, 1.9vw, 1.625rem); font-weight: 600; letter-spacing: -0.02em; color: var(--po-text-2); }
@media (prefers-reduced-motion: no-preference) {
  .hero__sub span { display: inline-block; animation: step 600ms var(--po-ease) both; animation-delay: calc(1450ms + var(--n) * 160ms); }
  .has-intro .hero__sub span { animation-delay: calc(2350ms + var(--n) * 160ms); }
}
@media (prefers-reduced-motion: no-preference) {
  .giant { animation: giant-in 1200ms var(--po-ease) 1300ms both; }
  .has-intro .giant { animation-delay: 2300ms; }
}
@keyframes giant-in { from { opacity: 0; transform: translateY(24px); } }

/* Заставка при первом заходе. Порядок: логотип 0–0,85 с, линия 0,7–1 с, экран раскрывается 0,95–1,65 с */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; animation: intro-gone 0s linear 1700ms both; }
html:not(.has-intro) .intro { display: none; }
.intro__half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--po-bg); }
.intro__half--top { top: 0; animation: open-up 700ms cubic-bezier(0.76, 0, 0.24, 1) 950ms both; }
.intro__half--bottom { bottom: 0; animation: open-down 700ms cubic-bezier(0.76, 0, 0.24, 1) 950ms both; }
.intro__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: var(--po-accent); box-shadow: 0 0 18px var(--po-glow); transform: scaleX(0);
  animation: line-on 260ms cubic-bezier(0.65, 0, 0.35, 1) 700ms forwards, line-off 450ms ease 1000ms forwards;
}
.intro__logo { position: relative; width: min(260px, 60vw); height: auto; animation: logo-in 400ms var(--po-ease) both, logo-out 250ms ease 850ms forwards; }
@keyframes open-up { to { transform: translateY(-100%); } }
@keyframes open-down { to { transform: translateY(100%); } }
@keyframes line-on { to { transform: scaleX(1); } }
@keyframes line-off { to { opacity: 0; } }
@keyframes logo-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes logo-out { to { opacity: 0; transform: scale(1.04); } }
@keyframes intro-gone { to { visibility: hidden; } }
/* С заставкой блок о себе появляется позже, после расшифровки заголовка */

/* Шапка «три острова»: логотип слева без фона, по центру тёмная капсула разделов с плашкой под текущим,
   справа фосфорная кнопка. После прокрутки сверху мягкое затемнение, чтобы логотип не терялся на контенте.
   На планшете и телефоне вместо разделов капсула «Меню» */
.sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 80px; pointer-events: none; }
.top { position: sticky; top: 0; z-index: 10; height: var(--top-h); }
.top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 24px); z-index: -1; pointer-events: none;
  background: linear-gradient(var(--po-bg) calc(100% - 24px), rgba(20, 17, 14, 0));
  opacity: 0; transition: opacity var(--po-dur-slow) var(--po-ease);
}
.top.is-scrolled::before { opacity: 1; }
.top__bar { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--po-s-5); }
.top__logo { justify-self: start; display: flex; padding: 5px 0; min-height: 44px; align-items: center; }
.top__logo img { height: 34px; width: auto; max-width: none; }
/* В самом верху капсулы сливаются с фоном: ни заливки, ни контура. Появляются после прокрутки */
.top__nav, .top__menu {
  height: 52px; border-radius: 999px; border: 1px solid transparent; background: transparent;
  transition: background-color var(--po-dur-slow) var(--po-ease), border-color var(--po-dur-slow) var(--po-ease);
}
.top.is-scrolled .top__nav, .top.is-scrolled .top__menu {
  background-color: var(--po-surface);
}
.top__nav { position: relative; display: flex; align-items: center; padding: 3px; }
.top__nav a {
  position: relative; z-index: 1; height: 44px; display: flex; align-items: center; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  font-size: 1rem; color: var(--po-text-2); transition: color var(--po-dur-fast) var(--po-ease);
}
.top__nav a:hover, .top__nav a.is-on { color: var(--po-text); }
.top__pill {
  position: absolute; left: 0; top: 3px; bottom: 3px; width: var(--w, 0px); transform: translateX(var(--x, 0px));
  border-radius: 999px; background: var(--po-surface-2);
  opacity: 0; transition: transform 480ms var(--po-ease), width 480ms var(--po-ease), opacity var(--po-dur-base) var(--po-ease);
}
.top__nav.has-pill .top__pill { opacity: 1; }
.top__end { justify-self: end; display: flex; align-items: center; gap: var(--po-s-2); }
/* «Обсудить задачу» устроена как «Все проекты»: графитовая капсула, стрелка в фосфорном кружке.
   При наведении фосфор разгорается из кружка и заливает кнопку. Кружок горит и в покое: это главная кнопка */
.top__cta {
  --ox: calc(100% - 24px);
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 20px;
  border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap;
  color: var(--po-text); background: var(--po-surface);
}
.top__cta-arrow { width: 36px; height: 36px; font-size: 0.9375rem; background: var(--po-accent); color: var(--po-on-accent); box-shadow: 0 0 16px rgba(210, 245, 60, 0.3); }
/* Фосфорные кнопки: при наведении и нажатии приподнимаются и мягко светятся, видно, что можно нажать */
.btn--accent, .menu__cta {
  transition: transform 220ms var(--po-ease), box-shadow 220ms var(--po-ease), border-color var(--po-dur-fast) var(--po-ease);
}
.top__menu, .btn--line {
  transition: transform 220ms var(--po-ease), box-shadow 220ms var(--po-ease), background-color 220ms var(--po-ease), color 220ms var(--po-ease);
}
.top__menu:focus-visible, .btn--line:focus-visible,
.top__menu:active, .btn--line:active {
  color: var(--po-on-accent); background-color: var(--po-accent); border-color: var(--po-accent);
}
.top__menu:focus-visible, .btn--line:focus-visible,
.top__menu:active, .btn--line:active,
.btn--accent:active, .menu__cta:active,
.btn--accent:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(210, 245, 60, 0.28), 0 0 18px rgba(210, 245, 60, 0.22);
}
@media (hover: hover) {
  .top__menu:hover, .btn--line:hover { color: var(--po-on-accent); background-color: var(--po-accent); border-color: var(--po-accent); }
  .top__menu:hover, .btn--line:hover, .btn--accent:hover, .menu__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(210, 245, 60, 0.28), 0 0 18px rgba(210, 245, 60, 0.22);
  }
}

/* Капсула «Меню»: только на планшете и телефоне */
.top__menu { display: none; height: 48px; padding: 0 20px; cursor: pointer; font: inherit; font-size: 1rem; color: var(--po-text); }

/* Крестик в меню */
.menu__close {
  position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--po-text); cursor: pointer;
}
.menu__close span { position: absolute; left: 12px; right: 12px; top: 21px; height: 1.5px; background: currentColor; border-radius: 1px; }
.menu__close span:first-child { transform: rotate(45deg); }
.menu__close span:last-child { transform: rotate(-45deg); }

/* Меню на весь экран */
.menu {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--po-bg); color: var(--po-text); overflow-y: auto;
}
.menu[open] { display: flex; flex-direction: column; animation: menu-in 320ms var(--po-ease); }
.menu::backdrop { background: var(--po-bg); }
html:has(.menu[open]) { overflow: hidden; }
.menu__bar { width: 100%; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; }
.menu__bar img { height: 26px; width: auto; }
.menu__nav { width: 100%; display: grid; margin-top: var(--po-s-7); }
.menu__nav a {
  display: flex; align-items: center; padding: var(--po-s-3) 0;
  font-size: clamp(2rem, 8vw, 3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1;
  font-variation-settings: 'SHRP' var(--po-sharp-head);
  transition: translate 360ms var(--po-ease), color 240ms var(--po-ease);
}
.menu__nav a[aria-current] { color: var(--po-text-2); }
/* Пункт под пальцем или курсором отъезжает вправо, за ним загорается фосфорный курсор бренда,
   остальные пункты притухают. Сдвиг через translate: transform занят анимацией появления меню */
.menu__nav a::after {
  content: ""; width: 0.42em; height: 0.72em; margin-left: 0.14em; flex: none;
  background: var(--po-accent); box-shadow: 0 0 18px var(--po-glow);
  opacity: 0; scale: 0 1; transform-origin: left center;
  transition: opacity 240ms var(--po-ease), scale 360ms var(--po-ease);
}
.menu__nav a:active, .menu__nav a:focus-visible { translate: 12px 0; }
.menu__nav a:active::after, .menu__nav a:focus-visible::after { opacity: 1; scale: 1 1; }
@media (hover: hover) {
  .menu__nav:hover a { color: var(--po-text-2); }
  .menu__nav a:hover { color: var(--po-text); translate: 12px 0; }
  .menu__nav a:hover::after { opacity: 1; scale: 1 1; }
}
.menu__foot { width: 100%; margin-top: auto; padding-top: var(--po-s-7); padding-bottom: var(--po-s-7); display: grid; gap: var(--po-s-5); }
.menu__cta {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 52px; border-radius: 999px;
  font-weight: 600; color: var(--po-on-accent); background: var(--po-accent);
}
.menu__alt { color: var(--po-text-2); line-height: 1.8; }
.menu__alt a { color: var(--po-text); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__nav a { animation: step 420ms var(--po-ease) both; }
  .menu[open] .menu__nav a:nth-child(2) { animation-delay: 50ms; }
  .menu[open] .menu__nav a:nth-child(3) { animation-delay: 100ms; }
  .menu[open] .menu__nav a:nth-child(4) { animation-delay: 150ms; }
}
@keyframes menu-in { from { opacity: 0; } }

/* Первый экран */
.hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-start;
  /* Большое слово: логотип почти во всю ширину окна, с небольшим отступом по краям. --vw ставит скрипт:
     ширина окна без полосы прокрутки. Пропорции логотипа 898 на 188 */
  --gm: clamp(12px, 2vw, 32px);
  --giant-w: calc(var(--vw, 100vw) - 2 * var(--gm));
  --giant-h: calc(var(--giant-w) * 0.2093);
  min-height: calc(100dvh - var(--top-h)); padding-top: clamp(12px, 3vh, 48px);
  /* Снизу резерв под логотип целиком: текст всегда стоит выше и не накладывается */
  padding-bottom: calc(var(--giant-h) + 28px);
}
.hero__title { position: relative; z-index: 1; display: grid; font-size: clamp(2.6rem, min(8.6vw, 16vh), 11rem); line-height: 0.95; letter-spacing: -0.055em; }
.hero__ghost, .hero__typed { grid-area: 1 / 1; }
.js .hero__ghost { visibility: hidden; }
.hero__typed { white-space: pre-line; }
/* Ещё не расшифрованные символы кода */
.hero__scr { color: var(--po-text-2); }

@keyframes step { from { opacity: 0; transform: translateY(8px); } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Обо мне: три карточки в ряд. Слева кто я, по центру фосфорная карточка с тем, что разрабатываю,
   справа как связаться. На планшете приветствие сверху во всю ширину, на телефоне всё колонкой */
.about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(10px, 1vw, 16px); }
.hello, .dirs, .ask {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 52px); border-radius: clamp(20px, 2vw, 32px); background: var(--po-surface);
}
.hello { justify-content: space-between; gap: clamp(20px, 2.6vw, 36px); }
.hello__title, .hello__text, .ask__text { text-box: trim-both cap alphabetic; }
.hello__title { font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; }
.hello__text { max-width: 32em; font-size: clamp(1.0625rem, 1.3vw, 1.375rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--po-text-2); text-wrap: pretty; }
/* Что разрабатываю: фосфорная карточка, тёмный текст, пункты разделены тонкими линиями */
.dirs { background: var(--po-accent); color: var(--po-on-accent); }
.dirs__k { font-size: var(--po-fs-small); font-weight: 600; opacity: 0.66; }
.dirs__list { margin-top: var(--po-s-4); }
.dirs__list li {
  padding: clamp(10px, 1.1vw, 16px) 0; border-top: 1px solid rgba(20, 17, 14, 0.22);
  font-size: clamp(1.25rem, 1.8vw, 1.875rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.12;
  font-variation-settings: 'SHRP' var(--po-sharp-head);
}

/* Как связаться: кнопка сверху, фраза внизу */
.ask { justify-content: space-between; gap: clamp(32px, 4vw, 72px); }
.ask__btn {
  --ox: calc(100% - 24px); align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 20px;
  border-radius: 999px; font-size: 1rem; font-weight: 600; white-space: nowrap;
  color: var(--po-text); background: var(--po-surface-2);
}
.ask__arrow { width: 36px; height: 36px; font-size: 0.9375rem; background: var(--po-accent); color: var(--po-on-accent); box-shadow: 0 0 16px rgba(210, 245, 60, 0.3); }
.ask__text { font-size: clamp(1.5rem, 2.1vw, 2.125rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; font-variation-settings: 'SHRP' var(--po-sharp-head); }
.js .dirs.reveal { transition-delay: 90ms; }
.js .ask.reveal { transition-delay: 180ms; }
@media (max-width: 1199px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hello { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .hello, .dirs, .ask { padding: 24px; }
  .ask { gap: var(--po-s-5); }
}
.me { padding-top: var(--po-s-8); padding-bottom: var(--po-s-6); }

/* Проекты стопкой */
.work { padding-top: var(--po-s-9); }
/* Фильтр проектов: капсулы под заголовком, выбранная заливается фосфором, рядом число проектов.
   Без скрипта фильтр не показываем: без него он не работает */
.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--po-s-2); margin: 0 auto var(--po-s-7); }
html:not(.js) .filter { display: none; }
.filter__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--po-surface); color: var(--po-text-2); font: inherit; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  transition: background-color var(--po-dur-base) var(--po-ease), color var(--po-dur-base) var(--po-ease);
}
.filter__n { font-size: 0.8125rem; font-variant-numeric: tabular-nums; opacity: 0.6; }
.filter__btn.is-on { background: var(--po-accent); color: var(--po-on-accent); }
.filter__btn:active:not(.is-on) { background: var(--po-surface-2); color: var(--po-text); }
@media (hover: hover) { .filter__btn:hover:not(.is-on) { background: var(--po-surface-2); color: var(--po-text); } }
.case[hidden], .snap[hidden] { display: none; }
.work__title { margin-bottom: var(--po-s-5); text-align: center; font-size: var(--po-fs-display); line-height: 0.95; letter-spacing: -0.05em; }
/* Проекты на весь экран: каждый проект отдельная графитовая карточка во всё окно под шапкой,
   по краям и снизу полоска фона, так блоки читаются отдельно. Следующий наезжает на предыдущий,
   предыдущий темнеет и отъезжает вглубь. Текст слева по краю сетки, справа снимок */
.deck {
  position: relative; --gap: clamp(10px, 1.4vw, 24px); gap: var(--gap);
  --pl: max(var(--po-gutter), calc((var(--vw, 100vw) - var(--shell)) / 2));
  display: grid; width: var(--vw, 100vw); margin-left: calc(50% - var(--vw, 100vw) / 2);
}
.case {
  position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h) - var(--gap)); margin: 0 var(--gap);
  display: grid; grid-template-columns: calc(var(--pl) - var(--gap) + clamp(300px, 28vw, 560px)) minmax(0, 1fr);
  container-type: size; overflow: hidden;
  background: var(--po-surface); border-radius: clamp(18px, 2.2vw, 36px);
  box-shadow: 0 -24px 48px rgba(10, 8, 6, 0.45);
  transform-origin: 50% 0; scale: calc(1 - var(--cover, 0) * 0.05); transition: scale 160ms linear;
}
.case:first-child { box-shadow: none; }
.snap {
  position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none;
  top: calc(var(--i) * (100dvh - var(--top-h)));
}
.case::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #0a0806; opacity: calc(var(--cover, 0) * 0.6); transition: opacity 160ms linear;
}
.case__copy { display: flex; flex-direction: column; gap: var(--po-s-4); min-height: 0; padding: clamp(24px, 3.4vw, 56px); }
/* Текст растёт вместе с экраном: на большом мониторе крупнее, на телефоне компактнее */
.case .case__copy { gap: clamp(12px, 2.2cqh, 28px); padding: clamp(24px, 6cqh, 72px) clamp(24px, 3cqw, 56px) clamp(24px, 6cqh, 72px) max(24px, var(--pl) - var(--gap)); }
.case .case__save, .case .case__ba div { background: var(--po-surface-2); }
.case .case__name { font-size: clamp(1.625rem, min(3.2cqw, 6cqh), 4rem); }
.case .case__n, .case .case__k { font-size: clamp(0.8125rem, 1.5cqh, 1rem); }
/* Главная цифра всегда помещается в свой блок: размер и от высоты экрана, и от ширины колонки */
.case .case__sum { font-size: clamp(1.75rem, min(8cqh, (clamp(300px, 28cqw, 560px) - 90px) / 5.6), 5.5rem); }
.case .case__ba dd { font-size: clamp(0.9375rem, min(1.15cqw, 2.3cqh), 1.375rem); }
.case .case__ba div, .case .case__save { padding: clamp(12px, 2.2cqh, 26px) clamp(16px, 1.6cqw, 28px); }
.case .case__copy { gap: clamp(8px, 1.2cqh, 14px); }
.case .case__name { margin-bottom: auto; }
.case .case__save { margin-top: clamp(12px, 3cqh, 40px); }
.case .case__text { margin-top: clamp(4px, 1cqh, 10px); }
.case .case__text { max-width: 36em; font-size: clamp(0.9375rem, min(1.15cqw, 2.1cqh), 1.375rem); }
/* Снимок на светлом графите до правого края окна */
.case .case__media::before, .pcard .case__media::before {
  content: ""; position: absolute; inset: 10% 8%; z-index: -1; pointer-events: none;
  background: var(--shot) center / cover no-repeat; filter: blur(70px) saturate(1.5); opacity: 0.55;
  transform: translateZ(0);
}
.case .case__media {
  margin: clamp(8px, 1.2cqw, 20px) clamp(8px, 1.2cqw, 20px) clamp(8px, 1.2cqw, 20px) 0;
  border: 0; border-radius: clamp(16px, 2cqw, 30px); background: var(--po-bg); --mp: clamp(12px, 2cqw, 44px);
}

.case__name { font-size: clamp(1.75rem, min(3.2vw, 5vh), 3.25rem); }

/* Сверху подпись кейса и название, внизу главный акцент: сумма экономии.
   Под ней было и стало двумя колонками между тонкими линиями, как в брендбуке */
.case__n { font-size: var(--po-fs-label); color: var(--po-text-2); font-variant-numeric: tabular-nums; }
.case__k { font-size: var(--po-fs-label); color: var(--po-text-2); }
.case__save { margin-top: auto; display: grid; gap: 8px; padding: var(--po-s-5); border-radius: var(--po-r-lg); background: var(--po-surface); }
.case__sum { font-size: clamp(2.25rem, 3.4vw, 3.5rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.case__ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0; }
/* В карточках колонка с текстом узкая: задача и решение одна под другой, иначе текст шёл в 5–6 строк.
   В две колонки только на вертикальном планшете, где текст во всю ширину */
.case .case__ba, .pcard .case__ba { grid-template-columns: minmax(0, 1fr); }
.case__ba div { display: grid; align-content: start; gap: 4px; padding: var(--po-s-4) var(--po-s-5); border-radius: var(--po-r-lg); background: var(--po-surface); }
.case__ba dd { hyphens: auto; overflow-wrap: break-word; margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.case__ba div:first-child dd { color: var(--po-text-2); }

/* Описание отделено линией, стек метками */
.case__text { color: var(--po-text-2); max-width: 32em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 3px 10px; font-size: var(--po-fs-label); line-height: 1.5; color: var(--po-text-2); background: var(--po-surface-2); border-radius: var(--po-r-sm); }
/* Снимок всегда целиком, ровно, в рамке окна или телефона, на спокойном графитовом фоне */
.case__media {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; justify-content: center; align-items: center; gap: var(--po-s-4); min-height: 0;
  padding: var(--mp); background: var(--po-surface-2);
  --mp: clamp(14px, 2.2vw, 40px); container-type: size;
}
.win { margin: 0; width: 100%; max-width: calc((100cqh - 2 * var(--mp) - 30px) * var(--ar, 1.6)); background: #0E0C0A;  border-radius: var(--po-r-md); overflow: hidden; }
.win__bar { display: flex; gap: 6px; padding: 10px 12px; }
.win__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--po-line-strong); }
.win img { width: 100%; height: auto; }
/* Рамка телефона: корпус рисуется сплошной обводкой вокруг снимка */
.phone {
  flex: 0 1 auto; width: auto; height: auto; min-width: 0; max-width: 100%; max-height: calc(100cqh - 2 * var(--mp) - 12px);
  border-radius: 16px; background: #0E0C0A;
  box-shadow: 0 0 0 5px #0E0C0A;
}
.case__media--phones { gap: var(--po-s-5); }



/* Кнопка ко всем проектам. Своя точка магнита: после проектов кнопка встаёт по центру экрана.
   В покое спокойная графитовая, стрелка в кружке. При наведении фосфор разгорается от стрелки и заливает
   кнопку, вокруг мягко проявляется свечение. Гаснет так же плавно, в обратную сторону */
.more__btn, .top__cta, .ask__btn {
  position: relative; isolation: isolate; overflow: hidden;
  transition: color 480ms var(--po-ease), transform 480ms var(--po-ease), box-shadow 800ms var(--po-ease);
}
.more__btn {
  --ox: calc(100% - 32px);
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--po-s-5);
  min-height: 64px; padding: 12px 12px 12px var(--po-s-6);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
  background: var(--po-surface); border-radius: 999px;
}
.more__btn::before, .top__cta::before, .ask__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--po-accent); clip-path: circle(0% at var(--ox) 50%);
  transition: clip-path 640ms var(--po-ease);
}
.more__arrow, .top__cta-arrow, .ask__arrow {
  display: grid; place-items: center; flex: none; border-radius: 50%;
  transition: transform 480ms var(--po-ease), background-color 480ms var(--po-ease), color 480ms var(--po-ease), box-shadow 480ms var(--po-ease);
}
.more__arrow { width: 40px; height: 40px; background: var(--po-surface-2); color: var(--po-text); }
.more__btn.is-lit, .more__btn:focus-visible, .more__btn:active, .top__cta:focus-visible, .top__cta:active, .ask__btn:focus-visible, .ask__btn:active {
  color: var(--po-on-accent); transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(210, 245, 60, 0.24), 0 0 26px rgba(210, 245, 60, 0.2);
}
.more__btn.is-lit::before, .more__btn:focus-visible::before, .more__btn:active::before,
.top__cta:focus-visible::before, .top__cta:active::before, .ask__btn:focus-visible::before, .ask__btn:active::before { clip-path: circle(160% at var(--ox) 50%); }
.more__btn.is-lit .more__arrow, .more__btn:focus-visible .more__arrow, .more__btn:active .more__arrow,
.top__cta:focus-visible .top__cta-arrow, .top__cta:active .top__cta-arrow, .ask__btn:focus-visible .ask__arrow, .ask__btn:active .ask__arrow {
  background: var(--po-on-accent); color: var(--po-accent); box-shadow: none; transform: translateX(3px);
}
@media (hover: hover) {
  .more__btn:hover, .top__cta:hover, .ask__btn:hover { color: var(--po-on-accent); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(210, 245, 60, 0.24), 0 0 26px rgba(210, 245, 60, 0.2); }
  .more__btn:hover::before, .top__cta:hover::before, .ask__btn:hover::before { clip-path: circle(160% at var(--ox) 50%); }
  .more__btn:hover .more__arrow, .top__cta:hover .top__cta-arrow, .ask__btn:hover .ask__arrow { background: var(--po-on-accent); color: var(--po-accent); box-shadow: none; transform: translateX(3px); }
}

/* Страница всех проектов */
.all { padding-top: var(--po-s-7); padding-bottom: var(--po-s-9); }
.all__back { display: inline-flex; align-items: center; min-height: 44px; margin-top: -11px; gap: var(--po-s-2); font-size: var(--po-fs-small); color: var(--po-text-2); transition: color var(--po-dur-fast) var(--po-ease); }
.all__back span { transition: transform var(--po-dur-base) var(--po-ease); }
.all__back:active, .all__back:focus-visible { color: var(--po-text); }
@media (hover: hover) {
  .all__back:hover { color: var(--po-text); }
  .all__back:hover span { transform: translateX(-4px); }
}
.all__title { margin-top: var(--po-s-6); font-size: var(--po-fs-display); line-height: 0.95; letter-spacing: -0.05em; }
/* Все проекты: каждый крупной карточкой почти на экран, как на главной: текст и большой снимок
   с аурой его цветов. Снимок чередуется справа и слева, чтобы длинная страница не была однообразной */
.pgrid { display: grid; gap: clamp(16px, 2vw, 28px); margin-top: var(--po-s-8); }
.pcard {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: clamp(560px, 80svh, 860px);
  background: var(--po-surface); border-radius: clamp(20px, 2.2vw, 36px); overflow: hidden;
}
.pcard:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pcard:nth-child(even) .case__media { order: -1; margin: 16px 0 16px 16px; }
.pcard .case__copy { gap: 14px; padding: clamp(28px, 4vw, 64px); }
.pcard .case__name { margin-bottom: auto; font-size: clamp(2rem, 3.4vw, 3.5rem); }
.pcard .case__n, .pcard .case__k { font-size: clamp(0.8125rem, 0.9vw, 1rem); }
.pcard .case__save { margin-top: var(--po-s-6); }
.pcard .case__sum { font-size: clamp(2.75rem, 4.6vw, 5rem); }
.pcard .case__save, .pcard .case__ba div { padding: clamp(14px, 1.6vw, 24px) clamp(16px, 1.8vw, 28px); background: var(--po-surface-2); }
.pcard .case__ba dd, .pcard .case__text { font-size: clamp(1rem, 1.2vw, 1.25rem); }
.pcard .case__media {
  margin: 16px 16px 16px 0; border-radius: clamp(16px, 2vw, 28px); background: var(--po-bg);
  --mp: clamp(16px, 3vw, 56px);
}
@media (prefers-reduced-motion: no-preference) {
  .pcard { animation: step 700ms var(--po-ease) both; animation-delay: calc(160ms + var(--i) * 80ms); }
}

/* Переход между страницами: на проекты всё уезжает влево, обратно вправо. Шапка стоит на месте */
@view-transition { navigation: auto; }
.top { view-transition-name: top; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 560ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: vt-out-left; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: vt-in-right; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-right; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-left; }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-8%); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(8%); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(8%); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-8%); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }


/* Контакты */
.contact { padding-top: var(--po-s-9); padding-bottom: var(--po-s-9); }
.contact__title { font-size: var(--po-fs-display); line-height: 0.98; letter-spacing: -0.05em; max-width: 11em; }
/* Контакты: две строки между тонкими линиями, без карточек. Слева подпись, по центру ник или адрес крупно
   с маленьким значком копирования: нажатие копирует. Справа текстовая ссылка со стрелкой: сразу переходит */
.contact__links { max-width: 1000px; margin-top: var(--po-s-8); border-top: 1px solid var(--po-line); }
.reach {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; gap: var(--po-s-3) var(--po-s-5);
  padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid var(--po-line);
}
.reach__k { position: relative; font-size: var(--po-fs-small); color: var(--po-text-2); }
.reach__state { position: absolute; left: 0; top: 100%; margin-top: 2px; white-space: nowrap; font-weight: 600; color: var(--po-accent); }
.reach__field {
  justify-self: start; display: inline-flex; align-items: center; gap: 14px; max-width: 100%; min-height: 48px; padding: 6px 0;
  border: 0; background: none; color: var(--po-text); font: inherit; text-align: left; cursor: copy;
}
.reach__val {
  min-width: 0; overflow-wrap: anywhere;
  font-size: clamp(1.5rem, 3vw, 2.75rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1;
  font-variation-settings: 'SHRP' var(--po-sharp-head);
}
.reach__ico { flex: none; width: 20px; height: 20px; color: var(--po-text-2); transition: color var(--po-dur-base) var(--po-ease); }
.reach__ico--ok { display: none; color: var(--po-accent); }
.reach.is-done .reach__ico--copy { display: none; }
.reach.is-done .reach__ico--ok { display: block; }
.reach__field:active .reach__ico--copy, .reach__field:focus-visible .reach__ico--copy { color: var(--po-text); }
.reach__open { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; font-weight: 600; color: var(--po-text-2); transition: color var(--po-dur-base) var(--po-ease); }
.reach__open span { transition: transform var(--po-dur-base) var(--po-ease), color var(--po-dur-base) var(--po-ease); }
.reach__open:active, .reach__open:focus-visible { color: var(--po-text); }
.reach__open:active span, .reach__open:focus-visible span { color: var(--po-accent); transform: translate(3px, -3px); }
@media (hover: hover) {
  .reach__field:hover .reach__ico--copy { color: var(--po-text); }
  .reach__open:hover { color: var(--po-text); }
  .reach__open:hover span { color: var(--po-accent); transform: translate(3px, -3px); }
}
.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--po-s-4); padding-top: var(--po-s-6); padding-bottom: var(--po-s-7); }

/* Ссылка «Перейти к содержимому»: видна только при переходе с клавиатуры */
.skip {
  position: fixed; z-index: 60; left: var(--po-s-4); top: var(--po-s-3); padding: 10px 16px; border-radius: var(--po-r-sm);
  background: var(--po-accent); color: var(--po-on-accent); font-weight: 600; transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* Снимок крупно: по нажатию открывается на весь экран. Широкий снимок на телефоне можно листать вбок */
.case__media img { cursor: zoom-in; }
.view {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 8, 6, 0.96); color: var(--po-text);
}
.view[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: menu-in 240ms var(--po-ease); }
.view::backdrop { background: rgba(10, 8, 6, 0.96); }
html:has(.view[open]) { overflow: hidden; }
.view__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--po-s-4); padding: 10px 6px 10px var(--po-s-4); }
.view__cap { font-size: var(--po-fs-small); color: var(--po-text-2); }
.view__close { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--po-text); cursor: pointer; }
.view__close span { position: absolute; left: 14px; right: 14px; top: 23px; height: 1.5px; background: currentColor; }
.view__close span:first-child { transform: rotate(45deg); }
.view__close span:last-child { transform: rotate(-45deg); }
.view__scroll { display: grid; place-items: center; overflow: auto; padding: 0 var(--po-s-4) var(--po-s-4); overscroll-behavior: contain; }
.view__img { max-width: 100%; max-height: calc(100svh - 96px); width: auto; height: auto; border-radius: var(--po-r-md); }
@media (max-width: 767px) and (orientation: portrait) {
  .view__scroll { place-items: center start; }
  .view__img.is-wide { max-width: none; max-height: none; height: min(64svh, 560px); }
}

/* Появление при прокрутке */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--po-dur-slow) var(--po-ease), transform var(--po-dur-slow) var(--po-ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Планшет */
@media (max-width: 1023px) {
  .top__nav { display: none; }
  .top__bar { grid-template-columns: 1fr auto; }
  .top__menu { display: block; }
}

/* Планшет вертикально: в проекте снимок сверху на всю ширину, текст под ним, иначе снимок мелкий */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .case { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52% minmax(0, 1fr); }
  .case .case__media { order: -1; margin: 16px 16px 0; }
  .case .case__copy { padding: 32px; }
  .pcard, .pcard:nth-child(even) { grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(340px, 44svh, 560px) auto; min-height: 0; }
  .case .case__ba, .pcard .case__ba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pcard .case__media, .pcard:nth-child(even) .case__media { order: -1; margin: 16px 16px 0; }
}

/* Телефон: карточки в стопке те же, снимок сверху, текст под ним */
@media (max-width: 767px) {
  :root { --top-h: 64px; }
  .top__menu, .top__cta { height: 42px; padding: 0 16px; font-size: var(--po-fs-small); }
  .top__cta { --ox: calc(100% - 20px); gap: 6px; padding: 0 4px 0 12px; }
  .top__cta-arrow { width: 34px; height: 34px; font-size: 0.875rem; }
  .menu__bar img { height: 22px; }
  .top__logo img { height: 26px; }
  /* На телефоне кнопка короче, «Обсудить ↗», иначе логотипу не хватает места */
  .top__cta-tail { display: none; }
  .top__nav { display: none; }
  /* Первый экран: заголовок крупнее, экран чуть ниже окна, чтобы снизу выглядывал следующий блок
     и было понятно, что дальше есть ещё */
  .hero { justify-content: center; min-height: max(440px, calc(82svh - var(--top-h))); }
  .hero__title { font-size: clamp(2.1rem, 11vw, 3rem); }
  .hero__sub { margin-top: var(--po-s-5); }
  .me { padding-top: var(--po-s-5); }
  .work { padding-top: var(--po-s-8); }
  .work__title { margin-bottom: var(--po-s-6); }
  /* Фильтр на телефоне: одна строка капсул от края до края, листается пальцем, справа край гаснет */
  .filter {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(-1 * var(--po-gutter)) var(--po-s-5); padding: 0 var(--po-gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .filter.at-end { -webkit-mask-image: none; mask-image: none; }
  .filter::-webkit-scrollbar { display: none; }
  .filter__btn { flex: none; padding: 0 14px; gap: 6px; }
  .contact { padding-top: var(--po-s-8); padding-bottom: var(--po-s-8); }
  .all { padding-top: var(--po-s-5); }
  /* Проект на телефоне: карточка не меньше экрана, но растёт под содержимое, ничего не прячется.
     Стопки нет: в узком окне она обрезала бы текст. Карточки идут друг за другом с зазором,
     магнит ставит начало карточки под шапку. Снимок сверху во всю ширину */
  .case {
    position: relative; top: 0; height: auto; min-height: calc(100svh - var(--top-h) - var(--gap));
    grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
    container-type: inline-size; scale: none; scroll-margin-top: var(--top-h);
  }
  .case::after, .snap { display: none; }
  .case .case__media { margin: 8px 8px 0; }
  .case .case__copy { padding: 20px 16px 24px; gap: var(--po-s-3); }
  .case .case__name { margin-bottom: var(--po-s-2); }
  .case .case__save { margin-top: 0; }
  .case__media { order: -1; --mp: 4px; container-type: normal; }
  .case .case__media::before, .pcard .case__media::before { filter: blur(32px) saturate(1.4); }
  .case__copy { padding: 20px 16px 24px; gap: var(--po-s-3); }
  .win { max-width: none; }
  /* Экраны телефонов крупно, листаются пальцем, следующий выглядывает справа */
  .case__media--phones {
    justify-content: flex-start; gap: 12px; padding: 16px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .case__media--phones::-webkit-scrollbar { display: none; }
  .case__media--phones .phone { flex: 0 0 64%; width: 64%; max-height: none; scroll-snap-align: center; }
  /* Задача и решение одна под другой: в две колонки по 150 px слова рвались и вылезали за край */
  .case__ba { grid-template-columns: minmax(0, 1fr); }
  .case .case__ba dd, .pcard .case__ba dd { hyphens: manual; }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .pcard { display: flex; flex-direction: column; min-height: 0; }
  .pcard .case__media, .pcard:nth-child(even) .case__media { order: -1; min-height: 0; height: auto; margin: 8px 8px 0; border-radius: var(--po-r-md); }
  .pcard .case__copy { padding: 20px 16px 24px; }
  .more__btn { width: 100%; }
  /* Телефон: подпись и ссылка в одной строке, ник или адрес под ними во всю ширину */
  .reach { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k open" "val val"; row-gap: 0; }
  .reach__k { grid-area: k; }
  .reach__open { grid-area: open; }
  .reach__field { grid-area: val; }
  .reach__state { position: static; margin: 0 0 0 10px; }
}

/* Невысокие экраны: телефон боком, низкие окна браузера. Стопка проектов становится обычной колонкой */
@media (max-height: 620px) and (min-width: 768px) {
  .case { position: relative; top: 0; height: auto; container-type: inline-size; scale: none; }
  .case::after, .snap { display: none; }
  .case__media { min-height: 320px; }
}
@media (max-height: 520px) {
  .hero__title { font-size: clamp(2.2rem, min(7vw, 18vh), 4.5rem); }
}
/* Узкие телефоны: логотип чуть меньше. Уже 360 px кнопка «Обсудить» остаётся только в меню */
@media (max-width: 374px) { .top__logo img { height: 22px; } }
@media (max-width: 359px) { .top__cta { display: none; } }
/* Телефон боком: экраны телефонов и окна снимков не выше окна браузера */
@media (max-width: 767px) and (max-height: 520px) {
  .case__media--phones .phone { flex: 0 0 auto; width: auto; height: 76svh; }
  .case .win { max-width: calc(76svh * var(--ar, 1.6)); margin: 0 auto; }
}
/* Телефон боком: большой логотип на фоне выглядывал бы из-под первого экрана обрывками букв */
@media (max-height: 520px) { .giant { display: none; } .hero { padding-bottom: var(--po-s-7); } }