*,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    :root {
        --platinum: #f8f9fa;
        --jet: #1a1a1a;
        --eerie-black: #0a0a0a;
        --white: #ffffff;
        --brand-accent: #00ffe7;
        --gray-100: #f1f3f4;
        --gray-200: #e8eaed;
        --gray-300: #dadce0;
        --gray-400: #9aa0a6;
        --gray-500: #5f6368;
        --gray-600: #3c4043;
        --gray-700: #202124;
        --gray-800: #171717;
        --gray-900: #0f0f0f;

        /* Hero Background System */
        --hero-bg-image: url('https://idd.gg/img/idd_header_fade.jpg');
        /* Default image */
        --hero-overlay-color: #000000;
        --hero-overlay-opacity: 0.7;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background: var(--eerie-black);
        color: var(--platinum);
        min-height: 100vh;
        font-size: 1rem;
        letter-spacing: -0.01em;
        line-height: 1.6;
        font-weight: 400;
    }

    /* Swiss Design Grid System */
    .swiss-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .swiss-container-wide {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Swiss Grid - 12 column system */
    .swiss-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.5rem;
    }

    .swiss-col-1 {
        grid-column: span 1;
    }

    .swiss-col-2 {
        grid-column: span 2;
    }

    .swiss-col-3 {
        grid-column: span 3;
    }

    .swiss-col-4 {
        grid-column: span 4;
    }

    .swiss-col-6 {
        grid-column: span 6;
    }

    .swiss-col-8 {
        grid-column: span 8;
    }

    .swiss-col-12 {
        grid-column: span 12;
    }

    /* Professional Swiss spacing system - based on 8px grid */
    .swiss-space-xs {
        margin-bottom: 0.5rem;
    }

    /* Responsive grid columns for md (medium) breakpoint - 768px and up */
    @media (min-width: 768px) {
        .md\:swiss-col-6 {
            grid-column: span 6;
        }
    }

    /* Responsive grid columns for lg (large) breakpoint - 1024px and up */
    @media (min-width: 1024px) {
        .lg\:swiss-col-4 {
            grid-column: span 4;
        }
    }

    /* 8px */
    .swiss-space-sm {
        margin-bottom: 1rem;
    }

    /* 16px */
    .swiss-space-md {
        margin-bottom: 2rem;
    }

    /* 32px */
    .swiss-space-lg {
        margin-bottom: 3rem;
    }

    /* 48px */
    .swiss-space-xl {
        margin-bottom: 4rem;
    }

    /* 64px */
    .swiss-space-2xl {
        margin-bottom: 6rem;
    }

    /* 96px */
    .swiss-space-3xl {
        margin-bottom: 8rem;
    }

    /* 128px */
    .swiss-space-4xl {
        margin-bottom: 10rem;
    }

    /* 160px */

    /* Balanced section spacing */
    .section-spacing {
        padding: 3rem 0;
    }

    .section-spacing-lg {
        padding: 4rem 0;
    }

    .section-spacing-xl {
        padding: 5rem 0;
    }

    .section-spacing-sm {
        padding: 2rem 0;
    }

    /* Balanced vertical rhythm */
    .vertical-rhythm>*+* {
        margin-top: 1.25rem;
    }

    .vertical-rhythm-sm>*+* {
        margin-top: 0.75rem;
    }

    .vertical-rhythm-lg>*+* {
        margin-top: 1.5rem;
    }

    /* Professional enhancements */
    .professional-shadow {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .professional-glow {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05);
    }

    .professional-border {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(26, 26, 26, 0.8);
        /*backdrop-filter: blur(20px);*/
    }

    /* Sophisticated animations inspired by bont.academy */
    .professional-hover {
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .professional-hover:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    }

    /* Micro-interactions */
    .micro-interaction {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Sophisticated fade-in animations */
    .fade-in-up {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

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

    /* Navbar fade-only animation (no slide) */
    .navbar-fade {
        opacity: 0;
        transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .navbar-fade.visible {
        opacity: 1;
    }

    /* Staggered animations */
    .stagger-1 {
        transition-delay: 0.1s;
    }

    .stagger-2 {
        transition-delay: 0.2s;
    }

    .stagger-3 {
        transition-delay: 0.3s;
    }

    .stagger-4 {
        transition-delay: 0.4s;
    }

    /* Hero Visual System */
    .hero-visual-system {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .hero-visual-container {
        position: absolute;
        top: -120px;
        /* Pull up under nav */
        left: 0;
        right: 0;
        height: 1000px;
        z-index: -1;
        pointer-events: none;
    }

    .hero-visual-image {
        position: absolute;
        inset: 0;
        background-image: var(--hero-bg-image);
        background-size: cover;
        background-position: center 20%;
        background-repeat: no-repeat;
        mask-image: linear-gradient(to bottom,
                black 0%,
                black 20%,
                rgba(0, 0, 0, 0.9) 35%,
                rgba(0, 0, 0, 0.6) 50%,
                rgba(0, 0, 0, 0.3) 65%,
                transparent 80%);
        -webkit-mask-image: linear-gradient(to bottom,
                black 0%,
                black 20%,
                rgba(0, 0, 0, 0.9) 35%,
                rgba(0, 0, 0, 0.6) 50%,
                rgba(0, 0, 0, 0.3) 65%,
                transparent 80%);
    }

    .hero-visual-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.7) 0%,
                rgba(0, 0, 0, 0.7) 30%,
                rgba(5, 5, 5, 0.7) 50%,
                rgba(10, 10, 10, 0.6) 70%,
                var(--eerie-black) 90%);
    }

    .hero-content-layer {
        position: relative;
        z-index: 1;
    }

    /* Smooth scroll reveal */
    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Enhanced button animations */
    .btn-enhanced {
        position: relative;
        overflow: hidden;
    }

    .btn-enhanced::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s;
    }

    .btn-enhanced:hover::before {
        left: 100%;
    }

    /* Floating animation */
    .float {
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    /* Pulse animation */
    .pulse {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }
    }

    @media (min-width: 640px) {
        .swiss-container {
            padding-left: 2rem;
            padding-right: 2rem;
        }

        .swiss-container-wide {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }

    @media (min-width: 1024px) {
        .swiss-container {
            padding-left: 3rem;
            padding-right: 3rem;
        }

        .swiss-container-wide {
            padding-left: 3rem;
            padding-right: 3rem;
        }
    }

    /* Skip link */
    .skip-link {
        position: absolute;
        left: -999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
        background: var(--white);
        color: var(--eerie-black);
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        z-index: 1000;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
    }

    .skip-link:focus {
        left: 1rem;
        top: 1rem;
        width: auto;
        height: auto;
    }

    /* Modern navigation */
    .nav-link {
        color: var(--platinum);
        padding: 0.5rem 1rem;
        position: relative;
        background: none;
        border-radius: 0.75rem;
        font-weight: 500;
        font-size: 0.95rem;
        outline: none;
        border: none;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }

    .nav-link:focus-visible,
    .nav-link.active {
        background: rgba(255, 255, 255, 0.1);
        color: var(--white);
    }

    .nav-link:hover {
        color: var(--white);
        background: rgba(255, 255, 255, 0.08);
    }

    .logo-img {
        height: 2.5rem;
        max-width: 140px;
        background: none;
        border-radius: 0;
        display: block;
        padding: 0;
        margin: 0;
        box-shadow: none;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    }

    /* Modern hero section */
    .hero-gradient {
        background: #0a0a0a;
        position: relative;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .hero-content {
        background: rgba(17, 17, 17, 0.8);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1.5rem;
        position: relative;
        z-index: 1;
    }

    /* Hero Slider Styles */
    .hero-slider-container {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .hero-slider-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 600px;
        height: 85vh;
        max-height: 900px;
        justify-content: center;
    }

    .hero-slider {
        flex: 1;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

    .hero-track {
        display: flex;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        height: 100%;
    }

    .hero-slide {
        width: 100%;
        min-width: 100%;
        flex-shrink: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #0a0a0a;
        overflow: hidden;
    }


    .hero-slide-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 2rem;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
    }

    .hero-slide-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0.7));
        z-index: 1;
    }

    .hero-slide-text {
        position: absolute;
        bottom: 1.5rem;
        left: 1.5rem;
        z-index: 3;
        text-align: left;
        padding: 0;
        max-width: 600px;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .hero-slide-text-title {
        font-size: clamp(1.25rem, 3vw, 1.75rem);
        font-weight: 700;
        color: var(--white);
        margin: 0;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
        letter-spacing: -0.01em;
        line-height: 1.2;
    }

    .hero-slide-text-description {
        font-size: clamp(0.875rem, 2vw, 1rem);
        color: var(--gray-300);
        line-height: 1.5;
        margin: 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        max-width: 500px;
    }

    .hero-slide-text-author {
        font-size: clamp(0.75rem, 1.5vw, 0.875rem);
        color: var(--brand-accent);
        font-weight: 500;
        margin: 0;
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    }

    .hero-slide-text-author-link {
        color: var(--brand-accent);
        text-decoration: none;
        transition: all 0.3s ease;
        border-bottom: 1px solid transparent;
    }

    .hero-slide-text-author-link:hover {
        border-bottom-color: var(--brand-accent);
        opacity: 0.8;
    }

    /* Custom Animations Container */
    .hero-slide-animations {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 2;
        overflow: hidden;
    }

    /* Three.js Glass Container */
    .three-js-glass-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0.3;
    }

    .three-js-glass-container canvas {
        width: 100% !important;
        height: 100% !important;
    }

    /* Particle Animation */
    .particles {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: var(--brand-accent);
        border-radius: 50%;
        opacity: 0.3;
        animation: particleFloat 15s infinite ease-in-out;
    }

    @keyframes particleFloat {

        0%,
        100% {
            transform: translateY(0) translateX(0);
            opacity: 0.3;
        }

        50% {
            transform: translateY(-100px) translateX(50px);
            opacity: 0.6;
        }
    }

    /* Grid Lines Animation */
    .grid-lines {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image:
            linear-gradient(rgba(0, 255, 231, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 255, 231, 0.1) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: gridMove 20s linear infinite;
        opacity: 0.2;
    }

    @keyframes gridMove {
        0% {
            transform: translate(0, 0);
        }

        100% {
            transform: translate(50px, 50px);
        }
    }

    /* Code Rain Effect */
    .code-rain {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .code-column {
        position: absolute;
        top: -100%;
        color: var(--brand-accent);
        font-family: 'Courier New', monospace;
        font-size: 14px;
        opacity: 0.2;
        animation: codeFall linear infinite;
    }

    @keyframes codeFall {
        0% {
            transform: translateY(-100%);
            opacity: 0;
        }

        10% {
            opacity: 0.2;
        }

        90% {
            opacity: 0.2;
        }

        100% {
            transform: translateY(100vh);
            opacity: 0;
        }
    }

    /* Geometric Shapes */
    .geometric-shapes {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .geometric-shape {
        position: absolute;
        border: 2px solid var(--brand-accent);
        opacity: 0.1;
        animation: shapeFloat 12s infinite ease-in-out;
    }

    .geometric-shape.triangle {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 87px solid var(--brand-accent);
        background: transparent;
        border-style: solid;
    }

    .geometric-shape.circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: transparent;
    }

    @keyframes shapeFloat {

        0%,
        100% {
            transform: translate(0, 0) rotate(0deg);
        }

        33% {
            transform: translate(30px, -30px) rotate(120deg);
        }

        66% {
            transform: translate(-30px, 30px) rotate(240deg);
        }
    }

    /* Gradient Orbs */
    .gradient-orbs {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .gradient-orb {
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.15;
        animation: orbMove 25s infinite ease-in-out;
    }

    .gradient-orb.orb-1 {
        background: radial-gradient(circle, var(--brand-accent), transparent);
        top: 10%;
        left: 10%;
    }

    .gradient-orb.orb-2 {
        background: radial-gradient(circle, rgba(168, 85, 247, 0.8), transparent);
        bottom: 10%;
        right: 10%;
        animation-delay: -10s;
    }

    @keyframes orbMove {

        0%,
        100% {
            transform: translate(0, 0) scale(1);
        }

        50% {
            transform: translate(50px, -50px) scale(1.2);
        }
    }

    .hero-slide-media {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .hero-slide-media.active {
        opacity: 1;
    }

    .hero-slide-media-item {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .hero-slide-media-item.active {
        opacity: 1;
        z-index: 1;
    }

    .hero-slide-media-item[style*="background"] {
        object-fit: none;
    }

    .hero-slide-work-icons {
        position: absolute;
        bottom: 1.5rem;
        right: 1.5rem;
        display: flex;
        gap: 0.5rem;
        z-index: 4;
    }

    .hero-work-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        cursor: pointer;
        opacity: 0.7;
    }

    .hero-work-icon:hover {
        background: rgba(0, 0, 0, 0.6);
        border-color: rgba(255, 255, 255, 0.2);
        opacity: 1;
        transform: translateY(-2px);
    }

    .hero-work-icon svg {
        width: 24px;
        height: 24px;
    }

    .hero-work-icon.twitch {
        background: rgba(145, 70, 255, 0.2);
        border-color: rgba(145, 70, 255, 0.4);
    }

    .hero-work-icon.youtube {
        background: rgba(255, 0, 0, 0.2);
        border-color: rgba(255, 0, 0, 0.4);
    }

    .hero-work-icon.instagram {
        background: rgba(228, 64, 95, 0.2);
        border-color: rgba(228, 64, 95, 0.4);
    }

    .hero-work-icon.twitter {
        background: rgba(29, 161, 242, 0.2);
        border-color: rgba(29, 161, 242, 0.4);
    }

    .hero-work-icon.tiktok {
        background: rgba(255, 0, 128, 0.2);
        border-color: rgba(255, 0, 128, 0.4);
    }

    .hero-work-icon.design {
        background: rgba(0, 255, 231, 0.2);
        border-color: rgba(0, 255, 231, 0.4);
    }

    .hero-work-icon.art {
        background: rgba(255, 107, 107, 0.2);
        border-color: rgba(255, 107, 107, 0.4);
    }

    .hero-work-icon.video {
        background: rgba(107, 70, 255, 0.2);
        border-color: rgba(107, 70, 255, 0.4);
    }

    .hero-work-icon.music {
        background: rgba(255, 159, 64, 0.2);
        border-color: rgba(255, 159, 64, 0.4);
    }

    .hero-work-icon.gaming {
        background: rgba(34, 197, 94, 0.2);
        border-color: rgba(34, 197, 94, 0.4);
    }

    .hero-arrow {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
        z-index: 10;
        backdrop-filter: blur(10px);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }

    .hero-arrow:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
        transform: translateY(-50%) scale(1.05);
    }

    .hero-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        transform: translateY(-50%);
    }

    .hero-arrow-left {
        left: 1rem;
    }

    .hero-arrow-right {
        right: 1rem;
    }

    .hero-indicators {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 0.75rem;
        z-index: 10;
    }

    .hero-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .hero-indicator.active {
        background: var(--brand-accent);
        transform: scale(1.2);
        width: 24px;
        border-radius: 4px;
    }

    .hero-indicator:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    @media (max-width: 880px) {
        .hero-slider-wrapper {
            min-height: 500px;
            height: 70vh;
        }

        .hero-arrow {
            width: 44px;
            height: 44px;
        }

        .hero-arrow-left {
            left: 0.5rem;
        }

        .hero-arrow-right {
            right: 0.5rem;
        }

        .hero-indicators {
            bottom: 1rem;
        }

        .hero-slide-text {
            bottom: 1rem;
            left: 1rem;
            max-width: calc(100% - 2rem);
        }

        .hero-slide-text-title {
            font-size: 1.25rem;
        }

        .hero-slide-text-description {
            font-size: 0.875rem;
            max-width: 100%;
        }

        .hero-slide-text-author {
            font-size: 0.75rem;
        }

        .hero-slide-work-icons {
            bottom: 1rem;
            right: 1rem;
        }

        .hero-work-icon {
            width: 32px;
            height: 32px;
        }
    }

    /* Modern buttons */
    .btn-primary,
    .btn-secondary {
        font-weight: 600;
        font-size: 1rem;
        padding: 0.75rem 2rem;
        border-radius: 0.75rem;
        cursor: pointer;
        outline: none;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border: 1px solid transparent;
        position: relative;
        overflow: hidden;
    }

    .btn-primary {
        background: var(--platinum);
        color: var(--eerie-black);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
        background: var(--white);
        color: var(--eerie-black);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
    }

    .btn-secondary {
        background: rgba(255, 255, 255, 0.05);
        color: var(--platinum);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .btn-secondary:hover,
    .btn-secondary:focus-visible {
        background: rgba(255, 255, 255, 0.1);
        color: var(--white);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
    }

    /* Modern tags */
    .tag {
        display: inline-flex;
        align-items: center;
        font-size: 0.875rem;
        font-weight: 500;
        background: linear-gradient(135deg, var(--brand-accent), #a2fff7);
        color: var(--eerie-black);
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
        letter-spacing: 0.025em;
        box-shadow: 0 2px 8px rgba(0, 255, 231, 0.2);
    }

    /* Modern cards */
    .card {
        background: rgba(26, 26, 26, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        padding: 1.5rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
    }

    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    }

    .card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .card:focus-within {
        border-color: var(--brand-accent);
        box-shadow: 0 0 0 3px rgba(0, 255, 231, 0.1);
    }

    /* YouTube section */
    .youtube-section {
        background: linear-gradient(135deg, rgba(17, 17, 17, 0.9) 0%, rgba(26, 26, 26, 0.9) 100%);
        border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        position: relative;
        overflow: hidden;
    }

    .youtube-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 20% 30%, rgba(255, 0, 0, 0.05) 0%, transparent 50%);
        pointer-events: none;
    }

    .video-card {
        background: rgba(26, 26, 26, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        backdrop-filter: blur(10px);
    }

    .video-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }

    .video-thumbnail {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        transition: transform 0.3s ease;
    }


    .video-info {
        padding: 1rem;
    }

    .video-title {
        font-weight: 600;
        font-size: 0.95rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .video-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
        color: var(--gray-400);
    }

    .channel-name {
        font-weight: 500;
        color: var(--brand-accent);
    }

    .video-date {
        color: var(--gray-500);
    }

    /* Scrollable container */
    .video-scroll-container {
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    .video-scroll-container::-webkit-scrollbar {
        height: 6px;
    }

    .video-scroll-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .video-scroll-container::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    .video-scroll-container::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* YouTube Slider Styles */
    .youtube-slider-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
    }

    .youtube-slider-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .youtube-slider {
        flex: 1;
        overflow: hidden;
        position: relative;
    }

    .youtube-track {
        display: flex;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .youtube-arrow {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .youtube-arrow:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    .youtube-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        transform: none;
    }

    .video-card {
        width: 100%;
        min-width: 100%;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .video-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .video-thumbnail {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        background: #1a1a1a;
    }

    .video-info {
        padding: 1rem;
    }

    .video-title {
        font-size: 1rem;
        font-weight: 600;
        color: white;
        margin-bottom: 0.5rem;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .video-meta {
        font-size: 0.875rem;
        color: #9ca3af;
        margin-bottom: 0.5rem;
    }

    .video-description {
        font-size: 0.75rem;
        color: #6b7280;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Loading states */
    .loading-skeleton {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
        border-radius: 0.5rem;
    }

    @keyframes loading {
        0% {
            background-position: 200% 0;
        }

        100% {
            background-position: -200% 0;
        }
    }

    /* Event boxes */
    .event-box {
        background: rgba(26, 26, 26, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        backdrop-filter: blur(10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .event-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    }

    .event-box:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .event-box.featured {
        background: linear-gradient(135deg, rgba(34, 34, 34, 0.9) 0%, rgba(52, 52, 52, 0.9) 100%);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    /* Animations */
    [data-fx="fadein"] {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-fx="fadein"].shown {
        opacity: 1;
        transform: translateY(0);
    }

    /* Footer */
    footer {
        color: var(--gray-400);
        background: rgba(10, 10, 10, 0.95);
        text-align: center;
        font-size: 0.9rem;
        /*padding: 3rem 0 2rem;*/
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
    }

    /* Faint dividers with fade-out effects */
    .fade-divider {
        position: relative;
        margin: 1.5rem 0;
        height: 1px;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.1) 20%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.1) 80%,
                transparent 100%);
    }

    .fade-divider-lg {
        margin: 2.5rem 0;
    }

    .fade-divider-sm {
        margin: 1rem 0;
    }

    /* Members Slider Styles */
    .members-slider-container {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
    }

    .members-slider-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1;
    }

    .members-slider {
        flex: 1;
        overflow: hidden;
        border-radius: 12px;
        width: 100%;
        position: relative;
    }

    .members-slider::before,
    .members-slider::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        z-index: 5;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Show left gradient only when not on first slide */
    .members-slider-container:not(.at-start):hover .members-slider::before {
        opacity: 1;
    }

    /* Show right gradient only when not on last slide */
    .members-slider-container:not(.at-end):hover .members-slider::after {
        opacity: 1;
    }

    .members-slider::before {
        left: 0;
        background: linear-gradient(to right, rgba(10, 10, 10, 0.9), transparent);
    }

    .members-slider::after {
        right: 0;
        background: linear-gradient(to left, rgba(10, 10, 10, 0.9), transparent);
    }

    .members-track {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        padding: 1px 0;
    }

    .member-card {
        width: 100%;
        min-width: 100%;
        flex-shrink: 0;
        padding: 3rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        backdrop-filter: blur(10px);
        transition: background-color 0.3s ease, border-color 0.3s ease;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        min-height: 120px;
    }

    .member-card-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex-shrink: 0;
        min-width: 120px;
        justify-content: center;
        gap: 0.5rem;
    }

    .member-card-separator {
        width: 1px;
        height: 80px;
        background: linear-gradient(to bottom,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 20%,
                rgba(255, 255, 255, 0.2) 80%,
                transparent 100%);
        flex-shrink: 0;
        align-self: center;
    }

    .member-card-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        flex: 1;
        min-width: 0;
    }

    .member-card-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        flex-shrink: 0;
        min-width: 200px;
        max-width: 300px;
        overflow: hidden;
    }

    .member-card .member-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .member-card .member-avatar img {
        display: block;
    }

    .member-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .member-card img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.2);
    }

    .member-card h3 {
        font-size: 1.25rem;
        font-weight: 600;
        color: white;
        margin: 0;
        line-height: 1.2;
        text-align: center;
    }

    .member-card .member-title {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-weight: 500;
        font-size: 0.75rem;
        letter-spacing: 0.025em;
        background: linear-gradient(135deg, var(--brand-accent), #a2fff7);
        color: var(--eerie-black);
        margin: 0;
        white-space: nowrap;
        display: inline-block;
        min-height: 1.5rem;
        line-height: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 255, 231, 0.2);
    }

    .member-card .member-description {
        color: #9ca3af;
        font-size: 0.875rem;
        line-height: 1.4;
        margin: 0;
        text-align: left;
    }

    .member-card .member-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        align-content: start;
        max-width: 100%;
        width: 100%;
    }

    /* Community Layout (Two-column) */
    .community-layout-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .community-layout {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 2.5rem;
        align-items: start;
    }

    /* Main Content: Community Updates (Blog) */
    .community-main {
        min-width: 0;
        /* Prevent overflow */
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .community-updates-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .community-update {
        background: rgba(26, 26, 26, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.875rem;
        padding: 1.75rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .community-update::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .community-update:hover {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(26, 26, 26, 0.95);
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .community-update:hover::before {
        opacity: 1;
    }

    .community-update-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .community-update-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--white);
        margin: 0;
        line-height: 1.3;
    }

    .community-update-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.75rem;
        color: var(--gray-400);
        flex-wrap: wrap;
    }

    .community-update-date {
        color: var(--gray-400);
    }

    .community-update-category {
        padding: 0.25rem 0.625rem;
        background: rgba(0, 255, 231, 0.1);
        border: 1px solid rgba(0, 255, 231, 0.3);
        border-radius: 9999px;
        color: var(--brand-accent);
        font-size: 0.6875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .community-update-pinned {
        padding: 0.25rem 0.625rem;
        background: rgba(168, 85, 247, 0.1);
        border: 1px solid rgba(168, 85, 247, 0.3);
        border-radius: 9999px;
        color: #c084fc;
        font-size: 0.6875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .community-update-content {
        color: var(--gray-300);
        font-size: 0.9375rem;
        line-height: 1.6;
        margin: 0;
    }

    .community-update-list {
        list-style: none;
        padding-left: 0;
        margin: 0.75rem 0;
    }

    .community-update-list li {
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 0.5rem;
        line-height: 1.6;
        color: var(--gray-300);
    }

    .community-update-list li::before {
        content: '\2022';
        position: absolute;
        left: 0;
        color: var(--brand-accent);
        font-weight: bold;
    }

    .community-update-content p {
        margin: 0.5rem 0;
        line-height: 1.6;
        color: var(--gray-300);
    }

    .community-update-content a {
        color: var(--brand-accent);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .community-update-content a:hover {
        color: var(--white);
    }

    .community-update-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .community-update-tag {
        padding: 0.125rem 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 9999px;
        color: var(--gray-400);
        font-size: 0.6875rem;
        font-weight: 500;
    }

    /* Sidebar: Extensible Sections */
    .community-sidebar {
        /* Mobile: Static position, stacks under content */
        position: static;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    @media (min-width: 768px) {
        .community-sidebar {
            position: sticky;
            top: 2rem;
            align-self: start;
        }
    }

    .sidebar-section {
        background: rgba(26, 26, 26, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.875rem;
        padding: 1.5rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sidebar-section:hover {
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    .sidebar-section-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--white);
        margin: 0 0 1.25rem 0;
        padding-bottom: 0.875rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .sidebar-section-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Game Servers List */
    .game-servers-list {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .game-server {
        padding: 1.125rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.625rem;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .game-server::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .game-server:hover {
        border-color: rgba(0, 255, 231, 0.35);
        background: rgba(0, 255, 231, 0.06);
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 255, 231, 0.15);
    }

    .game-server:hover::before {
        opacity: 1;
    }

    .game-server-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.625rem;
    }

    .game-server-name {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--white);
        margin: 0;
        flex: 1;
        min-width: 0;
    }

    .game-server-basic-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        font-size: 0.8125rem;
        color: var(--gray-400);
        margin-top: 0.5rem;
    }

    .game-server-game {
        color: var(--gray-400);
    }

    .game-server-players {
        color: var(--gray-300);
        font-weight: 500;
        white-space: nowrap;
    }

    .game-server-click-hint {
        font-size: 0.6875rem;
        color: var(--gray-500);
        margin-top: 0.625rem;
        text-align: center;
        font-style: italic;
        opacity: 0.7;
    }

    .game-server-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.625rem;
    }

    .game-server-name {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--white);
        margin: 0;
        flex: 1;
        min-width: 0;
    }

    /* Other Servers (Voice/Non-game) */
    .other-servers-list {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .other-server {
        padding: 1.125rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.625rem;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .other-server::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .other-server:hover {
        border-color: rgba(0, 255, 231, 0.35);
        background: rgba(0, 255, 231, 0.06);
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 255, 231, 0.15);
    }

    .other-server:hover::before {
        opacity: 1;
    }

    .other-server-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.625rem;
    }

    .other-server-name {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--white);
        margin: 0;
    }

    .other-server-info {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        font-size: 0.8125rem;
        color: var(--gray-400);
    }

    .other-server-connection {
        margin-top: 0.625rem;
        padding-top: 0.625rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .other-server-address {
        font-family: 'Courier New', monospace;
        font-size: 0.8125rem;
        color: var(--gray-300);
        word-break: break-all;
    }

    /* Sidebar Members Slider */
    .sidebar-members-slider-container {
        position: relative;
    }

    .sidebar-members-slider-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .sidebar-members-slider {
        flex: 1;
        overflow: visible;
        position: relative;
        min-height: fit-content;
    }

    .sidebar-members-track {
        display: flex;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        align-items: stretch;
    }

    .sidebar-member-card {
        min-width: 100%;
        flex-shrink: 0;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
        text-align: center;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        min-height: fit-content;
    }

    .sidebar-member-card:hover {
        border-color: rgba(0, 255, 231, 0.25);
        background: rgba(0, 255, 231, 0.05);
    }

    .sidebar-member-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin: 0 auto 0.5rem;
        border: 2px solid rgba(255, 255, 255, 0.1);
        object-fit: cover;
    }

    .sidebar-member-name {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--white);
        margin: 0 0 0.25rem 0;
    }

    .sidebar-member-title {
        font-size: 0.75rem;
        color: var(--gray-400);
        margin: 0 0 0.5rem 0;
    }

    .sidebar-member-description {
        font-size: 0.6875rem;
        color: var(--gray-400);
        line-height: 1.4;
        margin: 0 0 0.75rem 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .sidebar-member-links {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.375rem;
        justify-items: center;
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        width: 100%;
    }

    .sidebar-member-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.25rem;
        color: var(--gray-300);
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .sidebar-member-link svg {
        width: 12px;
        height: 12px;
    }

    .sidebar-member-link:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--white);
        transform: translateY(-1px);
    }

    .sidebar-member-link.twitch:hover {
        background: rgba(145, 70, 255, 0.2);
        border-color: rgba(145, 70, 255, 0.3);
        color: #9146ff;
    }

    .sidebar-member-link.youtube:hover {
        background: rgba(255, 0, 0, 0.2);
        border-color: rgba(255, 0, 0, 0.3);
        color: #ff0000;
    }

    .sidebar-member-link.instagram:hover {
        background: rgba(228, 64, 95, 0.2);
        border-color: rgba(228, 64, 95, 0.3);
        color: #e4405f;
    }

    .sidebar-member-link.tiktok:hover {
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 0, 80, 0.3);
        color: #ff0050;
    }

    .sidebar-member-link.twitter:hover {
        background: rgba(29, 161, 242, 0.2);
        border-color: rgba(29, 161, 242, 0.3);
        color: #1da1f2;
    }

    .sidebar-member-link.discord:hover {
        background: rgba(88, 101, 242, 0.2);
        border-color: rgba(88, 101, 242, 0.3);
        color: #5865f2;
    }

    .sidebar-member-link.kick:hover {
        background: rgba(0, 252, 42, 0.2);
        border-color: rgba(0, 252, 42, 0.3);
        color: #00fc2a;
    }

    .sidebar-slider-arrow {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.375rem;
        color: var(--gray-300);
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .sidebar-slider-arrow:hover {
        background: rgba(0, 255, 231, 0.1);
        border-color: rgba(0, 255, 231, 0.3);
        color: var(--brand-accent);
    }

    .sidebar-slider-arrow svg {
        width: 1rem;
        height: 1rem;
    }

    .sidebar-slider-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* Slider Arrows */
    .slider-arrow {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
    }

    .slider-arrow:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .slider-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .slider-arrow-left {
        left: 0;
    }

    .slider-arrow-right {
        right: 0;
    }



    /* Community Layout (Two-column) */
    .community-layout-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .community-layout {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    @media (min-width: 768px) {
        .community-layout {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 2.5rem;
            align-items: start;
        }
    }

    @media (min-width: 1024px) {
        .community-layout {
            grid-template-columns: 1fr 360px;
        }
    }

    /* Main Content: Community Updates (Blog) */
    .community-main {
        min-width: 0;
        /* Prevent overflow */
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .community-updates-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .community-update {
        background: rgba(26, 26, 26, 0.8);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.875rem;
        padding: 1.75rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .community-update::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .community-update:hover {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(26, 26, 26, 0.95);
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .community-update:hover::before {
        opacity: 1;
    }

    .community-update-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .community-update-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--white);
        margin: 0;
        line-height: 1.3;
    }

    .community-update-meta {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 0.75rem;
        color: var(--gray-400);
        flex-wrap: wrap;
    }

    .community-update-date {
        color: var(--gray-400);
    }

    .community-update-category {
        padding: 0.25rem 0.625rem;
        background: rgba(0, 255, 231, 0.1);
        border: 1px solid rgba(0, 255, 231, 0.3);
        border-radius: 9999px;
        color: var(--brand-accent);
        font-size: 0.6875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .community-update-pinned {
        padding: 0.25rem 0.625rem;
        background: rgba(168, 85, 247, 0.1);
        border: 1px solid rgba(168, 85, 247, 0.3);
        border-radius: 9999px;
        color: #c084fc;
        font-size: 0.6875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .community-update-content {
        color: var(--gray-300);
        font-size: 0.9375rem;
        line-height: 1.6;
        margin: 0;
    }

    .community-update-list {
        list-style: none;
        padding-left: 0;
        margin: 0.75rem 0;
    }

    .community-update-list li {
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 0.5rem;
        line-height: 1.6;
        color: var(--gray-300);
    }

    .community-update-list li::before {
        content: '\2022';
        position: absolute;
        left: 0;
        color: var(--brand-accent);
        font-weight: bold;
    }

    .community-update-content p {
        margin: 0.5rem 0;
        line-height: 1.6;
        color: var(--gray-300);
    }

    .community-update-content a {
        color: var(--brand-accent);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .community-update-content a:hover {
        color: var(--white);
    }

    .community-update-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .community-update-tag {
        padding: 0.125rem 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 9999px;
        color: var(--gray-400);
        font-size: 0.6875rem;
        font-weight: 500;
    }



    /* Game Servers List */
    .game-servers-list {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .game-server {
        padding: 1.125rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.625rem;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .game-server::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .game-server:hover {
        border-color: rgba(0, 255, 231, 0.35);
        background: rgba(0, 255, 231, 0.06);
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 255, 231, 0.15);
    }

    .game-server:hover::before {
        opacity: 1;
    }

    .game-server-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.625rem;
    }

    .game-server-name {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--white);
        margin: 0;
        flex: 1;
        min-width: 0;
    }

    .game-server-basic-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        font-size: 0.8125rem;
        color: var(--gray-400);
        margin-top: 0.5rem;
    }

    .game-server-game {
        color: var(--gray-400);
    }

    .game-server-players {
        color: var(--gray-300);
        font-weight: 500;
        white-space: nowrap;
    }

    .game-server-click-hint {
        font-size: 0.6875rem;
        color: var(--gray-500);
        margin-top: 0.625rem;
        text-align: center;
        font-style: italic;
        opacity: 0.7;
    }

    .game-server-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.625rem;
    }

    .game-server-name {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--white);
        margin: 0;
        flex: 1;
        min-width: 0;
    }


    /* Sidebar Members Slider */
    .sidebar-members-slider-container {
        position: relative;
    }

    .sidebar-members-slider-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .sidebar-members-slider {
        flex: 1;
        overflow: visible;
        position: relative;
        min-height: fit-content;
    }

    .sidebar-members-track {
        display: flex;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
        align-items: stretch;
    }

    .sidebar-member-card {
        min-width: 100%;
        flex-shrink: 0;
        padding: 1rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
        text-align: center;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        min-height: fit-content;
    }

    .sidebar-member-card:hover {
        border-color: rgba(0, 255, 231, 0.25);
        background: rgba(0, 255, 231, 0.05);
    }

    .sidebar-member-avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin: 0 auto 0.5rem;
        border: 2px solid rgba(255, 255, 255, 0.1);
        object-fit: cover;
    }

    .sidebar-member-name {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--white);
        margin: 0 0 0.25rem 0;
    }

    .sidebar-member-title {
        font-size: 0.75rem;
        color: var(--gray-400);
        margin: 0 0 0.5rem 0;
    }

    .sidebar-member-description {
        font-size: 0.6875rem;
        color: var(--gray-400);
        line-height: 1.4;
        margin: 0 0 0.75rem 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .sidebar-member-links {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.375rem;
        justify-items: center;
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        width: 100%;
    }

    .sidebar-member-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        padding: 0;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.25rem;
        color: var(--gray-300);
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .sidebar-member-link svg {
        width: 12px;
        height: 12px;
    }

    .sidebar-member-link:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--white);
        transform: translateY(-1px);
    }

    .sidebar-member-link.twitch:hover {
        background: rgba(145, 70, 255, 0.2);
        border-color: rgba(145, 70, 255, 0.3);
        color: #9146ff;
    }

    .sidebar-member-link.youtube:hover {
        background: rgba(255, 0, 0, 0.2);
        border-color: rgba(255, 0, 0, 0.3);
        color: #ff0000;
    }

    .sidebar-member-link.instagram:hover {
        background: rgba(228, 64, 95, 0.2);
        border-color: rgba(228, 64, 95, 0.3);
        color: #e4405f;
    }

    .sidebar-member-link.tiktok:hover {
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 0, 80, 0.3);
        color: #ff0050;
    }

    .sidebar-member-link.twitter:hover {
        background: rgba(29, 161, 242, 0.2);
        border-color: rgba(29, 161, 242, 0.3);
        color: #1da1f2;
    }

    .sidebar-member-link.discord:hover {
        background: rgba(88, 101, 242, 0.2);
        border-color: rgba(88, 101, 242, 0.3);
        color: #5865f2;
    }

    .sidebar-member-link.kick:hover {
        background: rgba(0, 252, 42, 0.2);
        border-color: rgba(0, 252, 42, 0.3);
        color: #00fc2a;
    }

    .sidebar-slider-arrow {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.375rem;
        color: var(--gray-300);
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .sidebar-slider-arrow:hover {
        background: rgba(0, 255, 231, 0.1);
        border-color: rgba(0, 255, 231, 0.3);
        color: var(--brand-accent);
    }

    .sidebar-slider-arrow svg {
        width: 1rem;
        height: 1rem;
    }

    .sidebar-slider-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* Sidebar Calendar */
    .sidebar-calendar-container {
        width: 100%;
    }

    .sidebar-calendar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }

    .sidebar-calendar-month-year {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--white);
    }

    .sidebar-calendar-nav {
        display: flex;
        gap: 0.25rem;
    }

    .sidebar-calendar-nav-btn {
        min-width: 1.75rem;
        height: 1.75rem;
        padding: 0 0.375rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.25rem;
        color: var(--gray-300);
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.6875rem;
        white-space: nowrap;
    }

    .sidebar-calendar-nav-btn:hover {
        background: rgba(0, 255, 231, 0.1);
        border-color: rgba(0, 255, 231, 0.3);
        color: var(--brand-accent);
    }

    .sidebar-calendar-weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0.25rem;
        margin-bottom: 0.5rem;
    }

    .sidebar-calendar-weekday {
        text-align: center;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.25rem;
    }

    .sidebar-calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0.25rem;
    }

    .sidebar-calendar-day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        color: var(--gray-300);
        cursor: pointer;
        border-radius: 0.25rem;
        transition: all 0.2s ease;
        position: relative;
    }

    .sidebar-calendar-day:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--white);
    }

    .sidebar-calendar-day.other-month {
        color: var(--gray-600);
    }

    .sidebar-calendar-day.today {
        background: rgba(0, 255, 231, 0.15);
        border: 1px solid rgba(0, 255, 231, 0.3);
        color: var(--brand-accent);
        font-weight: 600;
    }

    .sidebar-calendar-day.has-event {
        background: rgba(168, 85, 247, 0.15);
        border: 1px solid rgba(168, 85, 247, 0.3);
        color: #c084fc;
        font-weight: 600;
    }

    .sidebar-calendar-day.has-event::after {
        content: '';
        position: absolute;
        bottom: 0.125rem;
        left: 50%;
        transform: translateX(-50%);
        width: 0.25rem;
        height: 0.25rem;
        background: #c084fc;
        border-radius: 50%;
    }

    /* Today with events - combines today styling with event indicator */
    .sidebar-calendar-day.today.has-event {
        background: rgba(0, 255, 231, 0.2);
        border: 2px solid rgba(0, 255, 231, 0.5);
        box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.4), 0 0 8px rgba(0, 255, 231, 0.2);
        color: var(--brand-accent);
        font-weight: 700;
    }

    .sidebar-calendar-day.today.has-event::after {
        background: var(--brand-accent);
        width: 0.375rem;
        height: 0.375rem;
        box-shadow: 0 0 4px rgba(0, 255, 231, 0.6);
    }

    .sidebar-calendar-day.selected {
        background: var(--brand-accent);
        color: var(--eerie-black);
        font-weight: 700;
    }

    .sidebar-selected-date-events {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sidebar-date-event {
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .sidebar-date-event:last-child {
        margin-bottom: 0;
    }

    .sidebar-date-event-title {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--white);
        margin: 0 0 0.25rem 0;
    }

    .sidebar-date-event-time {
        font-size: 0.75rem;
        color: var(--gray-400);
        margin: 0;
    }

    .sidebar-date-event-organizer {
        font-size: 0.75rem;
        color: var(--brand-accent);
        margin: 0.25rem 0 0 0;
        font-weight: 500;
    }

    .sidebar-date-event-location {
        font-size: 0.75rem;
        color: var(--gray-400);
        margin: 0.25rem 0 0 0;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .sidebar-date-event-description {
        font-size: 0.75rem;
        color: var(--gray-300);
        margin: 0.25rem 0 0 0;
    }

    .sidebar-date-event-ongoing {
        display: inline-block;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--brand-accent);
        background: rgba(0, 255, 231, 0.15);
        border: 1px solid rgba(0, 255, 231, 0.3);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        margin-bottom: 0.5rem;
        animation: pulse-glow 2s ease-in-out infinite;
    }

    @keyframes pulse-glow {

        0%,
        100% {
            box-shadow: 0 0 4px rgba(0, 255, 231, 0.3);
        }

        50% {
            box-shadow: 0 0 8px rgba(0, 255, 231, 0.6);
        }
    }

    .sidebar-date-event.has-link {
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .sidebar-date-event.has-link:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
    }

    .sidebar-date-event-link {
        display: inline-block;
        font-size: 0.6875rem;
        color: var(--brand-accent);
        margin-top: 0.5rem;
        font-weight: 500;
    }

    .sidebar-date-event.ongoing {
        border-color: rgba(0, 255, 231, 0.4);
        background: rgba(0, 255, 231, 0.05);
    }

    /* Discord CTA Section */
    .discord-cta-card {
        background: linear-gradient(135deg, rgba(88, 101, 242, 0.15), rgba(88, 101, 242, 0.05));
        border: 1px solid rgba(88, 101, 242, 0.3);
        border-radius: 0.875rem;
        padding: 1.5rem;
        text-align: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        max-width: 900px;
        margin: 0 auto;
    }

    .discord-cta-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #5865f2, transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .discord-cta-card:hover {
        border-color: rgba(88, 101, 242, 0.5);
        box-shadow: 0 8px 24px rgba(88, 101, 242, 0.2);
        transform: translateY(-2px);
    }

    .discord-cta-card:hover::before {
        opacity: 1;
    }

    .discord-cta-content {
        position: relative;
        z-index: 1;
    }

    .discord-cta-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--white);
        margin: 0 0 0.75rem 0;
    }

    .discord-cta-description {
        font-size: 0.9375rem;
        color: var(--gray-300);
        margin: 0 0 1.25rem 0;
        line-height: 1.6;
    }

    .discord-cta-features {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        margin-bottom: 1.25rem;
        text-align: left;
    }

    .discord-cta-feature {
        padding: 0.875rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
    }

    .discord-cta-feature-text {
        flex: 1;
    }

    .discord-cta-feature-text strong {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 0.375rem;
    }

    .discord-cta-feature-text p {
        font-size: 0.8125rem;
        color: var(--gray-400);
        margin: 0;
        line-height: 1.5;
    }

    .discord-cta-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.875rem 1.75rem;
        background: #5865f2;
        border: 1px solid #5865f2;
        border-radius: 0.5rem;
        color: var(--white);
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
    }

    .discord-cta-button:hover {
        background: #4752c4;
        border-color: #4752c4;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(88, 101, 242, 0.4);
    }

    .discord-cta-button svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    @media (max-width: 880px) {
        .discord-cta-features {
            gap: 0.875rem;
        }

        .discord-cta-title {
            font-size: 1.5rem;
        }
    }

    .game-server-status {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.625rem;
        border-radius: 9999px;
        font-size: 0.6875rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .game-server-status.online {
        background: rgba(34, 197, 94, 0.15);
        border: 1px solid rgba(34, 197, 94, 0.3);
        color: #22c55e;
    }

    .game-server-status.offline {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #ef4444;
    }

    .game-server-status-indicator {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: currentColor;
    }

    .game-server-description {
        font-size: 0.8125rem;
        color: var(--gray-400);
        line-height: 1.5;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .game-server-info {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        font-size: 0.8125rem;
        color: var(--gray-400);
    }

    .game-server-info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .game-server-info-label {
        color: var(--gray-500);
    }

    .game-server-info-value {
        color: var(--gray-300);
        font-weight: 500;
    }

    .game-server-connection {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .game-server-ip {
        font-family: 'Courier New', monospace;
        font-size: 0.8125rem;
        color: var(--brand-accent);
        background: rgba(0, 255, 231, 0.05);
        border: 1px solid rgba(0, 255, 231, 0.15);
        border-radius: 0.375rem;
        padding: 0.5rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .game-server-ip:hover {
        background: rgba(0, 255, 231, 0.1);
        border-color: rgba(0, 255, 231, 0.25);
    }

    .game-server-links {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
    }

    .game-server-link {
        padding: 0.375rem 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.375rem;
        color: var(--gray-300);
        font-size: 0.75rem;
        text-decoration: none;
    }

    /* Server Detail Modal */
    .server-detail-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.2s ease;
        padding: 1rem;
        overflow-y: auto;
    }

    .server-detail-modal {
        background: var(--jet);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        max-width: 600px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .server-detail-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .server-detail-name {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--white);
        margin: 0;
    }

    .server-detail-close {
        background: transparent;
        border: none;
        color: var(--gray-400);
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s ease;
    }

    .server-detail-close:hover {
        color: var(--white);
    }

    .server-detail-content {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .server-detail-status-section {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .server-detail-description {
        font-size: 0.9375rem;
        color: var(--gray-300);
        line-height: 1.6;
        margin: 0;
    }

    .server-detail-info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .server-detail-info-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .server-detail-info-label {
        font-size: 0.75rem;
        color: var(--gray-500);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .server-detail-info-value {
        font-size: 0.9375rem;
        color: var(--gray-200);
        font-weight: 500;
    }

    .server-detail-connection {
        padding: 1rem;
        background: rgba(0, 255, 231, 0.05);
        border: 1px solid rgba(0, 255, 231, 0.15);
        border-radius: 0.5rem;
    }

    .server-detail-ip-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .server-detail-ip-label {
        font-size: 0.75rem;
        color: var(--gray-400);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .server-detail-ip {
        font-family: 'Courier New', monospace;
        font-size: 0.9375rem;
        color: var(--brand-accent);
        background: rgba(0, 255, 231, 0.1);
        border: 1px solid rgba(0, 255, 231, 0.2);
        border-radius: 0.375rem;
        padding: 0.75rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: all;
    }

    .server-detail-ip:hover {
        background: rgba(0, 255, 231, 0.15);
        border-color: rgba(0, 255, 231, 0.3);
    }

    .server-detail-section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .server-detail-section-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--white);
        margin: 0;
    }

    .server-detail-instructions {
        list-style: decimal;
        padding-left: 1.5rem;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .server-detail-instruction {
        font-size: 0.9375rem;
        color: var(--gray-300);
        line-height: 1.6;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .server-detail-instruction-text {
        display: block;
    }

    .server-detail-instruction strong {
        color: var(--white);
        font-weight: 600;
    }

    .server-detail-instruction code {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0.25rem;
        padding: 0.125rem 0.375rem;
        font-family: 'Courier New', monospace;
        font-size: 0.875em;
        color: var(--brand-accent);
    }

    .server-detail-link {
        color: var(--brand-accent);
        text-decoration: none;
        font-weight: 500;
        transition: opacity 0.2s ease;
    }

    .server-detail-link:hover {
        opacity: 0.8;
        text-decoration: underline;
    }

    .server-detail-notes {
        list-style: disc;
        padding-left: 1.5rem;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .server-detail-note {
        font-size: 0.9375rem;
        color: var(--gray-300);
        line-height: 1.6;
    }

    .server-detail-note strong {
        color: var(--white);
        font-weight: 600;
    }

    .server-detail-note code {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0.25rem;
        padding: 0.125rem 0.375rem;
        font-family: 'Courier New', monospace;
        font-size: 0.875em;
        color: var(--brand-accent);
    }

    .server-detail-links {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .server-detail-link-btn {
        padding: 0.625rem 1.25rem;
        background: rgba(0, 255, 231, 0.1);
        border: 1px solid rgba(0, 255, 231, 0.3);
        border-radius: 0.5rem;
        color: var(--brand-accent);
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease;
        text-align: center;
        transition: all 0.2s ease;
    }

    .game-server-link:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    /* Creatives/Creators/Gamers section - horizontal layout on desktop and 16:9 resolutions */
    @media (min-width: 768px) {
        .swiss-grid .swiss-col-12.md\:swiss-col-4 {
            flex: 1;
            min-width: 0;
        }
    }

    /* Force horizontal layout on 16:9 resolutions (1920x1080, 2560x1440, etc.) */
    @media (min-width: 1920px) {
        .swiss-grid .swiss-col-12.md\:swiss-col-4 {
            flex: 1 1 33.333%;
            width: 33.333%;
            max-width: 33.333%;
        }
    }

    .member-card .groups {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .member-groups {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .group-pill {
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        font-weight: 500;
        font-size: 0.625rem;
        letter-spacing: 0.025em;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .slider-arrow {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        z-index: 10;
        /* Ensure arrows are above other elements */
        flex-shrink: 0;
        /* Prevent stretching */
    }

    .slider-arrow:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    .slider-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        transform: none;
    }

    .slider-arrow:focus {
        outline: none;
        /* Remove default focus outline */
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
        /* Custom focus indicator */
    }

    .slider-indicators {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }

    .slider-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .slider-indicator.active {
        background: var(--brand-accent);
        transform: scale(1.2);
    }

    .slider-indicator:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    /* Member Cards Styles - Additional styling for enhanced appearance */

    .member-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    }

    .member-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 1rem;
        border: 3px solid rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.05);
    }

    .member-card:hover .member-avatar {
        border-color: var(--brand-accent);
        transform: scale(1.05);
    }

    .member-name {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 0.5rem;
    }

    .member-title {
        font-size: 0.875rem;
        color: var(--brand-accent);
        font-weight: 500;
        margin-bottom: 0.75rem;
    }

    .member-description {
        font-size: 0.875rem;
        color: var(--gray-400);
        line-height: 1.5;
        margin-bottom: 1rem;
    }


    .member-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 2rem;
        color: var(--platinum);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        width: 100%;
        justify-content: center;
        min-width: 0;
        white-space: nowrap;
    }

    .member-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s;
    }

    .member-link:hover::before {
        left: 100%;
    }

    .member-link:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--white);
        transform: translateY(-1px);
    }

    .member-link.twitch:hover {
        background: rgba(145, 70, 255, 0.2);
        border-color: rgba(145, 70, 255, 0.3);
    }

    .member-link.youtube:hover {
        background: rgba(255, 0, 0, 0.2);
        border-color: rgba(255, 0, 0, 0.3);
    }

    .member-link.discord:hover {
        background: rgba(88, 101, 242, 0.2);
        border-color: rgba(88, 101, 242, 0.3);
    }

    .member-link.twitter:hover {
        background: rgba(29, 161, 242, 0.2);
        border-color: rgba(29, 161, 242, 0.3);
    }

    .member-link.instagram:hover {
        background: rgba(228, 64, 95, 0.2);
        border-color: rgba(228, 64, 95, 0.3);
    }

    .member-link.tiktok:hover {
        background: rgba(255, 0, 128, 0.2);
        border-color: rgba(255, 0, 128, 0.3);
    }

    /* Swiss Typography System */
    .swiss-h1 {
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1.1;
        font-size: clamp(2.5rem, 5vw, 4rem);
    }


    .swiss-h3 {
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.3;
        font-size: clamp(1.5rem, 2.5vw, 2rem);
    }

    .swiss-h4 {
        font-weight: 500;
        letter-spacing: -0.01em;
        line-height: 1.4;
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .swiss-body {
        line-height: 1.6;
        font-size: 1.125rem;
        font-weight: 400;
    }

    .swiss-body-sm {
        line-height: 1.5;
        font-size: 1rem;
        font-weight: 400;
    }

    .swiss-caption {
        line-height: 1.4;
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--gray-400);
    }

    /* Utility classes for layout */
    .flex {
        display: flex;
    }

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

    .items-start {
        align-items: flex-start;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-between {
        justify-content: space-between;
    }

    .gap-2 {
        gap: 0.5rem;
    }

    .gap-3 {
        gap: 0.75rem;
    }

    .gap-6 {
        gap: 1.5rem;
    }

    .mb-3 {
        margin-bottom: 0.75rem;
    }

    .mb-4 {
        margin-bottom: 1rem;
    }

    .mt-1 {
        margin-top: 0.25rem;
    }

    .mt-4 {
        margin-top: 1rem;
    }

    .mt-6 {
        margin-top: 1.5rem;
    }

    .mt-8 {
        margin-top: 2rem;
    }

    .mt-10 {
        margin-top: 2.5rem;
    }

    .mt-12 {
        margin-top: 3rem;
    }

    .ml-2 {
        margin-left: 0.5rem;
    }

    .h-px {
        height: 1px;
    }

    .py-8 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .font-medium {
        font-weight: 500;
    }

    .font-bold {
        font-weight: 700;
    }

    .font-semibold {
        font-weight: 600;
    }

    .text-xl {
        font-size: 1.25rem;
    }

    .text-lg {
        font-size: 1.125rem;
    }

    .text-sm {
        font-size: 0.875rem;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .group:hover .group-hover\:scale-110 {
        transform: scale(1.1);
    }

    .transition-transform {
        transition-property: transform;
    }

    .scale-110 {
        transform: scale(1.1);
    }

    .from-indigo-500 {
        --tw-gradient-from: #6366f1;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0));
    }

    .from-emerald-500 {
        --tw-gradient-from: #10b981;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0));
    }

    .from-red-500 {
        --tw-gradient-from: #ef4444;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0));
    }

    .from-orange-500 {
        --tw-gradient-from: #f97316;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
    }

    .to-purple-600 {
        --tw-gradient-to: #9333ea;
    }

    .to-teal-600 {
        --tw-gradient-to: #0d9488;
    }

    .to-pink-600 {
        --tw-gradient-to: #db2777;
    }

    .to-red-600 {
        --tw-gradient-to: #dc2626;
    }

    .bg-gradient-to-r {
        background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    }

    .space-y-2>*+* {
        margin-top: 0.5rem;
    }

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

    .max-w-2xl {
        max-width: 42rem;
    }

    .max-w-3xl {
        max-width: 48rem;
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .max-w-4xl {
        max-width: 64rem;
    }

    .w-12 {
        width: 3rem;
    }

    .h-12 {
        height: 3rem;
    }

    .w-6 {
        width: 1.5rem;
    }

    .h-6 {
        height: 1.5rem;
    }

    .text-white {
        color: var(--white);
    }

    .text-gray-200 {
        color: rgba(229, 231, 235, 1);
    }

    .text-gray-300 {
        color: rgba(209, 213, 219, 1);
    }

    .bg-gradient-to-br {
        background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    }

    .from-cyan-500 {
        --tw-gradient-from: #06b6d4;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 182, 212, 0));
    }

    .to-teal-600 {
        --tw-gradient-to: #0d9488;
    }

    .from-purple-500 {
        --tw-gradient-from: #a855f7;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0));
    }

    .to-pink-600 {
        --tw-gradient-to: #db2777;
    }

    .rounded-xl {
        border-radius: 0.75rem;
    }

    .hover\:underline:hover {
        text-decoration: underline;
    }

    .strong,
    strong {
        font-weight: 600;
    }

    /* Responsive improvements */
    @media (max-width: 640px) {
        .container-fluid {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .container-fluid-lg {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .btn-primary,
        .btn-secondary {
            padding: 0.75rem 1.5rem;
            font-size: 0.95rem;
        }

        .swiss-grid {
            gap: 1rem;
        }
    }

    /* Directory Styles */
    .directory-card {
        background: rgba(26, 26, 26, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        padding: 1.5rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .directory-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    }

    .directory-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .directory-card-header {
        margin-bottom: 1rem;
    }

    .directory-card-name {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--white);
        margin: 0 0 0.75rem 0;
        line-height: 1.2;
    }

    .directory-card-specialties {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0 0 1rem 0;
    }

    .directory-specialty-tag {
        display: inline-block;
        padding: 0.375rem 0.875rem;
        background: rgba(0, 255, 231, 0.1);
        border: 1px solid rgba(0, 255, 231, 0.3);
        border-radius: 9999px;
        color: var(--brand-accent);
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.025em;
    }

    .directory-card-work-preview {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .directory-card-description {
        font-size: 0.875rem;
        color: var(--gray-400);
        line-height: 1.5;
        margin: 0 0 1rem 0;
    }

    .directory-card-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: auto;
    }

    .directory-card-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 2rem;
        color: var(--platinum);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .directory-card-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s;
    }

    .directory-card-link:hover::before {
        left: 100%;
    }

    .directory-card-link:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--white);
        transform: translateY(-1px);
    }

    .directory-card-link.twitch:hover {
        background: rgba(145, 70, 255, 0.2);
        border-color: rgba(145, 70, 255, 0.3);
    }

    .directory-card-link.youtube:hover {
        background: rgba(255, 0, 0, 0.2);
        border-color: rgba(255, 0, 0, 0.3);
    }

    .directory-card-link.discord:hover {
        background: rgba(88, 101, 242, 0.2);
        border-color: rgba(88, 101, 242, 0.3);
    }

    .directory-card-link.twitter:hover {
        background: rgba(29, 161, 242, 0.2);
        border-color: rgba(29, 161, 242, 0.3);
    }

    .directory-card-link.instagram:hover {
        background: rgba(228, 64, 95, 0.2);
        border-color: rgba(228, 64, 95, 0.3);
    }

    .directory-card-link.tiktok:hover {
        background: rgba(255, 0, 128, 0.2);
        border-color: rgba(255, 0, 128, 0.3);
    }

    .directory-search {
        background: rgba(26, 26, 26, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        padding: 0.875rem 1.25rem;
        color: var(--platinum);
        font-size: 1rem;
        width: 100%;
        transition: all 0.2s ease;
        backdrop-filter: blur(10px);
    }

    .directory-search:focus {
        outline: none;
        border-color: var(--brand-accent);
        box-shadow: 0 0 0 3px rgba(0, 255, 231, 0.1);
    }

    .directory-search::placeholder {
        color: var(--gray-500);
    }


    .directory-filter-tag {
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 9999px;
        color: var(--platinum);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .directory-filter-tag:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .directory-filter-tag.active {
        background: linear-gradient(135deg, var(--brand-accent), #a2fff7);
        color: var(--eerie-black);
        border-color: transparent;
    }

    .directory-results-count {
        color: var(--gray-400);
        font-size: 0.875rem;
        margin-top: 1rem;
    }

    .directory-empty {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--gray-400);
    }

    .directory-empty h3 {
        font-size: 1.25rem;
        color: var(--white);
        margin-bottom: 0.5rem;
    }

    /* =========================================
   RESTORED STYLES FOR LIVE.HTML
   ========================================= */

    /* Filter Tabs */
    .filter-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 2rem;
        justify-content: center;
    }

    .filter-tab {
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 9999px;
        color: var(--gray-400);
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .filter-tab:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--white);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .filter-tab.active {
        background: var(--brand-accent);
        color: var(--eerie-black);
        border-color: var(--brand-accent);
        font-weight: 600;
    }



    /* =========================================
   RESTORED STYLES FOR DIRECTORY.HTML
   ========================================= */

    /* Directory Filter Tags (matching JS class names) */
    .directory-role-tag,
    .directory-industry-tag {
        display: inline-block;
        padding: 0.375rem 0.875rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 9999px;
        color: var(--platinum);
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.025em;
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .directory-role-tag.filtered,
    .directory-industry-tag.filtered {
        background: rgba(0, 255, 231, 0.15);
        border-color: var(--brand-accent);
        color: var(--brand-accent);
    }

    /* Directory Card Tag Containers */
    .directory-card-roles,
    .directory-card-industries {
        margin-bottom: 1rem;
    }

    .directory-card-roles-label,
    .directory-card-industries-label {
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-500);
        margin-bottom: 0.5rem;
        font-weight: 600;
    }

    .directory-card-roles-tags,
    .directory-card-industries-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    /* Flag */
    .directory-card-flag {
        margin-right: 0.5rem;
        font-size: 1.2em;
    }

    \n .directory-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    }

    .directory-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .directory-card-header {
        margin-bottom: 0.75rem;
    }

    .directory-card-name {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--white);
        margin: 0 0 0.625rem 0;
        line-height: 1.2;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .directory-card-flag {
        font-size: 1.25rem;
        line-height: 1;
        flex-shrink: 0;
    }

    .directory-card-roles {
        margin: 0 0 0.75rem 0;
        padding: 0.75rem;
        background: rgba(0, 255, 231, 0.03);
        border: 1px solid rgba(0, 255, 231, 0.15);
        border-radius: 0.5rem;
        border-left: 3px solid var(--brand-accent);
    }

    .directory-card-roles-label {
        display: block;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--brand-accent);
        margin-bottom: 0.5rem;
    }

    .directory-card-roles-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .directory-card-industries {
        margin: 0 0 0.75rem 0;
        padding: 0.75rem;
        background: rgba(168, 85, 247, 0.03);
        border: 1px solid rgba(168, 85, 247, 0.15);
        border-radius: 0.5rem;
        border-left: 3px solid #c084fc;
    }

    .directory-card-industries-label {
        display: block;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: #c084fc;
        margin-bottom: 0.5rem;
    }

    .directory-card-industries-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .directory-role-tag {
        display: inline-block;
        padding: 0.25rem 0.625rem;
        background: rgba(0, 255, 231, 0.1);
        border: 1px solid rgba(0, 255, 231, 0.3);
        border-radius: 9999px;
        color: var(--brand-accent);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.025em;
        line-height: 1.2;
        transition: all 0.2s ease;
    }

    .directory-role-tag.filtered {
        background: linear-gradient(135deg, rgba(0, 255, 231, 0.3), rgba(162, 255, 247, 0.2));
        border: 1px solid rgba(0, 255, 231, 0.6);
        box-shadow: 0 0 8px rgba(0, 255, 231, 0.3), 0 0 12px rgba(0, 255, 231, 0.15);
        font-weight: 600;
        transform: scale(1.05);
    }

    .directory-industry-tag {
        display: inline-block;
        padding: 0.25rem 0.625rem;
        background: rgba(168, 85, 247, 0.1);
        border: 1px solid rgba(168, 85, 247, 0.3);
        border-radius: 9999px;
        color: #c084fc;
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.025em;
        line-height: 1.2;
        transition: all 0.2s ease;
    }

    .directory-industry-tag.filtered {
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(192, 132, 252, 0.2));
        border: 1px solid rgba(168, 85, 247, 0.6);
        box-shadow: 0 0 8px rgba(168, 85, 247, 0.3), 0 0 12px rgba(168, 85, 247, 0.15);
        font-weight: 600;
        transform: scale(1.05);
    }

    .directory-card-work-preview {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .directory-card-description {
        font-size: 0.8125rem;
        color: var(--gray-400);
        line-height: 1.5;
        margin: 0 0 0.75rem 0;
        flex-grow: 1;
    }

    .directory-card-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        margin-top: auto;
    }

    .directory-card-link {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1.5rem;
        color: var(--platinum);
        text-decoration: none;
        font-size: 0.8125rem;
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .directory-card-link svg {
        width: 0.875rem;
        height: 0.875rem;
    }

    .directory-card-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s;
    }

    .directory-card-link:hover::before {
        left: 100%;
    }

    .directory-card-link:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--white);
        transform: translateY(-1px);
    }

    .directory-card-link.twitch:hover {
        background: rgba(145, 70, 255, 0.2);
        border-color: rgba(145, 70, 255, 0.3);
    }

    .directory-card-link.youtube:hover {
        background: rgba(255, 0, 0, 0.2);
        border-color: rgba(255, 0, 0, 0.3);
    }

    .directory-card-link.tiktok:hover {
        background: rgba(0, 0, 0, 0.2);
        border-color: rgba(255, 0, 80, 0.3);
    }

    .directory-card-link.kick:hover {
        background: rgba(0, 252, 42, 0.2);
        border-color: rgba(0, 252, 42, 0.3);
    }

    .directory-card-link.twitter:hover {
        background: rgba(29, 161, 242, 0.2);
        border-color: rgba(29, 161, 242, 0.3);
    }

    .directory-card-link.instagram:hover {
        background: rgba(228, 64, 95, 0.2);
        border-color: rgba(228, 64, 95, 0.3);
    }

    .directory-card-link.discord:hover {
        background: rgba(88, 101, 242, 0.2);
        border-color: rgba(88, 101, 242, 0.3);
    }

    .directory-card-link.facebook:hover {
        background: rgba(24, 119, 242, 0.2);
        border-color: rgba(24, 119, 242, 0.3);
    }

    .directory-card-link.website:hover,
    .directory-card-link.portfolio:hover {
        background: rgba(0, 255, 231, 0.2);
        border-color: rgba(0, 255, 231, 0.3);
    }


    .directory-filters {
        margin-top: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .directory-filter-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .directory-filter-label {
        color: var(--white);
        font-size: 0.8125rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .directory-filter-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .directory-filter-tag {
        padding: 0.375rem 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 9999px;
        color: var(--platinum);
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .directory-filter-tag:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .directory-filter-tag.active {
        background: linear-gradient(135deg, var(--brand-accent), #a2fff7);
        color: var(--eerie-black);
        border-color: transparent;
    }

    .directory-results-count {
        color: var(--gray-400);
        font-size: 0.875rem;
        margin-top: 1rem;
    }

    .directory-empty {
        text-align: center;
        padding: 3rem 1rem;
        color: var(--gray-400);
    }

    .directory-empty h3 {
        font-size: 1.25rem;
        color: var(--white);
        margin-bottom: 0.5rem;
    }



    /* =========================================
   RESTORED LIVE STYLES
   ========================================= */
    /* Filter System Styles */
    .filter-tabs {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

    @media (max-width: 640px) {
        .filter-tabs {
            gap: 0.25rem;
        }

        .filter-tab {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
    }

    .filter-tab {
        padding: 0.75rem 1.5rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 2rem;
        color: var(--platinum);
        font-weight: 500;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .filter-tab::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s;
    }

    .filter-tab:hover::before {
        left: 100%;
    }

    .filter-tab:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
    }

    .filter-tab.active {
        background: var(--brand-accent);
        color: var(--eerie-black);
        border-color: var(--brand-accent);
        box-shadow: 0 4px 15px rgba(0, 255, 231, 0.3);
    }

    .filter-tab.active::before {
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    }

    /* Streamer card animations */
    .streamer-card {
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .streamer-card.filtered-out {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        pointer-events: none;
        height: 0;
        margin: 0;
        padding: 0;
        border: none;
        overflow: hidden;
    }

    .streamer-card.filtering {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Enhanced Live Streamer Styles */
    .streamer-list {
        background: rgba(26, 26, 26, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        backdrop-filter: blur(20px);
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        min-height: 200px;
    }

    .streamer-list.filtering {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .streamer-item {
        display: flex;
        align-items: center;
        padding: 1rem 1.5rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .streamer-item:last-child {
        border-bottom: none;
    }

    .streamer-item:hover {
        background: rgba(255, 255, 255, 0.05);
        transform: translateX(4px);
    }

    .streamer-item.filtered-out {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        pointer-events: none;
        height: 0;
        margin: 0;
        padding: 0;
        border: none;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Enhanced Live Dot */
    .live-dot {
        display: inline-block;
        width: 12px;
        min-width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 1rem;
        vertical-align: middle;
        background: #444;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
        flex-grow: 0;
    }

    .live-dot.live-dot-online {
        background: var(--brand-accent);
        animation: pulse-enhanced 2s infinite;
        box-shadow: 0 0 0 4px rgba(0, 255, 231, 0.2);
    }

    @keyframes pulse-enhanced {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 255, 231, 0.7);
            transform: scale(1);
        }

        70% {
            box-shadow: 0 0 0 10px rgba(0, 255, 231, 0);
            transform: scale(1.05);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(0, 255, 231, 0);
            transform: scale(1);
        }
    }

    /* Platform Icons */
    .platform-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin-right: 0.25rem;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .platform-icon.twitch {
        background: #9146ff;
        color: white;
    }

    .platform-icon.youtube {
        background: #ff0000;
        color: white;
    }

    .platform-icon.kick {
        background: #00ff00;
        color: black;
    }

    .platform-separator {
        color: var(--gray-400);
        margin: 0 0.25rem;
        font-weight: bold;
    }

    /* Platform Links for Multi-Platform Streamers */
    .platform-links {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .platform-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
        opacity: 0.7;
    }

    .platform-link:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    .platform-link.platform-twitch:hover {
        background: rgba(145, 70, 255, 0.2);
    }

    .platform-link.platform-kick:hover {
        background: rgba(83, 252, 24, 0.2);
    }

    .platform-link.platform-youtube:hover {
        background: rgba(255, 0, 0, 0.2);
    }

    /* Option 4: Platform Icons Row Styles */
    .platform-icons-row {
        display: flex;
        gap: 0.25rem;
        align-items: center;
    }

    .platform-icon-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 0.375rem;
        transition: all 0.2s ease;
        text-decoration: none;
        flex-shrink: 0;
    }

    .platform-icon-link:hover {
        transform: scale(1.05);
        background-color: rgba(255, 255, 255, 0.1);
    }

    .platform-icon-link.platform-twitch:hover {
        background-color: rgba(145, 70, 255, 0.2);
        color: #9146FF;
    }

    .platform-icon-link.platform-kick:hover {
        background-color: rgba(83, 252, 24, 0.2);
        color: #53FC18;
    }

    .platform-icon-link.platform-youtube:hover {
        background-color: rgba(255, 0, 0, 0.2);
        color: #FF0000;
    }

    .platform-icon-link.platform-instagram:hover {
        background-color: rgba(228, 64, 95, 0.2);
        color: #E4405F;
    }

    .platform-icon-link.platform-tiktok:hover {
        background-color: rgba(255, 0, 128, 0.2);
        color: #FF0080;
    }

    .platform-icon-link.platform-twitter:hover {
        background-color: rgba(29, 161, 242, 0.2);
        color: #1DA1F2;
    }


    .streamer-name {
        font-weight: 500;
        color: var(--gray-200);
        transition: color 0.2s ease;
    }

    .streamer-name.live {
        color: var(--brand-accent);
    }

    /* Enhanced Pills */
    .category-pill {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-weight: 500;
        font-size: 0.75rem;
        letter-spacing: 0.025em;
        background: rgba(255, 255, 255, 0.1);
        color: var(--gray-300);
        margin-left: 0.75rem;
        white-space: nowrap;
        display: inline-block;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.2s ease;
    }

    .group-pill {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-weight: 500;
        font-size: 0.75rem;
        letter-spacing: 0.025em;
        background: linear-gradient(135deg, var(--brand-accent), #a2fff7);
        color: var(--eerie-black);
        margin-left: 0.5rem;
        white-space: nowrap;
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0, 255, 231, 0.2);
    }

    .group-pill:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 255, 231, 0.3);
    }

    /* Enhanced Streamer Links */
    .streamer-link {
        font-weight: 600;
        color: var(--gray-400);
        text-decoration: none;
        transition: all 0.2s ease;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .streamer-link.live {
        color: var(--white);
        font-weight: 700;
    }

    .streamer-link:hover {
        color: var(--brand-accent);
        transform: translateX(2px);
    }

    /* Swiss Typography */
    .swiss-h1 {
        font-weight: 900;
        letter-spacing: -0.03em;
        line-height: 1.1;
        font-size: clamp(2.5rem, 5vw, 4rem);
    }

    .swiss-h2 {
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.2;
        font-size: clamp(1.875rem, 3vw, 2.5rem);
    }

    .swiss-body {
        line-height: 1.6;
        font-size: 1.125rem;
        font-weight: 400;
    }

    .swiss-body-sm {
        line-height: 1.5;
        font-size: 1rem;
        font-weight: 400;
    }

    .swiss-caption {
        line-height: 1.4;
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--gray-400);
    }

    /* Animations */
    .fade-in-up {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

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

    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .reveal.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Responsive improvements */
    @media (min-width: 640px) {
        .swiss-container {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }

    @media (min-width: 1024px) {
        .swiss-container {
            padding-left: 3rem;
            padding-right: 3rem;
        }
    }

    /* Responsive grid adjustments */
    @media (max-width: 768px) {
        .swiss-grid {
            gap: 1rem;
        }

        .swiss-col-6 {
            grid-column: span 12;
        }

        /* Navigation responsive adjustments */
        nav .swiss-col-6.text-right {
            text-align: left;
        }

        nav .swiss-col-6.text-right ul {
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 0.75rem;
        }
    }

    @media (max-width: 640px) {
        .streamer-item {
            padding: 0.75rem 1rem;
        }

        .streamer-link {
            max-width: 150px;
        }

        .category-pill {
            display: none;
        }

        /* Mobile navigation */
        nav ul {
            font-size: 0.875rem;
            gap: 0.5rem;
        }

        nav .nav-link {
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
        }

        /* Hide platform links and group tags in mobile portrait mode */
        .platform-icons-row {
            display: none !important;
        }

        .streamer-item .platform-icons-row {
            display: none !important;
        }

        .group-pill {
            display: none;
        }

        /* Keep the main content inline but adjust spacing */
        .streamer-item .flex.items-center.gap-3.min-w-0.flex-1 {
            gap: 0.75rem;
        }

        .streamer-item .flex.gap-2.flex-wrap {
            justify-content: flex-start;
            gap: 0.5rem;
        }

        /* Ensure live dot and name stay on same line */
        .streamer-item .flex.items-center {
            flex-wrap: nowrap;
        }

        /* Make streamer names clickable on mobile when icons are hidden */
        .streamer-item .streamer-name {
            cursor: pointer;
            text-decoration: underline;
            text-decoration-color: transparent;
            transition: all 0.2s ease;
        }

        .streamer-item .streamer-name:hover {
            color: var(--brand-accent);
            text-decoration-color: var(--brand-accent);
        }

        .streamer-item .flex.gap-2.flex-shrink-0 {
            display: none;
        }

        /* Additional specific selectors to hide platform icons */
        .streamer-item .platform-icon-link {
            display: none !important;
        }

        .streamer-item .platform-icons-row .platform-icon-link {
            display: none !important;
        }
    }



    .choice-section {
        position: relative;
        overflow: hidden;
        padding: 4rem 0;
    }

    .choice-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }

    .choice-container {
        position: relative;
        z-index: 1;
    }

    .choice-header {
        text-align: center;
        margin-bottom: 3rem;
    }

    .choice-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 7rem;
        max-width: 1000px;
        margin: 0 auto;
    }

    .choice-card {
        background: rgba(26, 26, 26, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1.5rem;
        padding: 3rem 2rem;
        text-align: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        text-decoration: none;
        color: inherit;
    }

    .choice-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    }

    .choice-card::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.03), transparent);
        transform: translate(-50%, -50%);
        transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
        opacity: 0;
        pointer-events: none;
    }

    .choice-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .choice-card:hover::after {
        width: 200px;
        height: 200px;
        opacity: 0.5;
    }

    .choice-card.community:hover {
        border-color: rgba(168, 85, 247, 0.3);
        box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 85, 247, 0.2);
    }

    .choice-card.community:hover::after {
        background: radial-gradient(circle, rgba(168, 85, 247, 0.05), transparent);
        opacity: 0.6;
    }

    .choice-card.hire:hover {
        border-color: rgba(0, 255, 231, 0.3);
        box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 255, 231, 0.2);
    }

    .choice-card.hire:hover::after {
        background: radial-gradient(circle, rgba(0, 255, 231, 0.05), transparent);
        opacity: 0.6;
    }

    .choice-icon {
        width: 80px;
        height: 80px;
        border-radius: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 2;
        transition: transform 0.4s ease;
    }

    .choice-card:hover .choice-icon {
        transform: scale(1.05);
    }

    .choice-icon.community {
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(219, 39, 119, 0.2));
        border: 2px solid rgba(168, 85, 247, 0.3);
    }

    .choice-icon.hire {
        background: linear-gradient(135deg, rgba(0, 255, 231, 0.2), rgba(13, 148, 136, 0.2));
        border: 2px solid rgba(0, 255, 231, 0.3);
    }

    .choice-card h3 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--white);
        margin-bottom: 1rem;
        position: relative;
        z-index: 2;
        letter-spacing: -0.02em;
    }

    .choice-card p {
        font-size: 1.125rem;
        color: var(--gray-300);
        line-height: 1.6;
        margin-bottom: 2rem;
        position: relative;
        z-index: 2;
        max-width: 280px;
    }

    .choice-card .btn-choice {
        padding: 1rem 2.5rem;
        font-size: 1.125rem;
        font-weight: 600;
        border-radius: 0.75rem;
        border: 2px solid transparent;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
        text-decoration: none;
        display: inline-block;
    }

    .choice-card.community .btn-choice {
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(219, 39, 119, 0.2));
        border-color: rgba(168, 85, 247, 0.4);
        color: var(--white);
    }

    .choice-card.community:hover .btn-choice {
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(219, 39, 119, 0.25));
        border-color: rgba(168, 85, 247, 0.5);
    }

    .choice-card.hire .btn-choice {
        background: linear-gradient(135deg, rgba(0, 255, 231, 0.2), rgba(13, 148, 136, 0.2));
        border-color: rgba(0, 255, 231, 0.4);
        color: var(--white);
    }

    .choice-card.hire:hover .btn-choice {
        background: linear-gradient(135deg, rgba(0, 255, 231, 0.25), rgba(13, 148, 136, 0.25));
        border-color: rgba(0, 255, 231, 0.5);
    }

    @media (max-width: 768px) {
        .choice-section {
            padding: 3rem 0;
        }

        .choice-cards {
            grid-template-columns: 1fr;
            gap: 1.5rem;
            padding: 0 1rem;
        }

        .choice-card {
            min-height: 350px;
            padding: 2rem 1.5rem;
        }

        .choice-card h3 {
            font-size: 1.75rem;
        }

        .choice-card p {
            font-size: 1rem;
        }
    }

    /* Responsive Fixes for Community Page */
    @media (max-width: 1024px) {
        .community-layout {
            grid-template-columns: 1fr 300px;
            gap: 1.5rem;
        }
    }

    @media (max-width: 768px) {
        nav ul {
            justify-content: center !important;
            flex-wrap: wrap;
        }

        .nav-link {
            padding: 0.4rem 0.75rem;
            font-size: 0.875rem;
        }
    }

    /* Members Slider Refinements */
    .slider-arrow:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    @media (max-width: 768px) {
        .member-card {
            flex-direction: column;
            text-align: center;
            gap: 1.5rem;
            padding: 3rem;
        }

        .member-card-separator {
            display: none;
        }

        .member-card-left,
        .member-card-center,
        .member-card-right {
            width: 100%;
            align-items: center;
            text-align: center;
            max-width: none;
            min-width: 0;
        }

        .member-card-right {
            flex-direction: row;
            opacity: 1;
        }
    }

    /* --- Start Enhanced Directory Styles (List Layout) --- */

    /* List Layout Card */
    .directory-card {
        display: flex;
        flex-direction: column;
        /* Mobile first: stacked */
        background: var(--gray-900);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 1rem;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        height: auto;
        /* Allow growth on mobile */
        min-width: 0;
        /* Fix flex issue */
    }

    @media (min-width: 768px) {
        .directory-card {
            flex-direction: row;
            /* Desktop: side-by-side */
            align-items: stretch;
            height: auto;
            /* Let content dictate height */
            min-height: 320px;
        }
    }

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

    /* --- Sidebar (Left: Profile + Tags) --- */
    .directory-card-sidebar {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #0f0f10;
        /* Slightly lighter than black */
        /* Removed border-right per user request */
        flex-shrink: 0;
        padding: 1.5rem;
        gap: 1rem;
    }

    /* --- Main Content (Right: Hero Slider) --- */
    .directory-card-main {
        flex: 1;
        position: relative;
        background: transparent;
        display: block;
        /* Ensure block layout to fix black line cutoff */
        min-height: 380px;
        overflow: hidden;
        border-radius: 0.9rem;
    }

    @media (min-width: 768px) {
        .directory-card-sidebar {
            width: 280px;
            /* Fixed width sidebar - compact */
            overflow-y: auto;
            scrollbar-width: thin;
        }

        .directory-card-main {
            /* Reset or specific styles if needed */
        }
    }

    /* Slider Container & Track (RESTORED) */
    .directory-slider-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .slider-track {
        display: flex;
        width: 100%;
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .slider-track::-webkit-scrollbar {
        display: none;
    }

    .slider-slide {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        position: relative;
        background: transparent;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* line-height: 0; removed to avoid layout issues with flex */
        scroll-snap-align: start;
    }

    /* Video/Embed Container */
    .video-container {
        width: 100%;
        height: 100%;
        min-height: 100%;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
    }

    /* Media Logic */
    .slider-slide img,
    .directory-card-work-preview,
    .video-container video,
    .slider-slide video {
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        vertical-align: middle;
        border: none;
        border-radius: 0;
    }

    /* Specific Frame Logic - allow height to be controlled by attribute */
    .video-container iframe,
    .slider-slide iframe {
        width: 100%;
        max-width: 100%;
        border: none;
        display: block;
        margin: auto;
    }

    /* Provider specific sizing */
    iframe.embed-bandcamp {
        max-width: 400px;
        /* Standard Bandcamp Large Player/Playlist Width */
    }


    /* Content Area (Right Side) */
    /* Sidebar Elements */
    .directory-sidebar-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .directory-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.1);
        background: var(--gray-800);
        flex-shrink: 0;
        margin-bottom: 0.5rem;
    }

    .directory-card-name {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--white);
        margin: 0;
        line-height: 1.2;
    }

    .directory-card-description {
        font-size: 0.85rem;
        color: #a1a1aa;
        /* Light gray */
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    /* Tags Sections */
    .directory-tags-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .directory-section-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        color: var(--white);
        opacity: 0.6;
    }

    .directory-tags-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    /* Slider Controls (New Location) */
    .slider-nav {
        position: absolute;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 0.5rem;
        z-index: 30;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .directory-card-main:hover .slider-nav {
        opacity: 1;
        pointer-events: auto;
    }

    .slider-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .slider-dot.active {
        background: var(--white);
        transform: scale(1.2);
    }

    .slider-arrow {
        position: absolute;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 30;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        top: 50%;
        transform: translateY(-50%);
    }

    .directory-card:hover .slider-arrow {
        opacity: 1;
    }

    .slider-arrow:hover {
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.8);
    }


    .slider-prev {
        left: 1rem;
    }

    .slider-next {
        right: 1rem;
    }

    /* Tags/Filters Alignment */
    .directory-card-roles,
    .directory-card-industries {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .directory-card-industries-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--gray-500);
        margin-right: 0.25rem;
    }

    .directory-role-tag,
    .directory-industry-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
    }

    /* Links Footer */
    .directory-card-links {
        margin-top: auto;
        /* Push to bottom if height allows */
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* =========================================
   Community Page Refactor - Custom Classes
   ========================================= */

    /* --- Core Layout & Utilities --- */
    .community-body {
        margin: 0;
        background-color: var(--eerie-black);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .community-main {
        flex: 1;
        width: 100%;
        outline: none;
    }

    /* --- Navigation Bar --- */
    .community-nav {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        background-color: rgba(17, 24, 39, 0.2);
        /* bg-gray-900/20 */
        backdrop-filter: blur(24px);
        /* backdrop-blur-xl */
        -webkit-backdrop-filter: blur(24px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        /* border-white/5 */
        position: sticky;
        top: 0;
        z-index: 50;
        transition: all 0.3s ease;
    }

    .community-nav.nav-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-20px);
    }

    .nav-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    }

    @media (min-width: 640px) {
        .nav-container {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }

    @media (min-width: 1024px) {
        .nav-container {
            padding-left: 3rem;
            padding-right: 3rem;
        }
    }

    .nav-content-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.5rem;
        align-items: center;
    }

    .nav-left {
        grid-column: span 6;
    }

    .nav-right {
        grid-column: span 6;
        text-align: right;
    }


    .nav-menu {
        display: flex;
        justify-content: flex-end;
        gap: 2rem;
        font-weight: 500;
        font-size: 1rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-item-link {
        position: relative;
        padding-bottom: 0.1rem;
        text-decoration: none;
        color: var(--platinum);
        font-weight: 500;
    }

    .nav-item-link:hover {
        color: var(--white);
        background: rgba(255, 255, 255, 0.08);
        /* slight hover bg from original */
        padding: 0.5rem 1rem;
        border-radius: 0.75rem;
    }

    /* Revert padding/bg for the specific link style in nav-link original if needed, 
    /* --- General Utilities Replacement --- */
    .text-center {
        text-align: center;
    }

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

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

    .max-w-4xl {
        max-width: 56rem;
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .mb-4 {
        margin-bottom: 1rem;
    }

    .mb-6 {
        margin-bottom: 1.5rem;
    }

    .mb-8 {
        margin-bottom: 2rem;
    }

    .flex-col {
        flex-direction: column;
    }

    .flex-row {
        flex-direction: row;
    }

    .justify-center {
        justify-content: center;
    }

    .gap-4 {
        gap: 1rem;
    }

    .w-full {
        width: 100%;
    }

    /* Button Wrappers */
    .btn-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
    }

    @media (min-width: 640px) {
        .btn-wrapper {
            flex-direction: row;
        }
    }

    /* --- Footer --- */
    .community-footer {
        margin-top: auto;
    }

    .community-footer a {
        color: var(--brand-accent);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .community-footer a:hover {
        color: var(--white);
        text-decoration: none;
    }

    .community-footer a:visited {
        color: var(--brand-accent);
        text-decoration: none;
    }

    /* --- JS Rendered Content Helpers (Replacing Tailwind) --- */

    /* Icons */
    .icon-sm {
        width: 1rem;
        height: 1rem;
    }

    /* Members / Skeletons */
    .skeleton-img {
        height: 12rem;
        /* h-48 */
        border-radius: 0.5rem;
        /* rounded-lg */
        margin-bottom: 1rem;
        /* mb-4 */
        background-color: rgba(255, 255, 255, 0.1);
        animation: pulse 2s infinite;
    }

    .skeleton-text-lg {
        height: 1rem;
        /* h-4 */
        width: 75%;
        /* w-3/4 */
        margin-bottom: 0.5rem;
        /* mb-2 */
        background-color: rgba(255, 255, 255, 0.1);
        animation: pulse 2s infinite;
    }

    .skeleton-text-sm {
        height: 0.75rem;
        /* h-3 */
        width: 50%;
        /* w-1/2 */
        background-color: rgba(255, 255, 255, 0.1);
        animation: pulse 2s infinite;
    }

    /* Events / Cards */
    .event-box {
        /* Container styles if needed */
    }

    .event-title {
        font-weight: 700;
        /* font-bold */
        font-size: 1.125rem;
        /* text-lg */
        color: var(--white);
        /* text-white */
        margin-bottom: 0.5rem;
        /* mb-2 */
    }

    .event-time {
        color: var(--gray-300);
        /* text-gray-300 */
        margin-bottom: 0.75rem;
        /* mb-3 */
    }

    .divider-gradient {
        height: 1px;
        /* h-px */
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
        /* bg-gradient... */
        margin-bottom: 0.75rem;
        /* mb-3 */
        width: 100%;
    }

    .event-desc {
        color: var(--gray-200);
        /* text-gray-200 */
    }

    /* Timezone block helpers */
    .event-tz-list {
        margin-bottom: 1rem;
        /* mb-4 */
    }

    .event-tz-list>*+* {
        margin-top: 0.5rem;
        /* space-y-2 */
    }

    .event-tz-item {
        display: flex;
        justify-content: space-between;
    }

    .text-brand-accent {
        color: var(--brand-accent);
    }

    .font-medium {
        font-weight: 500;
    }

    .skeleton-title {
        height: 1.5rem;
        width: 75%;
        margin-bottom: 1rem;
        background-color: rgba(255, 255, 255, 0.1);
        animation: pulse 2s infinite;
    }