/* ============================================================================
   MarckTM — Brand System tokens & components
   Base: EPEC design DNA (Inter + JetBrains Mono, deep navy, graphite)
   Adapted: Space Grotesk logotype + technical violet accent
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Graphite / ink (neutral backbone) ───────────────────────────────── */
  --mk-black:    #07090D;
  --mk-ink-950:  #0A0E14;
  --mk-ink-900:  #0F141C;
  --mk-ink-800:  #161D27;
  --mk-ink-700:  #202A37;
  --mk-ink-600:  #33414F;
  --mk-ink-500:  #566476;
  --mk-ink-400:  #7E8B9B;
  --mk-ink-300:  #AAB5C2;
  --mk-ink-200:  #D4DAE2;
  --mk-ink-100:  #E8ECF2;
  --mk-ink-50:   #F4F6FA;
  --mk-white:    #FFFFFF;

  /* ── Deep blue (depth, structure) ────────────────────────────────────── */
  --mk-navy-900: #081A33;
  --mk-navy-800: #0C2548;
  --mk-navy-700: #123461;
  --mk-navy-600: #1A4A85;
  --mk-navy-500: #2C66AE;

  /* ── Technical violet (accent / signal) ──────────────────────────────── */
  --mk-violet-800: #3A28A0;
  --mk-violet-700: #4A33C4;
  --mk-violet-600: #5B45D9;   /* PRIMARY accent */
  --mk-violet-500: #6E5AE6;
  --mk-violet-400: #8C7CF2;
  --mk-violet-300: #B4A9F8;
  --mk-violet-100: #ECE9FD;
  --mk-violet-50:  #F4F2FE;

  /* ── Semantic roles ──────────────────────────────────────────────────── */
  --bg:            var(--mk-ink-50);
  --surface:       var(--mk-white);
  --surface-2:     var(--mk-ink-100);
  --fg-1:          var(--mk-ink-900);
  --fg-2:          var(--mk-ink-600);
  --fg-3:          var(--mk-ink-500);
  --fg-4:          var(--mk-ink-400);
  --accent:        var(--mk-violet-600);
  --on-dark-1:     #FFFFFF;
  --on-dark-2:     rgba(255,255,255,.72);
  --on-dark-3:     rgba(255,255,255,.46);
  --border:        rgba(15,20,28,.10);
  --border-strong: rgba(15,20,28,.16);
  --border-dark:   rgba(180,169,248,.18);

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ── Radii / shadow / motion ─────────────────────────────────────────── */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-5: 28px; --r-pill: 999px;
  --elev-1: 0 1px 2px rgba(8,26,51,.06), 0 4px 14px rgba(8,26,51,.05);
  --elev-2: 0 2px 6px rgba(8,26,51,.08), 0 14px 36px rgba(8,26,51,.10);
  --elev-3: 0 6px 16px rgba(8,26,51,.10), 0 28px 60px rgba(8,26,51,.16);
  --glow-violet: 0 0 0 1px rgba(110,90,230,.30), 0 0 36px rgba(91,69,217,.34);
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","cv11","tnum";
  line-height: 1.55;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================================
   THE MARK — geometric M (node/signal path)
   Recolor via context: set --mk-stroke and --mk-accent on a parent.
   ============================================================================ */
.mk-mark { width: 100%; height: 100%; overflow: visible; }
.mk-mark .mk-stroke { stroke: var(--mk-stroke, currentColor); }
.mk-mark .mk-node   { fill: var(--mk-stroke, currentColor); }
.mk-mark .mk-accent { fill: var(--mk-accent, var(--mk-violet-600)); }
.mk-mark .mk-accent-stroke { stroke: var(--mk-accent, var(--mk-violet-600)); }
.mk-mark .mk-frame  { stroke: var(--mk-frame, var(--mk-stroke, currentColor)); }

/* ============================================================================
   WORDMARK — Marck^TM
   ============================================================================ */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
  white-space: nowrap;
}
.wordmark .wm-marck { display: inline-block; }
.wordmark .wm-tm {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.30em;
  letter-spacing: 0.06em;
  color: var(--accent);
  transform: translateY(0.18em);
  margin-left: 0.14em;
  align-self: flex-start;
}
.wordmark.on-dark { color: var(--on-dark-1); }

/* Lockup: mark + wordmark horizontal */
.lockup { display: inline-flex; align-items: center; gap: 0.7em; }
.lockup .lk-mark { width: 1.18em; height: 1.18em; flex: none; }

/* ============================================================================
   PAGE SCAFFOLD
   ============================================================================ */
.page { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.section { padding: 96px 0; border-top: 1px solid var(--border); }
.section:first-of-type { border-top: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--accent); display: inline-block;
}
.sec-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 18px 0 0;
}
.sec-lead {
  font-size: 17px; color: var(--fg-2); max-width: 60ch; margin-top: 16px;
  text-wrap: pretty;
}
.sec-head { margin-bottom: 52px; }

.muted { color: var(--fg-3); }
.mono { font-family: var(--font-mono); }

/* Cards / panels */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--elev-1);
}
.panel-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3);
}

/* Grid helpers */
.grid { display: grid; gap: 24px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .g-3,.g-4 { grid-template-columns: repeat(2,1fr);} .g-2{grid-template-columns:1fr;} }
@media (max-width: 560px){ .g-3,.g-4,.g-2 { grid-template-columns: 1fr;} .page{padding:0 22px;} }