:root {
    --bg-color: #E6E6E6;
    --primary-color: #8A5CF5;
    /* Vibrant Purple */
    --secondary-color: #FF4D6D;
    /* Pink/Red */
    --deep-purple: #1A0B2E;
    /* Deep Brand Purple */
    --text-color: #1A0B2E;
    /* Was #111111 */
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(255, 255, 255, 0.8);

    /* Font Families */
    --font-main: 'Benzin', sans-serif;
    --font-wide: 'Benzin', sans-serif;
    --font-sub: 'Benzin', sans-serif;
    --font-body: 'Inter', sans-serif;

    --bento-gap: 20px;
    --card-radius: 40px;
}

/* Global Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

* {
    -webkit-overflow-scrolling: touch;
    /* Smooth momentum scrolling on iOS */
}

/* Bento Grid System */
.bento-grid {
    display: grid;
    gap: var(--bento-gap);
    width: 100%;
}

.bento-card {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    /* Light card as per reference */
    border-radius: var(--card-radius);
    padding: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(26, 11, 46, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(26, 11, 46, 0.05);
}

/* About Section Specifics */
.about-grid {
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

.about-text-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 50px;
    /* Extra rounded as requested */
}

.card-title {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.highlight-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

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

.stats-row {
    display: flex;
    gap: 30px;
    margin: 2rem 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--deep-purple);
}

/* CSS 3D Placeholder */
.about-visual-card {
    /* background: #f5f5f5; Removed to allow glass effect from bento-card */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3D Vinyl Record Animation */
.about-visual-card {
    /* background: #f5f5f5; Removed to allow glass effect from bento-card */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1000px;
}

.vinyl-scene {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transform: rotateX(20deg) rotateY(-15deg);
}

.vinyl-wrapper {
    position: relative;
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    animation: vinyl-float 4s ease-in-out infinite;
}

.vinyl-disc {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-color);
    position: relative;
    box-shadow:
        inset 0 0 0 2px #6A3CC5,
        inset 0 0 0 5px var(--primary-color),
        inset 0 0 0 6px #5A2CB5,
        inset 0 0 0 10px var(--primary-color),
        inset 0 0 0 12px #6A3CC5,
        inset 0 0 0 20px var(--primary-color),
        inset 0 0 0 22px #4A1CA5,
        inset 0 0 0 30px var(--primary-color),
        inset 0 0 0 32px #6A3CC5,
        inset 0 0 0 40px var(--primary-color),
        inset 0 0 0 42px #4A1CA5,
        inset 0 0 0 50px var(--primary-color),
        inset 0 0 0 52px #6A3CC5,
        inset 0 0 0 60px var(--primary-color),
        inset 0 0 0 62px #4A1CA5,
        inset 0 0 0 70px var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: vinyl-spin 5s linear infinite;
}

/* Shine effect on vinyl */
.vinyl-disc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.1) 100%);
    pointer-events: none;
}

.vinyl-label-center {
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 2;
    border: 2px solid #fff;
}

.vinyl-label-center img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

.vinyl-shadow {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) rotateX(90deg);
    width: 200px;
    height: 200px;
    background: radial-gradient(rgba(26, 11, 46, 0.4), transparent 70%);
    filter: blur(10px);
    z-index: -1;
    animation: shadow-pulse 4s ease-in-out infinite;
}

@keyframes vinyl-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes vinyl-float {

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

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

@keyframes shadow-pulse {

    0%,
    100% {
        transform: translateX(-50%) rotateX(90deg) scale(1);
        opacity: 0.4;
    }

    50% {
        transform: translateX(-50%) rotateX(90deg) scale(0.8);
        opacity: 0.2;
    }
}

@font-face {
    font-family: 'Benzin';
    src: url('assets/fonts/benzin/Benzin-Bold.woff2') format('woff2'),
        url('assets/fonts/benzin/Benzin-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Benzin';
    src: url('assets/fonts/benzin/Benzin-ExtraBold.woff2') format('woff2'),
        url('assets/fonts/benzin/Benzin-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Benzin';
    src: url('assets/fonts/benzin/Benzin-Medium.woff2') format('woff2'),
        url('assets/fonts/benzin/Benzin-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Benzin';
    src: url('assets/fonts/benzin/Benzin-Regular.woff2') format('woff2'),
        url('assets/fonts/benzin/Benzin-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    /* Critical for preventing horizontal scroll */
    width: 100%;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) var(--bg-color);
    overflow-x: hidden;
}

/* Custom Global Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 6px;
    border: 3px solid var(--bg-color);
    /* Creates padding effect */
}


body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-main);
    text-transform: uppercase;
}

h1 {
    font-weight: 800;
}

h2 {
    font-weight: 800;
}

h3 {
    font-family: var(--font-sub);
    font-weight: bold;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Container */
.container {
    width: 100%;
    /* Force full width in flex container */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}


/* Background Blobs */
.blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.7;
    animation: float 15s infinite ease-in-out;
    pointer-events: none;
    /* Prevent interaction */
}

.blob-1 {
    width: 700px;
    height: 700px;
    background: var(--primary-color);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.blob-2 {
    width: 600px;
    height: 600px;
    background: var(--secondary-color);
    bottom: -200px;
    right: -200px;
    animation-delay: 5s;
}

.blob-3 {
    width: 400px;
    height: 400px;
    background: #ffffff;
    top: 30%;
    left: 40%;
    animation-delay: 8s;
    opacity: 0.4;
}

@keyframes float {

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

    33% {
        transform: translate(50px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-30px, 50px) scale(0.9);
    }
}

/* Cable Lines */
.cable {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.cable svg path {
    stroke-dasharray: 15;
    animation: dash 30s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 1000;
    }
}

/* Header */
.header {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 30000;
    /* Raised from 100 to ensure Mobile Menu (child) covers Hero (z-10001) */
    padding: 10px 0;
    transition: transform 0.3s;
}

.nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    background: rgba(255, 255, 255, 0.7);
    padding: 15px 40px;
    /* Increased to 40px to match gap size */
    border-radius: 50px;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(26, 11, 46, 0.05);
    border: 1px solid var(--glass-border);
    /* Ensure it doesn't stretch too wide if content is wide */
    width: fit-content;
    margin: 0 auto;
    /* Center the fit-content nav */
}

/* Hide mobile toggle on desktop */
.mobile-menu-toggle,
.mobile-nav {
    display: none;
}

.nav-link {
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: bold;
    transition: color 0.3s;
    position: relative;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-color);
    transition: width 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}

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

