/* ─────────────────────────────────────────────
   Kuloar Podcast Studio — stylesheet
   Font stack: Degular (Adobe Fonts) → Inter → system-ui
   ───────────────────────────────────────────── */

/* ── Variables ── */
:root {
  --dark:         #111827;
  --dark-2:       #1F2937;
  --accent:       #6366F1;
  --accent-h:     #4F46E5;
  --accent-light: #EEF2FF;
  --white:        #FFFFFF;
  --gray:         #F3F4F6;
  --border:       #E5E7EB;
  --text:         #111827;
  --muted:        #6B7280;
  --success:      #10B981;
  --radius:       12px;
  --radius-sm:    8px;
  --shadow:       0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-md:    0 4px 12px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.08);
  --nav-h:        84px;
  --transition:   .2s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'degular', 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}

/* ── Container ── */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Section spacing ── */
section { padding: 96px 0; }
.bg-gray { background: var(--gray); }

/* ── Section header ── */
.section-head {
  text-align: center;
  margin-bottom: 56px;
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 8px 0 16px;
}
.section-desc {
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
  font-size: 17px;
}
.section-desc strong { color: var(--text); font-weight: 700; }
/* Dlhší úvodný text tejto sekcie potrebuje širší stĺpec, inak by sa lámal na príliš veľa riadkov */
#studio .section-desc { max-width: 720px; }
/* Dva odstavce – medzera medzi nimi */
#studio p.section-desc + p.section-desc { margin-top: 14px; }

/* ── Eyebrow ── */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--white);
}
.btn-primary:hover { background: var(--accent-h); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.35); }
.btn-ghost {
  background: rgba(255,255,255,.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-light); }
.btn-full { width: 100%; }

/* ════════════════════════ NAVIGATION ════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  transition: background var(--transition), box-shadow var(--transition);
}
/* Zahmlené sklo – rovnaký princíp ako hero overlay */
#navbar.scrolled {
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 1px 0 rgba(229,231,235,.7);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity var(--transition);
}
.logo:hover { opacity: .85; }
.logo-img { height: 54px; width: auto; display: block; }
.logo-img-black { display: none; }
#navbar.scrolled .logo-img-white { display: none; }
#navbar.scrolled .logo-img-black { display: block; }
.logo-light { opacity: .85; }
.logo-light:hover { opacity: 1; }

#nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  transition: all var(--transition);
}
.nav-link:hover { color: var(--white); background: rgba(255,255,255,.1); }
#navbar.scrolled .nav-link { color: var(--dark-2); }
#navbar.scrolled .nav-link:hover { color: var(--text); background: rgba(243,244,246,.8); }
.nav-link.active { color: var(--white); }
#navbar.scrolled .nav-link.active { color: var(--accent); }

.nav-cta {
  background: var(--accent);
  color: var(--white) !important;
  padding: 8px 18px;
}
.nav-cta:hover { background: var(--accent-h) !important; }

/* Hamburger */
#hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 4px;
}
#hamburger span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all .25s ease;
}
#navbar.scrolled #hamburger span { background: var(--text); }
#hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════ HERO ════════════════════════ */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: var(--dark);
  overflow: hidden;
  padding: 0;
}
/* Fotka je samostatná vrstva (nie priamo na #hero), aby ju mohol JS pri
   scrolli posúvať (parallax) – presahuje o kus hore/dole, aby posun
   neodhalil prázdny okraj. Ďalšia (biela) sekcia tak vizuálne „dobieha"
   hero rýchlejšie, než sa posúva jeho pozadie. */
