/* ============================================================
   markovian.css, Markovian Protocol shared design system
   Extracted from index.html (the design source of truth).
   Values are kept identical to the landing page (blue/silver/amber,
   same easings and timings). Link this BEFORE any page-specific
   <style> so a page can still override locally.
   Signature hero-only showpieces (atom-orbit, marquee) are kept as
   OPT-IN classes at the bottom; they do nothing unless used.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────── */
:root {
  --mk-bg:#0d1117;          /* page background */
  --mk-bg-elev:#0a0f14;     /* recessed panels, strips */
  --mk-panel:#161b22;       /* raised code/cards */
  --mk-text:#c9d1d9;        /* body text */
  --mk-text-strong:#e6edf3; /* headings */
  --mk-muted:#8b949e;       /* secondary text */
  --mk-faint:#6e7681;       /* tertiary text */
  --mk-border:#21262d;      /* hairline borders */
  --mk-border-soft:#30363d; /* inputs, soft edges */
  --mk-gold:#d4a843;        /* COMMIT / amber accent */
  --mk-blue:#4a9eff;        /* RESOLVE / blue accent */
  --mk-green:#3fb950;       /* live / pass */
  --mk-green-bright:#00e676;/* zk / settle */
  --mk-green-border:#1a3d28;
  --mk-orange:#f7931a;      /* bitcoin */
  --mk-red:#f85149;         /* fail */
  --mk-ease:ease;
  --mk-mono:'SF Mono','Fira Code','Courier New',monospace;
}

