/* ===== FONTS — Onest (self-hosted, from PPM) ===== */
@font-face {
  font-family: 'Onest';
  src: url('./assets/fonts/Onest-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('./assets/fonts/Onest-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('./assets/fonts/Onest-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('./assets/fonts/Onest-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ===== DESIGN TOKENS ===== */
:root {
  /* Type Scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Fonts */
  --font-display: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
}

/* ===== LIGHT MODE (default) ===== */
:root, [data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f7f8fa;
  --color-surface-offset: #f1f5fb;
  --color-surface-accent: #f1f8fc;
  --color-divider: #eef0f3;
  --color-border: #e5e7eb;

  --color-text: #272629;
  --color-text-muted: #636268;
  --color-text-faint: #9a9aa0;
  --color-text-inverse: #ffffff;

  --color-primary: #377ef0;
  --color-primary-hover: #296ad5;
  --color-primary-active: #0c52eb;
  --color-primary-light: #f1f8fc;

  --color-accent: #1ed760;
  --color-accent-hover: #19b853;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  /* Premium dark — ported from PPM /plastic */
  --color-bg: #010407;
  --color-surface: #191c20;
  --color-surface-2: #14171b;
  --color-surface-offset: #0b0e12;
  --color-surface-accent: #11161c;
  --color-divider: rgba(255, 255, 255, 0.08);
  --color-border: rgba(255, 255, 255, 0.12);

  --color-text: #ffffff;
  --color-text-muted: #b9b0a5;
  --color-text-faint: #6a6a6a;
  --color-text-inverse: #010407;

  --color-primary: #5b9bf5;
  --color-primary-hover: #7fb1f8;
  --color-primary-active: #377ef0;
  --color-primary-light: #11202f;

  --color-accent: #1ed760;
  --color-accent-hover: #19b853;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #010407;
    --color-surface: #191c20;
    --color-surface-2: #14171b;
    --color-surface-offset: #0b0e12;
    --color-surface-accent: #11161c;
    --color-divider: rgba(255, 255, 255, 0.08);
    --color-border: rgba(255, 255, 255, 0.12);
    --color-text: #ffffff;
    --color-text-muted: #b9b0a5;
    --color-text-faint: #6a6a6a;
    --color-text-inverse: #010407;
    --color-primary: #5b9bf5;
    --color-primary-hover: #7fb1f8;
    --color-primary-active: #377ef0;
    --color-primary-light: #11202f;
    --color-accent: #1ed760;
    --color-accent-hover: #19b853;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7);
  }
}

/* ===== DARK THEME OVERRIDES (ported from PPM /plastic) ===== */
[data-theme="dark"] .header__bar {
  background-color: #010407;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Swap to the white wordmark on dark (as /plastic does) */
[data-theme="dark"] .header__logo-icon {
  content: url("./assets/logo-white.svg");
}

/* Premium CTA — white on dark */
[data-theme="dark"] .header__cta {
  background-color: #ffffff;
  color: #0f1824;
}

[data-theme="dark"] .header__cta:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .header__dropdown-nav a.header__cta--block {
  background-color: #ffffff;
  color: #0f1824;
}

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

section {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}

/* ===== HEADER (PPM floating pill) ===== */
.header {
  position: fixed;
  top: 15px;
  left: 0;
  right: 0;
  z-index: 50;
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 10px 15px;
  border-radius: 100px;
  border: 1px solid #f1f1f1;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  text-decoration: none;
}

.header__logo-icon {
  width: 182px;
  height: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header__nav a {
  font-size: 15px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.header__nav a:hover {
  color: var(--color-primary);
}

.header__action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 100px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.header__cta:hover {
  background-color: var(--color-primary-hover);
}

.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Layout footprint matches the burger button — keeps the header from stretching */
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-text);
  transition: color var(--transition-interactive);
}

/* Hover background — slightly larger than the button, drawn as an absolute
   overlay so the extra size never affects the header layout */
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 100px;
  background: transparent;
  transition: background var(--transition-interactive);
}

.theme-toggle svg {
  position: relative;
  width: 72%;
  height: 72%;
}

.theme-toggle:hover {
  color: var(--color-primary);
}

.theme-toggle:hover::before {
  background: var(--color-surface-2);
}

/* Burger (PPM) — hidden on desktop, shown under 1280px */
.header__burger {
  display: none;
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.header__burger span,
.header__burger::before,
.header__burger::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  right: 0;
  border-radius: 10px;
  background-color: var(--color-text);
  transition: all 0.25s ease;
}

.header__burger span { width: 100%; top: 50%; left: 0; transform: translateY(-50%); }
.header__burger::before { width: 100%; top: calc(50% - 8px); left: 0; }
.header__burger::after { width: 60%; top: calc(50% + 8px); left: auto; }

.header.is-menu-open .header__burger span { width: 0; }
.header.is-menu-open .header__burger::before { top: calc(50% - 1px); left: 0; width: 100%; transform: rotate(45deg); }
.header.is-menu-open .header__burger::after { top: calc(50% - 1px); left: 0; width: 100%; transform: rotate(-45deg); }

/* Mobile dropdown panel (PPM) */
.header__dropdown {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  padding: 110px 24px 70px;
  background-color: var(--color-surface);
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
}

.header.is-menu-open .header__dropdown { transform: translateY(0); }

.header__dropdown-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.header__dropdown-nav a {
  font-size: 20px;
  color: var(--color-text);
  text-decoration: none;
  padding: 10px 0;
  transition: color 0.25s ease;
}

.header__dropdown-nav a:hover { color: var(--color-primary); }

.header__dropdown-nav a.header__cta--block {
  margin-top: var(--space-4);
  height: 48px;
  padding: 0 28px;
  font-size: 16px;
  color: #fff;
}

@media (max-width: 1280px) {
  .header__nav { display: none; }
  .header__burger { display: block; }
  .header__dropdown { display: block; }
}

@media (max-width: 767.98px) {
  .header { top: 10px; }
  .header__logo-icon { width: 156px; }
  /* CTA из бара прячем — он доступен в выпадающем меню (.header__cta--block) */
  .header__action > .header__cta { display: none; }
}

@media (max-width: 575.98px) {
  .header { top: 6px; }
  .header__bar { padding: 6px 12px; }
  .header__logo-icon { width: 128px; }
  .header__burger { width: 24px; height: 24px; }
  .theme-toggle { width: 24px; height: 24px; }
  .header__burger::before { top: calc(50% - 6px); }
  .header__burger::after { top: calc(50% + 6px); }
}

/* ===== HERO ===== */
.hero {
  padding-top: clamp(110px, 11vw, 200px);
  padding-bottom: clamp(var(--space-16), 10vw, var(--space-32));
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.hero__title em {
  font-style: normal;
  color: var(--color-primary);
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 520px;
  margin-bottom: var(--space-8);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), background var(--transition-interactive);
}

.hero__cta:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hero__cta:active {
  transform: translateY(0);
}

.hero__cta svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-interactive);
}

