/* ==========================================================================
   KASNOV_DEV — главная.
   .is-desk (ставит js/home.js от 1024px): блоки в координатах PDF, масштаб по ширине
   окна, общие часы переезжают между блоками. Ниже 1024px — блоки друг под другом.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Паттерн 01 «сетка» мелкой клеткой (60px) на всех светлых блоках. Плитка закреплена
   на экране (fixed): одинаково под закреплёнными сценами (часы, кейсы) и под обычной
   прокруткой. Размер в px экрана, без масштаба страницы — линии остаются чёткими.
   Тёмная секция «Связь» — без паттерна, сплошной синий.
   Другие варианты фона:
   02 — двоичное поле: url("../assets/img/pattern-binary-soft.svg") 0 0 / calc(1452px * var(--s, 1)) calc(1248px * var(--s, 1)) repeat fixed;
        для блока 1 — своё поле с тихими зонами: assets/img/pattern-binary.svg (1440×1224 px макета)
   03 — схема (только блок 1): url("../assets/img/pattern-circuit.svg") center top / 1440px 1224px no-repeat */
body {
  margin: 0;
  background: url("../assets/img/pattern-grid-60.svg") 0 0 / 60px 60px repeat fixed var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-mono);
  font-size: var(--fs-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
a { color: inherit; }

.hero { position: relative; overflow: hidden; }
:root { --title-lift: 70px; }


/* --- Заголовок: все размеры в em от кегля 76px (≈ px макета / 76) -------- */
.hero-title {
  position: relative;
  margin: 0;
  width: calc(826em / 76);
  height: calc(239em / 76);
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1;
  color: var(--c-ink);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-title .k-bracket { width: calc(44.5em / 76); height: calc(38.5em / 76); }
.hero-title .k-bracket--tl { left: 0; top: 0; }
.hero-title .k-bracket--br { left: calc(734em / 76); top: calc(200.5em / 76); }
.ht-line, .ht-plate { position: absolute; }
/* top строки = верх прописных − 0.2195em (Furore при line-height 1) */
.ht-l1 { left: calc(17em / 76); top: calc(22.3em / 76 - 0.2195em); }
.ht-l2 { left: calc(121em / 76); top: calc(92.3em / 76 - 0.2195em); }
.ht-plate { height: calc(69em / 76); }
.ht-p1 { left: calc(487em / 76); top: calc(14.5em / 76); width: calc(339em / 76); }
.ht-p2 { left: calc(340em / 76); top: calc(150.5em / 76); width: calc(430em / 76); }
.ht-plate__text { position: absolute; }
.ht-p1 .ht-plate__text { left: calc(27.2em / 76); top: calc(7.8em / 76 - 0.2195em); }
.ht-p2 .ht-plate__text { left: calc(24.4em / 76); top: calc(8.8em / 76 - 0.2195em); }

/* --- Информационный блок ------------------------------------------------- */
.info { color: var(--c-ink); }
.info__index { position: absolute; left: 8px; top: 9px; }
.info__handle { position: absolute; right: 9.4px; top: 9px; }
.info__body {
  position: absolute;
  left: 8px;
  bottom: 35.3px;
  width: 410px;
}
.info__desc { font-size: var(--fs-body); line-height: 21px; }
.info__partner { margin-top: 12px; display: grid; gap: 4px; line-height: 1.1; }
.info__partner[hidden] { display: none; }
.info__partner-label {
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-steel);
}
.info__partner-handle { font-size: var(--fs-body); color: var(--c-navy); }

/* --- Название услуги и счётчик ------------------------------------------- */
.svc-title {
  max-width: 13ch;
  padding-bottom: 7.6px;
  border-bottom: var(--line) solid var(--c-navy-line);
  font-size: var(--fs-service);
  line-height: 21px;
  text-align: right;
  color: var(--c-ink);
}
.svc-counter { font-size: var(--fs-micro); line-height: 1; color: var(--c-ink); }

/* Смена услуги: текст появляется в момент щелчка часов (≈240 мс) */
@keyframes k-appear {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
[data-bind].is-in { animation: k-appear 240ms var(--ease) both; }

/* --- Циферблат ----------------------------------------------------------- */
.dial { display: block; overflow: visible; font-family: var(--f-display); }
.dial-band { stroke: var(--c-dial-band); }
.dial-disk__base { fill: #1F3A4E; }      /* основа под картинкой диска — её средний тон */
.dial-inner { stroke: var(--c-dial-tick); stroke-opacity: .45; stroke-width: .8; }
.dial-ticks circle { stroke: var(--c-dial-tick); }
.dial-arc { fill: none; stroke-width: 4; }
.dial-arc--deep { stroke: var(--c-azure); }
.dial-arc--light { stroke: var(--c-cyan); }
.dial-ring { stroke: var(--c-navy); stroke-width: 1; stroke-opacity: .85; }
.dial-dots { stroke: var(--c-dial-tick); stroke-width: 1.6; stroke-linecap: round; }
.dial-stem { stroke: var(--c-navy); stroke-width: 1.6; }
.dial-slotdot { fill: var(--c-navy); }
.dial-node { fill: var(--c-node-fill); stroke: var(--c-navy); stroke-width: 1.5; }
.dial-node--active { stroke-width: 2; }
.dial-arrow { fill: var(--c-cyan); }
.dial-bracket { fill: none; stroke: var(--c-navy-line); stroke-width: 1.2; }
/* пасхалка перехода между блоками: маленькая подпись в центре часов, видна только
   в середине отдаления (прозрачность и место — js/home.js); при «уменьшении движения» нет */
.zoom-egg {
  position: absolute;
  left: 0; top: 0;
  z-index: 3;
  margin: 0;
  padding-bottom: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--c-dial-tech);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.zoom-egg::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 37px;
  height: var(--line);
  background: var(--c-cyan);
  opacity: .7;
}
html:not(.is-desk):not(.is-mob) .zoom-egg { display: none; }

/* расшифровка пасхалки (js/eggs.js): прозрачная кнопка точно над крупной цифрой и
   маленькая подсказка рядом — Roboto Mono, светлая плашка с тонкой рамкой и голубой линией */
.egg-btn {
  position: fixed;
  left: 0; top: 0;
  z-index: 40;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
.egg-btn:focus-visible { outline: 1px dashed var(--c-navy); outline-offset: 2px; }
.egg-tip {
  position: fixed;
  left: 0; top: 0;
  z-index: 45;
  max-width: min(280px, calc(100vw - 24px));
  margin: 0;
  padding: 9px 12px 10px;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-ink);
  background: color-mix(in srgb, var(--c-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: var(--line) solid color-mix(in srgb, var(--c-navy-line) 40%, transparent);
  box-shadow: inset 2px 0 0 var(--c-cyan), 0 8px 22px rgb(14 39 53 / .14);
}
.egg-tip[hidden] { display: none; }

/* подпись-пасхалка под крупной цифрой: Roboto Mono, приглушённый цвет, тонкая голубая
   линия. Размер — --cap-fs (в единицах циферблата; js/home.js держит его около 9–11px на
   экране при любом масштабе часов). Тонкий ореол цвета фона отделяет текст от линий часов. */
.dial-egg { font-size: var(--cap-fs, var(--fs-micro)); }
.dial-coord {
  font-family: var(--f-mono);
  font-size: 1em;
  fill: var(--c-dial-tech);
  paint-order: stroke;
  stroke: var(--c-paper);
  stroke-width: .3em;
  stroke-linejoin: round;
}
.dial-underline {
  stroke: var(--c-cyan);
  stroke-opacity: .7;
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.dial-hit { fill: transparent; pointer-events: none; }
.dial-egg.is-drawn .dial-underline { stroke-dashoffset: 0; transition: stroke-dashoffset 90ms var(--ease); }
/* второй блок на телефоне: под цифрой начинается текст услуги — подпись над цифрой */
.dial.is-cap-above .dial-egg { transform: translate(-66px, calc(-54px - 2.9em)); }
.dial-active { font-size: var(--fs-dial-active); fill: var(--c-navy); }
/* шкала 01–12 снаружи кольца: кольцо цифр вращается (js/dial.js), символы вертикальны;
   цифра в зоне выделения у «3 часов» крупная и синяя */
.dial-hour { font-size: var(--fs-dial-hour); fill: var(--c-dial-num); transition: fill 360ms var(--ease); }
.dial-hour.is-active { fill: var(--c-navy); }


/* Список-источник: без скрипта — обычный текст, со скриптом — только для чтения с экрана */
.has-dial .svc-source {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   Компьютер: одна сцена и камера (js/home.js)
   Координаты сцены = координаты «Wireframe - 4.pdf» (первый экран 1440 × 1224).
   Часы стоят в сцене неподвижно, центр (1360, 622.5). Блок «Что я делаю»
   («Wireframe - 3.pdf») стоит в сцене там, где его покажет отдалённая камера:
   его часы (центр 360, --b2-cy; масштаб --b2-scale ≤ --dial-small — оба считает js/home.js
   по высоте окна, чтобы часы целиком помещались под заголовком) совпадают с этими часами,
   поэтому весь блок увеличен в 1 / --dial-small и привязан к центру часов.
   Камера: панорама первого экрана → отдаление → закреплённый список → выход.
   Фон — однотонный (механизм убран).
   --t — прогресс отдаления 0…1 (на :root).
   ========================================================================== */
.is-desk .scene { position: relative; }
.is-desk .scene-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.is-desk .scene-track {
  position: absolute;
  left: 0; top: 0;
  width: 1440px; height: 1224px;
  zoom: var(--s, 1);           /* базовый масштаб — вёрсткой: текст и линии растрируются в итоговом размере */
  transform-origin: 0 0;       /* transform — только сдвиг камеры и её отдаление (js/home.js) */
}
.is-desk .stage {
  position: absolute;
  left: 0; top: 0;
  width: 1440px;
  height: 1224px;
  overflow: visible;
}
.is-desk .b2-space {
  position: absolute;
  left: calc(1360px - 360px / var(--b2-scale, var(--dial-small)));
  top: calc(622.5px - var(--b2-cy, 525px) / var(--b2-scale, var(--dial-small)));
  width: 1440px;
  height: 1162px;
  transform: scale(calc(1 / var(--b2-scale, var(--dial-small))));
  transform-origin: 0 0;
}

.is-desk .site-logo { position: absolute; left: 40px; top: calc(47.6px - 0.2195 * var(--fs-nav)); }
.is-desk .site-contact { position: absolute; left: 1177px; top: 28px; width: 223px; padding: 0; }
/* разделы — справа, перед «Связаться», на одной высоте с кнопкой (53px) */
.is-desk .site-nav { position: absolute; right: 311px; top: 28px; height: 53px; }
/* Заголовок поднят на --title-lift относительно PDF (238.5px); карточка осталась на месте,
   вертикальный участок соединительной линии удлинён на ту же величину (index.html). */
.is-desk .hero-title { position: absolute; left: 43px; top: calc(238.5px - var(--title-lift)); }
.is-desk .hero-connector { position: absolute; left: 0; top: 0; width: 1440px; height: 1224px; }
.is-desk .info { position: absolute; left: 60px; top: 554px; width: 426.5px; height: 215px; }
.is-desk .hero-btn { position: absolute; top: 881px; padding: 0; }
.is-desk .hero-btn--dev { left: 62px; width: 373px; }
.is-desk .hero-btn--contact { left: 435px; width: 330px; }
/* название текущей услуги — внутри часов напротив активной цифры, на уровне центра (как в PDF) */
.is-desk .svc-title { position: absolute; right: 150px; bottom: calc(1224px - 649.5px); }
.is-desk .svc-counter { position: absolute; right: 152px; top: 656.1px; }
.is-desk .dial {
  position: absolute;
  left: 740px; top: 60px;
  width: 1300px; height: 1140px;
  pointer-events: none;
}
.is-desk .site-header > * { z-index: 3; }

/* Отдаление: первый экран уходит первым, затем проявляется блок 2.
   Фон: механизм первого экрана сменяется механизмом блока 2 — оба в сцене. */
.is-desk .site-header,
.is-desk .hero-title,
.is-desk .hero-connector,
.is-desk .info,
.is-desk .hero-actions { opacity: clamp(0, 1 - var(--t, 0) * 2.5, 1); }
/* Подпись услуги гаснет одной группой: прозрачность — у обёртки, а не у счётчика и названия,
   потому что их анимация появления (k-appear, fill both) держит собственную opacity = 1 и
   оставляла бы «висящий» счётчик, пока часы тикают во время отдаления. Как только группа
   погасла (t ≥ .25), она скрыта целиком, и смена услуги её уже не проявит. */
.is-desk .svc-label { opacity: clamp(0, 1 - var(--t, 0) * 4, 1); }
.is-desk.is-label-off .svc-label { visibility: hidden; }
.is-desk .b2 { opacity: clamp(0, (var(--t, 0) - .55) * 2.5, 1); }
.is-desk:not(.is-b2) .b2 { pointer-events: none; }
.is-desk.is-b2 .hero-main > *:not(.dial-wrap) { pointer-events: none; }

/* --- Блок 2 «Что я делаю» (координаты «Wireframe - 3.pdf») ---------------- */
/* заголовок на плашке: 646 × 104, срезанные нижние углы, тёмный треугольник справа */
.b2-heading {
  position: relative;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
}
.b2-heading > span { position: absolute; }
.b2-heading__plate {
  inset: 0;
  background: color-mix(in srgb, var(--c-steel) 21%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 75.7%, calc(100% - 27.5px) 100%, 29.6px 100%, 0 73.8%);
}
.b2-heading__corner {
  right: -0.5px; bottom: -0.5px;
  width: 23.5px; height: 22px;
  background: var(--c-navy-line);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.b2-heading__tl { left: -0.5px; top: -0.5px; border-color: var(--c-ink); }
.b2-heading__l1 { left: 12px; top: calc(24.8px - 0.2195em); }
.b2-heading__l2 { left: 286.2px; top: calc(24.8px - 0.2195em); color: var(--c-steel-blue); }
.is-desk .b2-heading { position: absolute; left: 28px; top: 67px; width: 646px; height: 104px; }

/* список услуг: едет по прокрутке, текущая — яркая и с описанием (js/home.js) */
.b2-list { margin: 0; padding: 0; list-style: none; }
.b2-item { margin: 0; }
.b2-item__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-svc-name);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-navy-deep);
}
.b2-item__desc { margin-top: 30.3px; font-size: var(--fs-body); line-height: 21px; color: var(--c-ink); }
.b2-item .info__partner-handle { font-size: var(--fs-body); }
.is-desk .b2-list { position: absolute; left: 799px; top: 0; width: 430px; }
.is-desk .b2-item {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  will-change: transform;
}
.is-desk .b2-item__title,
.is-desk .b2-item__price,
.is-desk .b2-item__desc { transition: color var(--t-list) var(--ease), opacity var(--t-list) var(--ease), visibility 0s; }
.is-desk .b2-item:not(.is-active) .b2-item__title { color: var(--c-steel); opacity: .4; }
/* у неактивных — только название; цена и описание (и кнопка партнёра) скрыты и не ловят фокус */
.is-desk .b2-item:not(.is-active) .b2-item__price,
.is-desk .b2-item:not(.is-active) .b2-item__desc { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, var(--t-list); }

/* Цена — между названием и описанием: Roboto Mono, заметна, но мельче названия */
.b2-item__price {
  margin: 18px 0 0;
  font-family: var(--f-mono);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--c-navy);
}
.b2-item__price + .b2-item__desc { margin-top: 16px; }

/* --- Карточка партнёра у «Сайтов» (KURU DESIGNER) ---------------------------
   Самостоятельная компактная композиция по мотивам сайта партнёра: кремовый фон
   с едва заметной волнистой сеткой, приглушённый красный, плотное название,
   подпись в квадратных скобках и ступенчатая деталь в углу. */
.kuru-card {
  position: relative;
  max-width: 420px;
  padding: 18px 20px 20px;
  color: var(--c-kuru-red);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 12c8-4 16 4 24 0s16-4 24 0M0 36c8-4 16 4 24 0s16-4 24 0M12 0c-4 8 4 16 0 24s-4 16 0 24M36 0c-4 8 4 16 0 24s-4 16 0 24' fill='none' stroke='%239E2528' stroke-opacity='.09'/%3E%3C/svg%3E") 0 0 / 48px 48px,
    var(--c-kuru-cream);
  border: var(--line) solid color-mix(in srgb, var(--c-kuru-red) 30%, transparent);
}
.kuru-card__label {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kuru-card__name {
  margin: 10px 0 0;
  font-family: var(--f-kuru);
  font-weight: 900;
  font-size: 30px;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.kuru-card__desc {
  margin: 12px 0 0;
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-kuru-red) 82%, var(--c-ink));
}
.kuru-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 16px;
  padding: 0 18px;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-kuru-cream);
  background: var(--c-kuru-red);
  cursor: pointer;
  outline: none;
  transition: background-color 160ms var(--ease), transform 120ms var(--ease);
}
.kuru-card__btn-arrow { font-size: 16px; transition: transform 160ms var(--ease); }
.kuru-card__btn:hover { background: var(--c-kuru-red-deep); }
.kuru-card__btn:hover .kuru-card__btn-arrow { transform: translate(2px, -2px); }
.kuru-card__btn:active { transform: translateY(1px); }
.kuru-card__btn:focus-visible { box-shadow: 0 0 0 2px var(--c-kuru-cream), 0 0 0 4px var(--c-kuru-red); }
.kuru-card__btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* ступенчатая деталь в правом верхнем углу — квадраты лесенкой */
.kuru-card__steps {
  position: absolute;
  right: 0; top: 0;
  width: 10px; height: 10px;
  background: var(--c-kuru-red);
  box-shadow: -10px 0 var(--c-kuru-red), -20px 0 var(--c-kuru-red), 0 10px var(--c-kuru-red), -10px 10px var(--c-kuru-red), 0 20px var(--c-kuru-red);
  opacity: .85;
}

/* ==========================================================================
   Узкие экраны: блоки идут друг за другом
   ========================================================================== */
html:not(.is-desk) .stage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 56px;
}
html:not(.is-desk) .site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
html:not(.is-desk) .site-logo { font-size: 18px; }
html:not(.is-desk) .site-contact { --k-h: 42px; --k-slant: 10px; font-size: 16px; padding: 0 30px; }
/* на телефоне разделы и «Связаться» — в кнопке меню (.menu), в шапке остаётся логотип */
html:not(.is-desk) .site-nav,
html:not(.is-desk) .site-contact { display: none; }
html:not(.is-desk) .site-header { min-height: 44px; padding-right: 60px; }
html:not(.is-desk) .hero-main { position: relative; display: flex; flex-direction: column; }
html:not(.is-desk) .hero-title {
  margin-top: 28px;
  font-size: min(var(--fs-hero), calc((100vw - 32px) * 76 / 830));
}
html:not(.is-desk) .hero-connector { display: none; }

