/* ---------- Design tokens (from Figma) ---------- */
:root{
  --blue-100:#eaf0fb;
  --blue-200:#cfdef7;
  --blue-300:#a2bff1;
  --blue-400:#6999ec;
  --blue-500:#3577e9;
  --blue-600:#175cd3;
  --blue-700:#114aac;

  --gray-200:#e5e7eb;
  --gray-300:#ced2d9;
  --gray-500:#808793;
  --gray-600:#636974;
  --gray-700:#494f5a;
  --gray-800:#31363f;
  --gray-900:#1d2026;

  --green-100:#e5f8ec;
  --green-300:#8ce0ab;
  --green-600:#1a9f52;
  --green-700:#15803d;

  --white:#ffffff;
  --white-bg:#f8faff;
  --error-500:#dc2626;

  --radius-sm:8px;
  --radius-xl:24px;
  --radius-full:999px;

  --font: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --container-w:1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--gray-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }

.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:1024px){
  .container{ padding:0 100px; max-width:1440px; }
}

.text-blue{ color:var(--blue-600); }

/* ---------- Buttons & badges ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:56px;
  padding:0 30px;
  border-radius:var(--radius-full);
  font-size:16px;
  font-weight:500;
  line-height:21px;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary{ background:var(--blue-600); color:var(--white); }
.btn--primary:hover{ background:var(--blue-700); }
.btn--secondary{ background:transparent; color:var(--blue-600); border-color:var(--blue-600); }
.btn--secondary:hover{ background:var(--blue-100); }
.btn--full{ width:100%; }

.badge{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 14px;
  border-radius:var(--radius-full);
  font-size:14px;
  font-weight:500;
  line-height:19px;
  color:var(--gray-700);
  background:transparent;
  border:none;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
}
.badge--active{ background:var(--blue-100); color:var(--blue-700); }
.badge--pending{ background:var(--blue-100); color:var(--blue-700); border:1px solid var(--blue-300); }
.badge--outline{ background:var(--blue-100); color:var(--blue-700); border:1px solid var(--blue-300); }
.badge--complete{ background:var(--green-100); color:var(--green-700); border:1px solid var(--green-300); }
.badge--pop{ animation:badgePop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes badgePop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.14); }
  100%{ transform:scale(1); }
}

.avatars{ display:flex; }
.avatars img{
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--white);
  margin-left:-8px;
  object-fit:cover;
}
.avatars img:first-child{ margin-left:0; }

.circle-btn{
  width:56px; height:56px;
  border-radius:var(--radius-full);
  border:1px solid var(--blue-200);
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.circle-btn img{ width:24px; height:24px; }
.circle-btn:hover{ background:var(--blue-100); }
.circle-btn--primary{ border-color:var(--blue-600); }
.circle-btn--primary:hover{ background:var(--blue-100); }
.circle-btn:disabled{ opacity:.45; pointer-events:none; }

.pagination{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:32px; }
.pagination__dot{
  height:8px; width:8px; border-radius:var(--radius-full);
  background:var(--blue-200);
  border:none; padding:0; cursor:pointer;
  transition:width .2s ease, background .2s ease;
}
.pagination__dot--active{ width:24px; background:var(--blue-600); }

/* ---------- Nav ---------- */
.nav-wrap{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:32px;
  padding-bottom:16px;
  gap:24px;
}
@media (min-width:901px){
  .nav{ display:grid; grid-template-columns:1fr auto 1fr; }
  .logo{ justify-self:start; }
  .menu{ justify-self:center; }
  .nav-right{ justify-self:end; }
}
.logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.logo__img{
  height:19px;
  width:auto;
  display:block;
}
.menu{ display:flex; align-items:center; gap:8px; }
.nav-right{ display:flex; align-items:center; gap:24px; }
.lang-switch{ display:flex; gap:4px; }
.lang-switch button{ border:none; }
.nav-socials{ display:flex; align-items:center; gap:8px; }
.nav-socials .social-btn{ width:32px; height:32px; }
.nav-socials .social-btn svg{ width:16px; height:16px; }

.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:32px;
  background:none; border:none;
  padding:0;
}
.burger span{ display:block; height:2px; width:100%; background:var(--gray-900); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav.is-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2){ opacity:0; }
.nav.is-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding-bottom:40px;
  background:var(--white);
}
@media (min-width:960px){
  .hero{ min-height:100vh; padding-bottom:0; display:flex; align-items:center; }
}
.hero__grid{
  position:relative;
  padding-top:56px;
  width:100%;
}
@media (min-width:960px){
  .hero__grid{ padding-top:0; padding-bottom:16vh; }
}
.hero__content{ position:relative; z-index:2; max-width:610px; }
.hero__title{
  font-size:40px;
  font-weight:500;
  line-height:1.12;
  letter-spacing:-1px;
  color:var(--gray-900);
  margin-bottom:16px;
}
@media (min-width:960px){
  .hero__title{ font-size:64px; line-height:70px; letter-spacing:-1.2px; }
}
.hero__subtitle{
  font-size:16px;
  line-height:24px;
  color:var(--gray-700);
  max-width:460px;
  margin-bottom:24px;
}
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.trust-row{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.trust-row span{ font-size:16px; color:var(--gray-600); }

/* Media bleeds to the right viewport edge on desktop, matching the Figma frame */
.hero__media{ position:relative; z-index:1; }
@media (min-width:960px){
  .hero__media{
    position:absolute;
    right:0;
    bottom:0;
    z-index:1;
  }
}
.hero__glow{
  position:absolute;
  z-index:0;
  width:123%;
  aspect-ratio:1/1;
  left:52.75%;
  top:66.1%;
  transform:translate(-50%,-50%);
  opacity:0.6;
  pointer-events:none;
}
.hero__photo{
  display:block;
  position:relative;
  z-index:1;
  width:100%;
  max-width:764px;
  margin-left:auto;
  border-radius:var(--radius-xl);
}
@media (min-width:960px){
  .hero__photo{
    /* 53.06vw matches the Figma photo/canvas width ratio (764/1440);
       107.9vh is the equivalent width if the photo instead filled the
       full hero height, converted via the photo's own aspect ratio
       (764/708). Taking the smaller keeps proportions intact while
       letting the photo grow as large as the viewport allows. */
    width:min(53.06vw, 107.9vh);
    height:auto;
    max-width:none;
    margin-left:0;
  }
}
.balance-card{
  position:relative;
  z-index:2;
  margin-top:-64px;
  margin-left:16px;
  width:340px;
  max-width:calc(100vw - 32px);
  background:var(--white);
  border:1px solid var(--blue-200);
  border-radius:var(--radius-xl);
  padding:20px 22px;
  box-shadow:0 14px 16px rgba(13,20,38,0.14);
  display:flex;
  align-items:center;
  gap:16px;
  opacity:0;
  transform:translateX(28px) scale(.97);
  transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}
.balance-card.is-visible{
  opacity:1;
  transform:translateX(0) scale(1);
}
@media (min-width:960px){
  .balance-card{ position:absolute; z-index:2; left:-11%; bottom:20.06%; margin:0; }
}
.balance-card__icon{
  width:48px; height:48px;
  border-radius:50%;
  background:var(--blue-500);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.balance-card__icon img{ width:22px; height:22px; }
.balance-card__text{ display:flex; flex-direction:column; gap:4px; }
.balance-card__title{ font-size:18px; font-weight:600; letter-spacing:-0.3px; color:var(--gray-900); }
.balance-card__desc{ font-size:14px; line-height:20px; color:var(--gray-700); }

/* ---------- Stats ---------- */
.stats{ background:var(--white-bg); padding:80px 0; }
.stats__head{
  display:flex; flex-direction:column; gap:16px; margin-bottom:48px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.stats__head.is-visible{ opacity:1; transform:translateY(0); }
.stats__head h2{
  font-size:32px; font-weight:500; line-height:1.15; letter-spacing:-1px; color:var(--gray-900);
}
@media (min-width:960px){ .stats__head h2{ font-size:48px; line-height:56px; letter-spacing:-1.2px; } }
.stats__head p{ font-size:16px; line-height:24px; color:var(--gray-700); max-width:651px; }

.stats__grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:760px){ .stats__grid{ grid-template-columns:repeat(3,1fr); } }
.stat-card{
  background:var(--white);
  border:1px solid var(--blue-200);
  border-radius:var(--radius-xl);
  padding:48px 32px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:228px;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.stat-card.is-visible{ opacity:1; transform:translateY(0); }
.stat-card:nth-child(2){ transition-delay:.12s; }
.stat-card:nth-child(3){ transition-delay:.24s; }
.stat-card__num{ font-size:48px; font-weight:500; letter-spacing:-1.2px; line-height:1.1; font-variant-numeric:tabular-nums; }
@media (min-width:960px){ .stat-card__num{ font-size:64px; line-height:70px; } }
.stat-card__label{ font-size:16px; color:var(--gray-700); }
.stat-card .avatars{ margin-top:4px; }
.stat-card--accent{ background:var(--blue-600); border-color:var(--blue-600); }
.stat-card--accent .stat-card__num{ color:var(--white); }
.stat-card--accent .stat-card__label{ color:var(--blue-200); }

/* ---------- Split card (photo + text) ---------- */
.split-card{ background:var(--white-bg); padding:0 0 80px; }
.split-card__inner{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:flex-end;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.split-card__inner.is-visible{ opacity:1; transform:translateY(0); }
@media (min-width:960px){ .split-card__inner{ min-height:658px; } }
.split-card__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:38% 30%;
  transform:scale(1);
  transition:transform 4s cubic-bezier(.16,1,.3,1);
}
@media (min-width:900px){
  .split-card__inner.is-visible .split-card__img{ transform:scale(1.08); }
}
.split-card__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(13,20,38,.75) 0%, rgba(13,20,38,0) 45%),
    linear-gradient(90deg, rgba(13,20,38,.55) 0%, rgba(13,20,38,0) 60%);
}
.split-card__content{
  position:relative;
  z-index:1;
  color:var(--white);
  padding:32px;
  max-width:527px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
@media (min-width:960px){ .split-card__content{ padding:48px; } }
.split-card__content h3{
  font-size:28px; font-weight:500; line-height:1.2; letter-spacing:-1px;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
@media (min-width:960px){ .split-card__content h3{ font-size:48px; line-height:56px; letter-spacing:-1.2px; } }
.split-card__content p{
  font-size:16px; line-height:24px;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1) .15s, transform .6s cubic-bezier(.22,1,.36,1) .15s;
}
.split-card__content .btn{
  align-self:flex-start;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1) .3s, transform .6s cubic-bezier(.22,1,.36,1) .3s;
}
.split-card__inner.is-visible .split-card__content h3,
.split-card__inner.is-visible .split-card__content p,
.split-card__inner.is-visible .split-card__content .btn{
  opacity:1; transform:translateY(0);
}

/* Below 900px: split into a separate image card + text card, same pattern
   used by .crm-banner — the overlay becomes unreadable at narrow crops. */
@media (max-width:899.98px){
  .split-card__inner{
    position:static;
    display:flex;
    flex-direction:column;
    gap:24px;
    min-height:0;
    border-radius:0;
    overflow:visible;
    align-items:stretch;
  }
  .split-card__img{
    position:static;
    display:block;
    width:100%;
    height:260px;
    border:1px solid var(--blue-200);
    border-radius:var(--radius-xl);
  }
  .split-card__overlay{ display:none; }
  .split-card__content{
    position:static;
    z-index:auto;
    color:var(--gray-900);
    background:var(--white);
    border:1px solid var(--blue-200);
    border-radius:var(--radius-xl);
    padding:32px;
    max-width:none;
  }
  .split-card__content p{ color:var(--gray-700); }
}

/* ---------- Advantages grid ---------- */
.advantages{ background:var(--white-bg); padding:80px 0; }
.advantages__grid{ display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:960px){ .advantages__grid{ grid-template-columns:9fr 11fr; gap:24px; } }
.advantages__head{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.advantages__head.is-visible{ opacity:1; transform:translateY(0); }
.advantages__head h2{
  font-size:32px; font-weight:500; line-height:1.2; letter-spacing:-1px; color:var(--gray-900); margin-bottom:8px;
}
@media (min-width:960px){ .advantages__head h2{ font-size:48px; line-height:56px; letter-spacing:-1.2px; } }
.advantages__head p{ font-size:16px; line-height:24px; color:var(--gray-700); }

.advantages__cards{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .advantages__cards{ grid-template-columns:1fr 1fr; } }
.adv-card{
  background:var(--white);
  border:1px solid var(--blue-200);
  border-radius:var(--radius-xl);
  padding:28px 32px;
  display:flex;
  flex-direction:column;
  gap:40px;
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.adv-card.is-visible{ opacity:1; transform:translateY(0); }
.adv-card:nth-child(2){ transition-delay:.1s; }
.adv-card:nth-child(3){ transition-delay:.2s; }
.adv-card:nth-child(4){ transition-delay:.3s; }
.adv-card:not(.adv-card--accent):hover{ box-shadow:0 12px 24px rgba(13,20,38,.08); border-color:var(--blue-300); }
.adv-card__icon{
  width:48px; height:48px;
  flex-shrink:0;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--blue-200);
  display:flex; align-items:center; justify-content:center;
  transform:scale(.5);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) .2s;
}
.adv-card.is-visible .adv-card__icon{ transform:scale(1); }
.adv-card__icon img{ width:22px; height:22px; }
.adv-card__icon--on-accent{ background:var(--blue-500); }
.adv-card__text{ display:flex; flex-direction:column; gap:8px; }
.adv-card h4{ font-size:20px; font-weight:500; letter-spacing:-0.3px; line-height:1.3; color:var(--gray-900); }
.adv-card p{ font-size:16px; line-height:24px; color:var(--gray-700); }
.adv-card--accent{ background:var(--blue-600); border-color:var(--blue-600); }
.adv-card--accent h4{ color:var(--white); }
.adv-card--accent p{ color:var(--blue-200); }

/* ---------- CRM banner ---------- */
.crm-banner{ background:var(--white-bg); padding:0 0 80px; }
.crm-banner__inner{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  min-height:420px;
  display:flex;
  align-items:flex-start;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.crm-banner__inner.is-visible{ opacity:1; transform:translateY(0); }
@media (min-width:960px){ .crm-banner__inner{ min-height:671px; } }
.crm-banner__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1);
  transition:transform 4.5s cubic-bezier(.16,1,.3,1);
}
@media (min-width:900px){
  .crm-banner__inner.is-visible .crm-banner__img{ transform:scale(1.07); }
}
.crm-banner__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 80%);
}
.crm-banner__content{
  position:relative;
  z-index:1;
  color:var(--white);
  padding:32px;
  max-width:527px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
@media (min-width:960px){ .crm-banner__content{ padding:56px 0 56px 41px; } }
.crm-banner__content h3{
  font-size:28px; font-weight:500; line-height:1.2; letter-spacing:-1px;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
@media (min-width:960px){ .crm-banner__content h3{ font-size:48px; line-height:56px; letter-spacing:-1.2px; } }
.crm-banner__content p{
  font-size:16px; line-height:24px;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1) .15s, transform .6s cubic-bezier(.22,1,.36,1) .15s;
}
.crm-banner__content .btn{
  align-self:flex-start;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1) .3s, transform .6s cubic-bezier(.22,1,.36,1) .3s;
}
.crm-banner__inner.is-visible .crm-banner__content h3,
.crm-banner__inner.is-visible .crm-banner__content p,
.crm-banner__inner.is-visible .crm-banner__content .btn{
  opacity:1; transform:translateY(0);
}

/* Below 900px: split into a separate image card + text card (like .split-card),
   instead of overlaying text on the image — the overlay becomes unreadable at
   narrow crops. Desktop (900px+) keeps the original overlay layout untouched. */
@media (max-width:899.98px){
  .crm-banner__inner{
    position:static;
    display:flex;
    flex-direction:column;
    gap:24px;
    min-height:0;
    border-radius:0;
    overflow:visible;
    align-items:stretch;
  }
  .crm-banner__img{
    position:static;
    display:block;
    width:100%;
    height:260px;
    border:1px solid var(--blue-200);
    border-radius:var(--radius-xl);
  }
  .crm-banner__overlay{ display:none; }
  .crm-banner__content{
    position:static;
    z-index:auto;
    color:var(--gray-900);
    background:var(--white);
    border:1px solid var(--blue-200);
    border-radius:var(--radius-xl);
    padding:32px;
    max-width:none;
  }
  .crm-banner__content p{ color:var(--gray-700); }
}

/* ---------- Reviews ---------- */
.reviews{ background:var(--white-bg); padding:80px 0; }
.reviews__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:40px; gap:16px; flex-wrap:wrap; }
.reviews__head h2{ font-size:32px; font-weight:500; letter-spacing:-1px; color:var(--gray-900); }
@media (min-width:960px){ .reviews__head h2{ font-size:48px; line-height:56px; letter-spacing:-1.2px; } }
.reviews__nav{ display:flex; gap:8px; }

.reviews__viewport{ overflow:hidden; touch-action:pan-y; }
.reviews__track{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:20px;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.review-card{
  background:var(--white);
  border:1px solid var(--blue-200);
  border-radius:var(--radius-xl);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:32px;
  min-height:300px;
  flex:0 0 100%;
}
@media (min-width:820px){ .review-card{ flex:0 0 calc((100% - 40px)/3); } }
.review-card__quote{ width:25px; height:22px; flex-shrink:0; }
.review-card__text{
  font-size:16px; line-height:21px; font-weight:500; color:var(--gray-900);
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.review-card__person{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.review-card__avatar{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:var(--white);
  font-size:15px; font-weight:600; letter-spacing:0.2px;
}
.review-card__name{ font-size:14px; font-weight:500; color:var(--gray-900); }
.review-card__role{ font-size:14px; color:var(--gray-600); }

/* ---------- Vacancies ---------- */
.vacancies{ background:var(--white-bg); padding:80px 0; }
.section-title-center{
  font-size:32px; font-weight:500; letter-spacing:-1px; text-align:center; color:var(--gray-900); margin-bottom:40px;
}
@media (min-width:960px){ .section-title-center{ font-size:48px; line-height:56px; letter-spacing:-1.2px; } }

.vacancies__grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:820px){ .vacancies__grid{ grid-template-columns:repeat(3,1fr); } }
.vacancy-card{
  background:var(--white);
  border:1px solid var(--blue-200);
  border-radius:var(--radius-xl);
  padding:16px;
  display:flex;
  flex-direction:column;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.vacancy-card:hover{ box-shadow:0 12px 24px rgba(13,20,38,.08); border-color:var(--blue-300); }
.vacancy-card__media{
  aspect-ratio:4/3;
  border-radius:calc(var(--radius-xl) - 8px);
  overflow:hidden;
  background:var(--blue-200);
}
.vacancy-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vacancies__grid .vacancy-card:nth-child(1) .vacancy-card__media img{ object-position:62% 22%; }
.vacancies__grid .vacancy-card:nth-child(2) .vacancy-card__media img{ object-position:32% 20%; }
.vacancies__grid .vacancy-card:nth-child(3) .vacancy-card__media img{ object-position:52% 18%; }
.vacancy-card__body{ padding:20px 4px 4px; display:flex; flex-direction:column; gap:8px; }
.vacancy-card__name{ display:flex; align-items:center; gap:6px; }
.vacancy-card__name h4{ font-size:20px; font-weight:600; letter-spacing:-0.3px; color:var(--gray-900); margin:0; }
.vacancy-card__verified{ width:18px; height:18px; flex-shrink:0; }
.vacancy-card__body p{
  margin:0;
  font-size:15px;
  line-height:22px;
  color:var(--gray-700);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.vacancy-card__cta-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1);
}
.vacancy-card__cta-inner{ overflow:hidden; }
.vacancy-card:hover .vacancy-card__cta-wrap{ grid-template-rows:1fr; }
.vacancy-card__cta{
  margin-top:16px;
  height:48px;
  opacity:0;
  transition:opacity .2s ease;
}
.vacancy-card:hover .vacancy-card__cta{ opacity:1; transition-delay:.1s; }
@media (max-width:819px){
  .vacancy-card__cta-wrap{ grid-template-rows:1fr; }
  .vacancy-card__cta{ opacity:1; }
}

/* ---------- FAQ ---------- */
.faq{ background:var(--white-bg); padding:80px 0; }
.faq__list{ display:flex; flex-direction:column; gap:8px; }
.faq-item{
  width:100%;
  text-align:left;
  background:var(--white);
  border:1px solid var(--blue-200);
  border-radius:var(--radius-xl);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
}
.faq-item__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-item__q{ font-size:18px; font-weight:500; letter-spacing:-0.3px; color:var(--gray-900); }
@media (min-width:640px){ .faq-item__q{ font-size:24px; } }
.faq-item__icon{
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
  flex-shrink:0;
}
.faq-item__icon img{ width:24px; height:24px; }
.faq-item__a{
  font-size:16px; line-height:24px; color:var(--gray-700);
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}
.faq-item[aria-expanded="true"] .faq-item__a{ padding-top:14px; }
.faq-item[aria-expanded="true"] .faq-item__icon{ transform:rotate(180deg); }

/* ---------- Telegram banner ---------- */
.tg-banner{ background:var(--white-bg); padding:16px 0 40px; }
.tg-banner__inner{
  background:var(--blue-600);
  border-radius:var(--radius-xl);
  padding:24px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.tg-banner__text{ display:flex; align-items:center; gap:16px; }
.tg-banner__icon{
  width:44px; height:44px;
  flex-shrink:0;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  animation:tg-pulse 2.2s ease-out infinite;
}
.tg-banner__icon svg{ width:22px; height:22px; }
.tg-banner__text p{ margin:0; font-size:18px; font-weight:500; line-height:1.4; color:var(--white); }
.tg-banner__btn{ background:var(--white); color:var(--blue-600); flex-shrink:0; }
.tg-banner__btn:hover{ background:var(--blue-100); }
@keyframes tg-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.45); }
  70%{ box-shadow:0 0 0 14px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
@media (max-width:600px){
  .tg-banner__inner{ flex-direction:column; align-items:stretch; text-align:center; }
  .tg-banner__text{ flex-direction:column; }
  .tg-banner__btn{ width:100%; }
}

/* ---------- Apply form ---------- */
.apply{ background:var(--white-bg); padding:80px 0; }
.apply__inner{ display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width:900px){ .apply__inner{ grid-template-columns:439fr 721fr; } }
.apply__left h3{ font-size:28px; font-weight:500; line-height:1.2; letter-spacing:-1px; color:var(--gray-900); margin-bottom:16px; }
@media (min-width:960px){ .apply__left h3{ font-size:48px; line-height:56px; letter-spacing:-1.2px; } }
.apply__left p{ font-size:16px; line-height:24px; color:var(--gray-700); }

.apply-form{
  background:var(--white);
  border:1px solid var(--blue-200);
  border-radius:var(--radius-xl);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:32px;
}
@media (min-width:960px){ .apply-form{ padding:48px; } }
.apply-form__row{ display:flex; }
.field{ display:flex; flex-direction:column; gap:8px; width:100%; }
.field__label{ font-size:14px; font-weight:500; color:var(--gray-800); }
.field__label em{ color:var(--error-500); font-style:normal; margin-left:2px; }
.field input{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--gray-300);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:16px;
  color:var(--gray-900);
  background:var(--white);
}
.field input::placeholder{ color:var(--gray-500); }
.field input:focus{ outline:none; border-color:var(--blue-600); }
.field input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field--telegram{ margin-top:22px; }
.field--telegram[hidden]{ display:none; }
.field__input-group{ position:relative; display:flex; align-items:center; }
.field__input-group input{ padding-left:29px; }
.field__prefix{
  position:absolute;
  left:16px;
  font-size:16px;
  color:var(--gray-900);
  pointer-events:none;
}
.iti{ display:block; width:100%; }
#phoneInput{ padding-left:56px; }

.field-group{ display:flex; flex-direction:column; gap:10px; }
.field-group__label{ font-size:14px; font-weight:500; color:var(--gray-900); }
.field-group__label em{ color:var(--error-500); font-style:normal; margin-left:2px; }
.field-group__error{ font-size:14px; color:var(--error-500); }
.field-group--error .radio__dot,
.field-group--error .checkbox input:not(:checked) + .checkbox__box{ border-color:var(--error-500); }

.radio-row{ display:flex; gap:28px; flex-wrap:wrap; }
@media (max-width:899px){
  .radio-row{ flex-direction:column; gap:16px; }
}
.radio{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--gray-900); cursor:pointer; }
.radio input{ position:absolute; opacity:0; pointer-events:none; }
.radio__dot{
  width:20px; height:20px; border-radius:50%;
  border:1.3px solid var(--gray-300);
  position:relative;
  flex-shrink:0;
}
.radio input:checked + .radio__dot{ border-color:var(--blue-600); border-width:6px; }

.checkbox-col{ display:flex; flex-direction:column; gap:10px; }
.checkbox{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--gray-900); cursor:pointer; }
.checkbox input{ position:absolute; opacity:0; pointer-events:none; }
.checkbox__box{
  width:20px; height:20px; border-radius:6px;
  border:1.3px solid var(--gray-300);
  flex-shrink:0;
  position:relative;
}
.checkbox input:checked + .checkbox__box{ background:var(--blue-600); border-color:var(--blue-600); }
.checkbox input:checked + .checkbox__box::after{
  content:"";
  position:absolute;
  left:6px; top:2px;
  width:5px; height:10px;
  border:solid var(--white);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.checkbox--consent{ align-items:flex-start; gap:10px; font-size:15px; line-height:22px; }
.checkbox--consent .checkbox__box{ margin-top:2px; }
.apply-form__policy-link{ color:var(--blue-600); text-decoration:underline; text-underline-offset:2px; }
.apply-form__policy-link:hover{ color:var(--blue-700); }

/* ---------- Success modal ---------- */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.modal.is-open{ opacity:1; pointer-events:auto; }
.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(17,23,38,.5);
  backdrop-filter:blur(2px);
}
.modal__box{
  position:relative;
  width:100%;
  max-width:400px;
  background:var(--white);
  border-radius:var(--radius-xl);
  padding:40px 32px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:20px;
  transform:scale(.92) translateY(8px);
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.modal.is-open .modal__box{ transform:scale(1) translateY(0); }
.modal__icon{
  width:64px; height:64px;
  border-radius:50%;
  background:var(--green-100);
  color:var(--green-600);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.modal__icon svg{ width:30px; height:30px; }
.modal__body{ display:flex; flex-direction:column; gap:8px; }
.modal__title{ font-size:20px; font-weight:600; letter-spacing:-0.3px; color:var(--gray-900); }
.modal__text{ font-size:16px; line-height:24px; color:var(--gray-800); }

/* ---------- Privacy policy page ---------- */
.policy-header{ display:flex; align-items:center; justify-content:space-between; padding:32px 0 24px; }
.policy-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; color:var(--gray-600);
  margin-bottom:24px;
  transition:color .15s ease;
}
.policy-back:hover{ color:var(--blue-600); }
.policy-doc{ max-width:760px; margin:0 auto; padding-bottom:80px; display:flex; flex-direction:column; gap:16px; }
.policy-doc h3{ font-size:28px; font-weight:600; letter-spacing:-0.5px; color:var(--gray-900); margin:0; }
.policy-doc h4{ font-size:18px; font-weight:600; color:var(--gray-900); margin:8px 0 0; }
.policy-doc p{ font-size:16px; line-height:25px; color:var(--gray-700); margin:0; }
.policy-doc ul{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; }
.policy-doc li{ font-size:16px; line-height:25px; color:var(--gray-700); }
.policy-doc__updated{ font-size:14px; color:var(--gray-500); margin:0; }
.policy-footer{ text-align:center; font-size:14px; color:var(--gray-500); padding:24px 0 40px; }

/* ---------- Footer ---------- */
.footer{
  background:var(--blue-100);
  border-top:1px solid var(--blue-200);
  padding:28px 0;
}
.footer__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 24px;
}
.footer__cta-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:fit-content;
  font-size:18px; font-weight:500; letter-spacing:-0.5px;
  color:var(--blue-600);
  transition:color .15s ease;
}
.footer__cta-link:hover{ color:var(--blue-700); }
.footer__cta-icon{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--blue-600);
  color:var(--white);
  transition:background .15s ease;
}
.footer__cta-link:hover .footer__cta-icon{ background:var(--blue-700); }
.footer__cta-icon svg{ width:16px; height:16px; }
.footer__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; color:var(--gray-500); }
.footer__dot{ color:var(--blue-300); }
.footer__email{ color:var(--gray-500); transition:color .15s ease; }
.footer__email:hover{ color:var(--blue-600); }
.footer__policy-link{ color:var(--gray-500); text-decoration:underline; text-underline-offset:2px; transition:color .15s ease; }
.footer__policy-link:hover{ color:var(--blue-600); }
.footer__socials{ display:flex; gap:10px; }
.social-btn{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  color:var(--gray-900);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.social-btn svg{ width:18px; height:18px; }
.social-btn:hover{ background:var(--white); }
.social-btn--instagram:hover{ background:#E1306C; border-color:#E1306C; color:var(--white); }
.social-btn--tiktok:hover{ background:#000; border-color:#000; color:var(--white); }
.social-btn--telegram:hover{ background:#26A5E4; border-color:#26A5E4; color:var(--white); }
.social-btn--whatsapp:hover{ background:#25D366; border-color:#25D366; color:var(--white); }

/* ---------- Mobile nav ---------- */
@media (max-width:900px){
  .burger{ display:flex; order:3; }
  .menu, .nav-right{
    display:none;
  }
  .nav{ flex-wrap:wrap; }
  .nav.is-open{ gap:0; }
  .nav.is-open .menu,
  .nav.is-open .nav-right{
    display:flex;
    flex-basis:100%;
  }
  .nav.is-open .menu{
    flex-direction:column;
    align-items:center;
    order:4;
    margin-top:12px;
    padding:20px 16px 16px;
    border:1px solid var(--blue-200);
    border-bottom:none;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    gap:16px;
  }
  .nav.is-open .nav-right{
    order:5;
    flex-direction:column;
    align-items:center;
    margin-top:0;
    padding:16px;
    border:1px solid var(--blue-200);
    border-top:none;
    border-radius:0 0 var(--radius-xl) var(--radius-xl);
    gap:24px;
  }
}

/* ---------- Result pages (successfully_sent, sent, no_pc, not_filled, no_ad_source) ---------- */
.result{
  background:var(--white-bg);
  min-height:calc(100vh - 180px);
  display:flex;
  align-items:center;
  padding:64px 0;
}
.result .container{ display:flex; justify-content:center; }
.result__box{
  max-width:480px;
  border:1px solid var(--blue-200);
  transform:none;
  transition:none;
  animation:resultIn .45s cubic-bezier(.22,1,.36,1) both;
}
@media (min-width:960px){ .result__box{ padding:48px 40px 40px; } }
.result__box .modal__title{ font-size:24px; }
.result__actions{ display:flex; flex-direction:column; gap:12px; width:100%; }
.modal__icon--info{ background:var(--blue-100); color:var(--blue-600); }
.modal__icon--error{ background:#fdecec; color:var(--error-500); }
@keyframes resultIn{
  from{ opacity:0; transform:scale(.96) translateY(8px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .result__box{ animation:none; } }