:root {
            --bg: #030712;
            --surface: rgba(255, 255, 255, 0.03);
            --border: rgba(255, 255, 255, 0.08);
            --brand: #25D366;
            --brand-glow: rgba(37, 211, 102, 0.4);
        }

        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: var(--bg);
            color: #eef5f1;
            /* Animated subtle noise/grid background */
            background-image:
                radial-gradient(circle at 15% 50%, rgba(37,211,102,0.05), transparent 25vw),
                radial-gradient(circle at 85% 30%, rgba(255,0,0,0.035), transparent 25vw),
                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
            background-position: 0 0, 0 0, -1px -1px, -1px -1px;
            overflow-x: hidden;
        }

        /* Glassmorphism Spotlight Cards */
        .bento-card {
            background: var(--surface);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--border);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s;
        }

        .bento-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), var(--brand-glow), transparent 40%);
            opacity: 0;
            transition: opacity 0.5s;
            pointer-events: none;
            z-index: 0;
        }

        .bento-card:hover::before {
            opacity: 0.15;
        }

        .bento-card:hover {
            border-color: rgba(37, 211, 102, 0.3);
            transform: translateY(-2px);
        }

        .bento-content {
            position: relative;
            z-index: 1;
        }

        /* Gradient Text */
        .text-gradient {
            background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .text-brand-gradient {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Native Details/Summary FAQ styling */
        details {
            border-bottom: 1px solid var(--border);
        }
        details > summary {
            list-style: none;
            cursor: pointer;
        }
        details > summary::-webkit-details-marker {
            display: none;
        }
        .faq-icon {
            transition: transform 0.3s ease;
        }
        details[open] .faq-icon {
            transform: rotate(45deg);
            color: var(--brand);
        }
        .faq-content {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.3s ease-out;
        }
        details[open] .faq-content {
            grid-template-rows: 1fr;
        }
        .faq-inner {
            overflow: hidden;
        }

        /* Canada flag line: red over white */
        .id-line {
            height: 4px;
            background: linear-gradient(to bottom, #ff0000 0 50%, #ffffff 50% 100%);
            box-shadow: 0 0 10px rgba(255,255,255,0.1);
        }

        /* Mobile hero optimization */
        @media (max-width: 380px) {
            header h1 {
                font-size: 25px;
                line-height: 1.1;
            }
        }