/* sjeska.com — конверсионные блоки в цветах сайта (зелёный #5ba445, текст #4d4948) */
:root {
  --sjx-g: #5ba445;
  --sjx-g-dark: #3f8a2e;
  --sjx-g-deep: #2f6d22;
  --sjx-g-soft: #eef6ea;
  --sjx-g-line: #d3e7cb;
  --sjx-text: #4d4948;
  --sjx-head: 'Days [allfont', Proximanova, sans-serif;
  --sjx-body: Proximanova, Arial, sans-serif;
}
.sjx-hide { display: none !important; }
.sjx-lock { overflow: hidden; }
.sjx-btn {
  display: inline-block; box-sizing: border-box; padding: 13px 26px; border: 0; border-radius: 6px;
  background: var(--sjx-g); color: #fff !important; font: 700 15px/20px var(--sjx-body); text-align: center;
  text-decoration: none !important; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
}
.sjx-btn:hover { background: var(--sjx-g-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(63, 138, 46, .3); }
.sjx-btn--white { background: #fff; color: var(--sjx-g-deep) !important; }
.sjx-btn--white:hover { background: var(--sjx-g-soft); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.sjx-btn--full { display: block; width: 100%; }

/* ---------- Липкая шапка ---------- */
.sjx-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: #fff; border-bottom: 3px solid var(--sjx-g);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12); transform: translateY(-120%); transition: transform .28s ease; visibility: hidden;
}
.sjx-bar.is-on { transform: none; visibility: visible; }
.sjx-bar__in { display: flex; align-items: center; gap: 16px; max-width: 1440px; margin: 0 auto; padding: 8px 20px; box-sizing: border-box; min-height: 58px; }
.sjx-bar__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--sjx-text) !important; text-decoration: none !important; min-width: 0; }
.sjx-bar__brand img { width: 38px; height: 44px; object-fit: contain; flex: none; }
.sjx-bar__name { font: 400 18px/20px var(--sjx-head); color: var(--sjx-text); white-space: nowrap; }
.sjx-bar__name small { display: block; font: 600 11px/13px var(--sjx-body); color: var(--sjx-g); letter-spacing: .02em; }
.sjx-bar__phone { display: flex; align-items: center; gap: 8px; color: var(--sjx-text) !important; font: 800 20px/24px var(--sjx-body); text-decoration: none !important; white-space: nowrap; }
.sjx-bar__phone img { width: 24px; height: 24px; }
.sjx-bar__btn { padding: 10px 22px; font-size: 14px; white-space: nowrap; }
@media (max-width: 640px) {
  .sjx-bar__in { gap: 8px; padding: 6px 10px; min-height: 52px; }
  .sjx-bar__name { display: none; }
  .sjx-bar__brand img { width: 30px; height: 36px; }
  .sjx-bar__phone { font-size: 16px; gap: 5px; }
  .sjx-bar__phone img { width: 20px; height: 20px; }
  .sjx-bar__btn { padding: 9px 12px; font-size: 12px; }
}
@media (max-width: 380px) { .sjx-bar__phone img { display: none; } .sjx-bar__phone { font-size: 15px; } }
h2[id], h3[id] { scroll-margin-top: 78px; }

/* ---------- Общие секции ---------- */
.sjx-sec { padding: 64px 20px; font-family: var(--sjx-body); color: var(--sjx-text); }
.sjx-wrap { max-width: 1240px; margin: 0 auto; }
.sjx-title { margin: 0 0 10px; text-align: center; font: 400 30px/38px var(--sjx-head); color: var(--sjx-text); }
.sjx-sub { max-width: 720px; margin: 0 auto 38px; text-align: center; font: 400 16px/25px var(--sjx-body); color: var(--sjx-text); opacity: .85; }
@media (max-width: 767px) {
  .sjx-sec { padding: 40px 14px; }
  .sjx-title { font-size: 24px; line-height: 31px; }
  .sjx-sub { margin-bottom: 26px; font-size: 15px; }
}