.hero__cta:hover svg {
  transform: translateX(3px);
}

.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__visual-circle {
  width: clamp(320px, 36vw, 560px);
  height: clamp(320px, 36vw, 560px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-surface-2));
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Absolute fill overrides global img { max-width:100%; height:auto } so the photo fills the circle */
.hero__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 50%;
}

/* Floating pills */
.hero__pill {
  position: absolute;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  white-space: nowrap;
}

.hero__pill--1 { top: 10%; right: -5%; animation: float 4s ease-in-out infinite; }
.hero__pill--2 { bottom: 15%; left: -5%; animation: float 5s ease-in-out infinite 0.5s; }
.hero__pill--3 { top: 50%; right: -15%; animation: float 4.5s ease-in-out infinite 1s; }
.hero__pill--4 { top: 42%; left: -12%; animation: float 5.2s ease-in-out infinite 0.3s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== SECTION TITLES ===== */
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 600px;
  margin-bottom: var(--space-12);
}

/* ===== ABOUT SECTION ===== */
.about {
  background: var(--color-surface-2);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.about__text h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.about__text p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-divider);
}

.stat-card__number {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.stat-card__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ===== DIRECTIONS ===== */
.directions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.direction-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}

.direction-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.direction-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--color-primary);
}

.direction-card__icon svg {
  width: 24px;
  height: 24px;
}

