/* Vela on the AppZen layout. Values measured on appzen.framer.website at 1440px. */
:root {
  --bg: #000;
  --card: #0d0d0d;
  --card-2: #171717;
  --card-3: #1a1a1a;
  --btn-2: #262626;
  --white: #fff;
  --t1: #f5f5f5;
  --t2: #e5e5e5;
  --t3: #a3a3a3;
  --t4: #737373;
  --t5: #404040;
  --green: #3D7BFF;
  --green-rgb: 61, 123, 255;
  --display: "Stack Sans Headline", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body { margin: 0; background: var(--bg); color: var(--t2); font-family: var(--body); font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid rgba(var(--green-rgb), .7); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.t-hero { font-family: var(--display); font-size: 112px; line-height: 1.1; font-weight: 600; letter-spacing: -0.2px; color: #fff; }
.t-h2 { font-family: var(--display); font-size: 56px; line-height: 1.1; font-weight: 500; letter-spacing: -0.2px; color: #fff; }
.t-h3 { font-family: var(--display); font-size: 52px; line-height: 1.1; font-weight: 400; letter-spacing: 0; color: #fff; }
.t-lead { font-family: var(--display); font-size: 44px; line-height: 1.2; font-weight: 400; letter-spacing: -0.88px; color: var(--t1); }
.t-18 { font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.t-16 { font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; }
.t-14 { font-size: 14px; line-height: 1.2; letter-spacing: -0.28px; font-weight: 500; }
.dim { color: var(--t4); }

/* buttons: text rolls up on hover, like the template's Text / Hover Text pair */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; white-space: nowrap; transition: background-color .3s, transform .3s; }
.roll { position: relative; display: block; overflow: hidden; }
.roll > span { display: block; transition: transform .45s cubic-bezier(.44, 0, .56, 1); }
.roll > span + span { position: absolute; left: 0; top: 100%; width: 100%; }
.btn:hover .roll > span, a:hover > .roll > span { transform: translateY(-100%); }
.btn-p { background: #fff; color: #171717; border-radius: 18px; padding: 16px 32px; font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.btn-s { background: var(--btn-2); color: var(--t1); border-radius: 18px; padding: 16px 32px 16px 24px; font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.btn-s:hover { background: #2e2e2e; }
.btn-p:hover { background: #ededed; }
.btn-sm { background: var(--btn-2); color: var(--t2); border-radius: 12px; padding: 8px 12px; font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; }
.btn-t { color: var(--t2); border-radius: 12px; padding: 8px 12px; font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; }
.btn-t:hover { background: rgba(255, 255, 255, .06); }
.ico-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--card-2); display: grid; place-items: center; color: var(--t2); transition: background-color .3s; }
.ico-btn:hover { background: #222; }
.ico-btn svg { width: 18px; height: 18px; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* nav */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding-top: 24px; display: flex; justify-content: center; pointer-events: none; }
.navbar { pointer-events: auto; min-width: 544px; border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: rgba(0, 0, 0, .03) 0 .64px .64px -.94px, rgba(0, 0, 0, .03) 0 1.93px 1.93px -1.88px, rgba(0, 0, 0, .02) 0 5.1px 5.1px -2.81px, rgba(0, 0, 0, .01) 0 16px 16px -3.75px; }
.navbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 24px; background: rgba(23, 23, 23, .72); border-radius: 16px; }
.nav-logo { width: 35px; height: 35px; flex: none; }
.nav-logo img { width: 35px; height: 35px; object-fit: contain; }
.nav-r { display: flex; align-items: center; gap: 16px; }
.nav-tabs { display: flex; align-items: center; }
.nav-burger { display: none; }

/* page frame */
.sec { position: relative; padding: 160px 0; }
.sec-bg { position: absolute; left: 0; right: 0; top: 0; height: 600px; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(31% 29% at 50% 30.6%, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(31% 29% at 50% 30.6%, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 100%); }
.hero .sec-bg { -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .32) 100%); mask-image: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .32) 100%); }
.sec-bg.on-top { -webkit-mask-image: radial-gradient(50% 34% at 50% 64.3%, rgba(0, 0, 0, .08) 37.7%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(50% 34% at 50% 64.3%, rgba(0, 0, 0, .08) 37.7%, rgba(0, 0, 0, 0) 100%); }
.sec-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: rotate(180deg); opacity: .64; }
.hero .sec-bg video { opacity: .85; }
/* the sea is lit everywhere (the template's plants were mostly dark): fade it out before the edge of its band. The video is turned 180°, so the gradient runs the other way. */
.sec-bg video { -webkit-mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to top, #000 30%, rgba(0, 0, 0, 0) 100%); }
.sec-bg.on-top video { -webkit-mask-image: none; mask-image: none; }
.sec-bg.on-top video { transform: none; }
.noise { position: absolute; inset: 0; background: url(../assets/tpl/6mcf62RlDfRfU61Yg5vb2pefpi4.png) repeat left top; background-size: 128px auto; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(65% 50% at 50% 50%, rgba(0, 0, 0, .88) 25%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(65% 50% at 50% 50%, rgba(0, 0, 0, .88) 25%, rgba(0, 0, 0, 0) 100%); }
.sec-bg.on-top .noise { -webkit-mask-image: radial-gradient(64% 50% at 51.2% 0, rgba(0, 0, 0, .88) 23.3%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(64% 50% at 51.2% 0, rgba(0, 0, 0, .88) 23.3%, rgba(0, 0, 0, 0) 100%); }
.glow { position: absolute; border-radius: 100%; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--green-rgb), .24) 0%, rgba(var(--green-rgb), 0) 100%); }
.rays { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(50% 150% at 50% 0, #000 82.2%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(50% 150% at 50% 0, #000 82.2%, rgba(0, 0, 0, 0) 100%); }
.rays canvas { width: 100%; height: 100%; }
.wrap { position: relative; z-index: 1; }
.head { width: 880px; max-width: calc(100% - 40px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.tag { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 50px; background: var(--card); box-shadow: rgba(38, 49, 64, .32) 0 -1px 0 0 inset; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--t4); font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; }
.head + * { margin-top: 80px; }

/* progressive blur at the top and bottom of the viewport */
.pblur { position: fixed; left: 0; right: 0; z-index: 40; pointer-events: none; }
.pblur.top { top: 0; height: 120px; }
.pblur.bot { bottom: 0; height: 180px; }
.pblur > i { position: absolute; inset: 0; }
.pblur.top > i:nth-child(1) { backdrop-filter: blur(0.5px); -webkit-backdrop-filter: blur(0.5px); -webkit-mask-image: linear-gradient(to top, transparent 0.0%, #000 14.3%, #000 28.6%, transparent 42.9%); mask-image: linear-gradient(to top, transparent 0.0%, #000 14.3%, #000 28.6%, transparent 42.9%); }
.pblur.top > i:nth-child(2) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to top, transparent 14.3%, #000 28.6%, #000 42.9%, transparent 57.1%); mask-image: linear-gradient(to top, transparent 14.3%, #000 28.6%, #000 42.9%, transparent 57.1%); }
.pblur.top > i:nth-child(3) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to top, transparent 28.6%, #000 42.9%, #000 57.1%, transparent 71.4%); mask-image: linear-gradient(to top, transparent 28.6%, #000 42.9%, #000 57.1%, transparent 71.4%); }
.pblur.top > i:nth-child(4) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to top, transparent 42.9%, #000 57.1%, #000 71.4%, transparent 85.7%); mask-image: linear-gradient(to top, transparent 42.9%, #000 57.1%, #000 71.4%, transparent 85.7%); }
.pblur.top > i:nth-child(5) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to top, transparent 57.1%, #000 71.4%, #000 85.7%, transparent 100.0%); mask-image: linear-gradient(to top, transparent 57.1%, #000 71.4%, #000 85.7%, transparent 100.0%); }
.pblur.top > i:nth-child(6) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to top, transparent 71.4%, #000 85.7%); mask-image: linear-gradient(to top, transparent 71.4%, #000 85.7%); }
.pblur.bot > i:nth-child(1) { backdrop-filter: blur(0.5px); -webkit-backdrop-filter: blur(0.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 0.0%, #000 14.3%, #000 28.6%, transparent 42.9%); mask-image: linear-gradient(to bottom, transparent 0.0%, #000 14.3%, #000 28.6%, transparent 42.9%); }
.pblur.bot > i:nth-child(2) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to bottom, transparent 14.3%, #000 28.6%, #000 42.9%, transparent 57.1%); mask-image: linear-gradient(to bottom, transparent 14.3%, #000 28.6%, #000 42.9%, transparent 57.1%); }
.pblur.bot > i:nth-child(3) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(to bottom, transparent 28.6%, #000 42.9%, #000 57.1%, transparent 71.4%); mask-image: linear-gradient(to bottom, transparent 28.6%, #000 42.9%, #000 57.1%, transparent 71.4%); }
.pblur.bot > i:nth-child(4) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to bottom, transparent 42.9%, #000 57.1%, #000 71.4%, transparent 85.7%); mask-image: linear-gradient(to bottom, transparent 42.9%, #000 57.1%, #000 71.4%, transparent 85.7%); }
.pblur.bot > i:nth-child(5) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to bottom, transparent 57.1%, #000 71.4%, #000 85.7%, transparent 100.0%); mask-image: linear-gradient(to bottom, transparent 57.1%, #000 71.4%, #000 85.7%, transparent 100.0%); }
.pblur.bot > i:nth-child(6) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom, transparent 71.4%, #000 85.7%); mask-image: linear-gradient(to bottom, transparent 71.4%, #000 85.7%); }

/* ---------- hero */
.hero { padding: 160px 0; }
.hero .sec-bg { height: 600px; }
.hero-title { width: 880px; max-width: calc(100% - 40px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.rating { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 6px; border-radius: 50px; background: rgba(0, 0, 0, .24); box-shadow: rgba(38, 49, 64, .32) 0 -1px 0 0 inset; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; }
.rating b { font-weight: 400; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 50px; background: rgba(255, 255, 255, .12); color: var(--t2); }
.rating b i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(var(--green-rgb), .22); }
.rating span { color: var(--t2); }
.rating em { font-style: normal; color: var(--t4); }
.hero h1 { -webkit-mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, .64) 100%); mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, .64) 100%); }
.hero-bottom { position: relative; margin-top: 64px; display: flex; flex-direction: column; align-items: center; }
.hero-visual { position: relative; width: 644px; height: 840px; }
.hero-visual .glow { left: 50%; width: 1440px; height: 840px; top: 291px; margin-left: -720px; opacity: .48; filter: blur(8px); }
.hero-mock { position: absolute; left: 0; top: 0; width: 644px; -webkit-mask-image: linear-gradient(#000 12%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(#000 12%, rgba(0, 0, 0, 0) 100%); }
.cta-block { position: relative; width: 580px; max-width: calc(100% - 40px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.app-logo { width: 140px; height: 140px; }
.app-logo img { width: 100%; height: 100%; }
.cta-block .t-lead { margin-top: 64px; }
.cta-row { margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.btns { display: flex; gap: 16px; justify-content: center; }
.btn-s .bi { width: 20px; height: 20px; display: grid; place-items: center; }
.btn-s .bi svg { width: 20px; height: 20px; }
.stores { display: flex; align-items: center; gap: 10px; }
.stores .cap { display: inline-flex; align-items: center; gap: 8px; color: var(--t4); font-size: 16px; letter-spacing: -0.32px; }
.stores .cap svg { width: 19px; height: 19px; }
.stores .box { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--card); }

/* ---------- phones: the template's iPhone frame with our own screen on top */
.phone { position: relative; container-type: inline-size; }
.phone > img.frame { width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.screen { position: absolute; overflow: hidden; background: #0c0c0c; color: #fff; }
.phone.hero-ph .screen { left: 14.5%; right: 14.6%; top: 1.45%; bottom: 0; border-radius: 8.4cqw 8.4cqw 0 0; }
.phone.feat-ph .screen { left: 17.22%; right: 17.22%; top: 8.94%; bottom: 9.88%; border-radius: 8.1cqw; }
.sc { position: absolute; left: 0; top: 0; width: 393px; transform-origin: 0 0; transform: scale(var(--k, 1)); font-family: var(--body); letter-spacing: -0.01em; }
.sb { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 46px; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.sb .isl { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; }
.sb .isl::after { content: ""; position: absolute; right: 12px; top: 11px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2b3a55 0%, #0d1220 60%); }
.sb .sig { display: flex; align-items: center; gap: 6px; }
.sb .sig svg { height: 12px; width: auto; }

/* ---------- features */
.cards { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.fcard { position: relative; width: 1120px; max-width: calc(100% - 40px); min-height: 513px; border-radius: 44px; background: var(--card); overflow: hidden; display: grid; grid-template-columns: 592px 1fr; }
.fcard.flip { grid-template-columns: 1fr 592px; }
.fcard .fbg { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(50% 100% at 63.4% 50%, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(50% 100% at 63.4% 50%, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 100%); }
.fcard.flip .fbg { -webkit-mask-image: radial-gradient(50% 100% at 39.7% 50%, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(50% 100% at 39.7% 50%, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 100%); }
.fcard .fbg .noise { opacity: .32; mix-blend-mode: screen; }
.dots { position: absolute; left: 0; right: 0; top: 1px; height: 508px; border-radius: 100%; overflow: hidden; margin: 0; }
.dots img { width: 100%; height: 100%; object-fit: cover; }
.fcard .rays { left: -585px; right: -403px; top: -2px; height: 712px; bottom: auto; }
.fcopy { position: relative; padding: 72px 0 72px 64px; display: flex; flex-direction: column; gap: 32px; justify-content: center; }
.fcard.flip .fcopy { padding: 72px 64px 72px 0; order: 2; }
.fcopy .lbl { color: var(--t4); font-size: 16px; letter-spacing: -0.32px; }
.fcard.flip .fcopy .lbl, .fcopy .lbl.g { color: var(--green); }
.fcopy .t-h3 { margin-top: 16px; }
.fcopy .desc { margin-top: 16px; color: var(--t4); font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.ticks { display: flex; flex-direction: column; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 10px; color: var(--t3); font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; min-height: 24px; }
.ticks li svg { width: 24px; height: 24px; flex: none; }
.fmock { position: relative; height: 513px; border-radius: 32px; overflow: hidden; -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 56%); mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 56%); }
.fcard.code-card .fmock { -webkit-mask-image: none; mask-image: none; }
.fcard.flip .fmock { order: 1; }
.fmock .phone { position: absolute; left: 0; top: 0; width: 528px; }

/* floating CTA during the features */
.float-cta { position: fixed; z-index: 45; left: 50%; bottom: 0; width: 1120px; max-width: 100%; transform: translate(-50%, 120px); opacity: 0; padding: 12px 12px 56px; display: flex; justify-content: center; gap: 8px; border-radius: 16px; background: radial-gradient(50% 100% at 50% 100%, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .6s; }
.float-cta.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.float-cta .sq { width: 57px; height: 57px; border-radius: 12px; background: var(--card-2); display: grid; place-items: center; color: var(--t2); transition: background-color .3s; }
.float-cta .sq:hover { background: #222; }
.float-cta .sq svg { width: 20px; height: 20px; }

/* ---------- small cards (review card look) */
.rcard { position: relative; border-radius: 24px; background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.rhead { display: flex; align-items: center; gap: 10px; }
.rlogo { width: 48px; height: 48px; border-radius: 13.2px; background: var(--card-3); display: grid; place-items: center; flex: none; color: var(--t2); }
.rlogo svg { width: 22px; height: 22px; }
.rname { color: var(--t2); font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; }
.rdate { margin-top: 4px; color: var(--t3); opacity: .7; font-size: 14px; font-weight: 500; letter-spacing: -0.28px; }
.rtitle { color: var(--t1); font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.rbody { margin-top: 8px; color: var(--t3); opacity: .7; font-size: 18px; line-height: 1.4; letter-spacing: 0; }

/* risks: three columns drifting up inside a fading window, like the reviews */
.masonry { position: relative; height: 950px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 44%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(#000 44%, rgba(0, 0, 0, 0) 100%); }
.mcols { display: flex; gap: 12px; justify-content: center; will-change: transform; }
.mcol { width: 365px; display: flex; flex-direction: column; gap: 12px; }

/* social proof pill (stacked marks between laurels) */
.proof { display: flex; align-items: center; gap: 24px; }
.proof .laurel { width: 28px; height: 38px; color: #c9a227; }
.stack { display: flex; align-items: center; gap: 12px; }
.stack .marks { display: flex; padding: 0 16px 0 0; }
.stack .marks i { width: 32px; height: 32px; border-radius: 1000px; margin-right: -9px; display: grid; place-items: center; background: #f5f5f5; box-shadow: var(--card) 0 0 0 2px; overflow: hidden; }
.stack .marks i img, .stack .marks i svg { width: 20px; height: 20px; }
.stack .txt { color: var(--t3); font-size: 14px; font-weight: 500; letter-spacing: -0.28px; line-height: 1.2; text-align: left; }
.stack .txt b { display: block; color: var(--t2); font-weight: 500; }

/* ---------- pricing look (earn / buy) */
.plans { display: flex; gap: 16px; justify-content: center; align-items: flex-start; }
.plan { position: relative; width: 410px; border-radius: 32px; padding: 16px 16px 24px; background: rgba(23, 23, 23, .72); overflow: hidden; }
.plan.feat { width: 410px; }
.plan .ptop { position: relative; border-radius: 24px; padding: 24px; background: var(--card-2); overflow: hidden; }
.plan.feat .ptop { background: var(--card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.plan .ptop .pbg { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(100% 86% at 19.3% 33.5%, rgba(0, 0, 0, .8) 50.6%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(100% 86% at 19.3% 33.5%, rgba(0, 0, 0, .8) 50.6%, rgba(0, 0, 0, 0) 100%); }
.plan .ptop .dots { top: 0; height: 294px; -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0) 100%); }
.plan.feat .fbgp { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(50% 100% at 63.4% 50%, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(50% 100% at 63.4% 50%, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, 0) 100%); }
.plan.feat .fbgp .noise { opacity: .32; }
.plan .pin { position: relative; display: flex; flex-direction: column; gap: 32px; }
.plan .ptag { color: var(--t4); font-size: 16px; letter-spacing: -0.32px; }
.plan.feat .ptag { color: var(--green); }
.price { display: flex; align-items: flex-end; gap: 6px; }
.price .big { font-family: var(--display); font-size: 44px; line-height: 1.2; letter-spacing: -0.88px; color: var(--t1); }
.price .per { padding: 8px 0; color: var(--t2); font-size: 16px; letter-spacing: -0.32px; }
.psub { margin-top: 16px; color: var(--t3); font-size: 16px; line-height: 1.2; letter-spacing: -0.32px; }
.plan .btn { width: 100%; }
.plan .pbot { position: relative; padding: 12px; margin-top: 16px; }
.plan .rays { left: -655px; right: -655px; top: -19px; height: 712px; bottom: auto; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field .fl { color: var(--t3); font-size: 14px; font-weight: 500; letter-spacing: -0.28px; display: flex; justify-content: space-between; }
.money-in { display: flex; align-items: center; gap: 6px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: rgba(255, 255, 255, .06) 0 0 0 1px inset; padding: 12px 14px; }
.money-in span { color: var(--t4); font-size: 18px; }
.money-in input { width: 100%; background: none; border: 0; outline: 0; color: var(--t1); font-size: 18px; letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--t3); font-size: 14px; font-weight: 500; transition: background-color .2s, color .2s; }
.chips button[aria-checked="true"] { background: #fff; color: #171717; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--green) var(--p, 30%), #2a2a2a var(--p, 30%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: #2a2a2a; }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--green); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; }
.kv { display: flex; flex-direction: column; gap: 10px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; color: var(--t3); font-size: 16px; letter-spacing: -0.32px; }
.kv div b { color: var(--t1); font-weight: 400; font-variant-numeric: tabular-nums; }
.kv div.tot { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); }
.kv div.tot b { color: #fff; }
.fine { margin-top: 16px; color: var(--t4); font-size: 14px; line-height: 1.4; letter-spacing: -0.14px; }

/* ---------- live markets table */
.board { position: relative; width: 1120px; max-width: calc(100% - 40px); margin: 0 auto; border-radius: 32px; background: rgba(23, 23, 23, .72); padding: 16px; overflow: hidden; }
.board-in { position: relative; border-radius: 24px; background: var(--card); overflow: hidden; }
.tbl-scroll { position: relative; overflow-x: auto; }
table.mkt { width: 100%; border-collapse: collapse; font-size: 16px; letter-spacing: -0.32px; min-width: 860px; }
table.mkt th { text-align: left; font-weight: 500; color: var(--t4); font-size: 14px; letter-spacing: -0.28px; padding: 20px 24px 14px; white-space: nowrap; }
table.mkt td { padding: 16px 24px; border-top: 1px solid rgba(255, 255, 255, .05); color: var(--t2); white-space: nowrap; }
table.mkt .n { text-align: right; font-variant-numeric: tabular-nums; }
table.mkt th.n { text-align: right; }
table.mkt td.go { color: var(--green); }
table.mkt tr { transition: background-color .25s; }
table.mkt tbody tr:hover { background: rgba(255, 255, 255, .02); }
.asset { display: flex; align-items: center; gap: 12px; }
.asset i { width: 36px; height: 36px; border-radius: 10px; background: var(--card-3); display: grid; place-items: center; font-style: normal; flex: none; }
.asset i img { width: 18px; height: 18px; }
.asset b { font-weight: 500; color: var(--t1); }
.asset small { display: block; color: var(--t4); font-size: 14px; margin-top: 2px; }
.board-note { padding: 16px 24px 20px; color: var(--t4); font-size: 14px; line-height: 1.5; letter-spacing: -0.14px; }
.vgrid { width: 1120px; max-width: calc(100% - 40px); margin: 0 auto 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- grids */
.grid3 { width: 1120px; max-width: calc(100% - 40px); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid4 { width: 1120px; max-width: calc(100% - 40px); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid5 { width: 1120px; max-width: calc(100% - 40px); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.step { position: relative; border-radius: 24px; background: var(--card); padding: 24px; display: flex; flex-direction: column; gap: 12px; min-height: 260px; }
.step .num { color: var(--t4); font-size: 14px; font-weight: 500; letter-spacing: -0.28px; }
.step h4 { font-family: var(--display); font-size: 24px; line-height: 1.2; color: #fff; font-weight: 400; }
.step p { color: var(--t3); opacity: .8; font-size: 16px; line-height: 1.4; letter-spacing: -0.16px; }
.step .via { margin-top: auto; color: var(--t4); font-size: 13px; font-weight: 500; letter-spacing: -0.13px; }
.step .arrow { position: absolute; right: -10px; top: 50%; width: 20px; height: 20px; margin-top: -10px; z-index: 2; border-radius: 50%; background: var(--btn-2); display: grid; place-items: center; color: var(--t3); }
.step .arrow svg { width: 12px; height: 12px; }
.pill-s { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 50px; background: rgba(255, 255, 255, .06); color: var(--t3); font-size: 13px; font-weight: 500; letter-spacing: -0.13px; }
.pill-s.live { background: rgba(var(--green-rgb), .12); color: var(--green); }
.sub-head { width: 1120px; max-width: calc(100% - 40px); margin: 120px auto 32px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.sub-head .t-h2 { font-size: 44px; }

/* models: copy + code */
.code { position: relative; border-radius: 24px; background: #070707; box-shadow: rgba(255, 255, 255, .06) 0 0 0 1px inset; overflow: hidden; }
.code .tabs { display: flex; gap: 4px; padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.code .tabs button { padding: 6px 12px; border-radius: 10px; color: var(--t4); font-size: 14px; font-weight: 500; }
.code .tabs button[aria-pressed="true"] { background: var(--btn-2); color: var(--t1); }
.code .tabs .cp { margin-left: auto; color: var(--t3); }
.code pre { margin: 0; padding: 20px 22px 24px; font-family: var(--mono); font-size: 13.5px; line-height: 1.65; color: #d4d4d4; overflow-x: auto; letter-spacing: 0; }
.code pre .c { color: #6b6b6b; }
.code pre .hl { color: #BFD7FF; }
.fcard.code-card .fmock { height: auto; padding: 56px 56px 56px 0; display: flex; align-items: center; }
.fcard.code-card .code { width: 100%; }

/* faq */
.faq { width: 824px; max-width: calc(100% - 40px); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { border-radius: 24px; background: var(--card); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--t1); font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 32px; height: 32px; border-radius: 10px; background: var(--card-2); display: grid; place-items: center; flex: none; transition: transform .35s cubic-bezier(.44, 0, .56, 1); }
.faq summary i svg { width: 14px; height: 14px; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq .ans { padding: 0 24px 24px; color: var(--t3); opacity: .8; font-size: 18px; line-height: 1.5; letter-spacing: 0; }

/* ---------- footer */
.foot { position: relative; padding: 160px 0 0; overflow: hidden; }
.foot .cta-block { margin: 0 auto; }
.foot .cta-block .t-lead { margin-top: 64px; }
.foot-icon { position: relative; width: 420px; height: 210px; margin: 64px auto 0; z-index: 1; opacity: 0; }
.foot-icon img { width: 420px; height: 420px; max-width: none; }
.foot-icon .glow { left: -246px; width: 912px; height: 420px; top: 0; opacity: .4; }
.foot-card-wrap { position: relative; z-index: 2; padding: 0 40px 40px; margin-top: 64px; }
.foot-card { position: relative; border-radius: 40px; background: rgba(13, 13, 13, .72); padding: 80px 80px 40px; overflow: hidden; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.foot-card .sec-bg { height: 600px; }
.foot-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: 44px; height: 44px; }
.brand span { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.4; color: var(--t1); letter-spacing: 0; }
.foot-ctas { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.socials { display: flex; align-items: center; gap: 24px; padding: 4px; }
.socials a { color: var(--t3); font-size: 18px; line-height: 1.4; letter-spacing: 0; }
.socials .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--t5); }
.copy { position: relative; z-index: 1; margin-top: 64px; text-align: center; color: var(--t5); font-size: 16px; line-height: 1.4; letter-spacing: -0.32px; }

/* motion helpers: elements start where the template starts them; js/fx.js plays them */
.js [data-appear] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .js [data-appear] { opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ---------- tablet */
@media (max-width: 1199px) {
  .fcard { grid-template-columns: 1fr 1fr; }
  .fcard.flip { grid-template-columns: 1fr 1fr; }
  .fcopy { padding: 56px 0 56px 48px; }
  .fcard.flip .fcopy { padding: 56px 48px 56px 0; }
  .fmock .phone { left: 50%; margin-left: -264px; }
  .t-h3 { font-size: 44px; }
  .grid5 { grid-template-columns: repeat(3, 1fr); }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .step .arrow { display: none; }
  .mcol { width: auto; flex: 1; }
  .mcols { padding: 0 20px; }
}
/* ---------- phone */
@media (max-width: 809px) {
  .t-hero { font-size: min(48px, 11vw); }
  .t-h2, .sub-head .t-h2 { font-size: 36px; }
  .t-h3 { font-size: 36px; }
  .t-lead { font-size: 28px; letter-spacing: -0.56px; }
  .navbar { min-width: 0; width: calc(100% - 32px); }
  .nav { padding-top: 16px; }
  .nav-tabs { display: none; }
  .navbar-in { padding: 10px 10px 10px 16px; }
  .sec, .hero { padding: 120px 0; }
  .hero-title { gap: 24px; }
  .hero-bottom { margin-top: 48px; }
  .hero-visual { width: 300px; height: 420px; }
  .hero-mock { width: 300px; }
  .hero-visual .glow { width: 600px; height: 420px; margin-left: -300px; top: 140px; }
  .app-logo { width: 96px; height: 96px; }
  .cta-block .t-lead, .foot .cta-block .t-lead { margin-top: 40px; }
  .cta-row { margin-top: 40px; width: 100%; }
  .btns { flex-direction: column; width: 100%; }
  .btns .btn { width: 100%; }
  .head + * { margin-top: 48px; }
  .fcard, .fcard.flip { display: flex; flex-direction: column; min-height: 0; border-radius: 32px; }
  .fcopy, .fcard.flip .fcopy { padding: 32px 24px 0; order: 0; }
  .fcard.flip .fmock { order: 1; }
  .fmock { height: 420px; margin: 32px 0 0; }
  .fmock .phone { width: 420px; margin-left: -210px; }
  .fcard.code-card .fmock { padding: 0 16px 16px; }
  .float-cta { padding: 12px 16px 32px; }
  .float-cta .btn-p { flex: 1; }
  .masonry { height: 1100px; }
  .mcols { flex-direction: column; padding: 0 20px; }
  .mcol { width: 100%; }
  .mcol:nth-child(n+2) { margin-top: 0; }
  .plans { flex-direction: column; align-items: center; }
  .plan, .plan.feat { width: calc(100% - 40px); }
  .grid3, .grid4, .grid5, .vgrid { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .proof { gap: 12px; }
  .foot-icon { width: 240px; height: 120px; margin-top: 48px; }
  .foot-icon img { width: 240px; height: 240px; }
  .foot-icon .glow { left: -100px; width: 440px; height: 240px; }
  .foot-card-wrap { padding: 0 12px 12px; margin-top: 40px; }
  .foot-card { padding: 56px 20px 32px; border-radius: 32px; }
  .copy { font-size: 14px; }
  .sub-head { margin-top: 80px; }
}