/* =========================================================
   Section 2 — Features / Problem statement
   (Figma node 2132:144 — 1512 × 756, bg #0D1117)
   ========================================================= */

.features {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 96px;                 /* Figma: inner frame at y 96, height 564 */
  background-color: var(--color-bg-fade);   /* #0D1117 */
}

/* Pixel / square pattern behind the text (Figma group 2132:146) */
.features__pattern {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 79px;
  width: 856px;
  height: 582px;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.features__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  min-height: 564px;
}

/* ---------- Left: copy ---------- */
.features__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 0 1 576px;
  min-width: 0;
}

.features__title {
  max-width: 509px;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.48px;
  color: var(--color-white);
}

.features__title-accent {
  color: var(--color-amber);
}

.features__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.features__body strong {
  font-weight: 700;
}

/* ---------- Right: app visual card ----------
   Built from the Figma frame in 4 layers (exported from right_side_frame.svg):
     1. features-card.svg        card background, hexagons, glow, shadow
     2. features-photo.webp      hand + phone photo (clipped to the card)
     3. features-card-border.svg amber→white gradient border on top
     4. features-chip.svg        floating "Rich Demerara Syrup" chip
   Splitting them lets mobile move the photo & chip like the mobile design,
   and fixes the stray line the SVG pattern fill drew above the phone.
   All positions are % of the 576 × 564 card. */
.features__visual {
  position: relative;
  flex: 0 1 576px;
  aspect-ratio: 576 / 564;
  transition: transform 0.6s var(--ease-out);
}

.features__visual:hover {
  transform: translateY(-6px);
}

/* SVG layers include a few px of shadow, so they are offset to make the
   card itself fill the box exactly */
.features__card {
  position: absolute;
  left: -0.4227%;
  top: -0.2128%;
  width: 100.868%;
  height: 101.241%;
  max-width: none;
  pointer-events: none;
}

.features__photo-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6.944% / 7.092%;      /* 40px of 576 × 564 */
}

.features__photo {
  --photo-y: 4.255%;                    /* 24px of 564 */
  position: absolute;
  left: 11.813%;                        /* 68px of 576 */
  top: var(--photo-y);
  width: 76.375%;                       /* 439.9px */
  height: 97.498%;                      /* 549.9px — bottom is cropped by the card */
  max-width: none;
}

/* Chip box = the visible 150 × 80 chip (position in % of the card) */
.features__chip {
  --chip-x: 63.02%;
  --chip-y: 25.71%;
  --chip-w: 26.11%;
  position: absolute;
  left: var(--chip-x);
  top: var(--chip-y);
  width: var(--chip-w);
  aspect-ratio: 150.393 / 80.314;
  animation: chip-float 5s ease-in-out infinite;
}

/* The chip SVG carries its amber glow around the box */
.features__chip img {
  position: absolute;
  left: -31.93%;
  top: -59.79%;
  width: 163.86%;
  height: 219.57%;
  max-width: none;
}

@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {
  .features__inner { gap: 40px; }
  .br-desktop { display: none; }
  .features__title { font-size: 42px; }
  .features__body  { font-size: 18px; }
}

/* Tablet — stack & centre (same structure as the mobile design) */
@media (max-width: 991px) {
  .features {
    padding-block: 72px;
  }

  .features__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    min-height: 0;
  }

  .features__content,
  .features__visual {
    flex: none;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }

  .features__content {
    align-items: center;
    text-align: center;
  }

  .features__visual {
    max-width: 576px;
  }

  .features__title {
    max-width: 600px;
  }

  .features__chip {
    --chip-x: 52.6%;
    --chip-y: 16.28%;
    --chip-w: 27.4%;
  }

  .features__photo {
    --photo-y: 3.6%;
  }

  .features__pattern {
    top: 40px;
  }
}

/* Mobile — matches section_2/mobile.png (430 wide) */
@media (max-width: 767px) {
  .features {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .features__inner {
    gap: 32px;
  }

  .features__content {
    gap: 12px;
  }

  .features__title {
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: -0.26px;
  }

  .features__body {
    gap: 8px;
    font-size: 16px;
    line-height: 26px;
  }

  /* Figma squeezes the pattern horizontally on mobile */
  .features__pattern {
    left: -20px;
    top: 14px;
    width: 266px;
    height: 584px;
  }
}

/* Phones & tablets: keep the chip still (smoother scrolling) */
@media (max-width: 991px), (hover: none) and (pointer: coarse) {
  .features__chip { animation: none; }
}