/* ============================================
   DARK OCEAN MIX - Elegancki z niebieskim
   Ciemny + pomarańczowy + niebieski + jasne elementy
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700;800&display=swap');

:root {
    /* === DARK OCEAN MIX PALETTE === */
    --charcoal: #ffffff;            /* Biały tekst na ciemnym */
    --warm-gray: #e8f4f8;           /* Jasny błękitny szary */
    --sand: #2a3f54;                /* Ciemny granatowy z błękitem */
    --cream: #1a2838;               /* Ciemne tło - karty */
    --ivory: #0f1419;               /* Najciemniejsze tło główne */
    
    --sage: #ff9500;                /* Pomarańczowy - główny akcent */
    --sage-dark: #e07800;           /* Ciemniejszy pomarańczowy */
    --sage-light: #ff95001a;        /* Przezroczysty pomarańczowy */
    
    --terra: #3b9ff3;               /* Jasny niebieski - drugi akcent */
    --terra-light: #3b9ff31a;       /* Przezroczysty niebieski */
    --terra-dark: #2680c2;          /* Ciemny niebieski */
    
    /* Dodatkowe jasne kolory */
    --light-blue: #5db2ff;          /* Jasny błękit */
    --light-orange: #ffb84d;        /* Jasny pomarańczowy */
    --soft-cyan: #4dd4e8;           /* Miękki cyan */
    
    /* Różnorodne kolory dla ikon i poziomów */
    --purple: #9333ea;              /* Fioletowy */
    --purple-light: #a855f7;        /* Jasny fioletowy */
    --green: #10b981;               /* Zielony */
    --green-light: #34d399;         /* Jasny zielony */
    --pink: #ec4899;                /* Różowy */
    --pink-light: #f472b6;          /* Jasny różowy */
    --yellow: #f59e0b;              /* Żółty */
    --yellow-light: #fbbf24;        /* Jasny żółty */
    
    /* Jasne teksty - bardzo widoczne */
    --text-bright: #f0f9ff;         /* Bardzo jasny niebieski */
    --text-highlight: #fef3c7;      /* Jasny żółtawy */
    
    --shadow-sm: 0 1px 3px rgba(255, 149, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(59, 159, 243, 0.15);
    --shadow-lg: 0 10px 25px rgba(255, 149, 0, 0.2);
    --shadow-accent: 0 4px 14px rgba(59, 159, 243, 0.4);
    
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    --font-display: 'Playfair Display', serif;
    --font-body: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Zapobieganie scrollowaniu horyzontalnemu na mobile */
*,
*::before,
*::after {
    max-width: 100%;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

body {
    font-family: var(--font-body);
    background: linear-gradient(to bottom,
        #0f1419 0%,
        #141d26 15%,
        #1a2838 30%,
        #1f3444 45%,
        #244050 60%,
        #2a4d5f 80%,
        #2f5a6e 100%
    ) !important;
    background-attachment: fixed !important;
    color: var(--charcoal);
    min-height: 100vh;
    line-height: 1.7;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Zapobieganie gumowaniu (rubber banding) na iOS */
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
}

/* Jasne efekty świetlne */
body::before {
    content: '';
    position: fixed;
    top: 20%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 159, 243, 0.12) 0%, transparent 70%) !important;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    animation: ocean-glow 8s ease-in-out infinite !important;
}

body::after {
    content: '';
    position: fixed;
    bottom: 20%;
    left: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 149, 0, 0.08) 0%, transparent 70%) !important;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

@keyframes ocean-glow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--charcoal);
    font-weight: 700;
    line-height: 1.2;
}

p, li {
    color: var(--warm-gray);
}

.font-serif { font-family: var(--font-display); }
.font-space { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }

/* ============================================
   HERO
   ============================================ */
#hero {
    position: relative;
    min-height: 100vh;
    background: transparent;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* Ukryj strzałkę scroll indicator całkowicie */
#hero .animate-bounce,
#hero .fa-chevron-down,
#hero .bottom-24 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

#hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 30% 20%, rgba(59, 159, 243, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(255, 149, 0, 0.1) 0%, transparent 50%) !important;
    z-index: 1;
}

#hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.18 !important;
    filter: grayscale(10%) brightness(0.8) saturate(1.1) !important;
}

/* ============================================
   NAVIGATION
   ============================================ */
nav {
    backdrop-filter: blur(12px) saturate(120%) !important;
    background: rgba(15, 20, 25, 0.95) !important;
    border-bottom: 1px solid rgba(59, 159, 243, 0.2) !important;
    transition: var(--transition);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* Logo container - kwadrat który zawsze prawidłowo wyświetla logo */
.logo-main {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
}

/* Logo w footerze - dostosowanie do mobile */
.logo-footer {
    object-fit: contain !important;
    height: 2.5rem !important;
    width: auto !important;
    max-height: 2.5rem !important;
}

@media (max-width: 768px) {
    .logo-footer {
        height: 2.25rem !important;
        max-height: 2.25rem !important;
    }
}

nav.scrolled {
    background: rgba(15, 20, 25, 0.98) !important;
    box-shadow: 0 4px 15px rgba(59, 159, 243, 0.3) !important;
}

nav a {
    color: var(--charcoal) !important;
    transition: var(--transition);
    position: relative;
    font-weight: 500;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--terra), var(--sage)) !important;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

nav a:hover {
    color: var(--terra) !important;
}

nav a:hover::after {
    transform: scaleX(1);
}

nav .text-charcoal,
nav a {
    color: var(--charcoal) !important;
}

