:root {
    /* --- NEW COLOR PALETTE --- */

    /* Brand Teal */
    --color-brand-teal-50: #e0f2f1;
    --color-brand-teal-100: #b2dfdb;
    --color-brand-teal-200: #80cbc4;
    --color-brand-teal-300: #4db6ac;
    --color-brand-teal-400: #26a69a;
    --color-brand-teal-500: #009688;
    --color-brand-teal-600: #00897b;
    --color-brand-teal-700: #00796b;
    --color-brand-teal-800: #00695c;
    --color-brand-teal-900: #004d40;
    --color-brand-teal-950: #00251a;

    /* Champagne Mist */
    --color-champagne-mist-50: #fbf6e9;
    --color-champagne-mist-100: #f7edd4;
    --color-champagne-mist-200: #f0daa8;
    --color-champagne-mist-300: #e8c87d;
    --color-champagne-mist-400: #e0b652;
    --color-champagne-mist-500: #d9a326;
    --color-champagne-mist-600: #ad831f;
    --color-champagne-mist-700: #826217;
    --color-champagne-mist-800: #57410f;
    --color-champagne-mist-900: #2b2108;
    --color-champagne-mist-950: #1e1705;

    /* Ink Black */
    --color-ink-black-50: #edeff7;
    --color-ink-black-100: #dcdfef;
    --color-ink-black-200: #b9bedf;
    --color-ink-black-300: #959ed0;
    --color-ink-black-400: #727ec0;
    --color-ink-black-500: #4f5eb0;
    --color-ink-black-600: #3f4b8d;
    --color-ink-black-700: #2f386a;
    --color-ink-black-800: #202546;
    --color-ink-black-900: #101323;
    --color-ink-black-950: #0b0d19;

    /* --- THEME MAPPINGS (Dark Tech) --- */
    --bg-body: var(--color-ink-black-950);
    --bg-surface: var(--color-ink-black-900);
    --bg-surface-hover: var(--color-ink-black-800);

    --primary: var(--color-brand-teal-500);
    --primary-hover: var(--color-brand-teal-400);
    --accent: var(--color-champagne-mist-400);

    --text-main: var(--color-ink-black-50);
    --text-muted: var(--color-ink-black-300);
    --text-inverse: var(--color-ink-black-950);

    --border-subtle: rgba(255, 255, 255, 0.08);
    /* Subtle border for dark mode */
    --glass-bg: rgba(11, 13, 25, 0.7);

    /* Typography */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Outfit', sans-serif;

    /* Spacing & Layout */
    --container-width: 1200px;
    --section-padding: 6rem 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    /* More angular for tech feel */
    --radius-lg: 16px;

    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    --glow-primary: 0 0 20px rgba(0, 150, 136, 0.3);

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-color: var(--border-subtle);
}

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h1 {
    color: var(--text-main);
}

h2 {
    color: var(--text-main);
}

h3 {
    color: var(--accent);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: var(--section-padding);
}

.text-center {
    text-align: center;
}

.section-tag {
    display: inline-block;
    font-family: var(--font-heading);
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    background: rgba(0, 150, 136, 0.1);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.9rem 2rem;
    border-radius: var(--radius-sm);
    /* More technical feel */
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    transition: var(--transition);
    letter-spacing: 0.02em;
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--text-inverse);
    /* box-shadow: var(--glow-primary); */
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 150, 136, 0.5);
}

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

.btn-secondary:hover {
    background-color: var(--primary);
    color: var(--text-inverse);
    box-shadow: var(--glow-primary);
}

/* Navbar - Modified for Sticky/Glass Effect */
.navbar {
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(11, 13, 25, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    padding: 0.8rem 0;
    background: rgba(11, 13, 25, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 80px;
    width: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.nav-links a:not(.btn) {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-links a:not(.btn):hover {
    color: var(--primary);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--text-main);
    transition: var(--transition);
}

/* Hero Section */
.hero {
    padding-top: 10rem;
    padding-bottom: 6rem;
    position: relative;
    overflow: hidden;
}

/* Decorative Background Elements */
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 150, 136, 0.15) 0%, rgba(11, 13, 25, 0) 70%);
    z-index: -1;
    filter: blur(60px);
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 5rem;
    text-align: left;
}

