*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:
    radial-gradient(circle at top,#241650 0%,#11111d 45%,#050509 100%);
    color:#ffffff;
    overflow-x:hidden;
}

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

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}


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

header{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:999;

    background:rgba(0,0,0,.45);
    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);
}


/* ========================= */
/* NAVEGACION */
/* ========================= */

nav{
    display:flex;
    align-items:center;

    padding:18px 0;

    position:relative;
}


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

.logo{
    z-index:2;
}

.logo img{
    height:60px;
    transition:.30s;
}

.logo img:hover{
    transform:scale(1.05);
}


/* ========================= */
/* MENU CENTRADO */
/* ========================= */

.menu{
    display:flex;
    align-items:center;

    gap:35px;

    position:absolute;

    left:50%;
    transform:translateX(-50%);
}

.menu a{
    font-size:18px;
    font-weight:bold;

    transition:.30s;

    position:relative;

    white-space:nowrap;
}

.menu a:hover{
    color:#7ecbff;
}

.menu a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:#8b6dff;

    transition:.30s;
}

.menu a:hover::after{
    width:100%;
}


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

.hero{
    min-height:100vh;

    display:flex;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding-top:140px;
    padding-bottom:100px;

    position:relative;
}

.hero::before{
    content:"";

    position:absolute;

    width:700px;
    height:700px;

    background:#6d45ff;

    filter:blur(220px);

    opacity:.18;

    top:-250px;
    left:50%;

    transform:translateX(-50%);

    z-index:0;
}

.hero .container{
    position:relative;
    z-index:2;
}

.hero-banner{
    width:100%;
    max-width:1050px;

    border-radius:25px;

    box-shadow:
        0 0 50px rgba(120,80,255,.30),
        0 20px 60px rgba(0,0,0,.50);

    margin-bottom:45px;
}

.hero h1{
    font-size:76px;

    margin-bottom:20px;

    font-weight:800;

    text-shadow:
        0 0 15px rgba(140,90,255,.70),
        0 0 40px rgba(140,90,255,.40);
}

.hero h2{
    font-size:34px;

    font-weight:500;

    color:#d9d9ff;

    margin-bottom:30px;
}

.hero-text{
    max-width:900px;

    margin:auto;

    font-size:22px;

    line-height:1.7;

    color:#cfcfcf;
}


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

.hero-features{
    margin-top:35px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;
}

.hero-features span{
    background:#1b1830;

    border:1px solid rgba(255,255,255,.08);

    border-radius:50px;

    padding:12px 22px;

    font-size:17px;

    transition:.30s;
}

.hero-features span:hover{
    background:#6c46ff;

    transform:translateY(-4px);
}


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

.hero-buttons{
    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}


/* ========================= */
/* BOTONES */
/* ========================= */

.btn{
    display:inline-block;

    padding:18px 50px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #6d46ff,
        #9d6dff
    );

    color:#fff;

    font-size:20px;

    font-weight:bold;

    transition:.35s;

    box-shadow:
        0 0 25px rgba(110,80,255,.35);
}

.btn:hover{
    transform:
        translateY(-5px)
        scale(1.04);

    box-shadow:
        0 0 40px rgba(120,90,255,.60);
}

.btn-primary{
    background:linear-gradient(
        135deg,
        #5c6cff,
        #8f62ff
    );
}

.btn-secondary{
    background:linear-gradient(
        135deg,
        #2a2a45,
        #4a4a70
    );
}


/* ========================= */
/* TARJETAS */
/* ========================= */

.cards{
    display:grid;

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

    gap:35px;

    margin-top:50px;
}

.card{
    background:#181629;

    border-radius:22px;

    padding:35px;

    border:
        1px solid rgba(255,255,255,.06);

    transition:.35s;

    text-align:center;
}

.card:hover{
    transform:translateY(-12px);

    box-shadow:
        0 0 40px rgba(120,80,255,.35);
}

.card h3{
    font-size:26px;

    margin:20px 0;
}


/* ========================= */
/* ICONOS */
/* ========================= */

.icon{
    font-size:64px;

    margin-bottom:20px;
}


/* ========================= */
/* TITULOS */
/* ========================= */

.section-title{
    font-size:48px;

    text-align:center;

    margin-bottom:20px;
}

.section-subtitle{
    max-width:900px;

    margin:auto;

    text-align:center;

    color:#cccccc;

    font-size:20px;

    line-height:1.7;
}


/* ========================= */
/* FEATURES */
/* ========================= */

.features{
    padding:100px 0;
}


/* ========================= */
/* TABLET */
/* ========================= */

@media (max-width:1000px){

    .menu{
        gap:20px;
    }

    .menu a{
        font-size:16px;
    }

    .hero h1{
        font-size:58px;
    }

    .hero h2{
        font-size:28px;
    }

}


/* ========================= */
/* MOVIL */
/* ========================= */

@media (max-width:768px){

    header{
        position:relative;
    }

    nav{
        flex-direction:column;

        justify-content:center;

        gap:15px;

        padding:15px 0;
    }

    .logo img{
        height:52px;
    }

    .menu{
        position:static;

        left:auto;

        transform:none;

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

        gap:15px 20px;
    }

    .menu a{
        font-size:15px;
    }

    .hero{
        padding-top:50px;
        padding-bottom:70px;
    }

    .hero-banner{
        margin-bottom:30px;

        border-radius:16px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero h2{
        font-size:24px;
    }

    .hero-text{
        font-size:18px;
    }

    .section-title{
        font-size:36px;
    }

    .section-subtitle{
        font-size:18px;
    }

    .btn{
        padding:15px 30px;

        font-size:17px;
    }

    .features{
        padding:70px 0;
    }

}


/* ========================= */
/* MOVIL PEQUEÑO */
/* ========================= */

@media (max-width:480px){

    .container{
        width:94%;
    }

    .menu{
        gap:12px 15px;
    }

    .menu a{
        font-size:14px;
    }

    .hero h1{
        font-size:34px;
    }

    .hero h2{
        font-size:21px;
    }

    .hero-text{
        font-size:16px;
    }

    .hero-features span{
        font-size:14px;

        padding:10px 16px;
    }

    .hero-buttons{
        flex-direction:column;

        align-items:center;
    }

    .btn{
        width:100%;

        max-width:320px;
    }

    .section-title{
        font-size:30px;
    }

}