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

:root {
  --red: #BE1A1F;
  --red-dark: #780D0E;
  --dark: #0F1215;
  --text: #CFCECD;
  --container: 1200px;
}

@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeueCyrillic.woff2') format('woff2');
  font-display: block;
  font-style: normal;
  font-weight: 400;
}

body {
  background: var(--dark);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  -webkit-font-smoothing: antialiased;
}

/* ===== BUTTONS ===== */

.button {
  padding: 10px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  border: none;
}

.button--red {
  background: var(--red-dark);
  color: #DEDDDD;
}

.button--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #CAC9C9;
}

/* ===== HEADER ===== */

.header {
  background: var(--dark);
  padding-top: 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header__logo-block {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__logo {
  display: block;
  flex-shrink: 0;
}

.header__divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.header__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
}

.header__city {
  display: flex;
  gap: 8px;
}

.header__city-name {
  color: #FF0000;
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.header__city-name:hover {
  text-decoration: underline;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.header__phone {
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
}

.header__line {
  max-width: var(--container);
  margin: 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

/* ===== HERO ===== */

.hero {
  background: var(--dark);
  overflow: hidden;
}

.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.hero__text {
  flex: 0 0 582px;
  display: flex;
  flex-direction: column;
  gap: 29px;
  padding-left: 20px;
}

.hero__title-block {
  display: flex;
  flex-direction: column;
  gap: 29px;
}

.red-line {
  width: 76px;
  height: 6px;
  background: var(--red);
}

h1 {
  color: var(--text);
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.94;
  font-size: clamp(1.5rem, 3.85vw, 3.6rem);
}

h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 50px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 0.94;
}

h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
}

.hero__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero__item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.hero__item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.hero__item-line {
  width: 2px;
  height: 38px;
  background: var(--red);
  flex-shrink: 0;
}

.hero__item-line--short {
  height: 19px;
}

.hero__item p {
  color: var(--text);
  font-size: 16px;
}

.hero__buttons {
  display: flex;
  align-items: center;
  gap: 40px;
}

.hero__image {
  flex: 1;
  overflow: hidden;
}

.hero__image img {
  display: block;
  width: 100%;
  height: 529px;
  object-fit: cover;
  object-position: left center;
}

/* ===== PERKS ===== */

.perks {
  background: var(--dark);
}

.perks__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  align-items: flex-start;
  gap: 35px;
}

.perks__content {
  flex: 0 0 714px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.perks__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.perks__title {
}

.perks__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.perks__item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.perks__item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.perks__item--tall {
  align-items: flex-start;
}

.perks__line {
  width: 2px;
  height: 38px;
  background: var(--red);
  flex-shrink: 0;
}

.perks__line--tall {
  height: 76px;
}

.perks__item p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}

.perks__image {
  flex: 1;
}

.perks__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== GALLERY ===== */

.gallery {
  background: var(--dark);
}

.gallery__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.gallery__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.gallery__title {
}

.gallery__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ===== SERVICE INFO ===== */

.service-info {
  background: var(--dark);
}

.service-info__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
}

.service-info__card {
  background: rgba(20, 24, 27, 0.5);
  outline: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  gap: 127px;
  padding-left: 50px;
  overflow: hidden;
}

.service-info__content {
  flex: 0 0 411px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 0;
}

.service-info__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.service-info__title {
}

.service-info__desc {
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
  max-width: 402px;
}

.service-info__image {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

.service-info__image img {
  display: block;
  width: 611px;
  height: 419px;
  object-fit: cover;
}

/* ===== REVIEWS ===== */

.reviews {
  background: var(--dark);
}

.reviews__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.reviews__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.reviews__title {
}

.reviews__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.reviews__card {
  padding: 41px 42px 41px 34px;
  background: #14181B;
  outline: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.reviews__photo {
  width: 136px;
  height: 136px;
  background: #D9D9D9;
  flex-shrink: 0;
}

.reviews__name {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 37px;
  line-height: 1;
  color: var(--text);
}

.reviews__quote {
  font-size: 16px;
  font-style: italic;
  color: var(--text);
  line-height: 1.2;
}

.reviews__line {
  width: 21px;
  height: 3px;
  background: var(--red);
}

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

.reviews__body p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}

/* ===== BANNER ===== */

.banner {
  background: var(--dark);
}

.banner__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
}

