/* kupimyspolki.pl — landing (10.10.2026).
   Motyw: wpis hipoteki z działu IV księgi wieczystej + fioletowa urzędowa pieczątka „KUPIMY".
   Pieczątka to jedyny mocny akcent; fiolet = kolor działania (CTA). */
:root {
    --papier: #eef1f4;      /* chłodny papier urzędowy */
    --arkusz: #fbfcfd;      /* kartka wypisu */
    --atrament: #1c2a3a;    /* tekst, nagłówki */
    --szary: #5a6776;       /* tekst drugoplanowy */
    --linia: #c9d1da;       /* rubryki wypisu */
    --pieczatka: #5b3fa8;   /* fiolet pieczątki, CTA */
    --pieczatka-ciemna: #47308a;
    --blad: #b42318;
    --miara: 34rem;
}
@media (prefers-color-scheme: dark) {
    :root {
        --papier: #141b24;
        --arkusz: #1d2631;
        --atrament: #e7ecf2;
        --szary: #a3afbd;
        --linia: #36414e;
        --pieczatka: #a48ce8;
        --pieczatka-ciemna: #bba8f0;
        --blad: #f97066;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0;
    background: var(--papier);
    color: var(--atrament);
    font: 400 1.0625rem/1.6 'Source Sans 3', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
h1, h2, h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; line-height: 1.08; margin: 0; }
a { color: var(--pieczatka); }
:focus-visible { outline: 3px solid var(--pieczatka); outline-offset: 3px; border-radius: 2px; }

.top, main > section, .stopka { width: min(72rem, 100% - 2rem); margin-inline: auto; }

/* Pasek górny */
.top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; }
.logo { font: 800 1.25rem/1 'Bricolage Grotesque', sans-serif; color: var(--atrament); text-decoration: none; letter-spacing: -0.01em; }
.logo span { color: var(--pieczatka); }
.top-cta { font-weight: 600; text-decoration: none; padding: 0.5rem 0.9rem; border: 2px solid var(--pieczatka); border-radius: 999px; }
.top-cta:hover { background: var(--pieczatka); color: var(--arkusz); }

/* Hero */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(2rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
}
.hero h1 {
    font-size: clamp(2.4rem, 5.6vw, 4.6rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    max-width: 14ch;
}
.lead { font-size: clamp(1.15rem, 1.6vw, 1.3rem); max-width: var(--miara); margin: 1.5rem 0 0.75rem; }
.lead-small { color: var(--szary); max-width: var(--miara); margin: 0 0 2rem; }
.hint { color: var(--szary); font-size: 0.95rem; margin: 0.9rem 0 0; }

.btn {
    display: inline-block;
    font: 700 1.1rem/1 'Bricolage Grotesque', sans-serif;
    color: #fff;
    background: var(--pieczatka);
    border: 0;
    border-radius: 0.6rem;
    padding: 1.05rem 1.6rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--pieczatka-ciemna);
}
.btn:hover { background: var(--pieczatka-ciemna); }
.btn:disabled { opacity: 0.6; cursor: wait; }
@media (prefers-color-scheme: dark) { .btn { color: #140f24; } }

/* Wypis z księgi — dokument, nie karta */
.kw { position: relative; margin: 0; padding: 1rem 3rem 3.5rem 0; }
.kw-sheet {
    background: var(--arkusz);
    border: 1px solid var(--linia);
    padding: 1.4rem 1.5rem 1.2rem;
    font: 400 0.95rem/1.45 'Courier Prime', 'Courier New', monospace;
    transform: rotate(-1.2deg);
    box-shadow: 0 1px 0 var(--linia), 0 18px 40px -24px rgba(28, 42, 58, 0.45);
}
.kw-head { margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--atrament); font-weight: 700; }
.kw dl { margin: 0; }
.kw dl div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--linia); }
.kw dt { color: var(--szary); }
.kw dd { margin: 0; }
.kw-foot { margin: 0.9rem 0 0; color: var(--szary); }

