/* Custom Tailwind Configuration - INHERITED FROM SECOND PAGE */
:root {
    --brand-primary: #3B82F6; /* Vibrant Blue */
    --brand-dark: #2563EB; /* Darker Blue */
    --background-dark: #172554; /* Dark Blue for background (Used by body) */
    --card-bg: #1E3A8A; /* Slightly lighter dark blue for cards (Used for backgrounds) */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-dark); /* Dark Blue Background */
}

/* Hero image background styling (Optional: subtle pattern from second page) */
.hero-bg {
    background-image: linear-gradient(to bottom, rgba(23, 37, 84, 0.8) 0%, rgba(23, 37, 84, 1) 100%), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1"><circle cx="50" cy="50" r="1" fill="%233B82F6"/></svg>');
    background-size: cover, 100px 100px;
}

/* Card Hover Effect (Adjusted to match the subtle glow/lift of the first page content, but with the new color scheme) */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, box-shadow;
    background-color: var(--card-bg);
    border-top: 4px solid;
    border-color: var(--brand-primary); /* Default card accent line */
}

.card:hover {
    transform: translateY(-8px);
    /* Blue glow based on second page's brand color */
    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.3), 0 10px 10px -5px rgba(59, 130, 246, 0.1);
}

/* Pro card special styling */
.pro-glow {
    border-top: 4px solid #F97316; /* Orange border line */
    background-color: var(--card-bg);
}

.pro-glow:hover {
    transform: translateY(-8px);
    /* Orange glow for Pro card */
    box-shadow: 0 20px 25px -5px rgba(249, 115, 22, 0.4), 0 10px 10px -5px rgba(249, 115, 22, 0.2);
}

/* Utility classes from original code (kept for script functionality) */
.grid-container.cols-3 .hidden-section {
    display: none;
}
.grid-container.cols-3 .card:not(.hidden-section) {
    flex: 1 1 0%;
    max-width: none;
}
.grid-container.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-container.cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.section-hidden {
    display: none;
}

/* Animation classes (retained from original code) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-fadeInUp {
    opacity: 1;
    transform: translateY(0);
}