/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */

.hero {
  /* Full-width so the grid bg texture bleeds edge to edge */
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* Inner wrapper constrains content to max-width */
.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-24) var(--section-pad-x) var(--space-20);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Canvas replaces CSS grid texture — positioned behind all content */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* Vignette overlay keeps left-side text readable over the canvas */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 20% 50%,
    rgba(8, 8, 16, 0.78) 0%,
    rgba(8, 8, 16, 0.35) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  /* z-index handled by .hero-inner */
}

/* Label */
.hero-label {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-family: var(--font-mono);
}

.hero-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

/* H1 */
.hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(44px, 4.75vw, 70px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin-bottom: 32px;
}

.hero-h1 em {
  color: var(--accent);
  font-style: normal;
}

/* Subline */
.hero-sub {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--sub);
  max-width: 480px;
  margin-bottom: 48px;
  font-weight: 300;
}

/* Actions */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ── Audit Report Card ── */

.hero-panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  font-size: var(--text-base);
  font-family: var(--font-mono);

  /* Entrance animation — slides in after headline */
  opacity: 0;
  transform: translateY(20px);
  animation: hero-line-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.95s forwards;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

.panel-dots {
  display: flex;
  gap: 5px;
}

.panel-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.panel-dots .d1 { background: var(--red); }
.panel-dots .d2 { background: var(--yellow); }
.panel-dots .d3 { background: var(--green); }

.panel-title {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.panel-body {
  padding: 20px;
}

/* Status badge */
.audit-status-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--green);
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 16px;
  opacity: 0.85;
}

/* Audit items */
.audit-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.audit-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 3px;

  /* Start hidden — JS adds .visible with stagger */
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.audit-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Icon circle */
.audit-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.audit-icon.icon-check {
  border: 1px solid var(--green);
}

/* Checkmark via pseudo-elements */
.audit-icon.icon-check::before,
.audit-icon.icon-check::after {
  content: '';
  position: absolute;
  background: var(--green);
  border-radius: 1px;
}

.audit-icon.icon-check::before {
  width: 4px;
  height: 1.5px;
  transform: rotate(45deg) translate(-1px, 1px);
}

.audit-icon.icon-check::after {
  width: 7px;
  height: 1.5px;
  transform: rotate(-45deg) translate(1px, 1px);
}

.audit-icon.icon-warn {
  border: 1px solid var(--yellow);
}

.audit-icon.icon-warn::before {
  content: '';
  position: absolute;
  width: 1.5px;
  height: 6px;
  background: var(--yellow);
  border-radius: 1px;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.audit-icon.icon-warn::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--yellow);
  border-radius: 50%;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

/* Audit text */
.audit-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--primary);
  margin: 0 0 3px;
  line-height: 1.4;
  font-family: var(--font-mono);
}

.audit-desc {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
  font-family: var(--font-mono);
}

/* Divider — reuses existing style */
.panel-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* Metric rows */
.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.metric-key {
  color: var(--muted);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
}

.metric-val {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--primary);
}

.metric-val.green  { color: var(--green); }
.metric-val.orange { color: var(--accent); }

/* ── Stats Strip ── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border);
  max-width: var(--max-width);
  margin: 0 auto;
  /* full-width border still needed — wrap in a border div */
  width: 100%;
}

/* Outer wrapper for stats to allow full-width border */
.stats-outer {
  border-bottom: 1px solid var(--border);
}

.stats-outer .stats {
  border-bottom: none;
}

.stat {
  padding: 36px var(--section-pad-x);
  border-right: 1px solid var(--border);
}

.stat:last-child {
  border-right: none;
}

.stat-n {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-n span {
  color: var(--c-amber);
}

.stat:nth-child(1) .stat-n { color: var(--primary); }
.stat:nth-child(1) .stat-n span { color: var(--c-blue); }
.stat:nth-child(2) .stat-n { color: var(--primary); }
.stat:nth-child(2) .stat-n span { color: var(--c-teal); }
.stat:nth-child(3) .stat-n { color: var(--primary); }
.stat:nth-child(4) .stat-n { color: var(--primary); }
.stat:nth-child(4) .stat-n span { color: var(--c-blue); }

.stat-label {
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Hero mouse-tracking glow ── */
.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 77, 0, 0.12) 0%,
    rgba(77, 158, 255, 0.06) 40%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.08s ease-out, top 0.08s ease-out;
  z-index: 0;
  filter: blur(2px);
}

/* Panel subtle glow on hero hover */
.hero:hover .hero-panel {
  border-color: var(--border-hi);
  transition: border-color 0.4s ease;
}

/* ── Hero canvas (grid animation) ── */
.hero-canvas-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* canvas receives events via hero mousemove */
}

#hero-canvas {
  display: block;
  opacity: 0.55;        /* subtle — content sits above it */
}

/* Fade the canvas out at the bottom so it dissolves into the stats strip */
.hero-canvas-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 55%,
    var(--bg) 100%
  );
  pointer-events: none;
}

/* Hero content and panel must sit above the canvas */
.hero-inner {
  position: relative;
  z-index: 1;
}

/* Remove the old JS glow — canvas replaces it */
.hero-glow { display: none; }


/* ── H1 staggered line reveal ── */

/* Each line starts invisible and 28px below its final position */
.hero-line {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  animation: hero-line-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  margin-bottom: 0.2em;
}

/* Stagger: each line starts 160ms after the previous */
.hero-line--1 { animation-delay: 0.25s; }
.hero-line--2 { animation-delay: 0.4s; }
.hero-line--3 { animation-delay: 0.75s; }

@keyframes hero-line-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger the sub-copy and buttons in after the headline */
.hero-sub {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-line-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}

.hero-actions {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-line-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}