:root {
  --bg-0:      #03080f;
  --bg-1:      #060f1e;
  --bg-2:      #071526;
  --bg-card:   #0a1a33;
  --border:    rgba(14,165,233,0.15);
  --border-h:  rgba(14,165,233,0.5);
  --accent:    #0ea5e9;
  --accent-2:  #38bdf8;
  --accent-g:  #06b6d4;
  --text:      #dff0ff;
  --muted:     #5a89b0;
  --dim:       #2a4a6a;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: 'Tajawal', sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}

a { text-decoration:none; color:inherit; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-0); }
::-webkit-scrollbar-thumb { background:#0369a1; border-radius:3px; }

/* ── NAV ── */
nav {
  position:fixed; top:0; inset-inline:0; z-index:100;
  padding:18px 40px;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled {
  background:rgba(3,8,15,.88);
  backdrop-filter:blur(20px);
  border-color:var(--border);
}
.nav-logo {
  display:flex; align-items:center; gap:12px;
  font-size:1.35rem; font-weight:800;
}
.nav-logo img { width:38px; height:38px; border-radius:8px; object-fit:contain; }
.logo-accent { color:var(--accent); }

.nav-links {
  display:flex; align-items:center; gap:32px; list-style:none;
}
.nav-links a {
  font-size:.9rem; font-weight:500; color:var(--muted);
  transition:color .25s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; right:0;
  width:0; height:1px; background:var(--accent); transition:width .3s;
}
.nav-links a:hover { color:var(--accent); }
.nav-links a:hover::after { width:100%; }

.nav-cta {
  padding:9px 22px; background:var(--accent); color:#fff !important;
  border-radius:8px; font-weight:700 !important; font-size:.88rem !important;
  transition:box-shadow .3s,transform .2s !important;
}
.nav-cta:hover { box-shadow:0 0 24px rgba(14,165,233,.5) !important; transform:translateY(-1px); }
.nav-cta::after { display:none !important; }

/* ── HERO ── */
#hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:120px 20px 80px; overflow:hidden;
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(14,165,233,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,165,233,.07) 1px,transparent 1px);
  background-size:60px 60px;
  animation:grid-drift 20s linear infinite;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 30%,transparent 100%);
}
@keyframes grid-drift { to { transform:translateY(60px); } }

.hero-blob {
  position:absolute; border-radius:50%;
  filter:blur(80px); pointer-events:none;
  animation:blob-pulse 8s ease-in-out infinite alternate;
}
.blob-1 { width:600px;height:600px; background:radial-gradient(circle,rgba(14,165,233,.18) 0%,transparent 70%); top:-100px; right:-100px; }
.blob-2 { width:500px;height:500px; background:radial-gradient(circle,rgba(6,182,212,.12) 0%,transparent 70%); bottom:-80px; left:-80px; animation-delay:-4s; }
.blob-3 { width:300px;height:300px; background:radial-gradient(circle,rgba(56,189,248,.1) 0%,transparent 70%); top:40%;left:50%;transform:translate(-50%,-50%); animation-delay:-2s; }
@keyframes blob-pulse { 0%{opacity:.7;transform:scale(1)} 100%{opacity:1;transform:scale(1.15)} }

.orbs-container { position:absolute;inset:0;pointer-events:none; }
.orb { position:absolute;border-radius:50%;background:var(--accent);opacity:.4;animation:orb-float linear infinite; }
@keyframes orb-float {
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:.4} 90%{opacity:.15}
  100%{transform:translateY(-20px) scale(1.2);opacity:0}
}

