/* =========================================
   VARIÁVEIS DA NETTO STORE
========================================= */

:root {

    --background: #08080c;

    --surface: #101016;

    --border: #22222d;

    --primary: #9b5cff;

    --primary-light: #aa72ff;

    --text: #ffffff;

    --muted: #888893;

    --muted-light: #aaaab5;

}



/* =========================================
   RESET
========================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    background: var(--background);

    color: var(--text);

    font-family: Arial, Helvetica, sans-serif;

    line-height: 1.6;

}



a {

    color: inherit;

    text-decoration: none;

}



/* =========================================
   HEADER
========================================= */

header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background: rgba(8, 8, 12, 0.92);

    backdrop-filter: blur(12px);

    border-bottom: 1px solid #20202a;

}



.navbar {

    max-width: 1200px;

    margin: auto;

    padding: 16px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}



.logo {

    font-size: 23px;

    font-weight: 900;

    letter-spacing: 1px;

}



.logo span {

    color: var(--primary);

}



nav {

    display: flex;

    gap: 25px;

}



nav a {

    color: var(--muted-light);

    font-size: 14px;

    transition: 0.2s;

}



nav a:hover {

    color: var(--text);

}



/* =========================================
   BOTÕES
========================================= */

.button {

    display: inline-block;

    padding: 13px 24px;

    border-radius: 8px;

    font-weight: bold;

    font-size: 14px;

    transition: 0.2s;

}



.button-primary {

    background: var(--primary);

    color: #ffffff;

    box-shadow: 0 0 25px rgba(155, 92, 255, 0.25);

}



.button-primary:hover {

    background: var(--primary-light);

    transform: translateY(-2px);

}



.button-secondary {

    border: 1px solid #333340;

    color: #ffffff;

}



.button-secondary:hover {

    border-color: var(--primary);

}



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

.hero {

    min-height: 620px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 80px 20px;

    background:

        radial-gradient(

            circle at center,

            #211044 0%,

            #0b0911 45%,

            #08080c 75%

        );

}



.hero-content {

    max-width: 850px;

}



.hero-badge {

    display: inline-block;

    padding: 7px 14px;

    margin-bottom: 22px;

    border: 1px solid #6e3bc4;

    border-radius: 100px;

    background: rgba(155, 92, 255, 0.08);

    color: #c8a9ff;

    font-size: 13px;

    font-weight: bold;

}



.hero h1 {

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

    line-height: 1.05;

    margin-bottom: 25px;

}



.hero h1 span {

    color: var(--primary);

}



.hero p {

    max-width: 650px;

    margin: auto;

    color: var(--muted-light);

    font-size: 18px;

}



.hero-buttons {

    margin-top: 35px;

    display: flex;

    justify-content: center;

    gap: 14px;

    flex-wrap: wrap;

}



/* =========================================
   SEÇÕES
========================================= */

section {

    max-width: 1200px;

    margin: auto;

    padding: 80px 25px;

}



.section-title {

    text-align: center;

    margin-bottom: 45px;

}



.section-title h2 {

    font-size: 34px;

    margin-bottom: 8px;

}



.section-title p {

    color: #858590;

}



/* =========================================
   CATEGORIAS
========================================= */

.categories {

    display: grid;

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

    gap: 18px;

}



.category {

    padding: 35px 25px;

    background: var(--surface);

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

    border-radius: 12px;

    text-align: center;

    transition: 0.25s;

}



.category:hover {

    transform: translateY(-5px);

    border-color: var(--primary);

    box-shadow:

        0 10px 40px rgba(0, 0, 0, 0.25);

}



.category-icon {

    font-size: 38px;

    margin-bottom: 12px;

}



.category h3 {

    margin-bottom: 7px;

}



.category p {

    color: var(--muted);

    font-size: 14px;

}



/* =========================================
   PRODUTOS
========================================= */

.products {
  
    display: flex;
    
    flex-wrap: wrap;
    
    justify-content: center;
    
    gap: 20px;
    
}



.product {
  
    background: var(--surface);
    
    border: 1px solid var(--border);
    
    border-radius: 12px;
    
    overflow: hidden;
    
    transition: 0.25s;
    
    width: calc((100% - 40px) / 3);
    
}



.product:hover {

    transform: translateY(-5px);

    border-color: var(--primary);

}



.product-image {

    width: 100%;

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(

            circle,

            #27134d,

            #101016 70%

        );

    color: #666675;

    font-size: 13px;

}



.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.product-info {

    padding: 20px;

}



.product-category {

    color: var(--primary);

    font-size: 11px;

    font-weight: bold;

    text-transform: uppercase;

}



.product h3 {

    margin: 7px 0;

}



.product-description {

    color: var(--muted);

    font-size: 13px;

    margin-bottom: 18px;

}



.product-code {

    color: white;

    font-size: 10px;
}



.product-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.price {

    font-size: 20px;

    font-weight: bold;

}

.price-old {

	color: grey;

	font-size: 13px;

}



.buy-button {

    padding: 9px 15px;

    border-radius: 7px;

    background: var(--primary);

    font-size: 12px;

    font-weight: bold;

}



.buy-button:hover {

    background: var(--primary-light);

}



/* =========================================
   DIFERENCIAIS
========================================= */

.features {

    display: grid;

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

    gap: 18px;

}



.feature {

    padding: 25px;

    background: var(--surface);

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

    border-radius: 10px;

}



.feature h3 {

    margin-bottom: 8px;

}



.feature p {

    color: var(--muted);

    font-size: 14px;

}



/* =========================================
   DISCORD
========================================= */

.discord-section {

    max-width: 1150px;

    margin: 40px auto 80px;

    padding: 65px 25px;

    text-align: center;

    background:

        radial-gradient(

            circle at center,

            #291453,

            #101016 65%

        );

    border: 1px solid #362052;

    border-radius: 15px;

}



.discord-section h2 {

    font-size: 32px;

    margin-bottom: 12px;

}



.discord-section p {

    max-width: 600px;

    margin: 0 auto 25px;

    color: var(--muted-light);

}



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

footer {

    border-top: 1px solid #20202a;

    padding: 35px 25px;

    text-align: center;

    color: #666675;

    font-size: 13px;

}



footer strong {

    color: var(--primary);

}



/* =========================================
   RESPONSIVIDADE
========================================= */

@media (max-width: 650px) {


    nav {

        display: none;

    }


    .categories,
    
    .product {
      
        width: 100%;
        
    }

    .features {

        grid-template-columns: 1fr;

    }


    .hero {

        min-height: 540px;

    }


    .hero p {

        font-size: 16px;

    }


    section {

        padding: 60px 18px;

    }


}

@media (max-width: 1000px) {
    .product {
        width: calc((100% - 20px) / 2);
    }
}