@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

:root {
    --gold: #c7a477;
    --gold-light: #e0c08d;
    --white: #ffffff;
    --dark: #050505;
}

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

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

body {
    font-family: 'Montserrat', sans-serif;
    background: var(--dark);
    color: var(--white);
}

.landing {
    min-height: 100vh;
    min-height: 100svh;

    position: relative;
    overflow: hidden;

    background-image: url("../images/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
}

/*
    * Leggero overlay per mantenere il testo leggibile
    * senza alterare troppo lo sfondo.
    */
.landing::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.35) 0%,
            rgba(0,0,0,.08) 60%,
            rgba(0,0,0,.25) 100%
        );

    pointer-events: none;
}

.container {
    width: min(1180px, 90%);
    margin: auto;

    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 320px;
    align-items: center;
    gap: 80px;
}

.content {
    padding-left: 20px;
}

.name-small {
    font-size: clamp(22px, 3vw, 42px);
    font-weight: 400;
    letter-spacing: .22em;
    color: var(--gold);
    margin-bottom: 5px;
}

.name {
    font-size: clamp(38px, 5vw, 70px);
    font-weight: 400;
    letter-spacing: .18em;
    line-height: 1;
    margin-bottom: 30px;
}

.contacts {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.contact {
    color: var(--white);
    text-decoration: none;
    transition: color .25s ease;
}

.phone {
    font-size: clamp(28px, 4vw, 54px);
    font-weight: 300;
    letter-spacing: .06em;
}

.email,
.website {
    font-size: clamp(20px, 2.4vw, 34px);
    font-weight: 500;
    color: var(--gold);
}

.contact:hover {
    color: var(--gold-light);
}

.brand {
    margin-top: 100px;
}

.brand img {
    display: block;
    width: 320px;
    max-width: 100%;
    height: auto;
}



.cta {
    display: inline-block;

    margin-top: 35px;
    padding: 14px 30px;

    border: 1px solid var(--gold);
    border-radius: 4px;

    color: var(--gold);
    text-decoration: none;

    font-size: 13px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;

    transition: all .25s ease;
        background: #c7a4774f;
}

.cta:hover {
    background: var(--gold);
    color: #000;
}


/* =========================
    TABLET
========================= */

@media (max-width: 900px) {

    .container {
        grid-template-columns: 1fr 230px;
        gap: 35px;
    }

    

    .brand {
        margin-top: 70px;
    }
}


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

@media (max-width: 650px) {

    .landing {
        align-items: flex-start;

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

    .container {
        width: 88%;
        min-height: 100svh;

        padding: 45px 0;

        display: flex;
        flex-direction: column;

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

        gap: 40px;
    }

    .content {
        padding-left: 0;
        width: 100%;
    }

    .name-small {
        font-size: 22px;
        letter-spacing: .18em;
    }

    .name {
        font-size: 36px;
        letter-spacing: .12em;
        margin-bottom: 28px;
    }

    .phone {
        font-size: 27px;
        letter-spacing: .03em;
    }

    .email,
    .website {
        font-size: 19px;
    }

    .brand {
        margin-top: 40px;
    }

    .brand img {
        width: 250px;
    }



    .cta {
        display: block;
        text-align: center;
        width: 100%;
    }
}


@media (max-width: 380px) {

    .container {
        padding: 30px 0;
        gap: 25px;
    }

    .name {
        font-size: 31px;
    }

    .phone {
        font-size: 23px;
    }

    .email,
    .website {
        font-size: 17px;
    }

    .brand {
        margin-top: 30px;
    }

    .qr {
        width: 160px;
        height: 160px;
    }
}
@media (max-width: 275px) {
    .name {
        font-size: 26px;
    }
}