/* Homepage hero treatment */
.home-page main {
  padding-top: 0;
}

.hero {
  --hero-x: 72%;
  --hero-y: 28%;
  --hero-y-shift: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  min-height: clamp(720px, 100svh, 960px);
  padding: calc(80px + clamp(28px, 4vw, 64px)) var(--gutter) clamp(56px, 6vw, var(--s8));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  color: #fff;
  background:
    radial-gradient(92% 54% at var(--hero-x) calc(-12% + var(--hero-y-shift)), #3d67ff 0%, #2544f1 24%, rgba(13, 22, 152, 0.82) 42%, rgba(4, 6, 33, 0) 69%),
    radial-gradient(48% 31% at -4% -8%, #c2fffb 0%, #67d7f1 28%, rgba(50, 118, 255, 0.28) 53%, transparent 76%),
    radial-gradient(70% 38% at 99% -4%, rgba(67, 116, 255, 0.46) 0%, rgba(17, 29, 144, 0.2) 40%, transparent 73%),
    radial-gradient(50% 20% at 20% 8%, rgba(49, 79, 255, 0.44), transparent 72%),
    #02020c;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.75'/%3E%3C/svg%3E");
}

.hero > .hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.96;
  background: url("/assets/hero-doorway.jpg") 60% center / cover no-repeat;
}


.hero > .hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,2,12,.68) 0%, rgba(2,2,12,.46) 42%, rgba(2,2,12,.14) 68%, transparent 86%);
}

.hero > :not(.hero-art) {
  position: relative;
  z-index: 2;
}

.hero h1{
  color: #fff;
}

.hero .deck{
  color:#fff;
  font-family:var(--font-sans);
  font-size:var(--t-body-lg);
  line-height:1.45;
  font-weight:400;
  opacity:1;
}

.hero .btn-primary,
.hero .btn-quiet {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07));
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 8px 28px rgba(2, 3, 20, 0.18);
  color: #fff;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.hero .btn-primary:hover,
.hero .btn-quiet:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.27), rgba(255, 255, 255, 0.12));
  border-color: rgba(255, 255, 255, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 14px 34px rgba(2, 3, 20, 0.22);
  color: #fff;
}

@media (max-width: 640px) {
  .hero {
    min-height: 720px;
    padding-top: calc(74px + clamp(28px, 4vw, 48px));
  }

  .hero > .hero-art {
    opacity: 0.9;
    background-position: 72% center;
  }


  .hero > .hero-art::after {
    background: linear-gradient(90deg, rgba(2,2,12,.7) 0%, rgba(2,2,12,.46) 58%, rgba(2,2,12,.12) 84%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    --hero-x: 72%;
    --hero-y: 28%;
  }

  .hero > .hero-art {
    opacity: 0.92;
  }

}

/* Liquid-glass navigation over the hero */
.home-page .site-header {
  background: linear-gradient(105deg, rgba(7, 8, 25, 0.3), rgba(22, 20, 54, 0.12));
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 8px 30px rgba(2, 3, 15, 0.12);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
}

.home-page .site-header .wordmark,
.home-page .site-header .tld {
  color: rgba(255, 255, 255, 0.92);
}

.home-page .site-header .btn-nav {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 8px 28px rgba(2, 3, 20, 0.18);
  color: #fff;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

.home-page .site-header .btn-nav:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.27), rgba(255, 255, 255, 0.12));
  border-color: rgba(255, 255, 255, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 14px 34px rgba(2, 3, 20, 0.22);
  color: #fff;
}

.hero h1,
.hero .deck{
  margin-left: 0;
  margin-right: 0;
}

.hero .hero-actions {
  justify-content: flex-start;
}

/* Compact the hero into a single, readable content block */
.hero h1{
  max-width: 62rem;
  margin: 0;
  font-size: clamp(3.25rem, 3.1vw, 3.75rem);
}

.hero .deck{
  max-width: 45rem;
  margin-top: clamp(1.1rem, 1.6vw, 1.5rem);
  margin-bottom: 0;
}

.hero .hero-actions {
  gap: clamp(0.9rem, 1.5vw, 1.5rem);
  margin-top: clamp(1.25rem, 1.8vw, 1.75rem);
}

.hero .hero-proof {
  margin: 0 0 clamp(1rem, 1.8vw, 1.5rem);
  color: #a9c5ff;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
}

.hero-heading-accent{
  font-family:var(--font-heading);
  font-weight:400;
  font-style:normal;
}