/* ============================================================
   LORD UI — the MR LORD design system
   One stylesheet. Every app imports it. Change a token here,
   the whole ecosystem moves together.
   Usage:  <link rel="stylesheet" href="lord-ui.css">
   ============================================================ */

:root{
  /* ---- surfaces ---- */
  --bg:#0a0a0b;
  --bg-2:#111114;
  --surface:#16161a;
  --surface-2:#1d1d23;
  --line:#2a2a31;

  /* ---- ink ---- */
  --ink:#f4f1e8;
  --ink-soft:#b6b2a6;
  --ink-faint:#7c786d;

  /* ---- brand accents ---- */
  --gold:#d9b31a;          /* primary — MADNESS gold */
  --gold-soft:#e9cf6a;
  --gold-deep:#8c7110;
  --green:#46c47d;         /* ENERGY / live / success */
  --green-soft:#8ce5b3;
  --green-deep:#1f6b43;
  --red:#e87a6b;           /* stress / danger */
  --amber:#e6b14a;         /* warning / off-optimum */
  --blue:#5fb0e0;
  --violet:#9b8cf0;

  /* ---- geometry & type ---- */
  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --maxw:1180px;
  --font:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;

  /* ---- spacing scale ---- */
  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:24px; --s6:34px; --s7:48px; --s8:70px;
}

/* ---- reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---- layout helpers ---- */
.lui-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.lui-mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lui-gold{color:var(--gold)}
.lui-green{color:var(--green)}
.lui-serif{font-family:var(--serif)}

/* ---- typography ---- */
.lui-h1{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;font-size:clamp(38px,7vw,82px);line-height:1}
.lui-h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.6vw,38px)}
.lui-h3{font-family:var(--serif);font-weight:600;font-size:24px}
.lui-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.lui-lede{font-size:clamp(16px,2.1vw,20px);color:var(--ink-soft)}

/* ---- brand crest ---- */
.lui-brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.16em;font-size:15px}
.lui-crest{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#0a0a0b;font-weight:900}
.lui-crest.green{background:linear-gradient(135deg,var(--green),var(--green-deep));color:#08110b}

/* ---- buttons ---- */
.lui-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:var(--radius-pill);
  font-size:14.5px;font-weight:600;border:1px solid var(--line);transition:.18s;cursor:pointer;
  background:transparent;color:var(--ink);font-family:var(--font)}
.lui-btn:hover{border-color:var(--gold);color:var(--gold)}
.lui-btn.primary{background:var(--gold);color:#0a0a0b;border-color:var(--gold)}
.lui-btn.primary:hover{background:var(--gold-soft);transform:translateY(-1px)}
.lui-btn.sm{padding:8px 14px;font-size:13px}

/* ---- pills & chips ---- */
.lui-pill{border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px 10px;
  color:var(--ink-soft);letter-spacing:.02em;font-size:11.5px;display:inline-block}
.lui-pill.price{color:var(--gold-soft);border-color:var(--gold-deep)}
.lui-chip{font-size:12.5px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-pill);
  padding:7px 13px;color:var(--ink-soft);cursor:pointer;transition:.15s}
.lui-chip:hover{border-color:var(--gold);color:var(--gold-soft)}

/* ---- status badges ---- */
.lui-badge{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:6px;font-weight:700}
.lui-badge.live{background:rgba(60,200,120,.14);color:#6fe0a0;border:1px solid rgba(60,200,120,.3)}
.lui-badge.build{background:rgba(217,179,26,.14);color:var(--gold-soft);border:1px solid rgba(217,179,26,.32)}
.lui-badge.soon{background:rgba(150,150,160,.12);color:#a9a6b2;border:1px solid var(--line)}

/* ---- panel & card ---- */
.lui-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}
.lui-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:24px 22px 22px;display:flex;flex-direction:column;transition:.2s;overflow:hidden}
.lui-card::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--gold);transition:.25s}
.lui-card:hover{transform:translateY(-3px);border-color:#3a3a44;background:var(--surface-2)}
.lui-card:hover::after{width:100%}

/* ---- grids ---- */
.lui-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lui-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:980px){.lui-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.lui-grid-3,.lui-grid-2{grid-template-columns:1fr}}

/* ---- sticky nav ---- */
.lui-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(10,10,11,.72);border-bottom:1px solid var(--line)}
.lui-nav .lui-wrap{display:flex;align-items:center;justify-content:space-between;height:62px}

/* ---- reveal-on-scroll (add .in via IntersectionObserver) ---- */
.lui-reveal{opacity:0;transform:translateY(16px);transition:.6s cubic-bezier(.2,.7,.2,1)}
.lui-reveal.in{opacity:1;transform:none}

/* ---- live blip ---- */
.lui-blip{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;
  box-shadow:0 0 0 0 rgba(70,196,125,.6);animation:lui-pulse 1.8s infinite}
@keyframes lui-pulse{0%{box-shadow:0 0 0 0 rgba(70,196,125,.55)}70%{box-shadow:0 0 0 10px rgba(70,196,125,0)}100%{box-shadow:0 0 0 0 rgba(70,196,125,0)}}