@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700;800&display=swap');
:root{
  --bg:#070812;
  --fg:#ecf1ff;
  --muted:rgba(236,241,255,.68);
  --card:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.12);
  --shadow:0 26px 80px rgba(0,0,0,.45);
  --g1:#4f7cff;
  --g2:#a855f7;
  --g3:#22c55e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--fg);
  background: var(--bg);
  overflow-x:hidden;
}

a{color:inherit}
.wrap{width:min(1120px, calc(100% - 40px)); margin:0 auto}
.section{padding: clamp(44px, 7vw, 86px) 0; position:relative; z-index:1}

.noise{
  position:fixed; inset:0; pointer-events:none; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.glows{position:fixed; inset:0; pointer-events:none}
.g{position:absolute; width:520px; height:520px; border-radius:50%; filter: blur(60px); opacity:.35}
.g1{left:-120px; top:-160px; background:rgba(79,124,255,.55)}
.g2{right:-160px; top:-220px; background:rgba(168,85,247,.48)}
.g3{right:-200px; bottom:-240px; background:rgba(34,197,94,.35)}

#scrollProgress{position:fixed; left:0; top:0; width:100%; height:3px; z-index:9999; background:rgba(255,255,255,.06)}
#scrollProgress span{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3)); box-shadow:0 0 26px rgba(79,124,255,.22)}

.cursorBall{
  position:fixed; left:0; top:0; width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(168,85,247,.6));
  box-shadow: 0 0 30px rgba(168,85,247,.25);
  transform: translate(-999px,-999px);
  pointer-events:none;
  z-index:9998;
  opacity:.75;
}

.top{position:sticky; top:0; z-index:50; backdrop-filter: blur(14px); background:rgba(7,8,18,.35); border-bottom:1px solid rgba(255,255,255,.06)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; padding: 12px 0; gap:14px}
.brand img{height:34px; width:auto; display:block}
.topActions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.chip{
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  color:rgba(236,241,255,.86);
  font-size:12px;
}
.chip.primary{background: linear-gradient(135deg, rgba(79,124,255,.55), rgba(168,85,247,.55)); border-color: rgba(255,255,255,.16)}

.hero{position:relative; min-height: 70vh; display:grid; place-items:center; padding: 54px 0 34px}
.heroBg{position:absolute; inset:0; overflow:hidden; z-index:0}
.heroBg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: blur(10px) saturate(1.1) contrast(1.05); opacity:.22}
.heroVignette{position:absolute; inset:0; background:
  radial-gradient(1200px 600px at 35% 35%, rgba(0,0,0,.12), rgba(0,0,0,.72) 70%),
  linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
}

.heroGrid{position:relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items:center}
.heroLeft h1{margin:0; font-size: clamp(36px, 5.6vw, 64px); line-height:1.02; letter-spacing:-.02em}
.heroLeft h1 span{background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(79,124,255,.95), rgba(168,85,247,.88));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{margin: 14px 0 18px; color:rgba(236,241,255,.76); font-size:16px; line-height:1.75; max-width: 54ch}
.pillRow{display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0 18px}
.pill{padding:10px 12px; border-radius: 999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); font-size:12px; color:rgba(236,241,255,.84)}
.ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin-top: 8px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color:rgba(236,241,255,.90);
  text-decoration:none;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.btn.primary{
  background: linear-gradient(135deg, rgba(79,124,255,.70), rgba(168,85,247,.55));
  border-color: rgba(255,255,255,.18);
}
.pulse{position:relative}
@media (prefers-reduced-motion: no-preference){
  .pulse::after{
    content:""; position:absolute; inset:-8px; border-radius: 18px;
    background: radial-gradient(circle at 50% 50%, rgba(79,124,255,.22), rgba(168,85,247,.16), rgba(34,197,94,.10), transparent 70%);
    opacity:0; animation: pulse 8s ease-in-out infinite; pointer-events:none;
  }
  @keyframes pulse{
    0%,72%,100%{opacity:0; transform: scale(.98)}
    78%{opacity:.55; transform: scale(1.02)}
    86%{opacity:0; transform: scale(1.04)}
  }
}
.micro{margin-top: 14px; color: rgba(236,241,255,.62); font-size: 12px}

.heroRight{display:grid; gap: 12px}
.heroCard{
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.heroCardTop{display:flex; gap:8px; padding: 14px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.dot{width:10px; height:10px; border-radius:50%; background:rgba(236,241,255,.25)}
.heroCardBody{padding: 18px 18px 20px; display:flex; align-items:center; gap:16px}
.play{
  width: 72px; height: 52px; border-radius: 18px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  position:relative;
}
.play::after{
  content:""; position:absolute; left:50%; top:50%;
  transform: translate(-40%,-50%);
  width:0; height:0; border-left: 16px solid rgba(236,241,255,.86);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.heroCardText b{display:block}
.heroCardText span{display:block; margin-top:6px; color: rgba(236,241,255,.62); font-size: 12px; letter-spacing:.04em}

.statsStrip{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.stat{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 12px 12px 14px;
}
.stat b{display:block}
.stat span{display:block; margin-top:6px; color: rgba(236,241,255,.62); font-size: 12px}

.sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 18px}
.sectionHead h2{margin:0; font-size: 28px; letter-spacing:-.01em}
.sectionHead p{margin:0; color: rgba(236,241,255,.62); font-size: 13px}

.card{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 16px 16px 18px;
  box-shadow: var(--shadow);
}
.card b{display:block}
.card p{margin:10px 0 0; color: rgba(236,241,255,.70); line-height:1.7; font-size: 13px}
.serviceGrid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px}
.tagRow{display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px}
.tag{font-size: 11px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); color: rgba(236,241,255,.70)}

.ba{max-width: 780px}
.baMedia{
  position:relative;
  height: 150px;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  box-shadow: var(--shadow);
}
.baBefore,.baAfter{width:100%; height:100%; object-fit:cover; display:block}
.baAfterWrap{position:absolute; inset:0 auto 0 0; width:55%; overflow:hidden}
.baLabel{
  position:absolute; top: 12px;
  padding: 6px 10px; border-radius:999px;
  font-size: 12px; letter-spacing:.06em; text-transform: uppercase;
  background: rgba(15,16,24,.55);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  z-index: 4;
}
.baLabel.left{left: 12px}
.baLabel.right{right: 12px}
.baHandle{
  position:absolute; inset:0 auto 0 55%;
  width: 44px;
  transform: translateX(-50%);
  border:0; background: transparent; cursor: ew-resize;
  z-index: 5;
}
.baHandle::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  box-shadow: 0 0 0 6px rgba(255,255,255,.06), 0 0 30px rgba(79,124,255,.25), 0 0 60px rgba(168,85,247,.18);
}
.baGrip{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 42px; height:42px; border-radius:999px;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 60px rgba(0,0,0,.55), 0 0 40px rgba(79,124,255,.25);
  display:grid; place-items:center;
  overflow:hidden;
}
.baGrip::after{
  content:"";
  position:absolute; inset:-10px;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.0) 35%, rgba(255,255,255,.35) 48%, rgba(255,255,255,.0) 62%, rgba(255,255,255,0) 100%);
  transform: translateX(-140%);
  opacity:0;
  animation: sweep 7.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes sweep{
  0%,68%{transform: translateX(-140%); opacity:0}
  72%{opacity:.55}
  78%{transform: translateX(140%); opacity:.35}
  82%{opacity:0}
  100%{transform: translateX(140%); opacity:0}
}
.baGrip::before{content:"↔"; font-weight:900; color: rgba(236,241,255,.92); position:relative; z-index:1}
.baRange{width: 100%; margin-top: 12px; accent-color: var(--g2)}

.tiles{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px}
.tile{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 0;
  overflow:hidden;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.tileMedia{position:relative}
.tileMedia img{width:100%; height: 200px; object-fit: cover; display:block}
.tilePlay{
  position:absolute; top: 14px; right: 14px;
  width: 34px; height:34px; border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}
.cap{padding: 14px 14px 16px}
.cap b{display:block}
.cap span{display:block; margin-top:6px; color: rgba(236,241,255,.62); font-size: 12px}

.creatorGrid{display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px}
.creator{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 14px 14px 16px;
  text-decoration:none;
  box-shadow: var(--shadow);
}
.creator b{display:block}
.creator span{display:block; margin-top:6px; color: rgba(236,241,255,.62); font-size:12px}

.clientsFull{
  width:100%;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding: 26px 0;
  background: linear-gradient(90deg, rgba(79,124,255,.05), rgba(168,85,247,.05), rgba(34,197,94,.04));
}
.clientsTrack{
  display:flex; gap: 60px; width:max-content; align-items:center;
  padding: 0 40px;
  animation: marquee 28s linear infinite;
}
@keyframes marquee{from{transform: translateX(0)}to{transform: translateX(-50%)}}
.clientLogo{
  width: 180px; height: 56px; border-radius: 14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  display:grid; place-items:center;
}
.clientLogo::before{
  content:"";
  width: 140px; height: 28px; border-radius:999px;
  background: linear-gradient(135deg, rgba(79,124,255,.75), rgba(168,85,247,.65), rgba(34,197,94,.55));
  opacity:.22;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.reviewsGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px}
.rCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 18px 16px 18px;
  text-align:center;
  box-shadow: var(--shadow);
}
.rCard img{width: 110px; margin: 6px auto 10px; opacity:.92; display:block}
.stars{
  letter-spacing:.16em;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(79,124,255,.9), rgba(168,85,247,.85));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin: 0 auto 10px;
  font-size: 12px;
}
.rCard p{margin:0; color: rgba(236,241,255,.82); line-height:1.7; font-size: 14px}

