/* =========================================================

   Autodoprava Jeřábek – Stylesheet

   ========================================================= */



/* ---------- Reset & Base ---------- */

*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



/* ---------- Rigel Star Font ---------- */

@font-face {

  font-family: 'Rigel Star';

  src: url('font/RigelStarRegular-mLl8a.otf') format('opentype');

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Rigel Star';

  src: url('font/RigelStarItalic-d9KyE.otf') format('opentype');

  font-weight: 400;

  font-style: italic;

  font-display: swap;

}



:root {

  /* Palette */

  --c-bg: #0b0f19;

  --c-bg-alt: #111827;

  --c-surface: #1a2233;

  --c-primary: #3b82f6;

  --c-primary-light: #60a5fa;

  --c-accent: #f59e0b;

  --c-text: #e2e8f0;

  --c-text-muted: #94a3b8;

  --c-white: #ffffff;



  /* Typography */

  --ff: 'Rigel Star', sans-serif;

  --ff-body: 'Inter', sans-serif;



  /* Geometry */

  --nav-h: 72px;

  --radius: 12px;

  --transition: 0.35s cubic-bezier(.4, 0, .2, 1);

}



html {

  scroll-behavior: smooth;

  scroll-padding-top: var(--nav-h);

}



body {

  font-family: var(--ff-body);

  background: var(--c-bg);

  color: var(--c-text);

  line-height: 1.6;

  overflow-x: hidden;

}



/* Display font for major headings & titles */

h1,

h2,

.hero__title,

.hero__subtitle,

.section__title,

.section__tag,

.fleet__title,

.stat__number,

.stat__label,

.loader__text,

.subpage-hero__title,

.calc-section__title,

.rental-hero__title,

.footer__address,

.footer__ico {

  font-family: var(--ff);

}



/* ---------- Page Transition ---------- */

.page-transition {

  position: fixed;

  inset: 0;

  z-index: 99999;

  background: var(--c-bg);

  pointer-events: all;

  opacity: 1;

  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);

}



.page-transition--hide {

  opacity: 0;

  pointer-events: none;

}



.page-transition--show {

  opacity: 1;

  pointer-events: all;

}



a {

  color: inherit;

  text-decoration: none;

}



img {

  max-width: 100%;

  display: block;

}



/* ---------- Loader ---------- */

.loader {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: var(--c-bg);

  transition: opacity .6s ease, visibility .6s ease;

}



.loader.hidden {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.loader__ring {

  width: 56px;

  height: 56px;

  border: 4px solid var(--c-surface);

  border-top-color: var(--c-primary);

  border-radius: 50%;

  animation: spin .9s linear infinite;

}



@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}



.loader__text {

  margin-top: 20px;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--c-text-muted);

}



/* ---------- Navbar ---------- */

.navbar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  height: var(--nav-h);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 clamp(1.25rem, 4vw, 3rem);

  z-index: 10000;

  transition: background var(--transition), box-shadow var(--transition);

}



.navbar.scrolled {

  background: rgba(11, 15, 25, .92);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 1px 24px rgba(0, 0, 0, .35);

}



.navbar__logo {

  display: flex;

  align-items: center;

}



.navbar__logo-img {

  height: 48px;

  width: auto;

  filter: invert(1);

  transition: opacity var(--transition);

}



.navbar__logo-img:hover {

  opacity: .8;

}



/* Hamburger */

.navbar__toggle {

  display: none;

  flex-direction: column;

  gap: 5px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 6px;

  z-index: 10010;

}



.navbar__toggle span {

  display: block;

  width: 26px;

  height: 2px;

  background: var(--c-white);

  border-radius: 2px;

  transition: var(--transition);

  transform-origin: center;

}



.navbar__toggle.open span:nth-child(1) {

  transform: translateY(7px) rotate(45deg);

}



.navbar__toggle.open span:nth-child(2) {

  opacity: 0;

}



.navbar__toggle.open span:nth-child(3) {

  transform: translateY(-7px) rotate(-45deg);

}



/* Menu */

.navbar__menu {

  list-style: none;

  display: flex;

  gap: 2rem;

}



.navbar__link {

  position: relative;

  font-size: .95rem;

  font-weight: 500;

  letter-spacing: .5px;

  padding: 6px 0;

  color: var(--c-text-muted);

  transition: color var(--transition);

}



.navbar__link::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 2px;

  background: var(--c-primary);

  border-radius: 2px;

  transition: width var(--transition);

}



.navbar__link:hover,

.navbar__link.active {

  color: var(--c-white);

}



.navbar__link.active::after,

.navbar__link:hover::after {

  width: 100%;

}



/* ---------- Hero ---------- */

.hero {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  overflow: hidden;

}



.hero__bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  filter: blur(3px) brightness(.55);

  transform: scale(1.08);

  transition: transform 12s ease;

}



.hero:hover .hero__bg {

  transform: scale(1.0);

}



.hero__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg,

      rgba(11, 15, 25, .50) 0%,

      rgba(11, 15, 25, .80) 100%);

}



.hero__content {

  position: relative;

  z-index: 2;

  max-width: 900px;

  padding: 0 1.5rem;

}