.direction-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.direction-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===== TECH STACK ===== */
.stack {
  background: var(--color-surface-2);
}

.stack__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.stack__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}

.stack__tag:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* ===== BENEFITS ===== */
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.benefit-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
}

.benefit-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  font-size: 1.5rem;
}

/* Hue variants — light keeps the soft pastel chip; dark gets a translucent
   tinted glow with a brighter glyph so icons read well on the premium surface. */
.benefit-card__icon--blue   { background: #e7f0fe; color: #1565c0; }
.benefit-card__icon--green  { background: #e8f5e9; color: #2e7d32; }
.benefit-card__icon--indigo { background: #e8eafd; color: #4338ca; }
.benefit-card__icon--orange { background: #fff3e0; color: #e65100; }
.benefit-card__icon--teal   { background: #e0f2f1; color: #00695c; }
.benefit-card__icon--purple { background: #ede7f6; color: #5e35b1; }
.benefit-card__icon--magenta { background: #f3e5f5; color: #7b1fa2; }

[data-theme="dark"] .benefit-card__icon--blue   { background: rgba(91, 155, 245, 0.15);  color: #7fb1f8; }
[data-theme="dark"] .benefit-card__icon--green  { background: rgba(30, 215, 96, 0.15);   color: #46e07f; }
[data-theme="dark"] .benefit-card__icon--indigo { background: rgba(129, 140, 248, 0.16); color: #a5b4fc; }
[data-theme="dark"] .benefit-card__icon--orange { background: rgba(245, 158, 11, 0.16);  color: #f6b44b; }
[data-theme="dark"] .benefit-card__icon--teal   { background: rgba(45, 212, 191, 0.15);  color: #34d8c4; }
[data-theme="dark"] .benefit-card__icon--purple { background: rgba(167, 139, 250, 0.18); color: #b69dfb; }
[data-theme="dark"] .benefit-card__icon--magenta { background: rgba(206, 147, 216, 0.16); color: #ce93d8; }

.benefit-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.benefit-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===== TABS ===== */
.tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-10);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition-interactive), background var(--transition-interactive);
}

.tabs__btn:hover {
  color: var(--color-text);
}

.tabs__btn--active {
  background: var(--color-primary);
  color: #fff;
}

.tabs__btn--active:hover {
  color: #fff;
}

.interview__panel,
.prep__panel {
  display: none;
}

.interview__panel--active,
.interview__panel[hidden="false"],
.prep__panel--active,
.prep__panel[hidden="false"] {
  display: block;
}

/* Override hidden attr for active panels */
.interview__panel:not([hidden]),
.prep__panel:not([hidden]) {
  display: block;
}

/* ===== INTERVIEW STEP TAGS ===== */
.interview__step-tags {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.interview__step-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ===== INTERVIEW STAGES ===== */
.interview {
  background: var(--color-surface-2);
}

.interview__timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.interview__timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-divider);
}

.interview__step {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  position: relative;
}

.interview__step:last-child {
  margin-bottom: 0;
}

.interview__step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--color-primary);
  flex-shrink: 0;
  z-index: 1;
  transition: background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
}

.interview__step:hover .interview__step-number {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.interview__step-content {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-divider);
  flex: 1;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}

.interview__step:hover .interview__step-content {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.interview__step-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.interview__step-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.interview__step-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-weight: 500;
}

/* ===== PREPARATION ===== */
.preparation {
  background: var(--color-surface-2);
}

.prep__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.prep__card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
}

.prep__card-icon {
  font-size: 1.75rem;
  margin-bottom: var(--space-4);
}

.prep__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-5);
}

.prep__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.prep__list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  padding-left: var(--space-5);
  position: relative;
}

.prep__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.5;
}

/* ===== VACANCIES ===== */
.vacancies__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.vacancy-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  color: var(--color-text);
  transition: border-color var(--transition-interactive);
}

.vacancy-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vacancy-card__toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  padding: 20px 30px;
}

.vacancy-card__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-primary-active);
  transition: color var(--transition-interactive);
}

