/* TASKPAY landing, layer 2: aurora canvas, grid, cursor, progress bar, marquee, the pinned "how it works" scene, the travelling coin, tilt + magnetic polish. */
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; }
#aurora { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; opacity: .95; }
.gridbg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(165, 245, 212, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(165, 245, 212, .045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, #000 20%, transparent 75%); }
.cur { position: fixed; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1.5px solid rgba(45, 228, 162, .7); z-index: 300; pointer-events: none; opacity: 0; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s, opacity .3s; mix-blend-mode: screen; will-change: transform; }
.cur.on { opacity: 1; } .cur.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(45, 228, 162, .14); border-color: rgba(165, 245, 212, .9); } .cur.dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--mint); }
@media (pointer: coarse) { .cur { display: none; } }
.prog { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 120; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #17c98e, #46f0b4, #a5f5d4); box-shadow: 0 0 14px rgba(45, 228, 162, .8); }
.nav-l { transition: transform .5s var(--ease), background .3s, border-color .3s; } .nav-l.hide { transform: translateY(-100%); }

/* ---------- marquee ---------- */
.marq { overflow: hidden; border-block: 1px solid var(--bd); background: rgba(13, 28, 26, .6); padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marq-in { display: flex; gap: 34px; align-items: center; width: max-content; animation: marq 38s linear infinite; } .marq span { font: 650 clamp(18px, 2.2vw, 28px) var(--font); letter-spacing: -.02em; color: var(--tx2); white-space: nowrap; } .marq i { width: 10px; height: 10px; transform: rotate(45deg); background: var(--mint); box-shadow: 0 0 14px var(--mint); flex: none; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- hero polish ---------- */
html.gs .hero h1 .w { animation: none; opacity: 1; transform: none; filter: none; } .hero h1 .ch { display: inline-block; will-change: transform; } .hero h1 .mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
html.gs .hero-copy .reveal { animation: none; } 
.btn.pri::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); pointer-events: none; } .btn.pri:hover::before { transform: translateX(120%); }
.btn { overflow: hidden; } .btn .rip { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: scale(0); animation: rip .7s ease-out forwards; pointer-events: none; } @keyframes rip { to { transform: scale(3); opacity: 0; } }

/* ---------- pinned scene ---------- */
.how { position: relative; padding: 70px 0; } .how-pin { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; min-height: 100vh; }
.how-left h2 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -.045em; margin: 18px 0 14px; line-height: .98; }
.how-steps { list-style: none; margin: 30px 0 22px; padding: 0; display: grid; gap: 6px; position: relative; }
.how-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 1px solid transparent; opacity: .38; transition: opacity .5s var(--ease), background .5s, border-color .5s, transform .5s var(--ease); cursor: pointer; }
.how-steps li b { font: 600 13px var(--mono); color: var(--tx3); padding-top: 4px; letter-spacing: .08em; transition: color .4s; } .how-steps li h3 { font-size: 17px; letter-spacing: .03em; margin-bottom: 5px; } .how-steps li p { color: var(--tx2); font-size: 15px; }
.how-steps li.on { opacity: 1; background: linear-gradient(90deg, rgba(45, 228, 162, .14), rgba(45, 228, 162, .02)); border-color: rgba(45, 228, 162, .35); transform: translateX(8px); box-shadow: 0 20px 50px -28px rgba(45, 228, 162, .5); } .how-steps li.on b { color: var(--mint); } .how-steps li.past { opacity: .6; } .how-steps li.past b { color: var(--em); }
.hprog { height: 3px; border-radius: 3px; background: #17342d; overflow: hidden; max-width: 420px; } .hprog i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--em), var(--lm)); box-shadow: 0 0 12px var(--mint); }
.scene { position: relative; height: 480px; border-radius: 30px; border: 1px solid var(--bd2); background: radial-gradient(500px 280px at 70% 0%, rgba(45, 228, 162, .18), transparent 70%), linear-gradient(180deg, #0f2420, #091512); box-shadow: 0 40px 70px -40px #000; overflow: hidden; padding: 28px; }
.scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .04) 50%, transparent 60%); background-size: 250% 100%; animation: sheen 6s linear infinite; } @keyframes sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.pane { position: absolute; inset: 28px; display: grid; gap: 14px; align-content: center; opacity: 0; transform: translateY(34px) scale(.96); filter: blur(6px); pointer-events: none; transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s; } .pane.on { opacity: 1; transform: none; filter: none; }
.pl { font: 700 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.fld small { display: block; font-size: 11.5px; color: var(--tx3); margin-bottom: 6px; font-weight: 600; } .inp { display: flex; align-items: center; gap: 6px; padding: 13px 15px; border-radius: 13px; border: 1px solid var(--bd2); background: rgba(7, 18, 17, .7); font-size: 15px; min-height: 48px; } .inp b { font-size: 18px; } .inp small { margin: 0; color: var(--tx2); }
.inp .typ { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; } .pane.on .typ { animation: type 2.6s steps(34) .3s forwards; } @keyframes type { to { width: 100%; } } .pane.on .inp { border-color: rgba(45, 228, 162, .5); } .caret { width: 2px; height: 20px; background: var(--mint); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } }
.grid2m { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .chipm { font-style: normal; padding: 4px 12px; border-radius: 99px; background: var(--mint); color: #04211a; font-weight: 700; font-size: 13px; } .inp.lines { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; } .inp.lines i { height: 8px; border-radius: 4px; background: #1e3d36; transform-origin: left; transform: scaleX(0); } .pane.on .inp.lines i { animation: grow .8s var(--ease) forwards; } .pane.on .inp.lines i:nth-child(1) { animation-delay: 1.6s; } .pane.on .inp.lines i:nth-child(2) { animation-delay: 1.85s; width: 82%; } .pane.on .inp.lines i:nth-child(3) { animation-delay: 2.1s; width: 55%; } @keyframes grow { to { transform: none; } }
.fbtn { text-align: center; padding: 14px; border-radius: 13px; background: linear-gradient(180deg, #46f0b4, #17c98e); color: #04211a; font-weight: 750; box-shadow: 0 14px 34px -12px rgba(45, 228, 162, .7); } .pane.on .fbtn:not(.press) { animation: nudge 2.4s ease-in-out 3s infinite; } @keyframes nudge { 50% { transform: scale(1.03); } } .fbtn.press { margin-top: 8px; } .pane.on .fbtn.press { animation: press 1.2s var(--ease) .5s both; } @keyframes press { 40% { transform: scale(.94); filter: brightness(1.3); } 100% { transform: none; } }
.esc-row { display: flex; align-items: center; gap: 0; margin: 6px 0; } .en { width: 120px; text-align: center; padding: 18px 8px; border-radius: 18px; border: 1px solid var(--bd2); background: rgba(7, 18, 17, .6); display: grid; gap: 8px; justify-items: center; font-size: 12.5px; color: var(--tx2); } .en svg { width: 30px; height: 30px; stroke: var(--mint); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .en.lock { border-color: rgba(45, 228, 162, .35); } .pane.on .en.lock { animation: lockin 1s var(--ease) 1.5s both; } @keyframes lockin { 40% { box-shadow: 0 0 0 14px rgba(45, 228, 162, .18), 0 0 60px rgba(45, 228, 162, .6); border-color: var(--mint); } 100% { box-shadow: 0 0 40px -6px rgba(45, 228, 162, .55); border-color: var(--mint); } }
.epipe { flex: 1; height: 2px; background: #1c3a33; position: relative; border-radius: 2px; } .coin2 { position: absolute; top: -10px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d7ffee, #2de4a2 60%, #0f8c63); box-shadow: 0 0 18px var(--mint); opacity: 0; } .pane.on .coin2 { animation: coinrun 1.4s var(--ease) .3s forwards; } @keyframes coinrun { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 22px); opacity: 0; transform: scale(.4); } }
.stline { position: relative; height: 32px; margin-top: 8px; } .stline span { position: absolute; left: 0; top: 0; padding: 6px 13px; border-radius: 99px; font: 700 12px var(--font); letter-spacing: .04em; text-transform: uppercase; } .stline .a { color: var(--warn); background: rgba(245, 182, 46, .13); } .stline .b { color: var(--mint); background: rgba(45, 228, 162, .16); opacity: 0; } .pane.on .stline .a { animation: sta 2.2s forwards; } .pane.on .stline .b { animation: stb 2.2s forwards; } @keyframes sta { 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } } @keyframes stb { 0%, 70% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.big2 { font-size: 30px; font-weight: 650; letter-spacing: -.03em; } .big2 small { font-size: 15px; color: var(--tx2); font-weight: 500; } .onchain { font-size: 13px; color: var(--tx2); } .onchain u { color: var(--mint); text-decoration: none; font-weight: 700; }
.cb { max-width: 80%; padding: 11px 15px; border-radius: 16px; font-size: 14px; opacity: 0; transform: translateY(14px) scale(.96); } .cb.l { background: #17352e; border-bottom-left-radius: 4px; } .cb.r { background: linear-gradient(180deg, #1b6e54, #0f5a43); justify-self: end; border-bottom-right-radius: 4px; } .cb.att { background: #17352e; border: 1px dashed var(--bd2); width: max-content; font: 13px var(--mono); color: var(--lm); }
.pane.on .cb { animation: cbin .6s var(--ease) calc(.35s + var(--k) * .85s) forwards; } @keyframes cbin { to { opacity: 1; transform: none; } } .cb.typ3 { background: #17352e; display: inline-flex; gap: 5px; width: max-content; padding: 13px 16px; } .cb.typ3 i { width: 7px; height: 7px; border-radius: 50%; background: var(--tx2); animation: bounce 1.1s infinite; } .cb.typ3 i:nth-child(2) { animation-delay: .15s; } .cb.typ3 i:nth-child(3) { animation-delay: .3s; }
.done-ring { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(180deg, #46f0b4, #17c98e); display: grid; place-items: center; color: #04211a; transform: scale(0); } .pane.on .done-ring { animation: ringin 1s var(--ease) 1.2s forwards; } .done-ring svg { width: 46px; height: 46px; stroke: #04211a; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; } .pane.on .done-ring svg { animation: draw .6s ease 1.8s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes ringin { 0% { transform: scale(0); } 70% { transform: scale(1.12); box-shadow: 0 0 0 16px rgba(45, 228, 162, .14), 0 0 70px rgba(45, 228, 162, .7); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(45, 228, 162, .12), 0 0 60px rgba(45, 228, 162, .5); } }
.paid-line { font-size: 18px; color: var(--tx2); } .paid-line b { color: var(--mint); }
.pane.p4 .big2, .pane.p4 .paid-line, .pane.p4 .onchain { opacity: 0; transform: translateY(10px); } .pane.on.p4 .big2 { animation: cbin .7s var(--ease) 1.9s forwards; } .pane.on.p4 .paid-line { animation: cbin .7s var(--ease) 2.1s forwards; } .pane.on.p4 .onchain { animation: cbin .7s var(--ease) 2.4s forwards; }

/* ---------- flow coin / tilt ---------- */
.flow { position: relative; } .travel { position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at 35% 30%, #d7ffee, #2de4a2 60%, #0f8c63); box-shadow: 0 0 26px var(--mint), 0 0 60px rgba(45, 228, 162, .5); }
.node { transition: transform .5s var(--ease), border-color .4s, box-shadow .5s, background .4s; } .node.lit { transform: translateY(-8px) scale(1.04); border-color: var(--mint); box-shadow: 0 0 70px -14px rgba(45, 228, 162, .75); background: linear-gradient(180deg, rgba(45, 228, 162, .18), rgba(13, 28, 26, .6)); }
.tilt { transform-style: preserve-3d; transition: transform .25s ease-out, border-color .3s, box-shadow .35s; will-change: transform; } .tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(260px 200px at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .09), transparent 70%); opacity: 0; transition: opacity .3s; } .tilt:hover::after { opacity: 1; } .dm { position: relative; }
.cta-end .card { position: relative; overflow: hidden; } .cta-end .card::before { content: ''; position: absolute; width: 520px; height: 520px; left: 50%; top: -260px; margin-left: -260px; background: conic-gradient(from 0deg, transparent, rgba(45, 228, 162, .35), transparent 40%); filter: blur(40px); animation: spin 9s linear infinite; } .cta-end .card > * { position: relative; }
.sh h2, .ai-grid h2 { background: linear-gradient(180deg, #fff 30%, #b7d6cc); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 980px) { .how-pin { grid-template-columns: 1fr; min-height: 0; gap: 30px; } .scene { height: 440px; } .how-steps li { opacity: .7; } .marq-in { animation-duration: 26s; } }
@media (max-width: 520px) { .scene { padding: 18px; height: 470px; } .pane { inset: 18px; } .en { width: 96px; } .how-left h2 { font-size: 36px; } }
/* user chose calm mode (toggle on the site) */ html.calm .marq-in, html.calm .scene::after, html.calm .cta-end .card::before { animation: none; } html.calm #aurora { display: none; } html.calm .cur, html.calm .prog { display: none; } html.calm .pane { transition: none; } html.calm .pane.on .typ { animation: none; width: 100%; } html.calm .pane.on .cb { animation: none; opacity: 1; transform: none; } html.calm .pane.on.p4 .big2, html.calm .pane.on.p4 .paid-line, html.calm .pane.on.p4 .onchain { animation: none; opacity: 1; transform: none; } html.calm .pane.on .done-ring { animation: none; transform: none; } html.calm .done-ring svg { stroke-dashoffset: 0; animation: none !important; }

/* GSAP mode: the headline is split per character; the gradient moves onto each character */
html.gs .hero h1 .g { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--mint); filter: none; }
html.gs .hero h1 .g .ch { background: linear-gradient(180deg, #e2fff2 0%, #46f0b4 55%, #17c98e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.gs .win { animation: none; } .float { translate: 0 var(--py, 0px); }

/* FAQ accordion: the answer height animates smoothly (grid rows 0fr -> 1fr) */
.faq { max-width: 860px; display: grid; gap: 10px; } .fq { border: 1px solid var(--bd); border-radius: 20px; background: rgba(13, 28, 26, .7); overflow: hidden; transition: border-color .3s, background .3s; } .fq.open { border-color: rgba(45, 228, 162, .4); background: rgba(16, 36, 32, .9); }
.fq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: none; border: 0; text-align: left; font: 600 17px var(--font); color: var(--tx); cursor: pointer; } .fq-q i { position: relative; width: 22px; height: 22px; flex: none; } .fq-q i::before, .fq-q i::after { content: ''; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; border-radius: 2px; background: var(--mint); transition: transform .4s var(--ease); } .fq-q i::after { transform: rotate(90deg); } .fq.open .fq-q i::after { transform: rotate(0); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .fq.open .fq-a { grid-template-rows: 1fr; } .fq-a > div { overflow: hidden; } .fq-a p { padding: 0 24px 22px; color: var(--tx2); font-size: 15.5px; line-height: 1.65; opacity: 0; transform: translateY(-6px); transition: opacity .4s .08s, transform .5s var(--ease); } .fq.open .fq-a p { opacity: 1; transform: none; }