/* =========================================================
   ПАЛИТРА
   ========================================================= */
:root {
  --bg-deep: #060c1a;
  --bg-base: #0a1628;
  --bg-elev: #0f1d34;
  --bg-card: #142540;
  --bg-mid: #0a1628;
  --bg-soft: #0f1d34;
  
  --line: rgba(168, 179, 199, 0.10);
  --line-strong: rgba(168, 179, 199, 0.22);
  --line-brass: rgba(212, 165, 116, 0.25);
  
  --accent: #d4a574;
  --accent-warm: #e8b56b;
  --accent-glow: #f0c896;
  --accent-deep: #a87c4f;
  --cool: #4a7ab8;
  --cool-light: #6b9bd8;
  
  --text: #f5f5f7;
  --text-mute: #a8b3c7;
  --text-dim: #6b7891;
  --text-faint: #4a5870;
  
  --display: 'Fraunces', Georgia, serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  
  --easing: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

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

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

body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* =========================================================
   НАВИГАЦИЯ
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px clamp(20px, 4vw, 60px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(6, 12, 26, 0.78), rgba(6, 12, 26, 0));
}

.nav-mark {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--text);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.nav-mark .sep { color: var(--accent); font-style: normal; margin: 0 4px; }

.nav-menu {
  display: flex;
  gap: 36px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}

.nav-menu a {
  position: relative;
  padding: 4px 0;
  transition: color 0.35s var(--easing);
}

.nav-menu a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.5s var(--easing);
}

.nav-menu a:hover { color: var(--text); }
.nav-menu a:hover::after { width: 100%; }

/* Переключатель языка */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.lang-btn {
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-mute);
  background: transparent;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  transition: all 0.4s var(--easing);
}

.lang-btn.active {
  background: var(--accent);
  color: var(--bg-deep);
}

.lang-btn:not(.active):hover {
  color: var(--text);
}

@media (max-width: 760px) {
  .nav-menu { display: none; }
}

/* =========================================================
   ОБЩИЕ СЕКЦИИ
   ========================================================= */
.section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 120px clamp(20px, 5vw, 80px) 100px;
  overflow: hidden;
}

/* нумерация секций */
.section-num {
  position: absolute;
  left: clamp(20px, 5vw, 80px);
  bottom: 36px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
}

.section-num .num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.section-num .rule {
  width: 36px;
  height: 1px;
  background: var(--accent-deep);
}

.section-num .label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 760px) {
  .section-num {
    bottom: 16px;
    left: 18px;
    gap: 10px;
  }
  .section-num .num { font-size: 22px; }
  .section-num .rule { width: 20px; }
  .section-num .label { font-size: 9px; letter-spacing: 0.16em; }
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero { background: var(--bg-deep); }

/* ===== АНИМИРОВАННЫЙ ФОН HERO (CSS+SVG, без WebGL) ===== */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Слой звёзд через radial-gradient pattern */
.hero-bg-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(1px 1px at 28% 32%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 12%, rgba(212,165,116,0.9), transparent 50%),
    radial-gradient(0.8px 0.8px at 62% 24%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1.2px 1.2px at 78% 14%, rgba(255,255,255,0.8), transparent 50%),
    radial-gradient(1px 1px at 88% 38%, rgba(212,165,116,0.75), transparent 50%),
    radial-gradient(1.4px 1.4px at 8% 52%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(0.9px 0.9px at 22% 68%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1.1px 1.1px at 38% 48%, rgba(255,255,255,0.65), transparent 50%),
    radial-gradient(1.3px 1.3px at 58% 62%, rgba(212,165,116,0.8), transparent 50%),
    radial-gradient(0.7px 0.7px at 72% 56%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(1.2px 1.2px at 92% 72%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(1px 1px at 15% 88%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.4px 1.4px at 48% 82%, rgba(255,255,255,0.65), transparent 50%),
    radial-gradient(0.9px 0.9px at 82% 92%, rgba(212,165,116,0.7), transparent 50%);
  animation: heroStarsTwinkle 6s ease-in-out infinite;
  opacity: 0.85;
}

@keyframes heroStarsTwinkle {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.5; }
}

/* Дрейфующие тёплые/холодные сияния */
.hero-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-bg-glow-1 {
  width: 50vw; height: 50vw;
  top: -10%; left: 45%;
  background: radial-gradient(circle, rgba(232, 181, 107, 0.32), transparent 70%);
  animation: heroGlowDrift1 24s ease-in-out infinite;
}

.hero-bg-glow-2 {
  width: 60vw; height: 60vw;
  bottom: -20%; left: -15%;
  background: radial-gradient(circle, rgba(74, 122, 184, 0.28), transparent 70%);
  animation: heroGlowDrift2 32s ease-in-out infinite;
}

.hero-bg-glow-3 {
  width: 40vw; height: 40vw;
  top: 40%; right: -10%;
  background: radial-gradient(circle, rgba(212, 165, 116, 0.20), transparent 70%);
  animation: heroGlowDrift3 28s ease-in-out infinite;
}

@keyframes heroGlowDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-8vw, 5vh) scale(1.15); }
  66%      { transform: translate(6vw, -3vh) scale(0.92); }
}
@keyframes heroGlowDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(12vw, -8vh) scale(1.1); }
  80%      { transform: translate(-5vw, 4vh) scale(0.95); }
}
@keyframes heroGlowDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-10vw, -5vh) scale(1.2); }
}

/* SVG силуэт гор с медленным parallax */
.hero-bg-mountains {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 110%;
  height: 50%;
  opacity: 0.9;
  animation: heroMountainsDrift 40s ease-in-out infinite;
}

@keyframes heroMountainsDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-3%); }
}

/* Reduced-motion: всё статично, без анимаций */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-stars,
  .hero-bg-glow,
  .hero-bg-mountains {
    animation: none !important;
  }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: 
    radial-gradient(ellipse 70% 60% at 75% 50%, rgba(212, 165, 116, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(74, 122, 184, 0.12), transparent 70%),
    linear-gradient(180deg, rgba(6, 12, 26, 0.35) 0%, transparent 30%, transparent 70%, rgba(6, 12, 26, 0.85) 100%);
}

.hero-grid {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 50px; }
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: fadeUp 0.9s var(--easing) 0.2s forwards;
}

.hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 5.8vw, 84px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text);
  margin-bottom: 28px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  opacity: 0;
  animation: fadeUp 1.1s var(--easing) 0.35s forwards;
  white-space: nowrap;
}

.hero-title .surname {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 60;
  margin-left: 0.25em;
}

@media (max-width: 700px) {
  .hero-title { white-space: normal; }
  .hero-title .surname { display: block; margin-left: 0; }
}

.hero-tagline {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.4;
  color: var(--text-mute);
  max-width: 560px;
  margin-bottom: 44px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  opacity: 0;
  animation: fadeUp 1.1s var(--easing) 0.5s forwards;
}

.hero-tagline em {
  font-style: italic;
  color: var(--text);
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--body);
  opacity: 0;
  animation: fadeUp 1.1s var(--easing) 0.7s forwards;
}

.hero-meta .role {
  position: relative;
  padding: 16px 22px;
  margin-bottom: 14px;
  border: 1px solid var(--line-brass);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(212, 165, 116, 0.10), rgba(212, 165, 116, 0.02) 70%),
    rgba(20, 37, 64, 0.28);
  box-shadow: 0 12px 34px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.4s var(--easing), border-color 0.4s var(--easing), background 0.4s var(--easing), box-shadow 0.4s var(--easing);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "SOFT" 40;
  text-wrap: balance;
}

.hero-meta .role::before { content: none; }

.hero-meta .role-en {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(12px, 1.05vw, 14px);
  color: var(--text-mute);
  letter-spacing: 0;
  margin-top: 4px;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.hero-meta .stack {
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.hero-meta .contacts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  align-items: center;
}

/* Иконка контакта */
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-mute);
  transition: all 0.4s var(--easing);
}

.contact-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

.contact-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Переключение иконок по языку */
html[lang="ru"] .lang-only-en { display: none !important; }
html[lang="en"] .lang-only-ru { display: none !important; }

/* Ссылка на сайт компании в шапке кейса */
.case-company-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--text-mute);
  margin: 0 0 24px 0;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: all 0.35s var(--easing);
  width: fit-content;
}

.case-company-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(212, 165, 116, 0.06);
}

.case-company-link svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* Портрет на hero */
.hero-portrait {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 480px;
  justify-self: end;
  opacity: 0;
  animation: portraitIn 1.4s var(--easing) 0.6s forwards;
}

@media (max-width: 960px) {
  .hero-portrait { justify-self: start; max-width: 320px; }
}

.hero-portrait::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid var(--line-brass);
  z-index: 1;
  pointer-events: none;
  transform: translate(12px, 12px);
  border-radius: var(--radius-lg);
}

