/* =========================================================
   main.css — single dark theme (military / tactical)
   ========================================================= */

/* ---------- Theme tokens + Bootstrap vars ---------- */
:root{
  /* Layout */
  --header-h: 76px;
  --sidebar-w: 320px;

  /* Core palette */
  --bg: #1C1D22;                 /* deep background */
  --surface: rgba(49,59,68,.28); /* alternating screen surface */
  --card: rgba(49,59,68,.62);    /* card surface */
  --text: #FFFFFF;               /* main text */
  --muted: #FFFFFF;              /* secondary text (kept white for readability) */
  --border: rgba(170,168,173,.18);

  /* Accents */
  --primary: #8B4944;            /* rust accent */
  --primary-rgb: 139,73,68;
  --alert: #E62815;              /* strong red */
  --alert-rgb: 230,40,21;
  --link: #8B4944;

  /* Effects */
  --radius: 0.5rem;
  --shadow: 0 14px 34px rgba(0,0,0,.22);
  --shadow-sm: 0 10px 24px rgba(0,0,0,.18);

  /* Textures / images (keep both paths as fallback) */
  --card-pattern: url("static/image/bg-card.png"), url("assest/image/bg-card.png");
  --hero-image: url("assest/image/hero-image.png"), url("static/image/hero-image.png");
  --duties-image: url("assest/image/respons-bg.png"), url("static/image/respons-bg.png");

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --t-fast: 180ms;
  --t: 260ms;

  /* Bootstrap overrides (loaded before this file) */
  --bs-body-font-family: Manrope,sans-serif;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--alert);
  --bs-secondary: #313B44;
  --bs-secondary-rgb: 49,59,68;
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-sm: var(--radius);
}

/* ---------- Typography: avoid ultra-bold ---------- */
h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
strong,
.fw-bold{
  font-weight: 600 !important;
}

html, body{ height: 100%; }

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

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--bs-body-font-family);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links */
a{
  color: var(--link);
  text-decoration: none;
}
a:hover{
  color: var(--alert);
  text-decoration: none;
}

.nowrap{ white-space: nowrap; }

/* Keep headings readable on dark */
h1,h2,h3,h4,h5,h6,
.screen-title,
.cta-card__title{
  color: rgba(255,255,255,.94);
}

/* Bootstrap helpers: keep readable on dark */
.text-muted,
.text-secondary,
.text-body-secondary,
.form-text,
small, .small,
.muted, .meta, .help-text{
  color: #fff !important;
}

/* Safety: if any icon is forced to black by base CSS, inherit from parent instead */
i.bi{ color: inherit !important; }

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  background: rgba(28,29,34,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  z-index: 1040;
}

/* Brand */
.brand-link{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none !important;
  color: rgba(255,255,255,.92);
}
.brand-text{ min-width: 0; }
.brand-title{
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}
.brand-desc{
  font-size: 12px;
  line-height: 1.25;
  margin-top: 2px;
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

/* Brand mark (shield) */
.brand-mark{
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: rgba(49,59,68,.55);
  border: 1px solid rgba(170,168,173,.18);
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.brand-mark__icon{
  font-size: 22px;
  color: rgba(var(--primary-rgb), .95);
  line-height: 1;
}

/* Top nav */
.top-nav__link{
  color: rgba(255,255,255,.86);
  font-size: 14px;
  padding: 10px 10px;
  border-radius: var(--radius);
}
.top-nav__link:hover{
  background: rgba(49,59,68,.55);
  color: rgba(255,255,255,.94);
  text-decoration: none;
}

/* Language + phone */
.lang-btn,
.header-phone{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.22);
  background: rgba(49,59,68,.62);
  color: rgba(255,255,255,.92);
  font-size: 14px;
  text-decoration: none !important;
}
.lang-btn{ padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.lang-menu{ min-width: 220px; }
.lang-flag{ font-size: 16px; line-height: 1; }
.lang-label{ font-size: 13px; }

.header-phone:hover{ box-shadow: var(--shadow-sm); }
.header-phone i{ opacity: .9; }

/* Dropdown */
.dropdown-menu{
  background: rgba(28,29,34,.98);
  border: 1px solid rgba(170,168,173,.22);
  box-shadow: var(--shadow);
}
.dropdown-item{ color: rgba(255,255,255,.9); }
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(49,59,68,.65);
  color: rgba(255,255,255,.95);
}
.dropdown-divider{ border-top-color: rgba(170,168,173,.18); }

/* Header CTA (apply): service-level button */
.site-header button[data-open-apply]{
  background: rgba(49,59,68,.62);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(170,168,173,.22);
  text-transform: none;
  letter-spacing: normal;
}
.site-header button[data-open-apply]:hover{
  background: rgba(49,59,68,.72);
  border-color: rgba(170,168,173,.30);
  box-shadow: var(--shadow-sm);
}

/* ---------- Layout ---------- */
.app{
  padding-top: var(--header-h);
  display: flex;
  min-height: 100%;
}

.sidebar{
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  border-right: 1px solid rgba(170,168,173,.18);
  background: rgba(28,29,34,.98);
}
.sidebar-inner{
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 22px 16px 18px;
}
.sidebar-head{ padding: 8px 8px 16px; }
.sidebar-kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: #fff;
}
.sidebar-sub{
  margin-top: 6px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
}
.sidebar-cta{
  margin-top: 18px;
  padding: 14px 10px 0;
  border-top: 1px solid rgba(170,168,173,.18);
}
.sidebar-cta__note{
  font-size: 12px;
  color: rgba(255,255,255,.86);
  margin-top: 10px;
}

.content{
  flex: 1;
  min-width: 0;
  background: var(--bg);
}

/* ---------- Vacancy menu accordion ---------- */
.sidebar .accordion,
#vacancyOffcanvas .accordion{
  --bs-accordion-btn-icon-width: .7rem;
}

.accordion-flush .accordion-item{
  background: rgba(49,59,68,.22);
  border: 1px solid rgba(170,168,173,.16);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none;
  margin-bottom: 10px;
}
.accordion-flush .accordion-button{
  background: transparent;
  padding: 14px 12px;
  font-size: 14px;
  color: rgba(255,255,255,.88);
}
.accordion-flush .accordion-button::after{
  width: .7rem;
  height: .7rem;
  background-size: .7rem .7rem;
  opacity: .35;
  transform: scale(.75);
  filter: invert(1);
}
.accordion-flush .accordion-button:not(.collapsed){
  background: rgba(49,59,68,.50);
  box-shadow: inset 2px 0 0 rgba(var(--primary-rgb), .95);
}
.accordion-flush .accordion-button:focus{ box-shadow: none; }
.accordion-flush .accordion-body{
  background: transparent;
  padding: 12px 12px 14px;
}

