/* hero.css — geometry mapped 1:1 from Figma.
   Base = WEB frame 1920×1327. Children absolutely positioned in %,
   so the whole section scales fluidly via aspect-ratio. */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1327;
  overflow: hidden;
}

/* Background mask (green shape + rounded bottom-left notch) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Blob layer — masked to the exact bg shape so blobs never spill past hero__bg */
.hero__blobs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask: url(/assets_main/images/hero/bg-web.png) center / 100% 100% no-repeat;
  mask: url(/assets_main/images/hero/bg-web.png) center / 100% 100% no-repeat;
}

/* Decorative blobs */
.hero__blob {
  position: absolute;
  pointer-events: none;
}

.hero__blob img,
.hero__blob picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__blob--1 {
  left: 77.79%;
  top: 42.75%;
  width: 31.667%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
}

.hero__blob--2 {
  left: 62.51%;
  top: 54.45%;
  width: 43.234%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
}

/* Heading */
.hero__title {
  position: absolute;
  z-index: 3;
  left: 16.198%;
  top: 40.656%;
  width: 48.75%;
  transform: translateY(-50%);
  margin: 0;
  color: var(--color-ink);
  font-weight: 700;
  font-size: clamp(30px, 3.177vw, 61px);
  line-height: 1.164;
}

/* Phone + badge group (Figma "container" 577.27×657) */
.hero__media {
  position: absolute;
  z-index: 2;
  left: 53.736%;
  top: 18.463%;
  width: 30.066%;
  aspect-ratio: 577.27 / 657;
  display: block;
}

.hero__phone {
  position: absolute;
  left: 32.961%;
  top: 0;
  width: 67.042%;
  aspect-ratio: 387 / 657;
}

.hero__phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(11, 23, 37, 0.18));
}

.hero__badge {
  position: absolute;
  left: 0;
  top: 67.195%;
  width: 54.959%;
  aspect-ratio: 317.27 / 95.81;
}

.hero__badge-card {
  display: flex;
  align-items: center;
  padding: 0 15.38% 0 7.66%;
  background: var(--color-white);
  border: 1px solid var(--color-ink);
  border-radius: clamp(14px, 1.04vw, 20px);
  box-shadow: 2px 2px 5px rgba(11, 23, 37, 0.15);
}

.hero__badge-text {
  margin: 0;
  font-weight: 500;
  color: var(--color-ink);
  font-size: clamp(11px, 0.807vw, 15.5px);
  line-height: 1.546;
}

.hero__badge-dot {
  position: absolute;
  left: 94.33%;
  top: 50%;
  width: 11.347%;
  aspect-ratio: 36 / 36.9;
  transform: translate(-50%, -50%);
}

.hero__badge-dot img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- TABLET (Figma 1024×1097) ---------- */
@media (max-width: 1024px) {
  .hero {
    aspect-ratio: 1024 / 1097;
  }

  .hero__blobs {
    -webkit-mask-image: url(/assets_main/images/hero/bg-tablet.png);
    mask-image: url(/assets_main/images/hero/bg-tablet.png);
  }

  .hero__blob--1 {
    left: 78.027%;
    top: 57.46%;
    width: 33.984%;
  }

  .hero__blob--2 {
    left: 59.082%;
    top: 56.92%;
    width: 51.367%;
  }

  .hero__title {
    left: 3.516%;
    top: 36.691%;
    width: 58.691%;
    font-size: clamp(24px, 4.004vw, 41px);
    line-height: 1.244;
  }

  .hero__media {
    left: 34.473%;
    top: 20.328%;
    width: 56.445%;
    aspect-ratio: 578 / 507;
  }

  .hero__phone {
    left: 46.618%;
    width: 51.669%;
    aspect-ratio: 298.644 / 507;
  }

  .hero__badge {
    left: 8.132%;
    top: 63.708%;
    width: 54.892%;
  }

  .hero__badge-text {
    font-size: clamp(12px, 1.5vw, 15.5px);
  }
}

/* ---------- MOBILE (Figma 393×1017) ---------- */
@media (max-width: 640px) {
  .hero {
    aspect-ratio: 393 / 1017;
  }

  .hero__blobs {
    -webkit-mask-image: url(/assets_main/images/hero/bg-mobile.png);
    mask-image: url(/assets_main/images/hero/bg-mobile.png);
  }

  .hero__blob--1 {
    left: -1.527%;
    top: 43.166%;
    width: 88.55%;
    aspect-ratio: 348 / 382;
    transform: none;
  }

  .hero__blob--2 {
    left: 66.539%;
    top: 47.05%;
    width: 66.921%;
    aspect-ratio: 1 / 1;
  }

  .hero__title {
    left: 7.634%;
    top: 26.254%;
    width: 84.733%;
    font-size: clamp(24px, 7.888vw, 34px);
    line-height: 1.258;
  }

  .hero__media {
    left: 0;
    top: 21.829%;
    width: 100%;
    aspect-ratio: 393 / 794;
  }

  .hero__phone {
    left: 43.257%;
    top: 18.388%;
    width: 49.364%;
    aspect-ratio: 194 / 328;
  }

  .hero__badge {
    left: 7.634%;
    top: 44.836%;
    width: 55.216%;
    aspect-ratio: 217 / 96;
  }

  .hero__badge-card {
    width: 92.166%;
    padding: 0 8% 0 8%;
  }

  .hero__badge-text {
    font-size: clamp(11px, 3.05vw, 12px);
    line-height: 1.833;
  }

  .hero__badge-dot {
    left: 91.705%;
    top: 49.51%;
    width: 16.59%;
  }
}