@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Unbounded:wght@600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  color-scheme: light;
  --color-primary: #0369a1;
  --color-primary-strong: #075985;
  --color-secondary: #0ea5e9;
  --color-accent: #16803c;
  --color-accent-hover: #166534;
  --color-bg: #f4f9fc;
  --color-surface: #ffffff;
  --color-surface-soft: #eaf5fb;
  --color-text: #102a3a;
  --color-text-muted: #4b6473;
  --color-border: #c9e4f2;
  --color-ring: #0284c7;
  --shadow-sm: 0 8px 24px rgba(15, 63, 88, 0.08);
  --shadow-md: 0 18px 48px rgba(15, 63, 88, 0.12);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --content-width: 1180px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #38bdf8;
  --color-primary-strong: #7dd3fc;
  --color-secondary: #0ea5e9;
  --color-accent: #4ade80;
  --color-accent-hover: #86efac;
  --color-bg: #07131f;
  --color-surface: #0e2030;
  --color-surface-soft: #122a3d;
  --color-text: #edf7fc;
  --color-text-muted: #b7cbd7;
  --color-border: #26465a;
  --color-ring: #7dd3fc;
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 22px 58px rgba(0, 0, 0, 0.34);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif !important;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

html[data-theme="dark"] body::after {
  opacity: 0.025;
  mix-blend-mode: screen;
}

.scroll-progress {
  position: fixed;
  top: 75px;
  right: 0;
  left: 0;
  z-index: 1002;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}

a,
button {
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-ring) 50%, transparent);
  outline-offset: 3px;
}

::selection {
  color: #fff;
  background: var(--color-primary);
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ui-icon,
.service-icon svg,
.theme-icon,
.menu-icon,
.vacancy-icon-shell svg,
.hours-icon svg,
.lunch-icon svg,
.cta .i svg,
#toTop svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-icon use,
.theme-icon use,
.menu-icon use,
.vacancy-icon-shell use,
.hours-icon use,
.lunch-icon use,
.cta .i use,
#toTop use {
  fill: none !important;
  stroke: currentColor !important;
}

html[data-theme] .service-icon svg,
html[data-theme] .service-icon svg *,
html[data-theme] .theme-icon,
html[data-theme] .theme-icon *,
html[data-theme] .menu-icon,
html[data-theme] .menu-icon *,
html[data-theme] .vacancy-icon-shell svg,
html[data-theme] .vacancy-icon-shell svg *,
html[data-theme] .hours-icon svg,
html[data-theme] .hours-icon svg *,
html[data-theme] .lunch-icon svg,
html[data-theme] .lunch-icon svg *,
html[data-theme] .cta .i svg,
html[data-theme] .cta .i svg *,
html[data-theme] .fact-ico svg,
html[data-theme] .fact-ico svg *,
html[data-theme] #toTop svg,
html[data-theme] #toTop svg * {
  fill: none !important;
  stroke: currentColor !important;
}

.background {
  position: fixed !important;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 16% 4%, rgba(14, 165, 233, 0.12), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(22, 163, 74, 0.08), transparent 30%),
    var(--color-bg) !important;
}

.background .gradient,
.background #blobs,
.bg-particles {
  opacity: 0.18 !important;
  filter: saturate(0.72) !important;
}

/* Header and navigation */
.header {
  position: sticky !important;
  top: 0;
  z-index: 1000 !important;
  min-height: 76px;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px max(24px, calc((100vw - var(--content-width)) / 2)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent) !important;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent) !important;
  box-shadow: 0 8px 28px rgba(5, 45, 67, 0.06) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}

.header::after {
  content: none !important;
  display: none !important;
}

.header .logo-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.header .logo {
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  object-fit: contain;
  filter: none !important;
}

.header .brand {
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
}

.header #siteNav {
  max-width: none !important;
  overflow: visible !important;
  transform: none !important;
  transform-origin: center !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.header nav a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 10px;
  color: var(--color-text-muted) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.header nav a:hover,
.header nav a:focus-visible {
  color: var(--color-primary-strong) !important;
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent) !important;
}

.theme-toggle.inline {
  min-width: 108px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 0 8px !important;
  padding: 0 12px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 999px !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.theme-toggle.inline::before,
.theme-toggle .icon {
  display: none !important;
}

.theme-icon {
  width: 18px;
  height: 18px;
}

html[data-theme="light"] .theme-icon--sun,
html[data-theme="dark"] .theme-icon--moon {
  display: none;
}

.theme-toggle .label {
  color: inherit !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
}

.menu-toggle.inline {
  width: 44px !important;
  height: 44px !important;
  padding: 10px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  background: var(--color-surface) !important;
}

.menu-toggle .bar,
html[data-theme="dark"] .menu-toggle .bar {
  width: 20px;
  height: 2px !important;
  min-height: 2px;
  flex: 0 0 2px;
  background: var(--color-text) !important;
}

.menu-icon {
  width: 22px;
  height: 22px;
  color: var(--color-text);
}

.menu-icon--close {
  display: none;
}

html.menu-open .menu-icon--open {
  display: none;
}

html.menu-open .menu-icon--close {
  display: block;
}

/* Hero */
#home.hero {
  position: relative;
  min-height: min(760px, calc(100vh - 76px));
  width: min(100%, 1440px);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) 24px 64px !important;
  text-align: center;
}

#home.hero::before {
  content: "";
  position: absolute;
  inset: 28px max(18px, 3vw) 24px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  border-radius: clamp(24px, 4vw, 44px);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 94%, transparent), color-mix(in srgb, var(--color-surface-soft) 76%, transparent));
  box-shadow: var(--shadow-md);
}

#home.hero .brand-wrap {
  position: relative !important;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px !important;
  margin: 0 !important;
}

img.hero-logo,
.hero-logo {
  width: clamp(132px, 16vw, 210px) !important;
  max-height: 230px !important;
  margin: 0 auto 4px !important;
  object-fit: contain;
  filter: none !important;
}

.brand-hero {
  margin: 0 !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif !important;
  font-size: clamp(2.25rem, 6vw, 4.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.brand-sub {
  margin: 10px 0 0 !important;
  color: var(--color-primary) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: clamp(0.72rem, 1.35vw, 0.92rem) !important;
  font-weight: 800;
  letter-spacing: 0.22em !important;
}

.hero-wrap {
  max-width: 920px;
  margin: 30px auto 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.hero-title {
  margin: 0 !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif !important;
  font-size: clamp(2.15rem, 5.5vw, 4.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}

.hero-subtitle {
  max-width: 680px;
  margin: 18px auto 0 !important;
  color: var(--color-text-muted) !important;
  font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
  line-height: 1.55;
}

.hero-btns {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px !important;
  margin: 30px 0 0 !important;
}

.btn-primary,
.btn-outline,
.btn-download,
.btn-refresh,
.btn-vac-cta,
.pagination-btn,
.cta {
  min-height: 48px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-weight: 800 !important;
  line-height: 1.2;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
}

.btn-primary,
.btn-download,
.btn-vac-cta,
.cta.btn-primary {
  border: 1px solid transparent !important;
  background: var(--color-accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent) 24%, transparent) !important;
}

.btn-outline,
.btn-refresh,
.pagination-btn {
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-primary-strong) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-download:hover,
.btn-vac-cta:hover,
.cta.btn-primary:hover {
  transform: translateY(-2px) !important;
  background: var(--color-accent-hover) !important;
}

.btn-outline:hover,
.btn-refresh:hover,
.pagination-btn:hover {
  transform: translateY(-1px) !important;
  border-color: var(--color-primary) !important;
  background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface)) !important;
}

/* Stats and section foundations */
.stats {
  width: min(calc(100% - 40px), var(--content-width));
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px !important;
  margin: 0 auto !important;
  padding: 28px 0 48px !important;
}

.stat-card {
  min-height: 164px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-sm) !important;
}

.stats span,
html[data-theme="light"] .stats span {
  color: var(--color-primary-strong) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: clamp(2.15rem, 4vw, 3.15rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em;
  line-height: 1;
}

.stat-card p {
  max-width: 16ch;
  margin: 14px 0 0 !important;
  color: var(--color-text-muted) !important;
  font-size: 1rem;
  line-height: 1.35;
}

.section {
  width: min(100%, var(--content-width));
  margin: 0 auto;
  padding: clamp(64px, 8vw, 104px) 24px !important;
  text-align: left !important;
}

.section > h2,
.section-title,
.testimonials h2,
.contact-title {
  margin: 0 0 16px !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif !important;
  font-size: clamp(2rem, 4.4vw, 3.45rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em;
  line-height: 1.12;
  text-align: center;
}

.section > h2::after,
.section-title::after {
  width: 56px !important;
  height: 4px !important;
  margin: 18px auto 0 !important;
  border-radius: 999px !important;
  background: var(--color-accent) !important;
}

.section p,
.section small,
.sub,
.sub-title {
  color: var(--color-text-muted) !important;
}

/* Services */
#services .grid {
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px !important;
  margin-top: 38px !important;
}

.service-card {
  min-height: 258px;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  padding: 24px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-sm) !important;
  text-align: left !important;
}

.service-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border)) !important;
  box-shadow: var(--shadow-md) !important;
}

.service-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface));
  color: var(--color-primary-strong);
}

.service-icon svg {
  width: 25px;
  height: 25px;
}

.service-card h3,
html[data-theme="light"] .service-card h3 {
  margin: 0 0 10px !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  line-height: 1.35;
}

.service-card h3::after {
  content: none !important;
}

.service-card p {
  margin: 0;
  color: var(--color-text-muted) !important;
  font-size: 0.98rem !important;
  line-height: 1.55;
}

/* Employment and vacancies */
#employment {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

#employment .sub,
.sub-title {
  max-width: 720px;
  margin: 0 auto 34px !important;
  font-size: 1.08rem !important;
  line-height: 1.6;
  text-align: center;
}

.bar {
  gap: 14px !important;
  color: var(--color-text) !important;
}

.bar-bg {
  overflow: hidden;
  border-radius: 999px !important;
  background: var(--color-surface-soft) !important;
}

.bar-fill {
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
}

#jobs,
html[data-theme="light"] #jobs,
html[data-theme="dark"] #jobs {
  width: 100%;
  margin: clamp(48px, 7vw, 88px) 0 0;
  padding: clamp(64px, 8vw, 104px) 24px !important;
  background: color-mix(in srgb, var(--color-surface-soft) 70%, var(--color-bg)) !important;
  border-block: 1px solid var(--color-border);
}

.vacancies-container {
  max-width: var(--content-width) !important;
  margin: 0 auto !important;
}

.filters-container {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.35fr) minmax(180px, 1fr) minmax(210px, 1fr);
  gap: 12px !important;
  margin: 32px 0 16px !important;
  padding: 16px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

.filter-input,
.filter-select {
  width: 100% !important;
  max-width: none !important;
  min-height: 50px;
  padding: 0 14px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-size: 1rem !important;
}

.filter-input::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 76%, transparent);
}

.filter-input:focus,
.filter-select:focus {
  border-color: var(--color-ring) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-ring) 16%, transparent) !important;
}

.buttons-container {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 0 24px !important;
}

.buttons-container > a,
.buttons-container > button {
  padding: 0 18px !important;
}

#vacancies-refresh-status {
  min-height: 48px;
  flex: 1 1 300px;
  justify-content: flex-end;
  margin-left: auto !important;
  color: var(--color-text-muted) !important;
  font-size: 0.92rem;
}

.vacancies-state {
  grid-column: 1 / -1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 28px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 74%, transparent);
  color: var(--color-text-muted);
  text-align: center;
}

.vacancies-state strong {
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
}

.vacancies-state .btn-refresh {
  gap: 8px;
  margin-top: 8px;
  padding-inline: 18px;
}

.loading-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-primary) 13%, transparent);
  animation: loadingPulse 1.2s ease-in-out infinite;
}

@keyframes loadingPulse {
  50% { transform: scale(0.72); opacity: 0.62; }
}

.vacancies-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.vacancy-card,
html[data-theme="light"] .vacancy-card,
html[data-theme="dark"] .vacancy-card {
  position: relative;
  display: block !important;
  min-width: 0;
  padding: 24px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-sm) !important;
  text-align: left;
}

.vacancy-card::after {
  content: none !important;
}

.vacancy-card:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--color-primary) 44%, var(--color-border)) !important;
  box-shadow: var(--shadow-md) !important;
}

.vacancy-title,
html[data-theme="light"] #jobs .vacancy-card .vacancy-title,
html[data-theme="dark"] #jobs .vacancy-card .vacancy-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: clamp(1.12rem, 2vw, 1.3rem) !important;
  font-weight: 800 !important;
  line-height: 1.35;
}

.vacancy-icon-shell {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface));
  color: var(--color-primary-strong);
}

.vacancy-icon-shell svg {
  width: 22px;
  height: 22px;
}

#jobs .vacancy-card .vacancy-details,
#jobs .vacancy-card .vacancy-title {
  margin-left: 0 !important;
}

#jobs .vacancy-card .vacancy-details p,
#jobs .vacancy-card .vacancy-details p b,
html[data-theme="light"] #jobs .vacancy-card .vacancy-details p,
html[data-theme="dark"] #jobs .vacancy-card .vacancy-details p {
  color: var(--color-text-muted) !important;
  font-size: 1rem !important;
  line-height: 1.5;
}

#jobs .vacancy-card .vacancy-details p b {
  color: var(--color-text) !important;
}

/* Content cards */
.geo-item,
.rep-card,
.event-card,
.social-card,
.fact-card,
.partners-ru .card {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-sm) !important;
}

.partners-head,
.about-events-title,
.about-social-title,
.fact-title,
.event-title,
.rep-card h3,
html[data-theme="light"] .about-events-title,
html[data-theme="dark"] .about-events-title {
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
}

.event-card img,
.social-card img,
.partners-ru img {
  border-radius: 14px !important;
}

.testimonials {
  width: min(calc(100% - 40px), var(--content-width));
  margin: 40px auto !important;
  padding: clamp(52px, 7vw, 82px) 24px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-sm) !important;
}

.testimonials blockquote {
  max-width: 820px !important;
  margin: 24px auto 12px !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: clamp(1.25rem, 2.6vw, 1.8rem) !important;
  font-style: normal !important;
  line-height: 1.5;
}

.testimonials p {
  color: var(--color-text-muted) !important;
}

/* Contact and footer */
.contact-deck,
html[data-theme="dark"] .contact-deck {
  padding: 18px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-md) !important;
}

.deck-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.9fr) minmax(260px, 0.8fr) !important;
  gap: 20px !important;
}

.c-card,
html[data-theme="dark"] .c-card {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

.info-card,
.cta-card {
  padding: 22px !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg) !important;
}

.c-title,
html[data-theme="dark"] .c-title {
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
}

.c-address,
.c-sub,
.hours-lunch,
.p-head {
  color: var(--color-text-muted) !important;
}

.hours-icon,
.lunch-icon {
  color: var(--color-primary-strong);
}

.hours-icon svg,
.lunch-icon svg,
.cta .i svg {
  width: 20px;
  height: 20px;
}

.hours-list li,
html[data-theme="dark"] .hours-list li {
  min-height: 50px;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}

.hours-list li.holiday {
  background: color-mix(in srgb, #dc2626 8%, var(--color-surface)) !important;
  color: #b91c1c !important;
}

html[data-theme="dark"] .hours-list li.holiday {
  color: #fca5a5 !important;
}

.cta {
  width: 100% !important;
  max-width: 320px;
  padding: 0 18px !important;
}

.phones a {
  min-height: 36px;
  color: var(--color-primary-strong) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1rem !important;
}

footer {
  margin-top: 72px;
  padding: 36px 24px !important;
  border-top: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-muted) !important;
}

.footer-wrap {
  width: min(100%, var(--content-width));
  margin: 0 auto;
}

.footer-left span {
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-weight: 800;
}

#toTop {
  right: 20px !important;
  bottom: 20px !important;
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border)) !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  color: var(--color-primary-strong) !important;
  box-shadow: var(--shadow-md) !important;
}

#toTop svg {
  width: 22px;
  height: 22px;
}

/* Responsive layout */
@media (max-width: 1100px) {
  #services .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deck-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cta-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1101px) {
  .menu-toggle.inline {
    display: none !important;
  }
}

@media (max-width: 1100px) {
  .header {
    min-height: 70px;
    padding: 10px 18px !important;
  }

  .header .logo-block {
    width: 100%;
  }

  .theme-toggle.inline {
    margin-left: auto !important;
  }

  .menu-toggle.inline {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
  }

  .header #siteNav,
  html.menu-force-collapsed .header #siteNav {
    position: fixed !important;
    inset: 70px 12px auto !important;
    z-index: 1001;
    max-height: calc(100vh - 90px);
    display: none !important;
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* В колонке flex-end с широкой шапки уводил начало списка за верхний
       край панели, и допрокрутить туда было нельзя. */
    justify-content: flex-start !important;
    overscroll-behavior: contain;
    gap: 4px !important;
    padding: 12px !important;
    overflow-y: auto;
    border: 1px solid var(--color-border) !important;
    border-radius: 18px !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-md) !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html.menu-open .header #siteNav,
  html.menu-force-collapsed.menu-open .header #siteNav {
    display: flex !important;
  }

  .header #siteNav a {
    width: 100%;
    min-height: 48px !important;
    display: flex !important;
    justify-content: flex-start;
    padding: 0 14px !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  html.menu-open #menuToggle .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  html.menu-open #menuToggle .bar:nth-child(2) {
    opacity: 0 !important;
  }

  html.menu-open #menuToggle .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filters-container {
    grid-template-columns: 1fr 1fr;
  }

  .filter-input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  html {
    scroll-padding-top: 78px;
  }

  .scroll-progress {
    top: 69px;
  }

  #home.hero::after {
    inset: 14px 8px 8px;
  }

  .theme-toggle.inline {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 !important;
  }

  .theme-toggle .label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  #home.hero {
    min-height: auto;
    padding: 48px 18px 50px !important;
  }

  #home.hero::before {
    inset: 16px 10px 12px;
    border-radius: 24px;
  }

  img.hero-logo,
  .hero-logo {
    width: 126px !important;
  }

  .brand-sub {
    letter-spacing: 0.14em !important;
  }

  .hero-wrap {
    margin-top: 22px !important;
  }

  .hero-btns {
    width: calc(100% - 28px) !important;
    max-width: 360px;
    flex-direction: column;
    margin-top: 24px !important;
  }

  .hero-btns a {
    width: 100%;
    max-width: 360px;
  }

  .section,
  #jobs {
    padding: 58px 16px !important;
  }

  #services .grid,
  .vacancies-grid,
  .deck-grid {
    grid-template-columns: 1fr !important;
  }

  .service-card {
    min-height: auto;
    flex-direction: row !important;
    gap: 16px;
    padding: 20px !important;
  }

  .service-icon {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .filters-container {
    grid-template-columns: 1fr;
    padding: 12px !important;
  }

  .filter-input {
    grid-column: auto;
  }

  .buttons-container {
    align-items: stretch !important;
  }

  .buttons-container > a,
  .buttons-container > button {
    width: 100%;
  }

  #vacancies-refresh-status {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: center !important;
    margin: 8px 0 0 !important;
  }

  .vacancy-card {
    padding: 20px !important;
  }

  .stats {
    width: calc(100% - 32px);
    gap: 12px !important;
  }

  .stat-card {
    min-height: 142px;
    padding: 18px 12px !important;
  }

  .testimonials {
    width: calc(100% - 32px);
    margin: 24px auto !important;
  }

  .cta-card {
    grid-column: auto;
  }

  .map-card iframe {
    height: 290px !important;
  }

  .info-card,
  .cta-card {
    padding: 18px !important;
  }
}

/* ========================================================================== 
   v119 — прозрачные цветовые слои.

   Полноширинные главы больше не перекрывают интерактивную сеть. Цвет лежит
   как полупрозрачный фильтр, а не как непрозрачная панель.
   ========================================================================== */

html:root[data-theme] body.home-page :is(
  .stats,
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) {
  --section-opacity: 82%;
  background-color: color-mix(in srgb, var(--section-surface) var(--section-opacity), transparent) !important;
  background-image:
    radial-gradient(42rem circle at var(--section-pointer-x) var(--section-pointer-y), color-mix(in srgb, var(--section-tone-a) 18%, transparent) 0%, transparent 72%),
    radial-gradient(70rem 44rem at var(--section-orb-x, 104%) var(--section-orb-y, 104%), color-mix(in srgb, var(--section-tone-b) 12%, transparent) 0%, transparent 70%),
    linear-gradient(142deg,
      color-mix(in srgb, var(--section-tone-a) 5%, transparent) 0%,
      color-mix(in srgb, var(--section-surface) var(--section-opacity), transparent) 48%,
      color-mix(in srgb, var(--section-tone-b) 6%, transparent) 100%) !important;
}

html:root[data-theme="dark"] body.home-page :is(
  .stats,
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) {
  --section-opacity: 74%;
  background-image:
    radial-gradient(44rem circle at var(--section-pointer-x) var(--section-pointer-y), color-mix(in srgb, var(--section-tone-a) 16%, transparent) 0%, transparent 74%),
    radial-gradient(70rem 46rem at var(--section-orb-x, 104%) var(--section-orb-y, 104%), color-mix(in srgb, var(--section-tone-b) 12%, transparent) 0%, transparent 72%),
    linear-gradient(142deg,
      color-mix(in srgb, var(--section-tone-a) 5%, transparent) 0%,
      color-mix(in srgb, var(--section-surface) var(--section-opacity), transparent) 48%,
      color-mix(in srgb, var(--section-tone-b) 6%, transparent) 100%) !important;
}

html:root[data-theme] body.home-page .stats {
  --section-opacity: 70%;
}

html:root[data-theme="dark"] body.home-page .stats {
  --section-opacity: 64%;
}

/* v120 — заголовок фактов стоит на общей центральной оси раздела. */
html:root[data-theme] body.home-page #facts > .section-heading {
  width: min(100%, 860px);
  margin-inline: auto !important;
  text-align: center !important;
}

html:root[data-theme] body.home-page #facts > .section-heading :is(.section-kicker, h2) {
  margin-inline: auto !important;
  text-align: center !important;
  text-wrap: balance;
}

@media (max-width: 430px) {
  .header .brand {
    font-size: 0.9rem;
  }

  .header .logo {
    width: 34px !important;
    height: 34px !important;
  }

  .hero-title {
    font-size: clamp(2rem, 11vw, 2.7rem) !important;
  }

  .stat-card {
    min-height: 128px;
  }

  .service-card {
    flex-direction: column !important;
  }
}

/* Phase 3: process, vacancy conversion and complete footer */
.process-section {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 6%, color-mix(in srgb, var(--color-secondary) 11%, transparent), transparent 30%),
    var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: process;
}

.process-grid::before {
  content: "";
  position: absolute;
  top: 47px;
  right: 10%;
  left: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border) 12%, var(--color-border) 88%, transparent);
}

.process-card {
  position: relative;
  min-width: 0;
  min-height: 260px;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.process-number {
  position: absolute;
  top: 18px;
  right: 18px;
  color: color-mix(in srgb, var(--color-primary) 60%, var(--color-text-muted));
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.process-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  border-radius: 15px;
  background: var(--color-surface-soft);
  color: var(--color-primary-strong);
  box-shadow: 0 0 0 8px var(--color-surface);
}

.process-icon svg,
.process-cta svg,
.vacancy-actions svg,
.footer-bottom svg {
  width: 22px;
  height: 22px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-card h3 {
  margin: 0 0 10px;
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.35;
}

.process-card p {
  margin: 0;
  color: var(--color-text-muted) !important;
  font-size: 0.96rem !important;
  line-height: 1.58;
}

.process-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
}

.process-cta p {
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.process-cta strong {
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1.02rem;
}

.process-cta span {
  color: var(--color-text-muted);
  font-size: 0.94rem;
}

.process-cta .btn-primary {
  flex: 0 0 auto;
  gap: 8px;
  padding-inline: 20px;
}

.vacancies-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 2px 0 16px;
  padding: 12px 2px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.vacancies-summary strong {
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.96rem;
}

.vacancy-card,
html[data-theme="light"] .vacancy-card,
html[data-theme="dark"] .vacancy-card {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
}

.vacancy-details {
  flex: 1 1 auto;
}

.vacancy-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.vacancy-reply {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 11px;
  background: var(--color-accent);
  color: #fff !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.vacancy-reply:hover {
  transform: translateY(-1px);
  background: var(--color-accent-hover);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.vacancy-reply svg {
  width: 18px;
  height: 18px;
}

.vacancy-actions > span {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

footer {
  padding: 0 24px 26px !important;
  border-top: 0 !important;
  background: transparent !important;
}

.footer-wrap {
  display: block !important;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(250px, 1.5fr) repeat(3, minmax(150px, 0.7fr));
  gap: clamp(28px, 5vw, 64px);
  padding-bottom: 34px;
}

.footer-brand-block > p {
  max-width: 330px;
  margin: 16px 0 20px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-left img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.footer-left span {
  font-size: 1.08rem;
  letter-spacing: 0.05em;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-column h3 {
  margin: 0 0 6px;
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
}

.footer-column a,
.footer-column span {
  color: var(--color-text-muted) !important;
  font-size: 0.92rem;
  line-height: 1.45;
  text-decoration: none;
}

.footer-column a:hover {
  color: var(--color-primary-strong) !important;
}

.footer-brand-block .socials {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

.footer-brand-block .soc {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-primary-strong) !important;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.footer-brand-block .soc:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background: var(--color-surface-soft);
}

.footer-bottom {
  min-height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}

.footer-bottom p {
  margin: 0;
  color: var(--color-text-muted) !important;
  font-size: 0.88rem;
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-primary-strong) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

.footer-bottom svg {
  width: 17px;
  height: 17px;
}

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

  .process-grid::before {
    content: none;
  }

  .process-card {
    min-height: 230px;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-card {
    min-height: auto;
  }

  .process-icon {
    margin-bottom: 20px;
  }

  .process-cta,
  .vacancies-summary,
  .vacancy-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .process-cta .btn-primary,
  .vacancy-reply {
    width: 100%;
  }

  .vacancy-actions > span {
    text-align: center;
  }

  footer {
    margin-top: 42px;
    padding: 0 16px 16px !important;
  }

  .footer-wrap {
    padding: 26px 22px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 700px) and (max-width: 760px) {
  #services .grid,
  .vacancies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .service-card {
    flex-direction: column !important;
  }
}

/* Phase 2: clearer conversion path and content hierarchy */
.section-heading {
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: center;
}

.stat-number {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  color: var(--color-primary-strong);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-weight: 800;
  line-height: 1;
}

.stat-number .stat-suffix {
  font-size: 0.48em !important;
  color: var(--color-primary) !important;
}

.section-heading h2,
.jobs-heading .section-title {
  margin: 4px 0 12px !important;
}

.section-kicker {
  margin: 0 !important;
  color: var(--color-primary) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.82rem !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.section-lead {
  max-width: 680px;
  margin: 0 auto !important;
  color: var(--color-text-muted) !important;
  font-size: 1.08rem !important;
  line-height: 1.6;
}

.header #siteNav .nav-contact {
  min-height: 42px !important;
  padding-inline: 17px !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: 11px !important;
  background: var(--color-accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.header #siteNav .nav-contact:hover,
.header #siteNav .nav-contact.active {
  background: var(--color-accent-hover) !important;
  color: #fff !important;
}

#home.hero {
  width: min(100%, calc(var(--content-width) + 48px));
  min-height: 680px;
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(350px, 0.85fr);
  align-items: center;
  justify-content: stretch;
  gap: clamp(36px, 6vw, 76px);
  padding: 88px 48px 78px !important;
  text-align: left;
}

#home.hero::before {
  inset: 28px 16px 20px;
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--color-secondary) 12%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 96%, transparent), color-mix(in srgb, var(--color-surface-soft) 74%, transparent));
}

#home.hero::after {
  content: "";
  position: absolute;
  inset: 28px 16px 20px;
  z-index: 0;
  border-radius: clamp(24px, 4vw, 44px);
  background: radial-gradient(390px circle at var(--spot-x, 72%) var(--spot-y, 28%), color-mix(in srgb, var(--color-secondary) 20%, transparent), transparent 72%);
  opacity: 0.82;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.hero-copy,
.hero-panel {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    opacity: 0;
    animation: heroEnter 520ms cubic-bezier(.2,.8,.2,1) forwards !important;
  }

  .hero-copy > :nth-child(2) { animation-delay: 70ms !important; }
  .hero-copy > :nth-child(3) { animation-delay: 130ms !important; }
  .hero-copy > :nth-child(4) { animation-delay: 190ms !important; }
  .hero-copy > :nth-child(5) { animation-delay: 250ms !important; }

  .hero-panel {
    opacity: 0;
    animation: heroPanelEnter 620ms 180ms cubic-bezier(.2,.8,.2,1) forwards;
  }

  .event-card img,
  .social-card img,
  .partners-ru .card img {
    transition: transform 420ms cubic-bezier(.2,.8,.2,1), filter 260ms ease;
  }

  .event-card:hover img,
  .social-card:hover img,
  .partners-ru .card:hover img {
    transform: scale(1.035);
    filter: saturate(1.06) contrast(1.02);
  }
}

@keyframes heroEnter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroPanelEnter {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-copy,
.hero-copy .hero-title,
.hero-copy .hero-subtitle {
  text-align: left !important;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px !important;
  color: var(--color-primary-strong) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.88rem !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hero-eyebrow span {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.hero-title {
  max-width: 720px;
  font-size: clamp(2.7rem, 5.2vw, 4.65rem) !important;
  line-height: 1.03 !important;
}

.hero-subtitle {
  max-width: 650px;
  margin: 22px 0 0 !important;
  font-size: clamp(1.06rem, 1.55vw, 1.23rem) !important;
}

.hero-btns {
  justify-content: flex-start;
  margin-top: 30px !important;
}

.hero-btns a {
  min-height: 52px;
  gap: 9px;
  padding: 0 21px !important;
}

.hero-btns svg,
.hero-trust svg,
.hero-route svg,
.hero-panel-note svg,
.btn-download svg,
.btn-refresh svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-muted);
  font-size: 0.94rem;
  font-weight: 700;
}

.hero-trust svg {
  color: var(--color-accent);
}

.hero-panel {
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: var(--shadow-md);
}

.hero-panel-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
}

.hero-logo-shell {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--color-surface-soft);
}

.hero-logo-shell img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.hero-panel-brand > span:last-child,
.hero-route > span:nth-child(2),
.hero-panel-note > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hero-panel-brand strong {
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.hero-panel-brand small,
.hero-route small,
.hero-panel-note small {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.hero-panel-label {
  margin: 18px 0 10px !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.9rem !important;
  font-weight: 800;
}

.hero-route {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.hero-route:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-surface));
}

.hero-route-icon {
  width: 42px;
  height: 42px;
  display: grid !important;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-secondary) 13%, var(--color-surface));
  color: var(--color-primary-strong);
}

.hero-route strong {
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.98rem;
  line-height: 1.35;
}

.route-arrow {
  color: var(--color-primary);
}

.hero-panel-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
}

.hero-panel-note > svg {
  margin-top: 2px;
  color: var(--color-accent);
}

.hero-panel-note strong {
  color: var(--color-text);
  font-size: 0.94rem;
}

#services .section-heading,
#employment .section-heading,
.jobs-heading {
  margin-bottom: 34px;
}

#services .grid,
#employment .bars,
.jobs-heading + .filters-container {
  margin-top: 0 !important;
}

.filter-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
}

.filter-control {
  position: relative;
  display: block;
}

.filter-control > svg {
  position: absolute;
  top: 50%;
  left: 14px;
  z-index: 1;
  width: 19px;
  height: 19px;
  color: var(--color-text-muted);
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  transform: translateY(-50%);
  pointer-events: none;
}

.filter-control .filter-input {
  padding-left: 43px !important;
}

.buttons-container .btn-download,
.buttons-container .btn-refresh {
  gap: 8px;
}

html[data-theme="light"] .buttons-container .btn-download,
html[data-theme="light"] .buttons-container .btn-download:hover,
html[data-theme="light"] .buttons-container .btn-download svg {
  color: #fff !important;
}

#vacancies-refresh-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.rep-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.rep-badge img {
  width: 24px;
  height: 17px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 80%, transparent);
}

#partners .geo {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 auto 22px;
}

#partners .geo-item {
  min-height: 132px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0;
  padding: 20px !important;
}

#partners .geo-item .num {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface));
  color: var(--color-primary-strong);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-weight: 800;
}

#partners .geo-title {
  margin-bottom: 12px;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.35;
}

#partners .flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.rep-text,
.rep-text h3,
.rep-text .rep-lead,
.rep-text .rep-list {
  text-align: left !important;
}

.rep-text .rep-badges {
  justify-content: flex-start !important;
}

.rep-text .rep-list {
  list-style-position: outside !important;
}

.testimonials {
  padding-inline: clamp(20px, 4vw, 48px) !important;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.testimonial-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.testimonials .testimonial-card blockquote {
  max-width: none !important;
  margin: 0 !important;
  color: var(--color-text) !important;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 1.03rem !important;
  line-height: 1.6;
}

.testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.testimonial-card figcaption strong {
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.94rem;
}

.testimonial-card figcaption span {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(32px, 7vw, 84px);
  margin-bottom: clamp(44px, 7vw, 74px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.about-intro .section-heading {
  max-width: none;
  margin: 0;
  text-align: left;
}

.about-copy {
  padding-left: clamp(0px, 3vw, 36px);
  border-left: 1px solid var(--color-border);
}

.about-copy p {
  margin: 0 0 14px;
  color: var(--color-text-muted) !important;
  font-size: 1.08rem !important;
  line-height: 1.7;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

#contact .contact-heading {
  margin-bottom: 30px;
}

@media (max-width: 960px) {
  .header #siteNav .nav-contact {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--color-text) !important;
    box-shadow: none;
  }

  #home.hero {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 28px;
    padding-inline: 34px !important;
  }

  .hero-title {
    font-size: clamp(2.45rem, 6.7vw, 3.8rem) !important;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  #partners .geo {
    grid-template-columns: 1fr;
  }

  #partners .geo-item {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .section-heading {
    margin-bottom: 28px;
  }

  .section-lead {
    font-size: 1rem !important;
  }

  #home.hero {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    gap: 30px;
    padding: 58px 28px 44px !important;
  }

  #home.hero::before {
    inset: 14px 8px 8px;
  }

  .hero-eyebrow {
    font-size: 0.76rem !important;
    letter-spacing: 0.045em;
  }

  .hero-title {
    font-size: clamp(2.3rem, 11vw, 3.4rem) !important;
  }

  .hero-copy,
  .hero-copy .hero-title,
  .hero-copy .hero-subtitle {
    text-align: center !important;
  }

  .hero-subtitle {
    margin-top: 18px !important;
  }

  .hero-btns {
    width: 100% !important;
    max-width: none;
    align-items: stretch;
  }

  .hero-btns a {
    max-width: none;
  }

  .hero-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero-panel {
    display: none;
  }

  .about-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }

  .about-copy {
    padding: 22px 0 0;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .testimonial-card {
    padding: 20px;
  }
}

