/* =========================================================
   CODIFY SOLUTIONS — Estilos customizados
   (Tailwind é carregado via CDN diretamente no HTML;
   este arquivo contém apenas os estilos "extras" do projeto)
   ========================================================= */

body {
    background-color: #f7f8fc;
    color: #172033;
    overflow-x: hidden;
}

/* --- Painéis e cards com efeito "vidro" (glassmorphism) --- */

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}



.glass-card{

    position:relative;

    min-height:270px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    height:100%;

    padding:32px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(0,88,188,.08);

    box-shadow:
        0 14px 40px rgba(30,40,70,.06),
        0 3px 12px rgba(30,40,70,.04);

    transition:all .35s ease;

}


.glass-card h3{

    margin-top:18px;

    margin-bottom:12px;

    line-height:1.3;

}

.glass-card p{

    margin-bottom:0;

    flex:1;

}

.glass-card img{

    border-radius:18px;

    margin-bottom:26px;

}

.glass-card .icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0058bc,#7c3aed);

    color:#fff;

    margin-bottom:24px;

    box-shadow:0 15px 30px rgba(0,88,188,.18);

}



.glass-card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(
        90deg,
        #0058bc,
        #7c3aed
    );
    opacity:.15;

}

.glass-card:hover{

    transform:translateY(-10px);
    border-color:#0058bc33;
    box-shadow:
        0 30px 70px rgba(30,40,70,.12);

}

.glass-card:hover::before{

    opacity:1;

}

/* --- Texto com gradiente (hero) --- */

.hero-text {
    background: linear-gradient(to right, #cecece, #9d4edd, #0058bc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =========================================================
   TÍTULOS
========================================================= */

h1{

    font-size:clamp(3.5rem,7vw,6.5rem);
    line-height:.95;
    letter-spacing:-3px;
    font-weight:900;

}

h2{

    font-size:clamp(2.3rem,3.2vw,3.8rem);

    line-height:1.08;

    letter-spacing:-1.8px;

    font-weight:900;

    color:#111827;

    margin-bottom:28px;

}

h3{

    font-size:1.45rem;

    font-weight:800;

    color:#172033;

    margin-bottom:18px;

}

p{

    font-size:1rem;

    line-height:1.7;

    color:#5f6b7b;

}


.section-title{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-title.left{

    text-align:left;

    margin:0 0 70px;

}

/* --- Animações --- */

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s forwards ease-out;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pulse-accent {
    animation: pulseGlow 3s infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(157, 78, 221, 0.3); }
    50% { box-shadow: 0 0 25px rgba(157, 78, 221, 0.6); }
}

.floating {
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* --- Rótulos técnicos (labels tipo "tag") --- */

.tech-label {
    letter-spacing: 0.2em;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- Ajustes finos de espaçamento (melhorias de layout) --- */

/* =========================================================
   PADRONIZAÇÃO DAS SEÇÕES
========================================================= */

section{

    position:relative;

    width:100%;

    padding:120px 0;

}

section:first-of-type{
    padding-top:150px;
    padding-bottom:80px;
    margin-bottom:0;
}

.hero-actions {
    row-gap: 1.5rem;
}

@media (max-width: 768px) {
    .hero-title {
        line-height: 1.05;
    }
}



/* =========================================================
   CONTAINER PADRÃO
========================================================= */

.container{

    width:min(1320px,90%);
    margin:0 auto;

}


.section-light{

    background:#ffffff;

}

.section-soft{

    background:

    linear-gradient(
        180deg,
        #f8faff 0%,
        #eef4ff 100%
    );

}

.section-light::before,
.section-soft::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        #0058bc55,
        transparent
    );

}



/*================================================*/

.hero{
    min-height:auto;
    padding:140px 0 90px;
}

.hero-grid{

    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:60px;

}

.hero-left{

    max-width:720px;

}

.hero-right{

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

}

.hero-right img{

    width:100%;
    max-width:620px;

}

.hero p{

    max-width:620px;
    font-size:1.2rem;
    margin:34px 0 48px;

}

.hero-actions{

    margin-top:20px;
    gap:22px;

}

@media (max-width: 1100px){

    .hero{
        padding:120px 0 70px;
    }

    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
        gap:50px;
    }

    .hero-left{
        max-width:760px;
        margin:0 auto;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-right{
        max-width:720px;
        margin:0 auto;
    }

    .hero-title{
        font-size:clamp(3.4rem,8vw,5.4rem);
        letter-spacing:-3px;
    }
}


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

.hero-gradient{

    background:

    radial-gradient(circle at 20% 10%, rgba(0,88,188,.18), transparent 28%),

    radial-gradient(circle at 85% 15%, rgba(124,58,237,.18), transparent 30%),

    linear-gradient(
        180deg,
        #fbfcff 0%,
        #eef4ff 55%,
        #ffffff 100%
    );

}

.hero-wrapper{
    min-height:auto;
}


.hero-content{

    z-index:5;

}

.hero-title{

    font-size:clamp(3.8rem,6vw,6.2rem);
    line-height:.92;

    letter-spacing:-4px;

    margin-bottom:34px;

}

.hero p{

    font-size:1.18rem;

    max-width:620px;

    margin:40px 0;

}

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;

    max-width:700px;

    border-radius:30px;

    box-shadow:

    0 50px 90px rgba(20,35,80,.15);

}

.hero-image::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-80px;

    top:-60px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(124,58,237,.18),

    transparent 70%);

    z-index:-1;

}


