:root {
  --navy:     #07091B;
  --navy2:    #0B0E26;
  --brand:    #2B3896;
  --brand2:   #3848C8;
  --accent:   #5B6ED8;
  --accent-l: #8A97EC;
  --silver:   #C5CAEF;
  --white:    #ffffff;
  --muted:    rgba(197,202,239,.55);
  --card-bg:  rgba(22,28,84,.28);
  --border:   rgba(91,110,216,.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:"DM Sans",sans-serif;background:var(--navy);color:var(--white);overflow-x:hidden;}
body[dir="rtl"]{font-family:"Tajawal",sans-serif;}

/* ─── NAV ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:18px 48px;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .4s,padding .4s,border-color .4s;
}
nav.scrolled{
  background:rgba(7,9,27,.93);
  backdrop-filter:blur(22px);
  padding:12px 48px;
  border-bottom:1px solid var(--border);
}
.nav-logo img{
  height:42px;width:auto;
  /* invert dark-blue logo to white on dark bg */
  filter:brightness(0) invert(1);
  transition:filter .3s;
}
.nav-links{display:flex;gap:30px;list-style:none;}
.nav-links a{
  text-decoration:none;color:var(--silver);
  font-size:13px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;transition:color .3s;
  position:relative;
}
.nav-links a::after{
  content:"";position:absolute;bottom:-5px;left:0;right:0;height:1px;
  background:var(--accent);transform:scaleX(0);
  transform-origin:right;transition:transform .3s;
}
.nav-links a:hover{color:var(--white);}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}

/* ─── LANG SWITCHER ─── */
.lang-sw{
  display:flex;align-items:center;gap:3px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;padding:3px;
  flex-shrink:0;
}
.lbtn{
  padding:6px 14px;border-radius:100px;
  font-size:13px;font-weight:600;
  border:none;cursor:pointer;transition:all .25s;
  background:transparent;color:rgba(197,202,239,.65);
  line-height:1;
}
.lbtn.on{
  background:var(--brand2);color:#fff;
  box-shadow:0 2px 14px rgba(56,72,200,.5);
}
.lbtn:not(.on):hover{color:var(--white);}

/* ─── HAMBURGER ─── */
.hbg{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:6px;
}
.hbg span{width:22px;height:2px;background:var(--white);border-radius:2px;transition:.3s;}

/* ─── DRAWER ─── */
.drawer{
  position:fixed;top:0;right:-100%;
  width:275px;height:100vh;
  background:rgba(7,9,27,.97);
  backdrop-filter:blur(24px);
  border-left:1px solid var(--border);
  z-index:950;padding:76px 28px 28px;
  transition:right .38s cubic-bezier(.23,1,.32,1);
  display:flex;flex-direction:column;
}
.drawer.open{right:0;}
body[dir="rtl"] .drawer{right:auto;left:-100%;border-left:none;border-right:1px solid var(--border);}
body[dir="rtl"] .drawer.open{left:0;right:auto;}
.drawer a{
  text-decoration:none;color:var(--silver);
  font-size:17px;font-weight:500;
  padding:14px 0;border-bottom:1px solid rgba(91,110,216,.1);
  transition:color .3s;display:block;
}
.drawer a:hover{color:var(--accent);}
.dr-close{
  position:absolute;top:22px;right:22px;
  background:none;border:none;cursor:pointer;
  color:var(--silver);font-size:22px;line-height:1;
}
.dr-close:hover{color:var(--white);}
body[dir="rtl"] .dr-close{right:auto;left:22px;}

/* ─── HERO ─── */
.hero{
  min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding:120px 8% 80px;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 75% at 72% 55%, rgba(43,56,150,.38) 0%, transparent 65%),
    radial-gradient(ellipse 45% 52% at 16% 78%, rgba(91,110,216,.14) 0%, transparent 58%),
    linear-gradient(160deg,#050716 0%,#07091B 55%,#0C0E28 100%);
}
.hero-grid{
  position:absolute;inset:0;opacity:.032;
  background-image:
    linear-gradient(rgba(91,110,216,1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,110,216,1) 1px,transparent 1px);
  background-size:54px 54px;
}
.hero-orb{
  position:absolute;
  width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,rgba(43,56,150,.22) 0%,transparent 70%);
  right:4%;top:50%;transform:translateY(-50%);
  animation:orb 5s ease-in-out infinite;
}
@keyframes orb{
  0%,100%{transform:translateY(-50%) scale(1);opacity:.7;}
  50%{transform:translateY(-50%) scale(1.08);opacity:1;}
}
.hero-content{position:relative;z-index:2;max-width:650px;}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(91,110,216,.1);
  border:1px solid rgba(91,110,216,.28);
  border-radius:100px;padding:6px 16px;
  margin-bottom:28px;
  animation:fup .8s ease both;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 1.6s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}
.badge span{font-size:12px;color:var(--accent-l);letter-spacing:.1em;text-transform:uppercase;}
.hero h1{
  font-family:"Syne",sans-serif;
  font-size:clamp(40px,7.5vw,88px);
  font-weight:800;line-height:1.02;letter-spacing:-.025em;
  animation:fup .8s .1s ease both;
}
body[dir="rtl"] .hero h1{font-family:"Tajawal",sans-serif;letter-spacing:0;font-weight:800;}
.hero h1 .ac{color:var(--accent);}
.hero-sub{
  margin-top:22px;font-size:18px;line-height:1.75;
  color:var(--muted);max-width:500px;
  animation:fup .8s .2s ease both;
}
body[dir="rtl"] .hero-sub{font-family:"Tajawal",sans-serif;font-size:17px;}
.hero-cta{
  margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;
  animation:fup .8s .3s ease both;
}
.btn-s{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--brand2);color:#fff;
  text-decoration:none;padding:13px 26px;border-radius:100px;
  font-size:15px;font-weight:500;letter-spacing:.03em;
  transition:all .3s;border:none;cursor:pointer;
  box-shadow:0 0 26px rgba(43,56,150,.4);
}
.btn-s:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 6px 34px rgba(91,110,216,.48);}
.btn-s .arr{transition:transform .3s;display:inline-block;}
.btn-s:hover .arr{transform:translateX(4px);}
body[dir="rtl"] .btn-s:hover .arr{transform:translateX(-4px);}
.btn-g{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;color:var(--silver);
  text-decoration:none;padding:13px 26px;border-radius:100px;
  font-size:15px;font-weight:500;letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.13);
  transition:all .3s;cursor:pointer;
}
.btn-g:hover{border-color:var(--accent);color:var(--white);background:rgba(91,110,216,.08);}
@keyframes fup{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

/* ─── DIVIDER ─── */
.div{
  width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,110,216,.26),transparent);
}

/* ─── SECTIONS ─── */
section{padding:96px 8%;}
.sl{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;}
.sl .line{width:28px;height:1px;background:var(--accent);}
.sl span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.st{
  font-family:"Syne",sans-serif;
  font-size:clamp(30px,4.5vw,54px);
  font-weight:800;line-height:1.1;margin-bottom:14px;
}
body[dir="rtl"] .st{font-family:"Tajawal",sans-serif;letter-spacing:0;}
.sd{color:var(--muted);font-size:17px;line-height:1.8;max-width:540px;}
body[dir="rtl"] .sd{font-family:"Tajawal",sans-serif;font-size:16px;line-height:1.95;}

/* ─── ABOUT ─── */
.ag{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center;margin-top:56px;}
.acard{
  background:linear-gradient(135deg,rgba(43,56,150,.18),rgba(7,9,27,.88));
  border:1px solid var(--border);
  border-radius:22px;padding:44px;position:relative;overflow:hidden;
}
.acard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.aq{font-size:54px;line-height:1;font-family:"Syne",sans-serif;font-weight:800;color:var(--accent);opacity:.22;margin-bottom:12px;}
.at{font-size:17px;line-height:1.8;color:var(--silver);}
body[dir="rtl"] .at{font-family:"Tajawal",sans-serif;font-size:16px;line-height:1.95;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px;}
.stat{
  background:rgba(91,110,216,.07);
  border:1px solid rgba(91,110,216,.13);
  border-radius:13px;padding:18px;text-align:center;
}
.sn{font-family:"Syne",sans-serif;font-size:30px;font-weight:800;color:var(--accent);}
.sl2{font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.04em;}
body[dir="rtl"] .sl2{font-family:"Tajawal",sans-serif;font-size:12px;}

/* ─── SERVICES ─── */
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px;margin-top:56px;}
.svc{
  background:linear-gradient(145deg,rgba(20,26,92,.28),rgba(7,9,27,.93));
  border:1px solid var(--border);
  border-radius:18px;padding:32px;
  position:relative;overflow:hidden;
  transition:all .4s cubic-bezier(.23,1,.32,1);cursor:default;
}
.svc::before{
  content:"";position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(135deg,rgba(91,110,216,.07),transparent 60%);
  opacity:0;transition:opacity .4s;
}
.svc:hover{transform:translateY(-6px);border-color:rgba(91,110,216,.38);box-shadow:0 18px 48px rgba(43,56,150,.22);}
.svc:hover::before{opacity:1;}
.si{
  width:50px;height:50px;
  background:linear-gradient(135deg,rgba(91,110,216,.18),rgba(43,56,150,.08));
  border:1px solid rgba(91,110,216,.22);border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;margin-bottom:22px;transition:all .3s;
}
.svc:hover .si{background:linear-gradient(135deg,rgba(91,110,216,.3),rgba(43,56,150,.18));box-shadow:0 0 16px rgba(91,110,216,.28);}
.stag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px;}
body[dir="rtl"] .stag{font-family:"Tajawal",sans-serif;letter-spacing:0;font-size:11px;}
.stit{font-family:"Syne",sans-serif;font-size:19px;font-weight:700;margin-bottom:10px;line-height:1.3;}
body[dir="rtl"] .stit{font-family:"Tajawal",sans-serif;font-size:17px;letter-spacing:0;}
.sdsc{font-size:14px;color:var(--muted);line-height:1.76;}
body[dir="rtl"] .sdsc{font-family:"Tajawal",sans-serif;line-height:1.88;}
.sarr{
  position:absolute;bottom:24px;right:24px;
  width:33px;height:33px;
  border:1px solid rgba(91,110,216,.22);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:15px;
  opacity:0;transform:translateX(-5px);transition:all .3s;
}
body[dir="rtl"] .sarr{right:auto;left:24px;transform:translateX(5px);}
.svc:hover .sarr{opacity:1;transform:translateX(0);background:rgba(91,110,216,.1);}

/* ─── CHANNEL ─── */
.ci{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-top:54px;}
.cs{
  display:flex;align-items:center;gap:14px;
  background:rgba(91,110,216,.07);
  border:1px solid rgba(91,110,216,.13);
  border-radius:13px;padding:15px 18px;margin-top:13px;
}
.cs-i{font-size:22px;}
.cs-v{font-family:"Syne",sans-serif;font-size:20px;font-weight:700;}
.cs-l{font-size:12px;color:var(--muted);}
body[dir="rtl"] .cs-l{font-family:"Tajawal",sans-serif;font-size:13px;}
.cc{
  background:rgba(9,11,28,.85);
  border:1px solid var(--border);
  border-radius:18px;padding:24px;
}
.yh{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:15px;border-bottom:1px solid rgba(91,110,216,.1);}
.yav{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;font-family:"Syne",sans-serif;
}
.ynm{font-weight:700;font-size:14px;}
.yhd{font-size:11px;color:var(--muted);margin-top:2px;}
.ycl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.yt{border-radius:9px;aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;position:relative;}
.yt::after{content:"▶";font-size:16px;color:rgba(255,255,255,.42);}
.y1{background:linear-gradient(135deg,rgba(56,72,200,.55),rgba(91,110,216,.22));}
.y2{background:linear-gradient(135deg,rgba(43,56,150,.65),rgba(7,9,27,.85));}
.y3{background:linear-gradient(135deg,rgba(91,110,216,.42),rgba(20,26,92,.65));}