/* Sections - Fixed Spacing */
.section {
    padding: 120px 0;
    /* Increased from 80px to create larger gap between blocks */
    /* Removed min-height: 100vh to fix huge gaps */
    display: flex;
    flex-direction: column;
    /* Ensure vertical stacking */
    align-items: center;
    position: relative;
}

.section-title {
    font-size: 3.5rem;
    margin-bottom: 50px;
    /* Slight reduction for tighter content hierarchy */
    text-align: center;
    color: var(--primary-color);
    text-shadow: none;
    letter-spacing: 0px;
    font-weight: 800;
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    /* Removed problematic positioning */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Ensure clear wrapping */
    hyphens: auto;
}

/* Hero - Needs height */
/* Hero - Needs height */
.hero {
    text-align: center;
    padding-top: 0;
    /* Centered via flexbox, no padded top needed if 100vh */
    min-height: 100vh;
    min-height: 100dvh;
    /* Modern mobile fix */
    margin-bottom: 0;
    /* Reset margins, height handles spacing */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    /* Ensure potential absolute framing */
    overflow: hidden;
    /* Prevent video overflow */
}

/* Hero Videos */
.hero-videos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* --- STRICT HERO DISPLAY LOGIC --- */

/* 1. Default State (Desktop, Android, etc.) */
/* Videos are visible, Static Images are hidden */
.hero-anim {
    display: block !important;
    opacity: 1 !important;
}

.hero-static {
    display: none !important;
    opacity: 0 !important;
}

/* 2. Apple Mobile Override (iPhone, iPad) */
/* Triggered by JS class 'is-apple-mobile' on body */
body.is-apple-mobile .hero-anim {
    display: none !important;
    opacity: 0 !important;
}

body.is-apple-mobile .hero-static {
    display: block !important;
    opacity: 1 !important;
}

/* Shared Positioning */
.hero-video {
    position: absolute;
    bottom: 0px;
    height: auto;
    width: 35vw;
    max-width: 600px;
    min-width: 250px;
    object-fit: cover;
    mix-blend-mode: screen;
    /* Blend for videos */
    z-index: 10000;
}

/* Specific sides */
.hero-video.left {
    left: 0;
}

.hero-video.right {
    right: 0;
}

/* Mobile Sizing (Applies to both Video and Image on small screens) */
@media (max-width: 768px) {
    .hero-video {
        width: 140px;
        min-width: 0;
        bottom: 38% !important;
        mix-blend-mode: normal;
        /* No blend for mobile mostly, or consistent */
        /* PNGs don't need screen blend, videos on Android mobile might? 
           Let's keep screen for videos if they are black background, 
           but the user said "PNGs only on iPhone", and videos elsewhere.
           If the videos have black background, they match the dark aesthetic?
           Actually, the site is light/glass. Videos likely need mix-blend-mode: screen or multiply?
           
           Reviewing original code:
           Original .hero-video had mix-blend-mode: screen;
           Original mobile override set mix-blend-mode: normal;
           
           If we use PNGs on Apple Mobile, they definitely want Normal.
           If we use Videos on Android Mobile, do they need Screen?
           Likely yes, if they are the same WebM files.
           
           Let's refine:
        */
    }

    .hero-anim {
        mix-blend-mode: screen !important;
    }

    .hero-static {
        mix-blend-mode: normal !important;
    }

    .hero-video.left {
        left: -20px;
    }

    .hero-video.right {
        right: -20px;
    }

    /* Fix: Ensure container is above grain overlay */
    .hero-videos {
        z-index: 10000;
        /* isolation: isolate; REMOVED - Breaks mix-blend-mode with background */
    }

    /* Hide videos when mobile menu is open to prevent overlap glitches */
    body.menu-open .hero-videos,
    body.menu-open .hero-container,
    body.menu-open .hero-logo-container {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
        /* Smooth fade */
    }

    /* Fix: Ensure text/buttons stay above videos */
    .hero-container {
        position: relative;
        z-index: 10001;
    }
}



/* Hero Logo Wrapper */
.hero-logo-wrapper {
    margin-bottom: 30px;
    animation: popIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    justify-content: center;
}


/* --- Hero Logo - Solid Gradient Style --- */
/* Hide the liquid background since we are filling the SVG */
.logo-mask {
    display: none;
}

/* Container for the SVG */
.hero-logo-container {
    position: relative;
    width: 80vw;
    /* Responsive width */
    max-width: 600px;
    aspect-ratio: 3763/3436;
    /* Maintain SVG aspect ratio */
    margin-bottom: 30px;
    z-index: 10;
}

@media (max-width: 768px) {
    .hero-logo-container {
        width: 100%;
        height: 60vw;
    }
}

/* Inline SVG for Stroke Animation */
.logo-stroke-svg {
    position: relative;
    /* Changed from absolute to flow naturally */
    width: 100%;
    /* Slightly larger to outline */
    height: 100%;
    z-index: 20;
    pointer-events: none;
    overflow: visible;
    /* Allow glow to spill */
    /* Remove glow filters */
    filter: none;
    left: auto;
    top: auto;
    transform: none;
}

.logo-path {
    /* Filled with Gradient */
    fill: url(#logoGradient);
    stroke: url(#logoGradient);
    /* Match stroke to fill for boldness */
    stroke-width: 5px;
    /* Thicker for visibility */
    /* Slight stroke to smooth edges */
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    transition: transform 0.3s ease;
    /* Remove all weird lighting effects */
    animation: none;
}

/* Simple Hover - REMOVED (Static Logo as requested) */
.hero-logo-container:hover .logo-path {
    /* No interaction */
    transform: none;
    filter: none;
    animation: none;
}

/* The Liquid Fluid Gradient (Existing) */
.liquid-gradient {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%,
            #FF4D6D,
            #8A5CF5,
            #FFFFFF,
            /* Strobe White */
            #000000,
            /* Contrast Black */
            #4CC9F0,
            #FF0055);
    background-size: 200% 200%;
    animation: strobeLight 0.5s steps(5) infinite alternate;
    /* FAST STROBE */
    filter: contrast(150%) brightness(120%);
}

@keyframes strobeLight {
    0% {
        transform: translate(0, 0) scale(1);
        filter: hue-rotate(0deg);
    }

    25% {
        transform: translate(-5%, 5%) scale(1.1);
        filter: hue-rotate(90deg);
    }

    50% {
        transform: translate(5%, -5%) scale(0.9);
        filter: hue-rotate(180deg) invert(10%);
    }

    75% {
        transform: translate(-2%, 2%) scale(1.05);
        filter: hue-rotate(270deg);
    }

    100% {
        transform: translate(0, 0) scale(1);
        filter: hue-rotate(360deg);
    }
}

/* Glassy Shine Overlay */
.glass-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0) 60%,
            rgba(255, 255, 255, 0.4) 100%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Mouse Hover - REMOVED */
.hero-logo-container:hover .logo-mask,
.hero-logo-container:hover .logo-stroke-svg {
    filter: none;
}

/* Fallback Image rules in case CSS masks are not supported */
.logo-fallback {
    z-index: -1;
}

.hero-subtitle {
    font-family: var(--font-main);
    font-size: 1.2rem;
    margin-bottom: 40px;
    /* Reduced margin */
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--deep-purple);
    text-transform: uppercase;
}

