.hero-orb { position: relative; overflow: hidden; background-color: var(--bg); min-height: 900px; display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 110px 0 40px; }
#orb-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#orb-bg canvas { position: absolute; max-width: none; will-change: transform; }
#orb-bg.orb-fallback {
background: radial-gradient(55% 45% at 50% 45%, rgba(120,90,255,.35) 0%, rgba(120,90,255,0) 60%), radial-gradient(50% 40% at 35% 60%, rgba(0,220,255,.28) 0%, rgba(0,220,255,0) 65%), radial-gradient(40% 35% at 65% 65%, rgba(255,70,150,.20) 0%, rgba(255,70,150,0) 70%);
filter: blur(12px) saturate(1.05);
}
.hero-orb > *:not(#orb-bg) { position: relative; z-index: 1; }
@media (max-width: 1024px) { .hero-orb { min-height: 100vh; min-height: 100svh; } }
.tpv3-hero { --h1-min: 42px; --h1-fluid: 9.5vw; --h1-max: 92px; --h1-width: 1180px; --gap: .08em; --shine-speed: 6s; width: 100%; display: grid; gap: 18px; place-items: center; }
.tpv3-title { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 500; font-size: clamp(var(--h1-min), var(--h1-fluid), var(--h1-max)); line-height: 1.06; text-transform: uppercase; letter-spacing: .3px; color: #fff; max-width: var(--h1-width); text-align: center; word-break: keep-all; margin-inline: auto; padding-inline: 10px; }
.tpv3-line { display: block; }
.tpv3-line + .tpv3-line { margin-top: var(--gap); }
.tpv3-word { display: inline-block; white-space: nowrap; }
.tpv3-char { display: inline-block; will-change: transform; transform-origin: center bottom; }
.tpv3-shiny {
display: block; margin-top: 18px; font-family: var(--display); text-transform: uppercase; font-weight: 900;
font-size: clamp(24px, 4.8vw, 56px); line-height: 1.1; text-align: center; color: transparent;
min-height: 2.2em;
background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 65%);
background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
animation: tpv3-shine var(--shine-speed) linear infinite;
}
@keyframes tpv3-shine { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .tpv3-shiny { animation: none; color: rgba(255,255,255,.85); } }
.hero-copy { padding: 0 10px; text-align: center; }
.hero-copy .lead { font-family: "Montserrat", var(--sans); font-weight: 300; font-size: 26px; line-height: 38px; color: #fff; margin: 0 auto 20px; max-width: 1140px; padding: 0 8%; }
.hero-copy .currencies { font-family: var(--sans); font-weight: 300; font-size: 18px; line-height: 26px; color: var(--yellow); margin: 0; }
.hero-ctas { display: flex; justify-content: center; gap: 20px; padding: 10px 20px; flex-wrap: wrap; }
@media (max-width: 1024px) {
.hero-copy .lead { padding: 0 13%; font-size: 20px; line-height: 1.2em; }
.hero-copy .currencies { font-size: 24px; }
}
@media (max-width: 767px) {
.hero-orb { gap: 22px; }
.hero-copy .lead { padding: 0 10%; font-size: 16px; }
.hero-copy .currencies { font-size: 16px; }
.hero-ctas { flex-direction: column; align-items: center; gap: 10px; }
}
.stack { position: relative; background-color: var(--bg); min-height: 900px; }
.stack-1 { z-index: 10; }
.stack-2 { z-index: 11; }
.stack-3 { z-index: 12; }
@media (min-width: 768px) { .stack.is-sticky { position: sticky; top: 0; } }
.benefits .container { padding-top: 29px; padding-bottom: 10px; }
.eyebrow-xl { font-family: var(--display); font-weight: 600; font-size: 90px; line-height: 90px; text-transform: uppercase; color: #fff; text-align: center; margin: 0 0 20px; }
.benefits h2 { font-family: var(--sans); font-weight: 300; font-size: 32px; line-height: 32px; text-transform: uppercase; color: var(--grey-1); text-align: center; margin: 0; }
.cards { list-style: none; margin: 0; padding: 72px 10px 81px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { position: relative; overflow: hidden; isolation: isolate; min-height: 200px; padding: 41px; border-radius: 16px; box-shadow: 0 0 3px 0 #fff; text-align: center; }
.card > *:not(canvas) { position: relative; z-index: 1; }
.card .icon { width: 50px; height: 50px; margin: 0 auto; fill: #fff; }
.card h3 { font-family: var(--sans); font-weight: 600; font-size: 28px; line-height: 33.6px; color: #fff; margin: 8px 0 11px; }
.card p { font-family: var(--sans); font-size: 16px; line-height: 24px; color: var(--grey-3); margin: 0; }
.dotfield-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .25s ease; }
.dotfield.is-hover .dotfield-canvas { opacity: 1; }
@media (max-width: 1024px) { .eyebrow-xl { font-size: 61px; line-height: 1; } .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
.eyebrow-xl { font-size: 26px; line-height: 1.1; }
.benefits h2 { font-size: 1.7em; line-height: 1.1; }
.cards { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; }
.stack { min-height: 0; }
}
.how { padding: 0 49px 0 50px; }
.how h2 { font-family: var(--display); font-weight: 600; font-size: 71px; line-height: 71px; text-transform: uppercase; color: #fff; text-align: center; margin: 0; padding-top: 115px; }
.how h2 .br-mobile { display: none; }
.how .sub { font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 24px; text-transform: uppercase; color: #ebebeb; text-align: center; margin: 20px 0 0; }
.steps { list-style: none; margin: 0 auto; padding: 30px 0 0; max-width: var(--container); display: flex; gap: 20px; }
.step { flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; padding: 10px; text-align: center; }
.step .num { display: block; font-family: var(--sans); font-weight: 600; font-size: 161px; line-height: 161px; color: #fff; overflow: hidden; }
.step h3 { font-family: var(--sans); font-weight: 600; font-size: 28px; line-height: 28px; color: #fff; margin: 0; }
.step p { font-family: var(--sans); font-size: 16px; line-height: 24px; color: var(--grey-4); margin: 0; }
.how .cta-row { display: flex; justify-content: center; padding: 51px 10px 60px; }
@media (max-width: 1024px) { .how h2 { font-size: 41px; line-height: 1; } }
@media (max-width: 767px) {
.how { padding: 0 16px; }
.how h2 { font-size: 28px; line-height: 1.1; padding-top: 60px; }
.how h2 .br-mobile { display: inline; }
.steps { flex-direction: column; }
.step .num { font-size: 110px; line-height: 110px; }
}
.faq-section .container { padding-top: 43px; padding-bottom: 120px; }
.faq-section h2 { font-family: var(--display); font-weight: 600; font-size: 80px; line-height: 75px; text-transform: uppercase; color: #fff; text-align: center; margin: 0; padding: 0 0 112px; }
.faq-section h2 .line { display: block; }
.faq-section h2 .line + .line { margin-top: -6px; padding-top: 41px; }
.faq { border-top: 1px solid #f0f0f0; }
.faq-q { margin: 0; }
.faq-q button {
display: block; width: 100%; text-align: left; cursor: pointer; background: transparent; color: var(--grey-5);
border: 0; border-bottom: 1px solid var(--line); padding: 3% 5%;
font-family: var(--sans); font-weight: 400; font-size: 1.8vw; line-height: .9em; letter-spacing: -.28px; text-transform: uppercase;
transition: color .2s ease;
}
.faq-q button:hover, .faq-item.is-open .faq-q button, .faq-q button[aria-expanded="true"] { color: #fff; }
.faq-a { overflow: hidden; border-bottom: 1px solid var(--line); }
.faq-a p { margin: 0; padding: 18px 0 2% 5%; font-family: "Montserrat", var(--sans); font-size: 18px; line-height: 1.5em; letter-spacing: 1px; color: var(--grey-2); }
.faq-a a { color: #fff; }
@media (max-width: 1024px) {
.faq-section .container { padding-top: 10%; padding-bottom: 10%; }
.faq-section h2 { font-size: 3.3rem; line-height: 1; padding-bottom: 60px; }
.faq-q button { padding: 5%; font-size: 2.6vw; }
.faq-a p { font-size: 16px; }
}
@media (max-width: 767px) {
.faq-section h2 { font-size: 26px; line-height: 1.2em; padding: 0 7px 31px; }
.faq-section h2 .line + .line { padding-top: 0; margin-top: 0; }
.faq-q button { font-size: 20px; padding: 10% 6%; }
.faq-a p { font-size: 16px; padding: 2% 6% 4%; }
}
.cta-aurora-section {
position: relative; z-index: 13; overflow: hidden; isolation: isolate; background: var(--bg-cta); color: #fff;
padding: 217px 125px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; text-align: center;
--amp: 50%; --blur: 70px; --op: .25; --d1: 10s; --d2: 12s; --d3: 14s;
}
.cta-aurora-section > * { position: relative; z-index: 2; }
.cta-aurora-section::before {
content: ""; position: absolute; inset: -12%; z-index: 1;
background: radial-gradient(40% 50% at 18% 28%, rgba(58,41,255,.55) 0%, rgba(58,41,255,0) 60%), radial-gradient(35% 45% at 82% 34%, rgba(34,211,238,.5) 0%, rgba(34,211,238,0) 60%), radial-gradient(50% 55% at 55% 78%, rgba(255,59,48,.58) 0%, rgba(255,59,48,0) 60%);
background-blend-mode: screen, screen, normal;
filter: blur(98px) saturate(125%) brightness(45%);
animation: ctaAuroraMove 2s ease-in-out infinite alternate;
}
.cta-aurora-section::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(80% 90% at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,.14) 60%, rgba(0,0,0,.26) 100%); }
.aurora-blobs { position: absolute !important; inset: -12%; z-index: 1 !important; pointer-events: none; filter: saturate(130%) contrast(105%); }
.aurora-blobs .blob { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(var(--blur)); opacity: var(--op); mix-blend-mode: screen; transform: translate3d(-50%, -50%, 0) scale(1); }
.aurora-blobs .b1 { left: 18%; top: 24%; background: radial-gradient(circle, rgba(58,41,255,.6) 0%, rgba(58,41,255,0) 60%); animation: float1 var(--d1) ease-in-out infinite alternate; }
.aurora-blobs .b2 { left: 82%; top: 26%; background: radial-gradient(circle, rgba(34,211,238,.52) 0%, rgba(34,211,238,0) 60%); animation: float2 var(--d2) ease-in-out infinite alternate; }
.aurora-blobs .b3 { left: 56%; top: 74%; background: radial-gradient(circle, rgba(255,59,48,.62) 0%, rgba(255,59,48,0) 60%); animation: float3 var(--d3) ease-in-out infinite alternate; }
@keyframes ctaAuroraMove { 0% { transform: translate(-4%, -2%) scale(1); } 50% { transform: translate(3%, 3%) scale(1.05); } 100% { transform: translate(-1%, 1%) scale(1.02); } }
@keyframes float1 { 0% { transform: translate3d(calc(-50% - var(--amp)), calc(-50% - var(--amp)), 0) scale(1.04); } 50% { transform: translate3d(calc(-50% + var(--amp)), calc(-50% - var(--amp)), 0) scale(1.08); } 100% { transform: translate3d(calc(-50% + var(--amp)), calc(-50% + var(--amp)), 0) scale(1.05); } }
@keyframes float2 { 0% { transform: translate3d(calc(-50% + var(--amp)), calc(-50% + var(--amp)), 0) scale(1.03); } 50% { transform: translate3d(calc(-50% - var(--amp)), calc(-50% + var(--amp)), 0) scale(1.07); } 100% { transform: translate3d(calc(-50% - var(--amp)), calc(-50% - var(--amp)), 0) scale(1.04); } }
@keyframes float3 { 0% { transform: translate3d(calc(-50% - var(--amp)), calc(-50% + var(--amp)), 0) scale(1.02); } 50% { transform: translate3d(calc(-50% + var(--amp)), calc(-50% + var(--amp)), 0) scale(1.06); } 100% { transform: translate3d(calc(-50% + var(--amp)), calc(-50% - var(--amp)), 0) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .cta-aurora-section::before, .aurora-blobs .blob { animation: none !important; } }
.cta-aurora-section h2 { margin: 0; font-family: var(--display); text-transform: uppercase; }
.cta-aurora-section h2 .l1 { display: block; font-weight: 900; font-size: 47px; line-height: 56.4px; color: #fff; margin-bottom: -1px; }
.cta-aurora-section h2 .l2 { display: block; font-weight: 100; font-size: 34px; line-height: 54.4px; letter-spacing: 2.6px; color: var(--grey-1); }
.cta-aurora-section .btn-lg { margin-top: 21px; }
.rating { margin: 6px 0 0; font-size: 14px; color: var(--grey-1); }
.rating .stars { color: #ffe800; letter-spacing: 2px; }
@media (max-width: 1024px) {
.cta-aurora-section { padding: 217px 50px; min-height: 421px; }
.cta-aurora-section h2 .l1 { font-size: 47px; line-height: 1em; }
.cta-aurora-section h2 .l2 { font-size: 39px; line-height: 1em; letter-spacing: 0; }
}
@media (max-width: 767px) {
.cta-aurora-section { padding: 45px 16px 143px; min-height: 327px; gap: 13px; }
.cta-aurora-section h2 .l1 { font-size: 26px; }
.cta-aurora-section h2 .l2 { font-size: 19px; }
}