:root{
      --bg: #0b0e13;
      --bg-elev: #11151b;
      --card: #151a22;
      --muted: #98a2b3;
      --text: #e8ecf2;
      --text-strong: #ffffff;
      --line: #232a35;
      --accent: #3b82f6; /* jemná modrá (linkuje Subaru), hodí sa aj k zvyšku */
      --accent-2: #22c55e; /* jemná zelená (servis) */
      --accent-3: #f59e0b; /* žltá (Jeep vibe) */
      --radius-xl: 18px;
      --radius: 12px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --shadow-soft: 0 8px 20px rgba(0,0,0,.22);
      --maxw: 1200px;
    }
    *{box-sizing:border-box}
    
    /* =========================
   GLOBAL CURSOR SPOTLIGHT (celá stránka)
   ========================= */

.global-cursorfx{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* vrstva pod obsahom */
}

/* samotné svetlo (spotlight) */
.global-cursorfx::before{
  content:"";
  position:absolute;
  inset:0;                 /* ⬅️ už nie -25% */
  opacity:.55;

  background: radial-gradient(
    700px 420px at var(--mx, 50vw) var(--my, 35vh), /* ⬅️ px / vw fallback */
    rgba(255,255,255,0.12),
    rgba(59,130,246,0.10),
    transparent 60%
  );

  mix-blend-mode: screen;
  filter: blur(40px) saturate(130%); /* blur môže ostať */
}

/* jemný "gloss" overlay ako máš na kartách */
.global-cursorfx::after{
  content:"";
  position:absolute;
  inset:0;
  opacity: .35;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 22%);
  mix-blend-mode: overlay;
}

