*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:Arial,sans-serif;
    background:radial-gradient(circle at top,#5a2cff,#1a072f);
    color:#fff;
}

/* HERO */
.hero{
    display:flex;
    justify-content:center;
    padding:60px 20px;
}
.hero-box{
    background:#2f2a45;
    border-radius:28px;
    padding:40px;
    text-align:center;
    max-width:600px;
    width:100%;
}

/* GRID */
.main{
    max-width:1200px;
    margin:60px auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:40px; /* 👈 OBROVSKÁ MEZERA */
    padding:0 20px;
}

/* CARD – EXTRÉMNÍ SPACING */
.card{
    background:#3a3554;
    border-radius:26px;
    padding:40px;        /* 👈 MUSÍ BÝT VIDĚT */
    min-height:240px;    /* 👈 MUSÍ BÝT VIDĚT */
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.card h2{
    margin-bottom:20px;
}

.card p{
    margin-bottom:30px;
    line-height:1.6;
}

/* BUTTON */
.btn{
    margin-top:auto;
    padding:16px 34px;
    border-radius:999px;
    background:#9b7bff;
    color:#1a072f;
    font-weight:700;
    text-decoration:none;
}

/* FOOTER */
footer{
    text-align:center;
    padding:40px 20px;
}

/* SOCIALS */
.footer-socials{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:20px;
}
.social{
    padding:14px 24px;
    background:#555;
    border-radius:16px;
    color:#fff;
    text-decoration:none;
}
/* ===============================
   HOVER EFEKTY – POUZE NAVÍC
   =============================== */

/* KARTY */
.card{
    transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
}

/* SOCIÁLNÍ SÍTĚ */
.social{
    transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.social:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,0.35);
}
/* HOVER NA HLAVNÍ KARTU JOUVIK */
.hero-box{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-box:hover{
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(0,0,0,0.45);
}
