:root{
  --bg:#03050A;
  --bg2:#060A14;
  --ink:#EDF2FA;
  --ink-dim:rgba(237,242,250,.62);
  --ink-faint:rgba(237,242,250,.36);
  --blue:#3B9BFF;
  --blue-deep:#0B5CE0;
  --cobalt:#0A3DA8;
  --chrome-hi:#F4F8FE;
  --chrome-mid:#B7C5D8;
  --chrome-lo:#7C8DA3;
  --glass:rgba(255,255,255,.04);
  --glass-strong:rgba(255,255,255,.075);
  --stroke:rgba(255,255,255,.11);
  --stroke-bright:rgba(120,170,255,.35);
  --radius:22px;
  --disp:'Unbounded','Unbounded Fallback',sans-serif;
  --body:'Manrope','Manrope Fallback',sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;
}
/* The webfonts load without blocking first paint. Until they arrive, text is drawn in a local font scaled to the
   same width (Unbounded runs ~1.31x wider than Arial, Manrope ~1.015x), so the swap doesn't reflow the page. */
@font-face{font-family:'Unbounded Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto'),local('Noto Sans');size-adjust:131%}
@font-face{font-family:'Manrope Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto'),local('Noto Sans');size-adjust:101.5%}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  position:relative;
  overflow-x:hidden;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(59,155,255,.3)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font-family:inherit}

