/* ==========================================================================
   Base Styles & Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* { 
    font-family: 'Inter', sans-serif; 
}

html { 
    scroll-behavior: smooth; 
}

/* ==========================================================================
   Utility Classes & Custom Components
   ========================================================================== */
.gradient-text {
    background: linear-gradient(135deg, #2563eb 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.stat-card { 
    background: linear-gradient(135deg, rgba(37,99,235,0.03) 0%, rgba(249,115,22,0.03) 100%); 
}

.dark .stat-card { 
    background: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(249,115,22,0.1) 100%); 
}

/* Trust Logos */
.trust-logo { 
    filter: grayscale(100%) opacity(0.5); 
    transition: all 0.3s ease; 
}

.trust-logo:hover { 
    filter: grayscale(0%) opacity(1); 
}

.dark .trust-logo { 
    filter: brightness(0) invert(1) opacity(0.4); 
}

/* ==========================================================================
   Animations & Transitions
   ========================================================================== */
.fade-in { 
    animation: fadeIn 0.5s ease-in-out; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.bounce-subtle { 
    animation: bounce-subtle 2s infinite; 
}

@keyframes bounce-subtle { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-5px); } 
}

.pulse-ring::before { 
    content: ''; 
    position: absolute; 
    inset: -4px; 
    border-radius: 50%; 
    background: #22C55E; 
    animation: pulse-ring 1.5s infinite; 
}

@keyframes pulse-ring { 
    0% { transform: scale(0.8); opacity: 1; } 
    100% { transform: scale(1.4); opacity: 0; } 
}

/* ==========================================================================
   Interactive Elements
   ========================================================================== */
.play-overlay { 
    transition: all 0.3s ease; 
}

.play-overlay:hover { 
    transform: scale(1.1); 
}

.fab-menu { 
    transform: scale(0); 
    opacity: 0; 
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    transform-origin: bottom right; 
}

.fab-menu.active { 
    transform: scale(1); 
    opacity: 1; 
}

.bubble-tooltip { 
    animation: fadeIn 0.5s ease forwards; 
}

.counter-animate { 
    transition: all 0.3s ease; 
}

/* Slider (Hero) */
.slider-container { 
    overflow: hidden; 
}

.slider-track { 
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* Page Loader */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}
.dark .page-loader {
    background-color: #030712;
}
.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}
.loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    border-top-color: #3b82f6;
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}