/* Zdrowo — strona przedpremierowa (publiczny build Cloudflare).
   Kolory i kształty z index.html i css/site-shell.css. Celowo bez zewnętrznych czcionek,
   grafik tła i skryptów: publikujemy tylko materiały o potwierdzonym pochodzeniu. */

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

:root {
    --beige-light: #F5F0E8;
    --beige-mid: #E8DFD0;
    --white-beige: #FAF7F2;
    --dark: #222222;
    --muted: #6F685F;
    --sage: #D9E2CF;
    --moss: #535E44;
    --sand: #F0E2C6;
    --glass-bg: rgba(250, 247, 242, 0.72);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 24px 60px rgba(26, 26, 24, 0.08);
    --rounded: 'Nunito', ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif;
    --text: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html { height: 100%; }

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: #DDE5DF;
    color: var(--dark);
    font-family: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* organiczne plamy w miejsce grafiki tła, której licencja nie jest potwierdzona */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42vmax 34vmax at 8% 12%, var(--beige-mid) 0 58%, transparent 60%),
        radial-gradient(30vmax 26vmax at 92% 18%, var(--sage) 0 56%, transparent 58%),
        radial-gradient(38vmax 30vmax at 86% 92%, var(--sand) 0 55%, transparent 57%),
        radial-gradient(22vmax 18vmax at 14% 88%, rgba(83, 94, 68, 0.22) 0 54%, transparent 56%),
        #DDE5DF;
}

.pp-main {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 48px 20px;
}

.pp-card {
    width: min(100%, 560px);
    padding: 48px 40px 44px;
    text-align: center;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
            backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    box-shadow: var(--glass-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pp-card { background: rgba(250, 247, 242, 0.92); }
}

.pp-logo { display: block; width: auto; height: 88px; margin: 0 auto 20px; }

.pp-brand {
    font-family: var(--rounded);
    font-weight: 900;
    font-size: clamp(2.4rem, 7vw, 3.2rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.pp-status {
    display: inline-block;
    margin: 14px 0 22px;
    padding: 6px 16px;
    border-radius: 100px;
    background: var(--moss);
    color: var(--white-beige);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pp-text { color: var(--muted); font-size: 1.02rem; max-width: 40ch; margin: 0 auto; }
.pp-brand + .pp-text { margin-top: 16px; }
.pp-text + .pp-text { margin-top: 10px; }

.pp-btn {
    display: inline-block;
    margin-top: 26px;
    padding: 12px 26px;
    border-radius: 100px;
    background: var(--dark);
    color: var(--white-beige);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) { .pp-btn:hover { transform: scale(1.04); } }
.pp-btn:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }

.pp-footer {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .pp-card { padding: 36px 24px 32px; border-radius: 26px; }
    .pp-logo { height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-btn { transition: none; }
}