/* HR FREE BRAND — общие стили сайта.
   Один файл на все страницы. Специфика конкретной страницы —
   в assets/page-<имя>.css. Правьте здесь то, что должно
   поменяться везде сразу. */

:root{
    --white:#FFFFFF;
    --bg-soft:#F3F9EE;
    --pale:#EAF5E1;
    --line:#D3E6C6;
    --green-deep:#12310B;
    --green-main:#226B12;
    --green-light:#6FBF4A;
    --green-bright:#8FDB6A;
    --black:#121711;
    --ink:#1B231A;
    --ink-soft:#5B6B57;
    --dark-card:#0F1C0C;
    --dark-card-2:#16260F;
    --on-dark-soft:#B9D9AE;
    --maxw:1180px;
    --radius:18px;
  }
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
h1,h2,h3,.display{
    font-family:'Unbounded',sans-serif;
    margin:0;
    letter-spacing:-0.01em;
  }
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
section{padding:88px 0;}
@media (max-width:720px){ section{padding:56px 0;} .wrap{padding:0 20px;} }
.light{background:var(--bg-soft);}
.eyebrow{
    font-size:12.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--green-main);
    font-weight:700;
    margin-bottom:16px;
  }
.eyebrow.on-dark{color:var(--green-bright);}
.head{max-width:720px;margin-bottom:44px;}
.head h2{font-size:clamp(26px,3.2vw,36px);font-weight:700;color:var(--black);}
.head p{margin-top:14px;font-size:15.5px;color:var(--ink-soft);}
.head.on-dark h2{color:var(--white);}
.head.on-dark p{color:var(--on-dark-soft);}
/* ---------- NAV ---------- */
  header.nav{
    position:sticky;top:0;z-index:100;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
.nav-inner{
    max-width:var(--maxw);margin:0 auto;padding:14px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;}
.logo-img{height:40px;display:block;border-radius:9px;}
.logo-word{font-family:'Unbounded',sans-serif;font-size:13.5px;font-weight:700;color:var(--black);letter-spacing:.02em;white-space:nowrap;}
@media (max-width:640px){.logo-word{display:none;}}
.nav-tagline{
    display:none; flex:1; text-align:center; padding:0 12px;
    font-size:13.5px; font-weight:700; line-height:1.3; color:var(--ink);
    letter-spacing:.01em;
  }
nav.links{display:flex;gap:26px;}
nav.links a{font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;transition:color .2s;}
nav.links a:hover{color:var(--green-main);}
.burger{
    display:none; flex-direction:column; justify-content:center; align-items:center;
    gap:5px; width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
    background:var(--white); cursor:pointer; flex-shrink:0;
  }
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s, opacity .2s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{
    display:none; flex-direction:column; gap:2px;
    background:var(--white); border-top:1px solid var(--line);
    padding:10px 20px 16px;
  }
.mobile-menu.open{display:flex;}
.mobile-menu a{
    padding:13px 4px; font-size:15px; font-weight:500; color:var(--ink);
    text-decoration:none; border-bottom:1px solid var(--line);
  }
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu .btn-primary{margin-top:12px;justify-content:center;}
@media (max-width:900px){
    nav.links{display:none;}
    .burger{display:flex;}
    .nav-inner .btn-primary{display:none;}
    .nav-tagline{display:block;}
  }
/* ---------- BUTTONS (капсулы — единственная форма кнопки) ---------- */
  .btn-primary{
    display:inline-flex;align-items:center;gap:9px;
    background:var(--green-main); color:var(--white)!important;
    font-weight:600; font-size:14.5px; padding:13px 24px; border-radius:100px;
    text-decoration:none; transition:background .18s, transform .18s; white-space:nowrap;
  }
.btn-primary:hover{ background:var(--green-deep); transform:translateY(-1px); }
.btn-primary svg{width:17px;height:17px;flex-shrink:0;}
.btn-primary.on-dark{ background:var(--green-bright); color:var(--dark-card)!important; }
.btn-primary.on-dark:hover{ background:var(--white); }
.btn-ghost{
    display:inline-flex;align-items:center;gap:9px;
    background:transparent; color:var(--green-deep)!important;
    border:1.5px solid var(--line); border-radius:100px; padding:13px 24px;
    font-weight:600; font-size:14.5px; text-decoration:none;
  }
.btn-ghost:hover{ border-color:var(--green-main); background:var(--pale); }
.btn-mini{
    display:inline-flex; align-items:center; gap:7px;
    font-size:13px; font-weight:600; color:var(--green-main);
    text-decoration:none; margin-top:14px; transition:gap .15s;
  }
.btn-mini:hover{gap:10px;}
.btn-mini svg{width:14px;height:14px;flex-shrink:0;}
.btn-mini.on-dark{color:var(--green-bright);}
/* ---------- CARDS ---------- */
  .card{
    background:var(--white); border:1px solid var(--line);
    border-radius:16px; padding:26px;
  }
.card.pale{background:var(--pale);}
.card.big{border-radius:20px;padding:32px;}
.card.dark{background:var(--dark-card); border:none; color:var(--white);}
.card.accent{background:var(--pale);border:2px solid var(--green-main);position:relative;}
.card.accent::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--green-main);border-radius:14px 14px 0 0;}
.card.wide{grid-column:span 2;}
@media (max-width:960px){.card.wide{grid-column:span 1;}}
/* ---------- CHIPS ---------- */
  .chip{
    display:inline-flex; align-items:center;
    background:var(--white); border:1px solid var(--line);
    border-radius:100px; padding:10px 18px; font-size:13.5px; color:var(--ink);
  }
.chip-list{display:flex;flex-wrap:wrap;gap:10px;}
/* ---------- BADGES (круг: белая заливка + зелёная обводка) ---------- */
  .badge{
    flex-shrink:0; width:34px; height:34px; border-radius:50%;
    background:var(--white); border:1.75px solid var(--green-main);
    display:flex; align-items:center; justify-content:center;
    font-family:'Unbounded',sans-serif; font-weight:700; font-size:13px; color:var(--green-main);
  }
.badge.on-dark{ background:var(--green-bright); border-color:var(--green-bright); color:var(--dark-card); }
.badge.check{font-family:'Inter',sans-serif;}
.step-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.step-list li{display:flex;gap:14px;align-items:flex-start;}
.step-list li p{margin:0;font-size:14.5px;color:var(--ink);padding-top:6px;}
.step-list.on-dark li p{color:var(--white);}
/* ---------- STATS ---------- */
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:var(--pale);border-radius:18px;padding:26px;}
.stat-card .n{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(30px,3.6vw,40px);color:var(--green-main);}
.stat-card .l{margin-top:10px;font-size:13px;color:var(--ink-soft);}
/* ---------- CTA BANNER (внутристраничный захват) ---------- */
  .cta-banner{
    margin-top:40px; background:var(--white); border:1px solid var(--line);
    border-radius:20px; padding:30px 34px;
    display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  }
.cta-banner .txt h3{font-size:18px;font-weight:600;color:var(--black);}
.cta-banner .txt p{margin-top:6px;font-size:13.5px;color:var(--ink-soft);}
.cta-banner.dark{background:var(--dark-card);border:none;}
.cta-banner.dark .txt h3{color:var(--white);}
.cta-banner.dark .txt p{color:var(--on-dark-soft);}
/* ---------- HERO ---------- */
  .hero{
    background:linear-gradient(180deg, var(--dark-card) 0%, #0B140A 100%);
    color:var(--white); padding:96px 0 76px; position:relative; overflow:hidden;
  }
.hero::after{
    content:""; position:absolute; inset:auto -10% -40% auto;
    width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle, rgba(143,219,106,.15), transparent 70%);
  }
.hero-wrap{position:relative;z-index:2;}
.hero-tag{
    display:inline-block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--green-bright); margin-bottom:26px;
  }
.hero h1{font-size:clamp(32px,4.6vw,50px);font-weight:700;line-height:1.15;max-width:820px;color:var(--white);}
.hero-sub{font-size:clamp(15px,1.6vw,18px);font-weight:400;color:rgba(255,255,255,.72);max-width:560px;margin-top:18px;line-height:1.5;}
.hero-manifesto{
    margin-top:34px; display:inline-block; border:1px solid #2C4A38; background:var(--dark-card-2);
    border-radius:100px; padding:14px 26px;
  }
.hero-manifesto span{font-family:'Unbounded',sans-serif;font-size:16px;font-weight:600;color:var(--green-bright);}
.hero-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;}
.hero-legal{margin-top:34px;font-size:12.5px;color:var(--on-dark-soft);}
/* ---------- GEO ---------- */
  .geo-grid{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:24px;}
@media (max-width:900px){.geo-grid{grid-template-columns:1fr;}}
.geo-card h4{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-main);margin-bottom:16px;}
.geo-big{font-family:'Unbounded',sans-serif;font-size:22px;font-weight:700;color:var(--black);}
.geo-big span{display:block;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:400;color:var(--ink-soft);margin-top:8px;}
/* ---------- FORK ---------- */
  .fork-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:860px){.fork-grid{grid-template-columns:1fr;}}
.fork-card h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-main);margin-bottom:14px;}
.fork-card h3{font-size:20px;font-weight:600;color:var(--black);margin-bottom:20px;}
/* ---------- GRID HELPERS ---------- */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} .grid-5{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3,.grid-4,.grid-5{grid-template-columns:1fr;}}
/* ---------- MOBILE CAROUSEL (Доверие/Гарантии, KPI/Адаптация) ---------- */
  @media (max-width:720px){
    .carousel-mobile{
      display:flex!important; grid-template-columns:none!important;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      gap:14px!important; margin:0 -20px; padding:4px 20px 18px;
      scrollbar-width:none;
    }
    .carousel-mobile::-webkit-scrollbar{display:none;}
    .carousel-mobile > *{
      flex:0 0 86%; scroll-snap-align:start;
    }
    .carousel-hint{
      display:flex; align-items:center; justify-content:center; gap:6px;
      font-size:12px; color:var(--ink-soft); margin-top:-6px; margin-bottom:8px;
    }
    .carousel-hint svg{width:14px;height:14px;}
  }
