/* roulang page: index */
:root {
            --primary: #1A56DB;
            --primary-hover: #1340A8;
            --secondary: #0E9F6E;
            --accent: #7E3BF2;
            --text-title: #111827;
            --text-body: #374151;
            --text-muted: #6B7280;
            --bg-page: #F9FAFB;
            --bg-card: #FFFFFF;
            --border-color: #E5E7EB;
        }

        html {
            scroll-behavior: smooth;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        }

        body {
            background-color: var(--bg-page);
            color: var(--text-body);
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        .code-window {
            background: #0d1117;
            border: 1px solid #30363d;
            border-radius: 8px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

        .custom-card {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .custom-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(26, 86, 219, 0.08), 0 10px 10px -5px rgba(26, 86, 219, 0.04);
            border-color: rgba(26, 86, 219, 0.3);
        }

        .btn-primary {
            background-color: var(--primary);
            color: #ffffff;
            transition: all 0.2s ease-in-out;
        }
        .btn-primary:hover {
            background-color: var(--primary-hover);
            box-shadow: 0 4px 14px rgba(26, 86, 219, 0.35);
        }

        .glass-nav {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background-color: #0E9F6E;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.7);
            animation: pulse-green 2s infinite;
        }

        @keyframes pulse-green {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(14, 159, 110, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(14, 159, 110, 0); }
        }

        .bg-tech-pattern {
            background-image: radial-gradient(rgba(26, 86, 219, 0.08) 1px, transparent 1px);
            background-size: 24px 24px;
        }