/* Talaria — landing, rebuilt on the Vault layout (measured at 1440). */
:root {
  --bg: #0a0a0a;
  --fg: #fff;
  --fg-70: rgba(255, 255, 255, .7);
  --fg-50: rgba(255, 255, 255, .5);
  --fg-38: rgba(255, 255, 255, .38);
  --accent: #14c8a0;      /* template #ff4c00 */
  --accent-soft: #6fe3c8; /* template #ff8a52 */
  --accent-deep: #1e8c75; /* template #ba642f */
  --brand: #00866f;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-img: cubic-bezier(.12, .23, .5, 1);
  --sans: 'Inter', system-ui, sans-serif;
  --flex: 'Google Sans Flex', 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); overflow-x: hidden; position: relative; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* film grain over the whole page, as in the template */
.noise { position: absolute; inset: 0; background: url(../img/noise.png) repeat; background-size: 128px 128px; opacity: .05; pointer-events: none; z-index: 50; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 24px; left: 50%; z-index: 9; width: 714px; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  transform: translate(-50%, -50px); opacity: 0; animation: nav-in 1.4s var(--ease-out) .3s forwards; }
@keyframes nav-in { to { transform: translate(-50%, 0); opacity: 1; } }
.logo { display: flex; align-items: center; gap: 8px; }
.logo .mark { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid #fff; display: grid; place-items: center; }
.logo .mark img { width: 26px; height: 26px; }
.logo span { font-size: 24px; font-weight: 500; letter-spacing: -1.92px; line-height: 26.88px; }
.links { display: flex; align-items: center; gap: 16px; }
.links a { font-size: 16px; letter-spacing: -.32px; line-height: 17.92px; }
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transition: transform .45s var(--ease-out); }
.roll > span + span { position: absolute; left: 0; top: 100%; }
a:hover > .roll > span, .roll:hover > span { transform: translateY(-100%); }

