/* ============================================================
   iAmAI Design System — global stylesheet (vanilla translation
   of the approved React reference, 2026-05-28).
   "Matrix minimalist / control-room". Cyan+purple primary,
   mint #00FF88 as an ACCENT only (success/live).
   All background layers are position:fixed — they never affect
   document flow, so they can't push content below the fold.
   ============================================================ */

:root {
  --bg:         #000000;
  --bg-deep:    #020617;
  --neon:       #00D4FF;   /* primary */
  --neon-2:     #8B5CF6;   /* secondary */
  --mint:       #00FF88;   /* ACCENT — success/live only */
  --net-line:   #2563EB;
  --neon-glow:  rgba(0, 212, 255, 0.5);
  --text:       #FFFFFF;
  --text-muted: #94A3B8;
  --text-dim:   #B4B4B4;
  --border:     rgba(255, 255, 255, 0.10);
  --border-neon:rgba(0, 212, 255, 0.30);
  --success:    #10B981;
  --warn:       #F59E0B;
  --danger:     #EF4444;
}

html, body { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Heebo', system-ui, sans-serif;
  color: var(--text);
  overflow-x: hidden;
  position: relative;
}

/* ─── 1. Code rain ─────────────────────────────────────────── */
.code-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  font-family: 'Fira Code', monospace; font-size: 11px; line-height: 1.5;
}
.code-col {
  position: absolute; top: -120%; white-space: pre;
  animation: code-fall linear infinite;
  color: rgba(0, 212, 255, 0.50);
  text-shadow: 0 0 4px rgba(0, 212, 255, 0.4);
}
.code-col.bright { color: rgba(0, 212, 255, 0.95); text-shadow: 0 0 8px rgba(0, 212, 255, 0.85); font-weight: 500; }
.code-col.purple { color: rgba(139, 92, 246, 0.65); text-shadow: 0 0 6px rgba(139, 92, 246, 0.6); }
@keyframes code-fall { from { top: -120%; } to { top: 120%; } }

/* ─── 2. Network constellation ─────────────────────────────── */
.network-svg { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.3; }

/* ─── 3. Twinkling stars ───────────────────────────────────── */
.stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.star { position: absolute; border-radius: 50%; background: #fff; animation: twinkle ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: 0.1; } 50% { opacity: 0.7; } }

/* ─── 4. Glow orbs ─────────────────────────────────────────── */
.glow-1 {
  position: fixed; top: -200px; right: -100px; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,212,255,0.13), transparent 60%);
  pointer-events: none; z-index: 2; filter: blur(80px);
}
.glow-2 {
  position: fixed; bottom: -200px; left: -100px; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(139,92,246,0.13), transparent 60%);
  pointer-events: none; z-index: 2; filter: blur(80px);
}

/* ─── 5. Vignette ──────────────────────────────────────────── */
.vignette {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.5) 100%);
  pointer-events: none; z-index: 2;
}

/* ─── 6. Text halo (dark blur behind central content) ──────────
   z-index 3 keeps it BELOW page content (which sits at z>=10), so it
   only darkens the rain — it must never cover text. Add the
   <div class="text-halo"> ONLY on single-screen pages (audit,
   billing-activate); long scrolling pages use per-section backing
   instead (a fixed centre halo would only darken the middle band). */
.text-halo {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse at center,
    rgba(2, 6, 23, 0.95) 0%, rgba(2, 6, 23, 0.70) 40%, transparent 70%);
  pointer-events: none; z-index: 3; filter: blur(40px);
}

/* ─── Foreground convention: content sits at z>=10 ─────────── */
.iamai-fg { position: relative; z-index: 10; }

/* ============================================================
   LOGO — constellation mark sizing helper (SVG dropped inline)
   ============================================================ */
.iamai-logo-mark { width: 36px; height: 36px; display: block; }

/* ============================================================
   GLASS PANEL / CARDS
   ============================================================ */