.hero-badge {
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 18px; background:rgba(14,165,233,.1);
  border:1px solid rgba(14,165,233,.3); border-radius:100px;
  font-size:.8rem;font-weight:700;color:var(--accent-2);
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:28px; animation:appear .8s ease both;
}
.badge-dot { width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:blink 1.5s ease infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes appear { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.hero-title {
  font-size:clamp(2.8rem,8vw,5.5rem);font-weight:900;
  line-height:1.1;margin-bottom:24px;
  animation:appear .9s ease .15s both;
}
.hero-title .line-accent {
  display:block;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 50%,#7dd3fc 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub {
  font-size:clamp(1rem,2vw,1.2rem);color:var(--muted);
  max-width:600px;margin:0 auto 40px;line-height:1.8;
  animation:appear .9s ease .3s both;
}
.hero-buttons {
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  animation:appear .9s ease .45s both;
}

.btn-glow {
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 34px;background:var(--accent);color:#fff;
  border-radius:10px;font-weight:700;font-size:1rem;
  transition:box-shadow .3s,transform .2s;position:relative;overflow:hidden;
}
.btn-glow::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);
  opacity:0;transition:opacity .3s;
}
.btn-glow:hover { box-shadow:0 0 30px rgba(14,165,233,.6),0 4px 20px rgba(14,165,233,.3);transform:translateY(-2px); }
.btn-glow:hover::before { opacity:1; }

.btn-outline {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border:1.5px solid var(--border-h);color:var(--accent-2);
  border-radius:10px;font-weight:600;font-size:1rem;
  transition:background .3s,border-color .3s,box-shadow .3s,transform .2s;
  backdrop-filter:blur(8px);
}
.btn-outline:hover { background:rgba(14,165,233,.1);border-color:var(--accent);box-shadow:0 0 20px rgba(14,165,233,.2);transform:translateY(-2px); }

.hero-scroll {
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--dim);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  animation:fade-in 1s ease 1.5s both;
}
.scroll-line { width:1px;height:40px;background:linear-gradient(to bottom,var(--accent),transparent);animation:scroll-pulse 2s ease infinite; }
@keyframes scroll-pulse { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.2)} }
@keyframes fade-in { from{opacity:0} to{opacity:1} }

/* ── STATS ── */
.stats-band { background:var(--bg-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:60px 20px; }
.stats-inner { max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr); }
.stat-item { padding:20px 30px;text-align:center;border-left:1px solid var(--border); }
.stat-item:first-child { border-left:none; }
.stat-num {
  font-size:3rem;font-weight:900;display:block;line-height:1.1;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-label { font-size:.9rem;color:var(--muted);margin-top:6px; }

/* ── SECTION ── */
.section { padding:100px 20px;max-width:1200px;margin:0 auto; }
.section-label { display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:14px; }
.section-title { font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;line-height:1.2;margin-bottom:16px; }
.section-sub { color:var(--muted);font-size:1.05rem;max-width:520px; }
.section-head { margin-bottom:64px; }
.section-head.center { text-align:center; }
.section-head.center .section-sub { margin:0 auto; }

/* ── FEATURES ── */
.features-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px; }
.feat-card {
  background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
  padding:36px 30px;position:relative;overflow:hidden;
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
.feat-card::before {
  content:'';position:absolute;top:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .35s;
}
.feat-card:hover { border-color:var(--border-h);transform:translateY(-6px);box-shadow:0 20px 60px rgba(14,165,233,.1); }
.feat-card:hover::before { opacity:1; }
.feat-icon { width:52px;height:52px;border-radius:12px;background:rgba(14,165,233,.12);border:1px solid rgba(14,165,233,.2);display:flex;align-items:center;justify-content:center;margin-bottom:22px;font-size:1.5rem; }
.feat-title { font-size:1.15rem;font-weight:700;margin-bottom:10px; }
.feat-desc { color:var(--muted);font-size:.93rem;line-height:1.7; }

/* ── SCRIPTS ── */
.scripts-section { background:var(--bg-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:100px 20px; }
.scripts-inner { max-width:1200px;margin:0 auto; }
.scripts-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px; }

.script-card {
  background:var(--bg-2);border:1px solid var(--border);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .35s,transform .35s,box-shadow .35s;
}
.script-card:hover { border-color:rgba(14,165,233,.4);transform:translateY(-4px);box-shadow:0 16px 50px rgba(14,165,233,.12); }

.script-img { width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-card);display:block; }
.script-img-placeholder {
  width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(6,182,212,.05));
  display:flex;align-items:center;justify-content:center;font-size:3rem;
}

