/* ==========================================================================
   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;
}

/* 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(--neu-blue);
}

/* 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;
}

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

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

  .hero__heading {
    font-size: 2.5rem;
    line-height: 1.05;
  }

  .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;
  }
}

/* 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(--neu-blue);
}

/* 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);
}