/* =============================================================
   Nawigator 360 — landing page (widgety Elementora)
   Arkusz 2/2: diagram kroków, Zalety (szkło + kule), demo, Dla kogo,
               baner CTA, Wycena, FAQ, stopka
   Paleta świerkowa, wszystko zamknięte w .n360
   ============================================================= */

/* ================= DIAGRAM KROKÓW (Jak to działa / Zespół) ================= */
.n360 .flow{
  position:relative;margin-top:70px;
  /* 74px (nie 66px) — przy opisie kroku rozciągniętym do 3 linii (jak "Krok 04")
     kapsuła i tak rosłaby ponad wysokość wyliczoną z promienia, co rozciąga
     obrys/klucz clip-path i psuje proporcje względem koła z ikoną. Większy
     promień daje zapas mieszczący 3 linie bez rozciągania kształtu, a cały
     diagram (rozstaw kół, łączniki z JS) skaluje się razem z nim. */
  --flow-radius:74px;                            /* promień zaokrąglenia kapsuły = połowa wysokości */
  --flow-spread:calc(2.7 * var(--flow-radius));  /* rozstaw środek–środek kół */
  --flow-off:calc(var(--flow-spread) / 2);
  --cyl-len:32px;                                /* zasięg rzuconego cienia walca */
  --cyl-ang:-38.5deg;                            /* kierunek światła: z lewej góry */
}
.n360 .flow-step{position:relative;z-index:1;display:flex;margin-bottom:0;}
.n360 .flow-step.left{justify-content:flex-start;}
.n360 .flow-step.right{justify-content:flex-end;}
/* łączniki między kołami — ścieżki SVG rysowane w JS, leżą pod kapsułami */
.n360 .flow-links{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;overflow:visible;
}
.n360 .flow-card{
  position:relative;
  width:calc(50% + var(--flow-radius) - var(--flow-off));
  min-height:calc(2 * var(--flow-radius));
  display:flex;flex-direction:column;justify-content:center;
  border:none;border-radius:999px;
  background:var(--color-bg-alt);
  opacity:0;
}
/* obrys kapsuły: warstwa ciągła (bliżej koła) przycięta po skosie */
.n360 .flow-card::before{
  content:'';position:absolute;inset:0;border-radius:999px;
  border:2px solid currentColor;pointer-events:none;
}
/* część kropkowana rysowana jako SVG — odstęp kropek sterowany dasharray */
.n360 .flow-outline{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
}
.n360 .flow-outline path{
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-dasharray:2 9;
}
.n360 .flow-step.left  .flow-card{text-align:right;padding:22px 176px 22px 46px;}
.n360 .flow-step.right .flow-card{text-align:left; padding:22px 46px 22px 176px;}
.n360 .flow-step.left  .flow-card::before{clip-path:polygon(50% 0, 100% 0, 100% 100%, 40% 100%);}
.n360 .flow-step.right .flow-card::before{clip-path:polygon(0 0, 50% 0, 60% 100%, 0 100%);}
.n360 .flow-card b{
  display:block;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:8px;color:currentColor;
}
.n360 .flow-card span{display:block;font-size:14.5px;color:var(--color-text-dim);line-height:1.55;}

/* koło kroku wpisane w zaokrąglenie kapsuły: średnica = 2R */
.n360 .flow-node{
  position:absolute;
  top:calc(50% - var(--flow-radius));
  width:calc(2 * var(--flow-radius));
  height:calc(2 * var(--flow-radius));
  border-radius:50%;
  background:transparent;border:6px solid currentColor;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:none;
  isolation:isolate;
}
/* górna tarcza walca: cień pada od prostej prostopadłej do światła + zfazowana krawędź */
.n360 .flow-node::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:
    linear-gradient(calc(180deg + var(--cyl-ang)),
      rgba(var(--color-navy-rgb),.14)  0%,
      rgba(var(--color-navy-rgb),.13) 34%,
      rgba(var(--color-navy-rgb),.05) 48%,
      rgba(var(--color-navy-rgb),0)   60%),
    radial-gradient(circle at 62% 66%, #ffffff 0%, var(--color-surface) 62%, var(--color-bg-alt) 100%);
  box-shadow:
    3px 4px 6px -2px rgba(var(--color-navy-rgb),.55),
    1px 2px 3px -1px rgba(var(--color-navy-rgb),.45),
    inset 3px 3px 3px -2px rgba(255,255,255,.95),
    inset -3px -3px 3px -2px rgba(var(--color-navy-rgb),.38),
    inset 0 0 0 1px rgba(var(--color-navy-rgb),.07);
}
/* cień rzucony: rzut walca wzdłuż promieni światła, twarde krawędzie boczne */
.n360 .flow-node::after{
  content:'';position:absolute;left:0;top:0;z-index:-1;
  width:100%;
  height:calc(100% + var(--cyl-len));
  border-radius:999px;
  background:linear-gradient(180deg,
    rgba(var(--color-navy-rgb),.45) 0%,
    rgba(var(--color-navy-rgb),.34) 40%,
    rgba(var(--color-navy-rgb),.14) 74%,
    rgba(var(--color-navy-rgb),0)   100%);
  transform-origin:50% calc((100% - var(--cyl-len)) / 2);
  transform:rotate(var(--cyl-ang));
  filter:blur(1px);
}
.n360 .flow-node svg,
.n360 .flow-node .flow-no{position:relative;z-index:1;}
.n360 .flow-step.left  .flow-node{right:0;}
.n360 .flow-step.right .flow-node{left:0;}
.n360 .flow-node svg{
  width:42px;height:42px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.n360 .flow-node .flow-no{
  font-size:12px;font-weight:700;letter-spacing:.12em;color:currentColor;opacity:.9;
}
/* zdjęcie członka zespołu wypełniające tarczę walca */
.n360 .flow-photo{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;border-radius:50%;
  object-fit:cover;object-position:50% 12%;
}
.n360 .flow-card .flow-fn{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:currentColor;margin-bottom:8px;
}
.n360 .flow-card .flow-name{
  display:block;font-size:20px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--color-navy);margin-bottom:4px;
}
.n360 .flow-card .flow-role{
  display:block;font-size:14.5px;color:var(--color-text-dim);line-height:1.55;margin-top:2px;
}
/* kolory kolejnych ogniw — dziedziczone przez obrys, pierścień i nagłówek */
.n360 .flow-step.s1{color:var(--color-step1);}
.n360 .flow-step.s2{color:var(--color-primary);}
.n360 .flow-step.s3{color:var(--color-accent);}   /* brąz */
.n360 .flow-step.s4{color:var(--color-step4);}
.n360 .flow-step.s5{color:var(--color-navy);}

/* ================= ZALETY — szkło na kolorowych kulach ================= */
/* UWAGA: prefiks .n360 jest konieczny — bez niego reguła (0,1,0) przegrywa
   z .n360 .n360-sec (0,2,0), które ustawia padding sekcji. */
.n360 .n360-benefits{
  position:relative;overflow:hidden;--blobs-up:0px;
  /* Podpisy (dawniej pod ramką Demo) są teraz treścią TEJ sekcji (patrz
     .demo-meta na górze .container w PHP), więc tło z kulami nie musi już
     wylewać się nad jej górną granicę — overflow:hidden trzyma je w
     obrębie własnego pudełka. Cień na górnej krawędzi oddziela od widgetu
     Demo powyżej, cień na dolnej — od widgetu „Dla kogo” pod spodem. */
  box-shadow:
    inset 0 26px 34px -26px rgba(var(--color-navy-rgb),.42),
    inset 0 -26px 34px -26px rgba(var(--color-navy-rgb),.42);
}
.n360 .n360-benefits .container{position:relative;z-index:2;}
.n360 .glass-blobs{
  position:absolute;left:0;right:0;bottom:0;
  top:calc(-1 * var(--blobs-up));
  overflow:hidden;
  z-index:1;pointer-events:none;
}
.n360 .glass-blob{position:absolute;border-radius:50%;filter:blur(26px);will-change:transform;}
.n360 .glass-blob.b1{width:380px;height:380px;top:4%;left:2%;
  background:radial-gradient(circle, rgba(var(--color-accent-rgb),.52) 0%, rgba(var(--color-accent-rgb),.24) 42%, rgba(var(--color-accent-rgb),0) 72%);}
.n360 .glass-blob.b2{width:250px;height:250px;top:48%;left:18%;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),.48) 0%, rgba(var(--color-primary-rgb),.20) 42%, rgba(var(--color-primary-rgb),0) 72%);}
.n360 .glass-blob.b3{width:430px;height:430px;top:18%;right:0%;
  background:radial-gradient(circle, rgba(var(--color-accent-rgb),.48) 0%, rgba(var(--color-accent-rgb),.20) 42%, rgba(var(--color-accent-rgb),0) 72%);}
.n360 .glass-blob.b4{width:220px;height:220px;bottom:2%;left:44%;
  background:radial-gradient(circle, rgba(var(--color-slate-rgb),.42) 0%, rgba(var(--color-slate-rgb),.18) 42%, rgba(var(--color-slate-rgb),0) 72%);}
.n360 .glass-blob.b5{width:200px;height:200px;top:2%;left:50%;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),.40) 0%, rgba(var(--color-primary-rgb),.17) 42%, rgba(var(--color-primary-rgb),0) 72%);}
.n360 .glass-blob.b6{width:560px;height:560px;top:-12%;left:26%;
  background:radial-gradient(circle, rgba(var(--color-accent-rgb),.40) 0%, rgba(var(--color-accent-rgb),.17) 44%, rgba(var(--color-accent-rgb),0) 74%);
  filter:blur(40px);}
.n360 .glass-blob.b7{width:620px;height:620px;bottom:-22%;left:-8%;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),.38) 0%, rgba(var(--color-primary-rgb),.16) 44%, rgba(var(--color-primary-rgb),0) 74%);
  filter:blur(44px);}
.n360 .glass-blob.b8{width:300px;height:300px;top:42%;left:34%;
  background:radial-gradient(circle, rgba(var(--color-accent-rgb),.50) 0%, rgba(var(--color-accent-rgb),.22) 42%, rgba(var(--color-accent-rgb),0) 72%);
  filter:blur(30px);}
.n360 .glass-blob.b9{width:270px;height:270px;top:30%;right:22%;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),.46) 0%, rgba(var(--color-primary-rgb),.20) 42%, rgba(var(--color-primary-rgb),0) 72%);
  filter:blur(30px);}
/* b10—b15: zaczepione przez "bottom", nie "top" — sekcja Zalety jest teraz
   dużo wyższa (opcjonalna prezentacja wdrożenia nad kartami), więc kule
   pozycjonowane od góry (b1—b9) skupiają się w górnej połowie i strefa kart
   przy dole zostaje pusta. Pozycja "bottom" trzyma je zawsze blisko kart,
   niezależnie od tego, jak wysoka jest reszta sekcji nad nimi. */
.n360 .glass-blob.b10{width:340px;height:340px;bottom:20%;left:6%;
  background:radial-gradient(circle, rgba(var(--color-accent-rgb),.46) 0%, rgba(var(--color-accent-rgb),.20) 42%, rgba(var(--color-accent-rgb),0) 72%);}
.n360 .glass-blob.b11{width:260px;height:260px;bottom:4%;left:56%;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),.44) 0%, rgba(var(--color-primary-rgb),.19) 42%, rgba(var(--color-primary-rgb),0) 72%);}
.n360 .glass-blob.b12{width:400px;height:400px;bottom:30%;right:2%;
  background:radial-gradient(circle, rgba(var(--color-slate-rgb),.46) 0%, rgba(var(--color-slate-rgb),.20) 42%, rgba(var(--color-slate-rgb),0) 72%);}
.n360 .glass-blob.b13{width:480px;height:480px;bottom:-10%;left:26%;
  background:radial-gradient(circle, rgba(var(--color-accent-rgb),.40) 0%, rgba(var(--color-accent-rgb),.17) 44%, rgba(var(--color-accent-rgb),0) 74%);
  filter:blur(38px);}
.n360 .glass-blob.b14{width:230px;height:230px;bottom:12%;right:34%;
  background:radial-gradient(circle, rgba(var(--color-primary-rgb),.48) 0%, rgba(var(--color-primary-rgb),.21) 42%, rgba(var(--color-primary-rgb),0) 72%);
  filter:blur(28px);}
.n360 .glass-blob.b15{width:300px;height:300px;bottom:38%;left:44%;
  background:radial-gradient(circle, rgba(var(--color-slate-rgb),.42) 0%, rgba(var(--color-slate-rgb),.18) 42%, rgba(var(--color-slate-rgb),0) 72%);}

/* !important na display/grid-template-columns w tym pliku: motyw Antra
   nadpisuje układ dzieci .container własną regułą o wyższej specyficzności
   (zaobserwowane w hero-grid/about-grid) — zabezpieczamy wszystkie siatki
   od razu, żeby nie łapać tego samego problemu sekcja po sekcji. */
.n360 .features-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:24px;margin-top:50px;}
/* szklana tafla o realnej grubości: wypełnienie w ::after, pas refrakcji w .glass-edge */
.n360 .feature-card{
  position:relative;isolation:isolate;
  background:transparent;
  backdrop-filter:blur(11px) saturate(200%) brightness(1.03);
  -webkit-backdrop-filter:blur(11px) saturate(200%) brightness(1.03);
  border:none;border-radius:var(--radius);padding:30px;
  box-shadow:
    10px 14px 18px -12px rgba(var(--color-navy-rgb),.34),
    2px 3px 6px -4px rgba(var(--color-navy-rgb),.20),
    inset 4px 4px 5px -4px rgba(var(--color-navy-rgb),.26),
    inset -2px -2px 3px -1px rgba(255,255,255,.70),
    inset -16px -18px 34px -26px rgba(var(--color-navy-rgb),.22);
  opacity:0;transform:translateY(30px);
  transition:transform .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
/* rozbłysk w lewym górnym narożniku — ok. 30° łuku */
.n360 .feature-card::before{
  content:'';position:absolute;top:0;left:0;width:40px;height:40px;
  border-radius:var(--radius) 0 100% 0;
  background:radial-gradient(17px 17px at 0 0,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.95) 42%,
    rgba(255,255,255,.60) 68%,
    rgba(255,255,255,.18) 86%,
    rgba(255,255,255,0) 100%);
  filter:blur(.5px);
  pointer-events:none;z-index:1;
}
/* pas refrakcji: 4px od strony światła, 2px przy narożniku przeciwległym */
.n360 .glass-edge{
  position:absolute;inset:0;border-radius:inherit;
  padding:4px 2px 2px 4px;
  backdrop-filter:blur(3px) saturate(150%);
  -webkit-backdrop-filter:blur(3px) saturate(150%);
  opacity:var(--edge-opacity, .4);
  background:linear-gradient(135deg,
    rgba(var(--color-glass-rgb),.95) 0%,
    rgba(var(--color-glass-rgb),.85) 22%,
    rgba(var(--color-bg-alt-rgb),.80) 50%,
    rgba(var(--color-surface-rgb),.85) 78%,
    rgba(255,255,255,.98) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;
}
/* wypełnienie tafli cofnięte o szerokość pasa refrakcji — pod pasem widać kule */
.n360 .feature-card::after{
  content:'';position:absolute;
  inset:4px 2px 2px 4px;
  filter:blur(3px);
  border-radius:calc(var(--radius) - 3px);
  background:
    radial-gradient(150px 130px at 0% 0%,
      rgba(255,255,255,.23) 0%,
      rgba(255,255,255,.14) 26%,
      rgba(255,255,255,.05) 50%,
      rgba(255,255,255,0) 74%),
    linear-gradient(118deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 14%, transparent 30%),
    linear-gradient(300deg, rgba(255,255,255,.20) 0%, transparent 22%),
    linear-gradient(140deg, rgba(var(--color-glass-rgb),.46), rgba(var(--color-glass-rgb),.26) 48%, rgba(var(--color-glass-rgb),.36));
  pointer-events:none;z-index:-1;
}
.n360 .feature-card:hover{
  transform:translateY(-6px);
  backdrop-filter:blur(20px) saturate(210%) brightness(1.06);
  -webkit-backdrop-filter:blur(20px) saturate(210%) brightness(1.06);
  box-shadow:
    14px 18px 24px -12px rgba(var(--color-navy-rgb),.38),
    2px 3px 6px -4px rgba(var(--color-navy-rgb),.20),
    inset -16px -18px 34px -26px rgba(var(--color-navy-rgb),.36);
}
.n360 .feature-card h3{font-size:18px;margin-bottom:10px;
  text-shadow:0 1px 2px rgba(255,255,255,.85), 0 0 12px rgba(255,255,255,.6);}
.n360 .feature-card p{color:var(--color-navy);font-size:15px;
  text-shadow:0 1px 2px rgba(255,255,255,.8), 0 0 10px rgba(255,255,255,.55);}

/* ================= DEMO — widget Nawigatora ================= */
/* overflow:visible — inaczej boksowany kontener Elementora przyciąłby ramkę
   demo, która celowo wychodzi na całą szerokość okna */
.n360 .n360-demo{
  position:relative;isolation:isolate;overflow:visible;z-index:1;
  padding-bottom:12px;               /* odstęp pod polem demo */
  /* cień przy górnej krawędzi, padający do wnętrza sekcji */
  box-shadow:inset 0 26px 34px -26px rgba(var(--color-navy-rgb),.42);
}
/* bez osobnej "ramki" (.demo-frame) — samo pole demo, nadal na całą
   szerokość okna (wyłamanie z kontenera Elementora), ale bez obwódki,
   tła i cienia, które wcześniej tworzyły wokół niego pudełko. */
.n360 .demo-stage{
  position:relative;margin:50px 0 0;
  width:100vw;margin-left:calc(50% - 50vw);
  /* proporcje przez zmienną, nie przez styl inline — inline wygrałby
     z regułą w @media i psuł układ na telefonie */
  aspect-ratio:var(--demo-ratio, 2.3);
  border-radius:0;
  overflow:hidden;background:linear-gradient(135deg,var(--color-surface),var(--color-bg));
  display:flex;align-items:center;justify-content:center;
}
/* na wąskich ekranach widget układa się pionowo — reguła MUSI być po bazowej */
@media(max-width:860px){ .n360 .demo-stage{aspect-ratio:3/4;} }
.n360 .demo-stage iframe{width:100%;height:100%;border:0;display:block;}
.n360 .demo-stage > *{width:100%;}
.n360 .demo-fallback{text-align:center;margin-top:12px;font-size:14px;color:var(--color-text-dim);}
.n360 .demo-fallback a{color:var(--color-primary);font-weight:700;text-decoration:underline;}
.n360 .demo-meta{
  display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin-top:18px;
  color:var(--color-text-dim);font-size:14.5px;
}
.n360 .demo-meta span{display:inline-flex;align-items:center;gap:8px;}
.n360 .demo-meta span::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--color-primary);
}