.processGrid{display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px}
.pCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 16px 14px 18px;
  text-align:center;
  box-shadow: var(--shadow);
}
.pCard img{width: 92px; margin: 6px auto 10px; opacity:.9; display:block}
.pCard b{display:block}
.pCard span{display:block; margin-top:8px; color: rgba(236,241,255,.66); line-height:1.6; font-size: 13px}

.contactCard{
  border-radius: 22px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 18px 16px;
  display:flex; align-items:center; justify-content:space-between; gap: 14px;
  box-shadow: var(--shadow);
}
.contactCard b{display:block}
.contactCard span{display:block; margin-top:6px; color: rgba(236,241,255,.62); font-size: 12px}

.footer{padding: 18px 0 34px; border-top:1px solid rgba(255,255,255,.08)}
.footer .wrap{display:flex; justify-content:space-between; gap: 12px; flex-wrap:wrap; color: rgba(236,241,255,.62); font-size: 12px}

/* Reveal */
.reveal{opacity:0; transform: translateY(10px); filter: blur(8px)}
.reveal.in{opacity:1; transform: translateY(0); filter: blur(0); transition: opacity .7s ease, transform .7s ease, filter .7s ease}

/* Lightbox */
.lightbox{position:fixed; inset:0; display:none; z-index:99999}
.lightbox.show{display:block}
.lbBackdrop{position:absolute; inset:0; background: rgba(0,0,0,.6); backdrop-filter: blur(10px)}
.lbPanel{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:min(980px, calc(100% - 36px));
  border-radius: 26px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,22,.80);
  box-shadow: 0 40px 120px rgba(0,0,0,.65);
  overflow:hidden;
}
.lbClose{
  position:absolute; right: 12px; top: 12px;
  width: 40px; height:40px; border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: rgba(236,241,255,.92);
  cursor:pointer;
  z-index:2;
}
.lbMedia{position:relative; background:#000}
.lbMedia img, .lbMedia iframe{width:100%; display:block; border:0}
.lbMedia iframe{height: min(58vh, 520px)}
.lbBody{padding: 16px 18px 18px}
.lbMeta{color: rgba(236,241,255,.62); font-size:12px; margin-top:6px}
.lbText{color: rgba(236,241,255,.80); margin-top:10px; line-height:1.7; font-size:14px}

@media (max-width: 1100px){
  .heroGrid{grid-template-columns: 1fr; gap: 18px}
  .statsStrip{grid-template-columns: repeat(2, 1fr)}
  .serviceGrid{grid-template-columns: repeat(2, 1fr)}
  .tiles{grid-template-columns: 1fr}
  .creatorGrid{grid-template-columns: repeat(2, 1fr)}
  .reviewsGrid{grid-template-columns: 1fr}
  .processGrid{grid-template-columns: 1fr}
}

/* =========================
   V29 IMMERSIVE (MrBoost vibe)
   ========================= */

/* Smooth scroll (desktop) */
html{scroll-behavior:smooth}

/* Boot / opening animation */
body.boot .reveal{opacity:0; transform: translateY(16px) scale(.99); filter: blur(10px);}
@media (prefers-reduced-motion: no-preference){
  body.boot .top{opacity:0; transform: translateY(-10px); filter: blur(10px)}
  body.boot .heroBg video{opacity:0; transform: scale(1.04)}
  body.boot .heroVignette{opacity:0}
  body.boot .cursorBall{opacity:0}
}

/* When ready */
body.ready .top{opacity:1; transform:none; filter:none; transition: opacity .8s ease, transform .8s ease, filter .8s ease}
body.ready .heroBg video{opacity:.22; transform:none; transition: opacity 1.1s ease, transform 1.1s ease}
body.ready .heroVignette{opacity:1; transition: opacity 1.1s ease}
body.ready .cursorBall{opacity:.75; transition: opacity .8s ease}

/* Stagger hero elements */
@media (prefers-reduced-motion: no-preference){
  body.ready .heroLeft{animation: rise .9s cubic-bezier(.2,.9,.2,1) .05s both}
  body.ready .heroRight{animation: rise .9s cubic-bezier(.2,.9,.2,1) .18s both}
  @keyframes rise{
    from{opacity:0; transform: translateY(18px); filter: blur(12px)}
    to{opacity:1; transform:none; filter: blur(0)}
  }
}

/* Micro interactions: buttons & chips */
.btn, .chip{
  position:relative;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover, .chip:hover{transform: translateY(-2px)}
.btn:active, .chip:active{transform: translateY(0) scale(.98)}

.btn::before, .chip::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  background: radial-gradient(300px 120px at var(--mx,50%) var(--my,50%),
    rgba(79,124,255,.20),
    rgba(168,85,247,.16),
    rgba(34,197,94,.10),
    transparent 60%);
  transition: opacity .25s ease;
}
.btn:hover::before, .chip:hover::before{opacity:1}

/* Magnetic glow for primary CTA */
.btn.primary{
  box-shadow: 0 22px 75px rgba(0,0,0,.35), 0 0 80px rgba(79,124,255,.12);
}
.btn.primary:hover{
  box-shadow: 0 30px 95px rgba(0,0,0,.45), 0 0 120px rgba(168,85,247,.20);
}

/* Tiles: hover depth + sheen */
.tile{
  transition: transform .25s ease, box-shadow .35s ease, border-color .35s ease, filter .35s ease;
  will-change: transform;
}
.tile:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 40px 120px rgba(0,0,0,.58), 0 0 120px rgba(79,124,255,.12);
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.10) 45%,
    transparent 60%);
  transform: translateX(-40%);
  transition: opacity .35s ease, transform .55s ease;
}
.tile:hover::after{opacity:1; transform: translateX(40%)}

/* Cursor ball reacts */
.cursorBall{
  transition: width .18s ease, height .18s ease, opacity .18s ease, box-shadow .25s ease;
}
.cursorBall.big{
  width: 22px;
  height: 22px;
  opacity: .85;
  box-shadow: 0 0 60px rgba(168,85,247,.28);
}

/* Parallax glows driven by CSS vars */
.glows .g{
  transform: translate3d(calc(var(--px, 0px) * .35), calc(var(--py, 0px) * .35), 0);
  transition: transform .2s ease;
}
.glows .g1{transform: translate3d(calc(var(--px, 0px) * .22), calc(var(--py, 0px) * .18), 0);}
.glows .g2{transform: translate3d(calc(var(--px, 0px) * -.16), calc(var(--py, 0px) * .14), 0);}
.glows .g3{transform: translate3d(calc(var(--px, 0px) * -.12), calc(var(--py, 0px) * -.18), 0);}

/* Gentle floating on hero card */
@media (prefers-reduced-motion: no-preference){
  .heroCard{animation: floaty 6.5s ease-in-out infinite}
  @keyframes floaty{
    0%,100%{transform: translateY(0)}
    50%{transform: translateY(-8px)}
  }
}

/* RESULTS: enforce 16:9 and smoother blend */
.baMedia{
  height: auto !important;
  aspect-ratio: 16 / 9;
  max-height: 440px;
}
@media (max-width: 1100px){
  .baMedia{max-height: 320px;}
}
@media (max-width: 520px){
  .baMedia{max-height: 240px;}
}
.baMedia::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 320px at 70% 15%, rgba(79,124,255,.14), transparent 60%),
    radial-gradient(900px 320px at 30% 85%, rgba(168,85,247,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.18));
  opacity:.9;
}
.baAfterWrap{will-change: width;}
.baHandle{will-change:left;}
.baMedia{background: rgba(0,0,0,.35);}

/* Image "overloop" (soft inner vignette) */
.baMedia{
  box-shadow: 0 36px 120px rgba(0,0,0,.55), 0 0 120px rgba(79,124,255,.10);
}
.baMedia .baBefore, .baMedia .baAfter{transform: scale(1.01);}

/* Section parallax panels (subtle) */
.section{
  transform: translate3d(0, calc(var(--sy, 0px) * .02), 0);
}


/* =========================
   V30 FULL IMMERSIVE PACK
   ========================= */

/* Particles canvas */
#particles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2; /* above glows, below content */
  opacity:.28;
  mix-blend-mode: screen;
  filter: blur(.0px);
}
@media (max-width: 820px){
  #particles{opacity:.18}
}

/* Scroll wipe transitions (MrBoost-ish) */
.section.wipe::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.0;}
.section.wipe.wipe-in::before{opacity:.22;animation:none;background: radial-gradient(900px 340px at 50% 0%, rgba(255,255,255,.03), transparent 70%);}
@keyframes wipeIn{
  0%{clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)}
  100%{clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)}
}

/* Cinematic text: per word */
h1[data-split] .w{
  display:inline-block;
  position:relative;
  transform: translateY(18px);
  opacity:0;
  filter: blur(10px);
}
body.ready h1[data-split].split .w{
  animation: wordUp .85s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}
@keyframes wordUp{
  from{transform: translateY(18px); opacity:0; filter: blur(10px)}
  to{transform: translateY(0); opacity:1; filter: blur(0)}
}
h1[data-split] .w::after{
  content:"";
  position:absolute;
  left:-6%;
  top: 65%;
  width: 112%;
  height: 16px;
  background: linear-gradient(90deg, rgba(79,124,255,.0), rgba(79,124,255,.18), rgba(168,85,247,.14), rgba(34,197,94,.08), rgba(79,124,255,.0));
  filter: blur(10px);
  opacity: .0;
  transform: translateY(0);
}
body.ready h1[data-split].split .w:nth-child(4n)::after{
  opacity: .55;
}

/* Clients marquee: pause on hover + shine */
.clientsFull:hover .clientsTrack{animation-play-state: paused;}
.clientLogo{
  position:relative;
  overflow:hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.clientLogo:hover{
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 0 80px rgba(168,85,247,.12);
}
.clientLogo::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 60%);
  transform: translateX(-60%) rotate(8deg);
  opacity:0;
  transition: opacity .25s ease, transform .55s ease;
  pointer-events:none;
}
.clientLogo:hover::after{
  opacity:1;
  transform: translateX(60%) rotate(8deg);
}

