/* App page — hero (merged from the two Opinomix App.dc.html beats).
   Visual target: Opinomix App.dc.html (Claude Design project e2ee5284-...)
   Layout, gradient, and phone are beat 2's ("Accounts" — phone stage left,
   copy right); heading and body copy are beat 1's. Site nav/footer kept
   as-is (not the mockup's own nav). Typography remapped to the site's
   4-font system instead of the design's Archivo. */

.app-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(58% 52% at 72% 36%, rgba(242, 104, 30, 0.11), transparent 68%),
    radial-gradient(52% 60% at 14% 92%, rgba(120, 140, 220, 0.14), transparent 70%),
    linear-gradient(178deg, #e7e9f1 0%, #edeef4 40%, #f5f3f1 100%);
  padding-top: calc(var(--space-9) + var(--space-9));
  padding-bottom: var(--space-9);
}

.app-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-8);
  align-items: center;
}

.app-hero__copy {
  max-width: 520px;
  justify-self: end;
}

.app-hero__heading {
  font-size: clamp(2.25rem, 4.2vw, 3.625rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #191a1c;
}

.app-hero__copy .section-lead {
  color: #5c5e66;
  max-width: 470px;
}

/* Phone stage — mirrors the home page's Applied section node/phone
   pattern (same dark tile language, same three icons) for consistency
   between the two pages that both showcase the app. */

.app-hero__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
}

.app-hero__chip {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.app-hero__chip-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: #0F1116;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px -10px rgba(15, 17, 22, 0.4);
}

.app-hero__chip-label {
  font-family: var(--font-detail);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--color-grey-mid);
}

.app-hero__chip--1 {
  top: 2%;
  right: 1%;
}

.app-hero__chip--2 {
  top: 33%;
  left: -1%;
}

.app-hero__chip--3 {
  bottom: 4%;
  right: 5%;
}

.app-hero__phone {
  position: relative;
  z-index: 5;
  /* Purely decorative — its box (transparent PNG margins included) was
     sitting above the chip tiles in z-order and silently swallowing their
     hover/tap events despite the chips being what's visually on top at
     that pixel. Letting events pass through fixes that without changing
     how anything looks. */
  pointer-events: none;
}

.app-hero__phone::before {
  content: "";
  position: absolute;
  inset: 6% 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 58%, rgba(20, 22, 26, 0.14) 0%, rgba(20, 22, 26, 0) 60%);
  filter: blur(8px);
  pointer-events: none;
}

.app-hero__phone-img {
  position: relative;
  display: block;
  width: min(340px, 86%);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 40px 55px rgba(25, 28, 45, 0.28));
}

@media (max-width: 880px) {
  .app-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-8);
  }

  .app-hero__copy {
    order: 2;
    max-width: 100%;
    justify-self: center;
  }

  .app-hero__copy .section-lead {
    max-width: 100%;
  }

  .app-hero__stage {
    order: 1;
    min-height: 420px;
  }
}

@media (max-width: 560px) {
  .app-hero__stage {
    min-height: 340px;
  }

  .app-hero__chip-tile {
    width: 40px;
    height: 40px;
  }

  .app-hero__chip {
    z-index: 6;
  }
}

/* Bottom banner — full-width "coming soon" strip between the hero and
   the footer. */

.app-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--space-5);
  background: var(--color-orange);
  font-family: var(--font-detail);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

.app-banner__line {
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .app-banner__line {
    width: 24px;
  }
}