* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #1a1f5e;
    color: #fff;
    font-family: 'Segoe UI', Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    position: relative;
}

/* --- gwiazdy --- */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><circle cx="50" cy="30" r="1.5" fill="white" opacity="0.6"/><circle cx="120" cy="80" r="2" fill="white" opacity="0.4"/><circle cx="200" cy="20" r="1.5" fill="white" opacity="0.8"/><circle cx="300" cy="60" r="1.5" fill="white" opacity="0.5"/><circle cx="370" cy="150" r="2" fill="white" opacity="0.3"/><circle cx="80" cy="200" r="1.5" fill="white" opacity="0.7"/><circle cx="250" cy="180" r="1.5" fill="white" opacity="0.6"/><circle cx="340" cy="280" r="2" fill="white" opacity="0.4"/><circle cx="150" cy="300" r="1.5" fill="white" opacity="0.5"/><circle cx="30" cy="350" r="1.5" fill="white" opacity="0.8"/><circle cx="380" cy="370" r="1.5" fill="white" opacity="0.3"/><circle cx="220" cy="350" r="2" fill="white" opacity="0.6"/><circle cx="10" cy="120" r="1.5" fill="white" opacity="0.5"/><circle cx="180" cy="130" r="1.5" fill="white" opacity="0.4"/><circle cx="320" cy="200" r="1.5" fill="white" opacity="0.7"/><circle cx="60" cy="260" r="1.5" fill="white" opacity="0.5"/><circle cx="270" cy="310" r="2" fill="white" opacity="0.4"/><circle cx="140" cy="60" r="1.5" fill="white" opacity="0.7"/><circle cx="350" cy="100" r="2" fill="white" opacity="0.6"/><circle cx="90" cy="370" r="1.5" fill="white" opacity="0.5"/><circle cx="210" cy="240" r="1.5" fill="white" opacity="0.8"/><circle cx="430" cy="420" r="1.5" fill="white" opacity="0.4"/><circle cx="170" cy="450" r="2" fill="white" opacity="0.6"/><circle cx="480" cy="90" r="1.5" fill="white" opacity="0.7"/><circle cx="40" cy="460" r="2" fill="white" opacity="0.3"/></svg>') repeat;
    opacity: 1;
}

/* --- treść --- */
.zajawka {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 5px 2rem 2rem 2rem;
    width: 100%;
}

.logo-wrap {
    margin-bottom: 5px;
}

.logo {
    width: 420px;
    max-width: 85vw;
}

.tagline {
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffd700;
    margin-bottom: 0.6rem;
}

.opis {
    font-size: 0.95rem;
    color: #ccc;
    margin: 0 auto 2.5rem auto;
    width: calc(600px + 2.4rem);
    max-width: 100%;
    line-height: 1.7;
    text-align: left;
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 8px;
    padding: 1.2rem 1.5rem;
    background-color: #1a1f5e;
}

.opis p + p {
    margin-top: 0.9rem;
}

.opis a {
    color: #ffd700;
    text-decoration: none;
}

.opis a:hover {
    text-decoration: underline;
}

.social {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: border-color 0.2s, transform 0.2s;
}

.social a:hover {
    border-color: #ffd700;
    transform: scale(1.1);
}

.social svg {
    width: 20px;
    height: 20px;
    fill: #ccc;
    transition: fill 0.2s;
}

.social a:hover svg {
    fill: #ffd700;
}

.single-label {
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.okladki {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.okladka {
    width: 200px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.okladka:hover {
    transform: scale(1.07);
}

.okladka img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.okladka p {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #ccc;
    letter-spacing: 0.03em;
}

.wkrotce {
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}