/* Fotoboxik.cz – královská modrá / zlato, slavnostní */



*,

*::before,

*::after {

  box-sizing: border-box;

}



:root {

  --bg: #0c1228;

  --bg-mid: #121a36;

  --ink: #eef1f8;

  --ink-soft: #b8c0d6;

  --ink-muted: #7e8aa8;

  --dark: #070b18;

  --navy: #152047;

  --navy-deep: #0a1024;

  --royal: #1e3a8a;

  --royal-bright: #2d4fb8;

  --gold: #d4af37;

  --gold-light: #f0d78c;

  --gold-soft: rgba(212, 175, 55, 0.18);

  --gold-glow: rgba(212, 175, 55, 0.35);

  --blue-soft: rgba(45, 79, 184, 0.25);

  --glass: rgba(18, 26, 54, 0.55);

  --glass-border: rgba(212, 175, 55, 0.18);

  --glass-light: rgba(255, 255, 255, 0.06);

  --line: rgba(238, 241, 248, 0.08);

  --font: "Plus Jakarta Sans", system-ui, sans-serif;

  --max: 76rem;

  --header-h: 5.25rem;

  --radius: 1rem;

  --radius-lg: 1.35rem;

  --radius-xl: 1.75rem;

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --transition: 0.35s var(--ease);

}



html {

  scroll-behavior: auto;

}



body {

  margin: 0;

  font-family: var(--font);

  font-size: 1rem;

  line-height: 1.7;

  color: var(--ink);

  background: var(--bg);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;

  overflow-x: hidden;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  color: inherit;

}



h1, h2, h3, h4 {

  margin: 0;

  line-height: 1.15;

  letter-spacing: -0.03em;

  font-weight: 700;

}



p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }



.container {

  width: min(100% - 1.75rem, var(--max));

  margin-inline: auto;

}



/* ── Animated royal background ── */

.bg-mesh {

  position: fixed;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;

  background:

    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30, 58, 138, 0.45), transparent 55%),

    linear-gradient(165deg, #070b18 0%, #0c1228 40%, #121a36 100%);

}



.bg-blob {

  position: absolute;

  border-radius: 50%;

  filter: blur(100px);

  opacity: 0.22;

}



.bg-blob--1 {

  width: min(70vw, 520px);

  height: min(70vw, 520px);

  top: -8%;

  right: -8%;

  background: radial-gradient(circle, rgba(212, 175, 55, 0.45) 0%, transparent 70%);

}



.bg-blob--2 {

  width: min(65vw, 480px);

  height: min(65vw, 480px);

  bottom: 5%;

  left: -10%;

  background: radial-gradient(circle, rgba(45, 79, 184, 0.55) 0%, transparent 70%);

}



.bg-blob--3 {

  width: min(50vw, 380px);

  height: min(50vw, 380px);

  top: 42%;

  left: 40%;

  background: radial-gradient(circle, rgba(80, 110, 200, 0.3) 0%, transparent 70%);

}



/* Sparkle layer – disabled */

.bg-mesh::before,

.bg-mesh::after {

  content: none;

}



@keyframes drift-a {

  from { transform: translate(0, 0); }

  to   { transform: translate(-2vw, 3vh); }

}



@keyframes drift-b {

  from { transform: translate(0, 0); }

  to   { transform: translate(2vw, -2vh); }

}



@keyframes drift-c {

  from { transform: translate(0, 0); }

  to   { transform: translate(-1vw, -2vh); }

}



@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {

  .bg-blob--1 { animation: drift-a 30s linear infinite alternate; }

  .bg-blob--2 { animation: drift-b 36s linear infinite alternate; }

}



/* ── Stars: rozptýlené vrstvy s hloubkou (bez animace) ── */

.stars {

  position: fixed;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.7s ease;

  overflow: hidden;

}



.stars--visible {

  opacity: 1;

}



/* vzdálený prach / mlhovina – hloubka pozadí */

.stars::before,

.stars::after {

  content: "";

  position: absolute;

  inset: -10%;

  pointer-events: none;

}



.stars::before {

  background:

    radial-gradient(1.5px 1.5px at 8% 12%, rgba(255, 255, 255, 0.35), transparent),

    radial-gradient(1px 1px at 18% 28%, rgba(255, 255, 255, 0.22), transparent),

    radial-gradient(1.5px 1.5px at 32% 8%, rgba(240, 215, 140, 0.2), transparent),

    radial-gradient(1px 1px at 46% 36%, rgba(255, 255, 255, 0.18), transparent),

    radial-gradient(1.5px 1.5px at 62% 14%, rgba(255, 255, 255, 0.28), transparent),

    radial-gradient(1px 1px at 74% 42%, rgba(255, 255, 255, 0.16), transparent),

    radial-gradient(1.5px 1.5px at 88% 22%, rgba(240, 215, 140, 0.18), transparent),

    radial-gradient(1px 1px at 12% 58%, rgba(255, 255, 255, 0.2), transparent),

    radial-gradient(1.5px 1.5px at 28% 72%, rgba(255, 255, 255, 0.25), transparent),

    radial-gradient(1px 1px at 54% 64%, rgba(255, 255, 255, 0.15), transparent),

    radial-gradient(1.5px 1.5px at 70% 78%, rgba(240, 215, 140, 0.16), transparent),

    radial-gradient(1px 1px at 92% 68%, rgba(255, 255, 255, 0.22), transparent),

    radial-gradient(1px 1px at 40% 88%, rgba(255, 255, 255, 0.18), transparent),

    radial-gradient(1.5px 1.5px at 6% 84%, rgba(255, 255, 255, 0.2), transparent);

  opacity: 0.55;

}



