/* =====================================================================
   AIS Web Studio — hero.css
   Scoped under .ais-hero (dark, first paint). Tokens only — no raw hex.
   Only positions/sizes the shared components it reuses (.ais-mockup,
   .ais-floating-badge, .ais-glow-blob, .ais-grid-texture); their internals
   live in theme.css / animations.css.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* Section shell — clears the transparent sticky header, clips blobs.  */
/* ------------------------------------------------------------------ */
.ais-hero {
  overflow: hidden;
  /* The sticky header is IN-FLOW (it doesn't overlap the hero), so adding the
     full header height on top of the section padding double-counted the gap and
     pushed the hero way down. A clean, tighter top space instead. */
  padding-top: clamp(44px, 5vw, 88px);
  padding-bottom: var(--ais-section-pad);
  background:
    radial-gradient(120% 78% at 50% -12%,
      color-mix(in srgb, var(--ais-orange) 9%, transparent), transparent 60%),
    var(--ais-dark);
}

.ais-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 72px);
  min-height: clamp(520px, 70vh, 760px);
}

/* ------------------------------------------------------------------ */
/* Content column                                                      */
/* ------------------------------------------------------------------ */
.ais-hero__content {
  max-width: 600px;
  min-width: 0;
}
.ais-hero .ais-eyebrow {
  margin-bottom: var(--ais-space-5);
}

.ais-hero__title {
  font-family: var(--ais-heading-font);
  font-size: var(--ais-fs-display);
  font-weight: var(--ais-display-weight);
  line-height: var(--ais-leading-display);
  letter-spacing: var(--ais-tracking-display);
  color: var(--ais-text);
  text-wrap: balance;
}

/* C5: let a multi-word highlighted phrase wrap instead of clipping at the
   viewport edge. Overrides the base .ais-hl{white-space:nowrap} (theme.css);
   the color/glow on .ais-hl is untouched. */
.ais-hero .ais-hl {
  white-space: normal;
}

.ais-hero__subtext {
  margin-top: var(--ais-space-5);
  max-width: var(--ais-measure-lead);
  font-size: var(--ais-fs-lead);
  line-height: var(--ais-leading-body);
  color: var(--ais-text-muted);
}

.ais-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
}
/* Nudge the trailing arrow on hover for a little life. */
.ais-hero__actions .ais-btn .ais-icon {
  transition: transform .3s var(--ais-ease);
}
.ais-hero__actions .ais-btn:hover .ais-icon {
  transform: translateX(3px);
}

/* Reassurance micro-line under the CTAs (reuses the contact trust_message). */
.ais-hero__assure {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: var(--ais-fs-sm);
  color: var(--ais-text-muted);
}
.ais-hero__assure .ais-icon {
  width: 16px;
  height: 16px;
  color: var(--ais-orange);
}

/* ------------------------------------------------------------------ */
/* Visual column — tilt stage + mockup + floating badges               */
/* ------------------------------------------------------------------ */
.ais-hero__visual {
  position: relative;
  min-width: 0;
}
.ais-hero__stage {
  position: relative;
  perspective: 1200px;
  max-width: 100%;
}
.ais-hero__mockup {
  position: relative;
  z-index: 2;
  transform: rotateX(2deg) rotateY(-6deg);
}
/* JS tilt takes over on pointer move; this is the resting pose. */
.ais-hero__mockup.is-tilting {
  transform: none;
}

/* Uploaded image sits inside the browser frame, below the toolbar. */
.ais-hero__shot {
  position: relative;
  z-index: 1;
}
.ais-hero__shot img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Ambient glow blobs (size + place the shared .ais-glow-blob)         */
/* ------------------------------------------------------------------ */
.ais-hero__glow {
  z-index: 0;
}
.ais-hero__glow--1 {
  width: clamp(280px, 38vw, 480px);
  height: clamp(280px, 38vw, 480px);
  top: -120px;
  left: -150px;
}
.ais-hero__glow--2 {
  width: clamp(320px, 44vw, 560px);
  height: clamp(320px, 44vw, 560px);
  right: -190px;
  bottom: -140px;
  opacity: .42;
}

/* ------------------------------------------------------------------ */
/* Floating capability badges around the mockup                        */
/* ------------------------------------------------------------------ */
.ais-hero__badges {
  position: absolute;
  inset: -12% -5%;
  z-index: 3;
  margin: 0;
  pointer-events: none;
}

