/* Home hero — glass panel over sky artwork (from "Devsignal Hero" design).
   Uses the site's fluid root font-size, so rem values scale with viewport. */

/* The section is one viewport of untouched sky plus a short 8rem tail
   below the fold. The tail is tinted progressively to the exact
   #080807 the Problem section starts with, so the sky bleeds into the
   dark page with no seam — opaque colors only, nothing browser-fragile. */
.hero25 {
  position: relative;
  width: 100%;
  min-height: calc(100svh + 8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 5.9rem 2.5rem 10.5rem;
  overflow: hidden;
  font-family: Aeonik, Arial, sans-serif;
}

/* Sky + atmospheric tint on their own layer, below all content. */
.hero25::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, 0.06) 0%, rgba(70, 110, 190, 0.14) 60%, rgba(40, 70, 140, 0.3) 100%), url('../images/hero-sky.jpg');
  background-size: cover;
  background-position: center;
}

/* Darken the below-fold tail to exactly #080807; the first viewport
   stays untouched because the gradient starts at the fold. */
.hero25::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8rem;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 7, 0) 0%, rgba(8, 8, 7, 0.16) 30%, rgba(8, 8, 7, 0.42) 55%, rgba(8, 8, 7, 0.72) 75%, rgba(8, 8, 7, 0.92) 90%, #080807 100%);
}

@media screen and (max-width: 767px) {
  /* On phones the +8rem tail left a band of empty sky before the dark
     Problem section; end the hero at one viewport and tighten the tail. */
  .hero25 {
    min-height: 100svh;
    padding: 5.5rem 1rem 6rem;
  }

  /* Gentler sky-to-dark blend on small screens. */
  .hero25::after {
    height: 12rem;
  }

  .hero25-nav {
    top: 1rem;
  }

  .hero25::before {
    background-image: url('../images/hero-sky-p-1080.jpg');
  }
}

/* Atmospheric radial tint rides on the sky layer's backgrounds above. */
.hero25-overlay {
  display: none;
}

/* The body background is scroll-animated from light to dark; paint the
   section after the hero black so no light band shows at the seam, and
   fade the paint back out at its bottom so the body tween takes over
   without a hard edge. */
.relative.is--problem-section {
  background: linear-gradient(180deg, #080807 0%, #080807 calc(100% - 24rem), rgba(8, 8, 7, 0) 100%);
}

/* --- segmented glass nav (Lassie-style) --- */

/* Fixed, not sticky: sticky would pin only within the hero section and
   scroll away after it; fixed keeps the pill floating over every
   section. width: fit-content + auto margins center it without a
   transform, so the GSAP loading tween can still animate transforms.

   One tinted glass bar; items are ghost text. Hovering an item slides a
   solid white pill (.hero25-nav-glider, driven by candidates.js) under it
   and turns the label dark; without JS a plain white hover background
   stands in for it. */
.hero25-nav {
  position: fixed;
  top: 1.625rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.4375rem;
  border-radius: 1.375rem;
  background: rgba(24, 27, 35, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 0.5rem 1.875rem rgba(12, 18, 32, 0.22);
}

.hero25-nav-glider {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 25, 50, 0.18);
  opacity: 0;
  transition:
    left 0.45s cubic-bezier(0.3, 1, 0.35, 1),
    width 0.45s cubic-bezier(0.3, 1, 0.35, 1),
    top 0.45s cubic-bezier(0.3, 1, 0.35, 1),
    height 0.45s cubic-bezier(0.3, 1, 0.35, 1),
    opacity 0.25s ease;
}

.hero25-nav a,
.hero25-nav button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  text-decoration: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  border-radius: 1rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(12, 18, 32, 0.28);
  transition: color 0.3s ease, background-color 0.2s ease;
}

/* The hovered item's label darkens; the white box behind it is the
   glider. .is-active pins the box to "For Candidates" while its modal
   is open. */
.hero25-nav a:hover,
.hero25-nav button:hover,
.hero25-nav .is-active {
  color: #14213a;
  text-shadow: none;
}

/* JS not running yet (or disabled): paint the white box directly. */
.hero25-nav:not(.has-glider) a:hover,
.hero25-nav:not(.has-glider) button:hover,
.hero25-nav:not(.has-glider) .is-active {
  background: #ffffff;
}

.hero25-nav-brand,
.hero25-nav-link,
.hero25-nav-cta {
  padding: 0.75rem 1.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Brand = vector icon + vector wordmark, both currentColor so they follow
   the nav's white/ink state. Scrolling past the hero adds .is-shrunk
   (candidates.js), which collapses the wordmark's wrapper to 0 width —
   the mark itself never changes, it just gets clipped away, Lassie-style. */
.hero25-brand-icon {
  display: block;
  flex: none;
  height: 1.375rem;
  width: auto;
}

.hero25-brand-word {
  display: block;
  overflow: hidden;
  max-width: 5rem;
  margin-left: 0.3125rem;
  transition: max-width 0.5s cubic-bezier(0.3, 1, 0.35, 1), margin-left 0.5s cubic-bezier(0.3, 1, 0.35, 1);
}

/* The wordmark viewBox spans the same y-range as the icon box in the
   source logo, so equal heights reproduce the original alignment. */
.hero25-brand-word-svg {
  display: block;
  height: 1.375rem;
  width: 4.516rem; /* keeps its size while the wrapper clips it */
}

.hero25-nav.is-shrunk .hero25-brand-word {
  max-width: 0;
  margin-left: 0;
}

/* The CTA keeps a solid dark-navy pill at all times; the hover glider
   skips it (candidates.js excludes .hero25-nav-cta). */
.hero25-nav .hero25-nav-cta {
  background: #14213a;
  color: #ffffff;
  text-shadow: none;
  box-shadow: 0 1px 3px rgba(15, 25, 50, 0.18);
}

.hero25-nav .hero25-nav-cta:hover {
  background: #24345c;
  color: #ffffff;
}

.hero25-nav-short {
  display: none;
}

@media screen and (max-width: 479px) {
  .hero25-nav {
    gap: 0.125rem;
    padding: 0.3125rem;
  }

  .hero25-nav-brand,
  .hero25-nav-link,
  .hero25-nav-cta {
    padding: 0.5625rem 0.625rem;
    font-size: 0.8125rem;
  }

  .hero25-brand-icon {
    height: 1.125rem;
  }

  .hero25-brand-word-svg {
    height: 1.125rem;
    width: 3.695rem;
  }

  .hero25-nav-full {
    display: none;
  }

  .hero25-nav-short {
    display: inline;
  }
}

/* Keep anchor targets clear of the fixed nav. */
#hiring,
#vetting {
  scroll-margin-top: 6.5rem;
}

/* --- frosted glass copy panel --- */

.hero25-center {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2rem 0;
}

.hero25-panel {
  width: min(70rem, 94vw);
  min-height: min(44rem, 60vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2.125rem;
  padding: clamp(2.5rem, 6vh, 5rem) clamp(1.5rem, 6vw, 6.5rem) clamp(2.25rem, 4.5vh, 4rem);
  border-radius: 2.75rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 1.875rem 5rem rgba(35, 60, 120, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.hero25-headline {
  margin: 0;
  font-family: Featuredisplay, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(2.75rem, 6vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #12203c;
}

.hero25-headline em {
  font-style: italic;
}

.hero25-sub {
  margin: 0;
  font-size: clamp(0.9375rem, 1.35vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
  color: #33405e;
  max-width: 56ch;
}

/* --- role input + trial chip + ticker --- */

.hero25-cta-group {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

.hero25-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero25-form {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: min(27.5rem, 80vw);
  padding: 0.375rem 0.375rem 0.375rem 1.375rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0.75rem 1.875rem rgba(30, 50, 100, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.hero25-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: #12203c;
}

.hero25-input::placeholder {
  color: rgba(18, 32, 60, 0.55);
}

.hero25-submit {
  flex: none;
  width: 2.625rem;
  height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: #14213a;
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hero25-submit:hover {
  background: #24345c;
}

.hero25-chip {
  display: inline-flex;
  align-items: center;
  height: 2.625rem;
  padding: 0 1.125rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #33405e;
  white-space: nowrap;
}

/* --- investor logo marquee --- */

.hero25-logos {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375rem;
  padding-top: 2.5rem;
}

.hero25-logos-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 6px rgba(30, 50, 100, 0.3);
}

.hero25-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.hero25-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: hero25-marquee 66s linear infinite;
  color: rgba(255, 255, 255, 0.92);
}

.hero25-marquee-track .marquee--img {
  height: 2.375rem;
  margin-right: 2.125rem;
}

@keyframes hero25-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

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

/* --- Problem section: no scroll-jack --- */

/* The Webflow export pins .is--home-problem (position: sticky) while the
   empty 150vh .problem--trigger spacer scrolls by, and the netlify-hosted
   scripts scrub the swirl + paragraph reveal against that spacer. Un-pin
   the section and collapse the spacer; the inline override script in
   index.html retargets those scrubs to the section itself (mirroring how
   .is--home-afterproblem drives #scroll-line-3). founderhotline.html
   doesn't load this file and keeps the original pinned behavior. */
.section.is--home-problem {
  position: relative;
  top: auto;
}

.problem--trigger {
  min-height: 0;
}

/* --- Problem swirl: full-bleed tails --- */

/* line--2 is a fixed 112rem SVG anchored to the centered container, so on
   monitors wider than ~1790px both rounded ends stopped mid-screen. The
   path in index.html now extends past the viewBox on both sides (smooth
   tangent continuations); this lets those tails render. */
svg.line--2 {
  overflow: visible;
}