.stars::after {

  background:

    radial-gradient(ellipse 50% 35% at 20% 15%, rgba(45, 79, 184, 0.12), transparent 70%),

    radial-gradient(ellipse 40% 30% at 78% 25%, rgba(212, 175, 55, 0.06), transparent 70%),

    radial-gradient(ellipse 45% 40% at 55% 80%, rgba(30, 58, 138, 0.1), transparent 70%);

  opacity: 0.9;

}



.star {

  position: absolute;

  border-radius: 50%;

  background: #fff;

  transform: translate(-50%, -50%);

}



.star--far {

  width: 1.5px;

  height: 1.5px;

  opacity: 0.28;

  background: rgba(255, 255, 255, 0.85);

}



.star--mid {

  width: 2.25px;

  height: 2.25px;

  opacity: 0.55;

  background: #fff;

  box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.35);

}



.star--near {

  width: 3px;

  height: 3px;

  opacity: 0.9;

  background: #fff;

  box-shadow:

    0 0 6px 1px rgba(255, 255, 255, 0.55),

    0 0 14px 2px rgba(240, 215, 140, 0.22);

}



.star--gold {

  width: 3.5px;

  height: 3.5px;

  background: #f5ecc4;

  box-shadow:

    0 0 8px 2px rgba(240, 215, 140, 0.45),

    0 0 18px 3px rgba(212, 175, 55, 0.18);

}



@media (max-width: 768px) {

  .stars::before {

    opacity: 0.4;

  }



  .star--far {

    opacity: 0.22;

  }



  .star--mid {

    opacity: 0.48;

    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.28);

  }



  .star--near {

    width: 2.75px;

    height: 2.75px;

    box-shadow:

      0 0 5px 1px rgba(255, 255, 255, 0.45),

      0 0 10px 2px rgba(240, 215, 140, 0.18);

  }

}



/* Content above stars */

main,

.site-footer {

  position: relative;

  z-index: 2;

}



.back-to-top,

.cookie-banner {

  z-index: 150;

}



/* ── Surfaces (bez blur – ostrý text i obrázky) ── */

.glass {

  background: rgba(18, 26, 54, 0.92);

  border: 1px solid var(--glass-border);

  box-shadow: var(--shadow);

}



.glass-dark {

  background: rgba(7, 11, 24, 0.94);

  border: 1px solid var(--glass-border);

  color: #fff;

}



/* ── Header ── */

.site-header {

  position: fixed;

  inset: 0 0 auto;

  z-index: 100;

  display: flex;

  align-items: center;

  background: rgba(7, 11, 24, 0.94);

  border-bottom: 1px solid rgba(212, 175, 55, 0.12);

  padding-top: env(safe-area-inset-top, 0);

  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));

}



.header-inner {

  display: flex;

  align-items: center;

  width: min(100% - 1.25rem, var(--max));

  margin-inline: auto;

  gap: 0.75rem;

}



.logo-link {

  display: flex;

  align-items: center;

  text-decoration: none;

  flex-shrink: 0;

  z-index: 102;

}



.logo-link img {

  height: 2.45rem;

  width: auto;

}



@media (min-width: 769px) {

  .logo-link img { height: 3.1rem; }

}



@media (min-width: 769px) and (max-width: 1100px) {

  :root {

    --header-h: 5.5rem;

  }



  .logo-link img {

    height: 3.45rem;

  }



  .site-nav a {

    font-size: 0.95rem;

    padding: 0.55rem 0.95rem;

  }



  .header-social .social-link {

    width: 2.35rem;

    height: 2.35rem;

  }



  .header-social .social-link svg {

    width: 1.1rem;

    height: 1.1rem;

  }



  .header-inner {

    width: min(100% - 1.5rem, var(--max));

    gap: 1rem;

  }

}



@media (max-width: 640px) {

  .hero-bg img {

    object-position: center 22%;

  }

}



.header-actions {

  display: flex;

  align-items: center;

  gap: 0.55rem;

  margin-left: auto;

  flex-shrink: 0;

  z-index: 102;

}



.header-social {

  display: none;

  align-items: center;

  gap: 0.45rem;

  margin: 0;

  padding: 0;

  line-height: 0;

}



@media (min-width: 769px) {

  .header-social { display: inline-flex; }

}



.header-social.social-links {

  margin-top: 0;

  gap: 0.45rem;

}



.header-social .social-link {

  width: 2.25rem;

  height: 2.25rem;

  margin: 0;

  flex-shrink: 0;

  transform: none;

}



.header-social .social-link svg {

  width: 1.05rem;

  height: 1.05rem;

  display: block;

}



.header-social .social-link:hover {

  transform: none;

}



.nav-toggle {

  display: none;

  align-items: center;

  justify-content: center;

  width: 2.75rem;

  height: 2.75rem;

  padding: 0;

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(212, 175, 55, 0.38);

  border-radius: 0.8rem;

  color: #fff;

  cursor: pointer;

  transition: background 0.2s ease, border-color 0.2s ease;

}



.nav-toggle:hover,

.nav-toggle.is-open {

  background: rgba(212, 175, 55, 0.14);

  border-color: rgba(240, 215, 140, 0.55);

}



.hamburger {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 5px;

  width: 1.2rem;

}



.hamburger span {

  display: block;

  height: 2px;

  width: 100%;

  background: var(--gold-light);

  border-radius: 2px;

  transform-origin: center;

  transition: transform 0.28s var(--ease), opacity 0.2s ease, width 0.2s ease;

}



.hamburger span:nth-child(2) {

  width: 75%;

  margin-left: auto;

}



.nav-toggle.is-open .hamburger span:nth-child(1) {

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

}



.nav-toggle.is-open .hamburger span:nth-child(2) {

  opacity: 0;

  width: 100%;

}



.nav-toggle.is-open .hamburger span:nth-child(3) {

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

}



.site-nav {

  display: flex;

  align-items: center;

}



