/* roulang page: index */
:root {
            --primary-navy: #0F2942;
            --primary-dark: #0B192C;
            --accent-gold: #C5A059;
            --accent-coral: #F26440;
            --text-main: #0F172A;
            --text-body: #334155;
            --text-muted: #64748B;
            --bg-light: #F8FAFC;
            --bg-card: #FFFFFF;
            --border-color: #E2E8F0;
            --shadow-card: 0 4px 20px -2px rgba(15, 41, 66, 0.05);
            --shadow-hover: 0 12px 28px -4px rgba(15, 41, 66, 0.12);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            color: var(--text-body);
            background-color: #ffffff;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            line-height: 1.65;
        }

        .custom-container {
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }
        @media (min-width: 640px) { .custom-container { padding-left: 1.5rem; padding-right: 1.5rem; } }
        @media (min-width: 1024px) { .custom-container { padding-left: 2rem; padding-right: 2rem; } }

        .edu-card {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: var(--shadow-card);
            transition: all 0.25s ease-in-out;
        }
        .edu-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
            border-color: #CBD5E1;
        }

        .edu-btn-primary {
            background-color: var(--primary-navy);
            color: #ffffff;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .edu-btn-primary:hover {
            background-color: #1a3c5e;
            box-shadow: 0 4px 12px rgba(15, 41, 66, 0.25);
        }

        .edu-btn-gold {
            background-color: var(--accent-gold);
            color: #ffffff;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .edu-btn-gold:hover {
            background-color: #b08d46;
            box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
        }

        .badge-tag {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 6px;
            font-size: 0.8125rem;
            font-weight: 600;
            background-color: rgba(197, 160, 89, 0.12);
            color: #8c6e30;
            border: 1px solid rgba(197, 160, 89, 0.25);
        }

        .hero-pattern {
            background-image: linear-gradient(135deg, rgba(15, 41, 66, 0.94) 0%, rgba(11, 25, 44, 0.98) 100%), url('/assets/images/7ea15e7708023061.webp');
            background-size: cover;
            background-position: center;
        }

        .dark-showcase-bg {
            background-image: linear-gradient(180deg, rgba(11, 25, 44, 0.98) 0%, rgba(15, 41, 66, 0.95) 100%), url('/assets/images/822179cf70ef3dc8.webp');
            background-size: cover;
            background-position: center;
        }

        .timeline-line::before {
            content: '';
            position: absolute;
            top: 24px;
            bottom: 24px;
            left: 20px;
            width: 2px;
            background: #E2E8F0;
        }
        @media (min-width: 1024px) {
            .timeline-line::before {
                top: 24px;
                bottom: auto;
                left: 0;
                right: 0;
                width: 100%;
                height: 2px;
            }
        }