.hero-wrap .slider-text h1 span:first-of-type {
  color: #ffc107;
}

@media (min-width: 992px) {
  .hero-wrap .overlay {
    opacity: 1;
    background: -webkit-gradient(linear, left top, right top,
    from(rgba(0, 0, 0, 0.90)),
    color-stop(20%, rgba(0, 0, 0, 0.74)),
    color-stop(42%, rgba(0, 0, 0, 0.42)),
    color-stop(60%, rgba(0, 0, 0, 0.20)),
    color-stop(80%, rgba(0, 0, 0, 0.24)),
    to(rgba(0, 0, 0, 0.50)));
    background: -webkit-linear-gradient(left,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.88) 22%,
    rgba(0, 0, 0, 0.58) 44%,
    rgba(0, 0, 0, 0.34) 62%,
    rgba(0, 0, 0, 0.42) 82%,
    rgba(0, 0, 0, 0.66) 100%);
    background: linear-gradient(to right,
    rgba(0, 0, 0, 0.96) 0%,
    rgba(0, 0, 0, 0.88) 22%,
    rgba(0, 0, 0, 0.58) 44%,
    rgba(0, 0, 0, 0.34) 62%,
    rgba(0, 0, 0, 0.42) 82%,
    rgba(0, 0, 0, 0.66) 100%);
  }

  .hero-wrap .slider-text {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
    padding-top: 128px;
  }
  .hero-wrap .slider-text .col-lg-6 {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
  }
}

.hero-wrap .slider-text h1 {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.5px;
}

@media (min-width: 992px) {
  .hero-wrap .slider-text h1 {
    font-size: 64px;
  }
}

.hero-wrap .slider-text .icon-wrap .icon {
  background: #ffc107 !important;
}
.hero-wrap .slider-text .icon-wrap .icon span {
  color: #1c1c1c !important;
}

body { overflow-x: hidden; }

.hero-cta-label-mobile,
.hero-badge-icon-mobile,
.hero-badge-label-mobile {
  display: none;
}

.hero-actions-row {
  display: contents;
}

.hero-wrap .hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  background: #ffc107;
  color: #1c1c1c !important;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 15px 22px;
  border-radius: 7px;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.hero-wrap .hero-cta-btn:hover,
.hero-wrap .hero-cta-btn:focus {
  background: #e0a800;
  color: #1c1c1c;
  text-decoration: none;
}
.hero-wrap .hero-cta-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.hero-wrap .hero-cta-arrow {
  font-size: 15px;
  line-height: 1;
}

