body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-image: image-set(url('background.webp') type('image/webp') 1x, url('background.jpg') type('image/jpeg') 1x);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
background-size: cover;
  color: #dddddd;
}

.overlay {
  background-color: rgba(5, 10, 20, 0.78);
  width: 100%;
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.logo {
  max-width: 340px;
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

header {
  text-align: center;
}

header h1 {
  font-size: 2.5rem;
  color: white;
}

.main-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 0;
  animation: fadeInDown 0.8s ease-in-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-nav a {
  position: relative;
  color: white;
  font-size: 1.3rem;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s, transform 0.3s;
  padding: 0.5rem;
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 2px;
  background-color: #99ccff;
  transition: width 0.3s ease;
}

.main-nav a:hover {
  color: #99ccff;
  transform: scale(1.05);
}

.main-nav a:hover::after {
  width: 100%;
}

.language-switcher {
  position: absolute;
  top: 20px;
  right: 20px;
}

.language-switcher button {
  margin-left: 5px;
  padding: 6px 10px;
  background-color: #003399;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.3s;
}

.language-switcher button:hover {
  background-color: #0055cc;
}

.content-box {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem;
  animation: fadeInUp 1s ease-in-out;
}

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

.content-box h2 {
  font-size: 2rem;
  margin-bottom: 1rem;

  color: #f0c24f;}

.content-box p,
.content-box ul {
  font-size: 1.2rem;
  line-height: 1.6;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form textarea {
  padding: 0.8rem;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
}

.contact-form button {
  background-color: #0066cc;
  color: white;
  border: none;
  padding: 0.8rem;
  font-size: 1.1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #005bb5;
}




@media (max-width: 768px) {
  .main-nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  .content-box {
    padding: 1rem;
  }

  .logo {
    width: 160px;
  }

  .main-nav a {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .logo { max-width: 140px; }
  header h1 { font-size: 1.5rem; }
  .main-nav a { font-size: 1rem; padding: 0.3rem; }
  .content-box h2 { font-size: 1.4rem; }
  .contact-form input, .contact-form textarea { font-size: 0.9rem; }
  .contact-form button { font-size: 1rem; padding: 0.6rem; }
  footer { font-size: 0.8rem; 
  text-align: center;}
}

  header h1 {
    font-size: 1.5rem;
  }

  .main-nav a {
    font-size: 1rem;
    padding: 0.3rem;
  }

  .content-box h2 {
    font-size: 1.4rem;
  }

  .contact-form input,
  .contact-form textarea {
    font-size: 0.9rem;
  }

  .contact-form button {
    font-size: 1rem;
    padding: 0.6rem;
  }

  footer {
    font-size: 0.8rem;
  }
}

img.mobile-only {
    display: none;
}
@media (max-width: 768px) {
  .main-nav ul { flex-direction: column; gap: 1rem; }
  .content-box { padding: 1rem; }
  .logo { max-width: 200px; }
  .main-nav a { font-size: 1.1rem; }
}
    img.mobile-only {
        display: block;
        height: 40px;
        margin: 10px auto;
    }
}
.content-box ul, li {
  text-align: left;
}

footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  color: #ddd;
} 


/* Active nav link */
.main-nav a.active {
  color: #f0c24f;
}

.main-nav a.active::after {
  width: 100%;
  background-color: #f0c24f;
}


/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.9);
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 0.9rem;
  z-index: 9999;
}
.cookie-banner p {
  margin: 0 0 5px 0;
}
.cookie-banner a {
  color: #6ab4e5;
  text-decoration: underline;
}
.cookie-buttons button {
  margin: 0 5px;
  padding: 5px 12px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  background-color: #0066cc;
  color: white;
  transition: background 0.3s;
}
.cookie-buttons button:hover {
  background-color: #005bb5;
}

.content-box h3 { color: #f0c24f; }


/* Footer links styling */
footer p { margin: 5px 0; }

footer a {
  color: #cccccc;
  text-decoration: none;
  margin: 0 8px;
  transition: color 0.3s, border-bottom 0.3s;
  border-bottom: 1px solid transparent;
}

footer a:hover {
  color: #f0c24f;
  border-bottom: 1px solid #f0c24f;
}


/* Consent privacy link styled like footer links */
.footer-link {
  color: #cccccc;
  text-decoration: none;
  margin: 0 4px;
  transition: color 0.3s, border-bottom 0.3s;
  border-bottom: 1px solid transparent;
}
.footer-link:hover {
  color: #f0c24f;
  border-bottom: 1px solid #f0c24f;
}


/* ===== Mobile polish ===== */
@media (max-width: 820px) {
  .content-box { padding: 16px; max-width: 920px; }
  .content-box h2 { font-size: 1.6rem; line-height: 1.25; margin-bottom: .6rem; }
  .content-box h3 { font-size: 1.1rem; margin-top: .5rem; }
  body { font-size: 16px; line-height: 1.6; }
  header .logo { max-width: 180px; height: auto; }
  .main-nav ul { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; padding: 0 8px; }
  .main-nav a { padding: 8px 10px; display: inline-block; }
  .language-switcher { position: static; text-align: center; margin-top: 8px; }
  .language-switcher button { padding: 6px 10px; margin: 0 4px; }

  /* Cards (partners) */
  .cards-two { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 12px; border-radius: 10px; }
  .card img { max-width: 180px; }

  /* QR images on partners */
  .card img[alt^="QR"] { max-width: 220px; width: 100%; height: auto; }

  /* Footer */
  footer p { margin: 6px 0; font-size: .92rem; }
}

/* Extra-small devices */
@media (max-width: 420px) {
  header .logo { max-width: 160px; }
  .main-nav a { padding: 6px 8px; }
  .cookie-banner { font-size: .85rem; padding: 8px; }
  .cookie-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
  .cookie-buttons button { padding: 6px 10px; }
}


/* ===== Hamburger menu ===== */
.hamburger{display:none;position:fixed;top:14px;right:14px;z-index:1100;width:38px;height:32px;border:0;background:rgba(0,0,0,0.35);backdrop-filter:saturate(140%) blur(4px);border-radius:8px;align-items:center;justify-content:center;padding:6px;}
.hamburger span{display:block;width:22px;height:2px;background:#f0c24f;margin:3px 0;transition:transform .25s,opacity .25s;}
.hamburger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.mobile-nav{position:fixed;inset:0 0 auto 0;top:0;z-index:1000;background:rgba(10,14,18,.96);padding:72px 18px 18px 18px;backdrop-filter:blur(4px);}
.mobile-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.mobile-nav a{display:block;padding:12px 10px;border-radius:8px;text-decoration:none;color:#ddd;border:1px solid rgba(255,255,255,0.08);}
.mobile-nav a:hover{color:#f0c24f;border-color:#f0c24f;}

@media(max-width:820px){
  .hamburger{display:flex;}
  .main-nav{display:none;}
}
@media(min-width:821px){
  .mobile-nav{display:none!important;}
}


/* === Language switcher placement on mobile === */
@media (max-width: 820px){
  .language-switcher:not(.mobile-lang-switcher){ display:none; } /* hide header switcher */
  #mobile-nav .language-switcher.mobile-lang-switcher { display:block; }
}

/* === Ensure full-width layout on mobile (no side cutoffs) === */
html, body { width:100%; overflow-x:hidden; }
@media (max-width: 820px){
  .overlay { max-width: 100% !important; width: 100% !important; }
  .content-box { max-width: 100% !important; width: 100% !important; padding-left: 16px; padding-right:16px; }
  header, footer, .main-nav, #mobile-nav { width:100%; }
}


/* ===== Fluid typography & responsive layout ===== */
:root{
  --max-container: 1100px;
}

.content-box{
  max-width: min(var(--max-container), 92vw);
  padding-left: clamp(14px, 2vw, 28px);
  padding-right: clamp(14px, 2vw, 28px);
}

/* Headings scale smoothly with viewport */
h1, .hero-title{
  font-size: clamp(1.8rem, 1.2rem + 4vw, 3.2rem);
  line-height: 1.15;
  word-break: break-word;
}
h2{
  font-size: clamp(1.4rem, 1.0rem + 2.6vw, 2.2rem);
  line-height: 1.25;
}
h3{
  font-size: clamp(1.08rem, 0.98rem + 1vw, 1.3rem);
}

body{
  font-size: clamp(0.98rem, 0.94rem + 0.4vw, 1.2rem);
  line-height: 1.65;
}

/* Logo scales with viewport */
header .logo{
  width: clamp(160px, 22vw, 280px);
  height: auto;
}

/* Prevent parallax jank on mobile and ensure background covers */
@media (max-width: 820px){
  body{
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
  }
  .overlay{ width:100%; max-width:100%; }
}

/* Make hamburger not overlap logo */
.hamburger{ top: 12px; right: 12px; }
@media (max-width: 420px){
  .hamburger{ right: 8px; top: 10px; }
}


/* ===== Responsive layout polish (safe for desktop) ===== */
/* Images and media scale within containers */
img, video { max-width: 100%; height: auto; display: block; }

/* Content container uses max-width on desktop, fluid on mobile */
:root{ --container-max: 1100px; }
.content-box{
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(14px, 2vw, 28px);
  padding-right: clamp(14px, 2vw, 28px);
}

/* Headings & text scale modestly without breaking desktop */
h1, .hero-title{ font-size: clamp(1.8rem, 1.1rem + 3.4vw, 3.2rem); line-height: 1.15; }
h2{ font-size: clamp(1.35rem, 1.0rem + 2.2vw, 2.1rem); line-height: 1.25; }
h3{ font-size: clamp(1.05rem, 0.95rem + 1vw, 1.25rem); }
body{ font-size: clamp(0.98rem, 0.94rem + 0.35vw, 1.15rem); line-height: 1.65; }

/* Grid cards behave in 1 column on phones, 2 na větších displejích */
.cards-two{ display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 820px){
  .cards-two{ grid-template-columns: 1fr 1fr; }
}

/* Mobile-specific tweaks */
@media (max-width: 820px){
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .overlay{ width:100%; max-width:100%; }
  header .logo{ width: clamp(150px, 24vw, 240px); height:auto; }
  .main-nav{ display:none; } /* desktop nav hidden; hamburger shows */
  footer p{ margin: 6px 0; font-size: .95rem; }
  #mobile-nav .language-switcher.mobile-lang-switcher { display:block; }
}

/* Prevent layout shift with background on mobile */
@media (max-width: 820px){
  body{ background-attachment: scroll !important; background-size: cover !important; background-position: center top !important; }
}

/* Ensure mobile menu is full-width and over content */
.mobile-nav{ position:fixed; inset:0; top:0; z-index:1000; overflow:auto; }


/* === Center header logo on desktop, keep mobile layout intact === */
@media (min-width: 821px){
  header { display: flex; align-items: center; justify-content: center; }
  header a, header picture, header img.logo { display: inline-block; }
}


/* === Partners card: center text and QR within each column === */
.cards-two .card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center; /* vertical centering inside card */
  text-align:center;
  gap: 10px;
}
.cards-two .card .qr{
  margin-top: 10px;
}
.cards-two .card .qr img{
  display:block;
  max-width: 260px;
  width: 100%;
  height:auto;
  border-radius:8px;
  background:#fff;
  padding:6px;
}
@media (max-width: 820px){
  .cards-two .card{
    align-items:center;
    text-align:center;
  }
}


/* ===== Responsive fix pack (mobile scaling & overflow) ===== */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
html, body { width:100%; max-width:100%; overflow-x:hidden; margin:0; padding:0; -webkit-text-size-adjust:100%; }

/* Media scales to container */
img, video { max-width:100%; height:auto; display:block; }

/* Fluid container with safe max on desktop */
:root{ --container-max: 1100px; }
.content-box { width:100%; max-width: var(--container-max); margin-left:auto; margin-right:auto; padding-left: clamp(14px, 2.5vw, 28px); padding-right: clamp(14px, 2.5vw, 28px); }

/* Typography scales but stays capped to avoid giant text on phones */
h1, .hero-title { font-size: clamp(1.6rem, 1.1rem + 3.2vw, 3rem); line-height: 1.15; word-break: break-word; }
h2 { font-size: clamp(1.3rem, 1.0rem + 2.2vw, 2rem); line-height: 1.25; }
h3 { font-size: clamp(1.05rem, 0.95rem + 1vw, 1.25rem); }
body { font-size: clamp(0.98rem, 0.94rem + 0.35vw, 1.12rem); line-height: 1.65; }

/* Logo scaling */
header .logo { width: clamp(160px, 22vw, 280px); height:auto; }

/* Partners cards responsive */
.cards-two { display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 820px){ .cards-two { grid-template-columns: 1fr 1fr; } }
.cards-two .card { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; }
.cards-two .card .qr img { max-width: min(260px, 80vw); }

/* Mobile layout specifics */
@media (max-width: 820px){
  .overlay{ width:100%; max-width:100%; }
  .main-nav{ display:none; } /* hamburger handles navigation */
  body{ background-attachment: scroll !important; background-position: center top !important; background-size: cover !important; }
}

/* Mobile menu full-viewport */
.mobile-nav{ position:fixed; inset:0; z-index:1000; overflow:auto; }


/* === Mobile header center + top spacing === */
@media (max-width: 820px){
  header{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top: 14px; /* logo offset from top */
  }
  header .logo{ width: clamp(150px, 24vw, 240px); height:auto; }
}

/* === Background & bottom gap fixes === */
html, body{ background-color:#0b0f14; }
@media (max-width: 820px){
  body{
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
    min-height: 100vh;
  }
}
@supports (height: 100svh){
  body{ min-height: 100svh; }
}

/* Make the main overlay stretch full width/height to avoid white strips */
.overlay{ width:100%; max-width:100%; }
@media (max-width: 820px){
  .overlay{ min-height: 100vh; }
  footer{ margin-bottom:0; padding-bottom: 16px; }
}


/* === Mobile fine-tuning: logo offset, titles, bottom safe-area === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 820px){
  header{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top: calc(12px + var(--safe-top));
  }
  /* Smaller mobile titles for better fold fit */
  .content-box h1, .content-box .hero-title{
    font-size: clamp(1.4rem, 1rem + 3vw, 2.2rem);
    line-height: 1.2;
    margin-top: 6px;
    margin-bottom: 10px;
    text-align:center;
  }
  .content-box h2{
    font-size: clamp(1.2rem, 0.95rem + 2.6vw, 1.8rem);
    line-height: 1.25;
    text-align:center;
  }
  body{
    padding-bottom: calc(20px + var(--safe-bottom)); /* avoid white bar overlap */
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
  }
  .overlay{ min-height: 100vh; }
}

/* Partners card: ensure QR fits and has spacing */
.cards-two .card .qr img{
  max-width: min(320px, 86vw);
}
.cards-two .card .qr{ margin: 12px auto 18px; }

/* Prevent any horizontal overflow from long words */
.content-box, .card { overflow-wrap: anywhere; }


/* === Extra mobile spacing adjustments === */
@media (max-width: 820px){
  header{
    padding-top: calc(26px + var(--safe-top)); /* bigger top spacing for logo */
  }
  body{
    padding-bottom: calc(40px + var(--safe-bottom)); /* more bottom padding to avoid footer overlap */
  }
  footer{
    padding-bottom: 30px;
  }
  .overlay{
    padding-bottom: 20px;
    min-height: 100vh;
  }
}


/* === STRONGER MOBILE FIX: header spacing + full-height background & footer stick === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body{ height: auto; min-height: 100%; background-color:#0b0f14; }

@supports (height: 100svh){
  .overlay{ min-height: 100svh; }
}
@supports not (height: 100svh){
  .overlay{ min-height: 100vh; }
}

/* Make overlay a flex column so footer sits at the bottom and content expands */
.overlay{ display:flex; flex-direction:column; }
.overlay > main{ flex:1 0 auto; }
.overlay > footer{ flex-shrink:0; }

/* Mobile: center logo with larger top padding and enforce with !important */
@media (max-width: 820px){
  header{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    padding-top: calc(46px + var(--safe-top)) !important; /* larger top space */
  }
  header .logo{ width: clamp(150px, 24vw, 240px); height:auto; }
  /* Ensure body/background always covers to bottom on mobile */
  body{
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
    padding-bottom: calc(56px + var(--safe-bottom)) !important;
  }
  footer{ padding-bottom: calc(26px + var(--safe-bottom)) !important; }
}


/* === FINAL MOBILE TWEAKS: centered logo + safe-area bottom filler, no background gap === */
html, body { margin:0; padding:0; background-repeat: no-repeat; background-color:#0b0f14; }
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Center logo hard on mobile and give larger top offset */
@media (max-width: 820px){
  header{
    width:100%;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    padding-top: calc(56px + var(--safe-top)) !important;
  }
  header .logo{
    display:block;
    margin:0 auto;
    width: clamp(160px, 26vw, 260px);
    height:auto;
  }
  /* Ensure overlay and page cover to true bottom */
  .overlay{
    position:relative;
    min-height: 100vh;
    width:100%;
  }
  body{
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
    padding-bottom: calc(64px + var(--safe-bottom)) !important;
  }
  footer{
    background: rgba(9,12,16,0.82);
    padding-bottom: calc(28px + var(--safe-bottom)) !important;
    margin-bottom: 0 !important;
  }
}

/* Safe-area bottom filler (prevents visible strip under footer on iOS Safari) */
@media (max-width: 820px){
  body::after{
    content:"";
    position:fixed;
    left:0; right:0; bottom:0;
    height: var(--safe-bottom);
    background:#0b0f14;
    z-index: 999; /* under the menu but over page BG */
    pointer-events:none;
  }
  .overlay::after{
    content:"";
    position:fixed;
    left:0; right:0; bottom:0;
    height: var(--safe-bottom);
    background: rgba(9,12,16,0.82);
    z-index: 1000;
    pointer-events:none;
  }
}

/* Ensure last section doesn't add extra gap */
.content-box > :last-child{ margin-bottom: 0; }


/* === CROSS-BROWSER MOBILE FIXES (iOS Safari + Chrome) === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body{ background-color:#0b0f14; background-repeat:no-repeat; }

/* Prefer modern dynamic viewport when available */
@supports (height: 100dvh){
  .overlay{ min-height: 100dvh; }
}
@supports not (height: 100dvh){
  @supports (height: 100svh){
    .overlay{ min-height: 100svh; }
  }
}

/* iOS Safari targeting to ensure perfectly centered header */
@supports (-webkit-touch-callout: none){
  @media (max-width: 820px){
    header{
      display:flex !important;
      align-items:flex-start !important;
      justify-content:center !important;
      padding-top: calc(64px + var(--safe-top)) !important;
    }
    header .logo{
      display:block;
      margin:0 auto;
      width: clamp(160px, 26vw, 260px);
      height:auto;
    }
  }
}

/* Generic mobile (Chrome & others) */
@media (max-width: 820px){
  body{
    background-attachment: scroll !important;
    background-position: center top !important;
    background-size: cover !important;
    padding-bottom: calc(72px + var(--safe-bottom)) !important;
  }
  header{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top: calc(60px + var(--safe-top));
  }
  footer{
    background: rgba(9,12,16,0.82);
    padding-bottom: calc(28px + var(--safe-bottom));
    margin-bottom: 0;
  }
}

/* Bottom filler to hide any safe-area gap */
@media (max-width: 820px){
  body::after{
    content:"";
    position:fixed;
    left:0; right:0; bottom:0;
    height: var(--safe-bottom);
    background:#0b0f14;
    pointer-events:none;
    z-index: 999;
  }
}


/* === MOBILE SPACING & BOTTOM OVERLAY – v3 === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body{ margin:0; padding:0; background-color:#0b0f14; }

/* Full-height layout with footer stuck to bottom */
.overlay{ display:flex; flex-direction:column; min-height:100vh; }
@supports (height: 100dvh){ .overlay{ min-height:100dvh; } }
.overlay > main{ flex:1 0 auto; }
.overlay > footer{ flex-shrink:0; }

/* Header logo centered with generous top spacing */
@media (max-width: 820px){
  header{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    padding-top: calc(72px + var(--safe-top)) !important;
    text-align:center;
  }
  header .logo{
    display:block !important;
    margin:0 auto !important;
    width: clamp(170px, 26vw, 270px);
    height:auto;
  }

  /* Hero heading compact so it doesn't collide with logo */
  .hero-title, h1.hero-title{ margin-top: 10px; }

  /* Strong bottom overlay to avoid any light strip */
  footer{
    position:relative;
    z-index:1;
    background: linear-gradient(to top, rgba(9,12,16,0.95), rgba(9,12,16,0.75));
    padding-bottom: calc(30px + var(--safe-bottom));
    margin-bottom: 0;
  }
  /* extra shadow overlay just above the footer to ensure blend */
  footer::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:100%;
    height: 56px;
    background: linear-gradient(to top, rgba(9,12,16,0.7), rgba(9,12,16,0));
    pointer-events:none;
  }

  /* Fill safe area on iOS with dark color under URL bar */
  body::after{
    content:"";
    position:fixed;
    left:0; right:0; bottom:0;
    height: var(--safe-bottom);
    background:#0b0f14;
    pointer-events:none;
    z-index: 999;
  }
}


/* === MOBILE VARIANT v4: stronger top gap for logo + fixed bottom shade === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 820px){
  /* Ensure full dark base */
  html, body{ background-color:#0b0f14; background-repeat:no-repeat; }

  /* Make overlay fill the viewport and keep footer at the bottom */
  .overlay{ display:flex; flex-direction:column; min-height:100vh; }
  @supports (height: 100dvh){ .overlay{ min-height:100dvh; } }
  .overlay > main{ flex:1 0 auto; }
  .overlay > footer{ flex-shrink:0; }

  /* --- TOP: give logo a reliable gap no matter the browser chrome --- */
  header{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    margin-top: calc(22px + var(--safe-top)) !important;  /* NEW: margin instead of only padding */
    padding-top: 10px !important;
  }
  header .logo{
    display:block !important;
    margin:0 auto !important;
    width: clamp(170px, 26vw, 270px);
    height:auto;
  }

  /* --- BOTTOM: fixed shade that always covers under footer --- */
  footer{
    position:relative;
    z-index:2;
    background: rgba(9,12,16,0.9);
    padding-bottom: calc(34px + var(--safe-bottom)) !important;
    margin-bottom:0 !important;
  }
  /* Gradient shade glued to the bottom of the viewport (below footer) */
  body::after{
    content:"";
    position:fixed;
    left:0; right:0; bottom:0;
    height: 18vh; /* visual fade */
    background: linear-gradient(to top, rgba(9,12,16,1), rgba(9,12,16,0));
    pointer-events:none;
    z-index:1;
  }
  /* Safe-area filler, on top of the shade when needed */
  body::before{
    content:"";
    position:fixed;
    left:0; right:0; bottom:0;
    height: var(--safe-bottom);
    background:#0b0f14;
    pointer-events:none;
    z-index:3;
  }
}


/* === MOBILE VARIANT v5: deeper bottom cover to end of screen === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 820px){
  /* Footer above masks */
  footer{ position: relative; z-index: 5; background: rgba(9,12,16,0.92); }
  /* Solid mask glued to absolute bottom (under footer) */
  body::before{
    content:"";
    position:fixed;
    left:0; right:0; bottom:0;
    height: calc(110px + var(--safe-bottom)); /* solid zone right at the edge */
    background:#0b0f14;
    pointer-events:none;
    z-index: 3;
  }
  /* Long gradient extending upward above the solid zone */
  body::after{
    content:"";
    position:fixed;
    left:0; right:0; bottom: calc(110px + var(--safe-bottom));
    height: 42vh; /* reach higher to kill any leftover background */
    max-height: 520px;
    background: linear-gradient(to top, rgba(9,12,16,0.95) 0%, rgba(9,12,16,0.85) 35%, rgba(9,12,16,0) 100%);
    pointer-events:none;
    z-index: 2;
  }
}


/* === MOBILE VARIANT v6: fixed footer to fully cover bottom, with safe-area === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 820px){
  /* Reserve space so content never hides behind the fixed footer */
  body{
    padding-bottom: calc(120px + var(--safe-bottom)) !important;
    background-color:#0b0f14;
  }
  footer{
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(9,12,16,0.92);
    backdrop-filter: blur(2px);
    padding: 14px 16px calc(18px + var(--safe-bottom));
    margin: 0 !important;
  }
  /* Soft fade above footer so it blends into the background image */
  footer::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:100%;
    height: 56px;
    background: linear-gradient(to top, rgba(9,12,16,0.75), rgba(9,12,16,0));
    pointer-events:none;
  }
  /* Remove previous masks to avoid conflicts */
  body::before, body::after{ display:none !important; content:none !important; }
}


