/* ============================================================
   Александр Полежаев — портфолио
   Эстетика: нативный iOS — системные сгруппированные поверхности,
   плотная сетка, hairline-разделители, сдержанные тени.
   Шрифты: Geist (текст) / Ubuntu Mono (моно).
   ============================================================ */

:root {
  /* Поверхности — по мотивам iOS systemGroupedBackground */
  --bg:        #ececef;
  --card:      #ffffff;
  --sub:       #f7f7f9;
  --sub-2:     #eff0f2;

  /* Текст — по мотивам iOS label / secondaryLabel / tertiaryLabel */
  --ink:       #1c1c1e;
  --ink-2:     #6c6c70;
  --ink-3:     #9a9aa0;

  /* Линии и акценты */
  --hairline:  rgba(60, 60, 67, 0.10);
  --edge:      rgba(0, 0, 0, 0.045);
  --accent:    #ea580c;
  --green:     #34c759;

  /* Геометрия — единый плотный масштаб */
  --r-card:    22px;
  --r-mid:     14px;
  --r-sm:      10px;
  --gap:       10px;
  --card-pad:  clamp(16px, 1.7vw, 21px);

  /* Тени — едва заметные, «системные» */
  --shadow:        0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.045);
  --shadow-hover:  0 2px 5px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.075);

  /* Шрифты */
  --font:  "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono:  "Ubuntu Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  background-image: radial-gradient(120% 70% at 50% -8%, #f4f4f6 0%, rgba(244,244,246,0) 60%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* зернистость — на пределе заметности, добавляет «материальность» */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- */
/*  Каркас                                                    */
/* ---------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(16px, 3.5vw, 48px) clamp(14px, 3vw, 34px);
}

.bento {
  display: grid;
  gap: var(--gap);
  /* minmax(0,1fr) вместо 1fr — иначе контент с большой min-content
     (картинки, nowrap-строки) распирает колонку шире контейнера */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "ava ava ava ava ava ava"
    "svc svc svc svc svc svc"
    "lng lng lng wrk wrk wrk"
    "tch tch tch wrk wrk wrk"
    "aix aix aix wrk wrk wrk"
    "msc msc msc wrk wrk wrk"
    "git git git git git git"
    "cta cta cta cta cta cta";
}

.card--avatar   { grid-area: ava; }
.card--services { grid-area: svc; }
.card--lang     { grid-area: lng; }
.card--tech     { grid-area: tch; }
.card--ai       { grid-area: aix; }
.card--misc     { grid-area: msc; }
.card--work     { grid-area: wrk; }
.card--github   { grid-area: git; }
.card--cta      { grid-area: cta; }

/* ---------------------------------------------------------- */
/*  Карточка — базовый вид                                    */
/* ---------------------------------------------------------- */
.card {
  background: var(--card);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  box-shadow: var(--shadow);
  border: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.8,.2,1),
              box-shadow .4s cubic-bezier(.2,.8,.2,1);

  /* появление при загрузке — сдержанное */
  opacity: 0;
  transform: translateY(9px);
}
.is-ready .card {
  opacity: 1;
  transform: none;
  transition:
    opacity .55s cubic-bezier(.2,.8,.2,1),
    transform .55s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i) * 45ms);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  z-index: 10;
}

.card__label {
  font-size: 11px;
  font-weight: 590;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 13px;
}

/* заголовок-строка с дополнительной плашкой (ИИ-инструменты) */
.card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.card__head .card__label { margin-bottom: 0; }
.head-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--sub);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 9px 3px 6px;
}
.head-tag img { display: block; width: 13px; height: 13px; }

/* пилюля-бейдж с датой */
.badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-2);
  background: var(--sub);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------------------------------------------------------- */
