:root {
  --blue-primary: #1075CD;
  --blue-dark: #0B4678;
  --description-color: rgba(26, 26, 26, 0.7);
  --card-bg: #ffffff;
  --card-border: #F3F4F6;
  --card-border-hover: rgba(16, 117, 205, 0.3);
  --icon-bg: #E7F1FB;
}

* { box-sizing: border-box; }

/* Section Container */
.why-section { background: var(--card-bg); padding: 4rem 1rem; }
.why-container { max-width: 1400px; margin: 0 auto; padding: 0 1rem; }

/* Header */
.why-head { text-align: center; margin-bottom: 3rem; }
.why-head .kicker {
  display: inline-block;
  font-size: 0.75rem; /* mobile 12px */
  font-weight: 700;
  color: var(--blue-primary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.why-head h2 {
  font-size: 1.875rem; /* mobile 30px */
  font-weight: 700;
  color: var(--blue-dark);
  margin: 0 0 1rem;
  letter-spacing: -0.025em;
  text-align: center;
}
.why-head p {
  font-size: 1rem; /* mobile */
  color: var(--description-color);
  max-width: 48rem; /* 768px */
  margin: 0 auto;
  font-weight: 300;
  line-height: 1.625;
  text-align: center;
}

/* Grid */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

/* Card */
.why-card {
  background: var(--card-bg);
  padding: 1.5rem; /* p-6 mobile */
  border-radius: 1rem; /* 16px */
  border: 2px solid var(--card-border);
  transition: all 300ms;
  min-height: 170px;

  /* Keep existing entrance animation hooks */
  opacity: 0;
  transform: translateY(30px);
  transition-property: opacity, transform, box-shadow, border-color;
  transition-duration: 0.8s, 0.8s, 0.3s, 0.3s;
}

.why-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.why-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-color: var(--card-border-hover);
  transform: translateY(-10px);
}

.why-card h3 {
  font-size: 1.125rem; /* mobile 18px */
  font-weight: 700;
  color: var(--blue-dark);
  margin: 0 0 0.75rem;
}

.why-card p {
  font-size: 0.875rem; /* mobile 14px */
  color: var(--description-color);
  line-height: 1.625;
  margin: 0;
}

/* Icon */
.icon-wrap {
  width: 3.5rem; /* 56px */
  height: 3.5rem;
  background: var(--icon-bg);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem; /* mb-5 */
  transition: transform 300ms;
}
.why-card:hover .icon-wrap { transform: scale(1.1); }
.icon-wrap svg { width: 1.75rem; height: 1.75rem; color: var(--blue-primary); }
.icon-wrap svg path { fill: var(--blue-primary); }

/* Responsive adjustments */
@media (min-width: 640px) {
  .why-section { padding: 5rem 1.5rem; }
  .why-container { padding: 0 1.5rem; }
  .why-head { margin-bottom: 4rem; }
  .why-head .kicker { font-size: 0.875rem; margin-bottom: 1rem; }
  .why-head h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
  .why-head p { font-size: 1.125rem; }

  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .why-card { padding: 2rem; /* p-8 */ }
  .icon-wrap { width: 4rem; height: 4rem; margin-bottom: 1.5rem; }
  .icon-wrap svg { width: 2rem; height: 2rem; }
  .why-card p { font-size: 1rem; }
}

@media (min-width: 1024px) {
  .why-section { padding: 6rem 2rem; }
  .why-container { padding: 0 2rem; }
  .why-head h2 { font-size: 3rem; }
  .why-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}