.hero-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, transparent 40%, rgba(6, 12, 26, 0.3) 100%);
  z-index: 3;
  pointer-events: none;
  border-radius: var(--radius-lg);
}

.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  filter: contrast(1.05) saturate(0.92);
  border-radius: var(--radius-lg);
}

/* Угловые маркеры портрета */
.hero-portrait-corner {
  position: absolute;
  width: 40px; height: 40px;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(212, 165, 116, 0.40));
}
.hero-portrait-corner.tl { top: -3px; left: -3px; border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); border-top-left-radius: calc(var(--radius-lg) + 3px); -webkit-mask: radial-gradient(circle 44px at top left, #000 52%, transparent 100%); mask: radial-gradient(circle 44px at top left, #000 52%, transparent 100%); }
.hero-portrait-corner.tr { top: -3px; right: -3px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); border-top-right-radius: calc(var(--radius-lg) + 3px); -webkit-mask: radial-gradient(circle 44px at top right, #000 52%, transparent 100%); mask: radial-gradient(circle 44px at top right, #000 52%, transparent 100%); }
.hero-portrait-corner.bl { bottom: -3px; left: -3px; border-bottom: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); border-bottom-left-radius: calc(var(--radius-lg) + 3px); -webkit-mask: radial-gradient(circle 44px at bottom left, #000 52%, transparent 100%); mask: radial-gradient(circle 44px at bottom left, #000 52%, transparent 100%); }
.hero-portrait-corner.br { bottom: -3px; right: -3px; border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); border-bottom-right-radius: calc(var(--radius-lg) + 3px); -webkit-mask: radial-gradient(circle 44px at bottom right, #000 52%, transparent 100%); mask: radial-gradient(circle 44px at bottom right, #000 52%, transparent 100%); }

/* Скролл-индикатор */
.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  animation: fadeIn 1s var(--easing) 1.4s forwards;
}

.scroll-cue .line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--accent));
  position: relative;
  overflow: hidden;
}

.scroll-cue .line::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 14px;
  background: var(--text);
  animation: scrollDown 2.5s ease-in-out infinite;
}

@media (max-width: 760px) {
  .scroll-cue { display: none; }
}

/* =========================================================
   СЛАЙД-НАВИГАТОР (фиксированные стрелки)
   ========================================================= */
.slide-nav {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--easing);
}

.slide-nav.visible {
  opacity: 1;
  pointer-events: auto;
}

.slide-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--accent-deep);
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--easing);
  padding: 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(212, 165, 116, 0.08);
}

.slide-nav-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  transition: transform 0.4s var(--easing);
}

.slide-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(212, 165, 116, 0.08);
}

.slide-nav-btn:hover svg { transform: translateY(2px); }
.slide-nav-btn.prev:hover svg { transform: translateY(-2px); }

.slide-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.slide-nav-btn:disabled:hover {
  border-color: var(--line-strong);
  color: var(--text-mute);
  background: rgba(6, 12, 26, 0.65);
}

.slide-nav-btn:disabled:hover svg { transform: none; }

/* Индикатор номера экрана между стрелками */
.slide-nav-indicator {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: 4px 0;
  white-space: nowrap;
}

.slide-nav-indicator strong {
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 600px) {
  .slide-nav-btn { width: 42px; height: 42px; }
}

/* =========================================================
   2. PROFILE
   ========================================================= */
.profile {
  background: var(--bg-base);
  background-image: 
    radial-gradient(ellipse 40% 60% at 100% 50%, rgba(212, 165, 116, 0.08), transparent 60%);
}

.profile-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.profile-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

/* ===== БОЛЬШАЯ ЦЕНТРАЛЬНАЯ ЦИТАТА ===== */
.profile-hero-quote {
  position: relative;
  max-width: 1050px;
  margin: 0 auto 80px;
  text-align: center;
  padding: 30px 30px 0;
}

.profile-hero-mark {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: clamp(140px, 16vw, 200px);
  line-height: 1;
  color: var(--accent);
  font-style: italic;
  font-weight: 300;
  opacity: 0.5;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  pointer-events: none;
  text-shadow: 0 0 60px rgba(212, 165, 116, 0.25);
}

.profile-quote-main {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--accent-glow);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  text-wrap: balance;
  max-width: 950px;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(212, 165, 116, 0.18);
  position: relative;
}

.profile-quote-main em {
  font-style: italic;
  color: var(--text); /* белый — лучше контрастирует с золотым цветом цитаты */
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.profile-quote-attr {
  margin-top: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.profile-quote-rule {
  display: inline-block;
  width: 50px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* Золотистый разделитель между цитатой и сеткой деталей */
.profile-divider {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 70px;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(212, 165, 116, 0.4) 30%,
    rgba(212, 165, 116, 0.6) 50%,
    rgba(212, 165, 116, 0.4) 70%,
    transparent);
}

/* ===== 3-колоночная сетка деталей ===== */
.profile-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

@media (max-width: 960px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

.profile-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-col-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(212, 165, 116, 0.2);
  position: relative;
}
.profile-col-label::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

/* Колонка статов */
.profile-col-stats { gap: 36px; }

.stat-large .stat-value {
  font-family: var(--display);
  font-size: clamp(54px, 6vw, 78px);
  line-height: 0.95;
  font-weight: 300;
  color: var(--text);
  font-variation-settings: "opsz" 144, "SOFT" 60;
  margin-bottom: 12px;
}
.stat-large .stat-value em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.stat-large .stat-value .unit {
  font-size: 0.5em;
  color: var(--accent);
  margin-left: 4px;
}
.stat-large .stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.5;
}

/* Колонка био */
.profile-col-bio .profile-text-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-mute);
  margin: 0;
}
.profile-col-bio .profile-text-body strong {
  color: var(--text);
  font-weight: 500;
}

/* Колонка индустрий */
.profile-col-industries .industry-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  color: var(--text);
}
.profile-col-industries .industry-row:last-child { border-bottom: none; }

.profile-col-industries .industry-row .years {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 4px 12px;
  border: 1px solid rgba(212, 165, 116, 0.3);
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.05);
  white-space: nowrap;
}

/* ===== ЗАГОЛОВОК-ЦИТАТА В ПРОФИЛЕ ===== */
.profile-title,
.profile-quote-main {
  position: relative;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 36px;
  padding: 28px 0 24px 48px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

/* Цитата-заголовок: меньше кегль (текст длиннее), курсив, золотистый оттенок */
.profile-quote-main {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  font-style: italic;
  font-weight: 300;
  color: var(--accent-glow);
  font-variation-settings: "opsz" 144, "SOFT" 80;
  text-shadow: 0 0 60px rgba(212, 165, 116, 0.12);
}

.profile-title::before,
.profile-quote-main::before {
  content: '\201C';
  position: absolute;
  left: -8px;
  top: -28px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(120px, 13vw, 180px);
  line-height: 1;
  color: var(--accent);
  opacity: 0.28;
  letter-spacing: 0;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  pointer-events: none;
}

.profile-title::after,
.profile-quote-main::after {
  content: '';
  position: absolute;
  left: 0;
  top: 38px;
  bottom: 38px;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent,
    var(--accent) 18%,
    var(--accent) 82%,
    transparent
  );
}

.profile-title em,
.profile-quote-main em {
  font-style: italic;
  color: var(--text); /* белый — лучше контрастирует с золотым цветом цитаты */
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.profile-text-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-mute);
  margin-bottom: 40px;
}

.profile-text-body strong {
  color: var(--text);
  font-weight: 500;
}

/* Сетка показателей */

.profile-stats.two-up { gap: 40px; }
.profile-stats.two-up .stat-value { font-size: clamp(48px, 6vw, 78px); }
.profile-stats.two-up .stat-label { font-size: 12px; line-height: 1.5; }

.stat {
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}

.stat-value {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}

.stat-value em {
  font-style: italic;
  color: var(--accent);
}

.stat-value .unit {
  font-size: 0.5em;
  color: var(--accent);
  margin-left: 4px;
  font-style: italic;
}

.stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Боковая колонка профиля — цитата + ключевые отрасли */

.industry-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}

.industry-row .name {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  color: var(--text);
  line-height: 1.3;
}

.industry-row .years {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid var(--accent-deep);
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.05);
  flex-shrink: 0;
}

/* =========================================================
   3. TIMELINE
   ========================================================= */
.timeline {
  background: var(--bg-deep);
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(212, 165, 116, 0.08), transparent 70%);
}

.timeline-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.timeline-header {
  margin-bottom: 80px;
  max-width: 700px;
}

.timeline-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.timeline-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.timeline-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  margin-bottom: 16px;
}

.timeline-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.timeline-subtitle {
  font-family: var(--body);
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.6;
}

/* Сам таймлайн — горизонтальный */
.timeline-track {
  position: relative;
  padding: 60px 0 40px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-deep) transparent;
}

