/* =========================================================
   PHP PLAYER - SITE OFICIAL
   ========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #080808;

    color:
        #ffffff;

    min-height:
        100vh;
}


/* =========================================================
   TOPO
   ========================================================= */

.topo {
    width: 100%;

    min-height: 82px;

    padding:
        0 7%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

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

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

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    backdrop-filter:
        blur(16px);
}


.logo {
    font-size:
        23px;

    font-weight:
        900;

    letter-spacing:
        1.5px;

    white-space:
        nowrap;
}


.logo span {
    color:
        #e50914;
}


.topo nav {
    display:
        flex;

    align-items:
        center;

    gap:
        30px;
}


.topo nav a {
    color:
        #bdbdbd;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        0.25s ease;
}


.topo nav a:hover {
    color:
        #ffffff;
}


.btn-entrar {
    min-width:
        96px;

    text-align:
        center;

    text-decoration:
        none;

    padding:
        12px 20px;

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

    border-radius:
        10px;

    color:
        #ffffff;

    font-weight:
        700;

    font-size:
        14px;

    transition:
        0.25s ease;
}


.btn-entrar:hover {
    background:
        #ffffff;

    color:
        #090909;
}


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

.hero {
    min-height:
        680px;

    padding:
        90px 7%;

    display:
        grid;

    grid-template-columns:
        1.05fr 0.95fr;

    align-items:
        center;

    gap:
        70px;

    position:
        relative;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(229, 9, 20, 0.14),
            transparent 34%
        );
}


.hero::before {
    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    left:
        -180px;

    top:
        80px;

    background:
        #e50914;

    filter:
        blur(180px);

    opacity:
        0.11;

    pointer-events:
        none;
}


.hero-conteudo {
    position:
        relative;

    z-index:
        2;
}


.badge {
    display:
        inline-block;

    color:
        #ff4650;

    background:
        rgba(229, 9, 20, 0.10);

    border:
        1px solid rgba(229, 9, 20, 0.30);

    padding:
        8px 14px;

    border-radius:
        30px;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    margin-bottom:
        26px;
}


.hero h1 {
    font-size:
        clamp(46px, 6vw, 78px);

    line-height:
        0.98;

    letter-spacing:
        -3px;

    font-weight:
        800;

    max-width:
        700px;
}


.hero h1 strong {
    color:
        #e50914;

    font-weight:
        900;
}


.hero-conteudo > p {
    margin-top:
        30px;

    max-width:
        610px;

    font-size:
        18px;

    line-height:
        1.7;

    color:
        #a9a9a9;
}


.acoes {
    margin-top:
        38px;

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;
}


.btn-principal,
.btn-secundario {
    text-decoration:
        none;

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 25px;

    border-radius:
        11px;

    font-weight:
        800;

    font-size:
        14px;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border 0.22s ease;
}


.btn-principal {
    background:
        #e50914;

    color:
        #ffffff;

    box-shadow:
        0 12px 35px rgba(229, 9, 20, 0.22);
}


.btn-principal:hover {
    background:
        #ff1722;

    transform:
        translateY(-2px);
}


.btn-secundario {
    color:
        #ffffff;

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

    background:
        rgba(255, 255, 255, 0.03);
}


.btn-secundario:hover {
    border-color:
        rgba(255, 255, 255, 0.30);

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

    transform:
        translateY(-2px);
}


.compatibilidade {
    margin-top:
        40px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.compatibilidade span {
    color:
        #666666;

    font-size:
        12px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;
}


.compatibilidade strong {
    color:
        #dedede;

    font-size:
        14px;
}


/* =========================================================
   PAINEL DA DIREITA
   ========================================================= */

.hero-painel {
    position:
        relative;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}


.painel-tv {
    width:
        100%;

    max-width:
        510px;

    min-height:
        390px;

    border-radius:
        24px;

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

    background:
        linear-gradient(
            145deg,
            rgba(25, 25, 25, 0.95),
            rgba(11, 11, 11, 0.98)
        );

    box-shadow:
        0 35px 90px rgba(0, 0, 0, 0.55),
        0 0 80px rgba(229, 9, 20, 0.08);

    overflow:
        hidden;

    position:
        relative;
}


.painel-tv::before {
    content:
        "";

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    right:
        -110px;

    top:
        -100px;

    background:
        #e50914;

    filter:
        blur(110px);

    opacity:
        0.22;
}


.painel-topo {
    min-height:
        72px;

    padding:
        0 26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

    font-weight:
        900;

    letter-spacing:
        1px;
}


.status {
    color:
        #62d98b;

    font-size:
        11px;

    letter-spacing:
        0.8px;
}


.painel-conteudo {
    padding:
        28px;
}


.painel-item {
    padding:
        24px 22px;

    margin-bottom:
        15px;

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

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

    border-radius:
        14px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.painel-item:last-child {
    margin-bottom:
        0;
}


.painel-item small {
    color:
        #626262;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.3px;
}


.painel-item strong {
    font-size:
        16px;

    color:
        #eeeeee;
}


.painel-item strong.ativo {
    color:
        #62d98b;
}


/* =========================================================
   RECURSOS
   ========================================================= */

.recursos {
    padding:
        105px 7% 120px;

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

    background:
        #0b0b0b;
}


.titulo-secao {
    max-width:
        700px;

    margin-bottom:
        55px;
}


.titulo-secao span {
    display:
        block;

    color:
        #e50914;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        2px;

    margin-bottom:
        12px;
}


.titulo-secao h2 {
    font-size:
        clamp(32px, 4vw, 48px);

    line-height:
        1.1;

    letter-spacing:
        -1.5px;
}


.cards {
    display:
        grid;

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

    gap:
        20px;
}


.card {
    min-height:
        255px;

    padding:
        28px;

    border-radius:
        17px;

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

    background:
        #101010;

    transition:
        transform 0.25s ease,
        border 0.25s ease,
        background 0.25s ease;
}


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

    border-color:
        rgba(229, 9, 20, 0.32);

    background:
        #131313;
}


.icone {
    width:
        52px;

    height:
        52px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    border-radius:
        13px;

    margin-bottom:
        25px;

    background:
        rgba(229, 9, 20, 0.09);

    border:
        1px solid rgba(229, 9, 20, 0.15);

    font-size:
        23px;
}


.card h3 {
    margin-bottom:
        14px;

    font-size:
        18px;
}


.card p {
    color:
        #858585;

    line-height:
        1.65;

    font-size:
        14px;
}


/* =========================================================
   CHAMADA FINAL
   ========================================================= */

.chamada {
    padding:
        110px 7%;

    text-align:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(229, 9, 20, 0.12),
            transparent 45%
        );

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

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


.chamada h2 {
    font-size:
        clamp(34px, 5vw, 52px);

    letter-spacing:
        -2px;

    margin-bottom:
        18px;
}


.chamada p {
    color:
        #8d8d8d;

    font-size:
        16px;

    margin:
        0 auto 30px;

    max-width:
        560px;

    line-height:
        1.6;
}


/* =========================================================
   RODAPÉ
   ========================================================= */

footer {
    padding:
        50px 7%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    flex-wrap:
        wrap;

    background:
        #070707;
}


footer p {
    color:
        #6f6f6f;

    font-size:
        13px;
}


footer small {
    color:
        #4b4b4b;

    font-size:
        11px;
}


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

@media (
    max-width: 1050px
) {

    .topo nav {
        display:
            none;
    }


    .hero {
        grid-template-columns:
            1fr;

        padding-top:
            70px;
    }


    .hero-painel {
        margin-top:
            20px;
    }


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


@media (
    max-width: 650px
) {

    .topo {
        padding:
            0 5%;
    }


    .logo {
        font-size:
            19px;
    }


    .btn-entrar {
        padding:
            10px 15px;

        min-width:
            80px;
    }


    .hero {
        padding:
            65px 5%;
    }


    .hero h1 {
        letter-spacing:
            -2px;
    }


    .hero-conteudo > p {
        font-size:
            16px;
    }


    .acoes {
        flex-direction:
            column;
    }


    .btn-principal,
    .btn-secundario {
        width:
            100%;
    }


    .painel-conteudo {
        padding:
            18px;
    }


    .recursos {
        padding:
            80px 5%;
    }


    .cards {
        grid-template-columns:
            1fr;
    }


    .chamada {
        padding:
            80px 5%;
    }


    footer {
        padding:
            40px 5%;

        flex-direction:
            column;

        text-align:
            center;
    }
}


/* =========================================================
   IMAGEM REAL DO PHP PLAYER NA TV
   ========================================================= */

.hero-painel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.imagem-tv {
    width: 118%;
    max-width: 820px;
    height: auto;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 28px 45px rgba(0, 0, 0, 0.65)
        )
        drop-shadow(
            0 0 35px rgba(229, 9, 20, 0.12)
        );
}


/* LOGO OFICIAL DO SITE */

.logo-site img {
    width: 120px;
    height: auto;
    display: block;
}

.logo-site {
    display: flex;
    align-items: center;
    margin-left: -18px;
}