:root {
            --gold: #FBA919;
            --gold-bright: #FFD700;
            --gold-deep: #8A6317;
            --bronze: #6B4A20;
            --bg-0: #050403;
            --bg-1: #0a0806;
            --bg-2: #14100a;
            --ink: #F6F0E4;
            --muted: #a39a8c;
            --whatsapp: #25d366;
            --radius: 14px;
            --radius-lg: 24px;
            --ease: cubic-bezier(.22,1,.36,1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Tajawal', sans-serif;
            background: var(--bg-0);
            color: var(--ink);
            overflow-x: hidden;
        }

        h1, h2, h3, h4, .brand-font {
            font-family: 'Cairo', sans-serif;
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
        }

        /* ================= BACKGROUND: AMBIENT GOLD LUXURY GLOW ================= */
        #bg-stage {
            position: fixed;
            inset: 0;
            z-index: 0;
            background:
                radial-gradient(ellipse 120% 80% at 50% 115%, rgba(251,169,25,0.14) 0%, transparent 55%),
                radial-gradient(ellipse 80% 60% at 85% -10%, rgba(138,99,23,0.13) 0%, transparent 60%),
                linear-gradient(180deg, #07060500 0%, #050403 70%);
        }
        #bg-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0.9;
        }
        /* fine grain for a premium, non-flat feel */
        #bg-grain {
            position: absolute;
            inset: 0;
            opacity: 0.05;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        }
        .horizon-line {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 42vh;
            background: linear-gradient(180deg, transparent 0%, rgba(251,169,25,0.05) 100%);
            border-top: 1px solid rgba(251,169,25,0.10);
            pointer-events: none;
        }

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

        /* ================= NAV ================= */
        .navbar {
            padding: 18px 0;
            border-bottom: 1px solid rgba(251,169,25,0.14);
            background: rgba(5,4,3,0.72) !important;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .nav-link {
            color: var(--muted) !important;
            margin: 0 12px;
            font-weight: 500;
            position: relative;
            transition: color .25s var(--ease);
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -6px; right: 0;
            width: 0; height: 2px;
            background: linear-gradient(90deg, var(--gold), var(--gold-bright));
            transition: width .3s var(--ease);
        }
        .nav-link:hover::after { width: 100%; }
        .nav-link:hover { color: var(--gold-bright) !important; }
        .btn-login {
            background: rgba(20,16,10,0.7);
            color: var(--ink);
            border: 1px solid var(--gold);
            border-radius: 999px;
            padding: 8px 22px;
            font-size: .92rem;
            transition: all .25s var(--ease);
        }
        .btn-login:hover {
            background: linear-gradient(45deg, var(--gold), var(--gold-bright));
            color: #100c06;
            box-shadow: 0 8px 24px rgba(251,169,25,0.25);
        }
        .navbar-brand img { width: 100px; height: 64px; object-fit: contain; transition: transform .3s var(--ease); }
        .navbar-brand img:hover { transform: scale(1.05); }

        /* ================= HERO ================= */
        .hero-section { padding: 100px 0 70px; }
        .eyebrow {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: .8rem; letter-spacing: .04em;
            color: var(--gold-bright);
            border: 1px solid rgba(251,169,25,0.3);
            background: rgba(251,169,25,0.06);
            border-radius: 999px;
            padding: 6px 16px;
            margin-bottom: 22px;
        }
        .hero-title {
            font-size: 3.6rem;
            font-weight: 800;
            line-height: 1.18;
            letter-spacing: -.01em;
        }
        .hero-title span {
            background: linear-gradient(100deg, var(--gold-deep), var(--gold), var(--gold-bright));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .hero-lead { color: var(--muted); font-size: 1.15rem; max-width: 480px; }

        .btn-whatsapp {
            background: linear-gradient(45deg, var(--whatsapp), #158a3a);
            color: #fff; border-radius: 12px; padding: 13px 26px;
            font-weight: 700; border: none; transition: all .25s var(--ease);
        }
        .btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(37,211,102,0.28); color:#fff; }

        .btn-video-outline {
            border: 1px solid var(--gold); color: var(--gold-bright);
            border-radius: 12px; padding: 13px 26px; background: transparent;
            transition: all .25s var(--ease);
        }
        .btn-video-outline:hover {
            background: linear-gradient(45deg, var(--gold), var(--gold-bright));
            color: #100c06; border-color: transparent; transform: translateY(-3px);
            box-shadow: 0 14px 34px rgba(251,169,25,0.28);
        }

        .car-img { max-width: 100%; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.65)); transition: transform .4s var(--ease); }
        .car-img:hover { transform: scale(1.015); }

        /* ================= STATS ================= */
        .stat-card {
            background: rgba(12,10,8,0.55);
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(251,169,25,0.16);
            border-radius: var(--radius);
            padding: 28px 22px; text-align: center;
            position: relative; overflow: hidden;
            transition: all .35s var(--ease);
        }
        .stat-card::before {
            content: ''; position: absolute; inset: -60% -60% auto auto; width: 200%; height: 200%;
            background: radial-gradient(circle, rgba(251,169,25,0.07) 0%, transparent 70%);
            opacity: 0; transition: opacity .35s var(--ease);
        }
        .stat-card:hover::before { opacity: 1; }
        .stat-card:hover { border-color: var(--gold); transform: translateY(-6px); box-shadow: 0 20px 46px rgba(0,0,0,0.35); }
        .stat-card i { font-size: 1.8rem; color: var(--gold-bright); margin-bottom: 14px; }
        .stat-card h3 {
            font-weight: 800; font-size: 1.7rem;
            background: linear-gradient(45deg, var(--gold), var(--gold-bright));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .stat-card p { color: var(--muted) !important; font-size: .92rem; }

        /* ================= VIDEO ================= */
        .video-container {
            border: 1px solid rgba(251,169,25,0.16);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: 0 0 60px rgba(251,169,25,0.06);
            background: #0a0806;
            position: relative;
        }
        .video-facade {
            position: relative;
            cursor: pointer;
            aspect-ratio: 16/9;
            background-size: cover;
            background-position: center;
        }
        .video-facade::after {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
        }
        .video-play-btn {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: 78px; height: 78px; border-radius: 50%;
            background: linear-gradient(45deg, var(--gold), var(--gold-bright));
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 10px 40px rgba(251,169,25,0.4);
            z-index: 2; transition: transform .3s var(--ease);
        }
        .video-facade:hover .video-play-btn { transform: translate(-50%,-50%) scale(1.08); }
        .video-play-btn i { color: #100c06; font-size: 1.7rem; margin-right: -4px; }
        .video-container iframe { width: 100%; height: 100%; border: none; aspect-ratio: 16/9; display: block; }
        .video-fallback-link {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: .85rem; color: var(--muted);
            margin-top: 10px;
        }
        .video-fallback-link a { color: var(--gold-bright); text-decoration: none; border-bottom: 1px dashed rgba(255,215,0,0.5); }
        .video-fallback-link a:hover { color: var(--gold); }

        /* ================= INVESTMENT CALC ================= */
        .calc-box {
            background: rgba(12,10,8,0.55);
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(251,169,25,0.16);
            border-radius: var(--radius-lg);
            padding: 44px;
            position: relative; overflow: hidden;
        }
        .calc-box::before {
            content: ''; position: absolute; top: -30%; right: -20%; width: 60%; height: 60%;
            background: radial-gradient(circle, rgba(251,169,25,0.07) 0%, transparent 70%); border-radius: 50%;
        }
        .calc-stat-label { color: var(--muted); font-size: .88rem; }
        .calc-stat-value {
            background: linear-gradient(45deg, var(--gold), var(--gold-bright));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            font-weight: 800; font-size: 1.25rem;
        }

        /* ================= CONTACT ================= */
        .contact-section {
            border-top: 1px solid rgba(251,169,25,0.14);
            padding: 90px 0; margin-top: 100px;
        }
        .form-control, .form-select {
            background: rgba(20,16,10,0.65);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--ink); border-radius: 10px; padding: 13px 14px; margin-bottom: 18px;
            transition: all .25s var(--ease);
        }
        .form-control:focus, .form-select:focus {
            background: rgba(20,16,10,0.75); border-color: var(--gold); color: var(--ink);
            box-shadow: 0 0 0 4px rgba(251,169,25,0.10);
        }
        .form-control::placeholder { color: #6f675a; }
        .btn-submit {
            background: linear-gradient(45deg, var(--gold), var(--gold-bright));
            color: #100c06; width: 100%; padding: 15px; font-weight: 800;
            border-radius: 10px; border: none; transition: all .25s var(--ease);
        }
        .btn-submit:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(251,169,25,0.25); }

        .contact-card {
            background: rgba(18,14,9,0.72) !important;
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(251,169,25,0.16) !important;
            box-shadow: 0 24px 60px rgba(0,0,0,0.4);
            border-radius: var(--radius-lg);
        }
        .trust-pill {
            background: rgba(12,10,8,0.5) !important;
            border: 1px solid rgba(251,169,25,0.16);
            border-radius: 999px;
        }

        .text-highlight {
            background: linear-gradient(45deg, var(--gold), var(--gold-bright));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }

        /* scroll reveal */
        .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
        .reveal.is-visible { opacity: 1; transform: translateY(0); }

        @media (max-width: 768px) {
            .hero-title { font-size: 2.5rem; }
            .hero-section { padding: 70px 0 40px; }
        }