/* roulang page: index */
:root {
            --primary-bg: #08090F;
            --secondary-bg: #0D111E;
            --accent-blue: #0052FF;
            --accent-cyan: #00F0FF;
            --text-primary: #FFFFFF;
            --text-secondary: #CBD5E1;
            --text-muted: #64748B;
            --border-color: rgba(0, 82, 255, 0.2);
            --card-bg: rgba(13, 17, 30, 0.8);
            --hover-glow: rgba(0, 240, 255, 0.15);
            --radius-sm: 6px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 16px rgba(0, 82, 255, 0.2);
            --shadow-glow: 0 0 20px rgba(0, 240, 255, 0.3);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        a {
            color: var(--accent-cyan);
            text-decoration: none;
            transition: var(--transition);
        }
        
        a:hover {
            color: var(--accent-blue);
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        button, .btn {
            cursor: pointer;
            border: none;
            outline: none;
            font-family: inherit;
            transition: var(--transition);
        }
        
        /* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(8, 9, 15, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-color);
        }
        
        nav {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
        }
        
        .logo {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logo i {
            color: var(--accent-cyan);
            font-size: 1.5rem;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
            align-items: center;
        }
        
        .nav-links a {
            color: var(--text-secondary);
            font-weight: 500;
            padding: 0.5rem 0;
            position: relative;
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-cyan);
            transition: var(--transition);
        }
        
        .nav-links a:hover::after,
        .nav-links a.active::after {
            width: 100%;
        }
        
        .nav-links a.active {
            color: var(--accent-cyan);
        }
        
        .nav-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
        
        .btn-login {
            color: var(--text-primary);
            padding: 0.5rem 1rem;
            font-weight: 500;
        }
        
        .btn-signup {
            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
            color: var(--text-primary);
            padding: 0.625rem 1.5rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            box-shadow: var(--shadow-glow);
        }
        
        .btn-signup:hover {
            transform: translateY(-2px);
            box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
        }
        
        .mobile-toggle {
            display: none;
            font-size: 1.5rem;
            color: var(--text-primary);
            background: none;
            border: none;
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            margin-top: 70px;
            padding: 3rem 2rem;
            background: linear-gradient(135deg, rgba(0, 82, 255, 0.05) 0%, rgba(0, 240, 255, 0.05) 100%);
        }
        
        .hero-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .hero-content {
            text-align: left;
            max-width: 900px;
        }
        
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(0, 82, 255, 0.2);
            border: 1px solid var(--accent-blue);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.875rem;
            color: var(--accent-cyan);
            margin-bottom: 1.5rem;
        }
        
        .hero h1 {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-cyan) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero-description {
            font-size: 1.125rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            line-height: 1.7;
        }
        
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }
        
        .stat-item {
            text-align: center;
            padding: 1rem;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
        }
        
        .stat-icon {
            font-size: 2rem;
            color: var(--accent-cyan);
            margin-bottom: 0.5rem;
        }
        
        .stat-number {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-primary);
            display: block;
        }
        
        .stat-label {
            font-size: 0.875rem;
            color: var(--text-muted);
        }
        
        /* Icon Matrix Section */
        .icon-matrix {
            padding: 4rem 2rem;
            background: var(--primary-bg);
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }
        
        .section-subtitle {
            font-size: 1.125rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto;
        }
        
        .game-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }
        
        .game-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 2rem;
            text-align: center;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        .game-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, transparent 0%, var(--hover-glow) 100%);
            opacity: 0;
            transition: var(--transition);
        }
        
        .game-card:hover {
            transform: translateY(-8px);
            border-color: var(--accent-cyan);
            box-shadow: var(--shadow-glow);
        }
        
        .game-card:hover::before {
            opacity: 1;
        }
        
        .game-icon {
            font-size: 3rem;
            color: var(--accent-cyan);
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }
        
        .game-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: linear-gradient(135deg, #FF0000 0%, #FF4500 100%);
            color: var(--text-primary);
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            z-index: 2;
        }
        
        .game-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
            position: relative;
            z-index: 1;
        }
        
        .game-description {
            font-size: 0.9375rem;
            color: var(--text-muted);
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
        }
        
        .btn-play {
            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
            color: var(--text-primary);
            padding: 0.75rem 2rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            display: inline-block;
            position: relative;
            z-index: 1;
        }
        
        .btn-play:hover {
            transform: scale(1.05);
            box-shadow: var(--shadow-glow);
        }
        
        /* Features Section */
        .features {
            padding: 4rem 2rem;
            background: var(--secondary-bg);
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }
        
        .feature-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 2rem;
            display: flex;
            gap: 1.5rem;
            transition: var(--transition);
        }
        
        .feature-card:hover {
            border-color: var(--accent-cyan);
            transform: translateX(8px);
        }
        
        .feature-icon-wrapper {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
        }
        
        .feature-content h3 {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }
        
        .feature-content p {
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        /* Milestone Section */
        .milestone {
            padding: 4rem 2rem;
            background: var(--primary-bg);
        }
        
        .timeline {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
            transform: translateX(-50%);
        }
        
        .timeline-item {
            display: flex;
            gap: 2rem;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .timeline-item:nth-child(even) {
            flex-direction: row-reverse;
        }
        
        .timeline-content {
            flex: 1;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
        }
        
        .timeline-marker {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
            box-shadow: var(--shadow-glow);
        }
        
        .timeline-date {
            font-size: 0.875rem;
            color: var(--accent-cyan);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .timeline-title {
            font-size: 1.125rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }
        
        .timeline-text {
            color: var(--text-secondary);
            font-size: 0.9375rem;
        }
        
        /* News Section */
        .news-section {
            padding: 4rem 2rem;
            background: var(--secondary-bg);
        }
        
        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }
        
        .news-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: var(--transition);
        }
        
        .news-card:hover {
            transform: translateY(-8px);
            border-color: var(--accent-cyan);
            box-shadow: var(--shadow-glow);
        }
        
        .news-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .news-content {
            padding: 1.5rem;
        }
        
        .news-meta {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            color: var(--text-muted);
        }
        
        .news-title {
            font-size: 1.125rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }
        
        .news-title a {
            color: var(--text-primary);
        }
        
        .news-title a:hover {
            color: var(--accent-cyan);
        }
        
        .news-excerpt {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            line-height: 1.6;
        }
        
        /* Platform Trust Section */
        .platform-trust {
            padding: 4rem 2rem;
            background: var(--primary-bg);
        }
        
        .trust-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }
        
        .trust-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 2rem;
            text-align: center;
            transition: var(--transition);
        }
        
        .trust-card:hover {
            border-color: var(--accent-cyan);
            box-shadow: var(--shadow-md);
        }
        
        .trust-icon {
            font-size: 3rem;
            color: var(--accent-cyan);
            margin-bottom: 1rem;
        }
        
        .trust-title {
            font-size: 1.125rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }
        
        .trust-text {
            color: var(--text-secondary);
            font-size: 0.9375rem;
        }
        
        .payment-badges {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 2rem;
        }
        
        .payment-badge {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            padding: 0.75rem 1.5rem;
            border-radius: var(--radius-sm);
            font-weight: 600;
            color: var(--text-primary);
        }
        
        /* App Download Section */
        .app-download {
            padding: 4rem 2rem;
            background: linear-gradient(135deg, rgba(0, 82, 255, 0.1) 0%, rgba(0, 240, 255, 0.1) 100%);
        }
        
        .app-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }
        
        .app-text h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: var(--text-primary);
        }
        
        .app-text p {
            font-size: 1.125rem;
            color: var(--text-secondary);
            margin-bottom: 2rem;
            line-height: 1.7;
        }
        
        .app-features {
            list-style: none;
            margin-bottom: 2rem;
        }
        
        .app-features li {
            padding: 0.75rem 0;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .app-features i {
            color: var(--accent-cyan);
            font-size: 1.25rem;
        }
        
        .download-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .btn-download {
            background: var(--card-bg);
            border: 1px solid var(--accent-cyan);
            padding: 0.875rem 1.75rem;
            border-radius: var(--radius-sm);
            color: var(--text-primary);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .btn-download:hover {
            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
            transform: translateY(-2px);
            box-shadow: var(--shadow-glow);
        }
        
        .app-visual {
            text-align: center;
        }
        
        .app-visual img {
            max-width: 400px;
            margin: 0 auto;
            filter: drop-shadow(0 8px 24px rgba(0, 240, 255, 0.3));
        }
        
        /* FAQ Section */
        .faq {
            padding: 4rem 2rem;
            background: var(--secondary-bg);
        }
        
        .faq-container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .faq-item {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: var(--transition);
        }
        
        .faq-item:hover {
            border-color: var(--accent-cyan);
        }
        
        .faq-question {
            padding: 1.5rem;
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .faq-question i {
            color: var(--accent-cyan);
            transition: var(--transition);
        }
        
        .faq-answer {
            padding: 0 1.5rem 1.5rem;
            color: var(--text-secondary);
            line-height: 1.7;
        }
        
        /* CTA Section */
        .cta {
            padding: 4rem 2rem;
            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
            text-align: center;
        }
        
        .cta h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }
        
        .cta p {
            font-size: 1.125rem;
            margin-bottom: 2rem;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .btn-cta-primary {
            background: var(--primary-bg);
            color: var(--text-primary);
            padding: 1rem 3rem;
            border-radius: var(--radius-sm);
            font-size: 1.125rem;
            font-weight: 700;
            display: inline-block;
        }
        
        .btn-cta-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }
        
        /* Footer */
        footer {
            background: var(--primary-bg);
            border-top: 1px solid var(--border-color);
            padding: 3rem 2rem 1.5rem;
        }
        
        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 3rem;
            margin-bottom: 2rem;
        }
        
        .footer-section h3 {
            font-size: 1.125rem;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }
        
        .footer-section ul {
            list-style: none;
        }
        
        .footer-section ul li {
            margin-bottom: 0.75rem;
        }
        
        .footer-section a {
            color: var(--text-secondary);
            font-size: 0.9375rem;
        }
        
        .footer-section a:hover {
            color: var(--accent-cyan);
        }
        
        .footer-about {
            max-width: 350px;
        }
        
        .footer-logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .footer-logo i {
            color: var(--accent-cyan);
        }
        
        .footer-text {
            color: var(--text-secondary);
            font-size: 0.9375rem;
            line-height: 1.6;
        }
        
        .footer-bottom {
            max-width: 1400px;
            margin: 0 auto;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
            text-align: center;
            color: var(--text-muted);
            font-size: 0.875rem;
        }
        
        .compliance-badges {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }
        
        .compliance-badge {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            padding: 0.5rem 1rem;
            border-radius: var(--radius-sm);
            font-size: 0.875rem;
            color: var(--text-secondary);
        }
        
        /* FAB */
        .fab {
            position: fixed;
            left: 1rem;
            bottom: 6rem;
            z-index: 999;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--text-primary);
            box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
            cursor: pointer;
            transition: var(--transition);
            opacity: 0.7;
            animation: float 3s ease-in-out infinite;
        }
        
        .fab:hover {
            opacity: 1;
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
        }
        
        .fab:active {
            transform: scale(0.95);
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        .fab-notification {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 20px;
            height: 20px;
            background: #FF0000;
            border-radius: 50%;
            border: 2px solid var(--primary-bg);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .app-content {
                grid-template-columns: 1fr;
            }
            
            .timeline::before {
                left: 20px;
            }
            
            .timeline-item,
            .timeline-item:nth-child(even) {
                flex-direction: row;
                padding-left: 60px;
            }
            
            .timeline-marker {
                position: absolute;
                left: 0;
            }
        }
        
        @media (max-width: 768px) {
            nav {
                padding: 1rem;
            }
            
            .nav-links {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: rgba(8, 9, 15, 0.98);
                flex-direction: column;
                padding: 2rem;
                gap: 1.5rem;
                transition: var(--transition);
                overflow-y: auto;
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .nav-actions {
                width: 100%;
                flex-direction: column;
            }
            
            .btn-login,
            .btn-signup {
                width: 100%;
                text-align: center;
            }
            
            .mobile-toggle {
                display: block;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .hero-description {
                font-size: 1rem;
            }
            
            .game-grid,
            .feature-grid,
            .news-grid,
            .trust-grid {
                grid-template-columns: 1fr;
            }
            
            .app-text h2,
            .cta h2 {
                font-size: 2rem;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
            
            .fab {
                width: 50px;
                height: 50px;
                font-size: 1.25rem;
                left: 0.75rem;
                bottom: 5rem;
            }
        }
        
        @media (max-width: 520px) {
            .hero h1 {
                font-size: 1.75rem;
            }
            
            .section-title {
                font-size: 1.75rem;
            }
            
            .hero-stats {
                grid-template-columns: 1fr;
            }
            
            .download-buttons {
                flex-direction: column;
            }
            
            .btn-download {
                width: 100%;
                justify-content: center;
            }
        }

/* roulang page: article */
:root {
            --primary-bg: #0A2E1C;
            --secondary-bg: #123E25;
            --accent-gold: #FFD700;
            --accent-red: #D32F2F;
            --text-white: #FFFFFF;
            --text-pale: #D1F2EB;
            --jade-dark: #062315;
            --jade-light: #1A5C3E;
            --border-gold: rgba(255, 215, 0, 0.3);
            --shadow-gold: 0 4px 20px rgba(255, 215, 0, 0.15);
            --shadow-deep: 0 8px 32px rgba(0, 0, 0, 0.4);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --spacing-xs: 8px;
            --spacing-sm: 16px;
            --spacing-md: 24px;
            --spacing-lg: 48px;
            --spacing-xl: 64px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, var(--primary-bg) 0%, var(--jade-dark) 100%);
            color: var(--text-white);
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        a {
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
        }
        
        button {
            border: none;
            background: none;
            cursor: pointer;
            font-family: inherit;
        }
        
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 var(--spacing-sm);
        }
        
        header {
            background: rgba(10, 46, 28, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-gold);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow-deep);
        }
        
        nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--spacing-sm) var(--spacing-md);
            max-width: 1280px;
            margin: 0 auto;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: 800;
            color: var(--accent-gold);
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
        }
        
        .logo i {
            font-size: 28px;
            filter: drop-shadow(0 0 10px var(--accent-gold));
        }
        
        .nav-links {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            list-style: none;
        }
        
        .nav-links li a {
            color: var(--text-pale);
            font-weight: 500;
            padding: 8px 16px;
            border-radius: var(--radius-sm);
            transition: all 0.3s ease;
        }
        
        .nav-links li a:hover {
            color: var(--accent-gold);
            background: rgba(255, 215, 0, 0.1);
        }
        
        .nav-links li a.active {
            color: var(--accent-gold);
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid var(--border-gold);
        }
        
        .nav-actions {
            display: flex;
            gap: 12px;
            margin-left: var(--spacing-md);
        }
        
        .btn-login {
            color: var(--text-white);
            padding: 10px 20px;
            border-radius: var(--radius-sm);
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-login:hover {
            color: var(--accent-gold);
        }
        
        .btn-signup {
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            color: var(--primary-bg);
            padding: 10px 24px;
            border-radius: var(--radius-sm);
            font-weight: 700;
            box-shadow: var(--shadow-gold);
            transition: all 0.3s ease;
        }
        
        .btn-signup:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(255, 215, 0, 0.3);
        }
        
        .mobile-toggle {
            display: none;
            color: var(--accent-gold);
            font-size: 24px;
            padding: 8px;
        }
        
        .article-banner {
            background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--jade-light) 100%);
            padding: var(--spacing-xl) 0 var(--spacing-lg);
            border-bottom: 2px solid var(--border-gold);
            position: relative;
            overflow: hidden;
        }
        
        .article-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('/assets/images/backpic/back-2.jpg') center/cover;
            opacity: 0.08;
            z-index: 0;
        }
        
        .article-banner .container {
            position: relative;
            z-index: 1;
        }
        
        .article-meta {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-md);
            flex-wrap: wrap;
        }
        
        .meta-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid var(--border-gold);
            border-radius: 20px;
            font-size: 14px;
            color: var(--accent-gold);
            font-weight: 600;
        }
        
        .meta-badge i {
            font-size: 12px;
        }
        
        .article-title {
            font-size: 42px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: var(--spacing-sm);
            color: var(--text-white);
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        .article-excerpt {
            font-size: 18px;
            color: var(--text-pale);
            line-height: 1.7;
            max-width: 900px;
        }
        
        .article-main {
            padding: var(--spacing-xl) 0;
        }
        
        .article-layout {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: var(--spacing-lg);
            max-width: 1280px;
            margin: 0 auto;
        }
        
        .article-content {
            background: rgba(18, 62, 37, 0.4);
            backdrop-filter: blur(8px);
            border: 1px solid var(--border-gold);
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg);
            box-shadow: var(--shadow-deep);
        }
        
        .article-content h2 {
            font-size: 32px;
            font-weight: 700;
            margin: var(--spacing-lg) 0 var(--spacing-sm);
            color: var(--accent-gold);
            padding-bottom: var(--spacing-sm);
            border-bottom: 2px solid var(--border-gold);
        }
        
        .article-content h2:first-child {
            margin-top: 0;
        }
        
        .article-content h3 {
            font-size: 24px;
            font-weight: 600;
            margin: var(--spacing-md) 0 var(--spacing-sm);
            color: var(--text-white);
        }
        
        .article-content p {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: var(--spacing-md);
            color: var(--text-pale);
        }
        
        .article-content ul,
        .article-content ol {
            margin: var(--spacing-md) 0;
            padding-left: var(--spacing-md);
        }
        
        .article-content li {
            font-size: 17px;
            line-height: 1.8;
            margin-bottom: 12px;
            color: var(--text-pale);
        }
        
        .article-content img {
            border-radius: var(--radius-md);
            margin: var(--spacing-md) 0;
            box-shadow: var(--shadow-deep);
            border: 1px solid var(--border-gold);
        }
        
        .article-content a {
            color: var(--accent-gold);
            text-decoration: underline;
        }
        
        .article-content a:hover {
            color: #FFA500;
        }
        
        .article-content blockquote {
            background: rgba(255, 215, 0, 0.1);
            border-left: 4px solid var(--accent-gold);
            padding: var(--spacing-sm) var(--spacing-md);
            margin: var(--spacing-md) 0;
            border-radius: var(--radius-sm);
            font-style: italic;
            color: var(--text-pale);
        }
        
        .article-content table {
            width: 100%;
            border-collapse: collapse;
            margin: var(--spacing-md) 0;
            background: rgba(10, 46, 28, 0.5);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }
        
        .article-content th,
        .article-content td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid var(--border-gold);
        }
        
        .article-content th {
            background: rgba(255, 215, 0, 0.15);
            color: var(--accent-gold);
            font-weight: 600;
        }
        
        .article-sidebar {
            position: sticky;
            top: 100px;
            height: fit-content;
        }
        
        .sidebar-section {
            background: rgba(18, 62, 37, 0.4);
            backdrop-filter: blur(8px);
            border: 1px solid var(--border-gold);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            box-shadow: var(--shadow-deep);
        }
        
        .sidebar-section h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: var(--spacing-sm);
            color: var(--accent-gold);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .sidebar-list {
            list-style: none;
        }
        
        .sidebar-list li {
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 215, 0, 0.1);
        }
        
        .sidebar-list li:last-child {
            border-bottom: none;
        }
        
        .sidebar-list a {
            color: var(--text-pale);
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .sidebar-list a:hover {
            color: var(--accent-gold);
        }
        
        .sidebar-list i {
            color: var(--accent-gold);
            font-size: 12px;
        }
        
        .cta-box {
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: var(--radius-md);
            padding: var(--spacing-md);
            text-align: center;
            box-shadow: var(--shadow-gold);
        }
        
        .cta-box h3 {
            color: var(--primary-bg);
            font-size: 22px;
            font-weight: 800;
            margin-bottom: var(--spacing-sm);
        }
        
        .cta-box p {
            color: var(--jade-dark);
            font-size: 15px;
            margin-bottom: var(--spacing-sm);
            line-height: 1.5;
        }
        
        .cta-box .btn-cta {
            display: inline-block;
            background: var(--primary-bg);
            color: var(--accent-gold);
            padding: 12px 28px;
            border-radius: var(--radius-sm);
            font-weight: 700;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .cta-box .btn-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
        }
        
        .not-found {
            text-align: center;
            padding: var(--spacing-xl) var(--spacing-md);
        }
        
        .not-found-icon {
            font-size: 80px;
            color: var(--accent-gold);
            margin-bottom: var(--spacing-md);
            opacity: 0.5;
        }
        
        .not-found h2 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: var(--spacing-sm);
            color: var(--text-white);
        }
        
        .not-found p {
            font-size: 18px;
            color: var(--text-pale);
            margin-bottom: var(--spacing-md);
        }
        
        .not-found .btn-home {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            color: var(--primary-bg);
            padding: 14px 32px;
            border-radius: var(--radius-sm);
            font-weight: 700;
            font-size: 16px;
            box-shadow: var(--shadow-gold);
            transition: all 0.3s ease;
        }
        
        .not-found .btn-home:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(255, 215, 0, 0.3);
        }
        
        footer {
            background: linear-gradient(135deg, #062315 0%, #0A2E1C 100%);
            border-top: 2px solid var(--border-gold);
            padding: var(--spacing-xl) 0 var(--spacing-md);
            margin-top: var(--spacing-xl);
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: var(--spacing-lg);
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 var(--spacing-md) var(--spacing-lg);
            border-bottom: 1px solid var(--border-gold);
        }
        
        .footer-section h3 {
            color: var(--accent-gold);
            font-size: 18px;
            font-weight: 700;
            margin-bottom: var(--spacing-sm);
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: 800;
            color: var(--accent-gold);
            margin-bottom: var(--spacing-sm);
        }
        
        .footer-logo i {
            font-size: 28px;
        }
        
        .footer-text {
            color: var(--text-pale);
            font-size: 15px;
            line-height: 1.7;
        }
        
        .footer-section ul {
            list-style: none;
        }
        
        .footer-section ul li {
            margin-bottom: 10px;
        }
        
        .footer-section ul li a {
            color: var(--text-pale);
            font-size: 15px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .footer-section ul li a:hover {
            color: var(--accent-gold);
            padding-left: 4px;
        }
        
        .footer-bottom {
            max-width: 1280px;
            margin: 0 auto;
            padding: var(--spacing-md) var(--spacing-md) 0;
            text-align: center;
        }
        
        .compliance-badges {
            display: flex;
            justify-content: center;
            gap: var(--spacing-md);
            flex-wrap: wrap;
            margin-bottom: var(--spacing-md);
        }
        
        .compliance-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid var(--border-gold);
            border-radius: 20px;
            font-size: 13px;
            color: var(--accent-gold);
            font-weight: 600;
        }
        
        .footer-bottom p {
            color: var(--text-pale);
            font-size: 14px;
        }
        
        .fab-left {
            position: fixed;
            left: 20px;
            bottom: 100px;
            z-index: 999;
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 50%;
            border: 3px solid rgba(255, 215, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), 0 0 0 0 rgba(255, 215, 0, 0.4);
            cursor: pointer;
            transition: all 0.3s ease;
            animation: fabFloat 3s ease-in-out infinite, fabPulse 2s infinite;
            opacity: 0.85;
        }
        
        .fab-left:hover {
            opacity: 1;
            transform: translateY(-4px) scale(1.1);
            box-shadow: 0 8px 28px rgba(255, 215, 0, 0.4);
            animation: fabSpin 0.6s ease;
        }
        
        .fab-left i {
            font-size: 28px;
            color: var(--primary-bg);
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }
        
        @keyframes fabFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        
        @keyframes fabPulse {
            0%, 100% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), 0 0 0 0 rgba(255, 215, 0, 0.4); }
            50% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3), 0 0 0 15px rgba(255, 215, 0, 0); }
        }
        
        @keyframes fabSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @media (max-width: 1024px) {
            .article-layout {
                grid-template-columns: 1fr;
            }
            
            .article-sidebar {
                position: static;
            }
            
            .footer-content {
                grid-template-columns: 1fr 1fr;
                gap: var(--spacing-md);
            }
            
            .footer-about {
                grid-column: 1 / -1;
            }
        }
        
        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 70px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: rgba(10, 46, 28, 0.98);
                backdrop-filter: blur(12px);
                flex-direction: column;
                align-items: stretch;
                padding: var(--spacing-md);
                transition: left 0.3s ease;
                overflow-y: auto;
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .nav-links li {
                width: 100%;
            }
            
            .nav-links li a {
                display: block;
                padding: 14px 20px;
                border-radius: var(--radius-sm);
                text-align: center;
            }
            
            .nav-actions {
                width: 100%;
                flex-direction: column;
                margin-left: 0;
                margin-top: var(--spacing-sm);
            }
            
            .btn-login,
            .btn-signup {
                width: 100%;
                text-align: center;
                padding: 14px 24px;
            }
            
            .mobile-toggle {
                display: block;
            }
            
            .article-banner {
                padding: var(--spacing-lg) 0 var(--spacing-md);
            }
            
            .article-title {
                font-size: 28px;
            }
            
            .article-excerpt {
                font-size: 16px;
            }
            
            .article-content {
                padding: var(--spacing-md);
            }
            
            .article-content h2 {
                font-size: 24px;
            }
            
            .article-content h3 {
                font-size: 20px;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
            
            .footer-about {
                grid-column: 1;
            }
            
            .fab-left {
                left: 16px;
                bottom: 80px;
                width: 56px;
                height: 56px;
            }
            
            .fab-left i {
                font-size: 24px;
            }
        }
        
        @media (max-width: 520px) {
            .article-title {
                font-size: 24px;
            }
            
            .article-meta {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .compliance-badges {
                gap: var(--spacing-xs);
            }
            
            .compliance-badge {
                font-size: 11px;
                padding: 6px 12px;
            }
        }

/* roulang page: category1 */
:root {
            --primary-bg: #0A2E1C;
            --secondary-bg: #123E25;
            --accent-gold: #FFD700;
            --accent-red: #D32F2F;
            --text-primary: #FFFFFF;
            --text-secondary: #D1F2EB;
            --text-muted: rgba(209, 242, 235, 0.7);
            --border-gold: #FFD700;
            --border-radius: 12px;
            --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.25);
            --shadow-glow: 0 0 20px rgba(255, 215, 0, 0.3);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        a {
            color: inherit;
            text-decoration: none;
            transition: var(--transition);
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        button, input {
            font-family: inherit;
            border: none;
            outline: none;
        }
        
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(10, 46, 28, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
            box-shadow: var(--shadow-soft);
        }
        
        nav {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: 700;
            color: var(--accent-gold);
            transition: var(--transition);
        }
        
        .logo i {
            font-size: 28px;
            animation: sparkle 2s ease-in-out infinite;
        }
        
        @keyframes sparkle {
            0%, 100% { transform: rotate(0deg) scale(1); }
            50% { transform: rotate(180deg) scale(1.1); }
        }
        
        .logo:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 0 12px var(--accent-gold));
        }
        
        .nav-links {
            display: flex;
            align-items: center;
            gap: 32px;
            list-style: none;
        }
        
        .nav-links > li > a {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-secondary);
            padding: 8px 16px;
            border-radius: 8px;
            transition: var(--transition);
            position: relative;
        }
        
        .nav-links > li > a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 80%;
            height: 2px;
            background: var(--accent-gold);
            transition: var(--transition);
        }
        
        .nav-links > li > a:hover,
        .nav-links > li > a.active {
            color: var(--accent-gold);
            background: rgba(255, 215, 0, 0.1);
        }
        
        .nav-links > li > a.active::after {
            transform: translateX(-50%) scaleX(1);
        }
        
        .nav-actions {
            display: flex;
            gap: 12px;
            margin-left: 16px;
        }
        
        .btn-login {
            padding: 10px 24px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            border: 1px solid var(--accent-gold);
            border-radius: 8px;
            transition: var(--transition);
        }
        
        .btn-login:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-2px);
        }
        
        .btn-signup {
            padding: 10px 24px;
            font-size: 14px;
            font-weight: 700;
            color: var(--primary-bg);
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
            transition: var(--transition);
        }
        
        .btn-signup:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(255, 215, 0, 0.6);
        }
        
        .mobile-toggle {
            display: none;
            background: transparent;
            color: var(--accent-gold);
            font-size: 24px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .mobile-toggle:hover {
            transform: scale(1.1);
        }
        
        main {
            margin-top: 72px;
        }
        
        .hero-banner {
            position: relative;
            height: 420px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(10, 46, 28, 0.9) 0%, rgba(18, 62, 37, 0.85) 100%), 
                        url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
        }
        
        .hero-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 50%, rgba(255, 215, 0, 0.15) 0%, transparent 60%);
            animation: pulse-glow 4s ease-in-out infinite;
        }
        
        @keyframes pulse-glow {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            max-width: 900px;
            padding: 0 24px;
        }
        
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 20px;
            background: linear-gradient(135deg, var(--accent-red) 0%, #B71C1C 100%);
            border: 2px solid var(--accent-gold);
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 24px;
            animation: bounce 2s ease-in-out infinite;
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        
        .hero-content h1 {
            font-size: 48px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFF 50%, var(--accent-gold) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
        }
        
        .hero-content p {
            font-size: 18px;
            color: var(--text-secondary);
            margin-bottom: 32px;
            line-height: 1.7;
        }
        
        .hero-cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 40px;
            font-size: 16px;
            font-weight: 700;
            color: var(--primary-bg);
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 50px;
            box-shadow: 0 8px 24px rgba(255, 215, 0, 0.5);
            transition: var(--transition);
        }
        
        .hero-cta:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 12px 32px rgba(255, 215, 0, 0.7);
        }
        
        .hero-cta i {
            animation: pulse 1.5s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        section {
            padding: 80px 0;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 56px;
        }
        
        .section-label {
            display: inline-block;
            padding: 6px 16px;
            background: rgba(255, 215, 0, 0.15);
            border: 1px solid var(--accent-gold);
            border-radius: 20px;
            font-size: 13px;
            font-weight: 700;
            color: var(--accent-gold);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 16px;
        }
        
        .section-header h2 {
            font-size: 40px;
            font-weight: 800;
            margin-bottom: 16px;
            color: var(--text-primary);
        }
        
        .section-header p {
            font-size: 18px;
            color: var(--text-muted);
            max-width: 720px;
            margin: 0 auto;
            line-height: 1.7;
        }
        
        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 28px;
            margin-bottom: 48px;
        }
        
        .game-card {
            position: relative;
            background: rgba(18, 62, 37, 0.4);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
            cursor: pointer;
        }
        
        .game-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
            transition: var(--transition);
        }
        
        .game-card:hover::before {
            left: 100%;
        }
        
        .game-card:hover {
            transform: translateY(-8px);
            border-color: var(--accent-gold);
            box-shadow: var(--shadow-glow);
        }
        
        .game-image {
            position: relative;
            height: 200px;
            overflow: hidden;
        }
        
        .game-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .game-card:hover .game-image img {
            transform: scale(1.1);
        }
        
        .game-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 4px 12px;
            background: linear-gradient(135deg, var(--accent-red) 0%, #B71C1C 100%);
            border: 1px solid var(--accent-gold);
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            z-index: 2;
        }
        
        .game-info {
            padding: 20px;
        }
        
        .game-name {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        
        .game-provider {
            font-size: 13px;
            color: var(--accent-gold);
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .game-stats {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .stat-item i {
            color: var(--accent-gold);
        }
        
        .game-jackpot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .jackpot-label {
            font-size: 12px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .jackpot-amount {
            font-size: 18px;
            font-weight: 800;
            color: var(--accent-gold);
            animation: pulse-number 2s ease-in-out infinite;
        }
        
        @keyframes pulse-number {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        .game-btn {
            display: block;
            width: 100%;
            padding: 12px;
            font-size: 15px;
            font-weight: 700;
            text-align: center;
            color: var(--primary-bg);
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 8px;
            transition: var(--transition);
        }
        
        .game-btn:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 16px rgba(255, 215, 0, 0.5);
        }
        
        .features-section {
            background: rgba(18, 62, 37, 0.3);
            border-top: 1px solid rgba(255, 215, 0, 0.2);
            border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 32px;
        }
        
        .feature-card {
            text-align: center;
            padding: 32px 24px;
            background: rgba(10, 46, 28, 0.5);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        
        .feature-card:hover {
            transform: translateY(-6px);
            border-color: var(--accent-gold);
            box-shadow: var(--shadow-glow);
        }
        
        .feature-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 50%;
            font-size: 28px;
            color: var(--primary-bg);
            box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
        }
        
        .feature-card h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        
        .feature-card p {
            font-size: 15px;
            color: var(--text-muted);
            line-height: 1.6;
        }
        
        .providers-section {
            background: linear-gradient(135deg, rgba(10, 46, 28, 0.6) 0%, rgba(18, 62, 37, 0.4) 100%);
        }
        
        .providers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 24px;
        }
        
        .provider-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 28px 20px;
            background: rgba(18, 62, 37, 0.4);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: var(--border-radius);
            transition: var(--transition);
            text-align: center;
        }
        
        .provider-card:hover {
            transform: translateY(-4px);
            border-color: var(--accent-gold);
            box-shadow: var(--shadow-glow);
        }
        
        .provider-logo {
            width: 80px;
            height: 80px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 215, 0, 0.1);
            border: 2px solid var(--accent-gold);
            border-radius: 50%;
            font-size: 32px;
            color: var(--accent-gold);
        }
        
        .provider-card h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        
        .provider-card p {
            font-size: 13px;
            color: var(--text-muted);
        }
        
        .faq-section {
            background: rgba(18, 62, 37, 0.2);
        }
        
        .faq-list {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .faq-item {
            margin-bottom: 16px;
            background: rgba(10, 46, 28, 0.5);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: var(--border-radius);
            overflow: hidden;
            transition: var(--transition);
        }
        
        .faq-item:hover {
            border-color: var(--accent-gold);
        }
        
        .faq-question {
            width: 100%;
            padding: 20px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: transparent;
            color: var(--text-primary);
            font-size: 17px;
            font-weight: 700;
            text-align: left;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .faq-question:hover {
            color: var(--accent-gold);
        }
        
        .faq-question i {
            font-size: 20px;
            color: var(--accent-gold);
            transition: var(--transition);
        }
        
        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .faq-item.active .faq-answer {
            max-height: 500px;
        }
        
        .faq-answer p {
            padding: 0 24px 20px;
            font-size: 15px;
            color: var(--text-muted);
            line-height: 1.7;
        }
        
        .cta-section {
            padding: 100px 0;
            background: linear-gradient(135deg, rgba(211, 47, 47, 0.2) 0%, rgba(10, 46, 28, 0.8) 100%),
                        url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
            animation: pulse-glow 3s ease-in-out infinite;
        }
        
        .cta-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        .cta-content h2 {
            font-size: 44px;
            font-weight: 800;
            margin-bottom: 20px;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFF 50%, var(--accent-gold) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .cta-content p {
            font-size: 18px;
            color: var(--text-secondary);
            margin-bottom: 36px;
            line-height: 1.7;
        }
        
        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .cta-btn-primary {
            padding: 18px 48px;
            font-size: 17px;
            font-weight: 700;
            color: var(--primary-bg);
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 50px;
            box-shadow: 0 8px 24px rgba(255, 215, 0, 0.5);
            transition: var(--transition);
        }
        
        .cta-btn-primary:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 12px 32px rgba(255, 215, 0, 0.7);
        }
        
        .cta-btn-secondary {
            padding: 18px 48px;
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            background: transparent;
            border: 2px solid var(--accent-gold);
            border-radius: 50px;
            transition: var(--transition);
        }
        
        .cta-btn-secondary:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-4px);
        }
        
        footer {
            background: rgba(10, 46, 28, 0.9);
            border-top: 1px solid rgba(255, 215, 0, 0.2);
            padding: 60px 0 0;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 48px;
            margin-bottom: 48px;
        }
        
        .footer-section h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--accent-gold);
            margin-bottom: 20px;
        }
        
        .footer-about .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 24px;
            font-weight: 700;
            color: var(--accent-gold);
            margin-bottom: 16px;
        }
                .footer-about .footer-logo i {
            font-size: 28px;
        }
        
        .footer-text {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.7;
        }
        
        .footer-section ul {
            list-style: none;
        }
        
        .footer-section ul li {
            margin-bottom: 12px;
        }
        
        .footer-section ul li a {
            font-size: 14px;
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: var(--transition);
        }
        
        .footer-section ul li a:hover {
            color: var(--accent-gold);
            transform: translateX(4px);
        }
        
        .footer-section ul li a i {
            color: var(--accent-gold);
            width: 18px;
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(255, 215, 0, 0.15);
            padding: 24px;
            text-align: center;
        }
        
        .compliance-badges {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }
        
        .compliance-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(255, 215, 0, 0.08);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .compliance-badge i {
            color: var(--accent-gold);
        }
        
        .footer-bottom p {
            font-size: 13px;
            color: var(--text-muted);
        }
        
        footer .footer-content {
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 24px 48px;
        }
        
        .fab-wheel {
            position: fixed;
            left: 16px;
            bottom: 96px;
            z-index: 999;
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle, #1A0F0F 0%, var(--accent-red) 120%);
            border: 3px solid var(--accent-gold);
            border-radius: 50%;
            font-size: 26px;
            color: var(--accent-gold);
            box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
            opacity: 0.75;
            animation: fab-float 3s ease-in-out infinite;
            transition: var(--transition);
        }
        
        @keyframes fab-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }
        
        .fab-wheel:hover {
            opacity: 1;
            transform: scale(1.1);
        }
        
        .fab-wheel:hover i {
            animation: fab-spin 0.6s ease;
        }
        
        @keyframes fab-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .fab-wheel:active {
            transform: scale(0.95) translateY(2px);
        }
        
        .fab-dot {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 14px;
            height: 14px;
            background: var(--accent-red);
            border: 2px solid var(--accent-gold);
            border-radius: 50%;
            animation: pulse 1.2s ease-in-out infinite;
        }
        
        .ranking-section {
            background: rgba(10, 46, 28, 0.4);
        }
        
        .ranking-list {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .ranking-item {
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 20px 28px;
            background: rgba(18, 62, 37, 0.4);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: var(--border-radius);
            transition: var(--transition);
        }
        
        .ranking-item:hover {
            border-color: var(--accent-gold);
            transform: translateX(8px);
            box-shadow: var(--shadow-glow);
        }
        
        .rank-number {
            flex-shrink: 0;
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--accent-gold) 0%, #FFA500 100%);
            border-radius: 50%;
            font-size: 22px;
            font-weight: 800;
            color: var(--primary-bg);
        }
        
        .ranking-item.top-rank .rank-number {
            background: linear-gradient(135deg, var(--accent-red) 0%, #B71C1C 100%);
            color: var(--accent-gold);
            border: 2px solid var(--accent-gold);
        }
        
        .rank-info {
            flex: 1;
        }
        
        .rank-info h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        
        .rank-info p {
            font-size: 14px;
            color: var(--text-muted);
        }
        
        .rank-rtp {
            flex-shrink: 0;
            text-align: right;
        }
        
        .rank-rtp .rtp-value {
            display: block;
            font-size: 20px;
            font-weight: 800;
            color: var(--accent-gold);
        }
        
        .rank-rtp .rtp-label {
            font-size: 12px;
            color: var(--text-muted);
            text-transform: uppercase;
        }
        
        @media (max-width: 1024px) {
            .footer-content {
                grid-template-columns: 1fr 1fr;
            }
            
            .hero-content h1 {
                font-size: 38px;
            }
            
            .section-header h2 {
                font-size: 32px;
            }
            
            .cta-content h2 {
                font-size: 34px;
            }
        }
        
        @media (max-width: 768px) {
            .mobile-toggle {
                display: block;
            }
            
            .nav-links {
                position: fixed;
                top: 72px;
                left: 0;
                right: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                background: rgba(10, 46, 28, 0.98);
                border-bottom: 1px solid rgba(255, 215, 0, 0.3);
                padding: 16px 24px;
                transform: translateY(-150%);
                transition: transform 0.3s ease;
            }
            
            .nav-links.open {
                transform: translateY(0);
            }
            
            .nav-links > li > a {
                display: block;
                padding: 14px 16px;
            }
            
            .nav-actions {
                margin: 12px 0 0;
                flex-direction: row;
            }
            
            .btn-login, .btn-signup {
                flex: 1;
                text-align: center;
            }
            
            .hero-banner {
                height: auto;
                padding: 60px 0;
            }
            
            .hero-content h1 {
                font-size: 30px;
            }
            
            .hero-content p {
                font-size: 16px;
            }
            
            section {
                padding: 56px 0;
            }
            
            .ranking-item {
                flex-wrap: wrap;
                gap: 16px;
                padding: 16px 20px;
            }
            
            .rank-rtp {
                text-align: left;
                width: 100%;
                padding-left: 68px;
            }
        }
        
        @media (max-width: 520px) {
            .hero-content h1 {
                font-size: 24px;
            }
            
            .section-header h2 {
                font-size: 26px;
            }
            
            .cta-content h2 {
                font-size: 26px;
            }
            
            .games-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
                gap: 32px;
            }
            
            .cta-buttons {
                flex-direction: column;
            }
            
            .cta-btn-primary, .cta-btn-secondary {
                width: 100%;
                text-align: center;
            }
            
            .fab-wheel {
                width: 52px;
                height: 52px;
                font-size: 22px;
            }
        }

/* roulang page: category2 */
:root{
            --bg-deep:#0A2E1C;
            --bg-forest:#123E25;
            --bg-panel:#0E3620;
            --gold:#FFD700;
            --gold-soft:#F5D76E;
            --red:#D32F2F;
            --white:#FFFFFF;
            --mint:#D1F2EB;
            --mint-dim:#9CC9BC;
            --border-gold:rgba(255,215,0,.35);
            --border-soft:rgba(209,242,235,.12);
            --radius:14px;
            --radius-sm:10px;
            --shadow-card:0 8px 28px rgba(0,0,0,.35);
            --shadow-gold:0 4px 20px rgba(255,215,0,.25);
            --container:1180px;
            --transition:all .25s ease;
        }
        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
            background:linear-gradient(160deg,var(--bg-deep) 0%,var(--bg-forest) 55%,#0A2E1C 100%);
            color:var(--white);
            line-height:1.65;
            min-height:100vh;
        }
        img{max-width:100%;display:block}
        a{text-decoration:none;color:inherit;transition:var(--transition)}
        ul{list-style:none}
        button{font-family:inherit;cursor:pointer;border:none;background:none}
        .container{max-width:var(--container);margin:0 auto;padding:0 20px}

        /* ===== Header / Nav ===== */
        header{
            position:fixed;top:0;left:0;right:0;z-index:1000;
            background:rgba(10,46,28,.96);
            backdrop-filter:blur(12px);
            border-bottom:1px solid var(--border-gold);
            box-shadow:0 2px 18px rgba(0,0,0,.4);
        }
        nav{
            max-width:var(--container);margin:0 auto;padding:0 20px;
            display:flex;align-items:center;justify-content:space-between;
            height:68px;gap:16px;
        }
        .logo{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:800;color:var(--gold);white-space:nowrap}
        .logo i{font-size:1.4rem;color:var(--gold);filter:drop-shadow(0 0 6px rgba(255,215,0,.5))}
        .nav-links{display:flex;align-items:center;gap:6px}
        .nav-links li a{
            display:block;padding:8px 14px;border-radius:8px;
            color:var(--mint);font-weight:600;font-size:.95rem;
        }
        .nav-links li a:hover{color:var(--gold);background:rgba(255,215,0,.08)}
        .nav-links li a.active{color:var(--gold);background:rgba(255,215,0,.12);box-shadow:inset 0 -2px 0 var(--gold)}
        .nav-actions{display:flex;align-items:center;gap:10px;margin-left:14px}
        .btn-login{color:var(--mint);font-weight:600;padding:8px 12px;font-size:.95rem}
        .btn-login:hover{color:var(--gold)}
        .btn-signup{
            background:linear-gradient(135deg,var(--gold) 0%,#E6B800 100%);
            color:#0A2E1C;font-weight:800;padding:10px 20px;border-radius:999px;
            font-size:.95rem;box-shadow:var(--shadow-gold);white-space:nowrap;
        }
        .btn-signup:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,215,0,.4)}
        .btn-signup:active{transform:translateY(0) scale(.97)}
        .mobile-toggle{display:none;color:var(--gold);font-size:1.4rem;padding:8px}

        /* ===== Page Hero ===== */
        .page-hero{
            padding:150px 0 70px;
            background:linear-gradient(rgba(10,46,28,.82),rgba(10,46,28,.94)),url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            border-bottom:1px solid var(--border-gold);
        }
        .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
        .hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
        .badge-pill{
            display:inline-flex;align-items:center;gap:7px;
            padding:7px 14px;border-radius:999px;font-size:.82rem;font-weight:700;
            background:rgba(255,215,0,.12);color:var(--gold);border:1px solid var(--border-gold);
        }
        .badge-pill.red{background:rgba(211,47,47,.18);color:#FF8A80;border-color:rgba(211,47,47,.4)}
        .page-hero h1{
            font-size:2.5rem;font-weight:800;line-height:1.22;margin-bottom:18px;
        }
        .page-hero h1 span{color:var(--gold)}
        .hero-lead{color:var(--mint);font-size:1.06rem;margin-bottom:16px;max-width:560px}
        .hero-eligibility{
            border-left:3px solid var(--gold);padding:12px 18px;margin:20px 0 26px;
            background:rgba(255,215,0,.06);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
            color:var(--mint);font-size:.95rem;
        }
        .hero-eligibility strong{color:var(--gold-soft)}
        .hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
        .btn-primary{
            display:inline-flex;align-items:center;gap:10px;
            background:linear-gradient(135deg,var(--gold) 0%,#E6B800 100%);
            color:#0A2E1C;font-weight:800;font-size:1.05rem;
            padding:15px 32px;border-radius:999px;box-shadow:var(--shadow-gold);
        }
        .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,215,0,.45)}
        .btn-primary:active{transform:translateY(1px) scale(.98)}
        .btn-outline{
            display:inline-flex;align-items:center;gap:10px;
            border:1.5px solid var(--border-gold);color:var(--gold);
            font-weight:700;padding:14px 28px;border-radius:999px;font-size:1rem;
        }
        .btn-outline:hover{background:rgba(255,215,0,.1);border-color:var(--gold)}
        .hero-visual{position:relative}
        .hero-visual img{
            border-radius:var(--radius);border:1px solid var(--border-gold);
            box-shadow:var(--shadow-card);width:100%;
        }
        .hero-stat-float{
            position:absolute;left:-18px;bottom:-22px;
            background:rgba(10,46,28,.95);border:1px solid var(--border-gold);
            border-radius:var(--radius-sm);padding:14px 20px;box-shadow:var(--shadow-card);
            display:flex;gap:22px;
        }
        .hero-stat-float .hs-item strong{display:block;color:var(--gold);font-size:1.25rem;font-weight:800}
        .hero-stat-float .hs-item small{color:var(--mint-dim);font-size:.78rem}

        /* ===== Sections base ===== */
        section{padding:74px 0}
        .section-head{max-width:640px;margin-bottom:44px}
        .section-tag{
            display:inline-flex;align-items:center;gap:8px;
            color:var(--gold);font-weight:700;font-size:.85rem;letter-spacing:.5px;
            text-transform:uppercase;margin-bottom:12px;
        }
        .section-tag::before{content:'';width:26px;height:2px;background:var(--gold);display:inline-block}
        .section-head h2{font-size:1.9rem;font-weight:800;line-height:1.3;margin-bottom:12px}
        .section-head p{color:var(--mint-dim);font-size:1rem}

        /* ===== Basics (asymmetric) ===== */
        .basics-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
        .basics-media img{border-radius:var(--radius);border:1px solid var(--border-soft);box-shadow:var(--shadow-card)}
        .basics-list{display:flex;flex-direction:column;gap:26px}
        .basic-item{display:flex;gap:18px}
        .basic-icon{
            flex:0 0 52px;height:52px;border-radius:var(--radius-sm);
            background:rgba(255,215,0,.1);border:1px solid var(--border-gold);
            display:flex;align-items:center;justify-content:center;
            color:var(--gold);font-size:1.25rem;
        }
        .basic-item h3{font-size:1.12rem;font-weight:700;margin-bottom:6px}
        .basic-item p{color:var(--mint-dim);font-size:.95rem}

        /* ===== Steps ===== */
        .steps-section{background:rgba(0,0,0,.18);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
        .steps-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
        .step-card{
            position:relative;padding:28px 24px 24px;
            background:var(--bg-panel);border:1px solid var(--border-soft);
            border-radius:var(--radius);transition:var(--transition);
        }
        .step-card:hover{border-color:var(--border-gold);transform:translateY(-4px);box-shadow:var(--shadow-card)}
        .step-num{
            width:44px;height:44px;border-radius:50%;
            background:linear-gradient(135deg,var(--gold),#E6B800);color:#0A2E1C;
            display:flex;align-items:center;justify-content:center;
            font-weight:800;font-size:1.15rem;margin-bottom:16px;
            box-shadow:var(--shadow-gold);
        }
        .step-card h3{font-size:1.08rem;font-weight:700;margin-bottom:8px}
        .step-card p{color:var(--mint-dim);font-size:.92rem}
        .step-card .step-note{
            display:inline-block;margin-top:12px;font-size:.8rem;font-weight:700;
            color:var(--gold-soft);background:rgba(255,215,0,.08);
            padding:4px 10px;border-radius:6px;
        }
        .pay-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;align-items:center}
        .pay-row span{color:var(--mint-dim);font-size:.9rem;font-weight:600;margin-right:4px}
        .pay-badge{
            display:inline-flex;align-items:center;gap:8px;
            background:rgba(255,255,255,.06);border:1px solid var(--border-soft);
            padding:9px 16px;border-radius:999px;font-size:.88rem;font-weight:700;color:var(--mint);
        }
        .pay-badge i{color:var(--gold)}

        /* ===== Tips / Strategy ===== */
        .tips-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
        .tip-block{padding:22px 0;border-bottom:1px solid var(--border-soft)}
        .tip-block:first-child{padding-top:0}
        .tip-block:last-child{border-bottom:none}
        .tip-block h3{display:flex;align-items:center;gap:12px;font-size:1.12rem;font-weight:700;margin-bottom:8px}
        .tip-block h3 i{color:var(--gold);font-size:1rem}
        .tip-block p{color:var(--mint-dim);font-size:.95rem}
        .rtp-table{
            background:var(--bg-panel);border:1px solid var(--border-gold);
            border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);
        }
        .rtp-table .rt-head{
            background:rgba(255,215,0,.1);padding:16px 22px;
            display:flex;align-items:center;justify-content:space-between;gap:10px;
            border-bottom:1px solid var(--border-gold);
        }
        .rtp-table .rt-head h3{font-size:1.02rem;font-weight:800;color:var(--gold)}
        .rt-tag{font-size:.75rem;font-weight:800;background:var(--red);color:#fff;padding:4px 10px;border-radius:6px}
        .rt-row{
            display:flex;align-items:center;justify-content:space-between;
            padding:14px 22px;border-bottom:1px solid var(--border-soft);gap:12px;
        }
        .rt-row:last-child{border-bottom:none}
        .rt-row:hover{background:rgba(255,215,0,.04)}
        .rt-name{display:flex;align-items:center;gap:12px;font-weight:600;font-size:.95rem}
        .rt-name i{color:var(--gold);font-size:.85rem}
        .rt-val{font-weight:800;color:var(--gold);font-size:.95rem}
        .rt-bar{flex:1;max-width:130px;height:6px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
        .rt-bar em{display:block;height:100%;background:linear-gradient(90deg,#E6B800,var(--gold));border-radius:99px}
        .rt-foot{padding:14px 22px;font-size:.82rem;color:var(--mint-dim);background:rgba(0,0,0,.15)}

        /* ===== Bankroll ===== */
        .bankroll-section{background:rgba(0,0,0,.18);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
        .bankroll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
        .bank-card{
            background:var(--bg-panel);border:1px solid var(--border-soft);
            border-radius:var(--radius);padding:28px 24px;transition:var(--transition);
        }
        .bank-card:hover{border-color:var(--border-gold);transform:translateY(-4px);box-shadow:var(--shadow-card)}
        .bank-card .bc-amount{font-size:1.55rem;font-weight:800;color:var(--gold);margin-bottom:4px}
        .bank-card .bc-label{font-size:.85rem;font-weight:700;color:var(--mint);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}
        .bank-card ul li{
            display:flex;gap:10px;color:var(--mint-dim);font-size:.92rem;
            padding:7px 0;border-bottom:1px dashed var(--border-soft);
        }
        .bank-card ul li:last-child{border-bottom:none}
        .bank-card ul li i{color:var(--gold);margin-top:4px;font-size:.8rem}

        /* ===== Mistakes ===== */
        .mistake-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
        .mistake-item{
            display:flex;gap:16px;padding:22px;
            background:rgba(211,47,47,.06);border:1px solid rgba(211,47,47,.25);
            border-radius:var(--radius);transition:var(--transition);
        }
        .mistake-item:hover{border-color:rgba(211,47,47,.5)}
        .mistake-item i{flex:0 0 auto;color:#FF8A80;font-size:1.2rem;margin-top:3px}
        .mistake-item h3{font-size:1.02rem;font-weight:700;margin-bottom:6px}
        .mistake-item p{color:var(--mint-dim);font-size:.92rem}

        /* ===== FAQ ===== */
        .faq-section{background:rgba(0,0,0,.18);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
        .faq-list{max-width:820px}
        .faq-item{border:1px solid var(--border-soft);border-radius:var(--radius-sm);margin-bottom:14px;background:var(--bg-panel);overflow:hidden}
        .faq-item[open]{border-color:var(--border-gold)}
        .faq-item summary{
            list-style:none;cursor:pointer;padding:18px 22px;
            display:flex;align-items:center;justify-content:space-between;gap:14px;
            font-weight:700;font-size:1rem;
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary i{color:var(--gold);transition:var(--transition);flex:0 0 auto}
        .faq-item[open] summary i{transform:rotate(180deg)}
        .faq-item .faq-body{padding:0 22px 20px;color:var(--mint-dim);font-size:.95rem}

        /* ===== CTA ===== */
        .cta-section{
            text-align:center;
            background:linear-gradient(rgba(10,46,28,.88),rgba(10,46,28,.94)),url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;
            border-top:1px solid var(--border-gold);
        }
        .cta-section h2{font-size:2rem;font-weight:800;margin-bottom:14px}
        .cta-section h2 span{color:var(--gold)}
        .cta-section p{color:var(--mint);max-width:600px;margin:0 auto 30px}
        .cta-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin-top:30px}
        .cta-trust span{display:inline-flex;align-items:center;gap:8px;color:var(--mint-dim);font-size:.88rem;font-weight:600}
        .cta-trust i{color:var(--gold)}

        /* ===== FAB ===== */
        .fab{
            position:fixed;left:16px;bottom:96px;z-index:1100;
            width:60px;height:60px;border-radius:50%;
            background:radial-gradient(circle at 32% 28%,#1E5236,#0A2E1C 75%);
            border:3px solid var(--gold);
            display:flex;align-items:center;justify-content:center;
            color:var(--gold);font-size:1.45rem;
            box-shadow:0 4px 20px rgba(255,215,0,.3);
            opacity:.75;transition:var(--transition);
            animation:fabFloat 3s ease-in-out infinite;
        }
        .fab:hover{opacity:1;transform:scale(1.1)}
        .fab:hover i{transform:rotate(360deg);transition:transform .5s ease}
        .fab:active{transform:scale(.95) translateY(2px)}
        .fab .fab-dot{
            position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;
            background:var(--red);border:2px solid #0A2E1C;animation:blink 1.4s infinite;
        }
        @keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
        @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

        /* ===== Footer ===== */
        footer{background:#071F13;border-top:2px solid var(--border-gold);padding-top:60px}
        .footer-content{
            max-width:var(--container);margin:0 auto;padding:0 20px 44px;
            display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
        }
        .footer-logo{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:800;color:var(--gold);margin-bottom:16px}
        .footer-logo i{filter:drop-shadow(0 0 6px rgba(255,215,0,.5))}
        .footer-text{color:var(--mint-dim);font-size:.92rem}
        .footer-section h3{
            color:var(--gold);font-size:1rem;font-weight:800;margin-bottom:16px;
            text-transform:uppercase;letter-spacing:.5px;
        }
        .footer-section ul li{margin-bottom:10px}
        .footer-section ul li a{color:var(--mint-dim);font-size:.92rem;display:inline-flex;align-items:center;gap:8px}
        .footer-section ul li a:hover{color:var(--gold);padding-left:4px}
        .footer-section ul li a i{color:var(--gold);font-size:.85rem}
        .footer-bottom{
            border-top:1px solid var(--border-soft);padding:24px 20px;
            max-width:var(--container);margin:0 auto;
            display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
        }
        .compliance-badges{display:flex;flex-wrap:wrap;gap:12px}
        .compliance-badge{
            display:inline-flex;align-items:center;gap:8px;
            background:rgba(255,215,0,.08);border:1px solid var(--border-gold);
            color:var(--gold-soft);font-size:.8rem;font-weight:700;
            padding:6px 14px;border-radius:999px;
        }
        .footer-bottom p{color:var(--mint-dim);font-size:.85rem}

        /* ===== Responsive ===== */
        @media (max-width:1024px){
            .hero-grid{grid-template-columns:1fr;gap:40px}
            .hero-visual{max-width:560px}
            .steps-flow{grid-template-columns:repeat(2,1fr)}
            .basics-grid,.tips-wrap{grid-template-columns:1fr;gap:36px}
            .bankroll-grid{grid-template-columns:repeat(3,1fr)}
            .footer-content{grid-template-columns:1fr 1fr}
        }
        @media (max-width:768px){
            .mobile-toggle{display:block}
            .nav-links{
                position:fixed;top:68px;left:0;right:0;
                background:rgba(10,46,28,.98);border-bottom:1px solid var(--border-gold);
                flex-direction:column;align-items:stretch;gap:0;
                padding:12px 20px 20px;display:none;
            }
            .nav-links.open{display:flex}
            .nav-links li a{padding:13px 12px;border-radius:8px}
            .nav-actions{margin:12px 0 0;flex-direction:row}
            .btn-signup,.btn-login{flex:1;text-align:center;justify-content:center;display:inline-flex}
            .page-hero{padding:120px 0 56px}
            .page-hero h1{font-size:1.85rem}
            .bankroll-grid{grid-template-columns:1fr}
            .mistake-grid{grid-template-columns:1fr}
            section{padding:56px 0}
            .hero-stat-float{position:static;margin-top:18px;flex-wrap:wrap;gap:16px}
        }
        @media (max-width:520px){
            .page-hero h1{font-size:1.55rem}
            .section-head h2{font-size:1.45rem}
            .steps-flow{grid-template-columns:1fr}
            .cta-section h2{font-size:1.5rem}
            .footer-content{grid-template-columns:1fr}
            .footer-bottom{flex-direction:column;text-align:center;justify-content:center}
            .compliance-badges{justify-content:center}
            .hero-cta-row .btn-primary,.hero-cta-row .btn-outline{width:100%;justify-content:center}
        }
        a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* roulang page: category3 */
:root{
  --bg-1:#0A2E1C; --bg-2:#123E25; --panel:#0f3a24; --panel-2:#154a2e;
  --gold:#FFD700; --gold-2:#f0c040; --red:#D32F2F; --red-2:#ff5252;
  --text:#FFFFFF; --mint:#D1F2EB; --muted:#9dc7b4; --border:rgba(255,215,0,.22);
  --radius:16px; --radius-sm:10px; --shadow:0 12px 32px rgba(0,0,0,.42);
  --shadow-gold:0 6px 24px rgba(255,215,0,.22);
  --sp:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg-1);color:var(--text);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none}
ul{list-style:none}
.container{width:min(1200px,92%);margin:0 auto}
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:5px 12px;border-radius:999px}

/* header */
header{position:sticky;top:0;z-index:100;background:rgba(10,46,28,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
nav{width:min(1200px,92%);margin:0 auto;display:flex;align-items:center;gap:24px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--gold)}
.logo i{font-size:1.4rem}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links>li>a{padding:9px 15px;border-radius:8px;font-weight:600;font-size:.95rem;color:var(--mint);transition:.2s}
.nav-links>li>a:hover{color:var(--gold);background:rgba(255,215,0,.08)}
.nav-links>li>a.active{color:var(--gold);background:rgba(255,215,0,.12)}
.nav-actions{display:flex;align-items:center;gap:12px;margin-left:14px}
.btn-login{font-weight:700;color:var(--text);font-size:.92rem}
.btn-login:hover{color:var(--gold)}
.btn-signup{background:linear-gradient(135deg,var(--red),var(--red-2));color:#fff;padding:10px 20px;border-radius:999px;font-weight:800;font-size:.92rem;box-shadow:0 4px 16px rgba(211,47,47,.4);transition:.2s}
.btn-signup:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(211,47,47,.55)}
.mobile-toggle{display:none;background:transparent;color:var(--gold);font-size:1.5rem}

/* hero flash sale */
.flash{position:relative;padding:64px 0 48px;background:linear-gradient(rgba(10,46,28,.86),rgba(10,46,28,.94)),url('/assets/images/backpic/back-2.jpg') center/cover fixed;border-bottom:1px solid var(--border)}
.flash-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.flash-copy .tag{background:var(--red);color:#fff;margin-bottom:16px}
.flash h1{font-size:2.6rem;line-height:1.15;font-weight:900;margin-bottom:16px}
.flash h1 span{color:var(--gold)}
.flash-copy p{color:var(--mint);font-size:1.05rem;max-width:520px;margin-bottom:26px}
.countdown{display:flex;gap:12px;margin-bottom:28px}
.cd-box{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 16px;min-width:70px;text-align:center}
.cd-box strong{display:block;font-size:1.8rem;font-weight:900;color:var(--gold);line-height:1}
.cd-box small{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.flash-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#10321f;padding:14px 30px;border-radius:999px;font-weight:800;font-size:1rem;box-shadow:var(--shadow-gold);transition:.2s;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover{transform:translateY(-3px)}
.btn-ghost{border:1.5px solid var(--gold);color:var(--gold);padding:13px 26px;border-radius:999px;font-weight:700;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.btn-ghost:hover{background:rgba(255,215,0,.1)}
/* featured promo card */
.promo-featured{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--gold);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.promo-featured img{height:180px;object-fit:cover;width:100%}
.pf-body{padding:22px}
.pf-body .tag{background:var(--gold);color:#10321f;margin-bottom:12px}
.pf-body h3{font-size:1.5rem;font-weight:800;margin-bottom:8px}
.pf-body .amt{font-size:2.2rem;font-weight:900;color:var(--gold);line-height:1;margin-bottom:6px}
.pf-body p{color:var(--mint);font-size:.92rem;margin-bottom:16px}
.pf-meta{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px dashed var(--border);font-size:.85rem;color:var(--muted)}

/* section base */
section{padding:60px 0}
.sec-head{margin-bottom:36px;max-width:680px}
.sec-head .tag{background:rgba(255,215,0,.14);color:var(--gold);margin-bottom:12px}
.sec-head h2{font-size:2rem;font-weight:800;margin-bottom:10px}
.sec-head p{color:var(--mint)}
.alt{background:var(--bg-2)}

/* promo grid */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.promo-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:.25s;position:relative}
.promo-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow-gold)}
.promo-card .thumb{position:relative;height:150px;overflow:hidden}
.promo-card .thumb img{height:100%;width:100%;object-fit:cover;transition:.4s}
.promo-card:hover .thumb img{transform:scale(1.06)}
.promo-card .hot{position:absolute;top:12px;left:12px;background:var(--red);color:#fff}
.promo-card .pc-body{padding:20px}
.promo-card .pc-body h3{font-size:1.15rem;font-weight:800;margin-bottom:8px}
.promo-card .pc-body .pct{font-size:1.6rem;font-weight:900;color:var(--gold);margin-bottom:8px}
.promo-card .pc-body p{color:var(--muted);font-size:.9rem;margin-bottom:16px}
.promo-card .pc-link{color:var(--gold);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.promo-card .pc-link:hover{gap:10px}

/* how it works steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:28px 22px;position:relative}
.step .num{counter-increment:step;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#10321f;font-weight:900;font-size:1.2rem;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step .num::before{content:counter(step)}
.step h4{font-size:1.05rem;font-weight:800;margin-bottom:8px}
.step p{color:var(--mint);font-size:.9rem}

/* value blocks */
.value-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.value{display:flex;gap:16px;align-items:flex-start;padding:22px;background:var(--panel);border-radius:var(--radius);border:1px solid var(--border)}
.value i{color:var(--gold);font-size:1.6rem;flex-shrink:0;margin-top:4px}
.value h4{font-size:1.05rem;font-weight:800;margin-bottom:6px}
.value p{color:var(--muted);font-size:.9rem}

/* payment badges */
.pay-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.pay-badge{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 18px;font-weight:700;font-size:.9rem}
.pay-badge i{color:var(--gold)}

/* table */
.tier-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--border)}
th{background:var(--panel-2);color:var(--gold);font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}
td{color:var(--mint);font-size:.92rem}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,215,0,.05)}
td .hl{color:var(--gold);font-weight:800}

/* FAQ */
.faq{max-width:820px}
.faq-item{border:1px solid var(--border);border-radius:12px;margin-bottom:14px;overflow:hidden;background:var(--panel)}
.faq-q{width:100%;text-align:left;background:transparent;color:var(--text);padding:18px 22px;font-size:1rem;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q i{color:var(--gold);transition:.3s}
.faq-item.open .faq-q i{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 22px}
.faq-item.open .faq-a{max-height:280px;padding:0 22px 20px}
.faq-a p{color:var(--mint);font-size:.92rem}

/* CTA */
.cta{text-align:center;background:linear-gradient(rgba(139,0,0,.5),rgba(10,46,28,.9)),url('/assets/images/backpic/back-3.jpg') center/cover;border-radius:24px;padding:56px 24px;border:1px solid var(--gold);margin:0 auto}
.cta h2{font-size:2.1rem;font-weight:900;margin-bottom:12px}
.cta h2 span{color:var(--gold)}
.cta p{color:var(--mint);max-width:560px;margin:0 auto 26px}

/* footer */
footer{background:#08241614;background-color:#071c11;border-top:1px solid var(--border);padding:56px 0 24px;margin-top:20px}
.footer-content{width:min(1200px,92%);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
.footer-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--gold);margin-bottom:14px}
.footer-text{color:var(--muted);font-size:.9rem}
.footer-section h3{font-size:1rem;color:var(--gold);margin-bottom:16px}
.footer-section ul li{margin-bottom:10px}
.footer-section ul li a{color:var(--mint);font-size:.9rem;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.footer-section ul li a:hover{color:var(--gold)}
.footer-bottom{width:min(1200px,92%);margin:32px auto 0;padding-top:24px;border-top:1px solid var(--border);text-align:center}
.compliance-badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.compliance-badge{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--mint);background:var(--panel);padding:8px 14px;border-radius:8px;border:1px solid var(--border)}
.compliance-badge i{color:var(--gold)}
.footer-bottom p{color:var(--muted);font-size:.82rem}

/* FAB */
.fab{position:fixed;left:16px;bottom:96px;z-index:90;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1c1c1c,#0a0a0a);border:3px solid var(--gold);color:var(--gold);font-size:1.4rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(255,215,0,.35);opacity:.85;animation:float 3s ease-in-out infinite;transition:.25s}
.fab:hover{opacity:1;transform:scale(1.1)}
.fab:hover i{animation:spin .6s ease}
.fab:active{transform:scale(.95) translateY(2px)}
.fab .dot{position:absolute;top:-2px;right:-2px;width:14px;height:14px;background:var(--red-2);border-radius:50%;border:2px solid #0a0a0a;animation:blink 1.2s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

@media(max-width:1024px){
  .flash h1{font-size:2.1rem}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer-content{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links{position:fixed;top:70px;left:0;right:0;flex-direction:column;background:var(--bg-2);padding:16px;gap:8px;align-items:stretch;max-height:0;overflow:hidden;transition:max-height .3s;border-bottom:1px solid var(--border)}
  .nav-links.open{max-height:420px}
  .nav-links>li>a{display:block}
  .nav-actions{margin-left:0;justify-content:center;padding-top:8px}
  .mobile-toggle{display:block;margin-left:auto}
  .logo{margin-right:auto}
  nav{gap:12px}
  .flash-inner{grid-template-columns:1fr}
  .flash{padding:44px 0 40px}
}
@media(max-width:520px){
  .flash h1{font-size:1.75rem}
  .steps{grid-template-columns:1fr}
  .footer-content{grid-template-columns:1fr}
  .cd-box{min-width:60px;padding:10px 12px}
  .cd-box strong{font-size:1.4rem}
  .sec-head h2{font-size:1.6rem}
}