/* ==========================================================================
   Smooth Estate — warstwa modułów premium
   Ciemne sekcje, moduły ze zdjęciami, efekty. Ładowana PO nocturne-shared.css.
   ========================================================================== */

:root {
  --dk-1: #141024;
  --dk-2: #1c1739;
  --dk-text: #f3f0fa;
  --dk-mut: #a8a1c8;
  --dk-line: rgba(145,132,217,0.20);
  --glow: #9184d9;
  --r-lg: 24px;
  --shadow-soft: 0 1px 2px rgba(26,22,38,0.04), 0 8px 24px -12px rgba(26,22,38,0.14);
  --shadow-lift: 0 2px 4px rgba(26,22,38,0.05), 0 28px 60px -24px rgba(26,22,38,0.32);
  --shadow-dark: 0 30px 70px -30px rgba(0,0,0,0.75);
}

/* ---------- 1. Sekcja ciemna (full-bleed) ---------------------------------- */
.n-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--dk-text);
  background:
    radial-gradient(58% 78% at 12% 18%, rgba(145,132,217,0.22), transparent 62%),
    radial-gradient(46% 66% at 88% 26%, rgba(230,168,220,0.13), transparent 62%),
    radial-gradient(60% 60% at 50% 108%, rgba(96,132,200,0.14), transparent 60%),
    linear-gradient(170deg, var(--dk-1) 0%, var(--dk-2) 100%);
}
/* ziarno — nadaje „drukowaną" fakturę zamiast płaskiego tła */
.n-dark::before {
  content: ""; position: absolute; inset: -50%; z-index: -1; opacity: 0.30;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* delikatna poświata na górnej krawędzi */
.n-dark::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(145,132,217,0.55), transparent);
}
/* linia rozdzielająca jest zbędna tuż przy ciemnej sekcji */
.n-dark + .n-hr { display: none; }
.n-hr:has(+ .n-dark) { display: none; }

.n-dark h2, .n-dark h3, .n-dark h4, .n-dark .n-h1 { color: var(--dk-text); }
.n-dark p, .n-dark li { color: var(--dk-mut); }
.n-dark .n-label, .n-dark .n-kicker { color: var(--glow); }
.n-dark .n-kicker::before { background: var(--glow); }
.n-dark .n-section-head .n-label { color: var(--glow); }
.n-dark strong { color: var(--dk-text); }
.n-dark a { color: var(--dk-text); }
.n-dark a:hover { color: var(--glow); }