/* ============================================
   MOBILE MENU
   ============================================ */
#mobileMenu {
    backdrop-filter: blur(20px) !important;
    background: rgba(15, 20, 25, 0.98) !important;
}

#mobileMenu a {
    color: var(--charcoal) !important;
}

#mobileMenu a:hover {
    color: var(--terra) !important;
}

button[class*="fa-bars"],
.mobile-menu-button,
[aria-label="Menu"],
#mobileMenuBtn {
    background: transparent !important;
    color: var(--charcoal) !important;
}

/* Przyciski X (zamknięcia) */
#closeMobileMenu,
#closeVideoModal,
#closeContactModal,
#close-video-btn {
    background: transparent !important;
}

/* ============================================
   SECTIONS
   ============================================ */
section {
    background: transparent !important;
    position: relative;
    z-index: 10;
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Sekcja Process - BEZ PRZEWIJANIA WEWNĘTRZNEGO */
#process {
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

#process .container,
#process .max-w-6xl {
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Wyśrodkowanie wszystkich sekcji */
section .container {
    margin-left: auto !important;
    margin-right: auto !important;
}

section .grid {
    margin-left: auto !important;
    margin-right: auto !important;
}

section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, rgba(59, 159, 243, 0.06), rgba(255, 149, 0, 0.04)) !important;
    opacity: 0.3;
}

#demo, #process, #values, #faq, #portfolio, #contact, #booking {
    color: var(--charcoal) !important;
}

#demo h1, #demo h2, #demo h3, #demo h4,
#process h1, #process h2, #process h3, #process h4,
#values h1, #values h2, #values h3, #values h4,
#faq h1, #faq h2, #faq h3, #faq h4,
#portfolio h1, #portfolio h2, #portfolio h3, #portfolio h4,
#contact h1, #contact h2, #contact h3, #contact h4,
#booking h1, #booking h2, #booking h3, #booking h4 {
    color: var(--charcoal) !important;
}

#demo p, #demo li,
#process p, #process li,
#values p, #values li,
#faq p, #faq li,
#portfolio p, #portfolio li,
#contact p, #contact li,
#booking p, #booking li {
    color: var(--warm-gray) !important;
}

/* Pomarańczowe i niebieskie teksty akcentowe */
.text-primary {
    color: var(--sage) !important;
}

.text-accent {
    color: var(--terra) !important;
}

/* ============================================
   KARTY
   ============================================ */
