/* ============================================================
   Open EMC — shared design system
   Used by the Open EMC homepage and the EMC-Assist project page.
   Tone: technical · open-source · trustworthy · calm · transparent.
   ============================================================ */

:root{
  /* accent — muted blue (primary) */
  --accent:oklch(0.71 0.14 248);
  --accent-soft:oklch(0.71 0.14 248/0.16);
  --accent-dim:oklch(0.71 0.14 248/0.07);
  --accent-line:oklch(0.71 0.14 248/0.40);
  --accent-fg:oklch(0.99 0.02 248);
  /* accent-2 — soft cyan/green for "local / open" */
  --local:oklch(0.76 0.10 182);
  --local-soft:oklch(0.76 0.10 182/0.14);
  --local-line:oklch(0.76 0.10 182/0.40);
  /* restrained blue→cyan gradient (no violet, no glow-SaaS) */
  --grad:linear-gradient(135deg,oklch(0.71 0.14 248),oklch(0.76 0.10 196));

  /* semantic — severity / status */
  --sev-high:oklch(0.66 0.20 25);     /* risk / never-sent  */
  --amber:oklch(0.80 0.14 75);        /* warnings / pre-compliance */
  --green:oklch(0.74 0.13 158);       /* local / shipped / ok */
  --info:oklch(0.74 0.09 230);

  /* surfaces — deep navy / near-black */
  --bg:#0a0d12; --bg-2:#0d1117;
  --panel:#11151c; --panel-2:#161b24; --panel-3:#1c2230;
  --border:#222a38; --border-strong:#2f3a4f;

  /* ink — off-white */
  --text:#e7edf4; --text-dim:#b2bccd; --text-muted:#717f94; --text-faint:#48536a;

  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:11px;
  --maxw:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1100px 560px at 78% -12%,oklch(0.71 0.14 248/0.09),transparent 70%),
    radial-gradient(900px 520px at 8% 4%,var(--local-soft),transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);font-family:var(--sans);line-height:1.58;
  -webkit-font-smoothing:antialiased;letter-spacing:-.005em;
}
a{color:inherit}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.accent{color:var(--accent)}
.local-ink{color:var(--local)}

/* ---------- circuit-trace hairline (decorative section rule) ---------- */
.trace-rule{height:1px;border:0;margin:0;
  background:repeating-linear-gradient(90deg,var(--border) 0 26px,transparent 26px 33px)}

/* ================= NAV ================= */
.site-nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(12px);
  background:oklch(0.15 0.018 250/0.72);border-bottom:1px solid var(--border)}
.site-nav .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.brand .mark{width:32px;height:32px;border-radius:8px;background:var(--grad);
  display:grid;place-items:center;flex:none;position:relative;overflow:hidden}
.brand .mark svg{width:20px;height:20px;display:block}
.brand .bname{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand .bname span{color:var(--local)}
.brand-sep{color:var(--text-faint);font-family:var(--mono);font-weight:300;font-size:17px}
.brand-proj{font-family:var(--mono);font-size:14px;color:var(--text-dim);font-weight:500}
.nav-links{display:flex;align-items:center;gap:4px}
@media(max-width:760px){.nav-links{display:none}}
.nav-links a{color:var(--text-muted);text-decoration:none;font-size:13px;font-family:var(--mono);
  padding:7px 11px;border-radius:7px;transition:.14s}
.nav-links a:hover{color:var(--text);background:var(--panel)}
.nav-links a.cur{color:var(--text)}
.site-nav .spacer{flex:1}
.ghost{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--border-strong);
  border-radius:8px;font-family:var(--mono);font-size:12.5px;text-decoration:none;color:var(--text-dim);
  background:var(--panel);transition:.14s;white-space:nowrap}
.ghost:hover{border-color:var(--accent);color:var(--text)}
.ghost svg{width:14px;height:14px}

/* ================= BUTTONS ================= */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 19px;border-radius:9px;
  font-family:var(--mono);font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn svg{width:15px;height:15px;flex:none}