.carousel-hint{display:none;}
@media (max-width:720px){.carousel-hint{display:flex;}}
.dir-card h4{font-size:15px;font-weight:600;color:var(--black);margin-bottom:8px;}
.dir-card p{font-size:13px;color:var(--ink-soft);margin:0 0 12px;}
.dir-card .focus-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-main);margin-bottom:6px;}
.dir-card .focus-txt{font-size:12.5px;color:var(--ink);}
.dir-card hr{border:none;border-top:1px solid var(--line);margin:14px 0;}
/* ---------- FORMATS ---------- */
  .fmt-card{display:flex;flex-direction:column;gap:14px;position:relative;}
.fmt-card.featured{background:var(--dark-card);color:var(--white);border:none;padding-top:44px;}
.fmt-badge{
    position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    background:var(--green-bright); color:var(--dark-card); font-size:11px; font-weight:700;
    padding:7px 16px; border-radius:100px; white-space:nowrap;
  }
.fmt-card h4{font-size:16px;font-weight:600;}
.fmt-card .desc{font-size:12.5px;font-style:italic;color:var(--ink-soft);margin-top:-8px;}
.fmt-card.featured .desc{color:var(--on-dark-soft);}
.fmt-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.fmt-card li{font-size:12.5px;padding-left:14px;position:relative;}
.fmt-card li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--green-main);}
.fmt-card.featured li::before{background:var(--green-bright);}
.fmt-card .guar{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--green-main);}
.fmt-card.featured .guar{border-top-color:#2C4A38;color:var(--green-bright);}
/* ---------- FINAL CTA / FORM ---------- */
  .final{background:linear-gradient(180deg, var(--dark-card) 0%, #0B140A 100%);color:var(--white);}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media (max-width:900px){.final-grid{grid-template-columns:1fr;}}
.contact-card{background:var(--dark-card-2);border-radius:20px;padding:34px;}
.contact-card h3{font-size:17px;font-weight:600;margin-bottom:22px;color:var(--white);}
.qr-row{display:flex;gap:22px;align-items:center;}
.qr-row img{width:120px;height:120px;border-radius:10px;background:var(--white);padding:6px;}
.qr-row .t{font-size:15px;font-weight:600;color:var(--white);}
.qr-row .s{font-size:12.5px;color:var(--green-bright);margin-top:4px;}
.qr-row .d{font-size:11.5px;color:var(--on-dark-soft);margin-top:8px;line-height:1.4;}
.contact-rows{margin-top:24px;padding-top:20px;border-top:1px solid #2C4A38;display:flex;gap:28px;flex-wrap:wrap;}
.contact-rows .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#7C9686;}
.contact-rows .val{font-size:13.5px;font-weight:600;color:var(--white);margin-top:5px;}
.apply-card{background:var(--dark-card-2);border-radius:20px;padding:34px;}
.apply-card h3{font-size:17px;font-weight:600;margin-bottom:8px;color:var(--white);}
.apply-card p{font-size:13px;color:var(--on-dark-soft);margin:0 0 22px;}
.apply-field{margin-bottom:14px;}
.apply-field label{display:block;font-size:11.5px;color:var(--on-dark-soft);margin-bottom:6px;}
.apply-field input, .apply-field textarea{
    width:100%; background:var(--dark-card); border:1px solid #2C4A38; border-radius:10px;
    padding:11px 14px; font-family:'Inter',sans-serif; font-size:13.5px; color:var(--white);
  }
.apply-field textarea{resize:vertical;min-height:70px;}
.apply-field input::placeholder, .apply-field textarea::placeholder{color:#5C7A67;}
.apply-submit{
    width:100%; background:var(--green-bright); color:var(--dark-card); border:none;
    border-radius:100px; padding:14px; font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px;
    cursor:pointer; margin-top:6px;
  }
.apply-submit:hover{background:var(--white);}
/* ---------- PRICING ---------- */
  .price-subnav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px;}
.price-subnav a{
    font-size:13px;font-weight:600;color:var(--green-main);
    background:var(--pale);border:1px solid var(--line);border-radius:100px;
    padding:9px 18px;text-decoration:none;
  }
.price-subnav a:hover{background:var(--green-main);color:var(--white);}
.price-block{margin-bottom:64px;scroll-margin-top:90px;}
.price-block:last-child{margin-bottom:0;}
.price-block h3{font-size:20px;font-weight:700;color:var(--black);margin-bottom:6px;font-family:'Unbounded',sans-serif;}
.price-block .sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:26px;}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.price-grid.four{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){.price-grid,.price-grid.four{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.price-grid,.price-grid.four{grid-template-columns:1fr;}}
.price-card{
    background:var(--white);border:1px solid var(--line);border-radius:18px;
    padding:26px;display:flex;flex-direction:column;
  }
.price-card.hi{border:2px solid var(--green-main);background:var(--pale);position:relative;}
.price-card.hi::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--green-main);border-radius:16px 16px 0 0;}
.price-card .p-name{font-size:17px;font-weight:700;color:var(--black);margin-bottom:4px;}
.price-card .p-desc{font-size:12px;color:var(--ink-soft);margin-bottom:16px;}
.price-card .p-price{font-family:'Unbounded',sans-serif;font-size:24px;font-weight:700;color:var(--black);}
.price-card .p-note{font-size:11.5px;color:var(--ink-soft);margin-bottom:6px;}
.price-card .p-discount{
    display:inline-block;background:var(--pale);color:var(--green-deep);
    font-size:11px;font-weight:600;padding:5px 12px;border-radius:100px;margin-bottom:16px;
  }
.price-card hr{border:none;border-top:1px solid var(--line);margin:14px 0;}
.price-card ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1;}
.price-card li{font-size:12.5px;color:var(--ink);padding-left:18px;position:relative;line-height:1.4;}
.price-card li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green-main);font-weight:700;font-size:11px;}
.refund-banner{
    display:flex;align-items:center;gap:14px;background:var(--dark-card);color:var(--white);
    border-radius:14px;padding:16px 22px;margin-bottom:28px;font-size:13.5px;font-weight:600;
    max-width:520px;
  }
.refund-banner svg{flex-shrink:0;width:22px;height:22px;color:var(--green-bright);}
.see-tariffs{margin-top:8px;}
/* ---------- COMPARISON TABLE (ломает паттерн карточек) ---------- */
  .tbl-wrap{background:var(--white);border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.tbl-wrap table{width:100%;border-collapse:collapse;font-size:13px;}
.tbl-wrap th{padding:16px 18px;text-align:center;color:var(--ink-soft);font-weight:600;font-size:12.5px;border-bottom:1px solid var(--line);background:var(--bg-soft);}
.tbl-wrap th:first-child{text-align:left;}
.tbl-wrap th .tbl-price{display:block;font-family:'Unbounded',sans-serif;font-size:16px;font-weight:700;color:var(--black);margin-top:6px;}
.tbl-wrap td{padding:12px 18px;text-align:center;color:var(--ink);border-bottom:1px solid var(--bg-soft);}
.tbl-wrap td:first-child{text-align:left;color:var(--ink-soft);}
.tbl-wrap tr:last-child td{border-bottom:none;}
.tbl-wrap .tbl-hl{background:var(--pale);}
.tbl-wrap .tbl-yes{color:var(--green-main);font-size:15px;font-weight:700;}
.tbl-wrap .tbl-no{color:var(--line);font-size:15px;}
.tbl-wrap .tbl-btn-row td{padding:18px;}
.tbl-wrap .tbl-btn-row a{justify-content:center;}
@media (max-width:760px){
    .tbl-wrap{overflow-x:auto;}
    .tbl-wrap table{min-width:620px;}
  }
/* ---------- MOBILE CAROUSEL: тарифы «Подбор специалистов» ---------- */
  .spec-cards{display:none;}
.spec-cards .price-card li.no{color:var(--ink-soft);}
.spec-cards .price-card li.no::before{content:"—";color:var(--line);font-size:12px;}
.spec-cards .price-card .p-tag{
    display:inline-block;align-self:flex-start;background:var(--green-main);color:var(--white);
    font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:4px 10px;border-radius:100px;margin-bottom:10px;
  }
@media (max-width:760px){
    #tariff-specialists .tbl-wrap{display:none;}
    #pricing .price-block .carousel-hint{display:flex;}
    .spec-cards{
      display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      gap:14px; margin:0 -20px; padding:8px 20px 18px;
      scrollbar-width:none;
    }
    .spec-cards::-webkit-scrollbar{display:none;}
    .spec-cards .price-card{flex:0 0 86%; scroll-snap-align:center;}
    .spec-cards .price-card .btn-mini{justify-content:center;}
    /* тарифные группы (Массовый подбор, Усиление HR-отдела, Абонемент) — карусели */
    .price-grid.carousel-mobile{
      display:flex!important; grid-template-columns:none!important;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      gap:14px; margin:0 -20px; padding:8px 20px 18px;
      scrollbar-width:none;
    }
    .price-grid.carousel-mobile::-webkit-scrollbar{display:none;}
    .price-grid.carousel-mobile .price-card{flex:0 0 86%; scroll-snap-align:center;}
    .price-grid.carousel-mobile .price-card .btn-mini{justify-content:center;}
  }
footer.site-footer{background:#0B140A;color:#7C9686;padding:26px 0;font-size:12.5px;text-align:center;}
/* ---------- FAQ ACCORDION ---------- */
  .faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px;}
.faq-item{
    background:var(--white); border:1px solid var(--line); border-radius:14px;
    overflow:hidden;
  }
.faq-item summary{
    list-style:none; cursor:pointer; padding:20px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    font-size:15px; font-weight:600; color:var(--black);
  }
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .faq-icon{
    flex-shrink:0; width:26px; height:26px; border-radius:50%;
    border:1.75px solid var(--green-main); display:flex; align-items:center; justify-content:center;
    position:relative;
  }
.faq-item .faq-icon::before, .faq-item .faq-icon::after{
    content:""; position:absolute; background:var(--green-main); border-radius:2px;
  }
.faq-item .faq-icon::before{width:11px;height:2px;}
.faq-item .faq-icon::after{width:2px;height:11px;transition:transform .2s;}
.faq-item[open] .faq-icon::after{transform:rotate(90deg) scaleY(0);}
.faq-item .faq-body{padding:0 24px 22px;font-size:14px;color:var(--ink-soft);line-height:1.6;}
.faq-item .faq-body p{margin:0 0 10px;}
.faq-item .faq-body p:last-child{margin-bottom:0;}
.faq-item .faq-body b{color:var(--ink);}
/* ---------- STICKY MOBILE BOTTOM BAR ---------- */
  .sticky-bottom{
    display:none;
    position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:rgba(15,28,12,.94); backdrop-filter:blur(8px);
    border-top:1px solid #2C4A38;
    padding:10px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform .25s ease;
  }
.sticky-bottom.visible{transform:translateY(0);}
.sticky-bottom a{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--green-bright); color:var(--dark-card)!important;
    font-weight:600; font-size:14px; padding:12px; border-radius:100px; text-decoration:none;
  }
.sticky-bottom svg{width:17px;height:17px;flex-shrink:0;}
@media (max-width:720px){
    .sticky-bottom{display:block;}
    body{padding-bottom:64px;}
  }
/* ========== ВИЗУАЛЬНАЯ ДИФФЕРЕНЦИАЦИЯ СЕКЦИЙ ========== */

  /* HERO: водяная монограмма */
  .hero-mark{
    position:absolute; right:-30px; bottom:-110px; z-index:1;
    font-family:'Unbounded',sans-serif; font-weight:800; line-height:1;
    font-size:clamp(230px,34vw,430px); letter-spacing:-.05em;
    color:rgba(143,219,106,.07); pointer-events:none; user-select:none;
  }
/* STATS: лента цифр без карточек */
  .stats-strip{display:grid;grid-template-columns:repeat(4,1fr);}
.stat-cell{padding:6px 28px;border-left:1px solid var(--line);}
.stat-cell:first-child{border-left:none;padding-left:0;}
.stat-cell .n{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(36px,4.6vw,56px);color:var(--green-main);}
.stat-cell .l{margin-top:10px;font-size:13px;color:var(--ink-soft);}
@media (max-width:900px){
    .stats-strip{grid-template-columns:1fr 1fr;row-gap:30px;}
    .stat-cell{padding:0 20px;}
    .stat-cell:nth-child(odd){border-left:none;padding-left:0;}
  }
/* ПРИЧИНЫ: карточки с гигантскими цифрами */
  .reason-card{
    position:relative;background:var(--white);border-radius:20px;
    padding:30px 26px 28px;overflow:hidden;border-bottom:5px solid var(--green-main);
  }
.reason-num{
    position:absolute;top:-16px;right:6px;font-family:'Unbounded',sans-serif;
    font-weight:800;font-size:96px;line-height:1;color:var(--pale);
  }
.reason-card h4,.reason-card p{position:relative;z-index:1;}
/* ГЕОГРАФИЯ: единая крупная плашка */
  .geo-grid{background:var(--pale);border-radius:26px;padding:30px;}
.geo-grid .card{border:none;}
@media (max-width:720px){.geo-grid{padding:18px;}}
/* FORK: контрастная пара */
  .fork-grid .fork-card:first-child{border:2px solid var(--green-main);}
.fork-card.dark{background:var(--dark-card);border:none;}
.fork-card.dark h3{color:var(--white);}
.fork-card.dark h4{color:var(--green-bright);}
.fork-card.dark p{color:var(--on-dark-soft)!important;}
.fork-card.dark .btn-mini{color:var(--green-bright);}
/* SERVICES: список-пилюли */
  .list-pills{gap:10px;}
.list-pills li{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:11px 16px;align-items:center;}
.list-pills li p{padding-top:0;}
/* TRUST: тёмный остров */
  .trust-dark{
    background:var(--dark-card);border-radius:26px;padding:38px;
    display:grid;grid-template-columns:1fr 1fr;gap:38px;
  }
.trust-dark .trust-col h4{color:var(--green-bright)!important;}
.trust-dark .step-list li p{color:var(--white);}
.trust-dark .badge.check{background:var(--green-bright);border-color:var(--green-bright);color:var(--dark-card);}
@media (max-width:720px){.trust-dark{grid-template-columns:1fr;padding:26px;gap:26px;}}
/* PROCESS: зелёные метрики */
  .metric-card{background:var(--green-main);border-radius:18px;padding:26px;}
.metric-card div{color:var(--white)!important;}
.metric-card div + div{color:#CDE9BF!important;}
/* 9 STEPS: таймлайн */
  .steps-line{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 24px;}
.step-node{position:relative;padding-top:20px;}
.step-node::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--line);border-radius:2px;}
.step-node::after{content:"";position:absolute;top:0;left:0;width:38px;height:3px;background:var(--green-main);border-radius:2px;}
.step-node .badge{background:var(--bg-soft);}
@media (max-width:960px){.steps-line{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){
    .steps-line{grid-template-columns:1fr;gap:0;}
    .step-node{padding:0 0 24px 30px;border-left:2px solid var(--line);}
    .step-node:last-child{border-left-color:transparent;padding-bottom:0;}
    .step-node::before,.step-node::after{display:none;}
    .step-node .badge{position:absolute;left:-19px;top:0;background:var(--white);}
  }
/* SOURCING: пилюли-источники */
  .pill-row{display:flex;flex-wrap:wrap;gap:14px;}
.pill-row .card{
    display:flex;align-items:center;gap:12px;
    border-radius:100px;padding:12px 24px 12px 12px;border:1.5px solid var(--line);
  }
.pill-row .card p{margin:0!important;font-size:13.5px;font-weight:600;}
.pill-row .card:hover{border-color:var(--green-main);background:var(--bg-soft);}
/* HR-SYSTEM: цветные верхние срезы */
  .sys-cards .card{border-top:6px solid var(--green-light);}
.sys-cards .card:nth-child(2){border-top-color:var(--green-main);}
.sys-cards .card:nth-child(3){border-top-color:var(--green-deep);}
/* KPI: сплит-панель */
  .split-panel{
    display:grid;grid-template-columns:1fr 1fr;
    background:var(--bg-soft);border:1px solid var(--line);border-radius:26px;overflow:hidden;
  }
.split-panel .split-col{padding:34px;}
.split-panel .split-col + .split-col{border-left:1px solid var(--line);}
@media (max-width:720px){
    .split-panel{grid-template-columns:1fr;}
    .split-panel .split-col{padding:24px;}
    .split-panel .split-col + .split-col{border-left:none;border-top:1px solid var(--line);}
  }
/* НАПРАВЛЕНИЯ: тёмная акцент-карта + hover */
  .dir-card{transition:transform .2s, box-shadow .2s;}
.dir-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(18,49,11,.12);}
.dir-card.accent{background:var(--dark-card);border:none;}
.dir-card.accent::before{display:none;}
.dir-card.accent h4{color:var(--white);}
.dir-card.accent p{color:var(--on-dark-soft);}
.dir-card.accent .focus-lbl{color:var(--green-bright);}
.dir-card.accent .focus-txt{color:var(--white);}
.dir-card.accent .btn-mini{color:var(--green-bright);}
/* METHODOLOGY: двухтоновая склейка */
  .duo-panel{display:grid;grid-template-columns:1.4fr 1fr;border:1px solid var(--line);border-radius:26px;overflow:hidden;}
.duo-panel > .card{border:none;border-radius:0;}
.duo-panel > .card.pale{border-left:1px solid var(--line);}
@media (max-width:720px){
    .duo-panel{grid-template-columns:1fr;}
    .duo-panel > .card.pale{border-left:none;border-top:1px solid var(--line);}
  }
/* EXPERT: глубокий зелёный баннер */
  .expert-banner{
    background:var(--green-deep);border-radius:26px;padding:38px;
    display:grid;grid-template-columns:1fr 1fr;gap:38px;
  }
.expert-banner .step-list li p{color:var(--white);}
.expert-banner > .step-list > li > .badge{background:transparent;border-color:var(--green-bright);color:var(--green-bright);}
.expert-banner .card.pale{background:rgba(255,255,255,.08);}
.expert-banner .card.pale h4{color:var(--green-bright)!important;}
.expert-banner .badge.check{background:var(--green-bright);border-color:var(--green-bright);color:var(--green-deep);}
@media (max-width:720px){.expert-banner{grid-template-columns:1fr;padding:26px;gap:26px;}}
/* WHY US: залитые бейджи */
  .why-grid .badge{background:var(--green-main);border-color:var(--green-main);color:var(--white);}
/* RESULTS: сплошная зелёная панель */
  .result-panel{
    background:linear-gradient(135deg,var(--green-main),var(--green-deep));
    border-radius:26px;padding:40px;
    display:grid;grid-template-columns:1fr 1fr;gap:18px 44px;
  }
.result-panel .step-list li p{color:var(--white);}
.result-panel .badge.check{background:var(--green-bright);border-color:var(--green-bright);color:var(--green-deep);}
@media (max-width:720px){.result-panel{grid-template-columns:1fr;padding:26px;}}
/* фикс: inline grid-template-columns не должен ломать мобильную вёрстку */
  @media (max-width:640px){
    .grid-3[style*="grid-template-columns"]{grid-template-columns:1fr!important;}
  }
/* ---------- УПАКОВКА А/Б: доп. стили ---------- */
  .page-hero{padding:64px 0 54px;}
.page-hero h1{font-size:clamp(28px,3.8vw,42px);}
.hero-proof{margin-top:26px;font-size:13px;color:var(--on-dark-soft);letter-spacing:.02em;}
.hero-proof b{color:var(--green-bright);font-weight:700;}
nav.links a.active{color:var(--green-main);font-weight:700;}
.price-subnav a{cursor:pointer;}
.price-subnav a.active{background:var(--green-main);color:var(--white);border-color:var(--green-main);}
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rv,.rv.in{opacity:1;transform:none;transition:none;}}
.teaser-card{display:flex;flex-direction:column;}
.teaser-card .p-price{margin-top:auto;}
/* ---------- SVG-ГРАФИКА ---------- */
  .geo-map{margin:0 0 30px;}
.geo-map svg{width:100%;height:auto;display:block;}
.sys-scheme{margin:0 0 40px;background:var(--white);border:1px solid var(--line);border-radius:26px;padding:28px 20px 12px;}
.sys-scheme svg{width:100%;height:auto;display:block;max-width:920px;margin:0 auto;}
@media (max-width:720px){.sys-scheme{padding:14px 8px 4px;border-radius:18px;}}
.fork-ico{position:absolute;top:26px;right:26px;color:var(--green-main);}
.fork-ico svg{width:36px;height:36px;}
.fork-card{position:relative;}
.fork-card.dark .fork-ico{color:var(--green-bright);}
.step-ico{position:absolute;right:0;top:16px;color:var(--green-light);}
.step-ico svg{width:22px;height:22px;}
@media (max-width:600px){.step-ico{top:2px;}}
/* ---------- ИНТЕРАКТИВ: подача вперёд при наведении и касании ---------- */
  .card,.price-card,.reason-card,.metric-card,.faq-item,.cta-banner,.contact-card,.apply-card,
  .trust-col,.split-col,.chip,.step-node,.stat-cell,.teaser-card{
    transition:opacity .55s ease, transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
  }
