/* ===========================================================================
   Bento grid.
   ---------------------------------------------------------------------------
   Seven cells filling a 4 × 3 grid exactly. Explicit placement rather than
   auto-flow, because auto-flow left an orphan hanging on its own row the
   moment a span did not divide neatly.

       ┌───────────────┬───────┬───────┐
       │               │       │  16   │
       │  One record   │  toy  ├───────┤
       │               │       │ payr  │
       ├───────────────┼───────┼───────┤
       │  door to pay  │ photo │ audit │
       └───────────────┴───────┴───────┘
   =========================================================================== */

.bento-wrap {
  background: var(--paper);
  padding: 104px 0;
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 178px 178px 214px;
  gap: 14px;
  margin-top: 48px;
}

.cell {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.3s,
    border-color 0.3s;
}
.cell:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 112, 106, 0.35);
  box-shadow: 0 22px 44px -24px rgba(4, 35, 31, 0.28);
}

.cell__ico {
  width: 25px;
  height: 25px;
  color: var(--teal);
  flex-shrink: 0;
  margin-bottom: 2px;
}
/* Isometric icons carry their own colour in the polygons, so they must not
   inherit the flat icon's stroke tint — and they earn more room. */
.cell__ico--3d {
  width: 54px;
  height: 54px;
  color: inherit;
  margin-bottom: 6px;
  filter: drop-shadow(0 8px 12px rgba(4, 35, 31, 0.22));
}
.cell > b {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}
.cell > span {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Placement ───────────────────────────────────────────────────────────── */
.cell--hero {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.cell--toy {
  grid-column: 3;
  grid-row: 1 / 3;
}
.cell--num {
  grid-column: 4;
  grid-row: 1;
}
.cell--accent {
  grid-column: 4;
  grid-row: 2;
}
.cell--wide {
  grid-column: 1 / 3;
  grid-row: 3;
}
.cell--photo {
  grid-column: 3;
  grid-row: 3;
}
.cell:last-child {
  grid-column: 4;
  grid-row: 3;
}

/* ── Hero cell ───────────────────────────────────────────────────────────── */
.cell--hero {
  background: linear-gradient(158deg, #04231f 0%, var(--ink-2) 60%, #0b5c52 100%);
  border-color: transparent;
  justify-content: center;
  padding: 34px;
}
.cell--hero h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  line-height: 1.02;
  color: #fff;
  letter-spacing: -0.02em;
}
.cell--hero p {
  margin-top: 13px;
  max-width: 42ch;
  font-size: 0.92rem;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.64);
}
.cell__link {
  display: inline-block;
  margin-top: 17px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--spring);
}
.cell__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── The toy ─────────────────────────────────────────────────────────────
   Given a whole cell rather than tucked in a corner. It is the one asset
   nobody else in this category has, so it may as well be seen.

   The spotlight is drawn in CSS behind the cutout, so the light in the cell
   and the light on the toy agree. */
.cell--toy {
  padding: 0;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(99, 231, 127, 0.24), transparent 70%),
    linear-gradient(165deg, #0d3d38, #04231f);
  border-color: transparent;
}

/* Bottom inset clears the caption gradient; the render is a seated 3/4 pose,
   so it is anchored to the floor of the cell rather than centred in it.

   Three things stop the cutout reading as pasted on:
     · a grade that warms its creams toward the cell's palette
     · a drop shadow in the cell's own dark green, not black
     · a mask that dissolves the last few percent, so the silhouette meets the
       floor instead of stopping dead against it */
.cell__mascot {
  position: absolute;
  inset: 7% 12% 22% 12%;
  background: url('../img/meet-trabbly.png') no-repeat center bottom / contain;
  filter: saturate(1.06) contrast(1.04) drop-shadow(0 18px 22px rgba(3, 26, 23, 0.6));
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 99%);
  animation: cell-bob 6s ease-in-out infinite;
  z-index: 2;
}