.banner__content {
  background: var(--red-dark);
  padding: 45px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.banner__title {
  font-size: clamp(1.5rem, 3.5vw, 3rem);
}

.banner__text {
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}

.banner__text p {
  margin: 0;
  line-height: 1.6;
}

/* ===== VACANCY PICK ===== */

.vacancy-pick {
  background: var(--dark);
}

.vacancy-pick__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.button--pick {
  width: 214px;
  height: 39px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button--service {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.vacancy-pick__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.vacancy-pick__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 486px;
}

.vacancy-pick__title {
}

.vp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vp-list__item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.vp-list__item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.vp-list__item--tall {
  align-items: flex-start;
}

.vp-list__line {
  width: 2px;
  height: 38px;
  background: var(--red);
  flex-shrink: 0;
}

.vp-list__line--tall {
  height: 95px;
}

.vp-list__item p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}

.vacancy-pick__image {
  flex-shrink: 0;
}

.vacancy-pick__image img {
  display: block;
  width: 496px;
  height: 512px;
  object-fit: cover;
}

/* ===== VACANCIES ===== */

.vacancies {
  background: var(--dark);
}

.vacancies__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.vacancies__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 463px;
}

.vacancies__title {
}

.vacancies__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.vacancies__card {
  padding: 29px 30px;
  background: #14181B;
  outline: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.vacancies__card--cta {
  background: var(--red-dark);
  outline: none;
  cursor: pointer;
  padding-bottom: 46px;
}

.vacancies__icon {
  display: block;
  flex-shrink: 0;
}

.vacancies__card-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vacancies__card-title {
}

.vacancies__card-line {
  width: 18px;
  height: 2px;
  background: var(--red-dark);
}

.vacancies__card-salary {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

.vacancies__cta-text {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--text);
  text-transform: uppercase;
}

.vacancies__arrow {
  position: relative;
  width: 26px;
  height: 2px;
  background: #CFCECD;
}

.vacancies__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-top: 2px solid #CFCECD;
  border-right: 2px solid #CFCECD;
}

/* ===== PAYMENTS ===== */

.payments {
  background: var(--dark);
}

.payments__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 39px 20px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.payments__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 640px;
}

.payments__title {
  font-size: clamp(1.5rem, 3.5vw, 3.125rem);
}

.payments__list {
  list-style: none;
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.payments__card {
  flex: 1;
  min-height: 148px;
  padding: 29px 20px 23px;
  background: #14181B;
  outline: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.payments__card--total {
  background: var(--red-dark);
  outline: none;
}

.payments__card-label {
}

.payments__card-sum {
  font-size: clamp(1.5rem, 3.5vw, 2.625rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  text-align: center;
}

.payments__card-sum--bold {
  font-weight: 600;
}

.payments__card-line {
  width: 18px;
  height: 2px;
  background: var(--red-dark);
  margin-top: auto;
}

.payments__card-line--light {
  background: var(--text);
}

/* ===== BENEFITS ===== */

.benefits {
  background: var(--dark);
}

.benefits__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.benefits__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 722px;
}

.benefits__title {
}

.benefits__list {
  list-style: none;
  display: flex;
  gap: 24px;
}

.benefits__card {
  flex: 1;
  min-height: 191px;
  padding: 29px 30px 20px;
  background: #14181B;
  outline: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.benefits__icon {
  display: block;
  flex-shrink: 0;
}

.benefits__card-title {
  margin-top: auto;
}

.benefits__card-line {
  width: 18px;
  height: 2px;
  background: var(--red-dark);
}

.benefits__links {
  font-size: 16px;
  color: var(--text);
}

.benefits__link {
  color: var(--red-dark);
  text-decoration: underline;
}

/* ===== CITIES ===== */

.cities {
  background: var(--dark);
}

.cities__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.cities__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 311px;
}

.cities__title {
}

.cities__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.cities__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 29px 20px;
  background: #14181B;
  outline: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  transition: outline-color 0.2s;
}

.cities__card:hover {
  outline-color: rgba(255, 255, 255, 0.5);
}

.cities__arrow {
  margin-left: auto;
  width: 26px;
  height: 2px;
  background: #AB1417;
  position: relative;
  flex-shrink: 0;
}

.cities__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-top: 2px solid #AB1417;
  border-right: 2px solid #AB1417;
}