/* uisti sa, že obsah stránky je NAD týmto efektom */
body > *{
  position: relative;
  z-index: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .global-cursorfx{ display:none !important; }
}

    
    
    html,body{background:var(--bg); color:var(--text); font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif; line-height:1.55}
    a{color:var(--text); text-decoration:none}
    .container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
    header{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(8px);
      background:linear-gradient(180deg, rgba(11,14,19,.9), rgba(11,14,19,.7));
      border-bottom:1px solid var(--line);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0;flex-wrap: nowrap;}
    .brand{display:flex; align-items:center; gap:12px}
    
   .brand svg {
  display: block;
  width: 100px;
  height: auto;
  transform: scale(1.5);       /* základná veľkosť */
  transform-origin: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px #ff0000)
          drop-shadow(0 0 50px #ff0000);

  transition: transform 0.3s ease, filter 0.3s ease; /* ⬅ tu patrí */
}

.brand svg:hover {
  transform: scale(1.55);      /* jemné zväčšenie */
  
}



html {
  scroll-behavior: smooth;
}




    .brand h1{font-size:16px; margin-left:50px; letter-spacing:.3px;white-space: nowrap;}
    .nav-links{
  display:flex;
  flex: 1;                    /* zaberie priestor medzi logom a CTA */
  align-items:center;
  justify-content: space-evenly; /* ROZTIAHNE položky po šírke */
  gap: 0;                     /* medzery rieši space-evenly */
  padding: 0 14px;            /* jemný vnútorný okraj */
  min-width: 0;
  flex-wrap: nowrap;
}
    
.nav-links a{
  padding: 12px 18px;         /* väčší “klik” priestor */
  border-radius: 10px;
  white-space: nowrap;        /* aby sa “Testovacia jazda” nelámala */
}

@media (max-width: 1100px){
  .nav-links{
    justify-content: center;
    gap: 10px;          /* tu už radšej gap, nech sa zmestí */
    padding: 0 8px;
  }
  .nav-links a{
    padding: 10px 12px;
    font-size: 14px;
  }
}


    .nav-links a:hover{color: rgb(255, 255, 255)}
    .nav-cta{display:flex; gap:10px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg-elev);
      transition:transform .12s ease, background .2s ease, border-color .2s ease;
      font-weight:600
    }

    .btn-contact{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn-contact:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
  color: #fff;
}


    .btn:hover{transform:translateY(-1px); border-color:#2a3443}
    .btn.primary{background:#0044d6; border-color:transparent; color:#ffffff;transition: transform 0.3s ease, filter 0.3s ease;}
    .btn.primary:hover{filter:brightness(1.05); transform:scale(1.01);filter: drop-shadow(0 0 8px #004bee)}
    .mobile-toggle{display:none}
    /* HERO */
    .hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
    .hero-wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; padding:48px 0 34px}
    .badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
    .badge{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.02)}
    .hero h2{font-size:42px; line-height:1.1; margin:8px 0 14px; letter-spacing:.2px}
    .hero p{color:var(--muted); margin:0 0 22px}
    .hero .quick{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
    .hero-card{
      background: radial-gradient(1200px 600px at 70% -10%, rgba(59,130,246,.09), transparent),
                  radial-gradient(900px 400px at 100% 20%, rgba(245,158,11,.08), transparent),
                  var(--card);
      border:1px solid var(--line); border-radius:var(--radius-xl); padding:18px; box-shadow:var(--shadow)
    }
    
        .hero-media {
        position: relative;
        border: 1px solid var(--line);
        border-radius: var(--radius-xl);
        overflow: hidden; /* aby sa obrazok nepretiekol cez rohy */
        box-shadow: var(--shadow);
        }

        .hero-media img {
        position: absolute;
        top: 0; left: 0; 
        width: 100%;
        height: 100%;
        object-fit: cover; /* vyplní celý box */
        }


    .hero-media .fake-car{
      width:100%; height:100%; aspect-ratio: 4 / 3;
      display:grid; place-items:center; color:#8aa4ff; font-weight:700; letter-spacing:.4px;
      background:
        radial-gradient(60% 60% at 50% 20%, rgba(59,130,246,.22), transparent 60%),
        radial-gradient(60% 60% at 80% 60%, rgba(245,158,11,.22), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
      border-bottom:1px solid var(--line)
    }
    .hero-media .ribbon {
  position: absolute;
  bottom: 14px;
  padding: 2px 0;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;   /* už sa nezalomí, ostane v jednom riadku */
  overflow-x: auto;    /* ak je ich veľa, objaví sa scroll */
}

    
    .ribbon .chip {
  font-size: 12px;
  padding: 6px 10px;
  display: inline-block;
  border-radius: 999px;
  background: #0e1420;
  border: 1px solid var(--line);
  transition: all 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.ribbon .chip:hover {
  transform: translateY(-2px);
}


    .chip{font-size:12px; padding:6px 10px; border-radius:999px; background:#0e1420; border:1px solid var(--line)}
    /* QUICK ACTIONS */
    .quick-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-top:12px}
    .quick-card{
      background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:var(--shadow-soft)
    }
    .quick-card h4{margin:6px 0 6px; font-size:14px}
    .quick-card p{margin:0; font-size:13px; color:var(--muted)}
    /* INVENTORY */
    section{padding:40px 0}
    .section-head{display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:30px}
    .section-head h3{margin:0; font-size:26px}
    .filter-row{display:flex; gap:8px; flex-wrap:wrap}
    .tag {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  padding: 10px 14px;               /* rovnaké ako .btn */
  border-radius: 12px;              /* namiesto 999px */
  border: 1px solid var(--line); 
  background: var(--bg-elev);       /* rovnaké ako .btn */
  font-size: 13px;
  color: #ffffff;                   /* rovnaká farba textu */
  font-weight: 600;                 /* rovnaká váha textu */
  cursor: pointer;
  transition: transform .12s ease, 
              background .2s ease, 
              border-color .2s ease;
}
    .tag:hover {
  transform: translateY(-1px);      /* rovnaký efekt ako .btn */
  border-color: #2a3443;
}

.tag.active {
  background: rgb(0, 68, 214); 
  color: #ffffff;                   /* rovnaké ako .btn.primary */
  border-color: transparent;
}
    .grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
    .car{
      background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column;transition: transform 0.3s ease
    }
    .car:hover{transform: scale(1.02)}
    .car .img{min-height: 300px;aspect-ratio: 16 / 9; background:linear-gradient(135deg,#18202d,#131a24); display:grid; place-items:center; color:#a2b3cd; border-bottom:1px solid var(--line);}
    
    .car .body{padding:14px}
    
    .car h4{margin:2px 0 6px; font-size:18px}
    .specs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px}
    .spec{font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:10px; padding:6px 8px; text-align:center;white-space: nowrap}
    .specs .speclong{font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:10px; padding:6px 8px; text-align:center;white-space: nowrap; overflow: hidden}
.price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.price-group{ display:flex; align-items:center; gap:8px; }
.oldprice{ text-decoration: line-through; color:#9e9e9e; margin-right:6px; }
.discountprice{ font-weight:600; font-size:18px; color:#37c200; margin:0; }
.singleprice{ font-weight:600; font-size:18px; color:var(--text-strong); min-width:180px; text-align:left; }



    .pill{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line)}
    /* SERVICE */
    .service{
      display:grid; grid-template-columns: 1fr 1fr; gap:16px; ;
    }
    .card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px;width: 100%;height: 630px;}
    .card h4{margin:6px 0 8px}
    .list{margin:0; padding-left:18px; color:var(--muted)}
    /* BRANDS */
    
 
    /* TESTIMONIALS */
    .testi{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
    .quote{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px}
    .quote p{margin:0 0 8px}
    .by{font-size:12px; color:var(--muted)}
    /* TEAM & CONTACT */
    .team{display:grid; grid-template-columns: 1fr 1fr; gap:20px}
    
    .person{
  display:flex;
  gap: 30px;
  align-items:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.person:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.avatar{
  width:180px;
  height:180px;
  border-radius:16px;
  object-fit: cover;
  object-position: center 0%;
  border:1px solid var(--line);
}

    .person h5{margin:2px 0 4px; font-size: 20px;}
    .person p{margin:0; color:var(--muted)}
    .contact{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px}
    .contact .row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
    .meta{font-size:14px; color:var(--muted); margin-top:6px}

    /* RESPONSIVE */
    @media (max-width: 1000px){
      .hero-wrap{grid-template-columns:1fr}
      .quick-grid{grid-template-columns: repeat(2,1fr)}
      .grid{grid-template-columns: repeat(2,1fr)}
      .service{grid-template-columns:1fr}
      .brands{grid-template-columns: repeat(2,1fr)}
      .testi{grid-template-columns:1fr 1fr}
      .team{grid-template-columns:1fr}
      .foot{grid-template-columns:1fr}
    }
    @media (max-width: 680px){
      .nav-links{display:none}
      .mobile-toggle{display:inline-flex}
      .grid{grid-template-columns:1fr}
      .quick-grid{grid-template-columns:1fr}
      .brands{grid-template-columns:1fr}
      .testi{grid-template-columns:1fr}
    }

/* Rezerva kvôli sticky headeru */
section {
  scroll-margin-top: 80px; /* výšku si doladíš podľa headera */
}





#mapa .section-head h3{
  margin-top: -40px;
  margin-bottom: 0;
}

.no-bullets {
  list-style: none;
  padding-left: 0; /* odstráni aj odsadenie */
}

.no-bullets li {
  margin-bottom: 35px; /* väčší rozostup medzi odsekmi */
}



.promo-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.promo-slider img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.promo-slider {
  position: relative;   /* základ, aby sa šípky mohli pozicovať voči slideru */
  max-width: 760px;     /* prípadne tvoja šírka */
  overflow: hidden;  

}



.promo-btn {
  position: absolute;
  top: 50%;                       /* vertikálne do stredu */
  transform: translateY(-50%);    /* presne vycentrovať */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: white;
  background-color: #000000;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
  z-index: 2; /* aby boli nad obrázkami */
}

.promo-btn.prev {
  left: 20px;   /* posunie sa k ľavému okraju */
}

.promo-btn.next {
  right: 20px;  /* posunie sa k pravému okraju */
}

.promo-btn:hover {
  
  transform: translateY(-50%) scale(1.2);
}


/* Lightbox pre bannery */
.promo-lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
}

.promo-lightbox-content {
  max-width: 90%;
  max-height: 80%;
  border-radius: 12px;
  animation: zoomIn 0.3s ease;
}

.promo-lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}


.brands {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.brand-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* text hore, tlačidlo dole */
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0e141c;
  min-height: 220px; /* nastavíš podľa potreby, aby to malo rovnakú výšku */
}

.brand-tile h4 {
  margin-top: 0;
}

.brand-tile p {
  flex-grow: 1; /* nech text zaberie priestor medzi nadpisom a tlačidlom */
}

.brand-tile .btn {
  align-self: flex-start; /* tlačidlo vždy vľavo */
  margin-top: 12px;
}

/* SLIDER */
.slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 16px;
  padding: 0px 0;
}

.slide-track {
  display: flex;
  width: calc(420px * 10); /* počet obrázkov x šírka */
  animation: scroll 35s linear infinite; /* pomalší posun, môžeš dať aj 30s */
}

.slider img {
  width: 400px;
  height: 250px;
  object-fit: cover;
  border-radius: 14px;
  margin: 0 10px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* LIGHTBOX */
.lightbox {
  display: none; /* skryté, kým sa neklikne na fotku */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  max-width: 90%;
  max-height: 80%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  animation: zoomIn 0.3s ease;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.lightbox .close:hover {
  transform: scale(1.2);
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.status-container {
  font-weight: bold;
  font-size: 20px;
  margin-top: -10px;
  margin-bottom: 30px;
  text-align: center;
  color: var(--text);
}

.status-open {
  color: var(--accent-2); /* zelená z tvojej palety */
}

.service {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.service .card {
  flex: 1; /* základné rozdelenie rovnakou šírkou */
  
}

.service .card h3,
.service .card .meta {
  margin-top: 10px; /* posunie hore */
}


.service .card:first-child {
  max-width: 550px;   /* ľavý box užší */
  height: 630px;  /* fixná výška */
}

.promo-btn-cta {
  position: relative;
  top: 20px;
  bottom: -10px;   /* vzdialenosť od spodku slidera */
  left: 5px;    /* posun od pravého okraja */
  z-index: 10;
}

footer {
  border-top: 1px solid var(--line);
  background: #0e141c;
  padding: 40px 0 20px;
  color: #9aa7bb;
  font-size: 14px;
}

.foot {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 24px;
}


.contact {
  max-width: 1200px;  
  height: 420px; /* zmenší šírku */
  margin: 0 auto;     /* vycentruje na stred */
}


.foot-brand p {
  margin-top: 20px;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}

.foot-links h5,
.foot-contact h5 {
  margin-bottom: 10px;
  font-size: 14px;
  color: #fff;
}

.foot-links ul,
.foot-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.foot-links li,
.foot-contact li {
  margin-bottom: 8px;
}

.foot-links a,
.foot-contact a {
  color: #9aa7bb;
  transition: color 0.2s ease;
}

.foot-links a:hover,
.foot-contact a:hover {
  color: var(--accent);
}

.foot-social {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* jedna aktuálna cena bez zľavy (biela, neprečiarknutá) */


.logo-foot {
  width: 250px;   /* alebo podľa potreby */
  height: auto;
  display: block;
  margin: 0 auto;
  margin-top: 10px;

}

.foot-social img {
  width: 30px;
  height: 30px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.foot-social img:hover {
  opacity: 1;
  filter: brightness(1.2);
}

.foot-bottom {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}


/* filter hide */
#inventory .car.is-hidden { display: none !important; }

/* ak používaš <img> vo vnútri .img */
/* jednotná veľkosť obrázkov v kartách */
.car .img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* drží rovnaký pomer ako BRZ karta */
  overflow: hidden;       /* ak je obrázok väčší, oreže sa */
  display: block;
}

.car .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 85%; /* 0% = hore, 50% = stred, 100% = dole */
  display: block;
  
}

.car--brz .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%; /* 0% = hore, 50% = stred, 100% = dole */
  display: block;
}

.car--brzblack .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 100%; /* 0% = hore, 50% = stred, 100% = dole */
  display: block;
}








@media (max-width: 900px) {
  .foot {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .foot {
    grid-template-columns: 1fr;
  }
}

.contact .row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 stĺpce vedľa seba */
}

.contact-info p {
  margin: 15px 0; /* namiesto veľkých medzier */
  line-height: 1.4; /* kompaktnejší riadkový rozostup */
}

.contact-info .meta {
  margin-top: 6px; /* ak chceš jemne oddeliť e-maily od ostatného */
  font-size: 14px;
}


.contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.btn-contact {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-contact:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: #fff;
}

.contact-form .form-grid {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0e141c;
  color: var(--text);
  font-size: 14px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
}

/* Responzívne */
@media (max-width: 768px) {
  .contact .row {
    grid-template-columns: 1fr; /* pod sebou */
  }
}


/* =========================
   MOBILE + TOUCH (v2)
   ========================= */

/* Touch zariadenia: vypni hover “skoky” a kurzor efekt */
@media (hover:none) and (pointer:coarse){
  .global-cursorfx{ display:none !important; }

  .car:hover,
  .person:hover,
  .brand svg:hover,
  .promo-btn:hover,
  .btn:hover,
  .tag:hover,
  .service-card:hover,
  .finance-card:hover{
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ===== MOBILE (≤ 680px) ===== */
@media (max-width: 680px){

  /* layout / spacing */
  .container{ padding: 0 14px; }
  section{ padding: 28px 0; }
  .section-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  /* fix negatívnych marginov na mape (na mobile to často rozbíja layout) */
  #mapa .section-head h3{ margin-top: 0; }

  /* header */
  header .nav{ position: relative; padding: 8px 0; gap: 10px; }
  .brand{ gap: 10px; }
  .brand svg{
    width: 78px !important;
    transform: none !important;
    filter:
      drop-shadow(0 0 6px rgba(255,0,0,.70))
      drop-shadow(0 0 22px rgba(255,0,0,.45)) !important;
  }
  .brand h1{ font-size: 13px; margin-left: 6px; }

  /* burger panel */
  .nav-links{
    display: none;
    position: fixed;
    left: 12px; right: 12px;
    top: calc(64px + env(safe-area-inset-top, 0px));
    z-index: 100;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    max-height: calc(100vh - 92px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open .nav-links{ display:flex; }

  /* overlay len pri otvorenom menu (nezavadzia lightboxom) */
  header .nav.open::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99;
  }

  .nav-links a{ padding: 14px 12px; border-radius: 10px; }

  /* CTA v hlavičke: nechaj iba burger (brand-switch je na mobile v menu cez .nav-brand) */
  .nav-cta a.btn{ display: none; }
  .mobile-toggle{
    display: inline-flex;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
  }

  /* scroll lock pri otvorenom menu */
  body.no-scroll{ overflow: hidden; }

  /* hero */
  .hero-wrap{ grid-template-columns: 1fr; padding: 22px 0 18px; gap: 14px; }
  .hero h2{ font-size: 28px; line-height: 1.15; }
  .hero p{ font-size: 14px; }
  .hero-card{ padding: 16px; }
  .hero .quick{ gap: 10px; }
  .hero .quick .btn{ flex: 1 1 100%; }
  .hero-media{ aspect-ratio: 16 / 9; min-height: 210px; }
  .hero-media .ribbon{ bottom: 10px; left: 10px; right: 10px; }

  /* filters: horizontálny scroll (lepší UX ako “lámanie” do 3 riadkov) */
  .filter-row{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 6px;
  }
  .filter-row::-webkit-scrollbar{ display:none; }
  .tag{ padding: 12px 14px; }

  /* inventory grid */
  .grid{ grid-template-columns: 1fr; gap: 14px; }
  .car .img{ min-height: 220px; }
  .car h4{ font-size: 17px; }
  .specs{ grid-template-columns: repeat(2,1fr); gap: 8px; }
  .price-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .singleprice{ min-width: 0; }

  /* promo slider (štvorcové bannery) */
  .promo-slider{ max-width: 100%; }
  .promo-slider img{
    width: min(82vw, 320px);
    height: min(82vw, 320px);
    border-radius: 12px;
  }
  .promo-btn.prev{ left: 10px; }
  .promo-btn.next{ right: 10px; }

  /* promo2 (hero slider) – head + controls do stĺpca */
  .promo2-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .promo2-controls{ width: 100%; justify-content: flex-end; }
  .promo2-title{ font-size: 20px; }
  .promo2-card{ height: 240px; }
  .promo2-meta{ left: 12px; right: 12px; bottom: 12px; gap: 10px; }
  .promo2-name{ font-size: 18px; }

  /* service (ak používaš starú .service + .card sekciu) */
  .service{ display:block; }
  .card{ height: auto; padding: 16px; }

  /* service promo (v2) – zmenši výšky, nech to nepôsobí “giganticky” */
  #servis .service-promo.promo-slider{ min-height: 220px; }
  #servis .service-promo.promo-slider img{ height: 200px; width: auto; }

  /* team */
  .team{ grid-template-columns: 1fr; gap: 12px; }
  .person{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .avatar{
    width: 100%;
    height: 220px;
    border-radius: 16px;
  }
  .person h5{ font-size: 18px; }

  /* kontakt: odstráň fixnú výšku */
  .contact{
    max-width: none !important;
    height: auto !important;
  }
  .contact .row{ grid-template-columns: 1fr; }
  .contact-actions{ flex-direction: column; }
  .btn-contact{ width: 100%; justify-content: center; }

  /* iOS zoom fix – všetky formuláre na 16px */
  .contact-form input,
  .contact-form textarea,
  .finance-field input,
  .finance-field select,
  .finance-form input,
  .finance-form textarea,
  .td-form input,
  .td-form select,
  .td-form textarea{
    font-size: 16px;
  }

  /* galéria slider */
  .slide-track{ width: max-content; }
  .slider img{ width: 86vw; height: 54vw; }

  /* footer */
  footer{ padding: 28px 0 18px; }
  .logo-foot{ width: 200px; }
  .foot{ gap: 16px; }
  .status-container{ font-size: 16px; margin: 0 0 18px; }
}

/* extra small (≤ 420px) */
@media (max-width: 420px){
  .hero h2{ font-size: 26px; }
  .promo2-card{ height: 220px; }
  .promo2-name{ font-size: 17px; }
}

/* --- BRAND PORTAL STYLING --- */

.frame {
  position: relative;
  width: 1200px;
  height: 1100px;
  margin: 40px auto;
  background: transparent;
}

/* Pozadia */


.bg-1 { top: 0; }
.bg-2 { top: 374.69px; }
.bg-3 { top: 746.81px; }

/* Auto obrázky */
.car-img {
  position: absolute;
  opacity: 0.27;
  transition: 0.35s ease;
  filter: drop-shadow(0px 20px 25px rgba(0,0,0,0.4));
  z-index: 2;
  pointer-events: auto;
  
}



.car-img:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* Tlačidlá */
.btn-left, .btn-right {
  position: absolute;
  height: 110px;
  width: 310px;
  background: linear-gradient(145deg, #1f2733, #161c24);
  border-radius: 22px;
  cursor: pointer;
  border: 1px solid #2a3443;
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);
  transition: 0.25s ease;
  z-index: 5;
  

  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-left:hover, .btn-right:hover {
  background: #263140;
  transform: scale(1.07);
  border-color: #3b82f6;
  
  box-shadow: 0 0 20px rgba(59,130,246,0.4);
}

/* Text v tlačidlách */
.label-btn {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 48px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0,0,0,0.5);
  z-index: 2;
  position: relative; /* už nie absolute */
}

.bg-block {
  position: absolute;
  left: 0;
  width: 1200px;
  height: 336px;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 35px rgba(0,0,0,0.35);
  overflow: hidden;
  z-index: 1;
  
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(59,130,246,.08), transparent 60%),
    radial-gradient(900px 400px at 100% 20%, rgba(245,158,11,.08), transparent 60%),
    radial-gradient(900px 400px at 0% 80%, rgba(34,197,94,.08), transparent 60%),
    linear-gradient(180deg,#0b0e13,#0b0e13 60%);
}



.bg-block::after {
  content:"";
  position:absolute;
  inset:-10%;
  filter:blur(60px) saturate(120%);
  background:conic-gradient(from 90deg at 50% 50%, 
      rgba(59,130,246,.14), 
      rgba(34,197,94,.14), 
      rgba(245,158,11,.14), 
      rgba(59,130,246,.14));
  mix-blend-mode:screen; 
  opacity:.35; 
  animation:spin 22s linear infinite;
  z-index: -1;
}


@keyframes spin { to { transform: rotate(360deg); } }

/* Keď sme v brand režime, schovaj brand taby hneď od začiatku (bez JS bliku) */
html[data-brand] #ponuka .filter-row .tag[data-filter="subaru"],
html[data-brand] #ponuka .filter-row .tag[data-filter="kgm"],
html[data-brand] #ponuka .filter-row .tag[data-filter="jeep"] {
  display: none !important;
}

.vybava-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 16px;
  margin-top: 6px;
}

.vybava-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}

/* =========================
   MODELY ÁUT – modern minimalist strip (BASE)
   ========================= */

:root{
  --ms-accent: #1f43d0;
  --ms-text: #ffffff;
  --ms-muted: #64748b;
  --ms-border: rgba(15, 23, 42, 0.10);
  --ms-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --ms-shadow-hover: 0 14px 44px rgba(15, 23, 42, 0.14);
  --ms-radius: 16px;
}

/* dark mode – nechávame */
@media (prefers-color-scheme: dark){
  :root{
    --ms-text: #e5e7eb;
    --ms-muted: #9ca3af;
    --ms-surface: rgba(255,255,255,0.06);
    --ms-surface-2: rgba(255,255,255,0.04);
    --ms-border: rgba(255,255,255,0.12);
    --ms-shadow: 0 12px 34px rgba(0,0,0,0.35);
    --ms-shadow-hover: 0 16px 50px rgba(0,0,0,0.45);
  }
}

.models-strip{
  padding: 18px 0 70px;
  text-align: center;
}

.models-strip__title{
  margin: 0 0 14px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 32px);
  color: var(--ms-text);
}

.models-strip__title strong,
.models-strip__title b{
  color: var(--ms-accent);
}

/* row */
.models-strip__row{
  --ms-gap: clamp(12px, 1.6vw, 22px);

  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 220px));
  justify-content: center;
  gap: var(--ms-gap);
  padding: 0 10px;
}

@media (max-width: 1180px){
  .models-strip__row{ grid-template-columns: repeat(4, minmax(170px, 220px)); }
}
@media (max-width: 920px){
  .models-strip__row{ grid-template-columns: repeat(3, minmax(170px, 220px)); }
}
@media (max-width: 680px){
  .models-strip__row{ grid-template-columns: repeat(2, minmax(170px, 220px)); }
}
@media (max-width: 420px){
  .models-strip__row{ grid-template-columns: 1fr; }
}

/* tile */
.model-tile{
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 220px;
  text-decoration: none;
  user-select: none;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 14px 14px 12px;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.model-tile.is-active{
  border-color: var(--ms-accent);
  background: linear-gradient(
    180deg,
    rgba(31, 67, 208, 0.08),
    rgba(31, 67, 208, 0.02)
  );
  box-shadow:
    0 10px 30px rgba(31, 67, 208, 0.28),
    inset 0 0 0 1px rgba(31, 67, 208, 0.25);
  transform: translateY(-2px);
}

.model-tile:focus{
  outline: none;
}
.model-tile:focus-visible{
  box-shadow: 0 0 0 4px rgba(31, 67, 208, 0.22), var(--ms-shadow);
  border-color: rgba(31, 67, 208, 0.55);
}

/* image area */
.model-tile__img{
  height: 110px; 
  padding: 10px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-tile__img img{
  max-width: 100%;
  max-height: 100%;
  scale: 1.4;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.14));
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}


/* name */
.model-tile__name{
  margin-top: 30px;      /* ⬅️ KĽÚČOVÉ */
  padding-top: 8px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.2;
}

/* hover */
.model-tile:hover{
  transform: translateY(-2px);

}

/* =========================
   TESTOVACIA JAZDA (sekcia)
   ========================= */

.testdrive{ padding: 70px 0; }

.testdrive .muted{ color: var(--muted); }

.td-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: start;
}

.td-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.td-step{ padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.td-step:first-child{ border-top: 0; padding-top: 0; }
.td-step-title{ margin: 0 0 10px; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; opacity: .95; }

.td-brand{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* reuse .tag styling, len jemne doladiť */
.td-chip.tag{
  padding: 10px 14px;
  border-radius: 999px;
}

.td-chip.is-active{
  border-color: rgba(59,130,246,0.9);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.td-field{ display: grid; gap: 6px; margin-top: 10px; }

.td-label{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  letter-spacing: .02em;
}

.td-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.td-form input,
.td-form select,
.td-form textarea{
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text);
  outline: none;
}

.td-form textarea{ resize: vertical; }

.td-preview-top{ display: grid; gap: 8px; margin-bottom: 12px; }

.td-badge{
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  font-size: 12px;
}

.td-summary{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.td-summary li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
}

.td-summary span{ color: var(--muted); font-size: 13px; }
.td-summary strong{ font-size: 13px; }

.td-tip{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.15);
}

/* brand režim: ak je nastavený data-brand, skry brand výber */
html[data-brand] #jazda #tdBrandRow{ display: none !important; }

/* responsive */
@media (max-width: 980px){
  .td-grid{ grid-template-columns: 1fr; }
  .td-row{ grid-template-columns: 1fr; }
}

.btn.primary.test.testdrive















 

/* =========================
   FINANCOVANIE (v1)
========================= */
:root{ --fin-accent: var(--accent); }


.finance-landing{ position:relative; }

.finance-hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 22px;
}
.finance-kicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.finance-hero h3{ margin:0 0 8px; font-size: 28px; }
.finance-sub{ margin:0 0 14px; color: var(--muted); max-width: 760px; }
.finance-pills{ display:flex; flex-wrap:wrap; gap:8px; }

.finance-hero__meta{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  display:grid;
  gap: 10px;
  align-content:start;
}
.finance-mini{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.10);
}
.finance-dot{
  width: 10px; height: 10px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--fin-accent);
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}


.finance-mini__title{ font-weight: 700; font-size: 13px; }
.finance-mini__text{ color: var(--muted); font-size: 13px; }

.finance-layout{
  display:grid;
  grid-template-columns: 1fr .42fr;
  gap: 18px;
  align-items:start;
}

.finance-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.finance-card{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.finance-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.finance-card h5{ margin:0 0 6px; font-size: 14px; }
.finance-card p{ margin:0; color: var(--muted); font-size: 13px; }

.finance-steps .step-n{ box-shadow: 0 0 0 4px rgba(59,130,246,.12); }


.finance-calc{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.finance-field label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 6px;
}
.finance-field input,
.finance-field select{
  width:100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0e141c;
  color: var(--text);
  font-size: 14px;
}
.finance-field input:focus,
.finance-field select:focus{
  outline:none;
  border-color: var(--fin-accent);
  box-shadow: 0 0 6px rgba(59,130,246,.35);
}


.finance-result{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(600px 300px at 0% 0%, rgba(59,130,246,.10), transparent 60%),
    rgba(255,255,255,.02);
  padding: 14px;
  display:flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}


.finance-result__label{ font-size: 12px; color: var(--muted); }
.finance-result__value{ font-size: 28px; font-weight: 900; letter-spacing: .2px; }
.finance-result__meta{ display:grid; gap: 6px; min-width: 260px; }
.finance-meta-row{ display:flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.finance-meta-row span{ color: var(--muted); }
.finance-meta-row strong{ color: var(--text); }

.finance-docs{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.finance-docs__col{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  padding: 14px;
}
.finance-docs__col h5{ margin:0 0 8px; font-size: 14px; }
.finance-docs__col ul{ margin:0; padding-left: 18px; color: var(--muted); }
.finance-docs__col li{ margin: 6px 0; }



.finance-right{ position: sticky; top: 112px; }

.finance-cta{
  background:
    radial-gradient(600px 360px at 20% 0%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.finance-cta h4{ margin:0 0 6px; font-size: 20px; }
.finance-cta p{ margin:0 0 14px; color: var(--muted); }
.finance-actions{ display:flex; flex-wrap:wrap; gap:10px; }

.finance-info{
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
  display:grid;
  gap: 10px;
}

.finance-lead{
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.finance-lead h4{ margin:0 0 10px; font-size: 18px; }
.finance-form{ display:grid; gap: 12px; }

.finance-form input,
.finance-form textarea{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0e141c;
  color: var(--text);
  font-size: 14px;
}
.finance-form input:focus,
.finance-form textarea:focus{
  outline:none;
  border-color: var(--fin-accent);
  box-shadow: 0 0 6px rgba(59,130,246,.35);
}


.form-status{ color: var(--muted); font-size: 13px; }

.finance-note{
  margin-top: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px;
}
.finance-note h5{ margin:0 0 6px; font-size: 14px; }
.finance-note p{ margin:0; color: var(--muted); font-size: 13px; }

@media (max-width: 1100px){
  .finance-hero{ grid-template-columns: 1fr; }
  .finance-layout{ grid-template-columns: 1fr; }
  .finance-right{ position: static; top:auto; }
}
@media (max-width: 720px){
  .finance-grid{ grid-template-columns: 1fr; }
  .finance-calc{ grid-template-columns: 1fr; }
  .finance-docs{ grid-template-columns: 1fr; }
  .finance-hero h3{ font-size: 24px; }
}






/* =========================
   AUTORIZOVANÝ SERVIS (v2)
========================= */
.service-landing{ position:relative; }
.service-hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 22px;
}
.service-kicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.service-hero h3{ margin:0 0 8px; font-size: 28px; }
.service-sub{ margin:0 0 14px; color: var(--muted); max-width: 720px; }

.service-pills{ display:flex; flex-wrap:wrap; gap:8px; }

.service-hero__meta{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px;
  display:grid;
  gap: 10px;
  align-content:start;
}
.service-mini{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.10);
}
.service-dot{
  width: 10px; height: 10px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}
.service-mini__title{ font-weight: 700; font-size: 13px; }
.service-mini__text{ color: var(--muted); font-size: 13px; }
.service-mini__text a{ color: var(--text); text-decoration:none; }
.service-mini__text a:hover{ text-decoration: underline; }

.service-layout{
  display:grid;
  grid-template-columns: 1fr .42fr;
  gap: 18px;
  align-items:start;
}

.service-block{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 18px;
}
.service-block__head{ margin-bottom: 14px; }
.service-block__head h4{ margin:0 0 6px; font-size: 20px; }
.service-block__head p{ margin:0; color: var(--muted); }

.service-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.service-card{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.service-card h5{ margin:0 0 6px; font-size: 14px; }
.service-card p{ margin:0; color: var(--muted); font-size: 13px; }

/* Steps */
.service-steps{
  list-style:none;
  padding:0;
  margin: 0;
  display:grid;
  gap: 10px;
}
.service-steps li{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.step-n{
  width: 30px; height: 30px;
  border-radius: 10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 800;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}
.step-t strong{ display:block; font-size: 13px; }
.step-t span{ display:block; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* SERVIS PROMO: fixná výška boxu, aby sa nezmenšoval */
#servis .service-promo.promo-slider{
  min-height: 260px;           /* uprav si podľa vzhľadu */
  display: flex;
  align-items: center;
}

/* track nech drží výšku */
#servis .service-promo .promo-track{
  min-height: 240px;           /* o kúsok menej než slider */
  align-items: center;
}

/* obrázky v servise – jednotná výška */
#servis .service-promo.promo-slider img{
  height: 240px;               /* musí ladiť s track */
  width: auto;
  object-fit: cover;
}



/* Promo slider – len v servise (neovplyvní iné použitia) */
.service-promo.promo-slider{
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  padding: 12px 8px;
}
.service-promo .promo-track{
  gap: 12px;
  align-items:center;
}
.service-promo.promo-slider img{
  width: auto;
  height: 350px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .18s ease, border-color .18s ease;
}
.service-promo.promo-slider img:hover{
  transform: translateY(-2px);
  border-color: rgba(34,197,94,.40);
}

/* Lightbox – použije tvoje existujúce triedy */
.service-landing .promo-lightbox .close{
  position:absolute;
  top: 16px;
  right: 24px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
}

/* Right / CTA */
.service-right{ position: sticky; top: 112px; }
.service-cta{
  background:
    radial-gradient(600px 360px at 20% 0%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.service-cta h4{ margin:0 0 6px; font-size: 20px; }
.service-cta p{ margin:0 0 14px; color: var(--muted); }

.service-actions{ display:flex; flex-wrap:wrap; gap:10px; }

.service-info{
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
  display:grid;
  gap: 10px;
}
.info-row strong{ display:block; font-size: 12px; color: var(--muted); }
.info-row span{ display:block; font-size: 13px; color: var(--text); }
.info-row a{ color: var(--text); }
.info-row a:hover{ text-decoration: underline; }

.service-note{
  margin-top: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px;
}
.service-note h5{ margin:0 0 6px; font-size: 14px; }
.service-note p{ margin:0; color: var(--muted); font-size: 13px; }

/* Responsive */
@media (max-width: 1100px){
  .service-hero{ grid-template-columns: 1fr; }
  .service-layout{ grid-template-columns: 1fr; }
  .service-right{ position: static; top:auto; }
}
@media (max-width: 980px){
  .service-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .service-hero h3{ font-size: 24px; }
  .service-grid{ grid-template-columns: 1fr; }
  .service-promo.promo-slider img{ width: 260px; height: 200px; }
}



.promo-hidden{ display:none !important; }

.promo2-empty{
  flex: 0 0 100%;
  padding: 18px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}


/* =========================
   TESTDRIVE – primary button
   ========================= */

:root{ --td-accent: var(--accent); }
html[data-brand="kgm"]{  --td-accent: var(--accent-2); }
html[data-brand="jeep"]{ --td-accent: var(--accent-3); }

.testdrive .btn.td-btn-primary{
  width: 100%;
  margin-top: 40px;
  justify-content: center;

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--td-accent) 55%, transparent);
  color: #fff;

  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  transition: transform .16s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}

.testdrive .btn.td-btn-primary:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--td-accent) 80%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--td-accent) 18%, transparent),
    0 16px 34px rgba(0,0,0,.35);
}

.testdrive .btn.td-btn-primary:active{
  transform: translateY(0);
}

/* =========================
   TESTDRIVE button = car-btn-primary look
   ========================= */

.testdrive .btn.td-btn{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  color: #ffffff;
  box-shadow: none;
  transition: transform .16s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.testdrive .btn.td-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.testdrive .btn.td-btn:active{
  transform: translateY(0px);
}

/* Primary (rovnaké ako .car-btn-primary) */
.testdrive .btn.td-btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border-color: rgba(34,197,94,.38);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

.testdrive .btn.td-btn-primary:hover{
  border-color: rgba(34,197,94,.55);
  box-shadow:
    0 0 0 4px rgba(34,197,94,.12),
    0 16px 34px rgba(0,0,0,.35);
}

/* "Zmeniť značku" – na desktope je ako tlačidlo vpravo (CTA),
   na mobile sa zobrazí ako položka v burger menu */
.nav-links a.nav-brand{
  display: none;           /* default: skryť v desktop nav */
}

.nav-cta a.brand-switch{
  white-space: nowrap;
}

/* Mobile (≤ 680px): položka v burger menu sa zobrazí */
@media (max-width: 680px){
  .nav-links a.nav-brand{
    display: block;
  }
}

/* =========================
   CAR CARD PRO (Ponuka áut)
   ========================= */

.car.car-pro{
  --car-accent-rgb: 59,130,246; /* default */
  background: linear-gradient(180deg, rgba(21,26,34,.92), rgba(21,26,34,1));
  border: 1px solid rgba(35,42,53,.95);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 46px rgba(0,0,0,.38);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer;
}

.car.car-pro:focus{
  outline: none;
}

.car.car-pro:focus-visible{
  box-shadow:
    0 26px 70px rgba(0,0,0,.52),
    0 0 0 2px rgba(var(--car-accent-rgb), .55);
}

.car.car-pro[data-make="jeep"]{ --car-accent-rgb: 59,130,246; }
.car.car-pro[data-make="kgm"]{ --car-accent-rgb: 59,130,246; }
.car.car-pro[data-make="subaru"]{ --car-accent-rgb: 59,130,246; }

.car.car-pro:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--car-accent-rgb), .45);
  box-shadow:
    0 26px 70px rgba(0,0,0,.52),
    0 0 0 1px rgba(var(--car-accent-rgb), .18);
}

