:root {
      --color-primary: #b6c145;
      --color-dark: #4b4a48;
      --color-white: #ffffff;
      --color-black: #000000;
      --color-overlay: rgba(0, 0, 0, 0.8);
      --color-header-transparent: rgba(75, 74, 72, 0.28);
      --color-header-scrolled: rgba(75, 74, 72, 0.92);
      --container-width: 1280px;
      --header-height: 92px;
      --transition-fast: 0.25s ease;
      --transition-medium: 0.45s ease;
      --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.16);
    }

* {box-sizing: border-box;margin: 0;padding: 0;}

html {scroll-behavior: smooth;}

    body {font-family: 'Montserrat', sans-serif;font-weight: 400;background: var(--color-white);color: var(--color-dark);line-height: 1.5;overflow-x: hidden;}
    a {color: inherit;text-decoration: none;}
    img {display: block;max-width: 100%;}
    ul {list-style: none;}
    button {font: inherit;border: none;background: none;cursor: pointer;}

    .container {width: min(100% - 32px, var(--container-width));margin: 0 auto;}

    .site-header {position: fixed;inset: 0 0 auto 0;z-index: 1000;height: var(--header-height);
      background: var(--color-header-transparent);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      transition: background var(--transition-fast), box-shadow var(--transition-fast), height var(--transition-fast);
    }
    .site-header.is-scrolled {background: var(--color-header-scrolled);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);height: 82px;}
    .site-header__inner {display: flex;align-items: center;justify-content: space-between;gap: 24px;min-height: 100%;}
    .site-logo {flex: 0 0 auto;display: inline-flex;align-items: center;max-width: 180px;}
    .site-logo img {width: 100%;height: auto;object-fit: contain;}
    .site-nav {display: flex;align-items: center;gap: 28px;margin-left: auto;}
    .site-nav a {color: var(--color-white);font-size: 0.95rem;letter-spacing: 0.04em;text-transform: uppercase;position: relative;transition: color var(--transition-fast);}

    .site-nav a::after {content: '';position: absolute;left: 0;bottom: -8px;width: 100%;height: 2px;background: var(--color-primary);transform: scaleX(0);transform-origin: left;transition: transform var(--transition-fast);}
    .site-nav a:hover::after, .site-nav a:focus-visible::after {transform: scaleX(1);}

    .header-phone {flex: 0 0 auto;display: inline-flex;align-items: center;justify-content: center;min-height: 48px;padding: 0 18px;border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 999px;color: var(--color-white);background: rgba(0, 0, 0, 0.18);transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    }

    .header-phone:hover, .header-phone:focus-visible {background: rgba(182, 193, 69, 0.18);border-color: rgba(182, 193, 69, 0.65);transform: translateY(-1px);}
    .menu-toggle {display: none;width: 52px;height: 52px;border-radius: 12px;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.28);border: 1px solid rgba(255, 255, 255, 0.2);position: relative;z-index: 1002;}
    .menu-toggle span, .menu-toggle::before, .menu-toggle::after {content: '';position: absolute;width: 24px;height: 2px;background: var(--color-white);transition: transform var(--transition-fast), opacity var(--transition-fast), top var(--transition-fast);}
    .menu-toggle span { top: 25px; }
    .menu-toggle::before { top: 18px; }
    .menu-toggle::after { top: 32px; }
    .menu-toggle.is-active span { opacity: 0; }
    .menu-toggle.is-active::before { top: 25px; transform: rotate(45deg); }
    .menu-toggle.is-active::after { top: 25px; transform: rotate(-45deg); }

    .hero-slider {position: relative;min-height: 100vh;isolation: isolate;background: var(--color-dark);}
    .hero-slider__track {position: relative;width: 100%;min-height: 100vh;overflow: hidden;}
    .hero-slide {position: absolute;inset: 0;opacity: 0;visibility: hidden;transform: scale(1.04);transition: opacity 0.9s ease, visibility 0.9s ease, transform 5.5s ease;}
    .hero-slide.is-active {opacity: 1;visibility: visible;transform: scale(1);z-index: 2;}
    .hero-slide::before {content: '';position: absolute;inset: 0;background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.52) 100%);z-index: 1;}
    .hero-slide__image {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
    .hero-slide__content {position: relative;z-index: 2;min-height: 100vh;display: flex;align-items: center;padding-top: calc(var(--header-height) + 24px);padding-bottom: 48px;}
    .hero-slide__box {max-width: 640px;background: var(--color-overlay);color: var(--color-white);padding: 36px 38px;box-shadow: var(--shadow-soft);border-left: 6px solid var(--color-primary);}
    .hero-slide__eyebrow {display: inline-block;margin-bottom: 26px;color: var(--color-primary);font-size: 0.9rem;letter-spacing: 0.16em;text-transform: uppercase;}
    .hero-slide__title {font-size: clamp(1.4rem, 2.4vw, 1.2rem);line-height: 1.08;font-weight: 400;margin-bottom: 28px;text-transform: uppercase;}
    .hero-slide__text {font-size: 1.02rem;max-width: 54ch;color: rgba(255, 255, 255, 0.92);margin-bottom: 48px;}
    .hero-slide__actions {display: flex;flex-wrap: wrap;gap: 14px;align-items: center;}

    .btn {display: inline-flex;align-items: center;justify-content: center;min-height: 52px;padding: 0 24px;border-radius: 999px;text-transform: uppercase;letter-spacing: 0.06em;
      transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    }

    .btn:hover, .btn:focus-visible {transform: translateY(-2px);}
    .btn--primary {background: var(--color-primary);color: var(--color-dark);}
    .btn--secondary {background: transparent;color: var(--color-white);border: 1px solid rgba(255, 255, 255, 0.35);}

    .hero-slider__controls {position: absolute;inset: auto 0 44px 0;z-index: 5;pointer-events: none;}
    .hero-slider__controls-inner {display: flex;justify-content: space-between;align-items: center;gap: 24px;}
    .hero-slider__nav {display: flex;gap: 12px;pointer-events: auto;}
    .hero-slider__arrow {width: 58px;height: 58px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;color: var(--color-white);background: rgba(0, 0, 0, 0.42);border: 1px solid rgba(255, 255, 255, 0.24);
      transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    }

    .hero-slider__arrow:hover, .hero-slider__arrow:focus-visible {background: rgba(182, 193, 69, 0.18);border-color: rgba(182, 193, 69, 0.7);transform: translateY(-2px);}
    .hero-slider__dots {display: flex;gap: 10px;pointer-events: auto;}
    .hero-slider__dot {width: 12px;height: 12px;border-radius: 50%;background: rgba(255, 255, 255, 0.4);border: 1px solid transparent;
      transition: background var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
    }

    .hero-slider__dot.is-active {background: var(--color-primary);border-color: rgba(255, 255, 255, 0.4);transform: scale(1.15);}

    .mobile-panel {position: fixed;inset: 0 0 0 auto;width: min(88vw, 360px);background: rgba(75, 74, 72, 0.98);transform: translateX(100%);transition: transform var(--transition-medium);
      z-index: 1001;padding: 112px 28px 32px;display: none;box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    }

    .mobile-panel.is-open {transform: translateX(0);}

    .mobile-panel__nav {display: grid;gap: 18px;}
    .mobile-panel__nav a, .mobile-panel__phone {color: var(--color-white);font-size: 1rem;text-transform: uppercase;letter-spacing: 0.04em;}
    .mobile-overlay {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.5);opacity: 0;visibility: hidden;transition: opacity var(--transition-fast), visibility var(--transition-fast);z-index: 1000;display: none;}
    .mobile-overlay.is-open {opacity: 1;visibility: visible;}
    .placeholder-section {padding: 96px 0;background: #f7f7f7;}
    .placeholder-section__box {background: var(--color-dark);color: var(--color-white);padding: 32px;border-left: 6px solid var(--color-primary);}

    @media (max-width: 1080px) {
      .site-nav {gap: 18px;}
      .site-nav a {font-size: 0.86rem;}
      .header-phone {padding: 0 14px;font-size: 0.9rem;}
    }

    @media (max-width: 920px) {
      .site-nav, .header-phone {display: none;}
      .menu-toggle, .mobile-panel, .mobile-overlay {display: flex;}
      .mobile-panel {display: block;}
      .site-logo {max-width: 150px;}
      .hero-slide__box {max-width: 100%;padding: 28px 24px;}
      .hero-slider__controls-inner {align-items: flex-end;}
    }

    @media (max-width: 640px) {
      :root {--header-height: 78px;}

      .container {width: min(100% - 24px, var(--container-width));}
      .site-logo {max-width: 132px;}
      .hero-slide__content {padding-bottom: 110px;}
      .hero-slide__title {font-size: clamp(1.8rem, 9vw, 2.8rem);}
      .hero-slide__text {font-size: 0.96rem;}
      .hero-slide__actions {flex-direction: column;align-items: stretch;}
      .btn {width: 100%;}
      .hero-slider__controls {bottom: 28px;}
      .hero-slider__controls-inner {flex-direction: column;align-items: flex-start;}
    }



/* =========================
   SLIDER OVLÁDÁNÍ
   ========================= */

.hero-slider__controls {position: absolute;inset: 0;z-index: 8;pointer-events: none;}
.hero-slider__controls-inner {position: relative;width: 100%;height: 100%;}
.hero-slider__nav {pointer-events: none;}
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: 0.25s ease;
  pointer-events: auto;
  font-size: 26px;
  line-height: 1;
}

