/* Vision Pro landing. Shares header, footer, tokens, ticker and FAQ with vision.css. */

body.vp { background: var(--ink); }
.vp-plate-picture { display: contents; }
.vp main { position: relative; z-index: 1; }
.vp .site-footer { position: relative; z-index: 1; background: var(--ink); }
.vp .brand { gap: 9px; }
.vp-mark { width: 40px; height: auto; }
.vp-brand-pro { color: var(--coral); font-weight: 700; }
.vp .footer-brand .vp-mark { width: 36px; }
.vp-toast-app img { width: 78%; height: auto; object-fit: contain; transform: none; }

.vp-hex { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vp-hero .vp-hex { z-index: 3; }
.vp-ticker-band .vp-hex, .vp-final .vp-hex, .vp-faq .vp-hex { z-index: 1; }
.vp-match .vp-hex, .vp-journey .vp-hex { z-index: 2; }
.vp-money .vp-hex, .vp-eco .vp-hex { z-index: 0; }
.vp-money > :not(.vp-hex), .vp-eco > :not(.vp-hex) { position: relative; z-index: 1; }

.vp-kicker { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.vp h1, .vp h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.045em; }
.vp h1 em, .vp h2 em, .vp strong em { color: var(--coral); font-style: italic; }

.vp-cta { position: relative; display: inline-grid; grid-template-columns: 40px auto; gap: 12px; align-items: center; padding: 10px 22px 12px 10px; overflow: hidden; border: 1px solid #ffffff33; border-radius: 20px; background: #0b0d10c7; backdrop-filter: blur(16px); color: white; transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease; }
.vp-cta:hover, .vp-cta:focus-visible { transform: translateY(-2px); border-color: #ffffff70; background: #0b0d10ee; }
.vp-cta-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--coral); color: white; font-size: 17px; box-shadow: 0 8px 22px #ff654257; }
.vp-cta > span:nth-child(2) { display: grid; gap: 4px; }
.vp-cta small { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.vp-cta b { font: 500 21px/1 var(--serif); }
.vp-cta > i { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--coral), var(--acid)); animation: ctaMeter 3.4s ease-in-out infinite; transform-origin: left; }
.vp-cta.is-big { padding: 12px 28px 14px 12px; }
.vp-cta.is-big .vp-cta-mark { width: 48px; height: 48px; }
.vp-cta.is-big b { font-size: 26px; }
.vp-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid #ffffff3d; color: #ffffffc4; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.vp-ghost span { color: var(--acid); }

/* ------------------------------------------------------------------ hero */
.vp-hero { position: relative; }
.vp-hero-stage { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; background: #0b0c0e; }
.vp-hero-before, .vp-hero-reveal { position: absolute; inset: 0; width: 100%; height: 100%; }
.vp-hero-before { object-fit: cover; }
.vp-hero-reveal { z-index: 1; }
.vp-hero-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, #07080bf0 0%, #07080bb8 30%, #07080b33 60%, #07080b1f 76%, #07080b99 100%), linear-gradient(0deg, #07080bd9 0%, transparent 38%, transparent 78%, #07080b99); }
.vp-hero-copy { position: absolute; z-index: 5; left: clamp(28px, 6vw, 112px); top: 50%; width: min(620px, 46vw); transform: translateY(-46%); }
.vp-hero-copy h1 { margin: 20px 0 16px; font-size: clamp(44px, 4.9vw, 80px); line-height: .9; }
.vp-hero-sub { max-width: 420px; margin: 0; color: #ffffffc2; font-size: 15px; line-height: 1.55; }
.vp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.vp-hero-proof { position: absolute; z-index: 5; left: clamp(28px, 6vw, 112px); bottom: 5vh; display: flex; align-items: center; gap: 12px; color: #ffffffb8; font-size: 12px; }
.vp-hero-proof b { color: var(--acid); font: 600 20px/1 var(--serif); }
.vp-faces { display: flex; }
.vp-faces i { width: 30px; height: 30px; margin-left: -9px; border: 2px solid #0b0d10; border-radius: 50%; background: var(--face) center/cover; }
.vp-faces i:first-child { margin-left: 0; }
.vp-hero-phase { position: absolute; z-index: 5; right: 3.4vw; top: 50%; display: flex; align-items: center; gap: 12px; transform: rotate(90deg) translateX(50%); transform-origin: right center; color: #ffffffb0; font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.vp-hero-phase i { width: 80px; height: 1px; background: linear-gradient(90deg, #ffffff40, var(--coral), var(--acid)); }

.vp-toasts { position: absolute; z-index: 5; right: clamp(40px, 7vw, 130px); top: 22vh; display: grid; gap: 12px; width: min(340px, 28vw); }
.vp-toast { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border: 1px solid #ffffff24; border-radius: 18px; background: #0c0e11c4; backdrop-filter: blur(18px); box-shadow: 0 20px 50px #0008; opacity: 0; animation: toastLoop 11s cubic-bezier(.16,1,.3,1) infinite; }
.vp-toast.t2 { animation-delay: 1.1s; margin-left: 28px; }
.vp-toast.t3 { animation-delay: 2.2s; margin-left: 56px; }
.vp-toast p { display: grid; gap: 3px; margin: 0; }
.vp-toast small { color: #ffffff75; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.vp-toast b { font: 500 18px/1.05 var(--serif); }
.vp-toast em { color: #ffffff9c; font-size: 11px; font-style: normal; }
.vp-toast-app { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 12px; background: #16181c; }
.vp-toast-app.wa { background: #25d366; color: white; font-weight: 800; }
.vp-toast-face { width: 42px; height: 42px; border-radius: 50%; background: var(--face) center/cover; box-shadow: 0 0 0 2px var(--coral); }
.vp-toast.is-wa b { color: #9ef0b4; }

/* ---------------------------------------------------------------- ticker */
.vp-ticker-band { position: relative; overflow: hidden; isolation: isolate; padding: 11vh 0; background: #08090b; }
.vp-band-plate { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; animation: plateDrift 24s ease-in-out infinite alternate; }
.vp-band-tint { position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, #08090bf0, #08090b6b 42%, #08090bf0), radial-gradient(60% 50% at 50% 50%, #ff65421f, transparent 70%); }
.vp-ticker-band .ticker { position: relative; z-index: 2; }

/* --------------------------------------------------------- sticky scenes */
[data-scene] { position: relative; }
.vp-sticky { position: sticky; top: var(--header-compact); height: calc(100svh - var(--header-compact)); overflow: hidden; isolation: isolate; }
.vp-caption { position: absolute; z-index: 20; left: 50%; bottom: 4.6vh; margin: 0; padding: 0; list-style: none; transform: translateX(-50%); text-align: center; }
.vp-caption li { position: absolute; left: 50%; bottom: 0; padding: 10px 18px; transform: translate(-50%, 10px); border: 1px solid #ffffff24; border-radius: 999px; background: #0b0d10cc; backdrop-filter: blur(14px); color: white; font: 500 19px/1 var(--serif); white-space: nowrap; opacity: 0; transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.vp-scene-meter { position: absolute; z-index: 20; left: 50%; bottom: 2.2vh; width: 160px; height: 2px; transform: translateX(-50%); background: #ffffff1f; }
.vp-scene-meter i { display: block; height: 100%; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; background: linear-gradient(90deg, var(--cyan), var(--coral), var(--acid)); }
[data-step="0"] .vp-caption li:nth-child(1), [data-step="1"] .vp-caption li:nth-child(2), [data-step="2"] .vp-caption li:nth-child(3), [data-step="3"] .vp-caption li:nth-child(4), [data-step="4"] .vp-caption li:nth-child(5) { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ the match */
.vp-match { height: 440vh; }
.vp-match .vp-sticky { background: #0a100c; }
.vp-map { position: absolute; z-index: 0; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: .8; filter: invert(1) hue-rotate(140deg) saturate(.85) brightness(1.4) contrast(.9); transform: scale(calc(1.02 + var(--p, 0) * .06)); transition: transform .2s linear; }
.vp-map-tint { position: absolute; z-index: 1; inset: 0; background: radial-gradient(34% 40% at 50% 34%, #ff654226, transparent 72%), radial-gradient(70% 70% at 50% 40%, transparent 30%, #070a08e6 88%), linear-gradient(0deg, #070a08f2, transparent 40%); }
.vp-client-pin { position: absolute; z-index: 4; left: 50%; top: 33%; width: 0; height: 0; }
.vp-client-pin i { position: absolute; left: 0; top: 0; width: 38vmin; aspect-ratio: 1; border: 1px solid #ff65426b; border-radius: 50%; transform: translate(-50%, -50%) scale(.2); opacity: 0; animation: pinRing 3.8s ease-out infinite; }
.vp-client-pin i:nth-child(2) { animation-delay: 1.26s; }
.vp-client-pin i:nth-child(3) { animation-delay: 2.52s; }
.vp-client-pin b { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--coral); color: white; font: 600 20px/1 var(--serif); box-shadow: 0 0 0 7px #ff654230, 0 10px 30px #000a; }
.vp-client-pin span { position: absolute; left: 0; top: 34px; transform: translateX(-50%); color: #ffffffc4; font-size: 10px; font-weight: 700; letter-spacing: .2em; }

.vp-match-brief { position: absolute; z-index: 6; left: 50%; top: 5vh; display: flex; align-items: center; gap: 14px; width: min(860px, 90vw); transform: translateX(-50%); }
.vp-cat { display: grid; grid-template-columns: 38px auto; gap: 8px; align-items: center; padding: 6px 14px 6px 6px; border: 1px solid #ffffff2b; border-radius: 999px; background: #0b0d10cc; backdrop-filter: blur(14px); }
.vp-cat img { width: 38px; height: 38px; object-fit: contain; }
.vp-cat em { font: 500 17px/1 var(--serif); font-style: normal; }
.vp-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-styles em { padding: 6px 11px; border: 1px solid #ffffff21; border-radius: 999px; background: #0b0d10a8; color: #ffffff75; font-size: 11px; font-style: normal; transition: .45s cubic-bezier(.16,1,.3,1); }
.vp-styles em.on { border-color: #dfff6900; }
.vp-match.is-0 .vp-styles em.on { border-color: var(--acid); background: #dfff6926; color: var(--acid); box-shadow: 0 0 20px #dfff6933; }

.vp-rail { position: absolute; z-index: 7; left: 0; right: 0; top: calc(52% - 40px); height: 340px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.vp-rail-track { position: absolute; left: 50%; top: 40px; display: flex; gap: 16px; transform: translateX(var(--rail-x, 0px)); will-change: transform; }
.vp-pro { flex: 0 0 182px; display: grid; justify-items: center; gap: 6px; padding: 16px 12px 14px; border: 1px solid #ffffff1f; border-radius: 22px; background: #0c0f0dd9; backdrop-filter: blur(14px); text-align: center; transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1), border-color .4s ease, filter .5s ease, box-shadow .5s ease; }
.vp-pro-face { width: 78px; height: 78px; border-radius: 50%; background: var(--face) center/cover; box-shadow: 0 0 0 2px #ffffff1f; }
.vp-pro b { margin-top: 4px; font: 500 18px/1 var(--serif); }
.vp-pro small { color: #ffffff8a; font-size: 11px; }
.vp-pro p { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 4px 0 0; }
.vp-pro p em { padding: 4px 8px; border-radius: 999px; background: #ffffff0f; color: #ffffff85; font-size: 10px; font-style: normal; }
.vp-match.is-1 .vp-pro:not(.is-fit) { opacity: .3; filter: grayscale(1); transform: scale(.94); }
.vp-match.is-1 .vp-pro.is-fit { border-color: #dfff6980; }
.vp-match.is-1 .vp-pro.is-fit .vp-pro-face { box-shadow: 0 0 0 2px var(--acid), 0 0 24px #dfff6955; }
.vp-match.is-1 .vp-pro.is-fit p em.on { background: #dfff6926; color: var(--acid); }
.vp-match.is-2 .vp-pro:not(.is-chosen) { opacity: .16; }
.vp-match.is-2 .vp-pro.is-chosen { transform: scale(1.12); border-color: var(--coral); box-shadow: 0 0 0 1px var(--coral), 0 24px 60px #ff654240; }
.vp-match.is-3 .vp-rail { opacity: 0; transition: opacity .5s ease; }

.vp-catalog { position: absolute; z-index: 9; left: 50%; top: 50%; width: min(640px, 88vw); padding: 16px; border: 1px solid #ffffff2e; border-radius: 26px; background: #0c0e10e6; backdrop-filter: blur(20px); box-shadow: 0 40px 100px #000c; opacity: 0; transform: translate(-50%, -40%) scale(.92); transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.vp-match.is-3 .vp-catalog { opacity: 1; transform: translate(-50%, -46%) scale(1); }
.vp-catalog header { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 2px 4px 14px; }
.vp-catalog .vp-pro-face { width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--coral); }
.vp-catalog header span:nth-child(2) { display: grid; gap: 4px; }
.vp-catalog header b { font: 500 22px/1 var(--serif); }
.vp-catalog header small { color: #ffffff85; font-size: 11px; }
.vp-catalog header i { color: var(--coral); font-size: 20px; font-style: normal; animation: heartBeat 1.6s ease-in-out infinite; }
.vp-catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vp-catalog figure { position: relative; margin: 0; aspect-ratio: .8; overflow: hidden; border-radius: 14px; }
.vp-catalog figure img { width: 100%; height: 100%; object-fit: cover; }
.vp-catalog figcaption { position: absolute; left: 8px; bottom: 8px; padding: 5px 9px; border-radius: 999px; background: #0b0d10d9; color: var(--acid); font-size: 10px; }

/* ----------------------------------------------------------- the journey */
.vp-journey { height: 560vh; }
.vp-journey .vp-sticky { background: #0a0b0d; }
.vp-journey-plate { position: absolute; z-index: 0; top: 0; bottom: 0; left: 40%; width: 60%; height: 100%; object-fit: cover; object-position: 50% 26%; opacity: .92; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); transition: opacity .7s ease, filter .7s ease; }
.vp-journey.is-3 .vp-journey-plate { opacity: .42; filter: blur(2px); }
.vp-journey-tint { position: absolute; z-index: 1; inset: 0; background: radial-gradient(40% 50% at 27% 50%, #ff654214, transparent 70%), linear-gradient(90deg, #08090b 0%, #08090bf0 36%, #08090b52 60%, #08090b3d 84%, #08090bb3 100%), linear-gradient(0deg, #08090be0, transparent 40%, transparent 84%, #08090b99); }

.vp-phone { position: absolute; z-index: 5; left: 27%; top: 50%; height: min(600px, calc(100% - 120px)); aspect-ratio: .49; transform: translate(-50%, -52%); }
.vp-phone-shell { position: absolute; inset: 0; overflow: hidden; border: 7px solid #1a1b1e; border-radius: 46px; background: #0d0e10; box-shadow: inset 0 0 0 1px #ffffff23, 0 35px 100px #000c; }
.vp-phone-notch { position: absolute; z-index: 30; left: 50%; top: 9px; width: 30%; height: 20px; transform: translateX(-50%); border-radius: 20px; background: #07080a; }
.vp-phone-screens { position: absolute; inset: 0; }
.vp-screen { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.vp-journey[data-step="0"] .s-render, .vp-journey[data-step="1"] .s-brief, .vp-journey[data-step="2"] .s-send, .vp-journey[data-step="3"] .s-send, .vp-journey[data-step="4"] .s-send { opacity: 1; transform: none; }
.vp-screen header { position: absolute; z-index: 5; left: 18px; right: 18px; top: 42px; display: grid; gap: 5px; }
.vp-screen header small { color: var(--coral); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.vp-screen header b { font: 500 22px/1 var(--serif); }

.vp-wipe, .vp-wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-wipe img + img { clip-path: inset(0 0 0 calc(var(--wipe, 50) * 1%)); }
.vp-wipe u { position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(var(--wipe, 50) * 1%); width: 2px; background: white; box-shadow: 0 0 14px #000a; }
.vp-wipe u:after { content: '↔'; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background: white; color: #111; font-size: 12px; }
.s-render:after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(#000a, transparent 26%, transparent 76%, #000b); pointer-events: none; }
.s-render footer { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: 28px; display: flex; justify-content: space-between; color: #ffffffc4; font-size: 10px; font-weight: 700; letter-spacing: .16em; }

.s-brief { background: #f3eee6; color: #17171a; }
.s-brief header small { color: #b24d33; }
.vp-brief-thumb { position: absolute; left: 18px; right: 18px; top: 104px; height: 120px; width: calc(100% - 36px); object-fit: cover; border-radius: 16px; }
.s-brief dl { position: absolute; left: 18px; right: 18px; top: 236px; display: grid; gap: 0; margin: 0; }
.s-brief dl div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid #1717171a; opacity: 0; transform: translateX(-10px); transition: .45s cubic-bezier(.16,1,.3,1); }
.s-brief dt { color: #6d655d; font-size: 11px; }
.s-brief dd { margin: 0; font: 600 13px/1.1 var(--serif); text-align: right; }
.vp-swatches { display: flex; gap: 4px; }
.vp-swatches i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px #0002; }
.s-brief blockquote { position: absolute; left: 18px; right: 18px; bottom: 26px; margin: 0; padding: 12px 14px; border-radius: 14px; background: #17171a; color: white; font: italic 500 15px/1.3 var(--serif); opacity: 0; transition: .5s ease .2s; }
.vp-journey.is-b1 .s-brief dl div:nth-child(1) { opacity: 1; transform: none; }
.vp-journey.is-b2 .s-brief dl div:nth-child(2) { opacity: 1; transform: none; }
.vp-journey.is-b3 .s-brief dl div:nth-child(3) { opacity: 1; transform: none; }
.vp-journey.is-b4 .s-brief dl div:nth-child(4) { opacity: 1; transform: none; }
.vp-journey.is-b5 .s-brief blockquote { opacity: 1; }

.s-send { background: linear-gradient(170deg, #1a1f23, #0b0d10); }
.vp-send-face { position: absolute; left: 50%; top: 130px; width: 132px; height: 132px; transform: translateX(-50%); border-radius: 50%; background: var(--face) center/cover; box-shadow: 0 0 0 3px var(--coral), 0 0 0 12px #ff654222, 0 20px 50px #000a; }
.vp-send-tags { position: absolute; left: 18px; right: 18px; top: 286px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.vp-send-tags em { padding: 6px 10px; border-radius: 999px; background: #ffffff12; color: #ffffffb0; font-size: 11px; font-style: normal; }
.vp-send-btn { position: absolute; left: 18px; right: 18px; bottom: 64px; display: grid; place-items: center; height: 52px; overflow: hidden; border-radius: 16px; background: var(--coral); color: white; font-weight: 700; font-size: 14px; transition: transform .3s ease, background .3s ease; }
.vp-send-btn i { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fff6, transparent 60%); opacity: 0; transform: scale(.3); }
.vp-journey.is-press .vp-send-btn { transform: scale(.96); background: #ff7c5e; }
.vp-journey.is-press .vp-send-btn i { animation: tapRipple .8s ease-out; }
.vp-send-note { position: absolute; left: 0; right: 0; bottom: 36px; color: #ffffff85; font-size: 11px; text-align: center; }
.vp-journey.is-sent .vp-send-btn span:before { content: '✓ '; }

.vp-beam { position: absolute; z-index: 4; left: 36%; right: 36%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #ffffff22, transparent); opacity: 0; transition: opacity .4s ease; }
.vp-beam i { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 20px var(--acid), 0 0 44px var(--coral); transform: translate(-50%, -50%); }
.vp-journey.is-sent .vp-beam { opacity: 1; }
.vp-journey.is-sent .vp-beam i { animation: beamTravel 1.4s cubic-bezier(.6,0,.2,1) infinite; }
.vp-journey[data-step="4"] .vp-beam { opacity: 0; }

.vp-desk { position: absolute; z-index: 6; right: 7vw; top: 50%; width: min(480px, 38vw); transform: translateY(-50%); }
.vp-wa { position: absolute; left: 0; right: 0; top: 50%; padding: 14px 16px 16px; border-radius: 22px; background: #0f1a14f2; border: 1px solid #25d36638; box-shadow: 0 30px 80px #000b; opacity: 0; transform: translate(40px, -50%) scale(.96); transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.vp-wa header { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.vp-bell { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #25d366; font-size: 13px; }
.vp-journey[data-step="3"] .vp-bell { animation: bellRing 1.2s ease-in-out infinite; transform-origin: 50% 10%; }
.vp-wa header b { color: #b7f5c8; font-size: 12px; }
.vp-wa header small { color: #ffffff6e; font-size: 10px; }
.vp-wa > p { margin: 0; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #1f2c24; color: #e9f5ec; font-size: 14px; line-height: 1.5; }
.vp-wa > p b { color: white; }
.vp-wa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.vp-wa-actions span { display: grid; place-items: center; height: 40px; border-radius: 12px; background: #1f2c24; color: #9ad9ad; font-size: 12px; font-weight: 700; }
.vp-wa-actions .yes { color: white; background: #1b7d44; }
.vp-journey[data-step="3"] .vp-wa { opacity: 1; transform: translate(0, -50%) scale(1); }
.vp-journey[data-step="4"] .vp-wa { opacity: 0; transform: translate(0, -80%) scale(.92); }

.vp-opp { position: absolute; left: 0; right: 0; top: 50%; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 26px; background: #0d0f12f2; box-shadow: 0 40px 100px #000c; opacity: 0; transform: translate(40px, -46%) scale(.96); transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.vp-journey[data-step="4"] .vp-opp { opacity: 1; transform: translate(0, -50%) scale(1); }
.vp-opp-media { position: relative; height: 190px; }
.vp-opp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-opp-media img + img { clip-path: inset(0 0 0 50%); }
.vp-opp-media:after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: white; }
.vp-free { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: var(--acid); color: #0a0b0d; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.vp-opp-body { padding: 16px 18px 18px; }
.vp-opp-body header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vp-opp-body header > span:first-child { display: grid; gap: 4px; }
.vp-opp-body header small { color: var(--coral); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.vp-opp-body header b { font: 500 22px/1 var(--serif); }
.vp-excl { display: grid; justify-items: center; gap: 2px; }
.vp-excl svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.vp-excl circle { fill: none; stroke: #ffffff1f; stroke-width: 3; }
.vp-excl circle.run { stroke: var(--acid); stroke-dasharray: 107; stroke-dashoffset: 0; animation: clockRun 6s linear infinite; }
.vp-excl em { color: var(--acid); font-size: 9px; font-weight: 700; font-style: normal; letter-spacing: .06em; }
.vp-opp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 0; }
.vp-opp-tags em { padding: 5px 10px; border-radius: 999px; background: #ffffff10; color: #ffffffb3; font-size: 11px; font-style: normal; }
.vp-opp blockquote { margin: 12px 0 0; color: #ffffffd9; font: italic 500 17px/1.3 var(--serif); }
.vp-unlock { position: relative; height: 54px; margin-top: 14px; }
.vp-unlock > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 16px; transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.vp-unlock .lock { background: var(--coral); color: white; font-weight: 700; font-size: 14px; }
.vp-unlock .lock:before { content: '🔒'; margin-right: 8px; font-size: 13px; }
.vp-unlock .open { justify-content: space-between; gap: 10px; padding: 0 8px 0 16px; background: #13241a; border: 1px solid #25d36659; opacity: 0; transform: translateY(8px); }
.vp-unlock .open b { font: 500 17px/1 var(--serif); }
.vp-unlock .open em { color: #ffffffa3; font-size: 12px; font-style: normal; }
.vp-unlock .open i { display: grid; place-items: center; height: 38px; padding: 0 14px; border-radius: 12px; background: #25d366; color: #06210f; font-size: 12px; font-weight: 800; font-style: normal; }
.vp-journey.is-unlock .vp-unlock .lock { opacity: 0; transform: scale(.94); }
.vp-journey.is-unlock .vp-unlock .open { opacity: 1; transform: none; }

/* --------------------------------------------------------------- money */
.vp-money { position: relative; padding: 16vh clamp(28px, 6vw, 112px) 14vh; background: radial-gradient(60% 50% at 70% 40%, #ff65421a, transparent 70%), linear-gradient(#08090b, #0b0c0f); }
.vp-versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4vw; max-width: 1180px; margin: 0 auto; }
.vp-versus figure { display: grid; justify-items: center; gap: 30px; margin: 0; text-align: center; }
.vp-versus figcaption { display: grid; gap: 12px; }
.vp-versus small { color: #ffffff6b; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.vp-versus strong { font: 500 clamp(28px, 2.8vw, 44px)/1.02 var(--serif); letter-spacing: -.03em; }
.vp-old strong { color: #ffffff7a; text-decoration: line-through; text-decoration-color: #ff654299; text-decoration-thickness: 2px; }
.vp-vs { color: #ffffff3d; font: 300 44px/1 var(--sans); }
.vp-crowd { position: relative; width: 240px; height: 240px; }
.vp-crowd i { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; background: var(--face) center/cover; filter: grayscale(1) brightness(.7); box-shadow: 0 0 0 2px #0b0c0f; transform: rotate(var(--a)) translate(92px) rotate(calc(var(--a) * -1)); animation: crowdPush 2.8s ease-in-out infinite; }
.vp-crowd i:nth-child(odd) { animation-delay: .7s; }
.vp-crowd b { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: #1b1c20; color: #ffffff8a; font-size: 26px; font-weight: 400; box-shadow: 0 0 0 1px #ffffff1f; animation: phoneShake 2.8s ease-in-out infinite; }
.vp-pair { position: relative; display: flex; align-items: center; gap: 0; width: 280px; height: 240px; justify-content: center; }
.vp-pair i { position: relative; z-index: 2; width: 104px; height: 104px; border-radius: 50%; background: var(--face) center/cover; box-shadow: 0 0 0 3px var(--coral), 0 0 40px #ff654255; }
.vp-pair i.client { display: grid; place-items: center; background: var(--cream); color: #1b1b1b; font: 600 44px/1 var(--serif); font-style: normal; box-shadow: 0 0 0 3px var(--acid), 0 0 40px #dfff6955; }
.vp-pair u { position: relative; width: 70px; height: 2px; background: linear-gradient(90deg, var(--coral), var(--acid)); }
.vp-pair u:after { content: ''; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%; background: white; box-shadow: 0 0 16px white; transform: translate(-50%, -50%); animation: pairPulse 1.8s ease-in-out infinite; }

.vp-tickets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1180px; margin: 12vh auto 0; padding: 0; list-style: none; }
.vp-tickets li { position: relative; display: grid; gap: 6px; padding: 22px 20px 20px; overflow: hidden; border: 1px solid #ffffff1c; border-radius: 22px; background: linear-gradient(160deg, #ffffff0d, #ffffff03); opacity: 0; transform: translateY(24px); transition: .8s cubic-bezier(.16,1,.3,1); }
.vp-money.on .vp-tickets li { opacity: 1; transform: none; }
.vp-money.on .vp-tickets li:nth-child(2) { transition-delay: .1s; }
.vp-money.on .vp-tickets li:nth-child(3) { transition-delay: .2s; }
.vp-money.on .vp-tickets li:nth-child(4) { transition-delay: .3s; }
.vp-tickets i { color: var(--acid); font: 700 38px/1 var(--sans); font-style: normal; letter-spacing: -.04em; }
.vp-tickets b { font: 500 21px/1.05 var(--serif); }
.vp-tickets em { color: #ffffff8c; font-size: 12px; font-style: normal; line-height: 1.4; }

/* ----------------------------------------------------------- ecosystem */
.vp-eco { position: relative; padding: 14vh clamp(28px, 6vw, 112px); }
.vp-eco-head h2 { margin: 18px 0 0; font-size: clamp(34px, 3.6vw, 58px); line-height: .92; }
.vp-eco-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 7vh; }
.vp-eco-card { position: relative; display: block; aspect-ratio: 1.15; overflow: hidden; border: 1px solid #ffffff1c; border-radius: 26px; background: #050505; transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease; }
.vp-eco-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.vp-eco-card:hover { transform: translateY(-4px); border-color: #ffffff40; }
.vp-eco-card:hover img { transform: scale(1.1); }
.vp-eco-card:after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 44%, #050505f2); }
.vp-eco-card > span { position: absolute; z-index: 2; left: 22px; right: 60px; bottom: 20px; display: grid; gap: 6px; }
.vp-eco-card small { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.vp-eco-card b { font: 500 28px/1 var(--serif); }
.vp-eco-card em { color: #ffffff9e; font-size: 13px; font-style: normal; }
.vp-eco-card > i { position: absolute; z-index: 2; right: 20px; bottom: 22px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ffffff3d; border-radius: 50%; color: var(--acid); font-style: normal; }

/* ---------------------------------------------------------------- wall */
.vp-wall { position: relative; height: 78vh; min-height: 520px; overflow: hidden; isolation: isolate; background: radial-gradient(40% 40% at 50% 50%, #ff654224, transparent 70%); }
.vp-hive { position: absolute; inset: -40px; }
.vp-hive i { position: absolute; width: var(--s); height: calc(var(--s) * 1.1547); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--face, #14161a) center/cover; opacity: var(--o, 1); animation: hivePulse 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.vp-hive i.empty { background: linear-gradient(160deg, #1a1c20, #0e0f12); }
.vp-hive i.glow { background: linear-gradient(160deg, #ff6542, #b33a22); opacity: .5; }
.vp-hive i.acid { background: linear-gradient(160deg, #dfff69, #7f9a2a); opacity: .35; }
.vp-wall-scrim { position: absolute; z-index: 1; inset: 0; background: radial-gradient(ellipse 26% 38% at 50% 50%, #08090bf7 0, #08090be6 50%, #08090b80 78%, transparent 100%), linear-gradient(#08090b, transparent 16%, transparent 84%, #08090b); pointer-events: none; }
.vp-wall-copy { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; justify-items: center; gap: 12px; transform: translate(-50%, -50%); text-align: center; }
.vp-wall-copy b { color: var(--acid); font: 500 clamp(80px, 9vw, 150px)/.8 var(--serif); letter-spacing: -.05em; text-shadow: 0 0 60px #dfff6933; }
.vp-wall-copy span { font: 500 clamp(22px, 2vw, 32px)/1.05 var(--serif); }
.vp-wall-copy small { color: #ffffff4d; font-size: 9px; letter-spacing: .08em; }

/* ----------------------------------------------------------------- faq */
.vp-faq { z-index: 1; background: #0a0b0ee6; }
.vp-faq .story-number span { font-size: 26px; }

/* --------------------------------------------------------------- final */
.vp-final { position: relative; min-height: 92vh; overflow: hidden; isolation: isolate; display: grid; align-items: center; padding: 14vh clamp(28px, 6vw, 112px); }
.vp-final-plate { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: plateDrift 26s ease-in-out infinite alternate; }
.vp-final-tint { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #07080bf2 0%, #07080bc4 36%, #07080b33 70%), linear-gradient(0deg, #07080bd9, transparent 50%); }
.vp-final-copy { position: relative; z-index: 2; display: grid; justify-items: start; gap: 26px; max-width: 620px; }
.vp-final-copy h2 { margin: 0; font-size: clamp(40px, 4.4vw, 72px); line-height: .92; }

/* ------------------------------------------------------------ keyframes */
@keyframes ctaMeter { 0%, 100% { transform: scaleX(.15); } 50% { transform: scaleX(1); } }
@keyframes toastLoop { 0% { opacity: 0; transform: translateX(40px) scale(.96); } 7% { opacity: 1; transform: none; } 78% { opacity: 1; transform: none; } 88% { opacity: 0; transform: translateY(-14px) scale(.98); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes pinRing { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 18% { opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(1); } }
@keyframes tapRipple { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(2.4); } }
@keyframes beamTravel { from { left: 0; } to { left: 100%; } }
@keyframes bellRing { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-6deg); } }
@keyframes clockRun { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 107; } }
@keyframes crowdPush { 0%, 100% { transform: rotate(var(--a)) translate(92px) rotate(calc(var(--a) * -1)); } 50% { transform: rotate(var(--a)) translate(74px) rotate(calc(var(--a) * -1)); } }
@keyframes phoneShake { 0%, 100% { transform: translate(-50%, -50%); } 25% { transform: translate(-54%, -50%); } 75% { transform: translate(-46%, -50%); } }
@keyframes pairPulse { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes hivePulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(.96); filter: brightness(1.18); } }

/* ------------------------------------------------------- short viewports */
@media (max-height: 760px) and (min-width: 801px) {
  .vp-hero-copy h1 { font-size: clamp(40px, 4.3vw, 64px); }
  .vp-toasts { top: 16vh; }
  .vp-rail { top: calc(50% - 40px); }
  .vp-pro { flex-basis: 162px; padding: 12px 10px; }
  .vp-pro-face { width: 62px; height: 62px; }
  .vp-phone { height: min(540px, calc(100% - 100px)); }
  .vp-opp-media { height: 150px; }
}

/* --------------------------------------------------------------- phone */
@media (max-width: 800px) {
  .vp .header-cta,
  .vp .story-number,
  .vp .footer-brand > span,
  .vp .footer-col h3,
  .vp .footer-bottom,
  .vp-cta small,
  .vp-toast small,
  .vp-screen header small,
  .vp-opp-body header small,
  .vp-excl em,
  .vp-wall-copy small { font-size: 10px; }

  .vp-mark { width: 34px; }
  .vp-hero-stage { min-height: 600px; }
  .vp-hero-shade { background: linear-gradient(0deg, #07080bf5 0%, #07080bc4 42%, #07080b40 70%, #07080b99); }
  .vp-hero-copy { left: 20px; right: 20px; top: auto; bottom: 14vh; width: auto; transform: none; }
  .vp-hero-copy h1 { font-size: 40px; margin: 14px 0 12px; }
  .vp-hero-sub { font-size: 14px; }
  .vp-hero-actions { gap: 16px; margin-top: 22px; }
  .vp-cta b { font-size: 19px; }
  .vp-hero-proof { left: 20px; bottom: 4vh; font-size: 11px; }
  .vp-hero-phase { display: none; }
  .vp-toasts { left: 20px; right: 20px; top: 12vh; width: auto; }
  .vp-toast { grid-template-columns: 36px 1fr; padding: 10px 12px 10px 10px; }
  .vp-toast.t2, .vp-toast.t3 { margin-left: 18px; }
  .vp-toast.t3 { display: none; }
  .vp-toast-app, .vp-toast-face { width: 36px; height: 36px; }
  .vp-toast b { font-size: 16px; }

  .vp-ticker-band { padding: 8vh 0; }
  .vp-ticker-band .ticker-row b { font-size: 28px; }

  .vp-match { height: 400vh; }
  .vp-match-brief { top: 3vh; flex-direction: column; align-items: stretch; gap: 8px; }
  .vp-cat { justify-self: center; align-self: center; }
  .vp-styles { justify-content: center; gap: 5px; }
  .vp-styles em { padding: 5px 9px; font-size: 10px; }
  .vp-client-pin { top: 38%; }
  .vp-rail { top: calc(55% - 34px); height: 290px; }
  .vp-rail-track { top: 34px; }
  .vp-pro { flex-basis: 140px; padding: 12px 8px; }
  .vp-pro-face { width: 58px; height: 58px; }
  .vp-pro b { font-size: 15px; }
  .vp-pro small { font-size: 10px; }
  .vp-catalog { padding: 12px; }
  .vp-catalog header b { font-size: 18px; }
  .vp-caption li { font-size: 15px; padding: 9px 14px; }

  .vp-journey { height: 520vh; }
  .vp-journey-plate { left: 0; width: 100%; object-position: 50% 0; opacity: .7; -webkit-mask-image: none; mask-image: none; }
  .vp-unlock .open { padding: 0 6px 0 12px; }
  .vp-unlock .open em { display: none; }
  .vp-unlock .open i { padding: 0 10px; font-size: 11px; }
  .vp-wall-scrim { background: radial-gradient(ellipse 48% 30% at 50% 50%, #08090bf7 0, #08090be6 55%, #08090b80 80%, transparent 100%), linear-gradient(#08090b, transparent 16%, transparent 84%, #08090b); }
  .vp-wall-copy b { font-size: 76px; }
  .vp-wall-copy span { font-size: 21px; }
  .vp-journey-tint { background: linear-gradient(0deg, #08090bf7 0%, #08090bd1 32%, #08090b73 58%, #08090bc7 100%); }
  .vp-phone { left: 50%; height: min(540px, calc(100% - 120px)); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); }
  .vp-journey[data-step="3"] .vp-phone, .vp-journey[data-step="4"] .vp-phone { opacity: 0; transform: translate(-50%, -52%) scale(.9); }
  .vp-beam { display: none; }
  .vp-desk { left: 16px; right: 16px; width: auto; }
  .vp-opp-media { height: 150px; }

  .vp-money { padding: 11vh 20px; }
  .vp-versus { grid-template-columns: 1fr; gap: 6vh; }
  .vp-vs { justify-self: center; }
  .vp-crowd { width: 200px; height: 200px; transform: scale(.85); }
  .vp-pair { height: 170px; }
  .vp-tickets { grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 8vh; }
  .vp-tickets li { padding: 16px 14px; }
  .vp-tickets i { font-size: 36px; }
  .vp-tickets b { font-size: 17px; }

  .vp-eco { padding: 11vh 0 11vh 20px; }
  .vp-eco-track { display: flex; gap: 10px; overflow-x: auto; padding-right: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .vp-eco-card { flex: 0 0 78vw; scroll-snap-align: start; }

  .vp-wall { height: 60vh; min-height: 420px; }

  .vp-final { min-height: 80vh; padding: 12vh 20px; align-items: end; }
  .vp-final-tint { background: linear-gradient(0deg, #07080bfa 0%, #07080be8 34%, #07080b73 58%, #07080b26 78%, #07080b75 100%); }
  .vp-final-copy h2 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .vp-match, .vp-journey { height: auto; }
  .vp-sticky { position: relative; }
  .vp-toast { opacity: 1; animation: none; }
}