/* roulang page: index */
:root {
            --primary-deep: #0B192C;
            --cyber-cyan: #00E5FF;
            --kinetic-orange: #FF5722;
            --bg-light: #F8FAFC;
            --text-main: #1E293B;
            --text-muted: #64748B;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            background-color: var(--bg-light);
            color: var(--text-main);
            overflow-x: hidden;
            line-height: 1.75;
        }
        .hero-search-bg {
            background: linear-gradient(180deg, rgba(7, 15, 30, 0.88) 0%, rgba(11, 25, 44, 0.96) 100%), url('/assets/images/dee0d76037c5b469.jpg') center/cover no-repeat;
        }
        .deep-mesh {
            background-color: #070F1E;
            background-image: radial-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 1px);
            background-size: 24px 24px;
        }
        .card-custom {
            transition: all 0.25s ease-out;
            border: 1px solid rgba(226, 232, 240, 0.8);
        }
        .card-custom:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px -4px rgba(11, 25, 44, 0.08);
            border-color: rgba(0, 229, 255, 0.4);
        }
        .badge-cyan {
            background: rgba(0, 229, 255, 0.1);
            color: #00838F;
            border: 1px solid rgba(0, 229, 255, 0.3);
        }
        details > summary::-webkit-details-marker {
            display: none;
        }