.timeline-track::-webkit-scrollbar { height: 4px; }
.timeline-track::-webkit-scrollbar-thumb { background: var(--accent-deep); border-radius: 2px; }
.timeline-track::-webkit-scrollbar-track { background: transparent; }

.timeline-line {
  position: relative;
  display: flex;
  gap: 0;
  align-items: stretch;
  min-width: 100%;
}

.timeline-line::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong) 5%, var(--line-strong) 95%, transparent);
}

.tl-node {
  flex: 1;
  min-width: 220px;
  min-height: 260px;
  position: relative;
  padding: 0 16px;
}

.tl-node-content {
  position: absolute;
  left: 16px;
  right: 16px;
  text-align: center;
}

.tl-node-content:not(.below) {
  bottom: 50%;
  margin-bottom: 36px;
}

.tl-node-content.below {
  top: 50%;
  margin-top: 36px;
}

.tl-node-year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 8px;
}

.tl-node-company {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  line-height: 1.15;
}

.tl-node-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  text-transform: uppercase;
  line-height: 1.4;
}

.tl-node-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 1px solid var(--accent);
  z-index: 2;
  transition: all 0.4s var(--easing);
}

.tl-node:hover .tl-node-dot {
  background: var(--accent);
  box-shadow: 0 0 16px var(--accent);
  transform: translate(-50%, -50%) scale(1.4);
}

/* Коннектор — вертикальная линия от текста к точке */
.tl-node-content:not(.below)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 24px;
  background: var(--line-strong);
  transform: translateX(-50%);
}

.tl-node-content.below::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 24px;
  background: var(--line-strong);
  transform: translateX(-50%);
}

/* убираем старый ручной connector */
.tl-node-connector { display: none; }

/* =========================================================
   КЕЙСОВЫЕ БЛОКИ
   ========================================================= */
.case {
  background: var(--bg-base);
}

/* варьируем фоновые подсветки для разных кейсов */
/* === БРЕНДИРОВАННЫЕ ФОНЫ ДЛЯ КАЖДОГО КЕЙСА === */
/* SportSpired Games — диагональные energy-lines + крупная decorative форма (стадион/арена) */
/* Старые декорации (SVG-паттерны, ::after) удалены — все фоны теперь через canvas. */

/* Контент кейса должен быть выше декорации */
.case > * { position: relative; z-index: 2; }

.case-grid {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 5vw, 100px);
  align-items: center;
}

/* для нечётных кейсов меняем порядок (визуал справа, текст слева) */
.case:nth-of-type(even) .case-grid {
  grid-template-columns: 1.15fr 0.85fr;
}
.case:nth-of-type(even) .case-visual {
  order: 2;
}

@media (max-width: 960px) {
  .case-grid, .case:nth-of-type(even) .case-grid { grid-template-columns: 1fr; gap: 60px; }
  .case:nth-of-type(even) .case-visual { order: 0; }
}

/* === ВИЗУАЛ КЕЙСА — ВАРИАНТ A: чёткая картинка, тонкая золотая рамка, corner brackets, мягкая aura === */
.case-visual {
  position: relative;
  aspect-ratio: 4/3;
  max-width: 920px;
  width: 100%;
  justify-self: center;
  /* НИКАКОГО box-shadow на самом контейнере — он создавал ТВ-эффект.
     Тонкая рамка устанавливается на .case-illustration ниже. */
}

/* ===== ПОЛНОЭКРАННЫЙ АНИМАЦИОННЫЙ ФОН КЕЙСА ===== */
.case { position: relative; overflow: hidden; }
.case-grid, .case-content, .case-visual { position: relative; z-index: 5; }
/* section-num — НЕ трогаем position (остаётся absolute bottom-left), только поднимаем z-index */
.section-num {
  position: absolute !important;
  left: clamp(20px, 5vw, 80px) !important;
  bottom: 36px !important;
  top: auto !important;
  right: auto !important;
  z-index: 20 !important;
}

.case-bg-full {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.case-particles-full,
.case-matrix-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.case-particles-full { opacity: 0.7; }
.case-matrix-full { opacity: 0.45; }

/* ===== АТМОСФЕРНЫЙ ФОН КЕЙСА — один субтильный glow + canvas сверху ===== */
/* Никаких orb-ов с blur — они давали серые прямоугольники-артефакты */
.case-bg-orb {
  display: none !important; /* отключены — не используются */
}

/* Уникальный атмосферный glow на саму секцию case — мягкий и спокойный */
.case-bg-sportspired { background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(80, 180, 120, 0.12), transparent 65%); }
.case-bg-yadro       { background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(74, 122, 184, 0.16), transparent 65%); }
.case-bg-strikerz    { background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(232, 181, 107, 0.12), transparent 65%); }
.case-bg-mygames     { background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(180, 120, 220, 0.12), transparent 65%); }
.case-bg-disney      { background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(232, 181, 107, 0.14), transparent 65%); }

/* ===== КАРТИНКА КЕЙСА: чёткая, цветная, в тонкой золотой рамке ===== */
.case-illustration {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  /* Тонкая золотая рамка — видна со всех сторон одинаково */
  border: 1px solid rgba(212, 165, 116, 0.42);
  border-radius: var(--radius-lg);
  /* Симметричная тень + лёгкое золотое свечение — равномерно по всем краям */
  box-shadow: 
    0 0 40px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(212, 165, 116, 0.10);
  filter: saturate(1.2) brightness(1.05) contrast(1.05);
  animation: caseBreathe 11s ease-in-out infinite;
}

@keyframes caseBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.01); }
}

/* CORNER BRACKETS — золотые маркеры за пределами картинки (как hero portrait) */
.case-visual::after {
  content: '' !important;
  display: none !important;
  position: absolute;
  inset: -8px;
  z-index: 7;
  pointer-events: none;
  background:
    /* TOP-LEFT */
    linear-gradient(to right,  var(--accent), transparent 24px) top    left   / 24px 2px no-repeat,
    linear-gradient(to bottom, var(--accent), transparent 24px) top    left   / 2px 24px no-repeat,
    /* TOP-RIGHT */
    linear-gradient(to left,   var(--accent), transparent 24px) top    right  / 24px 2px no-repeat,
    linear-gradient(to bottom, var(--accent), transparent 24px) top    right  / 2px 24px no-repeat,
    /* BOTTOM-LEFT */
    linear-gradient(to right,  var(--accent), transparent 24px) bottom left   / 24px 2px no-repeat,
    linear-gradient(to top,    var(--accent), transparent 24px) bottom left   / 2px 24px no-repeat,
    /* BOTTOM-RIGHT */
    linear-gradient(to left,   var(--accent), transparent 24px) bottom right  / 24px 2px no-repeat,
    linear-gradient(to top,    var(--accent), transparent 24px) bottom right  / 2px 24px no-repeat;
  opacity: 1;
}

/* МЯГКАЯ AURA позади — НЕ inner glow, просто радиальное свечение цвета кейса.
   Опционально, не яркая, не ТВ. */
.case-visual::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: -15%;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 60% at center, rgba(74, 122, 184, 0.18) 0%, rgba(74, 122, 184, 0.05) 45%, transparent 80%);
  animation: caseAuraPulse 11s ease-in-out infinite;
}
.case-sportspired .case-visual::before { background: radial-gradient(ellipse 60% 60% at center, rgba(80, 180, 120, 0.20) 0%, rgba(80, 180, 120, 0.05) 45%, transparent 80%); }
.case-yadro .case-visual::before        { background: radial-gradient(ellipse 60% 60% at center, rgba(74, 122, 184, 0.25) 0%, rgba(107, 181, 255, 0.06) 45%, transparent 80%); }
.case-strikerz .case-visual::before     { background: radial-gradient(ellipse 60% 60% at center, rgba(74, 122, 184, 0.20) 0%, rgba(232, 181, 107, 0.05) 45%, transparent 80%); }
.case-mygames .case-visual::before      { background: radial-gradient(ellipse 60% 60% at center, rgba(180, 120, 220, 0.22) 0%, rgba(180, 120, 220, 0.05) 45%, transparent 80%); }
.case-disney .case-visual::before       { background: radial-gradient(ellipse 60% 60% at center, rgba(232, 181, 107, 0.22) 0%, rgba(74, 122, 184, 0.06) 45%, transparent 80%); }

@keyframes caseAuraPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* СЛОГАН под картинкой — italic, тёплый акцент, как подпись художника */
.case-visual-label {
  position: absolute;
  bottom: -42px;
  left: 0;
  right: 0;
  z-index: 8;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: -0.005em;
  color: var(--accent-glow);
  text-align: center;
  pointer-events: none;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  text-shadow: 0 0 40px rgba(212, 165, 116, 0.20);
}

.case-visual-frame { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .case-bg-orb, .case-illustration, .case-visual::before { animation: none !important; }
}

.case-visual-frame {
  position: absolute;
  inset: 20px;
  border: 1px solid var(--line);
  z-index: 1;
  pointer-events: none;
}

