.elementor-410 .elementor-element.elementor-element-c8aeb52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-410 .elementor-element.elementor-element-0e6c482{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-410 .elementor-element.elementor-element-8a32621{--display:flex;--margin-top:50px;--margin-bottom:050px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-410 .elementor-element.elementor-element-cee3794{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-410 .elementor-element.elementor-element-7016d0f{text-align:center;font-family:"Manrope", Sans-serif;font-size:9px;font-weight:200;letter-spacing:2.2px;color:var( --e-global-color-astglobalcolor0 );}.elementor-410 .elementor-element.elementor-element-7016d0f p{margin-block-end:0px;}.elementor-410 .elementor-element.elementor-element-6a7d921{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-410 .elementor-element.elementor-element-f879271{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-410 .elementor-element.elementor-element-fd5ec8c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-410 .elementor-element.elementor-element-5ab9369{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-410 .elementor-element.elementor-element-5ab9369.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-410 .elementor-element.elementor-element-4c8ee10{--display:flex;--min-height:0px;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-410 .elementor-element.elementor-element-9aac51c{text-align:start;font-family:"Manrope", Sans-serif;font-size:9px;font-weight:200;letter-spacing:2.2px;color:var( --e-global-color-astglobalcolor0 );}.elementor-410 .elementor-element.elementor-element-9aac51c p{margin-block-end:0px;}.elementor-410 .elementor-element.elementor-element-44fe798{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-410 .elementor-element.elementor-element-44fe798 .elementor-heading-title{text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:var( --e-global-color-astglobalcolor0 );}.elementor-410 .elementor-element.elementor-element-a97d9fa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-410 .elementor-element.elementor-element-2dbd263 .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-410 .elementor-element.elementor-element-7f27a4b{--display:flex;}.elementor-410 .elementor-element.elementor-element-075dbf1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-410 .elementor-element.elementor-element-a912af7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-410:not(.elementor-motion-effects-element-type-background), body.elementor-page-410 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}body.elementor-page-410{margin:0px 0px 0px 0px;}@media(min-width:768px){.elementor-410 .elementor-element.elementor-element-5ab9369{--width:53.964%;}.elementor-410 .elementor-element.elementor-element-4c8ee10{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-c8aeb52 */<!-- 
INSTRUKCJA:
Wklej ten kod do widgetu "HTML" w Elementorze.
-->

<!-- Pobieramy czcionkę Manrope -->
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700;800&display=swap" rel="stylesheet">

<style>
    /* === 1. ANIMACJE === */
    @keyframes heroFadeUp {
        0% { opacity: 0; transform: translateY(30px); }
        100% { opacity: 1; transform: translateY(0); }
    }

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

    @keyframes btnPulse {
        0% { box-shadow: 0 0 0 0 rgba(245, 54, 5, 0.4); }
        70% { box-shadow: 0 0 0 15px rgba(245, 54, 5, 0); }
        100% { box-shadow: 0 0 0 0 rgba(245, 54, 5, 0); }
    }

    /* === 2. KONTENER GŁÓWNY (Fix na Pełną Szerokość) === */
    .kacper-hero-section {
        font-family: 'Manrope', sans-serif;
        text-align: center;
        position: relative;
        
        /* HACK: Wymuszamy wyjście poza kontener Elementora */
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        
        /* Wysokość */
        min-height: 85vh; /* Zajmuje 85% ekranu */
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    /* === 3. TŁO (ABSOLUTNE) === */
    .kacper-hero-bg {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url('https://konskraft.pl/wp-content/uploads/2025/12/P2042470-scaled.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }

    /* === 4. WARSTWA PRZYCIEMNIAJĄCA === */
    .kacper-hero-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.7); 
        z-index: 1;
    }

    /* === 5. EFEKT FADE TO BLACK (NA DOLE) === */
    .kacper-hero-fade {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 150px;
        background: linear-gradient(to bottom, transparent 0%, #050505 100%);
        z-index: 2;
    }

    /* === 6. KONTENER TREŚCI === */
    .kacper-hero-content {
        position: relative;
        z-index: 10; 
        max-width: 1000px;
        padding: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* === 7. LINIA 1: Biały Nagłówek === */
    .kacper-sub-headline {
        color: #ffffff;
        font-size: 32px; 
        font-weight: 700;
        margin-bottom: 25px; 
        line-height: 1.2;
        opacity: 0;
        animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        animation-delay: 0.1s;
    }

    /* === 8. LINIA 2 i 3: Główny Nagłówek === */
    .kacper-headline {
        color: #ffffff;
        font-size: 64px; 
        font-weight: 800; 
        line-height: 1.1;
        letter-spacing: -1.5px; 
        margin-top: 0;
        margin-bottom: 45px; 
        text-shadow: 0 10px 30px rgba(0,0,0,0.5);
        opacity: 0;
        animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        animation-delay: 0.2s;
    }

    /* Napis z falą gradientową + GLOW */
    .kacper-gradient-text {
        background: linear-gradient(
            to right, 
            #f53605 0%,   
            #ff7850 50%,  
            #f53605 100%  
        );
        background-size: 200% auto; 
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: textWave 3s linear infinite;
        display: inline-block;
        filter: drop-shadow(0 0 25px rgba(245, 54, 5, 0.6));
    }

    /* === 9. OPIS (Paragraf) === */
    .kacper-description {
        color: #b0b0b0; 
        font-size: 16px;
        font-weight: 300;
        line-height: 1.6;
        max-width: 700px;
        
        /* ZMIANA: Bardzo duży margines (120px) */
        margin-bottom: 120px !important; 
        
        opacity: 0;
        animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        animation-delay: 0.3s;
    }

    /* === 10. PRZYCISKI === */
    .kacper-btn-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        opacity: 0;
        animation: heroFadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        animation-delay: 0.4s;
    }

    .kacper-btn-primary {
        background-color: #f53605; 
        color: white;
        padding: 16px 36px;
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
        border: none;
        border-radius: 4px; 
        cursor: pointer;
        transition: transform 0.2s ease, background-color 0.2s ease;
        
        /* ZMIANA: Usunięcie podkreślenia "na siłę" */
        text-decoration: none !important;
        
        animation: btnPulse 3s infinite;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

    .kacper-btn-primary:hover {
        background-color: #d12e04; 
        transform: translateY(-2px);
    }

    .kacper-btn-secondary {
        background-color: transparent; 
        color: white;
        padding: 16px 36px;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase; 
        border: 1px solid #ffffff; 
        border-radius: 4px; 
        cursor: pointer;
        transition: all 0.3s ease;
        
        /* ZMIANA: Usunięcie podkreślenia "na siłę" */
        text-decoration: none !important;
    }

    .kacper-btn-secondary:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
    }

    /* === RESPANSYWNOŚĆ === */
    @media (max-width: 768px) {
        .kacper-sub-headline {
            font-size: 24px;
            margin-bottom: 15px;
        }
        .kacper-headline {
            font-size: 38px; 
            letter-spacing: -0.5px;
            margin-bottom: 30px;
        }
        .kacper-description {
            font-size: 14px;
            padding: 0 20px;
            
            /* ZMIANA: Mniejszy odstęp na telefonie, żeby nie było dziury */
            margin-bottom: 60px !important; 
        }
        .kacper-btn-container {
            flex-direction: column;
            gap: 15px;
            width: 100%;
            padding: 0 20px;
        }
        .kacper-btn-primary, .kacper-btn-secondary {
            width: 100%;
            text-align: center;
        }
    }
</style>

<div class="kacper-hero-section">
    
    <!-- Tło i Warstwy -->
    <div class="kacper-hero-bg"></div>
    <div class="kacper-hero-overlay"></div>
    <div class="kacper-hero-fade"></div>

    <!-- Treść -->
    <div class="kacper-hero-content">
        
        <!-- Linia 1: Biała góra -->
        <div class="kacper-sub-headline">
            Więcej niż operator czy fotograf.
        </div>

        <!-- Linia 2 i 3: Główne hasło -->
        <h1 class="kacper-headline">
            <span class="kacper-gradient-text">Twój strategiczny partner</span><br>
            w budowaniu wizerunku
        </h1>

        <!-- Linia 4: Opis -->
        <p class="kacper-description">
            Łączę strategię marketingową z techniczną precyzją. Tworzę wideo, które nie tylko wygląda, ale realizuje cele biznesowe.
        </p>

        <!-- Przyciski -->
        <div class="kacper-btn-container">
            <a href="#realizacje" class="kacper-btn-primary">
                Zobacz realizacje
            </a>
            <a href="#proces" class="kacper-btn-secondary">
                Poznaj mój proces
            </a>
        </div>
        
    </div>

</div>/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5ab9369 *//* EFEKT FADE TO BLACK DLA ZDJĘCIA */

/* 1. Ustawiamy relatywną pozycję dla kontenera zdjęcia */
.fade-bottom-overlay {
    position: relative !important;
}

/* 2. Tworzymy "sztuczną" warstwę na wierzchu */
.fade-bottom-overlay::after {
    content: "";
    position: absolute;
    bottom: 0;      /* Przyklejamy do dołu */
    left: 0;
    width: 100%;    /* Szerokość zdjęcia */
    
    /* === TU REGULUJESZ WYSOKOŚĆ ZANIKANIA === */
    height: 250px;  /* Jak wysoko gradient ma wchodzić na zdjęcie (np. 150px, 300px) */
    
    /* === GRADIENT === */
    /* Od góry (przezroczysty) -> do dołu (Twój czarny #050505) */
    background: linear-gradient(to bottom, transparent 0%, #050505 100%);
    
    pointer-events: none; /* Dzięki temu można klikać w przyciski pod gradientem */
    z-index: 1; /* Musi być nad zdjęciem, ale pod tekstami */
}/* End custom CSS */