.skip-to-content{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-to-content:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:12px 18px;background:#0a0a0a;color:#fff;border:2px solid #fff;border-radius:8px;z-index:9999;font:500 14px/1 var(--display,system-ui)}

/* ---------------- FONT SYSTEM (aligned with puregray.ai) ---------------- */
@font-face{
  font-family:Interdisplay;
  src:url("../fonts/Aspekta-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:Interdisplay;
  src:url("../fonts/Aspekta-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:Interdisplay;
  src:url("../fonts/Aspekta-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

/* ---------------- RESET + TOKENS ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#0a0a0a;
  color:#fff;
  font-weight:500;
  line-height:1.5;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}

:root{
  --black:#000;
  --ink:#0b0b0a;
  --ink-2:#141412;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(0,0,0,.08);
  --white:#fff;
  --mute:rgba(255,255,255,.55);
  --mute-dark:#555;
  --bg-soft:#ece7de;
  --bg-paper:#f4f0e7;
  --accent:#E9553E;
  --cyan:#1DC0DC;
  --magenta:#D1499A;
  --green:#68BD48;
  --orange:#EE7A3C;
  --grad: #E9553E;
  --grad-2: #E9553E;
  --radius:6px;
  --radius-lg:10px;
  --container:1320px;
  --pad:clamp(24px,5vw,96px);
  --display:Interdisplay,Inter,Arial,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Editorial grain — subtle SVG noise over dark sections */
.grain{position:relative;isolation:isolate}
.grain::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.11'/></svg>");
  mix-blend-mode:overlay;opacity:.6;
}
/* Default editorial image treatment */
.work-card .bg img,
.ind-bg img,
.dual-bg img,
.man-bg img,
.coverage-hero img,
.hero-visual .tile img,
.v-img img{
  filter:grayscale(.35) contrast(1.06) saturate(.85);
  transition:filter .6s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .bg img,
.ind-card:hover .ind-bg img,
.v-img:hover img{filter:grayscale(0) contrast(1.08) saturate(1)}

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.display{font-family:var(--display);font-weight:500;letter-spacing:-0.055em;line-height:.88}

/* ================ Unified typography system — Capabilities-inspired ================
   All major headings share: font-weight 500, tight negative tracking, taut line-height.
   H1/H2 scale: -0.055em / .88   |   H3 scale: -0.035em / 1
============================================================================== */
.hx-h1,
.section-head h2,
.capx .section-head h2,
.svc-h2,
.manifesto h2,
.urg-h2,
.cs-title,
.foot-shout .fs-word{
  font-family:var(--display);font-weight:500;
  letter-spacing:-0.055em;line-height:.88;
}
.process-card h3,
.ind-card h3,
.capx-main h3,
.urg-cta-h3,
.fs-title{
  font-family:var(--display);font-weight:500;
  letter-spacing:-0.035em;
}
.process-card h3,
.ind-card h3,
.capx-main h3,
.urg-cta-h3,
.fs-title{line-height:1}

.pq-body{
  font-family:var(--display);font-weight:500;
  letter-spacing:-0.025em;line-height:1.1;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-size:12px;letter-spacing:-0.32px;text-transform:uppercase;
  color:var(--mute);font-weight:500;
}
.section-eyebrow{color:rgba(0,0,0,.55)}
html{scroll-padding-top:96px}
section[id], footer[id]{scroll-margin-top:96px}
@media(max-width:768px){html{scroll-padding-top:82px}section[id], footer[id]{scroll-margin-top:82px}}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px 0;
  transition:background .3s ease, backdrop-filter .3s ease, padding .3s ease;
}
.nav.scrolled{
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{
  display:inline-flex;align-items:center;
}
.logo img, .logo svg{height:36px;width:auto;display:block;transition:height .3s ease}
.nav.scrolled .logo img, .nav.scrolled .logo svg{height:30px}
/* footer uses the wordmark (height-based) */
.foot-about .logo img, .foot-about .logo svg{height:56px}
.nav-links{display:flex;gap:30px;font-size:14px;color:var(--mute);letter-spacing:-0.4px;font-weight:500}
.nav-links a:hover{color:var(--white)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:2px;
  background:var(--accent);color:#fff;
  font-family:Inter,sans-serif;font-weight:600;font-size:13.5px;letter-spacing:-0.3px;
  transition:transform .2s ease, background .2s ease;
}
.nav-cta:hover{transform:translateY(-2px);background:#f56650}
.burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);place-items:center;cursor:pointer;background:transparent;transition:background .2s ease,border-color .2s ease;position:relative;z-index:101}
.burger span{width:18px;height:2px;background:#fff;position:relative;display:block;transition:background .2s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;transition:transform .25s cubic-bezier(.77,0,.175,1),top .25s cubic-bezier(.77,0,.175,1),background .2s ease}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger.open{background:#fff;border-color:#fff}
.burger.open span{background:transparent}
.burger.open span::before{top:0;transform:rotate(45deg);background:#000}
.burger.open span::after{top:0;transform:rotate(-45deg);background:#000}
@media(max-width:860px){
  .nav-links{display:none}
  .nav .nav-cta{display:none}
  .burger{display:grid}
}

/* ---------------- MOBILE MENU ---------------- */
.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:rgba(6,6,10,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:110px clamp(24px,6vw,60px) 50px;
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.77,0,.175,1);
  visibility:hidden;
  overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0);visibility:visible}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:2px;width:100%;margin:0 0 40px;padding:0}
.mobile-menu ul a{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(32px,8vw,56px);line-height:1.1;letter-spacing:-1.4px;
  color:#fff;padding:10px 0;transition:color .2s ease,transform .2s ease;
}
.mobile-menu ul a:hover{color:var(--accent);transform:translateX(8px)}
.mobile-menu .mm-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 28px;border-radius:2px;
  background:var(--accent);color:#fff;
  font-weight:600;font-size:15px;letter-spacing:-0.3px;
}
.mobile-menu .mm-foot{
  margin-top:40px;padding-top:26px;border-top:1px solid var(--line);
  color:var(--mute);font-size:14px;display:flex;flex-direction:column;gap:10px;width:100%;
}
.mobile-menu .mm-foot a{color:var(--mute)}
.mobile-menu .mm-foot a:hover{color:#fff}
body.menu-open{overflow:hidden}
@media(min-width:861px){ .mobile-menu{display:none} }

/* ---------------- HERO v2 (surreal editorial) ---------------- */
.hero-v2{
  position:relative;min-height:100vh;
  padding:clamp(110px,12vh,160px) 0 80px;
  overflow:hidden;isolation:isolate;color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  background:#0a0a0a;
}

/* Mesh gradient via multiple large blurred colour blobs */
.hx-mesh{position:absolute;inset:-10%;z-index:-4;filter:blur(100px) saturate(1.15);opacity:.85}
.hx-blob{position:absolute;border-radius:50%;mix-blend-mode:screen}
.hx-blob.hb1{top:-5%;left:-5%;width:55vw;height:55vw;background:#A45EA5;animation:meshA 22s ease-in-out infinite alternate}
.hx-blob.hb2{top:10%;right:-5%;width:48vw;height:48vw;background:#E9553E;animation:meshB 26s ease-in-out infinite alternate}
.hx-blob.hb3{bottom:-15%;left:10%;width:60vw;height:60vw;background:#3E67B1;animation:meshC 30s ease-in-out infinite alternate}
.hx-blob.hb4{bottom:0;right:0;width:45vw;height:45vw;background:#D1499A;animation:meshD 24s ease-in-out infinite alternate}
@keyframes meshA{to{transform:translate(8%,6%) scale(1.1)}}
@keyframes meshB{to{transform:translate(-6%,10%) scale(1.15)}}
@keyframes meshC{to{transform:translate(5%,-8%) scale(1.08)}}
@keyframes meshD{to{transform:translate(-10%,-6%) scale(1.12)}}

/* Grain */
.hx-grain{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/></svg>");
  mix-blend-mode:overlay;opacity:.7;
}

/* Giant outlined MOONBOX backdrop */
.hx-bigword{
  position:absolute;left:0;right:0;bottom:-2vw;
  overflow:hidden;white-space:nowrap;line-height:.82;
  pointer-events:none;user-select:none;z-index:0;
}
.hx-bw-track{
  display:inline-flex;
  font-family:var(--display);font-weight:500;
  font-size:clamp(160px,26vw,480px);line-height:.82;
  letter-spacing:-0.08em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.18);
  animation:bigwordScroll 45s linear infinite;
  will-change:transform;
}
.hx-bw-track span{display:inline-block;padding:0 .15em}
@keyframes bigwordScroll{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-33.3333%,0,0)}
}

/* Central floating 3D stage */
.hx-stage{
  position:absolute;left:72%;top:50%;transform:translate(-50%,-55%);
  width:min(620px,58vw);aspect-ratio:1;z-index:1;pointer-events:none;
  animation:hxFloat 7s ease-in-out infinite alternate;
}
@keyframes hxFloat{to{transform:translate(-50%,-60%)}}
.hx-orb{position:absolute;inset:33%;border-radius:50%;isolation:isolate;overflow:visible;z-index:0;display:none}  /* sphere retired — astronaut replaces it */

/* Astronaut wrapper — handles positioning + page-load intro animation (plays once) */
.hx-astro-wrap{
  position:absolute;top:50%;left:50%;
  width:min(1040px,95vw);height:auto;
  z-index:3;  /* sits above cube (z:1) + rings/dots */
  pointer-events:none;user-select:none;
  transform:translate(-50%,-50%);
  opacity:0;
  animation:astroIntro 1.8s cubic-bezier(.2,.7,.2,1) .25s forwards;
  will-change:transform,opacity;
}

/* Intro: astronaut "drifts in" from below-right, fades in, settles to centre */
@keyframes astroIntro{
  0%   {opacity:0; transform:translate(-42%,-35%) scale(.72) rotate(-10deg); filter:blur(8px)}
  40%  {opacity:.85;                                                        filter:blur(2px)}
  100% {opacity:1; transform:translate(-50%,-50%) scale(1)   rotate(0deg);  filter:blur(0)}
}

/* Inner picture — continuous zero-G drift (infinite, relative to wrapper) */
.hx-astro{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)) drop-shadow(0 6px 20px rgba(113,98,171,.35));
  animation:astroFloat 14s ease-in-out 2s infinite;   /* starts after intro finishes */
  will-change:transform;
}
.hx-astro img{width:100%;height:auto;display:block}

@keyframes astroFloat{
  0%   {transform: rotate(-3deg) scale(1)}
  20%  {transform: translate(3%,-3%) rotate(1.5deg) scale(1.015)}
  40%  {transform: translate(-2%,3%) rotate(-1deg)  scale(.99)}
  60%  {transform: translate(1%,-4%) rotate(3deg)   scale(1.02)}
  80%  {transform: translate(-1%,2%) rotate(-2deg)  scale(1.005)}
  100% {transform: rotate(-3deg) scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .hx-astro-wrap, .hx-astro{animation:none !important; opacity:1 !important; transform:translate(-50%,-50%); filter:none}
  .hx-astro{transform:none}
}

/* ============ Element8 3D emblem — rotating cube housing the sphere ============ */
.hx-cube{
  --size:min(368px,50vw);
  position:absolute;top:50%;left:50%;
  width:var(--size);height:var(--size);
  margin-top:calc(var(--size) / -2);
  margin-left:calc(var(--size) / -2);
  perspective:1600px;perspective-origin:center center;
  pointer-events:none;z-index:1;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));
}
.hx-cube-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  animation:cubeSpin 22s linear infinite;
  will-change:transform;
}
@keyframes cubeSpin{
  from{transform:rotateX(-14deg) rotateY(0deg)}
  to  {transform:rotateX(-14deg) rotateY(360deg)}
}
.hx-face{
  position:absolute;inset:0;
  border-radius:0;
  box-shadow:
    inset 0 0 120px rgba(20,12,28,.30),
    inset 40px 50px 90px rgba(255,255,255,.08);
  backface-visibility:visible;
}
.hx-f-front {transform:translateZ(calc(var(--size) / 2));
             background:linear-gradient(135deg,#ffd7dd 0%,#e8cdec 45%,#7f6c95 100%)}
.hx-f-back  {transform:rotateY(180deg) translateZ(calc(var(--size) / 2));
             background:linear-gradient(135deg,#e8cdec 0%,#7f6c95 45%,#3a2d4a 100%)}
.hx-f-right {transform:rotateY( 90deg) translateZ(calc(var(--size) / 2));
             background:linear-gradient(90deg,#ffd7dd 0%,#b49dcc 60%,#5f4a6b 100%)}
.hx-f-left  {transform:rotateY(-90deg) translateZ(calc(var(--size) / 2));
             background:linear-gradient(90deg,#5f4a6b 0%,#b49dcc 40%,#ffd7dd 100%)}
.hx-f-top   {transform:rotateX( 90deg) translateZ(calc(var(--size) / 2));
             background:linear-gradient(180deg,#ffe8ee 0%,#d2b8da 55%,#8f7da2 100%)}
.hx-f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--size) / 2));
             background:linear-gradient(180deg,#6a567a 0%,#3a2d4a 100%)}

/* Circular cutout on front AND back — sphere is always visible through one of them */
.hx-f-front,
.hx-f-back{
  -webkit-mask:radial-gradient(circle closest-side at center, transparent 65%, #000 65%);
          mask:radial-gradient(circle closest-side at center, transparent 65%, #000 65%);
}

@media (prefers-reduced-motion: reduce){
  .hx-cube-inner{animation:none !important;transform:rotateX(-14deg) rotateY(-18deg)}
}
.hx-orb-core{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, #ffe0ec 0%, #ffb3c6 12%, #F04E41 30%, #D1499A 55%, #7162AB 82%, #1a1835 100%);
  box-shadow:
    inset -60px -70px 100px rgba(0,0,0,.45),
    inset 30px 20px 60px rgba(255,255,255,.15),
    0 60px 140px rgba(209,73,154,.35),
    0 20px 60px rgba(164,94,165,.45);
  animation:hxOrbRotate 28s linear infinite;
}
@keyframes hxOrbRotate{
  0%  {filter:saturate(1.05) hue-rotate(0deg)}
  25% {filter:saturate(1.30) hue-rotate(90deg)}
  50% {filter:saturate(1.15) hue-rotate(180deg)}
  75% {filter:saturate(1.35) hue-rotate(270deg)}
  100%{filter:saturate(1.05) hue-rotate(360deg)}
}
.hx-orb-gloss{
  position:absolute;top:12%;left:18%;width:38%;height:30%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 65%);
  filter:blur(6px);opacity:.8;pointer-events:none;
}
.hx-ring{position:absolute;inset:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;pointer-events:none}
.hx-ring.r1{transform:rotateX(72deg) scale(1.1);animation:spinA 18s linear infinite}
.hx-ring.r2{transform:rotateX(30deg) rotateY(40deg) scale(1.25);animation:spinB 26s linear infinite reverse;border-color:rgba(255,255,255,.14)}
.hx-ring.r3{transform:rotateY(72deg) scale(1.4);animation:spinC 34s linear infinite;border-color:rgba(255,255,255,.08)}
@keyframes spinA{to{transform:rotateX(72deg) rotateZ(360deg) scale(1.1)}}
@keyframes spinB{to{transform:rotateX(30deg) rotateY(40deg) rotateZ(360deg) scale(1.25)}}
@keyframes spinC{to{transform:rotateY(72deg) rotateZ(360deg) scale(1.4)}}
.hx-orbit{position:absolute;inset:-6%;width:112%;height:112%;pointer-events:none;opacity:.6}
.hx-dot{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.5)}
.hx-dot.d1{top:6%;left:48%;width:6px;height:6px;animation:hxPulse 3s ease-in-out infinite}
.hx-dot.d2{top:40%;right:-4%;width:10px;height:10px;background:#F04E41;box-shadow:0 0 14px rgba(240,78,65,.6);animation:hxPulse 4s ease-in-out infinite -1s}
.hx-dot.d3{bottom:8%;left:10%;width:5px;height:5px;animation:hxPulse 3.5s ease-in-out infinite -2s}
.hx-dot.d4{bottom:20%;right:18%;width:7px;height:7px;background:#1DC0DC;box-shadow:0 0 12px rgba(29,192,220,.6);animation:hxPulse 3.2s ease-in-out infinite -.5s}
@keyframes hxPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.3);opacity:1}}

/* Top meta strip */
.hx-top{
  position:absolute;top:100px;left:0;right:0;z-index:3;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:-0.32px;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:500;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  margin:0 auto;
}
.hx-status{display:inline-flex;align-items:center;gap:8px}
.hx-dot-live{
  width:7px;height:7px;border-radius:50%;background:#5eff6b;
  box-shadow:0 0 10px #5eff6b;animation:hxPulse 2s ease-in-out infinite;
}

/* Bottom editorial content */
.hx-bottom{
  position:relative;z-index:4;
  display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end;
}
@media(max-width:860px){.hx-bottom{grid-template-columns:1fr;gap:32px}}
.hx-h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(42px,6.1vw,98px);
  line-height:.92;letter-spacing:-0.045em;margin:0 0 18px;color:#fff;
}
.hx-accent{color:var(--accent);font-style:normal;position:relative;white-space:normal}
.hx-accent::after{display:none}
.hx-lede{
  color:rgba(255,255,255,.78);font-size:clamp(15px,1.15vw,17px);max-width:520px;
  line-height:1.5;letter-spacing:-0.4px;font-weight:500;margin:0;
}
.hx-actions{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  position:absolute;
  right:clamp(96px,10vw,136px);
  bottom:clamp(96px,9vw,118px);
  z-index:4;
}
@media(max-width:860px){
  .hx-actions{
    right:auto;left:clamp(20px,4vw,40px);
    justify-content:flex-start;
  }
}
@media(max-width:860px){.hx-actions{justify-content:flex-start}}
.hx-pitch .hx-actions{position:static;right:auto;bottom:auto;margin-top:22px;padding:0;width:auto;max-width:none;justify-content:flex-start}

/* Scroll indicator */
.hx-scroll{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:-0.22px;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:500;
}

@media(max-width:860px){
  .hx-stage{width:min(380px,80vw);left:50%;transform:translate(-50%,-60%)}
  .hx-bigword{font-size:clamp(120px,24vw,320px)}
}

/* ================ HERO — enhanced animation layer ================ */

/* MOONBOX backdrop word scroll is driven by .hx-bw-track above */

/* Two additional orbital rings for a richer line-around-sphere feel */
.hx-ring.r4{
  transform:rotateX(55deg) rotateZ(15deg) scale(1.18);
  border:1px dashed rgba(255,255,255,.22);border-radius:50%;
  animation:spinD 22s linear infinite reverse;
}
.hx-ring.r5{
  transform:rotateX(80deg) rotateY(-25deg) scale(1.32);
  border-color:rgba(240,78,65,.3);
  animation:spinE 30s linear infinite;
}
@keyframes spinD{to{transform:rotateX(55deg) rotateZ(375deg) scale(1.18)}}
@keyframes spinE{to{transform:rotateX(80deg) rotateY(-25deg) rotateZ(360deg) scale(1.32)}}

/* Dashes travelling along the orbit ellipses — "tracing light" effect */
.hx-orbit ellipse{
  stroke-dasharray:14 26;
  animation:orbitTrace 9s linear infinite;
}
.hx-orbit ellipse:nth-child(2){animation-duration:13s;animation-direction:reverse}
@keyframes orbitTrace{to{stroke-dashoffset:-400}}

/* Concentric halo rings radiating from the orb */
.hx-stage::before, .hx-stage::after{
  content:"";position:absolute;top:50%;left:50%;width:64%;height:64%;
  border-radius:50%;border:1px solid rgba(255,255,255,.28);
  transform:translate(-50%,-50%) scale(1);
  pointer-events:none;z-index:-1;
  animation:haloPulse 4.6s cubic-bezier(.2,.7,.2,1) infinite;
}
.hx-stage::after{animation-delay:-2.3s;border-color:rgba(240,78,65,.4)}
@keyframes haloPulse{
  0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}
  100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}
}

/* Shooting stars layer */
.hx-stars{position:absolute;inset:0;overflow:hidden;z-index:-3;pointer-events:none}
.hx-star{
  position:absolute;width:180px;height:1px;
  background:linear-gradient(90deg,transparent,#fff 60%,#fff);
  box-shadow:0 0 6px rgba(255,255,255,.7);
  opacity:0;
  transform:translate3d(-20vw,-10vh,0) rotate(18deg);
  animation:shoot 9s linear infinite;
}
.hx-star.s1{top:16%;animation-delay:0s}
.hx-star.s2{top:52%;width:140px;animation-delay:-3.6s;background:linear-gradient(90deg,transparent,rgba(29,192,220,.9) 60%,rgba(29,192,220,1));box-shadow:0 0 6px rgba(29,192,220,.6)}
.hx-star.s3{top:80%;width:110px;animation-delay:-6.2s}
@keyframes shoot{
  0%{transform:translate3d(-20vw,-10vh,0) rotate(18deg);opacity:0}
  5%{opacity:1}
  55%{opacity:1}
  100%{transform:translate3d(125vw,35vh,0) rotate(18deg);opacity:0}
}

/* Scroll indicator — travelling light streak */
.hx-scroll .hs-line{position:relative;overflow:hidden}
.hx-scroll .hs-line::after{
  content:"";position:absolute;top:-30%;left:50%;width:2px;height:40%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,#fff,transparent);
  animation:scrollTrail 2.2s cubic-bezier(.77,0,.175,1) infinite;
}
@keyframes scrollTrail{
  0%{top:-30%;opacity:0}
  20%{opacity:1}
  100%{top:100%;opacity:0}
}

/* Mouse parallax — uses `translate` longhand so existing transform animations keep running */
.hx-stage{
  translate:calc(var(--mx,0)*1px) calc(var(--my,0)*1px);
  transition:translate .8s cubic-bezier(.2,.7,.2,1);
  will-change:translate;
}
.hx-bigword{
  translate:calc(var(--mx,0)*-0.45px) calc(var(--my,0)*-0.45px);
  transition:translate 1.1s cubic-bezier(.2,.7,.2,1);
  will-change:translate;
}

@media (prefers-reduced-motion: reduce){
  .hx-bigword, .hx-stage::before, .hx-stage::after, .hx-star,
  .hx-scroll .hs-line::after, .hx-stage{
    animation:none !important; translate:0 0 !important;
  }
}

@media(max-width:860px){
  .hero-v2{min-height:auto;padding:96px 0 56px;justify-content:flex-start}
  .hx-bigword{bottom:auto;top:88px;opacity:.48}
  .hx-stage{position:relative;left:auto;top:auto;transform:none !important;translate:0 0 !important;width:min(390px,84vw);margin:4px auto 20px;animation:none !important}
  .hx-stage::before,.hx-stage::after{width:56%;height:56%}
  .hx-astro-wrap{width:min(560px,105vw)}
  .hx-astro{animation:none !important}
  .hx-cube{--size:min(240px,56vw)}
  .hx-bottom{display:block;z-index:4}
  .hx-h1{font-size:clamp(34px,10.5vw,58px);line-height:.94;letter-spacing:-0.045em;margin-bottom:14px}
  .hx-lede{max-width:100%;font-size:15px}
  .hx-actions{margin-top:22px}
  .hx-scroll{display:none}
}
@media(max-width:520px){
  .hero-v2{padding:92px 0 50px}
  .hx-stage{width:min(300px,82vw);margin:0 auto 16px}
  .hx-astro-wrap{width:min(430px,102vw)}
  .hx-cube{--size:min(218px,58vw)}
}

/* Legacy hero-wrap (unused by v2) */
.hero-wrap-legacy-unused{width:100%;display:flex;flex-direction:column;gap:72px}
.hero-meta{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:-0.32px;text-transform:uppercase;
  color:var(--mute);border-top:1px solid var(--line);padding-top:18px;font-weight:500;
}
.hero-idx::before{content:"●";color:var(--accent);margin-right:8px}
.hero-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(56px,11vw,180px);
  line-height:.88;letter-spacing:-0.055em;
  margin:0;
}
.hero-title .line{display:block}
.hero-title .line-accent{font-style:normal}
.hero-title .line-accent::before{
  content:"— ";color:var(--accent);font-weight:500;
}
.hero-foot{
  display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end;
  border-top:1px solid var(--line);padding-top:40px;
}
@media(max-width:820px){
  .hero-foot{grid-template-columns:1fr;gap:34px}
  .hero-meta{flex-wrap:wrap;gap:10px}
}
.hero-lede p{
  color:var(--mute);font-size:clamp(15px,1.1vw,17px);max-width:520px;line-height:1.5;
  letter-spacing:-0.4px;font-weight:500;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:820px){.hero-actions{justify-content:flex-start}}

.hero-scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:-0.22px;text-transform:uppercase;
  color:var(--mute);font-weight:500;
}
.hs-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--mute),transparent);animation:scrollPulse 2.4s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:820px){.hero-scroll{display:none}}


/* ---------------- AD-TRAFFIC VISUAL PROOF ---------------- */
.visual-proof{
  position:relative;overflow:hidden;background:#080808;color:#fff;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  padding:clamp(72px,9vw,128px) 0;
}
.visual-proof::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(233,85,62,.16),transparent 36%),
    radial-gradient(ellipse at 88% 18%,rgba(29,192,220,.14),transparent 42%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 86px);
  opacity:.78;
}
.vp-grid{position:relative;display:grid;grid-template-columns:minmax(340px,.9fr) 1fr;gap:clamp(36px,6vw,88px);align-items:center}
.visual-proof .reveal{opacity:1;transform:none;filter:none}
.vp-art{
  min-height:430px;
  position:relative;overflow:visible;display:grid;place-items:center;perspective:1200px;isolation:isolate;
}
.vp-art::after{
  content:"";position:absolute;left:18%;right:18%;bottom:16%;height:18%;border-radius:50%;background:rgba(0,0,0,.38);filter:blur(30px);pointer-events:none;z-index:0;
}
.vp-art svg,.vp-object-img{position:relative;z-index:1;width:min(78%,520px);height:auto;max-height:370px;overflow:visible;object-fit:contain;filter:drop-shadow(0 30px 54px rgba(0,0,0,.34))}
.vp-object-img{display:block;animation:vpObjectFloat 9s ease-in-out infinite alternate;transform-origin:center;transition:translate .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),filter .45s ease}
.vp-art:hover .vp-object-img{animation:none;translate:0 -18px;transform:rotate(-3deg) scale(1.055);filter:drop-shadow(0 42px 68px rgba(0,0,0,.42)) saturate(1.08)}
.vp-art .line{fill:none;stroke:rgba(255,255,255,.84);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.vp-art .accent{fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vp-art .soft{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.2);stroke-width:1}
.vp-art .cyan{stroke:var(--cyan)}
.vp-art .green{stroke:var(--green)}
.vp-object{width:min(82%,470px);height:auto;overflow:visible;filter:drop-shadow(0 34px 55px rgba(0,0,0,.34));transform-origin:center;translate:0 0;animation:vpObjectFloat 8s ease-in-out infinite alternate}
.vp-object .obj-face{fill:url(#objFace);stroke:rgba(255,255,255,.2);stroke-width:1}
.vp-object .obj-side{fill:url(#objSide);stroke:rgba(255,255,255,.12);stroke-width:1}
.vp-object .obj-top{fill:url(#objTop);stroke:rgba(255,255,255,.18);stroke-width:1}
.vp-object .obj-hot{fill:url(#objHot)}
.vp-object .obj-line{fill:none;stroke:rgba(255,255,255,.74);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vp-object .obj-orange{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vp-object .obj-cyan{fill:none;stroke:rgba(45,210,255,.78);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vp-object .obj-shadow{fill:rgba(0,0,0,.22)}
@keyframes vpObjectFloat{to{translate:0 -10px}}
@media (prefers-reduced-motion: reduce){.vp-object{animation:none}}
.vp-copy{max-width:640px}.vp-copy .eyebrow{color:rgba(255,255,255,.64)}
.vp-copy h2{font-size:clamp(40px,5.6vw,76px);margin:20px 0 22px}
.vp-copy p{color:rgba(255,255,255,.68);font-size:17px;line-height:1.52;max-width:590px;margin:0 0 28px}
.vp-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 30px}
.vp-points span{border-top:1px solid rgba(255,255,255,.18);padding-top:12px;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:rgba(255,255,255,.72)}
.vp-copy .btn{padding-inline:20px}.vp-mark{fill:rgba(233,85,62,.12);stroke:rgba(233,85,62,.35)}
.vp-web svg{transform:rotateY(-9deg) rotateX(5deg)}.vp-logo svg{transform:rotateY(10deg) rotateX(4deg)}
.vp-packaging svg{transform:rotateY(-12deg) rotateX(7deg)}.vp-brochure svg{transform:rotateY(8deg) rotateX(4deg)}
.vp-video svg{transform:rotateY(-8deg) rotateX(5deg)}.vp-real-estate svg{transform:rotateY(9deg) rotateX(5deg)}
.vp-social svg{transform:rotateY(-7deg) rotateX(5deg)}
@media(max-width:940px){.vp-grid{grid-template-columns:1fr}.vp-art{min-height:340px}.vp-copy h2{font-size:42px}.vp-points{grid-template-columns:1fr}}
@media(max-width:560px){.visual-proof{padding:64px 0}.vp-art{min-height:300px}.vp-object-img{width:min(86%,380px)}.vp-copy h2{font-size:36px}}


/* ---------------- TRUST BAR ---------------- */
.trust-bar{
  padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink-2);
}
.tb-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
}
@media(max-width:760px){.tb-grid{grid-template-columns:repeat(2,1fr);gap:24px 20px}}
.tb-cell{display:flex;flex-direction:column;gap:6px;padding-left:18px;border-left:1px solid var(--line)}
.tb-n{
  font-family:var(--display);font-weight:500;font-size:clamp(28px,3vw,40px);
  line-height:1;letter-spacing:-1.4px;color:#fff;
}
.tb-n em{font-style:normal;font-size:.55em;color:var(--mute);letter-spacing:-.4px;margin-left:4px;vertical-align:baseline}
.tb-lab{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:-0.32px;text-transform:uppercase;font-weight:500}

.hero::before{
  content:"";position:absolute;inset:-20%;z-index:-1;
  background:
    radial-gradient(circle at 80% 30%,rgba(233,85,62,.14),transparent 45%),
    radial-gradient(circle at 20% 80%,rgba(255,255,255,.04),transparent 45%);
  filter:blur(40px);
  animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-3%,2%) scale(1.05)}
}
.hero .grid{
  display:grid;grid-template-columns:1.25fr .95fr;gap:80px;align-items:center;
}
@media(max-width:1040px){.hero .grid{grid-template-columns:1fr;gap:60px}}
.hero h1{
  font-family:var(--display);
  font-size:clamp(44px,7vw,96px);
  line-height:.95;
  margin:22px 0 26px;
  font-weight:500;
  letter-spacing:-1.68px;
}
.hero h1 .grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
}
.hero p.lead{
  font-size:clamp(16px,1.2vw,18px);
  color:var(--mute);max-width:560px;margin-bottom:36px;
  letter-spacing:-0.4px;font-weight:500;line-height:1.45;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:2px;
  font-family:Inter,sans-serif;font-weight:600;font-size:14.5px;letter-spacing:-0.3px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;padding:16px 26px}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(233,85,62,.25);background:#f56650}
.btn-primary svg{transition:transform .2s}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{
  background:rgba(255,255,255,.04);color:var(--white);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);padding:16px 26px;
}
.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-link{
  padding:15px 0;background:transparent;color:#fff;
  border-bottom:1px solid var(--line);border-radius:0;
}
.btn-link:hover{border-color:var(--accent);color:var(--accent)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1ebe57;transform:translateY(-2px)}
.trust-row{
  display:flex;flex-wrap:wrap;gap:28px 40px;
  padding-top:28px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mute);letter-spacing:-0.32px;
}
.trust-row b{color:#fff;font-weight:500;font-size:24px;display:block;font-family:var(--display);letter-spacing:-1px;line-height:1}

/* Hero visual — asymmetric image collage */
.hero-visual{position:relative;aspect-ratio:1/1.05;max-width:580px;margin-inline:auto;width:100%}
.hero-visual .tile{
  position:absolute;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.hero-visual .tile img{width:100%;height:100%;object-fit:cover;display:block}
.hero-visual .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.35))}
.hero-visual .t1{top:0;left:0;width:58%;height:52%;transform:rotate(-3deg);animation:float 7s ease-in-out infinite alternate}
.hero-visual .t2{top:6%;right:0;width:42%;height:38%;transform:rotate(4deg);animation:float 6s ease-in-out infinite alternate -2s}
.hero-visual .t3{bottom:0;left:12%;width:46%;height:42%;transform:rotate(2deg);animation:float 8s ease-in-out infinite alternate -4s}
.hero-visual .t4{bottom:8%;right:2%;width:44%;height:44%;transform:rotate(-5deg);animation:float 7s ease-in-out infinite alternate -1s}
.hero-visual .glow{
  position:absolute;inset:10%;z-index:-1;border-radius:50%;
  background:var(--grad);filter:blur(70px);opacity:.55;
  animation:morph 14s ease-in-out infinite alternate;
}
@keyframes morph{
  0%{transform:rotate(0deg) scale(1)}
  100%{transform:rotate(30deg) scale(1.1)}
}
.hero-visual .glass{
  position:absolute;background:rgba(10,10,10,.78);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 18px;
  box-shadow:0 22px 50px rgba(0,0,0,.5);z-index:5;
  animation:float 6s ease-in-out infinite alternate;
}
@keyframes float{to{transform:translateY(-12px) rotate(var(--r,0deg))}}
.hero-visual .chip-1{top:40%;left:-10%;--r:-4deg;animation-delay:0s}
.hero-visual .chip-2{bottom:40%;right:-8%;--r:3deg;animation-delay:-3s}
.hero-visual .chip-label{font-family:var(--mono);font-size:10px;letter-spacing:-0.22px;text-transform:uppercase;color:var(--mute);margin-bottom:4px;font-weight:500}
.hero-visual .chip-val{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:-0.72px}
.hero-visual .chip-val .dot{color:var(--cyan)}
.hero-visual .chip-val.green{color:#68BD48}

/* ---------------- MARQUEE ---------------- */
.marquee{
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;background:#060606;
  position:relative;
}
/* Fade edges so logos appear/disappear smoothly instead of hard-clipping */
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,#060606,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#060606,transparent)}
.marquee-track{display:flex;gap:56px;align-items:center;animation:scroll 80s linear infinite;white-space:nowrap}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  height:140px;
}
.marquee-item img{
  height:118px;width:auto;max-width:300px;object-fit:contain;display:block;
  mix-blend-mode:screen;  /* source PNGs are white-on-black — screen blend drops the black bg onto the page */
  opacity:.85;
  transition:opacity .3s ease, transform .3s ease;
}
.marquee-item:hover img{opacity:1;transform:scale(1.04)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------------- SECTION (LIGHT) ---------------- */
.section{padding:clamp(70px,10vw,140px) 0}
.section.light{background:var(--bg-paper);color:var(--ink)}
.section.light .eyebrow{color:rgba(0,0,0,.55)}
.section.light .eyebrow::before{background:rgba(0,0,0,.35)}
.section-head{max-width:min(1040px,100%);margin-bottom:60px;display:flex;flex-direction:column;gap:14px}
.section-head h2{
  font-family:var(--display);
  font-size:clamp(34px,5vw,64px);margin-top:16px;line-height:1;font-weight:500;
  letter-spacing:-1.5px;
}
.section-head p{
  color:rgba(0,0,0,.65);font-size:clamp(15px,1.15vw,17px);margin-top:20px;max-width:620px;
  letter-spacing:-0.4px;font-weight:500;line-height:1.45;
}
.section:not(.light) .section-head p{color:var(--mute)}

/* ---------------- VALUE PROPS ---------------- */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1000px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.value-grid{grid-template-columns:1fr}}
.value-card{
  background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);padding:0;overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;display:flex;flex-direction:column;
}
.value-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,.1)}
.value-card .v-img{
  aspect-ratio:16/10;overflow:hidden;position:relative;
}
.value-card .v-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
  filter:saturate(1.1);
}
.value-card:hover .v-img img{transform:scale(1.08)}
.value-card .v-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(29,192,220,.25),rgba(209,73,154,.2));
  mix-blend-mode:overlay;
}
.value-card .v-body{padding:26px 28px 30px;flex:1;display:flex;flex-direction:column}
.value-card .n{
  font-family:var(--mono);font-size:11px;font-weight:500;color:rgba(0,0,0,.45);
  letter-spacing:-0.32px;text-transform:uppercase;
}
.value-card h3{font-family:var(--display);font-size:22px;margin:12px 0 10px;font-weight:500;line-height:1.05;letter-spacing:-0.72px}
.value-card p{color:rgba(0,0,0,.62);font-size:14px;letter-spacing:-0.4px;font-weight:500;line-height:1.45}