.bg-white,
.bg-gray-50,
.card, 
.service-card, 
.value-card {
    background: rgba(26, 40, 56, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(59, 159, 243, 0.2) !important;
    transition: var(--transition);
}

.bg-white:hover,
.bg-gray-50:hover,
.card:hover, 
.service-card:hover, 
.value-card:hover,
.group:hover .bg-white,
.group:hover .bg-gray-50 {
    border-color: var(--terra) !important;
    box-shadow: 0 4px 20px rgba(59, 159, 243, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Tekst w kartach */
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4,
.bg-gray-50 h1, .bg-gray-50 h2, .bg-gray-50 h3, .bg-gray-50 h4,
.card h1, .card h2, .card h3, .card h4 {
    color: var(--charcoal) !important;
}

.bg-white p, .bg-white li,
.bg-gray-50 p, .bg-gray-50 li,
.card p, .card li {
    color: var(--warm-gray) !important;
}

.bg-gradient-to-br,
.bg-gradient-to-r {
    background: linear-gradient(135deg, rgba(26, 40, 56, 0.8) 0%, rgba(42, 63, 84, 0.6) 100%) !important;
    border: 1px solid rgba(59, 159, 243, 0.2) !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600 {
    color: var(--charcoal) !important;
}

.text-gray-500,
.text-gray-400 {
    color: var(--warm-gray) !important;
}

.text-blue-600,
.text-blue-700,
.text-blue-800 {
    color: var(--terra) !important;
}

.text-orange-600,
.text-orange-500 {
    color: var(--sage) !important;
}

.text-white,
.text-white * {
    color: #ffffff !important;
}

.text-charcoal { color: var(--charcoal) !important; }
.text-sage { color: var(--sage) !important; }
.text-terra { color: var(--terra) !important; }

/* Jasne, wyróżnione teksty */
.text-bright {
    color: var(--text-bright) !important;
    text-shadow: 0 0 10px rgba(240, 249, 255, 0.3) !important;
}

.text-highlight {
    color: var(--text-highlight) !important;
    text-shadow: 0 0 10px rgba(254, 243, 199, 0.3) !important;
}

/* ============================================
   IKONY - RÓŻNORODNE KOLORY
   ============================================ */
/* Pomarańczowe ikony */
.bg-primary,
.bg-primary.rounded-xl,
.bg-primary.rounded-2xl {
    background: linear-gradient(135deg, var(--sage), var(--light-orange)) !important;
    color: #ffffff !important;
}

/* Niebieskie ikony */
.bg-accent,
.bg-blue-500,
.bg-blue-600,
.bg-blue-700 {
    background: linear-gradient(135deg, var(--terra), var(--light-blue)) !important;
    color: #ffffff !important;
}

/* Fioletowe ikony */
.bg-purple-600,
.bg-indigo-600 {
    background: linear-gradient(135deg, var(--purple), var(--purple-light)) !important;
    color: #ffffff !important;
}

/* Zielone ikony */
.bg-green-600 {
    background: linear-gradient(135deg, var(--green), var(--green-light)) !important;
    color: #ffffff !important;
}

/* Różowe ikony */
.bg-pink-600 {
    background: linear-gradient(135deg, var(--pink), var(--pink-light)) !important;
    color: #ffffff !important;
}

/* Żółte ikony */
.bg-yellow-600 {
    background: linear-gradient(135deg, var(--yellow), var(--yellow-light)) !important;
    color: #ffffff !important;
}

/* Cyan ikony */
.bg-orange-500,
.bg-orange-600,
.bg-terra {
    background: linear-gradient(135deg, var(--soft-cyan), var(--light-blue)) !important;
    color: #ffffff !important;
}

/* Szare/charcoal ikony */
.bg-warm-gray {
    background: linear-gradient(135deg, #64748b, #94a3b8) !important;
    color: #ffffff !important;
}

.bg-charcoal {
    background: linear-gradient(135deg, #475569, #64748b) !important;
    color: #ffffff !important;
}

/* ============================================
   BUTTONS
   ============================================ */
button,
.btn-primary,
button[type="submit"],
.cta-button {
    background: linear-gradient(135deg, var(--sage), var(--light-orange)) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-md) !important;
    border: none;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

button:hover::before {
    width: 300px;
    height: 300px;
}

button:hover,
.btn-primary:hover,
button[type="submit"]:hover,
.cta-button:hover {
    background: linear-gradient(135deg, var(--light-orange), var(--sage)) !important;
    box-shadow: var(--shadow-accent) !important;
    transform: translateY(-2px) !important;
}

button:active {
    transform: translateY(0);
}

.btn-secondary {
    background: transparent !important;
    border: 2px solid var(--terra) !important;
    color: var(--terra) !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--terra), var(--light-blue)) !important;
    color: #ffffff !important;
    border-color: var(--light-blue) !important;
}

/* ============================================
   FORMS
   ============================================ */
input, 
textarea, 
select {
    background: rgba(26, 40, 56, 0.6) !important;
    border: 1px solid rgba(59, 159, 243, 0.25) !important;
    color: var(--charcoal) !important;
    backdrop-filter: blur(5px);
    transition: var(--transition);
}

input:focus, 
textarea:focus, 
select:focus {
    border-color: var(--terra) !important;
    background: rgba(26, 40, 56, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(59, 159, 243, 0.2) !important;
    outline: none;
}

input::placeholder, 
textarea::placeholder {
    color: var(--warm-gray) !important;
    opacity: 0.5;
}

label {
    color: var(--warm-gray) !important;
}

/* ============================================
   FAQ
   ============================================ */
.faq-item {
    margin-bottom: 1rem;
}

.faq-item .faq-question {
    background: rgba(26, 40, 56, 0.6) !important;
    border: 2px solid rgba(59, 159, 243, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    padding: 1.25rem !important;
    border-radius: 12px !important;
    transition: var(--transition) !important;
    width: 100% !important;
    display: block !important;
}

.faq-item .faq-question:hover {
    border-color: var(--terra) !important;
    box-shadow: 0 4px 12px rgba(59, 159, 243, 0.3) !important;
    transform: translateX(4px) !important;
}

.faq-item .faq-question h3 {
    color: var(--charcoal) !important;
    margin: 0 !important;
}

.faq-item .faq-question .fas {
    color: var(--terra) !important;
}

.faq-answer {
    background: rgba(20, 32, 44, 0.6) !important;
    border-left: 3px solid var(--terra) !important;
    border-radius: 0 0 12px 12px !important;
    margin-top: -8px !important;
    padding: 0 !important;
    backdrop-filter: blur(5px) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
}

/* Wewnętrzne elementy FAQ - także ukryte */
.faq-answer > div {
    opacity: 0 !important;
    transform: translateY(-5px) !important;
    transition: opacity 0.3s ease-in-out 0.1s, transform 0.3s ease-in-out 0.1s !important;
}

.faq-answer p {
    color: var(--warm-gray) !important;
    margin: 0 !important;
}

.faq-answer.max-h-96 {
    max-height: 24rem !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.faq-answer.max-h-96 > div {
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding: 2rem !important;
    padding-top: 1rem !important;
}

/* ============================================
   CALENDAR
   ============================================ */
.calendar {
    background: rgba(26, 40, 56, 0.6) !important;
    border: 1px solid rgba(59, 159, 243, 0.25) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    backdrop-filter: blur(10px) !important;
}

.calendar-header {
    border-bottom: 1px solid rgba(59, 159, 243, 0.2) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.calendar-month {
    color: var(--terra) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.calendar-day,
.time-slot {
    background: rgba(36, 64, 80, 0.5) !important;
    border: 1px solid rgba(59, 159, 243, 0.2) !important;
    color: var(--charcoal) !important;
    padding: 0.75rem !important;
    border-radius: 8px !important;
    text-align: center !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
}

.calendar-day:hover:not(:disabled),
.time-slot:hover:not(:disabled) {
    background: rgba(59, 159, 243, 0.2) !important;
    border-color: var(--terra) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 159, 243, 0.3) !important;
}

.calendar-day.bg-primary,
.calendar-day.selected,
.time-slot.selected {
    background: linear-gradient(135deg, var(--sage), var(--light-orange)) !important;
    color: #ffffff !important;
    border-color: var(--sage) !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-md) !important;
}

.calendar-day:disabled,
.time-slot:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* ============================================
   TIMELINE
   ============================================ */
.step-indicator {
    background: rgba(36, 64, 80, 0.5) !important;
    border: 2px solid rgba(59, 159, 243, 0.25) !important;
    color: var(--charcoal);
    transition: all 0.3s ease;
    cursor: pointer;
}

.step-indicator:hover {
    background: rgba(59, 159, 243, 0.2) !important;
    border-color: var(--terra) !important;
    transform: scale(1.1);
}

.step-indicator.active {
    background: linear-gradient(135deg, var(--terra), var(--light-blue)) !important;
    color: #ffffff !important;
    border-color: var(--terra) !important;
    box-shadow: var(--shadow-accent) !important;
    transform: scale(1.15);
}

#progress-bar {
    background: linear-gradient(90deg, var(--sage), var(--terra)) !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    background: rgba(15, 20, 25, 0.95) !important;
    border-top: 1px solid rgba(59, 159, 243, 0.2) !important;
    color: var(--charcoal) !important;
    backdrop-filter: blur(10px);
}

footer h4,
footer h1,
footer h2,
footer h3,
footer h5,
footer h6 {
    color: var(--terra) !important;
}

footer a {
    color: var(--warm-gray) !important;
    transition: var(--transition);
}

footer a:hover {
    color: var(--sage) !important;
}

footer p,
footer li,
footer span {
    color: var(--warm-gray) !important;
}

/* ============================================
   QUOTE SECTIONS
   ============================================ */
blockquote {
    background: linear-gradient(135deg, rgba(59, 159, 243, 0.08), rgba(255, 149, 0, 0.06)) !important;
    border: 1px solid rgba(59, 159, 243, 0.25) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ivory);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--sage), var(--terra));
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--light-orange), var(--light-blue));
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in { animation: fadeIn 0.6s ease-out; }
.animate-fade-in-up { animation: fadeInUp 1s ease-out forwards; }
.animation-delay-200 { animation-delay: 0.2s; opacity: 0; }
.animation-delay-400 { animation-delay: 0.4s; opacity: 0; }
.animation-delay-600 { animation-delay: 0.6s; opacity: 0; }

/* NAPRAWIONA ANIMACJA - bez bugów */
.step-content {
    display: none;
    opacity: 0;
}

.step-content.active {
    display: block;
    opacity: 1;
    /* Usunięta bugująca animacja */
}

/* ============================================
   UTILITIES
   ============================================ */
.bg-cream { background: var(--cream) !important; }
.bg-ivory { background: var(--ivory) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.border-l-4,
.border-primary {
    border-color: var(--sage) !important;
}

.w-24.h-1.bg-primary {
    background: linear-gradient(90deg, var(--sage), var(--terra)) !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--terra);
    outline-offset: 2px;
}

/* ============================================
   KALENDARZ - STYL Z OBRAMOWANIEM
   ============================================ */
.calendar-widget {
    background: rgba(26, 40, 56, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(59, 159, 243, 0.2) !important;
    padding: 1rem;
    border-radius: 12px;
}

/* ============================================
   BOOKING SECTION - WYŚRODKOWANIE NA GŁÓWNYM TLE
   ============================================ */

/* Kalendarz i formularz - WYŚRODKOWANIE BEZ PSOWANIA GRIDA */
#booking .container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Kalendarz i formularz - wyśrodkowanie na mobile - NAPRAWIONE */
@media (max-width: 1023px) {
    #booking .lg\\:grid-cols-2 > div {
        width: 100% !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 2rem !important;
    }
    
    /* Tło kalendarza i formularza - WYŚRODKOWANE */
    #booking .bg-white {
        width: 100% !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Dodatkowe wyśrodkowanie dla mniejszych ekranów */
@media (max-width: 768px) {
    #booking .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    #booking .bg-white {
        width: calc(100% - 2rem) !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

.calendar-widget .grid-cols-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0 !important;
}

.calendar-day {
    border: 1px solid rgba(59, 159, 243, 0.2) !important;
    border-radius: 0 !important;
    min-height: 40px;
    background: rgba(26, 40, 56, 0.4) !important;
    color: var(--charcoal) !important;
    transition: all 0.2s ease;
}

.calendar-day:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--sage), var(--light-orange)) !important;
    color: #ffffff !important;
    border-color: var(--sage) !important;
    z-index: 1;
}

