/* ────────────────────────────────────────────────────────────
   CENTRIX lander — gkay.dev design language.
   Deep charcoal · Geist/Geist Mono · green #34D399 primary ·
   ghost borders · data-dense · NO shadows, NO hover-transforms
   (border-brighten only) · live + terminal.
   ──────────────────────────────────────────────────────────── */
:root{
  --bg:#0D0E10; --bg0:#0A0B0D; --card:#131416; --el:#1A1B1E;
  --b1:rgba(255,255,255,.04); --b2:rgba(255,255,255,.07); --b3:rgba(255,255,255,.12);
  --t1:#F2F2F2; --t2:#C8C8C8; --t3:#9A9A9A; --t4:#8a8a8a; --t5:#5f636a;   /* --t4 bumped to clear WCAG-AA on charcoal (agy) */
  --g:#34D399; --r:#F87171; --y:#FBBF24; --bl:#60A5FA; --c:#67E8F9;
  --g-dim:rgba(52,211,153,.12); --y-dim:rgba(251,191,36,.12); --bl-dim:rgba(96,165,250,.12);
  --sans:"Geist","Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--t2);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden;
}
#bg{ position:fixed; inset:0; z-index:0; opacity:.5; pointer-events:none; }
.scan{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
.nav,main,.foot{ position:relative; z-index:2; }
.mark{ color:var(--g); font-family:var(--mono); font-weight:700; letter-spacing:-.04em; }

/* ── top nav (cx-nav) ─────────────────────────────────── */
.nav{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:6px 18px; padding:11px 22px;
  background:rgba(13,14,16,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--b1);
}
.nav-l{ display:flex; align-items:baseline; gap:9px; }
.nav-l .mark{ font-size:16px; }
.brand{ font-weight:700; font-size:14px; letter-spacing:.18em; color:var(--t1); }
.ver{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--t4); }
.nav-r{ display:flex; align-items:center; gap:12px; font-family:var(--mono); }
.tick{ display:inline-flex; align-items:baseline; gap:6px; font-size:11px; }
.tick .tk{ color:var(--t4); font-size:9.5px; letter-spacing:.1em; }
.tick b{ color:var(--t1); font-weight:500; }
.tick i{ font-style:normal; font-size:10px; color:var(--t4); }
.tick i.up{ color:var(--g); } .tick i.down{ color:var(--r); }
.navsep{ width:1px; height:13px; background:var(--b2); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--g); box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:pulse 2.6s ease-out infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(52,211,153,.45);} 70%{box-shadow:0 0 0 5px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }
.clock{ font-size:11px; letter-spacing:.04em; color:var(--t3); }

/* ── main ─────────────────────────────────────────────── */
main{ flex:1; width:100%; max-width:980px; margin:0 auto; padding:0 22px; }

/* terminal command line */
.cmd{ font-family:var(--mono); font-size:12px; color:var(--t3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pr{ color:var(--g); }
.flag{ color:var(--bl); }
.typed{ color:var(--t2); white-space:pre; }
.cur{ display:inline-block; width:7px; height:14px; background:var(--g); margin-left:1px; animation:blink 1.05s step-end infinite; vertical-align:-2px; }
@keyframes blink{ 0%,55%{opacity:1;} 56%,100%{opacity:0;} }

.intro{ padding:64px 0 30px; border-bottom:1px solid var(--b1); }
.intro h1{ margin:18px 0 0; font-size:clamp(30px,5.4vw,50px); font-weight:700; letter-spacing:-.01em; line-height:1.02; color:var(--t1); }
.intro .sub{ margin:14px 0 0; font-size:14px; color:var(--t3); max-width:50ch; line-height:1.55; }

/* ── modules ──────────────────────────────────────────── */
.mods{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:32px 0; }
.mod{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--b1); border-radius:3px;
  padding:16px 16px 14px; min-height:150px;
  transition:border-color .14s ease, background .14s ease;
}
.mod::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent,var(--g)); opacity:0; transition:opacity .14s ease; }
.mod:hover{ border-color:var(--b3); background:var(--el); }
.mod:hover::before{ opacity:.9; }
.mod[data-k="cx"]{ --accent:var(--g); }
.mod[data-k="lum"]{ --accent:var(--y); }
.mod[data-k="of"]{ --accent:var(--bl); }
.mod-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.glyph{ display:inline-flex; align-items:center; line-height:0; font-family:var(--mono); font-weight:700; font-size:15px; }
.g-cx{ color:var(--g); letter-spacing:-.05em; }
.g-lum{ color:var(--y); }
.g-of{ color:var(--bl); }
.state{ font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.12em; padding:3px 7px; border-radius:2px; border:1px solid transparent; }
.s-lock{ color:var(--t4); background:rgba(255,255,255,.03); border-color:var(--b2); }
.s-open{ color:var(--g); background:var(--g-dim); border-color:rgba(52,211,153,.3); }
.mod h2{ margin:0 0 5px; font-size:17px; font-weight:600; letter-spacing:.005em; color:var(--t1); }
.mod-d{ margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--t4); }
.mod-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--b1); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fnote{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t4); }
.req{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.03em; color:var(--g); text-decoration:none; transition:color .12s ease; }
.req:hover{ color:var(--t1); }
.mem{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--t4); text-decoration:none; transition:color .12s ease; }
.mem:hover{ color:var(--t2); }