@media (max-width: 430px) {
  #home.hero {
    padding-inline: 22px !important;
  }

  .hero-title {
    font-size: clamp(2.15rem, 10.8vw, 2.9rem) !important;
  }

  .hero-route {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* WORKUP 2026-09 usability pass: scoped route, process and mobile density. */
body.home-page #jobs { scroll-margin-top: 82px; padding-block: clamp(44px, 6vw, 76px); }
body.home-page #jobs .jobs-heading { margin-bottom: 18px; }
body.home-page #jobs .jobs-country-directory { padding-block: 18px 10px; }
body.home-page #jobs .jobs-route-explorer { min-height: clamp(570px, 48vw, 640px); }
body.home-page #jobs .jobs-route-hub { width: clamp(190px, 17vw, 210px); text-decoration:none; }
body.home-page #jobs .jobs-route-hub small { font-size:12px; letter-spacing:.1em; }
body.home-page #jobs .jobs-route-hub > span:last-child { font-size:12px; }
body.home-page #jobs .jobs-country-copy small { font-size:12px; letter-spacing:.08em; }
body.home-page #jobs .jobs-country-copy b,
body.home-page #jobs .jobs-country-count-label { font-size:12px; }
body.home-page #jobs .jobs-country-action { width:44px; min-height:44px; }
body.home-page #jobs .jobs-country-card[data-country="Германия"] .jobs-country-visual img { content:url("/assets/flags/de.svg"); }
body.home-page #jobs .jobs-country-card[data-country="Экваториальная Гвинея"] .jobs-country-visual img { content:url("/assets/flags/gq.svg"); }
body.home-page #jobs .jobs-route-ambient i,
body.home-page #jobs .jobs-route-hub::before,
body.home-page #jobs .jobs-route-hub::after,
body.home-page #jobs .jobs-route-hub-orbit,
body.home-page #jobs .jobs-country-visual,
body.home-page #jobs .has-openings .jobs-country-visual::after { animation:none; }
body.home-page #jobs .jobs-country-card:focus-visible .jobs-country-copy,
body.home-page #jobs .jobs-country-card:hover .jobs-country-copy { box-shadow:0 0 0 2px var(--country-accent), 0 0 30px color-mix(in srgb,var(--country-accent) 24%,transparent); }

body.home-page .process-grid::before { transform-origin:left center; animation:workup-process-line 900ms ease-out both; }
body.home-page .process-card:focus-within,
body.home-page .process-card:hover { box-shadow:0 16px 40px color-mix(in srgb,var(--section-tone-a) 20%,transparent); }
@keyframes workup-process-line { from { scale:.05 1; opacity:.25; } to { scale:1 1; opacity:1; } }

@media (max-width:800px) {
  body.home-page #jobs { padding:38px 14px 42px; }
  body.home-page #jobs .jobs-heading { margin-bottom:12px; }
  body.home-page #jobs .jobs-country-directory-head { gap:12px; }
  body.home-page #jobs .jobs-country-directory-head > div > span:last-child { font-size:14px; }
  body.home-page #jobs .jobs-route-explorer { min-height:0; padding:158px 0 8px; overflow:visible; }
  body.home-page #jobs .jobs-route-hub { top:76px; width:142px; }
  body.home-page #jobs .jobs-route-hub > svg { margin-bottom:4px; }
  body.home-page #jobs .jobs-route-hub strong { font-size:17px; }
  body.home-page #jobs .jobs-country-grid { grid-template-columns:1fr; gap:10px; width:100%; }
  body.home-page #jobs .jobs-country-card { width:100%; min-height:76px; padding:8px 4px; border-radius:18px; background:rgba(3,22,36,.76); }
  body.home-page #jobs .jobs-country-visual { width:62px; height:62px; margin-left:8px; box-shadow:0 0 0 5px rgba(4,25,40,.6),0 0 18px color-mix(in srgb,var(--country-accent) 22%,transparent); }
  body.home-page #jobs .jobs-country-visual img { width:42px; height:42px; }
  body.home-page #jobs .jobs-country-copy { min-width:0; margin-left:12px; padding:8px 10px 8px 14px; background:none; box-shadow:none; }
  body.home-page #jobs .jobs-country-copy strong { font-size:18px; }
  body.home-page #jobs .jobs-country-copy small { font-size:12px; }
  body.home-page #jobs .jobs-country-copy b { display:flex; align-items:baseline; gap:7px; margin-top:4px; font-size:14px; }
  body.home-page #jobs .jobs-country-count { font-size:28px; }
  body.home-page #jobs .jobs-country-count-label { font-size:12px; }
  body.home-page #jobs .jobs-country-action { width:44px; min-height:44px; margin-right:8px; }
  body.home-page #services,
  body.home-page .process-section { padding-block:clamp(38px,10vw,58px); }
  body.home-page #services .section-heading,
  body.home-page .process-section .section-heading { margin-bottom:22px; }
  body.home-page #services .grid { gap:10px; }
  body.home-page #services .service-card { min-height:0; padding:16px; gap:12px; }
  body.home-page #services .service-card p,
  body.home-page .process-card p { font-size:14px; line-height:1.5; }
  body.home-page .process-grid { gap:10px; }
  body.home-page .process-card { min-height:0; padding:16px; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page #jobs *, body.home-page #jobs *::before, body.home-page #jobs *::after,
  body.home-page .process-section *, body.home-page .process-section *::before, body.home-page .process-section *::after {
    animation:none !important; transition:none !important; scroll-behavior:auto !important;
  }
}

/* Phase 5: immersive editorial structure inspired by spatial studio portfolios. */
#home.hero {
  width: min(100%, 1440px) !important;
  min-height: calc(100svh - 74px);
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr) !important;
  gap: clamp(34px, 5vw, 76px) !important;
  padding: clamp(54px, 7vw, 100px) clamp(32px, 5vw, 72px) clamp(48px, 6vw, 84px) !important;
}

#home.hero::before {
  content: none !important;
}

#home.hero::after {
  inset: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(520px circle at var(--spot-x, 74%) var(--spot-y, 30%), color-mix(in srgb, var(--color-secondary) 13%, transparent), transparent 72%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-secondary) 4%, transparent), transparent 42%) !important;
  opacity: 1;
}

.hero-copy {
  z-index: 2;
  max-width: 650px;
}

.hero-title {
  max-width: 760px !important;
  font-size: clamp(2.75rem, 5vw, 5rem) !important;
  line-height: 1.02 !important;
}

.hero-visual {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-width: 0;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-soft);
}

.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 44%, rgba(3, 18, 29, .78) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 18%, transparent), transparent 32%);
  pointer-events: none;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
  object-fit: cover;
  object-position: 57% center;
  filter: saturate(.9) contrast(1.03);
  transform: scale(1.015);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1), filter 500ms ease;
}

.hero-visual-index {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 2;
  color: rgba(255,255,255,.9);
  font-family: "Unbounded", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.hero-visual figcaption {
  position: absolute;
  right: clamp(20px, 4vw, 38px);
  bottom: clamp(22px, 4vw, 38px);
  left: clamp(20px, 4vw, 38px);
  z-index: 2;
  display: grid;
  gap: 7px;
  color: #fff;
}

.hero-visual figcaption span {
  font-family: "Onest", sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
}

.hero-visual figcaption strong {
  max-width: 530px;
  color: #fff !important;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(1rem, 1.65vw, 1.45rem);
  line-height: 1.4;
  text-shadow: 0 2px 20px rgba(0,0,0,.32);
  -webkit-text-fill-color: #fff !important;
}

.hero-visual figcaption span {
  color: rgba(255,255,255,.82) !important;
  -webkit-text-fill-color: rgba(255,255,255,.82) !important;
}

@media (hover: hover) and (pointer: fine) {
  .hero-visual:hover img {
    filter: saturate(1) contrast(1.04);
    transform: scale(1.045);
  }
}

/* Open statistics row: typography and separators instead of four floating boxes. */
.stats {
  gap: 0 !important;
  padding-block: 6px !important;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.stats .stat-card,
html[data-theme="light"] .stats .stat-card,
html[data-theme="dark"] .stats .stat-card {
  min-height: 164px;
  border: 0 !important;
  border-left: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.stats .stat-card:first-child {
  border-left: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .stats .stat-card:hover {
    border-color: var(--color-border) !important;
    background: color-mix(in srgb, var(--color-secondary) 5%, transparent) !important;
    box-shadow: none !important;
  }
}

/* Services and process become an editorial index, not repeated rounded tiles. */
#services .grid {
  gap: 0 !important;
}

#services .service-card,
html[data-theme="light"] #services .service-card,
html[data-theme="dark"] #services .service-card {
  min-height: 250px;
  padding: 28px 16px 26px !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#services .service-card:hover {
  border-color: var(--color-primary) !important;
  background: color-mix(in srgb, var(--color-secondary) 5%, transparent) !important;
  box-shadow: none !important;
  transform: none !important;
}

#services .service-card h3::after {
  content: none !important;
}

.process-grid {
  gap: 0 !important;
}

.process-card,
html[data-theme="light"] .process-card,
html[data-theme="dark"] .process-card {
  min-height: 260px;
  padding: 26px 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.process-grid::before {
  content: none !important;
}

.process-icon {
  margin-bottom: 34px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.process-icon svg {
  width: 30px;
  height: 30px;
}

.testimonial-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="dark"] .testimonial-card {
  padding-inline: 6px !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#partners .geo-item,
html[data-theme="light"] #partners .geo-item,
html[data-theme="dark"] #partners .geo-item {
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 1080px) {
  #home.hero {
    grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr) !important;
  }

  .hero-title {
    font-size: clamp(2.6rem, 5.6vw, 4.2rem) !important;
  }
}

@media (max-width: 760px) {
  #home.hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    min-height: auto;
    padding: 54px 20px 44px !important;
  }

  .hero-copy,
  .hero-copy .hero-title,
  .hero-copy .hero-subtitle {
    text-align: left !important;
  }

  .hero-btns {
    align-items: stretch;
  }

  .hero-trust {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 390px;
  }

  .hero-visual img {
    min-height: 390px;
    object-position: 61% center;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stats .stat-card:nth-child(3) {
    border-left: 0 !important;
  }

  .stats .stat-card:nth-child(n + 3) {
    border-top: 1px solid var(--color-border) !important;
  }

  #services .service-card,
  .process-card {
    min-height: auto;
    padding-inline: 4px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual img {
    transform: none !important;
  }
}

/* Phase 4: distinctive typography, lighter section framing and tactile motion */
:where(h1, h2, h3, .hero-title, .section-title, .stat-number, .vacancy-title, .logo-block > span, .footer-left > span) {
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif !important;
}

:where(button, input, select, textarea, .btn-primary, .btn-outline, .btn-download, .btn-refresh, .nav-contact, .vacancy-reply) {
  font-family: "Onest", "Segoe UI", sans-serif !important;
}

.hero-title,
.section-title,
.section-heading h2 {
  letter-spacing: -0.035em !important;
}

.section-heading h2,
.jobs-heading .section-title {
  line-height: 1.13 !important;
}

.section-kicker,
.vacancy-index {
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
}

/* Keep rounded surfaces only where they carry interaction or grouped content. */
.process-section,
.about-intro,
.footer-wrap {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.process-section {
  padding-inline: clamp(20px, 4vw, 48px) !important;
}

.process-cta {
  margin-top: 28px;
  padding: 22px 0 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0 !important;
  background: transparent !important;
}

.about-intro {
  padding: clamp(8px, 2vw, 20px) 0 !important;
}

footer {
  margin-top: 58px;
  border-top: 1px solid var(--color-border) !important;
}

.footer-wrap {
  padding-inline: 0 !important;
}

.contact-deck,
html[data-theme="dark"] .contact-deck {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.c-card,
html[data-theme="dark"] .c-card {
  border-radius: 12px !important;
  box-shadow: none !important;
}

.hours-list li,
html[data-theme="dark"] .hours-list li {
  padding-inline: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Statistics: explicit suffix sizing fixes the dark-theme disappearing plus sign. */
.stats .stat-card {
  --stat-x: 50%;
  --stat-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 164px;
  padding: 28px 18px 24px !important;
  border-radius: 15px !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 94%, transparent), color-mix(in srgb, var(--color-secondary) 5%, var(--color-surface))) !important;
  box-shadow: 0 14px 38px color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease, box-shadow 260ms ease !important;
}

.stats .stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(210px circle at var(--stat-x) var(--stat-y), color-mix(in srgb, var(--color-secondary) 20%, transparent), transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.stats .stat-card::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 0;
  left: 22px;
  height: 3px;
  border-radius: 0 !important;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  transform: scaleX(.18);
  transform-origin: left;
  opacity: .42;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 260ms ease;
}

.stats .stat-number,
html[data-theme="light"] .stats .stat-number,
html[data-theme="dark"] .stats .stat-number {
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: var(--color-primary-strong) !important;
  font-size: clamp(2.35rem, 4vw, 3.15rem) !important;
  font-weight: 700 !important;
  line-height: .98 !important;
  letter-spacing: -0.055em !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.stats .stat-number > span,
html[data-theme="dark"] .stats .stat-number > span {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

.stats .stat-number .stat-suffix,
html[data-theme="light"] .stats .stat-number .stat-suffix,
html[data-theme="dark"] .stats .stat-number .stat-suffix {
  flex: 0 0 auto !important;
  margin-top: .08em !important;
  color: var(--color-primary) !important;
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif !important;
  font-size: clamp(.95rem, 1.55vw, 1.3rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  -webkit-text-fill-color: currentColor !important;
}

.stats .stat-card p {
  max-width: 180px;
  margin: 13px auto 0 !important;
  line-height: 1.45 !important;
}

@media (hover: hover) and (pointer: fine) {
  .stats .stat-card:hover {
    transform: translateY(-6px) rotateX(.8deg) !important;
    border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border)) !important;
    box-shadow: 0 22px 46px color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
  }

  .stats .stat-card:hover::before {
    opacity: 1;
  }

  .stats .stat-card:hover::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Shared button motion: pointer light, travelling sheen and a short press state. */
:is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta) {
  --button-x: 50%;
  --button-y: 50%;
  --magnetic-x: 0px;
  --magnetic-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(var(--magnetic-x), var(--magnetic-y), 0);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background-color 180ms ease, border-color 180ms ease !important;
}

:is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120px circle at var(--button-x) var(--button-y), rgba(255,255,255,.34), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

:is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta)::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -45%;
  z-index: 1;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  pointer-events: none;
  transform: translateX(-220%) rotate(14deg);
}

:is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta) > :is(span, svg) {
  position: relative;
  z-index: 2;
}

:is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta):active {
  transform: translate3d(var(--magnetic-x), calc(var(--magnetic-y) + 1px), 0) scale(.965) !important;
  transition-duration: 70ms !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta):hover {
    transform: translate3d(var(--magnetic-x), calc(var(--magnetic-y) - 2px), 0) !important;
  }

  :is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta):hover::before {
    opacity: 1;
  }

  :is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta):hover::after {
    animation: buttonSheen 680ms cubic-bezier(.2,.8,.2,1);
  }

  :is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta):hover svg {
    transform: translateX(3px) rotate(-5deg);
  }
}

:is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta) svg {
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
}

@keyframes buttonSheen {
  from { transform: translateX(-220%) rotate(14deg); }
  to { transform: translateX(560%) rotate(14deg); }
}

/* Vacancy cards: editorial hierarchy instead of a stack of pills. */
@property --vacancy-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

#jobs .vacancy-card,
html[data-theme="light"] #jobs .vacancy-card,
html[data-theme="dark"] #jobs .vacancy-card {
  --card-x: 50%;
  --card-y: 35%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --vacancy-angle: 0deg;
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  min-height: 420px;
  padding: 1px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: conic-gradient(from var(--vacancy-angle), color-mix(in srgb, var(--color-primary) 20%, var(--color-border)), var(--color-border) 28%, color-mix(in srgb, var(--color-accent) 18%, var(--color-border)) 54%, var(--color-border) 78%, color-mix(in srgb, var(--color-primary) 20%, var(--color-border))) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
  color: var(--color-text) !important;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0) !important;
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease !important;
}

#jobs .vacancy-card::before {
  content: "" !important;
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: 17px !important;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--color-surface) 98%, transparent), color-mix(in srgb, var(--color-secondary) 4%, var(--color-surface))) !important;
  pointer-events: none;
}

#jobs .vacancy-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  height: auto !important;
  border-radius: 17px !important;
  background: radial-gradient(340px circle at var(--card-x) var(--card-y), color-mix(in srgb, var(--color-secondary) 17%, transparent), transparent 68%) !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 220ms ease !important;
}

.vacancy-card-content,
.vacancy-actions {
  position: relative;
  z-index: 2;
}

.vacancy-card-content {
  flex: 1 1 auto;
  padding: 25px 25px 20px;
}

.vacancy-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 23px;
}

.vacancy-index {
  color: var(--color-primary-strong);
  font-size: .68rem;
  text-transform: uppercase;
}

.vacancy-location {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: .82rem;
  font-weight: 650;
}

.vacancy-location svg,
.vacancy-pay svg,
.vacancy-info-icon svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#jobs .vacancy-card .vacancy-title,
html[data-theme="light"] #jobs .vacancy-card .vacancy-title,
html[data-theme="dark"] #jobs .vacancy-card .vacancy-title {
  min-height: 3.2em;
  margin: 0 0 22px !important;
  color: var(--color-text) !important;
  font-size: clamp(1.12rem, 1.6vw, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  letter-spacing: -0.025em !important;
  text-align: left !important;
}

.vacancy-pay {
  display: grid;
  gap: 6px;
  padding: 15px 0 16px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.vacancy-pay > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-text-muted);
  font-size: .8rem;
  font-weight: 650;
}

.vacancy-pay > span svg {
  color: var(--color-primary);
}

.vacancy-pay strong {
  color: var(--color-primary-strong);
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-size: clamp(1.12rem, 1.65vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: -.025em;
}

.vacancy-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 18px;
}

.vacancy-info-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  align-content: start;
}

.vacancy-info-icon {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center;
  grid-row: 1 / span 2;
  margin: 1px 0 0 !important;
  overflow: visible !important;
  color: var(--color-accent);
}

.vacancy-info-icon svg,
html[data-theme="light"] .vacancy-info-icon svg,
html[data-theme="dark"] .vacancy-info-icon svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
}

.vacancy-info-item > span:last-child {
  min-width: 0;
  display: flex !important;
  flex-direction: column;
}

.vacancy-info-item small {
  color: var(--color-text-muted) !important;
  font-size: .72rem !important;
  font-weight: 650;
  line-height: 1.3;
}

.vacancy-info-item strong {
  margin-top: 3px;
  color: var(--color-text) !important;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.45;
}

#jobs .vacancy-card .vacancy-actions {
  min-height: 78px;
  margin: 0 !important;
  padding: 16px 24px !important;
  border-top: 1px solid var(--color-border) !important;
  background: color-mix(in srgb, var(--color-surface-soft) 46%, transparent) !important;
}

.vacancy-response-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vacancy-response-note i {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.vacancy-reply {
  border-radius: 10px !important;
}

@media (prefers-reduced-motion: no-preference) {
  /* Появление ждёт карточку в кадре — как у вакансий. Класс js-card-motion
     ставит card-motion.js; без скрипта карточки просто видимы. */
  html.js-card-motion .stats .stat-card { opacity: 0; }

  html.js-card-motion .stats .stat-card.is-in {
    animation: statCardIn 620ms calc(var(--stat-order, 0) * 80ms) cubic-bezier(.2,.8,.2,1) both;
  }

  html:not(.js-card-motion) .stats .stat-card {
    animation: statCardIn 620ms calc(var(--stat-order, 0) * 80ms) cubic-bezier(.2,.8,.2,1) backwards;
  }

  .stats .stat-card:nth-child(1) { --stat-order: 0; }
  .stats .stat-card:nth-child(2) { --stat-order: 1; }
  .stats .stat-card:nth-child(3) { --stat-order: 2; }
  .stats .stat-card:nth-child(4) { --stat-order: 3; }

  /* Анимация появления ждёт карточку в кадре. Класс js-card-motion ставит
     card-motion.js: без скрипта карточки просто видимы, а не спрятаны. */
  html.js-card-motion #jobs .vacancy-card { opacity: 0; }

  html.js-card-motion #jobs .vacancy-card.is-in {
    animation:
      vacancyCardIn 520ms calc(var(--vacancy-order, 0) * 55ms) cubic-bezier(.2,.8,.2,1) both,
      vacancyBorderOrbit 3600ms linear infinite paused;
  }

  html:not(.js-card-motion) #jobs .vacancy-card {
    animation:
      vacancyCardIn 520ms calc(var(--vacancy-order, 0) * 55ms) cubic-bezier(.2,.8,.2,1) backwards,
      vacancyBorderOrbit 3600ms linear infinite paused;
  }

  .vacancy-response-note i {
    animation: consultantPulse 2200ms ease-out infinite;
  }
}

@media (hover: hover) and (pointer: fine) {
  #jobs .vacancy-card:hover {
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-7px) !important;
    box-shadow: 0 24px 52px color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
    animation-play-state: running, running;
  }

  #jobs .vacancy-card:hover::after {
    opacity: 1 !important;
  }
}

@keyframes statCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vacancyCardIn {
  from { opacity: 0; transform: perspective(900px) translateY(24px) scale(.975); }
  to { opacity: 1; transform: perspective(900px) translateY(0) scale(1); }
}

@keyframes vacancyBorderOrbit {
  to { --vacancy-angle: 360deg; }
}

@keyframes consultantPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 38%, transparent); }
  65%, 100% { box-shadow: 0 0 0 8px transparent; }
}

@media (max-width: 960px) {
  #jobs .vacancy-card {
    min-height: 390px;
  }

  .vacancy-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .process-section {
    padding-inline: 20px !important;
  }

  .process-cta {
    padding-top: 20px;
  }

  .footer-wrap {
    padding-inline: 6px !important;
  }

  .stats .stat-card {
    min-height: 144px;
  }

  #jobs .vacancy-card {
    min-height: auto;
    transform: none !important;
  }

  .vacancy-card-content {
    padding: 22px 20px 18px;
  }

  .vacancy-topline {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 18px;
  }

  #jobs .vacancy-card .vacancy-title {
    min-height: 0;
  }

  .vacancy-info-grid {
    grid-template-columns: 1fr;
  }

  #jobs .vacancy-card .vacancy-actions {
    padding: 16px 20px 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats .stat-card,
  #jobs .vacancy-card,
  .vacancy-response-note i {
    animation: none !important;
  }

  :is(.btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply, .nav-contact, .cta)::after {
    content: none !important;
  }
}

/* Final cascade for the open statistics layout. */
.stats .stat-card,
html[data-theme="light"] .stats .stat-card,
html[data-theme="dark"] .stats .stat-card {
  border: 0 !important;
  border-left: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.stats .stat-card:first-child {
  border-left: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  .stats .stat-card:hover {
    border-color: var(--color-border) !important;
    background: color-mix(in srgb, var(--color-secondary) 5%, transparent) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 760px) {
  .stats .stat-card:nth-child(3) {
    border-left: 0 !important;
  }

  .stats .stat-card:nth-child(n + 3) {
    border-top: 1px solid var(--color-border) !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  #home.hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 38px !important;
    min-height: auto;
    padding: 64px 34px 52px !important;
  }

  .hero-copy {
    max-width: 680px;
  }

  .hero-title {
    font-size: clamp(3rem, 8vw, 4.7rem) !important;
  }

  .hero-visual,
  .hero-visual img {
    min-height: 500px;
  }
}

#toTop,
html[data-theme="light"] #toTop,
html[data-theme="dark"] #toTop {
  display: grid !important;
  color: var(--color-primary-strong) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.92);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), visibility 180ms ease !important;
}

html[data-theme] #toTop.show,
#toTop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#toTop svg,
#toTop svg *,
#toTop use {
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
}

/* Phase 6: redesign of user-marked CTA, partners, social, contact and footer areas. */
:root {
  --cta-base: #082a3b;
  --cta-hover: #075985;
  --cta-ink: #ffffff;
  --cta-outline: #0b6d9d;
}

html[data-theme="dark"] {
  --cta-base: #dff5ff;
  --cta-hover: #7dd3fc;
  --cta-ink: #07131f;
  --cta-outline: #7dd3fc;
}

/* Buttons: restrained color-swipe instead of green glow and magnetic movement. */
:is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary) {
  --magnetic-x: 0px !important;
  --magnetic-y: 0px !important;
  border: 1px solid color-mix(in srgb, var(--cta-base) 72%, var(--color-border)) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(90deg, var(--cta-hover) 0 50%, var(--cta-base) 50% 100%) 100% 0 / 205% 100% no-repeat !important;
  color: var(--cta-ink) !important;
  box-shadow: none !important;
  transition: background-position 280ms cubic-bezier(.2,.8,.2,1), color 180ms ease, transform 160ms ease, border-color 180ms ease !important;
}

:is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary)::before,
:is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary)::after {
  content: none !important;
}

:is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary):hover {
  background-position: 0 0 !important;
  border-color: var(--cta-hover) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}

:is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary):active {
  transform: translateY(0) scale(.98) !important;
}

:is(.btn-outline, .btn-refresh) {
  --magnetic-x: 0px !important;
  --magnetic-y: 0px !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cta-outline) 30%, transparent) !important;
}

:is(.btn-outline, .btn-refresh)::before,
:is(.btn-outline, .btn-refresh)::after {
  content: none !important;
}

:is(.btn-outline, .btn-refresh):hover {
  background: color-mix(in srgb, var(--color-secondary) 9%, transparent) !important;
  box-shadow: inset 0 0 0 1px var(--cta-outline) !important;
  transform: translateY(-2px) !important;
}

#jobs .vacancy-reply,
html[data-theme="light"] #jobs .vacancy-reply,
html[data-theme="dark"] #jobs .vacancy-reply {
  --magnetic-x: 0px !important;
  --magnetic-y: 0px !important;
  min-width: 174px;
  min-height: 46px;
  padding: 0 16px 0 18px !important;
  border: 1px solid var(--cta-outline) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(90deg, var(--cta-base) 0 50%, transparent 50% 100%) 100% 0 / 205% 100% no-repeat !important;
  color: var(--color-primary-strong) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-position 260ms cubic-bezier(.2,.8,.2,1), color 180ms ease, border-color 180ms ease, transform 160ms ease !important;
}

#jobs .vacancy-reply::before,
#jobs .vacancy-reply::after {
  content: none !important;
}

#jobs .vacancy-reply svg {
  margin-left: auto;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1) !important;
}

@media (hover: hover) and (pointer: fine) {
  #jobs .vacancy-reply:hover {
    background-position: 0 0 !important;
    color: var(--cta-ink) !important;
    border-color: var(--cta-base) !important;
    transform: translateY(-2px) !important;
  }

  #jobs .vacancy-reply:hover svg {
    transform: translateX(4px) !important;
  }
}

#jobs .vacancy-reply:active {
  transform: translateY(0) scale(.98) !important;
}

/* Representatives: map as spatial canvas with editorial information rows. */
#partners .rep-network {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(430px, 1.18fr);
  margin: clamp(54px, 7vw, 88px) 0 clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.rep-network-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(34px, 5vw, 64px) clamp(24px, 4vw, 52px) clamp(34px, 5vw, 64px) 0;
}

.rep-network-copy h3 {
  max-width: 560px;
  margin: 12px 0 20px;
  color: var(--color-text) !important;
  font-family: "Unbounded", sans-serif !important;
  font-size: clamp(1.7rem, 3.2vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  text-align: left !important;
}

.rep-network-copy > p:not(.section-kicker) {
  max-width: 520px;
  margin: 0;
  color: var(--color-text-muted) !important;
  font-size: 1.05rem !important;
  line-height: 1.65;
  text-align: left !important;
}

.rep-network-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--cta-outline);
  color: var(--color-primary-strong) !important;
  font-weight: 750;
  text-decoration: none;
}

.rep-network-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  transition: transform 200ms ease;
}

.rep-network-link:hover svg {
  transform: translateX(5px);
}

.rep-network-map {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border-left: 1px solid var(--color-border);
  background:
    radial-gradient(circle at 52% 48%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 58%);
}

.rep-network-map > img {
  position: absolute;
  inset: 7% 2% 5% 8%;
  width: 88%;
  height: 88%;
  object-fit: contain;
  opacity: .82;
  filter: saturate(.82) contrast(.96);
}

html[data-theme="dark"] .rep-network-map > img {
  opacity: .64;
  filter: saturate(.75) brightness(.84) contrast(1.05);
}

.rep-city {
  position: absolute;
  z-index: 2;
  min-width: 170px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 2px 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(10px);
}

.rep-city--astana { top: 23%; left: 26%; }
.rep-city--shymkent { right: 7%; bottom: 20%; }

.rep-city > span {
  grid-row: 1 / span 2;
  color: var(--color-primary);
  font-family: "Unbounded", sans-serif;
  font-size: .65rem;
}

.rep-city strong {
  color: var(--color-text);
  font-family: "Unbounded", sans-serif;
  font-size: .92rem;
}

.rep-city small {
  color: var(--color-text-muted) !important;
  font-size: .76rem !important;
}

.rep-network-services {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.rep-network-services li {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 24px clamp(18px, 3vw, 34px);
  border-left: 1px solid var(--color-border);
}

.rep-network-services li:first-child {
  border-left: 0;
}

.rep-network-services li > span {
  grid-row: 1 / span 2;
  color: var(--color-primary);
  font-family: "Unbounded", sans-serif;
  font-size: .66rem;
}

.rep-network-services strong {
  color: var(--color-text);
  font-family: "Unbounded", sans-serif;
  font-size: .9rem;
}

.rep-network-services p {
  margin: 5px 0 0 !important;
  color: var(--color-text-muted) !important;
  font-size: .88rem !important;
  line-height: 1.5;
  text-align: left !important;
}

/* Partner gallery: full-bleed imagery, captions in the image, no white cards. */
#partners .partners-head {
  max-width: 900px;
  margin: 0 0 28px;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.35;
  text-align: left;
}

#partners .partners-ru {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

#partners .partners-ru > figure.card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 330px;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #07131f !important;
  box-shadow: none !important;
  transform: none !important;
}

#partners .partners-ru > figure:nth-child(1),
#partners .partners-ru > figure:nth-child(4) { grid-column: span 5; }
#partners .partners-ru > figure:nth-child(2),
#partners .partners-ru > figure:nth-child(6) { grid-column: span 3; }
#partners .partners-ru > figure:nth-child(3),
#partners .partners-ru > figure:nth-child(5) { grid-column: span 4; }

#partners .partners-ru > figure:nth-child(2),
#partners .partners-ru > figure:nth-child(5) { min-height: 390px; }

#partners .partners-ru > figure.card::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 44%, rgba(3,15,24,.88) 100%);
  pointer-events: none;
}

#partners .partners-ru > figure.card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0 !important;
  filter: saturate(.86) contrast(1.03);
  transform: scale(1.01);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), filter 260ms ease;
}

#partners .partners-ru > figure.card figcaption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  color: #fff !important;
}

#partners .partners-ru > figure.card figcaption span {
  color: rgba(255,255,255,.62) !important;
  font-family: "Unbounded", sans-serif;
  font-size: .62rem;
}

#partners .partners-ru > figure.card figcaption strong {
  color: #fff !important;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(.86rem, 1.3vw, 1.05rem);
  line-height: 1.35;
  text-align: right;
  -webkit-text-fill-color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
  #partners .partners-ru > figure.card:hover img {
    filter: saturate(1) contrast(1.05);
    transform: scale(1.055);
  }
}

/* Social responsibility: editorial copy + asymmetric image wall. */
#about .about-social,
html[data-theme="light"] #about .about-social,
html[data-theme="dark"] #about .about-social {
  display: grid !important;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: clamp(28px, 5vw, 68px);
  margin-top: clamp(58px, 8vw, 100px) !important;
  padding: clamp(38px, 6vw, 72px) 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.about-social-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

#about .about-social-title {
  max-width: 520px;
  margin: 12px 0 20px !important;
  color: var(--color-text) !important;
  font-family: "Unbounded", sans-serif !important;
  font-size: clamp(1.7rem, 3vw, 3rem) !important;
  line-height: 1.15;
  letter-spacing: -.04em;
  text-align: left !important;
}

#about .about-social-lead {
  max-width: 500px;
  margin: 0 !important;
  color: var(--color-text-muted) !important;
  font-size: 1.04rem !important;
  line-height: 1.68;
  text-align: left !important;
}

.about-social-note {
  width: 100%;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.about-social-note span {
  color: var(--color-primary);
  font-family: "Unbounded", sans-serif;
  font-size: .68rem;
  letter-spacing: .08em;
}

.about-social-note p {
  max-width: 380px;
  margin: 10px 0 0 !important;
  color: var(--color-text) !important;
  font-size: .92rem !important;
  text-align: left !important;
}

#about .about-social-grid {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: repeat(2, minmax(220px, 1fr));
  gap: 10px !important;
}

#about .about-social-grid .social-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #07131f !important;
  box-shadow: none !important;
  transform: none !important;
}

#about .about-social-grid .social-card--lead {
  grid-row: 1 / span 2;
}

#about .about-social-grid .social-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(3,15,24,.74));
  pointer-events: none;
}

#about .about-social-grid .social-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0 !important;
  filter: saturate(.82) contrast(1.03);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), filter 240ms ease;
}

#about .about-social-grid .social-card figcaption {
  position: absolute;
  right: 16px;
  bottom: 14px;
  left: 16px;
  z-index: 1;
  color: #fff !important;
  font-size: .84rem;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  #about .about-social-grid .social-card:hover img {
    filter: saturate(.96) contrast(1.05);
    transform: scale(1.045);
  }
}

/* Contact directory: map and information architecture replace three generic cards. */
#contact .contact-directory {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(400px, .85fr);
  margin-top: 34px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

#contact .contact-panel,
html[data-theme="light"] #contact .contact-panel,
html[data-theme="dark"] #contact .contact-panel {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.contact-map {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 690px;
  display: block;
  border: 0;
  border-radius: 0 !important;
  filter: saturate(.78) contrast(1.02);
}

.contact-map-label {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 11px 14px;
  background: rgba(5,24,36,.94);
  color: #fff !important;
  font-family: "Onest", sans-serif;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .04em;
  line-height: 1.35;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
  -webkit-text-fill-color: #fff !important;
  backdrop-filter: blur(8px);
}

.contact-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-address,
.contact-schedule,
.contact-actions,
.contact-phones {
  min-width: 0;
  padding: clamp(24px, 3vw, 38px);
}

.contact-schedule,
.contact-phones {
  border-left: 1px solid var(--color-border);
}

.contact-actions,
.contact-phones {
  border-top: 1px solid var(--color-border);
}

.contact-index {
  display: block;
  margin-bottom: 18px;
  color: var(--color-primary);
  font-family: "Unbounded", sans-serif;
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-address h3 {
  margin: 0 0 16px;
  color: var(--color-text);
  font-family: "Unbounded", sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 1.72rem);
  line-height: 1.18;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.contact-address address {
  color: var(--color-text-muted);
  font-style: normal;
  line-height: 1.7;
}

.schedule-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: .92rem;
}

.contact-schedule > p {
  margin: 13px 0 0 !important;
  color: var(--color-text-muted) !important;
  font-size: .82rem !important;
  text-align: left !important;
}

.contact-actions {
  display: flex;
  flex-direction: column;
}

.contact-link {
  min-height: 52px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary-strong) !important;
  font-weight: 750;
  text-decoration: none;
  transition: color 180ms ease, padding 220ms ease, background-color 180ms ease;
}

.contact-link svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
}

.contact-link:hover {
  padding-inline: 10px;
  background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
}

.contact-link--primary {
  color: var(--color-text) !important;
}

.contact-phones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-phones a {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--color-text) !important;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(.78rem, 1vw, .94rem);
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}

.contact-phones a:hover {
  color: var(--color-primary-strong) !important;
}

/* New custom vector social controls. */
.footer-brand-block .socials {
  gap: 0 !important;
}

.footer-brand-block .soc,
html[data-theme="light"] .footer-brand-block .soc,
html[data-theme="dark"] .footer-brand-block .soc {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border) !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--color-primary-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

.footer-brand-block .soc:last-child {
  border-right: 1px solid var(--color-border) !important;
}

.footer-brand-block .soc svg {
  width: 22px;
  height: 22px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

.footer-brand-block .soc.vk svg {
  fill: currentColor !important;
  stroke: none !important;
}

.footer-brand-block .soc:hover {
  background: var(--cta-base) !important;
  color: var(--cta-ink) !important;
  border-color: var(--cta-base) !important;
}

.footer-brand-block .soc:hover svg {
  transform: scale(1.08) rotate(-4deg);
}

footer .footer-brand-block .socials .soc,
html[data-theme="light"] footer .footer-brand-block .socials .soc,
html[data-theme="dark"] footer .footer-brand-block .socials .soc {
  width: 50px !important;
  height: 50px !important;
  border-top: 1px solid var(--color-primary-strong) !important;
  border-bottom: 1px solid var(--color-primary-strong) !important;
  border-left: 1px solid var(--color-primary-strong) !important;
  border-right: 0 !important;
  background: color-mix(in srgb, var(--color-surface) 76%, transparent) !important;
  color: var(--color-primary-strong) !important;
}

footer .footer-brand-block .socials .soc:last-child {
  border-right: 1px solid var(--color-primary-strong) !important;
}

footer .footer-brand-block .socials .soc svg {
  width: 25px !important;
  height: 25px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

footer .footer-brand-block .socials .soc use {
  fill: none !important;
  stroke: currentColor !important;
}

footer .footer-brand-block .socials .soc.vk svg,
footer .footer-brand-block .socials .soc.vk use {
  fill: currentColor !important;
  stroke: none !important;
}

footer .footer-brand-block .socials .soc:hover {
  background: var(--cta-base) !important;
  color: var(--cta-ink) !important;
}

@media (max-width: 960px) {
  #partners .rep-network {
    grid-template-columns: 1fr;
  }

  .rep-network-copy {
    padding-right: 0;
  }

  .rep-network-map {
    min-height: 450px;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  #partners .partners-ru > figure.card {
    grid-column: span 6 !important;
    min-height: 340px !important;
  }

  #about .about-social {
    grid-template-columns: 1fr;
  }

  #contact .contact-directory {
    grid-template-columns: 1fr;
  }

  .contact-map {
    min-height: 480px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .contact-map iframe {
    min-height: 480px;
  }
}