.calendar-day.bg-primary {
    background: linear-gradient(135deg, var(--sage), var(--light-orange)) !important;
    color: #ffffff !important;
    border-color: var(--sage) !important;
}

.calendar-day:disabled {
    background: rgba(20, 30, 40, 0.3) !important;
    color: rgba(232, 244, 248, 0.3) !important;
    cursor: not-allowed;
}

/* Dni tygodnia (nagłówki) */
.calendar-widget .grid-cols-7:first-of-type > div {
    border: 1px solid rgba(59, 159, 243, 0.15) !important;
    background: rgba(26, 40, 56, 0.6) !important;
    color: var(--warm-gray) !important;
    font-weight: 600;
    padding: 0.5rem;
    text-align: center;
}

/* ============================================
   DESKTOP - Video container - NAPRAWIONE
   ============================================ */
@media (min-width: 769px) {
    #video-container {
        position: relative !important;
        width: 100% !important;
        min-height: 400px !important;
        z-index: 20 !important;
    }
    
    #video-container video {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        aspect-ratio: 16/9 !important;
    }
    
    /* Poprawka dla desktop - overlay zawsze widoczny gdy nie ma wideo */
    #pierwsza-historia-container:not(.video-active) #pierwsza-historia-overlay {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Gdy wideo jest aktywne - ukryj overlay i obraz */
    #pierwsza-historia-container.video-active #pierwsza-historia-overlay,
    #pierwsza-historia-container.video-active #pierwsza-historia-img {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Gdy wideo NIE jest aktywne - pokaż overlay i obraz */
    #pierwsza-historia-container:not(.video-active) #pierwsza-historia-img {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    #pierwsza-historia-container:not(.video-active) #video-container {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* ============================================
   LAZY LOADING - Style dla lazy loading obrazów
   ============================================ */
img.lazy {
    filter: blur(5px);
    transition: filter 0.3s ease-in-out;
}

img.lazy:not([data-src]) {
    filter: none;
}

/* Placeholder dla ładujących się obrazów */
img[data-src] {
    background: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   FIX - Naprawka dla uciętych kropek w sekcji proces
   ============================================ */
.step-indicator {
    overflow: visible !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* Kontener dla kropek - NAPRAWIONY z przestrzenią na powiększanie */
#process .relative {
    overflow: visible !important;
}

/* Przestrzeń dla powiększających się kropek */
#process .flex.justify-between.relative {
    padding: 8px 0 !important;
    margin: 0 8px !important;
}

/* Kropki - większa przestrzeń na powiększanie */
#process .step-indicator {
    margin: 0 2px !important;
}

/* Progress bar container - WIĘCEJ MIEJSCA OD GÓRY I NA BOKI */
#process .max-w-4xl > .relative:first-child {
    margin: 3rem auto 2rem !important;
    padding: 1.5rem 1rem 1rem !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 40px !important;
}

/* Pasek postępu - dokładne wyrównanie */
#progress-bar {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 4px !important;
    background: #3b9ff3 !important;
    transition: width 0.5s ease-in-out !important;
    z-index: 1 !important;
}

/* Kropki - centrowanie */
.step-indicator {
    position: relative !important;
    z-index: 10 !important;
}

/* Tło paska - pełna szerokość między kropkami */
#process .absolute.top-1\/2.left-0.right-0.h-1.bg-gray-200 {
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    z-index: 0 !important;
}

/* Pasek postępu - wyrównanie z kropkami */
#progress-bar {
    left: 8px !important;
}

@media (max-width: 768px) {
    /* Większy padding dla kropek na mobile */
    #process .flex.justify-between {
        padding: 0 !important;
        position: relative !important;
    }
    
    .step-indicator {
        min-width: 20px !important;
        min-height: 20px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Naprawka paska postępu na mobile - WIĘCEJ PRZESTRZENI */
    #process .max-w-4xl > .relative:first-child {
        margin: 2.5rem 0.5rem 2rem !important;
        max-width: calc(100% - 1rem) !important;
        padding-top: 1.5rem !important;
    }
    
    /* Pasek postępu - dokładnie między kropkami */
    #progress-bar,
    #process .absolute.h-1.bg-gray-200 {
        left: 10px !important;
        right: 10px !important;
    }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    html { font-size: 16px; }
    .p-8 { padding: 1.5rem; }
    .p-6 { padding: 1rem; }
    
    body::before,
    body::after {
        width: 200px;
        height: 200px;
    }
    
    /* Navbar - kompaktowy ale czytelny */
    nav {
        padding: 0.875rem 1rem !important;
    }
    
    /* Logo container - kwadrat który zawsze mieści logo */
    nav .logo-main {
        object-fit: contain !important;
    }
}

@media (max-width: 640px) {
    /* Tylko subtelne zmniejszenia dla małych ekranów */
    .py-32 { padding-top: 4rem; padding-bottom: 4rem; }
    .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
    
    /* Navbar - trochę mniejszy ale nadal czytelny */
    nav {
        padding: 0.75rem 1rem !important;
    }
    
    /* Logo - mniejszy kwadrat na bardzo małych ekranach */
    nav div[class*="w-10"] {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    
    nav .whitespace-nowrap {
        font-size: 1.125rem !important;
    }
    
    /* Hamburger - dobrze widoczny ale nie za duży */
    #mobileMenuBtn {
        font-size: 1.375rem !important;
        padding: 0.5rem !important;
    }
    
    #mobileMenuBtn i {
        font-size: 1.375rem !important;
    }
}

/* ============================================
   CUSTOM COLORS - ZMIANY KOLORÓW WG SPECYFIKACJI
   ============================================ */

/* 1. "Które latają" - ŻÓŁTY (już ustawione w HTML inline) */
/* Backup rule na wszelki wypadek */
h1 span.italic {
    color: #f59e0b !important;
}

/* 2. Tło za trzema kreskami (hamburger menu) - USUŃ TŁO */
#mobileMenuBtn,
button[id="mobileMenuBtn"] {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

#mobileMenuBtn:hover {
    background: rgba(26, 40, 56, 0.2) !important;
}

/* 3. "It's not about..." cytat - ŻÓŁTY (już ustawione w HTML inline) */
/* Backup rule */
blockquote em[style*="f59e0b"] {
    color: #f59e0b !important;
}

/* 4. "Strony internetowe z filmami..." - JASNY NIEBIESKI */
blockquote span.font-bold {
    color: #5db2ff !important;
}

