/* Токены: значения и их смысл описаны в DESIGN.md */
:root {
  /* тёмно-серая тема (решение Дарьи 26.10), фон светлее с 31.10 по макету: #212121, светлый текст, нейтральные серые без оттенка */
  color-scheme: dark;
  --bg: #212121;
  --ink: #ededed;
  --ink-soft: #d4d4d4;
  --muted: #a1a1a1;
  --faint: #737373;
  --line: #2e2e2e;
  --line-strong: #3a3a3a;
  /* поверхность чуть светлее фона: плашки кейса, кнопки, стрелки */
  --card: #2c2c2c;
  --subtle: #262626;
  --btn-hover: #333333;
  /* карточка кейса с обложкой остаётся белой: обложка нарисована на белом фоне; внутри свой тёмный текст */
  --case-card: #ffffff;
  --case-ink: #18181b;
  --case-muted: #71717a;
  --case-line: #dbdbde;
  /* белое поверх скриншотов и фото: шторка до/после, ручка, рамка фото; и тёмное на нём */
  --on-image: #ffffff;
  --on-image-ink: #18181b;
  --placeholder: #2a2a2a;
  --placeholder-2: #333333;
  --video-stub: #000000;
  --ink-10: rgba(0, 0, 0, 0.12);
  --note: #ffd84d;
  --status: #22c55e;
  --cursor-bg: rgba(23, 23, 23, 0.62);
  --pad: 80px;
  --header-h: 68px;
  /* тёмное стекло нижней навигации и кнопки «Наверх» (Дарья 01.11: «чёрная с блюром, как была») */
  --pill-bg: rgba(23, 23, 23, 0.72);
  /* тень нижней плашки контактов, чтобы стекло отделялось от фона и скриншотов */
  --bar-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  /* тени и обводки: значения из DESIGN.md, раздел «Тени» */
  --shadow-photo: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 16px 32px -12px rgba(0, 0, 0, 0.35);
  --shadow-photo-open: 0 24px 48px -16px rgba(0, 0, 0, 0.35);
  --shadow-handle: 0 4px 16px -4px rgba(24, 24, 27, 0.3);
  --shadow-control: 0 2px 12px rgba(24, 24, 27, 0.25);
  --outline-on-image: drop-shadow(0 0 1px rgba(24, 24, 27, 0.35)) drop-shadow(0 0 6px rgba(24, 24, 27, 0.12));
  /* точки первого экрана (цвет hero.dots, #333333: внутри SVG переменную не подставить): к низу мельче и бледнее, ряд через 24 px */
  --hero-dots: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='768' fill='%23333333'><circle cx='12' cy='12' r='1.40' fill-opacity='1.00'/><circle cx='12' cy='36' r='1.37' fill-opacity='0.98'/><circle cx='12' cy='60' r='1.35' fill-opacity='0.96'/><circle cx='12' cy='84' r='1.32' fill-opacity='0.95'/><circle cx='12' cy='108' r='1.29' fill-opacity='0.93'/><circle cx='12' cy='132' r='1.26' fill-opacity='0.91'/><circle cx='12' cy='156' r='1.24' fill-opacity='0.89'/><circle cx='12' cy='180' r='1.21' fill-opacity='0.88'/><circle cx='12' cy='204' r='1.18' fill-opacity='0.86'/><circle cx='12' cy='228' r='1.15' fill-opacity='0.84'/><circle cx='12' cy='252' r='1.13' fill-opacity='0.82'/><circle cx='12' cy='276' r='1.10' fill-opacity='0.80'/><circle cx='12' cy='300' r='1.07' fill-opacity='0.79'/><circle cx='12' cy='324' r='1.04' fill-opacity='0.77'/><circle cx='12' cy='348' r='1.02' fill-opacity='0.75'/><circle cx='12' cy='372' r='0.99' fill-opacity='0.73'/><circle cx='12' cy='396' r='0.96' fill-opacity='0.72'/><circle cx='12' cy='420' r='0.93' fill-opacity='0.70'/><circle cx='12' cy='444' r='0.91' fill-opacity='0.68'/><circle cx='12' cy='468' r='0.88' fill-opacity='0.66'/><circle cx='12' cy='492' r='0.85' fill-opacity='0.65'/><circle cx='12' cy='516' r='0.82' fill-opacity='0.63'/><circle cx='12' cy='540' r='0.80' fill-opacity='0.61'/><circle cx='12' cy='564' r='0.77' fill-opacity='0.59'/><circle cx='12' cy='588' r='0.74' fill-opacity='0.57'/><circle cx='12' cy='612' r='0.71' fill-opacity='0.56'/><circle cx='12' cy='636' r='0.69' fill-opacity='0.54'/><circle cx='12' cy='660' r='0.66' fill-opacity='0.52'/><circle cx='12' cy='684' r='0.63' fill-opacity='0.50'/><circle cx='12' cy='708' r='0.60' fill-opacity='0.49'/><circle cx='12' cy='732' r='0.58' fill-opacity='0.47'/><circle cx='12' cy='756' r='0.55' fill-opacity='0.45'/></svg>");
  /* контейнер 1280 по центру, по бокам не меньше --pad */
  --gutter: max(var(--pad), calc((100% - 1280px) / 2));
  /* колонка контента главной */
  --col: min(800px, 100% - 2 * var(--pad));
  --onest: "Geist", system-ui, sans-serif;
  --accent-font: "Geist", system-ui, sans-serif;
}