.hero-slider__arrow--prev {left: 22px;}
.hero-slider__arrow--next {right: 22px;}
.hero-slider__arrow:hover, .hero-slider__arrow:focus-visible {background: rgba(182, 193, 69, 0.22);border-color: rgba(182, 193, 69, 0.7);}
.hero-slider__arrow--prev:hover, .hero-slider__arrow--prev:focus-visible {transform: translateY(-50%) translateX(-2px);}
.hero-slider__arrow--next:hover, .hero-slider__arrow--next:focus-visible {transform: translateY(-50%) translateX(2px);}
.hero-slider__dots {position: absolute;left: 50%;bottom: 34px;transform: translateX(-50%);display: flex;gap: 10px;z-index: 9;pointer-events: auto;}

/* =========================
   TEXTOVÝ BLOK VE SLIDERU
   ========================= */

.hero-slide__box {max-width: 640px;background: transparent;color: #fff;padding: 0;box-shadow: none;border-left: none;}

.hero-slide__panel-bg {width: 100%;max-width: 640px;background: rgba(0, 0, 0, 0.8);border-left: 6px solid #b6c145;box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);overflow: hidden;
  /* počáteční stav */
  max-height: 1px;padding: 0 38px;opacity: 0;
}

/* skryto před animací */
.hero-slide__eyebrow, .hero-slide__title, .hero-slide__text, .hero-slide__actions {opacity: 0;transform: translateY(18px);}

/* živější zoom */
.hero-slide__image {transform: scale(1);}

/* při aktivním slide se spustí animace */
.hero-slide.is-active .hero-slide__image {animation: heroImageZoom 2.4s ease forwards;}
.hero-slide.is-active .hero-slide__panel-bg {animation: revealPanel 1.25s ease forwards;animation-delay: 2.1s;}
.hero-slide.is-active .hero-slide__eyebrow {animation: revealLine 0.45s ease forwards;animation-delay: 2.8s;}
.hero-slide.is-active .hero-slide__title {animation: revealLine 0.75s ease forwards;animation-delay: 3.0s;}
.hero-slide.is-active .hero-slide__text {animation: revealLine 0.75s ease forwards;animation-delay: 3.25s;}
.hero-slide.is-active .hero-slide__actions {animation: revealLine 0.75s ease forwards;animation-delay: 3.5s;}

@keyframes heroImageZoom {
  0% {transform: scale(1);}
  100% {transform: scale(1.14);}
}
@keyframes revealPanel {
  0% {max-height: 1px;opacity: 0.15;padding-top: 0;padding-bottom: 0;}
  100% {max-height: 420px;opacity: 1;padding-top: 32px;padding-bottom: 32px;}
}
@keyframes revealLine {
  0% {opacity: 0;transform: translateY(18px);}
  100% {opacity: 1;transform: translateY(0);}
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 920px) {
  .hero-slider__arrow {width: 54px;height: 54px;}
  .hero-slider__arrow--prev {left: 12px;}
  .hero-slider__arrow--next {right: 12px;}
  .hero-slide__panel-bg {max-width: 100%;padding-left: 24px;padding-right: 24px;}
}

@media (max-width: 640px) {
  .hero-slider__arrow {width: 48px;height: 48px;border-radius: 8px;font-size: 22px;}
  .hero-slider__arrow--prev {left: 8px;}
  .hero-slider__arrow--next {right: 8px;}
  .hero-slider__dots {bottom: 22px;}
  .hero-slide__panel-bg {padding-left: 20px;padding-right: 20px;}

  @keyframes revealPanel {
    0% {max-height: 1px;opacity: 0.15;padding-top: 0;padding-bottom: 0;}
    100% {max-height: 520px;opacity: 1;padding-top: 24px;padding-bottom: 24px;}
  }
}
















.interior-offer {
  padding: 110px 0;
  background: #ffffff;
}

.interior-offer__container {
  width: min(100% - 32px, 1280px);
  margin: 0 auto;
}

.interior-offer__heading {
  max-width: 760px;
  margin-bottom: 40px;
}

.interior-offer__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: #b6c145;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.interior-offer__title {
  margin: 0 0 16px;
  font-size: clamp(2rem, 3vw, 3.4rem);
  line-height: 1.08;
  font-weight: 800;
  text-transform: uppercase;
  color: #4b4a48;
}