html:not(.is-desk) .dial-wrap {
  position: relative;
  order: 2;
  align-self: flex-end;
  width: min(100% + 16px, 600px);
  margin: 8px -16px 0 0;
  aspect-ratio: 683 / 1024;
}
html:not(.is-desk) .dial { position: absolute; inset: 0; width: 100%; height: 100%; }
html:not(.is-desk) .svc-title {
  position: absolute;
  right: calc(150 / 683 * 100%);
  bottom: calc((1134 - 649.5) / 1024 * 100%);
  font-size: clamp(14px, 3.9vw, 22px);
  line-height: 1.05;
  padding-bottom: 6px;
}
html:not(.is-desk) .svc-counter {
  position: absolute;
  right: calc(152 / 683 * 100%);
  top: calc((656 - 110) / 1024 * 100%);
}
html:not(.is-desk) .info {
  order: 3;
  width: 100%;
  max-width: 560px;
  margin-top: 12px;
  min-height: 215px;
  padding: 58px 8px 28px;
  font-size: 16px;
}
html:not(.is-desk) .info .k-tech { font-size: 16px; }
html:not(.is-desk) .info__body { position: relative; left: auto; bottom: auto; width: auto; } /* над стеклом */
html:not(.is-desk) .info__desc { font-size: 16px; line-height: 1.35; }
html:not(.is-desk) .info__partner-handle { font-size: 16px; }
html:not(.is-desk) .hero-actions {
  order: 4;
  display: flex;
  width: 100%;
  max-width: 560px;
  margin-top: 28px;
}
html:not(.is-desk) .hero-btn {
  --k-h: 52px;
  --k-slant: 11px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 18px;
  font-size: clamp(15px, 4.3vw, 26px);
}
html:not(.is-desk) .hero-btn--dev { flex-grow: 1.2; }

/* блок 2 на телефоне: плашка-заголовок и обычный список услуг */
html:not(.is-desk) .b2 { position: relative; overflow: hidden; padding: 24px 16px 64px; }
html:not(.is-desk) .b2-heading { height: 1.37em; font-size: min(var(--fs-hero), calc((100vw - 32px) * 76 / 660)); }
html:not(.is-desk) .b2-heading__l1 { left: .16em; top: .1em; }
html:not(.is-desk) .b2-heading__l2 { left: 3.77em; top: .1em; }
html:not(.is-desk) .b2-list { display: grid; gap: 36px; margin-top: 40px; }
html:not(.is-desk) .b2-item__title { font-size: clamp(26px, 8vw, 46px); }
html:not(.is-desk) .b2-item__desc { margin-top: 14px; font-size: 16px; line-height: 1.35; }

/* --- Телефон: анимированная сцена (html.is-mob, js/home.js) ----------------
   Первый экран — как в статичной раскладке выше; сцена закрепляется, когда его низ
   доходит до низа окна (top закрепления и высоты — из скрипта), и уходит влево.
   Блок «Что я делаю» стоит справа от первого экрана в размер окна: заголовок сверху,
   фрагмент часов у левого края, правее — лента услуг (предыдущая, текущая, следующая). */
html.is-mob .scene-pin { position: sticky; overflow: hidden; }
html.is-mob .scene-track { position: relative; width: 100%; }
html.is-mob .hero { overflow: visible; }
html.is-mob .dial-wrap { z-index: 2; }
html.is-mob .svc-label { opacity: clamp(0, 1 - var(--t, 0) * 4, 1); }
html.is-mob.is-label-off .svc-label { visibility: hidden; }
html.is-mob .b2 { position: absolute; left: 100%; width: 100%; padding: 0; overflow: visible; }
html.is-mob .b2-heading { position: absolute; left: 16px; top: 76px; }
/* лента услуг правее фрагмента часов: от заголовка до низа окна; у краёв ленты пункты
   растворяются, а не обрезаются резко */
html.is-mob .b2-list {
  position: absolute;
  left: var(--m-list-left, 110px); right: 16px;
  top: var(--m-list-top, 140px); bottom: 0;
  display: block;
  margin: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
html.is-mob .b2-item { position: absolute; left: 0; right: 0; top: 0; }
html.is-mob .b2-item:not(.is-active) { pointer-events: none; }
html.is-mob .b2-item__title { font-size: clamp(20px, 6.2vw, 30px); line-height: 1.08; }
html.is-mob .b2-item__price { margin-top: 10px; font-size: 15px; }
html.is-mob .b2-item__price + .b2-item__desc { margin-top: 10px; }
html.is-mob .b2-item__desc { margin-top: 10px; font-size: 15px; }
html.is-mob .kuru-card { padding: 14px 14px 16px; }
html.is-mob .kuru-card__name { font-size: clamp(20px, 6vw, 26px); }
html.is-mob .kuru-card__desc { font-size: 13px; }
html.is-mob .kuru-card__btn { margin-top: 12px; padding: 0 14px; font-size: 13px; }

/* ==========================================================================
   Кейсы («Frame 73.pdf», js/cases.js)
   Карточка 1410 × 480 (px макета) со срезом слева сверху; панель «Задача /
   Решение» стоит в вырезе над стопкой. Состояние карточки — data-state:
   task — светлая поверхность и тёмный текст; solution — синяя поверхность,
   светлые текст, номер, линии. Изображения не перекрашиваются.
   ========================================================================== */
.case {
  --case-surface: var(--c-case);
  --case-ink: var(--c-ink);
  --case-accent: var(--c-navy);
  --case-line: var(--c-steel);
  --case-mark: var(--c-navy-line);
  --case-plate: var(--c-navy-line);
  --case-plate-ink: var(--c-paper);
  position: relative;
  background: var(--case-surface);
  color: var(--case-ink);
  clip-path: polygon(0 0, var(--n1, 326.7px) 0, var(--n2, 420px) var(--nh, 71.6px), 100% var(--nh, 71.6px), 100% 100%, 0 100%);
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
.case[data-state="solution"] {
  --case-surface: var(--c-navy-line);
  --case-ink: var(--c-paper);
  --case-accent: var(--c-paper);
  --case-line: color-mix(in srgb, var(--c-paper) 45%, transparent);
  --case-mark: color-mix(in srgb, var(--c-paper) 75%, transparent);
  --case-plate: var(--c-paper);
  --case-plate-ink: var(--c-navy-line);
}
.case__shape { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.case__shape path { fill: none; stroke: var(--case-line); stroke-width: var(--line); transition: stroke var(--t-slow) var(--ease); }
.case__count { margin: 0; font-size: var(--fs-service); line-height: 1; }
.case__num { margin: 0; }
/* номер и его уголки: уголки внутри блока номера, отступы — от фактических границ текста
   (в em от кегля, эталон — «01» из макета), поэтому широкие 02 и 03 не заезжают под линию */
.case__num-box {
  position: relative;
  display: inline-block;
  font-family: var(--f-display);
  font-size: var(--fs-case-num);
  line-height: 1;
}
.case__num-text { color: var(--case-accent); transition: color var(--t-slow) var(--ease); }
.case__num .k-bracket {
  position: absolute;
  width: 28.5px; height: 13.5px;
  border-color: var(--case-mark);
  transition: border-color var(--t-slow) var(--ease);
}
.case__num .k-bracket--tl { left: -.061em; top: calc(.2195em - .1036em); }
.case__num .k-bracket--br { right: -.105em; top: .9195em; }
/* название проекта — наклонная плашка; в «Решении» цвета меняются местами */
.case__project { margin: 0; }
.case__project span {
  display: inline-block;
  padding: 9px 28px 9px 30px;
  background: var(--case-plate);
  color: var(--case-plate-ink);
  font-size: var(--fs-body);
  line-height: 25px;
  text-transform: uppercase;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
.case__label { margin: 0; font-size: var(--fs-service); line-height: 1; text-transform: uppercase; }
.case__label-solution,
.case[data-state="solution"] .case__label-task { display: none; }
.case[data-state="solution"] .case__label-solution { display: inline; }
.case__label::after {
  content: "";
  display: inline-block;
  width: 128px;
  height: var(--line);
  margin-left: 30px;
  vertical-align: middle;
  background: var(--case-mark);
}
/* тексты: видно только текущее состояние (задача — абзац, решение — список),
   плашка результата идёт сразу под ним */
.case__texts { position: relative; }
.case__text { margin: 0; font-size: var(--fs-body); line-height: 21px; }
.case[data-state="task"] .case__text--solution,
.case[data-state="solution"] .case__text--task { display: none; }
.case__text { animation: k-appear 240ms var(--ease) both; }
.case__text--solution { padding: 0; list-style: none; }
.case__text--solution li { position: relative; padding-left: 22px; }
.case__text--solution li + li { margin-top: 8px; }
/* маркер пункта — короткий штрих фирменного акцента */
.case__text--solution li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 12px; height: var(--line);
  background: var(--case-accent);
}

/* Плашка результата: тонкий контур и акцентная полоса слева, подпись «Результат»,
   выразительная основная строка (Furore); метка — маленький контурный ярлык.
   Цвета — от состояния карточки (синие на светлом, светлые на синем). */
.case__result {
  position: relative;
  margin-top: 20px;
  padding: 12px 18px 14px 20px;
  border: var(--line) solid color-mix(in srgb, var(--case-accent) 55%, transparent);
  box-shadow: inset 3px 0 0 var(--case-accent);
  color: var(--case-accent);
  transition: color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
.case__result-label {
  margin: 0 0 8px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--case-ink) 70%, transparent);
}
.case__result-main {
  margin: 0;
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1.12;
  text-transform: uppercase;
}
.case__result-main + .case__result-main { margin-top: 6px; }
.case__result .nowrap { white-space: nowrap; }
/* короткая человеческая подпись к результату — мельче и тише показателя */
.case__result-note {
  margin: 8px 0 0;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--case-ink) 72%, transparent);
  transition: color var(--t-slow) var(--ease);
}
/* у метки «Голос → объявление» — рядом с ней */
.case__result-tag + .case__result-note { display: inline-block; margin: 10px 0 0 12px; vertical-align: middle; }
.case__result-tag {
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 10px;
  border: var(--line) solid currentColor;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* лишнее содержимое высокой карточки прокручивается внутри неё (js/cases.js) */
.case > *:not(.case__shape) { transform: translateY(calc(-1 * var(--read, 0px))); }
.case__media {
  margin: 0;
  position: relative;
  background: color-mix(in srgb, var(--c-navy) 6%, var(--c-paper));
  outline: var(--line) solid rgb(0 0 0 / .2);
  outline-offset: -1px;
}
.case__media > div { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; transition: opacity var(--t-slow) var(--ease); }
/* декоративные уголки области изображения (верхний правый, нижний левый): размер, толщина
   и цвет — как у уголков номера (--case-mark: синий в «Задаче», светлый в «Решении»);
   привязаны к контейнеру и стоят снаружи на одинаковом отступе, клики не перехватывают */
.case__media-corner {
  position: absolute;
  width: 28.5px; height: 13.5px;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--case-mark);
  stroke-width: var(--line);
  transition: stroke var(--t-slow) var(--ease);
}
.case__media-corner--tr { top: -9px; right: -9px; }
.case__media-corner--bl { bottom: -9px; left: -9px; }
.case__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case__media-solution { opacity: 0; }
.case[data-state="solution"] .case__media.has-solution .case__media-solution { opacity: 1; }
.case[data-state="solution"] .case__media.has-solution .case__media-task { opacity: 0; }
.case__placeholder { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--c-steel); }
/* кнопки листания: стрелка — файл assets/img/arrow.svg маской (вектор, цвет от состояния кейса);
   обычное — прозрачная кнопка с тонкой обводкой; наведение и фокус — инверсия; нажатие — короткое сжатие */
.case__arrows { display: flex; gap: 8px; }
.case__arrow-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 30px;
  padding: 0;
  border: var(--line) solid var(--case-accent);
  background: transparent;
  color: var(--case-accent);
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 120ms var(--ease);
}
.case__arrow {
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/arrow.svg") center / contain no-repeat;
  mask: url("../assets/img/arrow.svg") center / contain no-repeat;
}
.case__arrow--prev { transform: rotate(90deg); }
.case__arrow--next { transform: rotate(-90deg); }
.case__arrow-btn:not(:disabled):hover,
.case__arrow-btn:not(:disabled):focus-visible { background: var(--case-accent); color: var(--case-surface); }
.case__arrow-btn:focus-visible { outline: 1px dashed var(--case-accent); outline-offset: 3px; }
.case__arrow-btn:not(:disabled):active { transform: scale(.92); }
/* листать пока нечего — понятное неактивное состояние */
.case__arrow-btn:disabled { border-style: dashed; opacity: .45; cursor: not-allowed; }

/* переключатели: выбранный — синяя плашка, второй — контур */
.case-tab {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-display);
  font-size: var(--fs-case-tab);
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-navy);
  cursor: pointer;
}
.case-tab > span { position: relative; }
.case-tab__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.case-tab__shape path {
  fill: color-mix(in srgb, var(--c-navy-line) 3%, var(--c-paper));
  stroke: var(--c-steel);
  stroke-width: var(--line);
  vector-effect: non-scaling-stroke;
  transition: fill var(--t-fast) var(--ease), stroke var(--t-fast) var(--ease);
}
.case-tab[aria-pressed="true"] { color: var(--c-paper); }
.case-tab[aria-pressed="true"] .case-tab__shape path { fill: var(--c-navy-line); stroke: var(--c-navy-line); }
.case-tab:hover .case-tab__shape path { stroke: var(--c-navy); }
.case-tab:focus-visible { outline: 1px dashed var(--c-navy); outline-offset: 4px; }
.case[data-state="solution"] .case__tabs .case-tab[aria-pressed="false"] { color: var(--c-paper); }
.case[data-state="solution"] .case__tabs .case-tab[aria-pressed="false"] .case-tab__shape path { fill: transparent; stroke: var(--case-line); }
.case[data-state="solution"] .case__tabs .case-tab[aria-pressed="true"] { color: var(--c-navy); }
.case[data-state="solution"] .case__tabs .case-tab[aria-pressed="true"] .case-tab__shape path { fill: var(--c-paper); stroke: var(--c-paper); }
/* источник кейсов: без JavaScript — обычный читаемый текст (его видят и поисковики),
   после сборки карточек (js/cases.js ставит .is-built) скрыт */
.cases.is-built .case-source { display: none; }
.case-source { margin: 0; padding: 24px 16px; list-style: none; }
.case-source > li + li { margin-top: 28px; }
.case-source > li::before { content: attr(data-num) " · " attr(data-title); display: block; margin-bottom: 8px; font-family: var(--f-display); font-size: 22px; color: var(--c-navy); }
.case-source [data-part="result"] { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--c-navy); }
/* заголовок раздела для поисковиков и экранных читалок; визуально раздел начинается с карточек */
.cases-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* --- Компьютер: закреплённая стопка --------------------------------------- */
.cases { position: relative; }
.is-desk .cases-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* Масштаб — через zoom, а не transform: scale(). Трансформация растягивает уже
   отрисованный слой (текст и линии мылятся), zoom раскладывает блок заново в
   нужном размере — шрифты и векторные рамки остаются резкими на любой плотности. */
.is-desk .cases-stage {
  position: absolute;
  left: 0;
  top: var(--cases-oy, 0px);
  width: 1440px;
  height: 600px;
  zoom: var(--s, 1);
}
.is-desk .cases-panel { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.is-desk .cases-panel > * { pointer-events: auto; }
.is-desk .case-tab--task { position: absolute; left: 359.7px; top: 31px; width: 404.6px; height: 59px; }
.is-desk .case-tab--solution { position: absolute; left: 714px; top: 32px; width: 435.6px; height: 59px; }
.is-desk .cases-panel__handle { position: absolute; left: 1291px; top: 57px; }
.is-desk .cases-stack { position: absolute; inset: 0; }
.is-desk .case { position: absolute; left: 14px; top: 0; width: 1410px; height: 480px; }
.is-desk .case > * { position: absolute; }
.is-desk .case__count { left: 56px; top: 33.7px; }
.is-desk .case__num { left: 64px; top: calc(111px - 0.2195 * var(--fs-case-num)); }
.is-desk .case__project { left: 26px; top: 238px; }
.is-desk .case__label { left: 56px; top: 315px; }
.is-desk .case__texts { left: 56px; top: 360px; width: 670px; }
.is-desk .case__media { left: 781px; top: 101px; width: 567px; height: 325px; }
.is-desk .case__arrows { left: 1016.5px; top: 438px; }
.is-desk .case__tabs { display: none; }

/* --- Узкие экраны и «уменьшение движения»: список карточек --------------- */
html:not(.is-desk) .cases { padding: 32px 16px 64px; }
html:not(.is-desk) .cases-panel { display: none; }
html:not(.is-desk) .cases-stack { display: grid; gap: 28px; max-width: 760px; margin: 0 auto; }
html:not(.is-desk) .case { display: grid; gap: 16px; padding: 64px 20px 24px; }
html:not(.is-desk) .case__count { position: absolute; left: 20px; top: 14px; font-size: 14px; }
html:not(.is-desk) .case__num { padding: 10px 0 14px 8px; }
html:not(.is-desk) .case__num-box { font-size: clamp(64px, 20vw, 110px); }
html:not(.is-desk) .case__project { justify-self: start; margin-left: -6px; }
html:not(.is-desk) .case__project span { font-size: 14px; line-height: 20px; padding: 7px 20px 7px 22px; }
html:not(.is-desk) .case__label { font-size: 16px; }
html:not(.is-desk) .case__label::after { width: 72px; margin-left: 16px; }
html:not(.is-desk) .case__text { font-size: 16px; line-height: 1.35; }
html:not(.is-desk) .case__text--solution li::before { top: 11px; }
html:not(.is-desk) .case__result { margin-top: 14px; padding: 10px 12px 12px 16px; }
html:not(.is-desk) .case__result-main { font-size: clamp(17px, 5vw, 24px); }
html:not(.is-desk) .case__result-tag { font-size: 12px; }
html:not(.is-desk) .case__media { aspect-ratio: 567 / 325; }
html:not(.is-desk) .case__arrows { justify-self: center; }
html:not(.is-desk) .case__tabs { display: flex; gap: 8px; }
html:not(.is-desk) .case__tabs .case-tab { flex: 1; height: 48px; font-size: clamp(18px, 5.4vw, 26px); }

/* --- Телефон: стопка кейсов (html.is-mob, js/cases.js) ----------------------
   Блок закреплён в размер окна (--svh — «малая» высота, при показанной панели
   браузера). Одна общая панель «Задача / Решение» встроена в верхнюю часть рамки
   стопки; карточки одной высоты; верх и --read (прокрутка содержимого внутри
   высокой карточки) задаёт скрипт. Отдельных переключателей у карточек нет. */
/* без пустоты под последней услугой: блок кейсов наезжает на пустую часть сцены услуг (--mob-tail) */
html.is-mob .cases { padding: 0; margin-top: calc(-1 * var(--mob-tail, 0px)); }
html.is-mob .cases-pin { position: sticky; top: 0; height: var(--svh, 100vh); overflow: hidden; }
html.is-mob .cases-stage { position: relative; height: 100%; }
/* общая панель — в верхней части рамки, как на компьютере: над срезом карточки, правее
   диагонали (срез — 0.32…0.42 ширины карточки, высота 44px), ниже кнопки меню. Видимая
   наклонная плашка — 30px, область нажатия — вся высота 44px. */
html.is-mob .cases-panel {
  display: flex;
  position: absolute;
  z-index: 10;
  top: 68px;
  left: calc(8px + (100% - 16px) * .42 + 2px);
  right: 12px;
  height: 44px;
}
html.is-mob .cases-panel .case-tab { position: relative; flex: 1; height: 44px; font-size: clamp(13px, 3.8vw, 17px); }
html.is-mob .cases-panel .case-tab__shape { top: 7px; height: calc(100% - 14px); }
html.is-mob .cases-panel .case-tab--solution { margin-left: -10px; }
html.is-mob .cases-panel__handle { display: none; }
html.is-mob .cases-stack { position: absolute; inset: 0; display: block; max-width: none; margin: 0; }
html.is-mob .case { position: absolute; left: 8px; right: 8px; top: 0; overflow: hidden; align-content: start; gap: 10px; padding: 52px 16px 16px; }
html.is-mob .case__num { padding: 6px 0 6px 8px; }
html.is-mob .case__num-box { font-size: clamp(56px, 16vw, 90px); }
html.is-mob .case__tabs { display: none; }

/* ==========================================================================
   Обо мне — самостоятельная прямоугольная стеклянная панель поверх кейсов
   (js/cases.js продлевает закрепление кейсов на высоту окна, панель въезжает
   снизу обычной прокруткой). Во всю ширину, ровный верх со светлой кромкой и тенью;
   размывается только фон за панелью — текст и линии резкие.
   ========================================================================== */
.about { position: relative; z-index: 30; }
.about-panel {
  position: relative;
  color: var(--c-ink);
  background: var(--c-about-glass);
  -webkit-backdrop-filter: blur(var(--blur-about));
  backdrop-filter: blur(var(--blur-about));
  /* во всю ширину: только верхняя светлая кромка и тень вверх, низ упирается в блок связи */
  border-top: var(--line) solid rgb(255 255 255 / .75);
  box-shadow: 0 calc(-1 * var(--line)) 0 color-mix(in srgb, var(--c-steel) 25%, transparent),
              0 -18px 48px rgb(14 39 53 / .10);
}
.about-panel .k-bracket { border-color: var(--c-navy-line); }

/* карточка с буквой «Я»: простой синий прямоугольник */
.about-card {
  position: relative;
  margin: 0;
  background: var(--c-navy);
  border-radius: calc(var(--r-glass) / 2);
}
.about-card__letter {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-size: var(--fs-about-letter);
  line-height: 1;
  color: var(--c-paper);
}
/* техническая подпись у карточки «Я» — как подписи активной цифры часов:
   Roboto Mono, приглушённый цвет, короткая голубая линия */
.about-egg {
  display: grid;
  gap: 2px;
  margin: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--c-dial-tech);
}
.about-egg::after {
  content: "";
  width: 37px;
  height: var(--line);
  margin-top: 5px;
  background: var(--c-cyan);
  opacity: .7;
}
.about-card .k-bracket { border-color: color-mix(in srgb, var(--c-paper) 70%, transparent); }

