/* ============================================================
   Vyralix — responsive overrides
   Layered on top of the inline-styled reference markup. Uses
   substring attribute selectors + !important so the desktop
   design is untouched and only mobile/tablet is adjusted.
   Breakpoints:  <= 860px  tablet/stack    <= 560px  phone
   ============================================================ */

/* overflow-x: clip (not hidden) prevents sideways scroll WITHOUT turning the
   body into a scroll container — which would otherwise break the sticky header. */
html, body { overflow-x: clip; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }

/* ---------------- Sticky header ---------------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  transition: box-shadow 0.3s ease;
}
/* soft shadow appears once the page is scrolled (toggled in JS) */
header.vy-stuck { box-shadow: 0 6px 24px rgba(22, 19, 29, 0.07); }

/* ---------------- Tablet & below: single-column + wrapped header ---------------- */
@media (max-width: 860px) {
  /* container side padding */
  .wrap,
  [style*="max-width: 1240px"],
  [style*="max-width:1240px"] { padding-left: 24px !important; padding-right: 24px !important; }

  /* collapse layout grids to one column (spacing-agnostic substrings) */
  [style*="1fr 1fr"],
  [style*="5fr 7fr"],
  [style*="repeat(3"],
  [style*="200px 1fr 280px"] { grid-template-columns: 1fr !important; }

  /* feature rows: cancel the reversed order so text/visual stack in reading order.
     ("order: 1"/"order: 2" only ever set order — matching "border: 1" is harmless
     because it just re-asserts the default order:0.) */
  [style*="order: 1"],
  [style*="order: 2"] { order: 0 !important; }

  /* tighten the big feature-row / metrics gaps */
  [style*="gap: 72px"] { gap: 40px !important; }
  [style*="gap: 48px"] { gap: 32px !important; }

  /* headings */
  h1 { font-size: 46px !important; letter-spacing: -1.5px !important; }
  h2 { font-size: 32px !important; letter-spacing: -1px !important; }

  /* sub-page CTA bands (flex row -> stack) */
  [style*="linear-gradient(120deg, #6c3ef5"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 48px 32px !important;
    gap: 28px !important;
  }
  /* home final CTA padding */
  [style*="padding: 90px 72px"] { padding: 56px 32px !important; }

  /* header: keep logo + actions on top row, nav pills scroll full-width below */
  header { flex-wrap: wrap !important; row-gap: 14px !important; justify-content: space-between !important; }
  header > nav {
    order: 3 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  header > nav a { flex: 0 0 auto !important; }
}

/* ---------------- Phone ---------------- */
@media (max-width: 560px) {
  .wrap,
  [style*="max-width: 1240px"],
  [style*="max-width:1240px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* headings */
  h1 { font-size: 34px !important; letter-spacing: -1px !important; line-height: 1.08 !important; }
  h2 { font-size: 26px !important; }

  /* oversized display type used outside <h*> */
  #stat-posts, #stat-speed,
  [style*="font-size:120px"], [style*="font-size: 120px"] { font-size: 60px !important; letter-spacing: -3px !important; }
  [style*="font-size:88px"],  [style*="font-size: 88px"]  { font-size: 46px !important; letter-spacing: -2px !important; }
  [style*="font-size:56px"],  [style*="font-size: 56px"]  { font-size: 38px !important; }
  [style*="font-size:54px"],  [style*="font-size: 54px"]  { font-size: 40px !important; }
  [style*="font-size:52px"],  [style*="font-size: 52px"]  { font-size: 42px !important; }
  [style*="font-size:46px"],  [style*="font-size: 46px"]  { font-size: 25px !important; line-height: 1.35 !important; }

  /* collapse the nested "auto 1fr" card grid on Home (optimization score) */
  [style*="auto 1fr"] { grid-template-columns: 1fr !important; }

  /* trim very tall vertical section paddings */
  [style*="padding: 140px 0"] { padding: 72px 0 !important; }
  [style*="padding:140px 0"]  { padding: 72px 0 !important; }
  [style*="padding: 110px 0"] { padding: 60px 0 !important; }

  /* home hero visual: shorter so absolutely-positioned bits stay in frame */
  [style*="height:480px"], [style*="height: 480px"] { height: 380px !important; }

  /* sub-page CTA bands: a touch less padding */
  [style*="linear-gradient(120deg, #6c3ef5"] { padding: 40px 24px !important; }
}