*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #101010;
      --text: #c8c8c8;
      --text-dim: #888;
    }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: 'Lexend', sans-serif;
      font-weight: 300;
    }

    .site {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* NAV */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 10;
      padding: 36px 36px;
      display: flex;
      align-items: center;
    }

    nav img {
      height: 36px;
      width: auto;
        filter: brightness(0.90);
    }

    /* HERO */
    .hero {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 100vh;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('xeelee-hero-image.jpg');
      background-size: cover;
      background-position: center;
      filter: brightness(0.35);
      z-index: 0;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      padding: 40px 24px;
        margin-top: 86px;
    }

    .hero-content h1 {
      font-family: 'Lexend', sans-serif;
      font-size: clamp(48px, 9vw, 80px);
      letter-spacing: 0.05em;
      color: #e8e8e8;
      line-height: 1;
      margin-bottom: 18px;
    }

    .hero-content p {
      font-size: clamp(13px, 2vw, 16px);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 36px;
    }

    /* NEWSLETTER */
 .newsletter {
  border: none;
  padding: 20px 0;
  display: block;
  max-width: 700px;
  margin: 0 auto;
}
    
 #signup-form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  max-width: 700px;
  width: 100%;
}

#signup-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 48px;
  background: rgba(255,255,255,0.1);
  border: 1px solid #aaa;
  color: #e8e8e8;
  font-family: 'Lexend', sans-serif;
  font-size: 15px;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0 12px;
}

#signup-form button[type="submit"] {
  height: 48px;
  flex: 0 0 auto;
  white-space: nowrap;
  background: #ccc;
  color: #000;
  font-family: 'Lexend', sans-serif;
  font-size: 15px;
  border-radius: 4px;
  padding: 0 20px;
  border: none;
  cursor: pointer;
}


    /* FOOTER */
    footer {
      padding: 20px 36px;
      text-align: center;
      font-size: 11px;
      color: #444;
      letter-spacing: 0.05em;
      line-height: 1.6;
    }

    footer a {
      color: #555;
      text-decoration: none;
    }

    footer a:hover {
      color: var(--text-dim);
    }