:root{
  --bg:#06070a;
  --fg:#eef1f6;
  --muted: rgba(238,241,246,.72);
  --line: rgba(255,255,255,.12);
  --glass: rgba(255,255,255,.06);

  --gold1: #f5d07a;
  --gold2: #b88a2a;

  --r: 26px;
  --shadow: 0 40px 120px rgba(0,0,0,.65);

  /* performance knobs */
  --blur: 10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Noto Kufi Arabic", Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow-x:hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a{color:inherit; text-decoration:none}

/* =============== Perf helpers =============== */
/* Render below-the-fold sections lazily (big win on mobile) */
.section,
.trusted,
.final{
  content-visibility: visible;
  contain-intrinsic-size: auto;
}


/* Reduce costly paints inside big components */
.sliderShell,
.service,
.final__card,
.stage__frame{
  contain: layout paint style;
}

/* =============== Noise (optimized) =============== */
.noise{
  position:fixed; inset:0; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  /* overlay blend is gorgeous but expensive on some devices */
  mix-blend-mode: overlay;
  will-change: opacity;
}

/* =============== Nav =============== */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 22px;
  background: linear-gradient(to bottom, rgba(6,7,10,.88), rgba(6,7,10,0));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.brand{display:flex; align-items:center; gap:12px}
.brand__mark{
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing:.12em;
  font-weight:800;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.brand__name{opacity:.85}

.nav__links{display:flex; gap:16px; align-items:center; color: rgba(238,241,246,.74)}
.nav__links a:hover{color: rgba(238,241,246,.92)}

.pill{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}

.lang{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(238,241,246,.86);
  cursor:pointer;
}
.lang__dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold1), var(--gold2));
  box-shadow: 0 0 0 6px rgba(245,208,122,.10);
}

/* =============== Hero =============== */
.hero{
  min-height: 100vh;
  padding: 120px 22px 70px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(184,138,42,.14), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(145, 90, 255, .14), transparent 60%),
    radial-gradient(900px 520px at 70% 80%, rgba(0, 255, 200, .08), transparent 60%),
    var(--bg);
}

.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.halo{
  position:absolute;
  width: 900px; height: 900px;
  filter: blur(70px);
  opacity:.42;
  animation: floaty 14s ease-in-out infinite;
  will-change: transform, opacity;
}
.h1{left:-280px; top:-260px; background: radial-gradient(circle at 40% 35%, rgba(245,208,122,.55), transparent 60%);}
.h2{right:-320px; top:-180px; background: radial-gradient(circle at 40% 35%, rgba(145,90,255,.55), transparent 60%); animation-duration: 16s;}
.h3{left:28%; bottom:-560px; background: radial-gradient(circle at 40% 35%, rgba(0,255,200,.35), transparent 60%); animation-duration: 18s;}
@keyframes floaty{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(40px,-30px,0) scale(1.03)}
}

.gridlines{
  position:absolute; inset:0; opacity:.18;
  background:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: radial-gradient(closest-side at 50% 20%, rgba(0,0,0,1), rgba(0,0,0,.15), transparent 70%);
}

.hero__inner{
  position:relative;
  max-width: 1180px;
  margin: 0 auto;
}

.kicker{
  margin:0 0 14px;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(238,241,246,.62);
}

