/* ───────────────────────────────────────────────────────────────
   DeftBid — Marketing Landing Page ("Ink" direction)
   Epic C · Hero — dark split layout (copy left / phone mockup right).
   C1 canvas+grid, C2 copy, C3 mockup placement.
   ─────────────────────────────────────────────────────────────── */

.hero {
  /* dark canvas + textures come from .band-dark + A6 .dot-field/.glow.
     Extra top padding clears the 70px fixed nav that overlays this canvas. */
  padding-top: calc(70px + clamp(44px, 6vw, 88px));
  padding-bottom: clamp(44px, 6vw, 84px);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

/* ── Left: copy (C2) ──────────────────────────────────────────── */
.hero__eyebrow {
  font-family: var(--font-mono, 'Spline Sans Mono', monospace);
  font-weight: 600; font-size: 12.5px;
  letter-spacing: var(--tracking-eyebrow, 0.16em); text-transform: uppercase;
  color: var(--on-dark, #6FA0FF);
  margin-bottom: 22px;
}
.hero__title {
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-weight: 900;
  font-size: clamp(40px, 5.8vw, 66px);
  letter-spacing: var(--tracking-hero, -0.04em);
  line-height: 0.98;
  color: #fff;
}
.hero__title .accent { color: var(--on-dark, #6FA0FF); }
.hero__lede {
  font-family: var(--font-sans, 'Archivo', sans-serif);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
  max-width: 488px;
  margin-top: 22px;
}
.hero__cta {
  display: flex; gap: 13px; margin-top: 32px; flex-wrap: wrap;
}

/* ── Right: product mockup (C3) ───────────────────────────────── */
.hero__stage {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero__stage-inner { position: relative; }
.hero__approved {
  position: absolute;
  bottom: 40px;
  left: -78px;
  z-index: 2;
}

/* ── Responsive ───────────────────────────────────────────────── */
/* Collapse to one column below 940px; copy above mockup. */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 56px); }
  .hero__lede { max-width: none; }
  /* Stage stays centered (base rule) so the -78px approved card isn't pushed
     off the left edge in single-column mode. */
}

/* Floating "Bid approved" chip hides below 560px; phone scales down. */
@media (max-width: 560px) {
  .hero__approved { display: none; }
  .phone-wrap { --phone-scale: 0.72; }
}
@media (max-width: 380px) {
  .phone-wrap { --phone-scale: 0.62; }
}