/* Design tokens, reset, body, particles, header, hero (bazowo), section,
.section__label, btn, marquee, testimonials (bazowo), footer, reveal-anim
są w global.css (ładowany PRZED tym plikiem). Tu tylko style SPECYFICZNE dla
"/strony-internetowe": pasek zaufania, kinowa narracja (#historia), interaktywne
realizacje (#realizacje), współpraca bez ryzyka (oś), opinie (featured), rodzaje
stron (accordion), FAQ (details) oraz krótki formularz wyceny.
Każda sekcja: (ikona pagweb_sygnet.svg = ://) +
. */
/* ===== HERO — reuse global .hero; tylko odsunięcie od fixed-headera ===== */
.hero { padding: 7rem 0 4rem; }
/* Kolumna z tekstem: do GÓRY, nie do środka.
Global ma .hero { align-items: center }, a tutaj kolumna wizualna jest bardzo wysoka
(aspect-ratio 2/3 przy ~576 px szerokości = ~864 px wysokości). Wyśrodkowany blok tekstu
(~400 px) spadał przez to o ~230 px i zaczynał się wyraźnie za nisko.
Na /seo problem nie występuje, bo tamtejszy wizual jest niższy. */
.hero__content { align-self: start; padding-top: 3.5rem; }
/* Wideo z Veo jest już ciemne → zdejmujemy globalny przyciemniający filtr (brightness 0.5).
To samo dotyczy mobilnego postera (tło wygradowane w ffmpeg dokładnie do #1C385C). */
.hero__photo { filter: none; }
.hero__poster { filter: none; }
/* Feather krawędzi: WĄSKI (12%), nie 70% jak w global.css.
Global zalewa navy lewe 70% kadru, bo tło wideo home nie zgadza się z navy strony.
Tutaj tło wideo jest wygradowane w ffmpeg dokładnie do #1C385C (rgb 28,56,92), więc
wystarczy wytłumić samą krawędź — dzięki temu WIDAĆ dłoń, którą mężczyzna wyciąga
w stronę tekstu (przy 70% była wymazana). Palce są ucięte przez kadr Veo (nie ma ich
w źródle) → 12% feather sprawia, że rozpływają się w granacie zamiast ostrego cięcia.
rgba(28,56,92,0) zamiast `transparent`, bo `transparent` = rgba(0,0,0,0) i przy tak
wąskim gradiencie interpolacja przez czerń dałaby brudny, szary pas. */
.hero__visual::after {
background: linear-gradient(to right, var(--navy) 0%, rgba(28,56,92,0) 12%),
linear-gradient(to top, var(--navy) 0%, rgba(28,56,92,0) 15%),
linear-gradient(to bottom, var(--navy) 0%, rgba(28,56,92,0) 15%);
}
/* ===== Nagłówek sekcji ===== */
.section__head { max-width: 760px; margin-bottom: 3.5rem; }
/* ============================================================
2. PASEK ZAUFANIA — komponent .trust-* przeniesiony do global.css
(2026-07-31), gdy zaczęły go używać 2 strony: / (home) i ta.
============================================================ */
/* ============================================================
3. KINOWA NARRACJA — „Od kliknięcia do klienta" (#historia)
UWAGA: .story-section NIE jest .section → omija content-visibility:auto,
które rozjeżdża position:sticky (jak .journey na /seo).
============================================================ */
.story-section {
padding: 6rem 3rem; max-width: 1240px; margin: 0 auto;
content-visibility: visible;
}
.story-head { max-width: 720px; margin-bottom: 2rem; }
.story-track {
display: grid; grid-template-columns: 1fr 1.05fr; gap: 4rem;
align-items: start; position: relative;
}
/* Kroki (lewa kolumna, przewijane) */
/* padding-bottom duży celowo: trzyma sticky-wizual przyklejony przez OSTATNI krok,
żeby krok-4 (zdjęcie) zdążyło się pokazać przed „odklejeniem" (inaczej zapala się już pod headerem). */
.story-steps { list-style: none; padding: 5rem 0 10rem; margin: 0; display: flex; flex-direction: column; gap: 7rem; }
.story-step { opacity: 0.82; transition: opacity 0.5s var(--ease-out-expo); }
.story-step--active { opacity: 1; }
.story-step__n {
font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600;
letter-spacing: 0.12em; color: rgba(255,255,255,0.68); transition: color 0.4s ease;
}
.story-step--active .story-step__n { color: var(--yellow); }
.story-step h3 {
font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem);
font-weight: 700; line-height: 1.15; color: var(--white); margin: 0.5rem 0 0.75rem;
}
.story-step p {
font-family: var(--font-body); font-size: 0.98rem; font-weight: 300;
color: rgba(255,255,255,0.7); line-height: 1.7; max-width: 34ch;
}
/* Wizual (prawa kolumna, sticky) */
.story-visual { position: sticky; top: clamp(90px, 15vh, 130px); }
/* ── Wspólne kropki postępu ── */
.story-visual__dots { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; justify-content: center; gap: 0.5rem; }
.story-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); transition: background 0.3s ease, box-shadow 0.3s ease; }
.story-dot.is-active { background: var(--yellow); box-shadow: 0 0 10px rgba(254,204,0,0.6); }
/* ── Scena: wycięta postać „unosi się" na navy (poświata + pierścień + cień + chip) ── */
.story-stage {
position: relative; height: clamp(460px, 56vh, 600px);
display: flex; align-items: flex-end; justify-content: center;
}
.story-stage__glow {
position: absolute; left: 50%; top: 6%; width: 80%; aspect-ratio: 1; transform: translateX(-50%);
background: radial-gradient(circle, rgba(254,204,0,0.22), rgba(254,204,0,0.06) 42%, transparent 68%);
filter: blur(10px); pointer-events: none;
}
.story-stage__ring {
position: absolute; left: 50%; top: 12%; width: 64%; aspect-ratio: 1; transform: translateX(-50%);
border: 1px solid rgba(255,255,255,0.08); border-radius: 50%; pointer-events: none;
}
.story-stage__shadow {
position: absolute; left: 50%; bottom: 3%; width: 54%; height: 26px; transform: translateX(-50%);
background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 72%); filter: blur(6px); pointer-events: none;
}
.story-photos { position: relative; width: 100%; height: 100%; }
.story-photo {
position: absolute; inset: 0; margin: 0; pointer-events: none;
opacity: 0; transform: translateY(16px) scale(0.985);
transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.story-photo.is-active { opacity: 1; transform: none; }
.story-photo img {
width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block;
filter: drop-shadow(0 26px 38px rgba(0,0,0,0.5));
/* miękkie wygaszenie dołu — chowa twardą krawędź kadru postaci w navy */
-webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
}
.story-photo__chip {
position: absolute; left: 0; bottom: 30%; z-index: 2;
font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
color: var(--navy-dark); background: var(--yellow); padding: 0.5rem 0.9rem; border-radius: 100px;
box-shadow: 0 10px 26px rgba(254,204,0,0.4);
}
/* ============================================================
4. REALIZACJE — komponent .work-* przeniesiony do global.css (wspoldzielony z /portfolio).
============================================================ */
/* ============================================================
5. WSPÓŁPRACA BEZ RYZYKA — kontrast „typowa agencja vs PAGWEB"
============================================================ */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: stretch; }
.vs__col { border-radius: 20px; padding: 2rem 1.9rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); }
.vs__col--them { background: rgba(255,90,90,0.03); border-color: rgba(255,90,90,0.14); }
.vs__col--us {
background: linear-gradient(180deg, rgba(254,204,0,0.06), rgba(254,204,0,0.015));
border-color: rgba(254,204,0,0.28);
box-shadow: 0 24px 60px rgba(0,0,0,0.35), inset 0 0 40px rgba(254,204,0,0.03);
}
.vs__head {
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.5); margin-bottom: 1.4rem; padding-bottom: 1rem; min-height: 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center;
}
.vs__col--us .vs__head { color: var(--yellow); border-color: rgba(254,204,0,0.2); }
.vs__head-logo { height: 16px; width: auto; display: block; }
.vs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.05rem; }
.vs__item { display: grid; grid-template-columns: 24px 1fr; gap: 0.85rem; align-items: start; }
.vs__mark {
width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 0.74rem; font-weight: 800; margin-top: 0.1rem; flex-shrink: 0;
}
.vs__mark--bad { background: rgba(255,90,90,0.12); border: 1px solid rgba(255,90,90,0.35); color: #ff7a7a; }
.vs__mark--good { background: var(--yellow); color: var(--navy-dark); box-shadow: 0 4px 14px rgba(254,204,0,0.3); }
.vs__txt { font-family: var(--font-body); font-size: 0.92rem; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,0.55); }
.vs__body { display: flex; flex-direction: column; gap: 0.15rem; }
.vs__body strong { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--white); }
.vs__body span { font-family: var(--font-body); font-size: 0.86rem; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,0.62); }
.vs__divider { display: flex; align-items: center; justify-content: center; }
.vs__divider-badge {
width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; color: rgba(255,255,255,0.6);
background: var(--navy-deeper); border: 1px solid rgba(255,255,255,0.12);
}
/* ============================================================
6. OPINIE — 1 wyróżniona (lewa, podwójna wysokość) + 2 wspierające (prawa)
Karta: gwiazdki + logo firmy (góra), cytat, autor: zdjęcie/monogram + imię i nazwisko + rola·firma.
============================================================ */
.op-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: stretch; }
/* Jedna realna opinia → jedna kolumna wyśrodkowana (zamiast siatki z pustymi miejscami). */
.op-grid--single { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }
.op-grid--single .op-card--featured { grid-row: auto; }
.op-card {
background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px;
padding: 1.9rem; display: flex; flex-direction: column;
}
.op-card--featured {
grid-row: 1 / span 2; padding: 2.5rem;
background: linear-gradient(180deg, rgba(254,204,0,0.05), rgba(255,255,255,0.015));
border-color: rgba(254,204,0,0.22);
}
.op-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.op-card__stars { color: var(--yellow); font-size: 0.95rem; letter-spacing: 0.12em; }
.op-card__logo { height: 34px; width: auto; max-width: 140px; object-fit: contain; opacity: 0.9; }
.op-card__logo--ph {
font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.35); border: 1px dashed rgba(255,255,255,0.18); border-radius: 6px; padding: 0.4rem 0.7rem;
}
.op-card__quote { font-family: var(--font-body); font-weight: 300; font-size: 0.96rem; line-height: 1.7; color: rgba(255,255,255,0.85); margin: 0 0 1.5rem; }
.op-card__quote--lg { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.55rem); line-height: 1.45; color: var(--white); }
.op-card__author { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; }
.op-card__avatar {
width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--yellow);
background: rgba(254,204,0,0.15); border: 2px solid rgba(254,204,0,0.3);
}
.op-card__id { display: flex; flex-direction: column; }
.op-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--white); }
.op-card__role { font-family: var(--font-body); font-weight: 300; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
/* ============================================================
7b. WYDAJNOŚĆ — „wyścig ładowania" (interaktywny)
============================================================ */
.race { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; max-width: 860px; margin: 0 auto; }
.race-lane { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 1.4rem; }
.race-lane--fast { border-color: rgba(254,204,0,0.28); background: linear-gradient(180deg, rgba(254,204,0,0.05), rgba(255,255,255,0.015)); }
.race-lane__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.race-lane__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--white); display: flex; flex-direction: column; gap: 0.15rem; }
.race-lane__sub { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); font-weight: 400; } /* było 0.6rem/0.45 — 9.6px i fail kontrastu */
.race-lane--fast .race-lane__sub { color: rgba(254,204,0,0.8); }
.race-lane__timer { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: rgba(255,255,255,0.85); white-space: nowrap; }
.race-lane--fast .race-lane__timer { color: var(--yellow); }
/* telefon */
.race-phone { border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; overflow: hidden; background: #0a1424; }
.race-phone__bar { height: 6px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.race-phone__progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--yellow), var(--yellow-glow)); }
.race-lane--slow .race-phone__progress { background: linear-gradient(90deg, #ff8a5a, #ffb27a); }
.race-phone__screen { position: relative; height: 230px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; background: #0b1626; }
/* skeleton bloki — niewidoczne, pojawiają się podczas wyścigu */
.race-sk { display: block; border-radius: 7px; background: rgba(255,255,255,0.07); opacity: 0; }
.race-sk--nav { height: 22px; }
.race-sk--hero { height: 84px; background: rgba(255,255,255,0.05); }
.race-sk--line { height: 12px; }
.race-sk--short { width: 60%; }
.race-sk--btn { height: 26px; width: 45%; margin-top: auto; background: rgba(254,204,0,0.25); }
.race-lane--fast .race-sk--btn { background: rgba(254,204,0,0.5); }
/* spinner (kręci się, gdy ładowanie trwa) */
.race-phone__spinner {
position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
border: 3px solid rgba(255,255,255,0.12); border-top-color: rgba(255,255,255,0.6); border-radius: 50%;
opacity: 0; transition: opacity 0.2s ease;
}
.race-lane--slow .race-phone__spinner { border-top-color: #ff9a6a; }
/* ostrzeżenie „53% wyszło" (tylko wolna, po 3 s) */
.race-phone__abandon {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3; color: #ff7a6a;
background: rgba(11,22,38,0.72); backdrop-filter: blur(2px);
opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 2;
}
.race-lane__status { margin-top: 0.9rem; min-height: 1.3rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; text-align: center; }
.race-lane--fast.is-done .race-lane__status { color: rgba(168,230,207,0.95); }
.race-lane--slow.is-done .race-lane__status { color: rgba(255,150,140,0.9); }
/* ── stan: wyścig trwa ── */
.race.is-running .race-lane--fast .race-phone__progress { width: 100%; transition: width 0.9s linear; }
.race.is-running .race-lane--slow .race-phone__progress { width: 100%; transition: width 4.2s linear; }
.race.is-running .race-lane:not(.is-done) .race-phone__spinner { opacity: 1; animation: raceSpin 0.7s linear infinite; }
.race.is-running .race-lane--fast .race-sk { animation: raceSk 0.3s var(--ease-out-expo) backwards; animation-delay: calc(var(--d) * 0.85s); }
.race.is-running .race-lane--slow .race-sk { animation: raceSk 0.3s var(--ease-out-expo) backwards; animation-delay: calc(var(--d) * 4s); }
.race-lane.is-done .race-sk { opacity: 1; } /* po zakończeniu zostają widoczne */
.race-lane.is-done .race-phone__spinner { opacity: 0 !important; animation: none; }
.race-lane--slow.is-abandon .race-phone__abandon { opacity: 1; }
@keyframes raceSpin { to { transform: rotate(360deg); } }
@keyframes raceSk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* sterowanie + fakt */
.race__controls { display: flex; justify-content: center; margin-top: 1.8rem; }
.race__btn {
font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; color: var(--navy-dark);
background: var(--yellow); border: none; border-radius: 100px; padding: 0.85rem 2rem; cursor: pointer;
transition: box-shadow 0.3s ease, transform 0.3s var(--ease-spring);
}
.race__btn:hover { box-shadow: 0 12px 30px rgba(254,204,0,0.3); transform: translateY(-2px); }
.race__btn:disabled { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }
.race__fact { max-width: 620px; margin: 1.6rem auto 0; text-align: center; font-family: var(--font-body); font-size: 0.92rem; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.7); }
.race__fact strong { color: var(--yellow); font-weight: 700; }
/* ============================================================
8. FAQ — 2 kolumny (sticky intro + karta kontaktu | accordion-karty)
============================================================ */
.faq-wrap { display: grid; grid-template-columns: 0.82fr 1.3fr; gap: 3.5rem; align-items: start; }
.faq-aside { position: sticky; top: clamp(90px, 15vh, 130px); }
.faq-aside .section__title { margin-bottom: 1rem; }
.faq-aside__desc { font-family: var(--font-body); font-size: 0.95rem; font-weight: 300; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 1.75rem; max-width: 36ch; }
.faq-help { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 1.5rem; }
.faq-help__lead { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--white); margin-bottom: 0.9rem; }
.faq-help__cta {
display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
color: var(--navy-dark); background: var(--yellow); padding: 0.6rem 1.2rem; border-radius: 100px;
text-decoration: none; transition: box-shadow 0.3s ease, transform 0.3s var(--ease-spring);
}
.faq-help__cta:hover { box-shadow: 0 10px 26px rgba(254,204,0,0.3); transform: translateY(-2px); }
.faq-help__tel { display: block; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.75); text-decoration: none; }
.faq-help__tel:hover { color: var(--yellow); }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; transition: border-color 0.3s ease, background 0.3s ease; }
.faq-item[open] { border-color: rgba(254,204,0,0.25); background: rgba(254,204,0,0.03); }
.faq-q {
list-style: none; cursor: pointer; padding: 1.25rem 3.4rem 1.25rem 1.4rem; position: relative;
font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--white);
transition: color 0.3s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
content: '+'; position: absolute; right: 1.1rem; top: 1.05rem;
width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-size: 1.1rem; line-height: 1; color: rgba(255,255,255,0.65);
transition: all 0.4s var(--ease-spring);
}
.faq-q:hover { color: var(--yellow); }
.faq-item[open] .faq-q { color: var(--yellow); }
.faq-item[open] .faq-q::after { content: '−'; transform: rotate(180deg); border-color: var(--yellow); color: var(--yellow); }
.faq-a { padding: 0 1.4rem 1.4rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 300; color: rgba(255,255,255,0.72); line-height: 1.75; }
/* ============================================================
9. WYCENA / KONTAKT + FORMULARZ
Cały komponent (.contact-section, .contact-wrap, .contact-channel*,
.contact-form, .form-*) przeniesiony do css/global.css — używa go teraz
6 stron usługowych, więc przestał być stylem per-page. Tu zostaje tylko
to, co unikalne. UWAGA: sekwencja „gwiazdka+ukośnik" w treści komentarza
zamyka go przedwcześnie i WYRZUCA następną regułę (tak zginął .lead-bar
z position:fixed) — nie wklejać selektorów z „*" przed „/".
============================================================ */
/* ============================================================
PŁYWAJĄCY LEAD BAR — stała ścieżka konwersji (pojawia się po hero, znika na #contact)
============================================================ */
.lead-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 0.8rem 1rem;
background: rgba(9,21,32,0.92); backdrop-filter: blur(18px);
border-top: 1px solid rgba(254,204,0,0.25);
transform: translateY(120%); transition: transform 0.55s var(--ease-out-expo);
}
.lead-bar--visible { transform: none; }
.lead-bar__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 0.9rem; }
.lead-bar__text { flex: 1; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--white); line-height: 1.3; }
.lead-bar__cta {
flex-shrink: 0; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
color: var(--navy-dark); background: var(--yellow); text-decoration: none;
padding: 0.6rem 1.3rem; border-radius: 100px; transition: box-shadow 0.3s ease, transform 0.3s var(--ease-spring);
}
.lead-bar__cta:hover { box-shadow: 0 8px 24px rgba(254,204,0,0.35); transform: translateY(-2px); }
.lead-bar__tel { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--white); text-decoration: none; opacity: 0.85; }
.lead-bar__tel:hover { color: var(--yellow); opacity: 1; }
.lead-bar__close {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7);
font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;
}
.lead-bar__close:hover { background: rgba(255,255,255,0.12); color: var(--white); }
/* Mobile (dotyk): większe cele dotykowe, wyłączony backdrop (jak w global.css) oraz
schowany tekst na bardzo wąskich ekranach, żeby pasek nie rósł do 3 linii. */
@media (hover: none) and (pointer: coarse) {
.lead-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(9,21,32,0.97); }
.lead-bar__close { width: 40px; height: 40px; }
.lead-bar__tel { padding: 0.6rem 0; }
.lead-bar__cta { padding: 0.75rem 1.3rem; }
}
@media (max-width: 400px) {
.lead-bar__text { display: none; }
}
@media (min-width: 768px) {
.lead-bar {
left: 50%; right: auto; bottom: 1.5rem; width: min(720px, calc(100% - 3rem));
border: 1px solid rgba(254,204,0,0.25); border-radius: 100px;
box-shadow: 0 24px 60px rgba(0,0,0,0.55); padding: 0.7rem 0.7rem 0.7rem 1.6rem;
transform: translate(-50%, 220%);
}
.lead-bar--visible { transform: translate(-50%, 0); }
}
@media (max-width: 520px) {
.lead-bar__tel { display: none; }
.lead-bar__text { font-size: 0.82rem; }
}
/* ============================================================
RESPONSIVE (strony-specific; header/section/footer w global.css)
============================================================ */
@media (max-width: 1024px) {
/* Desktopowe `.hero { padding: 7rem 0 4rem }` (ten plik) wygrywa kolejnością źródeł
z globalnym media ≤1024, a global zeruje tam padding-left/-right na __content —
bez tej reguły tekst hero kleił się do lewej krawędzi w paśmie 769–1024 px. */
.hero { padding: 7rem 1.5rem 4rem; }
.op-grid { grid-template-columns: 1fr; }
.op-card--featured { grid-row: auto; }
}
@media (max-width: 900px) {
/* Kinowa narracja → kolumna; wizual chowamy, kroki czytelne statycznie */
.story-track { grid-template-columns: 1fr; gap: 0; }
.story-visual { display: none; }
.story-steps { padding: 1rem 0; gap: 2.75rem; }
.story-step { opacity: 1; }
/* Kontrast „inni vs my" → kolumna, badge między kartami */
.vs { grid-template-columns: 1fr; gap: 1rem; }
.vs__divider { padding: 0.25rem 0; }
/* Rodzaje: taby w poziomym pasku nad zrzutem */
/* FAQ → jedna kolumna, intro nie-sticky */
.faq-wrap { grid-template-columns: 1fr; gap: 2rem; }
.faq-aside { position: static; }
}
@media (max-width: 768px) {
.hero { padding: 6rem 1.5rem 2.5rem; }
.story-section { padding: 4rem 1.5rem; }
.race { grid-template-columns: 1fr; gap: 1.25rem; }
}
/* ===== prefers-reduced-motion: treść statyczna i czytelna ===== */
@media (prefers-reduced-motion: reduce) {
.story-step { opacity: 1; }
.story-photo { transition: none; }
.story-photo:not(.is-active) { transform: none; }
.lead-bar { transition: none; }
.race-phone__spinner { animation: none !important; }
.race.is-running .race-sk { animation: none; opacity: 1; }
}