/* --- Global Typography & Branding --- */
body { 
    font-family: 'Inter', sans-serif; 
}

.logo-gradient {
    background: linear-gradient(90deg, #2DD4BF 0%, #581C87 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-gradient {
    background: linear-gradient(90deg, #2DD4BF 0%, #581C87 100%);
}

header {
    z-index: 100;
}

/* --- Hero Section Styles --- */
.hero-full {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-start; 
    /* 1. Mobile First: Load a smaller/optimized version by default */
    background-image: url('assets/img/ui/hero-full.webp'); 
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
    /* 2. Set a solid background color to improve LCP speed */
    background-color: #ffffff; 
}

/* 3. Load the high-res desktop version only for larger screens */
@media (min-width: 1024px) {
    .hero-full {
        background-image: url('assets/img/ui/hero-full.webp');
    }
}

.hero-full::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
}

/* --- Mobile Menu & UI Fixes --- */
#mobile-menu {
    z-index: 90;
    background-image: radial-gradient(circle at top right, rgba(45, 212, 191, 0.1), white);
    visibility: hidden; 
    transition: transform 0.5s ease-in-out, visibility 0.5s;
}

#mobile-menu:not(.translate-x-full) {
    visibility: visible;
}

#menu-btn { 
    z-index: 110;
    position: relative;
    cursor: pointer;
}

.overflow-hidden { 
    overflow: hidden; 
    height: 100vh; 
}

#hamburger span {
    transition: all 0.3s ease-in-out;
}

/* Hero Blob Animations */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob { 
    animation: blob 7s infinite; 
}

.animation-delay-2000 { 
    animation-delay: 2s; 
}