.about-text__handle { margin: 0; }
.about-text__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-ink);
}
.about-text__p { margin: 0; font-size: var(--fs-service); line-height: 1.45; }
.about-text__p + .about-text__p { margin-top: 22px; }
/* «автоматизация» — на синей наклонной плашке, как акцентные слова заголовка */
.about-accent {
  display: inline-block;
  padding: 0 .45em 0 .4em;
  background: var(--c-navy);
  color: var(--c-paper);
  clip-path: polygon(.25em 0, 100% 0, calc(100% - .25em) 100%, 0 100%);
}

/* --- Компьютер: панель въезжает поверх закреплённых кейсов --------------- */
.is-desk .about { margin-top: -100vh; height: calc(640px * var(--s, 1)); }   /* дальше сразу идёт блок связи */
.is-desk .about-stage { position: relative; width: 1440px; height: 660px; zoom: var(--s, 1); }
/* на всю ширину и высоту секции: без боковых полей и без зазора перед блоком связи */
.is-desk .about-panel { position: absolute; left: 0; top: 0; width: 1440px; height: 640px; }
.is-desk .about-panel > * { position: absolute; }
.is-desk .about-panel__tl { left: 38px; top: 24px; }
.is-desk .about-panel__br { right: 42px; bottom: 28px; }
.is-desk .about-card { left: 70px; top: 80px; width: 400px; height: 440px; }
.is-desk .about-egg { left: 70px; top: 536px; }
.is-desk .about-card > * { position: absolute; }
.is-desk .about-card__tl { left: 18px; top: 18px; }
.is-desk .about-card__br { right: 18px; bottom: 18px; }
.is-desk .about-text { left: 534px; top: 96px; width: 780px; }
.is-desk .about-text__handle { margin-bottom: 26px; }
.is-desk .about-text__title { margin-bottom: 48px; }

/* --- Узкие экраны: карточка «Я» над текстом ------------------------------ */
html:not(.is-desk) .about { padding: 0; }
html:not(.is-desk) .about-panel { display: grid; gap: 28px; padding: 32px 36px 48px; }
html:not(.is-desk) .about-panel .k-bracket { position: absolute; }
html:not(.is-desk) .about-panel__tl { left: 10px; top: 10px; }
html:not(.is-desk) .about-panel__br { right: 12px; bottom: 12px; }
html:not(.is-desk) .about-card { width: 100%; max-width: 360px; aspect-ratio: 400 / 440; }
html:not(.is-desk) .about-card { --fs-about-letter: clamp(160px, 55vw, 300px); }
html:not(.is-desk) .about-egg { margin-top: -14px; }
html:not(.is-desk) .about-card .k-bracket { position: absolute; }
html:not(.is-desk) .about-card__tl { left: 14px; top: 14px; }
html:not(.is-desk) .about-card__br { right: 14px; bottom: 14px; }
/* телефон: «Обо мне» поднимается поверх закреплённых кейсов (их блок продлён на высоту
   окна) — сквозь стекло видны и размываются карточки; общая панель кейсов остаётся под ним */
html.is-mob .about { margin-top: calc(-1 * var(--svh, 100vh)); }
html.is-mob .about-panel { --blur-about: 8px; }
html:not(.is-desk) .about-text__handle { font-size: 16px; margin-bottom: 14px; }
html:not(.is-desk) .about-text__title { font-size: clamp(36px, 11vw, 64px); margin-bottom: 24px; }
html:not(.is-desk) .about-text__p { font-size: 16px; }

/* ==========================================================================
   Связь и подвал — одна сплошная тёмно-синяя секция на всю ширину страницы:
   без внешних полей, скруглений и светлого промежутка; внутри — тонкая
   светлая линия перед подвалом. Размеры — px макета; на компьютере — zoom.
   Контент и подвал выровнены по одной сетке (отступ слева 110 = 14 + 96).
   ========================================================================== */
.contact,
.site-footer { position: relative; z-index: 30; background: var(--c-navy); color: var(--c-paper); }
.contact-panel { position: relative; }
.contact-panel .k-bracket,
.site-footer .k-bracket { position: absolute; border-color: color-mix(in srgb, var(--c-paper) 55%, transparent); }
.contact-title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-contact);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--c-paper);
}
.contact-text {
  margin: 0;
  font-size: var(--fs-service);
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-paper) 82%, var(--c-navy));
}

/* светлая кнопка со стрелкой (иконка assets/img/arrow.svg, повёрнута вправо) */
.k-btn--light { background-color: var(--c-paper); color: var(--c-navy); gap: 18px; }
.k-btn--light:hover { background-color: #fff; }
.k-btn--light:active { filter: brightness(.93); }
.k-btn--light:focus-visible::after { border-color: var(--c-navy); }
.contact-btn { outline: none; }
.contact-btn:focus-visible { box-shadow: 0 0 0 2px var(--c-navy), 0 0 0 4px var(--c-paper); }
.contact-btn__arrow {
  width: 22px; height: 22px;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/arrow.svg") center / contain no-repeat;
  mask: url("../assets/img/arrow.svg") center / contain no-repeat;
  transform: rotate(-90deg);
  transition: transform 180ms var(--ease);
}
.contact-btn:hover .contact-btn__arrow { transform: rotate(-90deg) translateY(4px); }
.contact-btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.contact-btn[aria-disabled="true"]:hover { background-color: var(--c-paper); }
.contact-btn[aria-disabled="true"]:hover .contact-btn__arrow { transform: rotate(-90deg); }

/* подвал: светлые подписи на том же синем, тонкая полупрозрачная линия сверху */
.site-footer { font-size: var(--fs-micro); letter-spacing: .04em; }
.site-footer__stage {
  position: relative;
  color: color-mix(in srgb, var(--c-paper) 78%, var(--c-navy));
}
.site-footer__row { display: flex; justify-content: space-between; gap: 16px; }
/* соцсети: значки в квадратных кнопках 44×44 с тонкой светлой рамкой (технический стиль);
   наведение — светлая заливка и синий значок, фокус — пунктир */
.site-footer__social { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 22px; }
/* звёздочка у Instagram — внутри квадрата значка, в правом верхнем углу (отдельная ссылка на сноску) */
.social-item, .menu-social__item { position: relative; display: inline-flex; }
.social-link {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--c-paper);
  border: var(--line) solid color-mix(in srgb, var(--c-paper) 40%, transparent);
  outline: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.social-link svg { width: 22px; height: 22px; overflow: visible; }
.social-link:hover { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-navy); }
.social-link:active { filter: brightness(.92); }
.social-item .meta-mark,
.menu-social__item .meta-mark {
  position: absolute;
  top: 3px; right: 5px;
  margin: 0;
  font-size: 13px;
  line-height: 1;
  pointer-events: auto;
}
.social-item .meta-mark { color: var(--c-paper); }
.social-link:hover + .meta-mark { color: var(--c-navy); }
.social-link:focus-visible,
.site-footer .meta-mark:focus-visible { outline: 1px dashed var(--c-paper); outline-offset: 4px; }
.site-footer__note {
  margin: 20px 0 0;
  max-width: 760px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--c-paper) 70%, var(--c-navy));
}
.site-footer__note:focus { outline: none; }
.site-footer__note:target { color: var(--c-paper); }

