/* ==========================================================
   Philosophy Atlas
   Landing Page
========================================================== */

/* ===========================
   Variáveis
=========================== */

:root{

    --bg:#0A0A0A;
    --bg2:#111111;
    --bg3:#181818;

    --border:#2A2A2A;

    --text:#E8E8E8;
    --text2:#B8B8B8;
    --text3:#777;

    --gold:#F5C518;
    --orange:#E07B39;

    --radius:16px;

    --shadow:
        0 15px 60px rgba(0,0,0,.55);

    --transition:.35s ease;

    --serif:'Playfair Display',serif;
    --sans:'Inter',sans-serif;

}


/* ===========================
   Reset
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);
    color:var(--text);

    font-family:var(--sans);

    overflow-x:hidden;

}



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

#background{

    position:fixed;
    inset:0;

    z-index:-10;

}

.gradient{

    position:absolute;
    inset:0;

    background:

    radial-gradient(circle at top,#28200a 0%,transparent 55%),
    radial-gradient(circle at bottom,#111111 0%,transparent 70%),
    var(--bg);

}

.grid{

    position:absolute;
    inset:0;

    opacity:.04;

    background-image:

    linear-gradient(#ffffff 1px,transparent 1px),
    linear-gradient(90deg,#ffffff 1px,transparent 1px);

    background-size:60px 60px;

}

.noise{

    position:absolute;
    inset:0;

    background-image:
    radial-gradient(circle,#ffffff 1px,transparent 1px);

    background-size:22px 22px;

    opacity:.02;

}



/* ===========================
   Hero
=========================== */

#hero{

    max-width:1100px;

    margin:auto;

    text-align:center;

    padding:

    70px
    30px
    60px;

}

#logo {
    display: block;
    margin: 0 auto 35px;
    width: 180px;
}

.eyebrow{

    display:inline-block;

    color:var(--gold);

    letter-spacing:3px;

    font-size:.75rem;

    margin-bottom:18px;

}

h1{

    font-family:var(--serif);

    font-size:4.5rem;

    font-weight:700;

    margin-bottom:18px;

}

.subtitle{

    font-size:1.35rem;

    color:var(--gold);

    margin-bottom:30px;

}

.hero-text{

    max-width:760px;

    margin:auto;

    color:var(--text2);

    line-height:1.8;

    font-size:1.05rem;

}



/* ===========================
   Modules
=========================== */

#modules{

    max-width:1200px;

    margin:auto;

    padding:50px 30px 80px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));

    gap:35px;

}

.module{

    position:relative;

    background:var(--bg2);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:42px;

    box-shadow:var(--shadow);

    transition:var(--transition);

    overflow:hidden;

}

.module::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:var(--gold);

}

.module:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

}

.module-top{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:25px;

}

.module-icon{

    font-size:2.6rem;

}

.module-label{

    color:var(--text3);

    letter-spacing:2px;

    font-size:.75rem;

}

.module h2{

    font-family:var(--serif);

    font-size:2.2rem;

    margin-bottom:22px;

}

.module p{

    color:var(--text2);

    line-height:1.8;

    margin-bottom:28px;

}

.module ul{

    list-style:none;

    margin-bottom:40px;

}

.module li{

    margin-bottom:10px;

    color:var(--text2);

}



/* ===========================
   Botões
=========================== */

.button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    width:100%;

    padding:16px;

    border-radius:10px;

    font-weight:600;

    transition:var(--transition);

}

.primary{

    background:var(--gold);

    color:#000;

}

.primary:hover{

    background:#ffd94d;

}

.disabled{

    background:#1a1a1a;

    color:#777;

    border:1px solid var(--border);

    cursor:not-allowed;

}



/* ===========================
   Coming Soon
=========================== */



.coming {
    position: absolute;
    top: 20px;
    right: -150px;
    transform: rotate(45deg);
    background: var(--orange);
    color: white;
    padding: 8px 70px;
    font-size: 0.6rem;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
}




/* ===========================
   About
=========================== */

#about{

    max-width:900px;

    margin:auto;

    padding:20px 30px 80px;

    text-align:center;

}

#about h3{

    font-family:var(--serif);

    font-size:2.4rem;

    margin-bottom:25px;

}

#about p{

    color:var(--text2);

    line-height:1.9;

}



/* ===========================
   Numbers
=========================== */

#numbers{

    max-width:1100px;

    margin:auto;

    padding:40px 30px 90px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.number{

    background:var(--bg2);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:35px;

    text-align:center;

}

.value{

    display:block;

    font-family:var(--serif);

    color:var(--gold);

    font-size:2.8rem;

    margin-bottom:12px;

}

.label{

    color:var(--text3);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.8rem;

}



/* ===========================
   Quote
=========================== */

#quote{

    max-width:900px;

    margin:auto;

    padding:20px 30px 100px;

    text-align:center;

}

blockquote{

    font-family:var(--serif);

    font-size:2rem;

    line-height:1.5;

    color:var(--gold);

    margin-bottom:20px;

}

#quote span{

    color:var(--text3);

    letter-spacing:2px;

}



/* ===========================
   Footer
=========================== */

footer{

    border-top:1px solid var(--border);

    padding:60px 30px;

    text-align:center;

    background:var(--bg2);

}

footer img{

    width:90px;

    margin-bottom:20px;

}

footer h4{

    font-family:var(--serif);

    margin-bottom:12px;

    font-size:1.4rem;

}

footer p{

    color:var(--text3);

    margin-bottom:16px;

}

footer small{

    color:#666;

}



/* ===========================
   Responsivo
=========================== */

@media(max-width:900px){

    h1{

        font-size:3rem;

    }

    #modules{

        grid-template-columns:1fr;

    }

    #numbers{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:600px){

    h1{

        font-size:2.4rem;

    }

    .subtitle{

        font-size:1.1rem;

    }

    #numbers{

        grid-template-columns:1fr;

    }

    .module{

        padding:28px;

    }

}