/* ============================================================
   AL-KAFAAT — Operation & Maintenance
   Scroll-driven brand site
============================================================ */
:root{
  --gold:#E9A81C;
  --gold-2:#F5C254;
  --gold-deep:#C8890B;
  --ink:#15151E;
  --ink-2:#1E1E2B;
  --ink-3:#262635;
  --paper:#FFFFFF;
  --mist:#F4F4F6;
  --ash:#8C8C99;
  --line:rgba(20,20,30,.10);
  --serif: 'Space Grotesk', sans-serif;
  --sans: 'Inter', sans-serif;
  --ar: 'Tajawal', sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:var(--ar);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--gold);color:var(--ink)}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--gold-deep)}
img,svg{display:block}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Logo ---------- */
.logo-svg{width:100%;height:100%;--logo-diamond:var(--ink);--logo-tools:#fff}
.logo-svg.sm{width:38px;height:38px}
.logo-svg.xl{width:120px;height:120px}
/* On dark backgrounds, invert so the diamond stays visible */
.loader .logo-svg,
.nav.on-dark .logo-svg,
.hero .logo-svg,
.foot .logo-svg{--logo-diamond:#fff;--logo-tools:var(--ink)}

/* ---------- Progress bar ---------- */
.progress-wrap{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;background:transparent}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));box-shadow:0 0 12px var(--gold)}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .6s ease,visibility .6s}
.loader.done{opacity:0;visibility:hidden}
.loader-mark{width:90px;height:90px;animation:pulse 1.4s var(--ease) infinite}
.loader-bar{width:180px;height:3px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:var(--gold);animation:load 1.3s var(--ease) forwards}
@keyframes load{to{width:100%}}
@keyframes pulse{50%{transform:scale(1.08)}}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);transition:background .4s,backdrop-filter .4s,padding .4s,box-shadow .4s}
.nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding-top:12px;padding-bottom:12px}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-brand-txt{font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:.06em;line-height:1.05;color:var(--ink);display:flex;flex-direction:column}
.nav-brand-txt small{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--ash);text-transform:uppercase}
.nav.on-dark .nav-brand-txt,.nav.on-dark .nav-links a{color:#fff}
.nav.on-dark .nav-brand-txt small{color:rgba(255,255,255,.6)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:16px;font-weight:500;letter-spacing:.02em;position:relative;transition:color .25s}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;inset-inline-start:0;bottom:-5px;height:2px;width:0;background:var(--gold);transition:width .3s var(--ease)}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:7px;background:var(--gold);color:var(--ink)!important;padding:9px 20px;border-radius:100px;font-weight:600;transition:transform .25s,box-shadow .25s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(233,168,28,.45)}
.nav-login{display:flex;align-items:center;gap:7px;padding:9px 20px;border-radius:100px;font-weight:600;font-size:15px;
  border:1.5px solid currentColor;opacity:.75;transition:opacity .25s,transform .25s,box-shadow .25s}
.nav-login:hover{opacity:1;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.12)}
.nav.on-dark .nav-login{color:#fff}
.nav.scrolled .nav-login{color:var(--ink)}

/* ---------- Generic section ---------- */
.section{position:relative;padding:clamp(90px,12vh,160px) clamp(20px,6vw,90px)}

/* ============================================================
   CINEMA REEL — full-screen sticky slides that stack & recede.
   Each slide sticks at the top; the next slide scrolls up and
   covers it (later DOM = painted on top). Scroll up = rewind.
============================================================ */
.reel-slide{position:sticky;top:0;min-height:100vh}
.reel-slide:not(.hero):not(.contact){display:flex;flex-direction:column;justify-content:center}
.reel-slide.section{padding-top:clamp(70px,9vh,118px);padding-bottom:clamp(70px,9vh,118px)}
/* dim overlay: darkens a slide as the next one covers it */
.slide-dim{position:absolute;inset:0;z-index:6;background:#07070d;opacity:0;pointer-events:none}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:22px}
.eyebrow.light{color:var(--gold-2)}
.eyebrow.center{text-align:center}
.h-big{font-family:var(--serif);font-weight:700;line-height:.94;letter-spacing:-.025em;font-size:clamp(44px,7.4vw,108px)}
.h-big.center{text-align:center}
.h-big.light{color:#fff}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.7;color:#43434f;max-width:54ch;margin-top:24px}
.lead.light{color:rgba(255,255,255,.78)}
.lead strong{color:var(--ink)}
.lead.light strong{color:#fff}

/* ============================================================
   HERO
============================================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#20202e 0%,var(--ink) 60%);overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.grid-glow{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;mask:radial-gradient(circle at 50% 40%,#000 0%,transparent 72%)}
.tri{position:absolute;width:0;height:0;opacity:.9}
.tri.t1{top:14%;left:8%;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:60px solid var(--gold)}
.tri.t2{top:24%;right:12%;border-left:24px solid transparent;border-right:24px solid transparent;border-bottom:42px solid #fff;opacity:.18}
.tri.t3{bottom:18%;left:16%;border-left:20px solid transparent;border-right:20px solid transparent;border-top:36px solid rgba(255,255,255,.14)}
.tri.t4{bottom:12%;right:10%;border-left:40px solid transparent;border-right:40px solid transparent;border-top:70px solid var(--gold);opacity:.85}
.tri.t5{top:42%;left:4%;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:28px solid var(--gold-2);opacity:.5}
.tri.t6{top:60%;right:6%;border-left:28px solid transparent;border-right:28px solid transparent;border-bottom:48px solid #fff;opacity:.1}

.hero-inner{position:relative;z-index:2;text-align:center;padding:0 20px;max-width:1100px}
.hero-logo{width:120px;height:120px;margin:0 auto 26px;filter:drop-shadow(0 14px 40px rgba(233,168,28,.35))}
.hero-kicker{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.28em;color:var(--gold-2);text-transform:uppercase;margin-bottom:18px}
.hero-kicker span{font-family:var(--ar)}
.hero-title{font-family:var(--serif);font-weight:700;line-height:.9;letter-spacing:-.02em}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{display:block;font-size:clamp(44px,9vw,128px)}
.hero-title .accent>span{color:var(--gold);font-size:clamp(20px,3.6vw,52px);letter-spacing:.02em;margin-top:6px}
.hero-sub{max-width:60ch;margin:26px auto 0;font-size:clamp(17px,1.6vw,22px);line-height:1.7;color:rgba(255,255,255,.7)}

.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.6)}
.scroll-hint span{font-size:13px;letter-spacing:.3em;font-weight:600}
.mouse{width:22px;height:36px;border:2px solid rgba(255,255,255,.4);border-radius:14px;display:flex;justify-content:center;padding-top:6px}
.mouse i{width:3px;height:7px;background:var(--gold);border-radius:3px;animation:scrolly 1.6s var(--ease) infinite}
@keyframes scrolly{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%,100%{opacity:0;transform:translateY(10px)}}

/* ============================================================
   ABOUT
============================================================ */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:center;max-width:1280px;margin:0 auto}
.about-left .h-big{margin-top:6px}
.about-right{display:flex;flex-direction:column;gap:24px}
.stat-card{background:linear-gradient(150deg,var(--ink) 0%,var(--ink-3) 100%);color:#fff;border-radius:26px;padding:40px;position:relative;overflow:hidden}
.stat-card::after{content:"";position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;background:radial-gradient(circle,var(--gold) 0%,transparent 70%);opacity:.4}
.stat-num{font-family:var(--serif);font-weight:700;font-size:clamp(64px,9vw,104px);line-height:1;display:flex;align-items:flex-start}
.stat-num .pct{font-size:.5em;color:var(--gold);margin-top:.15em}
.stat-lbl{margin-top:10px;font-size:18px;color:rgba(255,255,255,.75);line-height:1.5}
.stat-lbl span{font-family:var(--ar);color:var(--gold-2)}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mini{background:var(--mist);border-radius:18px;padding:22px 18px;text-align:center}
.mini b{font-family:var(--serif);font-size:34px;display:block;color:var(--ink)}
.mini span{font-size:14px;letter-spacing:.04em;color:var(--ash)}

.marquee{margin-top:clamp(60px,8vw,110px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:36px;white-space:nowrap;width:max-content;animation:scrollX 26s linear infinite}
.marquee-track span{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.6vw,34px);color:var(--ink);opacity:.85}
.marquee-track span:nth-child(even){color:var(--gold-deep)}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ============================================================
   VISION / MISSION
============================================================ */
.vm{background:var(--mist)}
.vm-head{text-align:center;margin-bottom:clamp(40px,6vw,70px)}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1180px;margin:0 auto}
.vm-card{position:relative;background:var(--paper);border-radius:26px;padding:clamp(34px,4vw,56px);overflow:hidden;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s}
.vm-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(20,20,30,.3)}
.vm-card.alt{background:linear-gradient(160deg,var(--ink),var(--ink-3));color:#fff;border-color:transparent}
.vm-no{font-family:var(--serif);font-weight:700;font-size:60px;color:var(--gold);opacity:.25;line-height:1}
.vm-card h3{font-family:var(--serif);font-size:clamp(26px,3vw,38px);margin:14px 0 16px;display:flex;align-items:baseline;gap:12px}
.vm-card h3 small{font-family:var(--ar);font-size:.6em;color:var(--gold-deep)}
.vm-card.alt h3 small{color:var(--gold-2)}
.vm-card p{font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:#4a4a56}
.vm-card.alt p{color:rgba(255,255,255,.8)}

/* ============================================================
   GOALS
============================================================ */
.goals{background:var(--ink);color:#fff}
.goals-head{max-width:1280px;margin:0 auto clamp(40px,6vw,64px)}
.goals-head .h-big{color:#fff}
.goals-list{list-style:none;max-width:1100px;margin:0 auto;counter-reset:g}
.goals-list li{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);align-items:center;
  padding:clamp(28px,4vw,46px) 0;border-top:1px solid rgba(255,255,255,.12)}
.goals-list li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.g-no{font-family:var(--serif);font-weight:700;font-size:clamp(38px,6vw,84px);color:transparent;-webkit-text-stroke:1.4px var(--gold);line-height:1}
.goals-list h3{font-family:var(--serif);font-size:clamp(24px,3.2vw,46px);margin-bottom:8px}
.goals-list p{font-size:clamp(17px,1.5vw,21px);color:rgba(255,255,255,.66);max-width:60ch}
.goals-list li:hover .g-no{color:var(--gold);-webkit-text-stroke:0}
.goals-list li{transition:padding .4s}

/* ============================================================
   VALUES
============================================================ */
.values{background:var(--paper)}
.values-head{text-align:center;margin-bottom:clamp(40px,6vw,64px)}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1280px;margin:0 auto}
.val{background:var(--mist);border-radius:24px;padding:36px 30px;transition:background .4s,transform .4s var(--ease),color .4s;position:relative;overflow:hidden}
.val::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--gold),var(--gold-deep));opacity:0;transition:opacity .4s}
.val>*{position:relative;z-index:1}
.val:hover{transform:translateY(-8px)}
.val:hover::before{opacity:1}
.val:hover h3,.val:hover p,.val:hover .val-ico{color:var(--ink)}
.val-ico{font-size:30px;color:var(--gold-deep);margin-bottom:18px;transition:color .4s}
.val h3{font-family:var(--serif);font-size:21px;margin-bottom:12px;transition:color .4s}
.val p{font-size:17px;line-height:1.65;color:#54545f;transition:color .4s}

/* ============================================================
   SERVICES (pinned horizontal scroll)
============================================================ */
.services{background:var(--ink-2);color:#fff}
.services-pin{height:100vh;overflow:hidden;display:flex;align-items:center}
.services-track{display:flex;gap:26px;padding:0 8vw;will-change:transform}
.panel{flex:0 0 auto;width:min(360px,72vw);height:64vh;min-height:420px;border-radius:28px;
  background:linear-gradient(165deg,var(--ink-3),#191923);border:1px solid rgba(255,255,255,.08);
  padding:38px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;transition:border-color .4s}
.panel:hover{border-color:rgba(233,168,28,.5)}
.panel .p-icon{font-size:46px;position:absolute;top:34px;left:38px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.panel .p-no{position:absolute;top:38px;right:38px;font-family:var(--serif);font-weight:700;font-size:18px;color:var(--gold)}
.panel h3{font-family:var(--serif);font-size:26px;margin-bottom:12px;line-height:1.1}
.panel p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.62)}
.panel::after{content:"";position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;background:radial-gradient(circle,var(--gold) 0%,transparent 70%);opacity:.12;transition:opacity .4s}
.panel:hover::after{opacity:.28}

.panel-intro{width:min(560px,86vw);background:transparent;border:none;justify-content:center}
.panel-intro::after{display:none}
.panel-intro h2{font-family:var(--serif);font-weight:700;font-size:clamp(36px,5vw,64px);line-height:.98;margin:16px 0 18px}
.panel-lead{font-size:19px;line-height:1.65;color:rgba(255,255,255,.7);max-width:42ch}
.drag-hint{margin-top:26px;font-size:15px;letter-spacing:.2em;color:var(--gold-2);font-weight:600}

.panel-outro{width:min(460px,84vw);background:linear-gradient(160deg,var(--gold),var(--gold-deep));border:none;justify-content:center;color:var(--ink)}
.panel-outro::after{display:none}
.panel-outro h3{font-size:clamp(28px,3.4vw,42px);color:var(--ink)}
.panel-outro h3 em{color:#fff}
.panel-outro ul{list-style:none;margin:22px 0 26px}
.panel-outro li{padding:9px 0;border-bottom:1px solid rgba(20,20,30,.18);font-weight:600;font-size:17px}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:14px 28px;border-radius:100px;font-weight:600;font-size:15px;align-self:flex-start;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.3)}

/* ============================================================
   MULLAK
============================================================ */
.mullak{background:radial-gradient(110% 110% at 80% 0%,#21212f 0%,var(--ink) 60%);color:#fff;overflow:hidden}
.mullak-glow{position:absolute;top:-10%;right:-5%;width:520px;height:520px;background:radial-gradient(circle,var(--gold) 0%,transparent 65%);opacity:.18;filter:blur(20px)}
.mullak-inner{position:relative;z-index:1;max-width:1100px;margin:0 auto}
.mullak-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:46px;max-width:760px}
.mullak-feats div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:24px 26px;transition:transform .4s var(--ease),border-color .4s}
.mullak-feats div:hover{transform:translateY(-5px);border-color:rgba(233,168,28,.5)}
.mullak-feats b{display:block;font-family:var(--serif);font-size:18px;color:var(--gold-2);margin-bottom:7px}
.mullak-feats span{font-size:16px;color:rgba(255,255,255,.66);line-height:1.6}

/* ============================================================
   PARTNERS
============================================================ */
.partners{background:var(--paper);text-align:center}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:1100px;margin:48px auto 0}
.logos span{font-family:var(--serif);font-weight:600;font-size:clamp(14px,1.5vw,18px);letter-spacing:.04em;color:#5a5a66;
  border:1px solid var(--line);border-radius:100px;padding:14px 26px;transition:all .35s var(--ease)}
.logos span:nth-child(3),.logos span:nth-child(4){font-family:var(--ar)}
.logos span:hover{color:var(--ink);border-color:var(--gold);background:rgba(233,168,28,.08);transform:translateY(-3px)}

/* ============================================================
   CONTACT + FOOTER
============================================================ */
.contact{background:var(--ink);color:#fff;padding-bottom:0}
.contact-inner{max-width:1100px;margin:0 auto;text-align:center}
.contact-title{font-family:var(--serif);font-weight:700;line-height:1;letter-spacing:-.02em;font-size:clamp(40px,7vw,96px);margin-top:8px}
.contact-title em{color:var(--gold)}
.contact-sub{margin-top:20px;color:rgba(255,255,255,.6);font-size:21px}
.contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:760px;margin:50px auto 40px}
.c-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:26px 28px;text-align:left;display:flex;flex-direction:column;gap:4px;position:relative;transition:transform .4s var(--ease),border-color .4s,background .4s}
.c-card:hover{transform:translateY(-5px);border-color:var(--gold);background:rgba(233,168,28,.07)}
.c-ic{position:absolute;top:24px;right:26px;font-size:22px;color:var(--gold)}
.c-card small{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.c-card b{font-family:var(--serif);font-size:clamp(16px,1.8vw,21px);font-weight:600}
.btn.big{padding:18px 40px;font-size:17px;background:var(--gold);color:var(--ink)}
.btn.big:hover{box-shadow:0 16px 40px rgba(233,168,28,.4)}

/* ============================================================
   SITE FOOTER (comprehensive)
============================================================ */
.site-footer{background:var(--ink);color:rgba(255,255,255,.75);font-family:var(--ar);padding:clamp(50px,7vw,90px) clamp(20px,6vw,90px) 0}

/* Top row: brand + social */
.sf-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.sf-brand{display:flex;align-items:center;gap:14px}
.sf-name{font-family:var(--serif);font-weight:700;font-size:22px;color:#fff;line-height:1}
.sf-subtitle{font-size:13px;color:rgba(255,255,255,.4);margin-top:3px}
.sf-socials{display:flex;gap:10px}
.sf-social{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);transition:all .3s var(--ease)}
.sf-social:hover{background:rgba(233,168,28,.12);border-color:rgba(233,168,28,.4);color:var(--gold);transform:translateY(-3px)}
.sf-divider{height:1px;background:rgba(255,255,255,.08);margin-bottom:48px}

/* 4-column grid */
.sf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,56px);margin-bottom:52px}
.sf-col-title{font-family:var(--serif);font-size:15px;font-weight:700;color:#fff;margin-bottom:20px;position:relative;padding-bottom:12px}
.sf-col-title::after{content:'';position:absolute;bottom:0;right:0;width:30px;height:2px;background:var(--gold);border-radius:2px}
.sf-text{font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.48);margin-bottom:16px}
.sf-badge{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--gold);background:rgba(233,168,28,.1);border:1px solid rgba(233,168,28,.25);border-radius:6px;padding:5px 10px}