/* Submit button text visibility (default: show full, hide short) */
.btn-text-short {
    display: none;
}

/* Mobile-only line break (hidden on desktop) */
.mobile-break {
    display: none;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 50px;
    border-radius: 50px;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-size: 1.1rem;
    letter-spacing: 1px;
    border: none;
}

.btn i {
    font-size: 1.4rem;
}



.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), var(--gradient-color, #fff), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    pointer-events: none;
}

.btn:hover::before {
    opacity: 1;
}

.btn-primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 10px 30px rgba(26, 11, 46, 0.05);
    z-index: 1;
    --gradient-color: var(--secondary-color);
}

.btn-primary:hover {
    box-shadow: 0 10px 30px rgba(138, 92, 245, 0.3);
}

.btn-secondary {
    background: var(--secondary-color);
    color: #fff;
    width: 100%;
    z-index: 1;
    --gradient-color: var(--primary-color);
}

.btn-secondary:hover {
    box-shadow: 0 10px 30px rgba(255, 77, 109, 0.3);
}

/* Glass Card */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    border-radius: 40px;
    padding: 50px;
    box-shadow: 0 30px 60px rgba(26, 11, 46, 0.02);
    transition: transform 0.3s, box-shadow 0.3s;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 40px 80px rgba(26, 11, 46, 0.04);
}

/* About */
.about-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.lead {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.styled-list {
    list-style: none;
    margin-top: 30px;
}

.styled-list li {
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
}

.styled-list i {
    color: var(--secondary-color);
    font-size: 1.5rem;
    background: #fff;
    padding: 8px;
    border-radius: 50%;
}

/* --- Custom DJ Slider Scrollbar --- */
/* --- Custom DJ Slider Scrollbar --- */
.carousel-controls-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 90%;
    /* Prevent overflow */
    max-width: 800px;
    margin: 40px auto 0;
}

.scroll-control-container {
    width: 100%;
    /* Removed margin since wrapper handles it */
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    flex: 1;
    /* Take remaining space */
}

/* Arrow Buttons */
.nav-arrow-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--glass-border);
    color: var(--primary-color);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.nav-arrow-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(138, 92, 245, 0.3);
}

/* Active/Focus state for accessibility */
.nav-arrow-btn:active {
    transform: scale(0.95);
}

/* Decoration lines for "fader" feel */
.scroll-track-decoration {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(0, 0, 0, 0.1);
    transform: translateY(-50%);
    z-index: 0;
}

/* The actual range input */
.dj-slider {
    -webkit-appearance: none;
    appearance: none;
    /* Standard property */
    width: 100%;
    height: 6px;
    background: transparent;
    /* Track graphic handled by decoration or refined here */
    outline: none;
    z-index: 2;
    cursor: pointer;
}

/* Redesign track */
.dj-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(26, 11, 46, 0.1), rgba(26, 11, 46, 0.1));
    border-radius: 2px;
}

/* Slider Thumb (Webkit/Chrome) - Sleek Knob */
.dj-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 40px;
    /* Tall fader shape */
    background: var(--secondary-color);
    border: 2px solid #fff;
    border-radius: 4px;
    /* Rectangular fader look */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: grab;
    margin-top: -18px;
    /* Center partially */
    position: relative;
    /* Fader Line Details */
    background-image: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
}

.dj-slider:active::-webkit-slider-thumb {
    cursor: grabbing;
    background: var(--primary-color);
    transform: scale(1.05);
}

/* Firefox Support */
.dj-slider::-moz-range-track {
    width: 100%;
    height: 4px;
    background: rgba(26, 11, 46, 0.1);
    border-radius: 2px;
}

.dj-slider::-moz-range-thumb {
    width: 24px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: 4px;
    background: var(--secondary-color);
    cursor: grab;
    background-image: linear-gradient(to bottom, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
}

.floating-image {
    width: 100%;
    border-radius: 40px;
    transform: rotate(3deg);
    box-shadow: none;
    transition: transform 0.5s;
    border: 5px solid #fff;
}

.floating-image:hover {
    transform: rotate(0deg) scale(1.02);
}

/* Courses Redesign */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    /* Reduced gap to fit 3 columns better */
    padding: 20px 0;
    /* Remove horizontal padding to maximize space */
}

@media (max-width: 1024px) {
    .courses-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

.course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    overflow: visible;
    /* Allow hover effects to show */
    background: transparent;
    border: none;
    box-shadow: none;
}

.course-image-wrapper {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 20px 40px rgba(26, 11, 46, 0.05);
    transition: transform 0.3s;
    aspect-ratio: 4/5;
}

.course-image-wrapper:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(26, 11, 46, 0.05);
}

.course-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-info {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 30px;
    margin-top: -50px;
    position: relative;
    z-index: 2;
    margin-left: 20px;
    margin-right: 20px;
    transition: transform 0.3s;
}

.course-card:hover .course-info {
    transform: translateY(-5px);
}

.course-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}

.course-header h3 {
    font-size: 1.4rem;
    line-height: 1.1;
}

.price {
    font-family: var(--font-main);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--secondary-color);
    align-self: flex-start;
}

.course-desc {
    font-size: 1rem;
    margin-bottom: 20px;
    font-weight: 600;
}

/* Rent */
.rent-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.rent-text h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.1;
}

.rent-image img {
    width: 100%;
    border-radius: 30px;
    transform: rotate(-3deg);
    border: 8px solid #fff;
    box-shadow: -10px 10px 0 rgba(26, 11, 46, 0.05);
}

