/* =====================================================
   PRIME HOME
   Luxury Landing Page
===================================================== */

@font-face {
    font-family: "Montserrat";
    src: url("assets/Montserrat/static/Montserrat-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("assets/Montserrat/static/Montserrat-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("assets/Montserrat/static/Montserrat-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat";
    src: url("assets/Montserrat/static/Montserrat-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

/* ---------- Reset ---------- */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#081714;

    color:#F7F5F2;

    font-family:'Montserrat',sans-serif;

    overflow-x:hidden;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

/* =====================================================
   COLORS
===================================================== */

:root{

    --bg:#081714;

    --bg2:#0F211D;

    --gold:#C8A86B;

    --gold-light:#E7D7A6;

    --text:#F8F8F8;

    --muted:#AFAFAF;

}

/* =====================================================
    Background
===================================================== */

.background-glow{

    position:fixed;

    inset:0;

    z-index:-3;

    background:
        radial-gradient(circle at top,
        rgba(200,168,107,.12),
        transparent 45%),

        radial-gradient(circle at bottom,
        rgba(7,45,34,.85),
        transparent 55%),

        linear-gradient(
        180deg,
        #071512,
        #081714 45%,
        #0B1916);

}

/* Gold Glow */

.background-glow::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:50%;

    top:-250px;

    transform:translateX(-50%);

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(200,168,107,.18),

    transparent 72%);

    filter:blur(45px);

}

/* Noise */

.noise{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.02;

    background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

}

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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.hero-content{

    max-width:760px;

    text-align:center;

}

/* =====================================================
    LOGO
===================================================== */

.logo{

    width:165px;

    margin-bottom:35px;

    animation:fadeUp 1.2s ease;

    filter:
    drop-shadow(0 0 18px rgba(200,168,107,.15));

}

/* =====================================================
    TITLE
===================================================== */

h1{

    font-family:"Montserrat", sans-serif;

    font-size: clamp(42px, 7vw, 72px);

    font-weight:600;

    letter-spacing:5px;

    color:var(--gold-light);
	
	white-space: nowrap;

}

.subtitle{

    margin-top:14px;

    letter-spacing:5px;

    color:var(--gold);

    text-transform:uppercase;

    font-size: clamp(10px, 1.5vw, 13px);

}

/* Divider */

.divider{

    width:110px;

    height:1px;

    margin:45px auto;

    background:linear-gradient(
        to right,
        transparent,
        var(--gold),
        transparent
    );

    position:relative;

}

.divider::after{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gold-light);

    position:absolute;

    left:50%;

    top:50%;

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

    box-shadow:

    0 0 15px rgba(200,168,107,.9);

}

/* =====================================================
    Launching Soon
===================================================== */

h2{

    font-family:"Cormorant Garamond",serif;

    font-size:54px;

    font-weight:500;

    color:white;

    margin-bottom:20px;

}

.description{

    color:var(--muted);

    max-width:540px;

    margin:auto;

    line-height:1.9;

    font-size:17px;

}

/* =====================================================
    BUTTON
===================================================== */

.notify-btn{

    display:inline-flex;

    margin-top:50px;

    padding:17px 42px;

    text-decoration:none;

    color:var(--gold-light);

    border:1px solid rgba(200,168,107,.45);

    transition:.35s;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:12px;

}

.notify-btn:hover{

    background:var(--gold);

    color:#081714;

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px rgba(200,168,107,.18);

}

/* =====================================================
    SOCIALS
===================================================== */

.socials{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:65px;

}

.socials a{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--gold);

    border:1px solid rgba(200,168,107,.35);

    transition:.3s;

    text-decoration:none;

    font-size:18px;

}

.socials a:hover{

    transform:translateY(-5px);

    background:rgba(200,168,107,.08);

    box-shadow:

    0 0 25px rgba(200,168,107,.18);

}

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

footer{

    text-align:center;

    color:#7F817F;

    letter-spacing:3px;

    font-size:12px;

    padding:35px;

}

/* =====================================================
    Animations
===================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/* =====================================================
    Responsive
===================================================== */

@media(max-width:768px){

    .logo{

        width:120px;

    }

    h1{

        letter-spacing:2px;

    }
	
	.subtitle{
		letter-spacing: 4px;
	}

    h2{

        font-size:36px;

    }

    .description{

        font-size:15px;

        padding:0 10px;

    }

    .notify-btn{

        width:100%;

        justify-content:center;

    }

}