/* ============================================================
   Orion Veyr, base layer
   Design tokens, reset, typography, buttons, utilities.
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#0A0A0A;
  --bg2:#111111;
  --bg3:#181818;
  --bg4:#222222;

  /* Text */
  --text:#F0EDE8;
  --t2:#C8C4BE;
  --t3:#8A8580;
  --t4:#555050;

  /* Accents */
  --orange:#E8772E;
  --orange-hi:#F08B47;
  --orange-dim:rgba(232,119,46,0.10);
  --orange-line:rgba(232,119,46,0.28);
  --gold:#C9A227;
  --gold-dim:rgba(201,162,39,0.10);
  /* "positive / verified" used to be green; the vault palette carries no green,
     so it is an amber-gold now. Name kept so existing rules keep working. */
  --green:#CFA23A;
  --green-dim:rgba(207,162,58,0.12);
  --red:#D6483B;
  --red-dim:rgba(214,72,59,0.12);
  --blue:#3E7FB5;
  --blue-dim:rgba(62,127,181,0.12);
  --violet:#9A78D8;

  /* Lines, hairline and metallic */
  --border:rgba(233,215,190,0.09);
  --border2:rgba(233,215,190,0.05);
  --border-hi:rgba(233,215,190,0.18);
  --grid:rgba(233,215,190,0.022);

  /* Type */
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Syne',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono','SFMono-Regular',Consolas,monospace;

  /* Geometry, hard machined edges */
  --radius:4px;
  --radius-sm:3px;
  --radius-xs:2px;
  --maxw:1280px;
  --gutter:clamp(20px,4vw,48px);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;
  background-position:center top;
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
  border-radius:2px;
}

::selection{background:rgba(232,119,46,0.28);color:#fff}

/* ---------- Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{max-width:820px}

.section{padding-block:clamp(56px,8vw,104px)}
.section--tight{padding-block:clamp(40px,5vw,64px)}
.section + .section{border-top:1px solid var(--border2)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--orange);color:#fff;
  padding:10px 18px;border-radius:0 0 var(--radius-sm) 0;
  font-weight:700;font-size:14px;
}
.skip-link:focus{left:0}

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:500;
}
.eyebrow::before{
  content:'';width:28px;height:1px;
  background:var(--orange-line);
}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{
  content:'';width:28px;height:1px;
  background:var(--orange-line);
}

.h1{
  font-family:var(--serif);
  font-size:clamp(30px,4.2vw,50px);
  font-weight:900;
  line-height:1.04;
  letter-spacing:-.02em;
}
.h2{
  font-family:var(--serif);
  font-size:clamp(23px,2.9vw,34px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.015em;
}
.h3{
  font-family:var(--serif);
  font-size:clamp(17px,1.7vw,20px);
  font-weight:700;
  line-height:1.25;
}
.h1 em,.h2 em,.h3 em{color:var(--orange);font-style:italic}

.lede{
  font-size:clamp(14.5px,1.4vw,17px);
  line-height:1.72;
  color:var(--t2);
  max-width:62ch;
}
.muted{color:var(--t3)}
.mono{font-family:var(--mono)}

.kicker{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--t3);
}

/* Section heading block */
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-head .h2{margin-block:14px 12px}
.sec-head--center{text-align:center}
.sec-head--center .lede{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);
  font-weight:500;
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:14px 26px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}

.btn--primary{background:var(--orange);color:#fff}
.btn--primary:hover{background:var(--orange-hi)}

.btn--ghost{
  border-color:var(--border-hi);
  color:var(--t2);
  background:rgba(255,255,255,0.02);
}
.btn--ghost:hover{border-color:var(--orange-line);color:var(--text)}

/* Bitcoin payment button, real Bitcoin brand orange so it reads as
   a distinct rail next to the store's --orange buy button. */
.btn--btc{background:#F7931A;color:#fff;border-color:#F7931A}
.btn--btc:hover{background:#FFA22E}
.btc-mark{width:18px;height:18px;flex:0 0 auto}

.btn--sm{padding:9px 16px;font-size:11px;letter-spacing:.1em}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Surfaces ---------- */
.panel{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.card:hover{border-color:var(--orange-line);background:var(--bg3)}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:2px;
  border:1px solid var(--border);
  color:var(--t3);
}
.tag--live{border-color:rgba(207,162,58,0.32);color:var(--green);background:var(--green-dim)}
.tag--soon{border-color:var(--orange-line);color:var(--orange);background:var(--orange-dim)}
.tag--hi{border-color:var(--orange-line);color:var(--orange)}
.tag-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}

/* ---------- Grids ---------- */
.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

@media(max-width:900px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
}

/* ---------- Utilities ---------- */
.center{text-align:center}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.stack-sm > * + *{margin-top:10px}
.stack > * + *{margin-top:18px}
.stack-lg > * + *{margin-top:32px}


/* ============================================================
   MOBILE BASELINE
   ============================================================ */
@media(max-width:600px){
  /* iOS Safari zooms the whole page when a focused field is under
     16px. Everything else can shrink, these cannot. */
  input,select,textarea{font-size:16px!important}

  .btn{padding:15px 22px;font-size:12.5px;min-height:46px}
  .btn--sm{padding:12px 16px;font-size:11.5px;min-height:44px}

  .h1{font-size:clamp(27px,7.4vw,34px);letter-spacing:-.015em}
  .h2{font-size:clamp(21px,5.6vw,26px)}
  .h3{font-size:17px}
  .lede{font-size:15px;line-height:1.68}

  .eyebrow{font-size:10.5px;letter-spacing:.16em}
  .eyebrow::before,.eyebrow--center::after{width:20px}
  .kicker{font-size:10.5px;letter-spacing:.14em}
  .tag{font-size:10px;padding:6px 12px}

  .section{padding-block:clamp(40px,9vw,56px)}
  .section--tight{padding-block:34px}
  .sec-head{margin-bottom:24px}

  .grid{gap:12px}
  .card{padding:18px}
  .stat-cell b{font-size:22px}
  .stat-cell span{font-size:9.5px}
}