/* ══════════════════════════════════════════════════════════════════
   Centrum pomocy edum.pl — Steel Glass w wariancie neutralnym.
   Kolor grafitowo-indygowy: nie należy do żadnej akademii, więc nie
   sugeruje związku z konkretną marką klienta.
   ══════════════════════════════════════════════════════════════ */
:root {
  --accent: #4A5BE8;
  --accent-deep: #2438C4;
  --acc3: #12B48E;
  --c2: #E8556D; --c3: #F5A623; --c5: #7C5CE8; --c6: #2BA8E8;
  --grad: linear-gradient(135deg, #4A5BE8, #6B6BEE 50%, #7C5CE8);
  --bg: #FBFBFD;
  --glass: #fff;
  --glass2: #F4F5F9;
  --br: #E7E9F2;
  --br2: #D8DBE9;
  --tx: #101427;
  --tx2: #5B6180;
  --tx3: #8B91AB;
  --card: #fff; --soft: #F4F5F9; --acc: #4A5BE8; --acc3: #12B48E;
  --body: "Onest", system-ui, sans-serif;
  --r: 14px; --r-sm: 10px;
  --display: "Outfit", system-ui, sans-serif;
  --body: "Onest", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sh: 0 1px 3px rgba(20,30,60,.07), 0 4px 16px rgba(20,30,60,.05);
  --sh-lift: 0 20px 60px -20px rgba(74,91,232,.28), 0 2px 8px rgba(16,20,39,.05);
}
* { box-sizing: border-box; }
html{height:100%;scrollbar-gutter:stable}
body {
  margin: 0;
  /* stopka zawsze na dole okna, także gdy treść jest krótka */
  min-height: 100%;
  display: flex; flex-direction: column; background: var(--bg); color: var(--tx);
  font-family: var(--body); font-size: 15.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 50% 36% at 10% -6%, rgba(74,91,232,.16), transparent 60%),
    radial-gradient(ellipse 42% 32% at 92% 2%, rgba(232,85,109,.11), transparent 60%),
    radial-gradient(ellipse 46% 30% at 78% 46%, rgba(18,180,142,.09), transparent 62%),
    radial-gradient(ellipse 40% 28% at 6% 72%, rgba(245,166,35,.09), transparent 62%);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--display); font-weight: 300; letter-spacing: -.03em; line-height: 1.2; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 .3em; }
h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 400; margin: 2em 0 .6em; }
h3 { font-size: 1.05rem; font-weight: 500; margin: 1.6em 0 .5em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,36px);position:relative;z-index:1}

/* okruszki */
.crumbs { background: rgba(255,255,255,.5); border-bottom: 1px solid var(--br); font-size: .84rem; }
.crumbs .wrap { padding-top: 11px; padding-bottom: 11px; }
.crumbs a { color: var(--tx3); }
.crumbs span { color: var(--tx3); margin: 0 7px; }
.crumbs b { color: var(--tx); font-weight: 500; }

.main{padding:clamp(28px,5vw,48px) clamp(20px,4vw,36px) 70px;flex:1 0 auto}
.lead { color: var(--tx2); font-size: 1.03rem; margin: 0 0 1.6em; max-width: 68ch; }

/* strona główna */
.hero { text-align: center; padding: clamp(20px, 5vw, 48px) 0 clamp(24px, 4vw, 40px); }
.hero p { color: var(--tx2); max-width: 54ch; margin: 0 auto; }
.aud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 20px; }
.aud-card { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px;
  background: var(--glass); border: 1px solid var(--br); border-radius: var(--r);
  box-shadow: var(--sh); color: var(--tx); transition: all .18s; backdrop-filter: blur(12px); }
.aud-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lift); border-color: var(--br2); text-decoration: none; }
.aud-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: 20px; margin-bottom: 8px;
  box-shadow: 0 6px 18px rgba(74,91,232,.32); transition: transform .25s; }
.aud-card:hover .aud-ico { transform: scale(1.08) rotate(-4deg); }
.aud-t { font-family: var(--display); font-size: 1.2rem; font-weight: 500; }
.aud-d { color: var(--tx2); font-size: .92rem; }
.aud-n { font-family: var(--mono); font-size: .76rem; color: var(--accent); margin-top: 8px; letter-spacing: .04em; }
.sec-h { margin-top: 2.6em; }

/* kategorie */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.cat-card { display: flex; flex-direction: column; gap: 5px; padding: 22px;
  border-top: 3px solid transparent;
  background: var(--glass); border: 1px solid var(--br); border-radius: var(--r); box-shadow: var(--sh);
  color: var(--tx); transition: all .18s; }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lift);
  border-top-color: var(--accent); text-decoration: none; }
.cat-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 17px; color: #fff; background: var(--cc, var(--grad)); margin-bottom: 4px;
  box-shadow: 0 5px 14px rgba(74,91,232,.26); }
.cat-t { font-family: var(--display); font-size: 1.05rem; font-weight: 500; }
.cat-i { color: var(--tx2); font-size: .88rem; }
.cat-n { font-family: var(--mono); font-size: .72rem; color: var(--tx3); margin-top: 6px; }

/* lista artykułów */
.art-list { display: flex; flex-direction: column; gap: 8px; }
.art-row { display: flex; flex-direction: column; gap: 3px; padding: 15px 18px;
  background: var(--glass); border: 1px solid var(--br); border-radius: var(--r-sm);
  color: var(--tx); transition: all .16s; }
.art-row:hover { background: var(--glass2); border-color: var(--br2); transform: translateX(2px); text-decoration: none; }
.art-row-t { font-weight: 500; }
.art-row-l { color: var(--tx2); font-size: .89rem; }
.art-row-c { font-family: var(--mono); font-size: .72rem; color: var(--tx3); margin-top: 4px; }

/* artykuł */
.main:has(.article) { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; flex: 1 0 auto; }
@media (max-width: 900px) { .main:has(.article) { grid-template-columns: 1fr; } }
.article { background: var(--glass2); border: 1px solid var(--br); border-radius: var(--r);
  padding: clamp(24px, 4vw, 40px); box-shadow: var(--sh); }
.article .meta { font-family: var(--mono); font-size: .74rem; color: var(--tx3);
  padding-bottom: 1.4em; border-bottom: 1px solid var(--br); margin-bottom: 1.6em; }
.body p { margin: 0 0 1.1em; }
.body ul, .body ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.body li { margin-bottom: .4em; }
.body ol { counter-reset: step; list-style: none; padding-left: 0; }
.body ol > li { counter-increment: step; padding-left: 38px; position: relative; margin-bottom: .7em; }
.body ol > li::before { content: counter(step); position: absolute; left: 0; top: 0;
  width: 27px; height: 27px; border-radius: 8px; background: var(--grad); color: #fff;
  font-family: var(--mono); font-size: .76rem; display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(74,91,232,.28); }
.body h2 { padding-top: .4em; }
.body strong { font-weight: 500; color: var(--tx); }
.body code { font-family: var(--mono); font-size: .86em; background: rgba(45,60,110,.07);
  padding: 2px 6px; border-radius: 5px; }
/* miejsce na zrzut ekranu */
.body p:has(+ *) { }
.shot, .body p:first-line { }
.art-foot { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--br); color: var(--tx2); font-size: .92rem; }
.art-foot p { margin: 0; }

/* panel boczny artykułu */
.side-box { background: var(--glass); border: 1px solid var(--br); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--sh); position: sticky; top: 88px; }
.side-box h2 { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3); margin: 0 0 12px; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-list a { display: block; padding: 7px 10px; border-radius: var(--r-sm);
  color: var(--tx2); font-size: .89rem; line-height: 1.4; }
.side-list a:hover { background: rgba(61,90,254,.07); color: var(--tx); text-decoration: none; }
.side-list a.on { background: rgba(61,90,254,.12); color: var(--accent); font-weight: 500; }


/* ══════════════════════════════════════════════════════════════════
   NAGŁÓWEK, PASEK POMOCY I STOPKA — identyczne ze stroną główną
   ══════════════════════════════════════════════════════════════ */
.nav{position:sticky;top:0;z-index:60;background:rgba(251,251,253,.85);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--br)}
.nav-in{display:flex;align-items:center;gap:30px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:1.15rem;font-weight:500;color:var(--tx)}
.brand:hover{text-decoration:none}
.brand-dim{color:var(--tx3)}
.brand-mark{width:31px;height:31px;border-radius:9px;background:var(--grad);position:relative;
  flex:none;box-shadow:0 3px 12px rgba(74,91,232,.35)}
