@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;700&display=swap');

html, body {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: 'Inter', 'Segoe UI', 'Arial', 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #f0f4ff 0%, #e9e6ff 100%);
    scroll-snap-type: y mandatory;
    min-height: 100vh;
}

.section-animate, .hero {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 80px;
}

.hero {
    background: linear-gradient(120deg, #007bff 60%, #6c63ff 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0 0 2.5rem 2.5rem;
    box-shadow: 0 8px 32px #6c63ff22;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    margin-top: 2vh !important;
}

.hero .container {
    position: relative;
    z-index: 1;
    margin-top: 80px;
    padding-top: 0;
}

.hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: 40px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #fff3 0%, #6c63ff00 80%);
    z-index: 0;
}

/* Dekoracyjna mgła/gradient w hero */
.hero-bg-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.22;
    pointer-events: none;
}

.hero>*:not(.hero-bg-video),
.hero .container {
    position: relative;
    z-index: 1;
}

/* HERO nagłówek: lekko niebieskawy, gradientowy */
.hero h1,
.hero .display-2,
.hero .display-1 {
    color: rgba(255, 255, 255, 0.93);
    background: linear-gradient(90deg, #f8fafd 60%, #e9e6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 32px #6c63ff22, 0 2px 8px #fff8;
    transition: color 0.3s, background 0.3s;
}

/* Mockup sekcja */
.mockup-section {
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.10);
    padding: 40px 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
}

.mockup-img {
    border-radius: 1.5rem;
    box-shadow: 0 4px 32px rgba(44, 62, 80, 0.13);
    max-width: 100%;
    height: auto;
    border: 6px solid #f0f4ff;
}

/* Karty produktów i klientów */
.product-card, .client-card {
    border: none;
    border-radius: 1.2rem;
    box-shadow: 0 4px 24px rgba(44, 62, 80, 0.10);
    transition: transform 0.2s, box-shadow 0.2s;
    background: #fff;
}

.product-card:hover, .client-card:hover {
    transform: translateY(-7px) scale(1.03);
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.13);
}

.product-card .btn {
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* Support section */
.support-section {
    background: linear-gradient(120deg, #6c63ff 60%, #007bff 100%);
    color: #fff;
    padding: 60px 0;
    border-radius: 2rem 2rem 0 0;
    margin-top: 60px;
    box-shadow: 0 8px 32px #ffb34722;
}

.support-section .btn {
    box-shadow: 0 2px 12px #0002;
}

/* Footer */
.footer {
    background: #222;
    color: #fff;
    padding: 30px 0 10px 0;
    border-radius: 0 0 2rem 2rem;
}

.footer a:hover,
.footer a:focus {
    color: #ff9800;
    text-decoration: underline;
}

/* Ikony */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f0f4ff;
    color: #6c63ff;
    font-size: 2rem;
    margin-bottom: 16px;
}

.icon-circle,
.icon-accent {
    background: #ffb34722;
    color: #ff9800;
    border: 2px solid #ffb34744;
}

/* Pasek nawigacji sticky z cieniem */
#mainNav {
    transition: box-shadow .2s, background .2s;
    z-index: 1051;
}

#mainNav.scrolled {
    box-shadow: 0 2px 16px #6c63ff22;
    background: #fff !important;
}

/* --- MENU: widowiskowa animacja podkreślenia i wow-in-right --- */
.navbar-nav .nav-link {
    position: relative;
    transition: color 0.25s cubic-bezier(.4, 2, .6, 1);
    overflow: hidden;
}

.navbar-nav .nav-link::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffb347 0%, #ff9800 100%);
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(.4, 2, .6, 1), left 0.3s cubic-bezier(.4, 2, .6, 1);
    z-index: 1;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:focus {
    color: #ff9800 !important;
    font-weight: 700;
    text-shadow: 0 2px 16px #ffb34755, 0 2px 8px #fff8;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:focus::after {
    width: 80%;
    left: 10%;
}

/* Wirtualny laptop - większy o 60px, poprawione ratio */
.device-frame.device-laptop {
    width: 660px !important;         /* było 600px */
    max-width: 95vw !important;
    margin: 0 auto 56px auto !important; /* było 32px, teraz niżej */
    position: relative;
    background: transparent;
}