/* ── Reset + base ──────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0d1117; color:#c9d1d9; font-family:'SF Mono','Fira Code','Courier New',monospace; font-size:13px; line-height:1.7; }
a { color:#c9d1d9; text-decoration:none; }

/* ── Ambient: custom scrollbar (scheme-matched) ────── */
html { scrollbar-width:thin; scrollbar-color:#21262d #0a0f14; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#0a0f14; }
::-webkit-scrollbar-thumb { background:#21262d; border-radius:5px; border:2px solid #0a0f14; }
::-webkit-scrollbar-thumb:hover { background:#30363d; }

/* ── Ambient: CRT scanline overlay ─────────────────── */
body::after { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.018) 2px,rgba(0,0,0,0.018) 4px); pointer-events:none; z-index:9999; }

/* ── Header / nav ──────────────────────────────────── */
header { border-bottom:1px solid #21262d; padding:16px 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; position:sticky; top:0; z-index:100; background:#0d1117; }
.logo { font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; background:linear-gradient(90deg,#d4a843 0%,#4a9eff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; }
.logo-sub { font-size:9px; letter-spacing:2px; color:#8b949e; -webkit-text-fill-color:#8b949e; }
nav { display:flex; gap:28px; align-items:center; }
nav a { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#8b949e; -webkit-text-fill-color:#8b949e; }
nav a:hover { color:#c9d1d9; -webkit-text-fill-color:#c9d1d9; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#22cc4a; box-shadow:0 0 6px rgba(42,180,42,.6); animation:pg 2s ease-in-out infinite; }

/* ── Sections (defaults; pages may override) ───────── */
.section { padding:64px 48px; border-bottom:1px solid #21262d; }
.section-label { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:#8b949e; -webkit-text-fill-color:#8b949e; margin-bottom:20px; }
.section h2 { font-size:22px; font-weight:700; color:#e6edf3; -webkit-text-fill-color:#e6edf3; margin-bottom:12px; letter-spacing:-0.5px; }
.section-lead { font-size:13px; color:#8b949e; -webkit-text-fill-color:#8b949e; line-height:1.8; max-width:640px; margin-bottom:40px; }

/* section icon hover (matches landing) */
svg[style*="margin:0 0 10px"] { transition:transform 0.2s ease; }
svg[style*="margin:0 0 10px"]:hover { transform:scale(1.2) rotate(8deg); }

/* ── Buttons ───────────────────────────────────────── */
.btn-p { padding:10px 26px; background:transparent; color:#d4a843; -webkit-text-fill-color:#d4a843; font-family:inherit; font-size:10px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border:1px solid #d4a843; display:inline-block; transition:box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-p:hover { background:#d4a843; color:#0d1117; -webkit-text-fill-color:#0d1117; box-shadow:0 8px 28px rgba(212,168,67,0.28); }
.btn-g { padding:10px 26px; background:transparent; color:#c9d1d9; -webkit-text-fill-color:#c9d1d9; font-family:inherit; font-size:10px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; border:1px solid #30363d; display:inline-block; transition:box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn-g:hover { border-color:#8b949e; }

/* ── Status pills (live / in-progress / planned) ───── */
.pill { display:inline-block; font-size:9px; letter-spacing:1.5px; padding:3px 10px; border-radius:12px; text-transform:uppercase; font-weight:700; }
.pill.live { background:rgba(35,134,54,0.13); color:#3fb950; -webkit-text-fill-color:#3fb950; border:1px solid #1a3d28; }
.pill.prog { background:rgba(212,168,67,0.13); color:#d4a843; -webkit-text-fill-color:#d4a843; border:1px solid #d4a843; }
.pill.plan { background:rgba(139,148,158,0.1); color:#8b949e; -webkit-text-fill-color:#8b949e; border:1px solid #30363d; }

/* ── Standards grid (cards) ────────────────────────── */
.std-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#21262d; border:1px solid #21262d; border-radius:6px; overflow:hidden; margin-top:8px; box-shadow:0 20px 50px rgba(0,0,0,0.30); }
.std { background:#0d1117; padding:18px 20px; position:relative; overflow:hidden; transition:background 0.25s ease; }
.std::before { content:''; position:absolute; inset:0; background:linear-gradient(150deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.012) 22%,transparent 50%); pointer-events:none; }
.std > * { position:relative; z-index:1; }
.std:hover { background:#0f141c; }
.std .std-name { font-size:12px; font-weight:700; color:#e6edf3; -webkit-text-fill-color:#e6edf3; margin-bottom:8px; }
.std .std-desc { font-size:11px; color:#6e7681; -webkit-text-fill-color:#6e7681; line-height:1.7; }

/* ── Generic card hover polish ─────────────────────── */
.card { position:relative; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,0.20); transition:transform 0.25s ease, box-shadow 0.25s ease; }
.card::before { content:''; position:absolute; inset:0; background:linear-gradient(150deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.008) 22%,transparent 50%); pointer-events:none; }
.card > * { position:relative; z-index:1; }
.card:hover { transform:translateY(-3px); box-shadow:0 16px 44px rgba(0,0,0,0.35); }

/* ── Footer ────────────────────────────────────────── */
footer { border-top:1px solid #21262d; padding:20px 48px; display:flex; gap:24px; align-items:center; flex-wrap:wrap; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#30363d; -webkit-text-fill-color:#30363d; }
footer a { color:#30363d; -webkit-text-fill-color:#30363d; }
footer a:hover { color:#c9d1d9; -webkit-text-fill-color:#c9d1d9; }
.footer-copy { margin-right:auto; }

/* ── Scroll reveal (driven by fx.js) ───────────────── */
.fade-up { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ── General-purpose ambient keyframes ─────────────── */
@keyframes pg { 0%,100%{box-shadow:0 0 4px rgba(42,180,42,.4)}50%{box-shadow:0 0 10px rgba(42,180,42,.9)} }
@keyframes breathe { 0%,100%{opacity:.4;transform:translateX(-50%) scale(1)} 50%{opacity:1;transform:translateX(-50%) scale(1.06)} }
@keyframes hglow { 0%,100%{text-shadow:0 0 60px rgba(255,255,255,.07)} 50%{text-shadow:0 0 80px rgba(212,168,67,.16)} }
@keyframes shine { 0%{left:-60%} 30%,100%{left:150%} }
@keyframes stat-pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ── Responsive base ───────────────────────────────── */
@media(max-width:900px){
  header { padding:14px 16px; gap:12px; }
  footer { padding:16px 20px; }
  nav { gap:16px; }
  nav a { font-size:9px; letter-spacing:1px; }
  .section { padding:48px 20px; }
}
@media(max-width:680px){ .std-grid { grid-template-columns:1fr; } }

/* ============================================================
   OPT-IN SIGNATURE EFFECTS  (landing-page showpieces)
   These activate only when their classes are used. They are
   intentionally NOT applied to any base element, so inner pages
   stay clean unless they deliberately opt in.
   ============================================================ */

/* Atom orbit (used on the header logo mark) */
@keyframes atom-orbit { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.atom-spin { animation:atom-orbit 20s linear infinite; transform-origin:50% 50%; }
.atom-spin:hover { animation-duration:4s; }

/* Marquee track (the landing-page receipts ticker) */
@keyframes marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee { overflow:hidden; position:relative; display:flex; align-items:stretch; text-decoration:none; }
.marquee-wrap { overflow:hidden; flex:1; }
.marquee-track { display:flex; width:max-content; animation:marq 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }