```css
/* =========================================================
HERO BANNER
UAZIM DRAMA
========================================================= */

.hero-banner
{
    position: relative;

    width: 100%;

    height: 92vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #050816;
}


/* =========================================================
VIDEO / CAROUSEL BASE
========================================================= */

.hero-video,
.hero-carousel,
.hero-slide
{
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;
}


/* =========================================================
VIDEO
========================================================= */

.hero-video
{
    object-fit: cover;

    z-index: 1;

    filter:
    brightness(.7)
    saturate(1.1);
}


/* =========================================================
CAROUSEL
========================================================= */

.hero-carousel
{
    z-index: 1;
}

.hero-slide
{
    opacity: 0;

    transition:
    opacity 1.2s ease,
    transform 7s ease;

    transform: scale(1.03);
}

.hero-slide.active
{
    opacity: 1;

    z-index: 2;

    transform: scale(1);
}

.hero-slide img
{
    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
    brightness(.7)
    saturate(1.05);
}


/* =========================================================
OVERLAY CINEMATOGRÁFICO
========================================================= */

.hero-overlay
{
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.25) 0%,
        rgba(0,0,0,.45) 35%,
        rgba(5,8,22,.88) 100%
    );
}


/* =========================================================
EFEITO NEON
========================================================= */

.hero-overlay::after
{
    content: "";

    position: absolute;

    inset: 0;

    background:
    radial-gradient(
        circle at center,
        rgba(168,85,247,.12),
        transparent 60%
    );

    mix-blend-mode: screen;
}


/* =========================================================
CONTENT
========================================================= */

.hero-content
{
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 900px;

    padding: 0 24px;

    text-align: center;

    animation: heroFade 1.2s ease;
}


/* =========================================================
TITLE
========================================================= */

.hero-content h1
{
    font-size: clamp(42px, 7vw, 82px);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -2px;

    color: #ffffff;

    margin-bottom: 24px;

    text-shadow:
    0 0 10px rgba(168,85,247,.35),
    0 0 30px rgba(59,130,246,.20);
}


/* =========================================================
SUBTITLE
========================================================= */

.hero-content p
{
    max-width: 720px;

    margin:
    0 auto
    36px;

    font-size: clamp(15px, 2vw, 19px);

    line-height: 1.7;

    color: rgba(255,255,255,.78);
}


/* =========================================================
ACTIONS
========================================================= */

.hero-actions
{
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}


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

.hero-actions .btn
{
    min-width: 200px;

    height: 56px;

    border-radius: 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

    font-weight: 600;

    text-decoration: none;

    transition: .35s ease;

    backdrop-filter: blur(10px);
}


/* PRIMARY */

.hero-actions .btn-primary
{
    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #2563eb
    );

    color: #fff;

    box-shadow:
    0 10px 30px rgba(124,58,237,.35);
}

.hero-actions .btn-primary:hover
{
    transform: translateY(-3px);

    box-shadow:
    0 16px 40px rgba(124,58,237,.45);
}


/* OUTLINE */

.hero-actions .btn-outline
{
    border: 1px solid rgba(255,255,255,.18);

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

    color: #fff;
}

.hero-actions .btn-outline:hover
{
    background: rgba(255,255,255,.10);

    transform: translateY(-3px);
}


/* =========================================================
ANIMATION
========================================================= */

@keyframes heroFade
{
    from
    {
        opacity: 0;

        transform: translateY(35px);
    }

    to
    {
        opacity: 1;

        transform: translateY(0);
    }
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 768px)
{
    .hero-banner
    {
        height: 78vh;
    }

    .hero-video
    {
        object-fit: cover;
    }

    .hero-slide img
    {
        object-fit: cover;
    }

    .hero-content
    {
        padding: 0 18px;
    }

    .hero-content h1
    {
        line-height: 1.08;

        letter-spacing: -1px;

        margin-bottom: 18px;
    }

    .hero-content p
    {
        font-size: 14px;

        line-height: 1.6;

        margin-bottom: 28px;
    }

    .hero-actions
    {
        flex-direction: column;

        gap: 12px;
    }

    .hero-actions .btn
    {
        width: 100%;

        max-width: 280px;

        height: 54px;
    }
}


/* =========================================================
EXTRA CINEMA GRAIN
========================================================= */

.hero-banner::after
{
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    opacity: .06;

    pointer-events: none;

    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='white' fill-opacity='0.08'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
```