@media (max-width: 640px) {
  #jobs .vacancy-reply {
    width: 100%;
  }

  .rep-network-map {
    min-height: 380px;
  }

  .rep-network-map > img {
    inset: 8% 0 8% 0;
    width: 100%;
  }

  .rep-city {
    min-width: 145px;
    padding: 10px;
  }

  .rep-city--astana { top: 18%; left: 4%; }
  .rep-city--shymkent { right: 3%; bottom: 14%; }

  .rep-network-services {
    grid-template-columns: 1fr;
  }

  .rep-network-services li,
  .rep-network-services li:first-child {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .rep-network-services li:first-child {
    border-top: 0;
  }

  #partners .partners-ru {
    grid-template-columns: 1fr !important;
  }

  #partners .partners-ru > figure.card {
    grid-column: auto !important;
    min-height: 330px !important;
  }

  #about .about-social-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(280px, auto));
  }

  #about .about-social-grid .social-card--lead {
    grid-row: auto;
  }

  .contact-panel {
    grid-template-columns: 1fr;
  }

  .contact-address,
  .contact-schedule,
  .contact-actions,
  .contact-phones {
    padding: 26px 4px;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .contact-address {
    border-top: 0;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 390px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary),
  #jobs .vacancy-reply {
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
  }

  #partners .partners-ru > figure.card img,
  #about .about-social-grid .social-card img,
  .footer-brand-block .soc svg {
    transform: none !important;
  }
}

/* ==========================================================================
   Отделка v23 — доводка мест, где старая сине-фиолетовая тема
   просвечивала сквозь новую сине-зелёную систему.
   ========================================================================== */

/* 1. Иконки спрайта. theme-light.css заливает их поголовно:
      html[data-theme="light"] svg * { fill: currentColor !important }.
      Дальше заливку снимали поштучно по списку контейнеров, и всё, что в
      список не попало (карточки вакансий, контакты, этапы), в светлой теме
      оставалось чёрной кляксой. fill и stroke наследуются в теневое дерево
      <use>, поэтому одного правила хватает на весь спрайт. */
html[data-theme] svg > use {
  fill: none !important;
  stroke: currentColor !important;
}

svg:has(> use) {
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 2. Герой. style.css гасит отступы правилом .hero p { margin:0 !important },
      оно специфичнее .hero-subtitle — подзаголовок прилипал к заголовку. */
#home.hero .hero-eyebrow { margin: 0 0 22px !important; }
#home.hero .hero-subtitle { margin: 26px 0 0 !important; }
#home.hero .hero-title { margin: 0 !important; }

/* Левая вуаль на фото обрывалась резкой границей на 32% — виден был шов. */
.hero-visual::after {
  background:
    linear-gradient(180deg, transparent 44%, rgba(3, 18, 29, .78) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 16%, transparent), transparent 62%) !important;
}

/* 2b. Заголовки секций жили в двух системах сразу: часть — 28px Unbounded
      внутри .section-heading, часть — 3.45rem Manrope по .section > h2 и
      .section-title. На одной странице это читалось как разные шаблоны.
      Приводим все к одной типографике. */
.section-heading h2,
.section-heading .section-title,
.testimonials .section-heading h2,
#jobs .jobs-heading .section-title,
#facts .section-heading h2,
#partners .section-heading h2 {
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif !important;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.14 !important;
}

/* Заголовок «О компании» центрировался внутри левой колонки, а кикер над
   ним стоял слева — текст выглядел рваным с обеих сторон. */
#about .about-intro .section-heading,
#about .about-intro .section-heading h2 {
  text-align: left !important;
}

/* 3. Карточки фактов, мероприятий и соцпроектов держали градиент
      rgba(37,99,235) → rgba(147,51,234) из старой темы: в светлой теме он
      давал сиреневый фон, выпадающий из палитры. */
html[data-theme] .fact-card,
html[data-theme] .fact-card.award,
html[data-theme] .event-card {
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-sm) !important;
}

html[data-theme] .fact-ico,
html[data-theme] .fact-card.award .fact-ico {
  color: var(--color-primary) !important;
  filter: none !important;
}

html[data-theme] .fact-title,
html[data-theme] .event-title { color: var(--color-text) !important; }
html[data-theme] .fact-sub { color: var(--color-text-muted) !important; }

/* Оранжевый бейдж — единственное тёплое пятно на всём сайте. */
html[data-theme] .fact-badge {
  border: 1px solid color-mix(in srgb, var(--color-accent) 38%, transparent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
  color: var(--color-accent) !important;
  font-weight: 700;
  box-shadow: none !important;
}

html[data-theme] .social-card { background: var(--color-surface-soft) !important; }

/* Две карточки во всю ширину смотрелись пустыми. */
#facts .facts-grid {
  max-width: 860px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 4. «Социальная ответственность» на мобильном. Базовое правило записано
      трижды с префиксом html[data-theme=...], поэтому оно перебивало
      мобильный оверрайд: вторая колонка схлопывалась до 50px и фотографии
      уезжали за экран. */
@media (max-width: 960px) {
  html[data-theme] #about .about-social,
  html[data-theme="light"] #about .about-social,
  html[data-theme="dark"] #about .about-social {
    grid-template-columns: 1fr !important;
  }
}

/* Два подзаголовка одного уровня в блоке «О нас» различались вдвое. */
#about .about-events-title,
#about .about-social-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  color: var(--color-text) !important;
}

/* 5. Контакты. Панель была настолько узкой, что «Лисаковск» рвался
      посреди слова, а адрес — на три строки. */
@media (min-width: 961px) {
  #contact .contact-directory {
    grid-template-columns: minmax(0, 1fr) minmax(470px, .95fr);
  }

  .contact-map,
  .contact-map iframe { min-height: 560px; }
}

.contact-address h3 {
  overflow-wrap: break-word;
  hyphens: none;
}

.contact-address address { max-width: 30ch; }

/* Виджет Яндекса грузится лениво и может не подняться вовсе — под ним
      лежит статичная карта, а не пустой прямоугольник. */
.contact-map-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.02);
}

.contact-map iframe { position: relative; z-index: 1; background: transparent; }
.contact-map-label { z-index: 2; }

/* 6. Активная страница в пагинации ничем не отличалась от остальных. */
.pagination-btn.active,
.pagination-btn.active:hover {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: #fff !important;
}

html[data-theme="dark"] .pagination-btn.active,
html[data-theme="dark"] .pagination-btn.active:hover { color: #06202e !important; }

/* 7. Подпись бренда в подвале была по центру внутри левой колонки. */
footer .footer-brand-block p { text-align: left !important; }

@media (max-width: 640px) {
  #home.hero .hero-eyebrow { margin: 0 0 16px !important; }
  #home.hero .hero-subtitle { margin: 20px 0 0 !important; }
  .contact-map,
  .contact-map iframe { min-height: 380px; }
}

/* 8. Подзаголовки блоков были крупнее заголовков секций: h3 «Представители…»
      шёл 46px против 34px у h2. Один размер на все подзаголовки. */
#partners .rep-network-copy h3,
#partners .partners-head,
#about .about-events-title,
#about .about-social-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  line-height: 1.18;
  color: var(--color-text) !important;
}

/* Шесть флагов «дальнего зарубежья» не помещались в колонку и
   переносились по схеме 5 + 1. */
#partners .geo .flag-row { gap: 6px; }

#partners .geo .flag-icon {
  width: 40px;
  height: 27px;
}

/* Подпись под картой на узком экране переносилась на две строки. */
@media (max-width: 640px) {
  .contact-map-coords { display: none; }
}

/* 9. Адрес не помещался в колонку и ломался на «ТОЦ OLE, 2 / микрорайон, 29 дом».
      Отдаём адресу чуть больше места за счёт внутренних отступов. */
@media (min-width: 961px) {
  .contact-panel { grid-template-columns: 1.08fr .92fr; }

  .contact-address,
  .contact-schedule,
  .contact-actions,
  .contact-phones { padding: clamp(22px, 2.4vw, 30px); }
}

/* Светлая карта пятном светилась на тёмной странице. */
html[data-theme="dark"] .contact-map-fallback {
  filter: saturate(.62) brightness(.74) contrast(1.04);
}

.contact-address address {
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ==========================================================================
   Отделка v24 — состояния наведения, размеры управляющих элементов,
   мобильное меню, соцкнопки в подвале, край фото в герое.
   ========================================================================== */

/* Чернила для заливок: в тёмной теме акцент и primary светлые,
   белый текст на них нечитаем. */
:root {
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --ctl-h-lg: 52px;
  --ctl-h: 48px;
  --ctl-h-sm: 44px;
}

html[data-theme="dark"] {
  --on-primary: #06202e;
  --on-accent: #06202e;
}

/* ---- 1. Наведение --------------------------------------------------------
   theme-light.css задаёт .btn-outline:hover { background:#111827; color:#fff }
   в расчёте на тёмную заливку, а modern.css перекрывает фон светлым оттенком.
   Оставался белый текст на почти белом фоне. Ниже — один свод состояний. */

html:root[data-theme] :is(.btn-outline, .btn-refresh):hover,
html:root[data-theme] :is(.btn-outline, .btn-refresh):focus-visible {
  border-color: var(--color-primary) !important;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) !important;
  box-shadow: inset 0 0 0 1px var(--color-primary) !important;
  color: var(--color-primary-strong) !important;
}

html:root[data-theme] :is(.btn-outline, .btn-refresh):hover *,
html:root[data-theme] :is(.btn-outline, .btn-refresh):focus-visible * {
  color: inherit !important;
}

/* Белёсая подсветка под курсором и бегущий блик задумывались для тёмных
   заливных кнопок — на светлых они размывали надпись. */
:is(.btn-outline, .btn-refresh, .vacancy-reply, .pagination-btn, .contact-link, .soc, #toTop, .theme-toggle, .menu-toggle)::before,
:is(.btn-outline, .btn-refresh, .vacancy-reply, .pagination-btn, .contact-link, .soc, #toTop, .theme-toggle, .menu-toggle)::after {
  content: none !important;
}

html:root[data-theme] .vacancy-reply:hover,
html:root[data-theme] .vacancy-reply:focus-visible {
  border-color: var(--color-primary) !important;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) !important;
  color: var(--color-primary-strong) !important;
}

html:root[data-theme] .pagination-btn:not(.active):hover {
  border-color: var(--color-primary) !important;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) !important;
  color: var(--color-primary-strong) !important;
}

html:root[data-theme] .contact-link:hover,
html:root[data-theme] .contact-link:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
  color: var(--color-primary-strong) !important;
}

html:root[data-theme] .contact-link:hover * { color: inherit !important; }

html:root[data-theme] :is(.contact-phones a, .footer-column a, .footer-bottom a, .rep-network a):hover {
  color: var(--color-primary-strong) !important;
}

/* Акцентные заливки: в тёмной теме акцент светло-зелёный,
   белая надпись на нём давала контраст 1.6:1. */
html:root[data-theme] .header #siteNav .nav-contact,
html:root[data-theme] .header #siteNav .nav-contact:hover,
html:root[data-theme] .header #siteNav .nav-contact.active {
  color: var(--on-accent) !important;
}

html:root[data-theme] #toTop:hover {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: var(--on-primary) !important;
}

/* Ссылки меню в шапке: вместо серой «таблетки» — оттенок палитры. */
html:root[data-theme] .header #siteNav a:not(.nav-contact):hover,
html:root[data-theme] .header #siteNav a:not(.nav-contact):focus-visible {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
  color: var(--color-primary-strong) !important;
}

/* Видимый фокус с клавиатуры — его не было ни у одной кнопки. */
html:root[data-theme] :is(a, button, input, select, textarea, .soc):focus-visible {
  outline: 2px solid var(--color-ring) !important;
  outline-offset: 2px !important;
}

/* ---- 2. Размеры ----------------------------------------------------------
   Кнопки шли по шести разным высотам: 42 / 44 / 46 / 48 / 50 / 52.
   Три ступени: крупная (герой, контакты), базовая, компактная. */

.hero-btns a,
.contact-link {
  min-height: var(--ctl-h-lg) !important;
  font-size: 1rem !important;
}

.btn-download,
.btn-refresh,
.vacancy-reply,
.process-cta .btn-primary,
.pagination-btn,
.filter-input,
.filter-select,
.filter-control input {
  min-height: var(--ctl-h) !important;
  font-size: 0.95rem !important;
}

.header #siteNav .nav-contact,
.theme-toggle,
.menu-toggle,
.footer-brand-block .soc {
  min-height: var(--ctl-h-sm) !important;
  font-size: 0.9rem !important;
}

#toTop {
  width: var(--ctl-h) !important;
  height: var(--ctl-h) !important;
  position: fixed !important;
  z-index: 2147483000 !important;
  isolation: isolate;
}

/* Поля ввода на мобильном оставляем 16px, иначе iOS зумит страницу. */
@media (max-width: 640px) {
  .filter-input,
  .filter-select,
  .filter-control input { font-size: 16px !important; }
}

/* ---- 3. Мобильное меню ---------------------------------------------------
   Пункты шли без разделителей, «Контакты» — с другим отступом, а при
   касании превращались в светло-зелёную полосу с белым текстом. */
@media (max-width: 960px) {
  .header #siteNav,
  html.menu-force-collapsed .header #siteNav {
    gap: 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  .header #siteNav a {
    min-height: 52px !important;
    padding: 0 14px !important;
    border-radius: 10px;
    font-size: 0.98rem !important;
    font-weight: 600;
  }

  .header #siteNav a + a:not(.nav-contact) {
    border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  }

  html:root[data-theme] .header #siteNav .nav-contact,
  html:root[data-theme] .header #siteNav .nav-contact:hover,
  html:root[data-theme] .header #siteNav .nav-contact.active {
    min-height: 52px !important;
    margin-top: 8px;
    padding: 0 14px !important;
    justify-content: center !important;
    border: 1px solid var(--color-accent) !important;
    border-radius: 10px !important;
    background: var(--color-accent) !important;
    color: var(--on-accent) !important;
    box-shadow: none !important;
  }
}

/* ---- 4. Соцкнопки в подвале ---------------------------------------------
   Кнопки были склеены в «таблицу» на общих границах: правый край последней
   срезался, а у средних своей рамки не было. */
footer .footer-brand-block .socials {
  gap: 8px !important;
  overflow: visible;
}

footer .footer-brand-block .socials .soc,
html[data-theme="light"] footer .footer-brand-block .socials .soc,
html[data-theme="dark"] footer .footer-brand-block .socials .soc {
  width: var(--ctl-h-sm) !important;
  height: var(--ctl-h-sm) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: var(--color-surface) !important;
  color: var(--color-primary-strong) !important;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

footer .footer-brand-block .socials .soc svg {
  width: 21px !important;
  height: 21px !important;
}

html:root[data-theme] footer .footer-brand-block .socials .soc:hover,
html:root[data-theme] footer .footer-brand-block .socials .soc:focus-visible {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: var(--on-primary) !important;
}

/* ---- 5. Фото в герое ----------------------------------------------------
   Снимок обрывался жёсткой вертикалью по левому краю. */
@media (min-width: 761px) {
  .hero-visual {
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0,
      rgba(0,0,0,.12) 6%,
      rgba(0,0,0,.38) 13%,
      rgba(0,0,0,.68) 21%,
      rgba(0,0,0,.88) 29%,
      rgba(0,0,0,.97) 36%,
      #000 44%,
      #000 84%,
      rgba(0,0,0,.88) 90%,
      rgba(0,0,0,.5) 95%,
      rgba(0,0,0,.18) 98%,
      transparent 100%),
      linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 5%, #000 14%);
    mask-image: linear-gradient(90deg,
      transparent 0,
      rgba(0,0,0,.12) 6%,
      rgba(0,0,0,.38) 13%,
      rgba(0,0,0,.68) 21%,
      rgba(0,0,0,.88) 29%,
      rgba(0,0,0,.97) 36%,
      #000 44%,
      #000 84%,
      rgba(0,0,0,.88) 90%,
      rgba(0,0,0,.5) 95%,
      rgba(0,0,0,.18) 98%,
      transparent 100%),
      linear-gradient(180deg, transparent 0, rgba(0,0,0,.55) 5%, #000 14%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .hero-visual::after {
    background: linear-gradient(180deg, transparent 46%, rgba(3, 18, 29, .74) 100%) !important;
  }
}

/* ---- 6. Карта в контактах -----------------------------------------------
   Подпись была чёрной полосой во всю ширину — тяжёлое пятно поверх снимка,
   к тому же она перехватывала клики по виджету. */
.contact-map::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 118px;
  background: linear-gradient(180deg, transparent, rgba(4, 20, 31, .62));
  pointer-events: none;
}

.contact-map-label {
  right: auto !important;
  bottom: 16px !important;
  left: 16px !important;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 9px 13px !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(5, 24, 36, .82) !important;
  font-size: .74rem !important;
  text-shadow: none !important;
  pointer-events: none;
}

.contact-map-label::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

/* Ссылка на полноценные карты — в карточке адреса, а не поверх виджета,
   чтобы не перекрывать его своими элементами. */
.contact-map-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 9px 13px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-primary-strong) !important;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.contact-map-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.contact-map-link svg:last-child {
  margin-left: auto;
  opacity: .7;
}

html:root[data-theme] .contact-map-link:hover {
  border-color: var(--color-primary) !important;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

/* ---- 7. Мелочи -----------------------------------------------------------
   Две соседние ссылки в «03 / Связаться» были разного цвета: WhatsApp тёмный,
   Email синий. Приводим к одному состоянию покоя. */
html:root[data-theme] .contact-link,
html:root[data-theme] .contact-link--primary {
  color: var(--color-text) !important;
}

html:root[data-theme] .contact-link svg {
  color: var(--color-primary-strong);
}

html:root[data-theme] .contact-link:hover svg,
html:root[data-theme] .contact-link:focus-visible svg {
  color: inherit;
}

/* ==========================================================================
   Отделка v27 — три блока, выпадавших из редакционной вёрстки страницы:
   география, отзывы, мероприятия.
   ========================================================================== */

/* ---- 1. География --------------------------------------------------------
   Номер шёл серой «кнопкой» мимо палитры, флаги — глянцевыми наклейками
   с тенью, шесть штук в третьей колонке нельзя было опознать без подписей,
   а min-height оставлял под ними пустую полосу в полтора экрана. */

#partners .geo {
  align-items: start;
  gap: clamp(18px, 2.6vw, 34px);
}

#partners .geo-item,
html[data-theme="light"] #partners .geo-item,
html[data-theme="dark"] #partners .geo-item {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 20px 0 4px !important;
}

#partners .geo-index {
  display: block;
  margin-bottom: 14px;
  color: var(--color-primary);
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
}

#partners .geo-title {
  margin: 0 0 14px !important;
  color: var(--color-text) !important;
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-size: 1.02rem !important;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

#partners .geo-countries {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#partners .geo-countries li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px 6px 7px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-surface-soft) 60%, transparent);
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Флаг — плоский прямоугольник, а не наклейка с бликом. */
#partners .geo .flag-icon,
html[data-theme="light"] #partners .geo .flag-icon,
html[data-theme="dark"] #partners .geo .flag-icon {
  width: 22px !important;
  height: 15px !important;
  flex: 0 0 22px;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent) !important;
  border-radius: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: cover;
}

/* ---- 2. Отзывы -----------------------------------------------------------
   Секция была единственной «плитой» со скруглением 28px и тенью посреди
   плоской страницы, а цитаты стояли по центру — рваный текст с обеих сторон. */

.testimonials,
html[data-theme="light"] .testimonials,
html[data-theme="dark"] .testimonials {
  width: min(calc(100% - 40px), var(--content-width)) !important;
  margin: clamp(48px, 7vw, 88px) auto !important;
  padding: clamp(46px, 6vw, 74px) 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.testimonial-grid {
  gap: clamp(18px, 2.6vw, 38px) !important;
  align-items: stretch;
}

.testimonial-card,
html[data-theme="light"] .testimonial-card,
html[data-theme="dark"] .testimonial-card {
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 22px 0 0 !important;
  text-align: left !important;
}

.testimonial-index {
  display: block;
  margin-bottom: 16px;
  color: var(--color-primary);
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.testimonials .testimonial-card blockquote {
  flex: 1;
  margin: 0 0 22px !important;
  font-size: 1.02rem !important;
  line-height: 1.65;
  text-align: left !important;
}

.testimonial-card figcaption {
  align-items: flex-start;
  text-align: left !important;
}

.testimonial-card figcaption strong {
  font-weight: 700;
}

/* ---- 3. Мероприятия ------------------------------------------------------
   Снимки шли с разными пропорциями (форум ООН — с белыми полями),
   подписи по центру рвались на три строки, карточки выходили разной высоты. */

#about .about-events-grid {
  gap: clamp(18px, 2.4vw, 30px) !important;
  align-items: stretch;
}

html[data-theme] #about .event-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

html[data-theme] #about .event-card img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 10;
  display: block;
  border-radius: 0 !important;
  object-fit: cover;
  object-position: center 38%;
}

#about .event-card figcaption {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px !important;
  text-align: left !important;
}

#about .event-index {
  color: var(--color-primary);
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
}

html[data-theme] #about .event-title {
  margin: 0 !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1rem !important;
  font-weight: 800;
  line-height: 1.35;
  text-align: left !important;
}

#about .event-place {
  margin-top: auto;
  padding-top: 10px;
  color: var(--color-text-muted);
  font-size: 0.84rem;
}

@media (max-width: 640px) {
  #partners .geo-item,
  html[data-theme="light"] #partners .geo-item,
  html[data-theme="dark"] #partners .geo-item {
    padding: 18px 0 2px !important;
  }

  .testimonial-card,
  html[data-theme="light"] .testimonial-card,
  html[data-theme="dark"] .testimonial-card {
    padding: 20px 0 0 !important;
  }
}

/* ---- 4. Результаты по странам -------------------------------------------
   Секция была второй «плитой» со скруглением 28px посреди плоской страницы,
   диаграмма — узкой колонкой в её центре. Страны шли в случайном порядке,
   без доли и без итога, так что числа не с чем было сопоставить. */

#employment,
html[data-theme="light"] #employment,
html[data-theme="dark"] #employment {
  width: min(calc(100% - 40px), var(--content-width)) !important;
  margin: clamp(48px, 7vw, 88px) auto !important;
  padding: clamp(46px, 6vw, 74px) 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#employment .bars {
  max-width: 860px;
  margin: 0 auto;
}

#employment .bar {
  grid-template-columns: minmax(96px, 132px) minmax(0, 1fr) 52px 46px !important;
  align-items: center;
  gap: 16px !important;
  margin: 0 !important;
  padding: 13px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

#employment .bar:first-child { border-top: 1px solid var(--color-border); }

#employment .bar-label {
  color: var(--color-text) !important;
  font-size: 0.94rem;
  font-weight: 700;
}

#employment .bar-bg {
  height: 10px !important;
  border-radius: 3px !important;
  background: color-mix(in srgb, var(--color-text) 8%, transparent) !important;
}

#employment .bar-fill {
  border-radius: 3px !important;
  background: var(--color-primary) !important;
}

#employment .bar .value {
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#employment .bar-share {
  color: var(--color-text-muted) !important;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#employment .bars-total {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 22px 0 0 !important;
  padding-top: 18px;
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  text-align: left !important;
}

#employment .bars-total strong {
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  #employment .bar {
    grid-template-columns: minmax(0, 1fr) 48px 42px !important;
    grid-template-areas: "label value share" "track track track";
    gap: 8px 12px !important;
    padding: 12px 0;
  }

  #employment .bar-label { grid-area: label; }
  #employment .bar .value { grid-area: value; }
  #employment .bar-share { grid-area: share; }
  #employment .bar-bg { grid-area: track; }
}

/* ---- 5. Основные факты ---------------------------------------------------
   Третья «плита» на странице: две карточки со скруглением и тенью, при этом
   устроенные по-разному — у первой была пара «подпись + значение», у второй
   значение отсутствовало, а год висел зелёной таблеткой (единственной на
   сайте). Иконки рисовались вручную мимо спрайта: «ракета» читалась молотком.
   Приводим к общему редакционному строю: индекс, иконка, подпись, значение. */

#facts,
html[data-theme="light"] #facts,
html[data-theme="dark"] #facts {
  width: min(calc(100% - 40px), var(--content-width)) !important;
  margin: clamp(48px, 7vw, 88px) auto !important;
  padding: clamp(46px, 6vw, 74px) 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#facts .facts-grid {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 3vw, 44px);
}

html[data-theme] #facts .fact-card {
  min-width: 0;
  padding: 22px 0 4px !important;
  border: 0 !important;
  border-top: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#facts .fact-index {
  display: block;
  margin-bottom: 20px;
  color: var(--color-primary);
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
}

html[data-theme] #facts .fact-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin: 0 0 22px !important;
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface));
  color: var(--color-primary-strong) !important;
  filter: none !important;
}

#facts .fact-ico svg {
  width: 22px;
  height: 22px;
}

html[data-theme] #facts .fact-title {
  margin: 0 0 8px !important;
  color: var(--color-text-muted) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#facts .fact-value {
  margin: 0 0 10px !important;
  color: var(--color-text) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem) !important;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

html[data-theme] #facts .fact-sub {
  margin: 0 !important;
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.55;
}

@media (max-width: 640px) {
  #facts .facts-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  html[data-theme] #facts .fact-card {
    padding: 20px 0 6px !important;
  }
}

/* ==========================================================================
   Отделка v30 — приёмы, снятые с unseen.co (проект Lewa House).
   Взято только то, что не мешает соискателю: движение остаётся на уровне
   3/10 по дизайн-системе, ничего не сдвигает вёрстку и гаснет при
   prefers-reduced-motion. Кастомный курсор, звук и заставку не берём.
   ========================================================================== */

:root {
  /* Их «фирменная» кривая: резкий старт, длинный выкат. Половина ощущения
     дорогого интерфейса держится на ней одной. */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 1. Перекатывание надписи --------------------------------------------
   У них подпись кнопки продублирована: оригинал уезжает вверх, копия
   приезжает снизу. Тот же приём без клонирования узлов — через ::after. */

.btn-label {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.btn-label > span {
  display: block;
  transition: transform 520ms var(--ease-out-expo);
}

.btn-label::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  transform: translateY(115%);
  transition: transform 520ms var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  :is(.btn-primary, .btn-outline, .btn-download, .nav-contact, .vacancy-reply):hover .btn-label > span {
    transform: translateY(-115%);
  }

  :is(.btn-primary, .btn-outline, .btn-download, .nav-contact, .vacancy-reply):hover .btn-label::after {
    transform: translateY(0);
  }
}

/* ---- 2. Заливка снизу вверх ---------------------------------------------
   У них фон кнопки наезжает SVG-клипом. То же самое псевдоэлементом:
   слой с --cta-hover разворачивается от нижней кромки. */

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] :is(.btn-primary, .btn-download, .nav-contact)::before {
    content: "" !important;
    z-index: -1;
    background: var(--cta-hover) !important;
    opacity: 1 !important;
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform 460ms var(--ease-out-expo) !important;
  }

  html:root[data-theme] :is(.btn-primary, .btn-download, .nav-contact):hover::before {
    transform: scaleY(1);
  }

  /* В шапке «Контакты» залиты акцентом — наезжает более тёмный акцент. */
  html:root[data-theme] .header #siteNav .nav-contact::before {
    background: var(--color-accent-hover) !important;
  }
}

/* ---- 3. Стрелка, въезжающая слева ---------------------------------------
   Приём .arrow-link: подпись сдвигается вправо, а стрелка выезжает
   из-под неё, а не просто дёргается на несколько пикселей. */

.contact-map-link,
.rep-network a,
.footer-bottom a {
  transition: color 220ms var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  :is(.btn-primary, .btn-outline, .btn-download, .vacancy-reply, .contact-map-link, .rep-network a) svg {
    transition: transform 560ms var(--ease-out-expo) !important;
  }

  :is(.btn-primary, .btn-download, .vacancy-reply, .contact-map-link, .rep-network a):hover svg:last-child {
    transform: translateX(7px) !important;
  }

  .btn-download:hover svg:first-child {
    transform: translateY(3px) !important;
  }
}

/* ---- 4. Пункт меню в капсуле ---------------------------------------------
   Вместо плоской заливки — обводка-капсула, которая раскрывается
   от центра. Акцент экономится: цвет не заливает, а очерчивает. */

@media (min-width: 961px) {
  .header #siteNav a:not(.nav-contact) {
    position: relative;
    border-radius: 999px;
    transition: color 260ms var(--ease-out-expo);
  }

  .header #siteNav a:not(.nav-contact)::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
    border-radius: 999px;
    opacity: 0;
    transform: scale(.82);
    transition: transform 420ms var(--ease-out-expo), opacity 260ms ease;
    pointer-events: none;
  }

  html:root[data-theme] .header #siteNav a:not(.nav-contact):hover,
  html:root[data-theme] .header #siteNav a:not(.nav-contact):focus-visible {
    background: transparent !important;
    color: var(--color-primary-strong) !important;
  }

  .header #siteNav a:not(.nav-contact):hover::after,
  .header #siteNav a:not(.nav-contact):focus-visible::after {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- 5. Общая кривая на карточках и раскрытиях --------------------------- */

.vacancy-card,
.event-card,
.social-card,
.service-card,
.geo-item,
.reveal {
  transition-timing-function: var(--ease-out-expo) !important;
}

/* Движение целиком выключается по системной настройке. */
@media (prefers-reduced-motion: reduce) {
  .btn-label > span,
  .btn-label::after,
  :is(.btn-primary, .btn-download, .nav-contact)::before,
  .header #siteNav a:not(.nav-contact)::after {
    transition: none !important;
  }

  .btn-label::after { display: none; }
}

/* ---- Цвет надписи внутри кнопки ------------------------------------------
   Перекат подписи обернул текст в <span>, и по нему тут же ударили два
   правила, писанные под обычный текст:
     theme-light.css  html[data-theme="light"] :where(..., span, ...) { color:#0b1220 !important }
     modern.css       .process-cta span { color: var(--color-text-muted) }
   Кнопки с тёмной заливкой получили тёмную надпись. Подпись всегда берёт
   цвет самой кнопки. */
html:root[data-theme] .btn-label,
html:root[data-theme] .btn-label > span,
html:root[data-theme] .btn-label::after {
  color: inherit !important;
}

/* ========================================================================== 
   Отделка v45 — широкоформатный герой, выразительный заголовок и единая
   контрастность кнопок. Правила стоят последними и сводят старые слои CSS.
   ========================================================================== */

/* Фото имеет запас сцены справа: cover всегда заполняет область без пустот,
   а позиция кадра удерживает всю рабочую группу внутри безопасной зоны. */
.hero-visual img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 66% center !important;
}

/* Редакционный заголовок: две смысловые строки проявляются последовательно,
   затем акцентная линия подчёркивает ключевое обещание. */
#home.hero .hero-title {
  max-width: 700px !important;
  font-size: clamp(2.65rem, 4.65vw, 4.55rem) !important;
  line-height: 1.025 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

.hero-title-main,
.hero-title-accent {
  display: block;
  width: fit-content;
  max-width: 100%;
  opacity: 0;
  transform: translateY(.34em);
  clip-path: inset(0 0 100% 0);
  animation: hero-title-enter 820ms var(--ease-out-expo) forwards;
}

.hero-title-accent {
  position: relative;
  margin-top: .08em;
  padding-bottom: .11em;
  color: var(--color-primary-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  animation-delay: 110ms;
}

.hero-title-accent::after {
  content: "";
  position: absolute;
  right: .02em;
  bottom: 0;
  left: .02em;
  height: .075em;
  min-height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left center;
  animation: hero-title-rule 720ms 620ms var(--ease-out-expo) forwards;
}

@keyframes hero-title-enter {
  to {
    opacity: 1;
    transform: translateY(0);
    /* Небольшой запас справа сохраняет выступающие части кириллических
       глифов при отрицательном letter-spacing на настольных браузерах. */
    clip-path: inset(-.14em -.2em -.16em -.12em);
  }
}

@keyframes hero-title-rule {
  to { transform: scaleX(1); }
}

/* Парные CTA занимают одинаковые колонки, независимо от длины подписи. */
#home.hero .hero-btns {
  width: min(100%, 550px);
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px !important;
}

#home.hero .hero-btns > a {
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--ctl-h-lg) !important;
  justify-content: center !important;
  text-align: center;
  white-space: nowrap;
}

/* Заполненные кнопки: текст и все вложенные элементы всегда используют
   контрастные чернила темы — и в покое, и при hover/focus/active. */
html:root[data-theme] :is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary),
html:root[data-theme] :is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary):hover,
html:root[data-theme] :is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary):focus-visible,
html:root[data-theme] :is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary):active {
  color: var(--cta-ink) !important;
}

html:root[data-theme] :is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary) :is(span, svg, use),
html:root[data-theme] :is(.btn-primary, .btn-download, .nav-contact, .cta.btn-primary)::after {
  color: inherit !important;
}

/* Контурные кнопки сохраняют тёмные/светлые чернила на спокойной заливке. */
html:root[data-theme] :is(.btn-outline, .btn-refresh):hover,
html:root[data-theme] :is(.btn-outline, .btn-refresh):focus-visible {
  color: var(--color-primary-strong) !important;
}

html:root[data-theme] :is(.btn-outline, .btn-refresh) :is(span, svg, use) {
  color: inherit !important;
}

@media (min-width: 1800px) {
  #home.hero {
    grid-template-columns: minmax(520px, .8fr) minmax(760px, 1.2fr) !important;
  }

  .hero-visual img {
    object-position: 68% center !important;
  }
}

@media (max-width: 760px) {
  .hero-visual img {
    object-position: 72% center !important;
  }
}

@media (max-width: 620px) {
  #home.hero .hero-btns {
    grid-template-columns: 1fr;
    width: 100%;
  }

  #home.hero .hero-title {
    font-size: clamp(2.25rem, 11.4vw, 3.55rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-main,
  .hero-title-accent,
  .hero-title-accent::after {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none !important;
  }
}

/* ========================================================================== 
   Отделка v47 — интерактивный маршрут трудоустройства и поисковый фильтр
   направлений вместо длинного системного select.
   ========================================================================== */

.process-section {
  position: relative;
  isolation: isolate;
}

.process-grid {
  position: relative;
  gap: 14px !important;
  padding-top: 18px;
}

.process-grid::before {
  content: "" !important;
  position: absolute;
  top: 58px;
  right: 8%;
  left: 8%;
  z-index: -1;
  display: block !important;
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-primary) 18%, transparent),
    var(--color-primary),
    var(--color-accent),
    color-mix(in srgb, var(--color-accent) 18%, transparent));
  transform: scaleX(.92);
  transform-origin: left center;
  opacity: .72;
}

.process-card,
html[data-theme="light"] .process-card,
html[data-theme="dark"] .process-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 292px;
  padding: 25px 22px 26px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent) !important;
  box-shadow: none !important;
  transform: translateY(0) !important;
  transition: transform 420ms var(--ease-out-expo), border-color 240ms ease, box-shadow 360ms ease, background 240ms ease !important;
}

.process-card::before {
  content: attr(data-step);
  position: absolute;
  top: -26px;
  right: -8px;
  z-index: -1;
  color: color-mix(in srgb, var(--color-primary) 9%, transparent);
  font-family: "Unbounded", sans-serif;
  font-size: clamp(5rem, 8vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
  transition: color 320ms ease, transform 520ms var(--ease-out-expo);
}

.process-card::after {
  content: "" !important;
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  display: block !important;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(.18);
  transform-origin: left center;
  transition: transform 520ms var(--ease-out-expo);
}

.process-card .process-number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 18px;
  color: var(--color-primary-strong) !important;
}

.process-card .process-icon {
  width: 58px;
  height: 58px;
  margin: 0 0 28px !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 36%, var(--color-border)) !important;
  border-radius: 50% !important;
  background: var(--color-surface) !important;
  color: var(--color-primary-strong) !important;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-primary) 7%, transparent) !important;
  transition: transform 480ms var(--ease-out-expo), background 240ms ease, color 240ms ease, box-shadow 320ms ease !important;
}

