/* ==========================================================================
   Hero variation B — preview only.

   Composition follows a reference Anthony shared; the content, palette and
   type are Arcrel's own.

   The gradient field, ambient blobs and flanking slabs that used to live here
   are gone — drifting blurred blobs are the most recognisable AI-generated
   background there is. What replaced them is a night sky: a still star field
   thinned out behind the copy, with occasional shooting stars crossing above.

   Namespaced hb-*.
   ========================================================================== */

.hero-b main {
  padding-top: 0;
}

.hb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The section is flex-centred, so this padding is what sets the gap between
     the nav and the eyebrow. The nav is transparent at rest, so the eyebrow
     needs real clearance beneath it or the two read as one stacked block. */
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem));
  /* The awards strip is the last thing in the hero, so this is the gap between
     it and the section that follows. It needs to be generous — the strip is
     small, quiet type and butts straight into the next block's heading. */
  padding-bottom: clamp(4rem, 9vw, 7rem);
  text-align: center;
  /* Flat, near-black, with the faintest lift under the headline. The motion
     graphic supplies the interest; the surface should not compete with it. */
  background:
    radial-gradient(ellipse 70% 50% at 50% 34%, #120a24, transparent 70%),
    #07040d;
}

/* --- Motion graphic --------------------------------------------------------
   A night sky with occasional shooting stars.

   Earlier passes put hard lines through the composition — converging routes
   crossed the headline, a growth curve cut a diagonal across the frame. This
   has no lines at rest: a still field, thinned out behind the copy so the type
   always sits on clean ground, with streaks crossing the upper sky.

   Star positions are generated at build time from a fixed seed rather than
   tiled or evenly spaced, which is what keeps it from reading as generated.
   Everything animates on opacity and transform only.
-------------------------------------------------------------------------- */

.hb__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hb__stars circle {
  fill: #e9e6ff;
  /* Six stagger groups on a long cycle. Twinkle is a slight dimming, not a
     blink — stars that switch on and off look like a broken string of lights. */
  animation: hbTwinkle 6s ease-in-out infinite;
  animation-delay: calc(var(--t) * -0.9s);
}

@keyframes hbTwinkle {
  0%, 100% { opacity: inherit; }
  50%      { opacity: 0.28; }
}

/* --- Shooting stars --------------------------------------------------------
   Each streak is one group translated along its own axis. The trail tapers to
   nothing at the back so it reads as motion rather than as a drawn line, and
   the whole group scales up slightly as it travels to suggest it is passing
   closer. Rare and slow on purpose: a steady stream looks like weather.
-------------------------------------------------------------------------- */

.hb__shot {
  opacity: 0;
  /* Linear, not eased: a streak crossing the whole frame should hold a constant
     speed. Easing made it visibly decelerate mid-screen.

     36s cycle across twelve streaks puts one arrival every 3s. Visible for
     7.5% of the cycle, so a crossing takes about 2.7s and there is a short
     beat of empty sky between each. */
  animation: hbShoot 36s linear infinite;
  animation-delay: calc(var(--d) * -1);
}

.hb__shot-trail {
  stroke: url(#hbTrail);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.hb__shot-head {
  fill: #ffffff;
  filter: drop-shadow(0 0 5px rgba(221, 214, 254, 0.95));
}

/* A full crossing along the streak's own vector. --dx/--dy come from the
   markup, so each star travels its own angle and its trail is drawn to match.
   The distances overshoot the 1440-wide viewBox on both sides, so every streak
   enters and leaves off-frame.

   Opacity ramps at the ends rather than cutting, so nothing ever appears or
   vanishes mid-screen. */
@keyframes hbShoot {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  1% {
    opacity: 1;
  }
  6.5% {
    opacity: 1;
  }
  7.5% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0);
  }
}

/* Stopped, it is still a night sky — the stars stay, the streaks simply do
   not travel. */
@media (prefers-reduced-motion: reduce) {
  .hb__stars circle {
    animation: none;
  }
  .hb__shot {
    animation: none;
    opacity: 0.5;
  }
}