.vacancy-card__toggle:hover .vacancy-card__title {
  color: var(--color-primary-hover);
}

.vacancy-card__meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.vacancy-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.vacancy-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-active);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.vacancy-card__details {
  padding: 0 30px 22px;
}

.vacancy-card__description {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.vacancy-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.vacancy-details__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vacancy-details__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.vacancy-details__list {
  margin: 0;
  padding-left: 1.25em;
  list-style-type: disc;
  list-style-position: outside;
}

.vacancy-details__list li {
  color: var(--color-text-muted);
  line-height: 1.55;
  padding-left: 0.35em;
  margin-bottom: var(--space-2);
}

.vacancy-details__list li:last-child {
  margin-bottom: 0;
}

.vacancy-details__list li::marker {
  color: var(--color-text-muted);
}

.vacancy-details__skills-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vacancy-details__skills {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.vacancy-details__skill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.vacancy-card__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-full);
  padding: 10px 18px;
  font-weight: 600;
}

.vacancy-card--open .vacancy-card__arrow {
  transform: rotate(180deg);
}

/* ===== FOOTER ===== */
/* ===== FOOTER (PPM-style dark panel) ===== */
.footer {
  margin: clamp(48px, 6vw, 90px) 20px 0;
  padding: clamp(40px, 5vw, 70px) clamp(24px, 4vw, 60px) 32px;
  border-radius: 40px 40px 0 0;
  background-color: #091c4a;
  color: #fff;
  overflow: hidden;
}

.footer .container { padding-inline: 0; }

.footer__cta {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid #1e346a;
}

.footer__cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 2.5vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}

.footer__cta-subtitle {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.footer__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  height: 56px;
  padding: 0 32px;
  border-radius: 100px;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

.footer__cta-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-2px);
}

.footer__cta-btn svg { width: 18px; height: 18px; }

.footer__top {
  display: grid;
  grid-template-columns: 1.6fr 2fr auto;
  gap: 40px 60px;
}

.footer__logo { width: 230px; height: auto; }

.footer__requisites {
  margin-top: 32px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

.footer__requisites ul {
  margin-top: 10px;
  display: grid;
  row-gap: 6px;
  list-style: none;
}

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

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 4px;
}