.stamp {
    position: absolute;
    right: -0.75rem;
    bottom: -3rem;
    width: clamp(9.5rem, 15vw, 11.5rem);
    color: var(--pieczatka);
    opacity: 0.88;
    mix-blend-mode: multiply;
    transform: rotate(-14deg);
    font-family: 'Bricolage Grotesque', sans-serif;
    animation: przybij 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.6s both;
}
@media (prefers-color-scheme: dark) { .stamp { mix-blend-mode: normal; } }
.stamp svg { display: block; width: 100%; height: auto; overflow: hidden; }
@keyframes przybij {
    from { opacity: 0; transform: rotate(-4deg) scale(1.9); }
    to { opacity: 0.88; transform: rotate(-14deg) scale(1); }
}
@keyframes przybij-telefon {
    from { opacity: 0; transform: rotate(-4deg); }
    to { opacity: 0.88; transform: rotate(-14deg); }
}
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }

/* Kogo szukamy */
.kogo, .kroki, .zglos { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--linia); }
.kogo h2, .kroki h2, .zglos h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 2rem; }
.kogo-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.kogo h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.kogo ul { list-style: none; margin: 0; padding: 0; }
.kogo li { position: relative; padding: 0.55rem 0 0.55rem 2rem; max-width: var(--miara); }
.tak li::before, .nie li::before { position: absolute; left: 0; top: 0.5rem; font-weight: 700; }
.tak li::before { content: '✓'; color: var(--pieczatka); }
.nie li::before { content: '✕'; color: var(--szary); }
.nie { color: var(--szary); padding-left: clamp(0rem, 3vw, 2.5rem); border-left: 1px solid var(--linia); }

/* Kroki — to naprawdę sekwencja */
.kroki ol { list-style: none; counter-reset: krok; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.kroki li { counter-increment: krok; }
.kroki li::before {
    content: counter(krok);
    display: block;
    font: 800 2.6rem/1 'Bricolage Grotesque', sans-serif;
    color: var(--pieczatka);
    margin-bottom: 0.6rem;
}
.kroki h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.kroki p { margin: 0; color: var(--szary); }

/* Formularz */
.zglos { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.zglos-intro p { margin: 0; max-width: 24rem; font-size: 1.15rem; }
.zglos h2 { margin-bottom: 1rem; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; background: var(--arkusz); border: 1px solid var(--linia); border-radius: 0.75rem; padding: clamp(1.25rem, 3vw, 2rem); }
form .full { grid-column: 1 / -1; }
form label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.98rem; }
.opt { font-weight: 400; color: var(--szary); }
input, textarea {
    font: inherit; font-weight: 400; color: var(--atrament); background: var(--papier);
    border: 1px solid var(--linia); border-radius: 0.45rem; padding: 0.7rem 0.8rem; width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--pieczatka); outline-offset: 0; border-color: var(--pieczatka); }
.err { display: none; color: var(--blad); font-weight: 400; font-size: 0.92rem; }
label.zle input { border-color: var(--blad); }
label.zle .err, form.bez-zgody #zgoda-err { display: block; }
.zgoda { grid-template-columns: auto 1fr; align-items: start; font-weight: 400; gap: 0.7rem; }
.zgoda input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--pieczatka); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 0; color: var(--szary); min-height: 1.4em; }
.ok h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--pieczatka); }
.ok p { margin: 0; }

.stopka { padding: 2rem 0 3rem; color: var(--szary); font-size: 0.92rem; border-top: 1px solid var(--linia); }
.stopka a { color: inherit; }

/* Telefon */
@media (max-width: 52rem) {
    .hero, .kogo-cols, .zglos { grid-template-columns: 1fr; }
    .kw { padding-right: 1.5rem; max-width: 30rem; }
    /* Mobilny Chrome ustala szerokość widoku przy załadowaniu — powiększona pieczątka z animacji by ją rozpychała. */
    .stamp { right: 0; width: 8.5rem; bottom: -2rem; animation-name: przybij-telefon; }
    .nie { border-left: 0; padding-left: 0; border-top: 1px solid var(--linia); padding-top: 1.25rem; }
    .kroki ol { grid-template-columns: 1fr; }
    form { grid-template-columns: 1fr; }
}
@media (max-width: 26rem) {
    .kw dl div { grid-template-columns: 1fr; gap: 0.1rem; }
    .top-cta { padding: 0.4rem 0.7rem; font-size: 0.95rem; }
}