@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600;700&display=swap');

:root {
    --primary: #003366;
    --primary-light: #004d99;
    --accent: #FF7F50;
    --accent-dark: #E66A3D;
    --bg-sand: #F9F9F9;
    --text-main: #1A1A1A;
    --glass: rgba(255, 255, 255, 0.7);
    --glass-dark: rgba(0, 51, 102, 0.85);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-sand);
    color: var(--text-main);
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Playfair Display', serif;
}

/* Custom Utilities */
.glass {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background: var(--glass-dark);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Kinetic Animations */
@keyframes waveFlow {
    0% { transform: translateY(0) scale(1.02); }
    50% { transform: translateY(-10px) scale(1); }
    100% { transform: translateY(0) scale(1.02); }
}

.animate-wave {
    animation: waveFlow 8s ease-in-out infinite;
}

@keyframes floatBubble {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(5px, -15px); }
    50% { transform: translate(-5px, -5px); }
    75% { transform: translate(10px, -10px); }
}

.float-slow {
    animation: floatBubble 12s ease-in-out infinite;
}

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

/* Custom Wave Mask for Hero */
.hero-mask {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 85%);
}

@media (min-width: 1024px) {
    .hero-mask {
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* Gradient Mesh Background */
.mesh-bg {
    background-color: #003366;
    background-image: 
        radial-gradient(at 0% 0%, hsla(210,100%,20%,1) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(15,100%,65%,0.3) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(210,100%,30%,1) 0, transparent 50%);
}

/* Card Transitions */
.card-hover {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-hover:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}