.hero-detail {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: clamp(8rem, 10%, 12rem) 5% clamp(6rem, 10%, 12rem);
  margin: 1.6rem auto 0;
  border-radius: 16px;
  background-color: var(--navy);
  max-width: calc(100% - 2rem);
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 60px -24px rgba(12, 20, 75, 0.45);
}

@media (min-width: 1460px) {
  .hero-detail { max-width: 1440px; }
}

.hero-detail .background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Top sheen + faint mint underglow for depth */
.hero-detail .background::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 40% at 50% 115%, rgba(179, 252, 228, 0.1) 0%, rgba(179, 252, 228, 0) 60%);
}

.hero-detail .background .gradient,
.hero-detail .background .line {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  opacity: 1;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.hero-detail .background .gradient--1 {
  top: 0%;
  left: 2.5%;
  width: 200%;
  background: radial-gradient(circle, rgba(74,87,225, 0.8) 0%, rgba(74,87,225, 0) 50%, transparent 100%);
}

@media (min-width: 600px) {
  .hero-detail .background .gradient--1 { width: 120%; opacity: 0.6; }
}

.hero-detail .background .gradient--2 {
  top: 105%;
  left: -5%;
  width: 150%;
  background: radial-gradient(circle, rgba(158, 255, 227, 1) 0%, rgba(158, 255, 227, .7) 30%, rgba(158, 255, 227, 0) 70%, transparent 100%);
  opacity: 0.5;
}

@media (min-width: 600px) {
  .hero-detail .background .gradient--2 { opacity: .6; width: 70%; }
}

.hero-detail .background .gradient--3 {
  left: 110%;
  top: 110%;
  width: 120%;
  background: radial-gradient(circle, rgba(28,188,252, 1) 0%, rgba(52,136,252, .7) 30%, rgba(74,87,255, 0) 70%, transparent 100%);
  opacity: 0.25;
}

@media (min-width: 600px) {
  .hero-detail .background .gradient--3 { opacity: .7; width: 135%; }
}

.hero-detail .background .gradient--4 {
  top: -20%;
  left: 75%;
  width: 110%;
  opacity: 0.25;
  background: radial-gradient(circle, rgba(158, 255, 227, 0.8) 0%, rgba(158, 255, 227, 0.5) 15%, rgba(158, 255, 227, 0) 65%, transparent 100%);
}

@media (min-width: 600px) {
  .hero-detail .background .gradient--4 { width: 70%; opacity: 1; }
}

.hero-detail .background .line { opacity: 0.5; }

/* ── Mesh gradient background (Style tab → Background style: Mesh) ── */

.hero-detail .background .mesh-blob {
  filter: blur(70px);
}

.hero-detail .background .mesh-blob--1 {
  top: 10%;
  left: 15%;
  width: 70%;
  background: radial-gradient(circle, rgba(77, 87, 245, 0.65) 0%, rgba(77, 87, 245, 0) 70%);
}

.hero-detail .background .mesh-blob--2 {
  top: 15%;
  left: 92%;
  width: 80%;
  background: radial-gradient(circle, rgba(28, 188, 252, 0.38) 0%, rgba(28, 188, 252, 0) 70%);
}

.hero-detail .background .mesh-blob--3 {
  top: 95%;
  left: 82%;
  width: 78%;
  background: radial-gradient(circle, rgba(74, 87, 225, 0.55) 0%, rgba(74, 87, 225, 0) 70%);
}

.hero-detail .background .mesh-blob--4 {
  top: 100%;
  left: 22%;
  width: 60%;
  background: radial-gradient(circle, rgba(179, 252, 228, 0.26) 0%, rgba(179, 252, 228, 0) 70%);
}

.hero-detail .background .mesh-blob--5 {
  top: 50%;
  left: 55%;
  width: 95%;
  background: radial-gradient(circle, rgba(30, 35, 102, 0.5) 0%, rgba(30, 35, 102, 0) 70%);
}

@media (max-width: 599px) {
  .hero-detail .background .mesh-blob { filter: blur(46px); }
  .hero-detail .background .mesh-blob--1 { width: 110%; }
  .hero-detail .background .mesh-blob--3 { width: 120%; }
}

.hero-detail .background .line--1 { top: 60%; left: 105%; width: 42%; border: .8px solid white; background: transparent; }
.hero-detail .background .line--2 { top: 7%; left: 105%; width: 33%; border: .8px solid white; background: transparent; }
.hero-detail .background .line--3 { top: 63%; left: 8%; width: 33%; border: .8px solid white; background: transparent; }
.hero-detail .background .line--4 { top: 80%; left: 0%; width: 33%; border: .8px solid white; background: transparent; }

.hero-detail .container {
  --containerWidth: 90%;
  position: relative;
  z-index: 1;
}

.hero-detail .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  max-width: var(--content-max-width, none);
  margin-inline: auto;
}

.hero-detail .content.align-left {
  align-items: flex-start;
  text-align: left;
  margin-inline: 0;
}

.hero-detail .overline {
  color: var(--mint);
  letter-spacing: 0.08em;
  padding: 0;
  margin-bottom: 0;
}

.hero-detail .heading1 {
  margin: 0.75em 0 0;
  text-wrap: balance;
  color: var(--white);
  font-size: clamp(2.6rem, 4vw, 4rem);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-detail .heading1 {
    background: linear-gradient(180deg, #ffffff 15%, rgba(179, 252, 228, 0.92) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* line-height:1 lets descenders escape the box; pad the paintable
       area below the baseline so clipped text keeps its descenders */
    padding-bottom: 0.15em;
    margin-bottom: -0.15em;
  }
}

.hero-detail .copy {
  font-family: var(--aller);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: var(--light);
  line-height: 1.3;
  color: var(--mint);
  max-width: var(--content-max-width, 780px);
}

.hero-detail .copy p {
  font: inherit;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.hero-detail .copy p:last-child {
  margin-bottom: 0;
}

.hero-detail .btn {
  margin-top: 1rem;
  font-size: 2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-detail .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(77, 87, 245, 0.6);
}

.hero-detail .btn:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-detail .content > * {
    animation: hero-detail-rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }
  .hero-detail .content > *:nth-child(2) { animation-delay: 0.08s; }
  .hero-detail .content > *:nth-child(3) { animation-delay: 0.16s; }
  .hero-detail .content > *:nth-child(4) { animation-delay: 0.24s; }
  .hero-detail .content > *:nth-child(5) { animation-delay: 0.32s; }
}

@keyframes hero-detail-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  .hero-detail .btn { font-size: 2.2rem; }
}

.hero-detail .secondary-copy {
  font-family: var(--aller);
  font-size: 1.6rem;
  font-weight: var(--light);
  color: var(--white);
  margin: 1rem 0 0;
  line-height: 1.5;
  max-width: var(--content-max-width, 780px);
  text-wrap: balance;
}

.hero-detail .secondary-copy p {
  font: inherit;
}

@media (min-width: 768px) {
  .hero-detail .secondary-copy { font-size: 1.8rem; }
}

@media (min-width: 600px) {
  .hero-detail .secondary-copy { font-size: 2.2rem; line-height: 1.25; }
}