/* ==========================
   HOME - GOLEIRO DE ÓCULOS
   ========================== */

.home-hero{
    position:relative;
    min-height:680px;
    display:flex;
    align-items:center;
    background:url("../img/banner-desktop.png") center/cover;
}

.home-hero-content{
    position:relative;
    z-index:2;
}

.home-hero-text{
    max-width:720px;
}

.home-kicker,
.section-kicker{
    display:inline-block;
    margin-bottom:14px;
    color:var(--yellow);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.home-hero h1{
    max-width:760px;
    margin-bottom:22px;
    font-family:"Oswald",sans-serif;
    font-size:4.55rem;
    line-height:1.02;
    text-transform:uppercase;
}

.home-hero p{
    max-width:640px;
    margin-bottom:30px;
    color:#e6e6e6;
    font-size:1.16rem;
}

.home-hero-actions,
.home-social-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.btn-outline{
    border:1px solid var(--yellow);
    background:transparent;
    color:var(--yellow);
}

.btn-outline:hover{
    background:var(--yellow);
    color:#000;
}

.section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:30px;
}

.section-heading h2,
.home-roleta h2,
.home-shop h2,
.home-about h2,
.home-social h2{
    margin-bottom:0;
}

.section-heading-centered{
    justify-content:center;
    text-align:center;
}

.section-link{
    color:var(--yellow);
    font-size:.92rem;
    font-weight:700;
}

.section-link:hover{
    text-decoration:underline;
}

.home-featured-video{
    background:#0d0d0d;
}

.video-highlight{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
    overflow:hidden;
    border:1px solid #2d2d2d;
    border-radius:16px;
    background:#151515;
    box-shadow:var(--shadow);
}

.video-thumbnail{
    position:relative;
    display:block;
    min-height:350px;
    overflow:hidden;
    background:#000;
}

.video-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.video-thumbnail:hover img{
    transform:scale(1.04);
}

.video-thumbnail::after{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
    content:"";
}

.video-play{
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:76px;
    height:76px;
    padding-left:4px;
    border:2px solid var(--yellow);
    border-radius:50%;
    background:rgba(0,0,0,.65);
    color:var(--yellow);
    font-size:1.7rem;
    transform:translate(-50%,-50%);
}

.video-highlight-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:42px;
}

.content-badge{
    display:inline-block;
    margin-bottom:15px;
    padding:5px 9px;
    border-radius:4px;
    background:var(--yellow);
    color:#000;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.7px;
}

.video-highlight-content h3{
    margin-bottom:16px;
    font-family:"Oswald",sans-serif;
    font-size:2rem;
    line-height:1.08;
    text-transform:uppercase;
}

.video-highlight-content p{
    margin-bottom:26px;
    color:#d4d4d4;
}

.home-roleta{
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 44%, rgba(255,196,0,.16), transparent 24%),
        #111;
}

.home-roleta-grid,
.home-shop-grid,
.home-about-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:55px;
}

.home-roleta-content p,
.home-shop-copy p,
.home-about p{
    max-width:600px;
    margin:18px 0 24px;
    color:#ddd;
    font-size:1.05rem;
}

.home-check-list{
    display:grid;
    gap:10px;
    margin:0 0 30px;
}

.home-check-list li{
    position:relative;
    padding-left:25px;
    color:#eee;
}

.home-check-list li::before{
    position:absolute;
    top:0;
    left:0;
    color:var(--yellow);
    content:"✓";
    font-weight:700;
}

.home-roleta-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:400px;
}

.mini-arena{
    position:relative;
    width:min(100%,390px);
    aspect-ratio:1;
    overflow:hidden;
    border:3px solid var(--yellow);
    border-radius:50%;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.05) 0 45px,
            rgba(0,0,0,.10) 45px 90px
        ),
        #1d6b35;
    box-shadow:
        0 0 0 12px #0d0d0d,
        0 0 0 14px rgba(255,196,0,.20),
        0 20px 40px rgba(0,0,0,.45);
}

.mini-arena::before,
.mini-arena::after{
    position:absolute;
    top:50%;
    left:50%;
    border:2px solid rgba(255,255,255,.28);
    border-radius:50%;
    content:"";
    transform:translate(-50%,-50%);
}

.mini-arena::before{
    width:48%;
    height:48%;
}

.mini-arena::after{
    width:7px;
    height:7px;
    background:rgba(255,255,255,.45);
}

.mini-arena-logo{
    position:absolute;
    top:50%;
    left:50%;
    width:34%;
    opacity:.94;
    transform:translate(-50%,-50%);
}

