/* roulang page: index */
:root {
            --primary: #0F52BA;
            --primary-hover: #1E40AF;
            --accent: #0D9488;
            --accent-green: #10B981;
            --danger: #EF4444;
            --bg-base: #F8FAFC;
            --bg-alt: #F1F5F9;
            --text-main: #0F172A;
            --text-body: #334155;
            --text-muted: #64748B;
            --border: #E2E8F0;
            --radius-md: 8px;
            --radius-xl: 14px;
            --radius-2xl: 20px;
            --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            --shadow-hover: 0 16px 28px -6px rgba(15, 82, 186, 0.12), 0 8px 10px -4px rgba(0, 0, 0, 0.04);
        }

        body {
            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: var(--text-body);
            background-color: var(--bg-base);
            line-height: 1.75;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .hero-banner-bg {
            background-image: linear-gradient(135deg, rgba(11, 15, 25, 0.94) 0%, rgba(15, 82, 186, 0.88) 100%), url('/assets/images/fbaf394802b1ebfa.webp');
            background-size: cover;
            background-position: center;
        }

        .dark-arch-bg {
            background-image: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(11, 15, 25, 0.99) 100%), url('/assets/images/14bf6fbf578cc59c.webp');
            background-size: cover;
            background-position: center;
        }

        .bottom-cta-bg {
            background-image: linear-gradient(135deg, rgba(15, 82, 186, 0.95) 0%, rgba(13, 148, 136, 0.9) 100%), url('/assets/images/0fbc934172ea4177.webp');
            background-size: cover;
            background-position: center;
        }

        .transition-card {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .transition-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .countdown-ring {
            background: radial-gradient(circle closest-side, #1E293B 78%, transparent 80% 100%), conic-gradient(#10B981 82%, #334155 0);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-out;
        }

        .accordion-open .accordion-content {
            max-height: 280px;
        }

        .accordion-open .accordion-icon {
            transform: rotate(180deg);
        }