@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');


:root {
  font-family: 'DM Sans', sans-serif;
  color: #172033;
  background: #f7f8fc;
  font-synthesis: none;
  --navy: #090e1f;
  --navy-2: #141a31;
  --purple: #7659f5;
  --purple-deep: #5a3de2;
  --lime: #d8ff7d;
  --paper: #ffffff;
  --ink: #151b2d;
  --muted: #6d7486;
  --line: #e2e1e8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #f6f5f2; }
main { text-transform: capitalize; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.button { align-items: center; border: 0; cursor: pointer; display: inline-flex; gap: 9px; justify-content: center; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-main { background: linear-gradient(135deg, #947cff, #6848ef); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; box-shadow: 0 12px 30px rgba(101,70,230,.3), inset 0 1px rgba(255,255,255,.28); color: white; font-weight: 700; padding: 13px 19px; }
.button-light { background: white; border-radius: 11px; color: var(--navy); font-weight: 800; padding: 14px 20px; }
.button-large { padding: 16px 22px; }
.eyebrow { align-items: center; color: #a896ff; display: flex; font-size: 11px; font-weight: 800; gap: 7px; letter-spacing: .12em; margin: 0 0 20px; text-transform: uppercase; }
.eyebrow.dark { color: var(--purple); }

.bonus-bar { background: linear-gradient(90deg, #d8ff7d, #efffbd 50%, #d8ff7d); color: var(--navy); font-size: 11px; }
.bonus-bar .shell { align-items: center; display: flex; justify-content: space-between; min-height: 42px; }
.bonus-bar span, .bonus-bar a { align-items: center; display: flex; gap: 8px; }
.bonus-bar i { color: #4f5f2d; font-style: normal; }
.bonus-bar a { font-weight: 800; }
header { background: rgba(9,14,31,.96); border-bottom: 1px solid rgba(255,255,255,.07); color: white; position: relative; z-index: 20; }
.navbar { align-items: center; display: flex; height: 82px; justify-content: space-between; }
.logo img { display: block; height: 35px; object-fit: contain; width: auto; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: #aeb6cb; font-size: 12px; font-weight: 600; letter-spacing: .02em; transition: color .2s; }
.nav-links a:hover { color: white; }
.nav-actions { align-items: center; display: flex; gap: 22px; }
.nav-actions > a { font-size: 13px; font-weight: 700; }
.menu-button { background: transparent; color: white; display: none; padding: 7px; }

.hero { background: radial-gradient(circle at 74% 44%, rgba(118,89,245,.2), transparent 28%), linear-gradient(145deg, #090e1f 0%, #11172d 60%, #0c1225 100%); color: white; min-height: 700px; overflow: hidden; position: relative; }
.hero::before { 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: 64px 64px; content: ''; inset: 0; mask-image: linear-gradient(to bottom, black, transparent 85%); pointer-events: none; position: absolute; }
.hero-glow { border-radius: 50%; filter: blur(2px); position: absolute; }
.glow-one { background: rgba(109,74,255,.2); height: 620px; right: -130px; top: -180px; width: 620px; }
.glow-two { background: rgba(35,94,219,.12); bottom: -300px; height: 600px; left: -260px; width: 600px; }
.hero-grid { align-items: center; display: grid; gap: 60px; grid-template-columns: 1fr 1fr; min-height: 670px; padding-block: 60px 70px; position: relative; z-index: 2; }
.hero h1, h2 { font-family: 'Manrope', sans-serif; letter-spacing: -.055em; }
.hero h1 { font-size: clamp(58px, 6.4vw, 84px); font-weight: 700; line-height: .98; margin: 0; text-shadow: 0 12px 40px rgba(0,0,0,.25); }
.hero h1 span { background: linear-gradient(90deg, #d8ff7d, #f0ffbf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { color: #abb4c9; font-size: 17px; line-height: 1.7; margin: 27px 0 31px; max-width: 570px; }
.hero-actions { align-items: center; display: flex; gap: 25px; }
.hero-actions > a, .hero-demo-trigger { align-items: center; color: #d8dceb; display: flex; font-size: 13px; font-weight: 700; gap: 10px; }
.hero-demo-trigger { background: transparent; border: 0; cursor: pointer; padding: 0; }
.hero-demo-trigger:hover .play-icon { border-color: #8e78f5; color: #b4a5ff; transform: scale(1.06); }
.play-icon { align-items: center; border: 1px solid #586079; border-radius: 50%; display: flex; height: 34px; justify-content: center; width: 34px; }
.hero-trust { border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 35px; margin-top: 42px; padding-top: 25px; }
.hero-trust > div { align-items: center; display: flex; gap: 10px; }
.hero-trust svg { color: #9a87ff; }
.hero-trust span { display: flex; flex-direction: column; }
.hero-trust strong { font-size: 14px; }
.hero-trust small { color: #747e98; font-size: 10px; margin-top: 2px; }
.hero-visual { height: 530px; position: relative; }
.hero-art-ring { background: radial-gradient(circle, rgba(132,103,255,.3), transparent 66%); border: 1px solid rgba(181,166,255,.18); border-radius: 50%; box-shadow: inset 0 0 70px rgba(130,101,255,.08), 0 0 90px rgba(87,58,213,.12); height: 460px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 460px; }
.hero-visual > img { bottom: 0; filter: drop-shadow(0 25px 30px rgba(0,0,0,.3)); height: 500px; left: 50%; object-fit: contain; position: absolute; transform: translateX(-50%); z-index: 2; }
.hero-orbit { border: 1px dashed rgba(126,242,203,.16); border-radius: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.orbit-one { animation: spin 26s linear infinite; height: 500px; width: 500px; }
.orbit-two { animation: spinReverse 20s linear infinite; border-color: rgba(155,132,255,.16); height: 390px; width: 390px; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spinReverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }
.hero-chip { align-items: center; animation: float 4s ease-in-out infinite; backdrop-filter: blur(18px); background: linear-gradient(135deg, rgba(41,50,84,.88), rgba(21,29,57,.82)); border: 1px solid rgba(255,255,255,.15); border-radius: 15px; box-shadow: 0 18px 45px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08); display: flex; gap: 11px; padding: 12px 14px; position: absolute; z-index: 3; }
@keyframes float { 50% { transform: translateY(-8px); } }
.hero-chip > span { align-items: center; background: #6849e8; border-radius: 10px; color: white; display: flex; height: 38px; justify-content: center; width: 38px; }
.hero-chip div { display: flex; flex-direction: column; gap: 3px; }
.hero-chip small { color: #9da7c0; font-size: 9px; }
.hero-chip strong { font-size: 11px; }
.chip-games { left: 0; top: 100px; }
.chip-survey { animation-delay: -1.5s; right: -10px; top: 190px; }
.chip-survey > span { background: #168eac; }
.chip-paid { animation-delay: -3s; bottom: 48px; left: 30px; }
.chip-paid > span { background: #3bb27c; }
.hero-live-pill { align-items: center; backdrop-filter: blur(14px); background: rgba(10,16,35,.78); border: 1px solid rgba(255,255,255,.11); border-radius: 30px; bottom: 5px; color: #9ca7bd; display: flex; font-size: 8px; gap: 7px; left: 50%; padding: 7px 11px; position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 4; }
.hero-live-pill i { animation: livePulse 1.8s ease-out infinite; background: #55e895; border-radius: 50%; box-shadow: 0 0 0 0 rgba(85,232,149,.45); height: 6px; width: 6px; }
.hero-live-pill strong { color: white; }
.live-member-count { animation: memberTick .38s cubic-bezier(.2,.8,.2,1); display: inline-block; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
@keyframes memberTick { 0% { opacity: .55; transform: translateY(4px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes livePulse { 70% { box-shadow: 0 0 0 6px rgba(85,232,149,0); } 100% { box-shadow: 0 0 0 0 rgba(85,232,149,0); } }

.walkthrough-overlay { align-items: center; backdrop-filter: blur(14px); background: rgba(3,7,18,.82); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 100; }
.walkthrough-modal { animation: walkthroughOpen .35s cubic-bezier(.2,.8,.2,1); background: linear-gradient(145deg, #121a31, #0b1123); border: 1px solid #303a55; border-radius: 24px; box-shadow: 0 40px 100px rgba(0,0,0,.6); color: white; display: grid; grid-template-columns: 1fr .88fr; max-height: calc(100vh - 48px); max-width: 1020px; overflow: auto; position: relative; width: 100%; }
@keyframes walkthroughOpen { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.walkthrough-close { align-items: center; background: #202941; border: 1px solid #39435d; border-radius: 50%; color: #aab3c8; display: flex; height: 36px; justify-content: center; position: absolute; right: 18px; top: 18px; width: 36px; z-index: 4; }
.walkthrough-copy { padding: 42px; }
.walkthrough-copy .eyebrow { color: #62e6bd; margin-bottom: 15px; }
.walkthrough-copy > h2 { font-size: 38px; line-height: 1.08; margin: 0; }
.walkthrough-copy > p:not(.eyebrow) { color: #8f9bb2; font-size: 12px; line-height: 1.65; margin: 16px 0 25px; max-width: 440px; }
.walkthrough-list { display: grid; gap: 8px; }
.walkthrough-list button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 12px; color: #7f8ba2; display: flex; gap: 11px; padding: 11px; text-align: left; transition: .25s ease; width: 100%; }
.walkthrough-list button.active { background: rgba(118,89,245,.12); border-color: rgba(143,119,245,.28); color: white; transform: translateX(5px); }
.walkthrough-list button > span { align-items: center; background: #242d45; border-radius: 50%; color: #8793aa; display: flex; flex: 0 0 auto; font-size: 8px; font-weight: 900; height: 29px; justify-content: center; width: 29px; }
.walkthrough-list button.active > span { background: #7659f5; color: white; }
.walkthrough-list button > div { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.walkthrough-list strong { font-size: 11px; }
.walkthrough-list small { color: #717e96; font-size: 8px; }
.walkthrough-list button > svg { color: #4a566d; }
.walkthrough-list button.active > svg { color: #68e7bf; }
.walkthrough-visual { background: radial-gradient(circle at 50% 30%, rgba(118,89,245,.25), transparent 48%), #080e1e; border-left: 1px solid #29324a; display: flex; flex-direction: column; justify-content: center; min-height: 630px; overflow: hidden; padding: 42px 32px 28px; position: relative; }
.walkthrough-glow { background: rgba(77,229,178,.1); border-radius: 50%; filter: blur(20px); height: 280px; position: absolute; right: -120px; top: -100px; width: 280px; }
.walkthrough-screen { background: linear-gradient(150deg, #17213a, #10172b); border: 1px solid #38445f; border-radius: 20px; box-shadow: 0 28px 60px rgba(0,0,0,.38); overflow: hidden; position: relative; z-index: 2; }
.walkthrough-screen-top { align-items: center; border-bottom: 1px solid #2c3650; display: flex; height: 60px; justify-content: space-between; padding: 0 18px; }
.walkthrough-screen-top .logo img { height: 24px; }
.walkthrough-screen-top > span { color: #7d899f; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.walkthrough-progress { background: #222c43; height: 3px; }
.walkthrough-progress i { background: linear-gradient(90deg, #4de5b2, #8b6df5); display: block; height: 100%; transition: width .4s ease; }
.walkthrough-photo { animation: photoReveal .55s cubic-bezier(.2,.8,.2,1); height: 245px; overflow: hidden; position: relative; }
@keyframes photoReveal { from { opacity: 0; transform: scale(1.035); } }
.walkthrough-photo > img { animation: gameImageDrift 7s ease-in-out infinite alternate; height: 100%; object-fit: cover; transform: scale(1.04); width: 100%; }
@keyframes gameImageDrift { to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
.walkthrough-photo-shade { background: linear-gradient(90deg, rgba(7,13,28,.18), rgba(7,13,28,.02)), linear-gradient(to top, rgba(7,13,28,.96), transparent 68%); inset: 0; position: absolute; }
.game-scanline { animation: gameScan 3.2s linear infinite; background: linear-gradient(to bottom, transparent, rgba(83,233,190,.14), transparent); height: 60px; inset: -60px 0 auto; pointer-events: none; position: absolute; z-index: 2; }
@keyframes gameScan { to { transform: translateY(305px); } }
.walkthrough-photo-icon { align-items: center; backdrop-filter: blur(12px); background: rgba(15,23,44,.76); border: 1px solid rgba(255,255,255,.2); border-radius: 13px; color: #d8ff7d; display: flex; height: 49px; justify-content: center; left: 18px; position: absolute; top: 18px; width: 49px; }
.walkthrough-photo-label { bottom: 18px; display: flex; flex-direction: column; gap: 5px; left: 20px; position: absolute; }
.walkthrough-photo-label small { color: #65e7bf; font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.walkthrough-photo-label strong { font-family: 'Manrope'; font-size: 17px; text-shadow: 0 3px 15px rgba(0,0,0,.6); }
.walkthrough-photo-badge { align-items: center; backdrop-filter: blur(12px); background: rgba(11,18,35,.74); border: 1px solid rgba(255,255,255,.17); border-radius: 30px; bottom: 18px; color: #d8deea; display: flex; font-size: 7px; font-weight: 800; gap: 6px; padding: 7px 9px; position: absolute; right: 16px; }
.walkthrough-photo-badge i { background: #58e4b9; border-radius: 50%; box-shadow: 0 0 8px rgba(88,228,185,.7); height: 5px; width: 5px; }
.game-motion-layer { inset: 0; pointer-events: none; position: absolute; z-index: 3; }
.game-coin { align-items: center; animation: gameCoinFloat 2.4s ease-in-out infinite; background: linear-gradient(145deg, #ffd84e, #f19a18); border: 2px solid #ffe788; border-radius: 50%; box-shadow: 0 5px 18px rgba(245,176,31,.5); color: #5d3500; display: flex; font-size: 7px; font-weight: 900; height: 29px; justify-content: center; position: absolute; right: 20%; top: 26%; width: 29px; }
.game-coin.coin-two { animation-delay: -1.15s; height: 23px; right: 9%; top: 47%; width: 23px; }
@keyframes gameCoinFloat { 50% { transform: translateY(-12px) rotate(12deg) scale(1.08); } }
.game-profile-card, .game-play-card { align-items: center; animation: gameCardEnter .55s .15s cubic-bezier(.2,.8,.2,1) both; backdrop-filter: blur(14px); background: rgba(11,19,38,.84); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,.4); display: flex; gap: 9px; padding: 9px 11px; position: absolute; right: 15px; top: 20px; }
@keyframes gameCardEnter { from { opacity: 0; transform: translateX(20px) scale(.94); } }
.game-profile-card > span { align-items: center; background: linear-gradient(135deg, #8165f2, #5137bc); border-radius: 9px; display: flex; font-size: 8px; font-weight: 900; height: 31px; justify-content: center; width: 31px; }
.game-profile-card > div, .game-play-card > div { display: flex; flex-direction: column; gap: 2px; }
.game-profile-card small, .game-play-card small { color: #6ce7bf; font-size: 5px; font-weight: 900; letter-spacing: .08em; }
.game-profile-card b, .game-play-card b { font-size: 8px; }
.game-profile-card > svg { color: #67e5bc; margin-left: 8px; }
.signup-avatar-stack { display: flex; left: 18px; position: absolute; top: 83px; }
.signup-avatar-stack img { animation: signupAvatarIn .45s cubic-bezier(.2,1.5,.4,1) both; background: #202c46; border: 2px solid #111a2e; border-radius: 50%; height: 31px; margin-left: -8px; object-fit: cover; width: 31px; }
.signup-avatar-stack img:first-child { margin-left: 0; }
@keyframes signupAvatarIn { from { opacity: 0; transform: translateY(12px) scale(.7); } }
.signup-security { align-items: center; animation: gameCardEnter .45s .6s ease both; backdrop-filter: blur(12px); background: rgba(10,24,35,.82); border: 1px solid rgba(88,228,185,.25); border-radius: 30px; color: #69e5bf; display: flex; font-size: 6px; font-weight: 900; gap: 5px; left: 18px; padding: 6px 9px; position: absolute; top: 124px; }
.game-play-card { left: 72px; right: auto; top: 18px; }
.game-play-card > span { background: #24344f; border-radius: 50%; height: 27px; padding: 5px; width: 27px; }
.game-play-card > span i { animation: gameProgressPulse 2s ease-in-out infinite; background: conic-gradient(#58e4b9 0 72%, #36435b 72%); border-radius: 50%; display: block; height: 100%; width: 100%; }
@keyframes gameProgressPulse { 50% { filter: drop-shadow(0 0 5px #58e4b9); transform: rotate(20deg); } }
.game-play-card > strong { color: #d8ff7d; font-size: 8px; margin-left: 6px; }
.game-controller-hud { align-items: center; animation: controllerFloat 2.4s ease-in-out infinite; backdrop-filter: blur(12px); background: rgba(9,17,34,.78); border: 1px solid rgba(255,255,255,.18); border-radius: 15px; bottom: 46px; display: flex; gap: 7px; padding: 7px 10px; position: absolute; right: 16px; }
.game-controller-hud > i { color: #65e6bd; font-size: 15px; font-style: normal; font-weight: 900; }
.game-controller-hud > span { background: #8a6ff2; border-radius: 50%; height: 7px; width: 7px; }
.game-controller-hud > span:nth-of-type(2) { background: #d8ff7d; }
.game-controller-hud > b { color: #d8ff7d; font-size: 7px; margin-left: 3px; }
@keyframes controllerFloat { 50% { transform: translateY(-7px) rotate(2deg); } }
.game-milestones { animation: gameCardEnter .5s .15s ease both; backdrop-filter: blur(15px); background: rgba(9,17,35,.88); border: 1px solid rgba(113,235,205,.23); border-radius: 13px; box-shadow: 0 18px 40px rgba(0,0,0,.4); display: grid; gap: 4px; padding: 10px; position: absolute; right: 15px; top: 17px; width: 178px; }
.game-milestones > small { color: #71839c; font-size: 6px; font-weight: 900; letter-spacing: .1em; padding: 2px 3px 5px; }
.game-milestones > span { align-items: center; animation: milestoneComplete .42s .5s ease both; background: rgba(255,255,255,.045); border-radius: 7px; color: #dfe5ef; display: flex; font-size: 6px; gap: 6px; padding: 6px; }
.game-milestones > span i { align-items: center; animation: checkPop .35s 1s cubic-bezier(.2,1.7,.4,1) both; background: #4de5b2; border-radius: 50%; color: #09241b; display: flex; height: 15px; justify-content: center; width: 15px; }
.game-milestones > span b { color: #64e6bd; font-size: 6px; margin-left: auto; }
@keyframes milestoneComplete { from { opacity: 0; transform: translateX(10px); } }
@keyframes checkPop { from { opacity: 0; transform: scale(0); } }
.milestone-progress-ring { align-items: center; animation: ringSpinIn .8s .15s cubic-bezier(.2,1.4,.4,1) both; background: conic-gradient(#55e4b9 0 100%, #283651 0); border: 4px solid rgba(11,21,42,.9); border-radius: 50%; display: flex; height: 48px; justify-content: center; left: 15px; position: absolute; top: 20px; width: 48px; }
.milestone-progress-ring::after { background: #111b31; border-radius: 50%; content: ''; inset: 5px; position: absolute; }
.milestone-progress-ring span { color: #67e7c0; font-size: 7px; font-weight: 900; position: relative; z-index: 2; }
@keyframes ringSpinIn { from { opacity: 0; transform: rotate(-180deg) scale(.5); } }
.milestone-total { animation: milestoneTotal .45s 1.85s ease both; background: #d8ff7d; border-radius: 30px; bottom: 45px; color: #17210c; font-size: 8px; left: 15px; padding: 7px 10px; position: absolute; }
@keyframes milestoneTotal { from { opacity: 0; transform: translateY(10px); } }
.game-reward-unlocked { align-items: center; animation: rewardUnlock .7s .15s cubic-bezier(.2,1.5,.4,1) both; backdrop-filter: blur(14px); background: rgba(18,21,55,.86); border: 1px solid rgba(216,255,125,.34); border-radius: 14px; box-shadow: 0 0 35px rgba(118,89,245,.45); display: flex; flex-direction: column; gap: 5px; padding: 14px 19px; position: absolute; right: 19px; top: 19px; }
@keyframes rewardUnlock { from { opacity: 0; transform: scale(.6) rotate(-5deg); } }
.game-reward-unlocked > span { align-items: center; animation: rewardGlow 1.8s ease-in-out infinite; background: linear-gradient(145deg, #d8ff7d, #70e99c); border-radius: 50%; color: #152313; display: flex; height: 41px; justify-content: center; width: 41px; }
@keyframes rewardGlow { 50% { box-shadow: 0 0 25px rgba(216,255,125,.58); transform: translateY(-3px); } }
.game-reward-unlocked small { color: #9da8bb; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.game-reward-unlocked strong { color: #d8ff7d; font-family: 'Manrope'; font-size: 12px; }
.reward-confetti { inset: 0; overflow: hidden; position: absolute; }
.reward-confetti i { animation: confettiFall 2.2s linear infinite; background: #d8ff7d; height: 8px; left: 10%; position: absolute; top: -15px; transform: rotate(20deg); width: 4px; }
.reward-confetti i:nth-child(2) { animation-delay: -.7s; background: #7659f5; left: 22%; }.reward-confetti i:nth-child(3) { animation-delay: -1.4s; background: #4de5b2; left: 34%; }.reward-confetti i:nth-child(4) { animation-delay: -.3s; background: #ffbd4c; left: 46%; }.reward-confetti i:nth-child(5) { animation-delay: -1.1s; left: 58%; }.reward-confetti i:nth-child(6) { animation-delay: -1.8s; background: #7659f5; left: 68%; }.reward-confetti i:nth-child(7) { animation-delay: -.5s; background: #4de5b2; left: 78%; }.reward-confetti i:nth-child(8) { animation-delay: -1.5s; background: #ffbd4c; left: 88%; }.reward-confetti i:nth-child(9) { animation-delay: -.9s; left: 95%; }
@keyframes confettiFall { to { transform: translateY(275px) rotate(380deg); } }
.reward-cashout { align-items: center; animation: gameCardEnter .45s .8s ease both; backdrop-filter: blur(12px); background: rgba(9,24,25,.82); border: 1px solid rgba(216,255,125,.25); border-radius: 30px; bottom: 46px; color: #d8ff7d; display: flex; font-size: 7px; font-weight: 900; gap: 5px; padding: 7px 10px; position: absolute; right: 19px; }
.walkthrough-stage { animation: walkthroughStage .4s ease; min-height: 226px; padding: 25px 27px 22px; text-align: left; }
@keyframes walkthroughStage { from { opacity: 0; transform: translateX(12px); } }
.walkthrough-stage > small { color: #61e3b9; display: block; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.walkthrough-stage > strong { display: block; font-family: 'Manrope'; font-size: 20px; margin: 7px 0 8px; }
.walkthrough-stage > p { color: #8996ad; font-size: 9px; line-height: 1.6; margin: 0 0 15px; max-width: 340px; }
.walkthrough-mini-card { align-items: center; background: #0c1428; border: 1px solid #2d3953; border-radius: 11px; display: inline-flex; gap: 10px; min-width: 160px; padding: 10px 13px; text-align: left; }
.walkthrough-mini-card > svg { color: #55e2b8; }
.walkthrough-mini-card > span { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.walkthrough-mini-card small { color: #69768d; font-size: 7px; }
.walkthrough-mini-card b { font-size: 10px; }
.walkthrough-controls { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-top: 18px; position: relative; z-index: 2; }
.walkthrough-controls button { align-items: center; background: transparent; border: 1px solid #34405a; border-radius: 10px; color: #aeb7c9; display: flex; font-size: 9px; font-weight: 800; gap: 7px; justify-content: center; min-height: 39px; padding: 0 14px; }
.walkthrough-controls button:last-child { background: linear-gradient(135deg, #8062f5, #6040db); border-color: rgba(255,255,255,.15); color: white; }
.walkthrough-controls button:disabled { cursor: not-allowed; opacity: .35; }

@media (max-width: 800px) {
  .walkthrough-modal { grid-template-columns: 1fr; }
  .walkthrough-copy { padding: 34px 25px 20px; }
  .walkthrough-copy > h2 { font-size: 30px; }
  .walkthrough-visual { border-left: 0; border-top: 1px solid #29324a; min-height: auto; padding: 30px 25px; }
  .walkthrough-list { grid-template-columns: repeat(2, 1fr); }
  .walkthrough-list button { padding: 8px; }
  .walkthrough-list button > svg, .walkthrough-list small { display: none; }
  .walkthrough-photo { height: 230px; }
  .walkthrough-stage { min-height: 210px; }
}

@media (max-width: 480px) {
  .walkthrough-overlay { padding: 0; }
  .walkthrough-modal { border-radius: 0; max-height: 100vh; min-height: 100vh; }
  .walkthrough-copy { padding: 27px 18px 18px; }
  .walkthrough-copy > h2 { font-size: 26px; }
  .walkthrough-copy > p:not(.eyebrow) { margin-block: 11px 16px; }
  .walkthrough-list button > span { height: 25px; width: 25px; }
  .walkthrough-visual { padding: 22px 18px; }
  .walkthrough-photo { height: 210px; }
  .walkthrough-stage { min-height: 210px; padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .walkthrough-photo > img, .game-scanline, .game-coin, .game-play-card > span i, .game-controller-hud, .game-reward-unlocked > span, .reward-confetti i { animation: none; }
  .game-profile-card, .game-play-card, .game-milestones, .game-milestones > span, .game-milestones > span i, .game-reward-unlocked, .signup-avatar-stack img, .signup-security, .milestone-progress-ring, .milestone-total, .reward-cashout { animation-duration: .01ms; animation-delay: 0s; }
}

.phone-stage { height: 570px; position: relative; width: 100%; }
.phone-glow { background: radial-gradient(circle, rgba(79,255,187,.2), rgba(73,151,255,.14) 35%, transparent 70%); filter: blur(2px); height: 540px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 540px; }
.phone-shell { background: linear-gradient(145deg, #323a4d, #080c15 42%, #333b4c); border: 1px solid rgba(255,255,255,.22); border-radius: 48px; box-shadow: 0 45px 90px rgba(0,0,0,.48), 0 0 0 5px #080b14, inset 0 0 0 1px rgba(255,255,255,.11); height: 558px; left: 50%; padding: 9px; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(2deg); width: 286px; z-index: 3; }
.phone-shell::before { background: #070a11; border-radius: 0 0 14px 14px; content: ''; height: 24px; left: 50%; position: absolute; top: 8px; transform: translateX(-50%); width: 88px; z-index: 6; }
.phone-shell::after { background: #101622; border: 1px solid #343b49; border-radius: 50%; content: ''; height: 7px; position: absolute; right: 105px; top: 15px; width: 7px; z-index: 7; }
.phone-buttons { background: #303746; border-radius: 3px 0 0 3px; height: 42px; left: -5px; position: absolute; width: 4px; }
.phone-buttons.left-one { top: 95px; }
.phone-buttons.left-two { top: 147px; }
.phone-buttons.right-one { border-radius: 0 3px 3px 0; height: 65px; left: auto; right: -5px; top: 122px; }
.phone-screen { background: #f7f8fb; border-radius: 39px; color: #151b2d; height: 100%; overflow: hidden; position: relative; width: 100%; }
.phone-status { align-items: center; background: #0a1020; color: white; display: flex; font-size: 7px; font-weight: 700; height: 31px; justify-content: space-between; padding: 0 18px; }
.phone-status i { background: #02040a; border-radius: 10px; display: block; height: 16px; width: 75px; }
.phone-appbar { align-items: center; background: #0a1020; color: white; display: flex; height: 38px; justify-content: space-between; padding: 0 14px; }
.phone-appbar strong { font-size: 9px; }
.phone-back { font-size: 19px; line-height: 1; }
.phone-more { font-size: 9px; letter-spacing: 1px; }
.phone-game-hero { height: 128px; overflow: hidden; position: relative; }
.phone-game-hero > img { height: 100%; object-fit: cover; width: 100%; }
.phone-game-fade { background: linear-gradient(to top, rgba(8,12,27,.95), transparent 75%); inset: 0; position: absolute; }
.phone-tag { background: linear-gradient(90deg, #31e4c4, #7cf47c); border-radius: 20px; color: #092317; font-size: 6px; font-weight: 900; left: 12px; padding: 4px 7px; position: absolute; top: 10px; }
.phone-game-title { align-items: center; bottom: 10px; color: white; display: flex; gap: 8px; left: 12px; position: absolute; }
.phone-game-icon { align-items: center; background: linear-gradient(135deg, #7951f5, #3a2197); border: 1px solid rgba(255,255,255,.3); border-radius: 9px; display: flex; font-size: 9px; font-weight: 900; height: 34px; justify-content: center; width: 34px; }
.phone-game-title > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.phone-game-title strong { font-family: 'Manrope'; font-size: 10px; }
.phone-game-title small { color: #aeb7ca; font-size: 6px; }
.phone-reward-summary { background: white; border-bottom: 1px solid #e7e9ef; display: grid; grid-template-columns: 1fr 1fr; padding: 10px 12px; }
.phone-reward-summary span { display: flex; flex-direction: column; gap: 2px; }
.phone-reward-summary span + span { border-left: 1px solid #e8eaf0; padding-left: 12px; }
.phone-reward-summary small { color: #8a91a1; font-size: 6px; }
.phone-reward-summary strong { color: #6648e5; font-size: 9px; }
.phone-progress-head, .phone-milestone-title { align-items: center; display: flex; justify-content: space-between; padding: 9px 12px 5px; }
.phone-progress-head span, .phone-milestone-title span { font-size: 7px; font-weight: 800; }
.phone-progress-head strong { color: #5b3fd6; font-size: 7px; }
.phone-progress { background: #e3e5ec; border-radius: 6px; height: 4px; margin: 0 12px; overflow: hidden; }
.phone-progress i { background: linear-gradient(90deg, #21dbc0, #70ed78); border-radius: 6px; display: block; height: 100%; width: 62%; }
.phone-milestone-title { padding-top: 10px; }
.phone-milestone-title small { color: #8a91a1; font-size: 6px; }
.phone-milestones { display: grid; gap: 4px; padding: 0 9px; }
.phone-milestones button { align-items: center; background: white; border: 1px solid #e8e9ef; border-radius: 8px; color: #252b3a; cursor: pointer; display: flex; gap: 7px; min-height: 38px; padding: 6px 7px; text-align: left; transition: border .25s, box-shadow .25s, transform .25s; width: 100%; }
.phone-milestones button.focused { border-color: #7659f5; box-shadow: 0 5px 13px rgba(92,63,211,.14); transform: translateX(2px); }
.phone-milestones button.locked { opacity: .55; }
.phone-step { align-items: center; background: #f0edff; border-radius: 50%; color: #6648e5; display: flex; flex: 0 0 auto; font-size: 7px; font-weight: 800; height: 22px; justify-content: center; width: 22px; }
.phone-milestones .done .phone-step { background: #dff7e9; color: #1b9a5f; }
.phone-step-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.phone-step-copy strong { font-size: 7px; }
.phone-step-copy small { color: #9298a6; font-size: 5px; }
.phone-milestones button > b { color: #5f43da; font-size: 6px; }
.phone-bottom { align-items: center; background: white; border-top: 1px solid #e6e8ee; bottom: 0; display: flex; justify-content: space-between; left: 0; padding: 8px 10px 12px; position: absolute; right: 0; }
.phone-bottom > span { align-items: center; color: #31915f; display: flex; font-size: 5px; font-weight: 800; gap: 3px; }
.phone-bottom button { background: linear-gradient(135deg, #7758ef, #5638d2); border: 0; border-radius: 7px; color: white; font-size: 6px; font-weight: 800; padding: 7px 10px; }
.phone-float { align-items: center; backdrop-filter: blur(16px); background: rgba(21,29,55,.92); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.3); display: flex; gap: 10px; padding: 11px 13px; position: absolute; z-index: 5; }
.phone-float > span { align-items: center; background: linear-gradient(135deg, #35e7c8, #74f179); border-radius: 10px; color: #09281d; display: flex; height: 34px; justify-content: center; width: 34px; }
.phone-float > div:not(.tiny-avatars) { display: flex; flex-direction: column; gap: 3px; }
.phone-float small { color: #919bb1; font-size: 7px; }
.phone-float strong { color: white; font-size: 10px; }
.payout-float { animation: float 4s ease-in-out infinite; left: -5px; top: 92px; }
.players-float { animation: float 4.5s ease-in-out infinite -2s; bottom: 62px; right: -10px; }
.tiny-avatars { display: flex; }
.tiny-avatars i { align-items: center; background: #7659f5; border: 2px solid #1c2542; border-radius: 50%; color: white; display: flex; font-size: 6px; font-style: normal; height: 26px; justify-content: center; margin-left: -7px; width: 26px; }
.tiny-avatars i:first-child { background: #d95d89; margin-left: 0; }
.tiny-avatars i:last-child { background: #39a98a; }

.ticker { background: linear-gradient(90deg, #5c3fd3, #7659f5, #5c3fd3); border-bottom: 1px solid rgba(255,255,255,.13); border-top: 1px solid rgba(255,255,255,.13); color: white; overflow: hidden; }
.ticker > div { align-items: center; display: flex; gap: 38px; justify-content: center; min-width: 1100px; padding: 17px; }
.ticker span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ticker i { background: var(--lime); border-radius: 50%; height: 5px; width: 5px; }

.offers-section { padding-block: 132px; }
.section-head { align-items: end; display: grid; gap: 90px; grid-template-columns: 1.2fr .8fr; }
.section-head h2, .earning-copy h2, .center-head h2, .rewards-copy h2, .proof-head h2, .faq-copy h2, .final-cta h2 { font-size: clamp(40px, 5vw, 62px); font-weight: 700; line-height: 1.05; margin: 0; }
.section-head > p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 5px; }
.filter-row { align-items: center; display: flex; justify-content: space-between; margin: 55px 0 25px; }
.filters { background: #eceef5; border-radius: 11px; display: flex; padding: 4px; }
.filters button { align-items: center; background: transparent; border: 0; border-radius: 8px; color: #6d7589; cursor: pointer; display: flex; font-size: 12px; font-weight: 700; gap: 7px; padding: 10px 17px; }
.filters button.active { background: white; box-shadow: 0 3px 12px rgba(30,38,65,.08); color: var(--purple); }
.filter-row > a, .more-card a { align-items: center; display: flex; font-size: 12px; font-weight: 800; gap: 8px; }
.opportunity-grid { display: grid; gap: 17px; grid-template-columns: repeat(4, 1fr); }
.opportunity { background: rgba(255,255,255,.92); border: 1px solid rgba(33,39,63,.09); border-radius: 18px; box-shadow: 0 8px 28px rgba(32,38,65,.045); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.opportunity:hover { border-color: rgba(118,89,245,.24); box-shadow: 0 25px 55px rgba(38,48,83,.13); transform: translateY(-7px); }
.offer-art { align-items: center; display: flex; height: 145px; justify-content: center; position: relative; }
.offer-art.violet, .mini-art.violet { background: linear-gradient(135deg, #7857ec, #4b2bb7); }
.offer-art.orange, .mini-art.orange { background: linear-gradient(135deg, #ffab4c, #e95736); }
.offer-art.blue, .mini-art.blue { background: linear-gradient(135deg, #4b90ef, #2452b9); }
.offer-art.red, .mini-art.red { background: linear-gradient(135deg, #f05757, #951f2f); }
.offer-art.cyan, .mini-art.cyan { background: linear-gradient(135deg, #43c4d8, #167d9f); }
.offer-art.pink, .mini-art.pink { background: linear-gradient(135deg, #ed79b1, #ae3f7d); }
.offer-art.green, .mini-art.green { background: linear-gradient(135deg, #5bcf90, #168c57); }
.offer-art.yellow, .mini-art.yellow { background: linear-gradient(135deg, #f9d45e, #df921e); }
.offer-art > span { align-items: center; backdrop-filter: blur(8px); background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.38); border-radius: 20px; box-shadow: 0 15px 30px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.2); color: white; display: flex; font-family: 'Manrope'; font-size: 24px; font-weight: 800; height: 72px; justify-content: center; transform: rotate(-5deg); width: 72px; }
.offer-art.has-image { background: #151a2b; height: 180px; overflow: hidden; }
.offer-art.has-image::after { background: linear-gradient(to top, rgba(8,12,26,.72), transparent 55%); content: ''; inset: 0; pointer-events: none; position: absolute; }
.offer-art.has-image > img { height: 100%; object-fit: cover; transition: transform .45s ease; width: 100%; }
.opportunity:hover .offer-art.has-image > img { transform: scale(1.055); }
.offer-art.has-image > small { box-shadow: 0 8px 20px rgba(0,0,0,.18); z-index: 2; }
.offer-art > small { background: white; border-radius: 30px; color: var(--ink); font-size: 8px; font-weight: 800; left: 12px; padding: 5px 8px; position: absolute; text-transform: uppercase; top: 12px; }
.offer-copy { padding: 18px; }
.offer-type { color: var(--purple); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.offer-copy h3 { font-family: 'Manrope'; font-size: 17px; margin: 7px 0 6px; }
.offer-copy p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0; min-height: 34px; }
.offer-copy > div { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; }
.offer-copy > div strong { color: var(--purple); font-size: 12px; }
.offer-copy button { align-items: center; background: #f0edff; border: 0; border-radius: 50%; color: var(--purple); display: flex; height: 30px; justify-content: center; width: 30px; }
.game-opportunity .offer-copy > p { min-height: 34px; }
.milestone-list { align-items: stretch !important; background: #f7f6fb; border: 1px solid #ebe8f3 !important; border-radius: 10px; display: flex !important; flex-direction: column; gap: 0; margin-top: 14px !important; padding: 10px !important; }
.milestone-heading { align-items: center; color: #666e82; display: flex; font-size: 8px; font-weight: 800; gap: 5px; letter-spacing: .06em; margin-bottom: 5px; text-transform: uppercase; }
.milestone-heading svg { color: #b17b17; }
.milestone-row { align-items: center; border-top: 1px solid #e9e7ef; display: flex; justify-content: space-between; padding: 7px 0; }
.milestone-row i { align-items: center; color: #687084; display: flex; font-size: 8px; font-style: normal; gap: 5px; }
.milestone-row i svg { background: #e9f6eb; border-radius: 50%; color: #29915e; padding: 2px; }
.milestone-row b { color: var(--purple); font-size: 8px; }
.game-opportunity .offer-copy > div:last-child { margin-top: 12px; }
.more-card { align-items: center; background: #f0edff; border-style: dashed; display: flex; flex-direction: column; justify-content: center; min-height: 300px; padding: 30px; text-align: center; }
.more-card > span { align-items: center; background: white; border-radius: 50%; color: var(--purple); display: flex; height: 64px; justify-content: center; width: 64px; }
.more-card h3 { font-family: 'Manrope'; margin: 20px 0 8px; }
.more-card p { color: var(--muted); font-size: 12px; margin: 0 0 22px; }

.earning-section { background: radial-gradient(circle at 20% 50%, rgba(118,89,245,.14), transparent 28%), linear-gradient(145deg, #090e1f, #11182d); color: white; overflow: hidden; padding-block: 135px; }
.earning-grid { align-items: center; display: grid; gap: 120px; grid-template-columns: 1.05fr .95fr; }
.earning-grid > .phone-stage { margin-left: 20px; }
.earning-preview { min-height: 500px; position: relative; }
.wallet-card { background: linear-gradient(145deg, #8166f3, #4d31bd); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; box-shadow: 0 34px 65px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.2); left: 0; padding: 28px; position: absolute; top: 20px; width: 350px; z-index: 2; }
.wallet-top, .wallet-foot { align-items: center; display: flex; justify-content: space-between; }
.wallet-top > span:first-child { color: #c8c1ef; font-size: 11px; }
.verified { align-items: center; background: rgba(255,255,255,.12); border-radius: 30px; display: flex; font-size: 9px; gap: 5px; padding: 5px 8px; }
.wallet-card > strong { display: block; font-family: 'Manrope'; font-size: 39px; margin-top: 24px; }
.wallet-card > strong small { font-size: 13px; }
.wallet-card > p { color: #c8c1ef; font-size: 11px; margin: 3px 0 25px; }
.progress { background: rgba(255,255,255,.16); border-radius: 10px; height: 6px; overflow: hidden; }
.progress i { background: var(--lime); border-radius: 10px; display: block; height: 100%; width: 84.5%; }
.wallet-foot { color: #c8c1ef; font-size: 9px; margin: 8px 0 24px; }
.wallet-foot b { color: white; }
.wallet-card .button { width: 100%; }
.activity-card { background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.7); border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,.22); color: var(--ink); padding: 22px; position: absolute; right: 0; top: 165px; width: 330px; z-index: 3; }
.activity-head { align-items: center; display: flex; font-size: 12px; justify-content: space-between; margin-bottom: 10px; }
.activity-head span { align-items: center; color: #28a36b; display: flex; font-size: 9px; gap: 5px; }
.activity-head span::before { background: #28a36b; border-radius: 50%; content: ''; height: 6px; width: 6px; }
.activity-row { align-items: center; border-radius: 10px; display: flex; gap: 10px; opacity: .62; padding: 10px 7px; transition: opacity .3s, background .3s, transform .3s; }
.activity-row.active { background: #f2f0fc; opacity: 1; transform: translateX(-4px); }
.mini-art { align-items: center; border-radius: 8px; color: white; display: flex; font-size: 9px; font-weight: 800; height: 36px; justify-content: center; width: 36px; }
.activity-row > div { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.activity-row strong, .activity-row > b { font-size: 10px; }
.activity-row small { color: var(--muted); font-size: 8px; }
.activity-row > b { color: #26915f; }
.bonus-float { align-items: center; background: var(--lime); border-radius: 13px; bottom: 5px; color: var(--navy); display: flex; gap: 10px; left: 48px; padding: 12px; position: absolute; width: 230px; z-index: 4; }
.bonus-float > span { align-items: center; background: rgba(255,255,255,.6); border-radius: 9px; display: flex; height: 38px; justify-content: center; width: 38px; }
.bonus-float > div { display: flex; flex: 1; flex-direction: column; }
.bonus-float small { font-size: 8px; }
.bonus-float strong { font-size: 13px; }
.bonus-float > svg { color: #4f7724; }
.earning-copy > p:not(.eyebrow) { color: #9ba5bc; font-size: 14px; line-height: 1.75; margin: 25px 0 30px; }
.earning-copy ul { display: grid; gap: 17px; list-style: none; margin: 0 0 32px; padding: 0; }
.earning-copy li { align-items: center; display: flex; gap: 13px; }
.earning-copy li > span { align-items: center; background: rgba(201,244,91,.12); border-radius: 50%; color: var(--lime); display: flex; height: 34px; justify-content: center; width: 34px; }
.earning-copy li > div { display: flex; flex-direction: column; gap: 4px; }
.earning-copy li strong { font-size: 13px; }
.earning-copy li small { color: #838ea8; font-size: 10px; }

.how-section { padding-block: 125px; }
.center-head { text-align: center; }
.center-head .eyebrow { justify-content: center; }
.steps { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); margin-top: 65px; }
.steps article { background: rgba(255,255,255,.9); border: 1px solid rgba(33,39,63,.09); border-radius: 18px; box-shadow: 0 10px 35px rgba(30,37,62,.045); min-height: 275px; padding: 24px; position: relative; transition: transform .25s, box-shadow .25s; }
.steps article:hover { box-shadow: 0 22px 50px rgba(30,37,62,.1); transform: translateY(-5px); }
.step-number { color: #b2b8c6; font-size: 10px; position: absolute; right: 20px; top: 20px; }
.step-icon { align-items: center; background: #f0edff; border-radius: 12px; color: var(--purple); display: flex; height: 52px; justify-content: center; margin-bottom: 52px; width: 52px; }
.steps h3 { font-family: 'Manrope'; font-size: 17px; margin: 0 0 10px; }
.steps p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0; }

.rewards-section { background: radial-gradient(circle at 80% 20%, rgba(216,255,125,.12), transparent 24%), linear-gradient(135deg, #5c3fd5, #7659f5 55%, #6044db); color: white; overflow: hidden; padding-block: 125px; position: relative; }
.rewards-grid { align-items: center; display: grid; gap: 120px; grid-template-columns: 1fr 1fr; }
.rewards-copy > p:not(.eyebrow) { color: #d3ccf4; font-size: 14px; line-height: 1.7; margin: 25px 0 27px; max-width: 500px; }
.reward-logos { display: flex; flex-wrap: wrap; gap: 8px; }
.reward-logos span { background: white; border-radius: 8px; color: #25304a; font-size: 10px; font-weight: 800; padding: 10px 13px; }
.rewards-copy > small { color: #b9afe9; display: block; font-size: 8px; margin-top: 14px; }
.calculator { background: linear-gradient(145deg, #ffffff, #f8f7fb); border: 1px solid rgba(255,255,255,.65); border-radius: 22px; box-shadow: 0 35px 75px rgba(42,24,119,.4), inset 0 1px white; color: var(--ink); padding: 30px; }
.calculator-head { align-items: center; display: flex; justify-content: space-between; }
.calculator-head span { align-items: center; display: flex; font-size: 13px; font-weight: 800; gap: 8px; }
.calculator-head svg { color: var(--purple); }
.calculator-head small { background: #eef8d7; border-radius: 30px; color: #58731c; font-size: 9px; font-weight: 800; padding: 6px 9px; }
.points-value { align-items: baseline; display: flex; gap: 7px; justify-content: center; margin: 40px 0 25px; }
.points-value strong { font-family: 'Manrope'; font-size: 47px; letter-spacing: -.05em; }
.points-value span { color: var(--purple); font-size: 12px; font-weight: 800; }
.calculator input { accent-color: var(--purple); cursor: pointer; width: 100%; }
.range-labels { color: #8e96a8; display: flex; font-size: 8px; justify-content: space-between; margin-top: 6px; }
.equals { align-items: center; background: #f4f2fc; border-radius: 12px; display: flex; justify-content: space-between; margin: 23px 0 17px; padding: 17px; }
.equals span { color: var(--muted); font-size: 10px; }
.equals strong { color: var(--purple); font-family: 'Manrope'; font-size: 24px; }
.calculator .button { background: var(--navy); color: white; width: 100%; }

.proof-section { padding-block: 120px; }
.proof-head { align-items: end; display: flex; justify-content: space-between; }
.rating { align-items: center; display: flex; gap: 13px; }
.rating > strong { font-family: 'Manrope'; font-size: 43px; }
.rating > span { display: flex; flex-direction: column; gap: 4px; }
.rating i, .stars { color: #f3ac24; font-style: normal; letter-spacing: .05em; }
.rating small { color: var(--muted); font-size: 8px; }
.review-grid { display: grid; gap: 17px; grid-template-columns: repeat(3, 1fr); margin-top: 55px; }
.review-grid article { background: rgba(255,255,255,.92); border: 1px solid rgba(33,39,63,.09); border-radius: 18px; box-shadow: 0 10px 35px rgba(30,37,62,.045); padding: 27px; }
.stars { font-size: 12px; }
.review-grid blockquote { font-family: 'Manrope'; font-size: 14px; line-height: 1.7; margin: 20px 0 28px; min-height: 96px; }
.reviewer { align-items: center; display: flex; gap: 10px; }
.reviewer > span { align-items: center; background: #ebe7ff; border-radius: 50%; color: var(--purple); display: flex; font-size: 10px; font-weight: 800; height: 37px; justify-content: center; width: 37px; }
.reviewer > div { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.reviewer strong { font-size: 11px; }
.reviewer small { color: var(--muted); font-size: 8px; }
.reviewer > svg { background: #e8f7ee; border-radius: 50%; color: #2a9c67; padding: 3px; }

.faq-section { display: grid; gap: 110px; grid-template-columns: .75fr 1.25fr; padding-block: 110px 130px; }
.faq-copy > p:last-child { color: var(--muted); font-size: 12px; line-height: 1.6; }
.faq-copy a { color: var(--purple); font-weight: 700; }
.faq-list article { border-bottom: 1px solid #d8dce6; }
.faq-list button { align-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; display: flex; font-family: 'Manrope'; font-size: 15px; font-weight: 700; justify-content: space-between; padding: 21px 0; text-align: left; width: 100%; }
.faq-list button i { align-items: center; border: 1px solid #c7ccd7; border-radius: 50%; display: flex; font-style: normal; font-weight: 500; height: 27px; justify-content: center; width: 27px; }
.faq-list article > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
.faq-list article > div p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; overflow: hidden; }
.faq-list article.open > div { grid-template-rows: 1fr; }
.faq-list article.open > div p { padding-bottom: 22px; }

.final-cta { background: radial-gradient(circle at 50% 0%, rgba(118,89,245,.26), transparent 35%), linear-gradient(145deg, #080d1d, #11182c); color: white; overflow: hidden; padding-block: 110px; position: relative; text-align: center; }
.cta-glow { background: rgba(109,74,255,.22); border-radius: 50%; filter: blur(10px); height: 600px; left: 50%; position: absolute; top: -400px; transform: translateX(-50%); width: 700px; }
.final-cta .shell { align-items: center; display: flex; flex-direction: column; position: relative; }
.cta-gift { align-items: center; background: rgba(109,74,255,.2); border: 1px solid rgba(170,150,255,.25); border-radius: 50%; color: var(--lime); display: flex; height: 70px; justify-content: center; margin-bottom: 25px; width: 70px; }
.final-cta .eyebrow { color: var(--lime); }
.final-cta > div > p:not(.eyebrow) { color: #a1abc1; font-size: 14px; line-height: 1.7; margin: 24px 0 28px; }
.final-cta small { color: #77839d; font-size: 9px; margin-top: 17px; }

footer { background: #070b17; border-top: 1px solid rgba(255,255,255,.06); color: white; padding: 75px 0 25px; }
.footer-grid { display: grid; gap: 50px; grid-template-columns: 2fr repeat(4, 1fr); padding-bottom: 65px; }
.footer-brand .logo img { height: 28px; }
.footer-brand > strong { display: block; font-size: 12px; margin-top: 23px; }
.footer-brand p { color: #717b94; font-size: 10px; line-height: 1.7; max-width: 240px; }
.footer-brand address { color: #7f899f; font-size: 12px; font-style: normal; line-height: 1.75; margin-top: 20px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 13px; }
.footer-grid > div > strong { font-size: 11px; margin-bottom: 5px; }
.footer-grid > div > a { color: #717b94; font-size: 10px; }
.footer-grid > div > a:hover { color: white; }
.footer-bottom { align-items: center; border-top: 1px solid rgba(255,255,255,.08); color: #626d87; display: flex; font-size: 8px; justify-content: space-between; padding-top: 22px; }
.footer-bottom button { align-items: center; background: transparent; border: 0; color: #8690a8; display: flex; font-size: 9px; gap: 6px; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  .menu-button { display: inline-flex; }
  .nav-links.open { background: #202b4c; border: 1px solid #334061; border-radius: 13px; display: flex; flex-direction: column; gap: 0; left: 24px; padding: 8px; position: absolute; right: 24px; top: 72px; }
  .nav-links.open a { padding: 12px; }
  .hero-grid { gap: 20px; }
  .hero h1 { font-size: 58px; }
  .chip-survey { right: 0; }
  .opportunity-grid { grid-template-columns: repeat(2, 1fr); }
  .earning-grid, .rewards-grid { gap: 60px; }
  .earning-preview { transform: scale(.88); transform-origin: left center; width: 110%; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 34px, 600px); }
  .bonus-bar i, .bonus-bar a { display: none; }
  .bonus-bar .shell { justify-content: center; }
  .navbar { height: 72px; }
  .nav-actions { display: none; }
  .hero-grid { grid-template-columns: 1fr; padding-top: 70px; }
  .hero h1 { font-size: clamp(51px, 15vw, 70px); }
  .hero-trust { justify-content: space-between; gap: 10px; }
  .hero-visual { height: 500px; margin-top: 20px; }
  .phone-stage { left: 50%; transform: translateX(-50%) scale(.88); transform-origin: center top; width: 112%; }
  .hero-visual > img { height: 455px; }
  .chip-games { left: -5px; }
  .chip-survey { right: -5px; }
  .ticker > div { justify-content: flex-start; }
  .offers-section, .how-section, .proof-section { padding-block: 85px; }
  .section-head, .earning-grid, .rewards-grid, .faq-section { gap: 35px; grid-template-columns: 1fr; }
  .filter-row { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 35px; }
  .opportunity-grid { grid-template-columns: 1fr 1fr; }
  .earning-section { padding-block: 80px; }
  .earning-preview { min-height: 455px; transform: scale(.8); width: 125%; }
  .steps { grid-template-columns: 1fr 1fr; }
  .rewards-section { padding-block: 80px; }
  .proof-head { align-items: flex-start; flex-direction: column; gap: 30px; }
  .review-grid { grid-template-columns: 1fr; }
  .review-grid blockquote { min-height: 0; }
  .faq-section { padding-block: 85px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (max-width: 480px) {
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-trust { flex-wrap: wrap; }
  .hero-visual { height: 420px; }
  .phone-stage { transform: translateX(-50%) scale(.73); width: 136%; }
  .hero-visual > img { height: 385px; }
  .hero-art-ring { height: 350px; width: 350px; }
  .hero-chip { padding: 9px; }
  .hero-chip > span { height: 32px; width: 32px; }
  .chip-games { top: 75px; }
  .chip-survey { top: 180px; }
  .chip-paid { bottom: 18px; left: 3px; }
  .filters { width: 100%; }
  .filters button { flex: 1; justify-content: center; padding-inline: 8px; }
  .opportunity-grid, .steps { grid-template-columns: 1fr; }
  .earning-preview { min-height: 390px; transform: scale(.66); width: 150%; }
  .steps article { min-height: 240px; }
  .footer-grid { gap: 35px 25px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}

/* Premium Dark Experience Below The Hero */
.truth-section { background: #111627; color: white; overflow: hidden; padding-block: 130px; position: relative; }
.truth-section::before { background: radial-gradient(circle, rgba(35,229,190,.09), transparent 62%); content: ''; height: 700px; left: 50%; position: absolute; top: 220px; transform: translateX(-50%); width: 700px; }
.dark-center-head { margin: 0 auto 85px; max-width: 760px; position: relative; text-align: center; }
.dark-center-head .eyebrow { justify-content: center; }
.dark-center-head h2 { font-size: clamp(44px, 5vw, 68px); line-height: 1.03; margin: 0; }
.dark-center-head h2 span, .impact-section h2 span { color: #4de5b2; }
.dark-center-head > p:last-child { color: #98a2b9; font-size: 17px; line-height: 1.75; margin: 25px auto 0; max-width: 650px; }
.truth-journey { margin: 0 auto; max-width: 980px; position: relative; }
.truth-line { background: #2c3348; bottom: 115px; left: 50%; position: absolute; top: 115px; transform: translateX(-50%); width: 2px; }
.truth-line i { background: linear-gradient(#35edbb, #70f176); box-shadow: 0 0 16px rgba(53,237,187,.45); display: block; transition: height .6s cubic-bezier(.2,.8,.2,1); width: 100%; }
.truth-row { align-items: center; background: transparent; border: 0; color: white; cursor: pointer; display: grid; gap: 85px; grid-template-columns: 1fr 54px 1fr; min-height: 260px; padding: 30px 0; position: relative; text-align: left; width: 100%; }
.truth-row:nth-child(even) article { grid-column: 3; }
.truth-row:nth-child(even) .truth-visual { grid-column: 1; grid-row: 1; }
.truth-row article, .truth-visual { opacity: .45; transform: scale(.96); transition: opacity .45s, transform .45s, border-color .45s; }
.truth-row.active article, .truth-row.active .truth-visual { opacity: 1; transform: scale(1); }
.truth-node { align-items: center; background: #1a2034; border: 2px solid #394158; border-radius: 50%; color: #8993aa; display: flex; font-size: 10px; font-weight: 900; grid-column: 2; grid-row: 1; height: 54px; justify-content: center; position: relative; transition: all .4s; width: 54px; z-index: 2; }
.truth-row.active .truth-node { background: #45e5b3; border-color: #80ffd6; box-shadow: 0 0 0 9px rgba(69,229,179,.1), 0 0 30px rgba(69,229,179,.35); color: #071812; }
.truth-kicker { color: #4de5b2; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.truth-row h3 { font-family: 'Manrope'; font-size: 26px; line-height: 1.25; margin: 10px 0 13px; }
.truth-row article > p { color: #9aa4bb; font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.truth-row article > small { align-items: center; color: #6f7a94; display: flex; font-size: 11px; font-weight: 700; gap: 6px; }
.truth-row article > small svg { color: #4de5b2; }
.truth-visual { align-items: center; background: linear-gradient(145deg, #1a2034, #141a2c); border: 1px solid #2b334b; border-radius: 22px; display: flex; height: 210px; justify-content: center; overflow: hidden; position: relative; }
.truth-row.active .truth-visual { border-color: rgba(77,229,178,.27); box-shadow: 0 25px 55px rgba(0,0,0,.22); }
.truth-game-stack { align-items: center; display: flex; justify-content: center; }
.truth-game-stack img { border: 3px solid #252c42; border-radius: 18px; box-shadow: 0 18px 35px rgba(0,0,0,.35); height: 120px; object-fit: cover; transform: rotate(-10deg); width: 95px; }
.truth-game-stack img:nth-child(2) { margin: 0 -15px; transform: translateY(-10px); z-index: 2; }
.truth-game-stack img:nth-child(3) { transform: rotate(10deg); }
.truth-community { height: 100%; position: relative; width: 100%; }
.community-core { align-items: center; background: linear-gradient(135deg, #39e3b1, #7358f1); border-radius: 20px; color: white; display: flex; height: 74px; justify-content: center; left: 50%; position: absolute; top: 47%; transform: translate(-50%, -50%); width: 74px; }
.truth-community i { align-items: center; background: #7759f2; border: 3px solid #252c42; border-radius: 50%; color: white; display: flex; font-size: 10px; font-style: normal; height: 40px; justify-content: center; position: absolute; width: 40px; }
.truth-community i:nth-of-type(1) { left: 22%; top: 24%; }
.truth-community i:nth-of-type(2) { right: 19%; top: 20%; background: #e06b8b; }
.truth-community i:nth-of-type(3) { bottom: 20%; left: 27%; background: #d7a63c; }
.truth-community i:nth-of-type(4) { bottom: 22%; right: 23%; background: #478cd5; }
.truth-community b { bottom: 13px; color: #7ff3cd; font-size: 11px; left: 50%; position: absolute; transform: translateX(-50%); }
.truth-reward-stack { align-items: center; display: flex; justify-content: center; position: relative; width: 100%; }
.truth-reward-stack span { align-items: center; background: white; border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,.24); color: #172033; display: flex; font-size: 11px; font-weight: 900; height: 70px; justify-content: center; margin: 0 -6px; transform: rotate(-7deg); width: 105px; }
.truth-reward-stack span:nth-child(2) { background: #2869d6; color: white; transform: translateY(-12px); z-index: 2; }
.truth-reward-stack span:nth-child(3) { background: #f3a530; transform: rotate(7deg); }
.truth-reward-stack b { background: #d8ff7d; border-radius: 20px; bottom: -36px; color: #152019; font-size: 11px; padding: 7px 11px; position: absolute; z-index: 3; }

body { background: #0d1221; }
.offers-section, .how-section, .proof-section, .faq-section { color: white; }
.offers-section { background: #0d1221; margin: 0; max-width: none; padding-inline: max(24px, calc((100% - 1180px) / 2)); width: 100%; }
.section-head > p, .steps p, .faq-copy > p:last-child { color: #9aa4b8; font-size: 16px; }
.section-head h2, .center-head h2, .proof-head h2, .faq-copy h2 { font-size: clamp(44px, 5vw, 64px); }
.filters { background: #171d30; border: 1px solid #282f45; }
.filters button { color: #a1aac0; font-size: 14px; padding: 12px 21px; }
.filters button.active { background: #282f47; box-shadow: none; color: #8bf2cf; }
.filter-row > a, .more-card a { color: #74e9c2; font-size: 14px; }
.opportunity { background: #171d2e; border-color: #293047; box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.opportunity:hover { border-color: rgba(77,229,178,.36); box-shadow: 0 26px 60px rgba(0,0,0,.3); }
.offer-copy h3 { color: white; font-size: 20px; }
.offer-copy p { color: #9aa3b8; font-size: 14px; min-height: 42px; }
.offer-type { color: #54e2b3; font-size: 10px; }
.offer-copy > div { border-color: #2a3145; }
.offer-copy > div strong { color: #89f2cf; font-size: 14px; }
.offer-copy button { background: #2b3450; color: #80ecc8; }
.milestone-list { background: #121728; border-color: #2a3147 !important; }
.milestone-heading { color: #929cb3; font-size: 10px; }
.milestone-row { border-color: #2a3042; padding: 9px 0; }
.milestone-row i, .milestone-row b { font-size: 10px; }
.milestone-row i { color: #aab2c4; }
.more-card { background: linear-gradient(145deg, #181e31, #121727); }
.more-card > span { background: #252d46; color: #6ee9c1; }
.more-card h3 { color: white; font-size: 20px; }
.more-card p { color: #97a1b6; font-size: 14px; }

.survey-section { background: #151a2b; border-bottom: 1px solid #282f43; border-top: 1px solid #282f43; color: white; overflow: hidden; padding-block: 130px; position: relative; }
.survey-section::before { background: radial-gradient(circle, rgba(118,89,245,.12), transparent 68%); content: ''; height: 700px; position: absolute; right: -250px; top: -280px; width: 700px; }
.survey-section .shell { position: relative; }
.survey-heading { align-items: end; display: grid; gap: 100px; grid-template-columns: 1.1fr .9fr; margin-bottom: 60px; }
.survey-heading h2 { font-size: clamp(44px, 5vw, 64px); line-height: 1.04; margin: 0; }
.survey-heading h2 span { color: #4de5b2; }
.survey-heading > div:last-child > p { color: #9ba5bb; font-size: 16px; line-height: 1.75; margin: 0 0 20px; }
.survey-heading a { align-items: center; color: #71e9c2; display: inline-flex; font-size: 14px; font-weight: 800; gap: 8px; }
.survey-layout { display: grid; gap: 24px; grid-template-columns: 1.35fr .65fr; }
.survey-cards { display: grid; gap: 14px; }
.survey-card { align-items: center; background: #1a2033; border: 1px solid #2c344a; border-radius: 17px; color: white; cursor: pointer; display: flex; gap: 18px; min-height: 125px; padding: 20px; text-align: left; transition: transform .25s, border-color .25s, background .25s, box-shadow .25s; width: 100%; }
.survey-card:hover, .survey-card.active { background: #20273c; border-color: rgba(77,229,178,.4); box-shadow: 0 20px 45px rgba(0,0,0,.2); transform: translateX(5px); }
.survey-icon { align-items: center; background: #253048; border-radius: 13px; color: #60e7bd; display: flex; flex: 0 0 auto; height: 54px; justify-content: center; width: 54px; }
.survey-card.purple .survey-icon { background: #312856; color: #a68fff; }
.survey-card.blue .survey-icon { background: #203653; color: #6bb5ff; }
.survey-card-main { display: flex; flex: 1; flex-direction: column; }
.survey-card-main > span { color: #68e8be; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.survey-card-main h3 { font-family: 'Manrope'; font-size: 20px; margin: 7px 0 10px; }
.survey-meta { align-items: center; color: #8f99ae; display: flex; gap: 8px; }
.survey-meta small { font-size: 12px; }
.survey-meta i { background: #4c566d; border-radius: 50%; height: 3px; width: 3px; }
.survey-payout { align-items: flex-end; border-left: 1px solid #30384d; display: flex; flex-direction: column; gap: 4px; min-width: 130px; padding-left: 20px; }
.survey-payout small { color: #8e98ad; font-size: 11px; }
.survey-payout strong { color: #d8ff7d; font-family: 'Manrope'; font-size: 18px; }
.survey-payout span { align-items: center; background: #30394f; border-radius: 50%; color: #71e9c2; display: flex; height: 30px; justify-content: center; margin-top: 5px; width: 30px; }
.survey-matcher { align-items: center; background: linear-gradient(145deg, #212840, #181e31); border: 1px solid #30394f; border-radius: 20px; box-shadow: 0 25px 55px rgba(0,0,0,.2); display: flex; flex-direction: column; padding: 24px; text-align: center; }
.matcher-top { align-items: center; display: flex; justify-content: space-between; width: 100%; }
.matcher-top span { align-items: center; display: flex; font-size: 13px; font-weight: 800; gap: 7px; }
.matcher-top span svg { color: #d8ff7d; }
.matcher-top i { align-items: center; color: #63e8ba; display: flex; font-size: 10px; font-style: normal; gap: 5px; }
.matcher-top i::before { animation: livePulse 1.8s ease-out infinite; background: #55e895; border-radius: 50%; content: ''; height: 6px; width: 6px; }
.match-ring { align-items: center; background: conic-gradient(#4de5b2 var(--match), #30374d 0); border-radius: 50%; display: flex; height: 132px; justify-content: center; margin: 28px 0 18px; position: relative; transition: background .5s; width: 132px; }
.match-ring::before { background: #1c2337; border-radius: 50%; content: ''; inset: 8px; position: absolute; }
.match-ring > div { display: flex; flex-direction: column; position: relative; }
.match-ring strong { font-family: 'Manrope'; font-size: 29px; }
.match-ring small { color: #8f99ae; font-size: 10px; }
.match-label { color: #55e4b5; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.survey-matcher h3 { font-family: 'Manrope'; font-size: 21px; margin: 8px 0; }
.survey-matcher > p { color: #8f99af; font-size: 13px; line-height: 1.6; margin: 0 0 18px; }
.match-details { border-bottom: 1px solid #32394d; border-top: 1px solid #32394d; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 18px; padding: 15px 0; width: 100%; }
.match-details span { display: flex; flex-direction: column; gap: 4px; }
.match-details span + span { border-left: 1px solid #343c51; }
.match-details small { color: #8e98ad; font-size: 10px; }
.match-details strong { font-size: 14px; }
.survey-matcher > .button { width: 100%; }
.matcher-note { align-items: center; color: #7f8aa1; display: flex; font-size: 10px; gap: 5px; margin-top: 13px; }
.survey-trust { align-items: center; border-top: 1px solid #2c3347; display: flex; justify-content: space-between; margin-top: 38px; padding-top: 25px; }
.survey-trust span { align-items: center; color: #9aa5ba; display: flex; font-size: 12px; font-weight: 700; gap: 7px; }
.survey-trust svg { color: #4de5b2; }

.referral-section { background: #0d1221; color: white; overflow: hidden; padding-block: 135px; position: relative; }
.referral-glow { background: radial-gradient(circle, rgba(77,229,178,.1), transparent 68%); height: 750px; left: -300px; position: absolute; top: -200px; width: 750px; }
.referral-section .shell { position: relative; }
.referral-grid { align-items: center; display: grid; gap: 100px; grid-template-columns: 1fr 1fr; }
.referral-copy h2 { font-size: clamp(46px, 5vw, 66px); line-height: 1.03; margin: 0; }
.referral-copy h2 span { color: #4de5b2; }
.referral-copy > p:not(.eyebrow) { color: #9ca6ba; font-size: 16px; line-height: 1.75; margin: 25px 0 30px; }
.referral-benefits { display: grid; gap: 17px; }
.referral-benefits > div { align-items: center; display: flex; gap: 13px; }
.referral-benefits > div > span { align-items: center; background: rgba(77,229,178,.11); border: 1px solid rgba(77,229,178,.18); border-radius: 50%; color: #4de5b2; display: flex; flex: 0 0 auto; height: 36px; justify-content: center; width: 36px; }
.referral-benefits > div > div { display: flex; flex-direction: column; gap: 4px; }
.referral-benefits strong { font-size: 15px; }
.referral-benefits small { color: #838ea5; font-size: 13px; }
.invite-link { align-items: center; background: #181e30; border: 1px solid #2b3349; border-radius: 14px; display: flex; justify-content: space-between; margin-top: 28px; padding: 13px 14px 13px 17px; }
.invite-link > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.invite-link small { color: #7f8aa1; font-size: 10px; }
.invite-link strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-link .button { background: #d8ff7d; border-radius: 9px; color: #172019; flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 10px 12px; }
.referral-terms { color: #68748e; display: block; font-size: 11px; line-height: 1.6; margin-top: 13px; }
.referral-dashboard { background: linear-gradient(145deg, #1b2236, #141a2b); border: 1px solid #2e374e; border-radius: 22px; box-shadow: 0 35px 70px rgba(0,0,0,.28); padding: 26px; }
.referral-dashboard-head { align-items: center; display: flex; justify-content: space-between; }
.referral-dashboard-head > div { align-items: center; display: flex; gap: 10px; }
.referral-dashboard-head > div > span { align-items: center; background: #2a334b; border-radius: 10px; color: #60e6bc; display: flex; height: 38px; justify-content: center; width: 38px; }
.referral-dashboard-head > div > div { display: flex; flex-direction: column; gap: 2px; }
.referral-dashboard-head small { color: #8b96ad; font-size: 10px; }
.referral-dashboard-head strong { font-size: 13px; }
.commission-badge { background: rgba(216,255,125,.1); border: 1px solid rgba(216,255,125,.2); border-radius: 30px; color: #d8ff7d; font-size: 10px; font-weight: 800; padding: 7px 9px; }
.referral-total { align-items: center; display: flex; flex-direction: column; margin: 30px 0 20px; }
.referral-total > small { color: #8d98ae; font-size: 11px; }
.referral-total > strong { font-family: 'Manrope'; font-size: 48px; letter-spacing: -.05em; margin: 6px 0 2px; }
.referral-total > span { color: #5fe5b9; font-size: 10px; }
.referral-network { height: 175px; margin: 0 auto 22px; position: relative; width: 320px; }
.network-center { align-items: center; background: linear-gradient(135deg, #4de5b2, #7659f5); border: 5px solid #20283d; border-radius: 50%; box-shadow: 0 0 0 8px rgba(77,229,178,.06); display: flex; font-size: 11px; font-weight: 900; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 3; }
.network-line { background: #364158; height: 1px; left: 50%; position: absolute; top: 50%; transform-origin: left; width: 105px; }
.line-a { transform: rotate(-145deg); }.line-b { transform: rotate(-35deg); }.line-c { transform: rotate(145deg); }.line-d { transform: rotate(35deg); }
.network-person { align-items: center; background: #7359df; border: 3px solid #2b3449; border-radius: 50%; color: white; display: flex; flex-direction: column; font-size: 9px; font-weight: 800; height: 46px; justify-content: center; position: absolute; width: 46px; z-index: 2; }
.network-person small { background: #222b40; border-radius: 20px; color: #63e7ba; font-size: 7px; padding: 3px 5px; position: absolute; top: 39px; white-space: nowrap; }
.person-a { left: 7px; top: 17px; }.person-b { right: 7px; top: 17px; background: #d65f88; }.person-c { bottom: 18px; left: 25px; background: #d49838; }.person-d { bottom: 18px; right: 25px; background: #347eae; }
.referral-calculator { background: #101626; border: 1px solid #293147; border-radius: 14px; padding: 16px; }
.referral-calculator > div:first-child { align-items: center; display: flex; font-size: 12px; justify-content: space-between; }
.referral-calculator > div:first-child strong { color: #d8ff7d; font-size: 16px; }
.referral-calculator input { accent-color: #4de5b2; cursor: pointer; margin-top: 14px; width: 100%; }
.referral-scale { color: #6f7b92; display: flex; font-size: 9px; justify-content: space-between; }
.calculation-row { align-items: center; border-top: 1px solid #2a3246; display: flex; justify-content: space-between; margin-top: 13px; padding-top: 13px; }
.calculation-row span { color: #8b96ad; font-size: 9px; }
.calculation-row strong { color: #5de5b8; font-size: 12px; }
.referral-steps { align-items: stretch; border-top: 1px solid #252d41; display: grid; gap: 24px; grid-template-columns: 1fr auto 1fr auto 1fr; margin-top: 75px; padding-top: 38px; }
.referral-steps > div { display: flex; flex-direction: column; }
.referral-steps > div > span { color: #4de5b2; font-size: 11px; font-weight: 900; }
.referral-steps strong { font-family: 'Manrope'; font-size: 17px; margin: 8px 0; }
.referral-steps small { color: #8691a8; font-size: 12px; line-height: 1.6; }
.referral-steps > i { align-items: center; color: #49546d; display: flex; font-style: normal; }

.earning-section { background: #151a2b; border-bottom: 1px solid #242b40; border-top: 1px solid #242b40; }
.earning-copy > p:not(.eyebrow) { font-size: 16px; }
.earning-copy li strong { font-size: 15px; }
.earning-copy li small { font-size: 13px; }

.how-section { background: #0d1221; margin: 0; max-width: none; padding-inline: max(24px, calc((100% - 1180px) / 2)); width: 100%; }
.steps article { background: #171d2e; border-color: #293047; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.steps article:hover { box-shadow: 0 25px 55px rgba(0,0,0,.28); }
.step-icon { background: #252d47; color: #72ecc3; }
.steps h3 { color: white; font-size: 20px; }
.steps p { font-size: 14px; }

.rewards-section { background: linear-gradient(135deg, #161c30, #222944 55%, #151a2b); }
.rewards-copy > p:not(.eyebrow) { font-size: 16px; }
.reward-logos { flex-wrap: nowrap; overflow: hidden; padding-block: 10px; }
.reward-logos span { flex: 0 0 auto; font-size: 13px; padding: 13px 17px; }
.rewards-copy > small { color: #9ba6bd; font-size: 11px; }

.proof-section { background: #111627; margin: 0; max-width: none; padding-inline: max(24px, calc((100% - 1180px) / 2)); width: 100%; }
.rating small { color: #9aa4b8; font-size: 11px; }
.review-grid article { background: #191f32; border-color: #2b3349; box-shadow: 0 12px 30px rgba(0,0,0,.15); }
.review-grid blockquote { color: #d9deea; font-size: 16px; min-height: 125px; }
.reviewer strong { font-size: 14px; }
.reviewer small { color: #929cb3; font-size: 11px; }

.impact-section { background: #0b101e; color: white; overflow: hidden; padding-block: 130px; position: relative; text-align: center; }
.impact-glow { background: rgba(77,229,178,.08); border-radius: 50%; filter: blur(20px); height: 500px; left: 50%; position: absolute; top: -300px; transform: translateX(-50%); width: 800px; }
.impact-section .shell { position: relative; }
.impact-section .eyebrow { justify-content: center; }
.impact-section h2 { font-size: clamp(46px, 5vw, 66px); margin: 0; }
.impact-section > div > p:not(.eyebrow) { color: #929cb3; font-size: 16px; margin: 22px auto 55px; }
.impact-number { align-items: baseline; display: flex; justify-content: center; line-height: 1; text-shadow: 0 0 35px rgba(77,229,178,.16); }
.impact-number small, .impact-number span { color: #4de5b2; font-family: 'Manrope'; font-size: clamp(28px, 4vw, 54px); font-weight: 700; }
.impact-number strong { font-family: 'Manrope'; font-size: clamp(54px, 9vw, 112px); letter-spacing: .06em; }
.impact-label { color: #6f7b95; font-size: 12px; font-weight: 800; letter-spacing: .15em; margin-top: 20px; text-transform: uppercase; }

.faq-section { background: #111627; margin: 0; max-width: none; padding-inline: max(24px, calc((100% - 1180px) / 2)); width: 100%; }
.faq-list article { border-color: #2d354a; }
.faq-list button { color: white; font-size: 17px; padding: 25px 0; }
.faq-list button i { border-color: #465069; color: #73e9c2; }
.faq-list article > div p { color: #9ba5ba; font-size: 15px; }

@media (max-width: 760px) {
  .truth-section { padding-block: 85px; }
  .dark-center-head { margin-bottom: 50px; }
  .truth-line { left: 26px; top: 90px; bottom: 90px; }
  .truth-row, .truth-row:nth-child(even) { gap: 20px; grid-template-columns: 54px 1fr; min-height: auto; padding: 25px 0 45px; }
  .truth-node { grid-column: 1; }
  .truth-row article, .truth-row:nth-child(even) article { grid-column: 2; grid-row: 1; }
  .truth-row .truth-visual, .truth-row:nth-child(even) .truth-visual { grid-column: 2; grid-row: 2; height: 190px; width: 100%; }
  .truth-row h3 { font-size: 22px; }
  .truth-row article > p { font-size: 14px; }
  .offers-section, .how-section, .proof-section, .faq-section { padding-inline: 17px; }
  .impact-number strong { letter-spacing: .01em; }
  .survey-section { padding-block: 85px; }
  .survey-heading, .survey-layout { gap: 35px; grid-template-columns: 1fr; }
  .survey-heading { margin-bottom: 40px; }
  .survey-card { align-items: flex-start; flex-wrap: wrap; }
  .survey-payout { align-items: flex-start; border-left: 0; border-top: 1px solid #30384d; flex-direction: row; justify-content: space-between; min-width: 100%; padding-left: 0; padding-top: 13px; }
  .survey-payout span { margin-top: 0; }
  .survey-trust { align-items: flex-start; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
  .referral-section { padding-block: 85px; }
  .referral-grid { gap: 50px; grid-template-columns: 1fr; }
  .referral-steps { gap: 22px; grid-template-columns: 1fr; margin-top: 50px; }
  .referral-steps > i { display: none; }
  .referral-steps > div { border-left: 2px solid #2c364b; padding-left: 18px; }
}

@media (max-width: 480px) {
  .invite-link { align-items: stretch; flex-direction: column; gap: 12px; }
  .invite-link .button { width: 100%; }
  .referral-dashboard { padding: 18px; }
  .referral-dashboard-head { align-items: flex-start; gap: 12px; }
  .referral-network { transform: scale(.9); transform-origin: center; width: 100%; }
  .calculation-row { align-items: flex-start; flex-direction: column; gap: 7px; }
}

/* Readability Pass */
body { font-size: 16px; }
.bonus-bar { font-size: 12px; }
.nav-links a, .nav-actions > a { font-size: 14px; }
.eyebrow { font-size: 12px; }
.hero-lead { font-size: 18px; }
.hero-actions > a { font-size: 14px; }
.hero-trust strong { font-size: 15px; }
.hero-trust small { font-size: 12px; }
.hero-chip small { font-size: 10px; }
.hero-chip strong { font-size: 13px; }
.hero-live-pill { font-size: 10px; }
.ticker span { font-size: 12px; }
.offer-copy p { font-size: 15px; }
.offer-type { font-size: 11px; }
.milestone-heading { font-size: 11px; }
.milestone-row i, .milestone-row b { font-size: 11px; }
.earning-copy li small { font-size: 14px; }
.truth-kicker { font-size: 12px; }
.truth-row article > small { font-size: 12px; }
.truth-community b { font-size: 12px; }
.reward-logos span { font-size: 14px; }
.rewards-copy > small { font-size: 12px; line-height: 1.6; }
.rating small { font-size: 12px; }
.reviewer strong { font-size: 15px; }
.reviewer small { font-size: 12px; }
.impact-label { font-size: 13px; }
.faq-copy > p:last-child { font-size: 15px; }
.footer-grid > div > strong { font-size: 14px; }
.footer-grid > div > a { font-size: 13px; }
.footer-brand > strong { font-size: 14px; }
.footer-brand p { font-size: 13px; max-width: 300px; }
.footer-brand address { font-size: 13px; }
.footer-bottom { font-size: 11px; }
.footer-bottom button { font-size: 12px; }

.phone-status { font-size: 8px; }
.phone-appbar strong { font-size: 10px; }
.phone-tag { font-size: 7px; }
.phone-game-title strong { font-size: 11px; }
.phone-game-title small { font-size: 7px; }
.phone-reward-summary small { font-size: 7px; }
.phone-reward-summary strong { font-size: 10px; }
.phone-progress-head span, .phone-milestone-title span { font-size: 8px; }
.phone-progress-head strong { font-size: 8px; }
.phone-milestone-title small { font-size: 7px; }
.phone-step { font-size: 8px; }
.phone-step-copy strong { font-size: 8px; }
.phone-step-copy small { font-size: 7px; }
.phone-milestones button > b { font-size: 7px; }
.phone-bottom > span { font-size: 7px; }
.phone-bottom button { font-size: 7px; }
.phone-float small { font-size: 8px; }
.phone-float strong { font-size: 11px; }

/* Live Payouts, Visual Surveys, And App Offers */
.live-payouts { align-items: center; background: linear-gradient(90deg, #11172b, #0d1324 50%, #15152d); border-bottom: 1px solid rgba(118,89,245,.24); border-top: 1px solid rgba(77,229,178,.1); color: white; display: flex; height: 62px; overflow: hidden; position: relative; }
.live-payouts::after { background: linear-gradient(90deg, transparent, rgba(118,89,245,.08), transparent); content: ''; inset: 0; pointer-events: none; position: absolute; }
.live-payout-label { align-items: center; background: linear-gradient(135deg, #7257e8, #4c37b3); border: 1px solid rgba(175,157,255,.35); border-radius: 0 30px 30px 0; box-shadow: 0 8px 24px rgba(81,55,190,.3); color: white; display: flex; flex: 0 0 auto; font-size: 12px; font-weight: 900; gap: 8px; height: 38px; letter-spacing: .05em; padding: 0 20px; position: relative; text-transform: uppercase; z-index: 2; }
.live-payout-label i { animation: livePulse 1.8s ease-out infinite; background: #72f0c6; border-radius: 50%; box-shadow: 0 0 10px rgba(114,240,198,.65); height: 7px; width: 7px; }
.live-payout-window { flex: 1; overflow: hidden; }
.live-payout-track { align-items: center; animation: payoutMarquee 34s linear infinite; display: flex; gap: 42px; padding-left: 42px; white-space: nowrap; width: max-content; }
.live-payout-track span { color: #a7afc3; font-size: 13px; }
.live-payout-track b { color: #ece9ff; margin-right: 5px; }
.live-payout-track i { color: #65e8bd; font-style: normal; margin-left: 38px; text-shadow: 0 0 10px rgba(101,232,189,.45); }
.live-payouts:hover .live-payout-track { animation-play-state: paused; }
@keyframes payoutMarquee { to { transform: translateX(-50%); } }

.offers-section .opportunity-grid { grid-template-columns: repeat(3, 1fr); }
.games-section-head { background: radial-gradient(circle at 18% 20%, rgba(77,229,178,.1), transparent 30%), linear-gradient(135deg, #171d30, #111727); border: 1px solid #293249; border-radius: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.2); gap: 70px; overflow: hidden; padding: 48px 52px; position: relative; }
.games-section-head::after { border: 1px solid rgba(118,89,245,.18); border-radius: 50%; content: ''; height: 280px; position: absolute; right: -95px; top: -140px; width: 280px; }
.games-title-wrap { position: relative; }
.games-title-wrap h2 { font-size: clamp(54px, 6vw, 78px); line-height: .95; }
.games-title-wrap h2 span { background: linear-gradient(90deg, #4de5b2, #d8ff7d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.games-title-accent { display: flex; gap: 7px; margin-top: 25px; }
.games-title-accent i { background: #4de5b2; border-radius: 10px; display: block; height: 5px; width: 42px; }
.games-title-accent i:nth-child(2) { background: #7659f5; width: 18px; }
.games-title-accent i:nth-child(3) { background: #d8ff7d; width: 8px; }
.games-intro { position: relative; z-index: 2; }
.games-intro > p { color: #b0b8ca; font-family: 'Manrope'; font-size: 18px; line-height: 1.65; margin: 0 0 30px; max-width: 480px; }
.games-proof { border-top: 1px solid #30384e; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); padding-top: 23px; }
.games-proof span { display: flex; flex-direction: column; gap: 5px; }
.games-proof strong { color: white; font-family: 'Manrope'; font-size: 23px; }
.games-proof small { color: #7f8aa1; font-size: 10px; line-height: 1.35; }
.truth-community i img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
.truth-reward-stack span { padding: 8px; text-align: center; }

.survey-banner { align-items: center; align-self: stretch; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 45%), linear-gradient(135deg, #31cfa5, #176951); border-radius: 12px; color: white; display: flex; flex: 0 0 115px; flex-direction: column; gap: 7px; justify-content: center; overflow: hidden; position: relative; }
.survey-banner::after { border: 1px solid rgba(255,255,255,.2); border-radius: 50%; content: ''; height: 85px; position: absolute; right: -32px; top: -32px; width: 85px; }
.survey-card.purple .survey-banner { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 45%), linear-gradient(135deg, #8a68f5, #4b2da8); }
.survey-card.blue .survey-banner { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.2), transparent 45%), linear-gradient(135deg, #439fe7, #174c86); }
.survey-banner b { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.apps-section { background: #101525; color: white; padding-block: 130px; }
.apps-heading { align-items: end; display: grid; gap: 90px; grid-template-columns: 1.1fr .9fr; margin-bottom: 55px; }
.apps-heading h2 { font-size: clamp(44px, 5vw, 64px); line-height: 1.04; margin: 0; }
.apps-heading h2 span { color: #4de5b2; }
.apps-heading > p { color: #9aa4b9; font-size: 16px; line-height: 1.75; margin: 0 0 5px; }
.app-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.app-card { background: #181e30; border: 1px solid #2b3348; border-radius: 20px; min-height: 385px; overflow: hidden; padding: 24px; position: relative; transition: transform .3s, box-shadow .3s, border-color .3s; }
.app-card::before { background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%); content: ''; height: 280px; position: absolute; right: -100px; top: -130px; width: 280px; }
.app-card:hover { border-color: rgba(77,229,178,.35); box-shadow: 0 28px 60px rgba(0,0,0,.28); transform: translateY(-7px); }
.app-card-top { align-items: center; display: flex; justify-content: space-between; position: relative; }
.app-number { color: #626e88; font-size: 11px; font-weight: 800; }
.app-status { align-items: center; color: #75e9c4; display: flex; font-size: 10px; font-weight: 700; gap: 6px; }
.app-status i { background: #56e2b5; border-radius: 50%; height: 6px; width: 6px; }
.app-logo { align-items: center; background: white; border-radius: 20px; box-shadow: 0 18px 35px rgba(0,0,0,.22); display: flex; height: 88px; justify-content: center; margin: 44px 0 28px; position: relative; width: 88px; }
.app-logo img { height: 48px; max-width: 55px; object-fit: contain; width: auto; }
.app-card.tiktok .app-logo, .app-card.uber .app-logo { background: #05070b; border: 1px solid #2c3448; }
.app-card.spotify .app-logo { background: #0b1912; border: 1px solid #244332; }
.app-card.tiktok .app-logo img, .app-card.uber .app-logo img { filter: drop-shadow(0 4px 10px rgba(255,255,255,.08)); }
.app-card h3 { font-family: 'Manrope'; font-size: 25px; margin: 0 0 10px; }
.app-card > p { color: #929db4; font-size: 14px; line-height: 1.65; margin: 0; min-height: 70px; }
.app-reward { align-items: center; border-top: 1px solid #2d354a; display: flex; justify-content: space-between; margin-top: 18px; padding-top: 18px; }
.app-reward > span { display: flex; flex-direction: column; gap: 4px; }
.app-reward small { color: #7f8aa1; font-size: 10px; }
.app-reward strong { color: #d8ff7d; font-size: 15px; }
.app-reward button { align-items: center; background: #293249; border: 0; border-radius: 50%; color: #66e5bb; display: flex; height: 38px; justify-content: center; width: 38px; }

.earning-limit { align-items: center; background: linear-gradient(90deg, rgba(216,255,125,.12), rgba(77,229,178,.08)); border: 1px solid rgba(216,255,125,.2); border-radius: 13px; display: flex; gap: 12px; margin: -8px 0 28px; padding: 13px 15px; }
.earning-limit > svg { color: #d8ff7d; }
.earning-limit > span { display: flex; flex-direction: column; gap: 3px; }
.earning-limit small { color: #8f9aae; font-size: 11px; }
.earning-limit strong { color: #d8ff7d; font-size: 15px; }
.reviewer > span img { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }

@media (max-width: 980px) {
  .offers-section .opportunity-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .apps-section { padding-block: 85px; }
  .apps-heading { gap: 30px; grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr; }
  .app-card { min-height: auto; }
  .offers-section .opportunity-grid { grid-template-columns: 1fr; }
  .games-section-head { gap: 35px; padding: 34px 26px; }
  .games-proof { gap: 12px; }
  .games-proof strong { font-size: 20px; }
}

/* Reference-Matched Header */
.bonus-bar { background: linear-gradient(90deg, #d8ff7d, #ecffae 50%, #d8ff7d); border-bottom: 1px solid rgba(8,14,31,.08); }
.bonus-bar .shell { height: 42px; min-height: 42px; }
.bonus-bar span { font-weight: 500; }
.bonus-bar span strong { font-weight: 800; }
.bonus-bar a { gap: 10px; transition: transform .2s ease; }
.bonus-bar a:hover { transform: translateX(3px); }
header { background: rgba(8,13,29,.98); border-bottom: 1px solid rgba(255,255,255,.09); box-shadow: 0 12px 35px rgba(0,0,0,.12); }
.navbar { height: 82px; position: relative; }
.navbar .logo { align-items: center; display: inline-flex; flex: 0 0 auto; }
.navbar .logo img { height: 38px; width: auto; }
.navbar > .nav-links { gap: 35px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.navbar > .nav-links a { color: #9da6bc; font-size: 13px; font-weight: 700; }
.navbar > .nav-links a:hover { color: #eef1fa; }
.navbar .nav-actions { gap: 24px; }
.navbar .nav-actions > a { color: #f1f2f7; font-size: 14px; }
.navbar .nav-actions .button-main { border-radius: 11px; box-shadow: 0 12px 28px rgba(109,74,255,.34), inset 0 1px rgba(255,255,255,.25); min-width: 134px; padding: 14px 18px; }

@media (max-width: 1060px) {
  .navbar > .nav-links { gap: 22px; }
  .navbar > .nav-links a { font-size: 12px; }
}

@media (max-width: 980px) {
  .navbar > .nav-links { display: none; transform: none; }
  .navbar > .nav-links.open { background: #202b4c; border: 1px solid #334061; border-radius: 13px; display: flex; flex-direction: column; gap: 0; left: 24px; padding: 8px; position: absolute; right: 24px; top: 72px; white-space: normal; }
}

@media (max-width: 760px) {
  .bonus-bar .shell { height: 40px; min-height: 40px; }
  .navbar { height: 72px; }
  .navbar .logo img { height: 32px; }
}

@media (max-width: 480px) {
  .live-payout-label { font-size: 10px; padding-inline: 12px; }
  .live-payout-track { gap: 28px; }
  .survey-banner { flex-basis: 100%; height: 85px; }
}

/* Authentication */
.auth-page { background: #090e1f; color: white; min-height: 100vh; overflow: hidden; position: relative; text-transform: none; }
.auth-backdrop, .auth-grid { inset: 0; pointer-events: none; position: absolute; }
.auth-backdrop { overflow: hidden; }
.auth-grid { 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: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.auth-orb { border-radius: 50%; filter: blur(8px); position: absolute; }
.auth-orb-one { background: rgba(118,89,245,.18); height: 720px; right: -260px; top: -280px; width: 720px; }
.auth-orb-two { background: rgba(77,229,178,.08); bottom: -350px; height: 700px; left: -280px; width: 700px; }
.auth-header { background: rgba(9,14,31,.72); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(18px); position: relative; z-index: 3; }
.auth-header-inner { align-items: center; display: flex; height: 82px; justify-content: space-between; margin-inline: auto; width: min(1180px, calc(100% - 48px)); }
.auth-header-action { align-items: center; color: #8f99ae; display: flex; font-size: 13px; gap: 16px; }
.auth-ghost-button { background: rgba(255,255,255,.04); border: 1px solid #343c52; border-radius: 10px; color: white; font-size: 13px; font-weight: 800; padding: 10px 15px; }
.auth-layout { align-items: center; display: grid; gap: 105px; grid-template-columns: 1fr 480px; margin-inline: auto; min-height: calc(100vh - 82px); padding-block: 60px; position: relative; width: min(1080px, calc(100% - 48px)); z-index: 2; }
.auth-story { padding-bottom: 20px; }
.auth-story-copy h1 { font-family: 'Manrope'; font-size: clamp(48px, 5vw, 70px); letter-spacing: -.055em; line-height: 1.02; margin: 0; max-width: 610px; }
.auth-story-copy h1 span { background: linear-gradient(90deg, #4de5b2, #d8ff7d); background-clip: text; color: transparent; }
.auth-story-copy > p:last-child { color: #9aa4b9; font-size: 17px; line-height: 1.75; margin: 24px 0 30px; max-width: 580px; }
.auth-reward-card { align-items: center; backdrop-filter: blur(14px); background: linear-gradient(135deg, rgba(32,40,66,.9), rgba(20,27,47,.86)); border: 1px solid #303950; border-radius: 17px; box-shadow: 0 20px 50px rgba(0,0,0,.18); display: flex; gap: 14px; max-width: 480px; padding: 16px; }
.auth-reward-icon { align-items: center; background: linear-gradient(135deg, #7659f5, #4e35bd); border-radius: 12px; color: #d8ff7d; display: flex; flex: 0 0 auto; height: 48px; justify-content: center; width: 48px; }
.auth-reward-card > div:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.auth-reward-card small { color: #8f99af; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.auth-reward-card strong { font-family: 'Manrope'; font-size: 17px; }
.auth-reward-card > span { align-items: center; color: #6ee9c1; display: flex; font-size: 10px; font-weight: 800; gap: 5px; }
.auth-benefits { display: flex; flex-wrap: wrap; gap: 18px; margin: 25px 0 35px; }
.auth-benefits span { align-items: center; color: #a2acc0; display: flex; font-size: 12px; font-weight: 700; gap: 6px; }
.auth-benefits svg { color: #4de5b2; }
.auth-proof { align-items: center; border-top: 1px solid #252d42; display: flex; gap: 14px; max-width: 480px; padding-top: 27px; }
.auth-avatars { display: flex; }
.auth-avatars img { background: #26304a; border: 3px solid #0d1324; border-radius: 50%; height: 38px; margin-left: -10px; object-fit: cover; width: 38px; }
.auth-avatars img:first-child { margin-left: 0; }
.auth-proof > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.auth-proof strong { font-size: 12px; }
.auth-proof span { color: #7e899f; font-size: 10px; }
.auth-panel-wrap { width: 100%; }
.auth-panel { background: linear-gradient(145deg, rgba(26,32,52,.98), rgba(18,23,39,.98)); border: 1px solid #30384e; border-radius: 24px; box-shadow: 0 40px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.035); padding: 34px; }
.auth-panel-heading { align-items: flex-start; display: flex; gap: 15px; margin-bottom: 27px; }
.auth-panel-icon { align-items: center; background: rgba(118,89,245,.16); border: 1px solid rgba(143,119,245,.24); border-radius: 12px; color: #a896ff; display: flex; flex: 0 0 auto; height: 45px; justify-content: center; width: 45px; }
.auth-panel-heading .eyebrow, .auth-success .eyebrow { color: #67e8be; font-size: 10px; margin: 1px 0 7px; }
.auth-panel-heading h2, .auth-success h2 { font-family: 'Manrope'; font-size: 28px; letter-spacing: -.035em; margin: 0; }
.auth-panel-heading > div > p:last-child { color: #8e98ae; font-size: 12px; margin: 6px 0 0; }
.auth-form { display: grid; gap: 18px; }
.auth-field { display: grid; gap: 8px; }
.auth-field > span { color: #c4cad8; font-size: 11px; font-weight: 700; }
.auth-field > div { align-items: center; background: #111727; border: 1px solid #30384c; border-radius: 11px; color: #66728b; display: flex; min-height: 50px; padding: 0 14px; transition: border-color .2s, box-shadow .2s; }
.auth-field > div:focus-within { border-color: #7659f5; box-shadow: 0 0 0 3px rgba(118,89,245,.12); color: #9c88f7; }
.auth-field input { background: transparent; border: 0; color: white; flex: 1; font-size: 13px; min-width: 0; outline: 0; padding: 14px 11px; }
.auth-field input::placeholder { color: #59647b; }
.auth-country-field > div { cursor: not-allowed; }
.auth-country-field > div:focus-within { border-color: #30384c; box-shadow: none; color: #66728b; }
.auth-country-field input { cursor: not-allowed; }
.auth-country-field > small { color: #66728b; font-size: 9px; margin-top: -2px; }
.country-flag { align-items: center; background: linear-gradient(145deg, #ffffff, #dce2f2); border: 2px solid #8e78f5; border-radius: 9px; box-shadow: 0 4px 0 #4c399e, 0 7px 14px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.9); display: flex; flex: 0 0 auto; height: 30px; justify-content: center; overflow: hidden; position: relative; transform: rotate(-2deg); width: 38px; }
.country-flag::after { background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 45%); content: ''; inset: 0; pointer-events: none; position: absolute; }
.country-flag img { height: 100%; inset: 0; object-fit: cover; position: absolute; transform: scale(1.08); width: 100%; }
.country-flag > span { filter: saturate(1.2); font-size: 18px; line-height: 1; transform: rotate(2deg); }
.country-flag.detecting { animation: flagBounce 1.4s ease-in-out infinite; border-color: #6c768e; box-shadow: 0 4px 0 #343b50, 0 7px 14px rgba(0,0,0,.22); }
.country-flag.error { filter: grayscale(.6); opacity: .7; }
@keyframes flagBounce { 50% { transform: rotate(2deg) translateY(-2px); } }
.country-lock { align-items: center; color: #66728b; display: flex; flex: 0 0 auto; }
.password-toggle { align-items: center; background: transparent; border: 0; color: #778299; cursor: pointer; display: flex; padding: 6px; }
.password-strength { align-items: center; display: flex; gap: 12px; margin-top: -8px; }
.password-strength > div { display: grid; flex: 1; gap: 5px; grid-template-columns: repeat(4, 1fr); }
.password-strength i { background: #30384b; border-radius: 10px; height: 3px; }
.password-strength i.active { background: linear-gradient(90deg, #7659f5, #4de5b2); }
.password-strength span { color: #78849c; font-size: 9px; }
.auth-form-options { align-items: center; display: flex; justify-content: space-between; }
.auth-checkbox { align-items: center; color: #8e98ad; display: flex; font-size: 10px; gap: 8px; line-height: 1.5; }
.auth-checkbox input { accent-color: #7659f5; height: 15px; width: 15px; }
.auth-checkbox a, .auth-text-button, .auth-switch button { color: #8d76f5; font-weight: 800; }
.auth-text-button, .auth-switch button { background: transparent; border: 0; cursor: pointer; font-size: 10px; padding: 0; }
.auth-inline-message { align-items: center; background: rgba(77,229,178,.08); border: 1px solid rgba(77,229,178,.15); border-radius: 9px; color: #79ddbd; display: flex; font-size: 10px; gap: 7px; margin: -7px 0 0; padding: 9px 11px; }
.auth-submit { border-radius: 11px; font-size: 13px; min-height: 50px; width: 100%; }
.auth-divider { align-items: center; color: #626d84; display: flex; font-size: 9px; gap: 12px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { background: #2c3448; content: ''; flex: 1; height: 1px; }
.auth-social-button { background: #20273a; border: 1px solid #343d54; border-radius: 11px; color: #dce1eb; font-size: 12px; font-weight: 800; min-height: 48px; width: 100%; }
.auth-social-button b { align-items: center; background: white; border-radius: 50%; color: #3868df; display: flex; font-size: 11px; height: 20px; justify-content: center; width: 20px; }
.auth-switch { color: #818ca2; font-size: 11px; margin: 23px 0 0; text-align: center; }
.auth-switch button { font-size: inherit; margin-left: 4px; }
.auth-security { align-items: center; color: #68748b; display: flex; font-size: 9px; gap: 6px; justify-content: center; margin: 14px 0 0; }
.auth-security svg { color: #4ab993; }
.auth-success { align-items: center; display: flex; flex-direction: column; min-height: 430px; justify-content: center; text-align: center; }
.auth-success > span { align-items: center; background: rgba(77,229,178,.12); border: 1px solid rgba(77,229,178,.24); border-radius: 50%; color: #4de5b2; display: flex; height: 70px; justify-content: center; margin-bottom: 24px; width: 70px; }
.auth-success > p:not(.eyebrow) { color: #8e98ae; font-size: 13px; line-height: 1.7; margin: 14px auto 25px; max-width: 330px; }

@media (max-width: 900px) {
  .auth-layout { gap: 45px; grid-template-columns: .85fr 1fr; }
  .auth-story-copy h1 { font-size: 48px; }
  .auth-benefits { gap: 12px; }
}

@media (max-width: 760px) {
  .auth-header-inner { height: 72px; width: min(100% - 34px, 600px); }
  .auth-header-action > span { display: none; }
  .auth-layout { display: block; min-height: calc(100vh - 72px); padding-block: 35px 55px; width: min(100% - 34px, 500px); }
  .auth-story { padding: 0; }
  .auth-story-copy h1 { font-size: 40px; }
  .auth-story-copy > p:last-child { font-size: 14px; margin-bottom: 24px; }
  .auth-story .auth-reward-card, .auth-story .auth-benefits, .auth-story .auth-proof { display: none; }
  .auth-panel-wrap { margin-top: 30px; }
}

@media (max-width: 480px) {
  .auth-header-action .auth-ghost-button { font-size: 11px; padding: 9px 11px; }
  .auth-panel { border-radius: 19px; padding: 24px 20px; }
  .auth-panel-heading { gap: 11px; }
  .auth-panel-icon { height: 40px; width: 40px; }
  .auth-panel-heading h2 { font-size: 24px; }
  .auth-form-options { align-items: flex-start; gap: 12px; }
}

/* Member dashboard */
.dashboard-page { --dash-bg: #080f20; --dash-panel: #0d1a2e; --dash-panel-2: #111f3e; --dash-border: #213a58; --dash-muted: #8494ad; background: radial-gradient(circle at 38% 0, rgba(36,83,151,.18), transparent 24%), var(--dash-bg); color: #f7f9ff; display: flex; min-height: 100vh; text-transform: none; }
.dashboard-page button { cursor: pointer; }
.dashboard-sidebar { background: #071829; border-right: 1px solid #142b42; display: flex; flex: 0 0 226px; flex-direction: column; min-height: 100vh; padding: 31px 16px 22px; position: fixed; inset: 0 auto 0 0; z-index: 30; width: 226px; }
.dashboard-logo { display: block; padding: 0 9px 34px; }
.dashboard-logo img { display: block; height: 31px; object-fit: contain; width: auto; }
.dashboard-logo span { color: #8ba1bb; display: block; font-size: 9px; font-weight: 700; line-height: 1.35; margin: 9px 0 0 44px; }
.dashboard-nav { display: grid; gap: 5px; }
.dashboard-nav button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 11px; color: #90a5c1; display: flex; font-size: 13px; font-weight: 700; gap: 13px; padding: 12px 13px; text-align: left; transition: .2s ease; width: 100%; }
.dashboard-nav button:hover { background: rgba(255,255,255,.035); color: white; }
.dashboard-nav button.active { background: linear-gradient(90deg, rgba(77,229,178,.13), rgba(77,229,178,.035)); border-color: rgba(77,229,178,.13); color: #5be8bb; }
.dashboard-language { align-items: center; background: rgba(255,255,255,.025); border: 1px solid #1d344a; border-radius: 11px; color: #91a5bf; display: flex; gap: 10px; margin-top: auto; padding: 10px 12px; text-align: left; width: 100%; }
.dashboard-language > span { display: flex; flex: 1; flex-direction: column; font-size: 11px; font-weight: 800; gap: 2px; }
.dashboard-language small { color: #596f88; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.dashboard-language > svg:last-child { transform: rotate(90deg); }
.dashboard-logout { align-items: center; background: rgba(255,103,134,.08); border: 1px solid rgba(255,103,134,.24); border-radius: 11px; color: #ff93a7; display: flex; font-size: 12px; font-weight: 800; gap: 9px; justify-content: center; margin-top: 9px; padding: 12px; }
.dashboard-shell { margin-left: 226px; min-height: 100vh; width: calc(100% - 226px); }
.dashboard-topbar { align-items: center; background: rgba(7,18,34,.88); backdrop-filter: blur(18px); border-bottom: 1px solid #172d45; display: flex; height: 70px; justify-content: flex-end; padding: 0 32px; position: sticky; top: 0; z-index: 20; }
.dashboard-account { align-items: center; display: flex; gap: 13px; }
.points-pill { align-items: center; background: #0b2137; border: 1px solid #244766; border-radius: 12px; color: white; display: flex; font-size: 11px; font-weight: 800; gap: 8px; min-height: 39px; padding: 5px 12px; }
.points-pill i { align-items: center; background: #ffad1f; border-radius: 50%; color: white; display: flex; height: 27px; justify-content: center; width: 27px; }
.dashboard-email { color: #a2aec1; font-size: 12px; }
.dashboard-account > img { background: #101a2e; border: 2px solid #8062f4; border-radius: 50%; height: 38px; object-fit: cover; width: 38px; }
.dashboard-menu, .dashboard-mobile-brand { display: none; }
.dashboard-content { margin: 0 auto; max-width: 1370px; padding: 34px 32px 40px; }
.dashboard-welcome { align-items: center; display: flex; justify-content: space-between; margin-bottom: 25px; }
.dashboard-kicker { color: #55dfb5 !important; font-size: 10px !important; font-weight: 800; letter-spacing: .12em; margin-bottom: 8px !important; text-transform: uppercase; }
.dashboard-welcome h1 { font-family: 'Manrope'; font-size: clamp(34px, 3vw, 48px); letter-spacing: -.045em; line-height: 1; margin: 0; }
.dashboard-welcome p { color: #8c9db6; font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
.dashboard-welcome > button, .featured-footer button { align-items: center; background: linear-gradient(135deg, #8062f5, #6040db); border: 1px solid rgba(255,255,255,.16); border-radius: 11px; box-shadow: 0 12px 32px rgba(103,66,229,.28); color: white; display: flex; font-size: 11px; font-weight: 800; gap: 9px; padding: 13px 17px; }
.dashboard-stats { display: grid; gap: 16px; grid-template-columns: 1.25fr .8fr .9fr; margin-bottom: 28px; }
.dashboard-stats article { border: 1px solid var(--dash-border); border-radius: 17px; min-height: 176px; padding: 18px; position: relative; }
.balance-card { background: linear-gradient(120deg, #105c4d, #0a3447 78%); border-color: #168572 !important; }
.progress-card { background: #0b1930; }
.lifetime-card { background: linear-gradient(135deg, #0b4c7d, #172a66); border-color: #2778ac !important; }
.stat-card-head, .tier-heading { align-items: center; display: flex; gap: 12px; }
.stat-card-head > strong { font-size: 11px; }
.stat-icon { align-items: center; background: linear-gradient(135deg, #22d4a9, #58ebbd); border-radius: 12px; color: #07513d; display: flex; flex: 0 0 auto; height: 44px; justify-content: center; width: 44px; }
.progress-card .stat-icon { background: rgba(255,130,56,.12); color: #ff7c35; }
.lifetime-card .stat-icon { background: linear-gradient(135deg, #1da3ed, #52cef6); color: white; }
.stat-value { margin-top: 21px; }
.stat-value strong { font-family: 'Manrope'; font-size: 37px; letter-spacing: -.05em; line-height: 1; }
.balance-card > button { align-items: center; background: #28d5a9; border: 0; border-radius: 10px; bottom: 17px; color: #05251d; display: flex; font-size: 10px; font-weight: 900; gap: 8px; left: 18px; padding: 10px 14px; position: absolute; }
.tier-heading strong { font-family: 'Manrope'; font-size: 15px; }
.tier-heading p { color: #8fa0b8; font-size: 9px; line-height: 1.45; margin: 4px 0 0; }
.tier-meta { align-items: center; display: flex; justify-content: space-between; margin-top: 13px; }
.tier-meta span { color: #778ba6; font-size: 8px; }
.tier-meta b { color: #b8a9ff; }
.tier-meta > strong { color: #a996ff; font-size: 9px; }
.dashboard-progress { background: #193a5a; border-radius: 10px; height: 8px; margin-top: 7px; overflow: hidden; }
.dashboard-progress i { background: linear-gradient(90deg, #49e4b8, #8f73f6); border-radius: inherit; display: block; height: 100%; min-width: 2px; }
.tier-footer { color: #a1aec0; display: flex; font-size: 8px; justify-content: space-between; margin-top: 9px; }
.tier-footer b { color: white; }
.lifetime-card > p { bottom: 18px; color: #b3c0d2; font-size: 8px; left: 18px; margin: 0; position: absolute; }
.dashboard-main-grid { align-items: start; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 285px; }
.dashboard-section-head { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 14px; }
.dashboard-section-head h2 { font-family: 'Manrope'; font-size: 20px; letter-spacing: -.025em; margin: 0; }
.dashboard-section-head p { color: #8190a8; font-size: 11px; margin: 5px 0 0; }
.dashboard-section-head > button { align-items: center; background: transparent; border: 0; color: #52e2b8; display: flex; font-size: 11px; font-weight: 800; gap: 7px; }
.featured-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.featured-card { background: linear-gradient(145deg, #111e3f, #0d1831); border: 1px solid #29415f; border-radius: 16px; display: flex; flex-direction: column; min-height: 420px; overflow: hidden; transition: transform .25s, border-color .25s; }
.featured-card:hover { border-color: #6951d8; transform: translateY(-4px); }
.featured-art { height: 178px; overflow: hidden; position: relative; }
.featured-art::after { display: none; }
.featured-art img { height: 100%; object-fit: cover; width: 100%; }
.featured-card.blue .featured-art img, .featured-card.cyan .featured-art img { object-position: center; }
.featured-copy { flex: 1; padding: 0 16px 14px; }
.featured-copy h3 { font-family: 'Manrope'; font-size: 17px; margin: 0 0 7px; }
.featured-copy > p { color: #a6b2c5; font-size: 10px; line-height: 1.55; margin: 0; min-height: 46px; }
.featured-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
.featured-tags span { background: #0a2940; border: 1px solid #20516c; border-radius: 20px; color: #b7d3e0; font-size: 8px; font-weight: 700; padding: 5px 7px; }
.featured-footer { align-items: center; border-top: 1px solid #263956; display: flex; justify-content: space-between; padding: 12px 16px; }
.featured-footer > div { display: flex; flex-direction: column; gap: 3px; }
.featured-footer strong { color: #54e4ba; font-size: 10px; }
.featured-footer small { color: #728199; font-size: 7px; }
.featured-footer button { border-radius: 10px; box-shadow: none; font-size: 9px; padding: 10px 12px; }
.recent-activity { background: #0d1b2f; border: 1px solid #243b53; border-radius: 17px; min-height: 360px; overflow: hidden; position: sticky; top: 86px; }
.recent-heading { align-items: center; border-bottom: 1px solid #263c54; display: flex; justify-content: space-between; padding: 17px; }
.recent-heading span { align-items: center; display: flex; font-family: 'Manrope'; font-size: 14px; font-weight: 800; gap: 8px; }
.recent-heading svg { color: #5ee5bc; }
.recent-heading i { background: #53e3b8; border-radius: 50%; box-shadow: 0 0 12px #43d8ac; height: 6px; width: 6px; }
.recent-empty { align-items: center; display: flex; flex-direction: column; padding: 32px 22px; text-align: center; }
.recent-empty > span { align-items: center; background: rgba(118,89,245,.12); border: 1px solid rgba(137,111,244,.24); border-radius: 50%; color: #9b85f8; display: flex; height: 58px; justify-content: center; margin-bottom: 15px; width: 58px; }
.recent-empty strong { font-size: 12px; }
.recent-empty p { color: #7f8da3; font-size: 10px; line-height: 1.55; margin: 8px 0 16px; }
.recent-empty button { background: transparent; border: 1px solid #3a4f68; border-radius: 9px; color: #d5dbea; font-size: 9px; font-weight: 800; padding: 9px 13px; }
.recent-tip { align-items: flex-start; background: rgba(77,229,178,.055); border-top: 1px solid rgba(77,229,178,.12); display: flex; gap: 10px; margin-top: 4px; padding: 15px; }
.recent-tip > i { color: #ff9a50; }
.recent-tip div { display: flex; flex-direction: column; gap: 4px; }
.recent-tip strong { color: #70e7c2; font-size: 9px; text-transform: uppercase; }
.recent-tip p { color: #8492a8; font-size: 9px; line-height: 1.45; margin: 0; }
.dashboard-footer { border-top: 1px solid #182d43; color: #6c7c93; font-size: 9px; margin-top: 20px; padding: 18px 32px; text-align: center; }
.dashboard-overlay { display: none; }
.dashboard-notice { align-items: center; animation: noticeIn .3s ease; background: #192640; border: 1px solid #42516d; border-radius: 12px; bottom: 24px; box-shadow: 0 16px 40px rgba(0,0,0,.4); color: white; display: flex; font-size: 11px; gap: 9px; max-width: calc(100% - 32px); padding: 13px 14px; position: fixed; right: 24px; z-index: 80; }
.dashboard-notice svg { color: #59e5ba; }
.dashboard-notice span { color: #8694aa; font-size: 17px; margin-left: 10px; }
@keyframes noticeIn { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 1100px) {
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .recent-activity { display: grid; grid-template-columns: auto 1fr 1fr; min-height: 0; position: static; }
  .recent-heading { border-bottom: 0; border-right: 1px solid #263c54; }
  .recent-empty { flex-direction: row; gap: 12px; padding: 18px; text-align: left; }
  .recent-empty > span { flex: 0 0 auto; margin: 0; }
  .recent-empty p { margin: 4px 0; }
  .recent-empty button { margin-left: auto; white-space: nowrap; }
  .recent-tip { align-items: center; border-left: 1px solid rgba(77,229,178,.12); border-top: 0; margin: 0; }
}

@media (max-width: 860px) {
  .dashboard-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .dashboard-sidebar.open { transform: translateX(0); }
  .dashboard-shell { margin-left: 0; width: 100%; }
  .dashboard-topbar { justify-content: space-between; padding: 0 20px; }
  .dashboard-menu { align-items: center; background: transparent; border: 0; color: white; display: flex; }
  .dashboard-mobile-brand { color: #5be5ba; display: block; font-family: 'Manrope'; font-size: 17px; font-weight: 800; }
  .dashboard-email { display: none; }
  .dashboard-overlay { background: rgba(1,6,14,.62); border: 0; display: block; inset: 0; position: fixed; z-index: 25; }
  .dashboard-stats { grid-template-columns: 1fr 1fr; }
  .balance-card { grid-column: 1 / -1; }
}

@media (max-width: 650px) {
  .dashboard-content { padding: 25px 16px 32px; }
  .dashboard-welcome { align-items: flex-start; gap: 18px; }
  .dashboard-welcome h1 { font-size: 32px; }
  .dashboard-welcome > button { padding: 11px; }
  .dashboard-welcome > button svg { display: none; }
  .dashboard-stats, .featured-grid { grid-template-columns: 1fr; }
  .balance-card { grid-column: auto; }
  .dashboard-stats article { min-height: 165px; }
  .recent-activity { display: block; }
  .recent-heading { border-bottom: 1px solid #263c54; border-right: 0; }
  .recent-tip { border-left: 0; border-top: 1px solid rgba(77,229,178,.12); }
  .featured-card { min-height: 400px; }
}

@media (max-width: 440px) {
  .dashboard-topbar { padding-inline: 14px; }
  .dashboard-mobile-brand { display: none; }
  .dashboard-account { gap: 7px; }
  .points-pill { padding-inline: 9px; }
  .dashboard-welcome > button { font-size: 0; }
  .dashboard-welcome > button::after { content: 'Explorer'; font-size: 10px; }
  .dashboard-section-head > button { font-size: 0; }
  .dashboard-section-head > button::before { content: 'Tout voir'; font-size: 10px; }
}

/* Member dashboard — homepage visual language */
.dashboard-page { --dash-bg: #f5f4ef; --dash-panel: #ffffff; --dash-panel-2: #f0eef8; --dash-border: #e2e0e7; --dash-muted: #747b8d; background: var(--dash-bg); color: #151b2d; font-family: 'DM Sans', sans-serif; }
.dashboard-sidebar { background: radial-gradient(circle at 15% 8%, rgba(118,89,245,.18), transparent 26%), #090e1f; border-right: 1px solid rgba(255,255,255,.08); box-shadow: 18px 0 45px rgba(20,24,45,.08); padding: 31px 18px 22px; width: 244px; }
.dashboard-logo { border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 22px; padding: 0 8px 25px; }
.dashboard-logo img { height: 34px; }
.dashboard-logo span { color: #747e98; font-size: 8px; letter-spacing: .04em; margin: 8px 0 0 45px; text-transform: uppercase; }
.dashboard-nav { gap: 6px; }
.dashboard-nav button { border-radius: 10px; color: #8d97ad; font-size: 12px; gap: 12px; min-height: 44px; padding: 10px 12px; }
.dashboard-nav button:hover { background: rgba(255,255,255,.055); color: white; transform: translateX(2px); }
.dashboard-nav button.active { background: #d8ff7d; border-color: #d8ff7d; box-shadow: 0 10px 25px rgba(216,255,125,.14); color: #11182b; }
.dashboard-nav button.active svg { color: #536d18; }
.dashboard-language { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #b6bfd0; }
.dashboard-language small { color: #646f85; }
.dashboard-logout { background: transparent; border-color: rgba(255,255,255,.1); color: #939eb2; }
.dashboard-logout:hover { border-color: rgba(255,130,147,.32); color: #ff8ba0; }
.dashboard-shell { margin-left: 244px; width: calc(100% - 244px); }
.dashboard-topbar { background: rgba(245,244,239,.88); border-bottom: 1px solid #e4e2dc; height: 76px; padding: 0 38px; }
.points-pill { background: white; border-color: #dddae6; box-shadow: 0 6px 20px rgba(30,36,63,.05); color: #171d30; min-height: 42px; }
.points-pill i { background: #d8ff7d; color: #2c3c0e; }
.dashboard-email { color: #656d7e; font-size: 11px; font-weight: 600; }
.dashboard-account > img { border: 3px solid white; box-shadow: 0 0 0 2px #7659f5, 0 6px 16px rgba(30,36,63,.13); height: 40px; width: 40px; }
.dashboard-content { max-width: 1420px; padding: 42px 38px 55px; }
.dashboard-welcome { margin-bottom: 31px; }
.dashboard-kicker { align-items: center; color: #7659f5 !important; display: flex; font-size: 9px !important; gap: 7px; letter-spacing: .13em; margin: 0 0 12px !important; text-transform: uppercase; }
.dashboard-kicker > span { background: #7659f5; border-radius: 50%; height: 6px; width: 6px; }
.dashboard-welcome h1 { color: #13192a; font-size: clamp(38px, 4vw, 55px); font-weight: 700; letter-spacing: -.06em; }
.dashboard-welcome h1 > span { color: #7659f5; }
.dashboard-welcome p:not(.dashboard-kicker) { color: #737b8d; font-size: 13px; max-width: 670px; }
.dashboard-welcome > button { background: #090e1f; border: 0; box-shadow: 0 13px 30px rgba(9,14,31,.17); color: white; font-size: 10px; padding: 14px 17px; }
.dashboard-welcome > button:hover { transform: translateY(-2px); }
.dashboard-stats { gap: 18px; grid-template-columns: 1.15fr .92fr .93fr; margin-bottom: 38px; }
.dashboard-stats article { border: 1px solid #e1dfe5; border-radius: 20px; box-shadow: 0 12px 38px rgba(31,37,63,.055); min-height: 190px; padding: 20px; }
.balance-card { background: radial-gradient(circle at 90% 10%, rgba(216,255,125,.2), transparent 35%), linear-gradient(145deg, #7659f5, #5638ca); border-color: rgba(88,57,203,.35) !important; color: white; }
.balance-card::after { border: 1px solid rgba(255,255,255,.1); border-radius: 50%; content: ''; height: 180px; position: absolute; right: -75px; top: -90px; width: 180px; }
.progress-card { background: white; border-color: #e1dfe5 !important; }
.lifetime-card { background: radial-gradient(circle at 85% 15%, rgba(118,89,245,.18), transparent 35%), #0d1428; border-color: #202a42 !important; color: white; }
.stat-card-head > strong { font-family: 'Manrope'; font-size: 12px; }
.stat-icon { background: rgba(255,255,255,.15); color: #d8ff7d; }
.progress-card .stat-icon { background: #f1edff; color: #7659f5; }
.lifetime-card .stat-icon { background: rgba(216,255,125,.1); color: #d8ff7d; }
.stat-value strong { font-size: 42px; }
.balance-card > button { background: #d8ff7d; border-radius: 9px; color: #151d08; }
.tier-heading strong { color: #171d30; }
.tier-heading p { color: #7d8494; }
.tier-meta span { color: #858c9b; }
.tier-meta b, .tier-meta > strong { color: #7659f5; }
.dashboard-progress { background: #eceaf0; }
.dashboard-progress i { background: linear-gradient(90deg, #7659f5, #9d82ff); }
.tier-footer { color: #858b99; }
.tier-footer b { color: #282e3c; }
.lifetime-card > p { color: #7f8aa1; }
.dashboard-main-grid { gap: 22px; grid-template-columns: minmax(0, 1fr) 300px; }
.dashboard-section-head { margin-bottom: 18px; }
.dashboard-section-head h2 { color: #171d2e; font-size: 25px; letter-spacing: -.045em; }
.dashboard-section-head p:not(.dashboard-kicker) { color: #7a8191; font-size: 11px; }
.dashboard-section-head > button { color: #7659f5; }
.featured-grid { gap: 18px; }
.featured-card { background: white; border: 1px solid #e1dfe5; border-radius: 19px; box-shadow: 0 10px 35px rgba(30,36,62,.05); min-height: 425px; }
.featured-card:hover { border-color: rgba(118,89,245,.35); box-shadow: 0 24px 55px rgba(36,43,74,.12); transform: translateY(-6px); }
.featured-art { background: #11182b; height: 185px; }
.featured-copy { padding: 18px 18px 16px; }
.featured-copy h3 { color: #171d2e; font-size: 18px; }
.featured-copy > p { color: #71798b; font-size: 10px; }
.featured-tags span { background: #f1eff8; border-color: #dfd9f3; color: #655888; }
.featured-footer { border-top-color: #ebe9ee; padding: 13px 18px; }
.featured-footer strong { color: #7659f5; }
.featured-footer small { color: #989eaa; }
.featured-footer button { background: #090e1f; border: 0; box-shadow: none; color: white; }
.recent-activity { background: white; border: 1px solid #e1dfe5; border-radius: 19px; box-shadow: 0 10px 35px rgba(30,36,62,.05); color: #171d2e; top: 95px; }
.recent-heading { border-bottom-color: #ebe9ee; }
.recent-heading svg { color: #7659f5; }
.recent-heading i { background: #78ba35; box-shadow: 0 0 12px rgba(120,186,53,.4); }
.recent-empty > span { background: #f1edff; border-color: #dfd6ff; color: #7659f5; }
.recent-empty p { color: #828999; }
.recent-empty button { border-color: #dcd9e3; color: #343a49; }
.recent-tip { background: #f5f8eb; border-top-color: #e0e8ca; }
.recent-tip strong { color: #617a26; }
.recent-tip p { color: #7f8674; }
.dashboard-footer { border-top-color: #e1dfda; color: #9b9b97; }
.dashboard-notice { background: #090e1f; border-color: #303950; }

@media (max-width: 1100px) {
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .recent-activity { background: white; }
}

@media (max-width: 860px) {
  .dashboard-sidebar { transform: translateX(-100%); }
  .dashboard-sidebar.open { transform: translateX(0); }
  .dashboard-shell { margin-left: 0; width: 100%; }
  .dashboard-topbar { padding-inline: 22px; }
  .dashboard-menu { color: #171d2e; }
  .dashboard-mobile-brand { color: #171d2e; }
}

@media (max-width: 650px) {
  .dashboard-content { padding: 29px 16px 38px; }
  .dashboard-welcome h1 { font-size: 36px; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-stats article { min-height: 180px; }
  .featured-grid { grid-template-columns: 1fr; }
}

/* Dashboard light refinement */
.dashboard-page { text-transform: capitalize; }
.dashboard-sidebar { background: #fff; border-right: 1px solid #e3e1e8; box-shadow: 12px 0 35px rgba(30,36,62,.045); color: #171d2e; width: 226px; }
.dashboard-logo { background: linear-gradient(135deg, #7659f5, #5638ca); border: 0; border-radius: 14px; box-shadow: 0 12px 28px rgba(118,89,245,.18); margin-bottom: 22px; padding: 16px 14px 13px; }
.dashboard-logo img { height: 30px; max-width: 155px; }
.dashboard-logo span { color: rgba(255,255,255,.62); letter-spacing: .05em; margin-left: 42px; }
.dashboard-nav button { color: #747b8d; }
.dashboard-nav button:hover { background: #f5f2fc; color: #5f45d1; }
.dashboard-nav button.active { background: #7659f5; border-color: #7659f5; box-shadow: 0 10px 24px rgba(118,89,245,.2); color: #fff; }
.dashboard-nav button.active svg { color: #d8ff7d; }
.dashboard-language { background: #f7f6f9; border-color: #e5e2ea; color: #5f6677; }
.dashboard-language small { color: #9a9fac; }
.dashboard-logout { background: #fff; border-color: #e5e2ea; color: #7a8191; }
.dashboard-logout:hover { background: #fff5f6; border-color: #f1cbd2; color: #d85670; }
.dashboard-shell { margin-left: 226px; width: calc(100% - 226px); }
.dashboard-topbar { background: rgba(250,249,246,.93); }
.dashboard-email { text-transform: none; }
.dashboard-welcome > button { background: #7659f5; box-shadow: 0 12px 26px rgba(118,89,245,.22); }
.dashboard-stats { gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-stats article { border-radius: 14px; box-shadow: 0 8px 25px rgba(30,36,62,.05); height: 108px; min-height: 108px; padding: 13px 15px; }
.balance-card { background: linear-gradient(135deg, #f2ffe0, #e8f8e8); border-color: #d8e9c4 !important; color: #171d2e; }
.balance-card::after { display: none; }
.progress-card { background: linear-gradient(135deg, #f8f6ff, #f0ecff); border-color: #e1daf9 !important; }
.lifetime-card { background: linear-gradient(135deg, #edf8ff, #edf0ff); border-color: #d9e5f3 !important; color: #171d2e; }
.stat-card-head, .tier-heading { gap: 9px; }
.stat-icon { border-radius: 9px; height: 32px; width: 32px; }
.balance-card .stat-icon { background: #d8ff7d; color: #405315; }
.progress-card .stat-icon { background: #e5defe; color: #7659f5; }
.lifetime-card .stat-icon { background: #dceeff; color: #3979ba; }
.stat-card-head > strong, .tier-heading strong { color: #33394a; font-size: 10px; }
.tier-heading p { font-size: 7px; margin-top: 2px; }
.stat-value { align-items: baseline; display: flex; gap: 5px; margin-top: 8px; }
.stat-value strong { color: #171d2e; font-size: 27px; }
.stat-value span { color: #858b99; font-size: 8px; font-weight: 800; }
.balance-card > button { background: #7659f5; bottom: 13px; color: #fff; font-size: 8px; left: auto; padding: 7px 10px; right: 14px; }
.tier-meta { margin-top: 5px; }
.dashboard-progress { height: 6px; margin-top: 5px; }
.tier-footer { font-size: 7px; margin-top: 4px; }
.lifetime-card > p { bottom: 13px; color: #808899; font-size: 7px; left: auto; right: 15px; }
.featured-footer button { background: #7659f5; }
.featured-art { background: transparent; height: 190px; }
.featured-art { isolation: isolate; }
.featured-art::before { animation: offerwallShine 4.8s ease-in-out infinite; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.22) 46%, transparent 67%); content: ''; inset: 0; pointer-events: none; position: absolute; transform: translateX(-125%); z-index: 2; }
.featured-art img { object-fit: cover; transform: scale(1.015); will-change: transform; }
.featured-card.purple .featured-art img { animation: premiumRewardFloat 5s ease-in-out infinite; }
.featured-card.blue .featured-art img { animation: offersHubSlide 5.8s ease-in-out infinite; }
.featured-card.cyan .featured-art img { animation: surveyPulse 4.6s ease-in-out infinite; }
.featured-card.orange .featured-art img { animation: starterLift 4.2s ease-in-out infinite; }
@keyframes offerwallShine { 46%, 100% { transform: translateX(125%); } }
@keyframes premiumRewardFloat { 50% { transform: scale(1.055) translateY(-5px); } }
@keyframes offersHubSlide { 50% { transform: scale(1.045) translateX(-5px); } }
@keyframes surveyPulse { 50% { filter: saturate(1.12); transform: scale(1.04); } }
@keyframes starterLift { 50% { filter: brightness(1.06); transform: scale(1.05) translateY(-7px); } }
.recent-empty button { background: #7659f5; border-color: #7659f5; color: #fff; }
.dashboard-notice { background: #7659f5; border-color: #927af8; }

@media (max-width: 860px) {
  .dashboard-shell { margin-left: 0; width: 100%; }
}

@media (max-width: 650px) {
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-stats article { height: 108px; min-height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-art::before, .featured-card .featured-art img { animation: none; }
}

/* Global light / dark theme switch */
.theme-toggle { align-items: center; backdrop-filter: blur(16px); background: rgba(255,255,255,.9); border: 1px solid #dedbe5; border-radius: 30px; bottom: 22px; box-shadow: 0 12px 32px rgba(23,29,51,.16); color: #343a49; display: flex; font-size: 9px; font-weight: 800; gap: 8px; padding: 5px 10px 5px 6px; position: fixed; right: 22px; text-transform: uppercase; z-index: 120; }
.theme-toggle-track { background: #ebe8f2; border-radius: 50%; display: block; height: 29px; padding: 3px; width: 29px; }
.theme-toggle-track i { align-items: center; background: #7659f5; border-radius: 50%; color: white; display: flex; height: 23px; justify-content: center; transition: background .25s, color .25s, transform .25s; width: 23px; }
.theme-toggle-track i.dark { background: #d8ff7d; color: #27320f; transform: rotate(180deg); }
.theme-toggle svg { height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 14px; }

html[data-theme='dark'] body { background: #080e1e; color: #eef1f8; }
html[data-theme='dark'] .offers-section,
html[data-theme='dark'] .how-section,
html[data-theme='dark'] .proof-section,
html[data-theme='dark'] .faq-section { color: #f4f6fb; }
html[data-theme='dark'] .offers-section,
html[data-theme='dark'] .how-section,
html[data-theme='dark'] .proof-section { background: #0b1122; }
html[data-theme='dark'] .section-head > p,
html[data-theme='dark'] .apps-heading > p,
html[data-theme='dark'] .steps p,
html[data-theme='dark'] .reviewer small,
html[data-theme='dark'] .faq-copy > p,
html[data-theme='dark'] .offer-copy p { color: #8f9bb2; }
html[data-theme='dark'] .filters { background: #151d31; }
html[data-theme='dark'] .filters button.active { background: #28324a; color: #b6a7ff; }
html[data-theme='dark'] .opportunity,
html[data-theme='dark'] .steps article,
html[data-theme='dark'] .review-grid article,
html[data-theme='dark'] .faq-list article { background: #121a2c; border-color: #2b354b; box-shadow: 0 14px 38px rgba(0,0,0,.2); color: #eef1f8; }
html[data-theme='dark'] .offer-copy > div,
html[data-theme='dark'] .faq-list article,
html[data-theme='dark'] .faq-list article button { border-color: #2a3449; }
html[data-theme='dark'] .milestone-list { background: #0d1425; border-color: #273149 !important; }
html[data-theme='dark'] .milestone-row { border-color: #273149; }
html[data-theme='dark'] .milestone-row i,
html[data-theme='dark'] .milestone-heading { color: #9aa5ba; }
html[data-theme='dark'] .more-card { background: #181d39; }
html[data-theme='dark'] .more-card > span { background: #242b48; }
html[data-theme='dark'] .faq-list article button { color: #eef1f8; }
html[data-theme='dark'] .faq-list article p { color: #909bb0; }
html[data-theme='dark'] .theme-toggle { background: rgba(15,22,39,.92); border-color: #354058; color: #e7eaf2; }
html[data-theme='dark'] .theme-toggle-track { background: #293249; }

html[data-theme='dark'] .dashboard-page { --dash-bg: #090f1e; background: #090f1e; color: #edf0f7; }
html[data-theme='dark'] .dashboard-sidebar { background: #111827; border-color: #293246; box-shadow: 12px 0 35px rgba(0,0,0,.16); color: #edf0f7; }
html[data-theme='dark'] .dashboard-logo { background: linear-gradient(135deg, #7659f5, #4b31b6); }
html[data-theme='dark'] .dashboard-nav button { color: #9aa5b8; }
html[data-theme='dark'] .dashboard-nav button:hover { background: #1b2437; color: #c4b9ff; }
html[data-theme='dark'] .dashboard-nav button.active { color: white; }
html[data-theme='dark'] .dashboard-language,
html[data-theme='dark'] .dashboard-logout { background: #171f30; border-color: #2d374b; color: #adb6c6; }
html[data-theme='dark'] .dashboard-topbar { background: rgba(9,15,30,.9); border-color: #273146; }
html[data-theme='dark'] .points-pill { background: #151e31; border-color: #303b50; color: #f3f5fa; box-shadow: none; }
html[data-theme='dark'] .dashboard-email { color: #9aa4b6; }
html[data-theme='dark'] .dashboard-welcome h1,
html[data-theme='dark'] .dashboard-section-head h2 { color: #f5f6fa; }
html[data-theme='dark'] .dashboard-welcome p:not(.dashboard-kicker),
html[data-theme='dark'] .dashboard-section-head p:not(.dashboard-kicker) { color: #8995aa; }
html[data-theme='dark'] .dashboard-stats article { box-shadow: 0 10px 30px rgba(0,0,0,.16); }
html[data-theme='dark'] .balance-card { background: linear-gradient(135deg, #223524, #182b26); border-color: #344c35 !important; }
html[data-theme='dark'] .progress-card { background: linear-gradient(135deg, #1b1830, #211c3a); border-color: #3a315d !important; }
html[data-theme='dark'] .lifetime-card { background: linear-gradient(135deg, #14283a, #18253f); border-color: #29435c !important; }
html[data-theme='dark'] .stat-card-head > strong,
html[data-theme='dark'] .tier-heading strong,
html[data-theme='dark'] .stat-value strong { color: #f1f3f8; }
html[data-theme='dark'] .dashboard-progress { background: #30354a; }
html[data-theme='dark'] .tier-footer b { color: #e9ecf4; }
html[data-theme='dark'] .featured-card,
html[data-theme='dark'] .recent-activity { background: #121a2b; border-color: #2c364a; box-shadow: 0 12px 35px rgba(0,0,0,.18); color: #edf0f7; }
html[data-theme='dark'] .featured-copy h3 { color: #f2f4f8; }
html[data-theme='dark'] .featured-copy > p,
html[data-theme='dark'] .recent-empty p { color: #8d98ad; }
html[data-theme='dark'] .featured-tags span { background: #211d39; border-color: #3a315b; color: #b9ade0; }
html[data-theme='dark'] .featured-footer,
html[data-theme='dark'] .recent-heading { border-color: #2c364a; }
html[data-theme='dark'] .recent-empty button { background: #7659f5; color: white; }
html[data-theme='dark'] .recent-tip { background: #1a241d; border-color: #34432d; }
html[data-theme='dark'] .dashboard-footer { border-color: #273146; color: #6f7a8f; }

html[data-theme='dark'] .auth-page { background: #070c1a; }

/* Full-site light theme */
html[data-theme='light'] body { background: #f6f5f2; color: #172033; }
html[data-theme='light'] header:not(.auth-header) { background: rgba(255,255,255,.94); border-bottom-color: #e4e2e8; box-shadow: 0 10px 30px rgba(30,36,62,.06); color: #172033; }
html[data-theme='light'] header:not(.auth-header) .logo { background: linear-gradient(135deg, #7659f5, #5638ca); border-radius: 10px; padding: 7px 10px; }
html[data-theme='light'] .navbar > .nav-links a { color: #626a7c; }
html[data-theme='light'] .navbar > .nav-links a:hover,
html[data-theme='light'] .navbar .nav-actions > a,
html[data-theme='light'] .menu-button { color: #171d2e; }
html[data-theme='light'] .hero { background: radial-gradient(circle at 74% 40%, rgba(118,89,245,.13), transparent 29%), linear-gradient(145deg, #f7f6f2, #efedf8); color: #171d2e; }
html[data-theme='light'] .hero::before { background-image: linear-gradient(rgba(50,45,80,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(50,45,80,.04) 1px, transparent 1px); }
html[data-theme='light'] .hero-lead { color: #687184; }
html[data-theme='light'] .hero h1 { text-shadow: none; }
html[data-theme='light'] .hero h1 span { background: linear-gradient(90deg, #7659f5, #4f35bf); background-clip: text; }
html[data-theme='light'] .hero-demo-trigger { color: #343b4c; }
html[data-theme='light'] .play-icon { border-color: #c4c0cd; }
html[data-theme='light'] .hero-trust { border-color: #d9d6df; }
html[data-theme='light'] .hero-trust small { color: #7f8798; }
html[data-theme='light'] .hero-art-ring { border-color: rgba(118,89,245,.16); }
html[data-theme='light'] .hero-chip { background: rgba(255,255,255,.85); border-color: #ddd9e8; box-shadow: 0 18px 40px rgba(40,37,70,.13); color: #171d2e; }
html[data-theme='light'] .hero-chip small { color: #7a8292; }
html[data-theme='light'] .hero-live-pill { background: rgba(255,255,255,.86); border-color: #ddd9e8; color: #687184; }
html[data-theme='light'] .hero-live-pill strong { color: #171d2e; }
html[data-theme='light'] .live-payouts { background: white; border-color: #e4e1e9; color: #172033; }
html[data-theme='light'] .live-payout-track span { color: #697184; }
html[data-theme='light'] .live-payout-track b { color: #252c3c; }
html[data-theme='light'] .ticker { background: linear-gradient(90deg, #ece8ff, #f4f1ff, #ece8ff); border-color: #dcd6f1; color: #5f45d1; }

html[data-theme='light'] .truth-section,
html[data-theme='light'] .offers-section,
html[data-theme='light'] .survey-section,
html[data-theme='light'] .apps-section,
html[data-theme='light'] .referral-section,
html[data-theme='light'] .earning-section,
html[data-theme='light'] .how-section,
html[data-theme='light'] .proof-section,
html[data-theme='light'] .faq-section { background: #f6f5f2; border-color: #e5e2e8; color: #172033; }
html[data-theme='light'] .truth-line { background: #d9d6e0; }
html[data-theme='light'] .truth-row { color: #172033; }
html[data-theme='light'] .truth-node { background: #fff; border-color: #d9d5e2; color: #7a8292; }
html[data-theme='light'] .truth-row article > p,
html[data-theme='light'] .truth-row article > small { color: #747d8f; }
html[data-theme='light'] .truth-visual { background: linear-gradient(145deg, #fff, #f0eef8); border-color: #dedbe5; }
html[data-theme='light'] .truth-row.active .truth-visual { box-shadow: 0 25px 55px rgba(33,39,65,.1); }
html[data-theme='light'] .truth-game-stack img,
html[data-theme='light'] .truth-community i { border-color: #fff; }
html[data-theme='light'] .games-section-head { background: radial-gradient(circle at 18% 20%, rgba(77,229,178,.11), transparent 30%), #fff; border-color: #dfdce5; box-shadow: 0 25px 60px rgba(30,36,62,.08); }
html[data-theme='light'] .games-title-wrap h2,
html[data-theme='light'] .games-proof strong { color: #171d2e; }
html[data-theme='light'] .games-intro > p,
html[data-theme='light'] .games-proof small { color: #717a8c; }
html[data-theme='light'] .games-proof { border-color: #e5e2e8; }
html[data-theme='light'] .opportunity { background: #fff; border-color: #e1dee6; color: #172033; }
html[data-theme='light'] .offer-copy p { color: #70798b; }
html[data-theme='light'] .more-card { background: #efecfb; }

html[data-theme='light'] .survey-card,
html[data-theme='light'] .survey-matcher,
html[data-theme='light'] .app-card,
html[data-theme='light'] .referral-dashboard { background: #fff; border-color: #dfdce5; box-shadow: 0 16px 45px rgba(30,36,62,.07); color: #172033; }
html[data-theme='light'] .survey-card:hover,
html[data-theme='light'] .survey-card.active { background: #f8f6ff; box-shadow: 0 18px 45px rgba(30,36,62,.1); }
html[data-theme='light'] .survey-card-main h3,
html[data-theme='light'] .survey-matcher h3,
html[data-theme='light'] .app-card h3,
html[data-theme='light'] .referral-copy h2 { color: #172033; }
html[data-theme='light'] .survey-meta,
html[data-theme='light'] .survey-payout small,
html[data-theme='light'] .survey-matcher > p,
html[data-theme='light'] .apps-heading > p,
html[data-theme='light'] .app-card > p,
html[data-theme='light'] .referral-copy > p:not(.eyebrow),
html[data-theme='light'] .referral-benefits small { color: #757e90; }
html[data-theme='light'] .survey-payout { border-color: #e2dfe7; }
html[data-theme='light'] .survey-payout strong,
html[data-theme='light'] .app-reward strong { color: #7659f5; }
html[data-theme='light'] .survey-trust,
html[data-theme='light'] .app-reward,
html[data-theme='light'] .referral-steps { border-color: #e1dee6; }
html[data-theme='light'] .survey-trust span { color: #6e7789; }
html[data-theme='light'] .app-status { color: #26956e; }
html[data-theme='light'] .app-card:hover { box-shadow: 0 25px 55px rgba(30,36,62,.11); }
html[data-theme='light'] .app-reward button { background: #eeeafd; color: #7659f5; }
html[data-theme='light'] .referral-dashboard-head > div > span { background: #eeeafd; color: #7659f5; }
html[data-theme='light'] .referral-total > small,
html[data-theme='light'] .referral-dashboard-head small { color: #7a8293; }
html[data-theme='light'] .referral-calculator { background: #f5f3fa; border-color: #e1dee8; }
html[data-theme='light'] .referral-calculator > div:first-child strong { color: #7659f5; }

html[data-theme='light'] .earning-copy h2,
html[data-theme='light'] .earning-copy li strong { color: #172033; }
html[data-theme='light'] .earning-copy > p:not(.eyebrow),
html[data-theme='light'] .earning-copy li small { color: #737d8f; }
html[data-theme='light'] .earning-limit { background: linear-gradient(90deg, #eefbd7, #e7f8ef); border-color: #d7e7c3; }
html[data-theme='light'] .earning-limit strong,
html[data-theme='light'] .earning-limit > svg { color: #5d7621; }
html[data-theme='light'] .earning-limit small { color: #7d8866; }

html[data-theme='light'] .steps article,
html[data-theme='light'] .review-grid article { background: #fff; border-color: #e1dee6; color: #172033; }
html[data-theme='light'] .steps p,
html[data-theme='light'] .reviewer small { color: #727b8d; }
html[data-theme='light'] .rewards-section { background: linear-gradient(135deg, #eeeafd, #f7f5ff 55%, #ebe7fa); color: #172033; }
html[data-theme='light'] .rewards-copy > p:not(.eyebrow),
html[data-theme='light'] .rewards-copy > small { color: #726b8d; }
html[data-theme='light'] .reward-logos span { border: 1px solid #e2dfe8; }
html[data-theme='light'] .impact-section { background: #efedf8; color: #172033; }
html[data-theme='light'] .impact-section > div > p:not(.eyebrow) { color: #747d8f; }
html[data-theme='light'] .faq-list article { background: transparent; border-color: #d8d5df; box-shadow: none; }
html[data-theme='light'] .faq-list button { color: #172033; }
html[data-theme='light'] .faq-list article > div p { color: #727b8d; }
html[data-theme='light'] .final-cta { background: radial-gradient(circle at 50% 0, rgba(118,89,245,.16), transparent 38%), #eeebf8; color: #172033; }
html[data-theme='light'] .final-cta > div > p:not(.eyebrow),
html[data-theme='light'] .final-cta small { color: #737c8e; }
html[data-theme='light'] footer { background: #fff; color: #172033; }
html[data-theme='light'] .footer-grid > div > a,
html[data-theme='light'] .footer-brand p,
html[data-theme='light'] .footer-brand address,
html[data-theme='light'] .footer-bottom { color: #727b8d; }
html[data-theme='light'] .footer-bottom { border-color: #e2dfe7; }
html[data-theme='light'] .footer-grid > div > a:hover { color: #7659f5; }

html[data-theme='light'] .auth-page { background: radial-gradient(circle at 80% 10%, rgba(118,89,245,.12), transparent 28%), #f6f5f2; color: #172033; }
html[data-theme='light'] .auth-grid { background-image: linear-gradient(rgba(50,45,80,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(50,45,80,.04) 1px, transparent 1px); }
html[data-theme='light'] .auth-header { background: rgba(255,255,255,.82); border-color: #e1dee7; }
html[data-theme='light'] .auth-header .logo { background: linear-gradient(135deg, #7659f5, #5638ca); border-radius: 10px; padding: 7px 10px; }
html[data-theme='light'] .auth-header-action { color: #70798a; }
html[data-theme='light'] .auth-ghost-button { background: #fff; border-color: #d8d5df; color: #343a49; }
html[data-theme='light'] .auth-story-copy > p:last-child,
html[data-theme='light'] .auth-benefits span,
html[data-theme='light'] .auth-proof span { color: #727c8e; }
html[data-theme='light'] .auth-reward-card,
html[data-theme='light'] .auth-panel { background: rgba(255,255,255,.95); border-color: #ddd9e4; box-shadow: 0 25px 70px rgba(30,36,62,.12); color: #172033; }
html[data-theme='light'] .auth-proof { border-color: #dedbe4; }
html[data-theme='light'] .auth-avatars img { border-color: #f6f5f2; }
html[data-theme='light'] .auth-panel-heading > div > p:last-child,
html[data-theme='light'] .auth-success > p:not(.eyebrow),
html[data-theme='light'] .auth-switch { color: #737c8e; }
html[data-theme='light'] .auth-field > span { color: #4f5768; }
html[data-theme='light'] .auth-field > div { background: #f7f6fa; border-color: #dcd9e2; color: #8a91a0; }
html[data-theme='light'] .auth-field input { color: #172033; }
html[data-theme='light'] .auth-social-button { background: #f3f1f8; border-color: #dcd8e4; color: #343a49; }
html[data-theme='light'] .auth-divider::before,
html[data-theme='light'] .auth-divider::after { background: #ddd9e3; }
html[data-theme='light'] .auth-checkbox,
html[data-theme='light'] .auth-security { color: #737c8e; }

html[data-theme='light'] .walkthrough-overlay { background: rgba(238,236,244,.78); }
html[data-theme='light'] .walkthrough-modal { background: #f8f7f4; border-color: #dcd9e3; box-shadow: 0 40px 100px rgba(30,36,62,.2); color: #172033; }
html[data-theme='light'] .walkthrough-close { background: #fff; border-color: #d8d5df; color: #5f6778; }
html[data-theme='light'] .walkthrough-copy > p:not(.eyebrow) { color: #70798b; }
html[data-theme='light'] .walkthrough-list button { color: #717a8b; }
html[data-theme='light'] .walkthrough-list button.active { background: #eeeafd; border-color: #d8d0f5; color: #282e3e; }
html[data-theme='light'] .walkthrough-list button > span { background: #e9e6ef; color: #747c8c; }
html[data-theme='light'] .walkthrough-list button.active > span { background: #7659f5; color: #fff; }
html[data-theme='light'] .walkthrough-list small { color: #89909f; }
html[data-theme='light'] .walkthrough-list button > svg { color: #a0a6b3; }
html[data-theme='light'] .walkthrough-list button.active > svg { color: #5a43c6; }
html[data-theme='light'] .walkthrough-visual { background: radial-gradient(circle at 50% 25%, rgba(118,89,245,.13), transparent 48%), #efedf6; border-color: #d9d6e1; }
html[data-theme='light'] .walkthrough-screen { background: #fff; border-color: #d8d5df; box-shadow: 0 25px 60px rgba(30,36,62,.14); }
html[data-theme='light'] .walkthrough-screen-top { border-color: #e2dfe7; }
html[data-theme='light'] .walkthrough-screen-top .logo { background: linear-gradient(135deg, #7659f5, #5638ca); border-radius: 8px; padding: 5px 8px; }
html[data-theme='light'] .walkthrough-screen-top > span { color: #747c8d; }
html[data-theme='light'] .walkthrough-progress { background: #e5e2ea; }
html[data-theme='light'] .walkthrough-stage > strong { color: #202637; }
html[data-theme='light'] .walkthrough-stage > p { color: #747d8e; }
html[data-theme='light'] .walkthrough-mini-card { background: #f5f3f9; border-color: #dedbe5; color: #252b3b; }
html[data-theme='light'] .walkthrough-mini-card small { color: #848b9a; }
html[data-theme='light'] .walkthrough-controls button { background: #fff; border-color: #d7d4df; color: #4e5667; }
html[data-theme='light'] .walkthrough-controls button:last-child { background: linear-gradient(135deg, #8062f5, #6040db); border-color: #7659f5; color: #fff; }

/* Light-mode visual corrections */
html[data-theme='light'] .truth-section { padding-block: 92px 42px; }
html[data-theme='light'] .offers-section { padding-block: 54px 105px; }
html[data-theme='light'] .how-section { padding-block: 92px; }
html[data-theme='light'] .steps { margin-top: 48px; }
html[data-theme='light'] .steps article { display: flex; flex-direction: column; min-height: 230px; padding: 22px; }
html[data-theme='light'] .step-icon { flex: 0 0 auto; margin-bottom: 30px; }
html[data-theme='light'] .steps h3 { margin-top: 0; }

html[data-theme='light'] .apps-section { padding-block: 95px 55px; }
html[data-theme='light'] .referral-section { padding-block: 72px 95px; }
html[data-theme='light'] .referral-glow { opacity: .55; }
html[data-theme='light'] .invite-link { background: #fff; border-color: #dcd9e3; box-shadow: 0 10px 28px rgba(30,36,62,.06); }
html[data-theme='light'] .invite-link small { color: #898f9e; }
html[data-theme='light'] .invite-link strong { color: #252b3b; }
html[data-theme='light'] .invite-link .button { background: #d8ff7d; color: #26350e; }
html[data-theme='light'] .referral-terms { color: #7a8292; }
html[data-theme='light'] .commission-badge { background: #effbd8; border-color: #d9e8bd; color: #627b29; }
html[data-theme='light'] .referral-network .network-center { border-color: #fff; }
html[data-theme='light'] .network-person { border-color: #fff; }
html[data-theme='light'] .network-person small { background: #f2eff8; color: #5f45d1; }
html[data-theme='light'] .network-line { background: #b9c3d2; }
html[data-theme='light'] .calculation-row { border-color: #dedbe4; }
html[data-theme='light'] .calculation-row span,
html[data-theme='light'] .referral-scale { color: #7b8393; }

html[data-theme='light'] .match-ring { background: conic-gradient(#4de5b2 var(--match), #e4e8ef 0); box-shadow: 0 12px 30px rgba(30,36,62,.09); }
html[data-theme='light'] .match-ring::before { background: #fff; }
html[data-theme='light'] .match-ring strong { color: #202637; }
html[data-theme='light'] .match-ring small { color: #7e8696; }
html[data-theme='light'] .matcher-top span { color: #252b3b; }
html[data-theme='light'] .match-details { border-color: #ddd9e3; }
html[data-theme='light'] .match-details span + span { border-color: #ddd9e3; }
html[data-theme='light'] .match-details small,
html[data-theme='light'] .matcher-note { color: #818898; }
html[data-theme='light'] .match-details strong { color: #252b3b; }

html[data-theme='light'] .final-cta .eyebrow { color: #7659f5; }
html[data-theme='light'] .final-cta .cta-gift { background: #7659f5; color: #d8ff7d; }
html[data-theme='light'] .footer-brand .logo { background: linear-gradient(135deg, #7659f5, #5638ca); border-radius: 10px; display: inline-flex; padding: 8px 11px; }
html[data-theme='light'] .footer-brand .logo img { height: 27px; }

@media (max-width: 1080px) {
  html[data-theme='light'] .referral-grid { gap: 55px; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
}

@media (max-width: 940px) {
  html[data-theme='light'] .referral-grid { grid-template-columns: 1fr; }
  html[data-theme='light'] .referral-dashboard { margin-inline: auto; max-width: 620px; width: 100%; }
  html[data-theme='light'] .referral-steps { grid-template-columns: 1fr; }
  html[data-theme='light'] .referral-steps > i { display: none; }
}

@media (max-width: 520px) {
  .theme-toggle { bottom: 14px; right: 14px; }
  .theme-toggle > b { display: none; }
  .theme-toggle { padding-right: 6px; }
}