/* ===== STRONA GŁÓWNA (index.html) ===== */
/* Landing dzieli style.css z arkuszem; wszystko poniżej dotyczy tylko
   body.landing-page. Jedna wąska kolumna, ta sama typografia co arkusz. */
.landing-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 60px 20px 40px;
}
.landing-logo {
    font-size: 40px;
    margin-bottom: 30px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
}
/* Wersja przy logo — drobna i wyszarzona, żeby nie konkurowała z nazwą
   (odpowiednik #wersja w sheet.css). */
.landing-wersja {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.landing-hero {
    margin-bottom: 20px;
    text-align: center;
}
/* Przełącznik motywu (jasny/ciemny/auto) — jedyny element chrome na landingu,
   więc zamiast menu „⋯" (jak w template.html) jest to pojedynczy, dyskretny
   przycisk w rogu. Logika cyklu jest w inline-skrypcie na dole index.html
   (ten sam klucz localStorage co #theme-toggle w arkuszu, więc wybór jest
   wspólny dla całej strony). */
.landing-theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-kontrolka);
    background-color: var(--bg);
    font-family: inherit;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}
/* Hover chrome = podświetlone tło, nie ramka (ZASADA HOVERU — patrz komentarz
   przy #naroznik-prawy button w style/sheet.css). */
.landing-theme-toggle:hover {
    background-color: var(--bg-muted);
    color: var(--text);
}
.landing-hero h1 {
    margin: 0 0 20px;
    font-size: 30px;
    line-height: 1.3;
}
.landing-lede {
    max-width: 560px;
    margin: 0 auto 30px;
    /* 18px = rozmiar treści zadania na arkuszu (.exercise-container) — landing
       i arkusz celowo dzielą skalę: lede/CTA 18px, podpisy 14px, stopka 13px
       (sprawdzone przy audycie etapu 2; CTA trzyma wagę w rozmiarze, patrz
       komentarz przy .landing-cta). */
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-soft);
}
/* CTA landingu — ta sama rodzina co duże przyciski stopki arkusza: ramka
   1px (--border-kontrolka), promień --radius-kontrolka, hover przez kolor ramki.
   Do 2026-07-27 miał ramkę 2px w kolorze --text i hover na pełnej inwersji, więc
   w ciemnym motywie świecił mocniej niż cokolwiek na arkuszu. Waga wizualna
   zostaje w rozmiarze (18px, padding 14/28), nie w grubości obwódki. */
/* Stała szerokość 480 px, nie „tyle, ile tekstu" (Henrich, 2026-08-20): arkusze
   są równorzędnym wyborem, więc mają wyglądać jak dwa jednakowe klawisze, a nie
   jak dwa napisy różnej długości. Do 2026-08-20 przyciski były inline-block i
   rozdzielały je puste akapity .landing-cta-sub. Te zniknęły, odstęp robi
   teraz margines. `box-sizing` jest tu konieczne (arkusz stylów nie ma
   globalnego resetu), inaczej padding i ramka doszłyby do tych 480 px.
   `max-width: 100%` sam zwęża przycisk na wąskim ekranie; reszta dostrojenia
   na telefon jest w responsive.css. HENRICH: ZNIEMIŁEM JEDNAK NA 480px*/
.landing-cta {
    display: block;
    box-sizing: border-box;
    width: 480px;
    max-width: 100%;
    margin: 0 auto 16px;
    padding: 14px 28px;
    border: var(--border-kontrolka) solid var(--border-strong);
    border-radius: var(--radius-kontrolka);
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
}
.landing-cta:hover {
    border-color: var(--text);
    background-color: var(--bg-muted);
    color: var(--text);
}
.landing-section {
    margin-top: 70px;
    text-align: center;
}
.landing-section h2 {
    margin-bottom: 25px;
    font-size: 22px;
}
.landing-cards {
    display: flex;
    gap: 20px;
    text-align: left;
}
/* Karty landingu miały ostre narożniki, gdy cała reszta strony jeździ na
   --radius-kontrolka — jedyny powód był historyczny. */
.landing-card {
    flex: 1;
    padding: 20px;
    border: var(--border-kontrolka) solid var(--border);
    border-radius: var(--radius-kontrolka);
}
.landing-card h3 {
    margin: 0 0 10px;
    font-size: 17px;
}
.landing-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-soft);
}
.landing-section-alt p {
    max-width: 560px;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-soft);
}
.landing-feedback-link {
    display: inline-block;
    color: var(--text-muted-2);
    text-decoration: underline;
}
.landing-footer {
    margin-top: 70px;
    margin-bottom: 40px;
    font-size: 13px;
    text-align: center;
    color: var(--text-faint);
}
.landing-footer a {
    color: var(--text-muted-2);
    text-decoration: underline;
}
@media (max-width: 640px) {
    .landing-cards {
        flex-direction: column;
    }
}