/* media */
.car.car-pro .img{
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg,#18202d,#131a24);
}

.car.car-pro .img::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62) 100%);
}

.car.car-pro .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.car.car-pro .img-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color: rgba(152,162,179,.9);
  font-weight:700;
  letter-spacing:.2px;
}

/* overlay badges */
.car.car-pro .car-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.car.car-pro .car-badges{
  position:absolute;
  top:12px;
  left:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width: calc(100% - 90px);
  z-index:2;
}

.car.car-pro .badge{
  background: rgba(11,14,19,.78) !important;  /* tmavšie ako predtým */
  border-color: rgba(255,255,255,.16) !important;
  color: #ffffff !important;                  /* najbielejší text */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  font-weight: bold;
}

.car.car-pro .badge--accent{
  background: rgba(11,14,19,.78) !important;  /* nech je stále tmavé */
  border-color: rgba(var(--car-accent-rgb), .45) !important;
  box-shadow: 0 0 0 1px rgba(var(--car-accent-rgb), .22) inset;
  color: #ffffff !important;
}

.car.car-pro .badge--deal{
  background: rgba(11,14,19,.78) !important;  /* tmavé pozadie aj pre ZĽAVA */
  border-color: rgba(var(--car-accent-rgb), .55) !important;
  box-shadow: 0 0 0 1px rgba(var(--car-accent-rgb), .22) inset;
  color: #ffffff !important;
}

/* gearbox chip (top-right) */
.car.car-pro .gear-chip{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  font-size:12px;
  font-weight:900;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--car-accent-rgb), .42);
  background: rgba(11,14,19,.55);
  backdrop-filter: blur(8px) saturate(150%);
  color: rgb(255, 255, 255);
}

/* body */
.car.car-pro .body{
  padding: 14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

.car.car-pro .car-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.car.car-pro .car-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: 10px;
}

.car.car-pro .car-price{
  text-align:right;
  min-width: 160px;
}

.car.car-pro .price-new{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text-strong);
}

.car.car-pro .price-old{
  margin-top: 3px;
  font-size: 14px;      /* bolo menšie */
  color: var(--muted);
  text-decoration: line-through;
}

/* spec grid 2x2 */
.car.car-pro .car-specgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
   gap: 14px 16px;
}

.car.car-pro .specitem{
  border: 1px solid rgba(35,42,53,.85);
  background: rgba(17,21,27,.55);
  border-radius: 14px;
  padding: 10px 10px;
  overflow:hidden;
}

.car.car-pro .specitem .k{
  font-size: 11px;
  color: var(--muted);
}

.car.car-pro .specitem .v{
  margin-top: 3px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.car.car-pro .specitem--gear .sub{
  margin-top: 3px;
  font-size: 11px;
  font-weight: 900;
  color: rgba(var(--car-accent-rgb), .95);
}

/* actions */
.car.car-pro .car-actions{
  display:flex;
  gap: 10px;
  justify-content: space-between;
  align-items:center;
  margin-top: 2px;
}

.car.car-pro .car-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(35,42,53,.95);
  background: rgba(17,21,27,.85);
  font-weight: 900;
  font-size: 13px;
  transition: transform .12s ease, border-color .18s ease, box-shadow .18s ease;
}