.site-nav ul {

  display: flex;

  align-items: center;

  gap: 0.2rem;

  list-style: none;

  margin: 0;

  padding: 0;

}



.nav-social {

  display: none !important;

}



.site-nav a {

  text-decoration: none;

  color: rgba(238, 241, 248, 0.78);

  font-size: 0.875rem;

  font-weight: 500;

  padding: 0.5rem 0.85rem;

  border-radius: 999px;

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

}



.site-nav a:hover,

.site-nav a[aria-current="page"],

.site-nav a[aria-current="true"],

.site-nav a.is-active {

  color: var(--gold-light);

  background: rgba(212, 175, 55, 0.12);

}



.site-nav .nav-cta {

  background: linear-gradient(135deg, var(--gold) 0%, #c9a227 100%);

  color: var(--dark);

  margin-left: 0.35rem;

  font-weight: 700;

}



.site-nav .nav-cta:hover {

  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);

  color: var(--dark);

}



.site-nav .nav-cta.is-active,

.site-nav .nav-cta[aria-current="true"] {

  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);

  color: var(--dark);

  box-shadow: 0 0 0 2px rgba(240, 215, 140, 0.45);

}



@media (min-width: 769px) {

  .site-nav {

    order: 2;

    margin-left: auto;

    margin-right: 2.75rem;

    align-items: center;

  }



  .header-actions {

    order: 3;

    margin-left: 0;

    align-items: center;

    align-self: center;

  }

}



/* ── Mobile header + full-screen menu ── */

@media (max-width: 768px) {

  :root {

    --header-h: 4.35rem;

  }



  .site-header {

    background: transparent;

    border-bottom-color: transparent;

  }



  .site-header.is-scrolled,

  body.nav-open .site-header {

    background: rgba(7, 11, 24, 0.96);

    border-bottom-color: rgba(212, 175, 55, 0.12);

  }



  .header-inner {

    display: grid;

    grid-template-columns: 2.75rem 1fr 2.75rem;

    align-items: center;

    width: 100%;

    padding-inline: 0.85rem;

    max-width: none;

    gap: 0;

  }



  .logo-link {

    grid-column: 2;

    justify-self: center;

  }



  .logo-link img {

    height: 3.15rem;

  }



  .header-actions {

    grid-column: 3;

    margin-left: 0;

    justify-self: end;

  }



  .header-social {

    display: none !important;

  }



  .nav-toggle {

    display: inline-flex;

  }



  .site-nav {

    display: flex;

    position: fixed;

    inset: 0;

    z-index: 101;

    flex-direction: column;

    align-items: stretch;

    justify-content: center;

    padding:

      calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem)

      1.5rem

      calc(2rem + env(safe-area-inset-bottom, 0px));

    background: #070b18;

    border: none;

    border-radius: 0;

    box-shadow: none;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(-0.5rem);

    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;

  }



  .site-nav.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: none;

  }



  .site-nav ul {

    flex-direction: column;

    align-items: stretch;

    gap: 0.35rem;

  }



  .site-nav ul a {

    display: block;

    padding: 1rem 0.25rem;

    font-size: 1.35rem;

    font-weight: 600;

    letter-spacing: -0.02em;

    border-radius: 0;

    color: #fff;

    background: transparent;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  }



  .site-nav ul a:hover,

  .site-nav ul a.is-active,

  .site-nav ul a[aria-current="page"],

  .site-nav ul a[aria-current="true"] {

    color: var(--gold-light);

    background: transparent;

  }



  .site-nav ul .nav-cta {

    margin: 1.25rem 0 0;

    text-align: center;

    border-bottom: none;

    border-radius: 999px;

    padding: 0.95rem 1.25rem;

    font-size: 1.05rem;

    background: linear-gradient(135deg, var(--gold) 0%, #c9a227 100%);

    color: var(--dark);

  }



  .site-nav ul .nav-cta:hover,

  .site-nav ul .nav-cta.is-active,

  .site-nav ul .nav-cta[aria-current="true"] {

    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);

    color: var(--dark);

    box-shadow: none;

  }



  .nav-social {

    display: flex !important;

    justify-content: center;

    align-items: center;

    gap: 0.85rem;

    margin-top: 2rem;

  }



  .nav-social.social-links {

    margin-top: 2rem;

  }



  .nav-social .social-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 3rem;

    height: 3rem;

    padding: 0;

    border: 1px solid rgba(212, 175, 55, 0.4);

    border-radius: 50%;

    border-bottom: 1px solid rgba(212, 175, 55, 0.4);

    background: rgba(212, 175, 55, 0.1);

    color: var(--gold-light);

    font-size: 0;

    line-height: 0;

  }



  .nav-social .social-link svg {

    display: block;

    width: 1.25rem;

    height: 1.25rem;

    flex-shrink: 0;

  }



  .nav-social .social-link:hover {

    background: var(--gold);

    color: var(--dark);

  }



  body.nav-open {

    overflow: hidden;

  }

}



/* ── Hero: celá fotka jako pozadí, text vlevo, plynulé přechody ── */

.hero {

  position: relative;

  z-index: 3;

  isolation: isolate;

  min-height: 100svh;

  display: flex;

  align-items: center;

  padding: calc(var(--header-h) + 1.5rem) 0 4.5rem;

  overflow: hidden;

  background: #070b18;

}



.hero-bg {

  position: absolute;

  inset: 0;

  z-index: 0;

}



.hero-bg picture,

.hero-bg img {

  width: 100%;

  height: 100%;

  display: block;

}



.hero-bg img {

  object-fit: cover;

  object-position: center center;

}



