:root {
            --bs-primary: #0A2342;
            --bs-secondary: #2C6E80;
            --bs-accent: #00A896;
            --bs-light: #F8F9FA;
            --bs-dark: #212529;
            --font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        /* Globalne style */
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-family-sans-serif);
            line-height: 1.7;
        }

        section {
            padding: 80px 0;
            overflow-x: hidden;
        }

        /* Animacje przy scrollu */
        .fade-in-section {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Nagłówek */
        .navbar {
            transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .navbar-scrolled {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .navbar-brand {
            font-weight: 700;
            letter-spacing: -1px;
        }

        /* Hero Section */
        .hero {
            background-color: var(--bs-primary);
            color: white;
            padding: 120px 0;
            position: relative;
            background-image: linear-gradient(45deg, var(--bs-primary) 0%, #1a3a63 100%);
        }

        .hero h1 {
            font-size: 2.8rem;
            font-weight: 700;
        }

        .hero h2 {
            font-size: 1.5rem;
            font-weight: 300;
            opacity: 0.9;
        }

        .hero .badge-consultation {
            background-color: var(--bs-accent);
            color: white;
            font-size: 1rem;
            padding: 0.6em 1.2em;
        }

        .hero-icons {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            padding-top: 2rem;
            margin-top: 3rem;
        }

        .hero-icons .icon-item {
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 0.5rem;
            opacity: 0.8;
            font-size: 0.85rem;
        }

        /* CTA */
        .btn-primary {
            background-color: var(--bs-accent);
            border-color: var(--bs-accent);
            padding: 12px 28px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #008a78;
            border-color: #008a78;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 168, 150, 0.2);
        }

        .btn-outline-light {
            padding: 12px 28px;
            font-weight: 600;
        }

        /* Sekcja Korzyści */
        .benefit-card {
            text-align: center;
        }

        .benefit-card i {
            font-size: 3rem;
            color: var(--bs-accent);
        }

        /* Cennik */
        .pricing-card {
            border: 1px solid #e9ecef;
            border-radius: 0.75rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        .pricing-card.highlight {
            border-color: var(--bs-accent);
            border-width: 2px;
        }

        .pricing-card .card-header {
            background-color: transparent;
            border-bottom: 1px solid #e9ecef;
        }

        .pricing-card .price {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--bs-primary);
        }

        .pricing-card .badge-support {
            position: absolute;
            top: 15px;
            right: 15px;
            background-color: var(--bs-secondary);
        }

        /* Portfolio */
        .portfolio-card {
            overflow: hidden;
            border-radius: 0.5rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .portfolio-card img {
            transition: transform 0.4s ease;
        }

        .portfolio-card:hover img {
            transform: scale(1.05);
        }

        /* Stopka */
        footer {
            background-color: var(--bs-dark);
            color: rgba(255, 255, 255, 0.7);
        }

        footer .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        footer .footer-links a:hover {
            color: white;
        }

        /* Media Queries */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.2rem;
            }

            .hero h2 {
                font-size: 1.2rem;
            }

            .hero-icons .icon-item {
                font-size: 0.75rem;
            }

            .hero-icons .col-6 {
                margin-bottom: 1.5rem;
            }

            section {
                padding: 60px 0;
            }
        }


        /* REALIZACJE: poziomy scroll na urządzeniach mobilnych */
        @media (max-width: 768px) {
            #realizacje .horizontal-scroll {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                gap: 1rem;
                /* odstęp między kartami */
                padding: 0 .75rem .5rem;
                /* wewnętrzne marginesy */
                margin-left: -0.75rem;
                /* kompensacja gutterów .container */
                margin-right: -0.75rem;
                scroll-snap-type: x mandatory;
                /* przyklejanie kart */
                -webkit-overflow-scrolling: touch;
                /* płynny scroll na iOS */
            }

            /* ukrycie paska przewijania (opcjonalnie) */
            #realizacje .horizontal-scroll::-webkit-scrollbar {
                display: none;
            }

            #realizacje .horizontal-scroll {
                scrollbar-width: none;
            }

            /* każda "kolumna" staje się kaflem o stałej szerokości */
            #realizacje .horizontal-scroll>[class*="col-"] {
                flex: 0 0 85%;
                /* ~85% szerokości widoku; możesz zmienić np. na 90% / 75% */
                max-width: 85%;
                scroll-snap-align: start;
            }

            /* upewniamy się, że karta wypełnia wysokość kafla */
            #realizacje .portfolio-card {
                height: 100%;
            }
        }