.car.car-pro .car-link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
}

.car.car-pro .car-link.primary{
  border-color: rgba(var(--car-accent-rgb), .42);
  box-shadow: 0 0 0 1px rgba(var(--car-accent-rgb), .18) inset;
}

.car.car-pro .car-link.primary:hover{
  border-color: rgba(var(--car-accent-rgb), .62);
  box-shadow: 0 0 0 1px rgba(var(--car-accent-rgb), .28) inset;
}

/* mobile */
@media (max-width: 680px){
  .car.car-pro .car-head{ flex-direction: column; align-items: flex-start; }
  .car.car-pro .car-price{ text-align:left; min-width: unset; }
  .car.car-pro .car-actions{ justify-content:flex-start; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .car.car-pro{ transition:none !important; }
  .car.car-pro *{ transition:none !important; }
  .car.car-pro:hover{ transform:none !important; }
}

/* TITLE WRAP (aby ellipsis fungoval) */
.car.car-pro .car-titlewrap{
  min-width: 0;
  flex: 1;
}

/* Názov auta 1 riadok */
.car.car-pro .car-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* META riadok (náhrada badges) */
.car.car-pro .car-meta{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .25px;
  color: rgba(255,255,255,.92);
}

.car.car-pro .car-meta .meta-sep{
  color: rgba(255,255,255,.35);
}

.car.car-pro .car-meta .meta-item{
  color: rgba(255,255,255,.92);
}

/* zvýraznenie “Zľava” bez badge/pillu */
.car.car-pro .car-meta .meta-item--deal{
  color: #fff;
  font-weight: 900;
  position: relative;
  padding-left: 10px;
}

.car.car-pro .car-meta .meta-item--deal::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:6px;
  height:6px;
  border-radius:999px;
  background: rgba(var(--car-accent-rgb), .95);
  box-shadow: 0 0 0 2px rgba(var(--car-accent-rgb), .18);
}