.hero-scrim {

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(

      105deg,

      #070b18 0%,

      rgba(7, 11, 24, 0.92) 28%,

      rgba(7, 11, 24, 0.55) 48%,

      rgba(7, 11, 24, 0.18) 68%,

      transparent 100%

    ),

    linear-gradient(

      180deg,

      rgba(7, 11, 24, 0.35) 0%,

      transparent 28%,

      transparent 58%,

      rgba(7, 11, 24, 0.55) 82%,

      #070b18 100%

    );

}



.hero-layout {

  position: relative;

  z-index: 2;

  width: min(100% - 1.75rem, var(--max));

}



.hero-copy {

  max-width: 32rem;

}



.hero-eyebrow {

  display: inline-block;

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 1rem;

  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);

}



.hero h1 {

  font-size: clamp(2.75rem, 9vw, 4.75rem);

  letter-spacing: -0.04em;

  line-height: 0.98;

  margin-bottom: 2rem;

  color: #fff;

  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);

}



.hero h1 span {

  display: block;

  font-weight: 500;

  color: rgba(240, 215, 140, 0.9);

  font-size: 0.55em;

  margin-top: 0.15em;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.65rem;

}



.scroll-down {

  position: absolute;

  left: 50%;

  bottom: 1.35rem;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 0.55rem;

  width: auto;

  height: auto;

  padding: 0.5rem 0.85rem;

  border-radius: 0;

  border: none;

  background: transparent;

  color: var(--gold-light);

  text-decoration: none;

  opacity: 1;

  transform: translateX(-50%);

  animation: scroll-hint 1.8s ease-in-out infinite;

}



.scroll-down-label {

  font-size: 0.72rem;

  font-weight: 650;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: rgba(240, 215, 140, 0.95);

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);

}



.scroll-down.is-hidden {

  opacity: 0;

  pointer-events: none;

  animation: none;

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

  transition: opacity 0.45s ease, transform 0.45s ease;

}



.scroll-down:hover {

  color: #fff;

  animation-play-state: paused;

}



.scroll-down:hover .scroll-down-label {

  color: #fff;

}



.scroll-down-icon {

  width: 0.7rem;

  height: 0.7rem;

  border-right: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: rotate(45deg);

  opacity: 0.9;

}



@keyframes scroll-hint {

  0%, 100% {

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

    opacity: 0.75;

  }

  50% {

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

    opacity: 1;

  }

}



/* Back to top */

.back-to-top {

  position: fixed;

  right: 1rem;

  bottom: 1rem;

  z-index: 150;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 2.75rem;

  height: 2.75rem;

  border-radius: 50%;

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

  color: var(--dark);

  text-decoration: none;

  font-size: 1.15rem;

  font-weight: 700;

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

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(14px) scale(0.92);

  transition:

    opacity 0.55s var(--ease),

    transform 0.55s var(--ease),

    visibility 0.55s,

    box-shadow 0.45s var(--ease),

    filter 0.45s var(--ease);

}



.back-to-top.is-visible {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0) scale(1);

}



.back-to-top:hover {

  filter: brightness(1.08);

  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.35);

}



@media (max-width: 768px) {

  .back-to-top {

    right: 0.75rem;

    bottom: 5.5rem;

  }

}



@media (max-width: 768px) {

  .hero {

    align-items: center;

    justify-content: center;

    min-height: 100svh;

    min-height: 100dvh;

    height: 100svh;

    height: 100dvh;

    max-height: 100dvh;

    padding: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 calc(4rem + env(safe-area-inset-bottom, 0px));

    box-sizing: border-box;

    text-align: center;

  }



  .hero-bg img {

    object-fit: cover;

    object-position: center center;

  }



  .hero-scrim {

    background:

      linear-gradient(

        180deg,

        rgba(7, 11, 24, 0.55) 0%,

        rgba(7, 11, 24, 0.35) 22%,

        rgba(7, 11, 24, 0.45) 48%,

        rgba(7, 11, 24, 0.55) 72%,

        rgba(7, 11, 24, 0.88) 100%

      );

  }



  .hero-layout {

    width: min(100% - 1.5rem, var(--max));

    display: flex;

    justify-content: center;

    align-items: center;

  }



  .hero-copy {

    max-width: 100%;

    margin-inline: auto;

    text-align: center;

  }



  .hero-eyebrow {

    margin-bottom: 0.85rem;

    font-size: 0.8rem;

  }



  .hero h1 {

    font-size: clamp(2.85rem, 12.5vw, 3.75rem);

    margin-bottom: 1.35rem;

  }



  .hero h1 span {

    font-size: 0.58em;

  }



  .hero-actions {

    justify-content: center;

    gap: 0.7rem;

  }



  .hero-actions .btn {

    padding: 0.85rem 1.45rem;

    font-size: 0.95rem;

  }



  .scroll-down {

    bottom: 1.15rem;

  }

}



/* Krátké telefony – úvod se vejde celý */

@media (max-width: 768px) and (max-height: 720px) {

  .hero {

    padding-bottom: 2.75rem;

  }



  .hero h1 {

    font-size: clamp(2.4rem, 11vw, 3.15rem);

    margin-bottom: 1.05rem;

  }



  .hero-eyebrow {

    margin-bottom: 0.6rem;

  }

}



@media (max-width: 768px) and (max-height: 620px) {

  .hero h1 {

    font-size: clamp(2.15rem, 9.5vw, 2.75rem);

    margin-bottom: 0.85rem;

  }



  .hero-actions .btn {

    padding: 0.7rem 1.15rem;

    font-size: 0.88rem;

  }

}



/* ── Buttons ── */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.85rem 1.5rem;

  border-radius: 999px;

  font: inherit;

  font-size: 0.9375rem;

  font-weight: 600;

  text-decoration: none;

  border: none;

  cursor: pointer;

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

}



.btn:hover { transform: translateY(-1px); }



.btn-primary {

  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, #b8942a 100%);

  color: var(--dark);

  box-shadow: 0 6px 24px var(--gold-glow);

  font-weight: 700;

}



