/* ── Hero ────────────────────────────────────────────────── */
#heroLanding {
  background: var(--topbar-bg);
  position: relative;
}

@media (max-width: 768px) {
  #heroLanding > div { grid-template-columns: 1fr !important; padding: 48px 20px !important; gap: 36px !important; }
  #heroLanding h1    { font-size: 38px !important; }
}

.hero-live-dot {
  width: 8px; height: 8px;
  background: var(--success); /* FIX: era #10b981 hardcoded */
  border-radius: 50%; display: inline-block;
  animation: heroPulse 2s ease-in-out infinite;
}

@keyframes heroPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}

#heroLanding .hero-counter { animation: heroCountIn 1.2s ease-out forwards; }

@keyframes heroCountIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Features ────────────────────────────────────────────── */
#featuresSection {
  background: var(--bg); /* FIX: era #F8FAFC hardcoded */
  border-top: 1px solid var(--border);
  padding-bottom: 0;
}

.featuresGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.featureCard {
  background: var(--card-bg); /* FIX: era `white` hardcoded */
  padding: 28px; border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  transition: box-shadow 0.2s ease;
}
.featureCard:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

.featureIcon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 16px;
  background: var(--primary-light);
}

.featureTitle { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.featureText  { color: var(--text-light); line-height: 1.6; margin: 0; font-size: 14px; }

/* CTA section */
#featuresSection .ctaSection {
  background: var(--topbar-bg);
  margin-top: 60px; padding: 60px 20px;
  text-align: center;
}

/* ── Footer ──────────────────────────────────────────────── */
#footerSection {
  background: var(--topbar-bg);
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.06);
}