/* =====================================================================
   PADLZ UNPLUGGED — v3
   ----------------------------------------------------------------------
   v2's UX-hiërarchie (info first) + v1's energie:
   - Grote display-titels met kleur-speling
   - DJ foto + sfeerbeelden moodboard
   - FAQ section voor uitleg event/spelvorm
   - Eén font (Inter) — variatie via weights/sizes
   - Class-naming: unplugged-{module}-{element}, gescoped onder .unplugged-page
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

.unplugged-page {
    /* Tokens */
    --unp-bg: #0a0f1a;
    --unp-bg-deep: #06080d;
    --unp-panel: #131b2c;
    --unp-panel-2: #1a2336;
    --unp-line: rgba(255,255,255,0.08);
    --unp-line-strong: rgba(255,255,255,0.14);
    --unp-text: #eaf0f6;
    --unp-muted: #8a97ad;
    --unp-cyan: #19b4ff;
    --unp-cyan-deep: #0a8ccf;
    --unp-cyan-soft: rgba(25,180,255,0.14);
    --unp-mag: #ff2e88;
    --unp-mag-soft: rgba(255,46,136,0.14);
    --unp-green: #36d77a;
    --unp-radius: 14px;
    --unp-radius-sm: 10px;

    container-type: inline-size;
    color: var(--unp-text);
    background: var(--unp-bg);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.45;
    position: relative;

    margin: -24px;
    overflow: hidden;
}
@media (max-width: 820px) { .unplugged-page { margin: -16px; } }

.unplugged-page *,
.unplugged-page *::before,
.unplugged-page *::after { box-sizing: border-box; }
.unplugged-page a { color: inherit; text-decoration: none; }

/* Display utility */
.unplugged-page .unplugged-display {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.92;
    text-transform: none;
}
.unplugged-page .unplugged-cy  { color: var(--unp-cyan); }
.unplugged-page .unplugged-mag { color: var(--unp-mag); }

/* Subtle glow */
.unplugged-page .unplugged-glow {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(60% 50% at 90% 0%, rgba(255,46,136,0.10), transparent 60%),
        radial-gradient(70% 60% at 0% 0%, rgba(25,180,255,0.16), transparent 60%);
}

/* Wrap */
.unplugged-page .unplugged-wrap {
    position: relative; z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(24px, 4cqi, 56px) clamp(20px, 3cqi, 40px);
}

/* =====================================================================
   TOP BAR — breadcrumb + status
   ===================================================================== */
.unplugged-page .unplugged-top {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: clamp(20px, 3cqi, 32px);
    border-bottom: 1px solid var(--unp-line);
    margin-bottom: clamp(24px, 3.5cqi, 40px);
}
.unplugged-page .unplugged-crumb {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--unp-muted);
}
.unplugged-page .unplugged-crumb svg { color: var(--unp-cyan); flex: 0 0 auto; }
.unplugged-page .unplugged-crumb-link {
    cursor: pointer;
    transition: color .15s ease;
}
.unplugged-page .unplugged-crumb-link:hover { color: var(--unp-text); }
.unplugged-page .unplugged-crumb-sep { opacity: 0.5; }
.unplugged-page .unplugged-crumb-current { color: var(--unp-text); font-weight: 600; }

.unplugged-page .unplugged-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px;
    padding: 6px 12px; border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid;
    text-transform: uppercase;
}
.unplugged-page .unplugged-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
}
.unplugged-page .unplugged-status-open {
    color: var(--unp-green);
    background: rgba(54,215,122,0.12);
    border-color: rgba(54,215,122,0.22);
}
.unplugged-page .unplugged-status-open .unplugged-status-dot {
    background: var(--unp-green); box-shadow: 0 0 0 3px rgba(54,215,122,0.18);
}
.unplugged-page .unplugged-status-full {
    color: var(--unp-mag);
    background: rgba(255,46,136,0.12);
    border-color: rgba(255,46,136,0.24);
}
.unplugged-page .unplugged-status-full .unplugged-status-dot {
    background: var(--unp-mag); box-shadow: 0 0 0 3px rgba(255,46,136,0.18);
}
.unplugged-page .unplugged-status-joined {
    color: var(--unp-cyan);
    background: var(--unp-cyan-soft);
    border-color: rgba(25,180,255,0.24);
}
.unplugged-page .unplugged-status-joined .unplugged-status-dot {
    background: var(--unp-cyan); box-shadow: 0 0 0 3px rgba(25,180,255,0.2);
}
.unplugged-page .unplugged-status-locked {
    color: var(--unp-muted);
    background: rgba(255,255,255,0.04);
    border-color: var(--unp-line);
}
.unplugged-page .unplugged-status-locked .unplugged-status-dot {
    background: var(--unp-muted); box-shadow: 0 0 0 3px rgba(138,151,173,0.2);
}

/* =====================================================================
   HERO — date tile + facts (UX hiërarchie) + BIG display title
   ===================================================================== */
.unplugged-page .unplugged-hero {
    background: var(--unp-panel);
    border: 1px solid var(--unp-line);
    border-radius: var(--unp-radius);
    padding: clamp(20px, 3cqi, 36px);
    margin-bottom: clamp(20px, 3cqi, 32px);
    position: relative;
    overflow: hidden;
}
.unplugged-page .unplugged-hero-brandrow {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--unp-muted);
    text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600;
    margin-bottom: clamp(14px, 2cqi, 18px);
}
.unplugged-page .unplugged-tag {
    color: var(--unp-mag);
    background: var(--unp-mag-soft);
    border: 1px solid rgba(255,46,136,0.28);
    padding: 3px 9px; border-radius: 999px;
    font-size: 10px; letter-spacing: 0.18em;
}

/* Big display title */
.unplugged-page .unplugged-hero-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(56px, 11cqi, 144px);
    line-height: 0.86;
    letter-spacing: -0.04em;
    margin: 0 0 clamp(18px, 2.4cqi, 26px);
    text-transform: uppercase;
}
.unplugged-page .unplugged-hero-title span { display: block; }
.unplugged-page .unplugged-hero-title .accent { color: var(--unp-cyan); }
.unplugged-page .unplugged-hero-title em {
    font-style: normal;
    color: var(--unp-mag);
}
.unplugged-page .unplugged-hero-subtitle {
    font-size: 0.25em;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--unp-muted);
    margin-top: 8px;
    text-transform: uppercase;
}

/* Meta-strip — Wanneer + Waar + Spelvorm + Spelers + Kosten */
.unplugged-page .unplugged-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--unp-line);
    border: 1px solid var(--unp-line);
    border-radius: var(--unp-radius);
    overflow: hidden;
}
@container (min-width: 720px) {
    .unplugged-page .unplugged-meta { grid-template-columns: repeat(5, 1fr); }
}
.unplugged-page .unplugged-meta-cell {
    background: var(--unp-panel);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0; position: relative;
}
.unplugged-page .unplugged-meta-cell-date {
    background: linear-gradient(180deg, rgba(25,180,255,0.10), rgba(25,180,255,0.04));
    grid-column: span 2;
}
@container (min-width: 720px) {
    .unplugged-page .unplugged-meta-cell-date { grid-column: span 1; }
}
.unplugged-page .unplugged-meta-cell-date::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: var(--unp-cyan);
}
.unplugged-page .unplugged-meta-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--unp-muted);
}
.unplugged-page .unplugged-meta-label svg { color: var(--unp-cyan); flex: 0 0 auto; }
.unplugged-page .unplugged-meta-cell-date .unplugged-meta-label { color: var(--unp-cyan); }
.unplugged-page .unplugged-meta-value {
    font-size: 18px; font-weight: 800;
    color: var(--unp-text);
    line-height: 1.15; letter-spacing: -0.01em;
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.unplugged-page .unplugged-meta-value .num {
    font-size: 26px; font-weight: 900;
    letter-spacing: -0.03em; color: var(--unp-cyan);
}
.unplugged-page .unplugged-meta-sub {
    font-size: 12px; color: var(--unp-muted); line-height: 1.3;
}

/* CTA row */
.unplugged-page .unplugged-cta-row {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: clamp(18px, 2.4cqi, 24px);
}
.unplugged-page .unplugged-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s, background .15s, border-color .15s;
}
.unplugged-page .unplugged-btn:hover { transform: translateY(-1px); }
.unplugged-page .unplugged-btn:disabled {
    opacity: 0.55; cursor: not-allowed; transform: none;
}
.unplugged-page .unplugged-btn-primary {
    background: var(--unp-mag); color: #fff;
    box-shadow: 0 8px 24px rgba(255,46,136,0.35);
}
.unplugged-page .unplugged-btn-primary:hover {
    background: #ff4d9b;
    box-shadow: 0 10px 28px rgba(255,46,136,0.45);
}
.unplugged-page .unplugged-btn-ghost {
    background: rgba(255,255,255,0.04); color: var(--unp-text);
    border-color: var(--unp-line-strong);
}
.unplugged-page .unplugged-btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* =====================================================================
   SECTION HEADERS (display style)
   ===================================================================== */
