/* ===== Страница «Компаниям» — надстройка над styles.css =====
   φ-шкала (--g1…--g7, --phi, --minor) объявлена в styles.css и общая
   для обеих страниц; здесь только блоки, которых нет на странице студентов. */

.page-employers [id] { scroll-margin-top: 96px; }

/* Тема хедера над тёмными зонами — в общем styles.css */
.logo { display: block; }

/* ===== Hero (темный) ===== */
.emp-hero-shell {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * (var(--spacing-24) * 2 + 26px + 22px));
  padding-top: calc(var(--spacing-24) * 2 + 26px + 22px);
  background: var(--dark);
  color: #fff;
  border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
}
/* Аврора: холодный отсвет сверху + лаймовое пятно под курсором */
.emp-hero-shell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(122, 243, 255, .20), transparent 62%),
    radial-gradient(680px 420px at 82% 4%, rgba(211, 251, 82, .16), transparent 60%);
}
.emp-hero-shell::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Верх / низ героя в отношении φ: 110px сверху, 68px снизу */
.emp-hero { position: relative; z-index: 1; text-align: center; padding-block: var(--g6) var(--g5); }

.emp-hero h1 {
  color: #fff; max-width: 14ch; margin-inline: auto;
  animation: fadeUp .7s .05s both;
}
.emp-hero .marker { color: var(--ink); }
.emp-hero-sub {
  max-width: min(var(--minor), 56ch); margin: var(--g3) auto 0;
  font-size: clamp(16px, 1.5vw, 19px); color: rgba(255, 255, 255, .76);
  animation: fadeUp .7s .16s both;
}

/* Один призыв к действию: кнопка и снимающая возражения подпись под ней */
.emp-hero-cta { margin-top: var(--g5); animation: fadeUp .8s .28s both; }
.emp-hero-note { margin-top: var(--g2); font-size: var(--text-body-sm); color: rgba(255, 255, 255, .6); }


/* Цифры под героем */
.emp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--g3); max-width: 920px;
  margin: var(--g5) auto 0; padding-top: var(--g4);
  border-top: 1px solid rgba(255, 255, 255, .14);
  animation: fadeUp .8s .4s both;
}
.emp-stat { text-align: left; }
.emp-stat + .emp-stat { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: var(--g3); }
.emp-stat dt {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--color-voltage-lime); font-variant-numeric: tabular-nums;
}
.emp-stat dd { margin-top: var(--g1); font-size: var(--text-body-sm); color: rgba(255, 255, 255, .66); }

/* ===== Доверие ===== */
.emp-trust { text-align: center; }
.emp-trust h2 { max-width: 22ch; margin-inline: auto; }
.emp-trust .section-sub { max-width: 56ch; margin-inline: auto; }
.page-employers .ticker { padding-top: var(--g5); overflow: hidden; }

/* ===== Табы возможностей ===== */
.emp-tabs { margin-top: var(--g5); }
.emp-tablist { display: flex; flex-wrap: wrap; gap: var(--g1); }
.emp-tab {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--text-body-sm)/1 var(--font-ui); letter-spacing: -0.01em;
  padding: 13px 20px; border-radius: var(--radius-full);
  border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.emp-tab:hover { border-color: var(--ink); }
.emp-tab-num { font-family: var(--font-display); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.emp-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.emp-tab[aria-selected="true"] .emp-tab-num { color: var(--color-voltage-lime); }

.emp-panels { margin-top: var(--g3); }
/* Текст : иллюстрация = φ : 1 */
.emp-panel {
  display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--g5);
  align-items: center; padding: var(--g4);
  animation: fadeUp .45s both cubic-bezier(.2,.7,.2,1);
}
/* display: grid перебивает UA-стиль [hidden] — гасим явно */
.emp-panel[hidden] { display: none; }
.emp-panel:hover { transform: none; }
.emp-panel-copy h3 { font-size: clamp(21px, 2.2vw, 28px); }
.emp-panel-copy > p { margin-top: var(--g2); color: var(--muted); max-width: 46ch; }
.emp-panel-copy .list { margin-top: var(--g3); }
.emp-panel .list li::before { transform: none; }

/* Мини-мокапы в панелях */
.emp-panel-art { min-width: 0; }
.emp-mini {
  background: var(--warm); border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl); padding: var(--g3);
}
.emp-mini-head { display: flex; align-items: center; gap: var(--g1); font-size: var(--text-caption); font-weight: 600; color: var(--muted); margin-bottom: var(--g2); }
.emp-mini-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-voltage-lime); flex: 0 0 auto; }
.emp-mini-row {
  display: flex; align-items: center; gap: var(--g1);
  background: #fff; border: 1px solid var(--hairline);
  border-radius: var(--radius-xl); padding: 10px 14px;
}
.emp-mini-row + .emp-mini-row { margin-top: var(--g1); }
.emp-mini-av { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--avatar-bg); display: grid; place-items: center; font: 600 11px var(--font-display); }
.emp-mini-name { flex: 1; min-width: 0; font-size: var(--text-body-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-mini-match { flex: 0 0 auto; font-size: var(--text-caption); font-weight: 600; background: var(--color-voltage-lime); padding: 3px 10px; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; }
.emp-mini-meta { font-size: var(--text-caption); color: var(--muted); margin-top: var(--g2); }

.emp-funnel { display: grid; gap: var(--g1); }
.emp-funnel-row { display: grid; grid-template-columns: 72px 1fr 36px; align-items: center; gap: var(--g1); font-size: var(--text-caption); color: var(--muted); }
.emp-funnel-row i { height: 10px; border-radius: var(--radius-full); background: var(--color-voltage-lime); width: var(--w); }
.emp-funnel-row:nth-child(2) i { background: var(--color-periwinkle); }
.emp-funnel-row:nth-child(3) i { background: var(--color-lavender); }
.emp-funnel-row:nth-child(4) i { background: var(--color-tangerine); }
.emp-funnel-row b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }

.emp-brandcard { display: flex; align-items: center; gap: var(--g1); background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-xl); padding: 12px 14px; }
.emp-brand-logo { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: var(--color-periwinkle); display: grid; place-items: center; font: 600 14px var(--font-display); }
.emp-panel-art .mock-chips { margin-top: var(--g2); }
.emp-panel-art .mock-chips span { background: #fff; }

/* Высота столбиков : ширина блока — тоже φ */
.emp-bars { display: flex; align-items: flex-end; gap: var(--g1); height: 110px; }
.emp-bars i { flex: 1; height: var(--h); border-radius: var(--radius-lg) var(--radius-lg) 2px 2px; background: var(--color-voltage-lime); }
.emp-bars i:nth-child(even) { background: var(--color-periwinkle); }

/* ===== Тарифы: центральный план шире в √φ раз ===== */
/* Переключатель периода оплаты */
.emp-billing {
  display: inline-flex; gap: 4px; margin-top: var(--g4); padding: 4px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-full);
}
.emp-billing-option {
  display: inline-flex; align-items: center; gap: var(--g1);
  font: 600 var(--text-body-sm)/1 var(--font-ui); letter-spacing: -0.01em;
  padding: 11px 20px; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.emp-billing-option span { font-weight: 500; font-size: var(--text-caption); color: var(--faint); }
.emp-billing-option:hover { color: var(--ink); }
.emp-billing-option[aria-selected="true"] { background: var(--ink); color: #fff; }
.emp-billing-option[aria-selected="true"] span { color: var(--color-voltage-lime); }

.emp-plans { display: grid; grid-template-columns: 1fr 1.272fr 1fr; gap: var(--g2); margin-top: var(--g4); align-items: stretch; }
/* display: grid перебивает UA-стиль [hidden] — гасим явно, как у панелей табов */
.emp-plans[hidden] { display: none; }
.emp-plan { display: flex; flex-direction: column; padding: var(--g4); }
.emp-plan h3 { font-size: clamp(20px, 2vw, 26px); }
/* Цена — фиксированная сумма, а не «от». Этого требует платёжный провайдер,
   и покупателю так честнее: видно, сколько списывать будут. */
.emp-plan-price { display: flex; align-items: baseline; gap: var(--g1); margin-top: var(--g2); }
.emp-plan-price b {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.emp-plan-price span { font-size: var(--text-body-sm); color: var(--muted); }
.emp-plan--featured .emp-plan-price span { color: rgba(20, 21, 28, .7); }
.emp-plan-lead { margin-top: var(--g1); color: var(--muted); font-size: var(--text-body-sm); }
/* Нижний отступ обязателен: когда карточки одной высоты, margin-top: auto у
   пакета обнуляется и линия прилипает к последнему пункту, подчёркивая его. */
.emp-plan .list { margin-top: var(--g3); margin-bottom: var(--g3); }
/* Карточки тарифов переключаются табом и не участвуют в scroll-reveal,
   поэтому буллитам нечего ждать — иначе они остаются в scale(0). */
.emp-plan .list li::before { transform: none; }
/* Докупка контактов — отдельная услуга со своей фиксированной ценой,
   поэтому и в карточке она отделена от того, что входит в тариф */
.emp-plan-addon {
  margin-top: auto; padding-top: var(--g3);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-caption); color: var(--muted);
}
.emp-plan--featured .emp-plan-addon { border-top-color: rgba(20, 21, 28, .2); color: rgba(20, 21, 28, .72); }
.emp-plan--featured { background: var(--surface-accent-surface); border-color: transparent; }
.emp-plan--featured::before { display: none; }
.emp-plan--featured .emp-plan-lead { color: rgba(20, 21, 28, .78); }
.emp-plan--featured .list-check li::before { background: var(--ink); }

/* ===== Сеть в цифрах ===== */
.page-employers .vault { padding: var(--section-gap) var(--spacing-24) 0; }
.page-employers .vault__card { padding: var(--g6) var(--g5); }
.page-employers .vault__title { margin-top: 0; }
.page-employers .vault__lead { margin-top: var(--g3); }
.emp-netstats {
  position: relative; z-index: 1; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g4);
  margin-top: var(--g6);
}
.emp-netstats li + li { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: var(--g4); }
.emp-netstats b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1; letter-spacing: -0.035em;
  color: var(--color-voltage-lime); font-variant-numeric: tabular-nums;
}
.emp-netstats span { display: block; margin-top: var(--g2); font-size: var(--text-body-sm); color: rgba(255, 255, 255, .68); }