.process-card h3,
.process-card p {
  position: relative;
  z-index: 1;
  transition: transform 420ms var(--ease-out-expo), color 220ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .process-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border)) !important;
    background: var(--color-surface) !important;
    box-shadow: 0 22px 56px color-mix(in srgb, var(--color-primary) 13%, transparent) !important;
    transform: translateY(-9px) !important;
  }

  .process-card:hover::before {
    color: color-mix(in srgb, var(--color-primary) 16%, transparent);
    transform: translate(-6px, 8px) rotate(-4deg);
  }

  .process-card:hover::after { transform: scaleX(1); }

  .process-card:hover .process-icon {
    background: var(--color-primary) !important;
    color: var(--on-primary) !important;
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
    transform: rotate(-7deg) scale(1.08);
  }

  .process-card:hover h3,
  .process-card:hover p { transform: translateX(5px); }
}

.filter-field--location > label {
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: .84rem;
  font-weight: 800;
}

.location-combobox {
  position: relative;
  min-width: 0;
}

.location-combobox .filter-control,
.location-combobox .filter-input {
  width: 100% !important;
  max-width: none !important;
}

.location-combobox .filter-control:has(.filter-input[aria-expanded="true"]) .filter-input {
  border-color: var(--color-ring) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-ring) 16%, transparent) !important;
}

.location-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 80;
  max-height: 334px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  box-shadow: 0 22px 54px color-mix(in srgb, var(--color-text) 18%, transparent);
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) transparent;
}

.location-menu[hidden] { display: none !important; }

.location-option {
  width: 100%;
  min-height: 46px;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 220ms var(--ease-out-expo);
}

.location-option small {
  color: var(--color-text-muted);
  font-size: .74rem;
}

.location-option:hover,
.location-option:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
  color: var(--color-primary-strong);
  transform: translateX(3px);
}

.location-hint,
.location-empty {
  margin: 7px 5px 2px !important;
  padding: 10px;
  color: var(--color-text-muted) !important;
  font-size: .78rem !important;
  line-height: 1.45;
}

@media (max-width: 960px) {
  .process-grid::before { content: none !important; }
}

@media (max-width: 760px) {
  .process-card,
  html[data-theme="light"] .process-card,
  html[data-theme="dark"] .process-card {
    min-height: 250px;
  }

  .location-menu {
    right: 0;
    left: 0;
    max-height: min(46vh, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-card,
  .process-card::before,
  .process-card::after,
  .process-card .process-icon,
  .process-card h3,
  .process-card p,
  .location-option {
    transition: none !important;
    transform: none !important;
  }
}

/* ========================================================================== 
   Отделка v48 — фирменная верхняя композиция по мотивам прежнего WORKUP:
   эмблема, wordmark и лёгкая сеть связей без возврата к тяжёлому splash-screen.
   ========================================================================== */

#home.hero {
  isolation: isolate;
}

.hero-network {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: .32;
}

.hero-network-lines {
  fill: none;
  stroke: color-mix(in srgb, var(--color-primary) 34%, transparent);
  stroke-width: 1;
  stroke-dasharray: 7 12;
  vector-effect: non-scaling-stroke;
  animation: hero-network-flow 22s linear infinite;
}

.hero-network-nodes {
  fill: var(--color-secondary);
}

.hero-network-nodes circle:nth-child(3n) { fill: var(--color-accent); }
.hero-network-nodes circle:nth-child(4n) { animation: hero-node-pulse 4.8s ease-in-out infinite; }
.hero-network-nodes circle:nth-child(5n) { animation: hero-node-pulse 5.8s 1.1s ease-in-out infinite; }

html[data-theme="dark"] .hero-network {
  opacity: .42;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-secondary) 22%, transparent));
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 2;
}

.hero-brand-lockup {
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 17px;
  margin: 0 0 26px;
  opacity: 0;
  transform: translateY(14px);
  animation: hero-brand-enter 720ms 80ms var(--ease-out-expo) forwards;
}

.hero-brand-emblem {
  position: relative;
  width: 74px;
  height: 88px;
  display: grid;
  place-items: center;
}

.hero-brand-emblem::before,
.hero-brand-emblem::after {
  content: "";
  position: absolute;
  inset: -5px -12px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.hero-brand-emblem::after {
  inset: 7px -5px;
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  transform: rotate(18deg);
}

.hero-brand-emblem img {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 82px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 9px 18px color-mix(in srgb, var(--color-primary) 18%, transparent));
}

.hero-brand-copy {
  min-width: 0;
  display: grid;
  justify-items: start;
  line-height: 1;
}

.hero-brand-copy > strong {
  color: var(--color-text) !important;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.62rem);
  font-weight: 800;
  letter-spacing: .035em;
}

.hero-brand-copy > span:nth-child(2) {
  margin-top: 10px;
  color: var(--color-primary-strong) !important;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hero-brand-since {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  color: var(--color-text-muted) !important;
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .045em;
}

.hero-brand-since i {
  width: 23px;
  height: 1px;
  display: block;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

@keyframes hero-brand-enter {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-network-flow {
  to { stroke-dashoffset: -190; }
}

@keyframes hero-node-pulse {
  0%, 100% { opacity: .48; transform: scale(.86); transform-origin: center; }
  50% { opacity: 1; transform: scale(1.28); transform-origin: center; }
}

@media (max-width: 760px) {
  .hero-network {
    opacity: .24;
  }

  .hero-brand-lockup {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 22px;
  }

  .hero-brand-emblem {
    width: 58px;
    height: 70px;
  }

  .hero-brand-emblem img {
    width: 52px;
    height: 66px;
  }

  .hero-brand-copy > span:nth-child(2) {
    font-size: .62rem;
    letter-spacing: .13em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-network-lines,
  .hero-network-nodes circle,
  .hero-brand-lockup {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* ========================================================================== 
   Отделка v49 — SVG-сеть без артефактов светлой темы. Старое глобальное
   правило заливало path и замыкало линии треугольниками. Движение теперь
   одноразовое: линии рисуются, узлы мягко проявляются без вечного пульса.
   ========================================================================== */

html[data-theme] #home .hero-network .hero-network-lines,
html[data-theme] #home .hero-network .hero-network-lines path {
  fill: none !important;
  stroke: color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
  stroke-width: 1.15 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: none !important;
}

html[data-theme] #home .hero-network .hero-network-lines path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hero-network-draw 1280ms 180ms var(--ease-out-expo) forwards !important;
}

html[data-theme] #home .hero-network .hero-network-lines path:nth-child(2) { animation-delay: 300ms !important; }
html[data-theme] #home .hero-network .hero-network-lines path:nth-child(3) { animation-delay: 220ms !important; }
html[data-theme] #home .hero-network .hero-network-lines path:nth-child(4) { animation-delay: 390ms !important; }
html[data-theme] #home .hero-network .hero-network-lines path:nth-child(5) { animation-delay: 460ms !important; }

html[data-theme] #home .hero-network .hero-network-nodes {
  fill: none !important;
  stroke: none !important;
}

html[data-theme] #home .hero-network .hero-network-nodes circle,
html[data-theme] #home .hero-network .hero-network-nodes circle:nth-child(3n),
html[data-theme] #home .hero-network .hero-network-nodes circle:nth-child(4n),
html[data-theme] #home .hero-network .hero-network-nodes circle:nth-child(5n) {
  fill: var(--color-secondary) !important;
  stroke: none !important;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-node-arrive 760ms 520ms var(--ease-out-expo) forwards !important;
  transition: opacity 420ms ease, filter 420ms ease;
}

html[data-theme] #home .hero-network .hero-network-nodes circle:nth-child(3n) {
  fill: var(--color-accent) !important;
  animation-delay: 680ms !important;
}

html[data-theme] #home .hero-network .hero-network-nodes circle:nth-child(4n) { animation-delay: 820ms !important; }
html[data-theme] #home .hero-network .hero-network-nodes circle:nth-child(5n) { animation-delay: 960ms !important; }

@media (hover: hover) and (pointer: fine) {
  #home.hero:hover .hero-network-nodes circle {
    opacity: .76;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-secondary) 48%, transparent));
  }
}

@keyframes hero-network-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes hero-node-arrive {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: .5; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] #home .hero-network .hero-network-lines path {
    stroke-dashoffset: 0;
    animation: none !important;
  }

  html[data-theme] #home .hero-network .hero-network-nodes circle,
  html[data-theme] #home .hero-network .hero-network-nodes circle:nth-child(3n),
  html[data-theme] #home .hero-network .hero-network-nodes circle:nth-child(4n),
  html[data-theme] #home .hero-network .hero-network-nodes circle:nth-child(5n) {
    opacity: .5;
    transform: none;
    animation: none !important;
    transition: none !important;
  }
}

/* Отделка v50 — подписи hero-CTA помещаются в равные колонки. */
#home.hero .hero-btns > a {
  gap: 7px !important;
  padding-inline: 12px !important;
  font-size: clamp(.82rem, 1.05vw, .9rem) !important;
}

#home.hero .hero-btns .btn-label {
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

#home.hero .hero-btns .btn-label > span,
#home.hero .hero-btns .btn-label::after {
  white-space: nowrap;
}

#home.hero .hero-btns svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
}

@media (max-width: 420px) {
  #home.hero .hero-btns > a {
    padding-inline: 16px !important;
    font-size: .9rem !important;
  }
}

/* ========================================================================== 
   Отделка v51 — интерактивная глубина hero. Световой слой и SVG-сеть мягко
   следуют за курсором с инерцией; декоративная дымка движется навстречу.
   ========================================================================== */

#home.hero {
  --network-x: 0px;
  --network-y: 0px;
  --ambient-x: 0px;
  --ambient-y: 0px;
}

#home.hero .hero-network {
  transform: translate3d(var(--network-x), var(--network-y), 0) scale(1.025);
  transform-origin: center;
  will-change: transform;
}

#home.hero::before {
  transform: translate3d(var(--ambient-x), var(--ambient-y), 0) scale(1.035);
  transform-origin: center;
  transition: opacity 520ms ease;
  will-change: transform;
}

#home.hero::after {
  opacity: .62;
  transition: opacity 420ms ease;
}

#home.hero.hero-pointer-active::after {
  opacity: 1;
}

#home.hero .hero-network-lines path {
  transition: stroke 360ms ease, opacity 360ms ease, filter 360ms ease;
}

#home.hero.hero-pointer-active .hero-network-lines path {
  stroke: color-mix(in srgb, var(--color-primary) 62%, transparent) !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-secondary) 28%, transparent));
}

#home.hero.hero-pointer-active .hero-network-nodes circle {
  opacity: .88 !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-secondary) 58%, transparent));
}

html[data-theme="dark"] #home.hero.hero-pointer-active .hero-network-nodes circle {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-secondary) 72%, transparent));
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  #home.hero .hero-network,
  #home.hero::before {
    transform: none !important;
    will-change: auto;
  }

  #home.hero::after {
    transition: none !important;
  }
}

/* ========================================================================== 
   v121 — библиотека профессий, спокойная кинематографичная анимация hero и
   точечные правки выравнивания по последней визуальной проверке.
   ========================================================================== */

/* Новая вакансия получает один из этих токенов автоматически по названию.
   Общий fallback гарантирует изображение даже для незнакомой профессии. */
#jobs .vacancy-card {
  --vacancy-art: url("assets/vacancy-art/industrial.webp");
  --vacancy-art-accent: #22d3ee;
  background: conic-gradient(from var(--vacancy-angle),
    color-mix(in srgb, var(--vacancy-art-accent) 34%, var(--color-border)),
    var(--color-border) 28%,
    color-mix(in srgb, var(--color-accent) 22%, var(--color-border)) 56%,
    var(--color-border) 79%,
    color-mix(in srgb, var(--vacancy-art-accent) 34%, var(--color-border))) !important;
}

#jobs .vacancy-art--welding {
  --vacancy-art: url("assets/vacancy-art/welding.webp");
  --vacancy-art-accent: #fb7185;
}
#jobs .vacancy-art--pipeline {
  --vacancy-art: url("assets/vacancy-art/pipeline.webp");
  --vacancy-art-accent: #2dd4bf;
}
#jobs .vacancy-art--electrical {
  --vacancy-art: url("assets/vacancy-art/electrical.webp");
  --vacancy-art-accent: #38bdf8;
}
#jobs .vacancy-art--construction {
  --vacancy-art: url("assets/vacancy-art/construction.webp");
  --vacancy-art-accent: #f59e0b;
}
#jobs .vacancy-art--height {
  --vacancy-art: url("assets/vacancy-art/height.webp");
  --vacancy-art-accent: #a78bfa;
}
#jobs .vacancy-art--engineering {
  --vacancy-art: url("assets/vacancy-art/engineering.webp");
  --vacancy-art-accent: #818cf8;
}
#jobs .vacancy-art--machinery {
  --vacancy-art: url("assets/vacancy-art/machinery.webp");
  --vacancy-art-accent: #67e8f9;
}
#jobs .vacancy-art--logistics {
  --vacancy-art: url("assets/vacancy-art/logistics.webp");
  --vacancy-art-accent: #34d399;
}
#jobs .vacancy-art--industrial {
  --vacancy-art: url("assets/vacancy-art/industrial.webp");
}

/* На светлой теме фотография остаётся воздушной, на тёмной — чуть глубже.
   Два скрима защищают весь текст, а не только левую часть карточки. */
html:root[data-theme="light"] #jobs .vacancy-card::before {
  background:
    linear-gradient(90deg, rgba(248, 252, 255, .985) 0%, rgba(246, 251, 255, .955) 46%, rgba(239, 248, 253, .78) 72%, rgba(231, 244, 249, .69) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(239, 248, 253, .76)),
    var(--vacancy-art) right center / cover no-repeat !important;
}

html:root[data-theme="dark"] #jobs .vacancy-card::before {
  background:
    linear-gradient(90deg, rgba(5, 20, 34, .985) 0%, rgba(5, 21, 36, .955) 46%, rgba(5, 22, 37, .76) 72%, rgba(4, 18, 31, .64) 100%),
    linear-gradient(180deg, rgba(3, 15, 26, .08), rgba(3, 15, 26, .76)),
    var(--vacancy-art) right center / cover no-repeat !important;
}

#jobs .vacancy-card .vacancy-index,
#jobs .vacancy-card .vacancy-pay > span,
#jobs .vacancy-card .vacancy-info-icon {
  color: color-mix(in srgb, var(--vacancy-art-accent) 76%, var(--color-text)) !important;
}

/* Одновременно видны ровно три ряда. Динамическая пагинация также настроена
   на шесть; правило страхует статический SEO-снимок до загрузки таблицы. */
#vacancies-list > .vacancy-card:nth-child(n + 7) {
  display: none !important;
}

/* Диагональная маска сначала собирает основную строку, затем акцент словно
   поднимается из плана объекта. Эффект одноразовый и не отвлекает от чтения. */
html:root[data-theme] #home.hero .hero-title-main {
  will-change: transform, clip-path, opacity, filter;
  animation: hero-title-diagonal-in 1050ms 80ms var(--ease-out-expo) both !important;
}

html:root[data-theme] #home.hero .hero-title-accent {
  will-change: transform, clip-path, opacity, filter;
  transform-origin: left bottom;
  animation: hero-title-blueprint-in 1080ms 260ms var(--ease-out-expo) both !important;
}

@keyframes hero-title-diagonal-in {
  0% {
    opacity: 0;
    filter: blur(13px);
    transform: translate3d(-.34em, .42em, 0) skewY(3deg);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  58% { opacity: 1; filter: blur(1.5px); }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) skewY(0);
    clip-path: polygon(-4% -15%, 108% -15%, 108% 116%, -4% 116%);
  }
}

@keyframes hero-title-blueprint-in {
  0% {
    opacity: 0;
    filter: blur(11px);
    transform: perspective(700px) rotateX(-72deg) translate3d(0, .44em, 0);
    clip-path: inset(0 100% 0 0);
  }
  62% { opacity: 1; filter: blur(1px); }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: perspective(700px) rotateX(0) translate3d(0, 0, 0);
    clip-path: inset(-.16em -.24em -.18em -.12em);
  }
}

/* Заголовок ленты партнёров и флаг образуют один центрированный блок. */
#partners .partners-head {
  width: min(100%, 1040px);
  margin-inline: auto !important;
  text-align: center !important;
  justify-content: center;
  text-wrap: balance;
}

#partners .partners-head .flag-inline {
  display: inline-block;
  margin-inline-start: .3em;
  vertical-align: .05em;
}

/* Подсветка отзыва теперь имеет одинаковый воздух слева и справа. */
html:root[data-theme] body.home-page .testimonial-card,
html:root[data-theme="light"] body.home-page .testimonial-card,
html:root[data-theme="dark"] body.home-page .testimonial-card {
  box-sizing: border-box;
  padding-inline: clamp(22px, 2.1vw, 32px) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:root[data-theme] #home.hero :is(.hero-title-main, .hero-title-accent) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
}

@media (max-width: 720px) {
  /* На узкой карточке картинка становится мягким верхне-правым акцентом и не
     мешает более плотной типографике. */
  html:root[data-theme="light"] #jobs .vacancy-card::before {
    background:
      linear-gradient(110deg, rgba(248, 252, 255, .99) 0%, rgba(245, 251, 255, .95) 58%, rgba(235, 247, 251, .75) 100%),
      linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(239, 248, 253, .84)),
      var(--vacancy-art) 72% center / cover no-repeat !important;
  }

  html:root[data-theme="dark"] #jobs .vacancy-card::before {
    background:
      linear-gradient(110deg, rgba(5, 20, 34, .995) 0%, rgba(5, 21, 36, .96) 58%, rgba(4, 19, 32, .72) 100%),
      linear-gradient(180deg, rgba(3, 15, 26, .16), rgba(3, 15, 26, .84)),
      var(--vacancy-art) 72% center / cover no-repeat !important;
  }
}

/* ========================================================================== 
   v117 — выразительная шапка, полноширинная статистика и плавная карта.
   ========================================================================== */

/* Цветная полоса статистики теперь действительно является полосой: фон идёт
   от края до края, а сами четыре показателя сохраняют ширину контента. */
html:root[data-theme] body.home-page .stats {
  width: 100% !important;
  max-width: none !important;
  padding-inline: max(20px, calc((100vw - var(--content-width)) / 2)) !important;
}

/* Шапка связывает голубой, бирюзовый и индиго — основные цвета страницы.
   Полупрозрачность сохраняет глубину первого экрана при прокрутке. */
html:root[data-theme] body.home-page .header {
  border-bottom-color: rgba(14, 165, 233, .32) !important;
  background:
    linear-gradient(102deg,
      rgba(239, 249, 255, .94) 0%,
      rgba(235, 252, 248, .92) 46%,
      rgba(244, 242, 255, .94) 100%) !important;
  box-shadow:
    0 12px 34px rgba(3, 105, 161, .11),
    inset 0 1px rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(20px) saturate(155%) !important;
}

html:root[data-theme="dark"] body.home-page .header {
  border-bottom-color: rgba(56, 189, 248, .28) !important;
  background:
    linear-gradient(102deg,
      rgba(4, 18, 31, .95) 0%,
      rgba(5, 38, 48, .93) 48%,
      rgba(18, 16, 48, .95) 100%) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, .26),
    inset 0 1px rgba(125, 211, 252, .05) !important;
}

html:root[data-theme] body.home-page .header::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 0;
  height: 2px;
  background: linear-gradient(90deg, #0ea5e9 0%, #2dd4bf 48%, #818cf8 82%, transparent 100%);
  transform-origin: left center;
  animation: home-header-line 920ms var(--ease-out-expo) both;
  pointer-events: none;
}

html:root[data-theme] body.home-page .header > * {
  position: relative;
  z-index: 1;
}

html:root[data-theme] body.home-page .header .logo {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--home-sky) 24%, transparent)) !important;
}

html:root[data-theme] body.home-page .header .brand {
  color: color-mix(in srgb, var(--color-text) 88%, var(--home-ocean)) !important;
}

html:root[data-theme] body.home-page .header .theme-toggle,
html:root[data-theme] body.home-page .header .menu-toggle {
  border-color: color-mix(in srgb, var(--home-sky) 34%, var(--color-border)) !important;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent) !important;
  box-shadow: inset 0 1px color-mix(in srgb, #fff 54%, transparent) !important;
}

html:root[data-theme] body.home-page .header #siteNav .nav-contact,
html:root[data-theme] body.home-page .header #siteNav .nav-contact:hover,
html:root[data-theme] body.home-page .header #siteNav .nav-contact.active {
  border-color: transparent !important;
  background: linear-gradient(115deg, #0284c7 0%, #0d9488 62%, #4f46e5 130%) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(3, 105, 161, .23) !important;
}

html:root[data-theme] body.home-page .header #siteNav .nav-contact::before {
  background: linear-gradient(115deg, #0ea5e9, #14b8a6 58%, #6366f1) !important;
}

@media (min-width: 961px) and (hover: hover) {
  html:root[data-theme] body.home-page .header #siteNav a:not(.nav-contact):hover,
  html:root[data-theme] body.home-page .header #siteNav a:not(.nav-contact):focus-visible,
  html:root[data-theme] body.home-page .header #siteNav a:not(.nav-contact).active {
    color: var(--color-text) !important;
    background: linear-gradient(110deg,
      color-mix(in srgb, var(--home-sky) 13%, transparent),
      color-mix(in srgb, var(--home-violet) 10%, transparent)) !important;
  }

  html:root[data-theme] body.home-page .header #siteNav a:not(.nav-contact)::after {
    border-color: color-mix(in srgb, var(--home-sky) 50%, transparent) !important;
  }
}

@keyframes home-header-line {
  from { opacity: 0; transform: scaleX(.18); }
  to { opacity: 1; transform: scaleX(1); }
}

/* Жесты схемы маршрута. При увеличении один палец двигает карту, два пальца
   плавно меняют масштаб в обе стороны. На время жеста переход отключён —
   изображение больше не отстаёт от пальца. */
html:root[data-theme] body.home-page .contact-map-zoom.is-zoomed {
  touch-action: none;
  overscroll-behavior: contain;
}

html:root[data-theme] body.home-page .contact-map-zoom.is-interacting .contact-map-vector {
  transition: none !important;
}

html:root[data-theme] body.home-page .contact-map-zoom .contact-map-vector {
  backface-visibility: hidden;
  contain: paint;
}

html:root[data-theme] body.home-page .contact-map-zoom-controls {
  right: 12px;
  bottom: 12px;
  grid-template-columns: repeat(3, auto);
  gap: 6px;
}

html:root[data-theme] body.home-page .map-zoom-btn {
  width: 44px;
  height: 44px;
  border-color: color-mix(in srgb, var(--section-tone-a) 32%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: 0 9px 24px rgba(4, 17, 28, .14);
}

html:root[data-theme] body.home-page .map-zoom-reset {
  width: 52px;
  font-size: .76rem;
}

@media (max-width: 600px) {
  html:root[data-theme] body.home-page .stats {
    padding-inline: 16px !important;
  }

  html:root[data-theme] body.home-page .contact-map-zoom-controls {
    right: 8px;
    bottom: 8px;
  }

  html:root[data-theme] body.home-page .map-zoom-btn {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root[data-theme] body.home-page .header::before {
    animation: none !important;
  }
}

/* ========================================================================== 
   v118 — полноширинные цветовые главы и единый вертикальный ритм.

   Цвет идёт до краёв окна, а контент остаётся на общей колонке content-width.
   Поэтому на 1366, 1920 и сверхшироких мониторах не появляются обрубленные
   прямоугольники и случайные боковые поля.
   ========================================================================== */

html:root[data-theme] body.home-page main > :is(
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-block: clamp(72px, 7vw, 112px) !important;
  padding-inline: max(24px, calc((100vw - var(--content-width)) / 2)) !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
}

/* Статистика — компактная вводная полоса, поэтому использует тот же край и
   сетку, но меньший вертикальный интервал. */
html:root[data-theme] body.home-page main > .stats {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-block: clamp(22px, 3vw, 34px) !important;
  padding-inline: max(24px, calc((100vw - var(--content-width)) / 2)) !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
}

/* Верхний и нижний канты — одинаковой силы. Они разделяют оттенки даже на
   мониторах с пониженной цветопередачей, где сами градиенты почти сливаются. */
html:root[data-theme] body.home-page main > :is(
  .stats,
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) {
  border-top: 1px solid color-mix(in srgb, var(--section-tone-a) 18%, var(--color-border)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--section-tone-b) 16%, var(--color-border)) !important;
}

/* Внутренние заголовки получают один интервал до содержимого — раньше в
   разных разделах он колебался почти вдвое. */
html:root[data-theme] body.home-page main > :is(
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) > :is(.section-heading, .jobs-heading, .about-intro, .contact-heading):first-child {
  margin-top: 0 !important;
  margin-bottom: clamp(32px, 4vw, 52px) !important;
}

/* Внутри блока «О компании» несколько самостоятельных глав; их интервалы
   также приводим к одной шкале, не затрагивая сами фотомозаики. */
html:root[data-theme] body.home-page #about > * + * {
  margin-top: clamp(64px, 7vw, 104px) !important;
}

@media (max-width: 760px) {
  html:root[data-theme] body.home-page main > :is(
    #services,
    .process-section,
    #employment,
    #jobs,
    #partners,
    .testimonials,
    #about,
    #facts,
    #contact
  ) {
    padding-block: 64px !important;
    padding-inline: 18px !important;
  }

  html:root[data-theme] body.home-page main > .stats {
    padding: 18px 16px !important;
  }

  html:root[data-theme] body.home-page #about > * + * {
    margin-top: 64px !important;
  }
}

/* Отделка v52 — сортировка использует тот же компактный dropdown, что и город. */
.filter-field--sort > span {
  color: var(--color-text);
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: .84rem;
  font-weight: 800;
}

.sort-combobox {
  position: relative;
  min-width: 0;
}

.sort-trigger {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  color: var(--color-text);
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.sort-trigger svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: transform 240ms var(--ease-out-expo);
}

.sort-trigger[aria-expanded="true"] {
  border-color: var(--color-ring);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-ring) 16%, transparent);
}

.sort-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.sort-menu {
  right: 0;
  left: 0;
  min-width: min(100%, 320px);
}

.sort-option {
  position: relative;
  padding-right: 38px;
}

.sort-option.is-selected::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 16%, transparent);
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .sort-trigger,
  .sort-trigger svg,
  .sort-option { transition: none !important; }
}

/* ==========================================================================
   Широкие мониторы. Контейнер был зафиксирован на 1180px, и на экране 1920
   по краям оставалось по 370–410px пустоты — сайт выглядел собранным под
   ноутбук. Ширина растёт ступенями; строки текста при этом остаются
   короткими за счёт собственных max-width у лида и абзацев героя.
   ========================================================================== */

@media (min-width: 1520px) {
  :root { --content-width: 1320px; }

  #home.hero,
  html[data-theme="light"] #home.hero,
  html[data-theme="dark"] #home.hero {
    width: min(100%, 1560px) !important;
  }
}

@media (min-width: 1760px) {
  :root { --content-width: 1420px; }

  #home.hero,
  html[data-theme="light"] #home.hero,
  html[data-theme="dark"] #home.hero {
    width: min(100%, 1680px) !important;
  }

  /* Фото в герое получает больше места, чем текст: на широком экране
     колонка подписи иначе растягивается до нечитаемой длины. */
  #home.hero {
    grid-template-columns: minmax(360px, .78fr) minmax(560px, 1.22fr) !important;
  }
}

/* Декоративная сетка в герое нарисована с запасом за края и торчала на 18px
   за вьюпорт — из-за неё появлялась горизонтальная прокрутка на 1280–1520.
   Слой чисто оформительский, обрезать его безопасно. */
#home.hero .hero-network,
.hero-network {
  overflow: hidden !important;
}

.background {
  overflow: hidden !important;
}

/* Подвал не подхватывал общую ширину и на широком экране оставался
   на 300px уже остальных секций. */
footer .footer-wrap {
  width: min(100%, var(--content-width)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

/* ==========================================================================
   Горизонтальная прокрутка. Появлялась на всех ширинах, включая телефон:
   фоновый слой был на 5px шире вьюпорта, а декоративная SVG-сетка в герое
   вылезала на 18px за края. На мобильном это давало болтающийся вбок экран.
   ========================================================================== */

/* Страховка на будущее: clip, а не hidden — hidden на html ломает
   position: sticky у шапки, clip не создаёт скролл-контейнер. */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

/* Сам фоновый слой */
.background {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: 100vw;
  overflow: hidden !important;
}

/* Декоративная сетка в герое */
#home.hero .hero-network,
.hero-network {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* ==========================================================================
   Фоновая сеть частиц (bg.js). Заменила слой #blobs: те круги были заданы
   в пикселях, не масштабировались и на узком экране слипались в пятно.
   ========================================================================== */

#bgCanvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Слой лежит поверх заливки .background, но под всем содержимым страницы. */
.background { z-index: -2 !important; }

/* Старые правила blob-ов больше ни к чему не применяются, но на случай
   кэша у посетителей гасим их явно. */
#blobs,
.blob {
  display: none !important;
}

/* ==========================================================================
   Отклик на касание. Перекат подписи, заливка снизу, капсула у пунктов меню
   и разгон стрелки живут внутри @media (hover: hover) — на телефоне они не
   срабатывают, и нажатие не давало вообще никакого ответа.
   Ниже — состояния для тач-устройств: короткие, без имитации ховера.
   ========================================================================== */

@media (hover: none), (pointer: coarse) {
  html:root[data-theme] :is(.btn-primary, .btn-outline, .btn-download, .btn-refresh,
                            .vacancy-reply, .nav-contact, .pagination-btn, .contact-link,
                            .soc, #toTop, .contact-map-link, .theme-toggle, .menu-toggle) {
    transition: transform 140ms var(--ease-out-expo),
                background-color 160ms ease,
                border-color 160ms ease !important;
    -webkit-tap-highlight-color: transparent;
  }

  html:root[data-theme] :is(.btn-primary, .btn-download, .nav-contact, .process-cta .btn-primary):active {
    transform: scale(.97) !important;
    background: var(--cta-hover) !important;
  }

  html:root[data-theme] :is(.btn-outline, .btn-refresh, .vacancy-reply, .pagination-btn,
                            .contact-map-link, .soc, #toTop):active {
    transform: scale(.97) !important;
    border-color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)) !important;
    color: var(--color-primary-strong) !important;
  }

  html:root[data-theme] .contact-link:active,
  html:root[data-theme] .header #siteNav a:active {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
    color: var(--color-primary-strong) !important;
  }

  /* Карточки вакансий на телефоне тоже должны отзываться на палец. */
  html:root[data-theme] .vacancy-card:active {
    transform: scale(.995);
    border-color: var(--color-primary) !important;
  }
}

/* В герое одновременно рисовались две сетки узлов: статическая SVG и живой
   канвас фона. Оставляем интерактивную, иначе рябит. */
#home.hero .hero-network {
  display: none !important;
}

/* ==========================================================================
   Отделка v58 — движение без мыши (motion.js).
   На телефоне почти всё было завязано на :hover, и при пролистывании
   страница выглядела застывшей. Ниже — появление карточек, световой кант
   по краю и подсветка суммы, пока она набирается.
   ========================================================================== */

/* Появление карточки. Ставим только там, где скрипт успел пометить карточку,
   иначе при отключённом JS список останется невидимым. */
.vacancy-card[data-motion] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease-out-expo),
              transform 620ms var(--ease-out-expo);
}

.vacancy-card[data-motion].is-inview {
  opacity: 1;
  transform: none;
}

/* Световой кант: тонкая рамка-градиент поверх карточки. Пробегает один раз
   при появлении, потом гаснет — постоянное мерцание на десяти карточках
   превратилось бы в рябь. */
.vacancy-card[data-motion] .vacancy-edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 34%,
    color-mix(in srgb, var(--color-primary) 85%, transparent) 46%,
    color-mix(in srgb, var(--color-accent) 75%, transparent) 52%,
    transparent 64%,
    transparent 100%);
  background-size: 280% 100%;
  background-position: 130% 0;
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.vacancy-card[data-motion].is-inview .vacancy-edge {
  animation: vacancyEdge 1400ms 120ms var(--ease-out-expo) 1;
}

@keyframes vacancyEdge {
  0%   { opacity: 0;   background-position: 130% 0; }
  18%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0;   background-position: -30% 0; }
}

/* Повторяем кант при наведении и при касании — так карточка отзывается
   на действие, а не только на прокрутку. */
@media (hover: hover) and (pointer: fine) {
  .vacancy-card[data-motion]:hover .vacancy-edge {
    animation: vacancyEdge 1200ms var(--ease-out-expo) 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .vacancy-card[data-motion]:active .vacancy-edge {
    animation: vacancyEdge 900ms var(--ease-out-expo) 1;
  }
}

/* Сумма подсвечивается, пока набирается, и возвращается в обычный цвет. */
.vacancy-pay strong {
  transition: color 420ms var(--ease-out-expo);
  font-variant-numeric: tabular-nums;
}

.vacancy-pay strong.is-counting {
  color: var(--color-primary-strong) !important;
}

@media (prefers-reduced-motion: reduce) {
  .vacancy-card[data-motion] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .vacancy-card[data-motion]::after,
  .vacancy-card[data-motion].is-inview .vacancy-edge {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ==========================================================================
   Кадрирование фото в герое. Снимок горизонтальный (1755×896, 1.96:1), а
   слот под него был вертикальным — 891×749 на экране 1920 и 722×784 на 1440.
   object-fit: cover срезал по бокам больше половины: видно было 61% и 47%
   ширины кадра. Даём слоту пропорции, близкие к самому снимку.
   ========================================================================== */

@media (min-width: 1081px) {
  .hero-visual {
    align-self: center !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
  }

  .hero-visual img {
    min-height: 0 !important;
    height: 100%;
    object-position: 62% center;
  }
}

@media (min-width: 1520px) {
  .hero-visual {
    aspect-ratio: 15 / 9;
  }
}

@media (min-width: 1760px) {
  .hero-visual {
    aspect-ratio: 1.8;
  }
}

/* На планшете слот и так близок к квадрату — там важнее показать людей,
   поэтому кадр смещаем правее. */
@media (min-width: 761px) and (max-width: 1080px) {
  .hero-visual img {
    object-position: 66% center;
  }
}

/* На телефоне слот был почти квадратным (350×390) и срезал 54% кадра,
   да ещё растил высоту героя до 1236px. Кладём снимок горизонтально. */
@media (max-width: 760px) {
  .hero-visual {
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
  }

  .hero-visual img {
    min-height: 0 !important;
    height: 100%;
    object-position: 64% center;
  }
}

/* ==========================================================================
   Появление остальных карточек: этапы, услуги, география, мероприятия,
   факты, отзывы, партнёры. Раньше всё их движение было на :hover, и при
   свайпе на телефоне блоки просто стояли.
   ========================================================================== */

[data-rise] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms var(--ease-out-expo),
              transform 660ms var(--ease-out-expo);
}

[data-rise].is-risen {
  opacity: 1;
  transform: none;
}

/* У карточек этапов верхняя линия прочерчивается слева направо — тот самый
   след «как будто мышкой прошёлся». */
.process-card[data-rise] {
  position: relative;
}

.process-card[data-rise]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-accent) 80%, var(--color-primary)));
  transition: transform 720ms var(--ease-out-expo);
  pointer-events: none;
}

.process-card[data-rise].is-risen::before {
  transform: scaleX(1);
  transition-delay: 120ms;
}

/* Номер этапа проявляется следом за линией. */
.process-card[data-rise] .process-number {
  opacity: 0;
  transition: opacity 420ms var(--ease-out-expo) 360ms;
}

.process-card[data-rise].is-risen .process-number {
  opacity: 1;
}

/* Иконка чуть подрастает при появлении — на телефоне это единственный
   момент, когда она вообще двигается. */
.process-card[data-rise] .process-icon,
#services .service-card[data-rise] .service-icon,
#facts .fact-card[data-rise] .fact-ico {
  transform: scale(.86);
  transition: transform 620ms var(--ease-out-expo) 140ms;
}

