/* =====================
   m_hero — landing page Hero section.

   Source of truth:
     Desktop: Figma node 4201:4085
     Mobile:  Figma node 4215:23309
   No animations.

   Per project requirement, the iPhone mockup row and the Background pattern
   are loaded as PNG image assets (not recreated in CSS layers):
     - assets/hero-phones.png             — composite of three iPhone mockups
     - assets/hero-pattern-vertical.png   — vertical grid lines (1920×1920)
     - assets/hero-pattern-horizontal.png — horizontal grid lines

   Layout:
     - Section is full-width with dark BG, overflow clipped
     - Bg pattern fades to transparent toward edges via radial mask
     - Soft green glow behind the foreground content
     - Header block (tag + h1 + subtitle) centered, max-width 768
     - Big "Download on AppStore" CTA below
     - Phones row pinned to the bottom, decorative

   Mobile breakpoint: <= 991px.
===================== */

.m_hero {
  position: relative;
  background-color: var(--color--bg-main, #131313);
  color: var(--color--white, #ffffff);
  font-family: "Inter", sans-serif;
  padding: 6rem 0 0;                      /* 96px top desktop, 0 bottom (phones edge-aligned) */
  overflow: clip;
  isolation: isolate;
}
@media (max-width: 991px) {
  .m_hero { padding: 4rem 0 0; }          /* 64px top mobile */
}

/* ---- Background pattern (PNG-driven) ------------------------------- */

.m_hero_pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.18;                          /* Figma was 12% but PNGs are translucent → bump to read-ably visible */
  pointer-events: none;
  /* Stack two PNGs: horizontal lines on top of vertical, both transparent
     PNGs with white 1px lines on a 60px grid (PIL-generated). */
  background-image:
    url("../assets/hero-pattern-horizontal.png"),
    url("../assets/hero-pattern-vertical.png");
  background-repeat: repeat, repeat;
  background-size: 1920px 1920px, 1920px 1920px;
  background-position: center top, center top;
  /* Softer radial mask — fades only the outer edges, keeps grid visible
     across the centre of the hero. */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 95%);
          mask-image: radial-gradient(ellipse at center, #000 50%, transparent 95%);
}

/* Soft green glow — decorative ambience behind the title */
.m_hero_glow {
  position: absolute;
  z-index: 0;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(600px, 80%, 1254px);
  height: clamp(400px, 60vh, 1086px);
  background: radial-gradient(
    ellipse closest-side,
    rgba(144, 249, 156, 0.18) 0%,
    rgba(144, 249, 156, 0.04) 45%,
    transparent 75%
  );
  filter: blur(40px);
  pointer-events: none;
}

/* ---- Foreground content ------------------------------------------- */

.m_hero_inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;                              /* 64px between header block and phones */
}

/* `.u-container` defaults to `align-items: stretch` — at viewport widths
   greater than the header max-width (768px), this leaves the header glued
   to the left edge. Override to centre the header block horizontally. */
.m_hero > .m_hero_inner > .u-container {
  align-items: center;
}

/* Header block — tag + h1 + subtitle + button */
.m_hero_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;                              /* 48px between heading group and button */
  max-width: 48rem;                       /* 768px */
  width: 100%;
  text-align: center;
}
@media (max-width: 991px) {
  .m_hero_header { gap: 1.5rem; }         /* 24px mobile */
}

.m_hero_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;                            /* 24px between tag, title, subtitle */
  width: 100%;
}
@media (max-width: 991px) {
  .m_hero_heading { gap: 0.75rem; }       /* 12px mobile */
}

/* Tag chip — slightly larger than the .tag_main in other sections.
   Uses 16/24 SemiBold on desktop, 14/20 Medium on mobile per Figma. */
.m_hero_tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;                   /* 8px 16px desktop */
  border-radius: 0.25rem;                 /* 4px */
  background-color: #2a2a2a;
  color: var(--color--lightest-grey, #E4E7EC);
  font-family: "Inter", sans-serif;
  font-weight: 600;                       /* SemiBold desktop */
  font-size: 1rem;                        /* 16px */
  line-height: 1.5;                       /* 24/16 */
  white-space: nowrap;
}
@media (max-width: 991px) {
  .m_hero_tag {
    padding: 0.375rem 0.75rem;            /* 6px 12px mobile */
    font-weight: 500;                     /* Medium mobile */
    font-size: 0.875rem;                  /* 14px */
    line-height: 1.4286;                  /* 20/14 */
  }
}

/* Title — Display 2xl on desktop (72/1.05 Medium), Display md on mobile (36/44 SemiBold) */
.m_hero_title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;                       /* Medium desktop */
  font-size: 4.5rem;                      /* 72px */
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color--white, #ffffff);
}
@media (max-width: 991px) {
  .m_hero_title {
    font-weight: 600;                     /* SemiBold mobile */
    font-size: 2.25rem;                   /* 36px */
    line-height: 1.2222;                  /* 44/36 */
  }
}

/* Subtitle — 20/30 Regular desktop, 16/24 mobile */
.m_hero_subtitle {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.25rem;                     /* 20px desktop */
  line-height: 1.5;                       /* 30/20 */
  color: var(--color--lightest-grey, #E4E7EC);
}
@media (max-width: 991px) {
  .m_hero_subtitle {
    font-size: 1rem;                      /* 16px */
    line-height: 1.5;                     /* 24/16 */
  }
}

/* ---- CTA button — bigger "hero" variant of .button_cta ----------- */

.m_hero_cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;                          /* 10px desktop */
  padding: 1rem 1.375rem;                 /* 16px 22px desktop */
  border-radius: 0.375rem;                /* 6px */
  background-color: var(--color--main-green, #90F99C);
  color: #000000;
  font-family: "Inter", sans-serif;
  font-weight: 600;                       /* SemiBold */
  font-size: 1.125rem;                    /* 18px desktop */
  line-height: 1.5556;                    /* 28/18 */
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(16, 24, 40, 0.18),
    inset 0 -2px 0 0 rgba(16, 24, 40, 0.05),
    0 1px 2px 0 rgba(16, 24, 40, 0.05);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.m_hero_cta:hover { background-color: var(--color--main-green-hover, #A9FFB3); }
.m_hero_cta:focus-visible {
  outline: 2px solid var(--color--main-green-hover, #A9FFB3);
  outline-offset: 2px;
}
@media (max-width: 991px) {
  .m_hero_cta {
    gap: 0.375rem;                        /* 6px mobile */
    padding: 0.625rem 1rem;               /* 10px 16px mobile */
    font-size: 1rem;                      /* 16px */
    line-height: 1.5;                     /* 24/16 */
  }
}

/* ---- Phones row (PNG-driven decorative footer) -------------------- */

.m_hero_phones {
  position: relative;
  width: 100%;
  height: 30rem;                          /* 480px desktop content area — larger so phones read big */
  /* Show the bottom of the composite Hero PNG (where the phones live).
     PNG is 1024×717 — phones occupy roughly the bottom ~340px. We zoom in
     so phones look prominent (matching Figma reference scale). */
  background-image: url("../assets/hero-phones.png");
  background-repeat: no-repeat;
  background-size: 1700px auto;           /* zoom in to make phones bigger */
  background-position: center 100%;       /* anchor at bottom edge */
  margin-top: -2rem;                      /* tuck under the button slightly */
}
@media (max-width: 991px) {
  .m_hero_phones {
    height: 13rem;                        /* 208px mobile — keeps phones visible while
                                             cropping above the button area */
    background-size: 820px auto;          /* zoom in so the in-PNG button is pushed
                                             off-screen above the container */
    margin-top: 0;
  }
}

/* Bottom fade — gradient that softens phones into the section bg */
.m_hero_phones::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5rem;                           /* 80px fade desktop */
  background: linear-gradient(
    to bottom,
    rgba(19, 19, 19, 0) 0%,
    var(--color--bg-main, #131313) 91.5%
  );
  pointer-events: none;
}
@media (max-width: 991px) {
  .m_hero_phones::after { height: 4rem; }
}