/* ---------------- SERVICES ---------------- */
.services{background:var(--ink);color:#fff;position:relative}
.services::before{
  content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background:radial-gradient(circle at 90% 10%,rgba(233,85,62,.08),transparent 45%);
}
.services .container{position:relative}
.services .section-head h2,.services .section-head p{color:#fff}
.services .section-head p{color:var(--mute)}
.svc-header{
  display:flex;flex-direction:column;gap:14px;
  max-width:820px;margin-bottom:60px;
}
.svc-h2{
  font-family:var(--display);font-weight:500;
  font-size:clamp(38px,5.5vw,76px);line-height:.95;letter-spacing:-2px;
  color:#fff;margin:0;
}
.svc-list{list-style:none;margin:0;padding:0;counter-reset:none}
.svc-row{
  display:grid;grid-template-columns:72px 1fr 220px;gap:40px;align-items:start;
  padding:40px 0;border-bottom:1px solid var(--line);
  transition:background .4s ease, padding .4s ease;
  position:relative;
}
.svc-left{
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding-top:6px;
}
.svc-icon{
  width:44px;height:44px;color:var(--accent);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), color .3s ease;
}
.svc-row:hover .svc-icon{transform:rotate(-12deg) scale(1.08);color:#fff}
@media(max-width:860px){
  .svc-left{flex-direction:row;align-items:center;gap:14px}
  .svc-icon{width:36px;height:36px}
}
.svc-row:first-child{border-top:1px solid var(--line)}
.svc-row::before{
  content:"";position:absolute;left:-40px;right:-40px;top:0;bottom:0;
  background:rgba(255,255,255,.02);opacity:0;transition:opacity .3s ease;z-index:-1;
  border-radius:2px;
}
.svc-row:hover::before{opacity:1}
@media(max-width:860px){
  .svc-row{grid-template-columns:50px 1fr;gap:20px}
  .svc-meta{grid-column:2/-1;margin-top:8px}
}
.svc-n{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--accent);letter-spacing:-0.32px;padding-top:10px;
}
.svc-main h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:-1.2px;
  margin:0 0 14px;color:#fff;
}
.svc-main p{
  color:var(--mute);font-size:15px;letter-spacing:-0.4px;font-weight:500;
  line-height:1.5;max-width:560px;margin:0;
}
.svc-meta{
  font-family:var(--mono);font-size:11px;font-weight:500;
  color:var(--mute);letter-spacing:-0.32px;text-transform:uppercase;
  padding-top:14px;text-align:right;
}
@media(max-width:860px){.svc-meta{text-align:left;padding-top:0}}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr}}
.service{
  background:#0a0a0a;padding:38px 32px 42px;
  transition:background .3s ease;
  position:relative;overflow:hidden;
}
.service:hover{background:#101015}
.service .num{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:-0.32px;text-transform:uppercase;font-weight:500}
.service h3{font-family:var(--display);font-size:26px;margin:22px 0 14px;font-weight:500;letter-spacing:-0.9px;line-height:1.05}
.service p{color:var(--mute);font-size:14px;margin-bottom:24px;letter-spacing:-0.4px;font-weight:500;line-height:1.45}
.service .tags{display:flex;flex-wrap:wrap;gap:6px}
.service .tag{
  font-family:var(--mono);font-size:11px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;
  color:var(--mute);letter-spacing:-0.22px;font-weight:500;
}
.service .arrow{
  position:absolute;top:32px;right:28px;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:all .3s ease;
}
.service:hover .arrow{background:var(--cyan);border-color:var(--cyan);color:#000;transform:rotate(-45deg)}

/* ---------------- PROCESS ---------------- */
.process-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:24px;counter-reset:step}
@media(max-width:900px){.process-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.process-grid{grid-template-columns:1fr}}
.process-card{
  background:transparent;border:none;border-top:1px solid rgba(0,0,0,.15);
  padding:32px 0 0;position:relative;transition:all .3s ease;
}
.process-card:hover{color:var(--accent)}
.process-card:hover p,.process-card:hover .step-n{color:rgba(0,0,0,.55)}
.process-card:hover h3 span.grad-text{color:var(--accent)}
.process-card:hover .big-n{color:var(--accent)!important}
.p-icon{
  width:40px;height:40px;color:var(--accent);
  display:block;margin-bottom:10px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), color .3s ease;
}
.p-icon *{vector-effect:non-scaling-stroke}
.process-card:hover .p-icon{transform:rotate(-6deg) scale(1.08)}
.step-n{font-family:var(--mono);font-size:11px;color:rgba(0,0,0,.45);letter-spacing:-0.32px;text-transform:uppercase;font-weight:500}
.process-card h3{font-family:var(--display);font-size:28px;margin:30px 0 14px;font-weight:500;line-height:1;letter-spacing:-1.02px}
.process-card p{font-size:14px;color:rgba(0,0,0,.6);transition:color .3s;letter-spacing:-0.4px;font-weight:500;line-height:1.45}
.process-card .big-n{
  position:absolute;top:0;right:0;
  font-family:var(--mono);font-size:11px;font-weight:500;color:rgba(0,0,0,.35);
  letter-spacing:-0.32px;text-transform:uppercase;transition:color .3s;
  padding-top:12px;
}
.process-card:hover .big-n{color:rgba(255,255,255,.08)}
.glass-card-object{
  width:clamp(82px,8vw,128px);
  height:clamp(82px,8vw,128px);
  object-fit:contain;
  display:block;
  margin:22px 0 -2px -8px;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.18));
  pointer-events:none;
}
.section:not(.light) .glass-card-object{filter:drop-shadow(0 22px 38px rgba(0,0,0,.36))}
.process-card .glass-card-object + h3{margin-top:22px}
@media(max-width:560px){
  .glass-card-object{width:96px;height:96px;margin-top:18px}
}

