.btn-kinetic, .cta-button, .button-primary, .button-secondary {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.75rem 1.25rem; border: 0; border-radius: var(--radius-md); cursor: pointer;
  font-weight: 780; text-align: center; transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-kinetic, .cta-button, .button-primary { color: #fff; background: var(--color-primary); box-shadow: 0 8px 20px rgba(23, 105, 224, 0.18); }
.btn-kinetic:hover, .cta-button:hover, .button-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.button-secondary { color: var(--color-primary); background: var(--color-primary-soft); }
.cta-button--full { width: 100%; }

.page-hero { position: relative; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); border-radius: var(--radius-xl); color: #fff; background: #142c52; }
.page-hero::after { content: ""; position: absolute; right: -8rem; bottom: -10rem; width: 25rem; height: 25rem; border-radius: 50%; background: rgba(63, 137, 239, 0.28); }
.page-hero__content { position: relative; z-index: 1; max-width: 760px; }
.page-hero__eyebrow { margin-bottom: var(--space-3); color: #9fc4fa; font-size: 0.8rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.page-hero h1 { color: #fff; }
.page-hero__lead { max-width: 640px; margin-bottom: var(--space-6); color: #d6e2f2; font-size: clamp(1rem, 2vw, 1.2rem); }
.page-hero--city { padding: clamp(2rem, 5vw, 3.5rem); background: linear-gradient(120deg, #16325d, #1b5bb7); }

.search-bar { display: flex; gap: var(--space-3); max-width: 760px; }
.search-bar__field { min-height: 54px; flex: 1; display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-4); background: #fff; border: 1px solid transparent; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.search-bar__field svg { flex: 0 0 auto; color: var(--color-primary); }
.search-bar__field input { width: 100%; border: 0; outline: 0; color: var(--color-text); background: transparent; }
.search-bar__field input::placeholder { color: var(--color-text-soft); }
.search-bar .btn-kinetic { min-width: 150px; }
.search-bar--surface { padding: var(--space-4); background: var(--color-surface-soft); border-radius: var(--radius-card); }

.surface-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.landing-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.landing-step { padding: var(--space-5); }
.landing-step__number { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: var(--space-4); color: var(--color-primary); background: var(--color-primary-soft); border-radius: 10px; font-weight: 850; }
.landing-step p { margin: 0; color: var(--color-text-muted); }

.city-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.city-card { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.city-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.city-card__name { font-weight: 760; }
.city-card__count { display: block; margin-top: 0.15rem; color: var(--color-text-muted); font-size: 0.8rem; }
.city-card__arrow { color: var(--color-primary); font-size: 1.1rem; }

.profession-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.profession-chip, .city-link { min-height: 42px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.65rem 0.9rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 700; }
.profession-chip:hover, .city-link:hover { color: var(--color-primary); border-color: var(--color-primary); }
.profession-chip[aria-current="page"] { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.profession-chip__count, .city-link__count, .chip { padding: 0.1rem 0.45rem; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 800; }

.job-grid, .vacancy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.vacancy-card { min-width: 0; display: flex; flex-direction: column; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
.vacancy-card:hover { border-color: var(--color-border-strong); transform: translateY(-3px); box-shadow: var(--shadow-lifted); }
.vacancy-card__top { display: flex; align-items: flex-start; gap: var(--space-3); }
.vacancy-card__logo { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; padding: 7px; background: var(--color-surface-soft); border-radius: var(--radius-md); }
.vacancy-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.vacancy-card__title { margin: 0; font-size: 1.08rem; line-height: 1.3; font-weight: 780; }
.vacancy-card__offer { margin-top: var(--space-1); color: var(--color-text-muted); font-size: 0.875rem; }
.vacancy-card__income { margin: var(--space-4) 0; color: var(--color-success); font-size: 1.2rem; font-weight: 850; }
.vacancy-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-5); }
.info-row { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-text-muted); font-size: 0.8rem; }
.info-row svg { width: 16px; height: 16px; color: var(--color-text-soft); }
.vacancy-card__footer { margin-top: auto; }
.vacancy-card__details { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-md); font-weight: 780; }
.vacancy-card__details:hover { color: #fff; background: var(--color-primary); }
.logical-vacancy-card__meta { margin-top: var(--space-5); }
.logical-vacancy-stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.logical-vacancy-stats span { padding: 0.5rem 0.75rem; color: #e8f1ff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-full); font-size: 0.82rem; font-weight: 750; }

.catalog-header { margin-bottom: var(--space-5); }
.catalog-header__count { margin: 0; color: var(--color-text-muted); }
.content-stack > * + * { margin-top: var(--space-5); }
.content-section { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.content-section__title { display: flex; align-items: center; gap: var(--space-3); }
.content-section__icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 9px; }
.content-copy { color: var(--color-text-muted); line-height: 1.75; }

.vacancy-detail { padding-block: var(--space-6); }
.vacancy-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: var(--space-5); }
.vacancy-detail__main { min-width: 0; }
.vacancy-summary { padding: var(--space-6); margin-bottom: var(--space-5); }
.vacancy-summary__company { margin-bottom: var(--space-2); color: var(--color-primary); font-weight: 780; }
.vacancy-summary h1 { margin-bottom: var(--space-3); font-size: clamp(1.8rem, 4vw, 2.65rem); }
.vacancy-summary__income { margin-bottom: var(--space-4); color: var(--color-success); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 880; }
.vacancy-summary__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vacancy-summary__meta .info-row { min-height: 36px; padding: 0.45rem 0.7rem; background: var(--color-surface-soft); border-radius: var(--radius-full); }
.vacancy-detail__aside { position: sticky; top: var(--space-4); }
.apply-card { padding: var(--space-5); }
.apply-card h2 { font-size: 1.25rem; }
.apply-card__logo { width: 72px; height: 72px; display: grid; place-items: center; margin-bottom: var(--space-4); padding: var(--space-2); background: var(--color-surface-soft); border-radius: var(--radius-lg); }
.apply-card__logo img { max-height: 100%; object-fit: contain; }
.apply-card__note { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: 0.8rem; }
.mobile-apply-bar { display: none; }

.form-input { width: 100%; min-height: 48px; padding: 0.75rem 1rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.pagination { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-6) 0; }
.pagination__item { min-width: 42px; min-height: 42px; display: grid; place-items: center; padding: 0.4rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.pagination__item--active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.empty-state { padding: var(--space-7) var(--space-4); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.empty-state__icon { margin-bottom: var(--space-3); color: var(--color-text-soft); }
.empty-state__text { color: var(--color-text-muted); }
.empty-state__links { display: flex; justify-content: center; gap: var(--space-2); }
.empty-state__link { min-height: 44px; display: inline-flex; align-items: center; padding: 0.6rem 1rem; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-md); font-weight: 700; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) 0; color: var(--color-text-muted); font-size: 0.8rem; }
.breadcrumbs a { color: var(--color-primary); }
.seo-intro-block, .seo-income-block, .seo-trust-block, .seo-how-to-block, .profession-intro, .faq-item, .review-card { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.faq-item + .faq-item { margin-top: var(--space-3); }
.faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); cursor: pointer; font-weight: 750; }
.faq-answer { padding-top: var(--space-3); color: var(--color-text-muted); }

.city-selector { max-width: 920px; margin-inline: auto; }
.city-selector-results { padding-top: 0; }
.city-selector__helper { padding: var(--space-5); color: var(--color-text-muted); background: var(--color-surface-soft); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.city-selector__helper h2 { margin-bottom: var(--space-2); color: var(--color-text); font-size: 1.15rem; }

@media (max-width: 1023px) {
  .job-grid, .vacancy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vacancy-detail-grid { grid-template-columns: 1fr; }
  .vacancy-detail__aside { position: static; }
}

@media (max-width: 700px) {
  .page-hero { margin-inline: -0.625rem; padding: var(--space-6) var(--space-4); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
  .search-bar { flex-direction: column; }
  .search-bar--surface { padding: var(--space-3); }
  .search-bar .btn-kinetic { width: 100%; }
  .landing-steps, .city-grid, .job-grid, .vacancy-grid { grid-template-columns: 1fr; }
  .vacancy-card { padding: var(--space-4); }
  .vacancy-summary, .content-section { padding: var(--space-5); }
  .vacancy-detail { padding-bottom: 92px; }
  .vacancy-detail__aside .cta-button { display: none; }
  .mobile-apply-bar { position: fixed; z-index: 60; right: 0; bottom: 0; left: 0; display: block; padding: var(--space-3) max(var(--space-3), env(safe-area-inset-right)) calc(var(--space-3) + env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left)); background: rgba(255,255,255,0.96); border-top: 1px solid var(--color-border); box-shadow: 0 -10px 30px rgba(27,45,73,0.1); }
}