/* ==========================================
   DEPLAY IPTV - STYLE CSS
   Design Premium Dark / Neon
   ========================================== */


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


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

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

    background: #080808;

    color: #ffffff;

    line-height: 1.6;

    overflow-x: hidden;

}



img {

    max-width: 100%;

    display: block;

}



a {

    text-decoration: none;

    color: inherit;

}



ul {

    list-style: none;

}



button {

    border: none;

    cursor: pointer;

    font-family: inherit;

}





/* ==========================================
   VARIÁVEIS DE CORES
   ========================================== */


:root {


    --primary-color: #8A2BE2;


    --secondary-color: #FF00FF;


    --accent-color: #00E5FF;


    --success-color: #00FF66;


    --dark-bg: #080808;


    --dark-card: rgba(255,255,255,0.05);


    --white: #ffffff;


    --text-gray: rgba(255,255,255,0.7);


    --border-color: rgba(255,255,255,0.1);


    --gradient:

    linear-gradient(

        90deg,

        #8A2BE2,

        #FF00FF

    );


    --shadow:

    0 20px 50px rgba(0,0,0,0.45);



    --transition:

    all .4s ease;


}





/* ==========================================
   CONTAINER
   ========================================== */


.container {


    width: 100%;


    max-width: 1200px;


    margin: 0 auto;


    padding: 0 20px;


}





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


.section-spacing {


    padding: 100px 0;


}



.section-spacing-top {


    padding-top: 80px;


}





/* ==========================================
   TEXTOS GERAIS
   ========================================== */


.text-gradient {


    background: var(--gradient);


    -webkit-background-clip: text;


    background-clip: text;


    color: transparent;


}



.section-title-wrapper {


    text-align: center;


    max-width: 750px;


    margin: 0 auto 60px;


}



.section-subtitle {


    display: inline-block;


    color: var(--secondary-color);


    font-size: 14px;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 2px;


    margin-bottom: 15px;


}



.section-title {


    font-size: 42px;


    line-height: 1.2;


    font-weight: 800;


    margin-bottom: 20px;


}



.section-desc {


    color: var(--text-gray);


    font-size: 16px;


}



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


.header {


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    z-index: 999;


    background: rgba(8,8,8,0.75);


    backdrop-filter: blur(15px);


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


    transition: var(--transition);


}



.header.scrolled {


    background: rgba(8,8,8,0.95);


    box-shadow: 0 10px 40px rgba(0,0,0,0.4);


}




.header__container {


    height: 85px;


    display: flex;


    align-items: center;


    justify-content: space-between;


}





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


.logo {


    display: flex;


    align-items: center;


}



.logo__text {


    font-size: 32px;


    font-weight: 800;


    letter-spacing: 1px;


}



.logo__highlight {


    background: var(--gradient);


    -webkit-background-clip: text;


    background-clip: text;


    color: transparent;


}





/* ==========================================
   MENU DESKTOP
   ========================================== */


.nav__list {


    display: flex;


    align-items: center;


    gap: 35px;


}



.nav__link {


    position: relative;


    color: rgba(255,255,255,.75);


    font-size: 15px;


    font-weight: 500;


    transition: var(--transition);


}



.nav__link:hover,


.nav__link.active-link {


    color: #ffffff;


}



.nav__link::after {


    content: "";


    position: absolute;


    bottom: -8px;


    left: 0;


    width: 0;


    height: 2px;


    background: var(--gradient);


    transition: var(--transition);


}



.nav__link:hover::after,


.nav__link.active-link::after {


    width: 100%;


}





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


.btn {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    gap: 10px;


    padding: 14px 32px;


    border-radius: 50px;


    font-size: 15px;


    font-weight: 600;


    transition: var(--transition);


    position: relative;


    overflow: hidden;


}





.btn--primary {


    background: var(--gradient);


    color: white;


    box-shadow:

    0 10px 30px rgba(255,0,255,.25);


}



.btn--primary:hover {


    transform: translateY(-3px);


    box-shadow:

    0 15px 40px rgba(255,0,255,.45);


}



.btn--secondary {


    background: transparent;


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


    color: white;


}



