/* ============================================================
   Home page — hero composition and dashboard grid.
   ============================================================ */

/* Full-bleed hero: the photo starts at the very top of the page, behind
   the translucent navy header, and the section is taller for breathing
   room. --header-h matches the sticky header's min-height. */
.hero {
  --header-h: 68px;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(52px, 9vh, 120px));
  padding-bottom: var(--space-16);
  min-height: min(88vh, 880px);
  display: flex;
  align-items: center;
}

.hero > .container {
  width: 100%;
}

.hero-copy {
  margin-top: -230px;
}

.hero-copy h1 {
  font-size: var(--text-display);
  line-height: 1.02;
}

.hero-copy .lead {
  margin-top: var(--space-6);
  max-width: 480px;
}

.hero-actions {
  margin-top: var(--space-8);
}

/* Media column: phone + floating notification cards */
.hero-media {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-notifs {
  display: none;
}

@media (min-width: 1200px) {
  .hero-media {
    justify-content: flex-start;
  }

  .hero-media .phone {
    margin-inline: 0;
  }

  .hero-notifs {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: absolute;
    right: 0;
    top: 22%;
    width: 230px;
  }
}

/* In-phone bits */
.phone-biz {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.05rem;
}

.phone-quickstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-block: var(--space-2);
}

.phone-quickstats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
}

.phone-quickstats strong {
  font-size: 1rem;
}

.phone-quickstats small {
  font-size: 10px;
  color: var(--color-text-meta);
}

/* Dashboard stats grid inside browser mockup */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
}

/* Trust strip partner logo */
.trust-logo img {
  height: 44px;
  width: auto;
  opacity: 0.85;
}

/* Audience cards: keep interior split compact at 3-up width */
@media (min-width: 1024px) {
  .audience-cards .card-body {
    padding: var(--space-6);
  }

  .audience-cards .card.has-photo {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* ============ Hero before/after slider (diagonal reveal) ============
   The construction shot sits on top and is clipped along a diagonal; the
   finished home is the base layer revealed as the handle sweeps left.
   site.js sets the clip-path polygon, the divider line, and the handle
   position from a single --pos percentage. */
.ba-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  touch-action: none;
  cursor: col-resize;
  user-select: none;
}

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
  -webkit-user-drag: none;
  user-select: none;
}

.ba-before {
  position: absolute;
  inset: 0;
  /* clip-path (diagonal polygon) set inline by site.js */
  clip-path: polygon(0 0, 87% 0, 71% 100%, 0 100%);
  will-change: clip-path;
}

/* Left-weighted scrim keeps the white hero copy legible over either photo */
.ba-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    linear-gradient(100deg,
      rgb(14 27 24 / 0.92) 0%,
      rgb(14 27 24 / 0.8) 30%,
      rgb(14 27 24 / 0.44) 58%,
      rgb(14 27 24 / 0.2) 100%),
    linear-gradient(rgb(14 27 24 / 0.5), rgb(14 27 24 / 0) 42%);
}

.ba-divider {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ba-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ba-line line {
  stroke: #fff;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgb(4 12 30 / 0.55));
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 79%; /* updated inline by site.js */
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #17324d;
  box-shadow: 0 6px 20px rgb(4 12 30 / 0.4);
  display: grid;
  place-items: center;
  cursor: col-resize;
  touch-action: none;
  pointer-events: auto;
}

.ba-handle svg {
  width: 26px;
  height: 26px;
}

.ba-handle:focus-visible {
  outline: 3px solid var(--raw-teal-300);
  outline-offset: 3px;
}

/* Copy sits above the slider; text passes drags through to the slider,
   only the action buttons keep their own pointer events */
.hero > .container {
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.hero-actions {
  pointer-events: auto;
}

/* ============ Device showcase ============
   Web app (laptop, left) + mobile app (phone, right) as 3D device
   mockups on a dark band below the scroll-hero. (Previously overlapped
   up into a static photo hero; with the scroll-timelapse hero it sits as
   its own clean dark band so it never collides with the hero's end CTAs.) */
.device-showcase {
  /* Keep the section's normal top padding so it clears the hero cleanly. */
  padding-bottom: 0;
  background: var(--color-canvas);
}

/* Breathing room between the device mockups and the "Three Solutions"
   section (50px more than the previous tightened spacing). */
.device-showcase + .section {
  padding-top: var(--section-pad);
}

/* Home final-CTA heading: two lines, with "construction opportunity system"
   kept whole on the second line (a hard <br> sets the break in the markup).
   Widened + slightly smaller so that long line doesn't wrap. */
.cta-band h2 {
  max-width: min(92vw, 820px);
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
}

.device-combined {
  position: relative;
  z-index: 3;
  /* No negative overlap — the hero ends on its own CTAs above this band. */
  margin: 0 auto;
  width: min(100%, 1120px);
}

.device-combined img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 55px rgb(5 15 36 / 0.4));
}

@media (max-width: 767px) {
  .device-combined {
    margin-top: 0;
  }
}