/* ============================================================
 نجوم النار — Premium Fireworks Website
 Ultra-luxury design system
 ============================================================ */

/* ===== Custom Properties ===== */
:root {
 /* Backgrounds — قاعدة داكنة بلمحة بنفسجية */
 --bg: #06040c;
 --bg-2: #0c0818;
 --bg-card: rgba(255,255,255,0.03);
 --bg-card-2: rgba(255,255,255,0.06);

 /* Brand Colors — بنفسجي راقي (تدرج فيوليت–أوركيد) */
 --gold: #c4b5fd;
 --gold-light: #ede9fe;
 --gold-dim: rgba(196,181,253,0.16);
 --orange: #a78bfa;
 --fire: #7c3aed;
 --brand: #6d28d9;
 --brand-light: #ddd6fe;

 /* Text */
 --text: #eeeef8;
 --text-2: #a0a0c0;
 --text-3: #55556a;

 /* Borders */
 --border: rgba(255,255,255,0.07);
 --border-gold: rgba(196,181,253,0.28);
 --border-brand: rgba(124,58,237,0.25);

 /* WhatsApp */
 --wa: #22c55e;
 --wa-2: #16a34a;

 /* Effects */
 --blur: blur(20px) saturate(160%);
 --blur-sm: blur(10px);
 --shadow-xl: 0 24px 80px rgba(0,0,0,0.7);
 --shadow-glow: 0 0 60px rgba(167,139,250,0.18);

 /* Radius */
 --r: 20px;
 --r-sm: 12px;
 --r-lg: 28px;
 --r-pill: 100px;

 /* Timing */
 --ease: cubic-bezier(0.4, 0, 0.2, 1);
 --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 --t: 0.3s;
 --t-slow: 0.6s;

 /* Legacy variables for error pages (403/404/500) and old components */
 --bg-deep: #0e1218;
 --bg-elevated: #1c2430;
 --text-muted: #a8a29a;
 --accent: #f4a261;
 --accent-2: #e76f51;
 --gold-legacy: #e8b86d;
 --sand: #c4a574;
 --glow: rgba(244, 162, 97, 0.35);
 --header-h: 4.25rem;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* smooth scroll يستهلك الخيط الرئيسي؛ على اللمس نترك التمرير أصلياً لسلاسة أقرب لمعدل الشاشة (60–120Hz) */
html { scroll-behavior: auto; }
@media (pointer: fine) {
 html { scroll-behavior: smooth; }
}
section[id] { scroll-margin-top: 80px; }
.type-card[id] { scroll-margin-top: 92px; }

.types-toc-wrap {
 margin: 0 0 clamp(20px, 3vw, 28px);
}
.types-toc-label {
 font-size: 0.82rem;
 font-weight: 600;
 color: var(--text-2);
 margin: 0 0 12px;
}

/* ===== Company Highlight (شركة العاب نارية في السعودية | تنظيم العاب نارية مرخصة) ===== */
.company-highlight-sec {
 padding: clamp(64px, 9vw, 100px) 0;
 background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 50%, var(--bg-2) 100%);
 position: relative;
 overflow: hidden;
}
.company-highlight-sec::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.08) 0%, transparent 70%);
 pointer-events: none;
}
.company-highlight-inner {
 text-align: center;
 max-width: 920px;
 margin: 0 auto;
}
.highlight-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 8px 20px;
 border-radius: var(--r-pill);
 background: rgba(124,58,237,0.12);
 border: 1px solid rgba(124,58,237,0.3);
 font-size: 0.82rem;
 font-weight: 700;
 color: var(--brand-light);
 margin-bottom: 24px;
 letter-spacing: 0.02em;
}
.highlight-badge i {
 font-size: 1rem;
 color: var(--gold);
}
.highlight-main-title {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: 12px 20px;
 margin: 0 0 24px;
 line-height: 1.3;
}
.highlight-main {
 font-size: clamp(1.4rem, 4vw, 2.2rem);
 font-weight: 900;
 color: var(--gold-light);
}
.highlight-sep {
 font-size: clamp(1.5rem, 3vw, 2.5rem);
 font-weight: 200;
 color: rgba(196,181,253,0.25);
 user-select: none;
}
.highlight-sub {
 font-size: clamp(1.15rem, 3vw, 1.75rem);
 font-weight: 800;
 color: var(--text);
}
.highlight-desc {
 font-size: clamp(0.95rem, 1.4vw, 1.1rem);
 line-height: 1.8;
 color: var(--text-2);
 max-width: 780px;
 margin: 0 auto 36px;
}
.highlight-desc strong {
 color: var(--gold-light);
}
.highlight-features {
 display: flex;
 justify-content: center;
 gap: clamp(12px, 3vw, 24px);
 flex-wrap: wrap;
 margin-bottom: 32px;
}
.h-feature {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 14px 20px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r);
 min-width: 180px;
 flex: 0 1 auto;
 transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.h-feature:hover {
 border-color: rgba(124,58,237,0.3);
 background: rgba(124,58,237,0.04);
}
.h-feature-icon {
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 12px;
 background: rgba(124,58,237,0.12);
 border: 1px solid rgba(124,58,237,0.2);
 flex-shrink: 0;
 font-size: 1.1rem;
 color: var(--gold);
}
.h-feature-text {
 text-align: right;
 line-height: 1.4;
}
.h-feature-text strong {
 display: block;
 font-size: 0.88rem;
 font-weight: 800;
 color: var(--gold-light);
 margin-bottom: 2px;
}
.h-feature-text span {
 display: block;
 font-size: 0.78rem;
 color: var(--text-2);
}
.highlight-cta {
 display: flex;
 justify-content: center;
 gap: clamp(12px, 2.5vw, 20px);
 flex-wrap: wrap;
}
@media (max-width: 600px) {
 .company-highlight-sec {
 padding: clamp(48px, 8vw, 64px) 0;
 }
 .highlight-badge {
 font-size: 0.72rem;
 padding: 6px 14px;
 margin-bottom: 16px;
 }
 .highlight-main-title {
 flex-direction: column;
 gap: 6px;
 margin: 0 0 16px;
 }
 .highlight-main {
 font-size: clamp(1.2rem, 5.5vw, 1.5rem);
 }
 .highlight-sep {
 display: none;
 }
 .highlight-sub {
 font-size: clamp(1rem, 4.5vw, 1.3rem);
 }
 .highlight-desc {
 font-size: 0.88rem;
 line-height: 1.7;
 margin: 0 auto 24px;
 padding: 0 4px;
 }
 .highlight-features {
 flex-direction: column;
 align-items: stretch;
 gap: 10px;
 margin-bottom: 24px;
 }
 .h-feature {
 width: 100%;
 justify-content: flex-start;
 padding: 12px 16px;
 min-width: 0;
 }
 .h-feature-icon {
 width: 36px;
 height: 36px;
 font-size: 0.95rem;
 }
 .h-feature-text strong {
 font-size: 0.82rem;
 }
 .h-feature-text span {
 font-size: 0.72rem;
 }
 .highlight-cta {
 flex-direction: column;
 align-items: center;
 gap: 10px;
 }
 .highlight-cta .btn {
 width: 100%;
 max-width: 320px;
 font-size: 0.92rem !important;
 padding: 14px 28px !important;
 }
}

.about-brief-sec {
 padding: clamp(56px, 8vw, 88px) 0;
 background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%);
 position: relative;
}
.about-brief-card {
 margin-top: clamp(18px, 3vw, 26px);
 padding: clamp(22px, 4vw, 32px);
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
 max-width: 900px;
 margin-left: auto;
 margin-right: auto;
}
.about-brief-card p {
 font-size: clamp(0.88rem, 1.6vw, 0.95rem);
 line-height: 1.85;
 color: var(--text-2);
}
.about-brief-card p + p {
 margin-top: 1rem;
}

body {
 font-family: 'Tajawal', system-ui, sans-serif;
 background: var(--bg);
 color: var(--text);
 direction: rtl;
 text-align: right;
 line-height: 1.7;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; }

/* ===== Layout ===== */
.container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 clamp(16px, 4vw, 32px);
}

/* ===== Progress Bar ===== */
.progress-bar {
 position: fixed;
 top: 0; left: 0; right: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--gold), var(--orange), var(--fire), var(--brand));
 z-index: 9999;
 transform-origin: right;
 transition: width 0.1s linear;
 box-shadow: 0 0 12px rgba(167,139,250,0.55);
}

/* ===== Animated Mesh Background ===== */
.mesh-bg {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 0;
 overflow: hidden;
}
.mesh-bg::before,
.mesh-bg::after {
 content: '';
 position: absolute;
 border-radius: 50%;
 filter: blur(120px);
 animation: meshFloat 12s ease-in-out infinite;
}
.mesh-bg::before {
 width: 800px; height: 800px;
 background: radial-gradient(circle, rgba(124,58,237,0.07) 0%, transparent 70%);
 top: -200px; left: -200px;
}
.mesh-bg::after {
 width: 600px; height: 600px;
 background: radial-gradient(circle, rgba(124,58,237,0.09) 0%, transparent 70%);
 bottom: -100px; right: -100px;
 animation-delay: -6s;
 animation-direction: reverse;
}
@keyframes meshFloat {
 0%,100% { transform: translate(0,0) scale(1); }
 33% { transform: translate(80px,-60px) scale(1.1); }
 66% { transform: translate(-40px,80px) scale(0.95); }
}

/* تصنيف runtime-perf.js: تخفيف حركة الخلفية الضبابية على الأجهزة الأبطأ */
html[data-runtime-tier="balanced"] .mesh-bg::before,
html[data-runtime-tier="balanced"] .mesh-bg::after {
 animation-duration: 18s;
}
html[data-runtime-tier="lite"] .mesh-bg::before,
html[data-runtime-tier="lite"] .mesh-bg::after {
 animation-duration: 32s;
 filter: blur(72px);
}

/* ===== Utility: Gradient Text ===== */
.text-fire {
 background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 35%, var(--orange) 65%, var(--fire) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 filter: drop-shadow(0 0 30px rgba(167,139,250,0.4));
}
.text-brand {
 background: linear-gradient(135deg, var(--brand-light), var(--brand));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

/* ===== Section Labels ===== */
.label {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 7px 18px;
 border-radius: var(--r-pill);
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 border: 1px solid var(--border-gold);
 background: var(--gold-dim);
 color: var(--gold);
 margin-bottom: 18px;
}
.label-dot {
 width: 6px; height: 6px;
 background: var(--gold);
 border-radius: 50%;
 animation: blink 2s ease infinite;
}
@keyframes blink {
 0%,100% { opacity:1; } 50% { opacity:0.3; }
}

/* ===== Section Header ===== */
.sec-head {
 text-align: center;
 margin-bottom: 64px;
}
.sec-title {
 font-size: clamp(1.9rem, 3.8vw, 3rem);
 font-weight: 900;
 line-height: 1.18;
 margin-bottom: 18px;
 letter-spacing: -0.02em;
}
.sec-sub {
 font-size: clamp(0.95rem, 1.8vw, 1.1rem);
 color: var(--text-2);
 max-width: 580px;
 margin: 0 auto;
}

/* ===== Premium Buttons ===== */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 font-family: inherit;
 font-weight: 800;
 font-size: 1rem;
 border-radius: var(--r-pill);
 padding: 15px 34px;
 transition: transform var(--t) var(--ease-spring),
 box-shadow var(--t) var(--ease),
 filter var(--t) var(--ease);
 white-space: nowrap;
 position: relative;
 overflow: hidden;
 cursor: pointer;
}
/* Shimmer overlay */
.btn::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(105deg,
 transparent 20%, rgba(255,255,255,0.25) 50%, transparent 80%);
 transform: translateX(-100%) skewX(-15deg);
 transition: transform 0s;
}
.btn:hover::after {
 transform: translateX(160%) skewX(-15deg);
 transition: transform 0.6s ease;
}
.btn:active { transform: scale(0.96) !important; }

/* WhatsApp Button */
.btn-wa {
 background: linear-gradient(135deg, #22c55e, #15803d);
 color: #fff;
 box-shadow: 0 6px 30px rgba(34,197,94,0.35);
}
.btn-wa:hover {
 transform: translateY(-3px) scale(1.02);
 box-shadow: 0 12px 50px rgba(34,197,94,0.5);
}

/* Gold/Fire Button */
.btn-fire {
 background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--orange));
 color: #070509;
 font-weight: 900;
 box-shadow: 0 6px 30px rgba(191,167,255,0.4);
}
.btn-fire:hover {
 transform: translateY(-3px) scale(1.02);
 box-shadow: 0 14px 55px rgba(191,167,255,0.55);
 filter: brightness(1.06);
}

