/*
 * FEATURES (Aurix "#features"). Values from outline/features@1440|1024|390.txt and
 * styles/features@*.json — ≥1200 / 810–1199 / ≤809.
 */

/* ---------------------------------------------------------------- layout */
.ax-features { padding-top: 153px; }
.ax-features__inner { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.ax-features__body { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.ax-features__grid { display: flex; flex-direction: column; gap: 16px; width: 100%; overflow: hidden; }
.ax-features__row { display: flex; gap: 16px; width: 100%; overflow: hidden; }

/* row 1: 612 / 612 · row 2: 429.328 / 794.672 (flex 1 : 2 on a zero basis, padding outside the basis) */
.ax-features__card { flex: 1 0 0px; min-width: 0; }
.ax-features__row--2 .ax-features__card:nth-child(2) { flex-grow: 2; }

/* ---------------------------------------------------------------- card */
.ax-features__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
  height: 400px;
  padding: 32px;
}
.ax-features__row--2 .ax-features__card { justify-content: flex-start; }

.ax-features__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; overflow: hidden; flex: none; }
.ax-features__title { font-size: 28px; font-weight: 500; line-height: 30.8px; letter-spacing: -1.12px; color: var(--ax-text); text-align: left; }
.ax-features__desc { max-width: 500px; font-size: 14px; line-height: 18.2px; color: var(--ax-text-40); text-align: left; white-space: pre-wrap; }

/* visual slot: takes the rest of the card (548×213 at 1440). The screenshot sits at the top
   of the slot and bleeds past the card's bottom edge, clipped by the card and faded by
   .ax-card__shade — the same placement Aurix gives its mockup panels. */
.ax-features__visual { position: relative; flex: 1 1 0px; min-height: 0; width: 100%; }
/* Aurix mockup-panel frame: 1px radial-gradient border, r11 outer / r10 inner */
.ax-features__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1px;
  border-radius: 11px;
  background-image: radial-gradient(100% 100% at 0% 0%, rgb(108, 109, 111) 0%, rgb(22, 23, 25) 100%);
}
.ax-features__shot { width: 100%; height: auto; border-radius: 10px; }

/* ---------------------------------------------------------------- highlight row */
.ax-features__highlights {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-top: 32px;
}
.ax-features__hl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 0 0 auto;
  width: 250px;
  max-width: 250px;
  border-radius: 16px;
}
.ax-features__icon {
  position: relative;
  z-index: 0;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  color: rgb(255, 255, 255);
  background-image: radial-gradient(50% 50% at 50% 50%, rgba(129, 140, 248, 0.15) 0%, rgb(12, 14, 19) 100%);
  box-shadow: rgba(255, 255, 255, 0.6) 0px 0.5px 2px -1px inset, rgba(255, 255, 255, 0.08) 0px 10px 10px -1px inset, rgba(255, 255, 255, 0.5) 0px 10px 50px -10px;
}
.ax-features__hl:nth-child(2) .ax-features__icon { background-image: radial-gradient(50% 50% at 64.1% 36.7%, rgba(129, 140, 248, 0.15) 0%, rgb(12, 14, 19) 100%); }
.ax-features__hl:nth-child(3) .ax-features__icon { background-image: radial-gradient(50% 50% at 70.5% 33.1%, rgba(129, 140, 248, 0.15) 0%, rgb(12, 14, 19) 100%); }
.ax-features__icon svg { position: absolute; inset: 8px; width: 24px; height: 24px; }
/* Aurix icons are two-tone: white 1.5px outline + accent-green detail (the last shape) */
.ax-features__icon svg > :last-child:not(:first-child) { stroke: var(--ax-accent); }

.ax-features__hl-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; overflow: hidden; }
.ax-features__hl-title { font-size: 16px; font-weight: 400; line-height: 22.4px; color: var(--ax-text); text-align: left; }
.ax-features__hl-body { font-size: 14px; line-height: 18.2px; color: var(--ax-text-40); text-align: left; }

/* ---------------------------------------------------------------- 810–1199 (outline @1024) */
@media (max-width: 1199px) {
  .ax-features { padding-top: 120px; }
  .ax-features__card { height: 325px; padding: 24px; }
  .ax-features__row--1 .ax-features__card { gap: 32px; }
  .ax-features__title { font-size: 24px; line-height: 26.4px; letter-spacing: -0.96px; }

  .ax-features__highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    gap: 48px;
  }
  .ax-features__hl { width: 100%; max-width: 350px; }
}

/* ---------------------------------------------------------------- ≤809 (outline @390) */
@media (max-width: 809px) {
  .ax-features__body { gap: 0; }
  .ax-features__row { flex-direction: column; }
  .ax-features__card,
  .ax-features__row--2 .ax-features__card:nth-child(2) { flex: 0 0 auto; width: 100%; }
  .ax-features__row--1 .ax-features__card { gap: 40px; }

  .ax-features__highlights { display: flex; flex-direction: column; justify-content: flex-start; gap: 48px; padding-top: 56px; }
  .ax-features__hl { flex-direction: row; gap: 24px; width: 100%; max-width: 350px; }
  .ax-features__hl-text { flex: 1 1 0px; min-width: 0; }
}