/* ====================================================
   AI WEB STUDIO - UKLAD LANDING (16.09.2026, przebudowa po uwadze Wiki)
   Zastapil uklad artykulowy z tego samego dnia: waska kolumna 800 px
   na calej dlugosci czytala sie jak wpis na blogu, a to sa strony,
   ktore maja sprzedawac.

   DIALE (KROK 1 skilla design-taste):
     DESIGN_VARIANCE  niski-sredni  (uslugi lokalne + B2B, marka wlasna)
     MOTION_INTENSITY niski         (subtelne reveal, jak reszta serwisu)
     VISUAL_DENSITY   przewiewny    (landing sprzedazowy)

   BLOKADA REFERENCJI (KROK 2a):
     Referencja glowna: wlasne podstrony uslugowe aiwebstudio.pl
                        (/wizytowka-google, /seo) - spojnosc z tym, co juz zyje.
     Zachowuje: krem #F7F5F2 jako plotno, ochra #8C5A0F jako JEDYNY akcent,
                Space Grotesk naglowki + Outfit tekst, rytm sekcji jasna-biala-ciemna,
                etykieta wersalikowa nad naglowkiem, promien kart 16 px.
     Pozyczam:  pasek liczb-dowodow (wzorzec z /realizacje),
                ciemny blok domkniecia (wzorzec z /cennik/).
     Role tokenow: ochra = tylko CTA, etykiety i druga linia naglowka.
                   Zloto #E4B872 = tylko na ciemnym tle. Nigdy odwrotnie.
     Odrzucam:  waska kolumna jako uklad CALEJ strony, okruchy i spis tresci
                jako pierwszy ekran, karta wokol kazdego bloku tresci.

   Zasada z DESIGN-SYSTEM.md pkt 5.1 zostaje: ten plik nie definiuje krojow
   ani wag naglowkow - bierze je z tokenow. Definiuje uklad i rytm.
==================================================== */

.lp {
    --lp-krem: #F7F5F2;
    --lp-kosc: #FCFAF7;
    --lp-biel: #FFFFFF;
    --lp-grafit: #1A1D23;
    --lp-granat: #0B1120;
    --lp-szary: #585D66;
    --lp-tekst: #3C4149;
    --lp-braz: #8C5A0F;
    --lp-braz2: #6E4709;
    --lp-zloto: #E4B872;
    --lp-linia: rgba(26, 29, 35, .12);
    --lp-ease: cubic-bezier(0, 0, .2, 1);
}

/* ---------- Pasy sekcji: pelna szerokosc, naprzemienne tlo ---------- */
.lp-sek {
    padding: clamp(4.5rem, 8vw, 7.5rem) 4rem;
    background: var(--lp-krem);
    scroll-margin-top: 90px;
}
/* Sekcja tuz pod pierwszym ekranem nie dokłada drugiego pelnego odstepu -
   hero ma juz swoj dolny padding. Bez tego na /blog/ (strona bez spisu tresci)
   powstawala dziura ok. 200 px miedzy leadem a pierwszym akapitem. */
.lp-hero + .lp-sek,
.lp-hero + .lp-spis { padding-top: clamp(2rem, 3.2vw, 3.25rem); }
.lp-sek--kosc { background: var(--lp-kosc); }
.lp-sek--biala { background: var(--lp-biel); }
.lp-sek--ciemna { background: var(--lp-grafit); color: rgba(247, 245, 242, .82); }
.lp-sek--ciemna h2, .lp-sek--ciemna h3, .lp-sek--ciemna strong, .lp-sek--ciemna b { color: #F7F5F2; }
@media (max-width: 860px) { .lp-sek { padding: clamp(3rem, 11vw, 4.5rem) 1.4rem; } }

/* Kontenery: szeroki dla ukladu, wezszy dla samego czytania */
.lp-in { max-width: 1080px; margin: 0 auto; }
.lp-in--waska { max-width: 760px; }

/* ---------- HERO ---------- */
.lp-hero {
    padding: clamp(5.75rem, 7vw, 7.5rem) 4rem clamp(2.5rem, 4.5vw, 4rem);
    background: var(--lp-krem);
    position: relative;
}
@media (max-width: 860px) { .lp-hero { padding: 7rem 1.4rem 3rem; } }

/* Uklad dwukolumnowy pierwszego ekranu. Prawa kolumna to KARTA Z INFORMACJA
   (co sprawdzam / gdzie pracuje), a nie udawana ilustracja - zakaz rysowania
   grafiki na sile z KROKU 5 skilla design-taste. Bez niej prawa polowa ekranu
   na 1440 px stala pusta i strona wygladala na niedokonczona. */
.lp-hero--dwie .lp-in {
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr);
    gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 960px) { .lp-hero--dwie .lp-in { grid-template-columns: 1fr; } }