/* Outline Button */
.btn-ghost {
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(255,255,255,0.15);
 color: var(--text);
 backdrop-filter: var(--blur-sm);
}
.btn-ghost:hover {
 border-color: var(--border-gold);
 color: var(--gold);
 background: var(--gold-dim);
 transform: translateY(-2px);
}

/* ===== Gradient Border Card Mixin ===== */
.gcard {
 position: relative;
 background: var(--bg-card);
 border-radius: var(--r);
 backdrop-filter: var(--blur);
 -webkit-backdrop-filter: var(--blur);
 isolation: isolate;
 transition: transform var(--t) var(--ease-spring),
 box-shadow var(--t) var(--ease);
}
/* Inner gradient border via pseudo */
.gcard::before {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 padding: 1px;
 background: linear-gradient(
 135deg,
 rgba(191,167,255,0.25),
 rgba(147,51,234,0.1),
 rgba(124,58,237,0.1),
 transparent 60%
 );
 -webkit-mask: linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0);
 mask: linear-gradient(#fff 0 0) content-box,
 linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 pointer-events: none;
}
.gcard:hover {
 transform: translateY(-8px) scale(1.01);
 box-shadow: 0 30px 70px rgba(0,0,0,0.5),
 0 0 0 1px rgba(191,167,255,0.12),
 var(--shadow-glow);
}

/* ===== NAV ===== */
.nav {
 position: fixed;
 top: 0; left: 0; right: 0;
 z-index: 1000;
 padding: 0 clamp(16px,4vw,32px);
 height: 70px;
 display: flex;
 align-items: center;
 transition: background var(--t) var(--ease),
 border-color var(--t) var(--ease),
 box-shadow var(--t) var(--ease);
}
/* Enhanced glassmorphism with gold accent border */
.nav.solid {
 background: linear-gradient(180deg, rgba(6,4,12,0.92) 0%, rgba(10,7,20,0.88) 100%);
 backdrop-filter: blur(18px) saturate(1.2);
 -webkit-backdrop-filter: blur(18px) saturate(1.2);
 border-bottom: 1px solid rgba(191,167,255,0.12);
 box-shadow: 0 4px 40px rgba(0,0,0,0.5),
 0 1px 0 rgba(255,215,0,0.06) inset;
}
/* Gold gradient glow bar at top of nav */
.nav.solid::before {
 content: '';
 position: absolute;
 top: 0; left: 10%; right: 10%;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent);
 opacity: 0.5;
 pointer-events: none;
}
body.drawer-open .nav,
body.drawer-open .nav.solid {
 background: transparent !important;
 backdrop-filter: none !important;
 -webkit-backdrop-filter: none !important;
 border-bottom-color: transparent !important;
 box-shadow: none !important;
}
body.drawer-open .logo,
body.drawer-open .nav-actions { opacity: 0; pointer-events: none; transition: opacity var(--t); }
.nav-inner {
 max-width: 1280px;
 width: 100%;
 margin: 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: nowrap;
 overflow: visible;
}

/* Logo */
.logo {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-shrink: 0;
 text-decoration: none;
}
.logo-icon {
 width: 44px; height: 44px;
 background: linear-gradient(135deg, #3d2668, #0f081c);
 border-radius: 13px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.4rem;
 overflow: hidden;
 box-shadow: 0 4px 20px rgba(191,167,255,0.35),
 0 0 0 1px rgba(191,167,255,0.25),
 inset 0 1px 0 rgba(255,255,255,0.08);
 transition: transform var(--t) var(--ease-spring),
 box-shadow var(--t) var(--ease);
}
.logo-icon img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 border-radius: inherit;
}
.logo-icon:hover {
 transform: rotate(-5deg) scale(1.08);
 box-shadow: 0 6px 30px rgba(191,167,255,0.5),
 0 0 0 1px rgba(191,167,255,0.35),
 inset 0 1px 0 rgba(255,255,255,0.12);
}
.logo-name {
 font-size: 1.15rem;
 font-weight: 900;
 background: linear-gradient(135deg, var(--gold-light), var(--gold));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 letter-spacing: -0.01em;
 white-space: nowrap;
}
/* Nav Links */
.nav-links {
 display: flex;
 align-items: center;
 gap: 4px;
 flex-shrink: 1;
 min-width: 0;
 list-style: none;
}
.nav-links a {
 font-size: 0.88rem;
 font-weight: 600;
 color: var(--text-2);
 text-decoration: none;
 padding: 6px 14px;
 border-radius: 8px;
 transition: color var(--t), background var(--t), box-shadow var(--t);
 position: relative;
 white-space: nowrap;
}
/* Pill-shaped hover with subtle gold glow */
.nav-links a:hover {
 color: var(--text);
 background: rgba(191,167,255,0.08);
 box-shadow: 0 0 20px rgba(191,167,255,0.05);
}
/* Active/current page pill indicator */
.nav-links a.active,
.nav-links a[aria-current="page"] {
 color: var(--gold-light);
 background: rgba(191,167,255,0.10);
 box-shadow: inset 0 0 0 1px rgba(191,167,255,0.15);
}
.nav-links a.active:hover,
.nav-links a[aria-current="page"]:hover {
 background: rgba(191,167,255,0.14);
 box-shadow: inset 0 0 0 1px rgba(191,167,255,0.25), 0 0 25px rgba(191,167,255,0.08);
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; justify-content: flex-end; flex-shrink: 0; }
/* أزرار الشريط العلوي: أصغر من أزرار المحتوى */
.nav-actions .btn { padding: 8px 18px; font-size: 0.87rem; gap: 7px; border-radius: 8px; }
/* Premium WhatsApp button in nav */
.nav-actions .btn-wa {
 background: linear-gradient(135deg, #1fa04e, #128C7E);
 border: none;
 box-shadow: 0 2px 12px rgba(37,211,102,0.2);
 transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease);
}
.nav-actions .btn-wa:hover {
 transform: translateY(-1px);
 box-shadow: 0 6px 25px rgba(37,211,102,0.35);
}
.nav-actions .btn-wa:active {
 transform: translateY(0);
}

/* لغة: العربية | English */
.nav-lang,
.drawer-lang {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 0.82rem;
 font-weight: 600;
 letter-spacing: 0.02em;
 color: var(--muted);
 white-space: nowrap;
 flex-shrink: 0;
}
.drawer-lang {
 justify-content: center;
 width: 100%;
 padding: 10px 0 6px;
 margin-bottom: 8px;
 border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-lang-current {
 color: var(--text);
 opacity: 0.95;
}
.nav-lang-sep {
 opacity: 0.45;
 font-weight: 400;
 user-select: none;
}
button.nav-lang-btn.nav-lang-link {
 background: none;
 border: none;
 cursor: pointer;
 font: inherit;
 color: inherit;
 padding: 0;
 text-decoration: none;
}
button.nav-lang-btn.nav-lang-link:hover {
 color: var(--gold);
}
a.nav-lang-link {
 color: var(--gold-light);
 text-decoration: none;
 transition: color var(--t);
}
a.nav-lang-link:hover {
 color: var(--gold);
 text-decoration: underline;
}

/* Hamburger */
.hamburger {
 display: none;
 flex-direction: column;
 gap: 5px;
 padding: 6px;
 border-radius: 8px;
 transition: background var(--t);
}
.hamburger:hover { background: rgba(255,255,255,0.07); }
.hamburger span {
 width: 24px; height: 2px;
 background: var(--text);
 border-radius: 2px;
 display: block;
 transition: transform var(--t) var(--ease), opacity var(--t);
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Mobile Drawer ===== */
.drawer {
 position: fixed;
 top: 0; right: 0; bottom: 0; left: 0;
 height: 100vh;
 height: 100dvh;
 max-height: 100dvh;
 z-index: 990;
 background: rgba(6,4,12,0.98);
 backdrop-filter: var(--blur);
 display: flex;
 flex-direction: column;
 align-items: stretch;
 justify-content: flex-start;
 gap: 32px;
 padding: calc(90px + env(safe-area-inset-top)) 24px calc(56px + env(safe-area-inset-bottom));
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior: contain;
 touch-action: pan-y;
 scrollbar-width: thin;
 scrollbar-color: var(--gold) transparent;
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.35s var(--ease);
}
.drawer::-webkit-scrollbar { width: 6px; }
.drawer::-webkit-scrollbar-track { background: transparent; }
.drawer::-webkit-scrollbar-thumb {
 background: linear-gradient(180deg, var(--gold), var(--orange));
 border-radius: 3px;
}
.drawer.open {
 opacity: 1;
 pointer-events: all;
}
.drawer a {
 font-size: 1.55rem;
 font-weight: 800;
 color: var(--text-2);
 transition: color var(--t), transform var(--t) var(--ease-spring);
 transform: translateY(20px);
 text-align: center;
 flex-shrink: 0;
 padding: 14px 18px;
 border-radius: 14px;
 border: 1px solid var(--border);
 background: rgba(255,255,255,0.03);
}
.drawer.open a { transform: translateY(0); }
.drawer a:hover,
.drawer a:focus-visible {
 color: var(--gold);
 border-color: var(--border-gold);
 background: rgba(191,167,255,0.08);
}

/* أزرار القائمة الجانبية — تفوق على أنماط روابط النص */
.drawer a.drawer-btn {
 font-size: 1.05rem;
 font-weight: 900;
 padding: 16px 28px;
 align-self: center;
 width: 100%;
 max-width: 320px;
 flex-shrink: 0;
 justify-content: center;
}
.drawer a.btn-ghost.drawer-btn {
 margin-top: 20px;
}
.drawer a.btn-fire.drawer-btn {
 background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--orange));
 color: #070509;
 border: none;
 box-shadow: 0 6px 30px rgba(191,167,255,0.4);
 margin-top: 12px;
}
.drawer a.btn-fire.drawer-btn:hover,
.drawer a.btn-fire.drawer-btn:focus-visible {
 color: #070509;
 border: none;
 background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--orange));
 filter: brightness(1.06);
 box-shadow: 0 14px 55px rgba(191,167,255,0.55);
}
.drawer a.btn-ghost.drawer-btn {
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(255,255,255,0.15);
 color: var(--text);
}
.drawer a.btn-ghost.drawer-btn:hover,
.drawer a.btn-ghost.drawer-btn:focus-visible {
 border-color: var(--border-gold);
 color: var(--gold);
 background: var(--gold-dim);
}

/* ===== HERO ===== */
.hero {
 position: relative;
 min-height: 100svh;
 display: flex;
 align-items: center;
 overflow: hidden;
 padding-top: 70px;
}

#fw-canvas {
 position: absolute;
 inset: 0;
 width: 100%; height: 100%;
 z-index: 0;
}

/* Star field overlay */
#star-canvas {
 position: absolute;
 inset: 0;
 width: 100%; height: 100%;
 z-index: 0;
 opacity: 0.6;
}

/* Floating embers overlay */
#embers-canvas {
 position: absolute;
 inset: 0;
 width: 100%; height: 100%;
 z-index: 0;
 pointer-events: none;
}

.hero-gradient {
 position: absolute;
 inset: 0;
 background:
 radial-gradient(ellipse 80% 60% at 50% 100%, rgba(191,167,255,0.06) 0%, transparent 60%),
 radial-gradient(ellipse 60% 40% at 80% 20%, rgba(124,58,237,0.09) 0%, transparent 50%),
 linear-gradient(to bottom, rgba(6,4,12,0.25) 0%, rgba(6,4,12,0.55) 50%, rgba(6,4,12,0.96) 100%);
 z-index: 1;
}

.hero-body {
 position: relative;
 z-index: 2;
 width: 100%;
 padding: 80px clamp(16px,5vw,40px) 100px;
 max-width: 980px;
 margin: 0 auto;
 text-align: center;
}

/* Floating badge */
.hero-label {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 12px 28px;
 border-radius: var(--r-pill);
 font-size: clamp(0.78rem, 1.5vw, 0.95rem);
 font-weight: 800;
 letter-spacing: 0.06em;
 border: 1px solid rgba(255,215,0,0.5);
 background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,165,0,0.08));
 color: #fff8dc;
 backdrop-filter: var(--blur-sm);
 margin-bottom: 28px;
 animation: heroIn 0.8s var(--ease) both;
 box-shadow: 0 0 20px rgba(255,215,0,0.15), 0 0 40px rgba(255,165,0,0.08);
 text-shadow: 0 0 12px rgba(255,215,0,0.3);
}
.hero-label-item {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 white-space: nowrap;
}
.hero-label-sep {
 opacity: 0.5;
 font-size: 0.6rem;
 user-select: none;
}
@media (max-width: 600px) {
 .hero-label {
 flex-wrap: wrap;
 justify-content: center;
 gap: 6px 8px;
 padding: 10px 18px;
 font-size: 0.72rem;
 }
 .hero-label-item {
 white-space: normal;
 }
 .hero-label-sep {
 display: none;
 }
}
.hero-label-pulse {
 width: 7px; height: 7px;
 background: var(--gold);
 border-radius: 50%;
 box-shadow: 0 0 0 0 rgba(191,167,255,0.5);
 animation: ripple 2s ease infinite;
}
@keyframes ripple {
 0% { box-shadow: 0 0 0 0 rgba(191,167,255,0.5); }
 70% { box-shadow: 0 0 0 8px rgba(191,167,255,0); }
 100% { box-shadow: 0 0 0 0 rgba(191,167,255,0); }
}

.hero-title {
 font-size: clamp(2.4rem, 5.5vw, 4.5rem);
 font-weight: 900;
 line-height: 1.1;
 letter-spacing: -0.025em;
 margin-bottom: 22px;
 animation: heroIn 0.9s var(--ease) 0.1s both;
}
.hero-sub {
 font-size: clamp(1rem, 2vw, 1.2rem);
 color: var(--text-2);
 max-width: 640px;
 margin: 0 auto 42px;
 line-height: 1.75;
 animation: heroIn 0.9s var(--ease) 0.2s both;
}

.hero-cta {
 display: flex;
 gap: 14px;
 justify-content: center;
 flex-wrap: wrap;
 margin-bottom: 70px;
 animation: heroIn 0.9s var(--ease) 0.3s both;
}

/* Stats strip */
.hero-stats {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2px;
 background: rgba(255,255,255,0.04);
 border: 1px solid var(--border);
 border-radius: var(--r);
 overflow: hidden;
 backdrop-filter: var(--blur);
 animation: heroIn 0.9s var(--ease) 0.4s both;
}
.hero-stat {
 padding: 24px 16px;
 text-align: center;
 position: relative;
 transition: background var(--t);
}
.hero-stat:not(:last-child)::after {
 content: '';
 position: absolute;
 top: 20%; left: 0;
 width: 1px; height: 60%;
 background: var(--border);
}
.hero-stat:hover { background: rgba(191,167,255,0.04); }
.stat-num {
 font-size: clamp(1.7rem, 3vw, 2.5rem);
 font-weight: 900;
 line-height: 1;
 margin-bottom: 4px;
 background: linear-gradient(135deg, var(--gold-light), var(--orange));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
.stat-label {
 font-size: 0.78rem;
 color: var(--text-2);
 font-weight: 600;
}

/* Scroll arrow */
.scroll-hint {
 position: absolute;
 bottom: 32px; left: 50%;
 transform: translateX(-50%);
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
 font-size: 0.7rem;
 color: var(--text-3);
 letter-spacing: 0.1em;
 text-transform: uppercase;
 animation: scrollBounce 2.5s ease infinite;
}
.scroll-line {
 width: 1px; height: 38px;
 background: linear-gradient(to bottom, var(--gold), transparent);
}
@keyframes scrollBounce {
 0%,100% { transform: translateX(-50%) translateY(0); opacity:0.7; }
 50% { transform: translateX(-50%) translateY(8px); opacity:1; }
}

@keyframes heroIn {
 from { opacity:0; transform: translateY(28px); }
 to { opacity:1; transform: translateY(0); }
}

/* ===== Ticker ===== */
.ticker-wrap {
 background: linear-gradient(90deg,
 var(--gold) 0%, var(--orange) 25%, var(--fire) 50%,
 var(--brand) 75%, var(--gold) 100%);
 background-size: 300% 100%;
 animation: gradMove 8s linear infinite;
 padding: 13px 0;
 overflow: hidden;
 position: relative;
 z-index: 1;
}
@keyframes gradMove {
 0% { background-position: 0% 50%; }
 100% { background-position: 300% 50%; }
}
.ticker-scroll {
 display: flex;
 gap: 56px;
 white-space: nowrap;
 animation: ticker 22s linear infinite;
 will-change: transform;
}
.ticker-item {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-size: 0.82rem;
 font-weight: 900;
 color: #000;
 letter-spacing: 0.03em;
}
.ticker-item .ticker-ico {
 font-size: 0.92rem;
 color: rgba(0, 0, 0, 0.72);
}
@keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }

@keyframes revealIn {
 from {
 opacity: 0;
 transform: translateY(48px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

/* ===== Section Reveal ===== */
.reveal {
 opacity: 0;
 transform: translateY(48px);
 transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.on {
 opacity: 1;
 transform: translateY(0);
}
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }
.d6 { transition-delay: 0.48s; }

/* شاشات دقيقة ومؤشر فأرة: ظهور أقسام الصفحة بـ keyframes (الجوال يستبدله بحركة لمسیة لاحقاً) */
@media (prefers-reduced-motion: no-preference) {
 @media (hover: hover),
 ((hover: none) and (pointer: fine)) {
 .reveal {
 transition: none;
 }
 .reveal.on {
 animation: revealIn 0.75s var(--ease) both;
 }
 .reveal.on.d1 { animation-delay: 0.08s; }
 .reveal.on.d2 { animation-delay: 0.16s; }
 .reveal.on.d3 { animation-delay: 0.24s; }
 .reveal.on.d4 { animation-delay: 0.32s; }
 .reveal.on.d5 { animation-delay: 0.40s; }
 .reveal.on.d6 { animation-delay: 0.48s; }
 }
}

/* ===== Types Section ===== */
.types-sec {
 padding: clamp(72px,10vw,112px) 0;
 background: var(--bg);
 position: relative;
}

.types-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
 gap: 14px;
}

/* تجميع أنواع الألعاب النارية (صفحات الأحياء وغيرها) */
.types-organizer {
 display: flex;
 gap: 18px;
 align-items: flex-start;
 margin-bottom: clamp(28px, 4vw, 40px);
 padding: 22px 22px 20px;
 border-radius: var(--r-lg);
 border: 1px solid rgba(191, 167, 255, 0.22);
 background: linear-gradient(135deg, rgba(124, 58, 237, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.types-organizer-icon {
 flex-shrink: 0;
 width: 48px;
 height: 48px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 14px;
 background: rgba(191, 167, 255, 0.12);
 border: 1px solid rgba(191, 167, 255, 0.25);
 color: var(--gold-light);
 font-size: 1.25rem;
}
.types-organizer-title {
 margin: 0 0 8px;
 font-size: 1.05rem;
 font-weight: 800;
 color: var(--text);
 line-height: 1.35;
}
.types-organizer-text {
 margin: 0;
 font-size: 0.9rem;
 line-height: 1.75;
 color: var(--text-2);
}
.types-groups-stack {
 display: flex;
 flex-direction: column;
 gap: clamp(32px, 5vw, 48px);
}
.types-group-head {
 margin-bottom: 14px;
}
.types-group-title {
 margin: 0 0 6px;
 font-size: 1.02rem;
 font-weight: 800;
 color: var(--gold-light);
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
 line-height: 1.4;
}
.types-group-title i {
 opacity: 0.9;
 font-size: 0.95em;
}
.types-group-lead {
 margin: 0;
 font-size: 0.86rem;
 line-height: 1.68;
 color: var(--text-2);
 max-width: 68ch;
}
@media (max-width: 560px) {
 .types-organizer {
 flex-direction: column;
 align-items: stretch;
 }
 .types-organizer-icon {
 margin-inline: auto;
 }
}

.type-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 28px 16px 24px;
 text-align: center;
 cursor: default;
 position: relative;
 overflow: hidden;
 transition: transform var(--t) var(--ease-spring),
 box-shadow var(--t) var(--ease),
 border-color var(--t) var(--ease),
 background var(--t) var(--ease);
 isolation: isolate;
}
/* top glow bar on hover */
.type-card::after {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--gold), var(--orange));
 transform: scaleX(0);
 transform-origin: right;
 transition: transform var(--t) var(--ease);
 border-radius: 3px 3px 0 0;
}
.type-card:hover {
 border-color: rgba(191,167,255,0.3);
 background: rgba(191,167,255,0.04);
 transform: translateY(-8px) scale(1.02);
 box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(191,167,255,0.1);
}
.type-card:hover::after { transform: scaleX(1); transform-origin: left; }

.type-emoji {
 font-size: 2.5rem;
 display: block;
 margin-bottom: 12px;
 filter: drop-shadow(0 0 10px rgba(191,167,255,0.35));
 transition: transform var(--t) var(--ease-spring);
}
.type-emoji.type-emoji--illu {
 font-size: 0;
 line-height: 0;
 filter: none;
 /* نفس لغة رقاقات التواصل في التذييل (.local-entity-link--social) */
 display: flex;
 align-items: center;
 justify-content: center;
 width: 64px;
 height: 64px;
 margin-inline: auto;
 padding: 6px;
 box-sizing: border-box;
 border: 1px solid rgba(255, 255, 255, 0.14);
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.04);
 transition: background 0.15s ease, border-color 0.15s ease, transform var(--t) var(--ease-spring);
}
.type-emoji.type-emoji--illu img {
 width: 44px;
 height: 44px;
 object-fit: contain;
 display: block;
 margin: 0;
 filter: drop-shadow(0 2px 10px rgba(191, 167, 255, 0.22));
}
.type-emoji.type-emoji--fa i {
 font-size: 2.15rem;
 line-height: 1;
 color: rgba(230, 220, 255, 0.95);
}
.type-card:hover .type-emoji { transform: scale(1.2) rotate(-5deg); }
.type-card:hover .type-emoji.type-emoji--illu {
 border-color: rgba(196, 181, 253, 0.35);
 background: rgba(196, 181, 253, 0.08);
}
.type-card:hover .type-emoji.type-emoji--illu img {
 filter: drop-shadow(0 3px 14px rgba(191, 167, 255, 0.38));
}

.type-name {
 font-size: 0.88rem;
 font-weight: 700;
 line-height: 1.4;
 color: var(--text);
}

.type-desc {
 margin: 10px 0 0;
 font-size: 0.76rem;
 line-height: 1.65;
 color: var(--text-2);
}

.type-badge {
 display: inline-block;
 margin-top: 10px;
 padding: 3px 10px;
 border-radius: var(--r-pill);
 font-size: 0.68rem;
 font-weight: 800;
}
.badge-hot { background: rgba(191,167,255,0.14); color: var(--gold); border: 1px solid rgba(191,167,255,0.3); }
.badge-in { background: rgba(124,58,237,0.10); color: var(--brand-light); border: 1px solid rgba(124,58,237,0.28); }
.badge-soon { background: rgba(124,58,237,0.12); color: var(--brand-light); border: 1px solid rgba(124,58,237,0.3); }

/* ===== Events Section ===== */
.events-sec {
 padding: clamp(72px,10vw,112px) 0;
 background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}

/* Horizontal scroll on mobile */
.events-scroll {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 22px;
}

.event-card {
 background: linear-gradient(150deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
 padding: 36px 28px;
 transition: transform var(--t) var(--ease-spring),
 box-shadow var(--t) var(--ease),
 border-color var(--t);
 position: relative;
 overflow: hidden;
 isolation: isolate;
}

/* Gradient corner accent */
.event-card::before {
 content: '';
 position: absolute;
 top: -60px; left: -60px;
 width: 140px; height: 140px;
 background: radial-gradient(circle, rgba(191,167,255,0.08), transparent 70%);
 transition: opacity var(--t);
 opacity: 0;
}
.event-card:hover { border-color: rgba(191,167,255,0.2); transform: translateY(-10px); box-shadow: var(--shadow-xl), var(--shadow-glow); }
.event-card:hover::before { opacity: 1; }

.event-icon-wrap {
 width: 64px; height: 64px;
 border-radius: 18px;
 background: linear-gradient(135deg, rgba(191,167,255,0.14), rgba(147,51,234,0.1));
 border: 1px solid rgba(191,167,255,0.18);
 display: flex; align-items: center; justify-content: center;
 font-size: 1.7rem;
 margin-bottom: 22px;
 transition:
 transform var(--t) var(--ease-spring),
 background 0.15s ease,
 border-color 0.15s ease;
}
.event-icon-wrap--flag {
 background: linear-gradient(135deg, rgba(0, 108, 53, 0.18), rgba(0, 60, 30, 0.12));
 border-color: rgba(0, 108, 53, 0.35);
 padding: 6px;
}
.event-icon-wrap--flag img {
 width: 52px;
 height: auto;
 max-height: 40px;
 object-fit: contain;
 border-radius: 4px;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
 display: block;
 image-rendering: auto;
}
.event-icon-wrap--illu {
 padding: 6px;
 font-size: 0;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid rgba(255, 255, 255, 0.14);
}
.event-icon-wrap--illu img {
 width: 44px;
 height: 44px;
 object-fit: contain;
 display: block;
 filter: drop-shadow(0 2px 10px rgba(191, 167, 255, 0.22));
}
.event-card:hover .event-icon-wrap { transform: scale(1.12) rotate(-8deg); }
.event-card:hover .event-icon-wrap--illu {
 border-color: rgba(196, 181, 253, 0.35);
 background: rgba(196, 181, 253, 0.08);
}
.event-card:hover .event-icon-wrap--illu img {
 filter: drop-shadow(0 3px 14px rgba(191, 167, 255, 0.36));
}

.event-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 10px; }
.event-desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.72; }

