/* Základní barva pod hero i pod zbytkem stránky */
body {
    margin: 0;
    background: #f6f7f9; /* světlé, klidné pozadí */
}

/* Wrapper kolem hero (tam, kde máš Vantu připojenou) */
.vanta-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #e9f7ff; /* fallback barva */
}

/* Posuneme JEN canvas od Vanty, ne obsah */
.vanta-hero > canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    width: 100% !important;
    height: 120% !important;      /* trochu vyšší, ať nahoře nic nechybí */
    transform: translateY(-80px); /* POSUN NAHORU – klidně si uprav na -60 / -100 */
    pointer-events: none;         /* ať nepřekrývá klikání */
    z-index: 0;
}

/* Obsah hero (tvůj bílý “card” blok) necháme nad tím */
.vanta-hero .container,
.vanta-hero .index-background-container {
    position: relative;
    z-index: 1;
}

/* Obsah hero sekce nad Vantou */
.hero-inner {
    position: relative;
    z-index: 1;
    padding: clamp(4rem, 8vh, 6rem) 0 5rem;
}

/* Plynulý přechod do jednolitého pozadí pod hero */
.vanta-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    background: linear-gradient(
        to bottom,
        rgba(244, 251, 255, 0) 0%,
        #f4fbff 100%
    );
    z-index: 1;
    pointer-events: none;
}



/* Pro jistotu odstraníme jakýkoli nechtěný offset shora */
body > * {
    margin-top: 0;
    padding-top: 0;
}



#upload_main_dropzone {
    background-color: #ffffffab;
    border-radius: 2.4rem;
    backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem); 
}


/* ANIMACE Základní styl – BEZ HOVER EFEKTU */
#upload_select_files {
    position: relative;
    z-index: 1;

    /* dvojitý puls: malý + velký */
    animation: 
        tp-pulse 2.4s ease-out infinite,
        tp-pulse-big 2.4s ease-out infinite 0.35s;

    box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.45);
}

/* Původní menší puls */
@keyframes tp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.45);
    }
    70% {
        box-shadow: 0 0 0 22px rgba(0, 150, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 150, 255, 0);
    }
}

/* Větší echo puls */
@keyframes tp-pulse-big {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.30);
    }
    70% {
        box-shadow: 0 0 0 38px rgba(0, 150, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 150, 255, 0);
    }
}






/* ==== Footer: odkazy do sloupců (nový footer) ==== */

/* 1) Zrušíme flex a přepneme na multi-columns */
footer ul.list-style-none.m-0 {
  display: block !important;           /* přepíše d-flex */
  column-gap: 2rem;                     /* mezera mezi sloupci */
  column-count: 1;                      /* mobil = 1 sloupec */
}

/* tablet ≥768px: 2 sloupce */
@media (min-width: 768px) {
  footer ul.list-style-none.m-0 {
    column-count: 2;
  }
}

/* desktop ≥992px: 4 sloupce (změňte na 3, pokud chcete) */
@media (min-width: 992px) {
  footer ul.list-style-none.m-0 {
    column-count: 4;
  }
}

/* 2) Položky a mezery – vypneme marginy z utility tříd a zamezíme lámání uvnitř */
footer ul.list-style-none.m-0 > li {
  margin: 0 0 .5rem 0 !important;       /* sjednocená svislá mezera, žádné mr-lg-3 */
  break-inside: avoid;                   /* aby se položka neroztrhla mezi sloupci */
  -webkit-column-break-inside: avoid;
}

/* 3) Odkazy přes celou šířku řádku (kvůli klikací ploše) */
footer ul.list-style-none.m-0 > li > a {
  display: inline-block;
  width: 100%;
}