/* звёздочка у Instagram и Facebook — ссылка на сноску в подвале */
.meta-mark {
  margin-left: 1px;
  color: inherit;
  text-decoration: none;
  outline: none;
}
.meta-mark:hover { text-decoration: underline; }
.meta-mark:focus-visible { outline: 1px dashed currentColor; outline-offset: 2px; }
.site-footer__stage::before {
  content: "";
  position: absolute;
  top: 0;
  height: var(--line);
  background: color-mix(in srgb, var(--c-paper) 22%, transparent);
}

/* --- Компьютер ------------------------------------------------------------- */
.is-desk .contact-stage { width: 1440px; zoom: var(--s, 1); }
.is-desk .contact-panel { padding: 112px 110px 104px; }
.is-desk .contact-panel__tl { left: 24px; top: 24px; }
.is-desk .contact-title { max-width: 1120px; }
.is-desk .contact-text { max-width: 720px; margin-top: 36px; }
.is-desk .contact-btn { margin-top: 52px; padding: 0 56px; font-size: 28px; }
.is-desk .site-footer__stage { width: 1440px; zoom: var(--s, 1); padding: 26px 110px 40px; }
.is-desk .site-footer__stage::before { left: 110px; right: 110px; }
.is-desk .site-footer__br { right: 24px; bottom: 24px; }

/* --- Узкие экраны ------------------------------------------------------------ */
html:not(.is-desk) .contact-panel { padding: 64px 22px 48px; }
html:not(.is-desk) .contact-panel__tl { left: 10px; top: 10px; }
html:not(.is-desk) .contact-title { font-size: clamp(20px, 5.8vw, 56px); }
html:not(.is-desk) .contact-text { margin-top: 20px; font-size: 16px; }
html:not(.is-desk) .contact-btn { --k-h: 52px; --k-slant: 10px; gap: 10px; margin-top: 28px; padding: 0 22px; font-size: clamp(15px, 4.2vw, 24px); max-width: 100%; }
html:not(.is-desk) .contact-btn__arrow { width: 16px; height: 16px; flex: none; }
html:not(.is-desk) .site-footer__stage { padding: 20px 22px 96px; text-align: center; }
html:not(.is-desk) .site-footer__row { flex-direction: column; align-items: center; gap: 6px; }
html:not(.is-desk) .site-footer__social { justify-content: center; }
html:not(.is-desk) .site-footer__note { margin-left: auto; margin-right: auto; }
html:not(.is-desk) .site-footer__stage::before { left: 22px; right: 22px; }
html:not(.is-desk) .site-footer__br { right: 10px; bottom: 10px; }

/* --- Вступление (js/intro.js). Место зарезервировано: скрываем через visibility. */
.intro .ht-line,
.intro .ht-plate,
.intro .hero-connector,
.intro .info > * { visibility: hidden; }
.intro .ht-ch.is-on { visibility: visible; }
.intro .hero-connector polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ==========================================================================
   Навигация. Развёрнутая — в шапке первого экрана (Roboto Mono). Компактная — закреплённая
   кнопка справа сверху (≥ 44×44) с панелью разделов; html.is-nav-compact ставит js/home.js:
   на компьютере со второго блока, на телефоне сразу. Открытие и закрытие — js/nav.js.
   ========================================================================== */
.site-nav { display: flex; align-items: center; gap: 44px; }
.site-nav__link {
  position: relative;
  padding: 6px 0;
  font-family: var(--f-mono);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink);
  outline: none;
  transition: color 180ms var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--line);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.site-nav__link:hover { color: var(--c-navy); }
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { transform: none; }
.site-nav__link:focus-visible { color: var(--c-navy); outline: 1px dashed var(--c-navy); outline-offset: 6px; }
/* компактный режим на компьютере: шапка (уже погасшая) не ловит клики и фокус */
.is-desk.is-nav-compact .site-header { visibility: hidden; }

.menu {
  position: fixed;
  z-index: 100;                       /* выше всех слоёв сцены, кейсов и блока связи */
  top: calc(28px * var(--s, 1));
  right: calc(40px * var(--s, 1));
  visibility: hidden;
  opacity: 0;
  transform: scale(.7);
  transform-origin: 100% 0;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms;
}
.is-nav-compact .menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s;
}
html:not(.is-desk) .menu { top: 20px; right: 16px; }

/* кнопка: синяя с тонкой светлой обводкой — заметна и на светлом, и на синем фоне */
.menu-btn {
  position: relative;
  display: block;
  width: 52px; height: 52px;
  padding: 0;
  border: var(--line) solid color-mix(in srgb, var(--c-paper) 60%, transparent);
  background: var(--c-navy);
  color: var(--c-paper);
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(14 39 53 / .18);
  outline: none;
  transition: background-color 180ms var(--ease);
}
html:not(.is-desk) .menu-btn { width: 44px; height: 44px; }
.menu-btn:hover { background: var(--c-steel-blue); }
.menu-btn:focus-visible { box-shadow: 0 0 0 2px var(--c-paper), 0 0 0 4px var(--c-navy); }
.menu-btn__bar {
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 2px;
  margin: -1px 0 0 -11px;
  background: currentColor;
  transition: transform 240ms var(--ease), opacity 160ms var(--ease);
}
.menu-btn__bar:nth-child(1) { transform: translateY(-7px); }
.menu-btn__bar:nth-child(3) { transform: translateY(7px); }
/* открыто: три полоски → крестик */
.menu.is-open .menu-btn__bar:nth-child(1) { transform: rotate(45deg); }
.menu.is-open .menu-btn__bar:nth-child(2) { opacity: 0; }
.menu.is-open .menu-btn__bar:nth-child(3) { transform: rotate(-45deg); }

/* панель: простой прямоугольник, светлое стекло с умеренным размытием, тонкая рамка.
   Закрытая — visibility: hidden, поэтому её ссылки не получают фокус. */
.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 232px;
  padding: 8px 0;
  background: color-mix(in srgb, var(--c-paper) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: var(--line) solid color-mix(in srgb, var(--c-navy-line) 45%, transparent);
  box-shadow: 0 14px 36px rgb(14 39 53 / .2);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms;
}
.menu.is-open .menu-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s;
}
.menu-panel__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px;
  font-family: var(--f-mono);
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-navy);
  outline: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.menu-panel__link:hover { background: var(--c-navy); color: var(--c-paper); }
.menu-panel__link:focus-visible { background: color-mix(in srgb, var(--c-navy) 10%, transparent); box-shadow: inset 2px 0 0 var(--c-navy); }

/* соцсети под пунктами — продолжение панели: тонкая линия-разделитель, квадратные значки
   с синим контуром; наведение — синяя заливка, фокус — пунктир */
.menu-social {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 24px 8px;
  padding-top: 14px;
  border-top: var(--line) solid color-mix(in srgb, var(--c-navy-line) 25%, transparent);
}
.menu-social__link {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--c-navy);
  border: var(--line) solid color-mix(in srgb, var(--c-navy-line) 45%, transparent);
  outline: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.menu-social__link svg,
.chat-link svg,
.chat-btn svg,
.chat-panel__close svg { width: 22px; height: 22px; }
.menu-social__link:hover { background: var(--c-navy); color: var(--c-paper); }
.menu-social__link:focus-visible { outline: 1px dashed var(--c-navy); outline-offset: 3px; }
.menu-social__item .meta-mark { color: var(--c-navy); }
.menu-social__link:hover + .meta-mark { color: var(--c-paper); }