.btn-primary:hover {

  background: linear-gradient(135deg, #fff0b8 0%, var(--gold-light) 50%, var(--gold) 100%);

  color: var(--dark);

}



.btn-secondary {

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

  border: 1px solid rgba(212, 175, 55, 0.35);

}



.btn-secondary:hover {

  background: rgba(212, 175, 55, 0.15);

  color: #fff;

}



.btn-ghost {

  background: transparent;

  color: rgba(255, 255, 255, 0.85);

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

}



.btn-ghost:hover {

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

}



.btn-dark {

  background: linear-gradient(135deg, var(--royal-bright) 0%, var(--royal) 100%);

  color: #fff;

  width: 100%;

}



.btn-dark:hover {

  background: linear-gradient(135deg, #3a5fd0 0%, var(--royal-bright) 100%);

  color: #fff;

}



/* ── Sections – clear rhythm between blocks ── */

.section {

  position: relative;

  padding: clamp(3.75rem, 8vw, 6.5rem) 0;

  transition: background-color 0.4s ease;

}



.section::before {

  content: "";

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: min(14rem, 45%);

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--gold), transparent);

  opacity: 0.65;

}



.section::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4rem;

  background: linear-gradient(180deg, rgba(212, 175, 55, 0.04), transparent);

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.4s ease;

}



.section:hover::after {

  opacity: 1;

}



.section--panel {

  background:

    linear-gradient(180deg, rgba(18, 26, 54, 0.28) 0%, rgba(12, 18, 40, 0.18) 100%);

  border-block: 1px solid rgba(212, 175, 55, 0.1);

}



#nabizime.section--panel {

  background:

    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(30, 58, 138, 0.28), transparent 65%),

    linear-gradient(180deg, rgba(22, 32, 70, 0.32) 0%, rgba(12, 18, 40, 0.18) 100%);

}



.section--accent {

  background:

    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 58, 138, 0.2), transparent 70%),

    rgba(7, 11, 24, 0.12);

  border-block: 1px solid rgba(45, 79, 184, 0.22);

}



.section--deep {

  background:

    linear-gradient(180deg, rgba(7, 11, 24, 0.35) 0%, rgba(15, 24, 55, 0.25) 100%);

  border-block: 1px solid rgba(212, 175, 55, 0.16);

}



.section-label {

  display: inline-block;

  font-size: 0.6875rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 0.75rem;

}



.glass-dark .section-label { color: var(--gold-light); }



.section-header h2 {

  font-size: clamp(1.75rem, 4.5vw, 2.75rem);

  margin-bottom: 1rem;

  color: #fff;

}



.section-header--center {

  text-align: center;

  margin-inline: auto;

  max-width: 42rem;

  margin-bottom: 2.5rem;

}



.section-lead {

  font-size: 1.0625rem;

  color: rgba(220, 226, 242, 0.88);

  line-height: 1.75;

}



/* ── Services grid (Fotokoutek nabízí) ── */

.services-grid {

  list-style: none;

  margin: 2rem auto 0;

  padding: 0;

  display: grid;

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

  gap: 1.5rem 1.25rem;

  max-width: 52rem;

}



.services-grid li {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 0.85rem;

  padding: 0.5rem;

  transition: transform 0.3s ease;

}



.services-grid li:hover {

  transform: translateY(-4px);

}



.services-icon {

  width: 4.25rem;

  height: 4.25rem;

  color: var(--gold);

  display: flex;

  align-items: center;

  justify-content: center;

}



.services-icon svg {

  width: 3rem;

  height: 3rem;

}



.services-name {

  font-size: clamp(1.05rem, 2.4vw, 1.2rem);

  font-weight: 650;

  letter-spacing: -0.02em;

  color: #fff;

  line-height: 1.35;

}



@media (max-width: 700px) {

  .services-grid {

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

    gap: 1.35rem 1rem;

  }

}



@media (max-width: 400px) {

  .services-grid {

    grid-template-columns: 1fr;

  }

}



.services-cta {

  display: flex;

  justify-content: center;

  margin-top: 2.25rem;

}



/* Social */

.social-links {

  display: flex;

  gap: 0.65rem;

  margin-top: 1.25rem;

}



.social-links--footer {

  margin-top: 0;

}



.social-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2.5rem;

  height: 2.5rem;

  border-radius: 50%;

  border: 1px solid rgba(212, 175, 55, 0.35);

  color: var(--gold-light);

  background: rgba(212, 175, 55, 0.08);

  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;

}



.social-link svg {

  width: 1.15rem;

  height: 1.15rem;

}



.social-link:hover {

  background: var(--gold);

  color: var(--dark);

  transform: translateY(-2px);

}



/* Reveal animations */

.reveal {

  opacity: 0;

  transform: translateY(18px);

  transition: opacity 0.55s ease, transform 0.55s ease;

}



.reveal.is-in {

  opacity: 1;

  transform: translateY(0);

}



.services-grid .reveal.is-in:nth-child(1) { transition-delay: 0.04s; }

.services-grid .reveal.is-in:nth-child(2) { transition-delay: 0.08s; }

.services-grid .reveal.is-in:nth-child(3) { transition-delay: 0.12s; }

.services-grid .reveal.is-in:nth-child(4) { transition-delay: 0.16s; }

.services-grid .reveal.is-in:nth-child(5) { transition-delay: 0.2s; }

.services-grid .reveal.is-in:nth-child(6) { transition-delay: 0.24s; }



@media (prefers-reduced-motion: reduce) {

  .reveal {

    opacity: 1;

    transform: none;

    transition: none;

  }

}



/* ── Slider – Naše tvorba ── */

