/* Promoter recruitment landing page (/promoters/).
   All rules scoped under .promoter-lp so nothing leaks to other pages.
   Headings use the site's Orbitron + magenta/cyan glow signature; colours
   reference the design tokens in variables.css. Body copy stays Arial. */

.promoter-lp {
    font-family: Arial, Helvetica, sans-serif;
    max-width: 1140px;
    margin: 0 auto;
    padding: 1rem 1rem 3.5rem;
}

/* ============ Shared brand elements ============ */
.promoter-lp .plp-accent-bar {
    display: block;
    width: 64px;
    height: 3px;
    margin: 1rem auto 1.25rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--rave-primary, #ff00ff), var(--rave-secondary, #00ffff));
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.55);
}

.promoter-lp .plp-section {
    margin-top: 4.5rem;
}

.promoter-lp .plp-section-head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.promoter-lp .plp-section-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: clamp(1.5rem, 4.5vw, 2.2rem);
    color: #fff;
    margin: 0;
    line-height: 1.15;
    text-shadow: 0 0 9px rgba(255, 0, 255, 0.6), 0 0 20px rgba(0, 255, 255, 0.3);
}

.promoter-lp .plp-section-lead {
    font-size: 1.02rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
    max-width: 600px;
    margin: 0 auto;
}

/* ============ Hero ============ */
.promoter-lp .plp-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: clamp(3rem, 8vw, 5.5rem) 1.5rem;
    border: 1px solid rgba(187, 134, 252, 0.32);
    background:
        radial-gradient(60% 55% at 18% 5%, rgba(255, 0, 255, 0.20), transparent 62%),
        radial-gradient(55% 50% at 86% 18%, rgba(0, 255, 255, 0.14), transparent 60%),
        radial-gradient(90% 80% at 50% 115%, rgba(153, 0, 255, 0.26), transparent 70%),
        linear-gradient(180deg, rgba(26, 0, 51, 0.65), rgba(8, 0, 18, 0.9));
    box-shadow: inset 0 0 70px rgba(153, 0, 255, 0.14), 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Faint neon grid, faded out toward the edges. */
.promoter-lp .plp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 0, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 25%, transparent 78%);
    mask-image: radial-gradient(70% 70% at 50% 30%, #000 25%, transparent 78%);
    pointer-events: none;
}

.promoter-lp .plp-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.promoter-lp .plp-eyebrow {
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.34em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--rave-secondary, #00ffff);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    margin: 0 0 1rem;
}

.promoter-lp .plp-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: clamp(2rem, 6.4vw, 3.4rem);
    line-height: 1.08;
    color: #fff;
    margin: 0;
    text-shadow: 0 0 12px rgba(255, 0, 255, 0.6), 0 0 28px rgba(0, 255, 255, 0.32);
}

.promoter-lp .plp-hero .plp-accent-bar {
    margin-top: 1.4rem;
}

.promoter-lp .plp-sub {
    font-size: clamp(1.02rem, 2.5vw, 1.22rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.promoter-lp .plp-cta-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Soft, slow pulse on the primary call to action. */
.promoter-lp .plp-btn-glow {
    animation: plpPulse 3.4s ease-in-out infinite;
}

@keyframes plpPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(255, 0, 255, 0.35); }
    50% { box-shadow: 0 0 26px rgba(255, 0, 255, 0.6); }
}

/* ============ At a glance (stat strip — sits inside the hero) ============ */
.promoter-lp .plp-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 720px;
    margin: 2.4rem auto 0;
    padding-top: 1.9rem;
    border-top: 1px solid rgba(187, 134, 252, 0.25);
}

.promoter-lp .plp-stat {
    flex: 1 1 150px;
    text-align: center;
    padding: 0.25rem 1rem;
}

.promoter-lp .plp-stat + .plp-stat {
    border-left: 1px solid rgba(187, 134, 252, 0.18);
}

.promoter-lp .plp-stat-num {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}

.promoter-lp .plp-stat-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ============ Fee line and data pledge (under the stat strip) ============ */
.promoter-lp .plp-fee-line {
    max-width: 600px;
    margin: 1.75rem auto 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    overflow-wrap: anywhere;
}

.promoter-lp .plp-pledge {
    max-width: 600px;
    margin: 1.1rem auto 0;
    padding: 0.95rem 1.2rem;
    border-radius: 14px;
    border: 1px solid var(--rave-cyan-glow-soft);
    background: rgba(0, 255, 255, 0.05);
    box-shadow: inset 0 0 18px rgba(0, 255, 255, 0.06);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--rave-text-primary);
    overflow-wrap: anywhere;
}

/* Secondary call to action beside "List your event": the same height as the
   primary button, its label centred, and free to wrap on a narrow phone. */
.promoter-lp .plp-btn-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 30px;
    font-size: 1.15rem;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ============ Benefit cards ============ */
.promoter-lp .plp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.promoter-lp .plp-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 2rem 1.6rem 1.75rem;
    background: linear-gradient(180deg, rgba(28, 0, 42, 0.66), rgba(14, 0, 24, 0.66));
    border: 1px solid rgba(255, 0, 255, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.promoter-lp .plp-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--rave-primary, #ff00ff), var(--rave-secondary, #00ffff));
    opacity: 0.85;
}

.promoter-lp .plp-card:hover {
    transform: translateY(-5px);
    border-color: rgba(187, 134, 252, 0.5);
    box-shadow: 0 14px 34px rgba(153, 0, 255, 0.28);
}