/* ===== Отзывы: φ : 1 ===== */
.emp-quotes { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--g2); margin-top: var(--g5); }
.emp-quote { display: flex; flex-direction: column; padding: var(--g4); }
.emp-quote blockquote {
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.45; letter-spacing: -0.015em; text-wrap: pretty;
}
.emp-quote blockquote::before { content: "«"; }
.emp-quote blockquote::after { content: "»"; }
.emp-quote figcaption { margin-top: auto; padding-top: var(--g4); display: grid; gap: 2px; }
.emp-quote figcaption b { font-size: var(--text-body-sm); }
.emp-quote figcaption span { font-size: var(--text-caption); color: var(--muted); }

/* ===== FAQ: колонки в золотом делении ===== */
.page-employers .faq-layout { grid-template-columns: 1fr 1.618fr; gap: var(--g5); }

/* ===== Финальный блок ===== */
.page-employers .final-cta { padding-block: var(--g6) var(--g5); }

/* Форма для работодателей: кабинета для них пока нет, поэтому собираем контакты */
.emp-lead { max-width: 620px; margin-inline: auto; text-align: left; }
/* Почта длиннее телефона — колонки делим в φ */
.emp-lead-row { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--g2); margin-top: var(--g2); }
.emp-field { display: grid; gap: 6px; min-width: 0; }
.emp-field > span { font-size: var(--text-caption); font-weight: 500; color: rgba(255, 255, 255, .6); }
.emp-field > span i { font-style: normal; color: rgba(255, 255, 255, .35); }
.emp-field input {
  width: 100%; padding: 15px 20px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-buttons);
  font: 400 var(--text-body)/1.3 var(--font-ui); color: #fff;
  background: rgba(255, 255, 255, .06); outline: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.emp-field input::placeholder { color: rgba(255, 255, 255, .38); }