.btn--secondary:hover {


    border-color: var(--secondary-color);


    color: var(--secondary-color);


}



.btn--header {


    padding: 11px 25px;


}



.btn--full {


    width: 100%;


}





.btn--highlight {


    background: linear-gradient(

        90deg,

        #ff00ff,

        #8a2be2

    );


    color:white;


}





.btn--glow {


    animation: pulseGlow 2s infinite;


}




@keyframes pulseGlow {


    0% {


        box-shadow:

        0 0 0 rgba(255,0,255,.5);


    }



    50% {


        box-shadow:

        0 0 35px rgba(255,0,255,.8);


    }



    100% {


        box-shadow:

        0 0 0 rgba(255,0,255,.5);


    }


}





/* ==========================================
   MENU MOBILE
   ========================================== */


.nav__toggle {


    display: none;


    width: 45px;


    height: 45px;


    background: transparent;


    position: relative;


}



.nav__toggle-icon,


.nav__toggle-icon::before,


.nav__toggle-icon::after {


    content: "";


    position: absolute;


    width: 28px;


    height: 3px;


    background: white;


    border-radius: 5px;


    left: 50%;


    transform: translateX(-50%);


    transition: .3s;


}



.nav__toggle-icon {


    top: 21px;


}



.nav__toggle-icon::before {


    top: -9px;


}



.nav__toggle-icon::after {


    top: 9px;


}
/* ==========================================
   HERO SECTION
   ========================================== */


.hero {


    min-height: 100vh;


    display: flex;


    align-items: center;


    position: relative;


    overflow: hidden;


    padding-top: 120px;


}



.hero::before {


    content: "";


    position: absolute;


    width: 600px;


    height: 600px;


    background: radial-gradient(

        circle,

        rgba(138,43,226,.35),

        transparent 70%

    );


    top: -150px;


    right: -200px;


    filter: blur(40px);


}



.hero::after {


    content: "";


    position: absolute;


    width: 500px;


    height: 500px;


    background: radial-gradient(

        circle,

        rgba(255,0,255,.25),

        transparent 70%

    );


    bottom: -200px;


    left: -200px;


    filter: blur(50px);


}





.hero__container {


    display: grid;


    grid-template-columns: 1fr 1fr;


    align-items: center;


    gap: 50px;


}





.hero__content {


    position: relative;


    z-index: 2;


}





.badge {


    display: inline-flex;


    align-items: center;


    padding: 8px 18px;


    border-radius: 50px;


    background: rgba(255,255,255,.05);


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


    color: var(--secondary-color);


    font-size: 13px;


    font-weight: 600;


    margin-bottom: 25px;


}





.badge--success {


    color: var(--success-color);


    border-color: rgba(0,255,102,.3);


}





.hero__title {


    font-size: clamp(42px,5vw,70px);


    line-height: 1.1;


    font-weight: 800;


    margin-bottom: 25px;


}





.hero__subtitle {


    color: var(--text-gray);


    font-size: 18px;


    max-width: 560px;


    margin-bottom: 35px;


}





.hero__buttons {


    display: flex;


    gap: 20px;


    flex-wrap: wrap;


}






/* ==========================================
   MOCKUP TV
   ========================================== */


.hero__visual {


    display: flex;


    justify-content: center;


    perspective: 1000px;


}





.tv-mockup {


    width: 100%;


    max-width: 600px;


    position: relative;


    transform-style: preserve-3d;


    animation: floatingTV 5s ease-in-out infinite;


}





.tv-screen {


    background: #000;


    border-radius: 20px;


    overflow: hidden;


    border: 8px solid #111;


    box-shadow:


    0 40px 80px rgba(0,0,0,.6),


    0 0 60px rgba(255,0,255,.25);


}





.tv-svg {


    width: 100%;


    display: block;


}





.tv-stand {


    width: 90px;


    height: 50px;


    background: #111;


    margin: 0 auto;


}





.tv-base {


    width: 180px;


    height: 12px;


    background: #111;


    border-radius: 20px;


    margin: 0 auto;


}





@keyframes floatingTV {


    0%,100% {


        transform: translateY(0);


    }



    50% {


        transform: translateY(-15px);


    }


}





/* ==========================================
   ANIMAÇÕES DE ENTRADA
   ========================================== */


.scroll-reveal-left {


    animation: revealLeft .8s ease forwards;


}



.scroll-reveal-right {


    animation: revealRight .8s ease forwards;


}



.scroll-reveal-up {


    animation: revealUp .8s ease forwards;


}





@keyframes revealLeft {


    from {


        opacity:0;


        transform:translateX(-50px);


    }



    to {


        opacity:1;


        transform:translateX(0);


    }


}





@keyframes revealRight {


    from {


        opacity:0;


        transform:translateX(50px);


    }



    to {


        opacity:1;


        transform:translateX(0);


    }


}





@keyframes revealUp {


    from {


        opacity:0;


        transform:translateY(40px);


    }



    to {


        opacity:1;


        transform:translateY(0);


    }


}
/* ==========================================
   BENEFÍCIOS
   ========================================== */


.beneficios {


    position: relative;


}





.grid {


    display: grid;


    gap: 30px;


}





.grid--3-cols {


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


}





.benefit-card {


    background: var(--dark-card);


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


    border-radius: 25px;


    padding: 35px 30px;


    transition: var(--transition);


    backdrop-filter: blur(15px);


}





.benefit-card:hover {


    transform: translateY(-10px);


    border-color: rgba(255,0,255,.5);


    box-shadow:


    0 25px 50px rgba(0,0,0,.35);


}





.benefit-card__icon {


    width: 65px;


    height: 65px;


    display: flex;


    align-items: center;


    justify-content: center;


    border-radius: 20px;


    background: linear-gradient(

        135deg,

        rgba(138,43,226,.3),

        rgba(255,0,255,.3)

    );


    color: white;


    font-size: 26px;


    margin-bottom: 25px;


}





.benefit-card__title {


    font-size: 21px;


    font-weight: 700;


    margin-bottom: 15px;


}





.benefit-card__text {


    color: var(--text-gray);


    font-size: 15px;


}






/* ==========================================
   PLANOS IPTV
   ========================================== */



.planos {


    background:


    linear-gradient(

        180deg,

        transparent,

        rgba(138,43,226,.08)

    );


}





.grid--5-cols {


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


}





.plan-card {


    position: relative;


    background: rgba(255,255,255,.05);


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


    border-radius: 25px;


    padding: 35px 25px;


    transition: var(--transition);


    display: flex;


    flex-direction: column;


}





.plan-card:hover {


    transform: translateY(-10px);


    border-color: var(--secondary-color);


}





.plan-card--featured {


    border: 2px solid var(--secondary-color);


    background:


    linear-gradient(

        160deg,

        rgba(255,0,255,.15),

        rgba(138,43,226,.08)

    );


}





.plan-card__badge {


    position: absolute;


    top: -15px;


    left: 50%;


    transform: translateX(-50%);


    background: var(--gradient);


    padding: 7px 20px;


    border-radius: 30px;


    font-size: 12px;


    font-weight: 700;


    white-space: nowrap;


}





.plan-card__title {


    font-size: 20px;


    font-weight: 700;


    margin-bottom: 25px;


    text-align: center;


}





.plan-card__price {


    display: flex;


    justify-content: center;


    align-items: baseline;


    gap: 5px;


    margin-bottom: 25px;


}





.plan-card__currency {


    font-size: 18px;


}





.plan-card__amount {


    font-size: 45px;


    font-weight: 800;


}





.plan-card__period {


    color: var(--text-gray);


    font-size: 14px;


}





.plan-card__features {


    display: flex;


    flex-direction: column;


    gap: 15px;


    margin-bottom: 30px;


}





.plan-card__features li {


    color: rgba(255,255,255,.85);


    font-size: 14px;


    display: flex;


    gap: 10px;


    align-items: center;


}





.plan-card__features i {


    color: var(--success-color);


}





.plan-card__action {


    margin-top: auto;


}





.plan-card__info-text {


    text-align: center;


    color: var(--text-gray);


    margin-bottom: 20px;


}




/* ==========================================
   ÁREA DE REVENDA
   ========================================== */


