:root {
            --primary: #071c34;
            --secondary: #0d3b66;
            --gold: #c8a96b;
            --gold-soft: rgba(200,169,107,0.16);
            --light: #f8fafc;
            --dark: #0f172a;
            --bg: #f5f2ec;
            --surface: rgba(255,255,255,0.8);
            --surface-strong: rgba(255,255,255,0.94);
            --text: #142033;
            --muted: #5f6b7a;
            --border: rgba(15, 23, 42, 0.08);
            --shadow-sm: 0 10px 30px rgba(7, 28, 52, 0.06);
            --shadow-md: 0 24px 60px rgba(7, 28, 52, 0.1);
            --shadow-lg: 0 35px 80px rgba(7, 28, 52, 0.16);
        }
        [data-theme="dark"] {
            --bg: #08111f;
            --surface: rgba(15, 23, 42, 0.72);
            --surface-strong: rgba(15, 23, 42, 0.9);
            --text: #e8edf5;
            --muted: #b2bed0;
            --border: rgba(255, 255, 255, 0.1);
            --light: #0f172a;
            --dark: #e2e8f0;
            --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.18);
            --shadow-md: 0 24px 60px rgba(0, 0, 0, 0.28);
            --shadow-lg: 0 35px 80px rgba(0, 0, 0, 0.4);
        }
        * { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
        html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
        body {
            font-family: 'Satoshi', 'Inter', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(200,169,107,0.12), transparent 25%),
                radial-gradient(circle at top right, rgba(13,59,102,0.08), transparent 30%),
                var(--bg);
            color: var(--text);
            overflow-x: hidden;
            line-height: 1.65;
        }
        h1, h2, h3, .brand { font-family: 'Zodiak', 'Playfair Display', serif; }
        p { color: var(--muted); }
        a { text-decoration: none; color: inherit; }
        img { max-width: 100%; display: block; }
        .skip-link {
            position: absolute; left: -9999px; top: auto;
        }
        .skip-link:focus {
            left: 16px; top: 16px; z-index: 999;
            background: var(--primary); color: white; padding: 12px 16px; border-radius: 999px;
        }
        :focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 3px;
            border-radius: 10px;
        }
        .hero-overlay {
            background: linear-gradient(110deg, rgba(7,28,52,0.94), rgba(7,28,52,0.72) 48%, rgba(7,28,52,0.4));
        }
        .glass {
            background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
            backdrop-filter: blur(18px);
            border: 1px solid rgba(255,255,255,0.16);
            box-shadow: var(--shadow-lg);
        }
        .gold-line {
            width: 84px; height: 3px; background: linear-gradient(90deg, var(--gold), rgba(200,169,107,0.35)); margin-top: 16px; border-radius: 999px;
        }
        .hero-heading {
            max-width: 13ch;
        }
        .hero-heading span {
            display: block;
        }
        .hero-heading-kicker,
        .hero-heading-sub {
            color: rgba(255,255,255,0.94);
        }
        .hero-heading-main {
            width: max-content;
            max-width: 100%;
            margin: 0.02em 0 0.08em;
            color: transparent;
            background: linear-gradient(95deg, #e8d99a 0%, #fdf9ef 32%, #d2ba7c 58%, #b08c45 100%);
            background-clip: text;
            -webkit-background-clip: text;
            text-shadow: 0 18px 38px rgba(0,0,0,0.18);
        }
        .hero-heading-sub {
            font-size: 0.62em;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.25;
        }
        .metallic-heading {
            color: transparent;
            background: linear-gradient(95deg, #e8d99a 0%, #fdf9ef 22%, #d2ba7c 45%, #f7edd7 65%, #b08c45 100%);
            background-clip: text;
            -webkit-background-clip: text;
            position: relative;
            overflow: hidden;
            text-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }
        .metallic-heading::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0) 75%);
            transform: translateX(-100%) skewX(-15deg);
            animation: shine-slide 3.5s ease-in-out infinite;
            mix-blend-mode: screen;
            pointer-events: none;
        }
        @keyframes shine-slide {
            0% { transform: translateX(-100%) skewX(-15deg); }
            50% { transform: translateX(120%) skewX(-15deg); }
            100% { transform: translateX(120%) skewX(-15deg); }
        }
        /* Keep it minimal: plain gold text for small hero words */
        
        
        .service-card, .insight-card, .trust-card, .city-card {
            transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
            background: var(--surface-strong);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
        }
        .service-card:hover, .insight-card:hover, .trust-card:hover, .city-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-md);
            border-color: rgba(200,169,107,0.35);
        }
        .fade-up { opacity: 0; transform: translateY(40px); transition: all 0.8s ease; }
        .fade-up.show { opacity: 1; transform: translateY(0); }
        .hero-bg { animation: zoomBg 18s ease-in-out infinite alternate; }
        @keyframes zoomBg { from { transform: scale(1); } to { transform: scale(1.08); } }
        .stats-number { color: var(--gold); }
        .menu-panel { transition: all 0.4s ease; }
        .nav-link { 
            position: relative; 
            transition: color 0.3s ease;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background: linear-gradient(90deg, var(--gold), rgba(200,169,107,0.35));
            transition: width 0.4s ease;
        }
        .nav-link:hover { 
            color: var(--gold); 
        }
        .nav-link:hover::after {
            width: 100%;
        }
        .services-menu {
            position: relative;
            display: inline-flex;
            align-items: center;
            min-height: auto;
        }
        .services-dropdown {
            position: absolute;
            top: 100%;
            left: 50%;
            min-width: 520px;
            max-width: 620px;
            padding: 18px;
            border: 1px solid var(--border);
            border-radius: 22px;
            background: var(--surface-strong);
            box-shadow: var(--shadow-md);
            transform: translate(-50%, 12px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
        }
        .services-dropdown-columns {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem 1.25rem;
        }
         .services-dropdown:not(.services-dropdown-columns) {
            min-width: 320px;
            max-width: 420px;
        }
        .services-dropdown-group {
            display: grid;
            gap: 0.5rem;
        }
        .services-dropdown-group h3 {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--primary);
        }
         .services-dropdown-group a {
            display: block;
            padding: 10px 12px;
            border-radius: 14px;
            color: var(--text);
            font-size: 0.95rem;
            font-weight: 600;
            line-height: 1.3;
            transition: background-color 0.2s ease, color 0.2s ease;
            white-space: normal;
        }
        .services-dropdown-group a:hover,
        .services-dropdown-group a:focus-visible {
            background: var(--gold-soft);
            color: var(--primary);
        }
        .services-menu:hover .services-dropdown,
        .services-menu:focus-within .services-dropdown {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(-50%, 0);
        }
        .btn-gold {
            background: linear-gradient(135deg, var(--gold), #b38f4d);
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 12px 30px rgba(200,169,107,0.28);
        }
        .btn-gold:hover { transform: translateY(-2px); opacity: 0.96; }
        .btn-outline {
            border: 1px solid rgba(255,255,255,0.34);
            transition: all 0.3s ease;
            background: rgba(255,255,255,0.04);
        }
        .btn-outline:hover { background: white; color: var(--primary); }
        
        /* UPDATED PORTAL BUTTON WITH GOLD SHINE ANIMATION */
        .btn-portal {
            position: relative;
            z-index: 1;
            /* Dual background trick to animate the border independently */
            background: 
                linear-gradient(var(--surface-strong), var(--surface-strong)) padding-box, 
                linear-gradient(90deg, var(--gold), #fff, var(--gold), #fff, var(--gold)) border-box;
            background-size: 200% 100%;
            border: 2px solid transparent;
            color: var(--primary);
            border-radius: 999px;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-sm);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            /* The shine sweep animation */
            animation: border-shine-sweep 4s linear infinite;
        }
        
        @keyframes border-shine-sweep {
            0% { background-position: 0% 0%; }
            100% { background-position: 200% 0%; }
        }

        .btn-portal:hover { 
            transform: translateY(-2px); 
            color: var(--secondary);
            box-shadow: 0 10px 25px rgba(200, 169, 107, 0.3);
        }
        .btn-portal, .btn-outline, .btn-gold {
            white-space: nowrap;
        }

        [data-theme="dark"] .btn-portal {
            background: 
                linear-gradient(var(--surface-strong), var(--surface-strong)) padding-box, 
                linear-gradient(90deg, var(--gold), #fff, var(--gold), #fff, var(--gold)) border-box;
            background-size: 200% 100%;
            color: #f8fafc;
        }

        /* NEW ANIMATED MENU STYLES */
        .brand-logo-link {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            max-width: 100%;
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }
        .brand-logo {
            display: block;
            height: auto;
            width: auto;
            max-height: 3rem;
            object-fit: contain;
        }
        .brand-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            min-width: 3rem;
            margin-right: 0;
            border-radius: 9999px;
            background: white;
            object-fit: contain;
            padding: 0.4rem;
            box-shadow: 0 6px 18px rgba(7, 28, 52, 0.12);
        }
        #mobileMenu {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        }
        #mobileMenu.menu-open {
            max-height: 400px;
            opacity: 1;
        }

        .section-space { padding-top: 110px; padding-bottom: 110px; }
        .gradient-bg { background: linear-gradient(135deg, #071c34 0%, #0d3b66 100%); }
        header {
            background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
            backdrop-filter: blur(14px);
            border-bottom: 0 !important;
        }
        .section-panel {
            background: var(--surface);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            border-radius: 32px;
        }
        .calc-input {
            width: 100%;
            border: 1px solid rgb(203, 213, 225);
            border-radius: 12px;
            padding: 11px 14px;
            color: #0f172a;
            background: #ffffff;
            outline: none;
        }
        .calc-input:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(200,169,107,0.16);
        }
        .calc-result {
            margin-top: 24px;
            border-radius: 20px;
            border: 1px solid rgba(200,169,107,0.24);
            background: rgba(200,169,107,0.1);
            padding: 22px;
        }
        .calc-result p {
            color: var(--muted);
            font-size: 13px;
            margin-bottom: 6px;
        }
        .calc-result strong {
            color: var(--primary);
            font-size: 2rem;
            line-height: 1.1;
        }
        .hero-stat {
            border-top: 1px solid rgba(255,255,255,0.16);
        }
        .icon-shell {
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 10px 20px rgba(7,28,52,0.08);
        }
        .footer-link:hover { color: white; }
        .theme-toggle {
            width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--border);
            display: inline-flex; align-items: center; justify-content: center; background: var(--surface-strong);
            box-shadow: var(--shadow-sm); color: var(--text);
        }
        @media (max-width: 1024px) {
            .section-space { padding-top: 88px; padding-bottom: 88px; }
        }
        @media (max-width: 768px) {
            .section-space { padding-top: 72px; padding-bottom: 72px; }
            header {
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right);
            }
            header .h-20 { height: 72px; }
            header .px-6 { padding-left: 18px; padding-right: 18px; }
            header .gap-4 { gap: 12px; }
            header .brand {
                max-width: 46vw;
                font-size: clamp(0.9rem, 4vw, 1.15rem);
                line-height: 1.08;
            }
            header .brand + p {
                max-width: 46vw;
                font-size: 0.58rem;
                letter-spacing: 1.7px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            #menuBtn,
            #mobileMenu a,
            .btn-portal,
            .btn-gold,
            .btn-outline {
                min-height: 44px;
            }
            #mobileMenu {
                max-height: 0;
                overflow-y: auto;
                overscroll-behavior: contain;
            }
            #mobileMenu.menu-open {
                max-height: min(80svh, 560px);
            }
            #mobileMenu .px-6 {
                padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
            }
            #home {
                min-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
                padding-top: 0;
                padding-bottom: 0;
            }
            #home .grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            #home .py-32 {
                padding-top: 4.5rem;
                padding-bottom: 3rem;
            }
            #home .text-white.fade-up {
                margin-top: 1.25rem;
            }
            .shine-text {
                gap: 0.75rem;
                margin-top: 0.75rem;
            }
            #home p {
                font-size: 1rem;
                line-height: 1.7;
            }
            #home .glass {
                padding: 1.5rem;
                border-radius: 24px;
            }
            #home .glass h3 {
                font-size: 1.25rem;
            }
            #home .glass {
                margin-top: 1.5rem;
            }
            #home .flex.flex-wrap {
                gap: 0.75rem;
            }
            .btn-gold,
            .btn-outline {
                width: 100%;
                justify-content: center;
                text-align: center;
            }
            .service-card,
            .insight-card .p-8,
            .faq-item {
                padding: 1.5rem;
            }
            .section-panel {
                border-radius: 24px;
            }
            .mobile-safe-fab {
                right: calc(1rem + env(safe-area-inset-right));
                bottom: calc(1rem + env(safe-area-inset-bottom));
            }
        }
        @media (max-width: 480px) {
            .section-space { padding-top: 64px; padding-bottom: 64px; }
            header .brand { max-width: 42vw; }
            header .brand + p { display: none; }
            .btn-portal {
                padding-left: 0.85rem !important;
                padding-right: 0.85rem !important;
                font-size: 0.72rem !important;
                white-space: nowrap;
            }
            #home h1 {
                max-width: 10ch;
                margin-bottom: 1.25rem;
            }
            #home .py-32 {
                padding-top: 5.5rem;
                padding-bottom: 3.5rem;
            }
            #home .text-white.fade-up {
                margin-top: 1.5rem;
            }
            .shine-text {
                margin-top: 1rem;
            }
            #home .flex.flex-wrap {
                gap: 0.75rem;
            }
            #home .btn-gold,
            #home .btn-outline,
            #contact .btn-gold,
            #contact .btn-outline {
                width: 100%;
                justify-content: center;
                text-align: center;
                padding-left: 1.25rem;
                padding-right: 1.25rem;
            }
            .faq-item summary {
                gap: 1rem;
                align-items: flex-start;
                font-size: 1rem;
                line-height: 1.45;
            }
            footer .brand {
                font-size: 1.35rem;
                line-height: 1.2;
            }
        }
        @media (hover: none) and (pointer: coarse) {
            .hero-bg,
            .shine-text,
            .btn-portal {
                animation: none;
            }
            .service-card:hover,
            .insight-card:hover,
            .trust-card:hover,
            .city-card:hover,
            .btn-gold:hover,
            .btn-portal:hover,
            .insight-card:hover img {
                transform: none;
            }
            .insight-card img,
            .service-card,
            .section-panel,
            .glass,
            .btn-gold,
            .btn-outline,
            .btn-portal {
                will-change: auto;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
        }
    
        .insight-card img, .service-card, .section-panel, .glass, .btn-gold, .btn-outline, .btn-portal { will-change: transform; }
        .insight-card img { transition: transform 0.6s ease; }
        .insight-card:hover img { transform: scale(1.05); }
        .section-panel blockquote, .section-panel p.text-2xl { color: var(--text); }
        .hero-content-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
        }
        .shine-text {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        .shine-text .shine-word {
            display: inline-block;
            font-weight: 900;
            position: relative;
            color: transparent !important;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(90deg, #f5e3b4 0%, #f7e9ca 12%, #f4d781 28%, #fff9ed 42%, #f5db9d 55%, #f8f0d5 67%, #f2cc74 76%, #fffeef 88%, #d4a956 100%);
            background-size: 240% 100%;
            background-position: 0% 50%;
            text-shadow: 0 6px 18px rgba(255,255,255,0.32), 0 3px 12px rgba(0,0,0,0.22);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transition: background-position 0.65s ease;
            animation: shine-sweep-text 3s ease-in-out infinite;
            will-change: background-position, filter;
        }
        /* slight stagger so the shimmer feels continuous across words */
        .shine-text .shine-word:nth-child(1) { animation-delay: 0s; }
        .shine-text .shine-word:nth-child(2) { animation-delay: 0.08s; }
        .shine-text .shine-word:nth-child(3) { animation-delay: 0.16s; }
        .shine-text .shine-word:nth-child(4) { animation-delay: 0.24s; }
        .shine-text .shine-word:nth-child(5) { animation-delay: 0.32s; }
        .shine-text .shine-word:nth-child(6) { animation-delay: 0.40s; }
        .shine-text .shine-word:nth-child(7) { animation-delay: 0.48s; }

        @keyframes shine-sweep-text {
            0%   { background-position: 0% 55%;   filter: brightness(1); }
            18%  { background-position: 22% 48%;  filter: brightness(1.25); }
            40%  { background-position: 48% 52%;  filter: brightness(1.4); }
            57%  { background-position: 68% 50%;  filter: brightness(1.32); }
            75%  { background-position: 86% 49%;  filter: brightness(1.18); }
            100% { background-position: 100% 50%; filter: brightness(1); }
        }

        /* Keep hero word shimmer simple on mobile without separator styling */
        .shine-text { gap: 0.75rem; }
        .shine-text .shine-word { padding: 0 0.12rem; }
        .shine-text .shine-word.shine-sep {
            display: none;
        }

        @media (hover: none) and (pointer: coarse), (prefers-reduced-motion: reduce) {
            .shine-text .shine-word { animation: none; }
        }
        
        .faq-item {
            transition: all 0.3s ease;
        }
        .faq-item[open] {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(79, 70, 229, 0.05));
        }
        .faq-item summary {
            list-style: none;
            outline: none;
        }
        .faq-item summary::-webkit-details-marker {
            display: none;
        }
        .faq-item[open] summary i {
            transform: rotate(180deg);
            transition: transform 0.3s ease;
        }
        [data-theme="dark"] {
            --bg: #08111f;
            --surface: rgba(15, 23, 42, 0.72);
            --surface-strong: rgba(15, 23, 42, 0.9);
            --text: #e8edf5;
            --muted: #b2bed0;
            --border: rgba(255, 255, 255, 0.1);
            --light: #0f172a;
            --dark: #e2e8f0;
            --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.18);
            --shadow-md: 0 24px 60px rgba(0, 0, 0, 0.28);
            --shadow-lg: 0 35px 80px rgba(0, 0, 0, 0.4);
        }
        [data-theme="dark"] body {
            background:
                radial-gradient(circle at top left, rgba(200,169,107,0.08), transparent 25%),
                radial-gradient(circle at top right, rgba(13,59,102,0.06), transparent 30%),
                var(--bg);
        }

        /* Hero slider styles */
        .hero-slider { position: relative; overflow: hidden; }
        .hero-slider-track { display: flex; transition: transform 0.45s cubic-bezier(.2,.9,.2,1); width: 100%; }
        .hero-slide { min-width: 100%; padding: 4px 6px 12px; }
        .hero-slide-link { display: block; color: inherit; text-decoration: none; }
        .hero-slide-link:hover h3 { opacity: 0.88; }
        .hero-slide h3 { color: var(--gold); position: relative; top: -4px; }
        .hero-slide p { color: rgba(255,255,255,0.9); margin-top: 0.5rem; }
        .hero-dots { display: flex; gap: 10px; justify-content: center; margin-top: 0; }
        .hero-dot { width: 12px; height: 12px; border-radius: 999px; background: white; border: none; opacity: 1; cursor: pointer; transition: background 0.2s ease, transform 0.12s ease; }
        .hero-dot:focus { outline: 2px solid var(--gold); }
        .hero-dot.active { background: black; transform: scale(1.05); }

        @media (max-width: 768px) {
            .hero-slide h3 { font-size: 1.15rem; }
        }

        /* Slightly reduce hero slide heading sizes */
        .hero-slide h3 {
            font-size: 1.15rem;
        }
        @media (min-width: 640px) {
            .hero-slide h3 { font-size: 1.35rem; }
        }
        @media (min-width: 1024px) {
            .hero-slide h3 { font-size: 1.5rem; }
        }

        /* Arrow buttons for hero slider */
        .hero-arrow {
            position: absolute;
            bottom: -26px;
            width: 44px;
            height: 44px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: rgba(255,255,255,0.95);
            border: none;
            box-shadow: none;
            cursor: pointer;
            z-index: 30;
        }
        .hero-arrow i { width: 18px; height: 18px; }
        .hero-arrow:hover { transform: scale(1.03); }

        .hero-prev { left: 12px; }
        .hero-next { right: 12px; }

        .hero-controls { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 14px; align-items: center; justify-content: center; z-index: 20; }
        .hero-controls .hero-dots { margin: 0; }
        .hero-arrow { pointer-events: auto; }

        @media (max-width: 480px) {
            .hero-arrow { width: 40px; height: 40px; }
        }

        @media (max-width: 768px) {
            .hero-arrow { bottom: -20px; }
            .hero-controls { bottom: 8px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-arrow { transition: none; }
        }
        [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
        [data-theme="dark"] .brand { color: #e2e8f0; }
        [data-theme="dark"] .bg-white {
            background: #1e293b;
            color: #e2e8f0;
        }
        [data-theme="dark"] .text-slate-900 { color: #e2e8f0; }
        [data-theme="dark"] .text-slate-600 { color: #cbd5e1; }
        [data-theme="dark"] .text-slate-500 { color: #94a3b8; }
        [data-theme="dark"] .border-slate-200 { border-color: rgba(255, 255, 255, 0.1); }
        [data-theme="dark"] .bg-slate-50 { background: #0f172a; }
        [data-theme="dark"] header { background: rgba(15, 23, 42, 0.9); }
        [data-theme="dark"] input, [data-theme="dark"] select {
            background: #1e293b;
            color: #e2e8f0;
            border-color: #334155;
        }