/*  Аватар + контакты                                         */
/* ---------------------------------------------------------- */
.card--avatar {
  gap: 12px;

  /* ——— бордер в стиле Shopify (Polaris surface) ———
     чёткая прохладно-серая линия + многослойная тень с выраженной
     нижней гранью; радиус чуть плотнее, чем у «iOS»-карточек.
     Анимация появления и ховера — общая, наследуется из .card */
  border: 1px solid #dfe1e5;
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(22, 29, 37, .04),
    0 1px 2px rgba(22, 29, 37, .06),
    0 10px 28px -14px rgba(22, 29, 37, .18);
}
.card--avatar:hover {
  box-shadow:
    0 1px 0 rgba(22, 29, 37, .05),
    0 4px 10px rgba(22, 29, 37, .08),
    0 18px 40px -16px rgba(22, 29, 37, .24);
}
/* верхняя строка карточки: фото · имя · действия */
.avatar__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
}
/* «коротко» — факты строкой под верхней строкой */
.card--avatar .facts {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

/* фото — небольшой скруглённый квадрат, кликабельно */
.avatar__photo {
  width: clamp(74px, 8vw, 92px);
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #d9d9de 0%, #c6c6cc 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  cursor: zoom-in;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.avatar__photo:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}
.avatar__photo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* при замене фото — положить новый <img> внутрь .avatar__photo */
.avatar__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}

.avatar__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.avatar__name {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 640;
  letter-spacing: -.021em;
  line-height: 1.2;
}
.avatar__role {
  font-size: 12.5px;
  font-weight: 560;
  color: var(--accent);
}

/* ---------------------------------------------------------- */
/*  Hero — питч + призыв к действию                           */
/* ---------------------------------------------------------- */
.hero__pitch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: 13px;
}
.hero__headline {
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: 680;
  letter-spacing: -.022em;
  line-height: 1.18;
  max-width: 34ch;
}
.hero__subhead {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 72ch;
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

/* основной призыв к действию — синяя «пилюля» */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 19px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(234,88,12,.28);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s;
}
.cta-btn svg { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.cta-btn:hover {
  transform: translateY(-1.5px);
  background: #c2410c;
  box-shadow: 0 8px 20px rgba(234,88,12,.34);
}
.cta-btn:hover svg { transform: translateX(3px); }
.cta-btn:active { transform: translateY(0); }
.cta-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.cta-btn--lg { padding: 13px 26px; font-size: 14.5px; }

/* вторичная ссылка «See selected work» */
.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 560;
  color: var(--ink-2);
  text-decoration: none;
  padding: 9px 4px;
  transition: color .25s;
}
.cta-ghost:hover { color: var(--ink); }
.cta-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* кнопка «Download / Print resume» — вторичная; печатает страницу в PDF */
.resume-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--hairline);
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--sub);
  border-radius: 999px;
  padding: 9px 15px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              box-shadow .3s, background .3s, color .3s;
}
.resume-btn svg { width: 15px; height: 15px; }
.resume-btn:hover {
  transform: translateY(-1.5px);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.resume-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.resume-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* контакты — иконка + подпись, колонкой справа */
.socials {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.social {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--sub);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              background .3s, color .3s, box-shadow .3s;
}
.social svg { width: 16px; height: 16px; flex-shrink: 0; }
.social__text { white-space: nowrap; }
.social:hover {
  transform: translateY(-2px);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.social:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------- */
/*  Факты «коротко» — внутри карточки аватара                 */
/* ---------------------------------------------------------- */
.facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--sub);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 11px 6px 9px;
}
.fact svg,
.fact img { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }

/* ---------------------------------------------------------- */
/*  Стек — чипы (языки, технологии, ИИ-инструменты)           */
/* ---------------------------------------------------------- */
.card--stack { justify-content: flex-start; }
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--sub);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 5px 11px 5px 5px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s;
}
.chip:hover {
  transform: translateY(-1.5px);
  background: var(--sub-2);
}
/* иконка-плитка: светлый фон, цветной логотип из Iconify API */
.chip__ic {
  width: 22px; height: 22px;
  border-radius: 6.5px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}
.chip__ic img {
  display: block;
  width: 14px; height: 14px;
}
/* индикатор уровня владения — три «полоски» как заряд батареи */
.chip__lvl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 1px;
}
.chip__lvl i {
  width: 3px;
  height: 9px;
  border-radius: 1.5px;
  background: #d4d4d9;
}
.chip__lvl[data-level="1"] i:nth-child(-n+1),
.chip__lvl[data-level="2"] i:nth-child(-n+2),
.chip__lvl[data-level="3"] i:nth-child(-n+3) {
  background: var(--green);
}

/* ВРЕМЕННО: подсказка-«?» отключена — удали строку ниже, чтобы вернуть */
.chip__info { display: none !important; }

/* «?» рядом с технологией + подсказка с составом навыка */
.chip__info {
  position: relative;
  display: inline-flex;
  margin-left: -3px;
  cursor: help;
  -webkit-tap-highlight-color: transparent;
}
.chip__info-q {
  width: 14px; height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sub-2);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  transition: background .2s, color .2s;
}
.chip:hover .chip__info-q,
.chip:focus-within .chip__info-q {
  background: var(--accent);
  color: #fff;
}
.chip__info:focus { outline: none; }
.chip__info:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 50%;
}
.chip__tip {
  position: absolute;
  right: -5px;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: 192px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.17);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.chip__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 9px;
  width: 11px; height: 11px;
  background: #fff;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-6px) rotate(45deg);
  border-bottom-right-radius: 2px;
}
.chip:hover .chip__tip,
.chip:focus-within .chip__tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.tip-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-3);
}
.tip-item::before {
  content: "";
  width: 15px; height: 15px;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid #d4d4d9;
}
.tip-item.is-done { color: var(--ink); }
.tip-item.is-done::before {
  border-color: var(--green);
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

/* подгруппы чипов (например, основные / дополнительные языки) */
.chip-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chip-group + .chip-group { margin-top: 13px; }
.chip-group__label {
  font-size: 11px;
  font-weight: 550;
  color: var(--ink-3);
  letter-spacing: -.003em;
}

/* ---------------------------------------------------------- */
/*  Опыт и проекты — единый модуль                            */
/* ---------------------------------------------------------- */
.work {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
.work-item {
  display: flex;
  gap: 12px;
  height: 100%;
  padding: 14px;
  background: var(--sub);
  border: 1px solid var(--hairline);
  border-radius: var(--r-mid);
  text-decoration: none;
  color: inherit;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              background .3s, box-shadow .3s;
}
a.work-item:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}
.work-item__logo {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--c, #1c1c1e);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.work-item__logo svg,
.work-item__logo img { width: 21px; height: 21px; }
/* логотип-картинка проекта — на всю плитку */
.work-item__logo--img {
  background: var(--sub);
  overflow: hidden;
}
.work-item__logo--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.work-item__top {
  display: flex;
  align-items: center;
  gap: 8px;
  /* перенос — иначе строка «название + ссылка + тег» не сжимается на узких экранах */
  flex-wrap: wrap;
}
.work-item__name {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.work-item__tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.work-item__arrow {
  width: 15px; height: 15px;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), color .3s;
}
a.work-item:hover .work-item__arrow {
  transform: translate(2px, -2px);
  color: var(--accent);
}
.work-item__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.work-item__desc {
  font-size: 12px;
  line-height: 1.44;
  color: #4a4a4d;
}
/* ссылка на сайт проекта — «Открыть сайт ↗», справа от названия */
.work-item__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 560;
  color: var(--accent);
  text-decoration: none;
  transition: gap .25s cubic-bezier(.2,.8,.2,1);
}
.work-item__link svg { width: 13px; height: 13px; }
.work-item__link:hover {
  gap: 8px;
  text-decoration: underline;
}
.work-item__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------- */
/*  Услуги — что можно заказать                               */
/* ---------------------------------------------------------- */
.services {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap);
}
.service {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 14px;
  background: var(--sub);
  border: 1px solid var(--hairline);
  border-radius: var(--r-mid);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, box-shadow .3s;
}
.service:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}
.service__head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.service__ic {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(234, 88, 12, .10);
}
.service__ic img { display: block; width: 17px; height: 17px; }
.service__name {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -.015em;
}
.service__desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}
/* логотипы инструментов под услугой */
.service__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.service__tool {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 7px;
}
.service__tool img { display: block; width: 15px; height: 15px; }

