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

html, body{
    width:100%;
    height:100%;
}

body{
    overflow:hidden;
    font-family:'Poppins', sans-serif;
    background:url('images/background.png') center center / cover no-repeat;
    position:relative;
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.08),
        rgba(0,0,0,0.14)
    );
}

.page{
    position:relative;
    z-index:2;

    width:100%;
    height:100vh;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:12px;

    /* ALTERAÇÃO FINAL */
    transform:translateY(-55px);

    padding:18px 12px 30px;
}

/* TOP */

.top-info{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.logo{
    width:320px;
    max-width:70vw;

    display:block;

    filter:
        drop-shadow(0 0 14px rgba(255,255,0,0.32))
        drop-shadow(0 10px 20px rgba(0,0,0,0.58));
}

.tagline-wrap{
    display:flex;
    align-items:center;
    gap:16px;

    margin-top:-8px;
}

.line{
    width:86px;
    height:2px;

    border-radius:20px;

    background:#7cff00;

    box-shadow:0 0 10px rgba(124,255,0,0.9);
}

.tagline{
    font-family:'Great Vibes', cursive;

    font-size:34px;

    color:white;

    text-shadow:0 3px 10px rgba(0,0,0,0.45);

    white-space:nowrap;
}

.locations{
    margin-top:6px;

    display:flex;
    align-items:center;
    gap:12px;

    color:white;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    text-shadow:0 2px 8px rgba(0,0,0,0.5);

    white-space:nowrap;
}

.locations i{
    color:#7cff00;
    margin-right:4px;
}

.divider{
    width:1px;
    height:14px;
    background:rgba(255,255,255,0.7);
}

/* BUTTONS */

.buttons-area{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:12px;
}

.pickup-row{
    display:flex;
    gap:10px;

    justify-content:center;
    align-items:center;
}

.pickup-card{
    width:220px;
    height:62px;

    border-radius:16px;

    padding:0 14px;

    text-decoration:none;
    color:white;

    display:flex;
    align-items:center;
    justify-content:space-between;

    transition:0.25s ease;

    backdrop-filter:blur(8px);

    overflow:hidden;
}

.pickup-card:hover{
    transform:translateY(-2px) scale(1.01);
    color:white;
    text-decoration:none;
}

.purple{
    background:linear-gradient(135deg, #e056ff 0%, #8a00d4 100%);
    box-shadow:0 0 16px rgba(205,0,255,0.34);
}

.green{
    background:linear-gradient(135deg, #73ff25 0%, #32b100 100%);
    box-shadow:0 0 16px rgba(0,255,85,0.28);
}

.pickup-left{
    display:flex;
    align-items:center;
    gap:8px;

    min-width:0;
}

.pickup-icon{
    width:24px;
    height:24px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,0.55);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:10px;

    flex:0 0 auto;
}

.pickup-text{
    text-align:center;

    flex:1;
    min-width:0;

    white-space:nowrap;
}

.pickup-text h3{
    font-size:11px;
    font-weight:800;

    line-height:1;
}

.pickup-text p{
    font-size:7px;
    font-weight:500;

    margin-top:2px;

    letter-spacing:1px;

    line-height:1;
}

.arrow{
    font-size:18px;
    line-height:1;

    flex:0 0 auto;
}

/* SOCIAL */

.social-bar{
    width:516px;
    max-width:92vw;

    height:47px;

    border-radius:14px;

    overflow:hidden;

    display:flex;

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,0.08);

    background:linear-gradient(
        90deg,
        rgba(255,160,0,0.28),
        rgba(44,0,70,0.82),
        rgba(0,34,50,0.84),
        rgba(255,180,0,0.28)
    );

    box-shadow:0 0 16px rgba(0,0,0,0.3);
}

.social-item{
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    color:white;
    text-decoration:none;

    transition:0.2s;

    border-right:1px solid rgba(255,255,255,0.08);
}

.social-item:last-child{
    border-right:none;
}

.social-item:hover{
    background:rgba(255,255,255,0.04);

    color:white;
    text-decoration:none;
}

.social-icon{
    font-size:14px;
    color:#d000ff;

    flex:0 0 auto;
}

.instagram{
    color:#ff4fa5;
}

.yelp{
    color:#ff3040;
}

.social-text{
    display:flex;
    flex-direction:column;

    min-width:0;

    white-space:nowrap;
}

.social-text h4{
    font-size:8px;
    font-weight:800;

    line-height:1.1;
}

.social-text p{
    font-size:6px;

    opacity:0.82;

    margin-top:1px;

    line-height:1;
}

/* RESPONSIVE */

@media (max-width:980px){

    body{
        overflow:auto;
    }

    .page{
        transform:none;

        height:auto;
        min-height:100vh;

        justify-content:flex-start;
    }

    .logo{
        width:300px;
    }

    .tagline{
        font-size:28px;
    }

    .buttons-area{
        width:100%;
    }

    .pickup-row{
        flex-direction:column;
        width:100%;
    }

    .pickup-card{
        width:100%;
        max-width:320px;
    }

    .social-bar{
        width:100%;

        flex-direction:column;

        height:auto;

        max-width:320px;
    }

    .social-item{
        height:72px;

        border-right:none;
        border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .social-item:last-child{
        border-bottom:none;
    }

    .tagline,
    .locations{
        white-space:normal;
    }
}