/* Obsidian: the institutional one, and the default every panel falls back to.

   The brief was "expensive, technologically advanced, trustworthy", and the
   reference points are a private bank and a trading terminal rather than a
   crypto landing page. So: low chroma, high precision. Almost no colour except
   the operator's accent and the two semantic greens and reds a market needs.
   Depth comes from layered surfaces and a machined edge, not from gradients
   sprayed across a hero.

   The premium layer in base.css supplies the type scale, the spacing beat, the
   elevation ramp and the atmospheric primitives. This file is the palette, the
   materials and the few places Obsidian wants to be louder than the skeleton.
*/
:root{
  /* Eight steps of near black, cool rather than neutral. Eight, because a
     surface, the thing on it and the thing on THAT all need to be separable
     without a single visible border. */
  --bg:#07070b;        /* the page */
  --bg1:#0a0a11;       /* a section that wants to sit back */
  --bg2:#0d0d16;       /* a card */
  --bg3:#12121d;       /* a control on a card */
  --bg4:#181824;       /* a control, hovered */
  --sunk:#05050a;      /* an input: cut into the surface, not raised off it */
  --ln:#1d1d2b;        /* hairline */
  --ln2:#2a2a3c;       /* a border you are meant to notice */
  --tx:#f4f4f8;
  --mu:#9b9bb0;        /* secondary */
  --fa:#64647a;        /* tertiary, placeholders, disabled */
  --ok:#3ddc97; --wa:#fbbf24; --no:#ff6b81;

  /* what the ambient fields in base.css paint with */
  --atmo-1:color-mix(in srgb,var(--a) 16%,transparent);
  --atmo-2:rgba(70,80,160,.13);
  --atmo-3:color-mix(in srgb,var(--a) 9%,transparent);
  --grid-ln:rgba(255,255,255,.032);
}

body{background:var(--bg);color:var(--tx)}
a{color:var(--a-soft)}
a:hover{color:var(--tx)}
::selection{background:var(--a);color:var(--a-ink)}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:8px}
/* the page itself sits on a very slow ambient wash */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% -5%,color-mix(in srgb,var(--a) 13%,transparent),transparent 70%),
    radial-gradient(45% 35% at 95% 8%,rgba(60,70,150,.1),transparent 72%),
    var(--bg)}

/* ---- header -------------------------------------------------------------- */
.p-head{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--ln)}
.p-brand{color:var(--tx)}
.p-logo{background:linear-gradient(140deg,var(--a-soft),var(--a));color:var(--a-ink);
  box-shadow:0 6px 18px -8px var(--a),inset 0 1px 0 rgba(255,255,255,.3)}
.p-nav a{color:var(--mu)}
.p-nav a:hover{color:var(--tx);background:rgba(255,255,255,.045)}
.p-nav a.on{color:var(--tx);background:rgba(255,255,255,.07);box-shadow:var(--edge)}
.p-cta,.p-nav a.p-nav-cta{background:linear-gradient(140deg,var(--a-soft),var(--a));color:var(--a-ink);
  box-shadow:0 10px 24px -12px var(--a),inset 0 1px 0 rgba(255,255,255,.26)}
.p-lang>summary{color:var(--mu)}
.p-lang>summary:hover,.p-lang[open]>summary{color:var(--tx);background:rgba(255,255,255,.055)}
.p-lang-pop{background:var(--bg2);border-color:var(--ln2);box-shadow:var(--e3)}
.p-lang-pop a{color:var(--mu)}
.p-lang-pop a:hover{background:rgba(255,255,255,.055);color:var(--tx)}
.p-lang-pop a.on{color:var(--a-soft)}
.p-burger{border-color:var(--ln2);color:var(--tx)}
@media(max-width:900px){.p-nav{background:var(--bg1);border-color:var(--ln);box-shadow:var(--e3)}}

/* ---- hero ---------------------------------------------------------------- */
.x-wrap{position:relative;isolation:isolate;overflow:hidden;
  border-bottom:1px solid var(--ln)}
.x-wrap > .wrap{position:relative;z-index:2}
/* the field behind the hero: a wide low wash, a surveyor's grid, and grain */
.x-wrap::before{content:'';position:absolute;inset:-20% -10% auto;height:150%;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 48% at 72% 12%,color-mix(in srgb,var(--a) 22%,transparent),transparent 70%),
    radial-gradient(40% 44% at 20% 0%,rgba(70,86,180,.16),transparent 72%),
    radial-gradient(70% 50% at 50% 104%,color-mix(in srgb,var(--a) 10%,transparent),transparent 74%);
  animation:drift 30s ease-in-out infinite}
.x-wrap::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--grid-ln) 1px,transparent 1px),linear-gradient(90deg,var(--grid-ln) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(72% 66% at 50% 0,#000,transparent 76%);
  mask-image:radial-gradient(72% 66% at 50% 0,#000,transparent 76%)}

.x-copy h1{letter-spacing:-.04em;max-width:17ch}
.x-copy .lede{color:var(--mu);max-width:48ch}
.x-copy .x-claims{color:var(--a-soft);opacity:.95}
.x-badge{border-color:var(--a-line);color:var(--a-soft);background:color-mix(in srgb,var(--a) 10%,transparent);
  box-shadow:var(--edge)}

/* the three numbers under the headline, as one machined strip */
.x-stats{border:1px solid var(--ln);background:color-mix(in srgb,var(--bg2) 72%,transparent);
  backdrop-filter:blur(8px);box-shadow:var(--e2),var(--edge);border-radius:16px}
.x-stats div{border-right:1px solid var(--ln)}
.x-stats dt{color:var(--tx)}
.x-stats dd{color:var(--fa)}

/* ---- the exchange box: the one jewel object on the page ------------------ */
.x-box{background:linear-gradient(180deg,var(--bg2),var(--bg1));border:1px solid var(--ln2);
  border-radius:22px;box-shadow:var(--e4),var(--edge);position:relative}
/* light catching the top edge, tinted by the operator's accent */
.x-box::before{content:'';position:absolute;left:14%;right:14%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--a),transparent);opacity:.6}
.x-toggle{background:var(--sunk);border:1px solid var(--ln);border-radius:12px;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.x-toggle button{color:var(--mu);border-radius:9px}
.x-toggle button:hover{color:var(--tx)}
.x-toggle button[aria-pressed=true]{background:var(--bg3);color:var(--tx);box-shadow:var(--e1),var(--edge)}
.x-leg{background:var(--sunk);border:1px solid var(--ln);box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.x-leg:focus-within{border-color:var(--a);box-shadow:inset 0 1px 3px rgba(0,0,0,.45),0 0 0 3px var(--a-glow)}
.x-leg label{color:var(--fa)}
.x-amt{color:var(--tx);letter-spacing:-.025em}
.x-amt::placeholder{color:var(--fa)}
.x-usd{color:var(--fa)}
.x-pick{background:var(--bg3);color:var(--tx);box-shadow:var(--e1),var(--edge)}
.x-pick:hover{background:var(--bg4)}
.x-pick .net{color:var(--fa)}
.x-flip button{background:var(--bg3);border-color:var(--ln2);color:var(--a-soft);box-shadow:var(--e2),var(--edge)}
.x-flip button:hover{border-color:var(--a);color:var(--tx)}
.x-rate{color:var(--mu)}
.x-field label{color:var(--tx)}
.x-field input{background:var(--sunk);border-color:var(--ln);color:var(--tx);box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.x-field input::placeholder{color:var(--fa)}
.x-field input:focus{border-color:var(--a);box-shadow:inset 0 1px 3px rgba(0,0,0,.45),0 0 0 3px var(--a-glow)}
.x-hint{color:var(--fa)}
.x-go{background:linear-gradient(140deg,var(--a-soft),var(--a));color:var(--a-ink);
  box-shadow:0 16px 38px -16px var(--a),inset 0 1px 0 rgba(255,255,255,.28);letter-spacing:.005em}
.x-go:hover{filter:brightness(1.07)}
.x-note{color:var(--fa)}
.x-err{background:rgba(255,107,129,.09);border-color:rgba(255,107,129,.34);color:#ffc9d1}
.s1-promo{background:var(--bg3);box-shadow:inset 0 0 0 1px var(--ln2),var(--e1)}
.s1-promo-ico{background:color-mix(in srgb,var(--a) 14%,transparent);color:var(--a-soft)}
.s1-promo-tx b{color:var(--tx)} .s1-promo-tx em{color:var(--mu)} .s1-promo-go{color:var(--fa)}

/* ---- coin picker --------------------------------------------------------- */
.cp-back{background:rgba(3,3,7,.72);backdrop-filter:blur(6px)}
.cp-box{background:var(--bg2);border:1px solid var(--ln2);box-shadow:var(--e4)}
.cp-search{border-color:var(--ln)}
.cp-search input{background:var(--sunk);border-color:var(--ln);color:var(--tx)}
.cp-search input:focus{border-color:var(--a);outline:none}
.cp-item{color:var(--tx)}
.cp-item:hover{background:var(--bg3)}
.cp-item span{color:var(--mu)}

/* ---- sections and surfaces ----------------------------------------------- */
.sec-h{color:var(--tx)}
.sec-lede,.muted{color:var(--mu)}
.eyebrow{color:var(--a-soft)}
.card{background:linear-gradient(180deg,var(--bg2),var(--bg1));border:1px solid var(--ln)}
.card:hover{border-color:var(--ln2)}
.sec-alt{background:var(--bg1);border-block:1px solid var(--ln)}
.statrow{background:var(--ln)}
.stat{background:linear-gradient(180deg,var(--bg2),var(--bg1))}
.stat-l{color:var(--fa)} .stat-v{color:var(--tx)} .stat-s{color:var(--mu)}
.kv{border-color:var(--ln);color:var(--mu)}
.kv b{color:var(--tx)}
.addr{background:var(--sunk);border-color:var(--ln);color:var(--tx);box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.pill{border-color:var(--ln2);color:var(--mu);background:var(--bg3)}
.steps div{background:var(--bg3)}
.steps div.on{background:linear-gradient(90deg,var(--a-soft),var(--a))}

.btn{box-shadow:var(--e1),var(--edge)}
.btn-primary,.btn-go{background:linear-gradient(140deg,var(--a-soft),var(--a));color:var(--a-ink);border-color:transparent;
  box-shadow:0 14px 32px -16px var(--a),inset 0 1px 0 rgba(255,255,255,.26)}
.btn-line{background:var(--bg3);border-color:var(--ln2);color:var(--tx)}
.btn-line:hover{background:var(--bg4);border-color:var(--a-line)}

/* how it works */
.steps-rail li::after{background:linear-gradient(90deg,var(--ln2),transparent)}
.step-n{background:var(--bg3);border-color:var(--ln2);color:var(--a-soft);box-shadow:var(--e1),var(--edge)}
.steps-rail p{color:var(--mu)}

/* the promises */
.why-ico{background:color-mix(in srgb,var(--a) 11%,transparent);border-color:var(--a-line);color:var(--a-soft);
  box-shadow:var(--edge)}
.why-card h3{color:var(--tx)}

/* coins */
.coin-chip{background:var(--bg2);border-color:var(--ln);color:var(--tx);box-shadow:var(--e1),var(--edge)}
.coin-chip:hover{background:var(--bg3);border-color:var(--ln2)}
.coin-chip em{color:var(--fa)}

/* questions */
.faq details{border-color:var(--ln)}
.faq summary{color:var(--tx)}
.faq summary:hover{color:var(--a-soft)}
.faq p{color:var(--mu)}
.faq-x{color:var(--a-soft);opacity:.8}

/* the closing band */
.cta-band{background:linear-gradient(135deg,var(--bg2),var(--bg1) 55%,color-mix(in srgb,var(--a) 14%,var(--bg1)));
  border:1px solid var(--ln2);box-shadow:var(--e3),var(--edge);position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 88% 10%,color-mix(in srgb,var(--a) 20%,transparent),transparent 70%)}
.cta-band > *{position:relative}
.cta-band p{color:var(--mu)}

/* ---- the market ---------------------------------------------------------- */
.mk-live{color:var(--ok)}
.mk th{color:var(--fa);border-bottom-color:var(--ln)}
.mk td{border-bottom-color:var(--ln);color:var(--tx)}
.mk tbody tr{transition:background .18s var(--ease)}
.mk tbody tr:hover td{background:rgba(255,255,255,.028)}
.mk-asset b{color:var(--tx)}
.mk-asset em{color:var(--fa)}
.mk-card{background:linear-gradient(180deg,var(--bg2),var(--bg1));border-color:var(--ln);box-shadow:var(--e1),var(--edge)}
.mk-card:hover{border-color:var(--ln2)}
.mk-card-l{color:var(--fa)}
.mk-go{background:var(--bg3);border-color:var(--ln2);color:var(--tx)}
.mk-go:hover{background:var(--a);border-color:var(--a);color:var(--a-ink)}
.mk-find{background:var(--sunk);border-color:var(--ln);color:var(--tx);box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.mk-find:focus{border-color:var(--a)}
.mk-count,.mk-empty{color:var(--fa)}
.up{color:var(--ok)} .dn{color:var(--no)}

/* the live strip */
.p-ticker{background:var(--bg1);border-color:var(--ln)}
.p-tick{border-right-color:var(--ln);color:var(--mu)}
.p-tick b{color:var(--tx)}
.p-tick .px{color:var(--tx)}

/* ---- order pages --------------------------------------------------------- */
.ord-amt{color:var(--tx)}
table th{border-bottom-color:var(--ln);color:var(--fa)}
table td{border-bottom-color:var(--ln)}

/* ---- footer -------------------------------------------------------------- */
.p-foot{background:var(--bg1);border-top:1px solid var(--ln);color:var(--mu)}
.p-foot strong{color:var(--tx)}
.p-foot a{color:var(--mu)}
.p-foot a:hover{color:var(--tx)}
.p-foot select{border-color:var(--ln2);color:var(--mu);background:var(--bg2)}

/* --- footer, rebuilt 2026-10-30 --- */
.p-foot{background:var(--bg1)}
.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);background:var(--bg2)}

/* --- liveness tint --- */
:root{--spark:rgba(190,195,255,.5);--sweep:rgba(255,255,255,.07)}
:root{--fx:rgba(170,178,255,.55)}