:root {
  /* --- Light professional blue theme --- */
  --blue:    #1d6fe0;   /* primary accent */
  --blue2:   #1552b0;   /* darker accent */
  --blue3:   #4a90e8;   /* lighter accent */
  --gold:    #1d6fe0;   /* accent alias -> now blue everywhere (logo keeps real gold below) */
  --gold2:   #1552b0;
  --gold3:   #4a90e8;
  --logo-gold:  #c9a84c; /* real gold, used ONLY for the company logo */
  --logo-gold2: #e4c877;
  /* backgrounds (were dark navy, now light) */
  --navy:    #ffffff;   /* was page bg; now white surface */
  --navy2:   #f7f9fc;   /* subtle off-white */
  --navy3:   #eef4fd;   /* light blue tint */
  --bg:      #ffffff;
  --bg2:     #f7f9fc;
  --card:    #ffffff;
  /* text */
  --ink:     #0b1e38;   /* primary dark text */
  --white:   #0b1e38;   /* alias: was light text, now dark ink for readability */
  --gray:    #64708a;   /* secondary text */
  --border:  rgba(11,30,56,0.10);
  --glow:    rgba(29,111,224,0.12);
  --font-ar: 'Tajawal', sans-serif;
  --font-en: 'Inter', sans-serif;
}

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

html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}

body{
  font-family:var(--font-ar);
  background:var(--navy);
  color:var(--white);
  overflow-x:hidden;
  max-width:100%;
  cursor:none;
}
html[lang="en"] body{font-family:var(--font-en);}

/* LANGUAGE TOGGLE */
.lang-ar,.lang-en{display:none;}
html[lang="ar"] .lang-ar{display:inline;}
html[lang="en"] .lang-en{display:inline;}
html[lang="ar"] .lang-ar-block{display:block;}
html[lang="en"] .lang-en-block{display:block;}
html[lang="ar"] .lang-ar-flex{display:flex;}
html[lang="en"] .lang-en-flex{display:flex;}
html[lang="ar"] .lang-ar-inline-flex{display:inline-flex;}
html[lang="en"] .lang-en-inline-flex{display:inline-flex;}

/* SCROLL PROGRESS BAR */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold3));
  z-index:10000;transition:width .1s linear;
  box-shadow:0 0 10px var(--gold);
}

/* CUSTOM CURSOR */
.cursor{
  position:fixed;width:10px;height:10px;
  background:var(--blue);border-radius:50%;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,opacity .25s,background .25s;
  will-change:left,top;
}
.cursor-ring{
  position:fixed;width:38px;height:38px;
  border:1.5px solid var(--gold);border-radius:50%;
  pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),opacity .3s,border-color .3s;
  opacity:.55;
  will-change:left,top;
}
.cursor.hover{width:0;height:0;opacity:0;}
.cursor-ring.hover{width:68px;height:68px;border-color:var(--gold2);opacity:.9;background:rgba(29,111,224,.05);}

@media(hover:none),(max-width:900px){
  body{cursor:auto;}
  .cursor,.cursor-ring{display:none;}
  a,button,select{cursor:pointer!important;}
}

/* GRID PATTERN */
body::before{
  content:'';position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(29,111,224,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(29,111,224,.04) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;z-index:0;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 100%);
}

/* PARTICLE CANVAS */
.particles{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 5%;
  height:72px;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(6,20,42,.38) 0%,rgba(6,20,42,.12) 60%,transparent 100%);
  border-bottom:none;
  transition:all .4s ease;
}
nav.scrolled{
  height:64px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 30px rgba(11,30,56,.08);
}
/* When scrolled the bar is light -> switch text to dark for contrast */
nav.scrolled .nav-links a{color:#41506a;text-shadow:none;}
nav.scrolled .nav-links a:hover{color:var(--blue);}
nav.scrolled .logo{color:var(--ink);text-shadow:none;}
nav.scrolled .logo span{color:var(--ink);}
nav.scrolled .lang-switch{background:rgba(29,111,224,.08);border-color:rgba(29,111,224,.25);}
nav.scrolled .lang-switch button{color:var(--gray);}

.logo{
  font-family:'Orbitron',sans-serif;
  font-size:18px;font-weight:900;
  color:#ffffff;
  letter-spacing:2px;
  display:flex;align-items:center;gap:10px;
  transition:color .3s ease;
  text-shadow:0 1px 10px rgba(6,20,42,.5);
}
.logo-img{
  height:46px;width:auto;display:block;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.logo:hover .logo-img{transform:scale(1.04);}
/* Top (transparent nav over dark hero): show white logo */
.logo-img-dark{display:none;}
.logo-img-light{display:block;}
/* Scrolled (white bar): show colored logo */
nav.scrolled .logo-img-light{display:none;}
nav.scrolled .logo-img-dark{display:block;}
.footer-logo .logo-img{height:52px;}
.logo-icon{
  width:48px;height:48px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.55) 0%, transparent 45%),
    linear-gradient(135deg,#d4b45a 0%,#f0d488 45%,#c9a84c 100%);
  border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  color:#3d2f0a;
  box-shadow:
    0 8px 22px rgba(201,168,76,.45),
    0 0 0 1px rgba(201,168,76,.3),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -3px 8px rgba(120,90,20,.22);
  position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.logo:hover .logo-icon{transform:rotate(-5deg) scale(1.06);}

/* Decorative inner frame */
.logo-icon::before{
  content:'';position:absolute;inset:3px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  pointer-events:none;
  z-index:1;
}

/* Elegant S monogram */
.ss-mono{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:900;
  font-style:italic;
  font-size:32px;
  line-height:1;
  position:relative;
  display:inline-flex;
  align-items:baseline;
  z-index:2;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.45));
  margin-top:2px;
}
.ss-mono .ss-1{
  color:#3d2f0a;
  -webkit-text-fill-color:#3d2f0a;
  display:inline-block;
  position:relative;
  z-index:3;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.logo-icon::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:shine 3.5s ease-in-out infinite;
  z-index:4;pointer-events:none;
}
@keyframes shine{
  0%,60%{transform:translateX(-100%);}
  80%,100%{transform:translateX(100%);}
}
.logo span{color:#cdd8ea;font-size:13px;display:block;font-weight:400;letter-spacing:4px;opacity:.85;}

.nav-links{
  display:flex;align-items:center;gap:28px;
  list-style:none;
}
.nav-links a{
  color:#ffffff;font-size:14px;font-weight:600;
  text-decoration:none;
  transition:color .25s;
  position:relative;letter-spacing:.5px;
  text-shadow:0 1px 10px rgba(6,20,42,.6),0 1px 3px rgba(6,20,42,.5);
}
.nav-links a::after{
  content:'';position:absolute;bottom:-6px;left:50%;
  width:0;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold2));
  transition:all .35s ease;
  transform:translateX(-50%);
}
.nav-links a:hover{color:#ffffff;}
.nav-links a:hover::after{width:100%;}

.nav-cta{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy)!important;
  padding:9px 22px;border-radius:8px;
  font-weight:700!important;
  box-shadow:0 0 20px var(--glow);
  transition:all .3s cubic-bezier(.2,.8,.2,1)!important;
  position:relative;overflow:hidden;
}
.nav-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--gold2),var(--gold3));
  opacity:0;transition:opacity .3s;
}
.nav-cta span{position:relative;z-index:1;}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(29,111,224,.5)!important;}
.nav-cta:hover::before{opacity:1;}
.nav-cta::after{display:none!important;}

/* LANG SWITCH */
.lang-switch{
  display:flex;align-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  border-radius:30px;padding:3px;
  position:relative;cursor:none;
  font-family:'Orbitron',sans-serif;
  backdrop-filter:blur(10px);
}
.lang-switch button{
  background:none;border:none;
  color:#dbe6f6;
  padding:6px 14px;font-size:11px;font-weight:700;
  letter-spacing:1px;cursor:none;
  border-radius:20px;
  transition:color .3s;
  position:relative;z-index:1;
}
.lang-switch button.active{color:var(--navy);}
.lang-switch::after{
  content:'';position:absolute;
  top:3px;width:calc(50% - 3px);height:calc(100% - 6px);
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-radius:20px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 12px var(--glow);
}
html[lang="ar"] .lang-switch::after{transform:translateX(0);right:3px;}
html[lang="en"] .lang-switch::after{transform:translateX(0);left:3px;}
html[lang="ar"] .lang-switch button[data-lang="ar"]{color:var(--navy);}
html[lang="en"] .lang-switch button[data-lang="en"]{color:var(--navy);}
html[lang="ar"] .lang-switch button[data-lang="en"]{color:var(--gray);}
html[lang="en"] .lang-switch button[data-lang="ar"]{color:var(--gray);}

/* HERO */
.hero{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:120px 5% 80px;
}

.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 60% 40%, rgba(29,111,224,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(29,111,224,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255,255,255,.8) 0%, transparent 60%);
}

/* Animated orbs */
.orb{
  position:absolute;border-radius:50%;filter:blur(80px);
  animation:float 10s ease-in-out infinite;
  will-change:transform;
}
.orb1{width:450px;height:450px;background:rgba(29,111,224,0.05);top:-100px;right:-100px;animation-delay:0s;}
.orb2{width:320px;height:320px;background:rgba(29,111,224,.08);bottom:10%;left:5%;animation-delay:3s;}
.orb3{width:220px;height:220px;background:rgba(29,111,224,0.05);top:40%;right:20%;animation-delay:6s;}

@media(max-width:768px){
  .orb1{width:250px;height:250px;right:-60px;top:-60px;}
  .orb2{width:180px;height:180px;}
  .orb3{width:130px;height:130px;}
  .logo-img{height:38px;}
  .footer-logo .logo-img{height:44px;}
}

@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(20px,-30px) scale(1.05);}
  66%{transform:translate(-15px,15px) scale(.97);}
}

.hero-content{
  position:relative;z-index:2;
  max-width:52%;
}
html[lang="ar"] .hero{justify-content:flex-end;}
html[lang="ar"] .hero-content{margin-left:auto;margin-right:0;}
html[lang="en"] .hero{justify-content:flex-start;}
html[lang="en"] .hero-content{margin-right:auto;margin-left:0;}
@media(max-width:900px){
  html[lang="ar"] .hero,
  html[lang="en"] .hero{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:right;
  }
  html[lang="en"] .hero{text-align:left;}
  .hero-content{
    max-width:100% !important;
    margin:0 !important;
    width:100%;
  }
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  border-radius:30px;padding:6px 16px;
  font-size:11px;color:#dbe6f6;
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:16px;
  animation:fadeUp .8s ease both;
  backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
}
.hero-badge::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(29,111,224,.15) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:shine 4s ease-in-out infinite;
  animation-delay:1.5s;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite;box-shadow:0 0 10px var(--gold);}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 0 rgba(29,111,224,.6);}50%{opacity:.7;transform:scale(1.5);box-shadow:0 0 0 8px rgba(29,111,224,0);}}

.hero h1{
  font-size:clamp(24px,2.7vw,38px);
  font-weight:900;line-height:1.2;
  margin-bottom:16px;
  letter-spacing:-0.5px;
  white-space:nowrap;
  color:#ffffff;
  text-shadow:0 2px 24px rgba(6,20,42,.5);
  animation:fadeUp .8s .15s ease both;
}
#headLine1{display:block;white-space:nowrap;}
.hero h1 .line2{
  background:linear-gradient(90deg,#5ea0f5,#8fc0ff,#c9e0ff,#8fc0ff,#5ea0f5);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  display:block;
  white-space:nowrap;
  filter:drop-shadow(0 2px 14px rgba(6,20,42,.4));
  animation:gradientShift 4s linear infinite;
}
@keyframes gradientShift{
  to{background-position:200% center;}
}

.hero p{
  font-size:15px;color:#d6e0ee;line-height:1.7;
  margin-bottom:26px;
  text-shadow:0 1px 12px rgba(6,20,42,.4);
  animation:fadeUp .8s .3s ease both;
  max-width:460px;
}

.hero-btns{
  display:flex;gap:16px;flex-wrap:wrap;
  animation:fadeUp .8s .45s ease both;
}

.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy);padding:15px 32px;
  border-radius:12px;font-size:15px;font-weight:700;
  border:none;cursor:none;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 0 30px rgba(29,111,224,.3),inset 0 1px 0 rgba(255,255,255,.3);
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  position:relative;overflow:hidden;
  font-family:inherit;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--gold2),var(--gold3));
  opacity:0;transition:opacity .35s;
}
.btn-primary span{position:relative;z-index:1;}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 45px rgba(29,111,224,.55);}
.btn-primary:hover::before{opacity:1;}

.btn-secondary{
  background:rgba(255,255,255,.10);
  color:#ffffff;padding:15px 32px;
  border-radius:12px;font-size:15px;font-weight:700;
  border:1.5px solid rgba(255,255,255,.45);
  cursor:none;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  backdrop-filter:blur(10px);
  font-family:inherit;
  position:relative;overflow:hidden;
}
.btn-secondary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(29,111,224,.15),rgba(29,111,224,.05));
  opacity:0;transition:opacity .35s;
}
.btn-secondary span{position:relative;z-index:1;}
.btn-secondary:hover{border-color:#fff;background:rgba(255,255,255,.18);transform:translateY(-3px) scale(1.02);box-shadow:0 10px 30px rgba(6,20,42,.3);}
.btn-secondary:hover::before{opacity:1;}


.hero-visual{
  position:absolute;left:5%;top:50%;
  transform:translateY(-50%);
  width:min(380px,36vw);
  height:480px;
  z-index:1;
}
html[lang="ar"] .hero-visual{left:5%;right:auto;}
html[lang="en"] .hero-visual{left:auto;right:5%;}

@media(max-width:900px){
  .hero-visual{
    position:relative;
    left:auto;right:auto;
    top:auto;
    transform:none;
    width:100%;
    height:auto;
    display:flex;
    flex-direction:row;
    gap:10px;
    margin-top:24px;
  }
  .fc1,.fc2,.fc3{
    position:relative;
    top:auto;bottom:auto;
    left:auto;right:auto;
    transform:none;
    flex:1;
    min-width:0;
    width:auto;
  }
}
/* Floating cards */
.float-card{
  background:rgba(255,255,255,.7);
  border:1px solid var(--border);
  border-radius:18px;padding:22px;
  backdrop-filter:blur(20px);
  position:absolute;
  box-shadow:0 25px 70px rgba(11,30,56,.12),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.fc1{top:5%;right:0;width:200px;}
.fc2{top:38%;left:0;width:190px;}
.fc3{bottom:5%;right:10%;width:185px;}
html[lang="en"] .fc1{top:5%;left:0;right:auto;}
html[lang="en"] .fc2{top:38%;right:0;left:auto;}
html[lang="en"] .fc3{bottom:5%;left:10%;right:auto;}

.fc-title{font-size:10px;color:var(--gold);letter-spacing:1.5px;margin-bottom:10px;font-weight:700;font-family:'Orbitron',sans-serif;}
.fc-val{font-size:30px;font-weight:900;color:var(--white);font-family:'Orbitron',sans-serif;}
.fc-sub{font-size:11px;color:var(--gray);margin-top:4px;}
.fc-bar{height:4px;background:rgba(29,111,224,.15);border-radius:2px;margin-top:12px;overflow:hidden;}
.fc-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:2px;box-shadow:0 0 8px var(--gold);width:var(--w,70%);}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeLeft{from{opacity:0;transform:translate(-30px,-50%);}to{opacity:1;transform:translate(0,-50%);}}
@keyframes fadeRight{from{opacity:0;transform:translate(30px,-50%);}to{opacity:1;transform:translate(0,-50%);}}

/* STATS */
.stats{
  padding:60px 5%;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:40px;position:relative;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.4),transparent);
}
.stat{text-align:center;position:relative;}
.stat:not(:last-child)::after{
  content:'';position:absolute;top:20%;height:60%;width:1px;
  background:linear-gradient(180deg,transparent,var(--border),transparent);
}
html[lang="ar"] .stat:not(:last-child)::after{left:-20px;}
html[lang="en"] .stat:not(:last-child)::after{right:-20px;}
.stat-num{
  font-family:'Orbitron',sans-serif;
  font-size:clamp(30px,4vw,52px);font-weight:700;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  display:block;margin-bottom:8px;
  text-shadow:0 0 30px rgba(29,111,224,.2);
}
.stat-label{font-size:13px;color:var(--gray);letter-spacing:.5px;}

/* SECTIONS COMMON */
section{padding:110px 5%;position:relative;z-index:1;}
.section-tag{
  font-size:11px;color:var(--gold);letter-spacing:3px;
  text-transform:uppercase;font-weight:700;
  margin-bottom:18px;display:flex;align-items:center;gap:12px;
  font-family:'Orbitron',sans-serif;
}
.section-tag::before{content:'';width:30px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold));}
.section-title{font-size:clamp(30px,4.2vw,52px);font-weight:900;line-height:1.15;margin-bottom:18px;}
.section-title .accent{
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold3));
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradientShift 5s linear infinite;
}
.section-sub{font-size:16px;color:var(--gray);line-height:1.8;max-width:580px;}

/* SERVICES */
#services{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 50%,var(--navy) 100%);}
.services-head{text-align:center;margin-bottom:64px;}
.services-head .section-tag{justify-content:center;}
.services-head .section-tag::before{content:none;}
.services-head .section-sub{margin:0 auto;}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:24px;
}

.service-card{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:22px;padding:36px 32px;
  position:relative;overflow:hidden;
  transition:all .5s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 4px 20px rgba(11,30,56,.05);
  transform-style:preserve-3d;
}
.service-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),rgba(29,111,224,.12),transparent 60%);
  opacity:0;transition:opacity .4s;
  pointer-events:none;
}
.service-card::after{
  content:'';position:absolute;inset:-1px;border-radius:22px;
  background:linear-gradient(135deg,rgba(29,111,224,.5),transparent 30%,transparent 70%,rgba(29,111,224,.3));
  opacity:0;transition:opacity .4s;
  pointer-events:none;z-index:-1;
}
.service-card:hover{
  transform:translateY(-10px);
  border-color:rgba(29,111,224,.4);
  box-shadow:0 30px 70px rgba(11,30,56,.12),0 0 0 1px rgba(29,111,224,.2),inset 0 1px 0 rgba(255,255,255,.05);
}
.service-card:hover::before{opacity:1;}

.sc-icon{
  width:64px;height:64px;
  background:linear-gradient(135deg,rgba(29,111,224,.18),rgba(29,111,224,.05));
  border:1px solid rgba(29,111,224,.3);
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;margin-bottom:24px;
  transition:all .5s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.service-card:hover .sc-icon{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 10px 30px rgba(29,111,224,.5),inset 0 1px 0 rgba(255,255,255,.4);
  transform:rotate(-8deg) scale(1.08);
}

.sc-title{font-size:20px;font-weight:700;margin-bottom:12px;line-height:1.35;}
.sc-desc{font-size:14px;color:var(--gray);line-height:1.8;margin-bottom:20px;}
.sc-tags{display:flex;flex-wrap:wrap;gap:8px;}
.sc-tag{
  font-size:11px;color:var(--gold2);
  background:rgba(29,111,224,.08);
  border:1px solid rgba(29,111,224,.2);
  border-radius:6px;padding:4px 10px;
  transition:all .3s;
}
.service-card:hover .sc-tag{background:rgba(29,111,224,.14);border-color:rgba(29,111,224,.35);}

/* PORTFOLIO */
#portfolio{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);
}
.portfolio-head{margin-bottom:56px;}
.portfolio-filter{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;
}
.pf-btn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--gray);border-radius:10px;
  padding:9px 22px;font-family:inherit;
  font-size:13px;font-weight:500;
  cursor:none;transition:all .35s cubic-bezier(.2,.8,.2,1);
  position:relative;overflow:hidden;
}
.pf-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(29,111,224,.15),rgba(29,111,224,.05));
  opacity:0;transition:opacity .3s;
}
.pf-btn span{position:relative;z-index:1;}
.pf-btn.active,.pf-btn:hover{
  border-color:var(--gold);color:var(--gold);
  transform:translateY(-2px);
}
.pf-btn.active::before,.pf-btn:hover::before{opacity:1;}