/* The aura. A blurred copy of the same artwork, so the halo is made of the
   toy's own colours rather than a guessed green — that is what makes the
   silhouette sit in the light of the box instead of on top of it. */
.cell__glow {
  position: absolute;
  inset: 7% 12% 22% 12%;
  background: url('../img/meet-trabbly.png') no-repeat center bottom / contain;
  filter: blur(20px) saturate(1.9) brightness(1.35);
  opacity: 0.5;
  animation: cell-bob 6s ease-in-out infinite;
  z-index: 1;
}

/* A contact shadow on the floor. Without it the cutout reads as pasted on;
   it counter-animates against the bob so the toy looks like it is lifting
   off something rather than the whole scene sliding. */
.cell__shadow {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 52%;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50%, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(6px);
  animation: cell-bob-shadow 6s ease-in-out infinite;
}
@keyframes cell-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-9px) rotate(-1.5deg);
  }
}
@keyframes cell-bob-shadow {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translateX(-50%) scale(0.86);
    opacity: 0.32;
  }
}

/* ── Photo cell ──────────────────────────────────────────────────────────
   Until the photograph lands this is a tinted panel with its caption, which
   reads as a designed block rather than a missing asset. */
.cell--photo {
  padding: 0;
  border-color: transparent;
  background: linear-gradient(150deg, var(--teal) 0%, var(--ink-2) 100%);
}
.cell__img {
  position: absolute;
  inset: 0;
  background-image: url('../img/people-1.jpg');
  background-size: cover;
  background-position: center;
  /* Desaturated and blended, so any stock shot lands inside the palette
     instead of importing whatever colours the shoot happened to have. */
  filter: grayscale(0.5) contrast(1.05);
  mix-blend-mode: luminosity;
  opacity: 0.92;
}

/* Above the mascot layers, which now stack to z-index 2. */
.cell__over {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 20px;
  display: grid;
  gap: 3px;
  background: linear-gradient(to top, rgba(4, 35, 31, 0.9), transparent);
}
.cell__over b {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.28;
}
.cell__over i {
  font-style: normal;
  font-size: 0.79rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

/* ── Number cell ─────────────────────────────────────────────────────────
   Scoped past `.cell > b`, which was winning on specificity and rendering
   this at body size. */
.cell--num {
  justify-content: center;
  gap: 2px;
}
.cell--num .cell__big {
  font-family: var(--display);
  font-weight: 400;
  font-size: 4.4rem;
  line-height: 0.86;
  color: var(--teal);
  letter-spacing: -0.02em;
}

.cell--accent {
  background: linear-gradient(150deg, rgba(99, 231, 127, 0.24), rgba(20, 112, 106, 0.1));
  border-color: rgba(20, 112, 106, 0.24);
  justify-content: center;
}

.cell--wide {
  justify-content: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 172px);
  }
  .cell--hero {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .cell--toy {
    grid-column: 1;
    grid-row: 2 / 4;
  }
  .cell--num {
    grid-column: 2;
    grid-row: 2;
  }
  .cell--accent {
    grid-column: 2;
    grid-row: 3;
  }
  .cell--wide {
    grid-column: 1 / 3;
    grid-row: 4;
  }
  .cell--photo {
    grid-column: 1;
    grid-row: 5;
  }
  .cell:last-child {
    grid-column: 2;
    grid-row: 5;
  }
  .cell--hero {
    min-height: 250px;
  }
}

@media (max-width: 620px) {
  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(158px, auto);
  }
  .cell,
  .cell--hero,
  .cell--toy,
  .cell--num,
  .cell--accent,
  .cell--wide,
  .cell--photo,
  .cell:last-child {
    grid-column: 1;
    grid-row: auto;
  }
  .cell--toy,
  .cell--photo {
    min-height: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cell__mascot,
  .cell__glow,
  .cell__shadow {
    animation: none;
  }
}