/* beemuu landing — dark diagnostic-HUD aesthetic */

:root {
  --bg: #07090d;
  --bg-elev: #0c1117;
  --bg-elev-2: #121821;
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);
  --fg: #e6ecf3;
  --fg-dim: #8b97a8;
  --fg-mute: #5a6678;

  /* BMW M blue + accent red */
  --m-blue: #1ea7ff;
  --m-blue-deep: #0066cc;
  --m-red: #ff3b5c;
  --m-amber: #ffb547;
  --m-green: #2bd47d;

  --grad-1: linear-gradient(135deg, #1ea7ff 0%, #0066cc 50%, #6f3eff 100%);
  --grad-2: linear-gradient(135deg, #ff3b5c 0%, #ff7a3b 100%);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                 0 20px 60px -20px rgba(0, 0, 0, 0.8);
  --radius: 14px;
  --radius-sm: 8px;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background:
    radial-gradient(1200px 700px at 75% -10%, rgba(30, 167, 255, 0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(111, 62, 255, 0.12), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(255, 59, 92, 0.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ─── atmospherics ───────────────────────────────────────────── */
.scanlines {
  pointer-events: none;
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(255, 255, 255, 0.012) 3px,
    transparent 4px
  );
  z-index: 9998;
}
.vignette {
  pointer-events: none;
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%);
  z-index: 9997;
}

/* ─── nav ────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: rgba(7, 9, 13, 0.65);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg);
}
.brand-mark { width: 28px; height: 28px; }
.spin-slow { animation: spin 14s linear infinite; transform-origin: 20px 20px; }
.brand-text {
  font-family: var(--font-mono);
  font-size: 16px;
}
.brand-dot { color: var(--m-blue); }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  color: var(--fg-dim); font-size: 14px;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--fg); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* ─── buttons ────────────────────────────────────────────────── */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font-size: 14px; font-weight: 600;
  border-radius: 8px;
  cursor: pointer; transition: all 0.15s;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
}
.btn-primary {
  background: var(--grad-1);
  color: white;
  box-shadow: 0 8px 24px -8px rgba(30, 167, 255, 0.5);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(30, 167, 255, 0.6);
}
.btn-primary.lg { padding: 13px 22px; font-size: 15px; }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--m-blue);
  color: var(--m-blue);
}
.btn-ghost.lg { padding: 13px 22px; font-size: 15px; }

/* ─── eyebrow + dot ──────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-blue);
  margin: 0 0 16px;
}
.dot-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--m-green);
  box-shadow: 0 0 12px var(--m-green);
  animation: pulse 1.4s ease-in-out infinite;
}

/* ─── hero ───────────────────────────────────────────────────── */
.hero {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 32px 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-title {
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0 0 24px;
}
.hero-title .line { display: block; }
.hero-title .gradient {
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: 18px; line-height: 1.55;
  color: var(--fg-dim);
  max-width: 540px;
  margin: 0 0 32px;
}
.hero-actions { display: flex; gap: 12px; margin-bottom: 44px; }

/* counter strip */
.counter-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 18px 20px;
  background: rgba(12, 17, 23, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}
.counter { display: flex; flex-direction: column; gap: 2px; }
.counter-num {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 700;
  color: var(--m-blue);
  letter-spacing: -0.01em;
}
.counter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
}

/* ─── hero stage (car + HUDs) ───────────────────────────────── */
.hero-stage {
  position: relative;
  aspect-ratio: 4/3;
}
.wire-car {
  width: 100%; height: 100%;
  filter: drop-shadow(0 12px 40px rgba(30, 167, 255, 0.18));
}
.wheel-fl, .wheel-fr { transform-origin: center; animation: spin 3s linear infinite; }
.scan-sweep {
  animation: sweep 5s ease-in-out infinite;
}
.hud-on-car text { letter-spacing: 0.1em; }

.hud-panel {
  position: absolute;
  background: rgba(7, 9, 13, 0.85);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  padding: 12px;
  box-shadow: var(--shadow-card);
  font-family: var(--font-mono);
}
.hud-panel::before {
  content: ""; position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(30,167,255,.06), transparent 60%);
  pointer-events: none;
}
.hud-rpm {
  top: 6%; left: 0;
  width: 110px; height: 110px;
}
.hud-rpm svg { width: 100%; height: 100%; }
.rpm-ring {
  animation: pulse-ring 2.4s ease-in-out infinite;
}

