.features-grid-section {
  /* Same plain white as the hero section. */
  background: #fff;
  color: var(--ink);
  padding: 96px 32px;
  scroll-margin-top: 72px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.features-grid-section .wrap { max-width: 1200px; }

/* h2 left, p right -- overrides the shared centered/stacked .section-head. */
.features-grid-section .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  max-width: none;
  text-align: left;
  margin: 0 0 60px;
}
.features-grid-section .section-head h2 {
  flex: 1 1 480px;
  margin: 0;
  text-align: left;
}
.features-grid-section .section-head p {
  flex: 1 1 320px;
  max-width: 420px;
  margin: 0;
  text-align: left;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .features-grid-section .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .features-grid-section .section-head h2,
  .features-grid-section .section-head p {
    flex: none;
    max-width: none;
  }
}

/* ---- Bento grid ----
   hero  top   top
   hero  mid1  mid2
   bottom bottom corner
*/
.features-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  grid-template-rows: minmax(200px, auto) minmax(200px, auto) minmax(240px, auto);
  grid-template-areas:
    "hero top top"
    "hero mid1 mid2"
    "bottom bottom corner";
  gap: 20px;
}

.feature-card--hero { grid-area: hero; }
.feature-card--top { grid-area: top; }
.feature-card--mid1 { grid-area: mid1; }
.feature-card--mid2 { grid-area: mid2; }
.feature-card--bottom { grid-area: bottom; }
.feature-card--corner { grid-area: corner; }

/* Animatable angle driving the conic-gradient sweep below -- registering it
   means the browser tweens the angle smoothly frame-to-frame instead of
   snapping between keyframes, and `inherits: true` lets the ::before/::after
   glow + ring share one rotation with a single animation. Unsupported
   browsers just see a static (unanimated) gradient -- harmless fallback. */
@property --feature-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

.feature-card {
  position: relative;
  border-radius: 24px;
  --feature-glow-angle: 0deg;
  animation: feature-glow-spin 4.5s linear infinite;
  transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card:hover {
  transform: translateY(-3px);
}

/* Each card runs its own speed, with a negative delay so it starts
   mid-cycle instead of all six syncing up on load -- the point is that
   they drift in and out of phase with each other rather than glowing
   as one unit. */
.feature-card--hero   { animation-duration: 4.2s; animation-delay: -0.6s; }
.feature-card--top    { animation-duration: 5.6s; animation-delay: -2.3s; }
.feature-card--mid1   { animation-duration: 3.8s; animation-delay: -1.1s; }
.feature-card--mid2   { animation-duration: 6.1s; animation-delay: -3.8s; }
.feature-card--bottom { animation-duration: 4.9s; animation-delay: -0.2s; }
.feature-card--corner { animation-duration: 5.3s; animation-delay: -4.4s; }

/* Soft blurred halo -- the "glow" -- sized past the card's own edges. Lives
   on the outer element (which has no overflow:hidden of its own) so the
   blur isn't clipped; the image-bleed clipping happens one level in, on
   .feature-card-inner, instead. */
.feature-card::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  background: conic-gradient(from var(--feature-glow-angle),
    transparent 0%, transparent 70%,
    var(--accent) 84%, var(--accent-light) 90%, var(--accent) 96%,
    transparent 100%);
  filter: blur(16px);
  opacity: .65;
  z-index: -1;
  pointer-events: none;
}

/* Crisp crawling ring right at the card edge, via the mask-composite
   "punch a hole the size of the padding-box out of a filled box" trick --
   avoids touching the actual border/background so it layers cleanly over
   the inner card's own edge. */
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--feature-glow-angle),
    transparent 0%, transparent 70%,
    var(--accent) 84%, var(--accent-light) 90%, var(--accent) 96%,
    transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes feature-glow-spin {
  to { --feature-glow-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card { animation: none; }
}

.feature-card-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: inherit;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
  transition: box-shadow .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card:hover .feature-card-inner {
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.1);
}

.feature-card-text {
  position: relative;
  z-index: 2;
  padding: 30px 28px 0;
  max-width: 66%;
}
.feature-card--top .feature-card-text,
.feature-card--bottom .feature-card-text { max-width: 50%; }

.feature-card-text h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}
.feature-card-text p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 10px 0 0;
}

.feature-card-media {
  position: absolute;
  pointer-events: none;
}
.feature-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.14));
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card:hover .feature-card-media img {
  transform: scale(1.045);
}

/* Bleeds toward the bottom edge -- oversized and pushed past the card's
   own left/right/bottom bounds so the render is genuinely cropped by the
   card, not just floating inside it with margin. */
.feature-card-media--bottom {
  left: -8%;
  right: -8%;
  bottom: -16%;
  height: 74%;
}

/* Bleeds toward the right edge -- text stays clear on the left half. */
.feature-card-media--right {
  right: -16%;
  top: 2%;
  bottom: -12%;
  width: 64%;
}

/* Bleeds off the bottom-right corner of a squarer card. */
.feature-card-media--corner {
  right: -20%;
  bottom: -20%;
  width: 80%;
  height: 80%;
}

@media (max-width: 980px) {
  .features-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "top top"
      "mid1 mid2"
      "bottom bottom"
      "corner corner";
  }
  .feature-card--hero { min-height: 320px; }
  .feature-card-text,
  .feature-card--top .feature-card-text,
  .feature-card--bottom .feature-card-text { max-width: 60%; }
}

@media (max-width: 860px) {
  .features-grid-section { padding: 72px 20px; }
}

@media (max-width: 640px) {
  .features-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "top"
      "mid1"
      "mid2"
      "bottom"
      "corner";
    gap: 16px;
  }
  .feature-card { min-height: 260px; }
  .feature-card-text,
  .feature-card--top .feature-card-text,
  .feature-card--bottom .feature-card-text {
    max-width: none;
    padding: 24px 20px 0;
  }
  .feature-card-media--right {
    right: -2%;
    top: auto;
    bottom: -6%;
    width: 58%;
    height: 46%;
  }
}

@media (max-width: 560px) {
  .features-grid-section { padding: 56px 14px; }
  .feature-card { border-radius: 18px; }
}