/* ==========================================================================
   Главная страница. Блоки идут в порядке страницы.
   ========================================================================== */

.home-page { display: flex; flex-direction: column; align-items: center; min-height: 100vh; background: var(--bg); }
.home-main { width: 100%; }

/* ---------- Первый экран ---------- */
.hero__frame {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px;
  padding: 64px 0;
}
.hero__card {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px;
  width: 100%; padding: 64px 0 24px;
}
.hero__greeting {
  position: absolute; top: -18px; left: 50%; z-index: 1; transform: translateX(-50%);
  display: flex; align-items: center; padding: 8px 12px; border-radius: 50px; background: var(--surface);
  color: var(--text); font: 500 16px/25.6px 'Big Shoulders', sans-serif; white-space: nowrap;
}
.hero__greeting::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50px; pointer-events: none; }

.hero__title { display: flex; justify-content: center; align-items: flex-end; gap: 16px; width: 100%; font: inherit; }
.hero__word {
  display: flex; flex-direction: column; flex: 1 0 0; width: 1px; overflow: hidden;
  color: var(--text); font: 600 125px/.9 'Big Shoulders', sans-serif; white-space: pre;
}
.hero__word--left { align-items: flex-end; text-align: right; }
.hero__word--right { align-items: flex-start; text-align: left; }
.hero__portrait {
  --w: 134px; --h: 162px;
  position: relative; flex: none; width: var(--w); height: var(--h); border-radius: 30px; overflow: hidden;
  background: url('/assets/video/sergey-hero-loop-10s-v2-poster.jpg') center / cover no-repeat;
  box-shadow: 0 3px 0 -2px var(--line-strong);
}
.hero__portrait video { width: 100%; height: 100%; object-fit: contain; }

.hero__intro {
  max-width: 600px; color: var(--text-muted); text-align: center; text-wrap: balance;
  font: 500 16px/25.6px var(--font-text); letter-spacing: -.02em;
}
.hero__intro .word { white-space: nowrap; }
.hero__intro .letter { display: inline-block; will-change: transform; filter: blur(0px); } /* как в оригинале: буквы остаются в своём слое (серое сглаживание) */

