:root {
            --primary: #0284c7; --primary-light: #38bdf8; --accent: #f43f5e; --glass: rgba(255, 255, 255, 0.7);
        }
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
            color: #0f172a; overflow: hidden; height: 100vh; width: 100vw;
        }
        .glass-panel { 
            background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 10px 40px rgba(2, 132, 199, 0.1);
        }
        .logo-container { position: relative; width: 150px; margin: 0 auto; z-index: 10; overflow: visible; }
        .logo-landing { width: 200px; }
        .logo-img {
            width: 100%; display: block; mix-blend-mode: multiply; 
            animation: logoSway 4s infinite ease-in-out;
            filter: drop-shadow(0 5px 10px rgba(2, 132, 199, 0.3));
        }
        @keyframes logoSway { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-3px); } }
        .bg-slider-container { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
        .bg-slide {
            position: absolute; inset: 0; width: 100%; height: 100%;
            background-size: cover; background-position: center;
            opacity: 0; transition: opacity 1s ease-in-out; object-fit: cover;
        }
        .bg-slide.active { opacity: 0.5; }
        .nav-item { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-radius: 16px; }
        @media (min-width: 768px) {
            .nav-item.active { background: white; color: var(--primary); transform: scale(1.05) translateX(10px); box-shadow: 0 10px 20px rgba(2, 132, 199, 0.15); border-left: 4px solid var(--primary); }
            .nav-item:hover:not(.active) { transform: translateX(5px); background: rgba(255,255,255,0.6); }
        }
        @media (max-width: 767px) {
            .nav-item { flex-direction: column; font-size: 0.65rem; padding: 0.5rem; }
            .nav-item.active { transform: translateY(-20px) scale(1.1); background: white; border-radius: 50%; width: 60px; height: 60px; justify-content: center; }
            .nav-item.active span { display: none; }
        }
        .service-card { transition: all 0.3s ease; cursor: pointer; position: relative; }
        .service-card.selected { background: #e0f2fe; border-color: var(--primary); transform: scale(0.95); box-shadow: inset 0 0 10px rgba(2,132,199,0.2); }
        .service-card.selected::after {
            content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
            position: absolute; top: 10px; right: 10px; color: var(--primary); font-size: 1.2rem;
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
        .tab-content { display: none; animation: slideUp 0.4s ease forwards; }
        .tab-content.active { display: block; }
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .card-3d { transition: all 0.3s ease; background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6)); border: 1px solid rgba(255,255,255,0.9); }
        .card-3d:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(2, 132, 199, 0.15); border-color: var(--primary-light); }
        #success-modal {
            display: none; position: fixed; inset: 0; z-index: 1000;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
            align-items: center; justify-content: center;
        }
        .modal-content {
            background: white; padding: 3rem; border-radius: 40px; text-align: center;
            animation: modalPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        @keyframes modalPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }