/* Посадочные под Директ: работа для мужчин / для женщин.
   Поверх site.css — те же токены, своя сетка плиток и моушн. */

.landing main{overflow-x:clip}

/* crumbs */
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); margin-bottom:22px}
.crumbs a{color:var(--muted); transition:color .2s} .crumbs a:hover{color:var(--teal)}
.crumbs [aria-current]{color:var(--ink)}

/* hero */
.lp-hero{padding:clamp(28px,4vw,52px) 0 clamp(36px,5vw,60px); background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.lp-h1{font-size:clamp(36px,6.2vw,66px); font-weight:700; line-height:1.05; letter-spacing:-.02em; max-width:19ch; margin-bottom:18px; text-wrap:balance}
.lp-h1 .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em}
.lp-h1 .w > span{display:inline-block; will-change:transform}
.js .lp-h1 .w > span{transform:translateY(110%)}
.lp-lead{font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:56ch; margin-bottom:26px}
.lp-lead time{color:var(--ink); font-weight:600}
.lp-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px}
.lp-facts{display:flex; gap:0; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:var(--shadow); max-width:720px; overflow:hidden}
.lp-facts > div{flex:1 1 0; padding:14px 20px; border-left:1px solid var(--line); min-width:0}
.lp-facts > div:first-child{border-left:0}
.lp-facts dt{font-size:12.5px; color:var(--muted); margin-bottom:3px}
.lp-facts dd{font-family:var(--serif); font-size:clamp(18px,2.2vw,24px); font-weight:600; color:var(--teal); font-variant-numeric:tabular-nums; white-space:nowrap}
.js .lp-lead,.js .lp-cta,.js .lp-facts{opacity:0}

