/* ================================================================
   KORVLABS — Research lab visual system
   Built on Vektcore tokens, but with a distinct identity:
   defense-lab feel, phosphor green + amber radar accents.
   ================================================================ */

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

:root {
  /* KorvLabs palette — phosphor + radar */
  --kl-ink:        8  10  12;     /* near-black */
  --kl-surface:   14  17  20;     /* card surface */
  --kl-elevated:  20  24  28;     /* elevated surface */
  --kl-line:      40  50  56;     /* hairline */
  --kl-line-soft: 28  35  42;
  --kl-text-hi:  235 238 232;     /* off-white slightly green-tinted */
  --kl-text-mid: 150 162 158;     /* muted */
  --kl-text-lo:  100 112 110;     /* very muted */

  /* accents (default = phosphor) */
  --kl-accent: 124 255 107;       /* phosphor green */
  --kl-accent-soft: rgb(124 255 107 / 0.12);
  --kl-accent-hi: rgb(124 255 107 / 0.85);
  --kl-warn: 255 179 71;          /* radar amber */
  --kl-danger: 255 92 92;
  --kl-cyan: 90 220 255;

  /* grid units */
  --kl-radius-card: 4px;
  --kl-radius-lg: 8px;
  --kl-radius-pill: 999px;

  --kl-display: 'Inter', system-ui, sans-serif;
  --kl-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --kl-body: 'Inter', system-ui, sans-serif;
}

[data-theme="light"] {
  --kl-ink:        248 248 245;
  --kl-surface:   255 255 252;
  --kl-elevated:  244 244 240;
  --kl-line:      215 218 212;
  --kl-line-soft: 230 232 226;
  --kl-text-hi:    18  22  24;
  --kl-text-mid:   90 100 100;
  --kl-text-lo:  130 140 138;
  --kl-accent-soft: rgb(34 140 60 / 0.10);
  --kl-accent: 34 140 60;
  --kl-accent-hi: rgb(34 140 60 / 0.95);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: rgb(var(--kl-ink));
  color: rgb(var(--kl-text-hi));
  font-family: var(--kl-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

::selection {
  background: rgb(var(--kl-accent) / 0.35);
  color: rgb(var(--kl-text-hi));
}

/* ----- Typography classes ----- */
.kl-eyebrow {
  font-family: var(--kl-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--kl-accent));
  font-weight: 500;
}
.kl-eyebrow.muted { color: rgb(var(--kl-text-mid)); }

.kl-display {
  font-family: var(--kl-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.96;
}
.kl-mono { font-family: var(--kl-mono); font-variant-numeric: tabular-nums; }

/* ----- Layout ----- */
.kl-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ----- Background ambient ----- */
.kl-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.kl-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(var(--kl-line) / 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--kl-line) / 0.35) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 90%);
}
.kl-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--kl-line) / 0.65) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 80%);
}
.kl-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.18;
}
.kl-bg-orb.a {
  top: -10%; left: -10%;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgb(var(--kl-accent)), transparent 65%);
  animation: kl-orb-1 22s ease-in-out infinite;
}
.kl-bg-orb.b {
  bottom: -20%; right: -15%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgb(var(--kl-warn) / 0.4), transparent 65%);
  animation: kl-orb-2 28s ease-in-out infinite;
}
@keyframes kl-orb-1 { 50% { transform: translate(30px, 40px) scale(1.05); } }
@keyframes kl-orb-2 { 50% { transform: translate(-40px, -30px) scale(1.08); } }

/* Scanline */
.kl-bg-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgb(var(--kl-text-hi) / 0.012) 3px,
    rgb(var(--kl-text-hi) / 0.012) 4px
  );
  mix-blend-mode: overlay;
}

/* ----- Buttons ----- */
.kl-btn {
  font-family: var(--kl-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 200ms ease-out;
  border: 1px solid transparent;
  white-space: nowrap;
}
.kl-btn-primary {
  background: rgb(var(--kl-accent));
  color: rgb(var(--kl-ink));
  border-color: rgb(var(--kl-accent));
  box-shadow: 0 0 0 0 rgb(var(--kl-accent) / 0.5);
}
.kl-btn-primary:hover {
  background: rgb(var(--kl-accent));
  filter: brightness(1.1);
  box-shadow: 0 0 30px 0 rgb(var(--kl-accent) / 0.35);
  transform: translateY(-1px);
}
.kl-btn-ghost {
  background: transparent;
  color: rgb(var(--kl-text-hi));
  border-color: rgb(var(--kl-line));
}
.kl-btn-ghost:hover {
  border-color: rgb(var(--kl-accent) / 0.6);
  color: rgb(var(--kl-accent));
  background: rgb(var(--kl-accent-soft));
}

/* ----- Pill / chip ----- */
.kl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgb(var(--kl-line));
  background: rgb(var(--kl-surface) / 0.6);
  border-radius: 999px;
  font-family: var(--kl-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--kl-text-mid));
}
.kl-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--kl-accent));
  box-shadow: 0 0 8px rgb(var(--kl-accent));
  animation: kl-pulse 1.6s ease-in-out infinite;
}
@keyframes kl-pulse { 50% { opacity: 0.4; } }

/* ----- Card ----- */
.kl-card {
  background: rgb(var(--kl-surface) / 0.5);
  border: 1px solid rgb(var(--kl-line) / 0.7);
  border-radius: 4px;
  position: relative;
  transition: all 240ms ease-out;
  backdrop-filter: blur(8px);
}
.kl-card:hover {
  border-color: rgb(var(--kl-accent) / 0.4);
  background: rgb(var(--kl-surface) / 0.7);
}
.kl-card-corner {
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid rgb(var(--kl-accent) / 0.6);
}
.kl-card-corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.kl-card-corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.kl-card-corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.kl-card-corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ----- Section markers ----- */
.kl-section-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--kl-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--kl-text-mid));
}
.kl-section-tag .num {
  color: rgb(var(--kl-accent));
  font-weight: 600;
}
.kl-section-tag .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgb(var(--kl-line)), transparent);
  max-width: 200px;
}

/* ----- Animations ----- */
.kl-fade-in {
  animation: kl-fade-in 600ms ease-out both;
}
.kl-fade-in.d1 { animation-delay: 100ms; }
.kl-fade-in.d2 { animation-delay: 200ms; }
.kl-fade-in.d3 { animation-delay: 300ms; }
.kl-fade-in.d4 { animation-delay: 400ms; }
@keyframes kl-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kl-spin-slow { to { transform: rotate(360deg); } }
@keyframes kl-spin-rev { to { transform: rotate(-360deg); } }
@keyframes kl-blink { 50% { opacity: 0.25; } }
@keyframes kl-sweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ----- Density variants ----- */
[data-density="compact"] section.kl-section { padding: 80px 0; }
[data-density="comfortable"] section.kl-section { padding: 120px 0; }
[data-density="spacious"] section.kl-section { padding: 180px 0; }

/* ----- Particles intensity ----- */
[data-particles="off"] .kl-bg-orb,
[data-particles="off"] .kl-bg-scan { display: none; }
[data-particles="off"] .kl-mark-sweep { animation-play-state: paused; opacity: 0.3; }
[data-particles="low"] .kl-bg-orb { opacity: 0.10; }
[data-particles="low"] .kl-bg-scan { opacity: 0.5; }
[data-particles="high"] .kl-bg-orb { opacity: 0.32; }

/* ----- Custom font choices ----- */
[data-display-font="grotesk"] .kl-display,
[data-display-font="grotesk"] h1, [data-display-font="grotesk"] h2 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.025em;
}
[data-display-font="mono"] .kl-display,
[data-display-font="mono"] h1, [data-display-font="mono"] h2 {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.04em;
  font-weight: 700;
}
[data-display-font="serif"] .kl-display,
[data-display-font="serif"] h1, [data-display-font="serif"] h2 {
  font-family: 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-style: italic;
}