/* ═══════════════════════════════════════════════════════════
   3ARIQI.COM — Site CSS  |  LuxuryGlass Design System
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --bg:     #07050f;
  --bg2:    #0d0b1a;
  --card:   rgba(255,255,255,0.04);
  --card2:  rgba(255,255,255,0.07);
  --border: rgba(168,85,247,0.2);
  --border2:rgba(255,255,255,0.07);
  --text:   #f0eeff;
  --muted:  rgba(255,255,255,0.6);
  --p:      #7c3aed;
  --p2:     #a855f7;
  --r:      #f43f5e;
  --c:      #06b6d4;
  --g:      #10b981;
  --gold:   #f59e0b;
  --accent: #7c3aed;
  --accent2:#a855f7;
  --accent3:#06b6d4;
  --radius: 20px;
  --wrap:   min(1200px, calc(100vw - 48px));
  --pad:    max(24px, calc(50vw - 600px));
}
[data-theme="light"] {
  --bg:#faf8f2; --bg2:#f0ebe0; --card:rgba(255,250,238,0.82);
  --card2:rgba(255,249,234,0.95); --border:rgba(124,58,237,0.18);
  --border2:rgba(19,14,30,0.09); --text:#130e1c; --muted:rgba(19,14,28,0.55);
  --p:#6d28d9; --p2:#7c3aed; --r:#e11d48; --c:#0891b2; --g:#059669;
}
[data-theme="light"] #navbar {
  background:rgba(250,248,242,0.92) !important;
  border-color:rgba(19,14,30,0.1) !important;
}
[data-theme="light"] .nav-links a { color:rgba(19,14,28,0.7); }
[data-theme="light"] .nav-links a:hover { color:#130e1c; }
[data-theme="light"] .stat-show-card {
  border-color:rgba(124,58,237,0.15);
  background:rgba(255,252,238,0.72);
}
[data-theme="light"] .exp-card { background:rgba(255,250,238,0.88); color:#130e1c; }
[data-theme="light"] .exp-desc { color:rgba(19,14,28,0.65); }
[data-theme="light"] .exp-opt {
  background:rgba(19,14,28,0.05) !important;
  color:#130e1c !important;
  border-color:rgba(19,14,28,0.14) !important;
}
[data-theme="light"] .hero-desc { color:rgba(19,14,28,0.6) !important; }
[data-theme="light"] .hero-h1 .line2 { color:rgba(19,14,28,0.7) !important; }
[data-theme="light"] #hsr-yt,
[data-theme="light"] #hsr-tt,
[data-theme="light"] #hsr-ig,
[data-theme="light"] #hsr-tw { color:#130e1c !important; }
[data-theme="light"] .platform-card { background:rgba(255,250,238,0.72); }
[data-theme="light"] .cf-input {
  background:rgba(19,14,28,0.04);
  border-color:rgba(19,14,28,0.12);
  color:#130e1c;
}
[data-theme="light"] .cf-input::placeholder { color:rgba(19,14,28,0.35); }
[data-theme="light"] .srvv2-card,
[data-theme="light"] .media-card,
[data-theme="light"] .gb-card,
[data-theme="light"] .contact-form,
[data-theme="light"] .srv-accordion,
[data-theme="light"] .impact-card { background:rgba(255,250,238,0.88); }
[data-theme="light"] .cmap-card { background:rgba(255,250,238,0.88) !important; }
[data-theme="light"] .skill-tag { background:rgba(255,250,238,0.88); color:#130e1c; }
[data-theme="light"] .acc-label { color:#130e1c; }
[data-theme="light"] .srv-acc-head:hover { background:rgba(19,14,28,0.04); }
[data-theme="light"] .srv-acc-head.open { background:rgba(19,14,28,0.06); }
[data-theme="light"] .section-sub { color:rgba(19,14,28,0.65); }
/* ── Light mode: orbs & hero fixes ── */
[data-theme="light"] .orb-1 { background:rgba(124,58,237,0.06); filter:blur(140px); }
[data-theme="light"] .orb-2 { background:rgba(244,63,94,0.05);  filter:blur(140px); }
[data-theme="light"] .orb-3 { background:rgba(124,58,237,0.04); filter:blur(150px); }
[data-theme="light"] .hero-eyebrow { color:rgba(19,14,28,0.55); }
[data-theme="light"] .hero-float-card { background:rgba(255,252,245,0.92); color:#130e1c; border-color:rgba(19,14,28,0.1); box-shadow:0 16px 40px rgba(0,0,0,0.08); }
[data-theme="light"] .hero-float-card .fnum { color:var(--p); }
[data-theme="light"] .hero-float-card .flbl { color:rgba(19,14,28,0.55); }
[data-theme="light"] .section-tag { background:rgba(124,58,237,0.08); }
[data-theme="light"] .srvv2-card { color:#130e1c; }
[data-theme="light"] .srv-card-title { color:#130e1c; }
[data-theme="light"] .srv-card-desc { color:rgba(19,14,28,0.55); }
[data-theme="light"] .srv-card-arrow { color:var(--p); }
[data-theme="light"] .srvv2-card:hover { box-shadow:0 20px 50px rgba(0,0,0,0.12); }
[data-theme="light"] .ssc-card { background:rgba(255,252,245,0.88); color:#130e1c; border-color:rgba(124,58,237,0.15); }
[data-theme="light"] .ssc-title { color:#130e1c !important; }
[data-theme="light"] .ssc-desc  { color:rgba(19,14,28,0.55) !important; }
[data-theme="light"] .ssc-cta   { border-color:rgba(124,58,237,0.4); color:var(--p); }
[data-theme="light"] .ssc-cta:hover { background:rgba(124,58,237,0.08); }
[data-theme="light"] .srv-reveal-label { color:rgba(19,14,28,0.65) !important; }
[data-theme="light"] #navbar .nav-links a { color:rgba(19,14,28,0.7); }
[data-theme="light"] .logo { color:#130e1c !important; }
[data-theme="light"] #mobileNav { background:rgba(250,248,242,0.97) !important; border-color:rgba(19,14,28,0.08) !important; }
[data-theme="light"] #mobileNav .mob-link { color:#130e1c; }
[data-theme="light"] .glass { color:#130e1c; }
[data-theme="light"] .glass-sm { background:rgba(255,252,240,0.9); color:#130e1c; }
[data-theme="light"] .section-title { color:#130e1c; }
[data-theme="light"] .sp-header { background:rgba(250,248,242,0.96) !important; }
[data-theme="light"] .sp-title { color:#130e1c; }
[data-theme="light"] .sp-desc  { color:rgba(19,14,28,0.6); }
[data-theme="light"] .book-section { background:rgba(255,252,240,0.92); }
[data-theme="light"] .book-subtitle { color:rgba(19,14,28,0.6); }
[data-theme="light"] .book-label   { color:rgba(19,14,28,0.7); }
[data-theme="light"] .bk-input { background:rgba(19,14,28,0.04); border-color:rgba(19,14,28,0.12); color:#130e1c; }
[data-theme="light"] .bk-input::placeholder { color:rgba(19,14,28,0.35); }
[data-theme="light"] .nl-wrap { background:rgba(255,252,240,0.88); }
[data-theme="light"] .nl-title  { color:#130e1c; }
[data-theme="light"] .nl-sub    { color:rgba(19,14,28,0.6); }
[data-theme="light"] .nl-badge  { color:rgba(19,14,28,0.5); background:rgba(19,14,28,0.05); }
[data-theme="light"] .sp-feature { background:rgba(255,252,240,0.88); border-color:rgba(19,14,28,0.08); }
[data-theme="light"] .sp-feature h4 { color:#130e1c; }
[data-theme="light"] .sp-feature p  { color:rgba(19,14,28,0.6); }

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Cairo',sans-serif;
  direction:ltr;
  overflow-x:hidden;
  min-height:100vh;
}
a { color:inherit; text-decoration:none; }
button { font-family:'Inter','Cairo',sans-serif; cursor:pointer; }
img { max-width:100%; display:block; }
/* ── Mobile Touch Improvements ─────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
a, button, [onclick] { touch-action: manipulation; }
input, textarea, select { font-size: max(16px, 1em); } /* منع zoom على iOS */

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(168,85,247,0.4); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(168,85,247,0.7); }

/* ── Background Orbs ────────────────────────────────────── */
.orb {
  position:fixed;
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
}
.orb-1 { width:700px; height:700px; background:rgba(124,58,237,0.12); top:-15%; right:-10%; }
.orb-2 { width:500px; height:500px; background:rgba(244,63,94,0.10); top:30%; left:-12%; }
.orb-3 { width:600px; height:600px; background:rgba(124,58,237,0.08); bottom:-10%; right:15%; }

/* ── Glass Card ─────────────────────────────────────────── */
.glass {
  background:var(--card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.glass-sm {
  background:var(--card2);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border2);
  border-radius:14px;
}

/* ── Gradient Text ──────────────────────────────────────── */
.grad-text {
  background:linear-gradient(135deg,var(--p,#7c3aed),var(--r,#f43f5e));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.grad-text-blue {
  background:linear-gradient(135deg,var(--c,#06b6d4),var(--p,#7c3aed));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--p,#7c3aed),var(--r,#f43f5e));
  border:none; border-radius:14px;
  padding:14px 32px;
  color:#fff; font-weight:700; font-size:1rem;
  box-shadow:0 8px 24px color-mix(in srgb,var(--p,#7c3aed) 35%,transparent);
  transition:transform .25s, box-shadow .25s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 32px color-mix(in srgb,var(--p,#7c3aed) 50%,transparent); }

.btn-glass {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--card); backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:14px;
  padding:14px 32px;
  color:var(--text); font-weight:700; font-size:1rem;
  transition:transform .25s, border-color .25s;
}
.btn-glass:hover { transform:translateY(-3px); border-color:rgba(244,63,94,0.5); }

.btn-green {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,#10b981,#059669);
  border:none; border-radius:14px;
  padding:14px 32px;
  color:#fff; font-weight:700; font-size:1rem;
  box-shadow:0 8px 24px rgba(16,185,129,0.3);
  transition:transform .25s;
}
.btn-green:hover { transform:translateY(-3px); }

/* ── Section Layout ─────────────────────────────────────── */
.section {
  position:relative; z-index:1;
  padding:100px var(--pad);
}
.section-sm { padding:60px var(--pad); }
.section-tag {
  display:inline-block;
  padding:6px 16px; border-radius:20px;
  background:rgba(124,58,237,0.12);
  border:1px solid rgba(124,58,237,0.3);
  color:var(--p2); font-size:.78rem; font-weight:700;
  letter-spacing:.04em; margin-bottom:16px;
}
.section-title {
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:900; line-height:1.2;
  margin-bottom:14px;
}
.section-sub {
  font-size:1rem; color:var(--muted);
  line-height:1.7; max-width:600px;
  margin-bottom:48px;
}
[dir=ltr] .section-sub {
  text-align:left;
  margin-left:0;
  margin-right:auto;
}
[dir=rtl] .section-sub {
  text-align:right;
  margin-right:0;
  margin-left:auto;
}

/* ── FOCUS MODE BAR ─────────────────────────────────────── */
#focusBar {
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:linear-gradient(135deg,color-mix(in srgb,var(--p,#7c3aed) 95%,transparent),color-mix(in srgb,var(--r,#f43f5e) 95%,transparent));
  backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px var(--pad);
  font-size:.85rem; font-weight:700; color:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,0.4);
}
#focusBar a {
  display:flex; align-items:center; gap:8px;
  color:#fff; font-weight:700;
  padding:8px 18px; border-radius:10px;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.2);
  transition:background .2s;
}
#focusBar a:hover { background:rgba(255,255,255,0.25); }
#focusBar .focus-label {
  font-size:.72rem; opacity:.85; font-weight:600;
}
body.focus-mode { padding-top:58px; }
body.focus-mode #navbar { display:none; }
body.focus-mode footer { display:none; }
body.focus-mode .orb { display:none; }
body.focus-mode #contactFloatingWA { display:none; }

/* ── NAVBAR ─────────────────────────────────────────────── */
#navbar {
  position:fixed; top:20px;
  left:var(--pad); right:var(--pad);
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  background:rgba(7,5,15,0.6);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border);
  border-radius:18px;
  z-index:100;
  transition:top .3s;
}
.nav-logo {
  font-size:1.6rem; font-weight:900;
  letter-spacing:2px; font-family:sans-serif;
}
.nav-links {
  display:flex; gap:28px; align-items:center;
  font-size:.9rem; font-weight:600;
  color:rgba(255,255,255,0.8);
}
.nav-links a { transition:color .2s, background .2s; }
.nav-links a:hover { color:#fff; }
.nav-links a.nav-featured {
  padding:6px 14px; border-radius:10px;
  background:rgba(124,58,237,0.12);
  border:1px solid rgba(168,85,247,0.3);
  color:#c4b5fd;
  font-weight:700;
}
.nav-links a.nav-featured:hover {
  background:rgba(124,58,237,0.22);
  border-color:rgba(168,85,247,0.55);
  color:#e9d5ff;
}
.nav-cta-btn {
  background:linear-gradient(135deg,var(--p,#7c3aed),var(--r,#f43f5e));
  border:none; border-radius:12px;
  padding:10px 22px; color:#fff;
  font-weight:700; font-size:.88rem;
  box-shadow:0 4px 16px color-mix(in srgb,var(--p,#7c3aed) 35%,transparent);
  transition:transform .2s, box-shadow .2s;
  white-space:nowrap;
}
.nav-cta-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px color-mix(in srgb,var(--p,#7c3aed) 50%,transparent); }

/* Mobile nav toggle */
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:6px; cursor:pointer;
}
.nav-toggle span {
  display:block; width:22px; height:2px;
  background:rgba(255,255,255,0.8); border-radius:2px;
  transition:all .3s;
}
#mobileNav {
  display:none;
  position:fixed; top:100px; left:16px; right:16px; z-index:99;
  background:rgba(7,5,15,0.95); backdrop-filter:blur(24px);
  border:1px solid var(--border); border-radius:18px;
  padding:20px;
  flex-direction:column; gap:4px;
}
#mobileNav.open { display:flex; }
#mobileNav a {
  padding:12px 16px; border-radius:10px;
  font-size:.95rem; font-weight:600;
  color:rgba(255,255,255,0.8);
  transition:background .2s, color .2s;
}
#mobileNav a:hover { background:rgba(124,58,237,0.15); color:#fff; }
#mobileNav .mob-cta {
  margin-top:8px;
  background:linear-gradient(135deg,var(--p,#7c3aed),var(--r,#f43f5e));
  color:#fff; text-align:center;
  padding:13px 16px; border-radius:12px; font-weight:700;
}

/* ── HERO ───────────────────────────────────────────────── */
#hero {
  min-height:auto;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
  padding:160px var(--pad) 80px;
  position:relative; z-index:1;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 20px; border-radius:24px;
  background:rgba(124,58,237,0.12);
  border:1px solid rgba(124,58,237,0.3);
  color:var(--p2); font-size:.85rem; font-weight:700;
  margin-bottom:28px;
}
.hero-eyebrow .dot {
  width:8px; height:8px; border-radius:50%;
  background:#10b981;
  box-shadow:0 0 8px rgba(16,185,129,0.8);
  animation:pulse-dot 2s ease-in-out infinite;
}
.hero-h1 {
  font-size:clamp(2.8rem,8vw,6rem);
  font-weight:900; line-height:1.15;
  margin-bottom:20px;
}
.hero-desc {
  font-size:clamp(1rem,2.5vw,1.4rem);
  color:rgba(255,255,255,0.7);
  max-width:700px; margin:0 auto 44px;
  line-height:1.7; font-weight:500;
}
.hero-actions {
  display:flex; gap:16px; flex-wrap:wrap;
  justify-content:center; margin-bottom:60px;
}
/* Hero floating stat cards */
.hero-float-card {
  position:absolute;
  padding:18px 24px;
  display:flex; flex-direction:column;
  align-items:center; gap:4px;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  pointer-events:none;
}
.hero-float-card .fnum {
  font-size:1.6rem; font-weight:900;
}
.hero-float-card .flbl {
  font-size:.78rem; color:rgba(255,255,255,0.6); font-weight:600;
}
/* Hero image slider */
.hero-slider-wrap {
  width:min(540px,90vw);
  aspect-ratio:16/10;
  border-radius:24px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(168,85,247,0.25);
  box-shadow:0 0 60px rgba(124,58,237,0.2), 0 20px 60px rgba(0,0,0,0.5);
}
.hs-slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity .7s ease;
}
.hs-slide.active { opacity:1; }
.hs-slide img, .hs-slide video {
  width:100%; height:100%; object-fit:cover;
}
.hs-arrows {
  position:absolute; inset:0;
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 12px; pointer-events:none;
}
.hs-arr {
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,0.4); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:all;
  transition:background .2s;
}
.hs-arr:hover { background:rgba(0,0,0,0.7); }
.hs-dots {
  position:absolute; bottom:10px; left:0; right:0;
  display:flex; justify-content:center; gap:6px;
}
.hs-dot {
  width:6px; height:6px; border-radius:3px;
  background:rgba(255,255,255,0.4);
  cursor:pointer; transition:all .3s;
}
.hs-dot.active {
  width:20px;
  background:rgba(168,85,247,0.9);
}

/* ── STATS BAR ──────────────────────────────────────────── */
#stats-bar {
  padding:40px var(--pad);
  position:relative; z-index:1;
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}
.stat-card {
  padding:28px 20px; text-align:center;
}
.stat-num {
  font-size:2.2rem; font-weight:900;
  margin-bottom:6px;
}
.stat-label {
  font-size:.82rem; color:var(--muted); font-weight:600;
}
/* ── PROMINENT STATS SHOWCASE ───────────────────────────── */
.stats-showcase {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:40px;
}
@media(max-width:640px){.stats-showcase{grid-template-columns:repeat(2,1fr);}}
.stat-show-card {
  position:relative; overflow:hidden;
  padding:32px 20px; text-align:center;
  border-radius:22px;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(168,85,247,0.22);
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .35s ease, border-color .3s;
  cursor:default;
  will-change:transform;
}
.stat-show-card::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.15) 0%, transparent 65%);
  pointer-events:none;
}
.stat-show-card::after {
  content:'';
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
  pointer-events:none;
}
.stat-show-card:hover::after { left:130%; }
.stat-show-card:hover {
  transform:translateY(-10px) perspective(600px) rotateX(4deg);
  box-shadow:0 28px 70px rgba(124,58,237,0.32), 0 0 0 1px rgba(168,85,247,0.35);
  border-color:rgba(168,85,247,0.45);
}
.stat-show-num {
  font-size:clamp(2.2rem,4vw,3.2rem); font-weight:900; line-height:1;
  margin-bottom:10px;
}
.stat-show-label {
  font-size:.83rem; color:var(--muted); font-weight:700; letter-spacing:.3px;
}
.stat-show-icon {
  font-size:1.6rem; margin-bottom:10px; display:block;
}

/* ── ABOUT ──────────────────────────────────────────────── */
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.about-skills {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:32px;
}
.skill-tag {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  font-size:.88rem; font-weight:600;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border2);
  transition:transform .35s cubic-bezier(0.34,1.56,0.64,1), border-color .25s;
  will-change:transform;
}
.skill-tag:hover {
  transform:translateY(-4px) perspective(500px) rotateX(3deg);
  border-color:rgba(124,58,237,0.3);
}
.skill-dot {
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--p,#7c3aed),var(--r,#f43f5e));
  flex-shrink:0;
}
.about-photo {
  width:100%; aspect-ratio:3/4;
  max-width:420px; margin:0 auto;
  position:relative; overflow:hidden;
  box-shadow:0 0 60px rgba(168,85,247,0.2);
}
.about-photo-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(244,63,94,0.15));
}
.about-photo img { width:100%; height:100%; object-fit:cover; }
.about-photo-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:5rem; opacity:.4;
  background:linear-gradient(135deg,rgba(124,58,237,0.1),rgba(244,63,94,0.1));
}

/* ── SERVICES ───────────────────────────────────────────── */
.srv-tabs {
  display:flex; gap:8px; margin-bottom:40px; flex-wrap:wrap;
}
.srv-tab {
  padding:10px 22px; border-radius:12px;
  border:1px solid var(--border2);
  background:var(--card); color:var(--muted);
  font-size:.88rem; font-weight:700;
  transition:all .25s;
}
.srv-tab.active, .srv-tab:hover {
  background:rgba(124,58,237,0.15);
  border-color:rgba(124,58,237,0.4);
  color:#fff;
}
.srv-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.srvv2-card {
  padding:28px 24px;
  border-radius:var(--radius);
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border2);
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), border-color .3s, box-shadow .35s;
  display:flex; flex-direction:column; gap:12px;
  cursor:pointer; position:relative; overflow:hidden;
  will-change:transform;
}
.srvv2-card::after {
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);
  transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.srvv2-card:hover::after { left:130%; }
.srvv2-card:hover {
  transform:translateY(-9px) perspective(600px) rotateX(3deg);
  border-color:rgba(244,63,94,0.35);
  box-shadow:0 24px 60px rgba(0,0,0,0.32);
}
.srv-icon-wrap {
  width:56px; height:56px; border-radius:16px;
  background:rgba(124,58,237,0.12);
  border:1px solid rgba(124,58,237,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem;
}
.srv-card-title { font-size:1.05rem; font-weight:800; }
.srv-card-desc { font-size:.82rem; color:var(--muted); line-height:1.6; }
.srv-card-arrow { font-size:.78rem; color:var(--p2); font-weight:700; margin-top:auto; }
.org-srv-card {
  padding:24px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--border2);
  transition:transform .3s, box-shadow .3s;
  cursor:pointer;
  position:relative; overflow:hidden;
}
.org-srv-card::before {
  content:'';
  position:absolute; inset:0;
  background:var(--org-grad,linear-gradient(135deg,rgba(124,58,237,.1),transparent));
  pointer-events:none;
}
.org-srv-card:hover {
  transform:translateY(-5px);
  box-shadow:0 14px 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(124,58,237,0.3);
}

/* ── SERVICE OVERLAY ────────────────────────────────────── */
.sp-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(14px);
  overflow-y:auto;
  display:none; flex-direction:column;
}
.sp-overlay.open { display:flex; }
.sp-header {
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:12px;
  padding:16px var(--pad);
  background:rgba(7,5,15,0.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border2);
}
.sp-back {
  display:flex; align-items:center; gap:6px;
  background:var(--card2); border:1px solid var(--border2);
  border-radius:10px; padding:8px 16px;
  color:var(--text); font-size:.85rem; font-weight:700;
  transition:background .2s;
}
.sp-back:hover { background:rgba(255,255,255,0.12); }
.sp-body {
  max-width:700px; margin:0 auto; padding:32px 16px 60px; width:100%;
}
.sp-hero-icon {
  width:80px; height:80px; border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; margin-bottom:20px;
  border:1px solid rgba(124,58,237,0.2);
}
.sp-title { font-size:1.8rem; font-weight:900; margin-bottom:10px; color:#fff !important; }
.sp-desc { color:rgba(255,255,255,0.62) !important; line-height:1.7; margin-bottom:20px; }
.sp-feat-title { font-size:.9rem; font-weight:700; margin-bottom:2px; color:#fff; }
.sp-feat-desc { font-size:.78rem; color:rgba(255,255,255,0.55); }
.sp-features { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.sp-feature {
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:14px;
  background:var(--card); border:1px solid var(--border2);
}
.sp-feat-icon { font-size:1.3rem; flex-shrink:0; }

/* Booking form */
.book-section { padding:28px; border-radius:var(--radius); background:var(--card); border:1px solid var(--border); }
.book-title { font-size:1.1rem; font-weight:900; margin-bottom:4px; }
.book-sub { font-size:.78rem; color:var(--muted); margin-bottom:20px; }
.book-grid { display:flex; flex-direction:column; gap:14px; }
.book-field { display:flex; flex-direction:column; gap:6px; }
.book-label { font-size:.72rem; font-weight:700; color:var(--muted); }
.book-input {
  background:rgba(255,255,255,0.04); border:1px solid var(--border2);
  border-radius:10px; padding:11px 14px;
  color:var(--text); font-family:'Cairo',sans-serif; font-size:.88rem;
  outline:none; transition:border-color .2s; width:100%;
}
.book-input:focus { border-color:rgba(124,58,237,0.5); }
.book-submit-btn {
  width:100%; padding:14px; border:none; border-radius:12px;
  background:linear-gradient(135deg,var(--p,#7c3aed),var(--r,#f43f5e));
  color:#fff; font-family:'Cairo',sans-serif;
  font-size:.95rem; font-weight:900;
  box-shadow:0 4px 20px color-mix(in srgb,var(--p,#7c3aed) 35%,transparent);
  transition:transform .2s;
}
.book-submit-btn:hover { transform:translateY(-2px); }
.payment-opts { display:flex; gap:10px; flex-wrap:wrap; }
/* Calendar */
.cal-day {
  padding:6px; border-radius:8px; font-size:.8rem;
  cursor:pointer; transition:all .2s; text-align:center;
}
.cal-day.today { border:1px solid rgba(124,58,237,0.4); }
.cal-day.available:hover { background:rgba(124,58,237,0.15); border-color:rgba(124,58,237,0.4); }
.cal-day.selected { background:rgba(124,58,237,0.25); border:1px solid rgba(124,58,237,0.6); color:#fff; }
.cal-day.disabled { opacity:.25; cursor:default; }

/* ── GIFTBOX ────────────────────────────────────────────── */
.gb-filters {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;
}
.gb-filter-btn {
  padding:8px 20px; border-radius:20px;
  border:1px solid var(--border2);
  background:var(--card); color:var(--muted);
  font-size:.82rem; font-weight:700;
  transition:all .2s;
}
.gb-filter-btn.active, .gb-filter-btn:hover {
  background:rgba(124,58,237,0.15);
  border-color:rgba(124,58,237,0.4); color:#fff;
}
.gb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.gb-card {
  padding:24px; border-radius:var(--radius);
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border2);
  display:flex; flex-direction:column; gap:16px;
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1),
             box-shadow .4s ease,
             border-color .4s ease;
  will-change:transform; position:relative; overflow:hidden;
}
/* توهج داخلي بنفسجي يظهر عند hover */
.gb-card::before {
  content:''; position:absolute;
  inset:0; border-radius:inherit;
  background:radial-gradient(ellipse 80% 55% at 50% -10%,
              rgba(124,58,237,0.28) 0%,
              rgba(244,63,94,0.08) 55%,
              transparent 80%);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none; z-index:0;
}
.gb-card:hover::before { opacity:1; }
/* shimmer sweep */
.gb-card::after {
  content:''; position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
  transform:skewX(-20deg); transition:left .65s ease;
  pointer-events:none; z-index:1;
}
.gb-card:hover::after { left:130%; }
/* محتوى الكرت فوق الـ glow */
.gb-card-head, .gb-card-body { position:relative; z-index:2; }
.gb-card:hover {
  transform:translateY(-7px) perspective(600px) rotateX(2deg);
  border-color:rgba(168,85,247,0.45);
  box-shadow:
    0 0 0 1px rgba(168,85,247,0.2),
    0 8px 32px rgba(124,58,237,0.22),
    0 24px 60px rgba(0,0,0,0.32);
}
.gb-card-header, .gb-card-head { display:flex; flex-direction:column; gap:4px; }
.gb-card-icon {
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; flex-shrink:0;
}
.gb-card-title { font-size:.95rem; font-weight:800; }
.gb-card-count { font-size:.72rem; color:var(--muted); margin-top:2px; }
.gb-card-body  { display:flex; flex-direction:column; gap:8px; }
.gb-item {
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border2);
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.gb-item:hover { border-color:rgba(124,58,237,0.3); background:rgba(124,58,237,0.05); }
.gb-item-emoji { font-size:1.2rem; flex-shrink:0; margin-top:2px; }
.gb-item-content { flex:1; min-width:0; }
.gb-item-title { font-size:.85rem; font-weight:700; margin-bottom:2px; }
.gb-item-desc { font-size:.72rem; color:var(--muted); }
.gb-item-action {
  font-size:.72rem; color:var(--p2); font-weight:700;
  background:rgba(124,58,237,0.1); border:1px solid rgba(124,58,237,0.2);
  border-radius:8px; padding:5px 10px; flex-shrink:0;
  transition:background .2s;
}
.gb-item:hover .gb-item-action { background:rgba(124,58,237,0.2); }

/* ── ARTICLES / WORKS ───────────────────────────────────── */
.arts-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
}
.art-card {
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border2);
  transition:transform .3s, box-shadow .3s;
}
.art-card:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(0,0,0,0.3); }
.art-thumb {
  width:100%; aspect-ratio:16/9;
  background:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(244,63,94,0.1));
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; position:relative; overflow:hidden;
}
.art-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.art-body { padding:20px; flex:1; display:flex; flex-direction:column; gap:10px; }
.art-tag {
  display:inline-block; padding:4px 12px; border-radius:20px;
  background:rgba(168,85,247,0.12); border:1px solid rgba(168,85,247,0.2);
  color:var(--p2); font-size:.72rem; font-weight:700;
  align-self:flex-start;
}
.art-title { font-size:1rem; font-weight:800; line-height:1.4; }
.art-excerpt { font-size:.8rem; color:var(--muted); line-height:1.6; flex:1; }
.art-footer {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.72rem; color:var(--muted); padding-top:10px;
  border-top:1px solid var(--border2);
}
.art-read { color:var(--p2); font-weight:700; display:flex; align-items:center; gap:4px; }

/* Article Modal */
#artModalOverlay {
  position:fixed; inset:0; z-index:9100;
  background:rgba(0,0,0,0.9); backdrop-filter:blur(14px);
  display:none; align-items:flex-start; justify-content:center;
  padding:60px 16px 40px; overflow-y:auto;
}
#artModalOverlay.open { display:flex; }
#artModal {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:24px; max-width:760px; width:100%;
  padding:40px 32px; position:relative;
}
.art-modal-close {
  position:absolute; top:16px; left:16px;
  width:36px; height:36px; border-radius:50%;
  background:var(--card2); border:1px solid var(--border2);
  color:var(--text); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s;
}
.art-modal-close:hover { background:rgba(255,255,255,0.15); }
/* Articles page overlay */
#articlesPage {
  position:fixed; inset:0; z-index:8500;
  background:var(--bg); overflow-y:auto;
  display:none; opacity:0; transition:opacity .3s;
}

/* ── MEDIA / CONTENT MAP ────────────────────────────────── */
.media-tabs { display:flex; gap:8px; margin-bottom:28px; flex-wrap:wrap; }
.media-tab {
  padding:8px 18px; border-radius:10px;
  border:1px solid var(--border2);
  background:var(--card); color:var(--muted);
  font-size:.82rem; font-weight:700;
  transition:all .2s;
}
.media-tab.active, .media-tab:hover {
  background:rgba(124,58,237,0.15);
  border-color:rgba(124,58,237,0.4); color:#fff;
}
.media-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.media-card {
  border-radius:var(--radius); overflow:hidden;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border2);
  display:flex; flex-direction:column;
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .35s;
  position:relative; will-change:transform;
}
.media-card:hover {
  transform:translateY(-9px) perspective(600px) rotateX(2deg);
  box-shadow:0 24px 60px rgba(0,0,0,0.28);
}
.media-card-thumb {
  width:100%; aspect-ratio:16/9; position:relative;
  background:rgba(124,58,237,0.1);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.media-card-thumb img { width:100%; height:100%; object-fit:cover; }
.media-thumb-emoji { font-size:2.5rem; opacity:.6; }
.media-play-btn {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.3);
}
.media-play-btn svg { width:40px; height:40px; fill:#fff; }
.media-card-top { display:flex; align-items:center; gap:10px; padding:16px 16px 6px; }
.media-card-logo { font-size:1.4rem; }
.media-card-channel { font-size:.85rem; font-weight:700; }
.media-card-type { font-size:.68rem; color:var(--muted); }
.media-card-title { font-size:.9rem; font-weight:800; padding:0 16px; line-height:1.4; }
.media-card-desc { font-size:.75rem; color:var(--muted); padding:8px 16px; line-height:1.5; flex:1; }
.media-card-meta {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px 14px; border-top:1px solid var(--border2);
  font-size:.72rem; color:var(--muted);
}
.media-card-link { color:var(--p2); font-weight:700; transition:opacity .2s; }
.media-card-link:hover { opacity:.75; }

/* ── NEWSLETTER ─────────────────────────────────────────── */
.nl-wrap { max-width:600px; margin:0 auto; text-align:center; }
.nl-form { display:flex; gap:10px; margin-top:28px; }
.nl-input {
  flex:1; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:13px 18px;
  color:var(--text); font-family:'Cairo',sans-serif; font-size:.9rem;
  outline:none; transition:border-color .2s;
}
.nl-input:focus { border-color:rgba(124,58,237,0.5); }
.nl-btn {
  padding:13px 24px; border:none; border-radius:12px;
  background:linear-gradient(135deg,var(--p,#7c3aed),var(--r,#f43f5e));
  color:#fff; font-family:'Cairo',sans-serif;
  font-size:.88rem; font-weight:700; white-space:nowrap;
  box-shadow:0 4px 16px color-mix(in srgb,var(--p,#7c3aed) 30%,transparent);
}
.nl-badges { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
.nl-badge {
  padding:5px 14px; border-radius:20px;
  background:rgba(16,185,129,0.1);
  border:1px solid rgba(16,185,129,0.2);
  color:#34d399; font-size:.72rem; font-weight:700;
}

/* ── CONTACT — New Stacked Layout ───────────────────────── */
/* Row 1: info cards */
.contact-info-2col { grid-template-columns:repeat(2,1fr); max-width:640px; margin-left:auto; margin-right:auto; }
/* Row 2: Form wrapper (centered, max-width) */
.contact-form-wrap {
  max-width:680px; margin:0 auto 32px;
}
/* Row 3: Social */
/* Icons */
/* Contact form */
.contact-form {
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border2); border-radius:var(--radius); padding:32px;
}
.cf-field { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
.cf-label { font-size:.72rem; font-weight:700; color:var(--muted); }
.cf-input {
  background:rgba(255,255,255,0.04); border:1px solid var(--border2);
  border-radius:10px; padding:11px 14px;
  color:var(--text); font-family:'Cairo',sans-serif; font-size:.88rem;
  outline:none; transition:border-color .2s; width:100%;
}
.cf-input:focus { border-color:rgba(124,58,237,0.5); }
select.cf-input { cursor:pointer; }
select.cf-input option { background:var(--bg2); }
.cf-btn {
  width:100%; padding:14px; border:none; border-radius:12px;
  background:linear-gradient(135deg,var(--p,#7c3aed),var(--r,#f43f5e));
  color:#fff; font-family:'Cairo',sans-serif;
  font-size:.92rem; font-weight:900;
  box-shadow:0 4px 20px color-mix(in srgb,var(--p,#7c3aed) 30%,transparent);
  transition:transform .2s;
}
.cf-btn:hover { transform:translateY(-2px); }

/* ── FLOATING WA BUTTON ─────────────────────────────────── */
#contactFloatingWA {
  position:fixed; bottom:28px; left:28px; z-index:200;
  width:56px; height:56px; border-radius:50%;
  background:#25d366;
  box-shadow:0 4px 20px rgba(37,211,102,0.5);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  transition:transform .25s;
}
#contactFloatingWA:hover { transform:scale(1.12); }

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  position:relative; z-index:1;
  border-top:1px solid var(--border2);
  background:rgba(7,5,15,0.7);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  overflow:hidden;
}
footer::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 20% 50%, rgba(124,58,237,0.07) 0%, transparent 70%),
             radial-gradient(ellipse 50% 50% at 80% 50%, rgba(244,63,94,0.05) 0%, transparent 70%);
}
.ftr-inner {
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr;
  gap:32px; padding:60px clamp(20px,4%,60px) 40px;
  align-items:start;
}
/* Brand column */
.ftr-brand { display:flex; flex-direction:column; gap:12px; }
.footer-logo { font-size:1.6rem; font-weight:900; letter-spacing:3px; font-family:sans-serif; }
.ftr-tagline { font-size:.82rem; color:var(--muted); line-height:1.6; }
/* Contact mini-items (WA + Email) in footer brand */
.ftr-contact-row { display:flex; flex-direction:column; gap:8px; margin:4px 0 12px; }
.ftr-ci {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:14px; text-decoration:none;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  transition:background .2s, border-color .2s, transform .2s;
}
.ftr-ci-wa { border-color:rgba(37,211,102,0.2); }
.ftr-ci-email { border-color:rgba(124,58,237,0.2); }
.ftr-ci:hover { transform:translateX(-3px); background:rgba(255,255,255,0.07); }
.ftr-ci-wa:hover { border-color:rgba(37,211,102,0.45); }
.ftr-ci-email:hover { border-color:rgba(124,58,237,0.45); }
.fci-icon { font-size:1.2rem; flex-shrink:0; }
.fci-info { display:flex; flex-direction:column; gap:1px; }
.fci-info b { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.88); }
.fci-info small { font-size:.72rem; color:var(--muted); direction:ltr; }
[data-theme="light"] .ftr-ci { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); }
[data-theme="light"] .fci-info b { color:rgba(19,14,28,.85); }
/* Social platform buttons with labels */
.ftr-soc-btn {
  height:36px; padding:0 12px 0 10px; border-radius:20px; gap:6px;
  background:var(--sc, rgba(255,255,255,.06));
  border:1px solid var(--sb, rgba(255,255,255,.15));
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem; text-decoration:none; color:rgba(255,255,255,.8);
  transition:transform .25s cubic-bezier(0.34,1.56,0.64,1), background .2s;
}
.ftr-soc-btn:hover { transform:translateY(-3px) scale(1.05); background:var(--sc); color:#fff; }
.ftr-soc-lbl { font-size:.75rem; font-weight:600; letter-spacing:.3px; }
.ftr-socials { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
/* Glass columns */
.ftr-glass-col {
  position:relative; overflow:hidden;
  border-radius:20px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(168,85,247,0.14);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:28px 24px 24px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .3s, box-shadow .3s;
}
.ftr-glass-col:hover {
  border-color:rgba(168,85,247,0.28);
  box-shadow:0 20px 50px rgba(0,0,0,0.2);
}
.ftr-glow {
  position:absolute; top:-30px; right:-20px;
  width:150px; height:130px; border-radius:50%;
  background:var(--gc, rgba(124,58,237,0.25));
  filter:blur(45px); pointer-events:none; opacity:.8;
}
.ftr-col-hd {
  display:flex; align-items:center; gap:8px;
  font-size:1rem; font-weight:900;
  background:linear-gradient(135deg,#a78bfa,#f9a8d4);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:6px;
  padding-bottom:12px; border-bottom:1px solid rgba(168,85,247,0.12);
}
.ftr-col-icon { -webkit-text-fill-color:initial; }
.ftr-lnk {
  font-size:.85rem; color:rgba(255,255,255,0.6);
  text-decoration:none; padding:5px 0;
  transition:color .2s, transform .2s;
  display:block;
}
.ftr-lnk:hover { color:rgba(168,85,247,0.9); transform:translateX(-4px); }
.ftr-lnk-cta {
  margin-top:6px; font-weight:700; font-size:.76rem;
  color:rgba(168,85,247,0.7) !important;
  border-top:1px solid rgba(168,85,247,0.1); padding-top:12px !important;
}
.ftr-lnk-cta:hover { color:rgba(168,85,247,1) !important; }
/* Bottom bar */
.ftr-bottom {
  position:relative; z-index:1;
  text-align:center; padding:20px 20px 28px;
  border-top:1px solid rgba(255,255,255,0.05);
}
.footer-copy { font-size:.78rem; color:var(--muted); }
/* Light mode */
[data-theme="light"] footer { background:rgba(250,248,242,0.85); border-color:rgba(19,14,30,0.08); }
[data-theme="light"] .ftr-glass-col { background:rgba(255,250,238,0.7); border-color:rgba(124,58,237,0.12); }
[data-theme="light"] .ftr-lnk { color:rgba(19,14,28,0.55); }
[data-theme="light"] .ftr-tagline { color:rgba(19,14,28,0.55); }
/* Responsive */
@media(max-width:768px) {
  .ftr-inner { grid-template-columns:1fr; gap:24px; padding:40px var(--pad) 28px; }
  .ftr-brand { align-items:center; text-align:center; }
  .ftr-tagline { max-width:none; text-align:center; }
}

/* ── IMPACT SECTION ─────────────────────────────────────── */
#impactGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
/* ── SERVICES SPLIT SELECTOR ─────────────────────────────── */
.srv-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:8px;
}
.ssc-card {
  position:relative; overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(168,85,247,0.18);
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  cursor:pointer; text-align:center;
  transition:transform .5s cubic-bezier(0.34,1.56,0.64,1),
             border-color .4s ease,
             box-shadow .45s ease,
             opacity .4s cubic-bezier(0.4,0,0.2,1),
             filter .4s ease;
  will-change:transform, opacity, filter;
}
.ssc-card:hover {
  transform:translateY(-10px) perspective(700px) rotateX(2deg);
  border-color:rgba(168,85,247,0.4);
  box-shadow:0 30px 70px rgba(0,0,0,0.28);
}
.ssc-card.selected {
  transform:translateY(-6px) scale(1.015);
  border-color:rgba(124,58,237,0.75);
  box-shadow:0 0 0 2px rgba(124,58,237,0.3),
             0 32px 80px rgba(0,0,0,0.4),
             0 0 60px rgba(124,58,237,0.22);
}
.ssc-card.dimmed {
  opacity:0.35;
  transform:scale(0.95);
  filter:saturate(0.4) blur(0.5px);
  cursor:pointer;
}
/* Glow blob */
.ssc-glow {
  position:absolute; top:-40px; left:50%;
  transform:translateX(-50%);
  width:240px; height:200px; border-radius:50%;
  background:var(--gc, rgba(124,58,237,0.3));
  filter:blur(55px); pointer-events:none;
  opacity:0.6;
  transition:opacity .5s ease;
}
.ssc-card.selected .ssc-glow {
  animation:glowPulse 2.8s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100%{ opacity:0.75; }
  50%    { opacity:1; }
}
/* Inner content */
.ssc-inner { position:relative; z-index:1; padding:52px 28px 40px; }
.ssc-icon { font-size:3.8rem; margin-bottom:18px; line-height:1; }
.ssc-label {
  font-size:1.7rem; font-weight:900;
  background:linear-gradient(135deg,#a78bfa,#f9a8d4);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:10px;
}
#ssc-orgs .ssc-label {
  background:linear-gradient(135deg,#f43f5e,#fb923c);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.ssc-desc {
  font-size:.88rem; color:var(--muted);
  line-height:1.65; margin-bottom:28px; max-width:280px; margin-left:auto; margin-right:auto;
}
.ssc-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:30px;
  border:1px solid rgba(168,85,247,0.3);
  background:rgba(124,58,237,0.1);
  font-size:.82rem; font-weight:700; color:rgba(168,85,247,0.9);
  transition:background .25s, transform .25s;
}
#ssc-orgs .ssc-cta {
  border-color:rgba(244,63,94,0.3);
  background:rgba(244,63,94,0.08);
  color:rgba(244,63,94,0.9);
}
.ssc-card:hover .ssc-cta { background:rgba(124,58,237,0.18); transform:translateY(-2px); }
#ssc-orgs:hover .ssc-cta { background:rgba(244,63,94,0.15); }
.ssc-arrow {
  display:inline-block;
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1);
}
.ssc-card.selected .ssc-arrow { transform:rotate(180deg); }
/* Shimmer sweep */
.ssc-shimmer {
  position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
  transform:skewX(-20deg); pointer-events:none;
  transition:left .7s ease;
}
.ssc-card:hover .ssc-shimmer { left:130%; }
/* Reveal area */
.srv-reveal {
  overflow:hidden; max-height:0;
  opacity:0;
  transform:translateY(10px);
  transition:max-height .65s cubic-bezier(0.16,1,0.3,1),
             margin-top .5s cubic-bezier(0.16,1,0.3,1),
             opacity .45s cubic-bezier(0.16,1,0.3,1),
             transform .5s cubic-bezier(0.16,1,0.3,1);
  margin-top:0;
}
.srv-reveal.open {
  max-height:3200px;
  margin-top:28px;
  opacity:1;
  transform:translateY(0);
}
/* Stagger animation for service cards */
@keyframes srvCardIn {
  from { opacity:0; transform:translateY(28px) scale(0.93); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.srvv2-card.stagger-anim,
.org-card-v2.stagger-anim {
  animation:srvCardIn .55s cubic-bezier(0.16,1,0.3,1) both;
}
.srv-reveal-label {
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:700; color:var(--muted);
  margin-bottom:20px; padding-bottom:16px;
  border-bottom:1px solid var(--border2);
}
.srv-reveal-label::before {
  content:''; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--p,#7c3aed),var(--r,#f43f5e)); flex-shrink:0;
}
/* Light mode */
[data-theme="light"] .ssc-card { background:rgba(255,250,238,0.82); }
[data-theme="light"] .ssc-desc { color:rgba(19,14,28,0.55); }
/* Mobile */
@media(max-width:640px) {
  .srv-split { grid-template-columns:1fr; }
  .ssc-inner { padding:40px 20px 32px; }
  .ssc-label { font-size:1.4rem; }
  .ssc-icon { font-size:3rem; }
}

/* ── IMPACT CARDS ────────────────────────────────────────── */
.impact-card {
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  padding:28px 20px; border-radius:var(--radius); text-align:center;
  background:rgba(255,255,255,0.04); border:1px solid var(--border2);
  box-shadow:0 0 18px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.04);
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .35s;
  position:relative; overflow:hidden; will-change:transform;
}
.impact-card::before {
  content:''; position:absolute; inset:0;
  background:var(--ic-bg,linear-gradient(135deg,rgba(124,58,237,.1),transparent));
  pointer-events:none;
}
.impact-card::after {
  content:''; position:absolute;
  width:80px; height:80px; border-radius:50%;
  background:var(--ic-color,rgba(168,85,247,0.3));
  filter:blur(28px); top:-10px; right:-10px; pointer-events:none;
  opacity:0.5;
}
.impact-card:hover {
  transform:translateY(-9px) perspective(600px) rotateX(3deg);
  box-shadow:0 0 0 1px var(--ic-color,rgba(168,85,247,0.5)),0 24px 60px rgba(0,0,0,0.3),0 0 40px rgba(124,58,237,0.12);
}
.impact-icon { font-size:1.8rem; margin-bottom:10px; }
.impact-num { font-size:2rem; font-weight:900; color:var(--ic-color,var(--p2)); margin-bottom:4px; }
.impact-label { font-size:.82rem; color:var(--muted); font-weight:600; }
.impact-platform { font-size:.68rem; color:var(--ic-color,var(--p2)); margin-top:6px; opacity:.7; }

/* ── PLATFORM CARDS (lastPostsGrid) Glass ───────────────── */
.platform-card {
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:28px 20px;border-radius:22px;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  text-decoration:none;color:var(--text);
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .35s ease, border-color .3s;
  position:relative; overflow:hidden;
  will-change:transform;
}
.platform-card::after {
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);
  transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.platform-card:hover::after { left:130%; }
.platform-card:hover {
  transform:translateY(-10px) perspective(600px) rotateX(3deg);
  color:var(--text);
}

/* ── EXPLAIN CAROUSEL — Premium Slide Animation ─────────── */
.exp-track { position:relative; overflow:hidden; }
.exp-card {
  display:none; padding:32px;
  border-radius:var(--radius);
  background:rgba(15,10,35,0.65);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(168,85,247,0.18); position:relative; overflow:hidden;
  transition:box-shadow .4s, border-color .4s;
}
.exp-card.active {
  display:block;
  animation:expFadeIn .45s cubic-bezier(0.34,1.56,0.64,1);
}
.exp-track.dir-next .exp-card.active {
  animation:expSlideFromRight .5s cubic-bezier(0.34,1.56,0.64,1);
}
.exp-track.dir-prev .exp-card.active {
  animation:expSlideFromLeft .5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes expFadeIn {
  from{opacity:0;transform:translateY(16px) scale(.97);filter:blur(4px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes expSlideFromRight {
  from{opacity:0;transform:translateX(70px) scale(.96) perspective(600px) rotateY(-10deg);filter:blur(3px)}
  to{opacity:1;transform:translateX(0) scale(1) perspective(600px) rotateY(0);filter:blur(0)}
}
@keyframes expSlideFromLeft {
  from{opacity:0;transform:translateX(-70px) scale(.96) perspective(600px) rotateY(10deg);filter:blur(3px)}
  to{opacity:1;transform:translateX(0) scale(1) perspective(600px) rotateY(0);filter:blur(0)}
}

/* ── CORRECT ANSWER GLOW ────────────────────────────────── */
/* ── إجابة صحيحة: وميض أخضر قوي حول الكارد كله ── */
.exp-card.answer-correct {
  border-color:rgba(16,185,129,0.9) !important;
  animation:cardCorrectPop 1.8s cubic-bezier(.22,.68,0,1.2) forwards !important;
}
@keyframes cardCorrectPop {
  0%   { box-shadow:0 0 0 0 rgba(16,185,129,0.9); transform:scale(1); }
  10%  { transform:scale(1.022); }
  20%  { box-shadow:0 0 0 10px rgba(16,185,129,0.5),
                    0 0 60px 18px rgba(16,185,129,0.28); transform:scale(1.01); }
  50%  { box-shadow:0 0 0 18px rgba(16,185,129,0.12),
                    0 0 80px 30px rgba(16,185,129,0.12); transform:scale(1); }
  80%  { box-shadow:0 0 0 10px rgba(16,185,129,0.06),
                    0 0 40px 12px rgba(16,185,129,0.08); }
  100% { box-shadow:0 0 0 4px rgba(16,185,129,0.2),
                    0 0 24px 6px rgba(16,185,129,0.1); }
}
.exp-card.answer-correct::before {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(16,185,129,0.12),transparent 55%);
  animation:correctShimmer 1.8s ease forwards;
}
@keyframes correctShimmer {
  0%   { opacity:0; }
  25%  { opacity:1; }
  100% { opacity:0.4; }
}
/* ── نجمة التحقق العائمة ── */
.exp-result-icon {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  font-size:4rem; pointer-events:none; z-index:10;
  animation:resultIconPop .7s cubic-bezier(.22,.68,0,1.2) forwards;
}
@keyframes resultIconPop {
  0%   { transform:translate(-50%,-50%) scale(0); opacity:0; }
  40%  { transform:translate(-50%,-50%) scale(1.3); opacity:1; }
  65%  { transform:translate(-50%,-50%) scale(0.95); opacity:1; }
  100% { transform:translate(-50%,-60%) scale(1); opacity:0; }
}
/* ── إجابة خاطئة: اهتزاز أحمر حول الكارد كله ── */
.exp-card.answer-wrong {
  border-color:rgba(244,63,94,0.9) !important;
  animation:cardWrongShake .65s cubic-bezier(.36,.07,.19,.97) forwards !important;
}
@keyframes cardWrongShake {
  0%   { transform:translateX(0);   box-shadow:0 0 0 0 rgba(244,63,94,0.9); }
  12%  { transform:translateX(-11px); box-shadow:0 0 0 8px rgba(244,63,94,0.45),
                                                  0 0 40px 12px rgba(244,63,94,0.25); }
  25%  { transform:translateX(10px);  box-shadow:0 0 0 12px rgba(244,63,94,0.3),
                                                  0 0 50px 16px rgba(244,63,94,0.18); }
  40%  { transform:translateX(-8px);  box-shadow:0 0 0 8px rgba(244,63,94,0.2); }
  55%  { transform:translateX(6px);   box-shadow:0 0 0 5px rgba(244,63,94,0.12); }
  70%  { transform:translateX(-4px); }
  85%  { transform:translateX(2px); }
  100% { transform:translateX(0);   box-shadow:none; border-color:rgba(255,255,255,0.06) !important; }
}
.exp-card.answer-wrong::before {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(244,63,94,0.12),transparent 55%);
  animation:wrongShimmer .65s ease forwards;
}
@keyframes wrongShimmer {
  0%   { opacity:0; }
  30%  { opacity:1; }
  100% { opacity:0; }
}
.exp-icon { font-size:2.5rem; margin-bottom:12px; }
.exp-badge {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 20px; border-radius:30px;
  font-size:.8rem; font-weight:800; margin-bottom:16px;
}
.exp-badge.info { background:rgba(245,158,11,0.12); color:#fbbf24; border:1px solid rgba(245,158,11,0.3); }

/* ── اختبر نفسك — eye-catching pulsing badge ── */
.exp-badge.quiz {
  font-size:1rem; font-weight:900; padding:10px 26px;
  background:linear-gradient(135deg,rgba(124,58,237,0.25),rgba(244,63,94,0.18));
  color:#c4b5fd;
  border:1px solid rgba(124,58,237,0.5);
  box-shadow:0 0 0 0 rgba(124,58,237,0.5);
  animation:quizPulse 2.4s ease-in-out infinite;
  position:relative; cursor:default;
}
.exp-badge.quiz::before {
  content:''; position:absolute; inset:-3px; border-radius:33px;
  background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(244,63,94,0.15),rgba(124,58,237,0.2));
  filter:blur(6px); z-index:-1;
  animation:quizGlowRing 2.4s ease-in-out infinite;
}
@keyframes quizPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(124,58,237,0.45), 0 0 20px rgba(124,58,237,0.2); }
  50%      { box-shadow:0 0 0 8px rgba(124,58,237,0), 0 0 35px rgba(124,58,237,0.35); }
}
@keyframes quizGlowRing {
  0%,100% { opacity:0.6; }
  50%      { opacity:1; }
}
.exp-title { font-size:1.15rem; font-weight:800; margin-bottom:10px; }
.exp-desc { font-size:.85rem; color:var(--muted); line-height:1.7; }
.exp-counter { position:absolute; top:16px; left:16px; font-size:.7rem; color:var(--muted); font-weight:700; }
.exp-dots { display:flex; justify-content:center; gap:6px; margin-top:20px; }
.exp-dot {
  width:8px; height:8px; border-radius:4px;
  background:rgba(255,255,255,0.2); border:none;
  cursor:pointer; transition:all .3s;
}
.exp-dot.active { width:24px; background:var(--p2); }
.exp-nav { display:flex; justify-content:center; gap:12px; margin-top:16px; }
.exp-nav-btn {
  padding:8px 20px; border-radius:10px;
  border:1px solid var(--border2); background:var(--card);
  color:var(--text); font-size:.85rem; font-weight:700;
  transition:all .2s;
}
.exp-nav-btn:hover { background:rgba(124,58,237,0.15); border-color:rgba(124,58,237,0.4); }
.exp-opts { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.exp-opt {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.07);
  color:var(--text);
  font-family:'Cairo',sans-serif;
  font-size:.83rem; font-weight:600; cursor:pointer;
  transition:background .2s, border-color .2s;
  text-align:left; direction:ltr; width:100%;
}
.exp-opt:hover { background:rgba(255,255,255,0.11); }
.exp-opt-ltr { width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:900; flex-shrink:0; }
.exp-opt.correct { background:rgba(16,185,129,0.2)!important; border-color:rgba(16,185,129,0.5)!important; }
.exp-opt.wrong { background:rgba(244,63,94,0.15)!important; border-color:rgba(244,63,94,0.4)!important; }
.exp-lesson { display:none; padding:10px 14px; border-radius:10px; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.25); color:#34d399; font-size:.78rem; line-height:1.6; margin-top:8px; }
.exp-retry-btn { display:none; margin-top:8px; padding:6px 16px; border-radius:8px; background:var(--card2); border:1px solid var(--border2); color:var(--muted); font-family:'Cairo',sans-serif; font-size:.72rem; cursor:pointer; }

/* ── BOOKING SUCCESS MODAL ───────────────────────────────── */
#bookSuccess {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(14px);
  display:none; align-items:center; justify-content:center; padding:16px;
}
#bookSuccess.open { display:flex; }

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-16px); }
}
@keyframes float-r {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-12px); }
}
@keyframes pulse-dot {
  0%,100% { opacity:1; box-shadow:0 0 8px rgba(16,185,129,.8); }
  50% { opacity:.6; box-shadow:0 0 4px rgba(16,185,129,.4); }
}
@keyframes confettiFly {
  0% { transform:translateY(0) rotate(0deg); opacity:1; }
  100% { transform:translateY(-200px) rotate(360deg); opacity:0; }
}
.animate-float { animation:float 6s ease-in-out infinite; }
.animate-float-r { animation:float-r 7s ease-in-out infinite; animation-delay:1.2s; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-left { opacity:0; transform:translateX(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal-left.visible { opacity:1; transform:none; }
.reveal-right { opacity:0; transform:translateX(-28px); transition:opacity .65s ease, transform .65s ease; }
.reveal-right.visible { opacity:1; transform:none; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
/* ── cmap-card glass override (inline style only has var(--card)) ─ */
.cmap-card {
  background:rgba(255,255,255,0.04) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}

@media(max-width:900px) {
  :root { --pad:20px; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .about-photo { max-width:100%; aspect-ratio:4/3; }
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .hero-float-card { display:none; }
}
@media(max-width:600px) {
  .hero-h1 { font-size:2.4rem; }
  .section-title { font-size:1.6rem; }
  .section { padding:70px var(--pad); }
  .srv-grid, .arts-grid { grid-template-columns:1fr; }
  .nl-form { flex-direction:column; }
  .about-skills { grid-template-columns:1fr; }
  #navbar { left:12px; right:12px; }
}
/* ── Small screens (iPhone SE, Galaxy A) ────────────────── */
@media(max-width:375px) {
  .hero-h1 { font-size:2rem; }
  .hero-sub { font-size:.88rem; }
  .section-title { font-size:1.4rem; }
  .section-sub { font-size:.85rem; }
  .ftr-inner { gap:20px; padding:40px 16px 28px; }
  .ftr-ci { padding:8px 12px; }
  .fci-info small { display:none; }
  .gb-grid { grid-template-columns:1fr; }
  .nav-cta-btn { display:none; }
  .stats-band { gap:12px; }
  .stats-showcase { grid-template-columns:repeat(2,1fr); gap:12px; }
  .srvv2-grid { grid-template-columns:1fr; }
}

/* ── RTL Overrides (Arabic mode) ─────────────────────────── */
[dir=rtl] body { font-family: 'Cairo','Tajawal',sans-serif; }
[dir=rtl] .exp-step { border-right:none; border-left:2px solid rgba(124,58,247,0.4); padding-right:0; padding-left:12px; }
[dir=rtl] .exp-opts { direction:rtl; }
[dir=rtl] .exp-opt { text-align:right; }
[dir=rtl] .ftr-inner { direction:rtl; }
[dir=rtl] .nav-links { direction:rtl; }
[dir=rtl] .about-grid { direction:rtl; }
[dir=rtl] .srv-split { direction:rtl; }
[dir=rtl] .contact-form { direction:rtl; text-align:right; }
[dir=rtl] .cf-label { text-align:right; }
[dir=rtl] .book-grid { direction:rtl; }
[dir=rtl] .book-label { text-align:right; }
[dir=rtl] .sp-body { direction:rtl; }
[dir=rtl] .sp-back { direction:ltr; }
[dir=rtl] .art-modal { direction:rtl; }
[dir=rtl] #articlesPage { direction:rtl; }