/* Links inside vacancy list */
.vac-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.vac-item{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}
.vac-link{
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.25;
  text-decoration: none;
}
.vac-link:hover{
  color: rgba(var(--alert-rgb), .95);
  text-decoration: none;
}
.vac-meta{
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
}

/* ---------- Screens ---------- */
.screen{
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  padding: 84px 0;
  overflow: hidden;
  scroll-margin-top: 96px; /* for anchor offsets under sticky header */
}
.screen-surface{ background: var(--surface); }

.screen > .container-xl{
  position: relative;
  z-index: 1;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(49,59,68,.50);
  border: 1px solid rgba(170,168,173,.18);
  color: rgba(255,255,255,.88);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 12px;
  margin-bottom: 14px;
}
.eyebrow i{ color: rgba(var(--primary-rgb), .95); }

.screen-title{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  margin: 0 0 14px;
  position: relative;
  padding-left: 14px;
}
.screen-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  bottom: .25em;
  width: 4px;
  border-radius: 3px;
  background: rgba(var(--primary-rgb), .85);
}

.screen-lead{
  font-size: 16px;
  color: #fff;
  margin: 0 0 16px;
  max-width: 56ch;
}

/* Checklist */
.checklist{
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 10px;
}
.checklist li{
  position: relative;
  padding-left: 28px;
  color: #fff;
}
.checklist li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(var(--primary-rgb), .16);
  border: 1px solid rgba(var(--primary-rgb), .44);
}

/* ---------- Cards (unified) ---------- */
.cta-card,
.support-card,
.term-card,
.payout-card,
.callout,
.fact,
.note-card,
.step,
.about-point,
.city-card,
.success-box,
.utp-card,
.vacancy-tile,
.blog-card,
.contact-card,
.footer-note,
.review-card,
.expert-card{
  background: var(--card);
  border: 1px solid rgba(170,168,173,.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Card texture */
.cta-card,
.support-card,
.term-card,
.payout-card,
.callout,
.fact,
.note-card,
.step,
.about-point,
.city-card,
.success-box,
.utp-card,
.vacancy-tile,
.blog-card,
.contact-card,
.footer-note,
.review-card,
.expert-card{
  position: relative;
  overflow: hidden;
}
.cta-card::before,
.support-card::before,
.term-card::before,
.payout-card::before,
.callout::before,
.fact::before,
.note-card::before,
.step::before,
.about-point::before,
.city-card::before,
.success-box::before,
.utp-card::before,
.vacancy-tile::before,
.blog-card::before,
.contact-card::before,
.footer-note::before,
.review-card::before,
.expert-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-pattern);
  background-repeat: repeat;
  background-size: 520px auto;
  opacity: .14;
  pointer-events: none;
  filter: saturate(.85) contrast(1.05);
}
.cta-card > *,
.support-card > *,
.term-card > *,
.payout-card > *,
.callout > *,
.fact > *,
.note-card > *,
.step > *,
.about-point > *,
.city-card > *,
.success-box > *,
.utp-card > *,
.vacancy-tile > *,
.blog-card > *,
.contact-card > *,
.footer-note > *,
.review-card > *,
.expert-card > *{
  position: relative;
  z-index: 1;
}

/* Exclude texture for the wide CTA card */
.cta-card.cta-card--wide::before{ content: none; }

/* CTA card */
.cta-card{ padding: 18px; }
.cta-card__title{ font-size: 16px; font-weight: 600; }
.cta-card__sub{
  color: #fff;
  font-size: 13px;
  margin-top: 4px;
  margin-bottom: 12px;
}

/* Wide CTA (hero/footer) */
.cta-card--wide{ padding: 22px 20px; }
.cta-card--wide .cta-card__sub{ margin-bottom: 0; }

/* Icon tiles */
.fact__icon,
.support-card__icon,
.term-card__icon,
.step__num,
.success-box__icon{
  background: rgba(28,29,34,.55);
  border: 1px solid rgba(170,168,173,.18);
  border-radius: var(--radius);
  color: rgba(var(--primary-rgb), .95);
}

/* Support */
.support-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.support-card{ padding: 16px; }
.support-card__icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
  margin-bottom: 10px;
}
.support-card__title{ font-size: 16px; margin-bottom: 2px; }
.support-card__text{ color: #fff; font-size: 15px; line-height: 1.55; }

/* Terms */
.terms-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.term-card{ padding: 16px; }
.term-card__icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
  margin-bottom: 10px;
}
.term-card__title{ font-size: 16px; margin-bottom: 2px; color: rgba(255,255,255,.92); }
.term-card__text{ font-size: 15px; line-height: 1.55; color: #fff; }

/* Note card */
.note-card{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
}
.note-card__icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.note-card__title{ font-size: 16px; margin-bottom: 2px; }
.note-card__text{ font-size: 15px; line-height: 1.55; color: #fff; }

/* About points */
.about-points{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.about-point{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
}
.about-point__icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.about-point__title{ font-size: 16px; margin-bottom: 2px; }
.about-point__text{ font-size: 15px; line-height: 1.55; color: #fff; }

/* Steps */
.steps{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.step{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
}
.step__num{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 600;
}
.step__title{ font-size: 16px; margin-bottom: 2px; }
.step__text{ font-size: 15px; line-height: 1.55; color: #fff; }

.callout{
  padding: 16px;
  box-shadow: var(--shadow);
}
.callout__title{ font-size: 14px; margin-bottom: 2px; }
.callout__text{
  color: #fff;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 12px;
}

/* Payout grid */
.payout-grid{
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.payout-card{ padding: 16px; }
.payout-card__label{ color: #fff; font-size: 15px; line-height: 1.55; }
.payout-card__value{ font-size: 24px; margin-top: 4px; color: rgba(255,255,255,.94); }
.payout-card__meta{ font-size: 15px; line-height: 1.55; color: #fff; }

/* UTP cards */
.utp-card{
  height: 100%;
  padding: 22px 20px;
}
.utp-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.utp-card__icon{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: rgba(28,29,34,.55);
  border: 1px solid rgba(170,168,173,.18);
  color: rgba(var(--primary-rgb), .95);
  font-size: 20px;
  flex: 0 0 auto;
}
.utp-card__meta{ color: #fff; font-size: 15px; line-height: 1.55; }
.utp-card__value{
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,.94);
}
.utp-card__text{ margin-top: 6px; color: #fff; font-size: 15px; line-height: 1.55; }
.utp-card--info .utp-card__value{ font-size: 18px; }

/* Hero UTP stack (3 key cards) */
.hero-utp-stack{
  display: grid;
  gap: 12px;
}
.hero-utp-stack .utp-card{
  padding: 16px;
}
.hero-utp-stack .utp-card__icon{
  width: 40px;
  height: 40px;
  font-size: 18px;
}
.hero-utp-stack .utp-card__meta{ color: #fff; }
.hero-utp-stack .utp-card__value{ color: rgba(255,255,255,.94); }

/* Mini chips (callout-wide) */
.mini-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.20);
  background: rgba(49,59,68,.55);
  font-size: 12px;
  color: rgba(255,255,255,.90);
  white-space: nowrap;
}
.mini-chip i{ color: rgba(var(--primary-rgb), .95); }

/* Cities */
.city-cards{
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.city-card{
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.city-card__title{ font-size: 14px; }
.more-cities{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.more-city{
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: rgba(49,59,68,.35);
  font-size: 13px;
  color: rgba(255,255,255,.86);
}

/* Blog */
.blog-grid{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.blog-card{
  display: block;
  padding: 16px;
  color: var(--text);
  background: rgba(28,29,34,.55);
}
.blog-card__title{ font-size: 16px; margin-bottom: 6px; color: rgba(255,255,255,.92); }
.blog-card__meta{
  font-size: 12px;
  color: rgba(255,255,255,.76);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 600;
}
.blog-card:hover{
  text-decoration: none;
  border-color: rgba(var(--alert-rgb), .55);
  box-shadow: var(--shadow);
}
.blog-card:hover .blog-card__title{ color: rgba(var(--alert-rgb), .95); }

/* Contacts */
.contact-card{
  padding: 18px;
  margin-top: 18px;
}
.contact-card__row{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 10px 0;
}
.contact-card__row + .contact-card__row{
  border-top: 1px solid rgba(170,168,173,.14);
}
.contact-card__label{ color: #fff; font-size: 13px; }
.contact-card__value{
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
}
.contact-phone{
  font-size: 16px;
  color: rgba(255,255,255,.92);
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(255,255,255,.35);
}
.contact-phone:hover{
  border-bottom-color: rgba(var(--alert-rgb), .55);
}
.footer-note{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 14px;
}
.footer-note__icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(28,29,34,.55);
  border: 1px solid rgba(170,168,173,.18);
  border-radius: var(--radius);
  color: rgba(var(--primary-rgb), .95);
  font-size: 18px;
}
.footer-note__text{ color: #fff; font-size: 13px; line-height: 1.55; }

.site-footer{
  padding: 26px 0 10px;
  border-top: 1px solid rgba(170,168,173,.18);
}

/* Selected vacancy in modal */
.selected-vacancy{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: rgba(49,59,68,.28);
  margin-bottom: 12px;
  font-size: 13px;
  color: #fff;
}
.selected-vacancy i{ color: rgba(var(--primary-rgb), .95); }
.selected-vacancy__name{ font-weight: 600; color: rgba(255,255,255,.95); }

/* Success box */
.success-box{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
}
.success-box__icon{
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.success-box__text{ color: #fff; font-size: 15px; line-height: 1.55; }

/* ---------- Media placeholders ---------- */
.media-slot{
  border-radius: var(--radius);
  border: 1px dashed rgba(170,168,173,.28);
  background: rgba(49,59,68,.24);
  min-height: 340px;
  display: grid;
  place-items: center;
  box-shadow: none;
}
.media-slot--tall{ min-height: 460px; }
.media-slot--hero{ min-height: 420px; }
.media-slot__label{
  color: #fff;
  font-size: 13px;
  padding: 18px;
  text-align: center;
}
.media-slot--steps{ min-height: 280px; }
.media-slot--vac{ min-height: 220px; }
.media-slot--cta{ min-height: 380px; }
@media (max-width: 991.98px){
  .media-slot--cta{ min-height: 220px; }
}

/* ---------- Forms ---------- */
.form-control{
  border-radius: var(--radius);
  background: rgba(28,29,34,.55);
  border-color: rgba(170,168,173,.22);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
}
.form-control::placeholder{ color: rgba(255,255,255,.65); }
.form-control:focus{
  background: rgba(28,29,34,.72);
  border-color: rgba(var(--alert-rgb), .55);
  color: rgba(255,255,255,.96);
  box-shadow: 0 0 0 .25rem rgba(var(--alert-rgb), .14);
}

/* Agreement text (forms + popup) */
.form-agree{
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px;
}
.form-agree a{
  color: var(--link);
  text-decoration-color: rgba(var(--primary-rgb), .55);
}
.form-agree a:hover{
  color: var(--alert);
  text-decoration-color: rgba(var(--alert-rgb), .65);
}

/* ---------- Buttons ---------- */
.btn{
  border-radius: var(--radius);
  padding: 12px 14px;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.btn-sm{
  padding: 10px 12px;
  border-radius: var(--radius);
}

/* One geometry for main CTAs */
.btn-primary:not(.btn-sm),
.btn-outline-secondary:not(.btn-sm){
  height: 52px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-primary.btn-lg,
.btn-outline-secondary.btn-lg{ height: 56px; }

.btn:active{ transform: translateY(1px); }

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .22rem rgba(var(--alert-rgb), .20);
}

.btn .btn-icon{ font-size: 1.05em; transform: translateY(-1px); opacity: .95; }

.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: rgba(170,168,173,.22);
  --bs-btn-hover-bg: var(--alert);
  --bs-btn-hover-border-color: var(--alert);
  --bs-btn-active-bg: var(--alert);
  --bs-btn-active-border-color: var(--alert);
  --bs-btn-focus-shadow-rgb: var(--alert-rgb);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

.btn-outline-secondary{
  --bs-btn-color: rgba(255,255,255,1);
  --bs-btn-border-color: rgba(170,168,173,.22);
  --bs-btn-hover-bg: rgba(49,59,68,.65);
  --bs-btn-hover-border-color: rgba(170,168,173,.30);
  --bs-btn-hover-color: rgba(255,255,255,1);
  --bs-btn-active-bg: rgba(49,59,68,.75);
  --bs-btn-active-border-color: rgba(170,168,173,.32);
}

/* Safety net: ensure primary buttons never fall back to blue */
.btn.btn-primary{
  background-color: var(--primary);
  border-color: rgba(170,168,173,.22);
  color: #fff;
}
.btn.btn-primary:hover{
  background-color: var(--alert);
  border-color: var(--alert);
}

/* ---------- Tabs (benefits) ---------- */
.benefit-tabs{ gap: 10px; }
.benefit-tabs .nav-link{
  border: 1px solid rgba(170,168,173,.22);
  background: rgba(49,59,68,.40);
  color: rgba(255,255,255,.86);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  border-radius: var(--radius);
  padding: 10px 14px;
}
.benefit-tabs .nav-link:hover{
  border-color: rgba(var(--alert-rgb), .55);
  color: rgba(255,255,255,.95);
}
.benefit-tabs .nav-link.active{
  background: rgba(var(--primary-rgb), .92);
  border-color: rgba(var(--primary-rgb), .90);
  color: #fff;
}

/* Benefits content */
.benefit-panes{ margin-top: 12px; }
.benefit-scroll{
  max-height: 260px;
  overflow: auto;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: rgba(49,59,68,.22);
  box-shadow: var(--shadow-sm);
  color: #fff;
}
.benefit-list{ margin: 0; padding-left: 18px; color: #fff; }
.benefit-list li{ margin-bottom: 8px; color:#fff; }
.benefit-list li:last-child{ margin-bottom: 0; }
.benefit-list li::marker{ color: rgba(var(--primary-rgb), .95); }

/* ---------- Accordions (FAQ / payouts) ---------- */
.accordion-item{
  background: rgba(49,59,68,.22);
  border: 1px solid rgba(170,168,173,.18);
}
.accordion-button{
  background: rgba(49,59,68,.35);
  color: #fff;
  font-weight: 600;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.accordion-button::after{
  opacity: .35;
  transform: scale(.75);
  filter: invert(1);
}
.accordion-button:not(.collapsed){
  background: rgba(49,59,68,.55);
  box-shadow: inset 2px 0 0 rgba(var(--primary-rgb), .95);
  color: #fff;

}
.accordion-body{
  background: transparent;
  color: #fff;
  font-size: 15px;
  line-height: 1.6;
}
.accordion-body strong{ color: rgba(255,255,255,.92); }

/* FAQ: make Q&A panels opaque (do not let background images bleed through) */
#faq-vac .accordion-item{ background: rgba(49,59,68,.92); }
#faq-vac .accordion-button{ background: rgba(49,59,68,.96); }
#faq-vac .accordion-body{ background: rgba(28,29,34,.96); color: rgba(255,255,255,.88); }

/* ---------- TOC (list-group) ---------- */
.list-group-item{
  background: transparent;
  color: rgba(255,255,255,.90);
  border-color: rgba(170,168,173,.18);
}
.list-group-item-action:hover{
  background: rgba(49,59,68,.55);
  color: rgba(255,255,255,.95);
}
#toc .list-group-item.active{
  background: rgba(var(--primary-rgb), .18);
  border-color: rgba(var(--primary-rgb), .35);
  color: rgba(255,255,255,.95);
  box-shadow: inset 2px 0 0 rgba(var(--primary-rgb), .95);
}

/* Breadcrumbs */
.breadcrumb a{ color: #fff; }
.breadcrumb-item.active{ color: rgba(255,255,255,.90); }
.breadcrumb{ --bs-breadcrumb-divider-color: rgba(255,255,255,1); }
.breadcrumb-item + .breadcrumb-item::before{
  color: rgba(255,255,255,.55);
  opacity: .9;
}

/* ---------- Modals / Offcanvas ---------- */
.modal-content{
  background: rgba(28,29,34,.98);
  border: 1px solid rgba(170,168,173,.18);
  box-shadow: var(--shadow);
  color: rgba(255,255,255,.92);
}
.modal-header,.modal-footer{
  border-color: rgba(170,168,173,.18);
}
.modal-title{ color: rgba(255,255,255,.94); }
.btn-close{
  filter: invert(1) grayscale(100%);
  opacity: .75;
}
.btn-close:hover{ opacity: .95; }

.offcanvas{
  background: rgba(28,29,34,.98);
  color: rgba(255,255,255,.88);
}
.offcanvas .offcanvas-header{
  border-bottom: 1px solid rgba(170,168,173,.18);
}
/* Offcanvas vacancy list: text-only (no bullets/icons) */
.offcanvas .vac-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.offcanvas .vac-item{ list-style: none; }
.offcanvas .vac-link::before,
.offcanvas .vac-link i{ display: none; }
.offcanvas .vac-link{
  padding-left: 0;
  background-image: none;
  color: rgba(255,255,255,.90);
}

/* ---------- Mobile sticky bar ---------- */
.mobile-bar{
  display: none;
  gap: 10px;
  padding: 10px;
  background: rgba(28,29,34,.92);
  border-top: 1px solid rgba(170,168,173,.18);
  backdrop-filter: blur(6px);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
@media (max-width: 991.98px){
  .mobile-bar{ display: flex; }
  body{ padding-bottom: 74px; } /* room for the bar */
}
.mobile-bar.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-bar__btn{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  text-decoration: none;
  border-radius: var(--radius);
  background: rgba(49,59,68,.55);
  border: 1px solid rgba(170,168,173,.18);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.mobile-bar__btn:hover{
  border-color: rgba(var(--alert-rgb), .55);
  color: rgba(255,255,255,.96);
}
.mobile-bar__btn:active{ transform: translateY(1px); }
.mobile-bar__btn--primary{
  background: rgba(var(--primary-rgb), .92);
  border-color: rgba(var(--primary-rgb), .90);
  color: #fff;
}
.mobile-bar__btn--primary:hover{
  background: var(--alert);
  border-color: var(--alert);
}
.mobile-bar__btn .btn-icon{ font-size: 1.05em; transform: translateY(-1px); opacity: .95; }

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 2000;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.scroll-progress::after{
  content:"";
  display:block;
  height:100%;
  width: var(--p, 0%);
  background: rgba(var(--primary-rgb), .95);
  transition: width 60ms linear;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress::after{ transition: none; }
}

/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Count-up: tabular numbers */
.js-countup{
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ---------- Micro-interactions ---------- */
.cta-card, .support-card, .term-card, .payout-card, .note-card, .step, .blog-card, .city-card, .contact-card, .media-slot, .utp-card, .review-card, .expert-card{
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.cta-card:hover, .support-card:hover, .term-card:hover, .payout-card:hover, .note-card:hover, .step:hover, .blog-card:hover, .city-card:hover, .contact-card:hover, .media-slot:hover, .utp-card:hover, .review-card:hover, .expert-card:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--alert-rgb), .40);
  box-shadow: 0 18px 42px rgba(0,0,0,.26);
}

/* CTA pulse (soft) */
@keyframes ctaPulseSoft{
  0%,100%{
    box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
    filter: brightness(1);
  }
  50%{
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.16);
    filter: brightness(1.06);
  }
}
button[data-open-apply],
.mobile-bar__btn--primary{
  animation: ctaPulseSoft 2.8s ease-in-out infinite;
}
button[data-open-apply]:hover,
.mobile-bar__btn--primary:hover{
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce){
  button[data-open-apply],
  .mobile-bar__btn--primary{
    animation: none !important;
  }
}

/* ---------- Section background images ---------- */
/* HERO overlay (supports both ids: #vacancy and #hero) */
#vacancy,
#hero{
  position: relative;
  overflow: hidden;
}
#vacancy::before,
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .24;
  pointer-events:none;
  z-index: 0;
  filter: saturate(.85) contrast(1.05) brightness(.65);
}
#vacancy::after,
#hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.22);
  pointer-events:none;
  z-index: 0;
}
#vacancy > .container-xl,
#hero > .container-xl{
  position: relative;
  z-index: 1;
}

/* Duties image overlay */
#duties{
  position: relative;
  overflow: hidden;
}
#duties::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--duties-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .24;
  pointer-events:none;
  z-index: 0;
  filter: saturate(.85) contrast(1.05) brightness(.72);
}
#duties::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.14);
  pointer-events:none;
  z-index: 0;
}
#duties > .container-xl{
  position: relative;
  z-index: 1;
}

/* Optional section overlays (keep ids for future widgets/pages) */
:root{
  --who-image: url("assest/image/who-bg.png"), url("static/image/who-bg.png");
  --plus-image: url("assest/image/plus-bg.png"), url("static/image/plus-bg.png");
  --finance-image: url("assest/image/finance-bg.png"), url("static/image/finance-bg.png");
  --social-image: url("assest/image/social-bg.png"), url("static/image/social-bg.png");
  --howto-image: url("assest/image/how-to-bg.png"), url("static/image/how-to-bg.png");
  --eq-image: url("assest/image/eq-bg.png"), url("static/image/eq-bg.png");
  --faq-image: url("assest/image/faq-bg.png"), url("static/image/faq-bg.png");
  --allin-image: url("assest/image/all-in-bg.png"), url("static/image/all-in-bg.png");
  --place-image: url("assest/image/place-bg.png"), url("static/image/place-bg.png");
  --info-image: url("assest/image/info-bg.png"), url("static/image/info-bg.png");
  --feedback-image: url("assest/image/feedback-bg.png"), url("static/image/feedback-bg.png");
  --finalcta-image: url("assest/image/final-cta-bg.png"), url("static/image/final-cta-bg.png");
}
#requirements{ --section-image: var(--who-image); }
#pros{ --section-image: var(--plus-image); }
#payments{ --section-image: var(--finance-image); }
#guarantees{ --section-image: var(--social-image); }
#how{ --section-image: var(--howto-image); }
#gear{ --section-image: var(--eq-image); }
#faq-vac{ --section-image: var(--faq-image); }
#about{ --section-image: var(--allin-image); }
#cities{ --section-image: var(--place-image); }
#blog{ --section-image: var(--info-image); }
#contacts{ --section-image: var(--feedback-image); }
#final-cta{ --section-image: var(--finalcta-image); }

:is(#requirements,#pros,#payments,#guarantees,#how,#gear,#faq-vac,#about,#cities,#blog,#contacts,#final-cta){
  position: relative;
  overflow: hidden;
}
:is(#requirements,#pros,#payments,#guarantees,#how,#gear,#faq-vac,#about,#cities,#blog,#contacts,#final-cta)::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--section-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .24;
  pointer-events:none;
  z-index: 0;
  filter: saturate(.85) contrast(1.05) brightness(.72);
}
:is(#requirements,#pros,#payments,#guarantees,#how,#gear,#faq-vac,#about,#cities,#blog,#contacts,#final-cta)::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.14);
  pointer-events:none;
  z-index: 0;
}
:is(#requirements,#pros,#payments,#guarantees,#how,#gear,#faq-vac,#about,#cities,#blog,#contacts,#final-cta) > .container-xl{
  position: relative;
  z-index: 1;
}

/* Screen divider between background-image sections */
.screen-divider{
  position: relative;
  height: 22px;
  background: rgba(28,29,34,.92);
  border-top: 1px solid rgba(170,168,173,.14);
  border-bottom: 1px solid rgba(0,0,0,.35);
  overflow: hidden;
}
.screen-divider::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--card-pattern);
  background-repeat: repeat;
  opacity: .22;
  pointer-events:none;
}
@media (max-width: 575.98px){
  .screen-divider{ height: 18px; }
}

/* Remove any legacy chevrons between screens (if existed before) */
.screen::after{ display: none; background-image: none; }

/* ---------- Hero subtitle / emphasis ---------- */
.hero-briefing{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-briefing::before{ content: none; display: none; }
.hero-briefing .hero-sub-kicker,
.hero-briefing .hero-sub-lead{
  padding-left: 0;
}
.hero-briefing .hero-sub-kicker{
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  margin: 0 0 6px 0;
  text-transform: none;
  letter-spacing: 0;
}
.hero-briefing .hero-sub-lead{
  font-size: 17px;
  line-height: 1.35;
  color: rgba(255,255,255,.90);
  margin: 0;
}

.hero-u{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,.62);
  font-weight: 600;
  white-space: nowrap;
}
.hero-u--alert{
  text-decoration-color: rgba(var(--alert-rgb), .65);
}

@media (max-width: 991.98px){
  .hero-briefing{ margin-top: 14px; }
  .hero-briefing .hero-sub-kicker{ font-size: 16px; }
  .hero-briefing .hero-sub-lead{ font-size: 16px; }
}
@media (max-width: 575.98px){
  .hero-briefing .hero-sub-kicker{ font-size: 15px; }
  .hero-briefing .hero-sub-lead{ font-size: 15px; }
  .hero-u{ white-space: normal; }
}

/* ---------- Reviews carousel (scroll-snap) ---------- */
.review-carousel{
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px 2px;
  scrollbar-width: none;
}
.review-carousel::-webkit-scrollbar{ display: none; }
.review-track{
  display: flex;
  gap: 14px;
  width: max-content;
}
.review-card{
  scroll-snap-align: start;
  width: 360px;
  max-width: 86vw;
  padding: 16px;
}
.review-card::before{ opacity: .12; }
.review-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.review-card__icon{
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: rgba(28,29,34,.55);
  border: 1px solid rgba(170,168,173,.18);
  color: rgba(var(--primary-rgb), .95);
  flex: 0 0 auto;
}
.review-card__who{
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}
.review-card__text{
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
}
.review-card__meta{
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.review-hint{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}
@media (min-width: 992px){
  .review-card{ width: 420px; }
}

/* ---------- Expert card (contacts) ---------- */
.expert-card{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
}
.expert-card::before{ opacity: .10; }
.expert-card__photo{
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(28,29,34,.55);
  border: 1px solid rgba(170,168,173,.18);
  flex: 0 0 auto;
}
.expert-card__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.expert-card--noimg .expert-card__photo{
  display: flex;
  align-items: center;
  justify-content: center;
}
.expert-card--noimg .expert-card__photo::after{
  content:"Фото";
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.expert-card__kicker{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-weight: 600;
}
.expert-card__name{
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.94);
}
.expert-card__text{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}
.expert-card__link{
  display: inline-block;
  margin-top: 8px;
  color: rgba(var(--primary-rgb), .95);
  text-decoration: none;
  border-bottom: 1px dashed rgba(var(--primary-rgb), .55);
}
.expert-card__link:hover{
  color: rgba(var(--alert-rgb), .95);
  border-bottom-color: rgba(var(--alert-rgb), .55);
}
@media (max-width: 575.98px){
  .expert-card{ gap: 12px; }
  .expert-card__photo{ width: 56px; height: 56px; }
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1319.98px){
  .site-header .header-phone{ display: none !important; }
}
@media (max-width: 1089.98px){
  .site-header .lang-dd{ display: none !important; }
}
@media (max-width: 991.98px){
  :root{ --header-h: 72px; }
  .brand-title{
    font-size: 13px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
  }
  .site-header .header-left{ width: 100%; }
  .site-header .vac-btn{ margin-left: auto; }
  .site-header .btn[data-open-apply]{ display: none !important; } /* hide header apply on mobile */
  .screen{ padding: 72px 0; }
  .benefit-scroll{ max-height: 280px; }
}
@media (max-width: 575.98px){
  .brand-desc{ display: none; }
  .support-grid,
  .terms-grid,
  .more-cities{
    grid-template-columns: 1fr;
  }
  .contact-card__row{
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .mini-chip{ white-space: normal; }
}

/* ---------- Bootstrap utility background safety (white leaks) ---------- */
.bg-white, .bg-light, .bg-body, .bg-body-tertiary,
.card, .card-header, .card-body, .card-footer{
  background-color: var(--card) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(170,168,173,.18) !important;
}


/* =========================================================
   Extra components / future-proof blocks
   ========================================================= */

/* ---------- Trust chips (hero) ---------- */
.trust-chips{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(170,168,173,.20);
  background: rgba(49,59,68,.55);
  font-size: 12px;
  color: rgba(255,255,255,.90);
  white-space: nowrap;
}
.chip i{ color: rgba(var(--primary-rgb), .95); }

/* ---------- Hero facts ---------- */
.hero-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.fact{
  padding: 16px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
}
.fact__icon{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.fact__title{
  font-size: 13px;
  color: #fff;
  margin-bottom: 2px;
}
.fact__value{
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,.94);
  line-height: 1.15;
}
.fact__hint{
  margin-top: 6px;
  font-size: 12px;
  color: #fff;
}

@media (max-width: 575.98px){
  .hero-facts{ grid-template-columns: 1fr; }
}

/* ---------- Wide callout (steps) ---------- */
.callout--wide{ padding: 20px 20px; }
.callout-wide__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.callout-wide__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Forms in wide CTA ---------- */
.cta-card--wide .form-control-lg{
  border-radius: var(--radius);
  padding: 14px 14px;
}
.cta-card--wide .btn-lg{
  border-radius: var(--radius);
  padding: 14px 16px;
}

/* Mobile: buttons “Оставить заявку” inside content should be full width */
@media (max-width: 991.98px){
  .content .btn[data-open-apply]{
    width: 100%;
    display: flex;
  }
}

/* Hero: vacancy screen should start right under breadcrumbs */
#vacancy.screen{
  align-items: flex-start;
  padding-top: 32px;
}

/* ---------- Vacancies: tiled grid ---------- */
.vacancy-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.vacancy-tile{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.vacancy-tile__icon{
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: rgba(28,29,34,.55);
  border: 1px solid rgba(170,168,173,.18);
  color: rgba(var(--primary-rgb), .95);
  font-size: 18px;
  margin-bottom: 8px;
}
.vacancy-tile__title{
  font-size: 14px;
  margin: 0;
  color: rgba(255,255,255,.92);
}
.vacancy-tile__desc{
  font-size: 12px;
  color: #fff;
  min-height: 34px;
}
.vacancy-tile__pay{
  margin-top: auto;
  font-size: 13px;
  color: rgba(var(--primary-rgb), .95);
  font-weight: 600;
}
.vacancy-note{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255,255,255,.82);
  font-size: 12px;
}
.vacancy-note i{
  color: rgba(var(--primary-rgb), .85);
  margin-top: 2px;
}

/* Responsive vacancy grid */
@media (max-width: 991.98px){
  .vacancy-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callout-wide__head{
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 575.98px){
  .vacancy-grid{ grid-template-columns: 1fr; }
}

/* ---------- Reviews (simple grid; optional, in addition to carousel) ---------- */
.review-grid{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.review{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.review__head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.avatar{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(28,29,34,.55);
  border: 1px solid rgba(170,168,173,.18);
}
.review__name{ font-size: 14px; color: rgba(255,255,255,.92); }
.review__meta{ font-size: 12px; color: rgba(255,255,255,.76); }
.review__text{ font-size: 13px; color: rgba(255,255,255,.86); }

/* ---------- Popular (blog-like cards) ---------- */
.popular-grid{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.popular-card{
  display: block;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: rgba(28,29,34,.55);
  color: rgba(255,255,255,.92);
}
.popular-card__title{
  font-size: 14px;
  margin-bottom: 6px;
  color: rgba(255,255,255,.92);
}
.popular-card__meta{
  font-size: 12px;
  color: rgba(255,255,255,.76);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 600;
}

/* ---------- FAQ accordion wrapper ---------- */
.faq-accordion{ margin-top: 18px; }

/* ---------- Table of contents card ---------- */
.toc-card{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: rgba(49,59,68,.22);
  box-shadow: var(--shadow-sm);
}
.toc-title{
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  color: rgba(255,255,255,.92);
}
.toc-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.toc-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: rgba(28,29,34,.55);
  color: rgba(255,255,255,.90);
  text-decoration: none;
  font-size: 13px;
}
.toc-link:hover{
  border-color: rgba(var(--alert-rgb), .55);
  background: rgba(49,59,68,.55);
  color: rgba(255,255,255,.95);
}

/* ---------- Marquee (double line before TOC) ---------- */
.marquee-block{
  border: 1px solid rgba(170,168,173,.18);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: rgba(49,59,68,.22);
}
.marquee{
  --gap: 18px;
  --duration: 58s;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  color: rgba(255,255,255,.86);
  padding: 12px 0;
}
.marquee + .marquee{
  border-top: 1px solid rgba(170,168,173,.18);
}
.marquee__track{
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__group{
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--gap);
}
.marquee__dot{
  color: rgba(var(--primary-rgb), .95);
  transform: translateY(-1px);
}
.marquee--left .marquee__track{ animation: marquee-left var(--duration) linear infinite; }
.marquee--right .marquee__track{ animation: marquee-right var(--duration) linear infinite; }
@keyframes marquee-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes marquee-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none !important; }
}

/* ---------- Mobile meta block ---------- */
.mobile-end-meta{
  border-top: 1px solid rgba(170,168,173,.18);
  padding-top: 16px;
  margin-top: 16px;
}
.mobile-meta-card{
  background: rgba(49,59,68,.22);
  border: 1px solid rgba(170,168,173,.18);
  border-radius: var(--radius);
  padding: 12px 12px;
}
.mobile-breadcrumbs{ margin-bottom: 10px; }
.mobile-breadcrumbs .breadcrumb{
  font-size: 12px;
  line-height: 1.25;
}
.mobile-meta-tags{ margin-bottom: 10px; }
.mobile-meta-date{
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* ---------- Final CTA blocks (mobile + desktop) ---------- */
.mobile-final-cta,
.final-cta{
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(49,59,68,.22);
  border: 1px solid rgba(170,168,173,.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.mobile-final-cta__kicker{
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  font-size: 11px;
  color: #fff;
}
.mobile-final-cta__title,
.final-cta__title{
  margin-top: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: rgba(255,255,255,.94);
}
.mobile-final-cta__grid,
.final-cta__grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mcta-stat{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(28,29,34,.55);
  border: 1px solid rgba(170,168,173,.18);
  border-radius: var(--radius);
}
.mcta-stat__value{
  font-weight: 600;
  color: rgba(255,255,255,.94);
  letter-spacing: .02em;
  white-space: nowrap;
}
.mcta-stat__label{
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
}
.mobile-final-cta__note,
.final-cta__note{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.86);
}

/* Final CTA (desktop + mobile) */
.final-cta{
  max-width: 980px;
  margin: 0 auto;
}
.final-cta__title{
  text-transform: uppercase;
  letter-spacing: .12em;
}

@media (min-width: 992px){
  .final-cta{ padding: 18px 20px; }
  .final-cta__title{ font-size: 18px; line-height: 1.25; }
  .final-cta__grid{ grid-template-columns: repeat(3, 1fr); }
  .final-cta .btn{ width: auto; min-width: 280px; }
}

/* Final CTA v2: split + 6 UTP + photo */
.final-cta.final-cta--split{ max-width: 1180px; }
.final-cta__grid--utp{ margin-top: 10px; }

@media (min-width: 576px){
  .final-cta__grid--utp{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.final-cta .utp-card--cta{
  height: 100%;
  padding: 14px;
}
.final-cta .utp-card--cta .utp-card__meta{ font-size: 12px; }
.final-cta .utp-card--cta .utp-card__value{
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .01em;
}
.final-cta .utp-card--cta .utp-card__text{
  font-size: 12px;
  line-height: 1.25;
}

/* Keep CTA button full-width even on desktop */
.final-cta .btn[data-open-apply]{
  width: 100%;
  min-width: 0;
}

/* Final CTA heading (bigger, two-line) */
.final-cta__title--xl{ margin-bottom: 12px; }
.final-cta__title--xl .final-cta__kicker{
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,.86);
  margin-bottom: 10px;
}
.final-cta__title--xl .final-cta__lead{
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.15;
  font-weight: 600;
  color: rgba(255,255,255,.94);
}

/* Hero subtitle chips (if used in markup) */
.hero-sub-chip{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--primary-rgb), .55);
  background: rgba(var(--primary-rgb), .14);
  color: rgba(255,255,255,.95);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-sub-chip--alert{
  border-color: rgba(var(--alert-rgb), .55);
  background: rgba(var(--alert-rgb), .12);
}
@media (max-width: 575.98px){
  .hero-sub-chip{ white-space: normal; }
}

/* ---------- Article list (optional) ---------- */
.article-list{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.article-card{
  display: block;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: rgba(28,29,34,.55);
  box-shadow: var(--shadow-sm);
  color: rgba(255,255,255,.92);
}
.article-title{
  font-size: 16px;
  margin-bottom: 6px;
  color: rgba(255,255,255,.92);
}
.article-meta{
  font-size: 12px;
  color: rgba(255,255,255,.76);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 600;
}
.article-excerpt{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.86);
  line-height: 1.55;
}


/* HERO: make UTP labels more visible on the first screen */
#vacancy .utp-card__text,
#hero .utp-card__text{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92) !important;
}
@media (max-width: 575.98px){
  #vacancy .utp-card__text,
  #hero .utp-card__text{ font-size: 15px; }
}
.marquee__track {
  animation: marquee-left 20s linear infinite;
}

.marquee__track::after {
  content: attr(data-text);
}
/* =========================================================
   SEO / LCP OPTIMIZATION — disable background images
   ========================================================= */
:root{
  --card-pattern: none;
  --hero-image: none;
  --duties-image: none;

  --who-image: none;
  --plus-image: none;
  --finance-image: none;
  --social-image: none;
  --howto-image: none;
  --eq-image: none;
  --faq-image: none;
  --allin-image: none;
  --place-image: none;
  --info-image: none;
  --feedback-image: none;
  --finalcta-image: none;
}



/* ===== Footer: black, без градиента, без лишнего отступа сверху ===== */
.site-footer--blocks{
  /* палитра футера */
  --f-bg: #000;
  --f-surface: rgba(255,255,255,.035);
  --f-surface-hover: rgba(255,255,255,.055);
  --f-border: rgba(255,255,255,.12);
  --f-border-hover: rgba(255,255,255,.20);
  --f-text: rgba(255,255,255,.92);
  --f-muted: rgba(255,255,255,.62);

  margin-top: 0 !important;           /* убираем верхний разрыв */
  background: var(--f-bg);
  color: var(--f-text);

  /* “линия” сразу после последнего блока */
  border-top: 1px solid var(--f-border);

  position: relative;
}

/* глушим градиентный слой, если он остался в css */
.site-footer--blocks::before{
  content: none !important;
  display: none !important;
}

/* muted в футере должен читаться на чёрном */
.site-footer--blocks .text-muted{
  color: var(--f-muted) !important;
}

/* карточки футера делаем “плашками” на чёрном */
.site-footer--blocks .cta-card{
  background: var(--f-surface);
  border: 1px solid var(--f-border);
}

/* нижняя линия внутри футера */
.site-footer--blocks .footer-bottom{
  border-top: 1px solid var(--f-border) !important;
}

/* ===== Пилюли-ссылки ===== */
.site-footer--blocks .footer-pill{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;

  border: 1px solid var(--f-border);
  background: var(--f-surface);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}

.site-footer--blocks .footer-pill__left{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.site-footer--blocks .footer-pill i.bi-chevron-right{
  opacity: .55;
  flex: 0 0 auto;
}

.site-footer--blocks .footer-pill:hover{
  transform: translateY(-1px);
  background: var(--f-surface-hover);
  border-color: var(--f-border-hover);
}

/* ===== Чипы ===== */
.site-footer--blocks .footer-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.site-footer--blocks .footer-chip{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--f-border);
  background: var(--f-surface);
  font-size: .925rem;
  line-height: 1.1;
}

.site-footer--blocks .footer-chip--link{
  text-decoration: none;
  color: inherit;
}

.site-footer--blocks .footer-chip--link:hover{
  border-color: var(--f-border-hover);
  background: var(--f-surface-hover);
}

/* ===== Адресные блоки ===== */
.site-footer--blocks .footer-place{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--f-border);
  background: var(--f-surface);
}

.site-footer--blocks .footer-place__icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--f-border);
  background: rgba(255,255,255,.045);
  flex: 0 0 auto;
}

/* ===== Карточка сотрудника ===== */
.site-footer--blocks .footer-person{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--f-border);
  background: var(--f-surface);
}

.site-footer--blocks .footer-person__img{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--f-border);
  background: rgba(255,255,255,.03);
  flex: 0 0 auto;
}

.site-footer--blocks .footer-inline-link{
  color: var(--f-muted);
  text-decoration: none;
}
.site-footer--blocks .footer-inline-link:hover{
  color: var(--f-text);
  text-decoration: underline;
}

/* ===== Footer blocks: без градиента, фон как на сайте, без верхнего разрыва ===== */
.site-footer--blocks{
  margin-top: 0 !important;                 /* убираем разрыв сверху */
  border-top: 1px solid rgba(255,255,255,.10); /* линия сразу после последнего блока */

  /* фон "как был" (у тебя в проекте он обычно #1C1D22) */
  background: #1C1D22;
}

/* глушим градиентный слой из прошлой версии */
.site-footer--blocks::before{
  content: none !important;
  display: none !important;
}


@media (prefers-reduced-motion: reduce){
  .site-footer--blocks .footer-pill{ transition: none; }
  .site-footer--blocks .footer-pill:hover{ transform: none; }
}

#final-cta{
  padding-bottom: 70px !important;
}


#hero{ position: relative; }
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--main-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--main-bg-opacity, .75);
  z-index: 0;
  pointer-events:none;
}
#hero > .container-xl{ position: relative; z-index: 1; }

/* ===== Vacancy strip carousel ===== */
.vac-strip__track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  border-radius: 18px;
  scrollbar-width: none; /* Firefox */
}
.vac-strip__track::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

.vac-strip__item{
  flex: 0 0 86%;
  scroll-snap-align: start;
}
@media (min-width: 768px){
  .vac-strip__item{ flex-basis: calc((100% - 16px) / 2); }
}
@media (min-width: 1200px){
  .vac-strip__item{ flex-basis: calc((100% - 32px) / 3); }
}

/* Чуть подчёркиваем фокус для клавиатуры */
.vac-strip__track:focus{
  outline: 2px solid rgba(139,73,68,.35);
  outline-offset: 4px;
}

/* Если у тебя стили картинок (vac-photo-wrap) не глобальные — лучше вынести сюда */
.vacancy-card .vac-photo-wrap{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: rgba(49,59,68,.24);
}
.vacancy-card .vac-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 575.98px){
  .vacancy-card .vac-photo-wrap{ aspect-ratio: 1 / 1; }
}

/* ===== Vacancy strip carousel ===== */
.vac-strip__track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  border-radius: 18px;
  scrollbar-width: none;
}
.vac-strip__track::-webkit-scrollbar{ display:none; }

.vac-strip__item{
  flex: 0 0 86%;
  scroll-snap-align: start;
}

@media (min-width: 768px){
  .vac-strip__item{ flex-basis: calc((100% - 16px) / 2); }
}
@media (min-width: 1200px){
  .vac-strip__item{ flex-basis: calc((100% - 32px) / 3); }
}

.vac-strip__track:focus{
  outline: 2px solid rgba(139,73,68,.35);
  outline-offset: 4px;
}

/* ===== Vacancy card photo (сделай глобально, чтобы работало везде) ===== */
.vacancy-card .vac-photo-wrap{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(170,168,173,.18);
  background: rgba(49,59,68,.24);
}
.vacancy-card .vac-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 575.98px){
  .vacancy-card .vac-photo-wrap{ aspect-ratio: 1 / 1; }
}

.brand-mark__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 6px;        /* можно 4–8px, подберёшь по виду */
}

.brand-mark__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}