/* ============================================================
   UNICHORD MUSIC GROUP
   Inspired by because-recollection.com · 84.Paris DNA
   ============================================================ */

/* ── Tokens ── */
:root {
    --c-bg:       #080808;
    --c-bg-2:     #0f0f0f;
    --c-bg-3:     #161616;
    --c-light:    #f2f0ec;
    --c-white:    #ffffff;
    --c-muted:    rgba(242,240,236,0.4);
    --c-dim:      rgba(242,240,236,0.18);

    /* Two signature accent colours — like Because's blue + orange-red */
    --c-accent:   #c8ff00;   /* lime — primary */
    --c-warm:     #e8601c;   /* burnt orange — secondary surprise */

    --font:       'Montserrat', sans-serif;
    --font-body:  'Inter', sans-serif;

    --px:   clamp(20px, 4vw, 64px);
    --py:   clamp(72px, 9vw, 128px);

    --expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease: cubic-bezier(0.25, 1, 0.5, 1);
    --t1: 0.18s ease;
    --t2: 0.38s var(--expo);
    --t3: 0.65s var(--expo);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body { font-family:var(--font-body); background:var(--c-bg); color:var(--c-light); line-height:1.6; overflow-x:hidden; }
img  { max-width:100%; height:auto; display:block; }
a    { text-decoration:none; color:inherit; transition:var(--t1); }
ul   { list-style:none; }
button { font-family:var(--font); border:none; cursor:pointer; background:none; }
::selection { background:var(--c-accent); color:#000; }

/* ── Layout ── */
.container       { max-width:1240px; margin:0 auto; padding:0 var(--px); }
.container-wide  { max-width:1440px; margin:0 auto; padding:0 var(--px); }

/* ── Section label ── */
.section-label {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font);
    font-size:0.6rem;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--c-accent);
    margin-bottom:14px;
}
.section-label::before {
    content:'';
    width:18px; height:1px;
    background:var(--c-accent);
    flex-shrink:0;
}

/* ════════════════════
   CUSTOM CURSOR
════════════════════ */
@media (pointer:fine) {
    body { cursor:none; }
    a,button,[role=button] { cursor:none; }
}

.cursor {
    position:fixed;
    width:8px; height:8px;
    background:var(--c-accent);
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%,-50%);
    transition:width var(--t1), height var(--t1), opacity var(--t1);
    mix-blend-mode:difference;
}
.cursor.hover { width:40px; height:40px; opacity:0.6; }

.cursor-follower {
    position:fixed;
    width:32px; height:32px;
    border:1px solid rgba(200,255,0,0.35);
    border-radius:50%;
    pointer-events:none;
    z-index:9998;
    transform:translate(-50%,-50%);
    transition:transform 0.12s var(--ease), width 0.28s var(--ease), height 0.28s var(--ease), border-color 0.2s;
}
.cursor-follower.hover { width:56px; height:56px; border-color:rgba(200,255,0,0.6); }

/* ════════════════════
   NAVIGATION
════════════════════ */
.navbar {
    position:fixed;
    inset:0 0 auto 0;
    z-index:900;
}
.navbar::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(to bottom,rgba(8,8,8,0.6) 0%,transparent 100%);
    pointer-events:none;
    transition:opacity var(--t2);
}
.navbar.scrolled::before { opacity:0; }
.navbar.scrolled {
    background:rgba(8,8,8,0.94);
    backdrop-filter:blur(20px) saturate(1.3);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);
    border-bottom:1px solid var(--c-dim);
}

.nav-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px var(--px);
    transition:padding var(--t2);
}
.navbar.scrolled .nav-inner { padding-top:14px; padding-bottom:14px; }

.logo { display:flex; align-items:center; position:relative; z-index:2; }
.logo-image {
    height:50px; width:auto;
    filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.15));
    transition:var(--t2);
}
.navbar.scrolled .logo-image { height:38px; filter:brightness(0) invert(1); }
.logo-image:hover { opacity:0.6; }