/* komponenty na ciemnym */
.n-dark .n-model,
.n-dark .n-glass {
  background: rgba(255,255,255,0.035) !important;
  border-color: var(--dk-line) !important;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-dark);
}
.n-dark .n-model li { color: var(--dk-mut); }
.n-dark .n-model li::before { background: var(--glow); }
.n-dark .n-benefit { border-top-color: var(--glow); }
.n-dark .n-benefit::before { background: var(--glow); }
.n-dark .n-benefit-num { color: var(--glow); }
.n-dark .n-faq-item { border-color: var(--dk-line); }
.n-dark .n-faq-item:last-child { border-bottom-color: var(--dk-line); }
.n-dark .n-faq-mark { color: var(--glow); }
.n-dark .n-contact-list li { border-color: var(--dk-line) !important; }
.n-dark .n-step-row::before { background: rgba(145,132,217,0.35); }
.n-dark .n-step-active::before { background: var(--glow); box-shadow: 0 0 16px var(--glow); }
.n-dark .n-step-active { background: linear-gradient(90deg, rgba(145,132,217,0.10), transparent 60%); border-left-color: var(--glow); }
.n-dark .n-step-num { color: var(--dk-mut); }
.n-dark .n-step-active .n-step-num { color: var(--glow); }
.n-dark .n-step-title { color: var(--dk-text); }
.n-dark .n-step-meta { color: var(--dk-mut); }
.n-dark .n-step-meta strong { color: var(--dk-text); }
.n-dark .n-process-timeline { border-left-color: var(--dk-line); }
.n-dark .btn { border-color: rgba(255,255,255,0.28); color: var(--dk-text); }
.n-dark .btn:hover { border-color: var(--glow); color: #fff; }
.n-dark .btn-primary { background: var(--glow); border-color: var(--glow); color: #16122c; }
.n-dark .btn-primary:hover { background: #a79bef; border-color: #a79bef; color: #16122c; }

/* ---------- 2. Moduł: zdjęcie + treść ------------------------------------- */
.n-split {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center;
}
.n-split-wide { grid-template-columns: 1fr 1fr; }
.n-split-flip .n-split-media { order: 2; }

.n-split-media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.n-split-media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%;
  transition: transform 0.9s cubic-bezier(0.2,0.7,0.2,1);
}
.n-split:hover .n-split-media img { transform: scale(1.045); }
/* szklana krawędź + delikatny nalot koloru marki */
.n-split-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 0 0 1px rgba(74,63,168,0.10);
  background: linear-gradient(155deg, rgba(74,63,168,0.10), transparent 42%);
}
.n-dark .n-split-media::after {
  box-shadow: inset 0 0 0 1px rgba(145,132,217,0.28);
  background: linear-gradient(155deg, rgba(145,132,217,0.14), transparent 45%);
}

/* plakietka na zdjęciu */
.n-split-badge {
  position: absolute; left: 20px; bottom: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
  color: #1a1626; background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(26,22,38,0.22);
}
.n-split-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: #4a3fa8; box-shadow: 0 0 10px #4a3fa8;
}
.n-dark .n-split-badge { background: rgba(28,23,57,0.82); color: var(--dk-text); box-shadow: 0 6px 22px rgba(0,0,0,0.5); }
.n-dark .n-split-badge::before { background: var(--glow); box-shadow: 0 0 10px var(--glow); }

.n-split-text h2 {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 36px; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 18px;
}
.n-split-text > p { font-size: 16px; line-height: 1.62; color: var(--color-neutral-300); margin: 0 0 14px; }
.n-dark .n-split-text > p { color: var(--dk-mut); }
.n-split-text .n-label { display: block; margin-bottom: 18px; }

/* lista punktów w module */
.n-split-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 2px; }
.n-split-list li {
  padding: 13px 0; font-size: 14.5px; line-height: 1.5;
  color: var(--color-neutral-200); display: flex; align-items: baseline; gap: 14px;
  border-top: 1px solid rgba(74,63,168,0.14);
}
.n-split-list li:last-child { border-bottom: 1px solid rgba(74,63,168,0.14); }
.n-split-list li::before {
  content: ""; flex: 0 0 16px; height: 1px; background: #4a3fa8; transform: translateY(-4px);
}
.n-dark .n-split-list li { color: var(--dk-mut); border-top-color: var(--dk-line); }
.n-dark .n-split-list li:last-child { border-bottom-color: var(--dk-line); }
.n-dark .n-split-list li::before { background: var(--glow); }

/* ---------- 3. Zdjęcie wewnątrz karty ------------------------------------- */
.n-card-media {
  position: relative; margin: -32px -32px 26px; border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}
.n-card-media img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%;
  transition: transform 0.9s cubic-bezier(0.2,0.7,0.2,1);
}
.n-model:hover .n-card-media img { transform: scale(1.05); }
.n-card-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(26,22,38,0.14));
}
.n-dark .n-card-media::after { background: linear-gradient(180deg, transparent 45%, rgba(20,16,36,0.55)); }

/* ---------- 4. Efekty kart ------------------------------------------------ */
.n-model, .n-blog-card {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s, border-color 0.35s;
}
.n-model { box-shadow: var(--shadow-soft); }
.n-model:hover, .n-blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(74,63,168,0.45) !important;
}
.n-dark .n-model:hover { box-shadow: var(--shadow-dark), 0 0 0 1px rgba(145,132,217,0.35); border-color: rgba(145,132,217,0.45) !important; }

/* włoskowata linia gradientowa na górze karty */
.n-model::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(74,63,168,0.5), transparent);
  opacity: 0; transition: opacity 0.35s;
}
.n-model:hover::after { opacity: 1; }
.n-dark .n-model::after { background: linear-gradient(90deg, transparent, var(--glow), transparent); }