/* Lightbox metrics animation */
.lbMetrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.metric{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px 10px 12px;
}
.mTop{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.mTop span{color: rgba(236,241,255,.62); font-size: 11px; letter-spacing:.08em; text-transform: uppercase}
.mTop b{font-size: 12px}
.mBar{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow:hidden;
  margin-top: 10px;
}
.mBar i{
  display:block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(79,124,255,.95), rgba(168,85,247,.88), rgba(34,197,94,.78));
  border-radius: 999px;
  box-shadow: 0 0 30px rgba(79,124,255,.18);
  transition: width 900ms cubic-bezier(.2,1.2,.2,1);
}
.lbPanel.showMetrics .mBar i{width: var(--w, 0%);}

@media (max-width: 820px){
  .lbMetrics{grid-template-columns: 1fr;}
}

/* Ambient background motion (subtle) */
@media (prefers-reduced-motion: no-preference){
  .noise{animation: noiseDrift 14s linear infinite}
  @keyframes noiseDrift{
    0%{transform: translate3d(0,0,0)}
    50%{transform: translate3d(-10px,6px,0)}
    100%{transform: translate3d(0,0,0)}
  }
}


/* =========================
   V31: Hover video preview + Intake wizard
   ========================= */

/* Retention tile hover preview */
.tileMedia{position:relative}
.tilePreview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .25s ease, transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.05);
}
.tile[data-case="1"]:hover .tilePreview{
  opacity:1;
  transform: scale(1.01);
}
.tile[data-case="1"]:hover img{opacity:0; transition: opacity .25s ease;}
.tile[data-case="1"] img{transition: opacity .25s ease;}

/* Wizard modal */
.wizard{
  position:fixed;
  inset:0;
  z-index: 100000;
  display:none;
}
.wizard.show{display:block}
.wizBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(14px);
}
.wizPanel{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:min(860px, calc(100% - 36px));
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,22,.82);
  box-shadow: 0 50px 160px rgba(0,0,0,.70), 0 0 160px rgba(168,85,247,.12);
  overflow:hidden;
}
.wizClose{
  position:absolute; right: 14px; top: 14px;
  width: 44px; height:44px; border-radius: 16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25);
  color: rgba(236,241,255,.92);
  cursor:pointer;
  z-index:2;
}
.wizTop{
  display:flex; gap:14px; align-items:center;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(900px 260px at 10% 0%, rgba(79,124,255,.18), transparent 55%),
              radial-gradient(900px 260px at 90% 0%, rgba(168,85,247,.14), transparent 55%);
}
.wizLogo{height:34px; width:auto; opacity:.95}
.wizTitle{display:block; font-size: 16px}
.wizSub{color: rgba(236,241,255,.62); font-size: 12px; margin-top: 4px}
.wizSteps{
  display:flex; gap:10px; padding: 14px 18px 0;
}
.step{
  flex:1;
  height: 6px;
  border-radius:999px;
  background: rgba(255,255,255,.07);
  overflow:hidden;
  position:relative;
}
.step::after{
  content:"";
  position:absolute; inset:0;
  width:0%;
  background: linear-gradient(90deg, rgba(79,124,255,.95), rgba(168,85,247,.88), rgba(34,197,94,.78));
  transition: width .55s cubic-bezier(.2,1,.2,1);
}
.step.on::after{width:100%}

.wizBody{padding: 16px 18px 18px}
.wizH{font-weight: 800; letter-spacing:-.01em; margin: 2px 0 14px}
.field{display:block; margin: 12px 0}
.field span{display:block; font-size: 12px; color: rgba(236,241,255,.65); margin-bottom: 8px}
.field input,.field select,.field textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(236,241,255,.92);
  padding: 12px 12px;
  outline:none;
}
.field textarea{resize: vertical; min-height: 110px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color: rgba(168,85,247,.35);
  box-shadow: 0 0 0 6px rgba(168,85,247,.12);
}
.wizPage{display:none}
.wizPage.show{display:block}
.wizNav{
  display:flex; justify-content:space-between; gap:12px;
  margin-top: 14px;
}
.wizPage[data-step="3"] .wizNav{display:none}
.wizActions{display:flex; gap:12px; justify-content:flex-end; margin-top: 12px}
.wizAlt{display:flex; gap:12px; justify-content:flex-end; margin-top: 12px; flex-wrap:wrap}
.wizNote{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 12px;
  color: rgba(236,241,255,.72);
  font-size: 12px;
  line-height:1.6;
  margin-top: 12px;
}

@media (max-width: 720px){
  .wizActions,.wizAlt,.wizNav{justify-content:stretch}
  .wizActions .btn,.wizAlt .btn,.wizNav .btn{flex:1}
}

/* Wizard opening animation */
@media (prefers-reduced-motion: no-preference){
  .wizard.show .wizPanel{
    animation: wizIn .42s cubic-bezier(.2,1,.2,1) both;
  }
  @keyframes wizIn{
    from{opacity:0; transform: translate(-50%,-46%) scale(.98); filter: blur(10px)}
    to{opacity:1; transform: translate(-50%,-50%) scale(1); filter: blur(0)}
  }
}


/* =========================
   V32: navless + contact form + results label + process arrows
   ========================= */

/* Remove header spacing now that header is gone */
.hero{padding-top: 38px}

/* Results: After label only visible on after image */
.baAfterWrap .baLabel.afterOnly{
  position:absolute;
  top:12px;
  right:12px;
  left:auto;
}
/* Ensure after label is clipped with after wrap */
.baAfterWrap{position:absolute; inset:0 auto 0 0; width:55%; overflow:hidden;}
.baAfterWrap .baLabel{z-index:6}

/* Contact form styling */
.contactForm{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 18px 16px 18px;
}
.cfGrid{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.cfField{display:block; margin: 10px 0}
.cfField span{display:block; font-size:12px; color: rgba(236,241,255,.65); margin-bottom: 8px}
.cfField input,.cfField textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(236,241,255,.92);
  padding: 12px 12px;
  outline:none;
}
.cfField textarea{resize: vertical; min-height: 140px}
.cfField input:focus,.cfField textarea:focus{
  border-color: rgba(168,85,247,.35);
  box-shadow: 0 0 0 6px rgba(168,85,247,.12);
}
.cfActions{display:flex; gap:12px; justify-content:flex-end; margin-top: 12px; flex-wrap:wrap}
.cfNote{margin-top: 10px; color: rgba(236,241,255,.58); font-size: 12px; line-height:1.6}

@media (max-width: 720px){
  .cfGrid{grid-template-columns: 1fr}
  .cfActions .btn{flex:1}
}

/* Process arrows (step-by-step) */
.processGrid{gap: 18px}
.pCard{
  position:relative;
}
.pCard:not(:last-child)::after{
  content:"➜";
  position:absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(236,241,255,.78);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  pointer-events:none;
}
@media (max-width: 1100px){
  .pCard:not(:last-child)::after{display:none;}
}


/* V33 CONTINUOUS BACKGROUND */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events:none;
  background:
    radial-gradient(1400px 820px at 18% 10%, rgba(79,124,255,.22), transparent 62%),
    radial-gradient(1200px 760px at 85% 0%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(1200px 820px at 78% 92%, rgba(34,197,94,.12), transparent 62%),
    radial-gradient(900px 520px at 50% 55%, rgba(255,255,255,.04), transparent 70%),
    linear-gradient(180deg, #050611, #070812 58%, #050611);
  transform: translate3d(calc(var(--px, 0px) * .06), calc(var(--py, 0px) * .06), 0);
  transition: transform .2s ease;
}

/* Ensure content is above the fixed background */
.section, .top, main, footer{position:relative; z-index: 1}
.glows, #particles, .noise{z-index: 0}

/* Clients blend */
.clientsFull{
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  padding: 22px 0 !important;
}
.clientsFull::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(79,124,255,.06), rgba(168,85,247,.06), rgba(34,197,94,.05));
  opacity: .10;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.clientsTrack{position:relative; z-index:1}

.section{background: transparent !important;}


/* =========================
   V34: Premium counters + contact form + results clarity
   ========================= */

/* Contact form (if not present from earlier versions) */
.contactForm{
  width: 100%;
  max-width: 760px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 18px 16px 18px;
}
.cfGrid{display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
.cfField{display:block; margin: 10px 0}
.cfField span{display:block; font-size:12px; color: rgba(236,241,255,.65); margin-bottom: 8px}
.cfField input,.cfField textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(236,241,255,.92);
  padding: 12px 12px;
  outline:none;
}
.cfField textarea{resize: vertical; min-height: 140px}
.cfField input:focus,.cfField textarea:focus{
  border-color: rgba(168,85,247,.35);
  box-shadow: 0 0 0 6px rgba(168,85,247,.12);
}
.cfActions{display:flex; gap:12px; justify-content:flex-end; margin-top: 12px; flex-wrap:wrap}
.cfNote{margin-top: 10px; color: rgba(236,241,255,.58); font-size: 12px; line-height:1.6}
@media (max-width: 720px){
  .cfGrid{grid-template-columns: 1fr}
  .cfActions .btn{flex:1}
}

/* Hero stats: make them feel like "boxes" under premium polish */
.statsStrip{
  grid-template-columns: repeat(3, 1fr) !important;
}
.stat{
  text-align:left;
  position:relative;
  overflow:hidden;
}
.stat b{
  font-size: 20px;
  letter-spacing:-.01em;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(79,124,255,.95), rgba(168,85,247,.88));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(79,124,255,.12), rgba(168,85,247,.10), transparent 60%);
  opacity:.0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.stat:hover::after{opacity:.85}

/* Results centered */
#results .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}
#results .sectionHead{
  width:100%;
  max-width: 780px;
  justify-content:center;
  text-align:center;
}
#results .sectionHead p{display:none}