.h1{
  margin:0 0 14px;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.gold{
  background: linear-gradient(90deg, var(--gold1), rgba(255,255,255,.85), var(--gold2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sub{
  margin:0 0 24px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
  max-width: 64ch;
}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 18px;}

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(238,241,246,.92);
  font-weight: 800;
  letter-spacing:.01em;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform;
  transform: translateZ(0);
}
.btn:hover{transform: translateY(-1px) translateZ(0); border-color: rgba(255,255,255,.20)}
.btn.primary{
  border-color: rgba(245,208,122,.24);
  background: linear-gradient(180deg, rgba(245,208,122,.18), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
}
.btn.ghost{ background: rgba(255,255,255,.02); }

.hero__meta{display:flex; gap:12px; flex-wrap:wrap; margin-top: 10px;}
.meta{
  min-width: 170px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.meta__num{display:block; font-weight:900}
.meta__label{display:block; margin-top:2px; font-size:12px; color: rgba(238,241,246,.62)}

.scroll{
  position:absolute; left:50%; bottom: 24px;
  width: 28px; height: 44px;
  border:1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  transform: translateX(-50%);
  display:grid; place-items:center;
  background: rgba(255,255,255,.02);
}
.scroll span{
  width:4px;height:8px;border-radius:999px;background: rgba(245,208,122,.72);
  animation: scroll 1.4s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes scroll{
  0%{transform:translateY(-6px);opacity:.35}
  50%{transform:translateY(6px);opacity:1}
  100%{transform:translateY(-6px);opacity:.35}
}

/* =============== Sections =============== */
.section{
  padding: 110px 22px;
  max-width: 1180px;
  margin: 0 auto;
}
.section__head{margin-bottom: 28px;}
.title{
  margin:0 0 10px;
  font-size: 28px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
}
.cap{
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(245,208,122,.85);
}
.desc{margin:0; color: rgba(238,241,246,.62); line-height:1.8}

/* =============== SEO Services (Static Text Section) =============== */
.services-seo h2{
  margin: 0 0 10px;
  font-size: 28px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
}
.services-seo p{
  margin: 0 0 14px;
  color: rgba(238,241,246,.62);
  line-height: 1.8;
  max-width: 80ch;
}
.services-seo ul{
  margin: 0;
  padding-inline-start: 18px;
  color: rgba(238,241,246,.62);
  line-height: 1.9;
}
.services-seo li{ margin: 6px 0; }

.service-list{display:flex; flex-direction:column; gap:16px;}
.service{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items:stretch;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r);
  background: rgba(255,255,255,.02);
  box-shadow: 0 22px 80px rgba(0,0,0,.45);
  overflow:hidden;
}
.service__copy{padding: 22px;}
.service__tag{
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing:.16em;
  font-size: 12px;
  color: rgba(238,241,246,.62);
  margin-bottom: 10px;
}
.service h3{margin:0 0 10px; font-size: 22px;}
.service p{margin:0 0 14px; color: rgba(238,241,246,.68); line-height:1.8}
.link{
  display:inline-flex;
  border-bottom: 1px solid rgba(245,208,122,.55);
  padding-bottom: 3px;
  color: rgba(245,208,122,.92);
}

.service__visual{
  position:relative;
  min-height: 240px;
  background: rgba(255,255,255,.02);
}
.service__visual::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(500px 320px at 30% 30%, rgba(245,208,122,.22), transparent 60%),
    radial-gradient(520px 320px at 85% 30%, rgba(145,90,255,.22), transparent 60%),
    radial-gradient(520px 320px at 65% 85%, rgba(0,255,200,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  filter: saturate(1.05);
}
.service__visual::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to left, rgba(6,7,10,.0), rgba(6,7,10,.35));
}
.v2::before{filter:saturate(1.2) hue-rotate(8deg)}
.v3::before{filter:saturate(1.1) hue-rotate(-10deg)}
.v4::before{filter:saturate(1.15) hue-rotate(22deg)}

.tenets{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.tenet{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.02);
  padding: 18px;
  display:flex; gap:14px;
}
.tenet .n{
  font-family: "Space Grotesk", Manrope, sans-serif;
  color: rgba(245,208,122,.9);
  letter-spacing:.12em;
}
.tenet h4{margin:0 0 6px}
.tenet p{margin:0; color: rgba(238,241,246,.62); line-height:1.8}

/* =============== Trusted =============== */
.trusted{
  padding: 90px 22px;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  background: radial-gradient(1000px 520px at 50% 30%, rgba(245,208,122,.10), transparent 60%);
}
.trusted__inner{max-width:1180px; margin:0 auto;}
.marquee{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
}
.track{
  display:flex; gap:18px; white-space:nowrap;
  padding: 14px 18px;
  animation: marquee 18s linear infinite;
  color: rgba(238,241,246,.72);
  letter-spacing:.22em;
  text-transform: uppercase;
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 12px;
  will-change: transform;
  transform: translateZ(0);
}
.logo{color: rgba(245,208,122,.92)}
@keyframes marquee{ from{transform:translateX(0) translateZ(0)} to{transform:translateX(-50%) translateZ(0)} }

/* Optional: pause marquee until hover (reduces constant work)
   If you prefer always-moving, comment the next 2 rules. */
.marquee .track{ animation-play-state: paused; }
.marquee.is-running .track{ animation-play-state: running; }

.small{color: rgba(238,241,246,.58); margin: 12px 0 0; }

/* =============== Final / Footer =============== */
.final{
  padding: 110px 22px;
  max-width: 1180px;
  margin: 0 auto;
}
.final__card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding: 28px;
}
.final__card h2{margin:0 0 10px}
.final__card p{margin:0 0 18px; color: rgba(238,241,246,.62); line-height:1.8}

.footer{
  padding: 26px 22px;
  display:flex; justify-content:space-between; gap:16px;
  color: rgba(238,241,246,.60);
  border-top: 1px solid rgba(255,255,255,.10);
}
.footer__links{display:flex; gap:16px}

/* =============== Reveal =============== */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .75s ease, transform .75s ease;}
.reveal.is-in{opacity:1; transform: translateY(0);}

/* Fix: prevent jitter when marquee animates inside a transformed reveal */
.reveal--opacity{ transform: none !important; }
.reveal--opacity.is-in{ transform: none !important; }


/* =============== Sticky Services Scenes =============== */
.services-sticky .section__head{ margin-bottom: 22px; }

.stage{ position:relative; border-radius: var(--r); }

.stage__frame{
  position: sticky;
  top: 92px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background: rgba(255,255,255,.02);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  overflow:hidden;
  min-height: 560px;
  display:grid;
  grid-template-columns: 1fr 1fr;
}

.stage__visual{
  position:relative;
  border-inline-end: 1px solid rgba(255,255,255,.10);
  min-height: 560px;
  overflow:hidden;
}

.visual{
  position:absolute; inset:0;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .6s ease, transform .9s ease;
  will-change: opacity, transform;
}
.visual.is-active{ opacity:1; transform: scale(1); }

.visual--1{
  background:
    radial-gradient(720px 420px at 30% 30%, rgba(245,208,122,.26), transparent 60%),
    radial-gradient(720px 420px at 85% 25%, rgba(145,90,255,.22), transparent 60%),
    radial-gradient(720px 420px at 60% 88%, rgba(0,255,200,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.visual--2{
  background:
    radial-gradient(720px 420px at 28% 30%, rgba(0,255,200,.20), transparent 60%),
    radial-gradient(720px 420px at 85% 20%, rgba(245,208,122,.18), transparent 60%),
    radial-gradient(720px 420px at 55% 85%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.visual--3{
  background:
    radial-gradient(720px 420px at 35% 30%, rgba(145,90,255,.24), transparent 60%),
    radial-gradient(720px 420px at 85% 25%, rgba(245,208,122,.18), transparent 60%),
    radial-gradient(720px 420px at 60% 85%, rgba(255,90,120,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.visual--4{
  background:
    radial-gradient(720px 420px at 30% 30%, rgba(245,208,122,.22), transparent 60%),
    radial-gradient(720px 420px at 85% 25%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(720px 420px at 60% 85%, rgba(0,255,200,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.visual__shine{
  position:absolute; inset:-40%;
  background: radial-gradient(600px 380px at 30% 30%, rgba(255,255,255,.10), transparent 60%);
  transform: translateX(-20%) rotate(8deg);
  animation: shine 10s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.65;
  will-change: transform;
}
@keyframes shine{
  0%,100%{ transform: translateX(-20%) rotate(8deg); }
  50%{ transform: translateX(18%) rotate(8deg); }
}

.stage__copy{
  position:relative;
  padding: 26px;
  min-height: 560px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.scene{
  position:absolute;
  inset: 26px;
  opacity:0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .65s ease;
  pointer-events:none;
  will-change: opacity, transform;
}
.scene.is-active{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.scene__tag{
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing:.18em;
  font-size: 12px;
  color: rgba(238,241,246,.62);
  margin-bottom: 12px;
}

.scene h3{ margin:0 0 12px; font-size: 26px; }
.scene p{ margin:0 0 16px; color: rgba(238,241,246,.68); line-height: 1.9; max-width: 60ch; }

.dots{
  position:absolute;
  inset-inline-end: 18px;
  bottom: 18px;
  display:flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6,7,10,.35);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.dot{
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(238,241,246,.28);
}
.dot.is-active{
  background: rgba(245,208,122,.92);
  box-shadow: 0 0 0 6px rgba(245,208,122,.12);
}

.stage__spacer{ height: 280vh; }

/* =============== Hero pills =============== */
.hero__pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}
.pillx{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(238,241,246,.70);
  font-size: 12px;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.pillx:hover{
  border-color: rgba(245,208,122,.24);
  color: rgba(245,208,122,.92);
}

/* scene bullets */
.scene__bullets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 12px 0 16px;
  color: rgba(238,241,246,.62);
  font-size: 12px;
}
.scene__bullets span{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

/* =============== Services C: Horizontal Slider + Snap + Progress =============== */
.services-slider .section__head{ margin-bottom: 22px; }

.sliderShell{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background: rgba(255,255,255,.02);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  overflow:hidden;
}

.sliderTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.sliderHint{
  color: rgba(238,241,246,.62);
  font-size: 12px;
  letter-spacing:.02em;
}

.sliderProgress{
  flex: 0 0 220px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
  position:relative;
}
.sliderProgress__bar{
  position:absolute; inset:0;
  width: 0%;
  background: linear-gradient(90deg, var(--gold1), rgba(255,255,255,.85), var(--gold2));
  border-radius: 999px;
  transition: width .18s ease;
}

.sliderViewport{
  display:flex;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline:none;
}
.sliderViewport::-webkit-scrollbar{ display:none; }

.slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  position:relative;
  min-height: 520px;
  padding: 26px;
  display:flex;
  align-items:stretch;
  overflow:hidden;
}

.slide__bg{
  position:absolute; inset:-2px;
  opacity:1;
  pointer-events:none;
  filter: saturate(1.05);
}

.bg--1{
  background:
    radial-gradient(780px 420px at 30% 25%, rgba(245,208,122,.22), transparent 60%),
    radial-gradient(720px 420px at 85% 22%, rgba(145,90,255,.18), transparent 60%),
    radial-gradient(720px 420px at 60% 90%, rgba(0,255,200,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.bg--2{
  background:
    radial-gradient(780px 420px at 30% 25%, rgba(0,255,200,.18), transparent 60%),
    radial-gradient(720px 420px at 85% 22%, rgba(245,208,122,.18), transparent 60%),
    radial-gradient(720px 420px at 60% 90%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.bg--3{
  background:
    radial-gradient(780px 420px at 30% 25%, rgba(145,90,255,.20), transparent 60%),
    radial-gradient(720px 420px at 85% 22%, rgba(245,208,122,.16), transparent 60%),
    radial-gradient(720px 420px at 60% 90%, rgba(255,90,120,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.bg--4{
  background:
    radial-gradient(780px 420px at 30% 25%, rgba(245,208,122,.18), transparent 60%),
    radial-gradient(720px 420px at 85% 22%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(720px 420px at 60% 90%, rgba(0,255,200,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.slide::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(600px 380px at 30% 30%, rgba(255,255,255,.10), transparent 60%);
  transform: translateX(-20%) rotate(8deg);
  animation: vmcShine 10s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.55;
  will-change: transform;
}
@keyframes vmcShine{
  0%,100%{ transform: translateX(-20%) rotate(8deg); }
  50%{ transform: translateX(18%) rotate(8deg); }
}

.slide__inner{
  position:relative;
  z-index:2;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  background: rgba(6,7,10,.35);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  padding: 20px;
  box-shadow: 0 22px 80px rgba(0,0,0,.35);
  max-width: 760px;
}

.slide__num{
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing:.16em;
  font-weight:800;
  color: rgba(245,208,122,.92);
  opacity:.9;
}
.slide__tag{
  margin-top: 10px;
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing:.18em;
  font-size: 12px;
  color: rgba(238,241,246,.62);
}
.slide__title{ margin: 12px 0 10px; font-size: 28px; }
.slide__desc{ margin:0 0 14px; color: rgba(238,241,246,.72); line-height:1.95; max-width: 65ch; }

.slide__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 16px;
}
.chip{
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(238,241,246,.62);
  font-size: 12px;
}
.chip:hover{
  border-color: rgba(245,208,122,.24);
  color: rgba(245,208,122,.92);
}

.sliderBottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.01);
}
.dotsRow{ display:flex; gap:8px; align-items:center; }
.dot2{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(238,241,246,.25);
}
.dot2.is-active{
  background: rgba(245,208,122,.92);
  box-shadow: 0 0 0 6px rgba(245,208,122,.12);
}
.arrows{ display:flex; gap:8px; }
.arrow{
  width:42px; height:42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(238,241,246,.92);
  cursor:pointer;
}
.arrow:hover{
  border-color: rgba(245,208,122,.24);
  color: rgba(245,208,122,.92);
}

.sliderViewport.is-dragging{
  cursor: grabbing;
  scroll-behavior:auto;
}

/* =============== Responsive / Reduced Motion / Fallbacks =============== */
@media (max-width: 980px){
  /* reduce expensive effects on mobile */
  :root{
    --shadow: 0 26px 70px rgba(0,0,0,.55);
    --blur: 8px;
  }

  .noise{
    opacity:.05;
    mix-blend-mode: normal; /* cheaper */
  }

  .halo{
    filter: blur(50px);
    opacity:.32;
  }

  .service{grid-template-columns:1fr;}
  .tenets{grid-template-columns:1fr;}

  .sliderProgress{ flex-basis: 160px; }
  .slide{ min-height: 480px; padding: 18px; }
  .slide__inner{ max-width: 100%; }

  /* sticky scenes -> disable (already in your original, kept) */
  .stage__frame{
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
  }
  .stage__visual{ min-height: 280px; border-inline-end: none; border-bottom: 1px solid rgba(255,255,255,.10); }
  .stage__copy{ min-height: 340px; }
  .scene{ position:relative; inset:auto; opacity:1; transform:none; pointer-events:auto; margin-bottom: 18px; }
  .dots{ display:none; }
  .stage__spacer{ height: 0; }

  /* calmer marquee on mobile */
  .track{ animation-duration: 26s; }
}

@media (prefers-reduced-motion: reduce){
  .halo,.track,.scroll span,.visual__shine,.slide::after{animation:none !important;
  .orbit--1,.orbit--2,.orbit--3{ animation:none !important; }
  .heroScene__logo img{ animation:none !important; }
}
  .reveal{transition:none}
  .visual, .scene{ transition:none !important; }
  .sliderViewport{ scroll-behavior:auto; }
}

/* Fallback: if backdrop-filter unsupported -> remove blur & strengthen bg (speed + compatibility) */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .nav,
  .btn,
  .meta,
  .pillx,
  .slide__inner,
  .dots{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(6,7,10,.72) !important;
  }
}


/* =============== HERO V6: Creative Engine Scene (Image Above, Copy Below) =============== */
.heroLayout{
  display:flex;
  flex-direction:column;
  gap: 26px;
  align-items: stretch;
  padding-top: 6px;
}

/* Scene */
/* Scene */
.heroScene{
  position:relative;
  width: min(980px, 100%);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 32px;
  /* remove the framed card feel */
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.heroScene::before{ content:none; }

.heroScene::after{ content:none; }

.engine{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity: .95;
  transform: translateZ(0);
}

/* ring + orb animations */
.ring{
  transform-origin: 400px 260px;
  animation: ringSpin 26s linear infinite;
  opacity: .85;
}
.ringText{
  fill: rgba(245,208,122,.78);
  font-size: 14px;
  letter-spacing: .38em;
  text-transform: uppercase;
  font-family: "Space Grotesk", Manrope, sans-serif;
}
@keyframes ringSpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

.orb{
  transform-origin: 400px 260px;
  animation: orbFloat 7.5s ease-in-out infinite;
}
@keyframes orbFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* subtle scanning feel (bands) */
.bands{
  transform-origin: 400px 260px;
  animation: bandsDrift 10s ease-in-out infinite;
}
@keyframes bandsDrift{
  0%,100%{ transform: rotate(-10deg) translateX(-16px); opacity:.38; }
  50%{ transform: rotate(8deg) translateX(18px); opacity:.62; }
}

/* Labels */
.heroScene__label{
  position:absolute;
  z-index:3;
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing:.22em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(238,241,246,.62);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(6,7,10,.28);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.heroScene__label.l1{ left: 18px; bottom: 18px; }
.heroScene__label.l2{ right: 18px; top: 18px; }

/* Logo overlay (crisp) */
.heroScene__logo{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:4;
  pointer-events:none;
}
.heroScene__logo img{
  animation: corePulse 7.2s ease-in-out infinite;
  transform-origin: center;

  width: clamp(92px, 9vw, 126px);
  height: clamp(92px, 9vw, 126px);
  border-radius: 50%;
  background:#000;
  box-shadow:
    0 0 0 1px rgba(245,208,122,.26),
    0 0 0 10px rgba(245,208,122,.06),
    0 40px 120px rgba(0,0,0,.75);
  opacity: .98;
}


/* Micro line under kicker */
.micro{
  margin: 10px 0 18px;
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing: .02em;
  color: rgba(245,208,122,.82);
  font-size: 16px;
}

/* Make scene blend into hero (no box edges) */
.heroScene{
  border-radius: 0;
  aspect-ratio: 16/8.5;
  width: min(1040px, 100%);
}

.engine{ opacity: .92; }

/* subtle label drift */
.heroScene__label{ animation: labelDrift 9s ease-in-out infinite; }
.heroScene__label.l2{ animation-delay: -3.5s; }
@keyframes labelDrift{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Copy panel under scene */
.heroCopy{
  max-width: 1180px;
  margin: 0 auto;
}

/* Pro title */
.heroTitle2{
  margin: 0 0 14px;
  max-width: 22ch;
  text-wrap: balance;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-size: clamp(38px, 5.4vw, 84px);
}
.heroTitle2 .gold{ display:inline; }

.sub{ max-width: 72ch; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ring,.orb,.bands,.heroScene__label,.orbit--1,.orbit--2,.orbit--3{ animation: none !important; }
}


@keyframes corePulse{
  0%,100%{ transform: scale(1); filter: drop-shadow(0 0 0 rgba(245,208,122,0)); }
  45%{ transform: scale(1.01); }
  55%{ transform: scale(1.025); filter: drop-shadow(0 0 18px rgba(245,208,122,.22)); }
}

/* Orbits */
.orbits{ transform-origin: 400px 260px; }
.orbit{ transform-origin: 400px 260px; }
.orbit--1{ animation: orbitSpin 42s linear infinite; }
.orbit--2{ animation: orbitSpin 58s linear infinite reverse; opacity: .9; }
.orbit--3{ animation: orbitSpin 78s linear infinite; opacity: .75; }

.orbitText{
  fill: rgba(245,208,122,.55);
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.orbitText--1{ font-size: 12px; fill: rgba(245,208,122,.65); }
.orbitText--3{ font-size: 11px; fill: rgba(245,208,122,.38); }

.orbitLabels text{
  fill: rgba(238,241,246,.70);
  font-family: "Space Grotesk", Manrope, sans-serif;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.orbitLabels .lbl{
  transform-origin: 400px 260px;
  transform: rotate(var(--a)) translate(0,-210px) rotate(var(--ai));
}
@keyframes orbitSpin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

/* =============== SEO helpers =============== */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ================= Premium Footer (VMC) ================= */
.siteFooter{
  padding: 74px 22px 28px;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1000px 520px at 18% 0%, rgba(245,208,122,.08), transparent 60%),
    radial-gradient(920px 520px at 86% 18%, rgba(145,90,255,.08), transparent 60%),
    var(--bg);
}

.siteFooter__inner{
  max-width: 1180px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.2fr .95fr .9fr .85fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 30px;
  background: rgba(255,255,255,.02);
  box-shadow: 0 30px 120px rgba(0,0,0,.45);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.fCol{ min-width:0; }
.fCol--brand{ padding-right: 6px; }

.fBrand{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  text-decoration:none;
}

.fBrand__logo{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  object-fit: cover;
  flex: 0 0 auto;
}

.fBrand__name{
  display:block;
  font-weight: 900;
  letter-spacing: .01em;
}

.fBrand__tag{
  display:block;
  margin-top: 6px;
  color: rgba(238,241,246,.62);
  line-height: 1.8;
  font-size: 13px;
  max-width: 42ch;
}

.fSocial{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.fSocial__link{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(238,241,246,.70);
  font-size: 12px;
  text-decoration:none;
}
.fSocial__link:hover{
  border-color: rgba(245,208,122,.24);
  color: rgba(245,208,122,.92);
  transform: translateY(-1px);
}

.fMiniTrust{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 14px;
  color: rgba(238,241,246,.58);
  font-size: 12px;
  line-height: 1.6;
}
.fDot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(245,208,122,.75);
  display:inline-block;
  transform: translateY(6px);
}

.fTitle{
  margin: 6px 0 12px;
  font-size: 14px;
  letter-spacing: .02em;
}

.fLinks{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.fLinks a{
  color: rgba(238,241,246,.70);
  line-height: 1.6;
  text-decoration:none;
}
.fLinks a:hover{ color: rgba(238,241,246,.92); }

/* Elite highlight card */
.fElite{
  display:block;
  text-decoration:none;
  border-radius: 22px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(245,208,122,.32);
  background:
    radial-gradient(650px 220px at 10% 0%, rgba(245,208,122,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  position: relative;
  box-shadow: 0 22px 80px rgba(0,0,0,.40);
}
.fElite:hover{ transform: translateY(-2px); border-color: rgba(245,208,122,.46); }

.fElite::after{
  content: "ELITE";
  position:absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(245,208,122,.92);
  color: #000;
  font-weight: 900;
  letter-spacing: .08em;
}

.fElite__top{
  display:block;
  font-weight: 900;
  color: rgba(245,208,122,.96);
  letter-spacing:.01em;
}

.fElite__sub{
  display:block;
  margin-top: 8px;
  color: rgba(238,241,246,.62);
  font-size: 12.5px;
  line-height:1.6;
}

.fContact{ display:flex; flex-direction:column; gap: 12px; }

.fPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(245,208,122,.24);
  background: linear-gradient(180deg, rgba(245,208,122,.16), rgba(255,255,255,.03));
  font-weight: 900;
  width: fit-content;
  text-decoration:none;
}
.fPill:hover{ transform: translateY(-1px); }

.fMeta{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.02);
}
.fMeta__k{ display:block; font-size: 12px; color: rgba(238,241,246,.62); }
.fMeta__v{ display:block; margin-top: 2px; font-weight: 800; }

.fLegal{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}
.fLegal a{
  color: rgba(238,241,246,.62);
  text-decoration:none;
  font-size: 12.5px;
}
.fLegal a:hover{ color: rgba(238,241,246,.90); }

.siteFooter__bottom{
  max-width: 1180px;
  margin: 14px auto 0;
  padding: 18px 6px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  color: rgba(238,241,246,.58);
}

.fCopy{ margin:0; }

/* Responsive */
@media (max-width: 980px){
  .siteFooter__inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .siteFooter__inner{ grid-template-columns: 1fr; }
  .siteFooter__bottom{ flex-direction:column; align-items:flex-start; }
}


/* iOS performance: reduce heavy blur/animations on older devices */
html.is-ios .sliderViewport{ scroll-behavior: auto; }
html.is-ios .slide__inner{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(6,7,10,.55);
}
html.is-ios .shine{ animation: none !important; opacity: .35; }

/* =============== Knowledge Hub (Home) =============== */
.knowledge .section__head{ margin-bottom: 18px; }

.kWrap{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow: 0 30px 120px rgba(0,0,0,.45);
  padding: 18px;
  overflow: hidden;
}

.kGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.kCard{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(6,7,10,.30);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  padding: 18px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

.kTag{
  font-family: "Space Grotesk", Manrope, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(238,241,246,.62);
  margin-bottom: 10px;
}

.kTitle{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.45;
}

.kDesc{
  margin: 0 0 14px;
  color: rgba(238,241,246,.70);
  line-height: 1.85;
  flex: 1;
}

.kLink{
  display: inline-flex;
  width: fit-content;
  border-bottom: 1px solid rgba(245,208,122,.55);
  padding-bottom: 3px;
  color: rgba(245,208,122,.92);
}

.kCtaRow{
  display: flex;
  justify-content: flex-start;
  padding-top: 14px;
}

/* Responsive */
@media (max-width: 980px){
  .kGrid{ grid-template-columns: 1fr; }
  .kCard{ min-height: auto; }
}