/* ==========================================================================
   Hero Section, Clean & Minimal (Concept D)
   Massive typography, gradient text accent, vertical line, brand gradient bottom
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-20, 5rem);
  padding-bottom: var(--space-16, 4rem);
  overflow: hidden;
}

/* The awards strip is position:absolute, so the hero reserves no space for it
   and the centred content runs straight into it once the viewport is short:
   measured 36px of overlap at 1100x620, and 19px across most desktop widths.
   The strip tops out at 109px (it wraps to two rows between 920px and 1080px)
   plus its 4px offset, so reserve 136px and let the content centre in the space
   that remains above it. :has() scopes this to the one hero that has a strip;
   every other hero keeps the 4rem padding above. */
.hero:has(.hero-awards) {
  padding-bottom: 8.5rem;
}

/* Background Variants
   ========================================================================== */

.hero--gradient {
  background: linear-gradient(170deg,
    #030810 0%,
    var(--midnight) 40%,
    var(--deep-navy) 70%,
    #0a1e38 100%);
}

.hero--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay, only for image backgrounds */
.hero--image .hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 26, 46, 0.6) 0%,
    rgba(11, 26, 46, 0.8) 50%,
    rgba(15, 40, 71, 0.95) 100%
  );
  z-index: 1;
}

.hero--gradient .hero__overlay {
  display: none;
}

/* Subtle ambient glow, top right */
.hero__glow {
  position: absolute;
  top: 15%;
  right: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle,
    rgba(4, 152, 254, 0.08) 0%,
    transparent 65%);
  z-index: 1;
  pointer-events: none;
}

/* Vertical accent line, left side */
.hero__vline {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 8%;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--neu-blue), transparent);
  z-index: 2;
  pointer-events: none;
}

/* Brand gradient accent line, bottom edge (Section 21) */
.hero__accent-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(4, 152, 254, 0.30) 15%,
    rgba(4, 152, 254, 1.00) 35%,
    rgba(4, 152, 254, 1.00) 65%,
    rgba(4, 152, 254, 0.30) 85%,
    transparent 100%);
  z-index: 5;
}

/* Content
   ========================================================================== */

.hero .container {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero__content {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Eyebrow with accent bar, Brand Guide Section 21, Application 3 */
.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--space-4, 1rem);
}

.hero__content .text-eyebrow {
  display: inline-block;
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-blue-text);
}

/* Heading, clean, prominent typography. Default 4.5rem matches the
   about page. Homepage hero uses .hero--xl modifier for 6rem to be the
   marquee/anchor moment of the site. */
.hero__heading {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: var(--space-8, 2rem);
}
.hero--xl .hero__heading {
  font-size: 6rem;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
@media (max-width: 1023px) {
  .hero__heading { font-size: 3.5rem; }
  .hero--xl .hero__heading { font-size: 4.5rem; }
}

/* Gradient text accent for emphasis words */
.hero__heading-accent {
  background: linear-gradient(135deg, var(--white) 0%, var(--neu-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subheading {
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.7;
  color: var(--silver);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-10, 2.5rem);
}

.hero__subheading p {
  margin: 0;
}

/* CTA Group
   ========================================================================== */

.hero__cta-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
}

/* Equal-width hero buttons.
   The pair used to size to its own label, so on the homepage "Book a Demo" was
   177px against "Watch the Video" at 201px.
   A fixed min-width will not do it: these 23 heroes run from "Learn More" to
   "See Our Compliance Rate". Equal 1fr columns inside a fit-content grid size
   both to the wider label on whichever page they are on. Height is handled by
   the transparent border on .btn in base.css. Desktop only: below 769px the
   group already stacks to full-width buttons. */
@media (min-width: 769px) {
  .hero__cta-group {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    width: fit-content;
    margin-inline: auto;
  }
}

/* Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .hero {
    min-height: 85vh;
    padding-top: var(--space-24, 6rem);
    padding-bottom: var(--space-12, 3rem);
  }

  /* .hero--xl .hero__heading (0,2,0) outranks a bare .hero__heading (0,1,0),
     so the mobile size below never reached an --xl hero: the homepage h1 stayed
     at 4.5rem/72px on a 375px phone and overflow:hidden cut the word off. Both
     selectors are listed so the mobile size actually applies, and the clamp
     keeps the longest word inside the container down to 320px. */
  .hero__heading,
  .hero--xl .hero__heading {
    font-size: clamp(1.6rem, 8.5vw, 2.5rem);
    line-height: 1.05;
    overflow-wrap: break-word;
  }

  .hero__subheading {
    font-size: var(--text-base, 1rem);
  }

  .hero__cta-group {
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
  }

  .hero__cta-group .btn {
    width: 100%;
    text-align: center;
  }

  .hero__glow {
    width: 300px;
    height: 300px;
  }

  .hero__vline {
    display: none;
  }
}

/* The vertical accent sits at left:8%, so it collides with the centred heading
   whenever the heading grows wide enough to reach past 0.08W. The heading's width
   is set by font-size, not viewport, so the crossover is a fixed viewport width:
   about 1156px for .hero--xl (6rem, ~971px wide) and about 867px for the 4.5rem
   default. Below those the line was drawn straight through the first letter, e.g.
   the S of Servicing. Hide it until there is genuinely room beside the text. */
@media (max-width: 1199px) {
  .hero--xl .hero__vline {
    display: none;
  }
}
@media (max-width: 899px) {
  .hero__vline {
    display: none;
  }
}

/* The split blog hero is a different geometry again. Its text column starts at
   the container edge rather than centred across the viewport, so the line at
   left:8% lands *inside* the column and runs through the heading. Measured
   collision band is 900px to 1499px, which is most laptop widths; from 1500px
   the column has moved right of the line and it reads correctly. */
@media (max-width: 1499px) {
  .hero--blog--split .hero__vline {
    display: none;
  }
}

/* Note: previously this file had @media (min-width: 1024px) bumping
   .hero__heading to 6rem on all desktop pages. That made subpages look
   crammed. Sizes are now controlled by the .hero--xl modifier above
   (homepage = 4.5rem matches about; subpages = 3.5rem default). */

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

/* Light theme, hero stays dark for contrast */
[data-theme="light"] .hero--gradient {
  background: linear-gradient(170deg,
    #050d1a 0%,
    var(--midnight) 40%,
    var(--deep-navy) 100%);
}

[data-theme="light"] .hero .hero__heading {
  color: var(--white);
}

[data-theme="light"] .hero .hero__subheading {
  color: var(--silver);
}

[data-theme="light"] .hero .text-eyebrow {
  color: var(--brand-blue-text);
}

/* Secondary buttons in the hero always sit on a dark background,
   keep them white/visible regardless of the active theme */
[data-theme="light"] .hero .btn--secondary {
  color: rgba(255, 255, 255, 0.90);
  border-color: rgba(255, 255, 255, 0.50);
}
[data-theme="light"] .hero .btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.70);
}