.event-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.event-tag {
 padding: 4px 12px;
 border-radius: var(--r-pill);
 font-size: 0.72rem;
 font-weight: 700;
 background: rgba(255,255,255,0.05);
 border: 1px solid var(--border);
 color: var(--text-2);
 transition: background var(--t), color var(--t), border-color var(--t);
}
.event-card:hover .event-tag { background: rgba(191,167,255,0.07); border-color: rgba(191,167,255,0.2); color: var(--gold-light); }

/* ===== Gallery ===== */
.gallery-sec {
 padding: clamp(72px,10vw,112px) 0;
 background: var(--bg);
 border-top: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
}

.gallery-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: clamp(14px, 2.5vw, 22px);
}

/* ---- Gallery Card ---- */
.gallery-card {
 position: relative;
 margin: 0;
 border-radius: var(--r-lg);
 overflow: hidden;
 border: 1px solid var(--border);
 background: var(--bg-card);
 transition: transform var(--t) var(--ease-spring), border-color var(--t), box-shadow var(--t);
}
.gallery-card:hover {
 border-color: rgba(191,167,255,0.22);
 transform: translateY(-6px);
 box-shadow: var(--shadow-xl), var(--shadow-glow);
}

/* Alternating aspect ratios for visual rhythm */
.gallery-card:nth-child(2) .gallery-open img,
.gallery-card:nth-child(5) .gallery-open img {
 aspect-ratio: 1 / 1;
}
.gallery-card:nth-child(3) .gallery-open img,
.gallery-card:nth-child(6) .gallery-open img {
 aspect-ratio: 4 / 5;
}

.gallery-open {
 display: block;
 width: 100%;
 padding: 0;
 border: none;
 background: none;
 cursor: zoom-in;
 line-height: 0;
 position: relative;
}
.gallery-open:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 4px;
}
.gallery-open img {
 width: 100%;
 height: auto;
 aspect-ratio: 3 / 4;
 object-fit: cover;
 vertical-align: middle;
 transition: transform 0.45s var(--ease);
}
.gallery-card:hover .gallery-open img { transform: scale(1.05); }

/* ---- Overlay on hover ---- */
.gallery-overlay {
 position: absolute;
 inset: 0;
 z-index: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 6px;
 background: linear-gradient(180deg, rgba(106,13,173,0.45) 0%, rgba(12,8,24,0.85) 100%);
 opacity: 0;
 transition: opacity 0.35s var(--ease);
 pointer-events: none;
}
.gallery-card:hover .gallery-overlay {
 opacity: 1;
}
.gallery-overlay-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background: rgba(255,255,255,0.12);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 color: #fff;
 font-size: 1.25rem;
 transform: translateY(12px) scale(0.85);
 transition: transform 0.35s var(--ease-spring), background 0.35s;
 border: 1px solid rgba(255,255,255,0.18);
}
.gallery-card:hover .gallery-overlay-icon {
 transform: translateY(0) scale(1);
}
.gallery-overlay-label {
 font-size: 0.8rem;
 color: rgba(255,255,255,0.8);
 letter-spacing: 0.05em;
 transform: translateY(10px);
 opacity: 0;
 transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
 font-weight: 500;
}
.gallery-card:hover .gallery-overlay-label {
 transform: translateY(0);
 opacity: 1;
}

/* ---- Card index badge ---- */
.gallery-index-badge {
 position: absolute;
 top: 10px;
 right: 10px;
 z-index: 2;
 min-width: 28px;
 height: 28px;
 padding: 0 8px;
 border-radius: 20px;
 background: rgba(7, 9, 15, 0.88);
 border: 1px solid rgba(191,167,255,0.25);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.7rem;
 font-weight: 600;
 color: var(--gold-light);
 pointer-events: none;
 transition: transform 0.3s var(--ease-spring), opacity 0.3s;
}
.gallery-card:hover .gallery-index-badge {
 transform: scale(0.92);
 opacity: 0.7;
}

/* ---- Lightbox ---- */
.gallery-lightbox {
 position: fixed;
 inset: 0;
 z-index: 10050;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: clamp(12px, 4vw, 28px);
}
.gallery-lightbox[hidden] { display: none !important; }

.gallery-lightbox-scrim {
 position: absolute;
 inset: 0;
 border: none;
 padding: 0;
 background: rgba(3, 5, 8, 0.92);
 cursor: pointer;
}

.gallery-lightbox-frame {
 position: relative;
 z-index: 1;
 max-width: min(96vw, 900px);
 max-height: min(92vh, 1200px);
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.gallery-lightbox-frame img {
 display: block;
 max-width: 100%;
 max-height: min(80vh, 1000px);
 width: auto;
 height: auto;
 object-fit: contain;
 border-radius: var(--r-sm);
 box-shadow: 0 24px 80px rgba(0,0,0,0.85), 0 0 0 1px rgba(191,167,255,0.15);
}

/* Lightbox close button */
.gallery-lightbox-close {
 position: absolute;
 top: -12px;
 left: -12px;
 z-index: 3;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: 1px solid rgba(191,167,255,0.35);
 background: rgba(7, 9, 15, 0.95);
 color: var(--gold-light);
 font-size: 1.15rem;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: transform var(--t) var(--ease-spring), background var(--t), border-color var(--t);
}
.gallery-lightbox-close:hover {
 background: rgba(191,167,255,0.12);
 border-color: var(--gold);
 transform: scale(1.06);
}

/* Lightbox prev / next navigation arrows */
.gallery-lightbox-prev,
.gallery-lightbox-next {
 position: absolute;
 top: 50%;
 z-index: 3;
 width: 48px;
 height: 48px;
 border-radius: 50%;
 border: 1px solid rgba(191,167,255,0.25);
 background: rgba(7, 9, 15, 0.88);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 color: var(--gold-light);
 font-size: 1.1rem;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transform: translateY(-50%);
 transition: transform var(--t) var(--ease-spring), background var(--t), border-color var(--t), opacity var(--t);
 opacity: 0;
}
.gallery-lightbox-frame:hover .gallery-lightbox-prev,
.gallery-lightbox-frame:hover .gallery-lightbox-next {
 opacity: 1;
}
.gallery-lightbox-prev:focus-visible,
.gallery-lightbox-next:focus-visible {
 opacity: 1;
}
.gallery-lightbox-prev { left: -56px; }
.gallery-lightbox-next { right: -56px; }
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
 background: rgba(191,167,255,0.15);
 border-color: var(--gold);
 transform: translateY(-50%) scale(1.08);
}
.gallery-lightbox-prev:active,
.gallery-lightbox-next:active {
 transform: translateY(-50%) scale(0.95);
}

/* Lightbox info bar (counter + caption) */
.gallery-lightbox-info {
 width: 100%;
 max-width: 900px;
 margin-top: 14px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 6px;
}
.gallery-lightbox-counter {
 font-size: 0.8rem;
 font-weight: 600;
 color: var(--gold-light);
 background: rgba(191,167,255,0.08);
 padding: 4px 14px;
 border-radius: 20px;
 border: 1px solid rgba(191,167,255,0.15);
 white-space: nowrap;
 letter-spacing: 0.05em;
}
.gallery-lightbox-caption {
 font-size: 0.85rem;
 color: rgba(255,255,255,0.75);
 text-align: center;
 flex: 1;
 line-height: 1.5;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
 .gallery-grid { grid-template-columns: repeat(2, 1fr); }
 .gallery-lightbox-prev { left: 4px; }
 .gallery-lightbox-next { right: 4px; }
}

@media (max-width: 520px) {
 .gallery-grid { grid-template-columns: 1fr; }
 .gallery-lightbox-close {
 top: 8px;
 left: 8px;
 }
 .gallery-lightbox-prev,
 .gallery-lightbox-next {
 width: 40px;
 height: 40px;
 font-size: 0.95rem;
 opacity: 1;
 }
 .gallery-lightbox-prev { left: 2px; }
 .gallery-lightbox-next { right: 2px; }
 .gallery-lightbox-info {
 flex-direction: column;
 gap: 6px;
 }
}

/* ===== Clients page ===== */
.clients-sec {
 padding: clamp(72px, 10vw, 112px) 0;
 background: var(--bg);
 border-top: 1px solid var(--border);
}

.clients-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: clamp(14px, 2.5vw, 22px);
}

.clients-card {
 margin: 0;
 border-radius: var(--r-lg);
 overflow: hidden;
 border: 1px solid var(--border);
 background: var(--bg-card);
 transition: transform var(--t) var(--ease-spring), border-color var(--t), box-shadow var(--t);
}

.clients-card:hover {
 border-color: rgba(191, 167, 255, 0.22);
 transform: translateY(-6px);
 box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.clients-card-img-wrap {
 display: flex;
 align-items: center;
 justify-content: center;
 aspect-ratio: 16 / 10;
 padding: clamp(12px, 2.2vw, 20px);
 background: rgba(255, 255, 255, 0.04);
 border-bottom: 1px solid var(--border);
}

.clients-card-img-wrap img {
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
 object-fit: contain;
}

.clients-card-title {
 margin: 0;
 padding: clamp(14px, 2vw, 20px) clamp(16px, 2.5vw, 22px);
 font-size: clamp(1rem, 2.1vw, 1.12rem);
 font-weight: 700;
 color: var(--text);
 text-align: center;
 line-height: 1.35;
}

@media (max-width: 900px) {
 .clients-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
 .clients-grid { grid-template-columns: 1fr; }
}

/* ===== Why Section ===== */
.why-sec {
 padding: clamp(72px,10vw,112px) 0;
 background: var(--bg);
}

.why-grid {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 18px;
}

.why-item {
 display: flex;
 gap: 22px;
 align-items: flex-start;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 28px 26px;
 transition: transform var(--t) var(--ease-spring),
 border-color var(--t), background var(--t);
 position: relative;
 overflow: hidden;
}
.why-item::after {
 content: '';
 position: absolute;
 top: 0; bottom: 0; right: 0;
 width: 2px;
 background: linear-gradient(to bottom, var(--gold), var(--orange));
 transform: scaleY(0);
 transform-origin: bottom;
 transition: transform 0.35s var(--ease);
}
.why-item:hover { border-color: rgba(191,167,255,0.2); background: rgba(191,167,255,0.03); transform: translateX(-4px); }
.why-item:hover::after { transform: scaleY(1); transform-origin: top; }

.why-num {
 font-size: 2.2rem;
 font-weight: 900;
 line-height: 1;
 flex-shrink: 0;
 width: 52px;
 background: linear-gradient(135deg, var(--gold), var(--orange));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}
.why-content h3 { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.why-content p { font-size: 0.86rem; color: var(--text-2); line-height: 1.72; }
.why-content p a {
 color: var(--gold-light);
 text-decoration: underline;
 text-underline-offset: 3px;
}
.why-content p a:hover { color: var(--gold); }

/* ===== Coverage ===== */
.coverage-sec {
 padding: clamp(72px,10vw,112px) 0;
 background: var(--bg-2);
}

.cov-hero {
 background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(191,167,255,0.06));
 border: 1px solid rgba(191,167,255,0.15);
 border-radius: var(--r-lg);
 padding: clamp(32px,5vw,52px);
 text-align: center;
 margin-bottom: 48px;
 position: relative;
 overflow: hidden;
}
.cov-hero::before {
 content: '🗺️';
 position: absolute;
 font-size: 12rem;
 opacity: 0.04;
 top: -20px; left: 50%;
 transform: translateX(-50%);
 pointer-events: none;
 filter: grayscale(1);
}
.cov-hero h3 { font-size: clamp(1.4rem,3vw,2rem); font-weight: 900; margin-bottom: 10px; }
.cov-hero p { color: var(--text-2); max-width: 480px; margin: 0 auto; }

.regions {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
 gap: 12px;
}

/* قائمة المناطق الـ13: قالب مخفي يُعرض في النافذة المنبثقة */
#coverageRegionsSource.coverage-regions-source-hidden {
 display: none !important;
}
.coverage-regions-open-btn {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 padding: 12px 22px !important;
 font-size: 0.88rem !important;
 font-weight: 700 !important;
}
.coverage-regions-modal .nh-district-modal-panel {
 width: min(96vw, 720px);
}
.coverage-regions-modal-grid {
 margin-top: 6px;
}