.portfolio-carousel{
  position:relative;
  margin-top:40px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.portfolio-grid{
  display:flex;
  gap:24px;
  width:max-content;
  padding:8px 4px 20px;
  animation:portfolioMarquee 55s linear infinite;
}
.portfolio-carousel:hover .portfolio-grid{animation-play-state:paused;}
.portfolio-carousel.paused .portfolio-grid{animation-play-state:paused;}
.portfolio-grid .portfolio-card{
  flex:0 0 340px;
}
@keyframes portfolioMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
html[lang="ar"] .portfolio-grid{animation-name:portfolioMarqueeRTL;}
@keyframes portfolioMarqueeRTL{
  from{transform:translateX(0);}
  to{transform:translateX(50%);}
}
@media(max-width:400px){
  .portfolio-grid .portfolio-card{flex:0 0 85vw;}
}
.carousel-arrow{
  position:absolute;top:42%;transform:translateY(-50%);
  z-index:5;
  width:48px;height:48px;border-radius:50%;
  background:#fff;
  border:1px solid var(--border);
  color:var(--blue);
  font-size:20px;cursor:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 22px rgba(11,30,56,.12);
  transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.carousel-arrow:hover{
  background:var(--blue);color:#fff;border-color:var(--blue);
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 10px 28px rgba(29,111,224,.35);
}
html[lang="ar"] .carousel-prev{right:-6px;}
html[lang="ar"] .carousel-next{left:-6px;}
html[lang="en"] .carousel-prev{left:-6px;}
html[lang="en"] .carousel-next{right:-6px;}
@media(max-width:768px){
  .carousel-arrow{width:40px;height:40px;font-size:17px;}
  html[lang="ar"] .carousel-prev,html[lang="en"] .carousel-next{right:auto;}
}
.portfolio-card{
  background:#ffffff;
  box-shadow:0 4px 20px rgba(11,30,56,.05);
  border:1px solid var(--border);
  border-radius:22px;overflow:hidden;
  transition:all .5s cubic-bezier(.2,.8,.2,1);
  position:relative;
  backdrop-filter:blur(10px);
}
.portfolio-card:hover{
  transform:translateY(-8px);
  border-color:rgba(29,111,224,.4);
  box-shadow:0 30px 60px rgba(11,30,56,.12);
}

.pc-thumb{
  height:210px;
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:64px;
  transition:transform .6s ease;
}
.portfolio-card:hover .pc-thumb{transform:scale(1.05);}
.pc-thumb::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(29,111,224,.1) 0%,transparent 40%),
    radial-gradient(circle at 80% 80%,rgba(255,255,255,.05) 0%,transparent 40%);
}
.pc-thumb-supermarket{background:linear-gradient(135deg,#eef4fd,#1d6fe0);}
.pc-thumb-cafe{background:linear-gradient(135deg,#1a1206,#3d2b0f);}
.pc-thumb-erp{background:linear-gradient(135deg,#ffffff,#eef4fd);}
.pc-thumb-app{background:linear-gradient(135deg,#f7f9fc,#eef4fd);}
.pc-thumb-icon{filter:drop-shadow(0 4px 20px rgba(29,111,224,.4));z-index:1;transition:transform .5s;}
.portfolio-card:hover .pc-thumb-icon{transform:scale(1.15) rotate(-6deg);}

/* Real project image as the card thumbnail */
.pc-thumb-hasimg{background:#0b1e38;}
.pc-thumb-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  transition:transform .6s ease;
}
.portfolio-card:hover .pc-thumb-img{transform:scale(1.08);}
/* keep the decorative gradient dots off the photo */
.pc-thumb-hasimg::before{display:none;}

.pc-overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(255,255,255,.95) 0%,rgba(255,255,255,.5) 50%,transparent 100%);
  opacity:0;transition:opacity .35s;
  display:flex;align-items:flex-end;padding:24px;
}
/* darker overlay when the thumb is a real photo */
.pc-thumb-hasimg .pc-overlay{
  background:linear-gradient(to top,rgba(6,20,42,.85) 0%,rgba(6,20,42,.35) 55%,transparent 100%);
}
.portfolio-card:hover .pc-overlay{opacity:1;}
.pc-link{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy);
  padding:10px 22px;border-radius:10px;
  font-size:13px;font-weight:700;text-decoration:none;
  cursor:none;
  box-shadow:0 4px 20px rgba(29,111,224,.4);
  transform:translateY(20px);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.portfolio-card:hover .pc-link{transform:translateY(0);}

.pc-body{padding:26px;}
.pc-cat{font-size:11px;color:var(--gold);letter-spacing:2px;margin-bottom:10px;font-family:'Orbitron',sans-serif;font-weight:700;}
.pc-title{font-size:18px;font-weight:700;margin-bottom:10px;}
.pc-desc{font-size:13px;color:var(--gray);line-height:1.7;}

/* ABOUT */
#about{background:var(--navy);}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;
}
.about-visual{position:relative;perspective:1000px;}
.about-main-card{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:26px;padding:42px;
  position:relative;
  box-shadow:0 50px 100px rgba(11,30,56,.12),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(20px);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.about-main-card:hover{transform:rotateY(2deg) rotateX(-2deg);}
.about-badge-float{
  position:absolute;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy);
  border-radius:16px;padding:14px 20px;
  font-weight:700;font-size:13px;
  box-shadow:0 14px 40px rgba(29,111,224,.4);
  animation:floatCard 5s ease-in-out infinite;
}
.abf1{top:-22px;left:-22px;animation-delay:0s;}
.abf2{bottom:-22px;right:-22px;animation-delay:2.5s;}

.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px;}
.tech-item{
  background:rgba(29,111,224,.05);
  border:1px solid rgba(29,111,224,.15);
  border-radius:12px;padding:14px;
  text-align:center;font-size:12px;
  color:var(--gray);transition:all .35s cubic-bezier(.2,.8,.2,1);
  cursor:none;
}
.tech-item:hover{
  border-color:var(--gold);color:var(--gold2);
  background:rgba(29,111,224,.1);
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 8px 20px rgba(29,111,224,.15);
}
.tech-item .ti{font-size:22px;margin-bottom:6px;display:block;transition:transform .4s;}
.tech-item:hover .ti{transform:scale(1.2) rotate(-8deg);}

.about-content .section-sub{margin-bottom:32px;}
.about-features{display:flex;flex-direction:column;gap:18px;}
.af-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:22px;
  background:rgba(255,255,255,.5);
  border:1px solid var(--border);
  border-radius:16px;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  backdrop-filter:blur(10px);
}
.af-item:hover{
  border-color:rgba(29,111,224,.4);
  background:rgba(255,255,255,.75);
  box-shadow:0 14px 30px rgba(11,30,56,.10);
}
html[lang="ar"] .af-item:hover{transform:translateX(-6px);}
html[lang="en"] .af-item:hover{transform:translateX(6px);}
.af-icon{
  width:46px;height:46px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(29,111,224,.18),rgba(29,111,224,.05));
  border:1px solid rgba(29,111,224,.3);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:22px;
  transition:all .4s;
}
.af-item:hover .af-icon{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  transform:rotate(-8deg);
}
.af-title{font-size:15px;font-weight:700;margin-bottom:5px;}
.af-desc{font-size:13px;color:var(--gray);line-height:1.6;}

/* CLIENTS */
#clients{background:var(--navy2);}
.clients-head{text-align:center;margin-bottom:56px;}
.clients-head .section-tag{justify-content:center;}
.clients-head .section-tag::before{content:none;}
.clients-head .section-sub{margin:0 auto;}
.clients-marquee{
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  padding:10px 0;
}
.clients-track{
  display:flex;
  gap:20px;
  width:max-content;
  animation:clientsMarquee 40s linear infinite;
}
.clients-marquee:hover .clients-track{animation-play-state:paused;}
.clients-track .client-card{flex:0 0 200px;}
@keyframes clientsMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
/* RTL: scroll the other way */
html[lang="ar"] .clients-track{animation-name:clientsMarqueeRTL;}
@keyframes clientsMarqueeRTL{
  from{transform:translateX(0);}
  to{transform:translateX(50%);}
}
.client-card{
  background:rgba(255,255,255,.6);
  border:1px solid var(--border);
  border-radius:18px;padding:30px 20px;
  text-align:center;transition:all .35s cubic-bezier(.2,.8,.2,1);
  backdrop-filter:blur(10px);
}
.client-card:hover{
  border-color:rgba(29,111,224,.4);
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 16px 40px rgba(11,30,56,.13);
  background:rgba(255,255,255,.85);
}
.cc-icon{font-size:38px;margin-bottom:14px;display:block;transition:transform .5s;}
.client-card:hover .cc-icon{transform:scale(1.18) rotate(-10deg);}
.cc-name{font-size:14px;font-weight:700;margin-bottom:4px;}
.cc-type{font-size:12px;color:var(--gray);}

/* TESTIMONIALS */
.testimonials{padding:80px 5%;background:var(--navy);}
.test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:24px;margin-top:48px;}
.test-card{
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.5));
  border:1px solid var(--border);
  border-radius:22px;padding:34px;
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
}
.test-card::before{
  content:'"';
  position:absolute;top:-30px;font-size:180px;
  font-family:Georgia,serif;color:rgba(29,111,224,.06);
  line-height:1;pointer-events:none;
}
html[lang="ar"] .test-card::before{right:18px;}
html[lang="en"] .test-card::before{left:18px;}
.test-card:hover{
  border-color:rgba(29,111,224,.35);
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(11,30,56,.13);
}
.stars{color:var(--gold);font-size:14px;margin-bottom:16px;letter-spacing:2px;text-shadow:0 0 10px rgba(29,111,224,.3);}
.test-text{font-size:14px;color:var(--gray);line-height:1.85;margin-bottom:22px;font-style:italic;position:relative;z-index:1;}
.test-author{display:flex;align-items:center;gap:12px;}
.ta-avatar{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--navy);font-weight:700;
  box-shadow:0 6px 20px rgba(29,111,224,.3);
  font-family:'Orbitron',sans-serif;
}
.ta-name{font-size:14px;font-weight:700;}
.ta-role{font-size:12px;color:var(--gray);}

/* CONTACT */
#contact{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 50%,var(--navy) 100%);
  position:relative;
}
#contact::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 30% 30%,rgba(29,111,224,.08) 0%,transparent 40%);
  pointer-events:none;
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;position:relative;z-index:1;}
.contact-info{display:flex;flex-direction:column;gap:18px;margin-top:32px;}
.ci-item{
  display:flex;gap:16px;align-items:center;
  padding:20px 24px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--border);
  border-radius:16px;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  backdrop-filter:blur(10px);
}
.ci-item:hover{
  border-color:rgba(29,111,224,.4);
  background:rgba(255,255,255,.85);
  box-shadow:0 10px 30px rgba(11,30,56,.10);
}
.ci-icon{
  width:50px;height:50px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-size:22px;color:var(--navy);
  flex-shrink:0;
  box-shadow:0 8px 20px rgba(29,111,224,.3);
  transition:transform .4s;
}
.ci-item:hover .ci-icon{transform:rotate(-8deg) scale(1.05);}
.ci-label{font-size:12px;color:var(--gray);margin-bottom:3px;}
.ci-val{font-size:15px;font-weight:700;}

.contact-form{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:26px;padding:42px;
  backdrop-filter:blur(20px);
  box-shadow:0 30px 70px rgba(11,30,56,.08);
}
.form-title{font-size:22px;font-weight:700;margin-bottom:28px;}
.form-group{margin-bottom:20px;}
.form-label{font-size:13px;color:var(--gray);margin-bottom:8px;display:block;}
.form-input,.form-textarea{
  width:100%;
  background:#f7f9fc;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
  font-family:inherit;
  font-size:14px;color:var(--white);
  outline:none;transition:all .3s;
}
.form-input:focus,.form-textarea:focus{
  border-color:var(--gold);
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 3px rgba(29,111,224,.1);
}
.form-textarea{resize:vertical;min-height:120px;}
.form-input::placeholder,.form-textarea::placeholder{color:#9aa4b5;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-submit{
  width:100%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy);border:none;border-radius:12px;
  padding:16px;font-family:inherit;
  font-size:16px;font-weight:700;cursor:none;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 30px rgba(29,111,224,.2),inset 0 1px 0 rgba(255,255,255,.3);
  position:relative;overflow:hidden;
}
.form-submit::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--gold2),var(--gold3));
  opacity:0;transition:opacity .35s;
}
.form-submit span{position:relative;z-index:1;}
.form-submit:hover{transform:translateY(-3px);box-shadow:0 14px 45px rgba(29,111,224,.5);}
.form-submit:hover::before{opacity:1;}

/* FOOTER */
footer{
  background:var(--navy2);
  border-top:1px solid var(--border);
  padding:60px 5% 30px;
  position:relative;
}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px;margin-bottom:48px;
}
.footer-brand .logo{margin-bottom:16px;}
.footer-brand p{font-size:13px;color:var(--gray);line-height:1.8;}
.footer-col h4{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:20px;font-family:'Orbitron',sans-serif;letter-spacing:1px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:13px;color:var(--gray);text-decoration:none;transition:all .25s;display:inline-block;}
.footer-col a:hover{color:var(--gold2);transform:translateX(4px);}
html[lang="ar"] .footer-col a:hover{transform:translateX(-4px);}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--gray);flex-wrap:wrap;gap:12px;
}
.social-links{display:flex;gap:10px;}
.social-link{
  width:40px;height:40px;
  background:var(--blue);
  border:1px solid var(--blue);
  border-radius:10px;display:flex;align-items:center;
  justify-content:center;
  color:#ffffff;
  text-decoration:none;transition:all .35s cubic-bezier(.2,.8,.2,1);
  cursor:none;
}
.social-link svg{display:block;}
.social-link:hover{
  background:var(--blue2);
  border-color:var(--blue2);
  color:#fff;
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 8px 20px rgba(29,111,224,.35);
}
/* ===== brand-coloured social icons (each in its platform's colour) =====
   Scoped under .social-links so these win over the generic ".footer-col a"
   rules (which otherwise force grey colour + inline-block). */
.social-links .social-link{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;border:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,filter .3s;
}
.social-links .social-link svg{width:20px;height:20px;fill:#fff;display:block;}
.social-links .social-link--fb{background:#1877F2;}
.social-links .social-link--ig{background:radial-gradient(circle at 28% 100%,#feda75 0%,#fa7e1e 22%,#d62976 46%,#962fbf 70%,#4f5bd5 100%);}
.social-links .social-link--in{background:#0A66C2;}
.social-links .social-link--wa{background:#25D366;}
.social-links .social-link:hover{transform:translateY(-4px) scale(1.08);color:#fff;filter:brightness(1.05);}
.social-links .social-link--fb:hover{box-shadow:0 10px 24px rgba(24,119,242,.5);}
.social-links .social-link--ig:hover{box-shadow:0 10px 24px rgba(214,41,118,.5);}
.social-links .social-link--in:hover{box-shadow:0 10px 24px rgba(10,102,194,.5);}
.social-links .social-link--wa:hover{box-shadow:0 10px 24px rgba(37,211,102,.55);}

/* SCROLL ANIMATIONS */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal-left.visible{opacity:1;transform:translateY(0);}
.reveal-right{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal-right.visible{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal-scale.visible{opacity:1;transform:scale(1);}

/* Prevent any section from causing horizontal scroll */
section{overflow-x:clip;}

/* Stagger delays */
.services-grid .service-card:nth-child(1){transition-delay:.05s;}
.services-grid .service-card:nth-child(2){transition-delay:.1s;}
.services-grid .service-card:nth-child(3){transition-delay:.15s;}
.services-grid .service-card:nth-child(4){transition-delay:.2s;}
.services-grid .service-card:nth-child(5){transition-delay:.25s;}
.services-grid .service-card:nth-child(6){transition-delay:.3s;}
.clients-grid .client-card:nth-child(1){transition-delay:.05s;}
.clients-grid .client-card:nth-child(2){transition-delay:.1s;}
.clients-grid .client-card:nth-child(3){transition-delay:.15s;}
.clients-grid .client-card:nth-child(4){transition-delay:.2s;}
.clients-grid .client-card:nth-child(5){transition-delay:.25s;}
.clients-grid .client-card:nth-child(6){transition-delay:.3s;}

/* MOBILE NAV */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:none;padding:6px;}
.hamburger span{width:24px;height:2px;background:var(--gold);border-radius:2px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

.nav-right{display:flex;align-items:center;gap:18px;}

@media(max-width:900px){
  .hamburger{display:flex;}
  .nav-links{
    position:fixed;top:72px;right:0;left:0;
    background:rgba(255,255,255,.98);
    flex-direction:column;padding:32px;gap:24px;
    transform:translateY(-100%);opacity:0;
    transition:all .4s cubic-bezier(.2,.8,.2,1);pointer-events:none;
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
  }
  .nav-links.open{transform:translateY(0);opacity:1;pointer-events:all;}
  .stats{grid-template-columns:repeat(2,1fr);gap:30px;}
  .stat:not(:last-child)::after{display:none;}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:50px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px;}
  html[lang="ar"] .hero,
  html[lang="en"] .hero{
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    padding-top:100px;
  }
  html[lang="en"] .hero{align-items:flex-start;}
  .hero-content{
    max-width:100%!important;
    margin:0!important;
    width:100%;
  }
  .hero-visual{
    position:relative;
    left:auto;right:auto;
    top:auto;transform:none;
    width:100%;height:auto;
    display:flex;flex-direction:row;
    gap:10px;margin-top:24px;
  }
  .fc1,.fc2,.fc3{
    position:relative;
    top:auto;bottom:auto;
    left:auto;right:auto;
    transform:none;
    flex:1;min-width:0;width:auto;
  }
}

@media(max-width:600px){
  section{padding:80px 5%;}
  .stats{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 22px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-col h4{margin-bottom:14px;}
  .form-row{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
  .contact-form{padding:30px;}
  .about-main-card{padding:30px;}
}

/* ===== HERO SLIDER ===== */
.hero-slider{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.hero-slider{background:#06142a;}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .85s ease;
  background:#06142a;
}
.hero-slide.active{
  opacity:1; z-index:2;
}
.hero-slide.leaving{
  opacity:0; z-index:1;
}
.hero-slide img,
.hero-slide video{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
/* Slide set to "show whole video": no cropping, letterboxed on a dark ground */
.hero-slide.fit-contain{background:#000;}
.hero-slide.fit-contain video{object-fit:contain;}
/* ===== HERO SLIDER OVERLAY — CINEMATIC GRADE ===== */
.hero-slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    -100deg,
    rgba(6,20,42,.88) 0%,
    rgba(6,20,42,.72) 28%,
    rgba(6,20,42,.42) 52%,
    rgba(6,20,42,.14) 75%,
    rgba(6,20,42,.05) 100%
  );
}
/* gentle depth at edges */
.hero-slide-overlay::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,20,42,.25) 0%,transparent 22%,transparent 80%,rgba(6,20,42,.30) 100%);
}

/* slide content label (service name) */
.slide-service-label{
  position:absolute;
  font-family:'Orbitron',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:3px;
  color:#eaf1fb;text-transform:uppercase;
  padding:6px 4px;
  background:transparent;
  border:none;
  text-shadow:0 1px 10px rgba(6,20,42,.6);
  top:14px;
}
html[lang="ar"] .slide-service-label{right:0;}
html[lang="en"] .slide-service-label{left:0;}

/* Per-slide image positioning — hide watermark text, focus subject */
.hero-slide[data-index="0"] img{ object-position: center 35%; }  /* developer — show screens */
.hero-slide[data-index="1"] img{ object-position: center 40%; }  /* team — show faces */
.hero-slide[data-index="2"] img{ object-position: center 55%; }  /* speedometer — show gauge */
.hero-slide[data-index="3"] img{ object-position: center 50%; }  /* laptop+phone — center */
.hero-slide[data-index="4"] img{ object-position: center 45%; }  /* city network — mid frame */

@keyframes kenburns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.07) translate(-1%,-1%);}
}
@keyframes kenburns2{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.06) translate(1%,-0.5%);}
}
@keyframes kenburns3{
  0%{transform:scale(1.04) translate(-1%,0);}
  100%{transform:scale(1) translate(0.5%,0.5%);}
}
.hero-slide.active img{
  animation:kenburns 9s ease-out forwards;
}
.hero-slide[data-index="1"].active img{ animation:kenburns2 9s ease-out forwards; }
.hero-slide[data-index="2"].active img{ animation:kenburns3 9s ease-out forwards; }
.hero-slide[data-index="3"].active img{ animation:kenburns 10s ease-out forwards; }
.hero-slide[data-index="4"].active img{ animation:kenburns2 8s ease-out forwards; }

/* SLIDER ARROWS */
.slider-arrows{
  position:absolute;bottom:38px;z-index:5;
  display:flex;gap:12px;
}
html[lang="ar"] .slider-arrows{left:5%;}
html[lang="en"] .slider-arrows{right:5%;}

.slider-arrow{
  width:48px;height:48px;border-radius:12px;
  background:rgba(29,111,224,.08);
  border:1.5px solid rgba(29,111,224,.3);
  color:var(--gold);font-size:18px;
  display:flex;align-items:center;justify-content:center;
  cursor:none;
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  backdrop-filter:blur(10px);
}
.slider-arrow:hover{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy);border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(29,111,224,.35);
}

/* SLIDER DOTS */
.slider-dots{
  position:absolute;bottom:42px;z-index:5;
  display:flex;gap:10px;align-items:center;
}
html[lang="ar"] .slider-dots{right:5%;}
html[lang="en"] .slider-dots{left:5%;}

.slider-dot{
  width:28px;height:3px;border-radius:2px;
  background:rgba(29,111,224,.25);
  cursor:none;transition:all .4s cubic-bezier(.2,.8,.2,1);
  position:relative;overflow:hidden;
}
.slider-dot.active{
  width:52px;background:rgba(29,111,224,.4);
}
.slider-dot-fill{
  position:absolute;top:0;left:0;height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  border-radius:2px;
}
.slider-dot.active .slider-dot-fill{
  animation:dotProgress 7s linear forwards;
}
@keyframes dotProgress{from{width:0%;}to{width:100%;}}

/* slide counter */
.slide-counter{
  position:absolute;bottom:48px;
  z-index:5;
  font-family:'Orbitron',sans-serif;
  font-size:12px;color:var(--gray);letter-spacing:2px;
}
html[lang="ar"] .slide-counter{right:calc(5% + 90px);}
html[lang="en"] .slide-counter{left:calc(5% + 90px);}
.slide-counter span{color:var(--gold);font-weight:700;}

/* ===== HERO SLIDER MOBILE ===== */
@media(max-width:768px){
  /* Content wrap — full width, top aligned */
  #heroContentWrap{
    max-width:100% !important;
    padding: 100px 5% 90px !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    gap:20px !important;
    min-height:100svh !important;
  }
  /* Uniform darker scrim so text reads over full-width image on mobile */
  .hero-slide-overlay{
    background:linear-gradient(180deg,rgba(6,20,42,.62) 0%,rgba(6,20,42,.78) 100%) !important;
  }

  /* Text block — full width */
  .hero-content,
  #heroTextContent{
    max-width:100% !important;
    width:100% !important;
  }
  #heroContentWrap{ padding:92px 6% 66px !important; }

  /* Shrink h1 drastically on mobile */
  .hero h1,
  #slideHeading{
    font-size:clamp(19px, 5.2vw, 28px) !important;
    line-height:1.25 !important;
    margin-bottom:10px !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:break-word !important;
    width:100% !important;
    overflow:hidden !important;
  }
  .hero h1 #headLine1,
  .hero h1 .line2{ white-space:normal !important; }

  /* Description font */
  .hero p,
  #slideDesc{
    font-size:13px !important;
    line-height:1.65 !important;
    margin-bottom:18px !important;
  }

  /* Badge */
  .hero-badge{
    font-size:9px !important;
    padding:4px 12px !important;
    margin-bottom:12px !important;
  }

  /* CTA buttons stacked */
  .hero-btns{
    flex-direction:column !important;
    gap:12px !important;
    width:100% !important;
  }
  .btn-primary,.btn-secondary{
    width:100% !important;
    text-align:center !important;
    justify-content:center !important;
    padding:14px 20px !important;
    font-size:14px !important;
  }

  /* Service label */
  .slide-service-label{
    font-size:8px !important;
    letter-spacing:2px !important;
    padding:4px 10px !important;
  }

  /* Dots & arrows bottom controls */
  .slider-arrows{bottom:18px;}
  .slider-dots{bottom:22px;}
  .slide-counter{
    bottom:26px;
    font-size:10px;
  }
  html[lang="ar"] .slide-counter{right:calc(5% + 70px);}
  html[lang="en"] .slide-counter{left:calc(5% + 70px);}

  /* Arrow size */
  .slider-arrow{
    width:38px;height:38px;font-size:14px;border-radius:8px;
  }
}

/* slide-in text animation */
@keyframes slideInRight{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px);}to{opacity:1;transform:translateX(0);}}
@keyframes slideInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

.hero-slide.active ~ .hero-content .slide-title,
.slide-active-text .slide-title{
  animation:slideInUp .8s .1s both;
}

/* SELECTION */
::selection{background:var(--gold);color:var(--navy);}