.slider {

  position: relative;

  max-width: 58rem;

  margin-inline: auto;

  border-radius: var(--radius-xl);

  overflow: hidden;

  box-shadow: var(--shadow-lg);

  border: 1px solid rgba(212, 175, 55, 0.2);

  background: rgba(7, 11, 24, 0.6);

}



.slider-viewport {

  overflow: hidden;

  width: 100%;

}



.slider-track {

  display: flex;

  width: 100%;

  transition: transform 0.55s var(--ease);

  will-change: transform;

}



.slider-slide {

  flex: 0 0 100%;

  width: 100%;

  min-width: 100%;

  max-width: 100%;

  margin: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(7, 11, 24, 0.4);

  min-height: 12rem;

}



.slider-slide picture {

  display: block;

  width: 100%;

}



.slider-slide img {

  width: 100%;

  height: auto;

  max-height: min(48vw, 32rem);

  object-fit: contain;

  display: block;

}



@media (min-width: 1100px) {

  .slider {

    max-width: 68rem;

  }



  .slider-slide img {

    max-height: min(40vw, 36rem);

  }

}



@media (max-width: 640px) {

  .slider {

    max-width: 100%;

  }



  .slider-slide img {

    max-height: min(55vw, 16rem);

  }



  .slider-prev,

  .slider-next {

    width: 2.25rem;

    height: 2.25rem;

    font-size: 0.95rem;

  }

}



.slider-prev,

.slider-next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 2.5rem;

  height: 2.5rem;

  border: 1px solid rgba(212, 175, 55, 0.35);

  border-radius: 50%;

  background: rgba(7, 11, 24, 0.9);

  color: var(--gold-light);

  font-size: 1.05rem;

  cursor: pointer;

  box-shadow: var(--shadow);

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

  z-index: 2;

}



.slider-prev:hover,

.slider-next:hover {

  background: rgba(212, 175, 55, 0.25);

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

}



.slider-prev { left: 0.5rem; }

.slider-next { right: 0.5rem; }



.slider-dots {

  display: flex;

  justify-content: center;

  gap: 0.4rem;

  padding: 0.75rem;

  background: rgba(7, 11, 24, 0.85);

}



.slider-dot {

  width: 0.45rem;

  height: 0.45rem;

  padding: 0;

  border: none;

  border-radius: 50%;

  background: rgba(238, 241, 248, 0.25);

  cursor: pointer;

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

}



.slider-dot.is-active {

  background: var(--gold);

  transform: scale(1.3);

  box-shadow: 0 0 8px var(--gold-glow);

}



/* ── Steps ── */

.steps-grid {

  display: grid;

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

  gap: 1rem;

}



.step-card {

  padding: 1.75rem;

  border-radius: var(--radius-lg);

}



.step-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2rem;

  height: 2rem;

  margin-bottom: 1rem;

  background: var(--gold-soft);

  color: var(--gold-light);

  font-size: 0.8125rem;

  font-weight: 700;

  border-radius: 50%;

  border: 1px solid rgba(212, 175, 55, 0.35);

}



.step-card h3 {

  font-size: 1.0625rem;

  margin-bottom: 0.65rem;

  color: #fff;

}



.step-card p {

  font-size: 0.9375rem;

  color: var(--ink-soft);

}



@media (max-width: 768px) {

  .steps-grid { grid-template-columns: 1fr; }

}



/* ── Requirements ── */

.req-grid {

  display: grid;

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

  gap: 1rem;

}



.req-card {

  padding: 1.75rem 1.25rem;

  border-radius: var(--radius-lg);

  text-align: center;

  transition: transform var(--transition);

}



.req-card:hover { transform: translateY(-3px); }



.req-icon {

  width: 3rem;

  height: 3rem;

  margin: 0 auto 1rem;

  color: var(--gold);

}



.req-icon svg { width: 100%; height: 100%; }



.req-card--space,

.req-card--table,

.req-card--power,

.req-card--wifi {

  background: rgba(21, 32, 71, 0.5);

}



.req-card--space  { border-color: rgba(212, 175, 55, 0.28); }

.req-card--table  { border-color: rgba(45, 79, 184, 0.4); }

.req-card--power  { border-color: rgba(212, 175, 55, 0.22); }

.req-card--wifi   { border-color: rgba(45, 79, 184, 0.35); }



.req-card--space  .req-icon { color: var(--gold); }

.req-card--table  .req-icon { color: #7b9ef0; }

.req-card--power  .req-icon { color: var(--gold-light); }

.req-card--wifi   .req-icon { color: #9bb0f5; }



.req-card h4 {

  font-size: 0.9375rem;

  font-weight: 600;

  line-height: 1.4;

  color: #fff;

}



@media (max-width: 768px) {

  .req-grid { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 400px) {

  .req-grid { grid-template-columns: 1fr; }

}



/* ── Highlight banner ── */

.highlight-banner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;

  padding: clamp(1.75rem, 4vw, 2.5rem);

  border-radius: var(--radius-xl);

  flex-wrap: wrap;

}



.highlight-banner h2 {

  font-size: clamp(1.35rem, 3vw, 1.85rem);

  color: #fff;

}



.highlight-banner p {

  flex: 1 1 16rem;

  font-size: 0.9375rem;

  color: rgba(238, 241, 248, 0.65);

  line-height: 1.65;

}



.banner-spaced { margin-top: 2.5rem; }



/* ── Pricing ── */

.pricing-grid {

  display: grid;

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

  gap: 1rem;

  align-items: stretch;

}



.price-card {

  position: relative;

  display: flex;

  flex-direction: column;

  padding: 1.75rem 1.5rem;

  border-radius: var(--radius-lg);

  transition: transform var(--transition);

}



.price-card:hover { transform: translateY(-2px); }



.price-badge {

  position: absolute;

  top: 0.85rem;

  right: 0.85rem;

  padding: 0.28rem 0.65rem;

  border-radius: 999px;

  font-size: 0.625rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--dark);

  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);

  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);

}



