body {
    font-family: 'Google Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Global Transition */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

/* Utility for hiding scrollbar */
.hide-scroll::-webkit-scrollbar {
    display: none;
}
.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hero Ambient Light Blobs */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    will-change: transform, border-radius;
}
.blob-hero-blue {
    width: 600px; height: 600px;
    background: #3743BA;
    opacity: 0.15; 
    top: -150px; left: -150px;
    animation: float-hero-1 20s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@media (max-width: 768px) {
    .blob-hero-blue {
        width: 300px; height: 300px;
        top: -50px; left: -50px;
        opacity: 0.1;
    }
}

.blob-hero-gold {
    width: 500px; height: 500px;
    background: #EFBF04;
    opacity: 0.20;
    top: 15%; right: -100px;
    animation: float-hero-2 18s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@media (max-width: 768px) {
    .blob-hero-gold {
        width: 250px; height: 250px;
        top: 20%; right: -50px;
        opacity: 0.15;
    }
}

.blob-hero-grey {
    width: 700px; height: 700px;
    background: #E7E7E7;
    opacity: 0.4;
    bottom: -250px; left: 15%;
    animation: float-hero-3 22s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    z-index: -1; 
}
@media (max-width: 768px) {
    .blob-hero-grey {
        width: 400px; height: 400px;
        bottom: -100px; left: 0%;
        opacity: 0.3;
    }
}

@keyframes float-hero-1 { 
    0% { transform: translate(0, 0) rotate(0deg); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 
    100% { transform: translate(60px, 60px) rotate(20deg); border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; } 
}
@keyframes float-hero-2 { 
    0% { transform: translate(0, 0) rotate(0deg); border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; } 
    100% { transform: translate(-40px, 60px) rotate(-20deg); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 
}
@keyframes float-hero-3 { 
    0% { transform: translate(0, 0) rotate(0deg); border-radius: 50% 50% 20% 80% / 25% 80% 20% 80%; } 
    100% { transform: translate(30px, -50px) rotate(15deg); border-radius: 80% 20% 80% 20% / 80% 20% 80% 20%; } 
}

/* Liquid Card Animations */
.liquid-card {
    background: #020617;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transform: translateZ(0); /* Hardware acceleration */
}
.liquid-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.8;
    z-index: 0;
    will-change: transform;
    animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.blob-1 { width: 300px; height: 300px; background: #7f1d1d; top: -50px; left: -50px; animation: float-1 12s infinite alternate; }
.blob-2 { width: 350px; height: 350px; background: #b45309; bottom: -50px; right: -50px; animation: float-2 15s infinite alternate; }
.blob-3 { width: 250px; height: 250px; background: #991b1b; top: 40%; left: 40%; opacity: 0.6; animation: float-3 10s infinite alternate; }
.interactive-blob {
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    top: -200px; left: -200px;
    transform: translate(var(--mouse-x, 0px), var(--mouse-y, 0px));
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
    transition: transform 0.2s cubic-bezier(0.03, 0.98, 0.52, 0.99);
}
@keyframes float-1 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 100% { transform: translate(40px, 50px) scale(1.15) rotate(10deg); } }
@keyframes float-2 { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 100% { transform: translate(-40px, -50px) scale(1.1) rotate(-10deg); } }
@keyframes float-3 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, -30px) scale(0.85); } }

@keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.animate-gradient-flow { background-size: 300% 300%; animation: gradient-flow 8s ease infinite; }

@keyframes gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.animate-gradient-x {
    background-size: 200% 200%;
    animation: gradient-x 4s ease infinite;
}