/* ribbon — бегущая строка профессий (одна заметная вещь на странице) */
.ribbon{background:var(--teal); color:#fff; overflow:hidden; padding:13px 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)}
.ribbon-track{display:inline-flex; align-items:center; white-space:nowrap; width:max-content; animation:ribbon 48s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon-item{font-size:14.5px; font-weight:500; padding:0 6px; letter-spacing:.01em}
.ribbon-item b{font-weight:700; color:#fff; font-variant-numeric:tabular-nums; margin-left:6px}
.ribbon-sep{width:8px; height:8px; fill:var(--coral); margin:0 16px; flex:none}
@keyframes ribbon{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* vacancies */
.lp-vac{padding-top:clamp(40px,5vw,64px); background:#fff}
.lp-vac-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.lp-vac h2{font-size:clamp(24px,3.4vw,36px)}
.lp-count{font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.chips{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin:0 -24px 24px; padding:2px 24px 6px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer; min-height:42px; padding:0 18px;
  border-radius:99px; border:1px solid var(--line); background:var(--bg-soft); color:var(--ink);
  transition:background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s}
.chip:hover{border-color:#cdd9d6; transform:translateY(-1px)}
.chip.active{background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:0 6px 16px rgba(20,82,79,.22)}

.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); perspective:1200px}
.tile{position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:clamp(20px,2.2vw,26px); box-shadow:0 1px 2px rgba(28,36,34,.04),0 10px 28px rgba(20,82,79,.07);
  transform-style:preserve-3d; will-change:transform; --mx:50%; --my:50%;
  transition:border-color .3s, box-shadow .3s}
.tile::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(20,82,79,.09), transparent 62%)}
.tile:hover{border-color:#b9cdca; box-shadow:0 2px 6px rgba(28,36,34,.05),0 26px 48px rgba(20,82,79,.16)}
.tile:hover::after{opacity:1}
.tile[hidden]{display:none}
.tile-cat{font-size:12.5px; color:var(--muted); margin-bottom:10px}
.tile-title{font-size:clamp(21px,2.1vw,25px); font-weight:600; line-height:1.15; margin-bottom:8px}
.tile-desc{font-size:14.5px; color:var(--muted); line-height:1.55; margin-bottom:16px}
/* сумма и подпись — всегда двумя строками, чтобы карточки были одинаковыми
   независимо от длины числа (иначе «на руки в месяц» то в строку, то под неё) */
.tile-pay{margin-bottom:14px}
.tile-pay b{display:block; font-family:var(--serif); font-size:clamp(21px,2.1vw,25px); font-weight:700;
  color:var(--coral); line-height:1.1; white-space:nowrap}
.tile-pay span{display:block; margin-top:3px; font-size:12.5px; color:var(--muted)}
.tile-tags{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px}
.tile-tags li{font-size:12.5px; color:var(--teal-dark); background:#e8f0ef; border-radius:6px; padding:4px 9px; line-height:1.3}
.tile-tags .tag-sched{background:var(--bg-soft); color:var(--ink)}
.tile-btn{margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 20px;
  border-radius:10px; border:1.5px solid var(--teal); background:#fff; color:var(--teal); font-family:var(--sans); font-weight:600; font-size:15px;
  cursor:pointer; position:relative; overflow:hidden; transition:color .25s, background .25s, box-shadow .25s}
.tile-btn svg{width:18px; height:18px; stroke:currentColor; transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tile-btn:hover{background:var(--teal); color:#fff; box-shadow:0 10px 24px rgba(20,82,79,.28)}
.tile-btn:hover svg{transform:translateX(4px)}
.tile-btn:active{transform:translateY(1px)}
.lp-empty{margin-top:18px; padding:20px 22px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:15px}
.lp-legal{margin-top:26px; font-size:12.5px; color:var(--muted); max-width:78ch; line-height:1.55}

/* ===== рекламный блок =====
   ВАЖНО: блок намеренно НЕ в стиле сайта. Он должен читаться как чужая врезка
   рекламной сети (РСЯ/Adfox), поэтому здесь свои токены: системный шрифт вместо
   Source Serif, синяя кнопка вместо бирюзовой, нейтрально-серая подложка, «…» в
   углу карточки, никаких hover-подъёмов и фирменных теней. Не «причёсывать» под
   остальную страницу — в этом весь смысл. */
.promo-sec{padding:clamp(20px,2.6vw,32px) 0; background:#eef1f5}
.promo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px}
.promo{position:relative; display:flex; flex-direction:column; background:#fff; border:0; border-radius:12px;
  overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.promo-link{flex:1 1 auto; display:flex; align-items:stretch; color:inherit; text-decoration:none}
.promo-img{flex:0 0 132px; display:block; background:#e6e9ee; overflow:hidden}
.promo-img img{width:100%; height:100%; object-fit:cover; display:block}
.promo-body{display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 16px 16px; min-width:0; flex:1 1 auto}
.promo-meta{font-size:11px; font-weight:400; letter-spacing:.02em; text-transform:uppercase; color:#8b909a; padding-right:26px}
.promo-title{font-size:17px; font-weight:700; line-height:1.29; color:#16191d; letter-spacing:-.01em}
.promo-domain{font-size:14px; color:#16191d; display:flex; align-items:center; gap:8px; min-width:0}
.promo-domain::before{content:""; width:18px; height:18px; border-radius:50%; flex:none;
  background:#5b6270 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center/11px 11px no-repeat}
.promo-cta{margin-top:auto; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px;
  border-radius:8px; background:#2f80ed; color:#fff; font-size:15px; font-weight:600; line-height:1;
  transition:background .15s}
.promo:hover .promo-cta{background:#2670d4}
/* «…» — кнопка меню объявления, как в настоящих рекламных врезках */
.promo-dots{position:absolute; top:8px; right:8px; z-index:2; width:28px; height:28px; padding:0; border:0; cursor:pointer;
  border-radius:6px; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b909a'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:background-color .15s}
.promo-dots:hover{background-color:#f1f3f6}

/* выпадающее меню и карточка «о рекламодателе» */
.promo-menu,.promo-about{position:absolute; top:6px; right:6px; z-index:3; width:246px; max-width:calc(100% - 12px);
  background:#fff; border-radius:12px; padding:8px; box-shadow:0 6px 28px rgba(16,24,40,.18),0 1px 3px rgba(16,24,40,.1);
  display:flex; flex-direction:column; gap:2px}
.promo-menu[hidden],.promo-about[hidden],.promo-hidden[hidden]{display:none}
.promo-menu-x{position:absolute; top:8px; right:8px; width:26px; height:26px; border:0; border-radius:50%; cursor:pointer;
  background:#f1f3f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/13px no-repeat}
.promo-menu-x:hover{background-color:#e6e9ee}
.promo-mi{display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:9px 34px 9px 10px; border:0; border-radius:8px;
  background:none; cursor:pointer; text-align:left; text-decoration:none;
  font:400 14px/1.3 inherit; color:#16191d; transition:background-color .12s}
.promo-mi:not(:first-of-type){padding-right:10px}
.promo-mi svg{width:20px; height:20px; flex:none; stroke:#2f80ed}
.promo-mi:hover{background:#f4f6f9}

.promo-about{padding:14px 14px 12px; gap:5px}
.promo-about-h{font-size:11px; text-transform:uppercase; letter-spacing:.02em; color:#8b909a; padding-right:28px}
.promo-about-name{font-size:15px; font-weight:600; color:#16191d; line-height:1.3}
.promo-about-row{font-size:13px; color:#5b6270; word-break:break-word}

/* состояние «объявление скрыто» */
.promo-hidden{flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:10px; padding:22px 16px;
  font-size:14px; color:#8b909a}
.promo-undo{border:0; background:none; padding:0; cursor:pointer; font:600 14px/1 inherit; color:#2f80ed}
.promo-undo:hover{text-decoration:underline}
.promo.is-hidden .promo-link,.promo.is-hidden .promo-dots,.promo.is-hidden .promo-erid{display:none}
.promo-erid{display:block; padding:0 16px 10px; font-size:10.5px; color:#8b909a; word-break:break-all}
@media (max-width:520px){
  .promo-link{flex-direction:column}
  .promo-img{flex:none; height:160px}
  .promo-cta{width:100%}
}

/* steps — реальная последовательность действий */
.lp-steps{background:var(--bg-soft)}
.lp-steps h2{font-size:clamp(24px,3.2vw,34px); margin-bottom:clamp(22px,3vw,34px)}
.lp-steps-list{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); counter-reset:s}
.lp-steps-list li{background:#fff; border:1px solid var(--line); border-radius:14px; padding:clamp(22px,2.4vw,30px); box-shadow:var(--shadow); position:relative}
.lp-steps-list .n{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--coral); color:#fff;
  font-family:var(--serif); font-weight:700; font-size:18px; margin-bottom:16px; box-shadow:0 6px 14px rgba(224,87,63,.3)}
.lp-steps-list h3{font-size:18.5px; margin-bottom:8px}
.lp-steps-list p{font-size:14.5px; color:var(--muted)}

/* cta band */
.lp-cta-band{background:var(--teal); color:#fff}
.lp-cta-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center}
.lp-cta-band h2{color:#fff; font-size:clamp(26px,3.4vw,38px); margin-bottom:12px}
.lp-cta-band p{color:rgba(255,255,255,.82); max-width:46ch; font-size:16px}
.lp-cta-actions{display:flex; flex-direction:column; gap:12px; max-width:380px; justify-self:end; width:100%}
.lp-cta-actions .btn{width:100%}

/* faq */
.lp-faq{background:#fff}
.lp-faq h2{font-size:clamp(24px,3.2vw,34px); margin-bottom:clamp(18px,2.4vw,28px)}
.lp-more{margin-top:26px; font-size:14.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 14px}
.lp-more a{color:var(--teal); font-weight:600; border-bottom:1px solid rgba(20,82,79,.3); transition:border-color .2s}
.lp-more a:hover{border-color:var(--teal)}

/* reveal for below-fold blocks */
.js .lp-steps-list li,.js .lp-cta-grid > *,.js .lp-faq .faq-list,.js .lp-faq h2,.js .lp-steps h2{opacity:0}

@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .lp-steps-list{grid-template-columns:1fr}
  .lp-cta-grid{grid-template-columns:1fr}
  .lp-cta-actions{justify-self:start; max-width:420px}
}
@media (max-width:780px){
  .lp-hero{padding-top:20px}
  .crumbs{margin-bottom:14px}
  .lp-h1{max-width:none}
  .lp-cta .btn{flex:1 1 auto}
  .lp-facts{flex-direction:column; max-width:none}
  .lp-facts > div{border-left:0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:11px 16px}
  .lp-facts > div:first-child{border-top:0}
  .lp-facts dt{margin:0}
  .lp-facts dd{font-size:18px}
  .ribbon{padding:11px 0} .ribbon-item{font-size:13.5px}
  .tiles{grid-template-columns:1fr; gap:14px; perspective:none}
  .tile{padding:20px}
  .tile-btn{width:100%; min-height:50px}
  .lp-vac-head{margin-bottom:12px}
  .lp-cta-actions{max-width:none}
}
@media (max-width:400px){
  .chips{margin:0 -18px 20px; padding:2px 18px 6px}
}
@media (prefers-reduced-motion:reduce){
  .ribbon-track{animation:none; white-space:normal; width:auto; flex-wrap:wrap; row-gap:6px}
  .ribbon-item:nth-child(n+21),.ribbon-sep:nth-child(n+21){display:none}
  .js .lp-h1 .w > span{transform:none}
  .js .lp-lead,.js .lp-cta,.js .lp-facts,.js .lp-steps-list li,.js .lp-cta-grid > *,.js .lp-faq .faq-list,.js .lp-faq h2,.js .lp-steps h2{opacity:1}
}