.footer__col a {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer__col a:hover { color: #fff; }

.footer__socials {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.footer__social {
  display: block;
  width: 36px;
  height: 36px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.25s ease;
}

.footer__social:hover { opacity: 0.6; }

.footer__social--vk {
  background-image: url("data:image/svg+xml,%3Csvg%20width='35'%20height='35'%20viewBox='0%200%2035%2035'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle%20cx='17.5'%20cy='17.5'%20r='17.5'%20fill='%231D356D'%20/%3E%3Cpath%20d='M24.3771%2018.8598C24.04%2018.434%2024.1364%2018.2446%2024.3771%2017.8641C24.3814%2017.8597%2027.1643%2014.0143%2027.451%2012.7102L27.4528%2012.7093C27.5952%2012.234%2027.4528%2011.8848%2026.7638%2011.8848H24.4839C23.9036%2011.8848%2023.636%2012.1845%2023.4926%2012.5199C23.4926%2012.5199%2022.3318%2015.2984%2020.6897%2017.0995C20.1597%2017.6199%2019.9147%2017.7868%2019.6254%2017.7868C19.4829%2017.7868%2019.2614%2017.6199%2019.2614%2017.1447V12.7093C19.2614%2012.1393%2019.0989%2011.8848%2018.6184%2011.8848H15.0336C14.6696%2011.8848%2014.4532%2012.1506%2014.4532%2012.3982C14.4532%2012.9387%2015.2743%2013.0629%2015.3594%2014.5834V17.8823C15.3594%2018.6052%2015.2282%2018.7381%2014.9372%2018.7381C14.1622%2018.7381%2012.2811%2015.9483%2011.1664%2012.7553C10.9414%2012.1359%2010.7216%2011.8856%2010.1369%2011.8856H7.85617C7.20541%2011.8856%207.07422%2012.1854%207.07422%2012.5208C7.07422%2013.1133%207.84922%2016.0595%2010.6781%2019.9519C12.5635%2022.6088%2015.2187%2024.0485%2017.634%2024.0485C19.0859%2024.0485%2019.2631%2023.7287%2019.2631%2023.1788C19.2631%2020.64%2019.1319%2020.4002%2019.8591%2020.4002C20.1962%2020.4002%2020.7766%2020.567%2022.132%2021.8486C23.6811%2023.3682%2023.9357%2024.0485%2024.8028%2024.0485H27.0826C27.7325%2024.0485%2028.0618%2023.7287%2027.8724%2023.098C27.4389%2021.7712%2024.5091%2019.0422%2024.3771%2018.8598Z'%20fill='white'%20/%3E%3C/svg%3E");
}

.footer__social--tg {
  background-image: url("data:image/svg+xml,%3Csvg%20width='35'%20height='35'%20viewBox='0%200%2035%2035'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle%20cx='17.5'%20cy='17.5'%20r='17.5'%20fill='%231D356D'%20/%3E%3Cpath%20d='M6.76522%2017.389L11.2974%2018.8221L22.0585%2012.6965C22.2148%2012.608%2022.3745%2012.8053%2022.2401%2012.9206L14.0934%2019.9027L13.7908%2023.8115C13.7859%2023.877%2013.8024%2023.9423%2013.8383%2023.9989C13.8741%2024.0554%2013.9276%2024.1004%2013.9915%2024.128C14.0555%2024.1556%2014.127%2024.1644%2014.1965%2024.1533C14.2659%2024.1422%2014.3301%2024.1117%2014.3806%2024.0658L16.8887%2021.769L21.4744%2025.0009C21.9685%2025.3495%2022.6842%2025.1038%2022.8172%2024.5402L26.0101%2011.0412C26.1924%2010.2712%2025.3817%209.62119%2024.5914%209.90297L6.7427%2016.2672C6.18251%2016.467%206.19799%2017.2095%206.76522%2017.389Z'%20fill='white'%20/%3E%3C/svg%3E");
}

.footer__social--dzen {
  background-image: url("data:image/svg+xml,%3Csvg%20width='35'%20height='35'%20viewBox='0%200%2035%2035'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle%20cx='17.5'%20cy='17.5'%20r='17.5'%20fill='%231D356D'%20/%3E%3Cpath%20d='M28.1738%2017.6153V17.3866C23.4473%2017.2342%2021.2898%2017.1198%2019.5593%2015.4426C17.8822%2013.7121%2017.7602%2011.5547%2017.6153%206.82812H17.3866C17.2342%2011.5547%2017.1198%2013.7121%2015.4426%2015.4426C13.7121%2017.1198%2011.5547%2017.2418%206.82812%2017.3866V17.6153C11.5547%2017.7678%2013.7121%2017.8822%2015.4426%2019.5593C17.1198%2021.2898%2017.2418%2023.4473%2017.3866%2028.1738H17.6153C17.7678%2023.4473%2017.8822%2021.2898%2019.5593%2019.5593C21.2898%2017.8822%2023.4473%2017.7602%2028.1738%2017.6153Z'%20fill='white'%20/%3E%3C/svg%3E");
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid #1e346a;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer__legal a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer__legal a:hover { color: #fff; }

.footer__copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* ===== FOOTER — premium dark (ported from PPM /plastic PremiumFooter) ===== */
/* В тёмной теме футер сливается с премиум-фоном страницы #010407, как на /plastic:
   белый текст с пониженной прозрачностью, белая CTA, соцсети — прозрачные с рамкой. */
[data-theme="dark"] .footer {
  background-color: #010407;
}

[data-theme="dark"] .footer__cta {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* CTA — белая кнопка с тёмным текстом (premium .btn) */
[data-theme="dark"] .footer__cta-btn {
  background: #ffffff;
  color: #050505;
}

[data-theme="dark"] .footer__cta-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* Соцсети — прозрачные квадраты с рамкой и белым глифом */
[data-theme="dark"] .footer__social {
  border: 1px solid rgba(106, 106, 106, 0.39);
  border-radius: 11px;
  background-size: 22px;
}

[data-theme="dark"] .footer__social--vk {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath fill='%23fff' d='M13.2 17.7c-5.5 0-8.6-3.7-8.7-9.9h2.7c.1 4.6 2.1 6.5 3.7 6.9V7.8H13v3.9c1.5-.2 3.2-1.9 3.7-3.9h2.6c-.4 2.5-2.1 4.2-3.3 4.9 1.2.6 3.1 2 3.9 4.9h-2.9c-.6-1.9-2.1-3.4-4-3.6v3.6h-.3z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .footer__social--tg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath fill='%23fff' d='M20.4 5.4 2.3 12.2c-1.1.5-1.1 1.2 0 1.5l4.6 1.4 1.8 5.5c.2.6.1.8.7.8.5 0 .7-.2 1-.5.2-.2 1.3-1.4 2.6-2.6l4.7 3.5c.9.5 1.5.2 1.7-.8L21.6 7c.3-1.3-.4-1.9-1.2-1.6z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .footer__social--dzen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath fill='%23fff' d='M12.5 2c.4 4.9 1.6 6.1 6.5 6.5-4.9.4-6.1 1.6-6.5 6.5-.4-4.9-1.6-6.1-6.5-6.5C10.9 8.1 12.1 6.9 12.5 2zm0 13c.4 4.9 1.6 6.1 6.5 6.5-4.9.4-6.1 1.6-6.5 6.5-.4-4.9-1.6-6.1-6.5-6.5 4.9-.4 6.1-1.6 6.5-6.5z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .footer__social:hover {
  background-color: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-in {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

@keyframes reveal-fade {
  to { opacity: 1; }
}

/* ===== DARK MODE FIXES ===== */
[data-theme="dark"] .benefit-card__icon {
  filter: brightness(0.6) saturate(0.8);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__subtitle {
    margin-inline: auto;
  }

  .hero__visual {
    order: -1;
  }

  .hero__visual-circle {
    width: clamp(240px, 72vw, 400px);
    height: clamp(240px, 72vw, 400px);
  }

  .hero__pill { display: none; }

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

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

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

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

  .tabs {
    border-radius: var(--radius-lg);
  }

  .vacancy-card {
    border-radius: 14px;
  }

  .vacancy-card__toggle {
    padding: 16px 18px;
  }

  .vacancy-card__details {
    padding: 0 18px 18px;
  }

  .vacancy-card__title {
    font-size: 20px;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 30px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

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

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

  .interview__timeline::before {
    display: none;
  }

  .interview__step-number {
    width: 44px;
    height: 44px;
    font-size: var(--text-base);
  }
}