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

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

/* ==================== Liquid Glass Effect - Core Aether Philosophy ==================== */
.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%) brightness(110%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.glass-card-light {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px) saturate(160%) brightness(105%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.1);
}

.glass-button {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-button:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* ==================== Fluid Physics-Based Animations ==================== */
@keyframes float {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-20px); 
    }
}

@keyframes glow {
    0%, 100% { 
        opacity: 0.5; 
    }
    50% { 
        opacity: 1; 
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-glow {
    animation: glow 3s ease-in-out infinite;
}

/* ==================== Gradient Mesh Background ==================== */
body {
    background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 25%, 
        #f093fb 50%, 
        #4facfe 75%, 
        #00f2fe 100%);
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
    min-height: 100vh;
}

@keyframes gradient-shift {
    0% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
    100% { 
        background-position: 0% 50%; 
    }
}

/* ==================== Smooth Scrolling ==================== */
html {
    scroll-behavior: smooth;
}

/* ==================== Feature Card Hover Effects (Lens Interaction) ==================== */
.feature-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.25), 
                inset 0 0 15px rgba(255, 255, 255, 0.15);
}

/* ==================== Icon Glow Effect ==================== */
.icon-glow {
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
}

/* ==================== Universal Rounded Corners - Only Two Sizes ==================== */
.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* ==================== Navigation Glass Effect ==================== */
nav {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==================== Section Spacing ==================== */
section {
    padding: 5rem 0;
}

/* ==================== Text Glow ==================== */
.text-glow {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* ==================== Responsive Adjustments ==================== */
@media (max-width: 768px) {
    section {
        padding: 3rem 0;
    }
    
    .glass-card, .glass-card-light {
        padding: 1.5rem;
    }
}

/* ==================== Focus States (Accessibility) ==================== */
input:focus, 
textarea:focus, 
button:focus, 
a:focus {
    outline: 2px solid rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
}

/* ==================== Custom Scrollbar ==================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 1rem;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}