/* Apple-inspired dark presentation. Existing content and services stay in place. */
:root {
  color-scheme:dark;
  --bg:#000; --tile:#161617; --ink:#f5f5f7; --mute:#a1a1a6;
  --blue:#2997ff; --blue-d:#0071e3; --button-hover:#006bd6; --line:#3a3a3c;
  --ice:var(--bg); --navy:var(--tile); --navy2:#1d1d1f; --white:#fff;
  --text:var(--mute); --border:var(--line);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  box-sizing:border-box;
}
*,*::before,*::after { box-sizing:inherit }
html { scroll-behavior:smooth; scroll-padding-top:80px; background:var(--bg) }
body { margin:0; background:var(--bg); color:var(--ink); font:400 19px/1.5 var(--f); letter-spacing:.004em; -webkit-font-smoothing:antialiased }
h1,h2,h3 { font-family:var(--f); font-weight:700; line-height:1.07; margin:0; letter-spacing:-.04em; overflow-wrap:anywhere }
a { color:inherit }
p { overflow-wrap:anywhere }
.wrap { max-width:1040px; margin:0 auto; padding:0 30px }
.wrap>* { min-width:0 }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; background:var(--blue-d); color:#fff!important; font:500 17px/1.4 var(--f); padding:13px 24px; border-radius:999px; border:0; text-decoration:none; cursor:pointer; transition:background .2s }
.btn:hover { background:var(--button-hover) }
.btn.sm { min-height:44px; padding:10px 18px; font-size:14px }
.btn:disabled { cursor:wait; opacity:.55 }
.hero { padding:88px 0 0; text-align:center }
.hero .wrap { display:grid; grid-template-columns:minmax(0,1fr); gap:56px }
.pill { display:inline-block; margin-bottom:16px; color:var(--ink); font-size:19px; font-weight:600; letter-spacing:-.01em }
h1 { font-size:clamp(44px,8.2vw,96px); font-weight:700; line-height:1.03; letter-spacing:-.045em; max-width:11em; margin:0 auto }
h1 span { color:var(--blue) }
.lead { font-size:clamp(21px,2.6vw,28px); color:var(--mute); max-width:25em; margin:24px auto 30px; line-height:1.28 }
.cta-row { display:flex; justify-content:center; gap:24px; align-items:center; flex-wrap:wrap }
.cta-row>span { font-size:17px }
.tiny { font-size:13px; color:var(--mute); max-width:48em; margin:24px auto 0; line-height:1.5 }
.note { font-size:12px; color:var(--mute); margin:22px auto 0; max-width:65ch }
section { padding:120px 0 }
.dark { background:var(--bg); color:var(--ink) }
.dark .mute { color:var(--mute) }
h2 { font-size:clamp(36px,6vw,64px); max-width:16ch }
.sub { color:var(--mute); max-width:52ch; margin:20px 0 0; font-size:clamp(19px,2.4vw,24px); line-height:1.35 }
#how>.wrap>h2,#faq h2,#exchanges h2 { margin-inline:auto; text-align:center }
#how>.wrap>.sub,#exchanges>.wrap>.sub { margin-inline:auto; text-align:center }
/* Three steps, with the same visual identity as the Shark collection. */
#how { position:relative; background:radial-gradient(ellipse at 50% 65%,#111b2d55,transparent 65%),#000 }
#how>.wrap { max-width:1200px }
#how>.wrap>h2 { max-width:18ch; text-wrap:balance }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:52px 0 0; padding:0; list-style:none }
.step { --step-accent:#75bdff; --step-rgb:117,189,255; position:relative; isolation:isolate; min-width:0; padding:30px; border:1px solid rgba(var(--step-rgb),.18); border-radius:28px; background:radial-gradient(ellipse at 0 0,rgba(var(--step-rgb),.12),transparent 65%),linear-gradient(145deg,#14161d,#0b0c10); box-shadow:inset 0 1px #ffffff08,0 20px 48px #0003; transition:transform .25s,border-color .25s,box-shadow .25s }
.step::before { content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; background:radial-gradient(ellipse at 12% 0,rgba(var(--step-rgb),.09),transparent 60%); pointer-events:none }
.step-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:36px }
.step-icon { display:grid; place-items:center; width:68px; height:68px; flex-shrink:0; color:var(--step-accent); border:1px solid rgba(var(--step-rgb),.22); border-radius:22px; background:linear-gradient(140deg,rgba(var(--step-rgb),.12),rgba(var(--step-rgb),.02)); box-shadow:0 0 30px rgba(var(--step-rgb),.07),inset 0 1px #ffffff08 }
.step-icon svg { width:43px; height:43px; filter:drop-shadow(0 0 7px rgba(var(--step-rgb),.2)) }
.step:nth-child(2) .step-icon rect { fill:#1a2735 }
.step:nth-child(3) .step-icon path:first-of-type { fill:currentColor; stroke:none }
.step .n { color:var(--step-accent); font:500 14px/1 var(--f); font-variant-numeric:tabular-nums; letter-spacing:.06em; white-space:nowrap }
.step .n span { color:#727888; font-size:12px }
.step h3 { font-size:26px; line-height:1.2; letter-spacing:-.035em; margin:0 0 14px; text-wrap:balance }
.step p { margin:0; color:#a9abb8; font-size:17px; line-height:1.65; letter-spacing:0 }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .step:hover { transform:translateY(-5px); border-color:rgba(var(--step-rgb),.38); box-shadow:inset 0 1px #ffffff0b,0 24px 56px #0005 }
}
.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start }
#control { background:var(--tile); border-block:1px solid #222 }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:14px }
.checks li { background:#1d1d1f; border:1px solid var(--line); border-radius:24px; padding:24px 24px 24px 62px; position:relative; font-weight:500 }
.checks li::before { content:""; position:absolute; left:24px; top:28px; width:20px; height:20px; border-radius:50%; background:var(--blue-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.checks span { display:block; font-weight:400; color:var(--mute); font-size:16px; margin-top:6px }
#faq .wrap { max-width:820px }
#faq details { border-bottom:1px solid var(--line); padding:24px 0; text-align:left }
#faq details:first-of-type { border-top:1px solid var(--line) }
#faq summary { font:600 24px/1.3 var(--f); letter-spacing:-.02em; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px }
#faq summary::-webkit-details-marker { display:none }
#faq summary::after { content:"+"; flex-shrink:0; color:var(--mute); font-size:32px; font-weight:300; line-height:1; transition:transform .2s }
#faq details[open] summary::after { transform:rotate(45deg) }
#faq details p { color:var(--mute); margin:14px 0 0; max-width:62ch }
.join { background:var(--tile); color:var(--ink); text-align:center }
.join h2 { margin:0 auto }
.join .sub { margin:20px auto 32px }
#waitlistForm { display:flex; gap:12px; max-width:560px; margin:0 auto; flex-wrap:wrap; justify-content:center }
#waitlistForm label { flex-basis:100%; text-align:left; font-size:15px; font-weight:500; margin-left:22px }
input[type=email] { flex:1 1 260px; min-width:0; width:100%; padding:14px 22px; border-radius:999px; border:1px solid var(--line); font:400 17px var(--f); color:var(--ink); background:var(--bg) }
input::placeholder { color:var(--mute); opacity:1 }
#waitlistMessage { font-size:16px; font-weight:500; margin-top:18px; min-height:1.5em }
#waitlistMessage:empty { margin:0; min-height:0 }
#waitlistMessage[role=alert] { color:#ffd088 }
#waitlistMessage.success { color:#8bd5a7 }
.waitlist-privacy,.waitlist-note { font-size:13px; color:var(--mute); margin:18px auto 0; max-width:62ch }
.join a:not(.btn) { color:var(--ink) }
.risk { background:var(--tile); border:1px solid var(--line); border-radius:28px; padding:32px; max-width:980px }
.risk h2 { font-size:26px; max-width:none; margin-bottom:12px }
.risk p { margin:8px 0 0; font-size:15px; color:var(--mute) }
.learn-top { display:flex; align-items:end; justify-content:space-between; gap:30px }
.learn-top>a { font-weight:500; color:var(--blue); white-space:nowrap }
.learn-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:40px }
.learn-card { display:flex; flex-direction:column; align-items:start; padding:28px; border:1px solid transparent; border-radius:28px; background:var(--tile); text-decoration:none; transition:border-color .2s }
.learn-card:hover { border-color:var(--blue) }
.learn-number { font-size:13px; color:var(--mute); font-weight:500 }
.learn-card h3 { font-size:24px; line-height:1.15; letter-spacing:-.025em; margin:24px 0 28px }
.learn-card .read { font-size:15px; color:var(--blue); font-weight:500; margin-top:auto }
.landing-footer { background:var(--tile); border-top:1px solid var(--line); padding:32px 0 40px; font-size:12px; color:var(--mute); line-height:1.6 }
.landing-footer .wrap { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap }
.landing-footer .wrap>div:first-child { max-width:55ch }
.landing-footer .footer-links { display:flex; gap:12px 20px; flex-wrap:wrap; align-items:center; justify-content:flex-start }
.landing-footer a { margin:0 }
.landing-footer a:hover { color:var(--ink) }
.landing-footer button { min-height:44px; background:none; border:0; padding:0; color:inherit; font:inherit; text-decoration:underline; cursor:pointer }
.skip { position:fixed; left:16px; top:-100px; background:var(--tile); color:var(--ink); padding:12px; z-index:6000 }
.skip:focus { top:12px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.consent { font-family:var(--f); max-height:calc(100dvh - 32px); overflow-y:auto; color:var(--ink); background:rgba(22,22,23,.98); border:1px solid var(--line); border-radius:24px; box-shadow:0 8px 40px #0008 }
.consent-title { color:var(--ink); font-size:16px; font-weight:600 }
.consent-text { font-size:13px; line-height:1.5 }
.consent-button { font:500 13px var(--f); min-height:44px; border-radius:999px }
.consent-choices { font-size:13px }
.consent p { color:var(--mute) }
.consent-reject { background:#262628; color:var(--ink); border-color:var(--line) }
.consent-accept { background:var(--blue-d); border-color:var(--blue-d); color:#fff }
.consent-accept:hover { background:var(--button-hover) }
/* Preserve the official marks and their destinations. */
#exchanges { border-top:1px solid #222 }
#exchanges h2 { max-width:22ch }
.exchange-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:48px }
.exchange-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:24px; border:1px solid transparent; border-radius:28px; background:var(--tile); text-decoration:none; transition:border-color .2s }
.exchange-card:hover { border-color:var(--blue) }
.exchange-logo { display:flex; align-items:center; height:56px; margin-bottom:24px }
.exchange-logo img { display:block; width:52px; height:52px; object-fit:contain }
.exchange-binance .exchange-logo img { width:40px; height:40px }
.exchange-bybit .exchange-logo img { width:108px; height:42px; background:#f5f5f7; padding:8px; border-radius:8px }
.exchange-name { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; font:600 23px/1.2 var(--f); letter-spacing:-.025em }
.exchange-name>span { font:400 20px var(--f); color:var(--blue) }
.exchange-url { font-size:12px; color:var(--mute); overflow-wrap:anywhere; margin-top:10px }
.exchange-footnote { font-size:14px; color:var(--mute); max-width:85ch; margin:24px auto 0; text-align:center }
.exchange-setup-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0 }
.exchange-setup-links a { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:14px; min-height:48px; border:1px solid var(--line); border-radius:16px; background:var(--bg); font-size:16px; font-weight:500; text-decoration:none }
.exchange-setup-links a span { font-size:12px; font-weight:400 }
.exchange-setup-links a span:last-child { margin-left:auto; color:var(--blue) }
.exchange-setup-links a:hover { border-color:var(--blue); color:var(--blue) }
@media(max-width:1000px) { .learn-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:820px) {
  section { padding:84px 0 }
  .hero { padding-top:56px }
  .split,.steps { grid-template-columns:1fr }
  .steps { gap:16px; margin-top:36px; max-width:540px; margin-inline:auto }
  .step { padding:26px 28px; border-radius:26px }
  .step-top { margin-bottom:24px }
  .step-icon { width:58px; height:58px; border-radius:19px }
  .step-icon svg { width:38px; height:38px }
  .step h3 { font-size:25px; margin-bottom:10px }
  .split { gap:36px }
  .learn-top { align-items:start; flex-direction:column; gap:20px }
  .exchange-grid,.exchange-setup-links { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:480px) {
  .wrap { padding-inline:22px }
  #how { padding-block:72px }
  #how>.wrap>h2,#how>.wrap>.sub { text-align:left; margin-inline:0 }
  #how>.wrap>h2 { font-size:38px }
  #how>.wrap>.sub { font-size:18px; line-height:1.5; margin-top:16px }
  .step { padding:24px }
  .step p { font-size:16px; line-height:1.6 }
  .hero .wrap { gap:40px }
  .pill { font-size:17px }
  .learn-grid { grid-template-columns:1fr }
  .learn-card { padding:28px }
  .risk { padding:24px; border-radius:24px }
  .cta-row { gap:18px }
  .cta-row>span { font-size:15px }
  #waitlistForm .btn { width:100% }
  #faq summary { font-size:21px }
  .exchange-card { padding:20px; border-radius:24px }
  .exchange-name { font-size:20px }
}
@media(max-width:360px) {
  .exchange-grid { gap:10px }
  .exchange-card { padding:16px 12px }
  .exchange-name { font-size:18px }
  .exchange-setup-links { grid-template-columns:1fr }
  .checks li { padding-left:54px }
  .checks li::before { left:20px }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important } }

/* Planned exchange connections. */
.exchange-status{font-size:12px;line-height:1.4;color:var(--mute);margin-top:10px}
.exchange-logo{background:#f5f5f7;border-radius:12px;padding:8px;min-width:64px;justify-content:center}
.exchange-logo img{width:40px;height:40px}
.exchange-bybit .exchange-logo img{width:88px;height:40px;padding:4px}

/* A clear, focused first screen on phones. */
.hero h1 .hero-line { color:inherit }
.hero .hero-cta-arrow { display:none }
@media(max-width:640px) {
  .hero { position:relative; isolation:isolate; padding:34px 0 24px; background:radial-gradient(ellipse at 50% 22%,#14365f50,transparent 66%) }
  .hero .wrap { max-width:520px; gap:0; padding-inline:24px }
  .hero .pill { max-width:100%; margin:0 0 22px; padding:7px 13px; border:1px solid #75bdff26; border-radius:999px; background:#75bdff09; color:#9acfff; font-size:12px; font-weight:500; line-height:1.4; letter-spacing:.015em }
  .hero h1 { max-width:none; font-size:clamp(40px,11.8vw,56px); line-height:1.06; letter-spacing:-.05em }
  .hero h1 .hero-line,.hero h1 .hero-accent { display:block }
  .hero h1 .hero-accent { color:#429fff }
  .hero .lead { max-width:33ch; margin:22px auto 26px; color:#b1b4be; font-size:18px; line-height:1.5; letter-spacing:-.015em; text-wrap:pretty }
  .hero .cta-row { flex-direction:column; gap:12px; max-width:360px; margin-inline:auto }
  .hero .cta-row .btn { width:100%; min-height:56px; padding:15px 22px; gap:16px; border:1px solid #ffffff18; border-radius:18px; background:linear-gradient(160deg,#0875df,#006bd6); box-shadow:0 4px 28px #0071e326,inset 0 1px #ffffff14; font-size:17px; font-weight:600 }
  .hero .hero-cta-arrow { display:block; width:21px; height:21px; flex:none }
  .hero .cta-row>span { font-size:13px; line-height:1.4 }
  .hero .tiny { max-width:33ch; margin:18px auto 0; font-size:12px; line-height:1.5; color:#858b99 }
  html[lang="hi"] .hero h1 { line-height:1.2 }
  html[lang="ko"] .hero h1 { word-break:keep-all; line-height:1.14 }
}
@media(max-width:360px) {
  .hero { padding-top:26px }
  .hero .wrap { padding-inline:22px }
  .hero .pill { margin-bottom:18px; font-size:11px }
  .hero h1 { font-size:37px }
  .hero .lead { font-size:17px; margin-top:18px; margin-bottom:22px }
  .hero .cta-row .btn { min-height:54px }
}

/* Compact exchange cards keep every venue easy to scan. */
#exchanges .exchange-grid { gap:12px; margin-top:32px }
#exchanges .exchange-card { padding:18px; border-radius:20px }
#exchanges .exchange-logo { height:44px; min-width:48px; padding:6px; margin-bottom:14px; border-radius:10px }
#exchanges .exchange-logo img { width:32px; height:32px }
#exchanges .exchange-bybit .exchange-logo img { width:70px; height:30px; padding:2px }
#exchanges .exchange-name { font-size:20px; gap:8px }
#exchanges .exchange-name>span { font-size:18px }
@media(max-width:820px) {
  #exchanges .exchange-grid { gap:10px; margin-top:28px }
  #exchanges .exchange-card { padding:14px; border-radius:18px }
  #exchanges .exchange-logo { height:38px; min-width:42px; margin-bottom:12px; border-radius:9px }
  #exchanges .exchange-logo img { width:28px; height:28px }
  #exchanges .exchange-bybit .exchange-logo img { width:62px; height:26px }
  #exchanges .exchange-name { font-size:16px; gap:4px }
  #exchanges .exchange-name>span { font-size:16px }
}
@media(max-width:360px) {
  #exchanges .exchange-card { padding:12px }
  #exchanges .exchange-name { font-size:14px }
}

/* A virtual-first introduction with a clear optional real-trading route. */
.how-real-choice{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding-top:25px;border-top:1px solid #ffffff18}.how-real-choice h3{font-size:18px;margin:0 0 8px}.how-real-choice p{font-size:15px;line-height:1.65;color:var(--mute);max-width:720px;margin:0}.how-real-choice a{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:#75bcff;white-space:nowrap;text-decoration:underline;text-underline-offset:5px}.how-real-choice a:focus-visible{outline:2px solid #57aeff;outline-offset:4px}@media(max-width:760px){.how-real-choice{align-items:flex-start;flex-direction:column;gap:12px}.how-real-choice a{white-space:normal}.how-real-choice p{font-size:14px}}

/* Three exchange offerings; presentation only, never an activation control. */
#exchanges .exchange-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px }
#exchanges .exchange-card { padding:24px }
#exchanges .exchange-name { font-size:21px }
#exchanges .exchange-status { display:inline-flex; align-items:center; align-self:flex-start; width:fit-content; max-width:100%; margin-top:14px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:var(--mute); background:color-mix(in srgb,var(--ink) 5%,var(--tile)); font:500 12px/1.4 var(--f); letter-spacing:0; overflow-wrap:anywhere }
#exchanges .exchange-status-integrated { color:var(--blue); border-color:color-mix(in srgb,var(--blue) 35%,transparent); background:color-mix(in srgb,var(--blue) 10%,var(--tile)) }
@media (max-width:600px) {
  #exchanges .exchange-grid { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:24px }
  #exchanges .exchange-card { display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:16px; row-gap:6px; padding:18px }
  #exchanges .exchange-logo { grid-column:1; grid-row:1 / 3; align-self:center; height:44px; margin-bottom:0 }
  #exchanges .exchange-logo img { width:32px; height:32px }
  #exchanges .exchange-name { grid-column:2; font-size:19px }
  #exchanges .exchange-status { grid-column:2; justify-self:start; margin-top:0 }
}

/* A single, compact Coinbase setup guide after the simulation steps. */
#how .how-real-choice { align-items:center; gap:28px; margin-top:28px; padding:28px; border:1px solid color-mix(in srgb,var(--blue) 18%,var(--line)); border-radius:24px; background:linear-gradient(120deg,color-mix(in srgb,var(--blue) 6%,var(--tile)),var(--tile)) }
#how .how-real-choice .how-real-main { flex:1; min-width:0; max-width:600px }
#how .how-real-choice .how-real-heading { display:flex; align-items:center; gap:14px; margin-bottom:14px }
#how .how-real-choice .how-real-heading img { display:block; flex:0 0 44px; width:44px; height:44px; padding:7px; border-radius:13px; background:#fff; object-fit:contain }
#how .how-real-choice h3 { margin:0; color:var(--ink); font-size:23px; line-height:1.2; letter-spacing:-.025em }
#how .how-real-choice p { margin:0; color:var(--mute); font-size:15px; line-height:1.65; max-width:60ch }
#how .how-real-choice .how-real-link { justify-content:center; flex:0 0 auto; gap:16px; min-height:48px; max-width:100%; padding:12px 18px; border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line)); border-radius:12px; color:var(--blue); background:color-mix(in srgb,var(--blue) 8%,var(--tile)); font-size:15px; font-weight:600; line-height:1.4; text-decoration:none; white-space:normal; transition:background .2s,border-color .2s }
#how .how-real-choice .how-real-link:hover { background:color-mix(in srgb,var(--blue) 16%,var(--tile)); border-color:var(--blue) }
#how .how-real-choice .how-real-link:focus-visible { outline:3px solid var(--blue); outline-offset:4px }
#how .how-real-choice .how-real-link span { font-size:20px; line-height:1; flex-shrink:0 }
@media (max-width:760px) {
  #how .how-real-choice { align-items:stretch; gap:22px; padding:22px; border-radius:22px }
  #how .how-real-choice h3 { font-size:22px }
  #how .how-real-choice .how-real-link { width:100% }
}
@media (max-width:360px) {
  #how .how-real-choice { padding:18px }
  #how .how-real-choice h3 { font-size:20px }
}