/* rok jemne “tech” podčiarknutý */
.car.car-pro .car-meta .meta-item--year{
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: rgba(var(--car-accent-rgb), .65);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* preškrtnutú cenu zväčšiť (ak to ešte nemáš) */
.car.car-pro .price-old{
  margin-top: 3px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
}

/* voliteľné: decentná accent linka v tele karty (nahrádza “badge vibe”) */
.car.car-pro .body{
  position: relative;
}

.car.car-pro .body::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(
    180deg,
    rgba(var(--car-accent-rgb), .0),
    rgba(var(--car-accent-rgb), .85),
    rgba(var(--car-accent-rgb), .0)
  );
  opacity: .9;
  pointer-events:none;
}

/* 1) odstráň modrú (accent) čiaru vľavo */
.car.car-pro .body::before{
  content: none !important;
  display: none !important;
}

/* (ak chceš stále jednotný SUBARU accent pre všetkých) */
.car.car-pro{
  --car-accent-rgb: 59,130,246 !important;
}

/* 2) názov: max 2 riadky (ak sa zmestí, ostane 1) */
.car.car-pro .car-title{
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.25;
  max-width: 100%;
}

/* aby title nezomieral kvôli cene */
.car.car-pro .car-titlewrap{ min-width: 0; }
.car.car-pro .car-price{
  min-width: 132px;     /* viac miesta pre názov */
  white-space: nowrap;
}