/* kafelki korzyści — subtelne podniesienie */
.n-benefit { transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1); }
.n-benefit:hover { transform: translateY(-3px); }

/* ---------- 5. Panel kontaktowy na ciemnym -------------------------------- */
.n-contact-panel {
  border-radius: var(--r-lg); padding: 38px; position: relative; overflow: hidden;
  background: linear-gradient(168deg, var(--dk-1), var(--dk-2));
  color: var(--dk-text); box-shadow: var(--shadow-dark);
}
.n-contact-panel::before {
  content: ""; position: absolute; inset: -40%; opacity: 0.5; pointer-events: none;
  background: radial-gradient(45% 45% at 20% 15%, rgba(145,132,217,0.35), transparent 60%);
}
.n-contact-panel > * { position: relative; }
.n-contact-panel h2 { color: var(--dk-text) !important; }
.n-contact-panel p { color: var(--dk-mut) !important; }
.n-contact-panel .n-contact-list li { border-color: var(--dk-line) !important; }
.n-contact-panel .n-contact-list span:first-child { color: var(--dk-mut); }
.n-contact-panel a { color: var(--dk-text); }
.n-contact-panel a:hover { color: var(--glow); }
.n-contact-panel .n-card-media { margin: -38px -38px 28px; border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* ---------- 6. Statystyki na ciemnym -------------------------------------- */
.n-dark .n-stats-grid > div { border-top-color: var(--glow) !important; }
.n-dark .n-stats-grid p:first-child { color: var(--dk-text) !important; }
.n-dark .n-stats-grid p:last-child { color: var(--dk-mut) !important; }

/* ---------- 7. Pojawianie się przy scrollu -------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.75s cubic-bezier(0.2,0.7,0.2,1), transform 0.75s cubic-bezier(0.2,0.7,0.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ---------- 8. Responsywność --------------------------------------------- */
@media (max-width: 980px) {
  .n-split, .n-split-wide { grid-template-columns: 1fr; gap: 32px; }
  .n-split-flip .n-split-media { order: 0; }
  .n-split-text h2 { font-size: 29px; }
}
@media (max-width: 640px) {
  .n-contact-panel { padding: 26px; }
  .n-contact-panel .n-card-media { margin: -26px -26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .n-split-media img, .n-card-media img, .n-model, .n-blog-card, .n-benefit { transition: none !important; }
  .n-split:hover .n-split-media img, .n-model:hover .n-card-media img { transform: none; }
}

/* ---------- 9. Karty bloga i chipy na ciemnym ----------------------------- */
.n-dark .n-blog-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--dk-line) !important;
  backdrop-filter: blur(10px);
}
.n-dark .n-blog-card h3 { color: var(--dk-text) !important; }
.n-dark .n-blog-card p { color: var(--dk-mut); }
.n-dark .n-blog-tag { color: var(--glow); }
.n-dark .n-blog-meta { color: var(--dk-mut); border-top-color: var(--dk-line); }
.n-dark .n-blog-card:hover {
  border-color: rgba(145,132,217,0.50) !important;
  box-shadow: var(--shadow-dark);
}
.n-dark .n-chip {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--dk-line) !important;
  color: var(--dk-mut) !important;
}
.n-dark .n-chip:hover { border-color: var(--glow) !important; color: var(--dk-text) !important; }

/* ---------- 10. Sekcja zasięgu na ciemnym --------------------------------- */
.n-coverage-lead {
  font-size: 15px; line-height: 1.6; margin: 0 0 20px; max-width: 480px;
  color: var(--color-neutral-300);
}
.n-dark .n-coverage-lead { color: var(--dk-mut); }
.n-dark .n-coverage-list { color: var(--dk-text); }
.n-dark .n-coverage-list li::before { color: var(--glow); }
.n-dark .n-coverage-map {
  background: linear-gradient(180deg, rgba(145,132,217,0.08), rgba(255,255,255,0.02)) !important;
  border-color: var(--dk-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), var(--shadow-dark);
}