.price-card--offer {

  border-color: rgba(212, 175, 55, 0.4) !important;

}



.price-card--offer h3 {

  padding-right: 6.5rem;

}



.price-card--featured {

  background: linear-gradient(160deg, rgba(30, 58, 138, 0.85) 0%, rgba(7, 11, 24, 0.9) 100%) !important;

  color: #fff;

  border-color: rgba(212, 175, 55, 0.45) !important;

  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.15);

}



.price-card--featured .price-features li { color: rgba(238, 241, 248, 0.65); }

.price-card--featured .price-amount { color: var(--gold-light); }



.price-card h3 {

  font-size: 1rem;

  margin-bottom: 1rem;

  color: #fff;

}



.price-amount {

  font-size: clamp(1.75rem, 4vw, 2.35rem);

  font-weight: 700;

  letter-spacing: -0.03em;

  line-height: 1.1;

  margin-bottom: 1.25rem;

  color: var(--gold);

}



.price-amount .price-currency {

  display: inline-block;

  margin-left: 0.2em;

  font-size: 0.48em;

  font-weight: 600;

  letter-spacing: 0.04em;

  vertical-align: 0.22em;

  color: var(--gold-light);

  opacity: 0.9;

}



.price-features {

  flex: 1;

  margin-bottom: 1.5rem;

}



.price-features li {

  position: relative;

  padding-left: 1.1rem;

  font-size: 0.8125rem;

  color: var(--ink-soft);

  margin-bottom: 0.45rem;

}



.price-features li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0.55em;

  width: 0.35rem;

  height: 0.35rem;

  border-radius: 50%;

  background: var(--gold);

}



.pricing-note {

  margin-top: 2rem;

  padding: 1.25rem 1.5rem;

  border-radius: var(--radius);

  font-size: 0.8125rem;

  color: var(--ink-muted);

  line-height: 1.65;

}



@media (max-width: 1100px) {

  .pricing-grid { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 520px) {

  .pricing-grid { grid-template-columns: 1fr; }

}



/* ── Contact ── */

.contact-layout {

  display: grid;

  gap: 2rem;

}



@media (min-width: 768px) {

  .contact-layout {

    grid-template-columns: 1fr 1fr;

    gap: 3rem;

    align-items: start;

  }

}



.contact-cards { display: grid; gap: 0.75rem; }



.contact-card {

  display: block;

  padding: 1.5rem;

  border-radius: var(--radius-lg);

  text-decoration: none;

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

}



.contact-card:hover {

  transform: translateY(-2px);

  border-color: rgba(212, 175, 55, 0.4);

}



.contact-card-label {

  display: block;

  font-size: 0.6875rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 0.35rem;

}



.contact-card-value {

  font-size: 1.125rem;

  font-weight: 600;

  letter-spacing: -0.02em;

  color: #fff;

}



.contact-meta {

  font-size: 0.875rem;

  color: var(--ink-muted);

  padding: 0.85rem 0.15rem 0;

  line-height: 1.65;

  max-width: 36rem;

}



.contact-meta p {

  margin: 0;

}



.contact-meta p + p { margin-top: 0.55rem; }



@media (max-width: 768px) {

  .contact-layout {

    gap: 1.5rem;

  }



  .contact-meta {

    padding: 1rem 0.35rem 0.25rem;

    font-size: 0.8125rem;

    text-align: left;

  }



  .contact-card {

    padding: 1.25rem 1.15rem;

  }

}



/* ── Footer ── */

.site-footer {

  position: relative;

  z-index: 2;

  background:

    radial-gradient(ellipse 60% 80% at 10% 0%, rgba(30, 58, 138, 0.22), transparent 55%),

    linear-gradient(180deg, #0a1020 0%, #070b18 100%);

  color: rgba(238, 241, 248, 0.55);

  padding: 0;

  font-size: 0.875rem;

  border-top: 1px solid rgba(212, 175, 55, 0.16);

}



.footer-inner {

  display: flex;

  justify-content: center;

  padding: 3rem 0 2.5rem;

}



.footer-brand {

  max-width: 22rem;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.footer-logo {

  display: inline-flex;

  margin-bottom: 1.25rem;

}



.footer-logo img {

  height: 2.5rem;

  width: auto;

}



.footer-tagline {

  display: none;

}



.social-links--footer {

  margin-top: 0;

  justify-content: center;

}



.site-footer .social-link {

  width: 2.35rem;

  height: 2.35rem;

  border-color: rgba(212, 175, 55, 0.32);

  background: rgba(212, 175, 55, 0.06);

}



.footer-bottom {

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

  padding: 1.1rem 0;

  background: rgba(0, 0, 0, 0.22);

}



.footer-bottom-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  flex-wrap: wrap;

  font-size: 0.8125rem;

  color: rgba(238, 241, 248, 0.42);

}



.footer-bottom-inner p {

  margin: 0;

}



.footer-bottom-inner a {

  color: rgba(240, 215, 140, 0.75);

  text-decoration: none;

}



.footer-bottom-inner a:hover {

  color: var(--gold-light);

}



@media (max-width: 768px) {

  .footer-inner {

    padding: 2.35rem 0 2rem;

  }



  .footer-logo img {

    height: 2.25rem;

  }



  .footer-bottom-inner {

    flex-direction: column;

    text-align: center;

    gap: 0.45rem;

  }

}



/* ── Subpages ── */

.page-hero {

  padding: calc(var(--header-h) + 3rem) 0 2.5rem;

}



.page-hero h1 {

  font-size: clamp(2rem, 6vw, 3.25rem);

  color: #fff;

}



.page-hero--divided {

  padding-bottom: 2.75rem;

  margin-bottom: 0.5rem;

  border-bottom: 1px solid rgba(212, 175, 55, 0.28);

  background:

    linear-gradient(180deg, rgba(7, 11, 24, 0.15) 0%, rgba(15, 24, 55, 0.35) 100%);

}



@media (max-width: 768px) {

  .page-hero--divided {

    text-align: center;

  }

}



.legal-page {

  padding: 0 0 5rem;

}



.legal-content {

  max-width: 42rem;

  padding: 2rem;

  border-radius: var(--radius-lg);

}



.legal-content p {

  margin-bottom: 1.15rem;

  color: var(--ink-soft);

  font-size: 0.9375rem;

}



.legal-content ul {

  margin-bottom: 1.15rem;

  padding-left: 1.25rem;

  list-style: disc;

  color: var(--ink-soft);

  font-size: 0.9375rem;

}



/* ── Gallery masonry ── */

.gallery-section-header {

  margin-bottom: 2rem;

  max-width: 40rem;

}



.gallery-section-header h2 {

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

  color: #fff;

  margin-bottom: 0.65rem;

}



.gallery-masonry {

  columns: 3;

  column-gap: 1.15rem;

}



.gallery-item {

  break-inside: avoid;

  margin: 0 0 1.25rem;

}



.gallery-trigger {

  display: block;

  width: 100%;

  padding: 0;

  border: 0;

  background: none;

  cursor: zoom-in;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow);

  border: 1px solid rgba(212, 175, 55, 0.15);

  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);

}