/* ==========================================================================
   Окно связи (js/chat.js). Закреплённая кнопка справа снизу — синяя с тонкой
   светлой рамкой и тенью: читается и на светлом, и на синем фоне; учитывает
   безопасную область телефона. Панель — светлое стекло с размытием над кнопкой
   (на телефоне — во всю ширину), простой прямоугольник с тонкой рамкой.
   ========================================================================== */
.chat {
  --chat-gap: 16px;
  position: fixed;
  z-index: 110;
  right: calc(var(--chat-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--chat-gap) + env(safe-area-inset-bottom, 0px));
}
.is-desk .chat { --chat-gap: 24px; }
.chat-btn {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  padding: 0;
  color: var(--c-paper);
  background: var(--c-navy);
  border: var(--line) solid color-mix(in srgb, var(--c-paper) 60%, transparent);
  box-shadow: 0 8px 22px rgb(14 39 53 / .22);
  cursor: pointer;
  outline: none;
  transition: background-color 180ms var(--ease), transform 120ms var(--ease);
}
.chat-btn svg { width: 26px; height: 26px; }
.chat-btn:hover { background: var(--c-steel-blue); }
.chat-btn:active { transform: scale(.95); }
.chat-btn:focus-visible { box-shadow: 0 0 0 2px var(--c-paper), 0 0 0 4px var(--c-navy); }
/* уступает место кнопкам первого экрана, пока они проходят под ней (js/chat.js) */
.chat-btn { transition: background-color 180ms var(--ease), transform 120ms var(--ease), opacity 200ms var(--ease), visibility 0s; }
.chat.is-yield .chat-btn { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms; }

/* попап поверх экрана: затемнение с размытием и окно по центру (на телефоне — почти во весь экран) */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 220ms var(--ease), visibility 0s linear 220ms;
}
.contact-modal.is-open { visibility: visible; opacity: 1; transition: opacity 220ms var(--ease), visibility 0s; }
.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c-ink) 42%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* пока окно открыто, страница под ним не прокручивается */
html.is-modal-open { overflow: hidden; }
.chat-panel {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--c-navy);
  background: color-mix(in srgb, var(--c-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: var(--line) solid color-mix(in srgb, var(--c-navy-line) 45%, transparent);
  box-shadow: 0 30px 80px rgb(14 39 53 / .32);
  outline: none;
  transform: translateY(12px) scale(.98);
  transition: transform 240ms var(--ease);
}
.contact-modal.is-open .chat-panel { transform: none; }
html:not(.is-desk) .contact-modal { padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
html:not(.is-desk) .chat-panel { max-height: calc(100svh - 24px); }
.chat-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 16px 32px;
  border-bottom: var(--line) solid color-mix(in srgb, var(--c-navy-line) 25%, transparent);
}
.chat-panel__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1;
  text-transform: uppercase;
}
.chat-panel__close {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  color: var(--c-navy);
  background: none;
  border: var(--line) solid transparent;
  cursor: pointer;
  outline: none;
}
.chat-panel__close:hover { border-color: color-mix(in srgb, var(--c-navy-line) 45%, transparent); }
.chat-panel__close:focus-visible { outline: 1px dashed var(--c-navy); outline-offset: 2px; }
.chat-panel__body { padding: 24px 32px 8px; }
.chat-panel__label {
  margin: 0 0 10px;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-ink) 70%, transparent);
}
.chat-panel__label + * + .chat-panel__label,
.chat-links + .chat-panel__label { margin-top: 28px; }
.chat-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chat-link-wrap { position: relative; display: grid; }
.chat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 18px;
  font-family: var(--f-mono);
  font-size: 16px;
  text-decoration: none;
  color: var(--c-navy);
  background: color-mix(in srgb, var(--c-paper) 70%, #fff);
  border: var(--line) solid color-mix(in srgb, var(--c-navy-line) 40%, transparent);
  outline: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.chat-link svg { flex: none; }
.chat-link small { font-size: 11px; letter-spacing: .04em; color: inherit; opacity: .7; }
.chat-link:hover { background: var(--c-navy); color: var(--c-paper); }
.chat-link:focus-visible { outline: 1px dashed var(--c-navy); outline-offset: 2px; }
/* звёздочка у Instagram — отдельная ссылка на сноску внизу окна */
.chat-link__mark { position: absolute; right: 8px; top: 4px; color: var(--c-navy); font-size: 14px; line-height: 1; }
.chat-link-wrap:hover .chat-link__mark { color: var(--c-paper); }
.chat-ai {
  position: relative;
  padding: 18px 20px 20px 22px;
  border: var(--line) dashed color-mix(in srgb, var(--c-navy-line) 50%, transparent);
  box-shadow: inset 3px 0 0 var(--c-steel-blue);
}
.chat-ai p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--c-ink); }
.chat-ai__badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-paper);
  background: var(--c-steel-blue);
}
.chat-panel__note {
  margin: 0;
  padding: 18px 32px 24px;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-ink) 65%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .contact-modal, .chat-panel, .contact-modal.is-open .chat-panel { transition: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-bind].is-in,
  .case__text { animation: none; }
}

/* телефон: окно связи компактнее по отступам, кнопки площадок в один столбец на узких экранах */
html:not(.is-desk) .chat-panel__head { padding: 12px 10px 12px 20px; }
html:not(.is-desk) .chat-panel__body { padding: 18px 20px 6px; }
html:not(.is-desk) .chat-panel__note { padding: 14px 20px 18px; }
@media (max-width: 380px) { .chat-links { grid-template-columns: 1fr; } }

/* --- почта: окно связи, финальный блок, подвал ------------------------------ */
.chat-link--wide { grid-column: 1 / -1; }
.contact-mail { margin: 18px 0 0; font-size: 15px; color: color-mix(in srgb, var(--c-paper) 82%, transparent); }
.contact-mail a { color: var(--c-paper); text-underline-offset: 3px; }
.contact-mail a:focus-visible { outline: 1px dashed var(--c-paper); outline-offset: 3px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 20px 0 0; font-size: 13px; }
.site-footer__links a,
.site-footer__links button {
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--c-paper);
  background: none;
  border: 0;
  border-bottom: var(--line) solid color-mix(in srgb, var(--c-paper) 35%, transparent);
  text-decoration: none;
  cursor: pointer;
}
.site-footer__links a:hover,
.site-footer__links button:hover { border-bottom-color: var(--c-paper); }
.site-footer__links a:focus-visible,
.site-footer__links button:focus-visible { outline: 1px dashed var(--c-paper); outline-offset: 3px; }
html:not(.is-desk) .site-footer__links { justify-content: center; }

/* --- уведомление о cookies (js/analytics.js): внизу слева, не перекрывает кнопку чата --- */
.cookie-banner {
  position: fixed;
  z-index: 115;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 32px - 72px));
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-ink);
  background: color-mix(in srgb, var(--c-paper) 94%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: var(--line) solid color-mix(in srgb, var(--c-navy-line) 45%, transparent);
  box-shadow: 0 14px 36px rgb(14 39 53 / .22);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; }
.cookie-banner a { color: var(--c-navy); text-underline-offset: 3px; }
.cookie-banner__actions { display: flex; gap: 10px; margin-top: 12px; }
.cookie-btn {
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-paper);
  background: var(--c-navy);
  border: var(--line) solid var(--c-navy);
  cursor: pointer;
}
.cookie-btn--ghost { color: var(--c-navy); background: transparent; }
.cookie-btn:hover { background: var(--c-steel-blue); border-color: var(--c-steel-blue); color: var(--c-paper); }
.cookie-btn:focus-visible, .cookie-banner a:focus-visible { outline: 1px dashed var(--c-navy); outline-offset: 3px; }
html:not(.is-desk) .cookie-banner { left: 12px; width: calc(100vw - 24px - 68px); padding: 14px; font-size: 13px; }
html:not(.is-desk) .cookie-btn { flex: 1; padding: 0 10px; }