.process-card[data-rise].is-risen .process-icon,
#services .service-card[data-rise].is-risen .service-icon,
#facts .fact-card[data-rise].is-risen .fact-ico {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-rise],
  [data-rise].is-risen {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .process-card[data-rise]::before {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .process-card[data-rise] .process-number {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Иерархия в карточке вакансии. Название, сумма и условия шли одним цветом,
   и глаз не за что было зацепить. Разводим по смыслу: должность — синим
   (о чём вакансия), сумма — зелёным акцентом (ради чего), условия остаются
   приглушёнными. Оба цвета берём из палитры, поэтому в тёмной теме они
   светлеют сами.
   ========================================================================== */

html:root[data-theme] .vacancy-card .vacancy-title {
  color: var(--color-primary-strong) !important;
  letter-spacing: -0.015em;
}

/* Сумма — в собственной плашке, чтобы читалась как главное число карточки. */
html:root[data-theme] .vacancy-pay strong {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 2px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent) !important;
  font-weight: 800;
}

/* Подпись «Зарплата» — тем же акцентом, но тише. */
html:root[data-theme] .vacancy-pay > span {
  color: color-mix(in srgb, var(--color-accent) 78%, var(--color-text-muted)) !important;
}

html:root[data-theme] .vacancy-pay > span svg {
  color: var(--color-accent);
}

/* Пока сумма набирается, плашка подсвечивается ярче и гаснет к концу. */
html:root[data-theme] .vacancy-pay strong.is-counting {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent) !important;
}

/* На наведении и касании карточка подчёркивает название. */
@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] .vacancy-card:hover .vacancy-title {
    color: var(--color-primary) !important;
  }
}

@media (max-width: 640px) {
  html:root[data-theme] .vacancy-pay strong {
    padding: 4px 10px;
  }
}

/* ==========================================================================
   Размер фото в герое. После выравнивания пропорций снимок стал слишком
   мелким: слот 891×495 при ширине героя 1680. Отдаём фотографии больше
   ширины и высоты — она главный образ первого экрана.
   ========================================================================== */

@media (min-width: 1081px) {
  #home.hero {
    grid-template-columns: minmax(320px, .82fr) minmax(480px, 1.18fr) !important;
  }

  .hero-visual { aspect-ratio: 1.52; }
}

@media (min-width: 1520px) {
  #home.hero {
    grid-template-columns: minmax(340px, .74fr) minmax(560px, 1.26fr) !important;
  }

  .hero-visual { aspect-ratio: 1.56; }
}

@media (min-width: 1760px) {
  #home.hero {
    grid-template-columns: minmax(360px, .68fr) minmax(620px, 1.32fr) !important;
  }

  .hero-visual { aspect-ratio: 1.62; }
}

/* Плашка суммы обнимает текст, а не растягивается во всю строку. */
html:root[data-theme] .vacancy-pay strong {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
}

/* Цвет названия вакансии перебивался тремя правилами из index.html
   вида [data-theme="dark"] #jobs .vacancy-card .vacancy-title (у них id,
   поэтому они выигрывали). Ставим селектор той же силы, но позже. */
html:root[data-theme] #jobs .vacancy-card .vacancy-title,
html:root[data-theme="dark"] #jobs .vacancy-card .vacancy-title {
  color: var(--color-primary-strong) !important;
}

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] #jobs .vacancy-card:hover .vacancy-title {
    color: var(--color-primary) !important;
  }
}

/* ==========================================================================
   Отделка v68 — зелёный уходит из интерфейса.
   Дизайн-система задавала акцентом зелёный #16A34A, но на сине-стальной
   палитре он читается инородно. Оставляем один синий строй; зелёным
   остаётся только точка «Консультант на связи» — там это статус, а не
   украшение.
   ========================================================================== */

/* ---- 1. Зарплата: без плашки, синим, крупнее ---- */
html:root[data-theme] #jobs .vacancy-pay strong,
html:root[data-theme] .vacancy-pay strong {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--color-primary-strong) !important;
  font-family: "Onest", "Segoe UI", sans-serif;
  font-size: 1.34rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

html:root[data-theme] .vacancy-pay strong.is-counting {
  background: none !important;
  border: 0 !important;
  color: var(--color-primary) !important;
}

/* Подпись «Зарплата» и её иконка — нейтральные, без зелени. */
html:root[data-theme] .vacancy-pay > span {
  color: var(--color-text-muted) !important;
}

html:root[data-theme] .vacancy-pay > span svg {
  color: var(--color-primary) !important;
}

/* ---- 2. «Контакты» в шапке и мобильном меню ---- */
html:root[data-theme] .header #siteNav .nav-contact,
html:root[data-theme] .header #siteNav .nav-contact:hover,
html:root[data-theme] .header #siteNav .nav-contact.active {
  border-color: var(--color-primary) !important;
  background: var(--color-primary) !important;
  color: var(--on-primary) !important;
  box-shadow: none !important;
}

html:root[data-theme] .header #siteNav .nav-contact:hover {
  background: var(--color-primary-strong) !important;
}

html:root[data-theme] .header #siteNav .nav-contact::before {
  background: var(--color-primary-strong) !important;
}

@media (max-width: 960px) {
  html:root[data-theme] .header #siteNav .nav-contact,
  html:root[data-theme] .header #siteNav .nav-contact:hover,
  html:root[data-theme] .header #siteNav .nav-contact.active {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    color: var(--on-primary) !important;
  }
}

/* ---- 3. Остальная зелень в оформлении ---- */

/* Галочки в герое */
html:root[data-theme] .hero-trust svg {
  color: var(--color-primary) !important;
}

/* Точка у кикера в герое */
html:root[data-theme] .hero-eyebrow span {
  background: var(--color-primary) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
}

/* Подчёркивание под заголовком «Доступные вакансии» */
html:root[data-theme] .process-cta .btn-primary,
html:root[data-theme] #jobs .section-title::after,
html:root[data-theme] .section-heading h2::after {
  --accent-swap: var(--color-primary);
}

html:root[data-theme] #jobs .section-title::after {
  background: var(--color-primary) !important;
}

/* Бегущий кант карточки */
.vacancy-card[data-motion] .vacancy-edge {
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 34%,
    color-mix(in srgb, var(--color-primary) 85%, transparent) 46%,
    color-mix(in srgb, var(--color-secondary) 85%, transparent) 52%,
    transparent 64%,
    transparent 100%);
  background-size: 280% 100%;
  background-position: 130% 0;
}

/* Линия у карточек этапов */
.process-card[data-rise]::before {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

/* Бейдж «2017–2024» в фактах */
html:root[data-theme] .fact-badge {
  border-color: color-mix(in srgb, var(--color-primary) 34%, transparent);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
  color: var(--color-primary-strong) !important;
}

/* Точка на подписи карты */
.contact-map-label::before {
  background: var(--color-secondary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-secondary) 28%, transparent);
}

/* Полоска под цифрами в блоке статистики */
html:root[data-theme] .stat-card::after {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) !important;
}

/* Точка «Консультант на связи» остаётся зелёной: это индикатор состояния,
   а не элемент оформления. */

/* Без зелёного название и сумма оказались одного синего — иерархия пропала.
   Разводим: название держит максимальный контраст (это заголовок карточки),
   синий остаётся за суммой, её и ищут глазами. */
html:root[data-theme] #jobs .vacancy-card .vacancy-title,
html:root[data-theme="dark"] #jobs .vacancy-card .vacancy-title,
html:root[data-theme] .vacancy-card .vacancy-title {
  color: var(--color-text) !important;
}

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] #jobs .vacancy-card:hover .vacancy-title {
    color: var(--color-primary-strong) !important;
  }
}

/* ==========================================================================
   Фото в герое занимает колонку целиком. Пропорции снимка мы уже
   выправляли, чтобы он не резался по бокам, но из-за этого под ним
   оставалась пустота. Компромисс в пользу размера: снимок тянется на всю
   высоту блока, кадр смещён на людей, чтобы обрезались только края неба.
   ========================================================================== */

@media (min-width: 1081px) {
  #home.hero .hero-visual,
  .hero-visual {
    align-self: stretch !important;
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 520px !important;
  }

  .hero-visual img {
    height: 100% !important;
    min-height: 520px !important;
    object-fit: cover;
    object-position: 60% 42%;
  }
}

@media (min-width: 1520px) {
  .hero-visual,
  #home.hero .hero-visual { min-height: 580px !important; }
  .hero-visual img { min-height: 580px !important; }
}

@media (min-width: 1760px) {
  .hero-visual,
  #home.hero .hero-visual { min-height: 620px !important; }
  .hero-visual img { min-height: 620px !important; }
}

/* ==========================================================================
   Акцент перекрашен из зелёного в бирюзовый. Точечных переопределений было
   бы полтора десятка (подчёркивание в герое, узлы сети, точка на карте,
   бейдж, кант карточки), поэтому меняем сам токен — всё, что на нём висит,
   перекрашивается разом. Зелёным остаётся только индикатор
   «Консультант на связи»: там цвет означает состояние.
   ========================================================================== */

:root {
  --color-accent: #0e7490;
  --color-accent-hover: #155e75;
  --status-online: #16803c;
}

html[data-theme="dark"] {
  --color-accent: #22d3ee;
  --color-accent-hover: #67e8f9;
  --status-online: #4ade80;
}

html:root[data-theme] .vacancy-response-note i,
html:root[data-theme] #jobs .vacancy-response-note i {
  background: var(--status-online) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-online) 22%, transparent) !important;
}

/* У первой карточки статистики оставалась левая вертикальная линия, тогда
   как справа у последней её нет — блок выглядел незакрытым с одной стороны.
   Разделители остаются только между карточками. */
html:root[data-theme] .stats .stat-card:first-child,
html:root[data-theme="light"] .stats .stat-card:first-child,
html:root[data-theme="dark"] .stats .stat-card:first-child {
  border-left: 0 !important;
}

/* Плавающая кнопка «Наверх» должна работать и рядом с подвалом: там она
   особенно нужна после длинного списка вакансий. */
#toTop.is-near-footer {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* В светлой теме выделенная часть заголовка теряла цвет: по ней била
   theme-light.css правилом html[data-theme="light"] :where(…, span, …),
   и обе строки становились одинаково тёмными — заголовок читался
   монотонным. Возвращаем акцент. */
html:root[data-theme] .hero-title .hero-title-accent,
html:root[data-theme="light"] .hero-title .hero-title-accent {
  color: var(--color-primary-strong) !important;
  -webkit-text-fill-color: var(--color-primary-strong) !important;
}

html:root[data-theme] .hero-title .hero-title-main,
html:root[data-theme="light"] .hero-title .hero-title-main {
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* Индексируемая навигация по региональным страницам остаётся компактной и
   визуально продолжает сетку подвала. */
.footer-seo-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--color-line);
  color: var(--color-text-muted);
  font-size: .84rem;
}

.footer-seo-links strong {
  margin-right: .25rem;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
}

.footer-seo-links a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer-seo-links a:hover,
.footer-seo-links a:focus-visible {
  color: var(--color-primary-strong);
  border-color: currentColor;
}

.brand-history {
  display: block;
  margin-top: .55rem;
  color: var(--color-text-muted);
  font-size: .78rem;
  letter-spacing: .04em;
}

/* Плавная смена темы: при автопереключении день/ночь и по кнопке цвета
   перетекают, а не переключаются рывком. Только на время самой смены —
   постоянный transition на всём документе стоил бы кадров при прокрутке. */
html.theme-switching,
html.theme-switching body,
html.theme-switching .header,
html.theme-switching .vacancy-card,
html.theme-switching .section,
html.theme-switching footer {
  transition: background-color 380ms ease, color 380ms ease, border-color 380ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-switching,
  html.theme-switching body,
  html.theme-switching .header,
  html.theme-switching .vacancy-card,
  html.theme-switching .section,
  html.theme-switching footer {
    transition: none !important;
  }
}

/* ==========================================================================
   Отделка v77 — экономия акцента и одна кривая на весь сайт.

   Замер живого сайта показал два расхождения с тем, как устроены эталоны
   (lusion, locomotive, basicagency, darkroom — цифры в скилле):

   1. Акцент применялся 213 раз при 683 применениях основного текста, то есть
      соотношение 1:3. У эталонов 1:50…1:180. Сотня из этих 213 — иконки.
      Когда акцентом покрашены иконки и служебные подписи, акцента больше нет,
      есть второй основной цвет, и глазу не за что зацепиться.

   2. В переходах жили три кривые сразу: наша cubic-bezier(0.16,1,0.3,1) ×87,
      старая cubic-bezier(0.2,0.8,0.2,1) ×53 и голый ease ×66. Разнобой не
      называется словами, но читается как неаккуратность.
   ========================================================================== */

/* ---- 1. Иконки перестают быть акцентом --------------------------------- */

/* Декоративные плитки с иконками: услуги, этапы, факты. Сами плитки остаются
   подкрашенными, а рисунок внутри — нейтральный. */
html:root[data-theme] :is(.service-icon, .process-icon, .fact-ico) {
  color: var(--color-text-muted) !important;
}

/* Мелкие иконки в строках данных — метка города, условия, график, часы.
   Это сопровождение текста, а не действие. */
html:root[data-theme] :is(
  .vacancy-location,
  .vacancy-info-icon,
  .schedule-row,
  .contact-address,
  .hero-trust
) svg {
  color: var(--color-text-muted) !important;
}

/* Иконка рядом с подписью «Зарплата» — сама сумма остаётся акцентной,
   значок при ней не нужен. */
html:root[data-theme] .vacancy-pay > span svg {
  color: var(--color-text-muted) !important;
}

/* ---- 2. Служебные номера блоков ---------------------------------------- */

/* 01 / 02 / 03 у этапов, контактов, географии, отзывов, мероприятий, фактов
   и «Вакансия 07» в карточке. Это ориентиры, а не смысл: у эталонов такие
   микроподписи всегда нейтральные. */
html:root[data-theme] :is(
  .process-number,
  .contact-index,
  .geo-index,
  .testimonial-index,
  .event-index,
  .fact-index,
  .vacancy-index
) {
  color: var(--color-text-muted) !important;
}

/* Кикер над заголовком секции акцент сохраняет: он один на секцию и работает
   как метка раздела. */

/* ---- 3. Одна кривая ----------------------------------------------------- */

html:root[data-theme] :is(
  a, button,
  .card, .vacancy-card, .service-card, .process-card, .geo-item,
  .stat-card, .event-card, .social-card, .testimonial-card, .fact-card,
  .contact-link, .contact-map-link, .soc, .pagination-btn,
  .btn-primary, .btn-outline, .btn-download, .btn-refresh, .vacancy-reply,
  .nav-contact, .theme-toggle, .menu-toggle,
  .vacancy-title, .vacancy-pay strong, .hero-visual img
) {
  transition-timing-function: var(--ease-out-expo) !important;
}

/* ---- 4. Мелочи, замеченные при разборе ---------------------------------- */

/* Сумма — единственное место в карточке, где акцент уместен: ради неё
   карточку и открывают. Чуть добавим ей веса, раз соседи стали тише. */
html:root[data-theme] #jobs .vacancy-pay strong {
  font-size: 1.4rem !important;
}

/* Плитка иконки в услугах была почти невидима на светлой теме: заливка
   строилась от secondary при 12%. Делаем её заметнее, но по-прежнему тихо. */
html:root[data-theme="light"] :is(.service-icon, .fact-ico) {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
}

html:root[data-theme="dark"] :is(.service-icon, .fact-ico) {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}

/* ==========================================================================
   Отделка v78 — один нейтральный вместо двух.

   В светлой теме основной текст шёл двумя близкими, но разными цветами:
   легаси #0b1220 (504 элемента) из старого слоя темы и токен #102a3a (234).
   Правило «два нейтральных плюс акцент» ломалось на ровном месте, а глаз
   ловил несобранность, не понимая причины.

   Сводим к доминирующему: он темнее, контрастнее и уже стоит на большей
   части страницы, поэтому правка в один токен и без риска что-то сломать.
   ========================================================================== */

:root {
  --color-text: #0b1220;
}

/* ==========================================================================
   Отделка v79 — заголовок первого экрана получает шрифт.

   Замер: в @import подключены только Onest и Unbounded, а `.hero-title`
   и `.testimonial-card blockquote` объявлены через "Manrope" и "Atkinson
   Hyperlegible" — этих файлов нет, и браузер рисует их системным sans-serif.
   Проверено по ширине текста: Unbounded 1165px, Onest 896px, Manrope и
   Atkinson совпадают с запасным. То есть самый крупный элемент страницы был
   набран шрифтом по умолчанию, пока все заголовки секций шли характерным
   Unbounded.

   Задумано это было правильно: правило Phase 4 перечисляет `.hero-title`
   среди Unbounded, но `:where(...)` даёт нулевую специфичность, и раннее
   `.hero-title { font-family: "Manrope" !important }` (0,1,0) его перебивало.
   ========================================================================== */

/* Колонка заголовка — 502px: фото занимает две трети первого экрана. Unbounded
   шире Onest примерно на 30%, и при 47px строка «специалисты для» (530px) не
   умещалась — `text-wrap: balance` роняла «для» отдельной строкой, и заголовок
   разъезжался на пять строк. При 42px «специалисты для» — 469px, «крупных
   проектов» — 481px, заголовок складывается в три строки. */
html:root[data-theme] #home.hero .hero-title {
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif !important;
  font-size: clamp(1.7rem, 2.9vw, 2.65rem) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.045em !important;
}

/* Крупные числа фактов шли тем же несуществующим Manrope. Ведём их за
   `.stat-number`, который уже в семействе заголовков. */
html:root[data-theme] .fact-value {
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif !important;
  letter-spacing: -0.035em !important;
}

/* Цитаты отзывов — четвёртая гарнитура на весь сайт, тоже незагруженная.
   Возвращаем в основной текстовый шрифт: голос цитаты держат кегль и
   интерлиньяж, а не отдельное семейство. */
html:root[data-theme] .testimonials .testimonial-card blockquote {
  font-family: "Onest", "Segoe UI", sans-serif !important;
}

/* Трекинг у подзаголовков 32px был нулевым, тогда как у соседних h3 того же
   кегля — −0.04em. Один размер обязан иметь один трекинг. */
html:root[data-theme] :is(
  #partners .rep-network-copy h3,
  #partners .partners-head,
  #about .about-events-title,
  #about .about-social-title
) {
  letter-spacing: -0.035em !important;
}

/* Название вакансии — заголовок, а шло с текстовым интерлиньяжем 1.42. */
html:root[data-theme] #jobs .vacancy-card .vacancy-title {
  line-height: 1.18 !important;
}

/* Тот же несуществующий Manrope стоял ещё в 42 объявлениях — 58 элементов на
   странице рисовались шрифтом системы: Segoe UI на Windows, San Francisco на
   Mac, Roboto на Android. Сайт выглядел по-разному на разных устройствах, и
   заметить это на одной машине невозможно. Все 42 переведены на "Onest" прямо
   в объявлениях, а не новым слоем поверх: иначе к каждому пришлось бы
   подбирать перебивающий селектор.

   Заголовки блоков среди них — по роли заголовки, поэтому идут в Unbounded
   вместе с остальными. */
html:root[data-theme] :is(.event-title, .fact-title) {
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif !important;
  letter-spacing: -0.03em !important;
}

/* ==========================================================================
   Отделка v80 — страны в блоке «География» стали ссылками.

   На страницы направлений вела одна строчка в подвале, куда никто не
   доскроллит. Блок «География и партнёры» перечисляет ровно те же восемь
   стран — теперь каждая ведёт на свою страницу, а пункт меню называется
   «География», а не «Партнёры»: соискателю нужна страна, а не список
   контрагентов.
   ========================================================================== */

html:root[data-theme] .geo-countries li:has(> .geo-country-link) {
  padding: 0;
}

html:root[data-theme] .geo-country-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit !important;
  text-decoration: none;
  border-radius: var(--radius-edge, 4px);
  transition: color 200ms var(--ease-out-expo);
}

/* Подчёркивание рисуем сами: у ссылки внутри flex-строки штатное
   text-decoration проходит и под флагом. */
html:root[data-theme] .geo-country-link > span {
  position: relative;
  color: inherit !important;
}

html:root[data-theme] .geo-country-link > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] .geo-country-link:hover {
    color: var(--color-primary) !important;
  }
  html:root[data-theme] .geo-country-link:hover > span::after {
    transform: scaleX(1);
  }
}

html:root[data-theme] .geo-country-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* На тач-устройствах ховера нет — там ссылку выдаёт постоянное подчёркивание
   в четверть силы, иначе страна выглядит обычным пунктом списка. */
@media (hover: none) {
  html:root[data-theme] .geo-country-link > span::after {
    transform: scaleX(1);
    opacity: 0.35;
  }
}

/* Карточки городов на карте координаторов стали ссылками на страницы Астаны
   и Шымкента: раньше эти две страницы были доступны только из карты сайта.
   Карточка строилась как div, поэтому ссылке нужно вернуть блочность и снять
   подчёркивание. */
html:root[data-theme] a.rep-city {
  display: block;
  color: inherit !important;
  text-decoration: none;
  transition: transform 200ms var(--ease-out-expo), box-shadow 200ms var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] a.rep-city:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.45);
  }
  html:root[data-theme] a.rep-city:hover strong {
    color: var(--color-primary) !important;
  }
}

html:root[data-theme] a.rep-city:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ==========================================================================
   Отделка v82 — страна читается как переход, а не как ярлык.

   В v80 ссылка получила подчёркивание по ховеру, но на экране это по-прежнему
   выглядело мелкой плашкой: человек не понимал, что по ней можно перейти.
   Теперь у каждой страны размер обычного элемента управления, стрелка справа
   и отклик на наведение — те же приёмы, что у кнопок на главной.
   ========================================================================== */

html:root[data-theme] #partners .geo-countries {
  gap: 8px !important;
}

html:root[data-theme] #partners .geo-countries li:has(> .geo-country-link) {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

html:root[data-theme] .geo-country-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--ctl-h-sm, 38px);
  padding: 0 12px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-edge, 4px);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-text) !important;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 200ms var(--ease-out-expo),
    background-color 200ms var(--ease-out-expo),
    transform 200ms var(--ease-out-expo);
}

/* Стрелка занимает место всегда, поэтому карточка не дёргается по ховеру. */
html:root[data-theme] .geo-country-go {
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  color: var(--color-text-muted);
  transition:
    transform 220ms var(--ease-out-expo),
    color 200ms var(--ease-out-expo);
}

/* Подчёркивание из v80 больше не нужно: роль ссылки объясняют размер,
   рамка и стрелка. Гасим, чтобы не спорило со стрелкой. */
html:root[data-theme] .geo-country-link > span::after {
  content: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] .geo-country-link:hover {
    transform: translateY(-1px);
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  }
  html:root[data-theme] .geo-country-link:hover .geo-country-go {
    transform: translateX(3px);
    color: var(--color-primary);
  }
}

html:root[data-theme] .geo-country-link:active {
  transform: translateY(0);
}

html:root[data-theme] .geo-country-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Подпись над рядом объясняет, что это ссылки: на телефоне ховера нет,
   и без слова человек по-прежнему видит только плашки. */
html:root[data-theme] #partners .geo-content > .geo-countries::before {
  content: none;
}

@media (max-width: 760px) {
  html:root[data-theme] .geo-country-link {
    min-height: var(--ctl-h, 44px);
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   Отделка v83 — глобус в блоке «География и партнёры».

   Под тремя колонками стран оставалась пустота на пол-экрана, а сам блок
   ничем не отличался от обычного списка. Теперь слева вращается каркасный
   глобус с маршрутами от Лисаковска к каждой стране, справа — тот же список
   ссылок. Список остаётся основным способом перехода: при выключенном JS
   канвас пуст, но страны по-прежнему кликаются.
   ========================================================================== */

html:root[data-theme] #partners .geo-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 40px;
  align-items: center;
}

html:root[data-theme] #partners .geo-globe-wrap {
  position: relative;
  min-width: 0;
}

html:root[data-theme] #partners #geoGlobe {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 460px;
  touch-action: pan-y;   /* вертикальную прокрутку страницы не перехватываем */
}

html:root[data-theme] #partners .geo-globe-hint {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  text-align: center;
  opacity: 0.75;
}

/* Глобус и список подсвечивают друг друга: навёл на метку — засветилась
   карточка, навёл на карточку — засветилась метка. */
html:root[data-theme] .geo-country-link.is-globe-hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

html:root[data-theme] .geo-country-link.is-globe-hover .geo-country-go {
  transform: translateX(3px);
  color: var(--color-primary);
}

/* На узких экранах шар уходит наверх и уменьшается: он украшение,
   а список — рабочая часть. */
@media (max-width: 900px) {
  html:root[data-theme] #partners .geo-stage {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  html:root[data-theme] #partners #geoGlobe { max-height: 320px; }
}

@media (max-width: 560px) {
  html:root[data-theme] #partners #geoGlobe { max-height: 250px; }
}

/* Движение отключено — шар остаётся, но стоит: приём есть, укачивания нет. */
@media (prefers-reduced-motion: reduce) {
  html:root[data-theme] #partners .geo-globe-hint { display: none; }
}

/* Справа от глобуса три колонки сжимались до 230px, и заголовки групп
   переносились на две строки. Внутри сцены группы идут строками: заголовок
   слева, страны справа — ширина используется, а не тратится на переносы. */
html:root[data-theme] #partners .geo-stage .geo {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 22px !important;
}

html:root[data-theme] #partners .geo-stage .geo-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 18px;
  align-items: start;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

html:root[data-theme] #partners .geo-stage .geo-item > .geo-index {
  grid-row: 1;
  padding-top: 2px;
}

html:root[data-theme] #partners .geo-stage .geo-content {
  display: grid;
  grid-template-columns: minmax(140px, 0.55fr) minmax(0, 1.45fr);
  gap: 8px 20px;
  align-items: start;
}

html:root[data-theme] #partners .geo-stage .geo-title {
  margin: 0 !important;
  padding-top: 7px;
}

@media (max-width: 900px) {
  html:root[data-theme] #partners .geo-stage .geo-content {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ==========================================================================
   Отделка v85 — глобус занимает блок целиком.

   Выбор страны переехал на сам шар, поэтому колонки с названиями и кнопками
   справа больше не нужны. Из разметки они НЕ удалены: это единственные
   текстовые ссылки на страницы направлений внутри блока, и по ним ходит
   поисковик. Скрыты визуально, но остаются в потоке фокуса — при переходе
   табом всплывают, иначе с клавиатуры на страну было бы не попасть.
   ========================================================================== */

html:root[data-theme] #partners .geo-stage {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  justify-items: center;
}

html:root[data-theme] #partners .geo-globe-wrap {
  width: 100%;
  max-width: 680px;
}

html:root[data-theme] #partners #geoGlobe {
  max-height: none !important;
}

html:root[data-theme] #partners .geo-globe-hint {
  margin-top: 10px;
  font-size: 0.86rem;
}

/* Список стран: с экрана убран, для программ чтения и обхода — на месте. */
html:root[data-theme] #partners .geo-stage .geo {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
}

/* Дошли табом — показываем нормальным списком поверх шара. */
html:root[data-theme] #partners .geo-stage .geo:focus-within {
  position: static !important;
  width: auto;
  height: auto;
  margin: 24px 0 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

@media (max-width: 900px) {
  html:root[data-theme] #partners .geo-globe-wrap { max-width: 460px; }
}

/* ==========================================================================
   Фирменная векторная карта маршрута к офису WORKUP (Лисаковск, ТОЦ OLE)
   ========================================================================== */
.contact-map-vector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.contact-map-switch {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.contact-map-tab {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font-family: "Onest", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}

.contact-map-tab.active {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(3, 105, 161, 0.35);
}

.contact-map iframe {
  display: none;
}

.contact-map.is-yandex-active iframe {
  display: block;
  z-index: 4;
}

.contact-map.is-yandex-active .contact-map-vector {
  display: none;
}

/* ==========================================================================
   Отделка v86 — схема проезда масштабируется и двигается.

   Схема перерисована по настоящим улицам (OpenStreetMap) с двумя въездами —
   с Мира и с Комсомольской. Раньше это был рисунок от руки с маршрутом из
   пяти точек. Здесь — обвязка: слой, внутри которого картинку можно
   приближать колесом и таскать, как на настоящей карте.
   ========================================================================== */

html:root[data-theme] .contact-map-zoom {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: inherit;
  cursor: grab;
  touch-action: pan-y;   /* вертикальную прокрутку страницы не перехватываем */
}

html:root[data-theme] .contact-map-zoom.is-dragging { cursor: grabbing; }

html:root[data-theme] .contact-map-zoom .contact-map-vector {
  transform-origin: center center;
  will-change: transform;
  transition: transform 120ms var(--ease-out-expo);
}

/* Пока тащим — без сглаживания, иначе картинка «плывёт» за курсором. */
html:root[data-theme] .contact-map-zoom.is-dragging .contact-map-vector {
  transition: none;
}

html:root[data-theme] .contact-map-zoom-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: grid;
  gap: 6px;
}

html:root[data-theme] .map-zoom-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-edge, 4px);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  color: var(--color-text);
  font: 600 16px/1 Onest, system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 200ms var(--ease-out-expo), color 200ms var(--ease-out-expo);
}

html:root[data-theme] .map-zoom-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

html:root[data-theme] .map-zoom-btn:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Подсказка нужна один раз: как только человек приблизил — она уходит. */
html:root[data-theme] .contact-map-zoom-hint {
  position: absolute;
  left: 10px;
  bottom: 12px;
  z-index: 3;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-edge, 4px);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  color: var(--color-text-muted);
  font-size: 0.76rem;
  backdrop-filter: blur(6px);
  transition: opacity 260ms var(--ease-out-expo);
}

html:root[data-theme] .contact-map-zoom.is-zoomed .contact-map-zoom-hint {
  opacity: 0;
  pointer-events: none;
}

/* В режиме Яндекс-карты наш слой не мешает. */
html:root[data-theme] .contact-map.is-yandex-active .contact-map-zoom {
  display: none;
}

@media (max-width: 600px) {
  html:root[data-theme] .contact-map-zoom-hint { display: none; }
}

/* Пропорции схемы теперь совпадают со слотом, поэтому cover больше не нужен:
   он растягивал картинку крупнее рамки, и расчёт границ перетаскивания
   получался неверным — карта не двигалась или дёргалась. */
html:root[data-theme] .contact-map-zoom .contact-map-vector {
  object-fit: contain !important;
}

/* Курсор «схватить» показываем только когда есть что двигать. */
html:root[data-theme] .contact-map-zoom { cursor: default; }
html:root[data-theme] .contact-map-zoom.is-pannable { cursor: grab; }
html:root[data-theme] .contact-map-zoom.is-pannable.is-dragging { cursor: grabbing; }

/* ==========================================================================
   Отделка v88 — меню направлений в шапке главной.

   Семнадцать внутренних страниц были доступны только из подвала: человек
   доходил до конца главной, чтобы увидеть список стран. Теперь они в шапке,
   рядом с пунктом «География», к которому относятся по смыслу.
   ========================================================================== */

html:root[data-theme] #siteNav .nav-drop { position: relative; }

html:root[data-theme] .nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 200ms var(--ease-out-expo);
}

html:root[data-theme] .nav-drop:hover .nav-drop-btn,
html:root[data-theme] .nav-drop.is-open .nav-drop-btn { color: var(--color-primary); }

html:root[data-theme] .nav-drop-arrow {
  width: 11px;
  height: 8px;
  transition: transform 220ms var(--ease-out-expo);
}

html:root[data-theme] .nav-drop:hover .nav-drop-arrow,
html:root[data-theme] .nav-drop.is-open .nav-drop-arrow { transform: rotate(180deg); }

html:root[data-theme] .nav-drop-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(3, minmax(155px, 1fr));
  gap: 22px;
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 6px);
  background: var(--color-surface);
  box-shadow: 0 26px 52px -26px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms var(--ease-out-expo),
    transform 240ms var(--ease-out-expo),
    visibility 240ms;
}

html:root[data-theme] .nav-drop:hover .nav-drop-panel,
html:root[data-theme] .nav-drop:focus-within .nav-drop-panel,
html:root[data-theme] .nav-drop.is-open .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

html:root[data-theme] .nav-drop-title {
  display: block;
  margin-bottom: 9px;
  color: var(--color-text-muted) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html:root[data-theme] .nav-drop-col ul { margin: 0; padding: 0; list-style: none; }
html:root[data-theme] .nav-drop-col li + li { margin-top: 3px; }

html:root[data-theme] .nav-drop-col a {
  display: block;
  padding: 5px 8px;
  margin-left: -8px;
  border-radius: var(--radius-edge, 4px);
  color: var(--color-text) !important;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-out-expo), color 180ms var(--ease-out-expo);
}

html:root[data-theme] .nav-drop-col a:hover {
  color: var(--color-primary) !important;
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

/* В выехавшей шторке на телефоне выпадающий список разворачиваем на месте:
   всплывающая панель поверх шторки перекрывала бы саму шторку. */
@media (max-width: 980px) {
  html:root[data-theme] .nav-drop-panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
    box-shadow: none;
  }
  html:root[data-theme] .nav-drop.is-open .nav-drop-panel {
    display: grid;
    transform: none;
  }
  html:root[data-theme] .nav-drop:hover .nav-drop-panel { display: none; }
  html:root[data-theme] .nav-drop.is-open:hover .nav-drop-panel { display: grid; }
}

html:root[data-theme] .nav-drop-sub { margin-top: 16px; }

/* Выпадающее меню: панель сливалась с фоном, а третий столбец обрезал
   «Электромонтажником» — колонки были фиксированной ширины. Теперь колонки
   по содержимому, фон непрозрачный, а рамка и тень отделяют панель от
   страницы, даже когда под ней фотография. */
html:root[data-theme] .nav-drop-panel {
  grid-template-columns: repeat(3, max-content) !important;
  gap: 8px 30px !important;
  padding: 22px 26px !important;
  background: var(--color-surface) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, var(--color-border)) !important;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

html:root[data-theme] .nav-drop-col li + li { margin-top: 0 !important; }

html:root[data-theme] .nav-drop-col a {
  padding: 6px 9px !important;
  font-size: 0.9rem !important;
  line-height: 1.25 !important;
}

html:root[data-theme] .nav-drop-title {
  margin-bottom: 7px !important;
  font-size: 0.7rem !important;
}

/* ==========================================================================
   Отделка v91 — значок на наведении и разделы меню.

   1. Значки этапов и услуг при наведении становились нечитаемыми: плитка
      заливается акцентом, а цвет самого значка оставался приглушённым —
      тёмное на тёмно-синем. Виновато правило v77, которое гасило иконки:
      оно стоит позже и по специфичности перебивало ховер. Возвращаем чернила
      явно и с запасом по силе селектора.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] .process-card:hover .process-icon,
  html:root[data-theme] .process-card:hover .process-icon svg,
  html:root[data-theme] .service-card:hover .service-icon,
  html:root[data-theme] .service-card:hover .service-icon svg,
  html:root[data-theme] .fact-card:hover .fact-ico,
  html:root[data-theme] .fact-card:hover .fact-ico svg {
    color: var(--on-primary) !important;
    stroke: var(--on-primary) !important;
  }
}

/* Compact theme control: the visual state is carried by the sun/moon icon;
   the hidden label remains available to assistive technologies. */
.theme-toggle.inline {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  gap: 0 !important;
  flex: 0 0 44px;
}
.theme-toggle #themeLabel,
.theme-toggle .label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.theme-toggle .theme-icon {
  width: 20px;
  height: 20px;
}

/* Developer credit is deliberately transparent so the animated site
   background remains visible at the bottom of every page. */
.developer-credit {
  width: min(calc(100% - 40px), var(--content-width, 1180px));
  margin: 24px auto 0;
  padding: 18px 0 max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: .82rem;
  text-align: center;
}
.developer-credit__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--color-text) !important;
  text-decoration: none;
}
.developer-credit__mark {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(17, 217, 255, .38));
}
.developer-credit__studio { font-weight: 800; letter-spacing: .02em; }
.developer-credit__email { color: var(--color-text-muted); }
.developer-credit__link:hover .developer-credit__studio,
.developer-credit__link:focus-visible .developer-credit__studio { color: var(--color-primary-strong); }

@media (max-width: 560px) {
  .developer-credit,
  .developer-credit__link { flex-wrap: wrap; }
  .developer-credit { gap: 6px 9px; }
  .developer-credit__email { flex-basis: 100%; }
}

/* Kazakh CTA copy is naturally longer. Keep the two buttons equally wide,
   but allow whole-word wrapping instead of clipping the final word. */
html[data-language="kk"] #home.hero .hero-btns > a {
  min-height: 60px !important;
  white-space: normal !important;
}
html[data-language="kk"] #home.hero .hero-btns .btn-label,
html[data-language="kk"] #home.hero .hero-btns .btn-label > span,
html[data-language="kk"] #home.hero .hero-btns .btn-label::after {
  white-space: normal !important;
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* 2. Разделы меню — акцентом, а не серым: они были едва отличимы от пунктов.
      Колонок теперь четыре, «Полезное» больше не висит подзаголовком внутри
      третьей — из-за него ряды не совпадали по высоте между колонками. */
