/* ==========================================================================
   OKTTA — главная. Вёрстка по макету Figma (кадр 1440px).
   ========================================================================== */

/* Шрифт из UI-кита: PP Neue Corp Normal Medium — одно начертание на весь сайт.
   Диапазон 400–700 указывает браузеру брать этот же файл для любого веса,
   чтобы он не дорисовывал «фальшивый» жирный. Символа ₽ в шрифте нет —
   он подставляется из запасного шрифта Inter. */
@font-face {
  font-family: "PP Neue Corp";
  src: url("fonts/PPNeueCorp-NormalMedium.woff2") format("woff2"),
       url("fonts/PPNeueCorp-NormalMedium.woff") format("woff");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* --- Цвета из UI-кита --- */
  --black: #171717;
  --white: #ffffff;
  --bg-page: #f6f6f6;
  --bg-card: #fcfcfc;

  --black-60: rgba(23, 23, 23, .6);
  --black-40: rgba(23, 23, 23, .4);
  --black-10: rgba(23, 23, 23, .1);
  --black-5:  rgba(23, 23, 23, .05);

  --white-70: rgba(255, 255, 255, .7);
  --white-50: rgba(255, 255, 255, .5);
  --white-20: rgba(255, 255, 255, .2);
  --white-8:  rgba(255, 255, 255, .08);

  /* пятна фона */
  --spot-pink:   #ee99cc;
  --spot-green:  #99eeaa;
  --spot-blue:   #99cdee;
  --spot-sand:   #eecd99;
  --spot-violet: #bc99ee;

  /* --- Типографика из UI-кита --- */
  --fs-display: 130px; --lh-display: 1;   --ls-display: -.01em;
  --fs-h1: 56px;       --lh-h1: 1;        --ls-h1: -.01em;
  --fs-h2: 40px;       --lh-h2: 1;        --ls-h2: -.01em;
  --fs-h3: 32px;       --lh-h3: 1.1;      --ls-h3: -.01em;
  --fs-h4: 24px;       --lh-h4: 1.1;
  --fs-b16: 16px; --fs-b14: 14px; --fs-b12: 12px; --lh-body: 1.4;

  /* --- Семантические алиасы (используются ниже) --- */
  --bg: var(--bg-page);
  --surface: var(--white);
  --surface-2: var(--bg-card);
  --ink: var(--black);
  --muted: var(--black-40);
  --text-2: var(--black-60);
  --line: var(--black);
  --chip: var(--black-5);

  --dark-bg: var(--black);
  --dark-surface: #2b2b2b;   /* white 8% поверх #171717 — непрозрачно, чтобы сайдбар не просвечивал */
  --dark-ink: var(--white);
  --dark-muted: var(--white-50);
  --dark-line: var(--white-20);

  --gutter: 20px;          /* внешний отступ страницы */
  --sidebar-w: 304px;      /* ширина сайдбара */
  --col-gap: 22px;         /* зазор между сайдбаром и контентом */
  --content-left: calc(var(--gutter) + var(--sidebar-w) + var(--col-gap));

  --radius: 4px;
  --font: "PP Neue Corp", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 500 var(--fs-b14)/var(--lh-body) var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.muted { color: var(--muted); }

/* --- Логотип-вордмарк --- */
.logo {
  display: inline-block;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .32em;
  margin-right: -.32em;
}
.logo--sm { font-size: 13px; }
.logo--xs { font-size: 11px; letter-spacing: .25em; }

/* --- Каркас: липкий сайдбар + колонка контента --- */
.shell { position: relative; }
.sidebar-track {
  position: absolute;
  top: var(--gutter);
  bottom: 0;
  left: var(--gutter);
  width: var(--sidebar-w);
  z-index: 20;
  pointer-events: none;
}
.sidebar {
  position: sticky;
  top: var(--gutter);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  height: min(704px, calc(100vh - 2 * var(--gutter)));
  min-height: 560px;
  padding: 28px 10px 10px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.04);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.sidebar__logo { margin: 0 0 0 12px; align-self: flex-start; }
.sidebar__nav { display: flex; flex-direction: column; margin-top: 56px; padding: 0 12px; }
.sidebar__nav a {
  display: flex; justify-content: space-between;
  font-size: var(--fs-b16); line-height: 30px;
  transition: opacity .2s;
}
.sidebar__nav a:hover { opacity: .55; }
.count { color: var(--muted); }
.sidebar__bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.showreel {
  position: relative; display: block;
  aspect-ratio: 282 / 148;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, #f2f2f2 0%, #d8d8d8 55%, #bfbfbf 100%);
}
.showreel img { width: 100%; height: 100%; object-fit: cover; }
.showreel__play {
  position: absolute; left: 50%; top: 50%;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; background: rgba(20,20,20,.85);
  transition: transform .25s var(--ease);
}
.showreel__play::after {
  content: ""; position: absolute; left: 14px; top: 11px;
  border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.showreel:hover .showreel__play { transform: scale(1.1); }

.cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cta {
  display: flex; flex-direction: column;
  min-height: 128px; padding: 12px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-b14); line-height: var(--lh-body);
  transition: transform .25s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.cta:hover { transform: translateY(-2px); }
.cta__icon { width: 12px; height: 12px; opacity: .6; margin-bottom: auto; }
.cta__sub { opacity: .55; }
.cta--primary { background: var(--black); color: var(--white); }
.cta--secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--black-5); }

