/* roulang page: index */
:root {
            --primary: #008B7A;
            --primary-hover: #007365;
            --accent: #10B981;
            --dark-slate: #0F172A;
            --light-bg: #F8FAFC;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: var(--light-bg);
            color: #334155;
            overflow-x: hidden;
        }
        .hero-mesh {
            background-image: radial-gradient(rgba(0, 139, 122, 0.12) 1px, transparent 1px), radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
            background-size: 28px 28px;
            background-position: 0 0, 14px 14px;
        }
        .glass-panel {
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .dark-glass {
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .pulse-beacon {
            position: relative;
        }
        .pulse-beacon::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #10B981;
            opacity: 0.75;
            animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }
        @keyframes pulse-ring {
            0% { transform: scale(0.95); opacity: 0.8; }
            50% { transform: scale(1.6); opacity: 0; }
            100% { transform: scale(0.95); opacity: 0; }
        }
        .accordion-content {
            transition: max-height 0.35s ease-out, opacity 0.3s ease;
        }
        .badge-glow {
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
        }