/* Stage 7 — five glass discovery cards with real image assets and section links */
.feature-cards {
  position: relative;
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.55rem, .85vw, .9rem);
  width: min(calc(100% - 14rem), 76rem);
  margin: -11.6rem auto 4.5rem;
}
.feature-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(140 226 255 / 47%);
  border-radius: 1.12rem;
  color: #f4fbff;
  background: linear-gradient(155deg, rgb(88 177 226 / 29%), rgb(4 37 68 / 82%) 80%);
  box-shadow: 0 14px 34px rgb(0 13 35 / 26%), inset 0 1px 0 rgb(255 255 255 / 17%), 0 0 18px rgb(35 183 255 / 10%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  text-decoration: none;
  isolation: isolate;
  transition: transform 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), background 240ms var(--ease-out);
}
.feature-card::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
  background: linear-gradient(130deg, rgb(255 255 255 / 12%), transparent 26%, transparent 72%, rgb(85 218 255 / 11%));
  opacity: .8;
}
.feature-card:hover {
  z-index: 3;
  border-color: rgb(184 242 255 / 92%);
  background: linear-gradient(155deg, rgb(93 194 241 / 36%), rgb(4 43 76 / 89%) 80%);
  box-shadow: 0 20px 42px rgb(0 11 30 / 35%), inset 0 1px 0 rgb(255 255 255 / 24%), 0 0 28px rgb(46 192 255 / 24%);
  transform: translateY(-6px);
}
.feature-card:focus-visible { outline: 3px solid #d5f6ff; outline-offset: 4px; }
.feature-card__number {
  display: flex;
  min-height: 2rem;
  align-items: center;
  gap: .35rem;
  padding: .55rem .72rem .35rem;
  color: #dff7ff;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.feature-card__number span { color: #9fd5eb; font-size: .52rem; font-weight: 650; letter-spacing: .12em; }
.feature-card__visual {
  position: relative;
  display: block;
  height: clamp(4.25rem, 6.4vw, 6.5rem);
  overflow: hidden;
  margin: 0 .52rem;
  border: 1px solid rgb(187 238 255 / 24%);
  border-radius: .7rem;
  background: rgb(4 29 53 / 60%);
}
.feature-card__visual::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgb(2 22 42 / 0%) 40%, rgb(3 24 47 / 25%) 100%);
}
.feature-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 460ms var(--ease-out), filter 460ms var(--ease-out); }
.feature-card:hover .feature-card__visual img { transform: scale(1.055); filter: saturate(1.08); }
.feature-card__body {
  position: relative;
  display: flex;
  min-height: 7rem;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: .65rem .78rem .85rem;
}
.feature-card__title { max-width: calc(100% - .2rem); color: #fff; font-size: clamp(.78rem, .95vw, .95rem); font-weight: 740; line-height: 1.25; text-wrap: balance; }
.feature-card__description { display: block; max-width: 19rem; margin-top: .35rem; padding-right: .1rem; color: #d1e7f4; font-size: clamp(.64rem, .7vw, .72rem); line-height: 1.48; }
.feature-card__arrow {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  place-items: center;
  align-self: flex-end;
  margin-top: auto;
  padding-top: .05rem;
  border: 1px solid rgb(102 221 255 / 70%);
  border-radius: 50%;
  color: #f2fbff;
  background: rgb(6 95 153 / 34%);
  box-shadow: 0 0 15px rgb(44 191 255 / 13%);
  font-size: 1rem;
  line-height: 1;
  transition: transform 220ms var(--ease-out), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.feature-card:hover .feature-card__arrow { background: rgb(23 157 213 / 65%); box-shadow: 0 0 18px rgb(44 191 255 / 34%); transform: translate(2px, -2px); }

/* Keep the quote above the card row on medium and large screens. */
@media (min-width: 1151px) {
  .quote-card { bottom: 31%; }
  .hero-scroll-hint { display: none; }
}
@media (min-width: 761px) and (max-width: 1150px) {
  .feature-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(calc(100% - 8rem), 64rem); margin-top: -8.5rem; margin-bottom: 3rem; }
  .feature-card__visual { height: 6.3rem; }
  .feature-card__body { min-height: 6.3rem; }
  .quote-card { bottom: 39%; }
  .hero-scroll-hint { display: none; }
}
@media (max-width: 760px) {
  .feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: calc(100% - 1.5rem); margin: 1.1rem auto 3rem; }
  .feature-card { border-radius: .95rem; }
  .feature-card__number { min-height: 1.8rem; padding: .45rem .58rem .3rem; font-size: .58rem; }
  .feature-card__visual { height: clamp(5rem, 19vw, 7rem); margin-inline: .42rem; }
  .feature-card__body { min-height: 6.2rem; padding: .58rem .62rem .68rem; }
  .feature-card__title { font-size: .82rem; }
  .feature-card__description { font-size: .67rem; }
  .feature-card__arrow { width: 1.5rem; height: 1.5rem; }
  .hero-scroll-hint { display: none; }
}
@media (max-width: 390px) {
  .feature-cards { gap: .55rem; width: calc(100% - 1rem); }
  .feature-card__number { font-size: .54rem; letter-spacing: .08em; }
  .feature-card__number span { font-size: .45rem; }
  .feature-card__visual { height: 4.5rem; }
  .feature-card__body { padding-inline: .52rem; }
  .feature-card__title { font-size: .76rem; }
  .feature-card__description { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card__visual img, .feature-card__arrow { transition: none !important; }
  .feature-card:hover, .feature-card:hover .feature-card__visual img, .feature-card:hover .feature-card__arrow { transform: none !important; }
}