/* ============================================================
   Dr. Rabea Elsheikh — v3 | Awwwards 3D Edition
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700;800&display=swap');

/* ---- Design Tokens ---- */
:root {
  --primary-bg:    #0E0C31;
  --main-bg:       #F8FAFC;
  --accent-gold:   #E5C158;
  --gold-dim:      rgba(229,193,88,0.14);
  --gold-glow:     rgba(229,193,88,0.30);
  --cta-green:     #25D366;
  --cta-green-dk:  #1aab52;
  --text-light:    #FFFFFF;
  --text-dark:     #0F172A;
  --text-muted:    #64748b;
  --glass-bg:      rgba(14,12,49,0.72);
  --glass-border:  rgba(229,193,88,0.13);
  --card-border:   #e2e8f0;
  --radius-sm:     12px;
  --radius-md:     20px;
  --radius-lg:     32px;
  --ease-out:      cubic-bezier(0.16,1,0.3,1);
  --ease-sm:       cubic-bezier(0.25,0.46,0.45,0.94);
  --trans:         all 0.38s cubic-bezier(0.25,0.46,0.45,0.94);
  --shadow-gold:   0 8px 40px rgba(229,193,88,0.24);
  --shadow-card:   0 8px 40px rgba(14,12,49,0.10);
}

/* ---- Reset ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { direction:rtl; scroll-behavior:auto }
body {
  font-family:'IBM Plex Sans Arabic',sans-serif;
  background:var(--main-bg); color:var(--text-dark);
  cursor:none; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection { background:var(--accent-gold); color:var(--primary-bg) }
img { max-width:100%; display:block }
a { text-decoration:none; color:inherit }
button { font-family:'IBM Plex Sans Arabic',sans-serif; cursor:none }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:5px }
::-webkit-scrollbar-track { background:var(--primary-bg) }
::-webkit-scrollbar-thumb { background:var(--accent-gold); border-radius:10px }
::-webkit-scrollbar-thumb:hover { box-shadow:0 0 8px var(--accent-gold) }

/* ==============================================
   CUSTOM CURSOR (base + drag variant)
   ============================================== */
.c-dot {
  width:9px; height:9px; background:var(--accent-gold);
  border-radius:50%; position:fixed; pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%); box-shadow:0 0 10px var(--accent-gold);
  transition:width .22s,height .22s,border-radius .22s,background .22s;
}
.c-ring {
  width:34px; height:34px; border:1.5px solid var(--accent-gold);
  border-radius:50%; position:fixed; pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%); opacity:.65;
  transition:width .38s var(--ease-out),height .38s var(--ease-out),border-radius .38s,opacity .3s;
}
.c-dot.hv  { width:46px; height:46px; mix-blend-mode:difference }
.c-ring.hv { width:56px; height:56px; opacity:.4 }

/* Drag cursor state */
.c-dot.drag {
  width:52px; height:52px; border-radius:12px;
  background:rgba(229,193,88,0.92); mix-blend-mode:normal;
  box-shadow:0 4px 24px rgba(229,193,88,0.5);
}
.c-ring.drag { opacity:0 }
/* Drag label rendered via JS into c-dot — hidden here, shown via data */
.c-drag-label {
  position:fixed; pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  font-size:.62rem; font-weight:800; color:var(--primary-bg);
  letter-spacing:.5px; white-space:nowrap;
  transition:opacity .25s;
  opacity:0;
}
.c-drag-label.show { opacity:1 }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--cta-green); color:#fff;
  font-size:.92rem; font-weight:700;
  padding:13px 28px; border-radius:50px; border:none; cursor:none;
  transition:var(--trans); position:relative; overflow:hidden;
  box-shadow:0 4px 22px rgba(37,211,102,.32);
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0; transition:opacity .3s;
}
.btn:hover { background:var(--cta-green-dk); transform:translateY(-2px); box-shadow:0 8px 32px rgba(37,211,102,.5) }
.btn:hover::after { opacity:1 }
.btn.lg { font-size:1rem; padding:15px 34px }
.btn.pulse { animation:pulse-btn 2.8s ease-in-out infinite }
@keyframes pulse-btn {
  0%,100% { box-shadow:0 4px 22px rgba(37,211,102,.32) }
  50%      { box-shadow:0 4px 42px rgba(37,211,102,.72),0 0 0 9px rgba(37,211,102,.08) }
}

/* ---- Section Base ---- */
section { padding:96px 6% }
.s-label {
  display:inline-block; background:var(--gold-dim);
  border:1px solid rgba(229,193,88,.26); color:var(--accent-gold);
  font-size:.73rem; font-weight:700; padding:5px 15px;
  border-radius:50px; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px;
}
.s-title { font-size:clamp(1.9rem,3.8vw,3rem); font-weight:800; line-height:1.18; margin-bottom:14px }
.s-sub { font-size:1rem; line-height:1.85; color:var(--text-muted); max-width:580px }
.s-head { text-align:center; margin-bottom:58px }
.s-head .s-sub { margin:0 auto }

/* ---- Scroll Reveal ---- */
.rv { opacity:0; transform:translateY(38px); transition:opacity .85s var(--ease-out),transform .85s var(--ease-out) }
.rv.v { opacity:1; transform:translateY(0) }
.rv.d1{transition-delay:.1s} .rv.d2{transition-delay:.2s}
.rv.d3{transition-delay:.3s} .rv.d4{transition-delay:.4s} .rv.d5{transition-delay:.5s}

/* ==============================================
   HEADER
   ============================================== */
#hdr {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:70px; padding:0 6%;
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  background:var(--glass-bg); border-bottom:1px solid var(--glass-border);
  transition:box-shadow .4s;
}
#hdr.s { box-shadow:0 4px 28px rgba(0,0,0,.4) }
.logo { font-size:1.14rem; font-weight:800; color:var(--accent-gold); white-space:nowrap }
.logo em { color:rgba(255,255,255,.52); font-style:normal; font-weight:400 }
.nav { display:flex; gap:1.55rem; list-style:none; align-items:center }
.nav a {
  color:rgba(255,255,255,.66); font-size:.82rem; font-weight:500;
  transition:color .3s; position:relative;
}
.nav a::after { content:''; position:absolute; bottom:-4px; right:0; width:0; height:1.5px; background:var(--accent-gold); transition:width .3s }
.nav a:hover { color:var(--accent-gold) }
.nav a:hover::after { width:100% }
.hbg { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px }
.hbg span { display:block; width:22px; height:2px; background:var(--accent-gold); border-radius:2px; transition:var(--trans) }
.mob-nav {
  position:fixed; top:70px; left:0; right:0; z-index:990;
  background:var(--glass-bg); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--glass-border);
  padding:12px 6%; flex-direction:column; display:none;
}
.mob-nav.on { display:flex }
.mob-nav a { color:rgba(255,255,255,.72); font-size:.9rem; font-weight:500; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.05); transition:color .3s }
.mob-nav a:last-child { border-bottom:none }
.mob-nav a:hover { color:var(--accent-gold) }