.interior-offer__text {
  margin: 0;
  color: rgba(75, 74, 72, 0.88);
  line-height: 1.7;
}

.interior-offer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.interior-offer__small-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.interior-card {
  position: relative;
  overflow: hidden;
  background: #ddd;
  min-height: 340px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.interior-card--large {
  min-height: 704px;
}

.interior-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 1s ease;
}

.interior-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.14) 45%,
    rgba(0, 0, 0, 0.28) 100%
  );
}

.interior-card__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  padding: 14px 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.interior-card__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.25;
  font-weight: 700;
  text-transform: uppercase;
}

.interior-card__title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
}

.interior-offer.is-active .interior-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.interior-offer.is-active .interior-card.is-visible .interior-card__image {
  transform: scale(1);
}

.interior-offer.is-active .interior-card.is-visible .interior-card__label {
  opacity: 1;
  transform: translateY(0);
}

.interior-offer.is-active .interior-card.is-visible .interior-card__title .char {
  animation: interiorCharIn 0.28s ease forwards;
}

@keyframes interiorCharIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1080px) {
  .interior-offer__grid {
    grid-template-columns: 1fr;
  }

  .interior-card--large {
    min-height: 560px;
  }
}

@media (max-width: 920px) {
  .interior-offer {
    padding: 84px 0;
  }
}

@media (max-width: 640px) {
  .interior-offer__container {
    width: min(100% - 24px, 1280px);
  }

  .interior-offer__small-grid {
    grid-template-columns: 1fr;
  }

  .interior-card--large,
  .interior-card {
    min-height: 320px;
  }

  .interior-card__label {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
  }
}