.brand-mark::after{content:"";position:absolute;inset:10.5px;border-radius:50%;background:#fff}
.nav-links{display:flex;gap:26px;margin-left:16px;font-size:.93rem}
.nav-links a{color:var(--tx2);font-weight:400}
.nav-links a:hover{color:var(--tx);text-decoration:none}
.nav-links a.on{color:var(--accent);font-weight:500}
.nav-links a.on{color:var(--accent);font-weight:500}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}
@media(max-width:880px){.nav-links{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;
  border-radius:10px;font-family:var(--body);font-size:.93rem;font-weight:500;cursor:pointer;
  border:1px solid var(--br2);background:#fff;color:var(--tx);transition:all .18s}
.btn:hover{border-color:var(--tx3);transform:translateY(-1px);text-decoration:none;
  box-shadow:0 1px 3px rgba(16,20,39,.06)}
.btn-p{background:var(--grad);border:0;color:#fff;box-shadow:0 4px 16px rgba(74,91,232,.3)}
.btn-p:hover{box-shadow:0 8px 26px rgba(74,91,232,.42);filter:brightness(1.06)}
.btn-sm{height:38px;padding:0 15px;font-size:.87rem}

/* drugi pasek — nawigacja wewnątrz pomocy */
.subnav{background:#fff;border-bottom:1px solid var(--br);position:sticky;top:70px;z-index:55}
.subnav-in{display:flex;align-items:center;gap:20px;height:54px}
.subnav-links{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto}
.subnav-links a{padding:7px 14px;border-radius:99px;font-size:.9rem;color:var(--tx2);white-space:nowrap;font-weight:400}
.subnav-links a:hover{background:var(--glass2);color:var(--tx);text-decoration:none}
.subnav-links a.on{background:rgba(74,91,232,.1);color:var(--accent);font-weight:500}
.subnav-search{display:flex;position:relative;width:270px;flex:none}
.subnav-search input{width:100%;height:38px;border-radius:99px;border:1px solid var(--br2);
  background:var(--bg);padding:0 40px 0 15px;font-family:var(--body);font-size:.88rem;color:var(--tx)}
.subnav-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,91,232,.12)}
.subnav-search button{position:absolute;right:3px;top:3px;width:32px;height:32px;border:0;
  border-radius:50%;background:var(--grad);color:#fff;font-size:15px;cursor:pointer}
@media(max-width:720px){.subnav-in{height:auto;padding-block:12px;flex-wrap:wrap}
  .subnav-search{width:100%}.subnav{top:70px}}

/* stopka */
.ftr{border-top:1px solid var(--br);padding:52px 0 30px;margin-top:auto;background:#fff}
.ftr-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:34px;margin-bottom:38px}
@media(max-width:800px){.ftr-grid{grid-template-columns:1fr 1fr}}
.ftr h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3);margin:0 0 14px;font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ftr a{color:var(--tx2);font-size:.89rem;font-weight:400}
.ftr a:hover{color:var(--accent)}
.ftr-tag{color:var(--tx3);font-size:.89rem;max-width:32ch;margin:14px 0 0}
.ftr-btm{border-top:1px solid var(--br);padding-top:22px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.83rem;color:var(--tx3)}

/* wynik weryfikacji certyfikatu w oknie */
.mod-body .box{background:none;border:0;padding:0;box-shadow:none}
.mod-body .res{margin-top:20px;border-radius:14px;padding:22px;border:1px solid}
.mod-body .res.ok{border-color:rgba(18,180,142,.3);background:rgba(18,180,142,.06)}
.mod-body .res.no{border-color:rgba(209,67,67,.3);background:rgba(209,67,67,.05)}
.mod-body .res-h{display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font-family:var(--display);font-size:1.05rem;font-weight:500}
.mod-body .ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:14px;flex:none}
.mod-body .ok .ico{background:var(--acc3)}
.mod-body .no .ico{background:#D14343}
.mod-body .row{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--br);font-size:.9rem}
.mod-body .row:last-child{border-bottom:0}
.mod-body .row span:first-child{color:var(--tx3);min-width:130px}
.mod-body .mono{font-family:var(--mono);font-size:.84rem}
.mod-body .ftr,.mod-body .top{display:none}

/* Nawigacja: kolor akcentu tylko dla pozycji aktywnej.
   Ogólna reguła dla odnośników barwiła wszystkie na niebiesko. */
.nav .nav-links a,
.subnav .subnav-links a,
.ftr ul a,
.hdr-nav a{color:var(--tx2);font-weight:400}
.nav .nav-links a:hover,
.subnav .subnav-links a:hover,
.ftr ul a:hover{color:var(--tx);text-decoration:none}
.nav .nav-links a.on{color:var(--accent);font-weight:500}
.subnav .subnav-links a.on{color:var(--accent);font-weight:500;background:rgba(74,91,232,.1)}
.nav-links .ext{display:inline-flex;align-items:center;gap:4px}
.ext-i{font-size:.78em;opacity:.55;transition:transform .18s,opacity .18s}
.nav-links .ext:hover .ext-i{transform:translate(1px,-1px);opacity:.9}

/* ══════════════════════════════════════════════════════════════════
   MENU MOBILNE — przycisk hamburger
   Poniżej 880 px pozycje menu chowały się bez żadnej alternatywy.
   ══════════════════════════════════════════════════════════════ */
.nav-burger{position:relative;z-index:61;display:none;width:40px;height:40px;border-radius:10px;flex:none;
  border:1px solid var(--br2);background:#fff;cursor:pointer;color:var(--tx);
  align-items:center;justify-content:center;padding:0;margin-left:auto}
.nav-burger span{display:block;width:17px;height:1.6px;background:currentColor;
  position:relative;transition:all .22s}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;
  width:17px;height:1.6px;background:currentColor;transition:all .22s}
