/* ═══════════════════════════════════════════════════
   ESE: Marketing Control System™ — Stylistyka
   ═══════════════════════════════════════════════════ */

/* Base */
body { font-family: 'Inter', sans-serif; }

/* ── Scroll reveal ─────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Dot grid backgrounds ──────────────────────────── */
.dot-grid {
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 28px 28px;
}
.dot-grid-light {
    background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ── Buttons ───────────────────────────────────────── */
.btn-neon {
    background: #FF6A00;
    color: #050505;
    box-shadow: 0 0 20px rgba(255, 106, 0, 0.25), 0 0 60px rgba(255, 106, 0, 0.08);
    transition: all 0.3s;
}
.btn-neon:hover {
    background: #FF8C2A;
    box-shadow: 0 0 30px rgba(255, 106, 0, 0.4), 0 0 80px rgba(255, 106, 0, 0.15);
    transform: translateY(-1px);
}

.btn-outline {
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    transition: all 0.3s;
}
.btn-outline:hover {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.05);
}

/* ── Decision badges ───────────────────────────────── */
.badge-tak {
    background: rgba(255, 106, 0, 0.1);
    color: #FF6A00;
    border: 1px solid rgba(255, 106, 0, 0.2);
}
.badge-nie {
    background: rgba(239, 68, 68, 0.08);
    color: #F87171;
    border: 1px solid rgba(239, 68, 68, 0.15);
}
.badge-warunkowo {
    background: rgba(245, 158, 11, 0.08);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

/* ── Trinity label ─────────────────────────────────── */
.trinity-label {
    background: rgba(255, 106, 0, 0.08);
    color: #FF6A00;
    border: 1px solid rgba(255, 106, 0, 0.15);
    letter-spacing: 0.2em;
}

/* ── Pipeline line animation ───────────────────────── */
.pipeline-line {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.pipeline-line.revealed {
    transform: scaleX(1);
}

/* ── Module cards ──────────────────────────────────── */
.module-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255,255,255,0.06);
}
.module-card:hover {
    border-color: rgba(255, 106, 0, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(255, 106, 0, 0.05);
}
.module-card.trinity-card {
    border-color: rgba(255, 106, 0, 0.25);
    box-shadow: 0 0 30px rgba(255, 106, 0, 0.06);
}
.module-card.trinity-card:hover {
    border-color: rgba(255, 106, 0, 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 40px rgba(255, 106, 0, 0.1);
}

/* ── Navigation ────────────────────────────────────── */
#nav {
    transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;
}
#nav.nav-solid {
    background: rgba(5, 5, 5, 0.45) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
#nav.nav-solid .nav-link { color: rgba(255,255,255,0.6) !important; }
#nav.nav-solid .nav-logo { color: #ffffff !important; }
#nav.nav-solid .nav-cta {
    background: #FF6A00 !important;
    color: #050505 !important;
    border-color: #FF6A00 !important;
}

/* ── Offer cards ───────────────────────────────────── */
.offer-card {
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.4s;
}
.offer-card:hover {
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}
.offer-card.featured {
    border-color: rgba(255, 106, 0, 0.3);
    box-shadow: 0 0 40px rgba(255, 106, 0, 0.06);
}

/* ── Case cards ────────────────────────────────────── */
.case-card {
    transition: all 0.4s;
}
.case-card:hover {
    transform: translateY(-2px);
}

/* ── CTA pulse animation ───────────────────────────── */
@keyframes subtle-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 106, 0, 0.25), 0 0 60px rgba(255, 106, 0, 0.08); }
    50% { box-shadow: 0 0 30px rgba(255, 106, 0, 0.35), 0 0 80px rgba(255, 106, 0, 0.12); }
}
.cta-pulse {
    animation: subtle-pulse 3s ease-in-out infinite;
}

/* ── Noise overlay ─────────────────────────────────── */
.noise::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* ── Step connector line ───────────────────────────── */
.step-line {
    width: 2px;
    background: linear-gradient(to bottom, #FF6A00, transparent);
}

/* ── Control cards (sekcja "Masz marketing") ───────── */
.control-card {
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

/* ── Critical overrides ──────────────────────────────── */
html, body {
    background-color: #050505 !important;
    color: #ffffff;
}

/* ── Solid dark card backgrounds ─────────────────────── */
.offer-card {
    background: #111111 !important;
    border: 1px solid rgba(255,255,255,0.06);
}
.module-card {
    background: #0d0d0d !important;
    border: 1px solid rgba(255,255,255,0.06);
}

/* ── Mobile menu — full dark, no bleed ───────────────── */
#mobileMenu {
    background: #0a0a0a !important;
    border-left: 1px solid rgba(255,255,255,0.08);
}

/* ── Overlay za mobile menu ──────────────────────────── */
#mobileOverlay {
    background: rgba(0,0,0,0.75) !important;
}

/* ── Dot grid bg fix ─────────────────────────────────── */
.dot-grid {
    pointer-events: none;
    z-index: 0;
}

/* ── Ensure all sections have dark bg ────────────────── */
section, footer, nav {
    position: relative;
    z-index: 1;
}

/* ── Smooth scroll ───────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── Offset dla fixed nav (64px wysokość) ────────────── */
section[id] {
    scroll-margin-top: 68px;
}

/* ── Sekcje z id — padding-top pod nawigację ─────────── */
/* py-32 = 8rem, zastępujemy pt tylko dla sekcji z kotwicą */
section[id] {
    padding-top: 5rem !important;
}
/* hero zostawia swój padding */
section#glowna {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}








/* ── Nav overflow — logo może wystawać ───────────────── */
#nav, #nav .max-w-6xl {
    overflow: visible !important;
}

/* ── Nagłówek Weryfikacje — reset padding na mobile ──── */
@media (max-width: 768px) {
    section#weryfikacje .reveal[style*="padding-left"] {
        padding-left: 0 !important;
    }
}