.lp-hero--dwie h1 { max-width: 20ch; }
.lp-hero--dwie .lp-lead { max-width: 46ch; }

.lp-karta {
    background: var(--lp-biel); border: 1px solid var(--lp-linia); border-radius: 20px;
    padding: 1.9rem 2rem;
    box-shadow: 0 30px 60px rgba(26, 29, 35, .07), 0 3px 10px rgba(26, 29, 35, .04);
}
.lp-karta-tyt {
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--lp-braz); margin-bottom: 1.3rem;
}
.lp-karta ol, .lp-karta ul { list-style: none; margin: 0; padding: 0; counter-reset: lpk; }
.lp-karta li {
    counter-increment: lpk; position: relative; padding-left: 2.4rem;
    margin-bottom: 1.05rem; font-size: .95rem; line-height: 1.6; color: var(--lp-tekst);
}
.lp-karta li:last-child { margin-bottom: 0; }
.lp-karta li b { display: block; font-weight: 600; color: var(--lp-grafit); margin-bottom: .15rem; }
.lp-karta ol > li::before {
    content: counter(lpk, decimal-leading-zero); position: absolute; left: 0; top: .1rem;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .7rem;
    color: var(--lp-braz);
}
.lp-karta ul > li::before {
    content: ''; position: absolute; left: .35rem; top: .62rem;
    width: 7px; height: 7px; border-radius: 50%; background: var(--lp-braz);
}
.lp-karta-stopka {
    margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--lp-linia);
    font-size: .85rem; line-height: 1.6; color: var(--lp-szary);
}

.lp-okruchy { font-size: .8rem; color: var(--lp-szary); margin-bottom: 1.1rem; }
.lp-okruchy a { color: var(--lp-szary); text-decoration: none; border-bottom: 1px solid rgba(26, 29, 35, .18); }
.lp-okruchy a:hover { color: var(--lp-braz); border-color: var(--lp-braz); }

.lp-etykieta {
    display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--lp-braz); margin-bottom: .9rem;
}
.lp-hero h1 { margin-bottom: 1.2rem; max-width: 18ch; text-wrap: balance; }
.lp-hero h1 em { font-style: normal; color: var(--lp-braz); }

.lp-lead {
    font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.7; color: var(--lp-tekst);
    max-width: 60ch; margin-bottom: 1.45rem; text-wrap: pretty;
}
.lp-akcje { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.lp-nota { font-size: .82rem; color: var(--lp-szary); margin-top: 1.1rem; }

.lp-meta {
    display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
    font-size: .82rem; color: var(--lp-szary); margin-top: 2rem;
    padding-top: 1.2rem; border-top: 1px solid var(--lp-linia);
}
.lp-meta b { font-weight: 600; color: var(--lp-grafit); }

/* ---------- Pasek liczb-dowodow (ciemny, waski) ---------- */
.lp-dowod { background: var(--lp-grafit); padding: clamp(2.2rem, 4vw, 3rem) 4rem; }
@media (max-width: 860px) { .lp-dowod { padding: 2.2rem 1.4rem; } }
.lp-dowod-siatka {
    max-width: 1080px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem;
}
.lp-dowod-poz strong {
    display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--lp-zloto);
    margin-bottom: .5rem;
}
.lp-dowod-poz span { display: block; font-size: .9rem; line-height: 1.6; color: rgba(247, 245, 242, .78); }

/* ---------- Spis tresci: poziomy pas, nie pudelko ---------- */
.lp-spis { border-top: 1px solid var(--lp-linia); border-bottom: 1px solid var(--lp-linia); }
.lp-spis-tyt {
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--lp-braz); margin-bottom: 1rem;
}
.lp-spis ol {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .55rem 2rem;
    counter-reset: lpspis;
}
.lp-spis li { counter-increment: lpspis; margin: 0; font-size: .95rem; line-height: 1.5; }
.lp-spis li::before {
    content: counter(lpspis, decimal-leading-zero);
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .7rem;
    color: var(--lp-braz); margin-right: .6rem;
}
.lp-spis a { color: var(--lp-grafit); text-decoration: none; border-bottom: 1px solid transparent; }
.lp-spis a:hover { border-color: var(--lp-braz); color: var(--lp-braz); }

/* ---------- Naglowek sekcji ---------- */
.lp-glowa { max-width: 760px; margin-bottom: 2.2rem; }
.lp-glowa h2 { margin: 0; text-wrap: balance; }
.lp-glowa h2 em { font-style: normal; color: var(--lp-braz); }
.lp-sek--ciemna .lp-glowa h2 em { color: var(--lp-zloto); }