.script-body { padding:24px;flex:1;display:flex;flex-direction:column; }
.script-price-row { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }
.script-price { font-size:1.3rem;font-weight:800;color:var(--accent); }
.script-currency { font-size:.8rem;color:var(--muted);font-weight:500; }
.script-name { font-size:1.15rem;font-weight:700;margin-bottom:8px;line-height:1.3; }
.script-desc { color:var(--muted);font-size:.88rem;line-height:1.7;flex:1;margin-bottom:20px; }

.btn-buy {
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;background:var(--accent);color:#fff;
  border-radius:10px;font-weight:700;font-size:.95rem;
  transition:box-shadow .3s,transform .2s;
  border:none;cursor:pointer;font-family:'Tajawal',sans-serif;
}
.btn-buy:hover { box-shadow:0 0 24px rgba(14,165,233,.5);transform:translateY(-2px); }

/* loading / error */
.scripts-state { text-align:center;padding:80px 20px;color:var(--muted); }
.scripts-state .spinner {
  width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px;
}
@keyframes spin { to { transform:rotate(360deg); } }
.scripts-state .err-icon { font-size:3rem;margin-bottom:16px; }
.scripts-state h3 { font-size:1.1rem;font-weight:700;margin-bottom:8px;color:var(--text); }

/* ── HOW IT WORKS ── */
.process-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;position:relative; }
.process-grid::before {
  content:'';position:absolute;top:40px;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--border-h),var(--border-h),transparent);
}
.process-step { padding:0 24px;text-align:center;position:relative; }
.step-num {
  width:80px;height:80px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:900;color:var(--accent);
  margin:0 auto 28px;position:relative;z-index:1;transition:border-color .3s,box-shadow .3s;
}
.process-step:hover .step-num { border-color:var(--accent);box-shadow:0 0 24px rgba(14,165,233,.3); }
.step-title { font-size:1.05rem;font-weight:700;margin-bottom:10px; }
.step-desc { font-size:.88rem;color:var(--muted);line-height:1.7; }

/* ── CTA ── */
.cta-section { padding:100px 20px; }
.cta-box {
  max-width:900px;margin:0 auto;
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(6,182,212,.06));
  border:1px solid rgba(14,165,233,.3);border-radius:24px;padding:70px 40px;text-align:center;
}
.cta-title { font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-bottom:18px; }
.cta-sub { color:var(--muted);font-size:1.05rem;margin-bottom:40px;max-width:520px;margin-inline:auto; }
.cta-buttons { display:flex;justify-content:center;gap:16px;flex-wrap:wrap; }

/* ── FOOTER ── */
footer { background:var(--bg-1);border-top:1px solid var(--border);padding:60px 20px 32px; }
.footer-inner { max-width:1200px;margin:0 auto; }
.footer-top { display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--border);margin-bottom:40px; }
.footer-desc { color:var(--muted);font-size:.88rem;line-height:1.7;max-width:280px;margin-top:12px; }
.footer-col h4 { font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:18px; }
.footer-col ul { list-style:none;display:flex;flex-direction:column;gap:10px; }
.footer-col a { font-size:.9rem;color:var(--muted);transition:color .25s; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px; }
.footer-copy { font-size:.82rem;color:var(--dim); }
.footer-copy strong { color:var(--muted); }
.footer-socials { display:flex;gap:12px; }
.social-btn {
  width:38px;height:38px;border-radius:9px;background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  transition:border-color .3s,box-shadow .3s,transform .2s;
}
.social-btn:hover { border-color:var(--accent);box-shadow:0 0 14px rgba(14,165,233,.3);transform:translateY(-2px); }

/* ── REVEAL ── */
.reveal { opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease; }
.reveal.revealed { opacity:1;transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

@media (max-width:900px) {
  nav { padding:14px 24px; }
  .nav-links { display:none; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .section { padding:70px 18px; }
  .process-grid::before { display:none; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column;text-align:center; }
}