.btn-primary{background:var(--accent);color:#06121f;border-color:var(--accent)}
.btn-primary:hover{background:oklch(0.76 0.14 248);transform:translateY(-1px)}
.btn-outline{background:var(--panel);color:var(--text);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn-quiet{background:transparent;color:var(--text-dim);border-color:var(--border)}
.btn-quiet:hover{color:var(--text);border-color:var(--border-strong)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ================= HERO ================= */
header.hero{padding:84px 0 30px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:10px}
.eyebrow .pin{width:7px;height:7px;border-radius:50%;background:var(--local);box-shadow:0 0 9px var(--local)}
h1{font-size:clamp(36px,5.4vw,62px);line-height:1.04;margin:18px 0 0;letter-spacing:-.025em;font-weight:600;
  max-width:16ch;text-wrap:balance}
h1 .tint{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:19px;color:var(--text-dim);max-width:680px;margin-top:20px;text-wrap:pretty}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--border);
  border-radius:999px;background:var(--panel);font-family:var(--mono);font-size:12.5px;color:var(--text-dim)}
.chip b{color:var(--text);font-weight:600}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--local);box-shadow:0 0 8px var(--local)}
.chip .dot.blue{background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* ================= SECTIONS ================= */
section{padding:60px 0;border-top:1px solid var(--border)}
.sec-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.kicker.local{color:var(--local)}
h2{font-size:clamp(25px,3vw,33px);margin:0;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
h3{font-weight:600}
.sec-sub{color:var(--text-muted);max-width:740px;margin:8px 0 30px;font-size:15.5px;text-wrap:pretty}
.lead{color:var(--text-dim);font-size:17px;max-width:760px;text-wrap:pretty}

/* ================= GRID + CARDS ================= */
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.g3,.g4{grid-template-columns:1fr 1fr}.g2{grid-template-columns:1fr}}
@media(max-width:560px){.g3,.g4,.g2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:.16s}
.card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.card h3{margin:0 0 7px;font-size:16px;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.card p{margin:0;color:var(--text-dim);font-size:14px}
.card .num-tag{font-family:var(--mono);font-size:11px;color:var(--accent);margin-bottom:10px;display:block}
.ic{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);display:grid;place-items:center;
  color:var(--accent);flex:none;font-size:16px}
.ic.local{background:var(--local-soft);color:var(--local)}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:6px;border:1px solid var(--border);white-space:nowrap}
.b-ship{color:var(--green);border-color:oklch(0.74 0.13 158/0.4);background:oklch(0.74 0.13 158/0.08)}
.b-road{color:var(--amber);border-color:oklch(0.80 0.14 75/0.4);background:oklch(0.80 0.14 75/0.08)}

/* ================= PANELS ================= */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.note{font-family:var(--mono);font-size:11.5px;color:var(--text-muted);line-height:1.7}

/* pills */
.pill{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);white-space:nowrap}
.pill.ok{color:var(--green);border-color:oklch(0.74 0.13 158/0.5)}
.pill.info{color:var(--info);border-color:oklch(0.74 0.09 230/0.5)}
.pill.warn{color:var(--amber);border-color:oklch(0.80 0.14 75/0.5)}
.pill.hi{color:var(--sev-high);border-color:oklch(0.66 0.20 25/0.5)}
.pill.local{color:var(--local);border-color:var(--local-line)}

/* ================= DISCLAIMER ================= */
.disclaimer{display:flex;gap:13px;align-items:flex-start;border:1px solid oklch(0.80 0.14 75/0.32);
  background:oklch(0.80 0.14 75/0.055);border-radius:var(--radius);padding:16px 18px;color:var(--text-dim);font-size:14px}
.disclaimer .warn-ic{color:var(--amber);font-size:17px;line-height:1.3;flex:none}
.disclaimer b{color:var(--text)}
.fineprint{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);
  padding:14px 17px;font-family:var(--mono);font-size:11.5px;color:var(--text-muted);line-height:1.75}

/* ================= FOOTER ================= */
footer{padding:50px 0 70px;border-top:1px solid var(--border);color:var(--text-muted);font-size:13px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .brand{margin-bottom:12px}
.foot-tag{color:var(--text-muted);font-size:13px;max-width:34ch}
.foot-contact{margin-top:14px;font-size:13px;line-height:1.9;color:var(--text-muted)}
.foot-contact a{color:var(--accent);text-decoration:none}
.foot-contact a:hover{text-decoration:underline}
.foot-bottom .lic a{color:var(--text-dim);text-decoration:none}
.foot-bottom .lic a:hover{color:var(--text)}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);margin:0 0 12px;font-weight:500}
.foot-col a{display:block;color:var(--text-dim);text-decoration:none;font-size:13.5px;padding:4px 0}
.foot-col a:hover{color:var(--text)}
.foot-bottom{margin-top:38px;padding-top:22px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.foot-bottom .lic{font-family:var(--mono);font-size:11.5px;color:var(--text-faint)}

@media(prefers-reduced-motion:reduce){*{animation:none!important}}