.hud-temp {
  bottom: 8%; right: 0;
  width: 170px;
  font-size: 11px;
}
.bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  margin-bottom: 8px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--m-blue), var(--m-amber), var(--m-red));
  border-radius: 3px;
  animation: barpulse 2.8s ease-in-out infinite;
}
.hud-row {
  display: flex; justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.hud-row:last-child { border-bottom: 0; }
.hud-row span { color: var(--fg-mute); }
.hud-row strong { color: var(--m-blue); font-weight: 600; }

.hud-dtc {
  top: 28%; right: -10px;
  width: 180px;
  font-size: 11px;
}
.dtc-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.dtc-line:last-child { border: 0; }
.dtc-line.muted .dtc-code { color: var(--fg-mute); }
.dtc-code { color: var(--m-blue); font-weight: 600; }
.dtc-sev {
  font-size: 9px; padding: 1px 6px; border-radius: 3px;
  letter-spacing: 0.05em; font-weight: 700;
}
.dtc-sev.crit { background: rgba(255, 59, 92, 0.18); color: var(--m-red); }
.dtc-sev.warn { background: rgba(255, 181, 71, 0.18); color: var(--m-amber); }

/* terminal */
.terminal {
  margin: 56px auto 0;
  max-width: 900px;
  background: #04060a;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(30, 167, 255, 0.4);
}
.terminal-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #0a0e14;
  border-bottom: 1px solid var(--line);
}
.terminal-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.terminal-bar .red { background: #ff5f57; }
.terminal-bar .yellow { background: #febc2e; }
.terminal-bar .green { background: #28c840; }
.terminal-title {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mute);
}
.terminal-body {
  margin: 0; padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg-dim);
  height: 200px;
  overflow: hidden;
  white-space: pre-wrap;
}
.t-line { display: block; }
.t-prompt { color: var(--m-green); margin-right: 6px; }
.t-key { color: var(--m-blue); }
.t-val { color: var(--m-amber); }
.t-warn { color: var(--m-red); }
.t-ok { color: var(--m-green); }
.t-comment { color: var(--fg-mute); }
.t-cursor {
  display: inline-block; width: 7px; height: 13px;
  background: var(--m-blue);
  vertical-align: -2px;
  animation: blink 1s steps(2) infinite;
}

/* ─── sections ───────────────────────────────────────────────── */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 32px;
}
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin: 0 auto 56px; text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 16px;
}
.section-head h2 em {
  font-style: normal;
  background: var(--grad-1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head .section-sub {
  font-size: 17px; line-height: 1.55;
  color: var(--fg-dim);
  max-width: 600px;
}
.section-head.center .section-sub { margin: 0 auto; }

/* ─── features ──────────────────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.feature {
  position: relative;
  padding: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.2s;
}
.feature::before {
  content: ""; position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(30,167,255,.04), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.feature:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.feature:hover::before { opacity: 1; }
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(30, 167, 255, 0.08);
  color: var(--m-blue);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.feature h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.feature p {
  font-size: 14px; line-height: 1.55;
  color: var(--fg-dim);
  margin: 0;
}

/* ─── systems ───────────────────────────────────────────────── */
.systems-section { padding-top: 60px; }
.systems-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 18px;
}
.sys-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.sys-pill:hover {
  border-color: var(--m-blue);
  color: var(--m-blue);
}
.sys-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--m-blue);
  box-shadow: 0 0 10px var(--m-blue);
}
.sys-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  padding-left: 8px;
  border-left: 1px solid var(--line);
}
.systems-note {
  font-size: 13px; color: var(--fg-mute);
  margin: 0;
}
.systems-note a { color: var(--m-blue); }

/* ─── dashboard ─────────────────────────────────────────────── */
.dashboard-section {
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.dash-card {
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
}
.dash-card::after {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--m-blue), transparent);
  opacity: .6;
}
.dash-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
}
.dash-value {
  font-size: 32px; font-weight: 700;
  color: var(--m-blue);
  letter-spacing: -0.02em;
}
.dash-foot {
  font-size: 11px; color: var(--fg-mute);
  margin-top: auto;
}