.cities__pin {
  display: block;
  flex-shrink: 0;
}

.cities__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  text-transform: uppercase;
}

/* ===== INFO LINKS ===== */

.info-links {
  background: var(--dark);
}

.info-links__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.info-links__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 422px;
}

.info-links__title {
}

.info-links__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.info-links__card {
  display: flex;
  flex-direction: column;
  gap: 39px;
  padding: 29px 30px 46px;
  background: #14181B;
  outline: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  transition: outline-color 0.2s;
}

.info-links__card:hover {
  outline-color: rgba(255, 255, 255, 0.5);
}

.info-links__arrow {
  width: 26px;
  height: 2px;
  background: #AB1417;
  position: relative;
  margin-top: auto;
}

.info-links__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-top: 2px solid #AB1417;
  border-right: 2px solid #AB1417;
}

.info-links__icon {
  display: block;
  flex-shrink: 0;
}

.info-links__card-title {
  color: var(--text);
}

/* ===== CTA BANNER ===== */

.cta-banner {
  background: var(--dark);
}

.cta-banner__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
}

.cta-banner__card {
  background: rgba(20, 24, 27, 0.5);
  outline: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  gap: 57px;
  padding-left: 50px;
  overflow: hidden;
}

.cta-banner__content {
  flex: 0 0 457px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 0;
}

.cta-banner__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.cta-banner__title {
}

.cta-banner__image {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

.cta-banner__image img {
  display: block;
  width: 587px;
  height: 419px;
  object-fit: cover;
}

/* ===== FAQ ===== */

.faq {
  background: var(--dark);
}

.faq__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.faq__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.faq__title {
}

.faq__list {
  list-style: none;
}

.faq__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.faq__item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.faq__icon {
  flex-shrink: 0;
  width: 16px;
  color: var(--red);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.faq__icon::before {
  content: '+';
}

details[open] .faq__icon::before {
  content: '—';
}

.faq__question {
  font-size: 26px;
  color: var(--text);
}

.faq__answer {
  padding: 0 0 20px 36px;
  border-left: 2px solid var(--red);
  margin-left: 0;
}

.faq__answer p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}

/* ===== FOOTER ===== */

.footer {
  background: var(--dark);
  overflow: hidden;
}

.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.footer__content {
  flex: 0 0 588px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: relative;
  z-index: 1;
  padding-left: 20px;
}

.footer__header {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 341px;
}

.footer__title {
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.footer__nav-heading {
  color: var(--text);
  line-height: 1.2;
}

.footer__nav-links {
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}

.footer__nav-links a {
  color: var(--text);
  text-decoration: underline;
}

.footer__nav-links a:hover {
  color: rgba(207, 206, 205, 0.7);
}

.footer__nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

.footer__legal-text {
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
}

.footer__privacy {
  font-size: 16px;
  color: var(--text);
  text-decoration: underline;
}

.footer__privacy:hover {
  color: rgba(207, 206, 205, 0.7);
}

.footer__image-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.footer__image-wrap img {
  display: block;
  width: 100%;
  height: 592px;
  object-fit: cover;
  object-position: left center;
}

.footer__image-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(15, 18, 21, 0) 45%, #0F1215 100%);
  pointer-events: none;
}

/* =====================
   TABLET — 768px
   ===================== */

@media (max-width: 768px) {

  /* Контейнер 720px — явно на каждом __inner */
  .header__inner,
  .hero__inner,
  .benefits__inner,
  .payments__inner,
  .vacancies__inner,
  .vacancy-pick__inner,
  .banner__inner,
  .perks__inner,
  .reviews__inner,
  .service-info__inner,
  .gallery__inner,
  .cta-banner__inner,
  .faq__inner,
  .cities__inner,
  .info-links__inner {
    max-width: 720px;
    padding-left: 0;
    padding-right: 0;
  }

  .header__line { max-width: 720px; }

  /* Все секции не выходят за viewport */
  .header, .hero, .benefits, .payments, .vacancies,
  .vacancy-pick, .banner, .perks, .reviews,
  .service-info, .gallery, .cta-banner, .faq,
  .cities, .info-links, .footer {
    overflow-x: hidden;
  }

  /* Header — 1 строка: лого+инфо слева, кнопка справа */
  .header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 16px;
  }
  .header__phone { display: none; }
  .header__nav { gap: 0; }

  /* Hero — текст поверх картинки */
  .hero__inner { position: relative; }
  .hero__text {
    flex: none;
    width: 100%;
    padding-left: 0;
    position: relative;
    z-index: 1;
  }
  .hero__image {
    position: absolute;
    right: 0;
    top: 0;
    width: 557px;
    flex: none;
    overflow: hidden;
  }
  .hero__image img {
    width: 557px;
    height: 529px;
    object-position: left center;
  }

  /* Benefits — 2 колонки */
  .benefits__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Payments — 1 колонка */
  .payments__list {
    flex-direction: column;
    gap: 20px;
  }

  /* Vacancies — 2 колонки */
  .vacancies__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Vacancy pick — стек */
  .vacancy-pick__inner {
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
  }
  .vacancy-pick__content { flex: none; width: 100%; }
  .vacancy-pick__image { width: 100%; }
  .vacancy-pick__image img { width: 100%; height: 743px; }

  /* Perks — стек */
  .perks__inner {
    flex-direction: column;
    gap: 35px;
  }
  .perks__content { flex: none; width: 100%; }
  .perks__image { width: 100%; }
  .perks__image img { width: 100%; height: 503px; }

  /* Reviews — слайдер */
  .reviews__list {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .reviews__list::-webkit-scrollbar { display: none; }
  .reviews__card {
    flex: 0 0 calc(100% - 24px);
    scroll-snap-align: start;
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
  }

  /* Service info — стек */
  .service-info__card {
    flex-direction: column;
    padding-left: 0;
    gap: 32px;
    align-items: flex-start;
  }
  .service-info__content { flex: none; padding: 24px 0 0 30px; }
  .service-info__image { width: 100%; align-self: auto; }
  .service-info__image img { width: 100%; height: 494px; }

  /* Gallery — слайдер */
  .gallery__grid {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .gallery__grid::-webkit-scrollbar { display: none; }
  .gallery__item {
    flex: 0 0 calc(50% - 2px);
    scroll-snap-align: start;
  }
  .gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
  }

  /* CTA Banner — стек */
  .cta-banner__card {
    flex-direction: column;
    padding-left: 0;
    gap: 57px;
    align-items: flex-start;
  }
  .cta-banner__content { flex: none; padding: 24px 0 0 30px; }
  .cta-banner__image { width: 100%; align-self: auto; }
  .cta-banner__image img { width: 100%; height: 514px; }

  /* Cities — 2 колонки */
  .cities__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Info links — 2 колонки */
  .info-links__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Footer — стек, в сетке 720px */
  .footer__inner {
    max-width: 720px;
    flex-direction: column;
    padding: 0;
  }
  .footer__content { flex: none; width: 100%; padding: 40px 0; }
  .footer__image-wrap { width: 100%; }
  .footer__image-wrap img { height: 400px; }
  .footer__image-gradient {
    background: linear-gradient(180deg, #0F1215 0%, rgba(15, 18, 21, 0) 40%);
  }
}

/* =====================
   MOBILE — 480px
   ===================== */

@media (max-width: 480px) {

  /* Шрифты */
  h1 { font-size: clamp(1.2rem, 7.5vw, 3rem); line-height: 0.92; }
  h2 { font-size: 41px; line-height: 0.94; }
  h3 { font-size: 26px; line-height: 1; }
  body { font-size: 12px; }
  p, li, span, a, div { font-size: 12px; }

  /* Контейнер 343px — паддинг 16px с каждой стороны */
  .header__inner,
  .hero__inner,
  .benefits__inner,
  .payments__inner,
  .vacancies__inner,
  .vacancy-pick__inner,
  .banner__inner,
  .perks__inner,
  .reviews__inner,
  .service-info__inner,
  .gallery__inner,
  .cta-banner__inner,
  .faq__inner,
  .cities__inner,
  .info-links__inner {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  /* Все кнопки в контенте — 100% ширины, текст по центру */
  .hero__buttons .button,
  .vacancy-pick__content .button,
  .banner__content .button,
  .service-info__content .button,
  .cta-banner__content .button,
  .perks__content .button {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 12px;
  }

  /* Логотип меньше на мобиле */
  .header__logo { width: 120px; height: auto; }

  /* Кнопка в шапке — авто ширина, справа */
  .header__nav .button {
    width: auto;
    font-size: 12px;
    padding: 10px 16px;
    white-space: nowrap;
  }

  /* Header */
  .header__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .header__divider, .header__info { display: none; }
  .header__line { max-width: 100%; padding: 0 16px; }

  /* Hero */
  .hero__inner {
    flex-direction: column;
    padding-bottom: 0;
    gap: 20px;
    position: static;
  }
  .hero__text { flex: none; width: 100%; padding-left: 0; position: static; }
  .hero__image { position: static; width: 100%; flex: none; overflow: hidden; }
  .hero__image img { width: 100%; height: 240px; object-position: center top; }
  .hero__buttons { flex-wrap: wrap; gap: 12px; }
  .hero__buttons .button { flex: 1; text-align: center; }

  /* Benefits — 1 колонка */
  .benefits__list { grid-template-columns: 1fr; gap: 12px; }

  /* Payments */
  .payments__list { gap: 12px; }
  .payments__card-sum { font-size: 32px; }

  /* Vacancies — слайдер */
  .vacancies__list {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 12px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    grid-template-columns: unset;
  }
  .vacancies__list::-webkit-scrollbar { display: none; }
  .vacancies__card {
    flex: 0 0 calc(100% - 24px);
    scroll-snap-align: start;
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
  }

  /* Vacancy pick — картинка полная высота */
  .vacancy-pick__inner { gap: 24px; }
  .vacancy-pick__image img { height: auto; aspect-ratio: 3 / 4; }

  /* Banner */
  .banner__content { padding: 24px 16px; }

  /* Perks */
  .perks__image img { height: auto; aspect-ratio: 4 / 3; }

  /* Reviews — слайдер, кнопки через JS */
  .reviews__list { gap: 12px; }
  .reviews__card { flex: 0 0 calc(100% - 12px); padding: 24px 16px; }

  /* Service info — кнопка выравнена */
  .service-info__content { padding: 24px 16px 0; flex: none; align-self: auto; }
  .service-info__image img { height: auto; aspect-ratio: 4 / 3; }

  /* Gallery — слайдер по 1 */
  .gallery__grid { gap: 12px; }
  .gallery__item { flex: 0 0 calc(100% - 12px); }
  .gallery__item img { aspect-ratio: 4 / 3; height: auto; }

  /* CTA Banner — кнопка выравнена */
  .cta-banner__content { padding: 24px 16px 0; flex: none; align-self: auto; }
  .cta-banner__image img { height: auto; aspect-ratio: 4 / 3; }

  /* FAQ */
  .faq__question { font-size: 26px; }
  .faq__summary { gap: 12px; }

  /* Cities — 1 колонка */
  .cities__list { grid-template-columns: 1fr; gap: 12px; }

  /* Info links — 1 колонка */
  .info-links__list { grid-template-columns: 1fr; gap: 12px; }

  /* Footer */
  .footer__inner { max-width: 100%; }
  .footer__content { padding: 32px 16px; }
  .footer__image-wrap img { height: 240px; }

  /* Слайдер кнопки — только на мобиле */
  .slider-controls { display: flex; }
}

/* ===== MODAL ===== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] { display: none; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

.modal__box {
  position: relative;
  z-index: 1;
  width: 401px;
  background: var(--dark);
  padding: 37px 24px;
  display: flex;
  flex-direction: column;
  gap: 37px;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  opacity: 0.6;
}

.modal__close:hover { opacity: 1; }

.modal__title {
  text-align: center;
  font-size: 50px;
  line-height: 1;
  color: var(--text);
}

.modal__subtitle {
  text-align: center;
  font-size: 16px;
  color: var(--text);
  line-height: 1.2;
  margin-top: -20px;
}

.modal__form { display: flex; flex-direction: column; gap: 20px; }

.modal__fields { display: flex; flex-direction: column; gap: 20px; }

.modal__label { display: block; }

.modal__input {
  width: 100%;
  height: 39px;
  padding: 10px 20px;
  background: white;
  border: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #14181B;
  box-sizing: border-box;
}

.modal__input::placeholder { color: #14181B; }

.modal__input:focus { outline: 2px solid var(--red); }

.modal__input--error { outline: 2px solid var(--red) !important; }

.modal__consent--error .modal__checkbox { outline: 2px solid var(--red); }

.modal__consent-error {
  display: none;
  font-size: 12px;
  color: var(--red);
  margin-top: 6px;
  line-height: 1.3;
}

.modal__submit {
  width: 100%;
  height: 39px;
  text-align: center;
  justify-content: center;
  font-size: 16px;
}

.modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.modal__checkbox {
  width: 10px;
  height: 10px;
  min-width: 10px;
  margin-top: 4px;
  cursor: pointer;
  accent-color: var(--red);
}

.modal__consent span {
  font-size: 14px;
  color: var(--text);
  line-height: 1.2;
}

@media (max-width: 480px) {
  .modal__box {
    width: 100%;
    margin: 0 16px;
    padding: 32px 16px;
  }
  .modal__title { font-size: 36px; }
}

/* ===== SLIDER CONTROLS ===== */

.slider-controls {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.slider-btn {
  width: 44px;
  height: 44px;
  background: #14181B;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.slider-btn:hover { background: var(--red-dark); }

.slider-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.slider-dot {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.slider-dot--active { background: var(--red); }

/* Вакансии — кнопки только на мобиле */
.vacancies__inner .slider-controls { display: none; }

/* На планшете кнопки показываем для reviews и gallery */
@media (max-width: 768px) {
  .reviews__inner .slider-controls,
  .gallery__inner .slider-controls { display: flex; }
}

@media (max-width: 480px) {
  .vacancies__inner .slider-controls { display: flex; }
}

/* ===== GEO BANNER ===== */

.geo-banner {
  background: #14181B;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 20px;
  position: sticky;
  top: 80px;
  z-index: 99;
}

.geo-banner__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.geo-banner__text {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  min-width: 200px;
}

.geo-banner__text strong {
  color: #FF0000;
}

.geo-banner__btn {
  background: var(--red-dark);
  color: #DEDDDD;
  border: none;
  padding: 8px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.geo-banner__btn:hover { background: var(--red); }

.geo-banner__close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  opacity: 0.4;
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}

.geo-banner__close:hover { opacity: 1; }

@media (max-width: 480px) {
  .geo-banner { top: 56px; }
  .geo-banner__text { font-size: 12px; }
}

/* ===== CITY MODAL ===== */

.city-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.city-modal[hidden] { display: none; }

.city-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.city-modal__box {
  position: relative;
  z-index: 1;
  width: 820px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.city-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #333;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  z-index: 2;
  opacity: 0.5;
}

.city-modal__close:hover { opacity: 1; }

.city-modal__title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  text-transform: none;
  text-align: center;
  padding: 32px 48px 20px;
  line-height: 1.2;
  flex-shrink: 0;
}

.city-modal__search-wrap {
  padding: 0 24px 16px;
  flex-shrink: 0;
}

.city-modal__search {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #ddd;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #1a1a1a;
  outline: none;
  box-sizing: border-box;
}

.city-modal__search:focus { border-color: #BE1A1F; }
.city-modal__search::placeholder { color: #aaa; }

.city-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 24px 24px;
  overflow-y: auto;
}

.city-btn {
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #ddd;
  color: #1a1a1a;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  text-decoration: none;
  display: block;
  line-height: 1.2;
}

.city-btn:hover { border-color: #BE1A1F; color: #BE1A1F; }

.city-btn--active {
  border-color: #BE1A1F;
  color: #BE1A1F;
  font-weight: 600;
}

.city-modal__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px;
  color: #666;
  font-size: 16px;
}

@media (max-width: 480px) {
  .city-modal__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .city-modal__title { font-size: 18px; padding: 24px 40px 16px; }
}

/* ===== COOKIE BANNER ===== */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 990;
  background: #1a1e22;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 16px 20px;
}

.cookie-banner__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.cookie-banner__text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
}

.cookie-banner__link {
  color: var(--text);
  text-decoration: underline;
}

.cookie-banner__btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 10px 24px;
  font-size: 14px;
}

@media (max-width: 480px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-banner__btn { text-align: center; }
}