.hero__title {

  font-size: clamp(2.2rem, 5.5vw, 4rem);

  font-weight: 900;

  letter-spacing: 1px;

  line-height: 1.2;

  padding-top: 0.3em;

  padding-bottom: 0.1em;

  margin-top: -0.3em;

  margin-bottom: 0.5rem;

  background: linear-gradient(135deg, var(--c-white) 40%, var(--c-primary-light));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.hero__subtitle {

  font-size: clamp(1.1rem, 2.5vw, 1.5rem);

  font-weight: 300;

  color: var(--c-text-muted);

  margin-bottom: 2.5rem;

  letter-spacing: 4px;

  text-transform: uppercase;

}



.hero__tagline {

  font-size: .95rem;

  color: rgba(148, 163, 184, .7);

  letter-spacing: 1px;

  margin-bottom: 2.5rem;

}



/* Buttons */

.hero__buttons {

  display: flex;

  gap: 1rem;

  justify-content: center;

  flex-wrap: wrap;

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: .85rem 2rem;

  font-family: var(--ff-body);

  font-size: .95rem;

  font-weight: 600;

  border-radius: 50px;

  cursor: pointer;

  transition: var(--transition);

  border: 2px solid transparent;

}



.btn--primary {

  background: var(--c-primary);

  color: var(--c-white);

  border-color: var(--c-primary);

}



.btn--primary:hover {

  background: var(--c-primary-light);

  border-color: var(--c-primary-light);

  transform: translateY(-2px);

  box-shadow: 0 8px 28px rgba(59, 130, 246, .35);

}



.btn--outline {

  background: transparent;

  color: var(--c-white);

  border-color: rgba(255, 255, 255, .3);

}



.btn--outline:hover {

  background: rgba(255, 255, 255, .08);

  border-color: var(--c-white);

  transform: translateY(-2px);

}



/* Scroll arrow */

.hero__scroll {

  position: absolute;

  bottom: 2rem;

  left: 50%;

  transform: translateX(-50%);

  z-index: 2;

  color: var(--c-text-muted);

  animation: bounce 2s infinite;

}



@keyframes bounce {



  0%,

  100% {

    transform: translateX(-50%) translateY(0);

  }



  50% {

    transform: translateX(-50%) translateY(10px);

  }

}



/* ---------- Stats (inside hero) ---------- */

.stats__grid {

  display: flex;

  gap: 1.5rem;

  max-width: 900px;

  margin: 3rem auto 0;

  position: relative;

  z-index: 2;

}



.stat {

  flex: 1;

  text-align: center;

  padding: 1.5rem 1rem;

  border-radius: 14px;

  background: rgba(255, 255, 255, .05);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, .08);

  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;

}



.stat:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);

  border-color: rgba(59, 130, 246, .15);

}



.stat__number {

  display: block;

  font-size: clamp(2rem, 4.5vw, 3rem);

  font-weight: 800;

  white-space: nowrap;

  color: var(--c-white);

  line-height: 1.2;

  padding-top: 0.3em;

  padding-bottom: 0.1em;

  margin-top: -0.3em;

  margin-bottom: 0.5rem;

  background: linear-gradient(135deg, var(--c-white) 30%, var(--c-primary-light));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.stat__label {

  display: block;

  font-size: .8rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--c-text-muted);

  line-height: 1.5;

}



/* Staggered reveal */

.stat.reveal:nth-child(2) {

  transition-delay: .1s;

}



.stat.reveal:nth-child(3) {

  transition-delay: .2s;

}



@media (max-width: 600px) {

  .stats__grid {

    grid-template-columns: 1fr;

    gap: 1rem;

  }

}



/* ---------- Sections ---------- */

.section {

  padding: 6rem 1.5rem;

}



.section--services {

  background: var(--c-bg-alt);

}



.section--services .container {

  text-align: center;

  margin-bottom: 3rem;

}



/* Services Grid */

.services-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.5rem;

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



/* Service Card */

.service-card {

  background: var(--c-surface);

  border: 1px solid rgba(255, 255, 255, .06);

  border-radius: 16px;

  padding: 2.2rem 1.8rem;

  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;

  position: relative;

  overflow: hidden;

}



.service-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));

  opacity: 0;

  transition: opacity .35s ease;

}



.service-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 16px 48px rgba(0, 0, 0, .35), 0 0 0 1px rgba(59, 130, 246, .12);

  border-color: rgba(59, 130, 246, .15);

}



.service-card:hover::before {

  opacity: 1;

}



/* Staggered reveal delays */

.service-card:nth-child(2) {

  transition-delay: .05s;

}



.service-card:nth-child(3) {

  transition-delay: .1s;

}



.service-card:nth-child(4) {

  transition-delay: .15s;

}



.service-card:nth-child(5) {

  transition-delay: .2s;

}



/* Card Icon */

.service-card__icon {

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 14px;

  background: linear-gradient(135deg, rgba(59, 130, 246, .15), rgba(245, 158, 11, .1));

  margin-bottom: 1.4rem;

}



.service-card__icon svg {

  width: 26px;

  height: 26px;

  stroke: var(--c-primary-light);

}



/* Card Title */

.service-card__title {

  font-size: 1.15rem;

  font-weight: 700;

  margin-bottom: .75rem;

  color: var(--c-white);

}



/* Card Description */

.service-card__desc {

  font-size: .92rem;

  line-height: 1.7;

  color: var(--c-text-muted);

}



/* Responsive: 2 columns on tablet, 1 on mobile */

@media (max-width: 900px) {

  .services-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .services-grid {

    grid-template-columns: 1fr;

    gap: 1.25rem;

  }

}



/* ---------- Partners / Marquee ---------- */

.section--partners {

  background: var(--c-bg-alt);

  padding-bottom: 4rem;

  overflow: hidden;

}



.section--partners .container {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  margin-bottom: 2.5rem;

  padding: 0 1.5rem;

}



.marquee {

  position: relative;

  width: 100%;

  overflow: hidden;

  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);

  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);

}



.marquee__track {

  display: flex;

  align-items: center;

  width: max-content;

  animation: marquee-scroll 60s linear infinite;

  gap: 0;

}



.marquee__group {

  display: flex;

  align-items: center;

  gap: 7rem;

  padding-right: 7rem;

  flex-shrink: 0;

}



@media (max-width: 768px) {

  .marquee__group {

    gap: 3.5rem;

    padding-right: 3.5rem;

  }

}



.marquee__logo {

  height: 55px;

  width: auto;

  object-fit: contain;

  flex-shrink: 0;

}





.marquee__logo--large {

  height: 70px;

}



@keyframes marquee-scroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

  }

}



/* ---------- Fleet / Vozový park – Fullscreen Cinematic Slider ---------- */

.fleet {

  position: relative;

  background: var(--c-bg);

  overflow: hidden;

}



.fleet__header {

  text-align: center;

  padding: 4rem 1.5rem 2rem;

  position: relative;

  z-index: 3;

}



.fleet__title {

  font-size: clamp(1.6rem, 3.5vw, 2.6rem);

  font-weight: 800;

  line-height: 1.2;

  padding-top: 0.3em;

  padding-bottom: 0.1em;

  margin-top: -0.3em;

  margin-bottom: -0.1em;

  background: linear-gradient(135deg, var(--c-white) 40%, var(--c-primary-light));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



/* Slider container */

.fleet-slider {

  position: relative;

  width: 100%;

  height: 75vh;

  min-height: 500px;

  max-height: 800px;

}



/* Track : stacks all slides */

.fleet-slider__track {

  position: relative;

  width: 100%;

  height: 100%;

}



/* Individual slide – layered on top of each other */

.fleet-slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity .8s ease-in-out;

  z-index: 1;

  overflow: hidden;

}



.fleet-slide.active {

  opacity: 1;

  z-index: 2;

}



/* Blurred backdrop – always present, visible only for portrait */

.fleet-slide__blur {

  position: absolute;

  inset: -30px;

  width: calc(100% + 60px);

  height: calc(100% + 60px);

  object-fit: cover;

  filter: blur(30px) brightness(.35);

  z-index: 0;

  display: none;

}



.fleet-slide.portrait .fleet-slide__blur {

  display: block;

}



/* Main image */

.fleet-slide__img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  z-index: 1;

}



/* Portrait: contain the image so it's fully visible */

.fleet-slide.portrait .fleet-slide__img {

  object-fit: contain;

}



/* Ken Burns on the main image */

.fleet-slide.active .fleet-slide__img {

  animation: fleetKenBurns 5s ease-in-out forwards;

}



@keyframes fleetKenBurns {

  0% {

    transform: scale(1);

  }



  100% {

    transform: scale(1.15);

  }

}



/* Bottom gradient overlay for each slide */

.fleet-slide__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg,

      rgba(11, 15, 25, .85) 0%,

      rgba(11, 15, 25, .15) 40%,

      rgba(11, 15, 25, .05) 60%,

      rgba(11, 15, 25, .3) 100%);

  pointer-events: none;

  z-index: 2;

}



/* Placeholder (before real images) */

.fleet-slide__placeholder {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  color: rgba(148, 163, 184, .3);

  z-index: 1;

}



.fleet-slide__placeholder svg {

  stroke: rgba(148, 163, 184, .2);

}



.fleet-slide__placeholder span {

  font-size: .9rem;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

}



/* Arrows – minimal, elegant, positioned over the slides */

.fleet-slider__arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, .06);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, .1);

  border-radius: 50%;

  color: var(--c-white);

  cursor: pointer;

  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;

}



.fleet-slider__arrow--prev {

  left: clamp(1rem, 3vw, 2.5rem);

}



.fleet-slider__arrow--next {

  right: clamp(1rem, 3vw, 2.5rem);

}



.fleet-slider__arrow:hover {

  background: rgba(59, 130, 246, .25);

  border-color: rgba(59, 130, 246, .4);

  transform: translateY(-50%) scale(1.08);

  box-shadow: 0 4px 20px rgba(59, 130, 246, .2);

}



/* Dots – subtle, at the bottom */

.fleet-slider__dots {

  position: absolute;

  bottom: 2rem;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  display: flex;

  gap: .6rem;

}



.fleet-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: rgba(255, 255, 255, .25);

  border: none;

  cursor: pointer;

  transition: background .3s ease, transform .3s ease, width .3s ease;

  padding: 0;

}



.fleet-dot:hover {

  background: rgba(255, 255, 255, .5);

}



.fleet-dot.active {

  background: var(--c-white);

  width: 24px;

  border-radius: 4px;

}



/* Slide counter – bottom right */

.fleet-slider__counter {

  position: absolute;

  bottom: 2rem;

  right: clamp(1rem, 3vw, 2.5rem);

  z-index: 10;

  display: flex;

  align-items: baseline;

  gap: .3rem;

  font-family: var(--ff);

}



.fleet-slider__current {

  font-size: 1.4rem;

  font-weight: 700;

  color: var(--c-white);

}



.fleet-slider__sep {

  font-size: .9rem;

  font-weight: 400;

  color: rgba(255, 255, 255, .3);

  margin: 0 .15rem;

}



.fleet-slider__total {

  font-size: .9rem;

  font-weight: 500;

  color: rgba(255, 255, 255, .4);

}



/* Responsive */

@media (max-width: 768px) {

  .fleet-slider {

    height: 60vh;

    min-height: 380px;

  }



  .fleet-slider__arrow {

    width: 42px;

    height: 42px;

  }



  .fleet__header {

    padding: 3rem 1.25rem 1.5rem;

  }

}



@media (max-width: 480px) {

  .fleet-slider {

    height: 50vh;

    min-height: 320px;

  }



  .fleet-slider__arrow {

    width: 36px;

    height: 36px;

  }



  .fleet-slider__counter {

    display: none;

  }

}



.section--contact {

  background: var(--c-bg);

}



.container {

  max-width: 900px;

  margin: 0 auto;

}



.section__tag {

  display: inline-block;

  font-size: .75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 3px;

  color: var(--c-primary);

  margin-bottom: .75rem;

}