/* مدن المملكة: قالب مخفي يُعرض في النافذة المنبثقة */
#saudi-cities.saudi-cities-seo-only {
 display: none !important;
}
.saudi-cities-modal .nh-district-modal-panel {
 width: min(96vw, 720px);
 max-height: min(90vh, 880px);
}
.saudi-cities-modal-body .nh-intro {
 text-align: center;
 margin-bottom: clamp(18px, 3vw, 26px);
}
.saudi-cities-modal-body .nh-title {
 font-size: clamp(1.05rem, 2.5vw, 1.35rem);
 font-weight: 900;
 margin: 0 0 10px;
 padding: 0;
 padding-inline-start: 48px;
 color: var(--gold-light);
 letter-spacing: -0.02em;
}
.saudi-cities-modal-body .nh-desc {
 margin: 0 auto;
 max-width: 520px;
 font-size: 0.84rem;
 color: var(--text-2);
 line-height: 1.65;
 text-align: center;
}
.saudi-cities-modal-body .neighborhoods-grid {
 margin-top: 6px;
 position: relative;
 z-index: 2;
}

.region {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 13px 16px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 font-size: 0.86rem;
 font-weight: 700;
 transition: all var(--t) var(--ease-spring);
}
.region:hover {
 border-color: rgba(191,167,255,0.3);
 background: rgba(191,167,255,0.06);
 transform: scale(1.04);
 color: var(--gold-light);
}
a.region {
 text-decoration: none;
 color: inherit;
 cursor: pointer;
}
a.region:visited {
 color: inherit;
}
a.region:focus-visible {
 outline: 2px solid rgba(196, 181, 253, 0.75);
 outline-offset: 2px;
}
.r-dot {
 width: 8px; height: 8px;
 background: radial-gradient(circle, var(--gold-light), var(--orange));
 border-radius: 50%;
 flex-shrink: 0;
 box-shadow: 0 0 8px rgba(191,167,255,0.5);
}

/* أحياء الرياض — محتوى محلي مرئي */
.nh-block {
 margin-top: clamp(40px, 6vw, 56px);
 padding-top: clamp(28px, 4vw, 40px);
 border-top: 1px solid var(--border);
}
.nh-intro { text-align: center; margin-bottom: clamp(28px, 4vw, 40px); }
.nh-title {
 font-size: clamp(1.25rem, 2.8vw, 1.65rem);
 font-weight: 900;
 margin-bottom: 12px;
 letter-spacing: -0.02em;
}
.nh-desc {
 color: var(--text-2);
 font-size: 0.92rem;
 line-height: 1.75;
 max-width: 640px;
 margin: 0 auto;
}
.nh-group { margin-bottom: clamp(22px, 3vw, 32px); }
.nh-group:last-child { margin-bottom: 0; }
.nh-group-title {
 font-size: 0.95rem;
 font-weight: 800;
 margin-bottom: 10px;
 color: var(--gold-light);
 letter-spacing: -0.01em;
}
.neighborhoods-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
 gap: 10px;
}
.nh-chip {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 flex-wrap: wrap;
 padding: 10px 12px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 font-size: 0.8rem;
 font-weight: 700;
 text-align: center;
 line-height: 1.35;
 color: inherit;
 text-decoration: none;
 transition: border-color var(--t) var(--ease-spring), background var(--t) var(--ease-spring), transform var(--t) var(--ease-spring), color var(--t) var(--ease-spring);
}
.nh-chip:hover {
 border-color: rgba(191,167,255,0.28);
 background: rgba(191,167,255,0.06);
 transform: translateY(-2px);
 color: var(--gold-light);
}
.nh-pc {
 font-size: 0.68rem;
 font-weight: 600;
 opacity: 0.72;
 letter-spacing: 0.02em;
}

/* أحياء الرياض: قالب مخفي بصرياً لكنه قابل للفهرسة من Google */
#riyadhDistrictsSource.riyadh-districts-source-hidden {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 clip-path: inset(50%);
 white-space: nowrap;
 border: 0;
}
.riyadh-districts-all-modal .nh-district-modal-panel {
 width: min(96vw, 720px);
 max-height: min(90vh, 880px);
}
.riyadh-districts-all-modal-body .nh-intro {
 text-align: center;
 margin-bottom: clamp(18px, 3vw, 26px);
}
.riyadh-districts-all-modal-body .nh-title {
 font-size: clamp(1.05rem, 2.5vw, 1.35rem);
 font-weight: 900;
 margin: 0 0 10px;
 padding: 0;
 padding-inline-start: 48px;
 color: var(--gold-light);
 letter-spacing: -0.02em;
}
.riyadh-districts-all-modal-body .nh-desc {
 margin: 0 auto;
 max-width: 520px;
 font-size: 0.84rem;
 color: var(--text-2);
 line-height: 1.65;
 text-align: center;
}
.riyadh-districts-all-modal-body .nh-group {
 margin-bottom: clamp(20px, 3vw, 28px);
}
.riyadh-districts-all-modal-body .nh-group:last-child {
 margin-bottom: 0;
}

.nh-district-modal {
 position: fixed;
 inset: 0;
 z-index: 10051;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: clamp(12px, 4vw, 28px);
}
.nh-district-modal[hidden] { display: none !important; }

/* محتوى يُنسخ إلى النافذة يحمل غالبًا .reveal؛ المراقب يعمل مرة عند التحميل فلا يُضاف .on — نجعل النسخ داخل النافذة مرئية */
.nh-district-modal .reveal {
 opacity: 1;
 transform: none;
 transition: none;
 animation: none;
}

.nh-district-modal-scrim {
 position: absolute;
 inset: 0;
 z-index: 0;
 border: none;
 padding: 0;
 background: rgba(3, 5, 8, 0.92);
 cursor: pointer;
}

.nh-district-modal-panel {
 position: relative;
 z-index: 1;
 isolation: isolate;
 width: min(96vw, 540px);
 max-height: min(88vh, 760px);
 overflow-y: auto;
 margin: 0 auto;
 padding: clamp(22px, 4vw, 30px);
 background: var(--bg-card);
 border: 1px solid rgba(191, 167, 255, 0.18);
 border-radius: var(--r-sm);
 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(191, 167, 255, 0.12);
}

.nh-district-modal-close {
 position: absolute;
 top: 10px;
 inset-inline-start: 10px;
 z-index: 2;
 width: 42px;
 height: 42px;
 border-radius: 50%;
 border: 1px solid rgba(191, 167, 255, 0.35);
 background: rgba(7, 9, 15, 0.95);
 color: var(--gold-light);
 font-size: 1.1rem;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: transform var(--t) var(--ease-spring), background var(--t), border-color var(--t);
}
.nh-district-modal-close:hover {
 background: rgba(191, 167, 255, 0.12);
 border-color: var(--gold);
 transform: scale(1.06);
}

.nh-district-modal-title {
 font-size: clamp(1.05rem, 2.5vw, 1.35rem);
 font-weight: 900;
 margin: 0 0 8px;
 padding: 0;
 padding-inline-start: 48px;
 color: var(--gold-light);
 letter-spacing: -0.02em;
}
.nh-district-modal-hint {
 margin: 0 0 18px;
 padding-inline-start: 48px;
 font-size: 0.82rem;
 color: var(--text-2);
 line-height: 1.55;
}
.nh-district-modal-grid {
 margin-top: 4px;
}

@media (max-width: 520px) {
 .nh-district-modal-title,
 .nh-district-modal-hint {
 padding-inline-start: 44px;
 }
 .riyadh-districts-all-modal-body .nh-title {
 padding-inline-start: 44px;
 }
 .saudi-cities-modal-body .nh-title {
 padding-inline-start: 44px;
 }
 .nh-district-modal-close {
 top: 8px;
 inset-inline-start: 8px;
 }
}

/* صفحات الأحياء — Hero مختصر + بطاقة معلومات + بريدكرامبس + فقرات نص */
.hood-hero {
 min-height: clamp(520px, 70vh, 680px);
}
.crumbs {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-size: 0.82rem;
 font-weight: 700;
 color: var(--text-2);
 margin-bottom: 18px;
 padding: 8px 14px;
 background: rgba(255,255,255,0.03);
 border: 1px solid var(--border);
 border-radius: 999px;
}
.crumbs a {
 color: var(--text-2);
 transition: color var(--t) var(--ease-spring);
}
.crumbs a:hover { color: var(--gold-light); }
.crumbs [aria-current="page"] { color: var(--gold-light); }

.hood-meta {
 position: relative;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 12px;
 margin-top: 36px;
 max-width: 720px;
}
.hm-item {
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 12px 16px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 text-align: start;
}
.hm-k {
 font-size: 0.72rem;
 font-weight: 600;
 color: var(--text-2);
 letter-spacing: 0.02em;
}
.hm-v {
 font-size: 0.92rem;
 font-weight: 800;
 color: var(--text);
}

.hood-prose {
 max-width: 760px;
 margin: clamp(28px, 4vw, 40px) auto 0;
 text-align: center;
}
.hood-prose p {
 color: var(--text-2);
 line-height: 1.85;
 font-size: 0.95rem;
 margin-bottom: 14px;
}
.hood-prose p:last-child { margin-bottom: 0; }

/* ===== Process ===== */
.process-sec {
 padding: clamp(72px,10vw,112px) 0;
 background: var(--bg);
}

.steps {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 position: relative;
}
.steps::before {
 content: '';
 position: absolute;
 top: 44px; right: 12.5%; left: 12.5%;
 height: 1px;
 background: linear-gradient(to left, transparent, var(--border-gold), var(--border-gold), transparent);
 z-index: 0;
}

.step {
 text-align: center;
 padding: 0 12px;
 position: relative;
 z-index: 1;
}

.step-circle {
 width: 88px; height: 88px;
 border-radius: 50%;
 background: var(--bg-2);
 border: 2px solid var(--border);
 display: flex; align-items: center; justify-content: center;
 margin: 0 auto 24px;
 font-size: 1.6rem;
 position: relative;
 transition: all var(--t) var(--ease-spring);
 box-shadow: 0 0 0 0 rgba(191,167,255,0);
}
.step:hover .step-circle {
 border-color: var(--gold);
 background: rgba(191,167,255,0.1);
 transform: scale(1.1);
 box-shadow: 0 0 0 8px rgba(191,167,255,0.08);
}

.step-n {
 position: absolute;
 top: -6px; left: -6px;
 width: 22px; height: 22px;
 background: linear-gradient(135deg, var(--gold), var(--orange));
 border-radius: 50%;
 font-size: 0.7rem;
 font-weight: 900;
 color: #000;
 display: flex; align-items: center; justify-content: center;
}

.step-title { font-size: 1rem; font-weight: 800; margin-bottom: 8px; }
.step-desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.65; }

