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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-yacht-deep { background-color: #0B1B3D; }
    .bg-yacht-teal { background-color: #00A8CC; }
    
    .text-yacht-deep { color: #0B1B3D; }
    .text-yacht-teal { color: #00A8CC; }
    
    .border-yacht-teal { border-color: #00A8CC; }
    .border-yacht-deep { border-color: #0B1B3D; }
    
    .font-cinzel { font-family: 'Cinzel', serif; }
    .font-montserrat { font-family: 'Montserrat', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
    
    .btn-yacht {
        @apply inline-flex items-center justify-center bg-[#00A8CC] text-white font-montserrat uppercase tracking-[0.15em] text-xs py-4 px-10 hover:bg-[#0B1B3D] transition-all duration-500 shadow-[0_10px_30px_rgba(0,168,204,0.3)] hover:shadow-[0_10px_30px_rgba(11,27,61,0.3)];
    }
    
    .btn-yacht-outline {
        @apply inline-flex items-center justify-center border-2 border-white text-white font-montserrat uppercase tracking-[0.15em] text-xs py-4 px-10 hover:bg-white hover:text-[#0B1B3D] transition-all duration-500;
    }
    
    .nav-link {
        @apply text-white/80 hover:text-white font-montserrat text-xs uppercase tracking-[0.15em] transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-2 left-0 w-0 h-0.5 bg-[#00A8CC] transition-all duration-500;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-full;
    }
    
    .nav-link.active {
        @apply text-white;
    }
}

/* Glassmorphism utilities */
.glass {
    background: rgba(11, 27, 61, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-light {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}