.gallery-trigger:hover,

.gallery-trigger:focus-visible {

  transform: translateY(-2px);

  border-color: rgba(212, 175, 55, 0.45);

  box-shadow: var(--shadow-lg);

  outline: none;

}



.gallery-trigger img {

  display: block;

  width: 100%;

  height: auto;

}



.gallery-item figcaption {

  margin-top: 0.55rem;

  font-size: 0.9375rem;

  font-weight: 600;

  color: rgba(238, 241, 248, 0.92);

  text-align: center;

}



@media (max-width: 768px) {

  .gallery-masonry { columns: 2; }

}



@media (max-width: 480px) {

  .gallery-masonry { columns: 1; }

}



/* ── Lightbox ── */

body.lightbox-open {

  overflow: hidden;

}



.lightbox[hidden] {

  display: none;

}



.lightbox {

  position: fixed;

  inset: 0;

  z-index: 300;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 3.5rem 1rem 1.5rem;

  background: rgba(4, 7, 16, 0.92);

  backdrop-filter: blur(6px);

}



.lightbox-figure {

  margin: 0;

  max-width: min(96vw, 1100px);

  max-height: calc(100vh - 5rem);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.75rem;

}



.lightbox-figure img {

  display: block;

  max-width: 100%;

  max-height: calc(100vh - 7.5rem);

  width: auto;

  height: auto;

  border-radius: var(--radius-lg);

  border: 1px solid rgba(212, 175, 55, 0.25);

  box-shadow: var(--shadow-lg);

}



.lightbox-figure figcaption {

  color: #fff;

  font-size: 1.05rem;

  font-weight: 600;

  text-align: center;

}



.lightbox-close,

.lightbox-nav {

  position: absolute;

  border: 0;

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  cursor: pointer;

  border-radius: 999px;

  transition: background 0.2s var(--ease), color 0.2s var(--ease);

}



.lightbox-close:hover,

.lightbox-nav:hover,

.lightbox-close:focus-visible,

.lightbox-nav:focus-visible {

  background: rgba(212, 175, 55, 0.35);

  color: #fff;

  outline: none;

}



.lightbox-close {

  top: 1rem;

  right: 1rem;

  width: 2.75rem;

  height: 2.75rem;

  font-size: 1.75rem;

  line-height: 1;

}



.lightbox-nav {

  top: 50%;

  transform: translateY(-50%);

  width: 2.75rem;

  height: 2.75rem;

  font-size: 1.35rem;

}



.lightbox-prev { left: 0.75rem; }

.lightbox-next { right: 0.75rem; }



@media (max-width: 640px) {

  .lightbox-nav {

    top: auto;

    bottom: 1rem;

    transform: none;

  }



  .lightbox-prev { left: calc(50% - 3.5rem); }

  .lightbox-next { right: calc(50% - 3.5rem); }

}



/* ── Cookie banner ── */

.cookie-banner {

  position: fixed;

  bottom: 0.875rem;

  left: 0.875rem;

  right: 0.875rem;

  z-index: 200;

  max-width: 22rem;

  margin-inline: auto;

  padding: 1.15rem 1.25rem;

  background: rgba(7, 11, 24, 0.98);

  color: rgba(238, 241, 248, 0.82);

  border-radius: var(--radius-lg);

  border: 1px solid rgba(212, 175, 55, 0.2);

  box-shadow: var(--shadow-lg);

  transform: translateY(calc(100% + 2rem));

  transition: transform 0.4s var(--ease);

}



.cookie-banner.is-visible { transform: translateY(0); }



.cookie-banner p {

  font-size: 0.8125rem;

  line-height: 1.55;

  margin-bottom: 0.85rem;

}



.cookie-banner a { color: var(--gold); }



.cookie-actions { display: flex; gap: 0.45rem; }



.cookie-actions button {

  flex: 1;

  padding: 0.55rem 0.75rem;

  border-radius: 999px;

  font: inherit;

  font-size: 0.75rem;

  font-weight: 600;

  cursor: pointer;

  border: none;

}



.cookie-accept {

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

  color: var(--dark);

}



.cookie-reject {

  background: rgba(255, 255, 255, 0.06);

  color: rgba(238, 241, 248, 0.7);

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

}



@media (min-width: 640px) {

  .cookie-banner {

    left: auto;

    right: 1rem;

    margin-inline: 0;

  }

}