.section__title {

  font-size: clamp(1.1rem, 8vw, 2.8rem);

  font-weight: 800;

  margin-bottom: 1.5rem;

  line-height: 1.15;

  text-align: center;

}



.mobile-break {

  display: none;

}



@media (max-width: 480px) {

  .mobile-break {

    display: block;

  }



  .section__title {

    font-size: 1.5rem !important;

  }



  .section--partners .container {

    padding: 0 0.5rem;

  }

}



/* ---------- Contact Form ---------- */

.contact-form {

  max-width: 600px;

  margin: 0 auto 3rem;

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.contact-form__group {

  display: flex;

  flex-direction: column;

  gap: .45rem;

}



.contact-form__label {

  font-size: .8rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--c-text-muted);

}



.contact-form__input {

  width: 100%;

  padding: .9rem 1.15rem;

  font-family: var(--ff-body);

  font-size: 1rem;

  color: var(--c-text);

  background: var(--c-surface);

  border: 1.5px solid rgba(255, 255, 255, .08);

  border-radius: var(--radius);

  outline: none;

  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);

}



.contact-form__input::placeholder {

  color: rgba(148, 163, 184, .5);

}



.contact-form__input:hover {

  border-color: rgba(255, 255, 255, .16);

  background: rgba(26, 34, 51, .85);

}



.contact-form__input:focus {

  border-color: var(--c-primary);

  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);

  background: rgba(26, 34, 51, .95);

}



.contact-form__textarea {

  resize: vertical;

  min-height: 130px;

}



.contact-form__submit {

  align-self: flex-start;

  margin-top: .5rem;

}



/* Form Sending & Success States */

.form-sending {

  pointer-events: none;

}



.btn-spinner {

  display: inline-block;

  width: 16px;

  height: 16px;

  border: 2px solid rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  border-top-color: #fff;

  animation: spin 1s ease-in-out infinite;

  margin-right: 8px;

}



@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}



.form-success {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 3rem 1rem;

  background: rgba(26, 34, 51, 0.4);

  border: 1px solid rgba(59, 130, 246, 0.15);

  border-radius: var(--radius);

  animation: fadeInForm 0.5s ease;

}



.form-success__icon {

  width: 64px;

  height: 64px;

  color: #10b981;

  /* Emerald green */

  margin-bottom: 1.5rem;

}



.form-success__title {

  font-family: var(--ff);

  font-size: 1.5rem;

  color: var(--c-white);

  margin-bottom: 0.5rem;

}



.form-success__text {

  color: var(--c-text-muted);

}