/* Кнопка Telegram: белый круг с самолётиком расширяется на всю кнопку */
.cta-telegram {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; will-change: transform;
  min-width: 294px; min-height: 58px; padding: 0; border: 1.5px solid transparent; border-radius: 100px;
  background: var(--accent); outline: none;
  box-shadow: 0 2px 4px rgba(145, 58, 0, .07), 0 8px 8px rgba(145, 58, 0, .09), 0 16px 14px rgba(145, 58, 0, .11), 5px 30px 24px rgba(145, 58, 0, .16);
  transition: border-color .42s ease, box-shadow .45s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.cta-telegram::before {
  content: ''; position: absolute; z-index: 0; top: 50%; right: 7px; width: 42px; height: 42px; border-radius: 50%;
  background: #fff; transform: translateY(-50%) scale(1); transition: transform .65s cubic-bezier(.22, 1, .36, 1); pointer-events: none;
}
.cta-telegram::after {
  content: ''; position: absolute; z-index: 3; top: 50%; right: 18px; width: 20px; height: 20px; background-color: var(--accent);
  -webkit-mask: url('/assets/telegram-plane.svg') center / contain no-repeat; mask: url('/assets/telegram-plane.svg') center / contain no-repeat;
  transform: translateY(-50%); transition: transform .45s cubic-bezier(.22, 1, .36, 1); pointer-events: none;
}
.cta-telegram__label {
  position: relative; z-index: 2; display: flex; align-items: center; width: 100%; min-height: 55px; padding: 7px 66px 7px 25px;
  color: #fff; font: 500 16px/25.6px var(--font-text); letter-spacing: -.02em; white-space: pre;
  transition: color .38s ease;
}
.cta-telegram:is(:hover, :focus, :focus-visible) {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(255, 106, 0, .18), 0 12px 28px rgba(255, 106, 0, .28), 0 28px 54px rgba(255, 106, 0, .2);
}
.cta-telegram:is(:hover, :focus, :focus-visible)::before { transform: translateY(-50%) scale(18); }
.cta-telegram:is(:hover, :focus, :focus-visible)::after { transform: translate(2px, -52%) rotate(-8deg) scale(1.04); }
.cta-telegram:is(:hover, :focus, :focus-visible) .cta-telegram__label { color: var(--accent); }

/* Появление первого экрана. home.js снимает .is-intro и запускает анимации, когда шрифты загружены.
   Слова и фото открываются маской снизу вверх: границы маски — анимируемые свойства. */
@property --reveal-from { syntax: '<percentage>'; inherits: false; initial-value: -271%; }
@property --reveal-to { syntax: '<percentage>'; inherits: false; initial-value: -100%; }
.hero__word, .hero__portrait {
  -webkit-mask-image: linear-gradient(180deg, transparent var(--reveal-from), #000 var(--reveal-to));
  mask-image: linear-gradient(180deg, transparent var(--reveal-from), #000 var(--reveal-to));
}
.hero.is-intro :is(.hero__word, .hero__portrait) { --reveal-from: 100%; --reveal-to: 110%; }
.hero.is-intro .hero__greeting { opacity: .001; transform: translateX(-50%) scale(.9); }
.hero.is-intro .hero__intro, .hero.is-intro .cta-telegram { opacity: .001; }
.hero.is-intro .hero__intro .letter { opacity: 0; filter: blur(8px); }

@media (max-width: 1199.98px) {
  .hero__frame { padding-top: 48px; }
  .hero__greeting { font-size: 15px; line-height: 24px; }
  .hero__word { font-size: 90px; }
  .hero__portrait { --w: 107px; --h: calc(107px * 162 / 134); }
  .hero__intro { font-size: 15px; line-height: 24px; }
  .cta-telegram__label { font-size: 15px; line-height: 24px; }
}
@media (max-width: 809.98px) {
  .hero__greeting { font-size: 14px; line-height: 22.4px; }
  .hero__title { flex-direction: column; align-items: center; }
  .hero__word { flex: none; width: 100%; align-items: center; text-align: center; font-size: clamp(56px, 21vw, 82px); }
  .hero__portrait { --w: 131px; --h: calc(131px * 162 / 134); }
  .hero__intro { font-size: 14px; line-height: 22.4px; }
  .cta-telegram__label { font-size: 14px; line-height: 22.4px; }
}

/* ---------- Избранные проекты ---------- */
.projects { scroll-margin-top: 110px; }
.projects__head {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 32vw, 520px); align-items: center;
  column-gap: 28px; padding: 48px 24px; z-index: 1;
}
.projects__title {
  color: var(--text); font: 600 clamp(62px, 5.15vw, 86px)/1.1 var(--font-display); letter-spacing: -1.4px; white-space: nowrap;
}
.projects__subtitle {
  align-self: end; justify-self: end; width: 100%; max-width: 100%;
  color: #656565; font: 400 clamp(13.5px, .91vw, 16px)/1.45 var(--font-text);
}
html[toggle-theme="dark"] .projects__subtitle { color: var(--text-muted); }

/* Бегущая строка преимуществ */
.benefits { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px 0; z-index: 1; }
.benefits__ticker { display: flex; width: 100%; overflow: hidden; }
.benefits__list {
  display: flex; align-items: center; gap: 48px; width: max-content; flex: none;
  animation: benefits-ticker 34s linear infinite; will-change: transform;
}
.benefits__ticker:hover .benefits__list { animation-play-state: paused; }
@keyframes benefits-ticker { to { transform: translateX(calc(-1 * var(--ticker-distance, 0px))); } }
.benefit {
  display: flex; align-items: center; gap: 8px; flex: none;
  color: var(--text-muted); font: 400 14px/22.4px var(--font-text); letter-spacing: -.02em; white-space: pre;
}
.benefit::before {
  content: ''; flex: none; width: 18px; height: 18px; background: var(--text-muted);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}

/* Сетка карточек */
.projects__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1199.98px) {
  .projects__head { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .projects__title { font-size: clamp(48px, 6.4vw, 70px); }
  .projects__subtitle { align-self: auto; justify-self: start; font-size: 15px; }
  .benefit { font-size: 13px; line-height: 20.8px; }
}
@media (max-width: 809.98px) {
  .projects__head { row-gap: 10px; padding: 48px 16px; }
  .projects__title { font-size: clamp(48px, 15.4vw, 60px); white-space: normal; }
  .benefit { font-size: 12px; line-height: 19.2px; }
  .projects__grid { grid-template-columns: minmax(0, 1fr); }
  .projects__grid.lines::after { border-right-width: 1px; }
  .project-card.lines::after { border-right-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .benefits__list { animation: none; }
}

/* ---------- Опыт ---------- */
.experience { scroll-margin-top: 110px; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 3; }
.experience__title { display: flex; justify-content: center; align-items: center; width: 100%; padding: 64px 0; overflow: clip; }
.experience__title .ticker { flex: 1 0 0; width: 1px; z-index: 1; }
.experience__title .ticker__list { gap: 64px; }
.experience__heading { color: var(--text); font: 600 100px/1.1 var(--font-display); white-space: pre-wrap; }
.experience__caption {
  min-width: 110px; max-width: 70px; color: var(--text-muted); text-align: center;
  font: 500 16px/25.6px var(--font-text); letter-spacing: -.02em; white-space: pre-wrap;
}
.career-host { display: flex; flex-direction: column; }
@media (max-width: 1199.98px) {
  .experience__title { padding: 48px 0; }
  .experience__heading { font-size: 70px; }
  .experience__caption { font-size: 15px; line-height: 24px; }
}
@media (max-width: 809.98px) {
  .experience__heading { font-size: 60px; }
  .experience__caption { font-size: 14px; line-height: 22.4px; }
}

/* ---------- Мои навыки ---------- */
.skills { position: relative; z-index: 2; }
.skills__frame { display: flex; justify-content: center; align-items: flex-start; z-index: 2; }
.skills__list { display: flex; flex-direction: column; align-items: flex-start; flex: 1 0 0; width: 1px; z-index: 3; }
.skills__title { width: 100%; padding: 128px 24px 24px; }
.skills__title h2 { max-width: 600px; color: var(--text); font: 600 100px/1.1 var(--font-display); white-space: pre-wrap; }
.skill { position: sticky; top: 0; width: 100%; height: 100vh; z-index: 3; }
#dean-process { z-index: 1; }
.skill__slide {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px;
  height: 100%; padding: 0 24px; background: var(--bg);
}
#dean-process-2 .skill__slide { background: var(--surface); }
#dean-process-3 .skill__slide { background: var(--surface-strong); }
.skill__slide .grid-star { z-index: 5; }
.skill__number { position: absolute; top: 116px; left: 24px; z-index: 2; color: var(--text); font: 500 28px/1 var(--font-display); white-space: pre; }
.skill__title {
  width: min(100%, 520px); max-width: 520px; color: var(--text);
  font: 700 clamp(36px, 3.2vw, 44px)/1.12 'Career Cyrillic', 'Big Shoulders', sans-serif; letter-spacing: -.015em; white-space: pre-wrap;
}
.skill__text {
  width: min(100%, 520px); max-width: 520px; color: var(--text-muted);
  font: 400 18px/1.55 var(--font-text); letter-spacing: -.02em; white-space: pre-wrap;
}

.skills__visual {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: center; align-items: center;
  flex: 1 0 0; width: 1px; height: 100vh; padding-top: 100px;
}
.skills__stage { position: relative; flex: 1 0 0; width: 1px; aspect-ratio: 1.17544; }
.skill-visual {
  position: absolute; inset: 24px; z-index: 0; display: flex; justify-content: center; align-items: center;
  padding: 0 24px; border-radius: 30px; background: var(--bg); opacity: 0; pointer-events: none;
  transition: opacity 360ms ease;
}
.skill-visual.is-active { opacity: 1; z-index: 3; }
.skill-visual > .skill-scene { position: absolute; inset: 0; z-index: 1; }

/* Иллюстрация: объекты из отдельных изображений, каждый появляется своим движением */
.skill-scene { position: relative; width: 100%; height: 100%; isolation: isolate; transform: scale(.85); transform-origin: 50% 50%; }
.skill-scene--mobile { display: none; }
.skill-object {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; z-index: var(--depth, 2);
  opacity: 0; pointer-events: none; --rise: 64px;
}
.skill-object__crop { position: absolute; inset: 0; overflow: hidden; }
.skill-object__image { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.skill-object[data-asset="interface-panel"] { --x: 14%; --y: 10%; --w: 70%; }
.skill-object[data-asset="interface-palette"] { --x: 7%; --y: 59%; --w: 23%; --depth: 4; --delay: 240ms; }
.skill-object[data-asset="interface-tooltip-cursor"] { --x: 62%; --y: 28%; --w: 34%; --depth: 5; --delay: 480ms; }
.skill-object[data-asset="ai-panel"] { --x: 14%; --y: 20%; --w: 49%; }
.skill-object[data-asset="ai-badge"] { --x: 3%; --y: 59%; --w: 21%; --depth: 4; }
.skill-object[data-asset="ai-output-image"] { --x: 73%; --y: 17%; --w: 26%; --depth: 4; --delay: 1100ms; }
.skill-object[data-asset="ai-output-details"] { --x: 73%; --y: 55%; --w: 26%; --depth: 4; --delay: 1350ms; }
.skill-object[data-asset="handoff-wireframe"] { --x: 5%; --y: 12%; --w: 55%; }
.skill-object[data-asset="handoff-product"] { --x: 31%; --y: 25%; --w: 63%; --depth: 3; --delay: 280ms; }
.skill-object[data-asset="handoff-check"] { --x: 79%; --y: 67%; --w: 19%; --depth: 4; --delay: 560ms; }
.skill-connectors {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none;
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
}
.skill-connectors path { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; --line-delay: 600ms; }
.skill-connectors path + path { --line-delay: 800ms; }
@media (min-width: 810px) and (prefers-reduced-motion: no-preference) {
  .skill-visual.is-playing .skill-scene.is-ready .skill-object { animation: skill-rise 900ms cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms) both; }
  .skill-visual.is-playing .skill-scene.is-ready .skill-connectors path { animation: skill-draw 600ms ease-in-out var(--line-delay) both; }
}
@keyframes skill-rise { from { opacity: 0; transform: translate3d(0, var(--rise), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes skill-draw { from { opacity: 0; stroke-dashoffset: 1; } 15% { opacity: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .skill-object { opacity: 1; transform: none; animation: none !important; }
  .skill-connectors path { opacity: 1; stroke-dashoffset: 0; animation: none !important; }
  .skill-visual { transition-duration: 0ms; }
}

@media (max-width: 1199.98px) {
  .skills__title { padding: 48px 16px; }
  .skills__title h2 { font-size: 70px; }
  .skill__slide { padding: 0 16px; }
  .skill__number { left: 16px; }
  .skill-visual { inset: 16px; padding: 0 16px; }
}
@media (max-width: 809.98px) {
  .skills__title { padding: 64px 16px 24px; }
  .skills__title h2 { font-size: 60px; }
  .skill { position: relative; height: auto; }
  .skill__slide { height: auto; padding: 112px 16px 32px; }
  .skill__number { top: 54px; left: 16px; }
  .skill__title { font-size: clamp(34px, 9vw, 42px); }
  .skill__text { font-size: 16px; line-height: 1.5; }
  .skills__visual { display: none; }
  .skill-scene--mobile { display: block; align-self: center; width: min(100%, 340px); height: auto; aspect-ratio: 600 / 500; margin-top: 14px; overflow: visible; }
  .skill-object { --rise: 36px; }
}
@media (max-width: 809.98px) and (prefers-reduced-motion: no-preference) {
  .skill.is-in-view .skill-scene.is-ready .skill-object { animation: skill-rise 900ms cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms) both; }
  .skill.is-in-view .skill-scene.is-ready .skill-connectors path { animation: skill-draw 600ms ease-in-out var(--line-delay) both; }
}

/* ---------- Мои контакты ---------- */
.contact { position: relative; z-index: 4; --inset: 76px; }
.contact__frame { display: flex; justify-content: center; align-items: flex-start; z-index: 2; }
.contact__art-col {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: center; align-items: flex-start;
  flex: 1 0 0; width: 1px; height: 100vh; padding-top: calc(var(--inset) - 24px);
}
.contact__art-box { position: relative; flex: 1 0 0; width: 1px; aspect-ratio: 1.17544; }
.contact-art { position: absolute; inset: 24px; z-index: 2; overflow: hidden; border-radius: 30px; background: #fff; pointer-events: none; isolation: isolate; }
.contact-art__composition { position: absolute; inset: 0; transform: scale(.76); transform-origin: center; }
.contact-art__layer {
  position: absolute; display: block; height: auto; transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden;
  animation: contact-orbit 16s linear infinite; animation-delay: var(--orbit-delay, 0s); animation-play-state: paused;
}
.contact-art.is-animating .contact-art__layer { animation-play-state: running; }
.contact-art__layer img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.contact-art__layer--orb { z-index: 1; width: 84%; left: 5%; top: 27%; }
.contact-art__layer--speech { z-index: 2; width: 82%; left: -13%; top: -8.5%; }
.contact-art__layer--envelope { z-index: 3; width: 50%; left: 58%; top: 8%; }
.contact-art__layer--card { z-index: 4; width: 85.5%; left: 4.5%; top: 38%; }
.contact-art__layer--cursor { z-index: 5; width: 26%; left: 79%; top: 63%; }
/* Объект движется по кругу, оставаясь вертикальным; первый и последний кадр совпадают. */
@keyframes contact-orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-radius, 0%)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--orbit-radius, 0%)) rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) { .contact-art__layer { will-change: auto; animation: none; transform: none; } }

.contact__main { display: flex; flex-direction: column; align-items: flex-start; flex: 1 0 0; width: 1px; z-index: 1; }
.contact__heading { position: relative; z-index: 1; width: 100%; padding: var(--inset) 24px; background: var(--bg); }
.contact__heading-fit { width: 100%; max-width: 600px; overflow: hidden; }
.contact__heading h2 {
  width: max-content; color: var(--text); font: 600 100px/1.1 var(--font-display); white-space: nowrap;
  transform: scaleX(var(--fit, 1)); transform-origin: left center;
}
.contact__form {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  width: 100%; padding: 128px 0 300px; background: var(--bg);
}
.contact__body { display: flex; flex-direction: column; gap: 10px; width: 100%; overflow: clip; }
.contact__intro { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 100%; padding: 24px; }
.contact__intro h3 { width: 100%; color: var(--text); font: 500 35px/1.4 var(--font-display); white-space: pre-wrap; }
.contact__intro p { width: 100%; color: var(--text-muted); font: 500 16px/25.6px var(--font-text); letter-spacing: -.02em; text-wrap: balance; }
.contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: clip; }
.contact-item { display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: 10px; padding: 24px; overflow: clip; }
.contact-item__icon {
  flex: none; width: 19px; height: 19px; background: var(--text-muted);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.contact-item__label { width: 100%; color: var(--text); font: 500 16px/25.6px var(--font-display); white-space: pre-wrap; }
.contact-item__value { width: 100%; color: var(--text-muted); font: 500 16px/25.6px var(--font-text); letter-spacing: -.02em; text-wrap: balance; }
.contact-item__value a { transition: color .2s ease; }
.contact-item__value a:is(:hover, :focus-visible) { color: var(--text); }
.contact-socials { grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: 10px; padding: 24px 30px; overflow: clip; }
.contact-socials__title { display: flex; width: 100%; color: var(--text); font: 500 16px/25.6px 'Big Shoulders', sans-serif; white-space: pre-wrap; }
.contact-socials__title strong { font-family: 'Career Cyrillic', 'Big Shoulders', sans-serif; font-weight: 700; }
.contact-socials__list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; overflow: clip; }
.social-pill {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 6px; height: 34px; padding: 7px 11px 7px 8px;
  border-radius: 90px; background: var(--surface); overflow: hidden; transition: background-color .2s ease;
}
.social-pill::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.social-pill:is(:hover, :focus-visible) { background: var(--surface-strong); }
.social-pill__label { color: var(--text-muted); font: 500 16px/25.6px var(--font-text); letter-spacing: -.02em; white-space: pre; transition: color .2s ease; }
.social-pill:is(:hover, :focus-visible) .social-pill__label { color: var(--text); }
.social-pill__icon { display: flex; justify-content: center; align-items: center; flex: 0 0 20px; width: 20px; height: 20px; overflow: hidden; }
.social-pill__icon--hh { background: url('/assets/social-headhunter-official.svg') center / contain no-repeat; }
.social-pill__icon--whatsapp, .social-pill__icon--linkedin { --c: #25d366; --shape: url('/assets/social-whatsapp.svg'); }
.social-pill__icon--whatsapp { background: #fff; border-radius: 50%; }
.social-pill__icon--linkedin { --c: #0a66c2; --shape: url('/assets/social-linkedin.svg'); }
.social-pill__icon--whatsapp::before, .social-pill__icon--linkedin::before {
  content: ''; display: block; flex: none; width: 20px; height: 20px; background: var(--c);
  -webkit-mask: var(--shape) center / contain no-repeat; mask: var(--shape) center / contain no-repeat;
}
.contact__cta { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 52px 30px; border-radius: 25px; }
.status-pill--contact .status-pill__body { height: 45px; }

/* Линии и звёздочки блока контактов: одна рамка на весь блок */
.contact-grid {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  --divider: 50%; --heading-height: 262px;
}
.contact-grid::after {
  content: ''; position: absolute; inset: 0; border: 1px solid var(--line);
  -webkit-mask-image: radial-gradient(circle at top left, transparent 7px, #000 7.5px), radial-gradient(circle at top right, transparent 7px, #000 7.5px), radial-gradient(circle at bottom left, transparent 7px, #000 7.5px), radial-gradient(circle at bottom right, transparent 7px, #000 7.5px);
  mask-image: radial-gradient(circle at top left, transparent 7px, #000 7.5px), radial-gradient(circle at top right, transparent 7px, #000 7.5px), radial-gradient(circle at bottom left, transparent 7px, #000 7.5px), radial-gradient(circle at bottom right, transparent 7px, #000 7.5px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.contact-grid::before { content: ''; position: absolute; left: 50%; top: 7px; bottom: 7px; width: 1px; background: var(--line); }
.grid-node {
  position: absolute; z-index: 1; width: 14px; height: 14px; transform: translate(-50%, -50%); pointer-events: none;
  background: var(--text);
  -webkit-mask: url('/assets/grid-star.svg') center / contain no-repeat; mask: url('/assets/grid-star.svg') center / contain no-repeat;
}
.grid-node--tl { left: 0; top: 0; }
.grid-node--tc { left: 50%; top: 0; }
.grid-node--tr { left: 100%; top: 0; }
.grid-node--bl { left: 0; top: 100%; }
.grid-node--bc { left: 50%; top: 100%; }
.grid-node--br { left: 100%; top: 100%; }
.grid-node--junction-left { left: var(--divider); top: var(--heading-height); }
.grid-node--junction-right { left: 100%; top: var(--heading-height); }

@media (max-width: 1199.98px) {
  .contact { --inset: 44px; }
  .contact__heading { padding-inline: 16px; }
  .contact__heading h2 { font-size: 70px; }
  .contact__form { padding: 0; }
  .contact__intro h3 { font-size: 25px; }
  .contact__intro p, .contact-item__value, .social-pill__label { font-size: 15px; line-height: 24px; }
  .contact-item__label, .contact-socials__title { font-size: 15px; line-height: 24px; }
  .contact-socials { padding-inline: 24px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) { .contact-socials__list { column-gap: 8px; } }
@media (min-width: 810px) and (max-width: 1019.98px) { .contact-socials__list { max-width: 280px; } }
@media (max-width: 809.98px) {
  .contact__art-col { display: none; }
  .contact__heading h2 { font-size: 60px; }
  .contact__form { justify-content: flex-start; padding: 0 0 64px; }
  .contact__intro p, .contact-item__value, .social-pill__label { font-size: 14px; line-height: 22.4px; }
  .contact-item__label, .contact-socials__title { font-size: 14px; line-height: 22.4px; }
  .contact-socials { padding-inline: 28px; }
  .contact__cta { padding-inline: 28px; }
  .status-pill--contact .status-pill__label { font-size: 13px; line-height: 20.8px; }
  .contact-grid { --divider: 0%; }
  .contact-grid::before, .grid-node--tc, .grid-node--bc { display: none; }
}

/* ---------- Обо мне ---------- */
.about { scroll-margin-top: 110px; }
.about-shell {
  --about-divider-one: 24.39024%;
  --about-divider-two: 75.60976%;
  --about-line: #ededed;
  width: 100%; color: #111;
}
/* Блок «Обо мне» не ограничен шириной 1400 px, как остальные: на широких экранах он во всю ширину. */
.page-band > .about-shell.page-frame { max-width: none; }
html[toggle-theme="dark"] .about-shell { --about-line: var(--line); color: var(--text); }
.about-heading-band {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 224px; padding: 28px 32px; border: 1px solid var(--about-line);
}
.about-heading-band h2 { color: var(--text); font: 600 100px/1.1 var(--font-display); text-align: center; }
.about-content {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr);
  min-height: 820px; border-bottom: 1px solid var(--about-line);
}
.about-metrics {
  display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr); min-width: 0;
  border-left: 1px solid var(--about-line); border-right: 1px solid var(--about-line);
}
.about-metric { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 38px 28px 24px; }
.about-metric:not(:last-child) { border-bottom: 1px solid var(--about-line); }
.about-metric-value { display: block; color: var(--text); font: 700 70px/.92 var(--font-display); letter-spacing: -.035em; }
.about-metric-value-uxui { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.about-metric-uxui-rule { position: relative; display: block; flex: 0 0 64px; height: 1px; margin-inline: 2px; background: #ff5c00; }
.about-metric-uxui-rule::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #ff5c00; }
.about-metric-label { display: block; margin-top: 14px; color: var(--text); font-size: 18px; font-weight: 600; line-height: 1.25; }
html:not([toggle-theme="dark"]) .about-metric-label { color: #111; }
.about-metric p { margin: 11px 0 0; color: #666; font-size: 15px; line-height: 1.42; }
.about-media { position: relative; min-width: 0; }
.about-media-sticky { position: sticky; top: 110px; min-height: 600px; padding: 38px 12px 30px; }
.about-person-video {
  display: block; width: 100%; max-width: 640px; height: auto; margin-inline: auto; aspect-ratio: 4 / 3;
  object-fit: contain; background: #fff; border-radius: 30px;
}
.about-summary { min-width: 0; border-left: 1px solid var(--about-line); border-right: 1px solid var(--about-line); }
.about-summary-sticky { position: sticky; top: 110px; min-height: 600px; padding: 38px 29px 42px; }
.about-summary h3 { color: var(--text); font: 700 35px/1.12 var(--font-display); }
.about-summary p { margin: 24px 0 0; color: #575757; font-size: 18px; line-height: 1.47; }
html[toggle-theme="dark"] :is(.about-metric p, .about-summary p) { color: var(--text-muted); }

/* Звёздочки в узлах сетки блока */
.about-star {
  position: absolute; z-index: 5; width: 14px; height: 14px; transform: translate(-50%, -50%); pointer-events: none;
  background: var(--text);
  -webkit-mask: url('/assets/grid-star.svg') center / contain no-repeat; mask: url('/assets/grid-star.svg') center / contain no-repeat;
}
.about-star-tl { left: 0; top: 0; }
.about-star-tr { left: 100%; top: 0; }
.about-star-bl { left: 0; top: 100%; }
.about-star-br { left: 100%; top: 100%; }
.about-star-divider-one { left: var(--about-divider-one); top: 100%; }
.about-star-divider-two { left: var(--about-divider-two); top: 100%; }
.about-star-bottom-tl { left: 0; top: 100%; }
.about-star-bottom-one { left: var(--about-divider-one); top: 100%; }
.about-star-bottom-two { left: var(--about-divider-two); top: 100%; }
.about-star-bottom-tr { left: 100%; top: 100%; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .about-heading-band { min-height: 188px; padding-inline: 28px; }
  .about-heading-band h2 { font-size: 70px; }
  .about-content { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .about-media { grid-column: 1 / -1; grid-row: 1; min-height: 570px; border: 1px solid var(--about-line); border-top: 0; }
  .about-media-sticky { position: static; min-height: 0; padding: 38px 12px 30px; }
  .about-metrics { grid-column: 1; grid-row: 2; min-height: 780px; }
  .about-summary { grid-column: 2; grid-row: 2; }
  .about-summary-sticky { min-height: 0; }
  .about-star-divider-one, .about-star-divider-two, .about-star-bottom-two { display: none; }
  .about-star-bottom-one { left: 50%; }
}
@media (max-width: 809.98px) {
  .about-heading-band { min-height: 150px; padding: 24px 20px; }
  .about-heading-band h2 { font-size: 60px; }
  .about-content { display: flex; flex-direction: column; min-height: 0; }
  .about-media { order: 0; min-height: 0; border-left: 1px solid var(--about-line); border-right: 1px solid var(--about-line); }
  .about-media-sticky { position: static; min-height: 0; padding: 20px 12px 24px; }
  .about-person-video { width: 100%; border-radius: 20px; }
  .about-summary { order: 1; border-top: 1px solid var(--about-line); }
  .about-summary-sticky { position: static; min-height: 0; padding: 34px 24px 39px; }
  .about-summary h3 { font-size: 32px; }
  .about-summary p { margin-top: 17px; font-size: 17px; }
  .about-metrics { order: 2; grid-template-rows: none; border-top: 1px solid var(--about-line); }
  .about-metric { min-height: 200px; padding: 29px 24px; }
  .about-metric-value { font-size: 63px; }
  .about-metric-uxui-rule { flex-basis: clamp(42px, 15vw, 64px); }
  .about-star-divider-one, .about-star-divider-two, .about-star-bottom-one, .about-star-bottom-two { display: none; }
}

/* ---------- Альтернативные начертания глифов ----------
   Как в исходном дизайне: у заголовков, подписей и «таблеток» включены варианты букв Inter.
   Правило стоит в конце файла, потому что сокращённая запись font выше его сбрасывает.
   Общие элементы (шапка, подвал, карточка проекта) — в конце site.css и project-card.css. */
.hero__greeting, .projects__title, .benefit, .experience__heading,
.skills__title h2, .skill__number, .skill__title, .contact__heading h2, .contact__intro h3,
.contact-item__label, .contact-socials__title {
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11";
}