/* Strona produktu edurodzic.pl (E8 feat-e8-strona) - bez zasobow zewnetrznych, bez skryptow i ciasteczek. Barwy jak w aplikacjach EduRodzic. */
:root { --tlo:#F4F6FB; --karta:#ffffff; --tekst:#121A2F; --opis:#4B5568; --akcent:#4F46E5; --akcent2:#7C3AED; --ramka:#DDE2EE; --ciemny:#0B1020; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:"Segoe UI", system-ui, -apple-system, Roboto, sans-serif; background:var(--tlo); color:var(--tekst); line-height:1.6; }
a { color:var(--akcent); }
a:focus-visible, .przycisk:focus-visible { outline:3px solid #22D3EE; outline-offset:2px; }
.pasek { background:var(--ciemny); color:#fff; }
.pasek .wnetrze { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.znak { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:600; font-size:19px; }
.znak img { width:36px; height:36px; border-radius:9px; }
.pasek nav a { color:#C7D2FE; text-decoration:none; margin-left:16px; font-size:15px; white-space:nowrap; display:inline-block; }
.pasek nav a:hover { color:#fff; text-decoration:underline; }
.wnetrze { width:min(1080px, 100%); margin:0 auto; padding:14px 16px; }
.bohater { background:var(--ciemny); color:#fff; padding:28px 0 44px; }
.bohater h1 { font-size:clamp(28px, 5vw, 44px); line-height:1.15; margin:8px 0 12px; }
.bohater p { color:#C7D2FE; font-size:clamp(16px, 2.2vw, 19px); max-width:720px; margin:0 0 22px; }
.przyciski { display:flex; gap:12px; flex-wrap:wrap; }
.przycisk { display:inline-block; padding:12px 20px; border-radius:10px; text-decoration:none; font-weight:600; min-height:48px; }
.przycisk.glowny { background:linear-gradient(90deg, #4F7CFF, #8B5CF6); color:#fff; }
.przycisk.drugi { border:1px solid #6366F1; color:#E0E7FF; }
section { padding:36px 0 8px; }
h2 { font-size:clamp(22px, 3vw, 28px); margin:0 0 14px; }
.siatka { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.karta { background:var(--karta); border:1px solid var(--ramka); border-radius:14px; padding:20px 22px; }
.karta h3 { margin:0 0 8px; font-size:19px; }
.karta ul { margin:0; padding-left:20px; color:var(--opis); }
.karta li { margin:4px 0; }
.zrzuty { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; align-items:start; }
.zrzuty figure { margin:0; background:var(--karta); border:1px solid var(--ramka); border-radius:14px; padding:12px; text-align:center; }
.zrzuty img { width:100%; max-width:260px; height:auto; border-radius:10px; }
.zrzuty figcaption { color:var(--opis); font-size:14px; margin-top:8px; }
.dokument { background:var(--karta); border:1px solid var(--ramka); border-radius:14px; padding:24px 28px; margin:24px 0; overflow-wrap:anywhere; }
.dokument h1 { font-size:clamp(24px, 4vw, 32px); margin-top:0; }
.dokument h2 { font-size:20px; margin:26px 0 8px; border-bottom:2px solid var(--ramka); padding-bottom:4px; }
.dokument table { border-collapse:collapse; width:100%; display:block; overflow-x:auto; }
.dokument th, .dokument td { border:1px solid var(--ramka); padding:7px 10px; text-align:left; vertical-align:top; }
.dokument th { background:#EEF1F8; }
.dokument blockquote { margin:0 0 16px; padding:10px 14px; background:#FFF7E6; border-left:4px solid #B45309; }
footer { margin-top:40px; background:var(--ciemny); color:#C7D2FE; font-size:14px; }
footer .wnetrze { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
footer a { color:#E0E7FF; }
footer nav a { margin-right:14px; }
.dolny { border-top:1px solid #26314F; }
@media (max-width:640px) {
  .pasek nav a { margin:0 14px 0 0; }
  footer .dolny .wnetrze { flex-direction:column; }
  .dokument { padding:18px 16px; }
}