/* Egyedi CSS - @import eltávolítva, font-family Tailwind configban beállítva */
        body {
            /* A font-family-t most már a Tailwind kezeli, de biztonságból itt maradhat */
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
            padding-bottom: 15rem; 
        }
        .ai-gradient {
            background-image: linear-gradient(to right, #1d4ed8, #0ea5e9);
        }
        .ai-shadow {
            box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.3), 0 4px 6px -2px rgba(14, 165, 233, 0.1);
        }
        .faq-details summary {
            cursor: pointer;
            padding: 1rem 0;
            font-weight: 600;
            color: #1e293b;
            border-top: 1px solid #e2e8f0;
            list-style: none; /* Nyíl eltüntetése egyes böngészőkben */
        }
        /* Webkit alapú böngészők nyíl eltüntetése */
        .faq-details summary::-webkit-details-marker {
            display: none;
        }
        .faq-details details:last-child div {
            border-bottom: 1px solid #e2e8f0;
        }
        .faq-details details[open] summary {
            color: #1d4ed8;
        }
        .faq-details details[open] div {
            padding-bottom: 1rem;
            padding-top: 0.5rem;
            color: #475569;
        }
        .hero-height {
            min-height: 55vh; 
            display: flex;
            align-items: center;
            background-color: #0c1833;
        }
        
        /* 3D-hatású rács animáció */
        @keyframes floatGrid {
            0% { 
                background-position: 0% 0%; 
                transform: translateZ(0) rotateX(0deg) rotateY(0deg);
            }
            100% { 
                background-position: 100% 100%; 
                transform: translateZ(100px) rotateX(5deg) rotateY(5deg);
            }
        }
        .hero-pattern {
            background-image: linear-gradient(to right, rgba(29, 78, 216, 0.1) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(29, 78, 216, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            opacity: 0.2; 
            animation: floatGrid 30s linear infinite alternate;
            perspective: 1000px;
            transform-style: preserve-3d;
            will-change: transform; /* Teljesítmény optimalizálás */
        }

        .pricing-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer; 
        }
        .pricing-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
        }
        .pricing-card-pro:hover {
             transform: translateY(-10px) scale(1.05);
             box-shadow: 0 25px 35px -5px rgba(29, 78, 216, 0.5), 0 15px 15px -5px rgba(29, 78, 216, 0.25);
        }

        .modal {
            transition: opacity 0.3s ease-in-out, visibility 0.3s;
            visibility: hidden;
            opacity: 0;
        }
        .modal.open {
            visibility: visible;
            opacity: 1;
        }

        .input-error { border-color: #ef4444; }
        .input-success { border-color: #10b981; }
          @keyframes blob {
        0% { transform: translate(0px, 0px) scale(1); }
        33% { transform: translate(30px, -50px) scale(1.1); }
        66% { transform: translate(-20px, 20px) scale(0.9); }
        100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob {
        animation: blob 7s infinite;
    }
    .animation-delay-2000 {
        animation-delay: 2s;
    }
    .animation-delay-4000 {
        animation-delay: 4s;
    }
    
    @keyframes moveGrid {
    0% { transform: perspective(500px) rotateX(60deg) translateY(-100px) scale(2) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(-100px) scale(2) translateY(50px); }
}


    @keyframes gradient-x {
    0% { transform: translateX(0%); }
    50% { transform: translateX(-50%); } /* Vagy amennyire el kell tolni */
    100% { transform: translateX(0%); }
}
    .animate-gradient-x {
        background-size: 200% 200%;
        animation: gradient-x 3s ease infinite;
 }