/* --- Headline ------------------------------------------------------------- */

.hb__inner {
  position: relative;
  z-index: 1;
}

.hb__badge {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Matches the rest of the site: 900 weight, uppercase, tight tracking. The
   earlier light sentence-case setting looked composed on its own but put the
   hero in a different type system from every section below it.

   Set slightly expanded on Archivo's width axis. The tracking and measure are
   tuned to that face, not to Inter — Archivo's caps are wider, so the old
   -0.03em closed the counters up, and below 18ch the headline drops to four
   lines and strands "REVENUE" on its own. */
.hb__h1 {
  margin: 0 auto clamp(1rem, 2.5vw, 1.75rem);
  line-height: 1.02;
  color: var(--white);
  text-wrap: balance;
}

.hb__sub {
  margin: 0 auto;
  max-width: 50ch;
  font-family: var(--font-body);
  /* Display and body are the same family now, so the sub needs a little more
     weight than a 400 to hold its own under a 900 headline. */
  font-weight: 450;
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* --- CTA + proof ---------------------------------------------------------- */

/* The bespoke white pill that lived here is gone — the buttons now use the
   site's own .arcrel-lv-btn classes so this hero shares one CTA vocabulary
   with every other page. */
.hb__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.hb__proof {
  --hb-bracket: rgba(139, 92, 246, 0.55);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.6rem;
  text-align: left;
}

/* Four corners, from two mirrored pseudo-elements. Two diagonal marks read as
   a rendering fault; four read as a deliberate crop. */
.hb__proof::before,
.hb__proof::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--hb-bracket), var(--hb-bracket)) 0 0 / 1px 13px no-repeat,
    linear-gradient(var(--hb-bracket), var(--hb-bracket)) 0 0 / 13px 1px no-repeat;
}

.hb__proof::after {
  scale: -1 -1;
}

.hb__faces {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb__faces li + li {
  margin-left: -0.7rem;
}

.hb__faces img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
  border: 2px solid var(--black);
}

.hb__proof-text {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--muted);
}

.hb__proof-text b {
  color: var(--white);
  font-weight: 700;
}

/* Renamed from .hb__stars, which collided with the SVG star field group — the
   font rules were landing on an <g> as well as on the rating characters. */
.hb__rating {
  font-size: 0.95em;
  letter-spacing: 0.16em;
  color: #f5c451;
}

/* --- Award badges ----------------------------------------------------------
   Lifted into the hero so the proof stack is complete above the fold: rating,
   client count, then third-party recognition. Separated by a hairline so they
   read as a distinct tier rather than more of the same row.
-------------------------------------------------------------------------- */

/* Desktop: rating sits beside the badges as one left-aligned credential line,
   so the proof reads as a single strip rather than three scattered items.
   Centres and stacks below 900px. */
/* Mobile first: stacked and centred, rating on top of the badges. Desktop
   turns the same markup into one horizontal credential line — see the
   min-width rule below. Source order puts the rating first either way, so it
   lands on top when stacked and on the left when in a row. */
.hb__credentials {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: left;
  /* Hairline that fades at both ends — a hard rule would cut the composition
     in half at the point the eye should keep travelling. */
  border-top: 1px solid transparent;
  border-image: linear-gradient(
      to right,
      rgba(167, 139, 250, 0.22),
      rgba(167, 139, 250, 0.22) 55%,
      transparent
    )
    1;
}

/* Desktop: one horizontal credential line, rating on the left, badges beside
   it. Wide enough here that the two sit comfortably side by side. */
@media (min-width: 901px) {
  .hb__credentials {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
}

.hb__awards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb__awards img {
  height: clamp(56px, 7vw, 74px);
  width: auto;
  /* Badge artwork is dark line-art; inverting lifts it onto the dark field.
     Held under full white so it stays supporting rather than shouting. */
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hb__awards img:hover {
  opacity: 0.9;
}

@media (max-width: 860px) {
  .hb {
    min-height: 0;
  }
}