/* ============================================================
   LanderLab case study — 1920px design canvas, scaled to viewport
   Fonts: Poppins (headings), Inter (body). Colours from Figma.
   ============================================================ */
:root{
  --black:#000; --white:#fff;
  --g717:#717171; --g8f8:#8f8f8f; --ge6:#e6e6e6; --gb9:#b9b9b9;
  --green:#2eb67c; --blue:#1b59f8; --blue2:#257cff; --purple:#771ee6; --yellow:#facc15;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff;color:#000;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:none}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* ---------- viewport / stage scaling ---------- */
.viewport{position:relative;width:100%;overflow:hidden}
.stage{position:relative;width:1920px;height:23178px;transform-origin:0 0;background:#fff}
body.zoom-100 .viewport{overflow:visible}
body.zoom-100{overflow-x:auto}

.sec{position:absolute;left:0;width:1920px}

/* ---------- fixed UI ---------- */
.ui-back,.ui-zoom{position:fixed;z-index:50;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:rgba(20,20,20,.72);color:#fff;font:500 13px/1 Inter,sans-serif;letter-spacing:.01em;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .2s,transform .2s;cursor:pointer}
.ui-back{left:18px;top:18px}
.ui-zoom{right:18px;bottom:18px}
.ui-back:hover,.ui-zoom:hover{background:rgba(20,20,20,.9);transform:translateY(-1px)}
.ui-zoom__sep{opacity:.4}
.ui-zoom__label{opacity:.45}
.ui-zoom:not([aria-pressed="true"]) .ui-zoom__label:first-child,.ui-zoom[aria-pressed="true"] .ui-zoom__label:last-child{opacity:1}
.progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#6633ee,#0ac4e2);transform-origin:0 0;transform:scaleX(0)}

/* ---------- type helpers ---------- */
.h56{font:400 56px/64px Poppins,sans-serif}
.h64{font:400 64px/80px Poppins,sans-serif}
.h32{font:400 32px/40px Poppins,sans-serif}
.p20{font:400 20px/32px Inter,sans-serif;color:var(--g717)}
.p20.grey{color:var(--g8f8)}
.p20 b{font-weight:700}
.p20 b.light{color:#e6e6e6}
.center{text-align:center}
/* Figma radial gradient text: solid centre → 40% at the edges */
.grad-b{color:transparent;-webkit-background-clip:text;background-clip:text;background-image:radial-gradient(65% 100% at 50% 50%,#000 30%,rgba(0,0,0,.4) 100%)}
.grad-w{color:transparent;-webkit-background-clip:text;background-clip:text;background-image:radial-gradient(65% 100% at 50% 50%,#fff 30%,rgba(255,255,255,.4) 100%)}

/* ---------- reveal system ---------- */
[data-reveal]{--d:0s;transition:opacity .9s var(--ease) var(--d),transform .9s var(--ease) var(--d),filter .9s var(--ease) var(--d);will-change:opacity,transform}
[data-reveal="up"]{opacity:0;transform:translateY(40px)}
[data-reveal="fade"]{opacity:0}
[data-reveal="left"]{opacity:0;transform:translateX(-40px)}
[data-reveal="right"]{opacity:0;transform:translateX(60px)}
[data-reveal="scale"]{opacity:0;transform:scale(.92)}
[data-reveal="pop"]{opacity:0;transform:scale(.6);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
[data-reveal="float"]{opacity:0;transform:translateY(30px) scale(.96)}
/* headings: soft focus-pull */
[data-reveal="blur"]{opacity:0;transform:translateY(28px);filter:blur(14px);transition-duration:1.1s}
[data-reveal="blur"].in{filter:blur(0)}
/* hero mock: swings in from the right in 3D */
[data-reveal="mock"]{opacity:0;transform:perspective(1400px) translateX(90px) rotateY(-14deg) scale(.96);transition-duration:1.4s}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="lines"] i{transform:scaleY(0);transform-origin:50% 0;transition:transform 1.2s var(--ease) var(--d)}
[data-reveal="lines"].in i{transform:none}
[data-reveal="lines"] i:nth-child(n){--d:calc(.08s * var(--i,1))}
/* once the entrance has played (JS adds .settled): drop the stagger delay so hover
   transitions respond instantly, and release the compositor hint */
[data-reveal].settled{transition-delay:0s;will-change:auto}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal="lines"] i{opacity:1!important;transform:none!important;transition:none!important}
  [data-reveal="blur"]{filter:none!important}
  .pain__card .t-in,.pain__card .author__avatar,.pain__photo,.pain__photo>img,.card820__mock>img,.epp__icon{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .pain__card::after{transition:none!important;transform:none!important}
  .pixels .px{opacity:1!important;transform:none!important}
  .anim,.anim *{animation:none!important}
  .solution__bg,.solution__beam,.solution__flare,.ai__glow,.ai__orb,
  .game__coin,.game__title,.game__mouth,.pixels .px{animation:none!important}
}

/* ============================================================ HERO */
.hero{background:#000;border-radius:0 0 80px 80px;overflow:hidden}
.hero__glow{position:absolute;inset:0;border-radius:0 0 57.6px 57.6px;
  background:radial-gradient(2496px 1157px at 960px 108px,rgba(0,0,0,0) 37.41%,rgba(26,13,60,.25) 45.375%,rgba(51,26,119,.5) 53.34%,rgba(77,38,179,.75) 61.3%,#6633ee 69.27%,#794df0 73.11%,#8c66f2 76.95%,#b399f7 84.6%,#d9ccfb 92.3%,#fff 100%);
  animation:heroPulse 9s ease-in-out infinite alternate}
@keyframes heroPulse{from{transform:scale(1) translateY(0)}to{transform:scale(1.04) translateY(-18px)}}
.hero__title{position:absolute;left:120px;top:121px;font:400 64px/80px Poppins,sans-serif;white-space:nowrap}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease)}
.hero__title.in .line:nth-child(2)>span{transition-delay:.12s}
.hero__title.in .line>span{transform:none}
.hero__lead{position:absolute;left:120px;top:306px;width:538px;font:400 20px/32px Inter,sans-serif;color:#8f8f8f}
.hero__results{position:absolute;left:120px;top:564px;width:472px;display:flex;flex-direction:column;gap:16px}
.hero__results-label{font:italic 500 20px/20px Inter,sans-serif;color:#fff}
.hero__results .stat+.stat{margin-top:8px}
.stat{display:flex;align-items:center;gap:20px;padding:20px;border-radius:19.167px;background:rgba(0,0,0,.2);box-shadow:0 4px 12px rgba(0,0,0,.15);backdrop-filter:blur(2px)}
.stat__num{width:127px;flex:none;font:400 48px/64px Poppins,sans-serif;white-space:nowrap}
.stat__txt{flex:1;font:400 16px/1.5 Inter,sans-serif;color:rgba(255,255,255,.8)}
.stat__txt b{font-weight:700}
.hero__mock{position:absolute;left:753px;top:300px;width:1167px;height:780px;transform-style:preserve-3d;perspective:1400px}
.hero__mock img{width:1167px;height:780px;transition:transform .6s var(--ease)}

/* ============================================================ JOURNEY */
.journey__head{position:absolute;left:120px;top:0;width:870px;display:flex;flex-direction:column;gap:30px}
.journey__labels span{position:absolute;top:204px;font:500 20px/32px Inter,sans-serif;color:#8f8f8f;white-space:nowrap}
.journey__lines{position:absolute;left:0;top:250px;width:1920px;height:696px;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);mask-image:linear-gradient(to bottom,#000 60%,transparent 100%)}
.journey__lines i{position:absolute;top:0;height:100%;width:0;border-left:1px dashed #e9e9e9}
.journey__lines i.major{border-left-color:#d8d8d8}
.journey__lines i.major::before{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:#c4c4c4}
.journey__lines i:nth-child(1){--i:1}.journey__lines i:nth-child(2){--i:2}.journey__lines i:nth-child(3){--i:3}.journey__lines i:nth-child(4){--i:4}.journey__lines i:nth-child(5){--i:5}.journey__lines i:nth-child(6){--i:6}.journey__lines i:nth-child(7){--i:7}.journey__lines i:nth-child(8){--i:8}.journey__lines i:nth-child(9){--i:9}
.pill{position:absolute;display:flex;align-items:center;gap:12px;padding:10px 30px;border-radius:50px;font:500 18px/32px Inter,sans-serif;white-space:nowrap}
.pill.settled{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pill i{width:12px;height:12px;border-radius:30px;flex:none}
.pill--grey{background:#efefef;color:#8f8f8f}.pill--grey i{background:#838383;box-shadow:0 0 0 3px rgba(131,131,131,.2)}
.pill--black{background:#000;color:#fff}.pill--green{background:#2eb67c;color:#fff}.pill--blue{background:#1b59f8;color:#fff}
.pill--black i,.pill--green i,.pill--blue i{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.pill.in:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 30px rgba(0,0,0,.12)}
.pill i{animation:pillDot 2.4s ease-in-out infinite}
@keyframes pillDot{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.2)}50%{box-shadow:0 0 0 6px rgba(255,255,255,.08)}}
.pill--grey i{animation-name:pillDotGrey}
@keyframes pillDotGrey{0%,100%{box-shadow:0 0 0 3px rgba(131,131,131,.2)}50%{box-shadow:0 0 0 6px rgba(131,131,131,.08)}}

/* ============================================================ PAIN POINTS */
.bg-texture{position:absolute;left:0;width:1920px;height:2880px;opacity:.1;mix-blend-mode:exclusion;pointer-events:none}
.pain__head{position:absolute;left:193px;top:0;width:1534px;display:flex;flex-direction:column;align-items:center;gap:10px}
.pain__head p{width:792px}
.pain__card{position:absolute;border-radius:20px;background:#fff;border:1px solid #e6e6e6}
.pain__card.settled{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pain__card:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
/* faint closing-quote glyph marks each card as a user quote */
.pain__card::after{content:"”";position:absolute;right:30px;top:-4px;font:600 150px/1 Poppins,sans-serif;color:#000;opacity:0;transform:scale(.6) rotate(-10deg);pointer-events:none;transition:opacity 1s var(--ease) calc(var(--d) + .5s),transform 1s cubic-bezier(.34,1.56,.64,1) calc(var(--d) + .5s)}
.pain__card.in::after{opacity:.06;transform:none}
.pain__card--dark::after{color:#fff}
.pain__card--dark.in::after{opacity:.2}
.pain__card--dark:hover{box-shadow:0 40px 90px -30px rgba(102,51,238,.5)}
/* staggered content inside each card: --d from the card, --s per element */
.pain__card .t-in{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease) calc(var(--d) + var(--s,.25s)),transform .8s var(--ease) calc(var(--d) + var(--s,.25s))}
.pain__card.in .t-in{opacity:1;transform:none}
.pain__card .author__avatar{opacity:0;transform:scale(.4) rotate(-12deg);transition:opacity .5s var(--ease) calc(var(--d) + var(--s,.25s) + .12s),transform .9s cubic-bezier(.34,1.56,.64,1) calc(var(--d) + var(--s,.25s) + .12s)}
.pain__card.in .author__avatar{opacity:1;transform:none}
.pain__card.settled .t-in,.pain__card.settled .author__avatar,.pain__card.settled .pain__photo,.pain__card.settled::after{transition-delay:0s}
blockquote{margin:0}
.pain__quote::before{content:"“"}.pain__quote::after{content:"”"}
.pain__card h3{font:500 28px/32px Poppins,sans-serif;color:#000}
.pain__card p,.pain__card .pain__quote{font:400 20px/32px Inter,sans-serif;color:#717171}
.pain__card--dark{left:193px;top:188px;width:670px;height:800px;border:0;overflow:hidden}
.pain__card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px;transition:transform 1.2s var(--ease)}
.pain__card--dark:hover .pain__card-bg{transform:scale(1.04)}
.pain__card-body{position:absolute;left:40px;top:40px;width:590px;display:flex;flex-direction:column;gap:16px}
.pain__card--dark h3,.pain__card--dark p,.pain__card--dark .pain__quote{color:#fff}
.author{display:flex;align-items:center;gap:12px}
.pain__card--dark .author{position:absolute;left:40px;top:700px}
.author__avatar{position:relative;width:60px;height:60px;border-radius:5px;border:1px solid #e6e6e6;overflow:hidden;flex:none}
.author__avatar img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.author__meta{display:flex;flex-direction:column;width:160px}
.author__meta b{font:600 20px/32px Poppins,sans-serif;color:#000}
.author__meta small{font:400 16px/20px Poppins,sans-serif;color:rgba(0,0,0,.8);white-space:nowrap}
.author--light .author__meta b{color:#fff}.author--light .author__meta small{color:rgba(255,255,255,.8)}
.pain__card--ab{left:903px;top:188px;width:824px;height:380px;padding:40px;display:flex;flex-direction:column;gap:16px}
.pain__card--ab .author{margin-top:auto}
.pain__card--easy{left:903px;top:608px;width:824px;height:380px;padding:20px;display:flex;gap:40px;align-items:flex-start}
.pain__photo{position:relative;width:300px;height:340px;border-radius:10px;overflow:hidden;flex:none;clip-path:inset(0 0 100% 0 round 10px);transition:clip-path 1.1s var(--ease) calc(var(--d) + .15s)}
.pain__card.in .pain__photo{clip-path:inset(0 0 0 0 round 10px)}
.pain__photo>img{width:100%;height:119.4%;object-fit:cover;transform:scale(1.12);transition:transform 1.8s var(--ease) calc(var(--d) + .15s)}
.pain__card.in .pain__photo>img{transform:none}
.pain__card.settled .pain__photo>img{transition:transform 1.2s var(--ease)}
.pain__card--easy.settled:hover .pain__photo>img{transform:scale(1.04)}
.pain__photo-cap{position:absolute;left:0;right:0;bottom:0;height:104px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(to top,rgba(255,255,255,.9),rgba(255,255,255,0));backdrop-filter:blur(2px);border-radius:0 0 10px 10px}
.pain__photo-cap b{font:600 20px/32px Poppins,sans-serif;color:#000}
.pain__photo-cap small{font:400 16px/20px Poppins,sans-serif;color:rgba(0,0,0,.8)}
.pain__easy-body{padding:20px 0;display:flex;flex-direction:column;gap:16px}

/* ============================================================ UI KIT */
.uikit{background:#000;border-radius:80px;overflow:hidden}
.uikit img{width:1920px;height:4540px}

/* ============================================================ SOLUTION */
.solution{background:#000;border-radius:0 0 80px 80px;overflow:hidden}
/* Figma places "image 9" as a 2048x2048 square at (-64,-524) — squashing it into
   1920x1000 flattened the light beam, so keep the source aspect ratio. */
.solution__bg{position:absolute;left:-64px;top:-524px;width:2048px;height:2048px;object-fit:cover;animation:solBreathe 12s ease-in-out infinite alternate}
@keyframes solBreathe{from{scale:1}to{scale:1.06}}
.solution__beam{position:absolute;left:0;top:0;width:1920px;height:1000px;animation:beam 5s ease-in-out infinite alternate}
@keyframes beam{from{opacity:.7}to{opacity:1}}
/* vertical core of the beam, brightening on a slow cycle */
.solution__flare{position:absolute;left:50%;top:0;width:150px;height:1000px;margin-left:-75px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(46,182,172,0) 0%,rgba(46,199,190,.06) 38%,rgba(64,222,208,.17) 64%,rgba(120,240,230,.09) 82%,rgba(46,182,172,0) 100%);
  filter:blur(18px);opacity:.5;animation:solFlare 6.5s ease-in-out infinite alternate}
@keyframes solFlare{from{opacity:.3;transform:scaleX(.85)}to{opacity:.72;transform:scaleX(1.15)}}
.solution__title{position:absolute;left:110px;top:260px;width:1700px;height:432px}

/* ============================================================ EDITOR PAIN POINTS */
.epp__col{position:absolute;left:120px;top:0;width:801px;display:flex;flex-direction:column;gap:32px}
.epp__col h2{margin-bottom:-2px}
.epp__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.epp__list li{display:flex;align-items:center;gap:14px;padding:22px 0;border-top:1px solid rgba(0,0,0,.08);width:801px}
.epp__list li:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.epp__icon{width:56px;height:56px;border-radius:8px;border:1px solid rgba(0,0,0,.2);display:grid;place-items:center;flex:none;opacity:0;transform:scale(.5) rotate(-16deg);transition:transform .9s cubic-bezier(.34,1.56,.64,1) calc(var(--d) + .25s),opacity .5s var(--ease) calc(var(--d) + .25s),background .4s}
.epp__list li.in .epp__icon{opacity:1;transform:none}
.epp__list li.settled .epp__icon{transition:transform .4s var(--ease),background .4s}
.epp__icon img{width:32px;height:32px}
.epp__list li.in:hover .epp__icon{transform:rotate(-6deg) scale(1.05);background:#f7f7f7}
.epp__list li>span:last-child{display:flex;flex-direction:column}
.epp__list b{font:400 20px/28px Poppins,sans-serif;color:#000;text-transform:uppercase}
.epp__list small{font:400 16px/24px Inter,sans-serif;color:#717171;white-space:nowrap}
.epp__mock{position:absolute;left:780px;top:0;width:1140px;height:800px;overflow:hidden}
.epp__mock img{width:1140px;height:800px}

/* ============================================================ CARDS (820) */
.nav__head{position:absolute;left:120px;top:0;width:740px;display:flex;flex-direction:column;gap:17px}
.nav .card820{margin-left:120px}
.card820{position:absolute;width:820px;padding:32px;border-radius:30px;background:#fff;border:1px solid #e6e6e6;display:flex;flex-direction:column;gap:16px}
.card820.settled{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card820:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
.card820__mock{width:756px;height:400px;border-radius:20px;background:#f3f3f3;overflow:hidden;margin-bottom:16px;position:relative}
.card820__mock>img{width:756px;height:400px;transform:scale(1.08);transition:transform 1.8s var(--ease) calc(var(--d) + .2s)}
.card820.in .card820__mock>img{transform:none}
.card820 h3{font:400 24px/32px Poppins,sans-serif;color:#000;text-transform:uppercase}
.card820 p{font:400 20px/32px Inter,sans-serif;color:#717171}
.card820 .sol{font-style:italic;font-weight:500}
.card820 .sol b{font-weight:700;font-style:italic}

/* ============================================================ UNIFIED SIDEBAR */
.editor__frame{position:absolute;left:120px;top:0;width:1679px;height:1064px;border-radius:50px;overflow:hidden}
.editor__frame img{width:1679px;height:1064px}

/* ============================================================ UI SYSTEM ENHANCEMENTS */
.sys__text{position:absolute;left:120px;top:52px;width:600px;display:flex;flex-direction:column;gap:17px;z-index:2}
.comp{position:absolute;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.comp.in{animation:floaty 6s ease-in-out infinite;animation-delay:calc(var(--d) * 4)}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
.sys__fade{position:absolute;left:-10px;width:1940px;height:221px;z-index:1;background:linear-gradient(to top,#fff,rgba(255,255,255,0));pointer-events:none}
.sys__white{position:absolute;left:0;top:903px;width:1920px;height:147px;background:#fff}
.sys__exclude{position:absolute;left:0;top:1050px;width:1920px;height:80px;z-index:3}

/* ============================================================ AI */
.ai{background:#000;overflow:hidden}
.ai__glow{position:absolute;pointer-events:none;will-change:transform}
.ai__glow.g1{animation:drift1 14s ease-in-out infinite alternate,glowPulse 7s ease-in-out infinite}
.ai__glow.g2{animation:drift2 17s ease-in-out infinite alternate,glowPulse 9s ease-in-out infinite -3s}
.ai__glow.g3{animation:drift3 16s ease-in-out infinite alternate,glowPulse 8s ease-in-out infinite -5s}
@keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes drift1{from{transform:translate(0,0) rotate(0)}to{transform:translate(60px,-40px) rotate(4deg)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(-70px,50px) scale(1.06)}}
@keyframes drift3{from{transform:translate(0,0)}to{transform:translate(-40px,-60px)}}
.ai__word{position:absolute;opacity:.14;filter:drop-shadow(0 0 .6px rgba(255,255,255,.35))}
.ai__word--impl{opacity:.17}
[data-reveal].ai__word.in{opacity:.14}[data-reveal].ai__word--impl.in{opacity:.17}
.ai__orb{position:absolute}
.ai__orb.in{animation:orb 5s ease-in-out infinite,orbBreathe 6.5s ease-in-out infinite}
@keyframes orb{0%,100%{translate:0 0;filter:drop-shadow(0 0 0 rgba(10,196,226,0))}50%{translate:0 -16px;filter:drop-shadow(0 30px 40px rgba(10,196,226,.25))}}
@keyframes orbBreathe{0%,100%{scale:1}50%{scale:1.05}}
.ai__text{position:absolute;display:flex;flex-direction:column;gap:17px}
.ai__text--center{align-items:center;text-align:center}
.ai__textgen{position:absolute;left:0;width:1920px;height:699px;overflow:hidden}
.ai__textgen img{width:1920px;height:699px}
.ai__hair{position:absolute;left:-4px;width:1932px;height:35px;background:linear-gradient(to top,#000,rgba(0,0,0,0));pointer-events:none}
.ai__side{position:absolute;opacity:.2}
.ai__grid{position:absolute;opacity:.9}
.ai__main{position:absolute;width:1110px;height:690px}
.ai__main img{width:1110px;height:690px}
.ai__main.in{animation:hover 6s ease-in-out infinite}
@keyframes hover{0%,100%{translate:0 0}50%{translate:0 -8px}}
.prompt{position:absolute;width:912px;height:100px;display:flex;align-items:center;gap:21.4px;padding:14.3px 14.3px 14.3px 24px;border-radius:21.4px;background:#252525;border:1.43px solid #3e3e3e;box-shadow:0 4px 7.5px rgba(0,0,0,.26)}
.prompt__text{width:586px;font:400 20px/32px Inter,sans-serif;color:#b9b9b9;min-height:64px}
.prompt__text.typing::after{content:"";display:inline-block;width:2px;height:22px;background:#b9b9b9;vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{to{opacity:0}}
.prompt__btn{position:relative;width:266px;height:71.4px;border:0;background:none;padding:0;cursor:pointer;color:#fff}
.prompt__btn img{position:absolute;left:-21.5px;top:-21.4px;width:309px;height:114px;pointer-events:none;transition:filter .4s}
.prompt__btn:hover img{filter:brightness(1.15) saturate(1.1)}
.prompt__btn span{position:absolute;left:71.5px;top:21.8px;width:183px;font:500 22.86px/1.2 Inter,sans-serif;text-align:left;text-shadow:0 .61px 3.66px rgba(86,46,252,.2)}
.ai__hand{position:absolute;transform:rotate(30.4deg);animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:-6px -6px}}
.ai__copilot{position:absolute;width:949px;height:867px}
.ai__copilot img{width:949px;height:867px}
.ai__measure{position:absolute}
/* decorative AI layers are overlays only — never let them swallow pointer events */
.ai__glow,.ai__word,.ai__orb,.ai__side,.ai__grid,.ai__hand,.ai__measure,.ai__hair{pointer-events:none}

/* ============================================================ PIXELS */
.pixels{position:absolute;left:0;width:1920px;height:383px;overflow:hidden;pointer-events:none;
  --mask:linear-gradient(to bottom,#000 0,#000 40%,rgba(0,0,0,.55) 68%,rgba(0,0,0,.14) 88%,transparent 100%);
  -webkit-mask-image:var(--mask);mask-image:var(--mask)}
.pixels .track{position:absolute;left:0;top:0;width:2027px;height:383px}
.pixels .px{position:absolute;width:70px;height:70px;background:var(--c);opacity:0;transform:scale(.25)}
/* entrance staggers by index, then colours breathe on a loop */
.pixels.in .px{animation:pxIn .55s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * .016s) forwards}
@keyframes pxIn{to{opacity:1;transform:none}}
.pixels.in .px--color{animation:pxIn .55s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * .016s) forwards,
  pxGlow 3.4s ease-in-out calc(1s + var(--i) * .016s) infinite}
@keyframes pxGlow{0%,100%{filter:none}50%{filter:brightness(1.4) saturate(1.3)}}
.pixels.in .px.blink{animation:pxIn .55s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * .016s) forwards,
  pxBlink 3s ease-in-out calc(1s + var(--i) * .016s) infinite}
@keyframes pxBlink{0%,100%{opacity:1}50%{opacity:.35}}
/* the closing strip is mirrored, so its fade runs the other way */
.pixels--ghost{opacity:.18;--mask:linear-gradient(to top,#000 0,#000 40%,rgba(0,0,0,.55) 68%,rgba(0,0,0,.14) 88%,transparent 100%)}
.pixels--ghost .track{transform:rotate(180deg);left:-107px}

/* ============================================================ GAME */
.game__title{position:absolute}
.game__coin{position:absolute;transform-origin:50% 50%}
.game__coin.in{animation:coin 1.6s ease-in-out infinite,coinHop 3.2s ease-in-out infinite}
@keyframes coin{0%,100%{rotate:0deg}50%{rotate:-12deg}}
@keyframes coinHop{0%,100%{translate:0 0}50%{translate:0 -10px}}
.game__title.in{animation:gameFloat 7s ease-in-out 1.1s infinite}
@keyframes gameFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.game__mouth{position:absolute;transform-origin:0% 50%}
.game__mouth.in{animation:chomp 1.6s ease-in-out infinite}
@keyframes chomp{0%,100%{rotate:0deg}50%{rotate:-14deg}}
.card820--game{margin-left:120px}
.winner{background:#f3f3f3}
.winner__table{position:absolute;left:28px;top:29px;width:700px;border-radius:5.5px;overflow:hidden;background:#fff;border:.92px solid #e8e8ff;font-family:Inter,sans-serif;color:#252430}
.winner__hdr{padding:14.7px;font:700 14.7px/22px Inter,sans-serif;color:#262626;border-bottom:.92px solid #e8e8ff}
.winner__row{display:grid;grid-template-columns:275.6px 119.4px 152.5px 152.5px;align-items:center;border-bottom:.92px solid #e8e8ff;min-height:66.1px}
.winner__row.alt{background:#fcfcfc}
.winner__row--head{min-height:40px;font:500 12.86px/18.4px Inter,sans-serif}
.winner__row--head span{display:flex;justify-content:space-between;align-items:center;padding:11px 14.7px;border-right:.92px solid #e8e8ff}
.winner__row--head span:last-child{border-right:0}
.winner__row--head .blue{color:#2679ff}
.sort{width:14.7px;height:14.7px;background:url("../assets/case-study/winner-sort.svg") center/contain no-repeat;display:inline-block}
.winner__row .c-name{display:flex;align-items:center;gap:12.9px;padding:11px 14.7px;border-right:.92px solid #e8e8ff;height:100%}
.winner__row .c-num{padding:11px 14.7px;text-align:right;font:400 12.86px/14.7px Inter,sans-serif;border-right:.92px solid #e8e8ff;height:100%;display:flex;align-items:center;justify-content:flex-end}
.winner__row .c-num:last-child{border-right:0}
.pg{background:#f1f1ff;border-radius:4.6px;padding:6.4px 9.6px;display:grid;place-items:center}
.pg img{width:24.8px;height:31.2px}
.nm{display:flex;flex-direction:column;gap:3.7px}
.nm>span{display:flex;align-items:center;gap:7.3px;font:400 12.86px/18.4px Inter,sans-serif}
.nm small{font:500 11px/1 Inter,sans-serif;color:#8b8b9e;text-transform:lowercase}
.medal{width:11.8px;height:18.4px}
.winner__row .medal{animation:medal 2.6s ease-in-out infinite}
@keyframes medal{0%,100%{translate:0 0}50%{translate:0 -3px}}
.winner__foot{display:flex;align-items:center;gap:7.3px;padding:11px 14.7px;font:500 11px/14.7px Inter,sans-serif}
.winner__foot img{width:14.7px;height:14.7px}
[data-reveal="rows"] .winner__row:not(.winner__row--head){opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal="rows"].in .winner__row:not(.winner__row--head){opacity:1;transform:none}
[data-reveal="rows"].in .winner__row:nth-child(3){transition-delay:.1s}[data-reveal="rows"].in .winner__row:nth-child(4){transition-delay:.2s}[data-reveal="rows"].in .winner__row:nth-child(5){transition-delay:.3s}[data-reveal="rows"].in .winner__row:nth-child(6){transition-delay:.4s}[data-reveal="rows"].in .winner__row:nth-child(7){transition-delay:.5s}
.confetti{background:#f3f3f3}
.confetti__bg{position:absolute;inset:0;width:756px;height:400px;animation:confettiFall 8s linear infinite}
@keyframes confettiFall{0%{translate:0 -6px}50%{translate:0 6px}100%{translate:0 -6px}}
.toast{position:absolute;left:82px;top:168px;padding:19.7px 39.7px;border-radius:8.4px;background:#257cff;color:#fff;font:400 18.28px/23.9px Inter,sans-serif;white-space:nowrap;box-shadow:0 10px 30px rgba(37,124,255,.25)}
.toast b{font-weight:700}

/* ============================================================ FINAL */
.final__head{position:absolute;left:120px;top:0;width:920px;display:flex;flex-direction:column;gap:17px}
.final__row{position:absolute;will-change:transform}
.final__row.settled{will-change:transform}
.final__edge{position:absolute;top:277px;width:151px;height:1395px;pointer-events:none;z-index:2}
.final__edge--l{left:-2px;background:linear-gradient(to right,#fff,rgba(255,255,255,0))}
.final__edge--r{right:-2px;background:linear-gradient(to left,#fff,rgba(255,255,255,0))}

/* ============================================================ FOOTER */
.foot{background:#000;overflow:hidden}
.foot__bg{position:absolute;left:0;width:1920px;height:1103px}
.foot__thanks{position:absolute;left:345px;top:183px;width:1230px;display:flex;flex-direction:column;align-items:center;font:italic 900 186.8px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.foot__thanks span{display:block;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to bottom,rgba(255,255,255,.2) 0%,rgba(255,255,255,.03) 100%);line-height:226px}
.foot__thanks span+span{margin-top:-100px}
.foot__panel{position:absolute;left:57px;top:486px;width:1806px;height:503px;border-radius:40px;padding:40px;display:flex;gap:40px;background:linear-gradient(to bottom,#1e1e1e,rgba(42,42,42,.15));border:1px solid rgba(255,255,255,.08)}
.social{position:relative;flex:1;height:422.7px;border-radius:17.1px;background:rgba(0,0,0,.5);overflow:hidden;box-shadow:31.4px -32.8px 108.4px -71.4px #000;transition:transform .5s var(--ease),background .5s}
.social:hover{transform:translateY(-8px);background:rgba(0,0,0,.65)}
.social__icon{position:absolute;left:50%;top:40px;width:180px;height:180px;transform:translateX(-50%);transition:transform .6s var(--ease)}
.social:hover .social__icon{transform:translateX(-50%) scale(1.06)}
.social__name{position:absolute;left:0;right:0;top:252px;text-align:center;font:400 32px/40px Poppins,sans-serif}
.social__handle{position:absolute;left:0;right:0;top:296px;text-align:center;font:italic 400 20px/32px Inter,sans-serif;color:#e6e6e6}
.social__desc{position:absolute;left:50%;top:332.75px;width:467px;transform:translateX(-50%);text-align:center;font:400 20px/28px Inter,sans-serif;color:#8f8f8f;letter-spacing:-.3px}
.foot__note{position:absolute;left:660px;top:1038px;width:600px;white-space:nowrap;text-align:center;font:italic 500 16px/28px Inter,sans-serif;color:#fff;letter-spacing:-.015em}