@media (hover:hover) and (pointer:fine){
    .card:hover,.price-card:hover,.reason-card:hover,.metric-card:hover,
    .cta-banner:hover,.contact-card:hover,.apply-card:hover,.teaser-card:hover{
      transform:translateY(-5px) scale(1.012); box-shadow:0 16px 34px rgba(18,49,11,.14);
    }
    .faq-item:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(18,49,11,.10);border-color:var(--green-main);}
    .chip:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(18,49,11,.12);border-color:var(--green-main);}
    .step-node:hover{transform:translateY(-4px);}
    .trust-col:hover,.split-col:hover{transform:translateY(-3px);}
    .tbl-wrap tbody tr:hover td{background:var(--bg-soft);}
    .tbl-wrap tbody tr.tbl-btn-row:hover td{background:transparent;}
  }
/* касание на мобильном: тот же эффект на время нажатия */
  .card:active,.price-card:active,.reason-card:active,.metric-card:active,.faq-item:active,
  .cta-banner:active,.chip:active,.teaser-card:active,.step-node:active{
    transform:translateY(-3px) scale(1.01); box-shadow:0 12px 26px rgba(18,49,11,.14);
  }
/* ---------- ИЛЛЮСТРАЦИИ ЛЮДЕЙ ---------- */
  .hero-visual{position:absolute;right:0;bottom:0;width:min(44%,520px);z-index:1;pointer-events:none;}
.hero-visual svg{width:100%;height:auto;display:block;}
@media (max-width:1000px){.hero-visual{display:none;}}
.fig-interview{max-width:720px;margin:48px auto 0;}
.fig-interview svg{width:100%;height:auto;display:block;border-radius:24px;}
.fig-team{margin-top:44px;}
.fig-team svg{width:100%;height:auto;display:block;}
.expert-portrait{display:flex;flex-direction:column;align-items:center;gap:14px;}
.expert-portrait svg{width:100%;max-width:230px;height:auto;}
.expert-cap{font-size:12.5px;color:var(--on-dark-soft);text-align:center;max-width:220px;line-height:1.45;}
.expert-banner.with-portrait{grid-template-columns:250px 1fr 1fr;}
@media (max-width:960px){.expert-banner.with-portrait{grid-template-columns:1fr;}}
.apply-intro{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.apply-intro svg{width:58px;height:58px;flex-shrink:0;}
.apply-intro .t1{font-size:14px;font-weight:600;color:var(--white);}
.apply-intro .t2{font-size:12px;color:var(--on-dark-soft);margin-top:3px;}
/* ---------- ЯРЛЫКИ У ПРАВОГО КРАЯ (№33) ---------- */
  .side-tabs{position:fixed;right:0;top:40%;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:8px;transition:transform .3s ease;}
.side-tabs.folded{transform:translateX(calc(100% - 28px));}
.side-tab{display:flex;align-items:center;gap:9px;background:var(--green-bright);color:var(--dark-card)!important;
    font-size:13px;font-weight:600;padding:11px 16px 11px 14px;border-radius:14px 0 0 14px;text-decoration:none;
    box-shadow:0 6px 18px rgba(18,49,11,.2);transition:transform .2s ease, box-shadow .2s ease;white-space:nowrap;}
.side-tab:hover{transform:translateX(-6px);box-shadow:0 10px 26px rgba(18,49,11,.28);}
.side-tab.t2{background:var(--green-main);color:#fff!important;}
.side-tab.t3{background:var(--dark-card);color:var(--green-bright)!important;padding:11px 14px;}
.side-tab svg{width:17px;height:17px;flex-shrink:0;}
.side-fold{background:#fff;border:1px solid var(--line);border-right:none;border-radius:10px 0 0 10px;
    width:28px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);}
.side-fold svg{width:13px;height:13px;transition:transform .3s;}
.side-tabs.folded .side-fold svg{transform:rotate(180deg);}
@media (max-width:1000px){
    .side-tabs{top:34%;}
    .side-tab{font-size:12px;padding:9px 12px 9px 11px;}
    .side-tab svg{width:15px;height:15px;}
  }
/* №35: телефон в шапке + кликабельные номера */
  .nav-phone{font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;white-space:nowrap;}
.nav-phone:hover{color:var(--green-main);}
@media (max-width:900px){.nav-inner .nav-phone{display:none;}}
.mobile-menu a.menu-phone{color:var(--green-main);font-weight:600;}
.contact-rows .val a{color:inherit;text-decoration:none;border-bottom:1px dashed currentColor;}
.contact-rows .val a:hover{color:var(--green-bright);}
/* №43: QR-код кликабелен */
  .qr-row a.qr-link{display:inline-block;line-height:0;border-radius:10px;}
/* №82: пунктовое выделение галочек и цифр */
  .step-list li{transition:transform .2s ease;border-radius:10px;}
.step-list li:hover, .step-list li.li-touch{transform:translateX(5px);}
.step-list li:hover > .badge, .step-list li.li-touch > .badge{
    background:var(--green-main);border-color:var(--green-main);color:#fff;}
.step-list li:hover > .badge.check, .step-list li.li-touch > .badge.check,
  .final .step-list li:hover > .badge, .final .step-list li.li-touch > .badge,
  .result-panel .step-list li:hover > .badge, .result-panel .step-list li.li-touch > .badge{
    background:var(--green-bright);border-color:var(--green-bright);color:var(--green-deep);box-shadow:0 0 14px rgba(143,219,106,.5);}
.step-list li:hover > p, .step-list li.li-touch > p{color:var(--green-main);}
.result-panel .step-list li:hover > p, .result-panel .step-list li.li-touch > p,
  .card.dark .step-list li:hover > p, .card.dark .step-list li.li-touch > p{color:var(--green-bright);}
/* №84: кнопка «наверх» */
  #toTop{position:fixed;right:16px;bottom:20px;z-index:210;width:46px;height:46px;border-radius:50%;border:none;
    background:var(--green-bright);color:var(--green-deep);cursor:pointer;box-shadow:0 8px 22px rgba(18,49,11,.3);
    display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease;}
#toTop.show{opacity:1;pointer-events:auto;transform:none;}
#toTop svg{width:20px;height:20px;}
#toTop:hover{background:var(--green-light);}
@media (max-width:720px){#toTop{bottom:76px;right:12px;width:42px;height:42px;}}

/* =========================================================
   Добавлено при пересборке: подвал, форма заявки, служебные
   страницы. Всё остальное выше — исходное оформление сайта.
   ========================================================= */

/* ---------- подвал ---------- */
footer.site-footer{
  background:var(--dark-card);
  color:var(--on-dark-soft);
  padding:56px 0 0;
  font-size:14.5px;
  line-height:1.7;
  text-align:left;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:36px;
  padding-bottom:36px;
}
.footer-brand{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:18px;
  color:#fff;
  letter-spacing:.02em;
  margin-bottom:12px;
}
.footer-legal{margin:0;opacity:.8;}
.footer-h{
  font-weight:700;
  color:#fff;
  margin-bottom:12px;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.footer-col a{
  display:block;
  text-decoration:none;
  color:var(--on-dark-soft);
  padding:3px 0;
  transition:color .2s ease;
}
.footer-col a:hover{color:var(--green-bright);}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  justify-content:space-between;
  align-items:center;
  padding-top:20px;
  padding-bottom:22px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13.5px;
  opacity:.75;
}
.footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.footer-bottom a:hover{color:var(--green-bright);}
@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .footer-col:first-child{grid-column:1 / -1;}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
  footer.site-footer{padding-top:40px;}
}

/* ---------- форма заявки ---------- */
.apply-consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:13px;
  line-height:1.5;
  margin:6px 0 16px;
  cursor:pointer;
  opacity:.9;
}
.apply-consent input{
  margin-top:2px;
  width:16px;height:16px;
  flex:0 0 auto;
  accent-color:var(--green-light);
}
.apply-consent a{text-decoration:underline;text-underline-offset:2px;}
.apply-field .req{color:var(--green-bright);}

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.apply-submit[disabled]{opacity:.6;cursor:progress;}

.form-note{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.5;
  min-height:0;
}
.form-note.is-err{
  color:#FFC9C0;
  background:rgba(255,90,70,.12);
  border:1px solid rgba(255,120,100,.35);
  border-radius:10px;
  padding:10px 12px;
}
.form-done{
  display:flex;
  gap:14px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.6;
}
.form-done-i{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--green-light);
  color:#0B1B06;
  font-weight:700;
  font-size:18px;
}
.form-done a{text-decoration:underline;text-underline-offset:3px;}