.case-visual-frame::before,
.case-visual-frame::after {
  content: '';
  position: absolute;
  background: var(--accent);
}

.case-visual-frame::before { top: -1px; left: -1px; width: 20px; height: 1px; }
.case-visual-frame::after { top: -1px; left: -1px; width: 1px; height: 20px; }

/* === КОНТЕНТ КЕЙСА === */
.case-content { max-width: 600px; }

.case-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

/* Монограмма — маленький квадрат с буквой компании */
.company-mono {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono); /* единый шрифт для всех */
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.company-mono.disney    { background: linear-gradient(135deg, #1a3a6a, #0f2545); color: var(--accent-glow); border-color: rgba(212, 165, 116, 0.3); }
.company-mono.mygames   { background: linear-gradient(135deg, #2a1a44, #1a0f30); color: #d4a574; border-color: rgba(212, 165, 116, 0.3); }
.company-mono.strikerz  { background: linear-gradient(135deg, #1a3328, #0e2018); color: #e8b56b; border-color: rgba(212, 165, 116, 0.3); }
.company-mono.yadro     { background: linear-gradient(135deg, #1a2438, #0f1828); color: #6b9bd8; border-color: rgba(107, 155, 216, 0.3); }
.company-mono.sportspired { background: linear-gradient(135deg, #2a1f1a, #1a120e); color: var(--accent-glow); border-color: rgba(212, 165, 116, 0.3); }

.case-head-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-head-period {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.case-head-cat {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Компания — большой заголовок */
.case-company {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.case-company em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.case-company.case-company-tight {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.case-company .inc {
  color: var(--text-mute);
  font-size: 0.65em;
  font-style: italic;
  font-weight: 300;
  margin-left: 0.1em;
}

.case-role::before {
  content: '';
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
  animation: roleGlow 3s ease-in-out infinite;
}

@keyframes roleGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* === НОВАЯ СТРУКТУРА ДОЛЖНОСТИ === */
.case-position {
  position: relative;
  padding: 16px 22px;
  margin-bottom: 28px;
  border: 1px solid var(--line-brass);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(212, 165, 116, 0.10), rgba(212, 165, 116, 0.02) 70%),
    rgba(20, 37, 64, 0.28);
  box-shadow: 0 12px 34px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.4s var(--easing), border-color 0.4s var(--easing), background 0.4s var(--easing), box-shadow 0.4s var(--easing);
}

.case-position::before { content: none; }

.hero-meta .role:hover,
.case-position:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 165, 116, 0.45);
  border-left-color: var(--accent-warm);
  background:
    linear-gradient(135deg, rgba(212, 165, 116, 0.17), rgba(212, 165, 116, 0.05) 70%),
    rgba(20, 37, 64, 0.34);
  box-shadow: 0 20px 46px -22px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(212, 165, 116, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.case-position-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  opacity: 0.8;
}

.case-position-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  font-variation-settings: "opsz" 144, "SOFT" 40;
  text-wrap: balance;
}

.case-position-en {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--text-mute);
  letter-spacing: 0;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.case-org-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 18px;
  padding-left: 0;
}

.case-org-meta strong {
  color: var(--text-mute);
  font-weight: 500;
}

.case-narrative {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mute);
  margin-bottom: 36px;
  max-width: 560px;
}

.case-narrative strong {
  color: var(--text);
  font-weight: 500;
}

.case-narrative em {
  font-family: var(--display);
  font-style: italic;
  color: var(--accent-glow);
  font-weight: 400;
  font-size: 1.05em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

/* Метрики */
.case-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
}

.metric {
  background: var(--bg-base);
  padding: 20px 22px;
  position: relative;
  transition: background 0.4s var(--easing);
}

.metric:hover { background: var(--bg-elev); }

.metric-value {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(26px, 3.3vw, 38px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 8px;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}

/* Если в value текст-аббревиатура (TBD и т.п.) — italic, золотистый, чуть меньше */
.metric-value-text {
  font-style: italic;
  color: var(--accent-glow);
  letter-spacing: -0.01em;
  font-size: clamp(24px, 3vw, 34px);
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.metric-value .unit {
  font-size: 0.5em;
  color: var(--accent);
  margin-left: 4px;
  font-style: italic;
}

.metric-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Акцент в label (расшифровка аббревиатур типа The Big Deal) */
.metric-label em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--accent-glow);
}

/* Теги */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all 0.3s var(--easing);
}

.case-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* =========================================================
   9. COMPETENCIES
   ========================================================= */
.competencies {
  background: var(--bg-base);
  background-image: 
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(212, 165, 116, 0.10), transparent 60%);
}

.comp-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.comp-header {
  margin-bottom: 70px;
  max-width: 720px;
}

.comp-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.comp-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.comp-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  margin-bottom: 16px;
}

.comp-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.comp-subtitle {
  font-family: var(--body);
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.6;
}

.comp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 960px) { .comp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .comp-grid { grid-template-columns: 1fr; } }

.comp-cell {
  background: var(--bg-base);
  padding: 28px 26px;
  position: relative;
  transition: background 0.4s var(--easing);
}

.comp-cell:hover { background: var(--bg-elev); }

.comp-cell-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 18px;
}

.comp-cell-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  color: var(--text);
  font-variation-settings: "opsz" 144, "SOFT" 40;
}

.comp-cell-title em {
  font-style: italic;
  color: var(--accent);
}

.comp-cell-desc {
  font-family: var(--body);
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
}

/* =========================================================
   10. ЧТО ИЩУ — PILLS
   ========================================================= */
.lookingfor {
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 100%);
}

.lookingfor-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.lookingfor-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.lookingfor-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 24px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.lookingfor-title em {
  color: var(--accent);
  font-style: italic;
}

.pills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 50px;
  max-width: 900px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  transition: all 0.4s var(--easing);
  position: relative;
  cursor: default;
  overflow: hidden;
}

/* Бегущая золотая подсветка (sheen) — горизонтальный градиент, появляется при hover */
.pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 165, 116, 0.18),
    transparent
  );
  transition: left 0.7s var(--easing);
  pointer-events: none;
}

.pill:hover {
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.10), rgba(212, 165, 116, 0.04));
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.25),
    0 4px 18px rgba(212, 165, 116, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pill:hover::before {
  left: 100%; /* Sheen бежит слева направо */
}

.pill.highlighted {
  background: rgba(212, 165, 116, 0.12);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 24px rgba(212, 165, 116, 0.15);
}
.pill.highlighted:hover {
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.20), rgba(212, 165, 116, 0.10));
  box-shadow:
    0 0 0 1px var(--accent),
    0 6px 24px rgba(212, 165, 116, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pill.highlighted::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: pillPulse 2s ease-in-out infinite;
  z-index: 2;
}

@keyframes pillPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

.lookingfor-footer {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.lookingfor-footer-item {
  flex: 1;
  min-width: 240px;
}

.lookingfor-footer-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.lookingfor-footer-value {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
  color: var(--text);
  line-height: 1.3;
}

/* =========================================================
   11. РЕКОМЕНДАЦИИ
   ========================================================= */
.quotes {
  position: relative;
  background: var(--bg-deep);
  overflow: hidden;
}

/* Цифровая текстура фона quotes — тонкая сетка и radial-glow */
.quotes::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    /* Тонкая сетка как у архитектурного чертежа */
    linear-gradient(rgba(168, 179, 199, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 179, 199, 0.025) 1px, transparent 1px),
    /* Мягкое сияние */
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(212, 165, 116, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 70% at 0% 30%, rgba(74, 122, 184, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 70%, rgba(74, 122, 184, 0.06), transparent 70%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, rgba(0,0,0,0.5) 70%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 30%, rgba(0,0,0,0.5) 70%, transparent 100%);
}

.quotes-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.quotes-header {
  margin-bottom: 60px;
  max-width: 720px;
}

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.quote-card {
  /* Прозрачный фон, лёгкая стекляная текстура */
  background: 
    linear-gradient(135deg, rgba(20, 37, 64, 0.35), rgba(15, 29, 52, 0.20)),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 18px,
      rgba(212, 165, 116, 0.025) 18px,
      rgba(212, 165, 116, 0.025) 19px
    ),
    radial-gradient(
      circle at top right,
      rgba(74, 122, 184, 0.06),
      transparent 60%
    );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(168, 179, 199, 0.10);
  border-radius: var(--radius);
  padding: 32px 28px;
  position: relative;
  transition: all 0.4s var(--easing);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.quote-card::before {
  /* Тонкая золотая полоса слева как marginalia */
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent,
    var(--accent) 20%,
    var(--accent) 80%,
    transparent);
  opacity: 0;
  transition: opacity 0.4s var(--easing);
}

.quote-card::after {
  /* Декоративный угол - "page corner" */
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
  box-shadow: -1px 1px 0 0 var(--accent), 23px 1px 0 0 transparent, 0 24px 0 -23px var(--accent);
}