/* === MOBILE VARIANT v7: flex layout + viewport bottom overlay (no gaps) === */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body{
  height: 100%;
  background-color: #0b0f14;
  background-repeat: no-repeat;
}

/* Main overlay spans full height and pushes footer to bottom */
.overlay{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@supports (height: 100dvh){
  .overlay{ min-height: 100dvh; }
}

@media (max-width: 820px){
  /* Centered logo with top margin */
  header{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    margin-top: calc(24px + var(--safe-top)) !important;
    padding-top: 10px !important;
    text-align:center;
  }
  header .logo{
    display:block !important;
    margin:0 auto !important;
    width: clamp(170px, 26vw, 270px);
    height:auto;
  }

  /* Footer sits at bottom via flex (no fixed position) */
  footer{
    margin-top: auto !important;
    position: relative !important;
    z-index: 2;
    background: rgba(9,12,16,0.92);
    padding: 14px 16px calc(18px + var(--safe-bottom)) !important;
  }

  /* Remove any older masks that could conflict */
  body::before, body::after, footer::before{ content:none !important; display:none !important; }

  /* Single global bottom overlay that always covers to screen edge */
  .overlay::after{
    content:"";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: max(20vh, 180px);
    background: linear-gradient(to top, rgba(9,12,16,1) 0%, rgba(9,12,16,0.9) 40%, rgba(9,12,16,0) 100%);
    pointer-events: none;
    z-index: 1;
  }
}


/* === MOBILE VARIANT v8: deeper bottom mask + prevent deep scroll bounce === */
@media (max-width: 820px){
  html, body{
    background-color:#0b0f14;
    overscroll-behavior-y: contain; /* nepropouštět přetahování */
    scrollbar-gutter: stable both-edges;
  }

  /* Silnější spodní překrytí – gradient i plný pás */
  .overlay::after{
    content:"";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: max(60vh, 360px);      /* bylo 20vh/180px */
    background: linear-gradient(to top,
      rgba(9,12,16,1) 0%,
      rgba(9,12,16,0.95) 30%,
      rgba(9,12,16,0.85) 60%,
      rgba(9,12,16,0) 100%);
    pointer-events: none;
    z-index: 1;
  }
  /* Absolutní „pojistka“ – plný pás přímo u spodního okraje */
  .overlay::before{
    content:"";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(140px + env(safe-area-inset-bottom, 0px));
    background:#0b0f14;
    z-index: 2;
    pointer-events:none;
  }

  /* Footer je nad maskami */
  footer{ position: relative; z-index: 3; }

  /* Malé zmenšení patičky na malých displejích */
  @media (max-height: 740px){
    footer{ padding-top:10px; padding-bottom:12px; }
  }
}


/* === MOBILE VARIANT v9: keep gradient BELOW content for readability === */
@media (max-width: 820px){
  .overlay{
    position: relative;
  }
  /* All visible content sits above the background masks */
  .overlay > *{
    position: relative;
    z-index: 1;
  }
  /* Place both masks under content (but above background image) */
  .overlay::after{ z-index: 0 !important; }
  .overlay::before{ z-index: 0 !important; }

  /* Small bottom padding so last paragraph never touches the darkest zone */
  .overlay{ padding-bottom: 14vh; }
  @supports (height: 100dvh){
    .overlay{ padding-bottom: 12dvh; }
  }

  /* Slight text glow for legibility on photos */
  .overlay p, .overlay li, .overlay h1, .overlay h2, .overlay h3{
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  }
}