:root {
    /* Colors */
    --color-primary: #ffd700; /* Gold */
    --color-secondary: #FF0077; /* Neon Pink */
    --color-background: #0a0a1a; /* Dark Blue-Black */
    --color-footer-bg: #050510; /* Even Darker Blue-Black */
    --color-button: #00FFFF; /* Cyan */
    --color-text-light: #e0e0e0;
    --color-text-dark: #333333;
    --color-glass-effect: rgba(255, 255, 255, 0.05); /* Very subtle white for glassmorphism */
    --color-glass-border: rgba(255, 255, 255, 0.1);

    /* Section Backgrounds - A blend of dark blues and purples */
    --section-bg-1: #1a0a2a; /* Dark Purple */
    --section-bg-2: #0f0f2f; /* Darker Blue */
    --section-bg-3: #12123d; /* Dark Blue-Purple */
    --section-bg-4: #0b0b2b; /* Dark Blue */
    --section-bg-5: #150525; /* Darker Purple */
    --section-bg-6: #08081c; /* Almost Black Blue */

    /* Fonts */
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;

    /* Spacing */
    --spacing-md: 1.5rem;
    --spacing-lg: 3rem;
    --spacing-xl: 6rem;

    /* Border Radii */
    --radius-sm: 8px; /* Minor elements */
    --radius-md: 16px; /* Cards */
    --radius-lg: 24px; /* Main containers */

    /* Shadows */
    --shadow-neon-primary: 0 0 15px var(--color-primary), 0 0 30px var(--color-primary), 0 0 45px var(--color-primary);
    --shadow-neon-secondary: 0 0 15px var(--color-secondary), 0 0 30px var(--color-secondary), 0 0 45px var(--color-secondary);
    --shadow-button-glow: 0 0 10px var(--color-button), 0 0 20px var(--color-button), 0 0 30px var(--color-button);

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-ease: ease-in-out;
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-background);
    color: var(--color-text-light);
    line-height: 1.7; /* Generous line-height for readability */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll from neon glows */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.05em; /* Slightly increased letter-spacing for futuristic feel */
    text-shadow: 0 0 5px var(--color-primary); /* Subtle glow for headings */
}

h1 {
    font-size: 3.5rem;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.2;
}

h2 {
    font-size: 2.8rem;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.3;
}

h3 {
    font-size: 2.2rem;
    text-transform: uppercase;
    line-height: 1.4;
}

p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-ease), text-shadow var(--transition-speed) var(--transition-ease);
}

a:hover {
    color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary);
}

/* Layout & Sections */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

section {
    padding: var(--spacing-xl) 0;
    position: relative;
    overflow: hidden;
}

/* Section Backgrounds - Utilizing the requested color palette */
.section-bg-1 { background-color: var(--section-bg-1); }
.section-bg-2 { background-color: var(--section-bg-2); }
.section-bg-3 { background-color: var(--section-bg-3); }
.section-bg-4 { background-color: var(--section-bg-4); }
.section-bg-5 { background-color: var(--section-bg-5); }
.section-bg-6 { background-color: var(--section-bg-6); }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 2.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: var(--color-background); /* Text color for buttons */
    background: linear-gradient(45deg, var(--color-button) 0%, rgba(0, 255, 255, 0.7) 100%); /* Cyan gradient */
    box-shadow: var(--shadow-button-glow);
    transition: all var(--transition-speed) var(--transition-ease);
    will-change: transform, box-shadow;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-md);
    padding: 2px; /* Border thickness */
    background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-button));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
    transition: opacity var(--transition-speed) var(--transition-ease);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px var(--color-button), 0 0 30px var(--color-button), 0 0 45px var(--color-button), 0 5px 15px rgba(0,0,0,0.3); /* Lifted appearance */
    background: linear-gradient(45deg, var(--color-button) 0%, rgba(0, 255, 255, 0.9) 100%);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-button-glow);
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.8) 0%, var(--color-button) 100%);
}

/* Cards & Elements with Glassmorphism */
.card {
    background-color: var(--color-glass-effect); /* Subtle transparent background */
    border: 1px solid var(--color-glass-border); /* Subtle border */
    border-radius: var(--radius-md);
    backdrop-filter: blur(10px); /* Glassmorphism blur */
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    padding: var(--spacing-md);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1), 0 0 20px rgba(255, 0, 119, 0.1); /* Soft glow from primary/secondary */
    transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2), 0 0 30px rgba(255, 0, 119, 0.2);
}

/* Footer */
footer {
    background-color: var(--color-footer-bg);
    color: var(--color-text-light);
    padding: var(--spacing-lg) 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Subtle separator */
}

/* Utility Classes for Neon Glows */
.text-neon-primary {
    color: var(--color-primary);
    text-shadow: var(--shadow-neon-primary);
}

.text-neon-secondary {
    color: var(--color-secondary);
    text-shadow: var(--shadow-neon-secondary);
}

/* Neon Pulse Animation for key elements */
@keyframes neon-pulse {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 5px var(--color-button));
    }
    50% {
        filter: brightness(1.2) drop-shadow(0 0 15px var(--color-button));
    }
}

.neon-pulse {
    animation: neon-pulse 2s infinite alternate;
}

/* Subtle background particles/stars */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(255, 215, 0, 0.02) 0%, transparent 20%),
                radial-gradient(circle at bottom right, rgba(255, 0, 119, 0.02) 0%, transparent 20%);
    pointer-events: none;
    z-index: -1;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    .btn {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    section {
        padding: var(--spacing-lg) 0;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .btn {
        width: 100%;
        font-size: 0.95rem;
    }
}


/* Cookie Banner Additional Styles for Tailwind */
.cookie-banner-hover-effect:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner-hover-effect:hover {
        transform: none;
    }
}