* { box-sizing: border-box; }


body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--onest);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* Header */
/* Обычная шапка сверху на всю ширину: стоит в начале страницы и уезжает вместе с ней, не липнет (решение Дарьи 27.10) */
body:has(> .header) { padding-top: var(--header-h); }
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--gutter);
  background: none;
}
/* якоря не прячутся под шапкой */
[id] { scroll-margin-top: 56px; }
.logo { font-size: 16px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.logo-role { color: var(--muted); }
.header-links { display: flex; align-items: center; gap: 24px; font-size: 16px; font-weight: 500; color: var(--ink); }
.header-links a { display: inline-flex; align-items: center; gap: 6px; }
/* иконки Lucide (набор shadcn): обводка 2, скругления round */
.icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header-links a:hover { opacity: 0.6; }

/* Статус «Ищу работу»: зелёная точка, от неё расходится кольцо */
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero-status { padding: 4px 12px; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 500; line-height: 20px; }
.status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--status); }
.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--status);
  animation: status-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes status-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(3); opacity: 0; }
}

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* снизу поле с точками, чтобы сетка не обрывалась сразу под метками */
  padding: 160px var(--pad) 80px;
  text-align: center;
}
.hero + .section { padding-top: 32px; }
/* сетка точек на весь первый экран; за текстом белая подложка (.hero-text::before) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* точки заходят под шапку */
  top: calc(-1 * var(--header-h));
  z-index: -1;
  pointer-events: none;
  /* как сетка в FigJam, но к низу точки мельче и бледнее */
  background: var(--hero-dots) center top / 24px auto repeat-x;
  /* у самого низа растворяются в странице */
  -webkit-mask-image: linear-gradient(#000 80%, transparent);
  mask-image: linear-gradient(#000 80%, transparent);
}
/* белая подложка с мягким краем только за именем, ролью и метками; фото стоит прямо на точках */
/* подложка шире текста, по бокам её обрезает край экрана, а не страница */
.hero { overflow-x: clip; }
.hero-text { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-text::before {
  content: "";
  position: absolute;
  inset: -56px -96px;
  z-index: -1;
  background: radial-gradient(closest-side, var(--bg) 62%, transparent);
  pointer-events: none;
}
/* фото и статус под ним, как в макете 31.10 */
.hero-top { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 24px; }
.hero-photo { position: relative; display: block; width: 112px; height: 112px; border-radius: 50%; cursor: default; outline-offset: 4px; }
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--placeholder);
}
/* стикер «привет!» выпрыгивает при наведении */
.hero-hi {
  position: absolute;
  left: 78%;
  top: -6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-family: var(--accent-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transform-origin: 0 100%;
  transform: scale(0) rotate(-12deg);
  transition: transform 0.25s ease-in;
}
/* фото увеличивается плавно, без пружины (баунс мылил картинку); пружина осталась только у стикера при появлении */
.hero-photo:is(:hover, :focus-visible) .hero-hi { transform: scale(1) rotate(-6deg); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* рука машет, когда стикер выпрыгнул */
.wave { display: inline-block; transform-origin: 70% 70%; }
.hero-photo:is(:hover, :focus-visible) .wave { animation: wave 0.9s ease-in-out 0.3s; }
@keyframes wave { 20%, 60% { rotate: 16deg; } 40%, 80% { rotate: -8deg; } }
/* на тач-экранах наведения нет: стикер выпрыгивает один раз после появления */
@media (hover: none) {
  .hero-hi { animation: hi-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both; }
  .wave { animation: wave 0.9s ease-in-out 1.6s; }
}
@keyframes hi-pop { to { transform: scale(1) rotate(-6deg); } }
.hero-name {
  margin: 0;
  font-family: var(--accent-font);
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
}
.hero-role {
  margin: 24px 0;
  font-family: var(--onest);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 400;
  letter-spacing: -0.01em;
  /* фраза в две строки примерно поровну */
  max-width: 680px;
  margin-inline: auto;
  text-wrap: balance;
}

/* кнопки первого экрана: Telegram тёмная, CV светлая */
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Секции главной: заголовок по центру, колонка 800 */
.section { display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 80px var(--pad); }
.section-title {
  font-family: var(--accent-font);
  font-size: clamp(30px, 2.78vw, 40px);
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.045em;
  text-align: center;
}
.section > :not(.section-title, .gallery) { width: var(--col); }

/* Карточки кейсов (макет 01.11): серая плашка радиус 32, сверху текст с отступом 56, снизу картинка 800×400 из Figma.
   При наведении картинка внутри увеличивается на 3%, плашка стоит на месте */
.cases { display: flex; flex-direction: column; gap: 80px; }
.case { display: flex; flex-direction: column; overflow: hidden; border-radius: 32px; background: var(--card); color: var(--ink); }
.case-info { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 56px; }
.case-meta { font-size: 20px; line-height: 29px; color: var(--muted); }
.case-title { font-family: var(--accent-font); font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -0.04em; text-wrap: balance; }
.case-text { max-width: 688px; font-size: 20px; line-height: 1.45; text-wrap: pretty; }
/* метка NDA справа сверху в карточке */
.case-tag { position: absolute; top: 56px; right: 56px; padding: 8px 16px; border-radius: 999px; background: var(--bg); font-size: 18px; font-weight: 500; line-height: 24px; }
.case-cover { overflow: hidden; }
.case-cover img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; transition: scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.case:is(:hover, :focus-visible) .case-cover img { scale: 1.03; }
.case--soon .soon { margin-top: 20px; }

/* кейс, который ещё не опубликован: вместо ссылки плашка */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
}
.soon::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }

/* Тёмная кнопка (страницы кейсов) */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--card);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  transition: transform 0.2s ease;
}
.btn-dark:hover { transform: scale(1.04); }

/* фото поворачивается в перспективе за курсором (переменные ставит anim.js) */
.tilt {
  transform: perspective(400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--ts, 1));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
}
.tilt.is-tilting { transition: transform 0.12s ease-out, box-shadow 0.3s ease; box-shadow: var(--shadow-lift); }
@media (prefers-reduced-motion: reduce) { .tilt { transform: none; } }

/* Опыт (решение Дарьи 23.10, «простенько»): слева компания и роль, справа годы; между строками тонкая линия, тегов нет */
.job {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
}
.job + .job { border-top: 1px solid var(--line); }
.job:first-child { padding-top: 0; }
.job-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.job-company { font-size: 20px; font-weight: 500; line-height: 26px; }
.job-role { font-size: 18px; line-height: 26px; color: var(--muted); }
.job-years { font-size: 16px; line-height: 24px; white-space: nowrap; }

/* Обо мне: стопка фото, при скролле раскрывается веером.
   --p от 0 (стопка) до 1 (веер) ставит anim.js; без JS и при reduced motion фото сразу веером */
.gallery {
  --w: clamp(120px, 13vw, 184px);
  --sp: 0.82;
  position: relative;
  width: 100%;
  height: calc(var(--w) * 236 / 184 + 80px);
  overflow-x: clip;
}
.photo {
  --p: 1;
  position: absolute;
  top: 40px;
  left: calc(50% - var(--w) / 2);
  width: var(--w);
  aspect-ratio: 184 / 236;
  border: 4px solid var(--on-image);
  border-radius: 20px;
  background: var(--placeholder) center / cover;
  box-shadow: var(--shadow-photo);
  transform:
    translate(calc(var(--x) * var(--w) * var(--sp) * var(--p)), calc(var(--y) * var(--p)))
    rotate(calc(var(--sr) + (var(--r) - var(--sr)) * var(--p)));
}
.photo:nth-child(even) { background-color: var(--placeholder-2); }
.photo { cursor: zoom-in; }
/* при наведении фото чуть увеличивается */
@media (hover: hover) {
  .photo { transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .photo:hover { z-index: 6; scale: 1.08; }
}
/* по клику фото выезжает из стопки в центр и увеличивается (класс ставит anim.js) */
.photo.is-open { z-index: 10; cursor: zoom-out; transform: translateY(-8px) rotate(0deg) scale(var(--zoom, 1.7)); box-shadow: var(--shadow-photo-open); }
.photo.is-open:hover { scale: 1; }
.photo.is-moving { transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.4s ease, scale 0.4s ease; }
.photo-note {
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50% 0;
  rotate: -6deg;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  opacity: var(--p);
}
.photo-note--yellow { background: var(--note); color: var(--on-image-ink); }

.about-part p { font-size: 20px; line-height: 1.5; }
.about-part { display: flex; flex-direction: column; gap: 24px; }
.about-title { font-family: var(--accent-font); font-size: 24px; font-weight: 600; line-height: normal; letter-spacing: -0.02em; }
/* «Чем занимаюсь»: пять пунктов со звёздочкой, разделены линией */
.does { border-top: 1px solid var(--line); }
.does-item { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.does-item::before { content: "✦"; grid-row: 1; font-size: 18px; line-height: 28px; color: var(--muted); }
.does-title { grid-column: 2; font-family: var(--accent-font); font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.02em; }
.about-part .does-item p { grid-column: 2; font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
/* вводный абзац под заголовком секции */
.section-lead { font-size: 20px; line-height: 1.5; color: var(--ink); }

/* Финал */
.final { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 80px var(--pad) 40px; }
/* котик над «Поработаем вместе?» 200×200, без тени и без свечения (Дарья 26.10) */
.final-cat { position: relative; width: 200px; height: 200px; }
.final-cat-img { display: block; width: 100%; height: 100%; }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 80px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.btn-pill--dark { background: var(--ink); color: var(--card); box-shadow: none; }
.btn-pill:hover { background: var(--btn-hover); }
.btn-pill--dark:hover { background: var(--ink-soft); }
.final-note { margin-top: 16px; font-size: 13px; color: var(--faint); text-align: center; }

/* Кнопка «Наверх» */
.to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  /* тёмное стекло, как нижняя плашка (решение Дарьи 27.10) */
  background: var(--pill-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  color: var(--ink);
  box-shadow: var(--bar-shadow);
  cursor: pointer;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity 0.25s ease, translate 0.25s ease, background 0.2s ease;
}
.to-top .icon { width: 20px; height: 20px; }
.to-top.is-shown { opacity: 1; translate: none; pointer-events: auto; }
.to-top:hover { background: var(--btn-hover); }
@media (max-width: 640px) {
  .to-top { left: 16px; bottom: 16px; }
  /* в кейсе плашка навигации на всю ширину: кнопка встаёт над ней */
  .case-page .to-top { bottom: 72px; }
  .lock ~ .to-top { bottom: 72px; }
}

/* Нижняя плашка контактов: белое стекло по центру снизу, ссылки через тонкие разделители.
   Уезжает вниз, когда на экране кнопки первого экрана или финала (.is-hidden ставит anim.js) */
/* Плашка — обёртка по центру снизу; стрелки «назад» и «дальше» отдельными круглыми кнопками по бокам от стекла с контактами (решение Дарьи 27.10) */
.contact-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  translate: -50% 0;
  transition: opacity 0.25s ease, translate 0.25s ease;
}
.bar-pill, .bar-btn, .contact-bar--home .bar-btn {
  border: 1px solid var(--line);
  background: var(--pill-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: var(--bar-shadow);
}
.bar-pill { display: flex; align-items: center; padding: 4px; border-radius: 999px; }
.bar-btn { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; transition: background 0.2s ease; }
.bar-btn .icon { width: 20px; height: 20px; }
.bar-btn:hover { background: var(--btn-hover); }
.bar-pill a {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
}
.bar-pill a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  translate: 0 -50%;
  background: var(--line-strong);
}
.contact-bar.is-hidden { opacity: 0; translate: -50% 16px; pointer-events: none; }
@media (max-width: 640px) {
  .contact-bar { bottom: 16px; gap: 8px; }
  .bar-pill a { padding: 10px 14px; font-size: 15px; }
}

/* Обо мне (макет 01.11): четыре фото 194×245 в ряд, под ними строки «подпись слева — текст справа» */
.about-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.about-photo { position: relative; margin: 0; outline: none; }
.about-photo img { width: 100%; aspect-ratio: 194 / 245; object-fit: cover; border-radius: 24px; background: var(--placeholder); transition: rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.about-photo:nth-child(odd):is(:hover, :focus-visible) img { rotate: -2deg; }
.about-photo:nth-child(even):is(:hover, :focus-visible) img { rotate: 2deg; }
/* бабл с подписью выпрыгивает над фото на пружинке, хвостик снизу */
.about-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 16px);
  z-index: 3;
  width: max-content;
  max-width: 220px;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  opacity: 0;
  translate: -50% 8px;
  scale: 0.6;
  transform-origin: 50% 100%;
  transition: opacity 0.2s ease, scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% -1px; border: 7px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.about-photo:is(:hover, :focus-visible) .about-bubble { opacity: 1; translate: -50% 0; scale: 1; }
.about-rows { display: flex; flex-direction: column; gap: 40px; }
.about-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); font-size: 20px; line-height: 1.5; }
.about-label { font-size: 18px; font-weight: 400; line-height: 30px; color: var(--muted); }
.section.about { gap: 56px; }
.about-photos + .about-rows { margin-top: 0; }

