/* ============================================
   Flux — Video Editing Agency
   Layout matched to reference; colors: dark blue / blue
   ============================================ */

:root {
  --bg:      #050B1A;
  --bg2:     #071026;
  --bg3:     #0C1730;
  --primary: #FFFFFF;
  --secondary: #2563EB;
  --accent:  #2563EB;
  --card:    rgba(255,255,255,0.04);
  --indigo:  #2563EB;
  --indigo2: #1D4ED8;
  --ilight:  #60A5FA;
  --idim:    rgba(37,99,235,0.10);
  --iglow:   rgba(37,99,235,0.22);
  --iborder: rgba(37,99,235,0.20);
  --gold:    #2563EB;
  --gold2:   #1D4ED8;
  --gdim:    rgba(37,99,235,0.10);
  --gglow:   rgba(37,99,235,0.28);
  --gborder: rgba(37,99,235,0.22);
  --text:    #FFFFFF;
  --text2:   rgba(255,255,255,0.75);
  --text3:   rgba(255,255,255,0.5);
  --w:       #FFFFFF;
  --w2:      rgba(255,255,255,0.75);
  --w3:      rgba(255,255,255,0.45);
  --border:  rgba(255,255,255,0.08);
  --white:   #FFFFFF;
  --ar:      'Cairo', sans-serif;
  --en:      'Plus Jakarta Sans', sans-serif;
  --body:    'Inter', sans-serif;
  --rsm: 10px; --rmd: 16px; --rlg: 22px; --rxl: 28px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t: all .28s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--ar);
  background: var(--bg);
  color: var(--w);
  direction: rtl;
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content:'';
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
  opacity:0.022;
}
a { text-decoration:none; color:inherit; }
.en { font-family:var(--en); display:inline; }
.container { max-width:1140px; margin:0 auto; padding:0 24px; }
section { padding:88px 0; }

/* REVEAL */
.rv  { opacity:0; transform:translateY(32px);  transition:opacity .6s var(--ease),transform .6s var(--ease); }
.rvl { opacity:0; transform:translateX(40px);  transition:opacity .6s var(--ease),transform .6s var(--ease); }
.rvr { opacity:0; transform:translateX(-40px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.rv.in,.rvl.in,.rvr.in { opacity:1; transform:none; }
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:15px 30px; border-radius:50px;
  font-family:var(--ar); font-size:15px; font-weight:700;
  cursor:pointer; border:none; outline:none;
  transition:var(--t); white-space:nowrap;
}
.btn-gold { background:var(--gold); color:#fff; box-shadow:0 4px 24px var(--gglow); }
.btn-gold:hover { background:var(--gold2); transform:translateY(-3px); box-shadow:0 12px 36px rgba(37,99,235,.4); }
.btn-ghost { background:transparent; color:var(--w2); border:1px solid var(--border); }
.btn-ghost:hover { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); transform:translateY(-2px); }
.btn-xl { padding:17px 42px; font-size:16px; }

/* CHIP / BADGE */
.chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:50px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  background:var(--idim); color:var(--indigo);
  border:1px solid var(--iborder);
}
.chip .dot { width:6px; height:6px; border-radius:50%; background:var(--indigo); animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.3;transform:scale(1.9);} }

.sec-lbl {
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:700; color:var(--w3);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px;
}
.sec-lbl::before { content:''; width:22px; height:1.5px; background:var(--indigo); }

.sec-head { text-align:center; margin-bottom:52px; }
.sec-title { font-family:var(--en); font-size:clamp(26px,4vw,44px); font-weight:800; color:var(--w); line-height:1.1; letter-spacing:-.02em; }
.sec-title .i { color:var(--ilight); }
.sec-title .g { color:var(--ilight); }

/* ── TICKER ── */
.ticker {
  background:var(--gold); padding:9px 0;
  overflow:hidden; white-space:nowrap; direction:ltr;
}
.ticker-wrap { display:inline-flex; animation:tick 45s linear infinite; }
.ticker-item {
  display:inline-flex; align-items:center; gap:8px;
  padding:0 26px; font-family:var(--en); font-size:11px; font-weight:700;
  color:rgba(255,255,255,.92); letter-spacing:.05em; direction:rtl;
}
.ticker-item::before { content:'★'; font-size:9px; color:rgba(255,255,255,.5); }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-75%)} }

