.why-grid-primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.why-card-dark {
  position: relative;
  background: color-mix(in srgb, var(--background) 50%, transparent);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-card-dark:hover {
  transform: translateY(-7px) scale(1.02);
  box-shadow: 0 34px 64px -18px rgba(15, 23, 42, 0.34);
}

.why-card-dark > *:not(.why-code-rain) {
  position: relative;
  z-index: 1;
}

.why-card-dark .why-row {
  padding: 1.25rem clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid rgba(158, 112, 249, 0.35);
  text-align: center;
}

.why-card-dark .why-row:last-child {
  border-bottom: none;
}

.why-card-dark h3 {
  display: block;
  width: fit-content;
  margin: 0 auto 1rem;
  font-size: 1.75rem;
  font-weight: 600;
  padding: 0.2em 0.7em;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--background) 32%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.why-card-dark p {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  padding: 0.15em 0.7em;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--background) 32%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.why-card-dark p + p {
  margin-top: 0.25rem;
}

.why-stat {
  display: inline-block;
  color: #22c55e;
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}

.why-grid-secondary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .why-grid-primary {
    grid-template-columns: 1fr;
  }
  .why-grid-secondary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .why-grid-secondary {
    grid-template-columns: 1fr;
  }
}

.why-card-light {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--background) 50%, transparent);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-card-light:hover {
  transform: translateY(-7px) scale(1.02);
  box-shadow: 0 34px 64px -18px rgba(15, 23, 42, 0.34);
}

.why-card-light > *:not(.why-code-rain) {
  position: relative;
  z-index: 1;
}

.why-code-rain {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.why-code-rain .code-seg {
  position: absolute;
  left: 0;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #c4b5fd;
  text-shadow: 0 0 6px rgba(196, 181, 253, 0.6);
  will-change: transform;
  animation-name: whyCodeDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Animates transform (GPU-composited) instead of left (which forced a layout
   recalculation on every frame for every one of the 100+ segments on screen
   at once and was visibly janking scroll past this section). translateX in
   vw crosses the whole card regardless of the segment's own text width,
   same as the old percentage-based left animation did. */
@keyframes whyCodeDrift {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(-100vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-code-rain {
    display: none;
  }
}

.why-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--primary), #a855f7);
  color: #fff;
}

.why-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.why-card-light h3 {
  display: block;
  width: fit-content;
  margin: 0 auto 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0.2em 0.7em;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--background) 32%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.why-card-light ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.why-card-light li {
  padding: 0.3em 0.6em;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--background) 32%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.why-card-light li + li {
  margin-top: 0.5rem;
}