/* header */
/* --- GŁÓWNY KONTENER HEADERA --- */
        #aslandi-main-header {
            width: 100%;
            background-color: #1a3b2b; /* Ciemny, firmowy zielony Aslandi */
            position: sticky; /* Przykleja się do góry ekranu */
            top: 0;
            z-index: 1000; /* Zawsze na wierzchu */
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            font-family: inherit;
        }

        .header-container {
            max-width: 1240px;
            margin: 0 auto;
            padding: 10px 20px; 
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px; /* Minimalny odstęp między elementami */
        }

        /* --- LOGO --- */
        .header-logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            flex: 0 0 auto; /* Blokuje zgniatanie logo */
            z-index: 10;
        }

        .header-logo img {
            max-height: 90px; 
            width: auto;
            object-fit: contain;
            transition: opacity 0.3s ease;
        }

        .header-logo:hover img {
            opacity: 0.85; 
        }

        /* --- NAWIGACJA (DESKTOP) --- */
        .header-nav {
            display: flex;
            align-items: center;
        }

        .header-nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 25px; /* Zmniejszony odstęp, by zmieścić więcej zakładek na średnich ekranach */
            align-items: center;
        }

        .header-nav li a {
            text-decoration: none;
            color: #ffffff; 
            font-size: 15px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            transition: color 0.3s ease;
        }

        .header-nav li a:hover {
            color: #f2ce83; 
        }

        .header-nav li a.nav-highlight {
            background-color: #198006; 
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 700;
        }
        
        .header-nav li a.nav-highlight:hover {
            background-color: #f2ce83;
            color: #1a3b2b;
        }

        /* --- PRZYCISK KALKULATORA (TYLKO MOBILE) --- */
        .mobile-calc-btn {
            display: none; /* Domyślnie ukryty na komputerach */
        }

        /* --- HAMBURGER MENU (MOBILE) --- */
        .mobile-menu-btn {
            display: none; 
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            flex-direction: column;
            gap: 5px;
            z-index: 1001;
        }

        .mobile-menu-btn span {
            display: block;
            width: 28px;
            height: 3px;
            background-color: #ffffff;
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        /* --- RESPONSIVE DESIGN (TELEFONY I TABLETY) --- */
        @media (max-width: 1080px) {
            /* Przy większej liczbie zakładek załamujemy menu nieco wcześniej */
            .header-nav ul {
                gap: 15px;
            }
            .header-nav li a {
                font-size: 13px;
            }
        }

        @media (max-width: 992px) {
            
            /* Ograniczenie wielkości logo, aby nie wchodziło na przycisk na małych ekranach */
            .header-logo img {
                max-height: 40px;
                max-width: 130px;
            }

            .mobile-menu-btn {
                display: flex; 
                flex: 0 0 auto;
            }

            /* --- NAPRAWIONY PRZYCISK KALKULATORA --- */
            .mobile-calc-btn {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                background-color: #198006;
                color: #ffffff;
                text-decoration: none;
                padding: 8px 16px;
                border-radius: 50px;
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                box-shadow: 0 4px 10px rgba(25, 128, 6, 0.3);
                white-space: nowrap;
                letter-spacing: 0.5px;
                margin: 0 auto; 
                position: relative;
                z-index: 1050; 
            }

            .header-nav {
                position: fixed;
                top: 0;
                right: -100%; 
                width: 300px;
                max-width: 80%;
                height: 100vh;
                background-color: #1a3b2b;
                box-shadow: -5px 0 25px rgba(0,0,0,0.2);
                flex-direction: column;
                align-items: flex-start;
                padding: 80px 30px 40px 30px;
                transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

            .header-nav.is-open {
                right: 0; 
            }

            .header-nav ul {
                flex-direction: column;
                width: 100%;
                gap: 25px;
                align-items: flex-start;
            }

            .header-nav li { width: 100%; }
            .header-nav li a { font-size: 18px; display: block; width: 100%; }

            .header-nav li a.nav-highlight {
                display: inline-block;
                width: auto;
                margin-top: 10px;
            }

            /* Animacja hamburgera */
            .mobile-menu-btn.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
            .mobile-menu-btn.is-active span:nth-child(2) { opacity: 0; }
            .mobile-menu-btn.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
        }
        
        @media (max-width: 380px) {
            .header-container { padding: 10px 10px; gap: 5px; }
            .header-logo img { max-height: 35px; max-width: 100px; }
            .mobile-calc-btn { font-size: 10px; padding: 6px 10px; }
        }

/* hero */
/* --- GŁÓWNY KONTENER --- */
        #aslandi-hero-reordered {
            font-family: inherit;
            background-color: #ffffff; 
            width: 100%;
            padding: 120px 20px 110px 20px; 
            box-sizing: border-box;
            color: #111;
            position: relative;
            overflow: hidden; 
            border-radius: 0 0 24px 24px; 
        }

        /* --- UKŁAD GŁÓWNY ŚCIŚLE ZESPOLONY --- */
        .hero-layout {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 40px;
            max-width: 1340px; 
            margin: 0 auto;
            position: relative;
            z-index: 2; 
        }

        /* --- LEWA STRONA (TREŚĆ) --- */
        .hero-left {
            flex: 0 1 42%; 
            min-width: 320px;
            max-width: 580px; 
        }

        .promo-badge {
            display: inline-block;
            background-color: #e9f5eb;
            color: #198006;
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 18px;
            box-shadow: 0 4px 10px rgba(25, 128, 6, 0.1);
        }

        .hero-left h1 {
            font-size: clamp(34px, 4.2vw, 54px);
            font-weight: 800;
            color: #1a3b2b;
            line-height: 1.15;
            margin: 0 0 20px 0;
            letter-spacing: -1px;
        }

        .hero-left h1 span.highlight {
            position: relative;
            color: #198006;
        }

        .hero-left h1 span.highlight::after {
            content: '';
            position: absolute;
            left: -5px;
            right: -5px;
            bottom: 5px;
            height: 12px;
            background-color: rgba(25, 128, 6, 0.1);
            z-index: -1;
            border-radius: 4px;
        }

        .hero-left p.subtitle {
            font-size: 18px;
            font-weight: 500;
            color: #444;
            margin-bottom: 40px;
            line-height: 1.6;
        }

        /* --- DOLNE PRZYCISKI (CTA) --- */
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
        }

        .btn-green-cta {
            display: inline-block;
            background: #198006;
            color: #fff;
            text-decoration: none;
            padding: 18px 40px;
            border-radius: 50px;
            font-size: 15px;
            font-weight: 800;
            text-transform: uppercase;
            box-shadow: 0 10px 30px rgba(25, 128, 6, 0.2);
            transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
        }

        .btn-green-cta:hover {
            background: #136604;
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(25, 128, 6, 0.3);
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #1a3b2b;
            text-decoration: none;
            font-size: 16px;
            font-weight: 800;
            padding: 18px 20px;
            transition: color 0.2s;
        }

        .btn-secondary:hover { color: #198006; }

        .btn-secondary .icon-phone {
            width: 36px;
            height: 36px;
            background-color: #f2ce83; 
            color: #1a3b2b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
            box-shadow: 0 4px 10px rgba(242, 206, 131, 0.4);
        }

        .btn-secondary:hover .icon-phone { transform: scale(1.1) rotate(10deg); }
        .btn-secondary svg { width: 16px; height: 16px; fill: currentColor; }

        /* =========================================
           --- PRAWA STRONA MAIN (GRAFIKA / WIDEO OZE) --- 
           ========================================= */
        .hero-right {
            flex: 0 1 58%; 
            min-width: 320px;
            min-height: 480px; 
            display: flex;
            justify-content: center;
            align-items: flex-end; 
            position: relative; 
            padding-top: 140px; 
        }

        /* GŁÓWNY RDZEŃ WŁAŚCIWY (Zrekompensowany AI render) */
        .hero-image-main {
            width: 100%;
            max-width: 950px; 
            height: auto;
            object-fit: contain;
            position: relative;
            z-index: 1; 
            background: transparent;
            transform: scale(1.08) translateY(-10px);
        }

        /* ---------------- SŁOŃCE DESKTOP ---------------- */
        .anim-sun {
            position: absolute;
            top: 2%; 
            right: 15%; 
            width: 155px; 
            z-index: 3; 
            animation: spinSun 35s linear infinite; 
        }

        @keyframes spinSun {
            0% { transform: rotate(0deg); filter: drop-shadow(0 0 30px rgba(241, 196, 15, 0.25)); }
            50% { transform: rotate(180deg); filter: drop-shadow(0 0 65px rgba(241, 196, 15, 0.6)); }
            100% { transform: rotate(360deg); filter: drop-shadow(0 0 30px rgba(241, 196, 15, 0.25)); }
        }

        /* ---------------- CHMURY DESKTOP (Z dograną makietą przestrzenną) ---------------- */
        .anim-cloud {
            position: absolute;
            pointer-events: none; 
            will-change: transform; 
        }

        .cloud-2 {
            top: 22%; 
            z-index: 2; 
            width: 105px; 
            opacity: 0.95;
            right: 15%; 
            animation: driftRightFast 15s ease-in-out infinite alternate;
        }

        .cloud-3 {
            top: 14%;
            z-index: 2; 
            width: 195px; 
            opacity: 0.98;
            left: 14%; 
            animation: driftRightSlow 22s ease-in-out infinite alternate; 
        }

        @keyframes driftRightFast {
            0% { transform: translate(0px, 0px) rotate(0deg); }
            50% { transform: translate(65px, 10px) rotate(2.5deg); } 
            100% { transform: translate(110px, 0px) rotate(-2deg); } 
        }
        @keyframes driftRightSlow {
            0% { transform: translate(0px, 0px) rotate(0deg); }
            50% { transform: translate(50px, -10px) rotate(-2.5deg); } 
            100% { transform: translate(85px, 0px) rotate(2deg); } 
        }

        /* ==============================================================
           --- RESPONSIVE DESIGN TYLKO DLA TELEFONÓW (Z UWZGLĘDNIENIEM NOWYCH MIEJSC CHMUR) ---
           ============================================================== */
        @media (max-width: 992px) {
            #aslandi-hero-reordered { padding: 50px 15px; } 
            
            .hero-layout { flex-direction: column-reverse; text-align: center; gap: 25px; }
            .hero-left { align-items: center; max-width: 100%; margin-top: 15px; }
            .promo-badge { margin-bottom: 15px; }
            .hero-left h1 { font-size: 32px; margin-bottom: 15px; }
            .hero-left p.subtitle { margin-bottom: 30px; font-size: 16px; }
            .hero-actions { justify-content: center; }
            
            .hero-right { 
                width: 100%; 
                margin-top: 0; 
                /* Poluźnienie dusznego marginesu (-40px przeszło na łagodniejsze -25px) dodając 15px "tlenu" pożądanego na zrzucie! */
                margin-bottom: -25px; 
                padding-top: 90px; 
                min-height: auto;
            }
            .hero-image-main { max-width: 580px; transform: none; } 

            .anim-sun { width: 110px; top: 5px; left: 3%; right: auto; }
            .cloud-2, .cloud-3 { opacity: 0.9 !important; }
            
            .cloud-2 { 
                width: 90px; right: 10%; top: 20%; 
                animation: driftRightShortMobile 12s ease-in-out infinite alternate; 
            } 
            
            .cloud-3 { 
                width: 135px; 
                /* Zmiana współrzędnych! Chmura wystrzelona w prawo i mocno w górę by nie zakrywała domków z wideo */
                left: 40%; 
                top: 6%; 
                animation: driftDiagDynamicMobile 14s ease-in-out infinite alternate; 
            }
        }
        
        @media (max-width: 992px) {
            @keyframes driftRightShortMobile {
                0% { transform: translate(0px, 0px) rotate(0deg); }
                50% { transform: translate(15px, 5px) rotate(2.5deg); } 
                100% { transform: translate(30px, 0px) rotate(-1deg); } 
            }
            @keyframes driftDiagDynamicMobile {
                0% { transform: translate(0px, 0px) rotate(0deg); }
                50% { transform: translate(30px, -8px) rotate(-3.5deg); } 
                100% { transform: translate(55px, 0px) rotate(2deg); } 
            }
        }

        @media (max-width: 600px) {
            .hero-actions { flex-direction: column; width: 100%; gap: 15px; }
            .btn-green-cta { width: 100%; box-sizing: border-box; }
            .hero-image-main { max-width: 100%; }
            .anim-sun { width: 95px; top: 0px; left: 2%; right: auto; }
            /* Zabezpieczenie chmury również dla najwęższych ekranów! */
            .cloud-3 { width: 115px; left: 38%; top: 5%; }
            .cloud-2 { width: 75px; right: 8%; top: 18%; }
        }

/* savings-chart */
/* --- GŁÓWNY KONTENER SEKCJI --- */
        #aslandi-chart-section-premium {
            font-family: inherit;
            background-color: #f2f6f4; /* Poprawiony kolor: Sage White (pojedynczy #) */
            width: 100%;
            padding: 100px 20px;
            box-sizing: border-box;
            color: #111;
            overflow: hidden;
        }

        .chart-wrapper {
            max-width: 1000px;
            margin: 0 auto;
        }

        /* --- NAGŁÓWEK I PODTYTUŁ --- */
        .chart-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .chart-header h2 {
            font-size: clamp(28px, 4vw, 48px);
            font-weight: 800;
            color: #1a3b2b; /* Kolor brandingowy Aslandi */
            line-height: 1.2;
            margin: 0 0 15px 0;
            letter-spacing: -0.5px;
        }

        /* Wyróżnienie słowa kluczowego w nagłówku */
        .chart-header h2 span {
            color: #198006;
        }

        .chart-header p {
            font-size: clamp(14px, 1.8vw, 16px);
            font-weight: 500;
            color: #777;
            margin: 0;
        }

        /* --- KONTENER WYKRESU --- */
        .chart-box {
            display: flex;
            flex-direction: column;
            gap: 25px; /* Odstępy między rzędami */
        }

        /* POJEDYNCZY RZĄD (Etykieta + Pasek) */
        .chart-row {
            display: flex !important;
            align-items: center !important; /* SIŁOWE WYŚRODKOWANIE PIONOWE */
            width: 100%;
            min-height: 48px; /* Zabezpieczenie minimalnej wysokości */
        }

        /* ETYKIETA PO LEWEJ (FIX WYRÓWNANIA) */
        .chart-label {
            flex: 0 0 280px; /* Sztywna szerokość etykiety na PC */
            font-size: 16px;
            font-weight: 700;
            color: #333;
            line-height: 1.3;
            padding: 0 20px 0 0 !important;
            margin: 0 !important; /* Resetuje marginesy narzucane przez WordPressa */
            
            /* Siłowe wyśrodkowanie tekstu wewnątrz etykiety i dosunięcie do wykresu */
            display: flex !important;
            align-items: center !important; /* Centruje w pionie */
            justify-content: flex-end !important; /* Dosuwa do prawej krawędzi (do słupka) */
            text-align: right !important; /* Łamie tekst do prawej */
        }

        /* Środowisko na słupek */
        .chart-bar-container {
            flex: 1;
            background-color: #ffffff; /* Zmieniłem tło toru na czystą biel dla lepszego kontrastu z szaro-zielonym tłem sekcji */
            border-radius: 12px;
            height: 48px;
            position: relative;
            box-shadow: inset 0 3px 6px rgba(0,0,0,0.03); /* Lżejszy wklęsły tor */
        }

        /* SAM SŁUPEK */
        .chart-bar {
            height: 100%;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: flex-end; /* Cena do prawej krawędzi słupka */
            padding-right: 15px;
            /* Szerokość początkowa 0% */
            width: 0%; 
            transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1); 
            will-change: width; 
            position: relative;
            box-sizing: border-box;
            min-width: 90px; 
        }

        /* Napis z kwotą wewnątrz słupka */
        .chart-value {
            color: #fff;
            font-weight: 800;
            font-size: 20px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            white-space: nowrap;
            transform: scale(1);
            display: inline-block;
        }

        /* --- KOLORY SŁUPKÓW --- */
        .bar-red { background: linear-gradient(90deg, #990000 0%, #cc0000 100%); box-shadow: 0 5px 15px rgba(204, 0, 0, 0.15); }
        .bar-orange { background: linear-gradient(90deg, #d35400 0%, #e67e22 100%); box-shadow: 0 5px 15px rgba(230, 126, 34, 0.15); }
        .bar-yellow { background: linear-gradient(90deg, #f39c12 0%, #f1c40f 100%); box-shadow: 0 5px 15px rgba(241, 196, 15, 0.15); }
        .bar-yellow .chart-value { color: #333; text-shadow: none; }
        .bar-light-green { background: linear-gradient(90deg, #7ebd5e 0%, #90d26d 100%); box-shadow: 0 5px 15px rgba(144, 210, 109, 0.15); }

        /* --- SEKRETNE SOSY ASLANDII - NOWE PULSOWANIE TOTALNE --- */
        .chart-row.highlight-row { margin-top: 10px; }
        .chart-row.highlight-row .chart-label { font-size: 18px; font-weight: 900; color: #198006; }

        .bar-neon-green {
            background: linear-gradient(90deg, #123e27 0%, #1a6b40 100%);
            border: 2px solid #2ecc71;
            animation: pulseGlowStrict 2.5s infinite; 
        }

        .bar-neon-green .chart-value {
            font-size: 24px;
            color: #ffffff;
            animation: textScale 2.5s infinite; 
            transform-origin: right center;
        }

        @keyframes pulseGlowStrict {
            0% { box-shadow: 0 0 15px rgba(46, 204, 113, 0.6), inset 0 0 10px rgba(46, 204, 113, 0.3); border-color: #2ecc71; }
            50% { box-shadow: 0 0 40px rgba(46, 204, 113, 1), inset 0 0 20px rgba(46, 204, 113, 0.5); border-color: #ffffff; }
            100% { box-shadow: 0 0 15px rgba(46, 204, 113, 0.6), inset 0 0 10px rgba(46, 204, 113, 0.3); border-color: #2ecc71; }
        }

        @keyframes textScale {
            0% { transform: scale(1); text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
            50% { transform: scale(1.05); text-shadow: 0 2px 10px rgba(46, 204, 113, 0.8); }
            100% { transform: scale(1); text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        }

        /* --- NOWY PRZYCISK CTA POD WYKRESEM --- */
        .chart-cta-wrapper {
            text-align: center;
            margin-top: 60px;
        }

        .btn-calc-cta {
            display: inline-block;
            background: #198006;
            color: #ffffff;
            text-decoration: none;
            padding: 22px 50px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 800;
            text-transform: uppercase;
            box-shadow: 0 10px 30px rgba(25, 128, 6, 0.2);
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            letter-spacing: 0.5px;
            border: 2px solid transparent;
        }

        .btn-calc-cta:hover {
            transform: translateY(-4px);
            background: #136604;
            box-shadow: 0 15px 35px rgba(25, 128, 6, 0.35);
            border-color: rgba(255,255,255,0.1);
        }

        .chart-cta-wrapper p {
            margin-top: 15px;
            font-size: 14px;
            color: #777;
            font-weight: 500;
        }

        /* --- RESPONSIVE DESIGN (MOBILE) --- */
        @media (max-width: 768px) {
            #aslandi-chart-section-premium { padding: 60px 15px; }
            .chart-header { margin-bottom: 40px; }
            .chart-box { gap: 30px; }

            .chart-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
            
            /* Przywracamy lewe wyrównanie etykiet na telefonach, by było czytelnie */
            .chart-label { 
                flex: none; 
                width: 100%; 
                font-size: 14px; 
                padding-right: 0 !important; 
                justify-content: flex-start !important; 
                text-align: left !important;
            }
            
            .chart-row.highlight-row .chart-label { font-size: 16px; }
            .chart-bar-container { width: 100%; height: 40px; }

            .chart-value { font-size: 16px; }
            .bar-neon-green .chart-value { font-size: 19px; animation: none; transform: scale(1); }

            .chart-cta-wrapper { margin-top: 40px; }
            .btn-calc-cta { width: 100%; box-sizing: border-box; padding: 18px 20px; font-size: 15px; }
        }

/* about */
/* --- GŁÓWNY KONTENER --- */
        #aslandi-about-section {
            font-family: inherit;
            background-color: #ffffff; 
            width: 100%; 
            padding: 100px 20px;
            box-sizing: border-box;
            color: #111;
            position: relative;
            overflow: hidden;
        }

        /* --- SIATKA GRID (DESKTOP) --- */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px 60px;
            max-width: 1300px; /* Lekko zwiększony kontener, by pomieścić większe foto */
            margin: 0 auto;
            align-items: start;
        }

        /* --- ELEMENTY SIATKI --- */
        .item-title {
            grid-column: 1;
            grid-row: 1;
            align-self: end;
        }

        .item-lead {
            grid-column: 2;
            grid-row: 1;
            align-self: end;
        }

        .item-cards {
            grid-column: 1;
            grid-row: 2;
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 10px;
        }

        .item-image {
            grid-column: 2;
            grid-row: 2;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }

        /* --- TYPOGRAFIA --- */
        .item-title h2 {
            font-size: clamp(34px, 4vw, 46px);
            font-weight: 800;
            color: #1a3b2b;
            line-height: 1.2;
            margin: 0 0 15px 0;
            letter-spacing: -0.5px;
        }

        .item-lead p {
            font-size: clamp(20px, 2.5vw, 26px);
            font-weight: 700;
            color: #333;
            line-height: 1.4;
            margin: 0 0 15px 0;
        }

        /* --- KARTY (CARDS) --- */
        .feature-card {
            background: #ffffff;
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
            display: flex;
            gap: 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(0,0,0,0.02);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.08);
        }

        .feature-card .icon-wrapper {
            width: 54px;
            height: 54px;
            background-color: #e9f5eb;
            color: #198006;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .feature-card .icon-wrapper svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        .feature-text h3 {
            font-size: 20px;
            font-weight: 800;
            color: #1a3b2b;
            margin: 0 0 10px 0;
        }

        .feature-text p {
            font-size: 15px;
            color: #555;
            line-height: 1.6;
            margin: 0;
        }

        /* --- GRAFIKA (POWIĘKSZONA O 30%) --- */
        .village-graphic {
            width: 100%;
            max-width: 850px; /* Zwiększone z 650px (ok +30%) */
            height: auto;
            object-fit: contain;
            animation: gentleFloat 6s ease-in-out infinite;
            filter: drop-shadow(0 20px 40px rgba(0,0,0,0.06));
        }

        @keyframes gentleFloat {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
            100% { transform: translateY(0px); }
        }

        /* --- RESPONSIVE DESIGN (RWD) --- */
        @media (max-width: 992px) {
            #aslandi-about-section {
                padding: 60px 15px; /* Lekko zmniejszony padding sekcji */
            }
            .about-grid {
                display: flex;
                flex-direction: column;
                gap: 25px;
            }
            .item-title { order: 1; text-align: center; }
            .item-lead { order: 2; text-align: center; }
            .item-lead p { font-size: 21px; margin-bottom: 5px; }
            
            /* ZMNIEJSZONE PADDINGI / MARGINESY ZDJĘCIA NA MOBILE */
            .item-image { 
                order: 3; 
                margin: 5px 0; /* Minimalny margines góra/dół dla zdjęcia */
                width: 100%;
            }
            
            .item-cards { order: 4; gap: 15px; }
            
            .feature-card {
                padding: 20px;
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 12px;
            }
        }

/* coverage */
#aslandi-coverage-section{
    font-family:inherit;background-color:#f2f6f4;width:100%;
    padding:100px 20px;box-sizing:border-box;color:#111;
    position:relative;overflow:hidden;content-visibility:auto;
    contain-intrinsic-size:900px;
  }
  #aslandi-coverage-section *{box-sizing:border-box}
  .aslandi-coverage-container{max-width:1200px;margin:0 auto}
  .aslandi-coverage-header{text-align:center;width:100%;margin-bottom:60px}
  .aslandi-coverage-header h2{
    font-size:clamp(34px,4.5vw,54px);font-weight:800;color:#1a3b2b;
    line-height:1.15;margin:0 0 15px 0;letter-spacing:0;
  }
  .aslandi-coverage-subtitle{
    font-size:clamp(18px,2.5vw,24px);font-weight:500;color:#222;
    margin:0 auto;max-width:900px;line-height:1.4;
  }
  .aslandi-coverage-subtitle strong{font-weight:800;color:#1a3b2b}

  .aslandi-map-wrapper{
    position:relative;border-radius:24px;overflow:hidden;
    box-shadow:0 1px 2px rgba(26,59,43,.05),0 12px 40px rgba(26,59,43,.10),0 30px 80px rgba(26,59,43,.08);
    border:1px solid rgba(26,59,43,.08);
    background:linear-gradient(135deg,#fafdfb 0%,#f4f9f6 100%);
    contain:layout style paint;
  }
  #aslandi-map-pro{height:620px;width:100%;background:#f4f9f6;font-family:inherit}
  .leaflet-container{background:#f4f9f6!important;outline:none}

  .leaflet-control-zoom{border:none!important;box-shadow:none!important;margin:16px!important}
  .leaflet-control-zoom a{
    background:rgba(255,255,255,.95)!important;color:#1a3b2b!important;
    border:1px solid rgba(26,59,43,.1)!important;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:0 4px 12px rgba(26,59,43,.08);font-weight:700;
    transition:background .25s,color .25s,transform .25s
  }
  .leaflet-control-zoom a:hover{background:#1a3b2b!important;color:#d1b77f!important;transform:translateY(-1px)}
  .leaflet-control-zoom a:first-child{border-radius:10px 10px 0 0!important}
  .leaflet-control-zoom a:last-child{border-radius:0 0 10px 10px!important}

  .aslandi-loader{
    position:absolute;inset:0;z-index:9999;
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(244,249,246,.96));
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    display:flex;justify-content:center;align-items:center;
    transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);
    will-change:opacity,transform;
  }
  .aslandi-loader.is-hidden{opacity:0;transform:scale(1.04);pointer-events:none}
  .aslandi-loader__core{text-align:center}
  .aslandi-loader__ring{display:block;margin:0 auto 18px}
  .aslandi-loader__arc{animation:aslandi-spin 1.6s cubic-bezier(.4,0,.2,1) infinite;transform-origin:50% 50%}
  .aslandi-loader__bolt{transform-origin:50% 50%;animation:aslandi-pulse 1.4s ease-in-out infinite}
  .aslandi-loader__brand{font-weight:900;letter-spacing:8px;font-size:22px;color:#1a3b2b;margin-bottom:6px}
  .aslandi-loader__caption{font-size:12px;color:rgba(26,59,43,.6);text-transform:uppercase;letter-spacing:3px;margin-bottom:18px}
  .aslandi-loader__bar{width:220px;height:3px;background:rgba(26,59,43,.08);border-radius:2px;overflow:hidden;margin:0 auto 10px}
  .aslandi-loader__bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#00A859,#d1b77f);transition:width .4s ease;box-shadow:0 0 8px rgba(0,168,89,.4);will-change:width}
  .aslandi-loader__counter{font-weight:700;font-size:11px;color:#00A859;letter-spacing:2px}
  @keyframes aslandi-spin{to{transform:rotate(360deg)}}
  @keyframes aslandi-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

  .aslandi-cluster{
    opacity:0;cursor:pointer;
    animation:aslandi-cluster-in 1.1s cubic-bezier(.4,0,.2,1) forwards,
              aslandi-cluster-breathe 6s ease-in-out 1.1s infinite;
    transition:stroke-width .4s,stroke .4s,fill-opacity .4s;
  }
  .aslandi-cluster.is-hovered{
    filter:url(#aslandi-glow);stroke:#1a3b2b!important;stroke-width:3.5!important;
    animation:aslandi-cluster-in 1.1s cubic-bezier(.4,0,.2,1) forwards,
              aslandi-cluster-breathe-fast 2.2s ease-in-out infinite;
  }
  @keyframes aslandi-cluster-in{to{opacity:1}}
  @keyframes aslandi-cluster-breathe{0%,100%{fill-opacity:.14}50%{fill-opacity:.25}}
  @keyframes aslandi-cluster-breathe-fast{0%,100%{fill-opacity:.38}50%{fill-opacity:.55}}

  .aslandi-label{
    background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;
    pointer-events:none;animation:aslandi-label-in 1.1s cubic-bezier(.4,0,.2,1) backwards;
  }
  .aslandi-label__inner{
    font-weight:800;font-size:12.5px;color:#1a3b2b;
    text-transform:uppercase;letter-spacing:1.6px;white-space:nowrap;display:inline-block;
    text-shadow:0 0 4px #fff,0 0 8px #fff,1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,0 2px 12px rgba(26,59,43,.15);
  }
  .aslandi-label__inner::after{content:'';display:block;width:24px;height:2px;margin:4px auto 0;background:linear-gradient(90deg,transparent,#d1b77f,transparent);opacity:.85}
  .leaflet-tooltip-pane .aslandi-label::before,.leaflet-tooltip-pane .aslandi-label::after{display:none}
  @keyframes aslandi-label-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

  .aslandi-popup .leaflet-popup-content-wrapper{
    background:linear-gradient(135deg,rgba(26,59,43,.96) 0%,rgba(15,38,27,.96) 100%);
    backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
    color:#fff;border-radius:18px;padding:4px;border:none;overflow:hidden;position:relative;
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 20px 50px rgba(0,0,0,.35),0 0 0 1px rgba(209,183,127,.25);
  }
  .aslandi-popup .leaflet-popup-content-wrapper::before{
    content:'';position:absolute;top:0;left:20%;right:20%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(209,183,127,.6),transparent);
  }
  .aslandi-popup .leaflet-popup-content{margin:18px 22px;font-family:inherit;line-height:1.4;min-width:240px}
  .aslandi-popup .leaflet-popup-tip{background:rgba(15,38,27,.96);box-shadow:0 8px 16px rgba(0,0,0,.25)}
  .aslandi-popup .leaflet-popup-close-button{color:rgba(255,255,255,.5)!important;font-size:22px!important;padding:6px 10px!important;transition:color .25s,transform .25s}
  .aslandi-popup .leaflet-popup-close-button:hover{color:#d1b77f!important;transform:rotate(90deg)}
  .aslandi-popup__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;color:#d1b77f;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
  .aslandi-popup__eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:#00A859;box-shadow:0 0 8px rgba(0,168,89,.8)}
  .aslandi-popup__title{font-weight:800;font-size:18px;color:#fff;margin:0 0 4px;letter-spacing:.3px;line-height:1.25}
  .aslandi-popup__subtitle{font-size:11.5px;color:rgba(255,255,255,.55);margin:0 0 14px}
  .aslandi-popup__divider{height:1px;margin:0 0 14px;background:linear-gradient(90deg,transparent,rgba(209,183,127,.3),transparent)}
  .aslandi-popup__phone-block{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 14px}
  .aslandi-popup__phone-label{font-size:9.5px;font-weight:700;color:rgba(209,183,127,.85);text-transform:uppercase;letter-spacing:2px}
  .aslandi-popup__phone-number{
    display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:22px;letter-spacing:.5px;
    color:#fff!important;text-decoration:none!important;line-height:1.1;transition:color .25s,transform .25s;
  }
  .aslandi-popup__phone-number svg{width:16px;height:16px;color:#00A859;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(0,168,89,.55))}
  .aslandi-popup__phone-number:hover{color:#d1b77f!important;transform:translateX(2px)}
  .aslandi-popup__cta{
    display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#00A859 0%,#008f4c 100%);color:#fff!important;
    padding:11px 22px;border-radius:100px;text-decoration:none!important;font-weight:700;font-size:12.5px;letter-spacing:.2px;
    transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s;
    box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 8px 20px rgba(0,168,89,.45),0 0 0 1px rgba(255,255,255,.08);
  }
  .aslandi-popup__cta:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 28px rgba(0,168,89,.6),0 0 0 1px rgba(255,255,255,.12)}
  .aslandi-popup__cta-arrow{display:inline-block;transition:transform .3s}
  .aslandi-popup__cta:hover .aslandi-popup__cta-arrow{transform:translateX(3px)}

  .leaflet-control-attribution{background:rgba(255,255,255,.78)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:10px!important;color:rgba(26,59,43,.55)!important;padding:2px 8px!important;border-radius:6px 0 0 0!important}
  .leaflet-control-attribution a{color:rgba(26,59,43,.75)!important}

  @media (max-width:768px){
    #aslandi-coverage-section{padding:40px 15px;contain-intrinsic-size:720px}
    .aslandi-coverage-header{margin-bottom:24px}
    .aslandi-coverage-header h2{font-size:30px}
    .aslandi-coverage-subtitle{font-size:17px}
    #aslandi-map-pro{height:480px}
    .aslandi-label__inner{font-size:10px;letter-spacing:1px}
    .aslandi-label__inner::after{width:18px;margin-top:3px}
    .aslandi-popup .leaflet-popup-content{min-width:220px;margin:14px 16px}
    .aslandi-popup__title{font-size:16px}
    .aslandi-popup__phone-number{font-size:19px;gap:6px}
    .aslandi-popup__phone-number svg{width:14px;height:14px}
  }
  @media (max-width:420px){
    .aslandi-coverage-header h2{font-size:26px}
    .aslandi-label__inner{font-size:9px;letter-spacing:.6px}
  }
  @media (prefers-reduced-motion:reduce){
    .aslandi-cluster,.aslandi-loader__arc,.aslandi-loader__bolt,.aslandi-label{animation:none!important}
  }

/* market-rules */
/* --- GŁÓWNY KONTENER SEKCJI --- */
        #aslandi-rules-comparison-v7 {
            font-family: inherit;
            background-color: #ffffff; 
            width: 100%; 
            padding: 100px 20px;
            box-sizing: border-box;
            color: #111;
            position: relative;
        }

        .comparison-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* --- NAGŁÓWEK PO CAŁEJ SZEROKOŚCI, WYSRODKOWANY --- */
        .comparison-header {
            text-align: center;
            width: 100%;
            margin-bottom: 70px;
        }

        .comparison-header h2 {
            font-size: clamp(34px, 4.5vw, 54px);
            font-weight: 800;
            color: #1a3b2b;
            line-height: 1.15;
            margin: 0;
            letter-spacing: -1px;
        }

        /* --- WRAPPER DLA STRZAŁKI I SIATKI --- */
        .comparison-grid-wrapper {
            position: relative;
            width: 100%;
        }

        /* --- SPRYTNA STRZAŁKA POMIĘDZY KARTAMI --- */
        .center-arrow {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 120px; 
            z-index: 10;
            pointer-events: none; 
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
            transition: all 0.3s ease; 
        }

        /* --- SIATKA KART (SYMETRYCZNA 1:1) --- */
        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr 1fr; 
            gap: 40px;
            align-items: stretch; 
            position: relative;
            z-index: 2;
        }

        /* STYL WSPÓLNY DLA KART */
        .comp-card {
            border-radius: 20px;
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            align-items: center; 
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.03);
            border-top: 5px solid transparent; 
            position: relative;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .comp-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.07);
        }

        .comp-card h3 {
            font-size: clamp(20px, 2vw, 26px);
            font-weight: 700;
            margin: 0 0 35px 0;
        }

        /* --- POWIĘKSZONE KONTENERY NA OBRAZKI --- */
        .comp-img-wrapper {
            width: 100%;
            height: 260px; 
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 35px;
        }

        .img-scaled {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain; 
            filter: drop-shadow(0 15px 30px rgba(0,0,0,0.06));
        }

        /* --- ULEPSZONE LISTY W KARTACH (UX/UI CARD-IN-CARD) --- */
        .comp-list {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: left; 
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 12px; 
        }

        .comp-list li {
            position: relative;
            padding: 16px 16px 16px 44px; 
            font-size: 15px; 
            color: #222; 
            line-height: 1.4;
            font-weight: 600; 
            background-color: #ffffff; 
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
            border: 1px solid rgba(0,0,0,0.03);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .comp-list li:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
        }

        /* --- WSPÓLNA STYLIZACJA KART (OBIE SĄ NEGATYWNE/PROBLEMEM) --- */
        .card-negative {
            background-color: #fffafa; /* Delikatny róż/czerwień */
            border: 1px solid #f9e6e6;
            border-top-color: #e74c3c; /* Czerwona linia u góry oznaczająca problem */
        }

        .card-negative h3 { color: #c0392b; } /* Czerwieńszy nagłówek */

        /* Stylizacja czerwonego punktora z wyrównaniem do środka */
        .list-negative li::before {
            content: '—';
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #e74c3c;
            font-weight: 900;
            font-size: 18px;
        }

        /* Akcentowanie negatywnych słów-kluczy w obu kartach */
        .list-negative li strong {
            color: #d35400; /* Ostrzegawczy pomarańcz/czerwień */
            font-weight: 800;
        }

        /* Konkretne szerokości obrazków i animacje */
        .img-scaled-piggy {
            max-width: 230px; 
            animation: gentleFloatPiggy 5s ease-in-out infinite;
        }

        @keyframes gentleFloatPiggy {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        .img-scaled-netbilling {
            max-width: 530px; 
        }

        /* --- RESPONSIVE DESIGN (RWD) --- */
        @media (max-width: 1024px) {
            .comparison-grid { gap: 20px; }
            .comp-card { padding: 40px 25px; }
            .center-arrow { width: 80px; } 
        }

        @media (max-width: 768px) {
            #aslandi-rules-comparison-v7 { padding: 50px 10px; } 
            .comparison-header { margin-bottom: 30px; }
            .comparison-header h2 { font-size: 28px; }
            
            .center-arrow { 
                display: block; 
                width: 50px; 
                top: 33.33%; 
                transform: translate(-50%, -50%); 
            }

            .comparison-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px; 
            }

            .comp-card { padding: 20px 12px; border-radius: 12px; }
            .comp-card h3 { font-size: 15px; margin-bottom: 15px; }
            
            .comp-img-wrapper { height: 110px; margin-bottom: 15px; }
            .img-scaled-piggy { max-width: 90px; }
            .img-scaled-netbilling { max-width: 150px; }
            
            .comp-list { gap: 8px; }
            .comp-list li {
                font-size: 11.5px; 
                line-height: 1.35;
                padding: 12px 10px 12px 32px; 
                border-radius: 8px;
                word-wrap: break-word; 
            }
            .list-negative li::before { 
                left: 10px; 
                font-size: 14px; 
            }
        }
        
        @media (max-width: 380px) {
            .center-arrow { width: 40px; top: 30%; } 
            .comp-card { padding: 15px 8px; }
            .comp-card h3 { font-size: 13px; }
            
            .comp-list li { 
                font-size: 10.5px; 
                padding: 10px 8px 10px 28px; 
            }
            .list-negative li::before { 
                left: 8px; 
                font-size: 13px; 
            }
        }

/* solution */
/* --- GŁÓWNY KONTENER NAGŁÓWKA --- */
        #aslandi-solution-header {
            font-family: inherit;
            background-color: #ffffff; /* CZYSTA BIEL WEDŁUG WYTYCZNYCH */
            width: 100%;
            padding: 100px 20px 40px 20px; /* Dużo miejsca z góry, mniej z dołu */
            box-sizing: border-box;
            text-align: center;
        }

        .solution-container {
            max-width: 900px;
            margin: 0 auto;
        }

        /* --- NADTYTUŁ (Most łączący z poprzednią sekcją) --- */
        .solution-badge {
            display: inline-block;
            background-color: #e9f5eb;
            color: #198006;
            padding: 8px 18px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 25px;
            box-shadow: 0 4px 10px rgba(25, 128, 6, 0.1);
        }

        /* --- GŁÓWNY NAGŁÓWEK --- */
        #aslandi-solution-header h2 {
            font-size: clamp(30px, 4vw, 54px);
            font-weight: 800;
            color: #1a3b2b;
            line-height: 1.2;
            margin: 0;
            letter-spacing: -1px;
        }

        /* --- PODTYTUŁ (Dopełnienie) --- */
        #aslandi-solution-header p.subtitle {
            font-size: 18px;
            font-weight: 500;
            color: #555;
            margin: 25px auto 0;
            max-width: 700px;
            line-height: 1.6;
        }

        /* --- RESPONSIVE DESIGN (RWD) --- */
        @media (max-width: 768px) {
            #aslandi-solution-header { 
                padding: 60px 15px 20px 15px; /* Mniejsze marginesy na mobile */
            }
            .solution-badge {
                font-size: 12px;
                margin-bottom: 20px;
                padding: 6px 14px;
            }
            #aslandi-solution-header h2 { 
                font-size: 28px; /* Bardziej zwarty i mniejszy nagłówek na telefony */
            }
            
            /* KLUCZOWE UX: Całkowite ukrycie długiego tekstu na telefonach! */
            #aslandi-solution-header p.subtitle { 
                display: none; 
            }
        }

/* comparison */
/* --- GŁÓWNY KONTENER --- */
        #aslandi-premium-comparison {
            font-family: inherit;
            background-color: #f2f6f4; 
            width: 100%; 
            padding: 100px 20px;
            box-sizing: border-box;
            color: #111;
            position: relative;
            overflow: hidden;
        }

        .premium-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        /* --- ZNACZEK "VS" NA ŚRODKU (EFEKT WOW) --- */
        .vs-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #1a3b2b 0%, #198006 100%);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 20px;
            letter-spacing: 1px;
            box-shadow: 0 10px 25px rgba(25, 128, 6, 0.3), 0 0 0 8px #ffffff;
            z-index: 10;
        }

        /* --- SIATKA GRID (Zawsze 2 kolumny) --- */
        .premium-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: stretch;
            position: relative;
            z-index: 2;
        }

        /* --- STYL WSPÓLNY KART --- */
        .premium-card {
            border-radius: 24px;
            padding: 50px 40px;
            position: relative;
            display: flex;
            flex-direction: column;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            overflow: hidden;
            background: #ffffff;
        }

        /* Hover Effect - unoszenie i poświata */
        .premium-card:hover {
            transform: translateY(-8px);
        }

        /* Stylizacja Nagłówków w kartach */
        .card-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

        .icon-circle {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .icon-circle svg {
            width: 32px;
            height: 32px;
        }

        .card-header h3 {
            font-size: clamp(20px, 2.5vw, 28px);
            font-weight: 800;
            margin: 0;
            line-height: 1.3;
            letter-spacing: -0.5px;
        }

        /* Stylizacja Listy (Punkty) */
        .premium-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
            position: relative;
            z-index: 2;
        }

        .premium-list li {
            position: relative;
            padding-left: 45px;
            font-size: clamp(12px, 1.2vw, 16px);
            color: #4a4a4a;
            line-height: 1.6;
            font-weight: 500;
        }

        .premium-list li::before {
            position: absolute;
            left: 0;
            top: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 14px;
        }

        /* --- KARTA LEWA (WADY - CZERWIEŃ) --- */
        .card-wady {
            border: 1px solid rgba(231, 76, 60, 0.2);
            box-shadow: 0 15px 40px rgba(231, 76, 60, 0.05);
            /* Delikatny gradient tła dający głębię */
            background: linear-gradient(145deg, #ffffff 60%, #fff0f0 100%);
        }
        
        .card-wady:hover {
            box-shadow: 0 20px 50px rgba(231, 76, 60, 0.12);
            border-color: rgba(231, 76, 60, 0.4);
        }

        .card-wady .icon-circle {
            background-color: #fceceb;
            color: #e74c3c;
        }

        .card-wady .card-header h3 { color: #c0392b; }

        .list-wady li::before {
            content: '✕';
            background-color: #fceceb;
            color: #e74c3c;
        }

        /* ZAAWANSOWANE POGRUBIENIA (CZERWONE) */
        .list-wady li strong {
            color: #c0392b;
            font-weight: 800;
            background-color: rgba(231, 76, 60, 0.05);
            padding: 0 4px;
            border-radius: 4px;
        }

        /* --- KARTA PRAWA (KORZYŚCI - ZIELEŃ) --- */
        .card-korzysci {
            border: 1px solid rgba(25, 128, 6, 0.2);
            box-shadow: 0 15px 40px rgba(25, 128, 6, 0.05);
            background: linear-gradient(145deg, #ffffff 60%, #f0fdf2 100%);
        }

        .card-korzysci:hover {
            box-shadow: 0 20px 50px rgba(25, 128, 6, 0.12);
            border-color: rgba(25, 128, 6, 0.4);
        }

        .card-korzysci .icon-circle {
            background-color: #e9f5eb;
            color: #198006;
        }

        .card-korzysci .card-header h3 { color: #1a3b2b; }

        .list-korzysci li::before {
            content: '✓';
            background-color: #e9f5eb;
            color: #198006;
            font-size: 16px;
        }

        /* ZAAWANSOWANE POGRUBIENIA (ZIELONE) */
        .list-korzysci li strong {
            color: #198006;
            font-weight: 800;
            background-color: rgba(25, 128, 6, 0.05);
            padding: 0 4px;
            border-radius: 4px;
        }

        /* --- RESPONSIVE DESIGN (SZEREGOWO NA MOBILE) --- */
        @media (max-width: 992px) {
            .premium-grid { gap: 20px; }
            .premium-card { padding: 40px 25px; }
            .vs-badge { width: 45px; height: 45px; font-size: 14px; box-shadow: 0 5px 15px rgba(25, 128, 6, 0.3), 0 0 0 5px #ffffff; }
        }

        @media (max-width: 768px) {
            #aslandi-premium-comparison { padding: 50px 10px; }
            
            /* KLUCZOWE: Trzymamy dwie kolumny na telefonie! */
            .premium-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px; /* Bardzo mały odstęp, by zmieścić karty */
            }

            .vs-badge { 
                width: 34px; 
                height: 34px; 
                font-size: 11px; 
                box-shadow: 0 4px 10px rgba(25, 128, 6, 0.2), 0 0 0 4px #ffffff;
                /* Przesunięcie lekko do góry na mobile, by lepiej leżał między nagłówkami */
                top: 40px; 
            }

            .premium-card {
                padding: 20px 12px;
                border-radius: 16px;
            }

            .icon-circle { width: 40px; height: 40px; margin-bottom: 12px; }
            .icon-circle svg { width: 20px; height: 20px; }

            .card-header { margin-bottom: 25px; }
            .card-header h3 { font-size: 14px; } /* Mniejszy nagłówek */

            .premium-list { gap: 15px; }
            
            /* MIKROTYPOGRAFIA DLA MOBILE */
            .premium-list li {
                padding-left: 22px; /* Mniej miejsca na punktor */
                font-size: 11px; /* Bardzo mała, ale ostra czcionka */
                line-height: 1.4;
                /* Zapobiega urywaniu długich słów jak "dystrybucyjne" */
                word-wrap: break-word; 
                hyphens: auto; 
            }

            .premium-list li::before {
                width: 16px;
                height: 16px;
                font-size: 9px;
            }
            
            .list-wady li strong, .list-korzysci li strong {
                padding: 0 2px; /* Mniejsze podświetlenie na mobile */
            }
        }
        
        @media (max-width: 360px) {
            .premium-list li { font-size: 10px; }
            .card-header h3 { font-size: 13px; }
        }

/* efficiency-header */
/* --- GŁÓWNY KONTENER NAGŁÓWKA --- */
        #aslandi-efficiency-header {
            font-family: inherit;
            background-color: #ffffff; /* Czysta biel, idealna pod izometryczną grafikę */
            width: 100%;
            /* Duży padding u góry odcina od poprzedniej sekcji, mały na dole zbliża do grafiki */
            padding: 100px 20px 20px 20px; 
            box-sizing: border-box;
            text-align: center;
            position: relative;
        }

        .efficiency-container {
            max-width: 900px;
            margin: 0 auto;
        }

        /* --- GŁÓWNY NAGŁÓWEK --- */
        #aslandi-efficiency-header h2 {
            /* Płynne skalowanie: od 32px na mobile do 54px na desktopie */
            font-size: clamp(32px, 4.5vw, 54px);
            color: #1a3b2b; /* Ciemna zieleń Aslandi */
            line-height: 1.2;
            margin: 0;
            letter-spacing: -1px;
        }

        /* Akcentowanie słów kluczowych w nagłówku */
        #aslandi-efficiency-header h2 span {
            font-weight: 800; /* Mocne pogrubienie dla korzyści */
        }
        
        #aslandi-efficiency-header h2 .light-text {
            font-weight: 500; /* Lżejsza waga dla słowa pytającego */
        }

        /* --- RESPONSIVE DESIGN (RWD) --- */
        @media (max-width: 768px) {
            #aslandi-efficiency-header { 
                padding: 70px 15px 15px 15px; /* Mniejsze marginesy na telefonach */
            }
        }

/* efficiency-conclusion */
/* --- GŁÓWNY KONTENER SEKCJI --- */
        #aslandi-conclusion-section {
            font-family: inherit;
            background-color: #ffffff; 
            width: 100%;
            padding: 20px 20px 80px 20px; 
            box-sizing: border-box;
            display: flex;
            justify-content: center; 
            align-items: center;
        }

        /* --- PIGUŁKA Z ANIMOWANYM GRADIENTEM --- */
        .conclusion-pill {
            position: relative;
            display: inline-block;
            
            /* Tło z gradientem rozciągnięte na 300% szerokości, by móc nim poruszać */
            background: linear-gradient(90deg, #ffffff 0%, #dcfce5 33%, #ffffff 66%, #dcfce5 100%);
            background-size: 300% 100%;
            
            /* Subtelna, nieskończona animacja płynięcia (linear = stała prędkość) */
            animation: flowingEnergy 6s linear infinite;

            border: 1px solid #e1e9e4; /* Delikatna ramka zamiast ostrej */
            border-radius: 60px; 
            padding: 22px 50px;
            box-shadow: 0 12px 30px rgba(25, 128, 6, 0.05); /* Miękki cień */
            text-align: center;
            max-width: 900px;
            transition: transform 0.3s ease;
        }

        /* Delikatny efekt po najechaniu myszką */
        .conclusion-pill:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(25, 128, 6, 0.08);
        }

        /* Klatki kluczowe animacji tła */
        @keyframes flowingEnergy {
            0% { background-position: 100% 0; }
            100% { background-position: 0% 0; }
        }

        /* --- TEKST WEWNĄTRZ --- */
        .conclusion-pill p {
            margin: 0;
            font-size: clamp(16px, 2.2vw, 24px); 
            font-weight: 600; /* Zmienione na 600 dla większej czystości */
            color: #222;
            line-height: 1.4;
            letter-spacing: -0.3px;
            position: relative;
            z-index: 2; 
        }

        .conclusion-pill p strong {
            color: #198006; 
            font-weight: 800; /* Wniosek mocno wybity */
        }

        /* --- RESPONSIVE DESIGN (RWD) --- */
        @media (max-width: 768px) {
            #aslandi-conclusion-section {
                padding: 10px 15px 60px 15px;
            }
            .conclusion-pill {
                padding: 18px 25px;
                border-radius: 30px; 
            }
            .conclusion-pill p {
                font-size: 15px;
            }
        }
        
        @media (max-width: 380px) {
            .conclusion-pill { padding: 15px 20px; }
            .conclusion-pill p { font-size: 13.5px; }
        }

/* savings-secret */
/* --- GŁÓWNY KONTENER SEKCJI --- */
        #aslandi-savings-secret {
            font-family: inherit;
            background-color: #f2f6f4; /* Delikatne tło dla odcięcia od białej sekcji powyżej */
            width: 100%; 
            padding: 100px 20px;
            box-sizing: border-box;
            color: #111;
            position: relative;
            overflow: hidden;
        }

        .secret-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* --- NAGŁÓWEK I PODTYTUŁ --- */
        .secret-header {
            text-align: center;
            width: 100%;
            margin-bottom: 60px;
        }

        .secret-header h2 {
            font-size: clamp(34px, 4.5vw, 54px);
            font-weight: 800;
            color: #1a3b2b; /* Ciemnoszary z oryginału */
            line-height: 1.15;
            margin: 0 0 15px 0;
            letter-spacing: -1px;
        }

        .secret-header p.subtitle {
            font-size: clamp(18px, 2.5vw, 24px);
            font-weight: 500;
            color: #222;
            margin: 0 auto;
            max-width: 900px;
            line-height: 1.4;
        }

        .secret-header p.subtitle strong {
            font-weight: 800;
        }

        /* --- SIATKA GRID (PARAGON + TEKST) --- */
        .secret-content {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Dwie równe kolumny */
            gap: 50px;
            align-items: center; /* Wyśrodkowanie w pionie */
        }

        /* --- LEWA STRONA (GRAFIKA PARAGONU) --- */
        .secret-image-col {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .receipt-img {
            max-width: 100%;
            width: 100%;
            max-width: 500px; /* Optymalny rozmiar na desktop */
            height: auto;
            object-fit: contain;
            /* Efekt 3D dla grafiki PNG (urwany papier) */
            filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));
            transition: transform 0.4s ease;
        }

        .receipt-img:hover {
            transform: translateY(-5px);
        }

        /* --- PRAWA STRONA (DUŻY TEKST PODSUMOWANIA) --- */
        .secret-text-col {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .highlight-text {
            font-size: clamp(26px, 3.5vw, 42px); /* Ogromny, widoczny tekst */
            font-weight: 800;
            color: #1a3b2b; /* Ciemnozielony z palety Aslandi */
            line-height: 1.4;
            margin: 0;
            letter-spacing: -0.5px;
        }

        /* Efekt zakreślacza (Marker Effect) */
        .marker {
            background-color: #ffe566; /* Jasny żółty zakreślacz */
            padding: 2px 8px;
            border-radius: 8px;
            color: #1a3b2b;
            display: inline;
            /* Subtelny gradient symulujący pociągnięcie markera */
            background-image: linear-gradient(120deg, #ffe566 0%, #ffcc00 100%);
            box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3);
        }

        /* --- RESPONSIVE DESIGN (RWD) --- */
        @media (max-width: 992px) {
            .secret-content { gap: 40px; }
            .highlight-text { font-size: 28px; }
        }

        @media (max-width: 768px) {
            /* ZMNIEJSZONY padding główny na mobile (z 60px na 40px) */
            #aslandi-savings-secret { padding: 40px 15px; }
            
            /* ZMNIEJSZONY margines pod nagłówkiem (z 40px na 20px) */
            .secret-header { margin-bottom: 20px; }
            .secret-header h2 { font-size: 30px; }
            .secret-header p.subtitle { font-size: 17px; }

            /* ZMNIEJSZONY odstęp między grafiką a tekstem (z 30px na 15px) */
            .secret-content {
                grid-template-columns: 1fr;
                gap: 15px;
                text-align: center;
            }

            .receipt-img { max-width: 350px; } /* Zmniejszenie paragonu na telefony */

            .secret-text-col { align-items: center; }
            
            .highlight-text { 
                font-size: 22px; 
                line-height: 1.5;
            }
            .marker { padding: 2px 4px; border-radius: 6px; }
        }
        
        @media (max-width: 380px) {
            .secret-header h2 { font-size: 26px; }
            .highlight-text { font-size: 19px; }
        }

/* roles */
/* --- GŁÓWNY KONTENER --- */
        #aslandi-roles-section-clean {
            font-family: inherit;
            background-color: #FFFFFF; /* Subtelne tło */
            width: 100%;
            padding: 100px 20px;
            box-sizing: border-box;
            color: #111;
            position: relative;
            overflow: hidden;
        }

        .roles-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* --- NAGŁÓWEK GŁÓWNY --- */
        .roles-header {
            text-align: center;
            margin-bottom: 70px;
        }

        .roles-header h2 {
            font-size: clamp(28px, 4vw, 48px);
            font-weight: 800;
            color: #1a3b2b;
            line-height: 1.2;
            margin: 0;
            letter-spacing: -0.5px;
        }

        /* --- SIATKA KART I LINIA PODZIAŁU --- */
        .roles-grid-wrapper {
            position: relative;
            width: 100%;
        }

        /* Centralna linia dzieląca */
        .roles-divider {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            background-color: #198006; 
            transform: translateX(-50%);
            opacity: 0.3; /* Bardzo subtelna linia */
            z-index: 1;
        }

        .roles-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px; 
            position: relative;
            z-index: 2;
        }

        /* --- STYLIZACJA KART (CZYSTA, BEZ AGRESYWNYCH ANIMACJI) --- */
        .role-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 20px;
            border-radius: 20px;
            background: transparent;
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }

        /* Tylko bardzo delikatny cień po najechaniu, bez przygaszania reszty! */
        .role-card:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
            transform: translateY(-2px);
        }

        /* Nagłówki sekcji */
        .role-card h3 {
            font-size: clamp(20px, 2.5vw, 32px);
            font-weight: 800;
            color: #198006; 
            margin: 0 0 10px 0; /* Optyczne wyrównanie */
            line-height: 1.2;
        }

        /* Podtytuły */
        .role-card p.role-subtitle {
            font-size: clamp(14px, 1.5vw, 18px);
            font-weight: 500;
            color: #444;
            margin: 0 0 35px 0; /* Większy oddech przed grafiką */
        }

        /* Kontenery na ilustracje */
        .role-img-wrapper {
            width: 100%;
            height: 240px; /* Stała wysokość dla wyrównania */
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 40px;
        }

        .role-img-wrapper img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* --- LISTA PUNKTÓW --- */
        .role-list {
            list-style: none;
            padding: 0;
            margin: 0;
            text-align: left; 
            width: 100%;
            max-width: 380px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .role-list li {
            position: relative;
            padding-left: 25px;
            font-size: clamp(14px, 1.5vw, 18px);
            color: #222;
            line-height: 1.4;
            font-weight: 500;
        }

        .role-list li::before {
            content: '•';
            position: absolute;
            left: 0;
            top: -2px;
            color: #198006;
            font-size: 24px;
            font-weight: 900;
        }

        /* --- RESPONSIVE DESIGN (MOBILE SZEREGOWO 1:1) --- */
        @media (max-width: 992px) {
            .roles-grid { gap: 30px; }
            .role-img-wrapper { height: 180px; margin-bottom: 30px; }
        }

        @media (max-width: 768px) {
            #aslandi-roles-section-clean { padding: 60px 10px; }
            .roles-header { margin-bottom: 40px; }
            .roles-header h2 { font-size: 26px; }

            /* Szeregowo obok siebie */
            .roles-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px; 
            }

            .roles-divider {
                width: 1px; 
                opacity: 0.15;
            }

            .role-card {
                padding: 10px 5px; 
            }
            
            .role-card:hover {
                transform: none; /* Wyłączamy podskakiwanie na dotykowych ekranach */
                box-shadow: none;
            }

            .role-card h3 {
                font-size: 13px;
                margin-bottom: 5px;
            }

            .role-card p.role-subtitle {
                font-size: 10.5px;
                line-height: 1.3;
                margin-bottom: 15px;
            }

            .role-img-wrapper {
                height: 90px;
                margin-bottom: 20px;
            }

            /* Mikrotpyografia dla list na małych ekranach */
            .role-list { gap: 10px; }
            .role-list li {
                font-size: 10.5px;
                line-height: 1.35;
                padding-left: 14px;
                word-wrap: break-word;
                hyphens: auto;
            }

            .role-list li::before {
                font-size: 16px;
                top: -3px;
            }
        }
        
        @media (max-width: 360px) {
            .role-card h3 { font-size: 11px; }
            .role-list li { font-size: 9.5px; padding-left: 12px; }
        }

/* main-cta */
/* --- GŁÓWNY KONTENER SEKCJI --- */
        #aslandi-main-cta {
            width: 100%;
            background-color: #ffffff; /* Czysta, jasnoszara biel */
            padding: 80px 20px; /* Więcej oddechu w pionie */
            box-sizing: border-box;
            display: flex;
            justify-content: center; /* Wyśrodkowanie przycisku w linii */
            font-family: inherit; 
        }

        /* === PRZEPROJEKTOWANIE PRZYCISKU CTA (HIGH-END MINIMALISM) === */
        .cta-banner-btn {
            display: inline-block; /* Zmiana z block na inline-block, by przycisk nie był bannerem na całą szerokość */
            
            /* ZNACZĄCE ZMNIEJSZENIE ROZMIARU */
            width: auto; /* Przycisk dostosowuje się do tekstu */
            max-width: 100%; /* Zabezpieczenie na mobile */
            
            /* NOWOCZESNA ZIELEŃ BRANDOWA ASLANDI */
            background-color: #198006; 
            color: #ffffff; /* Biały tekst dla idealnego kontrastu */
            
            text-decoration: none;
            text-align: center;
            
            /* KOMPAKTOWY UX (Airy design) */
            padding: 20px 50px; /* Mniejsze wypełnienie góra/dół, szerokie na boki */
            border-radius: 50px; /* Pełne zaokrąglenie pigułki */
            
            /* Usunięte ramki i żółty cień. Dodany miękki, elegancki cień */
            border: none;
            
            /* PŁYNNE SKALOWANIE CZCIONKI (Mniejsza, ale czytelna) */
            font-size: clamp(16px, 2vw, 20px); 
            font-weight: 700; /* Mocne, nowoczesne pogrubienie */
            letter-spacing: -0.3px;
            
            /* PŁYNNE KRZYWE ANIMACJI (UX) */
            box-shadow: 0 10px 30px rgba(25, 128, 6, 0.15); /* Czysta, zielona głębia */
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Płynne krzywe Apple-style */
            cursor: pointer;
        }

        /* --- EFEKT NAKIEROWANIA (HOVER - TAKTYLNY UX) --- */
        .cta-banner-btn:hover {
            transform: translateY(-5px); /* Eleganckie unoszenie */
            background-color: #136604; /* Delikatna zmiana odcienia na ciemniejszy */
            color: #ffffff;
            box-shadow: 0 15px 35px rgba(25, 128, 6, 0.3); /* Głębszy, bardziej nasycony zielony cień */
        }

        /* --- RESPONSIVE DESIGN (MOBILE) --- */
        @media (max-width: 768px) {
            #aslandi-main-cta {
                padding: 22px 15px; 
            }
            .cta-banner-btn {
                width: 100%; /* Na bardzo małych ekranach może wrócić do pełnej szerokości */
                box-sizing: border-box;
                padding: 18px 20px;
                border-radius: 50px;
                font-size: 16px;
                
                /* Zapobiega urywaniu słów */
                word-wrap: break-word;
                hyphens: auto; 
            }
        }
        
        @media (max-width: 380px) {
            .cta-banner-btn { 
                padding: 12px 15px;
                font-size: 15px;
            }
        }

/* why-now */
/* --- GŁÓWNY KONTENER SEKCJI --- */
        #aslandi-why-now-section-refined {
            font-family: inherit;
            background-color: #f2f6f4; /* Super czysta, jasnoszara biel */
            width: 100%;
            padding: 100px 20px;
            box-sizing: border-box;
            color: #111;
        }

        .why-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* --- NAGŁÓWEK WYŚRODKOWANY --- */
        .why-header {
            text-align: center;
            margin-bottom: 70px; /* Zwiększony oddech */
        }

        .why-header h2 {
            font-size: clamp(34px, 4.5vw, 54px);
            font-weight: 800;
            color: #1a3b2b; /* Ciemna zieleń Aslandi */
            margin: 0;
            letter-spacing: -1px;
        }

        /* --- SIATKA KART (3 KOLUMNY) --- */
        .why-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px; /* Nieco mniejszy gap, bo karty nie mają już twardych ram */
            margin-bottom: 70px;
        }

        /* --- STYLIZACJA KART (HIGH-END MINIMALISM) --- */
        .why-card {
            background-color: #ffffff;
            border-radius: 20px; /* Bardziej eleganckie, mniejsze zaokrąglenie */
            padding: 50px 30px; /* Więcej przestrzeni wewnątrz (Airy design) */
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            
            /* Usunięte grube ramki i żółty cień. Dodany miękki, elegancki cień */
            border: 1px solid rgba(26, 59, 43, 0.05); /* Ledwo widoczna ramka */
            box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* Czysta głębia */
            
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Płynne krzywe Apple-style */
            cursor: default;
        }

        /* Efekt WOW po najechaniu myszką */
        .why-card:hover {
            transform: translateY(-8px); /* Eleganckie unoszenie */
            box-shadow: 0 20px 40px rgba(25, 128, 6, 0.08); /* Głębszy, lekko zielony cień */
            border-color: rgba(25, 128, 6, 0.15);
        }

        /* --- IKONY W KARTACH (NOWOCZESNE) --- */
        .why-icon {
            width: 80px; 
            height: 80px; 
            background: linear-gradient(135deg, #f0f7f3 0%, #e2efe6 100%); /* Delikatny gradient w tle ikony */
            border-radius: 24px; /* Zmiana z kółka na miękki kwadrat (squircle) */
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px;
            color: #198006; /* Główny, żywy zielony */
            transition: transform 0.3s ease;
        }

        /* Mikrointerakcja - ikona podskakuje przy najeździe na kartę */
        .why-card:hover .why-icon {
            transform: scale(1.05) translateY(-3px);
            background: linear-gradient(135deg, #e9f5eb 0%, #d4ead9 100%);
        }

        .why-icon svg {
            width: 38px; 
            height: 38px; 
            fill: currentColor;
        }

        /* Typografia wewnątrz kart */
        .why-card h3 {
            font-size: 24px;
            font-weight: 800;
            color: #1a3b2b; /* Ciemnozielony tytuł, nie czarny */
            margin: 0 0 15px 0;
            letter-spacing: -0.5px;
        }

        .why-card p {
            font-size: 16px;
            font-weight: 500;
            color: #555; /* Bardziej stonowany, elegancki szary */
            line-height: 1.6;
            margin: 0;
        }

        /* --- PODPIS NA DOLE --- */
        .why-footer {
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }

        .why-footer h4 {
            font-size: clamp(20px, 2.5vw, 30px);
            font-weight: 700; /* Zmieniono z 800 na 700 dla elegancji */
            color: #1a3b2b;
            line-height: 1.5;
            margin: 0;
            letter-spacing: -0.5px;
        }

        /* Dodanie wyróżnienia kolorem dla "Twoja własna energetyka" */
        .why-footer h4 span {
            color: #198006;
            font-weight: 800;
        }

        /* --- RESPONSIVE DESIGN (RWD) --- */
        @media (max-width: 1024px) {
            .why-card { padding: 40px 20px; }
        }

        @media (max-width: 768px) {
            #aslandi-why-now-section-refined { padding: 60px 15px; }
            .why-header { margin-bottom: 40px; }
            
            .why-grid {
                grid-template-columns: 1fr;
                gap: 20px; 
                max-width: 450px; 
                margin: 0 auto 40px auto; 
            }

            .why-card { 
                padding: 40px 25px; 
            }
            
            .why-card:hover {
                transform: translateY(-4px); /* Mniejsze unoszenie na mobile */
            }
            
            .why-card h3 { font-size: 22px; }
            .why-card p { font-size: 15px; }
            
            .why-footer h4 { font-size: 20px; }
        }
        
        @media (max-width: 380px) {
            .why-card { padding: 35px 20px; }
            .why-card h3 { font-size: 20px; }
            .why-card p { font-size: 14px; }
        }

/* membership */
/* --- GŁÓWNY KONTENER SEKCJI --- */
        #aslandi-join-costs-section {
            font-family: inherit;
            background-color: #ffffff; /* Czysta biel */
            width: 100%;
            padding: 100px 20px;
            box-sizing: border-box;
            color: #111;
        }

        .join-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* --- NAGŁÓWEK WYŚRODKOWANY --- */
        .join-header {
            text-align: center;
            margin-bottom: 60px;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .join-header h2 {
            font-size: clamp(28px, 4vw, 48px);
            font-weight: 800;
            color: #1a3b2b;
            line-height: 1.2;
            margin: 0 0 20px 0;
            letter-spacing: -0.5px;
        }

        .join-header p {
            font-size: clamp(16px, 2vw, 20px);
            font-weight: 500;
            color: #444;
            line-height: 1.5;
            margin: 0;
        }

        /* --- SIATKA: GRAFIKA + KARTA KOSZTÓW --- */
        .join-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        /* --- LEWA STRONA: GRAFIKA --- */
        .join-image-col {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .join-image-col img {
            width: 100%;
            max-width: 500px;
            height: auto;
            object-fit: contain;
            /* Subtelna animacja lewitacji */
            animation: floatTable 6s ease-in-out infinite;
            filter: drop-shadow(0 20px 30px rgba(0,0,0,0.05));
        }

        @keyframes floatTable {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-12px); }
            100% { transform: translateY(0px); }
        }

        /* --- PRAWA STRONA: KARTA KOSZTÓW PREMIUM --- */
        .pricing-card {
            background-color: #fcfcfc;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.08);
            border: 1px solid #eee;
            transition: transform 0.3s ease;
        }

        .pricing-card:hover {
            transform: translateY(-5px);
        }

        /* Złoty/Musztardowy nagłówek karty z oryginału */
        .pricing-header {
            background: linear-gradient(135deg, #dcb059 0%, #d4a342 100%);
            padding: 25px 20px;
            text-align: center;
        }

        .pricing-header h3 {
            margin: 0;
            color: #111;
            font-size: clamp(18px, 2vw, 24px);
            font-weight: 800;
            letter-spacing: -0.3px;
        }

        /* Lista kosztów (Wiersze) */
        .pricing-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        .pricing-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 30px;
            border-bottom: 1px solid #eaeaea;
            gap: 20px;
        }

        .pricing-list li:last-child {
            border-bottom: none;
        }

        /* Etykiety po lewej (np. Wpisowe:) */
        .p-label {
            font-size: 18px;
            font-weight: 600;
            color: #555;
            flex: 0 0 auto;
        }

        /* Wartości po prawej */
        .p-value {
            font-size: 18px;
            color: #222;
            text-align: right;
            font-weight: 500;
        }

        .p-value strong {
            font-weight: 800;
            font-size: 20px;
            color: #1a3b2b; /* Ciemnozielony dla głównych kwot */
        }

        /* --- SPECJALNA STYLIZACJA PROMOCJI (UX HACK) --- */
        .promo-container {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            text-align: right;
        }

        .old-price {
            font-size: 16px;
            color: #999;
            text-decoration: line-through;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .promo-text {
            color: #d32f2f; /* Wyraźna czerwień */
            font-size: 15px;
            font-weight: 700;
            line-height: 1.3;
            /* Delikatne pulsowanie promocji */
            animation: pulsePromo 2.5s infinite;
        }

        .promo-text strong {
            display: block;
            font-size: 24px;
            color: #d32f2f;
            margin-top: 2px;
        }

        @keyframes pulsePromo {
            0% { text-shadow: 0 0 0 rgba(211, 47, 47, 0); }
            50% { text-shadow: 0 0 10px rgba(211, 47, 47, 0.4); }
            100% { text-shadow: 0 0 0 rgba(211, 47, 47, 0); }
        }

        /* --- RESPONSIVE DESIGN (MOBILE) --- */
        @media (max-width: 992px) {
            .join-content { gap: 40px; }
            .pricing-list li { padding: 20px; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; }
            .p-value { text-align: left; width: 100%; }
            .promo-container { align-items: flex-start; text-align: left; }
        }

        @media (max-width: 768px) {
            #aslandi-join-costs-section { padding: 50px 15px; }
            .join-header { margin-bottom: 40px; }
            .join-content { grid-template-columns: 1fr; gap: 30px; }
            
            .join-image-col img { max-width: 320px; }
            
            .p-label { font-size: 16px; }
            .p-value, .p-value strong { font-size: 16px; }
            .promo-text strong { font-size: 20px; }
        }

/* faq */
/* --- GŁÓWNY KONTENER SEKCJI --- */
        #aslandi-faq-section-clean {
            font-family: inherit;
            background-color: #f2f6f4; 
            width: 100%;
            padding: 100px 20px;
            box-sizing: border-box;
            color: #111;
        }

        .faq-wrapper {
            max-width: 800px; 
            margin: 0 auto;
        }

        /* --- NAGŁÓWEK --- */
        .faq-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .faq-header h2 {
            font-size: clamp(30px, 4vw, 48px);
            font-weight: 800;
            color: #1a3b2b; 
            margin: 0;
            letter-spacing: -0.5px;
        }

        /* --- LISTA AKORDEONOWA --- */
        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 15px; 
        }

        /* Pojedynczy element (Pytanie + Odpowiedź) */
        .faq-item {
            background-color: #ffffff !important; 
            border: 1px solid #e1e9e4; 
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        /* Zmiana wyglądu CAŁEGO KAFELKA po rozwinięciu */
        .faq-item.active {
            border-color: #198006; 
            box-shadow: 0 10px 30px rgba(25, 128, 6, 0.06); 
        }

        /* --- PYTANIE (KLIKALNE) --- */
        .faq-question {
            width: 100%;
            text-align: left;
            background-color: transparent !important; 
            border: none;
            padding: 25px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: clamp(16px, 2vw, 18px);
            font-weight: 700;
            color: #333 !important;
            font-family: inherit;
            transition: color 0.2s ease;
        }

        .faq-question:hover {
            color: #198006 !important;
        }

        .faq-item.active .faq-question {
            color: #1a3b2b !important; 
            /* Zmniejszony padding dolny pytania, by zrównoważyć nowy padding odpowiedzi */
            padding-bottom: 10px; 
        }

        /* Ikonka strzałki (Chevron) */
        .faq-icon {
            flex-shrink: 0;
            margin-left: 20px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            color: #888; 
        }

        .faq-question:hover .faq-icon,
        .faq-item.active .faq-icon {
            color: #198006; 
        }

        .faq-icon svg {
            width: 18px;
            height: 18px;
            fill: currentColor;
        }

        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }

        /* --- ODPOWIEDŹ (ZWIJANA) --- */
        .faq-answer-wrapper {
            max-height: 0;
            overflow: hidden;
            background-color: transparent;
            transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        .faq-answer {
            /* DODANO PADDING GÓRNY (15px) - Oddech dla tekstu! */
            padding: 15px 30px 25px 30px; 
            font-size: clamp(14px, 1.5vw, 16px);
            color: #555;
            line-height: 1.6;
            font-weight: 500;
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .faq-item.active .faq-answer {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- RESPONSIVE DESIGN (MOBILE) --- */
        @media (max-width: 768px) {
            #aslandi-faq-section-clean { padding: 60px 15px; }
            .faq-header { margin-bottom: 35px; }
            .faq-question { padding: 20px; }
            .faq-item.active .faq-question { padding-bottom: 5px; }
            
            /* PADDING GÓRNY NA MOBILE (12px) */
            .faq-answer { padding: 12px 20px 20px 20px; }
            .faq-icon { margin-left: 15px; }
        }

/* contact */
/* --- GŁÓWNY KONTENER SEKCJI --- */
        #aslandi-home-contact {
            background-color: #ffffff; 
            width: 100%;
            padding: 100px 20px;
            box-sizing: border-box;
            font-family: inherit;
            color: #111;
            position: relative;
        }

        .contact-container {
            max-width: 1240px; /* ZMIANA: Lekko poszerzony kontener główny */
            margin: 0 auto;
            display: flex;
            align-items: center; /* Środkuje obie kolumny w pionie */
            gap: 50px;
        }

        /* --- LEWA KOLUMNA: DANE KONTAKTOWE --- */
        .contact-info-col {
            flex: 1;
        }

        .contact-info-col h2 {
            font-size: clamp(32px, 4vw, 48px);
            font-weight: 800;
            color: #1a3b2b;
            margin: 0 0 20px 0;
            line-height: 1.2;
            letter-spacing: -1px;
        }

        .contact-info-col p.intro-text {
            font-size: 18px;
            color: #555;
            line-height: 1.6;
            margin: 0 0 40px 0;
            font-weight: 500;
        }

        .info-list {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .info-item {
            display: flex;
            align-items: center; 
            gap: 20px;
            text-decoration: none; 
            text-align: left;
        }

        .info-icon {
            width: 50px;
            height: 50px;
            background-color: #f2f6f4; 
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #198006; 
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .info-item:hover .info-icon {
            background-color: #198006;
            color: #ffffff;
            transform: scale(1.05);
        }

        .info-icon svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

        .info-text h4 {
            margin: 0 0 5px 0;
            font-size: 14px;
            text-transform: uppercase;
            color: #888;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .info-text span {
            font-size: 20px;
            font-weight: 700;
            color: #1a3b2b;
            transition: color 0.3s ease;
        }

        .info-item.phone-item span {
            font-size: 26px;
            font-weight: 800;
            color: #198006;
        }

        .info-item:hover .info-text span {
            color: #198006;
        }

        /* --- PRAWA KOLUMNA: FORMULARZ (Poszerzony i zbalansowany) --- */
        .contact-form-col {
            flex: 0 0 580px; /* ZMIANA: Poszerzono z 500px na 580px */
            background-color: #ffffff;
            border: 1px solid #eaeaea;
            border-radius: 24px;
            padding: 45px 50px; /* ZMIANA: Mniejsze paddingi pionowe, większe poziome */
            box-shadow: 0 15px 50px rgba(0,0,0,0.06); 
            box-sizing: border-box;
        }

        .contact-form-col .header-area {
            text-align: center;
            margin-bottom: 25px; /* ZMIANA: Lekko zmniejszony margines */
        }

        .contact-form-col h3 {
            color: #1a3b2b;
            font-size: clamp(24px, 3vw, 32px);
            font-weight: 800;
            margin: 0 0 10px 0;
            line-height: 1.2;
            letter-spacing: -1px;
            text-transform: uppercase;
        }

        .contact-form-col p {
            color: #555;
            font-size: 16px;
            line-height: 1.6;
            margin: 0;
            font-weight: 500;
        }

        /* Stylizacja pól CF7 */
        .contact-form-col .wpcf7-form-control-wrap {
            display: block;
            margin-bottom: 15px; /* ZMIANA: Ciasniejszy rozkład pól, redukuje wysokość */
        }

        .contact-form-col input[type="text"],
        .contact-form-col input[type="tel"],
        .contact-form-col input[type="email"],
        .contact-form-col textarea {
            width: 100% !important;
            padding: 16px 20px !important; /* ZMIANA: Bardziej kompaktowe pola w pionie */
            font-size: 16px !important;
            border: 2px solid #e1e9e4 !important;
            border-radius: 12px !important;
            outline: none !important;
            transition: all 0.3s ease !important;
            background-color: #fcfcfc !important;
            box-sizing: border-box !important;
            font-family: inherit !important;
            color: #1a3b2b !important;
        }

        .contact-form-col textarea {
            min-height: 100px;
            resize: vertical;
        }

        .contact-form-col input:focus,
        .contact-form-col textarea:focus {
            border-color: #198006 !important;
            background-color: #fff !important;
            box-shadow: 0 0 0 5px rgba(25, 128, 6, 0.08) !important;
        }

        .contact-form-col input[type="submit"] {
            width: 100% !important;
            background: #198006 !important;
            color: #ffffff !important;
            border: none !important;
            padding: 20px !important;
            border-radius: 50px !important;
            font-size: 18px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            cursor: pointer !important;
            transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
            box-shadow: 0 10px 25px rgba(25, 128, 6, 0.2) !important;
            letter-spacing: 1px !important;
            margin-top: 10px !important;
            margin-bottom: 15px !important;
        }

        .contact-form-col input[type="submit"]:hover {
            background: #136604 !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 15px 30px rgba(25, 128, 6, 0.3) !important;
        }

        /* Dopisek psychologiczny */
        .form-promise-box {
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            color: #198006;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            animation: pulseText 2s infinite;
        }

        @keyframes pulseText {
            0% { opacity: 0.8; }
            50% { opacity: 1; }
            100% { opacity: 0.8; }
        }

        .form-trust-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 15px;
            font-size: 13px;
            color: #888;
            font-weight: 500;
            text-align: center;
            line-height: 1.4;
        }

        .form-trust-note svg {
            width: 16px;
            height: 16px;
            fill: #198006;
            flex-shrink: 0;
        }

        /* --- RESPONSIVE DESIGN --- */
        @media (max-width: 1024px) {
            .contact-container {
                flex-direction: column;
                gap: 50px;
            }
            .contact-info-col {
                text-align: center; 
            }
            .info-list {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                width: max-content; 
                margin: 0 auto; 
            }
            .info-item {
                flex-direction: row; 
                align-items: center;
                text-align: left;
            }
            .contact-form-col {
                flex: none;
                width: 100%;
                max-width: 650px;
            }
        }

        @media (max-width: 768px) {
            #aslandi-home-contact {
                padding: 60px 15px;
            }
            .contact-info-col h2 {
                font-size: 28px;
            }
            .contact-form-col {
                padding: 40px 20px;
            }
            .info-item.phone-item span {
                font-size: 22px;
            }
            .info-text span {
                font-size: 16px;
            }
            .form-promise-box {
                font-size: 12px;
            }
        }

/* footer */
/* --- GŁÓWNY KONTENER FOOTERA --- */
        #aslandi-main-footer {
            width: 100%;
            background-color: #1a3b2b; /* Ciemny zielony - spójny z Headerem */
            color: #ffffff;
            font-family: inherit;
            padding: 80px 20px 20px 20px;
            box-sizing: border-box;
        }

        .footer-container {
            max-width: 1240px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* Trzy równe kolumny */
            gap: 50px;
            margin-bottom: 50px;
        }

        /* --- KOLUMNA 1: LOGO I SOCIAL MEDIA --- */
        .footer-brand {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 25px;
        }

        .footer-logo img {
            max-height: 80px; 
            width: auto;
            object-fit: contain;
        }

        .footer-socials {
            display: flex;
            gap: 15px;
        }

        .social-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background-color: #ffffff;
            border-radius: 8px; /* Miękki kwadrat */
            color: #1a3b2b; /* Zielona ikona */
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .social-icon svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        .social-icon:hover {
            background-color: #198006; /* Jasnozielone tło */
            color: #ffffff; /* Biała ikona */
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(25, 128, 6, 0.3);
        }

        /* --- WSPÓLNE STYLE DLA KOLUMN 2 I 3 --- */
        .footer-col h3 {
            color: #f2ce83; /* Żółty akcent z Twojego brandingu */
            font-size: 18px;
            font-weight: 700;
            margin: 0 0 20px 0;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        /* --- KOLUMNA 2: MENU NAWIGACYJNE --- */
        .footer-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .footer-menu li a {
            color: #e1e9e4;
            text-decoration: none;
            font-size: 15px;
            font-weight: 500;
            transition: color 0.3s ease, padding-left 0.3s ease;
            display: inline-block;
        }

        .footer-menu li a:hover {
            color: #ffffff;
            padding-left: 5px; /* Delikatne przesunięcie przy najeździe */
        }

        /* --- KOLUMNA 3: KONTAKT --- */
        .footer-contact {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            color: #e1e9e4;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.5;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a.contact-item:hover {
            color: #ffffff;
        }

        .contact-item svg {
            width: 20px;
            height: 20px;
            fill: #f2ce83; /* Żółte ikonki kontaktowe */
            flex-shrink: 0;
            margin-top: 2px;
        }

        /* --- PASEK PRAW AUTORSKICH I PODPIS AUTORA --- */
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 25px;
            font-size: 13px;
            color: #888;
            max-width: 1240px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .author-credit {
            color: #aaa;
        }

        .author-link {
            color: #ffffff;
            text-decoration: none;
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: color 0.3s ease;
            position: relative;
            display: inline-block;
            margin-left: 5px;
        }

        .author-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -2px;
            left: 0;
            background-color: #f2ce83;
            transition: width 0.3s ease;
        }

        .author-link:hover {
            color: #f2ce83;
        }

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

        /* --- RESPONSIVE DESIGN --- */
        @media (max-width: 992px) {
            .footer-container {
                grid-template-columns: 1fr 1fr; 
            }
            .footer-brand {
                grid-column: 1 / -1; 
                align-items: center; 
                text-align: center;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                padding-bottom: 30px;
                margin-bottom: 10px;
            }
        }

        @media (max-width: 768px) {
            #aslandi-main-footer {
                padding: 60px 15px 30px 15px;
            }
            .footer-container {
                grid-template-columns: 1fr; 
                gap: 40px;
                text-align: center;
            }
            
            .contact-item {
                justify-content: center;
                flex-direction: column;
                align-items: center;
                gap: 8px;
            }
            .contact-item svg {
                margin-top: 0;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
                justify-content: center;
            }
        }