/* ==========================================================================
   DEKORACJE KLIENTA — Bajka Pana Kleksa · Nocna Akademia
   
   Pozycje bazowane na oryginalnych lokalizacjach memphis:
   - Hero: ring top:12%/right:8%, circle top:31%/right:24%, 
           squig bottom:24%/right:6%, tri bottom:32%/right:33%
   - Manifest: dots top:40px/left:-30px, circle top:64px/right:8%
   - Pillars: zig top:40px/left:5%, plus top:80px/right:8%
   - Pricing: circle top:70px/left:6%, ring top:120px/right:7%
   - Reviews: squig top:44px/left:6%, tri top:70px/right:6%
   - Finale: ring top:60px/left:8%, plus top:90px/right:16%
   ========================================================================== */

/* ── Bazowy styl ──────────────────────────────── */
.decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  user-select: none;
  will-change: transform, opacity;
}
.decor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Treść ZAWSZE nad dekoracjami ─────────────── */
.wrap,
.hero-content,
.pillar-body,
.price-card,
.review-inner,
.faq-groups,
.faq-group,
.section-head,
.melt {
  position: relative;
  z-index: 2;
}

/* ── Animacje ──────────────────────────────────── */
@keyframes decorFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes decorSway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50%      { transform: translateX(6px) rotate(2deg); }
}
@keyframes decorRotate {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes decorPulse {
  0%, 100% { transform: scale(1); opacity: 0.88; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.decor-float  { animation: decorFloat  6s ease-in-out infinite; }
.decor-sway   { animation: decorSway   7s ease-in-out infinite; }
.decor-rotate { animation: decorRotate 12s ease-in-out infinite; }
.decor-pulse  { animation: decorPulse  3.5s ease-in-out infinite; }

.decor-d1 { animation-delay: 0.4s; }
.decor-d2 { animation-delay: 0.9s; }
.decor-d3 { animation-delay: 1.5s; }
.decor-d4 { animation-delay: 2.1s; }

/* ── Accessibility ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Hover effects ─────────────────────────────── */
.pillar { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(36, 75, 181, 0.22);
}
.price-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(36, 75, 181, 0.18);
}
.review { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.review:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px rgba(27, 42, 107, 0.18);
}


/* ═══════════════════════════════════════════════════
   HERO  (4 elementy)
   Tekst hero-content jest po lewej (max-width 720px).
   Stare pozycje memphis: right:8-33%, top:12-51%.
   Nowe elementy → w tych samych strefach.
   ═══════════════════════════════════════════════════ */

/* A. Gwiazda przy badge'ach — 
   Stara pozycja: plus top:51%/right:13% → 
   Nowa: gwiazda lekko nad hero-chips, po ich prawej */
.hero .dh-star {
  width: 52px; height: 52px;
  top: 18%; right: 24%;
  opacity: 0.95;
  z-index: 2;
  transform: rotate(-12deg);
}

/* B. Szpak — 
   Stara pozycja: ring top:12%/right:8% →
   Nowa: szpak obok prawej krawędzi zdjęcia */
.hero .dh-szpak {
  width: 96px; height: 96px;
  bottom: 21%; right: 34%;
  opacity: 0.92;
  z-index: 2;
}

/* C. Duże koło — tło za zdjęciem
   Stara pozycja: brak bezpośrednika, ale wizualnie za zdjęciem */
.hero .dh-circle {
  width: 280px; height: 280px;
  top: 8%; right: -20px;
  opacity: 0.14;
  z-index: 0;
}

/* D. Trzy kropki — dolna lewa, blisko paska benefitów
   Stara pozycja: tri bottom:32%/right:33% →
   Nowa: podobnie, ale po lewej stronie */
.hero .dh-dots {
  width: 52px; height: 52px;
  bottom: 26%; right: 18%;
  opacity: 0.85;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════
   STATS — pasek benefitów (4 elementy)
   Grid 4 kolumn. Separatory MIĘDZY treścią.
   Pozycje: bliżej textu, nie przy marginesach.
   ═══════════════════════════════════════════════════ */
.stats { position: relative; overflow: hidden; }

/* Między benefitem 1 i 2 */
.stats .ds-dots1 {
  width: 32px; height: 32px;
  top: 50%; left: 24%;
  transform: translateY(-50%);
  opacity: 0.45;
}
/* Między benefitem 2 i 3 */
.stats .ds-dots2 {
  width: 30px; height: 30px;
  top: 50%; left: 49%;
  transform: translateY(-50%);
  opacity: 0.4;
}
/* Między benefitem 3 i 4 */
.stats .ds-dots3 {
  width: 30px; height: 30px;
  top: 50%; left: 74%;
  transform: translateY(-50%);
  opacity: 0.4;
}
/* Gwiazdka blisko nagłówka benefitu */
.stats .ds-star {
  width: 28px; height: 28px;
  top: 18%; right: 8%;
  opacity: 0.5;
  transform: rotate(15deg);
}


/* ═══════════════════════════════════════════════════
   MANIFEST (3 elementy) — spokojne, subtelne
   Stare pozycje: dots top:40px/left:-30px, circle top:64px/right:8%
   ═══════════════════════════════════════════════════ */

/* Łuk w tle — pozycja dawnego dots: top:40px/left:-30px */
.manifest .dm-arc {
  width: 240px; height: 240px;
  top: -30px; right: -60px;
  opacity: 0.08;
  z-index: 0;
}
/* Małe kropki blisko nagłówka — pozycja dawnego circle: top:64px/right:8% */
.manifest .dm-dots {
  width: 42px; height: 42px;
  top: 64px; right: 8%;
  opacity: 0.35;
  z-index: 1;
}
/* Koło — tło, pozycja dawnego ring: bottom:50px/left:10% */
.manifest .dm-circle {
  width: 140px; height: 140px;
  bottom: -40px; left: 10%;
  opacity: 0.07;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════
   MEM BANNER (3 elementy) — ostrożne, tylko z boku
   ═══════════════════════════════════════════════════ */

/* Duży łuk w tle po prawej */
.mem-banner .dmb-arc {
  width: 280px; height: 280px;
  top: -80px; right: -80px;
  opacity: 0.12;
  z-index: 0;
}
/* Niebieski X — akcent w dolnym lewym rogu */
.mem-banner .dmb-x {
  width: 48px; height: 48px;
  bottom: 30px; left: 5%;
  opacity: 0.8;
  z-index: 1;
  transform: rotate(-10deg);
}
/* Mała gwiazda — góra, środek-prawo */
.mem-banner .dmb-star {
  width: 36px; height: 36px;
  top: 40px; right: 25%;
  opacity: 0.85;
  z-index: 1;
  transform: rotate(15deg);
}


/* ═══════════════════════════════════════════════════
   PILLARS — karty „Co Cię czeka" (4 elementy)
   Stare pozycje: zig top:40px/left:5%, plus top:80px/right:8%
   Nowe elementy: przy narożnikach kart.
   ═══════════════════════════════════════════════════ */

/* Gwiazda przy nagłówku sekcji
   Stara pozycja: plus top:80px/right:8% */
.pillars .dp-star {
  width: 42px; height: 42px;
  top: 80px; right: 8%;
  opacity: 0.75;
  z-index: 1;
  transform: rotate(-8deg);
}
/* X przy górnym prawym narożniku 1. lub 2. karty
   Stara pozycja: zig top:40px/left:5% → przesunięty do narożnika */
.pillars .dp-x1 {
  width: 44px; height: 44px;
  top: 40%; right: 32%;
  opacity: 0.7;
  z-index: 1;
  transform: rotate(12deg);
}
/* X przy dolnym lewym narożniku 3. karty
   Stara pozycja: tri bottom:60px/right:4% → przy narożniku karty */
.pillars .dp-x2 {
  width: 40px; height: 40px;
  bottom: 60px; right: 4%;
  opacity: 0.6;
  z-index: 1;
  transform: rotate(-14deg);
}
/* Koło — subtelne tło */
.pillars .dp-circle {
  width: 160px; height: 160px;
  top: 35%; left: -40px;
  opacity: 0.07;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════
   HARMONOGRAM — plan wieczoru (3 elementy)
   ═══════════════════════════════════════════════════ */
.schedule .ds-arc {
  width: 260px; height: 260px;
  top: 50%; right: -80px;
  transform: translateY(-50%);
  opacity: 0.05;
  z-index: 0;
}
.schedule .ds-dots {
  width: 80px; height: 80px;
  top: 40px; right: 5%;
  opacity: 0.15;
  z-index: 1;
}
.schedule .ds-star {
  position: absolute;
  width: 32px; height: 32px;
  top: 20px; left: 16px;
  opacity: 0.8;
  z-index: 3;
  transform: rotate(15deg);
}

/* ═══════════════════════════════════════════════════
   PRICING — cennik (4 elementy)
   Stare pozycje: circle top:70px/left:6%, ring top:120px/right:7%
   ═══════════════════════════════════════════════════ */

/* Gwiazda przy badge'u pierwszej puli */
.pricing .dc-badge-star {
  position: absolute;
  width: 44px; height: 44px;
  top: -22px; left: 50%;
  margin-left: 70px; /* Przesunięcie na prawo od badge'a */
  opacity: 1;
  z-index: 3;
  transform: rotate(-10deg);
}

/* Gwiazda-naklejka przy „Pierwsza pula topnieje"
   Wstawiona jako absolute na krawędzi kuponu */
.pricing .dc-star-melt {
  position: absolute;
  width: 52px; height: 52px;
  top: -20px; right: -20px;
  opacity: 1;
  z-index: 2;
  transform: rotate(15deg);
}
/* Łuk w tle — dolna lewa
   Stara pozycja: dots bottom:30px/right:-30px → ale przerzucony na lewo */
.pricing .dc-arc {
  width: 300px; height: 300px;
  bottom: -80px; left: -100px;
  opacity: 0.1;
  z-index: 0;
}
/* Koło w tle 
   Stara pozycja: circle top:70px/left:6% */
.pricing .dc-circle {
  width: 120px; height: 120px;
  top: 70px; left: 6%;
  opacity: 0.08;
  z-index: 0;
}
/* Mała gwiazda — akcent poniżej kart */
.pricing .dc-star2 {
  width: 32px; height: 32px;
  bottom: 15%; left: 12%;
  opacity: 0.55;
  z-index: 1;
  transform: rotate(18deg);
}


/* ═══════════════════════════════════════════════════
   REVIEWS — opinie (3 elementy)
   Stare pozycje: squig top:44px/left:6%, tri top:70px/right:6%
   ═══════════════════════════════════════════════════ */

/* Trzy kropki — przy górnym narożniku lewej opinii
   Stara pozycja: squig top:44px/left:6% */
.reviews .dr-dots {
  width: 36px; height: 36px;
  top: 44px; left: 6%;
  opacity: 0.55;
  z-index: 1;
}
/* X — przy dolnym narożniku prawej opinii
   Stara pozycja: tri top:70px/right:6% → dolna prawa */
.reviews .dr-x {
  width: 36px; height: 36px;
  bottom: 50px; right: 9%;
  opacity: 0.55;
  z-index: 1;
  transform: rotate(18deg);
}
/* Łuk w tle — subtelne tło */
.reviews .dr-arc {
  width: 200px; height: 200px;
  top: 30%; right: -60px;
  opacity: 0.07;
  z-index: 0;
}

/* Wewnętrzne dekoracje w kartach opinii (szpak, x, kropki) */
.review-card .decor {
  position: absolute;
  z-index: 1;
}
.drc-szpak {
  width: 140px; height: 140px;
  top: -15px; right: -25px;
  opacity: 0.15;
  transform: rotate(15deg);
}
.drc-x {
  width: 60px; height: 60px;
  bottom: 40px; right: 20px;
  opacity: 0.25;
  transform: rotate(-12deg);
}
.drc-dots {
  width: 80px; height: 80px;
  top: 20px; left: 20px;
  opacity: 0.25;
}


/* ═══════════════════════════════════════════════════
   FAQ (4 elementy)
   Treść w .faq-groups max-width 860px, centered.
   Szpak blisko nagłówka, ale POZA listą pytań.
   ═══════════════════════════════════════════════════ */
.faq { position: relative; overflow: hidden; }

/* Szpak przy nagłówku FAQ, po prawej stronie tytułu
   Odpowiada pozycji: blisko section-head, nie w kolumnie pytań */
.faq .df-szpak {
  width: 58px; height: 58px;
  top: 18px; right: 14%;
  opacity: 0.95;
  z-index: 1;
  transform: scaleX(-1);
}
/* Duże koło za kontenerem FAQ — tło prawej dolnej
   Odpowiada dawnemu circle */
.faq .df-circle {
  width: 300px; height: 300px;
  bottom: -80px; right: -80px;
  opacity: 0.08;
  z-index: 0;
}
/* Łuk — tło lewej
   Odpowiada dawnemu ring/squig */
.faq .df-arc {
  width: 240px; height: 240px;
  top: 40%; left: -110px;
  opacity: 0.06;
  z-index: 0;
}
/* Gwiazdka — drobny akcent blisko jednej z grup FAQ */
.faq .df-dots {
  width: 28px; height: 28px;
  top: 260px; left: 8%;
  opacity: 0.4;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════
   FINALE — Final CTA (4 elementy)
   Stare pozycje: ring top:60px/left:8%, plus top:90px/right:16%
   ═══════════════════════════════════════════════════ */

/* Duży łuk w tle — prawa strona, częściowo poza sekcją */
.finale .dfi-arc {
  width: 380px; height: 380px;
  top: -100px; right: -100px;
  opacity: 0.14;
  z-index: 0;
}
/* Gwiazda — akcent blisko CTA
   Stara pozycja: ring top:60px/left:8% */
.finale .dfi-star {
  width: 48px; height: 48px;
  top: 60px; left: 8%;
  opacity: 0.85;
  z-index: 1;
  transform: rotate(10deg);
}
/* X — mniejszy akcent
   Stara pozycja: plus top:90px/right:16% */
.finale .dfi-x {
  width: 44px; height: 44px;
  top: 90px; right: 16%;
  opacity: 0.6;
  z-index: 1;
  transform: rotate(-12deg);
}
/* Łuk w tle — lewa dolna */
.finale .dfi-arc2 {
  width: 220px; height: 220px;
  bottom: -60px; left: -60px;
  opacity: 0.09;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════
   FOOTER — minimalnie (1 element)
   ═══════════════════════════════════════════════════ */
footer { position: relative; overflow: hidden; }
.dfo-dots {
  width: 30px; height: 30px;
  bottom: 24px; right: 6%;
  opacity: 0.32;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ukryj wszystkie dekoracje graficzne na mobile (zgodnie z życzeniem usunięto m.in. kółka itp.) */
  .decor {
    display: none !important;
  }
}