.revenda {


    position: relative;


}





.revenda__content-wrapper {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 60px;


    align-items: center;


}





.revenda__paragraph {


    color: var(--text-gray);


    margin: 25px 0;


    font-size: 16px;


}





.revenda__cta-container {


    margin-top: 35px;


}





.revenda__cards-grid {


    display: grid;


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


    gap: 25px;


}





.revenda-card {


    background: rgba(255,255,255,.05);


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


    border-radius: 25px;


    padding: 30px;


    transition: var(--transition);


}





.revenda-card:hover {


    transform: translateY(-8px);


    border-color: var(--primary-color);


}





.revenda-card__header {


    display: flex;


    align-items: center;


    gap: 15px;


    margin-bottom: 20px;


}





.revenda-card__icon {


    width: 55px;


    height: 55px;


    border-radius: 18px;


    display: flex;


    justify-content: center;


    align-items: center;


    background:


    linear-gradient(

        135deg,

        rgba(138,43,226,.3),

        rgba(255,0,255,.3)

    );


    font-size: 22px;


}





.revenda-card__title {


    font-size: 18px;


    font-weight: 700;


}





.revenda-card__text {


    color: var(--text-gray);


    font-size: 14px;


}






/* ==========================================
   PLANOS DE CRÉDITOS DE REVENDA
   ========================================== */


.plan-card__features--small {


    margin-top: 20px;


}





.plan-card__info-text--featured {


    color: var(--secondary-color);


    font-weight: 600;


}






/* ==========================================
   QUEM SOMOS
   ========================================== */


.quemsomos {


    background:


    linear-gradient(

        180deg,

        rgba(255,255,255,.02),

        transparent

    );


}





.quemsomos__grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 60px;


    align-items: center;


}





.quemsomos__text {


    font-size: 18px;


    margin-bottom: 20px;


}





.quemsomos__text-secondary {


    color: var(--text-gray);


}





.quemsomos__visual-glow-box {


    background: rgba(255,255,255,.05);


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


    border-radius: 35px;


    padding: 50px 30px;


    display: grid;


    gap: 35px;


    text-align: center;


    box-shadow:


    0 0 50px rgba(138,43,226,.15);


}





.quemsomos__metric {


    display: flex;


    flex-direction: column;


}





.quemsomos__number {


    font-size: 48px;


    font-weight: 800;


    background: var(--gradient);


    -webkit-background-clip: text;


    background-clip: text;


    color: transparent;


}





.quemsomos__label {


    color: var(--text-gray);


    font-size: 15px;


}




/* ==========================================
   FAQ
   ========================================== */


.faq {


    position: relative;


}





.faq__accordion {


    max-width: 850px;


    margin: 0 auto;


}





.faq__item {


    background: rgba(255,255,255,.05);


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


    border-radius: 20px;


    margin-bottom: 20px;


    overflow: hidden;


    transition: var(--transition);


}





.faq__item:hover {


    border-color: rgba(255,0,255,.4);


}





.faq__header {


    width: 100%;


    padding: 25px 30px;


    background: transparent;


    color: white;


    display: flex;


    justify-content: space-between;


    align-items: center;


    font-size: 16px;


    font-weight: 600;


    text-align: left;


}





.faq__icon-wrapper {


    width: 35px;


    height: 35px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    background: rgba(255,255,255,.1);


    transition: .3s;


}





.faq__content {


    max-height: 0;


    overflow: hidden;


    transition: max-height .4s ease;


}





.faq__text {


    padding: 0 30px 25px;


    color: var(--text-gray);


    font-size: 15px;


}





.faq__item.active .faq__icon-wrapper {


    transform: rotate(180deg);


    background: var(--secondary-color);


}





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


.footer {


    background: #050505;


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


    padding: 70px 0 20px;


}





.footer__grid {


    display: grid;


    grid-template-columns: 1.5fr 1fr 1fr;


    gap: 50px;


    margin-bottom: 50px;


}





.logo--footer {


    margin-bottom: 20px;


}





.footer__description {


    color: var(--text-gray);


    max-width: 350px;


    font-size: 14px;


}