/* 5. FAZY - kolory już ustawione w HTML, ale dodajmy backup */
.step-content[data-step="1"] .font-mono { color: #ffb84d !important; }
.step-content[data-step="2"] .font-mono { color: #5db2ff !important; }
.step-content[data-step="3"] .font-mono { color: #34d399 !important; }
.step-content[data-step="4"] .font-mono { color: #a855f7 !important; }
.step-content[data-step="5"] .font-mono { color: #f472b6 !important; }

/* 6. PAKIETY - kolory już ustawione w HTML */

/* 7. "Nie jesteś pewien..." - PRZEZROCZYSTY NIEBIESKI */
h3[style*="3b9ff31a"] {
    color: rgba(59, 159, 243, 0.7) !important;
}

/* 8. WARTOŚCI - kolory już ustawione w HTML */

/* 9. Strzałki kalendarza - USUŃ TŁO */
.calendar-header button,
.calendar-nav button,
button[aria-label*="Previous"],
button[aria-label*="Next"],
.calendar button.rounded-lg {
    background: transparent !important;
    border: 1px solid rgba(59, 159, 243, 0.25) !important;
}

.calendar-header button:hover,
.calendar-nav button:hover {
    background: rgba(26, 40, 56, 0.3) !important;
    border-color: rgba(59, 159, 243, 0.5) !important;
}

/* 10. Tło za ikonami w FAQ - CIEMNE KARTY */
#faq .w-12.h-12,
#faq div[class*="w-12"][class*="h-12"] {
    background: #1a2838 !important;
}

/* Upewnienie się, że ikony są widoczne */
#faq .w-12.h-12 i,
#faq div[class*="w-12"][class*="h-12"] i {
    color: #ff9500 !important;
}

/* 11. Przyciski zamykające (X) - BEZ TŁA */
#close-video-btn,
#closeMobileMenu,
#closeVideoModal,
#closeContactModal,
button[id*="close"],
.close-btn,
.modal-close {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

#close-video-btn:hover,
#closeMobileMenu:hover,
#closeVideoModal:hover,
#closeContactModal:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* 12. Cytat - CIEMNIEJSZY ŻÓŁTY */
blockquote[style*="ab6f09"] {
    color: #ab6f09 !important;
    border-color: #ab6f09 !important;
}

/* ========================================
   FORCE COLORS - Wymuszenie kolorów dla konkretnych elementów
   ======================================== */

/* 1. Cytat - obramówka ciemny żółty */
blockquote {
    border-left-color: #ab6f09 !important;
}

/* 2-6. Wszystkie nazwy faz - ciemny żółty */
.process-step[data-step="1"] h3,
.process-step[data-step="2"] h3,
.process-step[data-step="3"] h3,
.process-step[data-step="4"] h3,
.process-step[data-step="5"] h3 {
    color: #ab6f09 !important;
}

/* 7-9. Wartości (values) - jasny niebieski */
#values .value-card h3 {
    color: #3b9ff3 !important;
}

/* 10-12. Pakiety (pricing) - pierwszy niebieski, reszta pomarańczowa */
#pricing .pricing-card:nth-child(1) h3 {
    color: #3b9ff3 !important; /* STARTOWY */
}

#pricing .pricing-card:nth-child(2) h3,
#pricing .pricing-card:nth-child(3) h3 {
    color: #ff9500 !important; /* ROZSZERZONY i PREMIUM */
}

/* 13-14. Przycisk zamykania modala */
.close-modal,
button[aria-label="Close"] {
    background: transparent !important;
    background-color: transparent !important;
    color: #3b9ff3 !important;
}

.close-modal:hover,
button[aria-label="Close"]:hover {
    background: rgba(59, 159, 243, 0.1) !important;
    color: #5db2ff !important;
}

/* ============================================
   MOBILE FIX - Zapobieganie scrollowi poziomemu
   ============================================ */
@media (max-width: 768px) {
    /* Główne kontenery */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    /* KRYTYCZNE - usuń overflow z sekcji żeby nie przewijały się samodzielnie */
    section {
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    /* Process section - BEZ WŁASNEGO PRZEWIJANIA */
    #process,
    #process > *,
    #process .container,
    #process .max-w-6xl {
        overflow: visible !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    /* Wszystkie divy - bez własnego scrolla */
    div {
        overflow: visible !important;
        max-width: 100vw !important;
    }
    
    /* Sekcja procesu - ZERO przewijania */
    #process,
    #process *,
    .step-content,
    .step-content * {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-height: none !important;
    }
    
    #step-content {
        overflow: visible !important;
        min-height: auto !important;
        max-height: none !important;
    }
}

/* Sekcja procesu - usuń min-height dla wszystkich urządzeń */
#step-content {
    min-height: auto !important;
    overflow: visible !important;
}

#process .step-content {
    min-height: auto !important;
    overflow: visible !important;
}

