/* Motion layer: cursor image trail, inline image headline, marquee, drag to play board, scroll reveals */
.hero{isolation:isolate}
.hero>.wrap{position:relative;z-index:2;pointer-events:none}
.hero>.wrap a,.hero>.wrap .pillrow{pointer-events:auto}
.trail{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.trail img{position:absolute;width:150px;height:190px;object-fit:cover;border-radius:4px;box-shadow:0 24px 50px rgba(0,0,0,.5);transform:translate(-50%,-50%) scale(.6);opacity:0;animation:tr 1.3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tr{12%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-62%) scale(.92)}}
@media (max-width:700px){.trail img{width:96px;height:122px}}
.hint{display:inline-block;margin-top:26px;font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.hint .ht{display:none}
@media (hover:none){.hint .hm{display:none}.hint .ht{display:inline}}

/* Light editorial band with images inside the words */
.words{background:#EEECF6;color:var(--night);padding-block:110px;text-align:center}
.words .eyebrow{color:var(--iris)}
.words h2{font:700 clamp(40px,7.4vw,108px)/1.04 var(--head);letter-spacing:-.045em;margin-top:22px}
.words h2 .l{display:block}
.words h2 img{display:inline-block;width:.78em;height:.9em;object-fit:cover;border-radius:4px;vertical-align:-.08em;margin:0 .14em;transform:rotate(-4deg)}
.words h2 .l:nth-child(2) img{transform:rotate(3deg)}
.words h2 em{font-style:italic;font-weight:300}
.words p{max-width:56ch;margin:28px auto 0;color:#4A4766;font-size:18px}

/* Marquee */
.mq{overflow:hidden;border-block:1px solid var(--line);padding-block:26px;background:var(--night)}
.mq .tk{display:flex;gap:56px;width:max-content;animation:mq 38s linear infinite}
.mq span{font:700 clamp(28px,3.6vw,48px)/1 var(--head);letter-spacing:-.03em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
.mq span:nth-child(odd){color:#fff;-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}

/* Drag to play board */
.play{position:relative;background:#EEECF6;color:var(--night);min-height:720px;overflow:hidden;touch-action:pan-y}
.play .lab{position:absolute;top:28px;left:max(20px,4vw);right:max(20px,4vw);display:flex;justify-content:space-between;font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#6E6A8C;z-index:3;pointer-events:none}
.play .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0 20px;z-index:1;pointer-events:none}
.play h2{font:700 clamp(44px,8vw,120px)/1 var(--head);letter-spacing:-.05em}
.play h2 em{font-style:italic;font-weight:300}
.play .mid p{max-width:46ch;margin:22px auto 0;color:#4A4766;font-size:17px}
.obj{position:absolute;left:0;top:0;z-index:2;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;will-change:transform}
.obj:active{cursor:grabbing}
.obj img{display:block;pointer-events:none}
.o-photo img{width:130px;height:160px;object-fit:cover;border-radius:4px;box-shadow:0 18px 40px rgba(20,16,52,.25)}
.o-card{background:#fff;border-radius:6px;padding:14px 16px;box-shadow:0 18px 40px rgba(20,16,52,.18);font:500 14px/1.35 var(--body);color:var(--night);min-width:170px}
.o-card small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7A7699;margin-bottom:6px}
.o-card .st{color:#E8A93B;letter-spacing:2px}
.o-chat{background:var(--night);color:#fff}
.o-chat small{color:var(--mist)}
.o-pin{width:64px;height:64px;display:grid;place-items:center;filter:drop-shadow(0 14px 22px rgba(20,16,52,.3))}
.o-pin svg{width:64px;height:64px}
.o-heart{background:#F0566A;color:#fff;border-radius:6px;padding:10px 14px;font:700 15px var(--body);box-shadow:0 14px 30px rgba(240,86,106,.35)}
.o-grid{width:110px;height:110px;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:8px;background:#fff;border-radius:6px;box-shadow:0 18px 40px rgba(20,16,52,.18)}
.o-grid i{border-radius:50%;background:#7AC79A}
.o-grid i.y{background:#F2C14E}.o-grid i.r{background:#F0566A}
@media (max-width:700px){.play{min-height:860px}.o-photo img{width:96px;height:118px}.o-card{min-width:140px;font-size:12.5px;padding:11px 12px}.o-grid{width:86px;height:86px}}

/* Scroll reveal */
.rv-in{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv-in.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mq .tk{animation:none}.rv-in{opacity:1;transform:none;transition:none}.trail{display:none}}

/* Big stacked stats with a slow light ribbon (Luxury Presence style) */
.glow{position:relative;overflow:hidden}
.glow::before{content:"";position:absolute;width:900px;height:900px;right:-260px;top:10%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 62%,rgba(180,195,240,.0) 66%,rgba(180,195,240,.55) 72%,rgba(122,143,226,.15) 78%,transparent 84%);filter:blur(6px);-webkit-mask:radial-gradient(circle,transparent 55%,#000 60%,#000 66%,transparent 71%);mask:radial-gradient(circle,transparent 55%,#000 60%,#000 66%,transparent 71%);animation:spin 18s linear infinite;pointer-events:none}
.glow .wrap{position:relative}
@keyframes spin{to{transform:rotate(360deg)}}
.stats.big{display:block;background:none;border:0;border-radius:0;margin-top:40px}
.stats.big div{display:flex;align-items:baseline;gap:28px;background:none;border-bottom:1px solid var(--line);padding:30px 0}
.stats.big b{font-size:clamp(56px,9vw,124px);min-width:4.2ch;letter-spacing:-.05em}
.stats.big span{font-size:16px;max-width:34ch;margin:0;color:var(--soft)}
@media (max-width:640px){.stats.big div{display:block}.stats.big span{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.glow::before{animation:none}}

/* Image wheel: 3D ring of reel style cards that spins on its own and with drag or scroll */
.wheel{padding-block:110px 40px;overflow:hidden}
.wheel .h2 em{font-style:italic;font-weight:300}
.stage{height:min(62vw,560px);min-height:380px;perspective:1600px;display:grid;place-items:center;margin-top:20px;touch-action:pan-y;cursor:grab}
.stage:active{cursor:grabbing}
.ring{--r:440px;position:relative;width:min(22vw,210px);min-width:130px;aspect-ratio:9/16;transform-style:preserve-3d;will-change:transform}
.wc{position:absolute;inset:0;border-radius:6px;overflow:hidden;transform:rotateY(calc(var(--i)*360deg/var(--n))) translateZ(var(--r));backface-visibility:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5)}

.wc img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.wc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,9,20,.55))}

@media (max-width:700px){.ring{--r:260px}}

/* Glowing Ask AI box (Framer style) with typing renter questions */
.ai{position:relative}
.aibox{position:relative;border-radius:10px;padding:22px 22px 16px;background:rgba(20,16,52,.75);border:1px solid rgba(180,195,240,.45);box-shadow:0 0 0 1px rgba(122,143,226,.25),0 0 40px rgba(75,79,184,.55),0 0 120px rgba(75,79,184,.35),inset 0 0 30px rgba(122,143,226,.15)}
.aibox::before{content:"";position:absolute;inset:-2px;border-radius:12px;padding:2px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,#B4C3F0 80%,#4B4FB8 90%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:aiglow 4s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes aiglow{to{--a:360deg}}
.aiq{min-height:58px;font:500 clamp(18px,2vw,22px)/1.35 var(--body);color:#fff}
.cur{display:inline-block;width:2px;height:1.1em;background:var(--mist);vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.aibar{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:var(--dim)}
.aibar b{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;background:var(--btn);color:var(--night)}
.aians{margin-top:14px;border-radius:10px;padding:18px 20px;background:rgba(255,255,255,.04);border:1px solid var(--line);animation:fadeup .5s ease both}
.aians small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky)}
.aians ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.aians li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:6px;background:rgba(255,255,255,.03);color:var(--soft);font-size:15px}
.aians li span{font-size:13px;color:var(--dim)}
.aians li.you{background:linear-gradient(90deg,rgba(122,143,226,.35),rgba(75,79,184,.15));color:#fff;border:1px solid rgba(180,195,240,.4)}
.aians li.you span{color:var(--mist)}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.aibox::before,.cur{animation:none}}
.ai .tag{color:var(--soft);font-size:15px}.ai .tag b{display:block;color:#fff;font:700 17px var(--head);margin-bottom:2px}

/* Reels in the wheel and the tap-to-watch player */
.wc video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:#140F3A}
.stage .wc{cursor:pointer}
.reel-box{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(6,5,14,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.reel-box video{height:min(86vh,860px);max-width:100%;aspect-ratio:9/16;border-radius:14px;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.reel-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.stats.big b{white-space:nowrap}.stats.big b.long{font-size:clamp(44px,6.6vw,96px)}@media (max-width:640px){.stats.big b{white-space:normal}}

/* Play board additions: platform logos, report card, brand tiles, floating likes */
.o-logo{display:grid;justify-items:center;gap:6px}
.o-logo .lg{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;box-shadow:0 14px 30px rgba(20,16,52,.2)}
.o-logo svg{width:30px;height:30px}
.o-logo em{font:600 10.5px/1 var(--body);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#6E6A8C;white-space:nowrap}
.o-report{min-width:150px}
.o-report svg{display:block;width:120px;height:44px;margin:4px 0 6px}
.o-report .up{font-size:12px;color:#2E7D4F;font-weight:600}
.o-report .up::before{content:"\25B2 ";font-size:10px}
.o-brand{background:var(--night);border-radius:8px;padding:12px 16px;box-shadow:0 18px 40px rgba(20,16,52,.25)}
.o-brand img{height:34px;width:auto}
.o-ll img{height:26px}
.likes{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.like{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;animation:likeup 1.6s cubic-bezier(.2,.7,.3,1) forwards}
.like svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(20,16,52,.25))}
@keyframes likeup{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1;transform:translate(var(--dx1),-30px) scale(1.05)}100%{opacity:0;transform:translate(var(--dx2),-190px) scale(.85)}}
@media (max-width:700px){.sm-hide{display:none}.o-logo .lg{width:46px;height:46px;border-radius:11px}.o-logo svg{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){.like{display:none}}
@media (max-width:700px){.play{min-height:1000px}}

/* wheel invitations */
.wplay{position:absolute;left:50%;top:50%;z-index:2;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;background:rgba(12,10,28,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:.8;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,background .35s;animation:wpulse 3.2s ease-in-out infinite;pointer-events:none}
.wplay svg{width:18px;height:18px;fill:#fff;margin-left:3px}
.wc:hover .wplay{opacity:1;transform:scale(1.12);background:rgba(255,255,255,.22)}
@keyframes wpulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 0 rgba(255,255,255,.28)}50%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 10px rgba(255,255,255,0)}}
.wheel-hint{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:calc(100% - 32px);margin:6px auto 0;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font:500 13px/1 var(--body);letter-spacing:.02em;color:var(--soft);transition:opacity .8s,transform .8s}
.wheel-hint i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3);margin:0 4px}
.wh-ic{display:inline-grid;place-items:center;color:var(--mist)}.wh-ic svg{width:16px;height:16px}
.wheel-hint .wh-ic:first-child{animation:wnudge 2.4s ease-in-out infinite}
@keyframes wnudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.wheel-hint.done{opacity:0;transform:translateY(6px);pointer-events:none}
@media (max-width:420px){.wheel-hint{font-size:12px;gap:7px;padding:9px 14px}}
@media (prefers-reduced-motion:reduce){.wplay,.wheel-hint .wh-ic:first-child{animation:none}}
.hero .hint{margin-top:44px}
.words h2 img{will-change:transform;transition:transform .12s linear;box-shadow:0 18px 40px rgba(20,15,58,.18)}