/* ── Vexto drainer flow (Round 6) — global resets/@font-face stripped so they
don't leak into the Trust Wallet page; :root vars + component styles kept ── */
/* ── CSS variables ── */
:root {
--violet-50: #f4f7f9;
--violet-100: #e5ecf2;
--violet-200: #cdd7df;
--violet-300: #9fb0c0;
--violet-500: #3a33ff;
--violet-600: #0500ff;
--violet-700: #62748e;
--violet-800: #45556c;
--slate-50: #f8fafc;
--slate-100: #f1f5f9;
--slate-200: #e2e8f0;
--slate-400: #90a1b9;
--slate-500: #62748e;
--slate-600: #45556c;
--slate-950: #0a0d11;
--emerald-50: #ecfdf5;
--emerald-700: #007956;
--indigo-100: #e5ecf2;
/* Stage 9: Nexo.com measured tokens */
--ink: #0a0d11;
--accent: #0500ff;
--accent-hover: #2fbdb6;
}
/* ── Utility classes ── */
.container { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 64rem) { .container { padding: 0 2rem; } }
.eyebrow {
letter-spacing: .18em;
text-transform: uppercase;
color: #62748e;
font-size: .875rem;
font-weight: 700;
}
.section-title {
letter-spacing: normal;
color: #0a0d11;
text-wrap: balance;
max-width: 48rem;
margin-top: 1rem;
font-size: clamp(1.9rem, 3.2vw, 2.25rem);
font-weight: 400;
line-height: 1.2;
}
.section-copy {
color: #62748e;
max-width: 42rem;
margin-top: 1.25rem;
font-size: 1.0625rem;
line-height: 1.8;
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-weight: 500;
font-size: 1rem;
border-radius: 6px;
padding: .75rem 1.5rem;
cursor: pointer;
border: none;
text-decoration: none;
transition: background .15s, color .15s;
white-space: nowrap;
}
.btn-primary {
background: #0500ff;
color: #fff;
}
.btn-primary:hover { background: #2a25e6; }
/* Floating "Up" button (2026-09-30): bottom-left, scrolls to the
Request A Nexo Card section (#get-started). Site theme: violet. */
.float-up-btn {
position: fixed;
left: 1rem;
bottom: 1rem;
z-index: 90;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
background: #0a0d11;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 14px rgba(10,13,17, .4);
transition: background .15s, transform .15s;
-webkit-tap-highlight-color: transparent;
}
.float-up-btn:hover { background: #62748e; transform: translateY(-2px); }
.float-up-btn svg { display: block; }
.float-up-btn span {
font-size: .625rem;
font-weight: 700;
letter-spacing: .04em;
line-height: 1;
margin-top: 1px;
}
/* Floating contact buttons (2026-10-01): WhatsApp (top) + Telegram (below),
right side, vertically centred. Inline official brand glyphs (simple-icons
paths) tinted white on the site violet — no external requests, loads
instantly like the other icons. Smaller than the Up button (48px). */
.float-contact-stack {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 90;
display: flex;
flex-direction: column;
gap: .6rem;
}
.float-contact-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: #0a0d11;
color: #fff;
cursor: pointer;
box-shadow: 0 4px 14px rgba(10,13,17, .4);
transition: background .15s, transform .15s;
-webkit-tap-highlight-color: transparent;
}
.float-contact-btn:hover { background: #62748e; transform: translateY(-2px); }
.float-contact-btn svg { display: block; width: 24px; height: 24px; fill: #fff; }
/* Cookie acceptance banner (2026-10-01): bottom-left, sits directly ABOVE
the floating Up button (Up = 52px tall at bottom 1rem -> banner at
bottom 5rem leaves a 12px gap). First-time visitors only (localStorage
flag). Site theme: violet accent on white card. */
.cookie-banner {
position: fixed;
left: 1rem;
bottom: 5rem;
z-index: 95;
max-width: min(320px, calc(100vw - 2rem));
background: #fff;
border: 1px solid var(--violet-200);
border-left: 4px solid #0a0d11;
border-radius: .75rem;
box-shadow: 0 10px 30px rgba(2, 6, 24, .18);
padding: .9rem 2.4rem .9rem 1rem;
}
.cookie-banner .cb-close {
position: absolute;
top: .55rem;
right: .55rem;
width: 1.7rem;
height: 1.7rem;
border: 1px solid #fecaca;
border-radius: 9999px;
background: #fef2f2;
color: #dc2626;
font-size: 1rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, color .15s, border-color .15s;
-webkit-tap-highlight-color: transparent;
}
.cookie-banner .cb-close:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
/* Mobile (2026-10-01): banner shrunk for small screens, anchored
bottom-left so it stays above the Up button. Uniform scale keeps
proportions intact. */
@media (max-width: 560px) {
.cookie-banner { transform: scale(.75); transform-origin: bottom left; }
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p {
margin: 0 0 .7rem;
font-size: .8rem;
line-height: 1.5;
color: #334155;
}
.cookie-banner p strong { color: #62748e; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.cookie-actions button {
border-radius: 9999px;
padding: .5rem .9rem;
font-family: inherit;
font-size: .78rem;
font-weight: 700;
cursor: pointer;
transition: background .15s, color .15s;
-webkit-tap-highlight-color: transparent;
}
.cb-accept { background: #0a0d11; color: #fff; border: none; }
.cb-accept:hover { background: #62748e; }
.cb-reject { background: #fff; color: #62748e; border: 1px solid var(--violet-300); }
.cb-reject:hover { background: var(--violet-50); }
.cb-settings { background: transparent; color: #62748e; border: none; text-decoration: underline; }
.cb-settings:hover { color: #334155; }
.cookie-settings { margin-top: .75rem; border-top: 1px solid var(--violet-100); padding-top: .75rem; }
.cookie-settings[hidden] { display: none; }
.cookie-settings h4 { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; color: #0a0d11; }
.cookie-cat { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .55rem; }
.cookie-cat input { margin-top: .15rem; width: 1rem; height: 1rem; accent-color: #0a0d11; flex: none; }
.cookie-cat label { font-size: .75rem; line-height: 1.45; color: #334155; cursor: pointer; }
.cookie-cat label strong { color: #0a0d11; }
.cookie-cat .cb-locked { color: #94a3b8; font-size: .68rem; }
.cb-save {
background: #0a0d11; color: #fff; border: none; border-radius: 9999px;
padding: .5rem 1.15rem; font-family: inherit; font-size: .78rem; font-weight: 700;
cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.cb-save:hover { background: #62748e; }
.btn-white {
background: #fff;
color: #0a0d11;
}
.btn-white:hover { background: #f1f5f9; }
.btn-outline {
background: transparent;
color: #0a0d11;
border: 1.5px solid #9fb0c0;
}
.btn-outline:hover { background: #f4f7f9; }
/* ── Connected wallet state ── */
.wallet-bar {
display: flex; align-items: center; gap: .7rem;
padding: .7rem .8rem .7rem .75rem;
background: var(--violet-50);
border: 1px solid var(--violet-200);
border-radius: 1rem;
margin-bottom: .85rem;
}
.wallet-dot {
width: .55rem; height: .55rem; border-radius: 9999px;
background: #10b981; flex: none;
box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.wallet-meta { min-width: 0; flex: 1; }
.wallet-addr {
font-size: .9375rem; font-weight: 650; color: #0a0d11;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: -.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wallet-net { font-size: .75rem; color: var(--violet-700); margin-top: .1rem; }
.wallet-actions { display: flex; gap: .35rem; flex: none; }
.wallet-btn {
border: 1px solid var(--violet-200); background: #fff;
color: var(--violet-700); border-radius: 9999px;
padding: .4rem .8rem; font-size: .75rem; font-weight: 600;
font-family: inherit; cursor: pointer;
transition: background .15s, border-color .15s;
}
.wallet-btn:hover { background: var(--violet-100); border-color: var(--violet-300); }
.wallet-btn:focus-visible { outline: 2px solid #0a0d11; outline-offset: 2px; }
.wallet-btn.copied { color: var(--emerald-700); border-color: #a7f3d0; background: var(--emerald-50); }
/* Connected-state button (spec 2026-09-23 §4 step C; redesigned
2026-09-24 round 7 so it READS as a dropdown at a glance):
wallet logo + network icon + shortened address + a distinct
chevron button, opening a panel with a caret notch, strong
shadow and a slide-down animation (Copy / Switch network /
Disconnect). The bar itself is the button. */
.wallet-bar {
position: relative; cursor: pointer;
border: 1px solid var(--violet-200);
transition: border-color .15s, box-shadow .15s;
}
.wallet-bar:hover { border-color: var(--violet-300); box-shadow: 0 4px 14px rgba(10,13,17,.10); }
.wallet-bar:focus-within { outline: 2px solid #0a0d11; outline-offset: 2px; }
.wallet-bar.dd-open { border-color: var(--violet-300); box-shadow: 0 6px 18px rgba(10,13,17,.14); }
.wallet-logo {
width: 2rem; height: 2rem; border-radius: .55rem; flex: none;
display: flex; align-items: center; justify-content: center;
overflow: hidden; background: #e5ecf2; color: #0a0d11;
font-weight: 700; font-size: .9rem;
}
.wallet-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wallet-neticon {
width: 1.15rem; height: 1.15rem; flex: none; display: inline-flex;
align-items: center; justify-content: center;
}
.wallet-neticon svg { width: 100%; height: 100%; display: block; }
/* z22: per-network logos are ![]()
files — render them like the SVGs */
.wallet-neticon img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
/* Chevron: a filled circle with a crisp arrow — unmistakably a
dropdown affordance. Rotates 180° while the panel is open. */
.wallet-chev {
flex: none; width: 1.9rem; height: 1.9rem; border: none;
background: var(--violet-100); color: var(--violet-700);
border-radius: 9999px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s, transform .18s ease;
}
.wallet-chev svg { width: .8rem; height: .8rem; display: block; }
.wallet-chev:hover { background: var(--violet-200); }
.wallet-bar.dd-open .wallet-chev { transform: rotate(180deg); background: var(--violet-200); }
/* Panel: caret notch pointing at the bar, heavier shadow, animated. */
.wallet-dd {
position: absolute; top: calc(100% + .55rem); left: 0; right: 0; z-index: 50;
background: #fff; border: 1px solid var(--violet-200); border-radius: .9rem;
box-shadow: 0 22px 48px rgba(2,6,24,.20), 0 4px 12px rgba(2,6,24,.08);
padding: .4rem; display: none; text-align: left;
}
.wallet-dd::before {
content: ""; position: absolute; top: -.55rem; left: 1.4rem;
width: 1rem; height: 1rem; background: #fff;
border-left: 1px solid var(--violet-200);
border-top: 1px solid var(--violet-200);
transform: rotate(45deg);
}
.wallet-dd.open { display: block; animation: wallet-dd-in .16s ease; }
@keyframes wallet-dd-in {
from { opacity: 0; transform: translateY(-.35rem); }
to { opacity: 1; transform: translateY(0); }
}
.wallet-dd-item {
display: flex; align-items: center; gap: .6rem; width: 100%;
border: none; background: transparent; font-family: inherit;
font-size: .875rem; font-weight: 600; color: #0a0d11;
padding: .6rem .7rem; border-radius: .6rem; cursor: pointer;
transition: background .12s;
}
.wallet-dd-item:hover { background: var(--violet-50); }
.wallet-dd-item:focus-visible { outline: 2px solid #0a0d11; outline-offset: -2px; }
.wallet-dd-item.danger { color: #dc2626; }
.wallet-dd-item.danger:hover { background: #fef2f2; }
.wallet-dd-sep { height: 1px; background: #eef0f4; margin: .3rem .4rem; }
.wallet-dd-sub {
font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: #94a3b8; padding: .5rem .7rem .25rem;
}
.wallet-dd-list { max-height: 20rem; overflow-y: auto; padding: 0 .25rem .25rem; }
/* z20 (Stage 4, 2026-09-25): a THICK, high-contrast scrollbar so
mobile users can SEE there are more networks below the fold.
Violet pill thumb on a pale track — WebKit (iOS Safari / Chrome
Android) via the pseudo-elements, Firefox via scrollbar-color. */
.wallet-dd-list { scrollbar-width: auto; scrollbar-color: #0a0d11 #e5ecf2; }
.wallet-dd-list::-webkit-scrollbar { width: 10px; }
.wallet-dd-list::-webkit-scrollbar-track { background: #e5ecf2; border-radius: 9999px; }
.wallet-dd-list::-webkit-scrollbar-thumb { background: #0a0d11; border-radius: 9999px; border: 2px solid #fff; }
/* z32 (2026-09-26): scroll cue for the switcher list — the 14 networks
exceed the (now taller) list, so a bobbing chevron + label sits UNDER
the scroll area (always visible) telling the victim it scrolls before
they scroll. Same motif as the picker's .vx-scrollcue. */
.wallet-dd-cue { display: flex; align-items: center; justify-content: center; gap: .35rem;
padding: .45rem .5rem .2rem; font-size: .72rem; font-weight: 600; color: #0a0d11; letter-spacing: .02em; }
.wallet-dd-cue svg { animation: wallet-cue-bob 1.4s ease-in-out infinite; }
@keyframes wallet-cue-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.wallet-dd-net {
display: flex; align-items: center; gap: .55rem; width: 100%;
border: none; background: transparent; font-family: inherit;
font-size: .8125rem; font-weight: 600; color: #334155;
padding: .5rem .6rem; border-radius: .55rem; cursor: pointer;
transition: background .12s;
}
.wallet-dd-net:hover { background: var(--violet-50); }
.wallet-dd-net.current { color: var(--violet-700); background: var(--violet-50); }
.wallet-dd-net .wallet-neticon { width: 1rem; height: 1rem; }
/* Check tick on the active network row. */
.wallet-dd-net .dd-tick {
margin-left: auto; flex: none; width: .95rem; height: .95rem;
display: none; color: var(--violet-700);
}
.wallet-dd-net.current .dd-tick { display: block; }
/* Closed-bar hint: tells the victim the dropdown holds MORE networks,
so they open it to switch. Informational (the bar itself is the
button that opens the panel). */
/* z20 (Stage 4, 2026-09-25): the chip moved to the RIGHT side of the
wallet bar (beside the chevron) and GREW — it is the switch-network
control now, not a footnote under the address. Clicking it opens
the dropdown (the whole bar is the button). */
.wallet-hintchip {
display: inline-flex; align-items: center; gap: .35rem;
flex: none; align-self: center; white-space: nowrap;
padding: .28rem .7rem;
font-size: .8125rem; font-weight: 700; letter-spacing: .01em;
color: var(--violet-700); background: var(--violet-50);
border: 1px solid var(--violet-200); border-radius: 9999px;
}
.wallet-hintchip svg { width: .8rem; height: .8rem; display: block; }
/* Round 34: on mobile the "Switch network" hint chip squeezed the
wallet-meta column so narrow that the network NAME wrapped and became
unreadable. The chip is a plain (no click handler) — the whole
bar is the button and the chevron opens the real dropdown — so hiding
it on small screens loses nothing and frees room for the name. Scoped
to the hero connected section only; the modal bar is untouched.
Mobile-only (<=560px) so the chip still shows on desktop. */
@media (max-width: 560px) {
.vx2-hero-connected .wallet-hintchip { display: none; }
}
/* Disconnect lifted OUT of the dropdown (2026-09-24): not everyone knows
to open the panel, so it sits visibly beside the bar on every viewport.
The bar keeps its own margin; the wrapper supplies the row layout. */
.wallet-row { display: flex; align-items: stretch; gap: .5rem; margin-bottom: .85rem; }
.wallet-row .wallet-bar { margin-bottom: 0; flex: 1; min-width: 0; }
.wallet-disconnect {
flex: none; align-self: center;
display: inline-flex; align-items: center; gap: .4rem;
border: 1px solid #fecaca; background: #fff; color: #dc2626;
border-radius: 9999px; padding: .55rem .95rem;
font-family: inherit; font-size: .8125rem; font-weight: 700;
cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.wallet-disconnect svg { width: .95rem; height: .95rem; display: block; }
.wallet-disconnect:hover { background: #fef2f2; border-color: #fca5a5; }
.wallet-disconnect:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }
.wallet-disconnect.busy { opacity: .6; cursor: default; }
@media (max-width: 560px) {
/* Narrow phones: stack the Disconnect button UNDER the bar at full
width instead of squeezing it beside the (already tight) bar. */
.wallet-row { flex-direction: column; align-items: stretch; }
.wallet-disconnect { width: 100%; justify-content: center; padding: .7rem; }
}
/* ── Networks accepted ── */
.networks-section { padding: 5rem 0; background: #fff; }
.networks-head { max-width: 46rem; }
.networks-grid {
display: grid; gap: .75rem; margin-top: 2rem;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.network-item {
display: flex; align-items: center; gap: .65rem;
border: 1px solid #e2e8f0; border-radius: .9rem;
padding: .8rem .9rem; background: #fff;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.network-item:hover { border-color: #9fb0c0; box-shadow: 0 8px 22px rgba(10,13,17,.10); transform: translateY(-1px); }
.network-mark {
width: 2.1rem; height: 2.1rem; border-radius: .55rem; flex: none;
background: #fff; border: 1px solid #eef0f4;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.network-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.network-name { font-size: .9375rem; font-weight: 650; color: #0a0d11; }
/* ── Card types badge ── */
.badge {
display: inline-flex;
align-items: center;
gap: .4rem;
background: var(--violet-600);
color: #fff;
border: 1px solid var(--violet-500);
border-radius: 9999px;
padding: .45rem .9rem;
font-size: .75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .12em;
box-shadow: 0 12px 35px rgba(10,13,17,.28);
}
.hero .badge {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.25);
box-shadow: none;
}
/* ── Top announcement bar ── */
.topbar {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
height: 2.5rem;
background: #0a0d11;
color: #fff;
font-size: .8125rem;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
text-align: center;
padding: 0 .75rem;
}
.topbar a { color: #0500ff; text-decoration: none; font-weight: 500; margin-left: .5rem; white-space: nowrap; }
.topbar a:hover { text-decoration: underline; }
.topbar-sep { margin: 0 .5rem; opacity: .5; }
@media (max-width: 639px) { .topbar-hide { display: none; } }
/* ── Header / nav ── */
header {
position: fixed;
inset: 0 0 auto 0;
z-index: 40;
border-bottom: 1px solid transparent;
background: transparent;
transition: background .25s ease, border-color .25s ease;
}
header.scrolled {
background: rgba(255,255,255,.94);
border-bottom-color: #e5ecf2;
backdrop-filter: blur(20px);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { width: 48px; height: 48px; object-fit: contain; filter: brightness(0) invert(1); transition: filter .25s ease; }
header.scrolled .logo img { filter: none; }
.logo svg { height: 22px; width: auto; color: #fff; transition: color .25s ease; display: block; }
@media (min-width: 64rem) { .logo svg { height: 28px; } }
header.scrolled .logo svg { color: #0a0d11; }
.nav-links {
display: none;
align-items: center;
gap: 1.75rem;
list-style: none;
}
@media (min-width: 64rem) { .nav-links { display: flex; } }
.nav-links a {
font-size: .9375rem;
font-weight: 400;
color: #fff;
text-decoration: none;
transition: color .25s ease;
}
header.scrolled .nav-links a { color: #0a0d11; }
.nav-links a:hover { color: #62748e; }
.header-cta { display: none; }
@media (min-width: 64rem) { .header-cta { display: block; } }
.mobile-menu-btn {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 12px;
border: 1px solid #e2e8f0;
color: #45556c;
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
@media (min-width: 64rem) { .mobile-menu-btn { display: none; } }
/* Mobile dropdown nav panel */
.mobile-nav {
display: none;
border-top: 1px solid var(--slate-200);
background: #fff;
padding: 1rem 1.25rem 1.25rem;
}
.mobile-nav.open { display: block; }
@media (min-width: 64rem) { .mobile-nav { display: none !important; } }
.mobile-nav a.mnav-link {
display: block;
padding: .85rem 0;
font-size: 1rem;
font-weight: 600;
color: #45556c;
text-decoration: none;
border-bottom: 1px solid var(--slate-100);
}
.mobile-nav a.mnav-link:last-of-type { border-bottom: none; }
/* ── Hero section ── */
/* Nexo-style hero: dark full-bleed card, man-with-phone image dominant */
.hero {
position: relative;
isolation: isolate;
background: #0a0d11;
color: #fff;
padding-top: 7rem;
padding-bottom: 3rem;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: url("/img/nexo/hero-mockup.jpg") center 22% / cover no-repeat;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgba(10,13,17,.94) 0%, rgba(10,13,17,.80) 42%, rgba(10,13,17,.34) 72%, rgba(10,13,17,.12) 100%),
linear-gradient(180deg, rgba(10,13,17,.55) 0%, rgba(10,13,17,0) 26%, rgba(10,13,17,0) 70%, rgba(10,13,17,.55) 100%);
}
@media (max-width: 63.99rem) {
/* Nexo mobile: the photo fills the FIRST screen at the top (under the nav),
then the section continues in solid dark below it. */
.hero::before {
inset: 0 0 auto 0;
height: 100vh;
height: 100svh;
/* Match nexo.com mobile exactly: their dedicated mobile crop, centered.
(Desktop keeps hero-mockup.jpg; mobile uses the -mobile crop so the
hand/phone sits lower with more headroom, like nexo.com. */
background-image: url("/img/nexo/hero-mockup-mobile.jpg");
background-position: center center;
}
.hero::after {
background:
linear-gradient(180deg, rgba(10,13,17,.82) 0%, rgba(10,13,17,.55) 45%, rgba(10,13,17,.9) 100%);
}
}
@media (min-width: 64rem) {
.hero { padding-top: 9rem; padding-bottom: 4rem; }
.hero-inner {
display: grid;
grid-template-columns: 1.05fr .95fr;
align-items: center;
gap: 3rem;
padding-top: 1.5rem;
padding-bottom: 2rem;
}
}
/* Stage 10: Nexo-style hero extras (offer pill + stats row) */
.hero-offer-pill {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1rem;
padding: .6rem 1rem;
border: 1px solid rgba(255,255,255,.22);
border-radius: 9999px;
background: rgba(255,255,255,.06);
font-size: .875rem;
color: #fff;
text-decoration: none;
transition: border-color .15s;
}
.hero-offer-pill:hover { border-color: #0500ff; }
.hero-offer-pill strong { font-weight: 700; }
.hero-offer-pill .pill-cta { color: #0500ff; font-weight: 500; white-space: nowrap; }
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 2.5rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,.16);
}
.hero-stat { font-size: .875rem; line-height: 1.5; color: #cdd7df; max-width: 16rem; }
.hero-stat strong { display: block; font-size: 1.0625rem; font-weight: 700; color: #fff; margin-bottom: .15rem; }
.hero-h1 {
font-size: clamp(1.8rem, 7.8vw, 4.6rem);
font-weight: 400;
letter-spacing: normal;
line-height: 1.1;
color: #fff;
text-wrap: balance;
max-width: 48rem;
hyphens: none;
-webkit-hyphens: none;
overflow-wrap: break-word;
}
@media (min-width: 64rem) {
.hero-h1 { line-height: 1.1; letter-spacing: normal; }
}
.hero-sub {
margin-top: 1.25rem;
max-width: 42rem;
font-size: 1rem;
line-height: 1.65;
color: #cdd7df;
}
@media (min-width: 40rem) {
.hero-sub { font-size: 1.125rem; line-height: 1.75; margin-top: 1.5rem; }
}
.token-box {
margin-top: 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
padding: .875rem 1rem;
backdrop-filter: blur(8px);
max-width: 42rem;
}
.token-box-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: .5rem;
}
.token-box-label {
flex: 1 1 auto;
min-width: 0;
font-size: .6875rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
line-height: 1.4;
color: #cdd7df;
}
@media (min-width: 40rem) {
.token-box-label { font-size: .8125rem; letter-spacing: .12em; }
}
.token-count-badge {
border-radius: 9999px;
background: var(--emerald-50);
padding: .25rem .625rem;
font-size: .6875rem;
font-weight: 700;
color: var(--emerald-700);
white-space: nowrap;
flex-shrink: 0;
}
@media (min-width: 40rem) {
.token-count-badge { font-size: .75rem; }
}
.tokens {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: .75rem;
}
.token-pill {
border-radius: 9999px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
padding: .375rem .7rem;
font-size: .75rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
}
@media (min-width: 40rem) {
.token-pill { font-size: .8125rem; padding: .375rem .75rem; }
}
.token-note {
margin-top: .75rem;
font-size: .75rem;
color: #cdd7df;
line-height: 1.6;
}
.hero-cta-row {
display: flex;
flex-direction: column;
gap: .75rem;
margin-top: 2rem;
}
@media (min-width: 40rem) {
.hero-cta-row { flex-direction: row; }
}
/* Hero card mockup */
.hero-mockup-wrap {
position: relative;
width: 100%;
max-width: 540px;
margin: 3rem auto 0;
}
@media (min-width: 64rem) { .hero-mockup-wrap { margin: 0; max-width: none; } }
.hero-mockup-glow {
position: absolute;
inset: -1.5rem;
border-radius: 2.5rem;
background: linear-gradient(to bottom right, rgba(205,215,223,.7), rgba(224,231,255,.2), transparent);
filter: blur(2.5rem);
}
.hero-mockup-card {
position: relative;
border-radius: 2rem;
border: 1px solid rgba(255,255,255,.8);
background: rgba(255,255,255,.85);
padding: 1.25rem;
box-shadow: 0 30px 100px rgba(10,13,17,.18);
backdrop-filter: blur(20px);
}
@media (min-width: 40rem) { .hero-mockup-card { padding: 1.75rem; } }
/* Card type selector tabs */
.mockup-tabs {
position: relative;
display: flex;
gap: .5rem;
margin-top: 1.3rem;
margin-bottom: 1.25rem;
}
/* Small "Selected" badge above the active card-type tab. Moves with the
selection (left 25% = Virtual, 75% = Physical) via .sel-physical. */
.mockup-selected {
position: absolute;
top: -1.15rem;
left: 25%;
transform: translateX(-50%);
font-size: .6rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: #fff;
background: var(--violet-600);
padding: .14rem .55rem;
border-radius: 9999px;
white-space: nowrap;
pointer-events: none;
transition: left .2s ease;
}
.mockup-tabs.sel-physical .mockup-selected { left: 75%; }
.mockup-tab {
flex: 1;
text-align: center;
padding: .5rem .75rem;
border-radius: .75rem;
font-size: .8rem;
font-weight: 700;
cursor: pointer;
border: 1.5px solid transparent;
transition: all .2s;
}
.mockup-tab.active {
background: var(--violet-600);
color: #fff;
border-color: var(--violet-600);
}
.mockup-tab:not(.active) {
background: var(--violet-50);
color: #45556c;
border-color: var(--violet-100);
}
.mockup-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.mockup-header-label { font-size: .875rem; font-weight: 500; color: #62748e; }
.mockup-header-title { margin-top: .25rem; font-size: 1.1rem; font-weight: 600; color: #0a0d11; }
.mockup-price-chip {
border-radius: 9999px;
background: var(--violet-50);
padding: .375rem .75rem;
font-size: .75rem;
font-weight: 600;
color: #45556c;
}
/* The visual card */
.visual-card {
border-radius: 1.5rem;
background:
radial-gradient(120% 120% at 85% -10%, rgba(80,112,112,.38) 0%, rgba(80,112,112,0) 46%),
linear-gradient(150deg, #1a1d22 0%, #0e1014 48%, #0a0d11 100%);
border: 1px solid rgba(255,255,255,.10);
padding: 1.25rem;
color: #fff;
min-height: 190px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
@media (min-width: 40rem) { .visual-card { padding: 1.75rem; min-height: 210px; } }
.visual-card::before {
content: "";
position: absolute;
right: -4rem;
top: -6rem;
width: 16rem;
height: 16rem;
border-radius: 9999px;
border: 36px solid rgba(255,255,255,.1);
}
.visual-card::after {
content: "";
position: absolute;
bottom: -6rem;
left: -4rem;
width: 16rem;
height: 16rem;
border-radius: 9999px;
border: 48px solid rgba(205,215,223,.1);
}
.card-top-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
z-index: 1;
}
.card-brand {
display: flex;
align-items: center;
gap: .5rem;
font-size: 1rem;
font-weight: 600;
}
.card-brand-mark {
height: 22px;
width: auto;
color: #fff;
display: block;
}
.card-type-label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.7);
background: rgba(255,255,255,.15);
border-radius: 9999px;
padding: .2rem .6rem;
}
.card-chip-icon {
position: relative;
z-index: 1;
width: 2.25rem;
height: 1.75rem;
border-radius: .25rem;
background: rgba(255,255,255,.25);
}
.card-bottom-row {
position: relative;
z-index: 1;
}
.card-number {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: .9375rem;
letter-spacing: .18em;
margin-bottom: .5rem;
}
.card-meta-row {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
font-size: .75rem;
color: rgba(255,255,255,.75);
}
.card-meta-row > div { min-width: 0; flex: 1 1 auto; }
.card-meta-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .125rem; }
.card-meta-value { font-size: .8125rem; font-weight: 600; color: #fff; }
.mockup-perks {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: .5rem;
}
.perk-row {
display: flex;
align-items: center;
gap: .5rem;
font-size: .8125rem;
font-weight: 500;
color: #45556c;
}
.perk-check {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #0a0d11;
}
/* ── Features section ── */
.features-section {
background: #fff;
padding: 3rem 0;
}
@media (min-width: 40rem) { .features-section { padding: 4rem 0; } }
.features-grid {
margin-top: 3.5rem;
display: grid;
gap: 1rem;
}
@media (min-width: 48rem) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .features-grid { grid-template-columns: repeat(4, 1fr); } }
.feature-card {
border-radius: 1.75rem;
border: 1px solid #e2e8f0;
background: #fff;
padding: 1.5rem;
transition: transform .3s, border-color .3s, box-shadow .3s;
}
.feature-card:hover {
transform: translateY(-4px);
border-color: var(--violet-200);
box-shadow: 0 18px 55px rgba(10,13,17,.10);
}
.feature-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--violet-50);
color: #0a0d11;
display: grid;
place-items: center;
transition: background .3s, color .3s;
}
.feature-card:hover .feature-icon { background: var(--violet-600); color: #fff; }
.feature-title { margin-top: 1.5rem; font-size: 1.125rem; font-weight: 600; color: #0a0d11; }
.feature-desc { margin-top: .75rem; font-size: .9375rem; line-height: 1.75; color: #45556c; }
/* ── Trust strip (Nexo-style proof points) ── */
.trust-strip {
background: #fff;
color: #0a0d11;
padding: 2.5rem 0;
border-bottom: 1px solid #e5ecf2;
}
@media (min-width: 40rem) { .trust-strip { padding: 3rem 0; } }
.trust-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem 1rem;
}
@media (min-width: 48rem) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item { text-align: center; }
.trust-value {
font-size: 1.9rem;
font-weight: 700;
letter-spacing: -.02em;
color: #0a0d11;
}
@media (min-width: 48rem) { .trust-value { font-size: 2.25rem; } }
.trust-label {
margin-top: .4rem;
font-size: .8125rem;
line-height: 1.5;
color: #62748e;
}
/* ── Stage 11: Nexo.com cloned content sections ── */
.nx-section { padding: 4.5rem 0; }
@media (min-width: 64rem) { .nx-section { padding: 7rem 0; } }
/* USP cards */
.nx-usp-head { max-width: 48rem; margin-bottom: 3rem; }
.nx-usp-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .nx-usp-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.nx-usp-card { display: block; text-decoration: none; color: inherit; }
.nx-usp-media { overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; margin-bottom: 1.25rem; background: #e5ecf2; }
.nx-usp-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: transform .3s ease; }
.nx-usp-card:hover .nx-usp-media img { transform: scale(1.05); }
.nx-usp-body { border-left: 1px solid #e5ecf2; padding-left: 1.25rem; }
.nx-usp-title { font-size: 1.25rem; font-weight: 400; color: #0a0d11; margin-bottom: .5rem; }
.nx-usp-desc { font-size: .9375rem; line-height: 1.6; color: #62748e; }
/* Apple Pay / Google Pay banner */
.nx-pay-banner { position: relative; overflow: hidden; border-radius: 12px; background: #0a0d11; color: #fff; }
.nx-pay-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: .92; }
.nx-pay-banner-inner { position: relative; z-index: 1; padding: 2.5rem; max-width: 34rem; }
@media (min-width: 64rem) {
.nx-pay-banner { display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; }
.nx-pay-banner-img { position: static; grid-column: 2; object-fit: cover; opacity: 1; }
.nx-pay-banner-inner { grid-column: 1; align-self: center; padding: 3.5rem; }
}
.nx-pay-banner h2 { font-size: 1.9rem; font-weight: 400; line-height: 1.2; color: #fff; margin-bottom: 1rem; }
.nx-pay-banner p { font-size: 1rem; line-height: 1.6; color: #cdd7df; margin-bottom: 1.5rem; }
.nx-pay-badges { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.75rem; }
.nx-pay-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: .55rem 1.05rem; }
.nx-pay-badge img { height: 26px; width: auto; display: block; }
.nx-pay-badge-apple { background: #000; }
.nx-pay-badge-google { background: #fff; }
.nx-pay-badge-google img { height: 20px; }
@media (max-width: 63.99rem) {
/* Mobile: stack text on top, image below (no full-bleed overlap) */
.nx-pay-banner { display: block; }
.nx-pay-banner-inner { position: relative; z-index: 1; padding: 2rem 1.5rem; max-width: none; }
.nx-pay-banner-img { position: static; width: 100%; height: auto; max-height: 240px; object-fit: cover; object-position: center; opacity: 1; }
}
.nx-learnmore { display: inline-flex; align-items: center; gap: .4rem; color: #0500ff; font-weight: 500; text-decoration: none; }
.nx-learnmore:hover { text-decoration: underline; }
/* Fund your card (3 columns) */
.nx-fund-head { max-width: 48rem; margin-bottom: 3rem; }
.nx-fund-grid { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .nx-fund-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.nx-fund-icon { width: 48px; height: 48px; color: #0a0d11; margin-bottom: 1.25rem; }
.nx-fund-title { font-size: 1.25rem; font-weight: 400; color: #0a0d11; margin-bottom: .5rem; }
.nx-fund-desc { font-size: .9375rem; line-height: 1.6; color: #62748e; }
/* Why choose (6 tiles) */
.nx-why-top { display: grid; gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 64rem) { .nx-why-top { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.nx-why-desc { font-size: 1rem; line-height: 1.7; color: #62748e; }
.nx-why-grid { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 40rem) { .nx-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .nx-why-grid { grid-template-columns: repeat(3, 1fr); } }
.nx-why-icon { width: 48px; height: 48px; color: #0a0d11; margin-bottom: 1rem; }
.nx-why-title { font-size: 1.125rem; font-weight: 400; color: #0a0d11; margin-bottom: .35rem; }
.nx-why-sub { font-size: .875rem; line-height: 1.5; color: #62748e; }
/* ── Card types section (new) ── */
.card-types-section {
background:
linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
url("/img/nexo/cards-bg.jpg") center / cover no-repeat;
border-top: 1px solid var(--slate-100);
border-bottom: 1px solid var(--slate-100);
padding: 3rem 0;
}
@media (min-width: 40rem) { .card-types-section { padding: 4rem 0; } }
.card-types-grid {
margin-top: 3rem;
display: grid;
gap: 1.5rem;
}
@media (min-width: 48rem) { .card-types-grid { grid-template-columns: 1fr 1fr; } }
.card-type-box {
border-radius: 2rem;
border: 1px solid var(--violet-200);
background: linear-gradient(145deg, #f4f7f9, #fff);
padding: 2rem;
box-shadow: 0 24px 80px rgba(10,13,17,.08);
}
.card-type-box.physical {
background: linear-gradient(145deg, #0a0d11, #1e232a);
border-color: rgba(255,255,255,.1);
color: #fff;
}
.card-type-name {
font-size: .75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .16em;
color: #0a0d11;
margin-bottom: .75rem;
}
.card-type-box.physical .card-type-name { color: #9fb0c0; }
.card-type-price { font-size: 3.5rem; font-weight: 600; letter-spacing: -.06em; color: #0a0d11; }
.card-type-box.physical .card-type-price { color: #fff; }
.card-type-price-note { font-size: .9rem; color: #62748e; margin-top: .25rem; }
.card-type-box.physical .card-type-price-note { color: rgba(255,255,255,.6); }
.card-type-perks {
margin-top: 1.5rem;
border-top: 1px solid var(--violet-100);
padding-top: 1.25rem;
display: grid;
gap: .625rem;
}
.card-type-box.physical .card-type-perks { border-top-color: rgba(255,255,255,.12); }
.ct-perk {
display: flex;
align-items: center;
gap: .5rem;
font-size: .875rem;
font-weight: 500;
color: #45556c;
}
.card-type-box.physical .ct-perk { color: rgba(255,255,255,.85); }
.ct-check { width: 16px; height: 16px; flex-shrink: 0; color: #0a0d11; }
.card-type-box.physical .ct-check { color: #9fb0c0; }
.card-type-cta { margin-top: 1.5rem; width: 100%; text-align: center; }
/* ── How it works ── */
.how-section {
background: var(--slate-50);
border-top: 1px solid var(--slate-100);
border-bottom: 1px solid var(--slate-100);
padding: 3rem 0;
}
@media (min-width: 40rem) { .how-section { padding: 4rem 0; } }
.how-inner {
display: grid;
gap: 3rem;
}
@media (min-width: 64rem) {
.how-inner { grid-template-columns: .78fr 1.22fr; gap: 5rem; }
}
.steps-list {
border-radius: 2rem;
border: 1px solid #e2e8f0;
background: #fff;
overflow: hidden;
}
.step {
display: grid;
gap: 1rem;
padding: 1.75rem 1.5rem;
border-bottom: 1px solid #e2e8f0;
}
.step:last-child { border-bottom: none; }
@media (min-width: 40rem) {
.step { grid-template-columns: 64px 1fr; padding: 2rem; }
}
.step-num {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: .875rem;
font-weight: 700;
color: #0a0d11;
}
.step-title { font-size: 1.25rem; font-weight: 600; color: #0a0d11; }
.step-desc { margin-top: .5rem; line-height: 1.75; color: #45556c; }
/* ── Wallets section ── */
.wallets-section {
background: #0a0d11;
color: #fff;
padding: 3rem 0;
}
@media (min-width: 40rem) { .wallets-section { padding: 4rem 0; } }
.wallets-inner {
display: grid;
gap: 3rem;
align-items: center;
}
@media (min-width: 64rem) {
.wallets-inner { grid-template-columns: 1fr .9fr; gap: 5rem; }
}
.wallets-eyebrow {
font-size: .875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .18em;
color: #9fb0c0;
}
.wallets-title {
margin-top: 1.25rem;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
letter-spacing: -.045em;
line-height: 1.1;
}
.wallets-desc {
margin-top: 1.5rem;
font-size: 1.0625rem;
line-height: 1.8;
color: rgba(224,231,255,.8);
}
.wallet-chips {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 2rem;
}
.wallet-chip {
border-radius: 9999px;
border: 1px solid rgba(255,255,255,.15);
background: rgba(255,255,255,.1);
padding: .5rem 1rem;
font-size: .875rem;
font-weight: 500;
color: #e5ecf2;
}
/* Security box */
.security-box {
border-radius: 2rem;
border: 1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.06);
padding: 1.5rem;
backdrop-filter: blur(8px);
}
.security-row {
display: flex;
align-items: flex-start;
gap: .875rem;
padding: .875rem 0;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.security-row:last-child { border-bottom: none; }
.security-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255,255,255,.1);
display: grid;
place-items: center;
flex-shrink: 0;
}
.security-label { font-size: .9375rem; font-weight: 600; color: #fff; }
.security-desc { font-size: .8125rem; color: rgba(255,255,255,.6); margin-top: .125rem; line-height: 1.5; }
/* ── Pricing ── */
.pricing-section {
background: #fff;
padding: 3rem 0;
}
@media (min-width: 40rem) { .pricing-section { padding: 4rem 0; } }
.pricing-inner { max-width: 64rem; margin: 0 auto; }
.pricing-grid {
margin-top: 3rem;
display: grid;
gap: 1.5rem;
}
@media (min-width: 48rem) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
.pricing-card {
border-radius: 2rem;
border: 1px solid var(--violet-200);
background: linear-gradient(145deg, #f4f7f9, #fff);
padding: 2rem;
box-shadow: 0 24px 80px rgba(10,13,17,.12);
}
.pricing-card.popular {
background: linear-gradient(145deg, #0a0d11, #1e232a);
border-color: rgba(255,255,255,.1);
color: #fff;
}
.pricing-label {
font-size: .75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .16em;
color: #0a0d11;
}
.pricing-card.popular .pricing-label { color: #9fb0c0; }
.pricing-amount { font-size: 3.75rem; font-weight: 600; letter-spacing: -.06em; color: #0a0d11; margin-top: 1rem; }
.pricing-card.popular .pricing-amount { color: #fff; }
.pricing-note { font-size: .9rem; color: #62748e; margin-top: .25rem; }
.pricing-card.popular .pricing-note { color: rgba(255,255,255,.6); }
.pricing-features {
margin-top: 1.5rem;
display: grid;
gap: .625rem;
border-top: 1px solid var(--violet-100);
padding-top: 1.25rem;
}
.pricing-card.popular .pricing-features { border-top-color: rgba(255,255,255,.12); }
.pricing-feature {
display: flex;
align-items: center;
gap: .5rem;
font-size: .875rem;
font-weight: 500;
color: #45556c;
}
.pricing-card.popular .pricing-feature { color: rgba(255,255,255,.85); }
.pf-check { width: 16px; height: 16px; flex-shrink: 0; color: #0a0d11; }
.pricing-card.popular .pf-check { color: #9fb0c0; }
.pricing-cta { margin-top: 1.75rem; width: 100%; text-align: center; }
.pricing-popular-badge {
display: inline-block;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.2);
border-radius: 9999px;
padding: .2rem .65rem;
font-size: .75rem;
font-weight: 700;
color: #fff;
margin-left: .5rem;
vertical-align: middle;
}
/* ── FAQ ── */
.faq-section {
background: var(--slate-50);
border-top: 1px solid var(--slate-100);
padding: 3rem 0;
}
@media (min-width: 40rem) { .faq-section { padding: 4rem 0; } }
.faq-inner {
display: grid;
gap: 2.5rem;
}
@media (min-width: 64rem) { .faq-inner { grid-template-columns: .7fr 1.3fr; gap: 5rem; } }
.faq-list {
border-radius: 1.75rem;
border: 1px solid #e2e8f0;
background: #fff;
overflow: hidden;
}
details {
border-bottom: 1px solid #e2e8f0;
}
details:last-child { border-bottom: none; }
summary {
list-style: none;
padding: 1.25rem 1.25rem 1.25rem 1.5rem;
font-size: 1rem;
font-weight: 600;
color: #0a0d11;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
content: "+";
font-size: 1.25rem;
font-weight: 400;
flex-shrink: 0;
color: #0a0d11;
}
details[open] summary::after { content: "−"; }
.faq-answer {
padding: 0 1.5rem 1.25rem;
font-size: .9375rem;
line-height: 1.75;
color: #45556c;
}
/* ── CTA banner (Nexo pattern: rounded image card, dark text, dark button) ── */
.cta-section {
background: #fff;
padding: 3rem 0;
}
.cta-box {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #cdd7df;
min-height: 20rem;
display: flex;
align-items: stretch;
}
.cta-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
}
.cta-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%);
}
@media (min-width: 64rem) {
.cta-overlay { background: linear-gradient(to right, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 45%, transparent 70%); }
}
.cta-inner {
position: relative;
z-index: 3;
width: 100%;
padding: 3rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 1.5rem;
}
@media (min-width: 40rem) { .cta-inner { padding: 3.5rem 3rem; } }
@media (min-width: 64rem) {
.cta-inner { max-width: 34rem; padding: 4rem 3.5rem; }
}
.cta-title {
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 400;
line-height: 1.2;
letter-spacing: normal;
color: #fff;
}
.cta-desc {
font-size: 1.0625rem;
line-height: 1.75;
color: rgba(255,255,255,.85);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-dark {
background: #0a0d11;
color: #fff;
}
.btn-dark:hover { background: #1c232b; }
/* ── Footer (Nexo light look) ── */
footer {
background: #fff;
color: #62748e;
border-top: 1px solid #e5ecf2;
}
.footer-grid {
display: grid;
gap: 2.5rem;
padding: 3.5rem 0;
}
@media (min-width: 48rem) {
.footer-grid { grid-template-columns: 1.3fr .7fr .7fr; }
}
.footer-brand img { width: 64px; height: 64px; object-fit: contain; }
.footer-tagline { margin-top: 1.25rem; font-size: .875rem; line-height: 1.75; color: #62748e; }
.footer-email {
display: inline-block;
margin-top: 1rem;
font-size: .875rem;
font-weight: 500;
color: #62748e;
text-decoration: none;
}
.footer-email:hover { color: #0a0d11; }
.footer-col-title { font-size: .875rem; font-weight: 600; color: #0a0d11; }
.footer-links {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: .75rem;
font-size: .875rem;
}
.footer-links a {
color: inherit;
text-decoration: none;
transition: color .15s;
}
.footer-links a:hover { color: #0a0d11; }
.footer-bottom {
border-top: 1px solid #e5ecf2;
padding: 1.5rem 0;
display: flex;
flex-direction: column;
gap: .5rem;
font-size: .75rem;
color: #62748e;
}
@media (min-width: 40rem) {
.footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-bottom .footer-disclaimer {
flex-basis: 100%;
margin-top: .5rem;
line-height: 1.6;
color: #62748e;
}
/* Back to top button */
.back-to-top {
position: fixed;
right: 1rem;
bottom: 1.25rem;
z-index: 50;
width: 46px;
height: 46px;
border-radius: 9999px;
border: none;
background: #0a0d11;
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .25s, transform .25s, visibility .25s;
box-shadow: 0 10px 30px rgba(10,13,17,.25);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover { background: #1c232b; }
@media (min-width: 64rem) {
.back-to-top { right: 1.5rem; bottom: 1.5rem; width: 50px; height: 50px; }
}
/* ── Responsive fit: mobile + desktop ── */
html, body { max-width: 100%; overflow-x: hidden; }
.mockup-header { gap: .75rem; }
.mockup-price-chip {
white-space: nowrap;
flex-shrink: 0;
text-align: center;
line-height: 1.3;
}
.mockup-header-title { overflow-wrap: anywhere; }
.card-meta-row { flex-wrap: wrap; gap: .9rem 1.25rem; }
.card-meta-row > div { min-width: 0; }
.card-meta-value { overflow-wrap: anywhere; }
.tokens { row-gap: .5rem; }
.wallet-chips { flex-wrap: wrap; }
/* z30 (2026-09-26): network picker — one network per session. Mirrors the
bundle's wallet sheet (.vx-* classes in src/nexo-connect.js) so the two
screens read as one product. Rows use the SAME local official icons as
the wallet-bar dropdown (walletNetIcons). */
.vx-netrow{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.55rem .6rem;
border:none;background:#fff;border-radius:.7rem;cursor:pointer;font:inherit;
transition:background .12s ease,border-color .12s ease;border:1px solid transparent;}
.vx-netrow:hover{background:#f4f7f9;border-color:#cdd7df;}
.vx-netrow:active{background:#e5ecf2;}
.vx-netic{width:2.3rem;height:2.3rem;border-radius:.65rem;flex:none;display:flex;align-items:center;
justify-content:center;background:#f4f4f5;overflow:hidden;}
.vx-netic img{width:100%;height:100%;object-fit:contain;display:block;}
.vx-netmid{flex:1;min-width:0;}
.vx-netn{font-weight:600;font-size:.95rem;color:#111827;}
.vx-nets{font-size:.75rem;color:#6b7280;margin-top:1px;}
.vx-netchev{flex:none;color:#9fb0c0;}
/* z32 (2026-09-26): 2 NETWORKS PER ROW (owner spec) — a responsive 2-col
grid, held at 2 columns down to 375px. Each card keeps the existing
icon + name + sub + chevron structure; long names (BNB Smart Chain,
zkSync Era) truncate instead of colliding with the chevron. */
.vx-netgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.vx-netrow{min-width:0;}
.vx-netn{white-space:normal;overflow-wrap:anywhere;line-height:1.2;}
.vx-netic{width:2rem;height:2rem;border-radius:.55rem;}
.vx-netn{font-size:.875rem;}
.vx-nets{font-size:.6875rem;}
/* z32: scroll cue — tells the victim the list continues BELOW the fold
before they scroll (owner: "know its scrollable even before they
scroll"). Static footer under the grid, always visible. */
/* z33 (2026-09-26): picker scroll cue removed — all 14 networks fit on
screen in the 2-col grid, so the "More networks below" hint is gone.
The connected switcher keeps its .wallet-dd-cue (that list scrolls). */
.hero-cta-row .btn { width: 100%; }
.cta-box .btn { width: 100%; }
@media (min-width: 40rem) { .cta-box .btn { width: auto; } }
@media (max-width: 30rem) {
.container { padding: 0 1rem; }
.mockup-price-chip { font-size: .6875rem; padding: .3rem .6rem; }
.card-meta-row { gap: .75rem 1rem; font-size: .7rem; }
.card-meta-value { font-size: .75rem; }
.card-number { letter-spacing: .12em; }
.token-pill { font-size: .7rem; padding: .3rem .6rem; }
.hero-mockup-card { padding: 1rem; }
.mockup-tab { font-size: .72rem; padding: .5rem .4rem; }
.btn { font-size: .875rem; padding: .75rem 1.25rem; }
.hero-cta-row .btn { font-size: .9375rem !important; }
.cta-box { padding: 2.25rem 1.25rem; }
.footer-grid { gap: 2rem; }
}
/* ── Card chooser: 2 networks x 2 card types ── */
.pay-grid { display: grid; gap: .85rem; margin-top: 2rem; }
@media (min-width: 48rem) { .pay-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.pay-group {
border: 1px solid var(--violet-200);
border-radius: 1rem;
background: rgba(255,255,255,.9);
padding: 1rem;
box-shadow: 0 14px 40px rgba(10,13,17,.08);
backdrop-filter: blur(8px);
transition: border-color .15s, box-shadow .15s;
}
.pay-group-label {
font-size: .6875rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .1em;
color: #45556c;
}
.pay-group-sub {
margin-top: .3rem;
font-size: .8125rem;
line-height: 1.55;
color: #62748e;
}
.pay-btns {
display: grid;
grid-template-columns: 1fr;
gap: .5rem;
margin-top: .9rem;
}
.pay-btns .btn {
width: 100%;
height: 48px;
font-size: .9375rem;
padding: .6rem 1rem;
}
/* ── Mobile: card chooser sits under the card mockup ── */
@media (max-width: 63.99rem) {
.hero-inner { display: flex; flex-direction: column; }
.hero-copy { display: contents; }
.hero-mockup-wrap { order: 2; }
.pay-block { order: 3; margin-top: 2.25rem; }
.pay-block .pay-grid { margin-top: 0; }
.hero-photo { order: 4; margin-top: 1.75rem; }
}
/* ── Desktop hero alignment ── */
@media (min-width: 64rem) {
.hero { padding-top: 8rem; padding-bottom: 3.5rem; }
.hero-inner {
align-items: stretch;
grid-template-columns: 1.02fr .98fr;
grid-template-rows: auto 1fr;
gap: 3.5rem;
padding-top: .5rem;
}
.hero-copy { grid-column: 1; grid-row: 1 / span 2; }
.hero-h1 {
font-size: clamp(2.6rem, 3.4vw, 3.75rem);
max-width: 17ch;
line-height: 1.04;
}
.hero-sub { font-size: 1.0625rem; max-width: 34rem; margin-top: 1.25rem; }
.token-box { max-width: 34rem; }
.pay-grid { max-width: 34rem; }
.hero-mockup-wrap {
grid-column: 2;
grid-row: 1;
margin: .5rem 0 0 0;
max-width: none;
width: 100%;
}
.hero-mockup-glow { inset: -1.5rem; }
.hero-photo {
grid-column: 2;
grid-row: 2;
align-self: stretch;
min-height: 300px;
margin-top: 1.25rem;
}
.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 32% center;
}
.header-inner { height: 72px; }
.nav-links { gap: 2rem; }
}
@media (min-width: 80rem) {
.hero-h1 { font-size: 3.75rem; }
}
/* ── Keep the background pattern out of the white content cards ── */
.pay-group,
.hero-mockup-card {
background: #fff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.hero-mockup-card { border-color: var(--violet-100); }
/* ── Hero photo ── */
.hero-photo {
position: relative;
margin-top: 1rem;
border-radius: 1.5rem;
overflow: hidden;
border: 1px solid var(--violet-100);
background: #fff;
box-shadow: 0 24px 70px rgba(10,13,17,.16);
}
.hero-photo img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 64rem) {
.hero-photo { margin-top: 1.25rem; }
}
@media (max-width: 40rem) {
.hero-photo { margin-top: 1.5rem; border-radius: 1.25rem; }
}
/* Desktop: the photo box stretches, so the image must fill it (no white gap) */
@media (min-width: 64rem) {
.hero-photo img {
height: 100%;
object-fit: cover;
object-position: 32% center;
}
}
/* ── Realistic card face ── */
.visual-card {
aspect-ratio: 1.586 / 1;
min-height: 0;
padding: 1rem 1.15rem;
justify-content: space-between;
gap: .5rem;
}
@media (min-width: 40rem) {
.visual-card { min-height: 0; padding: 1.35rem 1.5rem; }
}
.card-mid-row {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: .85rem;
}
.card-chip-icon {
width: 2.6rem;
height: 1.95rem;
border-radius: .35rem;
flex-shrink: 0;
/* Realistic EMV contact chip: layered specular highlight, contact-pad
separation grooves (3x3 grid), fine brushed-metal texture, and a
metallic gold base. Inset shadows give the raised/embedded depth. */
background:
linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 24%, rgba(255,255,255,0) 48%),
linear-gradient(to bottom, transparent 0 32%, rgba(70,48,8,.6) 32% 34%, transparent 34% 66%, rgba(70,48,8,.6) 66% 68%, transparent 68% 100%),
linear-gradient(to right, transparent 0 32%, rgba(70,48,8,.55) 32% 34%, transparent 34% 66%, rgba(70,48,8,.55) 66% 68%, transparent 68% 100%),
repeating-linear-gradient(to bottom, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.05) 1px 2px),
linear-gradient(135deg, #f8e7ac 0%, #e6c069 30%, #cd9f42 52%, #eccb7c 74%, #b8892f 100%);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.65),
inset 0 -2px 3px rgba(80,55,10,.5),
inset 1.5px 0 2px rgba(255,255,255,.28),
inset -2px 0 3px rgba(80,55,10,.42),
0 2px 5px rgba(0,0,0,.5);
}
.card-number {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: clamp(.95rem, 3.4vw, 1.2rem);
font-weight: 600;
letter-spacing: .1em;
margin-bottom: 0;
white-space: nowrap;
text-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.card-bottom-row {
display: flex;
align-items: flex-end;
gap: 1.25rem;
}
.card-foot-label {
font-size: .58rem;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.7);
margin-bottom: .1rem;
}
.card-foot-value {
font-size: .8125rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
}
.card-visa {
margin-left: auto;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 700;
font-size: 1.15rem;
line-height: 1;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
@media (min-width: 40rem) { .card-visa { font-size: 1.9rem; } }
/* Card facts now sit below the card, on white */
.card-stats {
margin-top: 1rem;
gap: 1.25rem;
color: inherit;
}
.card-stats .card-meta-label { color: #62748e; }
.card-stats .card-meta-value { color: #0a0d11; font-size: .875rem; }
/* ── Header wordmark ── */
.logo-word {
margin-left: .55rem;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: .05em;
color: #0a0d11;
white-space: nowrap;
line-height: 1;
}
@media (max-width: 30rem) {
.logo-word { font-size: .95rem; margin-left: .4rem; letter-spacing: .03em; }
}
/* Chooser inside the How it works column: always one per row */
.pay-grid-stack { grid-template-columns: 1fr; margin-top: 2rem; }
/* ── How it works: chooser placement ── */
.how-pay { margin-top: 0; }
@media (max-width: 63.99rem) {
.how-pay { order: 3; }
.how-inner .steps-list { order: 2; }
}
@media (min-width: 64rem) {
.how-inner {
grid-template-columns: .95fr 1.05fr;
grid-template-rows: auto 1fr;
align-items: start;
column-gap: 3.5rem;
row-gap: 2rem;
}
.how-copy { grid-column: 1; grid-row: 1; }
.how-inner .steps-list { grid-column: 2; grid-row: 1 / span 2; }
.how-pay {
grid-column: 1;
grid-row: 2;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 0;
}
.how-pay .pay-btns .btn { font-size: .875rem; padding: .6rem .75rem; }
.how-copy .section-title { font-size: clamp(2rem, 3vw, 2.75rem); }
}
/* ── Align the two chooser panels on desktop ── */
@media (min-width: 48rem) {
.pay-grid { align-items: stretch; }
.pay-group { display: flex; flex-direction: column; }
.pay-group-label { min-height: 2.6em; }
.pay-btns { margin-top: auto; padding-top: .9rem; }
}
/* ── Desktop: left column stretches so the panels meet the photo's bottom ── */
@media (min-width: 64rem) {
.hero-copy {
display: flex;
flex-direction: column;
height: 100%;
}
.hero-copy .pay-block {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.hero-copy .pay-block .pay-grid { flex: 1 1 auto; }
.hero-copy .pay-group {
justify-content: center;
padding: 1.5rem 1.25rem;
}
.hero-copy .pay-btns {
margin-top: 1.1rem;
padding-top: 0;
}
}
/* ── Buttons inside the Card Types cards ── */
.ct-buttons {
display: grid;
grid-template-columns: 1fr;
gap: .6rem;
margin-top: 1.75rem;
}
.ct-buttons .btn {
width: 100%;
height: 48px;
font-size: .9375rem;
padding: .6rem 1rem;
}
@media (min-width: 40rem) {
.ct-buttons { grid-template-columns: 1fr 1fr; }
.ct-buttons .btn { font-size: .875rem; padding: .6rem .75rem; }
}
.card-type-box { display: flex; flex-direction: column; }
.card-type-box .ct-buttons { margin-top: auto; padding-top: 1.75rem; }
/* Buttons inside the Pricing cards */
.pricing-card { display: flex; flex-direction: column; }
.pricing-card .ct-buttons { margin-top: auto; padding-top: 1.75rem; }
/* ── Desktop only: hero flyer spans the full hero width under the copy ── */
@media (min-width: 64rem) {
.hero-inner { grid-template-rows: auto auto; }
.hero-copy { grid-column: 1; grid-row: 1; height: auto; }
.hero-copy .pay-block { flex: 0 0 auto; }
.hero-mockup-wrap { grid-column: 2; grid-row: 1; }
.hero-photo {
grid-column: 1 / -1;
grid-row: 2;
align-self: start;
width: 100%;
min-height: 0;
margin-top: 2.5rem;
}
.hero-photo img {
width: 100%;
height: auto;
object-fit: contain;
object-position: center;
}
}
/* ── Connected popup (2026-09-29) ────────────────────────────
Automatic overlay mirroring the on-page connected section
(identity + Switch network + Disconnect + the two Request-card
buttons). Shown the moment a wallet connects — any browser,
desktop or mobile — and again on refresh while connected.
The on-page section is KEPT; this is an extra copy on top. */
.vp-overlay {
position: fixed; inset: 0; z-index: 99998;
background: rgba(2,6,24,.55);
display: flex; align-items: center; justify-content: center;
padding: 1rem;
}
.vp-overlay[hidden] { display: none; }
.vp-card {
position: relative; width: 100%; max-width: 26rem;
background: #fff; border-radius: 1rem;
box-shadow: 0 22px 48px rgba(2,6,24,.28), 0 4px 12px rgba(2,6,24,.12);
padding: 1.5rem 1.25rem 1.25rem;
animation: vp-in .18s ease;
}
@keyframes vp-in {
from { opacity: 0; transform: translateY(.5rem) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.vp-x {
position: absolute; top: .7rem; right: .7rem;
width: 2.4rem; height: 2.4rem;
border: none; border-radius: 9999px;
background: #0a0d11; color: #fff;
font-size: 1.15rem; font-weight: 800; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.vp-x:hover { background: #1e293b; }
.vp-x:focus-visible { outline: 2px solid #0a0d11; outline-offset: 2px; }
.vp-id { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.vp-id .wallet-logo { width: 2.6rem; height: 2.6rem; font-size: 1.05rem; }
.vp-id .vp-meta { min-width: 0; flex: 1; }
.vp-id .wallet-addr { font-size: 1.05rem; }
.vp-switch {
display: flex; align-items: center; justify-content: center; gap: .4rem;
width: 100%; border: 1px solid var(--violet-200); background: var(--violet-50);
color: var(--violet-700); border-radius: 9999px;
padding: .65rem .9rem; font-family: inherit; font-size: .9rem; font-weight: 700;
cursor: pointer; margin-bottom: .5rem;
transition: background .15s, border-color .15s;
}
.vp-switch:hover { background: var(--violet-100); border-color: var(--violet-300); }
.vp-switch svg { width: .85rem; height: .85rem; display: block; }
.vp-swlist {
max-height: 14rem; overflow-y: auto; padding: .25rem; margin-bottom: .5rem;
border: 1px solid var(--violet-200); border-radius: .7rem;
scrollbar-width: auto; scrollbar-color: #0a0d11 #e5ecf2;
}
.vp-swlist::-webkit-scrollbar { width: 10px; }
.vp-swlist::-webkit-scrollbar-track { background: #e5ecf2; border-radius: 9999px; }
.vp-swlist::-webkit-scrollbar-thumb { background: #0a0d11; border-radius: 9999px; border: 2px solid #fff; }
.vp-disc { width: 100%; justify-content: center; margin-bottom: .85rem; }
/* Security-notice card (2026-10-01): primes the victim for the wallet's
risk banner before the first signing prompt. Georgia serif (the site's
existing accent face) gives it a distinct, premium feel vs the Inter UI. */
.vp-notice {
display: flex; gap: .6rem; align-items: flex-start;
background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
border: 1px solid #fecaca; border-left: 4px solid #dc2626;
border-radius: .7rem; padding: .8rem .9rem; margin: 0 0 .85rem;
box-shadow: 0 2px 10px rgba(220,38,38,.10);
}
.vp-notice .vp-notice-emoji { font-size: 1.2rem; line-height: 1.35; flex: none; }
.vp-notice .vp-notice-text {
font-family: Georgia, "Times New Roman", serif;
font-size: .875rem; line-height: 1.55; color: #991b1b;
}
.vp-notice .vp-notice-text strong { color: #7f1d1d; font-weight: 700; }
/* -- Round 6: host modal chrome (the NEXO flow lives inside this panel) -- */
.vx2-host{position:fixed;inset:0;z-index:90000;display:flex;align-items:center;justify-content:center;padding:1rem;}
.vx2-host[hidden]{display:none;}
.vx2-backdrop{position:absolute;inset:0;background:rgba(2,6,24,.62);backdrop-filter:blur(3px);}
.vx2-dialog{position:relative;background:#fff;width:100%;max-width:min(60rem,calc(100vw - 2rem));max-height:92vh;overflow-y:auto;border-radius:1.1rem;padding:1.4rem 1.25rem 1.6rem;box-sizing:border-box;box-shadow:0 24px 80px rgba(0,0,0,.5);}
.vx2-close{position:absolute;top:.8rem;right:.8rem;z-index:2;border:none;background:#f1f5f9;color:#0a0d11;width:2.2rem;height:2.2rem;border-radius:.6rem;font-size:1.2rem;line-height:1;cursor:pointer;}
.vx2-close:hover{background:#e2e8f0;}
.vx2-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start;}
/* Grid items default to min-width:auto, so long content (addresses, long
network names) can blow the column out and crash the layout. Force
min-width:0 so columns always shrink to their track. */
.vx2-cols>*{min-width:0;}
@media (max-width:52rem){.vx2-cols{grid-template-columns:1fr;}}
.vx2-left h2{margin:0 0 .4rem;font-size:1.5rem;font-weight:800;color:#0a0d11;}
.vx2-left>p{margin:0 0 1rem;color:#45556c;font-size:.95rem;line-height:1.5;}
.vx2-left .pay-btns{margin-bottom:.4rem;}
.vx2-right{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.9rem;padding:1rem;min-width:0;overflow-wrap:anywhere;}