/* LTRA — wspólny "chrome" podstron (nagłówek z mega-menu, stopka-sitemap,
   przyciski, breadcrumb, page-hero, spec-listy, callout "Dla zarządu", CTA).
   Linkuj PO ../../styles.css — korzysta z tokenów design systemu. */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-sans); background:var(--bg-page); color:var(--text-primary);
  -webkit-font-smoothing:antialiased; font-size:var(--fs-body); line-height:var(--lh-body); overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }
img{ max-width:100%; display:block; }

/* layout helpers */
.wrap{ max-width:1200px; margin:0 auto; padding-inline:var(--container-px); }
.section{ padding-block:var(--section-py); }
.eyebrow{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-wider);
  text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.6rem; }
.eyebrow::before{ content:""; width:18px; height:1.5px; background:var(--accent); display:inline-block; }
.kicker-mono{ font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.04em; color:var(--text-muted); }
h1,h2,h3{ letter-spacing:var(--ls-tight); line-height:var(--lh-snug); }

/* ============ BUTTONS ============ */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:var(--fw-semibold);
  font-size:var(--fs-sm); line-height:1; padding:.7rem 1.15rem; border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; transition:background .2s var(--ease-out), color .2s, border-color .2s, transform .15s; }
.btn .ico{ width:18px; height:18px; }
.btn-lg{ font-size:var(--fs-body); padding:.95rem 1.5rem; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--text-primary); border-color:var(--border-strong); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ============ NAV (mega-menu, dwa filary) ============ */
nav.site{ position:fixed; inset:0 0 auto 0; z-index:50; height:68px; display:flex; align-items:center;
  background:rgba(247,249,251,.72); backdrop-filter:var(--blur-nav); -webkit-backdrop-filter:var(--blur-nav);
  border-bottom:1px solid transparent; transition:background .3s, border-color .3s; }
nav.site.scrolled{ background:rgba(247,249,251,.9); border-bottom-color:var(--border-subtle); }
nav.site .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .wm{ font-family:'Space Grotesk', sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:-.03em; color:var(--text-primary); line-height:1; }
.brand .wm .it{ font-weight:500; color:var(--text-muted); margin-left:2px; }
.brand .wm .acc{ color:var(--status-live); }

.nav-mid{ display:flex; align-items:center; gap:.35rem; }
.nav-mid > a, .nav-item > button, .nav-item > a.nav-top{ font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-medium);
  color:var(--text-secondary); background:none; border:none; cursor:pointer; padding:.5rem .7rem; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; gap:.32rem; transition:color .2s; text-decoration:none; white-space:nowrap; }
.nav-mid > a:hover, .nav-item > button:hover, .nav-item > a.nav-top:hover{ color:var(--text-primary); }
.nav-item{ position:relative; padding-bottom:.2rem; }
.nav-item > button .chev, .nav-item > a.nav-top .chev{ width:13px; height:13px; opacity:.6; transition:transform .25s; }
.nav-item:hover > button .chev, .nav-item:hover > a.nav-top .chev{ transform:rotate(180deg); }

/* mega panel */
.mega{ position:absolute; top:calc(100% + 16px); left:0; transform:translateY(8px);
  width:min(380px, 90vw); background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg, 0 24px 60px -28px rgba(15,32,55,.28));
  padding:1.1rem; opacity:0; visibility:hidden; transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); z-index:60; }
.mega::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.nav-item:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.3rem .6rem .8rem; border-bottom:1px solid var(--border-subtle); margin-bottom:.7rem; }
.mega-head .mh-t{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:-.01em; white-space:nowrap; }
.mega-head .mh-all{ font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--accent); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.25rem; }
.mega-promo p{ font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.55; padding:0 .35rem; margin:0; }
.mega-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.9rem .35rem 1rem; }
.mega-chips span{ font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--text-secondary); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:.25rem .5rem; white-space:nowrap; }
.mega-go{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.7rem .85rem; border-radius:var(--radius-md); background:transparent; border:1px solid var(--border-strong); font-weight:var(--fw-semibold); font-size:var(--fs-sm); color:var(--text-primary); transition:background .18s, color .18s, border-color .18s; }
.mega-go:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.mega-go svg{ width:18px; height:18px; flex:none; }
.mega-grid a{ display:block; padding:.6rem .65rem; border-radius:var(--radius-md); transition:background .18s; }
.mega-grid a:hover{ background:var(--surface-sunken); }
.mega-grid .mg-t{ font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-primary); display:flex; align-items:center; gap:.45rem; }
.mega-grid .mg-d{ font-size:var(--fs-xs); color:var(--text-muted); margin-top:.15rem; line-height:1.4; }
.mega-grid .mg-t .tag{ font-family:var(--font-mono); font-size:9px; color:var(--accent); border:1px solid var(--border-strong); border-radius:3px; padding:.05rem .25rem; }

.nav-right{ display:flex; align-items:center; gap:.6rem; }
.langsw{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:var(--fs-xs); margin-right:.2rem; }
.langsw a{ color:var(--text-muted); text-decoration:none; transition:color .2s; }
.langsw a.on{ color:var(--text-primary); font-weight:600; }
.langsw a:hover{ color:var(--accent); }
.langsw span{ color:var(--border-strong); }
.mob-lang{ display:flex; gap:.6rem; align-items:center; font-family:var(--font-mono); font-size:1.05rem; padding:.85rem .3rem; border-bottom:1px solid var(--border-subtle); }
.mob-lang a{ color:var(--text-muted); text-decoration:none; }
.mob-lang a.on{ color:var(--text-primary); font-weight:600; }
.btn-attack{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; font-family:var(--font-sans);
  font-weight:var(--fw-semibold); font-size:var(--fs-sm); line-height:1; padding:.62rem 1rem; border-radius:var(--radius-md);
  border:1px solid #e0b6b6; background:rgba(255,255,255,.7); color:#b3261e; cursor:pointer;
  transition:background .2s var(--ease-out), color .2s, border-color .2s, transform .15s; }
.btn-attack:hover{ background:#b3261e; color:#fff; border-color:#b3261e; transform:translateY(-1px); }
.burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--text-primary); cursor:pointer; }
.burger svg{ width:22px; height:22px; }

/* mobile menu */
.mob{ position:fixed; inset:68px 0 auto 0; z-index:49; background:var(--bg-page); border-bottom:1px solid var(--border-subtle);
  padding:1.25rem var(--container-px) 1.75rem; display:none; flex-direction:column; gap:.2rem; }
.mob.open{ display:flex; }
.mob a{ padding:.85rem .3rem; font-size:1.05rem; color:var(--text-secondary); border-bottom:1px solid var(--border-subtle); }
.mob a:last-of-type{ border-bottom:none; }
.mob .mob-h{ font-family:var(--font-mono); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); padding:1rem .3rem .25rem; }
.mob .btn, .mob .btn-attack{ margin-top:.6rem; justify-content:center; }

@media (max-width:1100px){
  .nav-mid{ display:none; }
  .nav-right .btn:not(.btn-attack){ display:none; }
  .nav-right .btn-attack{ display:none; }
  .langsw{ display:none; }
  .burger{ display:inline-flex; }
}

/* ============ BREADCRUMB ============ */
.crumb{ padding-top:96px; }
.crumb ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-muted); }
.crumb a:hover{ color:var(--accent); }
.crumb .sep{ opacity:.5; }
.crumb [aria-current]{ color:var(--text-secondary); }

/* ============ PAGE HERO ============ */
.phero{ padding-block:2.2rem 0; }
.phero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.phero h1{ font-size:clamp(2.2rem,5vw,3.6rem); font-weight:var(--fw-extrabold); letter-spacing:var(--ls-tight); margin:1rem 0 1.1rem; }
.phero h1 .u{ color:var(--accent); }
.phero .lead{ font-size:var(--fs-lead); color:var(--text-secondary); line-height:var(--lh-relaxed); max-width:46ch; }
.phero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.phero-visual{ position:relative; }
.phero-visual canvas{ width:100%; height:360px; display:block; }
@media (max-width:860px){ .phero-grid{ grid-template-columns:1fr; } .phero-visual{ order:-1; } .phero-visual canvas{ height:280px; } }

/* ============ SECTION HEAD ============ */
.shead{ max-width:60ch; margin-bottom:2.6rem; }
.shead h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:var(--fw-extrabold); letter-spacing:var(--ls-tight); margin:.9rem 0 .8rem; }
.shead p{ font-size:var(--fs-lead); color:var(--text-secondary); line-height:var(--lh-relaxed); }

/* ============ SPEC / ZAKRES LISTS ============ */
.spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.spec-card{ border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface-card); padding:clamp(1.5rem,3vw,2rem); }
.spec-card > h3{ font-size:1.3rem; font-weight:var(--fw-extrabold); letter-spacing:-.01em; margin-bottom:.3rem; }
.spec-card > .sc-sub{ font-size:var(--fs-sm); color:var(--text-secondary); margin-bottom:1.2rem; }
.sc-group{ padding:1rem 0 .6rem; border-top:1px solid var(--border-subtle); }
.sc-group h5{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.04em; color:var(--accent); margin-bottom:.5rem; text-transform:uppercase; }
.sc-group ul{ list-style:none; }
.sc-group li{ font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.5; padding:.25rem 0 .25rem 1.2rem; position:relative; }
.sc-group li::before{ content:""; position:absolute; left:0; top:.65em; width:5px; height:5px; background:var(--accent); border-radius:1px; }
@media (max-width:820px){ .spec-grid{ grid-template-columns:1fr; } }

/* ============ "DLA ZARZĄDU" CALLOUT ============ */
.board{ background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:clamp(1.8rem,4vw,2.8rem); }
.board .b-eye{ font-size:var(--fs-2xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.6rem; }
.board .b-eye::before{ content:""; width:18px; height:1.5px; background:var(--accent); display:inline-block; }
.board h3{ font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:var(--fw-extrabold); letter-spacing:var(--ls-tight); margin:.8rem 0 1.6rem; max-width:24ch; }
.board-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.board-row .bi{ padding:1.5rem 1.6rem 0 0; border-top:1px solid var(--border-subtle); }
.board-row .bi + .bi{ padding-left:1.6rem; }
.board-row .bi h6{ font-size:var(--fs-body); font-weight:var(--fw-bold); margin-bottom:.5rem; letter-spacing:-.01em; }
.board-row .bi p{ font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.6; }
@media (max-width:740px){ .board-row{ grid-template-columns:1fr; } .board-row .bi{ padding:1.3rem 0 0; } .board-row .bi + .bi{ padding-left:0; } }

/* ============ PARTNER / CERT STRIP ============ */
.partners{ border-block:1px solid var(--border-subtle); background:var(--surface-sunken); }
.partners .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem 2rem; flex-wrap:wrap; padding-block:1.6rem; }
.partners .pl{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.partners .pr{ display:flex; gap:1.4rem 2rem; flex-wrap:wrap; align-items:center; }
.partners .pr span{ font-size:var(--fs-sm); color:var(--text-secondary); font-weight:var(--fw-semibold); }
.partners .pr b{ color:var(--text-primary); }

/* ============ CREDENTIAL STRIP (matches homepage) ============ */
.trust{ padding-block:2rem; border-block:1px solid var(--border-subtle); background:var(--bg-deep); }
.trust .wrap{ display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap; justify-content:space-between; }
.trust .lab{ font-size:var(--fs-xs); color:var(--text-muted); letter-spacing:.04em; max-width:18ch; }
.creds{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; flex:1; }
.cred{ font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.02em; color:var(--text-secondary); text-align:center; border:1px solid var(--border-subtle); background:var(--surface-card); border-radius:var(--radius-sm); padding:.55rem .95rem; display:inline-flex; align-items:center; justify-content:center; gap:.35ch; white-space:nowrap; }
.cred b{ color:var(--text-primary); font-weight:600; }
@media (max-width:760px){ .trust .wrap{ flex-direction:column; align-items:flex-start; gap:1rem; } .creds{ justify-content:flex-start; } }

/* ============ RELATED CASES ============ */
.rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-subtle); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:hidden; }
.rel-grid .rc{ background:var(--surface-card); padding:1.6rem 1.5rem; display:flex; flex-direction:column; position:relative; }
.rel-grid .rc::after{ content:""; position:absolute; top:12px; left:12px; width:16px; height:16px; border-top:2px solid var(--status-live); border-left:2px solid var(--status-live); opacity:0; transition:opacity .25s; pointer-events:none; }
.rel-grid .rc:hover::after{ opacity:1; }
.rel-grid .rc .ctag{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.rel-grid .rc h4{ font-size:1rem; font-weight:var(--fw-bold); line-height:1.3; letter-spacing:-.01em; }
.rel-grid .rc .cv{ margin-top:auto; padding-top:1.1rem; font-size:1.15rem; font-weight:var(--fw-extrabold); color:var(--accent); letter-spacing:-.02em; }
.rel-grid .rc .cv span{ display:block; font-size:10px; color:var(--text-muted); font-weight:var(--fw-regular); margin-top:.15rem; }
@media (max-width:820px){ .rel-grid{ grid-template-columns:1fr; } }

/* ============ CTA ============ */
.cta{ background:var(--bg-page); position:relative; overflow:hidden; text-align:center; border-top:1px solid var(--border-subtle); }
.cta::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(22,48,79,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,48,79,.05) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%); mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 70%); pointer-events:none; }
.cta::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 110% at 50% 120%, rgba(13,148,136,.10), transparent 55%); pointer-events:none; }
.cta .wrap{ position:relative; z-index:1; }
.cta-inner{ max-width:700px; margin:0 auto; }
.cta h2{ font-size:clamp(2rem,5vw,3.2rem); font-weight:var(--fw-extrabold); letter-spacing:-.025em; margin:1.1rem auto 1rem; max-width:16ch; }
.cta p{ color:var(--text-secondary); font-size:var(--fs-lead); max-width:46ch; margin:0 auto 2.2rem; line-height:1.7; }
.cta .eyebrow{ justify-content:center; }
.cta-mail{ margin-top:1.1rem; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-muted); }
.cta-mail a{ color:var(--text-primary); border-bottom:1px solid var(--status-live); padding-bottom:1px; }

/* ============ FOOTER (sitemap) ============ */
footer.site{ background:var(--bg-deep); border-top:1px solid var(--border-subtle); padding-block:3.5rem 2rem; }
footer.site .fcols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
footer.site .fbrand .wm{ font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:700; letter-spacing:-.03em; }
footer.site .fbrand .wm .it{ font-weight:500; color:var(--text-muted); }
footer.site .fbrand .wm .acc{ color:var(--status-live); }
footer.site .fbrand p{ font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.6; margin-top:.9rem; max-width:34ch; }
footer.site h5{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1rem; }
footer.site .fcol a{ display:block; font-size:var(--fs-sm); color:var(--text-secondary); padding:.32rem 0; transition:color .2s; }
footer.site .fcol a:hover{ color:var(--accent); }
footer.site .fbot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--border-subtle); font-size:var(--fs-xs); color:var(--text-muted); }
@media (max-width:820px){ footer.site .fcols{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ footer.site .fcols{ grid-template-columns:1fr; } }

/* scroll-reveal */
.r{ opacity:0; transform:translateY(var(--reveal-rise,40px)); transition:opacity var(--dur-reveal,.8s) var(--ease-out), transform var(--dur-reveal,.8s) var(--ease-out); }
.r.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .r{ opacity:1; transform:none; } }