/* roulang page: index */
:root {
            --brand-primary: hsl(204, 88%, 32%);
            --brand-cyan: hsl(172, 76%, 42%);
            --brand-amber: hsl(38, 92%, 50%);
            --dark-ink: hsl(215, 28%, 13%);
            --bg-light: hsl(210, 20%, 98%);
            --text-heading: hsl(215, 25%, 15%);
            --text-body: hsl(215, 16%, 40%);
            --text-muted: hsl(215, 12%, 60%);
        }

        html {
            scroll-behavior: smooth;
            font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }

        body {
            color: var(--text-body);
            background-color: var(--bg-light);
            line-height: 1.8;
        }

        .heading-decorated {
            position: relative;
            display: inline-block;
        }

        .heading-decorated::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -10px;
            transform: translateX(-50%);
            width: 56px;
            height: 4px;
            background: linear-gradient(90deg, var(--brand-primary), var(--brand-cyan));
            border-radius: 2px;
        }

        .heading-left-decorated {
            position: relative;
            padding-left: 18px;
        }

        .heading-left-decorated::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15%;
            bottom: 15%;
            width: 5px;
            background: linear-gradient(180deg, var(--brand-primary), var(--brand-cyan));
            border-radius: 3px;
        }

        .glass-nav {
            background-color: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08);
        }

        .hero-banner-bg {
            background-image: linear-gradient(rgba(15, 23, 42, 0.82), rgba(13, 40, 71, 0.88)), url('/assets/images/73fe31c0393c457c.jpg');
            background-size: cover;
            background-position: center;
        }

        .card-custom {
            background: #ffffff;
            border-radius: 14px;
            border: 1px solid rgba(226, 232, 240, 0.9);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-custom:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
            border-color: rgba(14, 116, 144, 0.3);
        }

        .faq-item input:checked ~ .faq-content {
            max-height: 500px;
            opacity: 1;
            padding-top: 1rem;
        }

        .faq-item input:checked ~ label .faq-icon {
            transform: rotate(180deg);
        }

        .faq-content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.35s ease-in-out;
        }

        .countdown-box {
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }