@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --border-color-2: #B971DA;
    --border-color-1: #7DB9DF;
}

body {
    font-family: Poppins;
    background-color: #030407;
    color: white;
    width: 100%;
    margin: 0px;
}

/* Container padrão — Mobile-first
   Margem lateral mínima no mobile (não espreme o conteúdo em telas pequenas)
   e centralizada com max-width no desktop. */
#container {
    margin: 1.25rem 0.5rem 2rem 0.5rem;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    #container {
        margin: 1.5rem 1rem 2.25rem 1rem;
    }
}

@media (min-width: 1024px) {
    #container {
        margin: 2.5rem auto 3rem auto;
        max-width: 1200px;
    }
}

#page-wrapper {
    overflow-x: hidden;
}

#big-header-div {
    max-width: 100dvw;
    height: 700px;
    display: grid;
    grid-template-areas: "stack";
    overflow: hidden;
    justify-content: center;
    position: relative;
}

#img-fundo {
    grid-area: stack;
    z-index: 1;
    width: 100dvw;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.9);
    align-self: stretch;
}

#big-header-div::after {
    content: "";
    grid-area: stack;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.6) 20%
    );
    align-self: stretch;
}

#big-header-img-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: calc(100% - 60px);
    gap: 120px;
    max-width: 1200px;
}

#img-titulo {
    width: 400px;
}

#big-header-text h1 {
    margin: 0px;
    font-weight:900;
    font-size: 64px;
}

#big-header-text p {
    font-size: 22px;
}

button {
    font-size: 15px;
    font-weight: 600;
    color: white;
    font-family: poppins;
    padding: 12px 26px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
    letter-spacing: 0.01em;
}


/* Botão Discord — gradiente + sombra colorida + ícone animado */
.discord {
    background: linear-gradient(135deg, #7B95E6 0%, #5865F2 100%);
    box-shadow:
        0 4px 14px rgba(88, 101, 242, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.discord:hover {
    box-shadow:
        0 8px 22px rgba(88, 101, 242, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.discord i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.ip {
    color: rgb(46, 46, 46);
}

.fa-brands {
    color: white;
}

.split {
    width: 100%;
    height: 1px;
    width: 200px;
    background: var(--border-color-1);
}

.split-div{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.bold {
    font-weight: 600;
}

a {
    text-decoration: none;
    color: white;
}

#left-content {
    width: 50%;
    display:flex;
    flex-direction: column;
}

#right-content {
    width: 50%;
    display:flex;
    flex-direction: column;
}

.centered-content {
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.subtitle {
    font-size: 32px;
    font-weight: 600;
    color: var(--border-color-1);
    border-bottom: 1px solid var(--border-color-2);
    padding: 0px 20px 5px 20px;
}

.subtitle::after {
    width: 150px;
}


.inline {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.inline .number {
    left: 0px;
}

.inline .inline-text {
    justify-content: center;
    align-items: center;
}

.clicable {
    color: var(--border-color-1);
    cursor: pointer;
}

@media (max-width:1450px) {
    #big-header-img-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0px;
    }
    #big-header-text {
        text-align: center;
        gap:20px;
    }
    #big-header-div {
        height: 900px;
    }
}

@media (max-width: 700px) {
    /* Esconde o título grande (logo NerdCube) no mobile em todas as páginas
       EXCETO no index.html (que usa <main class="page">) */
    body:has(main#container) #img-titulo,
    body:has(main#suporte-container) #img-titulo,
    body:has(main#novidade-container) #img-titulo {
        display: none;
    }

    /* Reduz a altura do hero no mobile nas páginas secundárias */
    body:has(main#container) #big-header-div,
    body:has(main#suporte-container) #big-header-div,
    body:has(main#novidade-container) #big-header-div {
        height: 500px;
    }

    /* index.html tem um hero um pouco maior no mobile */
    body:has(main.page) #big-header-div {
        height: 600px;
    }

    #img-titulo {
        max-width: 150px;
    }
}