.nav-menu {
    display:flex;
    align-items:center;
    gap:2px;
    position:relative; z-index:2;
}
.nav-link {
    font-family:var(--font);
    font-size:0.65rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(242,240,236,0.6);
    padding:8px 14px;
    border-radius:100px;
    transition:color var(--t1);
}
.nav-link:hover,.nav-link.active { color:var(--c-white); }
.nav-cta {
    color:var(--c-accent) !important;
    border:1px solid rgba(200,255,0,0.3);
    background:rgba(200,255,0,0.04);
    margin-left:8px;
}
.nav-cta:hover { background:var(--c-accent); color:#000 !important; border-color:var(--c-accent); }

.hamburger {
    display:none;
    flex-direction:column;
    gap:5px;
    padding:8px;
    z-index:1001;
    position:relative;
}
.hamburger span {
    display:block;
    width:22px; height:1.5px;
    background:var(--c-white);
    transform-origin:center;
    transition:var(--t2);
}
.hamburger.active span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ════════════════════════════════════════
   PAGE LOAD — clean orchestrated reveal
════════════════════════════════════════ */
.hero-col-left,
.hero-col-centre,
.hero-col-right {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s var(--expo), transform 0.9s var(--expo);
}
.hero-loaded .hero-col-left   { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.hero-loaded .hero-col-centre { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
.hero-loaded .hero-col-right  { opacity: 1; transform: translateY(0); transition-delay: 0.32s; }

/* ════════════════════════════════════════
   HERO — Apple-like 3-column
════════════════════════════════════════ */
.hero {
    position: relative;
    height: 100svh;
    min-height: 640px;
    background: #080808;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Ambient glows — machen das Glas sichtbar */
.hero::before {
    content: '';
    position: absolute;
    top: -10%; left: -5%;
    width: 55vw; height: 55vw;
    max-width: 700px; max-height: 700px;
    background: radial-gradient(circle, rgba(200,255,0,0.18) 0%, rgba(200,255,0,0.06) 35%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -15%; right: -5%;
    width: 50vw; height: 50vw;
    max-width: 640px; max-height: 640px;
    background: radial-gradient(circle, rgba(232,96,28,0.16) 0%, rgba(232,96,28,0.05) 35%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Extra Glow-Punkte via Klasse */
.hero-glow {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}
.hero-glow--centre {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw; height: 40vw;
    max-width: 520px; max-height: 520px;
    background: radial-gradient(circle, rgba(255,255,255,0.055) 0%, transparent 65%);
}
.hero-glow--top-right {
    top: 5%; right: 5%;
    width: 28vw; height: 28vw;
    max-width: 360px; max-height: 360px;
    background: radial-gradient(circle, rgba(160,216,255,0.12) 0%, transparent 70%);
}

/* Three-column grid */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    position: absolute;
    inset: 0;
    padding-top: 68px; /* account for fixed navbar */
    z-index: 1;
}

/* Divider lines between columns */
.hero-divider {
    background: rgba(255,255,255,0.08);
    align-self: stretch;
}

/* ── Shared column base — Glassmorphism ── */
.hero-col-left,
.hero-col-centre,
.hero-col-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(28px, 4vw, 60px) clamp(24px, 4vw, 52px);
    position: relative;
    overflow: hidden;
    /* Glassmorphism */
    background: rgba(255,255,255,0.042);
    backdrop-filter: blur(18px) saturate(1.4) brightness(1.05);
    -webkit-backdrop-filter: blur(18px) saturate(1.4) brightness(1.05);
    /* Glänzender innerer Rand */
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.12),
        inset 0 1px 0 rgba(255,255,255,0.18);
    transition: background var(--t2);
}
.hero-col-left:hover,
.hero-col-centre:hover,
.hero-col-right:hover {
    background: rgba(255,255,255,0.062);
}

/* ── LEFT — artist name ── */
.hero-col-left {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: clamp(10px, 1.5vw, 18px);
}
.hero-artist-meta {
    font-family: var(--font);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(242,240,236,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.hero-artist-meta::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--c-accent);
    opacity: 0.7;
}
.hero-artist-meta::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background: var(--c-accent);
    opacity: 0.7;
}
/* Artist counter */
.hero-artist-count {
    font-family: var(--font);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--c-accent);
    opacity: 0.85;
}

/* BIG artist name */
.hero-artist-name-wrap {
    width: 100%;
    overflow: hidden;
}
.hero-artist-name {
    display: block;
    font-family: var(--font);
    font-size: clamp(1.6rem, 2.8vw, 3.8rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--c-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.hero-artist-name.name-out {
    opacity: 0; transform: translateY(-6%);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.hero-artist-name.name-in  { opacity: 0; transform: translateY(6%); }
.hero-artist-name.name-visible {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.55s var(--expo), transform 0.55s var(--expo);
}

/* Artist genre tag */
.hero-artist-genre {
    font-family: var(--font);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(242,240,236,0.55);
    display: block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.hero-artist-genre.name-out     { opacity: 0; transition: opacity 0.2s ease; }
.hero-artist-genre.name-in      { opacity: 0; }
.hero-artist-genre.name-visible { opacity: 1; transition: opacity 0.5s var(--expo) 0.1s; }

/* Bottom: CTA + dots — zentriert */
.hero-left-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
    margin-top: clamp(16px, 2.5vw, 28px);
}
.hero-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-white);
    transition: gap var(--t2), color var(--t1);
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(200,255,0,0.35);
}
.hero-cta-link:hover { color: var(--c-accent); gap: 16px; }
.slide-dots { display: flex; gap: 8px; align-items: center; }
.dot {
    width: 18px; height: 1.5px;
    background: rgba(242,240,236,0.15);
    border-radius: 2px;
    transition: var(--t2);
    padding: 0; cursor: pointer;
}
.dot.active { width: 32px; background: var(--c-accent); box-shadow: 0 0 8px rgba(200,255,0,0.3); }
.dot:hover:not(.active) { background: rgba(242,240,236,0.35); }

/* ── CENTRE — label identity ── */
.hero-col-centre {
    align-items: center;
    text-align: center;
    background: rgba(255,255,255,0.012);
    gap: clamp(12px, 2vw, 20px);
}
.hero-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 1.8vw, 18px);
}
.hero-logo {
    height: clamp(44px, 5.5vw, 64px);
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.hero-label-name {
    font-family: var(--font);
    font-size: clamp(0.52rem, 0.75vw, 0.65rem);
    font-weight: 700;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(242,240,236,0.7);
}
.hero-label-sub {
    font-family: var(--font);
    font-size: clamp(0.44rem, 0.6vw, 0.55rem);
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--c-accent);
    opacity: 0.6;
}
.hero-centre-divider {
    width: 1px;
    height: clamp(28px, 4vw, 44px);
    background: rgba(255,255,255,0.1);
    margin: 0 auto;
}
.hero-est {
    font-family: var(--font);
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(242,240,236,0.2);
    font-weight: 500;
}

/* ── RIGHT — illustration ── */
.hero-col-right {
    justify-content: center;
    align-items: center;
    padding: clamp(32px, 4vw, 56px);
    position: relative;
    overflow: hidden;
}

/* Wrapper so all 4 illustrations occupy the same space */
.hero-illus-stack {
    position: relative;
    width: clamp(200px, 28vw, 400px);
    aspect-ratio: 1;
    flex-shrink: 0;
}

.hero-illustration {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s var(--expo), transform 0.8s var(--expo);
}
.hero-illustration.illus-visible {
    opacity: 1;
    transform: scale(1);
}
.hero-illustration svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Floating animation on illustrations */
@keyframes hero-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
.hero-illus-inner {
    animation: hero-float 6s ease-in-out infinite;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Progress bar ── */
.hero-progress {
    position: absolute;
    top: 72px; /* below navbar */
    left: 0;
    height: 1px;
    width: 100%;
    background: rgba(255,255,255,0.04);
    z-index: 15;
    overflow: hidden;
}
.hero-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-accent);
    transform-origin: left;
    transform: scaleX(0);
    opacity: 0.6;
    transition: transform 5.5s linear;
}
.hero-progress.running::after { transform: scaleX(1); }
.hero-progress.reset::after   { transition: none; transform: scaleX(0); }

