:root {
  --purple: #8b18ff;
  --deep-purple: #5b00d4;
  --violet: #a020f0;
  --magenta: #d52bff;
  --yellow: #ffd84d;
  --lime: #b8ff42;
  --midnight: #10091f;
  --surface: #19102b;
  --surface-2: #211438;
  --white: #fff;
  --muted: #c5b7d9;
  --line: rgba(255,255,255,.12);
  --container: 1180px;
  --display: 'Space Grotesk', 'Manrope', sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --shadow: 0 30px 90px rgba(3,0,14,.48);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; background: var(--midnight); }
body { margin: 0; min-width: 320px; color: var(--white); background: var(--midnight); font-family: var(--body); overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .055; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
img, svg { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
::selection { color: var(--midnight); background: var(--yellow); }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; left: 20px; top: -100px; padding: 12px 18px; border-radius: 10px; color: var(--midnight); background: var(--yellow); font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 16px; }
.ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.ambient::after { content: ''; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.ambient span { position: absolute; width: 45vw; aspect-ratio: 1; border-radius: 50%; filter: blur(120px); opacity: .14; animation: orb 18s ease-in-out infinite alternate; }
.ambient span:nth-child(1) { left: -18%; top: 7%; background: var(--purple); }
.ambient span:nth-child(2) { right: -20%; top: 38%; background: var(--magenta); animation-delay: -6s; }
.ambient span:nth-child(3) { left: 30%; bottom: -30%; background: var(--deep-purple); animation-delay: -10s; }
.particle-field { position: absolute; inset: -20%; opacity: .42; background-image: radial-gradient(circle at 10% 20%,rgba(255,216,77,.75) 0 1px,transparent 2px),radial-gradient(circle at 35% 75%,rgba(213,43,255,.85) 0 1.5px,transparent 2.5px),radial-gradient(circle at 72% 28%,rgba(184,255,66,.7) 0 1px,transparent 2px),radial-gradient(circle at 90% 70%,rgba(255,255,255,.65) 0 1px,transparent 2px); background-size: 210px 190px,270px 250px,330px 290px,180px 220px; animation: particleDrift 32s linear infinite; }
.bg-shape { position: absolute; color: var(--magenta); font-style: normal; font-size: 24px; opacity: .2; text-shadow: 0 0 20px currentColor; animation: shapeFloat 9s ease-in-out infinite; }.shape-one { left: 8%; top: 26%; }.shape-two { right: 7%; top: 58%; animation-delay: -3s; }.shape-three { left: 42%; top: 78%; color: var(--yellow); animation-delay: -6s; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; transition: background .3s, border-color .3s, box-shadow .3s; border-bottom: 1px solid transparent; }
.site-header.scrolled, .site-header.menu-open { border-color: rgba(160,32,240,.22); background: rgba(12,6,25,.78); box-shadow: 0 15px 50px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.nav-shell { min-height: 82px; display: flex; align-items: center; gap: 36px; }
.brand { position: relative; flex: 0 0 auto; animation: logoIn .8s cubic-bezier(.22,1,.36,1) both; }
.brand::after { content: '✦'; position: absolute; right: -8px; top: -5px; color: var(--yellow); font-size: 10px; animation: sparkle 2.8s ease-in-out 1 .6s; }
.brand-full { width: 207px; height: auto; }
.brand-compact { display: none; width: 45px; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 29px; }
.main-nav a { position: relative; padding: 28px 0; color: #ddd0eb; font-size: 13px; font-weight: 700; text-decoration: none; }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,var(--purple),var(--magenta)); box-shadow: 0 0 10px var(--purple); transition: right .22s; }
.main-nav a:hover, .main-nav a.active { color: #fff; }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.menu-toggle { display: none; margin-left: auto; width: 45px; height: 45px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.05); }
.menu-toggle span { display: block; width: 21px; height: 2px; margin: 4px auto; background: #fff; transition: transform .25s, opacity .25s; }
.menu-toggle[aria-expanded=true] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded=true] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.header-tools { display: flex; align-items: center; gap: 7px; }.preference-button { height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 12px; color: #fff; background: rgba(255,255,255,.055); cursor: pointer; transition: transform .2s,border-color .2s,background .2s; }.preference-button:hover { transform: translateY(-2px); border-color: rgba(213,43,255,.5); background: rgba(139,24,255,.13); }.theme-icon { font-size: 16px; line-height: 1; }.language-toggle { min-width: 72px; padding-inline: 10px; font-size: 10px; font-weight: 800; letter-spacing: .08em; }.language-toggle i { color: var(--magenta); font-style: normal; }.language-toggle span:last-child { opacity: .46; }html[lang="en"] .language-toggle span:first-child { opacity: .46; }html[lang="en"] .language-toggle span:last-child { opacity: 1; }

.button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 13px; padding: 0 25px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; color: #fff; background: linear-gradient(110deg,var(--deep-purple),var(--purple) 48%,var(--magenta)); background-size: 160% 100%; box-shadow: 0 13px 35px rgba(139,24,255,.28), inset 0 1px rgba(255,255,255,.25); font-size: 13px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; text-decoration: none; transition: transform .2s, box-shadow .2s, background-position .25s; }
.button:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 18px 42px rgba(139,24,255,.42), 0 0 24px rgba(213,43,255,.16), inset 0 1px rgba(255,255,255,.25); }
.button:active { transform: translateY(0) scale(.98); }
.button[aria-disabled=true] { cursor: not-allowed; filter: saturate(.45); box-shadow: none; opacity: .64; }
.button[aria-disabled=true]:hover { transform: none; }
.button-small { min-height: 43px; padding-inline: 18px; border-radius: 13px; font-size: 11px; }
.button-ghost { background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(160,32,240,.28); backdrop-filter: blur(10px); }
.button-ghost:hover { background: rgba(139,24,255,.12); box-shadow: inset 0 0 0 1px rgba(213,43,255,.5), 0 12px 28px rgba(0,0,0,.18); }

.hero { position: relative; min-height: 850px; display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: 130px 0 70px; background: radial-gradient(circle at 68% 48%, rgba(139,24,255,.24), transparent 35%), radial-gradient(circle at 12% 42%, rgba(91,0,212,.16), transparent 28%), linear-gradient(145deg,#0b0614 0%,#140822 48%,#10091f 100%); }
.hero::before { content: ''; position: absolute; width: 600px; height: 600px; left: -340px; top: 10%; border: 1px solid rgba(160,32,240,.12); border-radius: 50%; box-shadow: 0 0 0 90px rgba(160,32,240,.025), 0 0 0 180px rgba(160,32,240,.02); }
.hero::after { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .55; background-image: radial-gradient(circle,rgba(255,255,255,.5) 1px,transparent 1.5px); background-size: 95px 95px; mask-image: linear-gradient(90deg,black,transparent 48%,black); }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 40px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 23px; padding: 8px 13px; border: 1px solid rgba(184,255,66,.2); border-radius: 999px; color: #dfffaa; background: rgba(184,255,66,.07); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { color: var(--yellow); }
h1 { max-width: 700px; margin-bottom: 23px; font-family: var(--display); font-size: clamp(50px,6vw,78px); line-height: .98; letter-spacing: -.055em; }
h1 span, h2 span { color: transparent; background: linear-gradient(105deg,#b861ff 12%,#ef55ff 62%,#ffd1ff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 20px rgba(213,43,255,.16)); }
.hero-lead { max-width: 640px; margin-bottom: 30px; color: #cbbfda; font-size: clamp(16px,1.7vw,19px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.cta-status { display: none; margin: 12px 0 0; color: #d0c1e0; font-size: 12px; }
.cta-status.visible { display: block; }
.hero-note { max-width: 620px; margin: 20px 0 24px; color: #8f819f; font-size: 11px; line-height: 1.6; }
.hero-points { display: flex; flex-wrap: wrap; gap: 22px; color: #a99ab9; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.hero-points span::first-letter { color: var(--yellow); }
.hero-visual { position: relative; min-height: 640px; display: grid; place-items: center; }
.phone-wrap { position: relative; z-index: 3; transform: rotate(3deg); animation: phoneFloat 5.2s ease-in-out infinite; filter: drop-shadow(0 38px 60px rgba(0,0,0,.48)); }
.phone { width: 302px; padding: 10px; border: 2px solid #6f5a84; border-radius: 48px; background: linear-gradient(145deg,#28202d,#08070a); box-shadow: inset 0 0 0 2px #21182a, inset 0 0 8px rgba(255,255,255,.3), 0 0 0 1px #120c18; }
.phone-screen { position: relative; height: 606px; padding: 32px 18px 16px; border-radius: 39px; background: linear-gradient(180deg,#6610d7 0%,#32066d 43%,#180c2c 100%); overflow: hidden; }
.phone-screen::before { content: ''; position: absolute; width: 270px; height: 270px; border-radius: 50%; right: -100px; top: 60px; background: rgba(213,43,255,.28); filter: blur(45px); }
.phone-speaker { position: absolute; z-index: 5; width: 90px; height: 23px; left: 50%; top: 18px; transform: translateX(-50%); border-radius: 20px; background: #050406; }
.mock-top { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-family: var(--display); font-size: 13px; font-weight: 700; }
.mock-top img { border-radius: 9px; }
.mock-top button { margin-left: auto; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: var(--yellow); background: rgba(255,255,255,.09); }
.mock-balance { position: relative; padding: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 19px; background: linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07)); box-shadow: inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(12px); }
.mock-balance small { display: block; margin-bottom: 6px; color: #d7c4ec; font-size: 7px; letter-spacing: .15em; }
.mock-balance strong { display: block; margin-bottom: 12px; font-family: var(--display); font-size: 20px; }
.mock-balance > span { color: #d5c8e3; font-size: 8px; }
.progress { height: 6px; margin-bottom: 8px; border-radius: 9px; background: rgba(0,0,0,.27); overflow: hidden; }
.progress i { display: block; width: 64%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--yellow),var(--lime)); box-shadow: 0 0 10px var(--yellow); }
.mock-heading { position: relative; display: flex; justify-content: space-between; margin: 19px 2px 10px; }
.mock-heading b { font-size: 11px; }.mock-heading small { color: #d8c5ee; font-size: 8px; }
.game-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.game-card { min-height: 110px; padding: 13px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 16px; overflow: hidden; }
.game-card span { margin-bottom: auto; font-size: 24px; }.game-card b { font-size: 10px; }.game-card small { margin-top: 3px; font-size: 7px; opacity: .75; }
.game-card.coral { background: linear-gradient(145deg,#fe5b88,#9a1ebc); }.game-card.lime { color: #16200b; background: linear-gradient(145deg,#e1ff66,#63dc5d); }
.task-card { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.08); }
.task-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #22152c; background: var(--yellow); font-weight: 900; }.task-icon.gift { background: #df83ff; }
.task-card div b, .task-card div small { display: block; }.task-card div b { font-size: 9px; }.task-card div small { margin-top: 2px; color: #bfaed2; font-size: 7px; }.task-card > span { margin-left: auto; }
.mock-nav { position: absolute; display: flex; justify-content: space-around; left: 12px; right: 12px; bottom: 10px; padding: 10px 5px 7px; border-radius: 15px; background: rgba(12,6,24,.82); backdrop-filter: blur(12px); }
.mock-nav span { display: grid; gap: 2px; place-items: center; color: #82738f; font-size: 12px; }.mock-nav span.active { color: #d56bff; }.mock-nav small { font-size: 6px; }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(213,43,255,.22); }
.orbit-one { width: 510px; height: 510px; box-shadow: 0 0 100px rgba(139,24,255,.1); }.orbit-two { width: 400px; height: 400px; border-style: dashed; animation: spin 28s linear infinite; }
.coin { position: absolute; z-index: 4; width: 58px; height: 58px; display: grid; place-items: center; border: 4px solid #ffe88b; border-radius: 50%; color: #6c3e00; background: radial-gradient(circle at 35% 30%,#fff2a6,#ffd33d 47%,#c77a00); box-shadow: 0 16px 30px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,255,255,.35); font-family: var(--display); font-weight: 800; animation: coinFloat 4s ease-in-out infinite; }
.coin-one { left: 6%; top: 13%; transform: rotate(-18deg); }.coin-two { right: 2%; top: 30%; width: 45px; height: 45px; animation-delay: -1.4s; }.coin-three { left: 2%; bottom: 16%; width: 40px; height: 40px; animation-delay: -2.5s; }
.float-chip { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; background: rgba(34,19,52,.78); box-shadow: 0 16px 35px rgba(0,0,0,.35); backdrop-filter: blur(15px); font-size: 10px; }.float-chip span { color: var(--yellow); font-size: 16px; }.chip-one { top: 22%; left: 1%; }.chip-two { right: 0; bottom: 22%; }
.scroll-cue { position: absolute; left: 50%; bottom: 21px; display: flex; align-items: center; gap: 10px; color: #72657f; font-size: 8px; letter-spacing: .18em; transform: translateX(-50%); }.scroll-cue span { width: 1px; height: 30px; background: linear-gradient(var(--magenta),transparent); animation: scrollLine 2s ease-in-out infinite; }
.hero-reveal { animation: riseIn .8s cubic-bezier(.22,1,.36,1) both; }.delay-1 { animation-delay: .12s; }.delay-2 { animation-delay: .24s; }.delay-3 { animation-delay: .36s; }.delay-4 { animation-delay: .48s; }
.trust-ribbon { position: relative; border-block: 1px solid var(--line); background: rgba(255,255,255,.025); }.trust-ribbon-grid { display: grid; grid-template-columns: repeat(3,1fr); }.trust-ribbon-grid > div { min-height: 105px; display: flex; align-items: center; gap: 15px; padding: 22px 28px; border-right: 1px solid var(--line); }.trust-ribbon-grid > div:first-child { border-left: 1px solid var(--line); }.trust-ribbon-grid span { color: var(--magenta); font-family: var(--display); font-size: 10px; letter-spacing: .12em; }.trust-ribbon-grid p { margin: 0; }.trust-ribbon-grid b,.trust-ribbon-grid small { display: block; }.trust-ribbon-grid b { margin-bottom: 4px; font-family: var(--display); font-size: 12px; }.trust-ribbon-grid small { color: #9585a5; font-size: 9px; }

.section { position: relative; padding: 116px 0; }
.section-heading { max-width: 700px; margin-bottom: 52px; }.section-heading.centered { margin-inline: auto; text-align: center; }.section-heading.centered > p:last-child { margin-inline: auto; }
.kicker { margin-bottom: 13px; color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h2 { margin-bottom: 17px; font-family: var(--display); font-size: clamp(37px,5vw,58px); line-height: 1.04; letter-spacing: -.045em; }
.section-heading > p:last-child, .details-sticky > p:last-of-type, .explorer-copy > p, .social-copy > p, .faq-intro > p:last-child, .contact-box > div > p:last-child { max-width: 650px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.showcase { background: linear-gradient(180deg,#10091f,#140925 70%,#10091f); }
.feature-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 17px; }
.glass-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)); box-shadow: 0 20px 50px rgba(0,0,0,.16); backdrop-filter: blur(12px); }
.feature { grid-column: span 2; min-height: 270px; padding: 27px; border-radius: 22px; transition: transform .25s,border-color .25s,box-shadow .25s; }
.feature:nth-child(4) { grid-column: 2 / span 2; }.feature:nth-child(5) { grid-column: 4 / span 2; }
.feature::before { content: ''; position: absolute; width: 150px; height: 150px; right: -80px; top: -90px; border-radius: 50%; background: var(--purple); filter: blur(45px); opacity: .15; }
.feature:hover { transform: translateY(-7px); border-color: rgba(213,43,255,.45); box-shadow: 0 24px 65px rgba(139,24,255,.15); }
.feature.featured { border-color: rgba(184,255,66,.24); background: linear-gradient(145deg,rgba(139,24,255,.19),rgba(255,255,255,.035)); }
.icon-box { width: 49px; height: 49px; display: grid; place-items: center; margin-bottom: 43px; border: 1px solid rgba(213,43,255,.35); border-radius: 14px; color: var(--yellow); background: rgba(139,24,255,.13); box-shadow: 0 0 25px rgba(139,24,255,.1); font-size: 22px; transition: transform .25s; }.feature:hover .icon-box { transform: translateY(-4px) rotate(-4deg); }
.card-number { position: absolute; right: 24px; top: 29px; color: rgba(255,255,255,.22); font-family: var(--display); font-size: 11px; letter-spacing: .15em; }
.feature h3 { margin-bottom: 10px; font-family: var(--display); font-size: 18px; }.feature p { margin: 0; color: #ad9cbe; font-size: 13px; line-height: 1.7; }

.details { overflow: hidden; background: radial-gradient(circle at 15% 55%,rgba(139,24,255,.14),transparent 24%); }
.details-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; align-items: start; }.details-sticky { position: sticky; top: 125px; }.details-sticky h2 { max-width: 470px; }
.about-app { margin-top: 30px; padding: 22px; border: 1px solid rgba(184,255,66,.18); border-radius: 18px; background: linear-gradient(135deg,rgba(184,255,66,.06),rgba(139,24,255,.07)); }.about-app > span { display: block; margin-bottom: 9px; color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .17em; }.about-app h3 { margin-bottom: 9px; font-family: var(--display); font-size: 16px; }.about-app p { margin: 0 0 11px; color: #b8a8c7; font-size: 11px; line-height: 1.7; }.about-app small { color: #867795; font-size: 9px; line-height: 1.55; }
.detail-art { position: relative; height: 220px; margin-top: 38px; display: grid; place-items: center; }.detail-gem { width: 130px; height: 130px; display: grid; place-items: center; position: relative; border: 1px solid rgba(255,255,255,.25); border-radius: 36px; color: #fff; background: linear-gradient(145deg,var(--magenta),var(--deep-purple)); box-shadow: 0 25px 50px rgba(75,0,160,.4),inset 0 1px rgba(255,255,255,.35); font-family: var(--display); font-size: 57px; font-weight: 800; transform: rotate(-8deg); }.detail-gem span { position: absolute; right: 8px; top: 5px; color: var(--yellow); font-size: 17px; }.detail-art i { position: absolute; width: 190px; height: 190px; border: 1px solid rgba(213,43,255,.17); border-radius: 50%; }.detail-art i:nth-of-type(2) { width: 250px; height: 250px; }.detail-art i:nth-of-type(3) { width: 310px; height: 310px; }
.details-list { border-top: 1px solid var(--line); }.detail-row { display: grid; grid-template-columns: 52px 1fr; gap: 23px; padding: 30px 5px; border-bottom: 1px solid var(--line); }.detail-row > span { padding-top: 3px; color: var(--magenta); font-family: var(--display); font-size: 11px; letter-spacing: .12em; }.detail-row h3 { margin-bottom: 8px; font-family: var(--display); font-size: 18px; }.detail-row p { margin: 0; color: #a99ab9; font-size: 13px; line-height: 1.72; }

.process { background: linear-gradient(180deg,rgba(91,0,212,.08),transparent 28%,rgba(91,0,212,.06)); }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin: 0 0 42px; padding: 0; list-style: none; }.timeline::before { content: ''; position: absolute; left: 10%; right: 10%; top: 23px; height: 2px; background: linear-gradient(90deg,var(--purple),var(--magenta),var(--yellow)); box-shadow: 0 0 15px rgba(213,43,255,.6); }.timeline li { position: relative; }.step-dot { position: relative; z-index: 2; width: 47px; height: 47px; display: grid; place-items: center; margin: 0 auto 26px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: linear-gradient(145deg,var(--purple),var(--deep-purple)); box-shadow: 0 0 25px rgba(139,24,255,.38); font-family: var(--display); font-size: 11px; font-weight: 700; }.timeline article { min-height: 255px; padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.035); transition: transform .25s,border-color .25s; }.timeline article:hover { transform: translateY(-5px); border-color: rgba(213,43,255,.35); }.step-icon { color: var(--yellow); font-size: 26px; margin-bottom: 24px; }.timeline h3 { margin-bottom: 10px; font-family: var(--display); font-size: 18px; }.timeline p { margin: 0; color: #a99ab9; font-size: 12px; line-height: 1.7; }.center-action { text-align: center; }

.benefits { padding-top: 80px; }.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }.benefit { display: flex; align-items: center; gap: 17px; min-height: 116px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); transition: transform .2s,border-color .2s,background .2s; }.benefit:hover { transform: translateY(-4px); border-color: rgba(184,255,66,.26); background: rgba(139,24,255,.08); }.benefit > span { flex: 0 0 47px; height: 47px; display: grid; place-items: center; border-radius: 14px; color: var(--lime); background: rgba(184,255,66,.08); font-size: 20px; }.benefit h3 { margin: 0 0 5px; font-family: var(--display); font-size: 15px; }.benefit p { margin: 0; color: #9d8ead; font-size: 11px; }
.discovery { padding-top: 30px; }.discovery-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 75px; align-items: center; }.discovery-copy > p:not(.kicker) { max-width: 520px; margin-bottom: 28px; color: var(--muted); font-size: 14px; line-height: 1.75; }.discovery-copy h2 { font-size: clamp(36px,4.7vw,56px); }.discovery-cards { display: grid; gap: 12px; }.discovery-card { position: relative; min-height: 135px; display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 20px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(100deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); overflow: hidden; transition: transform .25s,border-color .25s; }.discovery-card:hover { transform: translateX(7px); border-color: rgba(213,43,255,.42); }.discovery-mark { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 19px; color: #261031; background: linear-gradient(145deg,var(--yellow),#ffaf35); box-shadow: 0 12px 25px rgba(255,190,52,.15); font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: .07em; }.discovery-card:nth-child(2) .discovery-mark { color: #fff; background: linear-gradient(145deg,var(--magenta),var(--purple)); }.discovery-card:nth-child(3) .discovery-mark { background: linear-gradient(145deg,var(--lime),#66d94c); }.discovery-card h3 { margin: 0 0 6px; font-family: var(--display); font-size: 17px; }.discovery-card p { margin: 0; color: #9f90ae; font-size: 11px; line-height: 1.6; }.discovery-card i { color: rgba(255,255,255,.17); font-family: var(--display); font-size: 12px; font-style: normal; letter-spacing: .15em; }

.reward-explorer { padding-top: 70px; }.explorer-shell { min-height: 510px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; padding: clamp(38px,6vw,75px); border: 1px solid rgba(213,43,255,.22); border-radius: 35px; background: linear-gradient(135deg,rgba(91,0,212,.2),rgba(255,255,255,.04)); box-shadow: inset 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.22); overflow: hidden; }.explorer-copy h2 { font-size: clamp(35px,4.2vw,52px); }.category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 29px; }.category-tabs button { padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; color: #c9bad9; background: rgba(255,255,255,.04); font-size: 11px; font-weight: 800; cursor: pointer; }.category-tabs button[aria-selected=true] { color: #21152b; border-color: var(--yellow); background: var(--yellow); box-shadow: 0 0 20px rgba(255,216,77,.2); }.reward-stage { position: relative; min-height: 350px; display: grid; place-items: center; }.reward-halo { position: absolute; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle,rgba(213,43,255,.34),rgba(139,24,255,.06) 55%,transparent 70%); animation: glow 4s ease-in-out infinite; }.reward-card { position: relative; width: min(320px,100%); min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; border: 1px solid rgba(255,255,255,.22); border-radius: 28px; text-align: center; background: linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.05)); box-shadow: 0 30px 60px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.18); backdrop-filter: blur(20px); transition: opacity .18s,transform .18s; }.reward-card.switching { opacity: 0; transform: scale(.96) rotate(2deg); }.reward-label { margin-bottom: 21px; color: #cbb7dd; font-size: 7px; letter-spacing: .17em; }.reward-icon { width: 78px; height: 78px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 24px; color: #372100; background: linear-gradient(145deg,var(--yellow),#ffab2e); box-shadow: 0 13px 30px rgba(255,190,50,.22); font-size: 34px; }.reward-card h3 { margin-bottom: 9px; font-family: var(--display); font-size: 21px; }.reward-card p { color: #c3b4d2; font-size: 12px; line-height: 1.6; }.reward-card small { color: #81718f; font-size: 8px; }

.social-shell { position: relative; min-height: 520px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 40px; padding: clamp(40px,7vw,86px); border-radius: 35px; background: radial-gradient(circle at 78% 45%,rgba(213,43,255,.4),transparent 28%),linear-gradient(120deg,#6410cd,#250448 75%); overflow: hidden; }.social-shell::before { content: ''; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg,transparent,black); }.social-copy { position: relative; z-index: 2; }.social-copy h2 { max-width: 560px; }.social-copy > p { margin-bottom: 27px; color: #decfea; }.share-row { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #cdb7df; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }.share-row a,.share-row button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; color: #fff; background: rgba(255,255,255,.09); text-decoration: none; cursor: pointer; transition: transform .2s,background .2s,border-color .2s,box-shadow .2s; }.share-row svg { width: 19px; height: 19px; fill: currentColor; }.share-row .share-whatsapp svg path:first-child,.share-row .share-native svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.share-row .share-whatsapp svg path:last-child { fill: currentColor; stroke: none; }.share-row a:hover,.share-row button:hover { transform: translateY(-3px); }.share-row .share-facebook:hover { border-color: #7eb4ff; background: #1877f2; box-shadow: 0 8px 22px rgba(24,119,242,.35); }.share-row .share-whatsapp:hover { border-color: #75f3a3; background: #25d366; box-shadow: 0 8px 22px rgba(37,211,102,.32); }.share-row .share-native:hover { border-color: var(--terminal-green); background: rgba(128,255,189,.18); box-shadow: 0 8px 22px rgba(128,255,189,.18); }.social-art { position: relative; min-height: 390px; }.mini-phone { position: absolute; z-index: 2; left: 50%; top: 50%; width: 225px; height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 25px; border: 7px solid #160a22; border-radius: 38px; background: linear-gradient(160deg,#ab2eff,#4b00a6 68%,#21053c); box-shadow: 0 35px 70px rgba(0,0,0,.45); transform: translate(-50%,-50%) rotate(6deg); }.mini-phone img { border-radius: 22px; box-shadow: 0 16px 35px rgba(0,0,0,.28); }.mini-phone strong { font-family: var(--display); font-size: 24px; line-height: .98; letter-spacing: -.04em; }.mini-phone strong span { color: var(--yellow); }.social-card { position: absolute; z-index: 3; padding: 12px 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: rgba(18,8,34,.74); box-shadow: 0 16px 35px rgba(0,0,0,.3); backdrop-filter: blur(12px); font-size: 10px; font-weight: 800; }.sc-one { left: 0; top: 16%; }.sc-two { right: -3%; top: 42%; }.sc-three { left: 6%; bottom: 12%; }

.faq { background: linear-gradient(180deg,transparent,rgba(91,0,212,.08),transparent); }.faq-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 85px; align-items: start; }.faq-intro { position: sticky; top: 125px; }.faq-intro h2 { max-width: 390px; }.accordion { border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); transition: border-color .2s; }.faq-item.open { border-color: rgba(213,43,255,.55); }.faq-item h3 { margin: 0; }.faq-item button { width: 100%; min-height: 79px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 5px; border: 0; color: #fff; background: transparent; text-align: left; font-family: var(--display); font-size: 15px; font-weight: 600; cursor: pointer; }.faq-item button i { flex: 0 0 31px; height: 31px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--magenta); font-family: var(--body); font-style: normal; transition: transform .25s,background .25s; }.faq-item.open button i { color: #fff; background: var(--purple); transform: rotate(45deg); }.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }.faq-panel > p { overflow: hidden; margin: 0; padding-right: 50px; color: #aa9abb; font-size: 13px; line-height: 1.75; transition: padding .3s; }.faq-panel a { color: #d986ff; font-weight: 700; text-underline-offset: 3px; }.faq-item.open .faq-panel { grid-template-rows: 1fr; }.faq-item.open .faq-panel > p { padding-bottom: 25px; }

.legal { padding-top: 70px; }.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.legal-card { padding: clamp(29px,4vw,45px); border: 1px solid var(--line); border-radius: 25px; background: rgba(255,255,255,.035); }.legal-card.wide { grid-column: 1 / -1; }.legal-tag { display: inline-block; margin-bottom: 24px; padding: 7px 10px; border-radius: 7px; color: var(--lime); background: rgba(184,255,66,.07); font-size: 8px; font-weight: 800; letter-spacing: .15em; }.legal-card h2 { font-size: clamp(28px,3.4vw,39px); }.legal-card h3 { margin: 0 0 13px; font-family: var(--display); font-size: 17px; }.legal-card p,.legal-card li { color: #aa9abb; font-size: 12px; line-height: 1.75; }.legal-card ul { margin: 18px 0 0; padding-left: 19px; }.legal-card li { margin: 8px 0; }.legal-card li::marker { color: var(--magenta); }.terms-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 34px; }.terms-columns > div { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,.09); }.terms-columns ul { margin-top: 0; }.legal-source-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 30px; padding-top: 23px; border-top: 1px solid var(--line); }.legal-source-links span { color: #887897; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.legal-source-links a,.privacy-source a { color: #d987ff; font-size: 11px; font-weight: 700; text-underline-offset: 3px; }.privacy-list { columns: 2; column-gap: 50px; }.privacy-list li { break-inside: avoid; }.privacy-source { margin-top: 25px!important; padding: 17px; border-left: 2px solid var(--purple); background: rgba(139,24,255,.06); }.legal-updated { margin: 22px 0 0!important; color: #796b85!important; font-size: 9px!important; text-transform: uppercase; letter-spacing: .1em; }
.contact { padding-top: 20px; }.contact-box { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding: clamp(34px,5vw,58px); border: 1px solid rgba(213,43,255,.2); border-radius: 28px; background: linear-gradient(125deg,rgba(139,24,255,.13),rgba(255,255,255,.035)); }.contact-box h2 { font-size: clamp(34px,4vw,48px); }.contact-state { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,.14); }.contact-state > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; color: var(--yellow); background: rgba(255,216,77,.08); }.contact-state b { font-family: var(--display); font-size: 14px; }.contact-state p { margin: 6px 0 0; color: #9989a9; font-size: 11px; line-height: 1.6; }

.footer { position: relative; padding: 75px 0 28px; border-top: 1px solid rgba(213,43,255,.15); background: #090510; overflow: hidden; }.footer::before { content: ''; position: absolute; width: 600px; height: 260px; left: 50%; top: -220px; border-radius: 50%; background: var(--purple); filter: blur(90px); opacity: .25; transform: translateX(-50%); }.footer-top { position: relative; display: flex; justify-content: space-between; gap: 50px; padding-bottom: 50px; }.footer-brand { max-width: 450px; }.footer-brand img { width: 220px; }.footer-brand p { margin: 18px 0 0; color: #8f809e; font-size: 12px; line-height: 1.7; }.footer-links { display: flex; gap: 70px; }.footer-links div { display: flex; flex-direction: column; gap: 11px; }.footer-links b { margin-bottom: 5px; color: #fff; font-family: var(--display); font-size: 12px; }.footer-links a { color: #8f809e; font-size: 11px; text-decoration: none; }.footer-links a:hover { color: var(--magenta); }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07); color: #675b72; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }.footer-bottom p { margin: 0; }
.mobile-cta { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(9,5,16,.88); border-top: 1px solid rgba(213,43,255,.22); backdrop-filter: blur(18px); transform: translateY(110%); opacity: 0; transition: transform .3s,opacity .3s; }.mobile-cta.visible { transform: translateY(0); opacity: 1; }.mobile-cta .button { width: 100%; min-height: 50px; }
.noscript { position: fixed; z-index: 100; left: 15px; right: 15px; bottom: 15px; padding: 15px; border-radius: 10px; color: #21152b; background: var(--yellow); font-size: 13px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); }.reveal.in-view { opacity: 1; transform: none; }.stagger > .reveal:nth-child(2) { transition-delay: .08s; }.stagger > .reveal:nth-child(3) { transition-delay: .16s; }.stagger > .reveal:nth-child(4) { transition-delay: .24s; }.stagger > .reveal:nth-child(5) { transition-delay: .32s; }.stagger > .reveal:nth-child(6) { transition-delay: .4s; }

@keyframes logoIn { from { opacity: 0; transform: scale(.88); filter: drop-shadow(0 0 18px var(--purple)); } to { opacity: 1; transform: scale(1); filter: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes phoneFloat { 0%,100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-13px); } }
@keyframes coinFloat { 0%,100% { translate: 0 0; rotate: -8deg; } 50% { translate: 0 -12px; rotate: 7deg; } }
@keyframes sparkle { 0%,100% { opacity: 0; transform: scale(.4) rotate(0); } 40%,60% { opacity: 1; transform: scale(1.2) rotate(35deg); } }
@keyframes orb { to { transform: translate(12vw,8vh) scale(1.15); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow { 50% { opacity: .65; transform: scale(1.1); } }
@keyframes scrollLine { 0%,100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }
@keyframes particleDrift { to { transform: translate3d(140px,-100px,0) rotate(4deg); } }
@keyframes shapeFloat { 0%,100% { transform: translate3d(0,0,0) rotate(0deg) scale(.85); opacity: .12; } 50% { transform: translate3d(18px,-30px,0) rotate(45deg) scale(1.15); opacity: .35; } }

html[data-theme="light"] { color-scheme: light; --midnight: #f8f3ff; --surface: #fff; --surface-2: #f2e8ff; --white: #1e102d; --muted: #685777; --line: rgba(75,31,112,.14); background: #f8f3ff; }
html[data-theme="light"] body { color: #1e102d; background: #f8f3ff; }
html[data-theme="light"] body::before { opacity: .025; }
html[data-theme="light"] .ambient span { opacity: .09; }html[data-theme="light"] .ambient::after { opacity: .22; }
html[data-theme="light"] .site-header.scrolled,html[data-theme="light"] .site-header.menu-open { background: rgba(253,250,255,.86); box-shadow: 0 15px 45px rgba(57,20,87,.09); }
html[data-theme="light"] .brand-full { content: url('branding/playful-rewards-logo-dark.svg'); }
html[data-theme="light"] .main-nav a { color: #604d70; }html[data-theme="light"] .main-nav a:hover,html[data-theme="light"] .main-nav a.active { color: #5b00d4; }
html[data-theme="light"] .preference-button,html[data-theme="light"] .menu-toggle { color: #311744; background: rgba(91,0,212,.055); }html[data-theme="light"] .menu-toggle span { background: #311744; }
html[data-theme="light"] .hero { background: radial-gradient(circle at 68% 48%,rgba(139,24,255,.17),transparent 35%),radial-gradient(circle at 12% 42%,rgba(213,43,255,.08),transparent 28%),linear-gradient(145deg,#fff 0%,#f6ecff 52%,#fbf8ff 100%); }
html[data-theme="light"] .eyebrow { color: #486900; background: rgba(111,160,0,.08); border-color: rgba(82,122,0,.2); }html[data-theme="light"] .hero-lead { color: #645371; }html[data-theme="light"] .hero-note,html[data-theme="light"] .hero-points { color: #756483; }
html[data-theme="light"] .button-ghost { color: #421c5d; background: rgba(255,255,255,.7); }
html[data-theme="light"] .trust-ribbon { background: rgba(91,0,212,.025); }html[data-theme="light"] .trust-ribbon-grid small { color: #766584; }
html[data-theme="light"] .showcase { background: linear-gradient(180deg,#f8f3ff,#f0e3ff 70%,#f8f3ff); }html[data-theme="light"] .glass-card,html[data-theme="light"] .feature.featured { background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(244,234,255,.75)); box-shadow: 0 20px 50px rgba(73,30,110,.08); }
html[data-theme="light"] .feature p,html[data-theme="light"] .detail-row p,html[data-theme="light"] .timeline p,html[data-theme="light"] .benefit p,html[data-theme="light"] .discovery-card p,html[data-theme="light"] .faq-panel>p,html[data-theme="light"] .legal-card p,html[data-theme="light"] .legal-card li { color: #6e5d7c; }
html[data-theme="light"] .about-app p { color: #685777; }html[data-theme="light"] .about-app small { color: #766584; }html[data-theme="light"] .terms-columns>div { background: rgba(139,24,255,.025); }
html[data-theme="light"] .kicker { color: #557d00; }html[data-theme="light"] .details { background: radial-gradient(circle at 15% 55%,rgba(139,24,255,.1),transparent 24%); }
html[data-theme="light"] .timeline article,html[data-theme="light"] .benefit,html[data-theme="light"] .legal-card,html[data-theme="light"] .contact-box,html[data-theme="light"] .discovery-card { background: rgba(255,255,255,.75); box-shadow: 0 15px 40px rgba(68,28,102,.055); }
html[data-theme="light"] .process { background: linear-gradient(180deg,rgba(139,24,255,.05),transparent 28%,rgba(139,24,255,.04)); }html[data-theme="light"] .reward-explorer .explorer-shell { background: linear-gradient(135deg,rgba(139,24,255,.09),rgba(255,255,255,.9)); }
html[data-theme="light"] .reward-card { background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(243,229,255,.9)); box-shadow: 0 25px 55px rgba(68,28,102,.14); }html[data-theme="light"] .reward-card p { color: #695778; }html[data-theme="light"] .faq-item button { color: #241134; }html[data-theme="light"] .contact-state { background: rgba(91,0,212,.04); }html[data-theme="light"] .footer { color: #fff; }html[data-theme="light"] .footer .footer-brand img { content: url('branding/playful-rewards-logo-white.svg'); }
html[data-theme="light"] .mobile-cta { background: rgba(253,250,255,.9); }

@media (max-width: 1050px) {
  .nav-shell { gap: 20px; }.main-nav { gap: 18px; }.main-nav a { font-size: 12px; }.header-cta { display: none; }
  .hero-grid { grid-template-columns: 1fr 1fr; }.phone { width: 276px; }.phone-screen { height: 555px; }.hero-visual { min-height: 590px; }
  .details-layout { gap: 55px; }.faq-layout { gap: 55px; }.timeline article { padding: 20px; }.social-shell { padding-inline: 55px; }.discovery-grid { gap: 45px; }.terms-columns { grid-template-columns: 1fr; gap: 14px; }.privacy-list { columns: 1; }
}
@media (max-width: 820px) {
  html { scroll-padding-top: 76px; }.container { width: min(100% - 32px,var(--container)); }.nav-shell { min-height: 72px; }.brand-full { width: 185px; }.header-tools { order: 2; margin-left: auto; }.menu-toggle { display: block; order: 3; margin-left: 0; }.main-nav { position: absolute; inset: 72px 16px auto; display: grid; gap: 0; padding: 12px; border: 1px solid var(--line); border-radius: 17px; background: rgba(17,8,30,.97); box-shadow: var(--shadow); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: .25s; }.main-nav.open { transform: none; opacity: 1; visibility: visible; }.main-nav a { padding: 13px 14px; border-radius: 9px; }.main-nav a::after { display: none; }.main-nav a:hover,.main-nav a.active { background: rgba(139,24,255,.12); }
  .hero { min-height: auto; padding: 120px 0 75px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { text-align: center; }.hero-lead,.hero-note { margin-inline: auto; }.eyebrow { margin-inline: auto; }.hero-actions,.hero-points { justify-content: center; }.hero-visual { margin-top: 25px; }.scroll-cue { display: none; }.trust-ribbon-grid { grid-template-columns: 1fr; }.trust-ribbon-grid > div,.trust-ribbon-grid > div:first-child { min-height: 82px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .feature-grid { grid-template-columns: repeat(2,1fr); }.feature,.feature:nth-child(4),.feature:nth-child(5) { grid-column: auto; }.feature:last-child { grid-column: 1 / -1; }
  .details-layout,.faq-layout { grid-template-columns: 1fr; }.details-sticky,.faq-intro { position: static; }.detail-art { display: none; }.timeline { grid-template-columns: repeat(2,1fr); row-gap: 28px; }.timeline::before { display: none; }.benefit-grid { grid-template-columns: repeat(2,1fr); }.discovery-grid { grid-template-columns: 1fr; }.explorer-shell,.social-shell { grid-template-columns: 1fr; }.social-copy { text-align: center; }.social-copy > p { margin-inline: auto; }.share-row { justify-content: center; }.social-art { min-height: 420px; }.legal-grid,.contact-box { grid-template-columns: 1fr; }.mobile-cta { display: block; } body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }html[data-theme="light"] .main-nav { background: rgba(253,250,255,.98); }
}
@media (max-width: 560px) {
  .container { width: min(100% - 24px,var(--container)); }.brand-full { display: none; }.brand-compact { display: block; }.nav-shell { gap: 10px; }.header-tools { margin-left: auto; }.menu-toggle { margin-left: 0; }.preference-button { height: 38px; min-width: 38px; }.language-toggle { min-width: 63px; padding-inline: 7px; }.section { padding: 84px 0; }.hero { padding-top: 103px; }.hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }.hero-points { gap: 11px 17px; }
  h1 { font-size: clamp(42px,13vw,60px); }.hero-lead { font-size: 15px; }.hero-visual { min-height: 540px; margin-inline: -8px; }.phone { width: 258px; }.phone-screen { height: 518px; padding-inline: 15px; }.coin-one { left: -1%; }.coin-two { right: -1%; }.chip-one { left: 0; top: 18%; }.chip-two { right: 0; bottom: 13%; }.orbit-one { width: 390px;height:390px }.orbit-two { width:320px;height:320px }
  .section-heading { margin-bottom: 38px; }.feature-grid,.benefit-grid { grid-template-columns: 1fr; }.feature,.feature:last-child { grid-column: auto; min-height: 245px; }.timeline { grid-template-columns: 1fr; margin-left: 22px; }.timeline::before { display: block; left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }.timeline li { display: grid; grid-template-columns: 47px 1fr; align-items: start; gap: 17px; }.step-dot { margin: 0; }.timeline article { min-height: 0; }.details-layout,.faq-layout { gap: 42px; }.detail-row { grid-template-columns: 40px 1fr; gap: 10px; }.discovery-card { grid-template-columns: 63px 1fr; gap: 14px; padding: 17px; }.discovery-mark { width: 58px; height: 58px; }.discovery-card i { display: none; }.explorer-shell { padding: 32px 18px; border-radius: 24px; gap: 30px; }.category-tabs { gap: 6px; }.category-tabs button { padding-inline: 12px; }.reward-stage { min-height: 330px; }.reward-card { min-height: 310px; }.social-shell { padding: 45px 22px; border-radius: 24px; }.social-art { min-height: 390px; }.mini-phone { width: 205px; height: 360px; }.sc-one { left: -5%; }.sc-two { right: -6%; }.sc-three { left: -2%; }.legal-grid { gap: 14px; }.legal-card { border-radius: 20px; }.contact-box { gap: 30px; border-radius: 22px; }.footer-top,.footer-bottom { flex-direction: column; }.footer-links { gap: 45px; }.footer-bottom { line-height: 1.6; }.faq-panel > p { padding-right: 15px; }
}
@media (max-width: 370px) {
  .phone { width: 235px; }.phone-screen { height: 475px; }.game-card { min-height: 95px; }.task-card { padding: 8px; }.mock-nav { display: none; }.hero-visual { min-height: 500px; }.coin { scale: .8; }.float-chip { font-size: 8px; }.social-card { font-size: 8px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; scroll-behavior: auto!important; }.reveal { opacity: 1; transform: none; }
}

/* Console interface */
:root {
  --terminal-green: #80ffbd;
  --terminal-cyan: #69e9ff;
  --terminal-panel: rgba(7, 9, 18, .78);
  --display: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --body: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --line: rgba(128, 255, 189, .18);
}

body { background: #050711; }
body::before {
  z-index: 60;
  opacity: .08;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(128,255,189,.18) 4px);
  mix-blend-mode: screen;
}
.ambient::after {
  opacity: .38;
  background-image: linear-gradient(rgba(105,233,255,.055) 1px, transparent 1px), linear-gradient(90deg,rgba(105,233,255,.055) 1px,transparent 1px);
  background-size: 42px 42px;
}
.site-header.scrolled,.site-header.menu-open { border-color: rgba(128,255,189,.28); background: rgba(4,7,14,.88); }
.main-nav a { text-transform: lowercase; letter-spacing: -.03em; }
.main-nav a::before { content: './'; color: var(--terminal-green); opacity: .65; }
.main-nav a::after { background: var(--terminal-green); box-shadow: 0 0 12px var(--terminal-green); }
.preference-button,.menu-toggle { border-radius: 4px; }

.hero {
  background: radial-gradient(circle at 74% 42%,rgba(79,34,180,.28),transparent 32%), linear-gradient(135deg,#04060d 0%,#090817 52%,#070511 100%);
}
.hero::before { border-color: rgba(128,255,189,.13); box-shadow: 0 0 0 90px rgba(128,255,189,.018),0 0 0 180px rgba(128,255,189,.012); }
.hero-copy { padding: 28px; border: 1px solid rgba(128,255,189,.25); border-radius: 5px; background: linear-gradient(145deg,rgba(5,10,17,.88),rgba(9,8,24,.72)); box-shadow: 0 0 0 1px rgba(105,233,255,.04),0 28px 80px rgba(0,0,0,.38),inset 0 0 45px rgba(128,255,189,.025); backdrop-filter: blur(8px); }
.hero-copy::before { content: '●  ●  ●   PLAYFUL_REWARDS://INIZIO'; display: block; margin: -28px -28px 25px; padding: 10px 14px; border-bottom: 1px solid rgba(128,255,189,.2); color: #ff6a95; background: rgba(128,255,189,.045); font-size: 9px; letter-spacing: .12em; }
html[lang="en"] .hero-copy::before { content: '●  ●  ●   PLAYFUL_REWARDS://HOME'; }
.hero-copy::after { content: ''; position: absolute; left: 0; top: 36px; bottom: 0; width: 2px; background: linear-gradient(transparent,var(--terminal-green),transparent); opacity: .75; animation: terminalSweep 4.5s ease-in-out infinite; }
.eyebrow { border-radius: 3px; color: var(--terminal-green); border-color: rgba(128,255,189,.3); background: rgba(128,255,189,.06); }
.terminal-status { min-height: 22px; margin: -8px 0 12px; color: var(--terminal-cyan); font-size: clamp(9px,1.1vw,12px); letter-spacing: -.02em; }
.terminal-prompt { color: var(--terminal-green); }
.terminal-status i { display: inline-block; width: 8px; height: 1.1em; margin-left: 3px; vertical-align: -.18em; background: var(--terminal-green); box-shadow: 0 0 10px var(--terminal-green); animation: cursorBlink .75s steps(1,end) infinite; }
h1 { font-size: clamp(43px,5.1vw,68px); letter-spacing: -.075em; }
h1::before { content: '> '; color: var(--terminal-green); text-shadow: 0 0 18px rgba(128,255,189,.7); }
h1 span,h2 span { background: linear-gradient(100deg,var(--terminal-green),var(--terminal-cyan) 70%,#d8fbff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 16px rgba(105,233,255,.14)); }
.hero-lead::before { content: '// '; color: var(--terminal-green); }
.kicker::before { content: '[ '; }.kicker::after { content: ' ]'; }.kicker { color: var(--terminal-green); }

.button { border-radius: 3px; border-color: rgba(128,255,189,.4); background: linear-gradient(110deg,#1a6f5c,#137a80 55%,#43208c); box-shadow: 0 0 24px rgba(128,255,189,.12),inset 0 1px rgba(255,255,255,.16); }
.button::before { content: '>'; color: var(--terminal-green); }
.button-ghost { background: rgba(6,13,18,.72); box-shadow: inset 0 0 0 1px rgba(128,255,189,.22); }
.glass-card,.feature,.timeline article,.benefit,.discovery-card,.explorer-shell,.reward-card,.legal-card,.contact-box,.about-app,.contact-state { border-radius: 5px; border-color: rgba(128,255,189,.2); background: linear-gradient(145deg,rgba(7,12,18,.88),rgba(15,10,28,.7)); }
.feature::after,.timeline article::after,.benefit::after,.discovery-card::after,.legal-card::after { content: '_'; position: absolute; right: 10px; bottom: 7px; color: var(--terminal-green); opacity: .35; animation: cursorBlink 1s steps(1,end) infinite; }
.timeline article,.benefit,.legal-card { position: relative; }
.feature:hover,.timeline article:hover,.benefit:hover,.discovery-card:hover { border-color: rgba(128,255,189,.55); box-shadow: 0 0 28px rgba(128,255,189,.08); }
.card-number,.detail-row>span { color: var(--terminal-green); }
.card-number::before,.detail-row>span::before { content: '0x'; opacity: .55; }
.feature h3::before,.detail-row h3::before,.timeline h3::before,.benefit h3::before,.discovery-card h3::before { content: '> '; color: var(--terminal-green); }
.trust-ribbon,.details-list,.accordion { border-color: rgba(128,255,189,.2); }
.trust-ribbon-grid>div { border-color: rgba(128,255,189,.16); }
.process,.faq,.showcase { background: linear-gradient(180deg,rgba(8,12,20,.9),rgba(14,9,27,.95),rgba(5,7,17,.92)); }
.category-tabs button,.faq-item button i { border-radius: 3px; }
.category-tabs button[aria-selected=true] { color: #04100c; border-color: var(--terminal-green); background: var(--terminal-green); box-shadow: 0 0 20px rgba(128,255,189,.25); }
.footer { border-color: rgba(128,255,189,.2); background: #03050a; }

/* Clearly visible, branching background lightning */
.lightning-field { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.storm-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 75% 27%,rgba(225,250,255,.62),rgba(91,89,255,.16) 24%,transparent 58%); mix-blend-mode: screen; animation: skyFlash 6.5s linear infinite; }
.lightning { position: absolute; overflow: visible; opacity: 0; filter: drop-shadow(0 0 10px #c9f7ff) drop-shadow(0 0 28px #765cff); animation: lightningStrike 6.5s linear infinite; }
.lightning-main { width: 330px; height: 760px; right: 2%; top: -5%; }
.lightning-secondary { width: 220px; height: 540px; left: 43%; top: 8%; animation-delay: 3.1s; transform: scaleX(-1) rotate(8deg); }
.lightning path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lightning-glow { stroke: rgba(104,120,255,.65); stroke-width: 15; filter: blur(8px); }
.lightning-core { stroke: #f4fdff; stroke-width: 3.5; }
.lightning-branch { stroke: #a9edff; stroke-width: 2; }

html[data-theme="light"] body { background: #eefaff; }
html[data-theme="light"] .hero { background: radial-gradient(circle at 75% 35%,rgba(104,120,255,.22),transparent 34%),linear-gradient(135deg,#f8ffff,#eaf6fb 58%,#f4efff); }
html[data-theme="light"] .hero-copy { background: rgba(247,254,255,.87); border-color: rgba(0,105,96,.28); }
html[data-theme="light"] .hero-copy::before { background: rgba(0,105,96,.05); border-color: rgba(0,105,96,.18); }
html[data-theme="light"] .terminal-prompt,html[data-theme="light"] .kicker { color: #006c5d; }
html[data-theme="light"] .terminal-status { color: #00687a; }
html[data-theme="light"] .glass-card,html[data-theme="light"] .feature.featured,html[data-theme="light"] .timeline article,html[data-theme="light"] .benefit,html[data-theme="light"] .legal-card,html[data-theme="light"] .contact-box,html[data-theme="light"] .discovery-card { background: rgba(248,254,255,.85); }
html[data-theme="light"] .hero-visual,html[data-theme="light"] .phone-screen { color: #fff; }
html[data-theme="light"] .float-chip { color: #fff; border-color: rgba(128,255,189,.42); background: rgba(24,13,43,.93); box-shadow: 0 16px 35px rgba(35,15,56,.32),0 0 22px rgba(128,255,189,.14); }
html[data-theme="light"] .float-chip b { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
html[data-theme="light"] .button[aria-disabled="true"] { color: #fff; opacity: .84; filter: saturate(.72); }
html[data-theme="light"] .faq {
  background: linear-gradient(180deg,#eefaff 0%,#f8f3ff 48%,#eefaff 100%);
}
html[data-theme="light"] .faq-intro h2,html[data-theme="light"] .faq-item button { color: #21102f; }
html[data-theme="light"] .faq-intro>p:last-child { color: #625170; }
html[data-theme="light"] .accordion { border-color: rgba(58,35,80,.2); }
html[data-theme="light"] .faq-item {
  margin-bottom: 8px;
  padding-inline: 18px;
  border: 1px solid rgba(58,35,80,.14);
  border-radius: 5px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(52,30,72,.055);
}
html[data-theme="light"] .faq-item.open { border-color: rgba(0,108,93,.45); background: rgba(255,255,255,.94); }
html[data-theme="light"] .faq-item button i { color: #5b00d4; border-color: rgba(91,0,212,.24); background: rgba(91,0,212,.06); }
html[data-theme="light"] .faq-item.open button i { color: #fff; background: #5b00d4; }
html[data-theme="light"] .faq-panel>p { color: #604e6e; }
html[data-theme="light"] {
  --terminal-green: #007864;
  --terminal-cyan: #006f91;
}
html[data-theme="light"] h1 span,html[data-theme="light"] h2 span {
  background: linear-gradient(100deg,#007864,#006f91 68%,#4e2b88);
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}
html[data-theme="light"] h1::before { color: #007864; text-shadow: 0 0 14px rgba(0,120,100,.18); }
html[data-theme="light"] .about-app {
  border-color: rgba(0,120,100,.3);
  background: linear-gradient(145deg,rgba(255,255,255,.97),rgba(229,248,247,.92));
  box-shadow: 0 16px 42px rgba(39,60,82,.1),inset 0 1px rgba(255,255,255,.9);
}
html[data-theme="light"] .about-app>span { color: #477000; }
html[data-theme="light"] .about-app h3 { color: #251233; }
html[data-theme="light"] .about-app p { color: #584763; }
html[data-theme="light"] .about-app small { color: #695873; }
html[data-theme="light"] .detail-row>span { color: #007864; }

@keyframes cursorBlink { 0%,48% { opacity: 1; } 49%,100% { opacity: 0; } }
@keyframes terminalSweep { 0%,100% { transform: translateY(-10%); opacity: .15; } 50% { transform: translateY(80%); opacity: .8; } }
@keyframes lightningStrike {
  0%,9%,12%,14%,100% { opacity: 0; }
  9.2% { opacity: 1; }
  9.8% { opacity: .18; }
  10.2% { opacity: 1; }
  11% { opacity: .3; }
  12.2% { opacity: .95; }
  13.3% { opacity: 0; }
}
@keyframes skyFlash {
  0%,9%,14%,100% { opacity: 0; }
  9.3% { opacity: .72; }
  9.8% { opacity: .08; }
  10.3% { opacity: .5; }
  12.3% { opacity: .34; }
  13.5% { opacity: 0; }
}

@media (max-width:820px) {
  .hero-copy { padding: 22px; }
  .hero-copy::before { margin: -22px -22px 23px; }
  .terminal-status { text-align: left; }
  .lightning-main { right: -15%; opacity: 0; }
  .lightning-secondary { left: -6%; top: 42%; }
}
@media (max-width:560px) {
  .hero-copy { padding: 17px; }
  .hero-copy::before { margin: -17px -17px 20px; font-size: 7px; }
  h1 { font-size: clamp(36px,11vw,51px); }
  .lightning-main { width: 230px; right: -28%; }
}
@media (prefers-reduced-motion:reduce) {
  .lightning,.storm-flash { display: none; }
  .hero-copy::after { animation: none; opacity: .45; }
}

/* Floating reward alert */
.promo-popup {
  position: fixed;
  z-index: 70;
  right: clamp(14px,2.2vw,34px);
  bottom: clamp(18px,3vw,38px);
  width: min(380px,calc(100vw - 28px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(35px,24px,0) scale(.88);
  transition: opacity .45s ease,transform .55s cubic-bezier(.2,1.45,.35,1),visibility .45s;
}
.promo-popup.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.promo-bubble {
  position: relative;
  display: grid;
  grid-template-columns: 55px 1fr 28px;
  align-items: center;
  gap: 13px;
  min-height: 126px;
  padding: 17px 15px 17px 17px;
  border: 1px solid rgba(128,255,189,.65);
  border-radius: 38px;
  background: linear-gradient(125deg,rgba(5,13,18,.97),rgba(26,10,48,.96));
  box-shadow: 0 0 0 1px rgba(105,233,255,.14),0 0 24px rgba(128,255,189,.3),0 0 62px rgba(119,61,255,.34),0 22px 60px rgba(0,0,0,.48);
  animation: promoFloat 2.8s ease-in-out infinite;
  isolation: isolate;
}
.promo-bubble::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -7px;
  border: 1px solid rgba(105,233,255,.26);
  border-radius: 44px;
  opacity: .75;
  animation: promoGlow 1.8s ease-in-out infinite;
}
.promo-alert-icon {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  color: #06110d;
  background: radial-gradient(circle at 34% 28%,#fff,#80ffbd 40%,#36d7de 72%);
  box-shadow: 0 0 22px rgba(128,255,189,.65);
  font-size: 27px;
  font-weight: 900;
  animation: alertBeat 1.4s ease-in-out infinite;
}
.promo-popup-copy { display: grid; gap: 2px; min-width: 0; color: #fff; text-decoration: none; }
.promo-popup-copy small { color: var(--terminal-cyan); font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.promo-popup-copy strong { font-size: clamp(16px,2vw,21px); line-height: 1.1; letter-spacing: -.05em; }
.promo-popup-copy b { color: var(--terminal-green); font-size: clamp(13px,1.6vw,17px); line-height: 1.25; text-shadow: 0 0 12px rgba(128,255,189,.4); }
.promo-popup-copy em { margin-top: 3px; color: #9dafb2; font-size: 7px; font-style: normal; line-height: 1.35; }
.promo-popup-close {
  align-self: start;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: #c7d8db;
  background: rgba(255,255,255,.06);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.promo-popup-close:hover { color: #07100d; border-color: var(--terminal-green); background: var(--terminal-green); }
html[data-theme="light"] .promo-bubble { color: #14242a; background: linear-gradient(125deg,rgba(247,255,255,.98),rgba(235,244,255,.97)); box-shadow: 0 0 28px rgba(0,145,125,.22),0 20px 55px rgba(29,60,85,.22); }
html[data-theme="light"] .promo-popup-copy { color: #10252a; }
html[data-theme="light"] .promo-popup-copy b { color: #006c5d; }
html[data-theme="light"] .promo-popup-copy em { color: #52666b; }

@keyframes promoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes promoGlow { 0%,100% { opacity: .35; transform: scale(.985); } 50% { opacity: 1; transform: scale(1.025); } }
@keyframes alertBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }

@media (max-width:820px) {
  .promo-popup { bottom: calc(82px + env(safe-area-inset-bottom)); }
}
@media (max-width:420px) {
  .promo-bubble { grid-template-columns: 45px 1fr 26px; gap: 10px; min-height: 110px; padding: 14px 12px 14px 14px; border-radius: 30px; }
  .promo-bubble::before { border-radius: 36px; }
  .promo-alert-icon { width: 45px; height: 45px; font-size: 23px; }
  .promo-popup-copy strong { font-size: 16px; }
  .promo-popup-copy b { font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .promo-bubble,.promo-bubble::before,.promo-alert-icon { animation: none; }
}