/* ============================================================
   RODZINA 1: APTOS (Główna - teksty, przyciski, akcenty)
   ============================================================ */

        /* Regular & Italic (400) */
        @font-face {
            font-family: 'Aptos';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos.ttf') format('truetype');
            font-weight: 400;
            font-style: normal;
        }

        @font-face {
            font-family: 'Aptos';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Italic.ttf') format('truetype');
            font-weight: 400;
            font-style: italic;
        }

        /* Bold & Bold Italic (700) */
        @font-face {
            font-family: 'Aptos';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Bold.ttf') format('truetype');
            font-weight: 700;
            font-style: normal;
        }

        @font-face {
            font-family: 'Aptos';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Bold%20Italic.ttf') format('truetype');
            font-weight: 700;
            font-style: italic;
        }

        /* ExtraBold & ExtraBold Italic (800) */
        @font-face {
            font-family: 'Aptos';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20ExtraBold.ttf') format('truetype');
            font-weight: 800;
            font-style: normal;
        }

        @font-face {
            font-family: 'Aptos';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20ExtraBold%20Italic.ttf') format('truetype');
            font-weight: 800;
            font-style: italic;
        }

        /* Black (900) */
        @font-face {
            font-family: 'Aptos';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Black.ttf') format('truetype');
            font-weight: 900;
            font-style: normal;
        }


        /* ============================================================
   RODZINA 2: APTOS DISPLAY (Duże nagłówki, logo, Hero)
   ============================================================ */

        @font-face {
            font-family: 'Aptos Display';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Display.ttf') format('truetype');
            font-weight: 400;
            font-style: normal;
        }

        @font-face {
            font-family: 'Aptos Display';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Display%20Italic.ttf') format('truetype');
            font-weight: 400;
            font-style: italic;
        }

        @font-face {
            font-family: 'Aptos Display';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Display%20Bold.ttf') format('truetype');
            font-weight: 700;
            font-style: normal;
        }

        @font-face {
            font-family: 'Aptos Display';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Display%20Bold%20Italic.ttf') format('truetype');
            font-weight: 700;
            font-style: italic;
        }


        /* ============================================================
   RODZINA 3: APTOS NARROW (Menu, Sidebary, Tabela danych)
   ============================================================ */

        @font-face {
            font-family: 'Aptos Narrow';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Narrow.ttf') format('truetype');
            font-weight: 400;
            font-style: normal;
        }

        @font-face {
            font-family: 'Aptos Narrow';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Narrow%20Italic.ttf') format('truetype');
            font-weight: 400;
            font-style: italic;
        }

        @font-face {
            font-family: 'Aptos Narrow';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Narrow%20Bold.ttf') format('truetype');
            font-weight: 700;
            font-style: normal;
        }

        @font-face {
            font-family: 'Aptos Narrow';
            src: url('https://raw.githubusercontent.com/ironveil/ttf-aptos/main/Aptos%20Narrow%20Bold%20Italic.ttf') format('truetype');
            font-weight: 700;
            font-style: italic;
        }

        /* --- GŁÓWNE USTAWIENIA --- */
        body {
            font-family: 'Aptos', system-ui, sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #334155;
            /* slate-700 */
            scroll-behavior: smooth;
        }

        h1,
        h2,
        h3 {
            font-family: 'Aptos Display', sans-serif;
            font-weight: 700;
        }

        .logo-text {
            font-family: 'Aptos', system-ui, sans-serif;
            font-weight: 900;
        }

        /* --- NAWIGACJA --- */
        .nav-link {
            font-family: 'Aptos Display', sans-serif;
            position: relative;
            font-weight: 400;
            transition: color 0.3s ease;
        }

        .nav-link:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #22c55e;
            /* green-500 */
            transition: width 0.3s ease;
        }

        .nav-link:hover:after {
            width: 100%;
        }

        /* --- HERO & BACKGROUNDS --- */
        .hero-bg {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
                url('https://picsum.photos/id/1015/2000/1200') center/cover no-repeat;
        }

        /* --- KARTY USŁUG --- */
        .service-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(226, 232, 240, 0.8);
            /* slate-200 */
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px -15px rgba(34, 197, 94, 0.15);
            border-color: rgba(34, 197, 94, 0.4);
        }

        /* --- PORTFOLIO --- */
        .portfolio-item {
            overflow: hidden;
            border-radius: 2rem;
            background: white;
            transition: all 0.3s ease;
        }

        .portfolio-item img {
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .portfolio-item:hover img {
            transform: scale(1.08);
        }

        /* --- LIGHTBOX (POWIĘKSZENIE ZDJĘĆ) --- */
        #lightbox {
            transition: opacity 0.3s ease;
            backdrop-filter: blur(8px);
        }

        #lightbox img {
            animation: zoomIn 0.3s ease-out;
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* --- FORMATOWANIE TREŚCI (WYŁĄCZENIE KODU HTML W TEKŚCIE) --- */
        .content-render p {
            margin-bottom: 1rem;
        }

        .content-render strong {
            font-weight: 700;
            color: #1e293b;
        }

        /* --- UTILITY --- */
        .text-shadow {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* Obcinanie tekstu do 3 linii */
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Stylizacja linków wewnątrz opisu portfolio */
        .portfolio-desc a {
            color: #22c55e;
            /* Kolor zielony Tailwinda */
            text-decoration: underline;
            font-weight: 600;
            transition: color 0.2s;
        }

        .portfolio-desc a:hover {
            color: #16a34a;
        }

        @keyframes marquee-cities {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .animate-marquee-cities {
            display: flex;
            flex-direction: row;
            /* Wymuszenie rzędu */
            white-space: nowrap;
            /* Zapobieganie łamaniu tekstu */
            width: max-content;
            animation: marquee-cities 80s linear infinite;
        }

        #city-cloud,
        #city-cloud-copy,
        #city2-cloud,
        #city2-cloud-copy {
            display: flex;
            flex-shrink: 0;
            /* Bardzo ważne: zapobiega zwężaniu się kontenera */
        }

        /* Kontener miasta jako przycisk */
        .city-box {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            margin: 0 10px;
            /* Odstęp między "przyciskami" */
        }

        .city-pill {
            background-color: #22c55e;
            /* bg-green-500 */
            color: white;
            padding: 8px 24px;
            border-radius: 9999px;
            /* Zaokrąglone rogi (pill) */
            font-family: 'Aptos', sans-serif;
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            white-space: nowrap;
            box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2);
            transition: transform 0.3s ease, background-color 0.3s ease;
            cursor: default;
        }

        /* Efekt po najechaniu na kontener */
        .animate-marquee-cities:hover {
            animation-play-state: paused;
        }

        .city-pill:hover {
            background-color: #16a34a;
            /* Ciemniejszy zielony na hover */
            transform: translateY(-2px);
        }