/* =========================================================
   Портфолио Полины Галаган — дизайн-система
   Токены → база → layout → компоненты → страницы
   Минималистичная тема по образцу annapaliivets.ru; отступы кратны 4 px
   ========================================================= */

/* Шрифт Manrope (SIL OFL), размещён локально */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/manrope-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/manrope-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/manrope-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/manrope-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/manrope-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/manrope-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/manrope-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;

  /* Цвет. Контраст проверен по WCAG 2.2 AA */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F5F5F7;  /* серые карточки */
  --color-text-primary: #111111;
  --color-text-secondary: #3D3D40; /* 10.6:1 на белом */
  --color-text-tertiary: #6E6E73;  /*  5.1:1 на белом, 4.7:1 на #F5F5F7 */
  --color-border: #EBEBEE;
  --color-border-strong: #D6D6DB;
  --color-accent: #1A5FD6;         /*  5.8:1 на белом */
  --color-accent-hover: #154EB3;
  --color-accent-soft: #E9F1FF;    /* вторичная кнопка, акцент 5.1:1 */
  --color-accent-soft-hover: #DBE8FF;
  --color-focus: #1A5FD6;
  --color-ok: #1F9D55;

  /* Отступы */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --section-gap: var(--space-24);

  /* Радиусы */
  --radius-sm: 8px;
  --radius-control: 999px;
  --radius-card: 24px;
  --radius-media: 30px;
  --radius-pill: 999px;

  /* Типографика */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(36px, 5vw, 56px);
  --fs-h1: clamp(32px, 4.2vw, 48px);
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-h3: clamp(20px, 2vw, 24px);
  --fs-lead: clamp(18px, 1.5vw, 20px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-meta: 14px;

  /* Сетка: узкая колонка для текста и широкая для изображений */
  --container: 1200px;
  --gutter: 24px;
  --page-pad: clamp(16px, 4vw, 40px);
  --measure: 760px;

  --header-h: 81px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1023px) {
  :root { --section-gap: var(--space-20); --gutter: 20px; }
}
@media (max-width: 639px) {
  :root { --section-gap: var(--space-16); --gutter: 12px; --fs-body: 16px; --header-h: 60px; --radius-media: 20px; --radius-card: 20px; }
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
strong { font-weight: 600; }

::selection { background: var(--color-accent-soft); color: var(--color-text-primary); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-text-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 500;
}
.skip-link:focus { top: var(--space-3); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--page-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
/* Текстовая колонка по центру */
.narrow { max-width: var(--measure); margin-inline: auto; }

.section { padding-block: var(--section-gap); }
.section--tight-top { padding-top: var(--space-12); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-8);
}

/* Серая карточка-подложка */
.panel {
  padding: clamp(28px, 4.5vw, 48px);
  border-radius: var(--radius-media);
  background: var(--color-surface-muted);
}
.panel > * + * { margin-top: var(--space-5); }
.panel p { font-size: var(--fs-lead); line-height: 1.5; color: var(--color-text-primary); }

/* ---------- Типографические утилиты ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--color-text-tertiary);
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text-primary);
}
.muted { color: var(--color-text-tertiary); }
.meta { font-size: var(--fs-meta); line-height: 1.45; color: var(--color-text-tertiary); }

/* ---------- Кнопки и ссылки ---------- */
.btn {
  --btn-bg: var(--color-accent-soft);
  --btn-fg: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { --btn-bg: var(--color-accent-soft-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn--primary { --btn-bg: var(--color-accent); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: var(--color-accent-hover); }

.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-5); font-size: 15px; }


.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link .arrow { transition: transform .2s var(--ease); }
.text-link:hover .arrow { transform: translateX(3px); }

.ext::after {
  content: "↗";
  display: inline-block;
  margin-left: 2px;
  font-size: .85em;
}

.prose a, .inline-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Header (по макету Figma, 1440) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #EBEBEE;
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  max-width: none;
  padding: 16px 40px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
}
.logo__photo { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.logo__text { display: grid; gap: 1px; }
.logo__name { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--color-text-primary); }
.logo__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: #137A3A;
}
.logo__status::before { content: ""; width: 6px; height: 6px; border-radius: 4px; background: currentColor; }