.mini-ball{
    position:absolute;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:70px;
    height:70px;
    border:3px solid #fff;
    border-radius:50%;
    color:#fff;
    font-family:"Oswald",sans-serif;
    font-size:1.7rem;
    font-weight:700;
    box-shadow:0 6px 14px rgba(0,0,0,.35);
}

.mini-ball-yellow{
    top:22%;
    left:19%;
    background:#ffc400;
    color:#000;
    transform:rotate(-12deg);
}

.mini-ball-dark{
    right:16%;
    bottom:20%;
    background:#333;
    transform:rotate(11deg);
}

.mini-goal{
    position:absolute;
    top:12%;
    right:11%;
    width:108px;
    height:54px;
    border:4px solid #fff;
    border-bottom:0;
    border-radius:9px 9px 0 0;
    transform:rotate(30deg);
}

.home-content-types{
    background:#050505;
}

.home-content-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.home-content-card{
    min-height:235px;
    padding:28px;
    border:1px solid #2d2d2d;
    border-radius:14px;
    background:#151515;
    transition:transform .25s ease,border-color .25s ease;
}

.home-content-card:hover{
    border-color:var(--yellow);
    transform:translateY(-5px);
}

.content-card-icon{
    display:block;
    margin-bottom:18px;
    font-size:2.25rem;
}

.home-content-card h3{
    margin-bottom:10px;
    font-family:"Oswald",sans-serif;
    font-size:1.45rem;
    text-transform:uppercase;
}

.home-content-card p{
    color:#d4d4d4;
}

.home-shop{
    background:
        linear-gradient(120deg, rgba(255,196,0,.07), transparent 48%),
        #151515;
}

.home-shop-tags{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.home-shop-tags span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:105px;
    border:1px solid rgba(255,196,0,.34);
    border-radius:12px;
    background:#0c0c0c;
    color:var(--yellow);
    font-family:"Oswald",sans-serif;
    font-size:1.45rem;
    text-transform:uppercase;
}

.home-about{
    background:#090909;
}

.home-about-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:290px;
    border:1px solid rgba(255,196,0,.25);
    border-radius:18px;
    background:
        radial-gradient(circle at center, rgba(255,196,0,.12), transparent 55%),
        #121212;
}

.home-about-logo img{
    width:min(70%,280px);
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.45));
}

.home-social{
    padding:82px 0;
    background:
        linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,.88)),
        url("../img/banner-desktop.png") center/cover;
    text-align:center;
}

.home-social h2{
    margin-bottom:13px;
    font-size:3rem;
}

.home-social p{
    margin-bottom:26px;
    color:#e5e5e5;
    font-size:1.06rem;
}

.home-social-actions{
    justify-content:center;
}

@media(max-width:900px){

    .home-hero{
        min-height:560px;
    }

    .home-hero h1{
        font-size:3.5rem;
    }

    .video-highlight,
    .home-roleta-grid,
    .home-shop-grid,
    .home-about-inner{
        grid-template-columns:1fr;
    }

    .home-roleta-visual{
        min-height:310px;
    }

    .home-content-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .home-hero{
        min-height:550px;
        background:url("../img/banner-mobile.png") center/cover;
    }

    .home-hero h1{
        font-size:2.65rem;
    }

    .home-hero p{
        font-size:1rem;
    }

    .section-heading{
        align-items:flex-start;
        flex-direction:column;
    }

    .video-thumbnail{
        min-height:250px;
    }

    .video-highlight-content{
        padding:28px 20px;
    }

    .video-highlight-content h3{
        font-size:1.65rem;
    }

    .home-roleta-grid,
    .home-shop-grid,
    .home-about-inner{
        gap:32px;
    }

    .home-shop-tags{
        gap:10px;
    }

    .home-shop-tags span{
        min-height:82px;
        font-size:1.15rem;
    }

    .home-social h2{
        font-size:2.25rem;
    }

}

@media(max-width:450px){

    .home-hero{
        min-height:510px;
    }

    .home-hero h1{
        font-size:2.3rem;
    }

    .home-hero-actions,
    .home-social-actions{
        flex-direction:column;
    }

    .home-hero-actions .btn,
    .home-social-actions .btn{
        width:100%;
        text-align:center;
    }

    .video-thumbnail{
        min-height:205px;
    }

    .video-play{
        width:60px;
        height:60px;
        font-size:1.25rem;
    }

    .mini-arena{
        width:290px;
    }

    .mini-ball{
        width:53px;
        height:53px;
        font-size:1.25rem;
    }

    .mini-goal{
        width:82px;
        height:40px;
    }

    .home-shop-tags{
        grid-template-columns:1fr 1fr;
    }

}