/* ---------------- WORK / CASE STUDIES ---------------- */
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
@media(max-width:860px){.work-grid{grid-template-columns:repeat(2,1fr)}}
.work-card{
  grid-column:span 3;
  border-radius:2px;overflow:hidden;position:relative;
  aspect-ratio:4/3;
  transition:transform .4s ease;
}
.work-card.tall{grid-column:span 2;aspect-ratio:3/4}
.work-card.wide{grid-column:span 4;aspect-ratio:16/10}
@media(max-width:860px){
  .work-card,.work-card.tall,.work-card.wide{grid-column:span 2;aspect-ratio:4/3}
}
.work-card .bg{position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1);z-index:1}
.work-card .bg img{width:100%;height:100%;object-fit:cover;display:block}
.work-card:hover .bg{transform:scale(1.08)}
.work-card .overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.35) 100%);
  mix-blend-mode:multiply;
}
.work-card .info{
  position:absolute;left:28px;right:28px;bottom:26px;z-index:3;color:#fff;
  transform:translateY(8px);transition:transform .4s ease;
}
.work-card:hover .info{transform:translateY(0)}
.work-card .kind{font-family:var(--mono);font-size:11px;letter-spacing:-0.32px;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:8px;font-weight:500}
.work-card h4{font-family:var(--display);font-size:30px;font-weight:500;letter-spacing:-1.02px;line-height:1}
.work-card .tag-pill{
  position:absolute;top:22px;left:22px;z-index:3;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);
  padding:6px 12px;border-radius:999px;color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:-0.32px;font-weight:500;
  border:1px solid rgba(255,255,255,.18);
}
/* "+245 more" CTA tile at the end of the work grid */
.work-card.work-more{
  background:#101010;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
}
.work-card.work-more::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 60% 40%,rgba(233,85,62,.15),transparent 55%);
  transition:opacity .4s ease;
}
.work-card.work-more:hover::before{background:radial-gradient(circle at 60% 40%,rgba(233,85,62,.28),transparent 55%)}
.wm-inner{
  position:relative;z-index:2;text-align:center;padding:28px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.wm-big{
  font-family:var(--display);font-weight:500;font-size:clamp(72px,8vw,112px);
  line-height:1;letter-spacing:-3.2px;color:#fff;
}
.wm-plus{color:var(--accent);margin-left:4px}
.wm-label{
  font-family:var(--mono);font-size:11px;letter-spacing:-0.32px;text-transform:uppercase;
  color:var(--mute);font-weight:500;max-width:200px;line-height:1.4;
}
.wm-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  font-family:Inter,sans-serif;font-size:14px;font-weight:600;letter-spacing:-0.3px;
  color:#fff;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.25);
  transition:border-color .2s,color .2s;
}
.work-card.work-more:hover .wm-cta{color:var(--accent);border-color:var(--accent)}
.work-card.work-more:hover .wm-cta svg{transform:translateX(3px)}
.wm-cta svg{transition:transform .2s}

/* Gradient backgrounds when no image */
.work-card .bg.g1{background:linear-gradient(135deg,#F04E41,#EE7A3C)}
.work-card .bg.g2{background:linear-gradient(135deg,#1DC0DC,#3E67B1)}
.work-card .bg.g3{background:linear-gradient(135deg,#A45EA5,#D1499A)}
.work-card .bg.g4{background:linear-gradient(135deg,#68BD48,#1AB78F)}
.work-card .bg.g5{background:linear-gradient(135deg,#7162AB,#1DC0DC)}

/* ---------------- STATS ---------------- */
.stats{background:#0a0a0a;color:#fff;padding:clamp(70px,10vw,130px) 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:860px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat{padding:30px 24px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
@media(max-width:860px){
  .stat:nth-child(odd){border-left:none}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
}
.stat .big{
  font-family:var(--display);font-size:clamp(56px,8vw,112px);font-weight:500;line-height:1;
  letter-spacing:-4px;
  color:var(--accent);
}
.stat .label{font-size:13px;color:var(--mute);margin-top:14px;letter-spacing:-0.32px;font-weight:500}

/* ---------------- MANIFESTO ---------------- */
.manifesto{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:clamp(80px,12vw,140px) 0;overflow:hidden;color:#fff;isolation:isolate;
}
.man-bg{position:absolute;inset:0;z-index:-2}
.man-bg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1) contrast(1.05)}
.man-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 30% 40%,rgba(0,0,0,.4),rgba(0,0,0,.82) 70%),
    linear-gradient(135deg,rgba(10,10,10,.55),rgba(10,10,10,.9));
}
.man-inner{width:100%;position:relative;z-index:1}  /* flex child needs explicit width to hit global container max */
.man-inner > .eyebrow,.manifesto h2,.manifesto p,.man-stats{position:relative;z-index:2}
.man-credo-logo{
  position:absolute;top:clamp(38px,3.4vw,50px);right:clamp(18px,5vw,78px);
  width:clamp(254px,25.35vw,442px);max-width:36.4vw;height:auto;display:block;
  z-index:1;pointer-events:none;
  filter:none;
  transform:translate3d(0,0,0);
  animation:credoLogoFloat 8s ease-in-out infinite alternate;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s ease;
  will-change:transform;
}
.manifesto:hover .man-credo-logo{animation:none;transform:translate3d(-14px,-20px,0) rotate(-2deg) scale(1.06);filter:saturate(1.1) contrast(1.04)}
@keyframes credoLogoFloat{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-8px,-10px,0)}
}
@media(max-width:1120px){
  .man-credo-logo{right:clamp(16px,3.5vw,44px);width:min(36.4vw,390px);opacity:1}
  .manifesto p{max-width:600px}
}
@media(max-width:760px){
  .man-credo-logo{position:relative;top:auto;right:auto;width:min(68vw,312px);max-width:none;margin:0 0 28px;opacity:1}
}
@media(prefers-reduced-motion:reduce){.man-credo-logo{animation:none}}
.manifesto h2{
  font-family:var(--display);
  font-size:clamp(44px,7vw,96px);font-weight:500;line-height:.95;
  margin:20px 0 36px;letter-spacing:-2.5px;
}
.grad-text-big{
  color:var(--accent);
  display:inline-block;
}
.manifesto p{
  font-size:clamp(17px,1.4vw,21px);color:rgba(255,255,255,.82);
  max-width:620px;line-height:1.45;margin-bottom:56px;
  letter-spacing:-0.5px;font-weight:500;
}
.man-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  padding-top:40px;border-top:1px solid var(--line);
}
@media(max-width:760px){.man-stats{grid-template-columns:1fr;gap:22px}}
.man-stats .ms-big{
  display:block;font-family:var(--display);font-weight:500;font-size:clamp(40px,4.6vw,58px);
  letter-spacing:-2px;line-height:1;
  color:var(--accent);
}
.man-stats .ms-lab{display:block;color:var(--mute);font-size:13px;margin-top:10px;max-width:260px;letter-spacing:-0.32px;font-weight:500;line-height:1.4}

/* ---------------- INDUSTRIES ---------------- */
.industries{background:#050505;color:#fff;position:relative;overflow:hidden}
.industries::before{
  content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background:radial-gradient(circle at 85% 85%,rgba(233,85,62,.08),transparent 45%);
}
.industries .container{position:relative}
.industries .section-head h2,.industries .section-head p{color:#fff}
.industries .section-head p{color:var(--mute)}
.ind-grid{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:340px;
  gap:18px;margin-bottom:60px;
}
@media(max-width:960px){.ind-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:300px}}
@media(max-width:560px){.ind-grid{grid-template-columns:1fr;grid-auto-rows:380px}}
.ind-card{
  position:relative;overflow:hidden;border-radius:2px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  isolation:isolate;
}
.ind-card.ind-tall{grid-row:span 2}
@media(max-width:560px){.ind-card.ind-tall{grid-row:auto}}
.ind-card:hover{transform:translateY(-6px)}
.ind-bg{position:absolute;inset:0;z-index:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ind-bg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.18) contrast(1.04) brightness(1.04)}
.ind-card:hover .ind-bg{transform:scale(1.08)}
.ind-gloss{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.44) 45%,rgba(0,0,0,.76) 100%);
  transition:opacity .4s;
}
.ind-card:hover .ind-gloss{
  background:linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.52) 45%,rgba(11,11,10,.78) 100%);
}
.ind-content{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 28px 30px;
  color:#fff;
}
.ind-num{
  font-family:var(--mono);font-size:11px;letter-spacing:-0.32px;font-weight:500;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.ind-card h3{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);font-weight:500;margin:14px 0 10px;line-height:1;letter-spacing:-1.02px}
.ind-content p{font-size:14px;color:rgba(255,255,255,.82);max-width:420px;line-height:1.45;letter-spacing:-0.4px;font-weight:500}
.ind-arrow{
  position:absolute;top:26px;right:26px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);
  display:grid;place-items:center;color:#fff;font-size:18px;
  transition:all .3s ease;
}
.ind-card:hover .ind-arrow{background:#fff;color:#000;transform:rotate(-45deg) scale(1.08)}
.ind-cta{
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:36px 40px;border:1px solid var(--line);border-radius:2px;
  background:rgba(233,85,62,.06);
}
.ind-cta p{color:var(--mute);font-size:16px;max-width:540px}

/* ---------------- URGENCY / FOMO ---------------- */
.urgency{
  position:relative;background:#050505;color:#fff;
  overflow:hidden;isolation:isolate;
  padding:clamp(90px,12vw,160px) 0;
}
.urgency::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 85% 15%,rgba(233,85,62,.26),transparent 50%),
    radial-gradient(circle at 10% 90%,rgba(113,98,171,.14),transparent 50%);
  filter:blur(30px);
}

/* Abstract SVG background — topographic / radar / warning motif */
.urg-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 50%,#000 30%,rgba(0,0,0,.55) 80%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 50%,#000 30%,rgba(0,0,0,.55) 80%,transparent 100%);
}
.urg-bg svg{width:100%;height:100%;display:block}
.urg-bg .rings{animation:urgPulse 9s ease-in-out infinite}
.urg-bg .contour{animation:urgDrift 22s ease-in-out infinite alternate}
@keyframes urgPulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
@keyframes urgDrift{
  from{transform:translateX(0)}
  to{transform:translateX(-30px)}
}

.urg-bigword{
  position:absolute;bottom:-4vw;right:-2vw;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--display);font-weight:500;
  font-size:clamp(240px,32vw,560px);line-height:.82;letter-spacing:-0.08em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.08);
}
.urgency-inner{position:relative;z-index:2}