.quote-card:hover {
  border-color: rgba(212, 165, 116, 0.35);
  background: 
    linear-gradient(135deg, rgba(20, 37, 64, 0.5), rgba(15, 29, 52, 0.30)),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 18px,
      rgba(212, 165, 116, 0.04) 18px,
      rgba(212, 165, 116, 0.04) 19px
    ),
    radial-gradient(
      circle at top right,
      rgba(74, 122, 184, 0.12),
      transparent 60%
    );
  transform: translateY(-2px);
}
.quote-card:hover::before { opacity: 1; }

.quote-mark {
  font-family: var(--display);
  font-size: 56px;
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: 8px;
  opacity: 0.5;
  flex-shrink: 0;
}

.quote-text {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 28px;
  font-style: italic;
  flex: 1; /* растягивается чтобы прижать author к низу */
}

.quote-author {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  margin-top: auto; /* прижать к низу */
  flex-shrink: 0;
}

.quote-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}

.quote-role {
  font-family: var(--body);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.01em;
  margin-bottom: 3px;
}

.quote-company {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.contact {
  background: var(--bg-deep);
  background-image: 
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(212, 165, 116, 0.15), transparent 70%);
}

.contact-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.contact-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 32px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.contact-eyebrow::before,
.contact-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.contact-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.contact-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.contact-text {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 600px;
  margin: 0 auto 56px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 540px;
  margin: 0 auto 48px;
  border-top: 1px solid var(--line);
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: padding-left 0.4s var(--easing), color 0.3s;
  position: relative;
}

.contact-row:hover { padding-left: 14px; }

.contact-row::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.4s var(--easing);
}

.contact-row:hover::before { opacity: 1; }

.contact-row .icon-wrap {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.contact-row .icon-wrap svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.5;
}

.contact-row .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  min-width: 90px;
}

.contact-row .value {
  font-family: var(--display);
  font-weight: 400;
  font-size: 18px;
  color: var(--text);
  margin-left: auto;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: right;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}

.contact-row:hover .value { color: var(--accent); }

@media (max-width: 560px) {
  .contact-row {
    gap: 14px;
  }
  .contact-row .label {
    display: none; /* На узких экранах — иконки + значения, лейблы избыточны */
  }
  .contact-row .value {
    font-size: 15px;
    margin-left: 0;
    text-align: left;
  }
}

/* =========================================================
   АНИМАЦИИ
   ========================================================= */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes portraitIn { from { opacity: 0; transform: scale(0.96) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes scrollDown {
  0%, 100% { transform: translateY(-14px); opacity: 0; }
  50% { transform: translateY(60px); opacity: 1; }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--easing), transform 0.9s var(--easing);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.22s; }
[data-reveal-delay="3"] { transition-delay: 0.34s; }
[data-reveal-delay="4"] { transition-delay: 0.46s; }

/* === CASE-BLOCK ENTRY — staggered анимация ключевых элементов === */
.case .case-company,
.case .case-company-link,
.case .case-org-meta,
.case .case-position,
.case .case-narrative,
.case .case-visual {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--easing), transform 1s var(--easing);
}

.case.in-view .case-company      { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
.case.in-view .case-org-meta     { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.case.in-view .case-company-link { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.case.in-view .case-position     { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }
.case.in-view .case-narrative    { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }
.case.in-view .case-visual       { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }

/* Stagger — метрики и теги появляются по очереди */
.case-metrics .metric,
.case-tags .case-tag {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--easing), transform 0.7s var(--easing);
}
.case-metrics.revealed .metric { opacity: 1; transform: translateY(0); }
.case-metrics.revealed .metric:nth-child(1) { transition-delay: 0.05s; }
.case-metrics.revealed .metric:nth-child(2) { transition-delay: 0.18s; }
.case-metrics.revealed .metric:nth-child(3) { transition-delay: 0.31s; }
.case-metrics.revealed .metric:nth-child(4) { transition-delay: 0.44s; }

.case-tags.revealed .case-tag { opacity: 1; transform: translateY(0); }
.case-tags.revealed .case-tag:nth-child(1) { transition-delay: 0.0s; }
.case-tags.revealed .case-tag:nth-child(2) { transition-delay: 0.08s; }
.case-tags.revealed .case-tag:nth-child(3) { transition-delay: 0.16s; }
.case-tags.revealed .case-tag:nth-child(4) { transition-delay: 0.24s; }
.case-tags.revealed .case-tag:nth-child(5) { transition-delay: 0.32s; }

/* Stagger для компетенций */
.comp-grid .comp-cell {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--easing), transform 0.7s var(--easing);
}
.comp-grid.revealed .comp-cell { opacity: 1; transform: translateY(0); }
.comp-grid.revealed .comp-cell:nth-child(1) { transition-delay: 0.0s; }
.comp-grid.revealed .comp-cell:nth-child(2) { transition-delay: 0.07s; }
.comp-grid.revealed .comp-cell:nth-child(3) { transition-delay: 0.14s; }
.comp-grid.revealed .comp-cell:nth-child(4) { transition-delay: 0.21s; }
.comp-grid.revealed .comp-cell:nth-child(5) { transition-delay: 0.28s; }
.comp-grid.revealed .comp-cell:nth-child(6) { transition-delay: 0.35s; }
.comp-grid.revealed .comp-cell:nth-child(7) { transition-delay: 0.42s; }
.comp-grid.revealed .comp-cell:nth-child(8) { transition-delay: 0.49s; }
/* =========================================================
   FALLBACK: если main.js не загрузился — показываем контент
   (transitions НЕ отключаем — пусть остается возможность плавности)
   ========================================================= */
html.no-js-fallback [data-reveal],
html.no-js-fallback .case .case-company,
html.no-js-fallback .case .case-company-link,
html.no-js-fallback .case .case-org-meta,
html.no-js-fallback .case .case-position,
html.no-js-fallback .case .case-narrative,
html.no-js-fallback .case .case-visual,
html.no-js-fallback .case-metrics .metric,
html.no-js-fallback .case-tags .case-tag,
html.no-js-fallback .comp-grid .comp-cell {
  opacity: 1 !important;
  transform: none !important;
}

/* =========================================================
   ACCESSIBILITY: focus state
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
.lang-btn:focus-visible,
.contact-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =========================================================
   REDUCED MOTION: отключаем ТОЛЬКО самое тяжёлое — WebGL canvas.
   CSS transitions и reveal-анимации остаются — они лёгкие.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* Тяжёлые WebGL canvas-фоны отключаем */
  .hero-particles,
  .case-particles-full,
  .case-matrix-full {
    display: none !important;
  }
  /* Smooth scroll → instant */
  html { scroll-behavior: auto !important; }
  /* Картинки кейсов перестают «дышать» — но всё ещё видны */
  .case-illustration,
  .case-visual::before {
    animation: none !important;
  }
}

/* =========================================================
   CANVAS LAYERS - native 2D particle effects
   ========================================================= */

/* Hero particles - over hero-bg, под content */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

/* (case-particles / case-matrix старые селекторы — удалены, используются case-particles-full / case-matrix-full) */

/* YADRO case-bg-full особый фоновый цвет под matrix */
.case-bg-yadro {
  background: 
    radial-gradient(ellipse at center, rgba(74, 122, 184, 0.10), transparent 60%);
}

/* =========================================================
   ФИКС .case-visual: убираем серую рамку, чтобы не отвлекала
   ========================================================= */
.case-visual-frame {
  display: none; /* отключаем стандартную рамку - она конфликтует с canvas-слоями */
}

/* Убрать old glow если он остался */
.case-visual::before {
  display: none !important;
}

/* =========================================================
   QUOTES: выровнять блоки людей по нижнему краю
   ========================================================= */
.quote-card {
  display: flex;
  flex-direction: column;
}
.quote-card .quote-text {
  flex: 1; /* растягиваем текст, чтобы attribution прижался к низу */
}
.quote-card .quote-author,
.quote-card .quote-attribution {
  margin-top: auto;
}

/* =========================================================
   SOCIAL — соцсети одной полосой + карточка канала ниже
   ========================================================= */
.contact-social {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-social-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-social-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.contact-social-icons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(20, 37, 64, 0.4);
  border: 1px solid var(--line);
  color: var(--text-mute);
  transition: all 0.3s var(--easing);
  position: relative;
}
.social-icon svg {
  width: 20px;
  height: 20px;
}
.social-icon:hover {
  background: rgba(212, 165, 116, 0.10);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(212, 165, 116, 0.20);
}

/* =========================================================
   BRAND CHANNEL CARD
   Структура: [Лого 80px] | [Название + Описание] | [Tg] [MAX] [Присоединиться]
   Все 3 кнопки одинаковой высоты 40px.
   ========================================================= */
