body { background: #f7f7f9; }
.navbar-brand { letter-spacing: -0.02em; }
.btn-warning { background: #ffc107; border-color: #ffc107; color: #111; }
.btn-warning:hover { background: #e0a800; border-color: #e0a800; color: #111; }
pre { white-space: pre-wrap; }
.display-3, .display-5, .display-6 { letter-spacing: -0.02em; }

/* === HITT hero === */
.hitt-hero {
  background: linear-gradient(135deg, #0c0c0e 0%, #1a1733 50%, #1d1a3d 100%);
  border: 1px solid #2a2a3a;
}
.hitt-hero-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,193,7,0.12) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 36px 36px, 12px 12px;
  background-position: 0 0, 18px 18px;
  animation: hittDrift 22s linear infinite;
}
@keyframes hittDrift {
  to { background-position: 360px 360px, 378px 378px; }
}
.secret-sauce {
  border: 1px solid #2a2a3a;
  box-shadow: 0 0 60px rgba(255,193,7,0.15) inset;
}
.step-card { transition: transform 120ms ease; }
.step-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: #111; color: #ffc107; font-weight: 700;
}

/* === HITT roll feed === */
.hitt-roll { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; }
.hitt-roll-row { animation: rollIn 400ms ease-out; }
@keyframes rollIn {
  from { transform: translateX(-8px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.hitt-roll-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ffc107; display: inline-block;
  box-shadow: 0 0 0 0 rgba(255,193,7,0.7);
  animation: pulseDot 1.4s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(255,193,7,0.7); }
  70% { box-shadow: 0 0 0 12px rgba(255,193,7,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
}
.hitt-pulse { animation: pulseFade 1.2s ease-in-out infinite; }
@keyframes pulseFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* === BAKING page === */
.bake-stage {
  background: linear-gradient(135deg, #0a0a0c, #1a1733);
  border: 1px solid #2a2a3a;
  border-radius: 12px;
  margin-bottom: 16px;
  min-height: 320px;
}
.bake-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,193,7,0.18) 2px, transparent 2px),
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px, 16px 16px;
  animation: hittDrift 12s linear infinite;
  opacity: 0.6;
}
.bake-dots span {
  display: inline-block; opacity: 0.2;
  animation: bakeDot 1.4s infinite;
}
.bake-dots span:nth-child(2) { animation-delay: 0.2s; }
.bake-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bakeDot {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; color: #ffc107; }
}
.bake-meter { position: relative; }
.bake-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(255,193,7,0.35), rgba(255,193,7,0.15));
  transition: width 800ms ease;
  border-right: 2px solid #ffc107;
}
.bake-step { opacity: 0.5; transition: opacity 300ms; }
.bake-step.active { opacity: 1; color: #ffc107; }
.bake-step .num { font-size: 1.6rem; }
.bake-log {
  list-style: none; padding: 0; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem;
}
.bake-log li {
  padding: 4px 0; border-bottom: 1px dashed #eee;
  animation: rollIn 300ms ease-out;
}
.bake-log li:first-child { color: #111; font-weight: 600; }

/* matrix code rain inside the bake hero */
.bake-rain {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  opacity: 0.55;
  pointer-events: none;
}

/* horizontal reel of fake JSON / signals fragments */
.bake-reel {
  background: #0a0a0c;
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  height: 110px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #ffc107;
}
.bake-reel-track {
  position: absolute; inset: 0;
  padding: 8px 16px;
  display: flex; flex-wrap: wrap;
  gap: 6px 18px;
  overflow: hidden;
  align-content: flex-start;
  animation: reelScroll 40s linear infinite;
}
.bake-reel-line {
  white-space: nowrap;
  opacity: 0;
  animation: reelFade 6s linear forwards;
  text-shadow: 0 0 6px rgba(255,193,7,0.35);
}
@keyframes reelFade {
  0% { opacity: 0; transform: translateX(20px); }
  10% { opacity: 1; transform: translateX(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-30px); }
}
@keyframes reelScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-60px); }
}
.bake-reel-fade-l, .bake-reel-fade-r {
  position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.bake-reel-fade-l { left: 0; background: linear-gradient(90deg, #0a0a0c, transparent); }
.bake-reel-fade-r { right: 0; background: linear-gradient(-90deg, #0a0a0c, transparent); }

/* === Lead marketplace === */
.opportunity-bar {
  background: linear-gradient(135deg, #0c0c0e, #2a1f00);
  border: 1px solid #3a2a00;
}
.opportunity-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,193,7,0.16), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(220,53,69,0.16), transparent 40%);
}
.text-light-50 { color: rgba(255,255,255,0.55); }
.lead-locked { background: #fafafa; }
.lead-locked .locked-blur { color: #aaa; letter-spacing: 0.2em; }
.lock-icon { font-size: 1.1rem; }