.device-frame.device-laptop .device-screen {
    background: #222;
    border-radius: 18px 18px 8px 8px;
    border: 8px solid #444;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(44, 62, 80, 0.18);
    height: 370px !important;        /* było 360px, mniej niż szerokość dla lepszego ratio */
    aspect-ratio: 16/9;              /* typowy ekran laptopa */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-frame.device-laptop .device-base {
    width: 80%;
    height: 22px;
    background: #444;
    border-radius: 0 0 16px 16px;
    margin: -4px auto 0 auto;
    box-shadow: 0 2px 12px #0003;
}

/* Wirtualny telefon - subtelnie niżej */
.device-frame.device-phone {
    width: 190px !important;
    max-width: 50vw !important;
    margin: 0 auto 40px auto !important; /* było 16px, teraz niżej */
    position: relative;
    background: transparent;
}

.device-frame.device-phone .device-screen {
    background: #111;
    border-radius: 32px;
    border: 8px solid #444;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(44, 62, 80, 0.13);
    height: 380px !important;
    aspect-ratio: 9/19.5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Obrazki w urządzeniach - zawsze mieszczą się w ekranie */
.device-frame.device-phone .demo-slide-img,
.device-frame.device-phone img,
.device-frame.device-laptop .demo-slide-img,
.device-frame.device-laptop img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
    background: #fff;
}

/* Zwiększ też .preview-section, by nie ograniczała laptopa */
.preview-section {
    min-width: 660px !important;
    min-height: 420px !important;
    width: 100% !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-top: 24px;     /* subtelnie niżej */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Responsywność - laptop zawsze większy od telefonu */
@media (max-width: 1200px) {
    .device-frame.device-laptop,
    .preview-section {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .device-frame.device-laptop {
        width: 650px !important;
    }
    .device-frame.device-laptop .device-screen {
        height: 360px !important;
    }
}

@media (max-width: 991px) {
    .device-frame.device-laptop,
    .preview-section {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .device-frame.device-laptop {
        width: 420px !important;
    }
    .device-frame.device-laptop .device-screen {
        height: 180px !important;
    }
    .device-frame.device-phone {
        width: 110px !important;
    }
    .device-frame.device-phone .device-screen {
        height: 140px !important;
    }
}

@media (max-width: 576px) {
    .device-frame.device-laptop {
        width: 100% !important;
        max-width: 90vw !important;
    }
    .device-frame.device-laptop .device-screen {
        height: 120px !important;
    }
    .device-frame.device-phone {
        width: 80px !important;
    }
    .device-frame.device-phone .device-screen {
        height: 80px !important;
    }
    .preview-section {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* --- NOWE ANIMACJE WOW: powolny wjazd od boku z fade-in i rozmyciem --- */
@keyframes wow-slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-400px) scale(0.95);
        filter: blur(6px);
    }

    60% {
        opacity: 0.7;
        transform: translateX(20px) scale(1.02);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes wow-slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(400px) scale(0.95);
        filter: blur(6px);
    }

    60% {
        opacity: 0.7;
        transform: translateX(-20px) scale(1.02);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.wow-in-left,
.wow-in-right {
    opacity: 0;
}

.wow-in-left.wow-animated {
    animation: wow-slide-in-left 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

.wow-in-right.wow-animated {
    animation: wow-slide-in-right 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* --- PRZYKŁAD UŻYCIA: dodaj klasę wow-in-left lub wow-in-right do elementów, które mają się animować --- */
/* Przykład:
   <h1 class="wow-in-left">Nagłówek</h1>
   <a class="nav-link wow-in-right" ...>Menu</a>
   <div class="card-animate wow-in-left">Karta</div>
*/

/* Pozostałe kolory i tła pozostają niebiesko-fioletowe, akcenty są bardzo subtelne */

.team-avatar {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 12px #6c63ff22;
    margin-bottom: 10px;
    background: #f0f4ff;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.support-bg-img {
    background: url('../img/tlo/pexels-yankrukov-8867271.jpg') center center/cover no-repeat;
    opacity: 0.18;
    filter: blur(2.5px) brightness(0.93);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.5s;
    /* Możesz dodać maskę dla lepszego kontrastu: */
    /* mask-image: linear-gradient(to bottom, #fff 60%, transparent 100%); */
}

.costs-bottom-bg {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    background: transparent;
}

.costs-bottom-bg-wrap {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
}

.costs-bottom-bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 320px;
    background: url('../img/tlo/pexels-leeloothefirst-7163957.jpg') center 80%/cover no-repeat;
    opacity: 0.18;
    filter: blur(2.5px) brightness(0.97);
    z-index: 0;
    pointer-events: none;
}

/* --- Fancy Card Style for all tiles --- */
.card-animate,
.team-card,
.client-card,
.product-card {
    position: relative;
    border: none;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #fff 60%, #f0f4ff 100%);
    box-shadow: 0 4px 32px 0 #6c63ff18, 0 1.5px 8px #007bff11;
    transition: 
        transform 0.25s cubic-bezier(.22,1,.36,1),
        box-shadow 0.25s cubic-bezier(.22,1,.36,1),
        background 0.3s;
    overflow: hidden;
    z-index: 1;
}

.card-animate::before,
.team-card::before,
.client-card::before,
.product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 80% 10%, #6c63ff22 0%, #fff0 70%);
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.3s;
}

.card-animate:hover,
.team-card:hover,
.client-card:hover,
.product-card:hover {
    transform: translateY(-10px) scale(1.035) rotate(-0.5deg);
    box-shadow: 0 8px 48px 0 #6c63ff33, 0 4px 24px #007bff22;
    background: linear-gradient(120deg, #f8fafd 60%, #e9e6ff 100%);
}

.card-animate:hover::before,
.team-card:hover::before,
.client-card:hover::before,
.product-card:hover::before {
    opacity: 1;
    background: radial-gradient(circle at 30% 90%, #ffb34733 0%, #fff0 70%);
}

.card-animate .display-5,
.team-card .display-5,
.client-card .display-5,
.product-card .display-5 {
    background: linear-gradient(90deg, #6c63ff 40%, #ff9800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 12px #6c63ff22);
    font-size: 2.7rem;
    margin-bottom: 0.7rem;
    transition: filter 0.3s;
}

.card-animate:hover .display-5,
.team-card:hover .display-5,
.client-card:hover .display-5,
product-card:hover .display-5 {
    filter: drop-shadow(0 4px 24px #ff980055);
}

.card-animate h5,
.team-card h5,
.client-card h5,
.product-card h5 {
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
    color: #222;
    position: relative;
    z-index: 1;
}

.card-animate p,
.team-card p,
.client-card p,
.product-card p {
    color: #555;
    font-size: 1.04rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.card-animate .team-avatar,
.team-card .team-avatar {
    border: 4px solid #fff;
    box-shadow: 0 2px 16px #6c63ff22, 0 1px 4px #ffb34722;
    transition: box-shadow 0.3s, border-color 0.3s;
}

.team-card:hover .team-avatar {
    border-color: #ff9800;
    box-shadow: 0 4px 32px #ffb34744, 0 2px 8px #6c63ff33;
}

.card-animate ul,
.team-card ul,
.client-card ul,
.product-card ul {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    color: #666;
    font-size: 0.97rem;
    z-index: 1;
    position: relative;
}

.card-animate ul li::before,
.team-card ul li::before,
.client-card ul li::before,
.product-card ul li::before {
    content: "•";
    color: #6c63ff;
    margin-right: 0.5em;
    font-weight: bold;
    font-size: 1.1em;
    vertical-align: middle;
}

.card-animate .bi,
.team-card .bi,
.client-card .bi,
.product-card .bi {
    vertical-align: middle;
    margin-bottom: 0.2em;
}

.card-animate .border-primary,
.team-card .border-primary,
.client-card .border-primary,
.product-card .border-primary {
    border-width: 2px !important;
    border-color: #6c63ff !important;
}

@media (max-width: 991px) {
    .card-animate,
    .team-card,
    .client-card,
    .product-card {
        border-radius: 1.1rem;
    }
}