/* SAFA ONE — mobile / responsive layer.
   IMPORTANT: the browser NORMALIZES inline style text — a space is inserted after
   every ":" and ",", `0` becomes `0px`, and `#hex` becomes `rgb(...)`. So all
   [style*="…"] selectors below use the *normalized* form, and anything that would
   serialize to rgb()/0px is targeted structurally instead. Overrides need !important
   to beat inline styles. No markup changes; one source of truth for all pages. */

/* ============ TABLET & PHONE (≤980px) — layout transform ============ */
@media (max-width: 980px) {

  /* kill the desktop min-width that forces horizontal scroll */
  [style*="min-width: 1100px"] { min-width: 0 !important; }

  /* page gutters: 48px -> 20px */
  [style*="max-width: 1360px"] { padding-left: 20px !important; padding-right: 20px !important; }
  .svc-track { padding-left: 20px !important; padding-right: 20px !important; scroll-padding-left: 20px !important; }
  #solutions > div:first-child { padding-left: 20px !important; padding-right: 20px !important; }

  /* HEADER -> two rows: logo on row 1, nav full-width on row 2 */
  header > div   { flex-wrap: wrap !important; row-gap: 12px !important;
                   padding-top: 14px !important; padding-bottom: 14px !important; }
  header [style*="white-space: nowrap"] { display: none !important; }  /* hide long tagline */
  header nav    { flex-basis: 100% !important; justify-content: flex-start !important;
                  flex-wrap: wrap !important; gap: 18px !important; row-gap: 14px !important; align-items: center !important; }

  /* HERO: absolute overlay -> stacked (image band on top, text below) */
  [style*="height: 540px"], [style*="aspect-ratio"] { height: auto !important; aspect-ratio: auto !important; }
  [style*="object-fit: cover; object-position: center"] { position: relative !important; inset: auto !important;
                                                          height: 210px !important; }
  [style*="left: 7%"] { position: static !important; transform: none !important;
                        max-width: 100% !important; padding: 24px 20px 28px !important; }
  [style*="gap: 13px"] { flex-wrap: wrap !important; }                  /* hero CTA row */

  /* GRIDS -> stack */
  [style*="grid-template-columns: 300px 1fr"]      { grid-template-columns: 1fr !important; gap: 18px !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  [style*="top: 110px"] { position: static !important; }               /* un-stick «О компании» heading */

  /* FOOTER -> 2 columns; bottom bar (last child) stacks */
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  footer > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

  /* dark CTA band («Готовы…» / «Соберите…») -> stack text above, button below */
  [style*="padding: 64px 56px"] { flex-direction: column !important; align-items: flex-start !important;
                                  gap: 24px !important; padding: 40px 26px !important; }

  /* carousel cards: let the next card peek */
  .svc-track > div { flex: 0 0 80vw !important; }

  /* headings down */
  h1 { font-size: 33px !important; line-height: 1.1 !important; letter-spacing: -0.6px !important; }
  h2 { font-size: 32px !important; letter-spacing: -0.5px !important; }
  [style*="font-size: 30px"] { font-size: 21px !important; }           /* «О компании» абзацы */
}

/* ============ PHONE (≤560px) — typography & single column ============ */
@media (max-width: 560px) {
  h1 { font-size: 27px !important; }
  h2 { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 19px !important; }

  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }  /* footer 1 col */
  /* stats stay 2×2 (repeat(4,1fr) -> 2 cols from the ≤980 rule) — cleaner than one tall column */

  .svc-track > div { flex: 0 0 84vw !important; }
  [style*="object-fit: cover; object-position: center"] { height: 180px !important; }

  /* hero CTA buttons full-width, stacked */
  [style*="gap: 13px"] > a { flex: 1 1 100% !important; text-align: center !important; }
}