.price-tag {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    padding: 15px 30px;
    border-radius: 15px;
    font-family: var(--font-main);
    font-size: 2rem;
    margin-top: 30px;
    transform: rotate(-2deg);
    box-shadow: 4px 4px 0px rgba(26, 11, 46, 0.05);
    transition: transform 0.3s;
}

.price-tag:hover {
    transform: rotate(0deg) scale(1.1);
}

/* Gallery (Vibe) - Marquee */
#gallery {
    flex-direction: column;
    padding-bottom: 150px;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    /* Critical for mobile */
    position: relative;
    padding: 40px 0;
}

.marquee-track {
    display: flex;
    gap: 20px;
    width: fit-content;
    will-change: transform;
    cursor: grab;
    /* animation removed for JS control */
}

.marquee-track:active {
    cursor: grabbing;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.gallery-item {
    flex: 0 0 25vw;
    /* Responsive width */
    height: 35vw;
    /* Responsive height */
    max-height: 500px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Move by half the track width (original set) */
    }
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Team */
.team-intro {
    text-align: center;
    max-width: 900px;
    width: 90%;
    /* Prevent touching edges on mobile */
    margin: 0 auto 40px;
    font-size: 1.1rem;
}

/* Carousel Window limits visibility */
.carousel-window {
    width: 100%;
    overflow-x: auto;
    /* enable horizontal scroll on mobile */
    -webkit-overflow-scrolling: touch;
}

.carousel-track {
    display: flex;
    gap: 16px;
    width: 100%;
    /* Ensure it fits */
    max-width: 100%;
    /* Double constraint */
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Scroll Snap Logic - The "Qualitative" Feel */
    scroll-snap-type: x mandatory;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.carousel-track::-webkit-scrollbar {
    display: none;
}

.team-card {
    /* Fixed min-width to ensure overflow happens */
    flex: 0 0 300px;
    min-width: 280px;
    aspect-ratio: 3/4;
    perspective: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    white-space: normal;
    overflow: hidden;
    border-radius: 25px;
    border: 4px solid #fff;
    /* Snap Alignment */
    scroll-snap-align: center;
}

.team-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .team-card {
        flex: 0 0 70vw;
        /* Larger on mobile for better visibility */
        min-width: 250px;
        aspect-ratio: 3/4;
        margin-right: 10px;
    }
}

/* Removed card-inner/front/back flip logic */


/* Clubs Ticker */
.clubs-ticker-wrapper {
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    /* Fix for mobile horizontal scroll */
    position: relative;
    padding: 50px 0;
}

.clubs-ticker {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    padding: 30px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    transform: rotate(-2deg) scale(1.05);
    border: none;
    width: 110%;
    /* Slightly wider to cover rotation edges */
    left: -5%;
    margin: 0;
}

.ticker-content {
    display: inline-block;
    animation: ticker 20s linear infinite;
}

.ticker-item {
    display: inline-block;
    font-family: var(--font-wide);
    font-size: 3rem;
    margin: 0 40px;
    color: #fff;
    -webkit-text-stroke: 0;
    font-weight: 800;
    transition: color 0.3s;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ticker-item:hover {
    color: var(--deep-purple);
    -webkit-text-stroke: 0;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* CTA Section */
.cta-section {
    text-align: center;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50px;
    padding: 80px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 80px;
    box-shadow: 0 30px 60px rgba(138, 92, 245, 0.4);
}

.cta-section h2 {
    color: #fff;
    text-shadow: none;
    font-size: 3rem;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 1.5rem;
    margin-bottom: 40px;
    font-family: var(--font-sub);
}

.cta-btn {
    background: #fff;
    color: var(--deep-purple);
    /* Standard .btn padding is 20px 50px, font 1.1rem */
    /* We inherit those from .btn, so we don't need to override them here unless we want them different */
    /* Removing overrides to match "similar variants" */
    box-shadow: 0 20px 40px rgba(26, 11, 46, 0.3);
    --gradient-color: var(--primary-color);
}

.cta-btn:hover {
    background: #fff;
    /* Keep white background */
    color: var(--deep-purple);
}

/* Contact */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
    /* Stretch to match heights */
}

.contact-form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(26, 11, 46, 0.05);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-family: var(--font-main);
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #eee;
    border-radius: 15px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

.submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--secondary-color), #ff8fa3);
    color: #fff;
    border: none;
    --gradient-color: var(--primary-color);
    /* Purple hover effect */
}

.submit-btn:hover {
    box-shadow: 0 10px 30px rgba(138, 92, 245, 0.4);
    /* Purple shadow */
}

.submit-btn:hover {
    background: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(255, 77, 109, 0.3);
}

.submit-btn:disabled {
    cursor: wait;
    opacity: 0.75;
    transform: none;
}

