/* Strona startowa. Jedna kolumna wyśrodkowana w obu osiach — to ekran logowania,
   więc nic nie konkuruje z przyciskiem, przez który się tu wchodzi. */

.dat-hero {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--space-8) var(--space-4);
}

.dat-hero__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
    max-width: var(--hero-width);
}

/* Wyśrodkowanie obejmuje wprowadzenie, ale nie alerty ani przyciski —
   tam ikona stoi przy lewej krawędzi tekstu i wyśrodkowanie rozbiłoby rząd. */
.dat-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.dat-hero__mark {
    width: var(--hero-mark-size);
    height: var(--hero-mark-size);
    border-radius: var(--radius-lg);
}

/* Przyciski rozciągnięte na pełną szerokość kolumny, ale podpis pod nimi
   wraca na oś — inaczej jedyny tekst dosunięty do lewej łamie środek strony. */
.dat-hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    text-align: center;
}

/* Na ekranie logowania wszystkie trzy akcje są równorzędnymi wejściami do aplikacji,
   więc trzecia też musi wyglądać na klikalną. Obramowanie jest słabsze niż w wariancie
   drugorzędnym, żeby hierarchia między nimi została zachowana. */
.dat-hero__actions .dat-btn--ghost { border-color: var(--color-border); }
.dat-hero__actions .dat-btn--ghost:hover { border-color: var(--color-border-strong); }

.dat-hero__badges { justify-content: center; }

@media (max-width: 860px) {
    .dat-hero { min-height: 0; padding: var(--space-8) var(--space-4); }
}