/* Загрузка: котик на тёмном фоне по центру, внизу проценты (Дарья 01.11). anim.js считает проценты и прячет экран;
   без JS он гаснет сам через 3 секунды */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  animation: loader-out 0.4s ease 3s forwards;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.anim .loader { animation: none; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader-cat { width: 160px; height: 160px; }
.loader-pct { font-size: 18px; font-weight: 500; line-height: 24px; color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }

/* Нижняя навигация главной (макет 31.10): серая плашка со ссылками и светлая кнопка Telegram рядом */
.nav-pill { display: flex; align-items: center; padding: 4px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--pill-bg); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: var(--bar-shadow); }
.nav-pill a { padding: 10px 20px; border-radius: 999px; font-size: 18px; font-weight: 500; line-height: 24px; white-space: nowrap; transition: background-color 0.2s ease; }
.nav-pill a:hover { background: var(--btn-hover); }
.nav-cta { display: inline-flex; align-items: center; min-height: 52px; padding: 12px 24px; border: 1px solid var(--line); border-radius: 80px; background: var(--pill-bg); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); color: var(--ink); box-shadow: var(--bar-shadow); font-size: 18px; font-weight: 500; line-height: 24px; white-space: nowrap; transition: background-color 0.2s ease; }
.nav-cta:hover { background: var(--btn-hover); }
/* на телефоне только CV и Telegram, обе серые */
@media (max-width: 640px) {
  .nav-pill .nav-opt { display: none; }
  .nav-pill a { padding: 10px 20px; font-size: 16px; }
  .nav-cta { font-size: 16px; }
}

