/* ============ Jawla — one-page launch site extras ============ */

/* ---- store buttons (white badge — reads on dark hero & cards) ---- */
.storebtn{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border:1px solid #fff;border-radius:14px;height:60px;padding:0 22px;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .2s}
.storebtn:hover{transform:translateY(-2px);background:#f1efe9;box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}
.storebtn svg{width:24px;height:24px;fill:var(--ink);flex:none}
.storebtn .st{display:flex;flex-direction:column;line-height:1.18;text-align:start}
.storebtn .st .s1{font-size:10.5px;color:var(--text-2,#5B5852);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.storebtn .st .s2{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.storebtn.onlight{background:var(--ink);color:#fff;border-color:var(--ink)}
.storebtn.onlight svg{fill:#fff}
.storebtn.onlight .st .s1{color:rgba(255,255,255,.6)}
.storebtn.onlight .st .s2{color:#fff}
.storebtn.onlight:hover{background:#161616}

/* ---- language toggle pill ---- */
.lang{align-items:center}
.lang .globe{width:14px;height:14px;flex:none;opacity:.7}
.lang:hover .globe{opacity:1}
.lang .cur{line-height:1;display:inline-flex;align-items:center}
html[lang="en"] .lang .cur{font-family:'Tajawal',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:0;transform:translateY(-0.5px)}
html[lang="ar"] .lang .cur{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.01em}

/* ---- audience switch cards under hero ---- */
.pathcards{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ---- cities ---- */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.sb{border:1px solid var(--line);border-radius:var(--r-m);padding:30px 24px;background:#fff;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.sb:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(0,0,0,.4)}
.sb .v{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.sb .l{font-size:13.5px;color:var(--t2);margin-top:10px;font-weight:600}
.sb.accent{background:var(--ink);border-color:var(--ink)}
.sb.accent .v{color:#fff}
.sb.accent .l{color:#b9a6ff}
@media (max-width:820px){.statband{grid-template-columns:1fr 1fr;gap:14px}.sb .v{font-size:34px}}
.cities{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.city{border:1px solid var(--line);border-radius:var(--r-m);padding:20px 18px;background:#fff;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.city:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(0,0,0,.4)}
.city .nm{font-weight:800;font-size:17px;letter-spacing:-.02em}
.city .st{font-size:12px;color:var(--t3);margin-top:5px;font-weight:600;display:flex;align-items:center;gap:6px}
.city.live{background:var(--ink);color:#fff;border-color:var(--ink)}
.city.live .st{color:#b9a6ff}
.city.live .st .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);animation:pulse 2.2s ease-in-out infinite}
.city.soon{background:transparent;border-style:dashed;border-color:var(--line2)}
.city.soon .nm{color:var(--t2)}
.city .st .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);flex:none}

/* ---- player steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.step{position:relative}
.step .num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--violet);margin-bottom:12px;display:block}

/* ---- Jawla Rating section ---- */
.rate-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start}
.lb-card{background:#141414;border:1px solid #262626;border-radius:var(--r-l);padding:22px;position:relative}
.lb-card .lbh{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.lb-card .lbh h3{font-size:16px;color:#fff}
.lb{position:relative}
.lbrow{position:absolute;left:0;right:0;height:58px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:13px;transition:top .8s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s,background .4s}
.lbrow .rk{font-weight:800;width:24px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.45);font-size:14px;flex:none}
.lbrow .a{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7C4DFF,#FF4081);display:grid;place-items:center;color:#fff;font-size:11.5px;font-weight:700;flex:none}
.lbrow .nm{flex:1;font-weight:700;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbrow .dl{font-size:11.5px;font-weight:700;min-width:34px;text-align:end;color:rgba(255,255,255,.35);font-variant-numeric:tabular-nums}
.lbrow .dl.up{color:#7ad6a0}
.lbrow .dl.dn{color:rgba(255,255,255,.4)}
.lbrow .rt{font-weight:800;font-variant-numeric:tabular-nums;color:#b9a6ff;font-size:16px;min-width:52px;text-align:end}
.lbrow.flash{border-color:var(--violet);box-shadow:0 0 0 1px rgba(124,77,255,.5),0 10px 30px -14px rgba(124,77,255,.55)}
.lbrow.me{background:#211a3d;border-color:#4a3a8a}
.lbrow.me.win{border-color:var(--magenta);box-shadow:0 0 0 1px rgba(255,64,129,.45)}
.fpill{display:flex;align-items:center;gap:10px;background:#141414;border:1px solid #262626;border-radius:999px;padding:11px 18px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85);opacity:0;transform:translateY(12px);transition:.5s cubic-bezier(.2,.8,.2,1);width:max-content;max-width:100%}
.fpill.in{opacity:1;transform:none}
.fpill .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);flex:none;animation:pulse 2.2s ease-in-out infinite}
.fpill .sc{font-variant-numeric:tabular-nums;color:#b9a6ff;font-weight:800}
.ratechips{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.ratechip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;background:#141414;border:1px solid #262626;color:rgba(255,255,255,.8);font-size:13px;font-weight:600}
.ratechip b{color:#b9a6ff;font-variant-numeric:tabular-nums}

/* ---- community pillars ---- */
.cpillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cpil{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px 28px;box-shadow:0 18px 40px -30px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.cpil:hover{transform:translateY(-4px);box-shadow:0 28px 56px -30px rgba(0,0,0,.45)}
.cpil .ic{width:46px;height:46px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;margin-bottom:18px}
.cpil .ic svg{width:23px;height:23px}
.cpil h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.cpil p{font-size:14.5px;line-height:1.55;color:var(--t2);margin:0}
@media (max-width:820px){.cpillars{grid-template-columns:1fr;gap:14px}}

/* ---- venue demand strip ---- */
.demand{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0 0 12px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.demand .dm .v{font-size:clamp(34px,4.4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--violet);font-variant-numeric:tabular-nums}
.demand .dm .l{font-size:13.5px;color:var(--t2);margin-top:10px;line-height:1.45;max-width:26ch;font-weight:500}
@media (max-width:760px){.demand{grid-template-columns:1fr;gap:20px}}

/* ---- weekly payout widget ---- */
.payout-card{background:#141414;border:1px solid #262626;border-radius:var(--r-l);padding:26px}
.payout-card .ph3{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#fff}
.payout-card .ph3 h3{font-size:16px}
.pay-bars{display:flex;gap:9px;align-items:flex-end;height:120px;margin-bottom:28px}
.pay-bars .pb{flex:1;background:#242424;border-radius:7px 7px 0 0;position:relative;height:8%;transition:height .55s cubic-bezier(.2,.8,.2,1),background .3s}
.pay-bars .pb.done{background:linear-gradient(var(--violet),#9b7bff)}
.pay-bars .pb span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:10.5px;color:rgba(255,255,255,.4);font-family:var(--mono)}
.pay-line{display:flex;align-items:center;gap:14px;border-top:1px solid #262626;padding-top:18px}
.pay-line .amt{font-size:25px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pay-line .lbl{font-size:12px;color:rgba(255,255,255,.5);font-weight:600}
.pay-line .track{flex:1;height:5px;border-radius:3px;background:#242424;overflow:hidden;min-width:60px}
.pay-line .track i{display:block;height:100%;width:0;background:var(--violet);border-radius:3px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.pay-line .bank{display:inline-flex;align-items:center;gap:8px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:999px;padding:9px 15px;color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap}
.pay-line .bank svg{width:16px;height:16px;stroke:#b9a6ff;fill:none;stroke-width:1.8}
.pay-line .bank .chk{color:#7ad6a0;opacity:0;transition:.3s;font-weight:800}
.pay-line .bank.paid .chk{opacity:1}

/* ---- payment methods strip (fills payout card) ---- */
.pay-methods{display:block;margin-top:24px;padding-top:22px;border-top:1px solid #262626}
.pay-methods .pm-head{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
.pm-logos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.pm-logos .pm{flex:0 0 auto;width:76px;height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:#fff;padding:0 9px;box-shadow:0 2px 10px -4px rgba(0,0,0,.5)}
.pm-logos .pm svg{height:21px;width:auto;max-width:60px;display:block}
.pm-logos .pm img{max-height:20px;max-width:58px;width:auto;height:auto;object-fit:contain;display:block}
.pm-logos .pm img.tall{max-height:28px}
.pm-logos .pm.more{flex:0 0 auto;width:auto;padding:0 16px;background:transparent;border:1px dashed #3a3a3a;color:rgba(255,255,255,.6);font-weight:600;font-size:12.5px;box-shadow:none}
.pay-methods .pm-note{font-size:13px;line-height:1.55;color:rgba(255,255,255,.55);margin:0;max-width:64ch}

/* ---- founding 25 ---- */
.found{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.found .glow{position:absolute;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(124,77,255,.30),transparent 65%);top:-220px;inset-inline-start:-180px;pointer-events:none}
.found .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);pointer-events:none}
.found .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative}
.bignum{font-size:clamp(110px,15vw,190px);font-weight:800;letter-spacing:-.06em;line-height:.85;color:transparent;-webkit-text-stroke:2.5px rgba(255,255,255,.3);font-variant-numeric:tabular-nums;user-select:none}
.bignum b{color:var(--violet);-webkit-text-stroke:0;font-weight:800}
.spotgrid{display:grid;grid-template-columns:repeat(5,42px);gap:9px;margin:26px 0 10px}
.spot{width:42px;height:42px;border-radius:11px;border:1px solid #2e2e2e;background:#141414;display:grid;place-items:center;color:rgba(255,255,255,.22);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;transition:background .3s,border-color .3s,color .3s,transform .3s}
.spot.claimed{background:var(--violet);border-color:var(--violet);color:#fff}
.spot.left{border-style:dashed;border-color:#3a3a3a}
.spotmeta{font-size:13px;color:rgba(255,255,255,.55);font-weight:600}
.spotmeta b{color:#fff}
.fbenes{display:flex;flex-direction:column;gap:16px;margin:28px 0 32px}
.fbene{display:flex;gap:15px;align-items:flex-start}
.fbene .ic{width:44px;height:44px;border-radius:12px;background:#141414;border:1px solid #2a2a2a;display:grid;place-items:center;flex:none}
.fbene .ic svg{width:22px;height:22px;stroke:#b9a6ff;fill:none;stroke-width:1.8}
.fbene h4{margin:0 0 3px;font-size:16px;font-weight:700;color:#fff}
.fbene p{margin:0;font-size:14px;color:rgba(255,255,255,.6);line-height:1.55}
.found .eyebrow{color:#b9a6ff}

/* ---- pricing extras ---- */
.foundbar{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--ink);color:#fff;border-radius:var(--r-l);padding:20px 28px;margin-bottom:34px;flex-wrap:wrap}
.foundbar .fb-l{display:flex;align-items:center;gap:14px}
.foundbar .badge25{width:46px;height:46px;border-radius:12px;background:var(--violet);display:grid;place-items:center;font-weight:800;font-size:16px;flex:none}
.foundbar .t{font-weight:700;font-size:15.5px}
.foundbar .s{font-size:13px;color:rgba(255,255,255,.6)}
.plan .commission{display:flex;align-items:baseline;justify-content:space-between;border:1px solid var(--line);border-radius:11px;padding:11px 14px;margin-bottom:20px;background:var(--surface-2)}
.plan.featured .commission{background:#1c1c1c;border-color:#2c2c2c}
.plan .commission .cl{font-size:12px;font-weight:600;color:var(--t3)}
.plan.featured .commission .cl{color:rgba(255,255,255,.55)}
.plan .commission .cv{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.plan .price .was{text-decoration:line-through;color:var(--t3);font-size:22px;font-weight:700;margin-inline-end:10px}
.plan.featured .price .was{color:rgba(255,255,255,.4)}

/* ---- final CTA split ---- */
.ctasplit{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* ---- checkout drawer ---- */
.ck{position:fixed;inset:0;z-index:400;display:none}
.ck.open{display:block}
.ck .bg{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(5px);opacity:0;transition:opacity .35s}
.ck.in .bg{opacity:1}
.ck .panel{position:absolute;inset-inline-end:0;top:0;bottom:0;width:min(580px,100vw);background:var(--paper);transform:translateX(102%);transition:transform .5s cubic-bezier(.2,.8,.2,1);overflow-y:auto;box-shadow:-30px 0 80px -30px rgba(0,0,0,.5)}
[dir=rtl] .ck .panel{transform:translateX(-102%)}
.ck.in .panel{transform:translateX(0)}
.ck .inner{padding:32px 40px 44px;min-height:100%;display:flex;flex-direction:column}
.ck .ckhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.ck .ckhead .brand svg{height:22px;width:auto}
.ck .x{width:42px;height:42px;border:1px solid var(--line2);border-radius:50%;background:#fff;cursor:pointer;font-size:16px;display:grid;place-items:center;transition:.15s}
.ck .x:hover{border-color:var(--ink);transform:rotate(90deg)}
.cksteps{display:flex;gap:7px;margin-bottom:28px}
.cksteps i{height:4px;flex:1;border-radius:2px;background:var(--line2);transition:background .3s}
.cksteps i.on{background:var(--violet)}
.ckpane{display:none;animation:fade .4s ease}
.ckpane.on{display:block}
.ck h2{font-size:26px;letter-spacing:-.03em;margin-bottom:6px}
.ck .sub{color:var(--t2);font-size:14.5px;margin:0 0 22px;line-height:1.55}
.ckfound{display:flex;gap:12px;align-items:center;background:var(--ink);color:#fff;border-radius:14px;padding:14px 18px;margin-bottom:18px}
.ckfound .badge25{width:38px;height:38px;border-radius:10px;background:var(--violet);display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.ckfound .t{font-size:13.5px;font-weight:700}
.ckfound .s{font-size:12px;color:rgba(255,255,255,.6)}
.ckplans{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.ckplan{border:1.5px solid var(--line2);border-radius:14px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s}
.ckplan:hover{border-color:var(--ink)}
.ckplan.on{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,77,255,.16)}
.ckplan .pn{font-weight:800;font-size:16px}
.ckplan .pd{font-size:12.5px;color:var(--t3);margin-top:2px}
.ckplan .pr{text-align:end;flex:none}
.ckplan .pr .a{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.ckplan .pr .c{font-size:11.5px;color:var(--t3);font-weight:600}
.ckplan .pr .was{font-size:12px;color:var(--t3);text-decoration:line-through;font-weight:600}
.ck .btnrow{display:flex;gap:12px;margin-top:auto;padding-top:24px}
.ck select{width:100%;height:50px;border:1px solid var(--line2);border-radius:var(--r-m);padding:0 13px;font-family:inherit;font-size:15px;background:#fff;outline:none;color:var(--t1)}
.ck select:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(124,77,255,.18)}
.ck .seg{display:flex;gap:10px;margin-bottom:18px}
.ck .seg button{flex:1;height:48px;border:1.5px solid var(--line2);border-radius:12px;background:#fff;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:.15s;color:var(--t2)}
.ck .seg button.on{border-color:var(--violet);color:var(--ink);box-shadow:0 0 0 3px rgba(124,77,255,.14)}
.cksum{border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 20px;margin-bottom:20px}
/* success */
.ck .success{text-align:center;padding:30px 0 10px}
.ck .success .comet-wrap{width:120px;height:74px;margin:0 auto 8px;color:var(--ink)}
.ck .success .comet-wrap svg{width:100%;height:100%}
.ck .success h2{font-size:30px;margin:14px 0 8px}
.ck .success .vnum{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;margin:18px 0 6px}
.ck .success .vnum b{color:#b9a6ff;font-variant-numeric:tabular-nums}
.ck .success ul.next{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;text-align:start}
.ck .success ul.next li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--t2);background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.ck .success ul.next li svg{width:18px;height:18px;flex:none;margin-top:1px;stroke:var(--violet);fill:none;stroke-width:2.2}
@keyframes ckpop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.ck .success .comet-wrap{animation:ckpop .7s cubic-bezier(.2,.8,.2,1) both}
/* confetti */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;width:8px;height:13px;top:-20px;border-radius:2px;animation:cfall linear forwards}
@keyframes cfall{to{transform:translateY(110vh) rotate(720deg)}}

/* ---- hero additions ---- */
.bigcomet svg{width:100%;height:auto;display:block}
.hero2 .citychip{white-space:nowrap}
.storebtn .st .s1,.storebtn .st .s2{white-space:nowrap}

.hero2 .citychip{display:inline-flex;align-items:center;gap:9px;background:#1c1c1c;border:1px solid #2c2c2c;color:#fff;border-radius:999px;height:36px;padding:0 16px;font-size:13px;font-weight:600}
.hero2 .citychip .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);animation:pulse 2.2s ease-in-out infinite}
.hero2 .citychip .soon{color:rgba(255,255,255,.45);font-weight:500}

/* ============ WOW motion layer ============ */
/* pointer tilt + sheen for cards */
.tilt{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;transform-style:preserve-3d;will-change:transform}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(115deg,transparent 38%,rgba(124,77,255,.12) 50%,transparent 62%);transform:translateX(-130%);pointer-events:none}
.sheen:hover::after{animation:cardSheen .9s cubic-bezier(.2,.8,.2,1)}
@keyframes cardSheen{to{transform:translateX(130%)}}
.stats .n{font-variant-numeric:tabular-nums}
/* scroll progress */
#scrollbar{position:fixed;top:0;inset-inline-start:0;height:3px;background:var(--violet);width:0;z-index:500;box-shadow:0 0 12px rgba(124,77,255,.7)}

/* cursor glow in hero */
.cursor-glow{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(124,77,255,.17),transparent 65%);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .4s}
.hero2:hover .cursor-glow{opacity:1}

/* hero card 3D tilt */
.mf-card{transition:transform .3s ease,box-shadow .3s;will-change:transform}

@media (prefers-reduced-motion:no-preference){
  /* comet glide-in (plays once) */
  .hero2 .bigcomet{opacity:0;animation:cometGlide 1.8s cubic-bezier(.2,.8,.2,1) .35s forwards}
  @keyframes cometGlide{from{opacity:0}to{opacity:.07}}

  /* richer reveals: blur + rise */
  .reveal{transition:opacity .8s cubic-bezier(.2,.75,.25,1),transform .8s cubic-bezier(.2,.75,.25,1),filter .8s cubic-bezier(.2,.75,.25,1);filter:blur(7px)}
  .reveal.in{filter:blur(0)}

  /* split-word headline reveals */
  .wsplit span{display:inline-block;opacity:0;transform:translateY(.6em);filter:blur(4px);transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1),filter .55s;transition-delay:var(--wd,0s)}
  .wsplit.in span{opacity:1;transform:none;filter:none}

  /* primary button sheen sweep */
  .btn.primary{position:relative;overflow:hidden}
  .btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-140%);pointer-events:none}
  .btn.primary:hover::after{animation:btnsheen .75s ease}
  @keyframes btnsheen{to{transform:translateX(140%)}}

  /* founding spots pop in */
  .spot.claimed{animation:spotpop .5s cubic-bezier(.2,.8,.2,1)}
  @keyframes spotpop{0%{transform:scale(.4)}55%{transform:scale(1.22)}100%{transform:scale(1)}}

  /* big 25 lights up when count completes */
  .bignum b{transition:text-shadow .8s ease}
  .bignum.lit b{text-shadow:0 0 36px rgba(124,77,255,.85),0 0 90px rgba(124,77,255,.45)}

  /* featured plan levitates */
  .plan.featured{animation:plift 6s ease-in-out infinite}
  @keyframes plift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

  /* live chips breathe */
  .city.live{animation:cityGlow 3.4s ease-in-out infinite}
  @keyframes cityGlow{0%,100%{box-shadow:0 0 0 0 rgba(124,77,255,0)}50%{box-shadow:0 14px 40px -14px rgba(124,77,255,.55)}}

  /* ticker pauses on hover */
  .ticker:hover .tk{animation-play-state:paused}


  /* dash gets a slow ambient shadow */
  .dash{animation:dashGlow 7s ease-in-out infinite}
  @keyframes dashGlow{0%,100%{box-shadow:0 30px 70px -40px rgba(0,0,0,.4)}50%{box-shadow:0 44px 90px -40px rgba(124,77,255,.35)}}
}

/* ============ HERO v2 — modern AI-style opening ============ */
.hero2{padding:118px 0 110px}
#heroParticles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero2 .grain{position:absolute;inset:0;pointer-events:none;opacity:.055;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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.aur{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;mix-blend-mode:screen}
.aur.a1{width:680px;height:680px;background:radial-gradient(circle,rgba(124,77,255,.42),transparent 68%);top:-220px;inset-inline-start:-180px}
.aur.a2{width:560px;height:560px;background:radial-gradient(circle,rgba(76,42,190,.4),transparent 68%);bottom:-240px;inset-inline-end:6%}

.hero-title{font-size:clamp(46px,7vw,96px);line-height:1.02}
[dir=rtl] .hero-title{line-height:1.2}
.hero-title .hl{display:block}
.rotwrap{color:#9b7bff;display:inline-block;perspective:600px}
.rot{display:inline-block;transform-origin:50% 100%}
.shimmer{background:linear-gradient(100deg,#7C4DFF 12%,#c9b8ff 34%,#ffffff 50%,#c9b8ff 66%,#7C4DFF 88%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}

.mf-wrap{position:relative}
.fchips{position:absolute;inset:0;pointer-events:none;z-index:3}
.fc{position:absolute;display:flex;align-items:center;gap:8px;background:rgba(18,18,18,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:10px 16px;color:#fff;font-size:12.5px;font-weight:600;box-shadow:0 18px 44px -16px rgba(0,0,0,.7);white-space:nowrap}
.fc .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);flex:none}
.fc1{top:-22px;inset-inline-start:-26px}
.fc2{bottom:-24px;inset-inline-start:22%}
.fc3{top:-22px;inset-inline-end:-22px}

.scrolldown{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3}
.scrolldown .m{width:24px;height:38px;border:1.5px solid rgba(255,255,255,.32);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scrolldown .m i{width:3px;height:8px;border-radius:2px;background:#9b7bff;display:block}

@media (prefers-reduced-motion:no-preference){
  /* nav drops in */
  body[data-page="home"] .nav{animation:navIn .7s cubic-bezier(.2,.8,.2,1) both}
  @keyframes navIn{from{transform:translateY(-100%)}to{transform:translateY(0)}}
  /* aurora drift */
  .aur.a1{animation:aur1 13s ease-in-out infinite}
  .aur.a2{animation:aur2 17s ease-in-out infinite}
  @keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,60px) scale(1.16)}}
  @keyframes aur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-100px,-54px) scale(1.12)}}
  /* headline words flip up */
  .hero-title .hw{display:inline-block;opacity:0;transform:translateY(.7em) rotateX(55deg);transform-origin:0 100%;filter:blur(7px);animation:hwIn .85s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--hd,0s)}
  @keyframes hwIn{to{opacity:1;transform:none;filter:none}}
  /* supporting content rises */
  .hin{opacity:0;transform:translateY(22px);filter:blur(5px);animation:hinUp .85s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--hd,0s)}
  @keyframes hinUp{to{opacity:1;transform:none;filter:none}}
  /* shimmer sweep on the brand word */
  .shimmer{animation:hwIn .85s cubic-bezier(.2,.8,.2,1) forwards,shim 5.5s linear 1.6s infinite}
  @keyframes shim{to{background-position:-230% 0}}
  /* rotating verb */
  .rot.out{animation:rotOut .42s cubic-bezier(.5,0,.8,.4) forwards}
  .rot.in2{animation:rotIn .5s cubic-bezier(.2,.8,.2,1) forwards}
  @keyframes rotOut{to{opacity:0;transform:translateY(-.55em) rotateX(70deg);filter:blur(5px)}}
  @keyframes rotIn{from{opacity:0;transform:translateY(.55em) rotateX(-70deg);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
  /* match card springs in */
  .mf-card{opacity:0;transform:translateY(36px) scale(.93)}
  .mf-card.entered{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.8,.2,1) .5s,transform 1s cubic-bezier(.16,1.2,.3,1) .5s}
  .mf-card.settled{transition:transform .3s ease,box-shadow .3s}
  /* floating glass chips */
  .fc{opacity:0;animation:fcIn .8s cubic-bezier(.2,.8,.2,1) var(--fd,1s) forwards,fcFloat 6s ease-in-out calc(var(--fd,1s) + .9s) infinite}
  .fc2{animation-duration:.8s,7.4s}
  .fc3{animation-duration:.8s,5.2s}
  @keyframes fcIn{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes fcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  /* scroll cue */
  .scrolldown .m i{animation:wheel 1.7s ease-in-out infinite}
  @keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
  .scrolldown{animation:hinUp .8s ease 1.4s both}
}
@media (max-width:920px){
  .fchips{display:none}
  .scrolldown{display:none}
  .hero-title{font-size:clamp(42px,11vw,64px)}
}

/* ============ NAV motion layer ============ */
.nav{transition:background .45s ease,border-color .45s ease}
.nav .nav-in{transition:height .35s cubic-bezier(.2,.8,.2,1)}
.nav.scrolled .nav-in{height:60px}
.nav.on-dark{background:rgba(10,10,10,.55);border-bottom-color:rgba(255,255,255,.08)}
.nav.on-dark .brand{color:#fff}
.nav.on-dark .nav-links a{color:rgba(255,255,255,.62)}
.nav.on-dark .nav-links a:hover{color:#fff}
.nav.on-dark .lang{color:#fff;border-color:#3a3a3a}
.nav.on-dark .btn.ghost{color:#fff;border-color:#3a3a3a}
.nav.on-dark .burger span{background:#fff}
.nav-links{position:relative}
.nav-ind{position:absolute;bottom:-8px;inset-inline-start:0;height:2.5px;border-radius:2px;background:var(--violet);width:0;opacity:0;transition:left .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),opacity .25s;box-shadow:0 0 10px rgba(124,77,255,.7);pointer-events:none}
.nav-ind.show{opacity:1}
.brand svg{transition:filter .3s ease}
.brand:hover svg{filter:drop-shadow(0 0 9px rgba(124,77,255,.85))}
@media (prefers-reduced-motion:no-preference){
  .brand svg{animation:logoGlide 9s ease-in-out 3s infinite}
  @keyframes logoGlide{0%,90%,100%{transform:translateX(0)}93%{transform:translateX(6px)}96%{transform:translateX(-2px)}}
  [dir=rtl] .brand svg{animation-name:logoGlideR}
  @keyframes logoGlideR{0%,90%,100%{transform:translateX(0)}93%{transform:translateX(-6px)}96%{transform:translateX(2px)}}
  .nav .btn.primary.sm{animation:ctaPulse 5.5s ease-in-out 2.5s infinite}
  @keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,77,255,0)}5%{box-shadow:0 0 0 8px rgba(124,77,255,.22)}12%{box-shadow:0 0 0 0 rgba(124,77,255,0)}}
}

/* ---- entrance-animation safety (applied by JS if the animation engine stalls) ---- */
.fx-settle .nav{animation:none !important;transform:none !important}
.fx-settle .hero-title .hw,.fx-settle .hin,.fx-settle .fc,.fx-settle .scrolldown,.fx-settle .shimmer{animation:none !important;opacity:1 !important;transform:none !important;filter:none !important}
.fx-settle .mf-card{opacity:1 !important;transform:none !important}
.fx-settle .hero2 .bigcomet{animation:none !important;opacity:.07 !important}
.fx-settle .mf-card{opacity:1 !important;transform:none !important}

/* ============ native polish layer ============ */
@media (prefers-reduced-motion:no-preference){
  /* richer card reveal: rise + slight scale + blur */
  .reveal{will-change:opacity,transform,filter}
  /* staggered cascade — set via --si index in JS */
  .casc{opacity:0;transform:translateY(30px) scale(.97);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .7s;transition-delay:calc(var(--si,0)*.08s)}
  .casc.in{opacity:1;transform:none;filter:blur(0);transition-delay:0s}
  /* pointer tilt cards */
  [data-tilt]{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;transform-style:preserve-3d;will-change:transform}
  /* shimmer underline on eyebrows when revealed */
  .eyebrow{position:relative}
  /* count-up numbers get tabular feel */
  .countup{font-variant-numeric:tabular-nums}
  /* city live dot ripple already; add hover scale to soon cities */
  .city.soon:hover{border-style:solid;border-color:var(--violet)}
  .city.soon:hover .nm{color:var(--ink)}
  /* step number badge draws a ring on reveal */
  .step .num{position:relative}
  /* match join button micro-press */
  .joinbtn:active{transform:scale(.94)}
  /* store buttons subtle idle float, staggered */
  .cta .storebtn{will-change:transform}
}

/* ============ HERO variant toggle (venue-led) ============ */
.hero2 .wrap-venue{display:none}
body[data-hero="venue"] .hero2 .wrap-dual{display:none}
body[data-hero="venue"] .hero2 .wrap-venue{display:grid}
.playerlink{display:inline-block;margin-top:18px;color:rgba(255,255,255,.62);font-size:14px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px;transition:color .15s,border-color .15s}
.playerlink:hover{color:#fff;border-color:#fff}
/* venue earnings hero card */
.vh-card .vh-earn{margin:4px 0 18px}
.vh-amt{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.vh-sub{font-size:12.5px;color:var(--t3);margin-top:6px;font-weight:500}
.vh-bars{display:flex;gap:7px;align-items:flex-end;height:84px;margin-bottom:20px}
.vh-bars .pb{flex:1;background:#eef0ff;border-radius:6px 6px 0 0;position:relative;height:8%;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.vh-bars .pb.hi{background:linear-gradient(var(--violet),#9b7bff)}
.vh-row{display:flex;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:16px}
.vh-stat{flex:1;text-align:center}
.vh-stat .k{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.vh-stat .t{font-size:11.5px;color:var(--t3);margin-top:3px;font-weight:600}
.vh-found{display:flex;align-items:center;gap:11px;background:var(--ink);color:#fff;border-radius:13px;padding:12px 15px;font-size:12.5px;font-weight:600}
.vh-found .vh-badge{width:34px;height:34px;border-radius:9px;background:var(--violet);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}

/* ============ Tweaks panel ============ */
.tweaks{position:fixed;inset-inline-end:20px;bottom:20px;z-index:600;width:288px;background:rgba(16,16,16,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #2c2c2c;border-radius:18px;color:#fff;box-shadow:0 30px 70px -28px rgba(0,0,0,.7);font-family:var(--font,'Plus Jakarta Sans')}
.tweaks[hidden]{display:none}
.tw-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #262626}
.tw-title{font-weight:800;font-size:14px;letter-spacing:-.01em}
.tw-x{width:28px;height:28px;border:1px solid #333;border-radius:50%;background:transparent;color:#fff;cursor:pointer;font-size:12px;display:grid;place-items:center;transition:.15s}
.tw-x:hover{border-color:#fff;transform:rotate(90deg)}
.tw-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:18px}
.tw-label{font-size:12px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:9px}
.tw-seg{display:flex;gap:6px;background:#0e0e0e;border:1px solid #262626;border-radius:11px;padding:4px}
.tw-seg button{flex:1;height:36px;border:none;border-radius:8px;background:transparent;color:rgba(255,255,255,.6);font-family:inherit;font-weight:700;font-size:12.5px;cursor:pointer;transition:.18s}
.tw-seg button.on{background:var(--violet);color:#fff}
.tw-hint{font-size:11.5px;color:rgba(255,255,255,.42);margin:9px 0 0;line-height:1.45}
.tw-row{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85);cursor:pointer}
.tw-toggle{width:42px;height:24px;border-radius:999px;background:#333;border:none;position:relative;cursor:pointer;transition:background .2s;flex:none}
.tw-toggle i{position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .2s}
.tw-toggle.on{background:var(--violet)}
.tw-toggle.on i{inset-inline-start:21px}
@media (max-width:560px){.tweaks{inset-inline:14px;width:auto}}

/* ---- venue portal placeholder toast ---- */
.jawla-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);z-index:900;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:14px 20px;border-radius:999px;box-shadow:0 24px 50px -22px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1);max-width:min(90vw,420px)}
.jawla-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.jawla-toast .dot{width:8px;height:8px;border-radius:50%;background:var(--violet);flex:none}

/* ---- responsive ---- */
@media (max-width:920px){
  .rate-wrap,.found .wrap,.pathcards,.ctasplit{grid-template-columns:1fr;gap:34px}
  .cities{grid-template-columns:repeat(2,1fr)}
  .wall{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .ck .inner{padding:24px 22px 36px}
  .foundbar{justify-content:flex-start}
}
@media (max-width:560px){
  .spotgrid{grid-template-columns:repeat(5,36px)}
  .spot{width:36px;height:36px}
  .cities{grid-template-columns:1fr 1fr}
}