/*=================================================
 AYOMED • OPENING SOON
=================================================*/
:root{
    /* Primary */
    --obsidian:#0A0A0A;
    --white:#FFFFFF;

    /* Neutral */
    --background:#F6F6F4;
    --surface:#FFFFFF;
    --border:#E5E5E5;

    --text:#525252;
    --muted:#8A8A8A;

    /* Brand */
    --verdigris:#356868;
    --charcoal:#1F4F4F;
    --mist:#E0EBEB;
}

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

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

body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:"Inter",sans-serif;
    background:var(--background);
    color:var(--obsidian);
}

/*=================================================
 BACKGROUND
=================================================*/
.background{
    position:fixed;
    inset:0;
    z-index:-2;
    background:
    radial-gradient(circle at 12% 12%,
    rgba(53,104,104,.08),
    transparent 35%),

    radial-gradient(circle at 88% 88%,
    rgba(31,79,79,.05),
    transparent 35%),

    radial-gradient(circle at center,
    rgba(224,235,235,.18),
    transparent 65%),

    linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F6F6F4 100%
    );
}

/*=================================================
 DECORATIVE LIGHTS
=================================================*/
.blob{
    position:fixed;
    width:450px;
    height:450px;
    border-radius:50%;
    filter:blur(140px);
    pointer-events:none;
}

.blob1{
    background:rgba(224,235,235,.9);
    top:-180px;
    left:-180px;
    animation:floatOne 18s ease-in-out infinite;
}

.blob2{
    background:rgba(53,104,104,.08);
    right:-180px;
    bottom:-180px;
    animation:floatTwo 20s ease-in-out infinite;
}

@keyframes floatOne{

    0%{transform:translate(0,0);}
    50%{transform:translate(60px,40px);}
    100%{transform:translate(0,0);}

}

@keyframes floatTwo{

    0%{transform:translate(0,0);}
    50%{transform:translate(-70px,-50px);}
    100%{transform:translate(0,0);}

}


/*=================================================
 LAYOUT
=================================================*/
main{
    width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;

}


/*=================================================
 CONTAINER
=================================================*/
.card{
    width:760px;
    max-width:100%;
    border-radius:28px;
    padding:56px;
    text-align:center;
}

/*=================================================
 LOGO
=================================================*/
.logo{
    width:150px;
    display:block;
    margin:0 auto 28px;
}

/*=================================================
 TYPOGRAPHY
=================================================*/
.eyebrow{
    display:block;
    margin-bottom:14px;
    color:var(--verdigris);
    font-size:11px;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
}

h1{
    font-size:56px;
    font-weight:600;
    letter-spacing:-2px;
    color:var(--obsidian);
    margin-bottom:18px;
}

.description{
    max-width:560px;
    margin:auto;
    color:var(--text);
    font-size:17px;
    line-height:1.8;
}

/*=================================================
 DIVIDER
=================================================*/
.divider{
    width:100%;
    height:1px;
    background:var(--border);
    margin:42px 0;
}

/*=================================================
 CONTACT
=================================================*/
.contact{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    gap:50px;
    align-items:start;
     
}

.item{
    text-align:center;
}

.item h4{
    color:var(--verdigris);
    font-size:11px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.item p{
    color:var(--obsidian);
    font-size:15px;
    line-height:1.7;
}

.contact a{
    color:inherit;
    text-decoration:none;
    transition:.3s ease;
}

.contact a:hover{
    color:var(--verdigris);
}

.contact a:focus{
    color:var(--verdigris);
    outline:none;
}


/*=================================================
 FOOTER
=================================================*/

.footer{
    margin-top:42px;
    padding-top:18px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
}


/*=================================================
 HOVER
=================================================*/

.card{
    transition:.35s ease;
}

/*=================================================
 SELECTION
=================================================*/

::selection{
    background:var(--verdigris);
    color:#fff;
}

/*=================================================
 RESPONSIVE
=================================================*/

@media (max-width:900px){

    .card{
        padding:42px;
    }

    h1{
        font-size:46px;
    }
}

@media (max-width:768px){
    body{
        overflow:auto;
    }

    main{
        height:auto;
        min-height:100vh;
        padding:24px;
    }

    .card{
        padding:36px 28px;
    }

    .contact{
        grid-template-columns:1fr;
        gap:28px;
    }

    h1{
        font-size:38px;
    }

    .description{
        font-size:14px;
    }
    
    .logo{
        width:130px;
    }
}