/* Hide scrollbar */
::-webkit-scrollbar {
    display: none;
}

/* Test animation to verify CSS is working */
@keyframes test-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.test-animation {
    animation: test-pulse 2s ease-in-out infinite;
}

/* Simple test animation for floating circles */
@keyframes simple-float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-30px); }
    100% { transform: translateY(0px); }
}

/* Debug: Make floating circles very visible */
.floating-circle {
    border: 3px solid red !important;
    background-color: yellow !important;
    z-index: 9999 !important;
    animation: simple-float 2s ease-in-out infinite !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    border-radius: 50% !important;
}

/* Global typography */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Visual utility classes matching design */
.gold-gradient { background: linear-gradient(135deg, #FFD700, #FFA500, #FF8C00); }
.gold-text {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-gradient { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%); }
.card-gradient { background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(15, 15, 15, 0.9) 100%); }
.gold-glow { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }

/* Accordion */
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.accordion-content.active { max-height: 200px; }

/* Floating animation with respects to prefers-reduced-motion */
.absolute.floating-circle,
div.floating-circle,
.floating-circle {
    animation: float 6s ease-in-out infinite !important;
    will-change: transform !important;
}
@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateZ(0);
    }
    50% {
        transform: translateY(-20px) translateZ(0);
    }
}

/* Floating circles will use inline styles for delays and durations */
/* Override any Tailwind animation styles */
.absolute.rounded-full.floating-circle,
div.rounded-full.floating-circle {
    animation: float 6s ease-in-out infinite !important;
    will-change: transform !important;
}

/* Fallback styles in case Tailwind doesn't load */
.floating-circle {
    position: absolute !important;
    background-color: #FFD700 !important;
    border-radius: 50% !important;
    animation: float 6s ease-in-out infinite !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.1 !important;
    will-change: transform !important;
}

/* Hero section floating circles */
#hero .floating-circle:nth-of-type(1) {
    top: 5rem !important;
    left: 5rem !important;
    width: 8rem !important;
    height: 8rem !important;
    opacity: 0.1 !important;
}

#hero .floating-circle:nth-of-type(2) {
    top: 10rem !important;
    right: 8rem !important;
    width: 6rem !important;
    height: 6rem !important;
    opacity: 0.15 !important;
}

#hero .floating-circle:nth-of-type(3) {
    bottom: 8rem !important;
    left: 33.333333% !important;
    width: 10rem !important;
    height: 10rem !important;
    opacity: 0.08 !important;
}

/* CTA section floating circles */
#cta .floating-circle:nth-of-type(1) {
    top: 2.5rem !important;
    right: 5rem !important;
    width: 7rem !important;
    height: 7rem !important;
    opacity: 0.1 !important;
}

#cta .floating-circle:nth-of-type(2) {
    bottom: 5rem !important;
    left: 5rem !important;
    width: 9rem !important;
    height: 9rem !important;
    opacity: 0.08 !important;
}

/* Force all floating circles to be visible and animated */
div.floating-circle,
.absolute.floating-circle,
.rounded-full.floating-circle {
    display: block !important;
    visibility: visible !important;
    animation: float 6s ease-in-out infinite !important;
    background-color: #FFD700 !important;
    border-radius: 50% !important;
    position: absolute !important;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .floating-circle {
        animation: none !important;
        transform: none !important;
    }
}

/* Floating circles - force visibility and animation */
.floating-circle,
div.floating-circle,
.absolute.floating-circle,
.rounded-full.floating-circle {
    background-color: yellow !important;
    animation: float 6s ease-in-out infinite !important;
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    border-radius: 50% !important;
    border: 3px solid red !important;
    z-index: 9999 !important;
    will-change: transform !important;
}

/* Ensure floating circles are above other content */
#hero .floating-circle,
#cta .floating-circle {
    z-index: 1 !important;
}

/* Force visibility and animation for all floating circles */
div[class*="floating-circle"],
.absolute[class*="floating-circle"],
.rounded-full[class*="floating-circle"] {
    display: block !important;
    visibility: visible !important;
    animation: float 6s ease-in-out infinite !important;
    background-color: yellow !important;
    border-radius: 50% !important;
    position: absolute !important;
    border: 3px solid red !important;
    z-index: 9999 !important;
    will-change: transform !important;
}

/* Specific selectors for floating circles */
div.absolute.top-20.left-20.w-32.h-32.bg-gold.opacity-10.rounded-full.floating-circle,
div.absolute.top-40.right-32.w-24.h-24.bg-gold.opacity-15.rounded-full.floating-circle,
div.absolute.bottom-32.left-1\/3.w-40.h-40.bg-gold.opacity-8.rounded-full.floating-circle,
div.absolute.top-10.right-20.w-28.h-28.bg-gold.opacity-10.rounded-full.floating-circle,
div.absolute.bottom-20.left-20.w-36.h-36.bg-gold.opacity-8.rounded-full.floating-circle {
    animation: float 6s ease-in-out infinite !important;
    background-color: #FFD700 !important;
    display: block !important;
    visibility: visible !important;
    will-change: transform !important;
}

/* Accessibility: focus styles */
:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
}

/* Screen-reader only utility (compatible with Tailwind's sr-only) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* Additional visual enhancements */
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.hover\:shadow-gold\/40:hover { box-shadow: 0 20px 25px -5px rgba(255, 215, 0, 0.4), 0 10px 10px -5px rgba(255, 215, 0, 0.1); }

/* Smooth transitions for interactive elements */
.transition-all { transition: all 0.3s ease; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }

/* Backdrop blur support */
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Custom focus styles for better accessibility */
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.4); }
.focus\:ring-gold\/40:focus { box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.4); }
.focus\:border-gold:focus { border-color: #FFD700; }

/* Enhanced button hover effects */
button:hover, .btn:hover { transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0); }

/* Improved text rendering */
.gold-text {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback for browsers that don't support background-clip */
}

/* Additional utility classes for better visual effects */
.transform { transform: translateZ(0); } /* Hardware acceleration */
.hover\:scale-105:hover { transform: scale(1.05) translateZ(0); }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.hover\:shadow-gold\/30:hover { box-shadow: 0 10px 15px -3px rgba(255, 215, 0, 0.3), 0 4px 6px -2px rgba(255, 215, 0, 0.1); }

/* Enhanced gradient effects */
.gold-gradient {
    background: linear-gradient(135deg, #FFD700, #FFA500, #FF8C00);
    position: relative;
    overflow: hidden;
}

.gold-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.gold-gradient:hover::before {
    left: 100%;
}

/* Improved card hover effects */
.card-gradient {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(15, 15, 15, 0.9) 100%);
    transition: all 0.3s ease;
}

.card-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Enhanced gold glow effect */
.gold-glow {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    transition: box-shadow 0.3s ease;
}

.gold-glow:hover {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

/* Additional responsive and accessibility improvements */
@media (max-width: 768px) {
    .floating-circle {
        animation-duration: 8s; /* Slower on mobile for better performance */
    }
}

/* Improved form styling */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #FFD700;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2);
}

/* Better button styling */
button, .btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

button:before, .btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

button:hover:before, .btn:hover:before {
    left: 100%;
}

/* Enhanced hero section styling */
.hero-gradient {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
    position: relative;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 165, 0, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Improved accordion animation */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-content.active {
    max-height: 500px; /* Increased for better content display */
}

/* Better text selection */
::selection {
    background: rgba(255, 215, 0, 0.3);
    color: #fff;
}

::-moz-selection {
    background: rgba(255, 215, 0, 0.3);
    color: #fff;
}

/* Performance optimizations */
* {
    box-sizing: border-box;
}

.floating-circle, .gold-gradient, .card-gradient {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better loading performance */
img {
    loading: lazy;
}

/* Improved contrast for better accessibility */
@media (prefers-contrast: high) {
    .gold-text {
        color: #FFD700 !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        -webkit-text-fill-color: unset !important;
    }
}