/* ── Scroll hint ── */

/* Scroll hint */
.hero-scroll-wrap {
    position: absolute;
    bottom: clamp(20px, 3vw, 40px);
    right: clamp(16px, 2vw, 32px);
    z-index: 10;
}
.hero-scroll-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(242,240,236,0.28);
}
.scroll-dot { animation: scrollpulse 2s ease-in-out infinite; }
@keyframes scrollpulse {
    0%,100% { transform: translateY(0); opacity: .4; }
    50%      { transform: translateY(5px); opacity: .8; }
}

/* ════════════════════
   MARQUEE DIVIDER
════════════════════ */
.marquee-divider {
    overflow:hidden;
    border-top:1px solid var(--c-dim);
    border-bottom:1px solid var(--c-dim);
    background:var(--c-bg-2);
    padding:12px 0;
}
.marquee-track {
    display:flex;
    gap:0;
    white-space:nowrap;
    animation:marquee 22s linear infinite;
}
.marquee-track span {
    font-family:var(--font);
    font-size:0.62rem;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--c-muted);
    padding:0 20px;
}
.marquee-track .dot-sep { color:var(--c-accent); padding:0 4px; }
@keyframes marquee {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }
}

/* ════════════════════
   RELEASES
════════════════════ */
.releases {
    background:var(--c-light);
    color:var(--c-bg);
    overflow:hidden;
}

