/* ============ Токены ============ */
:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --line: #d2d2d7;
  --accent: #0071e3;          /* синий Apple */
  --accent-hover: #0077ed;
  --accent-active: #006edb;
  --link: #0066cc;
  --link-dark: #2997ff;
  --black: #000;
  --card-dark: #161617;

  --grad: linear-gradient(90deg, #ff7a18 0%, #ff3d77 35%, #b04dff 68%, #4d7cff 100%);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --container: 1080px;
  --pad: clamp(16px, 4vw, 22px);
  --radius: 28px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ База ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 52px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.menu-open, body.modal-open { overflow: hidden; }
::selection { background: rgba(0, 113, 227, .2); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container { width: 100%; max-width: calc(var(--container) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.muted { color: var(--text-3); }

/* ============ Кнопки и ссылки ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 22px; border-radius: 980px;
  background: var(--accent); color: #fff;
  font-size: 17px; font-weight: 400; letter-spacing: -0.022em;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(.97); background: var(--accent-active); }
.btn--sm { min-height: 28px; padding: 4px 12px; font-size: 12px; letter-spacing: -0.01em; }
.btn--lg { min-height: 52px; padding: 14px 30px; }

.link-arrow { color: var(--link); font-size: 17px; display: inline-flex; align-items: center; gap: 4px; }
.link-arrow::after { content: "›"; font-size: 1.2em; line-height: 1; transition: transform .3s var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ============ Навигация ============ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.is-scrolled { border-color: rgba(0, 0, 0, .1); }
.nav { transition: border-color .3s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
.nav.is-dark { background: rgba(0, 0, 0, .55); color: #f5f5f7; border-color: rgba(255, 255, 255, .08); }
.nav__inner {
  max-width: calc(var(--container) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad);
  height: 52px; display: flex; align-items: center; gap: 24px;
}
.nav__logo { font-size: 21px; font-weight: 600; letter-spacing: .011em; margin-right: auto; }
.nav__links { display: flex; gap: 26px; font-size: 12px; letter-spacing: -0.01em; }
.nav__links a { opacity: .8; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
/* Переключатель языков — сегментированный контрол в стиле Apple */
.lang {
  display: flex; gap: 2px; padding: 2px;
  border-radius: 980px; background: rgba(0, 0, 0, .06);
  transition: background-color .4s var(--ease);
}
.lang button {
  min-width: 30px; height: 24px; padding: 0 8px; border-radius: 980px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text-2);
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.nav.is-dark .lang { background: rgba(255, 255, 255, .12); }
.nav.is-dark .lang button { color: #a1a1a6; }
.nav.is-dark .lang button:hover { color: #f5f5f7; }
.nav.is-dark .lang button[aria-pressed="true"] { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }

/* Плавная смена языка */
main, .footer { transition: opacity .18s var(--ease), filter .18s var(--ease); }
body.lang-switching main, body.lang-switching .footer { opacity: 0; filter: blur(4px); }

.nav__burger { display: none; width: 36px; height: 36px; position: relative; }
.nav__burger span {
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.nav__burger span:first-child { top: 14px; }
.nav__burger span:last-child { top: 21px; }
body.menu-open .nav__burger span:first-child { top: 17.5px; transform: rotate(45deg); }
body.menu-open .nav__burger span:last-child { top: 17.5px; transform: rotate(-45deg); }

/* ---------- Мобильное меню: тёмное, со свечениями и нумерацией ---------- */
.menu {
  position: fixed; inset: 52px 0 auto; height: calc(100vh - 52px); height: calc(100lvh - 52px); z-index: 55; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 20px 24px calc(28px + env(safe-area-inset-bottom) + (100lvh - 100svh));
  overflow-x: hidden; overflow-y: auto;
  background: #000; color: #f5f5f7;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
body.menu-open .menu { opacity: 1; visibility: visible; }
.menu__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.menu__glow { position: absolute; width: 90vw; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .45; }
.menu__glow--1 { left: -40vw; bottom: -20vw; background: #ff5a3c; }
.menu__glow--2 { right: -45vw; top: -10vw; background: #8a4dff; }
.menu__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
}

.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: clamp(28px, 8.5vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .6s var(--ease-out);
}
body.menu-open .menu__links a { opacity: 1; transform: none; transition-delay: calc(.06s + var(--i) * .045s); }
.menu__num {
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.menu__arrow { width: 22px; height: 22px; color: #6e6e73; transition: color .3s, transform .3s var(--ease-out); }
.menu__links a:hover .menu__arrow, .menu__links a:active .menu__arrow { color: #f5f5f7; transform: translateX(4px); }

.menu__footer {
  margin-top: auto; padding-top: 32px; display: grid; gap: 14px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .6s var(--ease-out);
}
body.menu-open .menu__footer { opacity: 1; transform: none; transition-delay: .36s; }
.menu__cta { width: 100%; justify-content: center; padding: 15px 22px; font-size: 17px; }
.menu__social { display: flex; gap: 8px; }
.menu__social a {
  flex: 1; text-align: center; padding: 11px 8px; border-radius: 980px; font-size: 15px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
  transition: background-color .3s;
}
.menu__social a:active { background: rgba(255, 255, 255, .16); }

/* Пока меню открыто, шапка тёмная — как само меню */
body.menu-open .nav { background: #000; color: #f5f5f7; border-color: rgba(255, 255, 255, .08); }
body.menu-open .nav .lang { background: rgba(255, 255, 255, .12); }
body.menu-open .nav .lang button { color: #a1a1a6; }
body.menu-open .nav .lang button[aria-pressed="true"] { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }

/* ============ Анимации появления ============ */
.intro {
  opacity: 0; transform: translateY(24px);
  animation: intro 1.2s var(--ease-out) forwards;
  animation-delay: calc(.1s + var(--d, 0) * .12s);
}
@keyframes intro { to { opacity: 1; transform: none; } }

.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease-out);
  transition-delay: calc(var(--d, 0) * .1s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============ Hero: огромное имя, фото в карточке поверх ============ */
.hero {
  position: relative; z-index: 2; overflow-x: clip; overflow-y: visible; isolation: isolate;
  margin-top: -52px;
  height: 100vh; height: 100svh; min-height: 640px;
  background: #000; color: #f5f5f7;
}
/* Имя — декоративный слой в фирменном градиенте */
.hero__name {
  position: absolute; left: 0; right: 0; top: calc(52px + 3vh); z-index: 0;
  text-align: center; text-transform: uppercase;
  font-size: min(19.6vw, 34vh); font-weight: 800; line-height: .8; letter-spacing: -0.06em;
  pointer-events: none; user-select: none;
}
.hero__name span {
  display: block;
  background: linear-gradient(90deg, #ff7a18 0%, #ff3d77 35%, #b04dff 68%, #4d7cff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: nameRise 1.4s var(--ease-out) both;
}
.hero__name span:nth-child(2) { animation-delay: .12s; }
@keyframes nameRise { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }

/* Сцена с карточкой: задаёт размер и положение, украшения выходят за её края */
.hero__stage {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  width: min(36vw, 560px); height: min(72svh, 800px);
  translate: -50% var(--sy, 0px); transform-origin: 50% 100%;
  animation: cardRise 1.5s var(--ease-out) .25s both;
}
@keyframes cardRise { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }

/* Фото в карточке на пастельном фоне — без обработки, белый фон растворяется в градиенте */
.hero__card {
  position: absolute; inset: 0;
  border-radius: 36px 36px 0 0; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 50% at 15% 15%, #f8cfdf, transparent 70%),
    radial-gradient(60% 50% at 90% 25%, #e1d3fb, transparent 70%),
    radial-gradient(60% 50% at 20% 100%, #fbd3bf, transparent 70%),
    radial-gradient(60% 50% at 95% 95%, #d3def9, transparent 70%),
    #f4f1f6;
  box-shadow: 0 -30px 90px rgba(0, 0, 0, .65);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, .15) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, .15) 92%, transparent 100%);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.hero__card img {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none;
  translate: -50% 0; mix-blend-mode: multiply;
  transform-origin: 50% 35%;
  transition: transform 1s var(--ease-out);
}
/* Отклик при наведении: карточка приподнимается, фото чуть приближается,
   свечение ярче, плашки немного расходятся */
.hero__stage:hover .hero__card { transform: translateY(-10px); box-shadow: 0 -40px 110px rgba(0, 0, 0, .7); }
.hero__stage:hover .hero__card img { transform: scale(1.04); }
.hero__stage:hover .hero__aura { opacity: 1; filter: blur(40px); }
.hero__stage:hover .hero__chip--1, .hero__stage:hover .hero__chip--3 { margin-left: -10px; }
.hero__stage:hover .hero__chip--2, .hero__stage:hover .hero__chip--4 { margin-right: -10px; }

/* Цветное свечение за карточкой */
.hero__aura {
  position: absolute; inset: 8% -22% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 45% at 25% 40%, rgba(255, 90, 60, .55), transparent 70%),
    radial-gradient(40% 45% at 75% 35%, rgba(176, 77, 255, .55), transparent 70%),
    radial-gradient(45% 40% at 50% 75%, rgba(77, 124, 255, .45), transparent 70%);
  filter: blur(50px); transition: filter .7s var(--ease-out);
  animation: auraPulse 8s ease-in-out infinite alternate;
}
@keyframes auraPulse { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }

/* Плашки-теги вокруг карточки */
.hero__chip {
  position: absolute; z-index: 3;
  padding: 10px 18px; border-radius: 980px;
  background: #fff; color: var(--text);
  font-size: clamp(13px, 1vw, 15px); font-weight: 600; white-space: nowrap;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .55);
  transition: translate .8s var(--ease-out), margin .6s var(--ease-out);
  animation: chipIn .9s var(--ease-out) both, chipFloat 6s ease-in-out infinite alternate;
}
.hero__chip--dark { background: #1d1d1f; color: #f5f5f7; border: 1px solid rgba(255, 255, 255, .14); }
.hero__chip i {
  font-style: normal;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero__chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; }
.hero__chip-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35);
}
.hero__chip-icon svg { width: 16px; height: 16px; }
.hero__chip--1 .hero__chip-icon { background: linear-gradient(135deg, #ffb24d, #ff7a18); }
.hero__chip--2 .hero__chip-icon { background: linear-gradient(135deg, #ff7a9c, #ff3d77); }
.hero__chip--3 .hero__chip-icon { background: linear-gradient(135deg, #cf7dff, #b04dff); }
.hero__chip--4 .hero__chip-icon { background: linear-gradient(135deg, #7da2ff, #4d7cff); }
.hero__chip--1 { left: -13%; top: 20%; animation-delay: 1.1s, 0s; }
.hero__chip--2 { right: -20%; top: 34%; animation-delay: 1.25s, -1.5s; }
.hero__chip--3 { left: -9%; top: 58%; animation-delay: 1.4s, -3s; }
.hero__chip--4 { right: -12%; top: 72%; animation-delay: 1.55s, -4.5s; }
@keyframes chipIn { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes chipFloat { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }

/* Вращающийся значок на углу карточки */
.hero__stamp {
  position: absolute; z-index: 4; right: -46px; top: -46px;
  width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center;
  background: #000; color: #f5f5f7;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  animation: chipIn .9s var(--ease-out) 1.7s both;
  transition: background-color .4s;
}
.hero__stamp:hover { background: var(--accent); }
.hero__stamp svg { position: absolute; inset: 0; animation: spin 16s linear infinite; }
.hero__stamp text { fill: currentColor; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hero__stamp-arrow { font-size: 24px; transition: transform .4s var(--ease-out); }
.hero__stamp:hover .hero__stamp-arrow { transform: translateY(3px); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Точечная сетка, растворяющаяся к краям */
.hero__dots {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 75%);
}

/* Мерцающие звёздочки */
.hero__spark { position: absolute; z-index: 1; pointer-events: none; animation: twinkle 3.2s ease-in-out infinite; }
.hero__spark svg { display: block; width: 100%; height: 100%; }
.hero__spark--1 { width: 34px; left: 7%; top: 20%; color: #ff7a18; }
.hero__spark--2 { width: 22px; right: 9%; top: 15%; color: #b04dff; animation-delay: -1s; }
.hero__spark--3 { width: 18px; left: 26%; top: 70%; color: #ff3d77; animation-delay: -2s; }
.hero__spark--4 { width: 28px; right: 5%; top: 64%; color: #4d7cff; animation-delay: -.5s; }
.hero__spark path { fill: currentColor; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }

/* Текст и кнопки по нижним углам */
.hero__corner { position: absolute; z-index: 3; bottom: clamp(32px, 7vh, 72px); max-width: min(27vw, 380px); }
.hero__corner--left { left: clamp(20px, 4vw, 72px); }
.hero__corner--right { right: clamp(20px, 4vw, 72px); text-align: right; }
.hero__eyebrow { font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; color: #a1a1a6; margin-bottom: 10px; }
.hero__title { font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; }
.hero__lead { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.45; color: #a1a1a6; }
.hero__ctas { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; margin-top: 22px; }
.hero .link-arrow { color: var(--link-dark); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; position: relative; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }

/* ============ Манифест (тёмная секция) ============ */
.manifesto { position: relative; z-index: 1; overflow: hidden; background: var(--black); color: #f5f5f7; padding: clamp(100px, 14vw, 180px) 0; }
.manifesto .container { position: relative; z-index: 1; }
.eyebrow { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; margin-bottom: 20px; }
/* Подпись-плашка с градиентной точкой */
.eyebrow--dark {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 12px; margin-bottom: 28px; border-radius: 980px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
  color: #d2d2d7; font-size: 15px; font-weight: 500;
}
.eyebrow--dark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }

/* Украшения блока: точечная сетка, свечения, звёздочки */
.manifesto__dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(60% 55% at 70% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 70% 40%, #000 0%, transparent 75%);
}
.manifesto__glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(110px); opacity: .32;
  animation: glowDrift 14s ease-in-out infinite alternate;
}
.manifesto__glow--1 { width: 40vw; aspect-ratio: 1; left: -14vw; top: 38%; background: #ff5a3c; }
.manifesto__glow--2 { width: 36vw; aspect-ratio: 1; right: -12vw; top: 16%; background: #8a4dff; animation-delay: -7s; }
@keyframes glowDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(3vw, 2vw) scale(1.08); } }
.manifesto__spark--1 { width: 26px; right: 11%; top: 16%; color: #ff3d77; }
.manifesto__spark--2 { width: 20px; left: 7%; bottom: 24%; color: #4d7cff; animation-delay: -1.6s; }
.manifesto__text {
  font-size: clamp(30px, 4.6vw, 56px); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.025em;
}
.manifesto__text .w { color: #424245; transition: color .35s var(--ease); }
.manifesto__text .w.is-lit { color: #f5f5f7; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(72px, 10vw, 130px); }
/* Цифры на тёмных подложках: свечения фона не спорят с градиентом цифр */
.stat {
  position: relative; overflow: hidden;
  padding: 32px 32px 36px; border-radius: 28px;
  background: rgba(22, 22, 24, .78); border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.stat::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad); transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s var(--ease-out) .35s;
}
.stat.is-visible::after { transform: scaleX(1); }
.stat__num { font-size: clamp(56px, 7vw, 96px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; display: inline-block; }
.stat__label { color: #c7c7cc; margin-top: 10px; font-size: 17px; }

/* ============ Секции ============ */
.section { padding: clamp(90px, 12vw, 150px) 0; }
.section--alt { background: var(--bg-alt); }
.section__title {
  max-width: 820px;
  font-size: clamp(36px, 5.2vw, 64px); font-weight: 700;
  line-height: 1.06; letter-spacing: -0.03em;
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* ============ Бенто ============ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.card {
  grid-column: span 2;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg); border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity 1s var(--ease);
}
.card:hover { transform: scale(1.015); box-shadow: 0 18px 50px rgba(0, 0, 0, .08); }
.card__icon { width: 40px; height: 40px; flex-shrink: 0; color: var(--text); margin-bottom: auto; }
.card__icon + .card__title { margin-top: 32px; }
.card__title { font-size: clamp(24px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.14; }
.card__title--xl { max-width: 540px; font-size: clamp(32px, 3.6vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
.card__text { color: var(--text-2); font-size: 17px; }
.card__eyebrow { font-size: 17px; font-weight: 600; display: inline-block; align-self: flex-start; }

.card--vibe {
  grid-column: span 4; grid-row: span 2;
  background: var(--card-dark); color: #f5f5f7;
  min-height: 460px; justify-content: space-between;
}
.card--vibe .card__text { color: #a1a1a6; max-width: 440px; margin-top: 8px; }
.card__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.card__glow {
  position: absolute; z-index: 0; width: 560px; height: 560px; right: -180px; bottom: -260px;
  background: conic-gradient(from 0deg, #ff7a18, #ff3d77, #b04dff, #4d7cff, #ff7a18);
  border-radius: 50%; filter: blur(80px); opacity: .55;
  animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.card__tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.card__tags li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 5px; border-radius: 980px; font-size: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
/* Значки на плашках — полупрозрачные кружки с белой иконкой, как сами плашки */
.card__tag-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14);
}
.card__tag-icon svg { width: 15px; height: 15px; }
.card--stat { grid-column: span 4; justify-content: flex-end; }
.card__big { font-size: clamp(56px, 6vw, 80px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; display: inline-block; align-self: flex-start; margin-bottom: 6px; }
.card__big--langs { font-size: clamp(36px, 3.6vw, 48px); letter-spacing: -0.02em; white-space: nowrap; }

/* ============ Галерея работ ============ */
.works { overflow: hidden; }
.gallery__track {
  --inset: max(var(--pad), calc((100vw - var(--container)) / 2));
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 var(--inset) 8px; scroll-padding: 0 var(--inset);
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gcard {
  position: relative; flex: 0 0 auto; scroll-snap-align: start;
  width: min(84vw, 880px); aspect-ratio: 16 / 10;
  border-radius: var(--radius); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--bg-alt); color: var(--text);
}
.gcard__ph { position: absolute; inset: 0; z-index: -1; transition: transform 1.2s var(--ease-out); }
.gcard:hover .gcard__ph { transform: scale(1.04); }
.gcard__head { max-width: 560px; padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0; }
.gcard__type {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 8px;
}
.gcard__caption {
  font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--text-2);
}
.gcard__caption strong { color: var(--text); font-weight: 600; }
.gcard--dark .gcard__type { color: rgba(245, 245, 247, .6); }
.gcard--dark .gcard__caption { color: #a1a1a6; }
.gcard--dark .gcard__caption strong { color: #f5f5f7; }

/* Скриншот «выглядывает» из нижней части карточки */
.gcard__media { position: relative; flex: 1; margin-top: clamp(20px, 3vw, 32px); }
.gcard__shot {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  display: block; height: auto;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .9s var(--ease-out);
}
.gcard__shot--wide { width: 86%; border-radius: 12px 12px 0 0; }
.gcard__shot--popup { width: var(--w, 34%); border-radius: 18px 18px 0 0; }
.gcard:hover .gcard__shot { transform: translateY(-10px); }

.bg-1 { background: radial-gradient(60% 80% at 80% 90%, rgba(255, 61, 119, .85), transparent 60%), radial-gradient(50% 70% at 100% 30%, rgba(255, 122, 24, .8), transparent 60%), #0b0b0c; }
.bg-2 { background: radial-gradient(70% 80% at 20% 100%, rgba(77, 124, 255, .9), transparent 60%), radial-gradient(60% 60% at 90% 80%, rgba(176, 77, 255, .8), transparent 60%), #08080a; }
.bg-3 { background: radial-gradient(70% 70% at 80% 80%, #d6d6de, transparent 60%), linear-gradient(160deg, #fbfbfd, #e8e8ed); }
.bg-4 { background: radial-gradient(60% 80% at 70% 100%, rgba(48, 209, 88, .7), transparent 60%), radial-gradient(60% 70% at 100% 20%, rgba(100, 210, 255, .65), transparent 60%), #050807; }
.bg-tema { background: radial-gradient(60% 80% at 85% 100%, rgba(242, 131, 32, .55), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(255, 196, 140, .7), transparent 60%), #f8f4ee; }
.bg-kompass { background: radial-gradient(60% 80% at 90% 100%, rgba(42, 74, 200, .35), transparent 60%), radial-gradient(45% 55% at 5% 100%, rgba(232, 72, 72, .22), transparent 60%), #f5f2ec; }
.bg-narva { background: radial-gradient(60% 80% at 85% 100%, rgba(52, 168, 83, .3), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(229, 57, 53, .18), transparent 60%), #f1f3f5; }
.bg-sopranos { background: radial-gradient(60% 80% at 85% 100%, rgba(166, 96, 82, .38), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(30, 70, 55, .22), transparent 60%), #f5ebe7; }
.bg-auto24 { background: radial-gradient(60% 80% at 85% 100%, rgba(0, 102, 204, .32), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(255, 153, 0, .28), transparent 60%), #f3f6fa; }
.bg-green { background: radial-gradient(60% 80% at 85% 100%, rgba(74, 170, 96, .6), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(160, 220, 120, .28), transparent 60%), #0c1910; }
.bg-soon { background: radial-gradient(55% 75% at 85% 100%, rgba(176, 77, 255, .4), transparent 60%), radial-gradient(50% 60% at 5% 100%, rgba(255, 122, 24, .3), transparent 60%), #111113; }
.bg-5 { background: radial-gradient(70% 70% at 90% 90%, #ffd6b8, transparent 60%), radial-gradient(60% 60% at 10% 100%, #ffc2d4, transparent 60%), #fbf6f1; }

.gallery__controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; }
.gallery__dots {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 0 20px; height: 56px; border-radius: 980px;
  background: rgba(232, 232, 237, .72);
}
/* Положение капсулы и отступ под неё считаются в main.js по прокрутке карусели */
.gallery__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 980px; background: rgba(0, 0, 0, .42); transition: background-color .3s; }
.gallery__dot:hover { background: rgba(0, 0, 0, .6); }
/* Градиентная капсула «перетекает» от точки к точке */
.gallery__ind {
  position: absolute; left: 20px; top: 50%; width: 48px; height: 8px; margin-top: -4px;
  border-radius: 980px; background: var(--grad); pointer-events: none;
}
.gallery__arrows { display: flex; gap: 12px; }
.gallery__btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(232, 232, 237, .72); color: var(--text);
  display: grid; place-items: center;
  transition: background-color .3s, opacity .3s, transform .3s var(--ease);
}
.gallery__btn svg { width: 20px; height: 20px; }
.gallery__btn:hover { background: #dcdce1; }
.gallery__btn:active { transform: scale(.94); }
.gallery__btn:disabled { opacity: .36; cursor: default; }

/* Карточка после закрытия окна: сначала пустая, потом скриншот выезжает снизу, текст проявляется */
.gcard--hold .gcard__type, .gcard--hold .gcard__caption, .gcard--hold .gcard__shot, .gcard--hold .gcard__more { opacity: 0; }
.gcard--enter .gcard__type { animation: wmUp .7s var(--ease-out) both; }
.gcard--enter .gcard__caption { animation: wmUp .8s var(--ease-out) .08s both; }
.gcard--enter .gcard__shot { animation: cardScreen 1.05s var(--ease-out) .12s both; }
.gcard--enter .gcard__more { animation: cardPlus .55s var(--ease-out) .5s both; }
@keyframes cardScreen { from { opacity: 0; transform: translateY(45%); } to { opacity: 1; transform: none; } }
@keyframes cardPlus { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

/* Кнопка «+» на карточке — открывает описание */
.gcard { cursor: pointer; }
.gcard__more {
  position: absolute; z-index: 2; right: clamp(16px, 2vw, 24px); bottom: clamp(16px, 2vw, 24px);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(29, 29, 31, .86); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .4s var(--ease-out), background-color .3s;
}
.gcard__more svg { width: 18px; height: 18px; }
.gcard--dark .gcard__more { background: rgba(255, 255, 255, .88); color: var(--text); }
.gcard:hover .gcard__more { transform: scale(1.1) rotate(90deg); }
.gcard__more:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ============ Окно с описанием работы ============ */
.wmodal {
  /* высота «большого» экрана: окно уходит и под полупрозрачную панель Safari */
  position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh; z-index: 90;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(0px, 4vw, 48px) clamp(0px, 3vw, 32px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.wmodal[hidden] { display: none; }
.wmodal.is-open { opacity: 1; }
.wmodal__backdrop {
  position: fixed; inset: 0 0 auto; height: 100vh; height: 100lvh;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.wmodal__sheet {
  position: relative; max-width: 1040px; margin: 0 auto;
  background: var(--bg); border-radius: clamp(0px, 3vw, 32px);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .45);
  transform: translateY(48px) scale(.985);
  transition: transform .55s var(--ease-out), opacity .22s var(--ease);
}
.wmodal.is-open .wmodal__sheet { transform: none; }
.wmodal__sheet.is-swapping { opacity: 0; }
.wmodal__close {
  position: sticky; top: 16px; float: right; z-index: 3;
  margin: 16px 16px 0 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(232, 232, 237, .9); color: var(--text-2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background-color .3s, color .3s, transform .3s var(--ease);
}
.wmodal__close svg { width: 18px; height: 18px; }
.wmodal__close:hover { background: #dcdce1; color: var(--text); }
.wmodal__close:active { transform: scale(.94); }
.wmodal__content { padding: clamp(48px, 7vw, 80px) clamp(24px, 6vw, 72px) clamp(32px, 5vw, 56px); }

.wm-type { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }
.wm-title { font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; }
.wm-lead { max-width: 720px; margin-top: 16px; font-size: clamp(19px, 2vw, 24px); line-height: 1.35; color: var(--text-2); letter-spacing: -0.01em; }
.wm-visit { margin-top: 28px; }

.wm-stage {
  position: relative; overflow: hidden;
  margin: clamp(36px, 5vw, 56px) calc(clamp(24px, 6vw, 72px) * -1 + clamp(0px, 2vw, 16px)) 0;
  border-radius: clamp(16px, 2.4vw, 28px);
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px) 0;
}
.wm-shot {
  display: block; width: 100%;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .06);
}
.wm-stage.has-mobile .wm-shot { width: 80%; }
.wm-phone {
  position: absolute; right: clamp(16px, 4vw, 48px); top: clamp(48px, 9vw, 96px);
  width: 22%; border-radius: clamp(16px, 2.6vw, 30px);
  border: clamp(4px, .6vw, 7px) solid #1d1d1f;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .5);
}
.wm-stage--popup { height: clamp(340px, 52vw, 560px); }
.wm-stage--popup .wm-shot { width: min(380px, 62%); margin: 0 auto; border-radius: 18px 18px 0 0; }

/* Плавное появление снизу из лёгкого размытия (используется карточками после закрытия окна) */
@keyframes wmUp { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.wm-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 5vw, 64px); margin-top: clamp(40px, 6vw, 64px); }
.wmodal h3 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }
.wm-about p { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--text); }
.wm-about p + p { margin-top: 14px; }
.wm-role ul { display: grid; gap: 10px; }
.wm-role li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.4; }
.wm-role li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }

.wm-features { margin-top: clamp(40px, 6vw, 56px); padding-top: clamp(32px, 4vw, 40px); border-top: 1px solid var(--bg-alt); }
.wm-features ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wm-features li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-radius: 16px; background: var(--bg-alt);
  font-size: 16px; line-height: 1.4;
}
.wm-features svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }

.wm-stack { margin-top: clamp(32px, 5vw, 48px); }
.wm-stack .chips li { font-size: 15px; padding: 8px 16px; }

.wm-next { margin-top: clamp(40px, 6vw, 64px); padding-top: 24px; border-top: 1px solid var(--bg-alt); text-align: right; }
.wm-next__btn { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.wm-next__btn span { font-size: 13px; color: var(--text-2); }
.wm-next__btn b { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.02em; transition: color .3s; }
.wm-next__btn:hover b { color: var(--accent); }

@media (max-width: 834px) {
  .wm-body { grid-template-columns: 1fr; }
  .wm-features ul { grid-template-columns: 1fr; }
  .wm-stage.has-mobile .wm-shot { width: 100%; }
  .wm-phone { width: 30%; top: auto; bottom: -28%; right: 6%; }
  .wm-stage.has-mobile { padding-bottom: 0; }
}
@media (max-width: 600px) {
  .wmodal { padding: 0; }
  .wmodal__sheet { border-radius: 0; min-height: 100%; }
  /* «ручка» сверху: окно можно потянуть вниз, чтобы закрыть */
  .wmodal__sheet::before {
    content: ""; position: absolute; top: 8px; left: 50%; z-index: 4;
    width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(0, 0, 0, .18);
  }
  /* пока окно открыто, страница под ним скрыта — не просвечивает под панелью Safari */
  body.modal-open main, body.modal-open .footer { visibility: hidden; }
  /* запас снизу, чтобы последний блок не прятался под панелью браузера */
  .wmodal__content { padding-bottom: calc(32px + env(safe-area-inset-bottom) + (100lvh - 100svh)); }
  .wm-stage { margin-left: calc(clamp(24px, 6vw, 72px) * -1); margin-right: calc(clamp(24px, 6vw, 72px) * -1); border-radius: 0; }
  .wm-phone { width: 36%; }
  /* на телефоне скриншот сайта — от края до края, без боковых отступов */
  .wm-stage--wide { padding: 0; }
  .wm-stage--wide .wm-shot { border-radius: 0; box-shadow: none; }
  .wm-stage--wide .wm-phone { right: 4%; }
}

/* ============ Концепты (тёмная секция) ============ */
.concepts {
  background: var(--black); color: #f5f5f7; overflow: hidden;
  --g1x: 0%; --g1y: 30%; --g1c: rgba(255, 90, 60, .22);
  --g2x: 100%; --g2y: 70%; --g2c: rgba(138, 77, 255, .26);
}
.concepts .container { position: relative; z-index: 1; }
.concepts .muted { color: #86868b; }
.concepts__dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 55% at 50% 45%, #000 0%, transparent 75%);
}
.concepts .section__title { margin-bottom: 20px; }
.concepts__lead { max-width: 640px; font-size: clamp(17px, 1.5vw, 21px); color: #a1a1a6; margin-bottom: clamp(40px, 5vw, 64px); }

/* Карусель на тёмном фоне: точки и стрелки светлые, карточки с тонкой обводкой */
.concepts .gallery { margin-top: 0; }
.concepts .gcard { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.concepts .gallery__dots { background: rgba(255, 255, 255, .1); }
.concepts .gallery__dot { background: rgba(255, 255, 255, .38); }
.concepts .gallery__dot:hover { background: rgba(255, 255, 255, .6); }
.concepts .gallery__btn { background: rgba(255, 255, 255, .1); color: #f5f5f7; }
.concepts .gallery__btn:hover { background: rgba(255, 255, 255, .18); }

/* Карточка «Скоро здесь» в конце карусели концептов */
.gcard--soon { cursor: default; }
.gcard__soon { flex: 1; display: grid; place-items: center; padding-bottom: 8%; }
.gcard__soon-plus {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); color: #fff; box-shadow: 0 18px 44px -14px rgba(176, 77, 255, .75);
  transition: transform .6s var(--ease-out);
}
.gcard__soon-plus svg { width: 32px; height: 32px; }
.gcard--soon:hover .gcard__soon-plus { transform: rotate(90deg) scale(1.06); }

/* ============ Процесс ============ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step {
  background: var(--bg); border-radius: var(--radius); padding: 32px 28px 36px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity 1s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(0, 0, 0, .07); }
.step__num { font-size: 48px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; display: inline-block; margin-bottom: 48px; }
.step__title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.step__text { color: var(--text-2); font-size: 16px; }

/* ============ Стек ============ */
.stack__rows { display: grid; gap: 36px; }
.stack__row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; padding-top: 28px; border-top: 1px solid var(--line); }
.stack__label { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; padding-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: 10px 20px; border-radius: 980px; background: var(--bg-alt);
  font-size: 17px; transition: background-color .3s, color .3s, transform .3s var(--ease);
}
.chips li:hover { background: var(--text); color: #fff; transform: translateY(-2px); }

/* ============ CTA ============ */
.cta { text-align: center; padding: clamp(80px, 12vw, 160px) 0 clamp(100px, 14vw, 180px); }
.cta__title { font-size: clamp(44px, 7.4vw, 96px); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; }
.cta__lead { font-size: clamp(19px, 1.8vw, 24px); color: var(--text-2); margin-top: 20px; }
.cta__actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 36px; }

/* ============ Футер ============ */
.footer { background: var(--bg-alt); color: var(--text-2); font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; padding: 18px 0 22px; }
.footer__note { padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 22px 0; }
.footer__cols a { display: block; margin-top: 10px; color: var(--text-2); }
.footer__cols a:hover { color: var(--text); text-decoration: underline; }
.footer__head { color: var(--text); font-weight: 600; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); }
.footer__bottom a:hover { color: var(--text); text-decoration: underline; }

/* ============ Градиентные акценты на светлых секциях ============ */
/* Мягкие пастельные пятна в фирменных цветах на фоне секций */
.section, .cta { position: relative; isolation: isolate; }
.section::before, .cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* пятна гаснут к верхнему и нижнему краю — на границах секций не остаётся видимых линий */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  background:
    radial-gradient(40% 50% at var(--g1x, 0%) var(--g1y, 0%), var(--g1c, rgba(255, 122, 24, .15)), transparent 70%),
    radial-gradient(40% 50% at var(--g2x, 100%) var(--g2y, 100%), var(--g2c, rgba(77, 124, 255, .15)), transparent 70%);
}
#services { --g1x: 100%; --g1y: 0%; --g1c: rgba(255, 61, 119, .15); --g2x: 0%; --g2y: 100%; --g2c: rgba(176, 77, 255, .15); }
#works { --g1c: rgba(255, 122, 24, .14); --g2c: rgba(77, 124, 255, .15); }
#process { --g1x: 100%; --g1y: 10%; --g1c: rgba(176, 77, 255, .15); --g2x: 0%; --g2y: 90%; --g2c: rgba(255, 61, 119, .14); }
.stack { --g1x: 0%; --g1y: 20%; --g1c: rgba(77, 124, 255, .14); --g2x: 100%; --g2y: 80%; --g2c: rgba(255, 122, 24, .14); }

/* Иконки услуг в цветных кружках — как значки на плашках первого экрана */
.card__icon {
  width: 56px; height: 56px; padding: 14px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #ff7a9c, #ff3d77);
  box-shadow: 0 12px 26px -12px rgba(255, 61, 119, .7);
}
.bento .card:nth-child(3) .card__icon { background: linear-gradient(135deg, #ffb24d, #ff7a18); box-shadow: 0 12px 26px -12px rgba(255, 122, 24, .7); }
.bento .card:nth-child(4) .card__icon { background: linear-gradient(135deg, #cf7dff, #b04dff); box-shadow: 0 12px 26px -12px rgba(176, 77, 255, .7); }

/* Карточка с языками — на пастельном градиенте, как фон под фото */
.card--stat {
  background:
    radial-gradient(60% 90% at 0% 100%, #fde3d4, transparent 70%),
    radial-gradient(50% 90% at 55% 0%, #fbe0ea, transparent 70%),
    radial-gradient(60% 90% at 100% 100%, #dfe6fc, transparent 70%),
    #fff;
}

/* Градиентная обводка при наведении на карточки услуг и шаги */
.step { position: relative; }
.card:not(.card--vibe)::after, .step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s var(--ease-out);
}
.card:not(.card--vibe):hover::after, .step:hover::after { opacity: 1; }

/* Линии в стеке, теги и активная точка галереи — в фирменном градиенте */
.stack__row { border-image: var(--grad) 1; }
.chips li:hover { background: var(--grad); color: #fff; }

/* CTA: цветное «северное сияние» за заголовком */
.cta { overflow: hidden; }
.cta::before {
  inset: 10% 8%; filter: blur(60px);
  background:
    radial-gradient(35% 50% at 28% 55%, rgba(255, 122, 24, .2), transparent 70%),
    radial-gradient(35% 50% at 50% 40%, rgba(255, 61, 119, .16), transparent 70%),
    radial-gradient(35% 50% at 72% 55%, rgba(77, 124, 255, .2), transparent 70%);
  animation: auraPulse 8s ease-in-out infinite alternate;
}

/* Тонкая градиентная линия над футером */
.footer { position: relative; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); opacity: .85; }

/* ============ Адаптив ============ */
@media (max-width: 1068px) {
  .card--vibe { grid-column: span 6; grid-row: auto; min-height: 420px; }
  .card, .card--stat { grid-column: span 3; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 834px) {
  .hero { height: auto; min-height: 0; padding: calc(52px + 28px) 0 48px; display: flex; flex-direction: column; align-items: center; }
  .hero__name { position: relative; top: auto; font-size: 17.5vw; }
  .hero__stage { position: relative; left: auto; translate: none; width: min(80vw, 420px); height: min(100vw, 520px); margin-top: 2vw; }
  .hero__card { border-radius: 28px; -webkit-mask-image: none; mask-image: none; }
  .hero__chip { font-size: 12px; padding: 4px 12px 4px 4px; gap: 7px; }
  .hero__chip-icon { width: 24px; height: 24px; }
  .hero__chip-icon svg { width: 13px; height: 13px; }
  .hero__chip--1 { left: -6%; } .hero__chip--3 { left: -6%; }
  .hero__chip--2 { right: -6%; } .hero__chip--4 { right: -4%; }
  .hero__stamp { width: 84px; height: 84px; right: -14px; top: -28px; }
  .hero__spark--3, .hero__spark--4 { display: none; }
  .hero__corner { position: static; max-width: 520px; padding: 0 var(--pad); text-align: center; }
  .hero__corner--left { margin-top: 32px; }
  .hero__corner--right { margin-top: 14px; }
  .hero__title { font-size: clamp(28px, 7.5vw, 40px); }
  .hero__lead { font-size: 17px; }
  .hero__ctas { flex-direction: row; justify-content: center; align-items: center; gap: 14px 24px; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__logo { font-size: 19px; }
  .stats { grid-template-columns: 1fr; gap: 12px; }
  .stat { padding: 24px 24px 28px; border-radius: 22px; }
  .gcard { aspect-ratio: 4 / 5; width: 82vw; }
  /* сайты с мобильной версией — «телефон», выглядывающий снизу карточки */
  .gcard--has-mobile .gcard__shot--wide { width: 58%; left: 50%; translate: -50% 0; border-radius: 12px 12px 0 0; }
  /* без мобильной версии — широкий скриншот всегда достаёт до низа карточки */
  .gcard:not(.gcard--has-mobile) .gcard__shot--wide { width: auto; height: 100%; max-width: none; left: 8%; translate: 0 0; }
  .gcard__shot--popup { width: var(--wm, 62%); }
  .gallery__dots { height: 48px; }
  .gallery__arrows { display: none; }
  .stack__row { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 600px) {
  .card, .card--stat, .card--vibe { grid-column: span 6; }
  .card--vibe { min-height: 0; }
  .card__glow { width: 420px; height: 420px; right: -160px; bottom: -220px; }
  .steps { grid-template-columns: 1fr; }
  .step__num { margin-bottom: 28px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .intro { opacity: 1; transform: none; }
  .manifesto__text .w { color: #f5f5f7; }
}