/* Results labels: After only on after image; Before only on before side */
.baLabel.beforeOnly{z-index:3;}
.baAfterWrap{z-index:4;}
.baAfterWrap .baLabel.afterOnly{z-index:6;}


/* =========================
   V35: Ultimate premium pack
   - in-page form success + confetti
   - floating CTA bubble
   - lightbox mini-story
   - focus/a11y polish
   - subtle grain + chromatic vibe
   ========================= */

/* A11y: focus-visible */
:focus{outline:none}
:focus-visible{
  outline: 2px solid rgba(168,85,247,.55);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(168,85,247,.14);
  border-radius: 14px;
}

/* Subtle grain + chromatic aberration vibe */
.heroBg::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: overlay;
  opacity:.35;
}
.heroBg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 420px at 50% 30%, rgba(79,124,255,.08), transparent 60%);
  filter: drop-shadow(0 0 18px rgba(255,0,80,.06)) drop-shadow(0 0 18px rgba(0,140,255,.06));
  opacity:.65;
}

/* Floating CTA */
.floatCta{
  position:fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,12,22,.55);
  backdrop-filter: blur(18px);
  color: rgba(236,241,255,.92);
  border-radius: 999px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  box-shadow: 0 26px 90px rgba(0,0,0,.55), 0 0 120px rgba(168,85,247,.14);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, opacity .25s ease;
}
.floatCta:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 34px 110px rgba(0,0,0,.62), 0 0 160px rgba(79,124,255,.16);
}
.fcDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(168,85,247,.88), rgba(34,197,94,.78));
  box-shadow: 0 0 0 6px rgba(168,85,247,.10), 0 0 30px rgba(168,85,247,.20);
  animation: dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{transform: scale(1); opacity:.9}
  50%{transform: scale(1.12); opacity:1}
}
.fcText{font-weight: 800; letter-spacing:.01em; font-size: 13px}
@media (max-width: 520px){
  .floatCta{right: 12px; bottom: 12px; padding: 11px 12px}
}

/* Contact success toast */
.cfToast{
  position:fixed;
  left: 18px;
  bottom: 18px;
  z-index: 99998;
}
.cfToastCard{
  width: min(520px, calc(100vw - 36px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,22,.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 140px rgba(0,0,0,.70), 0 0 160px rgba(168,85,247,.10);
  padding: 14px 14px 14px;
  display:grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items:start;
  overflow:hidden;
  position:relative;
}
.cfToastCard::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(79,124,255,.16), rgba(168,85,247,.12), transparent 60%);
  opacity:.6;
  pointer-events:none;
}
.cfToastIcon{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.cfToastText b{display:block}
.cfToastText div{margin-top:6px; color: rgba(236,241,255,.66); font-size: 12px; line-height:1.6}
.cfToastActions{
  grid-column: 1 / -1;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-top: 10px;
}
@media (prefers-reduced-motion: no-preference){
  .cfToastCard{animation: toastIn .42s cubic-bezier(.2,1,.2,1) both}
  @keyframes toastIn{
    from{opacity:0; transform: translateY(14px); filter: blur(10px)}
    to{opacity:1; transform:none; filter: blur(0)}
  }
}

/* Confetti burst */
.confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index: 100000;
}
.confetti i{
  position:absolute;
  width: 8px;
  height: 12px;
  border-radius: 3px;
  opacity: 0;
  transform: translate3d(0,0,0) rotate(0deg);
}

/* Lightbox mini story */
.lbBullets{
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  color: rgba(236,241,255,.76);
  line-height:1.7;
  font-size: 13px;
}
.lbBullets li{margin: 6px 0}
.lbImpact{
  margin-top: 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 12px;
  color: rgba(236,241,255,.74);
  font-size: 12px;
  line-height:1.6;
}
.lbImpact b{color: rgba(236,241,255,.92)}


/* =========================
   V36: Hero cleanup + POP headers
   ========================= */

/* Hero main CTA emphasis */
.heroMainCta{
  padding: 16px 18px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing:.02em;
  box-shadow: 0 34px 110px rgba(0,0,0,.55), 0 0 200px rgba(168,85,247,.20);
}
.heroMainCta::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 22px;
  pointer-events:none;
  background: radial-gradient(320px 140px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12), rgba(79,124,255,.18), rgba(168,85,247,.16), transparent 65%);
  opacity:.85;
  mix-blend-mode: screen;
  filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference){
  .heroMainCta{animation: ctaBreathe 3.2s ease-in-out infinite}
  @keyframes ctaBreathe{
    0%,100%{transform: translateY(0)}
    50%{transform: translateY(-2px)}
  }
}

/* Stats strip single */
.statsStrip.single{grid-template-columns: 1fr !important;}
.stat.big{padding: 14px 14px 16px}
.stat.big b{font-size: 24px}

/* Contact form centered */
#contact .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}
#contact .sectionHead{
  width:100%;
  max-width: 760px;
  justify-content:center;
  text-align:center;
}
#contact .contactForm{margin-top: 10px}

/* Headers: creative pop style */
.sectionHead h2{
  position:relative;
  font-size: clamp(30px, 4.2vw, 44px);
  letter-spacing:-.03em;
  line-height:1.05;
  text-transform: none;
}
.sectionHead h2::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: min(280px, 70%);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,124,255,.0), rgba(79,124,255,.55), rgba(168,85,247,.55), rgba(34,197,94,.35), rgba(79,124,255,.0));
  filter: blur(10px);
  opacity:.75;
  pointer-events:none;
}
/* Add a tiny "sticker" effect */
.sectionHead h2::before{
  content:"";
  position:absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(79,124,255,.95), rgba(168,85,247,.88), rgba(34,197,94,.78));
  box-shadow: 0 0 0 8px rgba(168,85,247,.10), 0 0 40px rgba(168,85,247,.22);
  opacity:.9;
}

/* Keep service cards head clean; sectionHead p already hidden in results/contact; leave others */


/* =========================
   V37: MrBoost-ish editorial headings + creators row + bottom CTA
   ========================= */

/* Headings: italic, strong, interactive */
.sectionHead h2,
.ctaTitle{
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* Remove the small dot we added above headers in v36 */
.sectionHead h2::before{display:none !important; content:none !important;}

/* Add interactive reveal + hover shimmer for headings */
.sectionHead h2,
.ctaTitle{
  position:relative;
  display:inline-block;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sectionHead h2::after,
.ctaTitle::after{
  content:"";
  position:absolute;
  left:-6%;
  bottom:-10px;
  width:112%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,124,255,0), rgba(79,124,255,.55), rgba(168,85,247,.55), rgba(34,197,94,.35), rgba(79,124,255,0));
  filter: blur(12px);
  opacity:.62;
  pointer-events:none;
  transform: scaleX(.78);
  transform-origin:center;
  transition: transform .35s ease, opacity .35s ease;
}
.sectionHead:hover h2::after{transform: scaleX(1); opacity:.85}

/* Reveal animation on view */
.sectionHead.h-in h2,
.ctaCenter.h-in .ctaTitle{
  animation: headIn .75s cubic-bezier(.2,1,.2,1) both;
}
@keyframes headIn{
  from{opacity:0; transform: translateY(14px) skewX(-6deg); filter: blur(10px)}
  to{opacity:1; transform:none; filter: blur(0)}
}

/* Services heading layout like photo 1 */
.headSplit{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 28px;
  align-items:start;
}
.headSplit .subtitle{
  margin-top: 14px;
  color: rgba(236,241,255,.68);
  max-width: 58ch;
}
.skillsBox{
  text-align:right;
}
.skillsTitle{
  font-weight: 900;
  letter-spacing: .06em;
  opacity: .9;
  margin-bottom: 10px;
  font-style: italic;
}
.skillsList{
  display:flex;
  flex-direction:column;
  gap: 14px;
  color: rgba(236,241,255,.75);
}
@media (max-width: 980px){
  .headSplit{grid-template-columns: 1fr; text-align:left}
  .skillsBox{text-align:left}
}