/* ================= PREZENTACJA WDROŻENIA (wewnątrz widgetu Zalety) =================
   Renderowana w TEJ SAMEJ sekcji co karty Zalety (.n360-benefits) — bez osobnego
   widgetu/wrappera, żeby tło z kulami było jedną ciągłą warstwą, bez szwu na
   granicy dwóch widgetów (każdy widget Elementora maluje własne, nieprzezroczyste
   tło .n360, więc dwa sąsiednie widgety zawsze dają widoczną linię podziału).
   .showcase-frame używa TEJ SAMEJ ramki co obrazek w Hero (klasy
   .hero-visual.hero-visual--img — tło, obwódka, cień, padding 10px) — celowo,
   żeby zrzut strony klienta wyglądał identycznie oprawiony. */
.n360 .showcase-frame{max-width:980px;margin:44px auto 0;}
.n360 a.showcase-frame{display:block;}
.n360 .showcase-caption{
  text-align:center;margin-top:14px;font-size:14px;color:var(--color-text-dim);
}
.n360 .showcase-n3d{
  max-width:980px;margin:90px auto 0;padding:48px;border-radius:var(--radius);
  background:var(--color-bg-alt);border:1px solid var(--color-border);
}
.n360 .showcase-n3d-head{max-width:640px;margin:0 auto 36px;text-align:center;}
.n360 .showcase-n3d-head h3{
  font-size:clamp(22px,3vw,28px);line-height:1.25;font-weight:700;
  color:var(--color-navy);margin-bottom:12px;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
}
.n360 .showcase-n3d-head p{color:var(--color-text-dim);}
/* obrysy wokół przycisku, zmniejszone proporcjonalnie (~65% wymiarów z Hero,
   nie tylko r3/r4 — WSZYSTKIE zmienne naraz, żeby zachować te same proporcje
   między pierścieniami i nie dopuścić do ich przecinania się) oraz
   overflow:hidden na karcie jako twarde zabezpieczenie, żeby żaden krąg nie
   wystawał poza jej krawędź, nawet gdyby tekst przycisku był dłuższy niż
   zakładano. */
.n360 .showcase-n3d{overflow:hidden;}
.n360 .showcase-n3d .cta-wrap{--ring-gap:34px;--ring-gap-2:52px;--ring4-shift:60px;}
.n360 .showcase-n3d .cta-wrap .r3{width:calc(200% + 150px);}
.n360 .showcase-n3d .cta-wrap .r4{width:calc(200% + 320px);}
.n360 .showcase-n3d-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:28px;}
.n360 .showcase-n3d-grid .hero-visual{max-width:none;}
@media(max-width:860px){
  .n360 .showcase-n3d{padding:28px;}
  .n360 .showcase-n3d-grid{grid-template-columns:1fr !important;}
}

/* ================= DLA KOGO ================= */
.n360 .audience-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:24px;margin-top:50px;}
.n360 .audience-card{
  position:relative;isolation:isolate;overflow:hidden;
  padding:36px;border-radius:var(--radius);border:1px solid var(--color-border);
  background:var(--color-surface);box-shadow:var(--shadow);
  opacity:0;transform:translateX(-30px);
}
.n360 .audience-card:nth-child(2){transform:translateX(30px);}
.n360 .audience-card ul{margin-top:18px;padding-left:20px;color:var(--color-text-dim);font-size:15px;}
.n360 .audience-card li{margin-bottom:8px;}

/* ================= BANER CTA ================= */
.n360 .cta-banner{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(120deg, var(--color-primary-dark), var(--color-primary));
  border-radius:var(--radius);padding:60px;text-align:center;
  margin:0 24px;box-shadow:var(--shadow);
}
.n360 .cta-banner h2{color:#fff;}
.n360 .cta-banner p{color:rgba(255,255,255,.9);max-width:520px;margin:0 auto 30px;}
/* "360" w nagłówku banera — brązowy akcent, odróżnia się od zielonego tła */
.n360 .cta-banner .b360{color:var(--color-accent);}
.n360 .cta-banner .hero-cta{justify-content:center;}
.n360 .cta-banner .btn-outline{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff;}
.n360 .cta-banner .btn-accent{color:var(--color-accent-text);}

/* ================= FORMULARZ WYCENY ================= */
.n360 .n360-quote{background:var(--color-bg-alt);position:relative;isolation:isolate;overflow:hidden;}
.n360 .quote-grid{display:grid !important;grid-template-columns:1.05fr .95fr !important;gap:60px;align-items:center;margin-top:50px;}
.n360 .quote-list-title{font-size:19px;margin-bottom:6px;}
.n360 .quote-list{counter-reset:q;margin:26px 0 32px;}
.n360 .quote-list li{
  counter-increment:q;list-style:none;position:relative;
  padding:9px 0 9px 44px;border-bottom:1px solid var(--color-border);
  color:var(--color-text);font-size:15.5px;
}
.n360 .quote-list li:last-child{border-bottom:none;}
.n360 .quote-list li::before{
  content:counter(q,decimal-leading-zero);
  position:absolute;left:0;top:9px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--color-primary);
}
.n360 .quote-note{
  margin-top:26px;padding:14px 18px;border-radius:14px;
  background:rgba(var(--color-accent-rgb),.12);border:1px solid rgba(var(--color-accent-rgb),.35);
  color:var(--color-text);font-size:14px;
}
.n360 .quote-doc{
  position:relative;justify-self:center;max-width:420px;width:100%;
  padding:12px;background:#fff;border-radius:var(--radius);
  box-shadow:16px 22px 40px -18px rgba(var(--color-navy-rgb),.35), 4px 6px 12px -6px rgba(var(--color-navy-rgb),.22);
  transform:rotate(-1.4deg);
}
.n360 .quote-doc img{width:100%;height:auto;display:block;border-radius:calc(var(--radius) - 12px);}
.n360 .quote-doc::after{
  content:'';position:absolute;right:12px;bottom:12px;width:0;height:0;
  border-left:34px solid transparent;border-bottom:34px solid rgba(var(--color-navy-rgb),.07);
}
@media(max-width:860px){
  .n360 .quote-grid{grid-template-columns:1fr !important;gap:36px;}
  .n360 .quote-doc{transform:none;}
}

/* ================= FAQ ================= */
.n360 .faq-item{border-top:1px solid var(--color-border);padding:22px 0;}
.n360 .faq-item:last-child{border-bottom:1px solid var(--color-border);}
.n360 .faq-q{
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;font-weight:600;font-size:17px;color:var(--color-navy);
}
.n360 .faq-q .plus{transition:transform .25s ease;color:var(--color-primary);font-size:20px;}
.n360 .faq-item.open .faq-q .plus{transform:rotate(45deg);}
.n360 .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--color-text-dim);font-size:15px;}
.n360 .faq-item.open .faq-a{max-height:320px;padding-top:14px;}

