/* ==========================================================================
   FEATURES — serene mosaic grid
   Nine feature cards in a calm 3×3 editorial grid, mixing card moods like
   a Pinterest board: light glass, sky-gradient, full-photo with overlaid
   info, photo with a frosted inner panel, and one deep-navy card. Every
   card carries a live animated SVG icon. features.js adds .is-in on the
   section and staggered .is-seen per card for the scroll reveal.
   ========================================================================== */

.mia-feat {
  position: relative;
  padding: clamp(76px, 10vh, 120px) clamp(16px, 4vw, 56px) clamp(70px, 9vh, 110px);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 26%, #f6fafd 74%, #ffffff 100%);   /* follows the portal showcase, which ends on white */
  overflow: hidden;
}

/* soft ambient glows so it blends with the neighbouring sections */
.mia-feat::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 30% at 18% 24%, rgba(125, 184, 232, 0.18), transparent 70%),
    radial-gradient(38% 28% at 84% 62%, rgba(186, 156, 232, 0.1), transparent 70%),
    radial-gradient(30% 24% at 60% 90%, rgba(255, 196, 160, 0.12), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}

/* ---------------- header ---------------- */

/* the header is a grid cell: full-width + centered on small screens,
   the top-left bento cell (left-aligned) on desktop */
.mia-feat__head {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(12px, 1.8vh, 20px);
  max-width: 760px;
  margin: 0 auto clamp(16px, 3vh, 28px);
}

.mia-feat__eyebrow {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid rgba(34, 54, 74, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2b5f8f;
}

.mia-feat__title {
  margin: 0;
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #16324f;
}

.mia-feat__title em {
  font-style: normal;
  color: #4a97d8;
}

/* line — anchor — line rule under the heading */
.mia-feat__title::after {
  content: '';
  display: block;
  width: 190px;
  height: 16px;
  margin: 20px auto 0;
  background-color: #4a97d8;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cline x1='12' y1='22' x2='12' y2='8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(#000, #000) left center / 70px 1.5px no-repeat,
    linear-gradient(#000, #000) right center / 70px 1.5px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cline x1='12' y1='22' x2='12' y2='8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(#000, #000) left center / 70px 1.5px no-repeat,
    linear-gradient(#000, #000) right center / 70px 1.5px no-repeat;
}


.mia-feat__para {
  margin: 0;
  max-width: 560px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.65;
  color: #45607a;
}

/* ---------------- grid ---------------- */

.mia-feat__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  max-width: 1800px;   /* near full-bleed so wide monitors have no dead gutters */
  margin: 0 auto;
}

/* desktop bento — heading occupies the top-left cell, two wide photo
   cards anchor rows 1 and 3, everything else fills 1×1 cells:
   ┌───────┬───────────────┐
   │ head  │      02       │
   ├───────┼───────┬───────┤
   │  01   │  03   │  04   │
   ├───────┴───────┬───────┤
   │      06       │  05   │
   ├───────┬───────┼───────┤
   │  07   │  08   │  09   │
   └───────┴───────┴───────┘ */
@media (min-width: 1001px) {
  .mia-feat__grid {
    grid-template-areas:
      "head a a"
      "b    c d"
      "e    e f"
      "g    h i";
    /* rows grow gently with the viewport so wide screens keep pleasant
       card proportions instead of ultra-flat strips */
    grid-auto-rows: minmax(clamp(290px, 17vw, 400px), auto);
  }

  .mia-feat__head {
    grid-area: head;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    max-width: none;
    margin: 0;
    padding-right: clamp(8px, 2vw, 36px);
  }

  .mia-feat__card { min-height: 0; }

  .mia-feat__card--area-a { grid-area: a; }
  .mia-feat__card--area-b { grid-area: b; }
  .mia-feat__card--area-c { grid-area: c; }
  .mia-feat__card--area-d { grid-area: d; }
  .mia-feat__card--area-e { grid-area: e; }
  .mia-feat__card--area-f { grid-area: f; }
  .mia-feat__card--area-g { grid-area: g; }
  .mia-feat__card--area-h { grid-area: h; }
  .mia-feat__card--area-i { grid-area: i; }

  /* wide landscape cards get roomier copy */
  .mia-feat__card--area-a .mia-feat__desc,
  .mia-feat__card--area-e .mia-feat__desc { max-width: 560px; }
}

/* ---------------- card base ---------------- */

.mia-feat__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 14px;
  min-height: clamp(360px, 30vw, 440px);
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 22px;
  overflow: hidden;
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.22, 0.8, 0.3, 1),
    box-shadow 0.35s ease;
  will-change: transform;
}