.nav { display: contents; }
.nav__links { display: flex; align-items: center; gap: 16px; list-style: none; justify-self: center; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: background-color .15s var(--ease);
}
.nav__links a:hover { background: var(--color-surface-muted); }
.nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; justify-self: end; }
.nav__actions .btn { min-height: 48px; padding: 12px 20px; gap: 8px; }
.nav__actions .btn svg { width: 20px; height: 20px; }

/* Круглые иконки: серая подложка, при наведении синие */
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px; height: 48px;
  border-radius: 64px;
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.icon-btn svg { width: 20px; height: 20px; }
a:hover > .icon-btn, .icon-btn:hover { background: var(--color-accent-soft); color: var(--color-accent); }
button.icon-btn { border: 0; padding: 0; cursor: pointer; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-text-primary);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__mobile-cta, .nav__mobile-icons { display: none; }

@media (max-width: 1023px) {
  .site-header__inner { display: flex; justify-content: space-between; padding: 10px var(--page-pad); }
  .nav { display: block; }
  .nav-toggle { display: inline-flex; }
  .nav__actions { display: none; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--page-pad) var(--space-6);
    background: var(--color-bg);
    border-bottom: 1px solid #EBEBEE;
    box-shadow: 0 12px 24px rgba(17, 17, 17, .06);
    display: none;
  }
  .nav__links[data-open="true"] { display: flex; }
  .nav__links a {
    min-height: 52px;
    padding: 0;
    font-size: 18px;
    background: transparent;
    border-bottom: 1px solid #EBEBEE;
    border-radius: 0;
  }
  .nav__links a[aria-current] { font-weight: 600; }
  .nav__links .nav__mobile-cta { display: block; padding-top: var(--space-4); }
  .nav__links .nav__mobile-cta a { width: 100%; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius-pill); font-size: 16px; font-weight: 600; min-height: 56px; padding: 0 24px; background: var(--color-accent); color: #fff; }
  .nav__links .nav__mobile-cta svg { width: 20px; height: 20px; }
  .nav__links .nav__mobile-icons { display: flex; gap: 16px; padding-top: var(--space-3); }
  .nav__links .nav__mobile-icons a { width: 48px; min-height: 48px; padding: 0; justify-content: center; border: 0; border-radius: 64px; background: var(--color-surface-muted); }
}