.unplugged-page .unplugged-section { margin-bottom: clamp(24px, 3.5cqi, 40px); }
.unplugged-page .unplugged-section-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: clamp(16px, 2.2cqi, 22px);
}
.unplugged-page .unplugged-eyebrow {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--unp-cyan);
    margin: 0 0 6px;
}
.unplugged-page .unplugged-eyebrow-muted { color: var(--unp-muted); }
.unplugged-page .unplugged-eyebrow-mag   { color: var(--unp-mag); }
.unplugged-page .unplugged-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 5cqi, 64px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0;
    text-transform: uppercase;
}
.unplugged-page .unplugged-section-meta {
    font-size: 12px; color: var(--unp-muted);
    text-transform: uppercase; letter-spacing: 0.18em;
    font-weight: 600;
}

/* =====================================================================
   PROGRAMMA + INSCHRIJVEN side-by-side
   ===================================================================== */
.unplugged-page .unplugged-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 2.4cqi, 24px);
}
@container (min-width: 800px) {
    .unplugged-page .unplugged-grid-2 { grid-template-columns: 1.4fr 1fr; }
}
.unplugged-page .unplugged-card {
    background: var(--unp-panel);
    border: 1px solid var(--unp-line);
    border-radius: var(--unp-radius);
    padding: clamp(20px, 2.6cqi, 28px);
}

.unplugged-page .unplugged-prog { display: flex; flex-direction: column; }
.unplugged-page .unplugged-prog-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--unp-line);
}
.unplugged-page .unplugged-prog-row:first-child { border-top: none; }
.unplugged-page .unplugged-prog-time {
    font-size: 14px; font-weight: 700;
    color: var(--unp-cyan);
    font-variant-numeric: tabular-nums;
}
.unplugged-page .unplugged-prog-row-accent .unplugged-prog-time { color: var(--unp-mag); }
.unplugged-page .unplugged-prog-label { font-size: 14px; font-weight: 500; color: var(--unp-text); }
.unplugged-page .unplugged-prog-label small {
    display: block; font-weight: 400;
    color: var(--unp-muted); font-size: 12px; margin-top: 2px;
}

.unplugged-page .unplugged-signup-headline {
    font-size: clamp(24px, 3.4cqi, 36px);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 4px 0 14px;
    line-height: 1;
    text-transform: uppercase;
}
.unplugged-page .unplugged-signup-price {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 4px;
}
.unplugged-page .unplugged-signup-amount {
    font-size: clamp(40px, 5.4cqi, 60px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--unp-mag);
}
.unplugged-page .unplugged-signup-per {
    font-size: 13px; color: var(--unp-muted); font-weight: 600;
}
.unplugged-page .unplugged-signup-includes {
    font-size: 13px; color: var(--unp-muted);
    margin: 12px 0 18px; line-height: 1.5;
}
.unplugged-page .unplugged-signup-includes ul { margin: 0; padding: 0; list-style: none; }
.unplugged-page .unplugged-signup-includes li {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
}
.unplugged-page .unplugged-signup-includes li::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: var(--unp-cyan); flex: 0 0 auto;
}
.unplugged-page .unplugged-signup-cta { width: 100%; justify-content: center; }
.unplugged-page .unplugged-signup-hint {
    font-size: 12px; color: var(--unp-muted);
    margin-top: 10px; text-align: center;
}
.unplugged-page .unplugged-capacity {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--unp-line);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px;
}
.unplugged-page .unplugged-capacity-label { color: var(--unp-muted); }
.unplugged-page .unplugged-capacity-count {
    font-weight: 700; color: var(--unp-text);
    font-variant-numeric: tabular-nums;
}
.unplugged-page .unplugged-capacity-bar {
    height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.08); overflow: hidden;
    margin-top: 8px;
}
.unplugged-page .unplugged-capacity-bar > span {
    display: block; height: 100%;
    background: var(--unp-cyan);
    border-radius: 999px;
    transition: width .4s ease;
}

