/* ==========================================================================
   TOKEN PE — brand site
   Soft, bright product surfaces · bold readable type · purple as the thread.
   Base layout is static + complete; scroll-driven layouts are layered on
   inside `prefers-reduced-motion: no-preference` media queries.
   ========================================================================== */

:root {
  --white: #FFFFFF;
  --off: #FAFAFC;
  --bg-alt: #F8F7FC;
  --grey: #F3F2F7;
  --lilac: #F5F2FB;
  --lilac-2: #EBE4F7;
  --purple: #6A29C5;
  --purple-bright: #8456CF;
  --purple-soft: #B9A3E0;
  --purple-deep: #25134D;
  --ink: #101014;
  --ink-2: #3C3947;
  --muted: #6E6A78;
  --line: #ECE8F4;
  --line-2: #DAD4E8;
  --ok: #129A57;
  --ok-bg: #E9F7EF;
  --ok-ink: #0B5E37;
  --warn: #C2410C;
  --warn-bg: #FFF1E6;
  --usdc: #2775CA;

  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --e-expo: cubic-bezier(.22, 1, .36, 1);
  --e-quart: cubic-bezier(.25, 1, .5, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);

  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 1200px;
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  --nav-h: 76px;
  --sec-y: clamp(88px, 10vw, 140px);

  --sh-sm: 0 1px 2px rgba(16, 16, 20, .04), 0 4px 12px -4px rgba(37, 19, 77, .06);
  --sh-md: 0 1px 2px rgba(16, 16, 20, .04), 0 10px 28px -16px rgba(37, 19, 77, .14);
  --sh-lg: 0 1px 2px rgba(16, 16, 20, .04), 0 20px 48px -24px rgba(37, 19, 77, .2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
main, footer { overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
svg { flex: none; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: normal; }
::selection { background: var(--purple); color: #fff; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; transition: top .3s var(--e-expo); }
.skip:focus { top: 16px; }
.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: -.01em; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.push { margin-left: auto; }

/* ---------- Type ---------- */
.eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: var(--purple); }
.eyebrow--light { color: var(--purple-soft); }
.h-section { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 3.5vw, 54px); line-height: 1.08; letter-spacing: -.03em; }
.lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--muted); max-width: 34em; }
.sec-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .h-section { margin-top: 16px; }
.sec-head .lead { margin-top: 18px; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.line > span { display: block; text-wrap: balance; }
.line--muted { color: #8C8898; }

.js [data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1s var(--e-quart), transform 1.2s var(--e-expo); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-lines] .line > span { transform: translate3d(0, 108%, 0); transition: transform 1.25s var(--e-expo); }
.js [data-lines].is-in .line > span { transform: none; }
.js [data-lines].is-in .line:nth-child(2) > span { transition-delay: .09s; }
.js [data-lines].is-in .line:nth-child(3) > span { transition-delay: .18s; }

/* ---------- Shared atoms ---------- */
.avatar { width: 22px; height: 22px; border-radius: 50%; flex: none; background: conic-gradient(from 210deg, #8456CF, #25134D, #6A29C5, #CDB9FF, #8456CF); }
.usdc { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--usdc); box-shadow: inset 0 0 0 2.5px #fff, 0 0 0 1px var(--usdc); display: inline-block; }
.tk { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: #fff; border: 1px solid var(--line-2); font-size: 9px; font-weight: 600; line-height: 1; }
.tk--usdc { background: var(--usdc); border-color: var(--usdc); color: #fff; }
.spinner { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--lilac-2); border-top-color: var(--purple); animation: spin 1s linear infinite; }
.spinner--xs { width: 12px; height: 12px; border-width: 1.5px; }
.spinner--light { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--ok { background: var(--ok-bg); color: var(--ok-ink); }
.co-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.co-brand svg { width: 20px; height: 20px; color: var(--purple); }
.co-btn { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 600; }
.co-btn span { display: inline-flex; align-items: center; gap: 10px; }
.co-btn svg { width: 16px; height: 16px; }
.co-btn--primary { background: #6A29C5; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px -6px rgba(106, 41, 197, .6); }
.co-row { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; background: #fff; }
.co-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--ok-ink); white-space: nowrap; }
.co-tag svg { width: 14px; height: 14px; color: var(--ok); }
.co-asset { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.co-status { display: flex; align-items: center; gap: 14px; min-height: 56px; }
.co-status strong { display: block; font-size: 15px; font-weight: 600; }
.co-status div span { display: block; font-size: 13px; color: var(--muted); }
.drawcheck { width: 40px; height: 40px; flex: none; }
.drawcheck circle { fill: var(--ok-bg); }
.drawcheck path { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.fwm__row, .snode__row, .wrow { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; background: #fff; transition: border-color .4s, background-color .4s, opacity .5s, transform .4s var(--e-quart); }
.fwm__row.is-hl, .snode__row.is-hl, .wrow.is-hl { border-color: rgba(106, 41, 197, .35); background: var(--lilac); }
.fwm__ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--off); border: 1px solid var(--line); color: var(--purple-deep); }
.fwm__ic svg { width: 14px; height: 14px; }
.fwm__tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid rgba(106, 41, 197, .25); font-size: 11px; color: var(--purple); }
.qr { color: var(--ink); aspect-ratio: 1; }
.qr svg { width: 100%; height: 100%; }
.wt { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; border-radius: 10px; color: #fff; }
.wt svg { width: 16px; height: 16px; }
.wt--a { background: #6A29C5; }
.wt--b { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.wt--c { background: linear-gradient(135deg, #3A2372, #25134D); }
.wt--d { background: #101014; }
.tchip { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); font-size: 15px; font-weight: 600; white-space: nowrap; }
.tchip i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #F1EEF8; font-size: 12px; font-weight: 700; font-style: normal; }
.tchip--usdc { border-color: rgba(39, 117, 202, .35); }
.tchip--usdc i { background: var(--usdc); color: #fff; }
.tchip--lg { height: 58px; padding: 0 22px 0 10px; font-size: 18px; box-shadow: var(--sh-md); }
.tchip--lg i { width: 38px; height: 38px; font-size: 15px; }

.hbiz { width: 320px; padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lg); color: var(--ink); }
.hbiz__top { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.hbiz__ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--lilac); color: var(--purple); }
.hbiz__ic svg { width: 18px; height: 18px; }
.hbiz__row { margin-top: 16px; display: flex; align-items: center; gap: 14px; }
.coin { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--usdc); color: #fff; font-family: var(--f-display); font-size: 22px; font-weight: 700; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(39, 117, 202, .7); }
.hbiz__amt { font-family: var(--f-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.hbiz__sub { margin-top: 4px; font-size: 13px; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn { --h: 48px; position: relative; display: inline-flex; align-items: center; gap: 10px; height: var(--h); padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: box-shadow .4s var(--e-quart), transform .4s var(--e-quart), filter .4s, background-color .4s; }
.btn__arrow { width: 16px; height: 16px; transition: transform .6s var(--e-expo); }
.btn--primary { background: #6A29C5; color: #fff; box-shadow: 0 1px 2px rgba(37, 19, 77, .18); }
.btn--primary:hover { background: #5A21AB; }
.btn--primary:hover .btn__arrow, .btn--light:hover .btn__arrow { transform: translate3d(4px, 0, 0) rotate(-45deg); }
.btn--primary:active, .btn--light:active { transform: translate3d(0, 1px, 0); }
.btn--light { background: #fff; color: var(--purple-deep); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .45); }
.btn--light .btn__arrow { color: var(--purple); }
.btn--light:hover { background: var(--lilac-2); }
.btn--play { padding: 0; gap: 12px; color: var(--ink); font-weight: 500; }
.btn__play { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md); color: var(--purple); transition: transform .6s var(--e-expo); }
.btn__play svg { width: 14px; height: 14px; margin-left: 2px; }
.btn--play:hover .btn__play { transform: scale(1.08); }
.btn--sm { --h: 42px; padding: 0 18px 0 20px; font-size: 14px; }
.btn--lg { --h: 54px; padding: 0 26px; font-size: 16px; }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .6s var(--e-quart), box-shadow .6s var(--e-quart); }
.nav__inner { height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; transition: height .6s var(--e-expo); }
.nav.is-scrolled { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav.is-scrolled .nav__inner { height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); justify-self: start; }
.logo__mark { width: 38px; height: 30px; }
.logo__word { font-family: var(--f-display); font-size: 18px; font-weight: 700; letter-spacing: .01em; }
.nav__links { display: flex; gap: 40px; }
.nav__links a { position: relative; padding: 6px 0; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .4s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px; background: var(--purple); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--e-expo); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { justify-self: end; }
.nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--purple-bright), var(--purple)); transform: scaleX(0); transform-origin: left; opacity: 0; transition: opacity .6s; }
.nav.is-scrolled .nav__progress { opacity: 1; }
.nav__toggle { display: none; position: relative; width: 44px; height: 44px; justify-self: end; border-radius: 50%; }
.nav__toggle > span:not(.sr-only) { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--ink); transition: transform .5s var(--e-expo); }
.nav__toggle > span:nth-child(1) { top: 18px; }
.nav__toggle > span:nth-child(2) { top: 25px; }
.nav.is-open .nav__toggle > span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__toggle > span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: calc(var(--nav-h) + 32px) var(--gutter) 40px; background: #fff; }
.menu[hidden] { display: none; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.menu .btn { justify-content: center; }
@media (max-width: 899px) {
  :root { --nav-h: 64px; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav.is-scrolled .nav__inner { height: 58px; }
  .nav.is-open { background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; background: #F6F5FA; --k: 1; --ks: 1; }
.hero__sticky { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1100px 680px at 52% 26%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #FCFBFF 0%, #F1EFF7 100%); }
.hero__light { position: absolute; inset: 0; background: linear-gradient(112deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .8) 32%, rgba(255, 255, 255, 0) 46%), radial-gradient(600px 400px at 8% 20%, rgba(106, 41, 197, .06), transparent 70%); }
.hero__desk { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #EEEBF4 0%, #E6E2EE 100%); box-shadow: inset 0 1px 0 #fff, 0 -1px 0 #E1DCEB; }
.hero__main { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; width: 100%; max-width: 1440px; margin: 0 auto; padding: calc(var(--nav-h) + 40px) var(--gutter) 48px; }
.hero__copy { position: relative; order: -1; text-align: center; }
.hero__title { margin-top: 20px; font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 4.3vw, 72px); line-height: 1.03; letter-spacing: -.028em; }
.hero__title em { background: linear-gradient(90deg, #6A29C5, #8456CF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { margin: 24px auto 0; max-width: 30em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: #4A4656; }
.hero__ctas { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; }
.js .hero__in { animation: enterUp 1.2s var(--e-expo) both; animation-delay: calc(var(--d, 0) * 1s + .1s); }
.js .hero__title .line > span { animation: lineUp 1.3s var(--e-expo) both .12s; }
.js .hero__title .line:nth-child(2) > span { animation-delay: .2s; }
.js .hero__title .line:nth-child(3) > span { animation-delay: .28s; }
@keyframes enterUp { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes lineUp { from { transform: translate3d(0, 108%, 0); } }

/* scene canvas 560×660 */
.hero__scene { position: relative; height: calc(660px * var(--k)); }
.hscene { position: absolute; left: 50%; top: 0; width: 560px; height: 660px; transform: translateX(-50%) scale(var(--k)); transform-origin: 50% 0; }
.hscene__shadow { position: absolute; left: 40px; right: 30px; bottom: 26px; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(37, 19, 77, .22), transparent); filter: blur(6px); }
.tent-p { position: absolute; left: 10px; top: 60px; width: 330px; height: 530px; }
.tent { position: relative; width: 100%; height: 100%; transform: perspective(1400px) rotateY(22deg) rotateZ(-3deg); transform-origin: 50% 100%; animation: floatA 7s var(--e-io) infinite alternate; }
.tent__leg { position: absolute; right: -54px; top: 46px; bottom: 6px; width: 120px; border-radius: 14px; background: linear-gradient(90deg, #D5D1DE, #EEEDF3 70%); transform: skewY(-14deg); z-index: -1; }
.tent__card { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 30px 26px 26px; border-radius: 26px; background: #fff; border: 1px solid #EEEAF6; box-shadow: 0 34px 70px -28px rgba(37, 19, 77, .35); text-align: center; }
.tent__brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 16px; font-weight: 700; }
.tent__brand svg { width: 24px; height: 24px; }
.tent__pay { margin-top: 26px; font-size: 15px; color: var(--muted); }
.tent__amt { margin-top: 2px; font-family: var(--f-display); font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.tent__order { margin-top: 4px; font-size: 13px; color: var(--muted); }
.tent__qr { position: relative; width: 196px; height: 196px; margin-top: 20px; padding: 16px; border-radius: 18px; background: #F5F2FB; }
.tent__qr .qr { padding: 8px; border-radius: 10px; background: #fff; }
.tent__qr > i { position: absolute; width: 26px; height: 26px; border: 3px solid var(--purple); }
.tent__qr > i:nth-of-type(1) { left: -3px; top: -3px; border-right: 0; border-bottom: 0; border-top-left-radius: 16px; }
.tent__qr > i:nth-of-type(2) { right: -3px; top: -3px; border-left: 0; border-bottom: 0; border-top-right-radius: 16px; }
.tent__qr > i:nth-of-type(3) { left: -3px; bottom: -3px; border-right: 0; border-top: 0; border-bottom-left-radius: 16px; }
.tent__qr > i:nth-of-type(4) { right: -3px; bottom: -3px; border-left: 0; border-top: 0; border-bottom-right-radius: 16px; }
.tent__paid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: inherit; background: rgba(255, 255, 255, .93); font-weight: 600; color: var(--ok-ink); opacity: 0; transition: opacity .6s var(--e-quart); }
.tent__paid svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--ok); color: #fff; }
.hero:is([data-step="3"], [data-step="4"]) .tent__paid { opacity: 1; }
.tent__cap { margin-top: 16px; font-size: 13px; color: var(--muted); }
.wallets { margin-top: auto; display: flex; gap: 10px; }
.phone-p { position: absolute; left: 262px; top: 196px; width: 250px; height: 512px; }
.p3 { position: relative; width: 250px; height: 512px; padding: 9px; border-radius: 46px; background: linear-gradient(145deg, #2A2833, #121117 60%); box-shadow: 0 40px 80px -30px rgba(16, 16, 20, .55), inset 0 0 0 1.5px #3A3744; transform: perspective(1400px) rotateY(-12deg) rotateZ(-10deg); transform-origin: 50% 60%; animation: floatB 6s var(--e-io) infinite alternate; }
.p3__screen { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 12px 16px 18px; border-radius: 38px; background: linear-gradient(180deg, #FBFAFE, #F2F0F8); }
.p3__bar { position: relative; width: 100%; height: 22px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; }
.p3__bar i { position: absolute; left: 50%; top: 0; width: 78px; height: 22px; margin-left: -39px; border-radius: 12px; background: #101014; }
.p3__bar b { width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); box-shadow: inset -8px 0 0 var(--ink); }
.p3__title { margin-top: 22px; font-size: 16px; font-weight: 600; }
.p3__frame { position: relative; width: 172px; height: 172px; margin-top: 18px; padding: 14px; }
.p3__frame .qr { padding: 10px; border-radius: 12px; background: #fff; box-shadow: var(--sh-sm); transform: perspective(500px) rotateX(8deg) rotateZ(4deg); }
.p3__frame > i { position: absolute; width: 24px; height: 24px; border: 2.5px solid var(--purple); }
.p3__frame > i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 12px; }
.p3__frame > i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 12px; }
.p3__frame > i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 12px; }
.p3__frame > i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 12px; }
.p3__scan { position: absolute; left: 6%; right: 6%; top: 16%; height: 3px; border-radius: 3px; background: var(--purple-bright); box-shadow: 0 0 22px 6px rgba(132, 86, 207, .45); opacity: 0; }
.p3[data-ph="scan"] .p3__scan { opacity: 1; animation: phscan 1.6s var(--e-io) infinite alternate; }
@keyframes phscan { to { top: 82%; } }
.p3__state { position: relative; width: 100%; margin-top: auto; display: grid; }
.p3__state > div { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .35s var(--e-quart), transform .8s var(--e-expo); }
.p3__state p { font-size: 14px; font-weight: 600; }
.p3__state small { font-size: 11px; color: var(--muted); }
.p3[data-ph="scan"] [data-p="scan"], .p3[data-ph="send"] [data-p="send"], .p3[data-ph="done"] [data-p="done"] { opacity: 1; transform: none; transition-delay: .12s; }
.p3__k { align-self: flex-start; font-size: 11px !important; font-weight: 500 !important; color: var(--muted); }
.p3__wallets { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.p3__wallets span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-radius: 12px; background: #fff; box-shadow: var(--sh-sm); font-size: 10.5px; font-weight: 500; }
.p3__wallets .wt { width: 30px; height: 30px; border-radius: 9px; }
.p3__ok { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: #fff; }
.p3__ok svg { width: 20px; height: 20px; }
@keyframes floatA { to { translate: 0 -8px; } }
@keyframes floatB { to { translate: 0 10px; } }

/* status canvas 320×620 */
.hero__status { position: relative; height: calc(620px * var(--ks)); }
.hstat { position: absolute; left: 50%; top: 0; width: 320px; height: 620px; transform: translateX(-50%) scale(var(--ks)); transform-origin: 50% 0; }
.hstat__wire { position: absolute; inset: 0; width: 320px; height: 620px; overflow: visible; }
.hstat__base { fill: none; stroke: #E2DCF3; stroke-width: 2; }
.hstat__draw { fill: none; stroke: var(--purple); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hs { position: absolute; width: 236px; height: 74px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-radius: 18px; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); box-shadow: var(--sh-md); opacity: .55; transform: translate3d(10px, 0, 0); transition: opacity .6s var(--e-quart), transform .9s var(--e-expo), border-color .6s; }
.hs p { font-size: 14px; font-weight: 600; }
.hs small { font-size: 12px; color: var(--muted); }
.hs--1 { left: 36px; top: 0; }
.hs--2 { left: 84px; top: 150px; }
.hs--3 { left: 36px; top: 300px; }
.hs__dot { width: 14px; height: 14px; flex: none; border-radius: 50%; background: #fff; border: 3px solid #D9D2F0; transition: background-color .5s, border-color .5s, box-shadow .5s; }
.hs__dot--ok { width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: #E6E3EE; color: #fff; }
.hs__dot--ok svg { width: 13px; height: 13px; }
.hstat .hbiz { position: absolute; left: 0; top: 450px; opacity: .55; transform: translate3d(0, 10px, 0) scale(.98); transition: opacity .6s var(--e-quart), transform .9s var(--e-expo), border-color .6s, box-shadow .6s; }
.hero:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .hs--1,
.hero:is([data-step="2"], [data-step="3"], [data-step="4"]) .hs--2,
.hero:is([data-step="3"], [data-step="4"]) .hs--3 { opacity: 1; transform: none; }
.hero:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .hs--1 .hs__dot,
.hero:is([data-step="2"], [data-step="3"], [data-step="4"]) .hs--2 .hs__dot { background: var(--purple); border-color: #D5C8EE; box-shadow: 0 0 0 5px rgba(106, 41, 197, .12); }
.hero:is([data-step="3"], [data-step="4"]) .hs--3 .hs__dot--ok { background: var(--ok); box-shadow: 0 0 0 5px rgba(18, 154, 87, .14); }
.hero[data-step="1"] .hs--1, .hero[data-step="2"] .hs--2, .hero[data-step="3"] .hs--3 { border-color: rgba(106, 41, 197, .35); }
.hero[data-step="4"] .hstat .hbiz { opacity: 1; transform: none; border-color: rgba(106, 41, 197, .35); box-shadow: var(--sh-lg), 0 0 0 6px rgba(106, 41, 197, .06); }

/* strip */
.hero__strip { position: relative; z-index: 3; background: rgba(255, 255, 255, .92); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hstrip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 22px 24px; }
.hstrip li { position: relative; display: grid; row-gap: 6px; padding-right: 40px; }
.hstrip li:not(:last-of-type)::after { content: "→"; position: absolute; right: 12px; top: 36px; color: #A9A4B6; font-size: 16px; }
.hstrip__n { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.hstrip__dot { position: relative; z-index: 1; width: 10px; height: 10px; margin: 4px 0; border-radius: 50%; background: #D9D2F0; transition: background-color .5s, box-shadow .5s; }
.hstrip p { margin-top: 4px; font-size: 15px; font-weight: 600; color: #8C8898; transition: color .5s; }
.hstrip small { font-size: 13px; color: var(--muted); }
.hstrip__line { position: absolute; left: var(--gutter); right: var(--gutter); top: 49px; height: 1px; background: #E6E1F2; }
.hstrip__line i { position: absolute; inset: 0; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--e-expo); }
.hero[data-step="0"] .hstrip li:nth-of-type(1) .hstrip__dot, .hero:is([data-step="1"], [data-step="2"]) .hstrip li:nth-of-type(-n+2) .hstrip__dot,
.hero[data-step="3"] .hstrip li:nth-of-type(-n+3) .hstrip__dot, .hero[data-step="4"] .hstrip li .hstrip__dot { background: var(--purple); box-shadow: 0 0 0 4px rgba(106, 41, 197, .14); }
.hero[data-step="0"] .hstrip li:nth-of-type(1) p, .hero:is([data-step="1"], [data-step="2"]) .hstrip li:nth-of-type(-n+2) p,
.hero[data-step="3"] .hstrip li:nth-of-type(-n+3) p, .hero[data-step="4"] .hstrip li p { color: var(--ink); }
.hero:is([data-step="1"], [data-step="2"]) .hstrip__line i { transform: scaleX(.26); }
.hero[data-step="3"] .hstrip__line i { transform: scaleX(.52); }
.hero[data-step="4"] .hstrip__line i { transform: scaleX(.78); }

@media (min-width: 1100px) {
  .hero__sticky { min-height: 100vh; min-height: 100svh; }
  .hero__main { flex: 1; min-height: 0; grid-template-columns: minmax(0, .9fr) minmax(0, 1.12fr) minmax(0, .6fr); align-items: center; gap: 28px; padding: calc(var(--nav-h) + 8px) 48px 0; }
  .hero__copy { order: 2; text-align: left; }
  .hero__lead { margin-left: 0; }
  .hero__ctas { justify-content: flex-start; }
  .hero__scene { order: 1; align-self: stretch; height: auto; }
  .hscene { left: auto; right: 0; top: auto; bottom: 0; transform: scale(var(--k)); transform-origin: 100% 100%; }
  .hero__status { order: 3; align-self: stretch; height: auto; }
  .hstat { left: auto; right: 0; top: 50%; transform: translateY(-50%) scale(var(--ks)); transform-origin: 100% 50%; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .hero__sticky { position: relative; height: 100vh; height: 100svh; min-height: 720px; }
  .tent-p, .phone-p { will-change: transform; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .hero__main { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .hero__copy { grid-column: 1 / -1; }
}
@media (max-width: 1099px) { .hero__desk { height: 22%; } }
@media (max-width: 699px) {
  .hstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .hstrip li::after, .hstrip__line { display: none; }
  .hstrip li { padding-right: 0; }
}

/* ==========================================================================
   PROBLEM — "send to an address" becomes a TOKEN PE checkout
   state is data-state="old" | "new" on the section (set by scroll)
   ========================================================================== */
.problem { position: relative; background: radial-gradient(900px 600px at 85% 30%, #F5F2FB 0%, rgba(244, 241, 255, 0) 70%), #fff; }
.problem__sticky { padding-block: var(--sec-y); }
.problem__grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 20px; align-items: center; }
.problem__title { margin-top: 18px; font-size: clamp(38px, 4.3vw, 68px); line-height: 1.02; letter-spacing: -.028em; }
.problem__lead { margin-top: 22px; max-width: 30em; }

/* left: pain cards <-> comparison */
.pleft { position: relative; display: grid; margin-top: 36px; }
.pleft__old, .pleft__new { grid-area: 1 / 1; transition: opacity .5s var(--e-quart), transform .9s var(--e-expo), visibility 0s .5s; }
.pleft__old { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pleft__new { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; opacity: 0; visibility: hidden; transform: translate3d(0, 12px, 0); }
.problem[data-state="new"] .pleft__old { opacity: 0; visibility: hidden; transform: translate3d(0, -12px, 0); }
.problem[data-state="new"] .pleft__new { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
.pain { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.pain__ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--warn-bg); color: var(--warn); margin-bottom: 8px; }
.pain__ic svg { width: 18px; height: 18px; }
.pain__n { position: absolute; right: 14px; top: 14px; font-family: var(--f-mono); font-size: 11px; color: #B4AFC0; }
.pain b { font-size: 14px; font-weight: 600; }
.pain small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.pvs { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-sm); }
.pvs b { display: block; font-size: 14px; font-weight: 600; }
.pvs small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.pvs__ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.pvs__ic svg { width: 14px; height: 14px; }
.pvs--bad { background: #FBF7F5; border-color: #F3E4DA; }
.pvs--bad .pvs__ic { background: #FDE3D3; color: var(--warn); }
.pvs--good { background: var(--lilac); border-color: #E2D8F2; }
.pvs--good .pvs__ic { background: #6A29C5; color: #fff; }
.pvs__arrow { width: 18px; height: 18px; color: var(--muted); }

/* middle: connector with two labels */
.plink { position: relative; align-self: stretch; min-height: 420px; }
.plink__line { position: absolute; left: 14px; top: 12%; bottom: 12%; width: 1px; background: repeating-linear-gradient(to bottom, var(--line-2) 0 4px, transparent 4px 9px); }
.plink__line i { position: absolute; inset: 0; background: linear-gradient(180deg, #F08A3E, var(--ok)); transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--e-expo); }
.problem[data-state="new"] .plink__line i { transform: scaleY(1); }
.plink__tag { position: absolute; left: 14px; display: flex; gap: 10px; white-space: nowrap; transform: translateX(-9px); font-size: 12.5px; line-height: 1.35; color: var(--muted); transition: color .5s, opacity .5s; }
.plink__tag i { flex: none; width: 18px; height: 18px; margin-top: -1px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line-2); transition: background-color .5s, box-shadow .5s; }
.plink__tag--old { top: 26%; }
.plink__tag--new { top: 64%; }
.plink__tag--old i { background: #F08A3E; }
.plink__tag--new i { background: #D6D2DE; }
.problem[data-state="old"] .plink__tag--old { color: var(--ink); font-weight: 500; }
.problem[data-state="new"] .plink__tag--old { opacity: .5; }
.problem[data-state="new"] .plink__tag--new { color: var(--ink); font-weight: 500; }
.problem[data-state="new"] .plink__tag--new i { background: var(--ok); box-shadow: 0 0 0 1px var(--ok), 0 0 0 7px rgba(18, 154, 87, .12); }

/* right: the card morph */
.pmorph { position: relative; display: grid; padding: clamp(20px, 2.6vw, 36px); border-radius: 30px; background: linear-gradient(180deg, #F6F3FB, #FBFAFF); border: 1px solid #ECE7F6; }
.pcard { grid-area: 1 / 1; align-self: start; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lg); transition: opacity .55s var(--e-quart), transform 1s var(--e-expo), visibility 0s .55s; }
.pcard--new { opacity: 0; visibility: hidden; transform: translate3d(0, 24px, 0) scale(.97); }
.problem[data-state="new"] .pcard--old { opacity: 0; visibility: hidden; transform: translate3d(0, -20px, 0) scale(.97); }
.problem[data-state="new"] .pcard--new { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
.pcard__head { display: flex; align-items: center; gap: 12px; }
.pcard__head p { font-size: 15px; font-weight: 600; }
.pcard__head small { font-size: 12px; color: var(--muted); }
.pcard__head .pill { margin-left: auto; }
.pcard__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--grey); }
.pcard__ic svg { width: 18px; height: 18px; }
.pcard__ic--dark { background: #16132A; color: #fff; }

.ptabs { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ptab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); font-size: 12px; }
.ptab i { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.ptab i svg { width: 12px; height: 12px; }
.ptab b { display: block; font-weight: 600; }
.ptab small { display: block; color: var(--muted); font-size: 11px; }
.ptab--bad { background: #FFF6F1; border-color: #F6DCCB; }
.ptab--bad i { background: #FDE3D3; color: var(--warn); }
.ptab--good i { background: var(--ok-bg); color: var(--ok); }

.psteps { margin-top: 16px; display: grid; gap: 12px; }
.pstep__k { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pstep__k span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--grey); font-size: 10px; letter-spacing: 0; color: var(--ink); }
.pfield { margin-top: 6px; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; border-radius: 10px; background: #F7F6FA; border: 1px solid var(--line); font-size: 12px; }
.pfield svg { width: 14px; height: 14px; margin-left: auto; color: var(--muted); }
.pfield.mono { font-size: 11px; word-break: break-all; }
.pfield--select span { display: flex; flex-direction: column; line-height: 1.2; }
.pfield--select b { font-weight: 600; font-size: 13px; }
.pfield--select small { color: var(--muted); font-size: 11px; }
.pfield .tk { font-style: normal; width: 24px; height: 24px; font-size: 10px; }
.pchev { width: 14px; height: 14px; margin-left: auto; color: var(--muted); transform: rotate(90deg); }
.ptx { margin-top: 6px; display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); }
.ptx__row { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 12.5px; }
.ptx__row > i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #E3E0EA; }
.ptx__row b { font-weight: 600; }
.ptx__row span:not(.spinner) { display: flex; flex-direction: column; line-height: 1.25; }
.ptx__row small { font-size: 11px; color: var(--muted); }
.ptx__row time, .ptx__row .spinner { margin-left: auto; font-size: 11px; color: var(--muted); }
.ptx__row.is-done > i { background: #F08A3E; }
.ptx__row.is-wait > i { background: #F5B35C; animation: pulse 1.2s ease-in-out infinite; }
.ptx__row.is-off { color: #B4AFC0; }
@keyframes pulse { 50% { opacity: .35; } }

.pcard__label { margin-top: 22px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pcard__amt { margin-top: 2px; font-family: var(--f-display); font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.pcard__amt small { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.pcard__btn { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 18px; border-radius: 14px; background: linear-gradient(180deg, #23204A, #16132A); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 12px 24px -12px rgba(22, 19, 42, .7); }
.pcard__btn span { display: inline-flex; align-items: center; gap: 10px; }
.pcard__btn svg { width: 16px; height: 16px; }
.pbens { margin-top: 14px; display: grid; gap: 8px; }
.pben { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); }
.pben > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.3; }
.pben b { font-size: 14px; font-weight: 600; }
.pben small { font-size: 12px; color: var(--muted); }
.pben__ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--lilac); color: var(--purple); }
.pben__ic svg { width: 16px; height: 16px; }
.pben .pchev { transform: none; }
.pben--usdc { background: var(--lilac); border-color: #E2D8F2; }
.pben--usdc .pben__ic { background: #6A29C5; color: #fff; }
.js .problem[data-state="new"] .pben { animation: benIn .8s var(--e-expo) both; }
.js .problem[data-state="new"] .pben:nth-child(2) { animation-delay: .08s; }
.js .problem[data-state="new"] .pben:nth-child(3) { animation-delay: .16s; }
.js .problem[data-state="new"] .pben:nth-child(4) { animation-delay: .24s; }
@keyframes benIn { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* scroll walk-through (desktop): one address step at a time, then the checkout's promises */
.pstep, .pain, .pben { transition: opacity .6s var(--e-quart), transform .8s var(--e-expo), border-color .5s, background-color .5s, box-shadow .6s var(--e-expo); }
.pstep__k span, .pain__ic, .pfield, .ptx { transition: background-color .5s, color .5s, border-color .5s; }
.pfield.mono { position: relative; overflow: hidden; }
.pfield.mono::before { content: ""; position: absolute; inset: 6px 34px 6px 8px; border-radius: 4px; background: rgba(240, 138, 62, .16); transform: scaleX(0); transform-origin: left; }
.problem.is-scrub .pstep { opacity: .42; }
.problem.is-scrub .pstep.is-past { opacity: .72; }
.problem.is-scrub .pstep.is-act { opacity: 1; transform: translate3d(4px, 0, 0); }
.pstep.is-act .pstep__k span { background: #F08A3E; color: #fff; }
.pstep.is-act .pstep__k { color: var(--ink); }
.pstep.is-act :is(.pfield, .ptx) { background: #FFF8F3; border-color: #F3C3A0; }
.pstep.is-act .pfield.mono::before, .pstep.is-past .pfield.mono::before { transform: scaleX(min(1, calc(var(--pq, 0) * 4))); }
.problem.is-scrub .pain { opacity: .62; }
.problem.is-scrub .pain.is-act { opacity: 1; transform: translate3d(0, -6px, 0); border-color: #F3C3A0; box-shadow: var(--sh-md); }
.pain.is-act .pain__ic { background: #F08A3E; color: #fff; }
.problem.is-scrub .pben.is-act { transform: translate3d(6px, 0, 0); border-color: rgba(106, 41, 197, .35); box-shadow: var(--sh-sm); }
.plink__line::after { content: ""; position: absolute; left: -4px; top: calc(18% + var(--pq, 0) * 42%); width: 9px; height: 9px; border-radius: 50%; background: #F08A3E; opacity: 0; transition: top .35s var(--e-quart), background-color .5s, opacity .4s; }
.problem.is-scrub .plink__line::after { opacity: 1; }
.problem.is-scrub[data-state="old"] .plink__line i { transform: scaleY(calc(.18 + var(--pq, 0) * .42)); transition: transform .35s var(--e-quart); }
.problem[data-state="new"] .plink__line::after { top: 68%; background: var(--ok); transition: top 1s var(--e-expo), background-color .5s, opacity .4s; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .problem__track { height: 180vh; }
  .problem__sticky { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--nav-h) + 16px) 16px; }
  .problem__grid { width: 100%; }
}
@media (max-width: 1099px) {
  .problem__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plink { display: none; }
}
@media (max-width: 899px) {
  .problem__grid { grid-template-columns: minmax(0, 1fr); }
  .pleft__old { grid-template-columns: minmax(0, 1fr); }
  .pleft__new { grid-template-columns: minmax(0, 1fr); }
  .pvs__arrow { transform: rotate(90deg); justify-self: center; }
}

/* ==========================================================================
   BRAND MOMENT
   ========================================================================== */
.bm { position: relative; background: #F7F5FB; }
.bm__sticky { position: relative; overflow: hidden; padding-block: var(--sec-y); text-align: center; }
.bm__slides { position: relative; display: grid; justify-items: center; gap: 72px; }
.bm__big { max-width: 13.5em; margin-inline: auto; font-family: var(--f-display); font-size: clamp(36px, 5.4vw, 84px); font-weight: 700; line-height: 1.05; letter-spacing: -.028em; }
.bm__small { display: inline-block; margin-top: 28px; padding: 12px 24px; border-radius: 999px; background: #fff; border: 1px solid #E4DBF3; box-shadow: var(--sh-sm); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; color: var(--purple); }
.w { display: inline-block; }
.bm__outro { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 56px; padding-inline: var(--gutter); }
.bm__arrow svg { width: 22px; height: 22px; color: var(--purple); }
@media (prefers-reduced-motion: no-preference) {
  .bm__track { height: 200vh; }
  .bm__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: var(--nav-h) 0; }
  .bm__slides { gap: 0; width: 100%; }
  .bm__slide { grid-area: 1 / 1; will-change: transform, opacity; }
  .bm__slide--b { opacity: 0; }
  .bm__outro { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) { .bm__track { height: 200vh; } }

/* ==========================================================================
   HOW IT WORKS — a rail of four cards that slides sideways; the current card lifts
   ========================================================================== */
.flow { position: relative; background: var(--bg-alt); }
.flow__sticky { position: relative; overflow: hidden; padding-block: var(--sec-y); }
.flow__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: 48px; }
.flow__title { margin-top: 16px; font-size: clamp(34px, 3.8vw, 58px); letter-spacing: -.03em; }
.flow__title span { display: block; color: #8C8898; }
.flow__aside { justify-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.flow__lead { font-family: var(--f-display); font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.01em; }
.flow__aside .btn--ghost { color: var(--purple); height: auto; }

.flow__view { margin-top: clamp(36px, 6vh, 64px); }
.flow__rail { display: flex; gap: 24px; padding: 10px var(--edge) 14px; }
.fcard { position: relative; flex: none; width: clamp(300px, 29vw, 420px); min-height: clamp(360px, 46vh, 420px); display: flex; flex-direction: column; padding: 30px; border-radius: 24px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); transition: background-color .8s var(--e-expo), border-color .8s var(--e-expo), box-shadow .8s var(--e-expo), transform .9s var(--e-expo); }
.fcard > * { transition: opacity .8s var(--e-expo); }
.fcard__top { display: flex; align-items: center; justify-content: space-between; }
.fcard__step { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--lilac); font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }
.fcard__ic { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: #C9B8EA; color: #fff; transition: background-color .8s var(--e-expo); }
.fcard__ic svg { width: 21px; height: 21px; }
.fcard h3 { margin-top: 36px; font-family: var(--f-display); font-size: clamp(22px, 1.8vw, 27px); font-weight: 700; letter-spacing: -.025em; }
.fcard__d { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 30em; }
.fcard__ui { margin-top: auto; padding: 18px; border-radius: 16px; background: var(--off); border: 1px solid var(--line); }
.fcard__ui--row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fspec div { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; }
.fspec dt { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }
.fspec dd { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.fpill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-2); }
.fpill svg { width: 15px; height: 15px; }
.fpill.is-sel { background: var(--lilac); border-color: rgba(106, 41, 197, .3); color: var(--purple-deep); }
.fpill--muted { color: var(--muted); }
.fpill--ok { background: var(--ok-bg); border-color: transparent; color: var(--ok-ink); }
.fpill--ok svg { color: var(--ok); }
.fcard__arr { width: 16px; height: 16px; color: var(--muted); }
.fusdc { font-family: var(--f-display); font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.03em; color: var(--purple); line-height: 1.1; }
.fusdc small { margin-left: 6px; font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--purple-deep); }
.fusdc__to { margin-top: 10px; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }

/* the current card */
.fcard.is-cur { background: #fff; border-color: rgba(106, 41, 197, .32); box-shadow: var(--sh-lg); transform: translate3d(0, -8px, 0); }
.fcard.is-cur .fcard__ic { background: var(--purple); }

.flow__prog { position: relative; display: none; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .flow__track { height: 230vh; }
  .flow__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--nav-h) 0; }
  .flow__rail { will-change: transform; }
  .flow.is-live .fcard:not(.is-cur) > * { opacity: .5; }
  .flow__prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 5vh, 48px); padding-top: 18px; }
  .flow__bar { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 2px; border-radius: 2px; background: #E4DEF2; overflow: hidden; }
  .flow__bar i { position: absolute; inset: 0; background: var(--purple); transform: scaleX(0); transform-origin: left; will-change: transform; }
  .flow__n { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); transition: color .6s; }
  .flow__n.is-cur { color: var(--purple); }
}
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .flow__rail { flex-direction: column; padding-inline: var(--gutter); }
  .fcard { width: auto; min-height: 0; }
  .fcard h3 { margin-top: 24px; }
  .fcard__ui { margin-top: 24px; }
}
@media (max-width: 899px) {
  .flow__head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .flow__aside { justify-self: start; }
  .flow__rail { gap: 16px; }
  .fcard { padding: 24px; }
}

/* ==========================================================================
   STICKY STORY
   ========================================================================== */
.story { background: #fff; }
.story__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; width: 100%; }
.story__title { margin-top: 16px; max-width: 11em; }
.story__steps { position: relative; margin-top: 40px; padding-left: 28px; }
.story__rail { position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--line); }
.story__rail i { position: absolute; inset: 0; border-radius: inherit; background: var(--purple); transform: scaleY(0); transform-origin: top; }
.sstep { display: grid; grid-template-columns: 40px 1fr; column-gap: 6px; padding: 12px 0; opacity: .4; transition: opacity .6s var(--e-quart); }
.sstep.is-on { opacity: 1; }
.sstep__n { padding-top: 4px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); transition: color .6s; }
.sstep.is-on .sstep__n { color: var(--purple); }
.sstep__t { font-family: var(--f-display); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.sstep__b { grid-column: 2; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .8s var(--e-expo), opacity .6s var(--e-quart); }
.sstep__b > span { overflow: hidden; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 26em; }
.sstep.is-on .sstep__b { grid-template-rows: 1fr; opacity: 1; }
.sstep.is-on .sstep__b > span { padding-top: 8px; }
.stage-panel { padding: clamp(20px, 3vw, 36px); border-radius: 28px; background: linear-gradient(180deg, #F6F3FB, #FBFAFF); border: 1px solid #ECE7F6; }
.stage { position: relative; width: 100%; max-width: min(600px, calc(100svh - var(--nav-h) - 150px)); margin-inline: auto; aspect-ratio: 1; container-type: size; }
.stage__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.wire { fill: none; stroke: var(--line-2); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--e-expo) .25s, stroke .6s, opacity .6s; }
.stage :is(.snode, .schip, .stage__out, .stage__bar, .stage__track) { font-size: clamp(9px, 2.5cqw, 14px); }

/* merchant bar + progress track frame every phase */
.stage__bar { position: absolute; left: 2cqw; right: 2cqw; top: 1cqh; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: .65em .8em; border-radius: 14px; background: rgba(255, 255, 255, .72); border: 1px solid var(--line); }
.stage__merchant { display: inline-flex; align-items: center; gap: .65em; }
.stage__merchant .fwm__ic { width: 2.1em; height: 2.1em; }
.stage__merchant .fwm__ic svg { width: 1.1em; height: 1.1em; }
.stage__bar b { display: block; font-size: .92em; font-weight: 600; line-height: 1.3; }
.stage__bar small { display: block; font-size: .74em; line-height: 1.3; color: var(--muted); }
.stage__due { text-align: right; }
.stage__due b { font-size: 1.05em; font-weight: 700; }
.stage__track { position: absolute; left: 4cqw; right: 4cqw; bottom: 1.5cqh; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stage__line { position: absolute; left: 12.5%; right: 12.5%; top: calc(.5em - 1px); height: 2px; border-radius: 2px; background: var(--line-2); }
.stage__line i { position: absolute; inset: 0; border-radius: inherit; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--e-expo); }
.sdot { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6em; }
.sdot i { width: 1em; height: 1em; border-radius: 50%; background: #fff; border: 1.5px solid var(--line-2); transition: background-color .6s var(--e-expo), border-color .6s var(--e-expo), box-shadow .6s var(--e-expo); }
.sdot span { font-size: .76em; font-weight: 500; color: var(--muted); transition: color .6s; }
.sdot.is-done i { background: var(--purple); border-color: var(--purple); }
.sdot.is-cur i { background: var(--purple); border-color: var(--purple); box-shadow: inset 0 0 0 .2em #fff; }
.sdot:is(.is-done, .is-cur) span { color: var(--ink); }
.stage[data-phase="1"] .stage__line i { transform: scaleX(.3334); }
.stage[data-phase="2"] .stage__line i { transform: scaleX(.6667); }
.stage:is([data-phase="3"], [data-phase="4"]) .stage__line i { transform: scaleX(1); }

/* center node: wallet picker, then the TOKEN PE hub */
.snode { position: absolute; left: 50%; top: 50%; z-index: 2; width: 66cqw; height: 62cqh; transform: translate(-50%, -50%); overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lg); transition: width .9s var(--e-expo), height .9s var(--e-expo), border-color .6s; }
.snode__face { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity .45s var(--e-quart); }
.snode__face--connect { width: 66cqw; height: 62cqh; display: flex; flex-direction: column; justify-content: center; gap: .6em; padding: 1.6em; }
.snode__title { font-weight: 600; font-size: 1.1em; }
.snode__sub { margin-bottom: .5em; color: var(--muted); font-size: .92em; }
.snode__sub b { color: var(--ink); }
.stage .snode__row { height: 2.9em; font-size: 1em; }
.snode__face--hub { width: 44cqw; height: 34cqh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; opacity: 0; }
.snode__face--hub .co-brand { font-size: .78em; }
.snode__face--hub .co-brand svg { width: 1.6em; height: 1.6em; }
.snode__amt, .snode__rate, .snode__status { display: grid; justify-items: center; }
.snode__amt > span, .snode__rate > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .4s var(--e-quart), transform .8s var(--e-expo); }
.snode__amt { margin-top: .15em; font-family: var(--f-display); font-size: 1.7em; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.snode__rate { font-size: .76em; color: var(--muted); }
.snode__status { margin-top: .35em; }
.snode__status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .5em; height: 2.1em; padding: 0 .9em; border-radius: 999px; background: var(--lilac); color: var(--purple-deep); font-size: .84em; font-weight: 500; white-space: nowrap; opacity: 0; transform: translate3d(0, 4px, 0); transition: opacity .35s var(--e-quart), transform .6s var(--e-expo); }
.snode__status > span.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.snode__status svg { width: 1.1em; height: 1.1em; color: var(--ok); }
.stage[data-phase="1"] [data-a="1"], .stage:is([data-phase="2"], [data-phase="3"]) [data-a="2"], .stage[data-phase="4"] [data-a="4"] { opacity: 1; transform: none; transition-delay: .3s; }

/* asset chips */
.schip { position: absolute; left: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; gap: .55em; height: 2.8em; padding: 0 1em 0 .55em; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); font-weight: 600; white-space: nowrap; --x: 50; --y: 50; --s: .6; opacity: 0; transform: translate(calc(var(--x) * 1cqw - 50%), calc(var(--y) * 1cqh - 50%)) scale(var(--s)); transition: transform 1.1s var(--e-expo) calc(var(--i) * 45ms), opacity .6s var(--e-quart) calc(var(--i) * 45ms), border-color .6s, box-shadow .6s; }
.schip .tk { width: 1.55em; height: 1.55em; font-size: .7em; }
.schip__l { display: inline-flex; align-items: center; }
.schip__q { display: block; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .9s var(--e-expo), opacity .5s var(--e-quart); }
.stage:is([data-phase="2"], [data-phase="3"], [data-phase="4"]) .schip__q { max-width: 4em; opacity: 1; transition-delay: .2s; }

/* settlement card */
.stage__out { position: absolute; left: 50%; top: 80%; z-index: 3; display: inline-flex; align-items: center; gap: .75em; height: 3.5em; padding: 0 1.1em 0 .9em; border-radius: 14px; background: #fff; border: 1px solid rgba(106, 41, 197, .3); box-shadow: var(--sh-md); white-space: nowrap; opacity: 0; transform: translate(-50%, -20%); transition: opacity .6s var(--e-quart), transform 1s var(--e-expo); }
.stage__out-l b { display: block; font-size: .86em; font-weight: 600; line-height: 1.3; }
.stage__out-l small { display: block; font-size: .72em; line-height: 1.3; color: var(--muted); }
.stage__out strong { margin-left: .6em; font-family: var(--f-display); font-size: 1.1em; font-weight: 700; letter-spacing: -.01em; color: var(--purple-deep); }

/* phases */
.stage:not([data-phase="0"]) .snode { width: 44cqw; height: 34cqh; border-color: rgba(106, 41, 197, .28); }
.stage:not([data-phase="0"]) .snode__face--connect { opacity: 0; }
.stage:not([data-phase="0"]) .snode__face--hub { opacity: 1; transition-delay: .25s; }
.stage[data-phase="1"] .snode__status [data-st="1"], .stage[data-phase="2"] .snode__status [data-st="2"], .stage[data-phase="3"] .snode__status [data-st="3"], .stage[data-phase="4"] .snode__status [data-st="4"] { opacity: 1; transform: none; transition-delay: .3s; }
.stage:is([data-phase="1"], [data-phase="2"], [data-phase="3"]) .schip { --x: 13; --y: var(--ty); --s: 1; opacity: 1; }
.stage:is([data-phase="2"], [data-phase="3"]) .schip:not(.is-pick) { opacity: .34; }
.stage:is([data-phase="2"], [data-phase="3"], [data-phase="4"]) .schip.is-pick { border-color: rgba(106, 41, 197, .45); box-shadow: var(--sh-md); }
.stage[data-phase="4"] .schip:not(.is-pick) { --x: 50; --y: 50; --s: .4; opacity: 0; transition-duration: .9s, .5s; }
.stage[data-phase="4"] .schip.is-pick { --x: 13; --y: 50; --s: 1; opacity: 1; }
.stage:is([data-phase="1"], [data-phase="2"], [data-phase="3"]) .wire--in, .stage[data-phase="4"] .wire--in.is-pick { stroke-dashoffset: 0; }
.stage:is([data-phase="2"], [data-phase="3"]) .wire--in:not(.is-pick) { opacity: .35; }
.stage:is([data-phase="2"], [data-phase="3"], [data-phase="4"]) .wire--in.is-pick { stroke: var(--purple); }
.stage[data-phase="4"] .wire--in:not(.is-pick) { opacity: 0; transition-delay: 0s; }
.stage[data-phase="4"] .wire--out { stroke-dashoffset: 0; stroke: var(--purple); transition-delay: .5s; }
.stage[data-phase="4"] .stage__out { opacity: 1; transform: translate(-50%, -50%); transition-delay: .7s; }
.story__track { height: 260vh; }
.story__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-block: var(--nav-h) 0; overflow: hidden; }
@media (max-width: 899px) {
  .story__track { height: 280vh; }
  .story__sticky { align-items: flex-start; padding-top: calc(var(--nav-h) + 16px); }
  .story__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .story__left { display: contents; }
  .story__left .eyebrow { order: 0; }
  .story__title { order: 1; margin-top: 0; font-size: clamp(24px, 6.6vw, 32px); }
  .stage-panel { order: 2; padding: 14px; border-radius: 20px; }
  .stage { max-width: min(100%, 42svh); }
  .story__steps { order: 3; margin-top: 4px; padding-left: 0; display: grid; }
  .story__rail { display: none; }
  .sstep { grid-area: 1 / 1; opacity: 0; }
  .sstep.is-on { opacity: 1; }
  .sstep__b { grid-template-rows: 1fr; opacity: 1; }
  .sstep__b > span { padding-top: 6px; }
}

/* ==========================================================================
   WALLET / QR
   ========================================================================== */
.wq { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(56px, 8vh, 88px); background: linear-gradient(to top right, #3A129C 0%, #6A29C5 55%, #9A36F2 100%); color: #fff; }
.wq::before { content: ""; position: absolute; inset: -64px; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 10%, transparent 80%); mask-image: radial-gradient(80% 70% at 50% 30%, #000 10%, transparent 80%); }
.wq::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 100% 100%, transparent 219px, rgba(255, 255, 255, 0.14) 220px, rgba(255, 255, 255, 0.14) 221.5px, transparent 222.5px, transparent 379px, rgba(255, 255, 255, 0.1) 380px, rgba(255, 255, 255, 0.1) 381.5px, transparent 382.5px, transparent 539px, rgba(255, 255, 255, 0.07) 540px, rgba(255, 255, 255, 0.07) 541.5px, transparent 542.5px), radial-gradient(circle at 0% 0%, transparent 199px, rgba(255, 255, 255, 0.12) 200px, rgba(255, 255, 255, 0.12) 201.5px, transparent 202.5px, transparent 339px, rgba(255, 255, 255, 0.08) 340px, rgba(255, 255, 255, 0.08) 341.5px, transparent 342.5px); }
@media (prefers-reduced-motion: no-preference) {
  .wq::before { animation: gridDrift 24s linear infinite; }
}
@keyframes gridDrift { to { transform: translate3d(64px, 64px, 0); } }
.wq .sec-head { margin-bottom: clamp(28px, 5vh, 52px); }
.wq .eyebrow { color: #D9CCF2; }
.wq .h-section { color: #fff; }
.wq .line--muted { color: rgba(255, 255, 255, .6); }
.wq__card, .wq__card--qr { color: var(--ink); }
.wq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wq__card { position: relative; height: clamp(420px, calc(100svh - 350px), 580px); overflow: hidden; border-radius: 28px; background: #FBFAFE; border: 0; }
.wq__card--qr { background: #F6F4FA; }
.wq__text { position: relative; z-index: 2; padding: 40px 40px 0; }
.wq__k { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); }
.wq__k svg { width: 14px; height: 14px; }
.wq__text h3 { margin-top: 18px; font-family: var(--f-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.03em; }
.wq__text p:last-child { margin-top: 10px; color: var(--muted); max-width: 24em; }
.wq__desk-p { position: absolute; left: 40px; right: -48px; top: 212px; bottom: 0; }
.wq__desk { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px 16px 0 0; background: #fff; border: 1px solid var(--line); border-bottom: 0; box-shadow: var(--sh-lg); }
.win__chrome { flex: none; height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: var(--off); border-bottom: 1px solid var(--line); }
.win__chrome > i { width: 10px; height: 10px; border-radius: 50%; background: #E2DDEC; }
.win__url { display: inline-flex; align-items: center; gap: 7px; margin-inline: auto; height: 26px; padding: 0 14px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 12px; color: var(--muted); white-space: nowrap; }
.win__url svg { width: 12px; height: 12px; }
.wqd { display: flex; flex-direction: column; gap: 10px; max-width: 420px; padding: 24px 28px; }
.wqd__title { font-weight: 600; font-size: 16px; }
.wqd__sub { margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.wqd__sub b { color: var(--ink); }
.wrow { height: 46px; font-size: 14px; }
.wrow__end { margin-left: auto; display: grid; justify-items: end; }
.wrow__end > * { grid-area: 1 / 1; transition: opacity .3s; }
.wrow__end .fwm__tag { margin-left: 0; }
.wrow__end .spinner { opacity: 0; }
.wq[data-phase="1"] .wrow__end .spinner { opacity: 1; }
.wq[data-phase="1"] .wrow__end .fwm__tag { opacity: 0; }
.wqd__connected { display: grid; gap: 10px; margin-top: 4px; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .5s var(--e-quart), transform .9s var(--e-expo); }
.wq[data-phase="2"] .wqd__connected { opacity: 1; transform: none; }
.wq[data-phase="2"] .wrow:not(.is-hl) { opacity: .4; }
.wq__phone-p { position: absolute; left: 50%; top: 206px; width: calc(250px * var(--ps)); height: calc(520px * var(--ps)); margin-left: calc(-125px * var(--ps)); --ps: .82; }
.wq__phone-p .hphone { position: relative; width: 250px; height: 520px; transform: scale(var(--ps)); transform-origin: 0 0; }
.phone2 { position: absolute; left: 0; top: 0; width: 250px; height: 520px; padding: 8px; border-radius: 44px; background: linear-gradient(145deg, #2A2833, #121117 60%); box-shadow: 0 34px 70px -24px rgba(16, 16, 20, .5), inset 0 0 0 1.5px #3A3744; }
.phone2__screen { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: #15121C; }
.ph-cam { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(120% 80% at 50% 40%, #2A2438 0%, #120F19 72%); color: #fff; }
.ph-cam__top { font-size: 13px; font-weight: 600; }
.ph-cam__frame { position: relative; width: 156px; height: 156px; padding: 12px; }
.ph-cam__frame .qr { padding: 10px; border-radius: 10px; background: #fff; transform: perspective(500px) rotateX(10deg) rotateZ(-4deg); }
.ph-cam__frame > i { position: absolute; width: 22px; height: 22px; border: 2.5px solid var(--purple-soft); }
.ph-cam__frame > i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.ph-cam__frame > i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.ph-cam__frame > i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.ph-cam__frame > i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.ph-cam__scan { position: absolute; left: 10%; right: 10%; top: 14%; height: 2px; border-radius: 2px; background: #B9A3E0; box-shadow: 0 0 14px 2px rgba(132, 86, 207, .7); opacity: 0; }
.hphone[data-ph="cam"] .ph-cam__scan { opacity: 1; animation: phscan 1.6s var(--e-io) infinite alternate; }
.ph-cam__hint { font-size: 11px; color: rgba(255, 255, 255, .62); }
.ph-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px 22px; border-radius: 26px 26px 0 0; background: #fff; color: var(--ink); font-size: 12px; transform: translate3d(0, 105%, 0); transition: transform 1s var(--e-expo); }
.hphone:not([data-ph="cam"]) .ph-sheet { transform: none; }
.ph-sheet__grab { align-self: center; width: 36px; height: 4px; border-radius: 4px; background: var(--line-2); }
.ph-sheet__to { color: var(--muted); }
.ph-sheet__amt { margin-top: -6px; font-family: var(--f-display); font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.ph-sheet__amt span { font-size: 14px; letter-spacing: 0; color: var(--muted); }
.ph-sheet__row { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--line); }
.ph-sheet__row span:first-child { color: var(--muted); }
.ph-via { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.ph-via svg { width: 14px; height: 14px; color: var(--purple); }
.ph-sheet__btn { position: relative; display: grid; place-items: center; height: 42px; margin-top: 4px; border-radius: 12px; background: #6A29C5; color: #fff; font-size: 13px; font-weight: 600; }
.ph-sheet__btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .3s var(--e-quart); }
.ph-sheet__btn svg { width: 14px; height: 14px; }
.hphone:is([data-ph="cam"], [data-ph="sheet"]) .ph-sheet__btn .a, .hphone[data-ph="sending"] .ph-sheet__btn .b, .hphone[data-ph="sent"] .ph-sheet__btn .c { opacity: 1; }
.hphone[data-ph="sheet"] .ph-sheet__btn { animation: press 1.8s var(--e-quart) both; }
.hphone[data-ph="sent"] .ph-sheet__btn { background: var(--ok); }
@keyframes press { 0%, 55% { transform: none; } 62% { transform: scale(.96); } 72%, 100% { transform: none; } }
@media (max-width: 899px) {
  .wq__grid { grid-template-columns: minmax(0, 1fr); }
  .wq__card { height: 540px; }
  .wq__text { padding: 28px 24px 0; }
  .wq__desk-p { left: 24px; right: -40px; top: 196px; }
  .wq__phone-p { --ps: .74; top: 196px; }
}
@media (min-width: 900px) and (max-height: 860px) {
  .wq__phone-p { --ps: .68; top: 196px; }
  .wq__desk-p { top: 200px; }
  .wq__text { padding-top: 32px; }
}

/* ==========================================================================
   PRODUCT FILM
   ========================================================================== */
.film { padding-top: var(--sec-y); background: #fff; }
.film__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(36px, 5vw, 56px); }
.film__head .h-section { margin-top: 16px; }
.film__meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.film__frame { position: relative; overflow: hidden; height: min(56.25vw, 100vh); height: min(56.25vw, 100svh); min-height: 560px; max-height: 100svh; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); align-items: center; gap: clamp(28px, 4vw, 72px); padding: clamp(28px, 4vh, 64px) max(clamp(28px, 5vw, 80px), calc((100vw - 1440px) / 2)) clamp(72px, 10vh, 104px); border-radius: 28px; color: var(--ink); background: radial-gradient(900px 500px at 70% 40%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #F5F2FB, #EEEBF6); transform-origin: 50% 0; }
.film__caption { position: relative; display: grid; align-self: center; }
.fcap { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .45s var(--e-quart), transform .9s var(--e-expo); }
.fcap.is-on { opacity: 1; transform: none; transition-delay: .15s; }
.fcap__n { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--purple); }
.fcap__t { margin-top: 14px; font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.fcap__d { margin-top: 14px; font-size: 16px; color: var(--muted); max-width: 20em; }
.film__window { position: relative; justify-self: center; width: min(100%, calc((min(56.25vw, 100svh) - clamp(28px, 4vh, 64px) - clamp(72px, 10vh, 104px) - 8px) * 1.6)); aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 50px 110px -44px rgba(37, 19, 77, .45), 0 0 0 1px var(--line); container-type: inline-size; }
.fw__chrome { height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--off); border-bottom: 1px solid var(--line); }
.fw__chrome > i { width: 10px; height: 10px; border-radius: 50%; background: #E2DDEC; }
.fw__url { position: relative; display: grid; margin-left: 14px; flex: 1; max-width: 320px; height: 24px; align-items: center; padding: 0 10px; border-radius: 7px; background: #fff; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.fw__url span { grid-area: 1 / 1; transition: opacity .4s var(--e-quart); }
.fw__url [data-u="b"] { opacity: 0; }
.film__frame[data-scene="5"] .fw__url [data-u="a"] { opacity: 0; }
.film__frame[data-scene="5"] .fw__url [data-u="b"] { opacity: 1; }
.fw__screen { position: absolute; inset: 40px 0 0 0; overflow: hidden; font-size: 13px; }
.fw__store { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw; padding: 5cqw; transition: opacity .6s var(--e-quart); }
.fws__img { position: relative; overflow: hidden; border-radius: 12px; background: linear-gradient(150deg, #3A1F85, #25134D 60%); }
.fws__ring { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); transform: translate(-50%, -50%); }
.fws__ring--2 { width: 44%; border-color: rgba(182, 156, 255, .6); }
.fws__pro { position: absolute; left: 7%; bottom: 7%; font-family: var(--f-display); font-size: clamp(22px, 5cqw, 44px); font-weight: 700; color: #fff; }
.fws__info { display: flex; flex-direction: column; justify-content: center; }
.fws__brand { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fws__name { margin-top: 8px; font-family: var(--f-display); font-size: clamp(22px, 4cqw, 34px); font-weight: 700; letter-spacing: -.03em; }
.fws__desc { margin-top: 6px; color: var(--muted); }
.fws__price { margin-top: 18px; font-family: var(--f-display); font-size: clamp(20px, 3.4cqw, 28px); font-weight: 700; }
.fws__price small { font-family: var(--f-body); font-size: 13px; font-weight: 400; color: var(--muted); }
.fws__btns { margin-top: 20px; display: grid; gap: 8px; }
.fws__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 10px; font-weight: 600; }
.fws__btn--crypto { background: #6A29C5; color: #fff; }
.fws__btn--crypto svg { width: 16px; height: 16px; color: #fff; }
.fw__scrim { position: absolute; inset: 0; background: rgba(16, 16, 20, .32); opacity: 0; transition: opacity .6s var(--e-quart); }
.fw__modal { position: absolute; left: 50%; top: 50%; width: min(340px, 78%); transform: translate(-50%, -44%) scale(.94); overflow: hidden; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lg); opacity: 0; visibility: hidden; transition: opacity .45s var(--e-quart), transform .8s var(--e-expo), visibility 0s .45s; }
.fwm__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.fwm__head .co-brand { font-size: 11px; }
.fwm__head .co-brand svg { width: 18px; height: 18px; }
.fwm__head b { color: var(--ink); font-weight: 600; }
.fwm__body { display: grid; padding: 14px 16px 16px; min-height: 200px; }
.fw__pane { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0); transition: opacity .3s var(--e-quart), transform .8s var(--e-expo), visibility 0s .3s; }
.fwm__title { margin-bottom: 4px; font-weight: 600; font-size: 14px; }
.fwm__hint { font-size: 12px; color: var(--muted); }
.fwx { display: grid; }
.fwx > * { grid-area: 1 / 1; }
.fwx__b { display: flex; flex-direction: column; justify-content: center; gap: 8px; opacity: 0; }
.fw__dash { position: absolute; inset: 0; padding: 5cqw; opacity: 0; visibility: hidden; transform: translate3d(0, 12px, 0); transition: opacity .5s var(--e-quart), transform .9s var(--e-expo), visibility 0s .5s; }
.fwd__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fwd__k { font-size: 12px; }
.fwd__bal { margin-top: 4px; font-family: var(--f-display); font-size: clamp(26px, 5cqw, 44px); font-weight: 700; letter-spacing: -.03em; }
.fwd__bal small { font-family: var(--f-body); font-size: 14px; font-weight: 500; color: var(--muted); }
.fwd__badge { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--lilac); color: var(--purple-deep); font-size: 12px; font-weight: 500; white-space: nowrap; }
.fwd__badge svg { width: 16px; height: 16px; color: var(--purple); }
.fwd__table { margin-top: 4cqw; border-top: 1px solid var(--line); }
.fwd__row { display: grid; grid-template-columns: .8fr 1.2fr 1fr .9fr 1fr; align-items: center; gap: 10px; height: 48px; padding: 0 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.fwd__row strong { text-align: right; font-weight: 600; }
.fwd__row--head { height: 36px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fwd__row--head span:last-child { text-align: right; }
.fwd__paid { color: var(--muted); }
.fwd__st { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-ink); }
.fwd__st i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.fwd__row--new { background: var(--lilac); border-radius: 8px; border-bottom-color: transparent; }
.fwd__row--new strong { color: var(--purple); }
.fw__cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; margin: -3px 0 0 -4px; transform: translate3d(60%, 90%, 0); transition: transform 1s var(--e-expo), opacity .4s; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); pointer-events: none; }
.fw__cursor.is-hidden { opacity: 0; }
.fw__cursor.is-click { animation: click .35s var(--e-quart); }
@keyframes click { 50% { scale: .82; } }
.film__frame:is([data-scene="1"], [data-scene="2"], [data-scene="3"], [data-scene="4"]) .fw__scrim { opacity: 1; }
.film__frame:is([data-scene="1"], [data-scene="2"], [data-scene="3"], [data-scene="4"]) .fw__modal { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition: opacity .6s var(--e-quart) .05s, transform 1.1s var(--e-expo), visibility 0s; }
.fw__dash .fwd__row:not(.fwd__row--new) { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .5s var(--e-quart), transform 1s var(--e-expo); }
.film__frame[data-scene="5"] .fwd__row:not(.fwd__row--new) { opacity: 1; transform: none; }
.film__frame[data-scene="5"] .fwd__row:nth-child(1) { transition-delay: .25s; }
.film__frame[data-scene="5"] .fwd__row:nth-child(3) { transition-delay: .55s; }
.film__frame[data-scene="5"] .fwd__row:nth-child(4) { transition-delay: .7s; }
.film__frame[data-scene="5"] .fw__store { opacity: 0; }
.film__frame[data-scene="5"] .fw__dash { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--e-quart) .15s, transform 1s var(--e-expo) .15s, visibility 0s; }
.film__frame[data-scene="1"] .fw__pane[data-p="1"], .film__frame[data-scene="2"] .fw__pane[data-p="2"], .film__frame[data-scene="3"] .fw__pane[data-p="3"], .film__frame[data-scene="4"] .fw__pane[data-p="4"] { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--e-quart) .12s, transform .9s var(--e-expo) .12s, visibility 0s; }
.film__frame[data-scene="0"] [data-cursor="0"] { animation: pressF 3s var(--e-quart) both; }
.film__frame[data-scene="1"] [data-cursor="1"] { animation: pressRow 2.6s var(--e-quart) both; }
.film__frame[data-scene="3"] [data-cursor="3"] { animation: pressRow 2.8s var(--e-quart) both; }
.film__frame[data-scene="2"] .fwx__a { animation: outAt 2.6s var(--e-quart) both; }
.film__frame[data-scene="2"] .fwx__b { animation: inAt 2.6s var(--e-expo) both; }
.film__frame[data-scene="4"] .fwx__a { animation: outAt 2.8s var(--e-quart) both; }
.film__frame[data-scene="4"] .fwx__b { animation: inAt 2.8s var(--e-expo) both; }
.film__frame[data-scene="4"] .drawcheck path { animation: draw 2.8s var(--e-expo) both; }
.fwm__hint--late { opacity: 0; }
.film__frame[data-scene="3"] .fwm__hint--late { animation: inLate 2.8s var(--e-expo) both; }
.film__frame[data-scene="5"] .fwd__row--new { animation: rowIn 3.6s var(--e-expo) both; }
@keyframes pressF { 0%, 42% { transform: none; } 47% { transform: scale(.965); } 56%, 100% { transform: none; } }
@keyframes pressRow { 0%, 48% { transform: none; } 53% { transform: scale(.97); } 62%, 100% { transform: none; } }
@keyframes outAt { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes inAt { 0%, 45% { opacity: 0; transform: translate3d(0, 8px, 0); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes inLate { 0%, 60% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes draw { 0%, 50% { stroke-dashoffset: 24; } 80%, 100% { stroke-dashoffset: 0; } }
@keyframes rowIn { 0%, 12% { opacity: 0; transform: translate3d(0, -10px, 0); } 30%, 100% { opacity: 1; transform: none; } }
.film__frame.is-paused *, .film__frame.is-paused *::before, .film__frame.is-paused *::after { animation-play-state: paused !important; }
.film__bar { position: absolute; left: max(clamp(28px, 5vw, 80px), calc((100vw - 1440px) / 2)); right: max(clamp(28px, 5vw, 80px), calc((100vw - 1440px) / 2)); bottom: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.film__seg { display: flex; flex-direction: column; gap: 10px; text-align: left; padding-top: 8px; color: rgba(16, 16, 20, .4); font-size: 12px; font-weight: 500; transition: color .4s; }
.film__seg i { position: relative; display: block; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(37, 19, 77, .1); }
.film__seg i::after { content: ""; position: absolute; inset: 0; background: var(--purple); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.film__seg.is-on, .film__seg:hover { color: var(--ink); }
.film__toggle { position: absolute; top: clamp(20px, 2.4vw, 32px); right: clamp(20px, 2.4vw, 32px); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md); transition: border-color .4s; }
.film__toggle:hover { border-color: var(--purple); }
.film__toggle svg { width: 14px; height: 14px; }
.film__toggle .i-play { display: none; }
.film__frame.is-paused .film__toggle .i-play { display: block; }
.film__frame.is-paused .film__toggle .i-pause { display: none; }
@container (max-width: 560px) {
  .fw__store { grid-template-columns: minmax(0, 1fr); grid-template-rows: 34% 1fr; gap: 16px; padding: 16px; }
  .fws__info { justify-content: flex-start; }
  .fws__price { margin-top: 10px; }
  .fws__btns { margin-top: 12px; }
  .fwd__paid, .fwd__row > span:nth-child(2) { display: none; }
  .fwd__row { grid-template-columns: .9fr 1fr 1.2fr; }
  .fwd__top { flex-direction: column; }
}
@media (max-width: 899px) {
  .film__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .film__frame { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; padding: 28px 20px 88px; border-radius: 20px; }
  .film__caption { min-height: 132px; align-self: start; }
  .film__window { width: 100%; aspect-ratio: 4 / 5; }
  .film__seg span { display: none; }
  .film__bar { left: 20px; right: 64px; bottom: 32px; gap: 5px; }
  .film__toggle { top: auto; bottom: 18px; right: 16px; }
}

/* scroll mode (desktop): the film is pinned and scrubbed by scroll */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .film--scroll .film__wrap { height: 240vh; }
  .film--scroll .film__frame { position: sticky; top: 0; height: 100vh; height: 100svh; max-height: none; padding-top: calc(var(--nav-h) + 24px); background: radial-gradient(900px 560px at calc(28% + var(--P, 0) * 48%) calc(30% + var(--P, 0) * 24%), #FFFFFF 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #F5F2FB, #EEEBF6); }
  .film--scroll .film__window { width: min(100%, calc((100svh - var(--nav-h) - 32px - clamp(72px, 10vh, 104px)) * 1.6)); transform: perspective(1800px) rotateX(calc(var(--tilt, 0) * 1deg)) scale(var(--wz, 1)); transform-origin: 50% 40%; }
  .film--scroll .film__toggle { display: none; }
  .film--scroll .fw__cursor { transition: opacity .4s; }
  .film--scroll .film__frame :is([data-cursor], .fwx__a, .fwx__b, .drawcheck path, .fwm__hint--late, .fwd__row--new) { animation-play-state: paused !important; animation-delay: calc(var(--lp, 0) * var(--dur, 3s) * -1) !important; }
  .film--scroll .fws__ring { transform: translate(-50%, -50%) scale(calc(.9 + var(--P, 0) * .5)); }
  .film--scroll .fws__ring--2 { transform: translate(-50%, -50%) scale(calc(1.15 - var(--P, 0) * .4)); }
  .film--scroll .fws__pro { transform: translate3d(0, calc(var(--lp, 0) * -14px), 0); }
  .film--scroll .fcap.is-on { transform: translate3d(0, calc((.5 - var(--lp, 0)) * 16px), 0); }
}

/* ==========================================================================
   NETWORKS
   ========================================================================== */
.nets { position: relative; padding-block: var(--sec-y); background: var(--bg-alt); overflow: clip; }
.nets__rows { display: grid; gap: 14px; }
.nets__row { display: flex; gap: 14px; width: max-content; }
.nets__row--a { padding-left: var(--gutter); }
.nchip { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); font-family: var(--f-display); font-size: 18px; font-weight: 600; white-space: nowrap; }
.nchip i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--lilac); color: var(--purple); font-size: 14px; font-weight: 700; font-style: normal; }
.nchip--t { height: 52px; font-size: 16px; }
.nchip--t i { width: 32px; height: 32px; background: var(--grey); color: var(--ink); }
.nets__card { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: clamp(32px, 4vw, 56px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md); }
.nets__statement { font-family: var(--f-display); font-size: clamp(28px, 3vw, 44px); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; }
.nets__statement span { color: var(--muted); }
.nets__statement em { color: var(--purple); }
.nets__conv { display: grid; grid-template-columns: auto 110px auto; align-items: center; justify-content: end; }
.nets__in { display: grid; gap: 10px; }
.nets__in .tchip { height: 42px; }
.nets__wires { width: 110px; height: 200px; overflow: visible; }
.nets__wires path { fill: none; stroke: rgba(106, 41, 197, .28); stroke-width: 1.5; }
.nets__wires .pk { stroke: var(--purple); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .14 2; stroke-dashoffset: .14; }
.nets__statement em { position: relative; font-style: normal; }
.nets__statement em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .08em; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--e-expo) .5s; }
.nets__card.is-in .nets__statement em::after { transform: scaleX(1); }
.nets__conv, .nets__statement { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .js .nchip { opacity: 0; transform: translate3d(0, 18px, 0) scale(.96); transition: opacity .7s var(--e-quart) calc(var(--i, 0) * 50ms), transform 1s var(--e-expo) calc(var(--i, 0) * 50ms), border-color .4s, box-shadow .4s; }
  .js .nets__rows.is-in .nchip { opacity: 1; transform: none; }
  .nchip:hover { border-color: rgba(106, 41, 197, .4); box-shadow: var(--sh-md); }
  .nets__card.is-in .nets__in .tchip { animation: tokTurn 4.8s var(--e-quart) infinite; }
  .nets__card.is-in .nets__in .tchip:nth-child(2) { animation-delay: 1.2s; }
  .nets__card.is-in .nets__in .tchip:nth-child(3) { animation-delay: 2.4s; }
  .nets__card.is-in .nets__in .tchip:nth-child(4) { animation-delay: 3.6s; }
  .nets__card.is-in .pk { animation: packet 4.8s var(--e-io) infinite; }
  .nets__card.is-in .pk:nth-of-type(6) { animation-delay: 1.2s; }
  .nets__card.is-in .pk:nth-of-type(7) { animation-delay: 2.4s; }
  .nets__card.is-in .pk:nth-of-type(8) { animation-delay: 3.6s; }
  .nets__card.is-in .tchip--usdc { animation: take 1.2s var(--e-expo) .95s infinite; }
}
@keyframes tokTurn { 0%, 100% { transform: none; border-color: var(--line); } 4%, 16% { transform: translate3d(6px, 0, 0); border-color: rgba(106, 41, 197, .55); } 26% { transform: none; border-color: var(--line); } }
@keyframes packet { 0% { stroke-dashoffset: .14; } 20%, 100% { stroke-dashoffset: -1; } }
@keyframes take { 0%, 100% { transform: none; } 12% { transform: scale(1.045); } 40% { transform: none; } }
@media (prefers-reduced-motion: no-preference) { .nets__row { will-change: transform; } }
@media (max-width: 899px) {
  .nchip { height: 50px; font-size: 16px; }
  .nets__card { grid-template-columns: minmax(0, 1fr); }
  .nets__conv { justify-content: start; grid-template-columns: auto 60px auto; }
  .nets__wires { width: 60px; }
  .tchip--lg { height: 50px; font-size: 15px; }
}

/* ==========================================================================
   USE CASES
   ========================================================================== */
.cases { padding-block: var(--sec-y); background: #fff; }
.cases__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ccard { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 12px 12px 32px; border-radius: 24px; background: radial-gradient(560px 380px at 96% 62%, #7B2FE6 0%, #37128F 48%, #170945 100%); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .8s var(--e-expo); }
.ccard:hover { transform: translate3d(0, -3px, 0); }
.ccard__art { height: 200px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(180deg, #F6F3FB, #FBFAFF); }
.crow__art { width: 160px; height: 120px; overflow: visible; fill: none; stroke: var(--purple); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.crow__acc { fill: var(--purple); stroke: none; }
.js .crow__art :is(rect, path, circle, ellipse):not(.crow__acc) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ccard.is-in .crow__art :is(rect, path, circle, ellipse):not(.crow__acc) { animation: lineDraw 1.8s var(--e-expo) .25s both; }
@keyframes lineDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.js .crow__acc { opacity: 0; transition: opacity .6s var(--e-quart) 1.2s; }
.js .ccard.is-in .crow__acc { opacity: 1; }
.crow__shackle { transition: transform .6s var(--e-expo); }
.ccard:hover .crow__shackle { transform: translateY(-6px); }
.ccard__k { margin: 28px 20px 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .64); }
.ccard h3 { margin: 12px 20px 0; font-family: var(--f-display); font-size: clamp(21px, 1.7vw, 24px); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; max-width: 22em; }
.ccard > p:last-child { margin: 10px 20px 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .76); max-width: 34em; }
@media (max-width: 899px) { .cases__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   COMPARISON
   ========================================================================== */
.cmp { background: var(--bg-alt); }
.cmp__sticky { padding-block: var(--sec-y); }
.cmp__grid { max-width: 1000px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cmp__col { padding: clamp(28px, 3vw, 40px); border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.cmp__col--old { background: #F1F0F5; border-color: #E6E3EE; }
.cmp__col--new { border-color: rgba(106, 41, 197, .35); box-shadow: 0 30px 70px -34px rgba(106, 41, 197, .45); }
.cmp__label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cmp__label svg { width: 22px; height: 22px; }
.cmp__col--new .cmp__label { color: var(--purple); }
.cmp__list { margin-top: 24px; display: grid; gap: 14px; }
.cmp__item { display: flex; align-items: center; gap: 14px; font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.015em; }
.cmp__col--old .cmp__item { color: #55505F; }
.cmp__text { position: relative; display: inline-block; }
.cmp__strike { position: absolute; left: -3px; right: -3px; top: 55%; height: 2px; border-radius: 2px; background: #9A95A6; transform: scaleX(0); transform-origin: left; }
.cmp__x, .cmp__tick { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.cmp__x { background: #E3E0EA; color: #8C8898; }
.cmp__tick { background: #6A29C5; color: #fff; }
.cmp__x svg, .cmp__tick svg { width: 14px; height: 14px; }
.cmp__col--new .cmp__item:last-child .cmp__text { color: var(--purple); }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .cmp__track { height: 180vh; }
  .cmp__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-block: var(--nav-h) 0; overflow: hidden; }
  .cmp__sticky > .container { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cmp__strike { transform: none; } }
@media (max-width: 899px) { .cmp__grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding-block: var(--sec-y); background: #fff; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq__title { margin-top: 16px; }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list details:first-child { border-top: 1px solid var(--line); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; transition: color .3s; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--purple); }
.faq__icon { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--lilac); color: var(--purple); transition: transform .6s var(--e-expo), background-color .4s, color .4s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.8px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__list details[open] .faq__icon { transform: rotate(45deg); background: var(--purple); color: #fff; }
.faq__a { padding: 0 56px 26px 0; color: var(--muted); max-width: 40em; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__list details::details-content { height: 0; overflow: clip; transition: height .6s var(--e-expo), content-visibility .6s allow-discrete; }
  .faq__list details[open]::details-content { height: auto; }
}
@media (max-width: 899px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } .faq__a { padding-right: 0; } }

/* ==========================================================================
   FINAL
   ========================================================================== */
.final { padding-block: var(--sec-y); background: #fff; border-top: 1px solid var(--line); }
.final__title { max-width: 17em; margin-inline: auto; text-align: center; font-family: var(--f-display); font-size: clamp(32px, 4.4vw, 68px); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; }
.final__title .line { padding-bottom: .1em; margin-bottom: -.1em; }
.final__co { position: relative; display: inline-block; color: #9A95A6; }
.final__strike { position: absolute; left: -.04em; right: -.04em; top: 55%; height: .06em; min-height: 3px; border-radius: 99px; background: var(--purple); transform: scaleX(0); transform-origin: left; }
.final__card { position: relative; overflow: hidden; margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 48px; padding: clamp(36px, 5vw, 72px); border-radius: 32px; background: radial-gradient(760px 480px at 88% 0%, #7B2FE6 0%, #37128F 48%, #170945 100%); color: #fff; }
.final__h { margin-top: 16px; font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; }
.final__h span { color: rgba(255, 255, 255, .6); }
.final__h em { color: #D3C6EC; }
.final__lead { margin-top: 18px; max-width: 28em; color: rgba(255, 255, 255, .72); }
.final__card .btn { margin-top: 32px; }
.final__fine { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.final__viz { display: grid; gap: 16px; justify-items: end; }
.final__list { width: 320px; padding: 6px 20px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.final__list li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: rgba(255, 255, 255, .7); }
.final__list li:last-child { border-bottom: 0; }
.final__list b { color: #D3C6EC; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .final__strike { transform: none; } }
@media (max-width: 899px) {
  .final__card { grid-template-columns: minmax(0, 1fr); }
  .final__viz { justify-items: stretch; }
  .final__viz .hbiz, .final__list { width: auto; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding-top: clamp(56px, 7vw, 88px); background: #fff; border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr); gap: 48px; }
.footer__tag { margin-top: 18px; color: var(--muted); }
.footer__nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer__h { margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.footer__nav a { padding: 5px 0; font-size: 14px; color: var(--muted); transition: color .3s; }
.footer__nav a:hover { color: var(--purple); }
.footer__bottom { margin-top: clamp(48px, 6vw, 72px); padding-block: 24px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
@media (max-width: 899px) {
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__top > div:first-child { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-lines] .line > span { opacity: 1; transform: none; }
  .spinner { animation: none; }
}