:root {
            --color-primary: #120907;
            --color-secondary: #121f35;
            --color-accent: #124d7d;
            --color-highlight: #1f89cc;
            --color-light: #20bcd8;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        }

        .font-display {
            font-family: 'Playfair Display', serif;
        }

        .text-primary { color: var(--color-primary); }
        .text-secondary { color: var(--color-secondary); }
        .text-accent { color: var(--color-accent); }
        .text-highlight { color: var(--color-highlight); }
        .text-light { color: var(--color-light); }

        .bg-primary { background-color: var(--color-primary); }
        .bg-secondary { background-color: var(--color-secondary); }
        .bg-accent { background-color: var(--color-accent); }
        .bg-highlight { background-color: var(--color-highlight); }
        .bg-light { background-color: var(--color-light); }

        .gradient-bg {
            background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 50%, var(--color-highlight) 100%);
        }

        .card-shadow {
            box-shadow: 0 20px 40px rgba(18, 9, 7, 0.1);
        }

        .hero-pattern {
            background-image: radial-gradient(circle at 25% 25%, rgba(32, 188, 216, 0.1) 0%, transparent 50%),
                              radial-gradient(circle at 75% 75%, rgba(31, 137, 204, 0.1) 0%, transparent 50%);
        }

        .section-divider {
            position: relative;
        }
        
        .section-divider::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--color-light), var(--color-highlight));
            border-radius: 2px;
        }

        .mobile-menu {
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
        }

        .mobile-menu.open {
            transform: translateX(0);
        }

        .parallax-element {
            transform: translateZ(0);
            transition: transform 0.1s linear;
        }

        .hover-lift {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hover-lift:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(18, 9, 7, 0.15);
        }

        .pattern-dots {
            background-image: radial-gradient(circle, var(--color-light) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.1;
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
        }