/* ==========================================================================
   KOBIL — Homepage: hero
   Figma: D-Homepage → main (6019:111627), 1440x780

   Replaces the previous hero (photo collage + mPower/Gartner info cards +
   their mobile bottom sheets + the reference logo strip). The Aug 2026
   design is much simpler: one full-bleed render with a white scrim baked
   into it, a left text column, two outline buttons, and a credibility
   strip pinned near the bottom. The logo strip moved out to its own
   section — see css/sections/logos.css.
   ========================================================================== */

.sec-hero {
  /* No width breakout needed: the homepage's `.page--flush` wrapper already
     runs sections the full --page-max (1440, exactly Figma's frame width)
     with no side padding and no gap between them. */
  position: relative;
  /* Pulls the hero up under the floating header pill (20px top padding +
     80px pill) so the pill sits on top of the render, as in Figma where
     nav/desktop is at y:30 inside the hero frame. */
  margin-top: calc(-1 * var(--w100));
  isolation: isolate;
  overflow: hidden;
  min-height: var(--w780);
  background-color: var(--navy-20);
  /* The scrim (a left-to-right white ramp, opaque at 10% → transparent at
     45%) is part of the exported image: it is a layer inside the Figma
     rectangle, so exporting that node flat keeps photo and scrim in exact
     register at every width. */
  background-image: url(/assets/hero/2026/hero-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--page-max);
  min-height: var(--w780);
  margin: 0 auto;
  padding: 0 var(--w80);
}

/* ---- Eyebrow ---- */

.sec-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: var(--navy-70);
}

/* ---- Text column ---- */

.sec-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--w40);
  max-width: var(--w621);
  margin-top: var(--w24);
}

.sec-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
}

/* Instrument Serif 82/62: the line-height is deliberately tighter than the
   font size, with the gap between lines opening the block back up — so the
   two are modelled separately rather than folded into one line-height. */
.sec-hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w82);
  line-height: var(--w62);
  letter-spacing: -0.82px;
  color: var(--navy);
}

.sec-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--w12);
}

.sec-hero__title-accent {
  background-image: linear-gradient(
    90deg,
    #696ef5 13.354%,
    #849ff8 50.429%,
    #ca80f4 84.827%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: #849ff8;
  -webkit-text-fill-color: transparent;
  /* background-clip:text paints only inside the element's box, and this
     line-height is smaller than the glyphs — without the extra painted
     area a descender would be cut off. The negative margin keeps Figma's
     20px inter-line gap exact. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.sec-hero__sub {
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

/* ---- Buttons — two outline pills, no icon ---- */

.sec-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--w20);
}

.sec-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--w64);
  padding: 0 var(--w32);
  border: 1px solid var(--navy);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--navy);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.sec-hero__btn:hover {
  background: var(--navy);
  color: var(--white);
}

/* ---- Credibility strip ---- */

.sec-hero__proof {
  position: absolute;
  left: var(--w80);
  bottom: var(--w42);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w18);
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: var(--navy-70);
}

/* Figma paints the last label near-black rather than navy-70 (6019:111646)
   — it reaches past the white scrim onto the photo, where the lighter grey
   stops holding up. */
.sec-hero__proof-strong {
  color: #12151a;
}

.sec-hero__proof-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Tablet / small desktop — no Figma frame at these widths, so the desktop
   composition scales down fluidly rather than being invented. */
/* Header is 92px tall between 769 and 1280px. */
/* Phone — Figma's own 393x524 frame (6160:80813) with its own, tighter crop
   of the same render. Note: that frame still carries the SuperApp page's
   copy (see homepage-2026-plan.md); the text here is the desktop frame's,
   at the mobile type ramp these pages already use. */
@media (max-width: 768px) {
  .sec-hero {
    min-height: var(--m524);
    background-image: url(/assets/hero/2026/hero-bg-mobile.webp);
    /* Header is exactly 68px tall at this breakpoint (8px top padding +
       60px pill), so the render reads through behind it instead of leaving
       a white strip above the pill. */
    margin-top: calc(-1 * var(--m68));
  }

  .sec-hero__inner {
    min-height: var(--m524);
    justify-content: flex-start;
    /* Bottom padding, not 0: Figma's phone frame carries a single small
       button (and the SuperApp page's copy — see the partial's note), while
       the real hero has two. Two stacked 44px pills don't fit inside 524px,
       so the section is allowed to grow past it rather than letting the
       last button touch the edge. */
    /* 110px = Figma's text top, measured from the frame top; the -68px
       margin above already re-anchors the frame top at the document top,
       so no header compensation on top of it (that double-counted and
       sat the copy 68px too low). */
    padding: var(--m110) var(--m24) var(--m40);
  }

  .sec-hero__content {
    /* Wider than the 267px of Figma's phone frame so the copy that frame is
       missing still clears the subject on the right. */
    max-width: var(--m300);
    gap: var(--m20);
    margin-top: var(--m16);
  }

  .sec-hero__eyebrow {
    font-size: var(--m11);
    letter-spacing: 1.87px;
    opacity: 0.8;
  }

  .sec-hero__title {
    font-size: var(--m36);
    line-height: 1;
    letter-spacing: -0.36px;
    gap: var(--m4);
  }

  .sec-hero__text {
    gap: var(--m12);
  }

  .sec-hero__sub {
    font-size: var(--m14);
    line-height: var(--m20);
    color: var(--navy);
  }

  .sec-hero__ctas {
    gap: var(--m12);
  }

  .sec-hero__btn {
    height: var(--m44);
    padding: 0 var(--m20);
    font-size: var(--m14);
  }

  /* The proof strip has no room inside the 524px phone frame — Figma drops
     it there, and so does this. */
  .sec-hero__proof {
    display: none;
  }
}

@media (max-width: 359px) {
  .sec-hero__title {
    font-size: var(--m30);
  }

  .sec-hero__content {
    max-width: 100%;
  }
}