/* Grok Engine — Cockpit design system (v2 · dark)
   Source tokens: PE-Assessment-Dashboard-v22-20260530-twin-text-trim.html
   Editorial cockpit: dark graphite canvas, warm-metal amber, restrained mint/wine. */

:root {
  /* Surfaces */
  --canvas:         #0E1218;
  --canvas-elev-1:  #131922;
  --canvas-elev-2:  #19212C;
  --canvas-elev-3:  #1F2833;
  --sidebar-bg:     #090C11;

  /* Hairlines */
  --hairline:        rgba(255,255,255,0.07);
  --hairline-strong: rgba(255,255,255,0.14);
  --hairline-amber:  rgba(255,192,0,0.32);

  /* Ink (text) */
  --ink-1: #F2EFE9;
  --ink-2: #B8BEC8;
  --ink-3: #6E7886;
  --ink-4: #3F4651;

  /* Accent + status (use sparingly) */
  --amber:        #FFC000;
  --amber-soft:   rgba(255,192,0,0.10);
  --positive:     #52DCB0;
  --positive-soft:rgba(82,220,176,0.10);
  --critical:     #E04545;
  --critical-soft:rgba(224,69,69,0.08);
  --wine:         #C24F8E;

  /* Fonts */
  --f-display: "Fraunces", "Source Serif Pro", Georgia, serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --f-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Motion */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-fast: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

html, body { background: var(--canvas); }
body {
  font-family: var(--f-body);
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum", "ss01";
  line-height: 1.55;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--canvas); }

a {
  color: inherit; text-decoration: none; position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 320ms var(--ease);
}
a:hover { background-size: 100% 1px; }
a.bare, a.bare:hover { background-image: none; }

button { font-family: inherit; cursor: pointer; }

/* GRAIN — subtle on dark */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.035; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* NAV — dark translucent */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 36px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(14, 18, 24, 0.72);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid transparent;
  transition: border-color 400ms var(--ease), background 400ms var(--ease);
}
.nav.scrolled {
  border-bottom-color: var(--hairline);
  background: rgba(9, 12, 17, 0.85);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink-1);
}
.nav-brand img {
  width: 28px; height: 28px;
  opacity: 0.95;
  display: block;
}
.nav-brand .brand-stack {
  display: flex; flex-direction: column;
  line-height: 1;
}
.nav-brand .wordmark {
  font-family: var(--f-display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.01em;
  color: var(--ink-1);
}
.nav-brand .tagline {
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.nav-brand .pulse {
  display: inline-block; width: 7px; height: 7px;
  background: var(--amber); border-radius: 50%;
  margin-right: 10px; vertical-align: 2px;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255,192,0,0.45); }
  50%      { opacity: 0.55; transform: scale(1.4); box-shadow: 0 0 0 8px rgba(255,192,0,0); }
}
.nav-links { display: flex; gap: 32px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.nav-links a { transition: color 200ms var(--ease); }
.nav-links a:hover { color: var(--amber); }
.nav-cta {
  font-size: 12px; font-weight: 500; padding: 9px 16px;
  border: 1px solid var(--hairline-amber); color: var(--amber);
  border-radius: 0;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: var(--f-mono);
  transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.nav-cta:hover { background: var(--amber); color: var(--canvas); border-color: var(--amber); }

/* EYEBROW */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.eyebrow .sep { color: var(--amber); opacity: 0.6; }
.eyebrow .tag {
  padding: 4px 10px; border: 1px solid var(--hairline-strong);
  color: var(--ink-2); letter-spacing: 0.14em;
}
.eyebrow.is-amber { color: var(--amber); }

/* CTA — amber pill (primary), ghost (secondary) */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--amber); color: var(--canvas);
  border-radius: 999px;
  font-family: var(--f-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0.005em;
  will-change: transform;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
  border: none;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(255,192,0,0.45); }
.cta .arrow { transition: transform 280ms var(--ease); display: inline-block; }
.cta:hover .arrow { transform: translateX(4px); }
.cta.ghost {
  background: transparent; color: var(--ink-1);
  border: 1px solid var(--hairline-strong);
}
.cta.ghost:hover { background: var(--canvas-elev-2); border-color: var(--ink-3); box-shadow: none; }

.cta-text { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.cta-text .arrow { display: inline-block; margin-left: 8px; transition: transform 280ms var(--ease); color: var(--amber); }
.cta-text:hover { color: var(--amber); }
.cta-text:hover .arrow { transform: translateX(4px); }

/* SECTION primitives — tighter than v1 (110-130px vs 200) */
section { padding: 110px 36px; position: relative; }
.inner { max-width: 1280px; margin: 0 auto; }

.label {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 22px;
  display: flex; align-items: center; gap: 12px;
}
.label::before { content: ""; width: 28px; height: 1px; background: var(--amber); opacity: 0.85; }

.h-section {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.04; letter-spacing: -0.022em;
  margin-bottom: 26px; max-width: 980px;
  color: var(--ink-1);
  font-variation-settings: "opsz" 144;
}
.h-section em { font-style: italic; font-weight: 500; color: var(--amber); }

.lead {
  font-size: 18px; line-height: 1.55; color: var(--ink-2);
  max-width: 640px; margin-bottom: 24px;
}
.lead.strong { color: var(--ink-1); font-weight: 500; }

/* Section ruler (mimics v22 header underline) */
.section-rule {
  height: 1px; width: 64px; background: var(--amber);
  margin-top: 28px; margin-bottom: 0;
}

/* RESPONSIVE */
@media (max-width: 1050px) {
  .nav-links { display: none; }
  section { padding-left: 22px; padding-right: 22px; padding-top: 80px; padding-bottom: 80px; }
  .nav { padding: 14px 22px; }
}