/* ---------- Tresc czytana ---------- */
.ar-tresc { font-size: 1.06rem; line-height: 1.85; color: var(--lp-tekst); }
.lp-sek--ciemna .ar-tresc { color: rgba(247, 245, 242, .82); }
/* Kolumna czytania ~68 znakow, ale tabele, kafle i ramki wychodza na pelna
   szerokosc kontenera - to jest roznica miedzy landingiem a slupkiem tekstu. */
.ar-tresc > p,
.ar-tresc > ul,
.ar-tresc > ol,
.ar-tresc > h3 { max-width: 68ch; }
.ar-tresc > .ar-tabela,
.ar-tresc > .ar-siatka3,
.ar-tresc > .ar-ramka,
.ar-tresc > .ar-zrodlo-tab { max-width: 100%; }
.ar-tresc--wstep > p { max-width: 62ch; font-size: 1.12rem; }
.ar-tresc h3 { margin: 2.2rem 0 .8rem; color: var(--lp-grafit); }
.lp-sek--ciemna .ar-tresc h3 { color: #F7F5F2; }
.ar-tresc p { margin-bottom: 1.15rem; text-wrap: pretty; }
.ar-tresc ul, .ar-tresc ol { margin: 0 0 1.35rem 1.35rem; }
.ar-tresc li { margin-bottom: .6rem; }
.ar-tresc strong, .ar-tresc b { font-weight: 600; color: var(--lp-grafit); }
.lp-sek--ciemna .ar-tresc strong, .lp-sek--ciemna .ar-tresc b { color: #F7F5F2; }
.ar-tresc a { color: var(--lp-braz); text-decoration: none; border-bottom: 1px solid rgba(140, 90, 15, .35); }
.ar-tresc a:hover { border-color: var(--lp-braz); }
.lp-sek--ciemna .ar-tresc a { color: var(--lp-zloto); border-bottom-color: rgba(228, 184, 114, .4); }
.ar-tresc img { max-width: 100%; height: auto; border-radius: 16px; display: block; }


/* Ramka konkretu - wychodzi POZA kolumne czytania, zeby przerwac rytm tekstu */
.ar-ramka {
    margin: 2.4rem 0; padding: 1.7rem 1.9rem;
    border: 1px solid var(--lp-linia); border-radius: 16px; background: var(--lp-biel);
    box-shadow: 0 30px 60px rgba(26, 29, 35, .06), 0 3px 10px rgba(26, 29, 35, .03);
}
.lp-sek--biala .ar-ramka { background: var(--lp-kosc); }
.lp-sek--ciemna .ar-ramka { background: rgba(247, 245, 242, .06); border-color: rgba(228, 184, 114, .35); }
.ar-ramka-tyt {
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--lp-braz); margin-bottom: .7rem;
}
.lp-sek--ciemna .ar-ramka-tyt { color: var(--lp-zloto); }
.ar-ramka p:last-child { margin-bottom: 0; }

/* ---------- TABELE - bezpiecznik przewijania na telefonie ----------
   Lekcja 14.09 (Dominika): szablon bez zadnych regul `table` = tabela ucieta
   na telefonie bez mozliwosci przewiniecia. Owijka jest obowiazkowa, a regula
   `display:block` ponizej ratuje tez tabele wstawiona bez owijki. */
.ar-tabela {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 2.4rem 0; border: 1px solid var(--lp-linia); border-radius: 16px;
    background: var(--lp-biel);
}
.lp-sek--biala .ar-tabela { background: var(--lp-kosc); }
.ar-tabela table { margin: 0; border: 0; background: transparent; }
.ar-tresc table {
    width: 100%; border-collapse: collapse; font-size: .95rem;
    background: var(--lp-biel); border: 1px solid var(--lp-linia); border-radius: 16px; overflow: hidden;
}
.ar-tresc th, .ar-tresc td {
    padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid rgba(26, 29, 35, .09);
    vertical-align: top;
}
.ar-tresc th {
    background: rgba(140, 90, 15, .07); color: var(--lp-grafit);
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
}
.ar-tresc tr:last-child td { border-bottom: 0; }
.ar-zrodlo-tab { font-size: .8rem; color: var(--lp-szary); margin-top: .8rem; display: block; }
@media (max-width: 860px) {
    .ar-tresc table { display: block; overflow-x: auto; }
    .ar-tresc th, .ar-tresc td { min-width: 8.5rem; }
}

/* ---------- Kafle ---------- */
.ar-siatka3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin: 2.4rem 0; }
.ar-plytka {
    padding: 1.7rem 1.8rem; border: 1px solid var(--lp-linia); border-radius: 16px;
    background: var(--lp-biel);
}
.lp-sek--biala .ar-plytka { background: var(--lp-kosc); }
.ar-plytka h3 { margin: 0 0 .7rem; }
.ar-plytka p { margin: 0; font-size: .95rem; line-height: 1.75; color: var(--lp-szary); }
.ar-liczba {
    font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 2.2rem;
    color: var(--lp-braz); line-height: 1; display: block; margin-bottom: .5rem;
}