@keyframes fadeInForm {

  from {

    opacity: 0;

    transform: translateY(10px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Animated Checkmark */

.success-check {

  width: 100%;

  height: 100%;

}



.success-circle {

  stroke-dasharray: 100;

  stroke-dashoffset: 100;

  animation: circleDraw 0.8s ease-out forwards;

}



.success-path {

  stroke-dasharray: 20;

  stroke-dashoffset: 20;

  animation: pathDraw 0.4s ease-out forwards 0.5s;

}



@keyframes circleDraw {

  from {

    stroke-dashoffset: 100;

  }



  to {

    stroke-dashoffset: 0;

  }

}



@keyframes pathDraw {

  from {

    stroke-dashoffset: 20;

  }



  to {

    stroke-dashoffset: 0;

  }

}



/* ---------- Phone CTA ---------- */

.contact-phone {

  text-align: center;

  margin-top: 1rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

}



.contact-email__btn {

  font-size: 1rem;

  background: transparent;

  border: 2px solid var(--c-primary);

  color: var(--c-white);

  box-shadow: none;

}



.contact-email__btn:hover {

  background: linear-gradient(135deg, var(--c-primary), #2563eb);

  box-shadow: 0 4px 20px rgba(59, 130, 246, .25);

}



.contact-phone__label {

  font-size: .9rem;

  color: var(--c-text-muted);

  margin-bottom: 1rem;

}



.contact-phone__btn {

  display: inline-flex;

  align-items: center;

  gap: .75rem;

  padding: 1.1rem 2.8rem;

  font-family: var(--ff-body);

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--c-white);

  background: linear-gradient(135deg, var(--c-primary), #2563eb);

  border-radius: 60px;

  letter-spacing: 1px;

  transition: var(--transition);

  box-shadow: 0 4px 20px rgba(59, 130, 246, .25);

}



.contact-phone__btn:hover {

  transform: translateY(-3px) scale(1.03);

  box-shadow: 0 10px 36px rgba(59, 130, 246, .4);

  background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));

}



.contact-phone__icon {

  flex-shrink: 0;

}



/* ---------- Reveal animation ---------- */

.reveal {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity .8s ease, transform .8s ease;

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



/* ---------- Footer ---------- */

.footer {

  text-align: center;

  padding: 2.5rem 1rem;

  font-size: .85rem;

  color: var(--c-text-muted);

  border-top: 1px solid rgba(255, 255, 255, .06);

}



.footer__socials {

  display: flex;

  justify-content: center;

  gap: 1rem;

  margin-bottom: 1.25rem;

}



.footer__social-link {

  color: var(--c-text-muted);

  transition: color var(--transition), transform var(--transition);

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.footer__social-link:hover {

  color: var(--c-white);

  transform: translateY(-2px);

}



.footer__email {

  color: var(--c-primary-light);

  font-weight: 500;

  transition: color .2s ease;

}



.footer__email:hover {

  color: var(--c-white);

}



.footer__address {

  line-height: 1.6;

  margin-bottom: .25rem;

}



.footer__ico {

  font-size: .8rem;

  color: rgba(148, 163, 184, .6);

  margin-bottom: .5rem;

}



/* ---------- Mobile Menu Overlay ---------- */

.mobile-menu {

  display: none;

}



@media (max-width: 768px) {

  .navbar__toggle {

    display: flex;

  }



  .navbar__menu--desktop {

    display: none !important;

  }



  .mobile-menu {

    display: block;

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    z-index: 99999;

    background: #0b0f19;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity .35s ease, visibility .35s ease;

  }



  .mobile-menu.open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

  }



  .mobile-menu__close {

    position: absolute;

    top: 1.25rem;

    right: 1.25rem;

    background: none;

    border: none;

    color: var(--c-text-muted);

    cursor: pointer;

    padding: 8px;

    transition: color .2s ease;

  }



  .mobile-menu__close:hover {

    color: var(--c-white);

  }



  .mobile-menu__list {

    list-style: none;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    gap: 2.5rem;

  }



  .mobile-menu__list .navbar__link {

    font-size: 1.3rem;

  }



  .section {

    padding: 4rem 1.25rem;

  }

}



/* ---------- Services Express Note ---------- */

.services-express {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  max-width: 720px;

  margin: 3rem auto 0;

  padding: 1.5rem 2rem;

  background: rgba(245, 158, 11, .06);

  border: 1px solid rgba(245, 158, 11, .12);

  border-radius: 14px;

}



.services-express__icon {

  width: 24px;

  height: 24px;

  flex-shrink: 0;

  stroke: var(--c-accent);

  margin-top: 2px;

}



.services-express__text {

  font-size: .92rem;

  line-height: 1.7;

  color: var(--c-text-muted);

}



.services-express__text strong {

  color: var(--c-white);

  font-weight: 600;

}



/* ---------- Service Card as Link ---------- */

.service-card--link {

  display: block;

  cursor: pointer;

  text-decoration: none;

  color: inherit;

}



.service-card--link:hover .service-card__title {

  color: var(--c-primary-light);

}



.service-card__btn {

  display: inline-block;

  margin-top: 1.5rem;

  font-size: .95rem;

  font-weight: 700;

  color: var(--c-primary-light);

  letter-spacing: .5px;

  padding: .7rem 1.6rem;

  border: 1.5px solid rgba(59, 130, 246, .3);

  border-radius: 10px;

  background: rgba(59, 130, 246, .06);

  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;

}



.service-card--link:hover .service-card__btn {

  color: var(--c-white);

  background: rgba(59, 130, 246, .18);

  border-color: rgba(59, 130, 246, .5);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(59, 130, 246, .2);

}



/* ---------- Subpage Navigation ---------- */

.subpage-nav {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  height: var(--nav-h);

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 clamp(1.25rem, 4vw, 3rem);

  z-index: 10000;

  background: rgba(11, 15, 25, .92);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 1px 24px rgba(0, 0, 0, .35);

}



.subpage-nav__back {

  display: inline-flex;

  align-items: center;

  gap: .5rem;

  font-size: .9rem;

  font-weight: 500;

  color: var(--c-text-muted);

  transition: color var(--transition);

}



.subpage-nav__back:hover {

  color: var(--c-white);

}



/* ---------- Subpage Hero ---------- */

.subpage-hero {

  position: relative;

  min-height: 38vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  overflow: hidden;

  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);

  padding-top: var(--nav-h);

}



.subpage-hero--van {

  background: linear-gradient(135deg, #0f172a 0%, #1a2744 50%, #0f172a 100%);

}



.subpage-hero__overlay {

  position: absolute;

  inset: 0;

  background: radial-gradient(ellipse at 30% 50%, rgba(59, 130, 246, .12) 0%, transparent 60%),

    radial-gradient(ellipse at 70% 50%, rgba(245, 158, 11, .08) 0%, transparent 60%);

  pointer-events: none;

}



.subpage-hero__content {

  position: relative;

  z-index: 2;

  max-width: 680px;

  padding: 2rem 1.5rem;

}



.subpage-hero__title {

  font-size: clamp(1.5rem, 3.5vw, 2.2rem);

  font-weight: 800;

  letter-spacing: -.5px;

  line-height: 1.2;

  margin-bottom: .6rem;

  background: linear-gradient(135deg, var(--c-white) 40%, var(--c-primary-light));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.subpage-hero__subtitle {

  font-size: clamp(.9rem, 1.8vw, 1.05rem);

  font-weight: 300;

  color: var(--c-text-muted);

  letter-spacing: .5px;

  line-height: 1.65;

}



/* ---------- Subpage Sections ---------- */

.subpage-section {

  padding: 5rem 1.5rem;

}



.subpage-section .container {

  text-align: center;

  margin-bottom: 2.5rem;

}



.subpage-section--alt {

  background: var(--c-bg-alt);

}



.subpage-intro__text {

  font-size: 1.05rem;

  line-height: 1.8;

  color: var(--c-text-muted);

  max-width: 720px;

  margin: 0 auto 1.5rem;

  text-align: center;

}



.subpage-intro__text:last-child {

  margin-bottom: 0;

}



/* ---------- Benefits Grid ---------- */

.benefits-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.5rem;

  max-width: 900px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



.benefit-card {

  background: var(--c-surface);

  border: 1px solid rgba(255, 255, 255, .06);

  border-radius: 16px;

  padding: 2.2rem 1.8rem;

  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;

  position: relative;

  overflow: hidden;

}



.benefit-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));

  opacity: 0;

  transition: opacity .35s ease;

}



.benefit-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 16px 48px rgba(0, 0, 0, .35), 0 0 0 1px rgba(59, 130, 246, .12);

  border-color: rgba(59, 130, 246, .15);

}



.benefit-card:hover::before {

  opacity: 1;

}



.benefit-card:nth-child(2) {

  transition-delay: .05s;

}



.benefit-card:nth-child(3) {

  transition-delay: .1s;

}



.benefit-card:nth-child(4) {

  transition-delay: .15s;

}