/* ---------- простые текстовые страницы (политика, 404) ---------- */
.doc-page{padding:120px 0 80px;}
.doc-page h1{font-size:clamp(28px,4vw,44px);margin-bottom:8px;}
.doc-lead{color:var(--ink-soft);margin:0 0 40px;font-size:16px;}
.doc-body{max-width:780px;}
.doc-body h2{
  font-size:21px;
  margin:38px 0 12px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.doc-body h3{font-size:17px;margin:26px 0 8px;}
.doc-body p,.doc-body li{font-size:15.5px;line-height:1.75;color:var(--ink);}
.doc-body ul,.doc-body ol{padding-left:22px;margin:12px 0;}
.doc-body li{margin-bottom:7px;}
.doc-body a{color:var(--green-main);text-decoration:underline;text-underline-offset:3px;}
.doc-fill{
  background:#FFF6D6;
  border-bottom:2px solid #E9C449;
  padding:1px 5px;
  border-radius:3px;
  font-weight:600;
}

/* ---------- 404 ---------- */
.nf-wrap{
  min-height:70vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:120px 20px 80px;
}
.nf-code{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(64px,14vw,140px);
  font-weight:800;
  line-height:1;
  color:var(--green-light);
  opacity:.35;
}
.nf-wrap h1{font-size:clamp(24px,4vw,36px);margin:10px 0 14px;}
.nf-wrap p{color:var(--ink-soft);max-width:520px;margin:0 auto 28px;}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.nf-links a{
  text-decoration:none;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:999px;
  padding:10px 18px;
  font-weight:600;
  font-size:14.5px;
  transition:.2s ease;
}
.nf-links a:hover{border-color:var(--green-light);color:var(--green-main);}

/* ---------- правки после проверки ---------- */

/* Логотип: атрибуты width/height в разметке нужны, чтобы страница
   не «прыгала» при загрузке, но без этой строки браузер растягивает
   картинку до 128px вместо пропорциональных 42px. */
.logo-img{width:auto;}

/* ---------- сноска с расшифровкой «HR» на главной ---------- */
.fn-mark{
  font-size:.5em;
  vertical-align:super;
  line-height:0;
  color:var(--green-bright);
  font-weight:700;
  margin-left:1px;
}
.hero-fn{
  position:relative;
  z-index:2;
  max-width:560px;
  margin:20px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:12.5px;
  line-height:1.6;
  color:#8FA98A;
}
.hero-fn b{color:var(--on-dark-soft);font-weight:600;}
@media (max-width:999px){ .hero-fn{margin-top:26px;} }

/* три сноски подряд на странице «HR-система» */
.hero-fn-list{max-width:640px;}
.hero-fn-list p{margin:0 0 9px;}
.hero-fn-list p:last-child{margin-bottom:0;}
.hero-sub .fn-mark{font-size:.62em;}

/* ---------- МАКС: кнопка в шапке, в меню, в контактах ---------- */
.nav-max{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  margin-left:-4px;
  padding:7px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  color:var(--green-main);
  white-space:nowrap;
  transition:.18s ease;
}
.nav-max svg{width:16px;height:16px;flex:0 0 auto;}
.nav-max:hover{border-color:var(--green-light);background:var(--pale);}
@media (max-width:1180px){ .nav-max{display:none;} }

.mobile-menu .menu-max{
  color:var(--green-main);
  font-weight:600;
}

.max-inline{
  display:inline-block;
  font-size:.9em;
  color:var(--green-bright);
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}
.max-inline:hover{color:var(--white);}

.qr-max-row{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
}

/* ---------- девять шагов подбора: оборотные карточки ----------
   Спереди номер и название, на обороте одна фраза о том, что
   происходит на этапе. Размер коробки не меняется: 20px отступа
   сверху + 80px содержимого = те же 100px, что были до правки. */
.step-flip{cursor:pointer;}
.step-flip .sf-in{
  position:relative;
  height:80px;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.9,.3,1);
}
.step-flip:hover .sf-in,
.step-flip:focus-visible .sf-in,
.step-flip.turned .sf-in{transform:rotateY(180deg);}
.step-flip .sf-face{position:absolute;inset:0;backface-visibility:hidden;}
.step-flip .sf-front .step-ico{top:0;}
.step-flip .sf-back{
  transform:rotateY(180deg);
  background:var(--dark-card);
  border-radius:12px;
  padding:12px 15px;
  display:flex;
  align-items:center;
}
.step-flip .sf-back p{margin:0;font-size:12.5px;line-height:1.45;color:#D8EBCF;padding-right:26px;}
.step-flip .sf-n{
  position:absolute;
  right:13px;
  top:11px;
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:11px;
  color:var(--green-bright);
  opacity:.65;
}
.step-flip:focus-visible{outline:2px solid var(--green-main);outline-offset:4px;border-radius:8px;}
@media (max-width:600px){
  .step-flip .sf-in{height:46px;}
  .step-flip .sf-back{padding:8px 12px;border-radius:10px;}
  .step-flip .sf-back p{font-size:11.5px;line-height:1.35;}
}

/* ---------- переписка на «Вопросах»: разворот на весь экран ----------
   В карточке видно только четыре последние реплики. По наведению
   появляется кнопка «Развернуть», по нажатию карточка выходит на весь
   экран и показывает переписку целиком — видно, как реплики набегают. */
.faq-chat{position:relative;}
.fc-expand{
  position:absolute;
  right:12px;
  top:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);
  color:var(--on-dark-soft);
  border-radius:999px;
  padding:6px 13px;
  font:600 11.5px Inter,sans-serif;
  cursor:pointer;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .2s ease, transform .2s ease, background .18s ease;
}
.faq-chat:hover .fc-expand,
.faq-chat:focus-within .fc-expand{opacity:1;transform:none;}
.fc-expand:hover{background:rgba(255,255,255,.16);color:#fff;}
.fc-expand:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px;}
@media (hover:none){ .fc-expand{opacity:1;transform:none;} }

.fc-back{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(6,14,4,.74);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.fc-back.on{opacity:1;pointer-events:auto;}

.faq-chat.is-full{
  position:fixed;
  z-index:201;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(760px,94vw);
  height:min(80vh,720px);
  display:flex;
  flex-direction:column;
  padding:20px 20px 16px;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.faq-chat.is-full .fc-msgs{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.faq-chat.is-full .fc-msg{max-width:70%;font-size:14px;padding:10px 15px;}
.faq-chat.is-full .fc-ask{margin-top:12px;}
.faq-chat.is-full .fc-expand{opacity:1;transform:none;}
@media (max-width:640px){
  .faq-chat.is-full{width:96vw;height:86vh;}
  .faq-chat.is-full .fc-msg{max-width:86%;font-size:13px;}
}
@media (prefers-reduced-motion:reduce){
  .fc-back,.fc-expand{transition:none;}
}

/* ---------- переключатель поведения точек на «HR-системе» ---------- */
.dots-modes{
  position:absolute;
  right:24px;
  bottom:20px;
  z-index:3;
  display:flex;
  gap:8px;
}
.dots-modes button{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:var(--on-dark-soft);
  border-radius:999px;
  padding:7px 15px;
  font:600 12.5px Inter,sans-serif;
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
.dots-modes button:hover{background:rgba(255,255,255,.13);color:#fff;}
.dots-modes button[aria-pressed="true"]{
  background:var(--green-bright);
  border-color:var(--green-bright);
  color:#12280A;
}
.dots-modes button:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px;}
@media (max-width:900px){ .dots-modes{display:none;} }

/* =========================================================
   Правки по разбору эргономики, 23 августа
   ========================================================= */

/* ---------- нижняя плашка на телефоне: позвонить и написать ---------- */
.sticky-bottom{display:none;}
@media (max-width:720px){
  .sticky-bottom{display:flex!important;gap:8px;}
}
.sticky-bottom a{flex:1 1 0;min-width:0;}
.sticky-bottom .sb-call{
  background:var(--white)!important;
  color:var(--dark-card)!important;
}
.sticky-bottom .sb-call svg{stroke:currentColor;fill:none;}

/* ---------- на телефоне поверх текста висело пять элементов ----------
   Оставляем шапку и нижнюю плашку. Боковые ярлыки и ярлык «Живое демо»
   живут только на большом экране, где для них есть поля. */
@media (max-width:900px){
  .side-tabs{display:none!important;}
  .demo-tab{display:none!important;}
}

/* ---------- цели нажатия под палец ----------
   Мелкие ссылки в списках и подвалах тянем до 40px по высоте
   внутренними отступами: внешне почти не меняется, попадать легче. */
@media (max-width:900px){
  .footer-col a,
  .footer-bottom a,
  .nf-links a,
  .see-tariffs a,
  .apply-under a,
  .d-foot a{
    display:inline-flex;
    align-items:center;
    min-height:40px;
  }
  .footer-col a{display:flex;}
  .btn-mini{min-height:40px;}
  .chip-lead{min-height:40px;}
}

/* ---------- «Контакты» в меню ---------- */
.nav .links a.nav-contacts{color:var(--ink);}
.mobile-menu a.menu-contacts{color:var(--green-main);font-weight:600;}

/* ---------- оглавление длинных страниц ----------
   «Подбор» и «HR-система» — 12–14 экранов на телефоне. Строка под первым
   экраном показывает, что внутри, и даёт прыгнуть к своему вопросу. */
.page-toc{
  position:sticky;
  top:64px;
  z-index:60;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.page-toc-in{
  max-width:1180px;
  margin:0 auto;
  padding:11px 24px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}
.page-toc-in::-webkit-scrollbar{display:none;}
.page-toc a{
  flex:0 0 auto;
  padding:7px 15px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--white);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .18s, color .18s, background .18s;
}
.page-toc a:hover{border-color:var(--green-light);color:var(--green-main);background:var(--pale);}
.page-toc a:focus-visible{outline:2px solid var(--green-main);outline-offset:2px;}
@media (max-width:900px){
  /* на телефоне оглавление не липнет: иначе поверх текста снова висят
     две полосы сразу — шапка и оно */
  .page-toc{position:static;}
  .page-toc-in{padding:9px 16px;}
  .page-toc a{min-height:40px;display:inline-flex;align-items:center;}
}

/* якоря не должны уезжать под шапку и оглавление */
[id^="sec-"]{scroll-margin-top:118px;}

/* ---------- пара кнопок на обороте карточки: бот и МАКС ---------- */
.acts-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  margin-top:auto;
}
.acts-row .btn-mini{margin-top:0;}
.btn-mini-max{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.btn-mini-max .max-tile{flex:0 0 auto;}
.pf-back .acts-row{margin-top:auto;}
.face.back .acts-row .btn-mini-max{color:var(--green-bright)!important;}

/* ---------- оборотные карточки: видно, что они переворачиваются ----------
   Загнутый уголок в правом нижнем углу — как на калькуляторе Ксении.
   Плюс карточки по очереди чуть поворачиваются при первом появлении
   на экране: человек понимает, что с ними можно что-то сделать. */
.flip .front, .proc-flip .pf-front, .step-flip .sf-front{overflow:hidden;}
.corner{
  position:absolute;
  right:0;
  bottom:0;
  width:0;height:0;
  pointer-events:none;
  border-style:solid;
  border-width:0 0 22px 22px;
  border-color:transparent transparent var(--dark-card) transparent;
  filter:drop-shadow(-3px -3px 5px rgba(18,49,11,.28));
  transition:border-width .28s cubic-bezier(.3,.1,.2,1);
}
.flip:hover .corner, .proc-flip:hover .corner{border-width:0 0 40px 40px;}
/* на тёмной лицевой стороне уголок должен быть светлым, иначе его не видно */
.pf-front .corner{
  border-color:transparent transparent var(--green-light) transparent;
  filter:drop-shadow(-3px -3px 5px rgba(0,0,0,.35));
}
.flip.turned .corner, .proc-flip.turned .corner, .step-flip.turned .corner{opacity:0;}
.step-flip .corner{border-width:0 0 15px 15px;}
.step-flip:hover .corner{border-width:0 0 24px 24px;}

@keyframes peekFlip{
  0%{transform:rotateY(0)}
  45%{transform:rotateY(-30deg)}
  100%{transform:rotateY(0)}
}
.flip.peek .inner,
.proc-flip.peek .pf-inner,
.step-flip.peek .sf-in{animation:peekFlip 1.5s cubic-bezier(.4,.1,.3,1);}
@media (prefers-reduced-motion:reduce){
  .flip.peek .inner,.proc-flip.peek .pf-inner,.step-flip.peek .sf-in{animation:none;}
  .step-flip .sf-in{transition:none;}
}

/* ---------- плитки, которые ведут в заявку ----------
   Сферы и форматы работы на странице подбора: нажатие прокручивает
   к форме и вписывает готовый комментарий. Раз элемент нажимается —
   он должен и выглядеть нажимаемым. */
.chip-lead{cursor:pointer;transition:border-color .18s, background .18s, color .18s;}
.chip-lead:hover{border-color:var(--green-light);background:var(--pale);color:var(--green-main);}
.chip-lead:focus-visible{outline:2px solid var(--green-main);outline-offset:2px;}
.chip-lead::after{
  content:"→";
  margin-left:7px;
  font-size:12px;
  color:var(--green-main);
  opacity:0;
  transition:opacity .18s ease;
}
.chip-lead:hover::after{opacity:1;}

.step-list li.li-lead{cursor:pointer;}
.step-list li.li-lead:focus-visible{outline:2px solid var(--green-main);outline-offset:3px;border-radius:10px;}

/* поле комментария подсвечивается на секунду, чтобы человек заметил,
   что текст туда уже вписался */
#af-message.is-filled{
  border-color:var(--green-light);
  box-shadow:0 0 0 3px rgba(155,212,83,.28);
}

/* ---------- МАКС в попапе выбора города ---------- */
.btn-ghost.btn-ghost-max{display:inline-flex;align-items:center;gap:9px;}
.btn-ghost-max .max-tile{flex:0 0 auto;}

/* ---------- кнопка «Написать в МАКС» в полосах-призывах ---------- */
.cta-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.btn-max{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 22px;
  border-radius:100px;
  border:1px solid var(--line);
  background:var(--white);
  font-weight:600;
  font-size:14.5px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .18s, background .18s, transform .18s;
}
.btn-max:hover{border-color:var(--green-light);background:var(--pale);transform:translateY(-1px);}
.btn-max .max-tile{flex:0 0 auto;vertical-align:middle;}
.cta-banner.dark .btn-max{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.22);
  color:var(--white);
}
.cta-banner.dark .btn-max:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);}
@media (max-width:560px){
  .cta-acts{width:100%;}
  .cta-acts > a{flex:1 1 100%;justify-content:center;}
}

