/* roulang page: index */
:root {
            --bg-color: #0A0F0D;
            --bg-sub: #121A16;
            --border-color: #1D2B24;
            --accent-green: #00E676;
            --accent-blue: #00B0FF;
            --accent-orange: #FF9100;
            --text-main: #F1F5F3;
            --text-sub: #9EABA4;
            --text-dim: #63736B;
            --container-width: 1240px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.6; }
        
        .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
        
        /* Header */
        header { border-bottom: 1px solid var(--border-color); background: rgba(10, 15, 13, 0.95); position: sticky; top: 0; z-index: 1000; }
        .status-bar { padding: 8px 20px; font-size: 12px; background: #000; color: var(--text-dim); display: flex; justify-content: space-between; border-bottom: 1px solid var(--border-color); }
        .nav-bar { padding: 15px 0; display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 20px; font-weight: 700; color: var(--accent-green); text-decoration: none; }
        .nav-links a { color: var(--text-sub); text-decoration: none; margin-left: 25px; font-size: 14px; transition: 0.3s; }
        .nav-links a:hover { color: var(--accent-green); }
        .cta-btn { background: var(--accent-green); color: #000; padding: 8px 20px; border-radius: 4px; font-weight: 600; text-decoration: none; font-size: 14px; }

        /* Section Base */
        section { padding: 80px 0; }
        .section-header { text-align: center; margin-bottom: 50px; }
        .section-header h2 { font-size: 32px; margin-bottom: 15px; }
        .section-header p { color: var(--text-sub); max-width: 600px; margin: 0 auto; }

        /* Hero */
        .hero { padding: 100px 0; background: linear-gradient(rgba(10, 15, 13, 0.8), rgba(10, 15, 13, 0.9)), url('/assets/images/backpic/back-1.jpg'); background-size: cover; text-align: center; }
        .hero h1 { font-size: 48px; margin-bottom: 20px; }
        .hero .cta-group { margin-top: 30px; display: flex; gap: 15px; justify-content: center; }
        .btn-outline { border: 1px solid var(--accent-green); color: var(--accent-green); padding: 12px 30px; border-radius: 4px; text-decoration: none; }

        /* Grids & Cards */
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .card { background: var(--bg-sub); padding: 30px; border: 1px solid var(--border-color); border-radius: 8px; transition: 0.3s; }
        .card:hover { border-color: var(--accent-green); transform: translateY(-5px); }
        .card h3 { margin-bottom: 15px; color: var(--text-main); }
        .card p { color: var(--text-sub); font-size: 14px; }

        /* Specific Components */
        .stat-bar { background: var(--bg-sub); border: 1px solid var(--border-color); padding: 40px; display: flex; justify-content: space-around; text-align: center; }
        .stat-item .num { font-family: monospace; font-size: 36px; color: var(--accent-green); display: block; }
        
        footer { background: #000; padding: 60px 0 30px; border-top: 1px solid var(--border-color); color: var(--text-dim); font-size: 13px; }
        
        @media (max-width: 768px) {
            .grid-3 { grid-template-columns: 1fr; }
            .hero h1 { font-size: 32px; }
        }