/* WHATSAPP FLOAT */
.whatsapp-float{
  position:fixed;bottom:32px;z-index:500;
  width:60px;height:60px;
  background:linear-gradient(135deg,#25d366,#128c7e);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;
  box-shadow:0 8px 28px rgba(37,211,102,.45);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  animation:waPulse 2.5s ease-in-out infinite;
}
html[lang="ar"] .whatsapp-float{left:28px;}
html[lang="en"] .whatsapp-float{right:28px;}
.whatsapp-float:hover{transform:scale(1.12) translateY(-4px);box-shadow:0 16px 40px rgba(37,211,102,.6);}
@keyframes waPulse{
  0%,100%{box-shadow:0 8px 28px rgba(37,211,102,.45),0 0 0 0 rgba(37,211,102,.4);}
  50%{box-shadow:0 8px 28px rgba(37,211,102,.45),0 0 0 14px rgba(37,211,102,0);}
}

/* WHY US SECTION */
#why-us{background:linear-gradient(180deg,var(--navy2) 0%,var(--navy) 100%);}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
@media(max-width:900px){.why-grid{grid-template-columns:1fr;}}
.why-process{display:flex;flex-direction:column;gap:0;}
.wp-step{
  display:flex;gap:20px;align-items:flex-start;
  padding:24px 0;
  border-bottom:1px solid var(--border);
  position:relative;
}
.wp-step:last-child{border-bottom:none;}
.wp-num{
  font-family:'Orbitron',sans-serif;
  font-size:32px;font-weight:900;
  color:rgba(29,111,224,.18);
  min-width:52px;
  line-height:1;
  transition:color .3s;
}
.wp-step:hover .wp-num{color:var(--gold);}
.wp-title{font-size:16px;font-weight:700;margin-bottom:6px;}
.wp-desc{font-size:13px;color:var(--gray);line-height:1.7;}
.why-values{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.wv-card{
  background:#ffffff;
  box-shadow:0 4px 18px rgba(11,30,56,.05);
  border:1px solid var(--border);
  border-radius:18px;padding:26px 22px;
  text-align:center;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  backdrop-filter:blur(10px);
}
.wv-card:hover{
  border-color:rgba(29,111,224,.4);
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(11,30,56,.12);
}
.wv-icon{font-size:34px;margin-bottom:12px;display:block;transition:transform .4s;}
.wv-card:hover .wv-icon{transform:scale(1.2) rotate(-8deg);}
.wv-title{font-size:15px;font-weight:700;margin-bottom:6px;}
.wv-desc{font-size:12px;color:var(--gray);line-height:1.65;}

/* NEW PORTFOLIO THUMBS */
.pc-thumb-school{background:linear-gradient(135deg,#f7f9fc,#eef4fd);}
.pc-thumb-gym{background:linear-gradient(135deg,#1a0c0c,#3d1a10);}
.pc-thumb-factory{background:linear-gradient(135deg,#f7f9fc,#f7f9fc);}
.pc-thumb-hospital{background:linear-gradient(135deg,#f7f9fc,#eef4fd);}


/* SCROLLBAR */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--navy);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),var(--blue));border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold2),var(--gold));}
/* ===== FORM ALERTS & VALIDATION (server-backed contact form) ===== */
.form-alert{
  border-radius:12px;
  padding:14px 18px;
  font-size:14px;font-weight:500;
  margin-bottom:20px;
  line-height:1.6;
}
.form-alert-success{
  background:rgba(42,157,92,.12);
  border:1px solid rgba(42,157,92,.45);
  color:#5fd39a;
}
.form-alert-error{
  background:rgba(214,69,69,.1);
  border:1px solid rgba(214,69,69,.4);
  color:#ff8a8a;
}
.form-alert-error:empty{display:none;}
.form-alert-error ul{margin:0;padding-inline-start:18px;list-style:disc;}
.field-error{
  display:block;
  color:#ff8a8a;
  font-size:12px;
  margin-top:6px;
  min-height:0;
}
.field-error:empty{display:none;}
.form-input.input-validation-error,
.form-textarea.input-validation-error{
  border-color:rgba(214,69,69,.6);
  box-shadow:0 0 0 3px rgba(214,69,69,.08);
}

/* ===== PROJECT MEDIA LIGHTBOX ===== */
.project-lightbox{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(3,8,18,0.92);
  backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
  padding:32px;
}
.project-lightbox.open{opacity:1;visibility:visible;}
.pl-inner{
  position:relative;
  width:min(1100px,94vw);
  max-height:88vh;
  transform:scale(.94);
  transition:transform .4s cubic-bezier(.2,.9,.2,1);
  display:flex;align-items:center;justify-content:center;
}
.project-lightbox.open .pl-inner{transform:scale(1);}
.pl-media{
  width:100%;max-height:88vh;display:flex;align-items:center;justify-content:center;
  border-radius:16px;
  box-shadow:0 40px 120px rgba(11,30,56,0.15), 0 0 0 1px rgba(29,111,224,.25);
  overflow:hidden;
}
.pl-media img,.pl-media video{max-height:88vh;}
.pl-close{
  position:absolute;top:-14px;inset-inline-end:-14px;z-index:2;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--navy);border:none;cursor:pointer;
  font-size:28px;line-height:1;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(29,111,224,.45);
  transition:transform .25s ease;
}
.pl-close:hover{transform:rotate(90deg) scale(1.08);}
/* gallery navigation arrows */
.pl-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:24px;cursor:none;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
  transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.pl-nav:hover{background:rgba(255,255,255,.28);transform:translateY(-50%) scale(1.08);}
.pl-prev{inset-inline-start:-26px;}
.pl-next{inset-inline-end:-26px;}
.pl-counter{
  position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:14px;font-weight:600;letter-spacing:1px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  padding:5px 16px;border-radius:20px;
  backdrop-filter:blur(8px);
}
@media(max-width:600px){
  .pl-nav{width:42px;height:42px;font-size:20px;}
  .pl-prev{inset-inline-start:4px;}
  .pl-next{inset-inline-end:4px;}
}
@media(max-width:600px){
  .project-lightbox{padding:16px;}
  .pl-close{top:-8px;inset-inline-end:-8px;width:40px;height:40px;font-size:24px;}
}

/* portfolio card overlay button (media) — match the existing link style */
.pc-overlay button.pc-link{
  font-family:inherit;cursor:none;border:none;
  display:inline-flex;align-items:center;gap:6px;
}

/* ===== CINEMATIC PARALLAX CTA BANNER ===== */
.cta-banner{
  position:relative;
  padding:110px 5%;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  min-height:420px;
}
.cta-banner-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
}
.cta-banner-img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 20s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.15) translate(-2%,-2%);}
}
.cta-banner-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:1;
}
/* if the video has no valid source it collapses; the image behind stays visible */
.cta-banner-video:not([src])[poster]{opacity:1;}
.cta-banner-overlay{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(6,20,42,.82),rgba(6,20,42,.72)),
    radial-gradient(ellipse 80% 70% at 50% 50%,rgba(29,111,224,.25),transparent 70%);
}
.cta-banner-content{
  position:relative;z-index:3;
  max-width:760px;
  color:#fff;
}
.cta-tag{
  display:inline-block;
  font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;
  color:#8fc0ff;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  padding:7px 20px;border-radius:30px;
  margin-bottom:22px;
  backdrop-filter:blur(8px);
}
.cta-banner-title{
  font-size:clamp(28px,4vw,46px);
  font-weight:900;line-height:1.25;
  margin-bottom:18px;
  text-shadow:0 2px 20px rgba(6,20,42,.5);
}
.cta-accent{
  background:linear-gradient(90deg,#5ea0f5,#9fc7ff,#5ea0f5);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradientShift 4s linear infinite;
}
.cta-banner-sub{
  font-size:17px;line-height:1.8;color:#d6e0ee;
  max-width:600px;margin:0 auto 34px;
  text-shadow:0 1px 12px rgba(6,20,42,.4);
}
.cta-banner-stats{
  display:flex;align-items:center;justify-content:center;gap:30px;
  margin-bottom:38px;flex-wrap:wrap;
}
.cbs-item{display:flex;flex-direction:column;align-items:center;gap:4px;}
.cbs-num{
  font-size:34px;font-weight:900;
  background:linear-gradient(135deg,#7fb3ff,#c9e0ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cbs-label{font-size:13px;color:#b8c6db;letter-spacing:1px;}
.cbs-divider{width:1px;height:40px;background:rgba(255,255,255,.2);}
.cta-banner-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#1d6fe0,#1552b0);
  color:#fff;padding:16px 38px;
  border-radius:12px;font-size:16px;font-weight:700;
  text-decoration:none;cursor:none;
  box-shadow:0 12px 40px rgba(29,111,224,.5);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  font-family:inherit;
}
.cta-banner-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 55px rgba(29,111,224,.65);}
@media(max-width:768px){
  .cta-banner{padding:70px 5%;min-height:auto;}
  .cta-banner-stats{gap:18px;}
  .cbs-num{font-size:26px;}
  .cbs-divider{height:30px;}
}
/* =========================================================
   Smart Solutions Technology — Animated Logo (drop-in)
   Paste at the END of wwwroot/css/site.css
   No HTML change needed. Works with the logo-white / logo
   swap because both variants share the same silhouette.
   ========================================================= */

#navbar .logo {
    position: relative;
    display: inline-block;
    overflow: visible;
}

/* entrance reveal + gentle idle float (plays on the visible image) */
#navbar .logo-img {
    animation: sst-reveal 1.1s cubic-bezier(.22,.61,.36,1) both, sst-float 7s ease-in-out 1.2s infinite;
}

@keyframes sst-reveal {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(.96)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes sst-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }
}

