@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
  --blue-900: #0a1628;
  --blue-800: #0f2240;
  --blue-700: #132d54;
  --blue-600: #1a3f6f;
  --blue-500: #2563eb;
  --blue-400: #3b82f6;
  --blue-300: #60a5fa;
  --blue-200: #93c5fd;
  --blue-100: #dbeafe;
  --cyan-400: #22d3ee;
  --cyan-300: #67e8f9;
  --gold: #f59e0b;
  --gold-light: #fbbf24;
  --white: #ffffff;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --text-primary: #f0f6ff;
  --text-secondary: #94a3b8;
  --shadow-blue: 0 8px 32px rgba(37,99,235,0.25);
  --shadow-dark: 0 16px 48px rgba(0,0,0,0.4);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;font-size:16px}

body{
  font-family:'Cairo','Tajawal',sans-serif;
  background:var(--blue-900);
  color:var(--text-primary);
  direction:rtl;
  text-align:right;
  overflow-x:hidden;
  line-height:1.8;
}

/* ===== ANIMATED BACKGROUND ===== */
.bg-animation{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,var(--blue-900) 0%,#0c1e3d 25%,#0f2847 50%,#081830 75%,var(--blue-900) 100%);
}
.bg-animation::before{
  content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:radial-gradient(circle at 20% 50%,rgba(37,99,235,0.08) 0%,transparent 50%),
             radial-gradient(circle at 80% 20%,rgba(34,211,238,0.06) 0%,transparent 50%),
             radial-gradient(circle at 50% 80%,rgba(59,130,246,0.05) 0%,transparent 50%);
  animation:bgFloat 20s ease-in-out infinite;
}
@keyframes bgFloat{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-2%,2%) rotate(1deg)}}

.floating-orb{
  position:fixed;border-radius:50%;filter:blur(80px);opacity:0.15;pointer-events:none;z-index:0;
}
.orb-1{width:500px;height:500px;background:var(--blue-500);top:-100px;right:-100px;animation:orbMove1 25s ease-in-out infinite}
.orb-2{width:400px;height:400px;background:var(--cyan-400);bottom:-80px;left:-80px;animation:orbMove2 30s ease-in-out infinite}
.orb-3{width:300px;height:300px;background:var(--blue-400);top:50%;left:50%;animation:orbMove3 20s ease-in-out infinite}
@keyframes orbMove1{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,80px)}}
@keyframes orbMove2{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-60px)}}
@keyframes orbMove3{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-40%,-60%)}}

/* ===== PARTICLES ===== */
.particles{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.particle{
  position:absolute;width:4px;height:4px;background:var(--blue-300);border-radius:50%;opacity:0;
  animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{opacity:0;transform:translateY(100vh) scale(0)}
  10%{opacity:0.6}
  90%{opacity:0.6}
  100%{opacity:0;transform:translateY(-10vh) scale(1)}
}

/* ===== MAIN CONTENT ===== */
.content-wrapper{position:relative;z-index:1}

/* ===== HERO ===== */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:2rem;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent 0%,rgba(10,22,40,0.5) 100%);
}
.hero-content{
  text-align:center;position:relative;z-index:2;max-width:900px;
  animation:heroFadeIn 1.2s ease-out;
}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:50px;padding:8px 24px;margin-bottom:2rem;
  backdrop-filter:blur(20px);font-size:0.9rem;color:var(--cyan-300);
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{box-shadow:0 0 20px rgba(34,211,238,0.1)}50%{box-shadow:0 0 30px rgba(34,211,238,0.2)}}

.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan-400);animation:dotPulse 2s infinite}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.5)}}

.hero h1{
  font-size:clamp(2.2rem,5vw,4rem);font-weight:900;line-height:1.3;margin-bottom:1rem;
  background:linear-gradient(135deg,var(--white) 0%,var(--blue-200) 50%,var(--cyan-300) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero .subtitle{
  font-size:clamp(1rem,2vw,1.4rem);color:var(--text-secondary);
  max-width:700px;margin:0 auto 2.5rem;line-height:2;
}
.hero-cta{
  display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-400));
  color:var(--white);border:none;border-radius:16px;padding:16px 40px;
  font-size:1.15rem;font-family:inherit;font-weight:700;cursor:pointer;
  text-decoration:none;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow:var(--shadow-blue);position:relative;overflow:hidden;
}
.hero-cta::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.6s;
}
.hero-cta:hover::before{left:100%}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(37,99,235,0.4)}
.hero-cta .arrow{font-size:1.4rem;transition:transform 0.3s}
.hero-cta:hover .arrow{transform:translateX(-5px)}

