/* ==========================================================
   HLAVIČKA – hlavní hero sekce
========================================================== */

header {
    text-align: center;
    padding: 6rem 1rem 4rem;
    padding-top: 2.5rem !important;
    /* bylo 5–7 rem → příliš daleko */
    padding-bottom: 2rem;
}

header h1 {
    font-size: 3rem;
    color: #dbeafe;
    text-shadow: 0 0 30px rgba(96, 165, 250, 0.4);
    margin-bottom: 1rem;
}

header p {
    max-width: 700px;
    margin: 0.5rem auto 2rem;
    color: #cbd5e1;
    font-size: 1.15rem;
    line-height: 1.7;
}

header .btn-primary {
    font-size: 1.2rem;
}

/* ==========================================================
   VESMÍRNÁ KARTA – výřez do vesmíru s rozpitým glow okrajem
========================================================== */

.galaxy-wrap {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.galaxy-card {
    width: 780px;
    max-width: 92vw;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(10, 15, 30, 0.6);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow:
        0 0 30px rgba(80, 120, 255, 0.25),
        inset 0 0 30px rgba(80, 120, 255, 0.15);
    position: relative;
}

/* rozpitý okraj */
.galaxy-card::before {
    content: "";
    position: absolute;
    inset: -20px;
    border-radius: 30px;
    background: radial-gradient(circle,
            rgba(96, 165, 250, 0.25),
            transparent 70%);
    filter: blur(20px);
    z-index: -1;
}

.galaxy-object {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================
   SEKCE PROČ – 4 boxy s ikonami (proc-chytre-ja)
========================================================== */

#proc-chytre-ja {
    padding: 6rem 1rem 4rem;
    text-align: center;
}

#proc-chytre-ja h2 {
    font-size: 2.4rem;
    color: #a8c7ff;
    text-shadow: 0 0 16px rgba(96, 165, 250, 0.3);
}

#proc-chytre-ja .proc-intro {
    max-width: 700px;
    margin: 1rem auto 3rem;
    color: #cbd5e1;
    font-size: 1.1rem;
}

/* GRID – 4 boxy */
.proc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* BOXY */
.proc-card {
    background: rgba(15, 23, 42, 0.65);
    border-radius: 16px;
    padding: 1.8rem 1.6rem;
    border: 1px solid rgba(96, 165, 250, 0.18);
    box-shadow: 0 0 25px rgba(80, 120, 255, 0.20);
    backdrop-filter: blur(6px);
    transition: .3s ease;
}

.proc-card:hover {
    box-shadow: 0 0 35px rgba(120, 170, 255, 0.35);
    transform: translateY(-4px);
}

/* IKONY */
.proc-card i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #93c5fd;
    text-shadow: 0 0 12px rgba(96, 165, 250, 0.45);
}

/* Nadpis boxu */
.proc-card h3 {
    color: #dbeafe;
    margin-bottom: 0.8rem;
}

/* Text boxu */
.proc-card p {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Závěrečný text pod gridem */
.proc-footer {
    margin-top: 3rem;
    font-size: 1.1rem;
    color: #93c5fd;
}

/* RESPONSIVITA */
@media (max-width: 1100px) {
    .proc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ================================
   UNIVERSE PREVIEW – VÝŘEZ
================================ */
.galaxy-wrap {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
}

#universe-preview {
    width: 78%;
    max-width: 1050px;
    margin: 3rem auto 4rem;
    padding: 2.2rem 0;

    border-radius: 32px;

    background: rgba(10, 20, 40, 0.35);

    box-shadow:
        0 0 80px rgba(80, 110, 255, 0.35),
        0 0 120px rgba(60, 90, 200, 0.25),
        0 0 180px rgba(40, 70, 180, 0.20);
}

/* Rozpitý okraj */
.universe-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    pointer-events: none;
    box-shadow:
        inset 0 0 60px rgba(50, 100, 255, 0.45),
        inset 0 0 120px rgba(50, 100, 255, 0.25);
}

/* Samotný obrázek */
.universe-preview img {
    width: 100%;
    display: block;
    opacity: 0.95;
}

/* ==================================
   PROC-CHYTRE-JA – KARTY
================================== */

.proc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 3rem auto;
}

.proc-card {
    background: rgba(20, 30, 55, 0.55);
    border: 1px solid rgba(120, 160, 255, 0.18);
    padding: 2rem;
    border-radius: 16px;
    text-align: left;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
    transition: .25s ease;
}

.proc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 26px rgba(120, 160, 255, 0.35);
}

.proc-card i {
    font-size: 2rem;
    color: #82b6ff;
    margin-bottom: 1rem;
}

.proc-card h3 {
    font-size: 1.25rem;
    color: #cfe4ff;
    margin-bottom: 0.8rem;
}

.proc-card p {
    font-size: 1rem;
    color: #cbd5e1;
    line-height: 1.6;
}

/* ================================
   UNIVERSE PREVIEW – STARFOG BOX
================================ */
.universe-preview {
    width: 100%;
    max-width: 1000px;
    /* užší – kontrola šířky */
    height: 650px;
    /* vyšší – působí jako výřez */
    margin: 4rem auto;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    background: #0b1220;

    box-shadow:
        0 0 70px rgba(80, 140, 255, 0.35),
        0 0 140px rgba(80, 140, 255, 0.20),
        0 0 240px rgba(80, 140, 255, 0.12);
}

.universe-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* <-- zachová poměr a vyplní výšku */
    object-position: center;
    /* <-- udržuje střed */
}

/* Soft-edge vnitřní glow kolem okraje */
.universe-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 28px;
    box-shadow:
        inset 0 0 80px rgba(120, 160, 255, 0.25),
        inset 0 0 160px rgba(120, 160, 255, 0.18),
        inset 0 0 240px rgba(120, 160, 255, 0.10);
}