/* Header — asymmetric, text bleeds */
.releases-header {
    padding:var(--py) 0 0;
}
.releases-header-inner {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    padding-bottom:clamp(32px, 4vw, 56px);
}
.releases-kicker {
    display:flex;
    align-items:center;
    gap:10px;
}
.kicker-line {
    display:block;
    width:24px; height:1px;
    background:var(--c-warm);
    flex-shrink:0;
}
.kicker-text {
    font-family:var(--font);
    font-size:0.6rem;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--c-warm);
}
.releases-title {
    font-family:var(--font);
    font-size:clamp(2.8rem, 7vw, 7rem);
    font-weight:900;
    line-height:0.88;
    letter-spacing:-0.04em;
    text-transform:uppercase;
    color:var(--c-bg);
    margin-top:14px;
}
.releases-title em {
    font-style:italic;
    font-weight:300;
    color:var(--c-warm);
}

/* Horizontal scroll track */
.releases-scroll-outer {
    overflow-x:auto;
    padding:0 var(--px) var(--py);
    scrollbar-width:thin;
    scrollbar-color:rgba(0,0,0,0.15) transparent;
    -webkit-overflow-scrolling:touch;
}
.releases-scroll-outer::-webkit-scrollbar { height:3px; }
.releases-scroll-outer::-webkit-scrollbar-track { background:transparent; }
.releases-scroll-outer::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.2); border-radius:3px; }

.releases-track {
    display:grid;
    grid-template-columns:repeat(4, clamp(240px, 28vw, 360px));
    gap:24px;
    width:max-content;
}

/* Release Card */
.release-card {
    display:flex;
    flex-direction:column;
    gap:0;
    transition:transform var(--t2);
    will-change:transform;
}
.release-card:hover { transform:translateY(-6px); }

.release-img-wrap {
    position:relative;
    aspect-ratio:1;
    overflow:hidden;
    border-radius:6px;
    background:#ccc;
    margin-bottom:16px;
}
.release-img-wrap img {
    width:100%; height:100%;
    object-fit:cover;
    transition:transform var(--t3);
}
.release-card:hover .release-img-wrap img { transform:scale(1.05); }

.release-hover {
    position:absolute; inset:0;
    background:rgba(0,0,0,0.35);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity var(--t2);
    border-radius:6px;
}
.release-card:hover .release-hover { opacity:1; }

.play-circle {
    width:56px; height:56px;
    background:var(--c-warm);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--c-white);
    font-size:1.1rem;
    padding-left:3px;
    transition:var(--t2);
    box-shadow:0 4px 20px rgba(232,96,28,0.4);
}
.play-circle:hover { transform:scale(1.1); }

/* Card number — top right */
.release-num {
    position:absolute;
    top:12px; right:14px;
    font-family:var(--font);
    font-size:0.62rem;
    font-weight:800;
    letter-spacing:2px;
    color:rgba(255,255,255,0.45);
}

.release-meta {
    display:flex;
    flex-direction:column;
    gap:14px;
}
.release-tag {
    display:inline-block;
    font-family:var(--font);
    font-size:0.55rem;
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--c-warm);
    background:rgba(232,96,28,0.1);
    border:1px solid rgba(232,96,28,0.2);
    padding:3px 9px;
    border-radius:100px;
    margin-bottom:6px;
    display:block;
    width:fit-content;
}
.release-name {
    font-family:var(--font);
    font-size:1.2rem;
    font-weight:800;
    color:var(--c-bg);
    letter-spacing:-0.02em;
    margin-bottom:2px;
}
.release-by {
    font-family:var(--font-body);
    font-size:0.82rem;
    color:#666;
}
.release-stream {
    display:flex;
    gap:8px;
}
.release-stream a {
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.06);
    border-radius:50%;
    color:#666;
    font-size:0.9rem;
    transition:var(--t1);
}
.release-stream a:hover { background:var(--c-bg); color:var(--c-white); transform:translateY(-2px); }

/* ════════════════════
   PLAYER SECTION
════════════════════ */
.player-section {
    padding:var(--py) 0;
    background:var(--c-bg);
    position:relative;
    overflow:hidden;
}
.player-section::before {
    content:'';
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:480px; height:480px;
    background:radial-gradient(circle, rgba(200,255,0,0.05) 0%, transparent 70%);
    pointer-events:none;
}
.player-wrap {
    max-width:900px; margin:0 auto;
    background:var(--c-bg-2);
    border-radius:16px;
    padding:clamp(24px,4vw,52px);
    border:1px solid var(--c-dim);
}
.player-head { text-align:center; margin-bottom:32px; }
.player-eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font);
    font-size:0.58rem; font-weight:700;
    letter-spacing:4px; text-transform:uppercase;
    color:var(--c-accent); margin-bottom:12px;
}
.player-eyebrow::before,.player-eyebrow::after {
    content:''; display:block; width:14px; height:1px; background:var(--c-accent);
}
.player-title {
    font-family:var(--font);
    font-size:clamp(1.4rem,3vw,2rem);
    font-weight:800;
    color:var(--c-white);
    letter-spacing:-0.025em;
    margin-bottom:6px;
}
.player-title em { font-style:italic; font-weight:300; color:var(--c-muted); }
.player-sub { font-size:0.83rem; color:var(--c-muted); }

/* ════════════════════
   ARTISTS
════════════════════ */
.artists {
    padding:var(--py) 0;
    background:var(--c-bg);
}
.artists-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:clamp(36px, 5vw, 64px);
}
.artists-title {
    font-family:var(--font);
    font-size:clamp(2.4rem, 6.5vw, 6rem);
    font-weight:900;
    line-height:0.88;
    letter-spacing:-0.04em;
    text-transform:uppercase;
    color:var(--c-white);
    margin-top:12px;
}
.artists-title em { font-style:italic; font-weight:300; color:var(--c-accent); }
.artists-sub {
    font-size:0.9rem;
    color:var(--c-muted);
    line-height:1.75;
    text-align:right;
    max-width:220px;
}

.artists-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.artist-card { transition:transform var(--t2); cursor:pointer; }
.artist-card:hover { transform:translateY(-6px); }

.artist-img-wrap {
    position:relative;
    aspect-ratio:3/4;
    overflow:hidden;
    border-radius:6px;
    background:var(--c-bg-3);
    margin-bottom:12px;
}
.artist-img-wrap img {
    width:100%; height:100%;
    object-fit:cover;
    transition:transform var(--t3);
}
.artist-card:hover .artist-img-wrap img { transform:scale(1.04); }

/* ── Label Badge — oben rechts auf jedem Artist-Bild ── */
.artist-label-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(8,8,8,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    transition: transform var(--t2), background var(--t2), border-color var(--t2);
    z-index: 2;
}
.artist-label-badge img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.75;
    transition: opacity var(--t1);
}
.artist-card:hover .artist-label-badge {
    background: rgba(200,255,0,0.12);
    border-color: rgba(200,255,0,0.35);
    transform: scale(1.08);
}
.artist-card:hover .artist-label-badge img {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(200,255,0,0.5));
}

.artist-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.05) 50%);
    display:flex; align-items:flex-end; justify-content:center;
    padding:18px;
    opacity:0;
    transition:opacity var(--t2);
    border-radius:6px;
}
.artist-card:hover .artist-overlay { opacity:1; }
.artist-social { display:flex; gap:8px; }
.artist-social a {
    width:36px; height:36px;
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:50%;
    color:var(--c-white);
    display:flex; align-items:center; justify-content:center;
    font-size:0.85rem;
    transition:var(--t1);
}
.artist-social a:hover { background:var(--c-accent); color:#000; border-color:var(--c-accent); }

.artist-name {
    font-family:var(--font);
    font-size:0.95rem;
    font-weight:700;
    color:var(--c-white);
    letter-spacing:-0.01em;
    margin-bottom:3px;
}
.artist-genre {
    font-family:var(--font);
    font-size:0.62rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--c-muted);
}

/* ════════════════════
   CONTACT
════════════════════ */
.contact {
    padding:var(--py) 0;
    background:var(--c-light);
    color:var(--c-bg);
}
.contact-head { margin-bottom:clamp(36px, 5vw, 60px); }
.contact-title {
    font-family:var(--font);
    font-size:clamp(2.4rem, 6vw, 5.5rem);
    font-weight:900;
    line-height:0.88;
    letter-spacing:-0.04em;
    text-transform:uppercase;
    color:var(--c-bg);
    margin-top:12px; margin-bottom:16px;
}
.contact-title em { font-style:italic; font-weight:300; color:var(--c-warm); }
.contact-sub { font-size:0.93rem; color:#666; }
.contact .section-label { color:var(--c-warm); }
.contact .section-label::before { background:var(--c-warm); }

/* ════════════════════
   DEMO
════════════════════ */
.demo {
    padding:var(--py) 0;
    background:var(--c-bg-2);
    position:relative; overflow:hidden;
}
.demo::after {
    content:'';
    position:absolute;
    bottom:-80px; right:-80px;
    width:400px; height:400px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(200,255,0,0.05) 0%, transparent 70%);
    pointer-events:none;
}
.demo-head { margin-bottom:clamp(36px, 5vw, 60px); }
.demo-title {
    font-family:var(--font);
    font-size:clamp(2.4rem, 6vw, 5.5rem);
    font-weight:900;
    line-height:0.88;
    letter-spacing:-0.04em;
    text-transform:uppercase;
    color:var(--c-white);
    margin-top:12px; margin-bottom:16px;
}
.demo-title em { font-style:italic; font-weight:300; color:var(--c-accent); }
.demo-sub { font-size:0.93rem; color:var(--c-muted); line-height:1.8; }

/* ════════════════════
   SHARED FORMS
════════════════════ */
.contact-form,
.demo-form {
    display:flex; flex-direction:column;
    gap:16px;
    max-width:700px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:7px; }

.form-group label {
    font-family:var(--font);
    font-size:0.62rem; font-weight:700;
    letter-spacing:2px; text-transform:uppercase;
    color:#777;
}
.contact .form-group label { color:#999; }

.form-group input,
.form-group textarea,
.form-group select {
    width:100%;
    padding:13px 16px;
    font-size:0.93rem;
    font-family:var(--font-body);
    border-radius:8px;
    outline:none;
    transition:border-color var(--t1), box-shadow var(--t1);
    -webkit-appearance:none; appearance:none;
}

/* Light form (contact) */
.contact .form-group input,
.contact .form-group textarea,
.contact .form-group select {
    color:var(--c-bg);
    background:#fff;
    border:1.5px solid rgba(0,0,0,0.1);
}
.contact .form-group input::placeholder,
.contact .form-group textarea::placeholder { color:#bbb; }
.contact .form-group input:focus,
.contact .form-group textarea:focus,
.contact .form-group select:focus {
    border-color:var(--c-warm);
    box-shadow:0 0 0 3px rgba(232,96,28,0.1);
}

/* Dark form (demo) */
.demo .form-group input,
.demo .form-group textarea,
.demo .form-group select {
    color:var(--c-white);
    background:var(--c-bg-3);
    border:1.5px solid var(--c-dim);
}
.demo .form-group input::placeholder,
.demo .form-group textarea::placeholder { color:rgba(242,240,236,0.22); }
.demo .form-group input:focus,
.demo .form-group textarea:focus,
.demo .form-group select:focus {
    border-color:var(--c-accent);
    box-shadow:0 0 0 3px rgba(200,255,0,0.08);
}
.demo .form-group select {
    background-color:var(--c-bg-3);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:38px;
}
.demo .form-group select option { background:var(--c-bg-3); color:var(--c-white); }
.contact .form-group select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    padding-right:38px;
}
.form-group textarea { resize:vertical; min-height:120px; }
.form-group input[type="file"] {
    padding:11px 16px;
    border-style:dashed;
    font-size:0.82rem;
    cursor:pointer;
}

/* Send button */
.btn-send {
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:13px 32px;
    font-family:var(--font);
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    border-radius:100px;
    transition:var(--t2);
    width:fit-content;
    background:var(--c-bg);
    color:var(--c-white);
}
.btn-send:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,0.35); }
.btn-send--accent { background:var(--c-accent); color:#000; }
.btn-send--accent:hover { background:#d4ff1a; box-shadow:0 6px 32px rgba(200,255,0,0.25); }

.form-status { padding:12px 16px; border-radius:8px; font-size:0.88rem; display:none; margin-top:4px; }
.form-status.success { display:block; background:#d4f7d4; color:#1a6e1a; border:1px solid #a8e6a8; }
.form-status.error   { display:block; background:#fde8e8; color:#8b1a1a; border:1px solid #f5c0c0; }

/* ════════════════════
   FOOTER
════════════════════ */
.footer {
    background:#050505;
    border-top:1px solid var(--c-dim);
    padding-top:64px;
}
.footer-top {
    display:grid;
    grid-template-columns:1.8fr 1fr;
    gap:80px;
    padding-bottom:56px;
    border-bottom:1px solid var(--c-dim);
    margin-bottom:0;
}
.footer-logo {
    height:44px; width:auto;
    filter:brightness(0) invert(1);
    margin-bottom:20px;
    opacity:0.85;
}
.footer-tagline {
    font-size:0.87rem;
    color:rgba(242,240,236,0.35);
    line-height:1.8;
    max-width:280px;
    margin-bottom:24px;
}
.footer-social { display:flex; gap:8px; }
.footer-social a {
    width:36px; height:36px;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--c-dim);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:0.82rem;
    color:rgba(242,240,236,0.45);
    transition:var(--t1);
}
.footer-social a:hover { background:var(--c-accent); border-color:var(--c-accent); color:#000; transform:translateY(-2px); }

.footer-cols {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}
.footer-col-title {
    font-family:var(--font);
    font-size:0.58rem;
    font-weight:700;
    letter-spacing:3.5px;
    text-transform:uppercase;
    color:rgba(242,240,236,0.22);
    margin-bottom:18px;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col li, .footer-col a {
    font-size:0.85rem;
    color:rgba(242,240,236,0.42);
    transition:var(--t1);
}
.footer-col a:hover { color:var(--c-white); transform:translateX(3px); }

/* Big wordmark — editorial footer signature */
.footer-wordmark {
    font-family:var(--font);
    font-size:clamp(4rem, 12vw, 14rem);
    font-weight:900;
    letter-spacing:-0.06em;
    text-transform:uppercase;
    color:transparent;
    -webkit-text-stroke:1px rgba(242,240,236,0.06);
    line-height:0.85;
    padding:20px 0 8px;
    user-select:none;
    overflow:hidden;
}
.footer-bottom {
    padding:20px 0;
    border-top:1px solid var(--c-dim);
    /* flex layout moved to new rule below */
}

/* ════════════════════
   FAQ
════════════════════ */
.faq {
    padding: var(--py) 0;
    background: var(--c-bg-3);
    position: relative;
    overflow: hidden;
}
.faq::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(200,255,0,0.03) 0%, transparent 70%);
    pointer-events: none;
}
.faq-head { margin-bottom: clamp(40px, 6vw, 72px); }
.faq-title {
    font-family: var(--font);
    font-size: clamp(2.4rem, 6.5vw, 6rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-top: 12px;
}
.faq-title em { font-style: italic; font-weight: 300; color: var(--c-accent); }

.faq-list {
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.faq-item {
    background: var(--c-bg-2);
    border: 1px solid var(--c-dim);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color var(--t2);
}
.faq-item:has(.faq-question[aria-expanded="true"]) {
    border-color: rgba(200,255,0,0.25);
}
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 32px);
    font-family: var(--font);
    font-size: clamp(0.88rem, 1.4vw, 1.05rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--c-white);
    text-align: left;
    transition: color var(--t1);
}
.faq-question:hover { color: var(--c-accent); }
.faq-question[aria-expanded="true"] { color: var(--c-accent); }

.faq-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border: 1px solid var(--c-dim);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-muted);
    transition: transform var(--t2), border-color var(--t2), color var(--t1), background var(--t2);
}
.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(90deg);
    border-color: var(--c-accent);
    color: var(--c-accent);
    background: rgba(200,255,0,0.06);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.42s var(--expo);
}
.faq-answer.open { grid-template-rows: 1fr; }
.faq-answer > div {
    overflow: hidden;
}
.faq-answer p {
    font-family: var(--font-body);
    font-size: 0.91rem;
    line-height: 1.75;
    color: rgba(242,240,236,0.6);
    padding: 0 clamp(20px, 3vw, 32px) clamp(18px, 2.5vw, 26px);
}
.faq-answer p a {
    color: var(--c-accent);
    text-decoration: underline;
    text-decoration-color: rgba(200,255,0,0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--t1);
}
.faq-answer p a:hover { text-decoration-color: var(--c-accent); }

/* ════════════════════
   PRE-FOOTER ARTIST LOGOS
════════════════════ */
.prefooter-artists {
    padding: clamp(48px, 7vw, 80px) 0;
    background: var(--c-bg);
    border-top: 1px solid var(--c-dim);
    border-bottom: 1px solid var(--c-dim);
}
.prefooter-label {
    font-family: var(--font);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(242,240,236,0.2);
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 44px);
}
.prefooter-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(32px, 6vw, 96px);
    flex-wrap: wrap;
}
.prefooter-logo-item {
    opacity: 0.45;
    transition: opacity var(--t2), transform var(--t2), filter var(--t2);
    display: flex; align-items: center;
}
.prefooter-logo-item:hover { opacity: 1; transform: translateY(-3px); }
.prefooter-logo-item img {
    height: clamp(32px, 5vw, 52px);
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.prefooter-logo-item:hover img { filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(200,255,0,0.3)); }

/* Farblogo — kein invert, nur Helligkeit + Kontrast anpassen */
.prefooter-logo-item--color img {
    filter: brightness(1.4) contrast(1.1) saturate(0.8);
}
.prefooter-logo-item--color:hover img {
    filter: brightness(1.8) contrast(1.1) saturate(1) drop-shadow(0 0 10px rgba(200,255,0,0.25));
}

/* ════════════════════
   FOOTER BOTTOM — two-column layout
════════════════════ */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-bottom p {
    font-size: 0.75rem;
    color: rgba(242,240,236,0.18);
}
.footer-bottom a {
    transition: color var(--t1);
}
.footer-bottom a:hover { color: rgba(242,240,236,0.5); }

/* ════════════════════
   AOS
════════════════════ */
[data-aos] { opacity:0; transition-property:transform,opacity; }
[data-aos].aos-animate { opacity:1; }
[data-aos="fade-up"]  { transform:translateY(20px); }
[data-aos="fade-up"].aos-animate  { transform:translateY(0); }
[data-aos="fade-right"]{ transform:translateX(-16px); }
[data-aos="fade-right"].aos-animate { transform:translateX(0); }

/* ════════════════════
   RESPONSIVE
════════════════════ */
@media (max-width:1100px) {
    .artists-grid { grid-template-columns:repeat(3,1fr); }
    .footer-top { grid-template-columns:1fr; gap:40px; }
    .footer-cols { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:768px) {
    .nav-menu {
        position:fixed;
        top:0; right:-100%;
        height:100dvh;
        width:min(300px,86vw);
        background:rgba(8,8,8,0.97);
        backdrop-filter:blur(20px);
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
        padding:40px 28px;
        gap:4px;
        transition:right var(--t2);
        border-left:1px solid var(--c-dim);
    }
    .nav-menu.active { right:0; }
    .nav-menu li { width:100%; }
    .nav-link { font-size:0.9rem; padding:12px 14px; display:block; width:100%; }
    .hamburger { display:flex; }

    /* Hero responsive — tablet */
    .hero-artist-name { font-size: clamp(1.4rem, 2.6vw, 3.2rem); }
    .hero-col-left, .hero-col-centre, .hero-col-right { padding: clamp(24px, 3vw, 48px) clamp(18px, 2.5vw, 36px); }
    .hero-illus-stack { width: clamp(160px, 22vw, 300px); }

    .releases-track { grid-template-columns:repeat(4, clamp(180px, 55vw, 280px)); }

    .artists-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .artists-head { flex-direction:column; align-items:flex-start; }
    .artists-sub { text-align:left; max-width:100%; }

    .form-row { grid-template-columns:1fr; }

    .footer-top { gap:32px; }
    .footer-cols { grid-template-columns:1fr 1fr; gap:24px; }
    .footer-wordmark { font-size:clamp(3rem,14vw,8rem); }
}

@media (max-width:480px) {
    :root { --py:60px; }

    .hero-artist-name { font-size: clamp(1.4rem, 6vw, 2.4rem); }

    /* Releases — 2×2 grid statt horizontal scroll auf Mobile */
    .releases-scroll-outer {
        overflow-x: visible;
        padding: 0 var(--px) var(--py);
    }
    .releases-track {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        width: 100%;
    }

    /* Player — responsive auf Mobile */
    .player-wrap {
        padding: 24px 16px 28px;
        border-radius: 12px;
        overflow: visible;
    }
    .player-head { margin-bottom: 20px; }
    #audioPlayer,
    .player-container {
        overflow: visible;
    }

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

    .footer-cols { grid-template-columns:1fr; gap:20px; }
    .btn-send { width:100%; justify-content:center; }
}

/* Hero — mobile stack */
@media (max-width: 600px) {
    .hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .hero-divider { display: none; }
    .hero-col-left {
        padding: clamp(80px, 18vw, 110px) 24px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .hero-col-centre {
        padding: 20px 24px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        flex-direction: row;
        gap: 16px;
    }
    .hero-logo-wrap { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
    .hero-logo { height: 32px; }
    .hero-centre-divider { display: none; }
    .hero-est { display: none; }
    .hero-col-right {
        padding: 24px;
        min-height: 200px;
    }
    .hero-illus-stack { width: 160px; }
    .hero-artist-name { font-size: clamp(1.4rem, 7vw, 2.4rem); }
    .hero-left-footer { position: relative; bottom: auto; left: auto; right: auto; margin-top: 20px; }
    .hero-scroll-wrap { display: none; }
}