html { scroll-behavior: smooth; }

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -50%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,193,7,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero-card {
  position: relative;
  z-index: 2;
}

.problem-card {
  transition: transform .2s ease, box-shadow .2s ease;
}

.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

.step-card {
  transition: transform .2s ease, box-shadow .25s ease;
}

.step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.1) !important;
}

.step-num {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.cta-section {
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  color: #1a1a2e !important;
}

.cta-section h2, .cta-section .lead, .cta-section .small {
  color: #1a1a2e !important;
}

.cta-section .btn-warning {
  background: #1a1a2e;
  border-color: #1a1a2e;
  color: #ffc107;
}

.cta-section .btn-warning:hover {
  background: #000;
  border-color: #000;
  color: #ffc107;
}

@media (max-width: 768px) {
  .display-4 { font-size: 2rem; }
  .display-5 { font-size: 1.75rem; }
}