.promoter-lp .plp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    margin-bottom: 1.1rem;
    color: var(--rave-secondary, #00ffff);
    background: linear-gradient(155deg, rgba(255, 0, 255, 0.14), rgba(0, 255, 255, 0.08));
    border: 1px solid rgba(255, 0, 255, 0.3);
    box-shadow: inset 0 0 18px rgba(255, 0, 255, 0.12);
}

.promoter-lp .plp-icon svg {
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.5));
}

.promoter-lp .plp-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.12rem;
    color: #fff;
    margin: 0 0 0.6rem;
    letter-spacing: 0.01em;
}

.promoter-lp .plp-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 0.5rem;
}

.promoter-lp .plp-learn {
    color: #cba6ff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.promoter-lp .plp-learn:hover {
    color: var(--rave-secondary, #00ffff);
    border-bottom-color: var(--rave-secondary, #00ffff);
}

/* ============ How it works ============ */
.promoter-lp .plp-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Connecting line behind the numbered nodes on wider screens. */
.promoter-lp .plp-steps::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 18%;
    right: 18%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 0, 255, 0.5), rgba(0, 255, 255, 0.5));
    z-index: 0;
}

.promoter-lp .plp-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 0.5rem;
}

.promoter-lp .plp-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--rave-primary, #ff00ff);
    background: var(--rave-dark, #1a0033);
    border: 2px solid var(--rave-primary, #ff00ff);
    box-shadow: 0 0 16px rgba(255, 0, 255, 0.4);
}

.promoter-lp .plp-step h3 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff;
    margin: 0 0 0.35rem;
}

.promoter-lp .plp-step p {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
    margin: 0;
}

.promoter-lp .plp-note {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    max-width: 620px;
    margin: 2.5rem auto 0;
    font-size: 0.98rem;
}

/* ============ Final CTA band ============ */
.promoter-lp .plp-cta-band {
    position: relative;
    overflow: hidden;
    margin-top: 4.5rem;
    border-radius: 22px;
    padding: clamp(2.5rem, 6vw, 3.75rem) 1.5rem;
    text-align: center;
    border: 1px solid rgba(187, 134, 252, 0.35);
    background:
        radial-gradient(70% 120% at 50% 0%, rgba(255, 0, 255, 0.2), transparent 65%),
        linear-gradient(180deg, rgba(26, 0, 51, 0.7), rgba(10, 0, 20, 0.9));
    box-shadow: inset 0 0 60px rgba(153, 0, 255, 0.14);
}

.promoter-lp .plp-cta-band .plp-section-lead {
    margin-bottom: 1.6rem;
}

.promoter-lp .plp-finetext {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
    max-width: 600px;
    margin: 1.5rem auto 0;
}

.promoter-lp .plp-finetext a {
    color: rgba(187, 134, 252, 0.9);
}

/* ============ Promoter FAQ ============ */
.promoter-lp .plp-faq {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 0.85rem;
}

.promoter-lp .plp-faq-item {
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(28, 0, 42, 0.66), rgba(14, 0, 24, 0.66));
    border: 1px solid rgba(255, 0, 255, 0.2);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.promoter-lp .plp-faq-item[open] {
    border-color: rgba(187, 134, 252, 0.5);
    box-shadow: 0 10px 26px rgba(153, 0, 255, 0.22);
}

.promoter-lp .plp-faq-question {
    cursor: pointer;
    list-style: none;
    padding: 1.05rem 3rem 1.05rem 1.3rem;
    min-height: 44px;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.promoter-lp .plp-faq-question::-webkit-details-marker {
    display: none;
}

/* Same ▼ indicator as the main FAQ page (faq-page.css .arrow): small
   down triangle that rotates 180deg when the item is open. */
.promoter-lp .plp-faq-question::after {
    content: "\25BC";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.promoter-lp .plp-faq-item[open] .plp-faq-question::after {
    transform: translateY(-50%) rotate(180deg);
}

.promoter-lp .plp-faq-answer {
    margin: 0;
    padding: 0 1.3rem 1.2rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    line-height: 1.6;
}

.promoter-lp .plp-faq-answer a {
    color: rgba(187, 134, 252, 0.9);
}

/* ============ Entrance motion ============ */
.promoter-lp [data-animate] {
    opacity: 0;
    animation: plpFadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.promoter-lp .plp-delay-1 { animation-delay: 0.08s; }
.promoter-lp .plp-delay-2 { animation-delay: 0.16s; }
.promoter-lp .plp-delay-3 { animation-delay: 0.24s; }
.promoter-lp .plp-delay-4 { animation-delay: 0.34s; }

@keyframes plpFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* ============ Responsive ============ */
@media (max-width: 768px) {
    .promoter-lp .plp-grid,
    .promoter-lp .plp-steps {
        grid-template-columns: 1fr;
    }
    .promoter-lp .plp-steps::before { display: none; }
    .promoter-lp .plp-section { margin-top: 3.25rem; }
    .promoter-lp .plp-stat + .plp-stat { border-left: none; }
}

/* On a phone, when the call button is shown, the two hero buttons stack at
   one shared width (a lone "List your event" keeps its own width), and the
   call button's smaller label fits on one line at 390px. */
@media (max-width: 480px) {
    .promoter-lp .plp-cta-row .btn:not(:only-child) {
        flex: 1 1 100%;
        max-width: 260px;
    }
    .promoter-lp .plp-btn-call {
        padding: 13px 20px;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promoter-lp [data-animate] { opacity: 1; animation: none; }
    .promoter-lp .plp-btn-glow { animation: none; }
}