.ais-floating-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ais-text);
  background: color-mix(in srgb, var(--ais-dark-3) 90%, transparent);
  border: 1px solid var(--ais-border);
  border-radius: var(--ais-radius-pill);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -16px var(--ais-shadow-color);
}
.ais-floating-badge .ais-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ais-orange);
}

.ais-hero__badge {
  position: absolute;
  pointer-events: auto;
  max-width: min(56%, 240px);
  white-space: nowrap;
}
.ais-hero__badge--1 { top: 10%;    left: 1%; }
.ais-hero__badge--2 { top: 22%;    right: 0; }
.ais-hero__badge--3 { bottom: 24%; left: 1%; }
.ais-hero__badge--4 { bottom: 5%;  right: 2%; }
.ais-hero__badge--5 { top: -8%;    left: 13%; }
.ais-hero__badge--6 { top: 42%;    right: -1%; }
.ais-hero__badge:nth-child(n+7) {
  position: static;
  display: inline-flex;
  margin: 10px 0 0;
  margin-inline-end: 8px;
}

/* Midnight-orange: straddle the mockup corners like neo-brutalist/aurora-glass
   do, so the pills frame the browser window instead of covering its toolbar and
   upper-right content. The <=1180 static reflow neutralizes these overrides. */
body.ais-theme-midnight-orange .ais-hero__badges { inset: 0; }
body.ais-theme-midnight-orange .ais-hero__badge--1 { top: 0; left: 0; right: auto; bottom: auto; transform: translateY(-50%); }
body.ais-theme-midnight-orange .ais-hero__badge--2 { top: 0; right: 0; left: auto; bottom: auto; transform: translateY(-50%); }
body.ais-theme-midnight-orange .ais-hero__badge--3 { bottom: 0; left: 0; top: auto; right: auto; transform: translateY(50%); }
body.ais-theme-midnight-orange .ais-hero__badge--4 { bottom: 0; right: 0; top: auto; left: auto; transform: translateY(50%); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .ais-hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(36px, 7vw, 60px);
    min-height: 0;
    text-align: center;
  }
  .ais-hero__content {
    max-width: 640px;
    margin-inline: auto;
  }
  .ais-hero .ais-eyebrow {
    /* center the inline-flex eyebrow */
    display: inline-flex;
  }
  .ais-hero__subtext {
    margin-inline: auto;
  }
  .ais-hero__actions {
    justify-content: center;
  }

  .ais-hero__visual {
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }
  .ais-hero__mockup {
    transform: none;
  }

  /* Floating chips reflow into a tidy centered row under the mockup. */
  .ais-hero__badges {
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 16px;
    margin-top: var(--ais-space-6);
    pointer-events: auto;
  }
  .ais-hero__badge {
    position: static;
    max-width: 100%;
    transform: none;
  }
  /* The midnight-orange corner-straddle translate is a per-badge override with
     higher specificity than the .ais-hero__badge reset above, so that reset does
     not win — badges 1-2 stay shifted up and 3-4 down. Neutralize the straddle at
     MATCHING specificity so all four chips sit on one baseline in the reflowed row. */
  body.ais-theme-midnight-orange .ais-hero__badge--1,
  body.ais-theme-midnight-orange .ais-hero__badge--2,
  body.ais-theme-midnight-orange .ais-hero__badge--3,
  body.ais-theme-midnight-orange .ais-hero__badge--4 {
    transform: none;
  }
}

@media (max-width: 640px) {
  /* Hero top/bottom padding now follows --ais-section-pad, which theme.css
     already steps down at <=640px — no per-hero override needed. */
  .ais-hero__title {
    font-size: clamp(2.1rem, 9vw, 3rem);
  }
  /* Stack CTAs full-width (theme.css makes .ais-btn full width here). */
  .ais-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ais-hero__badge {
    font-size: .78rem;
    white-space: normal;
  }
}

/* ------------------------------------------------------------------ */
/* RTL — mirror only asymmetric visuals; LTR rendering is untouched.   */
/* Decorative floating badges + mockup 3D tilt intentionally left as-is */
/* (they reflow to a static centered row and carry no reading meaning). */
/* ------------------------------------------------------------------ */
[dir="rtl"] .ais-hero__actions .ais-btn:hover .ais-icon {
  transform: translateX(-3px);
}
[dir="rtl"] .ais-hero__glow--1 {
  left: auto;
  right: -150px;
}
[dir="rtl"] .ais-hero__glow--2 {
  right: auto;
  left: -190px;
}