/* AutoZeszyt — landing. Arkusz wydzielony z index.html (05.08.2026).
   Sekcja 2 powstała z atrybutów style="" eksportu projektowego —
   prefiks `body ` utrzymuje pierwszeństwo, które miał styl inline. */

/* ═══ 1. baza ═══ */
html { scroll-behavior:smooth; }
body { margin:0; background:#F4F6FB; font-family:'Manrope',sans-serif; color:#0F172A; }
a { color:#4F46E5; text-decoration:none; } a:hover { color:#2563EB; }
input::placeholder, textarea::placeholder { color:#94A3B8; }
@keyframes azReveal { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
@keyframes azFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes azPulse { 0%,100% { opacity:0.55; } 50% { opacity:0.95; } }
.az-reveal { animation:azReveal 0.7s cubic-bezier(0.22,1,0.36,1) both; animation-timeline:view(); animation-range:entry 0% entry 32%; }

/* ═══ 2. układ i wygląd (dawne atrybuty style="") ═══ */
/* UWAGA: górny pasek (.lp1–.lp12, .az-nav-*) siedzi w OSOBNYM
   arkuszu css/landing-nav.css — dzieli go z blogiem. */

/* PANELE („okna") i BELKI przeniesione z landing-rd.html — te same wartości
   co --glass / --glass-bd / --row / --row-bd / --shadow w landing-rd.css:
     okno  : tło rgba(255,255,255,0.62), ramka rgba(255,255,255,0.65),
             cień 0 8px 32px rgba(15,23,42,0.06)
     belka : tło rgba(255,255,255,0.48), ramka rgba(255,255,255,0.55), bez cienia
   Pominięty `backdrop-filter: blur(28px)` z oryginału — nasze tło strony jest
   jednolite (#F4F6FB), więc rozmycie nic nie daje, a kosztuje kompozycję.
   Poza tym idiomem zostają celowo: wyróżniony plan w cenniku (biały + ramka
   indygo), ciemne sekcje (SEO, CTA pod FAQ, hero) i pola formularza. */

/* ——— HERO ——— */
body .lp13 { position:relative; overflow:hidden; background:#0B1120; margin-top:-67px; padding-top:67px }
body .lp14 { position:absolute; inset:0; background:radial-gradient(760px 520px at 14% -10%, rgba(79,70,229,0.4) 0%, rgba(79,70,229,0) 62%), radial-gradient(640px 460px at 92% 20%, rgba(13,148,136,0.3) 0%, rgba(13,148,136,0) 60%), radial-gradient(700px 500px at 55% 118%, rgba(37,99,235,0.25) 0%, rgba(37,99,235,0) 60%); animation:azPulse 9s ease-in-out infinite }
body .lp15 { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px); background-size:26px 26px; pointer-events:none; mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25)) }
body .lp16 { position:relative; max-width:1160px; margin:0 auto; padding:84px 24px 104px; display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center }
body .lp17 { display:flex; flex-direction:column; align-items:flex-start; gap:22px }
body .lp18 { display:flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; background:rgba(129,140,248,0.12); border:1px solid rgba(129,140,248,0.35); color:#A5B4FC; font-size:12.5px; font-weight:700; box-shadow:0 0 30px rgba(129,140,248,0.18) }
body .lp19 { font-size:15px }
body .lp20 { margin:0; font-size:48px; line-height:1.1; font-weight:800; letter-spacing:-0.025em; color:#fff; text-wrap:pretty }
body .lp21 { background:linear-gradient(120deg,#A5B4FC 0%,#5EEAD4 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
body .lp22 { margin:0; max-width:520px; font-size:16.5px; line-height:1.65; color:#B6C2D6; font-weight:500; text-wrap:pretty }
body .lp23 { display:flex; flex-wrap:wrap; gap:10px 22px }
body .lp24 { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:#E2E8F0 }
body .lp25 { font-size:19px; color:#5EEAD4 }
body .lp26 { display:flex; flex-direction:column; gap:10px }
body .lp27 { display:flex; flex-wrap:wrap; gap:10px }
body .lp28 { display:flex; align-items:center; gap:10px; height:52px; box-sizing:border-box; padding:0 26px; border-radius:10px; background:linear-gradient(135deg,#4F46E5,#2563EB); color:#fff; font-size:16px; font-weight:700; box-shadow:0 14px 40px rgba(79,70,229,0.55); transition:all 200ms }
body .lp29 { font-size:21px }
body .lp30 { display:flex; align-items:center; gap:9px; height:52px; box-sizing:border-box; padding:0 22px; border-radius:10px; border:1.5px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.06); color:#fff; font-size:15px; font-weight:700; transition:all 200ms }
body .lp31 { font-size:20px; color:#5EEAD4 }
body .lp32 { font-size:13px; color:#8B99B5; font-weight:600; padding-left:2px }
body .lp33 { position:relative; min-width:0; perspective:1400px }
body .lp34 { margin-left:40px; border-radius:12px; overflow:hidden; background:#0F172A; box-shadow:0 40px 110px rgba(37,99,235,0.35), 0 20px 50px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.14); transform:rotateY(-7deg) rotateX(2deg); transition:transform 600ms cubic-bezier(0.22,1,0.36,1) }
body .lp35 { display:flex; align-items:center; gap:6px; padding:10px 14px; background:#0F172A; border-bottom:1px solid rgba(255,255,255,0.08) }
body .lp36 { width:10px; height:10px; border-radius:50%; background:#FB7185 }
body .lp37 { width:10px; height:10px; border-radius:50%; background:#FBBF24 }
body .lp38 { width:10px; height:10px; border-radius:50%; background:#34D399 }
body .lp39 { margin-left:12px; padding:3px 12px; border-radius:5px; background:rgba(255,255,255,0.1); color:#8B99B5; font-size:10.5px; font-weight:600 }
body .lp40 { display:block; width:100%; height:auto }
body .lp41 { position:absolute; top:-18px; right:-6px; display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:11px; background:rgba(15,23,42,0.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(94,234,212,0.3); box-shadow:0 16px 40px rgba(0,0,0,0.4); animation:azFloat 5s ease-in-out infinite }
body .lp42 { font-size:13px; font-weight:700; color:#fff }
body .lp43 { position:absolute; bottom:-46px; left:0; width:170px; height:350px; border-radius:28px; background:#1E293B; padding:8px; box-sizing:border-box; border:1px solid rgba(255,255,255,0.14); box-shadow:0 28px 70px rgba(0,0,0,0.55); animation:azFloat 6.5s ease-in-out 1s infinite }
body .lp44 { position:relative; width:100%; height:100%; border-radius:21px; overflow:hidden; background:#EEF2F9 }
body .lp45 { display:block; width:100%; height:100%; object-fit:cover; object-position:top }
body .lp46 { position:absolute; top:7px; left:50%; transform:translateX(-50%); width:62px; height:16px; border-radius:999px; background:#0F172A }
body .lp47 { position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(129,140,248,0) 0%, rgba(129,140,248,0.6) 50%, rgba(94,234,212,0) 100%) }

/* ——— PODGLĄD APLIKACJI ——— */
body .lp48 { max-width:1160px; margin:0 auto; padding:88px 24px 0 }
body .lp49 { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:32px; text-align:center }
body .lp50 { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#4F46E5 }
body .lp51 { margin:0; font-size:32px; line-height:1.15; font-weight:800; letter-spacing:-0.02em; text-wrap:balance }
body .lp52 { margin:0; max-width:560px; font-size:15px; line-height:1.6; color:#64748B; font-weight:500 }
/* pasek zakładek — idiom „belki" (jak FAQ), nie ciemny tint jak w eksporcie */
body .lp53 { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; margin-bottom:24px; padding:6px; border-radius:12px; background:rgba(255,255,255,0.48); border:1px solid rgba(255,255,255,0.55); width:fit-content; margin-left:auto; margin-right:auto }
body .lp54 { display:flex; align-items:center; gap:7px; height:42px; box-sizing:border-box; padding:0 12px; border-radius:8px; cursor:pointer; font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; transition:all 200ms; border:1.5px solid #0F172A; background:#0F172A; color:#fff; box-shadow:0 8px 20px rgba(15,23,42,0.25) }
body .lp55 { width:20px; height:20px; background-image:url('/images/landing/ico-pulpit.webp?v=1'); background-size:contain; background-repeat:no-repeat; background-position:center }
body .lp56 { display:flex; align-items:center; gap:7px; height:42px; box-sizing:border-box; padding:0 12px; border-radius:8px; cursor:pointer; font-family:'Manrope',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; transition:all 200ms; border:1.5px solid transparent; background:transparent; color:#475569; box-shadow:none }
body .lp57 { width:20px; height:20px; background-image:url('/images/landing/ico-zlecenia.webp?v=1'); background-size:contain; background-repeat:no-repeat; background-position:center }
body .lp58 { width:20px; height:20px; background-image:url('/images/landing/ico-klienci.webp?v=1'); background-size:contain; background-repeat:no-repeat; background-position:center }
body .lp59 { width:20px; height:20px; background-image:url('/images/landing/ico-auta.webp?v=1'); background-size:contain; background-repeat:no-repeat; background-position:center }
body .lp60 { width:20px; height:20px; background-image:url('/images/landing/ico-raporty.webp?v=1'); background-size:contain; background-repeat:no-repeat; background-position:center }
body .lp61 { border-radius:14px; overflow:hidden; background:rgba(255,255,255,0.62); box-shadow:0 24px 60px rgba(15,23,42,0.14); border:1px solid rgba(255,255,255,0.65); transition:all 200ms cubic-bezier(0.4,0,0.2,1) }
body .lp61:hover { translate:0 -3px; box-shadow:0 30px 70px rgba(15,23,42,0.18) }
body .lp62 { display:flex; align-items:center; gap:6px; padding:10px 14px; background:#0F172A }
body .lp63 { height:600px; background:#EEF2F9 }
body .lp64 { display:block; height:100% }
body .lp65 { display:none; height:100% }
body .lp66 { margin:16px auto 0; max-width:60ch; text-align:center; font-size:15px; line-height:1.6; color:#64748B; font-weight:500; text-wrap:pretty }

/* ——— JAK TO DZIAŁA ——— */
body .lp67 { max-width:1160px; margin:0 auto; padding:88px 24px 44px }
body .lp68 { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:40px; text-align:center }
body .lp69 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
body .lp70 { position:relative; overflow:hidden; background:rgba(255,255,255,0.62); border:1px solid rgba(255,255,255,0.65); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:14px; box-shadow:0 8px 32px rgba(15,23,42,0.06); transition:all 250ms }
body .lp71 { position:absolute; top:-28px; right:-6px; font-size:130px; font-weight:800; letter-spacing:-0.05em; color:rgba(79,70,229,0.06); pointer-events:none; user-select:none }
body .lp72 { width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,#4F46E5,#2563EB); color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:800; box-shadow:0 8px 20px rgba(79,70,229,0.35) }
body .lp73 { margin:0; font-size:18px; font-weight:800 }
body .lp74 { margin:0; font-size:14px; line-height:1.65; color:#64748B; font-weight:500 }

/* ——— DLACZEGO WARTO ——— */
body .lp75 { max-width:1160px; margin:0 auto; padding:44px 24px }
body .lp76 { background:rgba(255,255,255,0.62); border:1px solid rgba(255,255,255,0.65); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:14px; box-shadow:0 8px 32px rgba(15,23,42,0.06); transition:all 250ms }
body .lp77 { width:46px; height:46px; border-radius:11px; background:#EEF2FF; display:flex; align-items:center; justify-content:center; transition:transform 250ms }
body .lp78 { font-size:24px; color:#4F46E5 }
body .lp79 { margin-top:auto; font-size:13.5px; font-weight:700; color:#4F46E5 }
body .lp80 { width:46px; height:46px; border-radius:11px; background:#E0F2FE; display:flex; align-items:center; justify-content:center; transition:transform 250ms }
body .lp81 { font-size:24px; color:#0284C7 }
body .lp82 { width:46px; height:46px; border-radius:11px; background:#D1FAE5; display:flex; align-items:center; justify-content:center; transition:transform 250ms }
body .lp83 { font-size:24px; color:#0B9E6C }

/* ——— SEKCJA OPISOWA (SEO) ——— */
body .lp84 { background:#0B1120; border-radius:16px; padding:52px 56px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.07) }
body .lp85 { position:absolute; inset:0; background:radial-gradient(520px 340px at 88% 0%, rgba(79,70,229,0.28) 0%, rgba(79,70,229,0) 60%), radial-gradient(460px 320px at 0% 100%, rgba(13,148,136,0.2) 0%, rgba(13,148,136,0) 60%); pointer-events:none }
body .lp86 { position:absolute; right:-20px; bottom:-60px; font-size:180px; font-weight:800; letter-spacing:-0.04em; color:rgba(255,255,255,0.03); pointer-events:none; user-select:none }
body .lp87 { position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:start }
body .lp88 { display:flex; flex-direction:column; gap:18px }
body .lp89 { margin:0; font-size:27px; line-height:1.15; font-weight:800; letter-spacing:-0.02em; color:#fff; text-wrap:balance }
body .lp90 { margin:0; max-width:62ch; font-size:15px; line-height:1.7; letter-spacing:0.005em; color:#B6C2D6; font-weight:500; text-wrap:pretty }
body .lp91 { color:#8FB4FF; font-weight:700; text-decoration:underline }
body .lp92 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
body .lp93 { display:flex; flex-direction:column; gap:10px; padding:18px; border-radius:11px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); transition:all 200ms }
body .lp94 { font-size:24px; color:#7FD6C8 }
body .lp95 { font-size:13px; font-weight:700; color:#E2E8F0 }

/* ——— CENNIK ——— */
body .lp96 { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:820px; margin:0 auto; align-items:stretch }
body .lp97 { background:rgba(255,255,255,0.62); border-radius:16px; padding:32px; display:flex; flex-direction:column; gap:18px; border:1px solid rgba(255,255,255,0.65); box-shadow:0 8px 32px rgba(15,23,42,0.06); transform:none; transition:all 250ms }
body .lp97:hover { translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1) }
body .lp98 { display:flex; align-items:center; justify-content:space-between }
body .lp99 { margin:0; font-size:19px; font-weight:800 }
body .lp100 { padding:4px 11px; border-radius:999px; background:#EEF2FF; color:#4F46E5; font-size:11.5px; font-weight:700 }
body .lp101 { display:flex; align-items:baseline; gap:8px }
body .lp102 { font-size:42px; font-weight:800; letter-spacing:-0.03em; font-variant-numeric:tabular-nums }
body .lp103 { font-size:14px; font-weight:600; color:#64748B }
body .lp104 { display:flex; flex-direction:column; gap:10px; padding:16px 0; border-top:1px solid rgba(15,23,42,0.08); border-bottom:1px solid rgba(15,23,42,0.08) }
body .lp105 { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:#334155 }
body .lp106 { font-size:17px; color:#0B9E6C }
body .lp107 { display:flex; align-items:center; justify-content:center; height:46px; border-radius:9px; border:1.5px solid rgba(79,70,229,0.4); color:#4F46E5; font-size:14px; font-weight:700; transition:all 200ms }
body .lp108 { background:#fff; border-radius:16px; padding:32px; display:flex; flex-direction:column; gap:18px; border:1.5px solid #4F46E5; box-shadow:0 28px 64px rgba(79,70,229,0.24); transition:all 250ms }
body .lp108:hover { translate:0 -3px; box-shadow:0 34px 72px rgba(79,70,229,0.3) }
/* przy równej wysokości kart przyciski trzymają się dołu, a nie treści */
body .lp107, body .lp110 { margin-top:auto }
body .lp109 { padding:4px 11px; border-radius:999px; background:linear-gradient(135deg,#4F46E5,#2563EB); color:#fff; font-size:11.5px; font-weight:700; box-shadow:0 6px 16px rgba(79,70,229,0.35) }
body .lp110 { display:flex; align-items:center; justify-content:center; height:46px; border-radius:9px; background:linear-gradient(135deg,#4F46E5,#2563EB); color:#fff; font-size:14px; font-weight:700; box-shadow:0 10px 24px rgba(79,70,229,0.35); transition:all 200ms }
body .lp111 { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:28px; color:#0B9E6C; font-size:14px; font-weight:700 }
body .lp112 { font-size:19px }

/* ——— FAQ ———
   Tło belek i kafelki ikon przeniesione z landing-rd.html (--row / --row-bd /
   --glass / --shadow z landing-rd.css). Wartości są półprzezroczyste i tam,
   i tu leżą na tym samym jasnym tle (#F4F6FB), więc dają ten sam kolor.
   UWAGA: kolory ramek dubluje JS na dole index.html (otwieranie pytania). */
body .lp113 { max-width:1160px; margin:0 auto; padding:44px 24px }
body .lp115 { display:flex; align-items:center; gap:14px; width:100%; box-sizing:border-box; padding:17px 20px; background:transparent; border:none; cursor:pointer; font-family:'Manrope',sans-serif; text-align:left; transition:background 200ms }
/* kafelek: sam glif jest tekstem tego spana, więc wystarczy zrobić z niego pudełko */
body .lp116 { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:#EEF2FF; font-size:18px; color:#4F46E5; flex-shrink:0 }
/* Pozycja FAQ o terminarzu ma ikone wstawiona jako inline SVG, a nie jako
   ligature Material Symbols (font jest zsubsetowany, nowa nazwa renderowalaby
   sie pustym prostokatem). 18px = rozmiar glifu z font-size wyzej, zeby
   ikona byla tej samej wielkosci co pozostale. */
body .lp116 svg { width:18px; height:18px }
body .lp117 { flex:1; font-size:15px; font-weight:700; color:#0F172A }
body .lp118 { font-size:22px; color:#94A3B8; flex-shrink:0; transition:transform 250ms; transform:rotate(180deg) }
/* wcięcie odpowiedzi = padding belki 20 + kafelek 32 + odstęp 14 */
body .lp119 { display:block; padding:0 20px 18px 66px; max-width:calc(72ch + 86px); font-size:15px; line-height:1.65; color:#64748B; font-weight:500; text-wrap:pretty; animation:azReveal 0.35s cubic-bezier(0.22,1,0.36,1) both }
body .lp120 { background:rgba(255,255,255,0.48); border:1px solid rgba(255,255,255,0.55); border-radius:12px; overflow:hidden; transition:all 200ms cubic-bezier(0.4,0,0.2,1) }
/* rozjaśnienie dotyczy CAŁEJ belki (jak .rdl-faq-item:hover), nie samego przycisku —
   inaczej u rozwiniętego pytania jaśniał tylko pasek z pytaniem, a odpowiedź nie */
body .lp120:hover { background:rgba(255,255,255,0.72) }
/* rozwinięte pytanie — stan trzyma klasa, nie styl inline z JS-a.
   MUSI stać PO :hover (ta sama specyficzność) — w landing-rd rozwinięta belka
   też zostaje przy swoim tle i nie reaguje na najechanie */
body .lp120.az-faq-open { background:rgba(255,255,255,0.62); border-color:rgba(255,255,255,0.65); box-shadow:0 8px 32px rgba(15,23,42,0.06) }
body .lp121 { font-size:22px; color:#94A3B8; flex-shrink:0; transition:transform 250ms; transform:rotate(0deg) }
body .lp122 { display:none; padding:0 20px 18px 66px; max-width:calc(72ch + 86px); font-size:15px; line-height:1.65; color:#64748B; font-weight:500; text-wrap:pretty; animation:azReveal 0.35s cubic-bezier(0.22,1,0.36,1) both }
body .lp123 { margin-top:28px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px; background:#0B1120; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:24px 28px }
body .lp124 { position:absolute; inset:0; background:radial-gradient(360px 200px at 100% 0%, rgba(79,70,229,0.3) 0%, rgba(79,70,229,0) 60%); pointer-events:none }
body .lp125 { position:relative; display:flex; flex-direction:column; gap:3px }
body .lp126 { font-size:16px; font-weight:800; color:#fff }
body .lp127 { font-size:13px; font-weight:500; color:#8B99B5 }
body .lp128 { position:relative; display:flex; align-items:center; gap:8px; height:44px; box-sizing:border-box; padding:0 20px; border-radius:9px; background:#fff; color:#0F172A; font-size:13.5px; font-weight:700; white-space:nowrap; transition:all 200ms }
body .lp129 { font-size:18px; color:#4F46E5 }

/* ——— KONTAKT ——— */
body .lp130 { max-width:820px; margin:0 auto; background:rgba(255,255,255,0.62); border:1px solid rgba(255,255,255,0.65); border-radius:16px; padding:40px 44px; box-shadow:0 8px 32px rgba(15,23,42,0.06); display:flex; flex-direction:column; gap:20px }
body .lp131 { display:flex; flex-direction:column; gap:8px; text-align:center }
body .lp132 { margin:0; font-size:27px; line-height:1.15; font-weight:800; letter-spacing:-0.02em; text-wrap:balance }
body .lp133 { display:flex; flex-direction:column; gap:6px }
body .lp134 { font-size:13px; font-weight:700; color:#334155 }
body .lp135 { color:#DC2626 }
body .lp136 { height:46px; box-sizing:border-box; padding:0 15px; border-radius:9px; border:1.5px solid rgba(15,23,42,0.12); background:#F8FAFC; font-family:'Manrope',sans-serif; font-size:14px; color:#0F172A; outline:none; transition:all 200ms }
body .lp137 { box-sizing:border-box; padding:13px 15px; border-radius:9px; border:1.5px solid rgba(15,23,42,0.12); background:#F8FAFC; font-family:'Manrope',sans-serif; font-size:14px; color:#0F172A; outline:none; resize:vertical; transition:all 200ms }
body .lp138 { display:flex; align-items:center; justify-content:center; gap:9px; height:50px; border-radius:10px; border:none; background:linear-gradient(135deg,#4F46E5,#2563EB); color:#fff; font-family:'Manrope',sans-serif; font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 12px 28px rgba(79,70,229,0.35); transition:all 200ms }
body .lp139 { margin:0; font-size:13px; line-height:1.6; color:#8B99B5; font-weight:500; text-align:center }
body .lp140 { color:#4F46E5; font-weight:700 }
/* honeypot formularza — pole niewidoczne dla ludzi, boty je wypełniają */
body .lp-hp { display:none }
/* komunikat po wysyłce */
body .lp-status {
	margin:0;
	padding:12px 14px;
	border-radius:9px;
	font-size:13.5px;
	font-weight:600;
	line-height:1.5;
	text-align:center;
	background:rgba(11,158,108,0.10);
	border:1px solid rgba(11,158,108,0.25);
	color:#0B7A54;
}
body .lp-status-err {
	background:#FEF2F2;
	border-color:rgba(185,28,28,0.25);
	color:#B91C1C;
}

/* ——— BLOG ——— */
body .lp141 { max-width:1160px; margin:0 auto; padding:44px 24px 72px }
body .lp142 { display:flex; flex-direction:column; background:rgba(255,255,255,0.62); border:1px solid rgba(255,255,255,0.65); border-radius:14px; overflow:hidden; box-shadow:0 8px 32px rgba(15,23,42,0.06); color:inherit; transition:all 250ms }
body .lp143 { height:150px; background:#EEF2F9 }
body .lp144 { display:block; width:100%; height:100%; object-fit:cover; object-position:center }
body .lp145 { padding:20px 22px; display:flex; flex-direction:column; gap:8px }
body .lp146 { margin:0; font-size:15.5px; font-weight:800; line-height:1.4; text-wrap:pretty }
body .lp147 { margin:0; font-size:14px; line-height:1.6; color:#64748B; font-weight:500 }
body .lp148 { display:flex; justify-content:center; margin-top:28px }
body .lp149 { font-size:14.5px; font-weight:700; color:#4F46E5 }

/* ——— STOPKA ——— */
body .lp150 { background:#0B1120; position:relative }
body .lp151 { position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, rgba(129,140,248,0) 0%, rgba(129,140,248,0.5) 50%, rgba(94,234,212,0) 100%) }
body .lp152 { max-width:1160px; margin:0 auto; padding:26px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px }
body .lp153 { font-size:13px; font-weight:600; color:#8B99B5 }
body .lp154 { display:flex; gap:22px }
body .lp155 { font-size:13px; font-weight:600; color:#CBD5E1 }
body .lp156 { font-size:22px; color:#5EEAD4; flex-shrink:0 }

/* ═══ 3. hovery, baner cookies, RWD ═══ */
/* hovery i fokusy przeniesione z projektu (atrybuty style-hover / style-focus) */
.azh8:hover{transform:translateY(-2px); box-shadow:0 18px 48px rgba(79,70,229,0.65); color:#fff}
.azh9:hover{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.4); color:#fff}
.azh10:hover{transform:rotateY(0deg) rotateX(0deg)}
.azh11:hover{translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1); background:rgba(255,255,255,0.78)}
.azh12:hover{translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1); background:rgba(255,255,255,0.78)}
.azh13:hover{translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1); background:rgba(255,255,255,0.78)}
.azh14:hover{translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1); background:rgba(255,255,255,0.78)}
.azh15:hover{transform:rotate(-6deg) scale(1.08)}
.azh16:hover{translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1); background:rgba(255,255,255,0.78)}
.azh17:hover{transform:rotate(-6deg) scale(1.08)}
.azh18:hover{translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1); background:rgba(255,255,255,0.78)}
.azh19:hover{transform:rotate(-6deg) scale(1.08)}
.azh20:hover{color:#C7D8FF}
.azh21:hover{background:rgba(255,255,255,0.09); border-color:rgba(94,234,212,0.35)}
.azh22:hover{background:rgba(255,255,255,0.09); border-color:rgba(94,234,212,0.35)}
.azh23:hover{background:rgba(255,255,255,0.09); border-color:rgba(94,234,212,0.35)}
.azh24:hover{background:rgba(255,255,255,0.09); border-color:rgba(94,234,212,0.35)}
.azh25:hover{background:rgba(79,70,229,0.06); color:#4F46E5}
.azh26:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(79,70,229,0.45); color:#fff}
.azh39:hover{transform:translateY(-1px); color:#0F172A}
.azh40:focus{border-color:#4F46E5; background:#fff; box-shadow:0 0 0 3px rgba(79,70,229,0.15)}
.azh41:focus{border-color:#4F46E5; background:#fff; box-shadow:0 0 0 3px rgba(79,70,229,0.15)}
.azh42:hover{transform:translateY(-1px); box-shadow:0 16px 34px rgba(79,70,229,0.45)}
.azh43:hover{translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1); background:rgba(255,255,255,0.78); color:inherit}
.azh44:hover{translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1); background:rgba(255,255,255,0.78); color:inherit}
.azh45:hover{translate:0 -3px; box-shadow:0 16px 40px rgba(15,23,42,0.1); background:rgba(255,255,255,0.78); color:inherit}
.azh46:hover{color:#fff}
.azh47:hover{color:#fff}

/* ——— baner cookies (landing jest samowystarczalny, bez app-ui.css) ——— */
#az-consent {
	display: none;
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	z-index: 90;
	align-items: center;
	gap: 14px;
	max-width: 760px;
	margin: 0 auto;
	padding: 14px 18px;
	border-radius: 12px;
	background: rgba(11,17,32,0.96);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.az-consent-container { display: flex; align-items: center; gap: 16px; flex: 1; flex-wrap: wrap; }
.az-consent-info { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.55; color: #CBD5E1; font-weight: 500; }
.az-consent-link { color: #A5B4FC; font-weight: 700; }
.az-consent-buttons { display: flex; gap: 8px; flex-shrink: 0; }
#az-consent .lp2-btn {
	height: 38px; padding: 0 16px; border-radius: 8px; cursor: pointer;
	font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700;
	border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #E2E8F0;
	transition: all 200ms;
}
#az-consent .lp2-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
#az-consent .top-create-account-button {
	border: none; background: linear-gradient(135deg,#4F46E5,#2563EB); color: #fff;
	box-shadow: 0 8px 20px rgba(79,70,229,0.45);
}
@media (max-width: 640px) {
	#az-consent { flex-direction: column; align-items: stretch; text-align: left; }
	#az-consent .az-consent-buttons { justify-content: stretch; }
	#az-consent .lp2-btn { flex: 1; }
}

/* ——— responsywność landingu ——— */
@media (max-width: 980px) {
	.az-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding-bottom: 72px !important; }
	.az-hero-visual { display: none !important; }
	.az-grid-3 { grid-template-columns: 1fr !important; }
	.az-grid-2 { grid-template-columns: 1fr !important; }
	.az-tabpanel img { object-position: top left; }
}
@media (max-width: 640px) {
	h1 { font-size: 32px !important; }
	h2 { font-size: 24px !important; }
	.az-preview-frame { height: 300px !important; }
	/* sekcje: mniej powietrza po bokach */
	section, .az-hero-grid { padding-left: 16px !important; padding-right: 16px !important; }
	/* sekcja opisowa i formularz kontaktu — ciaśniej na telefonie */
	body .lp84, body .lp130 { padding: 25px 25px; }
}

/* ——— ograniczony ruch ——— */
/* jak w landing-rd: bez unoszenia kart i bez animacji wejścia */
@media (prefers-reduced-motion: reduce) {
	body * { transition: none !important; }
	body .lp61:hover, body .lp97:hover, body .lp108:hover,
	.azh11:hover, .azh12:hover, .azh13:hover,
	.azh14:hover, .azh16:hover, .azh18:hover,
	.azh43:hover, .azh44:hover, .azh45:hover { translate: none; }
	.az-reveal { animation: none; opacity: 1; }
}

/* ============ NOWOŚĆ: TERMINARZ (31.08.2026) ============ */
/* ikona szóstej zakładki podglądu */
body .lp157 { width:20px; height:20px; background-image:url('/images/landing/ico-terminarz.webp?v=1'); background-size:contain; background-repeat:no-repeat; background-position:center }
body .lp180 { width:20px; height:20px; background-image:url('/images/landing/ico-wizytowka.webp?v=1'); background-size:contain; background-repeat:no-repeat; background-position:center }
body .lp181 { width:20px; height:20px; background-image:url('/images/landing/ico-opony.webp?v=1'); background-size:contain; background-repeat:no-repeat; background-position:center }
body .lp182 { width:20px; height:20px; background-image:url('/images/landing/ico-pracownicy.webp?v=1'); background-size:contain; background-repeat:no-repeat; background-position:center }

/* sekcja wyróżniona: jaśniejsza karta na pełną szerokość treści */
body .lp158 { max-width:1160px; margin:0 auto; padding:44px 24px }
body .lp158 + .lp158 { padding-top:0 }
body .lp159 { display:grid; grid-template-columns:0.85fr 1fr; gap:40px; align-items:start; background:linear-gradient(135deg,rgba(238,242,255,0.9),rgba(224,231,255,0.55)); border:1px solid rgba(79,70,229,0.16); border-radius:18px; padding:36px 38px; box-shadow:0 10px 36px rgba(79,70,229,0.09) }
body .lp160 { display:flex; flex-direction:column; gap:14px }
body .lp161 { align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#4F46E5,#2563EB); border-radius:999px; padding:5px 13px; box-shadow:0 6px 16px rgba(79,70,229,0.3) }
body .lp162 { margin:0; font-size:28px; font-weight:800; letter-spacing:-0.02em; line-height:1.15; text-wrap:balance }
body .lp163 { margin:0; font-size:15px; line-height:1.65; color:#475569; font-weight:500 }
body .lp164 { margin-top:4px; font-size:13.5px; font-weight:700; color:#4F46E5 }

body .lp165 { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px }
body .lp166 { display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.8); border-radius:12px; padding:16px 18px; box-shadow:0 4px 16px rgba(15,23,42,0.04) }
body .lp167 { flex:none; width:38px; height:38px; border-radius:10px; background:#EEF2FF; color:#4F46E5; display:flex; align-items:center; justify-content:center; font-size:21px }
body .lp168 { margin:0 0 3px; font-size:15px; font-weight:800 }
body .lp169 { margin:0; font-size:14px; line-height:1.6; color:#64748B; font-weight:500 }
body .lp170 { flex:none; width:38px; height:38px; border-radius:10px; background:#FEF3C7; color:#B45309; display:flex; align-items:center; justify-content:center; font-size:21px }
body .lp171 { flex:none; width:38px; height:38px; border-radius:10px; background:#CCFBF1; color:#0F766E; display:flex; align-items:center; justify-content:center; font-size:21px }

@media (max-width: 900px) {
  body .lp159 { grid-template-columns:1fr; gap:26px; padding:28px 24px }
  body .lp162 { font-size:24px }
}

body .lp167 svg, body .lp170 svg, body .lp171 svg { width:20px; height:20px }
body .lp172 { flex:none; width:22px; height:22px; color:#4F46E5; display:flex; align-items:center; justify-content:center }
body .lp172 svg { width:22px; height:22px }

/* ============ RUCH (08.09.2026): jedna sekwencja wejścia w hero, ciągłość zakładek, pętle tylko w kadrze ============ */
@keyframes azHeroUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
/* koniec = pochylenie spoczynkowe .lp34 (rotateY(-7deg) rotateX(2deg)), inaczej po animacji był przeskok z „prosto" do pochylenia */
@keyframes azHeroScreen { from { opacity:0; transform:translateY(34px) rotateY(-7deg) rotateX(9deg); } to { opacity:1; transform:rotateY(-7deg) rotateX(2deg); } }
@keyframes azHeroPop { from { opacity:0; transform:translateY(8px) scale(0.94); } to { opacity:1; transform:none; } }
@keyframes azTabInR { from { transform:translateX(100%); } to { transform:none; } }
@keyframes azTabInL { from { transform:translateX(-100%); } to { transform:none; } }
@keyframes azTabOutL { from { transform:none; } to { transform:translateX(-100%); } }
@keyframes azTabOutR { from { transform:none; } to { transform:translateX(100%); } }
@keyframes azOpisIn { from { opacity:0; } to { opacity:1; } }
/* tekst hero: schodkowo, 600 ms, wybieg wykładniczy; backwards = niewidoczne tylko przed swoim startem, stan końcowy naturalny */
body .lp18, body .lp20, body .lp22, body .lp23, body .lp26 { animation: azHeroUp 600ms cubic-bezier(0.16,1,0.3,1) backwards; }
body .lp20 { animation-delay: 80ms; }
body .lp22 { animation-delay: 160ms; }
body .lp23 { animation-delay: 240ms; }
body .lp26 { animation-delay: 320ms; }
/* ekran pulpitu ląduje z lekkim pochyleniem (perspektywa siedzi na .lp33), telefon dojeżdża, plakietka wyskakuje ostatnia */
body .lp34 { transform-origin: 50% 100%; animation: azHeroScreen 800ms cubic-bezier(0.16,1,0.3,1) 150ms backwards; }
body .lp43 { animation: azHeroUp 700ms cubic-bezier(0.16,1,0.3,1) 450ms backwards, azFloat 6.5s ease-in-out 1.4s infinite; }
body .lp41 { animation: azHeroPop 500ms cubic-bezier(0.16,1,0.3,1) 900ms backwards, azFloat 5s ease-in-out 1.6s infinite; }
/* pętle (poświata, unoszenie) stoją, gdy hero jest poza kadrem */
body.az-hero-off .lp14, body.az-hero-off .lp41, body.az-hero-off .lp43 { animation-play-state: paused; }
/* zakładki podglądu: pigułka przechodzi płynnie, panel i opis wchodzą krótkim ruchem tylko po kliknięciu */
[data-tab-btn] { transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
/* taśma: stary zrzut wyjeżdża, nowy wjeżdża z tej samej strony, ten sam czas i krzywa */
body .lp63 { position:relative; overflow:hidden; }
.az-tabpanel.az-tab-out { position:absolute; inset:0; pointer-events:none; }
.az-tabpanel.az-tab-in-r { animation: azTabInR 420ms cubic-bezier(0.16,1,0.3,1); }
.az-tabpanel.az-tab-in-l { animation: azTabInL 420ms cubic-bezier(0.16,1,0.3,1); }
.az-tabpanel.az-tab-out-l { animation: azTabOutL 420ms cubic-bezier(0.16,1,0.3,1); }
.az-tabpanel.az-tab-out-r { animation: azTabOutR 420ms cubic-bezier(0.16,1,0.3,1); }
#az-tab-opis.az-tab-in { display:inline-block; animation: azOpisIn 240ms ease-out; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	body .lp18, body .lp20, body .lp22, body .lp23, body .lp26, body .lp34, body .lp43, body .lp41, body .lp14 { animation: none; }
	.az-tabpanel.az-tab-in-r, .az-tabpanel.az-tab-in-l, .az-tabpanel.az-tab-out-l, .az-tabpanel.az-tab-out-r, #az-tab-opis.az-tab-in { animation: none; }
}

/* zakładki podglądu: ciemna pigułka sunie do klikniętej zakładki, jasna za kursorem (ten sam mechanizm co w menu panelu:
   stała baza 80 px, szerokość przez scaleX, bez animowania układu) */
body .lp53 { position:relative; }
body .lp53 > button { position:relative; z-index:1; background:transparent; border-color:transparent; box-shadow:none; color:#475569; transition:color 200ms ease; }
body .lp53 > button.is-active { color:#fff; }
.az-tab-pill { position:absolute; top:0; left:0; width:80px; height:42px; transform-origin:0 50%; border-radius:8px; pointer-events:none; }
.az-tab-pill-active { z-index:0; background:#0F172A; box-shadow:0 8px 20px rgba(15,23,42,0.25); transition:transform 320ms cubic-bezier(0.16,1,0.3,1); }
.az-tab-pill-hover { z-index:0; background:rgba(15,23,42,0.07); opacity:0; transition:transform 240ms cubic-bezier(0.16,1,0.3,1), opacity 140ms ease; }
.az-tab-pill-hover.is-on { opacity:1; }
@media (prefers-reduced-motion: reduce) { .az-tab-pill { transition: opacity 140ms ease; } }

/* typeset 08.09: skala ról = display 48 / nagłówek sekcji 27-32 / lead 15-16.5 / tekst 15 / karta 14 / meta 13; miary 60-72ch */

/* ============ BOLDER (08.09.2026): „Dlaczego warto" z dowodem ============
   Każda karta pokazuje fragment prawdziwego ekranu w ramce okna z hero (.lp35-.lp38),
   ikona zostaje jako znak sekcji, tekst i link jak dotąd. */
body .lp76.az-dowod { padding:20px 0 0; gap:0; }
body .az-dowod > .lp77, body .az-dowod > .lp80, body .az-dowod > .lp82 { margin-left:24px; }
.az-dowod-okno { margin:18px 24px 0; border-radius:10px; overflow:hidden; background:#0F172A; border:1px solid rgba(15,23,42,0.12); box-shadow:0 18px 44px rgba(37,99,235,0.16), 0 8px 20px rgba(15,23,42,0.12); }
.az-dowod-okno img { display:block; width:100%; height:auto; aspect-ratio:1040 / 650; object-fit:cover; }
.az-dowod-tekst { display:flex; flex-direction:column; gap:8px; padding:20px 24px 26px; flex:1; }
.az-dowod-tekst .lp79 { margin-top:auto; padding-top:6px; }