.hero-bg {
  position: absolute;
  top: -12%; left: 0; right: 0;
  height: 124%;
  background-image: url('../img/hero-studio.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}
/* Zahmlené sklo nad fotkou – fialový nádych, bez tmavého prekrytia */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(99,102,241,.09) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 80%, rgba(99,102,241,.05) 0%, transparent 60%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  backdrop-filter: blur(4px) saturate(115%);
}
/* Fialový akcent v spodnej časti banneru – farba prechádza z fialovej (6366f1)
   do tmavej (121826) a zároveň priehľadnosť klesá z 58 % na 0. Medzikrok
   udrží tmavú farbu ešte viditeľnú predtým, než úplne zmizne, aby bol farebný
   prechod skutočne vidieť (nielen fialová strácajúca sa do priehľadna).
   Výška siaha zhruba po úroveň tlačidiel, nie cez celý banner. Pri scrolli sa
   posúva vlastnou (JS) rýchlosťou – viď main.js – trochu inou než fotka,
   aby vrstvy pôsobili vizuálne oddelene. */
.hero-bottom-glow {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(99,102,241,.58) 0%, rgba(18,24,38,.45) 65%, rgba(18,24,38,0) 100%);
  will-change: transform;
  pointer-events: none;
}
/* Hore len tmavý (bez fialovej), o niečo nižší než spodný glow */
.hero-top-glow {
  position: absolute; left: 0; right: 0; top: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(18,24,38,.5) 0%, rgba(18,24,38,0) 100%);
  pointer-events: none;
}
/* Subtle noise texture */
#hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.03'/%3E%3C/svg%3E");
  opacity: .4;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--nav-h) + 48px);
  padding-bottom: 80px;
}
/* Box namiesto holého textu – svetlofialové pozadie, maximálne zaoblené rohy, tesnejšie písmená */
.hero-content .eyebrow {
  display: inline-flex;
  align-items: center;
  background: #EFF2FE;
  color: var(--accent-h);
  padding: 7px 16px;
  border-radius: 100px;
  letter-spacing: .5px;
  margin-bottom: 20px;
}
.hero-content h1 {
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
  max-width: 780px;
}
/* Biele slovo na farebnom gradientovom podklade (rovnaké farby, aké predtým sfarbovali samotný text).
   Ostré rohy a záporný ľavý margin presne rovný ľavému paddingu – rám tak
   presahuje mimo textového stĺpca, ale prvé písmeno "p" zostane na rovnakej
   úrovni ako "T"/"s" v riadkoch nad ním. */
.accent-box {
  display: inline-block;
  background: linear-gradient(135deg, #818CF8, #C084FC);
  color: var(--white);
  padding: 1px 24px 1px 16px;
  margin-left: -16px;
  border-radius: 0;
}
.hero-sub {
  color: rgba(255,255,255,.65);
  font-size: 18px;
  max-width: 560px;
  margin-bottom: 40px;
  line-height: 1.7;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 64px; }
.hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
}
.stat { display: flex; flex-direction: column; }
.stat .num {
  font-size: 32px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.stat .label {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  margin-top: 4px;
}
.stat-sep {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.15);
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scroll-dot {
  width: 6px; height: 6px;
  background: rgba(255,255,255,.4);
  border-radius: 50%;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); opacity: .4; }
  50%      { transform: translateY(8px); opacity: .9; }
}