/* ================= STOPKA ================= */
.n360 .n360-footer{
  border-top:1px solid rgba(var(--color-navy-rgb),0.10);padding:60px 0 30px;background:var(--color-bg-alt);
  position:relative;isolation:isolate;overflow:hidden;
}
.n360 .footer-grid{display:grid !important;grid-template-columns:1.4fr 1fr 1fr !important;gap:40px;margin-bottom:50px;}
.n360 .footer-tagline{color:var(--color-text-dim);font-size:14px;max-width:320px;}
.n360 .footer-col h4{font-size:15px;margin-bottom:16px;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em;}
.n360 .footer-col a{display:block;color:var(--color-text-dim);font-size:14px;margin-bottom:10px;}
.n360 .footer-col a:hover{color:var(--color-navy);}
.n360 .footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:8px;}
/* .footer-col a ustawia display:block — te reguły muszą mieć wyższą specyficzność,
   inaczej ikona spada do osobnego wiersza i tekst gubi kolor */
.n360 .footer-contact .btn{display:inline-flex;width:auto;margin-bottom:0;white-space:nowrap;}
.n360 .footer-contact .btn-primary{color:#fff;}
.n360 .footer-contact .btn-outline{color:var(--color-navy);}
.n360 .footer-call{width:auto;}
.n360 .footer-contact .footer-call .btn{padding-left:20px;padding-right:22px;}
/* blok z danymi firmy — jak w stopce dokumentu wyceny: znak firmowy + nazwa,
   linia adresu/kontaktu, i osobno mniejsza, szara linia z danymi rejestrowymi */
.n360 .footer-company{
  border-top:1px solid var(--color-border);padding-top:24px;margin-bottom:24px;
}
.n360 .footer-company-top{display:flex;align-items:center;gap:14px;}
.n360 .footer-company-logo{
  width:38px;height:38px;flex:0 0 auto;object-fit:contain;
}
.n360 .footer-company-top .n360-ph{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--color-bg-alt);color:var(--color-text-dim);
  font-size:10px;text-align:center;padding:2px;
}
.n360 .footer-company-name{display:block;font-size:15px;color:var(--color-navy);}
.n360 .footer-company-line{display:block;font-size:13.5px;color:var(--color-text-dim);margin-top:2px;}
.n360 .footer-company-line a:hover,
.n360 .footer-company-top > a:hover .footer-company-logo{opacity:.8;}
.n360 .footer-company-legal{
  margin-top:12px;font-size:12px;line-height:1.6;color:var(--color-text-dim);opacity:.75;
}
.n360 .footer-bottom{
  border-top:1px solid var(--color-border);padding-top:24px;
  display:flex;justify-content:space-between;color:var(--color-text-dim);font-size:13px;flex-wrap:wrap;gap:10px;
}

@media(max-width:860px){
  .n360 .audience-grid{grid-template-columns:1fr !important;}
  .n360 .features-grid{grid-template-columns:1fr 1fr !important;}
  .n360 .footer-grid{grid-template-columns:1fr !important;}
  /* łańcuch kroków w kolumnie: pełna szerokość, koło u góry kapsuły */
  .n360 .flow-links{display:none;}
  .n360 .flow-step{margin-bottom:70px;}
  .n360 .flow-step.left,.n360 .flow-step.right{justify-content:center;}
  .n360 .flow-step.left .flow-card,.n360 .flow-step.right .flow-card{
    width:100%;text-align:center;padding:80px 34px 28px;min-height:0;
  }
  .n360 .flow-card::before{display:none;}
  .n360 .flow-step.left .flow-node,.n360 .flow-step.right .flow-node{
    left:50%;right:auto;top:-55px;transform:translateX(-50%);width:110px;height:110px;
  }
}
@media(max-width:560px){
  .n360 .features-grid{grid-template-columns:1fr !important;}
  .n360 .glass-blob.b3,.n360 .glass-blob.b5,.n360 .glass-blob.b12,.n360 .glass-blob.b13{display:none;}
  .n360 .glass-blob.b1{width:260px;height:260px;}
  .n360 .cta-banner{padding:40px 24px;}
}

/* w edytorze Elementora elementy z animacji muszą być widoczne od razu */
.elementor-editor-active .n360 .flow-card,
.elementor-editor-active .n360 .feature-card,
.elementor-editor-active .n360 .audience-card{opacity:1 !important;transform:none !important;}