/* ==========================================================================
   KOBIL — Inside KOBIL — Section: Hero
   Figma: desktop D-Inside KOBIL 5882:52176 (1440 frame — logo at y=201.66,
   text block at y=338, ticker at y=465, first cards at y=621) ·
   mobile M-Inside KOBIL 5882:52240 (393 frame — logo at y=114, text at
   y=177.5, ticker at y=323.5, first card at y=405).

   The gradient is a stack of four blurred vectors in Figma; it ships as one
   baked image because the blur radii are far larger than the shapes. The image
   is 1318 tall (777 on the phone frame) against a 621 (405) hero, so it keeps
   running behind the first showcase cards — that section overlaps this one with
   a negative margin, see showcases.css. The image already fades into
   --navy-20 (#f5f7fc = the body background) at its bottom edge.
   ========================================================================== */

.sec-ik-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Pulled under the sticky header, exactly as the Figma frame sits under
     nav/desktop (y=30, h=80). */
  margin-top: calc(-1 * var(--w100));
  min-height: var(--w1318);
  padding: var(--w202) 0 0;
}

.ik-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ik-hero__bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  /* `fill`, not `cover`: the export is exactly the frame's aspect ratio, so
     stretching it keeps every stop of the gradient where Figma put it. */
  object-fit: fill;
}

/* ---- Inside KOBIL logo ---- */

.ik-hero__logo {
  display: block;
  width: var(--w205);
  height: var(--w73);
}

/* ---- Eyebrow + H1 ---- */

.ik-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
  width: 100%;
  max-width: var(--w833);
  /* 338 − (201.66 + 72.95) */
  margin-top: var(--w63);
  text-align: center;
  color: var(--navy);
}

.ik-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w16);
  font-weight: 500;
  line-height: var(--w24);
  text-transform: uppercase;
}

.ik-hero__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
}

/* ---- SuperApp ticker (endless CSS marquee) ----
   Figma masks the row with a 1294-wide gradient rect at x=81, which fades the
   items out over roughly 90px at each end (measured off the frame render:
   full contrast from x≈170 to x≈1260). */

.ik-hero__ticker {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--w54);
  /* 465 − (338 + 109) */
  margin-top: var(--w18);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 5.6%,
    #000 11.8%,
    #000 87.5%,
    rgba(0, 0, 0, 0) 95.5%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 5.6%,
    #000 11.8%,
    #000 87.5%,
    rgba(0, 0, 0, 0) 95.5%
  );
}

.ik-hero__ticker-track {
  display: flex;
  width: max-content;
  animation: ik-hero-marquee 38s linear infinite;
  will-change: transform;
}

.ik-hero__ticker-list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ik-hero__ticker-list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-80);
}

/* Figma spaces the 4px separator 24 after the label and 30 before the next. */
.ik-hero__ticker-list li::after {
  content: "";
  flex: 0 0 auto;
  width: var(--w4);
  height: var(--w4);
  margin: 0 var(--w30) 0 var(--w24);
  border-radius: 50%;
  background: var(--navy-80);
}

@keyframes ik-hero-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ik-hero__ticker-track { animation: none; }
}

@media (max-width: 768px) {
  .sec-ik-hero {
    margin-top: calc(-1 * var(--m68));
    min-height: var(--m777);
    padding: var(--m114) 0 0;
  }

  .ik-hero__logo {
    width: var(--m111);
    height: auto;
  }

  .ik-hero__text {
    max-width: var(--m337);
    /* 177.5 − (114 + 39.5) */
    margin-top: var(--m24);
  }

  .ik-hero__eyebrow {
    font-size: var(--m12);
    line-height: var(--m24);
  }

  .ik-hero__title {
    font-size: var(--m36);
    line-height: 1.2;
  }

  .ik-hero__ticker {
    height: var(--m54);
    /* 323.5 − (177.5 + 122) */
    margin-top: var(--m24);
    /* The phone frame's mask rect is 337 wide at x=28. */
    -webkit-mask-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 7%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, 0) 93%
    );
    mask-image: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 7%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, 0) 93%
    );
  }

  .ik-hero__ticker-list li {
    font-size: var(--m20);
    line-height: var(--m26);
  }

  .ik-hero__ticker-list li::after {
    width: var(--m4);
    height: var(--m4);
    margin: 0 var(--m16) 0 var(--m12);
  }
}