/* ─── HERO CARD · audit spreadsheet ─── */
/* Sheet title bar — extends to card edges via negative margin */
.hc-sheet-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: -18px -20px 14px;
  padding: 10px 14px;
  background: rgba(5, 10, 27, 0.55);
  border-bottom: 1px solid var(--border-color);
}
.hc-sheet-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  min-width: 0;
}
.hc-sheet-icon {
  width: 14px;
  height: 14px;
  color: var(--accent-blue-soft);
  flex-shrink: 0;
}
.hc-sheet-fname {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spreadsheet table */
.hc-table {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 68px 64px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: rgba(5, 10, 27, 0.40);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.hc-row { display: contents; }
.hc-cell {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hc-row:last-child > .hc-cell { border-bottom: none; }

/* Header row — small caps, mono, dimmer */
.hc-row--head > .hc-cell {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(5, 10, 27, 0.55);
  padding: 7px 10px;
}

/* Body cells */
.hc-c-id    { color: var(--text-muted); }
.hc-c-issue { color: var(--text-secondary); }
.hc-c-src   { color: var(--accent-blue-soft); }
.hc-c-sev {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

/* Severity dots — cobalt opacity scale (single-signal palette) */
.hc-sev-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hc-sev-dot.high {
  background: var(--accent-blue-soft);
  box-shadow: 0 0 10px rgba(96, 160, 255, 0.65),
              0 0 0 1px rgba(96, 160, 255, 0.3);
}
.hc-sev-dot.med {
  background: rgba(96, 160, 255, 0.60);
}
.hc-sev-dot.low {
  background: rgba(96, 160, 255, 0.25);
}

/* Sheet footer — "+ N more rows" hint */
.hc-sheet-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.hc-sheet-foot-cta { color: var(--accent-blue-soft); }

/* Row reveal — staggered fade in from the left, like data populating */
.hc-table > .hc-row:not(.hc-row--head) > .hc-cell {
  animation: hc-row-in 0.55s ease-out both;
}
.hc-table > .hc-row:nth-child(2) > .hc-cell { animation-delay: 0.30s; }
.hc-table > .hc-row:nth-child(3) > .hc-cell { animation-delay: 0.42s; }
.hc-table > .hc-row:nth-child(4) > .hc-cell { animation-delay: 0.54s; }
.hc-table > .hc-row:nth-child(5) > .hc-cell { animation-delay: 0.66s; }
.hc-table > .hc-row:nth-child(6) > .hc-cell { animation-delay: 0.78s; }
.hc-table > .hc-row:nth-child(7) > .hc-cell { animation-delay: 0.90s; }
@keyframes hc-row-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hc-table > .hc-row > .hc-cell { animation: none; }
}

/* Responsive — tighter columns on narrower viewports */
@media (max-width: 1024px) {
  .hc-table { grid-template-columns: 34px minmax(0, 1fr) 64px 60px; }
}
@media (max-width: 480px) {
  .hc-sheet-bar { margin: -18px -20px 12px; padding: 8px 12px; }
  .hc-sheet-name { font-size: 0.66rem; }
  .hc-table { grid-template-columns: 28px minmax(0, 1fr) 54px 54px; font-size: 0.62rem; }
  .hc-cell { padding: 7px 8px; }
}

/* ─── HERO PRICE ─── */
.hero-price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 28px;
}
.hero-price-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-price-value {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-blue);
}

/* ─── PLATFORMS / WHAT WE AUDIT ─── */
.platforms { padding: 100px 0 60px; }
.platforms-header { text-align: center; margin-bottom: 40px; }
.platforms-header .section-subtitle { margin: 0 auto; }
.platforms .platform-grid {
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .platforms .platform-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .platforms { padding: 56px 0 24px; }
  .platforms .platform-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── DATA GAP / WHY CARE ─── */
.data-gap { padding: 80px 0 100px; }
.data-gap-header { text-align: center; margin-bottom: 56px; }
.data-gap-header .section-subtitle { margin: 0 auto; }
.data-gap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .data-gap-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 560px;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .data-gap { padding: 48px 0 56px; }
  .data-gap-header { margin-bottom: 32px; }
}

/* ─── BOTTOM CTA ─── */
.bottom-cta { padding: 60px 0 100px; }
.bottom-cta-card {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.10), transparent 60%),
    linear-gradient(135deg, rgba(11,27,57,0.55) 0%, rgba(7,15,38,0.55) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.bottom-cta-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.bottom-cta-card .section-label { display: inline-block; }
.bottom-cta-card .section-title {
  max-width: 720px;
  margin: 0 auto 16px;
}
.bottom-cta-card p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 28px;
  line-height: 1.65;
}
.bottom-cta-card .btn-primary {
  padding: 10px 28px 10px 46px;
}
.bottom-cta-card .price-note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .bottom-cta { padding: 48px 0 64px; }
  .bottom-cta-card { padding: 40px 24px; }
}