/* ---------- FAQ ---------- */
.ar-faq { max-width: 860px; }
.ar-faq details {
    border-bottom: 1px solid var(--lp-linia); padding: 1.15rem 0;
}
.ar-faq details:first-of-type { border-top: 1px solid var(--lp-linia); }
.ar-faq summary {
    cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    color: var(--lp-grafit); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.5;
    list-style: none; padding-right: 2rem; position: relative;
    transition: color .15s var(--lp-ease);
}
.ar-faq summary:hover { color: var(--lp-braz); }
.ar-faq summary::-webkit-details-marker { display: none; }
.ar-faq summary::after {
    content: ''; position: absolute; right: .35rem; top: .5em;
    width: 9px; height: 9px; border-right: 2px solid var(--lp-braz); border-bottom: 2px solid var(--lp-braz);
    transform: rotate(45deg); transition: transform .2s var(--lp-ease);
}
.ar-faq details[open] summary::after { transform: rotate(-135deg); }
.ar-faq details p { margin: 1rem 0 .3rem; max-width: 68ch; color: var(--lp-tekst); }
.ar-faq summary:focus-visible { outline: 2px solid var(--lp-braz); outline-offset: 4px; }

/* ---------- Zrodla ---------- */
.ar-zrodla { font-size: .88rem; color: var(--lp-szary); max-width: 760px; }
.ar-zrodla ol { margin: .9rem 0 0 1.2rem; }
.ar-zrodla li { margin-bottom: .5rem; line-height: 1.65; }
.ar-zrodla a { color: var(--lp-szary); border-bottom: 1px solid rgba(26, 29, 35, .2); text-decoration: none; }

/* ---------- Domkniecie ---------- */
.lp-cta { text-align: left; }
.lp-cta h2 { max-width: 20ch; margin: 0 0 1rem; }
.lp-cta p { max-width: 58ch; margin-bottom: 1.8rem; font-size: 1.05rem; line-height: 1.75; }
.lp-cta .btn { background: var(--lp-zloto); color: #5C3806; }
.lp-cta .btn:hover { background: #E9A825; color: var(--lp-grafit); }

/* ---------- Dalej do przeczytania ---------- */
.ar-dalej-tyt {
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--lp-braz); margin-bottom: 1.3rem;
}
.ar-dalej-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.ar-karta {
    display: block; padding: 1.5rem 1.6rem; border: 1px solid var(--lp-linia);
    border-radius: 16px; background: var(--lp-biel); text-decoration: none; color: var(--lp-grafit);
    transition: border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.ar-karta:hover { border-color: var(--lp-braz); transform: translateY(-2px); }
.ar-karta b {
    display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    margin-bottom: .4rem; line-height: 1.35;
}
.ar-karta span { font-size: .86rem; color: var(--lp-szary); line-height: 1.65; }

/* ---------- Lista wpisow poradnika ---------- */
.ar-lista { display: grid; gap: 0; }
.ar-lista-poz {
    display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: start;
    padding: 1.9rem 0; border-bottom: 1px solid var(--lp-linia);
    text-decoration: none; color: var(--lp-grafit);
}
.ar-lista-poz:first-child { border-top: 1px solid var(--lp-linia); }

.ar-lista-poz b {
    display: block; grid-column: 1; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.3; margin-bottom: .55rem;
    text-wrap: balance; transition: color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.ar-lista-poz:hover b { color: var(--lp-braz); transform: translateX(.5rem); }
.ar-lista-poz span { display: block; grid-column: 1; font-size: .98rem; color: var(--lp-szary); line-height: 1.7; max-width: 62ch; }
.ar-lista-poz em {
    grid-column: 2; grid-row: 1 / span 2; align-self: start; padding-top: .5rem;
    font-style: normal; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--lp-braz); white-space: nowrap;
}
@media (max-width: 640px) {
    .ar-lista-poz { grid-template-columns: 1fr; }
    .ar-lista-poz em { grid-column: 1; grid-row: auto; margin-top: .7rem; }
}

/* ---------- Ruch: subtelny reveal, zgodny z reszta serwisu ---------- */
.lp-sek, .lp-dowod { --lp-op: 1; }
@media (prefers-reduced-motion: reduce) {
    .ar-karta, .ar-lista-poz { transition: none; }
    .ar-karta:hover { transform: none; }
    .ar-lista-poz b { transition: none; }
    .ar-lista-poz:hover b { transform: none; }
    .ar-faq summary::after { transition: none; }
}