.emp-field input:hover { border-color: rgba(255, 255, 255, .3); }
.emp-field input:focus { border-color: var(--color-voltage-lime); background: rgba(255, 255, 255, .09); }
/* Ошибка держится, пока поле не исправят, но фокус её перебивает —
   иначе человек правит поле и видит красную рамку под курсором */
.emp-field input[aria-invalid="true"] { border-color: var(--color-tangerine); background: rgba(242, 96, 58, .08); }
.emp-field input[aria-invalid="true"]:focus { border-color: var(--color-voltage-lime); background: rgba(255, 255, 255, .09); }
/* Карточка компании, подтянутой по ИНН */
.emp-company {
  display: grid; gap: 4px; margin-top: var(--g2); padding: 14px 18px;
  border: 1px solid rgba(211, 251, 82, .3); border-radius: var(--radius-buttons);
  background: rgba(211, 251, 82, .07);
  font-size: var(--text-body-sm); color: rgba(255, 255, 255, .85);
}
.emp-company b { color: #fff; font-weight: 600; }
.emp-company span { font-size: var(--text-caption); color: rgba(255, 255, 255, .6); }
.emp-company .emp-company-warn { color: var(--color-tangerine); }
.emp-company.is-error { border-color: rgba(242, 96, 58, .45); background: rgba(242, 96, 58, .08); }

.emp-lead .btn { width: 100%; margin-top: var(--g3); }
.emp-lead-status { margin-top: var(--g2); min-height: 1.4em; font-size: var(--text-body-sm); color: rgba(255, 255, 255, .7); text-align: center; }
.emp-lead-status.is-ok { color: var(--color-voltage-lime); }
.emp-lead-status.is-error { color: var(--color-tangerine); }

@media (max-width: 640px) {
  .emp-lead-row { grid-template-columns: 1fr; }
}

/* ===== Адаптив ===== */
/* Боковой колонке нужно 328px, иначе «10 вакансий с ИИ-заполнением» ломается
   пополам. При сетке 1fr 1.272fr 1fr и зазорах это ровно вьюпорт 1174px. */
@media (max-width: 1180px) {
  .emp-plans { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .emp-panel { gap: var(--g4); }
}
@media (max-width: 960px) {
  .emp-panel { grid-template-columns: 1fr; }
  .emp-panel-art { order: -1; }
  .emp-panel-copy > p { max-width: none; }
  .emp-quotes { grid-template-columns: 1fr; }
  .emp-netstats { grid-template-columns: 1fr; gap: var(--g3); }
  .emp-netstats li + li { border-left: 0; padding-left: 0; }
  .page-employers .vault__card { padding: var(--g5) var(--g4); }
}
@media (max-width: 880px) {
  .page-employers .faq-layout { grid-template-columns: 1fr; gap: var(--g3); }
}
@media (max-width: 780px) {
  .emp-stats { grid-template-columns: 1fr 1fr; gap: var(--g3) var(--g2); }
  .emp-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .emp-hero { padding-block: var(--g5) var(--g4); }
  /* «НАЧИНАЮЩИХ» — самое длинное слово заголовка, оно и задаёт потолок кегля */
  .emp-hero h1 { font-size: clamp(26px, 8vw, 42px); max-width: none; }
  .emp-hero-cta .btn { width: 100%; }
  .emp-tablist { gap: 6px; }
  .emp-tab { padding: 11px 14px; }
  .emp-panel, .emp-plan, .emp-quote { padding: var(--g3); }
  .emp-bars { height: 90px; }
  /* На узком экране имени не хватает строки — даём перенос вместо многоточия */
  .emp-mini { padding: var(--g2); }
  .emp-mini-row { padding: 10px; }
  .emp-mini-name { white-space: normal; overflow: visible; }
  /* «работодателей» — самое длинное слово блока, режем паддинг, а не слово */
  .page-employers .vault__card { padding: var(--g4) var(--g3); }
  .page-employers .vault__title { font-size: clamp(24px, 6.6vw, 50px); }
}

@media (pointer: coarse) {
  .emp-tab { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .emp-panel, .emp-hero h1, .emp-hero-sub, .emp-hero-cta, .emp-stats { animation: none; }
}