/* SHINE — a gloss that rides ONLY on the logo shape (masked by the silhouette) */
#navbar .logo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    -webkit-mask: url(/images/logo.png) center/contain no-repeat;
    mask: url(/images/logo.png) center/contain no-repeat;
    background: linear-gradient(105deg,transparent 34%,rgba(255,255,255,.85) 48%,#fff 50%,rgba(255,255,255,.85) 52%,transparent 66%);
    background-size: 260% 100%;
    background-position: 180% 0;
    animation: sst-shine-in 1.1s cubic-bezier(.22,.61,.36,1) .35s both, sst-shine 6.5s cubic-bezier(.22,.61,.36,1) 2.4s infinite;
}

@keyframes sst-shine-in {
    0% {
        opacity: 0;
        background-position: 180% 0
    }

    100% {
        opacity: 1;
        background-position: -80% 0
    }
}

@keyframes sst-shine {
    0% {
        background-position: 180% 0
    }

    22% {
        background-position: -80% 0
    }

    100% {
        background-position: -80% 0
    }
}

/* NODE — cyan glow that breathes on the mark's node */
#navbar .logo::before {
    content: "";
    position: absolute;
    left: 14.5%;
    top: 27%;
    height: 64%;
    aspect-ratio: 1;
    width: auto;
    transform: translate(-50%,-50%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(150,235,255,.95) 0%, rgba(56,198,255,.5) 26%, rgba(56,198,255,0) 62%);
    animation: sst-node 2.8s ease-in-out 1.6s infinite;
}

@keyframes sst-node {
    0%,100% {
        opacity: .5;
        transform: translate(-50%,-50%) scale(.9)
    }

    50% {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1.28)
    }
}

/* hover lift */
#navbar .logo:hover .logo-img {
    filter: brightness(1.05) drop-shadow(0 6px 16px rgba(28,120,220,.3));
    transition: filter .3s;
}

/* respect reduced-motion */
@media (prefers-reduced-motion:reduce) {
    #navbar .logo-img, #navbar .logo::after, #navbar .logo::before {
        animation: none !important;
    }

    #navbar .logo::after, #navbar .logo::before {
        opacity: 0;
    }
}


/* =====================================================================
   HERO SLIDER — MOBILE LAYOUT (≤768px)
   Media on top in a full-width 16:9 frame (whole video visible),
   text in its own panel underneath — nothing covers the visuals.
   Placed last so it wins over the earlier mobile rules and inline styles.
   ===================================================================== */
@media (max-width:768px){
  .hero{
    min-height:0 !important;
    display:block !important;
    padding:72px 0 0 !important;          /* clear the fixed nav */
    background:#06142a;
  }
  .hero .orb{display:none !important;}  /* decorative blur — costly on phones */

  /* Media frame */
  .hero-slider{
    position:relative !important;
    inset:auto !important;
    width:100%;
    aspect-ratio:16 / 9;
    background:#000;
  }
  @supports not (aspect-ratio: 1 / 1){
    .hero-slider{height:56.25vw;}
  }
  .hero-slide video{object-fit:contain !important;}  /* never crop a video on a phone */
  .hero-slide img{object-fit:cover;}
  .hero-slide.active img{animation:none !important;} /* no Ken Burns zoom in the small frame */

  /* Only a soft fade at the bottom edge, blending into the text panel */
  .hero-slide-overlay{
    background:linear-gradient(180deg, transparent 0%, transparent 62%, rgba(6,20,42,.85) 100%) !important;
  }
  .hero-slide-overlay::after{display:none;}

  /* Text panel */
  #heroContentWrap{
    min-height:0 !important;
    display:block !important;
    padding:22px 6% 30px !important;
    background:#06142a;
    overflow:visible !important;
  }
  #heroTextContent{
    min-height:268px;                      /* keeps the page from jumping between slides */
    display:flex;flex-direction:column;justify-content:flex-start;
  }
  .hero h1,
  #slideHeading{
    font-size:clamp(21px, 6vw, 28px) !important;
    margin-bottom:10px !important;
    overflow:visible !important;
  }
  .hero p,
  #slideDesc{
    font-size:14px !important;
    margin-bottom:20px !important;
    max-width:100% !important;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  }
  .hero-btns{
    flex-direction:row !important;
    margin-top:auto;
  }
  .btn-primary,.btn-secondary{
    flex:1 1 0;
    width:auto !important;
    padding:13px 12px !important;
    font-size:13.5px !important;
  }

  /* Controls sit on the bottom edge of the media frame */
  .slider-arrows{display:none !important;}   /* swipe replaces arrows on touch */
  .slider-dots,
  .slide-counter{
    top:calc(72px + 56.25vw - 26px) !important;
    bottom:auto !important;
  }
  html[lang="en"] .slider-dots{left:6% !important;}
  html[lang="en"] .slide-counter{left:auto !important;right:6% !important;}
  .slide-counter{color:#c9d6ea;}
  .slider-dot{background:rgba(255,255,255,.35);}
  .slider-dot.active{background:rgba(255,255,255,.5);}
}


/* =====================================================================
   PORTFOLIO CAROUSEL — arrows (desktop + mobile)
   ===================================================================== */
.portfolio-stage{position:relative;margin-top:40px;}
.portfolio-stage .portfolio-carousel{margin-top:0;}
.portfolio-carousel.js-marquee .portfolio-grid{animation:none !important;will-change:transform;}
.portfolio-carousel.js-marquee{touch-action:pan-y;}   /* horizontal swipe is ours, vertical scroll stays native */
.portfolio-stage .carousel-arrow{
  top:calc(50% - 6px);
  cursor:pointer;
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.94);
}
.portfolio-stage .carousel-arrow:focus-visible{outline:3px solid rgba(29,111,224,.45);outline-offset:3px;}
html[lang="en"] .portfolio-stage .carousel-prev{left:-22px;right:auto;}
html[lang="en"] .portfolio-stage .carousel-next{right:-22px;left:auto;}
@media (max-width:1100px){
  html[lang="en"] .portfolio-stage .carousel-prev{left:4px;}
  html[lang="en"] .portfolio-stage .carousel-next{right:4px;}
}
@media (max-width:768px){
  .portfolio-stage .carousel-arrow{width:42px;height:42px;top:34%;}   /* over the card image, not the text */
  html[lang="en"] .portfolio-stage .carousel-prev{left:2px;}
  html[lang="en"] .portfolio-stage .carousel-next{right:2px;}
}


/* =====================================================================
   HERO SLIDER ARROWS — clear glass buttons (desktop + mobile)
   ===================================================================== */
.slider-arrow{
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(6,20,42,.25);
}
.slider-arrow:hover{
  background:#fff;color:var(--blue);border-color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(6,20,42,.35);
}
.slider-arrow:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:3px;}

@media (max-width:768px){
  /* Arrows return on phones: one on each side, centred on the video frame */
  .slider-arrows{
    display:flex !important;
    position:absolute;
    top:calc(72px + 28.125vw) !important;   /* nav + half of the 16:9 frame */
    bottom:auto !important;
    left:0 !important;right:0 !important;
    transform:translateY(-50%);
    justify-content:space-between;
    padding:0 10px;
    pointer-events:none;                      /* only the buttons catch taps */
  }
  .slider-arrow{
    pointer-events:auto;
    width:40px;height:40px;
    background:rgba(6,20,42,.45);
    border-color:rgba(255,255,255,.4);
  }
}

/* =====================================================================
   BACK TO TOP
   ===================================================================== */
.back-to-top{
  position:fixed;z-index:499;
  right:34px;bottom:108px;                    /* stacked above the WhatsApp button */
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#0e2440;color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(6,20,42,.3);
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s, background .25s;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--blue, #1d6fe0);transform:translateY(-3px);}
.back-to-top:focus-visible{outline:3px solid rgba(29,111,224,.5);outline-offset:3px;}
@media (max-width:768px){
  .back-to-top{right:36px;bottom:104px;width:44px;height:44px;}
}
/* Desktop: keep the slider arrows clear of the floating WhatsApp button */
@media (min-width:769px){
  html[lang="en"] .slider-arrows{right:calc(5% + 78px);}
}