/* Tablet */
@media (max-width: 1200px) {
  :root { --pad: 48px; }
  .hero { padding-top: 96px; }
}

/* Mobile */
@media (max-width: 640px) {
  :root { --pad: 16px; }
  /* в шапке на телефоне пусто, имени нет; «Ищу работу» стоит над именем, контакты в нижней плашке */
  :root { --header-h: 56px; }
  .header-links .header-opt, .logo { display: none; }
  .header-links { gap: 16px; font-size: 15px; }
  .hero { padding-top: 64px; padding-bottom: 72px; }
  .hero-top { gap: 16px; }
  .hero + .section { padding-top: 16px; }
  .hero::after { background: radial-gradient(ellipse 60% 36% at 50% 46%, var(--bg) 55%, transparent 100%); }
  .hero-photo { width: 88px; height: 88px; }
  .hero-role { margin: 16px 0 24px; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }

  .section { gap: 32px; padding-block: 56px; }
  .cases { gap: 24px; }
  .case { border-radius: 24px; }
  .case-info { gap: 6px; padding: 24px 20px 20px; }
  .case-meta { font-size: 15px; line-height: 22px; }
  .case-title { font-size: 24px; }
  .case-text { font-size: 17px; }
  .case-tag { top: 20px; right: 20px; padding: 4px 12px; font-size: 14px; line-height: 20px; }
  .soon { font-size: 16px; }

  /* на телефоне годы остаются справа, всё на шаг мельче */
  .job { gap: 16px; padding: 16px 0; }
  .job-company { font-size: 17px; line-height: 24px; }
  .job-years { font-size: 15px; line-height: 24px; }
  .job-role { font-size: 15px; line-height: 22px; }

  /* на телефоне веер плотнее, чтобы влез в ширину экрана */
  .gallery { --w: 27vw; --sp: 0.56; --zoom: 2.2; }
  .photo { border-width: 3px; border-radius: 14px; }
  .photo-note { font-size: 12px; padding: 2px 8px; }
  .about-part p { font-size: 17px; }
  .about-part { gap: 12px; }
  .about-title { font-size: 20px; }
  .does-title { font-size: 18px; line-height: 26px; }
  .about-part .does-item p { font-size: 16px; }
  .section-lead { font-size: 17px; }

  .about-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-photo img { border-radius: 16px; }
  .about-bubble { max-width: 160px; font-size: 13px; line-height: 18px; padding: 8px 14px; border-radius: 100px; }
  .about-rows { gap: 24px; }
  .about-row { grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 17px; }
  .about-label { font-size: 14px; line-height: 20px; }
  .final { padding-top: 56px; gap: 32px; }
  .final-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
}