/* =========================================================
   STACK TECNOLÓGICO
========================================================= */

.tech-stack-section {
    padding: 120px 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 88, 188, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(124, 58, 237, 0.10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7f9ff 0%,
            #edf3ff 100%
        );
}

.tech-stack-container {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.tech-stack-header {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.tech-stack-header .tech-label {
    display: block;
    margin-bottom: 16px;
    color: #0058bc;
}

.tech-stack-header h2 {
    margin-bottom: 20px;
}

.tech-stack-header p {
    max-width: 680px;
    margin: 0 auto;
}

.tech-stack-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
}

.tech-item {
    min-height: 180px;
    padding: 28px 22px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    border-radius: 22px;

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

    border: 1px solid rgba(0, 88, 188, 0.10);

    box-shadow:
        0 16px 40px rgba(30, 40, 70, 0.06),
        0 2px 8px rgba(30, 40, 70, 0.04);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.tech-item:hover {
    transform: translateY(-8px);

    border-color: rgba(0, 88, 188, 0.30);

    box-shadow:
        0 26px 60px rgba(30, 40, 70, 0.12);
}

.tech-item .material-symbols-outlined {
    width: 52px;
    height: 52px;

    margin-bottom: 22px;

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

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        rgba(0, 88, 188, 0.12),
        rgba(124, 58, 237, 0.14)
    );

    color: #0058bc;

    font-size: 28px;
}

.tech-item strong {
    margin-bottom: 8px;

    color: #172033;

    font-size: 1rem;
    line-height: 1.35;
}

.tech-item small {
    color: #6c7688;

    font-size: 0.82rem;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .tech-stack-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .tech-stack-section {
        padding: 90px 0;
    }

    .tech-stack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tech-item {
        min-height: 165px;
        padding: 24px 20px;
    }
}

@media (max-width: 480px) {
    .tech-stack-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   RESPONSIVO — TABLET
========================================================= */

@media (max-width: 900px){

    section{
        padding:90px 0;
    }

    section:first-of-type{
        padding-top:150px;
        padding-bottom:60px;
    }

    .container{
        width:min(100% - 40px, 760px);
    }

    .hero{
        padding:110px 0 60px;
    }

    .hero-grid{
        gap:40px;
    }

    .hero-title{
        font-size:clamp(3rem,9vw,4.8rem);
        line-height:.95;
    }

    .hero p{
        max-width:680px;
        margin:28px auto 34px;
        font-size:1.05rem;
    }

    .hero-image img{
        max-width:620px;
    }
}


/* =========================================================
   RESPONSIVO — CELULAR
========================================================= */

@media (max-width: 640px){

    section{
        padding:72px 0;
    }

    section:first-of-type{
    padding-top:160px;
    padding-bottom:80px;
}

    .container{
        width:calc(100% - 28px);
    }



    .hero{
        padding:100px 0 50px;
    }

    .hero-grid{
        display:flex;
        flex-direction:column;
        gap:34px;
    }

    .hero-left{
        width:100%;
        text-align:center;
    }

    .hero-title{
        font-size:clamp(2.7rem,15vw,4rem);
        line-height:.92;
        letter-spacing:-2px;
        margin-bottom:20px;
    }

    .hero p{
        font-size:.98rem;
        line-height:1.65;
        margin:24px auto 28px;
    }

    .hero-actions{
        width:100%;
        justify-content:center;
        margin-top:0;
    }

    .hero-actions a{
        width:auto;
        max-width:100%;
        padding:14px 24px;
        font-size:.85rem;
    }

    .hero-right{
        width:100%;
    }

    .hero-image img{
        width:100%;
        max-width:100%;
        border-radius:20px;
    }

    .hero-image::after{
        width:240px;
        height:240px;
        right:-40px;
        top:-20px;
    }
}