:root{
  --bg:#02040a;
  --bg-2:#040915;
  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.02);
  --line:rgba(47,107,255,.18);
  --blue:#2f6bff;
  --blue-2:#0f52ba;
  --white:#f7f8fb;
  --muted:#c9d2e6;
  --muted-2:#9aa9c7;
  --shadow:0 20px 50px rgba(0,0,0,.30), 0 0 30px rgba(47,107,255,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--white);
  background:
    radial-gradient(circle at 50% 0%, rgba(47,107,255,.14), transparent 18%),
    radial-gradient(circle at 0% 50%, rgba(47,107,255,.10), transparent 16%),
    radial-gradient(circle at 100% 50%, rgba(47,107,255,.10), transparent 16%),
    linear-gradient(180deg, var(--bg) 0%, #03070f 45%, var(--bg-2) 100%);
  min-height:100vh;
}
#particles-js{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(circle at 50% 100%, rgba(47,107,255,.12), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 22%);
}
body::after{
  content:""; position:fixed; left:50%; bottom:-140px; transform:translateX(-50%);
  width:min(1350px,110vw); height:420px; z-index:-1; pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(47,107,255,.18), transparent 42%);
  filter:blur(24px);
}

img{max-width:100%}
a{text-decoration:none}
.section-padding{padding:100px 0}
.container-xxl-custom{max-width:1360px; margin:0 auto; padding:0 18px}

/* navbar */
.navbar{
  background:rgba(4,8,18,.72)!important;
  border:1px solid var(--line);
  box-shadow:0 0 40px rgba(47,107,255,.08);
  border-radius:999px;
  width:min(94%, 1380px);
  margin:18px auto 0;
  left:0; right:0; top:0;
  backdrop-filter:blur(10px);
}
.navbar-brand{font-weight:900; color:#fff!important; letter-spacing:.3px}
.brand-logo{
  width:46px; height:46px; object-fit:cover; border-radius:12px;
  margin-right:.75rem; box-shadow:0 8px 24px rgba(47,107,255,.2);
}
.nav-link{
  color:#d6dff0!important;
  font-weight:600; margin:0 .25rem; position:relative;
}
.nav-link::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.18rem; height:2px;
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
  transform:scaleX(0); transition:transform .3s ease;
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.btn-glow{
  background:linear-gradient(90deg, #1d56ff, #386dff);
  color:#fff; border:none; border-radius:999px; padding:.95rem 1.45rem; font-weight:800;
  box-shadow:0 14px 30px rgba(47,107,255,.20);
}
.btn-outline-lightish{
  border:1px solid rgba(47,107,255,.24);
  color:#fff; border-radius:999px; padding:.95rem 1.45rem; font-weight:800;
  background:transparent;
}
.btn-outline-lightish:hover{background:rgba(47,107,255,.10); color:#fff}

.lang-toggle .btn{padding:.45rem 1rem}

/* headings */
h1,h2,h3,h4,h5,h6{letter-spacing:-.02em}
.section-title,.display-4,.card-dark h3,.card-dark h4,.service-card h4,.feature-card h4,.contact-card h4{
  color:var(--blue);
}
.section-title{font-size:clamp(2rem, 4vw, 3.2rem); font-weight:900; margin-bottom:.65rem}
.section-subtitle{color:var(--muted); max-width:820px}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px; padding:.55rem 1rem; color:#fff;
  background:rgba(255,255,255,.03);
}
.animated-heading{position:relative; display:inline-block}
.animated-heading::after{
  content:""; position:absolute; left:0; right:0; bottom:-12px; height:2px;
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
  background-size:200% 100%; animation:shimmerLine 4s linear infinite;
}
.section-divider{
  width:170px; height:2px; margin:1.2rem auto 0;
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
  background-size:200% 100%; animation:shimmerLine 4s linear infinite;
}

/* hero */
.hero,.page-hero,.service-hero{
  position:relative; overflow:hidden;
  padding:170px 0 100px;
}
.hero::before,.page-hero::before,.service-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(2,4,10,.56), rgba(2,4,10,.82)),
    radial-gradient(circle at 50% 100%, rgba(47,107,255,.26), transparent 36%),
    var(--hero-bg, url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1800&q=80')) center/cover no-repeat;
}
.hero::after,.page-hero::after,.service-hero::after{
  content:""; position:absolute; left:50%; bottom:-110px; transform:translateX(-50%);
  width:min(1300px,100vw); height:340px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle at 50% 50%, rgba(47,107,255,.22), transparent 42%);
  filter:blur(22px);
}
.hero-title{
  font-size:clamp(3rem,7vw,6.4rem);
  line-height:.98; font-weight:900; margin:1rem 0 0; color:#fff;
}
.hero-title .blue{display:block; color:var(--blue)}
.hero-subtitle{max-width:930px; margin:1.6rem auto 0; color:#dbe2ef; font-size:1.15rem}
.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem; color:#fff;
  border:1px solid rgba(255,255,255,.12); border-radius:999px;
  padding:.58rem 1rem; background:rgba(255,255,255,.03)
}
.hero-badge .dot{
  width:10px; height:10px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 16px rgba(47,107,255,.9)
}
.hero-stars{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-stars span{
  position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; opacity:.7;
  animation:starFloat 4s ease-in-out infinite;
}
.hero-stars span:nth-child(1){top:18%; left:16%; animation-delay:.3s;}
.hero-stars span:nth-child(2){top:26%; left:43%; animation-delay:1.3s;}
.hero-stars span:nth-child(3){top:20%; right:18%; animation-delay:2.1s;}
.hero-stars span:nth-child(4){top:38%; left:24%; animation-delay:.9s;}
.hero-stars span:nth-child(5){top:34%; right:30%; animation-delay:1.7s;}
.hero-stars span:nth-child(6){top:54%; left:11%; animation-delay:2.4s;}
.hero-stars span:nth-child(7){top:58%; right:12%; animation-delay:3s;}
.hero-stars span:nth-child(8){top:62%; left:48%; animation-delay:1.1s;}

/* panels */
.card-dark,.feature-strip,.service-highlight,.hero-glass-card,.hero-card,.stat-box{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.card-dark{padding:1.5rem}
.hero-glass-card,.stat-box,.service-highlight{padding:1.1rem}
.icon-round{
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  background:linear-gradient(135deg,#1954ff,#0d2f8b); color:#fff; font-size:1.5rem;
  box-shadow:0 12px 28px rgba(47,107,255,.18);
}
.about-image,.service-detail-image,.media-frame{
  border-radius:28px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);
}
.media-frame img{width:100%; display:block; object-fit:cover}
.metric-card h3{font-size:2rem; color:#fff; margin-bottom:.2rem}

/* layouts */
.feature-strip{padding:26px; border-radius:28px}
.feature-grid .card-dark{height:100%}
.service-grid .card-dark{height:100%}
.sticky-side-card{position:sticky; top:120px}
.timeline-track{
  position:relative; padding:2.2rem 0 1rem;
}
.timeline-line{
  height:2px; background:linear-gradient(90deg, rgba(255,255,255,.12), var(--blue), rgba(255,255,255,.12));
  border-radius:2px;
}
.timeline-points{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:-14px;
}
.timeline-point{
  text-align:center;
}
.timeline-dot{
  width:16px; height:16px; border-radius:50%; background:var(--blue); margin:0 auto 1rem;
  box-shadow:0 0 20px rgba(47,107,255,.8);
}
.mega-footer{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 80%, rgba(47,107,255,.26), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.footer-newsletter{
  background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:999px; padding:.35rem;
}
.footer-newsletter input{
  background:transparent; border:none; outline:none; color:#fff; padding:.95rem 1rem; width:100%;
}
.footer-link{color:#cdd8ea}
.footer-link:hover{color:var(--blue)}
.social-dot{
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); color:#d9e2f3
}

/* forms */
.form-control,.form-select{
  background:#07101c; border:1px solid rgba(255,255,255,.08); color:#fff; border-radius:16px; min-height:52px;
}
.form-control:focus,.form-select:focus{
  background:#07101c; color:#fff; border-color:rgba(47,107,255,.4);
  box-shadow:0 0 0 .22rem rgba(47,107,255,.12)
}
textarea.form-control{min-height:150px}

/* animations */
@keyframes shimmerLine{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes starFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(28px)}to{opacity:1; transform:translateY(0)}}
@keyframes fadeLeft{from{opacity:0; transform:translateX(-28px)}to{opacity:1; transform:translateX(0)}}
@keyframes fadeRight{from{opacity:0; transform:translateX(28px)}to{opacity:1; transform:translateX(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 12px 28px rgba(47,107,255,.18)}50%{box-shadow:0 18px 40px rgba(47,107,255,.3)}}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease}
.reveal.active{opacity:1; transform:translateY(0)}
.reveal-left{opacity:0; transform:translateX(-28px); transition:opacity .9s ease, transform .9s ease}
.reveal-left.active{opacity:1; transform:translateX(0)}
.reveal-right{opacity:0; transform:translateX(28px); transition:opacity .9s ease, transform .9s ease}
.reveal-right.active{opacity:1; transform:translateX(0)}
.hero h1,.hero p,.hero .btn,.hero .hero-badge,.hero .hero-glass-card{animation:fadeUp .9s ease both}
.hero .hero-subtitle{animation-delay:.12s}
.hero .hero-actions{animation-delay:.18s}
.icon-round{animation:pulseGlow 3.4s ease-in-out infinite}
.card-dark,.service-highlight,.feature-strip{transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease}
.card-dark:hover,.service-highlight:hover,.feature-strip:hover{transform:translateY(-8px); border-color:rgba(47,107,255,.26)}

.lang-en[hidden], .lang-ar[hidden]{display:none!important}
body.rtl{direction:rtl; text-align:right}
body.rtl .brand-logo{margin-right:0; margin-left:.75rem}
body.rtl .ms-auto{margin-left:0!important; margin-right:auto!important}
body.rtl .text-md-end{text-align:left!important}
body.rtl .justify-content-lg-end{justify-content:flex-start!important}

@media (max-width:991px){
  .navbar{width:94%}
  .hero,.page-hero,.service-hero{padding-top:155px}
  .hero-title{font-size:clamp(2.5rem,11vw,4.6rem)}
  .sticky-side-card{position:static}
  .timeline-points{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .reveal,.reveal-left,.reveal-right{opacity:1!important; transform:none!important}
}


/* ===== Detailed content additions ===== */
.info-kicker{
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.8rem;
  font-weight:700;
}
.badge-mini{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  padding:.45rem .85rem;
  color:#e8eefb;
  font-size:.9rem;
  font-weight:700;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.stats-grid .card-dark{
  text-align:center;
}
.split-section{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
}
.list-clean{list-style:none;padding:0;margin:0}
.list-clean li{
  padding:.75rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#d7e1f2;
}
.registration-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.reg-card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.reg-card .reg-head{
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.reg-card .reg-body{
  padding:20px;
}
.reg-meta{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:18px;
}
.reg-box{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  padding:14px;
}
.reg-box h5{
  color:#fff!important;
  margin-bottom:.25rem;
  font-size:1rem;
}
.reg-visual{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.reg-visual img{
  display:block;
  width:100%;
  object-fit:cover;
}
.pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pill-list span{
  padding:.7rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#deebff;
}
.client-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}
.client-item{
  min-height:96px;
  display:grid;
  place-items:center;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#dce7ff;
  text-align:center;
  padding:16px;
  font-weight:700;
}
.two-col-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 28px;
}
.accent-line{
  width:120px;
  height:3px;
  border-radius:4px;
  background:linear-gradient(90deg, var(--blue), transparent);
  margin:14px 0 0;
}
.cta-banner{
  padding:34px;
  border-radius:30px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 85% 50%, rgba(47,107,255,.18), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.timeline-vertical{
  position:relative;
  padding-left:34px;
}
.timeline-vertical::before{
  content:"";
  position:absolute;
  left:10px;
  top:4px;
  bottom:4px;
  width:2px;
  background:linear-gradient(180deg, rgba(47,107,255,.8), rgba(47,107,255,.1));
}
.timeline-vertical .step{
  position:relative;
  margin-bottom:22px;
}
.timeline-vertical .step::before{
  content:"";
  position:absolute;
  left:-28px;
  top:7px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 20px rgba(47,107,255,.8);
}
@media (max-width: 991px){
  .split-section,.registration-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .client-grid{grid-template-columns:repeat(2,1fr)}
  .two-col-list{grid-template-columns:1fr}
}