.benefit-card__icon {

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 14px;

  background: linear-gradient(135deg, rgba(59, 130, 246, .15), rgba(245, 158, 11, .1));

  margin-bottom: 1.4rem;

}



.benefit-card__icon svg {

  width: 26px;

  height: 26px;

  stroke: var(--c-primary-light);

}



.benefit-card__title {

  font-size: 1.15rem;

  font-weight: 700;

  margin-bottom: .75rem;

  color: var(--c-white);

}



.benefit-card__desc {

  font-size: .92rem;

  line-height: 1.7;

  color: var(--c-text-muted);

}



/* ---------- Subpage CTA ---------- */

.subpage-cta {

  text-align: center;

}



.subpage-cta__buttons {

  display: flex;

  gap: 1rem;

  justify-content: center;

  flex-wrap: wrap;

  margin-top: 2rem;

}



/* ---------- Responsive: Benefits ---------- */

@media (max-width: 600px) {

  .benefits-grid {

    grid-template-columns: 1fr;

    gap: 1.25rem;

  }



  .subpage-hero {

    min-height: 40vh;

  }



  .subpage-section {

    padding: 3.5rem 1.25rem;

  }



  .subpage-cta__buttons {

    flex-direction: column;

    align-items: center;

  }

}



/* ---------- Staggered reveal for 6th service card ---------- */

.service-card:nth-child(6) {

  transition-delay: .25s;

}



/* ---------- Price Calculator ---------- */

.calc-card {

  max-width: 720px;

  margin: 0 auto;

  padding: 2.5rem 2.5rem 2rem;

  background: var(--c-surface);

  border: 1px solid rgba(255, 255, 255, .06);

  border-radius: 20px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .04);

}



.calc-section {

  margin-bottom: 2.2rem;

}



.calc-section:last-of-type {

  margin-bottom: 2.5rem;

}



.calc-section__title {

  display: flex;

  align-items: center;

  gap: .6rem;

  font-size: 1rem;

  font-weight: 700;

  color: var(--c-white);

  margin-bottom: 1.2rem;

  letter-spacing: .3px;

}



.calc-section__title svg {

  stroke: var(--c-primary-light);

  flex-shrink: 0;

}



/* Date Fields */

.calc-dates {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

}



.calc-field__label {

  display: block;

  font-size: .75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--c-text-muted);

  margin-bottom: .4rem;

}



.calc-field__input {

  width: 100%;

  padding: .85rem 1rem;

  font-family: var(--ff-body);

  font-size: .95rem;

  color: var(--c-text);

  background: var(--c-bg);

  border: 1.5px solid rgba(255, 255, 255, .08);

  border-radius: var(--radius);

  outline: none;

  transition: border-color var(--transition), box-shadow var(--transition);

  color-scheme: dark;

}



.calc-field__input:hover {

  border-color: rgba(255, 255, 255, .16);

}



.calc-field__input:focus {

  border-color: var(--c-primary);

  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);

}



/* Days Display */

.calc-days {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 1rem;

  padding: .8rem 1.2rem;

  background: rgba(59, 130, 246, .06);

  border: 1px solid rgba(59, 130, 246, .12);

  border-radius: var(--radius);

}



.calc-days__label {

  font-size: .88rem;

  color: var(--c-text-muted);

  font-weight: 500;

}



.calc-days__value {

  font-size: 1.1rem;

  font-weight: 700;

  color: var(--c-primary-light);

}



/* Option Cards */

.calc-options {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: .75rem;

}



.calc-option {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: .3rem;

  padding: 1.1rem .75rem;

  background: var(--c-bg);

  border: 1.5px solid rgba(255, 255, 255, .08);

  border-radius: var(--radius);

  cursor: pointer;

  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;

  font-family: var(--ff-body);

  color: var(--c-text);

}



.calc-option:hover {

  border-color: rgba(59, 130, 246, .25);

  background: rgba(59, 130, 246, .04);

  transform: translateY(-2px);

}



.calc-option.active {

  border-color: var(--c-primary);

  background: rgba(59, 130, 246, .08);

  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15), 0 4px 16px rgba(59, 130, 246, .12);

}



.calc-option__name {

  font-size: .92rem;

  font-weight: 600;

  color: var(--c-white);

}



.calc-option__price {

  font-size: .78rem;

  font-weight: 500;

  color: var(--c-text-muted);

}



.calc-option.active .calc-option__price {

  color: var(--c-primary-light);

}



/* Checkbox */

.calc-checkbox {

  display: flex;

  align-items: center;

  gap: .8rem;

  cursor: pointer;

  padding: 1rem 1.2rem;

  background: var(--c-bg);

  border: 1.5px solid rgba(255, 255, 255, .08);

  border-radius: var(--radius);

  transition: border-color .25s ease, background .25s ease;

}



.calc-checkbox:hover {

  border-color: rgba(59, 130, 246, .25);

}



.calc-checkbox input[type="checkbox"] {

  display: none;

}



.calc-checkbox__mark {

  width: 22px;

  height: 22px;

  border-radius: 6px;

  border: 2px solid rgba(255, 255, 255, .2);

  background: var(--c-bg);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: border-color .25s ease, background .25s ease;

  position: relative;

}



.calc-checkbox__mark::after {

  content: '';

  width: 6px;

  height: 11px;

  border: solid var(--c-white);

  border-width: 0 2.5px 2.5px 0;

  transform: rotate(45deg) scale(0);

  transition: transform .2s ease;

  margin-top: -2px;

}



.calc-checkbox input:checked~.calc-checkbox__mark {

  background: var(--c-primary);

  border-color: var(--c-primary);

}



.calc-checkbox input:checked~.calc-checkbox__mark::after {

  transform: rotate(45deg) scale(1);

}