html:root[data-theme] .nav-drop-panel {
  grid-template-columns: repeat(4, max-content) !important;
  gap: 0 34px !important;
  align-items: start;
}

html:root[data-theme] .nav-drop-title {
  color: var(--color-primary) !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}

html:root[data-theme] .nav-drop-sub { display: none !important; }

html:root[data-theme] .nav-drop-col a {
  padding: 7px 9px !important;
  line-height: 1.2 !important;
}

/* Пункт меню: высота приходила от общего правила тап-целей (44px), а текст
   прижимался к верху — снизу оставалась пустота. Центрируем содержимое и
   возвращаем скругление к общему токену: капсула на 999px спорила с
   геометрией сайта, где у кнопок и чипов 4dp. */
html:root[data-theme] .nav-drop-col a {
  display: flex !important;
  align-items: center;
  min-height: 32px !important;
  border-radius: var(--radius-edge, 4px) !important;
  padding: 4px 9px !important;
}

@media (hover: none) {
  html:root[data-theme] .nav-drop-col a { min-height: 40px !important; }
}

/* Пункт «Направления» добавил в шапку ещё 126px, и меню перестало помещаться:
   «О нас» переносилось на две строки, «Контакты» обрезались. Ужимаем интервал
   и кегль, переносы в пунктах запрещаем. */
@media (min-width: 981px) {
  html:root[data-theme] #siteNav {
    gap: 13px !important;
    font-size: 0.97rem !important;
  }
  html:root[data-theme] #siteNav > a,
  html:root[data-theme] #siteNav .nav-drop-btn {
    white-space: nowrap !important;
    font-size: 0.97rem !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  html:root[data-theme] #siteNav {
    gap: 10px !important;
    font-size: 0.92rem !important;
  }
  html:root[data-theme] #siteNav > a,
  html:root[data-theme] #siteNav .nav-drop-btn { font-size: 0.92rem !important; }
}

/* --- v95: полоса призыва с видеофоном ----------------------------------------
   Ролик — кадрированная ячейка сгенерированного коллажа, исходник 327x225.
   Растянуть такое без обработки нельзя, поэтому сверху лежат затемняющая
   шторка и размытие в полтора пикселя: мягкость читается как воздух, а не
   как плохое качество. Склейка «туда-обратно» даёт петлю без стыка.
   Полоса тёмная в обеих темах, поэтому цвета внутри заданы явно, а не
   токенами, которые переворачиваются ночью. */
html:root[data-theme] .cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);
  padding: clamp(56px, 7vw, 104px) 20px;
  background: #081420;
  text-align: center;
}

html:root[data-theme] .cta-band-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* небольшое приближение прячет кайму, которую даёт размытие по краю кадра */
  transform: scale(1.06);
  filter: blur(1.5px) saturate(0.88);
}

html:root[data-theme] .cta-band-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 16, 26, 0.82) 0%, rgba(6, 16, 26, 0.5) 46%, rgba(6, 16, 26, 0.84) 100%),
    radial-gradient(115% 78% at 50% 52%, rgba(6, 16, 26, 0.16), rgba(6, 16, 26, 0.7));
}

html:root[data-theme] .cta-band-inner {
  width: min(calc(100% - 32px), 720px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

html:root[data-theme] .cta-band-kicker {
  color: #7dd3fc !important;
}

html:root[data-theme] .cta-band h2 {
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .08em .28em;
  color: #ffffff !important;
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif !important;
  font-size: clamp(1.65rem, 3.2vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.055em;
  text-wrap: balance;
  perspective: 700px;
}

html:root[data-theme] .cta-band h2 .cta-title-part {
  display: inline-block;
  color: transparent !important;
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 20px rgba(0, 13, 30, .42));
  animation: cta-title-colors 5.6s ease-in-out infinite alternate, cta-title-depth 4.2s ease-in-out infinite;
}

html:root[data-theme] .cta-band h2 .cta-title-part--first {
  background-image: linear-gradient(100deg, #ffffff 0%, #7ddcff 38%, #28b8ff 68%, #9cf4ff 100%);
}

html:root[data-theme] .cta-band h2 .cta-title-part--second {
  background-image: linear-gradient(100deg, #5cf2af 0%, #66e3d2 30%, #8d86ff 68%, #d18cff 100%);
  animation-direction: alternate-reverse, normal;
  animation-delay: -.8s, -.45s;
}

@keyframes cta-title-colors {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes cta-title-depth {
  0%, 100% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-3px) rotateX(2.5deg); }
}

html:root[data-theme] .cta-band-lead {
  margin: 0 !important;
  max-width: 56ch;
  color: rgba(233, 244, 251, 0.86) !important;
  font-size: 1.02rem !important;
  line-height: 1.6 !important;
}

html:root[data-theme] .cta-band-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* Запасная кнопка на тёмном не должна быть белой плашкой: белое пятно
   перетягивает внимание с основного действия. Стекло с белым кантом. */
html:root[data-theme] .cta-band .btn-outline {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  backdrop-filter: blur(6px);
}

html:root[data-theme] .cta-band .btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

@media (max-width: 760px) {
  html:root[data-theme] .cta-band {
    padding: 52px 16px;
  }

  html:root[data-theme] .cta-band-btns .btn-primary,
  html:root[data-theme] .cta-band-btns .btn-outline {
    width: 100%;
  }
}

/* Меньше движения — показываем постер и глушим приближение. */
@media (prefers-reduced-motion: reduce) {
  html:root[data-theme] .cta-band-video {
    transform: none;
  }

  html:root[data-theme] .cta-band h2 .cta-title-part {
    animation: none !important;
  }
}

/* Кнопки в полосе строятся по мерке первого экрана. Без явного размера
   значок внутри разъезжается до 300x150 — svg без width берёт собственный
   размер по умолчанию, и кнопка превращается в блок на пол-экрана. */
html:root[data-theme] .cta-band-btns a {
  min-height: 52px;
  gap: 9px;
  padding: 0 21px !important;
  font-size: 0.9rem !important;
}

html:root[data-theme] .cta-band-btns svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* v96: схема снова заполняет рамку.
   Слот меняет пропорции вместе с шириной окна — 1.04 на 1280, 1.26 на 1920
   и 1.78 на планшете, — а рисунок один и тот же, 880x848. При contain это
   давало пустые поля по бокам: на 1920 по 61 пикселю, на 900 — по 177.
   Возвращаем cover, а расчёт границ перетаскивания ниже теперь считает
   настоящий размер отрисованной картинки, а не размер блока: именно из-за
   этого cover в прошлый раз ломал сдвиг. */
html:root[data-theme] .contact-map-zoom .contact-map-vector {
  object-fit: cover !important;
  object-position: center !important;
}

/* v97: полоса выше, ролик — смена планов.
   Раньше при высоте 370 px от кадра 1.45:1 в ленте шириной 1920 оставалась
   полоска в 28% — читалось как обрезок. Высота 30vw держит видимой примерно
   44% кадра на любой ширине. Сам ролик пересобран: вместо склейки
   «туда-обратно» (её видно как перемотку) три сцены коллажа сменяют друг
   друга кроссфейдом, а половина последнего перехода перенесена в начало,
   поэтому стык петли приходится на середину сцены. */
html:root[data-theme] .cta-band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(400px, 30vw, 620px);
}

html:root[data-theme] .cta-band-video {
  filter: blur(1px) saturate(0.9);
}

/* ==========================================================================
   v99 — видео в первом экране и полоса призыва встык.

   Полоса стояла с полями 56 и 72 пикселя, и сверху с низу оставались просветы
   фона: выглядело так, будто ролик не дотягивается до края блока. Полоса
   полноширинная, поля ей не нужны.
   ========================================================================== */
html:root[data-theme] .cta-band {
  margin: 0 !important;
}

/* Первый экран с роликом. Ролик лежит ниже всего, поверх него вуаль, дальше
   сетка линий и текст. Вуаль плотнее слева, где стоит заголовок, и почти
   прозрачная справа, где снимок команды. */
html:root[data-theme] #home.hero--video {
  isolation: isolate;
  overflow: hidden;
  color: #f2f8fc;
}

html:root[data-theme] #home.hero--video .hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

html:root[data-theme] #home.hero--video .hero-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(5, 14, 24, 0.95) 0%,
      rgba(5, 14, 24, 0.9) 32%,
      rgba(5, 14, 24, 0.66) 60%,
      rgba(5, 14, 24, 0.48) 100%),
    linear-gradient(180deg, rgba(5, 14, 24, 0.45) 0%, rgba(5, 14, 24, 0.12) 40%, rgba(5, 14, 24, 0.66) 100%);
}

/* Подсветку-пятно и заливку панели гасим: они рассчитаны на светлый фон. */
html:root[data-theme] #home.hero--video::after {
  opacity: 0.35 !important;
}

/* Тексты первого экрана становятся светлыми в обеих темах — под роликом
   тёмно всегда, и дневная палитра здесь читаться перестала бы. */
html:root[data-theme] #home.hero--video .hero-brand-copy strong,
html:root[data-theme] #home.hero--video .hero-title-main,
html:root[data-theme] #home.hero--video .hero-trust li {
  color: #f2f8fc !important;
}

html:root[data-theme] #home.hero--video .hero-brand-copy span,
html:root[data-theme] #home.hero--video .hero-brand-since,
html:root[data-theme] #home.hero--video .hero-subtitle {
  color: #cfe2ef !important;
}

html:root[data-theme] #home.hero--video .hero-title-accent {
  color: #7dd3fc !important;
}

html:root[data-theme] #home.hero--video .hero-trust li svg {
  color: #7dd3fc !important;
  stroke: #7dd3fc !important;
}

html:root[data-theme] #home.hero--video .hero-brand-emblem {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Запасная кнопка на тёмном: стекло с белым кантом, а не белая плашка. */
html:root[data-theme] #home.hero--video .hero-btns .btn-outline {
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  backdrop-filter: blur(6px);
}

html:root[data-theme] #home.hero--video .hero-btns .btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.75) !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Заголовок красится через -webkit-text-fill-color: он перебивает color, и
   без него надпись оставалась тёмной на тёмном ролике. */
html:root[data-theme] #home.hero--video .hero-title .hero-title-main {
  color: #f2f8fc !important;
  -webkit-text-fill-color: #f2f8fc !important;
}

html:root[data-theme] #home.hero--video .hero-title .hero-title-accent {
  color: #7dd3fc !important;
  -webkit-text-fill-color: #7dd3fc !important;
}

/* Эмблема подставляет тёмный знак по дневной теме, а фон под роликом тёмный
   всегда. Перекрашиваем сам знак в белый, а не подменяем файл. */
html:root[data-theme] #home.hero--video .hero-brand-emblem img {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   v100 — подложка первого экрана во всю ширину, снимок полупрозрачный.

   Шапка — сетка шириной не больше 1440, и ролик обрывался по её краю: на
   широком мониторе по бокам оставался фон страницы. Растягиваем именно
   подложку, оставляя текст и снимок в прежней колонке. 100vw безопасен:
   на html стоит overflow-x: clip, горизонтальной прокрутки не будет.
   ========================================================================== */
html:root[data-theme] #home.hero--video {
  overflow: visible;
}

html:root[data-theme] #home.hero--video .hero-bg-video,
html:root[data-theme] #home.hero--video .hero-bg-scrim,
html:root[data-theme] #home.hero--video::after {
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  margin-left: -50vw !important;
}

/* Снимок команды приглушаем, чтобы ролик читался и под ним. Заодно снимаем
   заливку самой фигуры: без этого сквозь полупрозрачный снимок проступала
   бы она, а не видео. */
html:root[data-theme] #home.hero--video .hero-visual {
  background: transparent !important;
}

html:root[data-theme] #home.hero--video .hero-visual img {
  opacity: 0.72;
}

/* ==========================================================================
   v101 — снимок в шапке во всю высоту и до правого края экрана.

   Шапка центрирована, поэтому у абсолютно позиционированного потомка
   right: calc(50% - 50vw) как раз равен половине бокового поля со знаком
   минус — снимок доходит до края экрана на любой ширине, ничего не считая
   руками. Вынимаем его из сетки: колонка с текстом остаётся на своей
   дорожке, потому что дорожки задаёт grid-template-columns, а не содержимое.
   ========================================================================== */
@media (min-width: 1100px) {
  html:root[data-theme] #home.hero--video .hero-visual {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 44%;
    right: calc(50% - 50vw);
    width: auto;
    margin: 0;
    min-height: 0 !important;
  }

  html:root[data-theme] #home.hero--video .hero-visual img {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover;
  }
}

/* ==========================================================================
   v102 — «Мероприятия» и «Кадры с объектов»: полоса во всю ширину вместо
   карточек.

   Было шесть плиток с рамкой, скруглением и заливкой: снимок маленький,
   половина площади уходила под подложку с подписью. Стало — снимки встык во
   всю ширину экрана, подпись лежит на кадре, панель под курсором
   раздвигается за счёт соседних. Разметку не трогаем: те же figure с img и
   figcaption, меняются только стили.
   ========================================================================== */
html:root[data-theme] #about .about-events-grid {
  display: flex !important;
  gap: 2px !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  align-items: stretch;
}

html:root[data-theme] #about .event-card {
  position: relative;
  display: block !important;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(280px, 30vw, 520px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  /* Появление снизу вверх, порядок свойств важен: задержку ниже вешаем
     только на clip-path, иначе раскрытие по наведению тоже начнёт запаздывать. */
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 900ms var(--ease-out-expo),
    flex-grow 700ms var(--ease-out-expo);
}

html:root[data-theme] #about .about-events.visible .event-card {
  clip-path: inset(0 0 0 0);
}

html:root[data-theme] #about .about-events.visible .event-card:nth-child(2) {
  transition-delay: 130ms, 0s;
}

html:root[data-theme] #about .about-events.visible .event-card:nth-child(3) {
  transition-delay: 260ms, 0s;
}

html:root[data-theme] #about .event-card img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
  filter: brightness(0.78) saturate(0.92);
  transition: transform 900ms var(--ease-out-expo), filter 500ms var(--ease-out-expo);
}

/* Подпись лежит на кадре. Вуаль — только под самой подписью и градиентом,
   отдельной плашки нет. */
html:root[data-theme] #about .event-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 26px clamp(20px, 2vw, 34px) clamp(22px, 2.2vw, 30px);
  background: linear-gradient(180deg, rgba(5, 14, 24, 0) 0%, rgba(5, 14, 24, 0.62) 46%, rgba(5, 14, 24, 0.92) 100%);
  transform: translateY(6px);
  transition: transform 600ms var(--ease-out-expo);
}

html:root[data-theme] #about .event-card .event-index {
  display: block;
  margin: 0 0 10px;
  color: #7dd3fc !important;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

html:root[data-theme] #about .event-card .event-title {
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(1.02rem, 1.35vw, 1.32rem) !important;
  font-weight: 800;
  line-height: 1.22;
  text-wrap: balance;
}

/* Кант под заголовком раскрывается по наведению — вместо смены цвета. */
html:root[data-theme] #about .event-card .event-title::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin: 12px 0 0;
  background: #7dd3fc;
  transition: width 600ms var(--ease-out-expo);
}

html:root[data-theme] #about .event-card .event-place {
  display: block;
  margin: 12px 0 0;
  color: rgba(226, 240, 250, 0.86) !important;
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] #about .about-events-grid:hover .event-card {
    flex-grow: 0.82;
  }

  html:root[data-theme] #about .about-events-grid .event-card:hover {
    flex-grow: 1.7;
  }

  html:root[data-theme] #about .event-card:hover img {
    transform: scale(1.08);
    filter: brightness(0.92) saturate(1);
  }

  html:root[data-theme] #about .event-card:hover figcaption {
    transform: translateY(0);
  }

  html:root[data-theme] #about .event-card:hover .event-title::after {
    width: 52px;
  }

  /* Прежний «подскок» карточки конфликтует с раздвижением полосы. */
  html:root[data-theme] #about .event-card.hover-pop:hover {
    transform: none !important;
  }
}

/* Заголовок блока остаётся в колонке, полоса уходит на всю ширину — так
   видно, что это лента, а не ряд плиток. */
html:root[data-theme] #about .about-events-title {
  margin-bottom: clamp(20px, 2.4vw, 32px) !important;
}

@media (max-width: 860px) {
  html:root[data-theme] #about .about-events-grid {
    flex-direction: column;
    gap: 2px !important;
  }

  html:root[data-theme] #about .event-card {
    flex: none;
    height: clamp(210px, 46vw, 300px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root[data-theme] #about .event-card {
    clip-path: none;
    transition: none;
  }

  html:root[data-theme] #about .event-card img,
  html:root[data-theme] #about .event-card figcaption {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   v103 — значки на наведении: заливка снизу вверх и переворот.

   В v91 я красил рисунок в «чернила залитой поверхности» (--on-primary), но
   саму плитку не заливал. Днём выходило белое по почти белому (1.14:1),
   ночью — тёмное по тёмному (1.55:1). Замерено наведением настоящей мышью,
   вычисленные стили тут ничего не показывают: заливка идёт через color-mix.

   Теперь плитка действительно заливается акцентом, а рисунок берёт парные
   чернила: днём бирюза с белым, ночью светлая бирюза с тёмно-синим. Заливка
   поднимается снизу, рисунок в этот момент один раз переворачивается —
   состояние читается движением, а не сменой оттенка.
   ========================================================================== */
html:root[data-theme] .service-icon,
html:root[data-theme] .fact-ico {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

html:root[data-theme] .service-icon::before,
html:root[data-theme] .fact-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 520ms var(--ease-out-expo);
}

@keyframes icon-turn {
  0% { transform: rotateY(0deg) scale(1); }
  45% { transform: rotateY(-84deg) scale(0.92); }
  100% { transform: rotateY(0deg) scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] .service-card:hover .service-icon::before,
  html:root[data-theme] .fact-card:hover .fact-ico::before {
    transform: scaleY(1);
  }

  html:root[data-theme] .service-card:hover .service-icon,
  html:root[data-theme] .fact-card:hover .fact-ico {
    border-color: var(--color-accent) !important;
  }

  html:root[data-theme] .service-card:hover .service-icon svg,
  html:root[data-theme] .fact-card:hover .fact-ico svg {
    color: var(--on-accent) !important;
    stroke: var(--on-accent) !important;
    animation: icon-turn 620ms var(--ease-out-expo);
  }

  /* У этапов плитки нет — там фон прозрачный, заливать нечего. Рисунок
     просто берёт акцент и переворачивается вместе с остальными. */
  html:root[data-theme] .process-card:hover .process-icon,
  html:root[data-theme] .process-card:hover .process-icon svg {
    color: var(--color-accent) !important;
    stroke: var(--color-accent) !important;
  }

  html:root[data-theme] .process-card:hover .process-icon svg {
    animation: icon-turn 620ms var(--ease-out-expo);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root[data-theme] .service-icon::before,
  html:root[data-theme] .fact-ico::before {
    transition: none;
  }

  html:root[data-theme] .service-card:hover .service-icon svg,
  html:root[data-theme] .fact-card:hover .fact-ico svg,
  html:root[data-theme] .process-card:hover .process-icon svg {
    animation: none;
  }
}

/* ==========================================================================
   v104 — «Основные факты о компании»: ночной Стамбул во всю ширину и соты.

   Раздел шириной 1180 и центрирован, поэтому подложка выносится
   псевдоэлементом на 100vw — тем же приёмом, что и в первом экране.
   Снимок ночной и тёмный, значит блок тёмный в обеих темах: дневную палитру
   текста здесь переопределяем, иначе надписи пропадут.
   ========================================================================== */
html:root[data-theme] #facts {
  position: relative;
  isolation: isolate;
  color: #f2f8fc;
}

html:root[data-theme] #facts::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -2;
  background-image:
    linear-gradient(101deg,
      rgba(4, 11, 22, 0.985) 0%,
      rgba(4, 11, 22, 0.972) 36%,
      rgba(4, 11, 22, 0.82) 52%,
      rgba(4, 11, 22, 0.36) 70%,
      rgba(4, 11, 22, 0.14) 100%),
    url("assets/facts-istanbul.webp");
  background-size: cover, cover;
  background-position: center, right center;
  background-repeat: no-repeat, no-repeat;
}

/* Соты лежат между снимком и текстом. Клики не перехватывают: указатель
   слушает сам раздел. */
html:root[data-theme] #facts .facts-hex {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  z-index: -1;
  pointer-events: none;
}

/* Текст раздела — светлый в обеих темах. */
html:root[data-theme] #facts .section-kicker {
  color: #9fb9c9 !important;
}

html:root[data-theme] #facts h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html:root[data-theme] #facts .fact-index {
  color: #7dd3fc !important;
}

html:root[data-theme] #facts .fact-title {
  color: #9fb9c9 !important;
}

html:root[data-theme] #facts .fact-value {
  color: #ffffff !important;
}

html:root[data-theme] #facts .fact-sub {
  color: rgba(207, 226, 239, 0.82) !important;
}

html:root[data-theme] #facts .fact-card {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

html:root[data-theme] #facts .fact-ico {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #7dd3fc !important;
}

@media (max-width: 860px) {
  /* На узком экране снимок уходит за текст целиком — иначе город попадает
     под самый заголовок и мешает читать. */
  html:root[data-theme] #facts::before {
    background-image:
      linear-gradient(180deg, rgba(4, 11, 22, 0.96) 0%, rgba(4, 11, 22, 0.88) 100%),
      url("assets/facts-istanbul.webp");
    background-position: center, center;
  }
}

/* Заголовок и факты держим слева, как на макете: правая треть остаётся
   под снимок, иначе «Награда» ложится прямо на подсвеченную мечеть. */
@media (min-width: 861px) {
  html:root[data-theme] #facts .section-heading {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 640px;
    text-align: left !important;
  }

  html:root[data-theme] #facts .facts-grid {
    max-width: 68%;
  }
}

/* ==========================================================================
   v105 — подписи городов на карте снова в сетке.

   Когда карточка города стала ссылкой, я вернул ей display: block, хотя
   исходно она была grid с колонками 30px / 1fr. Сетка отключилась, дети
   стали строчными, а между тегами в разметке нет пробелов — получилось
   слитное «01АстанаЦентр и север».
   ========================================================================== */
html:root[data-theme] a.rep-city {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 2px 10px;
  align-items: center;
}

html:root[data-theme] a.rep-city > span {
  grid-row: 1 / span 2;
  align-self: start;
}

html:root[data-theme] a.rep-city strong,
html:root[data-theme] a.rep-city small {
  grid-column: 2;
  display: block;
}

/* ==========================================================================
   v106 — мозаика социальных снимков: параллакс от прокрутки и прожектор.

   Блок был статичным набором из трёх снимков. Оживляем двумя приёмами,
   которых на сайте больше нигде нет.

   Первый — параллакс внутри рамки: снимок берётся с запасом и едет по
   вертикали, пока блок проходит через экран. Сделано на scroll-driven
   анимациях (animation-timeline: view()) — без единой строчки JS и без
   обработчика прокрутки, который дёргал бы вёрстку на каждом кадре. Где
   браузер их не знает, всё остаётся как было: снимок просто стоит.

   Второй — прожектор: под курсором один снимок остаётся в цвете, соседние
   притухают. Внимание уводится туда, куда человек смотрит, а не растекается
   по трём кадрам сразу.
   ========================================================================== */
#about .about-social-grid .social-card img {
  transform: scale(1.14);
  transition: filter 500ms var(--ease-out-expo), opacity 500ms var(--ease-out-expo);
}

@supports (animation-timeline: view()) {
  @keyframes soc-drift-down {
    from { transform: translateY(-5.5%) scale(1.14); }
    to { transform: translateY(5.5%) scale(1.14); }
  }

  @keyframes soc-drift-up {
    from { transform: translateY(5%) scale(1.14); }
    to { transform: translateY(-5%) scale(1.14); }
  }

  #about .about-social-grid .social-card img {
    animation: soc-drift-down linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  /* Соседние кадры едут в другую сторону и слабее — иначе мозаика ползёт
     одним куском и параллакса не видно. */
  #about .about-social-grid .social-card:nth-child(2) img {
    animation-name: soc-drift-up;
  }

  #about .about-social-grid .social-card:nth-child(3) img {
    animation-name: soc-drift-down;
    animation-range: cover 6% cover 94%;
  }
}

@media (hover: hover) and (pointer: fine) {
  #about .about-social-grid:hover .social-card img {
    filter: grayscale(0.55) brightness(0.62);
  }

  #about .about-social-grid .social-card:hover img {
    filter: none;
  }

  /* Подпись у наведённого кадра выезжает, у остальных остаётся на месте. */
  #about .about-social-grid .social-card figcaption {
    transition: transform 520ms var(--ease-out-expo), opacity 400ms var(--ease-out-expo);
  }

  #about .about-social-grid:hover .social-card:not(:hover) figcaption {
    opacity: 0.45;
  }

  #about .about-social-grid .social-card:hover figcaption {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #about .about-social-grid .social-card img {
    animation: none !important;
    transform: scale(1.02);
    transition: none;
  }
}

/* ==========================================================================
   v107 — плитки партнёров разворачиваются каскадом.

   В разметке у каждой карточки уже стоял --partner-order, но в стилях он
   нигде не использовался. Берём его как номер в очереди: плитки не просто
   проявляются, а разворачиваются в трёхмерии — будто открывается стенд.
   Приём на сайте больше нигде не встречается, а движение идёт по одной
   диагонали, поэтому глаз читает его как один жест, а не шесть отдельных.
   ========================================================================== */
#partners .partners-ru {
  perspective: 1100px;
  perspective-origin: 50% 30%;
}

#partners .partners-ru .card {
  transform-origin: center bottom;
  transform: rotateX(-68deg) translateY(16px);
  opacity: 0;
  transition:
    transform 820ms var(--ease-out-expo),
    opacity 620ms var(--ease-out-expo);
  transition-delay: calc(var(--partner-order, 1) * 90ms);
}

#partners.visible .partners-ru .card {
  transform: rotateX(0deg) translateY(0);
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  /* Наведение чуть доворачивает плитку к зрителю. Прежний «подскок»
     hover-pop гасим: два разных сдвига одновременно читаются как дрожь. */
  #partners.visible .partners-ru .card:hover {
    transform: rotateX(4deg) rotateY(-3deg) translateY(-5px) !important;
    transition-delay: 0s;
  }

  #partners .partners-ru .card figcaption {
    transition: transform 480ms var(--ease-out-expo);
  }

  #partners .partners-ru .card:hover figcaption {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #partners .partners-ru .card,
  #partners.visible .partners-ru .card {
    transform: none !important;
    opacity: 1;
    transition: none;
  }
}

/* Подложка под знаком в шапке не нужна: на ролике прямоугольник читается
   как заплатка. Сам знак и так белый, ему хватает контраста. */
html:root[data-theme] #home.hero--video .hero-brand-emblem {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   v109 — значок этапа снова читается.

   В v103 я написал, что у этапов плитки нет, и покрасил рисунок в акцент.
   Плитка есть: на наведении она заливается --color-primary, и акцентный
   рисунок совпал с ней по цвету — вместо значка получался сплошной круг.
   Возвращаем парные чернила: днём белое на синем, ночью тёмно-синее на
   светлой бирюзе. Переворот при этом остаётся.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] .process-card:hover .process-icon,
  html:root[data-theme] .process-card:hover .process-icon svg {
    color: var(--on-primary) !important;
    stroke: var(--on-primary) !important;
  }
}

/* ==========================================================================
   v110 — партнёры едут лентой во всю ширину окна.

   Было шесть плиток в сетке на 12 колонок: снимки разной ширины, и cover
   срезал у двух больше половины кадра. В ленте у всех одна высота и одно
   соотношение 4:3 — ровно как у самих снимков, поэтому не теряется ничего.

   Движение — чистый CSS: дорожка шириной по содержимому едет влево на свою
   половину и начинается заново. Вторая половина плиток — копия первой,
   поэтому стыка не видно. Под курсором лента замирает: рассмотреть кадр
   важнее, чем продолжать движение.
   ========================================================================== */
html:root[data-theme] .partners-marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  /* края растворяются, иначе плитки обрубаются по границе экрана */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

html:root[data-theme] .partners-track {
  display: flex;
  width: max-content;
  gap: 14px;
  animation: partners-roll 52s linear infinite;
}

@keyframes partners-roll {
  from { transform: translateX(0); }
  /* минус половина дорожки и минус половина зазоров — ровно один набор */
  to { transform: translateX(calc(-50% - 7px)); }
}

html:root[data-theme] .partner-tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 24vw, 420px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  box-shadow: none;
  transition: transform 620ms var(--ease-out-expo), filter 500ms var(--ease-out-expo);
}

html:root[data-theme] .partner-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: inherit;
}

html:root[data-theme] .partner-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 30px 18px 16px;
  background: linear-gradient(180deg, rgba(5, 14, 24, 0) 0%, rgba(5, 14, 24, 0.86) 100%);
}

html:root[data-theme] .partner-tile figcaption span {
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

html:root[data-theme] .partner-tile figcaption strong {
  color: #ffffff;
  font-size: clamp(0.86rem, 1.1vw, 1.02rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}

@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] .partners-marquee:hover .partners-track {
    animation-play-state: paused;
  }

  html:root[data-theme] .partners-marquee:hover .partner-tile {
    filter: grayscale(0.5) brightness(0.62);
  }

  html:root[data-theme] .partners-marquee .partner-tile:hover {
    transform: scale(1.04);
    filter: none;
  }
}

/* Меньше движения — лента стоит, но её можно прокрутить пальцем или колесом. */
@media (prefers-reduced-motion: reduce) {
  html:root[data-theme] .partners-marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  html:root[data-theme] .partners-track {
    animation: none;
  }

  html:root[data-theme] .partner-tile {
    scroll-snap-align: start;
  }
}

/* Ссылка на полный список вакансий: страницы вакансий не должны быть
   сиротами — на них нужен путь и для человека, и для робота. */
html:root[data-theme] .vacancies-all-link {
  margin: 18px auto 0;
  text-align: center;
}

html:root[data-theme] .vacancies-all-link a {
  color: var(--color-primary) !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* Дата обновления вакансии: короткая строка под условиями, а не бейдж.
   Человеку важно, что список живой, но не важнее самой вакансии. */
html:root[data-theme] .vacancy-updated {
  margin: 14px 0 0;
  color: rgba(207, 226, 239, 0.7);
  font-size: 0.86rem;
}

/* ==========================================================================
   v113 — «Направления» в мобильном меню.

   Мобильные правила оформляли только прямые ссылки (#siteNav a), а
   «Направления» — это div с кнопкой и панелью. Пункт оставался без отступов,
   высоты и разделителя: выпадал из белой карточки и налезал на соседей.
   Оформляем его как остальные строки, а панель на узком экране раскрываем
   внутрь списка, а не поверх него.
   ========================================================================== */
@media (max-width: 960px) {
  html:root[data-theme] .header #siteNav .nav-drop {
    width: 100%;
    border-top: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent);
  }

  html:root[data-theme] .header #siteNav .nav-drop-btn {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 10px;
    background: transparent !important;
    color: var(--color-text) !important;
    font-size: 0.98rem;
    font-weight: 600;
  }

  html:root[data-theme] .header #siteNav .nav-drop-arrow {
    transition: transform 260ms var(--ease-out-expo);
  }

  html:root[data-theme] .header #siteNav .nav-drop.is-open .nav-drop-arrow {
    transform: rotate(180deg);
  }

  /* Панель раскрывается внутрь списка: поверх узкого экрана она не помещается
     и всё равно обрезалась бы краем карточки. */
  html:root[data-theme] .header #siteNav .nav-drop-panel {
    position: static !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 2px 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  html:root[data-theme] .header #siteNav .nav-drop.is-open .nav-drop-panel {
    display: grid !important;
  }

  html:root[data-theme] .header #siteNav .nav-drop-col {
    padding: 0;
  }

  html:root[data-theme] .header #siteNav .nav-drop-title {
    display: block;
    padding: 10px 14px 4px;
    color: var(--color-primary) !important;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  html:root[data-theme] .header #siteNav .nav-drop-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  html:root[data-theme] .header #siteNav .nav-drop-col a {
    min-height: 44px !important;
    padding: 0 14px 0 26px !important;
    border-top: 0 !important;
    font-weight: 500;
    font-size: 0.94rem !important;
  }
}

/* Раскрытые «Направления» делают список длиннее экрана, и он уезжал под
   шапку. Панель меню прокручивается внутри себя, шапка остаётся на месте. */
