:root {
      --bs-primary: #f4623a;
      /* Agency fő narancs */
      --bs-primary-rgb: 244, 98, 58;
      --dt-dark: #212529;
    }

    body {
      font-size: 1rem;
      font-family: 'Montserrat', sans-serif;
      scroll-behavior: smooth
    }

    .navbar-brand {
      font-weight: 800;
      letter-spacing: .5px
    }

    .masthead {
      position: relative;
      display: flex;
      align-items: flex-start;
      padding-top: 18vh;
      padding-bottom: 10vh;
      min-height: 100vh;
      background: url('./img/cover-drivertraining-4096.jpg') center/cover no-repeat;
      color: #fff;
      text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    }


    /* Hero text position tuning */
    @media (max-width: 575.98px) {
      .masthead {
        padding-top: 22vh;
        padding-bottom: 8vh;
      }

      .masthead .display-5 {
        font-size: 1.9rem;
        line-height: 1.25;
      }
    }

    @media (min-width: 576px) and (max-width: 991.98px) {
      .masthead {
        padding-top: 20vh;
        padding-bottom: 10vh;
      }
    }

    @media (min-width: 992px) {
      .masthead {
        padding-top: 18vh;
        padding-bottom: 12vh;
      }
    }

    .masthead::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .45)
    }

    .masthead .content {
      position: relative;
      z-index: 1
    }

    .section-heading {
      font-weight: 800;
      letter-spacing: .5px
    }

    .divider {
      width: 80px;
      height: 4px;
      background: var(--bs-primary);
      border-radius: 10px;
      margin: 1rem auto
    }

    .divider-start {
      margin: 1rem 0
    }

    /* Kártyák (csomagok) */
    .pricing .card {
      border: 0;
      box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, .2);
    }

    .badge-soft {
      background: rgba(var(--bs-primary-rgb), .1);
      color: var(--bs-primary);
      border: 1px solid rgba(var(--bs-primary-rgb), .25)
    }

    /* Team / Oktatók */
    .team .avatar {
      width: 96px;
      height: 96px;
      border-radius: 1rem;
      object-fit: cover;
      border: 3px solid #fff;
      box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)
    }

    /* Galéria */
    .mosaic img {
      height: 160px;
      object-fit: cover;
      border-radius: .75rem
    }

    @media (min-width:992px) {
      .mosaic img {
        height: 200px
      }
    }

    footer a {
      color: rgba(255, 255, 255, .85)
    }

    .mosaic img,
    #mosaic img {
      cursor: pointer
    }

    /* Összehasonlító dobozok (nálad már rendben) */
    .compare-good {
      background: rgba(13, 110, 253, .08);
      border: 2px solid #0d6efd;
      color: #212529 !important;
    }

    .compare-good i {
      color: #0d6efd;
    }

    .compare-good .compare-label {
      background: #0d6efd;
      color: #fff !important;
    }

    /* Sticky CTA – egyetlen definíció */
    .sticky-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1030;
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Kisebb gombok a sticky sávban */
    .sticky-cta .btn-sm {
      font-size: 0.9rem;
      padding: 0.4rem 0.6rem;
    }

    .btn-icon {
      width: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    /* Csak ott adjunk alul helyet, ahol tényleg van sticky sáv:
   mobil/tablet nézetben. Desktopon ne! */
    @media (max-width: 991.98px) {
      body {
        font-size: 1rem;
        font-family: 'Montserrat', sans-serif;
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
      }

      /* igazítsd a sticky valódi magasságához */
    }

    /* HERO – mobil finomhangolás */
    .hero-title-mobile {
      display: none;
    }

    @media (max-width: 575.98px) {
      .hero-title-desktop {
        display: none;
      }

      .hero-title-mobile {
        display: inline;
      }
    }

    @media (max-width: 575.98px) {
      .masthead {
        min-height: 85vh;
        overflow: visible;
      }

      .masthead::before {
        background: rgba(0, 0, 0, .55);
      }

      .masthead h1 {
        font-size: 1.75rem;
        line-height: 1.2;
      }

      .masthead .lead {
        font-size: 1rem;
      }

      .hero-badges {
        overflow: visible;
      }

      .hero-badges .badge {
        padding: .35rem .6rem;
        font-weight: 500;
      }

      /* A hero gombok mobilon rejtve (sticky sáv veszi át a szerepet) */
      .hero-cta .btn-main-hero,
      .hero-cta .btn-secondary-hero,
      .hero-cta .btn-voucher-hero {
        display: none !important;
      }

      /* A hero tartalma ne csússzon a sticky sáv mögé */
      .masthead .content {
        padding-bottom: 96px;
      }
    }

    /* Tablet fölött minden visszajön a hero-gombsorban */
    @media (min-width: 576px) {

      .hero-cta .btn-main-hero,
      .hero-cta .btn-secondary-hero,
      .hero-cta .btn-voucher-hero {
        display: inline-flex !important;
      }
    }


    /* blur-up */
    .blur-up {
      filter: blur(2px);
      transform: scale(1.02);
      transition: filter .3s ease, transform .3s ease;
    }

    .blur-up[src*="thumbnail"] {
      filter: blur(0);
      transform: none;
    }

    /* rácsban normálisan jelenik meg */

    /* Lightbox spinner overlay */
    #lightboxSpinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
      z-index: 5;
    }


    /* Lightbox sizing fix */
    #lightbox .modal-dialog {
      max-width: 100%;
      margin: 0;
    }

    #lightbox .modal-content {
      background: #1b1f24;
    }

    #lightboxImg {
      display: block;
      margin: 0 auto;
      width: auto;
      height: auto;
      max-width: calc(100vw - 48px);
      max-height: calc(100vh - 96px);
      object-fit: contain;
    }


    /* Mobilon a lightbox legyen teljes képernyős */
    @media (max-width: 768px) {
      #lightbox .modal-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        margin: 0;
      }

      #lightbox .modal-content {
        height: 100vh;
        border-radius: 0;
      }

      #lightboxImg {
        max-width: 100vw;
        max-height: 100vh;
      }
    }


    /* --- Mobile fullscreen hard fix --- */
    @media (max-width: 992px) {
      #lightbox .modal-dialog {
        width: 100dvw;
        max-width: 100dvw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
      }

      #lightbox .modal-content {
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        background: #1b1f24;
      }

      #lightbox .modal-body {
        padding: 0;
      }

      #lightboxImg {
        display: block;
        margin: 0 auto;
        width: auto;
        height: auto;
        max-width: 100dvw;
        max-height: 100dvh;
        object-fit: contain;
      }

      /* Side arrows & close button shouldn't shift layout */
      #lightbox .btn {
        z-index: 5;
      }
    }


    /* --- Zoom & Pan styles --- */
    #lightbox .modal-body {
      overflow: hidden;
      background: #1b1f24;
    }

    #lightboxImg {
      touch-action: none;
      /* enable custom gestures */
      transform-origin: center center;
      transition: transform .12s ease-out;
      will-change: transform;
    }

    #lightboxImg.is-dragging {
      cursor: grabbing;
      transition: none;
    }

    /* Hero badge-ek desktop finomhangolás */
    .hero-badges .badge {
      font-weight: 400;
      /* desktopon vékonyabb */
    }

    @media (max-width: 575.98px) {
      .hero-badges .badge {
        font-weight: 500;
        /* mobilon marad kicsit vastagabb */
      }
    }



    /* --- Navbar adjustments for larger brand/icon --- */
    .navbar-brand {
      font-weight: 800;
      letter-spacing: .5px;
      font-size: 1.35rem;
      /* larger brand text */
    }

    .navbar-nav .nav-link {
      font-size: 1.05rem;
      padding: 0.6rem 1rem;
    }

    .navbar .btn {
      font-size: 1rem;
      padding: 0.5rem 1rem;
    }