/* Токены из Figma (коллекции Primitives / Color / Spacing / Radius) */
:root {
  --primitive-gray-1000: #111113;
  --primitive-gray-950: #141414;
  --primitive-gray-925: #16161a;
  --primitive-gray-900: #262626;
  --primitive-gray-875: #2a2a30;
  --primitive-gray-850: #303030;
  --primitive-gray-800: #363636;
  --primitive-gray-700: #474747;
  --primitive-gray-500: #8a8a94;
  --primitive-gray-200: #d5d5d5;
  --primitive-white: #ffffff;
  --primitive-white-a90: rgba(255, 255, 255, 0.9);
  --primitive-white-a40: rgba(255, 255, 255, 0.4);
  --primitive-white-a30: rgba(255, 255, 255, 0.3);
  --primitive-white-a20: rgba(255, 255, 255, 0.2);
  --primitive-white-a10: rgba(255, 255, 255, 0.1);
  --primitive-gray-950-a80: rgba(20, 20, 20, 0.8);
  --primitive-purple-200: #c8bbfa;
  --primitive-purple-500: #7d60f3;
  --primitive-purple-500-a20: rgba(125, 96, 243, 0.2);
  --primitive-purple-900: #302556;
  --primitive-pink-500: #f45085;
  --primitive-red-400: #ff5a5f;
  --primitive-blue-500: #1f90ef;
  --primitive-navy-900: #1f2a4c;
  --primitive-teal-900: #1a3d56;

  --color-bg-page: var(--primitive-gray-950);
  --color-bg-page-alt: var(--primitive-gray-925);
  --color-bg-surface: var(--primitive-gray-900);
  --color-bg-surface-alt: var(--primitive-gray-875);
  --color-bg-surface-raised: var(--primitive-gray-800);
  --color-bg-overlay: var(--primitive-gray-950-a80);
  --color-bg-inverse: var(--primitive-white);
  --color-bg-tag: var(--primitive-white-a10);
  --color-bg-accent: var(--primitive-purple-500);
  --color-bg-accent-soft: var(--primitive-purple-500-a20);
  --color-bg-accent-dark: var(--primitive-purple-900);
  --color-bg-highlight: var(--primitive-pink-500);
  --color-bg-accent-light: var(--primitive-purple-200);
  --color-text-primary: var(--primitive-white);
  --color-text-primary-soft: var(--primitive-white-a90);
  --color-text-secondary: var(--primitive-gray-500);
  --color-text-inverse: var(--primitive-gray-950);
  --color-text-accent: var(--primitive-purple-200);
  --color-text-highlight: var(--primitive-pink-500);
  --color-text-error: var(--primitive-red-400);
  --color-border-default: var(--primitive-gray-700);
  --color-border-strong: var(--primitive-white);
  --color-border-subtle: var(--primitive-white-a30);
  --color-border-faint: var(--primitive-white-a20);
  --color-border-surface: var(--primitive-gray-875);
  --color-border-info: var(--primitive-blue-500);

  --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-56: 56px; --space-60: 60px; --space-64: 64px; --space-80: 80px; --space-100: 100px;

  --radius-4: 4px; --radius-8: 8px; --radius-12: 12px; --radius-16: 16px; --radius-20: 20px;
  --radius-24: 24px; --radius-40: 40px; --radius-full: 999px;

  --gradient-text: linear-gradient(90deg, #bbcdfa 0%, #e9a0f8 50.48%, #f36e70 100%);
  --gradient-contacts: linear-gradient(155deg, #5b4be0 14.3%, #a94fd6 53.6%, #e2566c 85.7%);
  --shadow-card: 0 10px 12px rgba(0, 0, 0, 0.3);
  --shadow-ds: 0 10px 24px rgba(0, 0, 0, 0.3);

  --font-sans: 'Onest', system-ui, sans-serif;
  --font-mono-title: 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* Брейкпоинт-зависимые значения: десктоп 1440 */
  --page-pad: var(--space-60);
  --page-top: 120px;
  --section-gap: var(--space-100);
  --title-size: 56px;
  --title-gap: var(--space-48);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-text-accent); outline-offset: 3px; border-radius: 4px; }

.accent, .accent-text {
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.accent-text { font-weight: inherit; }

/* Страница */
.page {
  width: 100%;
  max-width: calc(1320px + 2 * var(--page-pad));
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.page--home {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-top: var(--page-top);
}
.page--footer { padding-top: var(--section-gap); padding-bottom: var(--space-40); }

/* Переключатель языка */
.lang {
  position: absolute;
  z-index: 20;
  top: 36px;
  right: max(var(--page-pad), calc((100vw - 1320px) / 2));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  width: 100px;
  height: 52px;
  padding: var(--space-4) var(--space-16);
  border: 1px solid #b2a0f8;
  border-radius: var(--radius-8);
  background: var(--color-bg-overlay);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.lang__item {
  width: 22px;
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
  color: var(--color-text-primary);
}
a.lang__item { opacity: 0.4; transition: opacity 0.2s; }
a.lang__item:hover { opacity: 1; }
.lang__item--active { font-weight: 700; }
.lang__divider { width: 1px; height: 24px; background: var(--color-text-primary); opacity: 0.4; }

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 48px;
  padding: 0 var(--space-40);
  border-radius: var(--radius-8);
  font-size: 20px;
  line-height: 1.35;
  white-space: nowrap;
  transition: transform 0.25s var(--ease);
}
.btn--filled { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.btn--outline { border: 1px solid var(--color-border-strong); color: var(--color-text-primary); }
.btn:hover { transform: translateY(-5px); }

/* Hero */
.hero {
  display: flex;
  align-items: center;
  gap: var(--space-40);
  padding-top: var(--space-40);
}
.hero__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.hero__name {
  font-size: 120px;
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.hero__lead { font-size: 24px; font-weight: 300; line-height: 1.4; }
.hero__lead .accent { display: inline; }
.hero__lead .accent::before { content: ''; display: block; }
.hero__actions { display: flex; gap: var(--space-16); }

/* Фото в рамке-видоискателе */
.viewfinder {
  --vf-ring: 360px;
  --vf-photo: 280px;
  position: relative;
  flex: none;
  width: 480px;
  height: 560px;
  overflow: hidden;
  border: 1px solid var(--color-border-surface);
  border-radius: var(--radius-12);
  background: var(--color-bg-page-alt);
  cursor: url('../img/cursor-photo.png') 24 24, auto;
}
.viewfinder__axis { position: absolute; background: var(--color-border-surface); }
.viewfinder__axis--x { left: 0; right: 0; top: 50%; height: 1px; }
.viewfinder__axis--y { top: 0; bottom: 0; left: 50%; width: 1px; }
.viewfinder__ring, .viewfinder__photo {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.viewfinder__ring {
  width: var(--vf-ring);
  height: var(--vf-ring);
  border: 1px dashed rgba(255, 255, 255, 0.35);
}
.viewfinder__photo {
  width: var(--vf-photo);
  height: var(--vf-photo);
  max-width: none;
  box-shadow: inset 0 0 0 3px var(--color-text-primary);
  transition: transform 0.5s var(--ease);
}
.viewfinder:hover .viewfinder__photo { transform: translate(-50%, -50%) scale(1.04); }
.viewfinder__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 0 solid var(--color-bg-accent-light);
}
.viewfinder__corner--tl { top: 15px; left: 15px; border-top-width: 2px; border-left-width: 2px; }
.viewfinder__corner--tr { top: 15px; right: 15px; border-top-width: 2px; border-right-width: 2px; }
.viewfinder__corner--br { bottom: 15px; right: 15px; border-bottom-width: 2px; border-right-width: 2px; }
.viewfinder__corner--bl { bottom: 15px; left: 15px; border-bottom-width: 2px; border-left-width: 2px; }

/* Секции */
.section { display: flex; flex-direction: column; gap: var(--title-gap); }
.section__title {
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12) var(--space-24);
}
.panel {
  overflow: hidden;
  border: 1px solid var(--color-border-surface);
  border-radius: var(--radius-12);
  background: var(--color-bg-page-alt);
}

/* Обо мне */
.about { display: grid; grid-template-columns: 1fr 1fr; }
.about__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-28) var(--space-32);
  font-size: 20px;
  line-height: 1.45;
  border-color: var(--color-border-surface);
  border-style: solid;
  border-width: 0;
}
.about__item:nth-child(odd) { border-right-width: 1px; }
.about__item:nth-child(-n + 2) { border-bottom-width: 1px; }

/* Ссылка «Вам сюда» */
.visual-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-12);
  font-size: 18px;
  color: var(--color-text-secondary);
}
.visual-link a { display: inline-flex; align-items: center; gap: var(--space-8); line-height: 1.2; }
.visual-link img { transition: transform 0.25s var(--ease); }
.visual-link a:hover img { transform: translateX(4px); }