.urg-head{max-width:920px;margin-bottom:80px}
.urg-eye{display:inline-flex;align-items:center;gap:10px;color:#fff}
.urg-pulse{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);
  animation:urgPulse 1.8s ease-in-out infinite;
}
@keyframes urgPulse{0%,100%{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.urg-h2{
  font-size:clamp(40px,6.2vw,92px);font-weight:500;line-height:.95;
  margin:20px 0 28px;letter-spacing:-2.5px;
}
.urg-accent{color:var(--accent);position:relative;white-space:normal}
.urg-accent::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:.1em;
  background:var(--accent);opacity:.2;
}
.urg-lead{
  color:rgba(255,255,255,.72);font-size:clamp(16px,1.25vw,19px);
  max-width:700px;line-height:1.55;letter-spacing:-0.4px;font-weight:500;
}
.urg-lead strong{color:#fff;font-weight:600}

.urg-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-bottom:80px;
}
@media(max-width:860px){.urg-stats{grid-template-columns:1fr}}
.ustat{
  background:#0a0a0a;padding:40px 32px;
  display:flex;flex-direction:column;gap:18px;
  transition:background .35s ease;
}
.ustat:hover{background:#101010}
.u-n{
  font-family:var(--display);font-weight:500;
  font-size:clamp(58px,7vw,92px);line-height:.95;letter-spacing:-3px;
  color:#fff;display:inline-flex;align-items:baseline;
}
.u-n em{
  font-style:normal;font-size:.28em;color:var(--accent);letter-spacing:-.4px;
  margin-left:6px;vertical-align:baseline;font-weight:500;
}
.u-lab{
  font-family:Inter,sans-serif;font-size:14px;color:var(--mute);
  letter-spacing:-0.3px;font-weight:500;line-height:1.5;max-width:280px;
}

.urg-cta{
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
  padding:44px 48px;border:1px solid rgba(233,85,62,.35);
  background:linear-gradient(135deg,rgba(233,85,62,.08),rgba(233,85,62,.02));
  border-radius:2px;
}
@media(max-width:820px){.urg-cta{grid-template-columns:1fr;gap:26px;padding:32px}}
.urg-cta-h3{
  font-size:clamp(26px,3.2vw,40px);font-weight:500;line-height:1;
  letter-spacing:-1.3px;margin-bottom:10px;
}
.urg-cta p{
  color:rgba(255,255,255,.7);font-size:15px;letter-spacing:-0.3px;
  font-weight:500;line-height:1.55;max-width:540px;
}
.urg-cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media(max-width:820px){.urg-cta-actions{justify-content:flex-start}}

/* ---------------- TESTIMONIALS ---------------- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.quote-grid{grid-template-columns:1fr}}
.quote{
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);
  padding:32px;transition:transform .3s,box-shadow .3s;
  display:flex;flex-direction:column;
}
.quote:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.06)}
.stars{color:#EE7A3C;letter-spacing:4px;font-size:14px;margin-bottom:16px}
.quote p{font-family:var(--display);font-size:19px;color:#0a0a0a;margin-bottom:22px;line-height:1.3;font-weight:500;letter-spacing:-0.64px}
.quote .who{display:flex;gap:12px;align-items:center;margin-top:auto}
.quote .who .ava{
  width:44px;height:44px;border-radius:50%;
  background:var(--grad);padding:2px;display:block;position:relative;overflow:hidden;flex:0 0 44px;
  box-shadow:0 14px 22px rgba(0,0,0,.1);
}
.quote .who .ava img{width:100%;height:100%;object-fit:cover;object-position:center center;border-radius:50%;display:block;filter:saturate(1.08) contrast(1.04)}
.quote .who .ava::after{content:"";position:absolute;inset:2px;border-radius:50%;background:linear-gradient(135deg,rgba(255,78,56,.2),rgba(205,42,187,.14),rgba(22,190,204,.18));mix-blend-mode:screen;pointer-events:none}
.quote .who .name{font-weight:500;font-size:14px;letter-spacing:-0.4px}
.quote .who .role{font-family:var(--mono);font-size:11px;color:rgba(0,0,0,.55);letter-spacing:-0.32px;text-transform:uppercase;font-weight:500;margin-top:2px}

/* ---------------- PULL QUOTE ---------------- */
.pullquote{
  background:#020204;color:#fff;
  min-height:clamp(640px,78vh,860px);
  padding:clamp(110px,14vw,190px) 0;
  position:relative;overflow:hidden;display:flex;align-items:center;
  isolation:isolate;
}
.pullquote::before{
  content:"";position:absolute;inset:-1px;z-index:-1;
  background-image:none;
  background-size:100% auto;background-position:center center;background-repeat:no-repeat;
  filter:brightness(.72) contrast(1.12) saturate(1.08);
  opacity:1;
  -webkit-mask-image:radial-gradient(ellipse 98% 92% at 50% 52%,#000 72%,rgba(0,0,0,.84) 86%,transparent 100%);
          mask-image:radial-gradient(ellipse 98% 92% at 50% 52%,#000 72%,rgba(0,0,0,.84) 86%,transparent 100%);
}
.pullquote::after{content:none}
.pq-stars{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;opacity:.72;
}
.pq-star{
  position:absolute;left:0;width:clamp(120px,15vw,250px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82) 58%,rgba(29,192,220,.58) 78%,transparent);
  box-shadow:0 0 8px rgba(255,255,255,.45),0 0 18px rgba(29,192,220,.26);
  opacity:0;transform:translate3d(-24vw,-10vh,0) rotate(18deg);
  animation:pqShoot 10.5s linear infinite;
}
.pq-star.pq-s1{top:18%;animation-delay:-1.2s}
.pq-star.pq-s2{top:42%;width:clamp(100px,12vw,210px);animation-delay:-4.6s}
.pq-star.pq-s3{top:68%;width:clamp(140px,18vw,300px);animation-delay:-7.4s}
.pq-star.pq-s4{top:82%;width:clamp(90px,10vw,170px);animation-delay:-9s}
@keyframes pqShoot{
  0%{transform:translate3d(-24vw,-10vh,0) rotate(18deg);opacity:0}
  7%{opacity:.78}
  50%{opacity:.78}
  100%{transform:translate3d(124vw,34vh,0) rotate(18deg);opacity:0}
}
.pq-inner{position:relative;z-index:1;width:100%}
.pq-inner .pq-body{max-width:720px}
.pq-mark{
  font-family:var(--display);font-size:clamp(150px,18vw,300px);
  line-height:.7;color:var(--accent);
  position:absolute;top:-38px;left:-18px;opacity:.8;pointer-events:none;
  font-weight:500;
}
.pq-body{
  font-family:var(--display);font-weight:500;
  font-size:clamp(34px,4.4vw,64px);line-height:1.05;letter-spacing:-1.7px;
  color:#fff;margin:0 0 42px;max-width:720px;font-style:normal;
  position:relative;text-shadow:0 18px 44px rgba(0,0,0,.45);
}
.pq-body{max-width:720px}
.pq-attrib{
  display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.22);max-width:620px;
}
.pq-name{font-family:var(--display);font-size:16px;letter-spacing:-0.5px;font-weight:500;color:#fff}
.pq-role{font-family:var(--mono);font-size:11px;letter-spacing:-0.32px;text-transform:uppercase;color:rgba(255,255,255,.68);font-weight:500}
@media(max-width:900px){
  .pullquote{min-height:620px;padding:120px 0;background:#020204}
  .pullquote::before{background-size:auto 100%;background-position:60% center;filter:brightness(.68) contrast(1.12) saturate(1.08)}
  .pq-inner .pq-body,.pq-body{max-width:680px}
}
@media(max-width:620px){
  .pullquote{min-height:560px;padding:100px 0}
  .pullquote::before{background-position:64% center;opacity:.82}
  .pq-body{font-size:clamp(30px,11vw,48px)}
  .pq-mark{left:-8px;top:-26px}
}

/* ---------------- FAQ ---------------- */
.faq-list{border-top:1px solid rgba(0,0,0,.1)}
.faq{border-bottom:1px solid rgba(0,0,0,.1)}
.faq summary{
  list-style:none;cursor:pointer;padding:32px 0;
  display:flex;align-items:center;gap:28px;
  font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-0.9px;line-height:1.15;
}
.f-idx{
  font-family:var(--mono);font-size:11px;letter-spacing:-0.32px;font-weight:500;
  color:rgba(0,0,0,.4);min-width:40px;align-self:flex-start;margin-top:8px;
}
.faq summary .toggle{margin-left:auto}
.faq summary::-webkit-details-marker{display:none}
.faq .toggle{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.15);
  display:grid;place-items:center;flex-shrink:0;transition:all .3s;
}
.faq[open] .toggle{background:#0a0a0a;color:#fff;border-color:#0a0a0a;transform:rotate(45deg)}
.faq p{padding:0 0 28px;color:rgba(0,0,0,.65);max-width:860px;font-size:15px;letter-spacing:-0.4px;font-weight:500;line-height:1.55}

/* ---------------- LEAD FORM ---------------- */
.lead{
  background:linear-gradient(180deg,#0a0a0a 0%,#06060a 100%);
  color:#fff;position:relative;overflow:hidden;
}
.lead::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 80% 10%,rgba(233,85,62,.12),transparent 45%);
  filter:blur(40px);
}
.lead-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start;position:relative}
@media(max-width:960px){.lead-grid{grid-template-columns:1fr}}
.lead-copy h2{font-family:var(--display);font-size:clamp(38px,4.8vw,60px);font-weight:500;line-height:.95;margin:18px 0 26px;letter-spacing:-1.68px}
.lead-copy h2 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead-copy p{color:var(--mute);font-size:16px;margin-bottom:30px;max-width:460px;letter-spacing:-0.4px;font-weight:500;line-height:1.45}
.lead-bullets{display:flex;flex-direction:column;gap:14px;margin-bottom:30px}
.lead-bullets .b{
  display:flex;align-items:center;gap:14px;font-size:14px;letter-spacing:-0.4px;font-weight:500;
}
.lead-bullets .b .dot{
  width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);flex-shrink:0;
}
.lead-contact{display:flex;flex-direction:column;gap:16px;padding-top:28px;border-top:1px solid var(--line);margin-top:8px}
.lead-contact a{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--mute)}
.lead-contact a:hover{color:#fff}

.form-card{
  background:rgba(255,255,255,.03);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:2px;
  padding:40px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field .req{color:var(--accent);margin-left:2px}
/* Honeypot — off-screen, invisible to humans, bots fill it */
.hp-trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
/* Hidden attribute respected even when element has display: flex/grid */
[hidden]{display:none !important}
/* Success state */
.form-success{
  background:rgba(255,255,255,.03);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:2px;
  padding:48px 40px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.fs-check{width:56px;height:56px;color:var(--accent)}
.fs-check svg{width:100%;height:100%}
.fs-title{font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-1.02px;line-height:1;color:#fff;margin:0}
.fs-body{color:var(--mute);font-size:15px;letter-spacing:-0.4px;font-weight:500;line-height:1.5;max-width:420px;margin:0 0 12px}
.form-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;background:var(--white)}
.field input.err,.field textarea.err{border-color:var(--accent);background:rgba(233,85,62,.06)}
.field label{font-family:Inter,sans-serif;font-size:13px;letter-spacing:-0.3px;color:#fff;font-weight:700}
.field input,.field select,.field textarea{
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.2);border-radius:12px;
  padding:14px 16px;font-family:Inter,sans-serif;font-size:15px;color:#fff;
  letter-spacing:-0.4px;font-weight:500;
  transition:border-color .2s,background .2s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.26);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cyan);background:rgba(29,192,220,.05);
}
.field textarea{min-height:110px;resize:vertical}
.field select option{background:#0a0a0a;color:#fff}
.form-submit{
  display:flex;align-items:center;gap:12px;justify-content:center;
  width:100%;padding:18px;margin-top:10px;border-radius:2px;
  background:var(--accent);color:#fff;
  font-family:Inter,sans-serif;font-weight:600;font-size:15px;letter-spacing:-0.3px;
  transition:transform .2s, background .2s;
}
.form-submit:hover{transform:translateY(-2px);background:#f56650}
.form-note{font-family:Inter,sans-serif;font-size:13px;color:var(--mute);text-align:center;margin-top:16px;letter-spacing:-0.3px;font-weight:400;line-height:1.5;max-width:460px;margin-left:auto;margin-right:auto}

/* ---------------- FOOTER ---------------- */
.footer{background:#000;color:#fff;padding:56px 0 22px;border-top:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.footer .container{position:relative;z-index:2}

/* ================ AURORA SPHERE (footer ambient) ================ */
.aurora-sphere{
  position:absolute;left:50%;bottom:-30%;
  width:min(1200px,150vw);height:min(1200px,150vw);
  transform:translateX(-50%);
  z-index:0;pointer-events:none;
  animation:auroraBreathe 14s ease-in-out infinite alternate;
  will-change:transform;
  opacity:.85;
}
.aurora-sphere .a-blob{
  position:absolute;inset:0;border-radius:50%;
  filter:blur(45px) saturate(1.3);
  mix-blend-mode:screen;
}
.aurora-sphere .a-b1{
  background:
    radial-gradient(circle at 30% 30%, rgba(164,94,165,.95), transparent 45%),
    radial-gradient(circle at 72% 45%, rgba(29,192,220,.82), transparent 50%),
    radial-gradient(circle at 55% 85%, rgba(240,78,65,.72), transparent 50%),
    radial-gradient(circle at 82% 72%, rgba(209,73,154,.88), transparent 45%);
  animation:auroraSpin 26s linear infinite;
}
.aurora-sphere .a-b2{
  background:
    radial-gradient(circle at 42% 62%, rgba(113,98,171,.78), transparent 48%),
    radial-gradient(circle at 80% 22%, rgba(26,183,143,.55), transparent 55%),
    radial-gradient(circle at 18% 78%, rgba(62,103,177,.65), transparent 55%);
  animation:auroraSpin 38s linear infinite reverse;
  opacity:.9;
}
.aurora-sphere .a-halo{
  position:absolute;inset:-10%;border-radius:50%;
  background:radial-gradient(circle, rgba(164,94,165,.28), transparent 62%);
  filter:blur(50px);
  animation:auroraPulse 10s ease-in-out infinite;
}
@keyframes auroraSpin{to{transform:rotate(360deg)}}
@keyframes auroraBreathe{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%    {transform:translateX(-50%) scale(1.08)}
}
@keyframes auroraPulse{
  0%,100%{opacity:.55}
  50%    {opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .aurora-sphere, .aurora-sphere .a-blob, .aurora-sphere .a-halo{
    animation:none !important; transform:translateX(-50%) !important;
  }
}

/* ================ Footer blown-up typography (midlife.engineering-inspired) ================ */
.foot-shout{
  position:relative;z-index:2;
  padding:clamp(50px,8vw,110px) 0 clamp(40px,6vw,70px);
  margin-bottom:clamp(36px,6vw,70px);
  border-bottom:1px solid var(--line);
  user-select:none;
}
.foot-shout .fs-line{
  display:block;overflow:hidden;padding:0;line-height:.85;
}
.foot-shout .fs-word{display:block;font-family:var(--display);font-weight:500;font-style:normal;font-size:clamp(56px,15vw,220px);line-height:.88;letter-spacing:-0.055em;color:#fff;text-transform:uppercase;transition:transform 1.1s cubic-bezier(.77,0,.175,1);
  white-space:nowrap;
  will-change:transform;
}
.js-ready.reveal-booted .foot-shout:not(.in) .fs-word{transform:translate3d(0,115%,0)}.foot-shout.in .fs-word{transform:translate3d(0,0,0);will-change:auto}
.foot-shout.in .fs-line:nth-child(2) .fs-word{transition-delay:.14s}
.foot-shout.in .fs-line:nth-child(3) .fs-word{transition-delay:.28s}

@media (prefers-reduced-motion: reduce){
  .foot-shout .fs-word{transform:none !important;transition:none !important}
}
.footer-grid{display:grid;grid-template-columns:2fr auto auto;column-gap:56px;row-gap:28px;margin-bottom:36px}
.footer-grid > div:nth-child(2){margin-right:-24px} /* pulls Services toward Get in Touch */
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr;gap:20px}}
.footer h4{font-family:var(--mono);font-size:11px;letter-spacing:-0.32px;text-transform:uppercase;margin-bottom:14px;color:#fff;font-weight:500}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.footer ul a{color:var(--mute);font-size:13.5px;letter-spacing:-0.4px;font-weight:500;display:inline-block;transition:color .25s ease, transform .25s ease}
.footer ul a:hover{color:#fff;transform:translateX(4px)}
.foot-about p{color:var(--mute);font-size:13.5px;max-width:340px;margin:14px 0 18px;letter-spacing:-0.4px;font-weight:500;line-height:1.5}
.foot-socials{display:flex;gap:8px}
.foot-socials a{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:all .3s cubic-bezier(.2,.7,.2,1);
}
.foot-socials a:hover{background:#fff;color:#000;border-color:#fff;transform:translateY(-3px) rotate(-6deg)}
.foot-bottom{
  padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:-0.22px;text-transform:uppercase;font-weight:500;
}

/* ---------------- REVEAL ANIMATIONS ---------------- */
.reveal{
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1), filter 1.05s cubic-bezier(.16,1,.3,1);
}
.js-ready.reveal-booted .reveal:not(.in){opacity:0;transform:translate3d(0,42px,0);filter:blur(3px)}
.reveal.in{opacity:1;transform:translate3d(0,0,0);filter:none;will-change:auto}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}
.reveal-delay-5{transition-delay:.40s}
.reveal-delay-6{transition-delay:.48s}
.reveal-l{transform:translate3d(-44px,0,0)}
.reveal-r{transform:translate3d(44px,0,0)}
.reveal-scale{transform:scale(.92)}
.reveal-blur{filter:blur(4px)}

/* Section-head children stagger (auto — JS tags .section-head as .reveal) */
.section-head .eyebrow,
.section-head h2,
.section-head > p{
  transition:opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1), filter .95s cubic-bezier(.16,1,.3,1);
}
.js-ready.reveal-booted .section-head:not(.in) .eyebrow,
.js-ready.reveal-booted .section-head:not(.in) h2,
.js-ready.reveal-booted .section-head:not(.in) > p{opacity:0;transform:translate3d(0,24px,0);filter:blur(3px)}
.section-head.in .eyebrow{opacity:1;transform:none;filter:none;transition-delay:.05s}
.section-head.in h2{opacity:1;transform:none;filter:none;transition-delay:.18s}
.section-head.in > p{opacity:1;transform:none;filter:none;transition-delay:.30s}

/* Lower-page sections: stagger copy so they glide in instead of popping on. */
.urg-head .urg-eye,
.urg-head .urg-h2,
.urg-head .urg-lead,
.urg-cta .urg-cta-copy,
.urg-cta .urg-cta-actions,
.faq-list .faq{
  transition:opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1), filter .95s cubic-bezier(.16,1,.3,1);
}
.js-ready.reveal-booted .urg-head:not(.in) .urg-eye,
.js-ready.reveal-booted .urg-head:not(.in) .urg-h2,
.js-ready.reveal-booted .urg-head:not(.in) .urg-lead,
.js-ready.reveal-booted .urg-cta:not(.in) .urg-cta-copy,
.js-ready.reveal-booted .urg-cta:not(.in) .urg-cta-actions,
.js-ready.reveal-booted .faq-list:not(.in) .faq{opacity:0;transform:translate3d(0,24px,0);filter:blur(3px)}
.urg-head.in .urg-eye,
.urg-head.in .urg-h2,
.urg-head.in .urg-lead,
.urg-cta.in .urg-cta-copy,
.urg-cta.in .urg-cta-actions,
.faq-list.in .faq{opacity:1;transform:none;filter:none}
.urg-head.in .urg-eye{transition-delay:.04s}
.urg-head.in .urg-h2{transition-delay:.16s}
.urg-head.in .urg-lead{transition-delay:.30s}
.urg-cta.in .urg-cta-copy{transition-delay:.08s}
.urg-cta.in .urg-cta-actions{transition-delay:.22s}
.faq-list.in .faq:nth-child(1){transition-delay:.04s}
.faq-list.in .faq:nth-child(2){transition-delay:.10s}
.faq-list.in .faq:nth-child(3){transition-delay:.16s}
.faq-list.in .faq:nth-child(4){transition-delay:.22s}
.faq-list.in .faq:nth-child(5){transition-delay:.28s}
.faq-list.in .faq:nth-child(6){transition-delay:.34s}
.faq-list.in .faq:nth-child(7){transition-delay:.40s}
.faq-list.in .faq:nth-child(8){transition-delay:.46s}
.faq-list.in .faq:nth-child(9){transition-delay:.52s}
.faq-list.in .faq:nth-child(10){transition-delay:.58s}

/* Icon entrance — process + services */
.reveal .p-icon, .reveal .svc-icon{
  opacity:0;transform:scale(.72) rotate(-14deg);transform-origin:center;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1) .15s, transform .9s cubic-bezier(.2,.7,.2,1) .15s;
}
.reveal.in .p-icon, .reveal.in .svc-icon{opacity:1;transform:scale(1) rotate(0)}

/* Animated nav link underline */
.nav-links a{position:relative;padding:6px 0;transition:color .25s ease}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s cubic-bezier(.77,0,.175,1);
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

/* Primary button glow + smoother easing */
.btn-primary{transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease, box-shadow .5s ease, color .3s ease}
.btn-primary:hover{box-shadow:0 14px 42px rgba(240,78,65,.35)}
.nav-cta{transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s ease, box-shadow .5s ease, color .3s ease}
.nav-cta:hover{box-shadow:0 12px 34px rgba(240,78,65,.32)}

/* Magnetic wrapper — JS translates on mousemove */
.mag{will-change:transform;transition:transform .18s ease-out}
.mag.mag-out{transition:transform .55s cubic-bezier(.2,.7,.2,1)}

/* Manifesto bg parallax — JS drives transform, but lift scale so translateY doesn't expose edges */
.man-bg img{will-change:transform;transform:scale(1.18)}

/* Subtle card hover polish (value cards) */
.value-card{transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .3s ease}

/* Reduced-motion safety net */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in, .reveal-l, .reveal-r, .reveal-scale, .reveal-blur,
  .section-head .eyebrow, .section-head h2, .section-head > p,
  .urg-head .urg-eye, .urg-head .urg-h2, .urg-head .urg-lead,
  .urg-cta .urg-cta-copy, .urg-cta .urg-cta-actions, .faq-list .faq,
  .reveal .p-icon, .reveal .svc-icon,
  .mag, .hx-scroll, .marquee-track, .urg-bg .rings, .urg-bg .contour{
    transition:none !important; animation:none !important;
    opacity:1 !important; transform:none !important; filter:none !important;
  }
}

/* ---------------- NUMBER REMOVAL (hide all inline indexes) ---------------- */
.svc-n,
.f-idx,
.ind-num,
.em-n,
.process-card .big-n,
.step-n{
  display:none !important;
}
/* Since we removed svc-n, re-centre the icon vertically in the left column */
.svc-left{justify-content:flex-start;padding-top:4px}

/* ---------------- UTILS ---------------- */
.tag-light{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:rgba(0,0,0,.55);
  letter-spacing:-0.32px;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(0,0,0,.1);border-radius:999px;font-weight:500;
}
.kbd{
  font-family:var(--mono);font-size:10px;letter-spacing:-0.22px;text-transform:uppercase;
  padding:4px 8px;border:1px solid var(--line);border-radius:6px;color:var(--mute);font-weight:500;
}

/* ================ CASE STUDY MODAL ================ */
.cs-modal{
  position:fixed;inset:0;z-index:2147483646;
  display:none;align-items:center;justify-content:center;
  padding:30px 16px;
}
.cs-modal.open{display:flex}
.cs-backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,10,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:csFadeIn .35s ease both;
}
.cs-dialog{
  position:relative;z-index:1;
  width:100%;max-width:1040px;max-height:calc(100vh - 60px);
  background:#faf8f3;color:#0a0a0a;
  border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;
  animation:csSlideUp .5s cubic-bezier(.2,.7,.2,1) both;
  box-shadow:0 40px 90px rgba(0,0,0,.55);
}
@keyframes csFadeIn{from{opacity:0}to{opacity:1}}
@keyframes csSlideUp{from{opacity:0;transform:translate3d(0,40px,0) scale(.97)}to{opacity:1;transform:none}}
.cs-close{
  position:absolute;top:18px;right:18px;z-index:3;
  width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid rgba(0,0,0,.08);
  color:#0a0a0a;
  display:grid;place-items:center;cursor:pointer;
  transition:transform .25s cubic-bezier(.77,0,.175,1), background .25s ease, color .25s ease;
}
.cs-close svg{display:block}
.cs-close:hover{transform:rotate(90deg);background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.cs-body{
  padding:clamp(26px,4vw,52px) clamp(22px,4vw,52px);
  overflow-y:auto;max-height:calc(100vh - 60px);
}
.cs-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:-0.22px;text-transform:uppercase;
  color:rgba(0,0,0,.55);font-weight:500;display:inline-block;margin-bottom:10px;
}
.cs-title{
  font-family:var(--display);font-size:clamp(34px,4.5vw,56px);font-weight:500;
  margin:0 0 18px;line-height:.98;letter-spacing:-1.6px;
}
.cs-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.cs-tag{
  font-size:11.5px;font-family:var(--mono);letter-spacing:-0.2px;
  padding:6px 12px;border:1px solid rgba(0,0,0,.14);border-radius:999px;
  color:rgba(0,0,0,.7);font-weight:500;
}
.cs-blurb{
  font-size:clamp(15px,1.2vw,17px);color:rgba(0,0,0,.75);line-height:1.6;
  letter-spacing:-0.3px;max-width:760px;margin-bottom:28px;
}
.cs-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:26px}
.cs-gallery img{
  width:100%;display:block;border-radius:10px;object-fit:cover;
  aspect-ratio:16/10;background:#eeece6;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.cs-gallery img:hover{transform:scale(1.02)}
.cs-gallery img.cs-full{grid-column:1/-1;aspect-ratio:21/9}
@media(max-width:640px){
  .cs-gallery{grid-template-columns:1fr}
  .cs-gallery img.cs-full{aspect-ratio:16/10}
}
.cs-foot{padding-top:20px;border-top:1px solid rgba(0,0,0,.08);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.cs-source{
  font-family:var(--mono);font-size:12px;font-weight:500;
  color:var(--accent);display:inline-flex;align-items:center;gap:8px;
  letter-spacing:-0.22px;text-transform:uppercase;
}
.cs-source:hover{text-decoration:underline}
body.cs-open{overflow:hidden}
.showreel-dialog{
  position:relative;
  z-index:1;
  width:min(1120px,94vw);
  background:#020204;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.62);
  animation:csSlideUp .5s cubic-bezier(.2,.7,.2,1) both;
}
.showreel-frame{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.showreel-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ================ CAPABILITIES — Monday-Studio-inspired index ================ */
.capx{
  background:var(--bg-paper);color:var(--ink);
  padding:clamp(45px,7vw,90px) 0 clamp(90px,14vw,180px);
}
.capx .section-head{max-width:min(1180px,100%);margin-bottom:clamp(50px,7vw,90px)}
.capx .section-head h2{
  font-family:var(--display);font-weight:500;
  font-size:clamp(56px,7.8vw,118px);line-height:.88;letter-spacing:-0.055em;
  color:#0a0a0a;margin:0;
}
.capx-title-line{display:block;white-space:nowrap}
@media(max-width:760px){.capx-title-line{white-space:normal}}

.capx-list{
  list-style:none;margin:0;padding:0;
  position:relative;
}
.capx-row{
  position:sticky;top:88px;
  display:grid;grid-template-columns:auto 1fr;
  align-items:center;gap:clamp(28px,5vw,72px);
  padding:clamp(32px,5vw,56px) 72px clamp(32px,5vw,56px) clamp(16px,3vw,28px);
  background:var(--bg-paper);
  border-top:1px solid rgba(0,0,0,.14);
  box-shadow:0 -1px 0 rgba(0,0,0,.02); /* hairline above — helps read the stacked edge */
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  text-decoration:none;color:inherit;
  z-index:1;
}
.capx-row:last-child{border-bottom:1px solid rgba(0,0,0,.14)}
@media(max-width:860px){.capx-row{top:72px}}
.capx-row:hover{transform:translateX(10px)}
.capx-row:hover .capx-num{color:var(--accent)}
.capx-row:hover .capx-main h3{color:var(--accent)}
.capx-row:hover .capx-arrow{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-50%) rotate(-45deg)}

.capx-num{
  font-family:var(--display);
  font-size:clamp(72px,12vw,180px);
  font-weight:500;line-height:.85;letter-spacing:-0.055em;
  color:rgba(0,0,0,.14);
  transition:color .6s cubic-bezier(.2,.7,.2,1);
  display:inline-flex;gap:0;white-space:nowrap;user-select:none;
}
.capx-digit{display:inline-block;overflow:hidden;vertical-align:top;height:1em}
.capx-digit .capx-strip{
  display:block;transform:translateY(0);
  transition:transform 1.1s cubic-bezier(.77,0,.175,1);
  will-change:transform;
}
.capx-digit .capx-strip span{display:block;height:1em;line-height:1;padding:0}
.capx-digit[style*="--d:0"]{--capx-shift:0}
.capx-digit[style*="--d:1"]{--capx-shift:-1em}
.capx-digit[style*="--d:2"]{--capx-shift:-2em}
.capx-digit[style*="--d:3"]{--capx-shift:-3em}
.capx-digit[style*="--d:4"]{--capx-shift:-4em}
.capx-digit[style*="--d:5"]{--capx-shift:-5em}
.capx-digit[style*="--d:6"]{--capx-shift:-6em}
.capx-digit[style*="--d:7"]{--capx-shift:-7em}
.capx-digit[style*="--d:8"]{--capx-shift:-8em}
.capx-digit[style*="--d:9"]{--capx-shift:-9em}
.capx-row.in .capx-digit .capx-strip{transform:translateY(var(--capx-shift,0))}
.capx-row.in .capx-digit:nth-child(1) .capx-strip{transition-delay:.08s}
.capx-row.in .capx-digit:nth-child(2) .capx-strip{transition-delay:.22s}

.capx-main h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(24px,3vw,40px);
  line-height:1;letter-spacing:-0.035em;
  margin:0 0 14px;color:#0a0a0a;
  transition:color .35s ease;
}
.capx-main p{
  color:rgba(0,0,0,.6);
  font-size:clamp(14.5px,1.1vw,16.5px);
  line-height:1.5;letter-spacing:-0.3px;font-weight:500;
  max-width:620px;margin:0;
}
.capx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.capx-tags span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:-0.2px;text-transform:uppercase;
  color:rgba(0,0,0,.55);padding:5px 10px;border:1px solid rgba(0,0,0,.1);border-radius:999px;font-weight:500;
}

.capx-arrow{
  position:absolute;right:12px;top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(0,0,0,.18);background:transparent;color:#0a0a0a;
  display:grid;place-items:center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), background .3s ease, color .3s ease, border-color .3s ease;
}

@media(max-width:700px){
  .capx-row{gap:20px;padding-right:52px}
  .capx-num{font-size:clamp(52px,16vw,96px)}
  .capx-main h3{font-size:clamp(20px,5vw,28px)}
  .capx-arrow{width:36px;height:36px;right:6px}
  .capx-arrow svg{width:14px;height:14px}
}

/* Floating WhatsApp button — exact rules pulled from moonbox.ae */
.fixd-wtsp{
  position:fixed;bottom:92px;right:16px;z-index:2147483645;
  border:none;border-radius:50%;
  height:60px;width:60px;
  display:flex;align-items:center;justify-content:center;
  transition:transform 100ms ease-in-out 0s;
}
.fixd-wtsp:hover{transform:scale(1.08)}
.fixd-wtsp img{width:100%;display:block}

/* Local fallback chat launcher; hidden automatically when HubSpot renders its own widget */
.moonbox-chat-launcher{
  position:fixed;bottom:16px;right:16px;z-index:2147483644;
  width:60px;height:60px;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#111;color:#fff;box-shadow:0 16px 40px rgba(0,0,0,.28);
  cursor:pointer;transition:transform 100ms ease-in-out, opacity 160ms ease;
}
.moonbox-chat-launcher:hover{transform:scale(1.08)}
.moonbox-chat-launcher[hidden]{display:none}
.moonbox-chat-launcher svg{width:28px;height:28px}

/* HubSpot chat button — stack below WhatsApp */
#hubspot-messages-iframe-container,
#hubspot-messages-iframe-container.widget-align-right{
  right:16px!important;
  bottom:16px!important;
  z-index:2147483646!important;
}
@media(max-width:700px){
  .fixd-wtsp{bottom:86px;right:14px;height:54px;width:54px}
  .moonbox-chat-launcher{right:12px;bottom:12px;width:54px;height:54px}
  #hubspot-messages-iframe-container,
  #hubspot-messages-iframe-container.widget-align-right{right:12px!important;bottom:12px!important}
}
/* ---------------- MOONBOX GRADIENT ACCENT OVERRIDES ---------------- */
:root{
  --grad:linear-gradient(100deg,#F04E41 0%,#F16F8E 22%,#D1499A 48%,#7162AB 72%,#1DC0DC 100%);
  --grad-2:linear-gradient(100deg,#1DC0DC 0%,#7162AB 30%,#D1499A 62%,#F16F8E 100%);
  --grad-hover:linear-gradient(100deg,#1DC0DC 0%,#7162AB 30%,#D1499A 62%,#F16F8E 100%);
  --accent:#D1499A;
  --accent-glow:rgba(209,73,154,.34);
}
.nav-cta,
.mobile-menu .mm-cta,
.btn-primary,
.form-submit:not(:disabled),
.capx-row:hover .capx-arrow,
.video-close:hover{
  background:var(--grad);
  background-size:100% 100%;
  background-position:center;
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 36px rgba(113,98,171,.22),0 10px 28px rgba(209,73,154,.18);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background-position .45s ease,box-shadow .45s ease,color .3s ease;
}
.nav-cta:hover,
.mobile-menu .mm-cta:hover,
.btn-primary:hover,
.form-submit:not(:disabled):hover,
.capx-row:hover .capx-arrow,
.video-close:hover{
  background:var(--grad-hover);
  background-size:100% 100%;
  background-position:center;
  box-shadow:0 18px 46px rgba(29,192,220,.18),0 14px 38px rgba(209,73,154,.28);
}
.hx-accent,
.grad-text-big,
.stat .big,
.man-stats .ms-big,
.urg-accent,
.u-n em,
.wm-plus,
.pq-mark,
.cs-source,
.lead-copy h2 .grad,
.mobile-menu ul a:hover,
.btn-link:hover,
.work-card.work-more:hover .wm-cta,
.process-card:hover h3 span.grad-text,
.process-card:hover .big-n,
.capx-row:hover .capx-num,
.capx-row:hover .capx-main h3{
  background:var(--grad);
  background-size:100% 100%;
  background-position:center;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
}
.process-card:hover{color:var(--ink)}
.urg-accent::after{
  background:var(--grad);
  opacity:.24;
}
.btn-link:hover{border-color:rgba(209,73,154,.55)}
.work-card.work-more:hover .wm-cta{border-color:rgba(209,73,154,.55)}
.field input.err,.field textarea.err{border-color:#D1499A;background:rgba(209,73,154,.06)}
.urg-pulse{
  background:var(--grad);
  box-shadow:0 0 16px rgba(209,73,154,.62),0 0 24px rgba(29,192,220,.28);
}

/* ---------------- HERO BLACK CONTRAST OVERRIDES ---------------- */
.hero-v2 .hx-accent{
  background:none !important;
  color:#050505 !important;
  -webkit-text-fill-color:#050505 !important;
}
.hero-v2 .btn-primary,
.hero-v2 .btn-primary:hover,
.nav:not(.scrolled) .nav-cta,
.nav:not(.scrolled) .nav-cta:hover{
  background:#050505 !important;
  color:#fff !important;
  border-color:#050505 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}
.hero-v2 .btn-primary:hover,
.nav:not(.scrolled) .nav-cta:hover{
  background:#111 !important;
}

/* ---------------- CAPABILITIES KEYWORD + NUMBER FIX ---------------- */
.capx-key{
  background:var(--grad);
  background-size:100% 100%;
  background-position:center;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.capx-row:hover .capx-num,
.capx-row:hover .capx-num .capx-digit,
.capx-row:hover .capx-num .capx-strip,
.capx-row:hover .capx-num .capx-strip span{
  background:var(--grad);
  background-size:100% 100%;
  background-position:center;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
.capx-row:hover .capx-num{opacity:1;visibility:visible}

/* ---------------- SPEC CONTENT ADDITIONS ---------------- */
.spec-note{font-style:italic;color:rgba(0,0,0,.55);margin-top:18px;font-size:14px;letter-spacing:-0.3px}
.proof-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:34px}
.proof-list > span{display:grid;grid-template-columns:clamp(88px,8vw,128px) 1fr;align-items:center;gap:18px;border-top:1px solid rgba(0,0,0,.14);padding-top:14px;min-height:138px;color:rgba(0,0,0,.68);font-size:15px;line-height:1.45;letter-spacing:-0.35px}
.proof-list strong{display:block;color:#0a0a0a;margin-bottom:8px;font-weight:300;font-size:clamp(26px,2.2vw,32px);line-height:1.04;letter-spacing:-1.05px}
#why-moonbox .proof-list > span{position:relative;transition:transform .34s cubic-bezier(.2,.7,.2,1),border-color .34s ease,color .34s ease}
#why-moonbox .proof-list > span:hover{transform:translateY(-5px);border-color:rgba(0,0,0,.34)}
#why-moonbox .proof-list > span:hover strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#why-moonbox .proof-shape{transition:transform .42s cubic-bezier(.2,.7,.2,1),filter .34s ease}
#why-moonbox .proof-list > span:hover .proof-shape{transform:translate3d(0,-6px,0) rotate(-4deg) scale(1.08);filter:drop-shadow(0 24px 28px rgba(0,0,0,.18))}
.proof-shape{width:clamp(88px,8vw,128px);height:clamp(88px,8vw,128px);object-fit:contain;display:block;filter:drop-shadow(0 18px 22px rgba(0,0,0,.12))}
.proof-copy{display:block}
@media(max-width:760px){
  .proof-list{grid-template-columns:1fr}
  .proof-list > span{grid-template-columns:86px 1fr;min-height:112px;gap:14px}
  .proof-shape{width:86px;height:86px}
}
.showreel-card{
  width:100%;
  margin-top:52px;
  border:0;
  border-radius:8px;
  background:var(--grad);
  color:#fff;
  padding:clamp(32px,5vw,64px);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:clamp(22px,4vw,56px);
  text-align:left;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(209,73,154,.22);
  transition:transform .36s cubic-bezier(.2,.7,.2,1),box-shadow .36s ease;
}
.showreel-card::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.36),transparent 28%),
    radial-gradient(circle at 78% 74%,rgba(0,0,0,.28),transparent 34%),
    linear-gradient(120deg,transparent,rgba(255,255,255,.22),transparent);
  opacity:.72;
  transform:translateX(-12%);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .36s ease;
}
.showreel-card:hover{transform:translateY(-6px);box-shadow:0 36px 86px rgba(209,73,154,.3)}
.showreel-card:hover::before{transform:translateX(8%);opacity:.9}
.showreel-copy,.showreel-play{position:relative;z-index:1}
.showreel-kicker{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:-.22px;
  margin-bottom:16px;
  color:rgba(255,255,255,.72);
  font-weight:500;
}
.showreel-title{
  display:block;
  font-family:var(--display);
  font-size:clamp(42px,6vw,92px);
  line-height:.9;
  letter-spacing:-2.6px;
  font-weight:500;
}
.showreel-sub{
  display:block;
  max-width:760px;
  margin-top:20px;
  font-size:clamp(16px,1.45vw,21px);
  line-height:1.3;
  letter-spacing:-.55px;
  color:rgba(255,255,255,.84);
  font-weight:500;
}
.showreel-play{
  width:clamp(82px,8vw,124px);
  height:clamp(82px,8vw,124px);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#0a0a0a;
  color:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  transition:transform .36s cubic-bezier(.2,.7,.2,1),background .28s ease,color .28s ease;
}
.showreel-card:hover .showreel-play{transform:scale(1.08) rotate(6deg);background:#fff;color:#0a0a0a}
.showreel-play svg{width:34%;height:34%;margin-left:5%}
#why-moonbox{padding-bottom:clamp(42px,6vw,84px)}
#why-moonbox + #process{padding-top:clamp(42px,6vw,84px)}
@media(max-width:760px){
  .showreel-card{grid-template-columns:1fr;padding:30px;gap:26px}
  .showreel-title{font-size:clamp(40px,14vw,64px)}
  .showreel-play{width:76px;height:76px}
}
.client-moment .quote-grid,.client-proof .quote-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.client-moment .quote-grid,.client-proof .quote-grid{grid-template-columns:1fr}}
.mobile-contact-bar{display:none}
@media(max-width:700px){
  body{padding-bottom:72px}
  .mobile-contact-bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:2147483643;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(10,10,10,.88);border:1px solid rgba(255,255,255,.14);border-radius:6px;overflow:hidden;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .24s ease,opacity .24s ease}
  .mobile-contact-bar a{min-height:52px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;letter-spacing:-.25px;background:rgba(255,255,255,.04)}
  .mobile-contact-bar a:first-child{background:var(--grad)}
  .mobile-contact-bar.is-hidden{transform:translateY(120%);opacity:0;pointer-events:none}
  .fixd-wtsp{bottom:148px!important}
  .moonbox-chat-launcher{bottom:84px!important}
  #hubspot-messages-iframe-container,#hubspot-messages-iframe-container.widget-align-right{bottom:84px!important}
}

/* Prevent descender clipping on tight gradient/display stat text without changing layout rhythm. */
.stat .big,
.tb-n,
.man-stats .ms-big,
.ms-big,
.wm-big,
.grad-text-big,
.hero h1 .grad,
.lead-copy h2 .grad,
.urg-accent,
.u-n em,
.wm-plus {
  padding-bottom:0.18em;
  margin-bottom:-0.18em;
}
.hero h1 .grad,
.grad-text-big,
.lead-copy h2 .grad,
.urg-accent,
.u-n em,
.wm-plus {
  display:inline-block;
}


/* Scroll/render stability: keep content visible under Safari compositor pressure without changing layout. */
#why-moonbox{background:var(--bg-paper);position:relative;z-index:0;transform:translateZ(0)}
#why-moonbox .section-head,#why-moonbox .proof-list,#why-moonbox .showreel-card{position:relative;z-index:1}
.js-ready.reveal-booted .reveal:not(.in),
.js-ready.reveal-booted .section-head:not(.in) .eyebrow,
.js-ready.reveal-booted .section-head:not(.in) h2,
.js-ready.reveal-booted .section-head:not(.in) > p,
.js-ready.reveal-booted .urg-head:not(.in) .urg-eye,
.js-ready.reveal-booted .urg-head:not(.in) .urg-h2,
.js-ready.reveal-booted .urg-head:not(.in) .urg-lead,
.js-ready.reveal-booted .urg-cta:not(.in) .urg-cta-copy,
.js-ready.reveal-booted .urg-cta:not(.in) .urg-cta-actions,
.js-ready.reveal-booted .faq-list:not(.in) .faq{filter:none!important}
.motion-pausable:not(.motion-live) .hx-mesh *,
.motion-pausable:not(.motion-live) .hx-astro-wrap,
.motion-pausable:not(.motion-live) .hx-cube,
.motion-pausable:not(.motion-live) .hx-ring,
.motion-pausable:not(.motion-live) .hx-dot,
.motion-pausable:not(.motion-live) .hx-bw-track,
.motion-pausable:not(.motion-live) .hero-scroll .hs-line,
.motion-pausable:not(.motion-live) .marquee-track,
.motion-pausable:not(.motion-live) .vp-object-img,
.motion-pausable:not(.motion-live) .vp-object,
.motion-pausable:not(.motion-live) .man-credo-logo,
.motion-pausable:not(.motion-live) .urg-bg *,
.motion-pausable:not(.motion-live) .pq-lines,
.motion-pausable:not(.motion-live) .pq-shoot,
.motion-pausable:not(.motion-live)::before,
.motion-pausable:not(.motion-live)::after{animation-play-state:paused!important}


/* Pause decorative animation during active scrolling/hidden tabs to avoid browser non-responsive states. */
html.is-scrolling .hx-mesh *,html.page-hidden .hx-mesh *,
html.is-scrolling .hx-astro-wrap,html.page-hidden .hx-astro-wrap,
html.is-scrolling .hx-cube,html.page-hidden .hx-cube,
html.is-scrolling .hx-ring,html.page-hidden .hx-ring,
html.is-scrolling .hx-dot,html.page-hidden .hx-dot,
html.is-scrolling .hx-bw-track,html.page-hidden .hx-bw-track,
html.is-scrolling .hero-scroll .hs-line,html.page-hidden .hero-scroll .hs-line,
html.is-scrolling .marquee-track,html.page-hidden .marquee-track,
html.is-scrolling .vp-object-img,html.page-hidden .vp-object-img,
html.is-scrolling .vp-object,html.page-hidden .vp-object,
html.is-scrolling .man-credo-logo,html.page-hidden .man-credo-logo,
html.is-scrolling .urg-bg *,html.page-hidden .urg-bg *,
html.is-scrolling .pq-lines,html.page-hidden .pq-lines,
html.is-scrolling .pq-shoot,html.page-hidden .pq-shoot,
html.is-scrolling .footer::before,html.page-hidden .footer::before,
html.is-scrolling .footer::after,html.page-hidden .footer::after{animation-play-state:paused!important}


/* Runtime stability: let decorative motion introduce the page, then freeze it without changing layout. */
html.motion-settled .hx-mesh *,
html.motion-settled .hx-stage,
html.motion-settled .hx-astro,
html.motion-settled .hx-astro-wrap,
html.motion-settled .hx-cube,
html.motion-settled .hx-cube-inner,
html.motion-settled .hx-orbit,
html.motion-settled .hx-orbit svg,
html.motion-settled .hx-ring,
html.motion-settled .hx-dot,
html.motion-settled .hx-bw-track,
html.motion-settled .hero-scroll .hs-line,
html.motion-settled .hero-visual .tile,
html.motion-settled .hero-visual .orb,
html.motion-settled .marquee-track,
html.motion-settled .vp-object-img,
html.motion-settled .vp-object,
html.motion-settled .man-credo-logo,
html.motion-settled .urg-bg *,
html.motion-settled .urg-pulse,
html.motion-settled .pq-lines,
html.motion-settled .pq-shoot,
html.motion-settled .footer::before,
html.motion-settled .footer::after,
html.is-scrolling .hx-stage,
html.is-scrolling .hx-astro,
html.is-scrolling .hx-cube-inner,
html.is-scrolling .hx-orbit,
html.is-scrolling .hx-orbit svg,
html.is-scrolling .hero-visual .tile,
html.is-scrolling .hero-visual .orb,
html.is-scrolling .urg-pulse{animation-play-state:paused!important;will-change:auto!important}


.element8-sa-lp .logo img{width:auto;max-width:82px;height:48px;object-fit:contain}
.element8-sa-lp .nav .logo img{transition:height .28s ease,max-width .28s ease}
.element8-sa-lp .nav:not(.scrolled) .logo img{height:72px;max-width:123px}
.element8-sa-lp .nav.scrolled .logo img{height:48px;max-width:82px}
.element8-sa-lp .hero-v2 .hx-h1{
  font-size:clamp(42px,6.1vw,98px)!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
  margin:0 0 18px!important;
}
@media(max-width:760px){
  .element8-sa-lp .hero-v2 .hx-h1{
    font-size:clamp(34px,10.5vw,58px)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
    margin-bottom:14px!important;
  }
}
.element8-sa-lp .fixd-wtsp{
  right:98px!important;
  bottom:24px!important;
  width:72px!important;
  height:72px!important;
  z-index:2147483646!important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.28));
}
.element8-sa-lp .moonbox-chat-launcher{
  right:16px!important;
  bottom:24px!important;
  width:72px!important;
  height:72px!important;
  background:#2b168f!important;
  color:#fff!important;
  box-shadow:0 18px 44px rgba(43,22,143,.38),0 0 36px rgba(253,29,29,.14)!important;
  z-index:2147483645!important;
}
.element8-sa-lp .moonbox-chat-launcher svg{
  width:34px!important;
  height:34px!important;
  stroke-width:2!important;
}
@media(max-width:700px){
  .element8-sa-lp .fixd-wtsp{
    right:76px!important;
    bottom:84px!important;
    width:54px!important;
    height:54px!important;
  }
  .element8-sa-lp .moonbox-chat-launcher{
    right:12px!important;
    bottom:84px!important;
    width:54px!important;
    height:54px!important;
  }
  .element8-sa-lp .moonbox-chat-launcher svg{
    width:28px!important;
    height:28px!important;
  }
}
.element8-sa-lp .footer .logo img{height:72px;max-width:110px}
.element8-sa-lp .footer-grid{
  grid-template-columns:minmax(260px,1.35fr) minmax(190px,.72fr) minmax(150px,.48fr) minmax(120px,.38fr) minmax(140px,.42fr);
  align-items:start;
  column-gap:clamp(28px,4vw,54px);
  row-gap:24px;
}
.element8-sa-lp .footer-grid > div:nth-child(2){margin-right:0!important}
.element8-sa-lp .footer-grid > div:not(.foot-about){
  min-width:0;
}
.element8-sa-lp .footer h4{
  margin:0 0 14px;
  font-family:var(--mono);
  font-size:11px;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  font-weight:500;
}
.element8-sa-lp .foot-address address{
  margin:0;
  max-width:240px;
  color:rgba(255,255,255,.66);
  font-style:normal;
  font-size:14px;
  line-height:1.48;
  letter-spacing:-.24px;
  font-weight:500;
}
.element8-sa-lp .foot-affiliation{
  margin-top:14px!important;
  color:rgba(255,255,255,.78)!important;
}
.element8-sa-lp .footer ul{
  gap:0;
  margin:0;
  padding:0;
}
.element8-sa-lp .footer ul li{
  margin:0;
  line-height:1.48;
}
.element8-sa-lp .footer ul a{
  display:inline;
  font-size:14px;
  line-height:1.48;
  letter-spacing:-.24px;
  font-weight:500;
  color:rgba(255,255,255,.66);
}
.element8-sa-lp .foot-bottom{
  align-items:center;
}
.element8-sa-lp .foot-bottom-left{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
}
.element8-sa-lp .foot-legal-link{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:rgba(255,255,255,.66);
  font:inherit;
  text-transform:uppercase;
  letter-spacing:inherit;
  cursor:pointer;
  transition:color .22s ease;
}
.element8-sa-lp .foot-legal-link:hover,
.element8-sa-lp .foot-legal-link:focus-visible{
  color:#fff;
  outline:none;
}
.element8-sa-lp .e8-legal-modal[hidden]{
  display:none!important;
}
.element8-sa-lp .e8-legal-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,48px);
}
.element8-sa-lp .e8-legal-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(5,1,6,.76);
  backdrop-filter:blur(12px);
  cursor:pointer;
}
.element8-sa-lp .e8-legal-panel{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:min(78vh,760px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.16);
  border-radius:26px;
  padding:clamp(26px,4vw,46px);
  background:
    radial-gradient(circle at 85% 12%,rgba(252,176,69,.14),transparent 34%),
    radial-gradient(circle at 12% 88%,rgba(131,58,180,.18),transparent 42%),
    linear-gradient(135deg,rgba(22,7,18,.96),rgba(8,3,8,.98));
  color:#fff;
  box-shadow:0 34px 120px rgba(0,0,0,.54);
}
.element8-sa-lp .e8-legal-panel .eyebrow{
  color:rgba(255,255,255,.62);
}
.element8-sa-lp .e8-legal-panel h2{
  margin:16px 0 20px;
  font-size:clamp(44px,6vw,82px);
  line-height:.9;
  letter-spacing:-.055em;
}
.element8-sa-lp .e8-legal-panel p{
  margin:0 0 14px;
  color:rgba(255,255,255,.72);
  font-size:15px;
  line-height:1.58;
  max-width:62ch;
}
.element8-sa-lp .e8-legal-panel a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.element8-sa-lp .e8-legal-close{
  position:absolute;
  top:16px;
  right:16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:9px 12px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
}
.element8-sa-lp .e8-legal-close:hover,
.element8-sa-lp .e8-legal-close:focus-visible{
  background:#fff;
  color:#090308;
  outline:none;
}
body.e8-legal-open{
  overflow:hidden;
}
.element8-sa-lp .foot-socials{gap:10px}
.element8-sa-lp .foot-socials a{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.045);
  color:#fff!important;
  mix-blend-mode:normal;
}
.element8-sa-lp .foot-socials svg{
  width:17px;
  height:17px;
  display:block;
  color:currentColor;
  fill:currentColor!important;
  opacity:1!important;
  mix-blend-mode:normal;
}
.element8-sa-lp .foot-socials a:hover,
.element8-sa-lp .foot-socials a:focus-visible{
  background:#fff!important;
  border-color:#fff!important;
  color:#090308!important;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.element8-sa-lp .foot-socials a:hover svg,
.element8-sa-lp .foot-socials a:focus-visible svg{
  color:#090308!important;
  fill:#090308!important;
  opacity:1!important;
}
@media(max-width:1080px){
  .element8-sa-lp .footer-grid{grid-template-columns:1.35fr 1fr 1fr}
}
@media(max-width:680px){
  .element8-sa-lp .footer-grid{grid-template-columns:1fr 1fr}
  .element8-sa-lp .foot-about{grid-column:1/-1}
}
@media(max-width:500px){
  .element8-sa-lp .footer-grid{grid-template-columns:1fr}
}
.element8-sa-lp .proof-list{align-items:stretch}
.element8-sa-lp .man-stats.man-stats-four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){
  .element8-sa-lp .man-stats.man-stats-four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .element8-sa-lp .man-stats.man-stats-four{grid-template-columns:1fr}
}
.element8-sa-lp .proof-list > span{
  display:grid!important;
  grid-template-columns:clamp(86px,8vw,124px) 1fr!important;
  align-items:center;
  gap:18px;
  min-height:136px;
}
.element8-sa-lp .proof-copy{display:block}
.element8-sa-lp .proof-copy strong{display:block}
.element8-sa-lp .proof-shape{
  width:clamp(86px,8vw,124px);
  height:clamp(86px,8vw,124px);
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 18px 24px rgba(131,58,180,.16)) drop-shadow(0 8px 16px rgba(253,29,29,.10));
  transform:translateZ(0);
  transition:transform .42s cubic-bezier(.2,.7,.2,1),filter .34s ease;
}
.element8-sa-lp #why-moonbox .proof-list > span:hover .proof-shape{
  transform:translate3d(0,-7px,0) rotate(-4deg) scale(1.08);
  filter:drop-shadow(0 24px 30px rgba(131,58,180,.20)) drop-shadow(0 12px 22px rgba(253,29,29,.16));
}
.element8-sa-lp .e8-detail-section{
  background:
    radial-gradient(circle at 82% 18%,rgba(252,176,69,.18),transparent 38%),
    radial-gradient(circle at 14% 76%,rgba(131,58,180,.24),transparent 42%),
    radial-gradient(circle at 52% 42%,rgba(253,29,29,.12),transparent 48%),
    linear-gradient(180deg,#080207 0%,#14050e 58%,#090308 100%)!important;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.element8-sa-lp .e8-detail-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.72;
  background:
    linear-gradient(90deg,rgba(255,255,255,.038) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.034) 1px,transparent 1px);
  background-size:86px 86px;
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%);
}
.element8-sa-lp .e8-detail-section::after{
  content:"";
  position:absolute;
  inset:12% -8% auto auto;
  width:52vw;
  height:52vw;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(252,176,69,.16),rgba(253,29,29,.08) 34%,transparent 62%);
  filter:blur(8px);
}
.element8-sa-lp .e8-deliverables-wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(32px,5vw,84px);
  align-items:start;
}
.element8-sa-lp .e8-detail-section .section-head{
  max-width:720px;
  margin:0;
}
.element8-sa-lp .e8-detail-section .section-eyebrow{
  color:rgba(255,255,255,.54);
}
.element8-sa-lp .e8-detail-section .section-head h2{
  color:#fff;
}
.element8-sa-lp .e8-detail-section .section-head p{
  color:rgba(255,255,255,.68);
}
.element8-sa-lp .e8-deliverables-proof{
  display:grid;
  gap:10px;
  max-width:560px;
  margin-top:28px;
}
.element8-sa-lp .e8-deliverables-proof span{
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  padding:10px 14px 10px 10px;
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}
.element8-sa-lp .e8-deliverables-proof strong{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  box-shadow:0 12px 28px rgba(253,29,29,.26);
}
.element8-sa-lp .e8-deliverables-object-card{
  position:relative;
  display:grid;
  place-items:center;
  min-height:clamp(240px,24vw,360px);
  max-width:520px;
  margin-top:34px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:36px;
  background:
    radial-gradient(circle at 50% 55%,rgba(252,176,69,.14),transparent 36%),
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  box-shadow:0 34px 90px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.10);
  overflow:hidden;
  backdrop-filter:blur(18px);
}
.element8-sa-lp .e8-deliverables-object-card::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:58px 58px;
  opacity:.82;
}
.element8-sa-lp .e8-deliverables-object-card img{
  position:relative;
  z-index:2;
  width:clamp(190px,22vw,340px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 34px 48px rgba(0,0,0,.46)) drop-shadow(0 0 26px rgba(252,176,69,.18));
  animation:e8SectionObjectFloat 8s ease-in-out infinite alternate;
}
.element8-sa-lp .e8-deliverables-pulse{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  background:var(--grad);
  filter:blur(.2px);
  opacity:.88;
}
.element8-sa-lp .e8-deliverables-pulse.p1{width:12px;height:12px;right:18%;top:24%;animation:e8DeliverablePulse 4.8s ease-in-out infinite}
.element8-sa-lp .e8-deliverables-pulse.p2{width:8px;height:8px;left:22%;bottom:22%;animation:e8DeliverablePulse 5.6s ease-in-out infinite reverse}
@keyframes e8DeliverablePulse{
  0%,100%{transform:scale(1);opacity:.45}
  50%{transform:scale(1.8);opacity:.95}
}
.element8-sa-lp .e8-decision-section,
.element8-sa-lp .e8-compliance-section,
.element8-sa-lp .e8-leadmagnet-section{
  background:
    radial-gradient(circle at 82% 18%,rgba(252,176,69,.16),transparent 40%),
    radial-gradient(circle at 16% 82%,rgba(131,58,180,.20),transparent 42%),
    radial-gradient(circle at 52% 42%,rgba(253,29,29,.11),transparent 48%),
    linear-gradient(180deg,#080207 0%,#12050c 58%,#090308 100%)!important;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.element8-sa-lp .e8-decision-section .section-eyebrow,
.element8-sa-lp .e8-compliance-section .section-eyebrow,
.element8-sa-lp .e8-leadmagnet-section .section-eyebrow,
.element8-sa-lp .e8-proof-strip .section-eyebrow,
.element8-sa-lp .e8-scope-section .section-eyebrow{
  color:rgba(255,255,255,.62)!important;
}
.element8-sa-lp .e8-detail-grid,
.element8-sa-lp .e8-decision-grid,
.element8-sa-lp .e8-compliance-grid{
  display:grid;
  gap:18px;
}
.element8-sa-lp .e8-detail-grid{
  grid-template-columns:1fr;
  gap:16px;
}
.element8-sa-lp .e8-decision-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.element8-sa-lp .e8-compliance-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid{
  padding-block:clamp(88px,9vw,148px) clamp(82px,8vw,132px);
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery::before,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.54;
  background:
    radial-gradient(circle at 82% 18%,rgba(252,176,69,.18),transparent 42%),
    radial-gradient(circle at 18% 76%,rgba(131,58,180,.18),transparent 46%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 90px);
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .section-head,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .section-head{
  max-width:min(920px,78vw);
  margin-bottom:clamp(42px,5vw,72px);
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .section-eyebrow,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .section-eyebrow{
  color:rgba(255,255,255,.62)!important;
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-chip,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-chip{
  min-height:clamp(170px,15vw,212px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:clamp(26px,2.4vw,34px);
}
.element8-sa-lp .e8-proof-strip,
.element8-sa-lp .e8-scope-section{
  background:
    radial-gradient(circle at 82% 18%,rgba(252,176,69,.16),transparent 40%),
    radial-gradient(circle at 16% 82%,rgba(131,58,180,.20),transparent 42%),
    radial-gradient(circle at 52% 42%,rgba(253,29,29,.11),transparent 48%),
    linear-gradient(180deg,#080207 0%,#12050c 58%,#090308 100%)!important;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.element8-sa-lp .e8-proof-strip::before,
.element8-sa-lp .e8-scope-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.72;
  background:
    radial-gradient(circle at 84% 16%,rgba(252,176,69,.18),transparent 42%),
    radial-gradient(circle at 18% 72%,rgba(131,58,180,.18),transparent 46%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.032) 0 1px,transparent 1px 86px);
}
.element8-sa-lp .e8-proof-strip .container,
.element8-sa-lp .e8-scope-section .container{position:relative;z-index:1}
.element8-sa-lp .e8-proof-stat-grid,
.element8-sa-lp .e8-stamp-grid,
.element8-sa-lp .e8-scope-grid{
  display:grid;
  gap:18px;
}
.element8-sa-lp .e8-proof-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:22px}
.element8-sa-lp .e8-stamp-grid,
.element8-sa-lp .e8-scope-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.element8-sa-lp .e8-scope-grid-5{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.element8-sa-lp .e8-proof-stat,
.element8-sa-lp .e8-stamp,
.element8-sa-lp .e8-scope-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  padding:clamp(22px,2.2vw,32px);
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
}
.element8-sa-lp .e8-proof-stat span{
  display:block;
  font-size:clamp(54px,7vw,108px);
  line-height:.86;
  letter-spacing:-.08em;
  font-weight:700;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.element8-sa-lp .e8-rating-star{
  display:inline-block!important;
  font-size:.6em!important;
  line-height:1;
  margin-left:.05em;
  vertical-align:.10em;
}
.element8-sa-lp .e8-proof-stat p,
.element8-sa-lp .e8-stamp p,
.element8-sa-lp .e8-scope-card p,
.element8-sa-lp .e8-scope-card li{
  color:rgba(255,255,255,.68);
  line-height:1.5;
}
.element8-sa-lp .e8-proof-stat p,
.element8-sa-lp .e8-scope-card p,
.element8-sa-lp .e8-stamp p{margin:12px 0 0}
.element8-sa-lp .e8-store-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.element8-sa-lp .e8-store-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:10px 14px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.78);
  font-weight:600;
}
.element8-sa-lp .e8-store-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  color:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.24);
  flex:0 0 auto;
}
.element8-sa-lp .e8-store-icon img{
  width:64%;
  height:64%;
  display:block;
  object-fit:contain;
}
.element8-sa-lp .e8-store-icon-google-play img{
  width:70%;
  height:70%;
}
.element8-sa-lp .e8-store-icon-aso img,
.element8-sa-lp .e8-store-icon-firebase img{
  width:66%;
  height:66%;
}
.element8-sa-lp .e8-stamp-name,
.element8-sa-lp .e8-scope-card span{
  display:inline-flex;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:8px 12px;
  color:#fff;
  background:rgba(255,255,255,.06);
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.element8-sa-lp .e8-stamp h3,
.element8-sa-lp .e8-scope-card h3{
  margin:0;
  font-size:clamp(22px,2vw,30px);
  line-height:1;
  letter-spacing:-.045em;
}
.element8-sa-lp .e8-scope-card ul{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.element8-sa-lp .e8-scope-card li{
  position:relative;
  padding-left:18px;
}
.element8-sa-lp .e8-scope-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#FCB045;
}
.element8-sa-lp .e8-detail-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:34px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045)),
    radial-gradient(circle at 92% 12%,rgba(252,176,69,.16),transparent 34%);
  padding:clamp(24px,2.4vw,36px);
  box-shadow:0 28px 86px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter:blur(16px);
  transition:transform .48s cubic-bezier(.2,.7,.2,1),border-color .32s ease,box-shadow .32s ease;
}
.element8-sa-lp .e8-detail-card::before{
  content:attr(data-step);
  position:absolute;
  right:clamp(16px,2vw,30px);
  bottom:-.15em;
  font-size:clamp(86px,10vw,152px);
  line-height:1;
  letter-spacing:-.08em;
  font-weight:700;
  color:rgba(255,255,255,.045);
  pointer-events:none;
}
.element8-sa-lp .e8-detail-card::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--grad);
  opacity:.92;
}
.element8-sa-lp .e8-detail-card:nth-child(2){
  transform:translateX(clamp(0px,3vw,44px));
}
.element8-sa-lp .e8-detail-card:nth-child(3){
  transform:translateX(clamp(0px,6vw,88px));
}
.element8-sa-lp .e8-detail-card:hover{
  transform:translate3d(0,-6px,0);
  border-color:rgba(252,176,69,.34);
  box-shadow:0 36px 96px rgba(0,0,0,.40),0 0 38px rgba(253,29,29,.11);
}
.element8-sa-lp .e8-detail-card:nth-child(2):hover{
  transform:translate3d(clamp(0px,3vw,44px),-6px,0);
}
.element8-sa-lp .e8-detail-card:nth-child(3):hover{
  transform:translate3d(clamp(0px,6vw,88px),-6px,0);
}
.element8-sa-lp .e8-detail-card-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.element8-sa-lp .e8-detail-index{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  box-shadow:0 14px 30px rgba(253,29,29,.26);
}
.element8-sa-lp .e8-decision-card,
.element8-sa-lp .e8-compliance-chip,
.element8-sa-lp .e8-leadmagnet-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:28px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
  padding:clamp(22px,2.2vw,32px);
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
}
.element8-sa-lp .e8-decision-card{
  min-height:100%;
}
.element8-sa-lp .e8-platform-logo{
  display:grid;
  place-items:center;
  width:clamp(46px,4.8vw,64px);
  height:clamp(46px,4.8vw,64px);
  margin-bottom:clamp(18px,2vw,26px);
  border-radius:50%;
  background:#fff;
  box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.28);
}
.element8-sa-lp .e8-platform-logo img{
  width:64%;
  height:64%;
  display:block;
  object-fit:contain;
}
.element8-sa-lp .e8-decision-icon{
  color:#1788c9;
}
.element8-sa-lp .e8-decision-card:nth-child(2) .e8-decision-icon{color:#28a85d}
.element8-sa-lp .e8-decision-card:nth-child(3) .e8-decision-icon{color:#31b5ff}
.element8-sa-lp .e8-decision-card:nth-child(4) .e8-decision-icon{color:#f59a23}
.element8-sa-lp .e8-decision-icon svg{
  width:64%;
  height:64%;
  display:block;
}
.element8-sa-lp .e8-decision-icon-flutter svg{
  width:54.4%;
  height:54.4%;
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-icon,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-icon{
  display:grid;
  place-items:center;
  width:clamp(46px,4.8vw,64px);
  height:clamp(46px,4.8vw,64px);
  margin-bottom:clamp(18px,2vw,26px);
  border-radius:50%;
  background:#fff;
  color:#1788c9;
  box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.28);
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-chip:nth-child(2) .e8-compliance-icon,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-chip:nth-child(2) .e8-compliance-icon{color:#28a85d}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-chip:nth-child(3) .e8-compliance-icon,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-chip:nth-child(3) .e8-compliance-icon{color:#f59a23}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-chip:nth-child(4) .e8-compliance-icon,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-chip:nth-child(4) .e8-compliance-icon{color:#8d3fba}
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-chip:nth-child(5) .e8-compliance-icon{color:#e33452}
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-chip:nth-child(6) .e8-compliance-icon{color:#1f9d91}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-icon svg,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-icon svg{
  width:64%;
  height:64%;
  display:block;
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-icon text,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-icon text{
  font-family:var(--mono);
  font-size:5.2px;
  font-weight:700;
  letter-spacing:.05em;
  fill:currentColor;
  stroke:none;
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-icon-arabic svg{
  width:68%;
  height:68%;
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-icon-arabic text{
  font-family:Arial,Tahoma,sans-serif;
  font-size:21px;
  font-weight:700;
  letter-spacing:0;
}
.element8-sa-lp .e8-detail-kicker,
.element8-sa-lp .e8-compliance-chip span{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
  margin-bottom:0;
}
.element8-sa-lp .e8-compliance-chip span{color:rgba(255,255,255,.72)}
.element8-sa-lp .e8-detail-card ul{
  position:relative;
  z-index:1;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
}
.element8-sa-lp .e8-detail-card li{
  position:relative;
  padding-left:26px;
  color:rgba(255,255,255,.72);
  line-height:1.46;
}
.element8-sa-lp .e8-detail-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.5em;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 14px rgba(252,176,69,.32);
}
.element8-sa-lp .e8-decision-proof{
  position:relative;
  z-index:1;
  margin-top:clamp(46px,5.5vw,84px);
  display:grid;
  gap:clamp(30px,3.6vw,48px);
}
.element8-sa-lp .e8-decision-proof p{
  max-width:1180px;
  margin:0;
  color:rgba(255,255,255,.72);
  font-family:var(--display);
  font-size:clamp(14px,1.675vw,27px);
  line-height:1.22;
  letter-spacing:-.035em;
}
.element8-sa-lp .e8-decision-proof-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  max-width:1180px;
}
.element8-sa-lp .e8-decision-proof-points span{
  border-top:1px solid rgba(255,255,255,.24);
  padding-top:clamp(20px,2vw,30px);
  color:rgba(255,255,255,.76);
  font-family:var(--mono);
  font-size:clamp(13px,1vw,16px);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.element8-sa-lp .e8-decision-proof .btn{
  justify-self:start;
}
.element8-sa-lp .e8-decision-card h3{
  margin:0 0 14px;
  font-size:clamp(22px,2vw,30px);
  letter-spacing:-.04em;
  line-height:1;
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-chip h3,
.element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-chip h3{
  margin:0 0 14px;
  font-size:clamp(22px,2vw,30px);
  letter-spacing:-.04em;
  line-height:1;
  color:#fff;
}
.element8-sa-lp .e8-decision-card p,
.element8-sa-lp .e8-compliance-chip p,
.element8-sa-lp .e8-leadmagnet-card p{
  margin:0;
  color:rgba(255,255,255,.68);
  line-height:1.5;
}
.element8-sa-lp .e8-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.element8-sa-lp .e8-chip-row span{
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.06);
}
.element8-sa-lp .e8-leadmagnet-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(28px,4vw,54px);
  overflow:hidden;
  position:relative;
}
.element8-sa-lp .e8-leadmagnet-card h2{
  max-width:760px;
  margin-bottom:16px;
}
.element8-sa-lp .e8-decision-section .container,
.element8-sa-lp .e8-compliance-section .container,
.element8-sa-lp .e8-leadmagnet-section .container{
  position:relative;
  z-index:1;
}
.element8-sa-lp .e8-section-object{
  position:absolute;
  pointer-events:none;
  z-index:0;
  object-fit:contain;
  opacity:.52;
  filter:drop-shadow(0 38px 66px rgba(0,0,0,.46)) drop-shadow(0 0 34px rgba(252,176,69,.14));
  animation:e8SectionObjectFloat 10s ease-in-out infinite alternate;
}
.element8-sa-lp .e8-object-decision{
  top:clamp(22px,4vw,70px);
  right:max(22px,calc((100vw - 1180px)/2));
  width:clamp(170px,22vw,360px);
  rotate:-6deg;
}
.element8-sa-lp .e8-object-compliance{
  left:max(18px,calc((100vw - 1180px)/2));
  bottom:clamp(12px,3vw,54px);
  width:clamp(140px,18vw,300px);
  opacity:.42;
  rotate:8deg;
}
.element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-object-compliance{
  left:auto;
  bottom:auto;
  top:clamp(8px,3vw,54px);
  right:max(-10px,calc((100vw - 1180px)/2 - 26px));
  width:clamp(210px,24vw,390px);
  opacity:.48;
  rotate:-7deg;
}
.element8-sa-lp .e8-leadmagnet-card > div,
.element8-sa-lp .e8-leadmagnet-card .btn{
  position:relative;
  z-index:2;
}
.element8-sa-lp .e8-leadmagnet-object{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:clamp(116px,13vw,230px);
  max-width:26vw;
  object-fit:contain;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.40)) drop-shadow(0 0 26px rgba(252,176,69,.18));
  animation:e8SectionObjectFloat 9s ease-in-out infinite alternate-reverse;
}
@keyframes e8SectionObjectFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-12px,0) scale(1.02)}
}
@media(max-width:980px){
  .element8-sa-lp .e8-detail-grid,
  .element8-sa-lp .e8-decision-grid,
  .element8-sa-lp .e8-compliance-grid,
  .element8-sa-lp .e8-proof-stat-grid,
  .element8-sa-lp .e8-stamp-grid,
  .element8-sa-lp .e8-scope-grid-3,
  .element8-sa-lp .e8-scope-grid-5{grid-template-columns:1fr 1fr}
  .element8-sa-lp .e8-compliance-section.e8-compliance-delivery .section-head,
  .element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .section-head{max-width:760px}
  .element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-grid,
  .element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-grid{grid-template-columns:1fr 1fr}
  .element8-sa-lp .e8-leadmagnet-card{align-items:flex-start;flex-direction:column}
  .element8-sa-lp .e8-section-object{opacity:.20;width:44vw}
  .element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-object-compliance,
  .element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-object-compliance{opacity:.20;width:44vw}
  .element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-grid{grid-template-columns:1fr 1fr!important}
  .element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-object-decision{opacity:.18!important;width:58vw!important}
  .element8-sa-lp .e8-leadmagnet-object{max-width:none;width:min(42vw,190px);order:2;margin:-8px 0 -2px}
  .element8-sa-lp .e8-deliverables-wrap{grid-template-columns:1fr}
  .element8-sa-lp .e8-detail-grid{grid-template-columns:1fr}
  .element8-sa-lp .e8-detail-card,
  .element8-sa-lp .e8-detail-card:nth-child(2),
  .element8-sa-lp .e8-detail-card:nth-child(3),
  .element8-sa-lp .e8-detail-card:hover,
  .element8-sa-lp .e8-detail-card:nth-child(2):hover,
  .element8-sa-lp .e8-detail-card:nth-child(3):hover{transform:none}
  .element8-sa-lp .e8-deliverables-object-card{max-width:none}
}
@media(max-width:640px){
  .element8-sa-lp .e8-detail-grid,
  .element8-sa-lp .e8-decision-grid,
  .element8-sa-lp .e8-compliance-grid,
  .element8-sa-lp .e8-proof-stat-grid,
  .element8-sa-lp .e8-stamp-grid,
  .element8-sa-lp .e8-scope-grid-3,
  .element8-sa-lp .e8-scope-grid-5{grid-template-columns:1fr}
  .element8-sa-lp .e8-compliance-section.e8-compliance-delivery .section-head,
  .element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .section-head{max-width:none}
  .element8-sa-lp .e8-compliance-section.e8-compliance-delivery .e8-compliance-grid,
  .element8-sa-lp .e8-compliance-section.e8-compliance-app-grid .e8-compliance-grid{grid-template-columns:1fr}
  .element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-grid{grid-template-columns:1fr!important}
  .element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-object-decision{opacity:.12!important;width:74vw!important;right:-10vw!important}
  .element8-sa-lp .proof-list > span{grid-template-columns:78px 1fr!important;min-height:112px;gap:14px}
  .element8-sa-lp .proof-shape{width:78px;height:78px}
  .element8-sa-lp .e8-section-object{display:none}
  .element8-sa-lp .e8-detail-section::after{display:none}
  .element8-sa-lp .e8-deliverables-proof span{width:100%}
  .element8-sa-lp .e8-deliverables-object-card{min-height:230px;border-radius:28px}
  .element8-sa-lp .e8-detail-card{border-radius:28px}
  .element8-sa-lp .e8-detail-card-top{align-items:flex-start}
}
.element8-sa-lp .hero-v2{
  background:
    radial-gradient(circle at 78% 24%,rgba(255,112,65,.46) 0 14%,rgba(255,112,65,.22) 25%,transparent 42%),
    radial-gradient(circle at 56% 72%,rgba(0,178,190,.34) 0 12%,rgba(0,178,190,.12) 28%,transparent 48%),
    radial-gradient(circle at 14% 18%,rgba(18,117,122,.44) 0 16%,transparent 42%),
    linear-gradient(128deg,#061010 0%,#08161a 28%,#0f2e34 48%,#211b16 72%,#4b1f12 100%);
}
.element8-sa-lp.gradient-element8-core .hero-v2{
  background:
    radial-gradient(circle at 76% 20%,rgba(255,113,69,.50) 0 14%,rgba(255,113,69,.22) 24%,transparent 44%),
    radial-gradient(circle at 55% 68%,rgba(0,166,180,.38) 0 13%,rgba(0,166,180,.13) 30%,transparent 50%),
    radial-gradient(circle at 14% 18%,rgba(13,122,130,.52) 0 17%,transparent 44%),
    linear-gradient(128deg,#061011 0%,#081a1d 28%,#103339 50%,#231b16 74%,#562311 100%);
}
.element8-sa-lp.gradient-saudi-premium .hero-v2{
  background:
    radial-gradient(circle at 76% 22%,rgba(218,166,72,.48) 0 13%,rgba(218,166,72,.20) 26%,transparent 46%),
    radial-gradient(circle at 50% 72%,rgba(27,185,158,.34) 0 12%,rgba(27,185,158,.12) 30%,transparent 52%),
    radial-gradient(circle at 13% 18%,rgba(0,131,105,.56) 0 18%,transparent 44%),
    linear-gradient(130deg,#03100d 0%,#06231d 30%,#0d3e33 53%,#332817 76%,#725123 100%);
}
.element8-sa-lp.gradient-product-energy .hero-v2{
  background:
    radial-gradient(circle at 78% 24%,rgba(31,202,255,.44) 0 13%,rgba(31,202,255,.16) 28%,transparent 48%),
    radial-gradient(circle at 58% 73%,rgba(129,255,68,.24) 0 11%,rgba(129,255,68,.10) 29%,transparent 50%),
    radial-gradient(circle at 15% 18%,rgba(0,119,255,.44) 0 18%,transparent 45%),
    radial-gradient(circle at 88% 82%,rgba(255,105,59,.24) 0 11%,transparent 36%),
    linear-gradient(130deg,#020712 0%,#06112a 29%,#062c4d 54%,#082823 78%,#172406 100%);
}
.element8-sa-lp.gradient-warm-conversion .hero-v2{
  background:
    radial-gradient(circle at 77% 23%,rgba(238,148,58,.48) 0 14%,rgba(238,148,58,.19) 27%,transparent 47%),
    radial-gradient(circle at 53% 70%,rgba(0,153,142,.28) 0 12%,rgba(0,153,142,.10) 30%,transparent 51%),
    radial-gradient(circle at 13% 20%,rgba(107,66,37,.58) 0 18%,transparent 45%),
    linear-gradient(130deg,#080808 0%,#171210 31%,#2e2018 54%,#4b2d16 76%,#8f521c 100%);
}
.element8-sa-lp.gradient-linear-heat .hero-v2{
  background:
    radial-gradient(circle at 78% 24%,rgba(252,176,69,.42) 0 14%,rgba(252,176,69,.16) 26%,transparent 46%),
    radial-gradient(circle at 52% 68%,rgba(253,29,29,.32) 0 12%,rgba(253,29,29,.12) 30%,transparent 52%),
    radial-gradient(circle at 14% 18%,rgba(131,58,180,.52) 0 18%,transparent 46%),
    linear-gradient(90deg,rgba(131,58,180,1) 0%,rgba(253,29,29,1) 50%,rgba(252,176,69,1) 100%);
}
.element8-sa-lp.gradient-linear-heat .hx-mesh{
  z-index:0;
  opacity:.56;
  filter:blur(74px) saturate(1.36) contrast(1.08);
  mix-blend-mode:overlay;
}
.element8-sa-lp.gradient-linear-heat .hx-blob{
  mix-blend-mode:screen;
  opacity:.72;
}
.element8-sa-lp.gradient-linear-heat .hx-grain{
  z-index:0;
  opacity:.48;
  mix-blend-mode:soft-light;
}
.element8-sa-lp.gradient-linear-heat .hx-stars{
  z-index:1;
  opacity:.95;
  mix-blend-mode:screen;
}
.element8-sa-lp.gradient-linear-heat .hx-star{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 55%,rgba(252,176,69,.98));
  box-shadow:0 0 10px rgba(255,255,255,.45),0 0 22px rgba(252,176,69,.28);
}
.element8-sa-lp.gradient-linear-heat .hx-ring{
  z-index:2;
  opacity:.96;
  border-color:rgba(255,255,255,.46);
  box-shadow:0 0 30px rgba(255,255,255,.12),inset 0 0 30px rgba(131,58,180,.12);
  mix-blend-mode:screen;
}
.element8-sa-lp.gradient-linear-heat .hx-ring.r2,
.element8-sa-lp.gradient-linear-heat .hx-ring.r4{
  border-color:rgba(255,236,198,.42);
}
.element8-sa-lp.gradient-linear-heat .hx-ring.r3,
.element8-sa-lp.gradient-linear-heat .hx-ring.r5{
  border-color:rgba(252,176,69,.48);
}
.element8-sa-lp.gradient-linear-heat .hx-stage::before,
.element8-sa-lp.gradient-linear-heat .hx-stage::after{
  z-index:2;
  border-color:rgba(255,255,255,.36);
  box-shadow:0 0 34px rgba(255,255,255,.12);
}
.element8-sa-lp.gradient-linear-heat .hx-stage::after{
  border-color:rgba(252,176,69,.42);
}
.element8-sa-lp.gradient-linear-heat .hx-orbit{
  z-index:2;
  opacity:.95;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.32)) drop-shadow(0 0 18px rgba(252,176,69,.18));
  mix-blend-mode:screen;
}
.element8-sa-lp.gradient-linear-heat .hx-orbit ellipse{
  stroke:rgba(255,255,255,.58)!important;
  stroke-width:1.35!important;
}
.element8-sa-lp.gradient-linear-heat .hx-orbit ellipse:nth-child(2){
  stroke:rgba(252,176,69,.54)!important;
}
.element8-sa-lp .hx-mesh{
  filter:blur(92px) saturate(1.28);
  opacity:.94;
}
.element8-sa-lp .hx-blob.hb1{background:#00A6B4}
.element8-sa-lp .hx-blob.hb2{background:#FF7145}
.element8-sa-lp .hx-blob.hb3{background:#0A6D73}
.element8-sa-lp .hx-blob.hb4{background:#D8903A}
.element8-sa-lp.gradient-saudi-premium .hx-blob.hb1{background:#008F72}
.element8-sa-lp.gradient-saudi-premium .hx-blob.hb2{background:#D9A441}
.element8-sa-lp.gradient-saudi-premium .hx-blob.hb3{background:#0B4D3D}
.element8-sa-lp.gradient-saudi-premium .hx-blob.hb4{background:#27C7A4}
.element8-sa-lp.gradient-product-energy .hx-blob.hb1{background:#1FCBFF}
.element8-sa-lp.gradient-product-energy .hx-blob.hb2{background:#7DFF4D}
.element8-sa-lp.gradient-product-energy .hx-blob.hb3{background:#006BFF}
.element8-sa-lp.gradient-product-energy .hx-blob.hb4{background:#FF683B}
.element8-sa-lp.gradient-warm-conversion .hx-blob.hb1{background:#0B9C91}
.element8-sa-lp.gradient-warm-conversion .hx-blob.hb2{background:#EE943A}
.element8-sa-lp.gradient-warm-conversion .hx-blob.hb3{background:#6F4124}
.element8-sa-lp.gradient-warm-conversion .hx-blob.hb4{background:#C7772C}
.element8-sa-lp.gradient-linear-heat .hx-blob.hb1{background:#833AB4}
.element8-sa-lp.gradient-linear-heat .hx-blob.hb2{background:#FD1D1D}
.element8-sa-lp.gradient-linear-heat .hx-blob.hb3{background:#FCB045}
.element8-sa-lp.gradient-linear-heat .hx-blob.hb4{background:#FF7A45}
.element8-sa-lp .hx-bigword .hx-bw-track{
  -webkit-text-stroke-color:rgba(255,235,205,.16);
}
.element8-sa-lp.gradient-product-energy .hx-bigword .hx-bw-track{
  -webkit-text-stroke-color:rgba(154,238,255,.14);
}
.element8-sa-lp.gradient-saudi-premium .hx-bigword .hx-bw-track{
  -webkit-text-stroke-color:rgba(232,198,112,.16);
}
.element8-sa-lp.gradient-warm-conversion .hx-bigword .hx-bw-track{
  -webkit-text-stroke-color:rgba(255,196,128,.14);
}
.element8-sa-lp.gradient-linear-heat .hx-bigword .hx-bw-track{
  -webkit-text-stroke-color:rgba(255,216,150,.18);
}
.element8-sa-lp.gradient-linear-heat{
  --heat-purple:#833AB4;
  --heat-red:#FD1D1D;
  --heat-gold:#FCB045;
  --heat-ink:#090308;
  --heat-panel:#150710;
  --heat-paper:#fff1e7;
  --heat-paper-2:#ffe5d7;
  --accent:#FD1D1D;
  --cyan:#FCB045;
  --magenta:#833AB4;
  --orange:#FCB045;
  --bg-paper:#fff1e7;
  --bg-soft:#ffe5d7;
  --grad:linear-gradient(90deg,#833AB4 0%,#FD1D1D 50%,#FCB045 100%);
  --grad-2:linear-gradient(90deg,#FCB045 0%,#FD1D1D 48%,#833AB4 100%);
  --grad-hover:linear-gradient(90deg,#FCB045 0%,#FD1D1D 48%,#833AB4 100%);
  --accent-glow:rgba(253,29,29,.36);
  background:#090308;
}
.element8-sa-lp.gradient-linear-heat .btn-primary,
.element8-sa-lp.gradient-linear-heat .nav-cta,
.element8-sa-lp.gradient-linear-heat .mobile-menu .mm-cta,
.element8-sa-lp.gradient-linear-heat .form-submit:not(:disabled),
.element8-sa-lp.gradient-linear-heat .mobile-contact-bar a:first-child{
  background:var(--grad)!important;
  color:#fff!important;
  box-shadow:0 18px 44px rgba(253,29,29,.22),0 12px 32px rgba(131,58,180,.18)!important;
}
.element8-sa-lp.gradient-linear-heat .btn-primary:hover,
.element8-sa-lp.gradient-linear-heat .nav-cta:hover,
.element8-sa-lp.gradient-linear-heat .form-submit:not(:disabled):hover{
  background:var(--grad-hover)!important;
  box-shadow:0 22px 54px rgba(252,176,69,.26),0 14px 38px rgba(253,29,29,.24)!important;
}
.element8-sa-lp.gradient-linear-heat .hero-v2 .btn-primary,
.element8-sa-lp.gradient-linear-heat .nav:not(.scrolled) .nav-cta{
  background:#050505!important;
  box-shadow:0 14px 34px rgba(0,0,0,.28)!important;
}
.element8-sa-lp.gradient-linear-heat .section.light,
.element8-sa-lp.gradient-linear-heat #why-moonbox,
.element8-sa-lp.gradient-linear-heat #process,
.element8-sa-lp.gradient-linear-heat #faq{
  background:
    radial-gradient(circle at 92% 8%,rgba(252,176,69,.22),transparent 36%),
    radial-gradient(circle at 8% 86%,rgba(131,58,180,.12),transparent 34%),
    linear-gradient(180deg,#fff5ee 0%,#ffe7d9 100%)!important;
  color:#0a0a0a;
}
.element8-sa-lp.gradient-linear-heat .capx{
  background:#f4f0e7!important;
  color:#0a0a0a!important;
}
.element8-sa-lp.gradient-linear-heat .capx-row{
  background:#f4f0e7!important;
}
.element8-sa-lp.gradient-linear-heat .capx .section-head h2,
.element8-sa-lp.gradient-linear-heat .capx .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .capx .capx-main h3,
.element8-sa-lp.gradient-linear-heat .capx .capx-main p{
  color:#0a0a0a!important;
}
.element8-sa-lp.gradient-linear-heat .visual-proof,
.element8-sa-lp.gradient-linear-heat .manifesto,
.element8-sa-lp.gradient-linear-heat .industries,
.element8-sa-lp.gradient-linear-heat .urgency,
.element8-sa-lp.gradient-linear-heat .pullquote,
.element8-sa-lp.gradient-linear-heat .lead,
.element8-sa-lp.gradient-linear-heat .footer,
.element8-sa-lp.gradient-linear-heat .stats,
.element8-sa-lp.gradient-linear-heat .trust-bar,
.element8-sa-lp.gradient-linear-heat .marquee,
.element8-sa-lp.gradient-linear-heat #work{
  background:
    radial-gradient(circle at 82% 18%,rgba(252,176,69,.16),transparent 40%),
    radial-gradient(circle at 16% 82%,rgba(131,58,180,.20),transparent 42%),
    radial-gradient(circle at 52% 42%,rgba(253,29,29,.11),transparent 48%),
    linear-gradient(180deg,#080207 0%,#12050c 58%,#090308 100%)!important;
}
.element8-sa-lp.gradient-linear-heat .visual-proof .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .manifesto .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .industries .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .urgency .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .pullquote .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .lead .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .footer .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .stats .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .trust-bar .section-eyebrow,
.element8-sa-lp.gradient-linear-heat .marquee .section-eyebrow,
.element8-sa-lp.gradient-linear-heat #work .section-eyebrow{
  color:rgba(255,255,255,.62)!important;
}
.element8-sa-lp.gradient-linear-heat .visual-proof::before,
.element8-sa-lp.gradient-linear-heat .services::before,
.element8-sa-lp.gradient-linear-heat .industries::before,
.element8-sa-lp.gradient-linear-heat .urgency::before,
.element8-sa-lp.gradient-linear-heat .lead::before{
  background:
    radial-gradient(circle at 84% 16%,rgba(252,176,69,.18),transparent 42%),
    radial-gradient(circle at 18% 72%,rgba(131,58,180,.18),transparent 46%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.032) 0 1px,transparent 1px 86px)!important;
}
.element8-sa-lp.gradient-linear-heat .trust-bar{
  border-color:rgba(252,176,69,.14)!important;
}
.element8-sa-lp.gradient-linear-heat .marquee::before{
  background:linear-gradient(90deg,#090308,transparent)!important;
}
.element8-sa-lp.gradient-linear-heat .marquee::after{
  background:linear-gradient(270deg,#090308,transparent)!important;
}
.element8-sa-lp.gradient-linear-heat .marquee{
  background:#000!important;
  border-color:#000!important;
}
.element8-sa-lp.gradient-linear-heat .marquee::before{
  background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 38%,transparent 100%)!important;
}
.element8-sa-lp.gradient-linear-heat .marquee::after{
  background:linear-gradient(270deg,#000 0%,rgba(0,0,0,.92) 38%,transparent 100%)!important;
}
.element8-sa-lp .marquee-track{
  animation:scroll 200s linear infinite!important;
  animation-play-state:running!important;
}
.element8-sa-lp.motion-pausable:not(.motion-live) .marquee-track,
html.motion-settled .element8-sa-lp .marquee-track,
html.is-scrolling .element8-sa-lp .marquee-track{
  animation:scroll 200s linear infinite!important;
  animation-play-state:running!important;
}
.element8-sa-lp .marquee-item{
  background:#000!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.element8-sa-lp .marquee-item img{
  mix-blend-mode:screen;
}
.element8-sa-lp.gradient-linear-heat .hx-dot.d2,
.element8-sa-lp.gradient-linear-heat .urg-dot,
.element8-sa-lp.gradient-linear-heat .hero-idx::before{
  background:#FD1D1D!important;
  color:#FD1D1D!important;
  box-shadow:0 0 14px rgba(253,29,29,.58)!important;
}
.element8-sa-lp.gradient-linear-heat .hx-dot.d4,
.element8-sa-lp.gradient-linear-heat .lead-bullets .b .dot{
  background:#FCB045!important;
  box-shadow:0 0 14px rgba(252,176,69,.58)!important;
}
.element8-sa-lp.gradient-linear-heat .hx-star.s2,
.element8-sa-lp.gradient-linear-heat .pq-shoot{
  background:linear-gradient(90deg,transparent,rgba(252,176,69,.94) 58%,rgba(253,29,29,.7) 78%,transparent)!important;
  box-shadow:0 0 10px rgba(252,176,69,.45)!important;
}
.element8-sa-lp.gradient-linear-heat .vp-art .accent,
.element8-sa-lp.gradient-linear-heat .vp-object .obj-orange{
  stroke:#FD1D1D!important;
}
.element8-sa-lp.gradient-linear-heat .hero-visual .orb,
.element8-sa-lp.gradient-linear-heat .quote .who .ava,
.element8-sa-lp.gradient-linear-heat .capx-row:hover .capx-arrow{
  background:var(--grad)!important;
}
.element8-sa-lp.gradient-linear-heat .quote .who .ava::after{
  background:linear-gradient(135deg,rgba(131,58,180,.2),rgba(253,29,29,.18),rgba(252,176,69,.22))!important;
}
.element8-sa-lp.gradient-linear-heat .pullquote,
.element8-sa-lp .pullquote{
  min-height:clamp(1080px,170vh,2180px)!important;
  padding:0!important;
  display:block!important;
  align-items:stretch!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 82% 44%,rgba(252,176,69,.16),transparent 34%),
    radial-gradient(circle at 74% 58%,rgba(253,29,29,.10),transparent 38%),
    radial-gradient(circle at 100% 50%,rgba(131,58,180,.16),transparent 42%),
    linear-gradient(90deg,#020204 0%,#080607 44%,#151515 100%)!important;
}
.element8-sa-lp .pq-stage{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100vh;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 44%,rgba(252,176,69,.16),transparent 34%),
    radial-gradient(circle at 74% 58%,rgba(253,29,29,.10),transparent 38%),
    radial-gradient(circle at 100% 50%,rgba(131,58,180,.16),transparent 42%),
    linear-gradient(90deg,#020204 0%,#080607 44%,#151515 100%);
}
.element8-sa-lp .pullquote.pq-is-pinned .pq-stage{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
}
.element8-sa-lp .pullquote.pq-is-after .pq-stage{
  position:absolute;
  top:auto;
  bottom:0;
  left:0;
  right:0;
}
.element8-sa-lp.gradient-linear-heat .pullquote::before,
.element8-sa-lp .pullquote::before{
  content:none!important;
}
.element8-sa-lp .pq-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 48% 72% at 82% 52%,rgba(31,31,31,.88),rgba(17,17,17,.64) 42%,transparent 72%)!important;
  filter:none!important;
  opacity:1!important;
  -webkit-mask-image:none!important;
          mask-image:none!important;
}
.element8-sa-lp.gradient-linear-heat .pullquote::after,
.element8-sa-lp .pullquote::after{
  content:none!important;
}
.element8-sa-lp .pq-stage::after{
  content:""!important;
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,2,4,.96) 0%,rgba(2,2,4,.86) 42%,rgba(2,2,4,.34) 62%,rgba(2,2,4,0) 82%);
}
.element8-sa-lp .pq-stars{
  display:none!important;
}
.element8-sa-lp .pq-furry-frame{
  position:absolute;
  z-index:1;
  top:50%;
  right:max(clamp(52px,7vw,96px),calc((100vw - var(--container))/2 + clamp(24px,3vw,62px)));
  width:min(clamp(420px,36vw,530px),calc((100vh - 48px) * .599));
  height:min(clamp(700px,60vw,900px),calc(100vh - 48px));
  overflow:visible;
  transform:translate3d(0,calc(-50% + var(--pq-furry-y, 500px)),0);
  will-change:transform;
  pointer-events:none;
  user-select:none;
}
.element8-sa-lp .pq-furry-8{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
  max-width:none;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(-34px 36px 70px rgba(0,0,0,.45)) saturate(1.04) contrast(1.03);
}
.element8-sa-lp .pq-inner{
  z-index:3!important;
}
.element8-sa-lp .pq-inner .pq-body,
.element8-sa-lp .pq-body{
  max-width:min(620px,50vw)!important;
}
.element8-sa-lp .pq-attrib{
  max-width:min(580px,46vw)!important;
}
@media(max-width:900px){
  .element8-sa-lp .pullquote{
    min-height:620px!important;
    padding:120px 0 clamp(300px,48vw,430px)!important;
    display:flex!important;
    align-items:flex-start;
    overflow:hidden!important;
  }
  .element8-sa-lp .pq-stage{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    height:auto;
    min-height:0;
    display:block;
    overflow:visible;
    background:transparent;
  }
  .element8-sa-lp .pullquote.pq-is-pinned .pq-stage,
  .element8-sa-lp .pullquote.pq-is-after .pq-stage{
    position:relative;
    top:auto;
    bottom:auto;
    left:auto;
    right:auto;
    z-index:auto;
  }
  .element8-sa-lp .pq-furry-frame{
    top:auto;
    bottom:clamp(16px,5vw,48px);
    right:clamp(20px,4vw,40px);
    width:clamp(260px,56vw,360px);
    height:auto;
    aspect-ratio:747 / 1247;
    overflow:visible;
    transform:translate3d(0,var(--pq-furry-y, 20px),0);
    opacity:.88;
  }
  .element8-sa-lp .pq-furry-8{width:100%}
  .element8-sa-lp .pq-inner .pq-body,
  .element8-sa-lp .pq-body,
  .element8-sa-lp .pq-attrib{
    max-width:min(680px,100%)!important;
  }
}
@media(max-width:620px){
  .element8-sa-lp .pullquote{
    min-height:560px!important;
    padding:100px 0 clamp(280px,82vw,380px)!important;
  }
  .element8-sa-lp .pq-furry-frame{
    right:clamp(20px,4vw,28px);
    bottom:clamp(18px,6vw,38px);
    width:clamp(230px,64vw,300px);
    height:auto;
    opacity:.78;
  }
  .element8-sa-lp .pq-furry-8{width:100%}
}
.element8-sa-lp .work-card{
  overflow:hidden;
}
.element8-sa-lp .work-card .bg{
  background:#12050c;
}
.element8-sa-lp .work-card .bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.18),transparent 26%),
    radial-gradient(circle at 50% 70%,rgba(0,0,0,.30),transparent 38%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 68px);
  opacity:.84;
}
.element8-sa-lp .work-card .work-object{
  position:absolute;
  z-index:2;
  left:50%;
  top:45%;
  width:clamp(170px,18vw,320px);
  max-width:82%;
  max-height:74%;
  object-fit:contain;
  transform:translate(-50%,-50%) rotate(-4deg) scale(1);
  filter:drop-shadow(0 34px 54px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(252,176,69,.13));
  transition:transform .72s cubic-bezier(.2,.7,.2,1),filter .42s ease;
  pointer-events:none;
}
.element8-sa-lp .work-card:nth-child(2) .work-object{top:43%;rotate:6deg}
.element8-sa-lp .work-card:nth-child(3) .work-object{top:42%;rotate:-8deg}
.element8-sa-lp .work-card:nth-child(4) .work-object{top:44%;rotate:9deg}
.element8-sa-lp .work-card:nth-child(5) .work-object{top:42%;rotate:-2deg}
.element8-sa-lp .work-card:hover .work-object{
  transform:translate(-50%,-54%) rotate(2deg) scale(1.06);
  filter:drop-shadow(0 42px 66px rgba(0,0,0,.50)) drop-shadow(0 0 34px rgba(252,176,69,.18));
}
.element8-sa-lp .work-card .info{
  z-index:3;
}
.element8-sa-lp .work-card.case-card{
  cursor:default;
}
.element8-sa-lp .work-card.case-card .info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  max-width:88%;
}
.element8-sa-lp .work-card.case-card .info h3{
  max-width:620px;
}
.element8-sa-lp .work-card.case-card .info p{
  margin:0;
  max-width:560px;
  color:rgba(255,255,255,.68);
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.45;
}
.element8-sa-lp .case-scope{
  display:inline-flex;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:8px 11px;
  background:rgba(0,0,0,.24);
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.element8-sa-lp.gradient-linear-heat .work-card .bg.g1{background:linear-gradient(135deg,#833AB4,#FD1D1D)!important}
.element8-sa-lp.gradient-linear-heat .work-card .bg.g2{background:linear-gradient(135deg,#FD1D1D,#FCB045)!important}
.element8-sa-lp.gradient-linear-heat .work-card .bg.g3{background:linear-gradient(135deg,#833AB4,#FCB045)!important}
.element8-sa-lp.gradient-linear-heat .work-card .bg.g4{background:linear-gradient(135deg,#FCB045,#FD1D1D)!important}
.element8-sa-lp.gradient-linear-heat .work-card .bg.g5{background:linear-gradient(135deg,#833AB4,#FD1D1D 52%,#FCB045)!important}
.element8-sa-lp.gradient-linear-heat .work-card.work-more::before,
.element8-sa-lp.gradient-linear-heat .work-card.work-more:hover::before{
  background:radial-gradient(circle at 62% 40%,rgba(253,29,29,.32),rgba(131,58,180,.16) 42%,transparent 62%)!important;
}
.element8-sa-lp.page-branding-agency-saudi-arabia #work{
  background:#080808!important;
}
.element8-sa-lp.page-branding-agency-saudi-arabia #work .work-card .bg::after{
  display:none!important;
}
.element8-sa-lp.page-branding-agency-saudi-arabia #before-after{
  background:var(--bg-paper)!important;
}
.element8-sa-lp.page-digital-marketing-agency-riyadh #work{
  background:#080808!important;
}
.element8-sa-lp.page-digital-marketing-agency-riyadh #work .work-card .bg::after{
  display:none!important;
}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision{
  padding-bottom:clamp(96px,10vw,156px);
}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .section-head{
  position:relative;
  z-index:2;
}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-grid{
  position:relative;
  z-index:2;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,24px);
}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-card{
  min-height:clamp(248px,18vw,298px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-icon-search-ads{color:#1788c9}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-icon-paid-social{color:#0866ff}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-icon-seo-content{color:#28a85d}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-icon-landing-cro{color:#f59a23}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-icon-linkedin-b2b{color:#2f7bd8}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-decision-icon-retargeting-crm{color:#8b45c8}
.element8-sa-lp.page-digital-marketing-agency-riyadh #decision .e8-object-decision{
  top:auto;
  right:max(22px,calc((100vw - 1180px)/2 + 32px));
  bottom:clamp(44px,6vw,92px);
  width:clamp(310px,36vw,610px);
  opacity:.27;
  filter:blur(5px) drop-shadow(0 44px 76px rgba(0,0,0,.52)) drop-shadow(0 0 38px rgba(252,176,69,.18))!important;
  rotate:-10deg;
}
.element8-sa-lp.page-website-design-company-saudi-arabia #work .work-card .bg::after,
.element8-sa-lp.page-mobile-app-development-company-saudi-arabia #work .work-card .bg::after{
  display:none!important;
}
.element8-sa-lp.page-website-design-company-saudi-arabia #work .work-card.work-more .wm-inner{
  width:100%;
  max-width:100%;
}
.element8-sa-lp.page-website-design-company-saudi-arabia #work .wm-big{
  font-size:clamp(56px,6.25vw,96px);
  line-height:1.04;
  letter-spacing:-.065em;
  white-space:nowrap;
  max-width:100%;
  padding-bottom:0;
  margin-bottom:0;
}
.element8-sa-lp.page-website-design-company-saudi-arabia #work .wm-plus{
  margin-left:.04em;
  padding-bottom:0;
  margin-bottom:0;
}
.element8-sa-lp #why-moonbox .e8-video-case-study{
  position:relative;
  z-index:1;
}
.element8-sa-lp #why-moonbox{
  padding-bottom:0!important;
}
.element8-sa-lp .e8-video-case-study{
  width:100vw;
  margin-top:clamp(64px,8.64vw,109px);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
  overflow:hidden;
  background:#060606;
  color:#fff;
  border:0;
  box-shadow:none;
}
.element8-sa-lp.page-mobile-app-development-company-saudi-arabia #why-moonbox .e8-video-case-study,
.element8-sa-lp.page-branding-agency-saudi-arabia #why-moonbox .e8-video-case-study,
.element8-sa-lp.page-digital-marketing-agency-riyadh #why-moonbox .e8-video-case-study{
  margin-top:clamp(128px,17.28vw,218px);
}
.element8-sa-lp .e8-video-case-media{
  position:relative;
  height:clamp(246px,43.3vw,755px);
  min-height:0;
  overflow:hidden;
  background:#050505;
}
.element8-sa-lp .e8-video-case-media::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:38%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,0),rgba(5,5,5,.72));
  z-index:1;
}
.element8-sa-lp .e8-video-case-media video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(1.04) contrast(1.04);
}
.element8-sa-lp .e8-video-case-foot{
  position:absolute;
  left:50%;
  bottom:0;
  z-index:3;
  width:min(calc(100vw - clamp(40px,8vw,80px)), calc(var(--container) - 80px));
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(var(--e8-foot-cols,3),1fr);
  align-items:center;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 82% 20%,rgba(252,176,69,.18),transparent 44%),
    linear-gradient(90deg,rgba(9,3,8,.88),rgba(21,7,16,.76));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.element8-sa-lp .e8-video-case-foot span,
.element8-sa-lp .e8-video-case-foot a{
  min-height:78px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px clamp(18px,2.5vw,30px);
  border-right:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.76);
  font-size:clamp(14px,1.1vw,16px);
}
.element8-sa-lp .e8-video-case-foot span strong{
  font-family:var(--display);
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  letter-spacing:-.055em;
  color:#fff;
  font-weight:500;
}
.element8-sa-lp .e8-video-case-foot a{
  justify-content:space-between;
  border-right:0;
  font-weight:600;
  color:#fff;
}
.element8-sa-lp .e8-video-case-foot a:hover{
  background:rgba(255,255,255,.06);
}
@media(max-width:760px){
  .element8-sa-lp .e8-video-case-media{height:clamp(396px,130vw,572px)}
  .element8-sa-lp .e8-video-case-media::after{height:58%}
  .element8-sa-lp .e8-video-case-foot{
    bottom:0;
    grid-template-columns:1fr;
    width:calc(100vw - 40px);
  }
  .element8-sa-lp .e8-video-case-foot span,
  .element8-sa-lp .e8-video-case-foot a{
    min-height:54px;
    padding:10px 14px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  .element8-sa-lp .e8-video-case-foot a{border-bottom:0}
  .element8-sa-lp .e8-decision-proof-points{grid-template-columns:1fr}
}
.element8-sa-lp .e8-detail-section .section-head h2,
.element8-sa-lp .e8-decision-section .section-head h2,
.element8-sa-lp .e8-compliance-section .section-head h2,
.element8-sa-lp .e8-leadmagnet-section .section-head h2,
.element8-sa-lp .e8-proof-strip .section-head h2,
.element8-sa-lp .e8-scope-section .section-head h2,
.element8-sa-lp #results .section-head h2,
.element8-sa-lp #process .section-head h2,
.element8-sa-lp #work .section-head h2,
.element8-sa-lp #performance-proof .section-head h2{
  font-family:var(--display)!important;
  font-weight:500!important;
  letter-spacing:-0.055em!important;
  line-height:.88!important;
}
.element8-sa-lp .e8-proof-stat span,
.element8-sa-lp .e8-stamp h3,
.element8-sa-lp .e8-scope-card h3,
.element8-sa-lp .e8-decision-card h3,
.element8-sa-lp .e8-compliance-chip h3,
.element8-sa-lp .e8-leadmagnet-card h2,
.element8-sa-lp .performance-proof-number,
.element8-sa-lp .performance-proof-label,
.element8-sa-lp .result-number,
.element8-sa-lp .result-label,
.element8-sa-lp .timeline-title,
.element8-sa-lp .timeline-note strong{
  font-family:var(--display)!important;
  font-weight:500!important;
}
.element8-sa-lp .e8-detail-kicker,
.element8-sa-lp .e8-detail-index,
.element8-sa-lp .e8-compliance-chip span,
.element8-sa-lp .e8-stamp-name,
.element8-sa-lp .e8-scope-card > span,
.element8-sa-lp .timeline-day{
  font-family:var(--mono)!important;
  font-weight:500!important;
}
.element8-sa-lp .timeline-title{
  font-size:28px!important;
  line-height:1!important;
  letter-spacing:-1.02px!important;
}
.element8-sa-lp.gradient-linear-heat .manifesto{
  color:#fff;
}
.element8-sa-lp .manifesto .man-bg{
  background:
    radial-gradient(circle at 78% 18%,rgba(252,176,69,.16),transparent 34%),
    radial-gradient(circle at 16% 82%,rgba(131,58,180,.20),transparent 42%),
    linear-gradient(180deg,#080207 0%,#12050c 58%,#090308 100%)!important;
}
.element8-sa-lp .manifesto .man-bg img{
  display:none!important;
}
.element8-sa-lp.gradient-linear-heat .man-credo-logo{
  filter:hue-rotate(122deg) saturate(1.2) contrast(1.06);
}
.element8-sa-lp .man-credo-logo-3d{
  top:0;
  right:clamp(32px,6vw,92px);
  width:clamp(185px,17.8vw,331px);
  max-width:25.3vw;
  transform-origin:50% 50%;
  animation:e8AboutLogoFloat 8s ease-in-out infinite alternate!important;
  filter:
    drop-shadow(0 34px 62px rgba(0,0,0,.46))
    drop-shadow(0 0 34px rgba(252,176,69,.18))!important;
}
.element8-sa-lp .manifesto:hover .man-credo-logo-3d{
  animation:e8AboutLogoFloat 8s ease-in-out infinite alternate!important;
  filter:
    drop-shadow(0 38px 72px rgba(0,0,0,.52))
    drop-shadow(0 0 42px rgba(253,29,29,.22))!important;
}
.motion-pausable:not(.motion-live) .man-credo-logo-3d,
html.is-scrolling .man-credo-logo-3d,
html.page-hidden .man-credo-logo-3d,
html.motion-settled .man-credo-logo-3d{
  animation-play-state:running!important;
}
@keyframes e8AboutLogoFloat{
  from{transform:translate3d(0,0,0) rotate(-.6deg) scale(1)}
  to{transform:translate3d(-8px,-12px,0) rotate(.8deg) scale(1.015)}
}
@media(max-width:760px){
  .element8-sa-lp .man-credo-logo-3d{width:min(55.2vw,238px);max-width:none;margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .element8-sa-lp .man-credo-logo-3d{animation:none!important;transform:none!important}
}
.element8-sa-lp.gradient-linear-heat .urg-pulse{
  background:var(--grad)!important;
  box-shadow:0 0 18px rgba(253,29,29,.62),0 0 30px rgba(252,176,69,.34)!important;
}
.element8-sa-lp.gradient-linear-heat .faq-list,
.element8-sa-lp.gradient-linear-heat .faq{
  border-color:rgba(131,58,180,.18)!important;
}
.element8-sa-lp.gradient-linear-heat .faq[open] .toggle,
.element8-sa-lp.gradient-linear-heat .cs-close:hover{
  background:var(--grad)!important;
  color:#fff!important;
  border-color:transparent!important;
}
.element8-sa-lp.gradient-linear-heat .field input.err,
.element8-sa-lp.gradient-linear-heat .field textarea.err{
  border-color:#FD1D1D!important;
  background:rgba(253,29,29,.06)!important;
}
.element8-sa-lp.gradient-linear-heat .field input:focus,
.element8-sa-lp.gradient-linear-heat .field select:focus,
.element8-sa-lp.gradient-linear-heat .field textarea:focus{
  border-color:#FCB045!important;
  background:rgba(252,176,69,.05)!important;
}
.element8-sa-lp.gradient-linear-heat .footer::before{
  background:
    radial-gradient(circle at 30% 30%,rgba(131,58,180,.9),transparent 45%),
    radial-gradient(circle at 72% 45%,rgba(253,29,29,.82),transparent 50%),
    radial-gradient(circle at 58% 84%,rgba(252,176,69,.72),transparent 50%)!important;
}
.element8-sa-lp.gradient-linear-heat .footer::after{
  background:
    radial-gradient(circle at 42% 62%,rgba(131,58,180,.68),transparent 48%),
    radial-gradient(circle at 80% 22%,rgba(252,176,69,.52),transparent 55%),
    radial-gradient(circle at 18% 78%,rgba(253,29,29,.56),transparent 55%)!important;
}
.element8-sa-lp.gradient-linear-heat .e8-mark-layer::before,
.element8-sa-lp.gradient-linear-heat .e8-mark-layer::after{
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.95),rgba(255,255,255,.2) 15%,rgba(255,255,255,0) 30%),
    conic-gradient(from 225deg,#fff 0deg,#FCB045 72deg,#FD1D1D 172deg,#833AB4 286deg,#fff 360deg)!important;
}
.element8-sa-lp.gradient-linear-heat .e8-mark-layer:not(.e8-front)::before,
.element8-sa-lp.gradient-linear-heat .e8-mark-layer:not(.e8-front)::after{
  background:linear-gradient(135deg,rgba(252,176,69,.62),rgba(253,29,29,.76) 48%,rgba(131,58,180,.66))!important;
}
.element8-sa-lp.gradient-linear-heat .e8-logo3d-glow.g1{background:#FCB045!important}
.element8-sa-lp.gradient-linear-heat .e8-logo3d-glow.g2{background:#FD1D1D!important}
.element8-sa-lp .hx-grain{
  opacity:.58;
}
.element8-sa-lp .e8-stage{
  left:73%;
  z-index:1;
  translate:0 0!important;
  transition:none!important;
  will-change:auto!important;
}
.element8-sa-lp .hx-bigword{
  translate:0 0!important;
  transition:none!important;
  will-change:auto!important;
}
.element8-sa-lp .hx-astro-wrap{
  z-index:4;
  opacity:1!important;
  transform:translate(-50%,-50%)!important;
  animation:none!important;
}
.element8-sa-lp .hx-orbit,
.element8-sa-lp .hx-ring.r4{
  display:none!important;
}
.element8-sa-lp .e8-logo3d{
  position:absolute;
  top:50%;
  left:50%;
  width:min(471px,39.6vw);
  aspect-ratio:65.67/118.01;
  transform:translate(-50%,-50%);
  perspective:1500px;
  z-index:1;
  opacity:.78;
  filter:drop-shadow(0 48px 64px rgba(0,0,0,.42));
}
.element8-sa-lp .e8-logo3d-spin{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  animation:e8LogoSpin 24s linear infinite;
}
.element8-sa-lp .e8-mark-layer{
  position:absolute;
  inset:0;
  transform:translateZ(var(--z));
  transform-style:preserve-3d;
  opacity:var(--alpha);
}
.element8-sa-lp .e8-mark-layer::before,
.element8-sa-lp .e8-mark-layer::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.95),rgba(255,255,255,.2) 15%,rgba(255,255,255,0) 30%),
    conic-gradient(from 225deg,#fff 0deg,#dbe7ff 60deg,#1dc0dc 132deg,#7162ab 205deg,#f04e41 286deg,#fff 360deg);
  -webkit-mask:radial-gradient(circle,transparent 0 42%,#000 43% 66%,transparent 67%);
          mask:radial-gradient(circle,transparent 0 42%,#000 43% 66%,transparent 67%);
  box-shadow:
    inset 20px 18px 30px rgba(255,255,255,.16),
    inset -28px -34px 38px rgba(0,0,0,.38),
    0 0 22px rgba(29,192,220,.12);
}
.element8-sa-lp .e8-mark-layer::before{top:0}
.element8-sa-lp .e8-mark-layer::after{bottom:0}
.element8-sa-lp .e8-mark-layer:not(.e8-front)::before,
.element8-sa-lp .e8-mark-layer:not(.e8-front)::after{
  background:linear-gradient(135deg,rgba(29,192,220,.62),rgba(113,98,171,.78) 48%,rgba(240,78,65,.62));
}
.element8-sa-lp .e8-front{
  opacity:1;
  filter:drop-shadow(0 0 24px rgba(255,255,255,.18));
}
.element8-sa-lp .e8-logo3d-shadow{
  position:absolute;
  left:50%;
  bottom:-8%;
  width:118%;
  height:18%;
  transform:translateX(-50%) rotateX(74deg);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.48),rgba(0,0,0,0) 68%);
  filter:blur(12px);
  opacity:.7;
}
.element8-sa-lp .e8-logo3d-glow{
  position:absolute;
  width:34%;
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(18px);
  opacity:.52;
  pointer-events:none;
}
.element8-sa-lp .e8-logo3d-glow.g1{top:8%;right:-10%;background:#1dc0dc}
.element8-sa-lp .e8-logo3d-glow.g2{bottom:12%;left:-12%;background:#f04e41}
@keyframes e8LogoSpin{
  0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.03)}
  5%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.03)}
  31%{transform:rotateX(8deg) rotateY(178deg) rotateZ(3deg) scale(1)}
  36%{transform:rotateX(8deg) rotateY(178deg) rotateZ(3deg) scale(1)}
  62%{transform:rotateX(5deg) rotateY(302deg) rotateZ(-6deg) scale(1.015)}
  67%{transform:rotateX(5deg) rotateY(302deg) rotateZ(-6deg) scale(1.015)}
  100%{transform:rotateX(0deg) rotateY(360deg) rotateZ(0deg) scale(1.03)}
}
@media(prefers-reduced-motion:reduce){
  .element8-sa-lp .e8-logo3d-spin{animation:none!important;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.03)}
}
@media(max-width:700px){
  .element8-sa-lp .e8-stage{left:auto}
  .element8-sa-lp .e8-logo3d{width:min(257px,69.3vw);opacity:.76}
  .element8-sa-lp .hero-v2 .hx-accent{
    background:none!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }
}