/* 3) META: zväčšiť rok aj zľavu */
.car.car-pro .car-meta{
  font-size: 12px;
  color: rgba(255,255,255,.94);
}

.car.car-pro .car-meta .meta-item--year,
.car.car-pro .car-meta .meta-item--deal{
  font-size: 13px;
  font-weight: 900;
}

/* detail hodnoty (2024 a 2 000 €) ešte väčší */
.car.car-pro .car-meta .year-val,
.car.car-pro .car-meta .deal-amount{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;
}

/* 4) preškrtnutú cenu nechaj väčšiu (ak už máš, môže ostať) */
.car.car-pro .price-old{
  font-size: 14px;
}

/* =========================
   PROMO2 SLIDER (Hero → Ponuka)
   ========================= */
.promo2{
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--line);
  
}

.promo2-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 25px;
}

.promo2-title{
  
  margin: 0;
  font-size: 22px;
  letter-spacing: .2px;
}

.promo2-sub{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.promo2-controls{
  display:flex;
  gap:10px;
  flex-shrink: 0;
}

.promo2-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: #fff;
  cursor: pointer;
  display:grid;
  place-items:center;
  font-size: 22px;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.promo2-btn:hover{ transform: translateY(-1px); border-color: #2a3443; }
.promo2-btn:active{ transform: translateY(0px); }

.promo2-shell{
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 420px at 18% 15%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 420px at 88% 10%, rgba(245,158,11,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.promo2-viewport{
  overflow:hidden;
}

.promo2-track{
  display:flex;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.promo2-slide{
  flex: 0 0 100%;
  
}

.promo2-card{
  position: relative;
  display:block;
  height: 320px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #0e131a;
  box-shadow: var(--shadow-soft);
  transform: translateZ(0);
}

.promo2-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}

.promo2-card:hover .promo2-img{
  transform: scale(1.07);
}

.promo2-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0) 40%),
    linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}

.promo2-meta{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display:flex;
  flex-direction: column;
  gap: 15px;
}



.promo2-name{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: .2px;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.promo2-cta{
  margin-top: 2px;
  display:inline-flex;
  width: fit-content;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,14,19,.55);
  backdrop-filter: blur(8px) saturate(160%);
  font-size: 13px;
  font-weight: 700;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.promo2-card:hover .promo2-cta{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  background: rgba(11,14,19,.68);
}

/* dots */
.promo2-dots{
  display:flex;
  gap: 8px;
  justify-content:center;
  padding: 12px 0 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.01);
}

.promo2-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, width .2s ease, border-color .2s ease;
}
.promo2-dot:hover{ transform: scale(1.15); }
.promo2-dot.is-active{
  width: 28px;
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.32);
}