/* ---------- Footer ---------- */
.site-footer { padding: 0 40px 24px; }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-8);
  max-width: none;
  padding: 0;
}
.site-footer p { font-size: 16px; line-height: 24px; color: var(--color-text-tertiary); }
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; list-style: none; }
.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-tertiary);
  text-decoration: none;
  border-radius: var(--radius-pill);
}
/* «Наверх» с круглой кнопкой, как в макете кейса */
.site-footer a.site-footer__top { padding: 0; min-height: 44px; }
.site-footer a.site-footer__top:hover { background: none; }
.site-footer__top .icon-btn { background: #F7F8FC; color: var(--color-text-primary); }
.site-footer__top .icon-btn svg { width: 17px; height: 17px; }
.site-footer a:hover { color: var(--color-text-primary); background: var(--color-surface-muted); }
.site-footer a svg { width: 20px; height: 20px; }
@media (max-width: 1023px) { .site-footer { padding-inline: var(--page-pad); } }
@media (max-width: 639px) { .site-footer__links { gap: 0; margin-left: -20px; } }

/* ---------- Заголовок секции ---------- */
.section-head {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  margin: 0 auto var(--space-12);
}
.section-head__text { display: grid; gap: var(--space-4); }
@media (max-width: 639px) { .section-head { margin-bottom: var(--space-8); } }

/* =========================================================
   ГЛАВНАЯ — по макету Figma (cv, node 356:6979), ширина 1440
   ========================================================= */
.home { display: flex; flex-direction: column; gap: 56px; padding-top: 64px; }

/* Первый экран */
.hero { display: grid; justify-items: center; gap: 32px; width: 100%; max-width: calc(760px + var(--page-pad) * 2); margin-inline: auto; padding-inline: var(--page-pad); text-align: center; }
.hero__intro { display: grid; justify-items: center; gap: 16px; }
.hero__photo { width: 136px; height: 136px; border-radius: 24px; object-fit: cover; }
.hero__hello { font-size: 26px; line-height: 32px; font-weight: 500; color: var(--color-text-tertiary); }
.hero__text { display: grid; justify-items: center; gap: 16px; }
.hero__title { font-size: 48px; line-height: 56px; font-weight: 700; }
.hero__lead { max-width: 624px; font-size: 18px; line-height: 26px; color: var(--color-text-tertiary); }
.hero .btn-row { justify-content: center; }

/* Кнопки 56px */
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn--cv { min-width: 238px; }
/* Телеграм: иконка-молния 20px, слева отступ меньше */
.btn--tg { gap: 8px; padding-left: 20px; }
.btn__icon { width: 20px; height: 20px; flex: none; }

/* Кейсы: 2 колонки по 668 при 1440 */
.work { padding-inline: 40px; }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.case-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-media); overflow: hidden; }
.case-card__media { position: relative; aspect-ratio: 652 / 435; border-radius: 20px; background: #fff; overflow: hidden; }
.case-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.case-card:hover .case-card__media img { transform: scale(1.02); }
.case-card__body { display: grid; gap: 24px; padding: 24px 0; }
.case-card__text-wrap { display: grid; gap: 16px; }
.case-card__title { font-size: 28px; line-height: 36px; font-weight: 600; text-wrap: wrap; }
.case-card__title a { text-decoration: none; border-radius: 4px; }
/* вся карточка кликабельна, но в доступном дереве одна ссылка */
.case-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-media); }
.case-card__title a:focus-visible { outline: none; }
.case-card__title a:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.case-card__text { font-size: 20px; line-height: 28px; color: var(--color-text-tertiary); }
.case-card .tags { gap: 8px; }
.case-card .tag { min-height: 0; padding: 6px 14px; font-size: 14px; line-height: 20px; }
@media (max-width: 899px) { .cases { grid-template-columns: 1fr; } }

/* Другие проекты: только картинки, 2 + 3 + 3 */
.other-works { display: grid; gap: 40px; padding-top: 24px; }
.other-works h2 { font-size: 40px; line-height: 48px; font-weight: 600; text-align: center; }
.work-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; padding-inline: 40px; }
.work-tile { grid-column: span 2; aspect-ratio: 437 / 354; border-radius: 20px; overflow: hidden; background: var(--color-surface-muted); }
.work-tile:nth-child(-n+2), .work-tile:nth-child(n+6) { grid-column: span 3; aspect-ratio: 668 / 446; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.work-tile:hover img { transform: scale(1.02); }
@media (max-width: 1023px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-tile, .work-tile:nth-child(-n+2), .work-tile:nth-child(n+6) { grid-column: span 1; aspect-ratio: 437 / 354; }
}
@media (max-width: 639px) { .work-grid { grid-template-columns: 1fr; } }

/* Обложка-заглушка проекта: заменить на <img> со скриншотом */
.cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
  isolation: isolate;
}
.cover__word {
  padding: var(--space-6);
  text-align: center;
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.cover__word small {
  display: block;
  margin-top: var(--space-3);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-tertiary);
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s var(--ease); }