.hero-text {
    flex: 1;
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

/* Tech Frame for Hero Image */
.hero-image::after {
    content: '';
    position: absolute;
    inset: -15px;
    border: 1px solid var(--primary);
    z-index: -1;
    opacity: 0.3;
    transform: rotate(3deg);
}

.brand-img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    filter: brightness(0.9) contrast(1.1);
    /* Slight moodiness */
    transition: var(--transition);
    max-height: 500px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--border-subtle);

    /* Parallax Initial State (JS will override this) */
    transform-origin: center center;
    will-change: transform;
}

.brand-img:hover {
    filter: brightness(1);
    /* Hover effect disabled if JS is controlling parallax to avoid conflict,
       or we can rely on !important in JS if needed, but standard CSS hover
       might fight with parallax transform. Ideally, parallax uses a wrapper
       or we just accept the slight conflict. For now, keeping it but knowing
       it might be jumpy during scroll. */
    transform: scale(1.02);
    box-shadow: var(--glow-primary);
}

.hero-text {
    /* Parallax Initial State */
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
    /* Fast transition for scroll sync */
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 2rem;
    color: var(--text-main);
    line-height: 1.05;
}

.hero h1 span {
    color: var(--accent);
    /* Highlight keywords if needed */
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 520px;
    font-weight: 300;
}

/* Episodes Section */
.episodes-section {
    background: var(--bg-body);
    /* Or slightly different shade if desired */
    /* Geometric pattern overlay could go here */
}

.episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.episode-card {
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.episode-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--glow-primary);
}

.episode-content {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.episode-meta {
    font-size: 0.8rem;
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.episode-date {
    background: rgba(0, 150, 136, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
}

.episode-duration {
    color: var(--text-muted);
}

.episode-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.episode-card:hover .episode-title a {
    color: var(--primary);
}

.read-more-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.5rem;
    text-align: left;
    display: inline-block;
    transition: var(--transition);
}

.read-more-btn:hover {
    color: var(--text-main);
}

/* Takeaways in Card */
.takeaways-preview {
    margin-bottom: 2rem;
    flex-grow: 1;
    border-left: 2px solid var(--border-subtle);
    padding-left: 1rem;
}

.takeaways-list li {
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    line-height: 1.5;
    padding-left: 0;
    color: var(--text-muted);
}

.takeaways-list li::before {
    display: none;
    /* Removing the checkmark for cleaner look, or change color */
}

/* Episode Footer */
.episode-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 1.5rem 2.5rem;
    background: rgba(0, 0, 0, 0.2);
    margin-top: auto;
}

.listen-link {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.listen-link span {
    color: var(--primary);
    font-size: 1.2rem;
}

.listen-link:hover {
    color: var(--primary);
}

/* About Section */
.about-section {
    background: var(--bg-surface);
    position: relative;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.about-content h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
}

.about-content p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.about-content strong {
    color: var(--text-main);
}

.about-stat-card {
    background-color: var(--bg-body);
    padding: 4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    position: relative;
}

.about-stat-card::before {
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.stat-number {
    color: var(--text-main);
    font-family: var(--font-heading);
}

.stat-label {
    color: var(--primary);
}

/* Subscribe Section */
.subscribe-card {
    background: linear-gradient(135deg, var(--color-ink-black-800) 0%, var(--color-ink-black-900) 100%);
    border: 1px solid var(--primary);
    padding: 5rem 2rem;
    border-radius: var(--radius-sm);
    position: relative;
}

.subscribe-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(circle at top right, rgba(0, 150, 136, 0.1), transparent 60%);
    pointer-events: none;
}

.subscribe-card h2 {
    color: var(--text-main);
}

.subscribe-form input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    border-radius: var(--radius-sm);
}

.subscribe-form input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.1);
}

