/* =========================================================
   HEART N SOUL eBIKES — LANDING PAGE
   Easy-edit version
   ========================================================= */


/* ---------- Basic page setup ---------- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #111;
  color: #fff;
}


/* ---------- Full-screen hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;

  /*
    HERO IMAGE:
    Change "hero.jpg" if you want to use a different photo.

    FADE:
    The left side is darker so the text is easier to read.
    Lower the alpha numbers to make the image brighter.
    Raise them to make it darker.
  */
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0.18) 34%,
      rgba(0, 0, 0, 0.08) 60%,
      rgba(0, 0, 0, 0.05) 100%
    ),
    url("hero.jpg");

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


/* ---------- Text block ---------- */

.content {
  position: relative;
  z-index: 1;

  width: min(560px, calc(100% - 64px));
  margin-left: clamp(20px, 2vw, 36px);
  padding: 48px 0;
}


/* ---------- Company name ---------- */

.brand-text {
  margin: 0 0 28px;

  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;

  letter-spacing: 0.01em;
  color: #ffffff;

  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}


/* ---------- Main headline ---------- */

h1 {
  margin: 0 0 22px;

  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(4.2rem, 7vw, 7.6rem);
  line-height: 0.88;
  letter-spacing: 0.01em;

  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}


/* ---------- Subheadline ---------- */

.subhead {
  margin: 0 0 34px;

  font-size: clamp(1.12rem, 2vw, 1.5rem);
  line-height: 1.45;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}


/* ---------- Coming Soon ---------- */

.coming-soon {
  margin: 0 0 12px;

  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;

  letter-spacing: 0.02em;
  color: #ffffff;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}


/* ---------- Button ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 66px;
  padding: 0 30px;

  border-radius: 6px;

  background: #f57f0a;
  color: #ffffff;

  text-decoration: none;
  text-transform: uppercase;

  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  letter-spacing: 0.02em;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);

  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.cta:hover,
.cta:focus-visible {
  background: #df7000;
  transform: translateY(-2px);
}

.cta:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}


/* ---------- Tablet / mobile ---------- */

@media (max-width: 820px) {
  .hero {
    align-items: end;

    /*
      On mobile, the fade comes from the bottom instead of the left.
    */
    background:
      linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.20) 42%,
        rgba(0, 0, 0, 0.10) 74%,
        rgba(0, 0, 0, 0.05) 100%
      ),
      url("hero.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .content {
    width: calc(100% - 40px);
    margin: 0 20px;
    padding: 50px 0 42px;
  }

  h1 {
    font-size: clamp(3.4rem, 16vw, 6rem);
  }
}


/* ---------- Small phones ---------- */

@media (max-width: 480px) {
  .hero {
    min-height: 100svh;
  }

  .content {
    width: calc(100% - 28px);
    margin: 0 14px;
  }

  .cta {
    width: 100%;
  }
}