/* ==============================================
   HERO — CLEAN STATIC SPLIT
   ============================================== */
#hero {
  background:var(--primary-bg);
  height:100vh; min-height:640px;
  display:flex; align-items:stretch;
  overflow:hidden; position:relative;
}

/* Subtle noise/texture — very light, no movement */
#hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.04; z-index:0;
}

/* ==============================================
   HERO AMBIENT AURA — purely decorative orbs
   ============================================== */
.hero-aura {
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.aura-orb {
  position:absolute; border-radius:50%;
  filter:blur(100px); will-change:transform,opacity;
}
/* Gold orb — top-right area */
.aura-orb-1 {
  width:42vw; height:42vw;
  background:rgba(229,193,88,0.13);
  top:-8%; right:-5%;
  animation:aura-float-1 18s ease-in-out infinite;
}
/* Cyan/Teal orb — bottom-left area */
.aura-orb-2 {
  width:36vw; height:36vw;
  background:rgba(32,178,155,0.10);
  bottom:-6%; left:2%;
  animation:aura-float-2 22s ease-in-out infinite;
}
/* Soft gold orb — center-left, very subtle */
.aura-orb-3 {
  width:26vw; height:26vw;
  background:rgba(229,193,88,0.07);
  top:35%; left:18%;
  animation:aura-float-3 15s ease-in-out infinite;
}

@keyframes aura-float-1 {
  0%,100% { transform:translate(0,0) scale(1);   opacity:1   }
  33%      { transform:translate(-3vw,3vh) scale(1.08); opacity:.85 }
  66%      { transform:translate(2vw,-2vh) scale(.94); opacity:.95 }
}
@keyframes aura-float-2 {
  0%,100% { transform:translate(0,0) scale(1);   opacity:1   }
  40%      { transform:translate(3vw,-4vh) scale(1.1);  opacity:.80 }
  70%      { transform:translate(-2vw,2vh) scale(.96); opacity:.92 }
}
@keyframes aura-float-3 {
  0%,100% { transform:translate(0,0) scale(1);   opacity:1   }
  50%      { transform:translate(4vw,5vh) scale(1.12); opacity:.70 }
}

/* Two-column scene */
.hero-scene {
  width:100%; display:grid;
  grid-template-columns:1fr 1fr;
  position:relative; z-index:1;
}

/* ---- Text column (right in RTL) ---- */
.hero-text {
  display:flex; flex-direction:column; justify-content:center;
  padding:0 6%; padding-top:70px;
  position:relative; z-index:2;
}

.hero-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:24px }
.h-badge {
  background:var(--gold-dim); border:1px solid rgba(229,193,88,.26);
  color:var(--accent-gold); font-size:.73rem; font-weight:700;
  padding:5px 14px; border-radius:50px; letter-spacing:1.5px;
}
.h-live { display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.48); font-size:.73rem }
.h-live-dot { width:6px; height:6px; background:var(--cta-green); border-radius:50%; animation:blink 1.6s ease-in-out infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.12} }

/* h1 = Doctor's name — the hero statement */
.hero-text h1 {
  font-size:clamp(3.2rem,6.5vw,6rem) !important; font-weight:800;
  color:var(--accent-gold); line-height:1; margin-bottom:24px !important;
  letter-spacing:-.5px;
}
/* h2 = specialty line */
.hero-text h2 {
  font-size:clamp(1.25rem,2.6vw,2.2rem); font-weight:600;
  color:rgba(255,255,255,.82); line-height:1.28; margin-bottom:20px;
  letter-spacing:.5px;
}
.hero-text p {
  color:rgba(255,255,255,.5); font-size:.95rem;
  line-height:1.85; max-width:460px; margin-bottom:34px;
}

/* ---- Animated Floating Stats ---- */
.hero-float-stats {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:12px; margin-top:36px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.07);
}
.hfs-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(229,193,88,.11);
  border-radius:var(--radius-sm); padding:15px 17px;
  position:relative; overflow:hidden;
  transition:var(--trans);
}
.hfs-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-gold),transparent);
}
.hfs-card:hover { background:rgba(255,255,255,.07); box-shadow:var(--gold-glow) }
.hfs-num {
  font-size:1.85rem; font-weight:800; color:var(--accent-gold);
  line-height:1; display:flex; align-items:baseline; gap:2px;
}
.hfs-prefix,.hfs-suffix { font-size:1rem; color:rgba(229,193,88,.7) }
.hfs-label { font-size:.71rem; color:rgba(255,255,255,.38); margin-top:4px; letter-spacing:.2px }

/* ---- Image column (left in RTL) ---- */
.hero-visual {
  position: relative;
  align-self: stretch;
  overflow: hidden;
}

/* Vertical gold accent line between columns */
.hero-visual::before {
  content: ''; position: absolute; top: 15%; bottom: 15%;
  right: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(229,193,88,.22), transparent);
  z-index: 3;
}

/* The doctor's image — fills column, anchored to bottom */
.hero-img-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;                        /* stretch full column height */
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;         /* pin image to bottom */
  overflow: hidden;
}

.hero-photo {
  width: 100%;
  height: 100%;                  /* fill full column height */
  max-height: none;              /* remove the old constraint */
  object-fit: cover;
  object-position: bottom center; /* keep feet anchored at bottom */
  filter: drop-shadow(0 -10px 60px rgba(14,12,49,.5));
  display: block;
}

/* Cinematic entry */
.h-in > * { opacity:0; transform:translateY(30px) }
.h-in.go > * {
  opacity:1; transform:translateY(0);
  transition:opacity .82s var(--ease-out),transform .82s var(--ease-out);
}
.h-in.go > *:nth-child(1){transition-delay:.04s}
.h-in.go > *:nth-child(2){transition-delay:.12s}
.h-in.go > *:nth-child(3){transition-delay:.22s}
.h-in.go > *:nth-child(4){transition-delay:.32s}
.h-in.go > *:nth-child(5){transition-delay:.44s}
.h-in.go > *:nth-child(6){transition-delay:.54s}

.hero-visual-entry { opacity:0 }
.hero-visual-entry.go {
  opacity:1;
  transition:opacity 1.2s var(--ease-out);
  transition-delay:.1s;
}

/* ---- Floating cutoff-mask badge — MASSIVE SOLID MASK ---- */
.hero-cutoff-mask {
  position:absolute;
  bottom:-4px;
  left:50%;
  transform:translateX(-50%);
  background:#E5C158 !important;
  border-radius:50px;
  padding:14px 32px;
  width:85%;
  max-width:480px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  z-index:50;
  box-shadow:0 15px 40px rgba(14,12,49,0.9);
  animation:hcm-rise 1s var(--ease-out) both;
  animation-delay:.6s;
}
@keyframes hcm-rise {
  from { opacity:0; transform:translateX(-50%) translateY(14px) }
  to   { opacity:1; transform:translateX(-50%) translateY(0) }
}
.hcm-status {
  background:#25D366 !important;
  border-radius:50px;
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 4px 12px rgba(37,211,102,0.4);
}
.hcm-dot {
  width:6px; height:6px;
  background:#ffffff !important;
  border-radius:50%;
  animation:blink 1.5s ease-in-out infinite;
  flex-shrink:0;
}
.hcm-status-text {
  color:#ffffff !important;
  font-size:.85rem;
  font-weight:700 !important;
  font-family:'IBM Plex Sans Arabic',sans-serif !important;
}
.hcm-title {
  color:#0E0C31 !important;
  font-size:1.05rem;
  font-weight:800 !important;
  font-family:'IBM Plex Sans Arabic',sans-serif !important;
  border-right:none;
  padding-right:0;
}

/* ==============================================
   MARQUEE
   ============================================== */
.mq-strip {
  background:rgba(229,193,88,.05);
  border-top:1px solid rgba(229,193,88,.12);
  border-bottom:1px solid rgba(229,193,88,.12);
  padding:13px 0; overflow:hidden;
}
.mq-inner { display:flex; white-space:nowrap; animation:mq-run 26s linear infinite }
.mq-it { flex-shrink:0; padding:0 22px; font-size:.87rem; font-weight:600; color:rgba(229,193,88,.6); letter-spacing:.4px }
@keyframes mq-run { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ==============================================
   ABOUT
   ============================================== */
#about { background:var(--main-bg); padding:96px 6% }
.about-g {
  display:grid; grid-template-columns:1fr 1fr;
  gap:72px; align-items:center; max-width:1180px; margin:0 auto;
}
.about-img-wrap { position:relative }
.about-img-wrap::after {
  content:''; position:absolute; bottom:-28px; right:-28px;
  width:76%; height:76%; background:var(--primary-bg); border-radius:24px; z-index:0;
}
.about-photo {
  width:100%; border-radius:28px; position:relative; z-index:1;
  object-fit:cover; aspect-ratio:3/4;
  box-shadow:0 40px 100px rgba(14,12,49,.32),0 0 0 1px rgba(229,193,88,.1);
}
.about-pill {
  position:absolute; bottom:28px; left:-18px; z-index:2;
  background:var(--primary-bg); border:1px solid var(--accent-gold);
  border-radius:14px; padding:13px 17px;
  box-shadow:0 8px 32px rgba(229,193,88,.22);
}
.about-pill-n { font-size:1.6rem; font-weight:800; color:var(--accent-gold); line-height:1 }
.about-pill-t { font-size:.7rem; color:rgba(255,255,255,.46); margin-top:2px }
.about-c .s-title { color:var(--text-dark) }
.about-c p { color:#475569; line-height:1.9; font-size:.97rem; margin-bottom:18px }
.chips { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px }
.chip {
  background:rgba(14,12,49,.05); border:1px solid rgba(14,12,49,.09);
  color:var(--text-dark); font-size:.79rem; font-weight:600;
  padding:6px 15px; border-radius:50px;
}

/* ==============================================
   SEGMENTED CONTROL — iOS-style premium toggle
   ============================================== */
.seg-wrap {
  display:flex; justify-content:center;
  margin-bottom:52px;
}
.seg-ctrl {
  position:relative;
  display:inline-flex;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(229,193,88,0.18);
  border-radius:50px;
  padding:5px;
  gap:4px;
}
/* Dark-bg sections (testi) */
#testi .seg-ctrl {
  background:rgba(255,255,255,0.06);
  border-color:rgba(229,193,88,0.18);
}
/* Light-bg sections (champs, pricing) */
#champs .seg-ctrl {
  background:rgba(14,12,49,0.07);
  border-color:rgba(14,12,49,0.14);
}
#champs .seg-btn { color:rgba(14,12,49,0.45) }
#champs .seg-btn.active { color:var(--primary-bg) }
/* Light-bg sections */
#pricing .seg-ctrl {
  background:rgba(14,12,49,0.07);
  border-color:rgba(14,12,49,0.14);
}
#testi .seg-btn { color:rgba(255,255,255,0.5) }
#testi .seg-btn.active { color:#fff }
.seg-btn {
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 24px; border-radius:50px; border:none;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:.85rem; font-weight:600; cursor:none;
  color:rgba(255,255,255,0.5);
  background:transparent;
  transition:color .35s;
  white-space:nowrap;
}
#pricing .seg-btn { color:rgba(14,12,49,0.45) }
.seg-btn.active { color:#fff }
#pricing .seg-btn.active { color:var(--primary-bg) }
.seg-btn svg { opacity:.7; transition:opacity .3s }
.seg-btn.active svg { opacity:1 }
.seg-indicator {
  position:absolute; top:5px; bottom:5px;
  border-radius:50px;
  background:var(--accent-gold);
  box-shadow:0 4px 20px rgba(229,193,88,0.35);
  transition:transform .4s cubic-bezier(0.16,1,0.3,1), width .4s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none; z-index:0;
}

/* ==============================================
   PRICING — NEW CARD SYSTEM
   ============================================== */
#pricing .pricing-g {
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.pc-price-num {
  font-size:1.9rem; font-weight:800; color:var(--text-dark); line-height:1;
}
.pc.ft .pc-price-num { color:#fff }
.pc-price-special {
  font-size:1.4rem; font-weight:800;
  color:var(--accent-gold); line-height:1;
  letter-spacing:-.3px;
}
.pc-price-curr {
  font-size:.75rem; color:var(--text-muted); margin-top:3px;
}
.pc.ft .pc-price-curr { color:rgba(255,255,255,.45) }

/* Special "Goal Achievement" card — premium gold gradient border */
.pc.pc-special {
  background: linear-gradient(145deg, var(--primary-bg), #16133e);
  border: 1.5px solid var(--accent-gold);
  box-shadow: 0 8px 40px rgba(229,193,88,.18), 0 0 0 1px rgba(229,193,88,.08);
}
.pc.pc-special .pc-name   { color: var(--accent-gold) }
.pc.pc-special .pc-price-curr { color: rgba(229,193,88,.65) }
.pc.pc-special .pc-f      { color: rgba(255,255,255,.72) }
.pc.pc-special hr         { border-color: rgba(229,193,88,.14) }
.pc.pc-special::before    { background: var(--accent-gold) }
.pc-hot-special {
  background: linear-gradient(135deg, var(--accent-gold), #c8a84b) !important;
  color: var(--primary-bg) !important;
}
.pc-details-btn {
  width:100%; background:transparent;
  border:1.5px solid rgba(14,12,49,0.14);
  border-radius:11px; padding:11px;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:.82rem; font-weight:600;
  color:var(--text-dark); cursor:none;
  margin-top:14px; transition:var(--trans);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.pc-details-btn:hover { border-color:var(--accent-gold); color:var(--primary-bg); background:var(--gold-dim) }
.pc.ft .pc-details-btn { border-color:rgba(229,193,88,.35); color:var(--accent-gold) }
.pc.ft .pc-details-btn:hover { background:rgba(229,193,88,.15); border-color:var(--accent-gold) }
.pc-details-btn-special {
  border-color: rgba(229,193,88,.4) !important;
  color: var(--accent-gold) !important;
}
.pc-details-btn-special:hover {
  background: rgba(229,193,88,.12) !important;
}

/* Champs swiper fade on tab switch */
.swiper-champs {
  transition: opacity 0.32s ease;
}
.champs-fade-out {
  opacity: 0 !important;
}

/* Deck stage fade on tab switch */
.deck-stage, #deck-list {
  transition: opacity 0.28s ease;
}

/* Global mobile overflow prevention */
body, html {
  max-width: 100vw;
  overflow-x: hidden;
}
.swiper-champs, .deck-outer, #pkg-modal, .pkg-sheet {
  max-width: 100vw;
}

/* ==============================================
   PACKAGE DETAIL BOTTOM-SHEET MODAL
   ============================================== */
#pkg-modal {
  position:fixed; inset:0; z-index:10000;
  background:rgba(7,6,23,0.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .4s;
  padding:0;
}
#pkg-modal.on { opacity:1; pointer-events:all }
/* FIXED MODAL HEIGHT & SCROLLING */
.pkg-sheet {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(229,193,88,.2);
  border-bottom: none;
  border-radius: 32px 32px 0 0;
  width: 100%; 
  max-width: 560px;
  max-height: 90vh; /* Prevents escaping the screen */
  display: flex;
  flex-direction: column;
  padding: 24px 24px 30px;
  position: relative;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 -20px 80px rgba(0,0,0,.5);
}
#pkg-modal.on .pkg-sheet { transform: translateY(0) }

.pkg-sheet-handle {
  width: 40px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.2);
  margin: 0 auto 20px;
  flex-shrink: 0;
}
.pkg-sheet-x {
  position: absolute; top: 18px; left: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(14,12,49,0.9); border: none;   /* Solid bg so scrollbar can't bleed through */
  color: rgba(255,255,255,.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--trans);
  z-index: 50;                                      /* Floats solidly above the scrollbar */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);           /* Extra visual lift */
}
.pkg-sheet-x:hover { background: rgba(255,255,255,.14); color: #fff; }

.pkg-sheet-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  flex: 1;
  margin-top: 15px;                                /* Clears the close button area */
  /* Fix 4: iOS rubber-band containment */
  overscroll-behavior: contain;                    /* Modern browsers: stops scroll chaining */
  -webkit-overflow-scrolling: touch;               /* iOS Safari: smooth inertia scroll */
}
/* Custom Scrollbar for Modal */
.pkg-sheet-body::-webkit-scrollbar { width: 4px; }
.pkg-sheet-body::-webkit-scrollbar-track { background: transparent; }
.pkg-sheet-body::-webkit-scrollbar-thumb { background: rgba(229,193,88,0.4); border-radius: 4px; }
.pkg-sheet-tag {
  display:inline-block; background:var(--gold-dim);
  border:1px solid rgba(229,193,88,.26); color:var(--accent-gold);
  font-size:.7rem; font-weight:700; padding:4px 13px;
  border-radius:50px; letter-spacing:1.5px; margin-bottom:12px;
}
.pkg-sheet-title {
  font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:6px;
}
.pkg-sheet-price {
  font-size:2.4rem; font-weight:800; color:var(--accent-gold);
  line-height:1; margin-bottom:24px;
}
.pkg-sheet-price span { font-size:1rem; color:rgba(229,193,88,.7); font-weight:500 }
.pkg-sheet-feats {
  list-style:none; margin-bottom:28px;
  display:flex; flex-direction:column; gap:11px;
}
.pkg-sheet-feats li {
  display:flex; align-items:flex-start; gap:10px;
  font-size:.9rem; color:rgba(255,255,255,.75); line-height:1.55;
}
.pkg-sheet-feats li svg {
  flex-shrink:0; margin-top:2px;
  stroke:var(--cta-green); stroke-width:2.5; fill:none;
  width:15px; height:15px;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ── Lead-gen form inside pkg modal ── */
.pkg-divider {
  border:none; border-top:1px solid rgba(229,193,88,.15);
  margin:22px 0 18px;
}
.pkg-form-label-header {
  display:flex; align-items:center; gap:8px;
  font-size:.79rem; font-weight:700;
  color:rgba(255,255,255,.52);
  font-family:'IBM Plex Sans Arabic',sans-serif;
  margin-bottom:16px;
}
.pkg-form { display:flex; flex-direction:column; gap:12px }
.pkg-field { display:flex; flex-direction:column; gap:5px }
.pkg-label {
  font-size:.75rem; font-weight:600;
  color:rgba(255,255,255,.45);
  font-family:'IBM Plex Sans Arabic',sans-serif;
}
.pkg-input {
  width:100%; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px; padding:12px 14px;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:.9rem; color:#fff; outline:none; direction:rtl;
  transition:border-color .28s, box-shadow .28s;
  -webkit-appearance:none; appearance:none;
}
.pkg-input:focus {
  border-color:rgba(229,193,88,.5);
  box-shadow:0 0 0 3px rgba(229,193,88,.09);
}
.pkg-input::placeholder { color:rgba(255,255,255,.2) }
.pkg-select { cursor:none }
.pkg-select option { background:#0e0c31; color:#fff }
.pkg-submit-btn {
  width:100%; justify-content:center; cursor:none !important;
  margin-top:4px;
}
.pkg-form-error {
  font-size:.79rem; color:#f87171; text-align:center;
  font-family:'IBM Plex Sans Arabic',sans-serif;
  margin-top:-4px;
}

/* ==============================================
   FREE RESOURCES SECTION
   ============================================== */
#free-products {
  background:var(--primary-bg);
  padding:96px 6%;
  position:relative; overflow:hidden;
}
#free-products::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 60%, rgba(229,193,88,.06) 0%, transparent 70%);
}
#free-products .s-head { margin-bottom:52px; }
#free-products .s-title { color:#fff; }
#free-products .s-sub { color:rgba(255,255,255,.55); }

/* 4-column grid, wraps to 2 on tablet, 1 on mobile */
.free-grid {
  max-width:1100px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.free-card {
  background:#F8FAFC;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:1px solid rgba(229,193,88,.35);
  border-radius:20px; padding:28px 22px 22px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  transition:var(--trans);
  box-shadow:0 6px 28px rgba(0,0,0,.18);
  text-decoration:none; color:inherit;
  cursor:pointer;
}
.free-card:hover {
  transform:translateY(-6px);
  border-color:var(--accent-gold);
  box-shadow:0 14px 48px rgba(229,193,88,.25);
}
.free-icon {
  width:48px; height:48px; border-radius:14px;
  background:rgba(229,193,88,.18);
  border:1px solid rgba(229,193,88,.4);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.free-icon svg { width:22px; height:22px; stroke:var(--accent-gold); }
.free-label {
  font-size:.9rem; font-weight:700; color:var(--text-dark); line-height:1.45; flex:1;
}
.free-dl {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; font-weight:700;
  color:var(--primary-bg);
  background:var(--accent-gold);
  border:1px solid var(--accent-gold);
  border-radius:50px; padding:5px 13px;
  transition:var(--trans);
}
.free-card:hover .free-dl {
  background:#d4ad40;
  border-color:#d4ad40;
}
.free-dl svg { stroke:var(--primary-bg); flex-shrink:0 }
.free-note {
  display:flex; align-items:center; gap:7px;
  max-width:1100px; margin:28px auto 0;
  font-size:.78rem; color:rgba(255,255,255,.32);
}
.free-note svg { stroke:rgba(229,193,88,.5); flex-shrink:0 }

/* Responsive */
@media (max-width:1050px) { .free-grid { grid-template-columns:repeat(3,1fr) } }
@media (max-width:720px)  { .free-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:440px)  { .free-grid { grid-template-columns:1fr } }

@media (max-width:900px) {
  #pricing .pricing-g { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:600px) {
  #pricing .pricing-g { grid-template-columns:1fr }
  .seg-btn { padding:9px 16px; font-size:.78rem }
  .pkg-sheet { padding:24px 22px 36px }
}

/* ==============================================
   FEATURES — Larger squarish cards
   ============================================== */
/* bg2 = muted card bg token */
:root { --bg2: rgba(255,255,255,0.05) }

#features {
  background:var(--primary-bg); padding:96px 0 110px;
  overflow:hidden; position:relative;
}
#features .s-head { padding:0 6% }
#features .s-title { color:#fff }
#features .s-sub { color:rgba(255,255,255,.44) }

#features .drag-zone, #testi .drag-zone { cursor:none }

/* Swiper container — needs overflow visible for 3D depth */
.cf-swiper {
  width:100%;
  padding:40px 0 72px !important;
  overflow:visible !important;
}
/* But clip horizontally only */
#features { overflow-x:hidden }

.cf-swiper .swiper-wrapper {
  /* Enable 3D */
  -webkit-perspective:1400px;
  perspective:1400px;
}

/* ---- DEFAULT (inactive) slide state ---- */
.cf-slide {
  width:340px !important;
  min-height:380px;
  background:var(--bg2);
  border:1px solid rgba(229,193,88,.1);
  border-radius:var(--radius-lg);
  padding:52px 36px;
  position:relative; overflow:hidden;
  /* Smooth transition for ALL properties */
  transition:
    filter    0.5s ease,
    opacity   0.5s ease,
    transform 0.5s ease,
    background 0.5s ease,
    box-shadow 0.5s ease !important;
  filter:blur(6px);
  opacity:0.5;
  transform-origin:center center;
}

/* Top-edge gold line — hidden by default */
.cf-slide::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-gold),transparent);
  opacity:0; transition:opacity 0.5s ease;
}

/* ---- PREV / NEXT slides — partial unblur ---- */
.cf-slide.swiper-slide-prev,
.cf-slide.swiper-slide-next {
  filter:blur(3px) !important;
  opacity:0.6 !important;
}

/* ---- ACTIVE slide — fully revealed, light bg for high contrast ---- */
.cf-slide.swiper-slide-active {
  filter:blur(0px) !important;
  opacity:1 !important;
  background:var(--main-bg) !important;
  transform:scale(1.05) !important;
  box-shadow:0 28px 80px rgba(229,193,88,.22), 0 0 0 1px rgba(229,193,88,.24) !important;
}
.cf-slide.swiper-slide-active::before { opacity:1 }

/* Text & icon color shifts when card goes light-bg */
.cf-slide.swiper-slide-active .cf-title { color:var(--text-dark) !important }
.cf-slide.swiper-slide-active .cf-text  { color:#475569 !important }
.cf-slide.swiper-slide-active .cf-num   { color:rgba(14,12,49,.06) !important }
.cf-slide.swiper-slide-active .cf-icon {
  background:rgba(14,12,49,.08) !important;
  box-shadow:0 0 28px rgba(229,193,88,.18);
}
/* Gold icon stroke stays gold on both dark and light bg */
.cf-icon svg { width:28px; height:28px; stroke:var(--accent-gold); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round }

/* Default (inactive) card internals */
.cf-icon {
  width:58px; height:58px;
  background:rgba(229,193,88,.1); border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  transition:background .4s, box-shadow .4s;
}
.cf-num {
  position:absolute; top:22px; left:26px;
  font-size:3.8rem; font-weight:800;
  color:rgba(229,193,88,.06); line-height:1; pointer-events:none;
  transition:color .5s ease;
}
.cf-title { font-size:1.08rem; font-weight:700; color:#fff; margin-bottom:9px; transition:color .5s ease }
.cf-text  { font-size:.82rem; color:rgba(255,255,255,.4); line-height:1.78; transition:color .5s ease }

/* Pagination */
.cf-pagination .swiper-pagination-bullet {
  background:var(--accent-gold)!important; opacity:.3!important;
  width:8px!important; height:8px!important;
}
.cf-pagination .swiper-pagination-bullet-active {
  opacity:1!important; box-shadow:0 0 8px var(--accent-gold);
  width:24px!important; border-radius:4px!important;
}

/* ==============================================
   CHAMPIONS CAROUSEL — 3D Grayscale Coverflow
   ============================================== */
#champs { background:var(--main-bg); padding:96px 6%; overflow:hidden }
.swiper-champs {
  width:100%;
  padding:30px 0 54px !important;
  overflow:visible !important;
}
#champs { overflow-x:hidden }

/* Champions slides — all visual transitions (filter, opacity, transform)
   are driven entirely by the JS progress engine below.
   No CSS class overrides here to avoid snap/conflict. */
.swiper-champs .swiper-slide {
  will-change: filter, opacity, transform;
}

.sslide { border-radius:var(--radius-lg); overflow:hidden; position:relative; aspect-ratio:4/5; width:300px !important }
.sslide-img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-sm) }
.sslide:hover .sslide-img { transform:scale(1.06) }
.sslide-ov {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent,rgba(14,12,49,.96));
  padding:36px 22px 22px;
}
.sslide-badge { display:inline-block; background:var(--accent-gold); color:var(--primary-bg); font-size:.67rem; font-weight:800; padding:3px 11px; border-radius:50px; margin-bottom:7px }
.sslide-name { font-size:.93rem; font-weight:700; color:#fff; line-height:1.35 }

/* Before / After double card */
.sslide--ba .sslide-ba-wrap {
  display:flex; width:100%; height:100%; gap:3px;
}
.sslide-ba-half {
  flex:1; position:relative; overflow:hidden;
}
.sslide-ba-half .sslide-img {
  width:100%; height:100%; object-fit:cover;
}
.sslide--ba:hover .sslide-img { transform:scale(1.06); }
.sslide-ba-label {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background:rgba(14,12,49,.75); color:rgba(255,255,255,.85);
  font-size:.65rem; font-weight:800; letter-spacing:1.5px;
  padding:3px 12px; border-radius:50px;
  text-transform:uppercase;
}
.sslide-ba-label--after {
  background:var(--accent-gold); color:var(--primary-bg);
}

.swiper-pagination-bullet { background:var(--accent-gold)!important; opacity:.35!important }
.swiper-pagination-bullet-active { opacity:1!important; box-shadow:0 0 7px var(--accent-gold) }

/* ==============================================
   TESTIMONIALS — CASCADING 3D CARD DECK
   ============================================== */
#testi { background:var(--primary-bg); padding:96px 6% 110px; position:relative; overflow:hidden }
#testi .s-title { color:#fff }
#testi .s-sub { color:rgba(255,255,255,.44) }

.deck-outer {
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:start;
}

/* Left: the stacked deck itself */
.deck-stage {
  position:relative; height:480px;
  display:flex; align-items:center; justify-content:center;
}
.deck-card {
  position:absolute; width:340px; max-width:90%;
  background:#fff; border-radius:var(--radius-lg);
  padding:28px 26px;
  box-shadow:0 4px 40px rgba(14,12,49,.25);
  cursor:none;
  transition:transform .7s var(--ease-out),
             filter .7s var(--ease-out),
             opacity .7s var(--ease-out),
             z-index 0s;
  will-change:transform,filter;
  user-select:none;
}
/* Stacked positioning — index 0 = front */
.deck-card[data-idx="0"] {
  transform:translateY(0) translateX(0) rotate(0deg);
  z-index:5; filter:blur(0); opacity:1;
}
.deck-card[data-idx="1"] {
  transform:translateY(10px) translateX(-14px) rotate(-2.5deg);
  z-index:4; filter:blur(1.5px); opacity:.88;
}
.deck-card[data-idx="2"] {
  transform:translateY(20px) translateX(-28px) rotate(-5deg);
  z-index:3; filter:blur(3px); opacity:.7;
}
.deck-card[data-idx="3"] {
  transform:translateY(30px) translateX(-42px) rotate(-7deg);
  z-index:2; filter:blur(5px); opacity:.5;
}
.deck-card[data-idx="4"] {
  transform:translateY(38px) translateX(-54px) rotate(-9deg);
  z-index:1; filter:blur(7px); opacity:.32;
}
/* Any card beyond 4 — hidden */
.deck-card[data-idx="5"],
.deck-card[data-idx="6"],
.deck-card[data-idx="7"] {
  transform:translateY(46px) translateX(-66px) rotate(-11deg);
  z-index:0; filter:blur(9px); opacity:.18;
}

/* Hover lift on front card */
.deck-card[data-idx="0"]:hover {
  transform:translateY(-8px) rotate(0deg);
  box-shadow:0 28px 70px rgba(14,12,49,.35), var(--shadow-gold);
}

/* Card internals */
.tc-badge {
  display:inline-block; background:rgba(14,12,49,.07);
  border:1px solid rgba(14,12,49,.11); color:var(--text-dark);
  font-size:.67rem; font-weight:700; padding:3px 11px;
  border-radius:50px; margin-bottom:11px; letter-spacing:.3px;
}
.tc-stars { display:flex; gap:3px; margin-bottom:11px; direction:ltr }
.tc-stars i { color:var(--accent-gold); font-size:.78rem }
.tc-q { font-size:.88rem; color:#334155; line-height:1.82; margin-bottom:13px }
.tc-au {
  font-size:.77rem; font-weight:700; color:#94a3b8;
  border-top:1px solid #f1f5f9; padding-top:11px;
}
/* Gold card */
.deck-card.gold-card {
  background:var(--accent-gold);
  box-shadow:0 8px 40px rgba(229,193,88,.48);
}
.deck-card.gold-card .tc-badge { background:rgba(14,12,49,.14); border-color:rgba(14,12,49,.18); color:var(--primary-bg) }
.deck-card.gold-card .tc-stars i { color:var(--primary-bg) }
.deck-card.gold-card .tc-q { color:var(--primary-bg) }
.deck-card.gold-card .tc-au { color:rgba(14,12,49,.52); border-color:rgba(14,12,49,.14) }
.gold-ribbon {
  position:absolute; top:0; right:0;
  background:var(--primary-bg); color:var(--accent-gold);
  font-size:.6rem; font-weight:800; letter-spacing:.4px;
  padding:4px 12px; border-radius:0 var(--radius-md) 0 11px;
}

/* Deck controls */
.deck-controls {
  display:flex; flex-direction:column; gap:14px; padding-top:16px;
}
.deck-label {
  font-size:.75rem; color:rgba(255,255,255,.4); letter-spacing:1px; text-transform:uppercase;
  margin-bottom:6px; display:flex; align-items:center; gap:8px;
}
.deck-label::before { content:''; display:block; width:20px; height:1px; background:rgba(229,193,88,.4) }
.deck-hint {
  display:flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.35); font-size:.78rem; margin-top:8px;
}
.deck-hint svg { width:16px; height:16px; stroke:rgba(229,193,88,.5); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round }

/* Right: scrollable list of all testimonials */
.deck-list {
  display:flex; flex-direction:column; gap:12px;
  max-height:480px; overflow-y:auto; padding-right:8px;
  scrollbar-width:thin; scrollbar-color:rgba(229,193,88,.3) transparent;
}
.deck-list::-webkit-scrollbar { width:4px }
.deck-list::-webkit-scrollbar-track { background:transparent }
.deck-list::-webkit-scrollbar-thumb { background:rgba(229,193,88,.3); border-radius:4px }

.deck-list-item {
  background:rgba(255,255,255,.04); border:1px solid rgba(229,193,88,.1);
  border-radius:var(--radius-md); padding:18px 20px;
  cursor:none; transition:var(--trans);
  display:flex; align-items:flex-start; gap:12px;
}
.deck-list-item:hover { background:rgba(255,255,255,.08); border-color:rgba(229,193,88,.25); transform:translateX(-4px) }
.deck-list-item.active { background:rgba(229,193,88,.1); border-color:rgba(229,193,88,.35) }
.dli-num {
  width:28px; height:28px; background:rgba(229,193,88,.1); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; color:var(--accent-gold); flex-shrink:0; margin-top:2px;
}
.deck-list-item.active .dli-num { background:var(--accent-gold); color:var(--primary-bg) }
.dli-body {}
.dli-badge { font-size:.68rem; font-weight:700; color:rgba(229,193,88,.7); margin-bottom:4px }
.dli-text { font-size:.83rem; color:rgba(255,255,255,.65); line-height:1.6 }
.dli-author { font-size:.75rem; color:rgba(255,255,255,.35); margin-top:5px }

/* ==============================================
   PRICING
   ============================================== */
#pricing { background:var(--main-bg); padding:96px 6% }
.pricing-g {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; max-width:1180px; margin:0 auto; align-items:end;
}
.pc {
  background:#fff; border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:38px 26px;
  transition:var(--trans); position:relative; overflow:hidden;
}
.pc::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--card-border); transition:background .4s }
.pc:hover { transform:translateY(-8px); box-shadow:var(--shadow-card) }
.pc.ft {
  transform:scale(1.06); background:var(--primary-bg);
  border:2px solid var(--accent-gold);
  box-shadow:var(--shadow-gold),0 0 44px rgba(229,193,88,.16);
}
.pc.ft::before { background:var(--accent-gold) }
.pc.ft:hover { transform:scale(1.06) translateY(-6px); box-shadow:0 30px 80px rgba(229,193,88,.32) }
.pc-hot {
  display:none; background:var(--accent-gold); color:var(--primary-bg);
  font-size:.67rem; font-weight:800; padding:4px 13px; letter-spacing:.4px;
  border-radius:0 0 11px 11px;
  position:absolute; top:0; left:50%; transform:translateX(-50%); white-space:nowrap;
}
.pc.ft .pc-hot { display:block }
.pc.pc-special .pc-hot { display:block; }
.pc-ico { margin-bottom:14px; display:flex }
.pc-ico svg { width:28px; height:28px; stroke:var(--accent-gold); stroke-width:1.65; fill:none; stroke-linecap:round; stroke-linejoin:round }
.pc-name { font-size:.98rem; font-weight:700; color:var(--text-dark); margin-bottom:6px }
.pc.ft .pc-name { color:var(--accent-gold) }
.pc-price { font-size:2.1rem; font-weight:800; color:var(--text-dark); line-height:1; margin-bottom:3px }
.pc.ft .pc-price { color:#fff }
.pc-sub { font-size:.75rem; color:#94a3b8; margin-bottom:20px }
.pc.ft .pc-sub { color:rgba(255,255,255,.42) }
.pc hr { border:none; border-top:1px solid #f1f5f9; margin:18px 0 }
.pc.ft hr { border-color:rgba(255,255,255,.08) }
.pc-feats { list-style:none; margin-bottom:26px }
.pc-f { display:flex; align-items:flex-start; gap:9px; font-size:.83rem; color:#475569; padding:7px 0; line-height:1.5 }
.pc-f svg { width:14px; height:14px; stroke:var(--cta-green); stroke-width:2.5; fill:none; flex-shrink:0; margin-top:1px }
.pc.ft .pc-f { color:rgba(255,255,255,.65) }

/* ==============================================
   FAQ
   ============================================== */
#faq { background:var(--primary-bg); padding:96px 6% }
#faq .s-title { color:#fff }
#faq .s-sub { color:rgba(255,255,255,.44) }
.faq-list { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:10px }
.fi { background:rgba(255,255,255,.04); border:1px solid rgba(229,193,88,.1); border-radius:var(--radius-md); overflow:hidden; transition:border-color .3s }
.fi.on { border-color:rgba(229,193,88,.38) }
.fq {
  width:100%; background:none; border:none; padding:20px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  cursor:none; text-align:right; font-size:.93rem;
  color:#fff; transition:color .3s;
  font-family:'IBM Plex Sans Arabic',sans-serif !important;
  font-weight:700 !important;
}
.fi.on .fq { color:var(--accent-gold) }
.fc {
  flex-shrink:0; width:24px; height:24px;
  background:rgba(229,193,88,.1); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:transform .45s var(--ease-out),background .3s;
}
.fc svg { width:10px; height:10px; stroke:var(--accent-gold); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s }
.fi.on .fc { transform:rotate(180deg); background:var(--accent-gold) }
.fi.on .fc svg { stroke:var(--primary-bg) }
.fa { max-height:0; overflow:hidden; transition:max-height .5s var(--ease-out) }
.fa-in { padding:0 26px 20px; font-size:.87rem; color:rgba(255,255,255,.55); line-height:1.9; font-family:'IBM Plex Sans Arabic',sans-serif !important; font-weight:400 !important; }

/* ==============================================
   FOOTER
   ============================================== */
#footer { background:#07061A; padding:56px 6% 28px; border-top:1px solid rgba(229,193,88,.1) }
.foot-in { max-width:1180px; margin:0 auto }
.foot-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.06); flex-wrap:wrap; gap:22px }
.foot-logo { font-size:1.3rem; font-weight:800; color:var(--accent-gold) }
.foot-logo em { color:rgba(255,255,255,.4); font-style:normal; font-weight:400 }
.foot-soc { display:flex; gap:12px; align-items:center }
.soc-a { width:42px; height:42px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:11px; display:flex; align-items:center; justify-content:center; transition:var(--trans) }
.soc-a:hover { background:rgba(229,193,88,.1); border-color:rgba(229,193,88,.28); transform:translateY(-3px) }
.foot-email {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; font-weight:600;
  color:rgba(255,255,255,.45);
  margin-top:12px;
  transition:var(--trans);
  text-decoration:none;
}
.foot-email svg { stroke:rgba(229,193,88,.6); flex-shrink:0 }
.foot-email:hover { color:var(--accent-gold); }
.foot-bot { display:flex; justify-content:space-between; align-items:center; padding-top:26px; flex-wrap:wrap; gap:14px }
.foot-copy { font-size:.79rem; color:rgba(255,255,255,.28) }
.foot-pay { display:flex; align-items:center; gap:14px }

/* ==============================================
   FLOATING WHATSAPP
   ============================================== */
#fwa {
  position:fixed; bottom:26px; left:26px;
  width:54px; height:54px; background:var(--cta-green);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:none; cursor:none; z-index:980;
  box-shadow:0 4px 20px rgba(37,211,102,.44);
  transition:var(--trans); animation:wa-ring 2.8s ease-in-out infinite;
}
#fwa:hover { transform:scale(1.13) }
@keyframes wa-ring {
  0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.44),0 0 0 0 rgba(37,211,102,.28)}
  50%{box-shadow:0 4px 20px rgba(37,211,102,.44),0 0 0 11px rgba(37,211,102,0)}
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width:1100px) {
  .pricing-g { grid-template-columns:repeat(3,1fr) }
  .pc.ft { transform:scale(1) }
  .deck-outer { grid-template-columns:1fr; gap:40px }
  .deck-stage { height:360px }
  .deck-card { width:300px }
}
@media (max-width:900px) {
  #pricing .pricing-g { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:900px) {
  #hero { height: auto; min-height: 100vh; padding-top: 70px; display: flex; align-items: stretch; }
  .hero-scene { display: flex; flex-direction: column; width: 100%; }
  /* Image First */
  .hero-visual { order: 1; height: 50vh; min-height: 400px; width: 100%; position: relative; margin-bottom: 20px; }
  .hero-img-wrap { position: absolute; bottom: 0; left: 0; right: 0; top: 0; align-items: flex-end; justify-content: center; }
  /* Text Second */
  .hero-text { order: 2; padding: 20px 5% 60px; text-align: center; }
  .hero-eyebrow { justify-content: center; }
  .hero-text p { margin: 0 auto 34px auto; }
  .hero-cutoff-mask { bottom: -6px; width: 92%; padding: 12px 20px; }
  .about-g { grid-template-columns:1fr; gap:50px }
  .about-img-wrap { max-width:370px; margin:0 auto }
}
@media (max-width:768px) {
  section { padding:68px 5% }
  #features { padding:68px 0 90px }
  #features .s-head { padding:0 5% }
  #testi { padding:68px 5% 90px }
  .nav { display:none }
  .hbg { display:flex }
  .pricing-g { grid-template-columns:1fr 1fr; gap:14px }
  .pc.ft { transform:scale(1) }
  .foot-top { flex-direction:column; align-items:flex-start }
  #fwa { bottom:18px; left:18px }
  .hero-float-stats { grid-template-columns:1fr 1fr }
  .deck-list { max-height:300px }
}
@media (max-width:520px) {
  .pricing-g { grid-template-columns:1fr }
  .hero-float-stats { grid-template-columns:1fr 1fr }
  .cf-slide { width:280px !important }
  .hero-visual { height: 72vw }
  .hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
  }
}
/* FORCE HIDE CUSTOM CURSOR ON ALL MOBILE/TABLET SCREENS */
@media (max-width: 992px) {
  .c-dot, .c-ring, .c-drag-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  *, .drag-zone {
    cursor: auto !important;
  }
  a, button, .btn, .fq, .seg-btn, .pc-details-btn, .fp-btn, .soc-a {
    cursor: pointer !important;
  }
}