@media (max-width: 1024px) {
    #step-content,
    #step-content.min-h-\\[400px\\] {
        min-height: auto !important;
        overflow: visible !important;
    }
    
    main,
    header,
    footer,
    nav {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    /* Hero section specyficzne poprawki */
    #hero {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    #hero video,
    #hero img {
        max-width: 100vw !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    
    /* Container i max-width elementy */
    .container,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl,
    .max-w-xl {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Zapobieganie wystawaniu elementów */
    * {
        max-width: 100vw !important;
    }
    
    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Wyłączenie touch zoom */
    body {
        touch-action: pan-y !important;
        -ms-touch-action: pan-y !important;
    }
    
    /* Zapobieganie rubber banding na iOS */
    body,
    html {
        overscroll-behavior-x: none !important;
        overscroll-behavior-y: auto !important;
    }
    
    /* Sekcja Odkryj - responsywna wysokość obrazu - POPRAWIONE */
    #demo img,
    #pierwsza-historia-img {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: 280px !important;
        object-fit: cover !important;
        display: block !important;
        transition: opacity 0.3s ease, display 0.3s ease !important;
    }
    
    /* KRYTYCZNE - Ukryj miniaturkę gdy wideo jest aktywne */
    #pierwsza-historia-img.hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Kontener pierwszej historii - POPRAWKI MOBILE */
    #pierwsza-historia-container {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    #pierwsza-historia-container .relative {
        position: relative !important;
        overflow: visible !important;
    }
    
    #pierwsza-historia-container .bg-white {
        overflow: visible !important;
        max-width: 100% !important;
    }
    
    /* Upewnij się że video jest widoczne */
    #video-container:not(.hidden) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    #video-container:not(.hidden) video {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Video container - NAPRAWIONE - video widoczne */
    #video-container {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 1rem !important;
        overflow: hidden !important;
        margin: 0 !important;
        z-index: 20 !important;
        background: #000 !important;
        min-height: 200px !important;
    }
    
    #video-container.hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
    }
    
    #video-container video,
    #pierwsza-historia-video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 1rem !important;
        aspect-ratio: 16/9 !important;
        display: block !important;
        background: #000 !important;
    }
    
    /* Overlay w sekcji Demo - dostosowany do obrazu */
    #pierwsza-historia-overlay {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 10 !important;
        transition: all 0.3s ease !important;
    }
    
    /* Gdy overlay jest ukryty */
    #pierwsza-historia-overlay.hidden {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* Dopasowanie przycisku i tekstu do małych ekranów */
    #pierwsza-historia-overlay h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #pierwsza-historia-overlay p {
        font-size: 0.875rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
    }
    
    #play-historia-btn {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Hero - ABSOLUTNIE bez przewijania */
    #hero {
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        max-width: 100vw !important;
    }
    
    #hero * {
        max-width: 100% !important;
    }
}

/* Naprawka dla animacji AOS - zapobieganie dziwnemu scrollowaniu */
#pierwsza-historia-container {
    overflow: hidden !important;
}

#pierwsza-historia-container[data-aos] {
    pointer-events: auto !important;
}

/* Podczas animacji AOS */
[data-aos="fade"] {
    transition-property: opacity !important;
    transition-duration: 0.5s !important;
}

/* ============================================
   MOBILE VIDEO FIX - Poprawka dla warstw wideo
   ============================================ */
@media (max-width: 768px) {
    /* Poprawka dla nakładających się warstw wideo */
    #pierwsza-historia-container {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* NOWA STRUKTURA WARSTW - obrazek i gradient POD ramką */
    #pierwsza-historia-container .mobile-layered-container {
        position: relative !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    
    /* Obrazek jako tło - przesuń POD ramkę - NAPRAWIONY ROZMIAR */
    #pierwsza-historia-container:not(.video-active) #pierwsza-historia-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        border-radius: 1rem !important;
        object-fit: cover !important;
        max-height: 280px !important;
    }
    
    /* Gradient overlay - również POD tekstem */
    #pierwsza-historia-container:not(.video-active) .mobile-overlay-layer {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2 !important;
        border-radius: 1rem !important;
    }
    
    /* Ramka z tekstem - NAD obrazkiem i gradientem */
    #pierwsza-historia-container:not(.video-active) .mobile-layered-container::after {
        content: '';
        position: absolute;
        inset: 0;
        background: white;
        border-radius: 1rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        z-index: 3;
        pointer-events: none;
        mix-blend-mode: overlay;
        opacity: 0.1;
    }
    
    /* Gdy wideo jest aktywne - ukryj wszystko oprócz wideo */
    #pierwsza-historia-container.video-active #pierwsza-historia-img,
    #pierwsza-historia-container.video-active #pierwsza-historia-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }
    
    /* Usuń efekt ramki gdy wideo jest aktywne */
    #pierwsza-historia-container.video-active .mobile-layered-container::after {
        display: none !important;
    }
    
    /* Video container gdy aktywny - pełnoekranowy w ramce */
    #pierwsza-historia-container.video-active #video-container {
        display: block !important;
        position: relative !important;
        z-index: 30 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: 280px !important;
        background: #000 !important;
        aspect-ratio: 16/9 !important;
        overflow: hidden !important;
        border-radius: 1rem !important;
    }
    
    /* Wideo wewnątrz kontenera */
    #pierwsza-historia-container.video-active #video-container video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: 16/9 !important;
        border-radius: 1rem !important;
    }
    
    /* Przycisk zamknięcia wideo na mobile */
    #close-video-btn {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        z-index: 100 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 8px !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Gdy wideo NIE jest aktywne - efekt warstw - STAŁA WYSOKOŚĆ */
    #pierwsza-historia-container:not(.video-active) {
        min-height: 280px !important;
        max-height: 280px !important;
        height: 280px !important;
    }
    
    #pierwsza-historia-container:not(.video-active) .relative.group {
        min-height: 280px !important;
        max-height: 280px !important;
        height: 280px !important;
        position: relative !important;
    }
    
    /* Kontener mobilny - stała wysokość */
    #pierwsza-historia-container:not(.video-active) .mobile-layered-container {
        height: 280px !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 1rem !important;
    }
    
    #pierwsza-historia-container:not(.video-active) #pierwsza-historia-overlay {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    #pierwsza-historia-container:not(.video-active) #video-container {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Efekt głębi - cienie i ramka */
    #pierwsza-historia-container .mobile-layered-container {
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3) !important;
        border-radius: 1rem !important;
    }
    
    /* Lepszy kontrast dla tekstu na mobile */
    #pierwsza-historia-overlay .absolute.bottom-4 {
        background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.7), transparent) !important;
        padding: 1.5rem !important;
        border-radius: 0 0 1rem 1rem !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    /* NAPRAWKA - Resetuj obrazek po zamknięciu wideo */
    #pierwsza-historia-img {
        transition: none !important;
        transform: none !important;
    }
    
    #pierwsza-historia-img:not(.hidden) {
        display: block !important;
        height: 100% !important;
        max-height: 280px !important;
        object-fit: cover !important;
    }
}

