/* ==========================================================================
   KOBIL — Secure Messenger & Documents — Section: Hero
   Figma: desktop 6015:101484 (1440x1208) · mobile 6149:69275 (393x847)

   Full-bleed violet gradient, left-aligned intro (breadcrumb / serif H1 /
   lead / white pill button) and the product composition on the right. The
   background SVG is 1290 tall against a 1208 hero: it deliberately runs
   past the bottom so the gradient keeps going behind the white card that
   overlaps it.
   ========================================================================== */

.sec-smd-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  /* 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(--w1208);
  padding: var(--w246) 0 0;
}

/* ---- Background ---- */

.smd-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: var(--w1290);
  max-width: none;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}

.smd-hero__bg--mobile { display: none; }

/* Vector_12_2_ (6015:101489): a 2019x1165 sheet rotated 176.32° and hung
   off the top-left corner of the hero. */
.smd-hero__wave {
  position: absolute;
  top: calc(-1 * var(--w252));
  left: calc(-1 * var(--w228));
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w2089);
  height: var(--w1292);
  pointer-events: none;
}

.smd-hero__wave img {
  flex: none;
  width: var(--w2019);
  height: var(--w1164);
  max-width: none;
  transform: rotate(176.32deg);
}

/* ---- Intro ---- */

.smd-hero__intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: var(--w764);
  max-width: calc(100% - var(--w160));
  margin-left: var(--w80);
  color: var(--white);
}

.smd-hero__crumb {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w11);
  font-weight: 500;
  line-height: var(--w24);
  text-transform: uppercase;
  color: var(--white);
}

.smd-hero__crumb-dot {
  flex: none;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: currentColor;
}

.smd-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--w48);
}

.smd-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
  width: 100%;
}

.smd-hero__title {
  font-family: var(--font-serif);
  font-size: var(--w82);
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
}

.smd-hero__lead {
  width: var(--w568);
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--white);
}

.smd-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  border-radius: var(--w32);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.smd-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(1, 42, 112, 0.24);
}

.smd-hero__cta:hover .smd-hero__cta-icon { transform: translateX(3px); }

/* Figma's icon/small/line frame is 18x18 with the arrow inset 16.67% on every
   side, i.e. a 12x12 glyph. The export is that bare glyph, so the 3px inset
   is added back as padding — sizing the file itself to 18 would render the
   arrow 1.5x too large. */
.smd-hero__cta-icon {
  flex: none;
  box-sizing: content-box;
  width: var(--w12);
  height: var(--w12);
  padding: var(--w3);
  transition: transform var(--dur) var(--ease);
}

/* ---- Product composition ---- */

.smd-hero__stage {
  position: absolute;
  top: var(--w192);
  left: var(--w745);
  z-index: 1;
  overflow: hidden;
  width: var(--w674);
  height: var(--w465);
}

.smd-hero__visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  animation: smd-hero-float 7s var(--ease) infinite;
}

/* The light streak under the composition is baked into the desktop export;
   the phone frame crops it away and draws it as its own layer instead. */
.smd-hero__line { display: none; }

@keyframes smd-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==========================================================================
   Phone (Figma 6149:69275)
   ========================================================================== */

@media (max-width: 768px) {
  .sec-smd-hero {
    margin-top: calc(-1 * var(--m76));
    min-height: var(--m847);
    padding: 0;
  }

  .smd-hero__bg--desktop { display: none; }
  /* Figma's phone background frame is 1037 tall but the hero clips it at 847,
     so that is exactly what the export contains — drawing it at its own
     height keeps the diagonal band where the design puts it instead of
     zooming it to fill a taller box. */
  .smd-hero__bg--mobile {
    display: block;
    height: var(--m847);
  }
  .smd-hero__wave { display: none; }

  .smd-hero__intro {
    position: absolute;
    top: var(--m116);
    left: var(--m32);
    align-items: center;
    gap: var(--m20);
    width: var(--m329);
    max-width: none;
    margin: 0;
    text-align: center;
  }

  .smd-hero__crumb {
    gap: var(--m8);
    font-size: var(--m11);
    line-height: var(--m18);
    letter-spacing: 1.87px;
  }
  .smd-hero__crumb-dot { width: var(--m3); height: var(--m3); }

  .smd-hero__body {
    align-items: center;
    gap: var(--m32);
    width: 100%;
  }

  .smd-hero__title { font-size: var(--m36); line-height: 1.2; }
  .smd-hero__lead {
    width: 100%;
    font-size: var(--m16);
    line-height: var(--m23);
    color: rgba(255, 255, 255, 0.8);
  }

  .smd-hero__cta {
    gap: var(--m8);
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    border-radius: var(--m32);
    font-size: var(--m14);
    line-height: var(--m18);
  }
  .smd-hero__cta-icon { width: var(--m12); height: var(--m12); padding: var(--m3); }

  /* 288.9x292 window onto the same 674x465 artwork at 0.686 scale: the
     composition is anchored on the phone's left edge, so the sheet is pushed
     22.19% left and its bottom 27px are cropped (Figma 6149:70311). */
  .smd-hero__stage {
    top: var(--m382);
    left: var(--m51);
    width: var(--m288);
    height: var(--m292);
  }
  .smd-hero__visual {
    left: -22.19%;
    width: 160.05%;
    height: auto;
  }

  .smd-hero__line {
    display: block;
    position: absolute;
    top: var(--m674);
    left: var(--m30);
    z-index: 1;
    width: var(--m333);
    height: var(--m3);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      #fff 29.327%,
      #fff 71.635%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .smd-hero__visual { animation: none; }
}