/* كيف نعمل: قالب مخفي؛ الخطوات تُعرض في النافذة المنبثقة */
#processModalSource.process-modal-source-hidden {
 display: none !important;
}
.process-how-modal .nh-district-modal-panel {
 width: min(96vw, 920px);
 max-height: min(90vh, 900px);
}
.process-how-modal-body .sec-head {
 text-align: center;
 margin-bottom: clamp(22px, 3vw, 32px);
}
.process-how-modal-body .sec-title {
 padding-inline-start: 48px;
}
.process-how-modal-body .label {
 justify-content: center;
}
.process-how-modal-body .steps::before {
 display: none;
}
.process-how-modal-body .steps {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: clamp(18px, 3vw, 28px);
}
@media (max-width: 520px) {
 .process-how-modal-body .sec-title {
 padding-inline-start: 44px;
 }
 .process-how-modal-body .steps {
 grid-template-columns: 1fr;
 }
}

/* ===== FAQ ===== */
.faq-sec {
 padding: clamp(72px,10vw,112px) 0;
 background: var(--bg-2);
}

.faq-wrap {
 max-width: 740px;
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 10px;
}

.faq-item {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r);
 overflow: hidden;
 transition: border-color var(--t), box-shadow var(--t);
}
.faq-item.open {
 border-color: rgba(191,167,255,0.22);
 box-shadow: 0 6px 30px rgba(191,167,255,0.07);
}

.faq-btn {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 20px 24px;
 font-size: 0.96rem;
 font-weight: 700;
 text-align: right;
 color: var(--text);
 transition: color var(--t);
}
.faq-btn:hover { color: var(--gold-light); }

.faq-icon {
 width: 34px; height: 34px;
 background: rgba(255,255,255,0.05);
 border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0;
 color: var(--gold);
 font-size: 0.75rem;
 transition: transform 0.35s var(--ease), background var(--t);
}
.faq-item.open .faq-icon { transform: rotate(180deg); background: rgba(191,167,255,0.12); }

.faq-body {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.4s var(--ease);
}
.faq-inner {
 padding: 0 24px 22px;
 font-size: 0.9rem;
 color: var(--text-2);
 line-height: 1.8;
 border-top: 1px solid var(--border);
 padding-top: 18px;
}
.faq-inner strong { color: var(--gold); }
.faq-inner a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }

/* ===== CTA Final ===== */
/* صفحة الأمان — معايير وشهادات مرجعية عالمية */
.safety-certs-sec {
 padding: clamp(56px, 8vw, 88px) 0 clamp(48px, 7vw, 72px);
 background: linear-gradient(180deg, var(--bg) 0%, rgba(191, 167, 255, 0.03) 50%, var(--bg) 100%);
 border-top: 1px solid var(--border);
}
.safety-certs-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 18px;
 margin-top: clamp(28px, 4vw, 40px);
}
.safety-cert-card {
 padding: 22px 20px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 transition: border-color var(--t) var(--ease-spring), transform var(--t) var(--ease-spring), box-shadow var(--t);
}
.safety-cert-card:hover {
 border-color: rgba(191, 167, 255, 0.28);
 transform: translateY(-3px);
 box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.safety-cert-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 52px;
 min-height: 52px;
 padding: 8px 12px;
 margin-bottom: 14px;
 font-size: 0.72rem;
 font-weight: 900;
 letter-spacing: 0.06em;
 color: var(--gold-light);
 background: rgba(191, 167, 255, 0.08);
 border: 1px solid rgba(191, 167, 255, 0.25);
 border-radius: 12px;
}
.safety-cert-badge i { font-size: 1.25rem; }
.safety-cert-badge-nfpa { letter-spacing: 0.04em; font-size: 0.68rem; }
.safety-cert-badge-un i { font-size: 1.1rem; }
.safety-cert-name {
 font-size: 1.05rem;
 font-weight: 900;
 margin: 0 0 10px;
 letter-spacing: -0.02em;
}
.safety-cert-desc {
 margin: 0;
 font-size: 0.86rem;
 line-height: 1.65;
 color: var(--text-2);
}
.safety-certs-footnote {
 margin: clamp(28px, 4vw, 40px) auto 0;
 max-width: 720px;
 text-align: center;
 font-size: 0.82rem;
 line-height: 1.7;
 color: var(--text-2);
 opacity: 0.92;
}

.final-cta {
 padding: clamp(80px,12vw,130px) 0;
 background: var(--bg);
 position: relative;
 overflow: hidden;
 text-align: center;
}

/* Animated radial glow */
.final-cta::before {
 content: '';
 position: absolute;
 top: 50%; left: 50%;
 transform: translate(-50%,-50%);
 width: 700px; height: 400px;
 background: radial-gradient(ellipse, rgba(191,167,255,0.07) 0%, transparent 70%);
 animation: ctaGlow 6s ease-in-out infinite;
}
@keyframes ctaGlow {
 0%,100% { transform: translate(-50%,-50%) scale(1); opacity:0.7; }
 50% { transform: translate(-50%,-50%) scale(1.3); opacity:1; }
}

.final-cta-inner { position: relative; z-index: 1; }
.final-cta h2 {
 font-size: clamp(2rem,4vw,3.2rem);
 font-weight: 900;
 margin-bottom: 18px;
 letter-spacing: -0.02em;
}
.final-cta p {
 font-size: clamp(0.95rem,1.8vw,1.1rem);
 color: var(--text-2);
 max-width: 540px;
 margin: 0 auto 40px;
}

.cta-btns {
 display: flex;
 gap: 14px;
 justify-content: center;
 flex-wrap: wrap;
 margin-bottom: 36px;
}

.trust-chips {
 display: flex;
 gap: 20px;
 justify-content: center;
 flex-wrap: wrap;
}
.trust-chip {
 display: flex;
 align-items: center;
 gap: 7px;
 font-size: 0.82rem;
 color: var(--text-2);
}
.trust-chip i { color: var(--wa); }

/* ===== Footer ===== */
.footer {
 background: #010204;
 border-top: 1px solid var(--border);
 padding: 60px 0 32px;
}

.footer-grid {
 display: grid;
 grid-template-columns: 1.8fr 1fr 1fr;
 gap: 48px;
 padding-bottom: 48px;
 border-bottom: 1px solid var(--border);
 margin-bottom: 28px;
}

.footer-about p {
 font-size: 0.86rem;
 color: var(--text-2);
 margin-top: 16px;
 max-width: 300px;
 line-height: 1.8;
}

.footer-col-title {
 font-size: 0.75rem;
 font-weight: 800;
 color: var(--gold);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 20px;
}

.footer-links {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 10px;
 list-style: none;
 margin: 0;
 padding: 0;
}
.footer-links li {
 margin: 0;
}
.footer-links a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 0.78rem;
 font-weight: 600;
 color: var(--text);
 text-decoration: none;
 padding: 8px 14px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.15);
 backdrop-filter: var(--blur-sm);
 -webkit-backdrop-filter: var(--blur-sm);
 transition: color var(--t), background var(--t), border-color var(--t),
 transform var(--t) var(--ease-spring);
}
.footer-links a:hover {
 border-color: var(--border-gold);
 color: var(--gold);
 background: var(--gold-dim);
 transform: translateY(-2px);
}
.footer-links a:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}

.footer-contacts {
 display: flex;
 flex-direction: column;
 gap: 12px;
}
.f-contact {
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 0.86rem;
 color: var(--text-2);
}
.f-contact-icon {
 width: 34px; height: 34px;
 background: var(--bg-card);
 border-radius: 9px;
 display: flex; align-items: center; justify-content: center;
 flex-shrink: 0;
 color: var(--gold);
 border: 1px solid var(--border);
 font-size: 0.85rem;
}

.footer-bottom {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 12px;
 font-size: 0.8rem;
 color: var(--text-3);
}

/* ===== Cursor Sparkle Canvas ===== */
#cursor-canvas {
 position: fixed;
 inset: 0;
 width: 100%; height: 100%;
 z-index: 9999;
 pointer-events: none;
 touch-action: none;
}

/* ===== WhatsApp FAB ===== */
.wa-fab {
 position: fixed;
 bottom: 28px;
 left: 24px;
 z-index: 800;
 display: flex;
 align-items: center;
 gap: 0;
 background: linear-gradient(135deg, #22c55e, #15803d);
 color: #fff;
 border-radius: var(--r-pill);
 padding: 16px;
 box-shadow: 0 8px 36px rgba(34,197,94,0.45);
 transition: padding var(--t) var(--ease), box-shadow var(--t), transform var(--t) var(--ease-spring);
 text-decoration: none;
 overflow: hidden;
 max-width: 58px;
}
.wa-fab:hover {
 max-width: 220px;
 padding: 16px 24px;
 transform: translateY(-3px);
 box-shadow: 0 14px 55px rgba(34,197,94,0.55);
}
.wa-fab i { font-size: 1.5rem; flex-shrink: 0; }
.wa-fab-text {
 font-size: 0.88rem;
 font-weight: 800;
 white-space: nowrap;
 overflow: hidden;
 max-width: 0;
 transition: max-width var(--t) var(--ease), margin-right var(--t);
 margin-right: 0;
}
.wa-fab:hover .wa-fab-text {
 max-width: 160px;
 margin-right: 0;
 margin-left: 12px;
}
.wa-fab-ring {
 position: absolute;
 inset: -4px;
 border-radius: inherit;
 border: 2px solid rgba(34,197,94,0.4);
 animation: ringPulse 2.5s ease infinite;
}
@keyframes ringPulse {
 0% { transform: scale(1); opacity: 0.8; }
 50% { transform: scale(1.12); opacity: 0; }
 100% { transform: scale(1); opacity: 0; }
}

/* ===== Responsive ===== */

/* شاشات واسعة (1201px فأكثر): تنقل مع تمرير أفقي أنيق */
@media (min-width: 1201px) {
 .nav-inner {
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 scrollbar-color: var(--gold) transparent;
 padding-bottom: 4px;
 }
 .nav-inner::-webkit-scrollbar { height: 3px; }
 .nav-inner::-webkit-scrollbar-track { background: transparent; }
 .nav-inner::-webkit-scrollbar-thumb {
 background: linear-gradient(90deg, var(--gold), var(--orange));
 border-radius: 3px;
 }
 .nav-links { gap: 2px; flex-shrink: 0; }
 .nav-links a { font-size: 0.82rem; padding: 5px 10px; white-space: nowrap; }
 .nav-actions { gap: 6px; flex-shrink: 0; }
 .nav-actions .btn { padding: 6px 12px; font-size: 0.80rem; white-space: nowrap; gap: 5px; }
 .nav-actions .btn-wa span { font-size: 0.78rem; }
}
/* شاشات واسعة جداً (1400px فأكثر): مساحة إضافية للتنقل */
@media (min-width: 1400px) {
 .nav-links { gap: 4px; }
 .nav-links a { font-size: 0.85rem; padding: 6px 14px; }
 .nav-actions .btn { padding: 7px 16px; font-size: 0.83rem; }
}

/* أجهزة لوحية وشاشات متوسطة (769px - 1200px): إخفاء شريط التنقل وإظهار القائمة الجانبية */
@media (max-width: 1200px) {
 .events-scroll { grid-template-columns: repeat(2, 1fr); }
 .why-grid { grid-template-columns: 1fr; }
 .steps { grid-template-columns: repeat(2,1fr); gap: 40px; }
 .steps::before { display: none; }
 /* إخفاء عناصر التنقل وإظهار الهامبرغر */
 .nav-links { display: none; }
 .nav-actions .btn-ghost { display: none; }
 .hamburger { display: flex; }
}

/* جوالات (768px فأقل): إخفاء شريط التنقل وإظهار القائمة الجانبية مثل التابلت */
@media (max-width: 768px) {
 .nav-links { display: none; }
 .nav-actions { display: none; }
 .hamburger { display: flex; }

 .hero-stats { grid-template-columns: repeat(2, 1fr); }
 .hero-stat:nth-child(2)::after { display: none; }

 .events-scroll { grid-template-columns: 1fr; }

 .steps { grid-template-columns: 1fr 1fr; gap: 32px; }

 .footer-grid { grid-template-columns: 1fr; gap: 36px; }

 .wa-fab {
 bottom: calc(28px + env(safe-area-inset-bottom));
 }
}

/* دخول الصفحة — جوالات، شاشات ضيقة، وجوالات بالعرض (لمس خشن)؛ styles.css واحد لكل الصفحات */
@media (prefers-reduced-motion: no-preference) {
 @media (max-width: 768px),
 ((hover: none) and (pointer: coarse) and (max-width: 1024px)) {
 @keyframes heroEnterTouch {
 0% {
 opacity: 0;
 transform: translate3d(0, 40px, 0) scale(0.92);
 }
 58% {
 opacity: 1;
 transform: translate3d(0, -6px, 0) scale(1.02);
 }
 100% {
 opacity: 1;
 transform: translate3d(0, 0, 0) scale(1);
 }
 }

 @keyframes navEnterTouch {
 from {
 opacity: 0;
 transform: translate3d(0, -18px, 0);
 }
 to {
 opacity: 1;
 transform: translate3d(0, 0, 0);
 }
 }

 @keyframes heroGradientFadeIn {
 from { opacity: 0.25; }
 to { opacity: 1; }
 }

 @keyframes scrollHintFadeIn {
 from { opacity: 0; }
 to { opacity: 0.72; }
 }

 /* قسم «لماذا نحن»: دخول بطاقات لمسية على الجوال */
 @keyframes whyItemMobileIn {
 0% {
 opacity: 0;
 transform: translate3d(0, 44px, 0) scale(0.93);
 }
 58% {
 opacity: 1;
 transform: translate3d(0, -5px, 0) scale(1.02);
 }
 100% {
 opacity: 1;
 transform: translate3d(0, 0, 0) scale(1);
 }
 }

 .nav {
 animation: navEnterTouch 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
 }

 .hero-gradient {
 animation: heroGradientFadeIn 1.15s ease-out both;
 }

 /* منحنى واحد ناعم مع ارتداد مدمج في الـ keyframes */
 .hero-label {
 animation: heroEnterTouch 1.02s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 .hero-title {
 animation: heroEnterTouch 1.08s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
 }
 .hero-sub {
 animation: heroEnterTouch 1.02s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
 }
 .hero-cta {
 animation: heroEnterTouch 1s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both;
 }
 .hero-stats {
 animation: heroEnterTouch 1.06s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
 }

 /* صفحات المدن والأحياء: بطاقات الميتا تحت الأزرار (بدل شريط الإحصائيات في الرئيسية) */
 .hero .hood-meta.reveal {
 animation: heroEnterTouch 1.06s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
 }

 section#why .why-item.reveal {
 transition: none;
 }
 section#why .why-item.reveal:not(.on) {
 opacity: 0;
 transform: translate3d(0, 40px, 0) scale(0.96);
 }
 section#why .why-item.reveal.on {
 animation: whyItemMobileIn 0.78s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 section#why .why-item.reveal.on.d1 { animation-delay: 0.06s; }
 section#why .why-item.reveal.on.d2 { animation-delay: 0.14s; }
 section#why .why-item.reveal.on.d3 { animation-delay: 0.22s; }
 section#why .why-item.reveal.on.d4 { animation-delay: 0.3s; }
 section#why .why-item.reveal.on.d5 { animation-delay: 0.38s; }
 section#why .why-item.reveal.on.d6 { animation-delay: 0.46s; }

 /* بقية عناصر .reveal: دخول لمسي موحّد (كروت، معرض، FAQ، التذييل…) */
 .reveal:not(.why-item) {
 transition: none;
 }
 .reveal:not(.why-item):not(.on) {
 opacity: 0;
 transform: translate3d(0, 38px, 0) scale(0.97);
 }
 .reveal:not(.why-item).on {
 animation: whyItemMobileIn 0.74s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 .reveal:not(.why-item).on.d1 { animation-delay: 0.06s; }
 .reveal:not(.why-item).on.d2 { animation-delay: 0.12s; }
 .reveal:not(.why-item).on.d3 { animation-delay: 0.18s; }
 .reveal:not(.why-item).on.d4 { animation-delay: 0.24s; }
 .reveal:not(.why-item).on.d5 { animation-delay: 0.3s; }
 .reveal:not(.why-item).on.d6 { animation-delay: 0.36s; }

 @keyframes tickerStripIn {
 from {
 opacity: 0;
 transform: translate3d(0, 14px, 0);
 }
 to {
 opacity: 1;
 transform: translate3d(0, 0, 0);
 }
 }
 .ticker-wrap {
 animation: tickerStripIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
 }

 @keyframes waFabPopIn {
 from {
 opacity: 0;
 transform: scale(0.86) translate3d(0, 16px, 0);
 }
 to {
 opacity: 1;
 transform: scale(1) translate3d(0, 0, 0);
 }
 }
 .wa-fab {
 animation: waFabPopIn 0.52s cubic-bezier(0.34, 1.4, 0.64, 1) 0.75s both;
 }

 /* نفس ترتيب التحديد: المحتوى المنسوخ للنوافذ يبقى مرئيًا دون انتظار .on */
 .nh-district-modal .reveal,
 .nh-district-modal .reveal:not(.on) {
 opacity: 1;
 transform: none;
 transition: none;
 animation: none;
 }

 .scroll-hint {
 animation: scrollHintFadeIn 0.9s ease-out 0.58s both,
 scrollBounce 2.5s ease 1.48s infinite;
 }
 }
}

@media (max-width: 520px) {
 .hero-cta .btn { width: 100%; max-width: 340px; }
 .hero-cta { flex-direction: column; align-items: center; }
 .types-grid { grid-template-columns: repeat(2, 1fr); }
 .regions { grid-template-columns: repeat(2, 1fr); }
 .steps { grid-template-columns: 1fr; gap: 40px; }
 .cta-btns { flex-direction: column; align-items: center; }
 .cta-btns .btn { width: 100%; max-width: 340px; }
 .trust-chips { flex-direction: column; align-items: center; }
}

/* ===== أداء الجوال — تقليل blur والحركة الثقيلة ===== */
@media (max-width: 900px) {
 .mesh-bg::before,
 .mesh-bg::after {
 animation: none;
 filter: blur(72px);
 }
 .nav.solid {
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
 background: rgba(3, 5, 8, 0.94);
 }
 .drawer {
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
 }
 .ticker-scroll {
 animation-duration: 42s;
 }
 .hero-stats .hero-stat:hover {
 transform: none;
 }
 .wa-fab-ring {
 animation: none;
 opacity: 0.45;
 }
}

/* ===== صفحة الأمان والسلامة — بطاقات المراجع الرسمية ===== */
.safety-refs {
 display: grid;
 gap: 16px;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 margin-top: 28px;
}
.safety-ref-card {
 display: block;
 padding: 22px 24px;
 border-radius: var(--r-sm);
 border: 1px solid var(--border);
 background: var(--bg-card);
 transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.safety-ref-card:hover {
 border-color: var(--border-gold);
 box-shadow: var(--shadow-glow);
 transform: translateY(-2px);
}
.safety-ref-card h3 {
 font-size: 1.05rem;
 font-weight: 700;
 margin-bottom: 10px;
 color: var(--gold-light);
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}
.safety-ref-card h3 i {
 color: var(--gold);
 font-size: 1rem;
 opacity: 0.95;
}
.safety-ref-card p {
 font-size: 0.92rem;
 color: var(--text-2);
 line-height: 1.65;
 margin: 0;
}
.safety-ref-card .ref-ext {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 14px;
 font-size: 0.85rem;
 font-weight: 600;
 color: var(--gold);
}
.safety-ref-card .ref-ext i {
 font-size: 0.75rem;
 opacity: 0.85;
}
.safety-note {
 margin-top: 28px;
 padding: 18px 22px;
 border-radius: var(--r-sm);
 border: 1px dashed var(--border-gold);
 background: rgba(191, 167, 255, 0.04);
 font-size: 0.92rem;
 color: var(--text-2);
 line-height: 1.75;
}
.safety-note strong {
 color: var(--gold-light);
}
@media (prefers-reduced-motion: reduce) {
 .safety-ref-card:hover { transform: none; }
}

/* ===== صفحات المدن (أحياء + رمز بريدي) — نفس لغة التصميم: type-card / coverage ===== */
.page-city .city-districts-sec {
 background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 38%, rgba(124, 58, 237, 0.05) 100%);
 border-block: 1px solid var(--border);
 position: relative;
}
.page-city .city-districts-sec::before {
 content: '';
 position: absolute;
 inset-inline: 0;
 top: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(191, 167, 255, 0.35), transparent);
 pointer-events: none;
}

.page-city .city-zip-panel {
 margin-top: clamp(20px, 4vw, 36px);
 padding: clamp(18px, 3vw, 28px);
 background: rgba(255, 255, 255, 0.02);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
 box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.page-city .city-zip-panel-head {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-bottom: 18px;
}
.page-city .city-zip-panel-icon {
 width: 44px;
 height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 14px;
 background: linear-gradient(145deg, rgba(191, 167, 255, 0.18), rgba(91, 33, 182, 0.12));
 border: 1px solid rgba(191, 167, 255, 0.25);
 color: var(--gold-light);
 font-size: 1.1rem;
 flex-shrink: 0;
}
.page-city .city-zip-panel-line {
 flex: 1;
 height: 1px;
 background: linear-gradient(to left, transparent, var(--border-gold), var(--border));
 opacity: 0.85;
}

.city-zip-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
 gap: clamp(12px, 2vw, 18px);
}

a.city-zip-card {
 text-decoration: none;
 color: inherit;
 cursor: pointer;
}
.city-zip-card {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r);
 padding: 20px 18px 18px;
 text-align: start;
 position: relative;
 overflow: hidden;
 isolation: isolate;
 cursor: default;
 transition: transform var(--t) var(--ease-spring),
 box-shadow var(--t) var(--ease),
 border-color var(--t) var(--ease),
 background var(--t) var(--ease);
}
.city-zip-card::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: linear-gradient(90deg, var(--gold), var(--orange));
 transform: scaleX(0);
 transform-origin: right;
 transition: transform var(--t) var(--ease);
 border-radius: 3px 3px 0 0;
 z-index: 1;
}
.city-zip-card:hover {
 border-color: rgba(191, 167, 255, 0.32);
 background: rgba(191, 167, 255, 0.05);
 transform: translateY(-6px);
 box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(191, 167, 255, 0.12);
}
.city-zip-card:hover::after {
 transform: scaleX(1);
 transform-origin: left;
}

.city-zip-name {
 font-weight: 800;
 font-size: 1.02rem;
 color: var(--text);
 line-height: 1.35;
 letter-spacing: -0.02em;
}
.city-zip-en {
 font-size: 0.76rem;
 font-weight: 600;
 color: var(--text-3);
 margin-top: 6px;
 direction: ltr;
 text-align: left;
 line-height: 1.35;
}

.city-zip-code {
 margin-top: 14px;
 padding: 10px 12px;
 display: block;
 font-size: 1rem;
 font-weight: 800;
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.04em;
 color: var(--gold-light);
 background: rgba(191, 167, 255, 0.09);
 border: 1px solid rgba(191, 167, 255, 0.22);
 border-radius: var(--r-sm);
 text-align: center;
}
.city-zip-label {
 display: block;
 font-size: 0.68rem;
 font-weight: 700;
 color: var(--text-2);
 margin-bottom: 4px;
 letter-spacing: 0.02em;
}

.city-footnote {
 margin-top: clamp(24px, 4vw, 32px);
 padding: 16px 20px;
 font-size: 0.88rem;
 color: var(--text-2);
 line-height: 1.75;
 max-width: 720px;
 margin-inline: auto;
 text-align: center;
 border-radius: var(--r-sm);
 border: 1px dashed rgba(191, 167, 255, 0.22);
 background: rgba(191, 167, 255, 0.03);
}

.page-city #other-cities.coverage-sec {
 background: var(--bg);
}

@media (max-width: 520px) {
 .city-zip-grid {
 grid-template-columns: 1fr 1fr;
 }
 .city-zip-card {
 padding: 16px 12px 14px;
 }
 .city-zip-name {
 font-size: 0.92rem;
 }
 .page-city .city-zip-panel-icon {
 width: 40px;
 height: 40px;
 font-size: 1rem;
 }
}

@media (prefers-reduced-motion: reduce) {
 .city-zip-card:hover {
 transform: none;
 }
 .city-zip-card::after {
 transition: none;
 }
}

