:root {
    --ink: #0b1638;
    --muted: #56617b;
    --line: #dfe6f4;
    --soft: #f5f8ff;
    --blue: #086dff;
    --violet: #8c27ff;
    --cyan: #00bfea;
    --green: #16b879;
    --orange: #ff8a1f;
    --pink: #ef4bc1;
    --shadow: 0 18px 55px rgba(44, 79, 155, .12);
    --radius: 24px;
    --shell: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.section-pad { padding: 90px 0; }
.soft-section { background: linear-gradient(180deg, #f8faff 0%, #f3f7ff 100%); }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 9999; padding: 12px 16px; border-radius: 10px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 16px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid rgba(213,224,243,.85);
    backdrop-filter: blur(18px);
}
.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 850; letter-spacing: -.04em; white-space: nowrap; }
.brand > span > span { color: #087cff; }
.brand-mark { width: 38px; height: 38px; }
.desktop-nav { display: flex; align-items: center; gap: 26px; color: #36415e; font-size: 14px; font-weight: 700; }
.desktop-nav a:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.login-link { font-size: 14px; font-weight: 800; }
.menu-button { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 13px; padding: 11px; cursor: pointer; }
.menu-button span { display: block; height: 2px; margin: 5px 0; background: var(--ink); border-radius: 10px; }

.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 12px; font-weight: 850; border: 1px solid transparent; transition: .2s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(110deg, #0578ff 0%, #3538ff 48%, #9829ff 100%); box-shadow: 0 10px 28px rgba(77,55,255,.22); }
.button-secondary { background: #fff; border-color: #8ca2d9; color: #1b2c61; }
.button-light { background: #fff; color: #2448d9; box-shadow: 0 12px 35px rgba(1, 13, 76, .2); }
.button-large { min-height: 58px; padding-inline: 30px; font-size: 17px; }
.play-icon { width: 25px; height: 25px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; padding-left: 2px; }

.hero { position: relative; overflow: hidden; padding-top: 110px; padding-bottom: 38px; background: radial-gradient(circle at 79% 24%, #ecf0ff 0, #fff 38%), linear-gradient(180deg,#fff 0,#fbfcff 100%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; opacity: .55; }
.hero-orb-one { width: 520px; height: 520px; right: -180px; top: 50px; background: radial-gradient(circle, rgba(126,55,255,.22), transparent 68%); }
.hero-orb-two { width: 420px; height: 420px; left: -260px; bottom: -200px; background: radial-gradient(circle, rgba(0,161,255,.16), transparent 65%); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; position: relative; z-index: 2; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; border: 1px solid #cfdcff; color: #285cec; background: #f4f7ff; border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 900; letter-spacing: .03em; }
.hero h1 { margin: 20px 0 18px; font-size: clamp(48px,5vw,72px); line-height: .99; letter-spacing: -.055em; }
.hero h1 span { background: linear-gradient(95deg,#0977ff,#7f2fff); -webkit-background-clip: text; color: transparent; }
.hero-text { max-width: 660px; margin: 0; color: var(--muted); font-size: 18px; }
.hero-buttons { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-note { margin-top: 17px; color: #64708c; font-size: 13px; font-weight: 650; }
.hero-visual { min-height: 450px; display: grid; place-items: center; position: relative; }
.halo { position: absolute; inset: 50%; border: 2px solid rgba(58,96,255,.15); border-radius: 50%; transform: translate(-50%,-50%) rotate(-12deg); }
.halo-one { width: 460px; height: 245px; box-shadow: 0 0 55px rgba(48,82,255,.16); }
.halo-two { width: 390px; height: 390px; border-color: rgba(135,49,255,.12); box-shadow: 0 0 80px rgba(130,47,255,.14); }
.virtual-card { position: relative; z-index: 2; width: min(470px, 92%); aspect-ratio: 1.59; border-radius: 26px; padding: 31px; color: #fff; background: radial-gradient(circle at 30% 10%,rgba(33,83,230,.7),transparent 37%), linear-gradient(145deg,#07122f,#0d1b4d 60%,#271b73); box-shadow: 0 35px 65px rgba(31,40,121,.33), inset 0 0 0 1px rgba(255,255,255,.2); transform: perspective(1000px) rotateY(-9deg) rotateZ(2.5deg); overflow: hidden; }
.virtual-card:before { content:""; position:absolute; inset:auto -80px -110px auto; width:330px; height:220px; border:2px solid rgba(47,130,255,.7); border-radius:50%; box-shadow: 0 0 25px #6b35ff; }
.card-top, .card-bottom { display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:2; }
.card-brand { font-weight:950; font-size:29px; letter-spacing:-.06em; }
.card-brand span { font-size:20px; letter-spacing:-.03em; margin-left:5px; }
.contactless { font-size:25px; transform: rotate(90deg); letter-spacing:-7px; }
.chip { width:57px; height:43px; margin-top:28px; border-radius:10px; background:linear-gradient(135deg,#ffe59a,#c79635); box-shadow:inset 0 0 0 2px rgba(112,64,7,.2); }
.card-number { margin-top:32px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:21px; letter-spacing:.12em; position:relative; z-index:2; }
.card-bottom { margin-top:42px; align-items:flex-end; }
.card-bottom small { display:block; color:#91a0c9; font-size:10px; letter-spacing:.14em; }
.card-bottom strong { display:block; font-size:17px; letter-spacing:.08em; margin-top:5px; }
.network-word { font-weight:950; font-style:italic; font-size:25px; }
.floating-badge { position:absolute; z-index:5; padding:12px 16px; border-radius:14px; border:1px solid rgba(194,207,239,.8); background:rgba(255,255,255,.92); box-shadow:0 15px 38px rgba(42,65,124,.14); font-size:13px; font-weight:850; }
.badge-wallet { top:24px; right:11%; }
.badge-security { bottom:72px; left:0; }
.badge-digital { bottom:20px; right:0; }
.metrics-wrap { position: relative; z-index: 3; margin-top: 54px; }
.metrics { display:grid; grid-template-columns:repeat(6,1fr); background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; }
.metric { min-height:95px; padding:18px 14px; display:flex; align-items:center; justify-content:center; gap:12px; border-right:1px solid var(--line); }
.metric:last-child { border-right:0; }
.metric-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:12px; background:#eff4ff; color:#3861f4; font-weight:950; font-size:18px; }
.metric strong, .metric small { display:block; }
.metric strong { font-size:13px; }
.metric small { color:#8a94aa; font-size:10px; margin-top:3px; }
.fine-print { margin:10px 4px 0; text-align:right; color:#8590a8; font-size:11px; }

.platform-strip { border-top:1px solid #eef2fa; border-bottom:1px solid #e5ebf7; background:#fbfdff; }
.platform-row { min-height:82px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.platform-row span { padding:10px 16px; background:#fff; border:1px solid var(--line); border-radius:999px; color:#4f5b75; font-size:13px; font-weight:750; }

.section-heading { max-width:760px; margin:0 auto 44px; text-align:center; }
.section-heading.compact { margin-bottom:34px; }
.section-heading h2 { margin:13px 0 10px; font-size:clamp(32px,4vw,48px); line-height:1.08; letter-spacing:-.045em; }
.section-heading p { margin:0; color:var(--muted); font-size:16px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card, .use-grid article, .bin-card, .step-card, .lower-card { border:1px solid var(--line); background:#fff; border-radius:20px; box-shadow:0 10px 30px rgba(46,74,135,.07); }
.feature-card { padding:26px; transition:.2s ease; }
.feature-card:hover, .bin-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.feature-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:15px; font-size:24px; font-weight:900; }
.feature-icon.blue { background:#ecf3ff; color:#1b66ff; }.feature-icon.violet { background:#f0ebff; color:#6f35ff; }.feature-icon.orange { background:#fff1e4; color:#ff7d0b; }.feature-icon.purple { background:#f3eaff; color:#8f3dff; }.feature-icon.pink { background:#ffeaf7; color:#ed3eb0; }.feature-icon.cyan { background:#e9faff; color:#00a7d9; }
.feature-card h3 { margin:18px 0 8px; font-size:19px; }.feature-card p { margin:0; color:var(--muted); font-size:14px; }
.use-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.use-grid article { padding:23px; text-align:center; }
.use-grid article > span { font-size:28px; }
.use-grid h3 { margin:12px 0 7px; font-size:16px; }.use-grid p { margin:0; color:var(--muted); font-size:13px; }
.bin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bin-card { padding:25px; position:relative; overflow:hidden; }
.bin-card:before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--blue),var(--violet)); }
.bin-network { min-height:34px; display:flex; align-items:center; }
.visa-text { font-size:25px; font-weight:950; font-style:italic; color:#1339be; }
.mastercard-mark i { width:30px; height:30px; border-radius:50%; display:block; margin-right:-8px; background:#f23d2b; opacity:.95; }.mastercard-mark i:last-child { background:#f2a62b; }
.bin-card h3 { margin:12px 0 4px; font-size:20px; }.bin-card p { margin:0; color:var(--muted); font-size:13px; min-height:42px; }
.bin-number { margin:18px 0; padding:12px; background:#f5f7fc; border-radius:10px; font-family:ui-monospace,monospace; font-size:13px; }
.tag-row { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:15px; }.tag-row span { padding:6px 9px; border-radius:999px; background:#eef3ff; color:#3456c8; font-size:10px; font-weight:800; }
.bin-card > strong { font-size:13px; }.bin-card > a { margin-top:20px; min-height:44px; display:flex; justify-content:space-between; align-items:center; padding:0 14px; border:1px solid #cfd9ef; border-radius:11px; color:#2a4ed5; font-weight:850; }
.process-section { background:linear-gradient(180deg,#fff,#f8faff); }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step-card { min-height:290px; padding:33px 25px 26px; text-align:center; position:relative; }
.step-number { position:absolute; top:16px; left:16px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#0a80ff,#8c2dff); color:#fff; font-weight:950; }
.step-icon { width:74px; height:74px; margin:15px auto 22px; display:grid; place-items:center; border-radius:23px; background:#f1f4ff; color:#394ff1; font-size:33px; }
.step-card h3 { margin:0 0 8px; font-size:18px; }.step-card p { margin:0; color:var(--muted); font-size:14px; }
.center-action { margin-top:32px; text-align:center; }
.lower-grid { display:grid; grid-template-columns:.82fr 1fr 1.18fr; gap:18px; align-items:stretch; }
.lower-card { padding:24px; }
.lower-card-head { text-align:center; margin-bottom:18px; font-weight:900; font-size:17px; }
.crypto-option { display:flex; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:14px; margin-top:10px; }
.crypto-option strong, .crypto-option small { display:block; }.crypto-option small { color:var(--muted); font-size:11px; }
.coin { width:45px; height:45px; display:grid; place-items:center; color:#fff; border-radius:50%; font-weight:900; font-size:19px; }.coin.bep { background:#27af7a; }.coin.trc { background:#ed2d32; }
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.price-grid > div { padding:16px; border:1px solid var(--line); border-radius:15px; text-align:center; background:#fbfcff; }
.price-grid strong { display:block; font-size:42px; color:#2348d7; line-height:1; }.price-grid small { color:var(--muted); }
.pricing-card ul { padding-left:20px; color:var(--muted); font-size:13px; }.pricing-card .button { width:100%; }
.code-window { overflow:hidden; border-radius:14px; background:#081329; color:#81ffb7; box-shadow:0 18px 38px rgba(1,16,46,.2); }
.code-top { display:flex; align-items:center; gap:5px; padding:10px 13px; color:#b9c5e3; background:#0f1d38; font-size:10px; }.code-top span { width:7px; height:7px; border-radius:50%; background:#ff6a68; }.code-top span:nth-child(2){background:#ffcc58}.code-top span:nth-child(3){background:#44d886}.code-top b{margin-left:auto;}
.code-window pre { margin:0; padding:18px; font-size:12px; line-height:1.55; overflow:auto; }
.api-card > p { margin-bottom:0; color:var(--muted); font-size:13px; }
.faq-shell { max-width:970px; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
details { border:1px solid var(--line); border-radius:13px; background:#fff; overflow:hidden; }
summary { padding:16px 18px; cursor:pointer; list-style:none; font-weight:800; position:relative; }
summary::-webkit-details-marker { display:none; }
summary:after { content:"+"; position:absolute; right:18px; font-size:20px; color:#2b5ef0; }
details[open] summary:after { content:"−"; }
details p { margin:0; padding:0 18px 18px; color:var(--muted); font-size:14px; }
.cta-section { padding:0 0 70px; }
.cta-banner { min-height:175px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; padding:28px 38px; border-radius:24px; color:#fff; background:radial-gradient(circle at 30% 50%,rgba(66,174,255,.5),transparent 34%),linear-gradient(115deg,#075cff,#3638f4 50%,#9929ef); box-shadow:0 25px 60px rgba(53,63,214,.25); overflow:hidden; }
.cta-art { width:76px; height:76px; display:grid; place-items:center; border-radius:22px; background:rgba(255,255,255,.13); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); font-size:41px; font-weight:950; }
.cta-banner h2 { margin:0 0 5px; font-size:31px; }.cta-banner p { margin:0; color:rgba(255,255,255,.8); }
.site-footer { padding:60px 0 28px; background:#f7f9fd; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:38px; }
.footer-grid h3 { margin:0 0 13px; font-size:14px; }.footer-grid > div:not(.footer-brand) a { display:block; margin:8px 0; color:#5d6881; font-size:13px; }
.footer-brand p { max-width:250px; color:#5d6881; font-size:13px; }
.footer-bottom { margin-top:36px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:#7b879e; font-size:12px; }
.mobile-menu, .menu-overlay, .mobile-sticky-cta { display:none; }

@media (max-width: 1080px) {
    .desktop-nav { display:none; }
    .menu-button { display:block; }
    .header-cta { display:none; }
    .hero-grid { gap:24px; }
    .metrics { grid-template-columns:repeat(3,1fr); }
    .metric:nth-child(3) { border-right:0; }
    .metric:nth-child(-n+3) { border-bottom:1px solid var(--line); }
    .feature-grid { grid-template-columns:repeat(2,1fr); }
    .use-grid { grid-template-columns:repeat(4,1fr); }
    .footer-grid { grid-template-columns:1.5fr repeat(2,1fr); }
}

@media (max-width: 767px) {
    :root { --radius: 19px; }
    .shell { width:min(calc(100% - 28px),var(--shell)); }
    .section-pad { padding:68px 0; }
    .header-inner { min-height:72px; }
    .brand { font-size:21px; }.brand-mark { width:34px; height:34px; }
    .login-link { display:none; }
    .hero { padding-top:58px; padding-bottom:24px; }
    .hero-grid { grid-template-columns:1fr; gap:30px; }
    .hero-copy { text-align:center; }
    .hero h1 { margin-top:16px; font-size:clamp(39px,10vw,54px); }
    .hero-text { font-size:16px; }
    .hero-buttons { display:grid; grid-template-columns:1fr; width:100%; gap:10px; margin-top:24px; }
    .hero-buttons .button { width:100%; }
    .hero-note { font-size:11px; }
    .hero-visual { min-height:350px; }
    .virtual-card { width:min(410px,88vw); padding:24px; border-radius:22px; transform:perspective(1000px) rotateY(-6deg) rotateZ(2deg); }
    .card-brand { font-size:24px; }.card-brand span { font-size:16px; }.chip { width:48px; height:36px; margin-top:22px; }.card-number { margin-top:26px; font-size:16px; }.card-bottom { margin-top:30px; }.network-word { font-size:20px; }
    .halo-one { width:330px; height:190px; }.halo-two { width:300px; height:300px; }
    .floating-badge { padding:9px 11px; font-size:10px; border-radius:11px; }
    .badge-wallet { top:5px; right:4%; }.badge-security { bottom:54px; left:1%; }.badge-digital { bottom:5px; right:2%; }
    .metrics-wrap { margin-top:28px; }
    .metrics { grid-template-columns:repeat(3,1fr); border-radius:16px; }
    .metric { min-height:80px; padding:12px 5px; gap:6px; flex-direction:column; text-align:center; }
    .metric-icon { width:29px; height:29px; flex-basis:29px; border-radius:9px; font-size:14px; }
    .metric strong { font-size:10px; line-height:1.25; }.metric small { display:none; }
    .fine-print { text-align:center; font-size:9px; }
    .platform-row { padding:14px 0; gap:8px; }.platform-row span { font-size:11px; padding:7px 10px; }
    .section-heading { margin-bottom:30px; }.section-heading h2 { font-size:32px; }.section-heading p { font-size:14px; }
    .feature-grid { grid-template-columns:1fr 1fr; gap:12px; }.feature-card { padding:19px; }.feature-icon { width:42px; height:42px; border-radius:13px; }.feature-card h3 { font-size:15px; margin-top:14px; }.feature-card p { font-size:12px; }
    .use-grid { grid-template-columns:1fr 1fr; gap:11px; }.use-grid article { padding:17px 11px; }.use-grid h3 { font-size:13px; }.use-grid p { font-size:11px; }
    .bin-grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; gap:14px; }.bin-card { min-width:86%; scroll-snap-align:center; }
    .steps-grid { grid-template-columns:1fr; gap:13px; }.step-card { min-height:0; padding:22px 20px 22px 94px; text-align:left; }.step-number { top:19px; left:18px; }.step-icon { position:absolute; left:20px; top:58px; width:54px; height:54px; margin:0; font-size:24px; border-radius:17px; }.step-card h3 { margin-top:4px; }.step-card p { font-size:13px; }
    .lower-grid { grid-template-columns:1fr; }.lower-card { padding:20px; }
    .faq-grid { grid-template-columns:1fr; }.faq-grid details:nth-child(n+6) { display:none; }
    .cta-section { padding-bottom:36px; }.cta-banner { grid-template-columns:1fr; text-align:center; padding:26px 20px; }.cta-art { margin:auto; }.cta-banner h2 { font-size:26px; }.cta-banner .button { width:100%; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:28px 18px; }.footer-brand { grid-column:1/-1; }.footer-bottom { flex-direction:column; text-align:center; padding-bottom:78px; }
    .menu-overlay { position:fixed; inset:0; z-index:1200; background:rgba(9,19,49,.5); backdrop-filter:blur(3px); }
    .menu-overlay[hidden] { display:none; }
    .menu-overlay:not([hidden]) { display:block; }
    .mobile-menu { display:flex; flex-direction:column; position:fixed; z-index:1300; top:0; right:0; width:min(88vw,390px); height:100dvh; padding:0 24px 24px; background:#fff; transform:translateX(105%); transition:transform .25s ease; box-shadow:-20px 0 65px rgba(13,30,75,.23); }
    .mobile-menu.is-open { transform:translateX(0); }
    .mobile-menu-head { min-height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
    .menu-close { width:45px; height:45px; border:0; background:transparent; font-size:40px; color:#8490a8; cursor:pointer; }
    .mobile-nav { padding:26px 0; }.mobile-nav a { display:block; padding:13px 4px; font-size:19px; font-weight:750; color:#3d4863; }
    .mobile-menu-actions { margin-top:auto; display:grid; gap:10px; }.mobile-menu-actions .button { width:100%; }
    .mobile-sticky-cta { display:flex; position:fixed; z-index:900; left:14px; right:14px; bottom:max(12px,env(safe-area-inset-bottom)); min-height:54px; align-items:center; justify-content:center; gap:10px; border-radius:14px; color:#fff; font-weight:900; background:linear-gradient(110deg,#0578ff,#4037ff,#9829ff); box-shadow:0 13px 35px rgba(60,48,224,.38); transform:translateY(120px); transition:transform .25s ease; }
    .mobile-sticky-cta.is-visible { transform:translateY(0); }
}

@media (max-width: 390px) {
    .shell { width:min(calc(100% - 22px),var(--shell)); }
    .hero h1 { font-size:36px; }
    .feature-grid { grid-template-columns:1fr; }
    .metrics { grid-template-columns:repeat(2,1fr); }
    .metric:nth-child(3) { border-right:1px solid var(--line); }
    .metric:nth-child(2n) { border-right:0; }
    .metric:nth-child(-n+4) { border-bottom:1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}