/* Použitý framework: TailwindCSS */

body {
    @apply bg-gray-900 text-white font-sans;
}

.hero-section {
    @apply text-center py-16 bg-purple-700;
}

.hero-section h1 {
    @apply text-4xl font-bold;
}

.hero-section p {
    @apply text-lg mt-2;
}

.btn {
    @apply inline-block px-6 py-3 mt-4 text-lg font-semibold rounded-lg transition;
}

.btn-primary {
    @apply bg-purple-500 hover:bg-purple-600 text-white;
}

.btn-outline {
    @apply border border-purple-400 text-purple-400 hover:bg-purple-400 hover:text-white;
}

.features {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6 p-8;
}

.feature-card {
    @apply p-6 bg-gray-800 rounded-lg shadow-lg text-center transition-transform transform hover:scale-105;
}

.community-section {
    @apply py-12 text-center;
}

.testimonial-carousel {
    @apply flex flex-col items-center gap-4;
}

.testimonial {
    @apply bg-gray-800 p-6 rounded-lg shadow-md max-w-lg;
}

.faq-section {
    @apply py-12 px-6;
}

.faq {
    @apply border-b border-gray-700 py-4;
}

.cta-section {
    @apply text-center py-12 bg-purple-800;
}

.social-links {
    @apply flex justify-center gap-4 mt-4;
}

.social-links a {
    @apply text-purple-300 hover:text-white;
}