.mia-feat__card:hover {
  transform: translateY(-5px);
}

/* scroll reveal (features.js adds .is-seen with a stagger) */
.mia-feat__card:not(.is-seen) {
  opacity: 0;
  transform: translateY(34px);
}

.mia-feat__name {
  margin: 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #22364a;
}

.mia-feat__desc {
  margin: 0;
  max-width: 300px;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.62;
  color: #45607a;
}

/* double selector so the variants' `> *` position:relative can't override it */
.mia-feat__card .mia-feat__num {
  position: absolute;
  right: 20px;
  bottom: 16px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: rgba(34, 54, 74, 0.32);
}

/* ---------------- icon tile ---------------- */

.mia-feat__icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #e9f3fc 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  outline: 1px solid rgba(34, 54, 74, 0.08);
  outline-offset: -1px;
  box-shadow:
    0 12px 24px -10px rgba(9, 40, 72, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  color: #0a63e6;
  --mia-tile: #edf4fc;   /* occludes strokes behind badges */
}

.mia-feat__icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.mia-feat__icon .i-fill { fill: currentColor; stroke: none; }

/* ======================================================================
   VARIANT · light glass  (default text colours already suit it)
   ====================================================================== */

.mia-feat__card--light {
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(244, 249, 253, 0.75) 55%,
    rgba(232, 242, 252, 0.8) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.9);
  outline: 1px solid rgba(34, 54, 74, 0.08);
  outline-offset: -1px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 22px 44px -22px rgba(9, 40, 72, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.mia-feat__card--light:hover {
  box-shadow:
    0 30px 56px -24px rgba(9, 40, 72, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* soft radial glow behind the icon (candle-card mood) */
.mia-feat__card--glow::before {
  content: '';
  position: absolute;
  top: 14%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(125, 184, 232, 0.4), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

/* ======================================================================
   VARIANT · sky gradient  (white text on calm blue)
   ====================================================================== */

.mia-feat__card--sky {
  background: linear-gradient(180deg, #6ea3d6 0%, #4d86c2 52%, #7cabd8 100%);
  box-shadow:
    0 24px 48px -22px rgba(45, 96, 148, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* drifting cloud-like softness */
.mia-feat__card--sky::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(40% 30% at 24% 26%, rgba(255, 255, 255, 0.4), transparent 70%),
    radial-gradient(46% 34% at 80% 74%, rgba(255, 255, 255, 0.28), transparent 70%),
    radial-gradient(34% 26% at 64% 18%, rgba(210, 234, 255, 0.35), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}

.mia-feat__card--sky > * { position: relative; z-index: 1; }

.mia-feat__card--sky .mia-feat__name { color: #ffffff; }
.mia-feat__card--sky .mia-feat__desc { color: rgba(255, 255, 255, 0.92); }
.mia-feat__card--sky .mia-feat__num  { color: rgba(255, 255, 255, 0.55); }

.mia-feat__card--sky .mia-feat__icon {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  outline-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #ffffff;
  --mia-tile: #5c92c9;
}

/* ======================================================================
   VARIANT · navy  (deep, like the reference's dark meditation card)
   ====================================================================== */

.mia-feat__card--navy {
  background: linear-gradient(170deg, #16324f 0%, #0d2740 55%, #0a1f35 100%);
  box-shadow:
    0 26px 52px -22px rgba(9, 40, 72, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.mia-feat__card--navy::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(42% 34% at 26% 24%, rgba(74, 144, 194, 0.35), transparent 70%),
    radial-gradient(38% 30% at 78% 78%, rgba(43, 95, 143, 0.4), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

.mia-feat__card--navy > * { position: relative; z-index: 1; }

.mia-feat__card--navy .mia-feat__name { color: #ffffff; }
.mia-feat__card--navy .mia-feat__desc { color: rgba(230, 238, 247, 0.85); }
.mia-feat__card--navy .mia-feat__num  { color: rgba(230, 238, 247, 0.4); }

.mia-feat__card--navy .mia-feat__icon {
  background: rgba(125, 184, 232, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  outline-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #7db8e8;
  --mia-tile: #123049;
}

/* ======================================================================
   VARIANT · photo  (full-bleed image, info overlaid at the bottom)
   ====================================================================== */

.mia-feat__card--photo {
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: 0;
  background: #16324f;
}

.mia-feat__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mia-feat__card--photo:hover .mia-feat__img { transform: scale(1.05); }

/* legibility wash */
.mia-feat__card--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 34, 57, 0.18) 0%, rgba(11, 34, 57, 0) 34%, rgba(9, 33, 56, 0.82) 100%);
  z-index: 1;
  pointer-events: none;
}

.mia-feat__card--photo .mia-feat__overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.2vw, 30px);
}

.mia-feat__card--photo .mia-feat__name { color: #ffffff; }
.mia-feat__card--photo .mia-feat__desc { color: rgba(235, 243, 250, 0.9); max-width: 320px; }
.mia-feat__card--photo .mia-feat__num  { color: rgba(255, 255, 255, 0.55); z-index: 2; }

/* frosted icon chip pinned top-left over the photo */
.mia-feat__icon--chip {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  outline-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #ffffff;
  --mia-tile: rgba(60, 90, 120, 0.6);
}

.mia-feat__icon--chip svg { width: 34px; height: 34px; }

/* chip flips to the top-right when the artwork's focus is top-left */
.mia-feat__icon--chip-right {
  left: auto;
  right: 18px;
}

/* checklist illustration: bias the crop upward so the artwork sits in the
   top of the card and its white lower-left stays clear for the copy */
.mia-feat__card--area-d .mia-feat__img { object-position: 50% 22%; }

/* checklist card: light illustration, so the copy sits at the bottom in
   the theme's navy text instead of white-on-wash */
.mia-feat__card--area-d::before {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 38%, rgba(255, 255, 255, 0) 62%);
}

.mia-feat__card--area-d .mia-feat__overlay { max-width: 72%; }
.mia-feat__card--area-d .mia-feat__name { color: #22364a; }
.mia-feat__card--area-d .mia-feat__desc { color: #45607a; }
.mia-feat__card--area-d .mia-feat__num  { color: rgba(34, 54, 74, 0.4); }

.mia-feat__card--area-d .mia-feat__icon--chip {
  color: #0a63e6;
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.95);
  outline-color: rgba(34, 54, 74, 0.1);
}

/* bigger display title for the drones card */
.mia-feat__card--tall-title .mia-feat__name {
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.18;
}

/* ======================================================================
   VARIANT · pane  (photo background + frosted glass inner panel)
   ====================================================================== */

.mia-feat__card--pane {
  padding: clamp(16px, 1.6vw, 22px);
  background: #9cc3e2;
  justify-content: flex-end;   /* panel low, so the photo's subject shows above */
}

.mia-feat__card--pane::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 34, 57, 0.05), rgba(11, 34, 57, 0.25));
  z-index: 1;
  pointer-events: none;
}

.mia-feat__pane {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  width: 100%;
  padding: clamp(22px, 2.2vw, 30px) clamp(18px, 1.8vw, 24px);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.62) 0%, rgba(240, 247, 253, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    0 18px 38px -18px rgba(9, 40, 72, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mia-feat__card--pane .mia-feat__name { color: #1d3a55; }
.mia-feat__card--pane .mia-feat__desc { color: #33506b; }
.mia-feat__card--pane .mia-feat__num  { color: rgba(255, 255, 255, 0.65); z-index: 2; }

.mia-feat__card--pane .mia-feat__icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.75);
  --mia-tile: #e4eff9;
}

/* ======================================================================
   VARIANT · person  (transparent-PNG figure over a soft gradient,
   copy left-aligned beside them — like the reference's people cards)
   ====================================================================== */

.mia-feat__card--person {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  background: linear-gradient(170deg, #eef5fc 0%, #d5e6f5 55%, #b9d4ec 100%);
}

.mia-feat__card--person > * { position: relative; z-index: 1; }

/* soft halo behind the figure */
.mia-feat__card--person::before {
  content: '';
  position: absolute;
  right: -12%;
  bottom: -20%;
  width: 70%;
  height: 90%;
  background: radial-gradient(50% 50% at 50% 55%, rgba(125, 184, 232, 0.5), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}

.mia-feat__figure {
  position: absolute;
  z-index: 0;
  right: clamp(-14px, -1vw, 0px);
  bottom: 0;
  height: 82%;
  max-width: 62%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
  user-select: none;
  /* the figure export lost its alpha — multiply sinks the white box into
     the card's light gradient so only the person reads */
  mix-blend-mode: multiply;
}

.mia-feat__card--person .mia-feat__name,
.mia-feat__card--person .mia-feat__desc { max-width: 58%; }

.mia-feat__card--person .mia-feat__desc { color: #3d5872; }

/* ======================================================================
   SEAMLESS TILES (desktop bento) — cards touch border-to-border like a
   mosaic wall: no gap, no shadows, square shared edges. Only the outer
   corners of the L-shaped tile block stay rounded. Double selectors so
   these outrank each variant's own radius/shadow/hover rules.
   ====================================================================== */

@media (min-width: 1001px) {
  .mia-feat__grid { gap: 0; }

  /* breathing room between the heading text and the tiles it touches */
  .mia-feat__grid .mia-feat__head {
    padding: 0 clamp(28px, 3vw, 56px) clamp(28px, 3.2vw, 56px) 0;
  }

  .mia-feat__grid .mia-feat__card {
    border-radius: 0;
    box-shadow: none;
  }

  .mia-feat__grid .mia-feat__card:hover {
    transform: none;
    box-shadow: none;
  }

  /* exposed outer corners of the tile block */
  .mia-feat__grid .mia-feat__card--area-a { border-radius: 26px 26px 0 0; }
  .mia-feat__grid .mia-feat__card--area-b { border-radius: 26px 0 0 0; }
  .mia-feat__grid .mia-feat__card--area-g { border-radius: 0 0 0 26px; }
  .mia-feat__grid .mia-feat__card--area-i { border-radius: 0 0 26px 0; }
}

/* ==========================================================================
   ICON ANIMATIONS — one subtle infinite loop per icon
   ========================================================================== */

/* 1 · wifi arcs pulse outwards */
.mia-feat__icon .i-w1,
.mia-feat__icon .i-w2,
.mia-feat__icon .i-w3 { animation: miaFeatWifi 2.4s ease-in-out infinite; }
.mia-feat__icon .i-w2 { animation-delay: 0.28s; }
.mia-feat__icon .i-w3 { animation-delay: 0.56s; }

@keyframes miaFeatWifi {
  0%, 100% { opacity: 0.22; }
  32%      { opacity: 1; }
  64%      { opacity: 0.22; }
}

/* 2 · magnifier sweeps over the crates */
.mia-feat__icon .i-mag {
  animation: miaFeatMag 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes miaFeatMag {
  0%, 100% { transform: translate(0, 0); }
  35%      { transform: translate(-7px, 6px); }
  70%      { transform: translate(2px, 9px); }
}

/* 3 · the booked day pulses */
.mia-feat__icon .i-day {
  animation: miaFeatDay 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes miaFeatDay {
  0%, 100% { fill: transparent; transform: scale(1); }
  45%      { fill: currentColor; fill-opacity: 0.35; transform: scale(1.12); }
}

/* 4 · checkmarks tick in one after another */
.mia-feat__icon .i-c1,
.mia-feat__icon .i-c2,
.mia-feat__icon .i-c3 {
  stroke-dasharray: 20;
  animation: miaFeatCheck 3.6s ease-in-out infinite;
}
.mia-feat__icon .i-c2 { animation-delay: 0.4s; }
.mia-feat__icon .i-c3 { animation-delay: 0.8s; }

@keyframes miaFeatCheck {
  0%       { stroke-dashoffset: 20; opacity: 0; }
  18%, 78% { stroke-dashoffset: 0;  opacity: 1; }
  92%, 100%{ stroke-dashoffset: 20; opacity: 0; }
}

/* 5 · gears turn (teeth are thick dashed rings) */
.mia-feat__icon .i-teeth  { stroke-width: 5;   stroke-dasharray: 1 1; stroke-linecap: butt; }
.mia-feat__icon .i-teeth2 { stroke-width: 4.5; stroke-dasharray: 1 1; stroke-linecap: butt; }

.mia-feat__icon .i-gear1,
.mia-feat__icon .i-gear2 {
  animation: miaFeatGear 7s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.mia-feat__icon .i-gear2 { animation-direction: reverse; animation-duration: 5s; }

@keyframes miaFeatGear { to { transform: rotate(360deg); } }

/* 6 · drone hovers, props blur-spin */
.mia-feat__icon .i-drone {
  animation: miaFeatHover 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes miaFeatHover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}

.mia-feat__icon .i-prop {
  animation: miaFeatProp 0.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.mia-feat__icon .i-propb { animation-delay: 0.12s; }

@keyframes miaFeatProp {
  0%, 100% { transform: scaleX(1);    opacity: 1; }
  50%      { transform: scaleX(0.15); opacity: 0.55; }
}

/* 7 · clock hands turn */
.mia-feat__icon .i-min,
.mia-feat__icon .i-hr {
  transform-box: view-box;
  transform-origin: 32px 34px;
  animation: miaFeatGear 4s linear infinite;
}
.mia-feat__icon .i-hr { animation-duration: 48s; }

/* 8 · warning halo pulses, exclamation blinks */
.mia-feat__icon .i-halo {
  animation: miaFeatHalo 2s ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 32px 38px;
}

@keyframes miaFeatHalo {
  0%, 100% { opacity: 0;    transform: scale(1); }
  40%      { opacity: 0.35; transform: scale(1.16); }
  75%      { opacity: 0;    transform: scale(1.24); }
}

.mia-feat__icon .i-bang,
.mia-feat__icon .i-bangdot { animation: miaFeatBang 2s ease-in-out infinite; }

@keyframes miaFeatBang {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.25; }
  60%      { opacity: 1; }
}

/* 9 · report lines write themselves, shield check redraws */
.mia-feat__icon .i-l1,
.mia-feat__icon .i-l2,
.mia-feat__icon .i-l3 {
  stroke-dasharray: 10;
  animation: miaFeatWrite 4s ease-in-out infinite;
}
.mia-feat__icon .i-l2 { animation-delay: 0.35s; }
.mia-feat__icon .i-l3 { animation-delay: 0.7s; }

@keyframes miaFeatWrite {
  0%       { stroke-dashoffset: 10; opacity: 0; }
  16%, 82% { stroke-dashoffset: 0;  opacity: 1; }
  94%, 100%{ stroke-dashoffset: 10; opacity: 0; }
}

.mia-feat__icon .i-shield { fill: var(--mia-tile); }

.mia-feat__icon .i-scheck {
  stroke-dasharray: 20;
  animation: miaFeatCheck 4s ease-in-out infinite 0.9s;
}

/* ==========================================================================
   ENTRY (.is-in) — header rises first
   ========================================================================== */

.mia-feat__head > * {
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mia-feat:not(.is-in) .mia-feat__head > * {
  opacity: 0;
  transform: translateY(30px);
}

.mia-feat.is-in .mia-feat__head > :nth-child(2) { transition-delay: 0.08s; }
.mia-feat.is-in .mia-feat__head > :nth-child(3) { transition-delay: 0.16s; }

/* ---------------- responsive ---------------- */

@media (max-width: 1000px) {
  .mia-feat__grid { grid-template-columns: repeat(2, 1fr); }
  .mia-feat__card { min-height: clamp(340px, 44vw, 420px); }
  .mia-feat__head { grid-column: 1 / -1; }

  /* nine cards in two columns orphan the last one — the wide Reports &
     Compliance card spans the full row instead of leaving a gap */
  .mia-feat__card--area-a { grid-column: 1 / -1; }
  .mia-feat__card--area-a .mia-feat__desc { max-width: 560px; }
}

@media (max-width: 640px) {
  .mia-feat__grid { grid-template-columns: 1fr; }
  .mia-feat__card { min-height: 0; padding: 28px 22px; }
  .mia-feat__card--photo { padding: 0; min-height: 380px; }
  .mia-feat__card--pane  { padding: 16px; }
}

/* ======================================================================
   PHONE DECK — features.js adds .is-deck on the section below 641px.
   The nine cards collapse into one stacked, swipeable deck: the front
   card centered, the next two peeking out on the right (Travel-app
   style). Swipe or tap the stack / dots to browse.
   ====================================================================== */

@media (max-width: 640px) {
  .mia-feat.is-deck .mia-feat__grid {
    display: block;
    position: relative;
    /* reserve the stage the absolute cards sit on */
    padding-bottom: calc(min(64vh, 470px) + 18px);
  }

  .mia-feat.is-deck .mia-feat__head { margin-bottom: clamp(22px, 4vh, 34px); }

  .mia-feat.is-deck .mia-feat__card {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 86%;
    min-height: 0;
    height: min(64vh, 470px);
    margin: 0;
    pointer-events: none;
    transition:
      transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1),
      opacity 0.4s ease;
  }

  .mia-feat.is-deck .mia-feat__card.is-front {
    transform: translateX(-50%);
    opacity: 1;
    z-index: 5;
    pointer-events: auto;
  }

  .mia-feat.is-deck .mia-feat__card.is-p1 {
    transform: translateX(calc(-50% + 24px)) scale(0.94);
    opacity: 1;
    z-index: 4;
    pointer-events: auto;   /* the exposed sliver is tappable */
  }

  .mia-feat.is-deck .mia-feat__card.is-p2 {
    transform: translateX(calc(-50% + 48px)) scale(0.88);
    opacity: 1;
    z-index: 3;
  }

  .mia-feat.is-deck .mia-feat__card.is-rest {
    transform: translateX(calc(-50% + 48px)) scale(0.88);
    opacity: 0;
    z-index: 1;
  }

  /* the dismissed front card slides off to the left */
  .mia-feat.is-deck .mia-feat__card.is-leaving {
    transform: translateX(-135%) rotate(-6deg);
    opacity: 0;
    z-index: 6;
  }

  /* instant repositioning (no animation) — used to park a returning card
     off-screen left before it glides back in on a back-swipe */
  .mia-feat.is-deck .mia-feat__card.is-snap {
    transition: none !important;
  }

  /* wide artwork cards: aim the portrait crop at the baked-in text so it
     isn't cut off (Reports & Compliance card art) */
  .mia-feat.is-deck .mia-feat__card--area-a .mia-feat__img { object-position: 35% 50%; }

  /* the NO SIGNAL graphic is wider than any portrait crop allows — show
     the whole artwork on its own white ground instead of cropping */
  .mia-feat.is-deck .mia-feat__card--area-b .mia-feat__img {
    object-fit: contain;
    object-position: 50% 26%;
    background: #ffffff;
  }

  /* peeking cards keep their photo/gradient but hide busy innards */
  .mia-feat.is-deck .mia-feat__card.is-p1 > :not(.mia-feat__img),
  .mia-feat.is-deck .mia-feat__card.is-p2 > :not(.mia-feat__img),
  .mia-feat.is-deck .mia-feat__card.is-rest > :not(.mia-feat__img) {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}

/* pagination dots (built by features.js, visible only in deck mode) */
.mia-feat__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.mia-feat.is-deck .mia-feat__dots { display: flex; }

.mia-feat__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(34, 54, 74, 0.22);
  transition: width 0.3s ease, background 0.3s ease;
}

.mia-feat__dots button.is-on {
  width: 20px;
  background: #2b5f8f;
}

/* ---------------- dark theme ---------------- */

[data-theme="dark"] .mia-feat {
  background: linear-gradient(180deg, #04101d 0%, #071a2e 45%, #04101d 100%);
}

[data-theme="dark"] .mia-feat::before {
  background:
    radial-gradient(42% 30% at 18% 24%, rgba(43, 95, 143, 0.25), transparent 70%),
    radial-gradient(38% 28% at 84% 62%, rgba(74, 42, 120, 0.16), transparent 70%);
}

[data-theme="dark"] .mia-feat__eyebrow {
  background: rgba(13, 32, 52, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
  color: #7db8e8;
}

[data-theme="dark"] .mia-feat__title { color: #e6eef7; }
[data-theme="dark"] .mia-feat__title em { color: #7db8e8; }
[data-theme="dark"] .mia-feat__title::after { background-color: #6fb1de; }

[data-theme="dark"] .mia-feat__para { color: #9db4c9; }

[data-theme="dark"] .mia-feat__card--light {
  background: linear-gradient(165deg, rgba(16, 38, 60, 0.9) 0%, rgba(10, 28, 47, 0.8) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  outline-color: rgba(0, 0, 0, 0.4);
  box-shadow:
    0 22px 44px -22px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .mia-feat__card--light .mia-feat__name { color: #e6eef7; }
[data-theme="dark"] .mia-feat__card--light .mia-feat__desc { color: #9db4c9; }
[data-theme="dark"] .mia-feat__card--light .mia-feat__num  { color: rgba(230, 238, 247, 0.3); }

[data-theme="dark"] .mia-feat__card--light .mia-feat__icon {
  background: rgba(125, 184, 232, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  outline-color: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #7db8e8;
  --mia-tile: #10263c;
}

[data-theme="dark"] .mia-feat__card--sky {
  background: linear-gradient(180deg, #2b5f8f 0%, #1d466e 52%, #2b5f8f 100%);
}

[data-theme="dark"] .mia-feat__card--person {
  background: linear-gradient(170deg, #123049 0%, #0d2740 55%, #0a1f35 100%);
}

[data-theme="dark"] .mia-feat__card--person .mia-feat__name { color: #e6eef7; }
[data-theme="dark"] .mia-feat__card--person .mia-feat__desc { color: #9db4c9; }

[data-theme="dark"] .mia-feat__card--person .mia-feat__icon {
  background: rgba(125, 184, 232, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #7db8e8;
  --mia-tile: #10263c;
}

/* multiply blending needs a light ground — on the dark card the figure
   would sink into black, so let the card go text-only in dark mode */
[data-theme="dark"] .mia-feat__figure { display: none; }
[data-theme="dark"] .mia-feat__card--person .mia-feat__name,
[data-theme="dark"] .mia-feat__card--person .mia-feat__desc { max-width: none; }

[data-theme="dark"] .mia-feat__card--pane .mia-feat__pane {
  background: linear-gradient(165deg, rgba(13, 32, 52, 0.72) 0%, rgba(10, 28, 47, 0.6) 100%);
  border-color: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .mia-feat__card--pane .mia-feat__name { color: #e6eef7; }
[data-theme="dark"] .mia-feat__card--pane .mia-feat__desc { color: #b8cbdd; }

[data-theme="dark"] .mia-feat__card--pane .mia-feat__icon {
  background: rgba(125, 184, 232, 0.14);
  color: #a8cae6;
  border-color: rgba(255, 255, 255, 0.18);
  --mia-tile: #12293f;
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .mia-feat *,
  .mia-feat *::before,
  .mia-feat *::after {
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}