/* ═══════════════════════════════════════════════════════════════
   sb-sales-landing.css — Shared styles for for-artists/venues/agents/promoters
   Extracted from identical inline <style> blocks across all 4 landing pages.
   ═══════════════════════════════════════════════════════════════ */

.how-card, .feature-card, .type-card { animation: sb-card-breathe 4s ease-in-out infinite; }

.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--sb-space-3xl) + 13px) var(--sb-space-lg) calc(var(--sb-space-3xl) - 35px); position: relative; overflow: hidden; }
/* hero-photo, hero-photo::after, hero-content, hero-tag, hero h1, hero-subtitle — now in sb-sales.js shared CSS */
.hero-ctas { display: flex; gap: var(--sb-space-md); justify-content: center; flex-wrap: wrap; }
.hero-ctas .sb-btn { padding: 16px 32px; font-size: var(--sb-text-base); }

h2:hover .gx-x { filter: brightness(1.3) drop-shadow(0 0 6px rgba(56,189,248,0.5)); }
.section-header { text-align: center; margin-bottom: var(--sb-space-xl); }
.section-header h2 { font-size: var(--sb-text-3xl); margin-bottom: var(--sb-space-sm); }
.section-header p { color: var(--sb-text-secondary); font-size: var(--sb-text-lg); max-width: 600px; margin: 0 auto; }

.benefits-section { padding: var(--sb-space-2xl) var(--sb-space-lg); }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sb-space-xl); max-width: var(--sb-max-width); margin: 0 auto; }
.benefit-card { text-align: center; padding: var(--sb-space-xl); background: linear-gradient(var(--sb-card-fill), var(--sb-card-fill)) padding-box, var(--sb-gradient) border-box; border: 1px solid transparent; border-radius: var(--sb-radius); animation: sb-card-breathe 4s ease-in-out infinite; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.benefit-card:hover { animation: none; transform: translateY(-3px); background: linear-gradient(rgba(56,189,248,0.06), rgba(99,102,241,0.04)), linear-gradient(var(--sb-card-fill), var(--sb-card-fill)) padding-box, var(--sb-gradient) border-box; box-shadow: 0 0 12px rgba(56,189,248,0.18), 0 0 20px rgba(99,102,241,0.08); }
.benefit-card:hover .benefit-icon { color: var(--sb-ice); }
.benefit-icon { width: 72px; height: 72px; margin: 0 auto var(--sb-space-md); display: flex; align-items: center; justify-content: center; font-size: 32px; background: linear-gradient(var(--sb-card-fill), var(--sb-card-fill)) padding-box, var(--sb-gradient) border-box; border: 1px solid transparent; border-radius: var(--sb-radius); }
.benefit-card h3 { font-size: var(--sb-text-lg); margin-bottom: var(--sb-space-sm); }
.benefit-card p { color: var(--sb-text-secondary); font-size: var(--sb-text-sm); line-height: 1.6; }

.features-section { padding: var(--sb-space-2xl) var(--sb-space-lg); }
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sb-space-lg); max-width: var(--sb-max-width); margin: 0 auto; }
.feature-card { background: linear-gradient(var(--sb-card-fill), var(--sb-card-fill)) padding-box, var(--sb-gradient) border-box; padding: var(--sb-space-xl); border: 1px solid transparent; border-radius: var(--sb-radius); display: flex; gap: var(--sb-space-md); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.feature-card:hover { animation: none; transform: translateY(-3px); background: linear-gradient(rgba(56,189,248,0.06), rgba(99,102,241,0.04)), linear-gradient(var(--sb-card-fill), var(--sb-card-fill)) padding-box, var(--sb-gradient) border-box; box-shadow: 0 0 12px rgba(56,189,248,0.18), 0 0 20px rgba(99,102,241,0.08); }
.feature-card:hover .feature-icon { color: var(--sb-ice); }
.feature-icon { font-size: 28px; flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.feature-card h4 { font-size: var(--sb-text-base); margin-bottom: var(--sb-space-xs); }
.feature-card p { font-size: var(--sb-text-sm); color: var(--sb-text-secondary); line-height: 1.5; }

.how-section { padding: var(--sb-space-2xl) var(--sb-space-lg); background: var(--sb-bg-surface); }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sb-space-xl); max-width: var(--sb-max-width); margin: 0 auto; }
.how-card { text-align: center; padding: var(--sb-space-xl); background: linear-gradient(var(--sb-card-fill), var(--sb-card-fill)) padding-box, var(--sb-gradient) border-box; border: 1px solid transparent; border-radius: var(--sb-radius); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.how-card:hover { animation: none; transform: translateY(-3px); background: linear-gradient(rgba(56,189,248,0.06), rgba(99,102,241,0.04)), linear-gradient(var(--sb-card-fill), var(--sb-card-fill)) padding-box, var(--sb-gradient) border-box; box-shadow: 0 0 12px rgba(56,189,248,0.18), 0 0 20px rgba(99,102,241,0.08); }
.how-card:hover .how-icon { color: var(--sb-ice); }
.how-step { font-size: var(--sb-text-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sb-ice); margin-bottom: var(--sb-space-sm); }
.how-card h3 { font-size: var(--sb-text-lg); margin-bottom: var(--sb-space-sm); }
.how-card p { color: var(--sb-text-secondary); font-size: var(--sb-text-sm); line-height: 1.6; }

/* .faq-* styles — now in sb-shared.css */

.cta-section { padding: var(--sb-space-2xl) var(--sb-space-lg); text-align: center; background: var(--sb-bg-surface); }
.cta-section h2 { font-size: var(--sb-text-3xl); margin-bottom: var(--sb-space-md); }
.cta-section p { color: var(--sb-text-secondary); font-size: var(--sb-text-lg); margin-bottom: var(--sb-space-xl); max-width: 500px; margin-left: auto; margin-right: auto; }

/* hero-divider — in sb-sales.js shared CSS */
/* .section-divider — now in sb-shared.css */

/* .reveal, .revealed, .reveal-stagger — in sb-sales.js shared CSS */
.benefits-section, .features-section, .how-section, .cta-section { position: relative; overflow: hidden; }
.section-header, .benefits-grid, .features-grid, .how-grid, .hero-ctas, .cta-section h2, .cta-section p { position: relative; z-index: 1; }

@media (max-width: 768px) {
    .benefits-grid, .how-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .hero { min-height: auto; padding: calc(var(--sb-topbar-height) + var(--sb-space-xl)) var(--sb-space-md) var(--sb-space-xl); }
    .hero h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
    .hero-subtitle { font-size: var(--sb-text-base); }
    .hero-ctas { flex-direction: column; align-items: center; }
    .hero-ctas .sb-btn { width: 100%; max-width: 280px; padding: 14px 24px; font-size: var(--sb-text-sm); }
    .benefits-section, .features-section, .how-section, .cta-section { padding: var(--sb-space-2xl) var(--sb-space-md); }
    .section-header h2 { font-size: var(--sb-text-2xl); }
    .section-header p { font-size: var(--sb-text-base); }
    .feature-card { flex-direction: column; text-align: center; }
    .feature-icon { margin: 0 auto; }
    .cta-section h2 { font-size: var(--sb-text-2xl); }
}