/* ============================================================ NorthGuard — site.css Źródło: nordguard-makieta.html (zaakceptowana makieta v3) UWAGA: Poppins ładowany z Google Fonts w (partials/head.html), nie jako base64 jak w makiecie — czcionka identyczna, tylko inny transport. ============================================================ */ :root[data-theme="light"], :root{ --bg:#FFFFFF; --bg2:#F6F8FA; --panel:#FFFFFF; --line:#E5EAF0; --line2:#D3DCE6; --txt:#10161D; --muted:#546375; --dim:#8A97A6; --acc:#A8761F; --acc-soft:rgba(168,118,31,.08); --acc-line:rgba(168,118,31,.38); --btn-bg:#141C26; --btn-txt:#FFFFFF; --risk:#C24444; --shadow:0 6px 24px rgba(16,24,40,.06); --radius:14px; } :root[data-theme="dark"]{ --bg:#0E131A; --bg2:#121924; --panel:#151D28; --line:#233042; --line2:#2E3D52; --txt:#EAF0F6; --muted:#97A5B5; --dim:#5E6C7E; --acc:#DFA742; --acc-soft:rgba(223,167,66,.12); --acc-line:rgba(223,167,66,.4); --btn-bg:#EAF0F6; --btn-txt:#10161D; --risk:#D64F4F; --shadow:0 6px 24px rgba(0,0,0,.35); } @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg:#0E131A; --bg2:#121924; --panel:#151D28; --line:#233042; --line2:#2E3D52; --txt:#EAF0F6; --muted:#97A5B5; --dim:#5E6C7E; --acc:#DFA742; --acc-soft:rgba(223,167,66,.12); --acc-line:rgba(223,167,66,.4); --btn-bg:#EAF0F6; --btn-txt:#10161D; --risk:#D64F4F; --shadow:0 6px 24px rgba(0,0,0,.35); } } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--txt); font:15.5px/1.7 Poppins,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} a{color:inherit} img{max-width:100%} .ribbon{background:var(--acc);color:#fff;font-size:12.5px;font-weight:500; text-align:center;padding:6px 16px;letter-spacing:.03em} /* topbar */ .top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .top .wrap{display:flex;align-items:center;gap:30px;height:68px} .logo{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.02em; font-size:17.5px;text-decoration:none} .logo b{color:var(--acc);font-weight:600} .logo-img{height:36px;width:auto;display:block} .foot-brand .logo-img{height:44px} nav{display:flex;gap:26px;margin-left:auto;font-size:14px} nav a{text-decoration:none;color:var(--muted);font-weight:500} nav a:hover,nav a:focus-visible{color:var(--txt)} .theme-btn{border:1px solid var(--line2);background:none;color:var(--muted); font:12px Poppins,sans-serif;font-weight:500;padding:8px 13px;border-radius:999px;cursor:pointer} .theme-btn:hover{color:var(--txt);border-color:var(--acc-line)} /* hamburger menu mobilny (dodane — makieta nie miała, wymagane dla podstron) */ .menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px; width:38px;height:38px;border:1px solid var(--line2);border-radius:10px;background:var(--panel); cursor:pointer;padding:0 8px;order:2} .menu-btn span{display:block;height:2px;background:var(--txt);border-radius:2px} .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} nav .nav-cta{display:none} @media(max-width:900px){ nav{display:none} .menu-btn{display:flex} /* top:68px + height:calc(100vh - 68px) zamiast inset/bottom:0 — .top ma backdrop-filter, przez co staje się containing blockiem dla potomków fixed i "bottom:0" liczyłby się względem 68px-owego paska nagłówka, a nie realnego viewportu. */ nav.nav-open{display:flex;position:fixed;top:68px;left:0;right:0;height:calc(100vh - 68px);z-index:49; background:var(--bg);flex-direction:column;gap:0;padding:8px 28px 28px;overflow-y:auto} nav.nav-open a{padding:16px 0;border-bottom:1px solid var(--line);font-size:16px} .top .btn-wa{display:none} nav.nav-open .nav-cta{display:flex;margin-top:18px} } .btn{display:inline-block;padding:13px 24px;border-radius:999px;font-weight:600; font-size:14px;text-decoration:none;letter-spacing:.01em;border:1px solid transparent; cursor:pointer;font-family:Poppins,sans-serif;transition:transform .15s,box-shadow .15s} .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--btn-bg);color:var(--btn-txt)} .btn-ghost{border-color:var(--line2);color:var(--txt);background:var(--panel)} .btn-ghost:hover{border-color:var(--acc-line);color:var(--acc)} .btn-wa{background:#1FA855;color:#fff} .top .btn{padding:10px 18px;font-size:13px} .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none} /* hero */ .hero{border-bottom:1px solid var(--line);background: linear-gradient(180deg,var(--bg2),var(--bg) 70%)} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px; align-items:center;padding-top:84px;padding-bottom:64px} .kicker{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--acc);margin:0 0 20px} .kicker a{color:var(--acc);text-decoration:none} .kicker a:hover{text-decoration:underline} h1{font-size:clamp(34px,4.4vw,54px);line-height:1.14;margin:0 0 20px;font-weight:600; letter-spacing:-.02em;text-wrap:balance} .lead{font-size:17px;color:var(--muted);max-width:52ch;margin:0 0 30px} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap} .hero-stats{display:flex;gap:44px;margin-top:52px;flex-wrap:wrap} .hstat b{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em; font-variant-numeric:tabular-nums} .hstat span{font-size:13px;color:var(--muted)} @media(max-width:960px){.hero .wrap{grid-template-columns:1fr;gap:40px}} /* karta szybkiej wyceny */ .quote-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:32px} .quote-card h2{font-size:20px;margin:0 0 4px;font-weight:600;letter-spacing:-.01em} .quote-card .sub{font-size:13.5px;color:var(--muted);margin:0 0 22px} .form{display:flex;flex-direction:column;gap:14px} .field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:500} .field input,.field select,.field textarea{background:var(--bg);border:1px solid var(--line2); color:var(--txt);padding:12px 14px;border-radius:10px; font:14.5px Poppins,"Segoe UI",sans-serif} .field :is(input,select,textarea):focus{border-color:var(--acc);outline:none} .field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--risk)} .field-error{font-size:12px;color:var(--risk);display:none} .field.is-invalid .field-error{display:block} .or{display:flex;align-items:center;gap:14px;color:var(--dim);font-size:12px;margin:4px 0} .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)} .quote-card .fine{font-size:11.5px;color:var(--dim);margin:10px 0 0;line-height:1.6} /* honeypot — pole wyłącznie dla botów, ukryte dla ludzi */ .hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;overflow:hidden} /* stan formularza po wysłaniu */ .form-done, .form-error{border:1px solid var(--line);border-radius:var(--radius); padding:26px;background:var(--panel);display:flex;flex-direction:column;gap:12px;align-items:flex-start} .form-done h3, .form-error h3{margin:0;font-size:17px;font-weight:600} .form-done p, .form-error p{margin:0;color:var(--muted);font-size:14px} .form-error h3{color:var(--risk)} /* sekcje */ section{padding:88px 0;border-bottom:1px solid var(--line)} .sec-head{max-width:720px;margin-bottom:48px} .label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--acc);margin:0 0 12px} h2.sec{font-size:clamp(26px,3vw,36px);margin:0 0 14px;font-weight:600;letter-spacing:-.02em; text-wrap:balance} .sec-head p{margin:0;color:var(--muted);font-size:16px} /* zaufali */ .trust{padding:30px 0;border-bottom:1px solid var(--line)} .trust .wrap{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:space-between} .trust span{font-size:12px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;font-weight:600} .trust .logos{display:flex;gap:40px;flex-wrap:wrap;align-items:center} .trust .logos i{font-style:normal;font-weight:600;color:var(--dim);letter-spacing:.04em;font-size:14px} /* usługi */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} @media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.svc-grid{grid-template-columns:1fr}} .svc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:26px;display:flex;flex-direction:column;gap:10px;text-decoration:none; transition:box-shadow .18s,transform .18s,border-color .18s} .svc:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--line2)} .svc .ico{width:40px;height:40px;border-radius:10px;background:var(--acc-soft); display:flex;align-items:center;justify-content:center;color:var(--acc);margin-bottom:6px} .svc h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em} .svc p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6} .svc .go{margin-top:auto;font-size:13px;color:var(--acc);font-weight:600} .svc-img{margin:-26px -26px 8px;width:calc(100% + 52px);height:150px;object-fit:cover; border-radius:var(--radius) var(--radius) 0 0;display:block} /* HERO ze zdjęciem w tle + jasny tekst */ .hero{position:relative;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0; background:url('/assets/img/hero-bg.jpg') center right/cover no-repeat} .hero-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(9,13,19,.92) 0%,rgba(9,13,19,.74) 42%,rgba(9,13,19,.34) 100%)} .hero .wrap{position:relative;z-index:1} .hero h1{color:#fff} .hero .lead{color:rgba(236,242,248,.82)} .hero .hstat b{color:#fff} .hero .hstat span{color:rgba(236,242,248,.72)} .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)} .hero .btn-ghost:hover{color:var(--acc);border-color:var(--acc);background:rgba(255,255,255,.12)} /* KARUZELA specjalizacji */ .carousel-sec{background:var(--bg2)} .carousel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px} .carousel-head .sec-head{margin-bottom:0} .carousel-nav{display:flex;gap:10px;flex-shrink:0} .cbtn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line2); background:var(--panel);color:var(--txt);font-size:20px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:.15s} .cbtn:hover{border-color:var(--acc);color:var(--acc)} .carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:10px;scroll-behavior:smooth} .carousel::-webkit-scrollbar{height:8px} .carousel::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px} .cslide{flex:0 0 300px;scroll-snap-align:start;position:relative;border-radius:var(--radius); overflow:hidden;border:1px solid var(--line);text-decoration:none;box-shadow:var(--shadow);aspect-ratio:4/3} .cslide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} .cslide:hover img{transform:scale(1.06)} .cslide-t{position:absolute;left:0;right:0;bottom:0;padding:20px 16px 14px;color:#fff; font-weight:600;font-size:15.5px;background:linear-gradient(0deg,rgba(9,13,19,.88),rgba(9,13,19,0))} @media(max-width:560px){.cslide{flex-basis:82%}} /* twarz zaufania przy kontakcie */ .contact-face{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;background:var(--panel);box-shadow:var(--shadow)} .contact-face img{display:block;width:100%;height:210px;object-fit:cover;object-position:center 22%} .contact-face figcaption{padding:16px 18px;display:flex;flex-direction:column;gap:5px} .contact-face figcaption b{font-size:15px;font-weight:600} .contact-face figcaption span{font-size:13px;color:var(--muted);line-height:1.5} /* narzędzia */ .wow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:1000px){.wow-grid{grid-template-columns:1fr}} .wow{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:30px;display:flex;flex-direction:column;gap:14px} .wow h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em} .wow .sub{font-size:13.5px;color:var(--muted);margin:0} .pill{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--acc); border:1px solid var(--acc-line);border-radius:999px;padding:4px 12px; align-self:flex-start;background:var(--acc-soft);text-transform:uppercase} .calc-out{border:1px solid var(--acc-line);background:var(--acc-soft);border-radius:12px; padding:16px 18px;font-size:13px;color:var(--muted)} .calc-out b{display:block;font-size:22px;color:var(--acc);font-variant-numeric:tabular-nums; letter-spacing:-.01em;font-weight:600} .sim-scene{border:1px solid var(--line2);border-radius:12px;background:var(--bg2);overflow:hidden} .sim-scene svg{display:block;width:100%;height:auto} .hotspot{cursor:pointer} .hotspot circle.pulse{animation:pulse 1.8s infinite} @keyframes pulse{0%{opacity:.9;r:6}70%{opacity:0;r:14}100%{opacity:0;r:14}} @media(prefers-reduced-motion:reduce){.hotspot circle.pulse{animation:none}} .sim-log{font-size:12.5px;min-height:40px;color:var(--risk);font-weight:500} .sim-score{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)} .sim-score b{font-size:22px;color:var(--risk);font-variant-numeric:tabular-nums;font-weight:600} .map-rows{display:flex;flex-direction:column;gap:10px} .map-row{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)} .map-row .woj{width:112px;flex:none;font-size:11.5px;color:var(--dim);letter-spacing:.05em; font-weight:600;text-transform:uppercase} .bar{flex:1;height:8px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;overflow:hidden} .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--risk));border-radius:999px} .map-row b{width:56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--txt); font-size:13px;font-weight:600} .foot-note{font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;font-weight:500} /* narzędzia — strona listy /narzedzia/ */ .tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:1000px){.tool-grid{grid-template-columns:1fr}} .tool-more{margin-top:auto;font-size:13px;color:var(--acc);font-weight:600;text-decoration:none} /* wiedza */ .kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:900px){.kb-grid{grid-template-columns:1fr}} .kb{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--panel); text-decoration:none;transition:box-shadow .18s,transform .18s;display:flex;flex-direction:column;gap:8px} .kb:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .kb .cat{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--acc);text-transform:uppercase} .kb h3{margin:12px 0 8px;font-size:16.5px;line-height:1.45;font-weight:600;letter-spacing:-.01em} .kb p{margin:0;font-size:13.5px;color:var(--muted)} .kb .meta{margin-top:auto;font-size:12px;color:var(--dim)} .kb-empty{border:1px dashed var(--line2);border-radius:var(--radius);padding:32px; color:var(--muted);font-size:14px;text-align:center} .kb-cat-block{margin-bottom:44px} .kb-cat-block:last-child{margin-bottom:0} .kb-cat-title{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--acc);margin:0 0 16px} /* o nas */ .about{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start} @media(max-width:900px){.about{grid-template-columns:1fr}} .about p{color:var(--muted);max-width:58ch;margin:0 0 16px;font-size:16px} .about p strong{color:var(--txt);font-weight:600} .num-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .num{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px; background:var(--panel);box-shadow:var(--shadow)} .num b{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .num span{font-size:12.5px;color:var(--muted)} .num-sm b{font-size:20px} /* produkty */ .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:800px){.prod-grid{grid-template-columns:1fr}} .prod{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:var(--panel); display:flex;justify-content:space-between;align-items:center;gap:18px;text-decoration:none; transition:box-shadow .18s} .prod:hover{box-shadow:var(--shadow)} .prod h3{margin:0 0 6px;font-size:17px;font-weight:600} .prod p{margin:0;font-size:13.5px;color:var(--muted)} .prod .ext{color:var(--acc);font-size:13px;white-space:nowrap;font-weight:600} /* kontakt */ .contact{display:grid;grid-template-columns:1fr 1fr;gap:56px} @media(max-width:900px){.contact{grid-template-columns:1fr}} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.form .row{grid-template-columns:1fr}} textarea{min-height:100px;resize:vertical} .side-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel); box-shadow:var(--shadow);padding:26px;margin-bottom:16px} .side-card h3{margin:0 0 8px;font-size:15px;font-weight:600} .side-card p{margin:0;font-size:13.5px;color:var(--muted)} .side-card .big{font-size:19px;font-weight:600;color:var(--txt);margin-top:6px} .side-card .big a{color:inherit;text-decoration:none} .side-card .big a:hover{color:var(--acc)} /* zaufali nam — strona */ .logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:800px){.logo-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.logo-grid{grid-template-columns:1fr}} .logo-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel); padding:34px 20px;display:flex;align-items:center;justify-content:center;text-align:center; font-weight:600;letter-spacing:.04em;color:var(--dim);min-height:110px} .logo-card.is-client{color:var(--txt)} /* mega footer */ footer{background:var(--bg2);border-top:1px solid var(--line);padding:64px 0 110px; font-size:13.5px;color:var(--muted)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:36px} @media(max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.foot-grid{grid-template-columns:1fr}} .foot-col h4{margin:0 0 14px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--txt);font-weight:600} .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .foot-col a{color:var(--muted);text-decoration:none} .foot-col a:hover{color:var(--acc)} .foot-brand p{margin:14px 0 0;max-width:38ch;line-height:1.7} .foot-brand .addr{margin-top:18px;color:var(--dim);line-height:1.85;font-size:13px} .foot-bottom{border-top:1px solid var(--line);margin-top:48px;padding-top:22px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:12.5px} .foot-bottom .legal{display:flex;gap:20px;flex-wrap:wrap} .foot-bottom .legal a{color:var(--dim);text-decoration:none} .foot-bottom .legal a:hover{color:var(--acc)} .wa-float{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px; background:#1FA855;color:#fff;text-decoration:none;font-weight:600;font-size:14px; padding:13px 22px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25)} .wa-float:hover{filter:brightness(1.07)} :is(a,button,select,input,textarea):focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* Patrol saperski — realizacje (wideo + galeria) */ #saperski{scroll-margin-top:84px} .saper-video{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#000;margin-bottom:20px} .saper-video video{display:block;width:100%;height:auto;max-height:72vh;object-fit:cover} .saper-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:900px){.saper-gallery{grid-template-columns:1fr}} .saper-gallery figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)} .saper-gallery img{display:block;width:100%;height:260px;object-fit:cover} .saper-gallery figcaption{padding:12px 14px;font-size:13.5px;color:var(--muted);line-height:1.45} /* ============================================================ PODSTRONY — usługi, artykuły, treści prawne ============================================================ */ /* hero podstrony usługi */ .svc-hero{position:relative;overflow:hidden;background:var(--bg2) center/cover no-repeat; border-bottom:1px solid var(--line)} .svc-hero::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(9,13,19,.88) 0%,rgba(9,13,19,.68) 46%,rgba(9,13,19,.28) 100%)} .svc-hero .wrap{position:relative;z-index:1;padding-top:64px;padding-bottom:56px;max-width:820px} .svc-hero h1{color:#fff} .svc-hero .lead{color:rgba(236,242,248,.86);max-width:60ch} .svc-hero .kicker a{color:var(--acc)} /* artykuł / usługa — treść */ .article{max-width:760px;padding-top:56px;padding-bottom:56px} .article-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:12.5px; letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-bottom:18px} .article h1{margin-bottom:14px} .article .lead{max-width:none;margin-bottom:34px} .article-body{color:var(--txt);font-size:16px;line-height:1.8} .article-body h2{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:40px 0 16px} .article-body h3{font-size:18.5px;font-weight:600;letter-spacing:-.01em;margin:30px 0 12px} .article-body p{margin:0 0 18px;color:var(--txt)} .article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px;color:var(--txt)} .article-body li{margin:0 0 8px} .article-body a{color:var(--acc);text-decoration:underline} .article-body blockquote{margin:24px 0;padding:16px 22px;border-left:3px solid var(--acc); background:var(--acc-soft);color:var(--txt);font-style:italic} .article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px} .article-body th,.article-body td{border:1px solid var(--line);padding:10px 12px;text-align:left} .article-body th{background:var(--bg2);font-weight:600} .article-body img{border-radius:var(--radius);margin:8px 0 24px;display:block} .article-body code{background:var(--bg2);border:1px solid var(--line);border-radius:6px; padding:1px 6px;font-size:13px} .article-body hr{border:none;border-top:1px solid var(--line);margin:32px 0} .zakres{margin-bottom:40px} .zakres h2{font-size:20px;font-weight:600;margin:0 0 16px} .zakres ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:640px){.zakres ul{grid-template-columns:1fr}} .zakres li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--txt); border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel)} .zakres li::before{content:"✓";color:var(--acc);font-weight:700;flex:none} .faq{margin-top:44px} .faq h2{font-size:20px;font-weight:600;margin:0 0 16px} .faq-item{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--panel);overflow:hidden} .faq-item summary{cursor:pointer;padding:16px 18px;font-weight:600;font-size:14.5px;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:12px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";color:var(--acc);font-size:20px;font-weight:400;flex:none} .faq-item[open] summary::after{content:"–"} .faq-item p{margin:0;padding:0 18px 18px;color:var(--muted);font-size:14px;line-height:1.7} .svc-cta{margin-top:52px;border:1px solid var(--line);border-radius:var(--radius); background:var(--bg2);padding:34px} .svc-cta h2{font-size:21px;font-weight:600;margin:0 0 20px} /* strony proste (prawne) */ .legal-page{max-width:760px;padding-top:56px;padding-bottom:56px} .legal-page h1{margin-bottom:24px} .legal-page h2{font-size:20px;font-weight:600;margin:36px 0 12px} .legal-page p{color:var(--txt);margin:0 0 16px;line-height:1.8} .legal-page ul{color:var(--txt);line-height:1.8} /* 404 */ .error-page{text-align:center;padding:110px 0} .error-page .code{font-size:90px;font-weight:700;color:var(--acc);letter-spacing:-.03em;margin:0} .error-page h1{margin:6px 0 14px} .error-page p{color:var(--muted);margin:0 0 28px} /* cookie banner */ .cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--panel); border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(16,24,40,.08); padding:18px 22px;display:none} .cookie-bar.is-visible{display:block} .cookie-bar .wrap{max-width:1180px;margin:0 auto;padding:0;display:flex;align-items:center; gap:22px;flex-wrap:wrap;justify-content:space-between} .cookie-bar p{margin:0;font-size:13px;color:var(--muted);max-width:70ch} .cookie-bar p a{color:var(--acc);text-decoration:underline} .cookie-bar .cookie-actions{display:flex;gap:10px;flex-wrap:wrap} @media(max-width:640px){.cookie-bar .wrap{flex-direction:column;align-items:flex-start}}