/* ---------- блок тарифов на главной ----------
   Один блок, разделённый пополам: слева весь подбор, справа HR-система.
   Раньше здесь стояли три карточки в ряд, и подбор был разорван на две. */
.price-split{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.price-split-in{display:grid;grid-template-columns:1fr 1fr;}
.ps-col{padding:28px 30px 26px;display:flex;flex-direction:column;}
.ps-col + .ps-col{border-left:1px solid var(--line);background:var(--pale);}
.ps-col .p-name{font-size:17px;font-weight:700;color:var(--black);margin-bottom:4px;}
.ps-col .p-desc{font-size:12px;color:var(--ink-soft);margin-bottom:2px;}

.p-lines{
  list-style:none;
  margin:14px 0 20px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  flex:1;
}
.p-lines li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-top:1px solid var(--line);
  font-size:13.5px;
  line-height:1.35;
  color:var(--ink);
}
.p-lines li::before{content:none;}
.p-lines li:first-child{border-top:none;padding-top:4px;}
.p-lines .l{color:var(--ink-soft);}
.p-lines .v{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:15.5px;
  color:var(--black);
  text-align:right;
}

.price-split-foot{
  border-top:1px solid var(--line);
  padding:18px 30px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
  align-items:center;
  justify-content:space-between;
}
.price-split-foot span{font-size:13px;color:var(--ink-soft);}

@media (max-width:860px){
  .price-split-in{grid-template-columns:1fr;}
  .ps-col + .ps-col{border-left:none;border-top:1px solid var(--line);}
  .ps-col{padding:24px 22px 22px;}
  .price-split-foot{padding:18px 22px;}
  .price-split-foot .btn-primary{width:100%;justify-content:center;}
}

/* ---------- QR-код всегда квадратный ----------
   Сами PNG квадратные (780×780), но во внешних просмотрщиках поверх
   страницы подмешивается сброс стилей с img{max-width:100%}. Из-за него
   картинка становится «сжимаемой», флекс ужимает ссылку по ширине,
   а height:120px остаётся — код превращается в прямоугольник и камера
   телефона может его не прочитать. Эти две строки закрывают вопрос. */
.qr-row a.qr-link{flex:0 0 auto;width:120px;height:120px;}
.qr-row img{flex:0 0 auto;max-width:none;aspect-ratio:1/1;object-fit:contain;}
.qr-row > div{min-width:0;}

/* подпись под заголовком QR — тоже ссылка */
.qr-row .s a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dashed currentColor;
}
.qr-row .s a:hover{color:var(--white);}

/* ---------- блок заявки: одна широкая карточка ----------
   Дублирующий блок контактов убран — телефоны и QR-коды теперь только
   в подвале. Поля разложены по три в ряд, согласие и кнопка — одной
   строкой внизу, чтобы секция не занимала пол-экрана. */
.apply-wide{max-width:960px;margin:0 auto;}
.apply-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px;}
.apply-cols .span-all{grid-column:1 / -1;}
.apply-foot{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:16px 26px;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}
.apply-foot .apply-consent{margin:0;flex:1 1 320px;}
.apply-foot .apply-submit{flex:0 0 auto;width:auto;padding-left:38px;padding-right:38px;}
.apply-under{
  margin:18px 0 0;
  text-align:center;
  font-size:13.5px;
  color:var(--on-dark-soft);
}
.apply-under a{
  color:var(--green-bright);
  text-decoration:none;
  border-bottom:1px dashed currentColor;
}
.apply-under a:hover{color:var(--white);}
.apply-under span{opacity:.4;margin:0 9px;}
@media (max-width:860px){
  .apply-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .apply-cols{grid-template-columns:1fr;}
  .apply-foot .apply-submit{width:100%;}
}

/* ---------- контакты по отделам ---------- */
/* четыре блока вместо трёх — раскладываем по два в ряд,
   иначе «Отдел продаж» занимает строку в одиночку */
.contact-rows{gap:18px 24px;}
.contact-rows > div{flex:1 1 200px;min-width:0;}
.contact-rows .val .dept-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
}

/* ---------- подвал: отделы ---------- */
.f-dept{margin:0 0 12px;}
.f-dept-n{
  display:block;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.55;
  margin-bottom:1px;
}
.footer-col .f-dept a{display:inline-block;padding:2px 0;}
.footer-col a.f-max{
  margin-left:14px;
  white-space:nowrap;
  color:var(--on-dark-soft);
}
.footer-col a.f-max:hover{color:#fff;}

/* в подвале появилась четвёртая колонка с QR-кодами */
.footer-grid{grid-template-columns:1.25fr .8fr 1.1fr auto;}
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .footer-col:first-child{grid-column:1 / -1;}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ---------- подвал: QR-коды ---------- */
.footer-qr .f-qr-row{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.footer-qr a.f-qr{
  display:block;
  padding:0;
  text-align:center;
  text-decoration:none;
  color:var(--on-dark-soft);
  flex:0 0 auto;
  width:92px;
}
.footer-qr a.f-qr img{
  display:block;
  width:92px;
  height:92px;
  max-width:none;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:9px;
  background:var(--white);
  padding:5px;
  margin-bottom:7px;
}
.footer-qr a.f-qr span{
  display:block;
  font-size:11.5px;
  line-height:1.35;
}
.footer-qr a.f-qr:hover span{color:var(--green-bright);}
@media (max-width:520px){
  .footer-qr .f-qr-row{gap:14px;}
}

/* плитка МАКСа: выравнивание со строкой текста */
.max-tile{vertical-align:-4px;flex:0 0 auto;border-radius:26%;}
.nav-max .max-tile{vertical-align:middle;}
.footer-col .max-tile,.d-foot .max-tile{vertical-align:-4px;margin-right:2px;}
.qr-row .t .max-tile{vertical-align:-5px;margin-right:4px;}
.max-inline{text-decoration:none;}
.max-inline span{text-decoration:underline;text-underline-offset:3px;margin-left:3px;}

/* ---------- светлая «призрачная» кнопка на тёмном фоне ----------
   В базовом правиле цвет помечен !important, поэтому здесь тоже — иначе
   тёмный текст остаётся на тёмном фоне и кнопки не видно. */
.btn-ghost.on-dark{
  border-color:rgba(255,255,255,.28);
  color:var(--white)!important;
  background:rgba(255,255,255,.06);
}
.btn-ghost.on-dark:hover{
  border-color:var(--green-bright);
  background:rgba(255,255,255,.14);
  color:var(--white)!important;
}

/* ================= правки 23 августа (вечер) ================= */

/* ---------- шапка: бургер раньше, а не когда уже наехало ----------
   Между 900 и 1180 px логотип упирался в меню, «HR-система» ломалась
   на две строки, а кнопка Telegram уезжала за край экрана.
   Порог показа бургера поднят до 1080 px. */
@media (max-width:1240px){
  .nav nav.links{display:none!important;}
  .nav-inner > .btn-primary{display:none!important;}
  .nav-inner .nav-phone{display:none!important;}
  .nav-inner .nav-max{display:none!important;}
  .burger{display:flex!important;}
  .nav-tagline{display:block;}
}
/* запас прочности: между 1080 и 1180 меню и так тесно — даём воздух */
@media (min-width:1241px) and (max-width:1400px){
  .nav-inner{gap:14px;}
  .nav .links{gap:16px;}
  .nav-tagline{display:none;}
}

/* ---------- сноски: по умолчанию свёрнуты, раскрываются по звёздочке ----
   Ксения: «звёздочку сделаем, а всё остальное скроем, разворачивается
   только когда нажимаешь на звёздочку». Каждая звёздочка открывает
   ровно свою расшифровку, не весь блок. */
.fn-mark{
  display:inline-block;
  cursor:pointer;
  font-size:.62em;
  line-height:1;
  vertical-align:super;
  padding:1px 3px;
  margin:0 0 0 1px;
  border-radius:5px;
  color:var(--green-bright);
  background:rgba(143,219,106,.14);
  border:0;
  font-family:inherit;
  font-weight:700;
  transition:background .16s, color .16s, transform .16s;
}
.fn-mark:hover{background:rgba(143,219,106,.30);transform:translateY(-1px);}
.fn-mark:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px;}
.fn-mark[aria-expanded="true"]{background:var(--green-bright);color:var(--dark-card);}
/* на светлом фоне (главная) — своя пара цветов */
.hero-light .fn-mark,
section:not(.dark):not(.hero-dark) .fn-mark{
  color:var(--green-main);
  background:rgba(34,107,18,.10);
}
.hero-fn,
.hero-fn-list{margin-top:14px;}
/* сами расшифровки прячем; показываем только раскрытую */
.hero-fn > p,
.hero-fn-list > p,
p.hero-fn{
  display:none;
  margin:0 0 8px;
  max-width:620px;
  font-size:13.5px;
  line-height:1.62;
  color:var(--on-dark-soft);
  padding:11px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border-left:2px solid var(--green-bright);
}
.hero-fn > p.fn-open,
.hero-fn-list > p.fn-open,
p.hero-fn.fn-open{
  display:block;
  animation:fnIn .22s cubic-bezier(.4,.9,.3,1);
}
@keyframes fnIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
/* на светлых секциях расшифровка тоже светлая */
body .hero-fn > p:not(.on-dark),
body p.hero-fn:not(.on-dark){color:var(--on-dark-soft);}
@media (prefers-reduced-motion:reduce){
  .hero-fn > p.fn-open,.hero-fn-list > p.fn-open,p.hero-fn.fn-open{animation:none;}
}

/* ---------- МАКС в тексте страниц — только значок ----------
   Слово «МАКС» остаётся в верхней полосе и в подвале; в карточках,
   полосах-призывах и под формой — кликабельная плитка без подписи. */
a.max-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  line-height:0;
  border-radius:9px;
  padding:0;
  border:0!important;
  background:none;
  transition:transform .16s, filter .16s;
}
a.max-ico:hover{transform:translateY(-1px) scale(1.06);filter:brightness(1.07);}
a.max-ico:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px;}
a.max-ico .max-tile{display:block;}

