/* Single CSS entry — add new stylesheets below; pages only link main.css */
@import url("./style.css");

/*
 * Critical interaction styles (fallback if @import is blocked on file://).
 * Duplicated from style.css so reveal + card hover still work locally.
 */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.card-interactive {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid #f9f9f9;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.card-interactive:hover {
  box-shadow: 0 8px 28px rgba(11, 31, 58, 0.12) !important;
  border-color: rgba(92, 45, 122, 0.2) !important;
  transform: translateY(-2px) !important;
}

.solution-benefit-card,
.solution-feature-card,
.solution-strength-card,
.solution-strength-feature-card,
.solution-contact-benefit-card,
.solution-mis-benefit-card,
.solution-whatap-product-card,
.solution-clounge-benefit-card {
  transition: box-shadow 0.25s ease, transform 0.25s ease,
    border-color 0.25s ease;
}

.solution-benefit-card:hover,
.solution-feature-card:hover,
.solution-strength-card:hover,
.solution-strength-feature-card:hover,
.solution-contact-benefit-card:hover,
.solution-mis-benefit-card:hover,
.solution-whatap-product-card:hover,
.solution-clounge-benefit-card:hover {
  box-shadow: 0 8px 28px rgba(11, 31, 58, 0.12);
  border-color: rgba(92, 45, 122, 0.2);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}