.form-status {
    min-height: 1.4em;
    margin: 14px 0 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.form-status.success {
    color: #138a48;
}

.form-status.error {
    color: #d62945;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

.map-wrapper {
    border-radius: 30px;
    overflow: hidden;
    height: auto;
    /* Allow flex grow */
    flex-grow: 1;
    /* Fill available space */
    border: 3px solid #fff;
    box-shadow: 0 20px 40px rgba(26, 11, 46, 0.05);
    min-height: 300px;
}

.contact-links {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    /* keep icons on one line */
    overflow: visible;
    /* Fix scrollbar glitch */
}

.contact-btn {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    font-family: var(--font-main);
    padding: 0;
    border: 3px solid var(--secondary-color);
    /* Pink border */
    border-radius: 20px;
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    /* Pink icon */
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Ensure icons stay centered */
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), #9d7bf5);
    /* Purple gradient */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.contact-btn:hover {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(138, 92, 245, 0.4);
    /* Purple shadow */
    /* Removed transform scale as requested */
}

.contact-btn:hover::before {
    opacity: 1;
}

/* Remove old specific brand hovers */
.telegram:hover,
.instagram:hover {
    /* Styles handled by generic .contact-btn:hover now */
    background: transparent;
    /* Ensure no conflict */
    /* Removed transform scale */
}

.footer {
    margin-top: 50px;
    text-align: center;
    padding-bottom: 40px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.footer-address {
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }

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

    .hero-logo {
        max-width: 90%;
    }

    /* Mobile menu needed */
    .header {
        padding: 20px;
    }

    .header-container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 20001;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Mobile Menu Decorations */
    .mobile-menu-decor {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -1;
        pointer-events: none;
    }

    .decor-item {
        position: absolute;
        opacity: 0.8;
        /* Increased from 0.1 for better visibility */
        color: var(--secondary-color);
    }

    .decor-top-left {
        top: -50px;
        left: -50px;
        width: 200px;
        height: 200px;
        transform: rotate(-15deg);
    }

    .decor-bottom-right {
        bottom: -50px;
        right: -50px;
        width: 250px;
        height: 250px;
        transform: rotate(15deg);
    }

    .decor-center-floating {
        top: 50%;
        left: 10%;
        width: 100px;
        height: 100px;
        opacity: 0.05;
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {

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

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

    @keyframes spin-slow {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .decor-spin {
        animation: spin-slow 20s linear infinite;
    }

    .mobile-menu-toggle span {
        width: 100%;
        height: 3px;
        background-color: var(--deep-purple);
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
        background-color: var(--secondary-color);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
        background-color: var(--secondary-color);
    }

    .mobile-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--bg-color);
        /* backdrop-filter: blur(20px); Removed to ensure stability */
        /* -webkit-backdrop-filter: blur(20px); */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 20000;
    }

    .mobile-nav.active {
        right: 0;
    }

    .mobile-nav-link {
        font-family: var(--font-main);
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--deep-purple);
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: color 0.3s;
    }

    .mobile-nav-link:hover {
        color: var(--secondary-color);
    }

    /* Ensure body doesn't scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }

    /* Stack content vertically */
    .about-content,
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero-logo-container {
        width: 100%;
        height: auto;
        /* Allow aspect ratio to define height */
        max-width: 90%;
        /* Prevent touching edges */
    }

    /* GLOBAL MOBILE OVERFLOW FIX */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    .hero-btn {
        padding: 15px 35px;
        font-size: 0.9rem;
    }

    /* Typography Fixes */
    h1 {
        font-size: 2.2rem !important;
    }

    h2,
    .section-title {
        font-size: 1.7rem !important;
        /* Aggressively smaller to fit "PREPODAVATELI" */
        word-break: normal;
        /* "keep-all" can cause overflow if word is too long. "normal" allows break if needed, but size should fix it. */
        overflow-wrap: break-word;
        /* Allow break if absolutely necessary */
        hyphens: auto;
        line-height: 1.2;
    }

    h3 {
        font-size: 1.4rem !important;
    }

    .cta-section {
        padding: 40px 15px;
        /* Reduce side padding */
    }

    .cta-section h2 {
        font-size: 1.8rem !important;
        padding-bottom: 10px;
    }

    .cta-section p {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 30px;
        padding: 0 5px;
    }

    .rent-image {
        width: 100%;
    }

    .rent-image img {
        width: 100%;
        height: auto;
        transform: rotate(0deg);
        /* Remove rotation on mobile for better fit */
        margin-top: 20px;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .gallery-item:nth-child(1) {
        grid-column: span 2;
    }

    .gallery-item:nth-child(4) {
        grid-column: span 1;
    }

    .cta-section {
        padding: 40px 20px;
    }

    .cta-section h2 {
        font-size: 2rem;
    }

    .contact-links {
        flex-direction: row;
        /* Force side-by-side */
        justify-content: center;
        /* Center them */
    }

    .clubs-ticker {
        width: 150%;
        /* Relative to wrapper */
        left: -25%;
        transform: rotate(-5deg) scale(1);
    }

    .ticker-item {
        font-size: 2rem;
        margin: 0 20px;
    }

    /* Adjust glass card padding */
    .glass-card {
        padding: 30px;
    }
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Funky Polish Additions --- */

/* Grain Overlay */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientText 3s linear infinite;
}

@keyframes gradientText {
    to {
        background-position: 200% center;
    }
}

/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

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

/* 3D Tilt Base Styles */
.tilt-card {
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

/* --- Modals --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 11, 46, 0.8);
    backdrop-filter: blur(10px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    /* Flexbox Centering */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 100dvh;
    /* Use dynamic viewport height */
}

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

.modal {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 90%;
    max-width: 900px;
    height: fit-content;
    max-height: 90vh;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 50px 100px rgba(26, 11, 46, 0.3);
    padding: 40px;
    overflow-y: auto;
    border-radius: 20px;
    transform: scale(0.9);
}

.modal.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--deep-purple);
    transition: transform 0.3s;
    z-index: 10;
}

.modal-close:hover {
    transform: rotate(90deg) scale(1.1);
    color: var(--secondary-color);
}

.modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 30px;
}

.modal-image {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(26, 11, 46, 0.05);
    transform: rotate(-2deg);
    border: 5px solid #fff;
}

.modal-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-price {
    font-family: var(--font-main);
    font-size: 2.5rem;
    color: var(--primary-color);
    margin: 30px 0;
    font-weight: 800;
}