/* ---------- ambient field: cold steel + electric blue ---------- */
.aurora{
  position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:radial-gradient(ellipse 130% 85% at 50% -12%, #08122B 0%, var(--bg) 58%);
}
/* soft falloff is drawn into the gradients themselves: a live blur() on three viewport-sized layers was the
   single most expensive thing on the page to paint */
.aurora .blob{position:absolute;border-radius:50%;opacity:.5;will-change:transform}
.b1{width:60vw;height:60vw;left:-18vw;top:-22vw;background:radial-gradient(circle,rgba(11,46,102,.95) 0%,rgba(11,46,102,.6) 22%,rgba(11,46,102,.28) 42%,rgba(11,46,102,.08) 58%,transparent 70%);animation:drift1 26s ease-in-out infinite alternate}
.b2{width:48vw;height:48vw;right:-14vw;top:6vw;background:radial-gradient(circle,rgba(18,60,143,.95) 0%,rgba(18,60,143,.6) 22%,rgba(18,60,143,.28) 42%,rgba(18,60,143,.08) 58%,transparent 70%);animation:drift2 32s ease-in-out infinite alternate;opacity:.42}
.b3{width:42vw;height:42vw;left:26vw;top:50vh;background:radial-gradient(circle,rgba(27,43,69,.95) 0%,rgba(27,43,69,.6) 22%,rgba(27,43,69,.28) 42%,rgba(27,43,69,.08) 58%,transparent 70%);animation:drift3 38s ease-in-out infinite alternate;opacity:.4}
@keyframes drift1{to{transform:translate(9vw,7vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(-7vw,10vh) scale(.92)}}
@keyframes drift3{to{transform:translate(6vw,-9vh) scale(1.08)}}

.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- chrome text treatment (brand) ---------- */
.chrome{
  background:linear-gradient(180deg,var(--chrome-hi) 0%,var(--chrome-mid) 42%,var(--chrome-lo) 52%,#E4EBF5 62%,var(--chrome-mid) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.blue-grad{
  background:linear-gradient(105deg,#6FB4FF 0%,var(--blue) 40%,var(--blue-deep) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- floating glass bubbles (blue tint) ---------- */
.bubble{
  position:absolute;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 18%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 70% 80%, rgba(59,155,255,.2) 0%, rgba(11,92,224,.1) 45%, rgba(255,255,255,.02) 75%);
  border:1px solid rgba(180,210,255,.22);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.06),
    inset -8px -10px 24px rgba(59,155,255,.14),
    0 18px 50px rgba(0,0,0,.4);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:float var(--dur,14s) ease-in-out var(--delay,0s) infinite alternate;
}
.bubble::after{
  content:"";position:absolute;left:14%;top:10%;width:34%;height:20%;
  border-radius:50%;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:rotate(-24deg);filter:blur(1px);
}
@keyframes float{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(var(--dx,20px),var(--dy,-46px),0) scale(var(--sc,1.06))}
}

/* ---------- ghost X watermarks ---------- */
.ghost-x{position:absolute;height:auto;opacity:.07;pointer-events:none}

/* ---------- shared glass panel ---------- */
.glass{
  background:linear-gradient(160deg, var(--glass-strong), var(--glass) 45%);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16);
}
/* frosted blur behind ~25 cards is barely visible over this background but costly on phone GPUs: desktop only */
@media(min-width:881px) and (hover:hover){
  .glass{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
  footer{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 28%);
}
.sheen{overflow:hidden}
.sheen::after{
  content:"";position:absolute;top:-60%;left:-80%;width:60%;height:220%;
  transform:rotate(22deg);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(199,222,255,.16), rgba(255,255,255,0));
  transition:left .8s ease;pointer-events:none;
}
.sheen:hover::after{left:130%}

/* ---------- layout ---------- */
.wrap{max-width:1220px;margin:0 auto;padding:0 24px}
section{padding:110px 0;position:relative}
/* Load-time optimisation: on a fresh visit, off-screen sections are not laid out or painted until needed, which
   roughly halves the work before first paint. Their heights are only estimates while skipped, so this is turned
   off (html.cv-off) whenever exact positions matter: pages opened with a #hash, reloads and back/forward (set
   inline in <head>), just before any in-page jump, and a moment after load (site.js). */
html:not(.cv-off) section,html:not(.cv-off) footer{content-visibility:auto;contain-intrinsic-size:auto 1000px}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--blue),transparent)}
h2{
  font-family:var(--disp);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.18;letter-spacing:-.01em;margin-bottom:18px;
}
.lede{color:var(--ink-dim);max-width:620px;font-size:1.05rem}
/* scroll reveal: content is only hidden once JS has confirmed it is running (html.js is set inline in <head>) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}

/* ---------- nav ---------- */
nav{
  position:fixed;top:16px;left:0;right:0;margin:0 auto;z-index:50;
  width:min(1220px,calc(100% - 32px));
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px 20px;border-radius:100px;
  background:rgba(6,10,20,.6);
  border:1px solid var(--stroke);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.logo{display:flex;align-items:center;gap:12px}
.logo-word{display:block;width:112px;height:auto;flex:none}
.logo-mark{
  width:44px;height:36px;display:grid;place-items:center;flex:none;
}
.logo-mark svg{width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 2px 8px rgba(11,92,224,.55))}
nav .logo,.nav-cta{flex:none}
.nav-links{display:flex;gap:3px;list-style:none}
.nav-links a{
  padding:8px 11px;border-radius:100px;font-size:.86rem;font-weight:600;color:var(--ink-dim);
  white-space:nowrap;
  transition:color .25s,background .25s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);background:rgba(120,170,255,.09)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .btn{white-space:nowrap}
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  padding:11px 22px;border-radius:100px;font-weight:700;font-size:.9rem;cursor:pointer;
  border:1px solid transparent;transition:transform .25s ease,box-shadow .25s ease,background .25s;
  position:relative;
}
.btn:active{transform:scale(.97)}
.btn-ghost{background:rgba(255,255,255,.055);border-color:var(--stroke);color:var(--ink)}
.btn-ghost:hover{background:rgba(120,170,255,.12);border-color:var(--stroke-bright)}
.btn-primary{
  background:linear-gradient(160deg,#5FAAFF 0%,var(--blue) 34%,var(--blue-deep) 78%,#0A47BF 100%);
  color:#fff;
  box-shadow:0 10px 32px rgba(11,92,224,.5), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(6,32,84,.5);
  text-shadow:0 1px 2px rgba(4,24,64,.4);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(11,92,224,.6), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 8px rgba(6,32,84,.5)}
.btn-lg{padding:15px 30px;font-size:.98rem}
.menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:1.5rem;cursor:pointer;line-height:1;padding:8px 10px;margin:-8px -6px -8px -4px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:150px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;width:100%}
.hero h1{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.14;letter-spacing:.005em;
  margin-bottom:22px;text-transform:uppercase;
}
.hero .lede{margin-bottom:34px}
.campaign{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;
  padding:9px 18px 9px 10px;border-radius:100px;font-size:.85rem;font-weight:600;color:var(--ink-dim);
  background:rgba(255,255,255,.045);border:1px solid var(--stroke);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.campaign .tag{
  padding:4px 12px;border-radius:100px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  background:linear-gradient(120deg,rgba(59,155,255,.24),rgba(11,92,224,.24));
  border:1px solid rgba(59,155,255,.4);color:#8FC2FF;
}
.campaign b{color:var(--ink)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.hero-stats{display:flex;gap:0}
.hero-stats .stat{padding:18px 26px 18px 0;margin-right:26px;border-right:1px solid var(--stroke)}
.hero-stats .stat:last-child{border-right:0;margin-right:0}
.stat .num{font-family:var(--disp);font-weight:500;font-size:1.35rem}
.stat .lbl{font-size:.76rem;color:var(--ink-faint);letter-spacing:.05em;text-transform:uppercase;margin-top:2px}

/* candlestick silhouettes behind the X — echoes the logo */
.candles{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:130%;height:52%;opacity:.55;pointer-events:none;
}
.candles .c{
  position:absolute;bottom:0;width:4.2%;border-radius:3px;
  background:linear-gradient(180deg,rgba(59,155,255,.55),rgba(11,60,168,.15));
  box-shadow:0 0 18px rgba(59,155,255,.25);
  transform-origin:bottom;
  animation:candle 4.2s ease-in-out var(--cd,0s) infinite alternate;
}
.candles .c.s{background:linear-gradient(180deg,rgba(190,205,225,.4),rgba(120,140,165,.08));box-shadow:none}
.candles .c::before{
  content:"";position:absolute;left:50%;top:-26%;width:2px;height:26%;
  transform:translateX(-50%);background:inherit;border-radius:2px;
}
@keyframes candle{to{transform:scaleY(var(--gr,1.18))}}

/* signature chrome X */
.hero-visual{position:relative;height:540px}
.xstage{position:absolute;inset:0;display:grid;place-items:center;perspective:900px}
.glassx{
  position:relative;width:min(430px,82vw);
  animation:xfloat 9s ease-in-out infinite alternate;
  transform-style:preserve-3d;
}
@keyframes xfloat{
  from{transform:rotateX(7deg) rotateY(-9deg) translateY(0)}
  to{transform:rotateX(-5deg) rotateY(11deg) translateY(-20px)}
}
/* The mark is the designer's artwork in two layers (chevron / blades) with its glows baked in, so nothing here
   needs a live filter. Everything that moves is transform-only, which the GPU animates without repainting. */
.qx-art{position:relative;aspect-ratio:402/310}
.qx-layer{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.qx-chevron{animation:qx-in-l 1s cubic-bezier(.2,.7,.2,1) both}
.qx-blades{animation:qx-in-r 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes qx-in-l{from{transform:translate3d(-9%,0,0)}}
@keyframes qx-in-r{from{transform:translate3d(9%,0,0)}}
/* light sweep across the chrome face: a band sliding inside a clip shaped like the chevron */
.qx-sweep{
  position:absolute;inset:0;pointer-events:none;
  clip-path:polygon(4.36% 10.16%,28.06% 11.49%,58.46% 49.26%,26.48% 92.54%,8.68% 96.62%,43.11% 51.48%);
}
.qx-sweep i{
  position:absolute;top:-10%;bottom:-10%;left:0;width:24%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));
  transform:translate3d(-160%,0,0) skewX(-20deg);
  animation:qx-sweep 6.5s ease-in-out 1.6s infinite;
}
@keyframes qx-sweep{
  0%,52%{transform:translate3d(-160%,0,0) skewX(-20deg)}
  86%,100%{transform:translate3d(440%,0,0) skewX(-20deg)}
}
.xglow{
  position:absolute;left:50%;top:50%;width:135%;height:135%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(59,155,255,.26) 0%, rgba(11,92,224,.13) 36%, rgba(11,92,224,.04) 56%, transparent 68%);
  z-index:-1;border-radius:50%;
  animation:pulse 6s ease-in-out infinite alternate;
}
/* hero copy eases up into place without ever being hidden: it is the largest paint on the page */
.hero h1,.hero .lede,.hero-actions,.hero-stats{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .lede{animation-delay:.06s}
.hero-actions{animation-delay:.12s}
.hero-stats{animation-delay:.18s}
@keyframes rise{from{transform:translate3d(0,18px,0)}}
@keyframes pulse{to{transform:translate(-50%,-50%) scale(1.15);opacity:.75}}

/* floating price chips */
.chip{
  position:absolute;padding:10px 16px;border-radius:16px;
  font-family:var(--mono);font-size:.78rem;
  background:rgba(7,12,24,.65);border:1px solid var(--stroke-bright);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18);
  animation:float var(--dur,12s) ease-in-out var(--delay,0s) infinite alternate;
  white-space:nowrap;z-index:2;
}
.chip .pair{color:var(--ink-faint);margin-right:10px}
.chip .up{color:#5FAAFF}
.chip .dn{color:#FB7185}

/* ---------- why grid ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.why-card{padding:32px 28px;transition:transform .35s ease,border-color .35s ease}
.why-card:hover{transform:translateY(-6px);border-color:var(--stroke-bright)}
.why-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,rgba(59,155,255,.2),rgba(11,61,168,.22));
  border:1px solid rgba(59,155,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.why-icon svg{width:24px;height:24px;stroke:#6FB4FF;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-card h3{font-family:var(--disp);font-weight:400;font-size:1.02rem;margin-bottom:10px}
.why-card p{color:var(--ink-dim);font-size:.92rem}

/* ---------- markets ---------- */
.mkt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:52px}
.mkt{grid-column:span 2;padding:30px 26px;transition:transform .35s ease,border-color .35s}
.mkt:nth-child(4),.mkt:nth-child(5){grid-column:span 3}
.mkt:hover{transform:translateY(-6px);border-color:var(--stroke-bright)}
.mkt .sym-row{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.mkt .sym-pill{
  font-family:var(--mono);font-size:.68rem;padding:5px 11px;border-radius:100px;
  background:rgba(120,170,255,.07);border:1px solid var(--stroke);color:var(--ink-dim);
}
.mkt h3{font-family:var(--disp);font-weight:400;font-size:1.15rem;margin-bottom:8px}
.mkt p{color:var(--ink-dim);font-size:.92rem;margin-bottom:18px}
.mkt a{font-size:.85rem;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.mkt a:hover{gap:10px}

/* ---------- accounts ---------- */
.acct-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.acct{padding:34px 28px;display:flex;flex-direction:column;transition:transform .35s ease,border-color .35s}
.acct:hover{transform:translateY(-8px)}
.acct .tier{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.acct h3{font-family:var(--disp);font-weight:400;font-size:1.25rem;margin-bottom:6px}
.acct .fit{color:var(--ink-dim);font-size:.88rem;margin-bottom:24px}
.acct ul{list-style:none;margin-bottom:28px;flex:1}
.acct li{
  display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:.9rem;color:var(--ink-dim);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.acct li:last-child{border-bottom:0}
.acct li::before{
  content:"";width:16px;height:16px;flex:none;margin-top:3px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), rgba(95,170,255,.5) 55%, rgba(11,92,224,.2));
  border:1px solid rgba(95,170,255,.55);
  box-shadow:0 0 10px rgba(59,155,255,.4);
}
.acct.featured{
  padding-top:62px;
  border-color:rgba(95,170,255,.45);
  background:linear-gradient(165deg, rgba(59,155,255,.12), rgba(11,61,168,.1) 60%, rgba(255,255,255,.03));
  box-shadow:0 30px 80px rgba(11,92,224,.25), inset 0 1px 0 rgba(255,255,255,.22);
}
.acct .badge{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:3;
  padding:6px 16px;border-radius:100px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(160deg,#5FAAFF,var(--blue-deep));color:#fff;font-weight:700;
  box-shadow:0 8px 24px rgba(11,92,224,.55);white-space:nowrap;
}
.acct .btn{width:100%}
.acct-foot{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}

/* ---------- platforms ---------- */
.plat-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:52px}
.plat{padding:40px 44px;display:grid;grid-template-columns:1fr auto;column-gap:56px;align-items:center}
.plat h3{font-family:var(--disp);font-weight:400;font-size:1.3rem;margin-bottom:8px}
.plat p{color:var(--ink-dim);font-size:.92rem;max-width:560px}
.plat .dl-row{grid-column:2;grid-row:1 / span 2}
.dl-row{display:flex;gap:12px;flex-wrap:wrap}
.dl{
  display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);
  font-size:.85rem;font-weight:700;transition:background .25s,transform .25s,border-color .25s;
}
.dl:hover{background:rgba(120,170,255,.12);transform:translateY(-2px);border-color:var(--stroke-bright)}
.dl svg{width:17px;height:17px;stroke:#6FB4FF;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- copy trading ---------- */
.copy-panel{padding:64px 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;overflow:hidden}
.copy-visual{position:relative;height:320px}
.trader-card{
  position:absolute;padding:20px 22px;width:240px;border-radius:20px;
  background:rgba(7,12,24,.7);border:1px solid var(--stroke-bright);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  animation:float var(--dur,13s) ease-in-out var(--delay,0s) infinite alternate;
}
.trader-card .name{font-weight:800;font-size:.92rem;margin-bottom:2px}
.trader-card .role{font-size:.74rem;color:var(--ink-faint);margin-bottom:14px}
.trader-card .ret{font-family:var(--mono);font-size:1.3rem;color:#5FAAFF}
.trader-card .ret-lbl{font-size:.7rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em}
.spark{margin-top:12px;width:100%;height:36px}
.spark path{fill:none;stroke:#5FAAFF;stroke-width:2;stroke-linecap:round}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.post{overflow:hidden;display:flex;flex-direction:column;transition:transform .35s ease,border-color .35s}
.post:hover{transform:translateY(-6px);border-color:var(--stroke-bright)}
.post-media{
  height:170px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#0A1A3A 0%,#0D2C66 55%,#0A1428 100%);
  border-bottom:1px solid var(--stroke);
}
.post-media .pm-candles{position:absolute;inset:auto 0 0 0;height:70%;display:flex;align-items:flex-end;gap:6%;padding:0 8%}
.pm-candles i{
  flex:1;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,rgba(95,170,255,.8),rgba(11,60,168,.15));
  box-shadow:0 0 14px rgba(59,155,255,.3);
}
.pm-candles i:nth-child(even){background:linear-gradient(180deg,rgba(200,212,227,.5),rgba(120,140,165,.06));box-shadow:none}
.post-media .pm-x{
  position:absolute;right:-8%;top:-14%;width:55%;aspect-ratio:1;opacity:.16;
  font-family:var(--disp);font-weight:600;font-size:9rem;line-height:1;color:#fff;
  display:grid;place-items:center;
}
.post-cat{
  position:absolute;top:14px;left:14px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;color:#BFDCFF;
  background:rgba(7,12,24,.7);border:1px solid rgba(120,170,255,.35);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.post-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.post-body h3{font-family:var(--disp);font-weight:400;font-size:1rem;line-height:1.4;margin-bottom:10px}
.post-body p{color:var(--ink-dim);font-size:.88rem;margin-bottom:18px;flex:1}
.post-meta{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--ink-faint)}
.post-meta .read{color:var(--blue);font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.post:hover .read{gap:10px}
.blog-foot{display:flex;justify-content:center;margin-top:40px}

/* ---------- faq ---------- */
.faq-list{margin-top:48px;display:flex;flex-direction:column;gap:14px;max-width:820px}
.faq{border-radius:18px}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 26px;font-weight:700;font-size:.98rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--disp);font-size:1.1rem;color:var(--blue);flex:none;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(59,155,255,.12);border:1px solid rgba(59,155,255,.35);
  transition:transform .3s ease;
}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 26px 24px;color:var(--ink-dim);font-size:.93rem;max-width:680px}

/* ---------- final cta ---------- */
.final{padding:120px 0 140px;text-align:center;position:relative;overflow:hidden}
.final h2{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase;letter-spacing:.01em}
.final .lede{margin:0 auto 38px}

/* ---------- footer ---------- */
footer{border-top:1px solid rgba(255,255,255,.08);padding:70px 0 40px;background:rgba(3,5,10,.65)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px;margin-bottom:52px}
.foot-grid h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:16px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px}
.foot-grid a{font-size:.88rem;color:var(--ink-dim);transition:color .25s}
.foot-grid a:hover{color:var(--blue)}
.foot-brand p{color:var(--ink-dim);font-size:.88rem;margin:16px 0;max-width:280px}
.legal{border-top:1px solid rgba(255,255,255,.07);padding-top:32px;color:var(--ink-faint);font-size:.76rem;line-height:1.7}
.legal p{margin-bottom:14px}
.legal strong{color:var(--ink-dim)}
.legal a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px;transition:color .25s}
.legal a:hover{color:var(--blue)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

/* ---------- mobile drawer ---------- */
/* fixed clipping shell stops the off-screen panel from making the page swipeable sideways */
.drawer-shell{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none}
.drawer{
  position:absolute;inset:0;pointer-events:auto;
  width:100%;height:100dvh;border-radius:0;
  display:flex;flex-direction:column;
  padding:16px 22px calc(22px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 130% 60% at 50% -10%, rgba(11,46,102,.5) 0%, rgba(4,7,16,0) 60%),
    rgba(4,7,16,.93);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  transform:translateX(100%);visibility:hidden;
  transition:transform .38s cubic-bezier(.32,.72,.28,1),visibility .38s;
}
.drawer.open{transform:none;visibility:visible}
@media(min-width:1261px){.drawer-shell{display:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.drawer-close{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--stroke);color:var(--ink);font-size:1rem;line-height:1;
}
.drawer-links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow-y:auto;padding:18px 0}
.drawer-links a{
  display:block;padding:14px 12px;border-radius:16px;
  font-family:var(--disp);font-weight:400;font-size:1.18rem;letter-spacing:.02em;color:var(--ink);
}
.drawer-links a:hover,.drawer-links a:focus-visible{background:rgba(120,170,255,.09)}
.drawer-foot{display:flex;flex-direction:column;gap:12px}
.drawer-foot .btn{width:100%}

/* ---------- responsive ---------- */
/* nav: tighten on mid-size screens, hand over to the menu drawer before the links run out of room */
@media(max-width:1260px){
  .nav-links{display:none}
  .menu-toggle{display:block}
}
@media(max-width:1024px){
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{
    display:flex;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    gap:16px;margin:52px -24px 0;padding:4px 24px 18px;
    scroll-padding:0 24px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .blog-grid::-webkit-scrollbar{display:none}
  .post{flex:0 0 min(78vw,340px);scroll-snap-align:start}
  .acct-row{grid-template-columns:repeat(2,1fr)}
  .mkt-grid{grid-template-columns:repeat(2,1fr)}
  .mkt,.mkt:nth-child(4),.mkt:nth-child(5){grid-column:span 1}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:span 3}
}
@media(max-width:880px){
  .nav-links,.nav-cta .btn-primary{display:none}
  .menu-toggle{display:block}
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero-visual{height:420px;order:-1}
  .copy-panel{grid-template-columns:1fr;padding:44px 30px}
  .copy-visual{height:300px}
  .plat{grid-template-columns:1fr;padding:36px 32px}
  .plat .dl-row{grid-column:auto;grid-row:auto;margin-top:26px}
}
@media(max-width:640px){
  section{padding:78px 0}
  .why-grid,.acct-row,.mkt-grid,.plat-grid{grid-template-columns:1fr}
  .hero{padding-top:120px;min-height:0}
  .hero-grid{gap:10px}
  .hero h1{margin-bottom:12px}
  .hero .lede{margin-bottom:20px;font-size:.98rem}
  .hero-stats{display:grid;grid-template-columns:repeat(2,1fr)}
  .hero-stats .stat{border-right:0;margin-right:0;padding:14px 20px 14px 0}
  .hero-stats .stat:nth-child(odd){border-right:1px solid var(--stroke)}
  .hero-stats .stat:nth-child(even){padding-left:20px}
  .hero-stats .stat:nth-child(-n+2){border-bottom:1px solid var(--stroke)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .foot-brand{grid-column:span 2}
  .glassx{width:min(225px,70vw)}
  /* keep the price chips off the corners of the mark on small screens */
  .chip{font-size:.68rem;padding:7px 11px;border-radius:13px}
  .hero-visual .chip:nth-of-type(3){top:-9%!important;left:0!important}
  .hero-visual .chip:nth-of-type(4){top:31%!important;right:-1%!important}
  .hero-visual .chip:nth-of-type(5){bottom:5%!important;left:-1%!important}
  .hero-visual .chip:nth-of-type(6){bottom:-9%!important;right:7%!important}
  .hero-visual{height:235px;margin-bottom:40px}
  .hero-actions{flex-direction:column;align-items:stretch;gap:14px}
  .hero-actions .btn-primary{width:100%}
  .hero-actions .btn-ghost{
    align-self:center;background:none;border:0;box-shadow:none;
    padding:6px 4px;gap:7px;color:var(--ink-dim);
    text-decoration:underline;text-underline-offset:5px;
    text-decoration-color:rgba(120,170,255,.5);
  }
  .hero-actions .btn-ghost::after{content:"→"}
  .hero-actions .btn-ghost:hover{background:none;color:var(--ink)}
  .acct-foot .btn,.copy-panel .btn,.final .btn,.blog-foot .btn{width:100%}
}
@media(max-width:480px){
  nav{padding:10px 14px;gap:12px}
  .logo{gap:9px}
  .logo-mark{width:38px;height:31px}
  .logo-word{width:98px}
  .nav-cta .btn{padding:9px 16px}
}
@media(max-width:350px){nav .logo-word{display:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- text links in intros + current page ---------- */
.lede a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(120,170,255,.5);transition:color .25s}
.lede a:hover{color:var(--blue)}
.nav-links a[aria-current="page"]{color:var(--ink);background:rgba(120,170,255,.09)}
.drawer-links a[aria-current="page"]{color:#8FC2FF}

/* ---------- contact page ---------- */
.page-hero{position:relative;padding:190px 0 30px;overflow:hidden}
.page-hero h1{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.14;letter-spacing:.005em;
  margin-bottom:22px;text-transform:uppercase;
}
.contact{padding-top:40px}
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:start}
.contact-card{padding:40px}
.contact-card h2{font-size:1.2rem;margin-bottom:26px}
.details > div{display:grid;grid-template-columns:190px 1fr;gap:20px;padding:16px 0;border-top:1px solid rgba(255,255,255,.07)}
.details > div:first-child{border-top:0;padding-top:0}
.details > div:last-child{padding-bottom:0}
.details dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);padding-top:4px}
.details dd{font-size:.95rem}
.details dd a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(120,170,255,.5);transition:color .25s}
.details dd a:hover{color:var(--blue)}
.contact-email h2{margin-bottom:10px}
.contact-email p{color:var(--ink-dim);font-size:.92rem;margin-bottom:22px}
.contact-mail{display:block;font-family:var(--mono);font-size:.95rem;color:#8FC2FF;margin-bottom:26px;overflow-wrap:anywhere;transition:color .25s}
.contact-mail:hover{color:var(--ink)}
.contact-email .btn{width:100%}
@media(max-width:880px){
  .contact-grid{grid-template-columns:1fr}
  .page-hero{padding-top:150px}
}
@media(max-width:640px){
  .page-hero{padding-top:130px}
  .contact-card{padding:30px 24px}
  .details > div{grid-template-columns:1fr;gap:4px;padding:14px 0}
}