/* Responzívne */
@media (max-width: 680px){
  .promo2-title{ font-size: 20px; }
  .promo2-card{ height: 240px; }
  .promo2-slide{ padding: 12px; }
}

/* Zruš čiary nad a pod promo sliderom */
.hero{ border-bottom: 0 !important; }          /* čiara nad sliderom */
.promo2{ border-top: 0 !important; border-bottom: 0 !important; }  /* čiara pod sliderom */

/* Ak by čiara bola priamo z rámika slidera (promo2-shell), vypni len hornú/spodnú hranu */
.promo2-shell{ border-top: 0 !important; border-bottom: 0 !important; }

/* PROMO2 – klik má ísť na kartu/fotku (nie na overlay) */
.promo2-overlay{ pointer-events: none; }

/* Text nech neblokuje klik na fotku (okrem CTA) */
.promo2-meta{ pointer-events: none; }
.promo2-cta{ pointer-events: auto; cursor: pointer; }

/* UX: nech je jasné, že sa dá zväčšiť */
.promo2-card{ cursor: zoom-in; }
.promo2-cta{ cursor: pointer; }

body.promo2-lock{ overflow: hidden; }

.promo2-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px) saturate(150%);
  z-index: 9999;
}
.promo2-lightbox.is-open{ display:flex; }

.promo2-lightbox__panel{
  width: min(1280px, 96vw);
  max-height: 92vh;
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.10);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.promo2-lightbox__img{
  display:block;
  width:100%;
  height:auto;
  max-height:92vh;
  object-fit: contain;
  background:#0b0e13;
}
.promo2-lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(17,21,27,.65);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
}

.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1);
}

.hero-img.active {
  opacity: 1;
}

/* =========================
   SERVIS (v2) – MOBILE/TABLET FIX
   (append na koniec style.css)
========================= */

@media (max-width: 980px){
  /* v praxi je 2-stĺpcový grid už príliš tesný -> 1 stĺpec skôr */
  #servis .service-grid{ grid-template-columns: 1fr; }

  /* CTA box nech je prirodzene čitateľný */
  #servis .service-cta{ padding: 16px; }
  #servis .service-actions{ flex-direction: column; }
  #servis .service-actions .btn{ width: 100%; justify-content: center; }
}

@media (max-width: 720px){
  /* kompaktnejšie bloky */
  #servis .service-hero{ padding: 16px; border-radius: 16px; }
  #servis .service-block{ padding: 14px; border-radius: 16px; }
  #servis .service-block__head h4{ font-size: 18px; }

  /* kroky – menej “nafúknuté” */
  #servis .service-steps li{ padding: 12px; border-radius: 14px; }
  #servis .step-n{ width: 28px; height: 28px; border-radius: 10px; }

  /* pills – na mobile radšej horizontálny scroll než lámanie do 3 riadkov */
  #servis .service-pills{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 6px;
  }
  #servis .service-pills::-webkit-scrollbar{ display:none; }
  #servis .service-pills .pill{ white-space: nowrap; }

  /* PROMO slider v servise – najčastejší problém na mobile:
     fixné min-height a veľké obrázky -> nepôsobí responsive */
  #servis .service-promo.promo-slider{
    max-width: 100%;
    padding: 10px 0;
    min-height: 0 !important;
  }
  #servis .service-promo .promo-track{
    min-height: 0 !important;
    gap: 10px;
  }

  /* obrázok nech je “mobilný” (konzistentná veľkosť, bez čudných skokov) */
  #servis .service-promo.promo-slider img{
    width: min(86vw, 420px);
    height: min(56vw, 260px);
    object-fit: cover;
    border-radius: 12px;
  }

  /* šípky – menšie, aby nezavadzali */
  #servis .service-promo .promo-btn{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
  }
  #servis .service-promo .promo-btn.prev{ left: 10px; }
  #servis .service-promo .promo-btn.next{ right: 10px; }
}

@media (max-width: 420px){
  #servis .service-hero h3{ font-size: 22px; }
  #servis .service-sub{ font-size: 13px; }
}

/* =========================
   #SERVIS – FIX HORIZONTAL OVERFLOW (MOBILE)
   vlož ÚPLNE NA KONIEC style.css
========================= */

/* 1) ak niečo aj tak pretečie (shadow/transform), nech to nevyrobí stránke scroll */
#servis { overflow-x: clip; }

/* 2) grid položky musia vedieť shrinknúť (inak dlhý text roztiahne layout) */
#servis .service-layout,
#servis .service-left,
#servis .service-right,
#servis .service-hero,
#servis .service-block,
#servis .service-cta {
  min-width: 0;
  max-width: 100%;
}

/* 3) e-maily/linky musia vedieť zalomiť */
#servis .service-info,
#servis .info-row,
#servis .info-row span,
#servis .info-row a {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) promo wrapper nech nikdy nepresiahne šírku kontajnera */
#servis .promo-slider.service-promo { width: 100%; max-width: 100%; }

/* ===== MOBILE ===== */
@media (max-width: 720px){

  /* pills radšej scroll než rozbíjanie layoutu */
  #servis .service-pills{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 6px;
  }
  #servis .service-pills::-webkit-scrollbar{ display:none; }

  /* promo scroll nech robí TRACK (kvôli tvojmu JS: track.scrollBy) */
  #servis .service-promo .promo-track{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 2px 4px 8px;
    max-width: 100%;
  }
  #servis .service-promo .promo-track::-webkit-scrollbar{ display:none; }

  /* prepíš problémové desktop pravidlo: width:auto (to je častý zdroj overflowu) */
  #servis .service-promo.promo-slider img{
    width: min(86vw, 420px);
    height: min(54vw, 260px);
    max-width: 100%;
    object-fit: cover;
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-radius: 12px;
  }

  /* aby slider box nepôsobil „nafúknuto“ */
  #servis .service-promo.promo-slider{
    padding: 10px 0;
    min-height: 0 !important;
  }
}