/* home.css — landing page, hero, signature ticker */

.hero {
  padding: 72px 0 0;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-copy h1 {
  margin-bottom: 20px;
}
.hero-copy .lead {
  font-size: 1.15rem;
  color: var(--ink-dim);
  max-width: 46ch;
  margin-bottom: 32px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-stat .stat-value { font-size: 1.6rem; }

/* Console panel visual on the right */
.console-panel {
  background: var(--bg-raised);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.console-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel);
}
.console-dot { width: 10px; height: 10px; border-radius: 50%; }
.console-dot:nth-child(1) { background: var(--alert); }
.console-dot:nth-child(2) { background: var(--warn); }
.console-dot:nth-child(3) { background: var(--signal); }
.console-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-left: 8px;
}
.console-body {
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.9;
  height: 280px;
  overflow: hidden;
}
.console-line {
  white-space: nowrap;
  color: var(--ink-dim);
}
.console-line .ts { color: var(--ink-faint); }
.console-line .lvl-crit { color: var(--alert); font-weight: 600; }
.console-line .lvl-warn { color: var(--warn); font-weight: 600; }
.console-line .lvl-ok { color: var(--signal); font-weight: 600; }

/* Signature element: scrolling threat pulse ticker strip */
.pulse-strip {
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  background: var(--bg-raised);
  overflow: hidden;
  margin-top: 64px;
  position: relative;
}
.pulse-strip::before,
.pulse-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.pulse-strip::before { left: 0; background: linear-gradient(90deg, var(--bg-raised), transparent); }
.pulse-strip::after { right: 0; background: linear-gradient(270deg, var(--bg-raised), transparent); }

.pulse-track {
  display: flex;
  gap: 48px;
  padding: 14px 0;
  width: max-content;
  animation: pulse-scroll 45s linear infinite;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: nowrap;
}
.pulse-track:hover { animation-play-state: paused; }

@keyframes pulse-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.pulse-item { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-dim); }
.pulse-item .sev { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; letter-spacing: 0.04em; }
.pulse-item .sev-critical { background: rgba(255,107,94,0.14); color: var(--alert); }
.pulse-item .sev-high { background: rgba(245,185,66,0.14); color: var(--warn); }
.pulse-item .sev-medium { background: rgba(91,141,239,0.14); color: var(--info); }

/* Pillars section (3 offerings) */
.pillar-card {
  padding: 32px;
  position: relative;
}
.pillar-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  background: var(--bg-raised);
  border: 1px solid var(--panel-border);
  color: var(--signal);
}
.pillar-card h3 { margin-bottom: 10px; }
.pillar-card p { margin-bottom: 20px; }
.pillar-card .btn { padding: 8px 16px; font-size: 0.85rem; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .console-panel { max-width: 560px; }
}