/* ── request block ────────────────────────────────────── */
.req-block{ background:var(--card); border:1px solid var(--b1); border-radius:3px; padding:22px 20px; margin-bottom:46px; }
.req-block .cmd{ margin-bottom:18px; }
.req-form{ display:flex; flex-direction:column; gap:13px; }
.row{ display:grid; grid-template-columns:78px 1fr; align-items:center; gap:12px; }
.row label{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); }
.row input{
  width:100%; background:var(--bg0); border:1px solid var(--b2); border-radius:3px;
  padding:10px 12px; color:var(--t1); font-family:var(--mono); font-size:13px;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.row input::placeholder{ color:var(--t5); }
.row input:focus{ outline:none; border-color:var(--g); box-shadow:0 0 0 3px var(--g-dim); }
.actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-left:90px; }
#req-btn{
  appearance:none; cursor:pointer; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--g); background:var(--g-dim); border:1px solid rgba(52,211,153,.4); border-radius:3px; padding:9px 16px;
  transition:background .12s ease, color .12s ease;
}
#req-btn:hover{ background:rgba(52,211,153,.2); color:#d8fff0; }
#req-btn:disabled{ cursor:default; opacity:.5; }
.msg{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; }
.msg.ok{ color:var(--g); } .msg.error{ color:var(--r); }

/* ── footer ───────────────────────────────────────────── */
.foot{ display:flex; align-items:center; gap:12px; max-width:980px; width:100%; margin:0 auto; padding:18px 22px 26px; border-top:1px solid var(--b1); font-family:var(--mono); }
.foot .mark{ font-size:13px; }
.fl{ font-size:10px; letter-spacing:.06em; color:var(--t4); }
.fr{ margin-left:auto; font-size:10px; color:var(--t5); }

/* ── a11y + motion ────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--g); outline-offset:2px; border-radius:3px; }
/* ── entrance + micro-motion (shadcn-style) ───────────── */
.reveal{ animation:reveal .55s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d,0s); }
@keyframes reveal{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.tick b{ display:inline-block; }
.tick b.flash{ animation:tflash .55s ease-out; }
@keyframes tflash{ 0%{ transform:scale(1.14); filter:brightness(1.6); } 100%{ transform:scale(1); filter:none; } }
#req-btn:active{ transform:scale(.975); }
.mod:hover .glyph{ filter:brightness(1.3); }

@media (prefers-reduced-motion:reduce){
  .cur,.dot{ animation:none; } #bg{ display:none; } .scan{ display:none; }
  .mod,.req,.mem,.row input{ transition:none; }
  .reveal{ animation:none; } .tick b.flash{ animation:none; }
}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:820px){ .mods{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .mods{ grid-template-columns:1fr; }
  main,.nav,.foot{ padding-left:16px; padding-right:16px; }
  .intro{ padding:44px 0 26px; }
  .ver,#t-eth,#t-btc{ display:none; }   /* keep the mobile nav a tight single line: just mark · clock · dot */
  .row{ grid-template-columns:1fr; gap:6px; } .actions{ padding-left:0; }
}