/* Redesigned home page. Every rule is scoped to .hx-home so other screens are unaffected.
   Breakpoints: phone < 620px, tablet 620–899px (horizontal strips), desktop >= 900px. */
.hx-home {
  --hx-orange:#F97316;
  --hx-text:#1d1d1f;
  --hx-text2:#4b4b51;
  --hx-line:#e9e9e9;
  --hx-alt:#F6F8FB;
  --hx-navy:#1E3A6B;
  --hx-soft:#FFF1E6;
  width:100%;
  overflow-x:clip;
  background:#fff;
  color:var(--hx-text);
  line-height:1.45;
}
.hx-home *,.hx-home *::before,.hx-home *::after { box-sizing:border-box; }
:where(.hx-home) a { color:inherit; text-decoration:none; }
:where(.hx-home) h1,:where(.hx-home) h2,:where(.hx-home) h3,:where(.hx-home) p { margin:0; }
.hx-w { width:100%; max-width:1240px; margin:0 auto; padding:0 20px; }

/* ---------- buttons ---------- */
.hx-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 24px; border:1px solid transparent; border-radius:16px; font-family:inherit; font-size:16px; font-weight:700; line-height:1.2; cursor:pointer; transition:transform .2s,filter .2s,background .2s; -webkit-tap-highlight-color:transparent; }
.hx-btn:active { transform:scale(.99); }
.hx-b1,.hx-b1:visited { background:var(--hx-orange); color:#fff; box-shadow:0 10px 24px rgba(249,115,22,.28); }
.hx-b3,.hx-b3:visited { background:var(--hx-navy); color:#fff; box-shadow:0 10px 24px rgba(30,58,107,.34); }
.hx-tg,.hx-tg:visited { background:#229ED9; color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.22); }
.hx-vb,.hx-vb:visited { background:#7360F2; color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.22); }
.hx-tg:hover,.hx-vb:hover { filter:brightness(1.06); }
.hx-ghost,.hx-ghost:visited { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); color:#fff; }
.hx-ghost:hover { background:rgba(255,255,255,.18); }
.hx-ar { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.hx-btn:focus-visible,.hx-link:focus-visible { outline:3px solid rgba(249,115,22,.55); outline-offset:3px; }
.hx-link { display:inline-flex; align-items:center; gap:8px; padding-bottom:2px; border-bottom:2px solid rgba(30,58,107,.25); color:var(--hx-navy); font-size:16px; font-weight:700; }
.hx-link .hx-ar { width:18px; height:18px; }

/* ---------- hero + calculator ---------- */
.hx-top { position:relative; background:#fff; }
.hx-net { position:absolute; top:0; left:0; width:100%; pointer-events:none; }
.hx-net .hx-ln { stroke:var(--hx-orange); stroke-opacity:.4; stroke-width:1.3; stroke-dasharray:2 6; stroke-linecap:round; }
.hx-net .hx-rt { fill:none; stroke:var(--hx-orange); stroke-opacity:.65; stroke-width:1.8; stroke-dasharray:2 7; stroke-linecap:round; animation:hx-dash 2.4s linear infinite; }
.hx-net .hx-core { fill:var(--hx-orange); opacity:.55; transform-box:fill-box; transform-origin:center; transform:scale(calc(1 + var(--k,0)*.9)); transition:transform .35s; animation:hx-blink 4.2s ease-in-out infinite; }
.hx-net .hx-ring { fill:none; stroke:var(--hx-orange); stroke-width:1.2; opacity:0; transform-box:fill-box; transform-origin:center; animation:hx-ring 4.2s ease-out infinite; }
@keyframes hx-dash { to { stroke-dashoffset:-18; } }
@keyframes hx-ring { 0% { transform:scale(1); opacity:.55; } 70%,100% { transform:scale(4.2); opacity:0; } }
@keyframes hx-blink { 50% { opacity:1; } }
.hx-grid { position:relative; z-index:1; }
.hx-hero { padding:26px 0; }
.hx-home h1 { margin:0 0 14px; color:var(--hx-text); font-size:clamp(44px,6.4vw,68px); font-weight:700; line-height:1.05; letter-spacing:-.008em; }
.hx-home h1 em { color:var(--hx-orange); font-style:normal; }
.hx-lead { max-width:440px; color:var(--hx-text2); font-size:17px; line-height:1.45; }
.hx-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin:26px 0 22px; }
.hx-stats { display:flex; align-items:stretch; width:100%; max-width:440px; margin:4px auto 0; text-align:center; }
.hx-stats > div { display:flex; flex:1 1 0; min-width:0; flex-direction:column; align-items:center; gap:2px; padding:0 6px; border-left:1px solid var(--hx-line); }
.hx-stats > div:first-child { padding-left:0; border-left:0; }
.hx-stats strong { color:var(--hx-navy); font-size:clamp(13.5px,3.9vw,18px); font-weight:800; line-height:1.15; letter-spacing:-.02em; white-space:nowrap; }
.hx-stats span { color:var(--hx-text2); font-size:clamp(11px,3.2vw,12.5px); line-height:1.25; overflow-wrap:anywhere; hyphens:auto; }

.hx-calc { margin:0 -20px; padding:24px 22px; border-radius:0; background:var(--hx-navy); color:#fff; }
.hx-calc h2 { margin:0 0 4px; color:#fff; font-size:21px; font-weight:700; line-height:1.2; letter-spacing:-.01em; text-align:center; }
.hx-calc__sub { margin:0 0 6px; color:#fff; font-size:14px; text-align:center; opacity:.75; }
.hx-range { display:flex; justify-content:space-between; margin-top:16px; font-size:14px; font-weight:600; }
.hx-range b { color:#FDBA74; font-weight:700; }
.hx-calc input[type=range] { display:block; width:100%; margin:8px 0 0; accent-color:#F97316; }
.hx-calc small[hidden] { display:none; }
.hx-result { margin-top:22px; padding:20px 16px 18px; border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(255,255,255,.08); text-align:center; }
.hx-result small { font-size:13px; opacity:.75; }
.hx-result__big { display:block; margin-top:4px; color:#FDBA74; font-size:clamp(38px,11.4vw,44px); font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.hx-result__uah { margin-top:4px; font-size:16px; font-weight:400; }
.hx-result__meta { margin-top:2px; font-size:12.5px; opacity:.7; }
.hx-result__day { margin-top:8px; font-size:14px; color:rgba(255,255,255,.62); }
.hx-result__day b { font-weight:400; }
.hx-calc .sc-dot { display:inline-block; width:5px; height:5px; margin:0 10px; vertical-align:middle; border-radius:50%; background:#F97316; }
/* keep the calculator height stable while the NBU rate loads */
.hx-result__uah[hidden],.hx-result__meta[hidden] { display:block; visibility:hidden; }
.hx-result__uah { min-height:25px; }
.hx-result__meta { min-height:18px; }
.hx-calc .hx-btn { display:flex; width:100%; max-width:320px; margin:18px auto 0; white-space:nowrap; box-shadow:none; }
.hx-calc__note { margin-top:12px; font-size:12.5px; text-align:center; opacity:.6; }

/* ---------- sections ---------- */
.hx-sec { padding:36px 0; background:#fff; }
.hx-alt { background:var(--hx-alt); }
.hx-sec--last { padding-bottom:44px; }
.hx-home h2.hx-t { margin:0 0 24px; color:var(--hx-text); font-size:clamp(26px,3.4vw,36px); font-weight:700; line-height:1.15; letter-spacing:-.02em; text-align:center; }
.hx-t::after { content:""; display:block; width:44px; height:3px; margin:12px auto 0; border-radius:2px; background:var(--hx-orange); }
.hx-sub { margin:-12px 0 24px; color:var(--hx-text2); font-size:15px; text-align:center; }
.hx-more { display:flex; justify-content:center; margin-top:20px; }

/* vacancies (card markup and styling come from vacancies.css) */
.hx-vl { display:grid; gap:14px; }
.hx-vl .vacancy-card { width:100%; }
.hx-dots-strip { display:none; justify-content:center; gap:7px; margin-top:2px; }
.hx-dots-strip i,.hx-dots i { width:7px; height:7px; border-radius:50%; background:#d3d7de; transition:.25s; }
.hx-dots-strip i.on,.hx-dots i.on { width:22px; border-radius:4px; background:var(--hx-orange); }

/* reviews */
.hx-rwrap { max-width:1200px; margin:0 auto; }
.hx-track { display:flex; gap:14px; margin:-22px -20px -34px; padding:30px 20px 52px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:20px; scrollbar-width:none; }
.hx-track::-webkit-scrollbar { display:none; }
.hx-rc { display:flex; flex:0 0 min(84%,340px); flex-direction:column; margin:0; padding:22px 22px 18px; border-radius:22px; background:#fff; box-shadow:0 8px 24px rgba(20,30,50,.10); scroll-snap-align:center; }
.hx-qm { width:30px; height:30px; margin-bottom:10px; fill:var(--hx-orange); }
.hx-rc blockquote { flex:1; margin:0 0 18px; color:var(--hx-text); font-size:17px; font-weight:500; line-height:1.5; }
.hx-rc figcaption { display:flex; flex-direction:column; gap:6px; padding-top:14px; border-top:1px solid var(--hx-line); color:var(--hx-text2); font-size:13.5px; }
.hx-rc figcaption button { all:unset; color:var(--hx-navy); font-size:14px; font-weight:700; cursor:pointer; }
.hx-rc figcaption button:hover { text-decoration:underline; }
.hx-rc figcaption button:focus-visible { outline:2px solid var(--hx-orange); outline-offset:3px; }
.hx-rmore,.hx-rmore:visited { justify-content:center; align-items:flex-start; gap:10px; min-height:220px; background:var(--hx-navy); color:#fff; }
.hx-rmore strong { font-size:22px; line-height:1.2; }
.hx-rmore span { display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.hx-rnav { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px; }
.hx-rnav button { display:none; width:40px; height:40px; place-items:center; padding:0; border:1px solid var(--hx-line); border-radius:50%; background:#fff; cursor:pointer; }
.hx-rnav button svg { width:20px; height:20px; fill:none; stroke:var(--hx-navy); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.hx-dots { display:flex; gap:7px; }

/* why + steps */
.hx-why,.hx-steps { max-width:760px; margin:0 auto; padding:0; list-style:none; }
.hx-why li { display:grid; grid-template-columns:56px 1fr; align-items:start; gap:6px 14px; padding:20px 0; border-top:1px solid var(--hx-line); }
.hx-why li:last-child { border-bottom:1px solid var(--hx-line); }
.hx-n { color:var(--hx-orange); font-size:30px; font-weight:800; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.hx-why h3,.hx-steps h3 { margin:0 0 4px; color:var(--hx-text); font-size:18px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
.hx-why p,.hx-steps p { color:var(--hx-text2); font-size:15.5px; line-height:1.5; }
.hx-steps li { position:relative; display:grid; grid-template-columns:44px 1fr; gap:16px; padding-bottom:30px; }
.hx-steps li:last-child { padding-bottom:0; }
.hx-steps li::before { content:""; position:absolute; top:44px; bottom:0; left:21px; border-left:2px dashed rgba(249,115,22,.55); }
.hx-steps li:last-child::before { display:none; }
.hx-k { z-index:1; display:grid; width:44px; height:44px; place-items:center; border-radius:50%; background:var(--hx-navy); color:#fff; font-size:18px; font-weight:800; }
.hx-steps li:last-child .hx-k { background:var(--hx-orange); }
.hx-steps h3 { margin-top:2px; }
.hx-stcta { display:flex; flex-direction:column; align-items:center; margin-top:30px; }
.hx-or { margin:24px 0 12px; color:var(--hx-text2); font-size:14px; }
.hx-or--light { margin-top:26px; color:rgba(255,255,255,.7); }
.hx-msg { display:flex; flex-wrap:nowrap; justify-content:center; gap:12px; }
.hx-msg { width:100%; }
.hx-msg .hx-btn { flex:1 1 0; min-width:0; max-width:190px; min-height:52px; padding:0 12px; font-weight:600; }

/* about */
.hx-about { display:grid; gap:26px; max-width:900px; margin:0 auto; }
.hx-about__text p { margin:0 0 14px; color:var(--hx-text2); font-size:17px; line-height:1.6; }
.hx-about__stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hx-about__stats > div { padding:20px 16px; border:1px solid var(--hx-line); border-radius:20px; background:#fff; text-align:center; }
.hx-about__stats strong { display:block; color:var(--hx-orange); font-size:34px; font-weight:800; line-height:1.1; letter-spacing:-.03em; }
.hx-about__stats > div > span { color:var(--hx-text2); font-size:14px; }

/* articles */
.hx-al { display:grid; gap:16px; max-width:760px; margin:0 auto; }
.hx-ia { position:relative; display:block; min-height:220px; overflow:hidden; isolation:isolate; border-radius:20px; color:#fff; box-shadow:0 9px 22px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.055); transition:transform .25s; }
.hx-ia:hover { transform:translateY(-3px); }
.hx-ia::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(18,18,20,.02) 20%,rgba(18,18,20,.35) 57%,rgba(18,18,20,.94) 100%); }
.hx-ia img { position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; object-fit:cover; }
.hx-ia__badge { position:absolute; top:12px; right:12px; padding:6px 9px; border-radius:9px; background:#fff; color:#1d1d1f; font-size:13.5px; font-weight:600; line-height:1.2; }
.hx-ia__title { position:absolute; right:56px; bottom:18px; left:18px; font-size:18px; font-weight:600; line-height:1.28; letter-spacing:-.2px; text-shadow:0 1px 8px rgba(0,0,0,.3); }
.hx-ia svg { position:absolute; right:16px; bottom:18px; width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* faq */
.hx-faq { overflow-anchor:none; max-width:760px; margin:0 auto; border-top:1px solid #dfe5ee; }
.hx-fq { border-bottom:1px solid #dfe5ee; }
.hx-fq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 2px; font-size:17px; font-weight:600; line-height:1.35; list-style:none; cursor:pointer; transition:color .2s; -webkit-tap-highlight-color:transparent; outline:none; }
.hx-fq summary::-webkit-details-marker { display:none; }
.hx-fq summary:focus-visible { outline:2px solid var(--hx-orange); outline-offset:2px; border-radius:6px; }
.hx-home { -webkit-tap-highlight-color:transparent; }
.hx-pm { position:relative; flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:1px solid #dfe5ee; background:#fff; transition:background .25s,border-color .25s; }
.hx-pm::before,.hx-pm::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; border-radius:2px; background:var(--hx-orange); transition:transform .25s,background .25s; }
.hx-pm::after { transform:rotate(90deg); }
.hx-fq[open] .hx-pm { border-color:var(--hx-orange); background:var(--hx-orange); }
.hx-fq[open] .hx-pm::before,.hx-fq[open] .hx-pm::after { background:#fff; }
.hx-fq[open] .hx-pm::after { transform:rotate(0); }
.hx-fq[open] summary { color:var(--hx-orange); }
@media (hover:hover) { .hx-fq summary:hover { color:var(--hx-orange); } }
.hx-fq p { padding:0 48px 22px 2px; color:var(--hx-text2); font-size:16px; line-height:1.6; animation:hx-fq-in .25s ease; }
.hx-fq p a,.hx-fq p a:visited { color:#F97316; font-weight:600; text-decoration:none; }
@media(hover:hover){.hx-fq p a:hover{text-decoration:none;color:#EA580C}}
@keyframes hx-fq-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.hx-faq-more { margin-top:30px; text-align:center; }
.hx-faq-more p { margin:0 0 12px; color:var(--hx-text2); font-size:16px; line-height:1.5; }
.hx-faq-more .hx-b1 { box-shadow:0 3px 8px rgba(0,0,0,.22); }
@media (min-width:620px) {
  .hx-faq { margin-top:12px; }
  .hx-fq summary { padding:22px 4px; font-size:19px; }
  .hx-fq p { padding:0 56px 26px 4px; font-size:17px; }
  .hx-faq-more { margin-top:36px; }
  .hx-faq-more p { font-size:18px; }
}

/* final cta + push */
.hx-fin { max-width:1000px; margin:0 auto; padding:44px 24px 40px; border-radius:28px; background:var(--hx-navy); color:#fff; text-align:center; }
.hx-fin h2 { margin:0 0 10px; color:#fff; font-size:clamp(26px,3.4vw,36px); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
.hx-fin h2::after { content:""; display:block; width:44px; height:3px; margin:12px auto 0; border-radius:2px; background:var(--hx-orange); }
.hx-fin > p:not(.hx-or) { max-width:34ch; margin:14px auto 24px; color:rgba(255,255,255,.82); font-size:16px; }
.hx-pbox { display:flex; flex-direction:column; align-items:center; max-width:760px; margin:0 auto; padding:30px 24px; border-radius:26px; background:#fff; box-shadow:0 10px 30px rgba(20,30,50,.08); text-align:center; }
.hx-pbell { display:grid; width:56px; height:56px; margin-bottom:14px; place-items:center; border-radius:50%; background:var(--hx-soft); }
.hx-pbell svg { width:28px; height:28px; fill:none; stroke:var(--hx-orange); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hx-pbox h3 { margin:0; color:var(--hx-text); font-size:22px; line-height:1.25; letter-spacing:-.01em; }
.hx-pbox > p { max-width:38ch; margin:8px 0 0; color:var(--hx-text2); font-size:16px; }
.hx-pch { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:18px 0 22px; }
.hx-pch span { padding:7px 14px; border-radius:999px; background:var(--hx-alt); color:var(--hx-navy); font-size:13.5px; font-weight:600; }
/* phone: two chips per row */
@media (max-width:599px) {
  .hx-pbox { padding-right:16px; padding-left:16px; }
  .hx-pch { display:grid; width:100%; grid-template-columns:1fr 1fr; gap:8px; }
  .hx-pch span { padding:8px 6px; font-size:clamp(12px,3.5vw,13.5px); text-align:center; }
  .hx-pch span::before { margin-right:6px; }
}
.hx-pch span::before { content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--hx-orange); vertical-align:middle; }
.hx-pbox small { margin-top:12px; color:#8a8a90; font-size:12.5px; }
.hx-pbox .push-entry__error { margin:10px 0 0; color:#B42318; font-size:14px; }

/* lightbox */
.hx-lightbox { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; background:rgba(10,14,24,.78); opacity:0; transition:opacity .18s ease; }
.hx-lightbox.is-open { opacity:1; }
.hx-lightbox[hidden] { display:none; }
.hx-lightbox img { max-width:min(100%,520px); max-height:88vh; border-radius:16px; background:#fff; }
@media (prefers-reduced-motion:reduce) { .hx-lightbox, .hx-lightbox img { transition:none; transform:none; } }
.hx-lightbox__x { position:absolute; z-index:2; top:14px; right:16px; display:grid; width:44px; height:44px; place-items:center; padding:0; border:0; border-radius:50%; background:#fff; cursor:pointer; }
.hx-lightbox__x svg { width:20px; height:20px; fill:none; stroke:#1d1d1f; stroke-width:2.6; stroke-linecap:round; }

/* ---------- reveal on scroll (only when JS is running) ---------- */
.hx-js .hx-rv { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1); transition-delay:var(--d,0ms); }
.hx-js .hx-rv.is-in { opacity:1; transform:none; }
.hx-js .hx-vl:not(.is-in) .vacancy-card,
.hx-js .hx-al:not(.is-in) .hx-ia { opacity:0; transform:translateY(18px); }
.hx-js .hx-vl .vacancy-card,
.hx-js .hx-al .hx-ia { transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1),box-shadow 120ms ease; }
.hx-js .hx-vl .vacancy-card:nth-child(2),.hx-js .hx-al .hx-ia:nth-child(2) { transition-delay:90ms,90ms,0ms; }
.hx-js .hx-vl .vacancy-card:nth-child(3),.hx-js .hx-al .hx-ia:nth-child(3) { transition-delay:180ms,180ms,0ms; }
@media (prefers-reduced-motion:reduce) {
  .hx-js .hx-rv,.hx-js .hx-vl:not(.is-in) .vacancy-card,.hx-js .hx-al:not(.is-in) .hx-ia { opacity:1; transform:none; transition:none; }
  .hx-net .hx-rt,.hx-net .hx-core,.hx-net .hx-ring { animation:none; }
}

/* ---------- tablet 620–899: horizontal strips ---------- */
@media (min-width:620px) and (max-width:899px) {
  .hx-sec { padding:52px 0; }
  .hx-w { padding:0 28px; }
  .hx-lead { max-width:520px; font-size:18px; }
  .hx-calc { max-width:640px; margin:20px auto 8px; padding:32px 34px; border-radius:28px; box-shadow:0 30px 60px -30px rgba(30,58,107,.55); }
  
  .hx-vl,.hx-al { display:flex; gap:16px; max-width:none; margin:-22px -28px -34px; padding:30px 28px 52px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:28px; scrollbar-width:none; }
  .hx-vl::-webkit-scrollbar,.hx-al::-webkit-scrollbar { display:none; }
  .hx-vl .vacancy-card { flex:0 0 clamp(250px,calc((100vw - 60px)/2.4),400px); width:auto; scroll-snap-align:start; }
  .hx-ia { flex:0 0 clamp(250px,calc((100vw - 60px)/2.4),400px); min-height:270px; scroll-snap-align:start; }
  .hx-dots-strip { display:flex; }
  .hx-track { margin-inline:-28px; padding-inline:28px; scroll-padding-inline:28px; }
  .hx-rc { flex-basis:340px; }
  .hx-about { max-width:640px; }
  .hx-fin { max-width:760px; padding:52px 36px; }
  .hx-pbox { max-width:640px; }
  .hx-why,.hx-steps,.hx-faq { max-width:680px; }
}

/* ---------- desktop >= 900 ---------- */
@media (min-width:900px) {
  .hx-sec { padding:72px 0; }
  .hx-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:56px; padding-top:70px; padding-bottom:76px; }
  .hx-hero { padding:0; }
  .hx-actions { flex-direction:row; align-items:center; }
  .hx-stats { max-width:none; width:100%; }
  .hx-calc { margin:0; padding:30px 28px; border-radius:22px; box-shadow:0 30px 60px -30px rgba(30,58,107,.55); }
  
  .hx-vl { grid-template-columns:repeat(3,1fr); }
  .hx-track { margin:-22px -36px -34px; padding:30px 36px 52px; scroll-padding-inline:36px; }
  .hx-rc { flex-basis:calc((100% - 28px)/3); scroll-snap-align:start; }
  .hx-rnav button { display:grid; }
  .hx-why { display:grid; grid-template-columns:repeat(3,1fr); gap:0 36px; max-width:1000px; border-top:1px solid var(--hx-line); }
  .hx-why li { display:block; padding:34px 0 8px; border:0; }
  .hx-why li:last-child { border:0; }
  .hx-n { display:block; margin-bottom:14px; font-size:44px; }
  .hx-why h3,.hx-steps h3 { font-size:20px; }
  .hx-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; max-width:1000px; }
  .hx-steps li { display:block; padding:0; }
  .hx-steps li::before { top:21px; right:-36px; bottom:auto; left:56px; border-top:2px dashed rgba(249,115,22,.55); border-left:0; }
  .hx-k { margin-bottom:18px; }
  .hx-about { grid-template-columns:1.3fr 1fr; align-items:center; gap:56px; }
  .hx-about__text p { font-size:18px; }
  .hx-about__stats > div { padding:30px 16px; }
  .hx-about__stats strong { font-size:42px; }
  .hx-al { grid-template-columns:repeat(3,1fr); gap:20px; max-width:1000px; }
  .hx-ia { min-height:320px; }
  .hx-ia__title { font-size:20px; }
  .hx-fin { padding:64px 40px; }
  .hx-pbox { padding:40px; }
}
.hx-fin .hx-b1 { box-shadow:0 3px 8px rgba(0,0,0,.22); }

/* calculator controls: same look as the salary calculator page */
.hx-calc .sc-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:16px; }
.hx-calc .sc-row:first-child { margin-top:14px; }
.hx-calc .sc-row__label { font-size:15px; font-weight:600; }
.hx-calc .sc-row__val { display:flex; align-items:baseline; gap:4px; }
.hx-calc .sc-row__unit { color:#d6e0f2; font-size:13px; font-weight:500; }
.hx-calc .sc-num { width:3.4ch; padding:0; border:0; border-radius:0; background:none; color:#FDBA74; font-weight:700; font-size:16px; line-height:1.2; font-family:inherit; text-align:right; outline:0; pointer-events:none; -webkit-appearance:none; appearance:none; }
.hx-calc .sc-range { -webkit-appearance:none; appearance:none; display:block; width:100%; height:22px; margin:8px 0 0; background:transparent; cursor:pointer; outline:0; -webkit-tap-highlight-color:transparent; touch-action:pan-y; --p:0%; }
.hx-calc .sc-range:focus-visible { outline:3px solid rgba(249,115,22,.55); outline-offset:4px; border-radius:11px; }
.hx-calc .sc-range::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:linear-gradient(to right,#F97316 var(--p),rgba(255,255,255,.2) var(--p)); }
.hx-calc .sc-range::-moz-range-track { height:6px; border-radius:3px; background:linear-gradient(to right,#F97316 var(--p),rgba(255,255,255,.2) var(--p)); }
.hx-calc .sc-range::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; margin-top:-8px; box-sizing:border-box; border:3px solid #fff; border-radius:50%; background:#F97316; }
.hx-calc .sc-range::-moz-range-thumb { width:22px; height:22px; box-sizing:border-box; border:3px solid #fff; border-radius:50%; background:#F97316; }
.hx-calc .sc-err { margin-top:6px; color:#fca5a5; font-size:13px; }
.hx-calc .sc-err[hidden] { display:none; }

/* SEO text after the push block (styles: .vacancy-seo in vacancies.css). */
.hx-seo-sec .vacancy-seo { margin:32px 0 28px; }
/* ---------- заявка: на мобильном полоса без карточки (на ПК остаётся карточкой); подписка без карточки ---------- */
@media (max-width:619px) {
  .hx-sec.hx-sec--fin { padding:48px 0; background:var(--hx-navy); }
  .hx-sec--fin .hx-fin { max-width:none; padding:0; border-radius:0; background:none; }
}
.hx-sec--flat .hx-pbox { max-width:640px; padding:0; border-radius:0; background:none; box-shadow:none; }
.hx-sec--flat .hx-pch span { border:1px solid #e3e8f0; background:#fff; }
/* подписка: тот же масштаб, что и у блока заявки (подчёркивание, шрифты, кнопка) */
.hx-sec--flat .hx-pbell { width:60px; height:60px; background:var(--hx-orange); box-shadow:0 8px 20px rgba(249,115,22,.38); }
.hx-sec--flat .hx-pbell svg { width:30px; height:30px; stroke:#fff; }
.hx-sec--flat .hx-pbox h3::after { content:""; display:block; width:44px; height:3px; margin:12px auto 0; border-radius:2px; background:var(--hx-orange); }
.hx-sec--flat .hx-pbox > p { max-width:34ch; margin:14px 0 0; font-size:16px; line-height:1.5; }
.hx-fin > p:not(.hx-or) { line-height:1.5; }
@media (min-width:620px) {
  .hx-sec--flat .hx-pbell { width:64px; height:64px; }
  .hx-sec--flat .hx-pbell svg { width:32px; height:32px; }
  html body #app-view .hx-sec--flat .hx-pbox h3 { font-size:24px; font-weight:700; line-height:1.2; letter-spacing:-.3px; }
  .hx-fin > p:not(.hx-or), .hx-sec--flat .hx-pbox > p { font-size:18px; }
  .hx-sec--flat .hx-pch span { padding:8px 16px; font-size:14px; }
  .hx-sec--flat .hx-b3 { min-width:260px; min-height:58px; padding:0 40px; font-size:17px; }
}
@media (min-width:700px) { html body #app-view .hx-sec--flat .hx-pbox h3 { font-size:28px; } }
@media (min-width:1024px) { html body #app-view .hx-sec--flat .hx-pbox h3 { font-size:34px; letter-spacing:-.5px; } }