/* Poprawka centrowania elementu formularza na mobile - POSZERZONE I WYŚRODKOWANE */
@media (max-width: 768px) {
    /* Container sekcji booking - pełna szerokość */
    #booking .container {
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    /* Grid w sekcji booking */
    #booking .grid {
        padding: 0 0.5rem !important;
        gap: 2rem !important;
        margin: 0 !important;
    }
    
    /* POSZERZONE ramki kalendarza i formularza - PRAWDZIWE WYŚRODKOWANIE */
    #booking .bg-white {
        margin: 0 auto !important;
        max-width: calc(100% - 1rem) !important;
        width: calc(100% - 1rem) !important;
        padding: 1.25rem !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    }
    
    /* Większe tytuły sekcji */
    #booking h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Poprawka dla kalendarza - WIĘKSZY */
    .calendar-widget {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* WIĘKSZE dni tygodnia */
    .calendar-widget .font-semibold {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.25rem !important;
    }
    
    /* WIĘKSZE dni kalendarza */
    .calendar-day {
        min-height: 45px !important;
        font-size: 1rem !important;
        padding: 0.5rem !important;
    }
    
    /* Poprawka dla formularza kontaktowego - WIĘKSZE INPUTY */
    #bookingForm {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #bookingForm label {
        font-size: 0.9375rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #bookingForm input,
    #bookingForm select,
    #bookingForm textarea {
        padding: 0.875rem !important;
        font-size: 1rem !important;
        border-radius: 0.5rem !important;
    }
    
    #bookingForm button {
        padding: 1rem 2rem !important;
        font-size: 1.125rem !important;
    }
    
    /* Poprawka dla dni kalendarza na mobile */
    .calendar-widget .grid-cols-7 {
        gap: 0.125rem !important;
    }
    
    /* Time slots - większe */
    #time-slots-container button {
        padding: 0.75rem 1rem !important;
        font-size: 0.9375rem !important;
    }
}

/* Naprawka przycisków nawigacji w sekcji proces */
#prev-step, #next-step {
    font-family: 'Space Grotesk', sans-serif !important;
}

#prev-step {
    background: white !important;
    color: #1a2838 !important;
    border: 1px solid rgba(59, 159, 243, 0.25) !important;
}

#prev-step:hover:not(:disabled) {
    background: rgba(59, 159, 243, 0.1) !important;
    transform: translateY(-2px) !important;
}

#next-step {
    background: #3b9ff3 !important;
    color: white !important;
    border: 1px solid #3b9ff3 !important;
}

#next-step:hover {
    background: #5db2ff !important;
    border-color: #5db2ff !important;
    transform: translateY(-2px) !important;
}

/* Mobile - przyciski jeden pod drugim */
@media (max-width: 640px) {
    #process .flex.justify-between.mt-12 {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    #prev-step, #next-step {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.875rem 1.5rem !important;
    }
}

/* Poprawka przycisków kontaktowych na mobile */
@media (max-width: 768px) {
    /* Mniejsze przyciski kontaktowe żeby nie nachodziły */
    #booking .lg\:hidden .grid-cols-2 a {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.875rem !important;
    }
    
    #booking .lg\:hidden .grid-cols-2 i {
        margin-right: 0.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Na bardzo małych ekranach - przyciski jeden pod drugim */
    @media (max-width: 360px) {
        #booking .lg\:hidden .grid-cols-2 {
            grid-template-columns: 1fr !important;
            gap: 0.75rem !important;
        }
    }
}

/* Dodatkowe reguły dla bardzo małych ekranów */
@media (max-width: 480px) {
    .px-4 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .px-6 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .px-8 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    
    /* MAKSYMALNE POSZERZENIE BOOKING na małych ekranach */
    #booking .bg-white {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        padding: 1.25rem 1rem !important;
        box-shadow: none !important;
        border-top: 1px solid #e5e7eb !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    
    /* Container booking - pełna szerokość */
    #booking .container,
    #booking .max-w-6xl {
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    /* Grid bez paddingów */
    #booking .grid {
        padding: 0 !important;
        gap: 0 !important;
    }
    
    /* Nagłówki sekcji - większe i wycentrowane */
    #booking h3 {
        font-size: 1.625rem !important;
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Kalendarz na bardzo małych ekranach */
    .calendar-widget {
        padding: 0.5rem !important;
        width: 100% !important;
    }
    
    .calendar-day {
        min-height: 40px !important;
        font-size: 0.9375rem !important;
        padding: 0.5rem 0.25rem !important;
    }
    
    /* Formularze - większe inputy */
    #bookingForm input,
    #bookingForm select,
    #bookingForm textarea {
        font-size: 16px !important; /* Zapobiega zoom na iOS */
        padding: 1rem !important;
    }
    
    /* Przyciski - większe */
    #bookingForm button,
    .btn-primary {
        padding: 1rem 2rem !important;
        font-size: 1.125rem !important;
        width: 100% !important;
    }
    
    /* Overlay w pierwszej historii - lepsze dopasowanie */
    #pierwsza-historia-overlay {
        padding: 0.75rem !important;
    }
    
    #pierwsza-historia-overlay h3 {
        font-size: 1rem !important;
    }
    
    #pierwsza-historia-overlay p {
        font-size: 0.8125rem !important;
    }
}