/* «+N ещё» — намёк на объём за пределами избранного */
.work-more {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: var(--gap);
  padding: 12px 14px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-mid);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
}
.work-more__count {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--sub-2);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---------------------------------------------------------- */
/*  Закрывающий призыв к действию — тёмная карточка           */
/* ---------------------------------------------------------- */
.card--cta {
  background: var(--ink);
  border-color: rgba(255, 255, 255, .08);
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 3.4vw, 38px);
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  max-width: 540px;
}
.cta__title {
  font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 680;
  letter-spacing: -.022em;
  color: #fff;
}
.cta__note {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .66);
}
.card--cta .cta-btn { margin-top: 2px; }

/* ---------------------------------------------------------- */
/*  GitHub-активность — граф контрибуций                      */
/* ---------------------------------------------------------- */
.card--github .card__head { justify-content: space-between; }
.github-link {
  font-size: 12px;
  font-weight: 560;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.github-link:hover { text-decoration: underline; }
.github-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin: 6px 0 12px;
}
.github-graph { overflow-x: auto; }
.github-graph img {
  display: block;
  width: 100%;
  min-width: 520px;
}

/* ---------------------------------------------------------- */
/*  Подвал                                                    */
/* ---------------------------------------------------------- */
.foot {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .6s ease;
  transition-delay: .7s;
}
.is-ready .foot { opacity: 1; }
.foot__dot { color: var(--ink-3); }

/* ---------------------------------------------------------- */
/*  Тост                                                      */
/* ---------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  z-index: 50;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
  background: rgba(28, 28, 30, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------- */
/*  Лайтбокс — фото на весь экран по клику                    */
/* ---------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 56px);
  background: rgba(18, 18, 20, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox__img {
  max-width: min(560px, 100%);
  max-height: 86vh;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: scale(.95);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.lightbox.is-open .lightbox__img { transform: none; }

/* ---------------------------------------------------------- */
/*  Адаптив                                                   */
/* ---------------------------------------------------------- */
@media (max-width: 820px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "ava ava ava ava"
      "svc svc svc svc"
      "lng lng wrk wrk"
      "tch tch wrk wrk"
      "aix aix wrk wrk"
      "msc msc wrk wrk"
      "git git git git"
      "cta cta cta cta";
  }
}

@media (max-width: 580px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "ava" "svc" "wrk" "lng" "tch" "aix" "msc" "git" "cta";
  }
  .socials { width: 100%; margin-left: 0; }

  /* hover-сдвиги не нужны на тач-устройствах и ломают position: fixed */
  .card:hover,
  .chip:hover,
  .service:hover { transform: none; }

  /* подсказка — фиксированной плашкой у нижнего края, всегда в пределах экрана */
  .chip__tip {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 14px;
    top: auto;
    width: auto;
    transform: translateY(8px);
  }
  .chip__tip::after { display: none; }
}

/* ---------------------------------------------------------- */
/*  Печать — кнопка «Скачать/Печать» → «Сохранить как PDF»     */
/* ---------------------------------------------------------- */
/* поля страницы — одинаковые на КАЖДОЙ странице PDF.
   @page вынесен из @media print: так браузеры применяют его надёжнее */
@page { margin: 14mm; }

@media print {
  /* печатать фон, цвета чипов и логотипы */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    background: #fff !important;
    background-image: none !important;
  }
  body::before { display: none !important; }   /* зернистость */

  .stage {
    max-width: none;
    padding: 0;
  }

  /* сетка → одна колонка; порядок: шапка → стек → опыт и проекты в конце */
  .bento {
    display: flex !important;
    flex-direction: column;
  }
  .card--avatar   { order: 1; }
  .card--services { order: 2; }
  .card--lang     { order: 3; }
  .card--tech     { order: 4; }
  .card--ai       { order: 5; }
  .card--misc     { order: 6; }
  .card--work     { order: 7; }

  .card {
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, .14);
    break-inside: avoid;
    transition: none !important;
  }

  /* интерактивное в PDF не нужно */
  .resume-btn,
  .hero__cta-row,
  .card--cta,
  .card--github,
  .toast,
  .lightbox { display: none !important; }

  .foot { margin-top: 14px; }
}

/* ---------------------------------------------------------- */
/*  Уважение к настройкам пользователя                        */
/* ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card { opacity: 1; transform: none; }
}