/* ===== تذييل: روابط الكيان المحلي (Google Business / الخرائط) ===== */
.local-entity-links {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px 14px;
 margin-top: 14px;
}
.local-entity-heading {
 flex-basis: 100%;
 width: 100%;
 margin: 0;
 padding-top: 6px;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--gold);
 opacity: 0.95;
}
.local-entity-link {
 font-size: 0.86rem;
 text-decoration: underline;
 text-underline-offset: 3px;
 color: inherit;
 opacity: 0.92;
}
.local-entity-link--social {
 display: inline-flex;
 align-items: center;
 gap: 0.4em;
 padding: 0.35em 0.65em;
 text-decoration: none;
 border: 1px solid rgba(255, 255, 255, 0.14);
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.04);
 transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.local-entity-link--social:hover {
 opacity: 1;
 border-color: rgba(196, 181, 253, 0.35);
 background: rgba(196, 181, 253, 0.08);
}
.local-entity-link--social:focus-visible {
 outline: 2px solid rgba(196, 181, 253, 0.75);
 outline-offset: 2px;
}
/* أيقونات SVG للمنصات — لا تعتمد على خط Font Awesome Brands */
.local-entity-link-icon-svg {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1.1em;
 height: 1.1em;
 flex-shrink: 0;
}
.local-entity-link-icon-svg svg {
 width: 100%;
 height: 100%;
 display: block;
 fill: currentColor;
}
/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
 .nav,
 .hero-gradient,
 .hero-label,
 .hero-title,
 .hero-sub,
 .hero-cta,
 .hero-stats,
 .hero .hood-meta.reveal,
 .scroll-hint {
 animation: none !important;
 }
 
 .nav,
 .hero-gradient,
 .hero-label,
 .hero-title,
 .hero-sub,
 .hero-cta,
 .hero-stats,
 .hero .hood-meta.reveal {
 opacity: 1 !important;
 transform: none !important;
 }
 .scroll-hint {
 opacity: 0.72 !important;
 }
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 transition-duration: 0.01ms !important;
 }
}

/* ══════════════════════════════════════════════════════════════
 مدن الأحياء — بطاقات بريميوم (Premium Neighborhood Cards)
 ══════════════════════════════════════════════════════════════ */

/* —— City header card – occupies full row with gradient —— */
.nh-card-city {
 grid-column: 1 / -1;
 background: linear-gradient(135deg, rgba(191,167,255,0.10) 0%, rgba(124,58,237,0.05) 100%);
 border: 1px solid rgba(191,167,255,0.18);
 border-radius: var(--r);
 padding: 20px 24px;
 display: flex;
 align-items: center;
 gap: 14px;
 cursor: default;
 transition: transform var(--t) var(--ease-spring),
 box-shadow var(--t) var(--ease),
 border-color var(--t) var(--ease-spring);
 position: relative;
 overflow: hidden;
}
.nh-card-city::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(ellipse at 30% 50%, rgba(191,167,255,0.06) 0%, transparent 60%);
 pointer-events: none;
}
.nh-card-city:hover {
 transform: translateY(-3px);
 border-color: rgba(191,167,255,0.3);
 box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(191,167,255,0.06);
}
.nh-card-city .nh-name {
 font-size: 1.05rem;
 font-weight: 900;
 color: var(--gold-light);
 display: flex;
 align-items: center;
 gap: 12px;
 position: relative;
 z-index: 1;
}
.nh-card-city .nh-name i {
 font-size: 1.1rem;
 color: var(--gold);
 width: 32px;
 height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(191,167,255,0.12);
 border-radius: 10px;
 flex-shrink: 0;
 transition: background var(--t) var(--ease-spring), transform var(--t) var(--ease-spring);
}
.nh-card-city:hover .nh-name i {
 background: rgba(191,167,255,0.18);
 transform: scale(1.05);
}

/* —— Regular neighborhood card – glass-morphism —— */
.nh-card-static {
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r-sm);
 padding: 14px 16px;
 display: flex;
 flex-direction: column;
 gap: 6px;
 cursor: default;
 transition: transform var(--t) var(--ease-spring),
 border-color var(--t) var(--ease-spring),
 box-shadow var(--t) var(--ease),
 background var(--t) var(--ease-spring);
 position: relative;
 overflow: hidden;
}
.nh-card-static::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--gold), var(--orange));
 opacity: 0;
 transition: opacity var(--t) var(--ease);
}
.nh-card-static:hover {
 transform: translateY(-3px);
 border-color: rgba(191,167,255,0.2);
 box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 0 1px rgba(191,167,255,0.04);
 background: rgba(255,255,255,0.05);
}
.nh-card-static:hover::before {
 opacity: 1;
}
.nh-card-static .nh-name {
 font-size: 0.88rem;
 font-weight: 700;
 color: var(--text);
 line-height: 1.4;
 transition: color var(--t) var(--ease);
}
.nh-card-static:hover .nh-name {
 color: var(--gold-light);
}
.nh-card-static .nh-postal {
 font-size: 0.68rem;
 font-weight: 600;
 color: var(--text-3);
 letter-spacing: 0.04em;
 background: rgba(255,255,255,0.03);
 padding: 3px 9px;
 border-radius: 6px;
 align-self: flex-start;
 border: 1px solid var(--border);
 transition: color var(--t) var(--ease),
 background var(--t) var(--ease-spring),
 border-color var(--t) var(--ease-spring);
}
.nh-card-static:hover .nh-postal {
 color: var(--gold);
 background: rgba(191,167,255,0.08);
 border-color: rgba(191,167,255,0.15);
}

/* —— Region card (arar, bahah, skaka) —— */
.nh-card-region {
 grid-column: span 2;
 background: linear-gradient(135deg, rgba(191,167,255,0.06) 0%, transparent 100%);
 border: 1px dashed rgba(191,167,255,0.16);
 border-radius: var(--r);
 padding: 18px 22px;
 text-align: center;
 cursor: default;
 transition: transform var(--t) var(--ease-spring),
 border-color var(--t) var(--ease-spring),
 box-shadow var(--t) var(--ease);
}
.nh-card-region:hover {
 transform: translateY(-3px);
 border-color: rgba(191,167,255,0.28);
 box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.nh-card-region .nh-name {
 font-size: 0.95rem;
 font-weight: 700;
 color: var(--text-2);
 line-height: 1.6;
}
.nh-card-region .nh-name strong {
 color: var(--gold-light);
}

/* —— City block title enhancements —— */
.nh-city-title {
 font-size: clamp(1.35rem, 3vw, 1.85rem);
 font-weight: 900;
 margin-bottom: 10px;
 letter-spacing: -0.02em;
 position: relative;
 display: inline-block;
}
.nh-city-title::after {
 content: '';
 display: block;
 width: 70px;
 height: 3px;
 background: linear-gradient(90deg, var(--gold), var(--orange));
 border-radius: 2px;
 margin-top: 10px;
 margin-inline: auto;
}
.nh-city-desc {
 color: var(--text-2);
 font-size: 0.9rem;
 line-height: 1.75;
 max-width: 640px;
 margin: 0 auto;
}

/* —— Quick city‑jump navigation —— */
.city-jump-wrap {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 justify-content: center;
 margin-bottom: clamp(32px, 5vw, 48px);
 padding: 18px 22px;
 background: var(--bg-card);
 border: 1px solid var(--border);
 border-radius: var(--r-lg);
 backdrop-filter: var(--blur);
 -webkit-backdrop-filter: var(--blur);
}
.city-jump-link {
 font-size: 0.78rem;
 font-weight: 700;
 padding: 7px 16px;
 border-radius: 999px;
 background: rgba(255,255,255,0.03);
 border: 1px solid var(--border);
 color: var(--text-2);
 text-decoration: none;
 transition: all var(--t) var(--ease-spring);
 white-space: nowrap;
}
.city-jump-link:hover {
 border-color: rgba(191,167,255,0.28);
 color: var(--gold-light);
 background: rgba(191,167,255,0.06);
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.city-jump-link:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}

/* —— Grid refinement for larger cards —— */
@media (min-width: 640px) {
 .neighborhoods-grid {
 gap: 14px;
 }
 .nh-card-static {
 padding: 16px 18px;
 }
 .nh-card-static .nh-name {
 font-size: 0.92rem;
 }
}

@media (min-width: 1024px) {
 .neighborhoods-grid {
 gap: 16px;
 }
 .nh-card-static {
 padding: 18px 20px;
 border-radius: var(--r);
 }
 .nh-card-static .nh-name {
 font-size: 0.95rem;
 }
 .nh-card-static .nh-postal {
 font-size: 0.7rem;
 }
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
 .nh-card-city,
 .nh-card-static,
 .nh-card-region,
 .city-jump-link {
  transition: none !important;
 }
 .nh-card-city:hover,
 .nh-card-static:hover,
 .nh-card-region:hover {
  transform: none !important;
 }
 .nh-card-static::before,
 .nh-card-city::before {
  display: none;
 }
}

/* ═══════════════════════════════════════════════════════════════
   🏙️ CITY LANDING PAGES — صفحات المدن
   ═══════════════════════════════════════════════════════════════ */
.city-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #06040c 0%, #0c0818 50%, #100b22 100%);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

/* ─── Header ─── */
.city-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(16px, 4vw, 48px);
  background: rgba(12, 8, 24, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.city-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.city-nav {
  display: flex;
  gap: clamp(8px, 2vw, 20px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.city-nav a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.city-nav a:hover,
.city-nav a:focus-visible {
  color: var(--gold-light);
  background: rgba(196, 181, 253, 0.08);
}
.city-nav a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ─── Main ─── */
.city-main {
  flex: 1;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 32px);
}

/* ─── Hero section ─── */
.city-hero {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.city-hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  color: var(--gold-light);
  margin-bottom: 16px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.city-hero-desc {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--text-2);
  max-width: 720px;
  margin: 0 auto 28px;
  line-height: 1.8;
}
.city-hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: all 0.25s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: rgba(196,181,253,0.3);
  color: var(--gold-light);
  background: rgba(196,181,253,0.06);
}

/* ─── Services grid ─── */
.city-services h2,
.city-why h2,
.city-coverage h2,
.city-cta-bottom h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 900;
  color: var(--gold-light);
  text-align: center;
  margin-bottom: 12px;
}
.city-services {
  margin-bottom: clamp(48px, 6vw, 72px);
}
.city-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.city-service-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px 20px;
  transition: all 0.3s ease;
}
.city-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(196,181,253,0.25);
  box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}
.city-service-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 8px;
}
.city-service-card p {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0;
}

/* ─── Why us grid ─── */
.city-why {
  margin-bottom: clamp(48px, 6vw, 72px);
}
.city-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.city-why-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 16px;
  text-align: center;
  transition: all 0.3s ease;
}
.city-why-card:hover {
  border-color: rgba(196,181,253,0.2);
  background: rgba(255,255,255,0.05);
  transform: translateY(-2px);
}
.city-why-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 8px;
}
.city-why-card strong {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 700;
}

/* ─── Coverage ─── */
.city-coverage {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 72px);
  padding: clamp(28px, 4vw, 40px) clamp(16px, 3vw, 32px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.city-coverage p {
  font-size: 0.95rem;
  color: var(--text-2);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ─── Bottom CTA ─── */
.city-cta-bottom {
  text-align: center;
  padding: clamp(32px, 5vw, 56px) clamp(16px, 3vw, 32px);
  background: linear-gradient(135deg, rgba(196,181,253,0.04) 0%, transparent 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
}
.city-cta-bottom p {
  font-size: 1rem;
  color: var(--text-2);
  margin-bottom: 24px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.btn-fire-lg {
  font-size: 1.05rem !important;
  padding: 14px 32px !important;
}

/* ─── Footer ─── */
.city-footer {
  text-align: center;
  padding: 24px clamp(16px, 3vw, 32px);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-3);
}
.city-footer a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s;
}
.city-footer a:hover {
  color: var(--gold-light);
}

/* ─── RTL support for Arabic pages ─── */
.page-ar .city-nav {
  direction: rtl;
}
.page-ar .city-hero-buttons {
  direction: rtl;
}

/* ─── City pages reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .city-service-card:hover,
  .city-why-card:hover {
    transform: none !important;
  }
  .city-service-card,
  .city-why-card,
  .city-nav a {
    transition: none !important;
  }
}

/* ─── City nav mobile ─── */
@media (max-width: 600px) {
  .city-header {
    flex-direction: column;
    gap: 10px;
    padding: 10px 16px;
  }
  .city-nav {
    justify-content: center;
    gap: 4px;
  }
  .city-nav a {
    font-size: 0.75rem;
    padding: 5px 10px;
  }
  .city-services-grid {
    grid-template-columns: 1fr;
  }
  .city-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Skip-to-content link (accessibility) ===== */
.skip-link {
  position: absolute;
  top: -60px;
  inset-inline-start: 16px;
  z-index: 9999;
  background: var(--brand, #6d28d9);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--gold, #c4b5fd);
  outline-offset: 2px;
}