/* ==== RAHA Valet Parking Services — Premium Styles ==== */
:root{
  --bg:#ffffff;
  --bg-2:#fdf7fa;            /* soft pink-tinted cream */
  --bg-3:#f8eef3;
  --surface:#ffffff;
  --text:#1a1418;
  --muted:#6b6168;
  --line:rgba(26,20,24,.08);
  --gold:#d63384;            /* primary magenta from logo */
  --gold-2:#ec5aa0;          /* lighter accent */
  --gold-deep:#a81e66;       /* deep accent */
  --pink:#f5c7dc;
  --radius:14px;
  --shadow:0 20px 60px rgba(168,30,102,.12);
  --trans:.35s cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans Arabic','Noto Kufi Arabic',sans-serif;
  background:var(--bg);color:var(--text);
  line-height:1.75;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;direction:rtl;
}
h1,h2,h3,h4,h5{font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;font-weight:700;line-height:1.3;letter-spacing:0}
a{color:inherit;text-decoration:none;transition:var(--trans)}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.gold{color:var(--gold);background:linear-gradient(135deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ==== NAV ==== */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 0;transition:var(--trans);
  background:rgba(255,255,255,.75);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
}
#navbar.scrolled{padding:12px 0;background:rgba(255,255,255,.96);border-color:var(--line);box-shadow:0 4px 20px rgba(168,30,102,.06)}
.nav-container{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px}
.logo-img{
  height:54px;width:auto;display:block;
  transition:var(--trans);
}
.logo-img:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(214,51,132,.28)}
.footer-logo{height:60px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14px;font-weight:500;color:#3a2f35;position:relative}
.nav-links a:not(.nav-cta):hover{color:var(--gold)}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:var(--trans)}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#fff !important;padding:10px 22px;border-radius:50px;font-weight:600;
  box-shadow:0 8px 20px rgba(214,51,132,.25);
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(214,51,132,.4)}
.hamburger{display:none;background:none;border:none;cursor:pointer;width:32px;height:26px;position:relative}
.hamburger span{position:absolute;left:0;width:100%;height:2px;background:var(--text);transition:var(--trans)}
.hamburger span:nth-child(1){top:4px}
.hamburger span:nth-child(2){top:12px}
.hamburger span:nth-child(3){top:20px}
.hamburger.active span:nth-child(1){top:12px;transform:rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){top:12px;transform:rotate(-45deg)}

/* ==== BUTTONS ==== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;border-radius:50px;font-weight:600;font-size:15px;
  border:none;cursor:pointer;transition:var(--trans);letter-spacing:.02em;
}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;box-shadow:0 12px 30px rgba(214,51,132,.3)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(214,51,132,.45)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.full{width:100%;justify-content:center}

/* ==== HERO — CINEMATIC DARK ==== */
.hero{
  position:relative;min-height:100vh;overflow:hidden;
  padding:130px 24px 140px;
  background:#0a0508;color:#fff;isolation:isolate;
}

.hero-bg-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) contrast(1.1) brightness(.85);
  pointer-events:none;
}
/* subtle zoom on hero via parent transform (optional) */
@keyframes heroZoom{to{transform:scale(1.1)}}

.hero-bg-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(10,5,8,.25) 0%,rgba(10,5,8,.5) 35%,rgba(10,5,8,.85) 75%,rgba(10,5,8,.95) 100%),
    radial-gradient(ellipse 80% 100% at 90% 50%,rgba(168,30,102,.32),transparent 70%),
    linear-gradient(180deg,rgba(10,5,8,.55) 0%,transparent 30%,rgba(10,5,8,.7) 100%);
}

.hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(10,5,8,.7) 100%);
}

.hero-neon-grid{
  position:absolute;bottom:0;left:0;right:0;height:55%;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(rgba(236,90,160,.25) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,90,160,.25) 1px,transparent 1px);
  background-size:60px 60px;
  transform:perspective(600px) rotateX(65deg);
  transform-origin:bottom;
  mask-image:linear-gradient(180deg,transparent 20%,black 70%,transparent 100%);
  animation:gridMove 12s linear infinite;
  opacity:.6;
}
@keyframes gridMove{from{background-position:0 0}to{background-position:0 60px}}

.hero-beam{
  position:absolute;top:-20%;right:-10%;width:60%;height:140%;z-index:2;
  background:linear-gradient(105deg,transparent 45%,rgba(236,90,160,.18) 50%,transparent 55%);
  filter:blur(40px);
  animation:beamSweep 10s ease-in-out infinite;
  pointer-events:none;
}
@keyframes beamSweep{
  0%,100%{transform:translateX(0) rotate(0deg);opacity:.6}
  50%{transform:translateX(-20%) rotate(5deg);opacity:1}
}

.hero-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero-particles span{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--gold-2);box-shadow:0 0 14px var(--gold-2),0 0 28px var(--gold);
  opacity:0;animation:particle 8s linear infinite;
}
.hero-particles span:nth-child(1){left:10%;animation-delay:0s;animation-duration:7s}
.hero-particles span:nth-child(2){left:20%;animation-delay:1s;animation-duration:9s}
.hero-particles span:nth-child(3){left:30%;animation-delay:2s;animation-duration:8s}
.hero-particles span:nth-child(4){left:42%;animation-delay:.5s;animation-duration:10s}
.hero-particles span:nth-child(5){left:55%;animation-delay:3s;animation-duration:7s}
.hero-particles span:nth-child(6){left:65%;animation-delay:1.5s;animation-duration:9s}
.hero-particles span:nth-child(7){left:75%;animation-delay:2.5s;animation-duration:8s}
.hero-particles span:nth-child(8){left:85%;animation-delay:4s;animation-duration:10s}
.hero-particles span:nth-child(9){left:15%;animation-delay:5s;animation-duration:7s}
.hero-particles span:nth-child(10){left:50%;animation-delay:6s;animation-duration:8s}
.hero-particles span:nth-child(11){left:70%;animation-delay:3.5s;animation-duration:9s}
.hero-particles span:nth-child(12){left:90%;animation-delay:2s;animation-duration:7s}
@keyframes particle{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:1}90%{opacity:1}
  100%{transform:translateY(-20vh) scale(1.5);opacity:0}
}

.hero-ticker{
  position:absolute;top:88px;left:0;right:0;z-index:3;padding:12px 0;
  background:linear-gradient(90deg,transparent,rgba(214,51,132,.15) 20%,rgba(214,51,132,.15) 80%,transparent);
  border-top:1px solid rgba(236,90,160,.2);border-bottom:1px solid rgba(236,90,160,.2);
  overflow:hidden;backdrop-filter:blur(8px);
}
.ticker-track{
  display:flex;gap:40px;white-space:nowrap;
  animation:ticker 35s linear infinite;width:max-content;
}
.ticker-track span{
  display:inline-flex;align-items:center;gap:10px;
  color:#ffc2dd;font-size:14px;font-weight:700;
}
.ticker-track span i{color:var(--gold-2);font-size:12px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* INNER */
.hero-inner{
  position:relative;z-index:4;
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center;
  min-height:calc(100vh - 300px);padding-top:60px;
}

.hero-content{position:relative}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 22px;border-radius:50px;
  background:rgba(236,90,160,.12);border:1px solid rgba(236,90,160,.4);
  color:#ffc2dd;font-size:13px;font-weight:700;
  margin-bottom:32px;backdrop-filter:blur(10px);
}
.hero-eyebrow .dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold-2);
  box-shadow:0 0 0 4px rgba(236,90,160,.3),0 0 20px var(--gold-2);
  animation:pulse 2s infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(236,90,160,0),0 0 30px var(--gold-2)}}

.hero-title{
  font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  font-size:clamp(3rem,7vw,6.5rem);
  line-height:1.1;letter-spacing:-.02em;font-weight:900;
  color:#fff;margin-bottom:32px;
  text-shadow:0 10px 40px rgba(0,0,0,.6),0 0 80px rgba(236,90,160,.2);
}
.hero-title .line{display:block}
.hero-title em{
  font-style:normal;font-weight:900;display:inline-block;
  background:linear-gradient(135deg,#fff 0%,#ffc2dd 30%,var(--gold-2) 60%,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 30px rgba(236,90,160,.5));
}

.hero-sub{
  font-size:clamp(1.1rem,1.3vw,1.25rem);
  color:#e8d4de;max-width:600px;margin:0 0 44px;line-height:1.9;
}

.hero-ctas{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-bottom:48px}
.btn-xl{padding:20px 40px;font-size:16px;font-weight:800;position:relative;overflow:hidden}
.btn-xl::before{
  content:"";position:absolute;inset:-2px;border-radius:50px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold),var(--gold-deep),var(--gold),var(--gold-2));
  background-size:300% 300%;z-index:-1;animation:gradShift 4s linear infinite;
}
@keyframes gradShift{to{background-position:300% 0}}

.btn-play{
  display:inline-flex;align-items:center;gap:14px;
  color:#fff;font-weight:700;font-size:15px;transition:var(--trans);
}
.btn-play .play-icon{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.3);
  display:grid;place-items:center;color:#fff;font-size:14px;
  transition:var(--trans);position:relative;
}
.btn-play .play-icon::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--gold-2);opacity:.6;
  animation:playRing 2s ease-out infinite;
}
@keyframes playRing{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(1.4);opacity:0}
}
.btn-play:hover .play-icon{background:var(--gold);border-color:var(--gold);transform:scale(1.1)}

/* Trust block */
.hero-trust{
  display:inline-flex;align-items:center;gap:18px;
  padding:14px 22px;border-radius:60px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
}
.avatars{display:flex}
.av{
  width:40px;height:40px;border-radius:50%;
  border:3px solid rgba(10,5,8,.8);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;
  box-shadow:0 4px 16px rgba(214,51,132,.4);margin-right:-12px;
}
.av:first-child{margin-right:0}
.av1{background:linear-gradient(135deg,#f4a8c7,#d63384)}
.av2{background:linear-gradient(135deg,#ec5aa0,#a81e66)}
.av3{background:linear-gradient(135deg,#d63384,#7b1548)}
.av4{background:linear-gradient(135deg,var(--gold-deep),var(--text));color:var(--gold-2)}
.trust-text .stars{color:var(--gold-2);font-size:13px;display:flex;align-items:center;gap:6px;margin-bottom:2px}
.trust-text .stars strong{color:#fff;font-size:14px}
.trust-text span{color:#d0bac3;font-size:13px;font-weight:500}

/* SIDE GLASS CARDS */
.hero-side{
  position:relative;display:flex;flex-direction:column;
  justify-content:center;gap:22px;align-items:flex-start;
}
.side-badge{
  display:flex;align-items:center;gap:18px;
  padding:22px 34px 22px 28px;border-radius:80px;
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid rgba(236,90,160,.4);
  backdrop-filter:blur(20px);
  box-shadow:0 25px 70px rgba(168,30,102,.4),inset 0 1px 0 rgba(255,255,255,.15);
  animation:floatY 5s ease-in-out infinite;
}
.side-badge i{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  display:grid;place-items:center;color:#fff;font-size:22px;flex-shrink:0;
  box-shadow:0 8px 26px rgba(236,90,160,.5);
}
.sb-text strong{
  display:block;font-family:'Noto Kufi Arabic',sans-serif;
  font-size:2.3rem;font-weight:900;color:#fff;line-height:1;
  background:linear-gradient(135deg,#fff,#ffc2dd);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sb-text span{color:#d0bac3;font-size:13px;font-weight:600;margin-top:4px;display:block}

.side-card{
  display:flex;align-items:center;gap:16px;
  padding:18px 26px;border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(20px);
  box-shadow:0 16px 40px rgba(0,0,0,.3);
  min-width:280px;animation:floatY 4.5s ease-in-out infinite;
}
.side-card.alt{animation-delay:2s;margin-right:40px}
.sc-icon{
  width:46px;height:46px;border-radius:14px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  display:grid;place-items:center;color:#fff;font-size:18px;flex-shrink:0;
  box-shadow:0 6px 20px rgba(236,90,160,.4);
}
.side-card strong{
  display:block;color:#fff;font-size:16px;font-weight:800;
  font-family:'Noto Kufi Arabic',sans-serif;
}
.side-card span{color:#d0bac3;font-size:12.5px;font-weight:500}
@keyframes floatY{50%{transform:translateY(-12px)}}

/* STATS BAR */
.hero-stats-bar{
  position:absolute;left:24px;right:24px;bottom:40px;z-index:4;
  max-width:1180px;margin:0 auto;padding:28px 40px;
  background:rgba(10,5,8,.55);backdrop-filter:blur(24px);
  border:1px solid rgba(236,90,160,.25);border-radius:20px;
  display:flex;justify-content:space-around;align-items:center;gap:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-stats-bar>div:not(.divider){display:flex;flex-direction:column;align-items:center;flex:1}
.hero-stats-bar strong{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-size:clamp(1.8rem,2.6vw,2.4rem);
  font-weight:900;display:flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#fff,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:-.02em;
}
.hero-stats-bar strong i{font-size:.7em;color:var(--gold-2);-webkit-text-fill-color:var(--gold-2)}
.hero-stats-bar span{color:#d0bac3;font-size:12px;margin-top:6px;font-weight:600}
.hero-stats-bar .divider{width:1px;height:44px;background:linear-gradient(180deg,transparent,rgba(236,90,160,.45),transparent)}

.scroll-down{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#ffc2dd;font-size:11px;letter-spacing:.25em;
  z-index:5;font-weight:600;
}
.scroll-line{
  width:1px;height:40px;background:linear-gradient(180deg,var(--gold-2),transparent);
  position:relative;overflow:hidden;
}
.scroll-line::after{
  content:"";position:absolute;top:-40px;left:0;width:100%;height:40px;
  background:#fff;animation:scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot{100%{top:100%}}

/* Navbar dark over hero */
#navbar:not(.scrolled){background:linear-gradient(180deg,rgba(10,5,8,.7),transparent)}
#navbar:not(.scrolled) .nav-links a:not(.nav-cta){color:#fff}
#navbar:not(.scrolled) .nav-links a:not(.nav-cta):hover{color:var(--gold-2)}
#navbar:not(.scrolled) .hamburger span{background:#fff}
#navbar:not(.scrolled) .logo-img{background:rgba(255,255,255,.95);padding:4px 8px;border-radius:6px}

@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px;padding-top:40px}
  .hero-side{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .side-card{min-width:auto;flex:1 1 240px}
  .side-card.alt{margin-right:0}
  .hero{padding-bottom:180px}
  .hero-stats-bar{position:static;margin:40px auto 0}
}
@media (max-width:768px){
  .hero{padding:120px 20px 40px}
  .hero-ticker{top:76px}
  .hero-inner{gap:30px}
  .hero-title{font-size:clamp(2.4rem,9vw,3.8rem)}
  .btn-xl{padding:16px 28px;font-size:15px}
  .btn-play .play-icon{width:46px;height:46px}
  .hero-side{flex-direction:column;align-items:stretch;width:100%}
  .side-card{min-width:auto}
  .side-card.alt{margin-right:0}
  .sb-text strong{font-size:1.6rem}
  .hero-stats-bar{padding:20px;flex-wrap:wrap;gap:16px}
  .hero-stats-bar .divider{display:none}
  .hero-stats-bar>div:not(.divider){min-width:45%}
}

/* ==== SECTIONS ==== */
.section{padding:120px 0;position:relative}
.section-head{text-align:center;max-width:700px;margin:0 auto 70px}
.section-tag{
  display:inline-block;color:var(--gold);font-size:12px;
  font-weight:700;letter-spacing:.25em;text-transform:uppercase;
  margin-bottom:16px;padding:6px 14px;
  background:rgba(214,51,132,.08);border:1px solid rgba(214,51,132,.18);
  border-radius:50px;
}
.section h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:18px}
.section-head p.muted{font-size:1.05rem}

/* ==== ABOUT ==== */
.about{background:var(--bg-2)}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.about-text .lead{font-size:1.1rem;color:#4a3d44;margin:24px 0 36px}
.about-features{display:grid;gap:24px}
.feature{display:flex;gap:18px;align-items:flex-start;padding:20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);transition:var(--trans)}
.feature:hover{border-color:rgba(214,51,132,.4);transform:translateY(-3px)}
.feature i{color:var(--gold);font-size:26px;min-width:34px}
.feature h4{font-size:1.15rem;margin-bottom:4px;font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:600}
.feature p{color:var(--muted);font-size:.95rem}
.about-image{position:relative;height:520px}
.about-img-frame{
  position:absolute;inset:0;border-radius:var(--radius);
  background:url('IMG-20260413-WA0077.jpeg') center/cover no-repeat;
  box-shadow:var(--shadow);
}
.about-img-frame::after{content:"";position:absolute;inset:0;border-radius:var(--radius);background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.4))}
.about-badge{
  position:absolute;bottom:-24px;left:-24px;
  background:#fff;color:#000;padding:18px 24px;border-radius:var(--radius);
  display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);
}
.about-badge i{color:var(--gold);font-size:28px}
.about-badge strong{display:block;font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;font-size:1.1rem}
.about-badge span{font-size:12px;color:#666;letter-spacing:.12em;text-transform:uppercase}

/* ==== SERVICES ==== */
.services{background:var(--bg)}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.service-card{
  position:relative;padding:40px 28px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 4px 18px rgba(168,30,102,.06);
  transition:var(--trans);overflow:hidden;
}
.service-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0);transform-origin:left;transition:var(--trans);
}
.service-card:hover{transform:translateY(-8px);border-color:rgba(214,51,132,.4);box-shadow:0 24px 50px rgba(168,30,102,.18)}
.service-card:hover::before{transform:scaleX(1)}
.service-card .icon{
  width:64px;height:64px;border-radius:14px;
  background:rgba(214,51,132,.1);color:var(--gold);
  display:grid;place-items:center;font-size:26px;margin-bottom:24px;
  transition:var(--trans);
}
.service-card:hover .icon{background:var(--gold);color:#fff;transform:rotate(-6deg) scale(1.05)}
.service-card h3{font-size:1.3rem;margin-bottom:12px}
.service-card p{color:var(--muted);margin-bottom:20px;font-size:.95rem}
.service-card .link{color:var(--gold);font-weight:500;font-size:.9rem;display:inline-flex;align-items:center;gap:8px}
.service-card .link:hover{gap:14px}

/* ==== WHY ==== */
.why{background:var(--bg-2);position:relative;overflow:hidden}
.why::before{content:"";position:absolute;top:-200px;right:-200px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(214,51,132,.08),transparent 70%)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1}
.why-card{
  padding:40px 26px;text-align:center;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 4px 18px rgba(168,30,102,.06);transition:var(--trans);
}
.why-card:hover{transform:translateY(-6px);border-color:var(--gold)}
.why-card i{font-size:36px;color:var(--gold);margin-bottom:20px}
.why-card h4{font-size:1.15rem;margin-bottom:10px;font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:600}
.why-card p{color:var(--muted);font-size:.92rem}

/* ==== HOW ==== */
.how{background:var(--bg)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.steps::before{
  content:"";position:absolute;top:46px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);opacity:.3;
}
.step{
  text-align:center;padding:0 12px;position:relative;z-index:1;
}
.step-num{
  display:grid;place-items:center;width:92px;height:92px;margin:0 auto 24px;
  border-radius:50%;background:#fff;border:2px solid var(--gold);
  color:var(--gold);font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;font-size:1.8rem;font-weight:700;
  box-shadow:0 6px 18px rgba(214,51,132,.12);transition:var(--trans);
}
.step:hover .step-num{background:var(--gold);color:#fff;transform:scale(1.05)}
.step h4{font-size:1.2rem;margin-bottom:10px;font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:600}
.step p{color:var(--muted);font-size:.95rem}

/* ==== TESTIMONIALS ==== */
.testimonials{background:var(--bg-2)}
.slider{max-width:860px;margin:0 auto;overflow:hidden;position:relative}
.slides{display:flex;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.slide{min-width:100%;padding:50px 40px;text-align:center}
.slide i{font-size:38px;color:var(--gold);opacity:.6;margin-bottom:20px}
.slide p{font-size:clamp(1.05rem,1.4vw,1.25rem);font-style:italic;color:#3a2f35;margin-bottom:28px;line-height:1.7}
.slide h5{font-size:1.05rem;font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:600;color:var(--gold)}
.slide span{color:var(--muted);font-size:.88rem;letter-spacing:.1em;text-transform:uppercase}
.slider-dots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.slider-dots button{width:10px;height:10px;border-radius:50%;border:none;background:rgba(255,255,255,.2);cursor:pointer;transition:var(--trans)}
.slider-dots button.active{background:var(--gold);width:28px;border-radius:20px}
.client-logos{display:flex;justify-content:space-around;align-items:center;gap:30px;margin-top:80px;padding-top:50px;border-top:1px solid var(--line);flex-wrap:wrap}
.client-logos span{color:#a89098;font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;font-size:1.3rem;font-weight:600;letter-spacing:.2em;transition:var(--trans);opacity:.7}
.client-logos span:hover{color:var(--gold);opacity:1}

/* ==== CTA BANNER ==== */
.cta-banner{
  padding:100px 0;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--gold-deep) 0%,var(--gold) 60%,var(--gold-2) 100%);
}
.cta-banner::before{
  content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;
  background:url('IM.jpeg') center/cover no-repeat;
}
.cta-inner{position:relative;z-index:1}
.cta-inner h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:16px}
.cta-inner p{color:#f2e6ec;margin-bottom:32px;font-size:1.08rem}

/* ==== CONTACT ==== */
.contact{background:var(--bg)}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;margin-bottom:60px}
.contact-info h2{margin-bottom:16px}
.contact-info>p.muted{margin-bottom:32px}
.contact-list{list-style:none;display:grid;gap:20px;margin-bottom:32px}
.contact-list li{display:flex;gap:16px;align-items:flex-start}
.contact-list i{
  min-width:46px;height:46px;border-radius:12px;
  background:rgba(214,51,132,.1);color:var(--gold);
  display:grid;place-items:center;font-size:18px;
}
.contact-list strong{display:block;font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:600;margin-bottom:2px}
.contact-list span{color:var(--muted);font-size:.95rem}
.socials{display:flex;gap:12px}
.socials a{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--text);
}
.socials a:hover{background:var(--gold);color:#fff;border-color:var(--gold);transform:translateY(-3px)}
.contact-form{
  background:#fff;padding:40px;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:0 10px 40px rgba(168,30,102,.08);
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.field input,.field select,.field textarea{
  background:#fff;border:1px solid var(--line);color:var(--text);
  padding:14px 16px;border-radius:10px;font-family:inherit;font-size:14px;
  transition:var(--trans);outline:none;resize:vertical;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(214,51,132,.1)}
.contact-form .btn{grid-column:1/-1}
.form-success{grid-column:1/-1;display:none;color:var(--gold);text-align:center;padding:12px;border:1px solid var(--gold);border-radius:10px;background:rgba(214,51,132,.08)}
.map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);height:400px}
.map-wrap iframe{width:100%;height:100%;border:0}

/* ==== FOOTER ==== */
footer{background:var(--bg-2);padding:70px 0 30px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.footer-grid .muted{margin-top:16px;font-size:.92rem}
.footer-grid h5{font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:600;margin-bottom:18px;font-size:1rem;color:var(--text)}
.footer-grid a{display:block;color:var(--muted);font-size:.92rem;margin-bottom:10px}
.footer-grid a:hover{color:var(--gold)}
.footer-bottom{text-align:center;padding-top:30px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}

/* ==== BACK TO TOP ==== */
.back-top{
  position:fixed;bottom:30px;right:30px;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;
  display:grid;place-items:center;font-size:16px;z-index:90;
  box-shadow:0 10px 30px rgba(214,51,132,.3);
  opacity:0;transform:translateY(20px);pointer-events:none;
}
.back-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-top:hover{transform:translateY(-5px)}

/* ==== ANIMATIONS ==== */
[data-animate]{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
[data-animate].in{opacity:1;transform:translateY(0)}

/* ==== RESPONSIVE ==== */
@media (max-width:1024px){
  .services-grid,.why-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:50px}
  .about-image{height:400px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr;gap:60px;text-align:left}
  .hero-right{height:460px;max-width:560px;margin:0 auto;width:100%}
  .hero-stats-bar{flex-wrap:wrap;gap:20px;padding:24px}
  .hero-stats-bar .divider{display:none}
}
@media (max-width:768px){
  .section{padding:80px 0}
  .nav-links{
    position:fixed;top:0;right:-100%;width:80%;max-width:320px;height:100vh;
    background:#fff;flex-direction:column;justify-content:center;
    padding:40px;gap:24px;transition:right .4s ease;border-left:1px solid var(--line);
    box-shadow:-10px 0 40px rgba(168,30,102,.1);
  }
  .nav-links.active{right:0}
  .nav-links a{font-size:1.1rem}
  .hamburger{display:block;z-index:101}
  .hero{padding:120px 20px 30px}
  .hero-right{height:380px}
  .card-top{left:-10px;padding:12px 14px}
  .card-bottom{right:-10px;padding:12px 14px}
  .float-card strong{font-size:13px}
  .float-card span{font-size:11px}
  .float-badge{right:4%;padding:10px 16px}
  .hero-stats-bar{padding:20px;gap:12px}
  .hero-stats-bar>div:not(.divider){min-width:45%}
  .contact-form{grid-template-columns:1fr;padding:28px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .about-badge{left:0;bottom:-20px}
  .client-logos{gap:20px}
  .client-logos span{font-size:1rem}
}
@media (max-width:480px){
  .services-grid,.why-grid,.steps{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column;width:100%}
  .btn{justify-content:center;width:100%}
  .nav-container{padding:0 20px}
}

/* ==== RTL & ARABIC REFINEMENTS ==== */
/* Arabic doesn't have uppercase — remove all text-transform */
.section-tag,.eyebrow,.hero-eyebrow,.hero-stats-bar span,.hero-stats span,
.about-badge span,.float-badge span,.trust-text span,.contact-list span,
.field label{text-transform:none !important;letter-spacing:0 !important;font-weight:600}

.section-tag{font-size:13px;color:var(--gold);font-weight:600;margin-bottom:16px}
.hero-eyebrow{font-size:13px;padding:10px 18px;font-weight:600}
.hero-stats-bar span{font-size:12px;font-weight:500}
.field label{font-size:13px;color:#4a3d44}
.client-logos span{letter-spacing:0 !important;font-size:1.1rem}
.hero-stats-bar strong i{margin-right:4px}

/* Arabic italic looks bad — use a premium underline accent instead */
.italic-gold{font-style:normal;display:inline-block;position:relative;padding:0 4px}
.italic-gold::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:10px;
  background:linear-gradient(90deg,transparent,rgba(214,51,132,.25),transparent);
  border-radius:50%;filter:blur(6px);z-index:-1;
}
.hero h1{line-height:1.25;letter-spacing:0}
.hero-sub{line-height:1.9;font-size:clamp(1.05rem,1.2vw,1.18rem)}
.hero-sub strong{color:var(--gold-deep);font-weight:700}

/* RTL avatar stacking */
.av{margin-left:0;margin-right:-12px}
.av:first-child{margin-right:0}

/* RTL nav underline */
.nav-links a:not(.nav-cta)::after{left:auto;right:0}

/* Section heading larger & bolder for Arabic */
.section h2{font-size:clamp(2rem,3.5vw,2.8rem);line-height:1.3;font-weight:700}
.hero h1{font-size:clamp(2.4rem,4.6vw,4rem);font-weight:700}

/* Service card link arrow direction */
.service-card .link i{transform:rotate(0deg)}
.service-card:hover .link i{transform:translateX(-4px)}

/* About badge position for RTL */
.about-badge{left:auto;right:-24px}

/* Float card positions for RTL */
.card-top{left:auto;right:-30px}
.card-bottom{right:auto;left:-20px}
.float-badge{right:auto;left:8%}

/* CTA banner white button variant */
.gold-light{
  background:linear-gradient(135deg,#fff,#ffe5f0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.btn-cta-white{
  background:#fff;color:var(--gold-deep);
  box-shadow:0 12px 40px rgba(0,0,0,.2);
}
.btn-cta-white:hover{background:var(--text);color:#fff;transform:translateY(-3px)}

/* Refined text colors for Arabic */
.hero-left{font-feature-settings:"kern","liga","calt"}
h1,h2,h3,h4{font-feature-settings:"kern","liga","calt"}

/* Step number position for RTL connector line */
.steps::before{left:10%;right:10%}

/* Scroll-down better alignment */
.scroll-down{writing-mode:horizontal-tb}
.scroll-down span{font-size:11px;font-weight:600}

/* Contact info & form Arabic polish */
.contact-list strong{font-weight:700;font-size:.95rem;margin-bottom:4px}
.contact-list span{font-size:.92rem;color:var(--muted);font-weight:400}

/* Service card: icon rotation for RTL */
.service-card:hover .icon{transform:rotate(6deg) scale(1.05)}

/* Feature card icons alignment */
.feature i{min-width:34px;text-align:center}

/* Typography weight tuning */
.muted{font-weight:400}
p{font-weight:400}
.nav-links a{font-weight:600;font-size:15px}
.btn{font-weight:700;font-size:15px;letter-spacing:0}

/* Back-to-top for RTL */
.back-top{right:auto;left:30px}

/* Footer LTR numbers */
[dir="ltr"]{unicode-bidi:embed}

/* Hero visual overlay refinement */
.visual-main::after{background:linear-gradient(180deg,transparent 50%,rgba(168,30,102,.45))}

/* Extra premium touch: subtle gold border on section headings */
.section-head{position:relative;padding-top:10px}
.section-tag::before{
  content:"";display:inline-block;width:30px;height:1px;
  background:var(--gold);vertical-align:middle;margin-left:10px;
}

/* Premium quote style */
.slide i.fa-quote-right{font-size:42px;color:var(--gold);opacity:.5;margin-bottom:24px}
.slide p{font-style:normal;font-weight:500;line-height:2}
.slide h5{font-size:1.1rem;font-weight:700;color:var(--gold-deep);margin-bottom:4px}
.slide span{font-size:.9rem;color:var(--muted);letter-spacing:0;text-transform:none}

/* CTA inner refinement */
.cta-inner h2{font-size:clamp(2rem,3.8vw,3rem);color:#fff;margin-bottom:16px}
.cta-inner p{font-size:1.1rem;max-width:600px;margin:0 auto 32px;line-height:1.9}

/* ==== GALLERY SECTION ==== */
.gallery{background:var(--bg-2);position:relative;overflow:hidden}
.gallery-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  grid-template-rows:420px;
  gap:20px;
}
.gallery-item{
  position:relative;border-radius:20px;overflow:hidden;
  box-shadow:0 20px 50px rgba(168,30,102,.14);
  cursor:pointer;transition:var(--trans);
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item:hover{box-shadow:0 30px 70px rgba(168,30,102,.28);transform:translateY(-6px)}
.gallery-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(10,5,8,.2) 55%,rgba(10,5,8,.85));
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;color:#fff;
}
.gallery-overlay .g-tag{
  display:inline-block;align-self:flex-start;
  background:rgba(214,51,132,.9);backdrop-filter:blur(10px);
  color:#fff;font-size:11px;font-weight:700;
  padding:6px 14px;border-radius:50px;margin-bottom:12px;
  letter-spacing:0;
}
.gallery-overlay h4{
  font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  font-size:1.3rem;font-weight:700;color:#fff;line-height:1.5;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.gallery-item.large{grid-row:1;grid-column:1}

@media (max-width:900px){
  .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,300px)}
  .gallery-item.large{grid-column:1/-1}
}
@media (max-width:560px){
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:repeat(3,280px)}
  .gallery-item.large{grid-column:1}
}

/* ==== HERO VISUAL — CLEAR IMAGE OVERRIDE ==== */
/* Remove overlay so branded text on the image stays visible */
.visual-main::after{display:none !important}

/* Shrink image slightly & reposition cards fully outside image area */
.hero-right{height:620px}
.visual-main{width:82%;height:82%;top:40px}
.visual-accent{width:35%;height:35%;bottom:0;left:auto;right:0;transform:translate(10px,10px);z-index:-1}

/* Card TOP: outside image top-left (RTL: left side is "outside") */
.card-top{
  top:0;right:auto;left:0;
  animation-delay:.4s;
}
/* Card BOTTOM: outside image bottom-right */
.card-bottom{
  bottom:0;right:auto;left:auto;right:6%;
  animation-delay:2s;
}

/* Badge: top-right corner OUTSIDE the image */
.float-badge{
  top:0;right:6%;left:auto;bottom:auto;
  animation:floatY 5s ease-in-out infinite;
}

@media (max-width:1024px){
  .hero-right{height:520px;max-width:600px}
  .visual-main{width:86%;height:82%}
  .card-top{left:0}
  .card-bottom{right:6%}
  .float-badge{right:6%}
}
@media (max-width:768px){
  .hero-right{height:460px}
  .visual-main{width:84%;height:78%;top:50px}
  .card-top{top:0;left:0;padding:10px 14px}
  .card-bottom{bottom:0;right:4%;padding:10px 14px}
  .float-badge{top:8px;right:4%;padding:8px 14px}
  .float-card .fc-icon{width:38px;height:38px;font-size:15px}
}

/* ==== SMART TECH BANNERS ==== */
.smart{background:var(--bg);position:relative;overflow:hidden}
.smart::before{
  content:"";position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(236,90,160,.08),transparent 70%);
  top:-150px;left:-200px;pointer-events:none;
}
.smart-banner{
  display:block;position:relative;width:100%;
  border-radius:22px;overflow:hidden;
  background-size:cover;background-position:center;
  box-shadow:0 20px 50px rgba(168,30,102,.18),0 4px 12px rgba(0,0,0,.08);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
  cursor:pointer;
}
.smart-banner:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(168,30,102,.32),0 8px 20px rgba(0,0,0,.12);
}
.banner-wide{
  aspect-ratio:1280/410;
  margin-bottom:24px;
}
.banner-strip{
  aspect-ratio:1024/240;
}
.banner-glow{
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(255,255,255,.15) 70%,transparent 80%);
  transform:translateX(-150%);
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.smart-banner:hover .banner-glow{transform:translateX(150%)}

@media (max-width:768px){
  .banner-wide,.banner-strip{border-radius:16px}
}

/* ==== ADVANCED ANIMATIONS ==== */

/* Smoother global transitions */
.hero-deco,.hero-visual,.float-card,.float-badge{transition:transform .4s cubic-bezier(.2,.8,.2,1)}

/* Split text reveal */
.split-wrap{display:inline}
.split-wrap .w{
  display:inline-block;
  opacity:0;
  transform:translateY(40px) rotateX(-40deg);
  transform-origin:50% 100%;
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
  will-change:transform,opacity;
}
.split-wrap .w.in{opacity:1;transform:translateY(0) rotateX(0)}
.italic-gold.w{display:inline-block !important}

/* Animate data-animate more dramatically */
[data-animate]{
  opacity:0;
  transform:translateY(60px) scale(.96);
  transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
  will-change:transform,opacity;
}
[data-animate].in{opacity:1;transform:translateY(0) scale(1)}

/* Grid children fade-up */
.services-grid > *, .why-grid > *, .steps > *, .gallery-grid > *, .about-features > *{
  opacity:0;transform:translateY(50px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.services-grid.in > *, .why-grid.in > *, .steps.in > *, .gallery-grid.in > *, .about-features.in > *{
  opacity:1;transform:translateY(0);
}

/* Parallax transform — uses --py custom prop set by JS */
.visual-main{transform:translateY(var(--py,0));transition:transform .15s linear}
.about-img-frame{transform:translateY(var(--py,0));transition:transform .15s linear}
.gallery-item img{transform:translateY(var(--py,0)) scale(1.02);transition:transform .5s linear}
.gallery-item:hover img{transform:translateY(var(--py,0)) scale(1.12);transition:transform .6s cubic-bezier(.2,.8,.2,1)}

/* Service cards smooth 3D prep */
.service-card,.why-card,.gallery-item,.smart-banner{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .4s;
}
.service-card .icon,.service-card h3,.service-card p,.service-card .link{transform:translateZ(20px)}

/* Magnetic button transition */
.btn{transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .4s, background .3s, color .3s, border-color .3s}

/* Testimonial slide fade when active */
.slide{transition:opacity .6s, transform .6s}
.slide:not(.active){opacity:.4;transform:scale(.95)}

/* Marquee for client logos */
.client-logos.marquee{
  display:flex;flex-wrap:nowrap;overflow:hidden;gap:60px;
  justify-content:flex-start;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  animation:none;
}
.client-logos.marquee span{
  flex:0 0 auto;animation:marquee 28s linear infinite;
  white-space:nowrap;
}
@keyframes marquee{
  to{transform:translateX(100%)}
}
/* Pause marquee on hover */
.client-logos.marquee:hover span{animation-play-state:paused}

/* Scroll progress bar */
.scroll-progress{
  position:fixed;top:0;right:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-2));
  z-index:200;transition:width .1s linear;box-shadow:0 0 12px rgba(214,51,132,.6);
}

/* Hero eyebrow glow shimmer */
.hero-eyebrow{position:relative;overflow:hidden}
.hero-eyebrow::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(214,51,132,.3),transparent);
  animation:shimmer 3s infinite;
}
@keyframes shimmer{to{left:100%}}

/* Hero h1 word hover lift */
.hero h1 .w{transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1), color .3s}
.hero h1 .w:hover{transform:translateY(-6px);color:var(--gold)}

/* Float cards entrance */
.float-card,.float-badge{opacity:0;animation:popIn .9s cubic-bezier(.2,1.4,.4,1) forwards}
.card-top{animation-delay:.7s}
.card-bottom{animation-delay:1s}
.float-badge{animation-delay:1.3s}
@keyframes popIn{
  from{opacity:0;transform:translateY(40px) scale(.7)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
/* Re-enable float loop after pop */
.card-top, .card-bottom, .float-badge{animation:popIn .9s cubic-bezier(.2,1.4,.4,1) forwards, floatY 5s ease-in-out .9s infinite}

/* Smart banner scroll reveal — dramatic */
.smart-banner[data-animate]{transform:translateY(80px) scale(.92);filter:blur(6px)}
.smart-banner[data-animate].in{transform:translateY(0) scale(1);filter:blur(0)}

/* Hero visual wrapper smooth transform */
.hero-visual{transition:transform .6s cubic-bezier(.2,.8,.2,1)}

/* Section tag animated underline */
.section-tag{position:relative;display:inline-block}

/* Step num pop on reveal */
.step.in .step-num{animation:stepPop .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes stepPop{
  0%{transform:scale(0) rotate(-180deg)}
  60%{transform:scale(1.2) rotate(10deg)}
  100%{transform:scale(1) rotate(0)}
}

/* Avatar stagger bounce */
.hero-trust.in .av{animation:avBounce .7s cubic-bezier(.2,1.4,.4,1) both}
.hero-trust.in .av:nth-child(1){animation-delay:.1s}
.hero-trust.in .av:nth-child(2){animation-delay:.2s}
.hero-trust.in .av:nth-child(3){animation-delay:.3s}
.hero-trust.in .av:nth-child(4){animation-delay:.4s}
@keyframes avBounce{
  from{opacity:0;transform:translateY(-30px) scale(0)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Subtle pulse on CTA primary */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;inset:0;border-radius:50px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  opacity:0;transition:opacity .4s;z-index:-1;
}
.btn-primary:hover::after{opacity:1}

/* Reveal-on-scroll glow on section headings */
.section h2{position:relative}
.section h2::after{
  content:"";display:block;width:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  margin:14px auto 0;border-radius:2px;transition:width .9s cubic-bezier(.2,.8,.2,1) .4s;
}
.section h2.in::after{width:80px}

/* Hover zoom for about image */
.about-img-frame{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.about-image:hover .about-img-frame{transform:scale(1.03)}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* Navbar blends with light hero */

@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-side{min-height:auto;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .side-card{min-width:auto;flex:1 1 240px}
  .side-card.alt{margin-right:0}
  .hero{padding-bottom:180px}
  .hero-stats-bar{position:static;margin:40px auto 0}
}
@media (max-width:768px){
  .hero{padding:120px 20px 40px;min-height:auto}
  .hero-ticker{top:80px}
  .hero-inner{padding-top:40px;gap:30px}
  .hero h1{font-size:clamp(2.4rem,9vw,3.8rem)}
  .hero-ctas{gap:14px}
  .btn-xl{padding:16px 28px;font-size:15px}
  .btn-play .play-icon{width:46px;height:46px}
  .hero-side{flex-direction:column;align-items:stretch}
  .side-badge{padding:16px 24px}
  .sb-text strong{font-size:1.6rem}
  .hero-stats-bar{padding:20px;flex-wrap:wrap;gap:16px}
  .hero-stats-bar .divider{display:none}
  .hero-stats-bar>div:not(.divider){min-width:45%}
  .hero-trust{padding:12px 18px;flex-wrap:wrap}
}

/* ==== STRONGER DESIGN & TYPOGRAPHY ==== */
/* Tighter, bolder base typography */
body{
  font-family:'IBM Plex Sans Arabic','Noto Kufi Arabic',sans-serif;
  font-weight:400;font-size:16px;letter-spacing:-.005em;
  line-height:1.75;
}
h1,h2,h3,h4,h5{
  font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  font-weight:800;letter-spacing:-.01em;line-height:1.2;
}

/* HERO — stronger headline */
.hero h1{
  font-size:clamp(3.2rem,8vw,7.5rem) !important;
  font-weight:900 !important;
  line-height:1.04 !important;
  letter-spacing:-.03em !important;
  margin-bottom:36px !important;
  text-shadow:
    0 4px 30px rgba(0,0,0,.7),
    0 0 80px rgba(236,90,160,.2);
}
.hero h1 .line{display:block;position:relative}
.hero h1 .w{font-weight:900}
.italic-gold{
  font-weight:900 !important;
  background:linear-gradient(135deg,#fff 0%,#ffc2dd 30%,var(--gold-2) 60%,var(--gold) 90%) !important;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 30px rgba(236,90,160,.6));
  letter-spacing:-.02em;
}

/* Hero sub — punchier */
.hero-sub{
  font-size:clamp(1.1rem,1.4vw,1.35rem) !important;
  color:#e8d4de !important;
  font-weight:400 !important;
  line-height:1.85 !important;
  max-width:620px !important;
}

/* Hero eyebrow — more commanding */
.hero-eyebrow{
  font-size:13px !important;font-weight:700 !important;
  padding:12px 24px !important;letter-spacing:.02em !important;
  background:rgba(236,90,160,.14) !important;
  border:1px solid rgba(236,90,160,.45) !important;
  box-shadow:0 0 40px rgba(236,90,160,.2),inset 0 1px 0 rgba(255,255,255,.1);
}

/* Buttons — bolder, bigger */
.btn{font-family:'IBM Plex Sans Arabic',sans-serif;font-weight:700;letter-spacing:0}
.btn-xl{
  padding:22px 44px !important;
  font-size:17px !important;font-weight:800 !important;
}
.btn-xl span{font-weight:800}

/* Side badge — number bigger, bolder */
.sb-text strong{
  font-family:'Noto Kufi Arabic',sans-serif !important;
  font-size:2.4rem !important;font-weight:900 !important;
  letter-spacing:-.02em;
}
.sb-text span{font-size:13px !important;font-weight:600}

/* Side cards — stronger */
.side-card{
  padding:20px 26px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.08) !important;
}
.side-card strong{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-size:17px !important;font-weight:800 !important;
}
.side-card span{font-weight:500 !important}

/* Stats bar — bigger numbers */
.hero-stats-bar{padding:32px 44px !important}
.hero-stats-bar strong{
  font-size:clamp(2rem,3vw,2.8rem) !important;
  font-weight:900 !important;
  font-family:'Noto Kufi Arabic',sans-serif !important;
  letter-spacing:-.02em;
}
.hero-stats-bar span{font-size:13px !important;font-weight:600 !important}

/* SECTION headings — stronger */
.section h2{
  font-size:clamp(2.2rem,4.2vw,3.6rem) !important;
  font-weight:900 !important;letter-spacing:-.02em !important;
  line-height:1.2;
}
.section-tag{
  font-size:12px !important;font-weight:700 !important;
  letter-spacing:.25em !important;text-transform:uppercase !important;
  color:var(--gold) !important;
  display:inline-flex !important;align-items:center;gap:10px;
  padding:6px 14px;border-radius:50px;
  background:rgba(214,51,132,.08);
  border:1px solid rgba(214,51,132,.2);
}
.section-tag::before{display:none}

/* Section subtitle */
.section-head p.muted{
  font-size:1.1rem !important;font-weight:400;
  line-height:1.9;max-width:600px;margin:16px auto 0;
}

/* Card titles punchier */
.service-card h3,.why-card h4,.step h4,.feature h4{
  font-family:'Noto Kufi Arabic',sans-serif !important;
  font-weight:800 !important;letter-spacing:-.01em !important;
}
.service-card h3{font-size:1.35rem !important;margin-bottom:14px}
.why-card h4,.step h4,.feature h4{font-size:1.2rem !important}
.service-card p,.why-card p,.step p,.feature p{font-size:.98rem;line-height:1.85;color:#5a4e55}

/* Step number — fatter */
.step-num{
  font-family:'Noto Kufi Arabic',sans-serif !important;
  font-size:2rem !important;font-weight:900 !important;
  letter-spacing:-.03em;
}

/* Slide quote — stronger */
.slide p{
  font-size:clamp(1.15rem,1.6vw,1.4rem) !important;
  font-weight:500 !important;line-height:1.9 !important;
  color:#2a232a !important;
}
.slide h5{
  font-family:'Noto Kufi Arabic',sans-serif !important;
  font-size:1.2rem !important;font-weight:800 !important;
}

/* CTA banner — bigger */
.cta-inner h2{
  font-size:clamp(2.4rem,4.6vw,3.6rem) !important;
  font-weight:900 !important;letter-spacing:-.02em !important;
  color:#fff !important;text-shadow:0 4px 30px rgba(0,0,0,.3);
}
.cta-inner p{font-size:1.2rem !important;font-weight:400}

/* Gallery overlay titles stronger */
.gallery-overlay h4{
  font-family:'Noto Kufi Arabic',sans-serif !important;
  font-size:1.4rem !important;font-weight:800 !important;
  letter-spacing:-.01em !important;
}

/* Contact form — punchier labels */
.field label{
  font-family:'IBM Plex Sans Arabic',sans-serif;
  font-size:13px !important;font-weight:600 !important;
  color:#3a2f35 !important;
}
.field input,.field select,.field textarea{
  font-family:'IBM Plex Sans Arabic',sans-serif !important;
  font-size:15px !important;font-weight:500;
  padding:16px 18px !important;
}

/* Contact info strong labels */
.contact-list strong{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-size:1rem !important;font-weight:800 !important;
}

/* Footer headings */
.footer-grid h5{
  font-family:'Noto Kufi Arabic',sans-serif;
  font-size:1.1rem !important;font-weight:800 !important;
  margin-bottom:20px;
}
.footer-grid a{font-weight:500 !important;font-size:.95rem !important}

/* Trust text */
.trust-text span{font-weight:600 !important;font-size:13px !important}
.trust-text .stars strong{font-weight:800 !important}

/* NAV links bolder */
.nav-links a{font-weight:700 !important;font-size:14.5px !important}
.nav-cta{font-weight:800 !important}

/* STRONGER VISUAL ACCENTS */

/* Bigger glow behind hero badge */
.side-badge{
  padding:24px 38px 24px 30px !important;
  box-shadow:
    0 25px 80px rgba(168,30,102,.45),
    0 0 0 1px rgba(236,90,160,.3),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.side-badge i{
  width:56px !important;height:56px !important;
  font-size:24px !important;
  box-shadow:0 10px 30px rgba(236,90,160,.6),inset 0 2px 4px rgba(255,255,255,.25) !important;
}

/* Section heading underline stronger */
.section h2::after{
  height:4px !important;
  box-shadow:0 4px 20px rgba(214,51,132,.5);
}
.section h2.in::after{width:100px !important}

/* Ticker text bigger */
.ticker-track span{font-size:14px !important;font-weight:700 !important}

/* Larger hero particles for more drama */
.hero-particles span{width:5px;height:5px;box-shadow:0 0 14px var(--gold-2),0 0 28px var(--gold)}

/* Stronger primary button gradient */
.btn-primary{
  background:linear-gradient(135deg,var(--gold-deep) 0%,var(--gold) 50%,var(--gold-2) 100%) !important;
  box-shadow:0 14px 40px rgba(214,51,132,.4),inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* Strong shadow utility for all cards */
.service-card,.why-card{
  box-shadow:0 8px 30px rgba(168,30,102,.06),0 1px 2px rgba(0,0,0,.04) !important;
}
.service-card:hover{box-shadow:0 30px 70px rgba(168,30,102,.24) !important}

/* Tabular-nums for all numbers */
.hero-stats-bar strong,.sb-text strong,.step-num{
  font-variant-numeric:tabular-nums proportional-nums;
  font-feature-settings:"ss01","cv01";
}


/* ==== HERO-ONLY COMPACT FIT ==== */
.hero{
  min-height:100vh !important;
  padding:110px 24px 30px !important;
  display:flex !important;flex-direction:column;justify-content:flex-start;
}
.hero-inner{
  max-width:1280px !important;margin:0 auto !important;width:100% !important;
  grid-template-columns:1.2fr 1fr !important;
  gap:40px !important;align-items:center !important;
  min-height:auto !important;padding-top:20px !important;flex:1;
}

.hero-title{
  font-size:clamp(.55rem,.72vw,.7rem) !important;
  line-height:1.6 !important;font-weight:700 !important;
  letter-spacing:0 !important;margin-bottom:6px !important;
}
.hero-title .line{display:block !important;padding:0 !important;margin:0 !important}
.hero-title em{
  font-style:normal !important;line-height:1.5 !important;
  padding:0 2px !important;display:inline !important;filter:none !important;
}
.hero-title em::after{display:none !important}

.hero-eyebrow{padding:3px 9px !important;font-size:7.5px !important;margin-bottom:8px !important}
.hero-eyebrow .dot{width:6px !important;height:6px !important}

.hero-sub{font-size:.78rem !important;line-height:1.8 !important;max-width:420px !important;margin-bottom:18px !important;font-weight:400 !important}

.hero-ctas{gap:10px !important;margin-bottom:18px !important;flex-wrap:wrap}
.hero-ctas .btn{padding:10px 20px !important;font-size:12.5px !important;gap:8px !important;font-weight:700 !important}
.hero-ctas .btn-xl{padding:11px 22px !important;font-size:13px !important}
.hero-ctas .btn-xl::before{inset:-1px !important}
.btn-play{font-size:12px !important;gap:8px !important}
.btn-play .play-icon{width:34px !important;height:34px !important;font-size:10px !important}

.hero-trust{padding:6px 12px !important;gap:10px !important}
.av{width:26px !important;height:26px !important;font-size:9px !important;margin-right:-7px !important;border-width:2px !important}
.trust-text .stars{font-size:9px !important;gap:4px !important}
.trust-text .stars strong{font-size:10.5px !important}
.trust-text span{font-size:10.5px !important}

.hero-side{gap:10px !important}
.side-badge{padding:10px 18px 10px 14px !important;gap:10px !important;border-radius:50px !important}
.side-badge i{width:32px !important;height:32px !important;font-size:13px !important}
.sb-text strong{font-size:1.05rem !important;line-height:1 !important}
.sb-text span{font-size:10px !important;margin-top:2px !important}

.side-card{padding:9px 14px !important;gap:9px !important;min-width:0 !important;width:auto;border-radius:12px !important}
.side-card.alt{margin-right:20px !important}
.sc-icon{width:28px !important;height:28px !important;font-size:11px !important;border-radius:8px !important}
.side-card strong{font-size:11.5px !important;line-height:1.2 !important}
.side-card span{font-size:10px !important}

.hero-ticker{padding:5px 0 !important;top:64px !important}
.ticker-track span{font-size:10.5px !important}
.ticker-track span i{font-size:9px !important}
.ticker-track{gap:24px !important}

.hero-stats-bar{
  position:relative !important;
  left:auto !important;right:auto !important;bottom:auto !important;
  margin:20px auto 0 !important;max-width:100% !important;
  padding:12px 24px !important;gap:8px !important;border-radius:14px !important;flex-shrink:0;
}
.hero-stats-bar strong{font-size:1.1rem !important;gap:4px !important}
.hero-stats-bar strong i{font-size:.65em !important}
.hero-stats-bar span{font-size:9.5px !important;margin-top:1px !important;letter-spacing:.05em}
.hero-stats-bar .divider{height:26px !important}

.scroll-down{display:none !important}

/* Navbar tighter only over hero — keep normal after scroll */
#navbar{padding:10px 0 !important}
#navbar.scrolled{padding:8px 0 !important}
.nav-container{padding:0 24px !important}
.nav-links{gap:20px !important}
.nav-links a{font-size:13px !important;font-weight:600 !important}
.nav-cta{padding:7px 16px !important;font-size:12px !important}
.logo-img{height:42px !important}

@media (max-width:1024px){
  .hero{min-height:auto !important;padding:96px 20px 40px !important}
  .hero-inner{grid-template-columns:1fr !important;gap:28px !important}
  .hero-side{flex-direction:row !important;flex-wrap:wrap !important;gap:10px !important}
  .side-card{flex:1 1 200px}
  .side-card.alt{margin-right:0 !important}
}
@media (max-width:768px){
  .hero{padding:88px 16px 30px !important}
  .hero-title{font-size:clamp(.54rem,1.9vw,.65rem) !important}
  .hero-inner{gap:20px !important;padding-top:10px !important}
  .hero-stats-bar{padding:12px 16px !important;flex-wrap:wrap !important;gap:12px !important}
  .hero-stats-bar .divider{display:none !important}
  .hero-stats-bar>div:not(.divider){min-width:45%}
  .hero-side{flex-direction:column !important}
  .side-card{min-width:0 !important}
}

/* ==== EXTRA ANIMATIONS ==== */

/* Cursor glow follower */
.cursor-glow{
  position:fixed;top:0;left:0;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(236,90,160,.28),rgba(214,51,132,.08) 40%,transparent 70%);
  pointer-events:none;z-index:300;mix-blend-mode:screen;
  opacity:.6;transition:opacity .3s, width .4s, height .4s;
  filter:blur(12px);
}
.cursor-glow.active{opacity:1;width:400px;height:400px;transform-origin:center}

/* Ripple */
.btn, .btn-xl, .btn-play, .btn-cta, .nav-cta, .smart-banner{position:relative;overflow:hidden}
.ripple{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 60%);
  pointer-events:none;transform:scale(0);
  animation:rippleAnim .7s ease-out forwards;
}
@keyframes rippleAnim{
  to{transform:scale(1);opacity:0}
}

/* Letter-by-letter reveal */
.section h2 .char{
  display:inline-block;opacity:0;
  transform:translateY(24px) rotateX(-60deg);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  transform-origin:50% 100%;
}
.section h2 .char.in{opacity:1;transform:translateY(0) rotateX(0)}
.section h2 .gold-char{
  background:linear-gradient(135deg,var(--gold-deep),var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Clip-path reveal for images */
.clip-reveal{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s cubic-bezier(.76,0,.24,1);
}
.clip-reveal.revealed{clip-path:inset(0 0 0 0)}

/* Service card icon 3D flip */
.service-card .icon i{
  display:inline-block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
}

/* Section enter (stronger) */
.section{transition:opacity .8s, transform .8s}

/* Sparkle (confetti) on CTA click */
.spark{
  position:fixed;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#fff,var(--gold-2));
  box-shadow:0 0 14px var(--gold-2),0 0 28px var(--gold);
  pointer-events:none;z-index:400;
  animation:sparkFly .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes sparkFly{
  0%{transform:translate(0,0) scale(0);opacity:0}
  10%{opacity:1;transform:translate(0,0) scale(1)}
  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}
}

/* Animated gradient for stats numbers */
.grad-anim{
  background-size:200% 200% !important;
  animation:gradFlow 4s ease-in-out infinite !important;
}
@keyframes gradFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* Smart banner spotlight on mouse */
.smart-banner{position:relative}
.smart-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 250px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.15),transparent 60%);
  opacity:0;transition:opacity .4s;
  mix-blend-mode:overlay;
}
.smart-banner:hover::after{opacity:1}

/* Pulse once on sight */
@keyframes pulseOnce{
  0%{box-shadow:0 0 0 0 rgba(214,51,132,.5)}
  100%{box-shadow:0 0 0 20px rgba(214,51,132,0)}
}
.pulse-once{animation:pulseOnce 1.2s ease-out 1}

/* Parallax images */
.about-img-frame, .gallery-item img, .visual-main{
  transform:translateY(var(--py,0));
  transition:transform .15s linear;
}

/* Hero bg parallax smooth */
.hero-bg-img{transition:transform .2s linear}

/* Stronger entry for data-animate */
[data-animate]{
  filter:blur(4px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s;
}
[data-animate].in{filter:blur(0)}

/* Text shadow pulse on hero title */
@keyframes titleGlow{
  0%,100%{text-shadow:0 10px 40px rgba(0,0,0,.5),0 0 60px rgba(236,90,160,.15)}
  50%{text-shadow:0 10px 40px rgba(0,0,0,.55),0 0 100px rgba(236,90,160,.35)}
}
.hero-title{animation:titleGlow 5s ease-in-out infinite}

/* Icon bounce on reveal for why-card */
.why-card.in i,.feature i{animation:iconBounce .9s cubic-bezier(.2,1.6,.4,1)}
@keyframes iconBounce{
  0%{transform:scale(0) rotate(-30deg)}
  60%{transform:scale(1.2) rotate(10deg)}
  100%{transform:scale(1) rotate(0)}
}

/* Continuous floating on hero decorations */
.hero-eyebrow{animation:eyebrowPulse 3s ease-in-out infinite}
@keyframes eyebrowPulse{
  50%{box-shadow:0 0 0 8px rgba(236,90,160,0),0 0 40px rgba(236,90,160,.3)}
}

/* Scroll-triggered upward slide for all paragraphs */
.section p{transition:opacity .8s .1s,transform .8s .1s}
.section.section-in p{opacity:1;transform:translateY(0)}

/* Tilt cards smooth */
.side-card, .side-badge, .hover-card{
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  transform-style:preserve-3d;
}

/* Footer link underline slide */
.footer-grid a{position:relative;display:inline-block;transition:color .3s,padding .3s}
.footer-grid a::before{
  content:"→";position:absolute;right:-16px;opacity:0;transition:right .3s,opacity .3s;color:var(--gold);
}
.footer-grid a:hover{padding-left:16px;color:var(--gold)}
.footer-grid a:hover::before{right:-4px;opacity:1}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .cursor-glow,.hero-title{animation:none !important}
  .clip-reveal{clip-path:none !important}
  .grad-anim{animation:none !important}
}

/* ==== IMAGE VISIBILITY SAFETY ==== */
.clip-reveal{clip-path:none !important}
.clip-reveal.revealed{clip-path:none !important}

/* Don't blur image-containing elements */
[data-animate].gallery-item,[data-animate].about-image,
[data-animate].hero-visual,[data-animate].smart-banner,
[data-animate].hero-right{filter:none !important}

/* Ensure images always visible */
.about-img-frame,.gallery-item,.gallery-item img,
.smart-banner,.visual-main,.visual-frame{
  clip-path:none !important;
  opacity:1 !important;
}

/* ==== HERO VIDEO REFINED ==== */
.hero-bg-video{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;
  object-fit:cover !important;object-position:center center !important;
  filter:saturate(1.1) contrast(1.08) brightness(.7) !important;
  transform:scale(1.04);
  animation:videoDrift 30s ease-in-out infinite alternate;
}
@keyframes videoDrift{
  0%{transform:scale(1.04) translateX(0)}
  100%{transform:scale(1.08) translateX(-1.5%)}
}

/* Smoother, deeper overlay for better text contrast + magenta mood */
.hero-bg-overlay{
  background:
    linear-gradient(90deg,rgba(10,5,8,.3) 0%,rgba(10,5,8,.55) 30%,rgba(10,5,8,.85) 70%,rgba(10,5,8,.95) 100%) !important,
    radial-gradient(ellipse 70% 100% at 92% 50%,rgba(168,30,102,.38),transparent 70%) !important,
    linear-gradient(180deg,rgba(10,5,8,.65) 0%,transparent 25%,transparent 65%,rgba(10,5,8,.85) 100%) !important;
}

/* Add subtle magenta tint overlay that pulses */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 30% 50%,rgba(214,51,132,.08),transparent 60%);
  animation:heroTint 8s ease-in-out infinite alternate;
}
@keyframes heroTint{to{opacity:.5}}

/* Fade-in the video itself on first load */
.hero-bg-video{
  opacity:0;animation:videoFadeIn 1.8s cubic-bezier(.2,.8,.2,1) .2s forwards,
            videoDrift 30s ease-in-out 2s infinite alternate;
}
@keyframes videoFadeIn{to{opacity:1}}

/* ==== HERO SHORTER ==== */
.hero{
  min-height:auto !important;
  padding:90px 24px 30px !important;
}
.hero-inner{
  min-height:auto !important;
  padding-top:10px !important;
  gap:30px !important;
}
.hero-stats-bar{margin:16px auto 0 !important;padding:10px 22px !important}
.hero-stats-bar strong{font-size:1rem !important}
.hero-stats-bar span{font-size:9px !important}
.hero-stats-bar .divider{height:22px !important}

.hero-ticker{top:56px !important;padding:4px 0 !important}
.ticker-track span{font-size:10px !important}

@media (max-width:1024px){
  .hero{padding:80px 20px 30px !important}
  .hero-inner{gap:20px !important}
}
@media (max-width:768px){
  .hero{padding:72px 16px 24px !important}
}

/* ==== HEADER COMPACT ==== */
#navbar{padding:8px 0 !important}
#navbar.scrolled{padding:6px 0 !important;box-shadow:0 2px 12px rgba(168,30,102,.08)}
.nav-container{padding:0 22px !important;gap:18px !important}
.logo-img{height:34px !important}
.nav-links{gap:16px !important}
.nav-links a{font-size:11.5px !important;font-weight:600 !important}
.nav-cta{padding:6px 13px !important;font-size:11px !important}
.hamburger{width:26px !important;height:22px !important}

/* shift ticker + hero under new header */
.hero-ticker{top:50px !important;padding:4px 0 !important}
.ticker-track span{font-size:9.5px !important}
.ticker-track span i{font-size:8px !important}

.hero{padding:76px 24px 26px !important}

@media (max-width:768px){
  #navbar{padding:7px 0 !important}
  .logo-img{height:30px !important}
  .nav-cta{padding:5px 11px !important;font-size:10.5px !important}
  .hero{padding:62px 16px 22px !important}
  .hero-ticker{top:44px !important}
}

/* ==== HEADER BACK TO ORIGINAL SIZE ==== */
#navbar{padding:16px 0 !important}
#navbar.scrolled{padding:12px 0 !important}
.nav-container{padding:0 32px !important;gap:24px !important}
.logo-img{height:52px !important}
.nav-links{gap:26px !important}
.nav-links a{font-size:14px !important;font-weight:600 !important}
.nav-cta{padding:10px 22px !important;font-size:13px !important}
.hamburger{width:32px !important;height:26px !important}

/* ticker + hero adjusted under larger header */
.hero-ticker{top:84px !important;padding:6px 0 !important}
.ticker-track span{font-size:11px !important}
.ticker-track span i{font-size:10px !important}

.hero{padding:120px 24px 30px !important}

@media (max-width:768px){
  #navbar{padding:14px 0 !important}
  .logo-img{height:44px !important}
  .nav-cta{padding:8px 16px !important;font-size:12px !important}
  .hero{padding:100px 16px 26px !important}
  .hero-ticker{top:72px !important}
}

/* ==== Hero title even smaller ==== */
.hero-title{
  font-size:clamp(.42rem,.58vw,.58rem) !important;
  line-height:1.65 !important;
  margin-bottom:6px !important;
  font-weight:700 !important;
}
@media (max-width:768px){
  .hero-title{font-size:clamp(.42rem,1.6vw,.55rem) !important}
}

/* ==== Hero title smaller again ==== */
.hero-title{
  font-size:clamp(.38rem,.5vw,.5rem) !important;
  line-height:1.7 !important;
  margin-bottom:4px !important;
}
@media (max-width:768px){
  .hero-title{font-size:clamp(.38rem,1.4vw,.48rem) !important}
}

/* ==== Hero title smaller once more ==== */
.hero-title{
  font-size:clamp(.3rem,.4vw,.4rem) !important;
  line-height:1.75 !important;
  margin-bottom:3px !important;
}
@media (max-width:768px){
  .hero-title{font-size:clamp(.3rem,1.2vw,.38rem) !important}
}

/* ==== Hero title tiny ==== */
.hero-title{
  font-size:clamp(.22rem,.3vw,.3rem) !important;
  line-height:1.8 !important;
  margin-bottom:2px !important;
}
@media (max-width:768px){
  .hero-title{font-size:clamp(.22rem,.9vw,.28rem) !important}
}

/* ==== FIX: Override old .hero h1 rule (was 7.5rem) ==== */
.hero h1,
.hero .hero-title{
  font-size:clamp(.9rem,1.4vw,1.2rem) !important;
  font-weight:700 !important;
  line-height:1.55 !important;
  letter-spacing:0 !important;
  margin-bottom:8px !important;
  text-shadow:0 2px 12px rgba(0,0,0,.4) !important;
}
.hero h1 .line,
.hero .hero-title .line{display:block !important;padding:0 !important;margin:0 !important}
.hero h1 em,
.hero .hero-title em{
  font-style:normal !important;font-weight:700 !important;
  line-height:1.55 !important;padding:0 2px !important;
  filter:none !important;
}
.hero h1 em::after,
.hero .hero-title em::after{display:none !important}
@media (max-width:768px){
  .hero h1,.hero .hero-title{font-size:clamp(.85rem,3vw,1.05rem) !important}
}

/* ==== Hero title proper readable size ==== */
.hero h1,
.hero .hero-title{
  font-size:clamp(1.5rem,2.6vw,2.25rem) !important;
  line-height:1.45 !important;
  margin-bottom:14px !important;
  font-weight:800 !important;
}
@media (max-width:768px){
  .hero h1,.hero .hero-title{font-size:clamp(1.4rem,5vw,1.8rem) !important}
}

/* ==== Hero title bigger ==== */
.hero h1,
.hero .hero-title{
  font-size:clamp(2rem,3.4vw,3rem) !important;
  line-height:1.4 !important;
  margin-bottom:16px !important;
  font-weight:800 !important;
}
@media (max-width:768px){
  .hero h1,.hero .hero-title{font-size:clamp(1.8rem,6vw,2.4rem) !important}
}

/* ==== Hero title bigger+ ==== */
.hero h1,
.hero .hero-title{
  font-size:clamp(2.5rem,4.4vw,4rem) !important;
  line-height:1.35 !important;
  margin-bottom:20px !important;
}
@media (max-width:768px){
  .hero h1,.hero .hero-title{font-size:clamp(2.1rem,7vw,3rem) !important}
}

/* ==== LANGUAGE SWITCHER ==== */
.lang-switch{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:50px;
  border:1px solid rgba(214,51,132,.3);
  color:var(--gold-deep);font-size:12px;font-weight:700;
  transition:var(--trans);
}
.lang-switch i{font-size:11px}
.lang-switch:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
#navbar:not(.scrolled) .lang-switch{color:#fff;border-color:rgba(255,255,255,.3)}
#navbar:not(.scrolled) .lang-switch:hover{background:var(--gold-2);border-color:var(--gold-2)}

/* ==== LTR (English) SPECIFIC OVERRIDES ==== */
[dir="ltr"] body{
  font-family:'Inter','Segoe UI',sans-serif;
  direction:ltr;
}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] h4,[dir="ltr"] h5{
  font-family:'Playfair Display','Georgia',serif;
  letter-spacing:-.01em;
}

/* Avatar stacking for LTR */
[dir="ltr"] .av{margin-right:0;margin-left:-10px}
[dir="ltr"] .av:first-child{margin-left:0}

/* Nav underline direction */
[dir="ltr"] .nav-links a:not(.nav-cta)::after{right:auto;left:0}

/* Flip side card alt offset */
[dir="ltr"] .side-card.alt{margin-right:0;margin-left:28px}

/* About badge position */
[dir="ltr"] .about-badge{right:auto;left:-16px}

/* Back-to-top position */
[dir="ltr"] .back-top{left:auto;right:30px}

/* Vertical label position */
[dir="ltr"] .hero-vertical-label{left:auto;right:24px}

/* Section-tag icon line before */
[dir="ltr"] .section-tag::before{margin-left:0;margin-right:10px}

/* Italic look better in English for the em */
[dir="ltr"] .hero-title em{font-style:italic !important}
[dir="ltr"] .italic-gold{font-style:italic}

/* Ticker direction (already works, but adjust gap for English) */
[dir="ltr"] .ticker-track{direction:ltr}

/* Service card link hover offset flips */
[dir="ltr"] .service-card:hover .link i{transform:translateX(4px)}

/* Footer link arrow on hover */
[dir="ltr"] .footer-grid a::before{
  content:"→";right:auto;left:-16px;
}
[dir="ltr"] .footer-grid a:hover{padding-left:0;padding-right:16px}
[dir="ltr"] .footer-grid a:hover::before{left:-4px;right:auto}

/* Arrow/chevron flip not needed with fa-arrow-right */

/* Mobile menu slide-in from right for LTR */
@media (max-width:768px){
  [dir="ltr"] .nav-links{
    right:auto;left:-100%;border-left:none;border-right:1px solid var(--line);
  }
  [dir="ltr"] .nav-links.active{left:0}
}

/* ==== WHATSAPP FLOATING BUTTON ==== */
.whatsapp-fab{
  position:fixed;bottom:24px;right:24px;z-index:95;
  width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#25D366 0%,#1ebe5a 100%);
  color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(37,211,102,.5),0 4px 10px rgba(0,0,0,.15);
  transition:var(--trans);
  font-size:28px;
}
.whatsapp-fab:hover{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 14px 36px rgba(37,211,102,.6),0 6px 14px rgba(0,0,0,.2);
}
.whatsapp-fab i{position:relative;z-index:2;color:#fff}

/* Pulse ring */
.wa-pulse{
  position:absolute;inset:0;border-radius:50%;
  background:#25D366;opacity:.5;z-index:1;
  animation:waPulse 2s ease-out infinite;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.6);opacity:0}
}

/* Tooltip */
.wa-tooltip{
  position:absolute;bottom:50%;right:calc(100% + 14px);
  transform:translateY(50%);
  background:#1a1418;color:#fff;
  padding:8px 14px;border-radius:10px;
  font-size:12px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  transition:opacity .3s, transform .3s;
}
.wa-tooltip::after{
  content:"";position:absolute;top:50%;right:-5px;transform:translateY(-50%) rotate(45deg);
  width:10px;height:10px;background:#1a1418;
}
.whatsapp-fab:hover .wa-tooltip{
  opacity:1;transform:translateY(50%) translateX(-4px);
}

/* Stack back-top above WhatsApp in LTR */
[dir="ltr"] .back-top{bottom:94px !important;right:30px !important;left:auto !important}

/* RTL: flip tooltip direction */
[dir="rtl"] .wa-tooltip{right:auto;left:calc(100% + 14px)}
[dir="rtl"] .wa-tooltip::after{right:auto;left:-5px}

@media (max-width:768px){
  .whatsapp-fab{width:52px;height:52px;font-size:24px;bottom:18px;right:18px}
  .wa-tooltip{display:none}
}

/* ==== English About image override ==== */
.about-img-frame.about-en{
  background:url('about-en.jpeg') center/cover no-repeat !important;
}

/* ==== Golf Car banner — portrait orientation ==== */
.smart-banner.banner-golf{
  aspect-ratio:3/4;
  max-width:480px;margin:24px auto 0;
  background-size:cover;background-position:center;
  display:block;
}
@media (min-width:768px){
  .smart-banner.banner-golf{aspect-ratio:16/9;max-width:none;margin-top:24px}
}

/* ==== GOLF SHOWCASE — professional two-column ==== */
.golf-showcase{
  position:relative;
  display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center;
  margin-top:36px;padding:40px;
  background:linear-gradient(135deg,#fff 0%,#fdf7fa 100%);
  border-radius:24px;
  border:1px solid rgba(214,51,132,.12);
  box-shadow:0 24px 60px rgba(168,30,102,.1),0 4px 12px rgba(0,0,0,.04);
  overflow:hidden;
}
.golf-showcase::before{
  content:"";position:absolute;top:-80px;right:-80px;z-index:0;pointer-events:none;
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(236,90,160,.18),transparent 70%);
}
.golf-showcase::after{
  content:"";position:absolute;bottom:-60px;left:-60px;z-index:0;pointer-events:none;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,51,132,.12),transparent 70%);
}

.golf-image{
  position:relative;z-index:1;
  aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px rgba(168,30,102,.25),0 8px 20px rgba(0,0,0,.1);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.golf-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.golf-showcase:hover .golf-image{transform:translateY(-6px)}
.golf-showcase:hover .golf-image img{transform:scale(1.06)}

.golf-badge{
  position:absolute;top:18px;right:18px;z-index:2;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold));
  color:#fff;padding:7px 16px;border-radius:50px;
  font-size:12px;font-weight:800;letter-spacing:.08em;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 8px 20px rgba(214,51,132,.4);
  backdrop-filter:blur(8px);
}
.golf-badge i{font-size:11px;color:#ffd67a}

.golf-content{position:relative;z-index:1}
.golf-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:50px;
  background:rgba(214,51,132,.1);color:var(--gold-deep);
  border:1px solid rgba(214,51,132,.22);
  font-size:12px;font-weight:700;letter-spacing:.02em;
  margin-bottom:18px;
}
.golf-tag i{color:var(--gold);font-size:11px}

.golf-content h3{
  font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  font-weight:800;line-height:1.3;letter-spacing:-.01em;
  color:var(--text);margin-bottom:16px;
}
.golf-content h3 em{
  font-style:normal;font-weight:900;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
[dir="ltr"] .golf-content h3{font-family:'Playfair Display',serif}
[dir="ltr"] .golf-content h3 em{font-style:italic}

.golf-content>p{
  color:#4a3d44;font-size:.95rem;line-height:1.85;
  margin-bottom:20px;
}

.golf-features{
  list-style:none;padding:0;margin:0 0 28px;
  display:grid;gap:10px;
}
.golf-features li{
  display:flex;align-items:center;gap:12px;
  font-size:.92rem;font-weight:500;color:#2a232a;
}
.golf-features i{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#fff;display:grid;place-items:center;font-size:10px;
  box-shadow:0 3px 10px rgba(236,90,160,.4);
}

@media (max-width:900px){
  .golf-showcase{grid-template-columns:1fr;gap:32px;padding:28px}
  .golf-image{max-width:400px;margin:0 auto}
  .golf-content{text-align:center}
  .golf-tag{margin-left:auto;margin-right:auto}
  .golf-features{max-width:340px;margin-left:auto;margin-right:auto;text-align:right}
  [dir="ltr"] .golf-features{text-align:left}
}
@media (max-width:480px){
  .golf-showcase{padding:20px;margin-top:24px}
  .golf-showcase::before,.golf-showcase::after{opacity:.4}
}