:root{
  --bg:#000; --bg-2:#0a0a0a; --text:#e8e8e8; --muted:#a8a8a8; --gold:#d4af37; --card:#121212;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-serif-text: 'Lora', Georgia, serif; /* voliteľné pre dlhšie texty */
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:#000; color:var(--text);
  font-family: var(--font-sans); scroll-behavior:smooth;
}
img{max-width:100%; display:block}
a{color:var(--text); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* Nadpisy */
h1,h2,h3,.logo span{font-family:var(--font-serif)}
h2{text-shadow:1px 1px 2px rgba(0,0,0,.6)}

/* =======================================
   Header
======================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,14,15,.9); backdrop-filter:blur(6px);
  border-bottom:1px solid #222;
}
.header-inner{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:10px 0;
}

/* Logo */
.logo{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-family:var(--font-serif);
  color:var(--gold); font-size:1.3rem; letter-spacing:.5px;
}
.logo img{
  width:38px; height:38px; border-radius:8px;
  box-shadow:0 0 12px rgba(212,175,55,.25);
  transition:transform .3s ease, box-shadow .3s ease;
}
.logo:hover img{
  transform:scale(1.05);
  box-shadow:0 0 18px rgba(212,175,55,.4);
}

.nav{display:flex; gap:18px}
.nav a{opacity:.9; padding:6px 8px; border-radius:8px}
.nav a:hover{background:#222}

.hamburger{
  display:none; width:36px; height:36px;
  border:1px solid #333; background:transparent; border-radius:10px;
  align-items:center; justify-content:center; gap:5px;
}
.hamburger span{display:block; width:18px; height:2px; background:#fff; transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* =======================================
   Hero (video background)
======================================= */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; background:#000; /* fallback */
}
.hero video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; filter:brightness(.45);
}
/* voliteľný overlay – pridaj <div class="overlay"></div> do HTML ak chceš */
.overlay{
  position:absolute; inset:0;
  background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.8));
  z-index:1;
}
.hero-content{position:relative; z-index:2; padding:0 20px}

.hero h1{
  font-size:clamp(32px,6vw,54px); margin-bottom:12px;
  color:var(--gold);
  background:linear-gradient(90deg, #d4af37, #eee);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p{
  font-family:var(--font-sans);
  color:#ddd; max-width:600px; margin:0 auto 24px;
  font-size:clamp(16px,3vw,20px);
}
.hero .btn{
  background:var(--gold); color:#000; padding:12px 22px;
  border-radius:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
}

/* Úvodná animácia */
@keyframes fadeInUp{
  0%{opacity:0; transform:translateY(30px)}
  100%{opacity:1; transform:translateY(0)}
}
.hero-content h1,.hero-content p,.hero-content .btn{
  opacity:0; animation:fadeInUp 1.2s ease forwards;
}
.hero-content h1{animation-delay:.3s}
.hero-content p{animation-delay:.7s}
.hero-content .btn{animation-delay:1.1s}

/* =======================================
   Sections
======================================= */
.section{padding:56px 0}
.section-dark{background:var(--bg-2)}
.section h2{text-align:center; color:var(--gold); margin:0 0 18px}

/* =======================================
   Services
======================================= */
.grid {
  display: grid;
  gap: 18px;
}

.services {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: stretch;
}

.card {
  background: var(--card);
  border: 1px solid #24262b;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.card img {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.card h3 {
  margin: 12px 16px 6px;
  font-size: 1.2rem;
  color: var(--text);
  font-family: var(--font-serif);
}

.card p {
  margin: 0 16px 16px;
  color: var(--muted);
  flex-grow: 1;
  font-family: var(--font-serif-text);
  line-height: 1.45;
}

/* Animácia zospodu pri načítaní */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Nadpis sekcie */
#ponukame h2 {
  text-align: center;
  color: var(--gold);
  margin-bottom: 24px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 4vw, 34px);
}

/* Responzivita */
@media (max-width: 900px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .card img {
    height: 180px;
  }
}


/* =======================================
   Contact
======================================= */
.contact-grid{
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:22px; align-items:start;
}
.contact-list{list-style:none; padding:0; margin:0 0 12px; display:grid; gap:10px}
.contact-list li{display:flex; align-items:center; gap:10px}
.contact-list img{width:18px; height:18px; opacity:.9}
.socials{display:flex; gap:12px; margin-top:8px}
.socials img{width:28px; height:28px}

/* =======================================
   Map
======================================= */
.map-wrap{
  border-radius:14px; overflow:hidden; border:1px solid #24262b;
  box-shadow:0 6px 24px rgba(0,0,0,.35)
}
.map-wrap iframe{width:100%; height:320px; border:0}

/* =======================================
   Footer
======================================= */
.site-footer{border-top:1px solid #222; background:#0c0c0d}
.site-footer .container{padding:20px 20px}
.site-footer p{margin:0; color:#a9a9ab}

/* =======================================
   Cenník – glassmorphism
======================================= */
.price-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  max-width:980px; margin:0 auto;
}
@media (max-width:900px){ .price-grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .price-grid{grid-template-columns:1fr} }

.price-card{
  position:relative; padding:22px 20px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
  backdrop-filter:saturate(130%) blur(14px);
  -webkit-backdrop-filter:saturate(130%) blur(14px);
  outline:1px solid rgba(212,175,55,.22); outline-offset:-2px;
  transition:transform .25s ease, box-shadow .25s ease, outline-color .25s ease;
}
.price-card::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(1200px 400px at -10% -20%, rgba(212,175,55,.14), transparent 40%),
    radial-gradient(800px 260px at 120% -30%, rgba(255,255,255,.06), transparent 40%);
}
.price-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  outline-color:rgba(212,175,55,.38);
}

