/* =========================================================
   NetSecure.pl — design tokens
   Palette:  graphite-950 #0B0F14 · graphite-900 #10151C
             panel #151B24 · line #263140 · line-strong #3A4658
             paper #EEF2F7 · muted #8A96A8
             signal (alert amber) #FF5E1A · cool (structural blue) #5B8CFF
             good (status) #34D399
   Type:     Sora (display) · Inter (body) · IBM Plex Mono (data/labels)
   ========================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
    --bg:#0B0F14;
    --bg-alt:#10151C;
    --panel:#151B24;
    --panel-2:#12171F;
    --line:#242E3A;
    --line-strong:#3A4658;
    --paper:#EDF2F7;
    --muted:#8A96A8;
    --muted-2:#5E6980;
    --signal:#FF5E1A;
    --signal-dim:rgba(255,94,26,.12);
    --cool:#5B8CFF;
    --good:#34D399;
    --radius:10px;
    --radius-lg:16px;
    --font-display:'Sora',system-ui,sans-serif;
    --font-body:'Inter',system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
html{background:var(--bg);overflow-x:hidden}
/* body celowo bez tła — inaczej przykrywa warstwy z ujemnym z-index (.grid-field, .cyber-canvas) */
body{background:transparent;color:var(--paper);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;line-height:1.14;color:#fff}
.container{width:100%;max-width:1240px;margin-inline:auto;padding:0 24px}
.muted{color:var(--muted)}
.ink-signal{color:var(--signal)}
.ink-good{color:var(--good)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}

/* ===== Cyber background (animated node mesh) ===== */
.cyber-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9}

/* background schematic grid */
.grid-field{position:fixed;inset:0;z-index:-2;background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(1100px 620px at 82% -8%,rgba(255,94,26,.08),transparent 60%),
    radial-gradient(900px 560px at 0% 40%,rgba(91,140,255,.06),transparent 60%),
    linear-gradient(180deg,#0A0D12 0%,#0B0F14 40%,#0A0D12 100%);
    background-size:56px 56px,56px 56px,auto,auto,auto;
}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.eyebrow-bar{width:22px;height:2px;background:var(--signal);display:inline-block}

/* ===== Buttons ===== */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:8px;font-weight:600;font-size:.94rem;letter-spacing:.01em;cursor:pointer;border:1px solid transparent;transition:transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;font-family:var(--font-body)}
.btn i{transition:transform .2s ease;font-size:.85em}
.btn:hover i{transform:translateX(3px)}
.btn-sm{padding:9px 16px;font-size:.85rem}
.btn-lg{padding:17px 28px;font-size:1rem}
.btn-primary{color:#0B0F14;background:var(--signal);box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -10px rgba(255,94,26,.55)}
.btn-primary:hover{background:#FF7238;transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 16px 30px -10px rgba(255,94,26,.6)}
.btn-ghost{color:var(--paper);background:transparent;border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(255,255,255,.03)}

/* ===== status dot ===== */
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--good)}
.dot-live{background:var(--signal);box-shadow:0 0 0 0 rgba(255,94,26,.6);animation:blip 1.8s ease-out infinite}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(255,94,26,.55)}70%{box-shadow:0 0 0 9px rgba(255,94,26,0)}100%{box-shadow:0 0 0 0 rgba(255,94,26,0)}}

/* ===== Header ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,13,18,.7);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);transition:padding .25s ease}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px}
.header.scrolled .header-inner{padding:11px 24px}
.logo{font-family:var(--font-display);font-size:1.15rem;display:inline-flex;align-items:center;gap:10px;color:#fff}
.logo-mark{width:32px;height:32px;border-radius:7px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line-strong);color:var(--signal);font-size:.95rem}
.logo-text strong{color:var(--signal);font-weight:700}
.logo-img{height:64px;width:auto;display:block;transition:height .25s ease}
.header.scrolled .logo-img{height:50px}
.nav{display:flex;align-items:center;gap:8px}
.nav > a:not(.btn){display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.82rem;font-weight:500;color:var(--muted);padding:10px 12px;border-radius:6px;transition:color .2s ease,background .2s ease}
.nav-idx{color:var(--muted-2);font-size:.72rem}
.nav > a:not(.btn):hover{color:var(--paper);background:rgba(255,255,255,.04)}
.nav > .btn{margin-left:8px}
.nav-toggle{display:none;width:42px;height:42px;background:transparent;border:1px solid var(--line-strong);border-radius:8px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease, opacity .3s ease}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ticker */
.ticker{display:flex;align-items:center;border-top:1px solid var(--line);background:var(--panel-2);overflow:hidden}
.ticker-label{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:var(--signal);padding:8px 16px;border-right:1px solid var(--line);white-space:nowrap;flex-shrink:0}
.ticker-track{display:flex;overflow:hidden;position:relative;flex:1}
.ticker-content{display:flex;flex-shrink:0;animation:tickerScroll 34s linear infinite}
.ticker-content span{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);white-space:nowrap;padding:8px 28px 8px 0;display:inline-flex;align-items:center;gap:8px}
.ticker-content span i{color:var(--muted-2);font-size:.75em}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ===== Hero ===== */
.hero{position:relative;padding:242px 0 120px}
.hero-inner{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
.hero-title{font-size:clamp(2.3rem,4.6vw,3.6rem);margin:0 0 22px}
.hero-sub{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--muted);max-width:560px;margin-bottom:34px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}
.hero-facts{display:flex;gap:32px;flex-wrap:wrap}
.hero-facts dt{font-family:var(--font-mono);font-size:1.3rem;font-weight:600;color:#fff}
.hero-facts dd{font-size:.78rem;color:var(--muted-2);margin-top:2px}

/* console (signature element) */
.console{border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--panel);overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.console-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.console-dots{display:inline-flex;gap:6px}
.console-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);display:inline-block}
.console-title{font-family:var(--font-mono);font-size:.74rem;color:var(--muted-2);flex:1}
.console-body{padding:24px}
.console-row{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.82rem;color:var(--muted);margin-bottom:8px}
.console-row:not(:first-child){margin-top:22px}
.console-val{color:#fff;font-weight:600}
.meter{height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--cool),var(--signal));border-radius:2px}
.console-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.console-grid div{display:flex;flex-direction:column;gap:4px}
.console-grid span{font-family:var(--font-mono);font-size:1.6rem;font-weight:600;color:#fff}
.console-grid small{font-size:.72rem;color:var(--muted-2)}

/* ===== Sections ===== */
.section{padding:110px 0;position:relative}
.section-head{max-width:640px;margin:0 0 56px}
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:14px}
.section-head p{color:var(--muted)}

/* ===== Cards ===== */
/* Liczba kolumn ustawiana wprost, nie przez auto-fit — przy 8 kafelkach każdy
   wariant wypełnia siatkę bez dziur (w układzie 3-kolumnowym ostatni kafelek
   rozciąga się na dwie kolumny). auto-fit zostawiał puste pole. */
.cards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){
    .cards{grid-template-columns:repeat(3,1fr)}
    .cards .card-cta{grid-column:span 2}
}
@media (min-width:1180px){
    .cards{grid-template-columns:repeat(4,1fr)}
    .cards .card-cta{grid-column:auto}
}
.card{position:relative;padding:32px;background:var(--panel);transition:background .25s ease}
.card:hover{background:var(--panel-2)}
.card-idx{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted-2);display:block;margin-bottom:18px}
.card-icon{width:44px;height:44px;border-radius:9px;display:grid;place-items:center;background:var(--signal-dim);color:var(--signal);font-size:1.15rem;margin-bottom:20px;border:1px solid rgba(255,94,26,.22)}
.card h3{font-size:1.2rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.92rem;margin-bottom:18px}
.card-link{display:inline-flex;align-items:center;gap:7px;color:var(--cool);font-weight:600;font-size:.86rem;transition:gap .2s ease,color .25s ease;margin-top:auto;padding-top:16px}
.card:hover .card-link{gap:12px;color:var(--signal)}

/* kafelek zamykający siatkę — wezwanie do kontaktu, nie produkt */
.card-cta{background:linear-gradient(180deg,rgba(255,94,26,.07),transparent 58%),var(--panel)}
.card-cta .card-icon{background:rgba(91,140,255,.12);color:var(--cool);border-color:rgba(91,140,255,.24)}
.card-cta:hover .card-icon{border-color:rgba(91,140,255,.55);box-shadow:0 10px 26px -10px rgba(91,140,255,.6)}