.calc-checkbox__text {

  font-size: .92rem;

  font-weight: 500;

  color: var(--c-text);

}



.calc-checkbox__text em {

  font-style: normal;

  color: var(--c-text-muted);

  font-size: .82rem;

}



/* Price Result */

.calc-result {

  text-align: center;

  border-top: 1px solid rgba(255, 255, 255, .06);

  padding-top: 2rem;

}



.calc-result__price-wrap {

  margin-bottom: 1.2rem;

}



.calc-result__label {

  display: block;

  font-size: .75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 3px;

  color: var(--c-text-muted);

  margin-bottom: .5rem;

}



.calc-result__price {

  font-size: clamp(2rem, 5vw, 3rem);

  font-weight: 900;

  letter-spacing: -1px;

  color: var(--c-text-muted);

  transition: color .4s ease, transform .4s ease;

  line-height: 1.2;

}



.calc-result__price--visible {

  background: linear-gradient(135deg, var(--c-white) 40%, var(--c-primary-light));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  transform: scale(1);

  animation: priceReveal .4s ease;

}



@keyframes priceReveal {

  0% {

    transform: scale(.95);

    opacity: .5;

  }



  100% {

    transform: scale(1);

    opacity: 1;

  }

}



.calc-result__notice {

  font-size: .82rem;

  color: var(--c-text-muted);

  max-width: 460px;

  margin: 0 auto 1.5rem;

  line-height: 1.6;

}



.calc-result__btn {

  min-width: 220px;

}



/* Calculator Responsive */

@media (max-width: 600px) {

  .calc-card {

    padding: 1.8rem 1.3rem 1.5rem;

    border-radius: 16px;

  }



  .calc-dates {

    grid-template-columns: 1fr;

  }



  .calc-options {

    grid-template-columns: 1fr;

  }



  .calc-option {

    flex-direction: row;

    justify-content: space-between;

    padding: 1rem 1.2rem;

  }

}



@media (min-width: 601px) and (max-width: 768px) {

  .calc-options {

    grid-template-columns: repeat(3, 1fr);

  }

}



/* ---------- Rental Hero (Půjčovna dodávek) ---------- */

.rental-hero {

  position: relative;

  min-height: 44vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: calc(var(--nav-h) + 2.5rem) 1.5rem 3rem;

  overflow: hidden;

  background: linear-gradient(145deg, #0b0f19 0%, #111827 35%, #0f172a 100%);

}



.rental-hero__bg {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(59, 130, 246, .08) 0%, transparent 70%),

    radial-gradient(ellipse 50% 40% at 30% 70%, rgba(245, 158, 11, .05) 0%, transparent 70%);

  pointer-events: none;

}



.rental-hero__bg::after {

  content: '';

  position: absolute;

  top: 15%;

  left: 50%;

  transform: translateX(-50%);

  width: 400px;

  height: 400px;

  background: radial-gradient(circle, rgba(59, 130, 246, .07) 0%, transparent 70%);

  border-radius: 50%;

  filter: blur(80px);

  animation: heroGlow 6s ease-in-out infinite alternate;

}



@keyframes heroGlow {

  0% {

    transform: translateX(-50%) scale(1);

    opacity: .5;

  }



  100% {

    transform: translateX(-50%) scale(1.15);

    opacity: .8;

  }

}



.rental-hero__content {

  position: relative;

  z-index: 2;

  max-width: 620px;

}



.rental-hero__title {

  font-size: clamp(1.8rem, 4vw, 2.8rem);

  font-weight: 900;

  letter-spacing: -1px;

  line-height: 1.1;

  margin-bottom: .75rem;

  background: linear-gradient(135deg, var(--c-white) 50%, var(--c-primary-light));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.rental-hero__desc {

  font-size: clamp(.88rem, 1.5vw, 1.02rem);

  font-weight: 400;

  color: var(--c-text-muted);

  line-height: 1.7;

  max-width: 500px;

  margin: 0 auto 1.5rem;

}



.rental-hero__actions {

  display: flex;

  gap: 1rem;

  justify-content: center;

  flex-wrap: wrap;

  margin-bottom: 2rem;

}



/* Stat pills */

.rental-hero__stats {

  display: flex;

  gap: .6rem;

  justify-content: center;

  flex-wrap: wrap;

}



.rental-hero__stat {

  display: flex;

  align-items: center;

  gap: .4rem;

  padding: .45rem .9rem;

  background: rgba(255, 255, 255, .04);

  border: 1px solid rgba(255, 255, 255, .08);

  border-radius: 100px;

  font-size: .76rem;

  font-weight: 600;

  color: rgba(148, 163, 184, .65);

  letter-spacing: .5px;

}



.rental-hero__stat svg {

  stroke: var(--c-primary-light);

  flex-shrink: 0;

  opacity: .6;

}



/* Responsive */

@media (max-width: 768px) {

  .rental-hero {

    padding: calc(var(--nav-h) + 2rem) 1.25rem 2rem;

    min-height: 38vh;

  }

}



@media (max-width: 480px) {

  .rental-hero {

    min-height: auto;

    padding: calc(var(--nav-h) + 1.5rem) 1.25rem 1.5rem;

  }



  .rental-hero__actions {

    flex-direction: column;

    align-items: center;

    gap: .75rem;

  }



  .rental-hero__stats {

    gap: .5rem;

  }

}



/* ---------- Vehicle Type Selector (Rental Calculator) ---------- */

.calc-vehicle-options {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: .75rem;

}



.calc-vehicle-option {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: .35rem;

  padding: 1.2rem 1rem;

  background: var(--c-bg);

  border: 1.5px solid rgba(255, 255, 255, .08);

  border-radius: var(--radius);

  cursor: pointer;

  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;

  font-family: var(--ff-body);

  color: var(--c-text);

}



.calc-vehicle-option:hover {

  border-color: rgba(59, 130, 246, .25);

  background: rgba(59, 130, 246, .04);

  transform: translateY(-2px);

}



.calc-vehicle-option.active {

  border-color: var(--c-primary);

  background: rgba(59, 130, 246, .08);

  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15), 0 4px 16px rgba(59, 130, 246, .12);

}