/* Hero stats back to 3 aligned */
.statsStrip.triple{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.statsStrip.triple .stat b{
  font-size: 20px;
}
@media (max-width: 720px){
  .statsStrip.triple{grid-template-columns: 1fr}
}

/* Creators row like photo 2 */
.centerHead{justify-content:center; text-align:center}
.logoRow{
  margin-top: 26px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 56px;
  flex-wrap:wrap;
  opacity:.92;
}
.logoPill{
  width: 180px;
  height: 56px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
  color: rgba(236,241,255,.55);
  letter-spacing:.14em;
  font-weight: 800;
  filter: grayscale(1);
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}
.logoPill:hover{transform: translateY(-2px); opacity:1; filter: grayscale(.3)}
@media (max-width: 820px){
  .logoRow{gap: 18px}
  .logoPill{width: 140px; height: 52px}
}

/* Bottom CTA section like photo 3 */
.ctaSection{padding: 84px 0 64px}
.ctaCenter{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 22px;
  min-height: 360px;
}
.ctaTitle{
  font-size: clamp(34px, 5vw, 56px);
  text-align:center;
}
.ctaCircle{
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px solid rgba(168,85,247,.35);
  background: rgba(10,12,22,.30);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 140px rgba(0,0,0,.65), 0 0 140px rgba(168,85,247,.18);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.ctaCircle:hover{
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(79,124,255,.45);
  box-shadow: 0 50px 170px rgba(0,0,0,.70), 0 0 180px rgba(79,124,255,.18);
}
.ctaArrow{
  font-size: 44px;
  color: rgba(168,85,247,.92);
  text-shadow: 0 0 40px rgba(168,85,247,.28);
}
@media (prefers-reduced-motion: no-preference){
  .ctaCircle{animation: ctaPulse 3.2s ease-in-out infinite}
  @keyframes ctaPulse{
    0%,100%{transform: translateY(0)}
    50%{transform: translateY(-4px)}
  }
}


/* =========================
   V38: footer bar + right vertical line detail
   ========================= */

.footer.footerBar{
  padding: 26px 0 34px;
  background: transparent;
}
.footerBar .bar{
  display:grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 14px;
  align-items:center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  padding: 14px 16px;
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
}
.barCell{
  color: rgba(236,241,255,.62);
  font-size: 12px;
}
.barCell.mid{display:flex; justify-content:center;}
.barCell.right{display:flex; justify-content:flex-end; gap: 12px; align-items:center;}

.avail{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(236,241,255,.70);
}
.avail .dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 6px rgba(34,197,94,.10), 0 0 36px rgba(34,197,94,.18);
}

.soc{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(236,241,255,.76);
  display:grid;
  place-items:center;
  text-decoration:none;
  transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease;
}
.soc:hover{
  transform: translateY(-2px);
  border-color: rgba(168,85,247,.35);
  box-shadow: 0 20px 70px rgba(0,0,0,.45), 0 0 90px rgba(168,85,247,.12);
}

@media (max-width: 980px){
  .footerBar .bar{grid-template-columns: 1fr; text-align:center}
  .barCell.mid{justify-content:center}
  .barCell.right{justify-content:center}
}

/* Right vertical line detail like example */
.ctaSection{
  position: relative;
}
.ctaSection::after{
  content:"";
  position:absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 110px;
  border-radius: 999px;
  background: rgba(236,241,255,.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  opacity: .55;
}
@media (max-width: 820px){
  .ctaSection::after{display:none;}
}


/* V39: social svg icons */
.soc svg{
  width: 18px;
  height: 18px;
  fill: rgba(236,241,255,.78);
  transition: fill .25s ease;
}
.soc:hover svg{fill: rgba(236,241,255,.92)}


/* =========================
   V40: fixes + creators marquee + grain + footer center
   ========================= */

/* Subtle global grain (background) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 1; /* above bg, below content (content z=1 too; we keep noise low opacity) */
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .18;
}

/* Ensure noise sits under UI elements properly */
.section, main, footer{position:relative; z-index: 2}
#particles{z-index: 1}
.glows{z-index: 0}

/* Remove footer mid cell space and center footer */
.footerBar .bar{
  grid-template-columns: 1fr 1fr 1fr;
}
.footerBar .barCell.left{justify-self:center; text-align:center}
.footerBar .barCell.mid{display:none !important;}
.footerBar .barCell.right{justify-content:center !important;}
.footer.footerBar .wrap{display:flex; justify-content:center;}
.footer.footerBar .bar{width: min(980px, calc(100% - 0px));}

/* Remove skillsBox spacing if any */
.headSplit{grid-template-columns: 1fr !important;}
.headSplit .headRight{display:none !important;}

/* Work section head removed: adjust spacing */
#work .wrap{padding-top: 10px}

/* Creators marquee right-to-left + fade from ~70% */
.creatorsMarquee{
  position:relative;
  display:flex;
  gap: 24px;
  overflow:hidden;
  padding: 18px 0 10px;
  margin-top: 18px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
@supports not (mask-image: linear-gradient(#000,#000)){
  .creatorsMarquee::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(90deg, rgba(5,6,17,1) 0%, rgba(5,6,17,0) 12%, rgba(5,6,17,0) 70%, rgba(5,6,17,1) 100%);
    opacity:.0;
  }
}
.cmTrack{
  display:flex;
  align-items:center;
  gap: 56px;
  flex: 0 0 auto;
  animation: cmScroll 22s linear infinite;
}
@keyframes cmScroll{
  from{transform: translateX(0)}
  to{transform: translateX(-100%)}
}
.creatorsMarquee:hover .cmTrack{animation-play-state: paused;}
@media (prefers-reduced-motion: reduce){
  .cmTrack{animation:none;}
}

/* Process subtitle */
#process .sectionHead .subtitle{
  margin-top: 14px;
  color: rgba(236,241,255,.68);
  max-width: 64ch;
}

/* Ready CTA arrow: bigger + click me animation */
.ctaCircle{
  width: 128px !important;
  height: 128px !important;
}
.ctaArrow{
  font-size: 56px !important;
  font-weight: 900;
  letter-spacing: -0.02em;
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: no-preference){
  .ctaCircle::after{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(168,85,247,.20), rgba(79,124,255,.14), transparent 62%);
    opacity:.0;
    animation: ringPing 2.6s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes ringPing{
    0%,60%{opacity:0; transform: scale(.96)}
    75%{opacity:.55; transform: scale(1)}
    100%{opacity:0; transform: scale(1.06)}
  }
}

/* Remove 'REVIEWS' head already removed; ensure spacing */
#reviews .wrap{padding-top: 8px}


/* =========================
   V41: stats back + centered CTA + tighter services + marquee fades + thick arrow + work readability + extra noise polish
   ========================= */

/* Hero CTAs centered under headline */
.heroCtasCenter{
  justify-content: center !important;
}
.heroLeft{
  text-align: center;
}
.heroLeft p{
  margin-left: auto;
  margin-right: auto;
}
/* Make main CTA clearly the focus */
.heroMainCta{
  padding: 18px 22px !important;
  font-size: 15px !important;
  border-radius: 20px !important;
  min-width: 220px;
}

/* Stats strip triple (aligned) */
.statsStrip.triple{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 820px){
  .statsStrip.triple{grid-template-columns: 1fr}
}

/* Services containers smaller */
.servicesTighter .cardsGrid{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.servicesTighter .card{
  padding: 14px 14px 16px;
  border-radius: 20px;
}
.servicesTighter .card p{
  font-size: 13px;
}
.servicesTighter .card .meta{
  font-size: 11px;
}

/* Creators marquee: in/out fade both sides + gentle opacity falloff */
.creatorsMarquee{
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}
.logoPill{
  opacity: .88;
}
.cmTrack{
  animation-duration: 24s;
}

/* CTA thick SVG arrow */
.ctaArrowSvg{
  width: 58px;
  height: 58px;
  overflow: visible;
  filter: drop-shadow(0 0 28px rgba(168,85,247,.28));
}
.ctaArrowSvg path{
  fill: none;
  stroke: rgba(168,85,247,.95);
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Add a little "nudge" animation to invite clicks */
@media (prefers-reduced-motion: no-preference){
  .ctaArrowSvg{animation: arrowNudge 1.8s ease-in-out infinite}
  @keyframes arrowNudge{
    0%,100%{transform: translate3d(0,0,0)}
    50%{transform: translate3d(2px,-2px,0)}
  }
}

/* Work readability */
#work .tile .cap,
#work .tile .cap b,
#work .tile .cap span{
  color: rgba(236,241,255,.88) !important;
}
#work .tile .cap span{
  opacity: .78;
}
#work .sectionHead h2{
  text-align:center;
}

/* Footer fully centered */
.footerBar .bar{
  justify-items:center;
  text-align:center;
}
.footerBar .barCell.right{
  justify-content:center !important;
}

/* Extra subtle noise polish (already exists in v40) */
body::after{
  opacity: .22 !important;
}


/* =========================
   V42: auto creators logos + layout fixes
   ========================= */

/* Start DIRECT bigger and more centered emphasis */
.heroCtasCenter{
  margin-top: 16px;
}
.heroMainCta{
  min-width: 260px !important;
  padding: 20px 26px !important;
  font-size: 16px !important;
}

/* Services containers narrower */
.servicesTighter .cardsGrid{
  max-width: 860px !important;
}

/* Creators marquee: single row, right->left, fade in/out */
.creatorsMarquee{
  display:flex;
  align-items:center;
  gap: 48px;
  overflow:hidden;
  padding: 18px 0 10px;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}
.cmTrack{
  display:inline-flex !important;
  align-items:center;
  gap: 56px;
  flex: 0 0 auto;
  min-width: 100%;
  animation: cmScroll 22s linear infinite;
}
.creatorsMarquee:hover .cmTrack{animation-play-state: paused;}
@keyframes cmScroll{
  from{transform: translateX(0)}
  to{transform: translateX(-100%)}
}

/* Creator logos as images inside pills */
.logoPill{
  width: 180px;
  height: 56px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.logoPill img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  opacity: .85;
  filter: grayscale(1);
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}
.logoPill:hover img{
  opacity: 1;
  filter: grayscale(.2);
  transform: scale(1.02);
}

/* Thicker CTA arrow */
.ctaArrowSvg path{stroke-width: 9.5 !important;}

/* Footer centered */
.footer.footerBar .wrap{justify-content:center !important;}
.footerBar .bar{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  justify-items:center;
}
.footerBar .barCell{justify-self:center}

/* Work subtext white */
#work .tile .cap span{
  color: rgba(236,241,255,.86) !important;
  opacity: 1 !important;
}

/* Noise effect stronger but still subtle */
body::after{opacity:.26 !important;}


/* =========================
   V43: creators cleanup + centered hero CTA + footer avail + 3D tilt
   ========================= */

/* Hero CTA centered with headline */
.ctaRowCenter{
  display:flex;
  justify-content:center;
  margin-top: 18px;
}
.heroLeft{
  text-align:center;
}
.heroMainCta{
  min-width: 300px !important;
  padding: 22px 30px !important;
  font-size: 16px !important;
  border-radius: 22px !important;
}

/* LEVEL-UP cards not full width */
.servicesTighter .cardsGrid{
  max-width: 820px !important;
}

/* Creators marquee: force single row, loop R->L, fade edges */
.creatorsMarquee{
  display:flex;
  flex-wrap: nowrap;
  align-items:center;
  gap: 56px;
  overflow:hidden;
  padding: 18px 0 10px;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}
.cmTrack{
  display:flex !important;
  flex-wrap: nowrap !important;
  align-items:center;
  gap: 56px;
  flex: 0 0 auto;
  width: max-content;
  animation: cmScroll 22s linear infinite;
}
@keyframes cmScroll{
  from{transform: translateX(0)}
  to{transform: translateX(-50%)}
}

/* Ensure clone sits next to first track (not under) */
.creatorsMarquee > .cmTrack{will-change: transform;}

/* Footer: show availability pill again + center whole bar */
.footerBar .barCell.mid{display:flex !important; justify-content:center;}
.footer.footerBar .wrap{display:flex; justify-content:center;}
.footerBar .bar{justify-items:center; text-align:center;}

/* Work subtext white (stronger) */
#cases .sectionHead p{color: rgba(236,241,255,.76);}
#cases .tile .cap span{color: rgba(236,241,255,.90) !important; opacity:1 !important;}

/* Thicker CTA arrow */
.ctaArrowSvg path{stroke-width: 10.5 !important;}

/* Subtle noise (keep) */
body::after{opacity:.26 !important;}

/* 3D tilt base */
.tilt3d{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .18s ease;
}
.tilt3d::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), rgba(79,124,255,.10), rgba(168,85,247,.08), transparent 60%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.tilt3d:hover::after{opacity:.9}


/* =========================
   V45: options 2,3,4,5,7 + interactive background
   ========================= */

/* HERO: center everything & feather video */
.heroLeft{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.heroBg video{
  opacity:.55;
  filter: saturate(1.05) contrast(1.05);
  mask-image: radial-gradient(1200px 600px at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,.9) 55%, rgba(0,0,0,.2) 78%, rgba(0,0,0,0) 100%);
}
.heroVignette{
  background: radial-gradient(1200px 560px at 50% 40%, rgba(0,0,0,.05), rgba(0,0,0,.55) 65%, rgba(0,0,0,.9) 100%);
}

/* Results chips */
.caseChips{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin: 14px 0 16px;
}
.chip{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(236,241,255,.78);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor:pointer;
  transition: transform .2s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.chip:hover{transform: translateY(-1px); border-color: rgba(168,85,247,.35); box-shadow: 0 24px 70px rgba(0,0,0,.45);}
.chip.active{background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.45);}

/* LEVEL-UP cards hover reveal (Option 2) */
.card{
  position:relative;
  overflow:hidden;
}
.card .more{
  margin-top: 10px;
  color: rgba(236,241,255,.70);
  font-size: 12px;
  line-height: 1.45;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.card .badgeRow{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.badge{
  font-size: 11px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(236,241,255,.68);
}
.card:hover .more,
.card:hover .badgeRow{
  opacity:1;
  transform: translateY(0);
}

/* Creators highlight-on-pass (Option 4) */
.logoPill{transition: transform .25s ease;}
.logoPill img{
  filter: grayscale(calc(1 - var(--hi, 0))) !important;
  opacity: calc(.65 + var(--hi, 0) * .35) !important;
  transform: scale(calc(1 + var(--hi, 0) * .06));
}

/* Magnetic cursor mode (Option 5) */
.cursorBall{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(168,85,247,.45);
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.18), rgba(168,85,247,.18), rgba(79,124,255,.10));
  box-shadow: 0 0 40px rgba(168,85,247,.20);
  mix-blend-mode: screen;
}
.cursorBall.isHot{box-shadow: 0 0 80px rgba(168,85,247,.28), 0 0 160px rgba(79,124,255,.12);}

/* Availability button (Option 7) */
.availBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border-radius: 999px;
  padding: 12px 16px;
  border: 1px solid rgba(34,197,94,.45);
  background: rgba(34,197,94,.10);
  color: rgba(236,241,255,.86);
  font-weight: 900;
  letter-spacing: .02em;
  cursor:pointer;
  box-shadow: 0 24px 90px rgba(0,0,0,.45), 0 0 120px rgba(34,197,94,.12);
}
.availBtn .dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 6px rgba(34,197,94,.10), 0 0 36px rgba(34,197,94,.18);
}
@media (prefers-reduced-motion: no-preference){
  .availBtn{animation: availPulse 2.8s ease-in-out infinite}
  @keyframes availPulse{
    0%,100%{transform: translateY(0)}
    50%{transform: translateY(-2px)}
  }
  .availBtn::after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%, rgba(34,197,94,.22), transparent 70%);
    opacity:.0;
    animation: availRing 2.8s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes availRing{
    0%,60%{opacity:0; transform: scale(.96)}
    75%{opacity:.55; transform: scale(1)}
    100%{opacity:0; transform: scale(1.05)}
  }
}

/* Footer center */
.footer.footerBar .wrap{display:flex; justify-content:center;}
.footerBar .bar{
  grid-template-columns: 1fr auto 1fr;
  width: min(1020px, calc(100% - 32px));
}

/* Ready to level up: remove right line */
.ctaSection::after{display:none !important;}

/* Make LEVEL-UPs subtext white */
#cases .sectionHead p{color: rgba(236,241,255,.86) !important;}

/* Interactive background orbs */
.bgOrbs{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  opacity: .9;
}
.orb{
  position:absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .20;
  transform: translate3d(0,0,0);
  mix-blend-mode: screen;
}
.o1{left: -120px; top: -120px; background: radial-gradient(circle at 30% 30%, rgba(79,124,255,.85), transparent 60%);}
.o2{right: -160px; top: 10%; background: radial-gradient(circle at 30% 30%, rgba(168,85,247,.85), transparent 60%);}
.o3{left: 20%; bottom: -200px; background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.70), transparent 60%);}

/* Keep noise subtle (already exists) */
.noise{opacity:.14;}

/* click ripple */
.clickRipple{
  position: fixed;
  width: 14px; height: 14px;
  border-radius: 50%;
  pointer-events:none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(168,85,247,.45), rgba(79,124,255,.18), transparent 70%);
  animation: ripple .5s ease-out forwards;
}
@keyframes ripple{
  to{opacity:0; transform: translate(-50%,-50%) scale(14);}
}
#baMedia.swap{opacity:.82; filter: blur(0.8px); transition: opacity .12s ease, filter .12s ease}

/* V47 hero video blur + bottom feather */
.heroBg video{
  /* Extra blur + lower opacity to hide video macroblocks and make the background feel "one" */
  filter: blur(18px) saturate(1.08) contrast(1.08);
  opacity: .22;
  transform: scale(1.08);
}
.heroBg{
  /* Soft base wash so the background stays smooth even if the video has compression blocks */
  background:
    radial-gradient(1200px 700px at 35% 35%, rgba(79,124,255,.10), transparent 65%),
    radial-gradient(1100px 700px at 70% 25%, rgba(168,85,247,.10), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.70));
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
}

/* V47 cursor ball positioning */
.cursorBall{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 9999;
  pointer-events: none;
}

/* V47 hover reveal only on hover-capable devices */
@media (hover:hover) and (pointer:fine){
  .card .more, .card .badgeRow{opacity:0 !important; transform: translateY(10px) !important;}
  .card:hover .more, .card:hover .badgeRow{opacity:1 !important; transform: translateY(0) !important;}
}
@media (hover:none){
  .card .more, .card .badgeRow{display:none !important;}
}

/* V47 reviews glow not clipped */
.reviewsGrid, .testimonialsGrid, .reviewGrid{overflow: visible !important;}
.rCard{overflow: visible !important; position: relative;}
.rCard::before{
  content:"";
  position:absolute;
  inset:-26px;
  border-radius: 30px;
  background: radial-gradient(circle at 30% 20%, rgba(168,85,247,.22), rgba(79,124,255,.14), transparent 60%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
  z-index:-1;
}
@media (hover:hover){
  .rCard:hover::before{opacity:1;}
}

/* V47 process arrows always visible */
.processGrid{position:relative;}
.processGrid .arrow, .processGrid .pArrow{opacity:1 !important; transform:none !important;}
.processGrid .pCard{
  position:relative;
}
/* add arrow after each card except last */
.processGrid .pCard:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-34px;
  top:50%;
  transform: translateY(-50%);
  color: rgba(236,241,255,.55);
  font-weight: 900;
  font-size: 22px;
}
@media (max-width: 920px){
  .processGrid .pCard:not(:last-child)::after{
    content:"↓";
    right: 50%;
    top: auto;
    bottom: -34px;
    transform: translateX(50%);
  }
}

/* V47 CTA spacing */
.ctaSection{
  padding-bottom: 110px !important;
}

/* V47 intake remove buttons */
.intakeModal .copyBtn, .intakeModal .mailDirectBtn{display:none !important;}
.intakeModal .step:last-child .nextBtn{display:none !important;}

.intakeModal button[data-action="copy"], .intakeModal a[data-action="mail-direct"]{display:none !important;}
.intakeModal .nav .next:last-child{display:none !important;}

/* V47 extra grain layer */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .08;
}

/* V48: tighter section spacing */
.section{padding:56px 0 !important;}
.section.wipe{padding: 64px 0 !important;}
/* keep hero comfortable */
.section.hero{padding: 0 !important;}

/* V48: prevent review hover glow clipping */
#testimonials, #reviews, .testimonials, .reviews, .testimonialsGrid, .reviewsGrid{
  overflow: visible !important;
}
#testimonials .wrap, #reviews .wrap{
  overflow: visible !important;
}
.rCard{
  overflow: visible !important;
}

/* V48: process arrows correct + always visible */
.processGrid{
  display:flex !important;
  align-items: center;
  justify-content: center;
  gap: 46px !important;
  flex-wrap: wrap;
}
.pCard{
  position: relative;
  min-width: 170px;
  text-align: center;
}
.pCard:not(:last-child)::after{
  content:"→";
  position:absolute;
  right: -34px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(236,241,255,.55);
  font-weight: 900;
  font-size: 22px;
  opacity: 1 !important;
}
@media (max-width: 980px){
  .processGrid{flex-direction: column; gap: 26px !important;}
  .pCard:not(:last-child)::after{
    content:"↓";
    right: 50%;
    top: auto;
    bottom: -22px;
    transform: translateX(50%);
  }
}