.scroll-indicator{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text-secondary);font-size:0.85rem;animation:scrollBounce 2s infinite;
}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
.scroll-indicator .mouse{
  width:24px;height:38px;border:2px solid var(--blue-300);border-radius:12px;
  position:relative;
}
.scroll-indicator .mouse::before{
  content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:4px;height:8px;background:var(--blue-300);border-radius:4px;
  animation:scrollWheel 2s infinite;
}
@keyframes scrollWheel{0%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(12px)}}

/* ===== DEADLINE BANNER ===== */
.deadline-banner{
  background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(251,191,36,0.08));
  border:1px solid rgba(245,158,11,0.3);border-radius:16px;
  padding:20px 30px;margin:0 auto 1.5rem;max-width:600px;
  display:flex;align-items:center;justify-content:center;gap:15px;
  backdrop-filter:blur(10px);
}
.deadline-banner .icon{font-size:2rem}
.deadline-banner .text{color:var(--gold-light);font-weight:700;font-size:1.1rem}
.deadline-banner .date{color:var(--gold);font-size:1.3rem;font-weight:900}

/* ===== SECTION STYLES ===== */
.section{padding:5rem 2rem}
.section-header{text-align:center;margin-bottom:4rem}
.section-header h2{
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:1rem;
  background:linear-gradient(135deg,var(--white),var(--blue-200));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.section-header p{color:var(--text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto}
.section-divider{
  width:80px;height:4px;border-radius:4px;margin:1rem auto 0;
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-400));
}

/* ===== PROGRESS BAR ===== */
.progress-container{
  position:sticky;top:0;z-index:100;
  background:rgba(10,22,40,0.9);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);padding:12px 2rem;
  display:none;
}
.progress-container.visible{display:block}
.progress-bar-track{
  width:100%;max-width:1000px;margin:0 auto;height:6px;
  background:rgba(255,255,255,0.1);border-radius:6px;overflow:hidden;
}
.progress-bar-fill{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-400));
  transition:width 0.3s ease;width:0%;
}
.progress-text{
  text-align:center;font-size:0.85rem;color:var(--text-secondary);margin-top:6px;
  max-width:1000px;margin-left:auto;margin-right:auto;
}

/* ===== STEPS TIMELINE ===== */
.steps-container{max-width:1100px;margin:0 auto;position:relative}

.timeline-line{
  position:absolute;right:30px;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--blue-500),var(--cyan-400),var(--blue-500));
  opacity:0.3;
}

.step-card{
  position:relative;margin-bottom:3rem;padding-right:80px;
  opacity:0;transform:translateY(30px);
  transition:all 0.6s cubic-bezier(0.4,0,0.2,1);
}
.step-card.visible{opacity:1;transform:translateY(0)}

.step-number{
  position:absolute;right:0;top:0;width:60px;height:60px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:900;z-index:2;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-400));
  color:var(--white);box-shadow:0 4px 20px rgba(37,99,235,0.4);
  border:3px solid var(--blue-900);
  transition:all 0.3s ease;
}
.step-card:hover .step-number{
  transform:scale(1.15);
  box-shadow:0 6px 30px rgba(37,99,235,0.6);
}
.step-card.active .step-number{
  background:linear-gradient(135deg,var(--cyan-400),var(--blue-400));
  box-shadow:0 4px 25px rgba(34,211,238,0.5);
}

.step-content{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:20px;overflow:hidden;
  backdrop-filter:blur(20px);
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.step-card:hover .step-content{
  border-color:rgba(37,99,235,0.3);
  box-shadow:0 8px 40px rgba(37,99,235,0.15);
  transform:translateX(-5px);
}

.step-header{
  padding:1.5rem 2rem;
  background:linear-gradient(135deg,rgba(37,99,235,0.1),rgba(34,211,238,0.05));
  border-bottom:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;
}
.step-title{font-size:1.25rem;font-weight:700;color:var(--white)}
.step-toggle{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;
  transition:all 0.3s;font-size:1.2rem;color:var(--blue-300);
}
.step-card.expanded .step-toggle{transform:rotate(180deg);background:rgba(37,99,235,0.2)}

.step-body{
  padding:0 2rem;max-height:0;overflow:hidden;
  transition:all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.step-card.expanded .step-body{padding:1.5rem 2rem;max-height:2000px}

.step-description{
  color:var(--text-secondary);font-size:1rem;margin-bottom:1.5rem;line-height:2;
}

.step-image-container{
  border-radius:12px;overflow:hidden;border:1px solid var(--glass-border);
  position:relative;
  transition:all 0.3s;
}
.step-image-container:hover{border-color:rgba(37,99,235,0.4)}
.step-image-container img{
  width:100%;height:auto;display:block;
  transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.step-image-container:hover img{transform:scale(1.02)}

.step-image-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,transparent 60%,rgba(10,22,40,0.6) 100%);
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}
.step-image-container:hover .step-image-overlay{opacity:1}

.zoom-btn{
  position:absolute;top:12px;left:12px;width:40px;height:40px;
  border-radius:10px;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.2);
  color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;opacity:0;transition:all 0.3s;backdrop-filter:blur(10px);
}
.step-image-container:hover .zoom-btn{opacity:1}
.zoom-btn:hover{background:rgba(37,99,235,0.6)}

.step-tip{
  margin-top:1rem;padding:12px 16px;border-radius:10px;
  background:rgba(34,211,238,0.08);border:1px solid rgba(34,211,238,0.2);
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.9rem;color:var(--cyan-300);
}
.step-tip .tip-icon{font-size:1.2rem;flex-shrink:0}

/* ===== VIDEO SECTION ===== */
.video-section{
  padding:5rem 2rem;
  background:linear-gradient(180deg,transparent,rgba(37,99,235,0.05),transparent);
}
.video-wrapper{
  max-width:900px;margin:0 auto;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:24px;overflow:hidden;backdrop-filter:blur(20px);
  box-shadow:var(--shadow-dark);
}
.video-header{
  padding:2rem;text-align:center;
  background:linear-gradient(135deg,rgba(37,99,235,0.15),rgba(34,211,238,0.08));
}
.video-header h3{font-size:1.6rem;font-weight:800;margin-bottom:0.5rem}
.video-header p{color:var(--text-secondary);font-size:1rem}
.video-frame{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
}
.video-frame iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;border:none;
}

/* ===== LIGHTBOX ===== */
.lightbox{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
  background:rgba(0,0,0,0.92);backdrop-filter:blur(20px);
  display:none;align-items:center;justify-content:center;
  padding:2rem;
}
.lightbox.active{display:flex}
.lightbox img{max-width:95%;max-height:90vh;border-radius:12px;box-shadow:var(--shadow-dark)}
.lightbox-close{
  position:absolute;top:20px;left:20px;width:48px;height:48px;
  border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
  color:white;font-size:1.5rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.3s;
}
.lightbox-close:hover{background:rgba(239,68,68,0.5)}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
  color:white;font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.3s;
}
.lightbox-nav:hover{background:rgba(37,99,235,0.5)}
.lightbox-nav.prev{right:20px}
.lightbox-nav.next{left:20px}

/* ===== QUICK NAV ===== */
.quick-nav{
  position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:50;
  display:flex;flex-direction:column;gap:6px;
}
.quick-nav a{
  width:12px;height:12px;border-radius:50%;
  background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.1);
  transition:all 0.3s;display:block;text-decoration:none;
}
.quick-nav a:hover,.quick-nav a.active{
  background:var(--blue-400);
  box-shadow:0 0 10px rgba(59,130,246,0.5);
  transform:scale(1.3);
}

/* ===== FOOTER ===== */
.footer{
  padding:3rem 2rem;text-align:center;
  border-top:1px solid var(--glass-border);
  background:rgba(0,0,0,0.2);
}
.footer p{color:var(--text-secondary);font-size:0.9rem}
.footer .heart{color:#ef4444;animation:heartbeat 1.5s infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .step-card{padding-right:60px}
  .step-number{width:46px;height:46px;font-size:1rem}
  .timeline-line{right:22px}
  .step-header{padding:1rem 1.2rem}
  .step-card.expanded .step-body{padding:1rem 1.2rem}
  .step-title{font-size:1.05rem}
  .quick-nav{display:none}
  .deadline-banner{flex-direction:column;text-align:center;gap:8px}
  .hero{min-height:90vh}
}
@media(max-width:480px){
  .hero h1{font-size:1.8rem}
  .hero .subtitle{font-size:0.95rem}
  .hero-cta{padding:12px 28px;font-size:1rem}
  .section{padding:3rem 1rem}
  .step-card{padding-right:50px;margin-bottom:2rem}
  .step-number{width:40px;height:40px;font-size:0.9rem}
  .timeline-line{right:19px}
}

/* ===== EXPAND ALL BTN ===== */
.expand-all-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:12px;padding:10px 24px;margin-bottom:2rem;
  color:var(--blue-300);font-family:inherit;font-size:0.95rem;font-weight:600;
  cursor:pointer;transition:all 0.3s;backdrop-filter:blur(10px);
}
.expand-all-btn:hover{background:rgba(37,99,235,0.15);border-color:var(--blue-400)}

/* ===== BACK TO TOP ===== */
.back-to-top{
  position:fixed;bottom:30px;left:30px;z-index:50;
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-400));
  color:white;border:none;font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-blue);
  opacity:0;transform:translateY(20px);
  transition:all 0.3s;
}
.back-to-top.visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(37,99,235,0.5)}