/* ---------- ссылка «Настройки cookie» в подвале ---------- */
.ck-line{
  text-align:center;
  padding:14px 20px 4px;
  font-size:12.5px;
}
.ck-line a.ck-settings{
  color:var(--on-dark-soft);
  opacity:.72;
  text-decoration:none;
  border-bottom:1px dotted currentColor;
  transition:opacity .16s, color .16s;
}
.ck-line a.ck-settings:hover{opacity:1;color:var(--green-bright);}
.ck-line a.ck-settings:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px;}
/* на светлых подвалах скрытых страниц */
.d-foot .ck-line a.ck-settings,
footer:not(.site-footer) .ck-line a.ck-settings{color:inherit;}


/* ---------- правки 23 августа, вечер (вторая волна) ---------- */

/* Пункт меню никогда не должен ломаться на две строки:
   именно из-за этого «HR-система» разрывалась и шапка ехала. */
.nav .links a{white-space:nowrap;}
.nav-inner{min-width:0;}
.nav-inner > *{flex-shrink:0;}
/* меню не должно сжиматься: при сжатии пункты налезали друг
   на друга и «Контакты» уезжали на телефон */
.nav .links{flex:0 0 auto;flex-wrap:nowrap;}

/* Боковые плашки «Получить КП» и «Тарифы» вылезали за правый край
   и налезали на переключатель режимов, когда окно уже, чем 1200 px.
   Порог показа поднят с 900 до 1200. */
@media (max-width:1200px){
  .side-tabs{display:none!important;}
  .demo-tab{display:none!important;}
}
/* и даже там, где они есть, не даём им уехать за экран */
.side-tabs{max-width:min(240px,32vw);}
.side-tab{max-width:100%;overflow:hidden;text-overflow:ellipsis;}

/* Переключатель точек стоял вплотную к правому краю и подлезал под
   боковые плашки «Получить КП» / «Тарифы». Отодвигаем его там, где
   плашки видны (шире 1200 px). */
@media (min-width:1201px){
  .dots-modes{right:150px;}
}

/* ================= поиск по сайту (правка 27) =================
   Лупа в шапке, по нажатию под шапкой разворачивается широкая строка.
   Образец — hr-profi.ru. */

.nav-search-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:100px;
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  padding:0;
  transition:border-color .16s, color .16s, background .16s;
}
.nav-search-btn:hover{border-color:var(--green-light);color:var(--green-main);background:var(--pale);}
.nav-search-btn:focus-visible{outline:2px solid var(--green-main);outline-offset:2px;}
.nav-search-btn[aria-expanded="true"]{
  background:var(--green-main);border-color:var(--green-main);color:var(--white);
}

.nav-search{
  position:absolute;
  left:0;right:0;
  top:100%;
  z-index:200;
  background:var(--white);
  border-bottom:1px solid var(--line);
  box-shadow:0 18px 44px -22px rgba(18,49,11,.35);
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .28s cubic-bezier(.4,.9,.3,1), opacity .2s;
}
.nav-search.on{max-height:78vh;opacity:1;overflow:visible;}

.ns-in{
  max-width:1180px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:12px;
}
.ns-ico{display:inline-flex;color:var(--ink-soft);flex:0 0 auto;}
.ns-field{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:none;
  font:inherit;
  font-size:19px;
  color:var(--ink);
  padding:8px 0;
  outline:none;
}
.ns-field::placeholder{color:var(--ink-soft);opacity:.72;}
.ns-field::-webkit-search-cancel-button{display:none;}
.ns-x{
  flex:0 0 auto;
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:100px;background:none;
  color:var(--ink-soft);cursor:pointer;padding:0;
  transition:background .16s,color .16s;
}
.ns-x:hover{background:var(--pale);color:var(--ink);}
.ns-x:focus-visible{outline:2px solid var(--green-main);outline-offset:2px;}

.ns-list{
  display:none;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px 16px;
  max-height:62vh;
  overflow-y:auto;
}
.ns-list.on{display:block;}
.ns-row{
  display:block;
  padding:13px 15px;
  border-radius:12px;
  border:1px solid transparent;
  text-decoration:none;
  margin-bottom:5px;
  transition:background .14s, border-color .14s;
}
.ns-row:hover,.ns-row.on{background:var(--bg-soft);border-color:var(--line);}
.ns-pg{
  display:block;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--green-main);
  font-weight:600;
  margin-bottom:3px;
}
.ns-h{
  display:block;
  font-size:15.5px;
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
  margin-bottom:3px;
}
.ns-t{
  display:block;
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-soft);
}
.ns-t mark{background:rgba(143,219,106,.42);color:var(--ink);border-radius:3px;padding:0 1px;}
.ns-empty{
  padding:16px 15px 22px;
  font-size:14.5px;
  color:var(--ink-soft);
}
.ns-empty a{color:var(--green-main);font-weight:600;}

/* пока поиск открыт — страница под ним не прокручивается мышью мимо */
body.ns-open .page-toc{z-index:1;}

/* пункт «Поиск по сайту» в мобильном меню */
.mobile-menu a.menu-search{
  display:flex;align-items:center;gap:9px;
  color:var(--green-main);font-weight:600;
}
.mobile-menu a.menu-search svg{flex:0 0 auto;}

@media (max-width:1240px){
  /* лупа остаётся в шапке даже когда меню свернулось в бургер:
     поиск — слишком частая задача, чтобы прятать его в меню */
  .nav-inner .nav-search-btn{display:inline-flex!important;margin-left:auto;}
}
@media (max-width:620px){
  .ns-in{padding:11px 16px;gap:8px;}
  .ns-field{font-size:16px;}       /* меньше 16px — iPhone зумит страницу */
  .ns-list{padding:0 16px 14px;max-height:58vh;}
  .ns-h{font-size:14.5px;}
  .ns-t{font-size:13px;}
}

/* вопрос, на который привёл поиск — подсвечиваем на секунду */
@keyframes qHit{0%{box-shadow:0 0 0 0 rgba(143,219,106,.5)}100%{box-shadow:0 0 0 12px rgba(143,219,106,0)}}
.faq-item.q-hit{animation:qHit 1.5s ease-out;border-radius:14px;}
@media (prefers-reduced-motion:reduce){.faq-item.q-hit{animation:none;}}

/* ---------- шапка: гарантированные зазоры ----------
   Базовая раскладка — space-between без gap: свободное место уходило
   в один промежуток, а логотип упирался в первый пункт меню. После
   добавления лупы (правка 27) это стало заметно на любом экране.
   Ставим настоящий gap, а правую группу прижимаем к краю. */
.nav-inner{
  gap:18px;
  justify-content:flex-start;
}
.nav .links{margin-right:auto;}
.nav-tagline{margin-right:auto;}
@media (min-width:1241px){
  .nav-inner{padding-left:28px;padding-right:28px;}
}

/* ---------- две галочки согласия (правка 28) ----------
   152-ФЗ: согласие на обработку и ознакомление с политикой — разные
   вещи, поэтому две отдельные галочки. Ни одна не отмечена заранее:
   предустановленная галочка согласием не считается. */
.consent-box{
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1 1 320px;
  min-width:0;
}
/* Старое правило .apply-consent задавало flex:1 1 320px — оно писалось
   для случая, когда галочка была прямым ребёнком .apply-foot (строка).
   Внутри .consent-box колонка, и 320px превращались в ВЫСОТУ: между
   галочками зияла дыра в треть экрана. Сбрасываем. */