/* V48: hover reveal works (hide by default) */
.card .more,
.card .badgeRow{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, max-height .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover .more,
  .card:hover .badgeRow{
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
  }
}
@media (hover:none){
  .card .more, .card .badgeRow{display:none !important;}
}

/* V48 cursor ball stable */
.cursorBall{
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  transform: translate3d(50vw,50vh,0) translate(-50%,-50%);
}
.cursorBall.isHot{
  transform: translate3d(var(--x,0px), var(--y,0px), 0) translate(-50%,-50%) scale(1.65);
}

.cursorBall.isHot{
  /* scale without overriding position: applied via filter trick */
  box-shadow: 0 0 80px rgba(168,85,247,.28), 0 0 160px rgba(79,124,255,.12);
}

/* V48: ensure hero CTA centered */
.ctaRow, .ctaRowCenter{
  display:flex !important;
  justify-content:center !important;
}

/* =========================
   V49 card flip styles
   ========================= */
#services .card{
  perspective: 1200px;
  overflow: visible !important;
}
#services .cardInner{
  position: relative;
  width: 100%;
  min-height: 176px;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
#services .cardFace{
  position: absolute;
  inset: 0;
  padding: 14px 14px 16px;
  border-radius: 20px;
  backface-visibility: hidden;
}
#services .cardFace.back{
  transform: rotateY(180deg);
}
#services .card:hover .cardInner,
#services .card.isFlipped .cardInner{
  transform: rotateY(180deg);
}
#services .cardFace .more{opacity:1 !important; max-height:none !important; transform:none !important; overflow:visible !important;}
#services .cardFace .badgeRow{opacity:1 !important; max-height:none !important; transform:none !important;}

#services .backTitle{
  font-weight: 900;
  letter-spacing: .06em;
  opacity: .8;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 11px;
}
#services .backCta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color: rgba(236,241,255,.86);
}
#services .miniDot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(168,85,247,.95);
  box-shadow: 0 0 0 6px rgba(168,85,247,.10), 0 0 34px rgba(168,85,247,.18);
}

/* V49: tile glow not clipped */
.tiles, .tiles.reveal, #cases .wrap, #cases{overflow: visible !important;}
.tile{overflow: visible !important; position: relative;}
.tile::before{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius: 26px;
  background: radial-gradient(circle at 30% 25%, rgba(168,85,247,.22), rgba(79,124,255,.14), transparent 60%);
  filter: blur(16px);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
  z-index:-1;
}
@media (hover:hover){
  .tile:hover::before{opacity:1;}
}

/* V49: review glow never clipped */
#testimonials, #testimonials .wrap, .testimonialsGrid, .reviewsGrid{overflow: visible !important;}
.rCard{overflow: visible !important;}

/* V49 process arrows (MrBoost pill) */
.pCard::after{content:none !important;}
.processGrid{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap: 26px !important;
  flex-wrap: nowrap;
  overflow: visible;
}
.pArrow{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  display:grid;
  place-items:center;
  box-shadow: 0 24px 90px rgba(0,0,0,.45);
  opacity: .85;
}
.pArrow span{
  font-size: 20px;
  color: rgba(236,241,255,.55);
  transform: translateX(1px);
}
@media (max-width: 980px){
  .processGrid{flex-direction: column; gap: 16px !important; flex-wrap: wrap;}
  .pArrow{transform: rotate(90deg);}
}

/* V49 modal */
.noScroll{overflow:hidden;}
.modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display:none;
}
.modal.open{display:block;}
.modalOverlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.modalPanel{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(980px, calc(100% - 24px));
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,22,.72);
  box-shadow: 0 50px 160px rgba(0,0,0,.65);
  overflow: hidden;
}
.modalClose{
  position:absolute; right: 14px; top: 10px;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(236,241,255,.85);
  font-size: 22px;
  cursor:pointer;
}
.modalHead{
  padding: 18px 18px 10px;
  display:flex;
  align-items: baseline;
  gap: 10px;
}
.modalHead b{font-size: 16px; letter-spacing:.04em;}
.modalHead span{opacity:.65; font-size: 12px;}
.modalBody{padding: 0 18px 18px;}
.wmMedia{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
}
.wmMedia iframe{
  width:100%;
  aspect-ratio: 16/9;
  border:0;
  display:block;
}
.wmMedia img{
  width:100%;
  display:block;
  max-height: 70vh;
  object-fit: contain;
  background: rgba(0,0,0,.25);
}
.wmFallback{opacity:.75; padding: 18px;}

/* V49 CTA circle more interactive */
.ctaCircle{
  position: relative;
  overflow: visible !important;
}
.ctaCircle::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  background: conic-gradient(from 180deg, rgba(168,85,247,.0), rgba(168,85,247,.35), rgba(79,124,255,.25), rgba(34,197,94,.18), rgba(168,85,247,.0));
  filter: blur(14px);
  opacity: .55;
  animation: spinGlow 2.4s linear infinite;
  pointer-events:none;
}
@keyframes spinGlow{to{transform: rotate(360deg);}}
.ctaCircle::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  border: 1px solid rgba(168,85,247,.28);
  opacity: .75;
  pointer-events:none;
}
@media (hover:hover){
  .ctaCircle:hover{transform: translateY(-2px) scale(1.02);}
  .ctaCircle:hover::before{opacity: .9;}
}

/* V49 animated grain */
body::before{
  animation: grainMove 1.6s steps(2,end) infinite;
}
@keyframes grainMove{
  0%{transform: translate3d(0,0,0);}
  25%{transform: translate3d(-2%,1%,0);}
  50%{transform: translate3d(1%,-2%,0);}
  75%{transform: translate3d(-1%,-1%,0);}
  100%{transform: translate3d(0,0,0);}
}

/* V49 cursor base */
.cursorBall{
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events:none !important;
  z-index: 999999 !important;
  border: 1px solid rgba(168,85,247,.45);
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.18), rgba(168,85,247,.18), rgba(79,124,255,.10));
  box-shadow: 0 0 44px rgba(168,85,247,.22);
  mix-blend-mode: screen;
}

/* =========================
   V50: MrBoost polish pack (flip snappy + particles + light sweep + click fix)
   ========================= */

/* Snappier flip */
#services .cardInner{
  transition: transform .42s cubic-bezier(.2,1.05,.2,1) !important;
}
#services .card:hover .cardInner,
#services .card.isFlipped .cardInner{
  transform: rotateY(180deg) translateZ(8px) !important;
}

/* Light sweep */
.lightSweep{
  position: fixed;
  inset: -40%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 500px at 20% 30%, rgba(79,124,255,.10), transparent 60%),
    radial-gradient(900px 520px at 80% 40%, rgba(168,85,247,.10), transparent 60%),
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 38%, transparent 52%);
  filter: blur(18px);
  opacity: .22;
  mix-blend-mode: screen;
  animation: sweepMove 7.5s ease-in-out infinite;
}
@keyframes sweepMove{
  0%{transform: translate3d(-4%, -2%, 0) rotate(0deg);}
  50%{transform: translate3d(4%, 3%, 0) rotate(2deg);}
  100%{transform: translate3d(-4%, -2%, 0) rotate(0deg);}
}

/* Click ripple fix: always visible above overlays */
.clickRipple{
  z-index: 1000002 !important;
  mix-blend-mode: screen;
}

/* Active press micro-interactions */
.btn, .chip, .tile, .ctaCircle, .availBtn{
  transform: translateZ(0);
}
.btn:active, .chip:active, .tile:active, .ctaCircle:active, .availBtn:active{
  transform: translateY(1px) scale(.99);
}

/* Particle burst */
.burstParticle{
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 999px;
  pointer-events:none;
  z-index: 1000003;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(168,85,247,.45), rgba(79,124,255,.20));
  box-shadow: 0 0 20px rgba(168,85,247,.25);
  mix-blend-mode: screen;
  transform: translate(-50%,-50%);
  animation: particleFly .62s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes particleFly{
  to{
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4);
    filter: blur(.6px);
  }
}

/* CTA circle extra "magnetic ring" */
.ctaCircle{
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover:hover){
  .ctaCircle:hover{
    box-shadow: 0 40px 150px rgba(0,0,0,.65), 0 0 120px rgba(168,85,247,.14);
  }
}

/* =========================
   V51: Loose glow (no boxed clipping)
   ========================= */
:root{ --glowA: rgba(168,85,247,.22); --glowB: rgba(79,124,255,.14); }

/* Ensure parents don't clip */
.wrap, .section, #cases, #testimonials, #services, #process{ overflow: visible !important; }
.tiles, .testimonialsGrid, .reviewsGrid, .serviceGrid{ overflow: visible !important; }

/* Universal loose glow layer */
.looseGlow{ position: relative; overflow: visible !important; }
.looseGlow::before{
  content:"";
  position:absolute;
  inset:-42px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, var(--glowA), var(--glowB), transparent 62%);
  filter: blur(20px);
  opacity: 0;
  transform: translateZ(0);
  transition: opacity .22s ease;
  pointer-events:none;
  z-index:-1;
}
@media (hover:hover){
  .looseGlow:hover::before{ opacity: 1; }
}

/* Apply to key cards */
#services .card, #cases .tile, #testimonials .rCard{ overflow: visible !important; }
#services .card::before, #cases .tile::before, #testimonials .rCard::before{ content:none !important; } /* disable older glows if present */

/* =========================
   V51 Process Runway styles
   ========================= */