/* =====================================================================
   DJ feature — photo + display name
   ===================================================================== */
.unplugged-page .unplugged-dj {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3cqi, 32px);
    align-items: stretch;
    background: var(--unp-panel);
    border: 1px solid var(--unp-line);
    border-radius: var(--unp-radius);
    padding: clamp(20px, 2.6cqi, 28px);
    margin-bottom: clamp(16px, 2.4cqi, 24px);
    position: relative;
    overflow: hidden;
}
@container (min-width: 720px) {
    .unplugged-page .unplugged-dj { grid-template-columns: 0.9fr 1.1fr; }
}
.unplugged-page .unplugged-dj-photo {
    border-radius: var(--unp-radius);
    aspect-ratio: 4 / 5;
    background: #1a1a1a center/cover no-repeat;
    background-position: center 30%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 0 80px rgba(255,46,136,0.15);
    min-height: 280px;
}
.unplugged-page .unplugged-dj-body {
    display: flex; flex-direction: column;
    justify-content: center;
}
.unplugged-page .unplugged-dj-name {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(48px, 8cqi, 104px);
    line-height: 0.86;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin: 6px 0 16px;
}
.unplugged-page .unplugged-dj-name em { font-style: normal; color: var(--unp-mag); }
.unplugged-page .unplugged-dj-copy {
    font-size: clamp(14px, 1.5cqi, 16px);
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    max-width: 56ch;
    margin: 0 0 16px;
}
.unplugged-page .unplugged-dj-meta {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 12px; color: var(--unp-muted);
    text-transform: uppercase; letter-spacing: 0.16em;
    font-weight: 600;
}
.unplugged-page .unplugged-dj-meta span { display: inline-flex; align-items: center; gap: 6px; }
.unplugged-page .unplugged-dj-meta svg { color: var(--unp-mag); }

/* =====================================================================
   SFEERBEELDEN — moodboard
   ===================================================================== */
.unplugged-page .unplugged-mood {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: clamp(20px, 3cqi, 28px);
}
@container (min-width: 720px) {
    .unplugged-page .unplugged-mood {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 220px;
    }
}
/* Op mobiel (smalle container) alleen de Padel-slider tonen */
@container (max-width: 719px) {
    .unplugged-page .unplugged-mood-cell-bbq,
    .unplugged-page .unplugged-mood-cell-crowd { display: none; }
}
.unplugged-page .unplugged-mood-cell {
    border-radius: var(--unp-radius);
    overflow: hidden;
    position: relative;
    background: var(--unp-panel-2);
    min-height: 180px;
    border: 1px solid var(--unp-line);
}
.unplugged-page .unplugged-mood-cell::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(6,8,13,0.65) 100%);
    pointer-events: none;
}
.unplugged-page .unplugged-mood-cell-padel {
    background: #0a0f1a url('../../uploads/unplugged/mood-padel.jpeg') center 30% / cover no-repeat;
    background-size: 175%;
}

/* Slider — slides cross-faden via .is-active class */
.unplugged-page .unplugged-mood-cell-slider {
    /* slides nemen het beeld over, basis-bg uit class kan dus weg */
    background-image: none;
}
.unplugged-page .unplugged-mood-slide {
    position: absolute; inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity .6s ease-in-out;
    will-change: opacity;
}
.unplugged-page .unplugged-mood-slide.is-active { opacity: 1; }

