:root {
  --accent: #4a7c45;
  --accent-hover: #3d6b39;
  --accent-subtle: rgba(74,124,69,0.12);
  --accent-text: #6aad64;
  --surface: #0f1210;
  --surface-1: #151a14;
  --surface-2: #1c231a;
  --surface-3: #232c21;
  --border: #2a3528;
  --text-primary: #e8f0e6;
  --text-secondary: #8fa889;
  --text-muted: #556b52;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--surface); color: var(--text-primary); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* Fade-in animation */
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Demo Dashboard Styles */
.demo-container { position: relative; overflow: hidden; }
.demo-screen {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.demo-topbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-dot { width: 10px; height: 10px; border-radius: 50%; }
.demo-dot.red { background: #ff5f57; }
.demo-dot.yellow { background: #febc2e; }
.demo-dot.green { background: #28c840; }
.demo-title { font-size: 11px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; margin-left: 8px; }

/* Ring gauge */
.ring-gauge { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ring-gauge svg { transform: rotate(-90deg); }
.ring-gauge .ring-label { position: absolute; text-align: center; }

/* Sparkline */
.sparkline-container { position: relative; height: 40px; width: 100%; overflow: hidden; }

/* Terminal */
.terminal { background: var(--surface); border-radius: 8px; padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; overflow: hidden; }
.terminal-line { padding: 1px 0; }
.terminal-line.pass { color: var(--accent-text); }
.terminal-line.fail { color: #f87171; }
.terminal-line.run { color: #fbbf24; }
.terminal-line.info { color: var(--text-secondary); }

/* Training chart */
.chart-container { position: relative; width: 100%; height: 80px; }

/* Animated status dot */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.status-pulse { animation: pulse 2s ease-in-out infinite; }

/* Language switcher */
.lang-btn { padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); transition: all 0.2s; }
.lang-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.lang-btn.active { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent-text); }

/* Hidden lang sections */
.lang-section { display: none; }
.lang-section.active { display: block; }

/* Announcement banner */
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.announcement { animation: slideDown 0.6s ease forwards; }

/* Grid patterns */
.hero-grid {
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
}

/* Scrolling test log */
@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.test-scroll { animation: scrollUp 20s linear infinite; }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; border: 1px solid; }
.badge-green { border-color: rgba(74,124,69,0.4); background: var(--accent-subtle); color: var(--accent-text); }
.badge-yellow { border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.08); color: #fbbf24; }
.badge-blue { border-color: rgba(96,165,250,0.3); background: rgba(96,165,250,0.08); color: #60a5fa; }

/* About card */
.about-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface-1); padding: 32px; }

/* ===================== MOBILE ===================== */

/* Mobile drawer link hover */
#mobile-menu a:hover { background: var(--surface-2); color: var(--text-primary); }

@media (max-width: 768px) {

  /* Hero text — prevent overflow */
  .hero-title { font-size: clamp(1.9rem, 8vw, 3.5rem) !important; }

  /* Stats bar — 2 cols on mobile */
  .stats-bar-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* About card padding */
  .about-card { padding: 20px; }

  /* Pipeline — better scroll hint */
  .pipeline-scroll { -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .pipeline-scroll::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0;
    width: 40px; background: linear-gradient(to right, transparent, var(--surface-1));
    pointer-events: none;
  }

  /* Demo topbar title truncate */
  .demo-title { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Tagline wrap */
  .hero-tagline { font-size: 11px !important; line-height: 1.8 !important; }

  /* Use case big cards — reduce padding */
  .uc-card { padding: 18px !important; }

  /* Lang buttons kompakter auf Mobile */
  .lang-btn { padding: 4px 8px; font-size: 11px; }
}