/* Quick-links column */
.sf-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.sf-links a{font-size:14.5px;color:rgba(255,255,255,.48);transition:color .2s,padding-right .2s;display:block}
.sf-links a:hover{color:var(--gold);padding-right:4px}

/* Partners column */
.sf-partners{list-style:none;display:flex;flex-direction:column;gap:10px}
.sf-partners li{font-size:13.5px;font-family:var(--serif);color:rgba(255,255,255,.48);padding-right:16px;position:relative;line-height:1.45;transition:color .2s}
.sf-partners li::before{content:'·';position:absolute;right:0;color:var(--gold)}
.sf-partners li:nth-child(3),.sf-partners li:nth-child(4){font-family:var(--ar)}
.sf-partners li:hover{color:rgba(255,255,255,.75)}

/* Contact column */
.sf-contact{list-style:none;display:flex;flex-direction:column;gap:15px}
.sf-contact li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:rgba(255,255,255,.48)}
.sf-contact li svg{flex-shrink:0;margin-top:2px}
.sf-contact a{color:rgba(255,255,255,.48);transition:color .2s}
.sf-contact a:hover{color:var(--gold)}

/* Bottom bar */
.sf-bottom{border-top:1px solid rgba(255,255,255,.08);padding:22px 0 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sf-copy{font-size:13px;color:rgba(255,255,255,.32)}
.sf-bottom-links{display:flex;gap:14px;align-items:center;font-size:13px;color:rgba(255,255,255,.25)}
.sf-bottom-links a{color:rgba(255,255,255,.32);transition:color .2s}
.sf-bottom-links a:hover{color:var(--gold)}
.sf-bottom-links span{color:rgba(255,255,255,.15)}
.sf-ver{font-size:11.5px;color:rgba(255,255,255,.18);font-family:var(--sans);letter-spacing:.04em}

/* Footer responsive */
@media(max-width:900px){.sf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sf-grid{grid-template-columns:1fr}.sf-top{flex-direction:column;align-items:flex-start}}

/* ============================================================
   Reveal defaults (JS animates)
============================================================ */
[data-anim]{opacity:0;transform:translateY(34px)}

/* ============================================================
   RESPONSIVE
============================================================ */
/* ── Mobile toggle button ── */
.mob-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:8px;background:none;border:none;cursor:pointer;position:relative;z-index:102}
.mob-toggle span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .3s,width .3s}
.mob-toggle span:nth-child(1){width:22px}
.mob-toggle span:nth-child(2){width:16px}
.mob-toggle span:nth-child(3){width:22px}
.mob-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);width:22px}
.mob-toggle.open span:nth-child(2){opacity:0;width:0}
.mob-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:22px}
.nav.on-dark .mob-toggle{color:#fff}
.nav.scrolled .mob-toggle{color:var(--ink)}

/* ── Mobile menu drawer ── */
.mob-menu{position:fixed;top:0;right:0;bottom:0;width:min(300px,85vw);background:var(--ink);z-index:101;padding:80px 28px 40px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .35s var(--ease)}
.mob-menu.open{transform:translateX(0)}
.mob-menu a{font-size:18px;font-weight:600;color:rgba(255,255,255,.75);padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);transition:color .2s}
.mob-menu a:hover{color:#fff}
.mob-menu-cta{margin-top:16px;background:var(--gold);color:var(--ink)!important;padding:14px 24px!important;border-radius:100px;text-align:center;font-weight:700!important;border:none!important}
.mob-menu-bd{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;opacity:0;pointer-events:none;transition:opacity .35s}
.mob-menu-bd.active{opacity:1;pointer-events:all}

@media (max-width:980px){
  .mob-toggle{display:flex}
  .nav-links a:not(.nav-cta){display:none}
  .nav-cta{display:none}
  .about-grid{grid-template-columns:1fr}
  .vm-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .mullak-feats{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav-brand-txt small{display:none}
  .values-grid{grid-template-columns:1fr}
  .goals-list li{grid-template-columns:1fr;gap:6px}
  .mini-stats{grid-template-columns:1fr}
  .mini{display:flex;align-items:center;justify-content:center;gap:10px}
  .mini b{display:inline}
  .panel{width:80vw}
}

/* ============================================================
   ============  PREMIUM CINEMATIC LAYER  =====================
============================================================ */

/* ---------- Film grain ---------- */
.grain{position:fixed;inset:-50%;z-index:95;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px;animation:grain 6s steps(8) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}30%{transform:translate(3%,-2%)}
  50%{transform:translate(-2%,4%)}70%{transform:translate(4%,2%)}90%{transform:translate(-3%,-3%)}100%{transform:translate(0,0)}}

/* ---------- Custom magnetic cursor (desktop fine-pointer only) ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:210;pointer-events:none;border-radius:50%;
  transform:translate3d(-50%,-50%,0);will-change:transform;opacity:0;transition:opacity .3s}
body.cursor-on .cursor-dot,body.cursor-on .cursor-ring{opacity:1}
.cursor-dot{width:6px;height:6px;background:var(--gold)}
.cursor-ring{width:40px;height:40px;border:1.4px solid rgba(233,168,28,.55);
  transition:width .28s var(--ease),height .28s var(--ease),background .28s,border-color .28s,opacity .3s}
.cursor-ring.hov{width:64px;height:64px;background:rgba(233,168,28,.10);border-color:rgba(233,168,28,.25)}
@media (hover:hover) and (pointer:fine){ body.cursor-on,body.cursor-on a,body.cursor-on button,body.cursor-on .magnetic{cursor:none} }

/* ---------- Gradient + glow helpers ---------- */
.grad-gold{background:linear-gradient(100deg,var(--gold-2),var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- Scene progress rail (modern chapter index) ---------- */
.scene-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:85;
  display:flex;flex-direction:column;gap:16px;align-items:flex-end;padding-right:28px}
.scene-rail button{all:unset;cursor:pointer;display:flex;align-items:center;gap:13px}
.scene-rail .num{font-family:var(--serif);font-weight:600;font-size:12px;letter-spacing:.05em;
  color:#fff;opacity:0;transform:translateX(8px);transition:all .4s var(--ease)}
.scene-rail .lbl{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;opacity:0;transform:translateX(8px);transition:all .4s var(--ease);white-space:nowrap}
.scene-rail .tick{display:block;width:26px;height:2px;border-radius:2px;background:rgba(255,255,255,.42);
  transition:all .45s var(--ease)}
.scene-rail button:hover .lbl,.scene-rail button:hover .num{opacity:.6;transform:none}
.scene-rail button:hover .tick{width:32px;background:rgba(255,255,255,.85)}
.scene-rail button.active .lbl{opacity:1;transform:none;color:var(--gold)}
.scene-rail button.active .num{opacity:.55;transform:none;color:var(--gold)}
.scene-rail button.active .tick{width:48px;background:var(--gold);box-shadow:0 0 14px rgba(233,168,28,.85)}
/* adapts to light sections */
.scene-rail.on-light .lbl,.scene-rail.on-light .num{color:var(--ink)}
.scene-rail.on-light .tick{background:rgba(20,20,30,.25)}
.scene-rail.on-light button:hover .tick{background:rgba(20,20,30,.7)}
.scene-rail.on-light button.active .lbl,.scene-rail.on-light button.active .num{color:var(--gold-deep)}
.scene-rail.on-light button.active .tick{background:var(--gold-deep);box-shadow:0 0 12px rgba(200,137,11,.45)}

/* ---------- Loader counter ---------- */
.loader-num{position:absolute;bottom:34px;right:38px;font-family:var(--serif);font-weight:700;
  font-size:clamp(40px,9vw,90px);color:rgba(255,255,255,.10);line-height:1}
.loader-tag{position:absolute;bottom:46px;left:38px;font-size:14px;letter-spacing:.32em;color:var(--gold-2);font-weight:600}

/* ---------- Hero aurora ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;mix-blend-mode:screen;will-change:transform}
.aurora .au1{width:46vw;height:46vw;left:-8vw;top:-6vw;background:radial-gradient(circle,#E9A81C,transparent 65%);animation:float1 16s ease-in-out infinite}
.aurora .au2{width:40vw;height:40vw;right:-6vw;top:8vw;background:radial-gradient(circle,#F5C254,transparent 62%);opacity:.32;animation:float2 20s ease-in-out infinite}
.aurora .au3{width:38vw;height:38vw;left:24vw;bottom:-14vw;background:radial-gradient(circle,#7C5BD6,transparent 60%);opacity:.22;animation:float3 24s ease-in-out infinite}
@keyframes float1{50%{transform:translate(18%,12%) scale(1.15)}}
@keyframes float2{50%{transform:translate(-14%,16%) scale(1.1)}}
@keyframes float3{50%{transform:translate(12%,-12%) scale(1.2)}}
.hero-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,transparent 45%,rgba(8,8,14,.72) 100%)}

/* ---------- Energy circuit → charges the logo on scroll ---------- */
.energy{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.energy path{fill:none}
.energy-base path{stroke:rgba(233,168,28,.13);stroke-width:1.4}
.energy-flow .trace{stroke:#FFB23E;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,150,30,.95))}
.energy-flow .head{fill:#FFE3A6;filter:drop-shadow(0 0 7px #FF8A1F) drop-shadow(0 0 16px #FF8A1F)}

/* Logo charge: orange glow + an orange copy fading in as --charge rises */
.hero-logo{position:relative;--charge:0;
  filter:drop-shadow(0 14px 38px rgba(233,168,28,calc(.22 + var(--charge)*.4)))
         drop-shadow(0 0 calc(var(--charge)*48px) rgba(255,120,12,calc(var(--charge)*.9)))}
.hero-logo .logo-charge{position:absolute;inset:0;opacity:var(--charge);
  --logo-diamond:#FF8C1A;--logo-tools:#241200;--gold:#FFB23E}

/* ---------- Hero char-split reveal ---------- */
.hero-title .ch{display:inline-block;will-change:transform}

/* ---------- 3D tilt cards ---------- */
.val,.vm-card,.c-card,.mullak-feats div,.stat-card,.panel{transform-style:preserve-3d}

/* ---------- Slide-dim → cinematic vignette ---------- */
.slide-dim{background:radial-gradient(120% 100% at 50% 50%,rgba(7,7,13,.35),rgba(7,7,13,.92))}

/* ---------- Buttons get a sheen ---------- */
.btn,.nav-cta,.btn.big{position:relative;overflow:hidden}
.btn::after,.nav-cta::after,.btn.big::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .6s var(--ease)}
.btn:hover::after,.nav-cta:hover::after,.btn.big:hover::after{left:140%}

@media (max-width:980px){ .scene-rail{display:none} .cursor-dot,.cursor-ring{display:none} }

/* ── Mobile: reveal all animated sections immediately ── */
@media (max-width:980px){
  [data-anim]{opacity:1!important;transform:none!important;clip-path:none!important}
  .services-pin{height:auto;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .services-track{transform:none!important;padding:0 20px 20px;gap:18px;scroll-snap-type:x mandatory}
  .services-track>.panel{scroll-snap-align:start;width:min(300px,80vw)}
  .panel-intro{width:min(86vw,400px)}
}

/* ============================================================
   Reduced motion
============================================================ */
@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1;transform:none}
  .marquee-track,.mouse i,.grain,.aurora span{animation:none}
  .cursor-dot,.cursor-ring,.scene-rail{display:none}
}

/* ============================================================
   RTL OVERRIDES — Arabic layout corrections
============================================================ */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .nav-brand-txt,
html[dir="rtl"] .nav-brand-txt small,
html[dir="rtl"] .nav-links a,
html[dir="rtl"] .scroll-hint span,
html[dir="rtl"] .drag-hint,
html[dir="rtl"] .scene-rail .lbl,
html[dir="rtl"] .scene-rail .num,
html[dir="rtl"] .loader-tag,
html[dir="rtl"] .c-card small,
html[dir="rtl"] .hero-title .accent>span{
  letter-spacing:0;
  text-transform:none;
}

/* Eyebrow keep uppercase look via font-weight instead */
html[dir="rtl"] .eyebrow{font-weight:700;font-size:16px}

/* heading letter-spacing reset */
html[dir="rtl"] .h-big,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .contact-title{letter-spacing:-.01em}

/* Nav underline: inset-inline-start handles RTL automatically */

/* Contact cards: icon moves to left (start) in RTL */
html[dir="rtl"] .c-ic{right:auto;left:26px}
html[dir="rtl"] .c-card{text-align:right}

/* Loader tag/counter swap sides */
html[dir="rtl"] .loader-tag{left:auto;right:38px}
html[dir="rtl"] .loader-num{right:auto;left:34px}

/* Service panel icon/number swap for RTL reading order */
html[dir="rtl"] .panel .p-icon{left:auto;right:38px}
html[dir="rtl"] .panel .p-no{right:auto;left:38px}
html[dir="rtl"] .panel{text-align:right}

/* Scene navigation rail moves to left side in RTL */
html[dir="rtl"] .scene-rail{right:auto;left:0;padding-right:0;padding-left:28px;align-items:flex-start}
html[dir="rtl"] .scene-rail button{flex-direction:row-reverse}
html[dir="rtl"] .scene-rail .num,
html[dir="rtl"] .scene-rail .lbl{transform:translateX(-8px)}
html[dir="rtl"] .scene-rail button:hover .lbl,
html[dir="rtl"] .scene-rail button:hover .num,
html[dir="rtl"] .scene-rail button.active .lbl,
html[dir="rtl"] .scene-rail button.active .num{transform:none}

/* Mullak glow stays on the opposite side */
html[dir="rtl"] .mullak-glow{right:auto;left:-5%}

/* Panel-outro button alignment */
html[dir="rtl"] .panel-outro .btn{align-self:flex-end}

/* Tajawal needs slightly more line-height at large sizes */
html[dir="rtl"] .h-big{line-height:1.05}
html[dir="rtl"] .hero-title .line>span{line-height:1.1}

@media (max-width:980px){
  html[dir="rtl"] .scene-rail{display:none}
}