.calc-vehicle-option__name {

  font-size: .95rem;

  font-weight: 600;

  color: var(--c-white);

}



.calc-vehicle-option__price {

  font-size: .8rem;

  font-weight: 500;

  color: var(--c-text-muted);

}



.calc-vehicle-option.active .calc-vehicle-option__price {

  color: var(--c-primary-light);

}



@media (max-width: 480px) {

  .calc-vehicle-options {

    grid-template-columns: 1fr;

  }



  .calc-vehicle-option {

    flex-direction: row;

    justify-content: space-between;

    padding: 1rem 1.2rem;

  }

}



/* ---------- Taxi Gallery (2×2 Grid) ---------- */

.taxi-gallery-section {

  position: relative;

  background: var(--c-bg);

  overflow: hidden;

  padding-bottom: 3rem;

}



.taxi-gallery {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

  max-width: 960px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



.taxi-gallery__item {

  position: relative;

  border-radius: 16px;

  overflow: hidden;

  cursor: pointer;

  aspect-ratio: 4 / 3;

}



.taxi-gallery__item--featured {

  grid-column: span 2;

  aspect-ratio: 16 / 9;

}



.taxi-gallery__item--featured img {

  object-position: center 65%;

}



.taxi-gallery__item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .5s ease, filter .5s ease;

}



.taxi-gallery__item:hover img {

  transform: scale(1.06);

  filter: brightness(1.05);

}



.taxi-gallery__overlay {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(11, 15, 25, .45);

  opacity: 0;

  transition: opacity .35s ease;

  pointer-events: none;

}



.taxi-gallery__overlay svg {

  color: var(--c-white);

  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));

}



.taxi-gallery__item:hover .taxi-gallery__overlay {

  opacity: 1;

}



@media (max-width: 600px) {

  .taxi-gallery {

    grid-template-columns: 1fr;

    gap: .75rem;

    padding: 0 1.25rem;

  }



  .taxi-gallery__item {

    aspect-ratio: 16 / 10;

  }



  .taxi-gallery__item--featured {

    grid-column: span 1;

    aspect-ratio: 16 / 9;

  }

}



/* ---------- Taxi Gallery Lightbox ---------- */

.taxi-lightbox {

  position: fixed;

  inset: 0;

  z-index: 100000;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transition: opacity .35s ease, visibility .35s ease;

}



.taxi-lightbox.active {

  opacity: 1;

  visibility: visible;

}



.taxi-lightbox__backdrop {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, .92);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}



.taxi-lightbox__close {

  position: absolute;

  top: 1.5rem;

  right: 1.5rem;

  z-index: 10;

  background: rgba(255, 255, 255, .08);

  border: 1px solid rgba(255, 255, 255, .15);

  border-radius: 50%;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--c-white);

  cursor: pointer;

  transition: background .3s ease, transform .3s ease;

}



.taxi-lightbox__close:hover {

  background: rgba(255, 255, 255, .15);

  transform: rotate(90deg);

}



.taxi-lightbox__content {

  position: relative;

  z-index: 5;

  max-width: 90vw;

  max-height: 85vh;

  display: flex;

  align-items: center;

  justify-content: center;

}



.taxi-lightbox__img {

  max-width: 100%;

  max-height: 85vh;

  border-radius: 12px;

  object-fit: contain;

  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);

  transition: opacity .3s ease, transform .3s ease;

}



.taxi-lightbox__arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(255, 255, 255, .06);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, .1);

  border-radius: 50%;

  color: var(--c-white);

  cursor: pointer;

  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;

}



.taxi-lightbox__arrow--prev {

  left: clamp(1rem, 3vw, 2.5rem);

}



.taxi-lightbox__arrow--next {

  right: clamp(1rem, 3vw, 2.5rem);

}



.taxi-lightbox__arrow:hover {

  background: rgba(59, 130, 246, .25);

  border-color: rgba(59, 130, 246, .4);

  transform: translateY(-50%) scale(1.08);

  box-shadow: 0 4px 20px rgba(59, 130, 246, .2);

}



.taxi-lightbox__counter {

  position: absolute;

  bottom: 1.5rem;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

  font-family: var(--ff);

  font-size: 1rem;

  font-weight: 500;

  color: rgba(255, 255, 255, .5);

  letter-spacing: 2px;

}



@media (max-width: 768px) {

  .taxi-lightbox__arrow {

    width: 42px;

    height: 42px;

  }



  .taxi-lightbox__close {

    top: 1rem;

    right: 1rem;

    width: 40px;

    height: 40px;

  }

}



@media (max-width: 480px) {

  .taxi-lightbox__arrow {

    width: 36px;

    height: 36px;

  }



  .taxi-lightbox__counter {

    bottom: 1rem;

  }

}



/* ---------- Floating Instagram Badge ---------- */

.floating-instagram {

  position: fixed;

  bottom: 1.5rem;

  left: 1.5rem;

  z-index: 999;

  width: 44px;

  height: 44px;

  background: rgba(26, 34, 51, .85);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, .12);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--c-white);

  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);

  transition: transform .3s ease, background .3s ease, border-color .3s ease;

}



.floating-instagram:hover {

  transform: translateY(-3px) scale(1.05);

  background: rgba(59, 130, 246, .25);

  border-color: rgba(59, 130, 246, .4);

}



@media (max-width: 768px) {

  .floating-instagram {

    display: none !important;

  }

}