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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:radial-gradient(circle at top,#2b1055 0%,#12051f 35%,#05010a 100%);
    color:white;
    overflow-x:hidden;
    position:relative;
}

body::before,
body::after{
    content:"";
    position:fixed;
    border-radius:999px;
    filter:blur(100px);
    pointer-events:none;
    z-index:-2;
}

body::before{
    width:900px;
    height:900px;
    top:-400px;
    right:-300px;
    background:radial-gradient(circle,rgba(168,85,247,.12),transparent 70%);
}

body::after{
    width:700px;
    height:700px;
    bottom:-300px;
    left:-250px;
    background:radial-gradient(circle,rgba(217,70,239,.10),transparent 70%);
}

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

.container{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 40px;
}

/* ======================================== */
/* NAVBAR */
/* ======================================== */

.navbar{
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    width:100%;
    height:88px;
    background:rgba(7,2,18,.94);
    border-bottom:1px solid rgba(168,85,247,.28);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.nav-container{
    height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo-img{
    height: 144px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

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

.nav-menu a,
.login-btn{
    color:#ffffffc9;
    font-size:14px;
    font-weight:600;
    line-height:1;
    transition:.25s;
}

.nav-menu a:hover,
.login-btn:hover{
    color:#c084fc;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:18px;
}

.mobile-menu-btn{
    display:none;
}

/* ======================================== */
/* BUTTONS */
/* ======================================== */

.primary-btn,
.secondary-btn{
    min-height:46px;
    padding:0 24px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:14px;
    font-weight:800;
    line-height:1;
    transition:.25s;
    white-space:nowrap;
}

.primary-btn{
    background:linear-gradient(135deg,#7c3aed,#d946ef);
    box-shadow:0 10px 40px rgba(168,85,247,.28);
    position:relative;
    overflow:hidden;
}

.primary-btn:hover,
.secondary-btn:hover{
    transform:translateY(-2px);
}

.primary-btn::before{
    content:"";
    position:absolute;
    width:120px;
    height:300%;
    top:-100%;
    left:-130px;
    background:rgba(255,255,255,.18);
    transform:rotate(25deg);
    transition:.8s;
}

.primary-btn:hover::before{
    left:140%;
}

.secondary-btn{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.10);
}

.large-btn{
    min-width:220px;
}

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

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:128px;
    padding-bottom:80px;
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-250px;
    top:-150px;
    z-index:0;
    filter:blur(100px);
    background:radial-gradient(circle,rgba(168,85,247,.18),transparent 70%);
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:28px 28px;
    opacity:.18;
    pointer-events:none;
}

.hero-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

.hero-left{
    width:100%;
    max-width:620px;
    position:relative;
    z-index:2;
}

.hero-badge,
.section-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border-radius:999px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(168,85,247,.25);
    color:#f0abfc;
    font-size:15px;
}

.hero-badge{
    margin-bottom:34px;
}

.hero-left h1{
    font-size:88px;
    line-height:.95;
    font-weight:900;
    letter-spacing:-3px;
    margin-bottom:32px;
    text-wrap:balance;
}

.hero-left h1 span{
    display:inline;
    background:linear-gradient(135deg,#a855f7,#d946ef);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 18px rgba(168,85,247,.45));
}

.hero-left p{
    max-width:600px;
    font-size:22px;
    line-height:1.75;
    color:#ffffffad;
    margin-bottom:42px;
}

.hero-buttons,
.hero-infos{
    display:flex;
    flex-wrap:wrap;
}

.hero-buttons{
    gap:18px;
    margin-bottom:40px;
}

.hero-infos{
    gap:24px;
}

.hero-info-item{
    color:#ffffff9c;
    font-size:15px;
}

.hero-image-area{
    flex:1;
    min-width:480px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
}

.hero-main-image{
    width:100%;
    max-width:630px;
    object-fit:contain;
    filter:drop-shadow(0 40px 120px rgba(168,85,247,.35));
    animation:floatSlow 6s ease-in-out infinite;
}

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

/* ======================================== */
/* CARDS / SECTIONS */
/* ======================================== */

.features,
.insights-section,
.report-section,
.plans-section,
.cta-section{
    position:relative;
}

.features{
    padding:0 0 120px;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.feature-card,
.plan-card,
.cta-box{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
}

.feature-card{
    padding:36px;
    border-radius:28px;
    transition:.25s;
    position:relative;
    overflow:hidden;
}

.feature-card:hover,
.plan-card:hover{
    transform:translateY(-8px);
    border-color:rgba(168,85,247,.35);
    box-shadow:0 20px 80px rgba(168,85,247,.10);
}

.feature-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:28px;
    background:linear-gradient(135deg,#7c3aed,#9333ea);
}

.feature-card h3{
    font-size:28px;
    margin-bottom:16px;
}

.feature-card p,
.insights-left p,
.report-top p,
.plans-top p,
.cta-left p,
.footer-left p{
    color:#ffffffad;
    line-height:1.8;
}

.feature-card p{
    font-size:17px;
}

.insights-section{
    padding:140px 0;
}

.insights-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:100px;
}

.insights-left{
    width:100%;
    max-width:580px;
}

.section-badge{
    margin-bottom:28px;
}

.insights-left h2,
.report-top h2,
.plans-top h2{
    font-size:64px;
    line-height:1.08;
    margin-bottom:28px;
    font-weight:800;
    text-wrap:balance;
}

.insights-left p{
    font-size:20px;
    margin-bottom:36px;
}

.insights-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.insight-item,
.plan-feature{
    color:#ffffffd8;
    font-size:18px;
}

.insights-right{
    flex:1;
    display:flex;
    justify-content:center;
}

.insights-image,
.report-image{
    width:100%;
    object-fit:contain;
    filter:drop-shadow(0 0 120px rgba(168,85,247,.18));
}

.insights-image{
    max-width:460px;
    border-radius:32px;
}

.report-section,
.plans-section{
    padding-bottom:160px;
}

.report-top,
.plans-top{
    text-align:center;
    max-width:900px;
    margin:0 auto 80px;
}

.report-top h2,
.plans-top h2{
    font-size:68px;
}

.report-top p,
.plans-top p{
    font-size:22px;
}

.report-image-area{
    display:flex;
    justify-content:center;
}

.report-image{
    max-width:1200px;
    border-radius:34px;
}

/* ======================================== */
/* PLANS */
/* ======================================== */

.plans-grid{

    display:grid;

    grid-template-columns:
    repeat(5,minmax(240px,1fr));

    gap:18px;

    align-items:stretch;
}

/* CARD */

.plan-card{

    position:relative;

    padding:38px 26px;

    border-radius:28px;

    background:
            rgba(7,10,25,.82);

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

    backdrop-filter:blur(14px);

    transition:.25s;

    overflow:hidden;

    min-height:100%;
}

.plan-card:hover{

    transform:
            translateY(-6px);

    border-color:
            rgba(168,85,247,.45);

    box-shadow:
            0 20px 60px rgba(168,85,247,.16);
}

/* CARD DESTACADO */

.featured-plan{

    border:
            1px solid #9333ea;

    box-shadow:
            0 0 40px rgba(168,85,247,.16);

    background:
            linear-gradient(
                    180deg,
                    rgba(124,58,237,.12),
                    rgba(255,255,255,.03)
            );
}

/* BADGE */

.plan-badge{

    position:absolute;

    top:14px;
    right:14px;

    padding:7px 12px;

    border-radius:999px;

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

    font-size:10px;

    font-weight:800;

    letter-spacing:.5px;
}

/* NAME */

.plan-name{

    font-size:24px;

    font-weight:700;

    margin-bottom:20px;
}

/* PRICE */

.plan-price{

    font-size:34px;

    font-weight:900;

    margin-bottom:8px;

    line-height:1;
}

/* PERIOD */

.plan-period{

    color:#ffffff8c;

    margin-bottom:28px;

    font-size:15px;
}

/* FEATURES */

.plan-features{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:30px;
}

.plan-feature{

    color:#ffffffd9;

    font-size:15px;

    line-height:1.5;
}

/* BOTÕES */

.plan-card .primary-btn,
.plan-card .secondary-btn{

    width:100%;

    height:48px;

    border-radius:14px;

    font-size:14px;

    margin-top:auto;
}

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

.cta-section{
    padding-bottom:120px;
}

.cta-box{
    border-radius:34px;
    padding:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:48px;
}

.cta-left{
    display:flex;
    align-items:center;
    gap:22px;
}

.cta-icon{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    background:linear-gradient(135deg,#7c3aed,#d946ef);
    flex-shrink:0;
}

.cta-left h2{
    font-size:34px;
    margin-bottom:10px;
}

.cta-right{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.cta-mini-info{
    color:#ffffffd8;
    font-size:15px;
}

.cta-mini-info span{
    display:block;
    color:#ffffff8a;
    font-size:13px;
    margin-top:5px;
}

.footer{
    border-top:1px solid rgba(255,255,255,.05);
    padding:40px 0;
}

.footer-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.footer-logo{
    width:180px;
    margin-bottom:20px;
}

.footer-left p{
    max-width:420px;
}

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

.footer-right a{
    color:#ffffffad;
}

.footer-right a:hover{
    color:#c084fc;
}

/* ======================================== */
/* RESPONSIVO */
/* ======================================== */

@media(max-width:1200px){
    .hero-container,
    .insights-container{
        flex-direction:column;
        text-align:center;
    }

    .hero-left p{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons,
    .hero-infos{
        justify-content:center;
    }

    .features-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .plans-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .insights-list{
        align-items:center;
    }

    .cta-box,
    .cta-left,
    .cta-right{
        flex-direction:column;
        text-align:center;
        justify-content:center;
    }
}

@media(max-width:768px){

    /* CONTAINER */

    .container{
        padding:0 20px;
    }

    /* NAVBAR */

    .navbar{
        height:72px;
    }

    .nav-container{
        height:72px;
    }

    .logo img{
        width:145px;
    }

    .nav-menu,
    .nav-actions{
        display:none;
    }

    .mobile-menu-btn{
        display:block;
        margin-left:auto;
        background:none;
        border:none;
        color:white;
        font-size:28px;
    }

    /* HERO */

    .hero{

        min-height:auto;

        padding-top:110px;
        padding-bottom:70px;
    }

    .hero-container{

        flex-direction:column;

        text-align:center;

        gap:50px;
    }

    .hero-left{

        max-width:100%;
    }

    .hero-left h1{

        font-size:52px;

        line-height:1;

        letter-spacing:-2px;

        margin-bottom:24px;
    }

    .hero-left p{

        font-size:17px;

        line-height:1.7;

        margin-bottom:34px;
    }

    .hero-buttons{

        flex-direction:column;

        gap:14px;
    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{

        width:100%;
    }

    .hero-infos{

        justify-content:center;

        gap:14px;
    }

    .hero-main-image{

        max-width:320px;
    }

    /* FEATURES */

    .features-grid{

        grid-template-columns:1fr;

        gap:18px;
    }

    .feature-card{

        padding:28px;
    }

    .feature-card h3{

        font-size:24px;
    }

    /* TITLES */

    .insights-left h2,
    .report-top h2,
    .plans-top h2{

        font-size:40px;

        line-height:1.1;
    }

    .insights-left p,
    .report-top p,
    .plans-top p{

        font-size:17px;
    }

    /* INSIGHTS */

    .insights-container{

        flex-direction:column;

        text-align:center;

        gap:60px;
    }

    .insights-list{

        align-items:center;
    }

    .insights-image{

        max-width:320px;
    }

    /* REPORT */

    .report-image{

        border-radius:24px;
    }

    /* PLANS */

    .plans-grid{

        grid-template-columns:1fr;

        gap:18px;
    }

    .plan-card{

        padding:28px 22px;

        border-radius:24px;
    }

    .plan-name{

        font-size:30px;
    }

    .plan-price{

        font-size:42px;
    }

    .plan-feature{

        font-size:15px;
    }

    /* CTA */

    .cta-box{

        flex-direction:column;

        text-align:center;

        padding:30px 24px;

        gap:30px;
    }

    .cta-left{

        flex-direction:column;
    }

    .cta-left h2{

        font-size:28px;
    }

    .cta-right{

        justify-content:center;
    }

    /* FOOTER */

    .footer-container{

        flex-direction:column;

        text-align:center;

        gap:30px;
    }

    .footer-right{

        flex-wrap:wrap;

        justify-content:center;
    }

}