@media (max-width: 768px) {
    .modal-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .modal {
        padding: 20px;
        padding-top: 50px;
        /* Space for close button */
        width: 100%;
        height: 100dvh;
        /* Full screen height */
        max-height: 100dvh;
        border-radius: 0;
        /* No rounded corners in fullscreen */
        overflow-y: auto;
        /* Enable scrolling */
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    .modal-image {
        max-height: 200px;
        object-fit: cover;
    }

    .modal-close {
        position: sticky;
        top: 0;
        right: 0;
        float: right;
        z-index: 10001;
        background: var(--primary-color);
        color: #F5F5F5;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin: -10px -10px 10px auto;
        border: none;
        box-shadow: 0 4px 15px rgba(138, 92, 245, 0.4);
        /* Remove all animations/transitions */
        transition: none !important;
        transform: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* No hover/active effects on mobile */
    .modal-close:hover,
    .modal-close:active,
    .modal-close:focus {
        transform: none !important;
        background: var(--primary-color) !important;
    }

    /* Disable ALL animations/transitions inside modals on mobile */
    .modal,
    .modal *,
    .modal-overlay {
        animation: none !important;
        transition: none !important;
    }

    /* Instant show/hide for modals */
    .modal.active {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* Hide navbar when modal is open */
    body.modal-open .navbar {
        display: none !important;
    }

    body.modal-open .mobile-menu-toggle {
        display: none !important;
    }
}

/* --- DJ Deck Simulator (Teenage Engineering Style) --- */
.playground {
    padding-top: 0;
}

.te-wrapper {
    background: transparent;
    padding: 20px;
    max-width: 1200px;
    /* Increased Size */
    margin: 0 auto;
    box-shadow: none;
    border: none;
}

.te-casing {
    background: #d8d8d8;
    /* Lighter Matte Grey */
    border-radius: 8px;
    padding: 40px;
    /* Deeper Bezel */
    box-shadow:
        0 30px 60px rgba(26, 11, 46, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset 0 -2px 0 rgba(26, 11, 46, 0.2);
    font-family: var(--font-body);
    color: var(--deep-purple);
    position: relative;
    /* Subtle Noise Texture */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* Screws */
.te-casing::before,
.te-casing::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #B39DDB 0%, #8A5CF5 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        0 1px 1px rgba(26, 11, 46, 0.3);
    border: 1px solid #6A3CC5;
    z-index: 10;
}

.te-casing::before {
    top: 10px;
    left: 10px;
}

.te-casing::after {
    top: 10px;
    right: 10px;
}

/* Top Bar */
.te-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: #e0e0e0;
    padding: 15px 25px;
    border-radius: 4px;
    border: 1px solid #D1C4E9;
    box-shadow: inset 0 1px 3px rgba(26, 11, 46, 0.05);
}

.te-branding {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: -1px;
    color: var(--deep-purple);
}

.model-name {
    font-size: 0.8rem;
    opacity: 0.7;
    font-weight: bold;
}

/* OLED Screen */
.te-screen {
    background: var(--deep-purple);
    width: 300px;
    height: 80px;
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 15px rgba(255, 255, 255, 0.1),
        0 2px 5px rgba(26, 11, 46, 0.2);
    border: 2px solid #222;
}

/* Glass Reflection */
.te-screen::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 40%, transparent 100%);
    pointer-events: none;
}

.screen-header,
.screen-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #fff;
    font-family: var(--font-body);
    z-index: 2;
}

#visualizer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
    pointer-events: none;
}

/* te-speaker-grill removed */

/* Main Grid */
.te-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 25px;
}

.te-module {
    background: #eaeaea;
    border: 1px solid #D1C4E9;
    border-radius: 4px;
    padding: 25px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 2px 4px rgba(26, 11, 46, 0.05);
}

/* Panel Lines/Screws for Modules */
.te-module::before {
    content: '+';
    position: absolute;
    top: 5px;
    right: 5px;
    color: #aaa;
    font-size: 10px;
}

.te-label-group {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 0.6rem;
    font-weight: 800;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    /* Safeguard */
}

/* Platter Module */
.platter-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #EDE7F6;
    border-radius: 50%;
    box-shadow: inset 0 5px 15px rgba(26, 11, 46, 0.05);
    padding: 10px;
}

.platter {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(26, 11, 46, 0.4);
}

.vinyl-record {
    width: 96%;
    height: 96%;
    background: repeating-radial-gradient(#111 0,
            #111 2px,
            #1a1a1a 3px,
            #1a1a1a 4px);
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0 0 0 2px var(--deep-purple);
}

.vinyl-record.spinning {
    animation: spin 1.8s linear infinite;
}

.vinyl-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38%;
    height: 38%;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(26, 11, 46, 0.5);
}

/* Tone Arm - Fixed Alignment */
.tone-arm {
    position: absolute;
    top: -10%;
    /* Moved up */
    right: -10%;
    /* Moved right */
    width: 60px;
    height: 280px;
    /* Longer */
    transform-origin: 30px 30px;
    /* Pivot at base center */
    transform: rotate(-35deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 20;
}

.tone-arm.active {
    transform: rotate(18deg);
    /* Touches record */
}

.arm-base {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #D1C4E9, #8A5CF5);
    border-radius: 50%;
    border: 1px solid #6A3CC5;
    box-shadow: 0 5px 10px rgba(26, 11, 46, 0.3);
    position: relative;
}

.arm-base::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--deep-purple);
    border-radius: 50%;
    box-shadow: inset 0 2px 5px rgba(26, 11, 46, 0.5);
}

.arm-stick {
    width: 12px;
    height: 200px;
    background: linear-gradient(90deg, #EDE7F6, #fff, #EDE7F6);
    margin: -30px auto 0;
    border-radius: 6px;
    box-shadow: 2px 5px 10px rgba(26, 11, 46, 0.2);
}

.arm-head {
    width: 35px;
    height: 60px;
    background: #222;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 2px 5px 10px rgba(26, 11, 46, 0.3);
    position: relative;
}

/* Needle */
.arm-head::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 8px;
    background: #fff;
}

.transport-controls {
    display: flex;
    gap: 15px;
}

.te-btn {
    flex: 1;
    background: #f5f5f5;
    border: 1px solid #D1C4E9;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    box-shadow:
        0 4px 0 #B39DDB,
        0 5px 10px rgba(26, 11, 46, 0.05);
    cursor: pointer;
    transition: all 0.1s;
    position: relative;
}

.te-btn:active,
.te-btn.active {
    transform: translateY(4px);
    box-shadow:
        0 0 0 #B39DDB,
        inset 0 2px 5px rgba(26, 11, 46, 0.05);
    background: #eee;
}

.play-btn {
    color: var(--primary-color);
}

.cue-btn {
    color: var(--secondary-color);
}

/* Mixer Module */
.mixer-module {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.eq-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.te-knob-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.te-knob-wrapper label {
    font-size: 0.65rem;
    font-weight: bold;
    color: var(--deep-purple);
    white-space: nowrap;
    /* Prevent wrapping */
}

/* Realistic Knobs */
.te-knob {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    cursor: ns-resize;
    box-shadow:
        0 5px 10px rgba(26, 11, 46, 0.2),
        0 10px 20px rgba(26, 11, 46, 0.05);
    /* Knurled Texture */
    background:
        repeating-conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.1) 0deg,
            rgba(255, 255, 255, 0.1) 2deg,
            transparent 2deg,
            transparent 4deg),
        linear-gradient(135deg, #EDE7F6, #8A5CF5);
}

