* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--background);

    color: var(--text);

    font-family: "Inter", sans-serif;

    line-height: 1.7;

    overflow-x: hidden;

}

section {
    scroll-margin-top: 100px;
}

img {

    max-width: 100%;

    display: block;

}



a {

    text-decoration: none;

    color: inherit;

}



.container {

    width: min(90%, var(--container));

    margin: auto;

}



/* =====================
NAVIGATION
===================== */


.header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(8, 9, 10, .75);

    backdrop-filter: blur(20px);

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

}



.navbar {

    height: 85px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.logo {

    font-family: "Space Grotesk";

    font-size: 1.8rem;

    font-weight: 700;

    letter-spacing: -1px;

}



.logo span {

    color: var(--primary);

}



.nav-links {

    display: flex;

    gap: 2.5rem;

    list-style: none;

}



.nav-links a {

    color: var(--muted);

    transition: .3s ease;

}



.nav-links a:hover {

    color: var(--white);

}



.watch-btn {

    border: none;

    background: var(--primary);

    color: white;

    padding: .85rem 1.5rem;

    border-radius: 999px;

    cursor: pointer;

    transition: .3s ease;

}



.watch-btn:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 30px rgba(109, 93, 246, .35);

}



.hamburger {

    display: none;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;

}



.hamburger span {

    width: 28px;

    height: 2px;

    background: white;

}



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


.hero {

    min-height:
        calc(100vh - 85px);

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    text-align: center;

}



.hero-content {

    position: relative;

    z-index: 2;

}



.hero-label {

    color: var(--secondary);

    font-size: .85rem;

    letter-spacing: 4px;

    font-weight: 600;

    margin-bottom: 2rem;

}



.hero h1 {

    font-family: "Space Grotesk";

    font-size:
        clamp(3.5rem, 9vw, 7rem);

    line-height: .95;

    letter-spacing: -4px;

    margin-bottom: 2rem;

}



.hero h1 span {

    display: block;

    color: var(--primary);

}



.hero-description {

    max-width: 720px;

    margin: auto;

    color: var(--muted);

    font-size: 1.25rem;

}



.hero-buttons {

    margin-top: 3rem;

    display: flex;

    justify-content: center;

    gap: 1rem;

}

.header.scrolled {


    background:

        rgba(8, 9, 10, .95);


    box-shadow:

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


}



.primary-btn,
.secondary-btn {


    padding:
        1rem 2rem;

    border-radius: 999px;

    cursor: pointer;

    font-size: 1rem;

    transition: .3s ease;

}



.primary-btn {


    background: var(--primary);

    border: none;

    color: white;

    box-shadow:
        0 10px 30px rgba(109, 93, 246, .35);

}



.secondary-btn {


    background: transparent;

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

    color: white;

}



.primary-btn:hover,
.secondary-btn:hover {


    transform: translateY(-5px);

}




/* =====================
GLOW EFFECTS
===================== */


.hero-glow {


    position: absolute;

    width: 550px;

    height: 550px;

    border-radius: 50%;

    filter: blur(130px);

    opacity: .35;

}



.glow-one {


    background: var(--primary);

    top: -200px;

    left: -200px;


}



.glow-two {


    background: var(--secondary);

    bottom: -250px;

    right: -200px;


}




/* =====================
SCROLL INDICATOR
===================== */


.scroll-indicator {


    margin-top: 5rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: var(--muted);

}



.scroll-indicator span {


    width: 2px;

    height: 45px;

    background: var(--primary);

    margin-bottom: .8rem;


}



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


footer {


    padding: 4rem 0;

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

    color: var(--muted);

    text-align: center;


}




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


@media(max-width:900px) {


    .nav-links,
    .watch-btn {

        display: none;

    }


    .hamburger {

        display: flex;

    }


    .hero h1 {

        letter-spacing: -2px;

    }



    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }


    .primary-btn,
    .secondary-btn {

        width: 220px;

    }


}

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


.mobile-menu {


    position: fixed;

    top: 0;

    right: -100%;

    width: 320px;

    height: 100vh;

    background: var(--surface);

    padding: 120px 40px;

    transition: .4s ease;

    z-index: 2000;


}



.mobile-menu.active {


    right: 0;


}



.mobile-menu ul {


    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 2rem;


}



.mobile-menu a {


    font-family: "Space Grotesk";

    font-size: 2rem;

    font-weight: 600;


}



.mobile-watch-btn {


    margin-top: 3rem;

    width: 100%;

    padding: 1rem;

    border: none;

    border-radius: 999px;

    background: var(--primary);

    color: white;

    font-size: 1rem;

}



/* OVERLAY */


.menu-overlay {


    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .6);

    opacity: 0;

    pointer-events: none;

    transition: .3s ease;

    z-index: 1500;


}



.menu-overlay.active {


    opacity: 1;

    pointer-events: auto;


}




/* HAMBURGER ANIMATION */


.hamburger {

    z-index: 3000;

}



.hamburger.active span:nth-child(1) {

    transform:

        rotate(45deg) translate(6px, 6px);

}



.hamburger.active span:nth-child(2) {

    opacity: 0;

}



.hamburger.active span:nth-child(3) {

    transform:

        rotate(-45deg) translate(6px, -6px);

}



.hamburger span {


    transition: .3s ease;


}

body.menu-open {

    overflow: hidden;

}

/* =========================
FEATURED EPISODE
========================= */


.featured-episode {


    padding: 120px 0;


}




.featured-grid {


    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5rem;

    align-items: center;


}




.video-thumbnail {


    position: relative;

    border-radius: 24px;

    overflow: hidden;

    aspect-ratio: 16/9;

    background: var(--surface);


}



.video-thumbnail img {


    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s ease;


}



.video-card:hover img {


    transform: scale(1.05);


}




.play-button {


    position: absolute;

    top: 50%;

    left: 50%;

    transform:

        translate(-50%, -50%);


    width: 90px;

    height: 90px;

    border-radius: 50%;


    display: flex;

    align-items: center;

    justify-content: center;


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


    color: #08090A;


    font-size: 2rem;

    padding-left: 5px;


    transition: .3s ease;


}



.video-thumbnail:hover .play-button {


    transform:

        translate(-50%, -50%) scale(1.1);


}




.section-label {


    color: var(--secondary);

    letter-spacing: 3px;

    font-size: .8rem;

    font-weight: 700;

    margin-bottom: 1.5rem;


}



.episode-content h2 {


    font-family: "Space Grotesk";

    font-size:

        clamp(2rem, 4vw, 3.5rem);


    line-height: 1.1;

    letter-spacing: -1px;

    margin-bottom: 1.5rem;


}



.episode-content p {


    color: var(--muted);

    font-size: 1.1rem;


}




.episode-meta {


    display: flex;

    gap: 1.5rem;

    margin: 2rem 0;

    color: var(--muted);

    font-size: .9rem;


}




@media(max-width:900px) {


    .featured-grid {


        grid-template-columns: 1fr;

        gap: 3rem;


    }



}

/* =========================
LATEST EPISODES
========================= */


.episodes {


    padding: 120px 0;


}




.section-header {


    max-width: 700px;

    margin-bottom: 4rem;


}



.section-header h2 {


    font-family: "Space Grotesk";

    font-size:
        clamp(2.5rem, 5vw, 4rem);

    line-height: 1.1;

    margin-bottom: 1rem;


}



.section-header p:last-child {


    color: var(--muted);

    font-size: 1.1rem;


}




.episode-grid {


    display: grid;

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

    gap: 2rem;


}




.episode-card {


    background: var(--surface);

    border:

        1px solid var(--border);


    border-radius: 24px;

    overflow: hidden;

    transition: .4s ease;


}



.episode-card:hover {


    transform: translateY(-10px);

    box-shadow:

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


}




.episode-image {


    aspect-ratio: 16/9;

    overflow: hidden;


}



.episode-image img {


    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s ease;


}



.episode-card:hover img {


    transform: scale(1.08);


}




.episode-info {


    padding: 2rem;


}



.episode-info span {


    color: var(--secondary);

    font-size: .8rem;

    letter-spacing: 2px;

    font-weight: 700;


}



.episode-info h3 {


    font-family: "Space Grotesk";

    font-size: 1.5rem;

    line-height: 1.25;

    margin: 1rem 0;


}



.episode-info p {


    color: var(--muted);

    margin-bottom: 1.5rem;


}



.episode-info a {


    color: white;

    font-weight: 600;


}



.episode-info a:hover {


    color: var(--primary);


}




@media(max-width:1000px) {


    .episode-grid {


        grid-template-columns: 1fr 1fr;


    }


}




@media(max-width:650px) {


    .episode-grid {


        grid-template-columns: 1fr;


    }


}

/* =========================
ABOUT SECTION
========================= */


.about {


    padding: 120px 0;


}




.about-grid {


    display: grid;

    grid-template-columns:

        1fr 1fr;


    gap: 5rem;

    align-items: center;


}





.about-image {


    position: relative;


}



.about-image img {


    width: 100%;

    aspect-ratio: 4/5;

    object-fit: cover;

    border-radius: 30px;


}





.about-image::after {


    content: "";

    position: absolute;

    width: 200px;

    height: 200px;

    background: var(--primary);

    filter: blur(100px);

    opacity: .3;

    bottom: -50px;

    left: -50px;

    z-index: -1;


}





.about-content h2 {


    font-family: "Space Grotesk";

    font-size:

        clamp(2.5rem, 5vw, 4rem);


    line-height: 1.1;

    letter-spacing: -2px;

    margin-bottom: 2rem;


}





.about-content p {


    color: var(--muted);

    font-size: 1.1rem;

    margin-bottom: 1.5rem;


}





.about-content .primary-btn {


    margin-top: 1rem;


}





@media(max-width:900px) {


    .about-grid {


        grid-template-columns: 1fr;

        gap: 3rem;


    }



    .about-image {


        max-width: 500px;

        margin: auto;


    }


}

/* =========================
TOPICS SECTION
========================= */


.topics {

    padding: 120px 0;

}



.topics-grid {

    display: grid;

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

    gap: 1.5rem;

}




.topic-card {


    background: var(--surface);

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

    border-radius: 24px;

    padding: 2.5rem 2rem;

    transition: .4s ease;


}



.topic-card:hover {


    transform: translateY(-10px);

    border-color: var(--primary);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, .3);


}



.topic-icon {


    font-size: 2.5rem;

    margin-bottom: 1.5rem;


}



.topic-card h3 {


    font-family: "Space Grotesk";

    font-size: 1.5rem;

    margin-bottom: 1rem;


}



.topic-card p {


    color: var(--muted);


}




@media(max-width:1000px) {


    .topics-grid {

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

    }


}



@media(max-width:600px) {


    .topics-grid {

        grid-template-columns: 1fr;

    }


}

/* =========================
WHY UNCAGED SECTION
========================= */


.why-uncaged {


    position: relative;

    padding: 160px 0;

    overflow: hidden;

    text-align: center;


}



.why-glow {


    position: absolute;

    width: 700px;

    height: 700px;

    background: var(--primary);

    filter: blur(160px);

    opacity: .18;

    top: 50%;

    left: 50%;

    transform:

        translate(-50%, -50%);


}




.why-content {


    position: relative;

    max-width: 900px;

    margin: auto;


}



.why-content h2 {


    font-family: "Space Grotesk";

    font-size:

        clamp(3rem, 7vw, 6rem);


    line-height: 1;

    letter-spacing: -3px;

    margin-bottom: 3rem;


}




.why-content h2 span {


    display: block;

    color: var(--primary);


}




.why-content p {


    color: var(--muted);

    font-size: 1.2rem;

    max-width: 750px;

    margin:

        0 auto 1.5rem;


}




.why-content .primary-btn {


    margin-top: 2rem;


}

/* =========================
SOCIAL SECTION
========================= */


.social-section {

    padding: 120px 0;

}



.social-card {

    text-align: center;

    background:

        linear-gradient(135deg,
            #15161a,
            #0b0b0d);


    border:

        1px solid var(--border);


    border-radius: 32px;

    padding: 5rem 2rem;


}



.social-card h2 {


    font-family: "Space Grotesk";

    font-size:
        clamp(2.8rem, 6vw, 5rem);

    line-height: 1;

    letter-spacing: -2px;

    margin-bottom: 2rem;


}



.social-card h2 span {


    display: block;

    color: var(--primary);


}



.social-card>p {


    color: var(--muted);

    max-width: 650px;

    margin: 0 auto 3rem;

    font-size: 1.15rem;


}





.social-links {


    display: flex;

    justify-content: center;

    gap: 1.5rem;

    flex-wrap: wrap;


}



.social-item {


    display: flex;

    align-items: center;

    gap: 1rem;


    min-width: 230px;

    padding: 1.2rem 1.5rem;


    background: var(--surface);


    border:

        1px solid var(--border);


    border-radius: 18px;


    transition: .35s ease;


}



.social-item:hover {


    transform: translateY(-8px);

    border-color: var(--primary);


}



.social-icon {


    width: 50px;

    height: 50px;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 50%;


    background: var(--primary);

    color: white;


    font-size: 1.4rem;


}



.social-item strong {


    display: block;

    font-family: "Space Grotesk";

    font-size: 1.1rem;


}



.social-item small {


    color: var(--muted);


}



@media(max-width:600px) {


    .social-item {

        width: 100%;

    }


}

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


.footer {


    padding-top: 100px;

    border-top:

        1px solid var(--border);


}



.footer-grid {


    display: grid;

    grid-template-columns:

        2fr 1fr 1fr;


    gap: 4rem;

    padding-bottom: 4rem;


}



.footer-brand .logo {


    display: inline-block;

    margin-bottom: 1.5rem;


}



.footer-brand p {


    color: var(--muted);

    max-width: 400px;


}



.footer-links {


    display: flex;

    flex-direction: column;

    gap: 1rem;


}



.footer-links h3 {


    font-family: "Space Grotesk";

    margin-bottom: .5rem;


}



.footer-links a {


    color: var(--muted);

    transition: .3s ease;


}



.footer-links a:hover {


    color: white;


}



.footer-bottom {


    border-top:

        1px solid var(--border);


    padding: 2rem 0;

    color: var(--muted);

    font-size: .9rem;


}




@media(max-width:800px) {


    .footer-grid {


        grid-template-columns: 1fr;

        gap: 2.5rem;


    }


}

/* =========================
SOCIAL BRAND COLORS
========================= */


.youtube-icon {

    background: #ff0000;

}



.spotify-icon {

    background: #1DB954;

}



.instagram-icon {

    background:
        linear-gradient(135deg,
            #feda75,
            #d62976,
            #4f5bd5);

}



.social-icon svg {

    width: 24px;

    height: 24px;

}