/* Hero Component Styles */

.hero-section {
  padding: 5rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.hero-headline {
  font-size: 2.25rem;
  line-height: 1.05;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.hero-subheadline {
  color: #495057;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.hero-cta-buttons .btn {
  min-width: 180px;
}

/* Hero image and zoom */
.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hero-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(23, 32, 78, 0.08);
  transition: transform 300ms ease, box-shadow 300ms ease;
  will-change: transform;
}

/* Zoomed state toggled by JS */
.hero-image img.zoomed {
  transform: scale(1.7);
  box-shadow: 0 30px 80px rgba(23, 32, 78, 0.2);
  z-index: 1100;
}

body.hero-image-zoom {
  overflow: hidden; /* prevent background scroll when zoomed */
}

/* Diagram steps */
.solution-diagram {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.diagram-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border-radius: 10px;
  min-width: 120px;
  box-shadow: 0 6px 18px rgba(23, 32, 78, 0.06);
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.diagram-step .diagram-icon {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.diagram-step.highlight,
.diagram-step:focus,
.diagram-step:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(23, 32, 78, 0.12);
  outline: none;
}

.diagram-arrow { font-size: 1.5rem; color: #6c757d; }

/* Reveal animation utility (used by home.js) */
.in-view {
  opacity: 1 !important;
  transform: none !important;
}

/* Generic reveal defaults for components that start hidden */
.problem-card,
.step-card,
.feature-card,
.impact-card {
  opacity: 0;
  transform: translateY(16px) scale(0.995);
  transition: opacity 520ms ease, transform 620ms cubic-bezier(.2,.9,.2,1);
}

/* Impact number styling */
.impact-number {
  font-size: 2.25rem;
  font-weight: 700;
  color: #ffffff;
}

/* Small responsive tweaks */
@media (max-width: 768px) {
  .hero-headline { font-size: 1.6rem; }
  .hero-subheadline { font-size: 1rem; }
}