.subscribe-form button {
    background-color: var(--primary);
    color: var(--text-inverse);
    border-radius: var(--radius-sm);
}

.social-links a {
    color: var(--text-muted);
}

.social-links a:hover {
    color: var(--primary);
}

/* Footer */
.footer {
    background-color: var(--bg-body);
    border-top: 1px solid var(--border-subtle);
    padding: 4rem 0;
}

.footer-brand h3 {
    color: var(--text-main);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.footer-links a {
    color: var(--text-muted);
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-bottom {
    color: var(--text-muted);
    opacity: 0.6;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-container {
    background: var(--bg-surface);
    width: 90%;
    /* Responsive width */
    max-width: 650px;
    /* Reduced from 800px for a tighter look */
    max-height: 90vh;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow-y: auto;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-content {
    padding: 2.5rem;
    /* Slightly reduced padding */
    color: var(--text-main);
}

.episodes-grid {
    display: grid;
    /* 
       TEACHING MOMENT: 
       To adjust card width, change the 'minmax' value below.
       - larger px (e.g. 400px) = wider cards, fewer per row.
       - smaller px (e.g. 300px) = narrower cards, more per row.
    */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.modal-meta {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.modal-desc {
    color: var(--text-muted);
}

.modal-desc h4 {
    color: var(--accent);
    border-bottom: 2px solid var(--border-subtle);
    display: inline-block;
    padding-bottom: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;

    /* 
       TEACHING MOMENT: 
       To change the space *above* a section header (like "Key Timestamps"),
       adjust the 'margin-top' value below.
       - larger (e.g. 4rem) = more space
       - smaller (e.g. 1rem) = less space
    */
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.modal-desc ul {
    margin-top: 0;
    padding-top: 2.5rem;
    /* Using padding to force spacing preventing margin collapse */
    margin-bottom: 2rem;
    list-style-type: none;
    padding-left: 0;
}

.modal-desc li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.modal-desc strong {
    color: var(--text-main);
}

.modal-desc a {
    color: var(--primary);
}

/* Modal Button Spacing */
.modal-container .btn-primary {
    margin-top: 3rem;
    /* Increase this to move button down */
}

.modal-close {
    background: var(--bg-body);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

.modal-close:hover {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}

/* Loading State */
.spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
    background: var(--color-ink-black-700);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Fallback spacing for the "Red Line" gap */
p:not(.emoji-list-item)+.emoji-list-item {
    margin-top: 1.5rem !important;
}

.emoji-list-item {
    margin-bottom: 0.5rem;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column-reverse;
        gap: 3rem;
        /* Increase from 2rem to prevent overlap */
        padding-top: 6rem;
        /* Give more space */
    }

    .hero-text {
        width: 100%;
        text-align: center;
        /* Ensure it can overlap if pushed by JS parallax, or just stack nicely */
        position: relative;
        z-index: 2;
        /* Text on top */
    }

    .hero-image {
        width: 90%;
        margin-bottom: 2rem;
        /* Ensure image is behind text if they overlap via negative margin or transform */
        z-index: 1;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        /* Hidden by default, toggled by JS */
        background: rgba(11, 13, 25, 0.85);
        /* Restored for dropdown */
        border-bottom: 2px solid var(--primary);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* .navbar.scrolled {
        /* background: rgba(11, 13, 25, 0.85); */
    /* More transparency for mobile */
    /*} */
}

/* --- NEW FEATURES --- */

/* 1. Parallax / Scroll Animations */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Bento Grid Layout */
.bento-section {
    background: #000;
    /* Deep black as per inspiration */
    /* border-top: 1px solid var(--border-subtle); */
    /* Optional separator */
}

.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 350px;
        /* Fixed height for bento rows */
    }

    /* Span utilities */
    .col-span-2 {
        grid-column: span 2;
    }

    .row-span-2 {
        grid-row: span 2;
    }
}

.bento-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    /* Larger radius for bento feel */
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

.bento-card h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    z-index: 10;
    position: relative;
}

.bento-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    z-index: 10;
    position: relative;
    max-width: 90%;
}

/* Decorative Icons/Backgrounds for Bento */
.bento-icon-bg {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 15rem;
    /* Massive icon */
    opacity: 0.03;
    /* Very subtle */
    color: var(--primary);
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 0;
}

.bento-card:hover .bento-icon-bg {
    opacity: 0.08;
}

.bento-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bento-action {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    cursor: pointer;
}

.bento-action:hover {
    color: var(--text-main);
}

/* --- ORBIT CAROUSEL --- */
.orbit-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    /* Increased to fit wider cards */
    margin: 3rem auto 0;
    perspective: 1000px;
    height: 550px;
    /* Reduced height back to 550px (since cards will be shorter) */
    padding: 2rem 0;
    /* Add padding to prevent shadow clipping */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    /* Allow cards/shadows to extend beyond container */
}

.orbit-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.orbit-item {
    position: absolute;
    width: 400px;
    /* Wider card to fit content better vertically */
    height: auto;
    /* Removed max-height constraint to allow content to flow */
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
}

/* States */
.orbit-item.center {
    z-index: 10;
    transform: translateX(0) scale(1) rotateY(0deg);
    opacity: 1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border-color: var(--primary);
}

.orbit-item.left {
    z-index: 5;
    transform: translateX(-100%) scale(0.75) rotateY(15deg);
    /* Tighter overlap, smaller scale */
    opacity: 0.6;
    filter: blur(1px);
}

.orbit-item.right {
    z-index: 5;
    transform: translateX(100%) scale(0.75) rotateY(-15deg);
    opacity: 0.6;
    filter: blur(1px);
}

.orbit-item.far-left {
    z-index: 1;
    transform: translateX(-150%) scale(0.6);
    opacity: 0;
    pointer-events: none;
}

.orbit-item.far-right {
    z-index: 1;
    transform: translateX(150%) scale(0.6);
    opacity: 0;
    pointer-events: none;
}

/* Controls */
.orbit-controls {
    position: absolute;
    bottom: 20px;
    /* Keep it at the bottom */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 28rem;
    /* Customized for 400px center card */
    padding: 1rem;
    z-index: 20;
    pointer-events: none;
}

.orbit-btn {
    pointer-events: auto;
    background: rgba(11, 13, 25, 0.8);
    /* Darker semi-transparent background */
    border: 1px solid var(--primary);
    color: var(--primary);
    width: 50px;
    /* Slightly larger */
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1.5rem;
    backdrop-filter: blur(4px);
}

.orbit-btn:hover {
    background: var(--primary);
    color: var(--text-inverse);
    transform: scale(1.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .orbit-container {
        height: 500px;
        /* Reduced to 500px as requested */
        perspective: 1000px;
        /* Restore perspective */
        margin-top: 6rem;
        /* Push down to prevent covering 'Latest Episodes' header */
    }

    .orbit-track {
        /* Restore 3D center alignment */
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: visible;
        /* Allow 3D overflow */
        padding: 0;
        width: 100%;
    }

    .orbit-item {
        position: absolute;
        /* Restore absolute positioning */
        width: 85%;
        /* Back to 85% as requested */
        min-width: auto;
        scroll-snap-align: none;
        margin: 0;
        left: auto;
        right: auto;
        /* Transitions will handle the rest */
    }

    /* Mobile-specific spacing */
    .orbit-item.left {
        transform: translateX(-110%) scale(0.8) rotateY(10deg);
        /* Push further out */
    }

    .orbit-item.right {
        transform: translateX(110%) scale(0.8) rotateY(-10deg);
        /* Push further out */
    }

    .orbit-controls {
        display: none;
        /* Still hide buttons, swipe is better */
    }
}