/* explayvo.in, approved "Website · explayvo.in" board: Deep Sea and Aurora, the EXPLAYVO wordmark, Plus Jakarta Sans for
   headings and numbers, Inter for text. The aurora (azure to mint) only on the main actions and the dark sections' glow. */
:root {
  --ink: #06172B;
  --ink-2: #0B2140;
  --azure: #1E9BFF;
  --mint: #19E3B1;
  --aurora: linear-gradient(135deg, #1E9BFF, #19E3B1);
  --link: #075BA0;
  --mist: #F4F8FB;
  --tint: #E8F4FF;
  --line: #E1E9F1;
  --text: #3D4656;
  --muted: #55606F;
  --yellow: #FFC21A;
  --green: #15803D;
  --display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --glow: radial-gradient(70% 80% at 85% 10%, rgba(30,155,255,.38), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgba(25,227,177,.24), transparent 60%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.6 var(--body); color: var(--ink); background: #FFFFFF; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--link); }
h1, h2, h3 { font-family: var(--display); color: inherit; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.08; font-weight: 800; max-width: 820px; margin-top: 14px; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--azure); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: #FFFFFF; color: var(--ink); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* The wordmark: the name, PLAY underlined in the logo yellow. */
.wordmark { font: 800 26px/1.15 var(--display); letter-spacing: -0.015em; color: #FFFFFF; text-decoration: none; white-space: nowrap; }
.wordmark u { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.wordmark.dark { color: var(--ink); font-size: 24px; }

.eyebrow { display: inline-block; font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.eyebrow.dark { color: var(--link); }
.lead { font-size: 18px; color: var(--text); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 12px; font: 600 15px var(--body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn .i { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-aurora { background: var(--aurora); color: #FFFFFF; box-shadow: 0 12px 30px rgba(30,155,255,.32); }
.btn-aurora:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(30,155,255,.5); color: #FFFFFF; }
.btn-ghost-light { color: #FFFFFF; border-color: rgba(255,255,255,.3); background: transparent; }
.btn-ghost-light:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); color: #FFFFFF; }

/* ---------- the first screen ---------- */
.hero { background: var(--glow), var(--ink); color: #FFFFFF; padding: 26px 0 0; overflow: hidden; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav .links { display: flex; align-items: center; gap: 30px; }
.nav .links a:not(.btn) { color: rgba(255,255,255,.78); text-decoration: none; font: 500 14px var(--body); }
.nav .links a:not(.btn) { position: relative; padding: 6px 0; transition: color .2s ease; }
.nav .links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--aurora); transform: scaleX(0); transition: transform .25s ease; }
.nav .links a:not(.btn):hover, .nav .links a:not(.btn):focus-visible { color: #FFFFFF; }
.nav .links a:not(.btn):hover::after, .nav .links a:not(.btn):focus-visible::after { transform: scaleX(1); }
.nav-cta { display: none; }
.hero-grid { display: grid; grid-template-columns: 1fr 500px; gap: 40px; align-items: center; margin-top: 64px; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; padding-bottom: 110px; }
.hero h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.hero-sub { font-size: 20px; color: rgba(255,255,255,.78); max-width: 560px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.ticks { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font: 500 14px var(--body); color: rgba(255,255,255,.72); }
.ticks li::before { content: "✓"; color: var(--mint); margin-right: 8px; font-weight: 700; }

.hero-art { position: relative; height: 640px; }
.phone { border-radius: 44px; background: #000000; padding: 10px; box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 0 0 2px #2A3B55; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; }
.phone-a { position: absolute; left: 30px; top: 20px; width: 270px; height: 560px; transform: rotate(-6deg); }
.phone-b { position: absolute; right: 0; top: 80px; width: 250px; height: 520px; transform: rotate(5deg); }
.toast { position: absolute; display: flex; gap: 10px; align-items: center; background: #FFFFFF; color: var(--ink); border-radius: 16px; padding: 12px 16px; font: 600 13px/1.35 var(--body); box-shadow: 0 18px 40px rgba(0,0,0,.3); animation: rise .8s ease both; }
.toast small { display: block; font: 500 11px var(--body); color: #6B7585; }
.toast-a { left: -24px; top: 300px; animation: pop .6s cubic-bezier(.2,1.4,.4,1) 1.4s both; }
.toast-b { right: -12px; top: 520px; animation: pop .6s cubic-bezier(.2,1.4,.4,1) 1.9s both; }
.toast-i { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.toast-i .i { width: 18px; height: 18px; }
.toast-i.blue { background: var(--tint); color: var(--azure); }
.toast-i.green { background: #E7F6EC; color: var(--green); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes word { from { opacity: 0; transform: translateY(.35em); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes sweep { to { background-position: 100% 0; } }
@keyframes fadeup { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes glide { from { opacity: 0; translate: 60px 30px; } to { opacity: 1; translate: 0 0; } }

/* The opening: the motto settles word by word, "playable games" takes the aurora, then the rest follows. */
.motto .w { display: inline-block; animation: word .8s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--i) * .09s) both; }
.motto .aur-text { background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 40%, #1E9BFF 62%, #19E3B1 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: word .8s cubic-bezier(.2,.7,.2,1) calc(.15s + var(--i) * .09s) both, sweep 1.1s ease calc(.9s + (var(--i) - 4) * .15s) forwards; }
.hero .eyebrow { animation: fadeup .6s ease both; }
.hero-sub { animation: fadeup .7s ease .85s both; }
.hero .actions { animation: fadeup .7s ease 1s both; }
.hero .ticks { animation: fadeup .7s ease 1.15s both; }
.phone-a { animation: glide 1s cubic-bezier(.2,.7,.2,1) .35s both; }
.phone-b { animation: glide 1s cubic-bezier(.2,.7,.2,1) .6s both; }

/* Sections fade up as they come into view (site.js adds the classes; without it everything simply shows). */
.reveal { opacity: 0; translate: 0 22px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.in { opacity: 1; translate: 0 0; }
.game.reveal { transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1), transform .25s ease, box-shadow .25s ease; transition-delay: calc(var(--d, 0) * 90ms), calc(var(--d, 0) * 90ms), 0s, 0s; }

/* ---------- sections ---------- */
.sec { padding: 110px 0; }
.mist { background: var(--mist); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sec-head .lead { max-width: 440px; }

.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps li { background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.steps .num { width: 36px; height: 36px; border-radius: 10px; background: var(--aurora); color: #FFFFFF; font: 800 15px var(--display); display: flex; align-items: center; justify-content: center; }
.steps p { color: var(--text); font-size: 15px; }

.video { position: relative; display: block; width: 100%; height: 560px; margin-top: 48px; border: 0; padding: 0; border-radius: 24px; overflow: hidden; cursor: pointer; background: var(--ink); }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform .6s ease; }
.video:hover img { transform: scale(1.03); }
.video-play { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -60px 0 0 -48px; border-radius: 50%; background: var(--aurora); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 14px rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.4); }
.video-play svg { width: 38px; height: 38px; fill: #FFFFFF; margin-left: 4px; }
.video-label { position: absolute; left: 0; right: 0; top: calc(50% + 58px); text-align: center; color: #FFFFFF; font: 600 15px var(--body); }
.video-dialog { border: 0; padding: 0; border-radius: 18px; width: min(960px, 94vw); background: #000000; }
.video-dialog::backdrop { background: rgba(6,23,43,.8); }
.video-dialog video { display: block; width: 100%; }
.video-dialog .close { position: absolute; right: 10px; top: 6px; z-index: 1; background: none; border: 0; color: #FFFFFF; font-size: 34px; cursor: pointer; }

.games { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 48px; }
.game { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #FFFFFF; transition: transform .2s ease, box-shadow .2s ease; }
.game:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(6,23,43,.16); }
.game img { width: 100%; height: 270px; object-fit: cover; transition: transform .5s ease; }
.game:hover img { transform: scale(1.05); }
.game > div { position: relative; background: #FFFFFF; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.game h3 { font-size: 17px; }
.game p { font-size: 13px; line-height: 1.5; color: var(--muted); }

.usp { background: var(--glow), var(--ink); color: #FFFFFF; }
.usp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.usp-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.usp-copy p { font-size: 18px; color: rgba(255,255,255,.75); }
.pills { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pills li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.pills .i { width: 26px; height: 26px; color: var(--mint); }
.pills h3 { font-size: 16px; margin-bottom: 4px; }
.pills p { font-size: 14px; color: rgba(255,255,255,.72); }

.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.feat { background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.feat p { font-size: 14.5px; color: var(--text); }
.feat-i { width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--azure); display: flex; align-items: center; justify-content: center; }
.feat-wide { grid-column: span 2; background: var(--glow), var(--ink); border-color: var(--ink); color: #FFFFFF; }
.feat-wide p { color: rgba(255,255,255,.76); }
.feat-wide .feat-i { background: rgba(30,155,255,.18); color: var(--mint); }
.tags { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font: 600 12px var(--body); color: var(--link); background: var(--tint); border-radius: 999px; padding: 5px 11px; }
.feat-wide .tags li { background: rgba(255,255,255,.1); color: #FFFFFF; }

.flow { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.flow li { position: relative; background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -28px; top: 50%; width: 20px; height: 2px; background: var(--azure); }
.flow .i { color: var(--azure); }
.flow .i.green { color: var(--green); }
.flow h3 { font-size: 16px; }
.flow p { font-size: 13.5px; color: var(--muted); }

.play-grid { display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center; }
.play-copy { display: flex; flex-direction: column; gap: 22px; }
.qr { display: flex; gap: 18px; align-items: center; font: 500 14px/1.5 var(--body); color: var(--muted); }
.qr img { border: 1px solid var(--line); border-radius: 14px; }
.qr b { color: var(--ink); }
.play-frame { display: flex; justify-content: center; }
.phone-play { position: relative; width: 320px; height: 640px; }
.phone-play img, .phone-play iframe { width: 100%; height: 100%; border: 0; border-radius: 34px; object-fit: cover; }
.phone-play .tap { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); }
.play-soon { position: absolute; left: 24px; right: 24px; bottom: 100px; background: rgba(6,23,43,.88); color: #FFFFFF; font-size: 14px; text-align: center; padding: 12px; border-radius: 12px; }

.cta-sec { padding: 0 0 110px; }
.cta { background: radial-gradient(60% 120% at 90% 0%, rgba(30,155,255,.4), transparent 60%), radial-gradient(50% 100% at 0% 100%, rgba(25,227,177,.28), transparent 60%), var(--ink); color: #FFFFFF; border-radius: 28px; padding: 64px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cta h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 14px; }
.cta p { font-size: 17px; color: rgba(255,255,255,.78); max-width: 620px; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; min-width: 290px; }

.foot { padding: 48px 0 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 30px 40px; font-size: 14px; color: var(--muted); }
.foot-brand { display: flex; flex-direction: column; gap: 10px; }
.foot-cols { display: flex; gap: 60px; }
.foot-cols div { display: flex; flex-direction: column; gap: 10px; }
.foot-cols h3 { font: 600 14px var(--body); color: var(--ink); letter-spacing: 0; }
.foot-cols a { color: var(--muted); text-decoration: none; }
.foot-cols a:hover { color: var(--ink); }
.copy { grid-column: 1 / -1; font-size: 13px; }

/* ---------- tablets and phones ---------- */

/* Rewards: "You decide who wins" */
.rw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: center; margin-top: 48px; }
.rw-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rw-rules li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; align-items: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; transition: transform .25s ease, box-shadow .25s ease; }
.rw-rules li:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(6,23,43,.1); }
.rw-rules h3 { margin: 0 0 4px; font: 800 18px var(--display); color: var(--ink); }
.rw-rules p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.rw-mini { width: 70px; height: 122px; border-radius: 15px; background: #06172B; padding: 4px; box-sizing: border-box; display: block; box-shadow: 0 8px 18px rgba(6,23,43,.2); }
.rw-mini > span { width: 100%; height: 100%; border-radius: 11px; background: radial-gradient(90% 60% at 50% 0%, #1C4A86, #0A2347 60%, #06172B); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 7px; box-sizing: border-box; overflow: hidden; }
.m-ticket { width: 100%; border-radius: 6px; background: linear-gradient(135deg, #FFD54A, #FFB300); color: #3A2600; display: flex; flex-direction: column; align-items: center; padding: 5px 0; }
.m-ticket b { font: 800 12px/1 var(--display); }
.m-ticket i { font: 700 6.5px/1.4 var(--body); font-style: normal; letter-spacing: .06em; }
.m-ticket.lock { background: linear-gradient(135deg, #E3E9F0, #B8C4D2); color: #33475E; }
.m-line { width: 80%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); }
.m-line.short { width: 55%; }
.m-bar { width: 90%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); }
.m-bar i { display: block; width: 70%; height: 100%; border-radius: 3px; background: var(--aurora); }
.m-cap { font: 800 7.5px var(--body); letter-spacing: .06em; color: #FFFFFF; }
.m-board { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.m-board span { display: grid; grid-template-columns: 11px 1fr; gap: 3px; align-items: center; height: 11px; border-radius: 3px; background: rgba(255,255,255,.1); padding: 0 3px; }
.m-board span.me { background: rgba(25,227,177,.3); outline: 1px solid var(--mint); }
.m-board b { font: 800 6.5px var(--body); color: #FFFFFF; }
.m-board i { height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); }
.m-wheel { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #FFFFFF; background: conic-gradient(#FFC21A 0 25%, #1E9BFF 0 50%, #19E3B1 0 75%, #FFFFFF 0); animation: spin 6s linear infinite; }
.m-qr { width: 28px; height: 28px; border-radius: 3px; background: conic-gradient(#15172B 25%, #FFFFFF 0 50%, #15172B 0 75%, #FFFFFF 0) 0 0 / 7px 7px; border: 2px solid #FFFFFF; }
.m-clock { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #FFFFFF; background: conic-gradient(#19E3B1 0 17%, transparent 0); }
@keyframes spin { to { transform: rotate(360deg); } }
.rw-show { position: relative; display: flex; justify-content: center; }
.rw-phone { width: 300px; height: 620px; }
.rw-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: radial-gradient(90% 60% at 50% 0%, #1C4A86, #0A2347 60%, #06172B); color: #FFFFFF; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 22px 18px; box-sizing: border-box; position: relative; }
.rw-chip { align-self: flex-start; background: #FFFFFF; color: #06172B; font: 800 11px var(--body); letter-spacing: .1em; border-radius: 10px; padding: 7px 10px; }
.rw-eyebrow { font: 700 10px var(--body); letter-spacing: .12em; opacity: .75; margin-top: 18px; }
.rw-head { font: 800 40px/1 var(--display); letter-spacing: -.02em; }
.rw-score { font: 800 54px/1 var(--display); color: var(--mint); }
.rw-ticket { display: flex; border-radius: 12px; overflow: hidden; }
.rw-ticket > b { width: 82px; flex: none; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, #FFD54A, #FFB300); color: #3A2600; font: 800 18px/1 var(--display); }
.rw-ticket > span { flex: 1; background: #FFFDF6; color: #15172B; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font: 800 13px var(--body); }
.rw-ticket small { font: 600 9px var(--body); letter-spacing: .1em; opacity: .6; }
.rw-ticket em { font: 700 14px ui-monospace, Menlo, monospace; font-style: normal; letter-spacing: .1em; }
.rw-next { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; }
.rw-next > i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.2); }
.rw-next > i > i { display: block; width: 70%; height: 100%; border-radius: 4px; background: var(--aurora); }
.rw-rank { align-self: center; font: 700 12px var(--body); color: #9BF0BC; }
.rw-btn { margin-top: auto; text-align: center; background: var(--yellow); color: #15172B; border-radius: 12px; padding: 14px; font: 800 15px var(--display); }
.rw-toast { position: absolute; left: -40px; bottom: 60px; }
@media (max-width: 1080px) { .rw-grid { grid-template-columns: 1fr; } .rw-toast { left: 0; } }
@media (max-width: 620px) { .rw-rules { grid-template-columns: 1fr; } .rw-phone { width: 270px; height: 560px; } }
@media (prefers-reduced-motion: reduce) { .m-wheel { animation: none; } }

@media (max-width: 1080px) {
  .games { grid-template-columns: repeat(3, 1fr); }
  .feats { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow li::after { display: none; }
}
@media (max-width: 900px) {
  .nav .links { display: none; }
  .nav-cta { display: inline-flex; }
  .hero-grid, .usp-grid, .play-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 20px; }
  .hero-art { height: 470px; max-width: 460px; width: 100%; margin: 0 auto; }
  .phone-a { width: 200px; height: 420px; left: 10px; }
  .phone-b { width: 190px; height: 390px; top: 50px; }
  .toast-a { left: 0; top: 230px; }
  .toast-b { right: 0; top: 380px; }
  .sec { padding: 72px 0; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .steps { grid-template-columns: 1fr; }
  .video { height: 340px; }
  .cta { flex-direction: column; align-items: flex-start; padding: 36px 26px; }
  .cta-actions { width: 100%; min-width: 0; }
  .foot { grid-template-columns: 1fr; }
  .foot-cols { flex-wrap: wrap; gap: 32px; }
}
@media (max-width: 620px) {
  .games { grid-template-columns: repeat(2, 1fr); }
  .game img { height: 200px; }
  .feats, .flow { grid-template-columns: 1fr; }
  .feat-wide { grid-column: auto; }
  .hero-sub, .lead, .usp-copy p { font-size: 17px; }
  .phone-play { width: 280px; height: 560px; }
  .actions .btn { flex: 1 1 100%; }
}
/* ---------- motion (site.js adds the hooks; without it, or with reduced motion, the page is as before) ---------- */
@property --clk { syntax: '<percentage>'; inherits: false; initial-value: 17%; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes pop2 { from { opacity: 0; translate: 0 10px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes glint { 0% { background-position: 160% 0; } 14%, 100% { background-position: -60% 0; } }
@keyframes wipe { from { clip-path: inset(100% 0 0 0 round 34px); } to { clip-path: inset(0 0 0 0 round 34px); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(25,227,177,.45), 0 12px 30px rgba(30,155,255,.32); } 100% { box-shadow: 0 0 0 18px rgba(25,227,177,0), 0 12px 30px rgba(30,155,255,.32); } }
@keyframes ring-big { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35), 0 20px 50px rgba(0,0,0,.4); } 100% { box-shadow: 0 0 0 30px rgba(255,255,255,0), 0 20px 50px rgba(0,0,0,.4); } }
@keyframes drop { from { opacity: 0; translate: 0 -24px; scale: .92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes fill { from { width: 0; } }
@keyframes glow-once { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,194,26,0); } 40% { box-shadow: 0 0 0 8px rgba(255,194,26,.35), 0 10px 30px rgba(255,194,26,.45); } }
@keyframes bounce { 0%, 100% { translate: 0 0; } 30% { translate: 0 -7px; } 55% { translate: 0 0; } 75% { translate: 0 -3px; } }
@keyframes climb { to { translate: 0 -15px; } }
@keyframes sink { to { translate: 0 15px; } }
@keyframes scan { from { top: 0; opacity: 1; } 90% { opacity: 1; } to { top: 116px; opacity: 0; } }
@keyframes drift { 0%, 100% { background-position: 0% 0%, 100% 100%, 0 0; } 50% { background-position: 30% 20%, 70% 80%, 0 0; } }
@keyframes travel { 0% { right: -8px; opacity: 0; } 4% { opacity: 1; } 18% { right: -30px; opacity: 1; } 22%, 100% { right: -30px; opacity: 0; } }
@keyframes lit { 0%, 100% { border-color: var(--line); box-shadow: none; } 10%, 22% { border-color: var(--azure); box-shadow: 0 10px 30px rgba(30,155,255,.18); } }

/* The top progress bar and the menu's current section. */
.progress { position: fixed; left: 0; top: 0; z-index: 20; width: 100%; height: 3px; background: var(--aurora); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }
.nav .links a.is-on { color: #FFFFFF; }
.nav .links a.is-on::after { transform: scaleX(1); }

/* Hero: the phones play the games, float, lean toward the mouse and drift away as you scroll. */
@media (min-width: 901px) { .hero-art.motion { transform: translateY(calc(var(--sy, 0) * -50px)); opacity: calc(1 - var(--sy, 0) * .55); } }
.hero-art.motion .phone-a { transform: translate3d(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 12px), 0) rotate(-6deg); transition: transform .5s cubic-bezier(.2,.7,.2,1);
  animation: glide 1s cubic-bezier(.2,.7,.2,1) .35s both, float 7s ease-in-out 1.4s infinite; cursor: pointer; }
.hero-art.motion .phone-b { transform: translate3d(calc(var(--mx, 0) * 24px), calc(var(--my, 0) * 18px), 0) rotate(5deg); transition: transform .5s cubic-bezier(.2,.7,.2,1);
  animation: glide 1s cubic-bezier(.2,.7,.2,1) .6s both, float 8s ease-in-out 2.4s infinite; cursor: pointer; }
.hero-art.motion .toast { transform: translate3d(calc(var(--mx, 0) * 34px), calc(var(--my, 0) * 26px), 0); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.hero-art .phone video { position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; border-radius: 34px; opacity: 0; transition: opacity .6s ease; }
.hero-art .phone video.on { opacity: 1; }
.hero-art .phone video.wipe { opacity: 1; animation: wipe .7s cubic-bezier(.6,0,.2,1) both; z-index: 1; }
.hero-art.motion .phone::after { content: ""; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; z-index: 2; border-radius: 34px; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%) 160% 0 / 260% 100% no-repeat; animation: glint 10s ease-in-out 4s infinite; }
.hero-art.motion .phone-b::after { animation-delay: 9s; }
/* The notes follow the play: "New lead" on the goal, then the voucher; both leave before the next round. */
.hero-art.live .toast-a, .hero-art.live .toast-b { animation: none; opacity: 0; scale: .9; translate: 0 10px; transition: opacity .45s ease, scale .45s cubic-bezier(.2,1.4,.4,1), translate .45s cubic-bezier(.2,1.4,.4,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.hero-art.live .toast.show { opacity: 1; scale: 1; translate: 0 0; }

/* How it works: an aurora bar runs across each step in turn. */
.steps li { position: relative; overflow: hidden; }
.steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--aurora); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--d, 0) * .45s); }
.steps li.in::before { transform: scaleX(1); }
.steps li.reveal { transition-delay: calc(var(--d, 0) * 180ms); }

/* Video: the tile settles in, the play button breathes. */
.video.reveal { opacity: 1; translate: 0 0; scale: .94; transition: scale 1s cubic-bezier(.2,.7,.2,1); }
.video.reveal.in { scale: 1; }
.video.in .video-play { animation: ring-big 2.4s ease-out 1s infinite; }

/* Games: the card tilts toward the cursor with a glare; the picture sits behind the glass; the game plays. */
.game { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
.game:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.game.tilt { transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1), transform .12s linear, box-shadow .25s ease; }
.game-media { position: relative; overflow: hidden; }
.game-media img { transform: translate(calc(var(--gx-n, 0) * -8px), calc(var(--gy-n, 0) * -8px)) scale(1.06); }
.game:hover .game-media img { transform: translate(calc(var(--gx-n, 0) * -8px), calc(var(--gy-n, 0) * -8px)) scale(1.1); }
.game-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0; transition: opacity .45s ease; }
.game.playing .game-media video { opacity: 1; }
.game::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(60% 50% at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.38), transparent 70%); }
.game:hover::after { opacity: 1; }

/* Rewards: each rule's picture does what the rule does. */
.m-ticket { position: relative; isolation: isolate; }
.rw-rules li:nth-child(1):hover .m-ticket { animation: bounce .7s ease; }
.m-bar i { transition: width .7s cubic-bezier(.2,.7,.2,1); }
.rw-rules li:nth-child(2):hover .m-bar i { width: 100%; }
.rw-rules li:nth-child(3):hover .m-board span:nth-child(3) { animation: sink .4s ease forwards; }
.rw-rules li:nth-child(3):hover .m-board span.me { animation: climb .4s ease forwards; }
.m-wheel { rotate: 0deg; transition: rotate .8s ease; }
.rw-rules li:nth-child(4):hover .m-wheel { rotate: 900deg; transition: rotate 1.6s cubic-bezier(.15,.8,.25,1); }
.m-ticket.lock { transition: color .4s ease; }
.m-ticket.lock::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, #FFD54A, #FFB300); opacity: 0; transition: opacity .4s ease; }
.rw-rules li:nth-child(5):hover .m-ticket.lock { color: #3A2600; }
.rw-rules li:nth-child(5):hover .m-ticket.lock::before { opacity: 1; }
.m-clock { background: conic-gradient(#19E3B1 0 var(--clk), transparent 0); transition: --clk .9s ease; }
.rw-rules li:nth-child(6):hover .m-clock { --clk: 62%; }
/* The phone plays its win: the score counts, the ticket drops in, the bar fills, the button glows. */
.rw-show.reveal .rw-ticket, .rw-show.reveal .rw-rank, .rw-show.reveal .rw-toast { opacity: 0; }
.rw-show.in .rw-ticket { animation: drop .6s cubic-bezier(.2,1.3,.4,1) .9s both; }
.rw-show.in .rw-next > i > i { animation: fill 1s cubic-bezier(.2,.7,.2,1) 1.4s both; }
.rw-show.in .rw-rank { animation: fadeup .5s ease 2s both; }
.rw-show.in .rw-btn { animation: glow-once 1.4s ease 2.3s both; }
.rw-show.in .rw-toast { animation: pop2 .6s cubic-bezier(.2,1.4,.4,1) 2.6s both; }

/* Technology: the Unity line takes the aurora; the four points slide in and lift. */
.uni { background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 40%, #1E9BFF 62%, #19E3B1 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.4s ease .5s; }
.usp-grid.in .uni { background-position: 100% 0; }
.pills li { transition: transform .25s ease, background-color .25s ease, border-color .25s ease; }
.pills li:hover { transform: translateY(-3px); background: rgba(255,255,255,.08); border-color: rgba(25,227,177,.4); }
.pills li.reveal { translate: 40px 0; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1), transform .25s ease, background-color .25s ease, border-color .25s ease; transition-delay: calc(.3s + var(--d, 0) * 110ms), calc(.3s + var(--d, 0) * 110ms), 0s, 0s, 0s; }
.pills li.reveal.in { translate: 0 0; }

/* Features: cards lift, the icon gives a small nod. */
.feat { transition: transform .25s ease, box-shadow .25s ease; }
.feat:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(6,23,43,.1); }
.feat.reveal { transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1), transform .25s ease, box-shadow .25s ease; transition-delay: calc(var(--d, 0) * 90ms), calc(var(--d, 0) * 90ms), 0s, 0s; }
.feat-i { transition: transform .35s cubic-bezier(.2,1.4,.4,1); }
.feat:hover .feat-i { transform: translateY(-3px) rotate(-8deg) scale(1.08); }

/* Where every play goes: each link draws in turn, then a pulse keeps travelling player to WhatsApp. */
.flow li:not(:last-child)::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s ease calc(.5s + var(--d, 0) * .5s); }
.flow li.in:not(:last-child)::after, .flow:not(.armed) li:not(:last-child)::after { transform: scaleX(1); }
.flow li.in { animation: lit 4s ease calc(1.6s + var(--d, 0) * .8s) infinite; }
.flow li.in:not(:last-child)::before { content: ""; position: absolute; top: calc(50% - 3px); right: -8px; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); opacity: 0;
  animation: travel 4s linear calc(2s + var(--d, 0) * .8s) infinite; }

/* Play it now: the button breathes, the QR scans once, the phone leans toward the mouse. */
.play-grid.in .phone-play .tap { animation: ring 2.2s ease-out 1s infinite; }
.qr { position: relative; }
.qr::after { content: ""; position: absolute; left: 4px; width: 112px; height: 3px; border-radius: 2px; background: var(--mint); box-shadow: 0 0 12px var(--mint); opacity: 0; top: 0; }
.play-grid.in .qr::after { animation: scan 1.4s ease .6s both; }
.phone-play.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease; }

/* The demo box: the aurora drifts slowly. */
.cta { background-size: 140% 140%, 140% 140%, auto; animation: drift 18s ease-in-out infinite; }
.btn-aurora:hover { box-shadow: 0 18px 40px rgba(30,155,255,.5), 0 0 0 6px rgba(25,227,177,.16); }

/* Section titles arrive word by word. */
.wd { display: inline-block; opacity: 0; translate: 0 .3em; filter: blur(8px); transition: opacity .6s ease, translate .7s cubic-bezier(.2,.7,.2,1), filter .6s ease; transition-delay: calc(var(--i) * 60ms); }
.words-in .wd { opacity: 1; translate: 0 0; filter: blur(0); }
@media (hover: none) { .game:hover { transform: none; } .game::after { display: none; } }
@media (max-width: 1080px) { .flow li.in:not(:last-child)::before { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motto .aur-text { background-position: 100% 0; }
}