/* Deal It shopper landing page. Ported from docs/superpowers/specs/2026-10-08-landing-page-mockup.html. */
:root { --navy:#0D1235; --navy-deep:#0A0E27; --navy-up:#1A2456; --gold:#C9A84C; --gold-l:#FAC775; --gold-d:#A07828; --cream:#F7F3EA; --ink:#0D1235;
  --display:'Playfair Display', serif; --body:Inter, sans-serif; }
html[lang=ar] { --display: Amiri, serif; --body: 'IBM Plex Sans Arabic', sans-serif; }
html[lang=en] .ar, html[lang=ar] .en { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); background: var(--navy-deep); color: #fff; overflow-x: hidden; }
.lat { font-family: Inter, sans-serif; }

/* ================= HERO ================= */
.hero { position: relative; min-height: 680px; overflow: hidden; --lx: 70%; --ly: 40%;
  background: radial-gradient(110% 90% at 78% 0%, var(--navy-up) 0%, var(--navy) 45%, var(--navy-deep) 100%); }
html[dir=rtl] .hero { background: radial-gradient(110% 90% at 22% 0%, var(--navy-up) 0%, var(--navy) 45%, var(--navy-deep) 100%); }
/* The visitor's lantern: plain soft light that follows the cursor, no pattern */
.hero .pool { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--lx) var(--ly), #FAC77530, transparent 70%), radial-gradient(620px circle at var(--lx) var(--ly), #C9A84C14, transparent 70%); }
nav { position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; padding: 26px 56px; font-size: 13px; }
/* Logo intro: a cart rolls in, brakes on the logo spot, then turns into the self-drawing Deal It tag */
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 26px 'Playfair Display'; color: #fff; text-decoration: none; }
.logo .word span { color: var(--gold); }
.logo .mark { position: relative; flex: none; width: 34px; height: 40px; }
.logo .mark .icon { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The Deal It mark (gold bag, cream D-1 monogram) draws itself: strokes trace, fills fade, the handle dot pops */
.icon .lg-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.icon .lg-fill, .icon .lg-dot { opacity: 0; }
.icon .lg-dot { transform-box: fill-box; transform-origin: center; }
.logo .cart { position: absolute; left: -13px; top: -4px; width: 60px; height: 42px; opacity: 0; transform-origin: 50% 92%; pointer-events: none; }
.logo .cart svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--gold-l); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #FAC77599); }
.logo .cart .wheel { transform-box: fill-box; transform-origin: center; }
html[dir=rtl] .logo .cart .flip { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.logo .burst { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--gold-l); opacity: 0; pointer-events: none; box-shadow: 0 0 18px #FAC77588; }
.logo .word { clip-path: inset(0 100% 0 0); }
html[dir=rtl] .logo .word { clip-path: inset(0 0 0 100%); }

.logo.go .cart { animation: cartIn 1.1s cubic-bezier(.15,.7,.25,1) both; }
html[dir=rtl] .logo.go .cart { animation-name: cartInR; }
.logo.go .cart svg { animation: cartOut .45s cubic-bezier(.5,0,.75,0) 1.25s forwards; }
.logo.go .cart .wheel { animation: wheel 1.05s cubic-bezier(.15,.7,.25,1) both; }
.logo.go .cart .spd { animation: spd .9s ease-out both; }
.logo.go .burst { animation: burst .75s ease-out 1.5s; }
.logo.go .icon .lg-bag { animation: draw .8s cubic-bezier(.6,0,.3,1) 1.5s forwards; }
.logo.go .icon .lg-arc { animation: draw .5s cubic-bezier(.6,0,.3,1) 1.85s forwards; }
.logo.go .icon .lg-line { animation: draw .3s ease 1.95s forwards; }
.logo.go .icon .lg-base { animation: fadein .4s ease 2s forwards; }
.logo.go .icon .lg-dot { animation: pop .45s cubic-bezier(.2,1.6,.4,1) 2.15s forwards; }
.logo.go .icon .lg-ink { animation: draw .55s cubic-bezier(.6,0,.3,1) 2.2s forwards; }
.logo.go .icon .lg-stem { animation: fadein .35s ease 2.55s forwards; }
.logo.go .word { animation: wipe .7s cubic-bezier(.2,.8,.2,1) 2.65s forwards; }
.logo.go.rechk .icon .lg-ink { animation: redraw .6s cubic-bezier(.6,0,.3,1) both; }
@keyframes cartIn { 0% { opacity: 1; transform: translateX(-300px); } 72% { opacity: 1; transform: translateX(5px); } 82% { opacity: 1; transform: rotate(9deg); } 92% { opacity: 1; transform: rotate(-3deg); } 100% { opacity: 1; transform: none; } }
@keyframes cartInR { 0% { opacity: 1; transform: translateX(300px); } 72% { opacity: 1; transform: translateX(-5px); } 82% { opacity: 1; transform: rotate(-9deg); } 92% { opacity: 1; transform: rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes cartOut { to { opacity: 0; transform: scale(.35); filter: blur(4px) drop-shadow(0 0 14px #FAC775); } }
@keyframes wheel { from { transform: rotate(-900deg); } to { transform: none; } }
@keyframes spd { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes burst { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(2); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
@keyframes pop { 0% { opacity: 1; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
/* Final state with no intro (reduced motion) */
.logo.done .cart, .logo.done .burst { display: none; }
.logo.done .icon .lg-draw { stroke-dashoffset: 0; }
.logo.done .icon .lg-fill, .logo.done .icon .lg-dot { opacity: 1; }
.logo.done .word { clip-path: none; }
nav .links { display: flex; gap: 30px; opacity: .82; }
nav .links a { color: #fff; text-decoration: none; }
nav .right { display: flex; gap: 12px; align-items: center; }
.pill-lang { border: 1px solid #C9A84C88; color: var(--gold-l); padding: 7px 14px; border-radius: 999px; font: 600 13px var(--body); background: transparent; cursor: pointer; }
.hero h1 { position: relative; z-index: 3; margin: 30px 56px 0; font: 900 112px/.84 var(--display); letter-spacing: -.04em; pointer-events: none; }
html[lang=ar] .hero h1 { font-size: 104px; line-height: 1.12; letter-spacing: 0; }
.hero h1 em { color: var(--gold); font-style: italic; font-weight: 700; }
html[lang=ar] .hero h1 em { font-style: normal; }
.hero .sub { position: relative; z-index: 3; margin: 28px 58px 0; max-width: 420px; font-size: 16px; line-height: 1.6; opacity: .8; }
.howlink { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px; margin: 22px 58px 0; color: var(--gold-l);
  font: 600 14px var(--body); text-decoration: none; border-bottom: 1px solid #FAC77555; padding-bottom: 3px; }
.skyline { position: absolute; left: 0; right: 0; bottom: 65px; width: 100%; height: 130px; z-index: 1; pointer-events: none; }
html[dir=rtl] .skyline { transform: scaleX(-1); }
.skyline.lit { -webkit-mask-image: radial-gradient(320px circle at var(--lx) var(--ly), #000, transparent 70%); mask-image: radial-gradient(320px circle at var(--lx) var(--ly), #000, transparent 70%); }
html[dir=rtl] .skyline.lit { -webkit-mask-image: radial-gradient(320px circle at calc(100% - var(--lx)) var(--ly), #000, transparent 70%); mask-image: radial-gradient(320px circle at calc(100% - var(--lx)) var(--ly), #000, transparent 70%); }

/* A: physical lanterns */
.pends { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pend { position: absolute; top: 0; transform-origin: 50% 0; cursor: grab; pointer-events: auto; will-change: transform; touch-action: none; }
.pend:active { cursor: grabbing; }
.pend .thread { width: 1px; margin: 0 auto; background: linear-gradient(#C9A84C00, var(--gold)); }
.tag { position: relative; background: var(--cream); color: var(--ink); padding: 38px 26px 18px; min-width: 150px; border-radius: 90px 90px 12px 12px;
  text-align: center; font-size: 13px; border: 1px solid var(--gold); box-shadow: 0 24px 50px #000a; user-select: none; transition: box-shadow .4s, filter .4s; }
.tag::before { content: ''; position: absolute; top: 15px; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); }
.tag b { display: block; font: 900 40px/1 'Playfair Display'; margin: 6px 0; letter-spacing: -.02em; }
.tag.gold { background: var(--gold); }
.pend .tag { filter: brightness(.78); }
.pend.lit .tag { filter: brightness(1.04); box-shadow: 0 26px 60px #000b, 0 0 42px #FAC77555; }
.pend.held .tag { box-shadow: 0 34px 70px #000c, 0 0 0 2px var(--gold-l); }

/* Reactive store badges, in the hero's empty lower corner */
.stores { position: absolute; z-index: 7; inset-inline-end: 56px; bottom: 176px; text-align: end; }
.stores .k { font: 700 11px var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 12px; }
html[lang=ar] .stores .k { letter-spacing: 0; font-size: 13px; }
.badges { display: flex; gap: 14px; perspective: 700px; }
.badge { position: relative; display: flex; align-items: center; gap: 12px; min-width: 196px; padding: 11px 20px 11px 16px; border-radius: 14px;
  background: #05071a; color: #fff; text-decoration: none; border: 1px solid #ffffff3a; transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; will-change: transform; }
.badge svg { width: 26px; height: 26px; flex: none; }
.badge .t { display: flex; flex-direction: column; line-height: 1.05; text-align: start; }
.badge small { font: 500 10px Inter; opacity: .78; letter-spacing: .02em; }
html[lang=ar] .badge small { font: 500 11px 'IBM Plex Sans Arabic'; }
.badge b { font: 700 19px Inter; letter-spacing: -.01em; }
.badge.lit { border-color: var(--gold); box-shadow: 0 0 0 1px #C9A84C66, 0 10px 40px #FAC77530; }
.badge.yours { border-color: var(--gold); }
.badge .yours-k { position: absolute; top: -10px; inset-inline-start: 14px; background: var(--gold); color: var(--navy); font: 800 9px Inter;
  letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; display: none; }
html[lang=ar] .badge .yours-k { font: 700 11px 'IBM Plex Sans Arabic'; letter-spacing: 0; }
.badge.yours .yours-k { display: block; }
.badge.soon { cursor: default; }
.badge.soon .t { opacity: .75; }
.badge .soon-k { position: absolute; bottom: -9px; inset-inline-end: 12px; background: var(--navy-up); color: var(--gold-l); border: 1px solid #C9A84C88;
  font: 700 9px Inter; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; display: none; }
html[lang=ar] .badge .soon-k { font: 700 11px 'IBM Plex Sans Arabic'; letter-spacing: 0; }
.badge.soon .soon-k { display: block; }

/* Ticker: no gold band; a vertical reel that rolls one message into focus at a time */
.ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: 66px; display: flex; align-items: center; gap: 24px; padding: 0 56px;
  background: linear-gradient(#0A0E2700, #0A0E27d9 55%); }
.ticker::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #C9A84C99 25%, #FAC775 50%, #C9A84C99 75%, transparent); }
.tk-k { flex: none; width: 90px; font: 600 11px 'JetBrains Mono'; letter-spacing: .2em; color: #FAC775aa; direction: ltr; unicode-bidi: isolate; }
.drum { position: relative; flex: 1; height: 100%; perspective: 260px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.tk-i { position: absolute; left: 0; right: 0; top: 50%; margin-top: -.6em; height: 1.2em; text-align: center; white-space: nowrap; will-change: transform, opacity;
  font: 800 13px/1.2 var(--body); letter-spacing: .22em; text-transform: uppercase; color: #FAC77599; transition: color .4s, text-shadow .4s; }
html[lang=ar] .tk-i { font: 700 16px/1.2 'IBM Plex Sans Arabic'; letter-spacing: 0; }
.tk-i.on { color: var(--gold-l); text-shadow: 0 0 18px #FAC77566; }
.tk-i .st { color: var(--gold); margin: 0 14px; font-size: 10px; vertical-align: 1px; }
.tk-bar { flex: none; width: 90px; height: 2px; background: #C9A84C33; border-radius: 2px; overflow: hidden; }
.tk-bar i { display: block; height: 100%; background: var(--gold-l); box-shadow: 0 0 8px var(--gold-l); transform-origin: left; transform: scaleX(0); }
html[dir=rtl] .tk-bar i { transform-origin: right; }

/* ================= SHARED ================= */
.label { font: 700 11px var(--body); letter-spacing: .3em; text-transform: uppercase; }
html[lang=ar] .label { letter-spacing: 0; font-size: 14px; }
h2.d { font-family: var(--display); font-weight: 900; letter-spacing: -.035em; margin: 16px 0 22px; }
html[lang=ar] h2.d { letter-spacing: 0; line-height: 1.2 !important; }
h2.d em { font-style: italic; font-weight: 700; }
html[lang=ar] h2.d em { font-style: normal; }
.reveal { transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.js .reveal { opacity: 0; transform: translateY(34px); }
.reveal.in { opacity: 1; transform: none; }

/* ================= CATEGORIES: the reel (far, near, far) ================= */
.space { position: relative; overflow: hidden; padding: 100px 56px 84px;
  background: radial-gradient(60% 50% at 50% 68%, #1A245699, transparent 70%), radial-gradient(35% 45% at 12% 18%, #C9A84C17, transparent 70%), radial-gradient(30% 40% at 95% 95%, #3B2A6E44, transparent 70%), #05071a; }
.space canvas.stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.comet { position: absolute; top: 12%; left: -10%; width: 160px; height: 1.5px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #FAC775 70%, #fff); transform: rotate(14deg); animation: comet 11s ease-in 3s infinite; }
@keyframes comet { 0% { opacity: 0; transform: translate(0, 0) rotate(14deg); } 3% { opacity: 1; } 12% { opacity: 0; transform: translate(70vw, 18vw) rotate(14deg); } 100% { opacity: 0; transform: translate(70vw, 18vw) rotate(14deg); } }
.space .copy { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 70px; align-items: end; }
.space .label { color: var(--gold-l); }
.space h2 { font-size: 66px; line-height: .95; margin-bottom: 0; text-wrap: balance; }
.space h2 em { background: linear-gradient(100deg, var(--gold-d), var(--gold-l) 38%, #fff 50%, var(--gold-l) 62%, var(--gold-d)); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; padding-bottom: .08em; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
.space .lead { font-size: 16px; line-height: 1.65; opacity: .78; max-width: 420px; margin: 0; }
.space .hint { font: 600 12px var(--body); color: var(--gold-l); opacity: .75; margin: 16px 0 0; }
.hud { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: 500 11px 'JetBrains Mono'; letter-spacing: .14em; color: #FAC775aa; }
.hud i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-l); box-shadow: 0 0 10px var(--gold-l); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .2; } }

.reel { position: relative; z-index: 2; height: 340px; margin: 40px -56px 0; cursor: grab; user-select: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.reel.drag { cursor: grabbing; }
.reel .track { position: absolute; inset: 0; perspective: 1100px; }
.node { position: absolute; left: 50%; top: 45%; width: 150px; height: 150px; margin: -75px 0 0 -75px; will-change: transform, opacity; cursor: pointer; }
.node .pod { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 28%, #2A3570dd, #0B1030f0 70%); border: 1px solid #C9A84C66;
  box-shadow: 0 0 0 6px #C9A84C10, inset 0 0 22px #FAC77522; transition: box-shadow .5s, border-color .5s; }
.node .pod::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed #FAC77544; animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.node.near .pod { border-color: var(--gold-l); box-shadow: 0 0 0 10px #FAC7751c, inset 0 0 34px #FAC7754d; }
/* The glow is its own layer, sized past the pod, so the browser never clips it to a square. */
.node::after { content: ''; position: absolute; inset: -80px; border-radius: 50%; z-index: -1; pointer-events: none; opacity: .2; transition: opacity .6s;
  background: radial-gradient(circle, #FAC77538 0%, #C9A84C14 40%, transparent 66%); }
.node.near::after { opacity: 1; }
.node .nm { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 18px; font: 700 13px Inter; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; transition: opacity .4s; }
html[lang=ar] .node .nm { font: 600 17px 'IBM Plex Sans Arabic'; letter-spacing: 0; }
.node.near .nm { opacity: 0; }
.node .tip { display: none; }
.node:not(.near) .ic, .node:not(.near) .ic * { animation-play-state: paused; }
.lens { position: absolute; left: 50%; top: 45%; width: 214px; height: 214px; margin: -107px 0 0 -107px; pointer-events: none; z-index: 200; animation: breathe 3.2s ease-in-out infinite; }
.lens i { position: absolute; width: 28px; height: 28px; border: 2px solid var(--gold-l); filter: drop-shadow(0 0 6px #FAC77599); }
.lens i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.lens i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.lens i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.lens i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.ruler { position: absolute; left: 0; right: 0; bottom: 6px; height: 16px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #FAC77555 0 1px, transparent 1px 20px) 0 100% / auto 7px repeat-x, repeating-linear-gradient(90deg, #FAC775aa 0 1px, transparent 1px 100px) 0 100% / auto 14px repeat-x; }
.ruler::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-bottom-color: var(--gold-l); filter: drop-shadow(0 0 6px #FAC775); }

.caption { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 26px; }
.caption .txt { text-align: center; min-width: 340px; }
.caption .txt.swap { animation: swap .6s cubic-bezier(.2,.8,.2,1); }
@keyframes swap { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
.caption .count { font: 600 12px 'JetBrains Mono'; letter-spacing: .24em; color: var(--gold-l); direction: ltr; unicode-bidi: isolate; }
.caption .big { font: 900 58px/1.05 var(--display); letter-spacing: -.03em; margin: 6px 0 4px; }
html[lang=ar] .caption .big { letter-spacing: 0; line-height: 1.35; }
.caption .tp { color: var(--gold-l); font-size: 15px; }
html[lang=ar] .caption .tp { font-size: 17px; }
.arrow { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1px solid #C9A84C77; background: #0B1030aa; color: var(--gold-l); display: grid; place-items: center; cursor: pointer;
  transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.arrow:hover { border-color: var(--gold-l); box-shadow: 0 0 26px #FAC77544; transform: scale(1.08); }
.arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir=rtl] .arrow svg { transform: scaleX(-1); }

/* Animated category icons: gold line art, one small loop each */
.ic { width: 76px; height: 76px; overflow: visible; fill: none; stroke: var(--gold-l); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #FAC77588); }
.ic * { transform-box: view-box; }
.ic .fill { fill: var(--gold-l); stroke: none; }
.ic-grocery .apple { animation: drop 2.8s cubic-bezier(.5,0,.75,0) infinite; }
.ic-grocery .basket { transform-origin: 24px 40px; animation: squash 2.8s infinite; }
@keyframes drop { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 42% { transform: translateY(9px); opacity: 1; } 56%, 100% { transform: translateY(9px); opacity: 0; } }
@keyframes squash { 0%, 40%, 58%, 100% { transform: none; } 46% { transform: scale(1.06, .93); } }
.ic-cafe .steam { stroke-dasharray: 14; animation: steam 2.4s ease-in-out infinite; }
.ic-cafe .s2 { animation-delay: .5s; } .ic-cafe .s3 { animation-delay: 1s; }
@keyframes steam { 0% { transform: translateY(4px); opacity: 0; stroke-dashoffset: 14; } 40% { opacity: 1; stroke-dashoffset: 0; } 100% { transform: translateY(-6px); opacity: 0; stroke-dashoffset: -14; } }
.ic-dining .lid { transform-origin: 38px 34px; animation: lid 3.2s cubic-bezier(.2,.8,.2,1) infinite; }
.ic-dining .spark { transform-origin: 24px 29px; animation: sparkle 3.2s ease-out infinite; }
@keyframes lid { 0%, 18%, 78%, 100% { transform: none; } 32%, 64% { transform: translateY(-5px) rotate(-28deg); } }
@keyframes sparkle { 0%, 24%, 72%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 40% { opacity: 1; transform: scale(1.1) rotate(45deg); } 60% { opacity: 1; transform: scale(.9) rotate(90deg); } }
.ic-beauty .cap { animation: press 2.6s ease-in-out infinite; }
.ic-beauty .mist circle { transform-origin: 30px 12px; animation: mist 2.6s ease-out infinite; }
.ic-beauty .mist circle:nth-child(2) { animation-delay: .06s; } .ic-beauty .mist circle:nth-child(3) { animation-delay: .12s; } .ic-beauty .mist circle:nth-child(4) { animation-delay: .18s; }
.ic-beauty .twinkle { transform-origin: 40px 30px; animation: twinkle 2.6s ease-in-out infinite; }
@keyframes press { 0%, 14%, 30%, 100% { transform: none; } 20% { transform: translateY(2px); } }
@keyframes mist { 0%, 18% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; } 70%, 100% { opacity: 0; transform: scale(1.35) translateX(3px); } }
@keyframes twinkle { 0%, 100% { transform: scale(.5) rotate(0); opacity: .3; } 50% { transform: scale(1.15) rotate(90deg); opacity: 1; } }
.ic-health .heart { transform-origin: 24px 28px; animation: beat 1.6s ease-in-out infinite; }
.ic-health .ecg { stroke-dasharray: 100; animation: ecg 1.6s linear infinite; stroke: #fff; }
@keyframes beat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.1); } 22% { transform: scale(.98); } 30% { transform: scale(1.06); } }
@keyframes ecg { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }
.ic-sport .bell { animation: lift 2s cubic-bezier(.45,0,.55,1) infinite; }
.ic-sport .speed { stroke-dasharray: 8; animation: speed 2s ease-out infinite; }
@keyframes lift { 0%, 100% { transform: translateY(9px); } 50% { transform: translateY(-5px); } }
@keyframes speed { 0%, 35% { opacity: 0; stroke-dashoffset: 8; } 50% { opacity: 1; stroke-dashoffset: 0; } 70%, 100% { opacity: 0; stroke-dashoffset: -8; } }
.ic-services .g1 { transform-origin: 19px 28px; animation: spin 6s linear infinite; }
.ic-services .g2 { transform-origin: 34px 14px; animation: spin 4.5s linear infinite reverse; }

/* ================= CALCULATOR: C, the scroll story ================= */
.calc { background: var(--cream); color: var(--ink); }
.calc-track { height: 230vh; position: relative; }
.calc-sticky { position: sticky; top: 0; min-height: 100vh; padding: 70px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.calc .label { color: var(--gold-d); }
.calc h2 { font-size: 78px; line-height: .9; }
.calc h2 em { color: var(--gold-d); }
.calc p.lead { font-size: 16px; line-height: 1.65; max-width: 420px; color: #0D1235bb; }
.controls { margin-top: 30px; display: grid; gap: 22px; max-width: 440px; }
.ctl-l { font: 700 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: #0D123599; margin-bottom: 10px; display: flex; justify-content: space-between; }
html[lang=ar] .ctl-l { letter-spacing: 0; font-size: 13px; }
.ctl-l output { font: 700 15px 'JetBrains Mono'; color: var(--ink); letter-spacing: 0; }
input[type=range] { width: 100%; accent-color: var(--gold-d); }
.seg { display: inline-flex; border: 1px solid #0D123533; border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { font: 600 13px var(--body); border: 0; background: transparent; color: var(--ink); padding: 9px 18px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.seg button.on { background: var(--navy); color: #fff; }
.receipt { position: relative; background: #fff; font-family: 'JetBrains Mono', monospace; font-size: 14px; padding: 34px 32px 70px;
  box-shadow: 0 30px 60px #0D123522; transform: rotate(1.2deg); clip-path: inset(0 0 100% 0);
  -webkit-mask: radial-gradient(circle 8px at 50% 100%, transparent 98%, #000) 0 0/22px 100% repeat-x; }
html[dir=rtl] .receipt { transform: rotate(-1.2deg); }
html[lang=ar] .receipt { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.receipt .hd { text-align: center; font: 700 22px 'Playfair Display'; }
.receipt .hd span { color: var(--gold-d); }
.receipt .meta { text-align: center; font-size: 11px; opacity: .65; margin: 6px 0 20px; }
.rrow { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #0D123533; opacity: 0; transform: translateY(8px); }
.rrow.big { font-weight: 700; font-size: 20px; border-bottom: 0; padding-top: 16px; }
.num { font-family: 'JetBrains Mono', monospace; direction: ltr; unicode-bidi: isolate; }
.g { color: var(--gold-d); }
.cur { font-family: var(--body); font-size: .9em; margin-inline-start: .3em; }
/* Odometer: one rolling column per digit */
.odo { display: inline-flex; align-items: flex-start; height: 1.15em; line-height: 1.15em; overflow: hidden; vertical-align: bottom; direction: ltr; }
.odo .col { display: flex; flex-direction: column; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.odo.instant .col { transition: none; }
.odo .col span { flex: none; height: 1.15em; }
.stamp { position: absolute; inset-inline-start: 30px; bottom: 14px; border: 2px solid var(--gold-d); color: var(--gold-d); font: 800 13px Inter;
  letter-spacing: .2em; padding: 7px 12px; opacity: 0; transform: rotate(-9deg) scale(2.4); }
.scrollhint { font: 700 11px Inter; letter-spacing: .2em; color: var(--gold-d); margin-top: 26px; transition: opacity .4s; }

/* ================= TIERS + MORE ================= */
.tiers { position: relative; padding: 110px 56px 0; overflow: hidden; background: radial-gradient(80% 60% at 20% 0%, var(--navy-up), var(--navy-deep) 70%); }
.tiers .label { color: var(--gold-l); }
.tiers h2 { font-size: 70px; line-height: .92; max-width: 640px; }
.tiers h2 em { color: var(--gold); }
.rail { height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent); margin: 70px 0 0; }
.tiers-row { display: flex; justify-content: center; gap: 70px; align-items: flex-start; }
.tier { display: flex; flex-direction: column; align-items: center; transform-origin: top center; animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.tier .thread { width: 1px; background: var(--gold); }
.t1 .thread { height: 40px; } .t1 .tag { width: 170px; }
.t2 .thread { height: 70px; } .t2 .tag { width: 200px; }
.t3 .thread { height: 100px; } .t3 .tag { width: 230px; background: linear-gradient(160deg, var(--gold-l), var(--gold)); }
.t2 { animation-delay: -2.4s; } .t3 { animation-delay: -4.1s; }
.tier .tag b { font-size: 52px; }
.tier .tag .nm { font: 700 13px var(--body); letter-spacing: .22em; text-transform: uppercase; }
html[lang=ar] .tier .tag .nm { letter-spacing: 0; font-size: 16px; }
.tier .tag .rq { font-size: 12px; opacity: .65; }
.pickup { text-align: center; margin: 46px auto 0; font-size: 15px; opacity: .85; }
.pickup b { color: var(--gold-l); }
.more { margin: 90px -56px 0; background: var(--navy-up); padding: 70px 56px 84px; }
.more h3 { font: 900 56px/.95 var(--display); letter-spacing: -.03em; margin: 0 0 40px; }
html[lang=ar] .more h3 { letter-spacing: 0; line-height: 1.2; }
.more h3 em { color: var(--gold); font-style: italic; font-weight: 700; }
html[lang=ar] .more h3 em { font-style: normal; }
.coupons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.coupon { background: var(--cream); color: var(--ink); border-radius: 14px; padding: 26px 34px; transition: transform .35s cubic-bezier(.2,.8,.2,1);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right/51% 100% no-repeat; }
.coupon:hover { transform: translateY(-6px) rotate(-1deg); }
.coupon.gold { background: var(--gold); }
.coupon .k { font: 700 11px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); }
.coupon.gold .k { color: var(--navy); opacity: .7; }
html[lang=ar] .coupon .k { letter-spacing: 0; font-size: 13px; }
.coupon b { display: block; font: 900 32px/1.05 var(--display); margin: 10px 0 8px; }
.coupon p { margin: 0; font-size: 14px; line-height: 1.55; color: #0D1235bb; }

/* ================= FAQ ================= */
.faq { background: var(--cream); color: var(--ink); padding: 110px 56px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.faq .label { color: var(--gold-d); }
.faq h2 { font-size: 66px; line-height: .92; margin-bottom: 0; }
.faq h2 em { color: var(--gold-d); }
details { border-top: 1px solid #0D123526; padding: 22px 0; }
details:last-child { border-bottom: 1px solid #0D123526; }
summary { list-style: none; cursor: pointer; display: flex; gap: 22px; align-items: baseline; font: 700 24px var(--display); }
summary::-webkit-details-marker { display: none; }
summary .n { font: 600 13px 'JetBrains Mono'; color: var(--gold-d); min-width: 26px; }
summary::after { content: '+'; margin-inline-start: auto; font: 400 28px Inter; color: var(--gold-d); transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 12px 0 0; margin-inline-start: 48px; font-size: 15px; line-height: 1.7; color: #0D1235cc; max-width: 560px; }
html[lang=ar] details p { font-size: 16px; line-height: 1.9; }

/* ================= FOOTER ================= */
footer { position: relative; background: var(--navy-deep); padding: 70px 56px 40px; overflow: hidden; }
footer .big { font: 900 92px/.9 var(--display); letter-spacing: -.04em; margin: 0 0 30px; }
html[lang=ar] footer .big { letter-spacing: 0; line-height: 1.2; }
footer .big em { color: var(--gold); font-style: italic; font-weight: 700; }
html[lang=ar] footer .big em { font-style: normal; }
footer .badges { justify-content: flex-start; }
footer .bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 50px; padding-top: 24px;
  border-top: 1px solid #ffffff1f; font-size: 13px; opacity: .8; }
footer .bottom a { color: #fff; margin-inline-end: 22px; text-decoration: none; }
footer svg.sky { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; opacity: .25; }
html[dir=rtl] footer svg.sky { transform: scaleX(-1); }

/* ================= MOBILE ================= */
@media (max-width: 900px) {
  nav { padding: 20px; } nav .links { display: none; }
  .hero { min-height: 0; padding-bottom: 142px; }
  .hero h1 { margin: 16px 20px 0; font-size: 68px; } html[lang=ar] .hero h1 { font-size: 60px; }
  .hero .sub { margin: 20px 22px 0; font-size: 15px; }
  .howlink { margin: 18px 22px 0; }
  .stores { position: relative; inset: auto; margin: 26px 22px 0; text-align: start; }
  .badges { gap: 10px; } .badge { flex: 1; min-width: 0; padding: 10px 12px; gap: 9px; }
  .badge b { font-size: clamp(14px, 4.2vw, 16px); white-space: nowrap; }
  .pends { position: relative; inset: auto; display: flex; gap: 14px; overflow-x: auto; padding: 0 22px 40px; margin-top: 26px; scrollbar-width: none; pointer-events: auto; }
  .pend { position: relative; left: auto !important; flex: 0 0 auto; }
  .pend .thread { height: 30px !important; }
  .tag { padding: 32px 20px 14px; min-width: 140px; font-size: 12px; } .tag b { font-size: 32px; } .pend .tag { filter: none; }
  .skyline { height: 80px; bottom: 57px; }
  .ticker { height: 58px; padding: 0 16px; gap: 10px; }
  .tk-k { width: auto; font-size: 10px; letter-spacing: .1em; }
  .tk-bar { display: none; }
  /* messages are kept short (about 24 characters) so phone text stays readable; it scales with the viewport */
  .tk-i { font-size: clamp(11px, 3.2vw, 12px); letter-spacing: .1em; }
  html[lang=ar] .tk-i { font-size: clamp(13px, 3.9vw, 15px); }
  .tk-i .st { margin: 0 8px; }
  .space { padding: 72px 20px 56px; }
  .space .copy { grid-template-columns: 1fr; gap: 0; }
  .space h2 { font-size: 44px; margin-bottom: 18px; }
  .reel { height: 250px; margin: 26px -20px 0; }
  .node { width: 112px; height: 112px; margin: -56px 0 0 -56px; } .ic { width: 58px; height: 58px; }
  .node .nm { font-size: 10px; margin-top: 14px; } html[lang=ar] .node .nm { font-size: 14px; }
  .lens { width: 160px; height: 160px; margin: -80px 0 0 -80px; } .lens i { width: 22px; height: 22px; }
  .caption { gap: 12px; margin-top: 18px; } .caption .txt { min-width: 0; flex: 1; } .caption .big { font-size: 38px; } .arrow { width: 44px; height: 44px; }
  .calc-track { height: auto; } .calc-sticky { position: relative; min-height: 0; grid-template-columns: 1fr; padding: 72px 20px; gap: 40px; }
  .calc h2 { font-size: 54px; } .controls { max-width: none; } .seg { display: flex; } .seg button { flex: 1; }
  .receipt { padding: 28px 22px 64px; transform: none !important; } .scrollhint { display: none; }
  .tiers { padding: 72px 20px 0; } .tiers h2 { font-size: 48px; } .rail { margin-top: 50px; }
  .tiers-row { gap: 10px; justify-content: space-between; }
  .t1 .tag { width: 100px; } .t2 .tag { width: 108px; } .t3 .tag { width: 116px; }
  .tier .tag { padding-left: 8px; padding-right: 8px; min-width: 0; } .tier .tag b { font-size: 30px; }
  .tier .tag .nm { font-size: 10px; letter-spacing: .14em; } .tier .tag .rq { font-size: 10px; display: block; line-height: 1.3; }
  .more { margin: 70px -20px 0; padding: 56px 20px 64px; } .more h3 { font-size: 40px; } .coupons { grid-template-columns: 1fr; gap: 14px; }
  .faq { grid-template-columns: 1fr; padding: 72px 20px; gap: 30px; } .faq h2 { font-size: 46px; } summary { font-size: 19px; gap: 14px; } details p { margin-inline-start: 40px; }
  footer { padding: 56px 20px 110px; } footer .big { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .tier, .space h2 em, .comet, .hud i, .lens, .node .pod::before, .ic, .ic * { animation: none !important; }
  .comet, .tk-bar { display: none; }
  html { scroll-behavior: auto; }
  .reveal, .js .reveal { opacity: 1; transform: none; transition: none; }
  .calc-track { height: auto; } .calc-sticky { position: relative; min-height: 0; } .odo .col { transition: none; } .caption .txt.swap { animation: none; }
}

/* ================= ADDED IN THE BUILD ================= */
/* Keyboard focus: visible on navy and on cream */
:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }
.calc :focus-visible, .faq :focus-visible { outline-color: var(--gold-d); }
.reel:focus-visible { outline-offset: -6px; }
/* Text only screen readers hear (the odometer's real number) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
details p a { color: var(--gold-d); }
/* Phones: the lantern row must scroll sideways under a finger */
@media (max-width: 900px) { .pend { touch-action: auto; cursor: default; } }


/* ================= HERO PHONE: designed mockups of the app's key screens ================= */
/* App palette (lib/core/theme/app_theme.dart). Screen is 248px wide: app sizes x0.64. */
.hero-phone { --app-navy: #0D1235; --app-navy-up: #1A2456; --app-navy-deep: #0A0E27; --app-line: #2A3570; --app-gold: #C9A84C; --app-gold-l: #FAC775; --app-gold-d: #A07828;
  --app-surface: #F4F5F9; --app-text: #0D1235; --app-text-2: #5A6070; --app-text-3: #6B7392; --app-border: #E0E4F0; --app-green: #1D9E75; --app-warn-l: #FFF8E6; }
.hero-phone { position: absolute; z-index: 6; top: 76px; inset-inline-start: max(505px, calc(36% - 135px)); width: 270px;
  transform: perspective(1600px) rotateY(-9deg) rotateX(2deg) scale(.84); transform-origin: 50% 0; }
html[dir=rtl] .hero-phone { transform: perspective(1600px) rotateY(9deg) rotateX(2deg) scale(.84); }
.hero-phone .phone { animation: phone-float 7s ease-in-out infinite; }
@keyframes phone-float { 50% { transform: translateY(-9px); } }

/* Hardware: metal band, black bezel, side buttons, Dynamic Island, glass glare, home indicator */
.phone { position: relative; width: 270px; height: 556px; padding: 3px; border-radius: 50px;
  background: linear-gradient(135deg, #8a8fa6 0%, #3b4157 18%, #1d2236 45%, #4a5068 72%, #9aa0b8 100%);
  box-shadow: 0 50px 90px -20px #000d, 0 30px 50px -30px #000, 0 0 0 1px #00000080, 0 0 70px #FAC77518; }
.phone .bezel { position: relative; height: 100%; padding: 8px; border-radius: 47px; background: #05060c; box-shadow: inset 0 0 0 1px #ffffff14; }
.phone .hw { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2a2f45, #8a8fa6); }
.phone .hw.act { left: -3px; top: 92px; height: 22px; }
.phone .hw.vu { left: -3px; top: 132px; height: 40px; }
.phone .hw.vd { left: -3px; top: 182px; height: 40px; }
.phone .hw.pw { right: -3px; top: 150px; height: 64px; background: linear-gradient(270deg, #2a2f45, #8a8fa6); }
.phone .scr { position: relative; width: 100%; height: 100%; border-radius: 39px; overflow: hidden; background: var(--app-surface);
  clip-path: inset(0 round 39px); /* clips reliably inside the tilted (3D) phone */ }
.phone .island { position: absolute; top: 9px; left: 50%; width: 72px; height: 22px; margin-left: -36px; border-radius: 14px; background: #000; z-index: 5; }
.phone .island::after { content: ''; position: absolute; right: 12px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3a6a, #05060c 70%); }
.phone .glare { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 39px;
  background: linear-gradient(115deg, #ffffff1f 0%, #ffffff08 26%, transparent 42%, transparent 78%, #ffffff0a 100%); }
.phone .hbar { position: absolute; bottom: 6px; left: 50%; width: 92px; height: 4px; margin-left: -46px; border-radius: 4px; background: #0D1235; opacity: .85; z-index: 5; transition: background .4s; }
.phone .scr.dark .hbar { background: #fff; }
.phone .track { display: flex; height: 100%; direction: ltr; transition: transform .75s cubic-bezier(.65,0,.25,1); }
.phone .track > .ps { flex: 0 0 100%; }
html[dir=rtl] .phone .track > .ps { direction: rtl; }

/* Screen typography and shared parts */
.ps { position: relative; height: 100%; overflow: hidden; background: var(--app-surface); color: var(--app-text); text-align: start;
  font: 400 8px/1.35 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
html[lang=ar] .ps { font-family: 'IBM Plex Sans Arabic', Inter, sans-serif; }
.ps b { font-weight: 600; }
.ps small { display: block; font-size: 7px; color: var(--app-text-3); }
.ic-ui { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ps-status { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 4px 17px 0 30px; color: #fff; direction: ltr; }
.ps-status.dark { color: var(--app-text); }
.ps-status .tm { font: 600 10px Inter; letter-spacing: -.01em; }
.ps-status .sb { display: flex; gap: 3px; align-items: center; }
.ps-status svg { height: 7px; width: auto; fill: currentColor; }
.ps-title { font: 700 13px 'Playfair Display', serif; }
html[lang=ar] .ps-title { font-family: Amiri, serif; font-size: 15px; }
.ps-title.light { color: #fff; }
.ps-bar-top { display: flex; align-items: center; gap: 8px; padding: 0 14px 8px; }
.ps-rbtn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--app-text); box-shadow: 0 2px 8px #0D12351f; }
.ps-rbtn.flat { width: 24px; height: 24px; box-shadow: none; background: #fff; border: .5px solid var(--app-border); }
.ps-rbtn.flat.light { background: #ffffff14; border-color: #ffffff22; color: #fff; }
html[dir=rtl] .ps-rbtn .ic-ui, html[dir=rtl] .ps-bar-top .ic-ui { transform: scaleX(-1); }
.ps-sec { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 7px; font-size: 9.6px; font-weight: 700; color: var(--app-text); }
.ps-sec.pad { margin: 12px 14px 7px; }
.ps-all { font-size: 8px; font-weight: 600; color: var(--app-gold); }
.ps-bar { height: 4px; border-radius: 2px; background: var(--app-line); overflow: hidden; }
.ps-bar i { display: block; height: 100%; border-radius: 2px; background: var(--app-gold); }
.ps-bar.dark { background: #0D12352a; margin: 7px 0 5px; } .ps-bar.dark i { background: var(--app-navy); }
.ps-btn { display: block; text-align: center; padding: 10px 12px; border-radius: 10px; font: 700 9px Inter; }
html[lang=ar] .ps-btn { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.ps-btn.gold { background: var(--app-gold); color: var(--app-navy); box-shadow: 0 6px 14px -6px #A07828aa; }
.ps-btn.navy { background: var(--app-navy); color: #fff; box-shadow: 0 6px 14px -6px #0D1235aa; }
.ps-sqn { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--app-navy); color: var(--app-gold); }
.ps-sqn.sm { width: 24px; height: 24px; border-radius: 7px; }
.ps-sqn.light { background: var(--app-warn-l); color: var(--app-gold-d); }

/* Home */
.ps-hdr { background: var(--app-navy); color: #fff; padding: 0 10px 18px; }
.ps-row { display: flex; align-items: flex-start; gap: 5px; padding: 2px 0 0; }
.ps-hi { flex: 1; min-width: 0; }
.ps-hi small { font-size: 9px; color: var(--app-text-3); }
.ps-hi b { display: block; margin-top: 2px; font-size: 12.8px; font-weight: 500; color: #fff; white-space: nowrap; }
.ps-sq { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6.5px; background: var(--app-navy-up); color: var(--app-text-3); }
.ps-badge { position: absolute; top: -3px; right: -3px; min-width: 11px; height: 11px; padding: 0 2px; border-radius: 6px; background: var(--app-gold); color: var(--app-navy); font: 700 6.5px/11px Inter; font-style: normal; text-align: center; }
.ps-av { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--app-gold); color: var(--app-navy); font: 600 9px Inter; }
.ps-pcard { margin-top: 11px; padding: 9px; border-radius: 9px; background: var(--app-navy-up); }
.ps-prow { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; white-space: nowrap; }
.ps-tier { padding: 1px 5px; border-radius: 3.2px; background: var(--app-gold); color: var(--app-navy-deep); font: 600 7px Inter; letter-spacing: .03em; }
.ps-ptxt { font-size: 8.3px; color: var(--app-text-3); }
.ps-next { margin-inline-start: auto; font-size: 7.7px; color: var(--app-gold); }
.ps-stats { display: flex; align-items: center; margin-top: 8px; }
.ps-stats > div { flex: 1; }
.ps-stats b { font-size: 11.5px; font-weight: 500; color: #fff; }
.ps-stats em { font-style: normal; font-size: 7px; color: var(--app-text-3); }
.ps-div { width: 1px; height: 24px; margin: 0 10px; background: var(--app-line); }
.ps-body { padding: 2px 10px 0; margin-top: -8px; background: var(--app-surface); border-radius: 12px 12px 0 0; position: relative; }
.ps-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; font-size: 7.7px; color: var(--app-text-2); }
.ps-cats i { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 4px; border-radius: 9px; background: #fff; border: .5px solid var(--app-border); color: var(--app-navy); }
.ps-cats .ic-ui { width: 16px; height: 16px; }
.ps-deals { display: flex; gap: 6px; margin-inline-end: -10px; overflow: hidden; }
.ps-deal { flex: none; width: 100px; border-radius: 9px; background: #fff; border: .5px solid var(--app-border); overflow: hidden; }
.ps-dimg { position: relative; height: 54px; display: grid; place-items: center; }
.ps-dimg svg { width: 64px; height: 48px; }
.ps-off { position: absolute; top: 5px; inset-inline-start: 5px; padding: 1px 5px; border-radius: 99px; background: var(--app-warn-l); color: var(--app-gold-d); font: 700 7px Inter; }
.ps-dtxt { padding: 5px 7px 7px; }
.ps-dtxt > b { display: block; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-dtxt small { margin: 1px 0 3px; }
.ps-dprice b { font-size: 10.5px; font-weight: 800; } .ps-dprice em { font-style: normal; font-size: 7px; color: var(--app-text-3); }
.ps-dprice s { font-size: 7px; color: var(--app-text-3); }
.ps-spincard { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding: 8px; border-radius: 9px; background: #fff; border: .5px solid var(--app-border); }
.ps-spincard > div { flex: 1; } .ps-spincard b { font-size: 9.6px; }
.ps-chip-ready { padding: 2px 7px; border-radius: 99px; background: var(--app-warn-l); color: var(--app-gold-d); border: .5px solid #C9A84C66; font: 700 7px Inter; }
.ps-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: grid; grid-template-columns: repeat(6, 1fr); padding: 7px 4px 0;
  background: #fff; border-top: .5px solid #E0E4F099; box-shadow: 0 -4px 12px #0D12350a; }
.ps-nav > div { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--app-text-3); font-size: 6.4px; }
.ps-nav .ic-ui { width: 15px; height: 15px; stroke-width: 1.7; }
.ps-nav > div.on { color: var(--app-navy); font-weight: 600; }
.ps-nav > div.on .ic-ui { fill: var(--app-navy); stroke: var(--app-navy); }

/* Product */
.ps-pimg { position: relative; height: 212px; display: grid; place-items: center; background: radial-gradient(90% 80% at 50% 45%, #FBF1DC, #EBD6A6); }
.ps-pimg .ps-status { position: absolute; top: 0; left: 0; right: 0; }
.ps-pimg > svg { width: 130px; height: 130px; margin-top: 18px; }
.ps-rbtn.l { position: absolute; top: 42px; inset-inline-start: 12px; } .ps-rbtn.r { position: absolute; top: 42px; inset-inline-end: 12px; color: var(--app-gold-d); }
.ps-pdots { position: absolute; bottom: 22px; display: flex; gap: 3px; }
.ps-pdots i { width: 4px; height: 4px; border-radius: 4px; background: #0D123533; } .ps-pdots i.on { width: 12px; background: var(--app-navy); }
.ps-sheet { position: relative; margin-top: -14px; padding: 12px 12px 0; border-radius: 16px 16px 0 0; background: #fff; height: calc(100% - 198px); }
.ps-shop { display: flex; align-items: center; gap: 4px; font-size: 7.5px; color: var(--app-text-3); }
.ps-shop .ic-ui { width: 10px; height: 10px; }
.ps-sheet h4 { margin: 3px 0 0; font: 700 12.5px 'Playfair Display', serif; color: var(--app-text); }
html[lang=ar] .ps-sheet h4 { font-family: Amiri, serif; font-size: 14px; }
.ps-pline { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; }
.ps-big { font: 800 16px Inter; letter-spacing: -.02em; } .ps-big em { font-style: normal; font-size: 8px; font-weight: 600; color: var(--app-text-3); }
.ps-earn { padding: 3px 7px; border-radius: 99px; background: var(--app-warn-l); color: var(--app-gold-d); font-weight: 700; font-size: 7.5px; border: .5px solid #C9A84C55; }
.ps-tip { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 9px; background: #EAF3DE; color: #3B6D11; font-size: 7.6px; }
.ps-tip .ic-ui { width: 12px; height: 12px; }
.ps-buy { display: flex; align-items: center; gap: 8px; margin: 9px 0 0; }
.ps-qty { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; border: .5px solid var(--app-border); font-size: 10px; }
.ps-qty i { font-style: normal; font-weight: 700; color: var(--app-text-2); width: 12px; text-align: center; }
.ps-buy .ps-btn { flex: 1; }
.ps-product .ps-deals .ps-deal { width: 104px; }

/* Checkout */
.ps-light { background: var(--app-surface); }
.ps-card { margin: 0 10px 7px; padding: 9px 10px; border-radius: 11px; background: #fff; border: .5px solid var(--app-border); }
.ps-cap { margin-bottom: 6px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 6.5px; }
html[lang=ar] .ps-cap { letter-spacing: 0; font-size: 7.5px; }
.ps-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 9px; background: var(--app-surface); text-align: center; font-weight: 600; }
.ps-seg .ps-opt { padding: 6px; border-radius: 7px; color: var(--app-text-3); }
.ps-seg .ps-opt.on { background: var(--app-navy); color: #fff; box-shadow: 0 2px 6px #0D123533; }
.ps-segnote { display: flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--app-green); font-weight: 600; font-size: 7.4px; }
.ps-segnote .ic-ui { width: 10px; height: 10px; stroke-width: 2.4; }
.ps-wal, .ps-pay { display: flex; align-items: center; gap: 8px; }
.ps-wal > div, .ps-pay > div { flex: 1; min-width: 0; }
.ps-wal b, .ps-pay b { display: block; font-size: 8px; }
.ps-wal small, .ps-pay small { font-size: 6.8px; }
.ps-sw { position: relative; flex: none; width: 28px; height: 16px; border-radius: 99px; background: var(--app-green); }
.ps-sw::after { content: ''; position: absolute; top: 2px; inset-inline-end: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; }
.ps-radio { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--app-border); }
.ps-radio.on { border: 4px solid var(--app-navy); }
.ps-line { display: flex; justify-content: space-between; padding: 2px 0; color: var(--app-text-2); }
.ps-line.total { margin-top: 4px; padding-top: 6px; border-top: .5px dashed var(--app-border); color: var(--app-text); font-weight: 800; font-size: 9px; }
.ps-line .neg { color: var(--app-green); font-weight: 700; }
.ps-earnrow { display: flex; align-items: center; gap: 6px; margin: 0 10px 8px; padding: 7px 10px; border-radius: 10px; background: var(--app-navy); color: #fff; font-weight: 600; }
.ps-earnrow .ic-ui { color: var(--app-gold-l); width: 12px; height: 12px; }
.ps-earnrow b { margin-inline-start: auto; color: var(--app-gold-l); font-size: 10px; font-weight: 800; }
.ps-cta { position: absolute; left: 0; right: 0; bottom: 22px; padding: 0 12px; }
.ps-light .ps-earnrow { position: absolute; left: 0; right: 0; bottom: 64px; }

/* Rewards */
.ps-rhdr { background: var(--app-navy); padding: 0 14px 52px; }
.ps-tiercard { position: relative; margin: -44px 10px 9px; padding: 11px 12px; border-radius: 14px; color: var(--app-navy);
  background: linear-gradient(135deg, #FFE3A3 0%, var(--app-gold-l) 20%, var(--app-gold) 58%, var(--app-gold-d) 100%); box-shadow: 0 12px 24px -10px #A07828cc; overflow: hidden; }
.ps-tiercard::after { content: ''; position: absolute; top: -40px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: #ffffff22; }
.ps-trow { display: flex; justify-content: space-between; align-items: center; }
.ps-tiercard .t { font: 800 7.5px Inter; letter-spacing: .22em; } .ps-tiercard .x { padding: 1px 6px; border-radius: 99px; background: var(--app-navy); color: var(--app-gold-l); font: 700 7.5px Inter; }
.ps-tiercard .m { margin: 4px 0 1px; font: 800 19px Inter; letter-spacing: -.02em; }
.ps-tiercard small { color: #0D1235b3; }
.ps-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 10px; }
.ps-wallet > div { padding: 8px 9px; border-radius: 10px; background: #fff; border: .5px solid var(--app-border); }
.ps-wallet .ic-ui { color: var(--app-gold-d); width: 12px; height: 12px; margin-bottom: 3px; }
.ps-wallet b { display: block; margin-top: 1px; font-size: 11px; font-weight: 800; } .ps-wallet em { font-style: normal; font-size: 7px; color: var(--app-text-3); font-weight: 600; }
.ps-act { margin: 0 10px; padding: 2px 9px; border-radius: 11px; background: #fff; border: .5px solid var(--app-border); }
.ps-act > div { display: flex; align-items: center; gap: 7px; padding: 6px 0; border-bottom: .5px solid var(--app-border); }
.ps-act > div:last-child { border-bottom: 0; }
.ps-act > div > span:nth-child(2) { flex: 1; } .ps-act b { display: block; font-size: 8px; }
.ps-act .p { color: var(--app-green); font-weight: 800; font-size: 8.5px; } .ps-act .m2 { font-weight: 800; font-size: 8.5px; }

/* Daily spin */
.ps-spin { background: radial-gradient(120% 70% at 50% 35%, #1F2A63, var(--app-navy-deep) 70%); color: #fff; text-align: center; }
.ps-spin .ps-bar-top { justify-content: flex-start; }
.ps-spinsub { color: var(--app-gold-l); font-size: 9px; font-weight: 600; }
.ps-wheelwrap { position: relative; width: 196px; height: 196px; margin: 14px auto 12px; filter: drop-shadow(0 14px 22px #0009); }
.ps-wheel { width: 100%; height: 100%; animation: ps-turn 16s linear infinite; }
@keyframes ps-turn { to { transform: rotate(360deg); } }
.ps-pointer { position: absolute; top: -7px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 15px solid #FAC775; filter: drop-shadow(0 2px 3px #0009); }
.ps-prizes { margin: 0 24px 12px; color: #ffffffb3; font-size: 8px; }
.ps-spin .ps-cta { padding: 0 22px; bottom: 40px; }
.ps-spin .ps-once { position: absolute; left: 0; right: 0; bottom: 24px; margin: 0; }
.ps-hist { display: flex; justify-content: center; gap: 5px; }
.ps-hist > span { padding: 4px 7px; border-radius: 99px; background: #ffffff12; border: .5px solid #ffffff22; color: #ffffffcc; font-size: 7px; }
.ps-hist b { color: var(--app-gold-l); font-weight: 700; }
.ps-once { margin-top: 7px; color: #ffffff80 !important; font-size: 7px; }

/* Caption and dots under the phone */
.phone-cap { margin-top: 20px; text-align: center; }
.phone-cap .lbl { font: 700 11px var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-l); min-height: 1.3em; }
html[lang=ar] .phone-cap .lbl { letter-spacing: 0; font-size: 14px; }
.phone-cap .dots { display: flex; justify-content: center; gap: 7px; margin-top: 9px; }
.phone-cap .dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: #ffffff40; font-size: 0; cursor: pointer; transition: width .4s, background .4s; }
.phone-cap .dots button.on { width: 22px; background: var(--gold-l); }
@media (max-width: 900px) {
  .hero-phone { position: relative; inset: auto; top: auto; margin: 30px auto 0; transform: none; }
  html[dir=rtl] .hero-phone { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-phone .phone, .ps-wheel { animation: none; }
  .phone .track { transition: none; }
}