/* Pijltjes — verschijnen bij hover (op touch-devices altijd zichtbaar) */
.unplugged-page .unplugged-mood-arrow {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 38px; height: 38px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    background: rgba(6,8,13,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.92);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 1;
    transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.unplugged-page .unplugged-mood-arrow:hover {
    background: rgba(6,8,13,0.85);
    color: var(--unp-cyan);
}
.unplugged-page .unplugged-mood-arrow:active { transform: translateY(-50%) scale(0.94); }
.unplugged-page .unplugged-mood-arrow-prev { left: 10px; }
.unplugged-page .unplugged-mood-arrow-next { right: 10px; }
@media (hover: hover) {
    .unplugged-page .unplugged-mood-arrow { opacity: 0; }
    .unplugged-page .unplugged-mood-cell-slider:hover .unplugged-mood-arrow,
    .unplugged-page .unplugged-mood-arrow:focus-visible { opacity: 1; }
}
.unplugged-page .unplugged-mood-cell-bbq {
    background: #0a0f1a url('../../uploads/unplugged/mood-bbq.png') center / cover no-repeat;
}
.unplugged-page .unplugged-mood-cell-crowd {
    background: #0a0f1a url('../../uploads/unplugged/mood-crowd.png') center / cover no-repeat;
}
.unplugged-page .unplugged-mood-label {
    position: absolute; left: 16px; bottom: 14px; z-index: 1;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: rgba(255,255,255,0.85);
    background: rgba(6,8,13,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 10px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* =====================================================================
   EXTRAS row
   ===================================================================== */
.unplugged-page .unplugged-extras {
    display: grid; grid-template-columns: 1fr;
    gap: clamp(14px, 2cqi, 18px);
    margin-bottom: clamp(24px, 3cqi, 32px);
}
@container (min-width: 720px) {
    .unplugged-page .unplugged-extras { grid-template-columns: repeat(2, 1fr); }
}
.unplugged-page .unplugged-extra {
    background: var(--unp-panel);
    border: 1px solid var(--unp-line);
    border-radius: var(--unp-radius);
    padding: clamp(16px, 2cqi, 22px);
    display: flex; flex-direction: column; gap: 10px;
}
.unplugged-page .unplugged-extra-chip {
    align-self: flex-start;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--unp-cyan);
    background: var(--unp-cyan-soft);
    padding: 4px 10px; border-radius: 999px;
}
.unplugged-page .unplugged-extra-chip-mag {
    color: var(--unp-mag);
    background: var(--unp-mag-soft);
}
.unplugged-page .unplugged-extra-title {
    font-size: 18px; font-weight: 800; margin: 0;
    letter-spacing: -0.01em;
}
.unplugged-page .unplugged-extra-copy {
    font-size: 13px; color: var(--unp-muted); line-height: 1.5; margin: 0;
}
.unplugged-page .unplugged-extra-meta {
    margin-top: auto;
    font-size: 12px; color: var(--unp-muted);
    padding-top: 8px;
    display: flex; gap: 12px; flex-wrap: wrap;
}
.unplugged-page .unplugged-extra-meta span {
    display: inline-flex; align-items: center; gap: 6px;
}
.unplugged-page .unplugged-extra-meta svg { color: var(--unp-cyan); }

/* =====================================================================
   FAQ
   ===================================================================== */
.unplugged-page .unplugged-faq {
    background: var(--unp-panel);
    border: 1px solid var(--unp-line);
    border-radius: var(--unp-radius);
    padding: clamp(20px, 2.6cqi, 28px);
    margin-bottom: clamp(20px, 3cqi, 32px);
}
.unplugged-page .unplugged-faq-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 4.4cqi, 52px);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0 0 clamp(16px, 2.4cqi, 24px);
    text-transform: uppercase;
}
.unplugged-page .unplugged-faq-title em { font-style: normal; color: var(--unp-cyan); }
.unplugged-page .unplugged-faq-list { display: flex; flex-direction: column; }
.unplugged-page .unplugged-faq-item {
    border-top: 1px solid var(--unp-line);
}
.unplugged-page .unplugged-faq-item:first-child { border-top: none; }
.unplugged-page .unplugged-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    font-size: clamp(15px, 1.6cqi, 17px);
    font-weight: 700;
    color: var(--unp-text);
}
.unplugged-page .unplugged-faq-item summary::-webkit-details-marker { display: none; }
.unplugged-page .unplugged-faq-item summary::after {
    content: "";
    width: 14px; height: 14px;
    border-right: 2px solid var(--unp-cyan);
    border-bottom: 2px solid var(--unp-cyan);
    transform: rotate(45deg);
    flex: 0 0 auto;
    transition: transform .2s;
    margin-bottom: 4px;
}
.unplugged-page .unplugged-faq-item[open] summary::after {
    transform: rotate(-135deg);
    margin-bottom: -2px;
}
.unplugged-page .unplugged-faq-item summary:hover { color: var(--unp-cyan); }
.unplugged-page .unplugged-faq-item summary:hover::after { border-color: var(--unp-cyan); }
.unplugged-page .unplugged-faq-answer {
    padding: 0 0 18px;
    font-size: 14px;
    color: rgba(255,255,255,0.78);
    line-height: 1.6;
    max-width: 70ch;
}
.unplugged-page .unplugged-faq-answer p { margin: 0 0 10px; }
.unplugged-page .unplugged-faq-answer p:last-child { margin-bottom: 0; }
.unplugged-page .unplugged-faq-answer strong { color: var(--unp-text); font-weight: 700; }
.unplugged-page .unplugged-faq-answer a {
    color: var(--unp-cyan);
    text-decoration: underline;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.unplugged-page .unplugged-footer {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
    padding-top: clamp(20px, 3cqi, 28px);
    border-top: 1px solid var(--unp-line);
    font-size: 12px; color: var(--unp-muted);
}
.unplugged-page .unplugged-footer-brand {
    display: flex; align-items: center; gap: 10px;
}
.unplugged-page .unplugged-footer-padlz {
    font-weight: 900; color: var(--unp-text);
    font-size: 14px; letter-spacing: -0.01em;
}

/* =====================================================================
   EMPTY STATE
   ===================================================================== */
.unplugged-page .unplugged-empty {
    background: var(--unp-panel);
    border: 1px solid var(--unp-line);
    border-radius: var(--unp-radius);
    padding: clamp(40px, 6cqi, 80px) clamp(24px, 4cqi, 48px);
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.unplugged-page .unplugged-empty-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(40px, 7cqi, 80px);
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin: 0;
    color: var(--unp-text);
}
.unplugged-page .unplugged-empty-title .accent { color: var(--unp-cyan); }
.unplugged-page .unplugged-empty-copy {
    font-size: 14px; color: var(--unp-muted);
    max-width: 480px; line-height: 1.5;
    margin: 0;
}

/* =====================================================================
   AGENDA HERO BANNER (op /agenda)
   ===================================================================== */
.unplugged-hero-banner {
    position: relative;
    margin: 0 0 32px;
    padding: 32px 28px;
    background: #131b2c;
    color: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    isolation: isolate;
}
.unplugged-hero-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}
.unplugged-hero-banner__spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.unplugged-hero-banner__spot.cyan {
    background: radial-gradient(70% 60% at 0% 0%, rgba(25,180,255,0.18), transparent 60%);
}
.unplugged-hero-banner__spot.mag {
    background: radial-gradient(60% 50% at 100% 100%, rgba(255,46,136,0.14), transparent 60%);
}
.unplugged-hero-banner__inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
@media (max-width: 720px) {
    .unplugged-hero-banner__inner { grid-template-columns: 1fr; }
}
.unplugged-hero-banner__kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 11px; letter-spacing: 0.18em;
    color: #ff2e88;
    background: rgba(255,46,136,0.12);
    border: 1px solid rgba(255,46,136,0.24);
    padding: 4px 10px; border-radius: 999px;
    font-weight: 700; text-transform: uppercase;
    margin-bottom: 12px;
}
.unplugged-hero-banner__title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.unplugged-hero-banner__title .accent { color: #19b4ff; }
.unplugged-hero-banner__meta {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}
.unplugged-hero-banner__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    background: #19b4ff; color: #06121e;
    border: none; border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.unplugged-hero-banner__cta:hover { background: #4cc4ff; transform: translateY(-1px); }
.unplugged-hero-banner__countdown {
    display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}
.unplugged-hero-banner__cd-cell {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px; min-width: 56px; text-align: center;
}
.unplugged-hero-banner__cd-cell .num {
    font-family: 'Inter', sans-serif;
    font-size: 18px; font-weight: 900; line-height: 1; color: #fff;
}
.unplugged-hero-banner__cd-cell .lbl {
    font-family: 'Inter', sans-serif;
    font-size: 9px; font-weight: 600;
    letter-spacing: 0.18em; color: rgba(255,255,255,0.5);
    margin-top: 2px; text-transform: uppercase;
}

/* =====================================================================
   SIDEBAR NAV-ITEM
   ===================================================================== */
.nav-link.nav-unplugged { position: relative; }
.nav-link.nav-unplugged svg { color: #19b4ff; }
.nav-link.nav-unplugged.active { color: #fff; }
.nav-link.nav-unplugged .nav-badge {
    margin-left: auto;
    background: linear-gradient(90deg, #19b4ff, #ff2e88);
    color: #fff;
    font-size: 9px; letter-spacing: 0.16em;
    padding: 3px 6px; border-radius: 999px;
    font-weight: 700;
}