.brand-channel-card {
  position: relative;
  padding: 24px 28px;
  border: 1px solid rgba(212, 165, 116, 0.30);
  border-radius: var(--radius);
  background: 
    linear-gradient(135deg, rgba(212, 165, 116, 0.06) 0%, rgba(212, 165, 116, 0.02) 100%),
    radial-gradient(circle at top right, rgba(74, 122, 184, 0.08), transparent 60%);
  box-shadow: 0 4px 30px rgba(212, 165, 116, 0.08);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
}

.brand-channel-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 70px;
  background: radial-gradient(ellipse at top right, rgba(212, 165, 116, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.brand-channel-card > * { position: relative; z-index: 1; }

/* БОЛЬШОЙ ЛОГОТИП слева */
.brand-channel-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(212, 165, 116, 0.5);
  box-shadow: 0 0 24px rgba(212, 165, 116, 0.16);
}

/* НАЗВАНИЕ + ОПИСАНИЕ в центре */
.brand-channel-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.brand-channel-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.005em;
  color: var(--accent-glow); /* ЖЁЛТЫЙ как просил */
  line-height: 1.2;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.brand-channel-subtitle {
  font-family: var(--body);
  font-size: 13px;
  color: var(--text); /* БЕЛЫЙ как просил */
  line-height: 1.4;
}

/* 3 КНОПКИ справа — все одинаковой высоты 40px */
.brand-channel-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(212, 165, 116, 0.08);
  border: 1px solid rgba(212, 165, 116, 0.40);
  color: var(--accent-glow);
  transition: all 0.3s var(--easing);
}
.brand-channel-icon svg { width: 16px; height: 16px; }
.brand-channel-icon:hover {
  background: rgba(212, 165, 116, 0.20);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.brand-channel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bg-deep);
  background: var(--accent);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.4s var(--easing);
  white-space: nowrap;
}

.brand-channel-cta svg {
  width: 13px;
  height: 13px;
  transition: transform 0.4s var(--easing);
}

.brand-channel-cta:hover {
  background: var(--accent-warm);
  box-shadow: 0 6px 24px rgba(212, 165, 116, 0.40);
  transform: translateY(-2px);
}
.brand-channel-cta:hover svg {
  transform: translateX(4px);
}

/* Focus у CTA — закруглённый outline под форму кнопки */
.brand-channel-cta:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Стили для img-иконок MAX удалены — теперь везде outline SVG в едином стиле. */

/* ========================================================= */
/* SECTION 10 — EARLIER EXPERIENCE                            */
/* ========================================================= */
.earlier {
  background: var(--bg-deep);
  background-image: 
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(74, 122, 184, 0.08), transparent 60%);
}

.earlier-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.earlier-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.earlier-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.earlier-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 900px;
  margin: 0 0 60px;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.earlier-title em {
  font-style: italic;
  color: var(--accent-glow);
  font-weight: 300;
}

.earlier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 1100px) {
  .earlier-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .earlier-grid { grid-template-columns: 1fr; }
}

.earlier-card {
  position: relative;
  padding: 28px 26px;
  background: rgba(20, 37, 64, 0.35);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.4s var(--easing);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.earlier-card:hover {
  border-color: rgba(212, 165, 116, 0.3);
  background: rgba(20, 37, 64, 0.5);
  transform: translateY(-4px);
}

.earlier-card-public {
  background: rgba(74, 122, 184, 0.06);
  border-color: rgba(74, 122, 184, 0.20);
}
.earlier-card-public:hover {
  border-color: rgba(74, 122, 184, 0.4);
}

.earlier-years {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--text-mute);
  text-transform: uppercase;
}

.earlier-company {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.earlier-role {
  font-family: var(--body);
  font-size: 14px;
  color: var(--accent-glow);
  font-style: italic;
  line-height: 1.4;
}

.earlier-points {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.earlier-points li {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mute);
  padding-left: 16px;
  position: relative;
}
.earlier-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ========================================================= */
/* SECTION 11 — EDUCATION                                     */
/* ========================================================= */
.education {
  background: var(--bg-base);
  background-image:
    radial-gradient(ellipse 60% 70% at 30% 50%, rgba(212, 165, 116, 0.08), transparent 70%);
}

.education-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.education-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.education-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.education-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 1100px; /* шире, чтобы помещалось в одну строку */
  margin: 0 0 16px;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.education-title em {
  font-style: italic;
  color: var(--accent-glow);
  font-weight: 300;
}
.education-title-sep {
  color: var(--text-dim);
  font-style: normal;
  font-weight: 200;
  margin: 0 0.15em;
}

/* Подзаголовок-расшифровка под title */
.education-subtitle {
  font-family: var(--body);
  font-size: clamp(14px, 1.3vw, 17px);
  font-style: italic;
  color: var(--text-mute);
  line-height: 1.5;
  margin: 0 0 70px;
}

.education-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 70px;
  align-items: start;
}
@media (max-width: 900px) {
  .education-content { grid-template-columns: 1fr; gap: 40px; }
}

.education-logo {
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 37, 64, 0.4);
  border: 1px solid rgba(212, 165, 116, 0.30);
  border-radius: var(--radius-lg); /* квадрат с закруглением, не круг — лого прямоугольное */
  color: var(--accent);
  position: relative;
  flex-shrink: 0;
}
.education-logo::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(212, 165, 116, 0.15) 0%, transparent 70%);
  z-index: -1;
}
.education-logo svg {
  width: 88%;
  height: 88%;
}

.education-degrees {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.education-degree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.education-degree:last-child { border-bottom: none; padding-bottom: 0; }

.education-degree-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.education-degree-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: var(--text);
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

.education-degree-years {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  color: var(--text-mute);
  text-transform: uppercase;
  white-space: nowrap;
}

.education-degree-meta {
  font-family: var(--body);
  font-size: 14px;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.education-degree-dot {
  color: var(--text-dim);
}

.education-degree-gpa {
  color: var(--accent-glow);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.10em;
}

/* ========================================================= */
/* SECTION 12 — TOOLBOX                                       */
/* ========================================================= */
.toolbox {
  background: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(74, 122, 184, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(212, 165, 116, 0.06), transparent 60%);
}

.toolbox-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.toolbox-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.toolbox-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.toolbox-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 900px;
  margin: 0 0 60px;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.toolbox-title em {
  font-style: italic;
  color: var(--accent-glow);
  font-weight: 300;
}

.toolbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
}
@media (max-width: 900px) {
  .toolbox-grid { grid-template-columns: 1fr; gap: 32px; }
}

.toolbox-cat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.toolbox-cat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.toolbox-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbox-pill {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  padding: 7px 14px;
  background: rgba(20, 37, 64, 0.5);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all 0.3s var(--easing);
  white-space: nowrap;
}
.toolbox-pill:hover {
  border-color: rgba(212, 165, 116, 0.45);
  background: rgba(212, 165, 116, 0.06);
  color: var(--accent-glow);
  transform: translateY(-1px);
}

/* МГИМО / MGIMO — переключение текста внутри SVG по языку */
html[lang="en"] .logo-text-ru,
html[lang="en"] .logo-subtext-ru { display: none !important; }
html[lang="en"] .logo-text-en,
html[lang="en"] .logo-subtext-en { display: block !important; }

/* Hover-текстура для earlier-card: мягкая anim сетка появляется при наведении */
.earlier-card {
  overflow: hidden;
}
.earlier-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle, rgba(212, 165, 116, 0.18) 1px, transparent 1.5px);
  background-size: 14px 14px;
  background-position: 0 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}
.earlier-card-public::before {
  background-image: 
    radial-gradient(circle, rgba(107, 155, 216, 0.25) 1px, transparent 1.5px);
}
.earlier-card:hover::before {
  opacity: 0.4;
  animation: earlierTexture 18s linear infinite;
}
@keyframes earlierTexture {
  to { background-position: 28px 28px; }
}
.earlier-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 22, 40, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}
.earlier-card:hover::after { opacity: 1; }

/* Контент карточек поверх текстуры */
.earlier-card > * {
  position: relative;
  z-index: 2;
}

/* Angle accent в углу карточки при hover */
.earlier-card .earlier-years {
  transition: color 0.3s ease;
}
.earlier-card:hover .earlier-years {
  color: var(--accent);
}

/* ============================================================
   DECORATIVE LAYERS — фоновые иллюстрации для секций
   Все через CSS+SVG-data — лёгкие, не нагружают рендер.
   ============================================================ */