.nav-burger span::before{top:-5.5px}.nav-burger span::after{top:5.5px}
body.menu-open .nav-burger span{background:transparent}
body.menu-open .nav-burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .nav-burger span::after{top:0;transform:rotate(-45deg)}

@media(max-width:880px){
  .nav-burger{display:flex}
  /* Wejście do konta jako dwie pierwsze pozycje listy, wyróżnione tłem. */
  .nav .nav-in{flex-wrap:wrap;gap:0;align-items:flex-start;align-content:flex-start;height:auto}
  .nav .nav-in>.brand{flex:1 1 auto;min-width:0;height:70px;display:flex;align-items:center;
    overflow:hidden;white-space:nowrap}
  .nav .nav-in>.nav-burger{flex:0 0 40px;width:40px;height:40px;margin:15px 0 15px auto;
    align-self:flex-start}
  body.menu-open .nav{background:#fff;box-shadow:0 12px 30px -12px rgba(16,20,39,.18)}
  .nav .nav-links,.nav .nav-cta{flex-basis:100%;width:100%;display:none;
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0}
  body.menu-open .nav .nav-links,body.menu-open .nav .nav-cta{display:flex}
  body.menu-open .nav .nav-cta{order:1;padding-top:6px}
  body.menu-open .nav .nav-links{order:2;padding-bottom:14px}
  body.menu-open .nav .nav-in{padding-bottom:6px}
  body.menu-open .nav .nav-links a,
  body.menu-open .nav .nav-cta .btn{
    display:flex;align-items:center;justify-content:flex-start;
    width:100%;height:auto;padding:14px;margin:0 0 6px;border-radius:10px;
    font-size:1rem;font-weight:400;text-align:left;border:1px solid transparent;
    background:transparent;color:var(--tx);box-shadow:none;white-space:normal;line-height:1.3}
  body.menu-open .nav .nav-links a:hover{background:var(--soft,#F4F5F9)}
  body.menu-open .nav .nav-cta .btn{background:var(--soft,#F4F5F9);border-color:var(--br);font-weight:500}
  body.menu-open .nav .nav-cta .btn-p{background:var(--grad);border-color:transparent;color:#fff}
}
/* stopka nie wychodzi poza ekran */
@media(max-width:520px){.ftr-grid{grid-template-columns:1fr;gap:22px}}
.ftr-grid>div{min-width:0}
.ftr a,.ftr-tag,.ftr-btm span{overflow-wrap:anywhere}


.nav .nav-cta .btn{display:inline-flex;align-items:center;justify-content:center;
  line-height:1;white-space:nowrap;text-align:center}
@media(max-width:880px){
  body.menu-open .nav .nav-cta .btn{flex:1 1 0;min-width:0;padding:0 12px;font-size:.85rem}
}