.te-knob::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: linear-gradient(135deg, #f0f0f0, #D1C4E9);
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.te-knob::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    width: 4px;
    height: 15px;
    background: #333;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Colored Caps */
/* Colored Caps (Brand Palette) */
.te-knob.red::before {
    background: radial-gradient(circle, #FF4D6D, #D00030);
    /* Pink */
}

.te-knob.green::before {
    background: radial-gradient(circle, #8A5CF5, #5A2CB5);
    /* Purple */
}

.te-knob.blue::before {
    background: radial-gradient(circle, #4CC9F0, #0090C0);
    /* Blue */
}

.te-knob.orange::before {
    background: radial-gradient(circle, #FFD166, #CC9900);
    /* Yellow */
}

.te-knob.white::before {
    background: radial-gradient(circle, #fff, #e0e0e0);
}

.te-knob.white::after {
    background: #333;
}

.fader-column {
    display: flex;
    gap: 15px;
}

.te-fader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
}

.te-fader.vertical {
    writing-mode: bt-lr;
    /* IE */
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    width: 30px;
    /* Wider touch area */
    height: 150px;
    background: #D1C4E9;
    outline: none;
    border-radius: 15px;
    /* Track styling */
    box-shadow: inset 0 2px 5px rgba(26, 11, 46, 0.2);
}

.te-fader-wrapper label {
    font-size: 0.65rem;
    font-weight: bold;
    color: var(--deep-purple);
    white-space: nowrap;
    margin-top: 5px;
}

.crossfader-area {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.te-crossfader {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 40px;
    /* Touch area */
}

.te-crossfader::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: #222;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(26, 11, 46, 0.5);
}

.te-crossfader::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 30px;
    width: 60px;
    background: linear-gradient(to bottom, var(--deep-purple), #333);
    margin-top: -11px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow:
        0 2px 5px rgba(26, 11, 46, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid #111;
}

.xf-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    margin-top: 5px;
    font-weight: bold;
    color: var(--deep-purple);
}

/* FX Module */
.fx-controls {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.sampler-pads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: auto;
}

/* --- Pads --- */
.te-pad {
    background: #333;
    border: none;
    border-radius: 4px;
    aspect-ratio: 1;
    color: #6A3CC5;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.1),
        inset -1px -1px 2px rgba(26, 11, 46, 0.5),
        3px 3px 6px rgba(26, 11, 46, 0.3);
    transition: all 0.05s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.te-pad:active,
.te-pad.active {
    transform: scale(0.98);
    /* Scale instead of translate to avoid "jumping" */
    box-shadow:
        inset 2px 2px 5px rgba(26, 11, 46, 0.5),
        inset -1px -1px 2px rgba(255, 255, 255, 0.1);
    background: var(--deep-purple);
    color: #fff;
}

.te-pad.recording-active {
    background: #ff0000;
    color: white;
    box-shadow: 0 0 15px #ff0000;
    animation: pulse-rec 0.5s infinite;
}

/* --- Transport Controls (Play/Cue) --- */
.transport-controls {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.te-btn-large {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Round like CDJ */
    border: 4px solid #222;
    /* Bezel */
    background: #333;
    color: var(--deep-purple);
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    box-shadow:
        0 5px 10px rgba(26, 11, 46, 0.4),
        inset 1px 1px 2px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.te-btn-large::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(5px);
    transition: opacity 0.2s;
}

.te-btn-large:active,
.te-btn-large.active {
    transform: translateY(2px);
    box-shadow:
        0 2px 5px rgba(26, 11, 46, 0.4),
        inset 2px 2px 5px rgba(26, 11, 46, 0.6);
    color: #fff;
}

.te-btn-large:active::after,
.te-btn-large.active::after {
    opacity: 0.8;
}

#playBtn {
    border-color: #1a2a1a;
}

#playBtn:active,
#playBtn.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow:
        0 0 20px rgba(138, 92, 245, 0.4),
        inset 2px 2px 5px rgba(26, 11, 46, 0.3);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    border-color: var(--primary-color);
}

#cueBtn {
    border-color: #2a1a1a;
    color: var(--secondary-color);
}

#cueBtn:active,
#cueBtn.active {
    background: var(--secondary-color);
    color: #fff;
    box-shadow:
        0 0 20px rgba(255, 77, 109, 0.4),
        inset 2px 2px 5px rgba(26, 11, 46, 0.3);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    border-color: var(--secondary-color);
}

/* --- FX & Sampler Controls --- */
.fx-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.sampler-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
}

.te-btn-small {
    min-width: 40px;
    /* Was fixed width 40px */
    width: auto;
    /* Allow expansion for text */
    padding: 0 6px;
    /* Add padding for text */
    height: 40px;
    border-radius: 4px;
    background: #e0e0e0;
    border: none;
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.8),
        inset -1px -1px 2px rgba(26, 11, 46, 0.05),
        2px 2px 5px rgba(26, 11, 46, 0.2);
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: bold;
    color: var(--deep-purple);
    cursor: pointer;
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Prevent text wrapping */
}

.te-btn-small:active,
.te-btn-small.active {
    background: #d0d0d0;
    box-shadow:
        inset 2px 2px 5px rgba(26, 11, 46, 0.2),
        inset -1px -1px 2px rgba(255, 255, 255, 0.5);
    transform: translateY(1px);
}

.te-btn-small.recording {
    background: #ff4444;
    color: white;
    box-shadow: 0 0 10px #ff4444;
}

.te-btn-small.recording-active {
    background: #ff0000;
    animation: pulse-rec 1s infinite;
}

.te-btn-mini {
    width: 30px;
    height: 20px;
    border-radius: 2px;
    background: #D1C4E9;
    border: none;
    font-family: var(--font-main);
    font-size: 10px;
    color: var(--deep-purple);
    cursor: pointer;
    box-shadow: 1px 1px 3px rgba(26, 11, 46, 0.2);
}

.te-btn-mini:active {
    background: #B39DDB;
    transform: translateY(1px);
}

/* VU Meter */
.vu-meter {
    width: 10px;
    height: 60px;
    background: #222;
    border-radius: 2px;
    padding: 2px;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.vu-segment {
    width: 100%;
    height: 20%;
    background: var(--deep-purple);
    border-radius: 1px;
    transition: background 0.05s;
}

.vu-segment.active.green {
    background: #00ff00;
    box-shadow: 0 0 5px #00ff00;
}

.vu-segment.active.orange {
    background: #ffaa00;
    box-shadow: 0 0 5px #ffaa00;
}

.vu-segment.active.red {
    background: #ff0000;
    box-shadow: 0 0 5px #ff0000;
}

.hot-cue.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 0 8px var(--primary-color);
}

@keyframes pulse-rec {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.te-pads-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Mobile Responsive */
/* Mobile Responsive */
@media (max-width: 1024px) {
    .te-wrapper {
        padding: 10px;
        max-width: 100%;
    }

    .te-casing {
        padding: 15px 10px;
        /* Compact padding to keep it tight */
        box-shadow:
            0 10px 20px rgba(26, 11, 46, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            inset 0 -1px 0 rgba(26, 11, 46, 0.1);
        /* Reduced from 30px 60px 0.4 */
    }

    .te-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* Reduced from 20px for cohesive look */
    }

    .te-top-bar {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }

    .te-branding {
        text-align: center;
        margin-bottom: 10px;
    }

    .te-screen {
        width: 100%;
        height: 100px;
        /* Taller on mobile for better visibility */
    }

    .mixer-module {
        flex-direction: column;
        /* Stack mixer columns */
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    .eq-column,
    .fader-column {
        width: 100%;
        justify-content: space-around;
        flex-direction: row;
        /* Horizontal Knobs */
    }

    .crossfader-area {
        position: relative;
        width: 100%;
        margin-top: 20px;
        bottom: 0;
        left: 0;
    }

    .tone-arm {
        display: none;
        /* Hide complex arm on mobile */
    }

    .te-module {
        width: 100%;
        padding: 15px;
        /* Reduced padding */
    }

    /* Team/Carousel Mobile Fixes */
    .carousel-window {
        width: 100%;
        overflow: hidden;
    }

    .carousel-track {
        padding-left: 20px;
        /* Peek effect */
    }

    .team-card {
        flex: 0 0 260px;
        /* Fluid flex width */
        min-width: 260px;
        aspect-ratio: 3/4;
        /* Maintain portrait ratio */
        height: auto;
        /* Let aspect-ratio dictate height */
        margin-right: 15px;
    }

    .hero-btn {
        padding: 15px 35px;
        font-size: 0.9rem;
    }

    /* Typography Fixes */
    h1,
    h2,
    h3,
    .section-title {
        word-break: keep-all;
        /* Prevent awkward word splitting */
        overflow-wrap: normal;
        hyphens: none;
    }

    .cta-section {
        padding: 40px 20px;
    }

    .cta-section h2 {
        font-size: 2rem;
        /* Smaller size to prevent wrapping issues */
        padding: 0 10px 10px 10px;
        /* Add padding to prevent clipping of "?" */
        line-height: 1.2;
    }

    .cta-section p {
        font-size: 1rem;
        line-height: 1.4;
        /* Reduce line height */
        margin-bottom: 30px;
        padding: 0 10px;
    }
}

/* Desktop / Wide Screens */
@media (min-width: 1025px) {
    .te-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        /* Strict 3-column grid */
        gap: 25px;
    }
}

/* Musical Note Animation */
/* Musical Note Animation (Enhanced) */
.musical-note {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 2rem;
    font-weight: bold;
    animation: floatUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    text-shadow: 0 0 15px currentColor;
    /* Glow effect */
    opacity: 0;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.5);
        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: translateY(-20px) rotate(var(--rotation)) scale(1.1);
    }

    100% {
        transform: translateY(-150px) rotate(var(--rotation)) scale(0.8);
        opacity: 0;
    }
}