/* X link: a square glass button next to the CTA, always visible (phone included) */
.nav-r { display: flex; align-items: center; gap: 8px; }
.xbtn { width: 39px; height: 39px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(10, 12, 12, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 18px rgba(0, 0, 0, .25); backdrop-filter: blur(10px); transition: background .25s, transform .25s; }
.xbtn:hover { background: rgba(10, 12, 12, .85); transform: translateY(-1px); }
.xbtn svg { width: 17px; height: 17px; }
/* white button with the glow under it, arrows that trade places on hover */
.btn { position: relative; display: inline-flex; align-items: center; height: 39px; padding: 0 16px; border-radius: 8px; background: #fff; color: #171717; font-size: 16px; letter-spacing: -.32px; line-height: 19.2px; gap: 6px; overflow: visible; isolation: isolate; }
.btn .ar { width: 12px; height: 10px; display: inline-block; overflow: hidden; position: relative; }
.btn .ar svg { position: absolute; inset: 0; width: 12px; height: 10px; transition: transform .45s var(--ease-out); }
.btn .ar svg + svg { transform: translateX(-20px); }
.btn:hover .ar svg:first-child { transform: translateX(20px); }
.btn:hover .ar svg + svg { transform: translateX(0); }
.ghost { display: inline-flex; align-items: center; height: 39px; padding: 10px 15px; border-radius: 8px; font-size: 16px; font-weight: 500; letter-spacing: -.32px; line-height: 19.2px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* ---------- hero ---------- */
.hero { position: relative; height: 900px; min-height: 100vh; overflow: hidden; }
.hero .bg { position: absolute; inset: 0; background: url(../img/hero-bg.webp) center / cover no-repeat; transform: scale(1.05); animation: settle 2s var(--ease-img) forwards; }
.hero .hand { position: absolute; left: calc(50% - 358px); top: 71px; width: 752px; height: 549px; transform: scale(1.05); animation: settle 4s var(--ease-img) forwards; }
.hero .hand img { width: 100%; height: 100%; object-fit: cover; }
@keyframes settle { to { transform: scale(1); } }
.hero .content { position: absolute; left: 0; right: 0; top: 532px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { font-size: 72px; font-weight: 400; letter-spacing: -5.7px; line-height: 72px; }
.hero h1 .ln { display: block; }
.hero .sub { margin-top: 25px; width: 600px; font-size: 20px; letter-spacing: -1.6px; line-height: 24px; color: var(--fg-70); }
.hero .ctas { margin-top: 31px; display: flex; align-items: center; gap: 14px; opacity: .001; animation: fade 1.6s cubic-bezier(.44, 0, .56, 1) 1.5s forwards; }
@keyframes fade { to { opacity: 1; } }

/* words that rise out of a blur (hero title and subtitle) */
.w { display: inline-block; opacity: .001; transform: translateY(10px); filter: blur(10px); animation: word 1.8s var(--ease-out) forwards; animation-delay: var(--d, 1.3s); white-space: pre; }
@keyframes word { to { opacity: 1; transform: none; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
  .nav, .hero .bg, .hero .hand, .hero .ctas, .w { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---------- shared ---------- */
.wrap { width: 1120px; margin: 0 auto; position: relative; }
.label { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/14.4px var(--mono); letter-spacing: 1.92px; color: var(--fg-38); text-transform: uppercase; }
.label svg { width: 13px; height: 13px; opacity: .6; }
.h2 { font-size: 44px; font-weight: 400; letter-spacing: -3.52px; line-height: 45.76px; }
.lead { font-size: 20px; letter-spacing: -1.6px; line-height: 24px; color: var(--fg-70); }
.body { font-size: 14px; line-height: 21.7px; color: var(--fg-50); }
.mono { font-family: var(--mono); }
.center { text-align: center; }
section { position: relative; background: var(--bg); }
[data-reveal] { opacity: 0; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal="up"] { transform: translateY(50px); }
[data-reveal="up20"] { transform: translateY(20px); }
[data-reveal="left"] { transform: translateX(-100px); }
[data-reveal="right"] { transform: translateX(100px); }
[data-reveal="rise"] { transform: translateY(100px); }
[data-reveal].in, .cell.in { opacity: 1; transform: none; }
.streak { position: absolute; pointer-events: none; transform: rotate(-26deg); filter: blur(50px); opacity: .85;
  background: linear-gradient(90deg, rgba(0, 134, 111, 0) 0%, rgba(0, 150, 122, .32) 36%, rgba(40, 200, 165, .5) 52%, rgba(0, 150, 122, .28) 66%, rgba(0, 134, 111, 0) 100%); }

/* ---------- 2. about: the problem, the phone, the coin belt ---------- */
.about { height: 1653px; padding-top: 200px; overflow: hidden; }
.about .big { width: 920px; margin: 0 auto; text-align: center; font-size: 40px; letter-spacing: -3.2px; line-height: 48px; }
.about .big + .big { margin-top: 20px; }
.stage { position: relative; height: 699px; margin-top: 60px; }
.belt { position: absolute; left: 0; right: 0; top: 110px; height: 480px; }
.belt .row { position: absolute; left: 0; height: 150px; display: flex; gap: 20px; will-change: transform; }
.belt .row.r1 { top: 80px; }
.belt .row.r2 { top: 250px; }
.tile { flex: none; width: 150px; height: 150px; border-radius: 20px; overflow: hidden; }
.tile.card { background: #fff; box-shadow: 0 8px 20px rgba(19, 21, 21, .05); display: flex; flex-direction: column; align-items: center; padding-top: 29px; }
.tile.card .ic { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 10px 15px rgba(19, 21, 21, .35); overflow: hidden; background: #494d4d; }
.tile.card .ic img { width: 100%; height: 100%; object-fit: cover; }
.tile.card .ic.hot { box-shadow: 0 10px 15px rgba(20, 200, 160, .4); }
.tile.card p { margin-top: 20px; width: 118px; text-align: center; font: 400 16px/20.8px var(--flex); color: #131515; }
.tile.pic { position: relative; display: grid; place-items: center; }
.tile.pic img { width: 64px; height: 64px; border-radius: 16px; position: relative; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.tile.pic::before { content: ""; position: absolute; inset: 0; background: var(--tint, #222); }
.tile.pic::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .28), transparent 60%), url(../img/noise.png); background-size: auto, 128px; mix-blend-mode: soft-light; }

.phone { position: absolute; left: 50%; top: 0; width: 340px; height: 699px; margin-left: -170px; border-radius: 52px; background: #131515; box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 1px 2px rgba(255, 255, 255, .1); padding: 10px; z-index: 2; }
.screen { position: relative; width: 320px; height: 679px; border-radius: 43px; background: #0a0b0c; padding: 0 22px; overflow: hidden; }
.island { position: absolute; left: 116px; top: 13px; width: 88px; height: 26px; border-radius: 20px; background: #000; }
.status { position: absolute; left: 24px; right: 24px; top: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; line-height: 15.6px; }
.status .sig { display: flex; gap: 5px; align-items: center; }
.status svg { width: 13px; height: 13px; }
.screen .cap { font-size: 13px; font-weight: 500; line-height: 15.6px; color: var(--fg-50); }
.screen .amt { margin-top: 6px; font-size: 46px; font-weight: 600; letter-spacing: -1.38px; line-height: 48.3px; white-space: nowrap; }
.screen .amt small { font-size: 22px; letter-spacing: -.4px; color: var(--fg-70); }
.screen .note { margin-top: 7px; font-size: 12px; line-height: 17.4px; color: rgba(255, 255, 255, .42); }
.screen .rows { margin-top: 9px; display: flex; flex-direction: column; gap: 9px; }
.vrow { height: 43px; border-radius: 14px; background: rgba(255, 255, 255, .04); display: flex; align-items: center; padding: 0 15px; }
.vrow i { width: 7px; height: 7px; border-radius: 10px; background: rgba(255, 255, 255, .32); margin-right: 9px; }
.vrow b { font-size: 11px; font-weight: 600; letter-spacing: .99px; line-height: 13.2px; color: rgba(255, 255, 255, .75); text-transform: uppercase; }
.vrow span { margin-left: auto; font-size: 14px; font-weight: 600; line-height: 16.8px; }
.vrow.hot { background: rgba(30, 140, 117, .1); }
.vrow.hot i { background: var(--accent-deep); }
.vrow.hot b { color: rgba(255, 255, 255, .95); }
.src { margin-top: 0; height: 47px; border-radius: 14px; background: rgba(255, 255, 255, .04); display: flex; align-items: center; padding: 0 15px; font-size: 13px; color: rgba(255, 255, 255, .55); gap: 9px; }
.src svg { width: 16px; height: 16px; }
.src .pill { margin-left: auto; height: 25px; padding: 0 9px; border-radius: 9px; background: var(--accent-deep); color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .99px; }
.up { display: flex; justify-content: space-between; font-size: 13px; line-height: 15.6px; color: rgba(255, 255, 255, .72); }
.up span:last-child { font-weight: 500; }

.after { position: absolute; left: 0; right: 0; top: 759px; display: flex; flex-direction: column; align-items: center; }
.tagline { height: 34px; padding: 0 16px 0 12px; border-radius: 100px; background: #fff; display: inline-flex; align-items: center; gap: 8px; font: 400 14px/18.2px var(--flex); color: #494d4d; }
.tagline b { font-weight: 400; color: #131515; }
.tagline .live { width: 8px; height: 8px; border-radius: 50%; background: #0bb58c; box-shadow: 0 0 0 3px rgba(11, 181, 140, .18); animation: pulse 2s ease-in-out infinite; }
.tagline .live.bad { background: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(11, 181, 140, 0); } }
.after .lead { margin-top: 20px; width: 600px; text-align: center; }
.stores { margin-top: 20px; display: flex; gap: 20px; }
.store { width: 269px; height: 56px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 400 18px/23.4px var(--flex); overflow: hidden; }
.store.dark { background: #131515; color: #fff; box-shadow: 0 4px 10px rgba(19, 21, 21, .5), 0 10px 35px rgba(19, 21, 21, .5); }
.store.light { background: #fff; color: #131515; }
.store img, .store svg { width: 18px; height: 18px; }
.store .roll > span { line-height: 23.4px; }

/* ---------- 3. the route (system grid) ---------- */
.system { height: 1237px; padding-top: 100px; overflow: hidden; }
.system .streak { left: -287px; top: 166px; width: 1773px; height: 968px; }
.system .h2 { margin-top: 21px; width: 620px; }
.system .lead { margin-top: 19px; width: 470px; }
.grid { margin-top: 60px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 17px 16px; }
.cell { opacity: 0; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); grid-column: span 2; height: 358px; border-radius: 20px; background: rgba(255, 255, 255, .03); padding: 26px 22px 0; position: relative; backdrop-filter: blur(0px); }
.cell.wide { grid-column: span 3; padding-top: 30px; }
.cell .foot { position: absolute; left: 22px; right: 22px; top: 243px; }
.cell.wide .foot { top: 264px; right: 40px; }
.cell .ft { display: flex; align-items: center; gap: 7px; font: 500 11px/13.2px var(--mono); letter-spacing: 1.43px; color: rgba(255, 255, 255, .88); text-transform: uppercase; }
.cell .ft svg { width: 12px; height: 12px; opacity: .8; }
.cell .foot .body { margin-top: 10px; }
.lrow { height: 48px; border-radius: 12px; background: rgba(255, 255, 255, .04); display: flex; align-items: center; padding: 0 18px; gap: 15px; }
.lrow + .lrow { margin-top: 8px; }
.lrow.tall { height: 54px; }
.lrow img { width: 16px; height: 16px; border-radius: 4px; }
.lrow .t { display: flex; flex-direction: column; gap: 3px; }
.lrow .t b { font-size: 12px; font-weight: 500; line-height: 14.4px; color: rgba(255, 255, 255, .88); }
.lrow .t small { font: 400 9px/10.8px var(--mono); letter-spacing: .36px; color: var(--fg-38); text-transform: uppercase; }
.lrow .v { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; font-weight: 600; line-height: 14.4px; }
.tag { height: 16px; padding: 0 6px; border-radius: 5px; background: rgba(20, 200, 160, .16); color: var(--accent-soft); font: 500 8px/16px var(--mono); letter-spacing: .8px; }
.tag.dim { background: rgba(255, 255, 255, .07); color: var(--fg-50); }
.save .big { font-size: 30px; font-weight: 600; letter-spacing: -.75px; line-height: 33px; }
.save .cap { margin-top: 3px; font: 400 9px/10.8px var(--mono); letter-spacing: 1.08px; color: var(--fg-38); }
.stack { margin-top: 10px; display: flex; gap: 4px; height: 10px; }
.stack i { display: block; height: 10px; border-radius: 3px; transition: flex-grow 1.2s var(--ease-out); }
.legend { margin-top: 12px; display: flex; gap: 14px; font: 400 9px/10.8px var(--mono); letter-spacing: .72px; color: var(--fg-50); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 6px; height: 6px; border-radius: 6px; }
.rule { height: 31px; border-radius: 10px; background: rgba(255, 255, 255, .04); display: flex; align-items: center; padding: 0 11px; gap: 8px; font-size: 11px; color: var(--fg-50); margin-top: 8px; }
.rule:first-of-type { margin-top: 18px; }
.rule svg { width: 12px; height: 12px; opacity: .6; }
.rule em { margin-left: auto; font: 500 9px/10.8px var(--mono); letter-spacing: .54px; font-style: normal; color: var(--fg-50); }
.rule em.hot { color: var(--accent-soft); }
.chead { display: flex; justify-content: space-between; align-items: baseline; font: 400 9px/10.8px var(--mono); letter-spacing: 1.08px; color: var(--fg-38); }
.chead b { font: 400 16px/19.2px var(--sans); letter-spacing: 0; color: var(--fg-70); }
.bars { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.bar { display: grid; grid-template-columns: 106px 1fr 50px; align-items: center; font: 400 9px/10.8px var(--mono); letter-spacing: .81px; color: var(--fg-50); text-transform: uppercase; }
.bar .tr { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bar .fl { display: block; height: 100%; border-radius: 4px; background: rgba(255, 255, 255, .38); width: 0; transition: width 1.4s var(--ease-out); }
.bar:first-child .fl { background: var(--accent); }
.bar em { font: 500 10px/12px var(--mono); color: rgba(255, 255, 255, .88); text-align: right; font-style: normal; }
.chart { margin-top: 14px; position: relative; height: 168px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .ax { position: absolute; left: 0; right: 0; top: 178px; display: flex; justify-content: space-between; font: 400 8px/9.6px var(--mono); letter-spacing: .96px; color: var(--fg-38); }
.chart .ax span:nth-child(2) { color: var(--fg-50); }
.chart path.ln { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 2s var(--ease-out); }
.in .chart path.ln { stroke-dashoffset: 0; }

/* ---------- 4. legs (vaults) ---------- */
.legs { height: 892px; padding-top: 150px; }
.legs .wrap { display: grid; grid-template-columns: 400px 630px; justify-content: space-between; }
.legs .left { align-self: center; padding-bottom: 40px; }
.legs .left .h2 { margin-top: 23px; }
.legs .left .lead { margin-top: 21px; }
.legs .left .body { margin-top: 42px; }
.panel .top { display: flex; justify-content: space-between; align-items: baseline; }
.panel .top .label { color: var(--fg-38); }
.panel .top small { font: 400 11px/13.2px var(--mono); letter-spacing: 1.43px; color: var(--fg-38); }
.panel .total { margin-top: 12px; font-size: 40px; font-weight: 600; letter-spacing: -1.2px; line-height: 42px; }
.panel .total small { font-size: 20px; letter-spacing: -.4px; color: var(--fg-50); font-weight: 500; }
.panel .seg { margin-top: 12px; display: flex; gap: 3px; height: 12px; }
.panel .seg i { display: block; height: 12px; border-radius: 3px; min-width: 6px; }
.acc { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.leg { border-radius: 16px; background: rgba(255, 255, 255, .03); overflow: hidden; cursor: pointer; transition: background .3s; }
.leg:hover { background: rgba(255, 255, 255, .045); }
.leg .hd { height: 53px; display: flex; align-items: center; padding: 0 20px; gap: 12px; }
.leg .hd i { width: 8px; height: 8px; border-radius: 8px; flex: none; }
.leg .hd b { font: 500 11px/13.2px var(--mono); letter-spacing: 1.43px; color: rgba(255, 255, 255, .88); text-transform: uppercase; }
.leg .hd small { font-size: 12px; line-height: 14.4px; color: var(--fg-38); }
.leg .hd span { margin-left: auto; font-size: 16px; font-weight: 600; letter-spacing: -.16px; }
.leg .hd svg { width: 14px; height: 14px; opacity: .5; transition: transform .4s var(--ease-out); }
.leg.open .hd { height: 60px; }
.leg.open .hd b { font-size: 12px; letter-spacing: 1.92px; color: #fff; }
.leg.open .hd svg { transform: rotate(180deg); }
.leg .bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.leg.open .bd { grid-template-rows: 1fr; }
.leg .bd > div { overflow: hidden; padding: 0 20px; }
.leg .bd .body { width: 520px; }
.leg .bd .rec { margin-top: 13px; font: 400 11px/13.2px var(--mono); letter-spacing: 1.43px; color: var(--fg-38); }
.leg .bd .ev { display: flex; justify-content: space-between; align-items: center; height: 30px; font-size: 14px; color: var(--fg-50); }
.leg .bd .ev em { font: 500 14px/16.8px var(--mono); font-style: normal; color: rgba(255, 255, 255, .88); }
.leg .bd > div > :last-child { margin-bottom: 18px; }
.addv { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding-left: 20px; font-size: 13px; line-height: 15.6px; color: var(--fg-38); }
.addv:hover { color: var(--fg-70); }

/* ---------- 5. the card ---------- */
.cardsec { height: 1120px; padding-top: 150px; text-align: center; }
.cardsec .h2 { margin: 20px auto 0; width: 720px; }
.cardsec .lead { margin: 20px auto 0; width: 560px; }
.tcard-wrap { margin: 66px auto 0; width: 680px; height: 429px; perspective: 1400px; }
.tcard { position: relative; width: 680px; height: 429px; border-radius: 26px; overflow: hidden; text-align: left; transition: transform .6s var(--ease-out); transform-style: preserve-3d;
  background: linear-gradient(180deg, #5fd6bd 0%, #1d9c84 22%, #0b5c4e 52%, #062a24 78%, #04110e 100%);
  box-shadow: 0 60px 120px rgba(0, 0, 0, .75), 0 30px 80px rgba(20, 200, 160, .2), inset 0 1px 0 rgba(255, 255, 255, .25); }
.tcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 70% 18%, rgba(190, 255, 236, .45), transparent 70%), radial-gradient(ellipse 80% 60% at 10% 100%, rgba(0, 0, 0, .55), transparent 70%); }
.tcard::after { content: ""; position: absolute; inset: 0; background: url(../img/noise.png); background-size: 128px; opacity: .22; mix-blend-mode: multiply; }
.tcard .wm { position: absolute; left: -10px; bottom: -78px; font: 400 266px/1 var(--flex); letter-spacing: -.06em; color: rgba(0, 0, 0, .42); z-index: 1; }
.tcard .wing { position: absolute; right: 36px; top: 28px; width: 116px; height: 116px; z-index: 2; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); }
.tcard .chip { position: absolute; left: 70px; top: 152px; width: 76px; height: 58px; border-radius: 11px; z-index: 2; background: linear-gradient(135deg, #e9ece9, #a9afab 45%, #d9ddd9 60%, #8e948f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.tcard .chip::before { content: ""; position: absolute; inset: 10px 26px; border-radius: 6px; border: 1.5px solid rgba(0, 0, 0, .28); }
.tcard .chip::after { content: ""; position: absolute; left: 0; right: 0; top: 28px; border-top: 1.5px solid rgba(0, 0, 0, .28); }
.tcard .emb { position: absolute; z-index: 2; font-family: 'Share Tech Mono', monospace; color: #e6ebe8; background: linear-gradient(180deg, #fff, #b9c4bf 55%, #8d9893); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); white-space: nowrap; }
.tcard .num { left: 68px; top: 250px; font-size: 58px; letter-spacing: .06em; }
.tcard .nm { left: 70px; top: 338px; font-size: 24px; letter-spacing: .04em; }
.tcard .ex { right: 74px; top: 330px; font-size: 34px; letter-spacing: .04em; }
.tcard .side { position: absolute; right: 22px; bottom: 38px; writing-mode: vertical-rl; transform: rotate(180deg); font: 400 16px var(--flex); letter-spacing: .12em; color: rgba(255, 255, 255, .75); z-index: 2; }
.tcard .act { position: absolute; left: 30px; top: 30px; z-index: 3; height: 23px; padding: 0 9px; border-radius: 7px; background: rgba(20, 200, 160, .16); display: inline-flex; align-items: center; gap: 7px; font: 500 11px/13.2px var(--mono); letter-spacing: 1.32px; color: #fff; backdrop-filter: blur(6px); }
.tcard .act i { width: 5px; height: 5px; border-radius: 5px; background: var(--accent); }
.switch { margin: 44px auto 0; display: inline-flex; padding: 5px; gap: 2px; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.switch button { height: 27px; padding: 0 11px; border-radius: 10px; font: 500 11px/13.2px var(--mono); letter-spacing: 1.32px; color: var(--fg-50); transition: background .3s, color .3s; }
.switch button.on { background: rgba(20, 200, 160, .16); color: #64e0c2; }
.spend { margin-top: 44px; font-size: 16px; line-height: 19.2px; color: var(--fg-50); }
.spend b { font: 500 14px/16.8px var(--mono); letter-spacing: 1.68px; color: #64e0c2; margin: 0 4px; }
.spend span { font-size: 14px; }
.fine { margin-top: 8px; font: 400 11px/13.2px var(--mono); letter-spacing: 1.43px; color: var(--fg-38); text-transform: uppercase; }

/* ---------- 6. what you get (safe to spend) ---------- */
.get { height: 1143px; padding-top: 150px; text-align: center; }
.get .h2 { margin: 20px auto 0; width: 780px; }
.get .num { margin-top: 69px; font-size: 132px; font-weight: 600; letter-spacing: -5.94px; line-height: 132px; white-space: nowrap; }
.get .num small { font-size: 66px; letter-spacing: -2.4px; color: var(--fg-50); }
.get .label { margin-top: 9px; display: block; }
.deriv { margin: 70px auto 0; width: 560px; border-radius: 20px; background: rgba(255, 255, 255, .03); padding: 12px 26px 18px; text-align: left; }
.deriv .r { display: flex; justify-content: space-between; align-items: center; height: 44px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 14px; line-height: 21.7px; color: var(--fg-50); }
.deriv .r em { font: 500 14px/16.8px var(--mono); font-style: normal; color: var(--fg-50); }
.deriv .r em.w { color: rgba(255, 255, 255, .88); }
.deriv .r em.s { color: var(--fg-38); text-decoration: line-through; }
.deriv .tot { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; }
.deriv .tot span { font-size: 20px; letter-spacing: -1.6px; line-height: 24px; color: #fff; }
.deriv .tot b { font-size: 24px; font-weight: 600; letter-spacing: -.48px; line-height: 28.8px; color: #64e0c2; }
.get .after-note { margin: 38px auto 0; width: 520px; }

/* ---------- 7. who it's for ---------- */
.who { height: 1228px; padding-top: 150px; text-align: center; }
.who .h2 { margin: 20px auto 0; }
.who .lead { margin: 20px auto 0; width: 600px; color: var(--fg-50); letter-spacing: -1.6px; }
.who .lead b { font: 500 17px/20.4px var(--mono); color: rgba(255, 255, 255, .88); letter-spacing: 0; }
.pills { margin: 60px auto 0; width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 9px; }
.pills span { height: 37px; padding: 0 18px; border-radius: 24px; background: rgba(255, 255, 255, .04); display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .88); }
.who .alt { margin: 49px auto 0; width: 480px; font-size: 16px; line-height: 25.6px; color: var(--fg-50); }
.vs { margin: 61px auto 0; display: flex; justify-content: center; gap: 14px; }
.vs div { width: 176px; height: 129px; border-radius: 16px; background: rgba(255, 255, 255, .02); display: flex; flex-direction: column; align-items: center; padding-top: 20px; }
.vs .ic { width: 30px; height: 30px; border-radius: 20px; background: rgba(255, 255, 255, .05); display: grid; place-items: center; }
.vs .ic svg { width: 12px; height: 12px; opacity: .55; }
.vs b { margin-top: 12px; font-size: 14px; font-weight: 400; line-height: 21.7px; }
.vs small { margin-top: 11px; font: 500 11px/13.2px var(--mono); letter-spacing: 1.43px; color: var(--fg-38); }
.chev { margin: 34px auto 0; width: 14px; height: 14px; opacity: .4; display: block; }
.us { margin: 42px auto 0; width: 627px; height: 184px; border-radius: 24px; background: rgba(20, 200, 160, .05); box-shadow: 0 30px 80px rgba(20, 200, 160, .12), inset 0 0 0 1px rgba(20, 200, 160, .18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.us .lk { display: flex; align-items: center; gap: 8px; font-size: 25px; font-weight: 500; letter-spacing: -.25px; }
.us .lk .mark { width: 39px; height: 39px; border-radius: 10px; border: 1.5px solid #fff; display: grid; place-items: center; }
.us .lk .mark img { width: 25px; height: 25px; }
.us p { width: 510px; font-size: 20px; letter-spacing: -1.6px; line-height: 24px; }

/* ---------- 8. security ---------- */
.sec { height: 608px; padding-top: 110px; text-align: center; }
.sec .h2 { margin: 16px auto 0; width: 560px; }
.trio { margin: 58px auto 0; width: 1104px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.trio > div { padding: 30px 30px 34px; display: flex; flex-direction: column; align-items: center; }
.trio > div + div { border-left: 1px solid rgba(255, 255, 255, .06); }
.trio svg { width: 18px; height: 18px; opacity: .6; }
.trio b { margin-top: 12px; font-size: 18px; font-weight: 400; letter-spacing: -.54px; line-height: 21.6px; color: rgba(255, 255, 255, .88); }
.trio p { margin-top: 10px; width: 246px; }

/* ---------- 9. faq ---------- */
.faq { height: 885px; padding-top: 130px; text-align: center; }
.faq .h2 { margin: 19px auto 0; }
.qa { margin: 50px auto 0; width: 760px; text-align: left; }
.q { border-bottom: 1px solid rgba(255, 255, 255, .06); cursor: pointer; }
.q .qh { display: flex; justify-content: space-between; align-items: center; padding: 22px 2px 23px; font-size: 20px; letter-spacing: -1.6px; line-height: 24px; }
.q .qh svg { width: 14px; height: 14px; opacity: .55; transition: transform .45s var(--ease-out); flex: none; }
.q.open .qh svg { transform: rotate(45deg); }
.q .qb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.q.open .qb { grid-template-rows: 1fr; }
.q .qb > div { overflow: hidden; }
.q .qb p { width: 580px; padding-bottom: 24px; margin-top: -2px; }

/* ---------- 10. start (early access) ---------- */
.start { height: 755px; padding-top: 160px; text-align: center; overflow: hidden; }
.start .streak { left: 157px; top: 79px; width: 1075px; height: 615px; opacity: .6; }
.start .h2 { margin: 34px auto 0; width: 600px; position: relative; }
.start .lead { margin: 34px auto 0; width: 440px; position: relative; }
.field { position: relative; margin: 34px auto 0; width: 440px; height: 51px; border-radius: 8px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); display: flex; align-items: center; padding: 0 6px 0 14px; gap: 8px; }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 400 15px var(--sans); }
.field input::placeholder { color: var(--fg-38); }
.field .unit { font: 500 12px var(--mono); letter-spacing: 1px; color: var(--fg-50); }
.start .est { position: relative; margin: 16px auto 0; width: 420px; }

/* ---------- footer ---------- */
.sfoot { position: relative; height: 234px; padding-top: 56px; background: var(--bg); }
.sfoot .wrap { height: 100%; }
.sfoot .r1 { display: flex; justify-content: space-between; align-items: flex-start; }
.sfoot .lk { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 500; letter-spacing: -.24px; color: rgba(255, 255, 255, .88); }
.sfoot .lk .mark { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, .88); display: grid; place-items: center; }
.sfoot .lk .mark img { width: 26px; height: 26px; }
.sfoot .tl { margin-top: 10px; }
.sfoot .right { display: flex; align-items: center; gap: 16px; }
.sfoot .r2 { position: absolute; left: 0; right: 0; bottom: 49px; display: flex; justify-content: space-between; align-items: center; padding-top: 0; }
.sfoot .r2 .mono { font-size: 14px; letter-spacing: .42px; color: var(--fg-38); }
.sfoot .r2 nav { display: flex; gap: 20px; font-size: 14px; color: var(--fg-38); }
.sfoot .r2 nav a:hover { color: var(--fg-70); }
.sfoot .line { position: absolute; left: 0; right: 0; bottom: 88px; border-top: 1px solid rgba(255, 255, 255, .06); }

/* ---------- mobile menu (the template's ••• button) ---------- */
.menu { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; gap: 4px; }
.menu i { width: 5px; height: 5px; border-radius: 50%; background: #fff; transition: transform .35s var(--ease-out), opacity .3s; }
.mnav { position: fixed; z-index: 8; left: 12px; right: 12px; top: 12px; padding: 84px 20px 22px; border-radius: 20px; background: rgba(14, 16, 16, .94); backdrop-filter: blur(18px); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.mnav a { font-size: 22px; letter-spacing: -1px; padding: 8px 4px; }
.mnav .btn { margin-top: 14px; align-self: flex-start; font-size: 16px; letter-spacing: -.32px; padding: 0 16px; }
body.menu-open .mnav { opacity: 1; transform: none; pointer-events: auto; }
body.menu-open .menu i:nth-child(1) { transform: translateX(9px); }
body.menu-open .menu i:nth-child(3) { transform: translateX(-9px); }
body.menu-open .menu i:nth-child(2) { opacity: 0; }

/* ---------- tablet (810–1199) ---------- */
@media (max-width: 1199px) {
  .wrap { width: auto; margin: 0 40px; }
  .about .big { width: auto; padding: 0 40px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .cell, .cell.wide { grid-column: span 1; }
  .cell.wide:last-child { grid-column: span 2; }
  .legs .wrap { grid-template-columns: 1fr; gap: 50px; }
  .legs { height: auto; padding-bottom: 150px; }
  .trio { width: auto; margin-left: 40px; margin-right: 40px; }
  .vs { flex-wrap: wrap; padding: 0 40px; }
  .system { height: auto; padding-bottom: 150px; }
}

/* ---------- phone (≤ 809) ---------- */
@media (max-width: 809px) {
  .nav { width: calc(100% - 24px); top: 12px; padding: 0 8px 0 12px; }
  .nav .links, .nav .nav-r .btn { display: none; }
  .nav-r { margin-left: auto; margin-right: 6px; }
  .menu { display: inline-flex; }
  .h2 { font-size: 34px; letter-spacing: -2.4px; line-height: 36px; }
  .lead { font-size: 18px; letter-spacing: -1px; line-height: 23px; }
  .wrap { margin: 0 20px; }

  .hero { height: 100svh; min-height: 680px; }
  .hero .hand { width: 440px; height: 321px; left: 50%; margin-left: -205px; top: 70px; }
  .hero .content { top: auto; bottom: 64px; padding: 0 20px; }
  .hero h1 { font-size: 46px; letter-spacing: -3.4px; line-height: 46px; }
  .hero .sub { width: auto; max-width: 360px; font-size: 16px; letter-spacing: -.8px; line-height: 21px; margin-top: 18px; }
  .hero .ctas { margin-top: 24px; }

  .about { height: auto; padding: 120px 0 90px; }
  .about .big { padding: 0 20px; font-size: 30px; letter-spacing: -2px; line-height: 37px; }
  .stage { height: auto; margin-top: 50px; }
  .belt { top: 90px; }
  .phone { position: relative; left: auto; margin: 0 auto; }
  .after { position: static; margin-top: 30px; padding: 0 20px; }
  .after .lead { width: auto; }
  .stores { flex-direction: column; gap: 12px; }

  .system { padding: 110px 0 100px; }
  .system .h2, .system .lead { width: auto; }
  .grid { grid-template-columns: 1fr; margin-top: 40px; }
  .cell, .cell.wide, .cell.wide:last-child { grid-column: span 1; height: auto; padding-bottom: 24px; }
  .cell .foot, .cell.wide .foot { position: static; margin-top: 26px; }
  .chart .ax { top: 174px; }
  .chart { margin-bottom: 20px; }

  .legs { padding: 100px 0; }
  .legs .left { padding: 0; }
  .leg .bd .body { width: auto; }
  .leg .hd small { display: none; }
  .panel .total { font-size: 34px; }

  .cardsec { height: auto; padding: 110px 20px 100px; }
  .cardsec .h2, .cardsec .lead, .get .h2, .sec .h2, .start .h2, .start .lead { width: auto; }
  .tcard-wrap { width: calc(680px * var(--s, .5)); height: calc(429px * var(--s, .5)); margin-top: 44px; }
  .tscale { transform: scale(var(--s, .5)); transform-origin: 0 0; width: 680px; }
  .switch { margin-top: 30px; }
  .spend { margin-top: 26px; font-size: 14px; }

  .get { height: auto; padding: 110px 20px 100px; }
  .get .num { font-size: 64px; letter-spacing: -3px; line-height: 70px; margin-top: 44px; white-space: normal; }
  .get .num small { font-size: 32px; letter-spacing: -1px; }
  .deriv { width: auto; padding: 8px 18px 16px; margin-top: 44px; }
  .deriv .r { font-size: 13px; gap: 10px; }
  .get .after-note { width: auto; }

  .who { height: auto; padding: 110px 20px 100px; }
  .who .lead, .who .alt { width: auto; }
  .pills { width: auto; margin-top: 40px; }
  .vs { flex-direction: column; align-items: stretch; padding: 0; gap: 10px; margin-top: 40px; }
  .vs div { width: auto; height: 116px; }
  .us { width: auto; height: auto; padding: 34px 22px; }
  .us p { width: auto; font-size: 18px; letter-spacing: -1px; }

  .sec { height: auto; padding: 100px 20px; }
  .trio { grid-template-columns: 1fr; margin: 40px 0 0; }
  .trio > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .06); }

  .faq { height: auto; padding: 100px 20px; }
  .qa { width: auto; margin-top: 36px; }
  .q .qh { font-size: 18px; letter-spacing: -1px; gap: 16px; }
  .q .qb p { width: auto; }

  .start { height: auto; padding: 110px 20px 120px; }
  .field { width: auto; height: auto; flex-wrap: wrap; padding: 6px; }
  .field input { height: 44px; padding-left: 10px; }
  .field .btn { width: 100%; justify-content: center; height: 44px; }
  .field .unit { padding-right: 10px; }
  .start .est { width: auto; }

  .sfoot { height: auto; padding: 50px 0 40px; }
  .sfoot .r1 { flex-direction: column; gap: 26px; }
  .sfoot .right { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sfoot .line { position: static; margin: 34px 0 20px; }
  .sfoot .r2 { position: static; flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- $TALARIA contract address: visible, click to copy ---------- */
@media (min-width: 810px) { .nav { width: 800px; } }
.tklink { color: #fff; font-weight: 600; }
@media (min-width: 810px) and (max-height: 880px) { .hero { height: 100vh; min-height: 640px; } .hero .content { top: auto; bottom: 26px; } }
.cabox { margin-top: 22px; display: inline-flex; align-items: center; gap: 4px; height: 46px; padding: 0 6px 0 16px; border-radius: 12px; background: rgba(8, 10, 10, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); backdrop-filter: blur(12px); font-size: 14px; }
.cabox .tk { font-weight: 600; letter-spacing: -.2px; margin-right: 8px; }
.ca-copy { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 8px; font: 400 14px var(--mono); color: rgba(255, 255, 255, .92); transition: background .2s; }
.ca-copy:hover { background: rgba(255, 255, 255, .1); }
.ca-copy svg { width: 14px; height: 14px; opacity: .7; flex: none; }
.ca-copy.done { color: #64e0c2; }
.cabox a { height: 34px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; color: rgba(255, 255, 255, .7); font-size: 13px; }
.cabox a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hero .cabox { opacity: .001; animation: fade 1.6s cubic-bezier(.44, 0, .56, 1) 1.7s forwards; }
.fca { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--fg-50); }
.fca > span { color: rgba(255, 255, 255, .85); font-weight: 600; margin-right: 4px; }
.fca .ca-copy { font-size: 13px; padding: 0 8px; height: 30px; }
.fca a { padding: 0 8px; color: var(--fg-50); }
.fca a:hover { color: #fff; }
@media (max-width: 809px) {
  .cabox { flex-wrap: wrap; height: auto; padding: 8px; gap: 2px; justify-content: center; max-width: calc(100vw - 32px); }
  .cabox .tk { width: 100%; text-align: center; margin: 2px 0 2px; }
  .ca-copy { font-size: 11.5px; padding: 0 6px; max-width: 100%; }
  .ca-copy .ca-t { overflow: hidden; text-overflow: ellipsis; }
  .hero .content { bottom: 30px; }
  .hero .ctas { margin-top: 18px; }
  .fca .ca-copy { font-size: 11px; }
}