.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:#EE66AD;
--cyan:#758EF8;
--magenta:#F29DD5;
--green:#68BD48;
--orange:#EE7A3C;
--grad: #EE66AD;
--grad-2: #EE66AD;
--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,");
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:15px;color:var(--mute);letter-spacing:-0.35px;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:14.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:#EE66AD;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:#F29DD5;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,");
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%, #F29DD5 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(242,157,213,.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:#758EF8;box-shadow:0 0 12px rgba(117,142,248,.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}
/* Hero eyebrow: white over the bright hero art (--mute gray was unreadable on the gradient) */
.hero-v2 .hx-pitch .eyebrow{color:rgba(255,255,255,.95);text-shadow:0 1px 12px rgba(10,7,14,.35)}
/* 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(117,142,248,.9) 60%,rgba(117,142,248,1));box-shadow:0 0 6px rgba(117,142,248,.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(238,102,173,.16),transparent 36%),
radial-gradient(ellipse at 88% 18%,rgba(117,142,248,.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 .vp-real-user-photo{
width:min(94%,720px);
max-height:470px;
aspect-ratio:1510/1042;
object-fit:cover;
animation:none;
filter:drop-shadow(0 30px 54px rgba(0,0,0,.38));
}
.vp-art:hover .vp-real-user-photo{
animation:none;
translate:0 -8px;
transform:scale(1.018);
filter:drop-shadow(0 38px 64px rgba(0,0,0,.44)) saturate(1.04);
}
.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(238,102,173,.12);stroke:rgba(238,102,173,.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(238,102,173,.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(238,102,173,.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-outline{padding:15px 25px;background:transparent;color:#fff;border:1px solid var(--line);border-radius:0}
.btn-outline:hover{background:transparent;border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.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(117,142,248,.25),rgba(242,157,213,.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(238,102,173,.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(238,102,173,.15),transparent 55%);
transition:opacity .4s ease;
}
.work-card.work-more:hover::before{background:radial-gradient(circle at 60% 40%,rgba(238,102,173,.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,#758EF8,#3E67B1)}
.work-card .bg.g3{background:linear-gradient(135deg,#A45EA5,#F29DD5)}
.work-card .bg.g4{background:linear-gradient(135deg,#68BD48,#1AB78F)}
.work-card .bg.g5{background:linear-gradient(135deg,#7162AB,#758EF8)}
/* ---------------- 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(238,102,173,.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(238,102,173,.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(238,102,173,.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(238,102,173,.35);
background:linear-gradient(135deg,rgba(238,102,173,.08),rgba(238,102,173,.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}
.client-proof-logos .quote{isolation:isolate}
.element8-sa-lp.gradient-linear-heat .client-proof-logos .quote .who .ava{width:70px;height:46px;flex:0 0 70px;background:transparent!important;padding:0;border:0;border-radius:0;box-shadow:none;overflow:visible}
.client-proof-logos .quote .who .ava img{object-fit:contain;border-radius:0;filter:none;mix-blend-mode:normal}
.client-proof-logos .quote .who .ava::after{display:none}
.element8-sa-lp .quote .who .e8-brand-ava{
background:transparent!important;
border:0;
border-radius:0;
box-shadow:none;
padding:5px;
}
.element8-sa-lp .quote .who .e8-brand-ava img{
object-fit:contain;
border-radius:0;
filter:none;
}
.element8-sa-lp .quote .who .e8-brand-ava::after{display: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(117,142,248,.58) 78%,transparent);
box-shadow:0 0 8px rgba(255,255,255,.45),0 0 18px rgba(117,142,248,.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(238,102,173,.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(238,102,173,.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(117,142,248,.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;
}
.e8-foot-scroll-ready .aurora-sphere{
animation:none;
transform:translate3d(calc(-50% + var(--e8-foot-shift, 0px)),var(--e8-foot-lift, 0px),0) scale(var(--e8-foot-scale, 1));
opacity:var(--e8-foot-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(117,142,248,.82), transparent 50%),
radial-gradient(circle at 55% 85%, rgba(240,78,65,.72), transparent 50%),
radial-gradient(circle at 82% 72%, rgba(242,157,213,.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:translate3d(calc(-50% - 2vw),0,0) scale(1)}
50% {transform:translate3d(calc(-50% + 2vw),-1.5%,0) scale(1.06)}
}
@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:0;
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;
}
.e8-foot-motion-ready .foot-shout:not(.in) .fs-word,
.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}
.e8-foot-motion-ready .foot-shout:not(.in) .fs-line:nth-child(2) .fs-word,
.e8-foot-motion-ready .foot-shout:not(.in) .fs-line:nth-child(3) .fs-word{transition-delay:0s}
@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%,#F29DD5 48%,#7162AB 72%,#758EF8 100%);
--grad-2:linear-gradient(100deg,#758EF8 0%,#7162AB 30%,#F29DD5 62%,#F16F8E 100%);
--grad-hover:linear-gradient(100deg,#758EF8 0%,#7162AB 30%,#F29DD5 62%,#F16F8E 100%);
--accent:#F29DD5;
--accent-glow:rgba(242,157,213,.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(242,157,213,.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(117,142,248,.18),0 14px 38px rgba(242,157,213,.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(242,157,213,.55)}
.work-card.work-more:hover .wm-cta{border-color:rgba(242,157,213,.55)}
.field input.err,.field textarea.err{border-color:#F29DD5;background:rgba(242,157,213,.06)}
.urg-pulse{
background:var(--grad);
box-shadow:0 0 16px rgba(242,157,213,.62),0 0 24px rgba(117,142,248,.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;
}
/* Chrome fix: the animated number is a reel (overflow:hidden columns with a
transform:translateY strip). background-clip:text on those reel glyphs makes
Chrome leak the hidden digits as ghost fragments on hover — Safari tolerated
it, Chrome does not. Use a solid brand magenta on hover instead: clean in
every browser, no gradient-text clipping on the transformed/clipped reel. */
.capx-row:hover .capx-num,
.capx-row:hover .capx-num .capx-strip > span{
background:none;
-webkit-background-clip:border-box;
background-clip:border-box;
color:#C2337F !important;
-webkit-text-fill-color:#C2337F !important;
}
.capx-row:hover .capx-num{opacity:1;visibility:visible}
/* Shared capabilities: safe multicolour hover without animated-reel ghosting. */
.capx-num[data-number]{position:relative}
.capx-num[data-number]::after{
content:attr(data-number);
position:absolute;
inset:0;
display:block;
background:var(--grad);
background-size:100% 100%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
opacity:0;
transition:opacity .25s ease;
}
.capx-row:hover .capx-num[data-number] .capx-digit{opacity:0}
.capx-row:hover .capx-num[data-number]::after{opacity:1}
.page-private-enterprise-ai-platform .capx-num[data-number]::after{opacity:1}
/* ---------------- 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(242,157,213,.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(242,157,213,.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;
}
/* Prevent right-edge clipping on clip-to-text accents: with tight tracking the
last glyph's ink overhangs the box, where there is no background to show.
Extend the paint area without changing layout (mirror of the descender fix). */
.capx-key,
.grad-text,
.grad-text-big,
.urg-accent,
.hero h1 .grad,
.lead-copy h2 .grad,
.am-h1 em,
.ct-h1 em,.cl-h1 em,.bl-h1 em {
padding-right:.1em;
margin-right:-.1em;
}
/* 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(238,102,173,.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;
color:rgba(255,255,255,.88);
}
.element8-sa-lp .foot-bottom a{color:rgba(255,255,255,.88)}
.element8-sa-lp .foot-bottom a:hover{color:#fff}
.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,.88);
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(117,142,248,.14),transparent 34%),
radial-gradient(circle at 12% 88%,rgba(174,52,255,.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(174,52,255,.16)) drop-shadow(0 8px 16px rgba(238,102,173,.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(174,52,255,.20)) drop-shadow(0 12px 22px rgba(238,102,173,.16));
}
.element8-sa-lp .e8-detail-section{
background:
radial-gradient(circle at 82% 18%,rgba(117,142,248,.18),transparent 38%),
radial-gradient(circle at 14% 76%,rgba(174,52,255,.24),transparent 42%),
radial-gradient(circle at 52% 42%,rgba(238,102,173,.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(117,142,248,.16),rgba(238,102,173,.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(238,102,173,.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(117,142,248,.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(117,142,248,.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(117,142,248,.16),transparent 40%),
radial-gradient(circle at 16% 82%,rgba(174,52,255,.20),transparent 42%),
radial-gradient(circle at 52% 42%,rgba(238,102,173,.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(117,142,248,.18),transparent 42%),
radial-gradient(circle at 18% 76%,rgba(174,52,255,.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(117,142,248,.16),transparent 40%),
radial-gradient(circle at 16% 82%,rgba(174,52,255,.20),transparent 42%),
radial-gradient(circle at 52% 42%,rgba(238,102,173,.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(117,142,248,.18),transparent 42%),
radial-gradient(circle at 18% 72%,rgba(174,52,255,.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:#758EF8;
}
.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(117,142,248,.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(117,142,248,.34);
box-shadow:0 36px 96px rgba(0,0,0,.40),0 0 38px rgba(238,102,173,.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(238,102,173,.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%;
border-radius:0;
}
.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(117,142,248,.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(117,142,248,.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(117,142,248,.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(117,142,248,.42) 0 14%,rgba(117,142,248,.16) 26%,transparent 46%),
radial-gradient(circle at 52% 68%,rgba(238,102,173,.32) 0 12%,rgba(238,102,173,.12) 30%,transparent 52%),
radial-gradient(circle at 14% 18%,rgba(174,52,255,.52) 0 18%,transparent 46%),
linear-gradient(90deg,rgba(174,52,255,1) 0%,rgba(238,102,173,1) 50%,rgba(117,142,248,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(117,142,248,.98));
box-shadow:0 0 10px rgba(255,255,255,.45),0 0 22px rgba(117,142,248,.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(174,52,255,.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(117,142,248,.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(117,142,248,.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(117,142,248,.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(117,142,248,.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:#AE34FF}
.element8-sa-lp.gradient-linear-heat .hx-blob.hb2{background:#EE66AD}
.element8-sa-lp.gradient-linear-heat .hx-blob.hb3{background:#758EF8}
.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:#AE34FF;
--heat-red:#EE66AD;
--heat-gold:#758EF8;
--heat-ink:#090308;
--heat-panel:#150710;
--heat-paper:#fff1e7;
--heat-paper-2:#ffe5d7;
--accent:#EE66AD;
--cyan:#758EF8;
--magenta:#AE34FF;
--orange:#758EF8;
--bg-paper:#fff1e7;
--bg-soft:#ffe5d7;
--grad:linear-gradient(90deg,#AE34FF 0%,#EE66AD 50%,#758EF8 100%);
--grad-2:linear-gradient(90deg,#758EF8 0%,#EE66AD 48%,#AE34FF 100%);
--grad-hover:linear-gradient(90deg,#758EF8 0%,#EE66AD 48%,#AE34FF 100%);
--accent-glow:rgba(238,102,173,.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(238,102,173,.22),0 12px 32px rgba(174,52,255,.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(117,142,248,.26),0 14px 38px rgba(238,102,173,.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(117,142,248,.22),transparent 36%),
radial-gradient(circle at 8% 86%,rgba(174,52,255,.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(117,142,248,.16),transparent 40%),
radial-gradient(circle at 16% 82%,rgba(174,52,255,.20),transparent 42%),
radial-gradient(circle at 52% 42%,rgba(238,102,173,.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(117,142,248,.18),transparent 42%),
radial-gradient(circle at 18% 72%,rgba(174,52,255,.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(117,142,248,.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:#EE66AD!important;
color:#EE66AD!important;
box-shadow:0 0 14px rgba(238,102,173,.58)!important;
}
.element8-sa-lp.gradient-linear-heat .hx-dot.d4,
.element8-sa-lp.gradient-linear-heat .lead-bullets .b .dot{
background:#758EF8!important;
box-shadow:0 0 14px rgba(117,142,248,.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(117,142,248,.94) 58%,rgba(238,102,173,.7) 78%,transparent)!important;
box-shadow:0 0 10px rgba(117,142,248,.45)!important;
}
.element8-sa-lp.gradient-linear-heat .vp-art .accent,
.element8-sa-lp.gradient-linear-heat .vp-object .obj-orange{
stroke:#EE66AD!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(174,52,255,.2),rgba(238,102,173,.18),rgba(117,142,248,.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(117,142,248,.16),transparent 34%),
radial-gradient(circle at 74% 58%,rgba(238,102,173,.10),transparent 38%),
radial-gradient(circle at 100% 50%,rgba(174,52,255,.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(117,142,248,.16),transparent 34%),
radial-gradient(circle at 74% 58%,rgba(238,102,173,.10),transparent 38%),
radial-gradient(circle at 100% 50%,rgba(174,52,255,.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(117,142,248,.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(117,142,248,.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,#AE34FF,#EE66AD)!important}
.element8-sa-lp.gradient-linear-heat .work-card .bg.g2{background:linear-gradient(135deg,#EE66AD,#758EF8)!important}
.element8-sa-lp.gradient-linear-heat .work-card .bg.g3{background:linear-gradient(135deg,#AE34FF,#758EF8)!important}
.element8-sa-lp.gradient-linear-heat .work-card .bg.g4{background:linear-gradient(135deg,#758EF8,#EE66AD)!important}
.element8-sa-lp.gradient-linear-heat .work-card .bg.g5{background:linear-gradient(135deg,#AE34FF,#EE66AD 52%,#758EF8)!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(238,102,173,.32),rgba(174,52,255,.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(117,142,248,.18))!important;
rotate:-10deg;
}
.page-marketing-agency-dubai .marketing-campaign-engine{position:relative;overflow:hidden}
@property --mkt-orbit-turn{syntax:"";inherits:false;initial-value:0deg}
.page-marketing-agency-dubai .mkt-channel-visual{--orbit-radius:clamp(128px,15vw,188px)}
.page-marketing-agency-dubai .mkt-channel-logo{
--start:0deg;
--x:0!important;
--y:0!important;
--d:0s!important;
transform:rotate(calc(var(--start) + var(--mkt-orbit-turn))) translateX(var(--orbit-radius)) rotate(calc(-1 * (var(--start) + var(--mkt-orbit-turn))))!important;
animation:mktSharedOrbit 18s linear infinite!important;
will-change:transform;
}
.page-marketing-agency-dubai .mkt-channel-logo:nth-of-type(1){--start:-90deg}
.page-marketing-agency-dubai .mkt-channel-logo:nth-of-type(2){--start:-18deg}
.page-marketing-agency-dubai .mkt-channel-logo:nth-of-type(3){--start:54deg}
.page-marketing-agency-dubai .mkt-channel-logo:nth-of-type(4){--start:126deg}
.page-marketing-agency-dubai .mkt-channel-logo:nth-of-type(5){--start:198deg}
@keyframes mktSharedOrbit{to{--mkt-orbit-turn:360deg}}
@media(max-width:700px){.page-marketing-agency-dubai .mkt-channel-visual{--orbit-radius:clamp(105px,32vw,132px)}}
@media(prefers-reduced-motion:reduce){.page-marketing-agency-dubai .mkt-channel-logo{animation:none!important}}
.page-marketing-agency-dubai .marketing-campaign-engine .container,
.page-marketing-agency-dubai .marketing-campaign-engine .section-head,
.page-marketing-agency-dubai .marketing-campaign-engine .e8-decision-grid{position:relative;z-index:2}
.page-marketing-agency-dubai .marketing-campaign-engine .e8-decision-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,24px)}
.page-marketing-agency-dubai .marketing-campaign-engine .e8-decision-card{min-height:clamp(248px,18vw,298px);display:flex;flex-direction:column;justify-content:flex-start}
.page-marketing-agency-dubai .marketing-campaign-engine .campaign-engine-index{display:grid;place-items:center;width:clamp(46px,4.8vw,64px);height:clamp(46px,4.8vw,64px);margin-bottom:clamp(18px,2vw,26px);border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.1);font:600 12px var(--mono);letter-spacing:.08em;color:#fff;box-shadow:0 16px 36px rgba(0,0,0,.22)}
.page-marketing-agency-dubai .marketing-campaign-engine .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(117,142,248,.18))!important;rotate:-10deg}
@media(max-width:900px){.page-marketing-agency-dubai .marketing-campaign-engine .e8-decision-grid{grid-template-columns:1fr 1fr}.page-marketing-agency-dubai .marketing-campaign-engine .e8-object-decision{opacity:.18;width:58vw}}
@media(max-width:620px){.page-marketing-agency-dubai .marketing-campaign-engine .e8-decision-grid{grid-template-columns:1fr}.page-marketing-agency-dubai .marketing-campaign-engine .e8-object-decision{opacity:.12;width:74vw;right:-10vw}}
.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(117,142,248,.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(117,142,248,.16),transparent 34%),
radial-gradient(circle at 16% 82%,rgba(174,52,255,.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(117,142,248,.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(238,102,173,.22))!important;
}
.element8-sa-lp .manifesto .man-credo-logo-ibhar{
top:50%;
width:clamp(280px,26vw,450px);
max-width:34vw;
aspect-ratio:1;
height:auto;
padding:clamp(34px,4vw,58px);
background:#fff;
border-radius:50%;
object-fit:contain;
animation:ibharCircleGlow 4.8s ease-in-out infinite alternate!important;
transform:translate3d(0,-50%,0)!important;
filter:drop-shadow(0 28px 58px rgba(0,0,0,.42))!important;
box-sizing:border-box;
}
.element8-sa-lp .manifesto-ibhar:hover .man-credo-logo-ibhar{
animation:ibharCircleGlow 4.8s ease-in-out infinite alternate!important;
transform:translate3d(0,-50%,0)!important;
filter:drop-shadow(0 28px 58px rgba(0,0,0,.42))!important;
}
@keyframes ibharCircleGlow{
from{box-shadow:0 0 0 0 rgba(44,99,157,0)}
to{box-shadow:0 0 0 10px rgba(44,99,157,.12),0 0 34px rgba(44,99,157,.30)}
}
@media(max-width:760px){
.element8-sa-lp .manifesto .man-credo-logo-ibhar{
width:min(78vw,350px);
max-width:none;
padding:42px;
transform:none!important;
margin:8px auto 34px;
}
.element8-sa-lp .manifesto-ibhar:hover .man-credo-logo-ibhar{
transform:none!important;
}
}
@media(prefers-reduced-motion:reduce){
.element8-sa-lp .manifesto .man-credo-logo-ibhar{animation:none!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:0 auto 12px!important;
left:auto;right:auto;
}
}
@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(238,102,173,.62),0 0 30px rgba(117,142,248,.34)!important;
}
.element8-sa-lp.gradient-linear-heat .faq-list,
.element8-sa-lp.gradient-linear-heat .faq{
border-color:rgba(174,52,255,.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:#EE66AD!important;
background:rgba(238,102,173,.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:#758EF8!important;
background:rgba(117,142,248,.05)!important;
}
.element8-sa-lp.gradient-linear-heat .footer::before{
background:
radial-gradient(circle at 30% 30%,rgba(174,52,255,.9),transparent 45%),
radial-gradient(circle at 72% 45%,rgba(238,102,173,.82),transparent 50%),
radial-gradient(circle at 58% 84%,rgba(117,142,248,.72),transparent 50%)!important;
}
.element8-sa-lp.gradient-linear-heat .footer::after{
background:
radial-gradient(circle at 42% 62%,rgba(174,52,255,.68),transparent 48%),
radial-gradient(circle at 80% 22%,rgba(117,142,248,.52),transparent 55%),
radial-gradient(circle at 18% 78%,rgba(238,102,173,.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,#758EF8 72deg,#EE66AD 172deg,#AE34FF 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(117,142,248,.62),rgba(238,102,173,.76) 48%,rgba(174,52,255,.66))!important;
}
.element8-sa-lp.gradient-linear-heat .e8-logo3d-glow.g1{background:#758EF8!important}
.element8-sa-lp.gradient-linear-heat .e8-logo3d-glow.g2{background:#EE66AD!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;
}
body.page-workforce-project-ai .hx-astro-wrap{
width:min(740px,70vw)!important;
}
body.page-workforce-project-ai .hx-astro-wrap::after{
content:"";
position:absolute;
z-index:0;
left:18%;
right:4%;
bottom:7%;
height:15%;
border-radius:50%;
background:linear-gradient(90deg,rgba(224,47,137,.08),rgba(110,69,158,.48),rgba(241,85,58,.2));
filter:blur(28px);
opacity:.5;
animation:workforceBoardGlow 4.8s ease-in-out infinite;
}
body.page-workforce-project-ai .hx-astro{
position:relative;
z-index:1;
transform-origin:52% 62%;
animation:workforceBoardFloat 8.5s ease-in-out infinite!important;
will-change:transform,filter;
}
html.motion-settled:not(.is-scrolling):not(.page-hidden) body.page-workforce-project-ai .hx-astro,
html.motion-settled:not(.is-scrolling):not(.page-hidden) body.page-workforce-project-ai .hx-astro-wrap::after{
animation-play-state:running!important;
}
@keyframes workforceBoardFloat{
0%,100%{transform:translate3d(0,0,0) rotate(-1.5deg) scale(.97);filter:drop-shadow(0 28px 34px rgba(0,0,0,.28))}
50%{transform:translate3d(-1.2%,-2.2%,0) rotate(1deg) scale(.99);filter:drop-shadow(0 38px 42px rgba(110,69,158,.28))}
}
@keyframes workforceBoardGlow{
0%,100%{transform:scale(.88);opacity:.32}
50%{transform:scale(1.04);opacity:.62}
}
@media(max-width:900px){
body.page-workforce-project-ai .hx-astro-wrap{width:min(340px,86vw)!important}
}
@media(max-width:600px){
body.page-workforce-project-ai .hx-astro-wrap{width:min(310px,80vw)!important}
body.page-workforce-project-ai .hx-astro{animation-duration:9.5s!important}
}
@media(prefers-reduced-motion:reduce){
body.page-workforce-project-ai .hx-astro,
body.page-workforce-project-ai .hx-astro-wrap::after{animation:none!important}
body.page-workforce-project-ai .hx-astro{transform:none!important}
}
body.page-managed-ai-devops-monitoring .hx-astro-wrap{
width:min(700px,66vw)!important;
}
body.page-managed-ai-devops-monitoring .hx-astro-wrap::after{
content:"";
position:absolute;
z-index:0;
left:72%;
top:20%;
width:20%;
aspect-ratio:1;
border:2px solid rgba(224,47,137,.44);
border-radius:50%;
box-shadow:0 0 28px rgba(110,69,158,.46),inset 0 0 22px rgba(241,85,58,.2);
animation:devopsSavePulse 3.2s ease-out infinite;
}
body.page-managed-ai-devops-monitoring .hx-astro{
position:relative;
z-index:1;
transform-origin:48% 54%;
animation:devopsKeeperSave 7.6s ease-in-out infinite!important;
will-change:transform,filter;
}
html.motion-settled:not(.is-scrolling):not(.page-hidden) body.page-managed-ai-devops-monitoring .hx-astro,
html.motion-settled:not(.is-scrolling):not(.page-hidden) body.page-managed-ai-devops-monitoring .hx-astro-wrap::after{
animation-play-state:running!important;
}
@keyframes devopsKeeperSave{
0%,100%{transform:translate3d(-1.2%,1.2%,0) rotate(-1.2deg) scale(.975);filter:drop-shadow(0 28px 34px rgba(0,0,0,.3))}
50%{transform:translate3d(1.1%,-1.5%,0) rotate(.8deg) scale(1);filter:drop-shadow(0 38px 44px rgba(110,69,158,.3))}
}
@keyframes devopsSavePulse{
0%{transform:scale(.7);opacity:.72}
72%,100%{transform:scale(1.5);opacity:0}
}
@media(max-width:900px){
body.page-managed-ai-devops-monitoring .hx-astro-wrap{width:min(330px,84vw)!important}
}
@media(max-width:600px){
body.page-managed-ai-devops-monitoring .hx-astro-wrap{width:min(300px,78vw)!important}
body.page-managed-ai-devops-monitoring .hx-astro{animation-duration:8.8s!important}
}
@media(prefers-reduced-motion:reduce){
body.page-managed-ai-devops-monitoring .hx-astro,
body.page-managed-ai-devops-monitoring .hx-astro-wrap::after{animation:none!important}
body.page-managed-ai-devops-monitoring .hx-astro{transform: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:none;
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.03);
}
.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,#758EF8 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(117,142,248,.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(117,142,248,.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:#758EF8}
.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;
}
}
/* Shared mobile landing-page performance treatment. The homepage keeps its
bespoke hero scene; campaign/service landings use the stable lightweight
composition that was validated on the Saudi website-design page. */
@media(max-width:900px){
body.element8-sa-lp:not(.page-digital-transformation) .hero-v2 .hx-mesh,
body.element8-sa-lp:not(.page-digital-transformation) .hero-v2 .hx-bigword{
display:none!important;
}
body.element8-sa-lp:not(.page-digital-transformation) .hero-v2 .hx-stage,
body.element8-sa-lp:not(.page-digital-transformation) .hero-v2 .hx-astro-wrap,
body.element8-sa-lp:not(.page-digital-transformation) .hero-v2 .hx-astro{
animation:none!important;
filter:none!important;
}
body.element8-sa-lp:not(.page-digital-transformation) .hero-v2 .hx-astro-wrap,
body.element8-sa-lp:not(.page-digital-transformation) .hero-v2 .hx-astro{
opacity:1!important;
}
}
/* ===== E8 mobile responsive fixes v2 (manifesto stats, client logos, swipe cards, pullquote image) ===== */
@media(max-width:600px){
.e8mm-trig .e8mm-call,.e8mm-trig .e8mm-openbtn{width:50px!important;height:50px!important}
.e8mm-trig .e8mm-call svg{width:29px!important;height:29px!important}
.e8mm-trig .e8mm-openbtn svg{width:31px!important;height:31px!important}
.element8-sa-lp .pq-mark{display:none!important}
.page-digital-transformation #work .work-grid{grid-template-columns:1fr;gap:14px}
.page-digital-transformation #work .work-card,
.page-digital-transformation #work .work-card.tall,
.page-digital-transformation #work .work-card.wide{grid-column:span 1!important;aspect-ratio:4/3;min-width:0}
.page-digital-transformation #work .work-card .info{padding:14px 12px}
.page-digital-transformation #work .work-card .kind{font-size:8px;line-height:1.35;margin-bottom:5px}
.page-digital-transformation #work .work-card h4{font-size:clamp(16px,4.7vw,20px);line-height:1.05;letter-spacing:-.45px}
.page-digital-transformation #work .work-card .tag-pill{top:10px;left:10px;font-size:8px;padding:5px 7px}
.man-stats,.man-stats-four{grid-template-columns:repeat(2,1fr)!important;text-align:center;justify-items:center}
.man-stats .ms-lab{max-width:none!important;margin-left:auto;margin-right:auto}
.e8-clients .marquee{overflow:hidden;padding:0 12px!important}
.e8-clients .marquee-track{
display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;
animation:none!important;transform:none!important;width:100%!important;gap:8px!important;white-space:normal;
}
.e8-clients .mq-rev .marquee-track{animation:none!important;transform:none!important}
.e8-clients .marquee-item{
display:inline-flex!important;width:100%!important;height:94px!important;margin:0!important;min-width:0;
border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.025);border-radius:8px;
}
.e8-clients .marquee-item img{max-width:min(94px,82%)!important;max-height:62px!important}
.e8-clients .marquee-item:nth-child(n+10){display:none!important}
.wwd-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:16px}
.wwd-marquee .marquee-track{animation:none!important;width:max-content}
.wwd-marquee .marquee-track>*{scroll-snap-align:start}
.wwd-marquee .marquee-track>*:nth-child(n+7){display:none}
.mq-brands{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mq-brands .marquee-track{animation:none!important;width:max-content}
body.element8-sa-lp .pullquote{min-height:0!important;height:auto!important;padding:0!important;display:block!important;overflow:hidden!important}
body.element8-sa-lp .pq-stage{
height:auto!important;min-height:0!important;display:grid!important;
grid-template-rows:minmax(320px,38vh) minmax(450px,54vh);overflow:hidden!important;
}
body.element8-sa-lp .pq-inner{
grid-row:1;order:1;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;
}
body.element8-sa-lp .pq-body,
body.element8-sa-lp .pq-attrib{transform:none!important;opacity:1!important}
body.element8-sa-lp .pq-furry-frame{
position:relative!important;grid-row:2;order:2;align-self:center;
inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
width:min(260px,66vw)!important;height:auto!important;aspect-ratio:747 / 1247;
margin:0 auto!important;transform:none!important;opacity:.86!important;
}
}
/* ===== Shared bespoke CASE-STUDY components (used by /case-studies/*) ===== */
.am-wrap{overflow-x:hidden}
.am-hero{position:relative;padding:128px 0 40px;overflow:hidden}
.am-hero .container{position:relative;z-index:2}
.am-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.am-h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,7vw,82px);line-height:1;letter-spacing:-.03em;color:#fff;margin:14px 0 20px}
.am-h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.am-lede{max-width:660px;color:var(--mute);font-size:clamp(16px,2vw,20px);line-height:1.6}
.am-cta-row{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.am-hero-visual{margin-top:52px}
.am-hero-visual img{width:100%;max-width:1060px;display:block;margin:0 auto;filter:drop-shadow(0 40px 100px rgba(0,0,0,.55))}
.am-facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 0}
.am-facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.am-fact .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.am-fact .v{font-family:var(--display);font-size:21px;font-weight:600;color:#fff;margin-top:8px}
.am-sec{padding:64px 0}
.am-sec-head{max-width:720px}
.am-sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.5vw,46px);line-height:1.05;letter-spacing:-.025em;color:#fff;margin:12px 0 0}
.am-sec-head p{color:var(--mute);font-size:17px;line-height:1.7;margin-top:16px}
.am-challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.am-card{border:1px solid var(--line);border-radius:0;padding:28px;background:rgba(255,255,255,.02)}
.am-card h4{font-family:var(--display);color:#fff;font-size:18px;font-weight:600;margin:0 0 10px}
.am-card p{color:var(--mute);font-size:15px;line-height:1.6;margin:0}
.am-story{padding:44px 0}
.am-story .row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.am-story .row.rev .am-media{order:2}
.am-media img{width:100%;display:block;filter:drop-shadow(0 30px 70px rgba(0,0,0,.45))}
.am-story .am-num{font-family:var(--mono);color:var(--accent);font-size:13px;letter-spacing:.1em}
.am-story h3{font-family:var(--display);font-size:clamp(24px,3.4vw,34px);font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1.12;margin:12px 0 0}
.am-story p{color:var(--mute);font-size:16.5px;line-height:1.7;margin-top:14px}
.am-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.am-tags span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#d8d4dc;border:1px solid var(--line);border-radius:0;padding:6px 12px}
.am-results{padding:76px 0;text-align:center;background:#020204;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.am-results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:40px}
.am-stat .big{font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,66px);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.am-stat .lab{color:var(--mute);font-size:14px;margin-top:12px;max-width:220px;margin-left:auto;margin-right:auto;line-height:1.4}
.am-quote{padding:70px 0;text-align:center}
.am-quote blockquote{font-family:var(--display);font-weight:600;font-size:clamp(24px,4vw,40px);line-height:1.25;color:#fff;max-width:900px;margin:0 auto;letter-spacing:-.02em}
.am-quote .att{color:var(--mute);font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:24px}
.am-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.am-gallery-grid img{width:100%;display:block;border:1px solid var(--line)}
.am-next{padding:60px 0}
@media (max-width:860px){
.am-facts-grid,.am-results-grid{grid-template-columns:repeat(2,1fr)}
.am-challenge-grid,.am-gallery-grid{grid-template-columns:1fr}
.am-story .row{grid-template-columns:1fr;gap:24px}
.am-story .row .am-media{order:-1 !important}
}
@media (max-width:600px){
html,body{overflow-x:hidden !important;max-width:100% !important}
.am-hero{padding:96px 0 20px}
.am-facts-grid,.am-results-grid{grid-template-columns:1fr 1fr;text-align:center}
.am-stat .lab{max-width:none}
}
/* ===== Related case studies (quick-link nav at end of each case study) ===== */
.cs-related{padding:72px 0;border-top:1px solid var(--line);background:#020204}
.cs-related .cs-rel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cs-related h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,40px);line-height:1.05;letter-spacing:-.025em;color:#fff;margin:8px 0 0}
.cs-related .cs-rel-all{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-decoration:none;white-space:nowrap}
.cs-related .cs-rel-all:hover{color:#fff}
.cs-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.cs-rel-card{display:flex;flex-direction:column;border:1px solid var(--line);background:rgba(255,255,255,.02);text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.cs-rel-card:hover{transform:translateY(-6px);border-color:var(--accent)}
.cs-rel-thumb{aspect-ratio:16/10;overflow:hidden;background:#0a0a0c;border-bottom:1px solid var(--line)}
.cs-rel-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s ease}
.cs-rel-card:hover .cs-rel-thumb img{transform:scale(1.05)}
.cs-rel-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.cs-rel-cat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cs-rel-body h3{font-family:var(--display);font-size:20px;font-weight:600;color:#fff;margin:0;letter-spacing:-.01em}
.cs-rel-body p{color:var(--mute);font-size:14px;line-height:1.55;margin:0}
.cs-rel-go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#d8d4dc;display:inline-flex;align-items:center;gap:8px}
.cs-rel-card:hover .cs-rel-go{color:#fff}
.cs-rel-go svg{transition:transform .3s ease}
.cs-rel-card:hover .cs-rel-go svg{transform:translateX(4px)}
@media (max-width:860px){.cs-rel-grid{grid-template-columns:1fr}.cs-related{padding:52px 0}}
/* ===== Contact / Clients / Blog pages ===== */
.ct-hero,.cl-hero,.bl-hero{padding:128px 0 24px}
.ct-h1{font-family:var(--display);font-weight:500;font-size:clamp(44px,7vw,96px);line-height:.95;letter-spacing:-2.5px;color:#fff;margin:20px 0 36px;max-width:15ch}
.cl-h1,.bl-h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,72px);line-height:1.02;letter-spacing:-.03em;color:#fff;margin:14px 0 18px;max-width:14ch}
.ct-h1 em,.cl-h1 em,.bl-h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ct-lede{max-width:620px;color:rgba(255,255,255,.82);font-size:clamp(17px,1.4vw,21px);line-height:1.45;letter-spacing:-.5px;font-weight:500}
.cl-lede,.bl-lede{max-width:640px;color:var(--mute);font-size:clamp(16px,2vw,20px);line-height:1.6}
/* contact method cards */
.ct-methods{padding:32px 0 12px}
.ct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ct-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);background:rgba(255,255,255,.02);padding:26px 24px;text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
a.ct-card:hover{transform:translateY(-5px);border-color:var(--accent)}
.ct-card .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(238,102,173,.12);color:var(--accent);margin-bottom:8px}
.ct-card .ic svg{width:20px;height:20px}
.ct-card .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ct-card .v{font-family:var(--display);font-size:19px;font-weight:600;color:#fff;line-height:1.2}
.ct-card .s{color:var(--mute);font-size:13px}
/* office band */
.ct-officewrap{padding:clamp(56px,8vw,110px) 0;background:linear-gradient(115deg,#fdeee6 0%,#f9e9f1 48%,#efe9f9 100%)!important}
.ct-office{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,72px);align-items:center}
.ct-office .am-eyebrow{color:#150e14}
.ct-office h2{font-family:var(--display);font-weight:700;font-size:clamp(40px,5.6vw,68px);line-height:1.02;color:#150e14;letter-spacing:-.03em;margin:14px 0 18px}
.ct-office h2 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ct-office p{color:#4c4350;font-size:16.5px;line-height:1.7;max-width:58ch}
.ct-hours{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.ct-hours li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(21,14,20,.22);padding-bottom:13px;color:#241b28;font-size:15.5px}
.ct-hours li span:last-child{color:#8d8292}
.ct-map{position:relative;border:0;padding:0;min-height:0;background:none;border-radius:4px;overflow:hidden;box-shadow:0 34px 80px rgba(52,26,64,.28)}
.ct-map img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:1600/940}
.ct-map .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-92%);width:56px;height:56px;background:none;border-radius:0;box-shadow:none;display:block;filter:drop-shadow(0 10px 24px rgba(255,46,154,.45))}
.ct-map .pin svg{width:100%;height:100%}
.ct-map .addr{position:absolute;left:16px;bottom:14px;background:rgba(10,7,14,.72);backdrop-filter:blur(8px);padding:11px 16px;border-radius:6px;color:#fff;font-family:var(--display);font-size:14.5px;line-height:1.45}
.ct-map .addr span{display:block;color:rgba(255,255,255,.66);font-size:12px}
.ct-map .addr span{display:block;color:var(--mute);font-size:14px;font-family:var(--body,inherit);margin-top:6px}
/* about: vision, timeline, culture and careers — spacing comes from shared .section */
.e8-about-evolution{position:relative;background:#050507;color:#fff;border-top:1px solid var(--line);overflow:hidden}
.e8-about-evolution:before{content:"";position:absolute;width:560px;height:560px;right:-230px;top:4%;border-radius:50%;background:radial-gradient(circle,rgba(206,44,164,.12),transparent 68%);pointer-events:none}
.e8-vision-grid{display:block;max-width:960px}
.e8-vision-grid h2{font-size:clamp(35px,5vw,68px);line-height:1.02;letter-spacing:-.04em;margin:14px 0 0;max-width:900px}
.e8-vision-grid>p{max-width:780px;margin:28px 0 0;color:rgba(255,255,255,.7);font-size:17px;line-height:1.75}
.e8-journey{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(54px,7vw,90px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.e8-journey-card{position:relative;padding:40px 34px 46px;border-left:1px solid var(--line)}
.e8-journey-card:last-child{border-right:1px solid var(--line)}
.e8-journey-card:before{content:"";position:absolute;top:-5px;left:30px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 22px rgba(236,78,179,.7)}
.e8-journey-year{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.e8-journey-card h3{margin:22px 0 12px;font-family:var(--display);font-size:clamp(21px,2vw,28px);letter-spacing:-.02em}
.e8-journey-card p{margin:0;color:rgba(255,255,255,.62);font-size:15px;line-height:1.65}
.e8-about-culture{color:#151116;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1)}
.e8-culture-head{margin-top:0;max-width:720px}.e8-culture-head h2{margin:12px 0 0;font-size:clamp(34px,4.5vw,58px);letter-spacing:-.035em;color:#151116}
.e8-culture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.e8-culture-card{min-height:280px;padding:30px;border:1px solid rgba(18,13,18,.14);background:rgba(255,255,255,.5);transition:transform .35s ease,border-color .35s ease,background .35s ease}
.e8-culture-card:hover{transform:translateY(-6px);border-color:rgba(18,13,18,.35);background:#fff}
.e8-culture-card>span{font-family:var(--mono);font-size:11px;color:var(--accent)}
.e8-culture-card h3{margin:78px 0 12px;font-family:var(--display);font-size:26px;color:#151116}.e8-culture-card p{margin:0;color:#6c626a;font-size:15px;line-height:1.65}
.e8-careers-band{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:18px;padding:34px 38px;border:1px solid rgba(18,13,18,.16);background:linear-gradient(110deg,#fff,rgba(236,218,231,.72));color:#151116;text-decoration:none;transition:border-color .3s ease,transform .3s ease}
.e8-careers-band:hover{border-color:rgba(18,13,18,.42);transform:translateY(-3px)}.e8-careers-band small,.e8-careers-band strong{display:block}.e8-careers-band small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#b11d78}.e8-careers-band strong{margin-top:9px;font-family:var(--display);font-size:clamp(20px,2.5vw,30px);font-weight:600}
.e8-careers-action{display:flex;align-items:center;gap:11px;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:900px){.e8-vision-grid{grid-template-columns:1fr}.e8-journey,.e8-culture-grid{grid-template-columns:1fr}.e8-journey-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.e8-journey-card:last-child{border-bottom:0}.e8-culture-card{min-height:auto}.e8-culture-card h3{margin-top:42px}}
@media(max-width:600px){.e8-vision-grid{gap:25px}.e8-journey-card{padding:32px 24px 36px}.e8-careers-band{align-items:flex-start;flex-direction:column;padding:28px 24px}.e8-careers-action{white-space:normal}}
/* clients */
.cl-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0;margin-top:20px}
.cl-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.cl-stat .n{font-family:var(--display);font-weight:700;font-size:clamp(32px,5vw,52px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.cl-stat .l{color:var(--mute);font-size:14px;margin-top:10px}
.cl-logos{padding:64px 0 24px}
.cl-logos h2,.cl-testi h2,.cl-inds h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,42px);color:#fff;letter-spacing:-.02em;margin:10px 0 0}
.cl-logo-grid{margin-top:36px}
.cl-featured-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.cl-featured-logo,.cl-roster-logo{position:relative;isolation:isolate;overflow:hidden;background:#050507;display:grid;place-items:center;text-align:center}
.cl-featured-logo,.cl-roster-logo{min-height:176px;padding:30px 22px}
.cl-logo-grid img{position:relative;z-index:2;width:auto;object-fit:contain;filter:none;opacity:.9;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),filter .35s ease}
.cl-featured-logo img,.cl-roster-logo img{max-width:78%;max-height:66px}
.cl-logo-name{position:absolute;z-index:3;left:16px;right:16px;bottom:13px;color:rgba(255,255,255,.42);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(5px);transition:.3s ease}
.cl-logo-glow{position:absolute;z-index:1;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(235,63,186,.2),transparent 68%);opacity:0;transform:scale(.65);transition:.45s ease;pointer-events:none}
.cl-featured-logo:hover img,.cl-roster-logo:hover img{opacity:1;transform:translateY(-5px) scale(1.06);filter:none}
.cl-featured-logo:hover .cl-logo-name,.cl-roster-logo:hover .cl-logo-name{opacity:1;transform:none}
.cl-featured-logo:hover .cl-logo-glow,.cl-roster-logo:hover .cl-logo-glow{opacity:1;transform:scale(1)}
.cl-wall-quote{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;margin:1px 0;padding:clamp(34px,5vw,64px);overflow:hidden;background:linear-gradient(130deg,#f4eef2 0%,#fff 55%,#eadde7 100%);color:#120d12}
.cl-wall-quote-mark{position:absolute;right:31%;top:-60px;font-family:Georgia,serif;font-size:260px;line-height:1;color:rgba(188,25,129,.08);pointer-events:none}
.cl-wall-quote blockquote{grid-column:1;margin:0;max-width:820px;font-family:var(--display);font-weight:650;font-size:clamp(24px,3.3vw,43px);line-height:1.12;letter-spacing:-.03em}
.cl-wall-who{grid-column:1;display:flex;align-items:center;gap:13px;margin-top:2px}.cl-wall-who img{width:48px;height:48px;max-width:none;object-fit:cover;border-radius:50%;filter:none;opacity:1}
.cl-wall-who strong,.cl-wall-who span{display:block}.cl-wall-who strong{font-size:14px}.cl-wall-who span{margin-top:3px;color:#6f626c;font-size:12px}
.cl-wall-quote-side{grid-column:2;grid-row:1/3;align-self:end;padding:24px 0 2px 28px;border-left:1px solid rgba(18,13,18,.16)}
.cl-wall-quote-side p{margin:0;font-family:var(--display);font-size:24px;line-height:1.18;font-weight:600}.cl-wall-quote-side span{display:block;margin-top:12px;color:#6f626c;font-size:12px}
.cl-roster-head{display:flex;justify-content:space-between;gap:20px;margin:48px 0 14px;color:var(--mute);font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.cl-roster-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.cl-roster-logo{min-height:112px;padding:22px 15px}.cl-roster-logo img{max-width:76%;max-height:43px}.cl-roster-logo .cl-logo-name{bottom:8px;font-size:8px}
.cl-logo-note{margin:18px 0 0;color:var(--mute);font-size:14px;text-align:center}
.cl-testi{padding:52px 0}
.cl-inds{padding:24px 0 64px}
.cl-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cl-chips span{border:1px solid var(--line);border-radius:0;padding:12px 20px;color:#d8d4dc;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
/* blog */
.bl-list{padding:40px 0 64px}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px}
.bl-card{display:flex;flex-direction:column;border:1px solid var(--line);background:rgba(255,255,255,.02);overflow:hidden}
.bl-card .thumb{aspect-ratio:16/9;background:#0a0708;position:relative;overflow:hidden}
.bl-card .thumb .g{position:absolute;inset:0;opacity:.9}
.bl-card .thumb .soon{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);padding:5px 10px}
.bl-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.bl-cat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.bl-body h3{font-family:var(--display);font-size:21px;font-weight:600;color:#fff;margin:0;line-height:1.15;letter-spacing:-.01em}
.bl-body p{color:var(--mute);font-size:14.5px;line-height:1.55;margin:0}
.bl-body .meta{margin-top:auto;padding-top:8px;color:var(--mute);font-family:var(--mono);font-size:12px}
.bl-feature{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--line);margin-top:36px;background:rgba(255,255,255,.02)}
.bl-feature .fthumb{position:relative;min-height:320px;overflow:hidden}
.bl-feature .fbody{padding:44px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.bl-feature .fbody h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,36px);color:#fff;letter-spacing:-.02em;margin:0;line-height:1.1}
.bl-feature .fbody p{color:var(--mute);font-size:16px;line-height:1.7;margin:0}
@media (max-width:860px){
.ct-grid{grid-template-columns:1fr 1fr}
.ct-office{grid-template-columns:1fr;gap:28px}
.cl-stats-grid{grid-template-columns:1fr 1fr}
.cl-featured-grid{grid-template-columns:repeat(3,1fr)}
.cl-roster-grid{grid-template-columns:repeat(3,1fr)}
.cl-wall-quote{grid-template-columns:1fr}.cl-wall-quote-side{grid-column:1;grid-row:auto;border-left:0;border-top:1px solid rgba(18,13,18,.16);padding:22px 0 0}
.bl-grid{grid-template-columns:1fr}
.bl-feature{grid-template-columns:1fr}
.bl-feature .fthumb{min-height:200px}
}
@media (max-width:600px){
.ct-hero,.cl-hero,.bl-hero{padding:96px 0 16px}
.ct-h1{font-size:clamp(34px,11vw,52px);line-height:1;letter-spacing:-1.2px;margin-bottom:24px}
.ct-grid{grid-template-columns:1fr}
.cl-featured-grid,.cl-roster-grid{grid-template-columns:repeat(2,1fr)}
.cl-featured-logo{min-height:132px;padding:22px 12px}.cl-featured-logo img{max-height:48px}
.cl-wall-quote{padding:32px 24px}.cl-wall-quote-side p{font-size:20px}.cl-roster-head span:last-child{display:none}
}
/* ===== Blog detail (article) page ===== */
.bp-wrap{overflow-x:hidden}
.bp-hero{padding:120px 0 8px}
.bp-hero .container,.bp-body,.bp-share{max-width:820px;margin-left:auto;margin-right:auto}
.bp-cat{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.bp-title{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,56px);line-height:1.05;letter-spacing:-.03em;color:#fff;margin:14px 0 20px}
.bp-meta{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:14px;flex-wrap:wrap}
.bp-meta .author{display:flex;align-items:center;gap:10px;color:#d8d4dc;font-weight:500}
.bp-meta .author .ava{width:34px;height:34px;border-radius:50%;background:var(--grad);display:inline-block}
.bp-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--mute);display:inline-block}
.bp-banner{max-width:1000px;margin:34px auto 0;aspect-ratio:16/5.5;position:relative;overflow:hidden;border:1px solid var(--line)}
.bp-banner .g{position:absolute;inset:0}
.bp-banner .bp-badge{position:absolute;left:22px;bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.28);padding:7px 13px}
.bp-body{padding:42px 0 8px}
.bp-body p{color:#c9c4cf;font-size:17.5px;line-height:1.82;margin:0 0 22px}
.bp-body p.bp-lead{font-size:20px;color:#e7e3ec;line-height:1.7}
.bp-body h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,3vw,31px);color:#fff;letter-spacing:-.02em;margin:42px 0 14px;line-height:1.2}
.bp-body h3{font-family:var(--display);font-weight:600;font-size:20px;color:#fff;margin:28px 0 10px}
.bp-body ul{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.bp-body ul li{position:relative;padding-left:26px;color:#c9c4cf;font-size:16.5px;line-height:1.7}
.bp-body ul li::before{content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;background:var(--grad);border-radius:50%}
.bp-body blockquote{margin:34px 0;padding:8px 0 8px 26px;border-left:3px solid var(--accent);font-family:var(--display);font-size:clamp(20px,2.6vw,27px);line-height:1.35;color:#fff;font-weight:500}
.bp-body strong{color:#fff;font-weight:600}
.bp-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.bp-share{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px}
.bp-share .lbl{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.bp-share .links{display:flex;gap:10px}
.bp-share a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#d8d4dc;transition:border-color .3s,color .3s}
.bp-share a:hover{border-color:var(--accent);color:#fff}
.bp-share a svg{width:17px;height:17px}
@media (max-width:600px){.bp-hero{padding:96px 0 4px}.bp-body p{font-size:16.5px}}
/* blog index cards as links */
a.bl-card{text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
a.bl-card:hover{transform:translateY(-6px);border-color:var(--accent)}
a.bl-feature{transition:border-color .35s}
a.bl-feature:hover{border-color:var(--accent)}
a.bl-feature .fbody .cs-rel-go svg{transition:transform .3s}
a.bl-feature:hover .fbody .cs-rel-go svg{transform:translateX(4px)}
/* ===== About — Values (numbered editorial list) ===== */
.e8-values{margin-top:46px;border-top:1px solid var(--line)}
.e8-value-row{display:grid;grid-template-columns:118px 1fr;gap:34px;align-items:center;padding:32px 0;border-bottom:1px solid var(--line);position:relative;transition:padding-left .4s cubic-bezier(.2,.7,.2,1)}
.e8-value-row:hover{padding-left:16px}
.e8-value-num{font-family:var(--display);font-weight:700;font-size:58px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.26);transition:all .4s}
.e8-value-row:hover .e8-value-num{-webkit-text-stroke:1px transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.e8-value-body h3{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.5vw,29px);color:#fff;letter-spacing:-.02em;margin:0 0 9px;line-height:1.12}
.e8-value-body p{color:var(--mute);font-size:16.5px;line-height:1.7;margin:0;max-width:48ch}
@media(max-width:860px){
.e8-value-row{grid-template-columns:60px 1fr;gap:12px 16px;align-items:start;padding:26px 0}
.e8-value-num{font-size:34px}
.e8-value-body{grid-column:2}
.e8-value-row:hover{padding-left:0}
}
/* blog banner + card images */
.bp-banner-img{width:100%;height:100%;object-fit:cover;display:block}
.bl-card .thumb img{display:block}
.bl-feature .fthumb img{display:block}
/* ===== Redesigned mega footer ===== */
.mega-foot{display:grid;grid-template-columns:1.35fr 3fr;gap:48px;padding:30px 0 14px;border-top:0;margin-top:0}
.mega-brand{max-width:360px}
.mega-brand .logo{display:inline-block}
.mega-brand p{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.7;margin:18px 0 18px}
.mega-brand .foot-socials{margin-top:4px}
.mega-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;border:1px solid var(--line);padding:11px 18px;text-decoration:none;transition:border-color .3s,background .3s;margin-top:20px}
.mega-cta:hover{border-color:var(--accent);background:rgba(238,102,173,.08)}
.mega-cta svg{width:13px;height:13px}
.mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.mega-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 16px;opacity:.92}
.mega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.mega-col a{color:var(--mute);font-size:14px;text-decoration:none;transition:color .25s}
.mega-col a:hover{color:#fff}
.mega-contact address{color:rgba(255,255,255,.66);font-size:13.5px;line-height:1.65;font-style:normal;font-weight:500;margin-top:16px}
@media(max-width:980px){
.mega-foot{grid-template-columns:1fr;gap:36px}
.mega-cols{grid-template-columns:repeat(3,1fr);gap:28px 20px}
}
@media(max-width:600px){
.mega-cols{grid-template-columns:repeat(2,1fr)}
.mega-brand{max-width:none}
}
/* Shared action language: sharp corners across page and navigation CTAs. */
.btn,
.nav-cta,
.mega-cta,
.form-submit,
.e8mm-cta,
.mobile-menu .mobile-cta,
.mobile-contact-bar,
.mobile-contact-bar a,
a[class*="btn-"],
button[class*="btn-"]{
border-radius:0!important;
}
/* Reusable sticky feature rail — sticky editorial copy + scrolling feature cards. */
.e8-sticky-feature-rail{position:relative;background:#0b0a0d;color:#fff}
body.element8-sa-lp.page-whatsapp-business-ai{overflow:visible!important}
.e8-sfr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.e8-sfr-copy{position:sticky;top:0;min-height:100vh;padding:clamp(110px,13vh,160px) clamp(44px,6vw,96px) clamp(70px,9vh,110px) 0;display:flex;flex-direction:column;justify-content:center}
.e8-sfr-eyebrow{color:rgba(255,255,255,.56);margin-bottom:26px}
.e8-sfr-heading{max-width:700px;color:#fff;font-size:clamp(54px,5.7vw,94px);line-height:.88;letter-spacing:-.062em}
.e8-sfr-intro{max-width:590px;margin:30px 0 0;color:rgba(255,255,255,.66);font-size:clamp(17px,1.45vw,21px);line-height:1.55}
.e8-sfr-cta{align-self:flex-start;margin-top:38px}
.e8-sfr-list{list-style:none;margin:0;padding:clamp(82px,10vh,124px) clamp(24px,3.5vw,52px);background:transparent;color:#fff;counter-reset:e8-sfr}
.e8-sfr-item{min-height:clamp(430px,56vh,610px);padding:clamp(46px,5vw,76px);margin:0 0 clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center;background:#ff7865;box-shadow:0 28px 70px rgba(73,35,48,.1)}
.e8-sfr-item:nth-child(3n+2){background:#da62db}
.e8-sfr-item:nth-child(3n){background:#7558f2}
.e8-sfr-item:last-child{margin-bottom:0}
.e8-sfr-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px}
.e8-sfr-icon{width:96px;height:96px;display:grid;place-items:center;background:rgba(255,255,255,.11)}
.e8-sfr-icon svg{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.e8-sfr-number{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.58)}
.e8-sfr-item h3{max-width:570px;margin:0;font-family:var(--display);font-size:clamp(38px,4vw,62px);font-weight:500;line-height:.96;letter-spacing:-.052em;color:#fff}
.e8-sfr-item>p{max-width:590px;margin:22px 0 0;font-size:clamp(17px,1.35vw,20px);line-height:1.52;color:rgba(255,255,255,.82)}
.e8-sfr-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:27px}
.e8-sfr-tags span{padding:7px 0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.e8-sfr-tags span+span::before{content:"·";margin-right:9px;color:rgba(255,255,255,.42)}
@media(max-width:940px){.e8-sfr-grid{grid-template-columns:1fr}.e8-sfr-copy{position:relative;min-height:auto;padding:92px 0 74px}.e8-sfr-heading{font-size:clamp(48px,10vw,78px)}.e8-sfr-list{margin-inline:calc(50% - 50vw);padding:54px max(24px,calc((100vw - var(--container,1320px))/2))}.e8-sfr-item{min-height:auto;padding:clamp(42px,7vw,64px);margin-bottom:26px}.e8-sfr-item h3{font-size:clamp(36px,7vw,55px)}}
@media(max-width:560px){.e8-sfr-copy{padding:76px 0 62px}.e8-sfr-intro{margin-top:22px;font-size:16px}.e8-sfr-cta{margin-top:30px}.e8-sfr-list{padding:28px 14px}.e8-sfr-item{padding:38px 26px 42px;margin-bottom:14px;box-shadow:none}.e8-sfr-item-top{margin-bottom:25px}.e8-sfr-icon{width:78px;height:78px}.e8-sfr-icon svg{width:46px;height:46px}.e8-sfr-item>p{font-size:16px}.e8-sfr-tags{margin-top:22px}}
@media(prefers-reduced-motion:reduce){.e8-sfr-copy{position:relative;min-height:auto}}
/* WhatsApp hero — layered editorial operating channel (selected concept 2). */
.page-whatsapp-business-ai .is-retired-hero{display:none!important}
.page-whatsapp-business-ai .nav:not(.scrolled) .nav-links{color:rgba(10,10,10,.74)}
.page-whatsapp-business-ai .nav:not(.scrolled) .nav-links a:hover{color:#000}
.page-whatsapp-business-ai .nav:not(.scrolled) .nav-cta{background:#0a0a0a;color:#fff}
.page-whatsapp-business-ai .nav:not(.scrolled) .logo img{filter:invert(1)}
.page-whatsapp-business-ai .nav:not(.scrolled) .burger{border-color:rgba(0,0,0,.2)}
.page-whatsapp-business-ai .nav:not(.scrolled) .burger span,.page-whatsapp-business-ai .nav:not(.scrolled) .burger span::before,.page-whatsapp-business-ai .nav:not(.scrolled) .burger span::after{background:#111}
.e8-editorial-hero{position:relative;isolation:isolate;min-height:clamp(800px,100vh,1040px);overflow:hidden;background:#f5f0e9;color:#090909}
.e8eh-fields{position:absolute;z-index:-2;inset:0 0 0 40.5%;display:grid;grid-template-columns:repeat(3,1fr)}
.e8eh-field{position:relative;padding:112px 28px 40px;overflow:hidden;animation:e8ehFieldIn 1s cubic-bezier(.2,.7,.2,1) both}
.e8eh-field::before{content:"";position:absolute;top:116px;left:28px;right:28px;height:1px;background:rgba(44,14,28,.24)}
.e8eh-field::after{content:"→";position:absolute;top:99px;right:28px;font-size:24px;color:rgba(44,14,28,.32)}
.e8eh-field-support{background:#ff7865;animation-delay:.05s}
.e8eh-field-brief{background:#da62db;animation-delay:.13s}
.e8eh-field-alert{background:#7558f2;animation-delay:.21s}
.e8eh-field>span{display:block;margin-top:26px;font-family:var(--display);font-size:clamp(44px,4.5vw,76px);font-weight:650;line-height:.78;letter-spacing:-.065em;text-transform:uppercase;color:rgba(55,10,38,.35)}
.e8eh-field>small{display:block;margin-top:22px;font-family:var(--mono);font-size:10px;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;color:rgba(55,10,38,.42)}
@keyframes e8ehFieldIn{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.e8eh-content{position:relative;z-index:4;min-height:inherit;display:flex;align-items:flex-start;padding-top:clamp(235px,25vh,270px);padding-bottom:clamp(64px,7vh,90px)}
.e8eh-copy{width:min(62vw,920px)}
.e8eh-eyebrow{display:block;margin-bottom:24px;color:rgba(0,0,0,.55)}
.e8eh-title{margin:0;font-family:var(--display);font-size:clamp(72px,9.2vw,150px);font-weight:550;line-height:.78;letter-spacing:-.072em;color:#080808}
.e8eh-title span{display:block;width:max-content;max-width:100%;animation:e8ehTitleIn .95s cubic-bezier(.2,.75,.2,1) both}
.e8eh-title span:nth-child(2){animation-delay:.08s}.e8eh-title span:nth-child(3){animation-delay:.16s}.e8eh-title span:nth-child(4){animation-delay:.24s}
@keyframes e8ehTitleIn{from{opacity:0;transform:translateY(75%) skewY(4deg)}to{opacity:1;transform:none}}
.e8eh-copy>p{max-width:480px;margin:34px 0 0;font-size:clamp(18px,1.55vw,23px);line-height:1.35;letter-spacing:-.035em;color:#242024}
.e8eh-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px}
.e8eh-actions .btn{min-height:56px;padding:16px 25px;justify-content:center}
.e8eh-actions .btn-primary{background:#090909;color:#fff}
.e8eh-actions .btn-primary:hover{background:#242024}
.e8eh-actions .btn-outline{border:1px solid rgba(0,0,0,.55);color:#111;background:rgba(255,255,255,.16)}
.e8eh-actions .btn-outline:hover{background:#fff;border-color:#111}
.e8eh-visual{position:absolute;z-index:3;right:-42%;bottom:-8%;width:min(120vw,1720px);pointer-events:none;animation:e8ehAstroIn 1.4s cubic-bezier(.15,.72,.2,1) .28s both}
.e8eh-visual img{display:block;width:100%;height:auto;filter:drop-shadow(-24px 42px 42px rgba(39,10,44,.26));animation:e8ehAstroFloat 8s ease-in-out 1.7s infinite alternate}
@keyframes e8ehAstroIn{from{opacity:0;transform:translate(18%,12%) rotate(8deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes e8ehAstroFloat{to{transform:translate(-2%,-2.5%) rotate(2deg)}}
.e8eh-ribbons{position:absolute;z-index:5;left:40.5%;right:-7%;bottom:12%;display:grid;gap:22px;transform:rotate(4deg);pointer-events:none}
.e8eh-ribbon{display:flex;width:max-content;min-width:118%;gap:44px;padding:10px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.035em;text-transform:uppercase;color:rgba(255,255,255,.84);background:rgba(116,48,211,.58);backdrop-filter:blur(5px);animation:e8ehRibbon 22s linear infinite}
.e8eh-ribbon span::after{content:" →";margin-left:20px;color:rgba(255,255,255,.65)}
.e8eh-ribbon.ribbon-two{margin-left:-8%;background:rgba(116,70,232,.7);animation-direction:reverse;animation-duration:27s}
@keyframes e8ehRibbon{to{transform:translateX(-18%)}}
@media(max-width:1100px){.e8eh-fields{left:48%}.e8eh-copy{width:min(66vw,760px)}.e8eh-title{font-size:clamp(70px,9vw,108px)}.e8eh-visual{right:-45%;width:min(130vw,1420px)}.e8eh-ribbons{left:45%}}
@media(max-width:760px){
.e8-editorial-hero{min-height:980px;padding-top:80px}
.e8eh-fields{inset:0;grid-template-columns:repeat(3,1fr);height:48%;opacity:.94}
.e8eh-field{padding:84px 12px 20px}.e8eh-field::before{top:92px;left:12px;right:12px}.e8eh-field::after{top:80px;right:12px;font-size:18px}
.e8eh-field>span{margin-top:20px;font-size:clamp(25px,8.5vw,42px)}.e8eh-field>small{display:none}
.e8eh-content{align-items:flex-start;padding-top:310px;padding-bottom:36px}
.e8eh-copy{width:100%}.e8eh-eyebrow{font-size:10px;margin-bottom:18px}
.e8eh-title{font-size:clamp(54px,16vw,76px);line-height:.82;letter-spacing:-.068em}.e8eh-title span{width:auto}
.e8eh-copy>p{max-width:330px;margin-top:24px;font-size:17px}
.e8eh-actions{margin-top:26px;gap:10px}.e8eh-actions .btn{width:100%;min-height:50px;padding:14px 18px}
.e8eh-actions .btn-outline{background:#f5f0e9}
.e8eh-visual{z-index:2;right:-34%;bottom:-1%;width:720px;opacity:.86}
.e8eh-ribbons{left:-8%;right:-18%;bottom:11%;gap:12px;transform:rotate(5deg)}
.e8eh-ribbon{font-size:9px;gap:20px;padding:8px 12px}
}
@media(max-width:420px){.e8-editorial-hero{min-height:1010px}.e8eh-content{padding-top:292px}.e8eh-title{font-size:55px}.e8eh-visual{width:660px;right:-47%;bottom:0}.e8eh-ribbons{bottom:10%}}
@media(prefers-reduced-motion:reduce){.e8eh-field,.e8eh-title span,.e8eh-visual,.e8eh-visual img,.e8eh-ribbon{animation:none!important}}
/* ==========================================================================
BRAND FONTS ONLY — Gilroy / Metropolis / Cairo (colours & shapes unchanged)
Applied to the ORIGINAL (heat) theme so both themes share the brand type;
only the colour palette differs between them.
========================================================================== */
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/metropolis-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/metropolis-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/metropolis-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/metropolis-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/cairo-semibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
:root{
--display:'Gilroy','Poppins','Cairo',Arial,sans-serif !important;
--body:'Gilroy','Poppins','Cairo',system-ui,sans-serif !important;
--secondary:'Metropolis','Montserrat','Cairo',Arial,sans-serif !important;
--mono:'Metropolis','Montserrat',Arial,sans-serif !important;
}
body{font-family:var(--body) !important}
body,p,li,a,span,div,td,th,blockquote,figcaption,address,
input,textarea,select,button,
.btn,.btn-primary,.btn-link,.nav-cta,.mm-cta,.form-submit,.field label,.form-note,.nav-links a,.foot-legal-link{
font-family:var(--body) !important;
}
.eyebrow,.am-eyebrow,.section-eyebrow,.e8x-kicker,.mega-col h4,[class*="eyebrow"]{
font-family:var(--secondary) !important;
}
/* ===== Nav + hero legibility over the full-bleed banner ===== */
.nav:not(.scrolled)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,0) 100%)}
.nav-links{color:rgba(255,255,255,.92)}
.nav-links a{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero-v2 .eyebrow,.hx-lede,.hx-pitch .eyebrow{text-shadow:0 2px 20px rgba(0,0,0,.55)}
/* ==========================================================================
ELEMENT8.AE BRAND SKIN — appended override for the "E8 Intelligence — Brand" theme
Extracted from www.element8.ae. Retunes the shared design tokens (fonts,
gradient, accent, radii, surfaces) so the existing layout reads in the
element8.ae brand. Real Gilroy/Metropolis load from element8.ae with
Poppins/Montserrat (Google) as reliable fallbacks.
========================================================================== */
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url('../fonts/gilroy-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/metropolis-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/metropolis-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/metropolis-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('../fonts/metropolis-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/cairo-semibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
:root{
/* Typography (Gilroy/Metropolis first, Poppins/Montserrat Google fallback) */
--display:'Gilroy','Poppins','Cairo',Arial,sans-serif !important;
--body:'Gilroy','Poppins','Cairo',Arial,sans-serif !important;
--secondary:'Metropolis','Montserrat','Cairo',Arial,sans-serif !important;
--mono:'Metropolis','Montserrat',Arial,sans-serif !important;
/* Signature element8.ae gradient: pink -> white -> periwinkle */
--grad:linear-gradient(103deg,#EE66AD 0%,#FFFFFF 40%,#758EF8 100%) !important;
--grad-2:linear-gradient(90deg,#EE66AD 0%,#FFFFFF 50%,#758EF8 100%) !important;
--grad-hover:linear-gradient(90deg,#758EF8 0%,#FFFFFF 50%,#EE66AD 100%) !important;
--grad-accent:linear-gradient(135deg,#AE34FF 0%,#F29DD5 50%,#FF5392 100%) !important;
--accent:#EE66AD !important;
--accent-2:#758EF8 !important;
--accent-glow:rgba(238,102,173,.34) !important;
/* Surfaces & text */
--ink-2:#1a1a1a; --navy:#121526;
--text-secondary:#d3d3d3; --mute:#6d6d6d; --mute-2:#666666;
--line:rgba(255,255,255,.10) !important;
--bg-soft:#1a1a1a; --bg-paper:#121526;
/* Rounder shapes (element8.ae) */
--radius:16px !important;
--radius-md:20px !important;
--radius-lg:25px !important;
--radius-pill:100px !important;
}
/* Base surface + typography */
body{background:#000 !important;color:#fff;font-family:var(--body) !important;letter-spacing:normal !important}
/* Force the brand fonts onto the few hard-coded Inter spots (nav, buttons, forms) */
body,p,li,a,span,div,td,th,blockquote,figcaption,address,
input,textarea,select,button,
.btn,.btn-primary,.btn-link,.nav-cta,.mm-cta,.form-submit,.field label,.form-note,.nav-links a,.foot-legal-link{
font-family:var(--body) !important;
}
/* Metropolis for uppercase labels / eyebrows / meta (was Roboto Mono) */
.eyebrow,.am-eyebrow,.section-eyebrow,.e8x-kicker,.mega-col h4,[class*="eyebrow"]{
font-family:var(--secondary) !important;
}
/* One button style: outlined white pill, invert on hover (keeps existing sizing/padding) */
.btn-primary,.nav-cta,.mm-cta{
background:transparent !important;
border:1px solid #ffffff !important;
color:#ffffff !important;
border-radius:var(--radius-pill) !important;
}
.btn-primary:hover,.nav-cta:hover,.mm-cta:hover{
background:#ffffff !important;
color:#000000 !important;
}
.btn-link{border-radius:var(--radius-pill) !important}
/* Proposal WhatsApp CTA: keep a complete outline at rest and use a clean
filled hover state. Override the generic gradient-text hover treatment so
the label always remains above and readable against the button surface. */
.element8-sa-lp #proposal .btn-link,
.element8-sa-lp .urg-cta-actions .btn-link{
position:relative;
isolation:isolate;
padding:15px 25px;
border:1px solid #fff;
background:transparent !important;
background-clip:border-box !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
transition:transform .2s ease,background-color .2s ease,color .2s ease;
}
.element8-sa-lp .urg-cta-actions .urg-or{
color:rgba(255,255,255,.62);
font-family:var(--mono);
font-size:12px;
line-height:1;
letter-spacing:.08em;
text-transform:uppercase;
}
/* Secondary actions on light content bands need the inverse of the global
white-on-dark link button treatment. */
.element8-sa-lp .section.light .btn-link,
.element8-sa-lp .visual-proof .btn-link{
padding:15px 25px;
border:1px solid #111 !important;
background:transparent !important;
background-clip:border-box !important;
color:#111 !important;
-webkit-text-fill-color:#111 !important;
}
.element8-sa-lp .section.light .btn-link:hover,
.element8-sa-lp .visual-proof .btn-link:hover{
border-color:#111 !important;
background:#111 !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
/* Careers secondary actions sit on dark bands: show the complete outline
before hover rather than the generic underline-only link treatment. */
.element8-sa-lp.page-careers .btn-link{
padding:15px 25px;
border:1px solid #fff !important;
background:transparent !important;
background-clip:border-box !important;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
}
.element8-sa-lp.page-careers .btn-link:hover{
border-color:#fff !important;
background:#fff !important;
color:#111 !important;
-webkit-text-fill-color:#111 !important;
}
.element8-sa-lp #proposal .btn-link:hover,
.element8-sa-lp .urg-cta-actions .btn-link:hover{
border-color:#fff;
background:#fff !important;
color:#000 !important;
-webkit-text-fill-color:#000 !important;
transform:translateY(-2px);
}
/* Cards / panels a touch rounder */
.card,.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-lg)}
/* ===== Home redesign 2026-07: What-we-do photo cards ===== */
.wwd-photos-marquee{margin-top:46px;overflow:hidden}
.element8-sa-lp.gradient-linear-heat .wwd-photos-marquee{background:transparent!important;border:0!important}
.wwd-photos-marquee::before,.wwd-photos-marquee::after{display:none!important}
.wwd-photos-marquee .marquee-track{gap:26px;animation-duration:56s}
.wwdp-card{position:relative;display:block;flex:none;width:min(30vw,430px);aspect-ratio:1/1.02;overflow:hidden;border-radius:0}
.wwdp-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.wwdp-card:hover img{transform:scale(1.045)}
.wwdp-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.68))}
.wwdp-card h3{position:absolute;left:26px;bottom:20px;right:26px;margin:0;color:#fff;font-size:24px;font-weight:600;line-height:1.25}
.element8-sa-lp .e8-decision-section{position:relative;z-index:2;overflow:visible;border-top:1px solid var(--line)}
.e8-objf{position:absolute;top:-190px;right:calc(max(2vw,(100vw - 1560px)/2));width:min(40vw,700px);pointer-events:none;z-index:3;will-change:transform}
.e8-object-play-img{width:100%;height:auto;display:block;mix-blend-mode:screen;animation:e8float 5.5s ease-in-out infinite}
.e8-values-container{position:relative}
.e8-values-objf{top:-230px;width:min(25.6vw,400px);right:calc(-1 * clamp(20px,3vw,64px));opacity:.96}
.e8-values-objf.is-pinned{position:fixed;top:var(--e8-values-pin,84px);right:calc(max(2vw,(100vw - 1320px)/2) - clamp(20px,3vw,64px))}
.e8-values-objf.is-parked{top:auto}
.e8-values-objf .e8-object-play-img{mix-blend-mode:normal}
@keyframes e8float{0%,100%{transform:translateY(-16px) translateX(6px) rotate(-2deg)}50%{transform:translateY(16px) translateX(-6px) rotate(2.2deg)}}
@media(prefers-reduced-motion:reduce){.e8-object-play-img{animation:none}}
@media(max-width:900px){.wwdp-card{width:78vw;aspect-ratio:4/3}.e8-objf{width:64vw;top:-70px}}
@media(max-width:900px){.e8-values-objf{width:46.4vw;top:-145px;right:-8px}}
/* ===== Home redesign: E8 Intelligence spotlight photo ===== */
.vp-photo{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 30px 70px -25px rgba(20,10,40,.35)}
/* ===== Home redesign: Team & values (icon rows + photo) ===== */
.e8tv-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:stretch;margin-top:6px}
.e8tv-list{display:flex;flex-direction:column}
.e8tv-row{display:flex;gap:34px;align-items:center;padding:26px 0;border-top:1px solid rgba(255,255,255,.1)}
.e8tv-row:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.e8tv-icon{width:88px;height:88px;object-fit:contain;flex:none;mix-blend-mode:screen;margin:0}
.e8tv-txt h3{margin:8px 0 10px;font-size:26px;font-weight:500;color:#fff}
.e8tv-txt p{margin:0;color:rgba(255,255,255,.72);font-size:16px;line-height:1.6;max-width:56ch}
.e8tv-photo{margin:0;height:100%;min-height:0}
.e8tv-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;border-radius:4px}
@media(max-width:900px){.e8tv-grid{grid-template-columns:1fr;gap:34px}.e8tv-photo{height:auto;max-height:440px;overflow:hidden;border-radius:4px}.e8tv-photo img{height:100%}.e8tv-icon{width:72px;height:72px;margin:0}.e8tv-txt h3{font-size:21px}}
/* About: credentials use the Home team-and-values row/photo template. */
.e8-credentials-values .e8tv-grid{align-items:start}
.e8-credentials-values .e8tv-row{gap:24px;padding:15px 0}
.e8-credentials-values .e8tv-icon{width:78px;height:78px;margin:0;padding:0;mix-blend-mode:normal;background:transparent;border:0;border-radius:0}
.e8-credentials-values .e8tv-txt h3{margin:0 0 5px;font-size:23px}
.e8-credentials-values .e8tv-txt p{line-height:1.48}
.e8-credentials-values .e8tv-photo{position:sticky;top:110px;height:min(78vh,900px)}
.e8-credentials-values .e8tv-photo img{border-radius:0}
@media(max-width:900px){.e8-credentials-values .e8tv-photo{position:static;height:auto;border-radius:0}.e8-credentials-values .e8tv-row{gap:18px;padding:13px 0}.e8-credentials-values .e8tv-icon{width:64px;height:64px}.e8-credentials-values .e8tv-txt h3{font-size:20px}}
/* Home redesign: play object prominent */
.e8-objf{opacity:.96}
/* ===== Home redesign: E8 Intelligence spotlight — light theme ===== */
.element8-sa-lp.gradient-linear-heat .visual-proof{background:linear-gradient(115deg,#fdeee6 0%,#f9e8ee 48%,#e9e6f5 100%)!important}
.element8-sa-lp.gradient-linear-heat .visual-proof::before{display:none!important}
.element8-sa-lp.gradient-linear-heat .visual-proof .eyebrow,
.element8-sa-lp.gradient-linear-heat .visual-proof .section-eyebrow{color:#6b6470!important}
.element8-sa-lp.gradient-linear-heat .visual-proof h2.display{color:#171321}
.element8-sa-lp.gradient-linear-heat .visual-proof .vp-copy p{color:#4b4552}
.element8-sa-lp.gradient-linear-heat .visual-proof .vp-points{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:26px 0 30px}
.element8-sa-lp.gradient-linear-heat .visual-proof .vp-points span{display:block;background:none;border:0;border-top:1px solid rgba(23,19,33,.22);border-radius:0;padding:14px 0 0;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#4b4552;font-weight:600}
.element8-sa-lp.gradient-linear-heat .visual-proof .vp-market{border-top:0}
.element8-sa-lp.gradient-linear-heat .visual-proof .vp-market>div{border-top:1px solid rgba(23,19,33,.22);padding-top:22px}
.element8-sa-lp.gradient-linear-heat .visual-proof .vpm-num{color:#171321}
.element8-sa-lp.gradient-linear-heat .visual-proof .vpm-lab{color:#4b4552}
@media(max-width:900px){.element8-sa-lp.gradient-linear-heat .visual-proof .vp-points{grid-template-columns:1fr;gap:14px}}
/* Manifesto stats clear the 3D 8 logo */
.element8-sa-lp .manifesto .man-stats{margin-top:clamp(70px,10vw,170px)}
@media(max-width:900px){.element8-sa-lp .manifesto .man-stats{margin-top:34px}}
/* vp-market stats row — promoted from front-page inline so all pages can use it */
.vp-market{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:64px;padding-top:48px;border-top:1px solid var(--line)}
.vp-market .vpm-num{font-family:var(--display);font-weight:600;font-size:clamp(40px,5vw,64px);line-height:1;color:var(--white);display:block;letter-spacing:-.02em}
.vp-market .vpm-num em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vp-market .vpm-lab{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:block;margin-top:12px;line-height:1.6}
@media(max-width:760px){.vp-market{grid-template-columns:1fr;gap:28px;margin-top:44px;padding-top:36px}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}.platform-chip{border:1px solid rgba(0,0,0,.12);border-radius:8px;padding:24px;background:rgba(255,255,255,.58);display:flex;align-items:flex-start;gap:16px;min-height:132px;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}.platform-chip:hover{transform:translateY(-5px);border-color:rgba(0,0,0,.26);background:#fff;box-shadow:0 22px 48px rgba(0,0,0,.08)}
.platform-chip .platform-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:700;font-size:21px;box-shadow:0 18px 40px rgba(0,0,0,.14);flex:0 0 auto}.platform-chip strong{display:block;font-family:var(--display);font-size:clamp(24px,2.2vw,34px);letter-spacing:-.05em;font-weight:500;color:var(--ink);line-height:.92}.platform-chip div span{display:block;font-size:14px;line-height:1.42;color:rgba(0,0,0,.58);margin-top:12px;font-weight:500;max-width:360px}
.pi-linkedin .platform-icon{background:#0a66c2}.pi-facebook .platform-icon{background:#1877f2}.pi-instagram .platform-icon{background:radial-gradient(circle at 30% 110%,#feda75 0 24%,#fa7e1e 32%,#d62976 54%,#962fbf 74%,#4f5bd5 100%)}.pi-x .platform-icon{background:#000}.pi-tiktok .platform-icon{background:#111;text-shadow:-2px 0 #25f4ee,2px 0 #fe2c55}.pi-youtube .platform-icon{background:#f00}.pi-whatsapp .platform-icon{background:#25d366}.pi-google-ads .platform-icon,.pi-google-seo .platform-icon{background:#fff;color:#4285f4;border:1px solid rgba(0,0,0,.1)}
@media(max-width:900px){.platform-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.platform-grid{grid-template-columns:1fr}}
.process-timeline{position:relative;margin-top:clamp(34px,5vw,64px)}
.timeline-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.timeline-eyebrow{display:inline-flex;margin-bottom:0}.timeline-controls{display:flex;align-items:center;gap:8px}
.timeline-nav-btn{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.34);color:#0a0a0a;box-shadow:0 12px 28px rgba(0,0,0,.08);transition:transform .22s ease,background .22s ease,color .22s ease}.timeline-nav-btn:hover{background:var(--grad);border-color:transparent;color:#fff;transform:translateY(-2px)}.timeline-nav-btn svg{width:16px;height:16px}
.timeline-viewport{overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 0 20px;scroll-padding-inline:28px}.timeline-viewport::-webkit-scrollbar{display:none}
.timeline-flow{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(360px,430px);gap:26px;padding:42px 28px 18px;width:max-content;min-width:100%}.timeline-flow::before{content:"";position:absolute;left:0;right:0;top:28px;height:2px;background:linear-gradient(90deg,rgba(240,78,65,.18),rgba(209,73,154,.64),rgba(29,192,220,.26))}
.timeline-step{scroll-snap-align:start;position:relative;z-index:1;min-height:240px;padding:44px 18px 0;transition:transform .32s cubic-bezier(.2,.7,.2,1)}.timeline-step::before{content:"";position:absolute;top:-23px;left:18px;width:20px;height:20px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 9px rgba(209,73,154,.1),0 18px 34px rgba(209,73,154,.2)}.timeline-step:hover,.timeline-step.is-live{transform:translateY(-4px)}
.timeline-day{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;color:rgba(0,0,0,.52);margin-bottom:12px;font-weight:500}.timeline-title{display:block;font-family:var(--display);font-size:clamp(26px,2.15vw,34px);line-height:.95;letter-spacing:-1.25px;color:#0a0a0a;font-weight:500;margin-bottom:12px}.timeline-step.is-live .timeline-title,.timeline-step:hover .timeline-title{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.timeline-step p{max-width:360px;color:rgba(0,0,0,.62);font-size:16px;line-height:1.42;font-weight:500;margin-top:22px}
.timeline-note{scroll-snap-align:start;position:relative;z-index:1;min-height:240px;padding:44px 18px 0;display:flex;flex-direction:column;gap:22px;align-items:flex-start}.timeline-note span{color:rgba(0,0,0,.62);line-height:1.45;font-size:15px}.timeline-note strong{font-family:var(--display);font-size:clamp(42px,4.5vw,70px);line-height:.9;font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media(max-width:780px){.timeline-flow{grid-auto-columns:minmax(280px,82vw);gap:20px;padding-inline:18px}.timeline-viewport{scroll-padding-inline:18px}}
.performance-proof-metrics{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:linear-gradient(100deg,rgba(240,78,65,.18),rgba(209,73,154,.16),rgba(29,192,220,.18)),#090909;border:1px solid rgba(0,0,0,.16);box-shadow:0 38px 90px rgba(0,0,0,.18);overflow:hidden}
.performance-proof-metrics::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 20%,rgba(240,78,65,.22),transparent 30%),radial-gradient(circle at 86% 84%,rgba(29,192,220,.18),transparent 34%),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:auto,auto,110px 110px,110px 110px;opacity:.75}
.performance-proof-card{position:relative;z-index:1;min-height:330px;padding:clamp(30px,3vw,44px);color:#fff;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(12,12,12,.82),rgba(5,5,5,.92));transition:transform .34s cubic-bezier(.2,.7,.2,1),background .34s ease}
.performance-proof-card:first-child{border-left:0}.performance-proof-card:hover{transform:translateY(-6px);background:linear-gradient(145deg,rgba(26,26,26,.9),rgba(6,6,6,.96))}
.performance-proof-card>div{min-height:154px;margin-top:clamp(42px,4vw,58px);display:flex;flex-direction:column;align-items:flex-start}
.performance-proof-kicker{display:block;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:-.22px;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:500}
.performance-proof-number{display:block;font-family:var(--display);font-size:clamp(62px,5.55vw,102px);line-height:.86;letter-spacing:-.058em;font-weight:500;white-space:nowrap;padding:.08em .04em .03em 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.performance-proof-label{display:block;margin-top:12px;font-family:var(--display);font-size:clamp(26px,2.15vw,38px);line-height:.95;letter-spacing:-.052em;font-weight:500;color:#fff}
.performance-proof-copy{margin:auto 0 0;max-width:310px;font-size:15px;line-height:1.38;letter-spacing:-.36px;color:rgba(255,255,255,.62);font-weight:500}
@media(max-width:1180px){.performance-proof-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.performance-proof-card:nth-child(odd){border-left:0}.performance-proof-card:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}}
@media(max-width:640px){.performance-proof-metrics{grid-template-columns:1fr}.performance-proof-card{min-height:245px;border-left:0;border-top:1px solid rgba(255,255,255,.12)}.performance-proof-card:first-child{border-top:0}}
/* Final cascade: all user actions use the sharp-corner system. */
.btn,
.nav-cta,
.mega-cta,
.form-submit,
.e8mm-cta,
.e8mm-close,
.burger,
.timeline-nav-btn,
.mobile-menu .mobile-cta,
.mobile-contact-bar,
.mobile-contact-bar a,
a[class*="btn-"],
button[class*="btn-"]{
border-radius:0!important;
}