@media (max-width: 960px) {
  html:root[data-theme] .header #siteNav {
    max-height: calc(100svh - 96px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

/* Переезд с прежнего домена: строка в подвале. Людям — чтобы узнали агентство,
   поисковику — связь старого имени с новым. */
html:root[data-theme] .footer-moved {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  color: var(--color-text-muted) !important;
  font-size: 0.88rem;
  line-height: 1.55;
}

html:root[data-theme] .footer-moved strong {
  color: var(--color-text) !important;
}


/* Кант под заголовком раздела — из двух цветов этого же раздела.
   Правило выше по файлу красит его сплошным зелёным через !important,
   поэтому перебиваем тем же способом: иначе градиент не доедет. */
.section > h2::after,
.section-heading h2::after,
.section-title::after {
  content: "";
  display: block;
  width: 58px !important;
  height: 3px !important;
  margin: 18px auto 0 !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg,
    var(--section-tone-a, var(--color-primary)),
    color-mix(in srgb, var(--section-tone-b, var(--color-secondary)) 80%, transparent)) !important;
}

/* Числа в шапке — градиентом. Крупный кегль, поэтому порог контраста ниже,
   а оба стопа взяты тёмными на светлой теме и светлыми на тёмной. */
.stat-number {
  background: linear-gradient(120deg, var(--color-primary), #0d9488 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-primary);
}

html[data-theme="dark"] .stat-number {
  background: linear-gradient(120deg, var(--color-primary), #5eead4 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Диаграмма — единственное место, где много цветов уместно: это данные,
   а не оформление. Строка отличается от строки цветом, а не только длиной. */
.bars .bar:nth-child(1) .bar-fill { background: linear-gradient(90deg, #0369a1, #38bdf8); }
.bars .bar:nth-child(2) .bar-fill { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.bars .bar:nth-child(3) .bar-fill { background: linear-gradient(90deg, #6366f1, #a5b4fc); }
.bars .bar:nth-child(4) .bar-fill { background: linear-gradient(90deg, #7c3aed, #c4b5fd); }
.bars .bar:nth-child(5) .bar-fill { background: linear-gradient(90deg, #d97706, #fbbf24); }
.bars .bar:nth-child(6) .bar-fill { background: linear-gradient(90deg, #0891b2, #67e8f9); }

/* Юридическое лицо в подвале. */
.footer-bottom a.footer-legal {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s cubic-bezier(.16,1,.3,1);
}

.footer-bottom a.footer-legal:hover { border-bottom-color: currentColor; }

/* ========================================================================== 
   v116 — цветовая режиссура главной.

   Вместо одного голубого фона разделы получают собственный спокойный тон:
   бирюзовый — доверие и сопровождение, индиго — процесс и география,
   янтарный — живые отзывы. Цвет остаётся фоном, а не заменяет иерархию.
   Световое пятно следует за курсором через переменные из script.js.
   ========================================================================== */

html:root[data-theme] body.home-page {
  --home-ocean: #0369a1;
  --home-sky: #0ea5e9;
  --home-teal: #0d9488;
  --home-indigo: #4f46e5;
  --home-violet: #7c3aed;
  --home-amber: #d97706;
  background-color: #edf6fb !important;
  background-image:
    radial-gradient(62rem 36rem at -8% 8%, rgba(14, 165, 233, .11), transparent 68%),
    radial-gradient(58rem 34rem at 108% 32%, rgba(13, 148, 136, .09), transparent 70%),
    linear-gradient(180deg, #f7fbfd 0%, #edf6fb 46%, #f4f7ff 100%) !important;
  background-attachment: fixed, fixed, fixed;
}

html:root[data-theme="dark"] body.home-page {
  --home-ocean: #38bdf8;
  --home-sky: #7dd3fc;
  --home-teal: #5eead4;
  --home-indigo: #818cf8;
  --home-violet: #c4b5fd;
  --home-amber: #fbbf24;
  background-color: #04111c !important;
  background-image:
    radial-gradient(68rem 42rem at -10% 8%, rgba(14, 165, 233, .15), transparent 70%),
    radial-gradient(62rem 40rem at 108% 35%, rgba(124, 58, 237, .12), transparent 72%),
    linear-gradient(180deg, #071824 0%, #04111c 52%, #071321 100%) !important;
}

body.home-page main {
  position: relative;
  isolation: isolate;
}

/* Hero остаётся кинематографичным, но поверх видео появляется фирменная
   сине-бирюзовая атмосфера. Обе радиальные засветки имеют большой радиус:
   на широком экране они не заканчиваются резким краем. */
html:root[data-theme] body.home-page #home.hero--video .hero-bg-scrim {
  background:
    radial-gradient(48rem circle at var(--spot-x, 76%) var(--spot-y, 34%), rgba(56, 189, 248, .19), transparent 64%),
    radial-gradient(58rem 38rem at 8% 108%, rgba(124, 58, 237, .18), transparent 68%),
    linear-gradient(90deg,
      rgba(4, 17, 29, .97) 0%,
      rgba(5, 24, 39, .92) 34%,
      rgba(4, 22, 35, .68) 62%,
      rgba(3, 15, 26, .5) 100%),
    linear-gradient(180deg, rgba(4, 14, 24, .42), rgba(4, 18, 31, .18) 44%, rgba(3, 13, 23, .78));
}

html:root[data-theme] body.home-page #home.hero--video::after {
  opacity: .82 !important;
  background:
    radial-gradient(34rem circle at var(--spot-x, 72%) var(--spot-y, 30%), rgba(14, 165, 233, .18), transparent 72%),
    linear-gradient(115deg, rgba(34, 211, 238, .06), transparent 38%, rgba(94, 234, 212, .08)) !important;
  mix-blend-mode: screen;
}

html:root[data-theme] body.home-page #home .hero-title-accent {
  color: #7dd3fc !important;
  text-shadow: 0 0 2.2rem rgba(14, 165, 233, .18);
}

html:root[data-theme] body.home-page #home .hero-title-accent::after {
  background: linear-gradient(90deg, #38bdf8 0%, #2dd4bf 58%, #818cf8 100%) !important;
  box-shadow: 0 .35rem 1.5rem rgba(45, 212, 191, .22);
}

/* Общий световой движок. Координаты меняются только на точном указателе;
   на телефоне остаётся статичная, аккуратно скомпонованная версия. */
html:root[data-theme] body.home-page :is(
  .stats,
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) {
  --section-pointer-x: var(--section-anchor-x, 14%);
  --section-pointer-y: var(--section-anchor-y, 10%);
  background-color: var(--section-surface) !important;
  background-image:
    radial-gradient(42rem circle at var(--section-pointer-x) var(--section-pointer-y), color-mix(in srgb, var(--section-tone-a) 20%, transparent) 0%, transparent 72%),
    radial-gradient(70rem 44rem at var(--section-orb-x, 104%) var(--section-orb-y, 104%), color-mix(in srgb, var(--section-tone-b) 13%, transparent) 0%, transparent 70%),
    linear-gradient(142deg, color-mix(in srgb, var(--section-tone-a) 3.5%, var(--section-surface)) 0%, var(--section-surface) 48%, color-mix(in srgb, var(--section-tone-b) 4.5%, var(--section-surface)) 100%) !important;
  background-repeat: no-repeat !important;
  border-color: color-mix(in srgb, var(--section-tone-a) 22%, var(--color-border)) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .52),
    inset 0 -1px color-mix(in srgb, var(--section-tone-b) 12%, transparent) !important;
}

html:root[data-theme="dark"] body.home-page :is(
  .stats,
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) {
  background-image:
    radial-gradient(44rem circle at var(--section-pointer-x) var(--section-pointer-y), color-mix(in srgb, var(--section-tone-a) 17%, transparent) 0%, transparent 74%),
    radial-gradient(70rem 46rem at var(--section-orb-x, 104%) var(--section-orb-y, 104%), color-mix(in srgb, var(--section-tone-b) 13%, transparent) 0%, transparent 72%),
    linear-gradient(142deg, color-mix(in srgb, var(--section-tone-a) 4%, var(--section-surface)) 0%, var(--section-surface) 48%, color-mix(in srgb, var(--section-tone-b) 5%, var(--section-surface)) 100%) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .035),
    inset 0 -1px color-mix(in srgb, var(--section-tone-b) 18%, transparent) !important;
}

/* Светлая тема: у каждого раздела свой грунт, но насыщенность намеренно
   низкая — основным остаётся контент. */
body.home-page .stats {
  --section-tone-a: #0d9488; --section-tone-b: #0ea5e9;
  --section-surface: #eefbf9; --section-anchor-x: 9%; --section-anchor-y: 24%;
  --section-orb-x: 94%; --section-orb-y: 82%;
}
body.home-page #services {
  --section-tone-a: #0ea5e9; --section-tone-b: #4f46e5;
  --section-surface: #f0f9ff; --section-anchor-x: 86%; --section-anchor-y: 12%;
  --section-orb-x: 4%; --section-orb-y: 96%;
}
body.home-page .process-section {
  --section-tone-a: #6366f1; --section-tone-b: #0ea5e9;
  --section-surface: #f5f3ff; --section-anchor-x: 10%; --section-anchor-y: 18%;
}
body.home-page #employment {
  --section-tone-a: #0d9488; --section-tone-b: #0369a1;
  --section-surface: #effcf8; --section-anchor-x: 88%; --section-anchor-y: 16%;
  --section-orb-x: 8%; --section-orb-y: 94%;
}
body.home-page #jobs {
  --section-tone-a: #0369a1; --section-tone-b: #0d9488;
  --section-surface: #edf7ff; --section-anchor-x: 8%; --section-anchor-y: 7%;
}
body.home-page #partners {
  --section-tone-a: #7c3aed; --section-tone-b: #0891b2;
  --section-surface: #f6f2ff; --section-anchor-x: 91%; --section-anchor-y: 12%;
  --section-orb-x: 5%; --section-orb-y: 96%;
}
body.home-page .testimonials {
  --section-tone-a: #d97706; --section-tone-b: #7c3aed;
  --section-surface: #fff8eb; --section-anchor-x: 8%; --section-anchor-y: 16%;
}
body.home-page #about {
  --section-tone-a: #0891b2; --section-tone-b: #4f46e5;
  --section-surface: #effafd; --section-anchor-x: 92%; --section-anchor-y: 10%;
  --section-orb-x: 7%; --section-orb-y: 93%;
}
body.home-page #facts {
  --section-tone-a: #4f46e5; --section-tone-b: #0d9488;
  --section-surface: #f3f5ff; --section-anchor-x: 9%; --section-anchor-y: 18%;
}
body.home-page #contact {
  --section-tone-a: #0369a1; --section-tone-b: #7c3aed;
  --section-surface: #eef7ff; --section-anchor-x: 92%; --section-anchor-y: 12%;
  --section-orb-x: 8%; --section-orb-y: 95%;
}

/* Тёмная тема: те же отношения цветов, но без серой дымки и с более
   глубокими поверхностями. */
html[data-theme="dark"] body.home-page .stats { --section-surface: #071d22; }
html[data-theme="dark"] body.home-page #services { --section-surface: #071927; }
html[data-theme="dark"] body.home-page .process-section { --section-surface: #101329; }
html[data-theme="dark"] body.home-page #employment { --section-surface: #061d1d; }
html[data-theme="dark"] body.home-page #jobs { --section-surface: #071a29; }
html[data-theme="dark"] body.home-page #partners { --section-surface: #120f27; }
html[data-theme="dark"] body.home-page .testimonials { --section-surface: #20170d; }
html[data-theme="dark"] body.home-page #about { --section-surface: #071a22; }
html[data-theme="dark"] body.home-page #facts { --section-surface: #0d1426; }
html[data-theme="dark"] body.home-page #contact { --section-surface: #081725; }

/* Кикер и иконка берут цвет своего раздела. Текстовые абзацы не окрашиваем:
   контраст остаётся стабильным в обеих темах. */
html:root[data-theme] body.home-page :is(
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) .section-kicker {
  color: color-mix(in srgb, var(--section-tone-a) 88%, var(--color-text)) !important;
}

html:root[data-theme] body.home-page :is(
  #services .service-icon,
  .process-section .process-icon,
  #facts .fact-ico
) {
  color: var(--section-tone-a) !important;
  border-color: color-mix(in srgb, var(--section-tone-a) 36%, var(--color-border)) !important;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--section-tone-a) 12%, var(--color-surface)),
    color-mix(in srgb, var(--section-tone-b) 8%, var(--color-surface))) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--section-tone-a) 12%, transparent);
}

/* Секции остаются плоскими, но активные элементы получают локальную цветную
   глубину. Никаких новых лишних округлённых подложек. */
@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] body.home-page #services .service-card:hover,
  html:root[data-theme] body.home-page .process-section .process-card:hover,
  html:root[data-theme] body.home-page #facts .fact-card:hover {
    background: linear-gradient(145deg,
      color-mix(in srgb, var(--section-tone-a) 10%, transparent),
      color-mix(in srgb, var(--section-tone-b) 6%, transparent)) !important;
    box-shadow: inset 0 1px color-mix(in srgb, var(--section-tone-a) 24%, transparent) !important;
  }

  html:root[data-theme] body.home-page .testimonial-card:hover {
    border-color: color-mix(in srgb, var(--home-amber) 42%, var(--color-border)) !important;
    box-shadow: 0 18px 44px color-mix(in srgb, var(--home-amber) 12%, transparent) !important;
  }
}

/* Полоса действия связывает холодную и тёплую части страницы и потому
   получает более заметный, но тёмный градиент с белым текстом. */
html:root[data-theme] body.home-page .cta-band-scrim {
  background:
    radial-gradient(42rem circle at 18% 38%, rgba(14, 165, 233, .24), transparent 64%),
    radial-gradient(38rem circle at 86% 66%, rgba(124, 58, 237, .22), transparent 68%),
    linear-gradient(112deg, rgba(3, 16, 29, .95), rgba(6, 42, 58, .74) 48%, rgba(18, 14, 48, .9)) !important;
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  html:root[data-theme] body.home-page :is(
    .stats,
    #services,
    .process-section,
    #employment,
    #jobs,
    #partners,
    .testimonials,
    #about,
    #facts,
    #contact
  ) {
    --section-pointer-x: var(--section-anchor-x, 14%) !important;
    --section-pointer-y: var(--section-anchor-y, 10%) !important;
  }
}


/* ==========================================================================
   v116. Цвет карточки вакансии по специальности.
   ========================================================================== */

/* Оттенки категорий разведены по кругу: раньше industrial, machinery и
   electrical были тремя оттенками голубого и на глаз не различались. */
#jobs .vacancy-art--welding { --vacancy-art-accent: #f43f5e; }
#jobs .vacancy-art--machinery { --vacancy-art-accent: #84cc16; }
#jobs .vacancy-art--logistics { --vacancy-art-accent: #22c55e; }
#jobs .vacancy-art--pipeline { --vacancy-art-accent: #14b8a6; }
#jobs .vacancy-art--electrical { --vacancy-art-accent: #38bdf8; }
#jobs .vacancy-art--industrial { --vacancy-art-accent: #3b82f6; }
#jobs .vacancy-art--engineering { --vacancy-art-accent: #8b5cf6; }
#jobs .vacancy-art--height { --vacancy-art-accent: #d946ef; }
#jobs .vacancy-art--construction { --vacancy-art-accent: #f59e0b; }

/* Лицо карточки. Фотография остаётся: цветные слои ложатся поверх скримов,
   а не вместо них. Проценты подобраны так, чтобы текст не терял контраст. */
html:root[data-theme="light"] #jobs .vacancy-card::before {
  background:
    radial-gradient(128% 108% at 0% 0%, color-mix(in srgb, var(--vacancy-art-accent) 20%, transparent) 0%, transparent 62%),
    radial-gradient(118% 96% at 100% 100%, color-mix(in srgb, var(--vacancy-art-accent) 13%, transparent) 0%, transparent 60%),
    linear-gradient(90deg, rgba(248, 252, 255, .985) 0%, rgba(246, 251, 255, .955) 46%, rgba(239, 248, 253, .78) 72%, rgba(231, 244, 249, .69) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(239, 248, 253, .76)),
    var(--vacancy-art) right center / cover no-repeat !important;
}

html:root[data-theme="dark"] #jobs .vacancy-card::before {
  background:
    radial-gradient(128% 108% at 0% 0%, color-mix(in srgb, var(--vacancy-art-accent) 26%, transparent) 0%, transparent 64%),
    radial-gradient(118% 96% at 100% 100%, color-mix(in srgb, var(--vacancy-art-accent) 17%, transparent) 0%, transparent 62%),
    linear-gradient(90deg, rgba(5, 20, 34, .985) 0%, rgba(5, 21, 36, .955) 46%, rgba(5, 22, 37, .76) 72%, rgba(4, 18, 31, .64) 100%),
    linear-gradient(180deg, rgba(3, 15, 26, .08), rgba(3, 15, 26, .76)),
    var(--vacancy-art) right center / cover no-repeat !important;
}

/* Кант карточки — из своего же цвета, а не из общего акцента. */
#jobs .vacancy-card {
  background: conic-gradient(from var(--vacancy-angle),
    color-mix(in srgb, var(--vacancy-art-accent) 62%, var(--color-border)),
    var(--color-border) 30%,
    color-mix(in srgb, var(--vacancy-art-accent) 30%, var(--color-border)) 58%,
    var(--color-border) 80%,
    color-mix(in srgb, var(--vacancy-art-accent) 62%, var(--color-border))) !important;
}

/* Метка города — тем же цветом, что и номер вакансии. */
#jobs .vacancy-card .vacancy-location svg {
  color: color-mix(in srgb, var(--vacancy-art-accent) 76%, var(--color-text)) !important;
}




/* ==========================================================================
   v120. Оттенок карточки услуги и шага — через токены раздела.
   ========================================================================== */

/* Свой тон на каждую карточку. Значения светлой темы взяты темнее, тёмной —
   светлее: цвет тона идёт прямо в обводку знака, и один набор на обе темы
   обязательно провалился бы по контрасту на одной из них. */