/* Карточки кейсов */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-32); }
.case {
  --case-bg: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: var(--space-24) var(--space-20);
  border-radius: var(--radius-12);
  background: var(--case-bg);
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.case:hover, .js .case[data-reveal].is-visible:hover { transform: scale(1.03); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45); }
.case__media {
  overflow: hidden;
  aspect-ratio: 604 / 320;
  border-radius: var(--radius-8);
}
.case__media img, .case__phones img { width: 100%; height: 100%; object-fit: cover; }
.case__phones { display: flex; gap: var(--space-20); height: 320px; }
.case__phones img { width: auto; flex: none; aspect-ratio: 9 / 20.7; border-radius: var(--radius-8); }
.case__body { display: flex; flex-direction: column; gap: var(--space-16); }
.case__title { font-family: var(--font-mono-title); font-size: 28px; font-weight: 700; line-height: 1.45; }
.case__text { font-size: 18px; line-height: 1.45; }
.case__bold { font-weight: 700; }
.case__tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.case__tags li {
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-4);
  font-size: 14px;
  line-height: 1.45;
}
.case--triafly { --case-bg: linear-gradient(131deg, #0085ff 0%, #72899e 45%, #0085ff 100%); }
.case--iht { --case-bg: linear-gradient(132deg, #c55081 0%, #8574d1 100%); }
.case--eltex { --case-bg: linear-gradient(132deg, #275ec7 0%, #647699 45%, #275ec7 100%); }
.case--bitazza { --case-bg: linear-gradient(132deg, #10ef88 0%, #577266 45%, #e03d4b 100%); }
.case--pte { --case-bg: linear-gradient(132deg, #24386b 0%, #73744e 51.9%, #fff200 100%); }
.case--top1bet { --case-bg: linear-gradient(132deg, #f6c600 0%, #818147 45.2%, #0c3d8d 100%); }
.case--bitrix { --case-bg: linear-gradient(132deg, #c60c30 0%, #8c646c 50%, #c60c30 100%); }

/* Курсор «Смотреть кейс →» */
.cursor-case {
  position: fixed;
  z-index: 50;
  top: var(--y, 0);
  left: var(--x, 0);
  display: flex;
  align-items: center;
  gap: 6.6px;
  padding: 6.6px 13.2px;
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  box-shadow: 0 5.5px 13px rgba(0, 0, 0, 0.3);
  color: var(--color-text-inverse);
  font-size: 16.5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.2s, transform 0.25s var(--ease);
}
.cursor-case.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor-case svg { width: 23px; height: 23px; }
.has-custom-cursor .case { cursor: none; }

/* Опыт работы */
.jobs { padding: 0 var(--space-32); }
.job {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  grid-template-areas: "num info period";
  align-items: start;
  gap: var(--space-8) var(--space-24);
  padding: var(--space-32) 0;
}
.job + .job { border-top: 1px solid var(--color-border-surface); }
.job__num {
  grid-area: num;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.job__info { grid-area: info; display: flex; flex-direction: column; gap: var(--space-8); }
.job__company { align-self: flex-start; font-size: 26px; font-weight: 700; line-height: 1.45; }
a.job__company { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; transition: color 0.2s; }
a.job__company:hover { color: var(--color-text-accent); }
.job__role { font-size: 18px; color: var(--color-text-primary-soft); opacity: 0.75; }
.job__period {
  grid-area: period;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-align: right;
  color: var(--color-text-secondary);
}

/* Футер «Давайте работать» */
.contacts {
  display: flex;
  align-items: flex-end;
  gap: var(--space-64);
  padding: var(--space-64) var(--space-56);
  border-radius: var(--radius-12);
  background: var(--gradient-contacts);
  scroll-margin-top: var(--space-24);
}
.contacts__title {
  flex: 1 1 0;
  min-width: 460px;
  font-size: 104px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.contacts__links { flex: 1 1 0; min-width: 300px; max-width: 520px; }
.contacts__links a {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.contacts__links li:first-child a { border-top: 1px solid var(--color-border-subtle); }
.contacts__links a span:first-child { flex: 1; }
.contacts__arrow { font-size: 28px; font-weight: 400; }
.contacts__links a span { transition: opacity 0.2s; }
.contacts__links a:hover span { opacity: 0.6; }

/* 404 */
.not-found { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-24); }

/* Появление при скролле */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .case[data-reveal].is-visible { transition: opacity 0.7s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }

/* Планшет: 800 */
@media (max-width: 1199px) {
  :root {
    --page-pad: var(--space-40);
    --page-top: 100px;
    --section-gap: var(--space-80);
    --title-size: 44px;
    --title-gap: var(--space-32);
  }
  .lang { top: 24px; }
  .hero { flex-direction: column; align-items: stretch; gap: var(--space-56); padding-top: var(--space-64); }
  .hero__text { gap: var(--space-32); }
  .hero__name { font-size: 80px; }
  .viewfinder { width: 100%; height: 480px; }
  .about { grid-template-columns: 1fr; }
  .about__item { padding: 36px var(--space-20); border-right-width: 0 !important; }
  .about__item:not(:last-child) { border-bottom-width: 1px; }
  .section__head { align-items: flex-end; }
  .visual-link { flex-direction: column; align-items: flex-start; }
  .cases { grid-template-columns: 1fr; gap: var(--space-20); }
  .case { flex-direction: row; align-items: flex-start; gap: var(--space-32); }
  .case > * { flex: 1 1 0; min-width: 0; }
  .case__phones { height: auto; }
  .case__phones img { flex: 1 1 0; min-width: 0; width: 100%; height: auto; aspect-ratio: 9 / 20.7; }
  .jobs { padding: 0 var(--space-20); }
  .job {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "num info" "num period";
    column-gap: 0;
    padding: var(--space-28) 0;
  }
  .job__role { font-size: 20px; opacity: 1; }
  .job__period { font-size: 15px; text-align: left; }
  .contacts { flex-direction: column; align-items: stretch; gap: var(--space-48); padding: var(--space-48) var(--space-40); }
  .contacts__title { min-width: 0; font-size: 96px; }
  .contacts__links { max-width: none; min-width: 0; }
}

/* Мобильный: 375 */
@media (max-width: 639px) {
  :root {
    --page-pad: var(--space-16);
    --page-top: 80px;
    --section-gap: var(--space-60);
    --title-size: 32px;
    --title-gap: var(--space-20);
  }
  .lang { top: 16px; height: 44px; }
  .hero { gap: var(--space-40); padding-top: var(--space-40); }
  .hero__text { gap: var(--space-24); }
  .hero__name { font-size: 56px; }
  .hero__lead { font-size: 18px; }
  .hero__lead .accent::before { display: none; }
  .hero__actions { gap: var(--space-12); }
  .btn { flex: 1; width: auto; padding: 0 var(--space-16); font-size: 18px; }
  .viewfinder { --vf-ring: 240px; --vf-photo: 168px; height: 400px; }
  .about__item { gap: var(--space-16); padding: var(--space-24) var(--space-16); font-size: 17px; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .visual-link { flex-direction: row; font-size: 16px; }
  .visual-link img { width: 20px; height: 20px; }
  .case { flex-direction: column; align-items: stretch; gap: var(--space-28); padding: var(--space-20) var(--space-16); }
  .case > * { flex: none; }
  .case__phones { gap: var(--space-12); }
  .case__title { font-size: 22px; }
  .case__text { font-size: 16px; }
  .jobs { padding: 0 var(--space-16); }
  .job { grid-template-columns: 52px minmax(0, 1fr); row-gap: var(--space-6); padding: var(--space-20) 0; }
  .job__num { font-size: 26px; }
  .job__info { gap: var(--space-6); }
  .job__company, .job__role { font-size: 16px; }
  a.job__company { text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .job__period { font-size: 12px; }
  .contacts { gap: var(--space-32); padding: var(--space-32) var(--space-20); }
  .contacts__title { font-size: 52px; line-height: 1.1; letter-spacing: -0.03em; }
  .contacts__links a { padding: var(--space-16) 0; font-size: 22px; }
  .contacts__arrow { font-size: 22px; }
  .page--footer { padding-bottom: var(--space-28); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}