/* ── HERO ── */
#hero { padding:80px 0 60px; position:relative; overflow:hidden; }
.hero-glow-1 {
  position:absolute; top:-200px; right:-100px; width:700px; height:700px;
  background:radial-gradient(circle,rgba(37,99,235,.07) 0%,transparent 60%);
  pointer-events:none;
}
.hero-glow-2 {
  position:absolute; bottom:-100px; left:0; width:500px; height:500px;
  background:radial-gradient(circle,rgba(37,99,235,.04) 0%,transparent 60%);
  pointer-events:none;
}
.hero-center { text-align:center; max-width:800px; margin:0 auto; }
.hero-chip {
  margin-bottom:24px;
  background:rgba(37,99,235,0.15); border:1px solid rgba(37,99,235,0.3); color:var(--ilight);
}
.hero-chip .dot { background:var(--ilight); }
.hero-title {
  font-family:var(--en); font-size:clamp(26px, 6vw, 56px); font-weight:800;
  text-align:center; line-height:1.3; margin-bottom:16px; color:#fff;
  max-width:800px; margin-left:auto; margin-right:auto; letter-spacing:-0.01em;
}
.hero-title .g { color:var(--ilight); }
.hero-sub {
  color:rgba(255,255,255,0.85); font-size:clamp(16px, 3.5vw, 20px);
  margin-bottom:32px; max-width:580px; margin-left:auto; margin-right:auto;
  line-height:1.6; font-weight:500;
}
.vsl-hero { margin-bottom:36px; }
.vsl-frame {
  max-width:640px; margin:0 auto; aspect-ratio:16/9; background:var(--bg3);
  border-radius:var(--rxl); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; cursor:pointer;
  box-shadow:0 0 40px rgba(37,99,235,.12),0 0 0 1px rgba(37,99,235,.08);
}
.vsl-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:linear-gradient(155deg,#0A1430 0%,#050B1A 100%); }
.vsl-bg { position:absolute; inset:0; background:linear-gradient(135deg,rgba(37,99,235,.06) 0%,transparent 55%,rgba(37,99,235,.03) 100%); }
.vsl-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(37,99,235,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.03) 1px,transparent 1px);
  background-size:48px 48px;
}
.vsl-center { position:relative; z-index:1; text-align:center; }
.vsl-play {
  width:72px; height:72px; border-radius:50%; background:var(--indigo);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
  box-shadow:0 0 0 14px rgba(37,99,235,.12),0 0 0 28px rgba(37,99,235,.05);
  animation:playPulse 2.8s ease-in-out infinite;
}
.vsl-play svg { width:28px; height:28px; fill:#fff; margin-right:-3px; }
@keyframes playPulse {
  0%,100%{box-shadow:0 0 0 14px rgba(37,99,235,.12);}
  50%{box-shadow:0 0 0 26px rgba(37,99,235,.04);}
}
.hero-ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ── PROBLEM ── */
#problem { background:var(--bg); position:relative; overflow:hidden; }
.problem-list { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.problem-item {
  background:#0B1530; border:1px solid #1A2A4D; border-radius:16px;
  padding:28px 24px; min-height:110px; display:flex; align-items:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.problem-item h3 {
  color:#fff; font-size:clamp(15px,3vw,20px); font-weight:700;
  margin:0; line-height:1.4; width:100%;
}

/* ── HOW IT WORKS ── */
#how { background:linear-gradient(180deg,#081226 0%,#050B1A 100%); padding:100px 0; }
#how .sec-head { margin-bottom:60px; }
#how .sec-lbl { color:var(--ilight); }
#how .sec-title { font-size:clamp(28px,4vw,42px); }
#how .sec-sub {
  color:rgba(240,244,255,0.6); font-size:15px; max-width:500px;
  margin:0 auto 40px; text-align:center;
}
.steps-flex {
  display:flex; justify-content:center; align-items:stretch; gap:16px;
  max-width:1100px; margin:0 auto; flex-wrap:wrap;
}
.step-col { flex:1; min-width:240px; position:relative; }
.step-col.wide { min-width:280px; }
.step-hover {
  background:linear-gradient(145deg,rgba(37,99,235,0.12),rgba(37,99,235,0.02));
  border:1px solid rgba(37,99,235,0.25); border-radius:24px;
  padding:26px 24px; height:100%; position:relative; overflow:hidden;
  transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  will-change:transform;
}
.step-col.wide .step-hover { padding:32px 28px; }
.step-glow {
  position:absolute; top:-30px; right:-30px; width:120px; height:120px;
  background:radial-gradient(circle,rgba(37,99,235,0.15),transparent 70%);
}
.step-icon-soft {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:linear-gradient(135deg,#60A5FA,#1D4ED8);
  border-radius:16px; margin-bottom:20px;
  box-shadow:0 10px 28px rgba(96,165,250,0.28);
  transition:transform 0.28s ease, box-shadow 0.28s ease;
}
.step-icon-soft svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.step-badge-soft {
  display:inline-block; background:rgba(96,165,250,0.18); color:#60A5FA;
  font-size:11px; font-weight:700; padding:6px 12px; border-radius:20px;
  margin-bottom:14px; transition:transform 0.28s ease, opacity 0.28s ease;
}
.step-hover h3 { color:#fff; font-size:20px; font-weight:700; margin:0 0 12px 0; line-height:1.3; }
.step-shine::after {
  content:'';
  position:absolute;
  inset:-40% -20%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
  transform:translateX(-40%) rotate(8deg);
  opacity:0;
  pointer-events:none;
}
@keyframes stepShineHover {
  from { transform:translateX(-55%) rotate(8deg); }
  to { transform:translateX(55%) rotate(8deg); }
}
@keyframes iconPulseHover {
  from { transform:translateY(0) scale(1); }
  to { transform:translateY(-3px) scale(1.04); }
}
@keyframes badgeBreathHover {
  from { transform:translateY(0); }
  to { transform:translateY(-1px); }
}
.step-hover:hover { transform:translateY(-7px); box-shadow:0 18px 42px rgba(0,0,0,.22); }
.step-hover:hover::after { opacity:1; animation:stepShineHover .9s ease-out 1; }
.step-hover:hover .step-icon-soft { animation:iconPulseHover .28s ease-out 1; }
.step-hover:hover .step-badge-soft { animation:badgeBreathHover .28s ease-out 1; }
.how-cta { text-align:center; margin-top:50px; }
.how-cta .btn { padding:18px 48px; font-size:16px; }
.how-cta p { color:rgba(240,244,255,0.4); font-size:12px; margin-top:14px; }

/* ── VIDEO GRID ── */
#videos { padding:60px 0; }
#videos .sec-head { margin-bottom:40px; }
.video-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; max-width:1100px; margin:0 auto; padding:0 20px; }
.video-box {
  display:block; position:relative; border-radius:16px; overflow:hidden;
  cursor:pointer; transition:all 0.3s ease; aspect-ratio:9/16;
  border:1px solid var(--border); background:#0A1228;
}
.video-box:hover { transform:translateY(-5px); box-shadow:0 15px 40px rgba(0,0,0,0.4),0 0 20px rgba(37,99,235,0.1); }
.video-box:hover .video-overlay { opacity:1; }
.video-thumb {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  background:linear-gradient(160deg,#0E1B3D 0%,#081226 60%,#0A1430 100%);
}
.video-thumb::after {
  content:''; position:absolute; left:0; right:0; height:55%;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.05),transparent);
  animation:scanLine 3.2s ease-in-out infinite;
}
@keyframes scanLine { 0%{top:-60%;} 100%{top:160%;} }
.video-num {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  padding:18px 10px 9px; font-family:var(--en); font-size:10px; font-weight:700;
  color:rgba(255,255,255,.7);
}
.video-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease, transform .3s ease; background:rgba(0,0,0,0.4);
}
.video-overlay .glass-play {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.2); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
}
.video-overlay svg { width:16px; height:16px; fill:#fff; }

/* ── MODALS ── */
.vid-modal {
  display:none; position:fixed; inset:0; z-index:1000;
  background:linear-gradient(180deg,rgba(5,11,26,0.74),rgba(5,11,26,0.92));
  backdrop-filter:blur(12px); align-items:center; justify-content:center;
}
.vid-modal-close {
  position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px; z-index:2;
}
.vsl-modal-inner {
  position:relative; width:100%; height:100%; max-width:100vw; max-height:100vh;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
#vslVideo {
  width:100%; max-width:900px; aspect-ratio:16/9; max-height:calc(100vh - 80px);
  border-radius:20px; object-fit:contain;
  background:linear-gradient(180deg,rgba(8,16,38,0.92),rgba(5,11,26,0.82));
  box-shadow:0 28px 80px rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.08);
}
.video-modal-box {
  width:90%; max-width:400px; aspect-ratio:9/16; background:#000; border-radius:24px;
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.08);
}
#videoModalContent { width:100%; height:100%; }
@media(max-width:768px) {
  .vsl-modal-inner { padding:12px; }
  #vslVideo { max-width:calc(100vw - 24px); max-height:calc(100vh - 100px); border-radius:12px; }
}

/* ── TESTIMONIALS ── */
#testimonials { padding:88px 0; background:linear-gradient(180deg,var(--bg2) 0%,var(--bg) 100%); }
#testimonials .sec-head { margin-bottom:56px; }
#testimonials .sec-lbl { justify-content:center; }
#testimonials .sec-sub {
  color:var(--w3); font-size:15px; margin-top:10px; max-width:400px;
  margin-left:auto; margin-right:auto; line-height:1.75;
}
.testi-grid-2 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.testi-card {
  background:var(--card); border:1px solid var(--iborder); border-radius:28px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(37,99,235,.06),0 40px 80px rgba(0,0,0,.55);
}
.testi-head { padding:14px 18px; border-bottom:1px solid var(--border); }
.testi-head span { font-family:var(--en); font-size:15px; font-weight:800; color:var(--w); }
.testi-stage { background:#060D20; display:flex; justify-content:center; align-items:center; padding:20px 0; }
.testi-player {
  position:relative; width:100%; max-width:300px; aspect-ratio:9/16; border-radius:18px;
  overflow:hidden; cursor:pointer;
  box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(37,99,235,.12);
}
.testi-poster { position:absolute; inset:0; }
.testi-poster-img {
  width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
  background:linear-gradient(165deg,#0E1B3D 0%,#060D20 100%);
}
.testi-poster-fade {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 25%,transparent 55%,rgba(0,0,0,.65) 100%);
}
.testi-video { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.testi-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:space-between; pointer-events:none;
}
.testi-overlay .sp-t { height:14px; }
.testi-overlay .sp-b { height:20px; }
.testi-overlay-center { display:flex; flex-direction:column; align-items:center; gap:12px; }
.testi-play-btn {
  width:66px; height:66px; border-radius:50%; background:rgba(37,99,235,.95);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 16px rgba(37,99,235,.15),0 14px 40px rgba(37,99,235,.5);
  transition:transform .2s,box-shadow .2s;
}
.testi-play-btn svg { width:26px; height:26px; fill:#fff; }
.testi-player:hover .testi-play-btn {
  transform:scale(1.1);
  box-shadow:0 0 0 22px rgba(37,99,235,.2),0 18px 50px rgba(37,99,235,.6);
}
.testi-watch { text-align:center; }
.testi-watch-en { font-family:var(--en); font-size:13px; font-weight:700; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.testi-watch-ar { font-size:11px; color:rgba(255,255,255,.68); margin-top:3px; }
.testi-video:fullscreen          { object-fit:contain; width:100%; height:100%; position:static; }
.testi-video:-webkit-full-screen { object-fit:contain; width:100%; height:100%; position:static; }
@media(max-width:900px) { .testi-grid-2 { grid-template-columns:1fr 1fr; gap:20px; } }
@media(max-width:600px) { .testi-grid-2 { grid-template-columns:1fr; gap:16px; } }

/* ── PRICING ── */
#packs { background:var(--bg2); position:relative; overflow:hidden; }
#packs::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:800px; height:600px; background:radial-gradient(ellipse,rgba(37,99,235,.05) 0%,transparent 55%); pointer-events:none; }
#packs .sec-sub { color:var(--w3); font-size:15px; margin-top:12px; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.75; }
.packs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:0 auto; position:relative; z-index:1; }
.pack-card { background:var(--card); border:1px solid var(--border); border-radius:var(--rxl); padding:40px 32px; display:flex; flex-direction:column; transition:var(--t); position:relative; overflow:hidden; }
.pack-card:hover { border-color:var(--iborder); transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.3); }
.pack-card.featured { border-color:var(--iborder); background:rgba(37,99,235,.04); box-shadow:0 0 0 1px rgba(37,99,235,.08),0 20px 60px rgba(37,99,235,.10); transform:scale(1.02); }
.pack-card.featured::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--indigo),transparent); }
.pack-card.featured:hover { transform:scale(1.02) translateY(-4px); }
.pack-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:50px; font-size:10px; font-weight:700; font-family:var(--en); letter-spacing:.07em; text-transform:uppercase; background:var(--indigo); color:#fff; margin-bottom:18px; width:fit-content; }
.pack-lbl { font-size:10px; font-weight:700; color:var(--w3); letter-spacing:.10em; text-transform:uppercase; margin-bottom:6px; }
.pack-ttl { font-family:var(--en); font-size:22px; font-weight:800; color:var(--w); margin-bottom:6px; }
.pack-per { font-size:12px; color:var(--ilight); font-weight:600; margin-bottom:18px; font-family:var(--en); }
.pack-price { font-family:var(--en); font-size:28px; font-weight:800; color:var(--ilight); margin:10px 0 4px; }
.pack-price .pfrom { font-size:13px; font-weight:600; color:var(--w3); }
.pack-divider { width:100%; height:1px; background:var(--border); margin-bottom:20px; }
.pack-feats { list-style:none; flex:1; display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.pack-feats li { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--w2); line-height:1.6; }
.chk { flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--idim); border:1px solid var(--iborder); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.chk svg { width:10px; height:10px; stroke:var(--indigo); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.pack-feats li strong { color:var(--w); font-weight:700; }
.pack-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px; border-radius:var(--rmd); font-family:var(--ar); font-size:15px; font-weight:800; cursor:pointer; transition:var(--t); border:none; outline:none; }
.pack-cta.ghost { background:transparent; color:var(--w); border:1px solid var(--border); }
.pack-cta.ghost:hover { border-color:var(--indigo); color:var(--ilight); background:var(--idim); }
.pack-cta.primary { background:var(--gold); color:#fff; box-shadow:0 4px 20px var(--gglow); }
.pack-cta.primary:hover { background:var(--gold2); transform:translateY(-2px); box-shadow:0 10px 30px rgba(37,99,235,.4); }
.pack-cta svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; }

/* ── CTA SECTION ── */
#cta { background:var(--bg); padding:100px 0; text-align:center; position:relative; overflow:hidden; }
#cta::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(37,99,235,.09) 0%,transparent 55%); pointer-events:none; }
#cta::after { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(37,99,235,.3),transparent); }
.cta-inner { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.cta-title { font-family:var(--en); font-size:clamp(28px,4.5vw,50px); font-weight:800; color:var(--w); line-height:1.1; letter-spacing:-.02em; margin-bottom:18px; }
.cta-title .g { color:var(--ilight); }
.cta-sub { font-size:16px; color:var(--w3); line-height:1.75; margin-bottom:36px; }

/* ── FAQ ── */
#faq { background:var(--bg2); }
.faq-wrap { max-width:700px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--border); overflow:hidden; }
.faq-item:first-child { border-top:1px solid var(--border); }
.faq-q { width:100%; background:none; border:none; outline:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; cursor:pointer; text-align:right; font-family:var(--ar); font-size:15px; font-weight:700; color:var(--w); transition:color .25s; }
.faq-q:hover { color:var(--ilight); }
.faq-icon { flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease),border-color .25s,background .25s; }
.faq-icon svg { width:11px; height:11px; stroke:var(--w3); fill:none; stroke-width:2.5; }
.faq-item.open .faq-icon { transform:rotate(45deg); border-color:var(--iborder); background:var(--idim); }
.faq-item.open .faq-icon svg { stroke:var(--ilight); }
.faq-item.open .faq-q { color:var(--ilight); }
.faq-body { max-height:0; overflow:hidden; transition:max-height 0.4s cubic-bezier(.4,0,.2,1), padding 0.4s; padding:0; }
.faq-item.open .faq-body { max-height:300px; padding-bottom:20px; }
.faq-body p { font-size:14px; color:var(--w2); line-height:1.8; }
.faq-body strong { color:var(--w); font-weight:700; }

/* ── FORM ── */
#contact { background:var(--bg); }
#contact .sec-sub { color:var(--w3); font-size:15px; margin-top:10px; }
#contact .sec-sub .hl { color:var(--ilight); font-weight:700; }
.form-shell { max-width:540px; margin:0 auto; }
.form-card { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--rxl); padding:44px 36px; }
.fg { margin-bottom:14px; }
.fl { display:block; font-size:12px; font-weight:700; color:var(--w2); margin-bottom:6px; }
.fi { width:100%; padding:13px 16px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--rsm); font-family:var(--ar); font-size:15px; color:var(--w); transition:var(--t); outline:none; direction:rtl; }
.fi:focus { border-color:var(--indigo); background:rgba(37,99,235,.05); box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.fi::placeholder { color:rgba(255,255,255,.2); }
.fi-ltr { direction:ltr; text-align:left; }
select.fi { cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23888%22 stroke-width=%222%22%3E%3Cpolyline points=%226 9 12 15 18 9%22/%3E%3C/svg%3E'); background-repeat:no-repeat; background-position:left 14px center; }
select.fi option { background:#122042; color:var(--w); }
/* prevent iOS auto-zoom on focus (requires ≥16px) */
@media(max-width:768px) { .fi { font-size:16px !important; } }

/* ── TIME PICKS ── */
.time-picks { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px; }
.time-pick input[type="radio"] { display:none; }
.time-pick-inner { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; border:1px solid var(--border); border-radius:var(--rsm); background:rgba(255,255,255,.02); transition:var(--t); text-align:center; cursor:pointer; }
.time-pick:hover .time-pick-inner { border-color:var(--iborder); background:var(--idim); }
.time-pick input:checked + .time-pick-inner { border-color:var(--indigo); background:var(--idim); box-shadow:0 0 0 2px rgba(37,99,235,.12); }
.time-pick-lbl { font-size:13px; font-weight:700; color:var(--w); }
.time-pick-sub { font-size:10px; color:var(--w3); font-family:var(--en); }
.btn-sub { width:100%; padding:16px; background:var(--gold); color:#fff; border:none; border-radius:var(--rsm); font-family:var(--ar); font-size:16px; font-weight:800; cursor:pointer; transition:var(--t); margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-sub:hover { background:var(--gold2); transform:translateY(-2px); box-shadow:0 10px 28px var(--gglow); }
.btn-sub svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.5; stroke-linecap:round; }
.form-ok { display:none; text-align:center; padding:32px 0; }
.form-ok.on { display:block; }
.ok-ring { width:64px; height:64px; border-radius:50%; background:var(--idim); border:1px solid var(--iborder); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.ok-ring svg { width:28px; height:28px; stroke:var(--indigo); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.form-ok h3 { font-family:var(--en); font-size:20px; font-weight:800; color:var(--w); margin-bottom:8px; }
.form-ok p { font-size:14px; color:var(--w3); }
.form-status { display:none; align-items:flex-start; gap:8px; margin-bottom:14px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.02); color:var(--w2); font-size:13px; line-height:1.6; }
.form-status.on { display:flex !important; }
.form-status.error { border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.06); color:#fecaca; }
.form-status.error::before {
  content:'';
  width:10px; height:10px; border-radius:50%;
  background:#ff4444; box-shadow:0 0 0 4px rgba(255,68,68,.14);
  margin-top:4px; flex:0 0 auto;
}
.form-status.success { border-color:rgba(37,211,102,.28); background:rgba(37,211,102,.08); color:#dff8e9; }
.form-status.success::before {
  content:'';
  width:10px; height:10px; border-radius:50%;
  background:#25d366; box-shadow:0 0 0 4px rgba(37,211,102,.14);
  margin-top:4px; flex:0 0 auto;
}

/* ── FOOTER ── */
.foot { background:var(--bg2); border-top:1px solid var(--border); padding:24px 0 0; }
.foot-inner { max-width:700px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.foot-logo { font-family:var(--en); font-size:21px; font-weight:800; color:var(--w); letter-spacing:-.01em; }
.foot-logo span { color:var(--indigo); }
.foot-tag { font-size:13px; color:var(--w3); max-width:340px; line-height:1.6; margin-top:8px; }
.foot-divider { width:100%; max-width:560px; height:1px; background:var(--border); }
.foot-copy { font-size:11px; color:rgba(255,255,255,.2); font-family:var(--en); letter-spacing:.04em; padding-bottom:24px; }

/* ── WHATSAPP FAB ── */
.wa-spot { position:fixed; right:22px; bottom:22px; z-index:210; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .3s var(--ease),transform .3s var(--ease); }
.wa-spot.show { opacity:1; pointer-events:auto; transform:translateY(0); }
.wa-fab { width:52px; height:52px; border-radius:50%; background:#25D366; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(37,211,102,.38); animation:waPulse 2.4s ease-in-out infinite; }
.wa-fab svg { width:26px; height:26px; fill:#fff; }
@keyframes waPulse { 0%,100%{box-shadow:0 8px 22px rgba(37,211,102,.38);} 50%{box-shadow:0 8px 28px rgba(37,211,102,.55),0 0 0 9px rgba(37,211,102,.10);} }
.wa-pop { position:absolute; right:0; bottom:66px; width:248px; border-radius:18px; background:linear-gradient(135deg,#075E54,#128C7E); box-shadow:0 12px 36px rgba(0,0,0,.3); padding:16px; transform:scale(.95); opacity:0; pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease); display:flex; flex-direction:column; gap:12px; }
.wa-pop.open { opacity:1; pointer-events:auto; transform:scale(1); }
.wa-pop-head { display:flex; align-items:center; gap:10px; color:#fff; }
.wa-pop-head svg { width:32px; height:32px; fill:#fff; flex-shrink:0; }
.wa-pop-copy strong { font-family:var(--en); font-size:15px; display:block; color:#fff; }
.wa-pop-copy span { font-size:12px; color:rgba(255,255,255,.85); }
.wa-pop-btn { width:100%; border:none; cursor:pointer; border-radius:50px; background:#2bdc72; color:#fff; font-family:var(--en); font-size:12px; font-weight:700; padding:9px; display:flex; align-items:center; justify-content:center; gap:6px; box-shadow:0 6px 16px rgba(37,211,102,.28); transition:var(--t); }
.wa-pop-btn:hover { background:#22c662; transform:translateY(-1px); }
.wa-pop-btn svg { width:13px; height:13px; fill:#fff; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .video-grid { grid-template-columns:repeat(4,1fr); }
}

@media(max-width:768px) {
  section { padding:60px 0; }
  #hero        { padding:52px 0 36px; }
  #how         { padding:60px 0; }
  #videos      { padding:48px 0; }
  #testimonials{ padding:56px 0; }
  .packs-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .pack-card.featured { transform:scale(1); }
  .pack-card.featured:hover { transform:translateY(-4px); }
}

@media(max-width:600px) {
  .video-grid { grid-template-columns:repeat(3,1fr); gap:8px; padding:0 12px; }
}

@media(max-width:480px) {
  section { padding:52px 0; }
  #hero        { padding:44px 0 28px; }
  #how         { padding:52px 0; }
  #videos      { padding:40px 0; }
  #testimonials{ padding:48px 0; }
  .hero-ctas { flex-direction:column; }
  .btn { width:100%; justify-content:center; }
  .form-card { padding:28px 18px; }
  .fi { padding:12px 14px; }
  .hero-title { font-size:clamp(22px, 7vw, 32px); }
  .hero-sub { font-size:15px; max-width:100%; }
  .video-grid { grid-template-columns:repeat(2,1fr); gap:8px; padding:0 12px; }
}

/* ── MOBILE FOLD ≤360px ── */
@media(max-width:360px) {
  .container { padding:0 12px; }
  section { padding:44px 0; }
  #hero        { padding:36px 0 24px; }
  #how         { padding:44px 0; }
  #videos      { padding:32px 0; }
  #testimonials{ padding:40px 0; }
  .hero-title { font-size:clamp(18px, 6.5vw, 26px); }
  .hero-sub { font-size:14px; }
  .btn { font-size:13px; padding:12px 18px; }
  .btn-xl { padding:13px 22px; font-size:14px; }
  .time-picks { grid-template-columns:1fr; }
  .pack-card { padding:28px 20px; }
  .form-card { padding:22px 14px; }
  .sec-title { font-size:clamp(18px,6.5vw,26px); }
  .cta-title { font-size:clamp(20px,7vw,28px); }
  .step-col { min-width:0; flex:0 0 100%; }
  .step-hover { padding:24px 18px; }
  .steps-flex { gap:10px; }
  .problem-item { padding:18px 14px; }
}

@media(max-width:300px) {
  .container { padding:0 8px; }
  section { padding:36px 0; }
  #hero { padding:28px 0 18px; }
  .hero-ctas .btn { font-size:12px; padding:11px 14px; }
  .video-grid { grid-template-columns:repeat(2,1fr); gap:6px; padding:0 8px; }
}

::selection { background:var(--indigo); color:#fff; }