/* Base & Typography */
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #FFFFFF;
            color: #000000;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* SPA Routing System */
        .page-view {
            display: none;
            opacity: 0;
            animation: fadeInPage 0.5s ease-out forwards;
        }
        .page-view.active {
            display: block;
        }
        @keyframes fadeInPage {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* Header Styles & Scroll Effect */
        #main-header {
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        #main-header.scrolled {
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        /* Circular Menu & Dropdowns */
        .circular-menu {
            background: #ffffff;
            border-radius: 999px;
            padding: 0.5rem 2rem;
            border: 1px solid #eaeaea;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        }
        .nav-item { position: relative; }
        .dropdown-menu {
            visibility: hidden;
            opacity: 0;
            transform: translateY(15px);
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(15px);
            background: #FFFFFF;
            border: 1px solid #f0f0f0;
            border-radius: 1.5rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            min-width: 260px;
            padding: 1rem;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 100;
        }
        .nav-item:hover .dropdown-menu {
            visibility: visible;
            opacity: 1;
            transform: translateX(-50%) translateY(10px);
        }
        .dropdown-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            border-radius: 12px;
            transition: all 0.2s;
            color: #000000;
        }
        .dropdown-link:hover {
            background: linear-gradient(90deg, #FFFFFF 0%, rgba(182, 245, 0, 0.3) 100%);
            transform: translateX(5px);
        }

        /* Hero Animations & Geometric Shapes */
        .hero-bg-shape {
            position: absolute;
            border-radius: 1000%;
            background: linear-gradient(135deg, rgba(182, 245, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
            z-index: 0;
            filter: blur(40px);
            animation: pulseFloat 12s infinite alternate ease-in-out;
        }
        @keyframes pulseFloat {
            0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
            50% { transform: translate(50px, -30px) scale(1.1); opacity: 0.8; }
            100% { transform: translate(-20px, 40px) scale(0.95); opacity: 0.5; }
        }
        
        /* Floating Left Logo */
        .floating-logo {
            animation: bobbing 4s infinite ease-in-out;
        }
        @keyframes bobbing {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* Text Animations */
        .anim-fade-left { animation: slideInLeft 0.8s ease-out forwards; }
        .anim-fade-right { animation: slideInRight 0.8s ease-out forwards; opacity: 0; animation-delay: 0.2s; }
        .anim-pop { animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; animation-delay: 0.4s; }
        
        @keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

        /* Component Hover Effects */
        .card-hover { transition: all 0.3s ease; }
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(182, 245, 0, 0.2);
            border-color: #B6F500;
        }

        .usecase-box { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
        .usecase-box:hover {
            transform: translateY(-10px) scale(1.02);
            background-color: #B6F500;
            color: #FFFFFF;
            box-shadow: 0 20px 40px rgba(182, 245, 0, 0.3);
        }
        .usecase-box:hover * { color: #FFFFFF !important; transition: color 0.3s ease; }

        .price-card { transition: all 0.4s ease; }
        .price-card:hover {
            transform: scale(1.03);
            box-shadow: 0 25px 50px rgba(0,0,0,0.1);
            border-color: #B6F500;
        }

        /* Gradients & Mixes */
        .mix-fade-bottom { background: linear-gradient(180deg, #FFFFFF 0%, rgba(182, 245, 0, 0.1) 100%); }
        .mix-fade-top { background: linear-gradient(0deg, #FFFFFF 0%, rgba(182, 245, 0, 0.1) 100%); }

        /* Carousel */
        .carousel-item { transition: opacity 0.8s ease-in-out; }
                .grid-connectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 0.75rem; }
        .connector-badge { background: white; border: 1px solid #eaeaea; border-radius: 100px; padding: 0.6rem 1rem; font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: 0.1s; }
        .connector-badge:hover { border-color: #ffe867; background: #fff9df; }

                .shadow-lift { box-shadow: 0 20px 35px -10px rgba(0,0,0,0.1); }

        /* animations (text + fade) */
        .anim-fade-up { animation: fadeUp 0.8s cubic-bezier(0.15, 0.9, 0.25, 1) forwards; opacity: 0; }
        .anim-fade-left { animation: fadeLeft 0.8s ease-out forwards; opacity: 0; }
        .anim-fade-right { animation: fadeRight 0.8s ease-out forwards; opacity: 0; }
        .anim-pop { animation: pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards; opacity: 0; }
        .anim-delay-1 { animation-delay: 0.15s; }
        .anim-delay-2 { animation-delay: 0.3s; }
        .anim-delay-3 { animation-delay: 0.45s; }
        .anim-delay-4 { animation-delay: 0.6s; }

        @keyframes fadeUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
        @keyframes fadeLeft { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } }
        @keyframes fadeRight { 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } }
        @keyframes pop { 0% { opacity: 0; transform: scale(0.92); } 100% { opacity: 1; transform: scale(1); } }

        .feature-card { transition: all 0.2s; }
        .feature-card:hover { transform: translateY(-6px); border-color: #ffe867; background: #fefcf0; }

        @keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-fade-up {
  animation: fadeUp 1s ease forwards;
}

.animate-fade-in {
  animation: fadeIn 1.2s ease forwards;
}

.animate-slide-in {
  animation: slideIn 1s ease forwards;
}

.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
        .route-btn { cursor: pointer; }