@charset "UTF-8";

:root {
  color-scheme: dark;
  --ink: #f5f5ff;
  --muted: #b6bddc;
  --deep: #0b102b;
  --panel: #141a3b;
  --panel-light: #1b2348;
  --mint: #83f5d2;
  --mint-deep: #25ceb2;
  --pink: #ff68d4;
  --gold: #ffd574;
  --line: rgba(201, 211, 255, .14);
  --radius: 28px;
  --content: 1160px;
  font-family: Vazirmatn, "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--deep); }
body { margin: 0; color: var(--ink); background: var(--deep); line-height: 1.7; -webkit-font-smoothing: antialiased; }
body:has(.main-nav.is-open) { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mint); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
::selection { color: #091029; background: var(--mint); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.container { width: min(var(--content), calc(100% - 48px)); margin-inline: auto; }
.section-pad { padding-block: 112px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 100; inset-block-start: 10px; inset-inline-start: 12px; padding: 10px 16px; border-radius: 12px; color: #10122e; background: var(--mint); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 20; inset-block-start: 0; border-bottom: 1px solid rgba(222, 229, 255, .08); background: rgba(11, 16, 43, .84); backdrop-filter: blur(18px); }
.nav-wrap { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img { width: 48px; height: 48px; border: 2px solid rgba(131, 245, 210, .7); border-radius: 16px; object-fit: cover; }
.brand span { display: grid; line-height: 1.32; }
.brand strong { font-size: 1.1rem; letter-spacing: -.04em; }
.brand small { color: var(--muted); font-size: .72rem; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); color: #d3d7eb; font-size: .9rem; }
.main-nav a { transition: color .18s ease; }
.main-nav .language-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--mint); font-size: .8rem; font-weight: 800; }
.nav-toggle { display: none; }

.hero { position: relative; isolation: isolate; min-height: 660px; display: grid; align-items: center; overflow: hidden; padding-block: 72px 106px; }
.hero::before { position: absolute; z-index: -2; inset: 0; content: ""; background: radial-gradient(ellipse at 15% 45%, rgba(71, 48, 204, .2), transparent 45%), radial-gradient(ellipse at 92% 60%, rgba(12, 190, 181, .13), transparent 43%); }
.hero-glow { position: absolute; z-index: -1; width: 430px; aspect-ratio: 1; border-radius: 50%; filter: blur(100px); opacity: .16; pointer-events: none; }
.hero-glow--one { inset-block-start: 4%; inset-inline-start: 8%; background: #7a48ff; }
.hero-glow--two { inset-block-end: -20%; inset-inline-end: 22%; background: #ff40cd; opacity: .12; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: center; gap: clamp(44px, 7vw, 112px); }
.hero-copy { position: relative; z-index: 2; max-width: 620px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: var(--mint); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px var(--mint); }
h1, h2, h3, p { margin-block-start: 0; }
h1 { margin-block-end: 20px; font-size: clamp(3.25rem, 6vw, 5.7rem); line-height: 1.12; letter-spacing: -.065em; font-weight: 900; }
h1 span, .section-heading h2 span, .how-copy h2 span, .download-copy h2 span, .faq-layout h2 span { color: var(--mint); }
.hero-lead { max-width: 560px; margin-block-end: 24px; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.95; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-block-end: 28px; }
.hero-tags span { padding: 7px 12px; border: 1px solid rgba(203, 213, 255, .14); border-radius: 999px; color: #e6e8fa; background: rgba(24, 31, 68, .62); font-size: .77rem; }
.hero-actions, .download-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 62px; padding: 9px 17px; border: 1px solid transparent; border-radius: 17px; font-size: .9rem; line-height: 1.35; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { color: inherit; transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button > span:nth-child(2) { display: grid; text-align: start; }
.button small { color: inherit; opacity: .75; font-size: .66rem; }
.button strong { font-size: 1rem; }
.button-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 12px; color: #11213a; background: rgba(255, 255, 255, .72); font-size: 1.05rem; font-weight: 900; }
.button-arrow { align-self: start; font-size: .82rem; opacity: .7; }
.button--mint { color: #092b31; background: linear-gradient(135deg, #a0ffdd, #5be3c8); box-shadow: 0 10px 36px rgba(57, 229, 194, .18); }
.button--mint:hover { color: #092b31; box-shadow: 0 14px 42px rgba(57, 229, 194, .27); }
.button--outline { border-color: rgba(207, 218, 255, .27); color: var(--ink); background: rgba(25, 30, 65, .55); }
.button--outline:hover { border-color: var(--mint); background: rgba(131, 245, 210, .08); }
.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; margin-block-start: 21px; color: #969fca; font-size: .78rem; }
.store-row a, .download-stores a { color: #d8dcf1; font-weight: 700; }
.store-row a span, .download-stores a span { color: var(--mint); }

.hero-art { position: relative; min-height: 540px; display: grid; place-items: center; }
.hero-orbit { position: absolute; width: min(96%, 480px); aspect-ratio: 1; border: 1px solid rgba(140, 157, 255, .2); border-radius: 50%; background: radial-gradient(circle, rgba(105, 98, 255, .13), transparent 67%); box-shadow: inset 0 0 0 35px rgba(116, 112, 255, .025), 0 0 130px rgba(82, 54, 212, .19); }
.hero-orbit::before, .hero-orbit::after { position: absolute; width: 11px; aspect-ratio: 1; border-radius: 50%; content: ""; background: var(--mint); box-shadow: 0 0 22px var(--mint); }
.hero-orbit::before { inset-block-start: 13%; inset-inline-start: 17%; }
.hero-orbit::after { inset-block-end: 18%; inset-inline-end: 12%; width: 7px; background: var(--pink); box-shadow: 0 0 22px var(--pink); }
.phone-frame { position: relative; z-index: 1; width: clamp(225px, 26vw, 302px); padding: 9px; border: 1px solid rgba(244, 246, 255, .67); border-radius: 40px; background: #07091b; box-shadow: 0 40px 110px rgba(0, 0, 0, .58), 0 0 0 8px rgba(255, 255, 255, .035); transform: rotate(-5deg); }
.phone-frame img { width: 100%; border-radius: 31px; }
.phone-speaker { position: absolute; z-index: 2; inset-block-start: 16px; inset-inline-start: 50%; width: 25%; height: 17px; border-radius: 0 0 13px 13px; background: #060718; transform: translateX(-50%); }
.float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; min-width: 180px; padding: 13px 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; background: rgba(26, 32, 73, .86); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); backdrop-filter: blur(16px); }
.float-card > span:first-child { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 13px; color: #17254a; background: var(--gold); font-size: 1.1rem; }
.float-card b, .float-card small { display: block; }
.float-card b { font-size: .82rem; }
.float-card small { color: var(--muted); font-size: .68rem; }
.float-card--quiz { inset-block-start: 19%; inset-inline-end: -3%; transform: rotate(4deg); }
.float-card--rank { inset-block-end: 17%; inset-inline-start: -2%; transform: rotate(-4deg); }
.rank-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 13px; color: #12342e; background: var(--mint); font-size: .82rem; font-weight: 900; }
.hero-sticker { position: absolute; z-index: 2; display: grid; place-items: center; border-radius: 50%; font-size: 2rem; }
.sticker--star { inset-block-start: 5%; inset-inline-start: 18%; color: var(--gold); transform: rotate(-15deg); }
.sticker--spark { inset-block-end: 10%; inset-inline-end: 13%; color: var(--pink); transform: rotate(14deg); }
.scroll-cue { position: absolute; inset-block-end: 28px; inset-inline-start: 50%; display: flex; align-items: center; gap: 9px; color: #aab1d1; font-size: .74rem; transform: translateX(-50%); }
.scroll-cue span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--mint); }

.feature-strip { border-block: 1px solid rgba(213, 221, 255, .11); background: linear-gradient(90deg, rgba(44, 33, 104, .39), rgba(14, 79, 83, .22)); }
.strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-block: 25px; }
.strip-grid > div { display: flex; align-items: center; gap: 14px; }
.strip-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(131, 245, 210, .32); border-radius: 16px; color: var(--mint); background: rgba(131, 245, 210, .1); font-size: .72rem; font-weight: 900; }
.strip-icon--pink { border-color: rgba(255, 104, 212, .33); color: var(--pink); background: rgba(255, 104, 212, .09); }
.strip-icon--gold { border-color: rgba(255, 213, 116, .34); color: var(--gold); background: rgba(255, 213, 116, .1); }
.strip-grid p { display: grid; margin: 0; line-height: 1.45; }
.strip-grid strong { font-size: .9rem; }
.strip-grid small { color: var(--muted); font-size: .73rem; }

.features-section { background: radial-gradient(ellipse at 70% 55%, rgba(82, 58, 161, .12), transparent 47%); }
.section-heading { max-width: 700px; margin-block-end: 45px; }
.section-heading h2, .how-copy h2, .faq-layout h2 { margin-block-end: 13px; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.2; letter-spacing: -.05em; }
.section-heading > p:last-child, .how-copy > p:not(.eyebrow), .faq-layout .section-heading > p:last-child { max-width: 620px; margin-block-end: 0; color: var(--muted); font-size: .98rem; }
.feature-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; grid-template-rows: repeat(2, minmax(208px, auto)); gap: 17px; }
.feature-card { position: relative; min-height: 208px; overflow: hidden; padding: 25px 27px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(29, 38, 81, .86), rgba(19, 24, 54, .91)); }
.feature-card::after { position: absolute; inset-inline-end: -44px; inset-block-end: -66px; width: 178px; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255, 255, 255, .02), 0 0 0 38px rgba(255, 255, 255, .02); content: ""; }
.feature-card--large { grid-row: span 2; min-height: 433px; background: radial-gradient(ellipse at 88% 93%, rgba(116, 82, 255, .23), transparent 45%), linear-gradient(155deg, #1a214d, #111630); }
.feature-card--mint { background: linear-gradient(135deg, rgba(31, 116, 109, .22), rgba(18, 33, 56, .93)); }
.feature-card--purple { background: linear-gradient(135deg, rgba(100, 46, 140, .23), rgba(24, 25, 62, .94)); }
.feature-card--gold { background: linear-gradient(135deg, rgba(130, 103, 43, .17), rgba(24, 28, 59, .95)); }
.feature-emoji { display: inline-grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(255, 255, 255, .15); border-radius: 17px; background: rgba(255, 255, 255, .07); font-size: 1.5rem; }
.feature-index { float: inline-end; padding-block-start: 7px; color: #8189b5; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }
.feature-card h3 { margin-block: 18px 7px; font-size: 1.25rem; letter-spacing: -.03em; }
.feature-card p { max-width: 440px; margin-block-end: 0; color: var(--muted); font-size: .85rem; }
.category-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 28px; }
.category-chips span { padding: 7px 12px; border: 1px solid rgba(161, 179, 255, .2); border-radius: 999px; color: #dce2ff; background: rgba(108, 117, 186, .15); font-size: .75rem; }
.timer-dots { display: flex; gap: 6px; margin-block-start: 18px; }
.timer-dots i { width: 19px; height: 6px; border-radius: 10px; background: var(--mint); }
.timer-dots i:nth-child(4), .timer-dots i:nth-child(5) { background: rgba(131, 245, 210, .22); }
.podium { position: absolute; inset-inline-end: 25px; inset-block-end: 0; display: flex; align-items: end; gap: 5px; height: 65px; }
.podium span { display: grid; width: 31px; place-items: start center; padding-block-start: 6px; border-radius: 8px 8px 0 0; color: #171537; background: #bfafea; font-size: .68rem; font-weight: 900; }
.podium span:nth-child(1), .podium span:nth-child(3) { height: 36px; opacity: .7; }
.podium span:nth-child(2) { height: 55px; color: #3b3010; background: var(--gold); }
.progress-line { height: 8px; overflow: hidden; margin-block-start: 21px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.progress-line span { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--mint)); }

.gallery-section { overflow: hidden; background: linear-gradient(180deg, rgba(22, 27, 61, .7), rgba(11, 16, 43, .4)); }
.section-heading--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 50px; }
.section-heading--row > p { max-width: 410px; color: var(--muted); font-size: .9rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.gallery-card { overflow: hidden; margin: 0; border: 1px solid rgba(224, 230, 255, .14); border-radius: 25px; background: #141a3b; box-shadow: 0 22px 58px rgba(0, 0, 0, .2); }
.gallery-card--category { margin-block-start: 35px; }
.gallery-card--store { margin-block-start: 70px; }
.gallery-image { height: 490px; overflow: hidden; background: #0a0d25; }
.gallery-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .45s ease; }
.gallery-card:hover .gallery-image img { transform: scale(1.025); }
.gallery-card figcaption { display: flex; align-items: center; gap: 14px; min-height: 90px; padding: 16px 21px; }
.gallery-card figcaption > span { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid rgba(131, 245, 210, .3); border-radius: 12px; color: var(--mint); font-size: .72rem; font-weight: 900; }
.gallery-card figcaption div { display: grid; line-height: 1.5; }
.gallery-card figcaption strong { font-size: .9rem; }
.gallery-card figcaption small { color: var(--muted); font-size: .73rem; }

.how-section { background: radial-gradient(ellipse at 5% 70%, rgba(17, 147, 136, .11), transparent 42%); }
.how-layout { display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: 85px; }
.how-copy { position: sticky; inset-block-start: 128px; }
.how-copy .text-link { display: inline-flex; align-items: center; gap: 12px; margin-block-start: 23px; color: var(--mint); font-size: .9rem; font-weight: 800; }
.text-link span { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(131, 245, 210, .34); border-radius: 50%; }
.steps-list { margin: 0; padding: 0; list-style: none; }
.steps-list li { display: grid; grid-template-columns: 55px minmax(0, 1fr) 48px; align-items: center; gap: 20px; min-height: 142px; border-block-start: 1px solid var(--line); }
.steps-list li:last-child { border-block-end: 1px solid var(--line); }
.step-number { color: var(--mint); font-size: .82rem; font-weight: 900; }
.steps-list h3 { margin-block: 0 3px; font-size: 1.08rem; }
.steps-list p { margin-block-end: 0; color: var(--muted); font-size: .84rem; }
.step-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 15px; color: var(--gold); background: rgba(255, 255, 255, .035); }

.download-section { padding-block: 35px 112px; }
.download-card { position: relative; display: grid; grid-template-columns: 1fr .7fr; align-items: center; min-height: 510px; overflow: hidden; padding: clamp(30px, 6vw, 72px); border: 1px solid rgba(255, 255, 255, .2); border-radius: 38px; background: radial-gradient(ellipse at 20% 100%, rgba(255, 97, 203, .31), transparent 40%), radial-gradient(ellipse at 75% 5%, rgba(131, 245, 210, .24), transparent 41%), linear-gradient(130deg, #343077, #1b2250 52%, #123f4b); box-shadow: 0 34px 100px rgba(0, 0, 0, .3); }
.download-copy { position: relative; z-index: 2; max-width: 650px; }
.download-copy h2 { margin-block-end: 15px; font-size: clamp(2.6rem, 5.1vw, 4.5rem); line-height: 1.14; letter-spacing: -.06em; }
.download-copy > p:not(.eyebrow):not(.download-note) { max-width: 490px; margin-block-end: 23px; color: #d2d6ee; }
.button--light { color: #172039; background: #f8f8e5; box-shadow: 0 8px 25px rgba(0, 0, 0, .13); }
.button--light:hover { color: #172039; background: #fff; }
.button--glass { border-color: rgba(255, 255, 255, .26); color: white; background: rgba(5, 12, 37, .28); }
.button--glass:hover { border-color: var(--mint); background: rgba(131, 245, 210, .11); }
.download-stores { display: flex; flex-wrap: wrap; gap: 20px; margin-block-start: 19px; font-size: .83rem; }
.download-note { max-width: 560px; margin-block: 15px 0; color: #b8c4dc; font-size: .7rem; }
.download-integrity { margin-block-start: 12px; color: #b8c4dc; font-size: .7rem; }
.download-integrity summary { width: fit-content; color: #d9e0f6; cursor: pointer; }
.download-integrity code { display: block; max-width: 100%; overflow-wrap: anywhere; margin-block-start: 7px; color: var(--mint); font-family: ui-monospace, Consolas, monospace; font-size: .68rem; }
.download-brand { position: relative; display: grid; min-height: 330px; place-items: center; }
.download-brand img { position: relative; z-index: 2; width: clamp(145px, 21vw, 250px); aspect-ratio: 1; border: 5px solid rgba(255, 255, 255, .83); border-radius: 35%; box-shadow: 0 26px 70px rgba(0, 0, 0, .39); transform: rotate(7deg); }
.brand-ring { position: absolute; width: 330px; max-width: 90%; aspect-ratio: 1; border: 1px solid rgba(214, 236, 255, .25); border-radius: 50%; }
.brand-ring--two { width: 250px; border-color: rgba(255, 213, 116, .38); transform: rotateX(60deg) rotate(-25deg); }
.brand-star { position: absolute; inset-block-start: 8%; inset-inline-end: 8%; color: var(--gold); font-size: 2.1rem; }
.download-orb { position: absolute; width: 230px; aspect-ratio: 1; border-radius: 50%; filter: blur(1px); opacity: .13; }
.download-orb--one { inset-block-start: -130px; inset-inline-end: 5%; background: var(--mint); }
.download-orb--two { inset-block-end: -160px; inset-inline-start: 41%; background: var(--pink); }

.faq-section { padding-block-start: 30px; background: radial-gradient(ellipse at 80% 50%, rgba(79, 43, 130, .11), transparent 50%); }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; align-items: start; }
.faq-layout .section-heading { position: sticky; inset-block-start: 128px; margin: 0; }
.faq-list details { border-block-start: 1px solid var(--line); }
.faq-list details:last-child { border-block-end: 1px solid var(--line); }
.faq-list summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; cursor: pointer; font-size: .99rem; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(131, 245, 210, .24); border-radius: 50%; color: var(--mint); content: "+"; font-size: 1.15rem; font-weight: 500; transition: transform .18s ease; }
.faq-list details[open] summary::after { content: "−"; transform: rotate(180deg); }
.faq-list details p { max-width: 690px; margin-block: -3px 21px; color: var(--muted); font-size: .88rem; }
.community-band { border-block: 1px solid rgba(235, 241, 255, .12); background: linear-gradient(90deg, rgba(64, 41, 129, .3), rgba(24, 103, 95, .24)); }
.community-inner { display: flex; align-items: center; gap: 17px; min-height: 120px; }
.community-mark { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 213, 116, .36); border-radius: 15px; color: var(--gold); background: rgba(255, 213, 116, .1); }
.community-inner p { display: grid; flex: 1; margin: 0; line-height: 1.5; }
.community-inner p strong { font-size: 1rem; }
.community-inner p small { color: var(--muted); font-size: .8rem; }
.community-inner .button { min-height: 48px; padding: 7px 17px; border-radius: 14px; font-size: .78rem; font-weight: 800; }

.site-footer { padding-block: 58px 19px; background: #080c21; }
.footer-main { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 45px; padding-block-end: 44px; }
.footer-brand p { max-width: 250px; margin-block: 18px 0; color: #9099bd; font-size: .82rem; }
.footer-links { display: grid; align-content: start; gap: 10px; }
.footer-links h2 { margin-block: 6px 7px; color: #f0f2ff; font-size: .82rem; }
.footer-links a { width: fit-content; color: #9ca6c9; font-size: .77rem; }
.footer-links a:hover { color: var(--mint); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block-start: 18px; border-block-start: 1px solid rgba(215, 222, 255, .11); color: #7d87ab; font-size: .69rem; }
.footer-bottom i { color: var(--pink); font-style: normal; }

/* Reading-friendly legal pages */
.legal-main { min-height: 60vh; padding-block: 72px 100px; background: radial-gradient(ellipse at 12% 7%, rgba(69, 52, 153, .16), transparent 43%); }
.legal-shell { max-width: 880px; }
.legal-back { display: inline-flex; align-items: center; gap: 9px; margin-block-end: 26px; color: var(--mint); font-size: .82rem; font-weight: 800; }
.legal-shell h1 { margin-block-end: 13px; font-size: clamp(2.4rem, 5vw, 4rem); }
.legal-meta { margin-block-end: 38px; color: #8f99bd; font-size: .8rem; }
.legal-content { padding: clamp(23px, 5vw, 47px); border: 1px solid var(--line); border-radius: 26px; background: rgba(21, 27, 60, .82); }
.legal-content h2 { margin-block: 31px 9px; font-size: 1.2rem; }
.legal-content h2:first-child { margin-block-start: 0; }
.legal-content p, .legal-content li { color: #c3c9e0; font-size: .9rem; line-height: 1.95; }
.legal-content ul { padding-inline-start: 22px; }
.legal-content a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.legal-callout { padding: 16px 19px; border-inline-start: 3px solid var(--gold); border-radius: 12px; color: #e7e4ce; background: rgba(255, 213, 116, .08); font-size: .83rem; }

html[dir="ltr"] .brand { letter-spacing: -.02em; }
html[dir="ltr"] .hero-copy, html[dir="ltr"] .section-heading, html[dir="ltr"] .how-copy, html[dir="ltr"] .download-copy, html[dir="ltr"] .faq-layout { text-align: left; }
html[dir="ltr"] .eyebrow { letter-spacing: .08em; }
html[dir="ltr"] .feature-index { float: right; }
html[dir="ltr"] .hero-sticker, html[dir="ltr"] .float-card, html[dir="ltr"] .brand-star, html[dir="ltr"] .download-orb { direction: ltr; }

@media (max-width: 980px) {
  .section-pad { padding-block: 88px; }
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(285px, .82fr); gap: 32px; }
  .hero-art { min-height: 475px; }
  .phone-frame { width: clamp(215px, 29vw, 265px); }
  .float-card { min-width: 150px; padding: 10px 12px; }
  .float-card--quiz { inset-inline-end: -2%; }
  .float-card--rank { inset-inline-start: -2%; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .feature-card--large { grid-row: auto; min-height: 260px; }
  .gallery-image { height: 395px; }
  .how-layout, .faq-layout { gap: 48px; }
  .download-card { grid-template-columns: 1fr .55fr; }
  .footer-main { gap: 25px; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 34px, var(--content)); }
  .section-pad { padding-block: 72px; }
  .nav-wrap { min-height: 72px; }
  .brand img { width: 43px; height: 43px; }
  .nav-toggle { position: relative; z-index: 2; display: grid; width: 44px; height: 44px; align-content: center; justify-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: rgba(255, 255, 255, .045); cursor: pointer; }
  .nav-toggle > span:not(.sr-only) { width: 17px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] > span:nth-last-child(3) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:nth-last-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] > span:nth-last-child(1) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav { position: fixed; z-index: 1; inset: 72px 0 auto; display: none; align-items: stretch; gap: 0; padding: 13px 22px 25px; border-block-end: 1px solid var(--line); background: rgba(11, 16, 43, .98); box-shadow: 0 25px 40px rgba(0, 0, 0, .25); }
  .main-nav.is-open { display: grid; }
  .main-nav a { padding: 12px 7px; border-block-end: 1px solid rgba(206, 217, 255, .08); }
  .main-nav .language-link { width: fit-content; min-height: auto; margin-block-start: 13px; padding: 7px 13px; border: 1px solid var(--line); }
  .hero { min-height: 0; padding-block: 56px 69px; }
  .hero-layout { grid-template-columns: 1fr; gap: 22px; }
  .hero-copy { max-width: 600px; }
  h1 { font-size: clamp(3rem, 14vw, 5.2rem); }
  .hero-lead { font-size: .98rem; }
  .hero-art { min-height: 465px; margin-block-start: 0; }
  .hero-orbit { width: min(90%, 390px); }
  .phone-frame { width: min(63vw, 250px); }
  .float-card--quiz { inset-block-start: 16%; inset-inline-end: 0; }
  .float-card--rank { inset-block-end: 13%; inset-inline-start: 0; }
  .sticker--star { inset-block-start: 3%; inset-inline-start: 12%; }
  .sticker--spark { inset-block-end: 5%; inset-inline-end: 10%; }
  .scroll-cue { display: none; }
  .strip-grid { grid-template-columns: 1fr; gap: 15px; padding-block: 22px; }
  .strip-grid > div { gap: 12px; }
  .strip-icon { width: 42px; height: 42px; border-radius: 14px; }
  .section-heading { margin-block-end: 31px; }
  .section-heading h2, .how-copy h2, .faq-layout h2 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .feature-grid { grid-template-columns: 1fr; gap: 12px; }
  .feature-card, .feature-card--large { min-height: 205px; padding: 22px; }
  .feature-card--large { min-height: 280px; }
  .section-heading--row { display: block; }
  .section-heading--row > p { margin-block: 14px 0; }
  .gallery-grid { grid-template-columns: repeat(3, 78vw); gap: 13px; overflow: auto; padding-block-end: 15px; scroll-snap-type: x mandatory; scrollbar-color: rgba(131, 245, 210, .5) rgba(255, 255, 255, .07); }
  .gallery-card, .gallery-card--category, .gallery-card--store { margin-block-start: 0; scroll-snap-align: start; }
  .gallery-image { height: 405px; }
  .how-layout, .faq-layout { grid-template-columns: 1fr; gap: 35px; }
  .how-copy, .faq-layout .section-heading { position: static; }
  .steps-list li { grid-template-columns: 41px minmax(0, 1fr) 37px; gap: 12px; min-height: 127px; }
  .step-mark { width: 35px; height: 35px; }
  .download-section { padding-block: 12px 76px; }
  .download-card { grid-template-columns: 1fr; gap: 15px; min-height: auto; padding: 33px 25px; border-radius: 27px; }
  .download-copy h2 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .download-brand { min-height: 230px; }
  .download-brand img { width: 158px; border-radius: 31%; }
  .brand-ring { width: 240px; }
  .brand-ring--two { width: 185px; }
  .download-buttons { display: grid; grid-template-columns: 1fr; }
  .download-buttons .button { justify-content: start; }
  .faq-section { padding-block-start: 7px; }
  .community-inner { flex-wrap: wrap; min-height: 0; padding-block: 23px; }
  .community-inner p { flex-basis: calc(100% - 70px); }
  .community-inner .button { margin-inline-start: 63px; }
  .footer-main { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 5px; }
  .legal-main { padding-block: 45px 70px; }
  .legal-content { padding: 23px 19px; }
}

@media (max-width: 390px) {
  .container { width: calc(100% - 28px); }
  .hero-actions { display: grid; }
  .hero-actions .button { justify-content: start; }
  .store-row { gap: 7px 13px; font-size: .72rem; }
  .hero-art { min-height: 420px; }
  .float-card { min-width: 136px; }
  .float-card--quiz { inset-inline-end: -3px; }
  .float-card--rank { inset-inline-start: -3px; }
  .gallery-grid { grid-template-columns: 84vw; }
  .gallery-image { height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Cash-prize and referral redesign */
.hero { min-height: 0; padding-block: 52px 88px; }
.hero-layout { gap: clamp(38px, 6vw, 90px); }
.hero-copy { max-width: 640px; }
.hero-copy h1 { max-width: 620px; }
.hero-art { min-height: 590px; }
.phone-frame { width: clamp(230px, 25vw, 294px); height: min(590px, 70svh); overflow: hidden; border-radius: 36px; transform: rotate(-3deg); }
.phone-frame img { display: block; width: 100%; height: 100%; border-radius: 27px; object-fit: cover; object-position: top center; }
.float-card { min-width: 194px; }
.float-card--quiz { inset-block-start: 21%; }
.float-card--rank { inset-block-end: 15%; }
.feature-strip { position: relative; z-index: 1; }

.earnings-section { position: relative; overflow: hidden; padding-block: 102px; background: radial-gradient(ellipse at 8% 48%, rgba(35, 202, 177, .12), transparent 42%), radial-gradient(ellipse at 92% 10%, rgba(127, 76, 255, .14), transparent 43%), #0d122e; }
.earnings-heading { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: clamp(32px, 6vw, 84px); margin-block-end: 38px; }
.earnings-heading h2 { margin-block-end: 0; font-size: clamp(2.35rem, 4.2vw, 4rem); line-height: 1.19; letter-spacing: -.055em; }
.earnings-heading > p { max-width: 500px; margin-block-end: 7px; color: var(--muted); font-size: 1rem; line-height: 1.95; }
.earnings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.earning-card { position: relative; min-height: 290px; overflow: hidden; padding: clamp(24px, 3.4vw, 38px); border: 1px solid rgba(215, 224, 255, .15); border-radius: 27px; background: linear-gradient(145deg, rgba(28, 37, 79, .96), rgba(16, 21, 49, .97)); box-shadow: 0 20px 58px rgba(0, 0, 0, .18); }
.earning-card::after { position: absolute; inset-inline-end: -80px; inset-block-end: -130px; width: 275px; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .09); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255, 255, 255, .018), 0 0 0 48px rgba(255, 255, 255, .016); content: ""; pointer-events: none; }
.earning-card--prize { background: radial-gradient(ellipse at 90% 110%, rgba(255, 196, 76, .17), transparent 46%), linear-gradient(145deg, #1c244c, #121832); }
.earning-card--referral { background: radial-gradient(ellipse at 90% 110%, rgba(85, 229, 198, .16), transparent 46%), linear-gradient(145deg, #19284d, #111832); }
.earning-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.earning-icon { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; color: var(--gold); background: rgba(255, 213, 116, .11); font-size: 1.5rem; }
.earning-card--referral .earning-icon { color: var(--mint); background: rgba(131, 245, 210, .1); }
.earning-index { color: #8c96bd; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.earning-card h3 { position: relative; z-index: 1; margin-block: 25px 9px; font-size: clamp(1.35rem, 2.2vw, 1.8rem); letter-spacing: -.035em; }
.earning-card p { position: relative; z-index: 1; max-width: 580px; margin-block-end: 25px; color: #bac2df; font-size: .91rem; line-height: 1.9; }
.earning-detail { position: relative; z-index: 1; color: #d4dbf0; font-size: .75rem; font-weight: 700; }
.earning-detail i { margin-inline: 4px; color: var(--mint); font-style: normal; }
.earnings-note { max-width: 920px; margin-block: 22px 0; padding: 13px 17px; border-inline-start: 3px solid var(--gold); border-radius: 9px 14px 14px 9px; color: #bac2df; background: rgba(255, 213, 116, .055); font-size: .78rem; line-height: 1.8; }

@media (max-width: 980px) {
  .hero-art { min-height: 520px; }
  .phone-frame { width: clamp(220px, 27vw, 265px); height: min(540px, 66svh); }
  .earnings-section { padding-block: 84px; }
}

@media (max-width: 720px) {
  .hero { padding-block: 54px 66px; }
  .hero-art { min-height: 480px; }
  .phone-frame { width: min(63vw, 250px); height: min(470px, 120vw); }
  .float-card { min-width: 154px; }
  .earnings-heading { grid-template-columns: 1fr; gap: 15px; margin-block-end: 28px; }
  .earnings-grid { grid-template-columns: 1fr; gap: 13px; }
  .earning-card { min-height: 0; padding: 25px 23px; }
  .earning-card h3 { margin-block-start: 20px; font-size: 1.4rem; }
  .earning-card p { margin-block-end: 18px; }
}

@media (max-width: 390px) {
  .hero-art { min-height: 445px; }
  .phone-frame { width: min(64vw, 230px); height: min(430px, 118vw); }
  .float-card { min-width: 139px; padding: 9px 10px; }
}