body.home-page .service-card:nth-child(1) { --section-tone-a: #0284c7; --section-tone-b: #38bdf8; }
body.home-page .service-card:nth-child(2) { --section-tone-a: #4f46e5; --section-tone-b: #818cf8; }
body.home-page .service-card:nth-child(3) { --section-tone-a: #9333ea; --section-tone-b: #c084fc; }
body.home-page .service-card:nth-child(4) { --section-tone-a: #e11d48; --section-tone-b: #fb7185; }
body.home-page .service-card:nth-child(5) { --section-tone-a: #ea580c; --section-tone-b: #fb923c; }
body.home-page .service-card:nth-child(6) { --section-tone-a: #b45309; --section-tone-b: #f59e0b; }
body.home-page .service-card:nth-child(7) { --section-tone-a: #15803d; --section-tone-b: #22c55e; }
body.home-page .service-card:nth-child(8) { --section-tone-a: #0f766e; --section-tone-b: #14b8a6; }
body.home-page .process-card:nth-child(1) { --section-tone-a: #0369a1; --section-tone-b: #38bdf8; }
body.home-page .process-card:nth-child(2) { --section-tone-a: #4f46e5; --section-tone-b: #818cf8; }
body.home-page .process-card:nth-child(3) { --section-tone-a: #0891b2; --section-tone-b: #22d3ee; }
body.home-page .process-card:nth-child(4) { --section-tone-a: #0f766e; --section-tone-b: #14b8a6; }

html[data-theme="dark"] body.home-page .service-card:nth-child(1) { --section-tone-a: #38bdf8; --section-tone-b: #7dd3fc; }
html[data-theme="dark"] body.home-page .service-card:nth-child(2) { --section-tone-a: #a5b4fc; --section-tone-b: #c7d2fe; }
html[data-theme="dark"] body.home-page .service-card:nth-child(3) { --section-tone-a: #d8b4fe; --section-tone-b: #e9d5ff; }
html[data-theme="dark"] body.home-page .service-card:nth-child(4) { --section-tone-a: #fda4af; --section-tone-b: #fecdd3; }
html[data-theme="dark"] body.home-page .service-card:nth-child(5) { --section-tone-a: #fdba74; --section-tone-b: #fed7aa; }
html[data-theme="dark"] body.home-page .service-card:nth-child(6) { --section-tone-a: #fcd34d; --section-tone-b: #fde68a; }
html[data-theme="dark"] body.home-page .service-card:nth-child(7) { --section-tone-a: #86efac; --section-tone-b: #bbf7d0; }
html[data-theme="dark"] body.home-page .service-card:nth-child(8) { --section-tone-a: #5eead4; --section-tone-b: #99f6e4; }
html[data-theme="dark"] body.home-page .process-card:nth-child(1) { --section-tone-a: #38bdf8; --section-tone-b: #7dd3fc; }
html[data-theme="dark"] body.home-page .process-card:nth-child(2) { --section-tone-a: #a5b4fc; --section-tone-b: #c7d2fe; }
html[data-theme="dark"] body.home-page .process-card:nth-child(3) { --section-tone-a: #67e8f9; --section-tone-b: #a5f3fc; }
html[data-theme="dark"] body.home-page .process-card:nth-child(4) { --section-tone-a: #5eead4; --section-tone-b: #99f6e4; }

/* Крупная цифра на фоне шага и полоса под ним — в цвет своей карточки. */
body.home-page .process-card::before {
  color: color-mix(in srgb, var(--section-tone-a) 16%, transparent) !important;
}

body.home-page .process-card::after {
  background: linear-gradient(90deg, var(--section-tone-a), var(--section-tone-b)) !important;
}


/* v120a. Знак на плитке при наведении. */
@media (hover: hover) and (pointer: fine) {
  html:root[data-theme] body.home-page #services .service-card:hover .service-icon,
  html:root[data-theme] body.home-page #facts .fact-card:hover .fact-ico {
    background: transparent !important;
    border-color: var(--section-tone-a) !important;
  }

  html:root[data-theme] body.home-page #services .service-card:hover .service-icon::before,
  html:root[data-theme] body.home-page #facts .fact-card:hover .fact-ico::before {
    background: var(--section-tone-a) !important;
  }

  /* У этапов заливки нет — там меняется только цвет знака. Берём тон карточки,
     чтобы наведение не сбрасывало её цвет на общий акцент. */
  html:root[data-theme] body.home-page .process-section .process-card:hover .process-icon,
  html:root[data-theme] body.home-page .process-section .process-card:hover .process-icon svg {
    color: var(--section-tone-a) !important;
    stroke: var(--section-tone-a) !important;
  }
}


/* ==========================================================================
   v122. Анимационный фон сквозь разделы.
   Поверхность раздела задавалась дважды — фоном и средним стопом градиента,
   и вместе они перекрывали холст почти наглухо. Оставляем её один раз.
   ========================================================================== */

html:root[data-theme] body.home-page :is(
  .stats,
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) {
  --section-opacity: 70%;
  background-color: color-mix(in srgb, var(--section-surface) var(--section-opacity), transparent) !important;
  background-image:
    radial-gradient(42rem circle at var(--section-pointer-x) var(--section-pointer-y), color-mix(in srgb, var(--section-tone-a) 18%, transparent) 0%, transparent 72%),
    radial-gradient(70rem 44rem at var(--section-orb-x, 104%) var(--section-orb-y, 104%), color-mix(in srgb, var(--section-tone-b) 12%, transparent) 0%, transparent 70%),
    linear-gradient(142deg,
      color-mix(in srgb, var(--section-tone-a) 5%, transparent) 0%,
      transparent 48%,
      color-mix(in srgb, var(--section-tone-b) 6%, transparent) 100%) !important;
}

html:root[data-theme="dark"] body.home-page :is(
  .stats,
  #services,
  .process-section,
  #employment,
  #jobs,
  #partners,
  .testimonials,
  #about,
  #facts,
  #contact
) {
  --section-opacity: 66%;
  background-color: color-mix(in srgb, var(--section-surface) var(--section-opacity), transparent) !important;
  background-image:
    radial-gradient(44rem circle at var(--section-pointer-x) var(--section-pointer-y), color-mix(in srgb, var(--section-tone-a) 16%, transparent) 0%, transparent 74%),
    radial-gradient(70rem 46rem at var(--section-orb-x, 104%) var(--section-orb-y, 104%), color-mix(in srgb, var(--section-tone-b) 12%, transparent) 0%, transparent 72%),
    linear-gradient(142deg,
      color-mix(in srgb, var(--section-tone-a) 5%, transparent) 0%,
      transparent 48%,
      color-mix(in srgb, var(--section-tone-b) 6%, transparent) 100%) !important;
}

/* «Статистика» была задумана прозрачнее прочих — сохраняем эту разницу. */
html:root[data-theme] body.home-page .stats { --section-opacity: 58%; }
html:root[data-theme="dark"] body.home-page .stats { --section-opacity: 54%; }

/* ========================================================================== 
   v127. Главная ведёт к вакансиям через страны; полный каталог живёт отдельно.
   ========================================================================== */

body.home-page:not(.vacancies-page) #jobs :is(.filters-container, .buttons-container, .vacancies-summary,
  #vacancies-list, #pagination, .vacancies-all-link) {
  display: none !important;
}

.jobs-country-directory {
  width: min(100%, 1240px);
  margin: clamp(28px, 4vw, 54px) auto 0;
  overflow: hidden;
  overflow: clip;
}

.jobs-country-directory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.jobs-country-directory-head > div {
  display: grid;
  grid-template-columns: 12px auto;
  align-items: center;
  column-gap: 12px;
}

.jobs-country-directory-mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #38e09c;
  box-shadow: 0 0 0 7px color-mix(in srgb, #38e09c 15%, transparent), 0 0 28px #38e09c;
  grid-row: 1 / span 2;
}

.jobs-country-directory-head strong {
  color: var(--ink, #eef8ff);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.15;
}

.jobs-country-directory-head > div > span:last-child {
  color: var(--muted, #9bb2c4);
  font-size: 14px;
  margin-top: 5px;
}

.jobs-country-directory-head > a {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 17px;
  border: 1px solid color-mix(in srgb, var(--section-tone-a, #54c8ff) 45%, transparent);
  border-radius: 14px;
  color: var(--ink, #eef8ff);
  background: color-mix(in srgb, var(--section-surface, #071d2c) 54%, transparent);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.jobs-country-directory-head > a svg,
.jobs-country-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.jobs-country-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}

.jobs-country-card {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  min-height: 292px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--country-accent) 38%, rgba(255,255,255,.14));
  border-radius: 22px;
  color: #f4fbff;
  background: #071b2a;
  text-decoration: none;
  box-shadow: 0 18px 48px rgba(0, 12, 28, .18);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.jobs-country-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -8px;
  background-image: url("assets/country-directory-bg.webp");
  background-size: auto 112%;
  background-position: var(--country-position, 50%) center;
  filter: saturate(.9) contrast(1.05);
  transform: scale(1.03);
  transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .35s ease;
}

.jobs-country-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(130% 85% at 100% 0%, color-mix(in srgb, var(--country-accent) 28%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(3,16,29,.2) 0%, rgba(3,16,29,.82) 58%, rgba(3,16,29,.98) 100%);
}

.jobs-country-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: auto;
  color: color-mix(in srgb, var(--country-accent) 80%, white);
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .14em;
}

.jobs-country-visual img {
  width: 42px;
  height: 30px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.jobs-country-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 34px;
}

.jobs-country-copy small {
  color: color-mix(in srgb, var(--country-accent) 84%, white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.jobs-country-copy strong {
  margin-top: 5px;
  color: #fff;
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-size: clamp(27px, 2.15vw, 36px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.jobs-country-copy > span {
  min-height: 40px;
  margin-top: 8px;
  color: rgba(237,248,255,.76);
  font-size: 14px;
  line-height: 1.4;
}

.jobs-country-copy b {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-top: 12px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(240,249,255,.82);
  background: rgba(4,19,32,.5);
  font-size: 12px;
  line-height: 1;
}

.jobs-country-card.has-openings .jobs-country-copy b {
  border-color: color-mix(in srgb, #43e59c 55%, transparent);
  color: #baffdd;
  background: rgba(8,83,58,.42);
}

.jobs-country-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

@media (hover: hover) and (pointer: fine) {
  .jobs-country-directory-head > a:hover {
    border-color: var(--section-tone-a, #54c8ff);
    background: color-mix(in srgb, var(--section-tone-a, #54c8ff) 13%, transparent);
  }

  .jobs-country-card:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--country-accent) 82%, white 10%);
    box-shadow: 0 26px 70px rgba(0, 12, 28, .32), 0 0 38px color-mix(in srgb, var(--country-accent) 16%, transparent);
  }

  .jobs-country-card:hover::before {
    transform: scale(1.11) translateX(-1.5%);
    filter: saturate(1.12) contrast(1.08);
  }

  .jobs-country-card:hover .jobs-country-action svg {
    transform: translateX(4px);
  }
}

.jobs-country-card:focus-visible,
.jobs-country-directory-head > a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--country-accent, #54c8ff) 75%, white);
  outline-offset: 4px;
}

html:root[data-theme="light"] .jobs-country-directory-head > a {
  background: rgba(255,255,255,.56);
  color: #10263a;
}

@media (max-width: 1100px) {
  .jobs-country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-country-card { min-height: 270px; }
}

@media (max-width: 680px) {
  .jobs-country-directory-head { align-items: stretch; flex-direction: column; }
  .jobs-country-directory-head > a { justify-content: center; }
  .jobs-country-grid { grid-template-columns: 1fr; }
  .jobs-country-card { min-height: 248px; padding: 20px; }
  .jobs-country-copy { margin-top: 28px; }
  .jobs-country-copy > span { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .jobs-country-card,
  .jobs-country-card::before,
  .jobs-country-action svg { transition: none !important; }
}

/* ==========================================================================
   v136. Интерактивная карта маршрутов вместо обычной сетки карточек стран.
   ========================================================================== */

.jobs-route-explorer {
  --route-shift-x: 0px;
  --route-shift-y: 0px;
  --route-pointer-x: 50%;
  --route-pointer-y: 50%;
  isolation: isolate;
  position: relative;
  min-height: clamp(630px, 53vw, 710px);
  overflow: hidden;
  overflow: clip;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.jobs-route-explorer::before {
  display: none;
}

.jobs-route-explorer::after {
  display: none;
}

.jobs-route-scan {
  display: none;
}

html:root[data-theme] body.home-page #jobs,
html:root[data-theme="light"] body.home-page #jobs,
html:root[data-theme="dark"] body.home-page #jobs {
  background: none !important;
  border: 0 !important;
}

html:root[data-theme] body.home-page #jobs::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.jobs-route-ambient {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  transform: translate3d(var(--route-shift-x), var(--route-shift-y), 0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.jobs-route-ambient i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #67ddff;
  box-shadow: 0 0 0 5px rgba(80, 213, 255, .05), 0 0 18px rgba(80, 213, 255, .72);
  opacity: .28;
  animation: jobs-route-float var(--duration) ease-in-out var(--delay) infinite;
}

.jobs-route-ambient i:nth-child(3n) {
  background: #61efb2;
  box-shadow: 0 0 0 5px rgba(80, 235, 169, .05), 0 0 18px rgba(80, 235, 169, .68);
}

@keyframes jobs-route-float {
  0%, 100% { translate: 0 0; scale: .75; opacity: .18; }
  45% { translate: 10px -18px; scale: 1.3; opacity: .75; }
  72% { translate: -7px -8px; scale: .95; opacity: .38; }
}

@keyframes jobs-route-scan {
  0%, 12% { transform: translateX(0) skewX(-13deg); opacity: 0; }
  20% { opacity: .48; }
  70% { opacity: .25; }
  82%, 100% { transform: translateX(740%) skewX(-13deg); opacity: 0; }
}

.jobs-route-lines {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.jobs-lightning-route[hidden] { display: none !important; }

.jobs-lightning-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

.jobs-lightning-main {
  filter: url(#jobs-lightning-noise) drop-shadow(0 0 3px #76e9ff) drop-shadow(0 0 13px rgba(70, 213, 255, .9));
}

.jobs-lightning-glow {
  stroke: rgba(83, 219, 255, .42);
  stroke-width: 6;
}

.jobs-lightning-core {
  stroke: #eefcff;
  stroke-width: 1.35;
}

.jobs-lightning-branch {
  stroke: #9ceeff;
  stroke-width: .9;
  filter: url(#jobs-lightning-noise) drop-shadow(0 0 5px rgba(94, 225, 255, .8));
}

.jobs-lightning-route:nth-of-type(2n) .jobs-lightning-branch { stroke: #83f3c0; }
.jobs-lightning-route:nth-of-type(3n) .jobs-lightning-branch { stroke: #c0baff; }

@keyframes jobs-lightning-glow-burst {
  0% { opacity: 0; stroke-dashoffset: 100; }
  10% { opacity: .2; }
  24% { opacity: .9; stroke-dashoffset: 0; }
  35% { opacity: .18; }
  44% { opacity: .72; }
  64% { opacity: .34; }
  100% { opacity: 0; stroke-dashoffset: -6; }
}

@keyframes jobs-lightning-core-burst {
  0% { opacity: 0; stroke-dashoffset: 100; }
  8% { opacity: .15; }
  22% { opacity: 1; stroke-dashoffset: 0; }
  30% { opacity: .28; }
  39% { opacity: 1; }
  54% { opacity: .58; }
  100% { opacity: 0; stroke-dashoffset: -8; }
}

@keyframes jobs-lightning-branch-burst {
  0%, 5% { opacity: 0; stroke-dashoffset: 100; }
  30% { opacity: .92; stroke-dashoffset: 0; }
  58% { opacity: .38; }
  100% { opacity: 0; stroke-dashoffset: -10; }
}

.jobs-lightning-route.is-firing .jobs-lightning-glow {
  animation: jobs-lightning-glow-burst .86s cubic-bezier(.12,.72,.22,1) var(--bolt-delay, 0ms) 1 both;
}

.jobs-lightning-route.is-firing .jobs-lightning-core {
  animation: jobs-lightning-core-burst .78s cubic-bezier(.12,.72,.22,1) var(--bolt-delay, 0ms) 1 both;
}

.jobs-lightning-route.is-firing .jobs-lightning-branch {
  animation: jobs-lightning-branch-burst .58s ease-out calc(var(--bolt-delay, 0ms) + var(--branch-delay, 120ms)) 1 both;
}

.jobs-route-hub {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  width: 210px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f5fbff;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}

.jobs-route-hub:hover {
  transform: translate(-50%, -50%) scale(1.045);
  filter: drop-shadow(0 0 24px rgba(75, 222, 255, .32));
}

.jobs-route-hub:hover::before { border-color: rgba(111, 232, 255, .78); }
.jobs-route-hub:hover::after { border-color: rgba(105, 239, 188, .6); }

.jobs-route-hub::before,
.jobs-route-hub::after,
.jobs-route-hub-orbit {
  content: "";
  position: absolute;
  border: 1px solid rgba(91, 218, 255, .3);
  border-radius: 50%;
  inset: 0;
  box-shadow: inset 0 0 38px rgba(50, 194, 255, .06), 0 0 36px rgba(50, 194, 255, .08);
}

.jobs-route-hub::before { animation: jobs-hub-breathe 3.6s ease-in-out infinite; }
.jobs-route-hub::after { inset: 17px; border-style: dashed; animation: jobs-hub-spin 22s linear infinite; }
.jobs-route-hub-orbit { inset: 38px; border-color: rgba(69, 232, 164, .34); animation: jobs-hub-spin 13s linear infinite reverse; }

.jobs-route-hub-orbit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #65efb3;
  box-shadow: 0 0 16px #65efb3, 0 0 32px rgba(101, 239, 179, .6);
}

@keyframes jobs-hub-spin { to { rotate: 1turn; } }
@keyframes jobs-hub-breathe { 50% { scale: 1.07; opacity: .55; } }

.jobs-route-hub > svg {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  fill: none;
  stroke: #5ddcff;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 9px rgba(93, 220, 255, .72));
  transition: transform .36s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}

.jobs-route-hub:hover > svg {
  transform: translateY(-3px) rotate(-8deg) scale(1.16);
  filter: drop-shadow(0 0 12px rgba(93, 220, 255, 1));
}

.jobs-route-hub small {
  color: #84e4ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
}

.jobs-route-hub strong {
  margin-top: 7px;
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-size: 20px;
  line-height: 1.15;
}

.jobs-route-hub > span:last-child {
  width: 130px;
  margin-top: 6px;
  color: rgba(226, 242, 251, .65);
  font-size: 11px;
  line-height: 1.35;
}

.jobs-route-hub b { color: #65efb3; }

.jobs-route-explorer .jobs-country-grid {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  pointer-events: none;
}

.jobs-route-explorer .jobs-country-grid:not(.is-ready) .jobs-country-card {
  opacity: 0;
  pointer-events: none;
}

.jobs-route-explorer .jobs-country-card[hidden] { display: none !important; }

.jobs-route-explorer .jobs-country-card {
  position: absolute;
  left: var(--country-x);
  top: var(--country-y);
  width: max-content;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #f4fbff;
  background: none;
  box-shadow: none;
  transform: translate(-50%, -50%);
  transition: filter .28s ease, transform .42s cubic-bezier(.2,.8,.2,1);
  pointer-events: auto;
}

@keyframes jobs-country-spiral-launch {
  0% {
    opacity: 0;
    filter: blur(9px) brightness(1.7);
    transform: translate(calc(-50% + var(--launch-x)), calc(-50% + var(--launch-y))) rotate(-330deg) scale(.04);
  }
  18% { opacity: 1; }
  48% {
    filter: blur(2px) brightness(1.28);
    transform: translate(calc(-50% + var(--launch-mid-x)), calc(-50% + var(--launch-mid-y))) rotate(-155deg) scale(.52);
  }
  78% {
    filter: blur(0) brightness(1.08);
    transform: translate(calc(-50% + var(--launch-near-x)), calc(-50% + var(--launch-near-y))) rotate(-28deg) scale(.9);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: translate(-50%, -50%) rotate(0) scale(1);
  }
}

@keyframes jobs-hub-release {
  0%, 100% { filter: none; }
  22% { filter: drop-shadow(0 0 34px rgba(101, 239, 179, .66)); }
  44% { filter: drop-shadow(0 0 52px rgba(93, 220, 255, .8)); }
}

@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .jobs-route-explorer .jobs-country-grid.is-launching .jobs-country-card:not([hidden]) {
    animation: jobs-country-spiral-launch 1.18s cubic-bezier(.16,.72,.2,1) var(--launch-delay, 0ms) both;
    pointer-events: none;
  }

  .jobs-route-explorer:has(.jobs-country-grid.is-launching) .jobs-route-hub {
    animation: jobs-hub-release 1.45s ease-out both;
  }
}

.jobs-route-explorer .jobs-country-card::before,
.jobs-route-explorer .jobs-country-card::after { display: none; }

.jobs-route-explorer .jobs-country-visual {
  isolation: isolate;
  position: relative;
  flex: 0 0 auto;
  width: var(--country-bubble-size, 62px);
  height: var(--country-bubble-size, 62px);
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--country-accent) 65%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--country-accent) 85%, white);
  background: rgba(3, 21, 35, .82);
  box-shadow: 0 0 0 7px rgba(4, 25, 40, .68), 0 0 26px color-mix(in srgb, var(--country-accent) 24%, transparent);
  backdrop-filter: blur(12px);
  animation: jobs-country-drift 6.2s ease-in-out infinite;
}

.jobs-route-explorer .jobs-country-card:nth-child(2n) .jobs-country-visual {
  animation-duration: 7.4s;
  animation-delay: -2.7s;
}

.jobs-route-explorer .jobs-country-card:nth-child(3n) .jobs-country-visual {
  animation-duration: 5.6s;
  animation-delay: -4.1s;
}

@keyframes jobs-country-drift {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  34% { translate: 3px -7px; rotate: 1.2deg; }
  68% { translate: -3px -3px; rotate: -1deg; }
}

.jobs-route-explorer .jobs-country-visual::before,
.jobs-route-explorer .jobs-country-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--country-accent) 26%, transparent);
  border-radius: 50%;
  opacity: .65;
}

.jobs-route-explorer .has-openings .jobs-country-visual::after {
  animation: jobs-node-ping 2.4s ease-out infinite;
}

@keyframes jobs-node-ping {
  0% { opacity: .72; scale: .85; }
  75%, 100% { opacity: 0; scale: 1.65; }
}

.jobs-route-explorer .jobs-country-visual img {
  width: var(--country-flag-size, 34px);
  height: var(--country-flag-size, 34px);
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,.42);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.jobs-route-explorer .jobs-country-visual > span {
  position: absolute;
  right: -7px;
  bottom: -4px;
  min-width: 27px;
  min-height: 19px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  color: #dff7ff;
  background: #071c2d;
  font-size: 8px;
  letter-spacing: .08em;
}

.jobs-route-explorer .jobs-country-copy {
  position: relative;
  min-width: 154px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 0 14px;
  padding: 11px 16px 11px 18px;
  border-left: 2px solid var(--country-accent);
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(3, 22, 36, .92), rgba(3, 22, 36, .58));
  box-shadow: 15px 16px 30px rgba(0, 10, 23, .16);
  backdrop-filter: blur(14px) saturate(1.18);
  transition: padding .28s ease, background .28s ease, box-shadow .28s ease;
}

.jobs-route-explorer .jobs-country-copy small {
  color: color-mix(in srgb, var(--country-accent) 82%, white);
  font-size: 8px;
  letter-spacing: .15em;
}

.jobs-route-explorer .jobs-country-copy strong {
  margin: 3px 0 0;
  color: #fff;
  font-size: 18px;
  letter-spacing: -.025em;
}

.jobs-route-explorer .jobs-country-copy > span {
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  width: 250px;
  min-height: 0;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  color: rgba(237, 248, 255, .78);
  background: none;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity .12s ease;
  text-shadow: 0 2px 12px rgba(0, 10, 24, .95), 0 0 18px color-mix(in srgb, var(--country-accent) 24%, transparent);
}

.jobs-route-explorer .jobs-country-copy > span i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  filter: blur(5px);
  translate: 0 9px;
  rotate: 4deg;
  transition:
    opacity .22s ease calc(var(--letter-index) * 13ms),
    filter .3s ease calc(var(--letter-index) * 13ms),
    translate .34s cubic-bezier(.2,.8,.2,1) calc(var(--letter-index) * 13ms),
    rotate .34s cubic-bezier(.2,.8,.2,1) calc(var(--letter-index) * 13ms);
}

.jobs-route-explorer .jobs-country-copy > span .jobs-country-word {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

.jobs-route-explorer .jobs-country-card:nth-child(2) .jobs-country-copy > span,
.jobs-route-explorer .jobs-country-card:nth-child(3) .jobs-country-copy > span,
.jobs-route-explorer .jobs-country-card:nth-child(4) .jobs-country-copy > span {
  right: 0;
  left: auto;
}

.jobs-route-explorer .jobs-country-copy b {
  min-height: 0;
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  color: rgba(228, 242, 251, .68);
  background: none;
  font-size: 10px;
  letter-spacing: .02em;
}

.jobs-route-explorer .jobs-country-card.has-openings .jobs-country-copy b {
  display: flex;
  align-items: baseline;
  gap: 6px;
  border: 0;
  color: #85f5c4;
  background: none;
}

.jobs-route-explorer .jobs-country-count {
  color: color-mix(in srgb, var(--country-accent) 86%, white);
  font-family: var(--font-display, "Onest", sans-serif);
  font-size: clamp(22px, calc(var(--country-bubble-size, 62px) * .34), 34px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.055em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--country-accent) 34%, transparent);
}

.jobs-route-explorer .jobs-country-count-label {
  color: rgba(228, 242, 251, .72);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.jobs-route-explorer .jobs-country-action {
  width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  margin: 0 0 0 8px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--country-accent) 48%, transparent);
  border-radius: 50%;
  color: #effaff;
  background: rgba(3, 22, 36, .78);
  backdrop-filter: blur(12px);
  transition: background .25s ease, scale .25s ease, box-shadow .25s ease;
}

.jobs-route-explorer .jobs-country-action > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.jobs-route-explorer .jobs-country-action svg { width: 17px; height: 17px; }

@media (hover: hover) and (pointer: fine) {
  .jobs-route-explorer .jobs-country-card:hover {
    z-index: 8;
    filter: drop-shadow(0 14px 28px rgba(0, 11, 25, .42));
    transform: translate(-50%, -50%) scale(1.06);
  }

  .jobs-route-explorer .jobs-country-card:hover .jobs-country-copy {
    background: linear-gradient(90deg, rgba(3, 25, 41, .98), rgba(5, 32, 50, .84));
    box-shadow: 16px 18px 38px rgba(0, 9, 22, .3), 0 0 32px color-mix(in srgb, var(--country-accent) 14%, transparent);
  }

  .jobs-route-explorer .jobs-country-card:hover .jobs-country-copy > span {
    opacity: 1;
  }

  .jobs-route-explorer .jobs-country-card:hover .jobs-country-copy > span i {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
    rotate: 0deg;
  }

  .jobs-route-explorer .jobs-country-card:hover .jobs-country-action {
    color: #041624;
    background: var(--country-accent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--country-accent) 44%, transparent);
    scale: 1.1;
  }

  .jobs-route-explorer:has(.jobs-country-card:hover) .jobs-country-card:not(:hover) {
    opacity: .55;
    filter: saturate(.65);
  }

  .jobs-route-explorer .jobs-country-card:hover .jobs-country-visual img {
    transform: scale(1.14) rotate(-4deg);
    filter: saturate(1.2) brightness(1.08);
  }
}

html:root[data-theme="light"] .jobs-route-explorer {
  border: 0;
  background: none;
  box-shadow: none;
}

@media (max-width: 1120px) {
  .jobs-route-explorer { min-height: 760px; }
  .jobs-route-hub { width: 180px; }
  .jobs-route-explorer .jobs-country-card { scale: .9; }
  .jobs-route-explorer .jobs-country-card:hover { transform: translate(-50%, -50%) scale(1.02); }
}

@media (max-width: 800px) {
  .jobs-route-explorer {
    min-height: 0;
    padding: 180px 18px 24px;
    border-radius: 28px 8px;
  }

  .jobs-route-lines { display: none; }
  .jobs-route-hub { top: 92px; width: 138px; }
  .jobs-route-hub strong { font-size: 16px; }
  .jobs-route-hub > span:last-child { width: 120px; }

  .jobs-route-explorer .jobs-country-grid {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .jobs-route-explorer .jobs-country-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 96px;
    scale: 1;
    transform: none;
  }

  .jobs-route-explorer .jobs-country-copy { min-width: 0; flex: 1; padding-right: 10px; }
  .jobs-route-explorer .jobs-country-copy > span { display: none; }
  .jobs-route-explorer .jobs-country-action { width: 34px; min-height: 34px; margin-left: 5px; }
}

@media (max-width: 560px) {
  .jobs-route-explorer { padding-inline: 12px; }
  .jobs-route-explorer .jobs-country-grid { grid-template-columns: 1fr; }
  .jobs-route-explorer .jobs-country-card { min-height: 84px; }
  .jobs-route-explorer .jobs-country-copy strong { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .jobs-route-scan,
  .jobs-route-ambient i,
  .jobs-route-explorer .jobs-country-visual,
  .jobs-route-lines path,
  .jobs-route-hub::before,
  .jobs-route-hub::after,
  .jobs-route-hub-orbit,
  .jobs-route-explorer .has-openings .jobs-country-visual::after { animation: none !important; }
  .jobs-route-explorer::before { transition: none !important; }
}


/* ==========================================================================
   v123. Ночная подложка блока маршрутов.
   Содержимое блока светлое по замыслу, поэтому фон ему нужен тёмный в обеих
   темах — иначе на светлой не видно ни молний, ни подписей.
   ========================================================================== */

html:root[data-theme] .jobs-route-explorer {
  border-radius: var(--radius-lg, 28px);
  border: 1px solid rgba(93, 210, 255, .16);
  background:
    radial-gradient(118% 88% at 50% 0%, color-mix(in srgb, var(--section-tone-a, #0369a1) 26%, transparent) 0%, transparent 62%),
    radial-gradient(92% 78% at 10% 100%, color-mix(in srgb, var(--section-tone-b, #0d9488) 18%, transparent) 0%, transparent 60%),
    linear-gradient(168deg, rgba(9, 26, 41, .95) 0%, rgba(4, 14, 24, .97) 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .05),
    inset 0 0 90px rgba(4, 14, 24, .55),
    0 26px 64px rgba(3, 16, 28, .26);
}

/* На тёмной теме раздел под панелью и так тёмный — оставляем её прозрачнее,
   чтобы сохранилась глубина, ради которой мы открывали фон. */
html:root[data-theme="dark"] .jobs-route-explorer {
  background:
    radial-gradient(118% 88% at 50% 0%, color-mix(in srgb, var(--section-tone-a, #0369a1) 24%, transparent) 0%, transparent 62%),
    radial-gradient(92% 78% at 10% 100%, color-mix(in srgb, var(--section-tone-b, #0d9488) 16%, transparent) 0%, transparent 60%),
    linear-gradient(168deg, rgba(6, 20, 33, .78) 0%, rgba(3, 11, 20, .82) 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .04),
    inset 0 0 90px rgba(2, 10, 18, .5),
    0 26px 64px rgba(0, 0, 0, .34);
}

/* Заголовок блока стоит НАД панелью, на общем фоне раздела, и на светлой теме
   остаётся тёмным по светлому — трогать его не нужно. */


/* ==========================================================================
   v125. Раздел «Вакансии по странам» — тёмный целиком, в обеих темах.
   Блок нарисован под тёмный фон: заголовок берёт var(--ink, #eef8ff), названия
   стран белые, разряды голубые. Своего фона у раздела не было, и на светлой
   теме он терялся целиком.
   ========================================================================== */

html:root[data-theme] body.home-page:not(.vacancies-page) #jobs {
  /* Светлая тема красит раздел через html[data-theme="light"] .card { … !important },
     поэтому цвет здесь тоже с приоритетом — от него наследует всё поддерево. */
  color: #eef8ff !important;
  --ink: #eef8ff;
  --muted: #9bb2c4;
  background-color: rgba(4, 14, 24, .975) !important;
  background-image:
    radial-gradient(120% 74% at 50% 0%, color-mix(in srgb, var(--section-tone-a, #0369a1) 26%, transparent) 0%, transparent 60%),
    radial-gradient(92% 70% at 8% 100%, color-mix(in srgb, var(--section-tone-b, #0d9488) 18%, transparent) 0%, transparent 58%),
    linear-gradient(168deg, rgba(11, 30, 47, .6) 0%, rgba(4, 14, 24, .18) 100%) !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .06),
    inset 0 -1px rgba(255, 255, 255, .04) !important;
}

/* На тёмной теме раздел и так тёмный — оставляем его прозрачнее, чтобы сквозь
   него по-прежнему читался анимационный холст. */
html:root[data-theme="dark"] body.home-page:not(.vacancies-page) #jobs {
  background-color: rgba(3, 11, 20, .78) !important;
  background-image:
    radial-gradient(120% 74% at 50% 0%, color-mix(in srgb, var(--section-tone-a, #0369a1) 24%, transparent) 0%, transparent 60%),
    radial-gradient(92% 70% at 8% 100%, color-mix(in srgb, var(--section-tone-b, #0d9488) 16%, transparent) 0%, transparent 58%),
    linear-gradient(168deg, rgba(8, 24, 39, .42) 0%, rgba(3, 11, 20, .12) 100%) !important;
}

/* Карта маршрутов возвращается к обычной ширине: фон теперь на разделе. */
html:root[data-theme] .jobs-country-directory {
  --ink: #eef8ff;
  --muted: #9bb2c4;
  width: min(100%, 1240px);
  max-width: none;
  margin: clamp(20px, 2.6vw, 34px) auto 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

html:root[data-theme] .jobs-route-explorer,
html:root[data-theme="dark"] .jobs-route-explorer {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* --- светлая тема: возвращаем разделу его собственные цвета --------------- */

/* Сначала снимаем принудительные чернила светлой темы со всего раздела:
   правило :where(...) { color: #0b1220 !important } достаёт даже вложенный
   span с числом внутри strong. Наследование отдаёт цвет ближайшему предку,
   у которого он задан осознанно. Точечные цвета ниже идут после и перебивают
   это правило порядком следования. */
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs :is(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,div,dd,dt,label,a,blockquote,figcaption,th,td,code,pre,kbd,sup,sub) {
  color: inherit !important;
}

html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .section-lead,
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-country-directory-head > div > span:last-child { color: var(--muted) !important; }

html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-route-hub small { color: #84e4ff !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-route-hub > span:last-child { color: rgba(226, 242, 251, .65) !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-route-hub b { color: #65efb3 !important; }

html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-country-copy small {
  color: color-mix(in srgb, var(--country-accent) 82%, white) !important;
}

html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-country-copy strong { color: #fff !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-country-copy > span { color: rgba(237, 248, 255, .78) !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-country-copy b { color: rgba(228, 242, 251, .68) !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-country-card.has-openings .jobs-country-copy b { color: #85f5c4 !important; }

html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-country-count {
  color: color-mix(in srgb, var(--country-accent) 86%, white) !important;
}

html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-country-count-label { color: rgba(228, 242, 251, .72) !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-country-action { color: #effaff !important; }

/* Точки, где светлая тема всё-таки перебивала: заголовок раздела красится
   правилом с селектором #jobs .jobs-heading .section-title — оно весит больше
   общего правила наследования, поэтому перебиваем его отдельно. Кикер, лид и
   надпись в хабе привязываем к тем же значениям, что и на тёмной теме, иначе
   они уезжают на пару тонов из-за --color-text и --color-text-muted. */
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-heading .section-title,
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .section-heading h2 { color: #edf7fc !important; }

html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .section-kicker {
  color: color-mix(in srgb, var(--section-tone-a) 88%, #edf7fc) !important;
}

html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .section-lead { color: #b7cbd7 !important; }

html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-route-hub,
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-route-hub strong { color: #f5fbff !important; }

/* Проще и надёжнее точечных правок: внутри раздела подменяем сами токены
   текста на значения тёмной темы. Тогда все формулы вида
   color-mix(… var(--color-text)) считаются ровно так же, как на тёмной. */
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs {
  --color-text: #edf7fc;
  --color-text-muted: #b7cbd7;
}

/* Разряды. На светлой теме есть общее правило для svg со stroke: currentColor,
   и после того как раздел получил свой светлый цвет текста, все три линии
   молнии стали одного цвета — сияние, ядро и ответвления слились. Возвращаем
   им те же значения, что и на тёмной теме. */
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-lightning-route path { fill: none !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-lightning-glow { stroke: rgba(83, 219, 255, .42) !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-lightning-core { stroke: #eefcff !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-lightning-branch { stroke: #9ceeff !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-lightning-route:nth-of-type(2n) .jobs-lightning-branch { stroke: #83f3c0 !important; }
html[data-theme="light"] body.home-page:not(.vacancies-page) #jobs .jobs-lightning-route:nth-of-type(3n) .jobs-lightning-branch { stroke: #c0baff !important; }

/* ========================================================================== 
   v146. Адаптивная доводка и кликабельный центр каталога.
   ========================================================================== */

.jobs-route-hub {
  color: #f5fbff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.jobs-route-hub:focus-visible {
  outline: 3px solid #73e8ff;
  outline-offset: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1.045);
  filter: drop-shadow(0 0 24px rgba(75, 222, 255, .38));
}

/* Каталог использует компактную версию подвала главной. Без этих размеров
   натуральная ширина логотипа растягивала grid-колонку за экран телефона. */
.vacancies-page .footer-main,
.vacancies-page .footer-bottom {
  width: min(calc(100% - 48px), var(--content-width, 1240px));
  margin-inline: auto;
}

.vacancies-page .footer-main > div { min-width: 0; }

.vacancies-page .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: .05em;
}

.vacancies-page .footer-logo img {
  width: 32px;
  height: 40px;
  flex: 0 0 32px;
  object-fit: contain;
}

.vacancies-page .footer-main > div:not(.footer-brand-block) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vacancies-page .footer-main h4 { margin: 0 0 12px; }

.vacancies-page .footer-main a {
  max-width: 100%;
  margin-bottom: 7px;
  color: var(--color-text);
  overflow-wrap: anywhere;
  text-decoration: none;
}

@media (max-width: 800px) {
  .jobs-route-hub {
    min-width: 138px;
    min-height: 138px;
    touch-action: manipulation;
  }

  .jobs-route-explorer .jobs-country-action {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-left: 2px;
  }

  /* До прихода таблицы восемь прозрачных карточек не должны занимать почти
     целый экран. Оставляем один компактный, озвучиваемый статус загрузки. */
  .jobs-route-explorer .jobs-country-grid:not(.is-ready) {
    min-height: 76px;
    display: grid;
    place-items: center;
  }

  .jobs-route-explorer .jobs-country-grid:not(.is-ready) .jobs-country-card {
    display: none;
  }

  .jobs-route-explorer .jobs-country-grid:not(.is-ready)::after {
    content: "Загружаем актуальные направления…";
    display: block;
    padding: 14px 18px;
    border: 1px solid rgba(98, 218, 255, .2);
    border-radius: 12px;
    color: rgba(224, 243, 253, .72);
    background: rgba(7, 27, 42, .46);
    font-size: .82rem;
    line-height: 1.4;
    text-align: center;
  }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }

  #toTop,
  .scroll-top,
  .vacancies-page #toTop {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 46px !important;
    height: 46px !important;
  }

  .contact-map-tab,
  .map-zoom-btn,
  .contact-map-link {
    min-height: 44px;
  }

  .map-zoom-btn { min-width: 44px; }

  .jobs-country-directory-head > a,
  .contact-phones a,
  .footer-column a,
  .footer-seo-links a,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .jobs-country-directory-head > a { justify-content: center; }

  .vacancies-page .footer-main,
  .vacancies-page .footer-bottom {
    width: min(calc(100% - 32px), var(--content-width, 1240px));
  }

  .vacancies-page .footer-main { gap: 22px; }

  .vacancies-page .footer-main > div:not(.footer-brand-block) a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
  }

  .vacancies-page .catalog-brand,
  .vacancies-page .catalog-breadcrumbs a,
  .vacancies-page .vacancy-title a,
  .vacancies-page .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  #home.hero { padding-inline: 20px !important; }

  #home.hero .hero-title {
    font-size: clamp(1.86rem, 9.6vw, 2.2rem) !important;
    letter-spacing: -.055em !important;
  }

  #home.hero .hero-subtitle { font-size: 1rem !important; }

  .jobs-country-directory-head > div > span:last-child {
    font-size: .83rem;
    line-height: 1.45;
  }

  .vacancies-page .footer-main,
  .vacancies-page .footer-bottom { width: calc(100% - 28px); }
}

/* ========================================================================== 
   v148. Acceptance polish: compact mobile path + restrained route motion.
   ========================================================================== */
@media (max-width: 680px) {
  body.home-page #services,
  body.home-page .process-section {
    padding-block: 42px !important;
  }

  body.home-page #services .section-heading,
  body.home-page .process-section .section-heading {
    margin-bottom: 22px !important;
  }

  body.home-page #services .section-lead,
  body.home-page .process-section .section-lead {
    margin-top: 9px !important;
    font-size: .94rem !important;
    line-height: 1.48 !important;
  }

  body.home-page #services .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.home-page #services .service-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 14px 12px !important;
    border-radius: 16px !important;
  }

  body.home-page #services .service-icon {
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  body.home-page #services .service-card h3 {
    margin: 1px 0 5px !important;
    font-size: .91rem !important;
    line-height: 1.2 !important;
  }

  body.home-page #services .service-card p {
    grid-column: 1 / -1;
    margin: 0 !important;
    font-size: .79rem !important;
    line-height: 1.42 !important;
  }

  body.home-page .process-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.home-page .process-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 32px 40px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 10px !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
  }

  body.home-page .process-card .process-number {
    grid-row: 1 / 3;
    align-self: start;
    font-size: .75rem !important;
  }

  body.home-page .process-card .process-icon {
    grid-row: 1 / 3;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }

  body.home-page .process-card h3 {
    margin: 0 0 3px !important;
    font-size: .96rem !important;
    line-height: 1.2 !important;
  }

  body.home-page .process-card p {
    margin: 0 !important;
    font-size: .81rem !important;
    line-height: 1.4 !important;
  }

  body.home-page .process-cta {
    margin-top: 16px !important;
    padding: 14px !important;
    gap: 12px !important;
  }
}

/* Две колонки услуг живут до 520px. Ниже — одна: при двух на карточку
   остаётся 94px под текст, а «Трудоустройство» занимает 130 и вылезает
   поверх соседней карточки. */
@media (max-width: 520px) {
  body.home-page #services .grid { grid-template-columns: 1fr !important; }
}

/* Страховка на все языки: казахские и английские заголовки бывают длиннее
   русских, и одно слово не должно выходить за карточку ни при какой ширине. */
#services .service-card :is(h3, h4, p),
.service-card :is(h3, h4, p) {
  overflow-wrap: break-word;
  min-width: 0;
}

@media (min-width: 681px) and (prefers-reduced-motion: no-preference) {
  body.home-page .process-grid { position: relative; }
  body.home-page .process-grid::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 18%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .2), transparent);
    transform: translateX(-140%);
    animation: workup-process-route 6s cubic-bezier(.2,.7,.2,1) 1.2s infinite;
  }
  @keyframes workup-process-route {
    0%, 58% { transform: translateX(-140%); opacity: 0; }
    64% { opacity: 1; }
    82%, 100% { transform: translateX(650%); opacity: 0; }
  }

  body.home-page .event-card img,
  body.home-page #partners figure img {
    transform: scale(1.025);
    transition: transform .65s cubic-bezier(.2,.75,.2,1);
  }
  body.home-page .event-card.is-risen img,
  body.home-page #partners figure.is-risen img { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .process-grid::after { content: none !important; animation: none !important; }
  body.home-page :is(.event-card, #partners figure) img { transform: none !important; transition: none !important; }
}

/* v149. On a phone the route picker is a list, not a scaled desktop map.
   Keep every ancestor at its natural size: a scale on one wrapper made the
   339px-wide content area render as a 254px micro-layout at 390px. */
@media (max-width: 800px) {
  body.home-page #jobs,
  body.home-page #jobs .vacancies-container,
  body.home-page #jobs .jobs-country-directory,
  body.home-page #jobs .jobs-route-explorer,
  body.home-page #jobs .jobs-country-grid {
    width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    scale: 1 !important;
    translate: 0 !important;
    rotate: none !important;
  }

  body.home-page #jobs { scroll-margin-top: 96px; }

  body.home-page #jobs .jobs-country-directory { overflow: visible; }

  body.home-page #jobs .jobs-route-explorer {
    box-sizing: border-box;
    padding: 172px 16px 22px !important;
  }

  body.home-page #jobs .jobs-route-explorer .jobs-country-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body.home-page #jobs .jobs-route-explorer .jobs-country-card {
    width: 100% !important;
    min-height: 88px !important;
    padding: 12px 10px !important;
    transform: none !important;
    scale: 1 !important;
  }

  body.home-page #jobs .jobs-route-explorer .jobs-country-visual {
    width: 62px !important;
    height: 62px !important;
  }

  body.home-page #jobs .jobs-route-explorer .jobs-country-visual img {
    width: 34px !important;
    height: 34px !important;
  }

  body.home-page #jobs .jobs-route-explorer .jobs-country-copy {
    min-width: 0;
    margin-left: 12px;
    padding: 7px 8px 7px 13px;
  }

  body.home-page #jobs .jobs-route-explorer .jobs-country-copy small,
  body.home-page #jobs .jobs-route-explorer .jobs-country-count-label {
    font-size: 12px !important;
    line-height: 1.2;
  }

  body.home-page #jobs .jobs-route-explorer .jobs-country-copy strong {
    font-size: 18px !important;
    line-height: 1.14;
  }

  body.home-page #jobs .jobs-route-explorer .jobs-country-count {
    font-size: 28px !important;
    line-height: 1;
  }

  body.home-page #jobs .jobs-route-explorer .jobs-country-action {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* An offscreen route should not continue animating on a long page. */
.jobs-route-explorer.is-motion-paused :is(.jobs-route-ambient i, .jobs-route-hub::before,
  .jobs-route-hub::after, .jobs-route-hub-orbit, .jobs-country-visual,
  .jobs-country-visual::after, .jobs-lightning-route *) {
  animation-play-state: paused !important;
}

/* Post-acceptance interaction corrections.
   A label without a duplicate value must stay visible on hover. The menu bridge
   occupies its visual gap, while Escape can close an open menu even if its
   trigger retains focus. The final route description is placed above its card
   so it remains inside the clipped explorer. */
@media (hover: hover) and (pointer: fine) {
  :is(.btn-primary, .btn-outline, .btn-download, .nav-contact, .vacancy-reply):hover .btn-label:not([data-label]) > span {
    transform: none;
  }

  :is(.btn-primary, .btn-outline, .btn-download, .nav-contact, .vacancy-reply):hover .btn-label:not([data-label])::after {
    transform: translateY(115%);
  }
}

html:root[data-theme] .nav-drop-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}

html:root[data-theme] .nav-drop:focus-within .nav-drop-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
}

html:root[data-theme] .nav-drop:focus-within .nav-drop-arrow { transform: rotate(0); }

html:root[data-theme] .nav-drop:hover .nav-drop-panel,
html:root[data-theme] .nav-drop.is-open .nav-drop-panel,
html:root[data-theme] .nav-drop.is-open:focus-within .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

html:root[data-theme] .nav-drop:hover .nav-drop-arrow,
html:root[data-theme] .nav-drop.is-open .nav-drop-arrow,
html:root[data-theme] .nav-drop.is-open:focus-within .nav-drop-arrow { transform: rotate(180deg); }

html:root[data-theme] .nav-drop.is-dismissed:hover .nav-drop-panel,
html:root[data-theme] .nav-drop.is-dismissed:focus-within .nav-drop-panel,
html:root[data-theme] .nav-drop.is-dismissed .nav-drop-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateX(-50%) translateY(-6px) !important;
}
html:root[data-theme] .nav-drop.is-dismissed:hover .nav-drop-arrow,
html:root[data-theme] .nav-drop.is-dismissed:focus-within .nav-drop-arrow,
html:root[data-theme] .nav-drop.is-dismissed .nav-drop-arrow { transform: rotate(0) !important; }

.jobs-route-explorer .jobs-country-card--other .jobs-country-copy > span {
  top: auto;
  bottom: calc(100% + 7px);
}

html:root[data-theme="light"] .jobs-country-directory-head > a {
  background: rgba(7, 29, 44, .72);
  color: #eef8ff;
}

html:root[data-theme] #facts .fact-card {
  padding: 22px clamp(18px, 2.2vw, 30px) 20px !important;
  overflow-wrap: anywhere;
}

html:root[data-theme] #facts .fact-value { max-width: 100%; }

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
}
.language-switch button {
  min-width: 31px;
  min-height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-muted);
  background: transparent;
  font: 800 11px/1 "Onest", sans-serif;
  cursor: pointer;
}
.language-switch button[aria-pressed="true"] { color: #fff; background: var(--color-accent); }
.language-switch button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 680px) { .language-switch { margin-left: auto; } }

@media (max-width: 980px) {
  html:root[data-theme] .nav-drop:not(.is-open) .nav-drop-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  html:root[data-theme] .nav-drop.is-open .nav-drop-panel,
  html:root[data-theme] .nav-drop.is-open:focus-within .nav-drop-panel {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   Переключатель языка — раскрывающийся список.
   Было три кнопки в скруглённой подложке: подложка спорила с шапкой, а коды
   RU/KZ/EN не отвечали на вопрос «где мой язык». Теперь кнопка показывает
   текущий язык, список раскрывается вниз и называет языки на них самих.
   ========================================================================== */

.lang { position: relative; margin-left: 10px; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: 800 12px/1 "Onest", "Segoe UI", sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color 200ms cubic-bezier(.16,1,.3,1);
}

.lang-btn:hover,
.lang.is-open .lang-btn { color: var(--color-primary); }
.lang-btn:focus-visible { outline: 2px solid var(--color-ring, var(--color-primary)); outline-offset: 3px; border-radius: 3px; }

.lang-arrow {
  width: 9px;
  height: 6px;
  transition: transform 240ms cubic-bezier(.16,1,.3,1);
}

.lang.is-open .lang-arrow { transform: rotate(180deg); }

.lang-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 10px);
  background: var(--color-surface);
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, .55);
  display: none;
}

/* Раскрытие переключаем display, а не прозрачностью: список над шапкой
   всё равно не должен занимать место, а анимацию даёт keyframes — переход
   на visibility в этой связке не срабатывал. */
.lang.is-open .lang-list { display: block; animation: lang-open 220ms cubic-bezier(.16,1,.3,1) both; }

@keyframes lang-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-edge, 6px);
  background: none;
  color: var(--color-text);
  font: 600 0.94rem/1.2 "Onest", "Segoe UI", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 180ms cubic-bezier(.16,1,.3,1), color 180ms cubic-bezier(.16,1,.3,1);
}

.lang-option-code {
  flex: none;
  width: 26px;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.lang-option:hover,
.lang-option:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

.lang-option:hover .lang-option-code,
.lang-option:focus-visible .lang-option-code { color: inherit; }

/* Выбранный язык отмечаем галочкой, а не заливкой: заливка в списке из трёх
   строк читается как наведение и путает. */
.lang-option[aria-selected="true"] { color: var(--color-primary); }
.lang-option[aria-selected="true"] .lang-option-name::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 9px;
  margin-left: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(43deg);
}

@media (prefers-reduced-motion: reduce) {
  .lang-list, .lang-arrow, .lang-option { transition: none; }
}

/* Старый вариант в пилюле больше не собирается — правила гасим, чтобы они
   не всплыли, если где-то остался кэш прежней разметки. */
.language-switch { display: none !important; }

/* --------------------------------------------------------------------------
   Подложки под значками сняты: круг под темой и пилюля под языком спорили
   с шапкой и притягивали взгляд сильнее, чем главное действие.
   -------------------------------------------------------------------------- */

.theme-toggle,
.menu-toggle {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--color-text-muted);
  transition: color 200ms cubic-bezier(.16,1,.3,1);
}

.theme-toggle:hover,
.menu-toggle:hover { color: var(--color-primary); background: none !important; }

.theme-toggle:focus-visible,
.menu-toggle:focus-visible { outline: 2px solid var(--color-ring, var(--color-primary)); outline-offset: 3px; }

/* Вкладки карты: выбранная была залита пилюлей — та же скруглённая подложка,
   что и под значками шапки. Выбор теперь показывает кант снизу: состояние
   читается, а лишней плашки в интерфейсе нет. */
.contact-map-tab {
  position: relative;
  border-radius: 0 !important;
  padding: 6px 4px !important;
  margin-right: 18px;
}

.contact-map-tab:last-child { margin-right: 0; }

.contact-map-tab.active {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-primary) !important;
}

.contact-map-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(.16,1,.3,1);
}

.contact-map-tab.active::after { transform: scaleX(1); }

@media (hover: hover) {
  .contact-map-tab:hover { color: var(--color-primary); }
  .contact-map-tab:hover::after { transform: scaleX(1); opacity: .45; }
  .contact-map-tab.active:hover::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-map-tab::after { transition: none; }
}

/* Подложка под значком темы держалась правилом с той же силой, что и общее,
   но объявленным раньше по файлу — перебиваем адресно. */
html:root[data-theme] body.home-page .header .theme-toggle,
html:root[data-theme] body.home-page .header .menu-toggle,
html:root[data-theme] .site-header .theme-toggle,
html:root[data-theme] .site-header .menu-toggle {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Со снятой подложкой значки шапки остались приглушённым цветом и просели
   до 3:1 — раньше контраст вытягивала белая плашка под ними. «RU» — это
   текст, ему нужно 4.5:1, поэтому берём основной цвет, а приглушённым
   оставляем только подписи внутри списка. */
.lang-btn,
.theme-toggle,
.menu-toggle { color: var(--color-text); }

html:root[data-theme] body.home-page .header .theme-toggle,
html:root[data-theme] body.home-page .header .menu-toggle,
html:root[data-theme] .site-header .theme-toggle,
html:root[data-theme] .site-header .menu-toggle,
html:root[data-theme] .lang-btn { color: var(--color-text); }

html:root[data-theme] .lang-btn:hover,
html:root[data-theme] .lang.is-open .lang-btn,
html:root[data-theme] .site-header .theme-toggle:hover,
html:root[data-theme] .site-header .menu-toggle:hover,
html:root[data-theme] body.home-page .header .theme-toggle:hover,
html:root[data-theme] body.home-page .header .menu-toggle:hover { color: var(--color-primary); }

/* Порядок значков в шапке — один и тот же на всех страницах: тема, язык,
   кнопка меню. На главной язык дописывается скриптом последним, поэтому
   раскладку задаём порядком, а не разметкой. */
.header .logo-block .theme-toggle { order: 1; }
.header .logo-block .lang { order: 2; }
.header .logo-block .menu-toggle { order: 3; }

/* «Направления» открывались только наведением: класс is-open ставился, но
   панель оставалась прозрачной и не принимала нажатия. На тач-экране и с
   клавиатуры меню было не открыть вовсе. Показ по классу заявляем явно. */
html:root[data-theme] .nav-drop.is-open .nav-drop-panel,
html:root[data-theme] .header #siteNav .nav-drop.is-open .nav-drop-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   Казахская локализация: буквы плясали по строке.
   Ни Unbounded, ни Onest не содержат Ә Ғ Қ Ң Ө Ұ Ү Һ — браузер подставлял под
   каждую такую букву системный шрифт, и они выходили ниже и другого веса.
   Замер: в Unbounded «Н» имеет ширину 37.5, а «Қ», «Ә», «Ө» — 22, то есть
   ширину подстановки. У Inter все они свои: 29.9 / 30.4 / 29.9 / 30.8.
   Поэтому на казахском переводим текст на Inter целиком — так строка ровная.
   ========================================================================== */

html[lang="kk"],
html[data-language="kk"] {
  --font-display: "Inter", "Segoe UI", sans-serif;
}

html[lang="kk"] body,
html[data-language="kk"] body,
html[lang="kk"] :is(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, b, small, button, input, textarea, select, label),
html[data-language="kk"] :is(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, b, small, button, input, textarea, select, label) {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", sans-serif !important;
}

/* Заголовки на казахском теряют характер Unbounded, но взамен получают ровную
   строку. Возвращаем им плотность и насыщенность, близкие к исходным. */
html[lang="kk"] :is(h1, h2, .hero-title, .section-title, .section-heading h2),
html[data-language="kk"] :is(h1, h2, .hero-title, .section-title, .section-heading h2) {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Русский и английский не трогаем — там Unbounded и Onest покрывают всё.
   Inter остаётся общим запасным: если где-то встретится редкий знак, его
   подставит он, а не случайный системный шрифт. */


/* ==========================================================================
   v162. Казахский слой поверх тяжёлых правил.
   Правила заголовков написаны с высокой специфичностью
   (html:root[data-theme] #home.hero .hero-title — вес (1,4,1) с !important),
   и обычный языковой слой их не перебивал: замер показал у h1 казахской
   версии font-family: Unbounded, то есть подстановку системного шрифта под
   Ә Ғ Қ Ң Ө Ұ Ү Һ и разнобой по высоте.

   :is() берёт вес самого тяжёлого аргумента, поэтому список начинается с того
   же селектора заголовка — итог (1,5,2), выше любого правила файла.
   ========================================================================== */

html:root[lang="kk"][data-theme] :is(#home.hero .hero-title, *):not(code, pre, kbd, samp, .lang-option-code, .brand),
html:root[data-language="kk"][data-theme] :is(#home.hero .hero-title, *):not(code, pre, kbd, samp, .lang-option-code, .brand) {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", sans-serif !important;
}

/* Inter при том же кегле светлее и уже Unbounded, поэтому заголовкам на
   казахском возвращаем плотность: вес 800 и трекинг, привязанный к размеру. */
html:root[lang="kk"][data-theme] :is(#home.hero .hero-title, h1, h2, .hero-title, .section-title, .section-heading h2, .stat-number, .fact-value),
html:root[data-language="kk"][data-theme] :is(#home.hero .hero-title, h1, h2, .hero-title, .section-title, .section-heading h2, .stat-number, .fact-value) {
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}


/* ==========================================================================
   v164. Бегущий кант карточки на тач-экранах.
   Он заводился строчкой animation-play-state в блоке :hover, а на телефоне
   наведения не бывает — кант стоял всегда. Теперь его пускает тот же
   наблюдатель, что и появление, и только пока карточка на экране.
   ========================================================================== */

@media (hover: none) {
  html.js-card-motion #jobs .vacancy-card.is-in.is-live {
    animation-play-state: running, running;
  }
}


/* ==========================================================================
   Название в шапке — часть знака, а не текст страницы.
   Казахский слой переводит на Inter всё, включая span, и логотип на казахской
   версии набирался другим шрифтом, чем на русской. Кириллицы в слове WORKUP
   нет, подставлять там нечего — возвращаем фирменный шрифт.
   ========================================================================== */

html:root[lang="kk"] .header .brand,
html:root[data-language="kk"] .header .brand {
  font-family: "Unbounded", "Inter", "Segoe UI", sans-serif !important;
}