/* === 10. EARLIER EXPERIENCE — стилизованный автомобиль (слева) + здание МИД (справа) === */
.earlier {
  position: relative;
  overflow: hidden;
}
/* Автомобиль слева — силуэт sedan */
.earlier::before {
  content: '';
  position: absolute;
  bottom: 8%;
  left: -40px;
  width: 380px;
  height: 220px;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 220' fill='none' stroke='%23d4a574' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round' opacity='0.18'><path d='M30 150 L50 110 Q60 95 80 92 L120 88 L150 75 Q165 68 185 68 L230 68 Q255 68 275 82 L310 105 L345 110 Q360 112 360 130 L360 150 Z'/><circle cx='105' cy='155' r='22'/><circle cx='105' cy='155' r='10'/><circle cx='290' cy='155' r='22'/><circle cx='290' cy='155' r='10'/><path d='M150 75 L170 92 L260 92 L275 82'/><path d='M205 75 L205 92'/><line x1='50' y1='150' x2='75' y2='150'/><line x1='320' y1='150' x2='345' y2='150'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
/* Здание МИД справа — стилизованная сталинская высотка со шпилем */
.earlier::after {
  content: '';
  position: absolute;
  top: 8%;
  right: -20px;
  width: 240px;
  height: 360px;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 360' fill='none' stroke='%236b9bd8' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round' opacity='0.20'><line x1='120' y1='2' x2='120' y2='28'/><path d='M110 28 L120 50 L130 28 Z'/><rect x='105' y='50' width='30' height='60'/><line x1='115' y1='55' x2='115' y2='105'/><line x1='125' y1='55' x2='125' y2='105'/><path d='M95 110 L145 110 L145 175 L95 175 Z'/><line x1='105' y1='115' x2='105' y2='170'/><line x1='115' y1='115' x2='115' y2='170'/><line x1='125' y1='115' x2='125' y2='170'/><line x1='135' y1='115' x2='135' y2='170'/><path d='M70 175 L170 175 L170 260 L70 260 Z'/><line x1='80' y1='180' x2='80' y2='255'/><line x1='95' y1='180' x2='95' y2='255'/><line x1='110' y1='180' x2='110' y2='255'/><line x1='125' y1='180' x2='125' y2='255'/><line x1='140' y1='180' x2='140' y2='255'/><line x1='155' y1='180' x2='155' y2='255'/><path d='M40 260 L200 260 L200 340 L40 340 Z'/><line x1='55' y1='265' x2='55' y2='335'/><line x1='75' y1='265' x2='75' y2='335'/><line x1='95' y1='265' x2='95' y2='335'/><line x1='115' y1='265' x2='115' y2='335'/><line x1='135' y1='265' x2='135' y2='335'/><line x1='155' y1='265' x2='155' y2='335'/><line x1='175' y1='265' x2='175' y2='335'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.earlier-inner { position: relative; z-index: 2; }

/* === 11. EDUCATION — узнаваемый глобус с меридианами/параллелями === */
.education {
  position: relative;
  overflow: hidden;
}
.education::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -150px;
  transform: translateY(-50%);
  width: 700px;
  height: 700px;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23d4a574' stroke-width='0.8' opacity='0.16'><circle cx='200' cy='200' r='180'/><ellipse cx='200' cy='200' rx='180' ry='60'/><ellipse cx='200' cy='200' rx='180' ry='120'/><ellipse cx='200' cy='200' rx='180' ry='30'/><ellipse cx='200' cy='200' rx='180' ry='150'/><ellipse cx='200' cy='200' rx='30' ry='180'/><ellipse cx='200' cy='200' rx='60' ry='180'/><ellipse cx='200' cy='200' rx='90' ry='180'/><ellipse cx='200' cy='200' rx='120' ry='180'/><ellipse cx='200' cy='200' rx='150' ry='180'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  animation: globeRotate 90s linear infinite;
}
@keyframes globeRotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
/* Континенты-точки */
.education::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -150px;
  transform: translateY(-50%);
  width: 700px;
  height: 700px;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle 4px at 38% 42%, rgba(212, 165, 116, 0.30), transparent 100%),
    radial-gradient(circle 3px at 44% 40%, rgba(212, 165, 116, 0.28), transparent 100%),
    radial-gradient(circle 3px at 33% 48%, rgba(212, 165, 116, 0.26), transparent 100%),
    radial-gradient(circle 5px at 52% 35%, rgba(212, 165, 116, 0.30), transparent 100%),
    radial-gradient(circle 4px at 60% 52%, rgba(212, 165, 116, 0.26), transparent 100%),
    radial-gradient(circle 3px at 48% 60%, rgba(212, 165, 116, 0.24), transparent 100%),
    radial-gradient(circle 4px at 35% 55%, rgba(212, 165, 116, 0.26), transparent 100%);
  background-repeat: no-repeat;
}
.education-inner { position: relative; z-index: 2; }

/* === 12. TOOLBOX — matrix-style сетка точек, мерцающая === */
.toolbox {
  position: relative;
  overflow: hidden;
}
.toolbox::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle, rgba(212, 165, 116, 0.20) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(107, 155, 216, 0.14) 1px, transparent 1.5px);
  background-size: 24px 24px, 24px 24px;
  background-position: 0 0, 12px 12px;
  opacity: 0.45;
  animation: toolboxMatrix 22s ease-in-out infinite;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, black 30%, transparent 100%);
}
@keyframes toolboxMatrix {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.6; }
}
.toolbox-inner { position: relative; z-index: 2; }

/* === 13. LOOKING FOR — компас / роза ветров на фоне === */
.lookingfor {
  position: relative;
  overflow: hidden;
}
.lookingfor::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -150px;
  width: 700px;
  height: 700px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23d4a574' stroke-width='1' opacity='0.20'><circle cx='200' cy='200' r='180'/><circle cx='200' cy='200' r='130'/><circle cx='200' cy='200' r='80'/><circle cx='200' cy='200' r='30'/><line x1='200' y1='15' x2='200' y2='385'/><line x1='15' y1='200' x2='385' y2='200'/><line x1='69' y1='69' x2='331' y2='331'/><line x1='331' y1='69' x2='69' y2='331'/><path d='M200 50 L208 200 L200 350 L192 200 Z' fill='%23d4a574' opacity='0.3'/><path d='M50 200 L200 192 L350 200 L200 208 Z' fill='%23d4a574' opacity='0.18'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.lookingfor-inner { position: relative; z-index: 2; }

/* === QUOTES — кавычка как декорация === */
.quotes {
  position: relative;
  overflow: hidden;
}
.quotes::before {
  content: '"';
  position: absolute;
  top: 50px;
  right: 60px;
  font-family: var(--display);
  font-size: 480px;
  font-weight: 300;
  line-height: 0.7;
  color: rgba(212, 165, 116, 0.06);
  pointer-events: none;
  z-index: 1;
  font-style: italic;
}
.quotes-inner { position: relative; z-index: 2; }

/* ============================================================
   MOBILE — комплексные исправления адаптивности для всех секций
   Особенный фокус на узких экранах (< 600px)
   ============================================================ */

@media (max-width: 760px) {
  /* Уменьшаем глобальные section padding */
  .section {
    padding: 80px 24px;
  }
  
  /* Hero portrait и текст */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  /* Уменьшаем большие title */
  .earlier-title,
  .education-title,
  .toolbox-title,
  .lookingfor-title,
  .contact-title,
  .comp-title,
  .timeline-title {
    font-size: clamp(28px, 7vw, 40px) !important;
    line-height: 1.1 !important;
  }
  
  /* Earlier-grid → 1 колонка */
  .earlier-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .earlier-card {
    padding: 22px 20px;
  }
  
  /* Education → стек */
  .education-content {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .education-logo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }
  .education-subtitle {
    font-size: 14px;
    margin-bottom: 40px;
  }
  
  /* Toolbox → 1 колонка */
  .toolbox-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  
  /* Карточка канала на мобиле */
  .brand-channel-card {
    padding: 20px;
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }
  .brand-channel-card::before { width: 100px; height: 70px; }
  .brand-channel-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto;
  }
  .brand-channel-title {
    font-size: 18px;
  }
  .brand-channel-subtitle {
    font-size: 12px;
  }
  .brand-channel-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  /* Социалки на мобиле — мельче gap */
  .contact-social-icons {
    gap: 8px;
  }
  .social-icon {
    width: 44px;
    height: 44px;
  }
  .social-icon svg {
    width: 18px;
    height: 18px;
  }
  
  /* Скрываем декоративные SVG на мобиле чтобы не вылезали */
  .earlier::before,
  .earlier::after,
  .lookingfor::before,
  .education::after {
    display: none !important;
  }
  /* Глобус оставить — это центральный элемент секции */
  .education::before {
    right: -250px;
    width: 500px;
    height: 500px;
    opacity: 0.5;
  }
  
  /* Контакт-список */
  .contact-list {
    grid-template-columns: 1fr !important;
  }
  .contact-row {
    padding: 14px 16px;
  }
  
  /* Looking for pills */
  .pills-grid {
    gap: 8px;
  }
  .pills-grid .pill {
    padding: 8px 14px;
    font-size: 12px;
  }
  
  /* Navigation — больше не помещается с "Образование" */
  .nav-menu {
    gap: 16px;
  }
  .nav-menu a {
    font-size: 10px;
    letter-spacing: 0.15em;
  }
  
  /* Section-num не перекрывает контент */
  .section-num {
    bottom: 24px !important;
    left: 24px !important;
    font-size: 10px;
  }
}

