/* Nexum on the Trenox design system: black, one ember gradient, Inter Display, glass with a warm inner glow.
   Measured from trenox.framer.website (1440 wide): containers 1240, sections 160px apart, type presets below. */
@font-face { font-family: "Inter Display"; font-weight: 400; font-display: swap; src: url(/fonts/inter-display-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Display"; font-weight: 500; font-display: swap; src: url(/fonts/inter-display-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Display"; font-weight: 600 800; font-display: swap; src: url(/fonts/inter-display-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Display"; font-weight: 400; font-display: swap; src: url(/fonts/inter-display-400-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Display"; font-weight: 500; font-display: swap; src: url(/fonts/inter-display-500-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Display"; font-weight: 600 800; font-display: swap; src: url(/fonts/inter-display-600-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --t-bg: #000;
  --t-tx: #fff;
  --t-tx2: rgba(255, 255, 255, .7);
  --t-tx3: rgba(255, 255, 255, .45);
  --t-card: rgba(248, 248, 248, .05);
  --t-line: rgba(255, 255, 255, .1);
  --t-line2: rgba(255, 255, 255, .16);
  --ember: #ff640d;
  --ember-2: #ab2020;
  --ember-grad: linear-gradient(180deg, #ff640d 0%, #ab2020 100%);
  --pill-glow: inset 2px 0 16px rgba(255, 167, 167, .3), inset 10px 0 14px rgba(235, 190, 190, .05);
  --nav-glow: inset 2px 0 16px rgba(255, 167, 167, .3), inset 10px 0 14px rgba(255, 167, 167, .3);
  --card-glow: inset 4.75px 9.5px 38px rgba(248, 248, 248, .06);
  --t-font: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-ease: cubic-bezier(.12, .23, .5, 1);
  --wrap: 1240px;
}
html { background: #000; }
body.t { font-family: var(--t-font); background: #000; color: var(--t-tx); }
body.t::before { display: none; }

/* ---- type presets ---- */
.h-hero { font: 500 62px/1.2 var(--t-font); letter-spacing: -.04em; }
.h-sec { font: 500 56px/1.2 var(--t-font); letter-spacing: -.02em; }
.h-3 { font: 500 28px/1.3 var(--t-font); letter-spacing: -.02em; }
.p-l { font: 400 20px/1.5 var(--t-font); color: var(--t-tx2); }
.p-m { font: 500 18px/1.5 var(--t-font); color: var(--t-tx2); }
.p-s { font: 500 16px/1.2 var(--t-font); letter-spacing: -.02em; color: var(--t-tx2); }
.wrap { width: 100%; max-width: calc(var(--wrap) + 100px); margin: 0 auto; padding: 0 50px; }
.sec { padding-top: 160px; position: relative; }

/* ---- the tag pill: glass with the warm inner glow, an arrow bubble on the right ---- */
.tag { display: inline-flex; align-items: center; gap: 10px; padding: 6px 7.3px 6px 16px; border-radius: 20px; background: rgba(0, 0, 0, .06); box-shadow: var(--pill-glow); font: 400 14px/1.2 var(--t-font); letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.tag i { display: grid; place-items: center; width: 27px; height: 20px; border-radius: 10.14px; background: linear-gradient(180deg, #e1e1e1 0%, #ffa7a7 100%); color: #000; font: 400 16px/1 Inter, var(--t-font); font-style: normal; }
.tag i::before { content: "→"; }

/* ---- buttons: the label rolls up to its twin on hover ---- */
.tb { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 30px; border-radius: 8px; font: 600 18px/27px var(--t-font); color: #fff; overflow: hidden; isolation: isolate; cursor: pointer; transition: background-color .35s var(--t-ease), box-shadow .35s var(--t-ease), color .35s; white-space: nowrap; border: 0; }
.tb .roll { position: relative; display: block; height: 27px; overflow: hidden; }
.tb .roll span { display: block; transition: transform .45s var(--t-ease); }
.tb .roll span + span { position: absolute; left: 0; top: 100%; }
.tb:hover .roll span { transform: translateY(-100%); }
.tb .arr { width: 27px; height: 27px; display: grid; place-items: center; transition: transform .45s var(--t-ease); }
.tb .arr svg { width: 16px; height: 16px; }
.tb:hover .arr { transform: rotate(45deg); }
.tb-white { background: #fff; color: #000; }
.tb-white .roll span + span { color: #fff; }
.tb-white:hover { background: rgba(255, 255, 255, 0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); color: #fff; }
.tb-ember { background: var(--ember-grad); }
.tb-ember::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #ff7a2e 0%, #c22b22 100%); opacity: 0; transition: opacity .35s var(--t-ease); }
.tb-ember:hover::after { opacity: 1; }
.tb-soft { background: rgba(255, 255, 255, .05); }
.tb-soft:hover { background: rgba(255, 255, 255, .1); }
.tb-sm { padding: 9px 19px; font: 400 14px/16.8px var(--t-font); letter-spacing: -.02em; }
.tb-sm .roll { height: 16.8px; }
.tb-md { padding: 13px 30px; }
.tb[disabled] { opacity: .5; pointer-events: none; }

/* ---- navbar: a glass pill centred at the top, dropping in on load ---- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 32px 10px 10px; pointer-events: none; }
.nav-in { pointer-events: auto; display: flex; align-items: center; gap: 22px; padding: 7px 10px 7px 20px; border-radius: 8px; background: rgba(0, 0, 0, .06); box-shadow: var(--nav-glow); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); position: relative; }
.nav-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .02); pointer-events: none; }
.nav-logo { display: flex; align-items: center; gap: 9px; flex: none; }
.nav-logo img { width: 38px; height: 38px; }
.nav-logo b { font: 500 19px/1 var(--t-font); letter-spacing: -.02em; display: none; }
.nav-links { display: flex; align-items: center; gap: 21px; margin: 0; padding: 0; list-style: none; }
.nl { position: relative; display: block; height: 19.2px; overflow: hidden; font: 500 16px/19.2px var(--t-font); letter-spacing: -.02em; color: var(--t-tx2); white-space: nowrap; transition: color .3s; }
.nl span { display: block; transition: transform .45s var(--t-ease); }
.nl span + span { position: absolute; left: 0; top: 100%; }
.nl:hover span { transform: translateY(-100%); }
.nl.on { color: #fff; }
.nav-more { position: relative; }
.nav-more > button { display: flex; align-items: center; gap: 4px; font: 500 16px/19.2px var(--t-font); letter-spacing: -.02em; color: var(--t-tx2); }
.nav-more > button svg { width: 14px; height: 14px; transition: transform .3s var(--t-ease); }
.nav-more.open > button svg { transform: rotate(180deg); }
.nav-more.on > button { color: #fff; }
.nav-drop { position: absolute; top: calc(100% + 22px); left: 50%; translate: -50% 0; min-width: 220px; padding: 8px; border-radius: 8px; background: rgba(12, 10, 10, .92); box-shadow: var(--nav-glow); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--t-ease), transform .25s var(--t-ease), visibility .25s; }
.nav-more.open .nav-drop { opacity: 1; visibility: visible; transform: none; }
.nav-drop a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 6px; font: 500 15px/1.2 var(--t-font); color: var(--t-tx2); }
.nav-drop a:hover, .nav-drop a.on { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-act { display: flex; align-items: center; gap: 8px; }
.nav .nbadge { position: static; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ember); color: #fff; font: 600 11px/1 var(--t-font); }
.nav-more .dotb { position: absolute; top: -3px; right: -9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.nav-wallet .wdot { width: 7px; height: 7px; border-radius: 50%; background: #9a9a9a; flex: none; }
.nav-wallet.on .wdot { background: #3ddc97; box-shadow: 0 0 8px rgba(61, 220, 151, .7); }
.nav-burger { display: none; width: 40px; height: 40px; border-radius: 8px; place-items: center; color: #fff; }
.nav-burger svg { width: 22px; height: 22px; }
.mnav { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 110px 24px 40px; display: flex; flex-direction: column; gap: 4px; overflow: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.mnav.open { opacity: 1; visibility: visible; }
.mnav a { padding: 14px 6px; border-bottom: 1px solid var(--t-line); font: 500 22px/1.2 var(--t-font); letter-spacing: -.02em; color: var(--t-tx2); }
.mnav a.on { color: #fff; }
.mnav .tb { margin-top: 18px; }
/* load: the navbar drops 150px into place after a second (Trenox: delay 1s, .6s, ease .12 .23 .5 1) */
.nav.intro .nav-in { animation: navDrop .6s var(--t-ease) 1s both; }
@keyframes navDrop { from { opacity: 0; transform: translateY(-150px); } to { opacity: 1; transform: none; } }

/* ---- inner page hero: the ember arc from the top right ---- */
.phero { position: relative; overflow: hidden; padding: 190px 50px 70px; text-align: center; background: #000; }
.phero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 623px; background: url(/img/t/page-arc.webp) center top / 1440px auto no-repeat; pointer-events: none; animation: arcIn 2.2s var(--t-ease) .2s both; }
.phero.tall::before { height: 1047px; background-image: url(/img/t/page-arc-tall.webp); }
@keyframes arcIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1440px) { .phero::before { background-size: 100% auto; } }
.phero > * { position: relative; }
.phero .tag { margin-bottom: 30px; }
.phero h1 { font: 500 56px/1.2 var(--t-font); letter-spacing: -.02em; max-width: 860px; margin: 0 auto; }
.phero p { font: 500 18px/1.5 var(--t-font); color: var(--t-tx2); max-width: 620px; margin: 18px auto 0; }
.phero .acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.phero.compact { padding: 160px 50px 48px; }
.phero.compact h1 { font-size: 48px; }

/* ---- section heading ---- */
.shead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; margin-bottom: 60px; }
.shead.left { align-items: flex-start; text-align: left; }
.shead .h-sec { max-width: 860px; }
.shead.split { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; }
.shead.split .p-s { max-width: 503px; text-align: right; line-height: 1.5; }

/* ---- cards ---- */
.gcard { position: relative; border-radius: 8px; background: var(--t-card); box-shadow: var(--card-glow); }
.gcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .05); pointer-events: none; }
.tbox { position: relative; border-radius: 8px; overflow: hidden; background: #0b0605 url(/img/t/box-glow.webp) center top / cover no-repeat; }
.tbox::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .12); pointer-events: none; -webkit-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, .25)); mask: linear-gradient(180deg, #000, rgba(0, 0, 0, .25)); }
.ico-o { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 24px; background: var(--ember); flex: none; }
.ico-o img, .ico-o svg { width: 24px; height: 24px; }

/* ---- CTA: ember haze from the top, a field of stars breathing ---- */
.tcta { position: relative; border-radius: 8px; overflow: hidden; background: #000 url(/img/t/cta-glow.webp) center top / cover no-repeat; }
.tcta .stars { position: absolute; inset: -22px -62px; background: url(/img/t/stars.webp) center / cover no-repeat; border-radius: 17.4px; animation: breathe 6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
.cta-body { position: relative; padding: 94px 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.cta-body .h-sec { max-width: 854px; }
.cta-body .p-m { color: #fff; margin-top: 20px; }
.cta-body .tag { margin-bottom: 20px; }

/* ---- footer ---- */
.tfoot { position: relative; padding: 120px 50px 30px; margin-top: 160px; background: url(/img/t/footer-glow.webp) center bottom / 100% 527px no-repeat; overflow: hidden; }
.foot-top { max-width: var(--wrap); margin: 0 auto; display: flex; justify-content: space-between; gap: 60px; padding-bottom: 48px; }
.foot-l { max-width: 452px; }
.foot-brand { display: flex; align-items: center; gap: 12px; font: 400 20px/30px var(--t-font); }
.foot-brand img { width: 40px; height: 40px; }
.foot-l .p-s { margin-top: 26px; line-height: 1.5; }
.foot-l h4 { font: 500 28px/1.3 var(--t-font); letter-spacing: -.02em; margin: 40px 0 22px; }
.foot-ca { display: flex; align-items: center; gap: 10px; max-width: 403px; height: 50px; padding: 0 8px 0 24px; border-radius: 94px; background: rgba(255, 255, 255, .05); font: 500 15px/1 var(--t-font); color: var(--t-tx2); }
.foot-ca code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1 var(--t-font); color: #fff; }
.foot-ca button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.foot-ca button:hover { background: rgba(255, 255, 255, .08); }
.foot-r { display: flex; gap: 100px; }
.foot-col h5 { font: 400 20px/30px var(--t-font); margin-bottom: 10px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.foot-bot { max-width: var(--wrap); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .1); font: 400 14px/1.2 var(--t-font); color: var(--t-tx2); }
.foot-bot a:hover { color: #fff; }

/* ---- FAQ accordion ---- */
.faq-list { display: grid; gap: 24px; }
.faq-i { border-radius: 8px; background: rgba(255, 255, 255, .05); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 16px 24px 24px; text-align: left; font: 500 18px/27px var(--t-font); color: var(--t-tx2); }
.faq-q .pm { flex: none; position: relative; width: 20px; height: 20px; border: 1px solid #fff; border-radius: 4px; }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; background: #fff; translate: -50% -50%; transition: transform .35s var(--t-ease); }
.faq-q .pm::after { transform: rotate(90deg); }
.faq-i.open .faq-q { color: #fff; }
.faq-i.open .pm::after { transform: rotate(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--t-ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 24px 24px; font: 500 16px/1.6 var(--t-font); color: var(--t-tx2); }
.faq-i.open .faq-a { grid-template-rows: 1fr; }

/* ---- reveal on scroll (Trenox sections fade up as they enter) ---- */
[data-rv] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--t-ease), transform .9s var(--t-ease); transition-delay: var(--d, 0s); }
[data-rv].in { opacity: 1; transform: none; }
[data-rv="fade"] { transform: none; }
[data-rv="right"] { transform: translateX(150px); }
/* words that come into focus (the hero headline and its line) */
.blurw .w { display: inline-block; filter: blur(10px); opacity: 0; transform: translateY(8px); transition: filter .8s var(--t-ease), opacity .8s var(--t-ease), transform .8s var(--t-ease); transition-delay: var(--d, 0s); }
.blurw.in .w { filter: none; opacity: 1; transform: none; }

/* ---- marquee ---- */
.mq { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-t { display: flex; gap: var(--gap, 60px); width: max-content; animation: mq var(--dur, 40s) linear infinite; }
.mq-t.rev { animation-direction: reverse; }
.mq:hover .mq-t.hold { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(calc(-50% - var(--gap, 60px) / 2)); } }

@media (prefers-reduced-motion: reduce) {
  [data-rv], .blurw .w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .mq-t, .tcta .stars, .nav.intro .nav-in { animation: none !important; }
}

/* ---- responsive (Trenox's tablet 810–1199 and phone <810 layouts) ---- */
@media (max-width: 1199px) {
  .wrap { padding: 0 32px; }
  .h-hero { font-size: 52px; }
  .h-sec, .phero h1 { font-size: 44px; }
  .sec { padding-top: 120px; }
  .foot-r { gap: 50px; }
  .nav-links { gap: 16px; }
}
@media (max-width: 1060px) {
  .nav-links, .nav-more, .nav-act .tb-ember { display: none; }
  .nav-burger { display: grid; }
  .nav-in { width: min(100%, 720px); justify-content: space-between; }
  .nav-logo b { display: block; }
}
@media (max-width: 809px) {
  .wrap { padding: 0 16px; }
  .h-hero { font-size: 40px; }
  .h-sec, .phero h1, .phero.compact h1 { font-size: 34px; }
  .h-3 { font-size: 22px; }
  .p-l { font-size: 17px; }
  .sec { padding-top: 90px; }
  .shead { margin-bottom: 40px; gap: 20px; }
  .shead.split { flex-direction: column; align-items: flex-start; }
  .shead.split .p-s { text-align: left; }
  .phero { padding: 140px 16px 50px; }
  .phero.compact { padding: 130px 16px 36px; }
  .phero::before { background-size: 900px auto; background-position: 70% top; }
  .nav { padding: 16px 12px 10px; }
  .nav-act .nav-wallet .wtx { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
  .cta-body { padding: 64px 18px; }
  .tfoot { padding: 80px 16px 24px; margin-top: 100px; }
  .foot-top { flex-direction: column; gap: 40px; }
  .foot-r { flex-wrap: wrap; gap: 36px 60px; }
  .foot-bot { flex-direction: column; }
  .faq-q { font-size: 16px; padding: 18px 14px 18px 18px; }
}