/* ==========================================================================
   Tmavá hlavička podstránky (účet, stav registra)
   Rovnaké pozadie ako hlavička detailu firmy, navigácia leží nad ňou.
   ========================================================================== */

.page-hero {
    padding-top: var(--header-h);
    background:
        radial-gradient(ellipse 45% 100% at 88% 0%, rgba(124, 77, 255, 0.5), transparent 70%),
        radial-gradient(ellipse 30% 80% at 100% 70%, rgba(255, 79, 192, 0.3), transparent 70%),
        radial-gradient(ellipse 40% 90% at 62% -20%, rgba(47, 92, 255, 0.4), transparent 70%),
        var(--color-bg-hero);
}

.page-hero .backdrop__veil {
    background: linear-gradient(180deg, rgba(6, 5, 26, 0.2) 0%, rgba(6, 5, 26, 0.75) 45%, rgba(6, 5, 26, 0.92) 100%);
}

.page-hero__body {
    padding: 28px var(--gutter) clamp(44px, 6vw, 80px);
}

.page-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-on-dark-muted-2);
    font-size: var(--fs-small);
}

.page-hero__back:hover {
    color: #fff;
}

.page-hero__title {
    max-width: 900px;
    margin-top: 22px;
    font-size: var(--fs-h1-detail);
    line-height: 1.02;
    letter-spacing: var(--tracking-tight);
}

.page-hero__lead {
    max-width: 560px;
    margin-top: 20px;
    color: var(--color-text-on-dark-muted);
    font-size: var(--fs-lead);
    line-height: 1.55;
}

.page-hero__lead code {
    color: var(--color-accent-soft);
    font-size: 0.9em;
}

@media (min-width: 720px) {
    .page-hero .backdrop__veil {
        background: linear-gradient(90deg, rgba(6, 5, 26, 0.9) 0%, rgba(6, 5, 26, 0.55) 40%, rgba(6, 5, 26, 0) 68%);
    }

    .page-hero__body {
        padding-top: clamp(40px, 6vw, 88px);
    }
}