:root{--primary:#1e90ff;--primary-strong:#0b5ed7;--accent:#ffffff;--accent-soft:rgba(255,255,255,0.16);--surface:#04142d;--surface-2:#071f46;--line:rgba(255,255,255,0.16)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#020b1a}
body{min-height:100vh;font-family:'Inter','Noto Sans Arabic',sans-serif;background:linear-gradient(180deg,#031a3a 0%,#061225 46%,#020b1a 100%);color:#fff;overflow-x:hidden;cursor:none}
[dir="rtl"] body{font-family:'Noto Sans Arabic','Inter',sans-serif}

/* ── Mouse cursor effect ── */
#cursorGlow{display:none}
#cursorDot{display:none}
#airplaneCursor{position:fixed;pointer-events:none;z-index:10000;transform:translate(-50%,-50%) rotate(-45deg);font-size:28px;transition:opacity 0.3s;opacity:0;filter:drop-shadow(0 0 6px rgba(30,144,255,0.8))}
.trail-dot{position:fixed;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);animation:trailFade 0.6s ease-out forwards}
@keyframes trailFade{0%{opacity:0.8;width:8px;height:8px}100%{opacity:0;width:2px;height:2px}}
a,button,input,textarea,select,.service-card,.attraction-card,.blog-card{cursor:none}
@media (pointer:coarse){body{cursor:auto}#airplaneCursor{display:none}a,button,input,textarea,select,.service-card,.attraction-card,.blog-card{cursor:pointer}}

@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulseBlue{0%,100%{box-shadow:0 0 0 0 rgba(30,144,255,0.36)}50%{box-shadow:0 0 0 14px rgba(30,144,255,0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Scroll animations ── */
.anim-up{opacity:0;transform:translateY(40px);transition:all 0.8s cubic-bezier(0.4,0,0.2,1)}
.anim-up.visible{opacity:1;transform:translateY(0)}
.anim-scale{opacity:0;transform:scale(0.9);transition:all 0.6s ease-out}
.anim-scale.visible{opacity:1;transform:scale(1)}
.anim-left{opacity:0;transform:translateX(-40px);transition:all 0.8s ease-out}
.anim-left.visible{opacity:1;transform:translateX(0)}
.anim-right{opacity:0;transform:translateX(40px);transition:all 0.8s ease-out}
.anim-right.visible{opacity:1;transform:translateX(0)}
.hero-anim-down{animation:fadeInDown 0.6s ease-out}
.hero-anim-title{animation:fadeInUp 0.8s ease-out 0.1s both}
.hero-anim-subtitle{animation:fadeInUp 0.8s ease-out 0.3s both}
.hero-anim-actions{animation:fadeInUp 0.8s ease-out 0.5s both}
.hero-anim-trust{animation:fadeInUp 0.8s ease-out 0.7s both}
.anim-delay-100{transition-delay:0.1s}
.anim-delay-200{transition-delay:0.2s}
.anim-delay-300{transition-delay:0.3s}

/* ── Typography ── */
.gradient-text{background:linear-gradient(135deg,#ffffff,#1e90ff 52%,#ffffff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.glass{background:rgba(4,20,45,0.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* ── Navbar ── */
#navbar{transition:background 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease}
#navbar.scrolled{background:rgba(3,10,26,0.96)!important;backdrop-filter:blur(20px)!important;border-bottom:1px solid rgba(30,144,255,0.12)!important;box-shadow:0 4px 24px rgba(0,0,0,0.4)!important}

/* Active nav link */
.nav-link{position:relative;transition:color 0.2s}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary);border-radius:2px;transition:width 0.3s ease}
[dir="rtl"] .nav-link::after{left:auto;right:0}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-link.active{color:#fff!important}

/* ── Mobile menu ── */
.mobile-menu{transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1)}
[dir="rtl"] .mobile-menu{transform:translateX(-100%)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu .nav-link-mobile{position:relative;padding-bottom:4px}
.mobile-menu .nav-link-mobile.active{color:#60a5fa!important}
.mobile-menu .nav-link-mobile.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--primary);border-radius:2px}

/* ── Hero ── */
.hero-pattern{background-image:linear-gradient(rgba(255,255,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.035) 1px,transparent 1px);background-size:42px 42px}
#hero img{filter:saturate(1.08) contrast(1.04)}

/* ── Service cards ── */
.service-card{transition:all 0.35s cubic-bezier(0.4,0,0.2,1);cursor:default}
.service-card:hover{transform:translateY(-10px);border-color:rgba(30,144,255,0.5)!important;box-shadow:0 28px 48px -16px rgba(30,144,255,0.28)}
.service-card:hover .card-icon{background:rgba(30,144,255,0.25)!important;transform:scale(1.1)}
.card-icon{transition:all 0.3s ease}

/* ── Attraction cards ── */
.attraction-card{transition:all 0.5s ease}
.attraction-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -12px rgba(0,0,0,0.6)}
.attraction-card:hover img{transform:scale(1.1)}
.attraction-card:hover .attr-overlay{opacity:1}

/* ── Blog cards ── */
.blog-card{transition:all 0.3s ease}
.blog-card:hover{transform:translateY(-4px);border-color:rgba(30,144,255,0.3)!important;box-shadow:0 16px 32px -8px rgba(0,0,0,0.5)}
.blog-card:hover img{transform:scale(1.08)}

/* ── Stats bar ── */
.stat-item{position:relative}
.stat-item::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:40px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,0.32),transparent)}
[dir="rtl"] .stat-item::after{right:auto;left:0}
.stat-item:last-child::after{display:none}

/* ── Language dropdown ── */
.lang-drop{display:none;position:absolute;top:100%;right:0;margin-top:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;overflow:hidden;min-width:140px;z-index:100}
[dir="rtl"] .lang-drop{right:auto;left:0}
.lang-drop.show{display:block;animation:fadeInDown 0.2s ease-out}
.lang-drop button{width:100%;padding:10px 16px;text-align:left;color:#a3a3a3;transition:all 0.15s;font-size:14px;background:none;border:none;cursor:pointer}
[dir="rtl"] .lang-drop button{text-align:right}
.lang-drop button:hover{background:rgba(30,144,255,0.12);color:#1e90ff}
.lang-drop button.active-lang{color:#1e90ff;font-weight:500}

/* ── Dashboard modal ── */
.modal-overlay{opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal-overlay.show .modal-body{transform:scale(1);opacity:1}
.modal-body{transform:scale(0.95);opacity:0;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.dashboard-content{max-height:calc(90vh - 140px)}
.tab-btn{transition:all 0.2s ease;border-bottom:2px solid transparent}
.tab-btn.active{color:#1e90ff;border-color:#1e90ff}
.tab-btn:hover{color:#93c5fd}

/* ── WhatsApp float ── */
.whatsapp-float{position:fixed;bottom:88px;right:24px;z-index:50;animation:pulseBlue 2s ease-in-out infinite}
[dir="rtl"] .whatsapp-float{right:auto;left:24px}

/* ── Scroll-to-top button ── */
#scrollTopBtn{position:fixed;bottom:24px;right:24px;z-index:50;width:44px;height:44px;border-radius:12px;background:rgba(7,31,70,0.9);border:1px solid rgba(30,144,255,0.3);color:#60a5fa;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(12px);transition:all 0.3s ease;backdrop-filter:blur(8px)}
[dir="rtl"] #scrollTopBtn{right:auto;left:24px}
#scrollTopBtn.visible{opacity:1;transform:translateY(0)}
#scrollTopBtn:hover{background:rgba(30,144,255,0.2);border-color:rgba(30,144,255,0.6);color:#fff;transform:translateY(-2px)}

/* ── Toast ── */
.toast{animation:fadeInUp 0.4s ease-out forwards}
.toast-container{max-width:360px}

/* ── Gradient border ── */
.gradient-border{position:relative}
.gradient-border::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,0.34),rgba(30,144,255,0.12),rgba(30,144,255,0.42));z-index:-1;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask-composite:xor;padding:1px;border-radius:inherit}

/* ── Shimmer ── */
.shimmer{background:linear-gradient(90deg,transparent 25%,rgba(30,144,255,0.1) 50%,transparent 75%);background-size:200% 100%;animation:shimmer 3s infinite}

/* ── How it works steps ── */
.step-line{position:relative}
.step-line::after{content:'';position:absolute;top:24px;left:50%;width:100%;height:2px;background:linear-gradient(to right,rgba(255,255,255,0.34),rgba(30,144,255,0.12))}
[dir="rtl"] .step-line::after{left:auto;right:50%;background:linear-gradient(to left,rgba(255,255,255,0.34),rgba(30,144,255,0.12))}
.step-line:last-child::after{display:none}

/* ── Quick contact form ── */
.contact-input{width:100%;background:rgba(7,31,70,0.6);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px 16px;color:#fff;font-size:14px;transition:border-color 0.2s,box-shadow 0.2s;outline:none;font-family:inherit}
.contact-input::placeholder{color:#4a6286}
.contact-input:focus{border-color:rgba(30,144,255,0.5);box-shadow:0 0 0 3px rgba(30,144,255,0.1)}
textarea.contact-input{resize:vertical;min-height:100px}
.contact-submit{width:100%;padding:14px;border-radius:12px;background:var(--primary);color:#fff;font-weight:600;font-size:15px;border:none;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.contact-submit:hover{background:var(--primary-strong);transform:translateY(-1px);box-shadow:0 8px 24px rgba(30,144,255,0.3)}
.contact-submit:active{transform:translateY(0)}
.contact-submit.loading{pointer-events:none;opacity:0.7}
.contact-submit.loading .btn-spinner{display:block}
.btn-spinner{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite}

/* ── Card & misc overrides ── */
.service-card,.attraction-card,.blog-card{border-radius:8px!important;background:linear-gradient(180deg,rgba(7,31,70,0.78),rgba(3,15,34,0.94))!important;border-color:var(--line)!important}
.service-card,.blog-card,.attraction-card,.modal-body,.gradient-border{box-shadow:0 18px 54px -34px rgba(0,0,0,0.9)}
.attraction-card img,.blog-card img{filter:saturate(1.05) contrast(1.03)}
.attr-overlay{background:linear-gradient(to top,rgba(2,11,26,0.94),rgba(2,11,26,0.34),transparent)!important}
footer{background:linear-gradient(180deg,rgba(2,11,26,0),rgba(2,11,26,0.96))}

/* ── Focus styles (accessibility) ── */
a:focus-visible,button:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#262626;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#404040}

/* ── Mobile responsive ── */
@media (max-width:640px){
    #hero h1{font-size:2rem!important;line-height:1.12!important;max-width:22rem;overflow-wrap:break-word}
    #hero h1 span{display:block;max-width:100%}
    #hero .gradient-text{font-size:2rem}
    #hero p{max-width:22rem}
    .hero-anim-actions{max-width:22rem;width:100%}
    .hero-anim-actions a{width:100%;justify-content:center;padding-left:1.25rem!important;padding-right:1.25rem!important}
    .hero-anim-trust{max-width:22rem;gap:0.75rem!important}
    .hero-anim-trust .text-sm{font-size:0.78rem}
    .hero-anim-trust .iconify{font-size:1rem}
    #currentLangLabel{font-size:0.8rem}
    .whatsapp-float{bottom:80px;right:16px}
    #scrollTopBtn{right:16px;bottom:24px}
    [dir="rtl"] .whatsapp-float{left:16px;right:auto}
    [dir="rtl"] #scrollTopBtn{left:16px;right:auto}
}