/* Druga wersja nowej strony glownej (/nowa-strona-2/), wg wizualizacji Grzegorza
   Sejf/Saplo/09-Grafika-Codex/strona-glowna-v2-2026-10-05/ref-grzegorz-wizualizacja.png.
   --u to 1 piksel wizualizacji (szeroka na 1024) przeliczony na szerokosc okna,
   wiec proporcje sa takie same na kazdym laptopie. Male napisy maja dolny prog w px. */

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../strona-glowna/fonty/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../strona-glowna/fonty/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.n2{
  --u:calc(min(100vw,1600px) / 1024);
  --noc:#040b17;
  --noc-2:#0b1428;
  --tekst:#11162a;
  --tekst-2:#41475a;
  --szary:#7a8091;
  --krem:#f4f1ee;
  --krem-2:#f6f3f1;
  --karta:rgba(255,255,255,.55);
  --pomarancz:#ff6a1a;
  --pomarancz-2:#f05a0a;
  --indygo:#4f55c9;
  margin:0;background:var(--krem);color:var(--tekst);overflow-x:clip;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:max(15px,calc(9.5*var(--u)));line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.n2 *,.n2 *::before,.n2 *::after{box-sizing:border-box}
:where(.n2) a{color:inherit;text-decoration:none}
:where(.n2) img{display:block;max-width:100%}
:where(.n2) :is(h1,h2,h3,h4,p,ul,ol,figure,blockquote){margin:0;padding:0}
:where(.n2) :is(ul,ol){list-style:none}
html{scroll-behavior:smooth}
.n2-wrap{width:min(calc(935*var(--u)),100% - 40px);margin:0 auto}
.n2-menu-mob{display:none}
.n2 > :is(header,section,footer){overflow-x:clip}

.n2-etykieta{display:block;font-size:max(11px,calc(7.2*var(--u)));font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--szary)}
.n2-etykieta--jasna{color:#9aa3b6}
.n2 h2{font-size:max(28px,calc(26*var(--u)));line-height:1.12;font-weight:500;letter-spacing:-.025em;color:var(--tekst)}
.n2-btn{display:inline-flex;align-items:center;gap:.6em;height:max(48px,calc(38*var(--u)));padding:0 max(24px,calc(20*var(--u)));border-radius:999px;
  background:var(--pomarancz);color:#fff;font-weight:600;font-size:max(15px,calc(9*var(--u)));box-shadow:0 0 calc(30*var(--u)) rgba(255,106,26,.45);transition:background .2s,translate .2s,box-shadow .2s}
.n2-btn:hover{background:var(--pomarancz-2);translate:0 -1px;box-shadow:0 0 calc(40*var(--u)) rgba(255,106,26,.6)}
.n2-btn-ciemny{display:inline-flex;align-items:center;gap:.6em;height:max(48px,calc(38*var(--u)));padding:0 max(24px,calc(27*var(--u)));border-radius:999px;
  background:#0e1428;color:#fff;font-weight:600;font-size:max(14px,calc(9*var(--u)));transition:background .2s}
.n2-btn-ciemny:hover{background:#1b2440}
.n2-link{display:inline-flex;align-items:center;gap:.7em;font-weight:600;font-size:max(14px,calc(9*var(--u)));color:var(--tekst)}
.n2-link span{transition:transform .2s}
.n2-link:hover span{transform:translateX(4px)}

/* ---------- nawigacja ---------- */
.n2-nav{background:var(--noc);position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s}
.n2-nav.przewiniete{background:rgba(4,11,23,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.07),0 10px 30px -12px rgba(0,0,0,.6)}
.n2-nav .n2-wrap{height:max(64px,calc(65*var(--u)));display:flex;align-items:center}
.n2-logo img{height:max(28px,calc(25*var(--u)));width:auto}
.n2-menu{display:flex;gap:max(22px,calc(26*var(--u)));margin-left:max(32px,calc(44*var(--u)));flex:1}
.n2-menu a,.n2-zaloguj{color:#dfe3ec;font-size:max(14px,calc(8.6*var(--u)));font-weight:500;transition:color .15s}
.n2-menu a:hover,.n2-zaloguj:hover{color:#fff}
.n2-nav-prawo{display:flex;align-items:center;gap:max(20px,calc(26*var(--u)))}
.n2-btn-jasny{display:inline-flex;align-items:center;gap:.6em;height:max(40px,calc(30*var(--u)));padding:0 max(18px,calc(16*var(--u)));border-radius:999px;
  background:#e9eaee;color:#0e1428;font-weight:600;font-size:max(14px,calc(8.6*var(--u)));transition:background .2s}
.n2-btn-jasny:hover{background:#fff}
.n2-burger{display:none}

/* ---------- hero ---------- */
.n2-hero{position:relative;background:radial-gradient(ellipse 60% 70% at 72% 60%,#0b1733 0%,var(--noc) 70%);overflow:hidden;
  min-height:calc(505*var(--u))}
.n2-hero-linia{position:absolute;top:0;right:0;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(118deg,transparent 49.8%,rgba(160,180,230,.12) 50%,transparent 50.4%)}
.n2-hero-rzezba{position:absolute;left:calc(50% - 150*var(--u));top:calc(105*var(--u));width:calc(740*var(--u));z-index:1}
.n2-hero-rzezba img{transform:rotate(-30deg);filter:brightness(.82) saturate(.92)}
.n2-hero-rzezba img{width:100%;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
.n2-hero-uklad{position:relative;z-index:2;min-height:calc(505*var(--u))}
.n2-hero-tekst{padding-top:calc(50*var(--u));padding-bottom:calc(36*var(--u));max-width:calc(500*var(--u))}
.n2-hero .n2-tytul{margin-top:calc(22*var(--u));font-size:max(40px,calc(53*var(--u)));line-height:.98;letter-spacing:-.04em;display:flex;flex-direction:column}
.n2-h1-a{font-weight:400;color:#d9dce4}
.n2-h1-b{font-weight:700;color:#fff;padding-left:.27em}
.n2-h1-c{font-weight:400;color:#aeb5c3;white-space:nowrap}
.n2-hero-lead{margin-top:calc(24*var(--u));max-width:calc(345*var(--u));min-width:min(100%,360px);color:#c9ced9;font-size:max(15px,calc(10.3*var(--u)));line-height:1.55}
.n2-hero-akcje{margin-top:calc(30*var(--u));display:flex;align-items:center;gap:calc(25*var(--u));flex-wrap:wrap}
.n2-film{display:flex;align-items:center;gap:calc(13*var(--u));background:none;border:0;color:#fff;font:inherit;cursor:pointer;text-align:left;padding:0}
.n2-film-kolo{width:max(46px,calc(38*var(--u)));height:max(46px,calc(38*var(--u)));border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.n2-film:hover .n2-film-kolo{border-color:#fff;background:rgba(255,255,255,.06)}
.n2-film-kolo svg{width:40%;height:40%}
.n2-film b{display:block;font-size:max(14px,calc(9*var(--u)));font-weight:600}
.n2-film small{display:block;font-size:max(11px,calc(7*var(--u)));color:#7d8597}
.n2-hero-dowod{margin-top:calc(55*var(--u));display:flex;align-items:center;gap:calc(18*var(--u));color:#b8bfcd;font-size:max(13px,calc(8.5*var(--u)))}
.n2-awatary{display:flex}
.n2-awatary i{width:max(34px,calc(26*var(--u)));height:max(34px,calc(26*var(--u)));border-radius:50%;border:2px solid var(--noc);display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:.8em;font-weight:700;background:#e9dbd0;color:#5c3a20}
.n2-awatary i + i{margin-left:-.55em}
.n2-awatary i:nth-child(2){background:#d8deea;color:#26314f}
.n2-awatary i:nth-child(3){background:#dfe8dc;color:#38513a}

.n2-hero-bok{position:absolute;inset:0;pointer-events:none;color:#7f879a}
.n2-hasla{position:absolute;left:calc(778*var(--u));top:calc(115*var(--u));display:flex;flex-direction:column;
  font-size:max(10px,calc(6.6*var(--u)));letter-spacing:.32em;text-transform:uppercase;line-height:2.1}
.n2-numery{position:absolute;right:calc(18*var(--u));top:calc(128*var(--u));display:flex;flex-direction:column;align-items:center;font-size:max(10px,calc(7*var(--u)));font-weight:600}
.n2-numery li{height:calc(27*var(--u))}
.n2-numery li.akt{color:#fff;height:auto}
.n2-numery li.akt::after{content:"";display:block;width:1px;height:calc(112*var(--u));background:linear-gradient(#cfd5e2,rgba(207,213,226,.2));margin:calc(10*var(--u)) auto calc(14*var(--u))}
.n2-skos{position:absolute;left:calc(540*var(--u));top:calc(340*var(--u));transform:rotate(-14deg);
  color:#e4e7ee;font-size:max(12px,calc(11*var(--u)));letter-spacing:.32em;text-transform:uppercase;line-height:1.75;font-weight:400}
.n2-skos::after{content:"";position:absolute;left:calc(30*var(--u));top:calc(100% + 10*var(--u));width:1px;height:calc(90*var(--u));background:rgba(228,231,238,.35);transform:rotate(14deg);transform-origin:top}
.n2-przewin{position:absolute;right:0;bottom:calc(36*var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--u));color:#dfe3ec;font-size:max(12px,calc(8*var(--u)));pointer-events:auto}
.n2-przewin svg{width:max(18px,calc(14*var(--u)));height:max(18px,calc(14*var(--u)))}

/* ---------- pas technologii ---------- */
.n2-tech{background:var(--krem);border-bottom:1px solid #ebe6e1}
.n2-tech .n2-wrap{min-height:calc(110*var(--u));display:flex;align-items:center;gap:calc(26*var(--u))}
.n2-tech-loga{flex:1;display:flex;align-items:center;justify-content:space-around;gap:calc(20*var(--u))}
.n2-tech-loga a{display:flex;align-items:center;gap:.55em;color:#6d7384;font-weight:600;font-size:max(14px,calc(10.5*var(--u)));letter-spacing:-.01em;transition:color .2s}
.n2-tech-loga img{width:auto;height:max(24px,calc(18*var(--u)));flex:none;filter:grayscale(1);opacity:.6;transition:opacity .2s,filter .2s}
.n2-tech-loga a:hover{color:var(--tekst)}
.n2-tech-loga a:hover img{filter:none;opacity:1}
.n2-tech-wiecej{display:flex;align-items:center;gap:.8em;white-space:nowrap}

/* ---------- dlaczego ---------- */
.n2-dlaczego{background:#f2eeea;padding:calc(38*var(--u)) 0 calc(60*var(--u))}
.n2-dlaczego .n2-wrap{display:grid;grid-template-columns:calc(290*var(--u)) 1fr;gap:calc(10*var(--u)) calc(50*var(--u));align-items:start}
.n2-dlaczego-tekst h2{margin-top:calc(16*var(--u))}
.n2-dlaczego-tekst p{margin-top:calc(16*var(--u));color:var(--tekst-2);font-size:max(14px,calc(9*var(--u)));max-width:calc(260*var(--u))}
.n2-dlaczego-tekst .n2-btn-ciemny{margin-top:calc(30*var(--u))}
.n2-korzysci{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(13*var(--u));margin-top:calc(-8*var(--u))}
.n2-korzysc{background:var(--karta);border:1px solid rgba(17,22,42,.05);border-radius:calc(12*var(--u));padding:calc(20*var(--u)) calc(17*var(--u)) calc(24*var(--u));min-height:calc(175*var(--u));
  box-shadow:0 calc(12*var(--u)) calc(30*var(--u)) calc(-18*var(--u)) rgba(17,22,42,.12);transition:transform .3s,box-shadow .3s}
.n2-korzysc:hover{transform:translateY(-4px);box-shadow:0 calc(20*var(--u)) calc(40*var(--u)) calc(-18*var(--u)) rgba(17,22,42,.2)}
.n2-ikona{display:flex;width:max(40px,calc(32*var(--u)));height:max(40px,calc(32*var(--u)));border-radius:calc(8*var(--u));background:#ecebfb;color:var(--indygo);align-items:center;justify-content:center}
.n2-ikona svg{width:60%;height:60%}
.n2-ikona--pomarancz{background:none;color:var(--pomarancz);justify-content:flex-start}
.n2-ikona--pomarancz svg{width:75%;height:75%}
.n2-korzysc h3{margin-top:calc(26*var(--u));font-size:max(16px,calc(12.5*var(--u)));font-weight:500;line-height:1.25;letter-spacing:-.01em}
.n2-korzysc p{margin-top:calc(14*var(--u));font-size:max(13px,calc(8.4*var(--u)));color:var(--szary);line-height:1.5}

/* ---------- hosting + domeny ---------- */
.n2-hosting{background:linear-gradient(180deg,var(--krem-2),#f1edea)}
.n2-hosting .n2-wrap{display:grid;grid-template-columns:calc(285*var(--u)) calc(310*var(--u)) 1fr;align-items:center;min-height:calc(330*var(--u))}
.n2-hosting-tekst h2,.n2-dev-tekst h2{margin-top:calc(18*var(--u));font-size:max(30px,calc(28*var(--u)))}
.n2-hosting-tekst p,.n2-dev-tekst p{margin-top:calc(16*var(--u));color:#5a6072;font-size:max(14px,calc(9*var(--u)));line-height:1.65}
.n2-hosting-tekst .n2-link,.n2-dev-tekst .n2-link{margin-top:calc(22*var(--u))}
.n2-hosting-obraz{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0 calc(-10*var(--u))}
.n2-hosting-obraz img,.n2-dev-obraz img{mix-blend-mode:darken;width:100%;height:auto}
.n2-domeny{background:rgba(255,255,255,.6);border-radius:calc(14*var(--u));padding:calc(30*var(--u));margin-left:calc(10*var(--u));
  box-shadow:0 calc(20*var(--u)) calc(50*var(--u)) calc(-30*var(--u)) rgba(17,22,42,.18)}
.n2-domeny h3{margin-top:calc(12*var(--u));font-size:max(22px,calc(20*var(--u)));font-weight:500;line-height:1.15;letter-spacing:-.02em}
.n2-domeny > p{margin-top:calc(10*var(--u));font-size:max(13px,calc(8.4*var(--u)));color:var(--szary)}
.n2-domena{margin-top:calc(20*var(--u));display:flex;align-items:center;background:#fff;border-radius:999px;height:max(48px,calc(32*var(--u)));padding:0 calc(4*var(--u)) 0 calc(14*var(--u));
  box-shadow:0 1px 2px rgba(17,22,42,.06),inset 0 0 0 1px rgba(17,22,42,.06)}
.n2-domena input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:max(15px,calc(8.6*var(--u)));color:var(--tekst)}
.n2-domena input::placeholder{color:#9aa0ae}
.n2-domena button{width:max(40px,calc(26*var(--u)));height:max(40px,calc(26*var(--u)));border-radius:50%;border:0;background:var(--pomarancz);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 0 calc(16*var(--u)) rgba(255,106,26,.5)}
.n2-domena button svg{width:50%;height:50%}
.n2-tld{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(10*var(--u));margin-top:calc(20*var(--u))}
.n2-tld b{display:block;font-size:max(16px,calc(12*var(--u)));font-weight:600}
.n2-tld span{display:block;font-size:max(14px,calc(9*var(--u)));margin-top:calc(2*var(--u))}
.n2-tld small{display:block;font-size:max(11px,calc(6.8*var(--u)));color:var(--szary);line-height:1.3}
.n2-link--ciemny{margin-top:calc(22*var(--u))}

/* ---------- programisci + opinie ---------- */
.n2-dev{background:var(--krem);padding:calc(10*var(--u)) 0 calc(40*var(--u))}
.n2-dev .n2-wrap{display:grid;grid-template-columns:calc(290*var(--u)) calc(300*var(--u)) 1fr;align-items:center;min-height:calc(260*var(--u))}
.n2-dev-obraz{position:relative;align-self:stretch;display:flex;align-items:center}
.n2-dev-obraz img{width:78%}
.n2-skos--ciemny{left:auto;right:calc(20*var(--u));top:calc(20*var(--u));color:#5d6375;font-size:max(11px,calc(8*var(--u)))}
.n2-skos--ciemny::after{background:rgba(93,99,117,.35);height:calc(50*var(--u))}
.n2-opinie{position:relative;background:rgba(255,255,255,.6);border-radius:calc(14*var(--u));padding:calc(28*var(--u)) calc(30*var(--u)) calc(26*var(--u));margin-left:calc(40*var(--u));min-height:calc(200*var(--u));
  box-shadow:0 calc(20*var(--u)) calc(50*var(--u)) calc(-30*var(--u)) rgba(17,22,42,.18)}
.n2-cudzyslow{display:block;font-size:max(48px,calc(44*var(--u)));line-height:.6;color:#a8adb9;font-family:Georgia,serif;height:calc(26*var(--u))}
.n2-opinia{display:none}
.n2-opinia.akt{display:block}
.n2-opinia blockquote{font-size:max(15px,calc(10*var(--u)));line-height:1.55;color:var(--tekst)}
.n2-opinia figcaption{display:flex;align-items:center;gap:calc(12*var(--u));margin-top:calc(22*var(--u))}
.n2-opinia figcaption i{width:max(38px,calc(26*var(--u)));height:max(38px,calc(26*var(--u)));border-radius:50%;background:#0e1428;color:#fff;font-style:normal;font-weight:600;font-size:.8em;display:flex;align-items:center;justify-content:center;flex:none}
.n2-opinia figcaption span{font-size:max(12px,calc(7.6*var(--u)));color:var(--szary)}
.n2-opinia figcaption b{display:block;font-size:max(14px,calc(8.6*var(--u)));color:var(--tekst);font-weight:600}
.n2-kropki{position:absolute;right:calc(26*var(--u));bottom:calc(16*var(--u));display:flex;gap:calc(6*var(--u))}
.n2-kropki button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:#c8ccd5;cursor:pointer}
.n2-kropki button.akt{background:#11162a}

/* ---------- cennik ---------- */
.n2-cennik{background:#f2eeea;padding:calc(80*var(--u)) 0}
.n2-naglowek{text-align:center;max-width:calc(560*var(--u));margin:0 auto calc(44*var(--u))}
.n2-naglowek h2{margin-top:calc(16*var(--u))}
.n2-naglowek p{margin-top:calc(14*var(--u));color:#5a6072}
.n2-plany{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16*var(--u));align-items:stretch}
.n2-plan{position:relative;background:var(--karta);border:1px solid rgba(17,22,42,.06);border-radius:calc(16*var(--u));padding:calc(30*var(--u));display:flex;flex-direction:column}
.n2-plan h3{font-size:max(18px,calc(13*var(--u)));font-weight:600}
.n2-cena{margin-top:calc(14*var(--u));font-size:max(40px,calc(34*var(--u)));font-weight:600;letter-spacing:-.04em;line-height:1}
.n2-cena small{font-size:.4em;font-weight:500;letter-spacing:0;color:var(--szary)}
.n2-msc{margin-top:calc(8*var(--u));color:var(--szary);font-size:max(13px,calc(8.4*var(--u)))}
.n2-plan ul{margin-top:calc(24*var(--u));padding-top:calc(22*var(--u));border-top:1px solid rgba(17,22,42,.08);display:flex;flex-direction:column;gap:calc(11*var(--u));flex:1}
.n2-plan li{position:relative;padding-left:1.9em;font-size:max(14px,calc(8.8*var(--u)));color:var(--tekst-2)}
.n2-plan li::before{content:"";position:absolute;left:0;top:.3em;width:1.1em;height:1.1em;border-radius:50%;
  background:#ffe9dc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a1a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat}
.n2-plan li.brak{color:#9aa0ae}
.n2-plan li.brak::before{background:#ebe8e5 linear-gradient(#9aa0ae,#9aa0ae) center/45% 1.5px no-repeat}
.n2-plan-btn{margin-top:calc(26*var(--u));height:max(48px,calc(36*var(--u)));border-radius:999px;border:1px solid #11162a;display:flex;align-items:center;justify-content:center;gap:.6em;font-weight:600;font-size:max(14px,calc(9*var(--u)));transition:background .2s,color .2s}
.n2-plan-btn:hover{background:#11162a;color:#fff}
.n2-plan--wyr{background:radial-gradient(ellipse 80% 60% at 100% 0%,rgba(255,106,26,.28),transparent 60%),linear-gradient(160deg,#0b1428,#040b17);color:#fff;border:0;
  box-shadow:0 calc(30*var(--u)) calc(60*var(--u)) calc(-30*var(--u)) rgba(4,11,23,.6)}
.n2-plan--wyr .n2-cena small,.n2-plan--wyr .n2-msc{color:#9aa3b6}
.n2-plan--wyr ul{border-top-color:rgba(255,255,255,.12)}
.n2-plan--wyr li{color:#d9dde7}
.n2-plan--wyr li::before{background-color:rgba(255,106,26,.16)}
.n2-plan--wyr .n2-plan-btn{background:var(--pomarancz);border-color:var(--pomarancz);color:#fff;box-shadow:0 0 calc(24*var(--u)) rgba(255,106,26,.45)}
.n2-plan--wyr .n2-plan-btn:hover{background:var(--pomarancz-2)}
.n2-plakietka{position:absolute;top:calc(22*var(--u));right:calc(22*var(--u));font-size:max(11px,calc(7*var(--u)));letter-spacing:.2em;text-transform:uppercase;color:#ffb488;font-weight:600}
.n2-link--srodek{display:flex;width:max-content;margin:calc(30*var(--u)) auto 0}

/* ---------- o mnie ---------- */
.n2-omnie{background:var(--krem);padding:calc(80*var(--u)) 0}
.n2-omnie .n2-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:calc(60*var(--u));align-items:center}
.n2-omnie-foto{position:relative;aspect-ratio:1/1.02;max-width:calc(400*var(--u));width:100%;justify-self:center}
.n2-omnie-kolo{position:absolute;left:4%;right:4%;top:10%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 70% 80%,rgba(255,106,26,.55),transparent 55%),radial-gradient(circle at 40% 40%,#14254a,#040b17 75%)}
.n2-omnie-zdjecie{position:absolute;left:7%;bottom:0;width:86%;height:auto;}
.n2-omnie-podpis{position:absolute;left:0;bottom:10%;background:#fff;border-radius:calc(12*var(--u));padding:calc(12*var(--u)) calc(18*var(--u));box-shadow:0 20px 40px -16px rgba(17,22,42,.35)}
.n2-omnie-podpis b{display:block;font-size:max(15px,calc(10*var(--u)))}
.n2-omnie-podpis span{color:var(--szary);font-size:max(13px,calc(8*var(--u)))}
.n2-omnie h2{margin-top:calc(16*var(--u));font-size:max(34px,calc(36*var(--u)))}
.n2-omnie-lead{margin-top:calc(12*var(--u));font-size:max(18px,calc(13*var(--u)));font-weight:600}
.n2-omnie-tekst > p:not(.n2-omnie-lead){margin-top:calc(16*var(--u));color:var(--tekst-2);line-height:1.7;max-width:calc(440*var(--u))}
.n2-punkty{display:flex;flex-wrap:wrap;gap:calc(10*var(--u)) calc(24*var(--u));margin-top:calc(22*var(--u));font-weight:600;font-size:max(14px,calc(9*var(--u)))}
.n2-punkty li{position:relative;padding-left:1.8em}
.n2-punkty li::before{content:"";position:absolute;left:0;top:.2em;width:1.25em;height:1.25em;border-radius:50%;
  background:var(--pomarancz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/60% no-repeat}
.n2-omnie-akcje{margin-top:calc(28*var(--u))}

/* ---------- faq ---------- */
.n2-faq{background:#f2eeea;padding:calc(80*var(--u)) 0}
.n2-faq-uklad{display:grid;grid-template-columns:calc(300*var(--u)) 1fr;gap:calc(60*var(--u));align-items:start}
.n2-faq-uklad > div:first-child h2{margin-top:calc(16*var(--u))}
.n2-faq-uklad > div:first-child p{margin-top:calc(14*var(--u));color:#5a6072}
.n2-faq-uklad a{color:var(--pomarancz-2);font-weight:600}
.n2-faq-lista{display:flex;flex-direction:column;gap:calc(8*var(--u))}
.n2-faq-lista details{background:var(--karta);border:1px solid rgba(17,22,42,.06);border-radius:calc(12*var(--u))}
.n2-faq-lista summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(16*var(--u)) calc(20*var(--u));font-weight:500;font-size:max(15px,calc(10*var(--u)))}
.n2-faq-lista summary::-webkit-details-marker{display:none}
.n2-faq-lista summary::after{content:"";width:12px;height:12px;flex:none;transition:transform .25s;
  background:linear-gradient(#11162a,#11162a) center/100% 1.5px no-repeat,linear-gradient(#11162a,#11162a) center/1.5px 100% no-repeat}
.n2-faq-lista details[open] summary::after{transform:rotate(45deg)}
.n2-faq-lista details p{padding:0 calc(20*var(--u)) calc(18*var(--u));color:#5a6072;line-height:1.7}

/* ---------- cta + stopka ---------- */
.n2-cta{background:#f2eeea;padding:calc(30*var(--u)) 0 calc(56*var(--u))}
.n2-cta-karta{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr calc(310*var(--u));align-items:center;gap:calc(40*var(--u));
  width:min(calc(980*var(--u)),100% - 32px);min-height:calc(420*var(--u));padding:calc(40*var(--u)) calc(30*var(--u)) calc(40*var(--u)) calc(60*var(--u));border-radius:calc(22*var(--u));
  background:radial-gradient(ellipse 45% 70% at 76% 50%,rgba(255,106,26,.36),transparent 70%),linear-gradient(135deg,#0b1430,#060d20 60%,#0a1330);box-shadow:0 calc(30*var(--u)) calc(60*var(--u)) rgba(10,18,40,.18)}
.n2-cta-karta::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:calc(40*var(--u)) calc(40*var(--u));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000);mask-image:linear-gradient(90deg,transparent,#000 40%,#000)}
.n2-cta .n2-etykieta{color:var(--pomarancz);font-size:max(12px,calc(10.5*var(--u)));font-weight:700;letter-spacing:.36em}
.n2-cta h2{margin-top:calc(14*var(--u));max-width:11ch;color:#fff;font-size:max(38px,calc(56*var(--u)));line-height:1.04;font-weight:400;letter-spacing:-.035em}
.n2-cta-lead{margin-top:calc(18*var(--u));color:#aeb5c3;font-size:max(17px,calc(14*var(--u)))}
.n2-cta-plusy{display:flex;flex-wrap:wrap;gap:calc(10*var(--u)) calc(30*var(--u));margin-top:calc(24*var(--u));padding:0;list-style:none}
.n2-cta-plusy li{display:flex;align-items:center;gap:.6em;color:#e7eaf1;font-size:max(15px,calc(12.5*var(--u)))}
.n2-cta-plusy li::before{content:"";flex:none;width:1.6em;height:1.6em;border:2.5px solid var(--pomarancz);border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/62% no-repeat}
.n2-cta-przyciski{display:flex;flex-wrap:wrap;gap:calc(16*var(--u));margin-top:calc(30*var(--u))}
.n2-cta .n2-btn,.n2-cta .n2-cta-obrys{height:max(52px,calc(46*var(--u)));padding:0 max(28px,calc(36*var(--u)));font-size:max(16px,calc(12*var(--u)))}
.n2-cta-obrys{display:inline-flex;align-items:center;height:max(48px,calc(38*var(--u)));padding:0 max(24px,calc(27*var(--u)));border-radius:999px;border:1.5px solid rgba(255,255,255,.75);
  color:#fff;font-weight:600;font-size:max(15px,calc(9*var(--u)));transition:background .2s,border-color .2s}
.n2-cta-obrys:hover{background:rgba(255,255,255,.08);border-color:#fff}
.n2-cta-drobne{margin-top:calc(18*var(--u));color:#8790a3;font-size:max(13px,calc(10.5*var(--u)))}
.n2-cta-box{width:100%;height:auto;filter:drop-shadow(0 0 calc(40*var(--u)) rgba(255,106,26,.45))}
.n2-stopka{background:var(--noc);border-top:1px solid rgba(255,255,255,.07);padding:calc(44*var(--u)) 0 calc(26*var(--u));color:#aeb5c3}
.n2-stopka-gora{display:flex;justify-content:space-between;gap:40px;padding-bottom:calc(30*var(--u));border-bottom:1px solid rgba(255,255,255,.08)}
.n2-stopka-kolumny{display:grid;grid-template-columns:repeat(6,minmax(110px,calc(110*var(--u))));gap:20px}
.n2-stopka h4{margin:0 0 12px;font-size:max(14px,calc(8.6*var(--u)));color:#7d8597;font-weight:700}
.n2-stopka li{line-height:2;font-size:max(14px,calc(8.6*var(--u)))}
.n2-stopka li a:hover{color:#fff}
.n2-stopka-dol{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:calc(20*var(--u));font-size:max(12px,calc(7.6*var(--u)));color:#7d8597}
.n2-stopka-dol a{color:#c9cfdb;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
.n2-stopka-dol a:hover{color:#fff}
/* Pelna stopka (P1, 2026-10-10): opis pod logo, kontakt, oficjalne kanaly */
.n2-stopka-marka{max-width:300px;flex:none}
.n2-stopka-opis{margin-top:16px;font-size:max(14px,calc(8.4*var(--u)));line-height:1.6;color:#aeb5c3}
.n2-stopka-kontakt{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.n2-stopka-kontakt li{display:flex;align-items:center;gap:10px;line-height:1.4}
.n2-stopka-kontakt svg{width:18px;height:18px;flex:none;color:var(--pomarancz)}
.n2-stopka-kontakt a{color:#e4e8f1}
.n2-stopka-kontakt a:hover{color:#fff}
.n2-stopka-kanaly{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.n2-stopka-kanaly a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid rgba(255,255,255,.18);border-radius:99px;
  font-size:13px;color:#e4e8f1;transition:border-color .15s,color .15s}
.n2-stopka-kanaly a:hover{border-color:var(--pomarancz);color:#fff}
.n2-stopka-kanaly svg{width:15px;height:15px}
.n2-stopka h4{color:#fff}

/* okno filmu */
.n2-okno-filmu{padding:0;border:0;border-radius:16px;background:#000;width:min(960px,92vw);overflow:visible}
.n2-okno-filmu::backdrop{background:rgba(4,11,23,.85);backdrop-filter:blur(4px)}
.n2-okno-filmu video{display:block;width:100%;border-radius:16px}
.n2-zamknij{position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#11162a;font-size:22px;line-height:1;cursor:pointer}

/* ---------- tablet i telefon ---------- */
@media (max-width:1100px){
  .n2-menu{gap:18px;margin-left:24px}
  .n2-menu a:nth-child(n+6){display:none}
}
@media (max-width:899px){
  .n2{--u:calc(100vw / 620)}
  .n2-menu,.n2-zaloguj{display:none}
  .n2-nav .n2-wrap{justify-content:space-between}
  .n2-burger{display:flex;width:42px;height:42px;align-items:center;justify-content:center;color:#fff;background:none;border:0}
  .n2-burger svg{width:24px;height:24px}
  .n2-menu-mob{display:none;background:var(--noc);padding:4px 20px 16px}
  .n2-menu-mob.otwarte{display:block}
  .n2-menu-mob a{display:block;color:#dfe3ec;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px}
  .n2-hero-bok{display:none}
  .n2-hero-rzezba{left:auto;right:-30%;top:0;width:95%;opacity:.55}
  .n2-hero-tekst{max-width:none;padding-top:40px}
  .n2-h1-c{white-space:normal}
  .n2-tech .n2-wrap{flex-wrap:wrap;padding:24px 0;gap:16px}
  .n2-tech-loga{flex-basis:100%;flex-wrap:wrap;justify-content:center;gap:12px 20px;order:3}
  .n2-tech-loga{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;row-gap:14px}
  .n2-tech-loga a{font-size:14px}
  .n2-dlaczego .n2-wrap,.n2-hosting .n2-wrap,.n2-dev .n2-wrap,.n2-omnie .n2-wrap,.n2-faq-uklad,.n2-cta-karta{grid-template-columns:1fr}
  .n2-korzysci{grid-template-columns:1fr 1fr;margin-top:20px}
  .n2-dlaczego-tekst p{max-width:none}
  .n2-hosting .n2-wrap,.n2-dev .n2-wrap{padding:40px 0;gap:20px}
  .n2-hosting-obraz,.n2-dev-obraz{max-width:380px;justify-self:center}
  .n2-domeny,.n2-opinie{margin-left:0}
  .n2-plany{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .n2-plan--wyr{order:-1}
  .n2-omnie-foto{max-width:400px}
  .n2-cta-karta{padding:40px 24px 10px;border-radius:18px}
  .n2-cta-box{max-width:240px;justify-self:center}
  .n2-cta-plusy{flex-direction:column}
  .n2-stopka-gora{flex-direction:column}
  .n2-stopka-kolumny{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px) and (min-width:900px){.n2-stopka-kolumny{grid-template-columns:repeat(3,minmax(110px,1fr))}}
@media (max-width:520px){
  .n2-korzysci{grid-template-columns:1fr}
  .n2-btn-jasny{padding:0 14px}
  .n2-tld{grid-template-columns:1fr 1fr;row-gap:14px}
  .n2-hero-dowod{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.n2 *{transition:none !important}}

/* ---------- scena hosting -> programisci ----------
   Bez animacji (telefon, reduced-motion, brak JS) kazdy element ma swoje pole w siatce:
   dwa rzedy jak dwie zwykle sekcje. Klasa .n2-scena--3d (dodaje JS na komputerze)
   naklada warstwy na siebie, a urzadzenie i bloki staja sie dwiema stronami jednej karty. */
.n2-scena{background:linear-gradient(180deg,var(--krem-2),var(--krem));padding:calc(20*var(--u)) 0}
.n2-scena-uklad{display:grid;grid-template-columns:calc(290*var(--u)) calc(300*var(--u)) 1fr;
  grid-template-areas:"ta oa ka" "tb ob kb";align-items:center;row-gap:calc(30*var(--u))}
.n2-scena-kol,.n2-karta3d{display:contents}
.n2-hosting-tekst{grid-area:ta}
.n2-dev-tekst{grid-area:tb}
.n2-strona-a{grid-area:oa}
.n2-strona-b{grid-area:ob;width:78% !important;justify-self:center}
.n2-scena-obiekt .n2-skos{display:none}
.n2-domeny{grid-area:ka}
.n2-opinie{grid-area:kb}
.n2-scena-obiekt img{width:100%;height:auto;mix-blend-mode:darken}

.n2-scena--3d{padding:0;background:var(--krem-2)}
.n2-scena--3d .n2-scena-uklad{grid-template-areas:none;min-height:100vh;row-gap:0}
.n2-scena--3d .n2-scena-kol{display:grid;position:relative;align-items:center}
.n2-scena--3d .n2-scena-kol > *{grid-area:1/1}
.n2-scena--3d .n2-scena-obiekt{perspective:1400px;align-self:stretch}
.n2-scena--3d .n2-scena-obiekt .n2-skos{display:block;position:absolute;left:auto;right:0;top:18%}
.n2-scena--3d .n2-karta3d{display:block;position:relative;width:100%;aspect-ratio:1;transform-style:preserve-3d}
.n2-scena--3d .n2-karta3d img{position:absolute;inset:0;width:100% !important;backface-visibility:hidden;-webkit-backface-visibility:hidden;mix-blend-mode:normal}
.n2-scena--3d .n2-karta3d img{-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent);mask-image:radial-gradient(closest-side,#000 78%,transparent)}
.n2-scena--3d .n2-strona-b{transform:rotateY(180deg)}
.n2-scena--3d .n2-karta3d::after{content:"";position:absolute;left:15%;right:15%;bottom:4%;height:8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(17,22,42,.22),transparent);transform:translateZ(-60px) rotateX(80deg);pointer-events:none}

@media (max-width:899px){
  .n2-scena-uklad{grid-template-columns:1fr;grid-template-areas:"ta" "oa" "ka" "tb" "ob" "kb";row-gap:24px;padding:30px 0}
  .n2-strona-a,.n2-strona-b{max-width:360px;justify-self:center}
}

/* ---------- druga sekcja: domeny (wizualizacja 2026-10-05-wizualizacja-pas-domen.png) ---------- */
.n2-pas-domen{background:var(--krem);padding:calc(52*var(--u)) 0 calc(56*var(--u));border-bottom:1px solid #ebe6e1}
.n2-pas-nag{text-align:center}
.n2-pas-nag h2{margin-top:calc(14*var(--u));font-size:max(32px,calc(36*var(--u)));font-weight:500;letter-spacing:-.03em}
.n2-pas-nag p{margin-top:calc(10*var(--u));color:#6a7082;font-size:max(15px,calc(12.5*var(--u)))}
.n2-pas-szukaj{margin:calc(30*var(--u)) auto 0;width:min(calc(840*var(--u)),100%);display:flex;align-items:center;height:max(60px,calc(64*var(--u)));background:#fff;border-radius:999px;
  padding:0 calc(8*var(--u)) 0 calc(26*var(--u));box-shadow:0 calc(18*var(--u)) calc(44*var(--u)) calc(-20*var(--u)) rgba(17,22,42,.25),0 0 0 1px rgba(17,22,42,.05);transition:box-shadow .2s}
.n2-pas-szukaj:focus-within{box-shadow:0 calc(18*var(--u)) calc(44*var(--u)) calc(-20*var(--u)) rgba(17,22,42,.3),0 0 0 2px rgba(255,106,26,.5)}
.n2-pas-szukaj svg{width:max(22px,calc(22*var(--u)));height:max(22px,calc(22*var(--u)));color:var(--tekst);flex:none}
.n2-pas-szukaj input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:max(16px,calc(13.5*var(--u)));color:var(--tekst);padding:0 calc(20*var(--u))}
.n2-pas-szukaj input::placeholder{color:#8a90a0}
.n2-pas-szukaj button{height:calc(100% - 14px);padding:0 max(26px,calc(40*var(--u)));border:0;border-radius:999px;background:var(--pomarancz);color:#fff;font:inherit;font-weight:600;font-size:max(15px,calc(13.5*var(--u)));cursor:pointer;
  box-shadow:0 0 calc(24*var(--u)) rgba(255,106,26,.45);transition:background .2s}
.n2-pas-szukaj button:hover{background:var(--pomarancz-2)}
.n2-pas-ceny{margin:calc(26*var(--u)) auto 0;width:min(calc(900*var(--u)),100%);display:grid;grid-template-columns:repeat(5,1fr);gap:calc(14*var(--u))}
.n2-pas-cena{position:relative;background:rgba(255,255,255,.7);border:1px solid rgba(17,22,42,.06);border-radius:calc(14*var(--u));padding:calc(20*var(--u)) calc(16*var(--u)) calc(16*var(--u));text-align:center;
  transition:transform .25s,box-shadow .25s}
.n2-pas-cena:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(17,22,42,.3)}
.n2-pas-cena b{display:block;font-size:max(20px,calc(19*var(--u)));font-weight:600}
.n2-pas-cena span:not(.n2-pas-znaczek){display:block;margin-top:calc(4*var(--u));font-size:max(16px,calc(14*var(--u)))}
.n2-pas-cena small{display:block;margin-top:calc(4*var(--u));color:var(--szary);font-size:max(11px,calc(8.5*var(--u)))}
.n2-pas-cena.wyr{border:1.5px solid var(--pomarancz);background:#fff}
.n2-pas-znaczek{position:absolute;top:calc(-10*var(--u));left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--pomarancz);color:#fff;font-size:max(10px,calc(8*var(--u)));font-weight:600;border-radius:999px;padding:calc(3*var(--u)) calc(10*var(--u))}
@media (max-width:899px){
  .n2-pas-ceny{grid-template-columns:repeat(3,1fr);row-gap:20px}
}
@media (max-width:520px){
  .n2-pas-ceny{grid-template-columns:1fr 1fr}
  .n2-pas-szukaj{padding-left:16px}
  .n2-pas-szukaj svg{display:none}
}

/* portret przyciety do kola w dolnej polowie (rece nie wystaja), glowa wychodzi ponad kolo */
.n2-omnie-maska{position:absolute;inset:-25% 0 0 0;-webkit-mask-image:radial-gradient(ellipse 46% 36.08% at 50% 64.08%,#000 99.4%,transparent 100%),linear-gradient(#000 0 64%,transparent 64%);mask-image:radial-gradient(ellipse 46% 36.08% at 50% 64.08%,#000 99.4%,transparent 100%),linear-gradient(#000 0 64%,transparent 64%)}
.n2-box-lista{margin-top:calc(18*var(--u));display:flex;flex-direction:column;gap:calc(12*var(--u))}
.n2-box-lista li{position:relative;padding-left:calc(30*var(--u));min-height:22px}
.n2-box-lista li::before{content:"";position:absolute;left:0;top:.15em;width:max(18px,calc(18*var(--u)));height:max(18px,calc(18*var(--u)));border-radius:50%;
  background:#ffe9dc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a1a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/62% no-repeat}
.n2-box-lista b{display:block;font-size:max(15px,calc(10.5*var(--u)));font-weight:600}
.n2-box-lista span{display:block;font-size:max(13px,calc(8.6*var(--u)));color:var(--szary)}

/* ---------- slajdy w hero (01-04) ----------
   Wszystkie slajdy w jednej komorce siatki, wiec wysokosc hero sie nie zmienia.
   Bez JS widac tylko pierwszy. Kreska pod aktywnym numerem to pasek czasu do nastepnego. */
.n2-slajdy{display:grid}
.n2-slajd{grid-area:1/1;visibility:hidden;opacity:0}
.n2-slajd.akt{visibility:visible;opacity:1}
.n2-slajd .n2-btn{margin-top:calc(30*var(--u))}
.n2-hero-akcje{margin-top:calc(18*var(--u))}
.n2-numery{display:flex;flex-direction:column;align-items:center;pointer-events:auto}
.n2-numery button{background:none;border:0;padding:calc(4*var(--u)) calc(6*var(--u));font:inherit;font-size:max(11px,calc(7*var(--u)));font-weight:600;color:#7f879a;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:color .2s}
.n2-numery button:hover,.n2-numery button.akt{color:#fff}
.n2-numery button i{display:block;width:1px;height:0;background:rgba(207,213,226,.25);margin-top:calc(8*var(--u));overflow:hidden;transition:height .5s ease}
.n2-numery button.akt i{height:calc(110*var(--u));margin-bottom:calc(10*var(--u))}
.n2-numery button i b{display:block;width:100%;height:0;background:#fff}
.n2-numery button:focus-visible{outline:2px solid var(--pomarancz);outline-offset:2px;border-radius:4px}

/* ---------- panel Saplo (wizualizacja 2026-10-05-wizualizacja-panel.png), zamiast sceny hosting->programisci ---------- */
.n2-panel-sekcja{position:relative;overflow:hidden;background:radial-gradient(ellipse 60% 45% at 50% 100%,rgba(255,106,26,.22),transparent 70%),var(--noc);color:#fff;padding:calc(56*var(--u)) 0 calc(56*var(--u))}
.n2-panel-sekcja::before,.n2-panel-sekcja::after{content:"";position:absolute;width:62%;height:80%;border-radius:50%;border:3px solid rgba(255,140,60,.95);box-shadow:0 0 40px 6px rgba(255,106,26,.7),inset 0 0 40px 6px rgba(255,106,26,.45);pointer-events:none}
.n2-panel-sekcja::before{display:none}
.n2-panel-sekcja > .n2-wrap{position:relative;z-index:1}
.n2-panel-sekcja::after{right:-36%;top:22%;z-index:0}
.n2-panel-nag{text-align:center;position:relative}
.n2-panel-nag h2{margin-top:calc(14*var(--u));color:#fff;font-size:max(34px,calc(46*var(--u)));font-weight:500;letter-spacing:-.035em}
.n2-panel-nag p{margin-top:calc(10*var(--u));color:#aeb5c4;font-size:max(15px,calc(14*var(--u)))}
.n2-panel-scena{position:relative;margin:calc(18*var(--u)) auto 0;width:calc(700*var(--u));font-size:calc(7.4*var(--u))}
.n2-panel-okno{background:#fff;border-radius:1.4em;overflow:hidden;color:var(--tekst);
  box-shadow:0 0 0 .25em rgba(255,128,48,.9),0 0 3em rgba(255,106,26,.7),0 0 9em rgba(255,106,26,.35),0 4em 8em -2em rgba(0,0,0,.7)}
.n2-panel-pasek{height:3.6em;display:flex;align-items:center;gap:.6em;padding:0 1.6em;background:#f1f2f6;border-bottom:1px solid #e5e7ec}
.n2-panel-pasek > i{width:1em;height:1em;border-radius:50%;background:#ef5b4c}
.n2-panel-pasek > i:nth-child(2){background:#f2b33d}
.n2-panel-pasek > i:nth-child(3){background:#3cc35a}
.n2-panel-pasek span{margin-left:2em;flex:1;max-width:60%;display:flex;align-items:center;gap:.5em;background:#fff;border-radius:.6em;padding:.45em 1em;font-size:1.05em;color:#4a5165}
.n2-panel-okno svg{width:1.5em;height:1.5em;flex:none}
.n2-panel-app{display:flex;min-height:44em}
.n2-panel-app aside{width:20em;flex:none;background:#fafafb;border-right:1px solid #eef0f3;padding:1.6em 0;display:flex;flex-direction:column;gap:.3em}
.n2-panel-app .logo{display:flex;align-items:center;gap:.4em;font-weight:800;font-size:2.4em;letter-spacing:-.04em;padding:0 .55em .6em}
.n2-panel-app .logo img{width:1.15em;height:1.15em}
.n2-panel-app .p{display:flex;align-items:center;gap:.9em;font-size:1.2em;white-space:nowrap;padding:.7em 1.3em;color:#3b4560}
.n2-panel-app .p.rozw::after{content:"";margin-left:auto;width:.45em;height:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-.15em);opacity:.6}
.n2-panel-app .p.akt{background:#fdeee4;color:var(--pomarancz);box-shadow:inset -.25em 0 0 var(--pomarancz)}
.n2-panel-app .prawa{flex:1;min-width:0;display:flex;flex-direction:column}
.n2-panel-app .gora{height:5em;display:flex;align-items:center;justify-content:flex-end;gap:1.3em;padding:0 2em;border-bottom:1px solid #eef0f3;font-size:1.1em;color:#3b4560}
.n2-panel-app .gora > span{display:flex;align-items:center;gap:.5em;border:1px solid #e3e5ea;border-radius:999px;padding:.4em 1em}
.n2-panel-app .gora .ja{border:0;padding:0}
.n2-panel-app .gora .ja i{font-style:normal;width:2.4em;height:2.4em;border-radius:50%;background:var(--pomarancz);color:#fff;font-size:.85em;font-weight:700;display:flex;align-items:center;justify-content:center}
.n2-panel-app .tresc{display:grid;grid-template-columns:1fr 21em;gap:1.4em;padding:1.8em 2em}
.n2-panel-app .box{background:#1c2540;color:#fff;border-radius:.8em;padding:1.4em 1.8em;display:flex;align-items:center;justify-content:space-between}
.n2-panel-app .box small{display:block;font-size:1.15em;color:#c3cbe0}
.n2-panel-app .box b{font-size:2.6em;font-weight:700;letter-spacing:-.02em}
.n2-panel-app .box > span{background:#22b35e;border-radius:999px;font-size:1.05em;padding:.5em 1.1em;font-weight:600}
.n2-panel-app .kafle{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;margin-top:1.2em}
.n2-panel-app .kafle > span{border:1px solid #eceef2;border-radius:.7em;padding:1.1em;display:flex;flex-direction:column}
.n2-panel-app .kafle i{width:3em;height:3em;border-radius:50%;background:#fdeee4;color:var(--pomarancz);display:flex;align-items:center;justify-content:center;margin-bottom:.8em}
.n2-panel-app .kafle b{font-size:1.12em;white-space:nowrap}
.n2-panel-app .kafle small{font-size:1.02em;color:var(--szary);line-height:1.3;margin-top:.2em}
.n2-panel-app .strony{margin-top:1.2em;border:1px solid #eceef2;border-radius:.7em;overflow:hidden}
.n2-panel-app .strony .nag{display:flex;justify-content:space-between;align-items:center;padding:1em 1.4em;background:#f6f7f9;font-size:1.25em}
.n2-panel-app .strony .nag a{color:var(--pomarancz);font-weight:600;font-size:.85em}
.n2-panel-app .strony > div:not(.nag){display:flex;align-items:center;gap:1.1em;padding:.9em 1.4em;border-top:1px solid #eef0f3}
.n2-panel-app .strony > div > span{flex:1}
.n2-panel-app .strony b{display:block;font-size:1.2em}
.n2-panel-app .strony small{display:block;font-size:1em;color:var(--szary)}
.n2-panel-app .strony em{font-style:normal;color:#4a5165;font-size:1.1em;display:flex;align-items:center;gap:.5em}
.n2-panel-app .strony em::before{content:"";width:.7em;height:.7em;border-radius:50%;background:#22b35e}
.n2-panel-app .dodaj{display:flex;align-items:center;gap:.5em;padding:.9em 1.4em;border-top:1px solid #eef0f3;color:var(--pomarancz);font-weight:600;font-size:1.15em}
.n2-panel-app .boczna{display:flex;flex-direction:column;gap:1.2em}
.n2-panel-app .boczna > div{border:1px solid #eceef2;border-radius:.7em;padding:1.3em}
.n2-panel-app .boczna b{display:flex;align-items:center;gap:.5em;font-size:1.25em}
.n2-panel-app .boczna p{display:flex;align-items:center;gap:.5em;margin-top:.7em;font-size:1.05em;color:var(--szary)}
.n2-panel-app .faktury p{color:#1e9e55}
.n2-panel-app .faktury a{display:block;text-align:center;margin-top:1em;padding-top:.9em;border-top:1px solid #eef0f3;font-size:1em}
.n2-panel-app .pole{display:block;margin-top:1em;border:1px solid #e3e5ea;border-radius:.6em;padding:.7em 1em;color:#9aa0ae;font-size:1.05em}
.n2-panel-app .btn{display:block;margin-top:.8em;background:#1c2540;color:#fff;text-align:center;border-radius:.6em;padding:.8em;font-weight:600;font-size:1.1em}
.n2-pk{position:absolute;display:flex;align-items:center;gap:1.2em;background:rgba(255,255,255,.96);color:var(--tekst);border-radius:1.4em;padding:1.5em 2.2em;width:auto;white-space:nowrap;font-size:1em;
  box-shadow:0 0 0 1px rgba(255,106,26,.25),0 0 3em rgba(255,106,26,.3),0 2em 4em -1em rgba(0,0,0,.6);z-index:2}
.n2-pk svg{width:3.4em;height:3.4em;color:var(--pomarancz);flex:none}
.n2-pk b{display:block;font-size:1.5em;font-weight:600}
.n2-pk small{display:block;font-size:1.3em;color:var(--szary)}
.n2-pk::after{content:"";position:absolute;right:1.4em;top:1.4em;width:.9em;height:.9em;border-radius:50%;background:#22b35e}
.n2-pk--1{left:-19%;top:6%;transform:rotate(-2deg)}
.n2-pk--2{right:-19%;top:18%;transform:rotate(2deg)}
.n2-pk--3{left:-20%;top:60%;transform:rotate(2deg)}
.n2-pk--4{right:-18%;top:63%;transform:rotate(-2deg)}
.n2-panel-kolumny{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(30*var(--u));margin:calc(50*var(--u)) auto 0;width:calc(780*var(--u))}
.n2-panel-kolumny > div{display:flex;gap:calc(18*var(--u));align-items:flex-start;color:#aeb5c4;font-size:max(14px,calc(11*var(--u)));line-height:1.45}
.n2-panel-kolumny svg{width:max(30px,calc(32*var(--u)));height:max(30px,calc(32*var(--u)));color:var(--pomarancz);flex:none}
.n2-panel-kolumny b{display:block;color:#fff;font-size:max(17px,calc(15*var(--u)));font-weight:600;margin-bottom:calc(4*var(--u))}
.n2-opinie-pas{background:var(--krem);padding:calc(50*var(--u)) 0}
.n2-opinie-pas .n2-opinie{max-width:calc(560*var(--u));margin:0 auto}
@media (max-width:899px){
  .n2-panel-scena{width:100%;font-size:calc((100vw - 40px) / 700 * 7.4)}
  .n2-pk{display:none}
  .n2-panel-kolumny{grid-template-columns:1fr;width:100%;gap:18px}
  .n2-opinie-pas .n2-opinie{max-width:none}
}

/* ---------- rozbudowa 2026-10-05: liczby, kroki, blog, FAQ
   (wizualizacja Sejf/Saplo/09-Grafika-Codex/strona-glowna-v2-2026-10-05/2026-10-05-wizualizacja-rozbudowa.png) ---------- */
.n2-liczby{background:var(--noc);color:#fff;position:relative}
.n2-liczby::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 40% 120% at 85% 0%,rgba(255,106,26,.09),transparent 70%)}
.n2-liczby-uklad{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding:calc(44*var(--u)) 0 calc(46*var(--u))}
.n2-liczba{padding:0 calc(26*var(--u))}
.n2-liczba + .n2-liczba{border-left:1px solid rgba(160,180,230,.18)}
.n2-liczba:first-child{padding-left:0}
.n2-liczba-wart{display:flex;align-items:baseline;gap:.08em;font-size:max(40px,calc(42*var(--u)));line-height:1;font-weight:600;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.n2-liczba-wart b{font-weight:600;color:#fff}
.n2-liczba-wart b.akc{color:var(--pomarancz)}
.n2-liczba-wart em{font-style:normal;color:var(--pomarancz)}
.n2-liczba-wart em.slowo{margin-left:.24em}
.n2-liczba .n2-etykieta{margin-top:calc(16*var(--u))}
.n2-liczba p:last-child{margin-top:calc(10*var(--u));color:#aeb5c3;font-size:max(13px,calc(8.6*var(--u)));line-height:1.5;max-width:calc(185*var(--u))}
.n2-liczba p:last-child a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}

.n2-kroki{background:var(--krem);padding:calc(76*var(--u)) 0 calc(70*var(--u))}
.n2-kroki .n2-naglowek{margin-bottom:calc(36*var(--u))}
.n2-kroki-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(34*var(--u));counter-reset:none}
.n2-krok{position:relative;background:rgba(255,255,255,.75);border:1px solid rgba(17,22,42,.05);border-radius:calc(14*var(--u));padding:calc(24*var(--u)) calc(24*var(--u)) calc(26*var(--u));
  box-shadow:0 calc(14*var(--u)) calc(34*var(--u)) calc(-20*var(--u)) rgba(17,22,42,.14);display:flex;flex-direction:column}
.n2-krok + .n2-krok::before{content:"";position:absolute;right:100%;top:calc(46*var(--u));width:calc(34*var(--u));border-top:1.5px dashed rgba(17,22,42,.35)}
.n2-krok + .n2-krok::after{content:"";position:absolute;right:calc(100% + 17*var(--u) - 3.5px);top:calc(46*var(--u) - 3px);width:7px;height:7px;border-radius:50%;background:var(--pomarancz);box-shadow:0 0 0 4px rgba(255,106,26,.15)}
.n2-krok-gora{display:flex;align-items:flex-start;justify-content:space-between}
.n2-krok-nr{font-size:max(32px,calc(34*var(--u)));line-height:1;font-weight:400;letter-spacing:-.03em;color:var(--pomarancz)}
.n2-krok-gora svg{width:max(32px,calc(32*var(--u)));height:max(32px,calc(32*var(--u)));color:var(--tekst)}
.n2-krok h3{margin-top:calc(26*var(--u));font-size:max(18px,calc(15*var(--u)));font-weight:500;line-height:1.25;letter-spacing:-.015em}
.n2-krok p{margin-top:calc(10*var(--u));color:var(--tekst-2);font-size:max(15px,calc(10*var(--u)));line-height:1.55}
.n2-krok-link{margin-top:auto;padding-top:calc(18*var(--u));display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;color:var(--pomarancz-2);font-weight:600;font-size:max(14px,calc(10*var(--u)))}
.n2-krok-link span{transition:transform .2s}
.n2-krok-link:hover span{transform:translateX(4px)}
.n2-kroki-cta{text-align:center;margin-top:calc(36*var(--u))}

.n2-blog{background:#f2eeea;padding:calc(72*var(--u)) 0 calc(76*var(--u))}
.n2-blog-nag{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:calc(30*var(--u))}
.n2-blog-nag h2{margin-top:calc(14*var(--u))}
.n2-blog-wszystkie{display:inline-flex;align-items:center;gap:.5em;color:var(--pomarancz-2);font-weight:600;font-size:max(14px,calc(9.5*var(--u)));white-space:nowrap}
.n2-blog-wszystkie span{transition:transform .2s}
.n2-blog-wszystkie:hover span{transform:translateX(4px)}
.n2-blog-karty{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(18*var(--u))}
.n2-wpis{background:rgba(255,255,255,.8);border:1px solid rgba(17,22,42,.05);border-radius:calc(14*var(--u));overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 calc(14*var(--u)) calc(34*var(--u)) calc(-22*var(--u)) rgba(17,22,42,.16)}
.n2-wpis-obraz{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--noc)}
.n2-wpis-obraz img{width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.2,.7,.2,1)}
.n2-wpis:hover .n2-wpis-obraz img{scale:1.05}
.n2-wpis-obraz--brak{background:radial-gradient(ellipse 70% 90% at 80% 100%,#0e1a38,var(--noc) 70%)}
.n2-wpis-obraz--brak img{position:absolute;width:150%;height:auto;max-width:none;object-fit:initial;filter:brightness(.72) saturate(.95);opacity:.95;
  -webkit-mask-image:linear-gradient(105deg,transparent 12%,#000 60%);mask-image:linear-gradient(105deg,transparent 12%,#000 60%)}
.n2-wpis-obraz--1 img{left:25%;top:-20%;rotate:-20deg}
.n2-wpis-obraz--2 img{left:15%;top:5%;rotate:35deg}
.n2-wpis-obraz--3 img{left:30%;top:-30%;rotate:80deg}
.n2-wpis-kat{position:absolute;left:calc(16*var(--u));top:calc(14*var(--u));font-size:max(10px,calc(6.8*var(--u)));font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#e4e7ee}
.n2-wpis-tresc{padding:calc(18*var(--u)) calc(20*var(--u)) calc(22*var(--u))}
.n2-wpis time{display:block;color:var(--szary);font-size:max(12px,calc(8*var(--u)))}
.n2-wpis h3{margin-top:calc(8*var(--u));font-size:max(16px,calc(12*var(--u)));font-weight:500;line-height:1.3;letter-spacing:-.01em}
.n2-wpis h3 a{transition:color .2s}
.n2-wpis h3 a:hover{color:var(--pomarancz-2)}
.n2-wpis p{margin-top:calc(10*var(--u));color:#5a6072;font-size:max(13px,calc(8.5*var(--u)));line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.n2-faq-uklad > div:first-child{position:sticky;top:calc(30*var(--u))}
.n2-blog + .n2-faq{background:var(--krem)}

@media (max-width:899px){
  .n2-liczby-uklad{grid-template-columns:1fr 1fr;row-gap:30px;padding:40px 0}
  .n2-liczba{padding:0 0 0 18px}
  .n2-liczba:first-child,.n2-liczba:nth-child(3){padding-left:0;border-left:0}
  .n2-liczba p:last-child{max-width:none}
  .n2-kroki-lista,.n2-blog-karty{grid-template-columns:1fr;gap:16px}
  .n2-krok + .n2-krok::before,.n2-krok + .n2-krok::after{display:none}
  .n2-krok h3{margin-top:16px}
  .n2-blog-nag{flex-direction:column;align-items:flex-start;gap:14px}
  .n2-faq-uklad > div:first-child{position:static}
}
@media (max-width:520px){
  .n2-liczby-uklad{grid-template-columns:1fr 1fr;column-gap:14px}
  .n2-liczba{padding-left:14px}
  .n2-liczba-wart{font-size:36px}
}

/* ---------- podmenu w nawigacji (tylko strona glowna) ---------- */
.n2-menu{align-items:center}
.n2-rozw{position:relative}
.n2-rozw > button{display:flex;align-items:center;gap:.35em;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:#dfe3ec;font-size:max(14px,calc(8.6*var(--u)));font-weight:500;transition:color .15s}
.n2-rozw > button svg{width:1em;height:1em;transition:transform .25s}
.n2-rozw > button:hover,.n2-rozw.otwarte > button{color:#fff}
.n2-rozw.otwarte > button svg{transform:rotate(180deg)}
.n2-pod{position:absolute;left:-18px;top:calc(100% + 18px);min-width:300px;padding:10px;border-radius:16px;background:#fff;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55),0 0 0 1px rgba(17,22,42,.06);display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.n2-pod::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.n2-rozw.otwarte .n2-pod{opacity:1;visibility:visible;transform:none}
.n2-pod a{display:block;padding:10px 14px;border-radius:10px;transition:background .15s}
.n2-pod a:hover,.n2-pod a:focus-visible{background:#f4f1ee}
.n2-pod b{display:block;color:#11162a;font-size:15px;font-weight:600}
.n2-pod small{display:block;color:#7a8091;font-size:13px;margin-top:1px}
@media (hover:hover){.n2-rozw:hover .n2-pod{opacity:1;visibility:visible;transform:none}.n2-rozw:hover > button svg{transform:rotate(180deg)}}

/* ---------- naglowek: na gorze przezroczysty nad hero, po przewinieciu bialy z cieniem; 68 px ----------
   margin-bottom ujemny wsuwa hero pod naglowek, wiec przezroczystosc pokazuje ciemne tlo hero. */
.n2-nav,.n2-nav.przewiniete{position:sticky;top:0;z-index:60;margin-bottom:-68px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:background .3s,box-shadow .3s}
.n2-nav .n2-wrap{height:68px}
.n2-hero{padding-top:68px}
.n2-logo{position:relative;display:block}
.n2-logo img{height:30px;width:auto}
.n2-logo-ciemne{position:absolute;left:0;top:0;opacity:0;transition:opacity .3s}
.n2-logo-biale{transition:opacity .3s}
.n2-nav .n2-menu a,.n2-nav .n2-zaloguj,.n2-mega-btn{color:#e4e8f1;font-size:15px}
.n2-nav .n2-btn-jasny{height:40px;background:var(--pomarancz);color:#fff}
.n2-nav .n2-btn-jasny:hover{background:var(--pomarancz-2)}
.n2-nav.przewiniete{background:rgba(255,255,255,.97);box-shadow:0 2px 18px -4px rgba(4,11,23,.18),0 1px 0 rgba(17,22,42,.06)}
.n2-nav.przewiniete .n2-logo-biale,.n2-nav.mega-otwarte .n2-logo-biale{opacity:0}
.n2-nav.przewiniete .n2-logo-ciemne,.n2-nav.mega-otwarte .n2-logo-ciemne{opacity:1}
.n2-nav.przewiniete .n2-menu a,.n2-nav.przewiniete .n2-zaloguj,.n2-nav.przewiniete .n2-mega-btn,
.n2-nav.mega-otwarte .n2-menu > a,.n2-nav.mega-otwarte .n2-zaloguj,.n2-nav.mega-otwarte .n2-mega-btn{color:#2b3245}
.n2-nav.mega-otwarte{background:#fff;box-shadow:0 1px 0 rgba(17,22,42,.06)}
.n2-nav .n2-menu > a:hover,.n2-nav .n2-zaloguj:hover,.n2-mega-btn:hover{color:var(--pomarancz)}
.n2-nav.przewiniete .n2-burger,.n2-nav.mega-otwarte .n2-burger{color:#11162a}
.n2-menu-mob{background:#fff !important}
.n2-menu-mob a{color:#2b3245 !important;border-bottom-color:#eceef2 !important}
/* otwarte menu na telefonie ma biale tlo: pasek, logo i burger przechodza na wersje ciemna (P8) */
.n2-nav:has(.n2-menu-mob.otwarte){background:#fff}
.n2-nav:has(.n2-menu-mob.otwarte) .n2-logo-biale{opacity:0}
.n2-nav:has(.n2-menu-mob.otwarte) .n2-logo-ciemne{opacity:1}
.n2-nav:has(.n2-menu-mob.otwarte) .n2-burger{color:#11162a}

/* ---------- mega menu (wzor: Hostinger, Produkty) ---------- */
.n2-menu{align-items:center}
.n2-mega-btn{display:flex;align-items:center;gap:.35em;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:500;transition:color .15s}
.n2-mega-btn svg{width:1em;height:1em;transition:transform .25s}
.n2-mega-wrap.otwarte .n2-mega-btn svg{transform:rotate(180deg)}
.n2-mega{position:fixed;left:16px;right:16px;top:76px;max-width:1440px;margin:0 auto;background:#fff;border-radius:20px;padding:28px;
  box-shadow:0 30px 80px -24px rgba(4,11,23,.45),0 0 0 1px rgba(17,22,42,.06);display:grid;grid-template-columns:260px 1fr 340px;gap:28px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.n2-mega::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.n2-mega-srodek{max-height:calc(100vh - 160px);overflow-y:auto;overscroll-behavior:contain}
.n2-mega-wrap.otwarte .n2-mega{opacity:1;visibility:visible;transform:none}
.n2-mega-tyt{margin:0 0 14px;font-size:15px;font-weight:700;color:#11162a;display:flex;align-items:center;justify-content:space-between}
.n2-mega-lewa{border-right:1px solid #eceef2;padding-right:24px;display:flex;flex-direction:column;gap:4px}
.n2-mega-kat{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;color:#2b3245;cursor:pointer;transition:background .15s,color .15s}
.n2-mega-kat svg{width:22px;height:22px;flex:none}
.n2-mega-kat:hover{background:#f6f4f2}
.n2-mega-kat.akt{background:#fdeee4;color:#11162a;font-weight:600}
.n2-mega-kat.akt svg{color:var(--pomarancz)}
.n2-mega-panel{display:none}
.n2-mega-panel.akt{display:block}
.n2-mega-grupa + .n2-mega-grupa{margin-top:22px;padding-top:22px;border-top:1px solid #eceef2}
.n2-mega-siatka{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.n2-mega-siatka a{display:flex;gap:14px;padding:10px 12px;border-radius:12px;transition:background .15s}
.n2-mega-siatka a:hover,.n2-mega-siatka a:focus-visible{background:#f6f4f2}
.n2-mega-siatka svg{width:22px;height:22px;flex:none;color:#2b3245;margin-top:2px}
.n2-mega-kat img,.n2-mega-siatka img{flex:none;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(22,33,62,.22))}
.n2-mega-kat img{width:30px;height:30px}
.n2-mega-siatka img{width:36px;height:36px;margin-top:-4px}
.n2-mega-siatka b{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#11162a}
.n2-mega-siatka em{font-style:normal;font-size:12px;font-weight:600;color:var(--pomarancz-2);background:#fdeee4;border-radius:999px;padding:2px 9px}
.n2-mega-siatka small{display:block;margin-top:3px;font-size:14px;color:#6b7184;line-height:1.4}
.n2-mega-karta{background:#040b17;border-radius:16px;padding:22px;color:#fff;display:flex;flex-direction:column;overflow:hidden}
.n2-mega-karta .n2-mega-tyt{color:#fff}
.n2-mega-karta .n2-mega-tyt svg{width:20px;height:20px}
.n2-mega-karta img{width:100%;height:170px;object-fit:contain;margin:4px 0 14px}
.n2-mega-karta b{font-size:20px;font-weight:500;letter-spacing:-.02em}
.n2-mega-karta small{display:block;margin-top:6px;color:#aeb5c4;font-size:14px}
.n2-mega-karta-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;height:46px;border-radius:12px;background:#fff;color:#11162a;font-weight:600;transition:background .2s;margin-top:18px}
.n2-mega-karta:hover .n2-mega-karta-btn{background:#f4f1ee}
@media (max-width:1180px){.n2-mega{grid-template-columns:230px 1fr}.n2-mega-karta{display:none}}

/* hero ukryte do startu animacji wejscia (klasa z <head>, zdejmowana przez GSAP albo po 4 s awaryjnie) */
.n2-wejscie .n2-hero-rzezba img,.n2-wejscie .n2-hero-tekst > .n2-anim,.n2-wejscie .n2-slajd.akt .n2-anim,.n2-wejscie .n2-hero-bok > *{visibility:hidden}