body {
            box-sizing: border-box;
        }
        
        :root {
            --sea-blue: #0077B6;
            --teal-blue: #00B4D8;
            --coral-red: #FF6B6B;
            --soft-bg: linear-gradient(135deg, #F0F9FF 0%, #E0F7FA 100%);
            --charcoal: #333;
        }
        
        * {
            font-family: 'Lato', sans-serif;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
        }
        
        body {
            background: var(--soft-bg);
            overflow-x: hidden;
        }
        
        .wave-divider {
            position: relative;
            background: linear-gradient(45deg, var(--sea-blue), var(--teal-blue));
            height: 100px;
            overflow: hidden;
        }
        
        .wave-divider::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 C300,120 900,0 1200,60 L1200,120 L0,120 Z' fill='%23F0F9FF'/%3E%3C/svg%3E") repeat-x;
            animation: wave 10s linear infinite;
        }
        
        @keyframes wave {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        .pulse-alert {
            animation: pulse-glow 2s infinite;
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 5px var(--coral-red); }
            50% { box-shadow: 0 0 20px var(--coral-red), 0 0 30px var(--coral-red); }
        }
        
        .slide-up {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }
        
        .slide-up.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .hero-bg {
            background: linear-gradient(135deg, rgba(0,119,182,0.9) 0%, rgba(0,180,216,0.8) 100%),
                        url('https://images.stockcake.com/public/5/8/c/58c4ee3a-9087-4978-a5b3-60fc0a272e62_large/vibrant-marina-sunset-stockcake.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        
        .btn-gradient {
            background: linear-gradient(45deg, var(--teal-blue), var(--sea-blue));
            transition: all 0.3s ease;
        }
        
        .btn-gradient:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0,180,216,0.3);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-10px) rotate(1deg);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--teal-blue);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }
        
        .chatbot {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 2000;
        }
        
        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
        }
        
        @media (max-width: 768px) {
            .hero-bg {
                background-attachment: scroll;
            }
        }