/* ─── CONTACT ─── */
.contact{text-align:center;}
.contact .sl{justify-content:center;}
.cbox{
  max-width:630px;margin:54px auto 0;
  background:linear-gradient(135deg,rgba(20,26,92,.36),rgba(7,9,27,.84));
  border:1px solid var(--border);
  border-radius:24px;padding:50px 44px;
  position:relative;overflow:hidden;
}
.cbox::before{
  content:"";position:absolute;top:0;left:15%;right:15%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.cbox h3{font-family:"Syne",sans-serif;font-size:25px;font-weight:800;margin-bottom:10px;}
body[dir="rtl"] .cbox h3{font-family:"Tajawal",sans-serif;font-size:23px;letter-spacing:0;}
.cbox p{color:var(--muted);font-size:16px;line-height:1.75;margin-bottom:30px;}
body[dir="rtl"] .cbox p{font-family:"Tajawal",sans-serif;}
.cls{display:flex;flex-direction:column;gap:11px;align-items:center;}
.cl{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--silver);text-decoration:none;
  font-size:15px;font-weight:500;transition:color .3s;
}
.cl:hover{color:var(--accent);}
.cl .ico{
  width:36px;height:36px;
  background:rgba(91,110,216,.09);
  border:1px solid rgba(91,110,216,.18);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:15px;transition:all .3s;flex-shrink:0;
}
.cl:hover .ico{background:rgba(91,110,216,.18);border-color:var(--accent);}

/* ─── FOOTER ─── */
footer{
  padding:26px 8%;text-align:center;
  border-top:1px solid rgba(91,110,216,.1);
}
.fl img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.75;margin-bottom:10px;}
footer p{font-size:12px;color:var(--muted);}
body[dir="rtl"] footer p{font-family:"Tajawal",sans-serif;font-size:13px;}

/* ─── FADE ANIM ─── */
.fade{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease;}
.fade.on{opacity:1;transform:translateY(0);}
.d1{transition-delay:.08s;}.d2{transition-delay:.16s;}.d3{transition-delay:.24s;}
.d4{transition-delay:.32s;}.d5{transition-delay:.40s;}

/* ─── UTIL ─── */
.hidden{display:none!important;}

/* ─── NOISE ─── */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.02;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  nav{padding:14px 22px;}
  nav.scrolled{padding:11px 22px;}
  .nav-links{display:none;}
  .hbg{display:flex;}
  .ag,.ci{grid-template-columns:1fr;gap:32px;}
  section{padding:66px 6%;}
  .cbox{padding:34px 20px;}
}
@media(max-width:580px){
  .hero{padding:108px 6% 68px;}
  .sg{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .hero-cta{flex-direction:column;align-items:flex-start;}
  .lbtn{padding:5px 11px;font-size:12px;}
}
@media(max-width:380px){
  nav{padding:12px 14px;}
  .nav-logo img{height:34px;}
}
/* ── Instagram cards ── */
.ig-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; text-decoration: none;
  color: rgba(255,255,255,.72);
  background: linear-gradient(135deg,rgba(43,56,150,.5),rgba(91,110,216,.2));
  border: 1px solid rgba(91,110,216,.25);
  border-radius: 9px;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  transition: all .3s;
}
.ig-card:hover {
  background: linear-gradient(135deg,rgba(43,56,150,.75),rgba(91,110,216,.4));
  border-color: rgba(91,110,216,.55);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(43,56,150,.3);
}

/* ── Reel cards ── */
.reel-card {
  display: block; position: relative;
  text-decoration: none; border-radius: 9px; overflow: hidden;
}
.reel-thumb {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 9px;
  transition: transform .3s;
}
.reel-card:hover .reel-thumb { transform: scale(1.04); }
.reel-placeholder {
  background: linear-gradient(135deg,rgba(43,56,150,.5),rgba(91,110,216,.2));
  border: 1px solid rgba(91,110,216,.25);
  display: flex; align-items: center; justify-content: center;
}
.reel-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s;
}
.reel-card:hover .reel-play { opacity: 1; }