/* --- Preloader --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    /* Matches site background (#E6E6E6) */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s;
}

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.vinyl-spinner {
    width: 100px;
    height: 100px;
    animation: spin 1s linear infinite;
}

.vinyl-record-sm {
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: 50%;
    position: relative;
    /* Grooves */
    background: repeating-radial-gradient(#111 0,
            #111 2px,
            #222 3px,
            #222 4px);
    box-shadow: 0 0 20px rgba(138, 92, 245, 0.5);
    /* Glow */
}

.vinyl-label-sm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    background: #fff;
    border-radius: 50%;
    overflow: hidden;
    padding: 2px;
}

.vinyl-label-sm img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.loading-text {
    font-family: var(--font-wide);
    color: var(--deep-purple);
    /* Dark text for light background */
    font-size: 1.2rem;
    letter-spacing: 4px;
    animation: pulse 1.5s infinite ease-in-out;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* --- FAQ Section --- */
.faq-accordion {
    max-width: 800px;
    margin: 40px auto 0;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
}

.faq-question {
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.faq-open .faq-question i {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: #aaa;
    line-height: 1.6;
}

.faq-item.faq-open .faq-answer {
    max-height: 200px;
    /* Adjust as needed */
    padding-bottom: 20px;
}

/* --- Custom Cursor --- */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 100000;
    transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
    display: none;
    /* Hidden on mobile by default */
}

@media (min-width: 1025px) {
    .custom-cursor {
        display: block;
    }

    body {
        cursor: none;
        /* Hide default cursor on body */
    }

    a,
    button,
    .te-knob,
    .te-fader,
    .te-pad,
    .faq-question,
    input,
    .gallery-item {
        cursor: none;
        /* Ensure custom cursor is used */
    }
}

.custom-cursor.hover {
    width: 50px;
    height: 50px;
    background-color: rgba(138, 92, 245, 0.2);
    border-color: transparent;
}

/* Mobile Responsive Adjustments */

/* --- Spacing Standardization (Mobile) --- */
@media (max-width: 768px) {
    #gallery {
        padding-bottom: 80px;
        /* Reduced from 150px for mobile balance */
    }

    .cta-section {
        margin-bottom: 60px;
        /* Standardize with other section gaps */
    }

    /* Fix header-to-content visual gaps */
    .marquee-container {
        padding-top: 20px;
        /* Was 40px */
    }

    .rent-content {
        padding: 30px 20px;
        /* Increased top/bottom padding for better spacing */
    }

    /* Hero Subtitle - Readable size with forced line break */
    .hero-subtitle {
        font-size: 1rem !important;
        /* Larger, readable size */
        letter-spacing: 1px !important;
        padding: 0 15px !important;
        line-height: 1.8 !important;
    }

    /* Show line break on mobile only */
    .mobile-break {
        display: block;
    }

    /* Gallery/Vibe - Larger images on mobile */
    .gallery-item {
        flex: 0 0 70vw;
        /* Much larger width */
        height: 50vw;
        max-height: none;
        border-radius: 15px;
    }

    /* Submit button - Hide "ЗАЯВКУ" on mobile */
    .submit-btn .btn-text-full {
        display: none;
    }

    .submit-btn .btn-text-short {
        display: inline;
    }
}

/* Hide Playground on Mobile and Tablet */
@media (max-width: 1024px) {
    #playground {
        display: none !important;
    }
}

/* Hide About Section Vinyl on Mobile */
@media (max-width: 768px) {
    .about-visual-card {
        display: none !important;
    }
}