/* roulang page: index */
:root {
            --primary: #0F172A;
            --brand-blue: #0284C7;
            --accent-orange: #F97316;
            --accent-green: #10B981;
            --bg-surface: #F8FAFC;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
            color: #1E293B;
            background-color: #FFFFFF;
        }
        .text-balance {
            text-wrap: balance;
        }
        .hero-pattern {
            background-color: #0F172A;
            background-image: radial-gradient(rgba(2, 132, 199, 0.25) 1px, transparent 1px);
            background-size: 24px 24px;
        }
        details summary::-webkit-details-marker {
            display: none;
        }
        .pulse-beacon {
            position: relative;
        }
        .pulse-beacon::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #10B981;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: pulse-ring 2s infinite cubic-bezier(0.45, 0, 0.2, 1);
        }
        @keyframes pulse-ring {
            0% {
                transform: translateY(-50%) scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }
            70% {
                transform: translateY(-50%) scale(1);
                box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
            }
            100% {
                transform: translateY(-50%) scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }