:root {
    --dc-black: #000000;
    --dc-white: #ffffff;
    --dc-pink: #EC008C;
    --dc-panel: #0d0d0f;
    --dc-panel-2: #151519;
    --dc-muted: #b7b7bd;
    --dc-border: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--dc-black);
    color: var(--dc-white);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

a { color: var(--dc-pink); }
a:hover { color: #ff4db8; }

.site-nav {
    background: rgba(0, 0, 0, 0.86);
    border-bottom: 1px solid var(--dc-border);
    backdrop-filter: blur(14px);
}

.nav-logo { height: 38px; width: auto; max-width: 75% !important }
.nav-link { color: rgba(255, 255, 255, 0.82); }
.nav-link:hover, .nav-link:focus { color: var(--dc-pink); }

.section-pad { padding: 96px 0; }
.hero { min-height: 92vh; display: flex; align-items: center; padding-top: 140px; }
.hero h1, h2 { font-weight: 800; letter-spacing: -0.04em; }
.hero h1 { font-size: clamp(3.4rem, 10vw, 8rem); line-height: 0.9; }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: 1.2rem; font-weight: 750; }
.lead { font-size: clamp(1.1rem, 2vw, 1.45rem); color: #f1f1f1; max-width: 760px; }
.hero-note { color: var(--dc-muted); max-width: 720px; }
.eyebrow {
    color: var(--dc-pink);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.hero-logo { width: min(100%, 380px); filter: drop-shadow(0 0 48px rgba(236, 0, 140, 0.18)); }
.cartelux-logo { width: min(100%, 360px); }

.border-top-soft { border-top: 1px solid var(--dc-border); }
.bg-panel { background: linear-gradient(180deg, var(--dc-panel), var(--dc-black)); }
.muted { color: var(--dc-muted); }
.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dc-pink);
    text-decoration: none;
    font-weight: 750;
}
.text-link:hover { text-decoration: underline; }

.info-card, .mixcloud-card {
    background: linear-gradient(145deg, var(--dc-panel-2), #080809);
    border: 1px solid var(--dc-border);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
}

.event-list { list-style: none; padding: 0; margin: 0; }
.event-list li {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--dc-border);
}
.event-list li:last-child { border-bottom: none; }
.event-date { color: var(--dc-pink); font-weight: 800; }
.event-title { font-weight: 700; }
.event-time { color: var(--dc-muted); white-space: nowrap; }

.mixcloud-card iframe {
    border-radius: 12px;
    background: #111;
}

.link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.link-grid a {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 18px 20px;
    border: 1px solid var(--dc-border);
    border-radius: 18px;
    color: var(--dc-white);
    text-decoration: none;
    background: var(--dc-panel);
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}
.link-grid a:hover {
    transform: translateY(-2px);
    color: var(--dc-pink);
    border-color: rgba(236, 0, 140, 0.65);
}
.link-grid i { color: var(--dc-pink); font-size: 1.2rem; width: 24px; text-align: center; }

.site-footer {
    border-top: 1px solid var(--dc-border);
    padding: 28px 0;
    color: var(--dc-muted);
    text-align: center;
}
.site-footer p { margin: 0; }

@media (max-width: 991.98px) {
    .section-pad { padding: 72px 0; }
    .hero { min-height: auto; padding-top: 130px; }
    .event-list li { grid-template-columns: 1fr; gap: 0.25rem; }
    .event-time { white-space: normal; }
}

@media (max-width: 575.98px) {
    .link-grid { grid-template-columns: 1fr; }
    .info-card, .mixcloud-card { padding: 22px; border-radius: 20px; }
}

.hero-visual {
    position: relative;
    display: inline-block;
    width: min(100%, 420px);
}
.hero-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center;
    border-radius: 30px;
    border: 1px solid var(--dc-border);
    filter: grayscale(100%);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}
.hero-logo-overlay {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: 72%;
    max-width: 310px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
}
.live-cta-wrap {
    margin-top: 2rem;
}
.live-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.25rem;
    border-radius: 999px;
    border: 1px solid rgba(236, 0, 140, 0.68);
    background: rgba(236, 0, 140, 0.14);
    color: var(--dc-white);
    text-decoration: none;
    font-weight: 850;
    letter-spacing: 0.01em;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.live-cta:hover {
    color: var(--dc-white);
    background: rgba(236, 0, 140, 0.24);
    border-color: var(--dc-pink);
    transform: translateY(-2px);
}
.live-cta.is-live {
    animation: livePulse 2.4s ease-in-out infinite;
}
.live-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--dc-muted);
    display: inline-block;
}
.live-cta.is-live .live-dot {
    background: var(--dc-pink);
    box-shadow: 0 0 0 rgba(236, 0, 140, 0.55);
    animation: dotPulse 1.8s ease-in-out infinite;
}
.live-meta {
    margin: 0.75rem 0 0;
    color: var(--dc-muted);
    font-size: 0.95rem;
}
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 0, 140, 0.28); }
    50% { box-shadow: 0 0 32px 8px rgba(236, 0, 140, 0.22); }
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 0, 140, 0.58); }
    50% { box-shadow: 0 0 0 8px rgba(236, 0, 140, 0); }
}

@media (max-width: 991.98px) {
    .hero-visual { width: min(100%, 360px); }
}