/* Neon: loud, crypto native. Heavy gradients, glowing edges, high contrast.
   Built to convert a trader who likes the look rather than to look restrained. */
:root{
  --bg:#070312; --bg2:#0f0824; --bg3:#180d33;
  --ln:#2b1a52; --ln2:#3d2470;
  --tx:#f4f0ff; --mu:#a394c8; --fa:#7566a0;
  --ok:#2ee6a8; --wa:#ffc53d; --no:#ff5c7a;
  --cy:#22d3ee;
}
body{background:
  radial-gradient(1100px 620px at 82% -12%, rgba(124,58,237,.30), transparent 62%),
  radial-gradient(900px 560px at -8% 10%, rgba(34,211,238,.14), transparent 60%),
  var(--bg);
  background-attachment:fixed;color:var(--tx)}
a{color:var(--cy)}
h1,h2,h3{letter-spacing:-.03em}
.p-head{background:rgba(7,3,18,.74);backdrop-filter:blur(16px);border-bottom:1px solid var(--ln)}
.p-brand{color:var(--tx)}
.p-logo{background:linear-gradient(135deg,var(--cy),var(--a));color:#06021a;
  box-shadow:0 0 18px var(--a-glow),0 0 30px rgba(34,211,238,.25)}
.p-nav a{color:var(--mu)}
.p-nav a:hover{color:var(--tx);text-shadow:0 0 14px var(--a)}
.p-burger{border-color:var(--ln2);color:var(--tx)}
@media(max-width:620px){.p-nav{background:var(--bg2);border-color:var(--ln)}.p-nav a{border-bottom:1px solid var(--ln)}}

.x-copy h1{text-shadow:0 0 46px var(--a-glow)}
.x-copy .pill{border-color:var(--cy);color:var(--cy);background:rgba(34,211,238,.1);
  box-shadow:0 0 18px rgba(34,211,238,.22);margin-bottom:1.1rem;letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}
.x-copy .lede{color:var(--mu);font-size:1.04rem;max-width:46ch}

