/* roulang page: index */
:root {
            --color-primary: #1E40AF;
            --color-primary-hover: #1D4ED8;
            --color-accent: #0D9488;
            --color-dark: #0F172A;
            --color-bg-alt: #F8FAFC;
            --color-border: #E2E8F0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            color: #1E293B;
            background-color: #FFFFFF;
            overflow-x: hidden;
        }

        .hero-mesh-bg {
            background-color: #FFFFFF;
            background-image: radial-gradient(#E2E8F0 1px, transparent 1px), radial-gradient(#F1F5F9 1px, #FFFFFF 1px);
            background-size: 40px 40px;
            background-position: 0 0, 20px 20px;
        }

        .custom-card {
            transition: all 0.28s ease-in-out;
            border: 1px solid #E2E8F0;
        }

        .custom-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(30, 64, 175, 0.12);
            border-color: #93C5FD;
        }

        .nav-blur {
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            background-color: rgba(255, 255, 255, 0.95);
        }

        .tech-step-arrow::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -16px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-left: 10px solid #38BDF8;
        }

        @media (max-width: 1023px) {
            .tech-step-arrow::after {
                display: none;
            }
        }