/* ════════════════════════ CARDS / GRID ════════════════════════ */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ════════════════════════ VARIANT CARDS ════════════════════════ */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.variant-card.featured {
  background: var(--dark);
  border-color: transparent;
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.variant-card.featured .feat-list li { color: rgba(255,255,255,.75); }
.variant-card.featured .feat-list li::before { color: #818CF8; }
.variant-card.featured .card-price-tag {
  background: rgba(99,102,241,.2);
  color: #A5B4FC;
}
.popular-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 100px;
}
.card-ico {
  width: 48px; height: 48px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.card-ico svg { width: 22px; height: 22px; stroke: var(--accent); }
.variant-card.featured .card-ico { background: rgba(99,102,241,.2); }
.variant-card.featured .card-ico svg { stroke: #A5B4FC; }
.card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.card p { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.variant-card.featured p { color: rgba(255,255,255,.6); }
.feat-list { margin-bottom: 24px; }
.feat-list li {
  font-size: 14px;
  color: var(--muted);
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.feat-list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.card-price-tag {
  background: var(--accent-light);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  display: inline-block;
}

/* ════════════════════════ ŠTÚDIO – tagy pod úvodným textom ════════════════════════ */
.studio-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.studio-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-light);
  color: var(--accent-h);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 100px;
}
.studio-tag .tag-hash { color: var(--accent); font-weight: 800; }

/* ════════════════════════ AKCIA – NAHRAJ SI ZADARMO ════════════════════════ */
/* Menšia medzera medzi tagmi (koniec #studio) a bannerom, než bežná medzera medzi sekciami */
#studio { padding-bottom: 32px; }
/* Bez spodného paddingu – posledný prvok (.promo-photos) sa má prekryť s ďalšou sekciou, nie od nej odsadiť */
#akcia-zadarmo { padding-top: 0; padding-bottom: 0; }
.promo-banner {
  display: block;
  /* Zaoblený len pravý horný a ľavý dolný roh, zvyšné dva ostré (presný opak banneru) */
  border-radius: 0 24px 0 24px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition);
}
.promo-banner:hover { transform: translateY(-3px); }
.promo-banner img { width: 100%; height: auto; display: block; }
.promo-how {
  max-width: 820px;
  margin: 28px auto 0;
  text-align: center;
}
.promo-how h3 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.promo-how strong { color: var(--accent-h); }
.promo-note { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.promo-note:last-of-type { margin-bottom: 48px; }
.promo-note strong { color: var(--text); }

/* Krátke zhrnutie v 3 bodoch pod textom – rovnaký vizuálny jazyk ako .step-head/.step-num v rezervačnom formulári */
.promo-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin-bottom: 48px;
}
.promo-step .step-head { margin-bottom: 0; }

.promo-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* 3 fotky, posunuté nadol o tretinu vlastnej výšky (transform, nie margin –
   percentá pri margin sa počítajú zo šírky rodiča, kým transform z vlastnej
   výšky), takže vizuálne prekryjú hornú tretinu nasledujúcej (sivej) sekcie. */
.promo-photos {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  transform: translateY(33%);
}
.promo-photo {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.promo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Skok do galérie rieši prehliadač, preto potrebuje odsadenie pod fixnú lištu */
#galeria { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ════════════════════════ PODCAST CARDS ════════════════════════ */
/* Extra miesto navrchu, aby sa nadpis sekcie neprekrýval s fotkami z .promo-photos
   (tie sem zasahujú o tretinu svojej výšky) – gradientové pozadie sekcie zostáva prekryté. */
#podcasty { padding-top: 200px; }
/* Rovnaký gradient ako .accent-box v hero banneri, namiesto plochého sivého pozadia */
#podcasty.bg-gray { background: linear-gradient(135deg, #818CF8, #C084FC); }
/* Pôvodné fialová/sivá farba textu splývali s novým fialovým gradientom pozadia */
#podcasty .eyebrow,
#podcasty .section-head h2,
#podcasty .section-desc { color: var(--white); }
/* Kým je v sekcii referencií len jedna karta, vycentruj ju na desktope.
   Po pridaní ďalších kariet sa grid automaticky vráti na 4 stĺpce. */
#podcasty .cards-4:has(> :only-child) {
  grid-template-columns: minmax(0, 260px);
  justify-content: center;
}
.podcast-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: block;
}
.podcast-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.podcast-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--dark-2);
}
.podcast-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.podcast-card:hover .podcast-thumb img { transform: scale(1.05); }
.play-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity var(--transition);
}
.podcast-card:hover .play-wrap { opacity: 1; }
.play-btn {
  width: 48px; height: 48px;
  background: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--dark);
  padding-left: 3px;
}
.podcast-meta { padding: 18px 20px 20px; }
.podcast-meta h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.podcast-meta p { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.platform-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.youtube { background: #FFE4E4; color: #DC2626; }
.spotify { background: #DCFCE7; color: #16A34A; }
.apple   { background: #F3E8FF; color: #7C3AED; }

.podcast-play {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: gap var(--transition);
}
.podcast-play svg { width: 14px; height: 14px; flex-shrink: 0; }
.podcast-card:hover .podcast-play { gap: 12px; }

/* ════════════════════════ PRICING ════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.pricing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition);
}
.pricing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.pricing-card.featured {
  background: var(--dark);
  border-color: transparent;
  color: var(--white);
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}
.pricing-card.featured:hover { transform: translateY(-11px); }
.pricing-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 100px;
}
.pricing-ico {
  width: 56px; height: 56px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.pricing-ico svg { width: 24px; height: 24px; stroke: var(--accent); }
.pricing-card.featured .pricing-ico { background: rgba(99,102,241,.2); }
.pricing-card.featured .pricing-ico svg { stroke: #A5B4FC; }
.pricing-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.price-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 4px; margin-bottom: 4px; }
.amount { font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.cur    { font-size: 22px; font-weight: 700; margin-top: 10px; color: var(--muted); }
.pricing-card.featured .cur { color: rgba(255,255,255,.5); }
.per { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.pricing-card.featured .per { color: rgba(255,255,255,.45); }
.p-feats { text-align: left; margin-bottom: 32px; }
.p-feats li {
  font-size: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pricing-card.featured .p-feats li { border-color: rgba(255,255,255,.08); }
.p-feats li:last-child { border: none; }
.p-feats li.yes::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; }
.p-feats li.no  { color: var(--muted); }
.p-feats li.no::before { content: '✕'; color: var(--border); font-weight: 700; flex-shrink: 0; }
.pricing-card.featured .p-feats li.no { color: rgba(255,255,255,.25); }

.p-feats-bonus-label {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent);
  margin: -20px 0 8px;
}
.p-feats-bonus { margin-top: -4px; }

/* Počet podcastov v jeden deň – klikacie možnosti nad cenníkom, menia ceny/zľavu priamo v kartách */
.qty-options-box {
  max-width: 600px;
  margin: 28px auto 0;
  background: var(--gray);
  border-radius: var(--radius-sm);
  padding: 16px 28px;
  text-align: center;
}
.qty-options-text { font-size: 13.5px; font-weight: 600; color: var(--dark-2); margin-bottom: 12px; }
/* Na užších obrazovkách (mobil) nechaj text zalomiť normálne, nech nepreteká z boxu */
@media (min-width: 600px) {
  .qty-options-text { white-space: nowrap; }
}
.qty-options-box .qty-list { justify-content: center; }

/* Odznak zľavy, ktorý sa zjaví v cenníkovej karte pri 3+ podcastoch/deň */
.card-save-badge {
  align-self: center;
  margin-left: 2px;
  background: rgba(16,185,129,.12);
  color: var(--success);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
}
/* Bublinka s finálnou sumou za deň, vedľa odznaku zľavy */
.card-total-badge {
  align-self: center;
  margin-left: 2px;
  background: var(--accent-light);
  color: var(--accent-h);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}

/* ════════════════════════ SERVICE CARDS ════════════════════════ */
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.svc-ico {
  width: 44px; height: 44px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.svc-ico svg { width: 20px; height: 20px; stroke: var(--accent); }
.service-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.service-card p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* Zvýraznený trojblok najžiadanejších služieb */
.services-highlight { margin-bottom: 24px; }
.service-card.featured {
  background: var(--dark);
  border-color: transparent;
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.service-card.featured p { color: rgba(255,255,255,.6); }
.service-card.featured .svc-ico { background: rgba(99,102,241,.2); }
.service-card.featured .svc-ico svg { stroke: #A5B4FC; }

/* ════════════════════════ BOOKING ════════════════════════ */
.booking-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 32px;
  align-items: start;
}

/* Calendar */
.calendar-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cal-nav h3 { font-size: 16px; font-weight: 700; }
.cal-nav button {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: var(--gray);
  font-size: 22px;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  line-height: 1;
}
.cal-nav button:hover { background: var(--accent-light); color: var(--accent); }
.cal-weekdays {
  display: grid;
  /* minmax(0, 1fr) – bez toho môže automatická minimálna veľkosť buniek
     roztiahnuť stĺpce mimo kalendár (Safari + aspect-ratio v .cal-day) */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}
.cal-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  padding: 4px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-day {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  border: 1.5px solid transparent;
}
.cal-day:hover { background: var(--accent-light); color: var(--accent); }
.cal-day.today {
  font-weight: 700;
  border-color: var(--accent);
  color: var(--accent);
}
.cal-day.selected {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.cal-day.past   { color: #D1D5DB; cursor: default; pointer-events: none; }
.cal-day.empty  { pointer-events: none; }

/* Obsadenosť dňa – žltá čiastočne, červená úplne (aj cez .today/.selected) */
.cal-day.partial { background: #FEF3C7; color: #92622A; }
.cal-day.partial:hover { background: #FDE68A; }
.cal-day.full { background: #FEE2E2; color: #DC2626; }
.cal-day.full:hover { background: #FECACA; }
.cal-day.full.selected { background: #DC2626; color: var(--white); border-color: #DC2626; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cal-dot-partial { background: #FEF3C7; border: 1.5px solid #F59E0B; }
.cal-dot-full     { background: #FEE2E2; border: 1.5px solid #DC2626; }

/* Slots */
.booking-right {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  min-height: 340px;
}
.booking-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 280px;
  gap: 16px;
  color: var(--muted);
  text-align: center;
}
.booking-placeholder svg { width: 48px; height: 48px; stroke: var(--border); }
.booking-placeholder p { font-size: 15px; max-width: 260px; }

.booking-full-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 280px;
  gap: 14px;
  text-align: center;
  padding: 0 12px;
}
.booking-full-notice svg { width: 40px; height: 40px; stroke: #DC2626; flex-shrink: 0; }
.booking-full-notice h4 { font-size: 17px; font-weight: 700; }
.booking-full-notice p { font-size: 14px; color: var(--muted); max-width: 320px; line-height: 1.6; }
.booking-full-notice a { color: var(--accent); font-weight: 600; }

.time-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}
.ts-btn {
  padding: 10px 4px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--white);
  transition: all var(--transition);
  cursor: pointer;
}
.ts-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.ts-btn.selected { background: var(--accent); color: var(--white); border-color: var(--accent); }
.ts-btn:disabled { background: var(--gray); color: #D1D5DB; cursor: not-allowed; font-size: 11px; }

/* Booking form – číslované kroky, ktoré sa odkrývajú postupne */
[hidden] { display: none !important; }

.b-step { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); }
.b-step:first-child,
#step-time { padding-top: 0; margin-top: 0; border-top: none; }
.b-step .step-next { margin-top: 4px; }

.step-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.step-head h4 { font-size: 16px; font-weight: 700; }
.step-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }

.field-hint  { font-size: 12px; color: var(--muted); }
.field-error { font-size: 12px; color: #DC2626; font-weight: 600; }
.field-error:empty { display: none; }
.fg.invalid input,
.fg.invalid select,
.fg.invalid textarea { border-color: #DC2626; }

/* Dĺžka rezervácie – slider */
.duration-box {
  background: var(--gray);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.duration-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.duration-head label { font-size: 13px; font-weight: 600; color: var(--dark-2); }
#duration-label { font-size: 15px; font-weight: 700; color: var(--accent); }
#b-duration {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.duration-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* Balíčky – výberové karty */
.pkg-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.pkg-card {
  position: relative;
  display: block;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.pkg-card:hover { border-color: var(--accent); }
.pkg-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pkg-card:has(input:checked) {
  border-color: var(--accent);
  border-width: 2px;
  padding: 17.5px 19.5px;          /* kompenzuje hrubší okraj, aby karta neposkočila */
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.pkg-card:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(99,102,241,.3); }
.pkg-body  { display: block; }
.pkg-name  { display: block; font-size: 17px; font-weight: 700; }
.pkg-price { display: block; font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.pkg-desc  { display: block; font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 10px; }

/* Počet podcastov v tento deň – zvýhodnená cena za viac nahrávok, viď #cennik .qty-options-box */
.qty-select { margin: 20px 0 8px; }
.qty-select-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.qty-list { display: flex; flex-wrap: wrap; gap: 10px; }
.qty-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: border-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.qty-card input { position: absolute; opacity: 0; pointer-events: none; }
.qty-card:hover { border-color: var(--accent); }
.qty-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-h);
}
.qty-card:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(99,102,241,.3); }
.volume-price-note:empty { display: none; }
.volume-price-note strong { color: var(--text); }

/* Zhrnutie */
.summary-list {
  background: var(--gray);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
.summary-list dt { color: var(--muted); }
.summary-list dd { font-weight: 600; }

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark-2);
  margin-bottom: 16px;
  cursor: pointer;
}
.consent-row input { width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }

.fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.fg-narrow { max-width: 220px; }
.fg label { font-size: 13px; font-weight: 600; color: var(--dark-2); }
.fg input, .fg select, .fg textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.fg textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* hCaptcha widget – the iframe is 303px wide, so it scales down on narrow phones */
.captcha-box { margin-bottom: 16px; min-height: 78px; }
.captcha-box:empty { min-height: 0; margin-bottom: 0; }
@media (max-width: 380px) {
  .captcha-box { transform: scale(.88); transform-origin: 0 0; min-height: 70px; }
}

/* Success / Error */
.success-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  gap: 12px;
}
.success-ico {
  width: 56px; height: 56px;
  background: #DCFCE7;
  color: var(--success);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.success-msg h4 { font-size: 20px; font-weight: 700; }
.success-msg p  { color: var(--muted); font-size: 15px; max-width: 300px; }

/* ════════════════════════ REVIEWS ════════════════════════ */
/* Kým máme len jednu recenziu, vycentruj ju na desktope.
   Po pridaní ďalších sa grid automaticky vráti na 4 stĺpce. */
#reviews-track.cards-4:has(> :only-child) {
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
}
.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.stars { color: #FBBF24; font-size: 16px; letter-spacing: 1px; margin-bottom: 14px; }
.review-card > p { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.reviewer { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 38px; height: 38px;
  background: var(--accent);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.reviewer strong { font-size: 14px; font-weight: 700; display: block; }
.reviewer span   { font-size: 12px; color: var(--muted); }

/* Carousel na PC nerobí nič – .cards-4 ostáva bežná mriežka, šípky/bodky sú skryté */
.reviews-carousel { position: relative; }
.carousel-arrow, .carousel-dots { display: none; }
/* Kým je v tracku len jedna karta, šípky/bodky (aj na mobile) nemajú čo ovládať */
.reviews-carousel:has(#reviews-track.cards-4 > :only-child) .carousel-arrow,
.reviews-carousel:has(#reviews-track.cards-4 > :only-child) .carousel-dots {
  display: none;
}

/* ════════════════════════ GOOGLE REVIEW CTA ════════════════════════ */
.review-cta {
  margin-top: 48px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-h) 100%);
  border-radius: 28px;
  padding: 48px 32px;
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.review-cta-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.review-cta-icon svg { width: 24px; height: 24px; stroke: var(--white); }
.review-cta h2 { color: var(--white); font-size: 26px; margin-bottom: 12px; }
.review-cta > p {
  color: rgba(255,255,255,.85);
  font-size: 15px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 24px;
}
.review-cta textarea {
  width: 100%;
  resize: vertical;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(255,255,255,.95);
  color: var(--text);
  margin-bottom: 16px;
}
.review-cta textarea:focus { outline: 3px solid rgba(255,255,255,.4); }
.btn-review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  background: var(--white);
  color: var(--text);
  font-weight: 700;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-review:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.btn-review svg { width: 20px; height: 20px; flex-shrink: 0; }
.review-cta-note {
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
  min-height: 16px;
}

/* ════════════════════════ GALLERY ════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Zbalená galéria – viditeľných 6 fotiek, zvyšok skrytý za tlačidlom */
.gallery-wrap { position: relative; }
.gallery-wrap.collapsed .gal-item:nth-child(n+7) { display: none; }
/* Jemný gradient prekrývajúci posledný viditeľný rad */
.gallery-wrap.collapsed::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--white) 92%);
  pointer-events: none;
}
.gallery-more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.gal-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  background: var(--dark-2);
}
.gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gal-item:hover img { transform: scale(1.06); }
.gal-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%);
  display: flex; align-items: flex-end;
  padding: 16px;
  opacity: 0;
  transition: opacity var(--transition);
}
.gal-item:hover .gal-overlay { opacity: 1; }
.gal-overlay span { color: var(--white); font-size: 14px; font-weight: 600; }

/* Lightbox */
#lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 2000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
}
#lightbox[style*="none"] { display: none !important; }
#lb-img {
  max-width: 90vw;
  max-height: 78vh;
  border-radius: var(--radius);
  object-fit: contain;
}
#lb-caption { color: rgba(255,255,255,.6); font-size: 14px; }
#lb-close {
  position: absolute;
  top: 20px; right: 24px;
  color: var(--white);
  font-size: 22px;
  background: rgba(255,255,255,.12);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
#lb-close:hover { background: rgba(255,255,255,.25); }
#lb-prev, #lb-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  color: var(--white);
  font-size: 36px;
  background: rgba(255,255,255,.1);
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
#lb-prev { left: 20px; }
#lb-next { right: 20px; }
#lb-prev:hover, #lb-next:hover { background: rgba(255,255,255,.25); }

/* ════════════════════════ FAQ ════════════════════════ */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  transition: color var(--transition);
}
.faq-q:hover { color: var(--accent); }
.faq-ico {
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform .25s ease;
  line-height: 1;
}
.faq-item.open .faq-ico { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .2s;
}
.faq-a p {
  padding-bottom: 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.faq-a a { color: var(--accent); text-decoration: underline; }
.faq-item.open .faq-a { max-height: 300px; }

/* ════════════════════════ CONTACT ════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.contact-info-card {
  background: var(--gray);
  border-radius: var(--radius);
  padding: 32px 28px;
  margin-bottom: 20px;
}
.contact-info-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.ci {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  transition: color var(--transition);
}
.ci:last-of-type { border: none; }
a.ci:hover { color: var(--accent); }
.ci svg { width: 18px; height: 18px; stroke: var(--accent); flex-shrink: 0; }
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.soc-btn {
  width: 40px; height: 40px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  color: var(--text);
}
.soc-btn svg { width: 18px; height: 18px; }
.soc-btn:hover { background: var(--accent); color: var(--white); border-color: var(--accent); }
/* Mapa vľavo / fotky okolia vpravo – rovnaká výška, pomer stĺpcov ako .contact-grid */
.map-photo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  height: 320px;
}
.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); height: 100%; }

.location-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.location-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.location-photo:hover img { transform: scale(1.05); }
.location-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.08) 50%, transparent 75%);
  display: flex;
  align-items: flex-end;
  padding: 16px 18px;
}
.location-photo-overlay span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
}
.location-photo-overlay svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ════════════════════════ FOOTER ════════════════════════ */
footer {
  background: var(--dark);
  color: rgba(255,255,255,.6);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 56px;
  padding-bottom: 48px;
  text-align: center;
}
.footer-brand { max-width: 280px; display: flex; flex-direction: column; align-items: center; }
.footer-brand .logo { margin-bottom: 12px; justify-content: center; }
.footer-logo-img { height: 40px; width: auto; display: block; }
.footer-brand p { font-size: 14px; line-height: 1.6; }
.footer-nav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.footer-nav a {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  padding: 6px 10px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.footer-nav a:hover { color: var(--white); background: rgba(255,255,255,.08); }
.footer-socials { display: flex; gap: 10px; }
.soc-icon {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  transition: all var(--transition);
}
.soc-icon svg { width: 16px; height: 16px; }
.soc-icon:hover { background: var(--accent); color: var(--white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
}
.footer-bottom p { font-size: 13px; text-align: center; color: rgba(255,255,255,.35); }

/* Návrat na vrch – tlačidlo existuje len na telefóne (viď media query nižšie) */
#back-to-top { display: none; }

/* ════════════════════════ SCROLL ANIMATIONS ════════════════════════ */
.anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
.anim.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════ RESPONSIVE ════════════════════════ */
@media (max-width: 1024px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .booking-layout { grid-template-columns: 1fr; }
  .calendar-box { max-width: 400px; }
}

@media (max-width: 768px) {
  section { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }

  /* Nav mobile */
  #hamburger { display: flex; }
  /* Panel len pri pravom okraji, vysúva sa zboku */
  #nav-menu {
    position: fixed;
    /* Odsadené od hornej lišty aj od pravého okraja – pôsobí ako plávajúca karta */
    top: calc(var(--nav-h) + 12px);
    right: 12px;
    left: auto;
    /* Šírka sa prispôsobí najširšej položke, na úzkych displejoch ju
       strop udrží v rozumných medziach */
    width: max-content;
    max-width: min(78vw, 320px);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    gap: 6px;
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }
  #nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* display:block – inline odkaz by vertikálny padding nepremietol do výšky
     a položky by sa opticky zlievali */
  .nav-link {
    display: block;
    color: var(--text) !important;
    padding: 13px 16px;
    font-size: 15px;
  }
  .nav-link:hover { background: var(--gray) !important; color: var(--text) !important; }
  .nav-cta { background: var(--accent) !important; color: var(--white) !important; text-align: left; }

  /* Hero */
  /* Fotka posunutá tak, aby bolo viac vidno jej pravú stranu (namiesto stredu) */
  .hero-bg { background-position: 82% center; }
  /* Menší presah vľavo než na desktope – box zúžený zľava (padding-left aj margin-left
     zmenšené rovnako, aby "p" zostalo zarovnané s "T"/"s" nad ním) */
  .accent-box { padding-left: 8px; margin-left: -8px; }
  /* Posunuté o kúsok doprava – .accent-box aj tak presahuje vľavo mimo textového stĺpca,
     takže bez tohto by bol na mobile prilepený takmer o okraj obrazovky */
  .hero-content { padding-left: 32px; }
  /* Výraznejší (nie väčší – rovnaká výška) spodný gradient: začína na 80 % namiesto 58 % */
  .hero-bottom-glow {
    background: linear-gradient(to top, rgba(99,102,241,.8) 0%, rgba(18,24,38,.45) 65%, rgba(18,24,38,0) 100%);
  }
  .hero-content .eyebrow {
    font-size: 11px;
    letter-spacing: .5px;
  }
  /* Zvyšok textu ("· len 20 min od Žiliny") sa na mobile skryje, ostane len "Podcastové štúdio" */
  .eyebrow-extra { display: none; }
  .hero-content h1 {
    letter-spacing: 0;
    line-height: 1.05;
  }
  .hero-sub {
    font-size: 15px;
    line-height: 1.5;
  }
  .hero-ctas .btn {
    padding: 10px 18px;
    font-size: 13px;
  }
  .hero-stats { gap: 20px; }
  .stat .num  { font-size: 24px; }

  /* Grids */
  .cards-3, .pricing-grid { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: 1fr; }
  .promo-steps { gap: 10px 20px; }
  /* Na mobile len 2 fotky – posledná (pravá) sa skryje, zvyšné 2 zaberú celý riadok */
  .promo-photos { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 32px; }
  .promo-photo:nth-child(3) { display: none; }
  /* Jemný posun, aby bolo o kúsok viac vidno pravú stranu fotky */
  .promo-photo:nth-child(1) img { object-position: 58% center; }

  /* Recenzie – vodorovný carousel, vždy presne jedna karta na šírku */
  .reviews-carousel { padding: 0 6px; }
  #reviews-track.cards-4 {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #reviews-track.cards-4::-webkit-scrollbar { display: none; }
  #reviews-track .review-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .carousel-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    color: var(--accent);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 20px;
    line-height: 1;
    z-index: 2;
  }
  .carousel-arrow-prev { left: -6px; }
  .carousel-arrow-next { right: -6px; }
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }
  .carousel-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border);
    padding: 0;
    transition: background var(--transition), transform var(--transition);
  }
  .carousel-dot.active { background: var(--accent); transform: scale(1.2); }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-wrap.collapsed .gal-item:nth-child(n+5) { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .map-photo-row { grid-template-columns: 1fr; height: auto; }
  .map-wrap, .location-photo { height: 240px; }
  .pricing-card.featured { transform: none; }

  /* Footer – na telefóne bez navigačného menu, aby bol kratší */
  .footer-nav { display: none; }

  /* Time slots */
  .time-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 1fr; }

  /* Booking */
  .calendar-box { max-width: 100%; }

  /* Lightbox – šípky ostávajú (len menšie), navyše funguje aj swipe */
  #lightbox { padding: 20px 12px; gap: 12px; }
  #lb-prev, #lb-next { width: 42px; height: 42px; font-size: 28px; }
  #lb-prev { left: 6px; }
  #lb-next { right: 6px; }
  #lb-close { top: 12px; right: 12px; }

  /* Návrat na vrch – len na telefóne, zobrazí sa po odscrollovaní (JS pridáva/odoberá [hidden]) */
  #back-to-top:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 500;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--white);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background var(--transition), transform var(--transition);
  }
  #back-to-top svg { width: 20px; height: 20px; }
  #back-to-top:hover { background: var(--accent-h); }
  #back-to-top:active { transform: scale(.94); }

  /* Google recenzia – užší box na telefóne, tlačidlo sa už do neho zmestí */
  .review-cta { padding: 36px 20px; }
  .btn-review { width: 100%; padding: 13px 16px; }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-stats { flex-wrap: wrap; gap: 16px; }
  .stat-sep { display: none; }
  .studio-tags { gap: 8px; margin-top: 20px; }
  .studio-tag { font-size: 12.5px; padding: 8px 13px; }

  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-wrap.collapsed .gal-item:nth-child(n+4) { display: none; }
  .gallery-wrap.collapsed::after { height: 110px; }
  .time-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #lb-img { max-width: 95vw; }
}