/* ---------- Акции ---------- */
.sjx-promo { background: var(--sjx-g-soft); }
.sjx-promo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.sjx-card {
  position: relative; display: flex; flex-direction: column; padding: 32px 26px 26px; background: #fff; border: 1px solid var(--sjx-g-line);
  border-radius: 16px; box-shadow: 0 8px 26px rgba(63, 138, 46, .1); overflow: hidden; transition: transform .25s, box-shadow .25s;
}
.sjx-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(63, 138, 46, .2); }
.sjx-card__badge {
  align-self: flex-start; margin-bottom: 18px; padding: 5px 13px; border-radius: 30px; background: var(--sjx-g-soft); color: var(--sjx-g-deep);
  font: 700 12px/16px var(--sjx-body); letter-spacing: .06em; text-transform: uppercase;
}
.sjx-card__ico { width: 56px; height: 56px; margin-bottom: 16px; border-radius: 14px; background: var(--sjx-g-soft); display: flex; align-items: center; justify-content: center; color: var(--sjx-g); }
.sjx-card__ico svg { width: 30px; height: 30px; }
.sjx-card__num svg { display: block; width: 54px; height: 54px; }
.sjx-card__num { margin: 0 0 6px; font: 400 54px/58px var(--sjx-head); color: var(--sjx-g); }
.sjx-card h3 { margin: 0 0 10px; font: 400 21px/27px var(--sjx-head); color: var(--sjx-text); }
.sjx-card p { margin: 0 0 22px; font: 400 15px/23px var(--sjx-body); color: var(--sjx-text); flex: 1; }
.sjx-card--hit { background: linear-gradient(150deg, var(--sjx-g) 0%, var(--sjx-g-deep) 100%); border-color: var(--sjx-g-dark); color: #fff; }
.sjx-card--hit .sjx-card__badge { background: rgba(255, 255, 255, .2); color: #fff; }
.sjx-card--hit .sjx-card__ico { background: rgba(255, 255, 255, .18); color: #fff; }
.sjx-card--hit .sjx-card__num, .sjx-card--hit h3, .sjx-card--hit p { color: #fff; }
.sjx-promo__note { margin: 26px 0 0; text-align: center; font: 400 13px/20px var(--sjx-body); color: var(--sjx-text); opacity: .7; }
@media (max-width: 991px) { .sjx-promo__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* ---------- Этапы работы ---------- */
.sjx-stages__list { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: sjx; }
.sjx-stages__list::before { content: ""; position: absolute; top: 36px; left: 10%; right: 10%; height: 3px; background: var(--sjx-g-line); }
.sjx-step { position: relative; text-align: center; padding: 0 6px; }
.sjx-step__dot {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; margin: 0 auto 16px;
  border-radius: 50%; background: #fff; border: 3px solid var(--sjx-g); color: var(--sjx-g); box-shadow: 0 6px 18px rgba(63, 138, 46, .18);
}
.sjx-step__dot svg { width: 32px; height: 32px; }
.sjx-step__n { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--sjx-g); color: #fff; font: 700 13px/26px var(--sjx-body); }
.sjx-step h3 { margin: 0 0 6px; font: 400 18px/23px var(--sjx-head); color: var(--sjx-text); }
.sjx-step p { margin: 0; font: 400 14px/21px var(--sjx-body); color: var(--sjx-text); opacity: .85; }
.sjx-step--last .sjx-step__dot { background: var(--sjx-g); color: #fff; }
.sjx-step--last .sjx-step__n { background: var(--sjx-g-deep); }
.sjx-stages__cta { margin-top: 38px; text-align: center; }
@media (max-width: 860px) {
  .sjx-stages__list { grid-template-columns: 1fr; gap: 0; max-width: 480px; margin: 0 auto; }
  .sjx-stages__list::before { top: 20px; bottom: 20px; left: 36px; right: auto; width: 3px; height: auto; }
  .sjx-step { display: grid; grid-template-columns: 74px 1fr; column-gap: 16px; align-items: center; text-align: left; padding: 0 0 22px; }
  .sjx-step__dot { margin: 0; grid-row: 1 / span 2; }
  .sjx-step h3 { align-self: end; margin-bottom: 2px; }
  .sjx-step p { align-self: start; }
}

/* ---------- Квиз-калькулятор (sjq) ---------- */
.sjq-wrap { padding: 64px 16px; font-family: var(--sjx-body); color: var(--sjx-text); }
.sjq { max-width: 860px; margin: 0 auto; padding: 36px; background: #fff; border: 1px solid var(--sjx-g-line); border-top: 6px solid var(--sjx-g); border-radius: 18px; box-shadow: 0 12px 34px rgba(63, 138, 46, .12); box-sizing: border-box; }
.sjq h2 { margin: 0 0 8px; text-align: center; font: 400 30px/38px var(--sjx-head); color: var(--sjx-text); }
.sjq-sub { max-width: 640px; margin: 0 auto 24px; text-align: center; font: 400 16px/24px var(--sjx-body); color: var(--sjx-text); opacity: .85; }
.sjq-bar { height: 10px; border-radius: 6px; background: var(--sjx-g-soft); overflow: hidden; }
.sjq-bar i { display: block; width: 25%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sjx-g), var(--sjx-g-dark)); transition: width .35s; }
.sjq-pct { margin: 6px 0 20px; text-align: right; font: 700 13px/17px var(--sjx-body); color: var(--sjx-g-deep); }
.sjq-q { margin: 0 0 16px; font: 400 22px/28px var(--sjx-head); color: var(--sjx-text); }
.sjq-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sjq-opt { display: block; width: 100%; padding: 14px 16px; border: 2px solid var(--sjx-g-line); border-radius: 10px; background: var(--sjx-g-soft); color: var(--sjx-text); font: 600 16px/22px var(--sjx-body); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.sjq-opt:hover, .sjq-opt:focus-visible { border-color: var(--sjx-g); background: #e3f0dc; outline: 0; transform: translateY(-1px); }
.sjq-back { margin-top: 16px; padding: 4px 0; border: 0; background: none; color: var(--sjx-text); opacity: .6; font: 400 14px/20px var(--sjx-body); cursor: pointer; }
.sjq-back:hover { color: var(--sjx-g-deep); opacity: 1; }
.sjq-ok { margin: 0 0 8px; font: 400 24px/30px var(--sjx-head); color: var(--sjx-g-deep); }
.sjq-lead { margin: 0 0 18px; font: 400 16px/24px var(--sjx-body); color: var(--sjx-text); }
.sjq .sjq-go { display: inline-block; padding: 16px 30px; border: 0; border-radius: 6px; background: var(--sjx-g); color: #fff !important; font: 700 17px/22px var(--sjx-body); text-align: center; text-decoration: none !important; cursor: pointer; transition: background .2s, transform .2s; }
.sjq .sjq-go:hover { background: var(--sjx-g-dark); transform: translateY(-1px); }
.sjq [hidden] { display: none !important; }
@media (max-width: 640px) { .sjq-wrap { padding: 36px 12px; } .sjq { padding: 22px 16px; } .sjq h2 { font-size: 22px; line-height: 29px; } .sjq-opts { grid-template-columns: 1fr; } .sjq-q { font-size: 19px; line-height: 25px; } .sjq .sjq-go { display: block; } }

/* ---------- Аккордеоны для SEO-текста ---------- */
.sjx-acc { margin: 0 0 14px; border: 1px solid var(--sjx-g-line); border-radius: 12px; background: #fff; overflow: hidden; }
.sjx-acc > h2, .sjx-acc > h3 { margin: 0 !important; padding: 0 !important; }
.sjs-sec.sjx-acc--sec { margin: 0 0 14px; }
.sjs .sjx-acc > h2 { display: block; font-size: inherit; }
.sjx-acc__txt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sjx-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 18px 22px; border: 0; background: var(--sjx-g-soft);
  color: var(--sjx-text); font: 400 22px/28px var(--sjx-head); text-align: left; cursor: pointer; transition: background .2s;
}
.sjx-acc__btn:hover, .sjx-acc.is-open > h2 .sjx-acc__btn { background: #e3f0dc; }
.sjx-acc__chev { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sjx-g); display: flex; align-items: center; justify-content: center; transition: transform .25s; }
.sjx-acc__chev svg { width: 14px; height: 14px; }
.sjx-acc.is-open .sjx-acc__chev { transform: rotate(180deg); }
.sjx-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.sjx-acc.is-open .sjx-acc__panel { grid-template-rows: 1fr; }
.sjx-acc__inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .3s; }
.sjx-acc.is-open .sjx-acc__inner { visibility: visible; transition-delay: 0s; }
.sjx-acc__inner > div { padding: 6px 22px 22px; }
.sjx-acc__inner img { max-width: 100%; height: auto; }
@media (max-width: 640px) { .sjx-acc__btn { padding: 15px 14px; font-size: 18px; line-height: 23px; } .sjx-acc__inner > div { padding: 4px 14px 16px; } }

/* ---------- Модальное окно заявки ---------- */
.sjx-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(34, 48, 28, .62); }
.sjx-modal.is-open { display: flex; animation: sjxfade .2s ease; }
@keyframes sjxfade { from { opacity: 0; } to { opacity: 1; } }
.sjx-modal__box {
  position: relative; width: 100%; max-width: 440px; max-height: 94vh; overflow-y: auto; padding: 34px 30px 26px; box-sizing: border-box;
  border-radius: 18px; border-top: 6px solid var(--sjx-g); background: #fff; color: var(--sjx-text); font-family: var(--sjx-body); text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.sjx-modal__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sjx-g-soft); color: var(--sjx-text); font: 400 24px/36px Arial, sans-serif; cursor: pointer; }
.sjx-modal__x:hover { background: var(--sjx-g-line); }
.sjx-modal__badge { display: inline-block; margin-bottom: 14px; padding: 5px 14px; border-radius: 30px; background: var(--sjx-g); color: #fff; font: 700 12px/16px var(--sjx-body); letter-spacing: .06em; text-transform: uppercase; }
.sjx-modal__title { margin: 0 0 10px; font: 400 26px/32px var(--sjx-head); color: var(--sjx-text); }
.sjx-modal__text { margin: 0 0 20px; font: 400 15px/23px var(--sjx-body); color: var(--sjx-text); }
.sjx-modal .sjx-form { margin: 0; }
.sjx-modal .sjx-form input[type=tel], .sjx-modal .sjx-form input[type=text] {
  display: block; width: 100%; box-sizing: border-box; height: 50px; margin: 0 0 12px; padding: 0 16px; border: 2px solid var(--sjx-g-line); border-radius: 8px;
  background: #fff; color: var(--sjx-text); font: 400 17px/24px var(--sjx-body); outline: 0; transition: border-color .2s;
}
.sjx-modal .sjx-form input:focus { border-color: var(--sjx-g); }
.sjx-modal .sjx-form input.error { border-color: #d9534f; }
.sjx-modal .sjx-form .sjx-btn { width: 100%; height: 52px; font-size: 16px; }
.sjx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.sjx-modal__skip { display: block; margin: 12px auto 0; padding: 4px 8px; border: 0; background: none; color: var(--sjx-text); opacity: .6; font: 400 13px/18px var(--sjx-body); cursor: pointer; text-decoration: underline; }
.sjx-modal__note { margin: 14px 0 0; font: 400 12px/17px var(--sjx-body); color: var(--sjx-text); opacity: .65; }
.sjx-modal__note a { color: var(--sjx-g-deep); text-decoration: underline; }
.sjx-modal__done { padding: 18px 0 6px; }
.sjx-modal__done svg { width: 64px; height: 64px; margin-bottom: 10px; }
.sjx-modal__done b { display: block; margin-bottom: 8px; font: 400 26px/32px var(--sjx-head); color: var(--sjx-g-deep); }
@media (max-width: 480px) { .sjx-modal__box { padding: 28px 18px 20px; } .sjx-modal__title { font-size: 22px; line-height: 28px; } }

/* ---------- Приветствие чата ---------- */
.sjx-chat {
  position: fixed; left: 16px; bottom: 82px; z-index: 99990; width: 300px; max-width: calc(100vw - 32px); padding: 16px 16px 14px; box-sizing: border-box;
  border: 2px solid var(--sjx-g); border-radius: 16px 16px 16px 4px; background: #fff; color: var(--sjx-text); font-family: var(--sjx-body);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .3s;
}
.sjx-chat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sjx-chat__x { position: absolute; top: 4px; right: 8px; border: 0; background: none; color: var(--sjx-text); font: 400 22px/26px Arial, sans-serif; cursor: pointer; opacity: .5; }
.sjx-chat__who { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 13px/16px var(--sjx-body); color: var(--sjx-g-deep); }
.sjx-chat__who i { width: 9px; height: 9px; border-radius: 50%; background: var(--sjx-g); box-shadow: 0 0 0 4px rgba(91, 164, 69, .22); }
.sjx-chat p { margin: 0 0 12px; padding-right: 14px; font: 400 14px/21px var(--sjx-body); }
.sjx-chat__row { display: flex; gap: 8px; }
.sjx-chat__row .sjx-btn { flex: 1; padding: 9px 8px; font-size: 13px; }
.sjx-chat__row .sjx-btn--ghost { background: var(--sjx-g-soft); color: var(--sjx-g-deep) !important; }
@media (max-width: 767px) { .sjx-chat { bottom: 146px; } }

@media (prefers-reduced-motion: reduce) {
  .sjx-bar, .sjx-card, .sjx-btn, .sjx-acc__panel, .sjx-chat, .sjx-acc__chev { transition: none !important; }
  .sjx-modal.is-open { animation: none; }
}