/* Как я работаю */
.how { display: grid; justify-items: center; gap: 40px; padding: 96px var(--page-pad) 0; }
.how h2 { font-size: 40px; line-height: 48px; font-weight: 600; text-align: center; }
.how__cards { display: grid; gap: 32px; width: 100%; max-width: 760px; }
.how-card { display: grid; gap: 16px; padding: 24px; border-radius: 32px; background: #E8F0FF; }
.how-card__main { display: grid; gap: 12px; padding: 24px 32px; border-radius: 24px; background: #fff; }
.how-card__main h3 { font-size: 24px; line-height: 32px; font-weight: 600; }
.how-card__main p { font-size: 16px; line-height: 24px; color: var(--color-text-tertiary); }
.how-card__example { display: flex; align-items: center; gap: 16px; padding-left: 32px; }
.how-card__example p { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; color: #1A4FB0; }
.how-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  color: #1A4FB0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s var(--ease);
}
.how-card__link:hover { background: #fff; }
.how-card__link svg { width: 20px; height: 20px; }
@media (max-width: 639px) {
  .how-card { padding: 16px; border-radius: 24px; }
  .how-card__main { padding: 20px; }
  .how-card__example { flex-direction: column; align-items: flex-start; padding-left: 4px; }
}

/* Контакты */
.contact-section { padding: 96px var(--page-pad); }
.contact { position: relative; display: grid; justify-items: center; gap: 48px; max-width: 760px; margin-inline: auto; text-align: center; }
.contact__head { display: grid; justify-items: center; gap: 16px; padding-inline: 40px; }
.contact__title { font-size: 40px; line-height: 48px; font-weight: 600; }
.contact__text { max-width: 534px; font-size: 16px; line-height: 24px; color: var(--color-text-tertiary); }
.contact .btn-row { justify-content: center; }
.contact__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
.contact__links li { display: flex; align-items: center; gap: 12px; }
.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}
.contact__link:hover { color: var(--color-accent); }
/* статус копирования не сдвигает вёрстку */
.copy-status { position: absolute; left: 0; right: 0; bottom: -32px; font-size: 14px; line-height: 20px; color: var(--color-text-tertiary); }
@media (max-width: 639px) {
  .contact__head { padding-inline: 0; }
  .contact__links { flex-direction: column; align-items: flex-start; }
  .contact .btn-row { width: 100%; }
  .contact .btn-row .btn { flex: 1 1 100%; }
}

/* Адаптив главной */
@media (max-width: 1023px) {
  .work, .work-grid { padding-inline: var(--page-pad); }
}
@media (max-width: 639px) {
  .home { gap: 40px; padding-top: 40px; }
  .hero__title { font-size: 34px; line-height: 42px; }
  .hero__hello { font-size: 22px; line-height: 28px; }
  .hero .btn-row { width: 100%; }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .case-card__title { font-size: 24px; line-height: 32px; }
  .case-card__text { font-size: 18px; line-height: 26px; }
  .other-works h2, .how h2, .contact__title { font-size: 32px; line-height: 40px; }
  .how { padding-top: 56px; }
  .contact-section { padding-block: 64px; }
}

/* =========================================================
   СТРАНИЦА КЕЙСА — по макету Figma (cv, Brealit, node 412:66648)
   Колонка текста 760, изображения 1360 при ширине 1440
   ========================================================= */
.case-page { display: flex; flex-direction: column; gap: 56px; padding-top: 64px; --case-pad: 40px; --col: 760px; }
.case-page > * { padding-inline: var(--case-pad); }
/* всё текстовое — в колонке 760 по центру, картинки шире */
.case-col,
.case-hero > :not(.case-cover),
.case-section__head,
.case-section__body > :not(.figure--wide):not(.gallery):not(.decision),
.decision > :not(.figure--wide):not(.gallery),
.case-nav > * { width: 100%; max-width: var(--col); margin-inline: auto; }

/* Хлебные крошки */
.breadcrumbs { font-size: 14px; line-height: 20px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; color: var(--color-text-tertiary); }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; }
.breadcrumbs a { color: var(--color-text-tertiary); text-decoration: none; border-radius: 4px; }
.breadcrumbs a:hover { color: var(--color-text-primary); }

/* Первый экран кейса */
.case-hero { display: flex; flex-direction: column; gap: 40px; }
.case-hero__inner { display: grid; gap: 24px; }
.case-hero__text { display: grid; gap: 16px; }
.case-hero h1 { font-size: 48px; line-height: 56px; font-weight: 600; }
.case-hero__lead { font-size: 18px; line-height: 26px; color: var(--color-text-tertiary); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 14px; line-height: 22px; white-space: nowrap; background: var(--color-surface-muted); color: var(--color-text-secondary); }
.case-hero .tag--blue { background: #E9F1FF; color: #1A4FB0; }

.meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; }
.meta-grid > div { display: grid; align-content: start; gap: 8px; }
.meta-grid dt { font-size: 14px; line-height: 20px; color: var(--color-text-tertiary); }
.meta-grid dd { margin: 0; font-size: 16px; line-height: 24px; color: var(--color-text-primary); }
.site-link { display: inline-flex; align-items: flex-end; gap: 4px; color: #1A4FB0; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 4px; }
.site-link svg { width: 20px; height: 20px; flex: none; }
.text-link--underline { color: #1A4FB0; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.highlights { display: flex; gap: 16px; }
.highlight { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 20px 24px; border: 1px solid #E6E8F0; border-radius: 24px; background: #F7F8FC; }
.highlight__value { font-size: 32px; line-height: 40px; font-weight: 600; color: var(--color-text-primary); }
.highlight__text { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }

/* Медиа: светлая подложка, рамка, скругление 24 */
.media {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid #E6E8F0;
  border-radius: 24px;
  background: #F7F8FC;
  overflow: hidden;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--crop img { object-position: top center; }
.media--fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to bottom, rgba(247, 248, 252, 0), #F7F8FC); pointer-events: none; }
.media__note { position: relative; display: grid; justify-items: center; gap: 8px; max-width: 40ch; padding: 24px; text-align: center; font-size: 14px; line-height: 20px; color: var(--color-text-tertiary); }
.media__note svg { width: 28px; height: 28px; color: var(--color-border-strong); }
.case-cover .media { width: 100%; }
figure.figure { margin: 0; display: grid; gap: 12px; }
figure.figure figcaption { max-width: var(--col); font-size: 14px; line-height: 22px; color: var(--color-text-tertiary); }

/* Секция кейса */
.case-section { display: flex; flex-direction: column; gap: 32px; padding-top: 56px; }
.case-section__head { display: grid; gap: 12px; }
.case-section__num { font-size: 14px; line-height: 20px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.case-section__head h2 { font-size: 36px; line-height: 44px; font-weight: 600; }
.case-section__body { display: flex; flex-direction: column; gap: 40px; min-width: 0; }

/* Текст */
.prose { display: grid; gap: 16px; font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.prose strong { color: var(--color-text-primary); font-weight: 600; }
.prose ul, .trio__item ul { list-style: none; display: grid; gap: 12px; padding: 0; }
.prose li, .trio__item li { position: relative; padding-left: 18px; }
.prose li::before, .trio__item li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #1A4FB0; }
.callout { gap: 12px; padding: 20px 32px; border: 1px solid #D6E5FF; border-radius: 24px; background: #E9F1FF; }
.subhead { font-size: 24px; line-height: 32px; font-weight: 600; }

/* Задача / ограничения / роль */
.trio { display: grid; gap: 16px; }
.trio__item { display: grid; gap: 16px; padding: 24px 32px; border: 1px solid #E6E8F0; border-radius: 24px; background: #F7F8FC; font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.trio__item h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: #1A4FB0; }
.trio__item p + p { margin-top: 12px; }

/* Список «для кого» */
.def-list { display: grid; margin: 0; border-top: 1px solid #E6E8F0; }
.def-list__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid #E6E8F0; }
.def-list__row dt { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--color-text-primary); }
.def-list__row dd { margin: 0; font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }

/* «Что выяснилось» */
.insights-block { display: grid; gap: 24px; }
.insights { list-style: none; display: grid; gap: 16px; padding: 0; }
.insight { display: grid; gap: 16px; padding: 24px 32px; border: 1px solid #E6E8F0; border-radius: 24px; background: #F7F8FC; }
.insight strong { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--color-text-primary); }
.insight p { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }

/* Решения: статьи разделены линией */
.decision { display: flex; flex-direction: column; gap: 24px; }
.decision + .decision { padding-top: 48px; border-top: 1px solid #E6E8F0; margin-top: 8px; }
.decision__head { display: grid; gap: 12px; }
.decision__label { font-size: 14px; line-height: 20px; color: var(--color-text-tertiary); }
.decision__head h3 { font-size: 24px; line-height: 32px; font-weight: 600; }
.decision__steps { display: grid; gap: 16px; }
.step { display: flex; align-items: flex-start; gap: 24px; padding: 20px 32px; border: 1px solid transparent; border-radius: 24px; }
.step__label { flex: none; width: 140px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-text-primary); }
.step__body { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
/* блочный контейнер: текст с <span> внутри не должен делиться на grid-ячейки */
.step__body > * + * { margin-top: 12px; }
.step__body ul { list-style: none; display: grid; gap: 8px; padding: 0; }
.step__body li { position: relative; padding-left: 18px; }
.step__body li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-tertiary); }
.step--solution .step__body li::before { background: #1A4FB0; }
.step--solution { background: #E9F1FF; border-color: #D6E5FF; }
.step--solution .step__label { color: #1A4FB0; }

/* «Как действовала»: шаги с соединительной линией */
.steps-block { display: grid; gap: 24px; }
.steps-block__title { font-size: 20px; line-height: 28px; font-weight: 600; }
.step-cards { list-style: none; display: grid; gap: 16px; padding: 0; }
.step-card { position: relative; display: grid; gap: 16px; padding: 24px 32px; border: 1px solid #E6E8F0; border-radius: 20px; background: #F7F8FC; }
.step-card__head { display: flex; align-items: center; gap: 40px; }
.step-card__head h4 { flex: 1; font-size: 20px; line-height: 28px; font-weight: 600; }
.step-card__num { flex: none; padding: 6px 14px; border-radius: var(--radius-pill); background: #fff; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--color-text-tertiary); }
.step-card p { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }

/* Релизы */
.releases { display: grid; gap: 24px; }
.releases__body { display: grid; gap: 12px; }
.releases__list { list-style: none; display: flex; gap: 16px; padding: 0; }
.release { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px 20px; border: 1px solid #E6E8F0; border-radius: 24px; background: #F7F8FC; }
.release:first-child { justify-content: flex-start; }
.release strong { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--color-text-primary); }
.release p { font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.releases__note { font-size: 14px; line-height: 22px; color: var(--color-text-tertiary); }

/* Галерея: широкие на всю ширину, остальные по два */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
.gallery .figure--wide { grid-column: 1 / -1; }
.gallery .figure:not(.figure--wide) .media { border-radius: 20px; }

/* Результат */
.results { display: grid; gap: 16px; }
.result-group { display: grid; gap: 16px; padding: 24px 32px; border: 1px solid #E6E8F0; border-radius: 24px; background: #F7F8FC; }
.result-group__label { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 6px 14px 6px 12px; border-radius: var(--radius-pill); background: #fff; font-size: 14px; line-height: 20px; color: var(--color-text-tertiary); }
.result-group__label::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--color-accent); }
.result-group--qual .result-group__label::before { background: #1F9D55; }
.result-group--limits .result-group__label::before { background: var(--color-text-tertiary); }
.result-group ul { list-style: none; display: grid; gap: 16px; padding: 0; }
.result-group li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.result-group li svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--color-text-primary); }
.result-group li strong { font-weight: 600; color: var(--color-text-primary); }

/* Цитата */
.quote { margin: 0; padding: 24px 32px; border: 1px solid #E6E8F0; border-radius: 24px; background: #F7F8FC; }
.quote p { font-size: 18px; line-height: 26px; color: var(--color-text-primary); }
.quote footer { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--color-text-tertiary); }

/* Таблица */
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #E6E8F0; border-radius: 24px; background: #F7F8FC; }
.table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 16px 24px; border-bottom: 1px solid #E6E8F0; }
.table thead th { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--color-text-tertiary); }
.table tbody th { font-weight: 600; width: 32%; color: var(--color-text-primary); }
.table td { color: var(--color-text-secondary); }
.table--even { table-layout: fixed; }
.table--even th, .table--even tbody th { width: 50%; }
.result-group__note { margin-top: 12px; padding-top: 12px; border-top: 1px solid #E6E8F0; font-size: 14px; line-height: 22px; color: var(--color-text-tertiary); }
.table tr:last-child th, .table tr:last-child td { border-bottom: 0; }

/* Навигация между кейсами */
.case-nav { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 56px; }
.case-nav__links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-nav__link { display: grid; align-content: start; gap: 16px; padding: 24px 32px; border: 1px solid #E6E8F0; border-radius: 24px; background: #F7F8FC; text-decoration: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.case-nav__link:hover { border-color: #D6E5FF; background: #E9F1FF; }
.case-nav__link--next { justify-items: end; text-align: right; }
.case-nav__dir { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 16px; line-height: 24px; font-weight: 600; color: #1A4FB0; }
.case-nav__dir svg { width: 20px; height: 20px; }
.case-nav__title { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--color-text-primary); }
.case-nav > .btn { width: auto; }

@media (max-width: 1023px) {
  .case-page { --case-pad: var(--page-pad); }
}
@media (max-width: 639px) {
  .case-page { gap: 40px; padding-top: 32px; }
  .case-hero h1 { font-size: 32px; line-height: 40px; }
  .case-section__head h2 { font-size: 28px; line-height: 36px; }
  .meta-grid, .def-list__row, .case-nav__links { grid-template-columns: 1fr; }
  .highlights, .releases__list { flex-direction: column; }
  .step { flex-direction: column; gap: 8px; padding: 16px 20px; }
  .step__label { width: auto; }
  .trio__item, .insight, .result-group, .step-card, .callout { padding: 20px; }
  .step-card__head { gap: 16px; }
  .gallery { grid-template-columns: 1fr; }
  .case-nav__link--next { justify-items: start; text-align: left; }
}

/* =========================================================
   ОБО МНЕ
   ========================================================= */
.about-hero { padding-top: clamp(40px, 7vw, 96px); padding-bottom: var(--space-12); }
.about-hero__grid { display: grid; justify-items: center; gap: var(--space-8); max-width: var(--measure); margin-inline: auto; text-align: center; }
.about-hero__text { display: grid; justify-items: center; gap: var(--space-6); }
.about-hero__text .breadcrumbs { margin-bottom: 0; }
.about-hero__text .btn-row { justify-content: center; }
.about-hero__photo { order: -1; width: 200px; transform: rotate(-4deg); }
.photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin: 0;
  border-radius: var(--radius-media);
  background: var(--color-surface-muted);
  overflow: hidden;
}
.photo .media__note { transform: rotate(4deg); padding: var(--space-3); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

.approach { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); max-width: var(--measure); margin-inline: auto; }
.approach__item { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-surface-muted); }
.approach__item h3 { font-size: 19px; }
.approach__item p { font-size: var(--fs-small); line-height: 1.55; color: var(--color-text-secondary); }
@media (max-width: 639px) { .approach { grid-template-columns: 1fr; } }

/* Навыки: простые списки с тире, как в резюме */
.skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--gutter); max-width: var(--measure); margin-inline: auto; }
.skill-group { display: grid; align-content: start; gap: var(--space-3); }
.skill-group h3 { font-size: 18px; }
.skill-group ul { list-style: none; display: grid; gap: var(--space-2); }
.skill-group li { position: relative; padding-left: var(--space-5); font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-secondary); }
.skill-group li::before { content: "—"; position: absolute; left: 0; color: var(--color-text-tertiary); }
@media (max-width: 639px) { .skills { grid-template-columns: 1fr; gap: var(--space-8); } }

.tools { display: grid; gap: var(--space-8); max-width: var(--measure); margin-inline: auto; }
.tools__row { display: grid; gap: var(--space-3); }
.tools__row h3 { font-size: 18px; }
.tools__row p { margin-top: var(--space-1); font-size: var(--fs-meta); color: var(--color-text-tertiary); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface-muted); font-size: var(--fs-small); }
.chip--learning { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-strong); color: var(--color-text-secondary); }

.personal p { font-size: var(--fs-lead); line-height: 1.5; }

/* ---------- Движение ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Печать ---------- */
@media print {
  .site-header, .skip-link, .nav-toggle, .case-nav { display: none !important; }
}

/* Цветные теги */
.tag--blue   { background: #E8F0FF; color: #1A4FB0; }
.tag--purple { background: #F0EAFF; color: #5A31B4; }
.tag--green  { background: #E3F5EA; color: #1C6B3E; }
.tag--orange { background: #FFEEDD; color: #94480A; }
.tag--pink   { background: #FDE7F0; color: #A32A62; }
.tag--gray   { background: #FFFFFF; color: var(--color-text-secondary); }

/* иконка внутри кнопки */
.btn svg { width: 20px; height: 20px; flex: none; }

/* Обо мне: фото и «Кроме дизайна» */
.about-hero__photo .photo { box-shadow: none; }
.life { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gutter); }
.life__item {
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  background: var(--color-surface-muted);
  overflow: hidden;
  color: var(--color-border-strong);
}
.life__item:nth-child(-n+2) { grid-column: span 3; }
.life__item:nth-child(n+3) { grid-column: span 2; aspect-ratio: 1; }
.life__item svg { width: 32px; height: 32px; }
.life__item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 639px) {
  .life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .life__item:nth-child(n) { grid-column: span 1; aspect-ratio: 1; }
  .life__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}
li, figcaption { text-wrap: pretty; }

/* Оглавление кейса: сбоку вне сетки, только на широких экранах.
   Над широкими картинками прячется (класс is-hidden ставит script.js), чтобы не перекрывать их. */
.case-toc { display: none; }
@media (min-width: 1280px) {
  .case-toc {
    display: block;
    position: fixed;
    top: calc(var(--header-h) + 64px);
    left: 40px;
    z-index: 10;
    width: min(220px, calc((100vw - 760px) / 2 - 80px));
    padding: 0;
    transition: opacity .2s var(--ease), visibility .2s;
  }
  .case-toc.is-hidden { opacity: 0; visibility: hidden; }
  .case-toc ol { list-style: none; display: grid; gap: 4px; padding: 0; margin: 0; }
  .case-toc a {
    display: block;
    padding: 6px 0 6px 14px;
    border-left: 2px solid #E6E8F0;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-tertiary);
    text-decoration: none;
    transition: color .15s var(--ease), border-color .15s var(--ease);
  }
  .case-toc a:hover { color: var(--color-text-primary); }
  .case-toc a[aria-current="true"] { color: #1A4FB0; border-left-color: #1A4FB0; font-weight: 600; }
}
@media (min-width: 1280px) and (prefers-reduced-motion: reduce) { .case-toc { transition: none; } }

/* Видео скролла в мониторе */
.media--video { background: #F1F4FB; }
.media--yt { position: relative; background: #121218; }
.yt { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.yt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt__play { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(26, 79, 176, .92); box-shadow: 0 12px 32px -8px rgba(20, 30, 60, .45); transition: transform .2s ease; }
.yt:hover .yt__play { transform: scale(1.06); }
.yt:focus-visible { outline: 3px solid #1A4FB0; outline-offset: -3px; }
.media--yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 600px) { .yt__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } }
.media--video video { display: block; width: 100%; height: 100%; object-fit: cover; }