/* Shared motion system. Content is visible by default, including without JS. */
:root { --motion-ease: cubic-bezier(.2,.75,.25,1); }
[data-reveal] { transition: opacity .7s var(--motion-ease), translate .7s var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
html.motion-ready[data-motion="on"] [data-reveal]:not(.is-visible) { opacity: 0; translate: 0 26px; }
[data-reveal]:focus-within { opacity: 1!important; translate: none!important; }
.page-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; }
.page-scroll-progress>span { display: block; height: 100%; background: linear-gradient(90deg,#9d305d,#dd6698,#d5407e); transform: scaleX(0); transform-origin: left; }

html.motion-ready [data-reveal] { transition-property: opacity,translate,box-shadow,border-color; }

/* White canvas, with rose colour that gently dissolves into the page. */
body.landing-page { background: #fff; isolation: isolate; }
.landing-page main,.landing-page .site-footer { position: relative; z-index: 1; }
/* This viewport-sized layer continues behind every section, including the gaps. */
.ambient-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.ambient-glow { position: absolute; width: 62vw; height: 75vh; border-radius: 50%; background: radial-gradient(ellipse,#e37fa839 0%,#f6d5e328 36%,transparent 69%); }
.glow-one { top: -22%; left: -30%; }
.glow-two { right: -29%; top: 16%; background: radial-gradient(ellipse,#e074a140 0%,#f8dfe928 36%,transparent 69%); }
.glow-three { left: 9%; bottom: -42%; width: 88vw; background: radial-gradient(ellipse,#f0b3cc38 0%,#fae4ed20 40%,transparent 70%); }
.ambient-ribbons { position: absolute; inset: -8% -10%; width: 120%; height: 120%; translate: 0 var(--ambient-scroll,0px); }
.ambient-spark { position: absolute; color: #cb7599; line-height: 1; }
.ambient-spark-one { left: 3%; top: 30%; font-size: 30px; }
.ambient-spark-two { right: 5%; top: 65%; font-size: 18px; opacity: .65; }
.ambient-spark-three { left: 37%; top: 91%; font-size: 27px; opacity: .7; }
.ambient-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #db88aa; box-shadow: 0 0 0 5px #db88aa13; }
.dot-one { top: 18%; left: 42%; }.dot-two { right: 28%; top: 86%; }.dot-three { left: 7%; top: 73%; width: 3px; height: 3px; }
html[data-motion="on"] .ambient-glow { animation: ambient-drift 16s ease-in-out infinite alternate; }
html[data-motion="on"] .glow-two { animation-delay: -9s; animation-duration: 19s; }
html[data-motion="on"] .glow-three { animation-delay: -5s; animation-duration: 23s; }
html[data-motion="on"] .ambient-ribbons { animation: ribbon-sway 18s ease-in-out infinite alternate; }
html[data-motion="on"] .ribbon-trace { animation: ribbon-flow 16s linear infinite; }
html[data-motion="on"] .ambient-spark,html[data-motion="on"] .ambient-dot { animation: ambient-float 8s ease-in-out infinite; }
html[data-motion="on"] .ambient-spark-two,html[data-motion="on"] .dot-two { animation-delay: -4s; }
html[data-motion="on"] .ambient-spark-three,html[data-motion="on"] .dot-three { animation-delay: -6s; }
@keyframes ambient-drift { from { transform: translate3d(-3%,0,0) scale(.94); } to { transform: translate3d(9%,14%,0) scale(1.15); } }
@keyframes ribbon-sway { from { transform: translate3d(-1%,-3%,0) rotate(-3deg); } to { transform: translate3d(1%,5%,0) rotate(3deg); } }
@keyframes ribbon-flow { to { stroke-dashoffset: -1304; } }
@keyframes ambient-float { 0%,100% { transform: translate3d(0,0,0) rotate(-8deg); opacity: .5; } 50% { transform: translate3d(10px,-24px,0) rotate(12deg); opacity: .9; } }
.landing-page .site-header { background: #ffffffed; border-color: #f8e8ef; transition: box-shadow .35s; }
.landing-page .site-header.is-scrolled { box-shadow: 0 6px 30px #4c434708; }
.landing-page .hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 25px; min-height: 660px; padding: 64px 20px 100px; text-align: left; background: none; }
.landing-page .hero::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -20px 0 0; background: radial-gradient(ellipse at 75% 40%,#f9e2ec60,transparent 50%); }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.landing-page .hero h1 { font-size: clamp(53px,5.2vw,92px); letter-spacing: -.055em; margin: 27px 0 23px; }
.landing-page .hero-description { font-size: clamp(14px,1.15vw,18px); max-width: 620px; }
.landing-page .hero-actions,.landing-page .hero-reassurance { justify-content: flex-start; }
.landing-page .hero-reassurance { margin-top: 25px; }

.scroll-invitation { position: absolute; bottom: 30px; left: 20px; display: inline-flex; align-items: center; gap: 12px; font-size: 8px; letter-spacing: 1.8px; color: #92858a; }
.scroll-invitation>span:last-child { font-size: 16px; }
.scroll-mouse { width: 17px; height: 26px; border: 1px solid #d294ae; border-radius: 12px; display: flex; justify-content: center; padding-top: 5px; }
.scroll-mouse i { width: 3px; height: 6px; background: #c0698d; border-radius: 4px; }

/* Motion continues through each section, without scroll hijacking or sticky traps. */
.landing-page .feature-community { background: radial-gradient(ellipse at 70% 90%,#f6d5e390,transparent 62%),linear-gradient(135deg,#fdf5f8,#fae7ef); border: 1px solid #f4dce6; color: #363032; }
.landing-page .feature-community .mini-label { color: #84767c; }.landing-page .feature-community h2 em { color: #a93c69; }.landing-page .feature-community p { color: #817479; }
.landing-page .community-foot { color: #8a7d82; }.landing-page .orbit { border-color: #ca648e37; }
.landing-page .feature-voice { background: linear-gradient(130deg,#fefbfc,#fbecf2); }
.feature-card,.research-card,.why-grid article { transition: translate .45s var(--motion-ease),box-shadow .45s,border-color .45s; }
.landing-page .why-grid article { border-radius: 20px; padding: 26px; background: linear-gradient(145deg,#fff,#fef8fb); border: 1px solid #f7e8ee; }
.landing-page .why-grid { gap: 22px; }.landing-page .reason-icon { width: 44px; height: 44px; }
.landing-page .brand-statement { position: relative; }
.landing-page .brand-statement::before { content: ''; position: absolute; inset: 0 10%; z-index: -1; background: radial-gradient(ellipse,#fceff4,transparent 65%); }
.landing-page .research-section { padding-top: 30px; }
.research-visual { translate: 0 var(--scene-shift,0px); transition: translate .15s linear; }
.how-grid { position: relative; }.how-grid article { --journey-progress: 0; }
.landing-page .how-icon { box-shadow: 0 0 0 calc(var(--journey-progress)*9px) #e381aa16; }
.landing-page .how-grid article:not(:last-child)::after { border: 0; height: 2px; background: linear-gradient(90deg,#d380a3 calc(var(--journey-progress)*100%),#f7e5ed 0); transform-origin: left; }
.landing-page .site-footer { background: linear-gradient(180deg,#ffffff50,#fcf3f7c9); }
.landing-page .footer-bottom { padding-bottom: 25px; }

/* Reward cards: a physical-feeling deck, usable with hover, touch and keyboard. */
.landing-page .rewards-section { position: relative; color: #322d2f; background: radial-gradient(ellipse at 77% 40%,#f8dbe75c,transparent 60%); overflow: clip; margin-top: 0; }
.landing-page .rewards-inner { padding-block: 76px 62px; grid-template-columns: .9fr 1.1fr; gap: 32px 50px; align-items: center; }
.landing-page .rewards-copy { padding-left: 24px; }
.landing-page .rewards-copy .eyebrow { color: #a84870; }
.landing-page .rewards-copy h2 { font-size: clamp(42px,4.3vw,68px); letter-spacing: -.055em; line-height: 1.08; margin-block: 25px 22px; }
.landing-page .rewards-copy h2>span { color: #b02963; }
.landing-page .rewards-copy>p { color: #817379; max-width: 440px; font-size: 15px; }
.landing-page .reward-steps { gap: 19px; margin-top: 31px; }
.landing-page .reward-steps li>span { color: #b4517a; border-color: #efd3df; background: #fdf4f8; width: 31px; height: 31px; }
.landing-page .reward-steps strong { color: #675d61; font-size: 13px; }.landing-page .reward-steps p { color: #8d7f85; font-size: 12px; }
.reward-showcase { min-width: 0; }
.reward-deck { position: relative; height: 365px; width: min(100%,650px); margin: 0 auto; perspective: 1200px; }
.deck-halo { position: absolute; inset: 3% 0 -8%; border-radius: 50%; background: radial-gradient(ellipse,#e484ac38,#f7d9e535 42%,transparent 68%); }
.deck-orbit { position: absolute; width: 88%; height: 47%; left: 6%; top: 38%; border: 1px solid #eec4d680; border-radius: 50%; transform: rotate(-18deg); box-shadow: 0 0 0 28px #edbed20c; }
.payout-card { --tilt-x: 0deg; --tilt-y: 0deg; position: absolute; top: 72px; left: 50%; width: 355px; height: 222px; margin: 0; padding: 25px; border: 1px solid #ffffffbd; border-radius: 19px; cursor: pointer; text-align: left; display: flex; flex-direction: column; justify-content: space-between; font-family: inherit; font-weight: 400; overflow: hidden; transform-style: preserve-3d; transition: transform .65s var(--motion-ease),box-shadow .55s,border-color .3s; box-shadow: 0 23px 40px -18px #652a425c,inset 0 1px 0 #fff8; }
.payout-card::before { content: ''; position: absolute; top: -120px; right: -50px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid #fff4; box-shadow: 0 0 0 35px #ffffff08,0 0 0 70px #ffffff06; pointer-events: none; }
.payout-paypal { z-index: 1; background: linear-gradient(125deg,#fdf7f9,#f8dae7 52%,#dc8aac); color: #394875; transform: translate(-70%,-24px) rotate(-12deg) scale(.96); }
.payout-gift { z-index: 2; color: #fff; background: linear-gradient(120deg,#d05b8d,#b02963 50%,#8e2351); transform: translate(-32%,24px) rotate(9deg); }
.payout-card-top,.payout-card-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.payout-card .paypal-wordmark { font-size: 28px; letter-spacing: -1px; }.payout-card .paypal-wordmark>span { color: #6477ba; }
.preview-label { font-size: 7px; letter-spacing: 1px; opacity: .8; }.gift-brand { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; }.gift-brand>.icon { width: 24px; height: 24px; }
.payout-card-main { position: relative; font-size: 29px; letter-spacing: -1px; line-height: 1.1; font-weight: 500; }
.payout-card-bottom { font-size: 9px; }.card-arrow { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #ffffff52; border-radius: 50%; }.card-arrow>.icon { width: 13px; height: 13px; }
.payout-paypal .card-arrow { border-color: #687fb146; }
.card-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(circle at var(--shine-x,35%) var(--shine-y,20%),#ffffff70,transparent 58%); mix-blend-mode: soft-light; }
.reward-deck[data-selected="paypal"] .payout-paypal { z-index: 3; transform: translate(-48%,8px) rotate(-5deg); }
.reward-deck[data-selected="paypal"] .payout-gift { z-index: 1; transform: translate(-26%,-22px) rotate(13deg) scale(.94); }
.payout-card:focus-visible { z-index: 4; outline: 3px solid #d56392; outline-offset: 6px; }
.deck-spark { position: absolute; color: #d4729b; pointer-events: none; }.spark-left { left: 5%; bottom: 17%; font-size: 36px; }.spark-right { right: 4%; top: 7%; font-size: 50px; }

.reward-preview-note { margin-top: 13px; text-align: center; font-size: 10px; color: #9a8e93; }
.landing-page .reward-calculator { grid-column: 1/-1; display: grid; grid-template-columns: .9fr 1fr 1.3fr; align-items: center; gap: 30px; padding: 25px 30px; margin-top: 17px; border: 1px solid #f2dce5; background: linear-gradient(115deg,#fefafc,#fff); border-radius: 20px; box-shadow: 0 12px 40px #6b244105; }
.landing-page .calculator-heading h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.6px; color: #695e62; }
.landing-page .calculator-heading p { margin-top: 6px; color: #988c91; }
.landing-page .conversion-visual { margin: 0; padding: 18px 12px; background: #fcf3f7; border-color: #f6e3eb; border-radius: 15px; }
.landing-page .conversion-visual strong { font-size: 37px; font-variant-numeric: tabular-nums; }.landing-page .points-control { margin: 0; }.landing-page .calculator-note { margin-top: 15px; text-align: left; font-size: 10px; }

/* Small, deliberate movement across the signed-in and authentication pages. */
.auth-page .auth-form-wrap { background: radial-gradient(ellipse at 100% 0,#f9e1eb77,transparent 50%),#fff; }
.workspace { background: #fff; }
.profile-card,.stat-card,.auth-socials a { transition: translate .35s var(--motion-ease),box-shadow .35s,border-color .35s; }
.side-nav a .icon,.button .icon,.text-link .icon,.how-grid a .icon { transition: transform .3s var(--motion-ease); }
.button:hover .icon,.text-link:hover .icon,.how-grid a:hover .icon { transform: translateX(3px); }
.side-nav a:hover .icon { transform: rotate(-8deg); }
html[data-motion="on"] .survey-question:not([hidden]) { animation: question-appear .35s var(--motion-ease) both; }
.answer-option { transition: background .2s,border-color .2s,box-shadow .2s; }.answer-option:has(input:checked) { box-shadow: 0 0 0 2px #c4538212; }
.question-progress>span,.tiny-progress>span { transition: width .45s var(--motion-ease); }

html[data-motion="on"] .hero-copy.in-view .gradient-text { background-size: 200% 100%; animation: gradient-drift 8s ease-in-out infinite; }
html[data-motion="on"] .hero-copy.in-view .reward-icon { animation: gentle-float 5s ease-in-out infinite; }
html[data-motion="on"] .hero.in-view .scroll-mouse i { animation: scroll-cue 2s ease-in-out infinite; }
html[data-motion="on"] .feature-community.in-view .orbit-node { animation: gentle-float 5s ease-in-out infinite; }
html[data-motion="on"] .feature-community.in-view .orbit-node:nth-child(even) { animation-delay: -2s; }
html[data-motion="on"] .feature-reward.in-view .coin-front { animation: gentle-float 4s ease-in-out infinite; }
html[data-motion="on"] .phone-research.in-view .audio-wave i { animation: wave-dance 1.3s ease-in-out infinite alternate; }
html[data-motion="on"] .phone-research.in-view .audio-wave i:nth-child(3n) { animation-delay: -.5s; }
html[data-motion="on"] .phone-research.in-view .audio-wave i:nth-child(2n) { animation-delay: -.9s; }
html[data-motion="on"] .reward-showcase.in-view .deck-spark { animation: gentle-float 5s ease-in-out infinite; }
html[data-motion="on"] .welcome-banner.in-view .art-tag { animation: gentle-float 6s ease-in-out infinite; }
html[data-motion="on"] .auth-story.in-view::before { animation: halo-breathe 12s ease-in-out infinite; }
@keyframes gentle-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes halo-breathe { 0%,100% { opacity: .65; scale: .95; } 50% { opacity: 1; scale: 1.05; } }
@keyframes scroll-cue { 0%,100% { translate: 0 0; opacity: .6; } 50% { translate: 0 7px; opacity: 1; } }
@keyframes gradient-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes wave-dance { from { scale: 1 .45; } to { scale: 1 1; } }
@keyframes question-appear { from { opacity: .4; translate: 10px 0; } to { opacity: 1; translate: 0; } }
@media(hover:hover) and (pointer:fine) {
  html[data-motion="on"] .feature-card:hover,html[data-motion="on"] .research-card:hover,html[data-motion="on"] .why-grid article:hover,html[data-motion="on"] .profile-card:hover { translate: 0 -6px; box-shadow: 0 20px 45px #6b2d470d; }
  .reward-deck:hover .payout-paypal { transform: translate(-82%,-30px) rotate(-16deg); }
  .reward-deck:hover .payout-gift { transform: translate(-21%,20px) rotate(13deg); }
  .reward-deck .payout-card:hover,.reward-deck .payout-card:focus-visible { z-index: 5; transform: translate(-50%,-22px) rotate(-2deg) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.06); box-shadow: 0 33px 50px -18px #68274255,inset 0 1px 0 #fffa; }
  .payout-card:hover .card-shine,.payout-card:focus-visible .card-shine { opacity: .75; }
}
@media(min-width:1700px) { .landing-page .hero { padding-inline: 42px; min-height: 750px; }.landing-page .rewards-copy { padding-left: 45px; }.reward-deck { height: 410px; }.payout-card { top: 90px; width: 390px; height: 246px; padding: 28px; }.payout-card-main { font-size: 32px; }.landing-page .feature-card { padding: 36px; }.landing-page .feature-community h2 { font-size: 40px; } }
@media(max-width:1100px) { .landing-page .hero { gap: 0; padding-inline: 0; min-height: 600px; }.landing-page .hero h1 { font-size: 54px; }.landing-page .hero-description br { display: none; }.landing-page .rewards-inner { gap: 35px 20px; }.landing-page .rewards-copy { padding-left: 0; }.payout-card { width: 290px; height: 195px; padding: 21px; }.payout-card-main { font-size: 25px; }.preview-label { font-size: 6px; }.payout-card-bottom { font-size: 8px; }.reward-deck { height: 330px; }.landing-page .reward-calculator { padding: 23px; gap: 23px; grid-template-columns: 1fr 1fr; }.landing-page .calculator-heading { grid-column: 1/-1; }.landing-page .calculator-heading h3 br { display: none; }.landing-page .calculator-heading h3 { font-size: 20px; } }
@media(max-width:850px) { .landing-page .hero { grid-template-columns: 1fr; text-align: center; padding: 45px 0 68px; gap: 0; }.landing-page .hero h1 { font-size: clamp(54px,8.5vw,72px); }.landing-page .hero-description { margin-inline: auto; }.landing-page .hero-actions,.landing-page .hero-reassurance { justify-content: center; }.scroll-invitation { left: 50%; transform: translateX(-50%); bottom: 17px; white-space: nowrap; }.landing-page .rewards-inner { grid-template-columns: 1fr; padding-block: 54px; max-width: none; }.landing-page .rewards-copy { text-align: center; }.landing-page .rewards-copy>p { margin-inline: auto; }.landing-page .reward-steps { max-width: 420px; margin-inline: auto; text-align: left; }.reward-deck { max-width: 560px; height: 350px; }.payout-card { width: 335px; height: 211px; padding: 24px; }.payout-card-main { font-size: 27px; }.landing-page .why-grid article { padding: 22px; }.landing-page .reward-calculator { margin-top: 5px; }.reward-preview-note { font-size: 9px; } }
@media(max-width:540px) { .landing-page .hero { padding-top: 32px; }.landing-page .hero h1 { font-size: clamp(35px,11.3vw,59px); margin: 22px 0 18px; }.landing-page .hero-description { font-size: 12px; max-width: 340px; }.landing-page .hero-reassurance { font-size: 9px; margin-top: 21px; }.scroll-invitation { font-size: 7px; gap: 9px; }.landing-page .why-grid { gap: 12px; }.landing-page .why-grid article { padding: 18px 14px; border-radius: 15px; }.landing-page .why-grid h3 { font-size: 14px; }.landing-page .why-grid p { font-size: 11px; }.landing-page .rewards-copy h2 { font-size: 39px; }.landing-page .rewards-copy>p { font-size: 13px; }.landing-page .reward-steps strong { font-size: 12px; }.landing-page .reward-steps p { font-size: 11px; }.reward-deck { height: 287px; }.payout-card { width: 247px; height: 167px; padding: 18px; top: 62px; border-radius: 15px; }.payout-card .paypal-wordmark { font-size: 23px; }.gift-brand { font-size: 16px; gap: 6px; }.gift-brand>.icon { width: 20px; }.preview-label { font-size: 5px; letter-spacing: .5px; }.payout-card-main { font-size: 22px; }.payout-card-bottom { font-size: 7px; gap: 6px; }.card-arrow { width: 23px; height: 23px; flex-shrink: 0; }.payout-paypal { transform: translate(-61%,-16px) rotate(-12deg) scale(.94); }.payout-gift { transform: translate(-40%,21px) rotate(8deg); }.reward-deck[data-selected="paypal"] .payout-paypal { transform: translate(-52%,13px) rotate(-5deg); }.reward-deck[data-selected="paypal"] .payout-gift { transform: translate(-39%,-17px) rotate(12deg) scale(.93); }.spark-left { left: 0; font-size: 27px; }.spark-right { right: 0; font-size: 37px; }.reward-preview-note { max-width: 300px; margin-inline: auto; font-size: 9px; }.landing-page .reward-calculator { grid-template-columns: 1fr; gap: 20px; padding: 22px; }.landing-page .calculator-heading h3 { font-size: 18px; }.landing-page .conversion-visual { padding: 20px; }.landing-page .conversion-visual strong { font-size: 37px; }.landing-page .conversion-visual div>span { font-size: 8px; }.landing-page .points-control>div:first-child { font-size: 11px; }.landing-page .points-control>div:first-child>span { font-size: 10px; }.landing-page .rewards-inner { gap: 25px; }.landing-page .research-section { padding-top: 10px; } }
@media(max-width:360px) {.landing-page .hero h1 { font-size: clamp(30px,10.8vw,39px); }.payout-card { width: 216px; height: 154px; padding: 16px; }.payout-card-main { font-size: 20px; }.payout-card-bottom { font-size: 6.5px; }.preview-label { font-size: 4.5px; }.reward-deck { height: 267px; }.landing-page .rewards-copy h2 { font-size: 35px; }.landing-page .why-grid article { padding: 15px 11px; } }

/* Five connected floating notes replace the globe. No heavy rendering loop. */
.hero-art { position: relative; width: 100%; height: clamp(430px,39vw,590px); min-width: 0; }
.mosaic-grid { position: absolute; inset: 8% 2% 7%; background-image: radial-gradient(#c8668f4a .8px,transparent .8px); background-size: 22px 22px; mask-image: radial-gradient(ellipse,#000 10%,transparent 68%); transform: rotate(-8deg); }
.mosaic-connections { position: absolute; width: 100%; height: 100%; inset: 0; stroke: #d97fa4; stroke-width: 1; stroke-dasharray: 3 7; opacity: .65; }
.mosaic-connections .connection-trace { stroke: #c05883; stroke-width: 2; stroke-dasharray: 18 700; }
.floating-note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 13px; padding: 17px 20px; border: 1px solid #f3d9e4; border-radius: 17px; background: linear-gradient(125deg,#fffffff5,#fef8fbf5); box-shadow: 0 18px 40px -16px #7d355330,inset 0 1px 0 #fff; color: #8e8186; font-size: clamp(10px,.82vw,13px); white-space: nowrap; }
.floating-note strong { display: block; font-size: clamp(12px,1vw,16px); font-weight: 600; color: #5c5256; margin-top: 3px; }
.floating-icon { display: grid; place-items: center; flex-shrink: 0; width: 39px; height: 39px; border-radius: 12px; background: #fae6ee; color: #b14472; }
.note-perspective { left: 3%; top: 8%; transform: rotate(-7deg); }
.note-time { right: 0; top: 27%; transform: rotate(6deg); }
.note-rewards { left: 9%; top: 44%; padding: 22px 25px; background: linear-gradient(120deg,#cf5b8d,#b02963 80%); border-color: #db7fa6; color: #fbebf2; transform: rotate(-4deg); box-shadow: 0 22px 44px -18px #9a41666b,inset 0 1px 0 #fff4; }
.note-rewards strong { font-size: clamp(16px,1.4vw,23px); color: #fff; }.note-rewards .floating-icon { width: 45px; height: 45px; background: #ffffff21; color: #fff; }
.note-discover { right: 1%; top: 65%; transform: rotate(5deg); }
.note-community { left: 2%; top: 82%; transform: rotate(-3deg); }
.note-time .floating-icon { background: #fbe9f1; color: #ba5f85; }.note-community .floating-icon { background: #fbeaf1; color: #bb6086; }
.mosaic-spark { position: absolute; color: #c7618c; }
.mosaic-spark-one { right: 14%; top: 7%; font-size: 42px; transform: rotate(12deg); }.mosaic-spark-two { left: 3%; top: 68%; font-size: 23px; }
.mosaic-caption { position: absolute; right: 0; bottom: -4%; display: flex; align-items: center; gap: 7px; color: #9b8f94; font-size: 7px; letter-spacing: 1.2px; }
.mosaic-caption i { width: 4px; height: 4px; border-radius: 50%; background: #c6688f; }
html[data-motion="on"] .hero-art.in-view .floating-note { animation: gentle-float 6s ease-in-out infinite; }
html[data-motion="on"] .hero-art.in-view .note-time { animation-delay: -2s; }
html[data-motion="on"] .hero-art.in-view .note-rewards { animation-delay: -4s; animation-duration: 7s; }
html[data-motion="on"] .hero-art.in-view .note-discover { animation-delay: -1s; animation-duration: 8s; }
html[data-motion="on"] .hero-art.in-view .note-community { animation-delay: -3s; }
html[data-motion="on"] .hero-art.in-view .mosaic-spark { animation: ambient-float 9s ease-in-out infinite; }
html[data-motion="on"] .hero-art.in-view .connection-trace { animation: ribbon-flow 18s linear infinite; }
@media(min-width:1700px) { .hero-art { max-width: 740px; justify-self: center; }.floating-note { padding: 23px 27px; }.note-rewards { padding: 28px 34px; } }
@media(max-width:1100px) { .hero-art { height: 460px; }.floating-note { padding: 13px; gap: 9px; font-size: 9px; }.floating-note strong { font-size: 11px; }.floating-icon { width: 32px; height: 32px; }.floating-icon>.icon { width: 18px; }.note-rewards { padding: 19px; }.note-rewards strong { font-size: 17px; }.note-rewards .floating-icon { width: 37px; height: 37px; } }
@media(max-width:850px) { .hero-art { width: min(100%,530px); height: 460px; margin: 26px auto 10px; text-align: left; }.floating-note { padding: 16px; font-size: 10px; }.floating-note strong { font-size: 13px; }.note-rewards { padding: 23px; }.note-rewards strong { font-size: 20px; }.mosaic-caption { bottom: -2%; }.ambient-glow { width: 95vw; }.glow-one { left: -55%; }.glow-two { right: -45%; } }
@media(max-width:540px) { .hero-art { height: 430px; margin-top: 27px; }.floating-note { padding: 12px 14px; gap: 9px; border-radius: 13px; font-size: 9px; }.floating-note strong { font-size: 11px; }.floating-icon { width: 30px; height: 30px; border-radius: 9px; }.note-perspective { left: 2%; top: 6%; }.note-time { right: 1%; top: 25%; }.note-rewards { left: 3%; top: 43%; padding: 17px 20px; }.note-rewards strong { font-size: 18px; }.note-discover { right: 0; top: 64%; }.note-community { left: 1%; top: 82%; }.mosaic-spark-one { right: 7%; top: 6%; font-size: 30px; }.mosaic-caption { font-size: 5.5px; letter-spacing: .85px; bottom: -2%; }.ambient-ribbons { opacity: .7; width: 180%; left: -40%; }.ambient-spark-one { left: 2%; font-size: 24px; }.ambient-spark-two { right: 2%; }.ambient-glow { width: 130vw; } }
@media(max-width:360px) { .hero-art { height: 410px; }.floating-note { font-size: 8px; padding: 11px; }.floating-note strong { font-size: 10px; }.note-rewards { padding: 16px; }.note-rewards strong { font-size: 16px; }.mosaic-caption { font-size: 5px; } }
html[data-page-visibility="hidden"] *,html[data-page-visibility="hidden"] *::before,html[data-page-visibility="hidden"] *::after { animation-play-state: paused!important; }
/* Keep the first screen close to the navigation, including wide desktops. */
@media(min-width:851px){.landing-page .hero{min-height:0;align-items:start;padding-top:28px;padding-bottom:75px}.landing-page .hero-copy{padding-top:28px}}
@media(max-width:850px){.landing-page .hero{min-height:0;padding-top:28px}}
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after { animation: none!important; transition: none!important; }
html[data-motion="off"] [data-reveal] { opacity: 1!important; translate: none!important; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto!important; } *,*::before,*::after { animation: none!important; transition: none!important; } [data-reveal] { opacity: 1!important; translate: none!important; } }