@media (max-width: 560px) {
  /* На самых узких — навигация компактнее */
  .nav-menu {
    gap: 10px;
  }
  .nav-menu a {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  /* Можно скрыть некоторые пункты меню */
  .nav-menu a[href="#timeline"],
  .nav-menu a[href="#case-sportspired"] {
    display: none;
  }
  
  /* Контейнеры еще компактнее */
  .section {
    padding: 64px 18px;
  }
  
  /* Кнопки карточки канала на 100% ширину */
  .brand-channel-cta {
    width: 100%;
    min-width: 0;
  }
  
  /* Уменьшаем декорацию глобуса */
  .education::before {
    width: 400px;
    height: 400px;
    right: -200px;
    opacity: 0.35;
  }
  
  /* Контактные иконки — компактнее */
  .contacts {
    gap: 10px;
  }
  .contact-icon {
    width: 40px;
    height: 40px;
  }
  .contact-icon svg {
    width: 16px;
    height: 16px;
  }
  
  /* Earlier card — компактнее points */
  .earlier-points li {
    font-size: 13px;
  }
  
  /* Toolbox pills — компактнее */
  .toolbox-pill {
    font-size: 12px;
    padding: 6px 12px;
  }
  
  /* Hero - больший mobile portrait */
  .hero-portrait {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* Очень узкие экраны (старые телефоны 320-380px) */
@media (max-width: 400px) {
  .section {
    padding: 56px 14px;
  }
  
  .education-logo {
    width: 160px;
    height: 160px;
  }
  
  .nav-mark {
    font-size: 16px;
  }
}

/* Ссылки внутри case-narrative (например UFL → uflgame.com) */
.case-link {
  color: var(--accent-glow);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 165, 116, 0.30);
  padding-bottom: 1px;
  transition: all 0.25s var(--easing);
  font-weight: 500;
}
.case-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* =========================================================
   SITE FOOTER — счётчик посетителей + копирайт
   ========================================================= */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding: 36px clamp(20px, 5vw, 80px);
  position: relative;
}

.site-footer-inner {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Счётчик */
.footer-counter {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-counter-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.footer-counter-label {
  color: var(--text-dim);
}

.footer-counter-value {
  color: var(--accent-glow);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: none;
  /* плавное появление при загрузке */
  opacity: 0.35;
  transition: opacity 0.6s var(--easing);
}

.footer-counter-value.loaded {
  opacity: 1;
}

.footer-counter-divider {
  color: var(--text-dim);
  opacity: 0.4;
}

/* Копирайт */
.footer-copyright {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-wrap: wrap;
}

.footer-divider {
  opacity: 0.4;
}

.footer-link {
  color: var(--text-mute);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
  transition: color 0.3s var(--easing);
}

.footer-link:hover {
  color: var(--accent-glow);
}

@media (max-width: 720px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .footer-copyright {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .footer-divider { display: none; }
}

/* =========================================================
   MOBILE FIXES v36 — section-num не наезжает на контент,
   case-visual-label с большим отступом, карточка канала компактнее
   ========================================================= */
@media (max-width: 760px) {
  /* Все секции получают доп. отступ снизу — освобождают место под section-num */
  .section {
    padding-bottom: 90px;
  }
  
  /* Слоганы под картинками кейсов — отдаляем от картинки */
  .case-visual-label {
    bottom: -52px;
    font-size: 14px;
    padding: 0 20px;
  }
  /* Дополнительный gap внизу case-visual чтобы слоган не наезжал на следующий контент */
  .case-visual {
    margin-bottom: 28px;
  }
  
  /* Карточка канала — компактнее на мобиле */
  .brand-channel-cta {
    height: 44px;
    padding: 0 22px;
    font-size: 9px;
    letter-spacing: 0.18em;
  }
  .brand-channel-cta svg {
    width: 12px;
    height: 12px;
  }
  /* Больший gap между иконками TG/MAX и кнопкой Присоединиться */
  .brand-channel-buttons {
    gap: 14px;
    margin-top: 8px;
  }
  /* Сами кнопки Tg/MAX чуть компактнее */
  .brand-channel-icon {
    width: 38px;
    height: 38px;
  }
  .brand-channel-icon svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 560px) {
  /* На совсем узких экранах ещё компактнее */
  .section {
    padding-bottom: 80px;
  }
  .brand-channel-cta {
    height: 42px;
    font-size: 9px;
  }
  /* На очень узких — CTA на новую строку с большим отступом */
  .brand-channel-buttons {
    gap: 16px;
  }
}

/* =========================================================
   PROFILE QUOTE ATTRIBUTION — имя белое, роль золотистая, на мобильном — стек
   ========================================================= */
.profile-quote-attr .attr-name {
  color: var(--text);
  font-weight: 500;
}
.profile-quote-attr .attr-sep {
  color: var(--text-dim);
  opacity: 0.6;
}
.profile-quote-attr .attr-role {
  color: var(--accent-glow);
}

@media (max-width: 560px) {
  /* На мобильном — Имя на одной строке, роль на другой */
  .profile-quote-attr {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  .profile-quote-attr .profile-quote-rule {
    display: none;
  }
  .profile-quote-attr .attr-sep {
    display: none;
  }
  .profile-quote-attr > span:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .profile-quote-attr .attr-name {
    font-family: var(--display);
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--text);
    font-variation-settings: "opsz" 144, "SOFT" 60;
  }
  .profile-quote-attr .attr-role {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-glow);
  }
}

/* =========================================================
   VIDEO CASE ILLUSTRATIONS — для <video class="case-illustration">
   ========================================================= */
video.case-illustration {
  display: block;
  /* видео автозапускается, контролы не нужны */
  pointer-events: none;
  /* плавное появление при загрузке */
  background: #000;
}
/* На случай если браузер не поддерживает autoplay — fallback на poster */
video.case-illustration::-webkit-media-controls {
  display: none !important;
}

/* ============================================================
   ROUNDED CORNER ACCENTS + EXTENDED HOVER GLOW
   Rounded gold corner ornaments on framed images, and the
   recommendations-style hover (gold border + lift + glow)
   extended to a few more card elements. Kept subtle.
   ============================================================ */

/* Skruglennye zolotye ugolki na kartinkah keisov (vmesto ostryh breketov) */
.case-visual::after {
  display: block !important;
  inset: -7px;
  background: none;
  border: 1.5px solid var(--accent);
  border-radius: calc(var(--radius-lg) + 7px);
  filter: drop-shadow(0 0 4px rgba(212, 165, 116, 0.35));
  -webkit-mask:
    radial-gradient(circle 50px at top left, #000 50%, transparent 100%) top left / 50% 50% no-repeat,
    radial-gradient(circle 50px at top right, #000 50%, transparent 100%) top right / 50% 50% no-repeat,
    radial-gradient(circle 50px at bottom left, #000 50%, transparent 100%) bottom left / 50% 50% no-repeat,
    radial-gradient(circle 50px at bottom right, #000 50%, transparent 100%) bottom right / 50% 50% no-repeat;
          mask:
    radial-gradient(circle 50px at top left, #000 50%, transparent 100%) top left / 50% 50% no-repeat,
    radial-gradient(circle 50px at top right, #000 50%, transparent 100%) top right / 50% 50% no-repeat,
    radial-gradient(circle 50px at bottom left, #000 50%, transparent 100%) bottom left / 50% 50% no-repeat,
    radial-gradient(circle 50px at bottom right, #000 50%, transparent 100%) bottom right / 50% 50% no-repeat;
}

/* Extended signature hover: brand channel card */
.brand-channel-card {
  transition: transform 0.4s var(--easing), border-color 0.4s var(--easing), box-shadow 0.4s var(--easing);
}
.brand-channel-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 165, 116, 0.50);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.8), 0 0 26px rgba(212, 165, 116, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Extended signature hover: education logo box */
.education-logo {
  transition: transform 0.4s var(--easing), border-color 0.4s var(--easing), box-shadow 0.4s var(--easing);
}
.education-logo:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 165, 116, 0.55);
  box-shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 165, 116, 0.18);
}

/* Earlier cards: add the soft glow + ring to the existing lift */
.earlier-card:hover {
  border-color: rgba(212, 165, 116, 0.45);
  background: rgba(20, 37, 64, 0.5);
  transform: translateY(-4px);
  box-shadow: inset 3px 0 0 0 var(--accent), 0 18px 44px -22px rgba(0, 0, 0, 0.8), 0 0 24px rgba(212, 165, 116, 0.10);
}

/* ============================================================
   MOBILE POLISH — edinyi perenos godov v obrazovanii
   Na telefone nazvanie i god vsegda v stolbik (odinakovo u vseh)
   ============================================================ */
@media (max-width: 760px) {
  .education-degree-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .education-degree-years {
    align-self: flex-start;
  }
}