/* Сайдбар над тёмной секцией */
.sidebar.is-dark { background: var(--dark-surface); color: var(--dark-ink); box-shadow: none; }
.sidebar.is-dark .count { color: var(--dark-muted); }
.sidebar.is-dark .cta--primary { background: #fff; color: var(--ink); }
.sidebar.is-dark .cta--secondary { background: var(--white-8); color: var(--white); box-shadow: none; }

/* --- Общие секции --- */
.content { padding: 0 var(--gutter) 0 var(--content-left); }
.label {
  font-size: 14px; line-height: 1;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.ph {
  position: relative; overflow: hidden;
  background: #e2e2e2;
  border-radius: 2px;
}
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.is-missing {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 12px, transparent 12px 24px),
    #e4e4e4;
}

/* --- HERO --- */
.hero {
  position: relative;
  padding-top: var(--gutter);
  padding-bottom: 72px;
  background:
    radial-gradient(40% 55% at 52% 45%, color-mix(in srgb, var(--spot-pink) 22%, transparent) 0%, transparent 70%),
    radial-gradient(60% 75% at 72% 25%, color-mix(in srgb, var(--spot-blue) 45%, transparent) 0%, transparent 75%),
    radial-gradient(50% 70% at 25% 70%, color-mix(in srgb, var(--spot-blue) 25%, transparent) 0%, transparent 75%),
    var(--bg);
}
.hero::after { /* мягкий переход в серый фон */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(to bottom, rgba(246,246,246,0), var(--bg));
  pointer-events: none;
}
.hero .content { position: relative; z-index: 1; }
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-left: 22px; }
.rank { display: flex; gap: 14px; align-items: flex-start; }
.rank__num { display: flex; flex-direction: column; align-items: center; }
.rank__num span {
  font-size: 54px; line-height: .9; font-weight: 500; letter-spacing: -.04em;
  background: linear-gradient(180deg, #9a9a9a 0%, #4a4a4a 55%, #b5b5b5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rank__num small { font-size: var(--fs-b12); margin-top: 4px; }
.rank p { font-size: var(--fs-b12); line-height: var(--lh-body); padding-top: 3px; }

.assistant { display: flex; gap: 14px; align-items: center; font-size: var(--fs-b12); line-height: var(--lh-body); padding-top: 6px; text-align: left; }
.assistant__icon {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 38px; height: 38px; border-radius: 4px;
  background: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  transition: box-shadow .2s;
}
.assistant:hover .assistant__icon,
.assistant:focus-visible .assistant__icon { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
/* Волна стоит на месте и оживает, пока играет аудио */
.assistant__icon i { width: 2px; background: #333; border-radius: 1px; animation: wave 1.2s ease-in-out infinite; animation-play-state: paused; }
.assistant.is-playing .assistant__icon i { animation-play-state: running; }
.assistant__icon i:nth-child(1){height:8px;animation-delay:-.2s}
.assistant__icon i:nth-child(2){height:16px;animation-delay:-.4s}
.assistant__icon i:nth-child(3){height:12px;animation-delay:-.6s}
.assistant__icon i:nth-child(4){height:18px;animation-delay:-.8s}
.assistant__icon i:nth-child(5){height:8px;animation-delay:-1s}
@keyframes wave { 50% { transform: scaleY(.45); } }

.hero__title {
  max-width: 1020px;
  margin: 238px 0 0 32px;
  font-size: clamp(34px, 3.9vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.clients {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px 32px;
  margin: 72px 0 0 32px;
}
.clients li { display: flex; align-items: center; height: 22px; }
.clients img { height: 18px; width: auto; filter: grayscale(1) brightness(.15); }
.wm { font-weight: 500; font-size: 14px; color: #1d1d1d; white-space: nowrap; }
.wm--agro { font-size: 12px; letter-spacing: -.01em; }
.wm--agro b { font-weight: 500; }
.wm--esprado { font-style: italic; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.wm--b2cpl { font-size: 14px; letter-spacing: .08em; font-weight: 400; }
.wm--okdesk { letter-spacing: .1em; font-weight: 600; }
.wm--neiva { font-size: 12px; }

/* --- ПРОЕКТЫ --- */
.projects { padding-bottom: 110px; }
.project + .project { margin-top: 88px; }
.project__media { display: block; }
.project__media > .ph { aspect-ratio: 1072 / 553; }
.project__media--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.project__media--duo > .ph { aspect-ratio: 534 / 517; }
.project__media:hover img { transform: scale(1.025); }
.project__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; }
.client { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-b14); }
.client__ava {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 11px; font-weight: 600; flex: none;
}
.client__ava--mp { background: #c6f36b; color: var(--black); font-weight: 700; letter-spacing: -.04em; }
.client__ava--yamaha { background: #4a1f86; color: var(--white); }
.client__ava img { width: 62%; height: 62%; object-fit: contain; filter: brightness(0) invert(1); }
.client__ava--lev { background: #2a2a2a; color: #d9c49a; font-family: Georgia, serif; }
.client__ava--sofa { background: #ece6f6; color: #7a5cc4; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 5px 9px; border-radius: 3px; background: var(--chip); color: var(--muted); font-size: var(--fs-b12); line-height: 1.2; }
.project__title { margin-top: 14px; max-width: 520px; font-size: var(--fs-h4); line-height: var(--lh-h4); }

/* --- УСЛУГИ (тёмная) --- */
.services { background: var(--dark-bg); color: var(--dark-ink); padding: 112px 0 80px; }
.services .label { border-color: var(--white-50); margin-bottom: 0; }
.acc { border-bottom: 1px solid var(--dark-line); padding: 36px 0 32px; }
.acc__head { display: flex; width: 100%; justify-content: space-between; align-items: center; text-align: left; }
.acc__title { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.acc__icon { position: relative; width: 22px; height: 22px; flex: none; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor;
  transition: transform .3s var(--ease);
}
.acc__icon::after { transform: rotate(90deg); }
.acc.is-open .acc__icon::after { transform: rotate(0deg); }
.acc__sub { margin-top: 14px; color: var(--dark-muted); font-size: var(--fs-b12); }
.acc__sub i { font-style: normal; margin: 0 6px; }
.acc.is-open .acc__sub { display: none; }
.acc__body { display: none; padding-top: 30px; }
.acc.is-open .acc__body { display: block; animation: accIn .45s var(--ease); }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } }

.arrow-list {
  display: grid; grid-template-columns: repeat(2, max-content); grid-auto-flow: column; grid-template-rows: repeat(4, auto);
  gap: 12px 92px; font-size: var(--fs-b16);
}
.arrow-list a { display: inline-flex; align-items: center; gap: 12px; transition: opacity .2s; }
.arrow-list a::before {
  content: "→"; display: inline-grid; place-items: center;
  width: 14px; height: 14px; border-radius: 2px; background: var(--white-8); color: var(--white-70); font-size: 10px;
}
.arrow-list a:hover { opacity: .6; }
.acc__text { margin-top: 32px; max-width: 700px; color: var(--dark-muted); font-size: var(--fs-b14); line-height: var(--lh-body); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 28px; }
.case { position: relative; display: block; border-radius: 4px; overflow: hidden; }
.case .ph { aspect-ratio: 352 / 290; background: #2b2b2b; }
.case .ph::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to bottom, rgba(23,23,23,0), rgba(23,23,23,.6)); }
.case:hover img { transform: scale(1.04); }
.case__info { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.case__info .client { font-size: var(--fs-b16); gap: 8px; }
.case__info .client__ava { width: 30px; height: 30px; font-size: 10px; }
.dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-b12); color: var(--white); }
.dots li { display: inline-flex; align-items: center; gap: 10px; }
.dots li + li::before { content: ""; width: 3px; height: 3px; background: currentColor; }

/* --- РЕШЕНИЯ --- */
.solutions { padding-top: 32px; padding-bottom: 80px; }
.sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sol {
  position: relative; display: flex; flex-direction: column;
  min-height: 262px; padding: 24px 24px 28px;
  background: var(--surface-2); border-radius: var(--radius);
  transition: background-color .25s;
}
.sol:hover { background: var(--white); }
.sol__icon {
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 4px; overflow: hidden; position: relative;
  color: #fff; font-size: 10px; line-height: 1.15;
}
.sol__icon--recom { background: linear-gradient(135deg, #e8f0ff, #b9cdf6); }
.sol__icon--recom i { width: 30px; height: 30px; border-radius: 50%; border: 6px solid #3f7df0; border-right-color: #9cc0ff; border-bottom-color: #c9dcff; }
.sol__icon--tryon { background: #ef4b2b; }
.sol__icon--tryon i { width: 22px; height: 22px; background:
  linear-gradient(#fff,#fff) center/6px 22px no-repeat,
  linear-gradient(#fff,#fff) center/22px 6px no-repeat; }
.sol__icon--tryon i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #ef4b2b; }
.sol__icon--alert { background: #161616; justify-items: start; align-content: end; padding: 0 0 10px 8px; text-align: left; }
.sol__icon--pimly { background: #161616; }
.sol__icon--pimly i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.sol__icon--pimly i:nth-child(1) { left: 18px; top: 18px; }
.sol__icon--pimly i:nth-child(2) { left: 32px; top: 18px; }
.sol__icon--pimly i:nth-child(3) { left: 25px; top: 30px; }
.sol__icon--finomo {
  background:
    radial-gradient(60% 40% at 50% 80%, rgba(140,180,255,.6), transparent 70%),
    linear-gradient(160deg, #2a46c9 0%, #1b2a8a 60%, #0f1756 100%);
}
.sol__arrow {
  position: absolute; top: 20px; right: 20px;
  display: grid; place-items: center; width: 22px; height: 22px;
  background: var(--black-5); border-radius: 3px; font-size: 11px;
  transition: background-color .2s, color .2s;
}
.sol:hover .sol__arrow { background: var(--ink); color: #fff; }
.sol__title { margin-top: 56px; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.sol__text { margin-top: 18px; max-width: 470px; font-size: var(--fs-b14); line-height: var(--lh-body); color: var(--text-2); }

/* Курс */
.course {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: 78px; padding: 0;
  background: #fff; border-radius: var(--radius); overflow: hidden;
}
.course__body {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 48px 48px 48px 48px;
  background: radial-gradient(70% 90% at 75% 20%, color-mix(in srgb, var(--spot-blue) 30%, transparent), transparent 70%), var(--white);
}
.badge { padding: 6px 9px; border: 1px solid var(--black-10); border-radius: 3px; font-size: var(--fs-b12); color: var(--text-2); }
.course__title { margin-top: 32px; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.course__text { margin-top: 14px; max-width: 340px; font-size: var(--fs-b14); line-height: var(--lh-body); color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.chip { padding: 6px 9px; border-radius: 3px; font-size: var(--fs-b12); }
.chip--violet { background: color-mix(in srgb, var(--spot-violet) 30%, #fff); }
.chip--blue { background: color-mix(in srgb, var(--spot-blue) 35%, #fff); }
.chip--green { background: color-mix(in srgb, var(--spot-green) 35%, #fff); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 40px; padding: 12px 19px;
  background: var(--black); color: var(--white); border-radius: 4px; font-size: var(--fs-b14);
  transition: background-color .2s, transform .2s var(--ease);
}
.btn:hover { background: #333; transform: translateY(-1px); }
.course__art {
  position: relative; overflow: hidden; min-height: 420px;
  background: linear-gradient(200deg, #6f9fe0 0%, #a7c3ea 45%, #e3ecf8 100%);
}
.course__words {
  position: absolute; left: 14%; top: -8%;
  display: flex; flex-direction: column;
  transform: rotate(-12deg); transform-origin: left top;
  color: rgba(255,255,255,.95);
  font-size: clamp(22px, 2.5vw, 36px); line-height: 1.25; font-weight: 500; white-space: nowrap;
}
.course__words span:nth-child(-n+2),
.course__words span:nth-last-child(-n+3) { color: rgba(255,255,255,.35); }

/* --- НОВОСТИ --- */
.news { padding: 72px 0 120px; }
.news__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 88px; align-items: start; }
.news__head { display: flex; justify-content: space-between; font-size: var(--fs-b12); color: var(--muted); margin-bottom: 12px; }
.news-main .ph { aspect-ratio: 1 / 1; }
.news-main:hover img { transform: scale(1.025); }
.news-list { padding-top: 36px; max-width: 382px; }
.news-list li + li { margin-top: 22px; }
.news-item { display: block; padding-bottom: 24px; border-bottom: 1px solid transparent; }
.news-list li:first-child .news-item { border-color: var(--ink); }
.news-item__row { display: flex; gap: 14px; align-items: flex-start; font-size: var(--fs-b16); line-height: var(--lh-body); }
.news-item__row img, .news-item__row.is-missing::before {
  content: ""; width: 50px; height: 50px; object-fit: cover; flex: none; border-radius: 2px;
}
.news-item__row.is-missing { background: none; }
.news-item__row.is-missing::before { background: repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 6px, transparent 6px 12px), #e4e4e4; }
.news-item:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* --- ЦИФРЫ --- */
.stats { padding-bottom: 120px; }
.stats__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; }
.stats__caption { justify-self: center; font-size: var(--fs-h4); line-height: var(--lh-h4); text-align: center; }
.stats__drum { display: flex; flex-direction: column; align-items: center; }
.stats__ghost { font-size: var(--fs-display); line-height: var(--lh-display); color: var(--black-10); letter-spacing: var(--ls-display); transition: opacity .4s; }
.stats__screen { position: relative; width: 372px; height: 238px; margin: 6px 0; background: #111; border-radius: 3px; overflow: hidden; }
.stats__screen .ph { position: absolute; inset: 20px 70px; background: #222; }
.stats__screen .ph img { opacity: .9; }
.stats__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--white); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display);
  transition: transform .45s var(--ease), opacity .45s;
}
.stats__num.is-out { transform: translateY(-30%); opacity: 0; }
.stats__note { justify-self: center; font-size: var(--fs-b12); line-height: var(--lh-body); color: var(--muted); text-align: center; }

/* --- TELEGRAM --- */
.tg-wrap { padding-bottom: 120px; }
.tg {
  position: relative; overflow: hidden;
  min-height: 408px; padding: 40px 44px 44px;
  border-radius: var(--radius);
  background:
    radial-gradient(45% 80% at 85% 70%, color-mix(in srgb, var(--spot-sand) 80%, transparent) 0%, transparent 70%),
    radial-gradient(40% 60% at 60% 100%, color-mix(in srgb, var(--spot-sand) 35%, transparent) 0%, transparent 70%),
    #e8e6e1;
  display: flex; flex-direction: column;
}
.tg__top { display: flex; justify-content: space-between; align-items: center; }
.tg__plus { position: relative; width: 26px; height: 26px; }
.tg__plus::before, .tg__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: #555; }
.tg__plus::after { transform: rotate(90deg); }
.tg__title { margin-top: 58px; max-width: 620px; min-height: 2em; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.caret { display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.1em; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tg__bottom { display: flex; align-items: center; gap: 30px; margin-top: auto; padding-top: 40px; }
.tg__info { display: flex; flex-direction: column; font-size: var(--fs-b14); line-height: var(--lh-body); }
.tg__bottom .btn { margin-top: 0; }
.tg__badges { position: absolute; right: 42px; bottom: 44px; display: flex; }
.tg__circle { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; }
.tg__circle--light { background: #fff; margin-right: -14px; }
.tg__circle--dark { background: #161616; position: relative; }
.tg__circle--dark svg { width: 34px; height: 34px; }

/* --- ФУТЕР --- */
.footer {
  position: relative; overflow: hidden;
  background:
    radial-gradient(38% 55% at 42% 78%, color-mix(in srgb, var(--spot-pink) 40%, transparent) 0%, transparent 70%),
    radial-gradient(30% 40% at 60% 30%, color-mix(in srgb, var(--spot-sand) 18%, transparent) 0%, transparent 70%),
    var(--bg);
}
.footer__inner { padding: 50px var(--gutter) 0; }
.footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 720px; }
.footer__cols h4 { font-weight: 500; color: var(--muted); font-size: var(--fs-b12); margin-bottom: 18px; }
.footer__cols a { display: block; font-size: var(--fs-b14); line-height: 30px; }
.footer__cols a:hover { opacity: .55; }
.footer__side { display: flex; flex-direction: column; gap: 22px; }
.cta-pair--wide { gap: 8px; max-width: 664px; }
.cta-pair--wide .cta { min-height: 126px; }
.cta-pair--wide .cta--secondary { box-shadow: none; }
.socials { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; }
.socials a {
  display: block; padding: 5px 8px; border-radius: 3px;
  background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--black-10); font-size: var(--fs-b12);
  transition: background-color .2s;
}
.socials a:hover { background: #fff; }
.footer__contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 108px; font-size: var(--fs-h4); line-height: var(--lh-h4); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; max-width: 664px; }
.footer__links a:hover { opacity: .55; }
.footer__legal { display: flex; gap: 20px; margin-top: 108px; font-size: var(--fs-b12); color: var(--muted); }
.footer__wordmark { display: block; width: calc(100% - 2 * var(--gutter)); margin: 26px var(--gutter) -6.5%; overflow: visible; }
.footer__wordmark text { font-family: var(--font); font-weight: 500; font-size: 400px; fill: var(--black); }

/* --- Мобильная шапка --- */
.m-header { display: none; }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width: 1279px) {
  :root { --sidebar-w: 260px; }
  .hero__title { margin-top: 180px; }
  .cta { min-height: 112px; }
  .arrow-list { gap: 12px 56px; }
  .stats__screen { width: 320px; height: 210px; }
  .stats__num { font-size: 96px; }
  .stats__ghost { font-size: 88px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 16px; --content-left: var(--gutter); }
  body { padding-top: 60px; }
  body.menu-open { overflow: hidden; }

  .m-header {
    position: fixed; z-index: 40; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    height: 60px; padding: 0 var(--gutter);
    background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
    transition: background-color .35s var(--ease), color .35s var(--ease);
  }
  .m-header.is-dark { background: rgba(34,34,34,.92); color: #fff; }
  .m-header .logo { font-size: 18px; }
  .burger { position: relative; width: 28px; height: 28px; }
  .burger span { position: absolute; left: 3px; right: 3px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
  .burger span:nth-child(1) { top: 10px; }
  .burger span:nth-child(2) { top: 17px; }
  .menu-open .burger span:nth-child(1) { top: 13.5px; transform: rotate(45deg); }
  .menu-open .burger span:nth-child(2) { top: 13.5px; transform: rotate(-45deg); }

  /* сайдбар → выпадающее меню */
  .sidebar-track { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; width: auto; z-index: 39; }
  .sidebar {
    position: absolute; inset: 0; height: auto; min-height: 0;
    border-radius: 0; padding: 12px var(--gutter) var(--gutter);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    overflow-y: auto;
  }
  .menu-open .sidebar { opacity: 1; visibility: visible; transform: none; }
  .sidebar__logo { display: none; }
  .sidebar__nav { margin-top: 8px; padding: 0; }
  .sidebar__nav a { font-size: 26px; line-height: 1.6; }
  .sidebar__bottom { padding-top: 32px; }
  .showreel { max-width: 420px; }

  .hero__top { padding-left: 0; }
  .hero__title, .clients { margin-left: 0; }
  .hero__title { margin-top: 96px; }
  .clients { margin-top: 48px; justify-content: flex-start; gap: 20px 28px; }

  .services { padding-top: 72px; }
  .cases { grid-template-columns: 1fr 1fr; }
  .cases .case:last-child { display: none; }

  .news__grid { gap: 0 40px; }

  .stats__row { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__contacts { grid-template-columns: 1fr; margin-top: 64px; }
  .footer__links { justify-content: flex-start; }
  .footer__legal { margin-top: 56px; }
}

@media (max-width: 767px) {
  .hero { padding-bottom: 48px; }
  .hero__top { flex-direction: column; gap: 18px; }
  .rank__num span { font-size: 44px; }
  .hero__title { margin-top: 64px; font-size: clamp(30px, 8.4vw, 40px); }
  .clients { gap: 16px 24px; }

  .projects { padding-bottom: 72px; }
  .project + .project { margin-top: 56px; }
  .project__media > .ph { aspect-ratio: 4 / 3; }
  .project__meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .project__title { font-size: 20px; }

  .acc { padding: 26px 0 22px; }
  .acc__title { font-size: 26px; }
  .arrow-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .cases { grid-template-columns: 1fr; }
  .cases .case:last-child { display: block; }

  .sol-grid { grid-template-columns: 1fr; }
  .sol { min-height: 0; }
  .sol__title { margin-top: 36px; font-size: 26px; }

  .course { grid-template-columns: 1fr; margin-top: 48px; }
  .course__body { padding: 28px 24px 32px; }
  .course__title { margin-top: 24px; font-size: 26px; }
  .course__art { min-height: 260px; order: -1; }

  .news { padding: 48px 0 72px; }
  .news__grid { grid-template-columns: 1fr; }
  .news-list { padding-top: 32px; max-width: none; }

  .stats { padding-bottom: 72px; }
  .stats__caption { font-size: 22px; }
  .stats__drum { width: 100%; }
  .stats__screen { width: min(100%, 320px); height: 200px; }
  .stats__screen .ph { inset: 16px 48px; }
  .stats__num { font-size: 80px; }
  .stats__ghost { font-size: 72px; }

  .tg-wrap { padding-bottom: 72px; }
  .tg { min-height: 0; padding: 24px 20px 24px; }
  .tg__title { margin-top: 36px; font-size: 28px; }
  .tg__bottom { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 120px; }
  .tg__badges { right: 20px; bottom: 24px; }
  .tg__circle { width: 64px; height: 64px; }
  .tg__circle--dark svg { width: 24px; height: 24px; }

  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__cols > div:last-child { grid-column: 1 / -1; }
  .footer__contacts { font-size: 20px; }
  .footer__links { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}