/* Анимации: посимвольное появление заголовков и появление блоков при скролле */
.split-word { display: inline-block; white-space: nowrap; }
.split-char { display: inline-block; white-space: pre; }
.anim .split-char { opacity: 0; transform: translateY(0.45em) rotate(6deg) scale(0.9); }
/* буквы выпрыгивают с лёгким перелётом, как на пружинке */
.anim .is-in .split-char {
  opacity: 1;
  transform: none;
  transition: opacity 260ms ease-out, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i) * 9ms);
}
.anim .reveal { opacity: 0; translate: 0 32px; }
.anim .reveal.is-in {
  opacity: 1;
  translate: none;
  transition: opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms), translate 800ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0ms), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* на телефоне блоки длиннее экрана, поэтому появляются быстрее и с меньшим сдвигом */
@media (max-width: 640px) {
  .anim .reveal { translate: 0 16px; }
  .anim .reveal.is-in { transition-duration: 450ms, 450ms, 0.6s; }
}
@media (prefers-reduced-motion: reduce) {
  .anim .split-char, .anim .reveal { opacity: 1; transform: none; translate: none; transition: none; }
  .status-dot::after { animation: none; opacity: 0; }
  .hero-hi, .wave { transition: none; animation: none; }
  .contact-bar { transition: none; }
  .nav-pill a, .nav-cta, .about-bubble, .about-photo { transition: none; }
  .case:is(:hover, :focus-visible) .case-cover img { scale: none; transition: none; }
}