/* ===== Why ===== */
.why{display:grid;grid-template-columns:1fr;gap:52px;align-items:start}
.lead{font-size:1.04rem;color:#C4CEDE;margin:14px 0 26px;max-width:520px}
.check-list{list-style:none;display:flex;flex-direction:column;gap:13px}
.check-list li{display:flex;gap:11px;align-items:flex-start;color:#D2DAE8;font-size:.95rem}
.check-list i{color:var(--good);margin-top:4px;font-size:.85em}

.status-panel{border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--panel);padding:26px}
.status-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted-2);padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.status-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:14px;font-size:.86rem;color:var(--muted);padding:10px 0}
.status-row + .status-row{border-top:1px solid var(--line)}
.status-row .meter{height:4px}
.status-tag{font-family:var(--font-mono);font-size:.72rem;padding:3px 9px;border-radius:5px;text-align:center}
.status-tag.ok{color:var(--good);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25)}
.status-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);text-align:center}
.status-foot strong{display:block;font-family:var(--font-mono);font-size:1.3rem;color:#fff;margin-bottom:3px}
.status-foot span{font-size:.72rem;color:var(--muted-2)}

/* ===== Timeline / Proces ===== */
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border-top:1px solid var(--line-strong)}
.step{padding:28px 24px 0;position:relative}
.step::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--signal);transition:width .4s ease}
.step.in::before{width:36px}
.step-num{font-family:var(--font-mono);font-size:1.1rem;font-weight:600;color:var(--signal);margin-bottom:14px}
.step h4{font-size:1.1rem;margin-bottom:8px;color:#fff}
.step p{color:var(--muted);font-size:.9rem}

/* ===== Industries ===== */
.industries{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.ind{display:flex;align-items:center;gap:14px;padding:22px;background:var(--panel);transition:background .2s ease}
.ind i{color:var(--signal);font-size:1.15rem;width:22px;text-align:center}
.ind span{font-weight:500;color:#D2DAE8;font-size:.92rem}
.ind:hover{background:var(--panel-2)}

/* ===== CTA ===== */
.cta-section{padding:0 0 120px}
.cta{position:relative;display:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding:52px;border-radius:var(--radius-lg);border:1px solid var(--line-strong);background:var(--panel-2);overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 220px at 100% 0%,rgba(255,94,26,.1),transparent 60%);pointer-events:none}
.cta h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-bottom:10px}
.cta p{color:var(--muted);max-width:520px}
.bracket{position:absolute;width:28px;height:28px;border-color:var(--line-strong);opacity:.9}
.bracket-tl{top:18px;left:18px;border-top:2px solid;border-left:2px solid}
.bracket-br{bottom:18px;right:18px;border-bottom:2px solid;border-right:2px solid}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--line);padding:60px 0 30px;background:var(--bg-alt)}
.footer-inner{display:grid;grid-template-columns:1fr;gap:36px;margin-bottom:36px}
.footer h5{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.footer a{display:block;color:var(--muted);font-size:.9rem;padding:4px 0;transition:color .2s ease}
.footer a:hover{color:var(--signal)}
.footer .logo{margin-bottom:10px}
.social{display:flex;gap:10px;margin-top:14px}
.social a{width:36px;height:36px;display:grid;place-items:center;border-radius:7px;border:1px solid var(--line-strong);color:var(--muted);padding:0}
.social a:hover{background:var(--signal);color:#0B0F14;border-color:transparent}
.copy{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;text-align:center;color:var(--muted-2);font-size:.8rem;padding-top:24px;border-top:1px solid var(--line);font-family:var(--font-mono)}
.copy a{display:inline;color:var(--muted-2);padding:0;font-size:inherit;transition:color .2s ease}
.copy a:hover{color:var(--signal)}
.copy-sep{color:var(--line-strong)}

/* ===== Vendor tags (product cards) ===== */
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}
.tag{font-family:var(--font-mono);font-size:.68rem;color:var(--muted);border:1px solid var(--line-strong);border-radius:5px;padding:3px 8px;white-space:nowrap}
.card{display:flex;flex-direction:column}

/* ===== Hero pillars (3 value props) ===== */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:14px}
.pillar{background:var(--panel);padding:20px}
.pillar-idx{font-family:var(--font-mono);font-size:.68rem;color:var(--signal);letter-spacing:.1em;display:block;margin-bottom:8px}
.pillar h4{font-size:.98rem;color:#fff;margin-bottom:6px}
.pillar p{font-size:.8rem;color:var(--muted);line-height:1.5}

/* ===== Partner strip ===== */
.partner-strip{display:flex;flex-wrap:wrap;gap:10px}
.partner-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.82rem;color:#D2DAE8;border:1px solid var(--line-strong);border-radius:8px;padding:10px 16px;background:var(--panel)}
.partner-chip strong{color:var(--signal);font-weight:600}
.partner-chip.featured{border-color:rgba(255,94,26,.35);background:var(--signal-dim)}

/* ===== Training section ===== */
.training{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--panel);padding:40px}
.training h3{font-size:1.5rem;margin-bottom:14px;color:#fff}
.training p{color:var(--muted);font-size:.95rem;margin-bottom:12px}
.training-goals{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}
.training-goals strong{color:#fff;display:block;margin-bottom:8px;font-size:.9rem}
@media (min-width:900px){.training{grid-template-columns:1.3fr .7fr;padding:52px}}

/* ===== Offices ===== */
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:40px}
.office{background:var(--panel);padding:26px}
.office h4{font-size:1rem;color:#fff;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.office h4 i{color:var(--signal);font-size:.85em}
.office p{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);line-height:1.8}
.office a{color:var(--cool)}
.office a:hover{color:var(--signal)}
.contact-people{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.contact-people span{font-size:.8rem;color:#D2DAE8}
.contact-people span b{color:#fff;font-weight:600}

/* ===== Praca / rekrutacja ===== */
.career{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media (min-width:1000px){.career{grid-template-columns:.85fr 1.15fr;gap:36px}}
.career-side{display:flex;flex-direction:column;gap:20px}
.career-note{color:var(--muted);font-size:.9rem;line-height:1.75;border-left:2px solid var(--signal);padding-left:16px}

.career-form{border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--panel);padding:28px;display:flex;flex-direction:column;gap:18px}
@media (min-width:700px){.career-form{padding:34px}}
.form-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted-2);padding-bottom:18px;border-bottom:1px solid var(--line)}

.field{display:flex;flex-direction:column;gap:8px}
.field-row{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:620px){.field-row{grid-template-columns:1fr 1fr}}
.field label{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.req{color:var(--signal)}

.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
    width:100%;font-family:var(--font-body);font-size:.94rem;color:var(--paper);
    background:var(--panel-2);border:1px solid var(--line-strong);border-radius:8px;
    padding:13px 15px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field select{appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.field select option{background:var(--panel-2);color:var(--paper)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--signal);background:var(--panel);
    box-shadow:0 0 0 3px rgba(255,94,26,.13);
}
.field.invalid input,.field.invalid select,.field.invalid textarea,.field.invalid .file-drop{border-color:#F87171}
.field-error{font-size:.78rem;color:#F87171;font-family:var(--font-mono)}

/* pole pliku */
.file-drop{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"icon text" "icon hint";
    gap:2px 14px;align-items:center;padding:18px;border:1px dashed var(--line-strong);border-radius:10px;
    background:var(--panel-2);cursor:pointer;transition:border-color .22s ease,background .22s ease}
.file-drop:hover,.file-drop.dragover{border-color:var(--signal);background:rgba(255,94,26,.05)}
.file-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-icon{grid-area:icon;width:40px;height:40px;border-radius:9px;display:grid;place-items:center;
    background:var(--signal-dim);color:var(--signal);border:1px solid rgba(255,94,26,.22)}
.file-text{grid-area:text;font-size:.92rem;color:var(--paper);word-break:break-word}
.file-hint{grid-area:hint;font-family:var(--font-mono);font-size:.72rem;color:var(--muted-2)}
.file-drop.has-file{border-style:solid;border-color:rgba(52,211,153,.45)}
.file-drop.has-file .file-icon{background:rgba(52,211,153,.12);color:var(--good);border-color:rgba(52,211,153,.28)}

/* zgoda RODO */
.consent{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;cursor:pointer;
    font-size:.86rem;color:var(--muted);line-height:1.65}
.consent input[type=checkbox]{appearance:none;width:19px;height:19px;margin-top:2px;flex-shrink:0;cursor:pointer;
    border:1px solid var(--line-strong);border-radius:5px;background:var(--panel-2);
    transition:background .2s ease,border-color .2s ease}
.consent input[type=checkbox]:checked{background:var(--signal);border-color:var(--signal)}
.consent input[type=checkbox]:checked::after{content:"✓";display:grid;place-items:center;height:100%;
    color:#0B0F14;font-size:.8rem;font-weight:700}
.consent input[type=checkbox]:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.consent a{color:var(--cool);text-decoration:underline;text-underline-offset:3px}
.consent a:hover{color:var(--signal)}
.consent.invalid{color:#F87171}
.consent.invalid input[type=checkbox]{border-color:#F87171}

.form-submit{justify-content:center;width:100%;margin-top:4px}
.form-submit[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.form-status{display:none;font-size:.9rem;line-height:1.6;padding:14px 16px;border-radius:9px;font-family:var(--font-body)}
.form-status.show{display:block}
.form-status.ok{color:var(--good);background:rgba(52,211,153,.09);border:1px solid rgba(52,211,153,.28)}
.form-status.err{color:#F87171;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.28)}
.form-foot{font-family:var(--font-mono);font-size:.74rem;color:var(--muted-2);line-height:1.7}
.form-foot strong{color:var(--muted)}

/* honeypot — poza ekranem, nie display:none (boty pomijają ukryte pola) */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ikonka linku zewnętrznego przy partnerach */
.partner-ext{font-size:.66em;opacity:.4;margin-left:3px;transition:opacity .22s ease,transform .22s ease}
.partner-chip:hover .partner-ext{opacity:1;transform:translate(1px,-1px)}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .ticker-content,.dot-live,.orb{animation:none!important}
    .cyber-canvas{opacity:.5}
}

/* =========================================================
   Podstrony (szkolenie-utm-fortigate.html, rodo.html)
   ========================================================= */
.page-hero{position:relative;padding:206px 0 40px}
.page-title{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:20px;max-width:900px}
.page-lead{color:var(--muted);font-size:1.02rem;max-width:720px}

.breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.76rem;color:var(--muted-2);margin-bottom:26px}
.breadcrumb a{color:var(--muted);transition:color .2s ease}
.breadcrumb a:hover{color:var(--signal)}
.breadcrumb .sep{color:var(--line-strong)}
.breadcrumb .crumb-current{color:var(--paper)}

/* pasek kluczowych faktów */
.fact-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:46px}
.fact{background:var(--panel);padding:22px}
.fact span{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:9px}
.fact strong{display:block;font-size:1.02rem;color:#fff;font-weight:600;line-height:1.35}

/* agenda szkolenia */
.agenda{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.agenda-item{background:var(--panel);padding:24px 26px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;transition:background .25s ease}
.agenda-num{font-family:var(--font-mono);font-size:.95rem;font-weight:600;color:var(--signal);padding-top:3px;min-width:26px}
.agenda-item h3{font-size:1.08rem;margin-bottom:7px}
.agenda-item p{color:var(--muted);font-size:.92rem}
.agenda-item .tag-row{padding-top:14px}

/* dokumenty prawne */
.legal-list{list-style:none;counter-reset:legal;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;max-width:900px}
/* uwaga: pozycjonowanie absolutne zamiast grida — inline'owe <strong> w treści
   punktu stawałoby się osobnym elementem siatki i łamało układ */
.legal-list > li{position:relative;counter-increment:legal;background:var(--panel);padding:24px 26px 24px 70px;color:#D2DAE8;font-size:.95rem;line-height:1.8;transition:background .25s ease}
.legal-list > li::before{content:counter(legal);position:absolute;left:26px;top:24px;font-family:var(--font-mono);font-size:.95rem;font-weight:600;color:var(--signal)}
.legal-list > li strong{color:#fff;font-weight:600}
.legal-list ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px}
.legal-list ul li{position:relative;padding-left:20px;color:var(--muted);font-size:.9rem;line-height:1.6}
.legal-list ul li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;background:var(--signal)}
.legal-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem;font-family:var(--font-mono);line-height:1.7}

/* lista komponentów i licencji */
.lic-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.lic-item{background:var(--panel);padding:28px;display:grid;grid-template-columns:1fr;gap:22px;align-items:start;transition:background .25s ease}
@media (min-width:900px){.lic-item{grid-template-columns:1fr 260px;gap:36px}}
.lic-item h3{font-size:1.15rem;margin-bottom:10px}
.lic-item p{color:#C4CEDE;font-size:.94rem;line-height:1.7}
.lic-copyright{font-family:var(--font-mono)!important;font-size:.8rem!important;color:var(--muted)!important;margin-top:10px;padding:8px 12px;border-left:2px solid var(--signal);background:var(--panel-2);border-radius:0 6px 6px 0}
.lic-detail{color:var(--muted)!important;font-size:.88rem!important;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.lic-item strong{color:#fff;font-weight:600}
.lic-meta{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.lic-meta .tag-row{margin-top:0;padding-top:0;margin-bottom:4px}
.lic-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.78rem;color:var(--cool);transition:color .2s ease,gap .2s ease}
.lic-link i{font-size:.8em;opacity:.6;transition:opacity .2s ease,transform .2s ease}
.lic-link:hover{color:var(--signal);gap:11px}
.lic-link:hover i{opacity:1;transform:translate(1px,-1px)}

.office-block{font-family:var(--font-mono);font-size:.86rem;color:var(--muted);line-height:1.9}
.office-block a{color:var(--cool)}
.office-block a:hover{color:var(--signal)}

/* powrót */
.back-link{display:inline-flex;align-items:center;gap:10px;margin-top:44px;font-family:var(--font-mono);font-size:.84rem;color:var(--muted);border:1px solid var(--line-strong);border-radius:8px;padding:12px 18px;transition:color .22s ease,border-color .22s ease,background .22s ease,gap .22s ease}
.back-link:hover{color:var(--paper);border-color:var(--paper);background:rgba(255,255,255,.03);gap:14px}
.back-link i{font-size:.85em;color:var(--signal)}

@media (max-width:900px){
    .page-hero{padding:168px 0 30px}
}

/* =========================================================
   Efekty hover — tylko dla urządzeń z prawdziwym kursorem,
   żeby na dotyku stany nie "przyklejały się" po tapnięciu.
   ========================================================= */
@media (hover:hover) and (pointer:fine) {

    /* --- wspólny reflektor podążający za kursorem --- */
    .card, .pillar, .office, .fact, .agenda-item { position:relative; isolation:isolate }
    .card::before, .pillar::before, .office::before, .fact::before, .agenda-item::before {
        content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
        transition:opacity .32s ease;
        background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,94,26,.11), transparent 62%);
    }
    .card:hover::before, .pillar:hover::before, .office:hover::before,
    .fact:hover::before, .agenda-item:hover::before { opacity:1 }
    .card > *, .pillar > *, .office > *, .fact > *, .agenda-item > * { position:relative; z-index:1 }

    /* --- pasek "skanowania" wjeżdżający od lewej --- */
    .card::after, .pillar::after, .office::after, .fact::after, .agenda-item::after {
        content:"";position:absolute;top:0;left:0;z-index:2;height:2px;width:0;
        background:linear-gradient(90deg,var(--signal),rgba(255,94,26,0));
        transition:width .5s cubic-bezier(.2,.7,.2,1);
    }
    .card:hover::after, .pillar:hover::after, .office:hover::after,
    .fact:hover::after, .agenda-item:hover::after { width:100% }

    /* --- kafelki podstron --- */
    .fact:hover, .agenda-item:hover { background:var(--panel-2) }
    .agenda-num { transition:transform .25s ease, color .25s ease }
    .agenda-item:hover .agenda-num { transform:translateX(3px); color:#fff }
    .legal-list > li:hover { background:var(--panel-2) }

    /* --- karty produktów --- */
    .card { transition:background .25s ease, box-shadow .3s ease }
    .card:hover { box-shadow:inset 0 0 0 1px rgba(255,94,26,.26) }
    .card:hover .card-idx { color:var(--signal) }
    .card-idx { transition:color .25s ease }
    .card-icon { transition:transform .32s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease }
    .card:hover .card-icon {
        transform:translateY(-3px) scale(1.07);
        border-color:rgba(255,94,26,.55);
        box-shadow:0 10px 26px -10px rgba(255,94,26,.6);
    }

    /* --- tagi producentów --- */
    .tag { transition:color .2s ease, border-color .2s ease, background .2s ease }
    .tag:hover { color:var(--signal); border-color:rgba(255,94,26,.5); background:var(--signal-dim) }

    /* --- filary w hero --- */
    .pillar { transition:background .25s ease }
    .pillar:hover { background:var(--panel-2) }
    .pillar:hover .pillar-idx { color:#fff }
    .pillar-idx { transition:color .25s ease }

    /* --- karty biur --- */
    .office { transition:background .25s ease }
    .office:hover { background:var(--panel-2) }
    .office h4 i { transition:transform .28s cubic-bezier(.2,.7,.2,1) }
    .office:hover h4 i { transform:scale(1.18) }

    /* --- chipy partnerów --- */
    .partner-chip { transition:transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease }
    .partner-chip:hover {
        transform:translateY(-3px); color:#fff;
        border-color:rgba(91,140,255,.55); background:var(--panel-2);
        box-shadow:0 14px 28px -16px rgba(91,140,255,.75);
    }
    .partner-chip.featured:hover {
        border-color:rgba(255,94,26,.6);
        box-shadow:0 14px 28px -16px rgba(255,94,26,.85);
    }

    /* --- kroki procesu --- */
    .step { transition:background .3s ease }
    .step:hover { background:linear-gradient(180deg,rgba(255,94,26,.06),transparent 72%) }
    .step.in:hover::before { width:100% }
    .step-num { transition:color .25s ease, transform .25s ease }
    .step:hover .step-num { color:#fff; transform:translateX(4px) }

    /* --- panele: konsola, status, szkolenia --- */
    .console, .status-panel, .training { transition:border-color .3s ease, box-shadow .35s ease }
    .console:hover, .status-panel:hover, .training:hover {
        border-color:rgba(91,140,255,.42);
        box-shadow:0 30px 70px -30px rgba(0,0,0,.75), 0 0 44px -20px rgba(91,140,255,.55);
    }
    .status-row { transition:background .2s ease }
    .status-row:hover { background:rgba(255,255,255,.025) }

    /* --- lista atutów --- */
    .check-list li { transition:color .2s ease, transform .22s ease }
    .check-list li:hover { color:#fff; transform:translateX(4px) }
    .check-list i { transition:color .2s ease }
    .check-list li:hover i { color:var(--signal) }

    /* --- nawigacja: podkreślenie wjeżdżające od lewej --- */
    .nav > a:not(.btn) { position:relative }
    .nav > a:not(.btn)::after {
        content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1px;
        background:var(--signal);transform:scaleX(0);transform-origin:left;
        transition:transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .nav > a:not(.btn):hover::after { transform:scaleX(1) }
    .nav-idx { transition:color .2s ease }
    .nav > a:not(.btn):hover .nav-idx { color:var(--signal) }

    /* --- logo --- */
    .logo-img { transition:height .25s ease, filter .3s ease }
    .logo:hover .logo-img { filter:drop-shadow(0 0 14px rgba(255,94,26,.5)) }
}

@media (prefers-reduced-motion: reduce) {
    .card-icon, .partner-chip, .check-list li, .step-num, .office h4 i { transition:none!important }
    .partner-chip:hover, .check-list li:hover, .step:hover .step-num, .card:hover .card-icon, .office:hover h4 i { transform:none!important }
}

/* ===== Responsive ===== */
@media (max-width: 900px){
    .nav-toggle{display:flex}
    .logo-img{height:48px}
    .header.scrolled .logo-img{height:40px}
    .nav{position:fixed;top:84px;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:2px;padding:14px;background:rgba(10,13,18,.97);border:1px solid var(--line-strong);border-radius:12px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease}
    .nav.open{opacity:1;transform:none;pointer-events:auto}
    .nav > a:not(.btn){padding:13px 12px}
    .nav > .btn{margin:8px 4px 4px}
    .ticker-label{display:none}
    .hero{padding:196px 0 90px}
    .section{padding:80px 0}
    .cta{padding:32px}
}
@media (min-width: 900px){
    .hero-inner{grid-template-columns:1.05fr .95fr}
    .why{grid-template-columns:1.05fr .95fr}
    .cta{grid-template-columns:1.4fr auto;padding:60px}
    .footer-inner{grid-template-columns:1.6fr 1fr 1fr 1.2fr}
}
@media (min-width: 1400px){
    .container{max-width:1320px}
}