/* typografia cenníka */
.price-card h3{
  margin:0 0 8px; color:var(--gold);
  font-family:var(--font-serif); letter-spacing:.2px;
  font-size:clamp(18px,2.8vw,22px);
}
.price-card p{
  margin:0 0 14px; color:var(--muted);
  line-height:1.45; font-size:.98rem;
}
.price{
  display:inline-block; font-weight:800; font-size:clamp(22px,6vw,32px);
  color:#fff; padding:8px 14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(6px);
}

/* zvýraznenie titulkov na hover */
.card:hover h3, .price-card:hover h3{color:#fff}

/* po načítaní jemný pop-in efekt */
@keyframes pricePop{from{transform:scale(.98); opacity:0} to{transform:scale(1); opacity:1}}
.price-card{animation:pricePop .4s ease both}
.price-card:nth-child(2){animation-delay:.06s}
.price-card:nth-child(3){animation-delay:.12s}
/* =======================================
   Recenzie – slider
======================================= */
.reviews {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 700px;
  margin: 0 auto;
}

.reviews-viewport {
  overflow: hidden;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.reviews-track {
  display: flex;
  transition: transform 0.6s ease;
  width: 100%;
}

.review {
  flex: 0 0 100%;
  padding: 26px 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(10px);
  border-radius: 14px;
  font-family: var(--font-serif-text);
}

.review p {
  font-style: italic;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 10px;
}

.review .author {
  color: var(--gold);
  font-weight: 600;
  font-family: var(--font-serif);
}

/* Ovládacie šípky */
.arrow {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}

.arrow:hover {
  color: #fff;
  transform: scale(1.1);
}

.arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

/* =======================================
   Typografia dlhších textov (voliteľné)
======================================= */
.section p, .contact-list li, .review p{
  font-family:var(--font-serif-text);
  font-size:1rem; line-height:1.6; color:#e4e4e4;
}
#onas p {
  font-family: var(--font-serif-text);
  font-size: 1.05rem;
  line-height: 1.8;
  letter-spacing: 0.3px;
  color: #eaeaea;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 0 10px rgba(0,0,0,0.4);
  font-style: italic;
}

/* =======================================
   Responsive
======================================= */
@media (max-width:900px){
  .services{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  .nav{
    position:fixed; inset:62px 12px auto 12px; flex-direction:column;
    background:rgba(14,14,15,.98); border:1px solid #222; padding:10px; border-radius:14px;
    transform:translateY(-20px); opacity:0; pointer-events:none; transition:.25s;
  }
  .nav.active{transform:translateY(0); opacity:1; pointer-events:auto}
  .hamburger{display:flex}
  .services{grid-template-columns:1fr}
  /* iPhone notch friendly */
  .site-header .container{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .logo img{width:32px; height:32px}
}

/* =======================================
   Reduced motion / šetrenie dát
======================================= */
@media (prefers-reduced-motion: reduce){
  /* prípadne ak nechceš video pri reduced motion, môžeš ho zakomentovať / nechať skryté
  .hero video{display:none}
  */
  .hero{background:#000}

  .price-card, 
  .hero-content h1, 
  .hero-content p, 
  .hero-content .btn,
  .fade-in {
    animation:none !important;
    transition:none !important;
    opacity:1 !important;  /* 🔑 toto je dôležité */
  }
}

/* ================= GALÉRIA ================= */
.gallery-scroll {
  display: flex;
  overflow-x: auto;
  gap: 14px;
  scroll-behavior: smooth;
  padding-bottom: 8px;
}
.gallery-scroll::-webkit-scrollbar {
  height: 6px;
}
.gallery-scroll::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 4px;
}

.gallery-item {
  flex: 0 0 auto;
  width: 300px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #24262b;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-item:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.gallery-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* ================= LIGHTBOX ================= */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(10px);
}
.lightbox img {
  max-width: 90%;
  max-height: 85vh;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ================= TEAM PHOTO ================= */
.team-photo {
  max-width: 750px;
  margin: 40px auto 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.team-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.95) contrast(1.05);
  transition: filter 0.3s ease;
}
.team-photo:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.team-photo:hover img {
  filter: brightness(1) contrast(1.1);
}
.team-title {
  text-align: center;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 1.8rem;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

/*GOOGLE MAPA*/

/*.map-wrap{ position:relative; }

.map-card{
  position:relative; border-radius:16px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  aspect-ratio:16/9; min-height:260px; cursor:pointer; isolation:isolate;
}
.map-card:focus{ outline:2px solid #222; outline-offset:3px; }

.map-card__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(120% 100% at 100% 100%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(135deg, #1f1f1f, #2b2b2b);
}

.map-card__content{
  position:relative; z-index:1; color:#fff;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:.9rem; height:100%; padding:1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.18) 40%, transparent);
  text-align:center;
}

.map-card__header{ display:flex; align-items:center; gap:.6rem; }
.map-card__pin{ width:22px; height:22px; flex:0 0 22px; fill:#fff; opacity:.9; } 
.map-card h3{ margin:0; font-size:1.15rem; font-weight:700; }
.map-card p{ margin:0; opacity:.9; font-size:.95rem; }

.map-card__actions{
  display:flex; gap:.75rem; justify-content:center; align-items:center; flex-wrap:wrap;
}

.map-card__link{ color:#fff; text-decoration:underline; opacity:.9; font-weight:600; }
.map-card__link:hover{ opacity:1; }

@media (max-width:640px){
  .map-card{ aspect-ratio:4/3; min-height:220px; }
  .map-card h3{ font-size:1.05rem; }
  .map-card p{ font-size:.9rem; }
}*/