@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&family=El+Messiri:wght@600;700&family=Cairo:wght@400;600&display=swap');

:root {
    --gold: #D4AF37;
    --gold-light: #F4D67A;
    --gold-dark: #A67C00;
    --brandgreen: #047857;
    --branddark: #050505;
    --blooddark: #7F1D1D;
}

* { border-color: rgba(255, 255, 255, 0.1); box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Tajawal', sans-serif;
    background-color: #050505;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading { font-family: 'El Messiri', sans-serif; }
.font-body { font-family: 'Tajawal', sans-serif; }
.font-accent { font-family: 'Cairo', sans-serif; }

img { display: block; max-width: 100%; }
a, button { cursor: pointer; }

/* ===== Grain / noise overlay ===== */
.grain { position: relative; }
.grain::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Glowing headings ===== */
.text-glow-gold { color: #F4D67A; text-shadow: 0 0 18px rgba(212, 175, 55, 0.55), 0 0 40px rgba(212, 175, 55, 0.25); }
.text-glow-white { text-shadow: 0 0 14px rgba(255, 255, 255, 0.35); }

/* ===== Glass ===== */
.glass { background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.08); }
.gold-border { border: 1px solid rgba(212, 175, 55, 0.35); }

/* ===== Gold gradient text ===== */
.gold-text {
    background: linear-gradient(120deg, #A67C00 0%, #F4D67A 45%, #D4AF37 70%, #F9E0A0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== Marquee ===== */
@keyframes marquee-rtl { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.animate-marquee { animation: marquee-rtl 32s linear infinite; white-space: nowrap; will-change: transform; }

::selection { background: rgba(212, 175, 55, 0.35); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #A67C00; border-radius: 10px; }

.cta-glow { box-shadow: 0 0 25px rgba(212, 175, 55, 0.45); }

/* ===== Mobile menu ===== */
.mobile-menu { max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; }
.mobile-menu.open { max-height: 500px; opacity: 1; }

/* ===== Icons (replace lucide-react) ===== */
.icon-svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: none; stroke: currentColor; flex-shrink: 0; }
.icon-svg.filled { fill: currentColor; stroke: none; }

/* ===== Reveal on scroll (replaces framer-motion whileInView) ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.reveal-visible { opacity: 1; transform: translateY(0); }
.reveal-x { opacity: 0; transform: translateX(40px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-x.reveal-visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.8); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal-scale.reveal-visible { opacity: 1; transform: scale(1); }

/* ===== Hero entrance (lightweight replacement for framer-motion line reveal) ===== */
@keyframes heroLineIn { from { transform: translateY(110%); } to { transform: translateY(0); } }
.hero-line-mask { display: block; overflow: hidden; }
.hero-line { display: block; transform: translateY(110%); animation: heroLineIn 0.9s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero-fade { opacity: 0; animation: fadeInUp 0.7s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero-fade-only { opacity: 0; animation: fadeIn 0.7s ease forwards; }
@keyframes chevronBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.chevron-bounce { animation: chevronBounce 1.8s ease-in-out infinite; }

/* ===== Service card 3D tilt (JS updates --rx/--ry via mousemove) ===== */
.tilt-card {
    --rx: 0deg;
    --ry: 0deg;
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.25s ease-out, border-color 0.3s;
}
.tilt-card .tilt-glow {
    opacity: 0;
    transition: opacity 0.5s;
    box-shadow: inset 0 0 40px rgba(212, 175, 55, 0.25);
}
.tilt-card:hover .tilt-glow { opacity: 1; }
.tilt-card:hover img { transform: scale(1.1); }

/* ===== Before/After slider ===== */
.ba-slider { position: relative; height: 288px; border-radius: 1rem; overflow: hidden; user-select: none; cursor: ew-resize; }
.ba-slider img.ba-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before-wrap { position: absolute; inset: 0 auto 0 0; height: 100%; overflow: hidden; width: 50%; }
.ba-before-wrap img { position: absolute; top: 0; right: 0; height: 100%; max-width: none; filter: grayscale(1) brightness(0.5) contrast(0.8) sepia(0.3); }
.ba-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); left: 50%; }
.ba-handle .knob {
    position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%);
    width: 36px; height: 36px; border-radius: 999px; background: var(--gold); color: #000;
    display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.45);
}

/* ===== Hero 3D canvas ===== */
.hero3d-wrap { position: absolute; inset: 0; }
.hero3d-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* ===== Floating actions ping ===== */
@keyframes floatPing { 75%, 100% { transform: scale(1.6); opacity: 0; } }
.float-ping { animation: floatPing 2s cubic-bezier(0,0,.2,1) infinite; }