/* roulang page: index */
:root {
            --primary: #0F253E;
            --secondary: #C29B38;
            --secondary-hover: #A6822B;
            --teal: #0D9488;
            --danger: #DC2626;
            --bg-light: #F8FAFC;
            --text-main: #0F172A;
            --text-muted: #334155;
            --border-color: #E2E8F0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: var(--text-main);
            background-color: var(--bg-light);
            line-height: 1.65;
            overflow-x: hidden;
        }

        .gold-gradient-bg {
            background: linear-gradient(135deg, #D4AF37 0%, #C29B38 50%, #997A23 100%);
        }

        .hero-overlay {
            background: linear-gradient(90deg, rgba(15, 37, 62, 0.95) 0%, rgba(15, 37, 62, 0.82) 60%, rgba(15, 37, 62, 0.65) 100%);
        }

        .dark-section-bg {
            background: radial-gradient(circle at 80% 20%, rgba(13, 148, 136, 0.12) 0%, transparent 50%),
                        linear-gradient(180deg, #0B1C30 0%, #0F253E 100%);
        }

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

        .accordion-content.active {
            max-height: 240px;
            opacity: 1;
        }

        .tab-pane {
            display: none;
        }
        .tab-pane.active {
            display: block;
            animation: fadeIn 0.35s ease-in-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }