/* Tailwind-like Utility Classes & Custom CSS */
:root {
    --brand-teal: #2DD4BF;
    --brand-gold: #FACC15;
    --brand-blue: #3B82F6;
    --bg-dark: #0A0A0A;
    --bg-dark-lighter: #121212;
}

body {
    background-color: var(--bg-dark);
    margin: 0;
    overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark); 
}
::-webkit-scrollbar-thumb {
    background: #333; 
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-teal); 
}

/* Base utility replications (to supplement if not using full tailwind via CDN to avoid heavy loads, but I'll use a lightweight approach) */
/* Actually, wait. I didn't include Tailwind CDN in the HTML. Let's add standard styling that mimics the classes used, or include the CDN. 
Ah, I should just use Tailwind via CDN in the HTML for speed, or define everything here. 
Wait! I didn't include Tailwind script in the HTML. I'll need to inject Tailwind script in the HTML or write out all the CSS. 
It's much better to just add the Tailwind CDN to index.html and use this file for custom overrides. 
I will update the HTML file to include Tailwind via script tag, but for now, let's write the custom CSS that Tailwind can't do easily. */

.glass-nav {
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-nav.scrolled {
    background: rgba(10, 10, 10, 0.85);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(45, 212, 191, 0.1);
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.nav-link {
    font-family: 'Outfit', sans-serif;
    color: #d1d5db;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--brand-teal);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.nav-link:hover {
    color: #ffffff;
}

.nav-link:hover::after {
    width: 100%;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-teal), #0d9488);
    color: #0A0A0A;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #0d9488, var(--brand-teal));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(45, 212, 191, 0.4);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary .btn-icon {
    transition: transform 0.3s ease;
}

.btn-primary:hover .btn-icon {
    transform: translateX(4px);
}

.hero-img-zoom {
    animation: slowZoom 20s ease-out infinite alternate;
}

@keyframes slowZoom {
    0% { transform: scale(1.05); }
    100% { transform: scale(1.15); }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

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

/* Animations for Reveal on Scroll */
.slide-up-element {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal-element {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-element.active {
    opacity: 1;
    transform: translateY(0);
}