/* ===========================================================
   Nowa strona redai.pl (podgląd /nowa/): nagłówek z menu rozwijanym.
   Ładowany tylko w podglądzie (nowa_podglad()). Prefiks klas: nw-
=========================================================== */
.nw-podglad{background:var(--ink);color:#d4d4dc;font-size:.8rem;line-height:1.3}
.nw-podglad .container{padding-top:.4rem;padding-bottom:.4rem;text-align:center}
.nw-podglad a{color:#fff;text-decoration:underline;margin-left:.4rem}

.nw-header{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--line)}
/* Jak na cloudflare.com: logo z lewej, menu na środku, przyciski z prawej */
/* Pasek ma stałą szerokość treści, żeby logo nie przyklejało się do krawędzi szerokiego ekranu */
.nw-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;gap:1.5rem;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.nw-bar .brand{justify-self:start}
.nw-nav{display:flex;align-items:center;justify-content:center;min-width:0}
.nw-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;height:72px}
.nw-item{display:flex;align-items:center;height:100%}
.nw-trigger{
  display:inline-flex;align-items:center;gap:.45rem;height:36px;padding:0 11px;
  background:none;border:1px solid transparent;border-radius:8px;font:inherit;font-weight:500;font-size:16px;color:#262626;cursor:pointer;
}
.nw-trigger:hover{border-color:var(--line)}
.nw-item.is-open .nw-trigger{border-color:var(--line);background:#fff}
.nw-trigger:focus-visible,.nw-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.nw-chev{color:#9a9aa3}
.nw-item.is-open .nw-chev{color:#262626}

/* Rozwijana karta pod menu, wyśrodkowana, szerokość według treści */
.nw-panel{
  position:absolute;top:calc(100% - 8px);left:50%;transform:translate(-50%,-4px);width:max-content;max-width:calc(100vw - 32px);
  visibility:hidden;opacity:0;transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
}
.nw-item.is-open .nw-panel{visibility:visible;opacity:1;transform:translate(-50%,0);transition:opacity .14s ease,transform .14s ease}
.nw-dd{display:flex;flex-direction:row;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(15,15,20,.10),0 2px 6px rgba(15,15,20,.04);overflow:hidden}
.nw-col{list-style:none;margin:0;padding:22px 20px 18px;width:266px;display:flex;flex-direction:column;gap:2px}
.nw-col + .nw-col{border-left:1px solid var(--line)}
.nw-col li{margin:0}
.nw-col a{display:block;padding:8px 10px;border-radius:8px;color:#262626;text-decoration:none}
.nw-col a:hover,.nw-col a:focus-visible{background:#f6f6f8;text-decoration:none}
.nw-t{display:block;font-weight:500;font-size:14px;line-height:20px;color:#1f1f1f}
.nw-d{display:block;font-size:14px;line-height:18px;color:#727272;margin-top:2px}

.nw-actions{display:flex;align-items:center;gap:1rem;justify-self:end;flex:0 0 auto}
.nw-cta{padding:.55rem 1.1rem;border-radius:999px;font-weight:500}
.nw-cta-short{display:none}
.nw-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.nw-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .15s ease,opacity .15s ease}
.nw-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nw-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nw-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nw-mobile-extra{display:none}

/* Desktop z wąskim ekranem: ciaśniejsza siatka */
@media (max-width:1180px) and (min-width:1025px){
  .nw-bar{gap:1rem}
  .nw-col{width:236px}
}

/* Telefon i tablet: akordeon */
@media (max-width:1024px){
  .nw-bar{height:60px;gap:.75rem}
  .nw-toggle{display:inline-flex}
  .nw-nav{
    position:fixed;left:0;right:0;top:var(--nw-top,60px);bottom:0;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:none;flex-direction:column;align-items:stretch;padding:.5rem 16px 2rem;border-top:1px solid var(--line);z-index:95;
  }
  .nw-header.is-mobile-open .nw-nav{display:flex}
  .nw-menu{flex-direction:column;height:auto;gap:0}
  .nw-item{display:block;border-bottom:1px solid var(--line)}
  .nw-trigger{width:100%;height:56px;justify-content:space-between;padding:0 .25rem;font-size:1.05rem;border-radius:0}
  .nw-trigger:hover,.nw-item.is-open .nw-trigger{background:none}
  .nw-panel{position:static;display:none;visibility:visible;opacity:1;transform:none;width:auto;max-width:none;transition:none}
  .nw-item.is-open .nw-panel{transform:none}
  .nw-dd{display:block;border:0;box-shadow:none;border-radius:0}
  .nw-col{width:auto;padding:0 0 .5rem;gap:0}
  .nw-col + .nw-col{border-left:0}
  .nw-bar{display:flex;padding-left:16px;padding-right:16px}
  .nw-actions{margin-left:auto}
  .nw-item{height:auto}
  .nw-item.is-open .nw-panel{display:block}
  .nw-d{display:none}
  .nw-col a{padding:.55rem .5rem}
  .nw-t{font-size:15px}
  .nw-mobile-extra{display:flex;flex-direction:column;gap:.9rem;padding-top:1.25rem}
  .nw-mobile-extra a:not(.btn){color:var(--ink);font-weight:600}
  body.nw-lock{overflow:hidden}
}
@media (max-width:480px){
  .nw-cta-long{display:none}
  .nw-cta-short{display:inline}
  .nw-cta{padding:.5rem .8rem;font-size:.88rem}
  .nw-bar .brand-logo{height:30px}
}
@media (prefers-reduced-motion:reduce){.nw-panel,.nw-chev,.nw-toggle span{transition:none}}

/* Przełączanie Produkty / Rozwiązania / Zasoby: bez animacji, panel stoi, treść się podmienia */
.nw-header.is-przelacz .nw-panel{transition:none!important}

/* 02.11 runda 5: menu na telefonie od góry i z wyrównaniem do lewej (było wyśrodkowane w pionie) */
@media (max-width:1024px){
  .nw-nav{justify-content:flex-start;align-items:stretch}
  .nw-menu{width:100%;align-items:stretch}
  .nw-mobile-extra{align-items:stretch;text-align:left}
  .nw-mobile-extra a:not(.btn){padding:.25rem}
}
/* 02.11 runda 5: rozwinięta sekcja na telefonie bez ramki, linki w równych odstępach */
@media (max-width:1024px){
  .nw-item.is-open .nw-trigger,.nw-trigger:hover{border-color:transparent}
  .nw-col{padding:0}
  .nw-dd{padding-bottom:.6rem}
}

/* 02.11 runda 7 (pkt 30): nagłówek jak na cloudflare.com. Oferta jako zwykły link, „Coś nie działa?”
   (odpowiednik „Under attack?”), Zaloguj w obrysie, po przewinięciu tylko logo i „Umówcie prezentację”. */
.nw-item--link .nw-link{text-decoration:none}
.nw-item--link .nw-link:hover{text-decoration:none}
.nw-pomoc{display:inline-flex;align-items:center;gap:.4rem;color:var(--red);font-weight:500;font-size:15px;text-decoration:none;white-space:nowrap}
.nw-pomoc:hover{text-decoration:underline}
.nw-pill{display:inline-flex;align-items:center;height:38px;padding:0 1rem;border:1px solid #cfcfd6;border-radius:999px;color:#262626;font-weight:500;font-size:15px;text-decoration:none;white-space:nowrap;background:#fff}
.nw-pill:hover{border-color:#262626;text-decoration:none}
.nw-cta{white-space:nowrap}
.nw-cta-zwin{display:none;padding:.55rem 1.1rem;border-radius:999px;font-weight:500;white-space:nowrap}
@media (min-width:1025px){
  .nw-header.is-zwiniety .nw-nav,
  .nw-header.is-zwiniety .nw-pomoc--bar,
  .nw-header.is-zwiniety .nw-zaloguj,
  .nw-header.is-zwiniety .nw-cta{display:none}
  .nw-header.is-zwiniety .nw-cta-zwin{display:inline-flex}
  .nw-header.is-zwiniety .nw-bar{grid-template-columns:1fr auto}
}
@media (max-width:1280px) and (min-width:1025px){
  .nw-pomoc--bar{display:none}
}
@media (max-width:1024px){
  .nw-pomoc--bar,.nw-actions .nw-cta{display:none}
  .nw-actions{gap:.6rem}
  .nw-pill{height:36px;padding:0 .9rem;font-size:.9rem}
  .nw-item--link .nw-link{display:flex;align-items:center;width:100%;height:56px;padding:0 .25rem;font-size:1.05rem;color:#262626}
  .nw-mobile-extra a.nw-pomoc:not(.btn){color:var(--red);font-weight:600}
}

/* 02.11 runda 7 (pkt 30): stopka jak na cloudflare.com, logo z lewej, grupy linków w 4 kolumnach, pasek na dole. */
.nw-stopka{background:#fff;border-top:1px solid var(--line);margin-top:3rem;padding:3.5rem 0 1.5rem;font-size:14px}
.nw-stopka-in{display:grid;grid-template-columns:200px 1fr;gap:2rem;max-width:1280px;padding-left:24px;padding-right:24px}
.nw-stopka-grupy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem 2rem}
.nw-stopka-grupa h2{font-size:13px;font-weight:400;color:#727272;margin:0 0 .9rem;letter-spacing:0}
.nw-stopka-grupa ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.nw-stopka-grupa a{color:#222;font-size:15px;text-decoration:none}
.nw-stopka-grupa a:hover{color:var(--red);text-decoration:underline}
.nw-stopka-dol{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line);color:#727272;font-size:13px;max-width:1280px;padding-left:24px;padding-right:24px}
.nw-stopka-dol a{color:#727272;text-decoration:none}
.nw-stopka-dol a:hover{color:#1f1f1f;text-decoration:underline}
@media (max-width:900px){
  .nw-stopka-in{grid-template-columns:1fr}
  .nw-stopka-grupy{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}
}
@media (max-width:600px){
  .nw-stopka{padding-top:2.5rem}
  .nw-stopka-in,.nw-stopka-dol{padding-left:16px;padding-right:16px}
}

/* 02.11 przegląd zespołu: równe pigułki 38 px, hamburger bez ramki, pigułka w menu telefonu, dół stopki jak CF */
.nw-actions .nw-cta,.nw-actions .nw-cta-zwin{height:38px;padding:0 1rem;align-items:center;line-height:1}
.nw-stopka-dol{justify-content:space-between}
.nw-stopka-prawne{display:flex;gap:.6rem}
@media (max-width:1024px){
  .nw-toggle{border:0;background:none}
  .nw-mobile-extra .btn{border-radius:999px}
}

/* 02.11 runda 8 (pkt 52): stopka wg planu, krok 7. Newsletter pod logo, akordeon na telefonie. Pas kontaktu u góry wyjęty 03.11 (runda 9, pkt 54). */
.nw-stopka-in{grid-template-columns:240px 1fr;gap:3rem}
.nw-stopka-grupa ul[hidden]{display:none}
.nw-nl--maly .nw-nl-row{flex-direction:row}
.nw-stopka-logo p{margin:.75rem 0 1.5rem;color:#3f3f49;font-size:14px}
.nw-nl--maly{padding:0;border:0;box-shadow:none;background:none;max-width:none}
.nw-nl--maly label{font-size:13px;font-weight:400;color:#727272;margin-bottom:.5rem}
.nw-nl--maly .nw-nl-row{display:flex;gap:.4rem}
.nw-nl--maly input[type=email]{flex:1;min-width:0;padding:.55rem .7rem;border:1px solid #cfcfd8;border-radius:var(--r);font:inherit;font-size:14px}
.nw-nl--maly input[type=email]:focus{outline:2px solid var(--red);outline-offset:1px;border-color:transparent}
.nw-nl--maly .btn{padding:.55rem .9rem;font-size:14px}
.nw-nl--maly small{display:block;margin-top:.5rem;color:#727272;font-size:12px}
.nw-nl--maly .nw-nl-msg.is-err{color:var(--red-dark);font-weight:600}
.nw-stopka-prawne{flex-wrap:wrap;gap:.4rem 1.2rem}
@media (max-width:900px){
  .nw-stopka-in{grid-template-columns:1fr;gap:2.5rem}
  .nw-stopka-logo{max-width:420px}
}
@media (max-width:640px){
      .nw-stopka-grupy{grid-template-columns:1fr;gap:0}
  .nw-stopka-grupa{border-bottom:1px solid var(--line)}
  .nw-stopka-grupa h2{margin:0}
  .nw-stopka-grupa h2 button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;width:100%;padding:.95rem 0;font-size:15px;font-weight:600;color:#1f1f1f;cursor:pointer}
  .nw-stopka-grupa h2 button::after{content:"";width:8px;height:8px;border-right:2px solid #727272;border-bottom:2px solid #727272;transform:rotate(45deg);margin:0 4px 4px 0;transition:transform .2s}
  .nw-stopka-grupa h2 button[aria-expanded=true]::after{transform:rotate(-135deg);margin-bottom:0}
  .nw-stopka-grupa h2 button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
  .nw-stopka-grupa ul{padding:0 0 1rem}
  .nw-stopka-dol{flex-direction:column;align-items:flex-start;margin-top:2rem}
}