.x-box{background:linear-gradient(165deg,rgba(24,13,51,.95),rgba(15,8,36,.97));
  border:1px solid var(--ln2);border-radius:18px;
  box-shadow:0 0 0 1px rgba(124,58,237,.14),0 0 60px -14px var(--a),0 26px 70px -30px #000;position:relative}
.x-box::before{content:'';position:absolute;inset:0;border-radius:18px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,var(--a),transparent 42%,var(--cy));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6}
.x-toggle{background:rgba(7,3,18,.7);border:1px solid var(--ln)}
.x-toggle button{color:var(--mu)}
.x-toggle button[aria-pressed=true]{background:linear-gradient(135deg,var(--a),var(--a-deep));color:#fff;box-shadow:0 0 16px var(--a-glow)}
.x-leg{background:rgba(7,3,18,.72);border:1px solid var(--ln)}
.x-leg label{color:var(--fa);letter-spacing:.11em}
.x-amt{color:var(--tx)}
.x-amt::placeholder{color:var(--fa)}
.x-pick{background:var(--bg3);color:var(--tx);border:1px solid var(--ln2)!important}
.x-pick:hover{border-color:var(--cy)!important;box-shadow:0 0 16px rgba(34,211,238,.25)}
.x-flip button{background:var(--bg3);border-color:var(--ln2);color:var(--cy)}
.x-flip button:hover{box-shadow:0 0 18px rgba(34,211,238,.35);border-color:var(--cy)}
.x-rate{color:var(--mu)}
.x-field input{background:rgba(7,3,18,.7);border-color:var(--ln2);color:var(--tx);border-radius:10px}
.x-field input:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.x-hint{color:var(--fa)}
.x-go{background:linear-gradient(135deg,var(--cy),var(--a) 60%,var(--a-deep));color:#fff;
  box-shadow:0 0 28px -4px var(--a),0 0 60px -20px var(--cy);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.x-go:hover{filter:brightness(1.12) saturate(1.1)}
.x-note{color:var(--fa)}
.x-err{background:rgba(255,92,122,.1);border-color:rgba(255,92,122,.42);color:#ffbac6;border-radius:10px}

.cp-box{background:linear-gradient(170deg,var(--bg3),var(--bg2));border:1px solid var(--ln2);
  box-shadow:0 0 60px -16px var(--a)}
.cp-search{border-color:var(--ln)}
.cp-search input{background:rgba(7,3,18,.8);border-color:var(--ln2);color:var(--tx);border-radius:10px}
.cp-item{color:var(--tx)}
.cp-item:hover{background:var(--bg3);box-shadow:inset 0 0 0 1px var(--ln2)}
.cp-item span{color:var(--mu)}

.card{background:linear-gradient(165deg,rgba(24,13,51,.6),rgba(15,8,36,.75));border:1px solid var(--ln);border-radius:16px}
.sec-alt{background:linear-gradient(180deg,transparent,rgba(124,58,237,.07),transparent)}
.kv{border-color:var(--ln);color:var(--mu)}
.kv b{color:var(--tx)}
.addr{background:rgba(7,3,18,.8);border-color:var(--ln2);color:var(--cy)}
.btn-primary{background:linear-gradient(135deg,var(--cy),var(--a));color:#fff;box-shadow:0 0 22px -6px var(--a)}
.btn-ghost{background:var(--bg3);border-color:var(--ln2);color:var(--tx)}
.btn-ghost:hover{border-color:var(--cy)}
.pill{border-color:var(--ln2);color:var(--mu)}
.pill-ok{color:#5df0c4;border-color:rgba(46,230,168,.45);background:rgba(46,230,168,.1);box-shadow:0 0 14px rgba(46,230,168,.18)}
.pill-wa{color:#ffd978;border-color:rgba(255,197,61,.45);background:rgba(255,197,61,.1)}
.pill-no{color:#ff9aad;border-color:rgba(255,92,122,.45);background:rgba(255,92,122,.1)}
.pill-a{color:var(--cy);border-color:var(--cy);background:rgba(34,211,238,.1)}
.steps div{background:var(--ln2)}
.steps div.on{background:linear-gradient(90deg,var(--cy),var(--a));box-shadow:0 0 12px var(--a)}
.steps div.done{background:var(--ok);box-shadow:0 0 10px rgba(46,230,168,.4)}
th{color:var(--fa);border-color:var(--ln)}
td{border-color:var(--ln)}
.muted{color:var(--mu)}
.faint{color:var(--fa)}
.p-foot{background:rgba(7,3,18,.6);border-top:1px solid var(--ln);color:var(--fa)}
.p-foot a{color:var(--mu)}

/* live price band */
.p-ticker{background:linear-gradient(90deg,var(--bg2),var(--bg3),var(--bg2));border-color:var(--ln2)}
.p-tick{border-color:var(--ln);color:var(--tx)}
.p-tick .px{color:var(--cy)}
.p-tick .up{color:var(--ok);text-shadow:0 0 10px rgba(46,230,168,.45)}
.p-tick .dn{color:var(--no);text-shadow:0 0 10px rgba(255,92,122,.45)}
.p-tick .flat{color:var(--fa)}
.p-ticker-row{animation-duration:46s}

/* motion: this theme is the loud one, so it is allowed to move */
body{background-size:160% 160%;animation:nx-sky 26s ease-in-out infinite alternate}
@keyframes nx-sky{from{background-position:0% 0%}to{background-position:100% 60%}}
.x-go{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.x-go::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:nx-sheen 3.6s ease-in-out infinite}
@keyframes nx-sheen{0%,70%{left:-60%}100%{left:130%}}
.x-go:hover{transform:translateY(-1px)}
.p-logo{animation:nx-pulse 4s ease-in-out infinite}
@keyframes nx-pulse{0%,100%{box-shadow:0 0 0 0 var(--a-glow)}50%{box-shadow:0 0 22px 2px var(--a-glow)}}

/* ---------------------------------------------------------------------------
   Neon is the loud one. Glass over an aurora, gradient hairlines, light that
   moves. Everything here is additive glow, so it stays legible on the dark
   field underneath rather than turning into mush.
   --------------------------------------------------------------------------- */
/* The aurora is positioned against the hero, which clips it: without this
   position the absolute box resolves against the page and spills a sideways
   scrollbar onto every width. */
.x-wrap{position:relative}
.x-wrap::after{content:'';position:absolute;inset:auto 0 -40% 0;height:420px;pointer-events:none;z-index:0;
  background:
    radial-gradient(closest-side,rgba(56,189,248,.16),transparent 70%) 18% 50%/48% 100% no-repeat,
    radial-gradient(closest-side,var(--a-glow),transparent 70%) 76% 40%/52% 100% no-repeat;
  filter:blur(18px);animation:ne-aurora 18s ease-in-out infinite alternate}
@keyframes ne-aurora{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-6%,0) scale(1.08)}}

.x-stats dt{background:linear-gradient(135deg,#7dd3fc,var(--a-soft) 55%,#e879f9);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.x-stats dd{color:var(--mu)}

.sec-h{color:var(--tx)}
.sec-lede{color:var(--mu)}
.sec-link{color:#7dd3fc}
.sec-alt{background:linear-gradient(180deg,rgba(125,211,252,.05),transparent 60%)}
.sec-faq,.sec-cta{position:relative}

/* one glass recipe, used by every block that holds content */
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.1);backdrop-filter:blur(8px);color:var(--tx)}

.steps-rail li::after{background:linear-gradient(90deg,rgba(125,211,252,.7),rgba(232,121,249,.25),transparent)}
.step-n{color:#7dd3fc;box-shadow:0 0 18px -6px rgba(125,211,252,.8),inset 0 0 12px -6px rgba(125,211,252,.6)}
.steps-rail li:hover .step-n{color:#fff;box-shadow:0 0 26px -6px var(--a)}
.steps-rail p{color:var(--mu)}


.why-card{overflow:hidden}
.why-card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(125,211,252,.8),rgba(232,121,249,.6),transparent)}

.coin-chip{transition:transform .16s ease,box-shadow .16s ease}
.coin-chip:hover{transform:translateY(-2px);box-shadow:0 0 20px -8px var(--a)}
.coin-chip em{color:var(--fa)}

.faq details{border-color:rgba(255,255,255,.1)}
.faq summary{color:var(--tx)}
.faq summary:hover{color:#7dd3fc}
.faq details[open] summary{color:#7dd3fc}
.faq p{color:var(--mu)}

.cta-band{position:relative;overflow:hidden;box-shadow:0 30px 80px -40px var(--a)}
.cta-band::before{content:'';position:absolute;inset:-60% -10% auto auto;width:460px;height:460px;pointer-events:none;
  background:radial-gradient(closest-side,var(--a-glow),transparent 70%)}
.cta-band>*{position:relative}
.btn-go{background:linear-gradient(135deg,#38bdf8,var(--a) 55%,#e879f9);color:#06111f;font-weight:700;
  box-shadow:0 14px 34px -14px var(--a);transition:transform .18s ease,box-shadow .18s ease}
.btn-go:hover{transform:translateY(-2px);box-shadow:0 22px 46px -16px var(--a)}
.why-ico{color:#7dd3fc;border-color:rgba(125,211,252,.35);background:rgba(125,211,252,.07);box-shadow:0 0 22px -10px rgba(125,211,252,.9)}
.why-card:hover .why-ico{color:#fff;box-shadow:0 0 26px -8px var(--a)}

/* Neon below the fold: the section headings carry the gradient, the alternate
   band carries a faint grid, and the glass gets a visible lit edge so it does
   not read as the same dark card every other theme uses. */
.sec-alt{background:
  linear-gradient(180deg,rgba(125,211,252,.06),transparent 60%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 72px),
  repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 72px)}
.sec-h{background:linear-gradient(100deg,#fff,#bae6fd 40%,#f0abfc);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.9rem}
  padding:1px;background:linear-gradient(140deg,rgba(125,211,252,.55),transparent 42%,rgba(232,121,249,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.75}
.coin-chip{border-color:rgba(255,255,255,.12)}
.coin-chip:hover{border-color:rgba(125,211,252,.5)}
.faq summary::after{display:none}
/* market table: a trading screen */
.mk-live{color:#4ade80}
.mk-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.1);backdrop-filter:blur(8px);color:var(--tx)}
.mk-card:hover{border-color:rgba(125,211,252,.45);box-shadow:0 14px 34px -22px rgba(125,211,252,.9)}
.mk-find{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--tx)}
.mk-find:focus{border-color:rgba(125,211,252,.6);box-shadow:0 0 0 3px rgba(125,211,252,.12)}
.mk-find::placeholder{color:var(--fa)}
.mk th{color:#7dd3fc;border-color:rgba(125,211,252,.22)}
.mk td{border-color:rgba(255,255,255,.07);color:var(--tx)}
.mk tbody tr{transition:background .14s ease}
.mk tbody tr:hover{background:rgba(125,211,252,.06)}
.mk-asset{color:var(--tx)}
.mk-asset em{color:var(--fa)}
.mk .c-cap,.mk .c-vol{color:var(--mu)}
.mk .up{color:#4ade80;text-shadow:0 0 12px rgba(74,222,128,.4)}
.mk .down{color:#fb7185;text-shadow:0 0 12px rgba(251,113,133,.35)}
.mk .flat{color:var(--fa)}
.mk-spark.up{color:#4ade80;filter:drop-shadow(0 0 5px rgba(74,222,128,.55))}
.mk-spark.down{color:#fb7185;filter:drop-shadow(0 0 5px rgba(251,113,133,.5))}
.mk-go{background:rgba(125,211,252,.1);border-color:rgba(125,211,252,.35);color:#7dd3fc}
.mk-go:hover{background:rgba(125,211,252,.2);color:#fff}

/* ---------------------------------------------------------------------------
   Hero, second pass. Neon centres everything, the way the loud exchanges do:
   headline across the page, claim line under it, and the widget dead centre
   with the aurora burning behind it.
   --------------------------------------------------------------------------- */
.x-grid{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:1.6rem}
.x-copy{order:1;max-width:46rem}
.x-box{order:2;width:100%;max-width:520px}
.x-copy .x-claims{justify-content:center}
.x-copy .lede{margin-left:auto;margin-right:auto;max-width:52ch}
.x-stats{max-width:560px;margin-left:auto;margin-right:auto}
.x-points{justify-content:center}

.x-wrap{background:
  radial-gradient(900px 540px at 50% -5%,rgba(125,211,252,.14),transparent 62%),
  radial-gradient(760px 520px at 15% 20%,rgba(232,121,249,.1),transparent 60%),
  radial-gradient(700px 480px at 85% 30%,var(--a-glow),transparent 62%)}
.x-copy h1{font-size:clamp(2.3rem,6vw,4rem);letter-spacing:-.035em;
  background:linear-gradient(100deg,#fff 20%,#bae6fd 55%,#f0abfc);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.x-badge{border-color:rgba(125,211,252,.45);background:rgba(125,211,252,.08);color:#7dd3fc;
  box-shadow:0 0 24px -8px rgba(125,211,252,.7)}
.x-claims{color:#7dd3fc}
.x-claims span+span::before{color:rgba(125,211,252,.45)}
.x-stats{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.x-stats div{border-color:rgba(255,255,255,.08)}

.x-box{background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);
  box-shadow:0 40px 110px -45px rgba(125,211,252,.55),0 0 0 1px rgba(255,255,255,.03) inset}
.x-leg{background:rgba(8,12,24,.45);border-color:rgba(255,255,255,.08)}
.x-leg:focus-within{border-color:rgba(125,211,252,.5)}
.x-pick{background:rgba(255,255,255,.08)}
.x-pick:hover{background:rgba(125,211,252,.16)}
.x-usd{color:var(--fa)}
.x-flip button{background:rgba(10,14,28,.9);border-color:rgba(125,211,252,.35);color:#7dd3fc}
.x-go{box-shadow:0 18px 44px -18px var(--a)}
/* The hero is centred, the form inside it is not: a centred label over a left
   aligned number reads as a mistake, and the output amount was inheriting it. */
.x-box,.x-box *{text-align:start}
.x-go{text-align:center}
.x-note,.x-rate{text-align:start}

/* --- header: the language popover, the active link and the call to action --- */
.p-nav a.on{color:var(--a);background:rgba(255,255,255,.06)}
.p-lang>summary{color:var(--mu);border:1px solid transparent}
.p-lang>summary:hover{color:var(--tx);background:rgba(124,58,237,.18)}
.p-lang[open]>summary{color:var(--tx);background:rgba(124,58,237,.18);border-color:var(--ln2)}
.p-lang-pop{background:var(--bg2);border-color:var(--ln2)}
.p-lang-pop a{color:var(--mu)}
.p-lang-pop a:hover{background:rgba(124,58,237,.18);color:var(--tx)}
.p-lang-pop a.on{color:var(--a);font-weight:700}
.p-burger{border-color:var(--ln2);color:var(--tx)}
@media(max-width:900px){.p-nav{background:var(--bg2);border-color:var(--ln)}}

/* --- footer, rebuilt 2026-10-30 --- */
.foot-bar{border-top-color:var(--ln)}
.foot-col h2{color:var(--tx)}
.foot-live{color:var(--ok)}
.foot-lang select{border-color:var(--ln2)}

/* --- premium layer support, 2026-10-30 --- */
:root{
  --atmo-1:color-mix(in srgb,var(--a) 26%,transparent);
  --atmo-2:rgba(34,211,238,.16);
  --atmo-3:color-mix(in srgb,var(--a) 16%,transparent);
  --grid-ln:rgba(164,120,255,.06);
}
.eyebrow{color:var(--cy)}
.statrow{background:var(--ln)}
.stat{background:linear-gradient(180deg,var(--bg3),var(--bg2))}
.stat-l{color:var(--fa)} .stat-v{color:var(--tx)} .stat-s{color:var(--mu)}
.sec-intro .lede{color:var(--mu)}
.card-lift:hover{border-color:var(--a)}
.x-stats{background:rgba(24,13,51,.6);border:1px solid var(--ln);border-radius:16px}
.x-stats div{border-right:1px solid var(--ln)}
.x-stats dt{color:var(--tx)} .x-stats dd{color:var(--fa)}

/* --- liveness tint --- */
:root{--spark:rgba(140,230,255,.55);--sweep:rgba(34,211,238,.1)}
:root{--fx:rgba(34,211,238,.6)}