.glass-panel {
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-neon);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.iamai-card {
  position: relative;
  background: rgba(0, 0, 0, 0.60);
  border: 1px solid var(--border-neon);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.iamai-card:hover {
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}
/* top neon gradient line */
.iamai-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon), var(--neon-2), transparent);
}
/* 4 corner pulsing dots */
.iamai-card .corner-dot {
  position: absolute; width: 6px; height: 6px; border-radius: 1px;
  background: var(--neon); animation: dot-pulse 2s ease-in-out infinite;
}
.iamai-card .corner-dot.tr { top: 8px; right: 8px; }
.iamai-card .corner-dot.tl { top: 8px; left: 8px;  animation-delay: 0.5s; }
.iamai-card .corner-dot.br { bottom: 8px; right: 8px; animation-delay: 1s; }
.iamai-card .corner-dot.bl { bottom: 8px; left: 8px;  animation-delay: 1.5s; }
@keyframes dot-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
/* purple variant (AI cards) */
.iamai-card.ai { border-color: rgba(139,92,246,0.3); }
.iamai-card.ai:hover { border-color: rgba(139,92,246,0.6); box-shadow: 0 0 20px rgba(139,92,246,0.15); }
.iamai-card.ai::before { background: linear-gradient(90deg, transparent, var(--neon-2), transparent); }

/* ============================================================
   BUTTONS
   ============================================================ */
/* Primary action — mono, cyan outline, fills on hover */
.btn-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px;
  background: rgba(0, 212, 255, 0.10);
  border: 1px solid var(--neon);
  color: var(--neon);
  font-family: 'Heebo', sans-serif; font-size: 14px; font-weight: 700;
  border-radius: 8px; cursor: pointer; text-decoration: none;
  text-shadow: 0 0 8px var(--neon-glow);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
  transition: all 0.2s;
}
.btn-action:hover {
  background: var(--neon); color: #000;
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
  transform: translateY(-2px);
}
.btn-action.btn-large { padding: 16px 36px; font-size: 16px; }
.btn-action[disabled], .btn-action.is-disabled {
  opacity: 0.5; cursor: not-allowed; transform: none;
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.1);
}

/* Solid primary — filled cyan */
.btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; background: var(--neon); border: 1px solid var(--neon);
  color: #000; font-family: 'Fira Code', monospace; font-weight: 700; font-size: 14px;
  border-radius: 8px; cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.btn-solid:hover { background: #fff; border-color: #fff; color: #000; }

/* Ghost outline — sans, 2px border (e.g. "המשך") */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 32px; background: transparent; border: 2px solid var(--neon);
  color: var(--neon); font-family: 'Heebo', sans-serif; font-weight: 500; font-size: 16px;
  border-radius: 6px; cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.btn-ghost:hover { background: rgba(0,212,255,0.10); box-shadow: 0 0 15px rgba(0,212,255,0.4); }

/* Danger */
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.5); color: var(--danger);
  font-family: 'Fira Code', monospace; font-size: 14px; border-radius: 8px;
  cursor: pointer; text-decoration: none; transition: all 0.2s;
}
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ============================================================
   BADGES  (mono, bracketed)
   ============================================================ */
.sys-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Fira Code', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 4px; border: 1px solid;
}
.sys-badge.ok    { color: var(--mint);   border-color: rgba(0,255,136,0.3);  background: rgba(0,255,136,0.10); }
.sys-badge.warn  { color: var(--warn);   border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.10); }
.sys-badge.error { color: var(--danger); border-color: rgba(239,68,68,0.3);  background: rgba(239,68,68,0.10); }
.sys-badge.ai    { color: var(--neon-2); border-color: rgba(139,92,246,0.3); background: rgba(139,92,246,0.10); }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.sys-progress { width: 100%; height: 6px; background: #1e293b; border-radius: 100px; overflow: hidden; position: relative; }
.sys-progress__fill { height: 100%; background: var(--neon); box-shadow: 0 0 10px var(--neon); border-radius: 100px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }

/* ============================================================
   UTILITIES
   ============================================================ */
.glow-cyan        { box-shadow: 0 0 15px rgba(0, 212, 255, 0.4); }
.glow-purple      { box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); }
.text-glow-cyan   { text-shadow: 0 0 10px rgba(0, 212, 255, 0.7); }
.text-glow-purple { text-shadow: 0 0 10px rgba(139, 92, 246, 0.7); }
/* heavy dark halo on text that floats directly over the rain */
.iamai-text-on-bg {
  text-shadow: 0 0 20px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,0.9), 0 0 60px rgba(0,0,0,0.7);
}

/* mono system label "> TEXT" */
.sys-label {
  font-family: 'Fira Code', monospace; font-size: 12px;
  color: var(--neon); text-shadow: 0 0 8px var(--neon-glow);
}
.sys-label::before { content: '> '; }

/* ============================================================
   Accessibility — honour reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .code-col, .star, .corner-dot { animation: none !important; }
}