:root{
      --amber:#E8935A;
      --rose:#D4607A;
      --peach:#F2B08A;
      --cream:#FDF4EC;
      --deep:#130907;
      --gold:#C9873E;
    }

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

    body{
      font-family:'Jost',sans-serif;
      background:#0f0705;
      color:var(--cream);
      overflow-x:hidden;
    }

    /* =========================
       HERO SECTION
    ========================== */

    .hero{
      position:relative;
      min-height:100vh;
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      padding:4rem 6vw;
    }

    /* HERO IMAGE */

    .hero-banner{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      z-index:0;
    }

    .hero-banner img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      transform:scale(1.05);
      animation:slowZoom 20s ease-in-out infinite alternate;
    }

    /* DARK OVERLAY */

    .hero-banner::after{
      content:'';
      position:absolute;
      inset:0;

      background:
      linear-gradient(
        rgba(10,5,4,0.58),
        rgba(10,5,4,0.82)
      );
    }

    /* HERO CONTENT */

    .hero-content{
      position:relative;
      z-index:2;
      max-width:1100px;
      width:100%;
      position:relative;
      z-index:2;
      max-width:1100px;
      width:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
    }

    /* ZOOM ANIMATION */

    @keyframes slowZoom{
      from{
        transform:scale(1.05);
      }
      to{
        transform:scale(1.12);
      }
    }

    /* =========================
       NAVIGATION
    ========================== */

    nav{
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:5rem;
    }

    .logo{
      font-family:'Cormorant Garamond',serif;
      letter-spacing:.3em;
      text-transform:uppercase;
      color:var(--peach);
      font-size:1rem;
    }

    .coming{
      letter-spacing:.3em;
      text-transform:uppercase;
      font-size:.75rem;
      color:rgba(255,255,255,.7);
    }

    /* =========================
       HEADER
    ========================== */

    .eyebrow{
      text-transform:uppercase;
      letter-spacing:.45em;
      font-size:.75rem;
      color:var(--amber);
      margin-bottom:1.5rem;
    }

    h1{
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(3rem,7vw,6.5rem);
      line-height:1.05;
      font-weight:300;
      margin-bottom:2rem;

      text-shadow:
      0 10px 35px rgba(0,0,0,.45);
    }

    h1 em{
      color:var(--peach);
      font-style:italic;
    }

    /* =========================
       INTRO
    ========================== */

  .intro{
  max-width:850px;
  font-size:1.05rem;
  line-height:1.95;
  color:rgba(255,255,255,.84);

  text-align:center;
}

    .intro p{
      margin-bottom:1.4rem;
    }

    /* =========================
       HIGHLIGHT
    ========================== */

    .highlight{
  margin-top:4rem;
  max-width:900px;
  padding:2rem;
  border-radius:24px;

  background:rgba(255,255,255,.05);

  border:1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(8px);

  text-align:center;
}

    .highlight h2{
      font-family:'Cormorant Garamond',serif;
      font-size:2rem;
      font-weight:300;
      margin-bottom:1rem;
      color:var(--peach);
    }

    .highlight p{
      line-height:1.9;
      color:rgba(255,255,255,.82);
    }

/* =========================
   WHY JOIN SECTION
========================== */

.why{
  margin-top:5rem;
  width:100%;
}

.why h3{
  text-align:center;

  font-family:'Cormorant Garamond',serif;
  font-size:2.3rem;
  font-weight:300;

  color:var(--peach);

  margin-bottom:3rem;

  letter-spacing:.04em;
}

/* SINGLE GLASS CONTAINER */

.why-grid{
  max-width:950px;

  margin:auto;

  display:grid;

  grid-template-columns:1fr 1fr;

  border-radius:28px;

  overflow:hidden;

  background:
  rgba(255,255,255,.035);

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(12px);

  box-shadow:
  0 20px 60px rgba(0,0,0,.28);
}

/* CARDS */

.why-card{
  padding:2.2rem 2rem;

  min-height:150px;

  position:relative;

  transition:.35s ease;
}

/* DIVIDERS */

.why-card:nth-child(1),
.why-card:nth-child(2){
  border-bottom:
  1px solid rgba(255,255,255,.06);
}

.why-card:nth-child(1),
.why-card:nth-child(3){
  border-right:
  1px solid rgba(255,255,255,.06);
}

/* HOVER */

.why-card:hover{
  background:
  rgba(255,255,255,.03);
}

/* CHECK ICON */

.check{
  color:var(--amber);

  font-size:1.1rem;

  margin-bottom:1rem;

  display:block;
}

/* TITLE */

.why-card h4{
  color:#fff;

  font-size:.95rem;

  letter-spacing:.08em;

  text-transform:uppercase;

  margin-bottom:.8rem;

  font-weight:400;
}

/* TEXT */

.why-card p{
  color:rgba(255,255,255,.72);

  line-height:1.8;

  font-size:.96rem;

  max-width:320px;
}

/* MOBILE */

@media(max-width:768px){

  .why-grid{
    grid-template-columns:1fr;
  }

  .why-card{
    border-right:none !important;
    border-bottom:
    1px solid rgba(255,255,255,.06);
  }

  .why-card:last-child{
    border-bottom:none;
  }

}
    /* =========================
       CTA
    ========================== */

   .cta{
  margin-top:5rem;
  text-align:center;
}

    .cta p{
      margin-bottom:1.8rem;
      line-height:1.8;
      color:rgba(255,255,255,.78);
    }

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

      padding:1.1rem 2.8rem;

      border:none;
      border-radius:999px;

      background:
      linear-gradient(
        135deg,
        var(--amber),
        var(--rose)
      );

      color:#fff;

      font-size:.85rem;

      letter-spacing:.25em;
      text-transform:uppercase;

      cursor:pointer;

      transition:.3s ease;

      box-shadow:
      0 10px 40px rgba(212,96,122,.3);
    }

    .btn:hover{
      transform:
      translateY(-3px)
      scale(1.03);

      box-shadow:
      0 20px 60px rgba(212,96,122,.45);
    }

/* =========================
   NOTIFY FORM
========================== */

.notify-form{
  margin-top:2rem;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;

  flex-wrap:wrap;
}

.email-input{

  width:320px;
  max-width:100%;

  padding:1rem 1.4rem;

  border-radius:999px;

  border:
  1px solid rgba(255,255,255,.12);

  background:
  rgba(255,255,255,.06);

  backdrop-filter:blur(10px);

  color:#fff;

  font-size:.95rem;

  outline:none;

  transition:.3s ease;
}

.email-input::placeholder{
  color:rgba(255,255,255,.5);
}

.email-input:focus{
  border-color:
  rgba(232,147,90,.6);

  background:
  rgba(255,255,255,.09);

  box-shadow:
  0 0 25px rgba(232,147,90,.18);
}
    /* =========================
       FOOTER
    ========================== */

    footer{
      margin-top:5rem;

      padding-top:2rem;

      border-top:
      1px solid rgba(255,255,255,.08);

      color:rgba(255,255,255,.45);

      font-size:.78rem;

      letter-spacing:.15em;

      text-transform:uppercase;
    }

    /* =========================
       MOBILE
    ========================== */

    @media(max-width:768px){

      nav{
        flex-direction:column;
        gap:1rem;
        margin-bottom:4rem;
      }

      h1{
        line-height:1.12;
      }

      .intro{
        font-size:.96rem;
      }

      .highlight{
        padding:1.5rem;
      }

    }

    /* =========================
   GLOBAL ANIMATIONS
========================== */

.fade-up{
  opacity:0;
  transform:translateY(40px);

  will-change:
  transform,
  opacity;

  transition:
  opacity 1s ease,
  transform 1s ease;
}

.fade-up.show{
  opacity:1;
  transform:translateY(0);
}

/* HERO FADE */

.hero-content{
  animation:heroReveal 1.5s ease forwards;
}

@keyframes heroReveal{

  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* STAGGER EFFECTS */

.delay-1{
  transition-delay:.15s;
}

.delay-2{
  transition-delay:.3s;
}

.delay-3{
  transition-delay:.45s;
}

.delay-4{
  transition-delay:.6s;
}

/* FLOATING EFFECT */

.highlight{
  animation:floatCard 6s ease-in-out infinite;
}

@keyframes floatCard{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-6px);
  }

  100%{
    transform:translateY(0px);
  }

}