.dash-status {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.dash-status span:nth-child(odd) {
  color: var(--fg-mute);
  padding-right: 6px;
  border-right: 1px solid var(--line-strong);
  margin-right: 6px;
}
.dash-status .ok { color: var(--m-green); }
.dash-status .ok::before {
  content: "● "; font-size: 10px;
}

/* ─── open source ───────────────────────────────────────────── */
.oss-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.oss-panel {
  padding: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.oss-panel header {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--m-blue);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.oss-panel header a { color: var(--fg-dim); }
.oss-panel ul {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px;
  color: var(--fg-dim);
}
.oss-panel strong { color: var(--fg); font-weight: 600; }
.stack { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(30, 167, 255, 0.06);
  border: 1px solid rgba(30, 167, 255, 0.18);
  border-radius: 100px;
  color: var(--m-blue);
}

/* ─── download ──────────────────────────────────────────────── */
.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.dl-card {
  padding: 28px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 6px;
  transition: all 0.2s;
  cursor: pointer;
}
.dl-card:hover {
  border-color: var(--m-blue);
  transform: translateY(-2px);
  box-shadow: 0 20px 60px -20px rgba(30, 167, 255, 0.3);
}
.dl-os { color: var(--m-blue); margin-bottom: 8px; }
.dl-card h3 {
  font-size: 18px; font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.dl-card p { font-size: 13px; color: var(--fg-dim); margin: 0 0 12px; }
.dl-size {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.dl-foot {
  text-align: center;
  font-size: 13px; color: var(--fg-mute);
  margin: 0;
}
.dl-foot code {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--m-blue);
}

/* ─── contact ───────────────────────────────────────────────── */
.contact-section {
  max-width: 720px;
  background: var(--bg-elev);
  border-radius: 24px;
  margin: 100px auto;
  padding: 56px 48px;
  border: 1px solid var(--line);
}
.contact-section .section-head { margin-bottom: 32px; }
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
}
.contact-form label.full { grid-column: 1 / -1; }
.contact-form input, .contact-form textarea {
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--fg);
  transition: border-color 0.15s;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--m-blue);
  box-shadow: 0 0 0 3px rgba(30, 167, 255, 0.15);
}
.contact-form textarea { resize: vertical; min-height: 96px; font-family: var(--font-mono); }
.contact-form button { grid-column: 1 / -1; justify-self: start; }
.contact-status {
  grid-column: 1 / -1;
  font-size: 14px;
  font-family: var(--font-mono);
  margin: 0;
  min-height: 20px;
}
.contact-status.ok { color: var(--m-green); }
.contact-status.err { color: var(--m-red); }

/* ─── footer ────────────────────────────────────────────────── */
.footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 32px 32px;
  border-top: 1px solid var(--line);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.foot-grid h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  margin: 0 0 14px;
}
.foot-grid a {
  display: block;
  font-size: 14px;
  color: var(--fg-dim);
  margin-bottom: 8px;
  transition: color 0.15s;
}
.foot-grid a:hover { color: var(--m-blue); }
.foot-tag {
  font-size: 14px; line-height: 1.55;
  color: var(--fg-mute);
  margin: 12px 0 0;
  max-width: 320px;
}
.foot-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-mute);
}
.foot-mono { font-family: var(--font-mono); }

/* ─── animations ─────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}
@keyframes pulse-ring {
  0%, 100% { stroke-dasharray: 207 70; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 230 47; stroke-dashoffset: 23; }
}
@keyframes sweep {
  0% { transform: translateY(0); opacity: .3; }
  50% { transform: translateY(60px); opacity: .9; }
  100% { transform: translateY(0); opacity: .3; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes barpulse {
  0%, 100% { width: 62%; }
  50% { width: 67%; }
}

/* ─── responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-stage { aspect-ratio: 5/4; }
  .hud-rpm, .hud-temp, .hud-dtc { display: none; }
  .nav-links { display: none; }
  .oss-panels { grid-template-columns: 1fr; }
  .contact-section { padding: 40px 24px; margin: 60px 16px; }
  .contact-form { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .nav { padding: 12px 18px; }
  .nav-cta .btn-ghost { display: none; }
  .hero, .section, .footer { padding-left: 18px; padding-right: 18px; }
  .counter-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
  .terminal-body { font-size: 11px; height: 160px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}