/*
Theme Name: Future Automation Theme
Version: 5.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

body{
    background:
    radial-gradient(circle at top left,
    rgba(59,130,246,0.15),
    transparent 25%),

    radial-gradient(circle at top right,
    rgba(124,58,237,0.18),
    transparent 25%),

    #020617;

    color:#ffffff;

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

    overflow-x:hidden;
}

/* HEADER */

header{
    width:100%;

    position:fixed;
    top:0;
    left:0;

    z-index:999;

    padding:24px 7%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgba(2,6,23,0.78);

    backdrop-filter:blur(18px);

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

.logo{
    font-size:32px;
    font-weight:800;

    line-height:1;
}

.logo span{
    color:#2563eb;
}

.menu{
    display:flex;
    align-items:center;
    gap:30px;
}

.menu a{
    color:#dbeafe;

    text-decoration:none;

    font-weight:500;

    transition:0.3s;
}

.menu a:hover{
    color:#38bdf8;
}

/* BLOG HERO */

.blog-hero{
    padding-top:180px;
    padding-bottom:90px;

    text-align:center;
}

.blog-badge{
    display:inline-flex;

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

    padding:12px 26px;

    border-radius:999px;

    border:
    1px solid rgba(168,85,247,0.4);

    color:#ffffff;

    margin-bottom:30px;

    background:
    rgba(124,58,237,0.12);

    font-size:14px;

    letter-spacing:1px;
}

.blog-hero h1{
    font-size:92px;

    line-height:1;

    font-weight:800;

    letter-spacing:-4px;
}

.blog-hero h1 span{
    background:
    linear-gradient(90deg,
    #38bdf8,
    #7c3aed,
    #c084fc);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.blog-hero p{
    margin:34px auto;

    max-width:780px;

    color:#cbd5e1;

    font-size:24px;

    line-height:1.8;
}

.blog-divider{
    display:flex;

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

    gap:14px;
}

.blog-divider div{
    width:90px;
    height:1px;

    background:
    rgba(96,165,250,0.5);
}

.blog-divider span{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#7c3aed;

    box-shadow:
    0 0 20px rgba(124,58,237,0.9);
}

/* BLOG GRID */

.blog-grid-section{
    padding:0 5% 70px;
}

.blog-grid{
    display:grid;

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

    gap:30px;
}

/* CARD */

.blog-card{
    background:
    rgba(10,15,30,0.88);

    border:
    1px solid rgba(255,255,255,0.06);

    border-radius:28px;

    overflow:hidden;

    padding:18px;

    transition:0.35s;

    display:flex;
    flex-direction:column;
}

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

    border-color:
    rgba(56,189,248,0.3);

    box-shadow:
    0 0 60px rgba(56,189,248,0.12);
}

.blog-image{
    width:100%;
    height:220px;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:20px;
}

.blog-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.fake-thumb{
    width:100%;
    height:100%;

    background:
    linear-gradient(
    135deg,
    #0f172a,
    #1e3a8a,
    #7c3aed);
}

.blog-meta{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:18px;

    color:#cbd5e1;

    font-size:14px;
}

.blog-category{
    background:
    linear-gradient(90deg,
    #2563eb,
    #7c3aed);

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;
}

.blog-card h2{
    font-size:38px;

    line-height:1.2;

    margin-bottom:20px;
}

.blog-card p{
    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:34px;

    flex:1;
}

/* BUTTON */

.blog-button{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:18px 26px;

    border-radius:999px;

    border:
    1px solid rgba(56,189,248,0.3);

    text-decoration:none;

    color:#ffffff;

    font-weight:700;

    transition:0.3s;
}

.blog-button:hover{
    background:
    linear-gradient(90deg,
    #2563eb,
    #7c3aed);

    border-color:transparent;
}

.blog-button span{
    font-size:22px;
}

/* PAGINATION */

.blog-pagination{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:16px;

    margin-bottom:90px;
}

.blog-pagination a,
.blog-pagination span{
    width:54px;
    height:54px;

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

    border-radius:16px;

    border:
    1px solid rgba(255,255,255,0.08);

    color:#ffffff;

    text-decoration:none;
}

.blog-pagination .active{
    background:
    linear-gradient(90deg,
    #2563eb,
    #7c3aed);

    border:none;
}

/* NEWSLETTER */

.newsletter-box{
    margin:0 5% 100px;

    padding:50px;

    border-radius:34px;

    background:
    rgba(10,15,30,0.9);

    border:
    1px solid rgba(56,189,248,0.12);

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:40px;
}

.newsletter-icon{
    min-width:80px;
    height:80px;

    border-radius:50%;

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

    font-size:34px;

    background:
    linear-gradient(135deg,
    #2563eb,
    #7c3aed);

    box-shadow:
    0 0 40px rgba(124,58,237,0.5);
}

.newsletter-box h2{
    font-size:42px;

    margin-bottom:10px;
}

.newsletter-box p{
    color:#cbd5e1;

    line-height:1.7;
}

.newsletter-box form{
    display:flex;
    gap:20px;
}

.newsletter-box input{
    width:320px;

    padding:18px 24px;

    border:none;

    border-radius:18px;

    background:
    rgba(255,255,255,0.05);

    color:#ffffff;

    outline:none;
}

.newsletter-box button{
    padding:18px 34px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(90deg,
    #2563eb,
    #7c3aed);

    color:white;

    font-weight:700;

    cursor:pointer;
}

/* FOOTER */

footer{
    text-align:center;

    padding:40px;

    color:#94a3b8;

    border-top:
    1px solid rgba(255,255,255,0.05);
}

/* RESPONSIVO */

@media(max-width:1100px){

    .newsletter-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .newsletter-box form{
        width:100%;
    }

    .newsletter-box input{
        flex:1;
    }

}

@media(max-width:900px){

    .blog-hero h1{
        font-size:60px;
    }

    .blog-hero p{
        font-size:20px;
    }

}

@media(max-width:768px){

    header{
        flex-direction:column;
        gap:20px;
    }

    .menu{
        flex-wrap:wrap;
        justify-content:center;
    }

    .newsletter-box form{
        flex-direction:column;
    }

    .newsletter-box input{
        width:100%;
    }

}