.hero {
  background: var(--dark);
  color: var(--text-dark);
  padding: 148px 0 96px;
  position: relative;
  overflow: hidden;
}

/* Subtle noise/depth overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 50%, rgba(29,78,216,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(249,115,22,0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Split grid */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: center;
}

/* Left column */
.hero-content { max-width: 600px; }

.hero h1 {
  color: #fff;
  margin-bottom: 20px;
}

.lede {
  font-size: 17px;
  color: var(--muted-dark);
  margin-bottom: 36px;
  line-height: 1.72;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.hero .btn-ghost {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.2);
  background: transparent;
}
.hero .btn-ghost:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

/* Trust row */
.trust-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.32);
}
.trust-row div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.trust-row .lucide { width: 12px; height: 12px; }
.sep {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.12);
}

/* Right column — status card with photo background */
.hero-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  background-image: url('/images/pexels-field-engineer-147254-442152.jpg');
  background-size: cover;
  background-position: center top;
}

/* Dark overlay so metrics stay readable */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(13,31,60,0.78) 0%, rgba(13,31,60,0.90) 100%);
  z-index: 0;
  border-radius: inherit;
}

/* Lift all card content above the overlay */
.hero-card-header,
.hero-metrics {
  position: relative;
  z-index: 1;
}

.hero-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.noc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.hero-card-header span {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.hero-card-header .time {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-weight: 400;
}

/* Metric rows */
.hero-metrics { display: flex; flex-direction: column; gap: 0; }

.hero-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-metric:last-child { border-bottom: 0; padding-bottom: 0; }

.hero-metric-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted-dark);
}
.hero-metric-label .lucide { width: 15px; height: 15px; color: rgba(147,197,253,0.7); }

.hero-metric-value {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.hero-metric-value.green { color: #4ade80; }

/* Responsive */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr 360px; gap: 48px; }
}

@media (max-width: 880px) {
  .hero { padding: 108px 0 72px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-card { max-width: 480px; }
  .trust-row .sep { display: none; }
}

@media (max-width: 480px) {
  .hero-card { display: none; }
}