/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* TYPOGRAPHY — closest visual match */
body {
  font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  height: 100vh;
  background: #111;
}

/* HERO BACKGROUND */
.hero {
  position: relative;
  height: 100vh;
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center bottom;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* PURPLE / WINE OVERLAY — MATCHES SCREENSHOT */
.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(48, 18, 36, 0.78) 0%,     /* lighter top */
    rgba(48, 18, 36, 0.82) 25%,
    rgba(32, 10, 26, 0.88) 45%,
    rgba(20, 8, 16, 0.94) 70%,
    rgba(8, 4, 10, 0.97) 100%     /* same dark bottom */
  );
  z-index: 1;
}


/* CENTER FRAME */
.content-box {
  position: relative;
  z-index: 2;
  border: 2px solid rgba(255, 255, 255, 0.75);
  padding: 52px 72px;
  text-align: center;
}

/* TITLE */
.content-box h1 {
  font-size: clamp(40px, 6vw, 58px);
  letter-spacing: 10px;
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 26px;
}

/* SUBTEXT */
.content-box p {
  font-size: 14px;
  letter-spacing: 4px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
  z-index: 3;
}
.single-cloud {
  position: absolute;

  /* Position: just above mountain ridge */
  top: 15%;
  left: -20%;

  width: 320px;
  height: 120px;

  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.253) 0%,
    rgba(255,255,255,0.20) 35%,
    rgba(255,255,255,0.10) 55%,
    rgba(255,255,255,0) 70%
  );

  filter: blur(28px);
  opacity: 0.25;

  animation: cloudMove 5s linear infinite;

  z-index: 2;
  pointer-events: none;
}
@keyframes cloudMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(160vw);
  }
}
.single-cloud  { z-index: 2; }