.hero-wrap .hero-badges {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 10px 14px;
  max-width: max-content;
}
.hero-wrap .hero-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  min-width: 0;
  flex-shrink: 0;
}
.hero-wrap .hero-badge:first-child {
  padding-left: 0;
}
.hero-wrap .hero-badge + .hero-badge {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-wrap .hero-badge-icon {
  flex-shrink: 0;
  color: #ffc107;
}
.hero-wrap .hero-badge-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.hero-wrap .hero-badge-text {
  display: flex;
  flex-direction: column;
  font-size: 9.5px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
.hero-wrap .hero-badge-text strong {
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
}

@media (min-width: 1200px) {
  .hero-wrap .hero-cta-btn { font-size: 15px; padding: 16px 26px; }
}

.hero-rating-card {
  display: block;
  background: rgba(20, 20, 20, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 16px 20px;
  color: #fff;
  box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.55);
}
.hero-rating-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}
.hero-rating-stars {
  color: #ffc107;
  font-size: 14px;
  letter-spacing: 2px;
}
.hero-rating-desc {
  margin: 10px 0 2px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
}
.hero-rating-loc {
  margin: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
}

.hero-wrap .hero-rating-card .hero-rating-score,
.hero-wrap .hero-rating-card .hero-rating-desc,
.hero-wrap .hero-rating-card .hero-rating-loc {
  line-height: 1.8;
}
.hero-wrap .hero-rating-card .hero-rating-desc {
  color: rgba(255, 255, 255, 0.85);
}
.hero-wrap .hero-rating-card .hero-rating-loc {
  color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
  .hero-wrap .container {
    position: relative;
  }
  .hero-rating-card {
    position: absolute;
    top: 140px;
    right: 6px;
    min-width: 180px;
    z-index: 5;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-rating-card {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    min-width: 0;
    margin: 18px 0 0 !important;
    padding: 14px 18px;
    z-index: auto;
  }
}

@media (max-width: 767.98px) {
  .hero-wrap {
    padding-top: 128px !important;
    padding-bottom: 18px !important;
    background-position: center bottom !important;
  }
  .hero-wrap .text {
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .hero-wrap .text h1 {
    font-size: 36px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    margin-bottom: 22px !important;
  }
  .hero-wrap .text p {
    font-size: 20px !important;
    line-height: 1.72 !important;
    margin-bottom: 0 !important;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .hero-actions-row { display: block; }
  .hero-wrap .hero-play {
    display: inline-flex !important;
    align-items: center;
    margin-top: 18px !important;
  }
  .hero-wrap .hero-play .icon {
    width: 46px !important;
    height: 46px !important;
    background: #ffc107 !important;
  }
  .hero-wrap .hero-play .icon span {
    color: #1c1c1c !important;
    font-size: 14px;
  }
  .hero-wrap .hero-play .heading-title {
    display: block !important;
    position: relative;
    margin-left: 56px !important;   /* room for the divider line (:after left:-40, width:30) */
  }
  .hero-wrap .hero-play .heading-title span {
    font-size: 14px;
    color: #fff;
  }
  /* Divider line between the circle and the text — placed exactly in the gap */
  .hero-wrap .hero-play .heading-title:after {
    left: -38px !important;
    width: 24px !important;
  }

  /* --- "ZAMÓW TERAZ" button — its own row, full width --- */
  .hero-wrap .hero-cta-btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center;
    margin-top: 16px !important;
    padding: 15px 18px;
    font-size: 14px;
    border-radius: 10px;
  }
  .hero-cta-label-desktop { display: none; }
  .hero-cta-label-mobile { display: inline; }
  .hero-wrap .hero-cta-arrow { display: none; }
  .hero-wrap .hero-cta-icon svg { width: 20px; height: 20px; }

  /* --- 3 badges in a row: icon on top, caption below --- */
  .hero-wrap .hero-badges {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100% !important;
    max-width: none !important;
    gap: 0;
    margin-top: 14px !important;
    padding: 14px 6px;
    border-radius: 12px;
    background: rgba(20, 20, 20, 0.32);
    border: 1px solid rgba(255, 193, 7, 0.4);
  }
  .hero-wrap .hero-badge {
    flex: 1 1 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 0 4px !important;
    min-width: 0;
    border: none !important;
  }
  .hero-wrap .hero-badge + .hero-badge {
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  .hero-badge-icon-desktop { display: none; }
  .hero-badge-icon-mobile { display: block; color: #ffc107; }
  .hero-badge-icon-mobile svg { width: 24px; height: 24px; }
  /* Two-line caption: bold word on top + small description below */
  .hero-badge-label-mobile { display: none; }
  .hero-wrap .hero-badge-text {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1px;
    white-space: normal;
    line-height: 1.2;
  }
  .hero-wrap .hero-badge-text strong {
    color: #fff;
    font-weight: 700;
    font-size: 12px;
  }
  .hero-wrap .hero-badge-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.72);
  }

  /* --- Rating card: in the flow, right below the badges --- */
  .hero-rating-card {
    position: static !important;
    top: auto !important; right: auto !important; left: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 16px 0 0 !important;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(20, 20, 20, 0.32);
    border: 1px solid rgba(255, 193, 7, 0.4);
    opacity: 1 !important;           /* no animation delay on phones */
    animation: none !important;
  }
  .hero-rating-score { font-size: 18px; }
  .hero-rating-stars { font-size: 14px; }
  .hero-rating-desc { margin: 7px 0 2px; font-size: 12px; }
  .hero-rating-loc { font-size: 11px; }

  /* IMPORTANT: the rating card now sits INSIDE .text, so the rule
     .hero-wrap .text p { font-size:19px !important } (declared above in this
     same block) starts to affect it. We restore the card's own sizes with a
     stronger selector — otherwise the text inside the card blows up. */
  .hero-wrap .text .hero-rating-card .hero-rating-score {
    font-size: 18px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
  }
  .hero-wrap .text .hero-rating-card .hero-rating-desc {
    font-size: 12px !important;
    line-height: 1.8 !important;
    margin: 7px 0 2px !important;
  }
  .hero-wrap .text .hero-rating-card .hero-rating-loc {
    font-size: 11px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
  }
}

/* The same protection for tablets (768–991.98px): there .hero-wrap .text p
   can override the card typography as well. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-wrap .text .hero-rating-card .hero-rating-score {
    font-size: 22px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
  }
  .hero-wrap .text .hero-rating-card .hero-rating-desc {
    font-size: 12.5px !important;
    line-height: 1.8 !important;
    margin: 10px 0 2px !important;
  }
  .hero-wrap .text .hero-rating-card .hero-rating-loc {
    font-size: 11.5px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
  }
}

/* Narrow phones (≤375px) — slightly smaller fonts so the badges fit in one row */
@media (max-width: 375.98px) {
  .hero-wrap .text h1 { font-size: 28px !important; }
  .hero-wrap .text p { font-size: 16px !important; }
  .hero-wrap .hero-badge-text strong { font-size: 11px; }
  .hero-wrap .hero-badge-text { font-size: 9px; }
  .hero-badge-icon-mobile svg { width: 21px; height: 21px; }
}

/* Short screens (height ≤730px) — tighten everything so it fits the screen */
@media (max-width: 767.98px) and (max-height: 730px) {
  .hero-wrap { padding-top: 82px !important; padding-bottom: 12px !important; }
  .hero-wrap .text h1 { font-size: 25px !important; margin-bottom: 10px !important; }
  .hero-wrap .text p {
    font-size: 13px !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-wrap .hero-play { margin-top: 14px !important; }
  .hero-wrap .hero-play .icon { width: 42px !important; height: 42px !important; }
  .hero-wrap .hero-cta-btn { margin-top: 14px !important; padding: 13px 18px; }
  .hero-wrap .hero-badges { margin-top: 12px !important; padding: 11px 6px; }
  .hero-rating-card { margin-top: 12px !important; padding: 11px 14px; }

  /* On short screens the hero paragraph is clamped with -webkit-box + line-clamp.
     The rating card now sits inside .text, so that rule also caught its lines
     (text got cut off and "4.9 ★★★★★" fell apart).
     We restore normal rendering for the card. */
  .hero-wrap .text .hero-rating-card p {
    display: block !important;
    -webkit-line-clamp: none !important;
    -webkit-box-orient: horizontal !important;
    overflow: visible !important;
  }
  .hero-wrap .text .hero-rating-card .hero-rating-score {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-line-clamp: none !important;
    overflow: visible !important;
  }
}

/* Very short screens (≤640px) — as compact as possible */
@media (max-width: 767.98px) and (max-height: 640px) {
  .hero-wrap { padding-top: 72px !important; }
  .hero-wrap .text h1 { font-size: 22px !important; margin-bottom: 8px !important; }
  .hero-wrap .text p { -webkit-line-clamp: 2; font-size: 12.5px !important; }
  .hero-wrap .hero-play { margin-top: 10px !important; }
  .hero-wrap .hero-play .icon { width: 38px !important; height: 38px !important; }
  .hero-wrap .hero-cta-btn { margin-top: 10px !important; padding: 11px 16px; }
  .hero-wrap .hero-badges { margin-top: 9px !important; padding: 9px 6px; }
  .hero-badge-icon-mobile svg { width: 20px; height: 20px; }
  .hero-rating-card { margin-top: 9px !important; padding: 9px 13px; }
  .hero-rating-desc { margin: 5px 0 1px; }
  /* same offset, but with a stronger selector — overrides the mobile block above */
  .hero-wrap .text .hero-rating-card .hero-rating-desc {
    margin: 5px 0 1px !important;
  }
}
/* ════════════════════════════════════════════════════════════
   MATCHING THE DESIGN MOCKUP — DESKTOP ONLY (≥992px).
   The mobile (≤767px) and tablet (768–991px) layouts are NOT touched.

   What changes compared to the current markup:
   1) The "Sprawdź samochód" button and the "Zobacz, jak działamy" play
      circle go on ONE line: button on the left, play circle to its right.
   2) Badges — full width of the text column, larger font,
      three equal cells with dividers.
   3) The rating card NO LONGER floats in the top right corner:
      it sits in the flow below the badges, same width, with its content
      on a single line: "4.9 ★★★★★" + description on the right.
   4) Small details: top offset of the text, paragraph size.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {

  /* --- 4) text a bit higher up, as in the mockup --- */
  .hero-wrap .slider-text {
    padding-top: 112px;
  }
  /* Keep the .text block strictly at the column width: badges and rating
     get exactly that width, while the button row may be slightly wider */
  .hero-wrap .slider-text .text {
    width: 100%;
    min-width: 0;
  }
  /* IMPORTANT: only the DIRECT child paragraph (the lead under the heading).
     Without ">" this rule would also catch the rating card lines. */
  .hero-wrap .slider-text .text > p {
    font-size: 19px !important;
    line-height: 1.62;
    max-width: 100%;
    margin-bottom: 0;
  }

  /* --- 1) Button + play circle on a single line --- */
  .hero-wrap .hero-actions-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: none;
    margin-top: 30px;
  }
  .hero-wrap .hero-actions-row .hero-cta-btn {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin-top: 0 !important;
    margin-right: 26px;          /* gap before the play circle */
    gap: 10px;
    font-size: 14px;
    padding: 17px 22px;
    border-radius: 8px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .hero-wrap .hero-actions-row .hero-play {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin-top: 0 !important;    /* cancel the Bootstrap .mt-4 */
  }
  .hero-wrap .hero-cta-arrow {
    margin-left: 6px;
    font-size: 16px;
  }

  /* --- 2) Badges: full column width, three equal cells --- */
  .hero-wrap .hero-badges {
    /* .hero-badges carries the Bootstrap .flex-wrap class (!important) in the
       markup, so wrapping is disabled with !important as well */
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
    margin-top: 22px;
    padding: 12px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
  .hero-wrap .hero-badge {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    gap: 10px;
    padding: 2px 13px;
  }
  .hero-wrap .hero-badge:first-child {
    padding-left: 0;
  }
  .hero-wrap .hero-badge:last-child {
    padding-right: 0;
  }
  .hero-wrap .hero-badge-icon svg {
    width: 20px;
    height: 20px;
  }
  .hero-wrap .hero-badge-text {
    font-size: 12.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
  }
  .hero-wrap .hero-badge-text strong {
    font-size: 14px;
    margin-bottom: 2px;
  }

  /* --- 3) Rating card: in the flow, below the badges, horizontal --- */
  .hero-wrap .hero-rating-card {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px 24px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .hero-wrap .hero-rating-card .hero-rating-score {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    gap: 12px;
    margin-right: 30px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
  }
  .hero-wrap .hero-rating-card .hero-rating-stars {
    font-size: 20px;
    letter-spacing: 2px;
  }
  .hero-wrap .hero-rating-card .hero-rating-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
  }
  .hero-wrap .hero-rating-card .hero-rating-desc {
    margin: 0 0 4px;
    font-size: 16.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
  }
  .hero-wrap .hero-rating-card .hero-rating-loc {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
  }
}

/* Wide screens (≥1200px) — badge and button typography as in the mockup */
@media (min-width: 1200px) {
  .hero-wrap .hero-actions-row .hero-cta-btn {
    font-size: 15px;
    padding: 18px 26px;
    margin-right: 30px;
  }
  .hero-wrap .hero-badge {
    gap: 12px;
    padding: 2px 18px;
  }
  .hero-wrap .hero-badge-text {
    font-size: 13.5px;
  }
  .hero-wrap .hero-badge-text strong {
    font-size: 15px;
  }
}

/* Laptops 992–1199px: the hero column is slightly wider than the standard
   col-lg-6, otherwise the badges and the rating row do not fit on one line.
   The right spacer columns are empty (the background is an image), so this is safe. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-wrap .slider-text > .col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58%;
    flex: 0 0 58%;
    max-width: 58%;
  }
  .hero-wrap .slider-text h1 {
    font-size: 56px;
  }
  .hero-wrap .hero-rating-card .hero-rating-desc {
    font-size: 15.5px;
  }
}
/* ════════════════════════════════════════════════════════════
   SOCIAL ICONS IN THE HERO — PHONE ONLY (up to 767.98px).
   Hidden on desktop and tablet: there the social links live in the footer.
   The block sits inside .text, so it never leaves the section.
   ════════════════════════════════════════════════════════════ */

/* hidden by default — desktop and tablet */
.hero-socials {
  display: none;
}

@media (max-width: 767.98px) {
  .hero-wrap .text .hero-socials {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: distribute;
    justify-content: space-evenly;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 18px;
    box-sizing: border-box;
  }

  /* Icon: white, no background or border — with a short yellow line below */
  .hero-wrap .text .hero-socials a {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    padding: 2px 4px 0;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
  }

  /* Yellow line under the icon */
  .hero-wrap .text .hero-socials a::after {
    content: "";
    display: block;
    width: 13px;
    height: 3px;
    margin-top: 11px;
    border-radius: 2px;
    background: #ffc107;
  }

  .hero-wrap .text .hero-socials a:hover,
  .hero-wrap .text .hero-socials a:focus,
  .hero-wrap .text .hero-socials a:active {
    color: #ffc107;
    text-decoration: none;
  }

  /* Fixed height of the icon box — this keeps the yellow lines aligned
     no matter whether the icon comes from the font or is an SVG (TikTok). */
  .hero-wrap .text .hero-socials a > span {
    display: block;
    height: 24px;
    line-height: 24px;
  }
  .hero-wrap .text .hero-socials a svg {
    width: 21px;
    height: 24px;
    display: block;
  }
}

/* Very narrow phones (≤360px) — slightly smaller icons */
@media (max-width: 360px) {
  .hero-wrap .text .hero-socials {
    margin-top: 14px;
  }
  .hero-wrap .text .hero-socials a {
    font-size: 21px;
  }
  .hero-wrap .text .hero-socials a > span {
    height: 21px;
    line-height: 21px;
  }
  .hero-wrap .text .hero-socials a svg {
    width: 18px;
    height: 21px;
  }
  .hero-wrap .text .hero-socials a::after {
    margin-top: 9px;
  }
}

/* ────────────────────────────────────────────────────────────
   On phones the hero is exactly one screen high (100dvh).
   To fit the icons above the section edge we free up space at the
   top: a smaller gap under the navbar and no downward shift of the
   row. The whole content moves up by about 50px.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .hero-wrap .container {
    padding-bottom: 12px !important;
  }
  .hero-wrap .container .slider-text {
    -webkit-transform: none !important;
    transform: none !important;
  }
  .hero-wrap .container .hero-rating-card {
    margin-top: 14px !important;
  }
}

/* Smaller gap under the navbar — only on tall screens.
   On shorter ones the tighter values from the ≤820 / ≤730 / ≤640 blocks apply,
   hence min-height here, so that those are not overridden. */
@media (max-width: 767.98px) and (min-height: 821px) {
  .hero-wrap {
    padding-top: 90px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   The icons take about 55px of height while the hero is exactly one
   screen high. On shorter phones we tighten the layout step by step,
   so the icons never end up hidden below the section edge.
   ──────────────────────────────────────────────────────────── */

/* Screens 731–820px tall (iPhone 8/XR, some Android devices).
   The 731px lower bound matters: below it the older, tighter blocks
   (≤730 and ≤640) apply and this set must not loosen them. */
@media (max-width: 767.98px) and (min-height: 731px) and (max-height: 820px) {
  .hero-wrap { padding-top: 88px !important; }
  .hero-wrap .text h1 { font-size: 30px !important; margin-bottom: 12px !important; }
  .hero-wrap .text p { font-size: 14px !important; line-height: 1.5 !important; }
  .hero-wrap .hero-play { margin-top: 16px !important; }
  .hero-wrap .hero-cta-btn { margin-top: 16px !important; }
  .hero-wrap .hero-badges { margin-top: 14px !important; }
  .hero-wrap .container .hero-rating-card { margin-top: 12px !important; }
  .hero-wrap .text .hero-socials { margin-top: 14px; }
}

/* Very short screens — the icons are scaled down as well */
@media (max-width: 767.98px) and (max-height: 730px) {
  .hero-wrap .text .hero-socials { margin-top: 12px; }
  .hero-wrap .text .hero-socials a { font-size: 21px; }
  .hero-wrap .text .hero-socials a > span { height: 21px; line-height: 21px; }
  .hero-wrap .text .hero-socials a svg { width: 18px; height: 21px; }
  .hero-wrap .text .hero-socials a::after { margin-top: 8px; }
}

@media (max-width: 767.98px) and (max-height: 640px) {
  .hero-wrap .text .hero-socials { margin-top: 9px; }
  .hero-wrap .text .hero-socials a { font-size: 19px; }
  .hero-wrap .text .hero-socials a > span { height: 19px; line-height: 19px; }
  .hero-wrap .text .hero-socials a svg { width: 16px; height: 19px; }
  .hero-wrap .text .hero-socials a::after { margin-top: 7px; height: 2px; }
}