/* BNHC — splash front page */

/* Photo placement and overlay replicate the Figma frame (37:93):
   image placed at 1918×1249 in a 440-wide screen, left crop 1083px,
   bottom-aligned; radial gradient centered 183px from the column's
   left edge, 311px from the top. */
body {
  min-height: 100dvh;
  background-image:
    radial-gradient(ellipse 990px 645px at calc(50% - 37px) 311px,
      rgba(30, 43, 60, 0.15) 0%,
      rgba(3, 15, 29, 0.97) 94.8%),
    url("../assets/bg-hero.jpg");
  /* Width term reproduces the Figma zoom at the design's 440×956 aspect;
     the height term caps the zoom in shorter windows so the top of the
     photo (the woman's head) is never cropped more than in the design. */
  background-size: auto, min(435.91%, 200.65vh) auto;
  background-size: auto, min(435.91%, 200.65dvh) auto;
  background-position: 0 0, 73.27% bottom;
  background-repeat: no-repeat;
}

@media (min-width: 600px) {
  body {
    background-size: auto, cover;
    background-position: 0 0, center 30%;
  }
}

.hero {
  min-height: 100dvh;
  max-width: 440px;
  margin: 0 auto;
  padding: 48px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

/* Card */

.card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  padding: 25px;
  border-radius: 25px;
  background: rgba(104, 104, 104, 0.15);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  text-align: center;
}

.card-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.card-copy h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}

.card-copy p {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
}

.actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Feature list */

.features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
}

.dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}