.footer__socials {


    display: flex;


    gap: 15px;


    margin-top: 25px;


}





.footer__socials a {


    width: 45px;


    height: 45px;


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    background: rgba(255,255,255,.1);


    color: white;


    font-size: 22px;


    transition: var(--transition);


}





.footer__socials a:hover {


    background: #25D366;


    transform: translateY(-5px);


}





.footer__title {


    font-size: 18px;


    margin-bottom: 25px;


}





.footer__links ul,


.footer__contact ul {


    display: flex;


    flex-direction: column;


    gap: 15px;


}





.footer__links a,


.footer__contact a,


.footer__contact span {


    color: var(--text-gray);


    font-size: 14px;


}





.footer__links a:hover,


.footer__contact a:hover {


    color: var(--secondary-color);


}





.footer__contact li {


    display: flex;


    gap: 12px;


    align-items: center;


}





.footer__contact i {


    color: var(--secondary-color);


}





.footer__bottom {


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


    padding-top: 25px;


    text-align: center;


}





.footer__bottom p {


    color: rgba(255,255,255,.5);


    font-size: 13px;


}




/* ==========================================
   WHATSAPP FLUTUANTE
   ========================================== */


.whatsapp-float {


    position: fixed;


    right: 25px;


    bottom: 25px;


    width: 60px;


    height: 60px;


    border-radius: 50%;


    background: #25D366;


    color: white;


    display: flex;


    justify-content: center;


    align-items: center;


    font-size: 32px;


    z-index: 999;


    box-shadow:

    0 10px 30px rgba(37,211,102,.45);


    animation: whatsappPulse 2s infinite;


}





.whatsapp-float:hover {


    transform: scale(1.1);


}





@keyframes whatsappPulse {


    0% {


        box-shadow:

        0 0 0 0 rgba(37,211,102,.6);


    }



    70% {


        box-shadow:

        0 0 0 20px rgba(37,211,102,0);


    }



    100% {


        box-shadow:

        0 0 0 0 rgba(37,211,102,0);


    }


}





/* ==========================================
   BOTÃO VOLTAR AO TOPO
   ========================================== */


.back-to-top {


    position: fixed;


    right: 25px;


    bottom: 100px;


    width: 45px;


    height: 45px;


    border-radius: 50%;


    background: var(--gradient);


    color: white;


    display: flex;


    align-items: center;


    justify-content: center;


    opacity: 0;


    visibility: hidden;


    transition: .3s;


    z-index: 998;


}





.back-to-top.show {


    opacity: 1;


    visibility: visible;


}





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


@media(max-width:1100px){



    .grid--5-cols {


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


    }



    .hero__container {


        gap:30px;


    }



}





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


@media(max-width:768px){



    .section-spacing {


        padding:70px 0;


    }




    .section-title {


        font-size:32px;


    }





    /* MENU MOBILE */


    .nav {


        position: fixed;


        top:85px;


        left:-100%;


        width:100%;


        height:calc(100vh - 85px);


        background:#080808;


        padding:40px;


        transition:.4s;


    }




    .nav.active {


        left:0;


    }




    .nav__list {


        flex-direction:column;


        gap:25px;


        align-items:flex-start;


    }




    .nav__toggle {


        display:block;


    }




    .btn--header {


        display:none;


    }





    /* HERO */


    .hero__container {


        grid-template-columns:1fr;


        text-align:center;


    }




    .hero__subtitle {


        margin-left:auto;


        margin-right:auto;


    }




    .hero__buttons {


        justify-content:center;


    }




    .hero__visual {


        margin-top:40px;


    }






    /* GRIDS */


    .grid--3-cols,


    .grid--5-cols {


        grid-template-columns:1fr;


    }




    .revenda__content-wrapper,


    .quemsomos__grid {


        grid-template-columns:1fr;


    }





    .revenda__cards-grid {


        grid-template-columns:1fr;


    }





    .footer__grid {


        grid-template-columns:1fr;


        text-align:center;


    }




    .footer__contact li {


        justify-content:center;


    }




    .footer__socials {


        justify-content:center;


    }





    .tv-mockup {


        max-width:95%;


    }




}