/* ============================================================
   Kaizen Tech — Site styles
   Industrial control-room aesthetic. Light canvas, cyan as signal.
   ============================================================ */

@import url('./tokens.css');

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  color: var(--kt-color-text);
  font-family: var(--kt-font-sans);
  font-size: 16px;
  line-height: var(--kt-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Page chrome ──────────────────────────────────────────── */
.kt-shell { min-height: 100vh; display: flex; flex-direction: column; }
.kt-main { flex: 1; }

.kt-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 720px) {
  .kt-container { padding: 0 20px; }
}

/* ── Top bar (very thin status strip) ─────────────────────── */
.kt-topbar {
  background: var(--kt-navy-900);
  color: var(--kt-gray-300);
  font-family: var(--kt-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.kt-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.kt-topbar-left, .kt-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.kt-topbar .kt-pulse {
  width: 6px; height: 6px;
  background: var(--kt-cyan-500);
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(0,184,212,0.7);
  animation: kt-pulse 2s infinite;
}
@keyframes kt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,184,212,0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(0,184,212,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,184,212,0); }
}

/* ── Main nav ─────────────────────────────────────────────── */
.kt-nav {
  background: #FFFFFF;
  border-bottom: 1px solid var(--kt-gray-200);
  position: sticky;
  top: 0;
  z-index: var(--kt-z-sticky);
}
.kt-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.kt-logo-img {
  height: 26px;
  width: auto;
  display: block;
}
.kt-nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--kt-font-sans);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--kt-navy-900);
}
.kt-nav-logo .kt-logo-mark {
  width: 32px; height: 32px;
  background: var(--kt-navy-900);
  color: var(--kt-cyan-500);
  display: grid;
  place-items: center;
  font-family: var(--kt-font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  border-radius: 4px;
  position: relative;
}
.kt-nav-logo .kt-logo-mark::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 8px; height: 8px;
  background: var(--kt-cyan-500);
}
.kt-nav-logo b { color: var(--kt-cyan-600); font-weight: 800; }

.kt-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.kt-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--kt-gray-700);
  letter-spacing: 0.01em;
  transition: color var(--kt-transition-base);
  position: relative;
  padding: 6px 0;
}
.kt-nav-links a:hover { color: var(--kt-cyan-600); }
.kt-nav-links a.is-active { color: var(--kt-navy-900); }
.kt-nav-links > a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 2px;
  background: var(--kt-cyan-500);
}

.kt-nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.kt-lang-toggle {
  display: inline-flex;
  font-family: var(--kt-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--kt-gray-600);
  border: 1px solid var(--kt-gray-300);
  border-radius: var(--kt-radius-sm);
  overflow: hidden;
}
.kt-lang-toggle button {
  padding: 5px 9px;
  color: inherit;
  background: transparent;
  transition: background var(--kt-transition-base), color var(--kt-transition-base);
}
.kt-lang-toggle button.is-active {
  background: var(--kt-navy-900);
  color: #FFFFFF;
}

/* ── Buttons ──────────────────────────────────────────────── */
.kt-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--kt-font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--kt-radius-sm);
  transition: all var(--kt-transition-base);
  border: 1px solid transparent;
  white-space: nowrap;
}
.kt-btn-primary {
  background: var(--kt-navy-900);
  color: #FFFFFF;
  border-color: var(--kt-navy-900);
}
.kt-btn-primary:hover {
  background: var(--kt-navy-800);
  box-shadow: var(--kt-shadow-cyan);
}
.kt-btn-cyan {
  background: var(--kt-cyan-500);
  color: var(--kt-navy-900);
  border-color: var(--kt-cyan-500);
}
.kt-btn-cyan:hover {
  background: var(--kt-cyan-600);
  color: #FFFFFF;
}
.kt-btn-ghost {
  background: transparent;
  color: var(--kt-navy-900);
  border-color: var(--kt-gray-300);
}
.kt-btn-ghost:hover { border-color: var(--kt-cyan-500); color: var(--kt-cyan-700); }
.kt-btn-link {
  padding: 0;
  background: none;
  color: var(--kt-cyan-700);
  font-weight: 600;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.kt-btn-link::after {
  content: "→";
  transition: transform var(--kt-transition-base);
}
.kt-btn-link:hover::after { transform: translateX(4px); }

.kt-btn-sm { padding: 9px 14px; font-size: 13px; }

/* ── Section atoms ────────────────────────────────────────── */
.kt-section { padding: 96px 0; }
.kt-section-tight { padding: 64px 0; }
.kt-section-dark {
  background: var(--kt-navy-900);
  color: #FFFFFF;
}
.kt-section-subtle { background: var(--kt-gray-50); }

.kt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kt-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kt-cyan-700);
  margin-bottom: 18px;
}
.kt-eyebrow .kt-eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--kt-cyan-500);
  display: inline-block;
}
.kt-section-dark .kt-eyebrow { color: var(--kt-cyan-300); }

.kt-section-title {
  font-family: var(--kt-font-sans);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--kt-navy-900);
  margin: 0 0 16px;
  text-wrap: balance;
}
.kt-section-dark .kt-section-title { color: #FFFFFF; }

.kt-section-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--kt-gray-700);
  max-width: 680px;
  margin: 0;
  text-wrap: pretty;
}
.kt-section-dark .kt-section-lede { color: var(--kt-gray-300); }

/* ── Tag / Pill ───────────────────────────────────────────── */
.kt-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--kt-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  background: var(--kt-cyan-50);
  color: var(--kt-cyan-700);
  border: 1px solid rgba(0,184,212,0.2);
  border-radius: var(--kt-radius-sm);
  text-transform: uppercase;
}
.kt-tag-dark {
  background: rgba(0,184,212,0.1);
  color: var(--kt-cyan-300);
  border-color: rgba(0,184,212,0.25);
}
.kt-tag-neutral {
  background: var(--kt-gray-100);
  color: var(--kt-gray-700);
  border-color: var(--kt-gray-200);
}

/* ── Footer ───────────────────────────────────────────────── */
.kt-footer {
  background: var(--kt-navy-900);
  color: var(--kt-gray-300);
  padding: 80px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.kt-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (max-width: 900px) {
  .kt-footer-grid { grid-template-columns: 1fr 1fr; }
}
.kt-footer-col h5 {
  font-family: var(--kt-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kt-cyan-300);
  margin: 0 0 18px;
}
.kt-footer-col ul { list-style: none; padding: 0; margin: 0; }
.kt-footer-col li { margin-bottom: 10px; }
.kt-footer-col a {
  color: var(--kt-gray-300);
  font-size: 14px;
  transition: color var(--kt-transition-base);
}
.kt-footer-col a:hover { color: var(--kt-cyan-300); }
.kt-footer-brand p {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--kt-gray-400);
  max-width: 260px;
}
.kt-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--kt-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--kt-gray-500);
}
.kt-footer-bottom .kt-footer-meta {
  display: flex; gap: 18px;
}

/* ── Logo lockup (in nav, footer) ─────────────────────────── */
.kt-wordmark {
  font-family: var(--kt-font-sans);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.kt-wordmark .kt-wordmark-tag {
  display: block;
  font-family: var(--kt-font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--kt-cyan-500);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ── Card primitive ───────────────────────────────────────── */
.kt-card {
  background: #FFFFFF;
  border: 1px solid var(--kt-gray-200);
  border-radius: var(--kt-radius-md);
  transition: border-color var(--kt-transition-base), box-shadow var(--kt-transition-base);
}
.kt-card:hover {
  border-color: var(--kt-cyan-300);
  box-shadow: var(--kt-shadow-sm);
}

/* ── Section divider with mono label ──────────────────────── */
.kt-divider {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}
.kt-divider .kt-divider-label {
  font-family: var(--kt-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kt-gray-500);
}
.kt-divider .kt-divider-line {
  height: 1px;
  background: var(--kt-gray-200);
}
.kt-section-dark .kt-divider .kt-divider-line { background: rgba(255,255,255,0.1); }
.kt-section-dark .kt-divider .kt-divider-label { color: var(--kt-cyan-300); }

/* ── Numeric / data ──────────────────────────────────────── */
.kt-data {
  font-family: var(--kt-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Utilities ──────────────────────────────────────────── */
.kt-mono { font-family: var(--kt-font-mono); }
.kt-uppercase { text-transform: uppercase; letter-spacing: 0.08em; }
.kt-text-muted { color: var(--kt-gray-600); }
.kt-cyan { color: var(--kt-cyan-600); }

/* ── Crosshair / corner-marks decorative element ─────────── */
.kt-crosshair {
  position: relative;
}
.kt-crosshair::before,
.kt-crosshair::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1.5px solid var(--kt-cyan-500);
}
.kt-crosshair::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}
.kt-crosshair::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}