/* ======================================================
   PONDRMEET HERO SYSTEM

   Layer structure:

   1 - Background image
   2 - People layer (future)
   3 - Text layer
   4 - CTA layer

====================================================== */


/* ======================================================
   HERO CONTAINER
====================================================== */

.hero {

    position:relative;

    width:100%;

    overflow:hidden;

}



/* ======================================================
   LAYER 1
   BACKGROUND IMAGE
====================================================== */


.hero picture {

    display:block;

    position:relative;

    z-index:1;

}



.hero picture img {

    display:block;

    width:100%;

    height:auto;

}



/* ======================================================
   LAYER 2
   PEOPLE IMAGE PLACEHOLDER
====================================================== */


.hero-people-layer {

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

}



/* ======================================================
   LAYER 3
   TEXT
====================================================== */


.hero-text-layer {

    position:absolute;

    z-index:3;


    top:28%;
    

    left:50%;


    transform:translate(-50%, -50%);


    width:min(800px,90%);


    text-align:center;


    color:white;

}



/* ======================================================
   HERO TYPOGRAPHY - MOBILE ARTWORK RECREATION
====================================================== */


/* ------------------------------------------------------
   1. PONDRMEET
------------------------------------------------------ */

.hero-title {

    margin:0;

    font-family:Helvetica, Arial, sans-serif;

    font-size:clamp(40px,4vw,60px);

    font-weight:700;

    letter-spacing:0.25em;

    line-height:1;

    text-transform:uppercase;

    color:var(--ink);

    text-shadow:
        0 4px 10px rgba(0,0,0,.25);

}


/* ------------------------------------------------------
   2. UNITED STATES • UNITED KINGDOM
------------------------------------------------------ */

.hero-tagline {

    margin:12px 0 45px;

    font-family:Helvetica, Arial, sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--ink);

}


.hero-tagline span {

    color:#B88A32;

    padding:0 10px;

}



/* ------------------------------------------------------
   3. LAUNCHING SOON
------------------------------------------------------ */

.hero-launching {

    margin:0 0 45px;

    font-family:Helvetica, Arial, sans-serif;

    font-size:clamp(48px,5.5vw,80px);

    font-weight:800;

    letter-spacing:.08em;

    line-height:.95;

    white-space:nowrap;

    text-transform:uppercase;

    color:var(--ink);

    text-shadow:
        0 4px 12px rgba(0,0,0,.25);

}



/* ------------------------------------------------------
   4. ONLINE DATING. REIMAGINED.
------------------------------------------------------ */

.hero-dating {

    margin:0 0 35px;

    font-family:Helvetica, Arial, sans-serif;

    font-size:clamp(18px,2vw,26px);

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#B8872C;

    text-shadow:0 2px 6px rgba(255,255,255,.4);

}



/* ------------------------------------------------------
   5. DESCRIPTION
------------------------------------------------------ */

.hero-description {

    margin:25px auto;

    max-width:520px;

    font-family:Helvetica, Arial, sans-serif;

    font-size:clamp(16px,2vw,22px);

    font-weight:500;

    line-height:1.5;

    color:var(--ink);

}



/* ======================================================
   LAYER 4
   CTA BUTTON
====================================================== */


.hero-cta-layer {


    position:absolute;

    z-index:4;

    top:var(--hero-cta-position);

    left:50%;

    transform:translateX(-50%);


}



/* Keep existing button styling */

.hero-cta-layer .waitlist-button {


    cursor:pointer;


}



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

   Mobile artwork remains untouched
   Desktop overlay hidden

====================================================== */


@media(max-width:768px){


    .hero-text-layer,

    .hero-cta-layer {

        display:none;

    }


}


/* ======================================================
   HERO CTA WIDTH
====================================================== */

.hero-cta-layer .waitlist-button {

    width:420px;

    max-width:90vw;

}