.consent-box .apply-consent{flex:0 0 auto!important;}
.apply-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  line-height:1.5;
  cursor:pointer;
  color:var(--ink-soft);
}
.apply-consent input[type="checkbox"]{
  flex:0 0 auto;
  width:19px;height:19px;
  margin:1px 0 0;
  accent-color:var(--green-main);
  cursor:pointer;
}
.apply-consent input[type="checkbox"]:focus-visible{
  outline:2px solid var(--green-main);outline-offset:2px;
}
.apply-consent a{color:var(--green-main);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.apply-consent a:hover{color:var(--green-light);}
/* на тёмных карточках скрытых страниц */
.d .consent-box .apply-consent,
.dark .consent-box .apply-consent{color:var(--on-dark-soft);}
@media (max-width:620px){
  .consent-box{flex:1 1 100%;}
  .apply-consent{font-size:12.5px;}
  .apply-consent input[type="checkbox"]{width:22px;height:22px;}
}

.doc-note{
  padding:15px 18px;
  border-radius:12px;
  background:var(--pale);
  border:1px solid var(--line);
  font-size:14.5px;
  margin-bottom:26px;
}

/* ================= надпись из точек (правка 33) =================
   Раньше её рисовал скрипт на холсте — и она пропадала, если шрифт
   не загрузился, экран был с масштабом или в системе выключены
   анимации. Теперь это обычная разметка: кружки внутри SVG посчитаны
   при сборке. Видна всегда, при любых настройках и даже без скриптов.
   Движение ниже — украшение, а не условие видимости. */
.dots-stage{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:42%;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:3%;
  pointer-events:none;
  overflow:hidden;
}
.dots-word{
  width:100%;
  height:auto;
  max-height:40%;
  overflow:visible;
  filter:drop-shadow(0 0 14px rgba(143,219,106,.22));
}
.dots-word use{
  opacity:.92;
  transform-box:fill-box;
  transform-origin:center;
}

/* Дыхание: шесть групп с разным ритмом, чтобы поле жило,
   а не пульсировало разом. */
@keyframes dotBreath{
  0%,100%{transform:translate(0,0);opacity:.92;}
  50%    {transform:translate(0,-3px);opacity:1;}
}
.dots-word .d0{animation:dotBreath 3.4s ease-in-out infinite;}
.dots-word .d1{animation:dotBreath 3.9s ease-in-out infinite .35s;}
.dots-word .d2{animation:dotBreath 4.4s ease-in-out infinite .7s;}
.dots-word .d3{animation:dotBreath 3.6s ease-in-out infinite 1.05s;}
.dots-word .d4{animation:dotBreath 4.1s ease-in-out infinite 1.4s;}
.dots-word .d5{animation:dotBreath 3.2s ease-in-out infinite 1.75s;}

/* Появление при загрузке: точки проступают слева направо. */
@keyframes dotIn{from{opacity:0;}to{opacity:.92;}}
.dots-word use{animation-name:dotBreath;}
.dots-stage{animation:dotIn .9s ease-out both;}

/* Если человек попросил систему не двигать картинку — не двигаем.
   Но надпись остаётся на месте: она нарисована, а не вычислена. */
@media (prefers-reduced-motion:reduce){
  .dots-word .d0,.dots-word .d1,.dots-word .d2,
  .dots-word .d3,.dots-word .d4,.dots-word .d5{animation:none;}
  .dots-stage{animation:none;}
}

@media (max-width:1280px){
  .dots-stage{width:38%;padding-right:2%;}
  .dots-word{max-height:32%;}
}
@media (max-width:900px){
  .dots-stage{display:none;}
}


/* ================================================================
   Правки 7 сентября: комплект юридических документов
   ================================================================ */

/* ---------- страницы документов ---------- */

/* Строка с кодом редакции. Нужна не для красоты: по этому коду
   в журнале заявок видно, какой именно текст человек читал. */
.doc-rev{
  max-width:780px;
  margin:0 0 10px;
  padding:12px 16px;
  background:var(--green-pale,#F1F7EE);
  border-left:3px solid var(--green-main,#226B12);
  border-radius:0 8px 8px 0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.doc-rev code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;
  background:rgba(34,107,18,.09);
  padding:1px 6px;
  border-radius:4px;
}
.doc-prev{
  max-width:780px;
  margin:0 0 34px;
  font-size:13.5px;
  color:var(--ink-soft);
}
.doc-prev a{color:var(--green-main);text-underline-offset:3px;}

/* Таблицы внутри документов (перечень cookie, сроки хранения). */
.doc-body .tbl-wrap{overflow-x:auto;margin:18px 0;}
.doc-body table.doc-tbl{
  border-collapse:collapse;
  width:100%;
  min-width:520px;
  font-size:14px;
}
.doc-body table.doc-tbl th,
.doc-body table.doc-tbl td{
  border:1px solid rgba(0,0,0,.12);
  padding:9px 12px;
  text-align:left;
  vertical-align:top;
  line-height:1.55;
}
.doc-body table.doc-tbl th{
  background:var(--green-pale,#F1F7EE);
  font-weight:600;
}

/* Перечень всех документов внизу каждого из них. */
.doc-nav{
  max-width:780px;
  margin:48px 0 0;
  padding:22px 24px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  font-size:14px;
}
.doc-nav .dn-h{
  flex:0 0 100%;
  font-weight:700;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:4px;
}
.doc-nav a{color:var(--green-main);text-decoration:none;border-bottom:1px solid rgba(34,107,18,.3);}
.doc-nav a:hover{border-bottom-color:currentColor;}
.doc-nav .dn-cur{color:var(--ink-soft);opacity:.65;}

/* ---------- подвал: реквизиты и полоса документов ---------- */

.footer-req{
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.7;
  opacity:.62;
}
.footer-docs{
  padding-top:20px;
  padding-bottom:4px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-docs .fd-h{
  font-weight:700;
  color:#fff;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:10px;
  opacity:.85;
}
.footer-docs .fd-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  font-size:13px;
}
.footer-docs .fd-links a{
  color:var(--on-dark-soft);
  text-decoration:none;
  padding:2px 0;
  transition:color .2s ease;
}
.footer-docs .fd-links a:hover{color:var(--green-bright);}

/* Ссылка на сайт вакансий «Работа Всем 24». */
a.f-rabota{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  margin-top:6px;
  font-weight:600;
  color:#fff!important;
}
a.f-rabota .fr-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green-bright,#7BC950);
  flex:0 0 auto;
}
a.f-rabota:hover{color:var(--green-bright)!important;}
a.f-rabota .fr-sub{
  display:block;
  font-weight:400;
  font-size:11.5px;
  opacity:.6;
}


/* Необязательная галочка про рассылки: пояснение мельче и тише,
   чтобы её не путали с обязательной. */
.apply-consent-opt span i{
  font-style:normal;
  opacity:.62;
  font-size:.92em;
}


/* ================================================================
   Правка 37 (7 сентября): шапка поверх первого экрана

   Было: белая полоса сверху, тёмный первый экран под ней. Полоса
   съедала 78 пикселей высоты, а логотип с меню жили отдельно от
   картинки.

   Стало: на страницах с тёмным первым экраном шапка прозрачная и
   лежит поверх него — фон и анимация идут до самого верха. При
   прокрутке шапка темнеет и остаётся приклеенной, чтобы меню
   не пропадало. Класс nav-over ставит сборка; на страницах
   документов и на 404 шапка остаётся прежней, белой.
   ================================================================ */

body.nav-over .nav{
  position:fixed;top:0;left:0;right:0;
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .28s ease, border-color .28s ease,
             backdrop-filter .28s ease, -webkit-backdrop-filter .28s ease;
}
/* прокрутили — шапка становится тёмной плашкой */
body.nav-over.nav-solid .nav{
  background:rgba(11,24,6,.93);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:rgba(255,255,255,.12);
}

/* Первый экран поднимается под самый верх, поэтому его верхний
   отступ увеличивается ровно на высоту шапки. */
body.nav-over .hero{padding-top:172px;}
body.nav-over .hero.page-hero{padding-top:146px;}
body.nav-over .pp-hero{padding-top:138px;}

/* Якорные ссылки не должны уводить заголовок под шапку. */
body.nav-over{scroll-padding-top:96px;}

/* ---- содержимое шапки на тёмном ---- */
body.nav-over .logo-word{color:#fff;}
body.nav-over .nav-tagline{color:var(--on-dark-soft,#B9D9AE);}
body.nav-over .nav .links a{color:#DCEBD2;}
body.nav-over .nav .links a:hover{color:#fff;}
body.nav-over .nav-phone{color:#fff;}
body.nav-over .nav-phone:hover{color:var(--green-bright,#8FDB6A);}
body.nav-over .burger{
  background:transparent;
  border-color:rgba(255,255,255,.30);
}
body.nav-over .burger:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.6);}
body.nav-over .burger span{background:#fff;}

/* Лупа и МАКС в обычном виде белые — на тёмном превращались бы
   в две белые кляксы. Делаем их обводкой. */
body.nav-over .nav-inner .nav-search-btn,
body.nav-over .nav-inner .nav-max{
  background:transparent;color:#DCEBD2;border-color:rgba(255,255,255,.30);
}
body.nav-over .nav-inner .nav-search-btn:hover,
body.nav-over .nav-inner .nav-max:hover{
  background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.6);
}
body.nav-over .nav-inner .nav-search-btn[aria-expanded="true"]{
  background:var(--green-main,#226B12);border-color:var(--green-main,#226B12);color:#fff;
}

/* .btn-primary объявлена с color:…!important — перебиваем тем же.
   На тёмном она светло-зелёная с тёмной надписью: ровно так, как
   уже выглядит внутри тёмных блоков сайта (.on-dark). */
body.nav-over .nav-inner .btn-primary{
  background:var(--green-bright,#8FDB6A)!important;
  color:var(--dark-card,#0F1C0C)!important;
  border-color:transparent;
}
body.nav-over .nav-inner .btn-primary:hover{background:#A8E886!important;}

/* Выпадающее меню на телефоне и поле поиска — на тёмном. */
body.nav-over .mobile-menu{
  background:rgba(11,24,6,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.12);
}
body.nav-over .mobile-menu a{color:#DCEBD2;}
body.nav-over .mobile-menu a:hover{color:#fff;}
body.nav-over .mobile-menu .btn-primary{
  background:var(--green-bright,#8FDB6A)!important;
  color:var(--dark-card,#0F1C0C)!important;
}

/* На узком экране шапка ниже — отступы первого экрана тоже меньше. */
@media (max-width:900px){
  body.nav-over .hero{padding-top:132px;}
  body.nav-over .hero.page-hero{padding-top:118px;}
  body.nav-over .pp-hero{padding-top:112px;}
}
@media (max-width:560px){
  body.nav-over .hero{padding-top:118px;}
  body.nav-over .hero.page-hero{padding-top:106px;}
  body.nav-over .pp-hero{padding-top:102px;}
}

/* Кому не нужна анимация — тому и плавного перехода не нужно. */
@media (prefers-reduced-motion:reduce){
  body.nav-over .nav{transition:none;}
}