.processHead{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 18px;
}
.processHead .subtitle{
  max-width: 520px;
  opacity: .78;
}
.processRunway{
  margin-top: 18px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 50px 160px rgba(0,0,0,.55);
  padding: 22px 18px 18px;
  position: relative;
  overflow: visible;
}
.runwayRail{
  position:absolute;
  left: 18px;
  right: 18px;
  top: 44px;
  height: 2px;
  background: linear-gradient(90deg, rgba(168,85,247,.0), rgba(168,85,247,.35), rgba(79,124,255,.28), rgba(34,197,94,.14), rgba(168,85,247,.0));
  opacity: .7;
}
.runwaySteps{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.runStep{
  display:flex;
  align-items:center;
  gap: 10px;
  background: transparent;
  border: 0;
  color: rgba(236,241,255,.70);
  cursor:pointer;
  padding: 10px 8px;
  border-radius: 999px;
  transition: transform .2s ease, color .2s ease;
}
.runStep .node{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 10px rgba(168,85,247,.0);
  transition: background .2s ease, box-shadow .25s ease, transform .2s ease;
}
.runStep .label{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}
.runStep.active{ color: rgba(236,241,255,.92); transform: translateY(-1px); }
.runStep.active .node{
  background: rgba(168,85,247,.92);
  box-shadow: 0 0 0 10px rgba(168,85,247,.10), 0 0 40px rgba(168,85,247,.20);
  transform: scale(1.12);
}
.runwayCards{
  margin-top: 18px;
  min-height: 134px;
  position: relative;
}
.runCard{
  position:absolute;
  inset: 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,22,.40);
  padding: 16px 16px 14px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .28s ease, transform .28s ease;
}
.runCard b{ font-size: 15px; letter-spacing: .02em; }
.runCard p{ margin-top: 6px; opacity: .78; }
.runCard .mini{ margin-top: 10px; opacity: .70; font-size: 12px; line-height: 1.45; }
.runCard.active{
  opacity: 1;
  transform: translateY(0);
  pointer-events:auto;
}
@media (max-width: 900px){
  .processHead{ flex-direction: column; align-items:flex-start; }
  .runwayRail{ top: 54px; }
  .runwaySteps{ flex-wrap: wrap; justify-content:flex-start; }
  .runwayCards{ min-height: 160px; }
}


/* V52: modern title font */
.hero h1, .heroTitle, .sectionHead h2{
  font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing: -0.02em;
}

/* V52: services cards clickable */
#services .card{cursor:pointer;}

/* V52: contact ping */
#contact.ping .contactCard, #contact.ping form, #contact.ping .contactPanel{
  animation: contactPing .6s ease;
}
@keyframes contactPing{
  0%{transform: translateY(0);}
  40%{transform: translateY(-4px);}
  100%{transform: translateY(0);}
}

/* V53: heavier hero title */
.hero h1, .heroTitle{
  font-weight: 900 !important;
  text-shadow: 0 10px 60px rgba(0,0,0,.55);
}
.hero h1 em, .heroTitle em{
  font-weight: 900 !important;
}

/* V53 hero mini video */
.heroMiniVideo{
  margin: 14px 0 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  box-shadow: 0 40px 140px rgba(0,0,0,.55);
  overflow: hidden;
}
.hmvMedia{
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.hmvMedia iframe{
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
  opacity: .92;
}
.hmvChips{
  display:flex;
  gap: 10px;
  padding: 10px 12px 12px;
  justify-content: space-between;
}
.hmvChip{
  flex: 1;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,22,.35);
  padding: 10px 10px;
  text-align: center;
}
.hmvChip b{
  display:block;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.hmvChip span{
  display:block;
  margin-top: 3px;
  font-size: 11px;
  opacity: .72;
}


/* =========================
   V54: scroll choreography + results scrub + cursor states + creators spotlight
   ========================= */

/* Scroll choreography: subtle lift + blur -> crisp as sections enter */
.section{
  --enter: 0;
}
.section .wrap{
  transform: translate3d(0, calc((1 - var(--enter)) * 14px), 0);
  filter: blur(calc((1 - var(--enter)) * 1.2px));
  opacity: calc(.35 + var(--enter) * .65);
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
}

/* Results scrub: cursor hint */
.baMedia{cursor: ew-resize;}
.baMedia.isScrubbing .baHandle{transform: translateX(-50%) scale(1.04);}

/* Cursor states */
.cursorBall{
  --cScale: 1;
  --cAlpha: 1;
  --cHue: 1;
  opacity: var(--cAlpha);
  transform: translate3d(50vw,50vh,0) translate(-50%,-50%) scale(var(--cScale));
  transition: width .18s ease, height .18s ease, border-radius .18s ease, opacity .18s ease, filter .18s ease;
}
.cursorBall.is-cta{ --cScale: 1.9; }
.cursorBall.is-play{
  --cScale: 1.7;
  width: 18px; height: 18px;
}
.cursorBall.is-arrow{
  --cScale: 1.5;
  width: 16px; height: 16px;
}

/* Creators spotlight + pause/slow on hover */
.creatorsMarquee{
  position: relative;
}
.creatorsMarquee::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 240px;
  height: 140px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(168,85,247,.10), transparent 70%);
  filter: blur(10px);
  opacity: .85;
  pointer-events:none;
}

/* Subtle interactive headings (mouse-follow) */
.mouseFloatText{ display:inline-block; will-change: transform; transform-style: preserve-3d; }
.creatorsMarquee:hover .cmTrack{
  /* Pause exactly where you hover (no speed-change jump) */
  animation-play-state: paused !important;
}

/* =========================
   V55: Option 11 ambient spotlight follows mouse
   ========================= */
.ambientSpot{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background: radial-gradient(520px 520px at var(--ax,50%) var(--ay,40%),
    rgba(168,85,247,.18),
    rgba(79,124,255,.10),
    transparent 62%);
  mix-blend-mode: screen;
  filter: blur(0px);
  transition: opacity .2s ease;
}
@media (prefers-reduced-motion: reduce){
  .ambientSpot{display:none;}
}

/* =========================
   V55: Option 7 kinetic underline for headers
   ========================= */
.kineticTitle{
  position: relative;
  display: inline-block;
}
.kineticTitle::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -10px;
  height: 3px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(168,85,247,.0), rgba(168,85,247,.65), rgba(79,124,255,.45), rgba(34,197,94,.28), rgba(168,85,247,.0));
  transform-origin: left center;
  transform: scaleX(var(--k, .15));
  opacity: .9;
  filter: blur(.2px);
}
.kineticTitle::before{
  content:"";
  position:absolute;
  left: calc(var(--kx, .15) * 100%);
  bottom: -11px;
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.55), rgba(168,85,247,.55), rgba(79,124,255,.25));
  opacity: .0;
  transform: translateX(-50%);
  transition: opacity .2s ease;
  filter: blur(2px);
  pointer-events:none;
}
@media (hover:hover){
  .kineticTitle:hover::before{opacity: .9;}
  .kineticTitle:hover::after{transform: scaleX(.95);}
}

/* =========================
   V55: Option 12 case mini story
   ========================= */
.caseStory{
  margin-top: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(236,241,255,.78);
  font-weight: 700;
  letter-spacing: .02em;
  max-width: 560px;
  opacity: .0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.caseStory.show{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   V56: Options 13, 14, 15
   ========================= */

/* 13) Sticky mini CTA */
.stickyCta{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  pointer-events: none;
  z-index: 1000000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,22,.72);
  color: rgba(236,241,255,.88);
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 30px 120px rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease;
}
.stickyCta .scDot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 6px rgba(34,197,94,.12), 0 0 34px rgba(34,197,94,.22);
}
.stickyCta .scArrow{opacity:.7; transform: translateX(0); transition: transform .2s ease, opacity .2s ease;}
.stickyCta.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
@media (hover:hover){
  .stickyCta:hover{
    border-color: rgba(168,85,247,.35);
  }
  .stickyCta:hover .scArrow{opacity:1; transform: translateX(3px);}
}
@media (prefers-reduced-motion: no-preference){
  .stickyCta.show{animation: stickyPulse 2.8s ease-in-out infinite;}
  @keyframes stickyPulse{ 0%,100%{filter: brightness(1);} 50%{filter: brightness(1.08);} }
}

/* 14) Cursor tooltip */
.cursorTip{
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(-9999px,-9999px,0);
  z-index: 1000001;
  pointer-events:none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,12,22,.72);
  color: rgba(236,241,255,.86);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .14s ease;
}
.cursorTip.show{opacity:1;}
@media (pointer: coarse){ .cursorTip{display:none;} }

/* 15) Scroll-synced gradient shift (uses --gs) */
body{
  background-image:
    radial-gradient(1200px 900px at 20% calc(10% + var(--gs,0)*40%), rgba(79,124,255,.10), transparent 60%),
    radial-gradient(1200px 900px at 80% calc(20% + var(--gs,0)*35%), rgba(168,85,247,.10), transparent 60%),
    radial-gradient(1000px 800px at 50% calc(90% - var(--gs,0)*40%), rgba(34,197,94,.07), transparent 60%);
}

/* =========================
   V57: title hover polish (no duplicate text)
   ========================= */
.glitchTitle{position:relative; text-shadow: 0 10px 60px rgba(0,0,0,.45);}
@media (hover:hover){
  .glitchTitle:hover{filter: drop-shadow(0 0 26px rgba(168,85,247,.22)) drop-shadow(0 0 26px rgba(79,124,255,.18));}
}
.glitchTitle::before,
.glitchTitle::after{display:none !important;}
@keyframes microJitter{
  0%{transform: translate3d(0,0,0);}
  25%{transform: translate3d(.2px,0,0);}
  50%{transform: translate3d(0,.2px,0);}
  75%{transform: translate3d(-.2px,0,0);}
  100%{transform: translate3d(0,0,0);}
}

/* V2: clearer stats note */
.statsNote{
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(236,241,255,.70);
  text-align: center;
}